:root{--navy-900: #061838;--navy-700: #193d84;--ocean-600: #1ea1bd;--ocean-400: #78dbf6;--leaf-500: #2ac783;--mint-200: #d6fff1;--line: #83e7ff;--shell: #122353;--shell-2: #0d1d49;--card: #f2f7ff}*{box-sizing:border-box}body{margin:0;min-height:100dvh;font-family:Trebuchet MS,Avenir Next,sans-serif;color:#ecf7ff;background:radial-gradient(circle at 10% 20%,#354db8 0%,#1a3a86 32%,transparent 58%),radial-gradient(circle at 82% 20%,#2e6fa5 0%,#1a3e71 32%,transparent 58%),linear-gradient(180deg,#1e3f83,#041332 76%,#02102e)}#root{min-height:100dvh}button{font:inherit}.screen-wrap{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}.game-shell{width:min(100%,440px);height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 16px);border-radius:26px;border:4px solid var(--line);background:linear-gradient(180deg,#1a2d63,#0d1f4f);box-shadow:0 0 0 3px #2759a3 inset,0 0 28px #00cfff73;overflow:hidden}.game-shell-inner{height:100%;padding:12px;overflow:auto;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 4px),linear-gradient(180deg,var(--shell) 0%,var(--shell-2) 100%)}.game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.brand-overline{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#aceeff}.brand-subtitle{font-size:20px;font-weight:800;line-height:1}.sound-button{height:38px;min-width:70px;border-radius:12px;border:2px solid #7adfff;color:#deffff;background:#081b46bf;cursor:pointer}.hero-banner{margin-bottom:10px;border:3px solid #091536;min-height:126px;border-radius:6px;padding:12px;display:grid;align-content:end;gap:5px;background:linear-gradient(0deg,#06122cdb,#06122c38),radial-gradient(circle at 78% 25%,rgba(48,206,236,.45) 0%,transparent 48%),linear-gradient(120deg,#1f4f98,#0e2f6a 52%,#173d7d)}.hero-banner-level{min-height:108px}.hero-title{margin:0;font-size:clamp(26px,7vw,34px);font-weight:900;line-height:1;text-shadow:0 2px 0 #102045}.hero-tagline{margin:0;color:#c9fbff;font-size:14px}.panel{border:2px solid var(--line);border-radius:12px;padding:12px;background:linear-gradient(180deg,#2b4f98,#253f80)}.panel-title{margin:0;font-size:clamp(25px,7vw,34px);text-align:center;line-height:1}.panel-copy{margin:10px 0 0;font-size:15px;text-align:center;color:#d7f5ff}.grade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.grade-card{display:grid;gap:4px;align-content:center;text-align:left;min-height:84px;padding:12px;border:2px solid #12224f;color:#071937;background:linear-gradient(180deg,#d8f6ff,#b6ebfb);border-radius:8px;cursor:pointer}.grade-card:active{transform:translateY(1px)}.grade-card-special{border-color:#dfff87;background:linear-gradient(180deg,#f6ffd7,#d7f2b0),linear-gradient(180deg,#f6ffd7,#d7f2b0);box-shadow:0 0 0 2px #ddff7073}.grade-card-title{font-size:20px;font-weight:800;line-height:1}.grade-card-sub{font-size:12px;font-weight:700;opacity:.8}.version{margin-top:10px;text-align:center;font-size:12px;letter-spacing:1px;opacity:.78}.difficulty-list{display:grid;gap:8px;margin-top:10px}.difficulty-card{text-align:left;min-height:88px;border:2px solid #151a35;border-radius:0;padding:12px;cursor:pointer;color:#0a1737;display:grid;gap:6px}.difficulty-rookie{background:linear-gradient(180deg,#f8eb80,#e7db5a)}.difficulty-challenger{background:linear-gradient(180deg,#88dff9,#68caea)}.difficulty-master{background:linear-gradient(180deg,#f9ba6e,#f69c4e)}.difficulty-title{font-size:31px;font-weight:900;line-height:1}.difficulty-sub{font-size:17px;font-weight:700}.back-button{margin-top:10px;min-height:48px;border:2px solid #1d2f5a;background:#d3e2f8;color:#08193c;font-weight:800;border-radius:4px;padding:8px 14px;width:110px}.battle-canvas{border:3px solid #0b1539;background:linear-gradient(180deg,#274f96,#143670);padding:10px}.arena{min-height:116px;border:2px solid #0a1d43;background:radial-gradient(circle at 15% 20%,rgba(156,210,255,.28) 0%,transparent 32%),linear-gradient(180deg,#1d3978,#132754);display:flex;justify-content:space-between;align-items:flex-end;padding:12px 16px}.fighter{font-size:44px;line-height:1}.fighter-player{animation:bop 1.1s ease-in-out infinite}.fighter-cpu{animation:bop 1.25s ease-in-out infinite}@keyframes bop{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.floor-strip{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.floor-side{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}.floor-pixel{display:block;width:100%;height:12px;border:1px solid #071432}.floor-on-player{background:#5af4a5}.floor-on-cpu{background:#ff6f8d}.floor-off{background:#1b2d5b;opacity:.25}.floor-dropping-cpu{animation:pixel-drop .52s ease-in forwards}@keyframes pixel-drop{0%{transform:translateY(0);opacity:1}to{transform:translateY(24px);opacity:0}}.question-panel{margin-top:10px;border:2px solid #1d2f5d;background:linear-gradient(180deg,#f2e9ad,#dbc76f);color:#111328;padding:10px}.question-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.question-meta span{border:2px solid #1d2340;background:#f7efc4;min-height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}.question-image-box{margin-top:8px;border:2px solid #1f2a49;background:#d5ebef;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden}.question-image{width:200px;height:200px;object-fit:contain;flex:0 0 auto}.question-image-tools{margin-top:8px;display:grid;gap:6px;color:#1c2b50;font-size:12px;font-weight:700}.question-hint{margin-top:8px;border:2px solid #1b2947;background:#f7f1d2;padding:8px;font-size:16px;font-weight:800}.answer-box{margin-top:8px;border:2px solid #0f1b3f;background:#fff;min-height:44px;display:flex;align-items:center;padding:8px;letter-spacing:1px;font-weight:900}.cards-grid{margin-top:8px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.letter-card{min-height:52px;border:2px solid #15244f;background:#c2e3ff;font-size:24px;font-weight:900;cursor:pointer}.letter-card-used{opacity:.35}.question-actions{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.action-btn{min-height:42px;border:2px solid #182654;background:#e7f2ff;font-weight:800}.action-btn-primary{background:#7ce6b0}.letter-card:disabled,.action-btn:disabled{cursor:not-allowed;opacity:.55}.battle-feedback{margin-top:8px;border:2px solid #1a315d;background:#d8ebff;color:#0c1d43;min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font-weight:800}.battle-result-banner{margin-top:8px;border:2px solid #173258;background:#7ee8b2;color:#072c23;padding:10px;text-align:center;font-size:22px;font-weight:900}.result-panel{margin-top:10px;border:2px solid #1d2f5d;background:linear-gradient(180deg,#f2e9ad,#dbc76f);color:#111328;padding:12px;display:grid;gap:8px}.result-title{margin:0;text-align:center;font-size:30px;line-height:1}.result-score{border:2px solid #1a315d;background:#d8ebff;color:#0c1d43;min-height:40px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px}.result-winner{border:2px solid #173258;background:#dff7e2;color:#09352a;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900}.result-sweets{border:2px solid #1d2340;background:#f7efc4;min-height:34px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}.result-next-btn{min-height:46px;font-size:20px}.mistake-list{margin-top:8px;border:2px solid #1f2d53;background:#f6d8dd;color:#421119;padding:8px;display:grid;gap:6px}.mistake-item{font-size:13px;font-weight:700}.game-shell-inner{position:relative}.battle-countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#020a21c2;display:grid;place-items:center;text-align:center}.battle-countdown-number{font-size:110px;font-weight:900;line-height:1;color:#f2fdff;text-shadow:0 0 14px rgba(123,233,255,.9)}.battle-countdown-sub{margin-top:8px;font-size:20px;font-weight:800;color:#d6f7ff}@media (max-width: 400px){.game-shell-inner{padding:10px}.grade-grid{gap:8px}.grade-card{min-height:78px;padding:10px}.difficulty-title{font-size:26px}.difficulty-sub{font-size:15px}.cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.question-meta{grid-template-columns:1fr}.battle-countdown-number{font-size:88px}}
