:root{--felt:#102e2a;--ink:#18382e;--muted:#b2c3b7;--gold:#e5c783;--paper:#f3efdf;--line:rgba(232,220,184,.18);--cyan:#7ff6ea;--ease:cubic-bezier(.22,1,.36,1);--tilt:60deg;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#f6f0dd;background:var(--felt);font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100dvh;background:radial-gradient(120% 80% at 50% -10%,#1f4a40 0,var(--felt) 60%) fixed;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{position:fixed;inset:auto 0 0;padding:20px;background:var(--paper);color:var(--ink);font-size:22px;text-align:center}

.app-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.topbar{display:flex;align-items:center;gap:20px;padding:12px 28px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-logo{display:block;width:auto;height:44px}
.topbar-note{margin-left:auto;font-size:20px;color:var(--gold);letter-spacing:.04em}
.toolbar{display:flex;gap:10px}
.icon-button,.reset-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border:1px solid var(--line);border-radius:999px;background:rgba(243,239,223,.06);font-size:20px}
.icon-button{width:48px;font-size:22px}
.reset-button{padding:0 18px}
.icon-button:hover,.reset-button:hover{background:rgba(243,239,223,.14)}

#view{display:flex;flex-direction:column;padding:14px 28px 20px;min-height:0;outline:none}
.screen{flex:1;min-height:0}
.is-entering{animation:enter .5s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(18px)}}
.eyebrow{margin:0 0 8px;font-size:20px;color:var(--gold);letter-spacing:.12em}
.key-hint{margin:14px 0 0;font-size:18px;color:var(--muted)}
.primary-button{display:inline-flex;align-items:center;gap:12px;padding:18px 40px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font-size:28px;font-weight:800;box-shadow:0 10px 30px rgba(229,199,131,.25);transition:transform .2s var(--ease)}
.primary-button:hover{transform:translateY(-2px)}
.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:2px solid var(--line);border-radius:999px;background:transparent;font-size:19px}
.ghost-button:hover{background:rgba(243,239,223,.1)}
.ghost-button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan)}
.fork-label{display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(229,199,131,.16);color:var(--gold);font-size:20px;font-weight:700}
.fork-label small{font-size:16px;opacity:.8}
.question{margin:2px 0 0;font-size:clamp(26px,2.2vw,42px);line-height:1.25}
.scene-line{margin:8px 0 0;font-size:clamp(19px,1.45vw,26px);line-height:1.35;color:#d6e6dc}

/* ---------- robot rig ---------- */
.bot{position:relative;width:100%;aspect-ratio:2/3}
.bot-flip,.bot-rig{position:absolute;inset:0}
.bot.is-flipped .bot-flip{transform:scaleX(-1)}
.bot-rig{transform-origin:50% 95%;animation:bot-breathe 2.6s ease-in-out infinite}
.part{position:absolute;inset:0;background:var(--sprite) center/100% 100% no-repeat}
.p-torso{clip-path:polygon(0 0,100% 0,100% 55%,68% 55%,68% 80%,32% 80%,32% 55%,0 55%)}
.p-arm-l{clip-path:inset(55% 68% 16% 0);transform-origin:27% 58%}
.p-arm-r{clip-path:inset(55% 0 16% 68%);transform-origin:73% 58%}
.p-leg-l{clip-path:inset(79% 50% 0 29%);transform-origin:40% 79%}
.p-leg-r{clip-path:inset(79% 28% 0 50%);transform-origin:60% 79%}
.bot[data-facing=side] .p-torso{clip-path:inset(0 0 21% 0)}
.bot[data-facing=side] .p-arm-l,.bot[data-facing=side] .p-arm-r{display:none}
.bot[data-facing=side] .p-leg-l,.bot[data-facing=side] .p-leg-r{clip-path:inset(78% 0 0 0);transform-origin:50% 79%}
.bot[data-facing=side] .p-leg-l{filter:brightness(.72)}
.bot-blink{position:absolute;top:30.5%;height:14%;border-radius:40%;background:#14171c;transform:scaleY(0);transform-origin:50% 0;animation:blink 4.6s infinite}
.b-l{left:34.5%;width:8.5%}
.b-r{left:57.5%;width:8.5%}
.bot:not([data-facing=front]) .bot-blink{display:none}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96.5%{transform:scaleY(1)}}
@keyframes bot-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.01,.985)}}
.bot.is-walking .bot-rig{animation:bot-bob .5s ease-in-out infinite}
@keyframes bot-bob{0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3.5%) rotate(-2deg)}75%{transform:translateY(-3.5%) rotate(2deg)}}
.bot.is-walking .p-leg-l{animation:leg-step .5s ease-in-out infinite}
.bot.is-walking .p-leg-r{animation:leg-step .5s ease-in-out -.25s infinite}
@keyframes leg-step{0%,50%,100%{transform:translateY(0) scaleY(1)}25%{transform:translateY(-4%) scaleY(.88)}}
.bot.is-walking .p-arm-l{animation:arm-swing .5s ease-in-out infinite}
.bot.is-walking .p-arm-r{animation:arm-swing .5s ease-in-out -.25s infinite}
@keyframes arm-swing{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-12deg)}}
.bot.is-walking[data-facing=side] .p-leg-l{animation:leg-swing .5s ease-in-out infinite}
.bot.is-walking[data-facing=side] .p-leg-r{animation:leg-swing .5s ease-in-out -.25s infinite}
@keyframes leg-swing{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
.bot.is-wave .p-arm-r{animation:wave 1.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-28deg)}40%,80%{transform:rotate(-12deg)}}
.bot.is-cheer .bot-rig{animation:cheer .6s var(--ease) 2}
.bot.is-cheer-loop .bot-rig{animation:cheer .9s var(--ease) infinite}
.bot.is-cheer .p-arm-l,.bot.is-cheer-loop .p-arm-l{animation:arm-up-l .6s ease-in-out infinite}
.bot.is-cheer .p-arm-r,.bot.is-cheer-loop .p-arm-r{animation:arm-up-r .6s ease-in-out infinite}
@keyframes cheer{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.06,.92)}45%{transform:translateY(-14%) scale(.97,1.04)}75%{transform:translateY(0) scale(1.04,.95)}}
@keyframes arm-up-l{0%,100%{transform:rotate(20deg)}50%{transform:rotate(60deg)}}
@keyframes arm-up-r{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-60deg)}}
.bot.is-powered{filter:drop-shadow(0 0 10px rgba(127,246,234,.95))}
.bot.is-charging{filter:drop-shadow(0 0 16px rgba(127,246,234,1)) brightness(1.12)}
.bot.is-charging .bot-rig{animation:charge .26s ease-in-out infinite alternate}
@keyframes charge{to{transform:translateY(-2%) scale(1.03)}}

/* ---------- start & result ---------- */
.start-screen,.result-screen{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;max-width:1500px;width:100%;margin:0 auto}
.start-copy h1{margin:0 0 28px;font-size:clamp(46px,5vw,90px);line-height:1.08}
.start-copy .start-title{display:grid;gap:.25em;margin:0 0 22px;font-size:clamp(44px,4.4vw,80px);line-height:1.1}
.start-title span{font-size:.58em;color:var(--gold)}
.start-title b{font-weight:inherit}
.start-title i{font-style:normal;white-space:nowrap}
.start-lead{margin:0 0 40px;font-size:clamp(24px,1.9vw,34px);color:#d6e6dc}
.start-stage{position:relative;display:grid;place-items:center;min-height:min(62vh,560px)}
.hero-bot{position:relative;z-index:1;width:min(78%,300px);animation:hover 3s ease-in-out infinite alternate}
.hero-pad{position:absolute;bottom:8%;width:62%;height:12%;border-radius:50%;background:radial-gradient(rgba(127,246,234,.5),transparent 70%);box-shadow:0 0 0 2px rgba(127,246,234,.25) inset}
@keyframes hover{to{transform:translateY(-12px)}}

/* ---------- map ---------- */
.map-screen{display:grid;grid-template-rows:auto 1fr auto auto;gap:10px}
.map-head,.arena-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
.head-side{display:grid;justify-items:end;gap:8px}
.intel{display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:999px;border:2px solid var(--block);background:rgba(0,0,0,.18);font-size:19px}
.intel-tag{padding:2px 10px;border-radius:999px;background:var(--block);color:#10241f;font-size:16px;font-weight:800}
.intel-bar{display:flex;width:120px;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.intel-bar i{background:var(--c)}
.inventory{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.slot{display:flex;align-items:center;gap:10px;min-width:165px;height:58px;padding:0 14px;border-radius:16px;background:var(--paper);color:var(--ink);font-size:20px;font-weight:700}
.slot.is-empty{background:transparent;border:2px dashed var(--line);color:var(--muted);font-weight:500}
.slot.is-new{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.5);box-shadow:0 0 0 0 rgba(127,246,234,.9)}60%{transform:scale(1.1)}100%{transform:scale(1);box-shadow:0 0 0 20px rgba(127,246,234,0)}}
.slot-index{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);font-size:16px}
.slot-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--gold);font-size:22px}

.stage-wrap{container-type:inline-size;align-self:center;justify-self:center;width:min(100%,calc((100dvh - 330px) * 16 / 9))}
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:28px;border:2px solid var(--line);perspective:100cqw;perspective-origin:50% 0%;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.stage.is-entering-3d .plane{animation:plane-in .8s var(--ease) both}
.stage.is-leaving .plane{animation:plane-out .45s ease-in forwards}
@keyframes plane-in{from{opacity:0;transform:translateY(-14cqw) rotateX(var(--tilt))}}
@keyframes plane-out{to{opacity:0;transform:translateY(18cqw) rotateX(var(--tilt)) scale(1.12)}}
.sky{position:absolute;inset:0;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.08) 1px,transparent 2px) 0 0/48px 48px,radial-gradient(70% 60% at 50% 0,#1c5048,transparent 70%),linear-gradient(#0b2421,#0f2f29 60%,#0c2622)}
.plane{position:absolute;left:5cqw;bottom:2.4cqw;width:90cqw;height:58cqw;transform-origin:50% 100%;transform:rotateX(var(--tilt));transform-style:preserve-3d;border-radius:2.4cqw;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.6px) 0 0/2.2cqw 2.2cqw,radial-gradient(60% 50% at 50% 60%,#2a6a52,transparent),linear-gradient(#1f5442,#1a4a3b)}
.plane-edge{position:absolute;left:0;top:100%;width:100%;height:3cqw;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#5b4632,#33261a);border-radius:0 0 1cqw 1cqw}
.plane-edge.side-l,.plane-edge.side-r{display:none}
.ground{position:absolute;inset:0;width:100%;height:100%;stroke:none}
.road-edge,.road,.road-dash,.road-hit{fill:none;stroke-linecap:round;stroke-linejoin:round}
.road-edge{stroke:rgba(0,0,0,.3);stroke-width:14.5}
.road{stroke:#dccb9e;stroke-width:13}
.road-dash{stroke:rgba(255,255,255,.5);stroke-width:.7;stroke-dasharray:2.4 3}
.road-hit{stroke:transparent;stroke-width:15;pointer-events:stroke;cursor:pointer}
.start-pad{fill:rgba(229,199,131,.2);stroke:var(--gold);stroke-width:.6}
.problem-zone{fill:rgba(0,0,0,.22);stroke:rgba(224,112,90,.6);stroke-width:.5;stroke-dasharray:2 1.5}

.stand{position:absolute;transform-style:preserve-3d;transform:translate(-50%,-100%) translateZ(var(--lift,0px)) rotateX(calc(var(--tilt) * -1));transform-origin:50% 100%;pointer-events:none}
.tree{width:var(--tw);aspect-ratio:40/64}
.tree svg{display:block;width:100%;height:100%;stroke:none;filter:drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.25))}
.bot-stand{width:8.4cqw;z-index:3}
.bot-shadow{position:absolute;width:6cqw;height:3.4cqw;border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),transparent 70%);transform:translate(-50%,-50%)}
.dust{position:absolute;width:2.2cqw;height:1.6cqw;border-radius:50%;background:rgba(240,228,190,.55);transform:translate(-50%,-50%);animation:dust .7s ease-out forwards;pointer-events:none}
@keyframes dust{from{transform:translate(-50%,-50%) scale(.4);opacity:.8}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}

.cube{position:absolute;width:var(--sx);height:var(--sy);transform:translate(-50%,-50%) translateZ(var(--z));transform-style:preserve-3d;pointer-events:none}
.cube i{position:absolute;display:block;background:var(--c)}
.cube .f-top{inset:0;transform:translateZ(var(--h));background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.08)),var(--c);border-radius:8%}
.cube .f-front{left:0;top:100%;width:100%;height:var(--h);transform-origin:50% 0;transform:rotateX(90deg);background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.22)),var(--c)}
.cube .f-left{left:0;top:0;width:var(--h);height:100%;transform-origin:0 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.28)),var(--c)}
.cube .f-right{left:100%;top:0;width:var(--h);height:100%;transform-origin:0 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.3)),var(--c)}
.problem-cube .f-top{box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.35)}
.portal{position:absolute;width:13cqw;height:13cqw;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(rgba(127,246,234,.55),rgba(127,246,234,.1) 55%,transparent 70%);border:.35cqw dashed rgba(127,246,234,.6);animation:spin 8s linear infinite;opacity:.6;transition:opacity .3s}
.portal.is-near{opacity:1;animation-duration:2s}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.holo{--lift:4.5cqw;width:8cqw;transition:left .55s var(--ease),top .55s var(--ease),opacity .4s .3s}
.holo-disc{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9e6,#e5c783 55%,#a8874a);color:var(--ink);font-size:3.2cqw;box-shadow:0 0 2.4cqw rgba(229,199,131,.75),0 0 0 .4cqw rgba(255,255,255,.35);animation:holo-float 2.2s ease-in-out infinite,holo-spin 3.2s ease-in-out infinite}
.holo-num{position:absolute;right:-.8cqw;top:-.8cqw;display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--ink);color:var(--gold);font-size:1.6cqw;font-weight:900}
.holo.is-near .holo-disc{box-shadow:0 0 3.6cqw rgba(127,246,234,.95),0 0 0 .5cqw rgba(127,246,234,.7)}
.holo.is-taken{opacity:0}
.holo.is-taken .holo-disc{animation:none;transform:scale(.4)}
@keyframes holo-float{0%,100%{translate:0 0}50%{translate:0 -.8cqw}}
@keyframes holo-spin{0%,100%{rotate:y -30deg}50%{rotate:y 30deg}}
.power-ring{position:absolute;width:6cqw;height:6cqw;border-radius:50%;border:.5cqw solid var(--cyan);transform:translate(-50%,-50%) scale(.3);animation:power 1s var(--ease) forwards;pointer-events:none}
.power-ring.is-late{animation-delay:.18s;border-color:var(--gold)}
@keyframes power{to{transform:translate(-50%,-50%) scale(4);opacity:0}}

.gate-row{position:absolute;z-index:5;left:0;right:0;top:2.2%;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:0 2.6cqw;pointer-events:none}
.gate-card{--gate:var(--gold);display:grid;align-content:start;gap:.5cqw;padding:1cqw 1.3cqw;border:3px solid transparent;border-top:max(5px,.5cqw) solid var(--gate);border-radius:1.6cqw;background:rgba(243,239,223,.96);color:var(--ink);text-align:left;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.35);pointer-events:auto;transition:transform .3s var(--ease),border-color .3s,opacity .3s,box-shadow .3s}
.gate-card:hover,.gate-card.is-near{border-color:var(--gate);transform:translateY(-.4cqw);box-shadow:0 0 0 .5cqw color-mix(in srgb,var(--gate) 40%,transparent),0 1cqw 2.4cqw rgba(0,0,0,.35)}
.gate-card.has-combo{box-shadow:0 0 0 .35cqw rgba(127,246,234,.4),0 1cqw 2.4cqw rgba(0,0,0,.35)}
.gate-card.is-picked{border-color:var(--gate);box-shadow:0 0 0 .8cqw color-mix(in srgb,var(--gate) 45%,transparent),0 0 4cqw var(--gate);transform:scale(1.02)}
.gate-card.is-dim{opacity:.3}
.gate-top{display:flex;align-items:flex-start;gap:.7cqw}
.gate-text{font-size:max(17px,1.75cqw);line-height:1.25;font-weight:900}
.gate-gear{display:flex;align-items:center;gap:.5cqw;min-width:0;padding-top:.45cqw;border-top:1px solid rgba(24,56,46,.14);font-size:max(13px,1.1cqw);font-weight:700;color:#2b5c4c;white-space:nowrap}
.gate-gear .gate-name{font-size:inherit;font-weight:800;color:var(--ink)}
.gate-gear .gate-effect{overflow:hidden;text-overflow:ellipsis}
.gate-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4cqw .6cqw}
.gate-meta:empty{display:none}
:root{--star:#ffd257;--s3:#3ddc97;--s2:#e5c783;--s1:#8fd3ff}
.stars{display:inline-flex;gap:1px;line-height:1;white-space:nowrap}
.stars i{font-style:normal;color:rgba(255,255,255,.18)}
.stars i.is-on{color:var(--star);text-shadow:0 0 .35em rgba(255,210,87,.55)}
.star-group+.star-group{margin-left:.35em}
.rating-badge{display:inline-flex;align-items:center;justify-self:start;gap:6px;padding:3px 12px;border-radius:999px;font-weight:900;white-space:nowrap;color:#10241f;background:var(--s1)}
.rating-badge .stars i{color:rgba(16,36,31,.22)}
.rating-badge .stars i.is-on{color:#10241f;text-shadow:none}
.rating-badge.is-s3{background:var(--s3)}
.rating-badge.is-s2{background:var(--s2)}
.rating-badge.is-s1{background:var(--s1)}
.gate-grade{display:none;font-size:max(14px,1.3cqw)}
.gate-row.is-revealed .gate-grade{display:inline-flex;animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
.gate-row.is-revealed .gate-card.is-dim{opacity:.55}
.gate-row.is-revealed .gate-card.is-dim .gate-gear,.gate-row.is-revealed .gate-card.is-dim .gate-meta{display:none}
.gate-row.is-revealed .gate-card.is-dim:has(.gate-grade.is-s3){opacity:.9;border-color:var(--s3)}
.opt-grade{display:none;grid-column:2;font-size:16px}
.option-list.is-revealed .opt-grade{display:inline-flex}
.gate-tip.is-s3 svg{fill:var(--s3)}
.gate-tip.is-s2 svg{fill:var(--s2)}
.gate-tip.is-s1 svg{fill:var(--s1)}
.answer-score{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(255,210,87,.1);border:1px solid rgba(255,210,87,.45);color:var(--star);font-size:18px;font-weight:700}
.answer-score .stars{font-size:20px}
.answer-score strong{font-size:22px;font-variant-numeric:tabular-nums}
.answer-score small{font-size:15px;opacity:.75}
.answer-score.is-pop{animation:pop .7s var(--ease)}
.slot-pts{margin-left:auto;padding:1px 8px;border-radius:999px;font-size:15px;color:#10241f}
.slot-pts.is-s3{background:var(--s3)}
.slot-pts.is-s2{background:var(--s2)}
.slot-pts.is-s1{background:var(--s1)}
.gate-tip{display:none;align-items:flex-start;gap:.5cqw;padding:.6cqw .8cqw;border-radius:1cqw;background:var(--ink);color:#fff;font-size:max(15px,1.35cqw);font-weight:700;line-height:1.35}
.gate-tip svg{flex:none;width:1.1em;height:1.1em;margin-top:.12em;fill:var(--gate);stroke:none}
.gate-card.is-picked .gate-gear,.gate-card.is-picked .gate-meta{display:none}
@container (max-width:1150px){.gate-gear .mini{display:none}}
.gate-card.is-picked .gate-tip{display:flex;animation:enter .35s var(--ease) both}
.question-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.scene-tag{padding:4px 14px;border-radius:999px;background:rgba(127,246,234,.12);border:1px solid rgba(127,246,234,.35);color:var(--cyan);font-size:20px;font-weight:700}
.gate-key{display:grid;place-items:center;flex:none;width:max(28px,2.3cqw);height:max(28px,2.3cqw);border-radius:50%;background:var(--gate,var(--ink));color:#10241f;font-size:max(16px,1.35cqw);font-weight:800}
.gate-icon{display:grid;place-items:center;flex:none;width:max(22px,1.9cqw);height:max(22px,1.9cqw);border-radius:.5cqw;background:rgba(24,56,46,.1);font-size:max(15px,1.25cqw)}
.gate-skill{font-size:max(12px,1.05cqw);font-weight:700;color:#5b6d62}
.gate-combo{display:flex;align-items:center;gap:.4cqw;padding:.1cqw .7cqw;border-radius:999px;background:var(--ink);color:var(--cyan);font-size:max(12px,1.05cqw);font-weight:700}
.stage-label{position:absolute;z-index:4;left:50%;top:33%;transform:translateX(-50%);padding:.2cqw 1cqw;border-radius:999px;background:rgba(224,112,90,.85);color:#fff;font-size:max(13px,1.1cqw);font-weight:800;letter-spacing:.1em;pointer-events:none}
.mini{--m:max(7px,.6cqw);display:inline-grid;flex:none;grid-template-columns:repeat(5,var(--m));gap:2px;padding:3px;border-radius:5px;background:rgba(24,56,46,.85)}
.mini i{display:block;width:var(--m);height:var(--m);border-radius:2px;background:rgba(255,255,255,.12)}
.mini i.is-on{background:var(--mini)}
.option-list{display:none}
.map-hint{margin:0;text-align:center;font-size:19px;color:var(--muted)}

/* ---------- arena ---------- */
.arena-screen{display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0;overflow-x:clip}
.scoreboard{display:flex;gap:12px}
.scoreboard>div{display:grid;min-width:128px;padding:8px 18px;border-radius:16px;background:rgba(243,239,223,.07);border:1px solid var(--line)}
.scoreboard span{font-size:18px;color:var(--muted)}
.scoreboard strong{font-size:38px;line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums}
.scoreboard b{font-weight:inherit}
.scoreboard small,.result-numbers small{font-size:.5em;color:var(--muted)}
.scoreboard>div.is-pop{animation:sb-pop .4s var(--ease)}
.scoreboard .stars{font-size:34px}
.sb-hint{font-size:14px!important;white-space:nowrap}
@keyframes sb-pop{50%{transform:scale(1.12);border-color:var(--cyan)}}
.arena-body{display:grid;grid-template-columns:minmax(290px,360px) 1fr;gap:26px;align-items:start;min-height:0}
.gear-panel{display:flex;flex-direction:column;gap:12px}
.gear-list{display:grid;gap:10px}
.gear-item{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line);border-radius:18px;background:rgba(243,239,223,.07);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.gear-item.is-active{background:var(--paper);color:var(--ink);border-color:var(--gold);transform:translateX(8px);box-shadow:0 0 0 4px rgba(229,199,131,.3)}
.gear-item.is-hit{animation:hit .45s var(--ease)}
@keyframes hit{40%{transform:translateX(8px) scale(1.05);box-shadow:0 0 30px rgba(127,246,234,.8)}}
.gear-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--ink);color:var(--gold);font-size:26px}
.gear-text{display:grid;gap:2px}
.gear-text strong{font-size:23px;line-height:1.15}
.gear-text>span{font-size:17px;opacity:.85}
.gear-side{display:grid;justify-items:end;gap:4px}
.gear-uses{display:flex;gap:4px}
.gear-uses i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;opacity:.35}
.gear-uses i.is-on{background:var(--gold);border-color:var(--gold);opacity:1}
.gear-item.is-active .gear-uses i.is-on{background:var(--ink);border-color:var(--ink)}
.gear-points{font-size:20px;color:var(--cyan);font-variant-numeric:tabular-nums}
.gear-item.is-active .gear-points{color:#1d6b5d}
.gear-item .mini{--m:8px}
.combo-list{display:grid;gap:8px}
.combo-chip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 14px;border-radius:14px;background:rgba(127,246,234,.1);color:var(--cyan);font-size:18px}
.combo-chip strong{color:#f6f0dd}
.battle-controls{display:flex;flex-wrap:wrap;gap:10px}

.battle{--cell:clamp(38px,min(calc((100dvh - 580px) / 6),calc((100vw - 520px) / 8)),96px);--gap:8px;--bw:clamp(64px,calc(var(--cell) * 1.05),104px);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.battle.is-shake{animation:shake .38s ease}
.battle.is-bump{animation:bump .25s ease}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
@keyframes bump{50%{transform:translateY(3px)}}
.battle-caption{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:6px 22px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:22px}
.battle-caption strong{font-size:26px;color:var(--gold)}
.cap-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--gold);color:var(--ink);font-size:20px}
.board-tilt{perspective:1300px}
.board{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);padding:14px 14px 20px;border-radius:24px;background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.32));border:1px solid var(--line);transform:rotateX(16deg);transform-origin:50% 100%;box-shadow:0 30px 40px -20px rgba(0,0,0,.5)}
.cell{position:relative;display:grid;place-content:center;justify-items:center;gap:2px;border-radius:18%;background:linear-gradient(160deg,rgba(255,255,255,.45),transparent 45%),var(--block);color:#10241f;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 6px 0 rgba(0,0,0,.28);transition:transform .2s var(--ease)}
.cell i{font-style:normal;font-size:calc(var(--cell) * .4);font-weight:900;line-height:1}
.cell span{font-size:max(13px,calc(var(--cell) * .18));font-weight:800;line-height:1}
.cell.is-empty{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.cell.is-aim{transform:translateY(-4px) scale(.94);filter:brightness(1.2);box-shadow:0 0 0 4px #fff,0 0 20px 6px rgba(127,246,234,.8)}
.cell.is-aim::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;animation:aim .3s ease-in-out infinite alternate}
.cell.is-core{box-shadow:0 0 0 5px var(--gold),0 0 26px 8px rgba(229,199,131,.9)}
@keyframes aim{to{opacity:.22}}
.cell.is-boom{animation:boom .38s var(--ease) forwards}
@keyframes boom{30%{transform:scale(1.18);filter:brightness(2.2)}100%{transform:scale(0) rotate(25deg);opacity:0}}
.cell.is-dropping{animation:drop .38s cubic-bezier(.3,1.35,.6,1) both}
@keyframes drop{from{translate:0 calc(var(--drop) * (var(--cell) + var(--gap)) * -1)}}
.floor{position:relative;width:100%;height:calc(var(--bw) * 1.5 + 10px);background:radial-gradient(60% 30% at 50% 95%,rgba(127,246,234,.16),transparent 70%)}
.floor-bot{position:absolute;bottom:6px;width:var(--bw);transform:translateX(-50%);z-index:4}
.floor-bot::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:12px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(2px);z-index:-1}
.fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.fx-canvas{position:fixed;inset:0;z-index:30;width:100vw;height:100vh;pointer-events:none}
.fx i{position:absolute;display:block}
.pop-text{transform:translate(-50%,-50%);white-space:nowrap;font-style:normal;font-weight:900;pointer-events:none;text-shadow:0 3px 12px rgba(0,0,0,.6);animation:pop-up 1.2s var(--ease) forwards}
.pop-text.is-score{font-size:48px;color:var(--gold)}
.pop-text.is-sub{font-size:26px;color:var(--cyan)}
.pop-text.is-banner{font-size:clamp(44px,5vw,80px);color:#fff;letter-spacing:.06em;-webkit-text-stroke:2px rgba(224,112,90,.9);animation:banner 1.1s var(--ease) forwards}
.pop-text.is-gold{-webkit-text-stroke:2px #a8874a;color:var(--gold)}
@keyframes pop-up{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}20%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-160%) scale(1);opacity:0}}
@keyframes banner{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-60%) scale(1.05);opacity:0}}

/* ---------- result ---------- */
.grade-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:20px}
.grade{display:inline-grid;padding:10px 34px 16px;border-radius:28px;background:rgba(229,199,131,.12);border:3px solid var(--gold);animation:stamp .7s cubic-bezier(.2,1.6,.4,1) .2s both}
@keyframes stamp{from{transform:scale(2.6) rotate(-12deg);opacity:0}}
.grade span{font-size:22px;color:var(--muted)}
.grade strong{font-size:clamp(60px,6.2vw,110px);line-height:1;color:var(--gold)}
.grade-excellent{border-color:var(--cyan);box-shadow:0 0 60px rgba(127,246,234,.4)}
.grade-excellent strong{color:var(--cyan)}
.ladder{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.ladder li{display:grid;justify-items:center;min-width:86px;padding:8px 10px;border-radius:14px;border:2px solid var(--line);color:var(--muted)}
.ladder li strong{font-size:22px}
.ladder li span{font-size:15px}
.ladder li.is-on{border-color:var(--gold);background:var(--gold);color:var(--ink);transform:translateY(-6px);animation:enter .5s var(--ease) .7s both}
.star-total{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.star-total .stars{font-size:clamp(30px,2.6vw,44px)}
.star-total .stars i.is-on{animation:star-in .4s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.5s + var(--i) * 90ms)}
@keyframes star-in{from{transform:scale(2.4) rotate(-30deg);opacity:0}}
.star-total strong{font-size:clamp(34px,3vw,52px);line-height:1;color:var(--star);font-variant-numeric:tabular-nums}
.star-total small{font-size:.5em;color:var(--muted)}
.result-numbers .stars{font-size:32px}
.result-numbers{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.result-numbers div{display:grid;min-width:150px;padding:10px 20px;border-radius:16px;background:rgba(243,239,223,.07);border:1px solid var(--line)}
.result-numbers span{font-size:19px;color:var(--muted)}
.result-numbers strong{font-size:44px;line-height:1.1;font-variant-numeric:tabular-nums}
.result-gear{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none;max-width:640px}
.result-gear li{display:grid;grid-template-columns:auto 130px 1fr auto auto;align-items:center;gap:12px;font-size:20px}
.result-gear strong{font-size:22px}
.result-gear .bar{height:14px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden}
.result-gear .bar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--gold),var(--cyan));animation:grow 1s var(--ease) .4s both;transform-origin:0 50%}
@keyframes grow{from{transform:scaleX(0)}}
.result-gear b{color:var(--cyan);font-variant-numeric:tabular-nums}
.result-gear small{font-size:16px;color:var(--muted)}
.result-combo{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:20px;color:var(--cyan)}
.result-actions{display:flex;gap:14px}
.habits{margin:0 0 18px;max-width:720px}
.habits h2{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;font-size:22px;color:var(--gold)}
.habits h2 small{font-size:17px;color:var(--star)}
.habits ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.habits li{display:grid;grid-template-columns:6.2em 1fr;align-items:center;gap:2px 12px;padding:8px 14px;border-radius:14px;background:rgba(243,239,223,.07);border:1px solid var(--line)}
.habit-tag{grid-row:span 3;align-self:center;flex-direction:column;gap:2px;padding:6px 10px;border-radius:14px;font-size:15px}
.habits strong{font-size:20px;line-height:1.3}
.habit-tip{font-size:17px;color:var(--muted);line-height:1.35}
.habit-best{font-size:16px;font-weight:700;color:var(--s3)}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;background:var(--c);animation:fall var(--d) linear var(--delay) infinite}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(var(--r))}}

/* ---------- battle fx v2 ---------- */
.pop-text.is-combo{transform-origin:100% 50%;font-size:clamp(30px,3vw,54px);color:#fff;letter-spacing:.04em;-webkit-text-stroke:2px var(--cyan);text-shadow:0 0 22px rgba(127,246,234,.8);animation:combo-pop .8s var(--ease) forwards}
@keyframes combo-pop{0%{transform:translate(-100%,-50%) scale(2) rotate(-8deg);opacity:0}25%{transform:translate(-100%,-50%) scale(1) rotate(-4deg);opacity:1}80%{opacity:1}100%{transform:translate(-100%,-80%) scale(.95) rotate(-4deg);opacity:0}}
.cell.is-boom{animation:boom .3s var(--ease) forwards}
@keyframes boom{25%{transform:scale(1.25);filter:brightness(2.6)}100%{transform:scale(0) rotate(35deg);opacity:0}}
.cell.is-dropping{animation-duration:.3s}

/* ---------- three.js 3D ---------- */
.gl-canvas{display:block;width:100%!important;height:100%!important;outline:none;touch-action:manipulation}
.gl-host{position:absolute;inset:0;z-index:1}
.stage.is-gl .gl-host{cursor:pointer;transition:opacity .45s ease-in,transform .45s ease-in}
.stage.is-gl.is-entering-3d .gl-host{animation:gl-in .6s ease-out both}
.stage.is-gl.is-leaving .gl-host{opacity:0;transform:scale(1.06)}
@keyframes gl-in{from{opacity:0}}
.hero-3d{position:relative;z-index:1;width:100%;height:min(62vh,560px)}
.floor-gl{top:-60%;z-index:4;pointer-events:none}
.has-3d .floor-bot .bot{visibility:hidden}

.toast{position:fixed;left:50%;top:46%;z-index:20;padding:18px 36px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:clamp(24px,2vw,36px);font-weight:800;box-shadow:0 0 0 6px rgba(127,246,234,.35),0 20px 50px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.toast.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (max-height:820px) and (min-width:761px){
  .topbar{padding:8px 24px}
  #view{padding:10px 24px 12px}
  .question{font-size:clamp(22px,2vw,32px)}
  .scene-line{margin-top:4px;font-size:18px}
  .slot{height:48px;min-width:140px;font-size:18px}
  .intel{font-size:17px;padding:4px 12px}
  .stage-wrap{width:min(100%,calc((100dvh - 288px) * 16 / 9))}
  .battle{--cell:clamp(38px,min(calc((100dvh - 425px) / 6),calc((100vw - 500px) / 8)),96px);--gap:6px;--bw:clamp(56px,calc(var(--cell) * 1),90px)}
  .battle-caption{min-height:44px;font-size:19px}
  .gear-item{padding:9px 12px}
  .scoreboard strong{font-size:30px}
  .arena-screen{gap:8px}
  .result-gear:has(~ .habits){display:none}
  .grade strong{font-size:clamp(52px,5vw,84px)}
  .result-numbers{margin-bottom:12px}
  .result-numbers strong{font-size:36px}
  .habits{margin-bottom:10px}
  .habits h2{margin-bottom:4px;font-size:19px}
  .habits ol{gap:5px}
  .habits li{grid-template-columns:auto 1fr;gap:0 10px;padding:4px 12px}
  .habit-tag{flex-direction:row;padding:3px 10px;border-radius:999px;font-size:14px}
  .habits strong{font-size:17px}
  .habit-tip{font-size:14px}
  .habit-best{font-size:14px}
  .grade-row{margin-bottom:10px}
  .grade{padding:6px 26px 10px}
  .star-total{margin-bottom:8px}
  .star-total .stars{font-size:28px}
  .star-total strong{font-size:32px}
  .result-numbers{gap:10px;margin-bottom:8px}
  .result-numbers div{padding:4px 14px;min-width:0}
  .result-numbers span{font-size:16px}
  .result-numbers .stars{font-size:24px}
  .result-combo{margin-bottom:8px;font-size:17px}
  .gate-tip{font-size:max(14px,1.2cqw);padding:.45cqw .7cqw}
}
@media (max-width:1100px) and (min-width:761px){
  .arena-body{grid-template-columns:280px 1fr;gap:16px}
  .battle{--cell:clamp(38px,min(calc((100dvh - 580px) / 6),calc((100vw - 420px) / 8)),96px)}
}
@media (max-width:760px){
  .topbar{gap:8px;padding:10px 12px}
  .brand-logo{height:30px}
  .icon-button,.reset-button{width:44px;height:44px}
  .battle{order:-1}
  .combo-list{display:none}
  .topbar-note{display:none}
  .toolbar{margin-left:auto}
  .reset-button span{display:none}
  .reset-button{width:48px;padding:0}
  #view{padding:12px 16px 18px}
  .start-screen,.result-screen{grid-template-columns:1fr;gap:12px}
  .start-stage{order:-1;min-height:220px}
  .hero-bot{width:140px}
  .hero-3d{height:240px}
  .map-head,.arena-head{grid-template-columns:1fr;gap:10px}
  .head-side{justify-items:stretch}
  .intel{font-size:16px;flex-wrap:wrap;border-radius:16px}
  .inventory{width:100%}
  .slot{flex:1;min-width:0;height:50px;padding:0 10px;font-size:16px}
  .slot-icon{width:30px;height:30px;font-size:18px}
  .stage-wrap{width:100%}
  .stage{border-radius:18px}
  .gate-row{gap:6px;padding:0 8px}
  .gate-card{padding:4px 6px;border-radius:10px;justify-self:center}
  .gate-text,.gate-gear,.gate-meta,.gate-card.is-picked .gate-tip,.gate-row.is-revealed .gate-grade{display:none}
  .stage-label{display:none}
  .option-list{display:grid;gap:10px}
  .option-button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:rgba(243,239,223,.07);text-align:left}
  .option-button strong{font-size:22px}
  .option-button>span:nth-child(3){grid-column:2;font-size:18px;color:var(--muted)}
  .option-button.is-near{border-color:var(--gate,var(--gold))}
  .option-button{border-left:6px solid var(--gate,var(--line))}
  .map-hint{font-size:17px}
  .scoreboard>div{flex:1;min-width:0;padding:6px 12px}
  .scoreboard strong{font-size:28px}
  .arena-body{grid-template-columns:1fr;gap:12px}
  .gear-list{grid-template-columns:repeat(3,1fr);gap:8px}
  .gear-item{grid-template-columns:1fr;justify-items:center;gap:4px;padding:10px 6px;text-align:center}
  .gear-item.is-active{transform:translateY(-3px)}
  .gear-text>span,.gear-item .mini{display:none}
  .gear-text strong{font-size:17px}
  .gear-icon{width:36px;height:36px;font-size:20px}
  .gear-side{justify-items:center}
  .combo-chip{font-size:16px}
  .battle-controls{order:5}
  .battle-controls .ghost-button{flex:1}
  .battle{--cell:calc((100vw - 32px - 28px - 7 * 5px) / 8);--gap:5px;--bw:64px}
  .board{padding:10px 10px 14px;border-radius:16px}
  .cell span{display:none}
  .battle-caption{font-size:17px;padding:6px 14px}
  .battle-caption strong{font-size:20px}
  .pop-text.is-score{font-size:34px}
  .grade-row{gap:12px}
  .ladder li{min-width:0;flex:1;padding:6px}
  .ladder li strong{font-size:18px}
  .result-gear li{grid-template-columns:auto 1fr auto;font-size:17px}
  .result-gear .bar,.result-gear small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- light theme (light-green background) ----------
   Colours only — no layout. Text that used to be pale gold / cyan on dark green now uses darker
   gold-ink / teal so it stays readable; translucent dark panels become white cards. */
:root{--felt:#e3f3e9;--muted:#55705f;--line:rgba(24,56,46,.16);--gold-ink:#946410;--teal:#0d8476;--panel:rgba(255,255,255,.78);--star-ink:#8a5d00;color:var(--ink)}
body{background:radial-gradient(120% 80% at 50% -10%,#f6fcf8 0,var(--felt) 62%) fixed}
button:focus-visible,a:focus-visible{outline-color:var(--teal)}
.topbar{background:rgba(255,255,255,.55);border-bottom-color:var(--line)}
.topbar-note,.eyebrow,.start-title span,.scoreboard strong,.battle-caption strong,.pop-text.is-score,.pop-text.is-gold,.grade strong,.habits h2{color:var(--gold-ink)}
.scene-line,.start-lead{color:#2f5546}
.icon-button,.reset-button,.intel,.scoreboard>div,.gear-item,.battle-caption,.result-numbers div,.habits li,.option-button{background:var(--panel)}
.icon-button:hover,.reset-button:hover,.ghost-button:hover{background:#fff}
.ghost-button[aria-pressed=true]{border-color:var(--teal);color:var(--teal)}
.fork-label{background:rgba(229,199,131,.32);color:#7a5208}
.slot{border:1px solid var(--line)}
.stage{box-shadow:0 18px 50px rgba(24,56,46,.18)}
.sky{background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.7) 1px,transparent 2px) 0 0/48px 48px,radial-gradient(70% 60% at 50% 0,#ffffff,transparent 70%),linear-gradient(#f3fbf6,#dcefe4 60%,#cfe7da)}
.stars i{color:rgba(24,56,46,.16)}
.stars i.is-on{color:#f5b301;text-shadow:0 1px 0 rgba(120,80,0,.35)}
.answer-score{background:rgba(245,179,1,.12);border-color:rgba(214,150,0,.45);color:var(--star-ink)}
.scene-tag{background:rgba(13,132,118,.1);border-color:rgba(13,132,118,.35);color:var(--teal)}
.gear-item.is-active{background:#fff}
.gear-points,.pop-text.is-sub,.result-gear b,.result-combo{color:var(--teal)}
.combo-chip{background:rgba(13,132,118,.1);color:var(--teal)}
.combo-chip strong{color:var(--ink)}
.board{background:linear-gradient(rgba(24,56,46,.07),rgba(24,56,46,.15));box-shadow:0 26px 36px -22px rgba(24,56,46,.35)}
.cell.is-empty{background:rgba(24,56,46,.06);box-shadow:inset 0 0 0 2px rgba(24,56,46,.07)}
.cell.is-aim{box-shadow:0 0 0 4px var(--teal),0 0 18px 4px rgba(13,132,118,.45)}
.pop-text{text-shadow:0 2px 10px rgba(255,255,255,.9),0 1px 2px rgba(24,56,46,.3)}
.pop-text.is-banner{text-shadow:0 3px 14px rgba(0,0,0,.45)}
.pop-text.is-combo{-webkit-text-stroke-color:var(--teal);text-shadow:0 0 18px rgba(13,132,118,.55)}
.grade{background:rgba(229,199,131,.2)}
.grade-excellent{border-color:var(--teal);box-shadow:0 0 50px rgba(13,132,118,.22)}
.grade-excellent strong{color:var(--teal)}
.star-total strong,.habits h2 small{color:var(--star-ink)}
.result-gear .bar{background:rgba(24,56,46,.1)}
.toast{box-shadow:0 0 0 6px rgba(13,132,118,.25),0 20px 50px rgba(24,56,46,.25)}
.pop-text.is-sub{text-shadow:0 0 4px #fff,0 0 10px #fff,0 0 18px #fff}
.pop-text.is-combo{color:var(--teal);-webkit-text-stroke:0;text-shadow:0 0 4px #fff,0 0 12px #fff,0 0 22px rgba(13,132,118,.45)}
.habit-best{color:#138a57}
.plane{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 1.6px) 0 0/2.2cqw 2.2cqw,radial-gradient(60% 50% at 50% 60%,#7cc79a,transparent),linear-gradient(#5fb283,#4e9d70)}

/* WorkBuddy watermark: start screen only (levels/arena/result stay clean for readability); faint, 45° tilted, above the 3D robot; never intercepts clicks */
body[data-screen=start]::after{content:"";position:fixed;left:50%;top:54%;z-index:5;width:min(64vw,1100px);aspect-ratio:1080/373;background:url("assets/workbuddy-logo.png?v=path-demo-3") no-repeat center/contain;transform:translate(-50%,-50%) rotate(-45deg);opacity:.05;pointer-events:none}
.app-shell{position:relative;z-index:1}
@media (max-width:760px){body[data-screen=start]::after{width:110vw;opacity:.045}}