/* Page-specific styles */
body { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; background: #111827; color: #e2e8f0; min-height: 100vh; overflow-x: hidden; }

/* ===== SCREENS ===== */
.screen { display: none; }
/* Suppress any screen paint while a rejoin is in flight */
body.rejoin-pending .screen.active { visibility: hidden; }
/* Hide everything while auto-loading the tutorial */
html.tutorial-loading body { visibility: hidden; }
html.tutorial-loading #bc-tut-intro,
html.tutorial-loading #bc-tut-intro * { visibility: visible; }
html.tutorial-loading { background: #060d03; }

/* ===== GAME: lock to viewport on medium+ ===== */
@media (min-width: 641px) {
  html:has(#game.active), body:has(#game.active) { overflow: hidden; height: 100%; }
  #game.active { height: calc(100vh - 44px); overflow: hidden; flex-direction: column; }
  .opponents-bar { max-height: 30vh; overflow-y: auto; }
  .my-area { flex-shrink: 0; overflow: hidden; }
  .action-bar { flex-shrink: 0; }
}

/* ===== LOBBY COLORS ===== */
#lobby { flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(100vh - 44px); overflow-y: auto; padding: 0 20px 40px; background: radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(98,181,23,0.18) 0%, rgba(6,13,3,0) 70%), #060d03 url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%2362b517' stroke-opacity='0.07' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpolyline points='0,30 40,30 40,75'/%3E%3Ccircle cx='40' cy='30' r='3' fill='%2362b517' fill-opacity='0.07'/%3E%3Ccircle cx='40' cy='75' r='3' fill='%2362b517' fill-opacity='0.07'/%3E%3Cline x1='40' y1='75' x2='100' y2='75'/%3E%3Cline x1='70' y1='0' x2='70' y2='30'/%3E%3Ccircle cx='70' cy='30' r='2.5' fill='%2362b517' fill-opacity='0.07'/%3E%3Cline x1='70' y1='30' x2='100' y2='30'/%3E%3Cline x1='0' y1='55' x2='15' y2='55'/%3E%3Ccircle cx='15' cy='55' r='2.5' fill='%2362b517' fill-opacity='0.07'/%3E%3Cline x1='15' y1='55' x2='15' y2='100'/%3E%3C/g%3E%3C/svg%3E") repeat; background-size: auto, 100px 100px; }
.lobby-hero { grid-template-columns: 280px 1fr; gap: 36px; }
.lobby-hero img { width: 100%; max-width: 280px; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(98,181,23,0.15); }
#lobby h1 { font-size: 46px; color: #62b517; letter-spacing: 3px; font-weight: 800; text-shadow: 0 0 28px rgba(98,181,23,0.5), 0 0 8px rgba(98,181,23,0.3); font-family: 'Share Tech Mono', monospace; line-height: 1; margin: 0; }
#lobby .subtitle { font-size: 15px; color: rgba(255,255,255,0.65); margin: 0; line-height: 1.5; }
.lobby-meta { gap: 14px; font-size: 12px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
.lobby-meta-item { background: rgba(98,181,23,0.08); border: 1px solid rgba(98,181,23,0.2); color: #a8c96a; }
.lobby-tutorial-cta { margin-top: 8px; background: linear-gradient(135deg, #62b517 0%, #4a8e10 100%); color: #fff; box-shadow: 0 4px 18px rgba(98,181,23,0.35); }
.lobby-tutorial-cta:hover { box-shadow: 0 6px 22px rgba(98,181,23,0.5); }
.lobby-section-head::before, .lobby-section-head::after { background: linear-gradient(to right, transparent, rgba(98,181,23,0.25), transparent); }
.lobby-section-label { color: #62b517; }
.lo-strip { border: 1px solid rgba(98,181,23,0.18); background: #0a1200; }
.lo-item { background: #0a1200; border-right: 1px solid rgba(98,181,23,0.12); }
.lo-item-icon { background: rgba(98,181,23,0.1); border: 1px solid rgba(98,181,23,0.28); }
.lo-item-icon svg { width: 22px; height: 22px; }
.lo-item-title { color: #e2e8f0; letter-spacing: 0.2px; }
.lo-item-desc { color: #6b7280; }
.lobby-card { background: #0d1a06; border: 1px solid rgba(98,181,23,0.2); box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.lobby-card h3 { color: #62b517; margin-bottom: 14px; }
@keyframes invitedPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(98,181,23,0.5), 0 0 28px rgba(98,181,23,0.35), 0 8px 30px rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 0 1px rgba(98,181,23,0.7), 0 0 44px rgba(98,181,23,0.55), 0 8px 30px rgba(0,0,0,0.55); } }
.lobby-card.lobby-card-focus { border-color: #62b517; background: linear-gradient(180deg, #10210a 0%, #0d1a06 100%); animation: invitedPulse 2.6s ease-in-out infinite; }
.lobby-card.lobby-card-focus h3 { color: #d1db24; }
.lobby-card.lobby-card-focus::before { background: #62b517; color: #0a1200; box-shadow: 0 4px 12px rgba(98,181,23,0.5); }
.invited-banner { background: linear-gradient(135deg, rgba(98,181,23,0.18) 0%, rgba(209,219,36,0.10) 100%); border: 1px solid rgba(98,181,23,0.45); box-shadow: 0 4px 20px rgba(98,181,23,0.18); }
.invited-banner-icon { background: rgba(98,181,23,0.18); border: 1px solid rgba(98,181,23,0.5); color: #d1db24; }
.invited-banner-title { color: #d1fae5; letter-spacing: 0.3px; }
.invited-banner-sub { color: #9ca3af; }
.invited-banner-code { font-family: 'Share Tech Mono', monospace; color: #d1db24; }
.invited-banner-arrow { color: #62b517; }
.color-btn { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.color-btn.selected { border-color: #d1db24; box-shadow: 0 0 0 3px rgba(209,219,36,0.3); }
.player-role-box { border-color: #374151; }
.player-role-box.active { border-color: #62b517; }
.btn-create { background: #62b517; color: #fff; }
.btn-join { background: #374151; color: #e2e8f0; border: 1px solid #4b5563; }
.btn-join:hover:not(:disabled) { background: #4b5563; }
.lobby-input { background: rgba(0,0,0,0.3); border-color: rgba(98,181,23,0.3); color: #e2e8f0; font-family: 'Share Tech Mono', monospace; }
.lobby-input::placeholder { color: #4b5563; }
.lobby-input:focus { border-color: #62b517; }
.name-input { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; }
.role-section-label { color: #4b5563; }
.role-section-label::after { background: #1f2937; }
.observer-role-btn { background: #0d1117; border-color: #374151; color: #6b7280; }
.observer-role-btn:hover { border-color: #22d3ee; color: #67e8f9; background: #0a1e2a; }
.observer-role-btn.selected { border-color: #22d3ee; background: rgba(34,211,238,0.07); color: #67e8f9; box-shadow: 0 0 0 1px rgba(34,211,238,0.25), inset 0 0 12px rgba(34,211,238,0.08); }
.obs-role-sub { color: #4b5563; }
.observer-role-btn.selected .obs-role-sub { color: #38bdf8; }
.obs-role-check { border-color: #374151; }
.observer-role-btn.selected .obs-role-check { border-color: #22d3ee; background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,0.6); }
.obs-eye-icon { color: #22d3ee; filter: drop-shadow(0 0 4px rgba(34,211,238,0.5)); }
#observer-banner { background: linear-gradient(180deg, rgba(8,47,73,0.95), rgba(6,32,52,0.95)); border-bottom: 2px solid #22d3ee; box-shadow: 0 2px 12px rgba(34,211,238,0.25), inset 0 -1px 0 rgba(34,211,238,0.15); color: #67e8f9; }
#observer-banner .obs-pill { background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.4); color: #67e8f9; }
body.observer-active { padding-top: calc(44px + 36px + 10px); }
body.observer-active #game .game-layout { height: calc(100vh - 44px - 36px - 10px); }
.error-msg { color: #f87171; }
.rules-banner { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); border-color: rgba(98,181,23,0.2); width: 100%; max-width: 560px; margin-top: 6px; }
.rules-banner a { color: #62b517; }
@media (max-width: 780px) {
  .lobby-hero { grid-template-columns: 1fr; }
  .lobby-hero img { max-width: 240px; margin: 0 auto; }
  .lo-item:nth-child(1), .lo-item:nth-child(2) { border-bottom: 1px solid rgba(98,181,23,0.12); }
  #lobby h1 { font-size: 36px; }
}
/* ===== EVENT HUB ===== */
.event-hub-card{width:100%;background:#0a1200;border:1px solid rgba(98,181,23,0.18);border-radius:14px;padding:20px 24px 22px;}
.event-hub-card h3{font-size:13px;color:#62b517;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px;}
.event-hub-add{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap;}
.event-hub-add button{flex-shrink:0;padding:9px 18px;background:#111d04;border:1px solid rgba(98,181,23,0.45);border-radius:8px;color:#62b517;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.event-hub-add button:hover{background:rgba(98,181,23,0.1);border-color:#62b517;}
.event-hub-empty{font-size:12px;color:#374151;padding:16px 0 4px;text-align:center;font-style:italic;}
.event-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px;}
.event-table th{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#374151;padding:4px 10px 8px;text-align:left;border-bottom:1px solid #1a2200;}
.event-table td{padding:9px 10px;border-bottom:1px solid #0f1900;vertical-align:middle;}
.event-table tr:last-child td{border-bottom:none;}
.ev-code{font-size:17px;font-weight:800;letter-spacing:3px;color:#d1db24;font-family:'Share Tech Mono',monospace;}
.ev-copy-btn{background:#111d04;border:1px solid #253347;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:#62b517;cursor:pointer;transition:all 0.12s;white-space:nowrap;}
.ev-copy-btn:hover{border-color:#62b517;background:rgba(98,181,23,0.08);}
.ev-copy-btn.copied{color:#d1db24;border-color:rgba(209,219,36,0.5);}
.ev-observe-btn{background:#0d1a26;border:1px solid rgba(56,189,248,0.35);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:#38bdf8;cursor:pointer;transition:all 0.12s;white-space:nowrap;letter-spacing:0.2px;}
.ev-observe-btn:hover{border-color:#38bdf8;background:rgba(56,189,248,0.1);color:#7dd3fc;}
.ev-players{color:#9ca3af;font-size:13px;}
.ev-status{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;border-radius:3px;padding:2px 7px;}
.ev-status.pending    {background:rgba(107,114,128,0.12);border:1px solid rgba(107,114,128,0.3);color:#6b7280;}
.ev-status.in-progress{background:rgba(209,219,36,0.10);border:1px solid rgba(209,219,36,0.4);color:#d1db24;}
.ev-status.completed  {background:rgba(98,181,23,0.10);border:1px solid rgba(98,181,23,0.35);color:#62b517;}
.ev-status.cancelled  {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);color:#f87171;}

/* ===== ROLE SELECTION (Player / Observer) ===== */
.role-section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#4b5563;margin:12px 0 4px;display:flex;align-items:center;gap:8px;}
.role-section-label::after{content:'';flex:1;height:1px;background:#1f2937;}
.or-divider{display:flex;align-items:center;gap:8px;margin:10px 0 6px;color:#374151;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:#1f2937;}
.observer-role-btn{width:100%;padding:11px 14px;background:#0d1117;border:2px solid #374151;border-radius:10px;color:#6b7280;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:10px;transition:all 0.15s;margin-bottom:0;}
.observer-role-btn:hover{border-color:#22d3ee;color:#67e8f9;background:#0a1e2a;}
.observer-role-btn.selected{border-color:#22d3ee;background:rgba(34,211,238,0.07);color:#67e8f9;box-shadow:0 0 0 1px rgba(34,211,238,0.25),inset 0 0 12px rgba(34,211,238,0.08);}
.obs-role-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.obs-role-text{display:flex;flex-direction:column;gap:1px;text-align:left;}
.obs-role-title{font-size:13px;font-weight:700;}
.obs-role-sub{font-size:10px;font-weight:400;color:#4b5563;line-height:1.3;}
.observer-role-btn.selected .obs-role-sub{color:#38bdf8;}
.obs-role-check{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid #374151;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.observer-role-btn.selected .obs-role-check{border-color:#22d3ee;background:#22d3ee;box-shadow:0 0 8px rgba(34,211,238,0.6);}

/* ===== OBSERVER MODE ===== */
/* Thematic "scan eye" icon. Cyan cybersec/surveillance accent */
.obs-eye-icon{display:inline-block;width:18px;height:18px;color:#22d3ee;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(34,211,238,0.5));flex-shrink:0;}
.obs-eye-icon.obs-eye-lg{width:22px;height:22px;}
.obs-eye-icon.obs-eye-xl{width:26px;height:26px;}
.obs-eye-icon.obs-eye-sm{width:14px;height:14px;}
/* Subtle pulse so the eye feels alive */
@keyframes obs-eye-pulse{0%,100%{filter:drop-shadow(0 0 4px rgba(34,211,238,0.45));}50%{filter:drop-shadow(0 0 8px rgba(34,211,238,0.85));}}
.obs-eye-icon.obs-eye-pulse{animation:obs-eye-pulse 2.4s ease-in-out infinite;}

#observer-banner{display:none;position:fixed;top:44px;left:0;right:0;z-index:99;background:linear-gradient(180deg,rgba(8,47,73,0.95),rgba(6,32,52,0.95));border-bottom:2px solid #22d3ee;box-shadow:0 2px 12px rgba(34,211,238,0.25),inset 0 -1px 0 rgba(34,211,238,0.15);padding:6px 16px;align-items:center;gap:10px;font-size:12px;font-weight:700;color:#67e8f9;letter-spacing:0.8px;text-transform:uppercase;}
#observer-banner .obs-pill{background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.4);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;color:#67e8f9;letter-spacing:0.5px;}
body.observer-active{padding-top:calc(44px + 36px + 10px);}
body.observer-active #game .game-layout{height:calc(100vh - 44px - 36px - 10px);}
.observer-hands{display:flex;flex-direction:column;gap:10px;padding:8px 12px 10px;overflow-y:auto;max-height:220px;background:#0d1117;}
.observer-player-hand{display:flex;flex-direction:column;gap:4px;}
.observer-hand-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#6b7280;}
.observer-hand-label .obs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.observer-hand-cards{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;}
/* In-panel hand row for observer view (hand cards right below the mini map) */
.opp-hand-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 2px;margin-top:6px;border-top:1px dashed #253347;padding-top:8px;}
.opp-hand-row .card{min-width:72px;max-width:72px;padding:4px 5px;font-size:10px;border-width:1.5px;}
.opp-hand-row .card.card-has-img{min-width:72px;max-width:72px;height:100px;padding:0;}
.opp-hand-row .card .card-cat{font-size:9px;margin-bottom:2px;}
.opp-hand-row .card .card-type{display:none;}
.opp-hand-row .card .card-name{font-size:10px;line-height:1.15;font-weight:700;}
.opp-hand-row .card .card-desc{display:none;}
.opp-hand-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#6b7280;margin-top:6px;display:flex;align-items:center;gap:6px;}
/* Observer-wide layout: status strip + 2×2 player panels + activity sidebar */
body.observer-active .game-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:auto 1fr;
  overflow:hidden;
}
/* Use explicit line numbers. The status strip only has an ID, not a class */
body.observer-active #table-status-strip{grid-column:1/-1;grid-row:1;}
body.observer-active .opponents-bar{grid-column:1;grid-row:2;}
body.observer-active .center-area{grid-column:2;grid-row:2;}
/* 2×2 grid of player panels */
body.observer-active .opponents-bar{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:minmax(0,1fr);
  gap:0;
  overflow:hidden;
  padding:0;
  align-items:stretch;
  align-content:stretch;
  max-height:none !important;
  height:auto;
  min-height:0;
}
/* Activity + Actions sidebar */
body.observer-active .center-area{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0d1117;
  border-left:1px solid #1e2d3d;
  min-height:0;
}
/* Hide the player-only areas entirely */
body.observer-active .my-area{display:none !important;}
body.observer-active .action-bar{display:none !important;}
/* Sidebar inner layout: actions on top, feed below */
body.observer-active .game-middle{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
body.observer-active .gm-actions-section{flex:0 0 auto;min-width:0;border-bottom:1px solid #1e2d3d;}
body.observer-active .gm-actions-body{overflow-y:auto;max-height:none;flex:0 0 auto;justify-content:flex-start;}
body.observer-active .gm-feed-section{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;}
body.observer-active .gm-feed-body{flex:1;overflow-y:auto;min-height:0;}
/* Player panels: fill their grid cell, scroll internally */
body.observer-active .opponent-panel{
  min-width:0;max-width:none;flex:none;
  padding:8px 12px;
  overflow-y:auto;
  border:1px solid #1e2d3d;
  border-radius:0;
}
/* All panel highlights use inset shadows so overflow:hidden on the grid doesn't clip them */
body.observer-active .opponent-panel.current-turn{
  border-color:#d1db24;
  box-shadow:inset 0 0 0 2px #d1db24;
}
body.observer-active .opponent-panel.protected{
  border-color:#3b82f6 !important;
  box-shadow:inset 0 0 0 2px rgba(59,130,246,0.7) !important;
  background-color:rgba(59,130,246,0.18) !important;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(59,130,246,0.10) 7px,rgba(59,130,246,0.10) 9px
  ) !important;
}
body.observer-active .opponent-panel.install-blocked{
  border-color:#ef4444 !important;
  box-shadow:inset 0 0 0 2px rgba(239,68,68,0.7) !important;
  background-color:rgba(239,68,68,0.18) !important;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(239,68,68,0.10) 7px,rgba(239,68,68,0.10) 9px
  ) !important;
}
body.observer-active .opponent-panel.protected.install-blocked{
  border-color:#7c3aed !important;
  box-shadow:inset 0 0 0 2px rgba(124,58,237,0.7) !important;
  background-color:rgba(124,58,237,0.20) !important;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(124,58,237,0.11) 7px,rgba(124,58,237,0.11) 9px
  ) !important;
}
/* current-turn keeps yellow border on top when also protected/blocked */
body.observer-active .opponent-panel.current-turn.protected,
body.observer-active .opponent-panel.current-turn.install-blocked,
body.observer-active .opponent-panel.current-turn.protected.install-blocked{
  border-color:#d1db24 !important;
  box-shadow:inset 0 0 0 2px #d1db24 !important;
}
/* Observer: Active Actions is read-only. Disable all buttons visually */
body.observer-active .gm-actions-body button{
  pointer-events:none !important;
  opacity:0.55;
  cursor:not-allowed !important;
}
body.observer-active .opp-header{margin-bottom:4px;}
body.observer-active .opp-played{margin-top:4px;gap:4px;}
body.observer-active .opp-hand-row{margin-top:6px;padding-top:6px;border-top:1px solid #1e2d3d;gap:4px;flex-wrap:wrap;}
body.observer-active .opp-hand-label{margin-top:4px;}
/* Observer phase-status block in actions sidebar */
.obs-phase-status{display:flex;flex-direction:column;gap:6px;padding:4px 0;}
.obs-phase-player{font-size:13px;font-weight:800;color:#e2e8f0;line-height:1.2;}
.obs-phase-label{font-size:11px;color:#9ca3af;line-height:1.5;}
/* Full-size played-card rows (keep right-aligned horizontal style in panels) */
.obs-played-rows{margin-top:2px;}
.obs-played-rows .kc-row{align-items:center;gap:6px;margin-bottom:2px;}
.obs-played-rows .kc-row-label{width:50px;font-size:8px;line-height:1.2;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;}
.obs-played-rows .kc-slots{gap:3px;flex-wrap:wrap;}
.obs-played-rows .kc-slot{width:42px;min-height:48px;}
@media(min-width:1400px){
  body.observer-active .obs-played-rows .kc-slot{width:46px;min-height:54px;}
}
/* Small screens: stack vertically */
@media(max-width:1099px){
  body.observer-active .game-layout{display:flex;flex-direction:column;}
  body.observer-active .opponents-bar{grid-template-columns:1fr;grid-auto-rows:auto;}
  body.observer-active .center-area{flex:0 0 auto;max-height:220px;flex-direction:row;border-left:none;}
}
/* Observer hands-hidden toggle */
body.obs-hands-hidden .opp-hand-row,
body.obs-hands-hidden .opp-hand-label{display:none !important;}
#obs-hide-hands-btn{background:#374151;color:#e2e8f0;border:1px solid #4b5563;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:0.3px;}
#obs-hide-hands-btn:hover{background:#4b5563;}
#obs-hide-hands-btn.hands-hidden{background:#1a2235;color:#9ca3af;}
/* Observer active-actions hidden toggle */
body.obs-actions-hidden .gm-actions-section{display:none !important;}
#obs-hide-actions-btn{background:#374151;color:#e2e8f0;border:1px solid #4b5563;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:0.3px;}
#obs-hide-actions-btn:hover{background:#4b5563;}
#obs-hide-actions-btn.actions-hidden{background:#1a2235;color:#9ca3af;}
/* Group the two toggle buttons together on the right of the banner */
.obs-banner-btns{display:flex;gap:6px;margin-left:auto;}
.waiting-observer-section{width:100%;max-width:320px;margin-top:4px;}
.waiting-observer-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#67e8f9;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.waiting-observer-row{display:flex;align-items:center;gap:10px;padding:7px 14px;background:#0a1e2a;border-radius:8px;border:1px solid rgba(34,211,238,0.25);margin-bottom:5px;}
.waiting-observer-row .obs-name{font-size:13px;color:#67e8f9;flex:1;}
.btn-observe{background:#0a1e2a;color:#67e8f9;border:1px solid rgba(34,211,238,0.4);}
.btn-observe:hover:not(:disabled){background:rgba(34,211,238,0.12);color:#a5f3fc;border-color:#22d3ee;}

/* ===== WAITING ROOM ===== */
#waiting{flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:20px;background:#111827;}
#waiting h2{font-size:24px;font-weight:800;color:#62b517;}
.room-code-display{font-size:48px;font-weight:800;letter-spacing:12px;color:#d1db24;background:#1e2535;padding:14px 32px;border-radius:14px;border:2px solid #374151;user-select:all;font-family:'Share Tech Mono',monospace;}
.room-share{display:flex;gap:8px;align-items:center;margin-top:4px;}
.copy-btn{padding:8px 16px;font-size:13px;font-weight:700;border:1px solid #374151;border-radius:8px;background:#1e2535;color:#62b517;cursor:pointer;transition:all 0.15s;}
.copy-btn:hover{background:#374151;}
.copy-btn.copied{background:#62b517;color:#fff;border-color:#62b517;}
.waiting-players{display:flex;flex-direction:column;gap:8px;min-width:280px;}
.waiting-player{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#1e2535;border-radius:10px;border:1px solid #374151;}
.waiting-player-me{border-color:#62b517 !important;background:#0d1f0a !important;}
.you-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#62b517;background:rgba(98,181,23,0.12);border:1px solid rgba(98,181,23,0.3);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle;}
.waiting-player-dot{width:14px;height:14px;border-radius:50%;}
.waiting-player-name{font-weight:700;font-size:15px;}
.host-badge{font-size:11px;background:#d1db24;color:#111;padding:2px 8px;border-radius:20px;font-weight:700;margin-left:auto;}
.start-btn{background:#62b517;color:#fff;border:none;padding:14px 40px;border-radius:10px;font-size:18px;font-weight:800;cursor:pointer;transition:all 0.15s;}
.start-btn:hover:not(:disabled){filter:brightness(1.1);transform:scale(1.02);}
.start-btn:disabled{opacity:0.4;cursor:not-allowed;}
.waiting-hint{font-size:13px;color:#4b5563;}

/* ===== GAME SCREEN ===== */
#game{flex-direction:column;min-height:100vh;background:#0d1117;}

.game-layout{display:flex;flex-direction:column;height:calc(100vh - 44px);overflow:hidden;}

/* OPPONENTS BAR (merged with turn order) */
.opponents-bar{display:flex;gap:10px;padding:5px 14px;background:#111827;border-bottom:1px solid #1e2d3d;overflow-x:auto;align-items:flex-start;flex-shrink:0;justify-content:center;}
/* Turn-position card. Appears as first card in every panel (self + opponents) */
.turn-pos-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;min-height:60px;border-radius:7px;border:2px dashed #253347;color:#4b5563;font-size:9px;font-weight:900;text-align:center;text-transform:uppercase;letter-spacing:0.5px;line-height:1.4;flex-shrink:0;transition:border-color 0.2s,color 0.2s,background 0.2s;user-select:none;}
.turn-pos-card.now{border-color:#d1db24;color:#d1db24;background:rgba(209,219,36,0.1);}
.turn-pos-card.next{border-color:#62b517;color:#62b517;background:rgba(98,181,23,0.1);}
.turn-pos-card.active{border-color:#62b517;color:#62b517;background:rgba(98,181,23,0.1);}
.turn-pos-card.idle-glow{
  outline:2px solid #d1db24 !important;
  outline-offset:2px;
  box-shadow:0 0 0 2px #d1db24,0 0 8px 3px rgba(209,219,36,0.6) !important;
  filter:drop-shadow(0 0 4px #d1db24);
  animation:bc-tut-pulse 1.1s ease-in-out infinite;
  border-color:#d1db24;color:#d1db24;background:rgba(209,219,36,0.1);
}
/* Self panel. Compact slot showing YOUR TURN in opponents bar */
.self-panel{flex:0 0 auto;min-width:0;max-width:100px;}
.self-panel .turn-pos-card{width:62px;min-height:76px;font-size:11px;}
.self-you-label{font-size:9px;font-weight:900;color:#62b517;letter-spacing:0.5px;text-transform:uppercase;margin-left:auto;}
.opponent-panel{background:#1a2235;border:1px solid #253347;border-radius:8px;padding:6px 10px;min-width:200px;flex:1;max-width:300px;}
.opponent-panel.current-turn{border-color:#d1db24;box-shadow:0 0 0 2px rgba(209,219,36,0.2);}
.opponent-panel.blocked{opacity:0.55;}
.opp-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.opp-color-dot{width:12px;height:12px;border-radius:50%;}
.opp-name{font-weight:700;font-size:13px;flex:1;}
.opp-hand-count{font-size:12px;color:#6b7280;display:flex;align-items:center;gap:4px;}
.opp-played{display:flex;flex-direction:row;gap:6px;margin-top:4px;align-items:center;}
/* Opponent kill-chain slot grid */
.opp-kc-grid{display:flex;flex-direction:column;gap:4px;}
.opp-kc-row{display:flex;gap:4px;flex-wrap:nowrap;}
.opp-kc-slot-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
.opp-kc-label{font-size:7px;font-weight:800;color:#cbd5e1;text-align:center;max-width:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;}
.opp-kc-slot{width:24px;height:24px;border-radius:5px;border:1.5px dashed #3a5270;display:flex;align-items:center;justify-content:center;font-size:12px;position:relative;cursor:default;transition:background 0.15s,border-color 0.15s;color:#4e6e8e;}
.opp-kc-slot.attack{}
.opp-kc-slot.defend{}
.opp-kc-slot.special{}
.opp-kc-slot.filled.attack{background:rgba(239,68,68,0.22);border:1.5px solid rgba(239,68,68,0.55);}
.opp-kc-slot.filled.defend{background:rgba(59,130,246,0.22);border:1.5px solid rgba(59,130,246,0.55);}
.opp-kc-slot.filled.special{background:rgba(209,219,36,0.18);border:1.5px solid rgba(209,219,36,0.45);}
.opp-kc-count{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#f59e0b;color:#111;font-size:10px;font-weight:900;border-radius:6px;padding:1px 5px;line-height:16px;border:1.5px solid #111;white-space:nowrap;}
.opp-blocked-badge{font-size:10px;background:rgba(239,68,68,0.2);color:#f87171;padding:1px 6px;border-radius:4px;margin-left:auto;}

/* CENTER AREA */
.center-area{display:flex;gap:0;flex:1;overflow:hidden;min-height:0;}

/* Styled badges for game log, status, and card categories */
.lb{display:inline-block;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:0.7px;border-radius:3px;padding:1px 4px;vertical-align:middle;margin-right:3px;line-height:1.4;flex-shrink:0;}
.lb-win{background:rgba(209,219,36,0.12);border:1px solid rgba(209,219,36,0.45);color:#d1db24;}
.lb-flag{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.45);color:#f87171;}
.lb-time{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.45);color:#fbbf24;}
.lb-warn{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.45);color:#fbbf24;}
.lb-block{background:rgba(107,114,128,0.10);border:1px solid rgba(107,114,128,0.35);color:#9ca3af;}
/* Card category inline badges (ATK / DEF / SPL) */
.cat-atk{font-size:9px;font-weight:900;color:#f87171;letter-spacing:0.5px;}
.cat-def{font-size:9px;font-weight:900;color:#93c5fd;letter-spacing:0.5px;}
.cat-spl{font-size:9px;font-weight:900;color:#fbbf24;letter-spacing:0.5px;}

/* MIDDLE - open play field */
.game-middle{flex:1;display:flex;flex-direction:row;min-height:0;overflow:hidden;}
/* Two-column sections inside game-middle */
.gm-section{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-right:1px solid #1e2d3d;}
.gm-section:last-child{border-right:none;}
.gm-actions-section{flex:0 0 calc(200% / 3);min-width:0;}
.gm-feed-section{flex:1 1 0;min-width:0;}
.gm-section-header{padding:5px 14px;background:#050d02;border-bottom:1px solid #1e2d3d;flex-shrink:0;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;color:#374151;}
/* Active Actions body. Scrolls when content is taller than available space */
.gm-actions-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:6px 10px;gap:0;}
/* Idle state. Vertically centered when there's nothing to show */
.gm-actions-body .gm-idle-state{margin:auto;}
/* Panels inside actions body. Fill body height, scroll internally if content overflows */
.gm-actions-body .effect-panel,.gm-actions-body .govern-panel{
  max-height:none;max-width:none;width:100%;box-sizing:border-box;padding:8px 12px;
  overflow-y:auto;display:flex;flex-direction:column;min-height:0;flex:1;}
.gm-actions-body .effect-panel h3,.gm-actions-body .govern-panel h3{flex-shrink:0;font-size:13px;margin-bottom:4px;}
.gm-actions-body .effect-panel p,.gm-actions-body .govern-panel p{flex-shrink:0;margin-bottom:4px;font-size:12px;}
/* Compact cards inside actions panel. No desc, smaller footprint */
.gm-actions-body .card{min-width:52px;max-width:60px;height:68px;flex-shrink:0;}
.gm-actions-body .card .card-desc{display:none;}
.gm-actions-body .card .card-name{font-size:9px;line-height:1.2;}
.gm-actions-body .ds-card{min-width:46px;max-width:54px;height:60px;}
.gm-actions-body .ds-card .ds-card-name{font-size:8px;}
/* Tighter row/slot gaps inside actions body */
.gm-actions-body .kc-row{gap:4px;margin-bottom:3px;}
.gm-actions-body .kc-slots{gap:4px;}
/* Compact player-select and choice buttons inside actions panel */
.gm-actions-body .govern-player-btn{padding:7px 11px;font-size:12px;margin-bottom:4px;gap:8px;}
.gm-actions-body .effect-choice-btn{padding:9px 12px;font-size:12px;margin-bottom:6px;}
.gm-actions-body .effect-choice-btn .sub{font-size:10px;}
.gm-actions-body .action-btn{padding:6px 12px;font-size:11px;}
/* Delivery panel. Fill without scroll */
.gm-actions-body .delivery-swap-panel{
  max-width:none;max-height:none;overflow:hidden;padding:8px 12px;
  width:100%;box-sizing:border-box;gap:6px;}
/* Two-column layout used for delivery sub-screens */
.delivery-col-layout{display:flex;gap:6px;flex:1;min-height:0;overflow:hidden;}
/* Delivery cols scroll internally so cards never clip out of view */
.delivery-col{display:flex;flex-direction:column;flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;}
.delivery-col-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:0.8px;padding:2px 0;flex-shrink:0;}
.delivery-col-label.mine{color:#f59e0b;}
.delivery-col-label.theirs{color:#62b517;}
.delivery-col-divider{display:flex;align-items:center;font-size:16px;color:#f59e0b;flex-shrink:0;padding:0 2px;}
.delivery-col .kc-row{margin-bottom:3px;}
.delivery-col .kc-slots{flex-wrap:wrap;gap:3px;}
/* Idle placeholder */
.gm-idle-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#1a2d1a;width:100%;flex:1;}
.gm-idle-icon{font-size:30px;opacity:0.6;}
.gm-idle-text{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;}
/* Activity Feed body. Max 5 entries, graduated sizing */
.gm-feed-body{flex:1;overflow:hidden;padding:8px 12px;display:flex;flex-direction:column;gap:5px;min-height:0;}
.gm-feed-entry{border-radius:0 7px 7px 0;flex-shrink:0;border-left:3px solid #1a2535;padding:5px 10px;color:#4b5563;font-size:10px;line-height:1.4;}
/* #1. Newest, most prominent */
.gm-feed-entry:nth-child(1){font-size:15px;font-weight:700;color:#e2e8f0;line-height:1.55;padding:11px 14px;border-left-color:#62b517;background:rgba(98,181,23,0.09);border-radius:0 8px 8px 0;}
/* #2 */
.gm-feed-entry:nth-child(2){font-size:12px;font-weight:600;color:#c1cdd9;line-height:1.45;padding:7px 12px;border-left-color:#374a5c;background:rgba(255,255,255,0.03);}
/* #3 */
.gm-feed-entry:nth-child(3){font-size:11px;color:#8a9ab0;line-height:1.4;padding:6px 11px;border-left-color:#253347;}
/* #4–5. Oldest, most faded */
.gm-feed-entry:nth-child(n+4){font-size:10px;color:#4b5563;border-left-color:#1a2535;}
/* Targeted. Another player is impacting YOU */
.gm-feed-entry.gm-targeted{border-left-color:#ef4444 !important;background:rgba(239,68,68,0.09) !important;color:#fca5a5 !important;}
.gm-feed-entry:nth-child(1).gm-targeted{background:rgba(239,68,68,0.18) !important;color:#fecaca !important;}

/* ===== IMPACT ALERT (Active Actions panel. You were targeted) ===== */
#gm-impact-alert{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;flex:1;padding:14px 16px;box-sizing:border-box;}
#gm-impact-alert.visible{display:flex;}
.impact-alert-eyebrow{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:#ef4444;opacity:0.85;display:flex;align-items:center;gap:5px;}
.impact-alert-card{width:100%;background:rgba(239,68,68,0.1);border:2px solid rgba(239,68,68,0.3);border-left:5px solid #ef4444;border-radius:0 12px 12px 0;padding:14px 18px;box-sizing:border-box;font-size:15px;font-weight:700;color:#fecaca;line-height:1.6;animation:impact-slide-in 0.3s ease-out;}
.impact-alert-bar-wrap{width:100%;height:3px;background:rgba(239,68,68,0.18);border-radius:2px;overflow:hidden;}
.impact-alert-bar{height:100%;background:#ef4444;border-radius:2px;transform-origin:left center;animation:impact-drain 5s linear forwards;}
.impact-alert-dismiss{font-size:10px;color:#4b5563;cursor:pointer;letter-spacing:0.5px;}
.impact-alert-dismiss:hover{color:#9ca3af;}
@keyframes impact-slide-in{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes impact-drain{from{transform:scaleX(1);}to{transform:scaleX(0);}}

/* TABLE STATUS STRIP. Compact horizontal bar below opponents-bar */
#table-status-strip{display:flex;align-items:stretch;background:#0a1200;border-bottom:1px solid #1e2d3d;flex-shrink:0;overflow-x:auto;overflow-y:hidden;justify-content:center;}
#table-status-strip .special-card{display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 16px 5px 10px;background:transparent;border:none;border-radius:0;border-right:1px solid #1e2d3d;min-width:0;text-align:left;flex-shrink:0;transition:background 0.15s;}
#table-status-strip .special-card:last-child{border-right:none;}
#table-status-strip .special-card.revealed,#table-status-strip .special-card.available,#table-status-strip .special-card.active{background:rgba(98,181,23,0.05);}
#table-status-strip .special-card .sc-icon{flex-shrink:0;width:24px;height:30px;font-size:0;margin:0;display:flex;align-items:center;justify-content:center;}
#table-status-strip .special-card .sc-icon img{width:100%;height:100%;object-fit:contain;border-radius:3px;}
#table-status-strip .special-card .sc-icon svg{display:block;}
#table-status-strip .special-card .sc-text{display:flex;flex-direction:column;gap:1px;}
#table-status-strip .special-card .sc-name{font-size:10px;font-weight:700;color:#6b7280;margin:0;white-space:nowrap;line-height:1.2;}
#table-status-strip .special-card .sc-status{font-size:10px;font-weight:800;color:#4b5563;margin:0;white-space:nowrap;}
#table-status-strip .sc-dataflag.revealed .sc-status{color:#62b517;}
#table-status-strip .sc-timesup.revealed .sc-status{color:#ef4444;}
#table-status-strip .sc-govern.available .sc-status{color:#8b5cf6;}
#table-status-strip .sc-actionobj.active .sc-status{color:#f59e0b;}
#table-status-strip .sc-timesup.revealed{animation:pulse-red 2s infinite;}
/* Standalone status-banner / special-cards-row (kept for fallback uses) */
.status-banner{background:#1a2235;border:1px solid #253347;border-radius:10px;padding:8px 16px;text-align:center;width:100%;max-width:400px;}
.status-banner .turn-label{font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:1px;}
.status-banner .turn-player{font-size:18px;font-weight:800;color:#62b517;}
.status-banner .phase-label{font-size:13px;color:#9ca3af;margin-top:2px;}
.special-cards-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.special-card{border-radius:8px;padding:6px 10px;text-align:center;min-width:90px;cursor:default;}
.special-card .sc-icon{font-size:20px;}
.special-card .sc-name{font-size:10px;font-weight:700;margin-top:2px;}
.special-card .sc-status{font-size:9px;margin-top:1px;opacity:0.8;}
@media(max-width:480px){
  #table-status-strip .special-card{padding:4px 10px 4px 8px;gap:6px;}
  #table-status-strip .special-card .sc-icon{width:18px;height:22px;}
  #table-status-strip .special-card .sc-name{font-size:9px;}
  #table-status-strip .special-card .sc-status{font-size:9px;}
}
.sc-deck{background:#1a2235;border:2px solid #374151;}
.sc-dataflag{background:#1a2235;border:2px solid #374151;}
.sc-dataflag.revealed{border-color:#62b517;}
.sc-timesup{background:#1a2235;border:2px solid #374151;}
.sc-timesup.revealed{border-color:#ef4444;animation:pulse-red 2s infinite;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0.15);}}
.sc-govern{background:#1a2235;border:2px solid #374151;}
.sc-govern.available{border-color:#8b5cf6;}
.sc-actionobj{background:#1a2235;border:2px solid #374151;}
.sc-actionobj.active{border-color:#f59e0b;}


/* Cancel Game */

/* Cancel confirmation modal */
.cancel-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;}
.cancel-modal-overlay.open{display:flex;}
.cancel-modal{background:#1e2535;border:1px solid #374151;border-radius:14px;padding:28px 32px;max-width:380px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,0.5);text-align:center;}
.cancel-modal h3{font-size:18px;font-weight:800;color:#e2e8f0;margin-bottom:10px;}
.cancel-modal p{font-size:14px;color:#9ca3af;line-height:1.5;margin-bottom:22px;}
.cancel-modal-actions{display:flex;gap:10px;justify-content:center;}
.cancel-modal-actions .btn-yes{padding:10px 28px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background 0.15s;}
.cancel-modal-actions .btn-yes:hover{background:#b91c1c;}
.cancel-modal-actions .btn-no{padding:10px 28px;background:#374151;color:#e2e8f0;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background 0.15s;}
.cancel-modal-actions .btn-no:hover{background:#4b5563;}
.cancel-modal-actions .btn-warn{padding:10px 28px;background:#d97706;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background 0.15s;}
.cancel-modal-actions .btn-warn:hover{background:#b45309;}
.warn-modal-icon{margin-bottom:12px;display:flex;align-items:center;justify-content:center;}

/* HOW TO PLAY PANEL */
.how-to-play-panel{display:none;position:fixed;top:50px;right:8px;z-index:500;width:320px;max-height:calc(100vh - 58px);overflow-y:auto;background:#1a2235;border:1px solid #374151;border-radius:12px;padding:16px;box-shadow:0 12px 48px rgba(0,0,0,0.6);}
@media(max-width:480px){.how-to-play-panel{width:calc(100vw - 16px);right:8px;}}
.how-to-play-panel.open{display:block;}
.how-to-play-panel h4{font-size:13px;font-weight:800;color:#62b517;margin-bottom:8px;}
.how-to-play-panel h5{font-size:11px;font-weight:700;color:#d1db24;margin:10px 0 4px;}
.how-to-play-panel p{font-size:11px;color:#9ca3af;line-height:1.5;margin-bottom:4px;}
.how-to-play-panel .htp-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#6b7280;font-size:18px;cursor:pointer;}
.how-to-play-panel .htp-close:hover{color:#e2e8f0;}

/* MY AREA. Side-by-side: played cards left, hand right */
.my-area{background:#0f1923;border-top:2px solid #1e2d3d;display:flex;flex-direction:row;gap:0;align-items:stretch;overflow:hidden;}
.my-played-area{padding:6px 14px 6px 12px;border-left:1px solid #1e2d3d;flex:1 1 0;min-width:0;overflow-x:auto;}
.my-played-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#4b5563;margin-bottom:4px;white-space:nowrap;}
.my-played-rows{display:flex;flex-direction:column;gap:4px;}
/* My kill-chain slot grid */
.kc-row{display:flex;align-items:center;gap:6px;}
.kc-row-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#6b7280;width:50px;flex-shrink:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.kc-row-label.attack{color:#f87171;}
.kc-row-label.defend{color:#93c5fd;}
.kc-slots{display:flex;gap:4px;flex-wrap:nowrap;}
.kc-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;min-height:36px;padding:2px 2px;border-radius:6px;border:2px dashed #3d5570;color:#6b8aaa;position:relative;cursor:default;transition:all 0.2s;}
.kc-slot.filled.attack{background:rgba(239,68,68,0.2);border:2px solid rgba(239,68,68,0.55);color:#fca5a5;}
.kc-slot.filled.defend{background:rgba(59,130,246,0.2);border:2px solid rgba(59,130,246,0.55);color:#bfdbfe;}
.kc-slot.filled.special{background:rgba(209,219,36,0.15);border:2px solid rgba(209,219,36,0.45);color:#d1db24;}
.kc-slot-emoji{font-size:14px;line-height:1;}
.kc-slot-name{font-size:7px;font-weight:700;text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;max-width:44px;text-overflow:ellipsis;}
.kc-slot-count{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#f59e0b;color:#111;font-size:11px;font-weight:900;border-radius:8px;padding:1px 6px;line-height:18px;border:2px solid #111;white-space:nowrap;}
.hand-area{padding:4px 12px 6px;flex:0 0 calc(200% / 3);min-width:0;overflow:hidden;transition:box-shadow 0.3s;}
.hand-area.idle-glow{outline:2px solid #d1db24;outline-offset:3px;box-shadow:0 0 18px 5px rgba(209,219,36,0.35);animation:bc-tut-pulse 1.1s ease-in-out infinite;border-radius:6px;}
/* Protect. Static blue tint + subtle diagonal stripe texture */
.hand-area.is-protected,.my-played-area.is-protected{
  border-radius:8px;
  background-color:rgba(59,130,246,0.18);
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(59,130,246,0.10) 7px,rgba(59,130,246,0.10) 9px
  );
}
/* Install. Static red tint + subtle diagonal stripe texture */
.hand-area.is-install{
  border-radius:8px;
  background-color:rgba(239,68,68,0.18);
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(239,68,68,0.10) 7px,rgba(239,68,68,0.10) 9px
  );
}
/* Both active on hand. Purple tint + stripe overrides blue/red */
.hand-area.is-protected.is-install{
  background-color:rgba(124,58,237,0.20);
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,transparent 7px,
    rgba(124,58,237,0.11) 7px,rgba(124,58,237,0.11) 9px
  );
}
.hand-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#4b5563;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
/* Status tags in hand-title and opponent header */
.hand-status-tag{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:0.7px;padding:2px 6px;border-radius:20px;flex-shrink:0;white-space:nowrap;}
.hand-status-tag.protect{color:#93c5fd;background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.45);}
.hand-status-tag.install{color:#f87171;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);}
.hand-cards{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;max-height:160px;}
/* Stack vertically on narrow screens */
@media(max-width:640px){
  .my-area{flex-direction:column;overflow:visible;}
  .my-played-area{max-width:100%;border-left:none;border-top:1px solid #1e2d3d;}
  .hand-area{overflow:visible;}
}

/* CARDS */
.card{border-radius:8px;padding:7px 8px 6px;cursor:pointer;transition:all 0.15s;border:2px solid transparent;min-width:100px;max-width:120px;flex-shrink:0;position:relative;}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.4);}
/* Suppress hover lift on touch-only screens */
@media(hover:none){.card:hover{transform:none;box-shadow:none;}}

/* ── Mobile portrait: all 6 hand cards visible at once, no horizontal scroll ── */
@media(max-width:540px){
  .hand-area{padding:4px 6px 6px;}
  .hand-cards{overflow-x:hidden;gap:3px;max-height:none;}
  .hand-cards .card{min-width:0;max-width:none;flex:1 1 0;padding:5px 4px 4px;}
  .hand-cards .card.card-has-img{height:auto;aspect-ratio:3/4;}
  .hand-cards .card:not(.card-has-img){height:86px;overflow:hidden;}
  .hand-cards .card:not(.card-has-img) .card-desc{display:none;}
  .hand-cards .card:not(.card-has-img) .card-name{font-size:10px;}
}
.card.selected{transform:translateY(-8px);box-shadow:0 12px 32px rgba(0,0,0,0.5);}
.card.attack{background:#1a1015;border-color:#7f1d1d;}
.card.attack.selected{border-color:#ef4444;box-shadow:0 12px 32px rgba(239,68,68,0.3);}
.card.defend{background:#0f1a2e;border-color:#1e3a5f;}
.card.defend.selected{border-color:#3b82f6;box-shadow:0 12px 32px rgba(59,130,246,0.3);}
.card.special-card-type{background:#1a1f10;border-color:#3a4a10;}
.card.special-card-type.selected{border-color:#d1db24;box-shadow:0 12px 32px rgba(209,219,36,0.2);}
.card.govern-card-type{background:#1a1030;border-color:#4a1d96;}
.card.govern-card-type.selected{border-color:#8b5cf6;}
.card.action-obj-card-type{background:#1a1500;border-color:#78350f;}
.card.action-obj-card-type.selected{border-color:#f59e0b;}
.card-cat{font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:4px;}
.card.attack .card-cat{color:#f87171;}
.card.defend .card-cat{color:#93c5fd;}
.card.special-card-type .card-cat{color:#d1db24;}
.card.govern-card-type .card-cat{color:#c4b5fd;}
.card.action-obj-card-type .card-cat{color:#fbbf24;}
.card-type{font-size:9px;color:#4b5563;margin-bottom:6px;font-weight:600;}
.card-name{font-size:12px;font-weight:800;line-height:1.2;margin-bottom:4px;}
.card.attack .card-name{color:#fca5a5;}
.card.defend .card-name{color:#bfdbfe;}
.card.special-card-type .card-name{color:#d1db24;}
.card.govern-card-type .card-name{color:#ddd6fe;}
.card.action-obj-card-type .card-name{color:#fde68a;}
.card-desc{font-size:10px;color:#4b5563;line-height:1.3;}
.card-emoji{font-size:16px;margin-bottom:2px;}

/* ACTION BUTTONS */
.action-bar{display:flex;gap:8px;padding:7px 16px;background:#060f02;border-top:2px solid #62b517;align-items:center;flex-wrap:nowrap;flex-shrink:0;box-shadow:0 -2px 16px rgba(98,181,23,0.12);}
.action-btn{padding:6px 14px;border-radius:7px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;}
.action-btn:hover:not(:disabled){filter:brightness(1.1);}
.action-btn:disabled{opacity:0.35;cursor:not-allowed;}
.btn-end-turn{background:#62b517;color:#fff;}
.btn-discard{background:#ef4444;color:#fff;}
.btn-cancel{background:#374151;color:#9ca3af;border:1px solid #4b5563;}
.btn-govern{background:#7c3aed;color:#fff;}
.btn-action-obj{background:#d97706;color:#fff;}
.action-bar-hint{font-size:12px;color:#4b5563;margin-left:auto;}

/* GOVERN VIEW OVERLAY */
.govern-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:200;display:flex;align-items:center;justify-content:center;}
/* ===== DELIVERY SWAP OVERLAY ===== */
.delivery-swap-panel{background:#0f1923;border:2px solid #f59e0b;border-radius:12px;padding:8px 12px;max-width:700px;width:95%;overflow:hidden;display:flex;flex-direction:column;gap:4px;}
.delivery-swap-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e2d3d;padding-bottom:4px;}
.delivery-swap-title{font-size:13px;font-weight:800;color:#fbbf24;}
.delivery-swap-progress{font-size:10px;color:#9ca3af;background:#1e2d3d;padding:2px 8px;border-radius:20px;}
.delivery-swap-instruction{font-size:11px;font-weight:700;color:#e2e8f0;background:rgba(245,158,11,0.1);border-left:3px solid #f59e0b;padding:4px 8px;border-radius:0 8px 8px 0;}
.delivery-swap-section{display:flex;flex-direction:column;gap:4px;}
.delivery-swap-section-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#6b7280;}
.delivery-swap-section-label.mine{color:#f87171;}
.delivery-swap-section-label.theirs{color:#93c5fd;}
.delivery-cards-grid{display:flex;flex-wrap:wrap;gap:4px;}
.delivery-card-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-radius:8px;border:2px solid transparent;min-width:44px;max-width:56px;cursor:default;transition:all 0.15s;}
.delivery-card-slot img{width:30px;height:30px;object-fit:contain;border-radius:4px;}
.delivery-card-slot .dc-name{font-size:8px;font-weight:700;text-align:center;line-height:1.2;color:#9ca3af;}
.delivery-card-slot.attack{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.3);}
.delivery-card-slot.defend{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.3);}
.delivery-card-slot.special{background:rgba(209,219,36,0.1);border-color:rgba(209,219,36,0.3);}
.delivery-card-slot.selectable{cursor:pointer;}
.delivery-card-slot.selectable:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(245,158,11,0.3);border-color:#f59e0b !important;}
.delivery-card-slot.selectable.attack:hover{box-shadow:0 6px 20px rgba(239,68,68,0.35);}
.delivery-card-slot.selectable.defend:hover{box-shadow:0 6px 20px rgba(59,130,246,0.35);}
.delivery-card-slot.giving{border-color:#f87171 !important;background:rgba(239,68,68,0.25);opacity:1;}
.delivery-card-slot.giving .dc-name{color:#fca5a5;}
.delivery-card-slot.preview{opacity:0.45;}
.delivery-giving-tag{font-size:8px;font-weight:800;color:#f87171;text-transform:uppercase;letter-spacing:0.5px;}
.delivery-opp-section{display:flex;flex-direction:column;gap:4px;background:#111827;border-radius:10px;padding:6px 8px;}
.delivery-opp-name{font-size:11px;font-weight:800;color:#e2e8f0;display:flex;align-items:center;gap:4px;}
.delivery-opp-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.delivery-swap-done-list{display:flex;flex-direction:column;gap:4px;}
.delivery-swap-done-item{font-size:11px;color:#62b517;background:rgba(98,181,23,0.1);border-radius:6px;padding:4px 10px;}
.delivery-swap-footer{display:flex;gap:8px;align-items:center;justify-content:flex-end;border-top:1px solid #1e2d3d;padding-top:5px;margin-top:2px;}
/* Card-art tiles inside the delivery swap panel */
.delivery-swap-panel .kc-row{margin-bottom:2px;flex-wrap:wrap;}
.delivery-swap-panel .kc-row-label{width:26px;font-size:7px;line-height:1.2;}
.delivery-swap-panel .kc-slots{flex-wrap:wrap;gap:3px;align-items:flex-end;}
.delivery-swap-panel .ds-card{min-width:36px;max-width:44px;height:52px;padding:0;overflow:hidden;cursor:default;position:relative;border-width:2px;transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s,opacity 0.15s;}
.delivery-swap-panel .ds-card .card-art-img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;pointer-events:none;}
.delivery-swap-panel .ds-card .ds-card-text{padding:3px 3px 2px;display:flex;flex-direction:column;gap:1px;height:100%;box-sizing:border-box;}
.delivery-swap-panel .ds-card .ds-card-cat{font-size:6px;text-transform:uppercase;font-weight:700;letter-spacing:0.3px;}
.delivery-swap-panel .ds-card .ds-card-name{font-size:7px;font-weight:800;line-height:1.2;}
.delivery-swap-panel .ds-card.ds-selectable{cursor:pointer;}
.delivery-swap-panel .ds-card.ds-selectable:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(245,158,11,0.45);border-color:#f59e0b !important;}
.delivery-swap-panel .ds-card.ds-giving{border-color:#f87171 !important;box-shadow:0 0 16px rgba(239,68,68,0.55);}
.delivery-swap-panel .ds-card.ds-preview{opacity:0.32;pointer-events:none;}
.delivery-swap-panel .ds-empty-slot{width:24px;min-height:34px;border-radius:5px;border:2px dashed;display:flex;align-items:center;justify-content:center;font-size:9px;opacity:0.22;flex-shrink:0;}
.govern-panel{background:#1a2235;border:2px solid #7c3aed;border-radius:16px;padding:24px;max-width:600px;width:90%;}
.govern-panel h3{font-size:18px;font-weight:800;color:#c4b5fd;margin-bottom:16px;}
.govern-panel .govern-hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.govern-panel .btn-done{margin-top:16px;width:100%;}

/* GOVERN SELECT */
.govern-select-panel{background:#1a2235;border:2px solid #7c3aed;border-radius:16px;padding:20px;max-width:360px;width:90%;}
.govern-select-panel h3{font-size:16px;font-weight:800;color:#c4b5fd;margin-bottom:12px;}
.govern-player-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:#111827;border:1px solid #374151;border-radius:8px;color:#e2e8f0;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:6px;transition:all 0.15s;}
.govern-player-btn:hover{border-color:#7c3aed;background:#1a1030;}
.govern-card-btn{padding:10px 14px;background:#111827;border:2px solid #374151;border-radius:10px;color:#e2e8f0;font-size:13px;cursor:pointer;text-align:center;min-width:100px;transition:all 0.15s;}
.govern-card-btn:hover{border-color:#7c3aed;background:#1a1030;transform:translateY(-2px);}

/* PROTECTED BADGE */
.opp-protected-badge{font-size:10px;background:rgba(59,130,246,0.2);color:#93c5fd;padding:1px 6px;border-radius:4px;margin-left:4px;}
.opponent-panel.protected{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,0.3);}
/* NO DEFEND (Install block) BADGE */
.opp-blocked-badge{font-size:10px;background:rgba(239,68,68,0.18);color:#f87171;padding:1px 6px;border-radius:4px;margin-left:4px;display:inline-flex;align-items:center;gap:3px;}
.opponent-panel.install-blocked{border-color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,0.3);}

/* EFFECT OVERLAY */
.effect-panel{background:#1a2235;border:2px solid #62b517;border-radius:16px;padding:24px;max-width:560px;width:92%;max-height:80vh;overflow-y:auto;}
.effect-panel h3{font-size:17px;font-weight:800;color:#62b517;margin-bottom:16px;}
.effect-panel p{font-size:13px;color:#9ca3af;margin-bottom:12px;line-height:1.5;}
.effect-choice-btn{display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:8px;background:#111827;border:1px solid #374151;border-radius:10px;color:#e2e8f0;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.15s;}
.effect-choice-btn:hover{border-color:#62b517;background:#0f1a10;}
.effect-choice-btn .sub{font-size:11px;color:#6b7280;font-weight:400;margin-top:3px;}
.effect-hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
.effect-hand .card{min-width:100px;max-width:120px;}
.effect-hand .card.forced{border-color:#d1db24!important;box-shadow:0 0 0 2px rgba(209,219,36,0.3);}
.detect-list{display:flex;flex-direction:column;gap:6px;margin:12px 0;}
.detect-row{display:flex;align-items:center;gap:8px;background:#111827;border:1px solid #374151;border-radius:8px;padding:8px;}
.detect-row .dc-info{flex:1;}
.detect-row .dc-name{font-size:13px;font-weight:700;color:#e2e8f0;}
.detect-row .dc-type{font-size:10px;color:#6b7280;}
.detect-row .dc-btns{display:flex;gap:4px;}
.detect-row .dc-btn{background:#374151;border:none;color:#9ca3af;width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:14px;}
.detect-row .dc-btn:hover{background:#4b5563;color:#fff;}
.detect-row .dc-pos{font-size:12px;color:#4b5563;width:18px;text-align:center;}
.played-select-card{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid;margin:3px;transition:all 0.12s;}
.played-select-card.defend{background:rgba(59,130,246,0.15);color:#93c5fd;border-color:rgba(59,130,246,0.3);}
.played-select-card.defend:hover{background:rgba(59,130,246,0.3);border-color:#3b82f6;}
.pending-player{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#111827;border:1px solid #374151;border-radius:8px;margin-bottom:6px;font-size:13px;}
.pending-dot{width:8px;height:8px;border-radius:50%;}
.pending-status{margin-left:auto;font-size:11px;font-weight:700;}
.pending-status.done{color:#62b517;}.pending-status.waiting{color:#f59e0b;}

/* INFO ICON TOOLTIPS */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(75,85,99,0.35);color:#6b8aaa;font-size:10px;font-weight:800;cursor:pointer;border:1px solid rgba(75,85,99,0.5);flex-shrink:0;line-height:1;vertical-align:middle;position:relative;user-select:none;transition:background 0.15s,color 0.15s;}
.info-btn:hover{background:rgba(98,181,23,0.2);color:#62b517;border-color:rgba(98,181,23,0.4);}
.info-popup{display:none;position:fixed;z-index:1100;background:#0c1829;border:2px solid #2d4a6a;border-radius:12px;padding:16px 20px;width:420px;max-width:calc(100vw - 24px);box-shadow:0 16px 48px rgba(0,0,0,0.88),0 0 0 1px rgba(45,74,106,0.6);font-size:12px;font-weight:400;color:#c9d1d9;line-height:1.65;text-align:left;text-transform:none;letter-spacing:0;pointer-events:auto;}
.info-popup::after{content:none;}
/* Arrow tails (added by positionInfoPopup). `tail-above` means the popup is ABOVE
   the button (tail on bottom, pointing down). `tail-below` means popup is BELOW
   the button (tail on top, pointing up). */
.info-popup.tail-below{}
.info-popup.tail-below::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:#2d4a6a;}
.info-popup.tail-above{}
.info-popup.tail-above::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#2d4a6a;}
/* `.below` is kept as a preference hint only. The real direction is decided at runtime */
.info-popup.below{}
/* Nested .info-popup divs are data-only; never shown directly.
   Only #info-popup-root (body-level) is shown via JS .visible class. */
.info-popup.visible{display:block;}
.info-popup strong{color:#62b517;font-weight:700;}
.info-popup em{color:#d1db24;font-style:normal;font-weight:700;}
/* Wider popup variant for complex tips */
.info-popup.wide{width:520px;}

/* WIN SCREEN */
#win-screen{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:300;display:none;align-items:center;justify-content:center;}
#win-screen.show{display:flex;}
.win-panel{background:#1a2235;border:2px solid #62b517;border-radius:20px;padding:40px;text-align:center;max-width:440px;width:90%;}
.win-trophy{font-size:64px;margin-bottom:16px;}
.win-title{font-size:28px;font-weight:800;color:#d1db24;margin-bottom:8px;}
.win-name{font-size:22px;font-weight:700;color:#62b517;margin-bottom:8px;}
.win-condition{font-size:15px;color:#9ca3af;margin-bottom:24px;}
.win-btn{background:#62b517;color:#fff;border:none;padding:12px 32px;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;}
.win-btn:hover{filter:brightness(1.1);}
.win-upsell{margin:20px 0 16px;padding-top:20px;border-top:1px solid #2d3a50;text-align:center;}
.win-upsell p{font-size:13px;color:#9ca3af;margin:0 0 12px;}
.win-buy-btn{display:inline-block;background:#d1db24;color:#0f172a;text-decoration:none;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:800;}
.win-buy-btn:hover{filter:brightness(1.08);}

/* ===== CARD ZOOM OVERLAY ===== */
#card-zoom {
  display: none;
  position: fixed;
  z-index: 400;
  pointer-events: none;
  border-radius: 12px;
  padding: 14px 16px 12px;
  min-width: 165px;
  max-width: 205px;
  box-shadow: 0 16px 52px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
  border: 2px solid transparent;
  transform: translateX(-50%) translateY(-100%);
}
/* When anchor element is near the top of screen, flip zoom to show below it */
#card-zoom.card-zoom-below{transform:translateX(-50%) translateY(0);}
/* On touch screens (no hover), center the zoom in the viewport so it's
   easy to read regardless of where the held card sits */
@media(hover:none){
  #card-zoom{transform:none !important;left:50% !important;top:50% !important;translate:-50% -50%;max-width:min(260px,80vw);}
  #card-zoom.card-zoom-art{max-width:min(220px,70vw);}
}
#card-zoom.attack             { background:#1a1015; border-color:#ef4444; }
#card-zoom.defend             { background:#0f1a2e; border-color:#3b82f6; }
#card-zoom.special-card-type  { background:#1a1f10; border-color:#d1db24; }
#card-zoom.govern-card-type   { background:#1a1030; border-color:#8b5cf6; }
#card-zoom.action-obj-card-type { background:#1a1500; border-color:#f59e0b; }
#card-zoom .cz-cat { font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:6px; }
#card-zoom.attack .cz-cat             { color:#f87171; }
#card-zoom.defend .cz-cat             { color:#93c5fd; }
#card-zoom.special-card-type .cz-cat  { color:#d1db24; }
#card-zoom.govern-card-type .cz-cat   { color:#c4b5fd; }
#card-zoom.action-obj-card-type .cz-cat { color:#fbbf24; }
#card-zoom .cz-type { font-size:11px; color:#6b7280; margin-bottom:8px; font-weight:600; }
#card-zoom .cz-name { font-size:18px; font-weight:800; line-height:1.2; margin-bottom:8px; }
#card-zoom.attack .cz-name             { color:#fca5a5; }
#card-zoom.defend .cz-name             { color:#bfdbfe; }
#card-zoom.special-card-type .cz-name  { color:#d1db24; }
#card-zoom.govern-card-type .cz-name   { color:#ddd6fe; }
#card-zoom.action-obj-card-type .cz-name { color:#fde68a; }
#card-zoom .cz-desc { font-size:13px; color:#9ca3af; line-height:1.5; }

/* ===== SPECIAL CARD PANEL ICONS. Card art thumbnails ===== */
.special-card .sc-icon { font-size: 0; line-height: 0; width: 54px; height: 70px; margin: 0 auto 2px; overflow: hidden; border-radius: 6px; }
.special-card .sc-icon img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; transition: transform 0.15s ease, filter 0.15s ease; }
.special-card.sc-zoomable .sc-icon { cursor: zoom-in; }
.special-card.sc-zoomable .sc-icon:hover img { transform: scale(1.08); filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,255,255,0.12)); }
.special-card.sc-dataflag.sc-zoomable .sc-icon:hover { box-shadow: 0 0 0 2px rgba(239,68,68,0.45); border-radius: 6px; }
.special-card.sc-timesup.sc-zoomable  .sc-icon:hover { box-shadow: 0 0 0 2px rgba(245,158,11,0.45); border-radius: 6px; }
.special-card.sc-govern.sc-zoomable   .sc-icon:hover { box-shadow: 0 0 0 2px rgba(139,92,246,0.45); border-radius: 6px; }
.special-card.sc-actionobj.sc-zoomable .sc-icon:hover { box-shadow: 0 0 0 2px rgba(245,158,11,0.45); border-radius: 6px; }
@media(max-width:860px) { .special-card .sc-icon { width: 44px; height: 57px; } }
@media(max-width:600px) { .special-card .sc-icon { width: 34px; height: 44px; } }

/* ===== KILL-CHAIN SLOTS. Ghost art for empty slots ===== */
.kc-slot-img-ghost { opacity: 0.18; filter: grayscale(60%); }
/* Name label pinned to bottom of slot */
.kc-slot-name-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
  padding: 2px 2px 3px;
  border-radius: 0 0 5px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  letter-spacing: 0.2px;
}

/* ===== OPPONENT SLOTS. Card art thumbnails ===== */
.opp-kc-slot.opp-kc-slot-has-img { padding: 0; overflow: hidden; }
.opp-kc-slot-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }
.opp-kc-slot-img-ghost { opacity: 0.15; filter: grayscale(70%); }

/* ===== IMAGE CARDS IN HAND ===== */
.card.card-has-img {
  padding: 0;
  overflow: hidden;
  border-width: 2px;
  min-width: 80px;
  max-width: 110px;
  height: 130px;
}
.card.card-has-img .card-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  pointer-events: none;
}
/* Kill-chain slot with art thumbnail */
.kc-slot.kc-slot-has-img {
  padding: 0;
  overflow: hidden;
}
.kc-slot.kc-slot-has-img .kc-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
/* Zoom overlay. Art-only style */
#card-zoom.card-zoom-art {
  background: transparent;
  border: none;
  padding: 0;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
  border-radius: 12px;
}

/* ===== BC TUTORIAL PANEL. Right sidebar ===== */
#bc-tut-panel {
  display: none;
  position: fixed; top: 44px; right: 0; bottom: 0;
  width: 272px; z-index: 310;
  background: #111827; border-left: 2px solid #d1db24;
  padding: 14px 16px 16px; gap: 12px; flex-direction: column;
  box-shadow: -4px 0 28px rgba(0,0,0,0.7);
  overflow-y: auto;
}
body.bc-tut-active #bc-tut-panel { display: flex; }
/* Shrink game area to leave room for the sidebar */
body.bc-tut-active .game-layout { height: calc(100vh - 44px); margin-right: 272px; }
.bc-tut-header { display: flex; flex-direction: column; gap: 6px; }
#bc-tut-step-label { font-size: 10px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 1px; }
.bc-tut-progress { width: 100%; height: 4px; background: #1e2d3d; border-radius: 4px; overflow: hidden; }
#bc-tut-prog-fill { height: 100%; background: #d1db24; border-radius: 4px; transition: width 0.3s; }
#bc-tut-title { font-size: 14px; font-weight: 800; color: #62b517; line-height: 1.3; }
#bc-tut-body { font-size: 12px; color: #9ca3af; line-height: 1.6; flex: 1; }
#bc-tut-body strong { color: #e2e8f0; }
#bc-tut-body em { color: #d1db24; font-style: normal; font-weight: 700; }
.bc-tut-footer { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
#bc-tut-hint { font-size: 11px; color: #6b7280; line-height: 1.4; }
#bc-tut-hint span { color: #d1db24; }
#bc-tut-exit { padding: 6px 12px; border: 1px solid #374151; border-radius: 7px;
  background: transparent; color: #6b7280; font-size: 11px; cursor: pointer;
  font-family: inherit; text-align: center; }
#bc-tut-exit:hover { background: #1e2535; color: #9ca3af; }
#bc-tut-next { padding: 9px 18px; background: #62b517; color: #fff; border: none;
  border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; width: 100%; text-align: center; }
#bc-tut-next:hover { filter: brightness(1.1); }
/* ===== BC TUTORIAL INTRO OVERLAY (steps 0–3) ===== */
#bc-tut-intro{display:none;position:fixed;top:44px;left:0;right:0;bottom:0;background:rgba(4,9,18,0.97);z-index:320;align-items:center;justify-content:center;padding:24px;}
body.bc-tut-intro-active #bc-tut-intro{display:flex;}
#bc-tut-intro-card{background:#0c1829;border:1px solid #1e3a5f;border-radius:16px;padding:36px 40px 28px;max-width:900px;width:100%;max-height:calc(100vh - 108px);overflow-y:auto;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 64px rgba(0,0,0,0.85);}
.bcti-header{display:flex;flex-direction:column;gap:8px;}
#bcti-label{font-size:10px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:1.2px;}
#bcti-prog-fill{height:100%;background:#d1db24;border-radius:4px;transition:width 0.35s;}
#bcti-title{font-size:24px;font-weight:900;color:#62b517;line-height:1.2;}
#bcti-body{font-size:14px;color:#9ca3af;line-height:1.75;flex:1;}
#bcti-body strong{color:#e2e8f0;}
#bcti-body em{color:#d1db24;font-style:normal;font-weight:700;}
.bcti-footer{display:flex;justify-content:space-between;align-items:center;padding-top:6px;}
#bcti-exit{padding:7px 16px;border:1px solid #1f2937;border-radius:7px;background:transparent;color:#374151;font-size:12px;cursor:pointer;font-family:inherit;transition:all 0.12s;}
#bcti-exit:hover{color:#6b7280;border-color:#374151;}
#bcti-next{padding:12px 32px;background:#62b517;color:#0a1200;border:none;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter 0.12s;}
#bcti-next:hover{filter:brightness(1.12);}
/* Two-column layout used by kill chain + NIST steps */
.bcti-two-col{display:flex;gap:36px;align-items:flex-start;}
.bcti-left{flex:0 0 38%;font-size:14px;line-height:1.75;}
.bcti-right{flex:1;min-width:0;}
/* Card grid */
.bcti-card-grid{display:flex;flex-wrap:wrap;gap:14px 10px;}
.bcti-card-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:calc(25% - 8px);}
.bcti-card-grid.cols-3 .bcti-card-item{width:calc(33.33% - 7px);}
.bcti-card-item img{width:74px;height:103px;object-fit:contain;border-radius:7px;box-shadow:0 3px 12px rgba(0,0,0,0.65);}
.bcti-card-name{font-size:11px;font-weight:800;color:#e2e8f0;text-align:center;line-height:1.2;}
.bcti-card-desc{font-size:10px;color:#6b7280;text-align:center;line-height:1.3;}
/* Attacker / Defender cycle boxes */
.bcti-cycle-box{display:flex;gap:16px;margin:18px 0 14px;}
.bcti-cycle-side{flex:1;border-radius:10px;padding:16px 18px;}
.bcti-cycle-side.attacker{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.35);}
.bcti-cycle-side.defender{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.35);}
.bcti-cycle-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:6px;}
.bcti-cycle-side.attacker .bcti-cycle-label{color:#f87171;}
.bcti-cycle-side.defender .bcti-cycle-label{color:#60a5fa;}
.bcti-cycle-text{font-size:13px;color:#9ca3af;line-height:1.55;}
/* Welcome game preview */
.bcti-welcome-row{display:flex;gap:20px;margin:18px 0;align-items:stretch;}
.bcti-win-box{flex:1;border-radius:10px;padding:16px 18px;border:1px solid #1e3a5f;background:#0a1520;}
.bcti-win-box-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;color:#4b5563;}
.bcti-win-box-title{font-size:14px;font-weight:800;color:#e2e8f0;margin-bottom:4px;}
.bcti-win-box-desc{font-size:12px;color:#6b7280;line-height:1.5;}
/* Kill Chain. Single horizontal sequence row */
.bcti-kc-row{display:flex;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:0;padding:14px 0 4px;overflow-x:auto;}
.bcti-kc-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:82px;flex-shrink:0;text-align:center;}
.bcti-kc-item img{width:68px;height:95px;object-fit:contain;border-radius:7px;box-shadow:0 3px 12px rgba(0,0,0,0.7);}
.bcti-kc-name{font-size:10px;font-weight:800;color:#e2e8f0;line-height:1.2;}
.bcti-kc-arrow{color:#253347;font-size:20px;padding:28px 1px 0;flex-shrink:0;line-height:1;}
/* NIST. Circular continuous-cycle layout */
.bcti-circle-wrap{position:relative;width:360px;height:375px;margin:0 auto;}
.bcti-circle-ring{position:absolute;top:55px;left:50px;width:260px;height:260px;border-radius:50%;border:2px dashed rgba(59,130,246,0.28);}
.bcti-circle-outer-item{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:80px;text-align:center;}
.bcti-circle-outer-item img{width:62px;height:87px;object-fit:contain;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,0.65);}
.bcti-circle-center-item{position:absolute;top:185px;left:180px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:2;text-align:center;}
.bcti-circle-center-item img{width:66px;height:92px;object-fit:contain;border-radius:7px;box-shadow:0 4px 16px rgba(59,130,246,0.35),0 4px 12px rgba(0,0,0,0.7);}
/* Mobile: fall back to a compact bottom bar */
@media(max-width: 768px) {
  #bc-tut-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: auto; max-height: 48vh;
    border-left: none; border-top: 2px solid #d1db24;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.65);
    overflow-y: auto;
  }
  body.bc-tut-active .game-layout {
    margin-right: 0;
    height: calc(100vh - 44px - 200px);
  }
  .bc-tut-footer { flex-direction: row; }
  #bc-tut-exit, #bc-tut-next { width: auto; }
}
/* Unified tutorial glow. Pulsing flash highlight, same style as FuzzNet */
/* Full-screen idle glow. Fires after 12s of inactivity on your turn */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9997;border:3px solid transparent;box-shadow:inset 0 0 0 0 transparent;transition:border-color 0.4s,box-shadow 0.4s;}
body.screen-idle-glow::after{
  border-color:rgba(209,219,36,0.7);
  box-shadow:inset 0 0 80px 30px rgba(209,219,36,0.25),0 0 40px 10px rgba(209,219,36,0.3);
  animation:screen-glow-pulse 1.4s ease-in-out infinite;
}
@keyframes screen-glow-pulse{
  0%,100%{box-shadow:inset 0 0 80px 30px rgba(209,219,36,0.25),0 0 40px 10px rgba(209,219,36,0.3);border-color:rgba(209,219,36,0.7);}
  50%{box-shadow:inset 0 0 120px 50px rgba(209,219,36,0.45),0 0 60px 20px rgba(209,219,36,0.5);border-color:rgba(209,219,36,1);}
}

@keyframes bc-tut-pulse {
  0%, 100% {
    outline-color: #d1db24;
    box-shadow: 0 0 0 2px #d1db24, 0 0 8px 3px rgba(209,219,36,0.6);
    filter: drop-shadow(0 0 4px #d1db24) drop-shadow(0 0 8px rgba(209,219,36,0.5));
  }
  50% {
    outline-color: #4aff4a;
    box-shadow: 0 0 0 3px #4aff4a, 0 0 22px 8px rgba(74,255,74,0.55);
    filter: drop-shadow(0 0 10px #4aff4a) drop-shadow(0 0 20px rgba(74,255,74,0.5));
  }
}
.card.bc-tut-hl,
.bc-tut-btn-hl,
.govern-player-btn.bc-tut-player-hl,
.bc-tut-glow {
  outline: 2px solid #d1db24 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #d1db24, 0 0 8px 3px rgba(209,219,36,0.6) !important;
  filter: drop-shadow(0 0 4px #d1db24);
  animation: bc-tut-pulse 1.1s ease-in-out infinite;
}
/* Tutorial lobby button */
.btn-tutorial{background:#0d1a06;color:#62b517;border:1.5px solid rgba(98,181,23,0.4);font-family:'Share Tech Mono',monospace;letter-spacing:0;font-size:14px;margin-top:4px;width:360px;}
.btn-tutorial:hover:not(:disabled){background:#121f08;border-color:#62b517;filter:none;}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .lobby-card{width:calc(100vw - 40px);max-width:360px;}
  .rules-banner{max-width:calc(100vw - 40px);}
  .btn-tutorial{width:calc(100vw - 40px);max-width:360px;}
}

@media(max-width:768px){
  /* Lobby */
  #lobby h1{font-size:34px;}

  /* Waiting room */
  .room-code-display{font-size:36px;letter-spacing:8px;padding:12px 24px;}
  .waiting-players{min-width:unset;width:calc(100vw - 40px);max-width:400px;}

/* Opponents: compact panels */
  .opponents-bar{padding:4px 10px;gap:6px;}
  .opponent-panel{min-width:140px;max-width:190px;padding:5px 8px;}
  .opp-name{font-size:12px;}
  .opp-kc-slot{width:20px;height:20px;font-size:10px;}
  .opp-kc-label{font-size:6.5px;max-width:22px;}

  /* Turn strip */
  .turn-badge{padding:4px 10px;font-size:12px;gap:5px;}

  /* Special cards: hide status text */
  .special-card{min-width:72px;padding:4px 7px;}
  .special-card .sc-icon{font-size:0;}
  .special-card .sc-status{display:none;}

  /* KC slots: slightly smaller */
  .kc-slot{width:40px;min-height:32px;}
  .kc-slot-name{font-size:7px;max-width:40px;}
  .kc-row-label{font-size:8px;width:48px;}

  /* Hand cards */
  .card{min-width:86px;max-width:104px;}

  /* How to play panel */
  .how-to-play-btn{top:50px;right:8px;padding:4px 9px;font-size:11px;}
  .how-to-play-panel{right:8px;width:280px;}
}

@media(max-width:480px){
  /* Lobby */
  #lobby h1{font-size:28px;}
  .room-code-display{font-size:32px;letter-spacing:6px;padding:10px 18px;}
  #waiting h2{font-size:20px;}

  /* Turn strip: very compact */
  .turn-badge{padding:3px 8px;font-size:11px;gap:4px;}
  .turn-badge .tb-dot{width:8px;height:8px;}

  /* Opponents: very compact */
  .opponents-bar{padding:3px 8px;gap:5px;}
  .opponent-panel{min-width:110px;max-width:150px;padding:4px 6px;}
  .opp-name{font-size:11px;}
  .opp-kc-slot{width:17px;height:17px;font-size:9px;}
  .opp-kc-label{font-size:6px;max-width:19px;}

  /* KC slots: emoji only, no text */
  .kc-slot{width:30px;min-height:26px;padding:2px;}
  .kc-slot-name{display:none;}
  .kc-slot-emoji{font-size:12px;}
  .kc-row-label{font-size:7px;width:40px;}
  .kc-slots{gap:3px;}

  /* Special cards: icon only */
  .special-cards-row{gap:4px;}
  .special-card{min-width:46px;padding:3px 5px;}
  .special-card .sc-icon{font-size:0;}
  .special-card .sc-name{display:none;}

  /* Status banner */
  .status-banner{padding:6px 12px;}
  .status-banner .turn-player{font-size:15px;}
  .status-banner .phase-label{font-size:11px;}

  /* Hand cards: narrower */
  .card{min-width:72px;max-width:88px;padding:5px 6px 5px;}
  .card-emoji{font-size:13px;}
  .card-name{font-size:11px;}
  .card-desc{font-size:9px;}

  /* Action buttons */
  .action-bar{padding:4px 8px;gap:4px;}
  .action-btn{padding:5px 10px;font-size:11px;}

  /* How to play panel: full width */
  .how-to-play-btn{top:50px;right:6px;}
  .how-to-play-panel{left:6px;right:6px;width:auto;}

  /* Win screen */
  .win-title{font-size:22px;}
  .win-condition{font-size:13px;}
  .win-btn{padding:10px 24px;font-size:14px;}
}

:root{--gn-bg:rgba(6,13,3,0.96);--gn-border:#d1db24;--gn-shadow:0 1px 8px rgba(0,0,0,0.4);--gn-link:#62b517;--gn-link-hover:rgba(98,181,23,0.12);--gn-divider:#4b5563;--gn-current:#6b7280;}