/* ── Game Layout ─────────────────────────────────────────────────────── */

#game-screen { display:flex; flex-direction:column; height:100vh; height:100dvh; }
.game-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px; padding-top:calc(6px + var(--safe-t));
  background:var(--af-navy); border-bottom:1px solid #1a2a44;
  flex-shrink:0; gap:6px; min-height:40px; flex-wrap:wrap;
}
.hdr-left,.hdr-center,.hdr-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.hdr-title { font-weight:700; letter-spacing:3px; font-size:13px; color:var(--af-silver); }
.hdr-badge {
  background:var(--af-blue); padding:2px 8px; border-radius:4px;
  font-size:11px; font-weight:600; letter-spacing:1px; white-space:nowrap;
}
.hdr-badge.your-turn { background:#c90; color:#000; animation:turnPulse 1.5s ease-in-out infinite; }
@keyframes turnPulse { 0%,100%{opacity:1;} 50%{opacity:.7;} }
#hdr-turn { font-weight:600; font-size:13px; }
#hdr-plays { font-size:12px; color:var(--af-silver); }
#hdr-deck { font-size:12px; color:#889; }
.hdr-timer {
  font-size:12px; font-weight:700; color:#f44; font-family:monospace;
  padding:2px 6px; border-radius:4px; background:rgba(255,68,68,.15);
  transition:background .3s, color .3s;
}
.hdr-timer.response-active {
  background:rgba(255,152,0,.2); color:#ff9800;
}
.hdr-timer.warning { animation:timerBlink .5s ease-in-out infinite; }
.hdr-timer.warning.response-active { background:rgba(255,68,68,.25); color:#f44; }
@keyframes timerBlink { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hdr-btn {
  width:28px; height:28px; border-radius:50%; border:1px solid #2a3a54;
  background:transparent; color:var(--af-silver); font-size:14px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.hdr-btn:hover { border-color:var(--af-gold); color:var(--af-gold); }
.hdr-btn.muted { opacity:.4; }

/* Connection indicator */
.conn-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.conn-dot.connected { background:#4caf50; box-shadow:0 0 4px #4caf50; }
.conn-dot.disconnected { background:#f44; animation:connBlink 1s infinite; }
@keyframes connBlink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.game-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── Targeting banner ────────────────────────────────────────────────── */

.targeting-banner {
  background:rgba(255,215,0,.15); border-bottom:1px solid var(--af-gold);
  padding:8px 16px; display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0; animation:targetFlash 1s ease-in-out infinite;
}
@keyframes targetFlash { 0%,100%{background:rgba(255,215,0,.1);} 50%{background:rgba(255,215,0,.2);} }
.targeting-banner span { font-size:13px; font-weight:700; color:var(--af-gold); }
.targeting-banner button {
  padding:4px 14px; border-radius:4px; border:1px solid var(--af-gold);
  background:transparent; color:var(--af-gold); font-size:12px; font-weight:700;
  cursor:pointer; min-height:32px;
}

/* ── Opponents ───────────────────────────────────────────────────────── */

.opponents-area {
  display:flex; gap:8px; padding:8px 12px; overflow-x:auto;
  border-bottom:1px solid #1a2a44; flex-shrink:0;
  -webkit-overflow-scrolling:touch;
}
.opp-card {
  background:var(--af-navy); border:1px solid #1a2a44; border-radius:8px;
  padding:8px 10px; min-width:170px; flex-shrink:0;
  transition:border-color .3s, box-shadow .3s; position:relative;
  cursor:pointer;
}
.opp-card:hover { border-color:#FFD700; }
.opp-card.active-turn { border-color:var(--af-gold); box-shadow:0 0 8px rgba(255,215,0,.3); }
.opp-card.responding { border-color:#f44; }
.opp-card.eliminated {
  opacity:0.4; pointer-events:none; min-width:100px;
  background:rgba(50,50,50,0.3); border-color:#333;
}
.opp-name { font-weight:700; font-size:13px; margin-bottom:3px; }
.opp-name .sets { color:var(--af-gold); font-size:11px; margin-left:4px; }
.opp-stats { font-size:11px; color:#889; display:flex; gap:10px; margin-bottom:4px; }
.opp-props { display:flex; flex-wrap:wrap; gap:3px; }
.opp-net-worth { font-size:10px; color:#667; margin-top:3px; }
.opp-host { color:#FFD700; font-size:11px; margin-right:3px; }
.mini-prop {
  width:28px; height:28px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-size:10px; font-weight:700;
  cursor:pointer; border:1px solid rgba(255,255,255,.2);
  min-width:28px; min-height:28px;
}
.mini-prop.complete { border-color:var(--af-gold); box-shadow:0 0 4px rgba(255,215,0,.4); }
.mini-prop:hover,.mini-prop:active { transform:scale(1.15); border-color:#fff; }

/* Set progress bar */
.set-progress { display:flex; gap:1px; margin-top:3px; }
.set-progress-seg {
  height:3px; flex:1; border-radius:1px; background:rgba(255,255,255,.15);
}
.set-progress-seg.filled { background:var(--af-gold); }

/* ── Center Area ─────────────────────────────────────────────────────── */

.center-area { flex:1; overflow:auto; padding:8px 12px; -webkit-overflow-scrolling:touch; }
.center-cols { display:flex; gap:12px; min-height:100%; }
.my-assets { flex:2; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.my-net-worth {
  font-size:11px; color:var(--af-gold); font-weight:700; letter-spacing:1px;
  padding:4px 0; border-bottom:1px solid #1a2a44; margin-bottom:4px;
}
.my-assets h3 { font-size:12px; color:var(--af-silver); letter-spacing:2px; text-transform:uppercase; margin:8px 0 4px; }
.side-panel { flex:1; min-width:180px; display:flex; flex-direction:column; gap:8px; }
.discard-panel h3 { font-size:12px; color:var(--af-silver); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.discard-count { color:#667; font-weight:400; font-size:10px; letter-spacing:0; text-transform:none; }
#discard-pile { min-height:60px; cursor:pointer; }
#discard-pile .card { opacity:.8; width:90px; min-height:100px; font-size:10px; cursor:pointer; }
#discard-pile .empty-discard { font-size:11px; color:#445; font-style:italic; }
.discard-top-hint { font-size:10px; color:#667; margin-bottom:3px; }
.game-log-panel h3 { font-size:12px; color:var(--af-silver); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
#game-log {
  background:var(--af-navy); border-radius:8px; padding:8px;
  font-size:11px; color:#99aabc; max-height:250px; overflow-y:auto;
  line-height:1.6; -webkit-overflow-scrolling:touch;
}
#game-log .log-chud { color:var(--af-gold); font-weight:700; }
#game-log .log-rent { color:#c77dff; }
#game-log .log-opsec { color:#ff6b6b; font-weight:600; }
#game-log .log-turn { color:#667; font-size:10px; border-top:1px solid #1a2a44; padding-top:3px; margin-top:3px; }
#game-log .log-bank { color:#4caf50; }
#game-log .log-draw { color:#87CEEB; }
#game-log .log-steal { color:#FF8C00; font-weight:600; }
#game-log .log-seize { color:#DC143C; font-weight:600; }
#game-log .log-swap { color:#FFD700; }
#game-log .log-upgrade { color:#00bcd4; }
#game-log .log-surge { color:#e040fb; font-weight:600; }
#game-log .log-pay { color:#81c784; }
#game-log .log-pcs { color:#64b5f6; }
#game-log .log-scoop { color:#ef5350; font-weight:600; }
#game-log .log-win { color:var(--af-gold); font-weight:700; }
#game-log .log-blocked { color:#4caf50; font-weight:600; }
#game-log .log-demand { color:#FF8C00; }
#game-log .log-property { color:#aabbcc; }
#game-log .log-color-tag {
  font-weight:700; border-radius:3px; padding:0 3px;
  background:rgba(255,255,255,0.08);
}
#game-log .log-amount { color:var(--af-gold); font-weight:700; }

/* ── Hand area ───────────────────────────────────────────────────────── */

.hand-area {
  border-top:2px solid var(--af-blue); background:rgba(0,48,143,.15);
  flex-shrink:0; padding-bottom:var(--safe-b);
  transition:border-color .3s, background .3s;
}
.hand-area.my-turn {
  border-top-color:var(--af-gold);
  background:rgba(255,215,0,.06);
}
.hand-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 12px; gap:8px; overflow:hidden;
}
.hand-label { font-size:11px; letter-spacing:3px; color:var(--af-silver); font-weight:700; white-space:nowrap; }
.hand-count { color:#889; font-size:10px; letter-spacing:0; }
.hand-actions { display:flex; gap:6px; flex-shrink:1; flex-wrap:wrap; align-items:center; justify-content:flex-end; }

.btn-emote {
  width:30px; height:30px; border-radius:50%; border:1px solid #2a3a54;
  background:transparent; color:var(--af-silver); font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
}
.btn-emote:hover { border-color:var(--af-gold); color:var(--af-gold); }

.hand-actions button:not(.btn-emote) {
  padding:6px 12px; border-radius:6px; border:none; font-size:11px;
  font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:1px;
  transition:all .2s; min-height:36px; white-space:nowrap;
}
#btn-draw { background:var(--af-blue); color:#fff; }
#btn-draw:hover { background:#004adf; }
#btn-draw:disabled { background:#333; color:#666; cursor:default; }
#btn-end-turn { background:#1a2a44; color:var(--af-silver); }
#btn-end-turn:hover { background:#2a3a54; }
#btn-end-turn:disabled { background:#1a1a2a; color:#444; cursor:default; }
.hand-cards {
  padding:6px 12px 8px; min-height:calc(var(--card-h) + 8px);
  overflow-x:auto; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* ── Leave / Scoop buttons ──────────────────────────────────────────── */

.btn-leave {
  color:#f44336 !important; border-color:#f44336 !important; font-size:12px !important;
}
.btn-leave:hover { background:rgba(244,67,54,0.15) !important; }

.btn-leave-lobby {
  margin-top:8px; padding:8px 16px; border-radius:6px;
  border:1px solid #f44336; background:transparent; color:#f44336;
  font-size:12px; cursor:pointer; transition:all .15s;
  text-transform:uppercase; letter-spacing:1px;
}
.btn-leave-lobby:hover { background:rgba(244,67,54,0.15); }

.btn-scoop {
  background:rgba(244,67,54,0.1) !important; color:#f44 !important;
  border:1px solid rgba(244,67,54,0.3) !important; font-size:10px !important;
  padding:4px 8px !important; letter-spacing:0.5px !important;
}
.btn-scoop:hover { background:rgba(244,67,54,0.2) !important; }