:root { --bg1:#1e1b4b; --bg2:#312e81; --accent:#22d3ee; --panel:rgba(15,23,42,.76); --text:#e2e8f0; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { background:radial-gradient(120% 120% at 50% 0%,var(--bg2) 0%,var(--bg1) 55%,#05060f 100%); background-attachment:fixed; color:var(--text); font-family:ui-rounded, Nunito, "Segoe UI", system-ui, sans-serif; transition:background .6s ease; }
button, input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.45; } input { color:#fff; }
#game-root { min-height:100vh; overflow-x:hidden; } .shell { width:min(960px,100%); margin:auto; padding:20px 14px; }
.glass { background:var(--panel); border:1px solid rgba(148,163,184,.22); box-shadow:0 18px 45px rgba(0,0,0,.2); backdrop-filter:blur(12px); }
.card { border-radius:22px; padding:18px; } .btn { border:0; border-bottom:4px solid rgba(2,6,23,.7); border-radius:14px; padding:11px 14px; font-weight:800; transition:transform .1s,filter .15s; }
.btn:active { transform:translateY(3px); border-bottom-width:1px; } .btn:hover:not(:disabled) { filter:brightness(1.12); }
.primary { background:#4ade80; color:#052e16; border-bottom-color:#166534; } .secondary { background:#334155; color:#fff; } .cyan { background:#22d3ee; color:#082f49; border-bottom-color:#0e7490; }
.amber { background:#fbbf24; color:#422006; border-bottom-color:#a16207; } .rose { background:#f43f5e; color:#fff; border-bottom-color:#9f1239; } .sky { background:#0ea5e9; color:#fff; border-bottom-color:#075985; }
.title { margin:0; font-size:clamp(2.2rem,8vw,4.8rem); line-height:.95; text-align:center; font-weight:1000; letter-spacing:-.05em; background:linear-gradient(#fff,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle { margin:4px 0 14px; text-align:center; color:#fde68a; font-weight:1000; letter-spacing:.23em; font-size:clamp(1.1rem,4vw,1.75rem); } .lead { max-width:560px; text-align:center; margin:12px auto; color:#cbd5e1; font-weight:600; }
.stack { display:grid; gap:12px; } .row { display:flex; align-items:center; gap:10px; } .wrap { flex-wrap:wrap; } .between { justify-content:space-between; } .center { text-align:center; } .grow { flex:1; min-width:0; }
.label { display:block; color:#94a3b8; font-size:.7rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .input { width:100%; margin-top:5px; padding:10px 12px; border-radius:12px; border:1px solid #475569; background:#0f172a; font-weight:700; outline:none; } .input:focus { border-color:#22d3ee; }
.avatar-pick, .color-pick { border:0; border-radius:12px; background:#1e293b; padding:5px 8px; font-size:1.55rem; } .avatar-pick.active { outline:2px solid #22d3ee; background:#155e75; } .color-pick { width:35px; height:35px; border-radius:50%; padding:0; } .color-pick.active { outline:4px solid #fff; }
.two-col, .three-col, .four-col { display:grid; gap:10px; } .two-col { grid-template-columns:repeat(2,minmax(0,1fr)); } .three-col { grid-template-columns:repeat(3,minmax(0,1fr)); } .four-col { grid-template-columns:repeat(4,minmax(0,1fr)); }
.player { display:flex; align-items:center; gap:12px; }.avatar { display:grid; width:56px; height:56px; place-items:center; flex:0 0 auto; border-radius:18px; font-size:2rem; }.rank { color:#67e8f9; font-weight:800; font-size:.8rem; }.tiny { color:#94a3b8; font-size:.72rem; font-weight:700; }.stat { text-align:center; padding:10px; border-radius:15px; }.stat strong { display:block; font-size:1.3rem; }.progress { overflow:hidden; height:8px; border-radius:99px; background:#1e293b; }.progress > div { height:100%; background:linear-gradient(90deg,#22d3ee,#4ade80); transition:width .3s; }.coin { color:#fde047; font-weight:1000; }.score { font-variant-numeric:tabular-nums; }
.company { width:100%; padding:14px; text-align:left; background:#1e293b; color:#fff; }.company.active { outline:2px solid var(--accent); background:#164e63; }.company.locked { opacity:.48; }.company .emoji { font-size:2rem; }.level { width:100%; display:flex; text-align:left; align-items:center; gap:10px; padding:12px; background:#1e293b; color:#fff; }.level .level-icon { display:grid; place-items:center; width:47px; height:47px; border-radius:14px; font-size:1.5rem; }.level .level-title { font-size:.86rem; font-weight:1000; }.level .objective { font-size:.67rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.level.locked { opacity:.42; }
.badge { padding:5px 8px; border-radius:99px; background:#1e293b; color:#64748b; font-size:.7rem; font-weight:800; }.badge.owned { background:rgba(251,191,36,.15); color:#fde68a; outline:1px solid rgba(251,191,36,.45); }.daily { margin:14px auto 0; width:min(930px,calc(100% - 28px)); padding:10px 14px; border-radius:16px; }
.hud { position:sticky; top:0; z-index:10; background:rgba(15,23,42,.9); border:1px solid rgba(148,163,184,.18); border-top:0; padding:9px 13px; backdrop-filter:blur(12px); }.hud-main { display:flex; align-items:center; gap:10px; }.hearts { white-space:nowrap; }.rankline { display:flex; justify-content:space-between; gap:8px; font-size:.7rem; font-weight:900; }.timer { margin-top:8px; height:9px; overflow:hidden; background:#1e293b; border-radius:99px; }.timer > div { height:100%; background:linear-gradient(90deg,#a78bfa,#d946ef); transition:width .1s linear; }.timer.danger > div { background:linear-gradient(90deg,#f43f5e,#fb923c); }.combo { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:99px; background:#f59e0b; color:#fff; font-weight:1000; font-size:.85rem; box-shadow:0 6px 18px #0007; }
.task-wrap { display:flex; min-height:calc(100vh - 100px); align-items:center; padding:24px 0 155px; }.task { width:100%; }.prompt { text-align:center; font-size:clamp(1.25rem,4vw,2rem); font-weight:1000; }.kicker { margin-bottom:7px; color:#67e8f9; text-align:center; text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; font-weight:1000; }.option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }.option { min-height:70px; padding:10px; border:0; border-bottom:4px solid #172033; border-radius:15px; background:#334155; color:#fff; font-weight:900; text-align:left; }.option.selected { background:#fbbf24; color:#422006; }.option.correct { background:#4ade80; color:#052e16; }.option.wrong { background:#f43f5e; }.option.muted { background:#1e293b; color:#64748b; }.type-option { display:flex; align-items:center; gap:10px; }.type-option .type-emoji { font-size:1.7rem; }.debit-credit { display:flex; gap:12px; margin-top:18px; }.debit-credit .btn { flex:1; min-height:140px; font-size:1.6rem; }.hint { margin:9px auto 0; max-width:650px; padding:9px 12px; border-radius:12px; background:rgba(245,158,11,.13); color:#fde68a; font-size:.78rem; font-weight:700; }
.tb { overflow:hidden; border:1px solid rgba(148,163,184,.38); border-radius:16px; background:#0f172acc; margin:14px 0; }.tb-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 90px; padding:8px 10px; gap:6px; font-size:.78rem; }.tb-row:nth-child(odd) { background:rgba(255,255,255,.035); }.tb-head,.tb-total { background:#1e293b; font-size:.68rem; font-weight:1000; text-transform:uppercase; }.tb-total { border-top:2px solid #475569; }.dr { color:#7dd3fc; text-align:right; font-variant-numeric:tabular-nums; }.cr { color:#f0abfc; text-align:right; font-variant-numeric:tabular-nums; }.tb-row.clickable { cursor:pointer; }.tb-row.selected { background:rgba(34,211,238,.2); outline:2px solid #22d3ee; }.tb-row.dim { opacity:.28; }
.drag-pool { display:flex; min-height:65px; flex-wrap:wrap; justify-content:center; gap:8px; }.chip { border:0; border-bottom:3px solid #0f172a; border-radius:12px; background:#334155; color:#fff; padding:8px; font-size:.75rem; font-weight:900; }.chip.active { background:#22d3ee; color:#082f49; }.drop-cols { display:flex; gap:10px; margin-top:12px; }.drop { flex:1; min-height:160px; padding:8px; border:2px dashed #64748b; border-radius:16px; background:#0f172a7d; }.drop strong { display:flex; justify-content:space-between; font-size:.68rem; text-transform:uppercase; }.placed { display:flex; justify-content:space-between; margin-top:6px; padding:6px; border-radius:8px; background:rgba(74,222,128,.2); font-size:.7rem; font-weight:800; }.placed.wrong { background:rgba(244,63,94,.2); }
.event-card { padding:16px; border:2px solid rgba(251,191,36,.5); border-radius:18px; background:linear-gradient(rgba(245,158,11,.16),rgba(15,23,42,.85)); text-align:center; }.event-card .big { font-size:2.5rem; }.journal-card { padding:16px; border:2px solid rgba(56,189,248,.4); border-radius:18px; background:#0f172acc; text-align:center; }
.feedback { position:fixed; z-index:20; right:10px; bottom:10px; left:10px; margin:auto; width:min(900px,calc(100% - 20px)); padding:16px; border:2px solid #4ade80; border-radius:22px; background:rgba(6,78,59,.95); box-shadow:0 20px 50px #0009; }.feedback.bad { border-color:#fb7185; background:rgba(136,19,55,.95); }.feedback h3 { margin:0; color:#bbf7d0; }.feedback.bad h3 { color:#fecdd3; }.feedback p { margin:8px 0; font-size:.86rem; font-weight:600; }.feedback .principle { padding:8px; border-radius:10px; background:#0004; color:#fde68a; font-style:italic; font-size:.75rem; }.feedback .reward { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }.pill { padding:4px 8px; border-radius:99px; background:#fff2; font-size:.75rem; font-weight:900; }
.overlay { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:16px; background:rgba(2,6,23,.78); backdrop-filter:blur(7px); }.overlay .card { width:min(430px,100%); text-align:center; }.summary { width:min(780px,100%); margin:auto; padding:22px 14px; }.summary h2 { margin:4px 0; }.grade { display:grid; width:80px; height:80px; margin:14px auto; place-items:center; border-radius:50%; background:linear-gradient(#fde68a,#f59e0b); color:#1f2937; font-size:2.4rem; font-weight:1000; }.topic-list { padding-left:18px; color:#e2e8f0; font-size:.8rem; font-weight:600; }.leaderboard { overflow:hidden; border-radius:18px; }.leader-row { display:flex; align-items:center; gap:10px; padding:9px 12px; }.leader-row:nth-child(odd) { background:rgba(255,255,255,.035); }.leader-row .place { width:25px; text-align:center; color:#94a3b8; font-weight:1000; }.leader-row .name { color:#fff; font-weight:1000; }.leader-row .details { color:#94a3b8; font-size:.65rem; font-weight:700; }
.float { position:fixed; z-index:25; top:120px; left:50%; animation:float 900ms ease-out forwards; font-size:1.8rem; font-weight:1000; pointer-events:none; }.footer { padding:14px; color:#64748b; text-align:center; font-size:.68rem; font-weight:700; }.message { padding:10px; color:#67e8f9; font-size:.8rem; font-weight:800; text-align:center; }.noscript { padding:20px; text-align:center; }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } } @keyframes float { to { transform:translate(-50%,-75px) scale(1.25); opacity:0; } } @keyframes shake { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
.pop { animation:pop .25s ease both; }.shake { animation:shake .4s ease; }
@media (max-width:620px) { .shell { padding:14px 10px; }.four-col { grid-template-columns:repeat(2,minmax(0,1fr)); }.three-col { grid-template-columns:1fr; }.tb-row { grid-template-columns:minmax(0,1fr) 70px 70px; font-size:.7rem; }.task-wrap { padding-bottom:170px; }.hud-main { gap:6px; }.hud .pause { padding-inline:9px; }.hud .hint-btn { padding-inline:8px; }.debit-credit .btn { min-height:110px; font-size:1.25rem; }.level .objective { white-space:normal; }.score { font-size:.85rem; } }