html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:Pretendard,system-ui,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;left:50%;top:50%;width:1600px;height:900px;transform-origin:center;overflow:hidden}
#shake,#gl,#ui,#fx,#flash,#vignette,#big{position:absolute;left:0;top:0;width:1600px;height:900px}
#ui,#fx,#flash,#vignette,#big{pointer-events:none}
#flash{background:radial-gradient(ellipse at 50% 45%,#fff 0%,rgba(255,250,230,.85) 35%,rgba(255,250,230,0) 75%);opacity:0}
#vignette{box-shadow:inset 0 0 160px 40px rgba(255,40,20,.85);opacity:0}
#big{display:flex;align-items:center;justify-content:center;flex-direction:column}
.bigtxt{font-weight:900;color:#fff;-webkit-text-stroke:10px #1a0a06;paint-order:stroke fill;letter-spacing:-.02em;text-align:center;line-height:1}
.pop{position:absolute;transform:translate(-50%,-50%);font-weight:900;white-space:nowrap;-webkit-text-stroke:6px rgba(0,0,0,.7);paint-order:stroke fill}

/* interior colours: day / night */
.int-dark{fill:#24272e} .night .int-dark{fill:#0e1014}
.pillar{fill:#2b2f37} .night .pillar{fill:#101217}
.dash-s1{stop-color:#4d5360} .dash-s2{stop-color:#202329}
.night .dash-s1{stop-color:#1c1f27} .night .dash-s2{stop-color:#08090c}
.dash-lip{stroke:#646b78} .night .dash-lip{stroke:#2a2e38}
.hood{fill:#2c3038} .night .hood{fill:#121419}
.screen{fill:#0d1017} .night .screen{fill:#06080d}
.vent{fill:#1b1e24} .night .vent{fill:#08090b}
.rim{stroke:#3a3f49} .night .rim{stroke:#1a1c22}
.rim-hi{stroke:#7b8391} .night .rim-hi{stroke:#363a44}
.spoke{fill:#2a2d34} .night .spoke{fill:#121418}
.hub{fill:#25282f} .night .hub{fill:#111317}
.pad{fill:#31353e;stroke:#40454f} .night .pad{fill:#191b20;stroke:#24272d}
.stalk{stroke:#16181c} .night .stalk{stroke:#0a0b0d}
.knob{fill:#22252b} .night .knob{fill:#0f1013}
.skin{fill:#f1c7a2} .night .skin{fill:#b08670}
.hl{stroke:#9b6646} .night .hl{stroke:#5c3f2f}
.sleeve{stroke:#35517c} .night .sleeve{stroke:#1b2a42}
.cuff{stroke:#eef1f6} .night .cuff{stroke:#7f858e}
.mirror-body{fill:#2b3e63} .night .mirror-body{fill:#141d30}
.mg1{stop-color:#a7d4f6} .mg2{stop-color:#e9f5ff}
.night .mg1{stop-color:#0a0f22} .night .mg2{stop-color:#1f2748}
.gauge-ring{stroke:#5a6170} .night .gauge-ring{stroke:#36e0ff}
.gtext{fill:#cfd6e2} .night .gtext{fill:#9ff0ff}
.navline{stroke:#3c6fd8} .night .navline{stroke:#46b8ff}
.night-only{display:none} .night .night-only{display:inline}

.t{font-family:Pretendard,system-ui,sans-serif;fill:#fff;font-weight:800;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:4px;stroke-linejoin:round}
.tn{font-family:Pretendard,system-ui,sans-serif;font-weight:700}

/* overlays */
.card-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,8,16,.45);backdrop-filter:blur(2px)}
.card-wrap.hidden{display:none}
.card{width:640px;padding:36px 44px 28px;border-radius:28px;background:rgba(16,18,26,.92);color:#fff;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.card h1{margin:0;font-size:56px;font-weight:900;letter-spacing:-.03em}
.card .sub{margin:6px 0 18px;font-size:19px;opacity:.75}
.card .row{display:flex;gap:12px;justify-content:center;margin:18px 0}
.card .mode{flex:1;font:800 22px Pretendard,system-ui;padding:16px;border-radius:16px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.card .mode.on{border-color:#ffb21e;background:rgba(255,178,30,.18)}
.card .go{font:900 28px Pretendard,system-ui;padding:16px 64px;border-radius:999px;border:0;background:#ff4d3d;color:#fff;cursor:pointer;box-shadow:0 8px 0 #a32014}
.card .go:active{transform:translateY(4px);box-shadow:0 4px 0 #a32014}
.card .note{font-size:14px;opacity:.55;margin:18px 0 6px}
.card .lang{font:700 14px Pretendard,system-ui;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:4px 12px;cursor:pointer}
.ctrl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;text-align:left;font-size:18px;margin:0 auto;width:max-content}
.ctrl b{display:inline-block;min-width:74px;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.14);text-align:center;font-size:15px}
.stats{display:grid;grid-template-columns:1fr auto;gap:8px 24px;text-align:left;font-size:22px;width:360px;margin:0 auto}
.stats span:nth-child(even){font-weight:900;text-align:right}
.relief{font-size:64px;font-weight:900;color:#ffd23a;margin:10px 0 0}
#rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){
  #rotate{display:flex;position:fixed;inset:0;z-index:9;background:#0b0d14;color:#fff;align-items:center;justify-content:center;font:800 28px Pretendard,system-ui}
}
.card .note a.about{color:#9fd8ff;font-size:13px}

/* title screen: how-to */
.card.wide{width:1360px;padding:28px 40px 22px}
.card.wide h1{font-size:52px}
.card.wide .sub{margin:2px 0 12px}
.card .row.pick{margin:6px 0 16px;align-items:stretch}
.card .row.pick .gap{flex:.25}
.card .mode.dev{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:21px;padding:12px}
.card .mode.dev small{font-size:12px;font-weight:600;opacity:.6}
.card .mode.dev.on{border-color:#7fd3ff;background:rgba(127,211,255,.16)}
.card .mode.md{flex:.8;font-size:19px;padding:12px}
.howto{display:grid;grid-template-columns:.95fr 1.45fr .85fr;gap:14px;text-align:left;margin-bottom:18px}
.howto .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 18px}
.howto h3{margin:0 0 10px;font-size:20px;font-weight:900;color:#ffd23a}
.howto .kv{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.howto .kv b{align-self:flex-start;padding:3px 12px;border-radius:8px;background:rgba(255,255,255,.16);font-size:16px}
.howto .kv span{font-size:16px;opacity:.9}
.howto .sit{border-left:4px solid var(--c);padding:2px 0 2px 12px;margin-bottom:10px}
.howto .sit h4{margin:0;font-size:17px;color:var(--c)}
.howto .sit p{margin:2px 0 0;font-size:15px;line-height:1.45;opacity:.9}
.howto .sit b,.howto .goal b{color:#fff}
.howto .goal{text-align:center}
.howto .goal .big{font-size:64px;font-weight:900;color:#ff4d3d;line-height:1.05}
.howto .goal .gl{font-size:18px;font-weight:800;margin:4px 0 10px;line-height:1.4}
.howto .goal ul{list-style:none;padding:0;margin:0;font-size:14px;opacity:.85;line-height:1.7}

/* touch: everything on the start card is read on a small phone, so make it bigger */
.touch .card.wide{width:1520px;padding:22px 34px 18px}
.touch .card.wide h1{font-size:56px}
.touch .card .sub{font-size:22px}
.touch .card .mode.dev,.touch .card .mode.md{font-size:26px}
.touch .howto h3{font-size:26px}
.touch .howto .kv b,.touch .howto .kv span{font-size:22px}
.touch .howto .sit h4{font-size:22px}
.touch .howto .sit p{font-size:19px}
.touch .howto .goal .gl{font-size:24px}
.touch .howto .goal ul{font-size:19px}
.touch .card .go{font-size:36px;padding:18px 90px}
.touch .card .note{font-size:17px}
.touch .card .note a.about{font-size:17px}
.touch .card .lang{font-size:18px;padding:6px 16px}

/* top-right controls */
#topRight{position:absolute;right:18px;top:14px;display:flex;gap:8px;align-items:center;z-index:3}
#topRight button,#topRight a{font:800 15px Pretendard,system-ui;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:7px 13px;cursor:pointer;text-decoration:none}
#topRight a{font-weight:600;font-size:13px;opacity:.85}
.touch #topRight button{font-size:22px;padding:10px 18px}
.touch #topRight a{font-size:18px;padding:10px 14px}
#topRight.off{display:none}

/* onboarding */
.card.ob{width:1180px;min-height:600px;display:flex;flex-direction:column;padding:30px 44px 26px;text-align:center}
.ob .step{font-size:15px;font-weight:800;letter-spacing:.12em;color:#ffd23a;opacity:.9}
.ob h2{margin:6px 0 18px;font-size:42px;font-weight:900}
.ob .pg{flex:1;display:flex;flex-direction:column;justify-content:center}
.ob .nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.ob .dots{display:flex;gap:10px}
.ob .dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}
.ob .dots i.on{background:#ffd23a}
.ob .btn{font:800 22px Pretendard,system-ui;padding:12px 30px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;min-width:140px}
.ob .btn.pri{background:#ff4d3d;border-color:#ff4d3d;box-shadow:0 6px 0 #a32014}
.ob .btn.ghost{visibility:hidden}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
.cols2 .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px 22px}
.cols2 .box h3{margin:0 0 12px;font-size:24px}
.kv2{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;font-size:20px}
.kv2 b{padding:5px 14px;border-radius:10px;background:rgba(255,255,255,.16);font-size:18px;text-align:center}
.sits{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.sits .sit{background:rgba(255,255,255,.05);border-radius:18px;padding:16px 20px;border-left:6px solid var(--c)}
.sits .sit h4{margin:0 0 6px;font-size:24px;color:var(--c)}
.sits .sit p{margin:0;font-size:18px;line-height:1.5;opacity:.92}
.sits b{color:#fff}
.goal3 .big{font-size:120px;font-weight:900;color:#ff4d3d;line-height:1}
.goal3 .gl{font-size:30px;font-weight:800;margin:10px 0 18px;line-height:1.35}
.goal3 ul{list-style:none;padding:0;margin:0;font-size:20px;opacity:.85;line-height:1.9}
.goal3 b{color:#ffd23a}
/* selection */
.sel h2{margin:0 0 4px}
.sel .lbl{font-size:16px;font-weight:800;opacity:.6;margin:18px 0 8px;text-align:left}
.sel .row{display:flex;gap:14px}
.sel .opt{flex:1;font:800 26px Pretendard,system-ui;padding:22px 16px;border-radius:20px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.sel .opt small{font-size:14px;font-weight:600;opacity:.6}
.sel .opt.on{border-color:#ffb21e;background:rgba(255,178,30,.16)}
.sel .go{margin-top:24px}
.sel .foot{display:flex;justify-content:center;gap:14px;align-items:center;margin-top:14px}
/* result */
.card.res{width:760px}
.res .tier{font-size:20px;font-weight:900;color:#ffd23a;letter-spacing:.04em;margin-top:6px}
/* confirm */
.card.small{width:520px}
.card.small h2{margin:0 0 6px;font-size:32px}
.card.small .row{display:flex;gap:12px;justify-content:center;margin-top:18px}
.card.small button{font:800 22px Pretendard,system-ui;padding:12px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.card.small button.pri{background:#ff4d3d;border-color:#ff4d3d}
/* bigger on touch */
.touch .ob h2{font-size:50px}
.touch .kv2{font-size:26px} .touch .kv2 b{font-size:24px}
.touch .sits .sit h4{font-size:28px} .touch .sits .sit p{font-size:23px}
.touch .goal3 .gl{font-size:36px} .touch .goal3 ul{font-size:25px}
.touch .ob .btn{font-size:28px;padding:16px 38px}
.touch .card.ob{width:1400px}
.touch .sel .opt{font-size:32px}
.touch .card.small{width:700px} .touch .card.small h2{font-size:40px} .touch .card.small button{font-size:28px}
.mode-chip-late{fill:#ff4d3d}
#fade{position:absolute;left:0;top:0;width:1600px;height:900px;background:#000;opacity:0;pointer-events:none}
.cine #ui,.cine #fx{opacity:0}
.res .quote{font-size:34px;font-weight:900;margin:4px 0 6px;letter-spacing:-.02em}
.res .quote.q1{color:#ff6b55}.res .quote.q2{color:#fff}.res .quote.q3{color:#ffd23a}
.touch .res .quote{font-size:42px}
.pop.fire{font-size:64px;-webkit-text-stroke:0;filter:drop-shadow(0 0 10px rgba(255,90,20,.9))}
#pvBar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:16px;align-items:center;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 18px;z-index:5;font:700 16px Pretendard,system-ui;color:#fff}
#pvBar a{color:#9fd8ff;text-decoration:none}
.res .quote{font-size:30px;line-height:1.3}

/* result card: one quote style for all 8 endings, stats | relief side by side */
.card.res{width:980px;padding:28px 40px 26px}
.res h1{font-size:56px}
.res .quote,.res .quote.q1,.res .quote.q2,.res .quote.q3{font-size:30px;font-weight:900;color:#fff;line-height:1.3;margin:6px 0 6px;letter-spacing:-.02em;word-break:keep-all}
.res .resgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 22px}
.res .rbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px 26px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:170px}
.res .rbox .stats{width:100%;margin:0}
.res .rbox .relief{margin:2px 0}
.res .rbox .sub{margin:0}
.res .rbtns{display:flex;gap:14px;justify-content:center;align-items:center}
.res .chg{font:800 18px Pretendard,system-ui;padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.touch .card.res{width:1300px}
.touch .res .quote{font-size:40px}
.touch .res .stats{font-size:28px}
.touch .res .chg{font-size:24px;padding:18px 32px}

/* result card v3 (design review): story on top, numbers below in two columns */
.card.res{width:1000px;padding:26px 40px 26px}
.res .chips{display:flex;gap:8px;justify-content:center;margin-bottom:6px}
.res .chip{font-size:15px;font-weight:800;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:#e9ecf2}
.res .arr{font-size:30px;font-weight:900;opacity:.9;margin-top:4px}
.res .quote,.res .quote.q1,.res .quote.q2,.res .quote.q3{font-size:40px;font-weight:900;color:#fff;line-height:1.25;margin:4px 0 10px;letter-spacing:-.02em;word-break:keep-all}
.res .ename{display:inline-block;font-size:18px;font-weight:900;color:#1a1300;background:#ffd23a;padding:6px 18px;border-radius:999px}
.res .resgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 22px;align-items:stretch}
.res .rbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px 24px;min-height:0}
.res .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.res .hero .rl{font-size:17px;font-weight:800;color:#cfd5df}
.res .hero .relief{font-size:72px;line-height:1;margin:0;color:#ffd23a}
.res .rbar{width:100%;height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.res .rbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3fd6ff,#8fe08a,#ffd23a)}
.res .hero .rc{font-size:20px;font-weight:800;color:#fff;margin-top:4px;word-break:keep-all}
.res .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.res .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.05);border-radius:14px;padding:12px 6px}
.res .tile b{font-size:30px;font-weight:900;color:#fff;line-height:1.1}
.res .tile span{font-size:14px;font-weight:700;color:#cfd5df}
.res .rbtns{display:flex;gap:14px;justify-content:center;align-items:center}
.res .chg{min-height:56px}
.touch .card.res{width:1440px;padding:30px 50px}
.touch .res .chip{font-size:22px;padding:8px 18px}
.touch .res .arr{font-size:40px}
.touch .res .quote{font-size:54px}
.touch .res .ename{font-size:26px;padding:8px 24px}
.touch .res .hero .rl{font-size:24px}
.touch .res .hero .relief{font-size:96px}
.touch .res .hero .rc{font-size:28px}
.touch .res .tile b{font-size:42px}
.touch .res .tile span{font-size:20px}
.touch .res .chg{font-size:26px;min-height:76px;padding:18px 34px}

/* result popup v4: smaller, docked to the bottom so the ending scene stays visible */
.card-wrap.resmode{background:linear-gradient(to top,rgba(6,8,16,.55),rgba(6,8,16,0) 55%);backdrop-filter:none;align-items:flex-end;padding-bottom:28px;box-sizing:border-box}
.card.res{width:820px;padding:16px 28px 18px;border-radius:24px;background:rgba(16,18,26,.9)}
.res .chips{margin-bottom:2px}
.res .chip{font-size:13px;padding:4px 12px}
.res .arr{font-size:22px;margin-top:2px}
.res .quote,.res .quote.q1,.res .quote.q2,.res .quote.q3{font-size:30px;margin:2px 0 6px}
.res .ename{font-size:15px;padding:4px 14px}
.res .resgrid{gap:12px;margin:12px 0 14px}
.res .rbox{padding:12px 18px;border-radius:16px}
.res .hero{gap:4px}
.res .hero .rl{font-size:14px}
.res .hero .relief{font-size:54px}
.res .rbar{height:8px}
.res .hero .rc{font-size:16px}
.res .tiles{gap:8px;padding:10px}
.res .tile{padding:8px 6px;border-radius:12px}
.res .tile b{font-size:24px}
.res .tile span{font-size:12px}
.res .go{font-size:22px;padding:12px 48px;box-shadow:0 6px 0 #a32014}
.res .chg{font-size:15px;padding:10px 20px;min-height:46px}
.touch .card.res{width:1180px;padding:20px 36px 22px}
.touch .res .chip{font-size:18px}
.touch .res .arr{font-size:30px}
.touch .res .quote{font-size:42px}
.touch .res .ename{font-size:21px}
.touch .res .hero .rl{font-size:20px}
.touch .res .hero .relief{font-size:72px}
.touch .res .hero .rc{font-size:22px}
.touch .res .tile b{font-size:34px}
.touch .res .tile span{font-size:17px}
.touch .res .go{font-size:30px;padding:16px 64px}
.touch .res .chg{font-size:22px;min-height:64px;padding:14px 26px}

/* result popup v5: centred again, a bit bigger, info row top-left, tiles | relief */
.card-wrap.resmode{align-items:center;padding-bottom:0;background:rgba(6,8,16,.28);backdrop-filter:none}
.card.res{width:900px;padding:18px 30px 22px}
.res .rtop{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin-bottom:4px}
.res .rtop .chip{font-size:14px;padding:5px 12px}
.res .rtop .ename{font-size:15px;padding:5px 14px}
.res .arr{font-size:26px;margin-top:0}
.res .quote,.res .quote.q1,.res .quote.q2,.res .quote.q3{font-size:34px;margin:2px 0 4px}
.res .resgrid{gap:14px;margin:14px 0 18px}
.res .rbox{padding:14px 20px}
.res .hero .rl{font-size:15px}
.res .hero .relief{font-size:60px}
.res .hero .rc{font-size:22px;font-weight:900;color:#fff;margin-top:6px}
.res .tile b{font-size:27px}
.res .tile span{font-size:13px}
.res .go{font-size:24px;padding:13px 54px}
.res .chg{font-size:16px;padding:11px 22px;min-height:50px}
.touch .card.res{width:1280px}
.touch .res .rtop .chip{font-size:20px}
.touch .res .rtop .ename{font-size:21px}
.touch .res .arr{font-size:34px}
.touch .res .quote{font-size:46px}
.touch .res .hero .relief{font-size:80px}
.touch .res .hero .rc{font-size:30px}
.touch .res .tile b{font-size:38px}
.touch .res .tile span{font-size:18px}

/* result popup v6 */
.card-wrap{flex-direction:column}
.arrout{display:none}
.card-wrap.resmode .arrout{display:block;font-size:64px;font-weight:900;color:#fff;-webkit-text-stroke:8px rgba(10,12,20,.85);paint-order:stroke fill;margin-bottom:10px;letter-spacing:-.02em}
.card.res{width:1000px;padding:26px 38px 30px}
.res .rtop{justify-content:center;margin-bottom:12px}
.res .rtop .chip{font-size:15px;padding:6px 14px}
.res .rtop .ename{font-size:16px;padding:6px 16px}
.res .lines{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px;margin:4px 0 6px}
.res .lines .quote{font-size:42px;margin:0;color:#fff;font-weight:900;line-height:1.2;word-break:keep-all}
.res .lines .subq{font-size:22px;font-weight:800;color:#cfd5df;word-break:keep-all}
.res .resgrid{gap:16px;margin:22px 0 26px}
.res .rbox{padding:20px 24px;min-height:190px}
.res .hero .rl{font-size:16px}
.res .hero .relief{font-size:72px}
.res .rbar{height:10px}
.res .tiles{gap:12px;padding:14px}
.res .tile{padding:14px 6px}
.res .tile b{font-size:32px}
.res .tile span{font-size:14px}
.res .go{font-size:26px;padding:15px 60px}
.res .chg{font-size:17px;padding:12px 24px;min-height:54px}
.touch .card-wrap.resmode .arrout{font-size:84px}
.touch .card.res{width:1360px}
.touch .res .lines .quote{font-size:56px}
.touch .res .lines .subq{font-size:30px}
.touch .res .hero .relief{font-size:96px}
.touch .res .tile b{font-size:44px}
.touch .res .tile span{font-size:20px}
/* result: the punchline slides in a second after the quote; wider tracking on 도착! */
.card-wrap.resmode .arrout{letter-spacing:.08em}
.res .lines .subq{opacity:0;animation:subIn .7s cubic-bezier(.2,.8,.2,1) 1s forwards}
@keyframes subIn{from{opacity:0;transform:translateX(-18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* onboarding + selection v2: same tone as the result popup (headline outside, chips, boxes, red pill + outline button) */
.card-wrap{background:rgba(6,8,16,.5);backdrop-filter:none}
.card-wrap.obmode .arrout{display:block;font-size:56px;font-weight:900;color:#fff;-webkit-text-stroke:8px rgba(10,12,20,.85);paint-order:stroke fill;margin-bottom:12px;letter-spacing:.02em}
.card.ob{width:1000px;min-height:0;padding:22px 38px 28px;display:block}
.ob .rtop{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.ob .rtop .chip,.ob .rtop .ename{font-size:15px;font-weight:800;padding:6px 14px;border-radius:999px}
.ob .rtop .chip{background:rgba(255,255,255,.1);color:#e9ecf2}
.ob .rtop .ename{background:#ffd23a;color:#1a1300;font-weight:900}
.ob .pg{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.ob .rbtns,.sel .rbtns{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:24px}
.ob .go,.sel .go{font-size:26px;padding:15px 60px;margin:0;box-shadow:0 6px 0 #a32014}
.ob .chg,.sel .chg{font:800 17px Pretendard,system-ui;padding:12px 24px;min-height:54px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.cols2 .box,.sits .sit{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px}
.sits .sit{border-left:6px solid var(--c)}
.cols2 .box h3{font-size:22px;color:#ffd23a}
.goal3 .big{font-size:110px}
.card.sel{width:1000px;padding:24px 38px 26px}
.sel .lines{margin:0 0 18px}
.sel .lines .quote{font-size:36px;font-weight:900;letter-spacing:-.02em}
.sel .selgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sel .rbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:14px 16px 16px}
.sel .lbl{margin:0 0 10px;text-align:center;font-size:15px;color:#cfd5df;opacity:1}
.sel .row{gap:10px;margin:0}
.sel .opt{font-size:22px;padding:16px 10px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.06)}
.sel .opt.on{border-color:#ffd23a;background:rgba(255,210,58,.14)}
.sel .note{margin:14px 0 0}
.touch .card-wrap.obmode .arrout{font-size:76px}
.touch .card.ob,.touch .card.sel{width:1360px}
.touch .ob .rtop .chip,.touch .ob .rtop .ename{font-size:21px;padding:8px 18px}
.touch .ob .go,.touch .sel .go{font-size:34px;padding:18px 80px}
.touch .ob .chg,.touch .sel .chg{font-size:24px;min-height:70px;padding:14px 30px}
.touch .sel .lines .quote{font-size:48px}
.touch .sel .lbl{font-size:20px}
.touch .sel .opt{font-size:30px}
.touch .ob .pg{min-height:380px}

/* phone held upright: ask to turn it */
#rotate{display:none;position:fixed;inset:0;z-index:999;background:#0f1117;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:18px;font:900 24px/1.4 Pretendard,system-ui,sans-serif;text-align:center}
#rotate .ph{font-size:72px;animation:rot 1.6s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}