:root{--font-body:Arial, Helvetica, sans-serif;--bg:#08111d;--surface:#080f1c9e;--surface-strong:#0e182be0;--surface-soft:#ffffff0f;--border:#ffffff1a;--text:#ecf4ff;--muted:#8ea1bf;--good:#42f5b6;--bad:#ff6b8e;--warn:#ffbf47;--accent:#5ea0ff;--accent-2:#41d9ff}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(circle at top, #132543 0%, var(--bg) 42%, #050a12 100%)}button,input{font:inherit}img{max-width:100%;display:block}.app-shell{isolation:isolate;place-items:center;min-height:100vh;padding:12px 12px 44px;display:grid;position:relative;overflow:hidden}.theme-light{--surface:#ffffffb8;--surface-strong:#ffffffeb;--surface-soft:#0f1e3c0f;--border:#14284624;--text:#0c1728;--muted:#4f6582;--good:#008a61;--bad:#d02655;--warn:#a55c00;--accent:#1858ea;--accent-2:#0aa5c7;background:radial-gradient(circle at top,#fff 0%,#dbe8ff 44%,#cbdbff 100%)}.animated-background{pointer-events:none;position:absolute;inset:0;overflow:hidden}.bg-orb,.grid-wave,.rise-field{position:absolute}.bg-orb{filter:blur(20px);opacity:.8;border-radius:999px;animation:18s ease-in-out infinite alternate drift}.bg-orb-a{background:radial-gradient(circle,#41d9ff52,#0000 68%);width:28rem;height:28rem;top:-6rem;left:-8rem}.bg-orb-b{background:radial-gradient(circle,#5ea0ff47,#0000 70%);width:22rem;height:22rem;animation-duration:22s;top:10%;right:-5rem}.bg-orb-c{background:radial-gradient(circle,#42f5b62e,#0000 72%);width:34rem;height:34rem;animation-duration:26s;bottom:-14rem;left:50%;transform:translate(-50%)}.pulse-success .bg-orb-a,.pulse-success .bg-orb-c{background:radial-gradient(circle,#42f5b657,#0000 70%)}.pulse-failure .bg-orb-a,.pulse-failure .bg-orb-c{background:radial-gradient(circle,#ff6b8e4d,#0000 70%)}.grid-wave{background-color:#0000;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:36px 36px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;height:55%;animation:10s linear infinite gridShift;inset:auto -10% -18%;transform:perspective(700px)rotateX(72deg);-webkit-mask-image:linear-gradient(#0000 24%,#000);mask-image:linear-gradient(#0000 24%,#000)}.theme-light .grid-wave{background:linear-gradient(#0c172814 1px,#0000 1px),linear-gradient(90deg,#0c172814 1px,#0000 1px)}.rise-field{height:70%;inset:auto 0 -5%}.rise-node,.rise-trace,.rise-burst{border-radius:999px;animation:linear infinite riseUp;position:absolute;bottom:-4rem}.rise-node{background:#5ea0ffb3;width:9px;height:9px;animation-duration:8s;box-shadow:0 0 16px #5ea0ff80}.rise-field-a .rise-node:first-child{left:8%}.rise-field-a .rise-node:nth-child(2){left:18%}.rise-field-a .rise-node:nth-child(3){left:29%}.rise-field-a .rise-node:nth-child(4){left:41%}.rise-field-a .rise-node:nth-child(5){left:56%}.rise-field-a .rise-node:nth-child(6){left:68%}.rise-field-a .rise-node:nth-child(7){left:81%}.rise-field-a .rise-node:nth-child(8){left:92%}.rise-trace{opacity:.5;background:linear-gradient(#41d9ffe6,#41d9ff00);width:2px;height:4.6rem;animation-duration:4.2s;box-shadow:0 0 16px #41d9ff59}.rise-field-b .rise-trace:nth-child(5n+1){left:6%}.rise-field-b .rise-trace:nth-child(5n+2){left:24%}.rise-field-b .rise-trace:nth-child(5n+3){left:48%}.rise-field-b .rise-trace:nth-child(5n+4){left:72%}.rise-field-b .rise-trace:nth-child(5n+5){left:90%}.rise-field-hot .rise-trace{opacity:.9;background:linear-gradient(#42f5b6,#42f5b600);height:6rem;box-shadow:0 0 18px #42f5b699}.rise-field-reaction{height:80%;inset:auto 0 -8%}.rise-burst{opacity:.3;background:linear-gradient(#5ea0ffb3,#5ea0ff00);width:4px;height:5.6rem;animation-duration:3s;box-shadow:0 0 18px #5ea0ff59}.rise-field-reaction .rise-burst:nth-child(7n+1){left:4%}.rise-field-reaction .rise-burst:nth-child(7n+2){left:19%}.rise-field-reaction .rise-burst:nth-child(7n+3){left:34%}.rise-field-reaction .rise-burst:nth-child(7n+4){left:50%}.rise-field-reaction .rise-burst:nth-child(7n+5){left:67%}.rise-field-reaction .rise-burst:nth-child(7n+6){left:82%}.rise-field-reaction .rise-burst:nth-child(7n+7){left:94%}.rise-field-reaction-success .rise-burst{opacity:.95;background:linear-gradient(#42f5b6,#42f5b600);box-shadow:0 0 22px #42f5b6bf}.rise-field-reaction-failure .rise-burst{opacity:.95;background:linear-gradient(#ff6b8e,#ff6b8e00);box-shadow:0 0 22px #ff6b8eb3}.theme-toggle,.mute-toggle{z-index:4;border:1px solid var(--border);background:var(--surface);color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;padding:.55rem .9rem;position:absolute;top:18px}.theme-toggle{right:18px}.mute-toggle{right:126px}.intro-card,.empty-card,.game-main-panel,.progress-panel,.mode-card{border:1px solid var(--border);background:linear-gradient(180deg, var(--surface), var(--surface-strong));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:26px;box-shadow:0 24px 90px #00000047}.mode-shell{z-index:2;gap:.8rem;width:min(100%,1220px);display:grid;position:relative}.intro-card,.empty-card{text-align:center;justify-self:center;width:min(100%,760px);padding:1.5rem 1.3rem}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.mode-card{text-align:left;color:var(--text);cursor:pointer;padding:1.2rem;transition:transform .18s,border-color .18s;position:relative;overflow:hidden}.mode-card:hover{border-color:#5ea0ff80;transform:translateY(-3px)}.mode-card__glow{filter:blur(6px);opacity:.9;border-radius:999px;width:220px;height:220px;position:absolute;inset:auto -10% -35% auto}.mode-card__glow--ccna{background:radial-gradient(circle,#42f5b657,#0000 68%)}.mode-card__glow--infinite{background:radial-gradient(circle,#ff6b8e57,#0000 68%)}.mode-card:first-child{background:linear-gradient(180deg, #42f5b614, transparent 42%), linear-gradient(180deg, var(--surface), var(--surface-strong));border-color:#42f5b647}.mode-card:last-child{background:linear-gradient(180deg, #ff6b8e14, transparent 42%), linear-gradient(180deg, var(--surface), var(--surface-strong));border-color:#ff6b8e47}.mode-card:first-child:hover{border-color:#42f5b680}.mode-card:last-child:hover{border-color:#ff6b8e80}.mode-card h2,.leaderboard-panel__header h2,.progress-panel__header h2{margin:.2rem 0 0;font-size:1rem}.game-layout{z-index:2;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:.55rem;width:min(100%,1360px);min-height:min(88vh,980px);display:grid;position:relative}.game-layout--with-sidebar{grid-template-columns:minmax(0,1fr) 270px}.game-main-panel{flex-direction:column;min-height:min(88vh,980px);padding:.62rem;display:flex;overflow:hidden}.hud-row{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.hud-chip{background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:.36rem .7rem;font-size:.68rem}.hud-chip-good{color:var(--good)}.hud-chip-bad{color:var(--bad)}.hud-chip-accent{color:var(--accent)}.hud-chip-best{color:var(--warn)}.hud-chip-time,.hud-chip-mode{color:var(--muted)}.hud-chip-streak.is-hot{color:var(--warn);animation:.8s ease-in-out infinite alternate spark}.hud-chip-best-live{color:#fff3cf;background:linear-gradient(135deg,#ffbf473d,#ff7d3b3d);border-color:#ffbf4775;font-size:.88rem;font-weight:700;animation:.85s ease-in-out infinite alternate bestPulse;transform:scale(1.12);box-shadow:0 0 24px #ffbf4738}.theme-light .hud-chip-best-live{color:#7a3f00}.question-stage,.complete-stage{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.35rem;min-height:0;padding:.15rem .1rem;display:flex;overflow:hidden auto}.question-stage h1,.complete-stage h1,.intro-card h1,.empty-card h1{max-width:56rem;margin:.2rem 0 0;font-size:clamp(.8rem,.95vw,1rem);line-height:1.28}.question-stage p,.complete-stage p,.intro-card p,.empty-card p{margin:0;font-size:clamp(.65rem,.76vw,.76rem);line-height:1.4}.micro-copy{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.6rem}.question-mode{color:var(--muted)}.play-button,.primary-action,.secondary-action,.answer-pill,.image-button{transition:transform .18s,border-color .18s,background .18s,opacity .18s}.play-button,.primary-action,.secondary-action{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));border:0;border-radius:999px;min-width:9rem;padding:.72rem 1.05rem;box-shadow:0 16px 34px #246bff47}.secondary-action{color:var(--text);box-shadow:none;border:1px solid var(--border);background:#ffffff1f}.play-button:hover,.primary-action:hover,.secondary-action:hover,.answer-pill:hover,.image-button:hover{transform:translateY(-2px)}.primary-action-next{background:linear-gradient(135deg, var(--warn), #ff7d3b)}.primary-action:disabled,.play-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.image-strip{flex-wrap:wrap;justify-content:center;gap:.35rem;width:100%;display:flex}.image-frame{border:1px solid var(--border);background:var(--surface-soft);border-radius:14px;width:min(100%,260px);margin:0;overflow:hidden}.image-button{cursor:zoom-in;padding:0;position:relative}.image-hint{z-index:1;color:#fff;letter-spacing:.08em;text-transform:uppercase;background:#0000008c;border-radius:999px;padding:.22rem .45rem;font-size:.58rem;position:absolute;top:8px;left:8px}.question-image{object-fit:contain;width:100%;height:auto;max-height:170px}.answer-cloud{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:.45rem;width:min(100%,68rem);display:grid}.answer-pill{text-align:left;border:1px solid var(--border);width:100%;max-width:none;color:var(--text);background:#ffffff0d;border-radius:16px;align-items:flex-start;gap:.45rem;padding:.56rem .65rem;display:inline-flex}.answer-pill:disabled{cursor:default;opacity:.62}.answer-selected{opacity:1;background:#5ea0ff1f;border-color:#5ea0ffcc}.answer-correct{opacity:1;background:#42f5b61f;border-color:#42f5b6d9}.answer-wrong{opacity:1;background:#ff6b8e1f;border-color:#ff6b8ee6;animation:.45s wrongJolt}.answer-dot{opacity:.8;background:currentColor;border-radius:999px;flex:none;width:.55rem;height:.55rem}.answer-pill__content{flex-direction:column;gap:.3rem;min-width:0;display:flex}.answer-pill__images{flex-wrap:wrap;gap:.3rem;display:flex}.answer-pill__image-button{cursor:zoom-in;border-radius:10px;display:inline-flex;position:relative;overflow:hidden}.answer-pill__image-button:focus-visible{outline-offset:2px;outline:2px solid #5ea0ffe6}.answer-pill__image{border:1px solid var(--border);background:#ffffff0f;border-radius:10px;width:76px;height:auto}.answer-image-hint{padding:.15rem .32rem;font-size:.48rem;top:5px;left:5px}.feedback-panel{border:1px solid var(--border);opacity:.72;background:#ffffff0a;border-radius:16px;width:min(100%,42rem);padding:.52rem .68rem;transform:scale(.98)}.feedback-open{opacity:1;transform:scale(1)}.feedback-success{border-color:#42f5b659}.feedback-failure{border-color:#ff6b8e59}.action-row{flex-direction:column;align-items:center;gap:.45rem;padding-top:.1rem;display:flex}.result-banner{min-height:1.4rem;color:var(--muted);font-size:.75rem}.result-visible.result-success{color:var(--good)}.result-visible.result-failure{color:var(--bad)}.progress-panel{flex-direction:column;min-height:min(88vh,980px);max-height:min(88vh,980px);padding:.5rem;display:flex;overflow:hidden}.progress-panel__header p:last-child{color:var(--muted);margin:.2rem 0 0;font-size:.68rem}.progress-grid{flex:1;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:.22rem;max-height:none;margin-top:.35rem;padding:.05rem;display:grid;overflow:auto}.progress-node{aspect-ratio:1;border:1px solid var(--border);min-width:22px;color:var(--muted);background:#ffffff0d;border-radius:7px;place-items:center;padding:0;font-size:.44rem;font-weight:700;line-height:1;display:grid}.progress-node--success{color:var(--good);background:#42f5b61f;border-color:#42f5b673}.progress-node--failure{color:var(--bad);background:#ff6b8e1f;border-color:#ff6b8e73}.progress-node--active{transform:scale(1.08);box-shadow:0 0 0 2px #5ea0ff42}.scoreboard-submit{flex-wrap:wrap;justify-content:center;gap:.55rem;display:flex}.scoreboard-input{border:1px solid var(--border);min-width:220px;color:var(--text);background:#ffffff14;border-radius:999px;padding:.78rem .95rem}.scoreboard-error{color:var(--bad)}.leaderboard-panel{border:1px solid var(--border);background:#ffffff0d;border-radius:22px;width:min(100%,46rem);padding:.95rem}.leaderboard-list{gap:.4rem;max-height:280px;margin-top:.8rem;display:grid;overflow:auto}.leaderboard-row{background:#ffffff0d;border-radius:16px;grid-template-columns:48px minmax(0,1fr) 72px minmax(120px,auto);align-items:center;gap:.5rem;padding:.55rem .65rem;display:grid}.leaderboard-rank,.leaderboard-score{font-weight:700}.leaderboard-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard-meta,.leaderboard-empty{color:var(--muted);font-size:.72rem}.image-modal{z-index:8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#020812cc;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.image-modal__panel{background:#091220eb;border:1px solid #ffffff24;border-radius:24px;width:min(92vw,1100px);padding:1rem;box-shadow:0 24px 90px #00000073}.image-modal__img{border-radius:16px;width:100%;height:auto}.site-warning{z-index:3;border:1px solid var(--border);background:var(--surface);width:min(100% - 24px,920px);color:var(--muted);text-align:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;padding:.55rem .8rem;font-size:.62rem;line-height:1.4;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.pulse-success .game-main-panel{animation:.7s successBlast}.pulse-failure .game-main-panel{animation:.55s failWave}@keyframes drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(1.5rem,-1.2rem)scale(1.08)}}@keyframes gridShift{0%{transform:perspective(700px)rotateX(72deg)translateY(0)}to{transform:perspective(700px)rotateX(72deg)translateY(36px)}}@keyframes riseUp{0%{opacity:0;transform:translateY(0)scaleY(.6)}15%{opacity:1}to{opacity:0;transform:translateY(-95vh)scaleY(1.12)}}@keyframes successBlast{0%{transform:scale(.985)}30%{transform:scale(1.01)rotate(.1deg)}to{transform:scale(1)}}@keyframes failWave{0%,to{transform:translate(0)}20%{transform:translate(-8px)}50%{transform:translate(8px)}70%{transform:translate(-5px)}}@keyframes wrongJolt{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}}@keyframes spark{0%{transform:scale(1)}to{transform:scale(1.08)}}@keyframes bestPulse{0%{transform:scale(1.08)}to{transform:scale(1.18)}}@media (max-width:900px){.mode-grid,.game-layout--with-sidebar{grid-template-columns:1fr}.game-main-panel,.progress-panel{min-height:auto}.answer-cloud{grid-template-columns:1fr}.progress-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:220px}}@media (max-width:700px){.app-shell{padding:14px 14px 64px}.theme-toggle{top:12px;right:12px}.mute-toggle{top:12px;right:104px}.image-frame{width:min(100%,220px)}.image-modal__panel{width:96vw;padding:.75rem}.site-warning{border-radius:18px;font-size:.58rem;bottom:10px}.leaderboard-row{grid-template-columns:42px minmax(0,1fr)}}