:root {
  --accent:#ffcb05; --accent2:#2a75bb; --ink:#10245c; --good:#58c26a; --bad:#f0554b;
  --text:#fff; --muted:#cfe0ff; --muted2:#9fb6e6; --panel:rgba(255,255,255,.12);
  --bg:radial-gradient(circle at 50% 42%, #4d8ce8 0%, #2a63c8 38%, #133f9c 66%, #0a2665 100%);
  --sans:"Trebuchet MS","Segoe UI",Verdana,system-ui,sans-serif;
}
* { box-sizing:border-box; } html,body { margin:0; height:100%; }
body { font-family:var(--sans); color:var(--text); background:var(--bg); background-attachment:fixed;
  min-height:100vh; display:flex; justify-content:center; padding:20px 16px 44px; }
.col { width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.topbar { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; }
select, .iconbtn { font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--ink); background:var(--accent);
  border:3px solid var(--ink); border-radius:10px; padding:8px 10px; cursor:pointer; box-shadow:0 3px 0 var(--ink); }
.iconbtn { background:rgba(255,255,255,.15); color:var(--text); border-color:rgba(255,255,255,.5); box-shadow:0 3px 0 rgba(0,0,0,.25); }
select:focus { outline:none; } select:disabled { opacity:.6; cursor:default; }
header { text-align:center; }
.kicker { font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 6px; }
h1 { margin:0; line-height:.95; font-weight:800; font-style:italic; font-size:clamp(1.6rem,7vw,2.4rem); color:var(--accent);
  -webkit-text-stroke:2px var(--ink); text-shadow:3px 3px 0 var(--ink),4px 5px 0 rgba(0,0,0,.25); }
h1 span { color:#fff; -webkit-text-stroke:2px var(--accent2); text-shadow:3px 3px 0 var(--accent2); }
.hud { display:flex; align-items:center; gap:16px; }
.pips { display:flex; gap:8px; } .pip { width:24px; height:7px; border-radius:99px; background:rgba(255,255,255,.25); transition:background .3s; }
.pip.used { background:var(--bad); } .pip.win { background:var(--good); }
.clock { font-variant-numeric:tabular-nums; font-weight:800; font-size:.9rem; color:var(--muted); }
.stage { position:relative; width:min(300px,78vw); aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 66%); }
.stage::before { content:""; position:absolute; inset:-6%; z-index:0; background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%); filter:blur(8px); }
.stage.rect { border-radius:18px; background:rgba(255,255,255,.06); overflow:hidden; }
#mon { position:relative; z-index:1; width:88%; height:88%; object-fit:contain; filter:brightness(0) blur(16px); transition:filter .7s ease; -webkit-user-drag:none; user-select:none; }
.stage.rect #mon { width:100%; height:100%; }
.loading { position:absolute; z-index:2; font-size:.8rem; color:var(--muted); }
.focuslabel { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; min-height:1em; }
.play { width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.guessbar { display:flex; gap:8px; width:100%; position:relative; }
.guessbar input { flex:1; min-width:0; padding:14px; font-size:1rem; font-family:var(--sans); font-weight:600; text-align:center; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:12px; outline:none; }
.guessbar input:focus { border-color:var(--accent); } .guessbar input::placeholder { color:#9aa7c7; font-weight:500; }
.ac { position:absolute; top:calc(100% + 4px); left:0; right:64px; z-index:8; background:#fff; border:3px solid var(--ink); border-radius:12px; overflow:hidden; display:none; }
.ac.show { display:block; } .ac div { padding:9px 12px; color:var(--ink); font-weight:600; font-size:.9rem; cursor:pointer; }
.ac div:hover, .ac div.sel { background:var(--accent); }
.btn { padding:0 20px; font-size:.95rem; font-weight:800; cursor:pointer; color:var(--ink); background:var(--accent); border:3px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 var(--ink); transition:transform .05s, filter .15s; }
.btn:hover { filter:brightness(1.05); } .btn:active { transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.btn.ghost { background:rgba(255,255,255,.15); color:var(--text); box-shadow:0 3px 0 rgba(0,0,0,.25); border-color:rgba(255,255,255,.5); }
.shake { animation:shake .32s; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-4px)} }
.hint { font-size:.84rem; color:var(--muted); text-align:center; min-height:1.1em; } .hint b { color:var(--accent); }
.misses { width:100%; display:flex; flex-direction:column; gap:6px; }
.missrow { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:var(--panel); font-size:.9rem; }
.missrow .x { color:var(--bad); font-weight:800; } .missrow .g { text-transform:capitalize; opacity:.9; text-decoration:line-through; }
.result { width:100%; display:none; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:20px; border-radius:16px; background:rgba(8,26,72,.55); border:2px solid rgba(255,255,255,.25); backdrop-filter:blur(3px); animation:rise .35s ease both; }
.result.show { display:flex; }
@keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1} }
.result .verdict { font-weight:800; font-size:1.5rem; font-style:italic; } .result .verdict.win { color:var(--good); } .result .verdict.lose { color:var(--accent); }
.reward { font-size:1.5rem; font-weight:800; } .reward small { font-size:.8rem; color:var(--muted); font-weight:500; }
.result .revealname { font-size:1.5rem; font-weight:800; color:var(--accent); text-transform:capitalize; -webkit-text-stroke:1.5px var(--ink); text-shadow:2px 2px 0 var(--ink); }
.result .dex { font-size:.82rem; color:var(--muted); }
.actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; }
.stat { text-align:center; } .stat b { display:block; font-size:1.4rem; color:var(--accent); font-weight:800; } .stat span { font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.dist { width:100%; display:flex; flex-direction:column; gap:4px; }
.distrow { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:center; font-size:.78rem; }
.distrow .barwrap { background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden; }
.distrow .bar { background:var(--good); height:18px; min-width:22px; border-radius:4px; text-align:right; color:var(--ink); font-weight:800; padding-right:6px; line-height:18px; transition:width .5s ease; }
.modal { position:fixed; inset:0; background:rgba(4,14,44,.75); display:none; place-items:center; padding:20px; z-index:20; }
.modal.show { display:grid; }
.modal .box { width:100%; max-width:360px; background:var(--modalbg,#143a8e); border:3px solid var(--ink); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.modal h3 { margin:0; font-size:1.2rem; font-style:italic; }
.howbox { display:flex; flex-direction:column; gap:9px; width:100%; font-size:.92rem; line-height:1.4; text-align:left; }
.howbox div { position:relative; padding-left:22px; }
.howbox div::before { content:"→"; position:absolute; left:0; color:var(--accent); font-weight:800; }
#startBtn { width:100%; font-size:1.05rem; padding:13px; }
#roomBody { display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; font-size:.9rem; }
#roomBody p { margin:0; line-height:1.45; text-align:center; } #roomBody .btn { width:100%; }
.joinrow { display:flex; gap:8px; width:100%; }
.joinrow input { flex:1; min-width:0; padding:10px; text-align:center; text-transform:uppercase; font-weight:800;
  border-radius:8px; border:3px solid var(--ink); background:#fff; color:var(--ink); outline:none; }
footer { font-size:.72rem; color:var(--muted2); text-align:center; line-height:1.5; } footer a { color:var(--accent); }
@media (prefers-reduced-motion: reduce){ *,::before,::after{ animation-duration:.001s !important; transition-duration:.001s !important; } }