:root{--navy:#071432;--blue:#173b7a;--cyan:#35c2df;--gold:#ffd166;--white:#fff;--ink:#16213e;--good:#10b981;--bad:#ef476f;--panel:rgba(255,255,255,.11)}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Inter,Arial,sans-serif;color:#fff;background:radial-gradient(circle at 15% 10%,#2452a4 0,transparent 28%),radial-gradient(circle at 90% 20%,#7336a5 0,transparent 25%),linear-gradient(145deg,#040b20,#0d2454);min-height:100vh}button,input,select{font:inherit}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #ffffff20;background:#040b2066;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.brand{font-weight:900;font-size:21px}.tagline{opacity:.8;font-size:14px}main{max-width:1250px;margin:auto;padding:25px 18px 45px}.screen{display:none}.screen.active{display:block}.hero{min-height:500px;display:flex;align-items:center;justify-content:center;gap:60px;position:relative;overflow:hidden}.hero-copy{max-width:600px;z-index:2}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:900;opacity:.8}.hero h1{font-size:clamp(48px,8vw,88px);margin:8px 0 0;line-height:.9}.hero h2{font-size:clamp(24px,4vw,42px);margin:12px 0;color:var(--gold)}.hero p{font-size:17px;line-height:1.65;opacity:.9}.hero-planet{font-size:190px;filter:drop-shadow(0 15px 30px #0008);animation:float 4s ease-in-out infinite}.orbit{position:absolute;border:1px solid #ffffff20;border-radius:50%;width:430px;height:430px;right:3%;top:5%;animation:spin 18s linear infinite}.orbit2{width:600px;height:600px;right:-7%;top:-12%;animation-duration:30s}@keyframes float{50%{transform:translateY(-15px)}}@keyframes spin{to{transform:rotate(360deg)}}button{border:0;border-radius:13px;padding:13px 18px;font-weight:900;cursor:pointer;transition:.18s}button:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:#17234b;box-shadow:0 8px 20px #0004;margin:7px 4px 7px 0}.secondary{background:#ffffff14;color:#fff;border:1px solid #ffffff30;margin:7px 4px}.linkbtn{background:none;color:#6f9cff;margin-top:5px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.feature-grid div{background:var(--panel);border:1px solid #ffffff18;border-radius:16px;padding:17px;display:grid;gap:5px}.feature-grid div:first-letter{font-size:25px}.feature-grid span{font-size:12px;opacity:.7}.card{background:rgba(255,255,255,.1);border:1px solid #ffffff1f;border-radius:20px;padding:20px;box-shadow:0 15px 45px #0002;backdrop-filter:blur(8px)}.center-card{max-width:560px;margin:50px auto;text-align:center}.big-icon{font-size:70px}.center-card h2{font-size:32px;margin:5px}.center-card label{display:block;text-align:left;font-weight:800;margin:15px 0}.center-card input,.center-card select{width:100%;padding:13px;border-radius:11px;border:1px solid #ccd5e8;margin-top:6px;color:var(--ink);background:white}.guide{max-width:700px;margin:35px auto;line-height:1.7}.notice{padding:13px;border-radius:12px;background:#ffffff12;margin:15px 0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px}.game-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.game-head h2{margin:5px 0}.smallbtn{background:#ffffff15;color:white;border:1px solid #ffffff25;padding:9px 12px}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;aspect-ratio:1}.cell{position:relative;min-width:0;display:flex;align-items:flex-start;padding:6px;border-radius:9px;color:#122047;font-size:11px;font-weight:900;background:linear-gradient(145deg,#fff8dc,#ffd166);border:2px solid #ffffffb0}.cell:nth-child(4n+1){background:linear-gradient(145deg,#dff9ff,#80d9e5)}.cell:nth-child(4n+2){background:linear-gradient(145deg,#eee5ff,#c8b6ff)}.cell:nth-child(4n+3){background:linear-gradient(145deg,#e7f9df,#a9e596)}.cell.ladder{outline:3px solid #10b981}.cell.snake{outline:3px solid #ef476f}.cell .symbol{position:absolute;right:4px;bottom:1px;font-size:17px}.token{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:2;font-size:25px;filter:drop-shadow(0 4px 4px #0008)}.sidebar{display:grid;gap:12px;align-content:start}.stats h3{margin:0 0 10px}.stats div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ffffff15}.dice{text-align:center;font-size:55px;min-height:68px}.control button{width:100%;margin:5px 0}.message{font-size:13px;line-height:1.5;background:#0003;border-radius:11px;padding:11px;margin-top:8px}.legend{display:grid;gap:9px;font-size:13px}.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:18px;z-index:30}.modal.show{display:flex}.quiz-card{width:min(650px,100%);background:#fff;color:var(--ink);border-radius:20px;padding:23px;box-shadow:0 25px 80px #0009}.quiz-card h2{line-height:1.35}.option{display:block;width:100%;text-align:left;margin:8px 0;background:#edf2ff;color:#17366e}.option:hover{background:#dde7ff}.option.correct{background:#d9f8ec;color:#08775b}.option.wrong{background:#ffe2e9;color:#9c1c43}.feedback{margin-top:13px;padding:13px;border-radius:12px;background:#f4f6fa;line-height:1.5}.hidden{display:none}.final-score{font-size:65px;font-weight:900;color:var(--gold);text-shadow:0 4px 12px #0005}.rank{padding:13px;border-radius:12px;background:#173b7a;margin:12px 0;font-weight:900}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.result-grid div{padding:12px;background:#f2f5fb;color:var(--ink);border-radius:12px}.result-grid b,.result-grid span{display:block}.result-grid b{font-size:24px}.result-grid span{font-size:11px;opacity:.7}footer{text-align:center;padding:18px;color:#ffffff88;font-size:12px}@media(max-width:850px){.hero{flex-direction:column;text-align:center;gap:15px;padding:25px 0}.hero-planet{font-size:120px;order:-1}.feature-grid{grid-template-columns:repeat(2,1fr)}.game-layout{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr 1fr}.legend{display:none}.board{gap:3px}.cell{font-size:9px;padding:4px}.cell .symbol{font-size:13px}.token{font-size:20px}}@media(max-width:520px){.topbar{height:auto;padding:12px 15px;display:block;text-align:center}.tagline{margin-top:4px}.sidebar{grid-template-columns:1fr}.hero{min-height:auto}.feature-grid{grid-template-columns:1fr 1fr}.game-main{padding:10px}.board{gap:2px}.cell{border-width:1px;font-size:8px}.token{font-size:17px}}