:root{
  color-scheme:dark;
  --bg:#101217;
  --panel:#181b22;
  --panel2:#20242d;
  --text:#f7f7f3;
  --muted:#969ca8;
  --line:rgba(255,255,255,.09);
  --accent:#ff795b;
  --accent2:#ffb35b;
  --mint:#8ee6bc;
  --danger:#ff6682;
  --shadow:0 22px 60px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100svh;overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.app-shell{width:min(720px,100%);margin:0 auto;min-height:100svh;padding:0 18px calc(34px + env(safe-area-inset-bottom))}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:8px;color:#f5f5f0;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.18em}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(255,121,91,.7)}
.top-actions{display:flex;gap:8px}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:850;cursor:pointer}
.hidden{display:none!important}

.hero{min-height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:18px 2px 60px;overflow:hidden}
.series-label{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--accent);margin:0 0 18px;text-transform:uppercase}
.hero h1{font-size:clamp(50px,15vw,82px);line-height:.91;letter-spacing:-.07em;margin:0;position:relative;z-index:2;font-weight:950}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:15px;line-height:1.8;color:#bec2ca;margin:24px 0 34px;position:relative;z-index:2}
.hero-visual{position:absolute;width:390px;height:390px;right:-160px;top:22%;pointer-events:none}
.orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.orbit-a{width:310px;height:310px;right:0;top:12px;animation:spin 17s linear infinite}
.orbit-a:after{content:"";position:absolute;width:13px;height:13px;background:var(--accent);border-radius:50%;top:28px;left:46px;box-shadow:0 0 30px rgba(255,121,91,.7)}
.orbit-b{width:235px;height:235px;right:38px;top:49px;animation:spin 11s linear reverse infinite}
.orbit-b:after{content:"";position:absolute;width:8px;height:8px;background:var(--mint);border-radius:50%;right:8px;bottom:62px}
.face{position:absolute;width:126px;height:126px;border-radius:43% 57% 48% 52%/48% 42% 58% 52%;right:92px;top:104px;background:linear-gradient(145deg,#2d323d,#16191f);box-shadow:0 24px 50px rgba(0,0,0,.33),inset 0 0 0 1px rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:29px;font-size:27px;color:#f7f5ef;transform:rotate(-7deg);animation:float 4s ease-in-out infinite}
.face i{position:absolute;width:32px;height:14px;border-bottom:3px solid #f7f5ef;border-radius:0 0 40px 40px;bottom:30px;transition:transform .35s ease}
.primary-btn{width:100%;min-height:58px;border:0;border-radius:18px;background:var(--accent);color:#1c0e0a;padding:0 19px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:950;cursor:pointer;box-shadow:0 14px 40px rgba(255,121,91,.19);position:relative;z-index:2;transition:transform .16s ease,filter .16s ease}
.primary-btn:active,.action-btn:active,.next-btn:active{transform:scale(.985)}
.primary-btn b{font-size:19px}
.microcopy{text-align:center;color:#666d79;font-size:12px;margin:13px 0 0}

.game{padding-top:12px}
.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.round-chip,.combo-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);padding:8px 11px}
.round-chip span,.combo-chip span{font-size:12px;font-weight:900;letter-spacing:.14em;color:#7e8591}
.round-chip b,.combo-chip b{font-size:12px}
.combo-chip.hot{border-color:rgba(255,121,91,.42);background:rgba(255,121,91,.08);color:#ff997f}
.mood-panel{margin-bottom:16px;padding:15px 16px 13px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.mood-row{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px;color:#aeb3bd;font-size:12px}.mood-row b{font-size:22px;color:#fff;line-height:1}
.mood-track{height:9px;border-radius:999px;background:#0a0c10;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.mood-track i{display:block;height:100%;width:64%;border-radius:inherit;background:linear-gradient(90deg,var(--danger),var(--accent2),var(--mint));transition:width .55s cubic-bezier(.2,.8,.2,1)}
.mood-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#545b66}
.event-card{min-height:226px;border-radius:28px;padding:20px;position:relative;overflow:hidden;background:linear-gradient(145deg,#242833,#171a21);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow);transition:transform .24s ease,box-shadow .24s ease}
.event-card:before{content:"";position:absolute;width:210px;height:210px;right:-70px;top:-95px;border-radius:50%;background:radial-gradient(circle,rgba(255,121,91,.16),transparent 68%)}
.event-card.shake{animation:cardShake .38s ease}
.event-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.event-icon{width:54px;height:54px;border-radius:17px;background:#11141a;display:grid;place-items:center;font-size:28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.locked-pill{font-size:12px;font-weight:850;letter-spacing:.08em;color:#ffad9b;border:1px solid rgba(255,121,91,.24);background:rgba(255,121,91,.06);padding:7px 9px;border-radius:999px}
.event-card h2{position:relative;z-index:2;font-size:clamp(28px,7vw,38px);line-height:1.08;letter-spacing:-.045em;margin:25px 0 10px;max-width:92%}
.event-card p{position:relative;z-index:2;margin:0;color:#9ca2ad;font-size:12px;line-height:1.65}
.impact-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:2}.impact-tag{font-size:12px;font-weight:850;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:6px 8px;color:#bfc4cc}
.prompt-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:20px 2px 11px}
.prompt-row small{display:block;font-size:12px;font-weight:900;letter-spacing:.17em;color:var(--accent);margin-bottom:4px}.prompt-row strong{font-size:14px}
.prompt-row>span{font-variant-numeric:tabular-nums;width:35px;height:35px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:#c1c6cf}.prompt-row>span.urgent{color:#ff8a72;border-color:rgba(255,121,91,.35);animation:pulse 1s infinite}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-bottom:8px}
.action-btn{min-height:108px;border:1px solid var(--line);border-radius:21px;background:var(--panel);padding:13px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 52%);pointer-events:none}
.action-btn:hover{border-color:rgba(255,255,255,.2)}
.action-btn .a-icon{font-size:22px;display:block;margin-bottom:12px}.action-btn strong{display:block;font-size:12px;line-height:1.35}.action-btn small{display:block;color:#6f7682;font-size:12px;margin-top:5px;letter-spacing:.03em}
.action-btn.trap{border-style:dashed;background:#15171c}.action-btn.trap small{color:#8d6570}
.action-btn.correct{border-color:rgba(142,230,188,.48);background:rgba(142,230,188,.08)}.action-btn.correct:after{content:"✓";position:absolute;right:12px;top:11px;color:var(--mint);font-weight:950}.action-btn.disabled{pointer-events:none;opacity:.42}
.feedback{margin-top:10px;border:1px solid rgba(142,230,188,.18);border-radius:20px;background:rgba(142,230,188,.055);padding:14px;display:flex;gap:13px;align-items:flex-start}
.feedback.weak{border-color:rgba(255,179,91,.18);background:rgba(255,179,91,.05)}
.feedback.bad{border-color:rgba(255,102,130,.18);background:rgba(255,102,130,.05)}
.feedback-score{min-width:48px;height:48px;border-radius:15px;background:rgba(142,230,188,.1);display:grid;place-items:center;color:var(--mint);font-size:14px;font-weight:950}.feedback.weak .feedback-score{color:var(--accent2);background:rgba(255,179,91,.08)}.feedback.bad .feedback-score{color:#ff8299;background:rgba(255,102,130,.08)}
.feedback-copy strong{font-size:12px}.feedback-copy p{margin:5px 0 0;color:#8e959f;font-size:12px;line-height:1.55}
.next-btn{width:100%;height:54px;margin:10px 0 26px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:#f2f1ec;color:#111319;font-size:12px;font-weight:950;display:flex;align-items:center;justify-content:space-between;padding:0 17px;cursor:pointer}
.next-btn span{font-size:18px}

.result{padding:34px 0 56px;text-align:center}.result .series-label{text-align:center}.result-ring{width:170px;height:170px;border-radius:50%;margin:12px auto 25px;border:1px solid rgba(255,121,91,.25);background:radial-gradient(circle,rgba(255,121,91,.13),rgba(255,121,91,.025) 60%,transparent 61%);display:grid;place-content:center;box-shadow:0 0 0 16px rgba(255,121,91,.025),0 0 0 32px rgba(255,121,91,.012)}
.result-ring span{font-size:52px;line-height:.9;font-weight:950;letter-spacing:-.06em}.result-ring small{font-size:12px;letter-spacing:.16em;color:#a56b5f;margin-top:8px;font-weight:900}
.result h2{font-size:clamp(34px,9vw,52px);letter-spacing:-.055em;line-height:1.02;margin:0}.result-lead{color:#9ba1ab;line-height:1.8;font-size:12px;max-width:470px;margin:18px auto 26px}.skill-card,.reflex-card{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:18px;margin-top:12px}.skill-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8d949f}.skill-head b{color:#fff}.skill-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.skill-badge{font-size:12px;padding:8px 10px;border-radius:999px;background:#11141a;border:1px solid var(--line);color:#cbd0d7}.reflex-card{background:linear-gradient(145deg,rgba(255,121,91,.12),rgba(255,179,91,.035));border-color:rgba(255,121,91,.18)}.reflex-card span{font-size:12px;letter-spacing:.14em;color:#d88775;font-weight:900}.reflex-card strong{display:block;font-size:22px;margin-top:11px;letter-spacing:-.03em}.reflex-card p{font-size:12px;color:#8f817e;margin:7px 0 0}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.ghost-btn{border:1px solid var(--line);background:transparent;border-radius:18px;font-size:12px;font-weight:850;cursor:pointer}.streak{font-size:12px;color:#666d78;margin:14px 0 0}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 13px;border-radius:999px;background:#f4f3ee;color:#111319;font-size:12px;font-weight:850;box-shadow:var(--shadow);transition:.22s ease;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.64);backdrop-filter:blur(8px)}.modal-sheet{position:relative;width:min(720px,100%);background:#171a20;border:1px solid var(--line);border-radius:30px 30px 0 0;padding:16px 20px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -30px 80px rgba(0,0,0,.45)}.modal-grab{width:38px;height:4px;border-radius:99px;background:#454a52;margin:0 auto 18px}.modal-close{position:absolute;right:18px;top:16px;border:0;background:transparent;color:#8b919a;font-size:25px;cursor:pointer}.modal-sheet h2{font-size:36px;line-height:1.02;letter-spacing:-.05em;margin:0 0 22px}.howto{display:grid;gap:9px}.howto>div{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:17px;background:#121419}.howto b{width:30px;height:30px;border-radius:10px;background:rgba(255,121,91,.1);color:var(--accent);display:grid;place-items:center;font-size:12px}.howto p{margin:0;color:#a3a9b2;font-size:12px;line-height:1.55}.note-text{font-size:12px;line-height:1.7;color:#727985;margin:16px 2px 18px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-11px) rotate(-3deg)}}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,121,91,.05)}}
@keyframes cardShake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px) rotate(-.5deg)}65%{transform:translateX(5px) rotate(.5deg)}}
@media(max-width:440px){.app-shell{padding-left:13px;padding-right:13px}.topbar{height:58px}.hero{min-height:calc(100svh - 74px)}.hero-visual{right:-205px;top:24%}.event-card{min-height:214px;border-radius:24px}.event-card h2{font-size:29px}.action-btn{min-height:101px}.result-actions{grid-template-columns:1fr}.ghost-btn{height:54px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}