/* Styles for math_go. */
:root{--ink:#f7fbff;--panel:rgba(5,22,42,.82);--cyan:#39d8ff;--yellow:#ffd83d}
    *{box-sizing:border-box} html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:"Noto Sans Thai",sans-serif;background:#06182d;color:var(--ink);touch-action:none}button,input,select{font:inherit}.title,#question,h1,h2,h3{font-family:"Mitr","Noto Sans Thai",sans-serif}
    #camera{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(.9) brightness(.72)}
    #overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
    .screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 20%,rgba(21,121,180,.36),rgba(3,13,27,.92))}
    .glass{width:min(760px,96vw);max-height:94vh;overflow:auto;border:1px solid rgba(117,225,255,.36);border-radius:30px;background:linear-gradient(145deg,rgba(8,35,61,.94),rgba(5,19,39,.9));box-shadow:0 24px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1);padding:clamp(22px,4vw,42px)}
    .hidden{display:none!important}.title{font-size:clamp(2.1rem,7vw,4.6rem);line-height:.98;font-weight:800;letter-spacing:-.04em}.gradient-text{background:linear-gradient(90deg,#fff,#65e6ff 55%,#ffe761);-webkit-background-clip:text;color:transparent}
    .field{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:11px 13px;color:white;outline:none;width:100%}.field:focus{border-color:#39d8ff}.field option{color:#07182b}
    .btn{border:0;border-radius:18px;padding:14px 22px;font-weight:700;transition:.2s;cursor:pointer}.btn-primary{color:#062138;background:linear-gradient(135deg,#59e8ff,#ffd943);box-shadow:0 8px 30px rgba(57,216,255,.25)}.btn:hover{transform:translateY(-2px)}
    #hud{position:fixed;inset:0;z-index:4;pointer-events:none}.pill{position:absolute;top:max(16px,env(safe-area-inset-top));padding:10px 18px;border-radius:999px;background:rgba(4,18,35,.73);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);font-weight:700;font-size:clamp(16px,2.4vw,24px)}#scorePill{left:16px}#timePill{right:16px}#playerPill{left:50%;transform:translateX(-50%);top:18px;font-size:14px}
    #question{position:absolute;top:14%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(50px,10vw,112px);font-weight:800;text-shadow:0 7px 25px #001,0 0 22px rgba(57,216,255,.5)}
    .ball{position:absolute;display:grid;place-items:center;border-radius:50%;font-size:clamp(28px,6vw,64px);font-weight:800;color:#fff;text-shadow:0 3px 7px rgba(0,0,0,.55);box-shadow:inset -14px -16px 22px rgba(0,0,0,.25),inset 8px 8px 18px rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.3);will-change:transform;transition:filter .15s;border-style:solid}.ball.hover{filter:brightness(1.45);box-shadow:0 0 0 9px rgba(255,255,255,.28),0 0 40px currentColor}.ball.pop{animation:pop .45s ease}.ball.bad{animation:shake .35s ease}
    #cursor{position:absolute;width:34px;height:34px;border:4px solid white;border-radius:50%;background:#168aff;box-shadow:0 0 10px white,0 0 28px #008cff,0 0 55px #00c8ff;transform:translate(-50%,-50%);opacity:0;z-index:9}.tracking #cursor{opacity:1}
    #feedback{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(40px,8vw,90px);font-weight:800;opacity:0;text-shadow:0 5px 25px #000}.show-feedback{animation:feedback .8s ease}
    #cameraHint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:13px;background:rgba(0,0,0,.55);padding:7px 14px;border-radius:99px}
    table{width:100%;border-collapse:collapse}th,td{padding:9px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}th{color:#67e3ff}
    @keyframes pop{50%{transform:scale(1.28)}}@keyframes shake{25%{margin-left:-14px}75%{margin-left:14px}}@keyframes feedback{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-65%) scale(1)}}
    @media(max-width:560px){.pill{padding:8px 12px}#playerPill{top:64px}#question{top:19%}.glass{border-radius:22px}.ball{border-width:5px!important}}