:root{color-scheme:dark;--ink:#e9f2ec;--muted:#a9beb5;--mint:#9af2be;--lilac:#d3abff;--line:#2e4b40;--panel:#15231f;--mono:ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(ellipse at 85% 6%,#21382e 0,transparent 43%),#0e1815;font-family:system-ui,"Noto Sans Thai",Tahoma,sans-serif}
a{color:var(--mint)}
a:hover{color:#d4ffe2}
[hidden]{display:none!important}
.shell{max-width:1150px}
.topline,.footline{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topline{padding:28px 0;border-bottom:1px solid var(--line)}
.footline{padding:22px 0;font:12px var(--mono);letter-spacing:.11em;color:var(--muted)}
.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;font:700 16px var(--mono)}
.brand-icon{display:grid;place-items:center;width:35px;height:35px;color:#10231b;background:var(--mint);border-radius:9px;font-size:21px}
.accent{color:var(--mint)}
.tag,.eyebrow,.caption,.visual-top,.visual-bottom{font-family:var(--mono);letter-spacing:.07em}
.tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--mint);white-space:nowrap}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:5px}
.stage{min-height:61vh;margin-top:27px}
.pane{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:510px}
.hero-copy{padding:clamp(25px,6vw,70px)}
.eyebrow{font-size:12px;color:var(--mint);margin-bottom:14px}
.eyebrow span{color:#151b16;background:var(--lilac);padding:3px 6px;border-radius:3px;margin-right:6px}
h1{font-size:clamp(54px,8vw,103px);font-weight:800;line-height:.88;letter-spacing:-.075em;margin:22px 0 25px}
h2{font-size:clamp(28px,5vw,48px);font-weight:750;line-height:1.2}
h3{font-size:18px;color:var(--mint)}
.intro{font-size:clamp(16px,2vw,21px);line-height:1.7;color:var(--muted)}
.rules{display:flex;gap:22px;margin:25px 0}
.rules div{display:grid;gap:5px;border-left:1px solid var(--line);padding-left:12px}
.rules strong{font:700 24px var(--mono)}
.rules span,.muted,.caption{color:var(--muted)}
.caption{font-size:12px;line-height:1.55}
.hero-visual{background:linear-gradient(145deg,#1b3a30,#142821 85%);border-left:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto;align-items:center;padding:25px;position:relative}
.hero-visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#9af2be0b 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,#9af2be0b 0 1px,transparent 1px 20px)}
.orb{width:min(100%,390px);margin:auto}
.visual-top,.visual-bottom{display:flex;justify-content:space-between;font-size:11px;color:#a4c6b8}
.action{background:var(--mint);color:#14251d;border:1px solid var(--mint);font-weight:750;padding:12px 20px;border-radius:9px}
.action span{margin-left:11px}
.action:hover,.action:focus-visible{background:#c1ffda;color:#132018;border-color:#c1ffda}
.action:disabled{background:#637b6d;color:#121d18;border-color:#637b6d}
.play-pane{padding:clamp(19px,4vw,46px);max-width:990px;margin:auto}
.phase-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.timer{font:700 clamp(24px,4vw,45px) var(--mono);color:var(--mint);background:#102019;border:1px solid var(--line);padding:10px 16px;border-radius:10px;white-space:nowrap}
.score small{font-size:15px;color:var(--muted);margin-left:3px}
.reference-frame{min-height:100px;text-align:center;background:#0b1511;border-radius:12px}
.reference-frame img{width:100%;height:min(59vh,650px);object-fit:contain}
.form-control,.form-select{color:var(--ink);background:#101b17;border-color:var(--line)}
.form-control:focus,.form-select:focus{color:var(--ink);background:#101b17;border-color:var(--mint);box-shadow:0 0 0 .17rem #9af2be2b}
.form-control::placeholder{color:#91a59a}
.form-control:disabled{color:var(--ink);background:#20332a}
.prompt-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px}
.center-pane{text-align:center;min-height:320px;padding-top:70px}
.loader{height:65px;width:65px;border-radius:50%;border:1px solid var(--line);border-top:3px solid var(--mint);margin:0 auto 25px;animation:rotate 1.25s linear infinite}
@keyframes rotate{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.loader{animation:none}}
.compare,.result-detail{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:23px 0}
.compare figure,.result-detail>div{margin:0;background:#101b17;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.compare img{width:100%;aspect-ratio:1;object-fit:contain;background:#0c1712}
.compare figcaption,.result-detail>div{padding:13px 16px}
.compare figcaption{color:var(--muted)}
.preserve{white-space:pre-wrap;overflow-wrap:anywhere}
.category-list{list-style:none;padding:0}
.category-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.admin-shell{max-width:1280px}
.admin section{padding:22px;margin-bottom:18px}
.admin .table{--bs-table-bg:transparent;--bs-table-color:var(--ink);--bs-table-border-color:var(--line);font-size:.9rem}
.admin .form-control,.admin .form-select{margin-bottom:12px}
.admin-thumb{width:70px;height:56px;object-fit:contain;background:#101b17;border-radius:7px}
.admin-card{padding:16px;border-radius:10px;background:#101b17;border:1px solid var(--line)}
@media(max-width:720px){.hero{grid-template-columns:1fr}.hero-visual{border-left:none;border-top:1px solid var(--line);padding:14px}.orb{max-height:210px}.topline{padding:17px 0}.stage{margin-top:15px}.result-detail{grid-template-columns:1fr}.footline{font-size:9px}.compare{gap:8px}.tag{padding:6px 8px}.brand{font-size:14px}}