/* Scoped under .snake-hunt so we don't bleed into the theme */
.snake-hunt { --bg:#0f1220; --panel:#161a2f; --accent:#7c9cff; --text:#e7ebff; --muted:#9aa3c7; --grid:#222743; --card:#0f1431; color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
.snake-hunt * { box-sizing: border-box; }
.snake-hunt .sh-wrap { width: min(980px, 100%); display: grid; gap: 12px; margin: 0 auto; }
.snake-hunt header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.snake-hunt header h1 { font-size: clamp(18px,2.5vw,24px); margin:0; letter-spacing:.5px; }
.snake-hunt .buttons{ display:flex; gap:8px; align-items:center; }
.snake-hunt button{ background:var(--panel); color:var(--text); border:1px solid #2b325e; border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04); }
.snake-hunt button:hover{ filter: brightness(1.1); }

.snake-hunt .game{ border:1px solid #2b325e; border-radius:16px; overflow:hidden; background:#0c0f22; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.snake-hunt .canvas-wrap{ 
  position:relative; 
  width:min(92vw, min(70vh, calc(100svh - 260px))); 
  margin:0 auto; 
  aspect-ratio:1/1; 
  background:linear-gradient(180deg,#0c0f22 0%,#0c0f22 50%,#0a0d1d 100%); 
}
.snake-hunt canvas{ 
  display:block; 
  width:100%; 
  height:100%; 
  background:
  repeating-linear-gradient(0deg,var(--grid) 0 2px,transparent 2px 32px),
  repeating-linear-gradient(90deg,var(--grid) 0 2px,transparent 2px 32px); 
}

.snake-hunt .hud{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; background:var(--panel); border-top:1px solid #2b325e; align-items:start; }
.snake-hunt .huntedCard{ background:linear-gradient(180deg,#121a46,#0e1334); border:1px solid #3b416f; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; }
.snake-hunt .huntedBigJP{ font-size:clamp(22px,4.2vw,34px); font-weight:800; line-height:1.05; }
.snake-hunt .huntedRomaji{ font-size:clamp(10px,1.2vw,12px); color:var(--muted); margin-bottom:2px; }
.snake-hunt .huntedEN{ font-size:clamp(12px,1.6vw,14px); color:var(--muted); }
.snake-hunt .huntedBoxDot{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.7); }

.snake-hunt .stats{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.snake-hunt .stat{ background:var(--card); border:1px solid #2b325e; padding:8px 12px; border-radius:10px; min-width:88px; }
.snake-hunt .stat b{ color:var(--accent); }

.snake-hunt .legendWrap{ align-self:start; }
.snake-hunt .legendTitle{ color:var(--muted); margin:0 0 6px; font-size:14px; }
.snake-hunt .legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.snake-hunt .pill{ display:flex; align-items:center; gap:8px; border:1px solid #2b325e; background:var(--card); padding:6px 10px; border-radius:100px; font-size:14px; }
.snake-hunt .dot{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.6); }

.snake-hunt .overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,6,16,.6); backdrop-filter:blur(3px); z-index:2; }
.snake-hunt .modal{ background:#121634; border:1px solid #2b325e; border-radius:14px; padding:18px; width:min(520px,92%); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.snake-hunt .modal h2{ margin:0 0 10px; font-size:20px; }
.snake-hunt .modal p{ margin:8px 0 14px; color:var(--muted); }
.snake-hunt .modal input, .snake-hunt .modal select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2b325e; background:#0f1431; color:var(--text); }
.snake-hunt .modal .row{ display:flex; gap:8px; margin-top:12px; }
.snake-hunt .modal .row select{ flex:1; }

.snake-hunt .toast{ position:absolute; left:50%; top:10px; transform:translateX(-50%); background:#111744; border:1px solid #3b416f; color:var(--text); padding:8px 12px; border-radius:10px; display:none; box-shadow:0 10px 20px rgba(0,0,0,.35); }

@media (max-height: 800px){
  .snake-hunt .canvas-wrap{ width:min(92vw, min(60vh, calc(100svh - 220px))); }
}

@media (max-width:820px){
  .snake-hunt .hud{ grid-template-columns:1fr; }
}