:root {
  --cr: #7a1820; --crd: #5a0f15; --crdd: #3d0a0e;
  --cm: #f0e3c8; --cmd: #d9c89f; --ppr: #e8d9b8;
  --ink: #1a1410; --inks: #2a1f18;
  --gld: #b8923a; --gldl: #d4af5c;
}

*{margin:0;padding:0;box-sizing:border-box}
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cm);
  font-family: 'Cairo', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%237a1820' opacity='0.8'/%3E%3C/svg%3E") 10 10, crosshair;
}

.screen{display:none;min-height:100vh;padding:20px;position:relative}
.screen.active{display:flex;flex-direction:column;align-items:center}

/* ===================== PARTICLES ===================== */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ===================== INTRO ===================== */
#screen-intro {
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, var(--cr) 0%, var(--crd) 40%, var(--crdd) 100%);
  overflow: hidden;
}
#screen-intro::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(0,0,0,0.08) 40px,
    rgba(0,0,0,0.08) 80px
  );
  animation: stripe-drift 20s linear infinite;
}
@keyframes stripe-drift { to { transform: translateX(80px) translateY(80px); } }

.intro-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-wrap { position: relative; margin-bottom: 8px; }
.logo-text {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(90px, 20vw, 200px);
  line-height: 0.85;
  letter-spacing: 0.06em;
  color: var(--cm);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 rgba(0,0,0,0.4), 0 0 80px rgba(240,227,200,0.2);
  animation: logo-entrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes logo-entrance {
  from { opacity:0; transform: scale(0.5) rotate(-5deg); }
  to { opacity:1; transform: scale(1) rotate(0deg); }
}
.logo-o {
  display: inline-block;
  position: relative;
  animation: o-spin 8s linear infinite;
  transform-origin: center;
}
.logo-o::after {
  content: '☢';
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  font-size: 0.6em;
  color: var(--ink);
  animation: o-spin-reverse 8s linear infinite;
}
@keyframes o-spin { to { filter: hue-rotate(360deg); } }
@keyframes o-spin-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }

.tagline {
  font-family: 'Special Elite', cursive;
  font-size: clamp(13px,2.5vw,18px);
  letter-spacing: 0.3em;
  color: var(--cm);
  opacity: 0;
  animation: fade-up 0.8s 0.5s ease both;
  margin-bottom: 6px;
}
.tagline-ar {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(13px,2vw,15px);
  color: var(--cmd);
  opacity: 0;
  animation: fade-up 0.8s 0.7s ease both;
  margin-bottom: 30px;
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

.cards-stage {
  perspective: 1000px;
  width: 100%;
  max-width: 600px;
  height: 220px;
  position: relative;
  margin: 0 auto 30px;
  opacity: 0;
  animation: fade-up 0.8s 0.9s ease both;
}
.stage-card {
  position: absolute;
  width: 120px;
  height: 170px;
  border: 3px solid var(--cm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,227,200,0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border-radius: 4px;
  overflow: hidden;
}
.stage-card img { width:100%; height:100%; object-fit:cover; display:block; }
.stage-card:nth-child(1) { left:10px;  top:30px; transform: rotate(-12deg); z-index:1; }
.stage-card:nth-child(2) { left:100px; top:10px; transform: rotate(-5deg); z-index:2; }
.stage-card:nth-child(3) { left:50%;   top:0;    transform: translateX(-50%) rotate(2deg); z-index:5; }
.stage-card:nth-child(4) { right:100px;top:10px; transform: rotate(5deg); z-index:2; }
.stage-card:nth-child(5) { right:10px; top:30px; transform: rotate(12deg); z-index:1; }
.stage-card:hover {
  transform: translateY(-20px) rotate(0deg) scale(1.1) !important;
  z-index: 10 !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(240,227,200,0.3);
}
.stage-card { animation: card-fan 6s ease-in-out infinite; }
.stage-card:nth-child(1) { animation-delay: 0s; }
.stage-card:nth-child(2) { animation-delay: 0.3s; }
.stage-card:nth-child(3) { animation-delay: 0.6s; }
.stage-card:nth-child(4) { animation-delay: 0.9s; }
.stage-card:nth-child(5) { animation-delay: 1.2s; }
@keyframes card-fan {
  0%,100% { filter: brightness(0.9); }
  50% { filter: brightness(1.1) drop-shadow(0 0 8px rgba(240,227,200,0.4)); }
}

.intro-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fade-up 0.8s 1.1s ease both;
}

/* ===================== BUTTONS ===================== */
.btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  z-index: 2;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn:hover::after { opacity: 1; }
.btn-primary {
  background: var(--cm); color: var(--crd); font-size: 22px;
  padding: 16px 50px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.btn-primary:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.btn-primary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-secondary {
  background: transparent; color: var(--cm); border: 2px solid var(--cm);
  font-size: 18px; padding: 14px 36px; box-shadow: 4px 4px 0 var(--ink);
}
.btn-secondary:hover { background:var(--cm); color:var(--crd); transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.btn-ink {
  background: var(--ink); color: var(--cm); border: 2px solid var(--ink);
  font-size: 16px; padding: 10px 24px; box-shadow: 3px 3px 0 var(--cr);
}
.btn-ink:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--cr); }
.btn-red {
  background: var(--cr); color: var(--cm); border: 2px solid var(--ink);
  font-size: 16px; padding: 10px 24px; box-shadow: 3px 3px 0 var(--ink);
}
.btn-red:hover { background:var(--crd); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.btn-ghost {
  background: transparent; color: var(--cmd); border: 1px solid var(--cmd);
  font-size: 14px; padding: 8px 18px; box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.btn-ghost:hover { color:var(--cm); border-color:var(--cm); }
.btn-sm { font-size: 14px !important; padding: 8px 16px !important; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===================== SCREEN TITLES ===================== */
.screen-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(30px,6vw,48px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--crd);
  text-align: center;
  margin-bottom: 6px;
}
.screen-sub {
  font-family: 'Special Elite', cursive;
  color: var(--cmd);
  font-size: 14px;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: 0.1em;
}

/* ===================== PAPER PANEL ===================== */
.paper {
  background: var(--ppr); color: var(--ink);
  border: 2px solid var(--ink); padding: 24px; position: relative;
  box-shadow: 6px 6px 0 var(--ink), 6px 6px 0 2px var(--crd);
}
.paper::before {
  content:''; position:absolute;
  top:6px;left:6px;right:6px;bottom:6px;
  border:1px dashed var(--ink); opacity:0.25; pointer-events:none;
}
.paper-dark { background:var(--crd); color:var(--cm); }
.paper-dark::before { border-color:var(--cm); opacity:0.4; }

.panel-label {
  font-family:'Oswald',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--crd);
  border-bottom:2px solid var(--crd); padding-bottom:8px; margin-bottom:16px;
}

/* ===================== LOBBY SCREEN ===================== */
#screen-lobby {
  justify-content: flex-start;
  padding-top: 30px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.lobby-room-code {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(48px,12vw,80px);
  letter-spacing: 0.25em;
  color: var(--gld);
  text-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  margin: 10px 0;
  animation: fade-up 0.6s ease both;
}

.lobby-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  border: 2px solid var(--gld);
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  word-break: break-all;
}
.lobby-link-text { flex: 1; color: var(--cmd); font-family: 'Special Elite', cursive; }
.lobby-players-list { display: flex; flex-direction: column; gap: 6px; }
.lobby-player {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--cm); color: var(--ink);
  border: 1px solid var(--ink);
  font-weight: 600; font-size: 14px;
  animation: log-slide 0.3s ease both;
}
.lobby-player.host { border-color: var(--gld); background: rgba(184,146,58,0.15); }
.lobby-badge {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; background: var(--gld); color: var(--ink);
}
.lobby-badge.disconnected { background: var(--inks); color: var(--cmd); }
.lobby-min-note { color: var(--cmd); font-size: 12px; font-style: italic; text-align: center; margin-top: 6px; }

/* ===================== JOIN SCREEN ===================== */
#screen-join {
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, var(--crd) 0%, var(--crdd) 80%);
  min-height: 100vh;
}
.join-box {
  background: var(--ppr); color: var(--ink);
  border: 3px solid var(--ink);
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: 10px 10px 0 var(--crd);
  animation: card-drop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  position: relative;
  z-index: 2;
}
.join-box::before {
  content:''; position:absolute;
  top:8px;left:8px;right:8px;bottom:8px;
  border:1.5px dashed var(--ink); opacity:0.25; pointer-events:none;
}
.join-input {
  background: var(--cm); border: 2px solid var(--ink);
  color: var(--ink); font-family: 'Cairo', sans-serif;
  font-weight: 600; font-size: 18px;
  padding: 12px 16px; width: 100%;
  outline: none; margin-bottom: 14px;
  box-shadow: 3px 3px 0 var(--crd);
  text-align: center;
}
.join-input:focus { box-shadow: 5px 5px 0 var(--crd); transform: translate(-2px,-2px); }
.join-code-input {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ===================== SETUP ===================== */
#screen-setup {
  justify-content:flex-start; padding-top:30px;
  max-width:760px; margin:0 auto;
}
.count-btn {
  width:56px;height:56px; border:2px solid var(--ink);
  background:var(--ppr); color:var(--ink);
  font-family:'Oswald',sans-serif; font-weight:700; font-size:22px;
  cursor:pointer; transition:all 0.2s; box-shadow:3px 3px 0 var(--crd);
}
.count-btn:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--crd); }
.count-btn.selected { background:var(--crd); color:var(--cm); box-shadow:3px 3px 0 var(--ink); }
.players-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px;
}
.player-input-wrap {
  display:flex; align-items:center; gap:10px;
  background:var(--cm); border:2px solid var(--ink); padding:8px 12px;
  box-shadow:2px 2px 0 var(--crd); transition: all 0.2s;
}
.player-input-wrap:focus-within { box-shadow: 4px 4px 0 var(--crd); transform: translate(-2px,-2px); }
.player-num {
  font-family:'Oswald',sans-serif; font-weight:700; font-size:14px;
  background:var(--ink); color:var(--cm); width:28px;height:28px;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.player-input {
  background:none;border:none; color:var(--ink);
  font-family:'Cairo',sans-serif;font-weight:600;font-size:15px; width:100%;outline:none;
}
.roles-preview { display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:16px; }
.role-prev-card {
  width:90px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--crd);
  overflow:hidden; transition:all 0.3s;
}
.role-prev-card:hover { transform:translateY(-6px) rotate(-3deg); box-shadow:6px 9px 0 var(--crd); }
.role-prev-card img { width:100%;display:block; }
.role-prev-count { background:var(--ink);color:var(--cm);text-align:center;padding:5px;font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.1em; }

/* ===================== REVEAL ===================== */
#screen-reveal {
  justify-content:center; text-align:center;
  background:radial-gradient(ellipse at center, var(--crd) 0%, var(--crdd) 80%);
  min-height:100vh; overflow:hidden;
}
#screen-reveal::after {
  content:''; position:absolute;
  top:-50%;left:50%; transform:translateX(-50%);
  width:400px;height:600px;
  background:radial-gradient(ellipse at center top, rgba(240,227,200,0.08) 0%, transparent 70%);
  animation:spotlight 4s ease-in-out infinite;
}
@keyframes spotlight {
  0%,100%{ transform:translateX(-50%) scaleX(1); }
  50%{ transform:translateX(-50%) scaleX(1.3); }
}
.reveal-envelope { position:relative; z-index:2; width:100%; max-width:440px; }
.reveal-front {
  background:var(--ppr); color:var(--ink);
  padding:32px 28px; border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink), 10px 10px 0 3px var(--cr);
  position:relative; animation:card-drop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes card-drop {
  from { opacity:0; transform:translateY(-40px) rotate(-3deg); }
  to { opacity:1; transform:translateY(0) rotate(0deg); }
}
.reveal-front::before {
  content:'';position:absolute;
  top:8px;left:8px;right:8px;bottom:8px;
  border:1.5px dashed var(--ink); opacity:0.25;pointer-events:none;
}
.reveal-stamp {
  font-family:'Oswald',sans-serif;font-weight:700; font-size:11px;letter-spacing:0.35em;
  color:var(--crd);border:2px solid var(--crd); padding:4px 12px;display:inline-block;
  margin-bottom:20px;transform:rotate(-2deg);
}
.reveal-name { font-family:'Oswald',sans-serif;font-weight:700;font-size:36px;letter-spacing:0.05em;color:var(--ink);margin-bottom:6px; }
.reveal-hint { color:var(--inks);font-size:13px;margin-bottom:24px;font-family:'Special Elite',cursive; }
.reveal-btn {
  background:var(--ink); border:3px solid var(--crd); color:var(--cm);
  font-family:'Oswald',sans-serif;font-weight:700; font-size:20px;letter-spacing:0.15em;text-transform:uppercase;
  padding:16px 36px;cursor:pointer;width:100%;margin-bottom:12px;transition:all 0.2s;
  box-shadow:4px 4px 0 var(--crd); position:relative;overflow:hidden;
}
.reveal-btn::before {
  content:'';position:absolute; top:50%;left:50%; width:0;height:0;
  background:rgba(122,24,32,0.4); border-radius:50%;
  transition:all 0.5s; transform:translate(-50%,-50%);
}
.reveal-btn:hover::before { width:300px;height:300px; }
.reveal-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.reveal-waiting {
  font-family:'Special Elite',cursive; font-size:15px; color:var(--inks);
  padding: 24px 0; letter-spacing:0.1em;
}
.card-flip-container { perspective:1000px; width:200px;height:280px;margin:20px auto;display:none; }
.card-flip-container.show { display:block; }
.card-flip-inner {
  position:relative; width:100%;height:100%;
  transform-style:preserve-3d;
  animation:flip-reveal 0.8s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes flip-reveal {
  0% { transform:rotateY(-180deg) scale(0.8); }
  60% { transform:rotateY(10deg) scale(1.05); }
  100% { transform:rotateY(0deg) scale(1); }
}
.card-flip-front, .card-flip-back {
  position:absolute;width:100%;height:100%;
  backface-visibility:hidden; border:3px solid var(--cm);
  box-shadow:8px 8px 0 var(--ink), 0 0 30px rgba(240,227,200,0.2);
  border-radius:4px; overflow:hidden;
}
.card-flip-front img { width:100%;height:100%;object-fit:cover; }
.card-flip-back { background:var(--crd); transform:rotateY(180deg); display:flex;align-items:center;justify-content:center; }
.card-flip-back::after { content:'☢';font-size:60px;color:rgba(240,227,200,0.3); }
.card-flip-container.show .card-flip-inner {
  filter: drop-shadow(0 0 20px rgba(240,227,200,0.4));
  animation:flip-reveal 0.8s cubic-bezier(0.175,0.885,0.32,1.275) both, glow-pulse 2s 0.8s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { filter:drop-shadow(0 0 10px rgba(240,227,200,0.2)); }
  50% { filter:drop-shadow(0 0 30px rgba(240,227,200,0.5)); }
}
.team-info {
  background:var(--ink);color:var(--cm); border:2px solid var(--gld);
  padding:12px;margin-top:12px;font-size:13px;font-weight:600;
  display:none;animation:fade-up 0.4s ease both;
}
.team-info.show { display:block; }
.team-info strong { color:var(--gldl); }

/* ===================== GAME HEADER ===================== */
#screen-game { justify-content:flex-start;padding:0;max-width:100%;width:100%;align-items:stretch; }
.game-header {
  background:var(--crd); border-bottom:4px solid var(--ink);
  padding:12px 20px; display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100; box-shadow:0 4px 0 var(--crdd);
}
.g-logo { font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;letter-spacing:0.1em;text-shadow:2px 2px 0 var(--ink); }
.g-round {
  font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:0.2em;text-transform:uppercase;
  background:var(--ink);padding:6px 16px;border:1px solid var(--cm);
}
.g-role-badge {
  font-family:'Oswald',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 10px; background:var(--ink); border:1px solid var(--gld); color:var(--gld);
}

/* ===================== GAME BODY ===================== */
.game-body {
  display:grid; grid-template-columns:310px 1fr; gap:20px;
  width:100%;max-width:1200px; margin:0 auto; padding:20px;
}
@media(max-width:800px){ .game-body{grid-template-columns:1fr;} }

/* ===== SIDEBAR ===== */
.sidebar { display:flex;flex-direction:column;gap:14px; }
.score-panel {
  background:var(--ppr);color:var(--ink); border:2px solid var(--ink);padding:16px;
  box-shadow:4px 4px 0 var(--crd);position:relative;
}
.score-panel::before {
  content:'';position:absolute; top:4px;left:4px;right:4px;bottom:4px;
  border:1px dashed var(--ink);opacity:0.2;pointer-events:none;
}
.spanel-title {
  font-family:'Oswald',sans-serif;font-weight:700; font-size:13px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--crd);border-bottom:2px solid var(--crd); padding-bottom:6px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.spanel-icon { width:22px;height:22px;object-fit:cover;border:1px solid var(--ink);flex-shrink:0; }
.score-track { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px; }
.score-slot {
  width:38px;height:50px; border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;
  background:var(--cm);color:var(--ink); position:relative;overflow:hidden;
  box-shadow:2px 2px 0 var(--crd); transition:all 0.3s;
}
.score-slot.filled-red {
  background-image:url('/cards/red_card_token.png'); background-size:cover;background-position:center;
  border-color:var(--crd); animation:card-slam 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.score-slot.filled-black {
  background-image:url('/cards/black_card_token.png'); background-size:cover;background-position:center;
  border-color:var(--ink); animation:card-slam 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes card-slam {
  0% { transform:scale(0) rotate(-15deg); opacity:0; }
  70% { transform:scale(1.15) rotate(2deg); }
  100% { transform:scale(1) rotate(0deg); opacity:1; }
}
.score-slot.special-slot { border:3px solid var(--gld); }
.score-slot .star-m {
  position:absolute;top:-10px;right:-6px; width:18px;height:18px;
  background:var(--gld);color:var(--ink); font-size:10px;font-weight:700;border-radius:50%;
  display:flex;align-items:center;justify-content:center; border:1px solid var(--ink);z-index:2;
}
.score-slot .slot-n { font-size:15px;color:var(--inks); }
.p-list { display:flex;flex-direction:column;gap:4px; }
.p-chip {
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px; background:var(--cm);border:1px solid var(--ink);
  color:var(--ink);font-size:13px;font-weight:600; transition:all 0.3s;
  position:relative;overflow:hidden;
}
.p-chip::before {
  content:'';position:absolute; left:0;top:0;bottom:0;width:3px;
  background:var(--cm); transition:all 0.3s;
}
.p-chip.pres-chip::before { background:var(--gld); }
.p-chip.vp-chip::before { background:var(--cr); }
.p-chip.pres-chip { background:rgba(184,146,58,0.12);border-left:3px solid var(--gld); }
.p-chip.vp-chip { background:rgba(122,24,32,0.12);border-left:3px solid var(--cr); }
.p-chip.dead { opacity:0.3;text-decoration:line-through;animation:death-anim 0.5s ease both; }
.p-chip.me { border-color: var(--gldl); }
.p-chip.disconnected-chip { opacity: 0.5; }
@keyframes death-anim { from{transform:scale(1)} 50%{transform:scale(1.05) rotate(1deg)} to{transform:scale(1)} }
.p-badge {
  font-family:'Oswald',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase; padding:2px 7px;background:var(--ink);color:var(--cm);
}
.e-log { max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px; }
.log-e {
  font-size:12px;color:var(--inks); padding:5px 8px;border-right:3px solid var(--ink);
  background:rgba(255,255,255,0.4);font-weight:500; animation:log-slide 0.3s ease both;
}
@keyframes log-slide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.log-e.r { border-color:var(--crd);color:var(--crd); }
.log-e.b { border-color:var(--ink); }
.log-e.s { border-color:var(--gld);color:var(--ink);background:rgba(184,146,58,0.12);font-weight:700; }
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--cmd)}
::-webkit-scrollbar-thumb{background:var(--crd)}

/* ===================== MAIN PANEL ===================== */
.main-area { display:flex;flex-direction:column;gap:14px; }
.phase-panel {
  background:var(--ppr);color:var(--ink); border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--crd); overflow:hidden;
}
.phase-tabs { display:flex;background:var(--ink); border-bottom:2px solid var(--ink); }
.p-tab {
  flex:1;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  padding:13px 6px;background:var(--ink);border:none;
  color:var(--cmd);cursor:pointer;transition:all 0.2s;
  border-left:1px solid var(--crd); position:relative;overflow:hidden;
}
.p-tab:first-child{border-left:none;}
.p-tab.active { background:var(--ppr);color:var(--crd);font-weight:700; }
.p-tab:hover:not(.active) { color:var(--cm);background:var(--crd); }
.p-tab::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--gld);transform:scaleX(0);transition:transform 0.3s;
}
.p-tab.active::after { transform:scaleX(1); }
.p-content { display:none;padding:22px; }
.p-content.active { display:block;animation:fadeIn 0.25s ease both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.p-title {
  font-family:'Oswald',sans-serif;font-weight:700; font-size:24px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--crd);margin-bottom:6px; border-bottom:3px solid var(--crd);padding-bottom:7px;
}
.p-desc { color:var(--inks);font-size:14px;line-height:1.7;margin-bottom:18px;font-weight:500; }

/* Waiting indicator */
.waiting-msg {
  text-align:center;padding:32px 16px;
  font-family:'Special Elite',cursive;font-size:16px;color:var(--inks);
}
.waiting-spinner {
  font-size:36px;animation:o-spin 2s linear infinite;display:block;margin-bottom:12px;
}

/* ===== LEADERSHIP DISPLAY ===== */
.lead-cards { display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap;justify-content:center; }
.lead-card {
  width:100px;border:2px solid var(--ink); box-shadow:4px 4px 0 var(--crd);overflow:hidden;
  transition:all 0.3s; animation:lead-entrance 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.lead-card:nth-child(2) { animation-delay:0.1s; }
@keyframes lead-entrance {
  from{opacity:0;transform:translateY(-20px) rotate(-5deg);}
  to{opacity:1;transform:translateY(0) rotate(0);}
}
.lead-card:hover { transform:translateY(-8px) rotate(-3deg); box-shadow:7px 12px 0 var(--crd); }
.lead-card img{width:100%;display:block;}
.lead-card-name { background:var(--ink);color:var(--cm);text-align:center;padding:5px;font-family:'Oswald',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.08em; }
.sel-label { font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.15em;text-transform:uppercase;color:var(--crd);margin-bottom:8px; }
.sel {
  background:var(--cm);border:2px solid var(--ink); color:var(--ink);
  font-family:'Cairo',sans-serif;font-weight:600;font-size:15px;
  padding:10px 14px;width:100%;cursor:pointer;outline:none;
  box-shadow:3px 3px 0 var(--crd); transition:all 0.2s;margin-bottom:14px;
}
.sel:focus { transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--crd); }

/* ===== CARDS PHASE ===== */
.card-btns { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px; }
@media(max-width:500px){ .card-btns{grid-template-columns:1fr;} }
.card-big-btn {
  background:var(--cm);border:3px solid var(--ink); cursor:pointer;transition:all 0.3s;
  box-shadow:6px 6px 0 var(--crd);padding:0;overflow:hidden; display:flex;flex-direction:column;
  position:relative;
}
.card-big-btn::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity:0;transition:opacity 0.3s;
}
.card-big-btn:hover { transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--crd); }
.card-big-btn:hover::before { opacity:1; }
.card-big-btn:active { transform:translate(2px,2px);box-shadow:2px 2px 0 var(--crd); }
.card-big-btn img{width:100%;display:block;transition:transform 0.3s;}
.card-big-btn:hover img{transform:scale(1.03);}
.card-btn-lbl {
  padding:12px;text-align:center; font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:0.1em;text-transform:uppercase; background:var(--ink);color:var(--cm);
}
.card-btn-lbl.red-lbl { background:var(--crd); }

/* ===== VETO BANNER ===== */
.veto-banner {
  background:var(--ink);color:var(--cm); border:3px solid var(--gld);
  padding:14px 18px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-bottom:14px; box-shadow:5px 5px 0 var(--crd);
  animation:veto-entrance 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes veto-entrance {
  from{opacity:0;transform:scale(0.8) rotate(-2deg);}
  to{opacity:1;transform:scale(1) rotate(0);}
}
.veto-img { width:65px;border:2px solid var(--gld);flex-shrink:0; }
.veto-txt { font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:0.1em;color:var(--gld); }

/* ===== TIMER ===== */
.timer-wrap {
  background:var(--cm); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--crd);
  padding:24px; text-align:center; margin:14px 0; position:relative; overflow:hidden;
}
.timer-wrap::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(122,24,32,0.05) 0%, transparent 70%);
}
.timer-num {
  font-family:'Oswald',sans-serif;font-weight:700; font-size:clamp(60px,12vw,90px);
  color:var(--ink);letter-spacing:0.05em;line-height:1;
  position:relative;z-index:1; transition:color 0.3s;
}
.timer-num.warn { color:var(--crd);animation:blink 1s step-end infinite; }
@keyframes blink{50%{opacity:0.3}}
.timer-ctrls{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap;}

/* ===== POWERS ===== */
.power-panel {
  background:var(--cm);border:2px solid var(--ink); margin-bottom:14px;display:none;
  box-shadow:5px 5px 0 var(--crd);overflow:hidden;
  animation:power-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.power-panel.active{display:block;}
@keyframes power-pop {
  0%{opacity:0;transform:scale(0.9) translateY(-10px);}
  60%{transform:scale(1.02);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.power-hdr { display:flex;background:var(--crd); border-bottom:2px solid var(--ink); }
.power-hdr-img { width:80px;flex-shrink:0;border-left:2px solid var(--ink); }
.power-hdr-img img{width:100%;height:100%;object-fit:cover;display:block;}
.power-hdr-txt { flex:1;padding:12px 16px;display:flex;flex-direction:column;justify-content:center; }
.power-title { font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cm); }
.power-sub { color:var(--cmd);font-size:12px;font-family:'Special Elite',cursive; }
.power-bdy { padding:16px; }
.power-bdy p { font-size:14px;color:var(--inks);margin-bottom:12px;font-weight:500;line-height:1.6; }
.no-power { text-align:center;color:var(--inks);padding:36px 20px;font-style:italic;font-size:14px; }

/* ===== INSPECT RESULT ===== */
.inspect-res {
  display:none;margin-top:12px; background:var(--ink);border:3px solid var(--gld);
  box-shadow:4px 4px 0 var(--crd);overflow:hidden;
  animation:power-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.inspect-res.show{display:flex;}
.inspect-res-img{width:80px;flex-shrink:0;border-left:2px solid var(--gld);}
.inspect-res-img img{width:100%;height:100%;object-fit:cover;display:block;}
.inspect-res-info{padding:14px;flex:1;color:var(--cm);}
.inspect-res-name{font-size:12px;color:var(--cmd);margin-bottom:4px;letter-spacing:0.1em;}
.inspect-res-role{font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;color:var(--gld);text-transform:uppercase;}

/* ===== PEEK ===== */
.peek-res {
  margin-top:12px;background:var(--ink);color:var(--cm);
  padding:14px;border:2px solid var(--gld);box-shadow:4px 4px 0 var(--crd); display:none;
}
.peek-res.show{display:block;animation:fadeIn 0.3s ease;}
.peek-label{color:var(--gld);font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.15em;margin-bottom:10px;}
.peek-cards{display:flex;gap:10px;justify-content:center;}
.peek-c{width:60px;height:80px;background-size:cover;background-position:center;border:2px solid var(--gld);
  animation:card-slam 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;}
.peek-c:nth-child(2){animation-delay:0.1s;}
.peek-c:nth-child(3){animation-delay:0.2s;}
.peek-c.r{background-image:url('/cards/red_card_token.png');}
.peek-c.b{background-image:url('/cards/black_card_token.png');}

/* ===== VOTE ===== */
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.vote-card {
  background:var(--cm);border:2px solid var(--ink); padding:12px;text-align:center;cursor:pointer;
  transition:all 0.2s;box-shadow:3px 3px 0 var(--crd);
}
.vote-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--crd);}
.vote-card.voted{border-color:var(--crd);background:rgba(122,24,32,0.08);}
.vote-card.my-voted { border-color:var(--gld); background:rgba(184,146,58,0.15); }
.vote-card.disabled { opacity:0.5;cursor:not-allowed;pointer-events:none; }
.vote-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.vote-count{font-family:'Oswald',sans-serif;font-weight:700;font-size:28px;color:var(--crd);}
.vote-hands{font-size:18px;transition:transform 0.2s;}
.vote-card:hover .vote-hands{transform:scale(1.2);}

/* Approval vote */
.approval-btns { display:flex;gap:10px;margin-top:12px;flex-wrap:wrap; }
.approval-status { font-size:13px;color:var(--inks);margin-top:8px;font-weight:500; }

/* ===== REJECTED COUNTER ===== */
.reject-bar{background:var(--crd);color:var(--cm);padding:8px 14px;margin:10px 0;border:2px solid var(--ink);font-weight:700;font-size:13px;display:none;animation:fadeIn 0.3s ease;}
.reject-bar.show{display:block;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

/* ===================== RULES ===================== */
#screen-rules { max-width:760px;margin:0 auto; justify-content:flex-start;padding:30px 20px; }
.rules-sec {
  background:var(--ppr);color:var(--ink); border:2px solid var(--ink);padding:22px;
  margin-bottom:16px;width:100%; box-shadow:5px 5px 0 var(--crd);position:relative;
}
.rules-sec::before{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border:1px dashed var(--ink);opacity:0.2;pointer-events:none;}
.rules-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;letter-spacing:0.1em;text-transform:uppercase;color:var(--crd);margin-bottom:14px;border-bottom:3px double var(--crd);padding-bottom:8px;}
.rules-item{font-size:14px;color:var(--ink);padding:7px 0;border-bottom:1px solid rgba(26,20,16,0.08);line-height:1.7;display:flex;gap:10px;font-weight:500;}
.rules-item:last-child{border-bottom:none;}
.rules-item::before{content:'◆';color:var(--crd);flex-shrink:0;margin-top:4px;font-size:10px;}
.rules-cards-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0;}
.rc-mini{width:85px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--crd);overflow:hidden;transition:all 0.3s;}
.rc-mini:hover{transform:translateY(-8px) rotate(-4deg);box-shadow:5px 10px 0 var(--crd);}
.rc-mini img{width:100%;display:block;}
.rc-mini-lbl{background:var(--ink);color:var(--cm);padding:4px;text-align:center;font-size:10px;font-weight:700;font-family:'Oswald',sans-serif;letter-spacing:0.05em;}
.pwr-row{display:flex;gap:12px;align-items:center;margin:8px 0;background:var(--ink);color:var(--cm);padding:10px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--crd);}
.pwr-row img{width:55px;flex-shrink:0;border:1px solid var(--cm);}
.pwr-row-txt{font-size:13px;font-weight:600;line-height:1.5;}

/* ===================== END ===================== */
#screen-end {
  justify-content:center;text-align:center;
  background:radial-gradient(ellipse at center, var(--cr) 0%, var(--crd) 40%, var(--crdd) 100%);
  overflow:hidden;
}
.end-stamp{font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.4em;text-transform:uppercase;color:var(--cm);border:3px solid var(--cm);padding:8px 24px;margin-bottom:24px;transform:rotate(-3deg);background:var(--ink);display:inline-block;}
.end-winner{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(60px,14vw,120px);letter-spacing:0.05em;line-height:1;text-transform:uppercase;text-shadow:6px 6px 0 var(--ink);color:var(--cm);animation:end-burst 1s cubic-bezier(0.175,0.885,0.32,1.275) both;}
@keyframes end-burst{from{opacity:0;transform:scale(0.3) rotate(-10deg);}60%{transform:scale(1.1);}to{opacity:1;transform:scale(1);}}
.end-card-wrap{width:200px;margin:24px auto;animation:end-burst 1s 0.3s cubic-bezier(0.175,0.885,0.32,1.275) both;}
.end-card-wrap img{width:100%;display:block;border:4px solid var(--cm);box-shadow:8px 8px 0 var(--ink),0 0 40px rgba(240,227,200,0.3);}
.end-sub{font-family:'Special Elite',cursive;color:var(--cm);font-size:18px;margin:16px 0 36px;max-width:500px;animation:fade-up 0.8s 0.6s ease both;}

/* Roles reveal in end screen */
.end-roles { display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px; }
.end-role-chip {
  background:var(--ink);color:var(--cm);
  border:2px solid var(--gld);
  padding:8px 14px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.end-role-chip img { width:30px;height:30px;object-fit:cover;border:1px solid var(--gld); }

/* ===================== MODAL ===================== */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:500;align-items:center;justify-content:center;padding:20px;}
.modal-ov.open{display:flex;}
.modal-box{background:var(--ppr);color:var(--ink);border:3px solid var(--ink);padding:32px;max-width:480px;width:100%;text-align:center;box-shadow:10px 10px 0 var(--crd);animation:power-pop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;}
.modal-t{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;letter-spacing:0.1em;text-transform:uppercase;color:var(--crd);margin-bottom:8px;border-bottom:2px solid var(--crd);padding-bottom:8px;}
.modal-b{color:var(--inks);font-size:14px;line-height:1.7;margin-bottom:22px;font-weight:500;}
.modal-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ===================== NOTIFICATION ===================== */
.notif{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-110px);background:var(--ink);color:var(--cm);border:2px solid var(--cm);padding:14px 24px;font-size:15px;z-index:9999;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);max-width:400px;text-align:center;box-shadow:5px 5px 0 var(--crd);font-weight:600;}
.notif.show{transform:translateX(-50%) translateY(0);}
.notif.err{border-color:var(--cr);background:var(--crd);}

/* ===================== CONFETTI ===================== */
.confetti-p{position:fixed;pointer-events:none;animation:conf-fall 3.5s ease-in forwards;z-index:9999;}
@keyframes conf-fall{0%{opacity:1;transform:translateY(-10px) rotate(0deg);}100%{opacity:0;transform:translateY(110vh) rotate(720deg);}}

/* ===================== FLYING CARD ===================== */
.flying-card{position:fixed;pointer-events:none;z-index:999;width:80px;height:110px;background-size:cover;background-position:center;border:2px solid var(--cm);box-shadow:4px 4px 0 var(--ink);animation:fly-to-score 0.8s cubic-bezier(0.175,0.885,0.32,1.275) both;}
@keyframes fly-to-score{0%{opacity:1;transform:scale(1);}50%{transform:scale(1.3) rotate(10deg);}100%{opacity:0;transform:scale(0.3) rotate(-10deg);}}

/* ===================== CONNECTION STATUS ===================== */
.conn-dot {
  width:8px;height:8px;border-radius:50%;
  display:inline-block;margin-left:6px;
  background:var(--gld);
}
.conn-dot.offline { background:var(--crd); animation:blink 1s step-end infinite; }

/* ===================== MUTE BUTTON ===================== */
.mute-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--gld);
  color: var(--cm);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--crd);
  transition: all 0.2s;
  line-height: 1;
  padding: 0;
}
.mute-btn:hover { transform: scale(1.1); }
.mute-btn.muted { border-color: var(--inks); opacity: 0.6; }

/* ===================== AVATAR ===================== */
.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--gld);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--crd);
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Avatar on player chips in lobby */
.lobby-player .lp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--gld);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 14px;
}
.lobby-player .lp-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* Avatar on player chips in game */
.p-chip .pc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--gld);
  background: var(--crd);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 12px;
}
.p-chip .pc-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ===================== DECK STACK ===================== */
.deck-stack {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  height: 32px;
  min-width: 20px;
  flex-shrink: 0;
}
.deck-card {
  width: 18px;
  height: 26px;
  border: 1.5px solid var(--cm);
  border-radius: 2px;
  background: var(--crd);
  box-shadow: 1px 1px 0 var(--ink);
  margin-left: -6px;
  flex-shrink: 0;
  transition: all 0.3s;
}
.deck-card:first-child { margin-left: 0; }
.deck-card-fly {
  animation: deck-fly-out 0.4s ease forwards;
}
@keyframes deck-fly-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-30px) scale(0.5); }
}
.deck-empty-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  color: var(--cmd);
  letter-spacing: 0.1em;
}

/* ===================== SWIPE DOTS ===================== */
.swipe-dots {
  display: none; /* shown only on small screens via media query */
  gap: 6px;
  justify-content: center;
  padding: 6px 0 2px;
  background: var(--ink);
  border-bottom: 1px solid var(--crd);
}
.swipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--inks);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.swipe-dot.active {
  background: var(--gld);
  transform: scale(1.3);
}

/* ===================== HISTORY SCREEN ===================== */
#screen-history {
  justify-content: flex-start;
  padding-top: 30px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}
.history-row {
  background: var(--ppr);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 0 var(--crd);
  animation: log-slide 0.3s ease both;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.history-code {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: var(--gld);
}
.history-date {
  font-family: 'Special Elite', cursive;
  font-size: 12px;
  color: var(--inks);
}
.history-winner {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.history-winner.spies { color: var(--crd); }
.history-winner.citizens { color: var(--ink); }
.history-reason {
  font-size: 13px;
  color: var(--inks);
  font-style: italic;
}
.history-players {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.history-player-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  background: var(--cm);
  display: flex;
  align-items: center;
  gap: 5px;
}
.history-player-chip.spy-chip { border-color: var(--crd); background: rgba(122,24,32,0.1); color: var(--crd); }
.history-player-chip.dead-chip { opacity: 0.55; text-decoration: line-through; }
.history-player-chip.my-chip { border-color: var(--gld); font-weight: 700; }
.history-empty {
  text-align: center;
  color: var(--cmd);
  font-family: 'Special Elite', cursive;
  font-size: 16px;
  padding: 40px 20px;
}

/* ===================== MOBILE OPTIMISATION ===================== */
@media (max-width: 600px) {
  /* Bigger tap targets */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px !important; padding: 10px 16px !important; }
  .p-tab { padding: 15px 4px; font-size: 11px; min-height: 44px; }
  .lobby-player { min-height: 44px; padding: 10px 12px; }
  .p-chip { min-height: 40px; padding: 10px 10px; }
  .vote-card { padding: 14px 10px; }
  .count-btn { width: 52px; height: 52px; }
  .sel { padding: 12px 14px; font-size: 16px; /* prevents iOS zoom */ }
  .join-input { font-size: 16px; /* prevents iOS zoom */ }

  /* Sticky tab bar */
  .phase-tabs {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  /* Swipe dots visible */
  .swipe-dots { display: flex; }

  /* Game header compact */
  .game-header { padding: 8px 12px; }
  .g-logo { font-size: 20px; }

  /* Sidebar goes below main on mobile */
  .game-body { padding: 12px; gap: 12px; }

  /* Score slots smaller */
  .score-slot { width: 32px; height: 44px; }

  /* Intro buttons stack */
  .intro-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .intro-buttons .btn { width: 100%; text-align: center; }
  .btn-primary { font-size: 18px; padding: 14px 24px; }
  .btn-secondary { font-size: 15px; padding: 12px 20px; }

  /* Join box padding */
  .join-box { padding: 24px 18px; }

  /* Phase panel padding */
  .p-content { padding: 14px; }
  .p-title { font-size: 18px; }

  /* Lobby */
  #screen-lobby { padding-top: 14px; }
  .lobby-room-code { font-size: clamp(38px, 14vw, 60px); }
}