*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── THEME VARIABLES ── */
  :root {
    --transition: 1.2s ease;
    /* Prosperity — stark white */
    --bg:          #ffffff;
    --bg2:         #f0f0f0;
    --bg3:         #e0e0e0;
    --surface:     rgba(255,255,255,0.98);
    --border:      #cccccc;
    --border2:     #888888;
    --text:        #000000;
    --text2:       #222222;
    --text3:       #888888;
    --accent:      #000000;
    --accent2:     #333333;
    --accent-glow: rgba(0,0,0,0.12);
    --bar:         #000000;
    --log-bg:      rgba(0,0,0,0.03);
    --log-border:  #cccccc;
    --panel-active:rgba(0,0,0,0.06);
    --header-bg:   rgba(255,255,255,0.98);
    --shadow:      rgba(0,0,0,0.10);
    --rat-border:  #444444;
    --sun-border:  #666666;
    --ctr-border:  #888888;
    --imp-border:  #444444;
    --card-bg:     rgba(255,255,255,0.95);
    --selected-bg: rgba(0,0,0,0.08);
    --btn-text:    #ffffff;
    --btn-sec-bg:  rgba(0,0,0,0.06);
    --elim-color:  #888888;
    --war-color:   #000000;
    --setup-bg:    #ffffff;
    --input-bg:    rgba(0,0,0,0.04);
    --input-color: #000000;
    --phase-label: #000000;
  }

  body.plague {
    /* Plague — stark black */
    --bg:          #000000;
    --bg2:         #111111;
    --bg3:         #1a1a1a;
    --surface:     rgba(10,10,10,0.98);
    --border:      #333333;
    --border2:     #666666;
    --text:        #ffffff;
    --text2:       #cccccc;
    --text3:       #777777;
    --accent:      #cccccc;
    --accent2:     #ffffff;
    --accent-glow: rgba(255,255,255,0.10);
    --bar:         #888888;
    --log-bg:      rgba(255,255,255,0.03);
    --log-border:  #222222;
    --panel-active:rgba(255,255,255,0.06);
    --header-bg:   rgba(0,0,0,0.98);
    --shadow:      rgba(0,0,0,0.80);
    --rat-border:  #777777;
    --sun-border:  #aaaaaa;
    --ctr-border:  #666666;
    --imp-border:  #888888;
    --card-bg:     rgba(0,0,0,0.95);
    --selected-bg: rgba(255,255,255,0.10);
    --btn-text:    #000000;
    --btn-sec-bg:  rgba(255,255,255,0.08);
    --elim-color:  #666666;
    --war-color:   #cccccc;
    --setup-bg:    #000000;
    --input-bg:    rgba(255,255,255,0.06);
    --input-color: #ffffff;
    --phase-label: #777777;
  }

  body {
    font-family: 'IM Fell English', 'Palatino Linotype', Palatino, serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
  }

  button { font-family: inherit; cursor: pointer; }
  input  { font-family: inherit; }

  /* ── SETUP ── */
  #setup {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    transition: background var(--transition);
  }
  .setup-box {
    background: var(--surface);
    border: 2px solid var(--border2);
    border-radius: 4px;
    padding: 40px 48px;
    max-width: 480px; width: 90%;
    transition: background var(--transition), border-color var(--transition);
  }
  .setup-title { text-align: center; margin-bottom: 32px; }
  .setup-title .skull { font-size: 50px; display: block; margin-bottom: 8px; }
  .setup-title h1 {
    color: var(--accent2); font-size: 30px; font-weight: bold;
    letter-spacing: 0.05em; text-shadow: 0 0 20px var(--accent-glow);
    font-family: 'IM Fell English SC', serif;
    transition: color var(--transition);
  }
  .setup-title p { color: var(--text3); font-size: 15px; margin-top: 6px; letter-spacing: 0.1em; font-style: italic; }

  .field-label {
    color: var(--accent2); font-size: 16px; display: block;
    margin-bottom: 10px; letter-spacing: 0.05em;
    transition: color var(--transition);
  }
  .count-row { display: flex; gap: 8px; margin-bottom: 24px; }
  .count-btn {
    flex: 1; padding: 8px 0;
    border-radius: 2px; font-size: 17px;
    transition: all 0.15s;
  }
  .count-btn.active {
    background: var(--accent2); border: 1px solid var(--border2); color: #fff;
  }
  .count-btn.inactive {
    background: var(--btn-sec-bg); border: 1px solid var(--border); color: var(--text3);
  }
  .player-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .player-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent2); cursor: pointer; }
  .player-row input[type=text] {
    flex: 1; background: var(--input-bg); border: 1px solid var(--border);
    color: var(--input-color); padding: 7px 12px; border-radius: 2px;
    font-size: 16px; outline: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .ai-label { color: var(--text3); font-size: 14px; }
  .start-btn {
    width: 100%; padding: 13px 0; margin-top: 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent));
    border: none; color: var(--btn-text);
    font-size: 20px; font-weight: bold; letter-spacing: 0.1em;
    border-radius: 2px; box-shadow: 0 0 20px var(--accent-glow);
    text-transform: uppercase;
    transition: box-shadow var(--transition);
  }
  .start-btn:hover { box-shadow: 0 0 30px var(--accent-glow); }

  /* ── GAME LAYOUT ── */
  #game { display: none; flex-direction: column; height: 100vh; }
  #game.active { display: flex; }

  .header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    display: flex; justify-content: space-between; align-items: center;
    transition: background var(--transition), border-color var(--transition);
    flex-shrink: 0;
  }
  .phase-label {
    color: var(--phase-label); font-size: 18px; font-weight: bold;
    font-family: 'IM Fell English SC', serif; letter-spacing: 0.05em;
    transition: color var(--transition);
  }
  .deck-info { color: var(--text3); font-size: 15px; }
  .restart-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text3); padding: 4px 12px; font-size: 14px; border-radius: 2px;
    transition: border-color var(--transition), color var(--transition);
  }

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

  /* ── PLAYERS PANEL ── */
  .players-col {
    width: 300px; display: flex; flex-direction: column;
    border-right: 1px solid var(--log-border);
    transition: border-color var(--transition);
    flex-shrink: 0;
  }
  .players-panel {
    flex: 1; padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
  }
  .player-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 4px; padding: 10px 14px;
    transition: all 0.2s;
  }
  .player-card.active {
    background: var(--panel-active);
    border-color: var(--accent2);

  }
  .player-card.eliminated { opacity: 0.4; }
  .player-card.targetable { cursor: pointer; }
  .player-card.targetable:hover { border-color: var(--elim-color) !important; }
  .player-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .player-name { font-size: 15px; font-weight: bold; color: var(--text2); transition: color var(--transition); }
  .player-card.active .player-name { color: var(--text); }
  .player-pp { font-size: 17px; font-weight: bold; color: var(--bar); transition: color var(--transition); }
  .pp-bar-bg {
    background: var(--bg3); border-radius: 2px; height: 6px;
    margin-bottom: 6px; overflow: hidden;
    transition: background var(--transition);
  }
  .pp-bar-fill { height: 100%; border-radius: 2px; background: var(--bar); transition: width 0.3s, background var(--transition); }
  .improvements { display: flex; gap: 4px; flex-wrap: wrap; }
  .imp-tag {
    background: rgba(32,128,64,0.2); border: 1px solid var(--imp-border);
    border-radius: 2px; padding: 1px 5px; font-size: 12px; color: var(--imp-border);
  }
  .target-hint { text-align: center; font-size: 12px; color: var(--elim-color); margin-top: 2px; }

  /* ── CENTER PANEL ── */
  .center-panel {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px; gap: 12px; overflow: hidden;
    min-width: 0;
  }
  .turn-box {
    background: var(--panel-active); border: 1px solid var(--border);
    border-radius: 4px; padding: 12px 16px;
    transition: background var(--transition), border-color var(--transition);
    flex-shrink: 0;
  }
  .turn-name { font-size: 17px; font-weight: bold; color: var(--text); margin-bottom: 4px; transition: color var(--transition); }
  .turn-step { color: var(--text3); font-size: 14px; transition: color var(--transition); }
  .turn-step span { color: var(--accent2); }
  .war-notice { color: var(--war-color); font-size: 15px; margin-top: 6px; }

  .action-row { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
  .action-hint { color: var(--text3); font-size: 14px; align-self: center; }
  .war-hint    { color: var(--war-color); font-size: 15px; align-self: center; }
  .ai-thinking {
    color: var(--text3); font-size: 14px; padding: 8px 12px;
    background: var(--log-bg); border-radius: 4px;
    transition: background var(--transition), color var(--transition);
  }

  .btn-primary {
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none; color: var(--btn-text);
    font-size: 15px; font-weight: bold; letter-spacing: 0.05em;
    border-radius: 2px; box-shadow: 0 0 12px var(--accent-glow);
    transition: box-shadow var(--transition);
  }
  .btn-primary:hover { box-shadow: 0 0 20px var(--accent-glow); }
  .btn-secondary {
    padding: 9px 18px;
    background: var(--btn-sec-bg); border: 1px solid var(--border);
    color: var(--accent2); font-size: 15px; letter-spacing: 0.05em;
    border-radius: 2px;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }

  .log-panel {
    flex: 1; background: var(--log-bg); border: 1px solid var(--log-border);
    border-radius: 4px; padding: 12px; overflow-y: auto;
    transition: background var(--transition), border-color var(--transition);
    min-height: 0;
  }
  .log-title { color: var(--text3); font-size: 13px; margin-bottom: 6px; letter-spacing: 0.1em; }
  .log-entry { font-size: 14px; margin-bottom: 4px; line-height: 1.4; padding-left: 8px; }
  .log-entry.latest { color: var(--text); border-left: 2px solid var(--accent2); }
  .log-entry.old    { border-left: 2px solid transparent; }

  /* ── HAND PANEL ── */
  .hand-panel {
    width: 500px; border-left: 1px solid var(--log-border);
    padding: 12px; overflow-y: auto;
    transition: border-color var(--transition);
    flex-shrink: 0;
  }
  .hand-title { color: var(--text3); font-size: 13px; margin-bottom: 8px; letter-spacing: 0.1em; }
  .hand-hint  { color: var(--text3); font-size: 12px; margin-bottom: 8px; font-style: italic; }
  .hand-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hand-card {
    background: var(--card-bg); border-radius: 4px; overflow: visible;
    transition: all 0.15s; cursor: default;
    box-shadow: 0 2px 6px var(--shadow);
    position: relative;
  }
  .hand-card-inner { border-radius: 4px; overflow: hidden; }
  .hand-card.playable  { cursor: pointer; }
  .hand-card.playable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow); }
  .hand-card.selected  { outline: 3px solid var(--accent2); transform: translateY(-4px); box-shadow: 0 6px 16px var(--shadow); }
  .hand-card.dimmed    { opacity: 0.4; }
  .hand-card-img {
    width: 100%; aspect-ratio: 5/7; object-fit: cover; object-position: top;
    display: block; border-bottom: 1px solid var(--border);
    background: var(--bg3);
  }
  .hand-card-body { padding: 4px 5px; }
  .hand-card-top { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
  .hand-card-icon { font-size: 14px; flex-shrink: 0; }
  .hand-card-name { color: var(--text); font-size: 13px; font-weight: bold; transition: color var(--transition); line-height: 1.2; }
  .hand-card-effect { color: var(--text3); font-size: 11.5px; font-style: italic; transition: color var(--transition); line-height: 1.3; }
  .empty-hand { color: var(--text3); font-size: 14px; font-style: italic; grid-column: span 3; }

  /* Zoom button on each card */
  .card-zoom-btn {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent2); border: 2px solid var(--bg);
    color: var(--btn-text); font-size: 12px; line-height: 1;
    cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px var(--shadow);
    transition: background 0.1s, transform 0.1s;
    padding: 0;
  }
  .card-zoom-btn:hover { transform: scale(1.2); }

  /* Card modal */
  #card-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
  }
  #card-modal.open { display: flex; }
  .card-modal-inner {
    background: var(--surface); border: 2px solid var(--border2);
    border-radius: 8px; overflow: hidden;
    width: 90vw; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    animation: modalPop 0.15s ease;
  }
  @keyframes modalPop {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  .card-modal-img { width: 100%; display: block; }
  .card-modal-body { padding: 12px 14px; }
  .card-modal-name { font-size: 17px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
  .card-modal-effect { font-size: 14px; color: var(--text3); font-style: italic; line-height: 1.4; margin-bottom: 10px; }
  .card-modal-close {
    width: 100%; padding: 8px;
    background: var(--btn-sec-bg); border: 1px solid var(--border);
    color: var(--accent2); font-family: inherit; font-size: 15px;
    border-radius: 3px; cursor: pointer;
    transition: background 0.1s;
  }
  .card-modal-close:hover { background: var(--panel-active); }

  /* AI face-down cards */
  .ai-hand-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px 0; }
  .ai-face-down {
    aspect-ratio: 5/7;
    border-radius: 3px; overflow: hidden;
  }
  .ai-face-down img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Phase reference card — fixed at bottom of players col */
  .phase-ref-card {
    width: 100%; border-radius: 0; overflow: hidden;
    border-top: 1px solid var(--border);
    flex-shrink: 0; position: relative;
    transition: border-color var(--transition);
    cursor: pointer;
  }
  .phase-ref-card { max-height: 50vh; overflow: hidden; }
  .phase-ref-card img { width: 100%; display: block; max-height: 50vh; object-fit: contain; }
  .phase-ref-card:hover img { opacity: 0.9; }
  .phase-ref-zoom {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent2); border: 2px solid var(--bg);
    color: var(--btn-text); font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px var(--shadow);
    pointer-events: none;
  }

  /* Rules button */
  .rules-btn {
    width: 100%; padding: 8px 0;
    background: transparent; border: none;
    border-top: 1px solid var(--border);
    color: var(--text3); font-family: inherit; font-size: 13px;
    cursor: pointer; letter-spacing: 0.05em;
    transition: background 0.15s, color 0.15s, border-color var(--transition);
    flex-shrink: 0;
  }
  .rules-btn:hover { background: var(--panel-active); color: var(--text); }

  /* Rules modal */
  #rules-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
  }
  #rules-modal.open { display: flex; }
  .rules-modal-inner {
    background: var(--surface); border: 2px solid var(--border2);
    border-radius: 8px; overflow: hidden;
    width: 90vw; max-width: 680px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    animation: modalPop 0.15s ease;
  }
  .rules-modal-header {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
  }
  .rules-modal-header h2 {
    font-size: 18px; color: var(--text); font-family: 'IM Fell English SC', serif;
    margin: 0;
  }
  .rules-modal-close {
    background: transparent; border: 1px solid var(--border);
    color: var(--text3); font-family: inherit; font-size: 13px;
    padding: 4px 12px; border-radius: 3px; cursor: pointer;
    transition: background 0.1s;
  }
  .rules-modal-close:hover { background: var(--panel-active); }
  .rules-modal-body {
    padding: 18px 22px; overflow-y: auto; flex: 1;
    font-size: 14px; line-height: 1.7; color: var(--text2);
  }
  .rules-modal-body h3 {
    font-size: 15px; color: var(--text); margin: 18px 0 6px;
    font-family: 'IM Fell English SC', serif; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border); padding-bottom: 4px;
  }
  .rules-modal-body h3:first-child { margin-top: 0; }
  .rules-modal-body p { margin-bottom: 10px; }
  .rules-modal-body ul { margin: 0 0 10px 20px; }
  .rules-modal-body li { margin-bottom: 4px; }
  .rules-modal-body .card-entry { margin-bottom: 8px; }
  .rules-modal-body .card-name { font-weight: bold; color: var(--text); }
  .rules-modal-body .card-effect { font-style: italic; color: var(--text3); }

  /* ── GAME OVER ── */
  #gameover {
    display: none; min-height: 100vh;
    align-items: center; justify-content: center;
    background: var(--bg);
    transition: background var(--transition);
  }
  #gameover.active { display: flex; }
  .gameover-box {
    text-align: center;
    background: var(--surface); border: 2px solid var(--border2);
    border-radius: 4px; padding: 48px 56px;
    box-shadow: 0 0 60px var(--accent-glow);
    transition: background var(--transition), border-color var(--transition);
  }
  .gameover-box h2 { color: var(--accent2); font-size: 34px; font-family: 'IM Fell English SC', serif; }
  .gameover-box p  { color: var(--text3); margin-top: 8px; font-style: italic; }

  /* ── PHASE TRANSITION FLASH ── */
  #plague-flash {
    position: fixed; inset: 0;
    background: #000000;
    opacity: 0; pointer-events: none;
    z-index: 999;
    transition: opacity 0.3s;
  }
  #plague-flash.flash { animation: flashAnim 1.5s ease forwards; }
  @keyframes flashAnim {
    0%   { opacity: 0; }
    15%  { opacity: 0.7; }
    100% { opacity: 0; }
  }

  /* ── MOBILE NAV TABS ── */
  .mobile-tabs {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--header-bg);
    flex-shrink: 0;
  }
  .mobile-tabs button {
    flex: 1; padding: 10px 4px 8px;
    background: transparent; border: none;
    border-top: 3px solid transparent;
    color: var(--text3); font-size: 11px;
    letter-spacing: 0.04em; text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.2;
  }
  .mobile-tabs button.active {
    color: var(--accent2);
    border-top-color: var(--accent2);
  }

  /* ── MOBILE HAND CARDS: horizontal scroll strip ── */
  .hand-cards-mobile {
    display: none;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
    /* Setup */
    .setup-box { padding: 28px 20px; }
    .setup-title h1 { font-size: 22px; }
    .setup-title .skull { font-size: 36px; }

    /* Game layout: stack vertically, show one panel at a time */
    #game { height: 100dvh; }
    .game-body { position: relative; overflow: hidden; }

    /* Hide all side panels by default; show via .tab-active */
    .players-col {
      position: absolute; inset: 0;
      width: 100%; border-right: none;
      display: none; z-index: 2;
    }
    .players-col.tab-active { display: flex; }
    .players-panel { border-right: none; }

    .hand-panel {
      position: absolute; inset: 0;
      width: 100%; border-left: none;
      display: none; z-index: 2;
      overflow-y: auto;
    }
    .hand-panel.tab-active { display: block; }

    /* Center panel always rendered but hidden when tab not active */
    .center-panel {
      position: absolute; inset: 0;
      display: none; z-index: 2;
      padding: 10px;
    }
    .center-panel.tab-active { display: flex; }

    /* Mobile tabs visible */
    .mobile-tabs { display: flex; }

    /* Header condensed */
    .header { padding: 8px 12px; }
    .phase-label { font-size: 16px; }
    .deck-info { font-size: 13px; display: none; }

    /* Buttons full-width on mobile */
    .btn-primary, .btn-secondary { padding: 12px 14px; font-size: 16px; width: 100%; }
    .action-row { flex-direction: column; }
    .action-hint, .war-hint { font-size: 15px; text-align: center; }

    /* Turn box smaller */
    .turn-box { padding: 10px 12px; }
    .turn-name { font-size: 16px; }
    .turn-step { font-size: 14px; }
    .war-notice { font-size: 15px; }

    /* Log shorter on mobile */
    .log-panel { min-height: 80px; }
    .log-title { font-size: 13px; }
    .log-entry { font-size: 14px; }

    /* Player cards in a compact grid on mobile */
    .players-panel { flex-direction: column; gap: 6px; padding: 10px; }
    .player-card { padding: 8px 12px; }
    .player-name { font-size: 15px; }
    .player-pp   { font-size: 17px; }
    .imp-tag     { font-size: 12px; }
    .target-hint { font-size: 12px; }

    /* Hand cards: 2-col grid on mobile too */
    .hand-panel { padding: 8px; width: 100%; border-left: none; }
    .hand-title { font-size: 13px; }
    .hand-hint  { font-size: 12px; }
    .hand-cards { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
    .hand-card-body { padding: 4px 5px; }
    .hand-card-name { font-size: 10px; }
    .hand-card-effect { font-size: 8px; }
    .hand-card-icon { font-size: 11px; }
    .hand-card-img { aspect-ratio: 5/7; }
    .empty-hand { font-size: 13px; }
    .card-zoom-btn { width: 18px; height: 18px; font-size: 9px; top: -5px; right: -5px; }
    /* Phase ref card and rules button hidden on mobile */
    .phase-ref-card { display: none; }
    .rules-btn { display: none; }

    /* Mobile tabs */
    .mobile-tabs button { font-size: 13px; }

    /* Game over */
    .gameover-box { padding: 32px 24px; margin: 16px; }
    .gameover-box h2 { font-size: 26px; }
    .gameover-box p  { font-size: 16px; }
  }

  @media (max-width: 400px) {
    .setup-box { padding: 20px 14px; }
    .phase-label { font-size: 12px; }
    .restart-btn { font-size: 11px; padding: 4px 8px; }