@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Nunito:wght@700;900&display=swap');
*{box-sizing:border-box}body{margin:0;background:#101e29;color:#fff;font-family:Nunito,system-ui,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0}#game{position:relative;width:min(100vw,650px);height:100dvh;min-height:460px;margin:auto;overflow:hidden;background:#739e9b;box-shadow:0 0 90px #0008}#scene,#scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}header{position:absolute;top:max(14px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;text-shadow:0 3px #172e35}.brand b{color:#ffce66}header button{background:#203b48cc;color:white;border:2px solid #ffffff44;border-radius:13px;width:43px;height:42px;font-size:23px}#stats{position:absolute;top:70px;left:18px;right:18px;display:flex;justify-content:space-between;gap:8px;font-size:12px}#stats span{background:#203b48dd;padding:8px 10px;border-radius:10px}#health{color:#ff9191}#banner{position:absolute;top:35%;left:0;right:0;text-align:center;font:800 38px 'Baloo 2',sans-serif;color:#fff4c3;text-shadow:0 4px #24414a;pointer-events:none;transition:opacity .3s}#quiz{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:16px;right:16px;background:#fff8e9;color:#293f4b;border:4px solid white;border-radius:23px;padding:12px 16px 10px;box-shadow:0 9px 0 #122d3c66,0 15px 35px #10263366}.quiz-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.5px;color:#7d8b91}#combo{color:#cb7d22}#equation{text-align:center;font:800 35px 'Baloo 2',sans-serif;line-height:1.4}#answers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#answers button{background:#dceef0;color:#284b59;border-radius:12px;border-bottom:4px solid #adcdd2;font-size:25px;padding:8px 0;transition:transform .1s}#answers button:active{transform:translateY(3px)}#answers button.correct{background:#9de2ae}#answers button.wrong{background:#ffaca3}#feedback{text-align:center;font-size:11px;min-height:18px;margin-top:8px}#overlay{position:absolute;inset:0;background:#18354088;backdrop-filter:blur(5px);display:grid;place-items:center;padding:25px}.panel{width:min(100%,370px);background:#fff7e7;border:5px solid white;border-radius:30px;padding:25px;color:#294550;text-align:center;box-shadow:0 15px 0 #142c4066}.badge{font-size:44px;color:#e6a242}h1{font:800 45px/.95 'Baloo 2',sans-serif;margin:10px 0 20px}h1 b{color:#588268}p{line-height:1.7;font-size:14px}.panel button{display:block;width:100%;padding:13px;border-radius:13px;margin:10px 0;background:#e0e9e5;color:#294550}.panel .primary{background:#ffce66;border-bottom:5px solid #dda344}.panel small{display:block;color:#889591;margin-top:15px}footer{position:absolute;bottom:4px;width:100%;font-size:9px;text-align:center;opacity:.65;pointer-events:none}.hidden{display:none!important}.slide{animation:slide .38s ease-out}@keyframes slide{from{transform:translateX(-115%);opacity:0}to{transform:translateX(0);opacity:1}}@media(max-height:650px){#quiz{padding:8px 12px}#equation{font-size:28px}#answers button{padding:5px}#stats{top:60px}.panel{padding:16px}}

/* Fixed portrait shell; separate battlefield and question deck. */
#game{width:min(100vw,62dvh,560px);--deck:190px;min-height:460px}
#scene{bottom:var(--deck);height:calc(100% - var(--deck))}
#scene canvas{height:100%}
#quiz{bottom:24px;min-height:150px}
#banner{top:29%;font-size:30px}
#health{color:#c5e7ae;font-size:10px}
.unknown{color:#d74c43}
.credits{font-size:9px!important;line-height:1.5}.credits a{color:#5c7778}
.panel{max-height:94dvh;overflow:auto}
@media(max-height:650px){#game{--deck:165px}#quiz{min-height:130px;bottom:21px}header{left:12px;right:12px}.brand{font-size:16px}#stats{left:10px;right:10px;font-size:10px}#stats span{padding:6px}}