.game-shell{position:relative;overflow:clip;isolation:isolate;padding:clamp(2.1rem,4vw,3.2rem) 0 clamp(2.7rem,4vw,4rem)}.game-shell:before,.game-shell:after{content:"";position:absolute;border-radius:999px;pointer-events:none;z-index:-1}.game-shell:before{width:clamp(300px,45vw,560px);height:clamp(300px,45vw,560px);top:-170px;right:-130px;background:radial-gradient(circle,#ffe09b70,#ffe09b00 72%);animation:orbitGlow 16s ease-in-out infinite}.game-shell:after{width:clamp(240px,38vw,440px);height:clamp(240px,38vw,440px);left:-130px;bottom:-210px;background:radial-gradient(circle,#97ceb147,#97ceb100 72%);animation:orbitGlow 18s ease-in-out infinite reverse}.game-shell .container{display:grid;gap:1rem}[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--reveal-delay, 0ms)}[data-reveal].is-visible{opacity:1;transform:translateY(0)}.panel{position:relative;border-radius:20px;border:1px solid #e8d4ab;background:linear-gradient(150deg,#fffdf5fa,#fff8e8fa);box-shadow:0 18px 38px #563a131f;overflow:hidden}.game-stage{padding:clamp(1.1rem,2vw,1.5rem)}.game-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff80,#fff0 45%),radial-gradient(circle at 86% 16%,#ffd87947,#ffd87900 58%)}.game-stage__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.game-title p{max-width:760px;margin-bottom:0}.game-title h1{margin-bottom:.35rem}.game-toolbar{display:flex;gap:.55rem;flex-wrap:wrap}.game-toolbar .btn{min-height:44px;background:#fffbf0e0}.hud-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.6rem}.hud-card{border-radius:14px;border:1px solid #e6d2a5;background:linear-gradient(180deg,#fff9ea,#fff5df);padding:.6rem .72rem;min-height:92px;display:grid;align-content:start;gap:.2rem}.hud-card-ring{display:grid;place-items:center;align-content:center;gap:.5rem}.hud-label{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7c5c2e}.hud-value{margin:0;font-family:Fraunces,serif;font-size:clamp(1.15rem,2.4vw,1.52rem);line-height:1;color:#34220e}.hud-ring{width:72px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#bf8f32 var(--progress),rgba(191,143,50,.14) 0);position:relative}.hud-ring:before{content:"";position:absolute;width:54px;aspect-ratio:1;border-radius:50%;background:#fffbef;border:1px solid #e3cea2}.hud-ring span{position:relative;font-size:.73rem;font-weight:800;letter-spacing:.03em;color:#5e4219}.question-meter{margin-top:.2rem;width:100%;height:5px;border-radius:999px;background:#f0dfba;overflow:hidden}.question-meter span{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(120deg,#bd8d2b,#f4ca6f);transition:width .3s ease}.game-arena{display:grid;grid-template-columns:minmax(228px,.95fr) minmax(0,2fr) minmax(260px,1fr);gap:1rem}.level-rail{padding:1rem}.rail-head p{margin-bottom:.9rem}.level-grid{display:grid;gap:.58rem;max-height:860px;overflow-y:auto;padding-right:.16rem}.level-grid::-webkit-scrollbar{width:6px}.level-grid::-webkit-scrollbar-track{background:#a07b331f;border-radius:999px}.level-grid::-webkit-scrollbar-thumb{border-radius:999px;background:#a07b3385}.level-btn{border:1px solid #ddc79a;border-radius:12px;background:linear-gradient(180deg,#fffdf6,#fff5dd);color:#2f1f0b;text-align:left;padding:.65rem .7rem;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;animation:cardEnter .5s ease both;animation-delay:var(--level-delay, 0ms)}.level-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#c5943a;box-shadow:0 12px 20px #9166212e}.level-btn-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.2rem}.level-btn strong{display:block;font-size:.86rem}.state-badge{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;border:1px solid #d5bc87;padding:.16rem .4rem;color:#7d5d2f;background:#fff5df}.level-title{display:block;font-size:.76rem;line-height:1.3;color:#563b16}.level-meta{display:block;margin-top:.25rem;font-size:.7rem;font-weight:600;color:#82653a}.level-btn.is-active{border-color:transparent;color:#fff;background:linear-gradient(130deg,#a47827,#d7a945 55%,#f2cd6e);box-shadow:0 16px 24px #92651852}.level-btn.is-active .state-badge{color:#fff;border-color:#ffffff73;background:#ffffff29}.level-btn.is-active .level-title,.level-btn.is-active .level-meta{color:#ffffffeb}.level-btn.is-complete:not(.is-active){border-color:#91c39a;background:linear-gradient(135deg,#f4fff4,#e5f7e8)}.level-btn.is-complete .state-badge{border-color:#9cc6a4;color:#34613d;background:#e7f8e9}.level-btn.is-locked{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}.play-panel{padding:clamp(.95rem,2.5vw,1.3rem)}.play-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 14% 8%,#ffffff9e,#fff0 36%),linear-gradient(165deg,#ffd47b29,#ffd47b00 58%)}.play-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:.6rem}.play-head h2{margin:0;font-size:clamp(1.2rem,2.8vw,1.6rem)}.target-chip{margin:0;border-radius:999px;border:1px solid #d8bf8e;background:linear-gradient(180deg,#fff9ed,#ffeec9);color:#6d4d1e;font-size:.79rem;font-weight:700;padding:.32rem .68rem}.target-chip strong{font-size:.88rem}.prompt-box{border-radius:12px;border:1px solid #dcc291;background:linear-gradient(180deg,#fff6df,#ffefcd);padding:.78rem .86rem;margin-bottom:.68rem}.prompt-box p{margin:0;color:#4a3314;font-weight:600}.feedback{min-height:48px;border-radius:12px;padding:.6rem .75rem;border:1px dashed #cfb073;background:linear-gradient(180deg,#fff9ea,#fff3d5);color:#5e4320;font-size:.9rem;margin-bottom:.72rem}.feedback.good{border-style:solid;border-color:#90c38f;background:linear-gradient(180deg,#edffea,#e1f6e0);color:#235127}.feedback.bad{border-style:solid;border-color:#e3a292;background:linear-gradient(180deg,#fff2ef,#ffdfd8);color:#6f2520}.feedback.pulse{animation:feedbackPulse .32s ease}.abacus-wrap{position:relative;margin-top:.2rem;margin-bottom:.5rem;border-radius:18px;border:1px solid #b58440;padding:.9rem;background:linear-gradient(180deg,#ffe2aabf,#d8a053cc),repeating-linear-gradient(90deg,#784b1314 0 3px,#784b1305 3px 12px);box-shadow:inset 0 1px #ffffff5c,inset 0 -16px 24px #593a1233}.abacus-board{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(66px,1fr));gap:.85rem}.abacus-board.rods-1{grid-template-columns:repeat(1,minmax(84px,142px))}.abacus-board.rods-2{grid-template-columns:repeat(2,minmax(84px,132px))}.abacus-board.rods-3{grid-template-columns:repeat(3,minmax(84px,128px))}.mental-answer{display:none;margin-top:.65rem;gap:.45rem}.mental-answer label{font-size:.82rem;font-weight:700;color:#654820}.mental-answer input{width:100%;border-radius:12px;border:1px solid #d2b67f;background:#fffcf2;padding:.58rem .72rem;color:#2f2010;font:inherit}.actions{margin-top:.72rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.54rem}.actions .btn{width:100%}.rod{position:relative;display:grid;grid-template-rows:62px 12px 154px auto;justify-items:center;align-items:center;min-height:278px}.rod-track{position:absolute;top:16px;bottom:42px;width:9px;border-radius:999px;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#775126,#4d2f0f)}.upper-zone,.lower-zone{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}.lower-zone{flex-direction:column;gap:6px}.beam{width:clamp(56px,8vw,66px);height:10px;border-radius:999px;background:linear-gradient(180deg,#6d4113,#452707);box-shadow:0 2px #ffffff26;z-index:2}.bead{border:0;width:clamp(38px,5.4vw,46px);height:20px;border-radius:999px;background:linear-gradient(180deg,#ffebc9,#d08d41);box-shadow:inset 0 -2px 2px #562f0757,0 1px 2px #3e250e2e;cursor:pointer;transition:transform .17s ease,filter .17s ease,background .17s ease}.bead:active{transform:scale(.96)}.bead:hover{filter:brightness(1.04)}.bead.active{background:linear-gradient(180deg,#fffdd0,#dcb246);box-shadow:inset 0 -2px 2px #562f0757,0 0 0 2px #fff0a3a3}.upper-zone .bead{transform:translateY(-16px)}.upper-zone .bead.active{transform:translateY(6px)}.lower-zone .bead{transform:translateY(13px)}.lower-zone .bead.active{transform:translateY(-8px)}.rod-label{margin-top:.38rem;font-size:.76rem;font-weight:700;color:#4a2e0e;letter-spacing:.04em}.rod.is-updated.is-up{animation:rodPulseUp .33s ease}.rod.is-updated.is-down{animation:rodPulseDown .33s ease}.mental-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;place-content:center;gap:.2rem;text-align:center;color:#fff8e6;background:linear-gradient(180deg,#2d1c0b2e,#2d1c0b66);opacity:0;transition:opacity .24s ease}.mental-overlay p{margin:0;color:inherit;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700}.mental-overlay strong{font-family:Fraunces,serif;font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1}.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.fx-particle{position:absolute;width:7px;aspect-ratio:1;border-radius:2px;background:var(--bg, #ffd26f);transform:translate(-50%,-50%);animation:fxBurst .86s cubic-bezier(.23,.68,.3,1) forwards}.coach-panel{padding:1rem}.coach-tip{margin-bottom:.85rem;color:#553a19}.coach-panel h4{margin:.95rem 0 .45rem;font-size:.95rem;color:#593b19}.stats-box{display:grid;gap:.38rem}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border-bottom:1px dashed #e0c89c;padding:.32rem 0;font-size:.86rem}.stat-row strong{color:#503514}.coach-list{margin:0;padding-left:1rem;display:grid;gap:.42rem;color:#5a3f1e;font-size:.86rem}.game-arena.hidden-board .abacus-wrap{filter:blur(4px) saturate(.65) brightness(.8)}.game-arena.hidden-board .abacus-wrap .abacus-board{pointer-events:none}.game-arena.show-countdown .mental-overlay{opacity:1}.game-arena.show-mental .mental-answer{display:grid}.game-arena.show-mental .abacus-wrap{filter:blur(6px) grayscale(.28) brightness(.78)}.game-arena.fx-good .play-panel{box-shadow:0 18px 34px #3e753c42,inset 0 0 0 1px #6abc6f66}.game-arena.fx-bad .play-panel{box-shadow:0 18px 34px #913e3e38,inset 0 0 0 1px #c663635c}.question-shift{animation:questionShift .36s ease}.shake{animation:shake .3s ease}.glow{animation:glowPulse .34s ease}@keyframes orbitGlow{0%,to{transform:translate(0)}50%{transform:translate(-12px,14px)}}@keyframes cardEnter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes feedbackPulse{0%{transform:scale(1)}40%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes fxBurst{0%{opacity:.95;transform:translate(-50%,-50%) rotate(0) scale(.9)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.2)}}@keyframes rodPulseUp{0%{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes rodPulseDown{0%{transform:translateY(0)}50%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes questionShift{0%{transform:translateY(6px);opacity:.65}to{transform:translateY(0);opacity:1}}@keyframes glowPulse{0%{box-shadow:0 0 #8acb8a61}to{box-shadow:0 0 0 18px #8acb8a00}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}65%{transform:translate(4px)}}@media(max-width:1180px){.hud-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.game-arena{grid-template-columns:minmax(220px,.95fr) minmax(0,1.8fr)}.coach-panel{grid-column:1 / -1}}@media(max-width:860px){.hud-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.game-arena{grid-template-columns:1fr}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.play-head{flex-direction:column}}@media(max-width:620px){.level-grid,.actions{grid-template-columns:1fr}.abacus-board{gap:.5rem}.rod{min-height:260px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}
