/* ===== THEMES: Classic (default) · Light · Dark · Dark Purple =====
   Every theme defines the full token set; component styles only use var(--…). */
:root, [data-theme="classic"]{
    --bg:#0d0b07; --bg2:#17130c; --panel:#1e1810; --panel2:#26200f;
    --ink:#f2e9d8; --ink2:#c8b78f; --muted:#9e906f;
    --gold:#d9b45a; --gold-dim:#8a6d2f; --green:#3f6d34; --green-lt:#6faf52;
    --blood:#7a1f1f; --blood-lt:#c0392b; --wolf:#5a6b7a;
    --border:#3a2f1a; --border-lt:#4d3e22;
    --loyalty:#2e7d32; --danger:#c0392b;
    --font: "Trebuchet MS","Segoe UI",-apple-system,sans-serif;
    --serif: "Georgia","Times New Roman",serif;
    --danger-ink:#d26a5f; --on-danger:#ffdede;
    --info:#47606f; --info-lt:#5f7a8c; --info-ink:#d5e6ff;
    --cmdr:#d98c42; --cmdr-ink:#f4d6a6;
    --arcane:#775f94; --arcane-lt:#a887cf; --arcane-ink:#eadcff;
    --on-accent:#10130c; 
    --title-shadow:0 2px 6px #000;
    --radius:12px; --radius-sm:7px;
    --shadow:0 6px 24px rgba(0,0,0,.55);
    --body-bg:
      radial-gradient(1100px 600px at 70% -10%, #2a1f0e 0%, transparent 55%),
      radial-gradient(900px 500px at 10% 110%, #241a2a 0%, transparent 50%),
      linear-gradient(160deg,#0d0b07,#100c14 60%,#0a0906);
    --header-bg:linear-gradient(180deg,rgba(60,45,18,.5),rgba(20,15,8,.6));
    --panel-bg:linear-gradient(180deg,var(--panel),var(--bg2));
    --panel-h-bg:linear-gradient(180deg,rgba(80,60,24,.25),transparent);
    --card-bg:linear-gradient(145deg,#2a2210,#1a150a);
    --card-border:#4d3e22;
      color-scheme:dark;
  }

[data-theme="light"]{
    --bg:#f3f1ec; --bg2:#ebe8e1; --panel:#ffffff; --panel2:#f6f4ef;
    --ink:#1e1b16; --ink2:#4a443a; --muted:#6c655a;
    --gold:#8a5a00; --gold-dim:#c9a35c; --green:#2e7d32; --green-lt:#256b2a;
    --blood:#b42318; --blood-lt:#c8321f; --wolf:#5a6b7a;
    --border:#e0dbd0; --border-lt:#cfc8ba;
    --loyalty:#2e7d32; --danger:#c8321f;
    --danger-ink:#a8261a; --on-danger:#7a160e;
    --info:#3b6e8f; --info-lt:#5b8db0; --info-ink:#1f4e6b;
    --cmdr:#c2621a; --cmdr-ink:#8a3d0b;
    --arcane:#7c5cb5; --arcane-lt:#6a49a8; --arcane-ink:#4b2f80;
    --on-accent:#ffffff;
    --font: "Trebuchet MS","Segoe UI",-apple-system,sans-serif;
    --serif: "Georgia","Times New Roman",serif;
    --title-shadow:none;
    --radius:12px; --radius-sm:7px;
    --shadow:0 4px 16px rgba(60,45,20,.12);
    --body-bg:
      radial-gradient(1100px 600px at 70% -10%, #fff7e6 0%, transparent 55%),
      linear-gradient(160deg,#f6f3ec,#ede9e1 60%,#f3f0ea);
    --header-bg:linear-gradient(180deg,#ffffff,#f8f5ef);
    --panel-bg:linear-gradient(180deg,var(--panel),var(--panel2));
    --panel-h-bg:linear-gradient(180deg,rgba(138,90,0,.06),transparent);
    --card-bg:linear-gradient(145deg,#3b3a36,#24231f);
    --card-border:#6a655c;
    color-scheme:light;
  }

[data-theme="dark"]{
    --bg:#0f1115; --bg2:#15181d; --panel:#1b1f26; --panel2:#232831;
    --ink:#e8eaed; --ink2:#b4bac4; --muted:#949cab;
    --gold:#8ab4f8; --gold-dim:#3d5a8a; --green:#2f7d55; --green-lt:#5cc98d;
    --blood:#6e2323; --blood-lt:#e5534b; --wolf:#5a6b7a;
    --border:#2a2f38; --border-lt:#3a414d;
    --loyalty:#2f7d55; --danger:#e5534b;
    --danger-ink:#f47067; --on-danger:#ffd8d3;
    --info:#3b5470; --info-lt:#57789c; --info-ink:#cfe3ff;
    --cmdr:#d9822b; --cmdr-ink:#f5d0a9;
    --arcane:#6b5a9e; --arcane-lt:#a28ee0; --arcane-ink:#e3dbff;
    --on-accent:#0f1115;
    --font: -apple-system,"SF Pro Text","Segoe UI",sans-serif;
    --serif: -apple-system,"SF Pro Display","Segoe UI",sans-serif;
    --title-shadow:0 2px 6px #000;
    --radius:10px; --radius-sm:6px;
    --shadow:0 6px 20px rgba(0,0,0,.5);
    --body-bg:linear-gradient(180deg,#111318,#0b0d10);
    --header-bg:linear-gradient(180deg,#1d2129,#171a20);
    --panel-bg:linear-gradient(180deg,var(--panel),var(--bg2));
    --panel-h-bg:linear-gradient(180deg,rgba(138,180,248,.06),transparent);
    --card-bg:linear-gradient(145deg,#2a2f38,#1d2128);
    --card-border:#3f4652;
    color-scheme:dark;
  }

[data-theme="purple"]{
    --bg:#08050c; --bg2:#100a17; --panel:#170f21; --panel2:#20152e;
    --ink:#f1e9ff; --ink2:#c9b6e8; --muted:#9e8bbd;
    --gold:#c9a2ff; --gold-dim:#5f4291; --green:#6a3fb0; --green-lt:#b38cff;
    --blood:#3d1a5c; --blood-lt:#8f4fd6; --wolf:#6c5a8a;
    --border:#2a1c3d; --border-lt:#3c2957;
    --loyalty:#7d50cc; --danger:#8f4fd6;
    --danger-ink:#d7b0ff; --on-danger:#f1e2ff;
    --info:#4a3473; --info-lt:#7558ad; --info-ink:#e2d4ff;
    --cmdr:#9c63e8; --cmdr-ink:#ead9ff;
    --arcane:#583a8c; --arcane-lt:#b48eff; --arcane-ink:#efe3ff;
    --on-accent:#120a1c;
    --font: "Segoe UI","Trebuchet MS",-apple-system,sans-serif;
    --serif: "Palatino Linotype","Book Antiqua",serif;
    --title-shadow:0 2px 6px #000;
    --radius:10px; --radius-sm:6px;
    --shadow:0 8px 28px rgba(0,0,0,.7), 0 0 50px rgba(110,60,190,.08);
    --body-bg:
      radial-gradient(900px 520px at 80% -5%, rgba(98,52,170,.32) 0%, transparent 60%),
      radial-gradient(700px 420px at 10% 105%, rgba(60,28,110,.28) 0%, transparent 55%),
      linear-gradient(170deg,#0a0610,#07040b 60%,#050308);
    --header-bg:linear-gradient(180deg,rgba(70,38,120,.42),rgba(12,8,20,.7));
    --panel-bg:linear-gradient(180deg,var(--panel),var(--bg2));
    --panel-h-bg:linear-gradient(180deg,rgba(120,70,200,.18),transparent);
    --card-bg:linear-gradient(145deg,#2a1b40,#150d22);
    --card-border:#4a3270;
    color-scheme:dark;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:var(--font); color:var(--ink);
    background:var(--body-bg);
    background-attachment:fixed;
    min-height:100vh; padding:18px; line-height:1.45;
  }
  .wrap{max-width:1180px; margin:0 auto;}

  header{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:14px 20px; margin-bottom:16px;
    background:var(--header-bg);
    border:1px solid var(--border-lt); border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .brand{display:flex; flex-direction:column;}
  .brand h1{font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:.5px; color:var(--gold); text-shadow:var(--title-shadow); line-height:1.05;}
  .brand .sub{font-size:12.5px; color:var(--ink2); letter-spacing:1.5px; text-transform:uppercase;}
  .turn-badge{margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .turn-pill{background:var(--panel2); border:1px solid var(--border-lt); border-radius:999px; padding:7px 16px; font-size:13px; color:var(--ink2);}
  .turn-pill b{color:var(--gold); font-family:var(--serif); font-size:15px;}
  .turn-pill.active{border-color:var(--green-lt); color:var(--ink); background:color-mix(in srgb,var(--green) 35%,transparent);}
  .btn-ghost{background:transparent; border:1px solid var(--border-lt); color:var(--ink2); padding:7px 14px; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px; transition:all .15s ease; font-family:var(--font);}
  .btn-ghost:hover{border-color:var(--gold-dim); color:var(--gold);}
  .btn-ghost:disabled{opacity:.38; cursor:not-allowed;}
  .btn-ghost:disabled:hover{border-color:var(--border-lt); color:var(--ink2);}
  .btn-ghost .badge{background:var(--green);color:#fff;border-radius:999px;padding:0 6px;font-size:10px;margin-left:5px;}

  .panel{background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
  .panel-h{display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--panel-h-bg); font-family:var(--serif); font-size:15px; color:var(--gold); letter-spacing:.4px;}
  .panel-h .ico{font-size:16px;}
  .panel-b{padding:16px;}

  /* ===== ENEMY BOARD — centerpiece (.garruk-* class names are legacy) ===== */
  .board{
    margin-bottom:16px;
    background:radial-gradient(700px 300px at 20% 0%, color-mix(in srgb,var(--green) 28%,transparent), transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--green) 18%,var(--panel)),var(--bg2));
    border:1px solid var(--green); border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .board.enraged{border-color:var(--blood-lt); background:radial-gradient(700px 300px at 20% 0%, color-mix(in srgb,var(--blood) 32%,transparent), transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--blood) 25%,var(--panel)),var(--bg2));}
  .board-h{display:flex; align-items:center; gap:8px; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(0,0,0,.28),transparent); font-family:var(--serif); font-size:16px; color:var(--gold); letter-spacing:.5px; border-radius:var(--radius) var(--radius) 0 0;}
  .board-h .atk-note{margin-left:auto; font-family:var(--font); font-size:12px; color:var(--ink2);}
  .board-inner{display:grid; grid-template-columns:230px 1fr; gap:20px; padding:18px; min-height:34vh;}
  @media(max-width:760px){ .board-inner{grid-template-columns:1fr;} }

  .garruk-col{display:flex; flex-direction:column; gap:12px;}
  .garruk-top{display:flex; gap:14px; align-items:stretch;}
  .portrait{flex:0 0 92px; border-radius:var(--radius-sm); position:relative; background:radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--green) 85%,#fff), color-mix(in srgb,var(--green) 45%,#000) 70%); border:2px solid var(--gold-dim); display:flex; align-items:flex-end; justify-content:center; min-height:128px; box-shadow:inset 0 0 30px rgba(0,0,0,.6);}
  .portrait .glyph{position:absolute; top:50%; left:50%; transform:translate(-50%,-56%); font-size:54px; filter:drop-shadow(0 3px 6px #000);}
  .portrait .name{position:relative; z-index:2; width:100%; text-align:center; font-family:var(--serif); font-size:10.5px; color:#f2e9d8; padding:3px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.85)); border-radius:0 0 5px 5px;}
  .portrait:hover .portrait-tooltip{display:block; animation:ttFadeIn .2s ease;}
  .portrait-tooltip{
    display:none; position:absolute; left:calc(100% + 12px); top:-10px; z-index:100;
    width:320px; padding:16px; border-radius:var(--radius);
    background:linear-gradient(180deg,var(--panel),var(--bg)); border:1px solid var(--gold-dim);
    box-shadow:0 12px 40px rgba(0,0,0,.7); color:var(--ink); font-size:12.5px; line-height:1.5;
    cursor:default; pointer-events:none;
  }
  @media(max-width:760px){ .portrait-tooltip{left:0; top:calc(100% + 8px); width:280px;} }
  @keyframes ttFadeIn{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}
  .tt-header{font-family:var(--serif); font-size:15px; font-weight:700; color:var(--gold); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border);}
  .tt-passive{margin-bottom:10px; padding:6px 8px; border-radius:6px; background:color-mix(in srgb,var(--green) 20%,transparent); border:1px solid color-mix(in srgb,var(--green) 40%,transparent); color:var(--green-lt); font-size:12px;}
  .tt-ability{margin-bottom:9px; padding:6px 8px; border-radius:6px; background:color-mix(in srgb,var(--bg) 25%,transparent); border:1px solid var(--border);}
  .tt-ability b{color:var(--ink); font-size:12.5px;}
  .tt-ability em{color:var(--muted); font-size:11px;}
  .tt-cost{display:inline-block; font-family:var(--serif); font-weight:700; font-size:11px; padding:1px 6px; border-radius:4px; margin-right:6px; background:var(--bg); border:1px solid var(--border-lt); color:var(--ink2);}
  .tt-cost.tt-free{background:color-mix(in srgb,var(--green) 30%,transparent); border-color:var(--green); color:var(--green-lt);}
  .tt-cost.tt-gain{background:color-mix(in srgb,var(--green) 30%,transparent); border-color:var(--green); color:var(--green-lt);}
  .tt-cost.tt-spend{background:color-mix(in srgb,var(--blood) 30%,transparent); border-color:var(--blood); color:var(--danger-ink);}
  .tt-section{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink2); margin:12px 0 4px; padding-top:8px; border-top:1px solid var(--border);}
  .tt-note{font-size:11.5px; color:var(--muted); line-height:1.5; font-style:italic;}
  .portrait.enraged{background:radial-gradient(circle at 50% 30%, var(--blood-lt), color-mix(in srgb,var(--blood) 60%,#000) 70%); border-color:var(--blood-lt); animation:pulse 1.4s ease-in-out infinite;}
  .portrait::after{content:"ⓘ"; position:absolute; top:4px; left:4px; font-size:11px; color:var(--gold-dim); opacity:.7; z-index:3; transition:opacity .15s;}
  .portrait:hover::after{opacity:1; color:var(--gold);}
  @keyframes pulse{0%,100%{box-shadow:inset 0 0 30px rgba(0,0,0,.6),0 0 0 color-mix(in srgb,var(--blood-lt) 0%,transparent);}50%{box-shadow:inset 0 0 30px rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--blood-lt) 70%,transparent);}}

  .garruk-stats{flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px;}
  .loyalty-num{font-family:var(--serif); font-weight:700; font-size:48px; line-height:1; color:var(--ink); text-shadow:0 2px 10px color-mix(in srgb,var(--loyalty) 80%,transparent),var(--title-shadow);}
  .loyalty-lbl{font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink2);}
  .loyalty-bar{height:11px; border-radius:999px; background:var(--bg); border:1px solid var(--border); overflow:hidden;}
  .loyalty-fill{height:100%; background:linear-gradient(90deg,var(--loyalty),var(--green-lt)); transition:width .5s cubic-bezier(.2,.8,.2,1); border-radius:999px;}
  .phase-tag{align-self:flex-start; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 12px; border-radius:999px; border:1px solid var(--border-lt); color:var(--ink2);}
  .phase-tag.enraged{background:var(--blood); border-color:var(--blood-lt); color:var(--on-danger);}

  .field-col{display:flex; flex-direction:column;}
  .field-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .field-h .lbl{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink2);}
  .tokens{display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; flex:1;}
  .empty-field{color:var(--muted); font-size:13px; font-style:italic; padding:20px 4px; align-self:center; margin:auto; text-align:center;}

  .card{position:relative; width:104px; height:150px; border-radius:9px; background:var(--card-bg, linear-gradient(160deg,#3a4a58 0%,#243039 55%,#1a232b 100%)); border:2px solid var(--card-border, var(--info-lt)); box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35); padding:6px; display:flex; flex-direction:column; animation:pop .3s ease-out both;}
  .card.beast{background:linear-gradient(160deg,#5a4326 0%,#38290f 55%,#241a0b 100%); border-color:#8a6a38;}
  .card .c-name{font-family:var(--serif); font-size:10px; color:#eee; display:flex; justify-content:space-between; align-items:center; line-height:1;}
  .card .c-name .mana{color:#bfe08a; font-size:9px;}
  .card .c-art{flex:1; margin:5px 0; border-radius:5px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.15), rgba(0,0,0,.4)); border:1px solid rgba(0,0,0,.4); font-size:44px; filter:drop-shadow(0 2px 4px #000);}
  .card .c-type{font-size:8px; color:#d8cfb8; letter-spacing:.3px; text-align:center; margin-bottom:3px;}
  .card .c-kw{font-size:8.5px; color:var(--gold); text-align:center; min-height:11px; letter-spacing:.3px; line-height:1.1;}
  .card .c-pt{position:absolute; bottom:5px; right:6px; font-family:var(--serif); font-weight:700; font-size:15px; color:#fff; background:linear-gradient(180deg,#1a232b,#0c1116); border:1px solid var(--info-lt); border-radius:5px; padding:1px 7px; box-shadow:0 2px 5px rgba(0,0,0,.5);}
  .card.beast .c-pt{background:linear-gradient(180deg,#241a0b,#120c05); border-color:#8a6a38;}
  .card .c-x,.card .c-remove{position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:var(--panel2); border:1px solid var(--border-lt); color:var(--ink2); cursor:pointer; font-size:13px; line-height:20px; text-align:center; font-weight:700; z-index:3; transition:all .12s;}
  .card .c-x:hover,.card .c-remove:hover{background:var(--blood); border-color:var(--blood-lt); color:#fff;}
  .card.sick{opacity:.7; border-style:dashed;}
  .card .c-sick{position:absolute; top:-6px; left:-6px; font-size:16px; z-index:3;}
  @keyframes pop{from{opacity:0; transform:scale(.7) translateY(8px);}to{opacity:1; transform:none;}}

  .grid{display:grid; grid-template-columns: 1.5fr 1fr; gap:16px;}
  @media(max-width:920px){ .grid{grid-template-columns:1fr;} }

  .declare{border:1px solid var(--border-lt); border-radius:var(--radius-sm); overflow:hidden;}
  .declare.garruk{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 18%,transparent),color-mix(in srgb,var(--bg) 40%,transparent));}
  .declare.player{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 14%,transparent),color-mix(in srgb,var(--bg) 40%,transparent));}
  .declare-h{padding:7px 14px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg) 25%,transparent);}
  .declare.garruk .declare-h{color:var(--green-lt);} .declare.player .declare-h{color:var(--gold);}
  .declare-body{padding:14px 16px; min-height:64px;}
  .declare-flavor{font-family:var(--serif); font-style:italic; color:var(--ink); font-size:14.5px; margin-bottom:7px;}
  .declare-mech{font-size:13px; color:var(--gold);}
  .declare-mech .cost{display:inline-block; font-family:var(--serif); font-weight:700; padding:1px 8px; border-radius:5px; background:var(--bg); border:1px solid var(--gold-dim); color:var(--gold); margin-right:6px;}
  .declare-mech .target{display:block; margin-top:7px; color:var(--danger-ink); font-size:12.5px;}
  .declare-mech .target .tg{color:var(--gold); font-style:italic;}
  .declare-mech .target b{color:var(--gold);}

  .resp-title{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink2); margin:16px 0 8px;}
  .resp-grid{display:flex; flex-direction:column; gap:8px;}
  .resp-btn{text-align:left; padding:11px 14px; border-radius:var(--radius-sm); cursor:pointer; position:relative; background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,var(--panel)),var(--bg2)); border:1px solid var(--border-lt); color:var(--ink); font-family:var(--font); font-size:13.5px; transition:all .15s ease; display:flex; align-items:center; gap:10px;}
  .resp-btn:hover{border-color:var(--gold); transform:translateX(3px);}
  .resp-btn .rico{font-size:17px;}
  .resp-btn small{display:block; color:var(--muted); font-size:11.5px; margin-top:1px;}
  .resp-btn.selected{border-color:var(--green-lt); background:linear-gradient(180deg,color-mix(in srgb,var(--green) 40%,var(--panel)),color-mix(in srgb,var(--green) 22%,var(--bg2))); box-shadow:0 0 0 1px var(--green-lt) inset;}
  .resp-btn.selected .check{display:flex;}
  .resp-btn .check{display:none; position:absolute; top:9px; right:11px; width:22px; height:22px; border-radius:50%; background:var(--green-lt); color:var(--on-accent); align-items:center; justify-content:center; font-weight:700; font-size:14px;}
  .resp-btn .valtag{margin-left:auto; margin-right:26px; font-family:var(--serif); font-weight:700; color:var(--green-lt); font-size:14px;}
  .hint{font-size:11.5px; color:var(--muted); font-style:italic; margin:8px 0 0;}

  .stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; display:flex; align-items:center; gap:12px;}
  .stat .sico{font-size:26px;}
  .stat .sv{font-family:var(--serif); font-weight:700; font-size:28px; color:var(--ink);}
  .stat .sl{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}
  .stat .adj{margin-left:auto; display:flex; flex-direction:column; gap:3px;}
  .adj button{width:28px; height:22px; border-radius:5px; cursor:pointer; font-size:14px; font-weight:700; background:var(--panel2); border:1px solid var(--border-lt); color:var(--ink2); line-height:1;}
  .adj button:hover{border-color:var(--gold); color:var(--gold);}
  .stat.warn .sv{color:var(--danger-ink);}

  .turn-banner{display:flex; align-items:center; gap:10px; padding:11px 16px; margin-bottom:14px; border-radius:var(--radius-sm); font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.5px; border:1px solid; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
  .turn-banner .tb-ico{font-size:22px;}
  .turn-banner .tb-sub{font-family:var(--font); font-size:12.5px; font-weight:400; letter-spacing:.3px; margin-left:auto; opacity:.85;}
  .turn-banner.garruk{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 50%,transparent),color-mix(in srgb,var(--green) 15%,transparent)); border-color:var(--green-lt); color:var(--ink);}
  .turn-banner.player{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 35%,transparent),color-mix(in srgb,var(--gold) 10%,transparent)); border-color:var(--gold); color:var(--ink);}
  .confirm-msg{font-size:14px; color:var(--ink); line-height:1.6; padding:4px 2px 8px;}
  .endturn{margin-top:14px; padding:14px 28px; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--serif); font-size:16px; font-weight:700; letter-spacing:1px; color:var(--on-accent); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 85%,#fff),color-mix(in srgb,var(--gold) 80%,#000)); border:1px solid color-mix(in srgb,var(--gold) 60%,#fff); box-shadow:0 4px 14px color-mix(in srgb,var(--gold) 35%,transparent); transition:all .15s ease; align-self:flex-end; float:right; clear:both;}
  .endturn:hover{filter:brightness(1.08); transform:translateY(-1px);}
  .endturn.garruk{background:linear-gradient(180deg,var(--green-lt),var(--green)); border-color:color-mix(in srgb,var(--green-lt) 70%,#fff); color:var(--on-accent);}

  .action-steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
  .action-step{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 20%,transparent); border:1px solid var(--border); transition:all .15s ease;}
  .action-step:hover{border-color:var(--green-lt); background:color-mix(in srgb,var(--green) 15%,transparent);}
  .step-num{flex:0 0 28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:13px; font-weight:700;}
  .step-content{display:flex; flex-direction:column; gap:3px;}
  .step-content strong{font-size:13.5px; color:var(--ink);}
  .step-detail{font-size:12px; color:var(--ink2); line-height:1.4;}

  .overlay{position:fixed; inset:0; background:rgba(5,4,2,.86); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .overlay.show{display:flex; animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .modal{max-width:460px; text-align:center; padding:34px 30px; border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--bg)); border:1px solid var(--gold-dim); box-shadow:0 20px 60px rgba(0,0,0,.7);}
  .modal:empty{display:none;}
  .modal h2{font-family:var(--serif); font-size:32px; color:var(--gold); margin-bottom:10px;}
  .modal.lose h2{color:var(--danger-ink);}
  .modal p{color:var(--ink2); font-size:14px; margin-bottom:22px; line-height:1.6;}
  .modal .big-ico{font-size:56px; margin-bottom:12px;}
  .modal button.cta{padding:12px 28px; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--serif); font-size:15px; font-weight:700; background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 85%,#fff),color-mix(in srgb,var(--gold) 80%,#000)); border:none; color:var(--on-accent);}
  .modal button.cta:hover{filter:brightness(1.08);}
  .modal button.cta.ghost{background:transparent; border:1px solid var(--border-lt); color:var(--ink2);}
  .modal button.cta.ghost:hover{border-color:var(--gold); color:var(--gold); filter:none;}
  .setup-field{margin:10px 0; text-align:left;}
  .setup-field label{font-size:12px; color:var(--ink2); display:block; margin-bottom:4px; letter-spacing:.5px;}
  .setup-field select{width:100%; padding:9px 11px; border-radius:var(--radius-sm); background:var(--bg2); border:1px solid var(--border-lt); color:var(--ink); font-family:var(--font); font-size:14px;}
  .diff-note{font-size:11.5px; color:var(--muted); margin-top:3px; font-style:italic;}
  .setup-modal{max-width:780px; width:100%;}
  .mode-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; text-align:left;}
  @media(max-width:620px){.mode-grid{grid-template-columns:1fr;}}
  .mode-option{position:relative; display:block; cursor:pointer;}
  .mode-option input{position:absolute; opacity:0; pointer-events:none;}
  .mode-card{height:100%; padding:14px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:linear-gradient(180deg,var(--panel2),var(--bg2)); transition:all .16s ease;}
  .mode-card:hover{border-color:var(--gold-dim); transform:translateY(-1px);}
  .mode-option input:checked + .mode-card{border-color:var(--green-lt); box-shadow:0 0 0 1px var(--green-lt) inset,0 0 18px color-mix(in srgb,var(--green) 25%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--green) 30%,var(--panel)),color-mix(in srgb,var(--green) 15%,var(--bg2)));}
  .mode-title{display:flex; align-items:center; gap:8px; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--gold); margin-bottom:5px;}
  .mode-desc{font-size:11.5px; line-height:1.45; color:var(--ink2);}
  .mode-tag{display:inline-block; margin-top:8px; padding:2px 7px; border-radius:999px; border:1px solid var(--border-lt); color:var(--muted); font-size:9px; letter-spacing:.8px; text-transform:uppercase;}
  .mode-status{margin:10px 0 0; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--border); background:color-mix(in srgb,var(--bg) 22%,transparent); color:var(--ink2); font-size:11.5px; line-height:1.45;}
  .card.synergy{background:linear-gradient(160deg,#49365f 0%,#2e203d 55%,#1b1324 100%); border-color:var(--arcane);}
  .card.horde{background:linear-gradient(160deg,#445139 0%,#283120 55%,#171d13 100%); border-color:#758765;}
  .card .c-effect{font-size:7.8px; color:#d8c4ef; text-align:center; line-height:1.05; min-height:17px; overflow:hidden;}
  .lock-note{display:block; margin-top:8px; padding:7px 9px; border-radius:6px; color:var(--on-danger); background:color-mix(in srgb,var(--blood) 22%,transparent); border:1px solid var(--blood); font-size:11.5px;}

  /* input modal */
  .input-modal{max-width:400px;}
  .input-modal h3{font-family:var(--serif); font-size:20px; color:var(--gold); margin-bottom:16px;}
  .num-row{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px;}
  .num-row button{width:44px; height:44px; border-radius:10px; font-size:22px; font-weight:700; cursor:pointer; background:var(--panel2); border:1px solid var(--border-lt); color:var(--gold); line-height:1;}
  .num-row button:hover{border-color:var(--gold);}
  .num-row input{width:96px; text-align:center; font-family:var(--serif); font-weight:700; font-size:32px; padding:6px; border-radius:10px; background:var(--bg2); border:1px solid var(--border-lt); color:var(--ink);}
  .num-row input::-webkit-outer-spin-button,.num-row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .num-row input{-moz-appearance:textfield;}
  .pick-row{display:block; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px; border-radius:var(--radius-sm); cursor:pointer; background:linear-gradient(180deg,color-mix(in srgb,var(--info) 35%,var(--panel)),color-mix(in srgb,var(--info) 15%,var(--bg2))); border:1px solid var(--info); color:var(--ink); font-family:var(--font); font-size:14px;}
  .pick-row:hover{border-color:var(--gold); transform:translateX(3px);}
  .input-actions{display:flex; gap:10px; justify-content:center;}
  .input-actions.hide-ok #inputOk{display:none;}

  .log-modal{max-width:560px; width:100%; text-align:left; padding:0; border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--bg)); border:1px solid var(--gold-dim); box-shadow:0 20px 60px rgba(0,0,0,.7); overflow:hidden;}
  .log-modal .lm-h{display:flex; align-items:center; padding:13px 18px; border-bottom:1px solid var(--border); font-family:var(--serif); font-size:16px; color:var(--gold);}
  .log-modal .lm-h .x{margin-left:auto; cursor:pointer; color:var(--ink2); font-size:20px; background:none; border:none;}
  .log-modal .lm-h .x:hover{color:var(--gold);}
  .log{max-height:60vh; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:6px; font-size:12.5px;}
  .log-e{padding:7px 10px; border-radius:6px; background:var(--bg2); border-left:3px solid var(--border-lt);}
  .log-e.garruk{border-left-color:var(--green-lt);} .log-e.player{border-left-color:var(--gold);}
  .log-e.sys{border-left-color:var(--muted); color:var(--ink2); font-style:italic;}
  .log-e.big{border-left-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 18%,transparent);}
  .log-e .who{font-weight:700; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:1px;}
  .log-e.garruk .who{color:var(--green-lt);} .log-e.player .who{color:var(--gold);}
  .log::-webkit-scrollbar{width:8px;} .log::-webkit-scrollbar-thumb{background:var(--border-lt); border-radius:4px;}

  .footer{text-align:center; color:var(--muted); font-size:11px; margin-top:18px; line-height:1.7;}
  .footer b{color:var(--ink2);}

  /* ===== Phase Bar — shows current step in the player turn ===== */
  .phase-bar-wrap{margin-bottom:14px; padding:10px 14px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 25%,transparent); border:1px solid var(--border);}
  .phase-bar{display:flex; gap:3px; align-items:center;}
  .phase-bar .pb-step{
    flex:1; height:8px; border-radius:4px;
    background:var(--panel2); border:1px solid var(--border-lt);
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
    position:relative;
  }
  .phase-bar .pb-step.done{background:var(--green); border-color:var(--green-lt); opacity:.6;}
  .phase-bar .pb-step.active{background:var(--gold); border-color:color-mix(in srgb,var(--gold) 60%,#fff); box-shadow:0 0 8px color-mix(in srgb,var(--gold) 50%,transparent);}
  .phase-bar .pb-step.combat{border-color:var(--blood);}
  .phase-bar .pb-step.combat.active{background:var(--blood-lt); border-color:color-mix(in srgb,var(--blood-lt) 60%,#fff); box-shadow:0 0 8px color-mix(in srgb,var(--blood-lt) 50%,transparent);}
  .phase-bar .pb-step.combat.done{background:var(--blood); border-color:var(--blood-lt); opacity:.6;}
  .phase-bar .pb-divider{width:2px; height:14px; background:var(--border-lt); border-radius:1px; flex-shrink:0;}
  .phase-bar-label{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:7px; font-size:11px; color:var(--ink2); letter-spacing:.5px;
  }
  .phase-bar-label .pbl-phase{font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-size:10px;}
  .phase-bar-label .pbl-step{color:var(--ink); font-family:var(--serif);}
  .phase-bar-label .pbl-timing{font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid var(--border-lt);}
  .phase-bar-label .pbl-timing.instant{border-color:color-mix(in srgb,var(--green-lt) 50%,transparent); color:var(--green-lt); background:color-mix(in srgb,var(--green) 15%,transparent);}
  .phase-bar-label .pbl-timing.sorcery{border-color:var(--gold-dim); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent);}
  .phase-bar-label .pbl-timing.none{border-color:var(--border-lt); color:var(--muted);}


  /* ===== Contextual phase inputs ===== */
  .contextual-input-host{display:block;}
  .context-form{display:flex; flex-direction:column; gap:10px;}
  .context-summary{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:linear-gradient(180deg,rgba(80,60,24,.24),color-mix(in srgb,var(--bg) 32%,transparent));}
  .context-summary.danger-summary{border-color:var(--blood); background:linear-gradient(180deg,color-mix(in srgb,var(--blood) 28%,transparent),rgba(35,12,12,.3));}
  .context-summary.combat-summary{border-color:var(--gold-dim);}
  .context-summary.draw-summary{border-color:var(--info); background:linear-gradient(180deg,color-mix(in srgb,var(--info) 28%,transparent),color-mix(in srgb,var(--info) 10%,transparent));}
  .context-summary-icon{font-size:24px; flex:0 0 auto;}
  .context-summary div{display:flex; flex-direction:column; gap:2px;}
  .context-summary strong{font-family:var(--serif); font-size:14px; color:var(--ink);}
  .context-summary span:not(.context-summary-icon){font-size:11.5px; color:var(--ink2);}
  .context-field{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:color-mix(in srgb,var(--bg) 20%,transparent);}
  .context-field-copy{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .context-field-copy strong{font-size:13px; color:var(--ink);}
  .context-field-copy span{font-size:10.5px; color:var(--muted); line-height:1.35;}
  .inline-stepper{display:flex; align-items:center; flex:0 0 auto; border:1px solid var(--border-lt); border-radius:8px; overflow:hidden; background:var(--bg2);}
  .inline-stepper button{width:34px; height:34px; border:0; cursor:pointer; background:var(--panel2); color:var(--gold); font-size:18px; font-weight:700;}
  .inline-stepper button:hover{background:color-mix(in srgb,var(--gold) 15%,var(--panel));}
  .inline-stepper input{width:48px; height:34px; padding:0 3px; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); outline:none; text-align:center; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:17px; font-weight:700;}
  .inline-stepper input::-webkit-outer-spin-button,.inline-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .inline-stepper input{-moz-appearance:textfield;}
  .context-toggle{display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:color-mix(in srgb,var(--bg) 18%,transparent); cursor:pointer;}
  .context-toggle input{position:absolute; opacity:0; pointer-events:none;}
  .toggle-track{position:relative; width:40px; height:22px; border-radius:999px; background:var(--bg2); border:1px solid var(--border-lt); flex:0 0 auto; transition:.15s ease;}
  .toggle-track::after{content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:var(--muted); transition:.15s ease;}
  .context-toggle input:checked + .toggle-track{background:var(--green); border-color:var(--green-lt);}
  .context-toggle input:checked + .toggle-track::after{left:20px; background:#fff;}
  .context-toggle > span:last-child{display:flex; flex-direction:column;}
  .context-toggle strong{font-size:13px; color:var(--ink);}
  .context-toggle small{font-size:10.5px; color:var(--muted);}
  .context-section{display:flex; flex-direction:column; gap:9px; padding:12px; border:1px solid var(--border-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 14%,transparent);}
  .context-section.compact-section{border-style:dashed;}
  .context-section-title{font-family:var(--serif); font-size:13px; font-weight:700; color:var(--gold);}
  .outcome-choice{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
  .outcome-choice button{padding:9px 10px; border-radius:6px; cursor:pointer; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font-family:var(--font); font-size:11.5px;}
  .outcome-choice button:hover{border-color:var(--gold-dim); color:var(--gold);}
  .outcome-choice button.active{border-color:var(--green-lt); background:color-mix(in srgb,var(--green) 30%,transparent); color:var(--ink); box-shadow:0 0 0 1px var(--green) inset;}
  .casualty-field{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-radius:var(--radius-sm); border:1px dashed var(--info-lt); background:color-mix(in srgb,var(--info) 12%,transparent);}
  .casualty-field.has-selection{border-style:solid; border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 14%,transparent);}
  .casualty-field > div{display:flex; flex-direction:column; gap:2px;}
  .casualty-field strong{font-size:13px; color:var(--ink);}
  .casualty-field span{font-size:10.5px; color:var(--muted);}
  .casualty-count{flex:0 0 auto; padding:3px 8px; border-radius:999px; border:1px solid var(--border-lt); background:var(--bg2); color:var(--ink2)!important;}
  .casualty-field.has-selection .casualty-count{border-color:var(--blood); color:var(--on-danger)!important;}
  .card.casualty-selectable{cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;}
  .card.casualty-selectable:hover{transform:translateY(-3px); border-color:var(--gold);}
  .card.casualty-selected{opacity:.72; border-color:var(--blood-lt)!important; box-shadow:0 0 0 2px var(--blood-lt),0 5px 16px color-mix(in srgb,var(--blood-lt) 45%,transparent); transform:translateY(-3px);}
  .card .c-casualty{position:absolute; top:-8px; left:-8px; z-index:4; padding:2px 7px; border-radius:999px; background:var(--blood); border:1px solid var(--blood-lt); color:#fff; font-size:9px; font-weight:700; letter-spacing:.4px;}
  @media(max-width:560px){
    .context-field{align-items:flex-start;}
    .context-field-copy{padding-top:3px;}
    .context-summary{align-items:flex-start;}
    .outcome-choice{grid-template-columns:1fr;}
  }

/* ===== Streamlined single-workspace layout ===== */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
body{padding:12px 16px 28px;}
.wrap{max-width:1040px;}

header.app-bar{
  position:sticky; top:8px; z-index:30; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; flex-wrap:nowrap; min-height:58px; padding:10px 12px 10px 16px; margin-bottom:8px;
  background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(14px); border-color:var(--border-lt);
}
.app-bar .brand h1{font-size:20px; white-space:nowrap;}
.session-status{justify-self:center; display:flex; align-items:center; gap:8px; min-width:0; color:var(--ink2); font-size:12px; white-space:nowrap;}
.session-status #modePill{color:var(--gold); font-weight:700;}
.session-status #turnNum{font-family:var(--serif); color:var(--ink); font-size:14px;}
.session-status #phasePill.active{color:var(--green-lt);}
.status-divider{color:var(--border-lt);}
.header-actions{position:relative; display:flex; align-items:center; gap:6px; justify-self:end;}
.header-actions .btn-ghost{padding:7px 10px;}
.menu-trigger{min-width:72px;}

.player-hud{display:flex; justify-content:flex-end; margin:0 0 8px;}
.player-hud .stat-row{display:flex; gap:6px;}
.player-hud .stat{min-width:154px; padding:7px 8px 7px 10px; gap:8px; background:rgba(23,19,12,.82); box-shadow:0 3px 12px rgba(0,0,0,.25);}
.player-hud .stat .sico{font-size:18px;}
.player-hud .stat .sv{font-size:21px; line-height:1;}
.player-hud .stat .sl{font-size:8.5px;}
.player-hud .stat .adj{flex-direction:row; gap:3px;}
.player-hud .adj button{width:27px; height:27px;}

.board{margin-bottom:10px;}
.board-h{padding:8px 13px; font-size:14px;}
.board-h .atk-note{font-size:10.5px;}
.board-inner{grid-template-columns:178px minmax(0,1fr); gap:14px; min-height:0; padding:12px;}
.garruk-top{gap:10px; align-items:center;}
.portrait{flex-basis:66px; min-height:88px; cursor:pointer;}
.portrait:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.portrait .glyph{font-size:38px;}
.portrait .name{font-size:8.5px;}
.portrait::after{display:none;}
#portraitTooltip{display:none!important;}
.garruk-stats{gap:6px; min-width:0;}
.resource-line{display:flex; align-items:baseline; gap:6px;}
.loyalty-num{font-size:32px;}
.loyalty-lbl{font-size:9px; letter-spacing:1.2px;}
.loyalty-bar{height:7px;}
.enemy-tools{display:flex; align-items:center; gap:6px;}
.phase-tag{display:none;}
.phase-tag.enraged{display:inline-flex; padding:2px 7px; font-size:8px;}
.btn-quiet{padding:3px 0; border:0; background:transparent; color:var(--ink2); font:11px var(--font); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.btn-quiet:hover{color:var(--gold);}
.field-h{margin-bottom:8px;}
.field-h .lbl{font-size:9.5px;}
#addWolfBtn{padding:4px 8px; font-size:10.5px;}
.tokens{gap:9px; min-height:88px;}
.empty-field{padding:12px 4px; font-size:11px;}
.card{width:88px; height:112px; padding:0; display:block; cursor:default;}
.card-main{position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:5px; display:flex; flex-direction:column; overflow:hidden; border:0; border-radius:inherit; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;}
.card-main:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.card .c-info{position:absolute; left:5px; bottom:5px; z-index:4; width:20px; height:20px; padding:0; border:1px solid var(--border-lt); border-radius:50%; background:#15110b; color:var(--gold); font:700 11px var(--serif); cursor:pointer;}
.card .c-info:hover{border-color:var(--gold);}
.card:focus-visible{outline:none;}
.card .c-name{font-size:8.5px; gap:3px;}
.card .c-name span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card .c-art{margin:4px 0; font-size:34px;}
.card .c-pt{bottom:4px; right:5px; padding:0 6px; font-size:13px;}
.card .c-x,.card .c-remove{top:-7px; right:-7px; width:20px; height:20px; padding:0; font-size:12px; line-height:18px; font-family:var(--font);}

.grid{display:block;}
.action-panel{overflow:visible;}
.action-panel .panel-h{padding:9px 14px; font-size:15px; position:relative;}
.action-panel .panel-b{padding:12px 14px 14px;}
.phase-bar-wrap{margin-bottom:10px; padding:8px 10px;}
.phase-bar-label{margin-top:5px;}
.compact-declare{display:grid; grid-template-columns:auto 1fr; align-items:center; border-color:var(--border);}
.compact-declare .declare-h{height:100%; display:flex; align-items:center; padding:10px 12px; border:0; border-right:1px solid var(--border); white-space:nowrap;}
.compact-declare .declare-body{min-height:0; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.compact-declare .declare-flavor{margin:0; font:12px var(--font); color:var(--ink2);}
.compact-declare .declare-mech{display:flex; align-items:center; flex:0 0 auto;}
.detail-link{padding:5px 9px; border:1px solid var(--border-lt); border-radius:6px; background:var(--panel2); color:var(--gold); font:11px var(--font); cursor:pointer;}
.detail-link:hover{border-color:var(--gold);}
.combat-outlook{display:inline-block; padding:4px 8px; border-radius:6px; background:color-mix(in srgb,var(--blood) 20%,transparent); border:1px solid var(--blood); color:var(--on-danger); font-size:10.5px;}
.combat-outlook.clear{background:color-mix(in srgb,var(--green) 20%,transparent); border-color:var(--green); color:var(--green-lt);}
.lock-note{margin:0 0 0 6px; padding:4px 7px; font-size:10.5px;}

/* Keep the turn, action, and player-response controls visually aligned. */
.action-panel .panel-h{
  padding:10px 14px;
  font:700 14px/1.2 var(--serif);
  letter-spacing:.5px;
}
.action-panel .panel-h .ico{font-size:15px;}
.action-panel .declare-h,
.action-panel .resp-title{
  font:700 10px/1.2 var(--font);
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.action-panel .declare-h{padding:7px 12px;}
.action-panel .resp-title{
  margin:14px 0 7px;
  padding:0 2px 6px;
  color:var(--ink2);
  border-bottom:1px solid var(--border);
}
.action-panel .resp-btn,
.action-panel .quick-end,
.action-panel .endturn{
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
}
.action-panel .resp-btn{padding:11px 13px;}
.action-panel .resp-btn small{font-size:10.5px; line-height:1.35;}
.action-panel .resp-btn .valtag{font-family:var(--font); font-size:13px;}
.action-panel .quick-end{padding:11px 16px;}
.action-panel .endturn{padding:12px 20px;}
.context-form{gap:7px;}
.context-summary{padding:9px 11px; gap:9px;}
.context-summary-icon{font-size:18px;}
.context-summary strong{font-size:12.5px;}
.context-summary span:not(.context-summary-icon){font-size:10px;}
.context-field{padding:8px 10px;}
.context-field-copy strong{font-size:12px;}
.context-field-copy span{font-size:9.5px;}
.context-field-incomingDamage .context-field-copy span{display:block; color:var(--ink2);}
.context-toggle{padding:8px 10px;}
.context-toggle small{display:none;}
.context-section{gap:7px; padding:9px;}
.casualty-field{padding:8px 10px;}
.casualty-field strong{font-size:12px;}
.casualty-field > div > span{display:none;}
.context-disclosure{border:1px dashed var(--border-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 12%,transparent);}
.context-disclosure summary{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; color:var(--ink2); font-size:11.5px; cursor:pointer; list-style:none;}
.context-disclosure summary::-webkit-details-marker{display:none;}
.context-disclosure summary::before{content:"+"; margin-right:7px; color:var(--gold); font-weight:700;}
.context-disclosure[open] summary::before{content:"−";}
.context-disclosure summary span{margin-right:auto;}
.context-disclosure summary small{padding:1px 6px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.6px;}
.context-disclosure-body{display:flex; flex-direction:column; gap:7px; padding:0 8px 8px;}
.turn-actions{position:sticky; bottom:10px; z-index:12; display:flex; gap:8px; margin-top:10px;}
.turn-actions .endturn{position:static; flex:1; width:auto; float:none; margin:0; padding:12px 20px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.55),0 4px 14px rgba(198,154,63,.25);}
.quick-end{flex:0 0 auto; padding:11px 16px; border:1px solid var(--border-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 96%,transparent); color:var(--ink2); font:700 12px var(--font); cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.45);}
.quick-end:hover{border-color:var(--gold); color:var(--gold);}
.quick-end[hidden]{display:none;}
.footer{display:none;}

.info-modal{width:min(560px,100%); max-height:min(78vh,720px); overflow:hidden; border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--bg)); border:1px solid var(--gold-dim); box-shadow:0 20px 60px rgba(0,0,0,.7);}
.info-modal-h{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border);}
.info-modal-h h2{font:700 18px var(--serif); color:var(--gold);}
.info-modal-h .x{margin-left:auto; border:0; background:transparent; color:var(--ink2); font-size:22px; cursor:pointer;}
.info-modal-h .x:hover{color:var(--gold);}
.info-modal-body{max-height:calc(min(78vh,720px) - 52px); overflow:auto; padding:16px; color:var(--ink2); font-size:12.5px;}
.info-modal-body .tt-header{display:none;}
.token-detail-hero{display:flex; align-items:center; justify-content:space-between; padding:16px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--border);}
.token-detail-hero span{font-size:58px;}
.token-detail-hero strong{font:700 32px var(--serif); color:var(--ink);}
.token-detail-type{margin:12px 0 8px; color:var(--gold); font-size:11px; letter-spacing:1px; text-transform:uppercase;}
.token-detail p{color:var(--ink); line-height:1.5;}
.token-detail-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.token-detail-tags span,.token-detail-note{padding:4px 8px; border:1px solid var(--border-lt); border-radius:999px; color:var(--gold); font-size:10px;}
.token-detail-note{display:inline-block; margin-top:12px; color:var(--ink2);}

#logOverlay{justify-content:flex-end; padding:0;}
#logOverlay .log-modal{width:min(440px,100%); height:100%; max-width:none; border-width:0 0 0 1px; border-radius:0;}
#logOverlay .log{max-height:calc(100vh - 52px);}
.setup-modal{max-width:620px; padding:24px;}
.setup-modal .big-ico{display:none;}
.setup-modal h2{font-size:26px;}
.setup-modal p{margin-bottom:12px; font-size:12px;}
.mode-grid{margin:12px 0 16px; gap:8px;}
.mode-card{padding:11px 12px;}
.mode-title{margin-bottom:3px;}
.mode-desc{font-size:10.5px;}
.mode-tag{margin-top:6px;}

@media(max-width:760px){
  body{padding:7px 7px 24px;}
  header.app-bar{top:4px; grid-template-columns:1fr auto; gap:8px; min-height:52px; padding:8px 9px;}
  .app-bar .brand{display:none;}
  .session-status{justify-self:start; gap:5px; overflow:hidden; font-size:10.5px;}
  .session-status #modePill{max-width:110px; overflow:hidden; text-overflow:ellipsis;}
  .header-actions .btn-ghost{font-size:10.5px; padding:6px 7px;}
  .menu-trigger{min-width:58px;}
  .player-hud{justify-content:stretch;}
  .player-hud .stat-row{width:100%;}
  .player-hud .stat{min-width:0; flex:1; padding:6px 7px;}
  .player-hud .stat .sico{display:none;}
  .player-hud .stat .adj{margin-left:auto;}
  .board-inner{grid-template-columns:1fr; gap:10px; padding:10px;}
  .garruk-col{max-width:none;}
  .garruk-top{max-width:230px;}
  .board-h{padding:7px 10px;}
  .board-h .atk-note{max-width:55%; text-align:right; line-height:1.2;}
  .tokens{min-height:0; padding:3px 4px 1px;}
  .compact-declare{grid-template-columns:1fr;}
  .compact-declare .declare-h{display:none;}
  .compact-declare .declare-body{padding:8px 10px;}
  .phase-bar-label .pbl-phase{display:none;}
  .action-panel .panel-b{padding:10px;}
  .context-field-copy span{display:none;}
  .turn-actions{bottom:6px;}
  .quick-end{padding:10px 11px; font-size:10.5px;}
  #infoOverlay{align-items:flex-end; padding:0;}
  .info-modal{width:100%; max-height:82vh; border-radius:14px 14px 0 0; border-width:1px 0 0;}
  .info-modal-body{max-height:calc(82vh - 52px);}
  .overlay{padding:10px;}
  .setup-modal{max-height:94vh; overflow:auto; padding:19px 14px;}
}

@media(max-width:430px){
  .session-status .status-divider:first-of-type,.session-status #modePill{display:none;}
  .player-hud .stat .sl{font-size:8px;}
  .player-hud .stat .sv{font-size:19px;}
  .card{width:82px;}
  .context-field{align-items:center;}
  .context-field-copy{padding-top:0;}
}

/* Ordered enemy-turn resolution */
.resolution-step{position:relative; border:1px solid var(--border); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 14%,transparent); overflow:hidden;}
.resolution-step-h{display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); color:var(--ink); font:700 12px var(--serif);}
.resolution-step-h span{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--panel2); border:1px solid var(--border-lt); color:var(--gold); font:700 11px var(--font);}
.resolution-step-b{display:flex; flex-direction:column; gap:7px; padding:8px;}
.resolution-step.enemy-effect .resolution-step-h{color:var(--on-danger);}
.resolution-step.precombat-removal{border-color:var(--info);}
.resolution-step.precombat-removal .resolution-step-h span{background:color-mix(in srgb,var(--info) 45%,#000); border-color:var(--info-lt); color:var(--info-ink);}
.resolution-step.enemy-combat{border-color:var(--blood);}
.resolution-step.enemy-combat .resolution-step-h span{background:color-mix(in srgb,var(--blood) 30%,transparent); border-color:var(--blood); color:var(--on-danger);}
.resolution-step .context-section{padding:0; border:0; background:transparent;}
.resolution-note{padding:0 3px; color:var(--ink2); font-size:10.5px;}

/* Commander Rival (voltron mode) */
.commander-status{display:flex; flex-wrap:wrap; gap:4px; align-items:center;}
.commander-status span{padding:2px 6px; border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); border-radius:999px; background:color-mix(in srgb,var(--cmdr) 20%,transparent); color:var(--cmdr-ink); font-size:8.5px; letter-spacing:.35px; white-space:nowrap;}
.card.commander{background:linear-gradient(160deg,#7a351b 0%,#4c2110 52%,#251107 100%); border-color:var(--cmdr); box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--gold) 24%,transparent) inset;}
.card.commander .c-pt{background:linear-gradient(180deg,#42200d,#1c0b04); border-color:var(--cmdr);}
.card.commander .c-name .mana{color:var(--cmdr-ink);}
.mode-card.commander-mode{background:linear-gradient(180deg,color-mix(in srgb,var(--cmdr) 22%,var(--panel)),color-mix(in srgb,var(--cmdr) 8%,var(--bg2))); border-color:color-mix(in srgb,var(--cmdr) 55%,var(--border));}
.mode-option input:checked + .mode-card.commander-mode{border-color:var(--cmdr); box-shadow:0 0 0 1px var(--cmdr) inset,0 0 18px color-mix(in srgb,var(--cmdr) 20%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--cmdr) 32%,var(--panel)),color-mix(in srgb,var(--cmdr) 14%,var(--bg2)));}
@media(max-width:760px){.commander-status{max-width:210px;}.commander-status span{font-size:8px;}}

.card.voltron-creature{background:linear-gradient(160deg,#4a3d1e 0%,#2e2510 55%,#1a150a 100%); border-color:#8a7a42;}
.card.voltron-creature .c-pt{background:linear-gradient(180deg,#2e2510,#151008); border-color:#8a7a42;}

/* Commander life stat — mirrors the 21 commander-damage loss condition */
.stat.commander-life-stat[hidden]{display:none;}
.commander-life-stat .sv{color:var(--cmdr-ink);}
.commander-life-stat.warn .sv{color:var(--danger-ink);}
@media(max-width:760px){.commander-life-stat{order:1;}}

/* Tapped / attacking indicator on enemy cards */
.card.tapped{transform:rotate(6deg); border-color:var(--blood-lt); box-shadow:0 4px 12px color-mix(in srgb,var(--blood-lt) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--blood-lt) 20%,transparent);}
.card .c-atk{position:absolute; top:-8px; left:-8px; z-index:4; font-size:14px; filter:drop-shadow(0 1px 2px #000);}

/* Attacker list in combat resolution */
.attacker-list{display:flex; flex-wrap:wrap; gap:5px; padding:8px 0;}
.atk-tag{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; border:1px solid var(--blood); background:color-mix(in srgb,var(--blood) 18%,transparent); color:var(--on-danger); font-size:10.5px; white-space:nowrap;}

/* ===== SETUP — Two-column split ===== */
.setup-sub{color:var(--ink2); font-size:13px; margin-bottom:20px;}
.setup-columns{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;}
@media(max-width:620px){.setup-columns{grid-template-columns:1fr; gap:12px;}}
.setup-col{padding:20px; border-radius:var(--radius); border:1px solid var(--border-lt); display:flex; flex-direction:column; gap:14px;}
.setup-col-commander{background:linear-gradient(180deg,color-mix(in srgb,var(--cmdr) 14%,var(--panel)),var(--bg2)); border-color:color-mix(in srgb,var(--cmdr) 55%,var(--border));}
.setup-col-adventure{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 18%,var(--panel)),color-mix(in srgb,var(--green) 8%,var(--bg2))); border-color:color-mix(in srgb,var(--green-lt) 40%,transparent);}
.setup-col-h{font-family:var(--serif); font-size:18px; letter-spacing:.3px; margin:0;}
.setup-col-commander .setup-col-h{color:var(--cmdr);}
.setup-col-adventure .setup-col-h{color:var(--green-lt);}
.setup-col-desc{font-size:12.5px; color:var(--ink2); margin:0; line-height:1.5;}
.setup-col-cta{padding:12px 24px; border-radius:var(--radius-sm); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; text-align:center; margin-top:auto; width:100%;}

.opponent-count{display:flex; flex-direction:column; gap:6px;}
.opponent-count label{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink2); display:block;}
.count-row{display:flex; gap:8px; justify-content:center;}
.count-btn{width:44px; height:44px; border-radius:var(--radius-sm); border:2px solid var(--border-lt); background:var(--panel2); color:var(--ink); font-family:var(--serif); font-size:20px; font-weight:700; cursor:pointer; transition:all .15s;}
.count-btn:hover{border-color:var(--gold-dim); color:var(--gold);}
.count-btn.active{border-color:var(--cmdr); background:color-mix(in srgb,var(--cmdr) 35%,transparent); color:var(--cmdr-ink); box-shadow:0 0 12px color-mix(in srgb,var(--cmdr) 20%,transparent);}
.commander-cta{background:linear-gradient(180deg,color-mix(in srgb,var(--cmdr) 50%,var(--bg)),color-mix(in srgb,var(--cmdr) 30%,var(--bg))); border:1px solid var(--cmdr); color:var(--cmdr-ink);}
.commander-cta:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--cmdr) 62%,var(--bg)),color-mix(in srgb,var(--cmdr) 38%,var(--bg))); box-shadow:0 4px 16px color-mix(in srgb,var(--cmdr) 30%,transparent);}
.adventure-cta{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 75%,var(--bg)),color-mix(in srgb,var(--green) 45%,var(--bg))); border:1px solid var(--green-lt); color:color-mix(in srgb,var(--green-lt) 35%,#fff);}
.adventure-cta:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 90%,var(--bg)),color-mix(in srgb,var(--green) 55%,var(--bg))); box-shadow:0 4px 16px color-mix(in srgb,var(--green-lt) 25%,transparent);}

/* Adventure select (secondary screen) */
.setup-back-btn{background:none; border:none; color:var(--ink2); font-family:var(--font); font-size:13px; cursor:pointer; padding:4px 0; margin-bottom:12px; transition:color .12s;}
.setup-back-btn:hover{color:var(--gold);}
.adventure-select-h{font-family:var(--serif); font-size:22px; color:var(--green-lt); margin-bottom:4px;}

/* Theme picker */
.theme-picker{margin-top:20px; text-align:center;}
.theme-picker label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:8px;}
/* Each .theme-btn carries data-theme="…", so the theme blocks above also style the button
   itself — every option previews its own colors. */
.theme-btns{display:flex; justify-content:center; gap:8px;}
.theme-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font-family:var(--font); font-size:12px; cursor:pointer; transition:all .15s;}
.theme-btn:hover{border-color:var(--gold-dim); color:var(--ink);}
.theme-btn.active{border-color:var(--gold); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent); box-shadow:0 0 8px color-mix(in srgb,var(--gold) 15%,transparent);}
.theme-swatch{width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.2);}
.theme-swatch-classic{background:linear-gradient(135deg,#d9b45a,#3a2f1a);}
.theme-swatch-light{background:linear-gradient(135deg,#ffffff,#d8cfbf);}
.theme-swatch-dark{background:linear-gradient(135deg,#8ab4f8,#15181d);}
.theme-swatch-purple{background:linear-gradient(135deg,#c9a2ff,#08050c);}

/* ===== COMMANDER BATTLE — Consolidated Life Line ===== */
.commander-life-hud{display:flex; align-items:center; gap:6px; padding:6px 16px; margin-bottom:8px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--bg) 95%,transparent)); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; flex-wrap:nowrap; overflow-x:auto;}
.life-pip{display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:999px; border:1px solid var(--border-lt); background:var(--panel2); white-space:nowrap; font-family:var(--font);}
.life-pip-btn{cursor:pointer; transition:all .12s;}
.life-pip-btn:hover{border-color:var(--gold-dim); background:color-mix(in srgb,var(--gold) 12%,transparent);}
.life-pip.player-pip{border-color:var(--gold-dim); background:color-mix(in srgb,var(--gold) 10%,transparent);}
.life-pip.active-opp{box-shadow:0 0 6px rgba(255,255,255,.15); border-width:2px;}
.life-pip.dead{opacity:.4; text-decoration:line-through;}
.life-divider{color:var(--muted); font-size:10px; margin:0 2px;}
.life-ico{font-size:13px;}
.life-val{font-family:var(--serif); font-weight:700; font-size:14px; color:var(--ink);}
.life-val.warn{color:var(--danger-ink);}
.life-cmdr-dmg{font-size:9px; color:var(--cmdr-ink); margin-left:1px;}

/* ===== COMMANDER BATTLE — Fixed Confirm Bar ===== */
.cmd-confirm-bar{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0; margin-top:8px; position:sticky; bottom:0; z-index:20; background:linear-gradient(180deg,transparent,var(--bg) 35%);}
.cmd-confirm-btn{padding:12px 28px; border-radius:var(--radius-sm); border:1px solid var(--gold-dim); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,var(--panel)),var(--bg2)); color:var(--gold); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; min-width:240px; text-align:center;}
.cmd-confirm-btn:hover{border-color:var(--gold); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 18%,var(--panel)),color-mix(in srgb,var(--gold) 8%,var(--bg2))); box-shadow:0 4px 12px color-mix(in srgb,var(--gold) 15%,transparent);}
.cmd-confirm-btn.garruk{border-color:var(--green); background:linear-gradient(180deg,color-mix(in srgb,var(--green) 18%,var(--panel)),color-mix(in srgb,var(--green) 8%,var(--bg2))); color:var(--green-lt);}
.cmd-confirm-btn.garruk:hover{border-color:var(--green-lt); box-shadow:0 4px 12px color-mix(in srgb,var(--green-lt) 15%,transparent);}
.cmd-end-turn-btn{min-width:0; padding:12px 18px; background:transparent !important; border-color:var(--border-lt) !important; color:var(--ink2) !important; font-weight:500;}
.cmd-end-turn-btn:hover{border-color:var(--blood-lt) !important; color:var(--danger-ink) !important; background:linear-gradient(180deg,color-mix(in srgb,var(--blood) 30%,var(--panel)),color-mix(in srgb,var(--blood) 15%,var(--bg2))) !important; box-shadow:0 4px 12px color-mix(in srgb,var(--blood-lt) 15%,transparent) !important;}

/* Creature kill selection */
.kill-select{display:flex; flex-wrap:wrap; gap:6px;}
.kill-btn{padding:5px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); font-size:11.5px; cursor:pointer; transition:all .12s; display:inline-flex; align-items:center; gap:4px;}
.kill-btn:hover{border-color:var(--blood); color:var(--danger-ink);}
.kill-btn.selected{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 30%,transparent); color:var(--on-danger); box-shadow:0 0 0 1px var(--blood-lt) inset;}
.kill-btn.is-tapped{border-color:color-mix(in srgb,var(--blood-lt) 40%,transparent); background:color-mix(in srgb,var(--blood) 10%,transparent); opacity:.85;}
.kill-btn.is-tapped .tapped-label{font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--danger-ink); margin-left:3px;}
.kill-btn-status{font-size:10px; opacity:.6;}
.tapped-note{font-size:11px; color:var(--danger-ink); margin-bottom:6px; font-style:italic;}
.kill-owner-group{margin-bottom:10px;}
.kill-owner-group:last-child{margin-bottom:0;}
.kill-owner-label{font-size:11px; font-weight:600; color:var(--ink); padding:3px 0 4px 8px; border-left:2px solid var(--border-lt); margin-bottom:5px;}
.combat-opp-section{padding:8px 10px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 10%,transparent); margin-bottom:8px;}

/* Tapped label on board cards */
.c-tapped-label{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--danger-ink); background:rgba(0,0,0,.7); padding:1px 5px; border-radius:3px; white-space:nowrap;}

/* Card keywords and effect text (commander board) */
.c-kw{font-size:8.5px; color:var(--gold); text-align:center; letter-spacing:.3px; line-height:1.1; min-height:0;}
.c-effect{font-size:8px; color:var(--ink2); text-align:center; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding:0 2px;}

/* Commander Last Turn Section styles are in the cmd-last-turn block below */

/* Life name in hud */
.life-name{color:var(--ink2); font-size:10.5px; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.life-creatures{font-size:10px; color:var(--muted); margin-left:2px;}
.life-adj{background:none; border:none; color:var(--ink2); cursor:pointer; font-size:13px; padding:0 3px; line-height:1; transition:color .12s;}
.life-adj:hover{color:var(--gold);}
.player-card{background:color-mix(in srgb,var(--gold) 8%,transparent) !important;}

/* ===== COMMANDER BATTLE — Board views ===== */
.view-controls{margin-left:auto; display:flex; align-items:center; gap:6px;}
.view-btn{padding:4px 10px !important; font-size:14px !important;}
.view-counter{font-size:11px; color:var(--ink2);}

.commander-board-inner{grid-template-columns:200px 1fr;}
.commander-board-stats{display:flex; flex-direction:column; gap:6px;}
.cbs-item{display:flex; justify-content:space-between; align-items:center; padding:4px 8px; border-radius:4px; background:color-mix(in srgb,var(--bg) 20%,transparent); border:1px solid var(--border); font-size:11.5px;}
.cbs-label{color:var(--ink2);}
.cbs-val{color:var(--gold); font-weight:600;}
.cbs-zone-btn,.life-graveyard{color:var(--gold); font:inherit; font-weight:600;}
.cbs-zone-btn{padding:1px 5px; border:1px solid var(--border-lt); border-radius:4px; background:color-mix(in srgb,var(--bg) 18%,transparent); cursor:pointer;}
.cbs-zone-btn:hover,.life-graveyard:hover,.life-graveyard:focus{border-color:var(--gold); color:var(--gold-lt); outline:none;}
.life-graveyard{display:inline-block; border-bottom:1px dashed var(--border-lt); cursor:pointer;}
.graveyard-modal{width:min(680px,100%); max-width:680px; max-height:min(82vh,720px); padding:22px; text-align:left; overflow:auto;}
.graveyard-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:12px;}
.graveyard-modal-head>div{display:flex; align-items:center; gap:10px;}.graveyard-modal .big-ico{font-size:32px; margin:0;}.graveyard-modal h2{font-size:24px; margin:0;}
.graveyard-close{border:0; background:transparent; color:var(--ink2); font-size:28px; cursor:pointer; line-height:1;}.graveyard-close:hover{color:var(--gold);}
.graveyard-summary{margin:12px 0 10px!important; color:var(--ink2);}.graveyard-card-list{list-style:none; display:grid; gap:7px; padding:0; margin:0 0 14px;}
.graveyard-card{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 20%,transparent);}.graveyard-card.virtual{border-style:dashed;}
.graveyard-card-icon{font-size:22px; line-height:1.1;}.graveyard-card-info{display:flex; flex-direction:column; gap:2px; min-width:0;}.graveyard-card-info strong{color:var(--ink);}.graveyard-card-info span,.graveyard-card-info small{color:var(--ink2); font-size:11px;}.graveyard-card-info small{color:var(--muted);}
.graveyard-empty,.graveyard-untracked{padding:10px; border-radius:var(--radius-sm); color:var(--muted); background:color-mix(in srgb,var(--bg) 18%,transparent);}.graveyard-untracked{margin:0 0 14px; border:1px dashed var(--border-lt); font-size:12px;}
.graveyard-card.selectable{border-color:var(--arcane); cursor:pointer;}.graveyard-card.selectable:hover{border-color:var(--arcane-lt); background:color-mix(in srgb,var(--arcane) 16%,transparent);}.graveyard-card.selected{border-color:var(--gold-dim); box-shadow:0 0 0 1px var(--gold-dim) inset; background:color-mix(in srgb,var(--gold) 10%,transparent);}
.graveyard-card-select{margin-left:auto; align-self:center; flex:0 0 auto; padding:5px 7px; border:1px solid var(--arcane); border-radius:5px; background:color-mix(in srgb,var(--arcane) 16%,transparent); color:var(--arcane-ink); font:10px var(--font); cursor:pointer;}.graveyard-card-select:hover{border-color:#b796dd; color:#fff;}.graveyard-card.selected .graveyard-card-select{border-color:var(--gold-dim); color:var(--gold);}
.graveyard-card-actions{margin:0 0 14px; padding:10px; border:1px solid var(--arcane); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--arcane) 10%,transparent);}.graveyard-card-actions p{margin:0 0 8px!important; color:var(--ink2); font-size:11px; line-height:1.4;}.graveyard-card-actions p strong{color:var(--ink);}.graveyard-card-actions>div{display:flex; flex-wrap:wrap; gap:7px;}.graveyard-card-actions .target-btn{font-size:10.5px;}.graveyard-exile-action{border-color:var(--arcane)!important; color:var(--arcane-ink)!important;}.graveyard-resurrect-action{border-color:var(--green-lt)!important; color:#d6efd0!important;}.graveyard-card-actions .target-btn:disabled{opacity:.45; cursor:not-allowed;}
.cbs-adj{display:flex; align-items:center; gap:5px;}
.cbs-btn{width:22px; height:22px; border-radius:50%; border:1px solid var(--border-lt); background:transparent; color:var(--ink2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; padding:0; line-height:1;}
.cbs-btn:hover{border-color:var(--gold-dim); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent);}
.cbs-val.warn{color:var(--danger-ink);}

.last-actions{margin-top:12px; padding-top:10px; border-top:1px solid var(--border);}
.la-title{font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:6px;}
.la-item{font-size:11.5px; color:var(--ink2); margin-bottom:4px; padding:3px 0;}

/* ===== Commander Last Turn Section ===== */
.cmd-last-turn{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; padding:12px 16px; box-shadow:var(--shadow);}
.lt-header{display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.lt-ico{font-size:16px;}
.lt-title{font-family:var(--serif); font-size:14px; color:var(--gold); font-weight:600;}
.lt-turn{margin-left:auto; font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.lt-steps{display:flex; flex-direction:column; gap:4px;}
.lt-step{font-size:12px; color:var(--ink2); padding:4px 8px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 15%,transparent); border:1px solid transparent; text-align:left; width:100%; cursor:default; font-family:var(--font);}
.lt-step strong{color:var(--ink); margin-right:6px;}
.lt-step span{color:var(--muted);}
.lt-step.lt-counterable{cursor:pointer; border-color:var(--border-lt); transition:all .12s;}
.lt-step.lt-counterable:hover{border-color:var(--gold-dim); background:color-mix(in srgb,var(--gold) 8%,transparent);}
.lt-step.lt-countered{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 20%,transparent); text-decoration:line-through; opacity:.7;}
.lt-step.lt-countered strong{color:var(--danger-ink);}
.lt-step.lt-countered .lt-counter-hint{display:none;}
.lt-counter-hint{display:inline-block; margin-left:8px; font-size:10px; color:var(--gold-dim); font-style:italic; text-decoration:none;}
.la-item strong{color:var(--ink); display:block; font-size:11px;}


/* CPU turn summary */
.cpu-turn-summary{display:flex; flex-direction:column; gap:10px;}
.cts-header{font-family:var(--serif); font-size:14px; color:var(--gold); padding-bottom:8px; border-bottom:1px solid var(--border);}
.cts-opponent{padding:10px; border-left:3px solid var(--border-lt); background:color-mix(in srgb,var(--bg) 15%,transparent); border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.cts-name{font-family:var(--serif); font-size:13px; color:var(--ink); margin-bottom:6px;}
.cts-actions{display:flex; flex-direction:column; gap:3px;}
.cts-action{font-size:11.5px; color:var(--ink2);}
.cts-action span{color:var(--ink);}
.cts-attack{margin-top:6px; font-size:11.5px; color:var(--danger-ink); font-weight:600;}

/* Commander player form */
.commander-form .context-section{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border);}
.commander-form .context-section:last-child{border:0; margin:0; padding:0;}
.commander-form .context-section-title{font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); margin-bottom:10px;}
.commander-attack-block{padding:10px; border-left:3px solid var(--border-lt); background:color-mix(in srgb,var(--bg) 12%,transparent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-bottom:10px;}
.cab-header{font-family:var(--serif); font-size:13px; color:var(--danger-ink); margin-bottom:6px;}
.cab-attackers{font-size:11px; color:var(--ink2); margin-bottom:8px;}
.cab-inputs{display:flex; flex-direction:column; gap:6px;}
.cab-inputs .inline-stepper{display:flex; align-items:center; gap:6px; font-size:12px;}
.cab-inputs .inline-stepper label{flex:1; color:var(--ink2); font-size:11px;}

.commander-player-actions{display:flex; flex-direction:column; gap:10px;}
.commander-player-actions .inline-stepper{display:flex; align-items:center; gap:6px; font-size:12px; border:none; background:none; overflow:visible;}
.commander-player-actions .inline-stepper label{min-width:120px; color:var(--ink2); font-size:11.5px; flex:1;}
.commander-player-actions .inline-stepper button{width:22px; height:22px; border-radius:50%; border:1px solid var(--border-lt); background:transparent; color:var(--ink2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; padding:0; line-height:1;}
.commander-player-actions .inline-stepper button:hover{border-color:var(--gold-dim); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent);}
.commander-player-actions .inline-stepper input{width:36px; height:22px; padding:0; border:1px solid var(--border); border-radius:4px; text-align:center; background:var(--bg2); color:var(--gold); font-family:var(--serif); font-size:13px; font-weight:700;}
.attack-target-section{display:flex; flex-direction:column; gap:6px;}
.attack-target-section label{font-size:11px; color:var(--ink2);}

/* Player action instantiation */
.player-effect-section{gap:8px!important; background:rgba(70,47,91,.13)!important;}
.player-action-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
.player-action-grid label{display:flex; flex-direction:column; gap:4px; color:var(--ink2); font-size:10.5px;}
.player-action-grid select{min-width:0; padding:7px 8px; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg2); color:var(--ink); font:12px var(--font);}
.player-effect-help{font-size:10.5px; color:var(--muted); line-height:1.35;}
.player-effect-preview{padding:8px 10px; border:1px solid var(--arcane); border-radius:6px; background:color-mix(in srgb,var(--arcane) 16%,transparent); color:var(--arcane-ink); font-size:11.5px;}
.player-effect-error{padding:8px 10px; border:1px solid var(--blood); border-radius:6px; background:color-mix(in srgb,var(--blood) 18%,transparent); color:var(--on-danger); font-size:11.5px;}
.player-effect-targets{margin-top:0;}
.player-effect-choices{display:flex; flex-direction:column; gap:7px; font-size:11px; color:var(--ink2);}
.player-effect-owner{display:flex; flex-direction:column; gap:5px; padding:7px 8px; border-left:2px solid var(--arcane); background:color-mix(in srgb,var(--bg) 12%,transparent);}
.player-effect-owner small,.player-effect-manual{font-size:10.5px; color:var(--muted);}
.player-effect-manual{padding:7px 8px; border-left:2px solid var(--gold-dim); background:color-mix(in srgb,var(--gold) 8%,transparent);}
.player-effect-resolve{align-self:flex-start; border-color:var(--arcane); color:var(--arcane-ink);}
.player-effect-resolve:disabled{opacity:.45; cursor:not-allowed;}

/* Persistent Commander rules that are enforced by the CPU simulation. */
.battlefield-rules-panel{display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--info); border-radius:var(--radius-sm); background:linear-gradient(180deg,color-mix(in srgb,var(--info) 18%,transparent),rgba(16,22,28,.24));}
.battlefield-rules-heading{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:9px; border-bottom:1px solid color-mix(in srgb,var(--info) 45%,transparent);}
.battlefield-rules-heading>div{display:flex; align-items:center; gap:7px; color:var(--info-ink); font-family:var(--serif); font-size:14px;}
.battlefield-rules-heading small{max-width:255px; color:var(--muted); font-size:10px; line-height:1.3; text-align:right;}
.battlefield-rule-builder{display:flex; flex-direction:column; gap:8px;}
.player-action-grid input{min-width:0; padding:7px 8px; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg2); color:var(--ink); font:12px var(--font);}
.player-action-grid input:focus,.player-action-grid select:focus{outline:1px solid var(--gold); border-color:var(--gold-dim);}
.battlefield-rule-add{align-self:flex-start; border-color:var(--info-lt); color:var(--info-ink); background:color-mix(in srgb,var(--info) 16%,transparent);}
.battlefield-rule-add:hover{border-color:var(--info-ink); color:var(--ink);}
.battlefield-rule-active{display:flex; flex-direction:column; gap:6px;}
.battlefield-rule-active>span{font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--info-ink);}
.battlefield-rule-active ul{display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none;}
.battlefield-rule-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px; border-left:2px solid var(--info-lt); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:color-mix(in srgb,var(--bg) 18%,transparent);}
.battlefield-rule-item>div{display:flex; flex-direction:column; gap:2px; min-width:0;}
.battlefield-rule-item strong{color:var(--ink); font-size:11.5px;}
.battlefield-rule-item span{color:var(--ink2); font-size:10.5px; line-height:1.3;}
.battlefield-rule-remove{flex:0 0 auto; padding:4px 7px; border:1px solid var(--blood); border-radius:5px; background:color-mix(in srgb,var(--blood) 15%,transparent); color:var(--on-danger); font:10.5px var(--font); cursor:pointer;}
.battlefield-rule-remove:hover{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 32%,transparent);}
.battlefield-rule-empty{padding:7px 8px; color:var(--muted); font-size:10.5px; font-style:italic; background:color-mix(in srgb,var(--bg) 12%,transparent); border-radius:var(--radius-sm);}
@media(max-width:560px){.battlefield-rules-heading{flex-direction:column;}.battlefield-rules-heading small{max-width:none; text-align:left;}}
.target-buttons{display:flex; flex-wrap:wrap; gap:6px;}
.target-btn{padding:6px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); font-size:11.5px; cursor:pointer; transition:all .15s;}
.target-btn:hover{border-color:var(--gold-dim); color:var(--gold);}
.target-btn.active{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 25%,transparent); color:var(--on-danger);}
.target-btn.dead{opacity:.35; cursor:not-allowed; text-decoration:line-through;}

.board.defeated{opacity:.6; border-color:var(--blood) !important;}
@media(max-width:760px){.commander-board-inner{grid-template-columns:1fr;}}

/* ===== Combat Choice Popup ===== */
.combat-choice-body{text-align:center; padding:8px 0;}
.combat-choice-card{font-size:18px; margin-bottom:16px; color:var(--ink);}
.combat-choice-btns{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.combat-choice-btn{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 14px; border-radius:var(--radius-sm); border:2px solid var(--border-lt); background:var(--panel2); cursor:pointer; transition:all .15s ease; font-family:var(--font);}
.combat-choice-btn:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.4);}
.combat-choice-btn .choice-ico{font-size:28px;}
.combat-choice-btn .choice-label{font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink);}
.combat-choice-btn .choice-desc{font-size:11px; color:var(--muted); line-height:1.3;}
.combat-choice-btn.choice-blocked:hover{border-color:var(--green-lt); background:color-mix(in srgb,var(--green) 25%,transparent);}
.combat-choice-btn.choice-blocked:hover .choice-label{color:var(--green-lt);}
.combat-choice-btn.choice-dies:hover{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 25%,transparent);}
.combat-choice-btn.choice-dies:hover .choice-label{color:var(--danger-ink);}

/* Blocked creature card state */
.card.casualty-blocked{border-color:var(--green-lt)!important; box-shadow:0 0 0 2px var(--green-lt),0 5px 16px color-mix(in srgb,var(--green) 35%,transparent); transform:translateY(-3px);}
.card .c-blocked{position:absolute; top:-8px; left:-8px; z-index:4; padding:2px 7px; border-radius:999px; background:var(--green); border:1px solid var(--green-lt); color:#fff; font-size:9px; font-weight:700; letter-spacing:.4px;}

/* ===== Adventure Graveyard Button ===== */
.graveyard-btn{display:inline-flex; align-items:center; gap:4px;}
.graveyard-btn[hidden],.graveyard-btn span{display:inline-flex; align-items:center; justify-content:center; min-width:16px; padding:0 4px; border-radius:999px; background:var(--blood); color:#fff; font-size:10px; font-weight:700;}
.enemy-graveyard-viewer .graveyard-summary{color:var(--ink2); margin-bottom:12px; font-size:13px;}
.enemy-graveyard-viewer .graveyard-card-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
.enemy-graveyard-viewer .graveyard-card{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 20%,transparent);}
.enemy-graveyard-viewer .graveyard-card-icon{font-size:22px; line-height:1.1;}
.enemy-graveyard-viewer .graveyard-card-info{display:flex; flex-direction:column; gap:2px;}
.enemy-graveyard-viewer .graveyard-card-info strong{color:var(--ink);}
.enemy-graveyard-viewer .graveyard-card-info span{color:var(--ink2); font-size:11px;}
.enemy-graveyard-viewer .graveyard-card-info small{color:var(--muted); font-size:10px;}
.enemy-graveyard-viewer .graveyard-empty{padding:16px; text-align:center; color:var(--muted); font-style:italic;}

/* Kill button blocked state (Commander mode) */
.kill-btn.blocked-btn{border-color:var(--green-lt)!important; background:color-mix(in srgb,var(--green) 25%,transparent)!important; color:var(--green-lt)!important; box-shadow:0 0 0 1px var(--green) inset;}

/* Removal destination popup buttons */
.combat-choice-btn.choice-graveyard:hover{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 25%,transparent);}
.combat-choice-btn.choice-graveyard:hover .choice-label{color:var(--danger-ink);}
.combat-choice-btn.choice-exile:hover{border-color:var(--arcane-lt); background:color-mix(in srgb,var(--arcane-lt) 20%,transparent);}
.combat-choice-btn.choice-exile:hover .choice-label{color:var(--arcane-lt);}

/* ===== Exile Button & Viewer ===== */
.exile-btn{display:inline-flex; align-items:center; gap:4px;}
.exile-btn[hidden]{display:none;}
.exile-btn span{display:inline-flex; align-items:center; justify-content:center; min-width:16px; padding:0 4px; border-radius:999px; background:var(--arcane); color:#fff; font-size:10px; font-weight:700;}
.enemy-graveyard-viewer .graveyard-card.exile-card{border-color:var(--arcane); background:color-mix(in srgb,var(--arcane-lt) 12%,transparent);}

/* Player action count stepper (inline in the grid) */
.player-action-count-stepper{display:flex; align-items:center; border:1px solid var(--border-lt); border-radius:6px; overflow:hidden; background:var(--bg2); margin-top:4px;}
.player-action-count-stepper button{width:28px; height:30px; border:0; cursor:pointer; background:var(--panel2); color:var(--gold); font-size:16px; font-weight:700; transition:background .12s;}
.player-action-count-stepper button:hover{background:color-mix(in srgb,var(--gold) 15%,var(--panel));}
.player-action-count-stepper input{width:40px; height:30px; padding:0; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:14px; font-weight:700; outline:none;}
.player-action-count-stepper.all-selected{border-color:var(--border); background:color-mix(in srgb,var(--bg) 28%,transparent);}
.player-action-count-stepper.all-selected button,.player-action-count-stepper.all-selected button:hover{background:color-mix(in srgb,var(--bg) 24%,transparent); color:var(--muted); cursor:not-allowed;}
.player-action-count-stepper.all-selected input:disabled{background:color-mix(in srgb,var(--bg) 30%,transparent); color:transparent; cursor:not-allowed;}
.player-action-count-stepper input::-webkit-outer-spin-button,.player-action-count-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.player-action-count-stepper input{-moz-appearance:textfield;}
.player-action-all-toggle{display:inline-flex; align-items:center; gap:5px; margin-top:7px; color:var(--ink2); font-size:11px; font-weight:600; cursor:pointer;}
.player-action-all-toggle input{width:auto; height:auto; margin:0; accent-color:var(--gold-dim); cursor:pointer;}
/* Player action disclosure styling */
.player-action-disclosure,.rules-disclosure{border:1px solid var(--border-lt); border-radius:var(--radius-sm); margin-top:12px; background:color-mix(in srgb,var(--bg) 12%,transparent);}
.player-action-disclosure summary,.rules-disclosure summary{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; cursor:pointer; list-style:none;}
.player-action-disclosure summary::-webkit-details-marker,.rules-disclosure summary::-webkit-details-marker{display:none;}
.player-action-disclosure summary::before,.rules-disclosure summary::before{display:none;}
.player-action-disclosure summary span,.rules-disclosure summary span{font-family:var(--serif); font-size:15px; color:var(--gold); letter-spacing:.4px;}
.player-action-disclosure summary small,.rules-disclosure summary small{font-size:11px; padding:4px 10px; border-radius:999px; border:1px solid var(--border-lt); color:var(--ink2); background:var(--panel2); letter-spacing:.3px; text-transform:none; transition:all .15s;}
.player-action-disclosure:not([open]) summary small::after,.rules-disclosure:not([open]) summary small::after{content:"▸ Expand";}
.player-action-disclosure[open] summary small::after,.rules-disclosure[open] summary small::after{content:"▾ Collapse";}
.player-action-disclosure summary:hover small,.rules-disclosure summary:hover small{border-color:var(--gold-dim); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent);}

/* ===== PW (loyalty) Cards ===== */
.pw-card{background:linear-gradient(160deg,#2a3a5a 0%,#1a2440 55%,#0f1625 100%)!important; border-color:var(--info-lt)!important; position:relative;}
.pw-card .c-art{color:var(--info-ink); font-size:38px;}
.pw-card .c-pt{background:linear-gradient(180deg,#1a2440,#0c1220)!important; border-color:var(--info-lt)!important; color:var(--info-ink)!important;}
.pw-card .c-name .mana{color:var(--info-ink)!important;}
.pw-adj{position:absolute; bottom:4px; left:5px; z-index:4; display:flex; gap:2px;}
.pw-adj .cbs-btn{width:18px; height:18px; font-size:12px; border-color:rgba(106,138,184,.5); background:rgba(26,36,64,.8);}
.pw-adj .cbs-btn:hover{border-color:var(--info-ink); color:var(--info-ink);}
/* Tiny target buttons for instant damage */
.tiny-target{padding:4px 8px!important; font-size:16px!important; min-width:0!important;}
.instant-dmg-targets{display:flex; gap:4px; align-items:center;}


/* Shared compact card treatment for action, turn, selection, and zone views. */
.card-reference-list{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;}
.card.card-reference{flex:0 0 88px; width:88px; height:112px; overflow:hidden; animation:none; cursor:default;}
.card-reference .c-type{display:block; min-height:10px; padding:0 3px; overflow:hidden; color:var(--ink2); font-size:7px; letter-spacing:.2px; line-height:1.15; text-align:center; text-overflow:ellipsis; white-space:nowrap;}
.card-reference .c-kw{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card-reference .c-effect{display:-webkit-box; min-height:0; padding:0 3px; overflow:hidden; color:var(--ink2); font-size:7px; line-height:1.1; text-align:center; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.card-reference.artifact{background:linear-gradient(160deg,#3c3e42 0%,#24272c 55%,#141719 100%); border-color:#7c8791;}
.card-reference.land{background:linear-gradient(160deg,#304738 0%,#1d2d22 55%,#111b14 100%); border-color:#668969;}
.card-reference.pw-card{background:linear-gradient(160deg,#46344e 0%,#2a2031 55%,#17121b 100%); border-color:#9a74a9;}
.action-step .card-reference-list,.lt-step .card-reference-list{margin-top:7px;}
.card-choice{position:relative; display:block; padding:0!important; overflow:visible; border:0!important; background:transparent!important; cursor:pointer;}
.card-choice .card-reference{pointer-events:none; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;}
.card-choice:hover .card-reference{transform:translateY(-3px); border-color:var(--gold);}
.card-choice.selected .card-reference{border-color:var(--blood-lt)!important; box-shadow:0 0 0 2px var(--blood-lt),0 5px 16px color-mix(in srgb,var(--blood-lt) 45%,transparent);}
.card-choice.blocked-btn .card-reference{border-color:var(--green-lt)!important; box-shadow:0 0 0 2px var(--green-lt),0 5px 16px color-mix(in srgb,var(--green) 40%,transparent);}
.card-choice.is-tapped .card-reference{opacity:.78; transform:rotate(3deg);}
.card-choice .kill-btn-status{position:absolute; z-index:3; top:-7px; left:-7px; display:grid; width:22px; height:22px; place-items:center; border:1px solid var(--border-lt); border-radius:50%; background:var(--panel2); color:var(--gold); font-size:12px;}
.modal-card-list{justify-content:center; margin-bottom:12px;}
.zone-card-list{max-height:360px; padding:2px; overflow:auto;}
.attacker-card-list{margin:8px 0;}
@media(max-width:560px){.card-reference-list{gap:6px;}.card.card-reference{flex-basis:76px; width:76px; height:100px;}.card-reference .c-art{font-size:30px;}.card-reference .c-name{font-size:8px;}.card-reference .c-type,.card-reference .c-effect{font-size:6.5px;}}

/* ===== Turn flow: confirm preview, key hint, recap ===== */
.cmd-confirm-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.cmd-preview{padding:2px 9px; border-radius:999px; border:1px solid currentColor; font-size:12px; font-weight:700; opacity:.9; white-space:nowrap;}
.cmd-key{font:600 9px var(--font); letter-spacing:.5px; text-transform:uppercase; padding:2px 5px; border-radius:4px; border:1px solid currentColor; opacity:.45;}
.rules-disclosure{margin-top:12px;}
.rules-disclosure .battlefield-rules-panel{margin:0 10px 10px;}
.rules-disclosure .battlefield-rules-heading{justify-content:flex-start;}
.rules-disclosure .battlefield-rules-heading small{max-width:none; text-align:left;}
.rules-count{font:normal 11px var(--font); color:var(--ink2); margin-left:6px; font-style:normal;}
.turn-recap{border:1px solid var(--border-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 12%,transparent); padding:10px 12px; display:flex; flex-direction:column; gap:8px;}
.turn-recap-h{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.turn-recap-h strong{font-family:var(--serif); font-size:15px; color:var(--gold); letter-spacing:.4px; font-weight:600;}
.recap-lives{display:flex; flex-wrap:wrap; gap:6px;}
.recap-life{font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--panel2); color:var(--ink2);}
.recap-life b{color:var(--ink);}
.recap-life.down small{color:var(--danger-ink);} .recap-life.up small{color:var(--green-lt);}
.recap-life.is-you.down{border-color:var(--blood-lt);}
.recap-quiet{font-size:12px; color:var(--muted);}
.recap-lines{margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink2); line-height:1.4;}
.recap-more{list-style:none; margin-left:-16px; color:var(--muted); font-style:italic;}
@media(max-width:760px){.cmd-key{display:none;} .cmd-confirm-btn{min-width:0;}}

/* ===== CPU response steps: hints, live status, highlight when used ===== */
.response-step{transition:border-color .15s, box-shadow .15s;}
.response-step .resolution-step-h strong{margin-right:auto;}
.step-status{font:normal 11px var(--font); font-style:normal; color:var(--muted); padding:1px 8px; border-radius:999px; border:1px solid var(--border);}
.step-hint{margin:0; padding:7px 10px 0; font-size:11.5px; color:var(--ink2); line-height:1.4;}
.response-step.is-set{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-dim) inset, 0 0 14px color-mix(in srgb,var(--gold) 12%,transparent);}
.response-step.is-set .step-status{color:var(--gold); border-color:var(--gold-dim); background:color-mix(in srgb,var(--gold) 10%,transparent); font-weight:600;}
.resolution-step.response-counter{border-color:var(--gold-dim);}
.counter-chips{display:flex; flex-wrap:wrap; gap:6px;}
.counter-chip{padding:6px 11px; border-radius:999px; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font:12px var(--font); cursor:pointer; transition:all .12s;}
.counter-chip:hover{border-color:var(--gold-dim); color:var(--gold);}
.counter-chip.active{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 25%,transparent); color:var(--on-danger); text-decoration:line-through;}
.lt-counter-hint{font-style:normal; padding:1px 7px; border-radius:999px; border:1px solid var(--gold-dim); color:var(--gold);}

/* ===== Card remove button: labeled pill instead of a bare arrow ===== */
.card .c-remove{width:auto; min-width:20px; height:20px; padding:0 5px; border-radius:999px; font-size:10px; line-height:18px; font-weight:700; white-space:nowrap; top:-9px; right:-9px;}
/* Corner ✕ stays out of the card name; it spells out "Remove" when you point at the card */
.card .c-remove-label{display:none;}
.card:hover .c-remove .c-remove-label,.card .c-remove:focus-visible .c-remove-label{display:inline;}
@media(hover:none){.card .c-remove-label{display:inline;}}

/* ===== UI scale (set by applyUiScale in setup.js) ===== */
.wrap, .overlay > *{zoom:var(--ui-scale,1);}

/* ===== Light theme: cards stay dark "physical" cards, so their text keeps light ink ===== */
[data-theme="light"] .card,[data-theme="light"] .card-reference,[data-theme="light"] .portrait{
  --ink:#f2e9d8; --ink2:#c8b78f; --muted:#a8987a; --gold:#d9b45a; --gold-dim:#8a6d2f;
  --border:#3a2f1a; --border-lt:#4d3e22; --panel:#1e1810; --panel2:#26200f; --bg:#0d0b07; --bg2:#17130c;
}

/* ===== Dark Purple: card types re-dressed in purple shades (light lavender → near-black) ===== */
[data-theme="purple"] .card .c-name .mana{color:#d9c2ff;}
[data-theme="purple"] .card .c-type{color:#d6c8ee;}
[data-theme="purple"] .card .c-pt{background:linear-gradient(180deg,#2a1b40,#0f0818); border-color:var(--gold-dim);}
[data-theme="purple"] .card .c-info{background:#120a1c;}
[data-theme="purple"] .card.beast{background:linear-gradient(160deg,#3a2456 0%,#24163a 55%,#140b20 100%); border-color:#7a55b0;}
[data-theme="purple"] .card.horde{background:linear-gradient(160deg,#2e2240 0%,#1d152b 55%,#110b19 100%); border-color:#6a5a8a;}
[data-theme="purple"] .card.synergy{background:linear-gradient(160deg,#4a2a6e 0%,#2e1a47 55%,#1a0f2a 100%); border-color:#a07ad8;}
[data-theme="purple"] .card.voltron-creature{background:linear-gradient(160deg,#3d2a5a 0%,#26193a 55%,#150e21 100%); border-color:#8d6bc0;}
[data-theme="purple"] .card.commander{background:linear-gradient(160deg,#5e2f9a 0%,#3a1c63 52%,#1d0e33 100%); border-color:#c9a2ff; box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,255,.25) inset;}
[data-theme="purple"] .card.commander .c-pt,[data-theme="purple"] .card.voltron-creature .c-pt,[data-theme="purple"] .card.beast .c-pt{background:linear-gradient(180deg,#2e1a4a,#120a1f); border-color:#8d6bc0;}
[data-theme="purple"] .card-reference.artifact{background:linear-gradient(160deg,#2f2a38 0%,#1e1a25 55%,#110e15 100%); border-color:#7e7290;}
[data-theme="purple"] .card-reference.land{background:linear-gradient(160deg,#2a2140 0%,#1a142a 55%,#0f0b19 100%); border-color:#6f5a99;}
[data-theme="purple"] .card-reference.pw-card,[data-theme="purple"] .pw-card{background:linear-gradient(160deg,#3a2c66 0%,#231a40 55%,#140f26 100%)!important; border-color:#9d86e0!important;}
[data-theme="purple"] .pw-card .c-pt{background:linear-gradient(180deg,#231a40,#0e0a1a)!important; border-color:#9d86e0!important;}

/* ===== Settings dialog ===== */
.settings-modal{width:min(520px,100%); max-height:min(84vh,760px); display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--gold-dim); box-shadow:0 20px 60px rgba(0,0,0,.45);}
.settings-h{display:flex; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border);}
.settings-h h2{font:700 18px var(--serif); color:var(--gold);}
.settings-h .x{margin-left:auto; cursor:pointer; color:var(--ink2); font-size:22px; line-height:1; background:none; border:none;}
.settings-h .x:hover{color:var(--gold);}
.settings-body{padding:6px 16px 16px; overflow:auto; display:flex; flex-direction:column; gap:14px;}
.settings-section{display:flex; flex-direction:column; gap:6px;}
.settings-section[hidden]{display:none;}
.settings-section h3{margin-top:10px; font:700 10px var(--font); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.settings-row{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--panel2) 70%,transparent); color:var(--ink); text-align:left; font:inherit; cursor:pointer;}
.settings-row-stack{flex-direction:column; align-items:stretch; cursor:default;}
.settings-copy{display:flex; flex-direction:column; gap:2px; min-width:0;}
.settings-copy strong{font-size:13.5px; color:var(--ink);}
.settings-copy span{font-size:11.5px; color:var(--ink2); line-height:1.35;}
.settings-action{transition:border-color .15s, background .15s;}
.settings-action:hover{border-color:var(--gold-dim); background:color-mix(in srgb,var(--gold) 8%,var(--panel2));}
.settings-action.danger strong{color:var(--danger-ink);}
.settings-action.danger:hover{border-color:var(--blood-lt); background:color-mix(in srgb,var(--blood) 14%,var(--panel2));}
.settings-action .badge{min-width:22px; padding:2px 7px; border-radius:999px; background:var(--green); color:#fff; font-size:11px; text-align:center;}
.settings-chevron{font-size:20px; color:var(--muted);}
.settings-themes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.settings-themes .theme-btn{justify-content:flex-start; padding:10px 12px; font-size:13px;}
.settings-themes .theme-swatch{width:18px; height:18px;}
.settings-foot{font-size:11px; color:var(--muted); text-align:center;}
/* Switch built from a native checkbox (keeps keyboard + screen-reader behaviour) */
.settings-switch{appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative; width:42px; height:24px; border-radius:999px; background:var(--bg2); border:1px solid var(--border-lt); cursor:pointer; transition:background .15s, border-color .15s;}
.settings-switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ink2); transition:transform .15s, background .15s;}
.settings-switch:checked{background:var(--green); border-color:var(--green-lt);}
.settings-switch:checked::after{transform:translateX(18px); background:#fff;}
.settings-switch:focus-visible,.settings-row:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.theme-swatch{border-color:color-mix(in srgb,var(--ink) 25%,transparent);}
@media(max-width:430px){.settings-themes{grid-template-columns:1fr;}}

/* ===== Help tooltip (helpTip in render.js) ===== */
.help-tip{position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:5px; border-radius:50%; border:1px solid var(--border-lt); color:var(--muted); font:700 9.5px var(--font); font-style:normal; letter-spacing:0; text-transform:none; vertical-align:middle; cursor:help;}
.help-tip:hover,.help-tip:focus-visible{color:var(--gold); border-color:var(--gold-dim); outline:none;}
.help-tip::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:60; width:max-content; max-width:240px; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); box-shadow:var(--shadow); font:400 11.5px/1.4 var(--font); text-align:left; white-space:normal; opacity:0; pointer-events:none; transition:opacity .12s;}
.help-tip:hover::after,.help-tip:focus-visible::after{opacity:1;}

/* ===== Adventure turn flow ===== */
/* Main turn button carries the same outcome pill + key hint as Commander's confirm bar */
.turn-actions .endturn{display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.turn-actions .endturn .cmd-preview{font-family:var(--font); letter-spacing:0;}
.turn-actions .endturn .cmd-preview[hidden]{display:none;}
.atk-note .help-tip{margin-left:4px;}
@media(max-width:760px){.turn-actions .endturn .cmd-key{display:none;}}

/* ===== Commander turn flow v2 ===== */
/* Seat order + lethal warnings under the life HUD */
.life-first{padding:0 5px; border-radius:999px; border:1px solid var(--gold-dim); color:var(--gold); font-size:9px; letter-spacing:.5px; text-transform:uppercase;}
.life-poison{color:var(--green-lt); font-size:11px; font-weight:600;}
.cmd-lethal-strip{display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 8px; padding:6px 10px; border:1px solid var(--blood-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--blood) 16%,var(--panel));}
.cmd-lethal-strip[hidden]{display:none;}
.cmd-lethal-item{font-size:11.5px; font-weight:600; color:var(--danger-ink);}
/* CPU information */
.cbs-item.cbs-wide{flex-wrap:wrap; gap:4px;}
.cbs-val.cbs-small{font-size:11px; color:var(--ink2); text-align:right; white-space:normal;}
/* Response form */
.kill-btn .kill-btn-label{position:absolute; z-index:3; bottom:-8px; left:50%; transform:translateX(-50%); padding:1px 7px; border-radius:999px; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); font-size:10px; white-space:nowrap;}
.kill-btn.card-choice{position:relative;}
.lt-countered-note{display:inline-block; margin-left:8px; font-size:10px; color:var(--danger-ink); text-decoration:none;}
.instant-target-row{flex-wrap:wrap;}
.instant-dmg-targets .tiny-target{font-size:12px!important;}
.combat-choice-btns:has(.choice-removed){grid-template-columns:repeat(3,minmax(0,1fr));}
.combat-choice-btn.choice-removed:hover{border-color:var(--arcane-lt); background:color-mix(in srgb,var(--arcane-lt) 20%,transparent);}
.combat-choice-btn.choice-removed:hover .choice-label{color:var(--arcane-lt);}
@media(max-width:430px){.combat-choice-btns:has(.choice-removed){grid-template-columns:1fr;}}
/* Dialogs */
.input-actions.hide-cancel #inputCancel{display:none;}
.cmd-dialog-steppers{display:flex; flex-direction:column; gap:8px; margin:10px 0 4px;}
.cmd-dialog-steppers .inline-stepper{display:flex; align-items:center; gap:6px; border:none; background:none; overflow:visible; font-size:12px;}
.cmd-dialog-steppers .inline-stepper label{flex:1; color:var(--ink2);}
.cmd-dialog-steppers .inline-stepper button{width:28px; height:28px; border-radius:6px; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); cursor:pointer;}
.cmd-dialog-steppers .inline-stepper input{width:52px; padding:4px; text-align:center; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg2); color:var(--ink);}
.cmd-dialog-pws{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink2);}
.cmd-text-field{display:block;}
.cmd-text-field input{width:100%; padding:8px; margin-top:6px; border:1px solid var(--border-lt); border-radius:6px; background:var(--panel); color:var(--ink); font-size:14px;}
/* Your attack declaration */
.attack-row{margin-bottom:8px; padding:8px 10px; border:1px solid var(--border-lt); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 14%,transparent);}
.attack-row.is-commander{border-color:var(--cmdr); background:color-mix(in srgb,var(--cmdr) 10%,transparent);}
.attack-row-h{display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:12px;}
.attack-row-h strong{color:var(--ink);}
.attack-cmdr-toggle{display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:var(--ink2); font-size:11px; cursor:pointer;}
.attack-row-remove{text-decoration:none; font-size:13px;}
.attack-row-b{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px;}
.attack-row-b .inline-stepper{display:flex; align-items:center; gap:6px; border:none; background:none; overflow:visible;}
.attack-row-b .inline-stepper button{width:26px; height:26px; border-radius:6px; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); cursor:pointer;}
.attack-row-b .inline-stepper input{width:46px; padding:3px; text-align:center; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg2); color:var(--ink);}
.attack-target{display:inline-flex; align-items:center; gap:6px; color:var(--ink2);}
.attack-target select{padding:4px 6px; border:1px solid var(--border-lt); border-radius:6px; background:var(--panel2); color:var(--ink); font:12px var(--font);}
.kw-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px;}
.kw-chip{padding:3px 9px; border-radius:999px; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font:11px var(--font); cursor:pointer;}
.kw-chip:hover{border-color:var(--gold-dim); color:var(--gold);}
.kw-chip.active{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--ink);}
.attack-builder-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px;}
.attack-outcome{margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--ink2); line-height:1.6;}
@media(max-width:760px){.attack-cmdr-toggle{margin-left:0;} .attack-row-h{flex-wrap:wrap;}}
.commander-player-actions .instant-target-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%;}
.instant-dmg-targets{display:flex; flex-wrap:wrap; gap:6px;}
.instant-dmg-targets .tiny-target{min-width:0!important; padding:4px 9px!important; white-space:nowrap;}
.response-step.is-lethal{border-color:var(--blood-lt); box-shadow:0 0 0 1px var(--blood-lt) inset;}
.response-step.is-lethal .resolution-step-h strong::after{content:" · Lethal"; color:var(--danger-ink);}
.lt-response-note,.lt-lethal-note{display:inline-block; margin-left:8px; padding:0 7px; border-radius:999px; font-size:10px;}
.lt-response-note{border:1px solid var(--arcane-lt); color:var(--arcane-ink);}
.lt-lethal-note{border:1px solid var(--blood-lt); color:var(--danger-ink);}
.cbs-util{display:inline-flex; align-items:center; gap:4px; margin-left:6px;}
.cbs-util-remove{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:11px;}
.cbs-util-remove:hover{color:var(--danger-ink);}

/* ===== Opponent & difficulty settings ===== */
.setup-field-block{display:flex; flex-direction:column; gap:6px; text-align:left;}
.setup-field-label{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink2);}
.setup-modal p.setup-field-note{margin:0; min-height:2.7em; font-size:11.5px; line-height:1.35; color:var(--ink2);}
.setup-select{width:100%; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); font:13px var(--font);}
.setup-select:focus-visible{outline:2px solid var(--cmdr); outline-offset:1px;}
.deck-static{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:color-mix(in srgb,var(--panel2) 80%,transparent);}
.deck-static strong{font-size:13px; color:var(--ink);}
.deck-static span{font-size:11.5px; line-height:1.35; color:var(--ink2);}
.difficulty-seg{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--border-lt); border-radius:var(--radius-sm); overflow:hidden; background:var(--panel2);}
.difficulty-btn{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; padding:6px 2px; border:0; border-left:1px solid var(--border); background:transparent; color:var(--ink2); font-family:var(--font); cursor:pointer; transition:background .15s, color .15s;}
.difficulty-btn:first-child{border-left:0;}
.difficulty-btn:hover{color:var(--ink); background:color-mix(in srgb,var(--cmdr) 10%,transparent);}
.difficulty-btn[aria-checked="true"]{background:color-mix(in srgb,var(--cmdr) 35%,transparent); color:var(--cmdr-ink); box-shadow:inset 0 0 0 1px var(--cmdr);}
.difficulty-btn:focus-visible{outline:2px solid var(--cmdr); outline-offset:-3px;}
.difficulty-num{font:700 15px var(--serif);}
.difficulty-name{font-size:9.5px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.setup-advanced{text-align:left; border-top:1px solid var(--border); padding-top:8px;}
.setup-advanced summary{cursor:pointer; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink2); list-style-position:inside;}
.setup-advanced summary:hover{color:var(--cmdr-ink);}
.setup-advanced summary:focus-visible{outline:2px solid var(--cmdr); outline-offset:2px; border-radius:3px;}
.setup-advanced-body{display:flex; flex-direction:column; gap:12px; padding-top:10px;}
.ai-slider{display:flex; flex-direction:column; gap:4px;}
.ai-slider-h{display:flex; align-items:center; font-size:12.5px; color:var(--ink);}
.ai-slider-h output{margin-left:auto; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums;}
.ai-slider input[type="range"]{width:100%; accent-color:var(--cmdr); cursor:pointer;}
.ai-slider-ends{display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--muted);}
.setup-link-btn,.settings-link-btn{align-self:flex-start; padding:2px 0; border:0; background:none; color:var(--gold); font:12px var(--font); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.setup-link-btn{color:var(--ink2);}
.setup-link-btn:hover,.settings-link-btn:hover{color:var(--ink);}
.setup-link-btn:focus-visible,.settings-link-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:3px;}
.settings-opponents{gap:10px;}
.opp-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0;}
.opp-summary div{padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2);}
.opp-summary dt{font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted);}
.opp-summary dd{margin:2px 0 0; font-size:12.5px; color:var(--ink);}
.opp-summary-decks{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:3px;}
.opp-summary-decks li{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink);}
.opp-summary-decks li span:last-child{color:var(--ink2); text-align:right;}
@media(max-width:430px){.opp-summary{grid-template-columns:1fr;} .difficulty-name{font-size:8.5px;}}
.setup-modal{max-height:96vh; overflow:auto;}
@media(min-width:621px){.setup-columns{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}}

/* ===== Fan project: About, notice, backup ===== */
.settings-about .fan-notice{margin:0; font-size:11px; line-height:1.45; color:var(--muted);}
.setup-fan-note{margin-top:6px; font-size:10.5px; color:var(--muted); text-align:center;}
/* Project links: one quiet line — Feedback · Source code · Tip on Ko-fi */
.project-foot{margin-top:18px; padding-top:12px; border-top:1px solid var(--border);}
.project-links{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 9px; margin:0; font-size:12px; color:var(--muted);}
.project-links[hidden]{display:none;}
.settings-about .project-links{justify-content:flex-start;}
.project-links a{color:var(--ink2); text-decoration:none; border-bottom:1px solid transparent;}
.project-links a:hover,.project-links a:focus-visible{color:var(--gold); border-bottom-color:currentColor; outline:none;}
/* Release stage badge next to the title */
.stage-badge{display:inline-block; margin-left:6px; padding:2px 7px; border:1px solid var(--gold-dim); border-radius:999px; color:var(--gold); font:700 10px/1.2 var(--font); letter-spacing:1px; text-transform:uppercase; vertical-align:middle; text-shadow:none;}

/* ===== Tabletop view (Commander) ===== */
/* Card size comes from --cw/--ch; each seat is a size container so cards grow when a seat has room. */
.wrap:has(.table-view.seats-3),.wrap:has(.table-view.seats-4){max-width:1520px;}
.table-view .board-h{min-height:48px;}
.tt-felt{container:felt / inline-size; padding:14px; border-radius:0 0 var(--radius) var(--radius);
  background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb,var(--green) 34%,var(--bg)) 0%, color-mix(in srgb,var(--green) 16%,var(--bg)) 75%);
  box-shadow:inset 0 0 40px color-mix(in srgb,var(--bg) 70%,transparent);}
.tt-table{display:grid; grid-template-columns:1fr; gap:14px;}
.tt-you{grid-column:1/-1;}
/* 2 opponents side by side; 3 → 2×2 with you in the fourth seat, or one row of 3 when wide; 4 → 2×2, or one row of 4 when wide */
@container felt (min-width:640px){
  .seats-2 .tt-table,.seats-3 .tt-table,.seats-4 .tt-table{grid-template-columns:repeat(2,minmax(0,1fr));}
  .seats-3 .tt-you{grid-column:auto;}
}
@container felt (min-width:1080px){
  .seats-3 .tt-table{grid-template-columns:repeat(3,minmax(0,1fr));}
  .seats-3 .tt-you{grid-column:1/-1;}
}
@container felt (min-width:1360px){
  .seats-4 .tt-table{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.tt-seat{container:seat / inline-size; --cw:70px; --ch:98px; --pw:58px; --ph:81px; --art:24px;
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:10px 12px 12px; border:2px solid color-mix(in srgb,var(--seat) 60%,transparent); border-radius:var(--radius); background:color-mix(in srgb,var(--bg) 28%,transparent); transition:box-shadow .2s,border-color .2s;}
.tt-seat.is-active{border-color:var(--seat); box-shadow:0 0 0 2px color-mix(in srgb,var(--seat) 40%,transparent),0 0 22px color-mix(in srgb,var(--seat) 35%,transparent);}
.tt-seat.dead{opacity:.45; filter:grayscale(.7);}
.tt-you{border-style:dashed;}
.tt-seat-h{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.tt-seat-name{margin-right:auto; padding:0; border:0; background:none; color:var(--ink); font:600 14px var(--serif); cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.tt-seat-name:hover{color:var(--gold);}
.tt-life{font:700 17px var(--serif); color:var(--ink);}
.tt-life.warn,.tt-chip.warn{color:var(--danger-ink);}
.tt-chip{padding:2px 7px; border:1px solid var(--border-lt); border-radius:999px; background:color-mix(in srgb,var(--bg) 40%,transparent); color:var(--ink2); font-size:11px; white-space:nowrap;}
.tt-chip.tt-turn{border-color:var(--seat); color:var(--seat); font-weight:700;}
.tt-add{padding:3px 8px; font-size:10.5px;}
.tt-zone{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; min-height:calc(var(--ch) + 6px);}
.tt-creatures{flex:1; align-content:flex-start;}
.tt-back{min-height:0; padding-top:10px; border-top:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);}
.tt-back .tt-slot{--cw:var(--pw); --ch:var(--ph);}
.tt-you .tt-zone{min-height:0;}
.tt-spacer{flex:1;}
.tt-empty{align-self:center; color:var(--muted); font-size:12px; font-style:italic;}
/* Roomy seats (wide screens, 1–2 opponents) get bigger cards */
@container seat (min-width:560px){.tt-zone{--cw:84px; --ch:117px; --pw:64px; --ph:90px; --art:30px;} .tt-name{font-size:9px;} .tt-kw{font-size:8px;} .tt-pt{font-size:12px;}}

/* A slot reserves room for a sideways (tapped) card, its stack and equipment tucked behind it */
.tt-slot{position:relative; display:flex; align-items:center; justify-content:center; width:var(--cw); height:var(--ch); padding-top:calc(var(--gear,0) * 14px); box-sizing:content-box;}
.tt-slot:has(.stacked){margin-right:4px;} .tt-slot:has(.stacked-3){margin-right:8px;}
.tt-slot.is-tapped{width:var(--ch);}
.tt-slot.is-tapped .tt-count{top:calc((var(--ch) - var(--cw)) / 2 - 9px);}
.tt-card{position:relative; z-index:2; width:var(--cw); height:var(--ch); flex:0 0 auto; display:flex; flex-direction:column; padding:4px; box-sizing:border-box; border-radius:6px;
  background:var(--card-bg); border:2px solid var(--card-border); box-shadow:0 3px 8px rgba(0,0,0,.5); color:#f2ecdf;}
.tt-slot.is-tapped .tt-card{transform:rotate(90deg);}
.tt-card.commander{border-color:var(--cmdr); background:linear-gradient(160deg,color-mix(in srgb,var(--cmdr) 55%,#15120c),color-mix(in srgb,var(--cmdr) 18%,#15120c));}
.tt-card.token{border-style:double; border-width:3px;}
.tt-card.artifact{border-color:var(--wolf); background:linear-gradient(160deg,color-mix(in srgb,var(--wolf) 55%,#15120c),color-mix(in srgb,var(--wolf) 18%,#15120c));}
.tt-card.enchantment,.tt-card.pw{border-color:var(--arcane-lt); background:linear-gradient(160deg,color-mix(in srgb,var(--arcane) 60%,#15120c),color-mix(in srgb,var(--arcane) 20%,#15120c));}
.tt-card.reanimated{border-color:var(--green-lt);}
.tt-card.in-zone{opacity:.55; border-style:dashed;}
.tt-card.sick .tt-art{opacity:.6;}
/* Stack: copies peek out behind the top card */
.tt-card.stacked{box-shadow:4px -4px 0 -2px #241e14,4px -4px 0 0 var(--card-border),0 3px 8px rgba(0,0,0,.5);}
.tt-card.stacked-3{box-shadow:4px -4px 0 -2px #241e14,4px -4px 0 0 var(--card-border),8px -8px 0 -2px #1c170f,8px -8px 0 0 var(--card-border),0 3px 8px rgba(0,0,0,.5);}
.tt-count{position:absolute; top:calc(var(--gear,0) * 14px - 9px); right:-9px; z-index:5; min-width:22px; padding:1px 5px; box-sizing:border-box; border-radius:999px; border:1px solid var(--gold); background:#15120c; color:var(--gold); font:700 11px var(--serif); text-align:center; box-shadow:0 2px 4px rgba(0,0,0,.5);}
.tt-card.stacked .tt-remove{top:auto; bottom:-7px;}
.tt-name{font:600 8px/1.1 var(--serif); color:#f2ecdf; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:17px;}
.tt-art{flex:1; display:flex; align-items:center; justify-content:center; margin:3px 0; border-radius:4px; background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(0,0,0,.4)); font-size:var(--art);}
.tt-kw{font-size:7px; line-height:1.1; color:var(--gold); text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:22px;}
.tt-pt{position:absolute; right:3px; bottom:3px; padding:0 4px; border:1px solid var(--info-lt); border-radius:4px; background:#0c1116; color:#fff; font:700 11px var(--serif);}
.tt-pt.buffed{border-color:var(--green-lt); color:var(--green-lt);}
.tt-pt.shrunk{border-color:var(--danger); color:var(--danger-ink);}
.tt-badge{position:absolute; top:-7px; left:-7px; font-size:13px; filter:drop-shadow(0 1px 2px #000);}
.tt-remove{position:absolute; top:-7px; right:-7px; z-index:4; width:18px; height:18px; padding:0; border-radius:50%; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font-size:10px; line-height:16px; cursor:pointer; opacity:0; transition:opacity .12s;}
.tt-card:hover .tt-remove,.tt-remove:focus-visible{opacity:1;}
.tt-remove:hover{background:var(--blood); border-color:var(--blood-lt); color:#fff;}
.tt-gear{position:absolute; left:50%; top:calc(var(--i) * 14px); z-index:1; width:calc(var(--cw) - 4px); height:40px; margin-left:calc(var(--cw) / -2 + 2px); padding:2px 4px; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  border:1px solid var(--wolf); border-radius:5px 5px 0 0; background:color-mix(in srgb,var(--wolf) 45%,#1a1a1a); color:#f2ecdf; font-size:7.5px;}
.tt-pw-adj{position:absolute; left:3px; bottom:3px; display:flex; gap:2px;}
.tt-pw-adj .cbs-btn{width:16px; height:16px; font-size:10px; line-height:1;}

/* Piles: lands, library, graveyard, exile */
.tt-pile{position:relative; width:var(--pw); height:var(--ph); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px; box-sizing:border-box; border-radius:6px; border:2px solid var(--border-lt); color:#f2ecdf;
  background:var(--card-bg); box-shadow:2px 2px 0 color-mix(in srgb,var(--bg) 60%,transparent),4px 4px 0 color-mix(in srgb,var(--bg) 40%,transparent); font:inherit; cursor:default;}
button.tt-pile{cursor:pointer;} button.tt-pile:hover{border-color:var(--gold);}
.tt-pile.empty{box-shadow:none; opacity:.5; border-style:dashed;}
.tt-pile.land{border-color:var(--green-lt); background:linear-gradient(160deg,color-mix(in srgb,var(--green) 55%,#15120c),color-mix(in srgb,var(--green) 20%,#15120c));}
.tt-pile.artifact{border-color:var(--wolf);}
.tt-pile.facedown{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--gold-dim) 45%,#15120c) 0 6px,color-mix(in srgb,var(--gold-dim) 25%,#15120c) 6px 12px); border-color:var(--gold-dim);}
.tt-pile-ico{font-size:18px; line-height:1;}
.tt-pile-count{font:700 16px var(--serif); line-height:1;}
.tt-pile-lbl{font-size:7.5px; letter-spacing:.3px; text-transform:uppercase; color:rgba(242,236,223,.75); text-align:center; line-height:1.1;}

/* Play animations: enter (dropped onto the table), tap/untap (turn), bump (another copy / pile grows) */
@keyframes ttEnter{from{opacity:0; transform:translateY(-18px) scale(1.12);} 60%{opacity:1;} to{opacity:1; transform:none;}}
@keyframes ttTap{from{transform:rotate(0);} to{transform:rotate(90deg);}}
@keyframes ttUntap{from{transform:rotate(90deg);} to{transform:rotate(0);}}
@keyframes ttSlotWiden{from{width:var(--cw);} to{width:var(--ch);}}
@keyframes ttSlotNarrow{from{width:var(--ch);} to{width:var(--cw);}}
@keyframes ttBump{0%{transform:none;} 40%{transform:scale(1.08);} 100%{transform:none;}}
@keyframes ttGlow{0%,30%{outline:2px solid var(--gold); outline-offset:1px;} 100%{outline:2px solid transparent; outline-offset:6px;}}
@keyframes ttGearIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.tt-slot.tt-enter{animation:ttEnter .38s ease-out both;}
.tt-slot.tt-enter .tt-card{animation:ttGlow 1.4s ease-out;}
.tt-slot.tt-tap{animation:ttSlotWiden .28s ease-out;} .tt-slot.tt-tap .tt-card{animation:ttTap .28s ease-out;}
.tt-slot.tt-untap{animation:ttSlotNarrow .28s ease-out;} .tt-slot.tt-untap .tt-card{animation:ttUntap .28s ease-out;}
.tt-slot.tt-bump .tt-card,.tt-pile.tt-bump{animation:ttBump .32s ease-out;}
.tt-pile.tt-enter{animation:ttEnter .38s ease-out both;}
.tt-gear.tt-enter{animation:ttGearIn .35s ease-out both;}

/* Card detail popup (lives on <body>, positioned next to the card by JS) */
.tt-card[data-peek]{cursor:default;} .tt-card[data-peek]:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.tt-peek{position:fixed; z-index:1000; width:240px; max-width:calc(100vw - 16px); padding:10px 12px; box-sizing:border-box; border:1px solid var(--border-lt); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); box-shadow:var(--shadow); font:12px/1.35 var(--font); pointer-events:none; animation:fadeIn .12s ease-out;}
.tt-peek[hidden]{display:none;}
.tt-peek-h{display:flex; align-items:center; gap:7px; font:600 14px/1.2 var(--serif);}
.tt-peek-ico{font-size:20px;}
.tt-peek-count{margin-left:auto; color:var(--gold); font-size:13px;}
.tt-peek-type{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 2px; padding-bottom:6px; border-bottom:1px solid var(--border); color:var(--ink2); font-size:11px;}
.tt-peek-pt{font:700 14px var(--serif); color:var(--ink);} .tt-peek-pt.buffed{color:var(--green-lt);} .tt-peek-pt.shrunk{color:var(--danger-ink);}
.tt-peek-sub{color:var(--muted); font-size:10.5px; text-align:right;}
.tt-peek-kws{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; color:var(--ink2); font-size:11px;}
.tt-peek-kws b{color:var(--gold);}
.tt-peek-effect{margin:6px 0 0; color:var(--ink2); font-size:11px; font-style:italic;}
.tt-peek-gear{margin-top:6px; font-size:11px; color:var(--ink2);} .tt-peek-gear span{display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px;} .tt-peek-gear em{color:var(--muted);}
.tt-peek-state{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px;} .tt-peek-state span{padding:1px 7px; border:1px solid var(--border-lt); border-radius:999px; font-size:10px; color:var(--ink2);}
@media(prefers-reduced-motion:reduce){.tt-peek{animation:none;}}

.tt-enter,.tt-tap,.tt-untap,.tt-bump,.tt-enter .tt-card,.tt-tap .tt-card,.tt-untap .tt-card,.tt-bump .tt-card{animation-delay:var(--tt-delay,0ms)!important;}

/* ===== Shared board controls: view switch + inline steppers ===== */
.view-switch{display:inline-flex; margin-left:6px; border:1px solid var(--border-lt); border-radius:999px; overflow:hidden;}
.view-switch-btn{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border:0; background:transparent; color:var(--ink2); font:12px var(--font); cursor:pointer;}
.view-switch-btn+.view-switch-btn{border-left:1px solid var(--border-lt);}
.view-switch-btn:hover{color:var(--gold);}
.view-switch-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold);}
@media(max-width:760px){.view-switch-lbl{display:none;} .view-switch-btn{padding:4px 9px;}}
/* − value +: the buttons appear on hover/focus where a mouse exists, and stay visible on touch screens */
.step{display:inline-flex; align-items:center; gap:1px; white-space:nowrap;}
.step-val{display:inline-flex; align-items:center; gap:3px; padding:0 2px; font-variant-numeric:tabular-nums;}
.step-ico{font-size:.85em;}
.step.warn .step-val{color:var(--danger-ink);}
.step-btn{width:18px; height:18px; padding:0; border:1px solid var(--border-lt); border-radius:50%; background:color-mix(in srgb,var(--bg) 50%,transparent); color:var(--ink2); font:700 12px/1 var(--font); cursor:pointer;}
.step-btn:hover{border-color:var(--gold); color:var(--gold);}
@media(hover:hover){
  .step{position:relative;}
  .step .step-btn{position:absolute; top:50%; z-index:6; margin-top:-9px; background:var(--panel2); opacity:0; pointer-events:none; transition:opacity .12s;}
  .step .step-btn:first-child{right:100%;} .step .step-btn:last-child{left:100%;}
  .step:hover .step-btn,.step:focus-within .step-btn{opacity:1; pointer-events:auto;}
  .step:hover .step-val,.step:focus-within .step-val{color:var(--gold);}
  .tt-pile-step,.tt-pw-adj{opacity:0; transition:opacity .12s;}
  .tt-pile:hover .tt-pile-step,.tt-pile:focus-within .tt-pile-step,.tt-card:hover .tt-pw-adj,.tt-card:focus-within .tt-pw-adj{opacity:1;}
}
/* The table already shows every seat's life and zones */
.wrap:has(.table-view) #commanderLifeHud{display:none;}
.tt-life.step{font:700 17px var(--serif);}
.tt-chip.step{padding:2px 7px;}
.tt-pile-step{position:absolute; left:0; right:0; bottom:-9px; display:flex; justify-content:center; gap:6px;}
.tt-pw-adj .step-btn{width:16px; height:16px; font-size:10px;}

@media(max-width:760px){.tt-felt{padding:10px;} .tt-table{gap:10px;} .tt-seat{padding:8px;}}
@media(prefers-reduced-motion:reduce){.tt-slot,.tt-card,.tt-pile,.tt-gear{animation:none!important;}}

/* ===== Declare Blockers Popup ===== */
.block-dialog .confirm-msg{margin-bottom:10px;}
.block-rows{display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto;}
.block-row{display:flex; flex-direction:column; gap:8px; padding:8px 10px; border:1px solid var(--border-lt); border-left:3px solid var(--danger); border-radius:var(--radius-sm); background:var(--panel2);}
.block-row.is-block,.block-row.is-kill{border-left-color:var(--green-lt);}
.block-row.is-destroy,.block-row.is-exile{border-left-color:var(--muted); opacity:.85;}
.block-row-card{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.block-row-pt{margin-left:auto; font-size:12px; font-weight:700; color:var(--danger-ink);}
.block-row.is-block .block-row-pt,.block-row.is-kill .block-row-pt,.block-row.is-destroy .block-row-pt,.block-row.is-exile .block-row-pt{color:var(--muted); text-decoration:line-through;}
.block-choices{display:flex; flex-wrap:wrap; gap:4px;}
.block-choice{padding:5px 9px; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel); color:var(--ink2); font-family:var(--font); font-size:12px; cursor:pointer;}
.block-choice:hover{border-color:var(--gold-dim); color:var(--ink);}
.block-choice.active{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--ink); font-weight:700;}
.block-choice.choice-block.active,.block-choice.choice-kill.active{border-color:var(--green-lt); background:color-mix(in srgb,var(--green) 25%,transparent);}
.block-row-extra{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--ink2);}
.block-check{display:flex; align-items:center; gap:5px; cursor:pointer;}
.block-summary{margin-top:10px; padding:8px 10px; border-radius:var(--radius-sm); background:var(--panel2); font-weight:700; text-align:center; color:var(--ink);}

/* ===== Your Tracked Creatures ===== */
.tt-dup{position:absolute; top:-7px; left:-7px; z-index:4; width:18px; height:18px; padding:0; border-radius:50%; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font-size:10px; line-height:16px; cursor:pointer; opacity:0; transition:opacity .12s;}
.tt-card:hover .tt-dup,.tt-dup:focus-visible{opacity:1;}
.tt-dup:hover{background:var(--green); border-color:var(--green-lt); color:var(--ink);}
.card .c-dup{position:absolute; top:-9px; left:-9px; width:20px; height:20px; padding:0; border-radius:50%; border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink2); font-size:11px; line-height:18px; cursor:pointer; z-index:3;}
.card .c-dup:hover{background:var(--green); color:var(--ink);}
.creature-dialog{display:flex; flex-direction:column; gap:10px; text-align:left;}
.creature-dialog-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.creature-dialog .kw-chips{display:flex; flex-wrap:wrap; gap:4px;}
.attack-picker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.attack-picker .kill-btn.selected{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); color:var(--ink); box-shadow:none;}
.attack-picker .card-choice.selected .card-reference{border-color:var(--gold)!important; box-shadow:0 0 0 2px var(--gold),0 5px 16px color-mix(in srgb,var(--gold) 40%,transparent);}
.attack-picker .kill-btn.is-tapped{opacity:.5;}
.block-blocker{display:flex; align-items:center; gap:5px;}
.block-blocker select{font:inherit; font-size:12px; padding:3px 5px; background:var(--panel); color:var(--ink); border:1px solid var(--border-lt); border-radius:var(--radius-sm);}
.attack-row-kws{color:var(--muted); font-size:11px;}

/* ===== Card references show their full text =====
   Reference cards (popups, response forms, CPU actions) grow to fit the name,
   type, keywords and effect instead of clipping them with "…". */
.card.card-reference{flex:0 0 112px; width:112px; height:auto; min-height:140px; padding:5px; display:flex; flex-direction:column; overflow:visible;}
.card-reference .c-name{align-items:flex-start; line-height:1.15;}
.card-reference .c-name span:first-child{overflow:visible; white-space:normal; text-overflow:clip; overflow-wrap:anywhere;}
.card-reference .c-art{flex:0 0 46px; font-size:30px;}
.card-reference .c-type,.card-reference .c-kw{overflow:visible; white-space:normal; text-overflow:clip;}
.card-reference .c-type{font-size:7.5px;}
.card-reference .c-kw{font-size:8px; min-height:0; margin-bottom:2px;}
.card-reference .c-effect{display:block; overflow:visible; -webkit-line-clamp:unset; font-size:7.8px; line-height:1.2; min-height:0; margin-bottom:4px;}
.card-reference .c-pt{position:static; align-self:flex-end; margin-top:auto;}
@media(max-width:560px){.card.card-reference{flex-basis:96px; width:96px; min-height:124px;}.card-reference .c-art{flex-basis:38px; font-size:26px;}}
/* Table cards: long names get a third line and keywords wrap; the hover/tap peek has everything. */
.tt-name{-webkit-line-clamp:3;}
.tt-kw{white-space:normal; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
/* Reference cards: a touch larger text now that it has room. */
.card-reference .c-name{font-size:9px;}
.card-reference .c-type{font-size:8px;}
.card-reference .c-kw{font-size:8.5px;}
.card-reference .c-effect{font-size:8.5px;}
.card.card-reference{flex-basis:120px; width:120px;}
/* Detail-view cards: names wrap to two lines instead of "…". */
.card:not(.card-reference) .c-name span:first-child{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.1;}
/* Long confirm previews ("Block 1 · Take 7 (7 commander)") wrap on small screens instead of overflowing. */
@media(max-width:760px){.cmd-preview{white-space:normal; text-align:center;}}

/* ===== Ko-fi button: its own line under the project links ===== */
.project-links .kofi-btn{flex-basis:100%; display:flex; justify-content:center; margin-top:8px; border-bottom:0;}
.settings-about .project-links .kofi-btn{justify-content:flex-start;}
.project-links .kofi-btn img{display:block; height:36px; width:auto; border-radius:8px; transition:transform .12s, box-shadow .12s;}
.project-links .kofi-btn:hover img,.project-links .kofi-btn:focus-visible img{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.35);}
.project-links .kofi-btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:8px;}

/* ===== Settings: Restart game / New game ===== */
.settings-game-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.settings-game-btn{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--gold-dim); background:color-mix(in srgb,var(--gold) 10%,var(--panel2)); color:var(--ink); font-family:var(--font); text-align:left; cursor:pointer;}
.settings-game-btn strong{font-size:15px; font-weight:800; color:var(--ink);}
.settings-game-btn span{font-size:11.5px; color:var(--muted);}
.settings-game-btn:hover,.settings-game-btn:focus-visible{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,var(--panel2)); outline:none;}
@media(max-width:430px){.settings-game-btns{grid-template-columns:1fr;}}

/* ===== "Since your last turn" popup ===== */
.recap-popup{display:flex; flex-direction:column; gap:12px;}
.recap-section h4{margin:0 0 6px; font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.4px;}
.recap-section .recap-lines{font-size:13px;}

/* Input dialogs (confirm, counts, blockers) open above other popups such as Player Action. */
#inputOverlay{z-index:60;}

/* ===== Bottom bar: Player Action / Battlefield Rules icons ===== */
.cmd-icon-group{display:inline-flex; gap:6px;}
.cmd-icon-btn{position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:54px; height:46px; padding:0; border-radius:var(--radius-sm); border:1px solid var(--border-lt); background:var(--panel2); color:var(--ink); font-size:17px; cursor:pointer; transition:border-color .12s, transform .12s;}
.cmd-icon-btn:hover,.cmd-icon-btn:focus-visible{border-color:var(--gold); transform:translateY(-1px); outline:none;}
.cmd-icon-lbl{font-size:9px; color:var(--ink2); letter-spacing:.4px; text-transform:uppercase;}
.cmd-icon-badge{position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--gold); color:var(--bg); font-size:10px; font-weight:800; line-height:16px;}
@media(max-width:560px){.cmd-confirm-bar{flex-wrap:wrap; gap:8px;} .cmd-icon-btn{width:46px;}}
/* The two panels shown inside popups: always open, no disclosure header. */
.modal-panel .player-action-disclosure>summary,.modal-panel .rules-disclosure>summary{display:none;}
.modal-panel .player-action-disclosure,.modal-panel .rules-disclosure{border:0; background:transparent;}
.modal-panel .context-disclosure-body{padding:0;}

/* ===== Declaring attacks on the table ===== */
.tt-attack-target{cursor:pointer; transition:box-shadow .15s, border-color .15s;}
.tt-attack-target:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--seat) 60%,transparent);}
.tt-attack-target.is-target{box-shadow:0 0 0 3px var(--seat),0 0 22px color-mix(in srgb,var(--seat) 45%,transparent);}
.tt-target-chip{border-color:var(--seat)!important; color:var(--ink)!important; font-weight:700;}
.tt-incoming{border-color:var(--blood-lt)!important; color:var(--danger-ink)!important; font-weight:700;}
.tt-attackable{cursor:pointer;}
.tt-attackable .tt-card,.card.tt-attackable{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent);}
.tt-attackable:hover .tt-card,.card.tt-attackable:hover{transform:translateY(-3px); box-shadow:0 0 0 2px var(--gold),0 6px 16px rgba(0,0,0,.4);}
.tt-attackable.is-attacking-target .tt-card,.card.tt-attackable.is-attacking-target{transform:translateY(-8px); box-shadow:0 0 0 3px var(--blood-lt),0 8px 18px color-mix(in srgb,var(--blood-lt) 40%,transparent);}
.tt-cant-attack{opacity:.55;}
.tt-attack-badge{position:absolute; z-index:5; top:-10px; left:50%; transform:translateX(-50%); padding:1px 7px; border-radius:999px; background:var(--blood); border:1px solid var(--blood-lt); color:#fff; font-size:11px; font-weight:700; white-space:nowrap; pointer-events:none;}
.tt-attackable-pile{cursor:pointer; border-color:var(--gold)!important; font-family:var(--font);}
.tt-attackable-pile:hover{transform:translateY(-2px);}
.tt-blockable{cursor:pointer;}
.tt-blockable .tt-card{box-shadow:0 0 0 2px var(--blood-lt),0 0 14px color-mix(in srgb,var(--blood-lt) 40%,transparent);}
.atk-targets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.atk-target-chip{border-left:3px solid var(--seat)!important;}
.atk-target-chip.active{border-color:var(--seat)!important; background:color-mix(in srgb,var(--seat) 20%,var(--panel2))!important; font-weight:700;}
.atk-target-chip small{color:var(--muted); margin-left:4px;}
.atk-summary-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:6px 9px; margin-bottom:6px; border-left:3px solid var(--border); border-radius:var(--radius-sm); background:var(--panel2);}
.atk-summary-power{font-size:12px; color:var(--danger-ink); font-weight:700;}
.atk-summary-chips{display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%;}
.atk-chip{display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px; border-radius:999px; border:1px solid var(--border-lt); font-size:12px;}
.atk-chip small{color:var(--muted);}
.atk-chip button{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; padding:0 4px;}
.atk-chip button:hover{color:var(--danger-ink);}
.start-opponents{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px;}
.start-opponents li{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-left:3px solid var(--border); border-radius:var(--radius-sm); background:var(--panel2);}
.start-opponents small{color:var(--muted);}
.tt-attack-badge{top:auto; bottom:-11px;}

/* ===== Whose turn: the active seat lights up, the rest step back ===== */
.tt-seat{transition:opacity .2s, box-shadow .2s, border-color .2s, background .2s;}
.tt-seat.is-active{border:3px solid var(--seat); border-style:solid;
  background:linear-gradient(180deg,color-mix(in srgb,var(--seat) 16%,transparent),color-mix(in srgb,var(--seat) 5%,transparent));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--seat) 45%,transparent),0 0 28px color-mix(in srgb,var(--seat) 55%,transparent);
  animation:tt-turn-pulse 2.4s ease-in-out infinite;}
@keyframes tt-turn-pulse{
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--seat) 45%,transparent),0 0 18px color-mix(in srgb,var(--seat) 35%,transparent);}
  50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--seat) 70%,transparent),0 0 34px color-mix(in srgb,var(--seat) 65%,transparent);}
}
.tt-table:has(.tt-seat.is-active) .tt-seat:not(.is-active):not(.tt-attack-target){opacity:.72;}
.tt-table:has(.tt-seat.is-active) .tt-seat:not(.is-active):hover{opacity:1;}
.tt-chip.tt-turn{background:var(--seat); border-color:var(--seat); color:var(--bg); font-weight:800; letter-spacing:.3px;}
.tt-seat.is-active .tt-seat-name{color:var(--seat); text-shadow:0 0 10px color-mix(in srgb,var(--seat) 50%,transparent);}
@media (prefers-reduced-motion:reduce){.tt-seat.is-active{animation:none;}}
/* End Turn sits apart from the main button so the two are not mistaken for each other. */
.cmd-end-turn-btn{margin-left:18px;}
.settings-modal:focus{outline:none;}

/* ===== Zone browser (graveyards / exile) ===== */
.zone-browser{width:min(760px,100%); max-width:760px;}
.zone-owner-row{display:flex; align-items:center; gap:6px; margin:12px 0 8px;}
.zone-tabs{display:flex; flex:1; gap:6px; overflow-x:auto; padding:2px;}
.zone-tab{flex:0 0 auto; padding:6px 10px; border:1px solid var(--border-lt); border-left:3px solid var(--seat,var(--gold-dim)); border-radius:var(--radius-sm); background:var(--panel2); color:var(--ink2); font:12px var(--font); cursor:pointer; white-space:nowrap;}
.zone-tab small{color:var(--muted);}
.zone-tab:hover{color:var(--ink); border-color:var(--gold-dim);}
.zone-tab.active{color:var(--ink); border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.zone-flip{flex:0 0 auto; width:30px; height:30px; border:1px solid var(--border-lt); border-radius:50%; background:var(--panel2); color:var(--gold); font-size:18px; line-height:1; cursor:pointer;}
.zone-flip:hover{border-color:var(--gold);}
.zone-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.zone-seg{display:inline-flex; border:1px solid var(--border-lt); border-radius:var(--radius-sm); overflow:hidden;}
.zone-seg button{padding:5px 10px; border:0; background:transparent; color:var(--ink2); font:12px var(--font); cursor:pointer;}
.zone-seg button+button{border-left:1px solid var(--border-lt);}
.zone-seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold);}
.zone-card-grid{display:flex; flex-wrap:wrap; gap:8px; max-height:340px; padding:4px; margin-bottom:12px; overflow:auto;}
.zone-actions .zone-bulk{margin-top:8px; padding-top:8px; border-top:1px dashed var(--border-lt);}
@media(max-width:430px){.zone-flip{display:none;}}

/* ===== Attack builder: suggestions ===== */
.atk-suggest{display:flex; flex-direction:column; gap:6px; margin:6px 0 8px;}
.atk-repeat{align-self:flex-start;}
.atk-quick{display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.atk-quick-lbl{font-size:11px; color:var(--muted); margin-right:2px;}
.atk-quick-btn{padding:3px 9px; border:1px dashed var(--border-lt); border-radius:999px; background:transparent; color:var(--ink2); font:12px var(--font); cursor:pointer;}
.atk-quick-btn small{color:var(--muted);}
.atk-quick-btn.on-board{border-style:solid;}
.atk-quick-btn:hover{border-color:var(--gold); color:var(--ink);}
.attack-name{display:flex; align-items:center; gap:6px;}
.attack-name input{width:160px; padding:3px 6px; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg2); color:var(--ink); font:inherit;}
.atk-chip button[data-row-clone]:hover{color:var(--gold);}