:root {
  --bg: #0b5132;
  --bg2: #083d26;
  --fg: #f2f2f2;
  --muted: #a9c8b8;
  --accent: #f5b700;
  --panel: rgba(0, 0, 0, .28);
  /* Card size scales with the viewport so 5 cards fit on a phone. */
  --cw: min(17vw, 10.5dvh, 112px);
  --ch: calc(var(--cw) * 1.4);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

button, input, select { font: inherit; color: inherit; }
button {
  background: #2d6b4c; border: 0; border-radius: 10px; padding: 10px 16px;
  cursor: pointer; min-height: 44px;
}
button:active { transform: scale(.97); }
button.primary { background: var(--accent); color: #111; font-weight: 700; }
button.ghost { background: transparent; border: 1px solid var(--muted); }
input, select {
  background: #fff; color: #111; border: 0; border-radius: 8px; padding: 9px 10px; min-height: 44px;
}
kbd { background: #222; border-radius: 4px; padding: 0 5px; font-size: .9em; }

/* ---------- Home / waiting ---------- */
.screen { min-height: 100dvh; }
#home, #wait { max-width: 720px; margin: 0 auto; padding: 16px; }
.hero { text-align: center; padding: 12px 0 4px; }
.hero h1 { font-size: 56px; margin: 0; letter-spacing: 6px; color: var(--accent); }
.hero p { margin: 4px 0 0; color: var(--muted); }
.panel { background: var(--panel); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.panel h2 { font-size: 18px; margin: 4px 0 10px; }
.panel ul { padding-left: 20px; margin: 0 0 10px; }
.panel li { margin: 5px 0; }
.panel label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.row > * { flex: 1; }
#joinCode { text-transform: uppercase; letter-spacing: 3px; }
.preview { display: flex; gap: 8px; margin-top: 12px; }
.preview svg { width: 56px; height: 78px; }
.center { text-align: center; }
#wait .panel { margin-top: 20vh; }
.code { font-size: 44px; letter-spacing: 8px; font-weight: 800; color: var(--accent); margin: 6px 0; }
#inviteLink { width: 100%; margin: 6px 0 10px; }
#wait button { margin: 6px; }
.spinner {
  width: 36px; height: 36px; margin: 6px auto; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.2); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Game ---------- */
#game {
  height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at center, var(--bg) 0%, var(--bg2) 100%);
}
.bar { display: flex; gap: 14px; font-size: 14px; }
.hand { display: flex; gap: 1.6vw; justify-content: center; min-height: var(--ch); }
.hand.opp { --cw: min(14vw, 9dvh, 96px); min-height: calc(var(--cw) * 1.4); }
.panel h2.gap { margin-top: 18px; }
.card, .pile { width: var(--cw); height: calc(var(--cw) * 1.4); position: relative; flex: none; }
.card svg, .pile svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.hand.me .card { cursor: pointer; touch-action: none; }
.hand.me .card.drag { z-index: 10; transition: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.hand .card.empty { visibility: hidden; }
.hand .card { transition: transform .08s; }
.hand.me .card.sel {
  transform: translateY(-14px); border-radius: 10px;
  outline: 3px solid var(--accent); outline-offset: 2px;
  filter: drop-shadow(0 0 10px rgba(245, 183, 0, .7));
}
.hand.me .card .key {
  position: absolute; bottom: -18px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: var(--muted);
}
@media (hover: none) { .hand.me .card .key { display: none; } }
.card.bad { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.table { display: flex; gap: 3vw; align-items: center; }
.pile.center {
  border-radius: 10px; outline: 2px dashed rgba(255,255,255,.25); outline-offset: 3px;
}
.pile.center { cursor: pointer; }
.pile.center.valid { outline: 3px solid #7fe08a; outline-offset: 3px; }
.pile.center.target { outline: 3px solid var(--accent); }
.pile.center.hit { animation: hit .25s; }
@keyframes hit { 50% { transform: scale(1.06); } }
.pile.side { --cw: min(13vw, 8.5dvh, 90px); }
.pile.side.empty svg { opacity: .15; }
.pile .cnt {
  position: absolute; inset: auto 0 -20px 0; text-align: center; font-size: 13px; color: var(--muted);
}

.status { min-height: 24px; text-align: center; font-weight: 600; color: var(--accent); padding: 0 8px; }
.status.alert { animation: pulse .7s infinite alternate; }
@keyframes pulse { to { opacity: .45; } }

.controls { display: flex; gap: 12px; width: 100%; max-width: 560px; }
.controls .speed {
  flex: 1; min-height: 64px; font-size: 26px; font-weight: 900; letter-spacing: 4px;
  background: var(--accent); color: #111;
}
.controls .speed.voted { background: #8a6a00; color: #eee; }
.controls .speed.alert { animation: pulse .5s infinite alternate; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay .panel { background: #123d2a; min-width: min(360px, 100%); }
#overTitle { font-size: 30px; }

.toast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  background: #222; padding: 10px 16px; border-radius: 10px; z-index: 50; max-width: 90vw; text-align: center;
}
.net {
  position: fixed; left: 0; right: 0; bottom: 0; background: #8b1d1d; text-align: center;
  padding: 6px; font-size: 14px; z-index: 60;
}

/* ---------- Effects ---------- */
.mute {
  position: fixed; top: 8px; right: 8px; z-index: 70; min-height: 40px; width: 44px; padding: 0;
  background: rgba(0,0,0,.3); font-size: 20px;
}
.flash {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.3);
  font-size: min(18vw, 120px); font-weight: 900; letter-spacing: 6px; pointer-events: none;
  opacity: 0; z-index: 40; color: var(--accent);
  text-shadow: 0 0 20px rgba(245,183,0,.8), 0 6px 0 #6b4f00;
}
.flash.opp { color: #ff6b6b; text-shadow: 0 0 20px rgba(255,80,80,.8), 0 6px 0 #6b0000; }
.flash.bad { color: #bbb; text-shadow: 0 0 12px rgba(0,0,0,.8); font-size: min(12vw, 80px); }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); }
}
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.overlay .panel { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.over-icon { font-size: 64px; line-height: 1; }
.won .over-icon { animation: bounce 1s infinite; }
.won #overTitle {
  background: linear-gradient(90deg, #f5b700, #ff7ac6, #6fd3ff, #7fe08a, #f5b700);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 2s linear infinite;
}
.won .panel { box-shadow: 0 0 40px rgba(245,183,0,.55); }
.lost .over-icon { animation: wobble 1.2s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-14px) scale(1.08); } }
@keyframes shine { to { background-position: 300% 0; } }
@keyframes wobble { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }