:root {
      --bg: #111318;
      --panel: #1b1f2a;
      --panel-2: #242a38;
      --text: #e8edf5;
      --muted: #aeb7c6;
      --line: #394254;
      --nexus: #2b6fb8;
      --nexus-soft: #173a61;
      --exo: #b43a32;
      --exo-soft: #5b1e1a;
      --liberti: #b88720;
      --liberti-soft: #5d4211;
      --agathoi: #4f9d58;
      --agathoi-soft: #214e2a;
      --fabeot: #8a4fb0;
      --fabeot-soft: #3f2458;
      --ps: #d6b35a;
      --ok: #8bd17c;
      --bad: #ef7777;
      --warn: #e3bd67;
      --hq: #f1d37b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background: radial-gradient(circle at top, #222838 0, var(--bg) 55%);
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    header.topTitleBar {
      min-height: 58px;
      padding: 9px 14px;
      border-bottom: 1px solid var(--line);
      background: rgba(10, 12, 18, 0.82);
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: minmax(150px, 220px) 1fr minmax(150px, 220px);
      align-items: center;
      gap: 12px;
    }
    .topBarTitle { text-align: center; min-width: 0; }
    .topBarTitle h1 {
      margin: 0;
      font-size: 19px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.1;
    }
    .topBarTitle h1 span {
      font-size: 0.72em;
      letter-spacing: 0.035em;
      color: var(--muted);
      font-weight: 650;
      text-transform: none;
      white-space: nowrap;
    }
    .topBarAction { display: flex; align-items: center; }
    .topBarLeft { justify-content: flex-start; }
    .topBarRight { justify-content: flex-end; }
    .topBarBtn {
      width: auto;
      min-width: 136px;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 13px;
      white-space: nowrap;
    }
    .app { display: grid; grid-template-columns: 330px minmax(620px, 1fr) 360px; gap: 14px; padding: 14px; align-items: start; }
    .boardColumn { display: grid; gap: 14px; min-width: 0; }
    .panel { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 35px rgba(0,0,0,.25); overflow: hidden; }
    .panel h2, .panel h3 { margin: 0; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 16px; background: rgba(0,0,0,.16); }
    .panel .body { padding: 14px; }
    .setupPanel > details { margin: 0; border: 0; background: transparent; }
    .setupPanel > details > summary {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      font-size: 16px;
      background: rgba(0,0,0,.16);
      cursor: pointer;
      font-weight: 800;
      list-style-position: inside;
    }
    .setupPanel > details > summary::after { content: "aperto"; float: right; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .setupPanel > details:not([open]) > summary::after { content: "chiuso"; }
    .setupPanel > details:not([open]) { border-radius: 16px; }
    label { display: block; margin: 8px 0 5px; color: var(--muted); font-size: 13px; }
    .checkline { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--muted); }
    .checkline input { width: auto; margin: 0; }
    select, button { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: var(--panel-2); color: var(--text); font-size: 14px; }
    button { cursor: pointer; font-weight: 650; transition: transform .08s ease, border-color .12s ease, background .12s ease; }
    button:hover:not(:disabled) { transform: translateY(-1px); border-color: #5f6f91; background: #30384a; }
    button:disabled { opacity: .45; cursor: not-allowed; }
    .primary { background: linear-gradient(180deg, #3a6fca, #254d91); border-color: #5f8ade; }
    .danger { background: linear-gradient(180deg, #9d3935, #70231f); border-color: #c7574f; }
    .ghost { background: transparent; }
    .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
    .playerSetupRow {
      grid-template-columns: minmax(0, 0.95fr) minmax(180px, 1.35fr) minmax(105px, 0.75fr);
      align-items: end;
      gap: 10px;
    }
    .setupField { min-width: 0; }
    .setupField label { min-height: 32px; display: flex; align-items: flex-end; line-height: 1.15; }
    .commanderField select { font-size: 13px; padding-left: 9px; padding-right: 9px; }
    .modeField select { text-align-last: center; }
    @media (max-width: 1180px) {
      .playerSetupRow { grid-template-columns: 1fr; }
      .setupField label { min-height: 0; }
    }

    .stack { display: grid; gap: 8px; }
    .scorebox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
    .score { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.035); }
    .score strong { display: block; font-size: 15px; margin-bottom: 4px; }
    .score span { color: var(--muted); font-size: 13px; }
    .faction-nexus-text { color: #84b9ff; }
    .faction-exordium-text { color: #ff9b93; }
    .faction-liberti-text { color: #e4be62; }
    .faction-agathoi-text { color: #8fe09a; }
    .faction-fabeot-text { color: #d5a3ff; }
    #boardWrap { min-height: 830px; position: relative; display: grid; place-items: center; padding: 16px; }
    #board { position: relative; width: var(--board-native-width, 920px); height: var(--board-native-height, 780px); max-width: 100%; border-radius: 18px; background: radial-gradient(circle at center, rgba(214,179,90,.08), rgba(255,255,255,.025) 40%, rgba(0,0,0,.14) 100%); border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
    .hex { position: absolute; width: 54px; height: 62px; transform: translate(-50%, -50%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #222937; border: none; outline: 1px solid rgba(255,255,255,.09); color: var(--text); display: grid; place-items: center; font-size: 10px; padding: 0; overflow: visible; }
    .hex:hover { filter: brightness(1.2); transform: translate(-50%, -50%) !important; border-color: transparent; }
    .hex:hover:not(:disabled) { transform: translate(-50%, -50%) !important; background: #2a3344; }
    .hex.ps { background: linear-gradient(180deg, #534626, #292b34); box-shadow: inset 0 0 0 2px rgba(214,179,90,.45); }
    .hex.ps::after { content: "✦"; position: absolute; top: 3px; right: 7px; color: var(--ps); font-size: 14px; text-shadow: 0 0 8px rgba(214,179,90,.5); }
    .hex.psLocked { background: linear-gradient(180deg, #4d294e, #221d2b); box-shadow: inset 0 0 0 3px rgba(187,112,226,.85) !important; }
    .hex.psLocked::after { content: "⊘"; color: #d7a0ff; font-size: 15px; }
    .hex.hq { background: linear-gradient(180deg, #4a3d25, #1f2430); box-shadow: inset 0 0 0 3px rgba(241,211,123,.56); }
    .hex.hq::before { content: "⌂"; position: absolute; top: 3px; left: 7px; color: var(--hq); font-size: 15px; text-shadow: 0 0 8px rgba(241,211,123,.55); }
    .hex.hq.hq1 { outline: 1px solid rgba(132,185,255,.55); }
    .hex.hq.hq2 { outline: 1px solid rgba(255,155,147,.55); }
    .hex.moveTarget { background: #26443a; box-shadow: inset 0 0 0 3px rgba(139,209,124,.75); }
    .hex.attackTarget { background: #543035; box-shadow: inset 0 0 0 3px rgba(239,119,119,.82); }
    .hex.abilityTarget { background: #4c3f24; box-shadow: inset 0 0 0 3px rgba(227,189,103,.82); }
    .hex.buildTarget, .hex.spawnTarget { background: #263f52; box-shadow: inset 0 0 0 3px rgba(132,185,255,.82); }

    .hex.cellBlocked { background: linear-gradient(180deg, #35533a, #16251a); box-shadow: inset 0 0 0 3px rgba(143,224,154,.82) !important; }
    .hex.cellBlocked::after { content: "▧"; position:absolute; top:3px; right:7px; color:#8fe09a; font-size:14px; text-shadow:0 0 8px rgba(143,224,154,.65); }
    .hex.cellTrapNexus { box-shadow: inset 0 0 0 3px rgba(132,185,255,.66) !important; }
    .hex.cellPassageNexus { background: linear-gradient(180deg, #233a56, #172234); box-shadow: inset 0 0 0 3px rgba(132,185,255,.78) !important; }
    .hex.cellTrapAgathoi { box-shadow: inset 0 0 0 3px rgba(143,224,154,.66) !important; }
    .hex.cellBramble { background: linear-gradient(180deg, #2f4634, #1b2520); box-shadow: inset 0 0 0 3px rgba(143,224,154,.75) !important; }
    .hex.occupied { z-index: 2; }
    .hex.selected { z-index: 4; filter: brightness(1.28); box-shadow: inset 0 0 0 3px white !important; }
    .unitToken { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 2; border: 2px solid rgba(255,255,255,.72); box-shadow: 0 5px 10px rgba(0,0,0,.35), inset 0 -7px 13px rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.11); font-weight: 800; font-size: 12px; color: white; }
    .unitToken.faction-nexus { background: linear-gradient(180deg, var(--nexus), var(--nexus-soft)); }
    .unitToken.faction-exordium { background: linear-gradient(180deg, var(--exo), var(--exo-soft)); }
    .unitToken.faction-liberti { background: linear-gradient(180deg, var(--liberti), var(--liberti-soft)); }
    .unitToken.faction-agathoi { background: linear-gradient(180deg, var(--agathoi), var(--agathoi-soft)); }
    .unitToken.faction-fabeot { background: linear-gradient(180deg, var(--fabeot), var(--fabeot-soft)); }
    .iconBadge.faction-nexus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nexus) 65%, transparent); }
    .iconBadge.faction-exordium { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--exo) 65%, transparent); }
    .iconBadge.faction-liberti { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--liberti) 65%, transparent); }
    .iconBadge.faction-agathoi { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--agathoi) 65%, transparent); }
    .iconBadge.faction-fabeot { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fabeot) 65%, transparent); }
    .iconBadge.weight-leggera { border-color: rgba(255,255,255,.88); }
    .iconBadge.weight-pesante, .iconBadge.weight-elite { border-color: #f1c84b; border-width: 2px; }
    .iconBadge.weight-pivot, .iconBadge.type-comandante { border-color: #e45454; border-width: 2px; }
    .unitToken.type-fanteria { border-radius: 50%; }
    .unitToken.type-veicolo { border-radius: 12px; }
    .unitToken.type-struttura { border-radius: 9px; outline: 2px solid rgba(255,255,255,.20); }
    .unitToken.type-comandante { border-radius: 50%; box-shadow: 0 0 0 3px rgba(214,179,90,.45), 0 5px 10px rgba(0,0,0,.35), inset 0 -7px 13px rgba(0,0,0,.22); }
    .unitToken.type-qg { border-radius: 12px; border-color: rgba(241,211,123,.95); box-shadow: 0 0 0 3px rgba(241,211,123,.40), 0 8px 14px rgba(0,0,0,.45), inset 0 -7px 13px rgba(0,0,0,.22); }
    .unitToken .symbol { font-size: 21px; line-height: 1; transform: translateY(-1px); text-shadow: 0 1px 3px rgba(0,0,0,.65); }
    .unitToken .symbol { display:grid; place-items:center; width:24px; height:24px; }
    .unitToken .symbol svg { width:24px; height:24px; overflow:visible; }
    .unitToken.type-comandante .symbol svg { width:22px; height:22px; }
    .unitToken.type-struttura .symbol svg { width:25px; height:25px; }
    .unitToken.type-veicolo .symbol svg { width:24px; height:24px; }
    .unitToken.weight-pivot { border-color: #e45454; border-width: 3px; box-shadow: 0 0 0 3px rgba(228,84,84,.28), 0 5px 10px rgba(0,0,0,.35), inset 0 -7px 13px rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.11); }
    .unitToken.weight-elite { border-color: #f1c84b; border-width:3px; }
    .unitToken.weight-pesante { border-color: #f1c84b; border-width: 3px; }
    .unitToken.weight-leggera { border-color: #ffffff; }
    .unitToken.type-comandante { border-color: #e45454; border-width: 3px; box-shadow: 0 0 0 3px rgba(228,84,84,.24), 0 5px 10px rgba(0,0,0,.35), inset 0 -7px 13px rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.11); }
    .buyCard .head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
    .buyCard .iconBadge { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); flex:0 0 auto; }
    .buyCard .iconBadge svg { width:24px; height:24px; }
    .buyCard .titleWrap { min-width:0; flex:1; }
    .buyCard .titleRow { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
    .buyCard .titleRow strong { display:block; font-size:14px; }
    .buyCard .titleRow span { color: var(--muted); font-size:12px; }
    .buyCard .subRow { color: var(--muted); font-size:11px; margin-top:2px; }
    .unitToken.acted { opacity: .55; filter: grayscale(.35); }
    .unitToken .mini { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); z-index: 8; background: rgba(5,8,14,.92); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 1px 5px; font-size: 9px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none; }
    .unitToken .statMini { bottom: -10px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px 2px; font-size: 9px; letter-spacing: 0; font-weight: 800; line-height: 1; }
    .unitToken .statMini .statNum { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95); }
    .unitToken .statMini .statHp { color: #7fe18d; }
    .unitToken .statMini .statDef { color: #ffffff; }
    .unitToken .statMini .statAtt { color: #ff7272; }
    .unitToken .statMini .statSep { color: rgba(255,255,255,.72); margin: 0 1px; text-shadow: 0 1px 2px rgba(0,0,0,.95); }
    .unitToken.bleeding::after { content: "●"; position: absolute; top: -8px; right: -4px; color: #ef7777; text-shadow: 0 0 8px rgba(239,119,119,.75); font-size: 16px; }
    .unitToken.inhibited::before { content: "⊘"; position: absolute; top: -10px; left: -6px; color: #e3bd67; text-shadow: 0 0 8px rgba(227,189,103,.85); font-size: 18px; font-weight: 900; }
    .unitToken.thorns { box-shadow: 0 0 0 3px rgba(143,224,154,.42), 0 5px 10px rgba(0,0,0,.35), inset 0 -7px 13px rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.11); }
    .coord { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.28); font-size: 8px; pointer-events: none; }
    .unitCard, .buyCard { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
    .unitCard h4, .buyCard h4 { margin: 0 0 6px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
    .unitCard .meta, .buyCard .meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
    .bars { display: grid; gap: 4px; }
    .bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
    .bar > i { display: block; height: 100%; background: #7fc97f; }
    .bar.def > i { background: #8db3e2; }
    .stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .pill { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 7px; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.18); }
    .pill.bad { color: #ffb2b2; border-color: rgba(239,119,119,.35); }
    .pill.warn { color: #ffe1a1; border-color: rgba(227,189,103,.38); }
    .pill.good { color: #bff3b8; border-color: rgba(139,209,124,.42); }
    .pill.enePill, .enePill { color: #ffe1a1; border-color: rgba(227,189,103,.45); font-weight: 800; }
    .market { max-height: 330px; overflow: auto; padding-right: 6px; }
    .marketDock details { margin: 0; border: 0; border-radius: 16px; background: transparent; }
    .marketDock summary { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 16px; background: rgba(0,0,0,.16); cursor: pointer; font-weight: 800; }
    .marketDock summary::after { content: "chiuso"; float: right; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .marketDock details[open] summary::after { content: "aperto"; }
    .marketDock .body { padding: 12px; resize: vertical; overflow: auto; min-height: 120px; max-height: 520px; }
    .marketHelp { margin-bottom: 8px; }
    .marketDock .market { max-height: none; overflow: visible; padding-right: 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 8px; }
    .marketDock .buyCard { margin-bottom: 0; }
    .marketDock .buyCard button { margin-top: 7px; }
    .buyCard button { margin-top: 8px; padding: 8px; font-size: 12px; }
    .tacticCard { border: 1px solid rgba(227,189,103,.22); background: rgba(227,189,103,.045); border-radius: 12px; padding: 9px; margin-top: 8px; }
    .tacticCard h4 { margin: 0 0 5px; font-size: 13px; display:flex; justify-content:space-between; gap:8px; }
    .tacticCard .meta { color: var(--muted); font-size: 11px; line-height:1.35; }
    .tacticCard button { margin-top: 7px; padding: 8px; font-size: 12px; }
    .tacticCard.unavailable { opacity:.55; }
    .buyCard.unavailable { opacity: .58; }
    #log { height: 310px; overflow: auto; padding-right: 6px; font-size: 13px; line-height: 1.38; }
    .logItem { border-bottom: 1px solid rgba(255,255,255,.06); padding: 6px 0; color: #d7deec; }
    .logItem small { color: var(--muted); }
    .help { color: var(--muted); font-size: 13px; line-height: 1.45; }
    details { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.15); overflow: hidden; }
    summary { padding: 10px; cursor: pointer; color: var(--text); font-weight: 700; }
    table { width: 100%; border-collapse: collapse; font-size: 12px; }
    th, td { border-top: 1px solid rgba(255,255,255,.08); padding: 6px; text-align: left; vertical-align: top; }
    th { color: var(--muted); font-weight: 700; }
    .banner { display: none; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--warn); color: #ffe1a1; background: rgba(227,189,103,.11); border-radius: 12px; }
    .banner.show { display: block; }

    .statsToolbar { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
    .statsToolbar button { padding:7px 9px; font-size:11px; }
    .statGrid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
    .statTile { border:1px solid rgba(255,255,255,.09); border-radius:10px; background: rgba(255,255,255,.035); padding:8px; }
    .statTile strong { display:block; color:var(--text); font-size:14px; }
    .statTile span { color:var(--muted); font-size:11px; }
    .miniTable { max-height:250px; overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-top:8px; }
    .miniTable table { font-size:11px; }
    .miniTable th, .miniTable td { padding:5px; }
    .winNexus { color: var(--nexus); font-weight:700; }
    .winExordium { color: var(--exo); font-weight:700; }
    .winLiberti { color: var(--liberti); font-weight:700; }
    .winAgathoi { color: var(--agathoi); font-weight:700; }
    .winFabeot { color: var(--fabeot); font-weight:700; }

    @media (max-width: 1180px) { .app { grid-template-columns: 1fr; } #boardWrap { min-height: 830px; } #board { width: var(--board-native-width, 920px); height: var(--board-native-height, 780px); } .marketDock .market { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .handStatusGrid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  header.topTitleBar { grid-template-columns: 1fr; gap: 8px; }
  .topBarLeft, .topBarRight { justify-content: stretch; }
  .topBarBtn { width: 100%; }
  .topBarTitle { order: -1; }
  .topBarTitle h1 { font-size: 16px; }
}


/* C1b – Card/deck/hand debug UI */
.cardDebugDock .body { padding: 0; }
.cardZonePanel { max-height: 540px; min-height: 310px; overflow: auto; resize: vertical; padding: 0 10px 10px 0; }
.handStatusBanner { position: sticky; top: 0; z-index: 8; padding: 10px 12px; margin: 0 0 10px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(27,31,42,.98), rgba(20,23,32,.96)); box-shadow: 0 8px 18px rgba(0,0,0,.28); }
.handBannerTitle { display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:8px; }
.handBannerTitle strong { font-size:14px; letter-spacing:.02em; }
.handBannerTitle span { color: var(--muted); font-size: 11px; text-align:right; }
.deckRecoveryBtn { margin: 0 0 8px; padding: 7px 10px; font-size: 11px; border-color: rgba(227,189,103,.45); background: rgba(227,189,103,.12); color: #ffe1a1; }
.deckRecoveryBtn:disabled { opacity: .45; cursor: not-allowed; }
.handStatusGrid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.handBannerPlayer { border: 1px solid rgba(255,255,255,.10); border-radius: 11px; padding: 8px; background: rgba(0,0,0,.18); }
.handBannerPlayer.current { border-color: rgba(227,189,103,.45); box-shadow: inset 0 0 0 1px rgba(227,189,103,.16); }
.handBannerPlayer strong { display:block; font-size:12px; margin-bottom:5px; }
.handBannerPills { display:flex; flex-wrap:wrap; gap:4px; }
.handScrollContent { padding: 0 12px 12px; }
.cardZoneGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.cardZonePlayer { border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(0,0,0,.16); padding: 10px; }
.cardZonePlayer h4 { margin: 0 0 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.miniSectionTitle { color: var(--muted); font-size: 10px; margin: 7px 0 5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.debugStarterGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; }
.debugStarterSlot { min-width: 0; }
.miniLabel { color: var(--muted); font-size: 10px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.debugHandList { display: grid; gap: 6px; }
.debugCard { border: 1px solid rgba(227,189,103,.18); background: rgba(227,189,103,.045); border-radius: 10px; padding: 7px; min-width: 0; }
.debugCard.empty { opacity: .55; color: var(--muted); font-size: 11px; }
.debugCard strong { display: block; font-size: 12px; line-height: 1.2; margin-bottom: 2px; overflow-wrap: anywhere; }
.debugCard span { color: var(--muted); font-size: 11px; }
.debugCard .stats { margin-top: 5px; gap: 4px; }
.debugCard .pill { font-size: 10px; padding: 2px 6px; }
.cardDebugIntro h4 span { color: var(--muted); font-size: 11px; font-weight: 500; }


/* C1c – Starter card operative buttons */
.debugStarterSlot.playable {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(227,189,103,.25);
  background: rgba(227,189,103,.035);
}
.starterAction { margin-top: 6px; }
.starterAction button {
  width: 100%;
  margin-top: 2px;
  padding: 7px;
  font-size: 11px;
}
.starterAction .meta {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 10px;
  line-height: 1.25;
}


/* C1e – Hand unit cards playable */
.debugHandSlot.playable {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(127,201,127,.25);
  background: rgba(127,201,127,.035);
}
.debugHandSlot.pending {
  outline: 2px solid rgba(227,189,103,.45);
  outline-offset: 2px;
}
.handAction { margin-top: 6px; }
.handAction button {
  width: 100%;
  margin-top: 2px;
  padding: 7px;
  font-size: 11px;
}
.handAction .meta {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 10px;
  line-height: 1.25;
}


/* C1h – Deck/Roster sanity pass */
.debugCard.overflow {
  box-shadow: inset 0 0 0 1px rgba(227,120,120,.28);
}


/* C2b – Tactic hand UI / debug refinement */
.debugCard.tacticCardDebug {
  border-style: dashed;
  position: relative;
}

.debugCard.tacticCardDebug > strong::before {
  content: "TATTICA · ";
  font-size: 0.78em;
  opacity: 0.75;
}

.tacticDebugDetails {
  margin-top: 8px;
  display: grid;
  gap: 7px;
}

.tacticTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tacticPill {
  font-weight: 700;
}

.tacticGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.tacticGrid div {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 5px 6px;
  background: rgba(0,0,0,0.16);
}

.tacticGrid span,
.tacticCondition span {
  display: block;
  font-size: 0.72rem;
  opacity: 0.72;
  margin-bottom: 2px;
}

.tacticGrid strong {
  font-size: 0.78rem;
  line-height: 1.15;
}

.tacticCondition,
.tacticEffect,
.tacticStatus,
.tacticNotes {
  font-size: 0.78rem;
  line-height: 1.25;
  opacity: 0.92;
}

.tacticEffect {
  border-left: 3px solid rgba(255,255,255,0.22);
  padding-left: 7px;
}

.tacticStatus {
  opacity: 0.68;
  font-style: italic;
}

.tacticNotes {
  opacity: 0.72;
}


/* C2c-1 – playable single damage tactic markers */
.debugHandSlot.playable .debugCard.tacticCardDebug {
  border-style: solid;
}

.debugHandSlot.playable .debugCard.tacticCardDebug > strong::before {
  content: "TATTICA GIOCABILE · ";
}


/* C2d-1 – Unit Market / Hand UI Reorganization */
.handPrimaryDock h2 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.marketDebugDock { opacity: .96; }
.debugCard.tacticCardDebug { padding: 6px; }
.debugCard.tacticCardDebug strong { font-size: 11.5px; margin-bottom: 1px; }
.debugCard.tacticCardDebug > span { font-size: 10px; }
.debugCard.tacticCardDebug > strong::before { content: "TAC · "; font-size: 0.75em; opacity: 0.75; }
.debugHandSlot.playable .debugCard.tacticCardDebug > strong::before { content: "TAC OK · "; }
.debugCard.tacticCardDebug .stats { margin-top: 4px; }
.debugCard.tacticCardDebug .pill { font-size: 9.5px; padding: 1px 5px; }
.tacticCompactDetails { margin-top: 5px; gap: 4px; }
.tacticCompactDetails .tacticTags { gap: 3px; }
.tacticCompactDetails .tacticEffect { font-size: 0.74rem; line-height: 1.2; max-height: 4.8em; overflow: hidden; border-left: 3px solid rgba(227,189,103,.34); padding-left: 6px; }
.tacticCompactDetails .tacticEffect strong { display:inline; font-size: inherit; margin: 0; color: var(--text); }
.tacticTinyMeta { display:flex; flex-wrap:wrap; gap:3px; opacity:.72; }
.tacticTinyMeta span { border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:1px 5px; font-size:9px; background:rgba(0,0,0,.14); }
.debugHandSlot .handAction { margin-top: 4px; }
.debugHandSlot .handAction button { padding: 6px; font-size: 10.5px; }

/* APK-M1 – Mobile Fit / Landscape Pass
   Obiettivo: rendere la build convertita in APK usabile su smartphone landscape
   senza introdurre una seconda versione del gioco. */
.mobileMapHud { display:none; }
#board { transform: translate3d(var(--board-camera-x, 0px), var(--board-camera-y, 0px), 0) scale(var(--board-fit-scale, 1)); transform-origin: center center; transition: transform .12s ease; will-change: transform; }

@media (pointer: coarse), (max-width: 980px), (max-height: 520px) {
  html, body { min-width: 0; overflow-x: hidden; overscroll-behavior: none; }
  body.mobile-apk-m1 {
    min-height: 100svh;
    background: radial-gradient(circle at top, #222838 0, #111318 62%);
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body.mobile-apk-m1 header.topTitleBar {
    min-height: 44px;
    padding: max(5px, env(safe-area-inset-top)) 7px 5px;
    grid-template-columns: minmax(92px, .55fr) minmax(0, 1fr) minmax(92px, .55fr);
    gap: 6px;
    position: sticky;
  }
  body.mobile-apk-m1 .topBarTitle h1 { font-size: clamp(11px, 2.7vw, 15px); letter-spacing: .045em; }
  body.mobile-apk-m1 .topBarTitle h1 span { display:block; font-size: .68em; margin-top: 1px; }
  body.mobile-apk-m1 .topBarBtn { min-width: 0; width: 100%; padding: 8px 7px; border-radius: 9px; font-size: 12px; min-height: 38px; }
  body.mobile-apk-m1 .app {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
    align-items: stretch;
  }
  body.mobile-apk-m1 .boardColumn { order: -1; display: grid; gap: 8px; }
  body.mobile-apk-m1 #boardWrap {
    min-height: min(74svh, calc(100svh - 58px));
    height: min(74svh, calc(100svh - 58px));
    padding: 4px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
  }
  body.mobile-apk-m1 #board {
    width: var(--board-native-width, 920px);
    height: var(--board-native-height, 780px);
    max-width: none;
    flex: 0 0 auto;
    touch-action: manipulation;
  }
  body.mobile-apk-m1 .mobileMapHud {
    display:flex;
    position:absolute;
    left: 8px;
    top: 8px;
    right: 8px;
    z-index: 12;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    pointer-events:none;
    color: rgba(232,237,245,.78);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing:.05em;
  }
  body.mobile-apk-m1 .mobileMapHud button {
    pointer-events:auto;
    width:auto;
    min-width:72px;
    min-height:34px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(10,12,18,.58);
    backdrop-filter: blur(4px);
    font-size:11px;
  }
  body.mobile-apk-m1 .panel { border-radius: 12px; }
  body.mobile-apk-m1 .panel h2, body.mobile-apk-m1 .panel h3,
  body.mobile-apk-m1 .setupPanel > details > summary,
  body.mobile-apk-m1 .marketDock summary,
  body.mobile-apk-m1 summary { padding: 9px 10px; font-size: 13px; }
  body.mobile-apk-m1 .panel .body { padding: 9px; }
  body.mobile-apk-m1 .setupPanel > details:not([open]) { min-height: 40px; }
  body.mobile-apk-m1 .help { font-size: 11px; line-height: 1.32; }
  body.mobile-apk-m1 label { font-size: 11px; margin: 5px 0 3px; }
  body.mobile-apk-m1 select, body.mobile-apk-m1 button { min-height: 40px; padding: 8px 9px; font-size: 12px; border-radius: 10px; }
  body.mobile-apk-m1 .playerSetupRow { grid-template-columns: 1fr 1fr 0.72fr; gap: 6px; }
  body.mobile-apk-m1 .setupField label { min-height: 0; font-size: 10px; }
  body.mobile-apk-m1 .scorebox { grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
  body.mobile-apk-m1 .score { padding: 7px; }
  body.mobile-apk-m1 .score strong { font-size: 12px; }
  body.mobile-apk-m1 .score span { font-size: 10px; }
  body.mobile-apk-m1 .unitCard, body.mobile-apk-m1 .buyCard, body.mobile-apk-m1 .tacticCard { padding: 7px; margin-bottom: 6px; }
  body.mobile-apk-m1 .unitCard h4, body.mobile-apk-m1 .buyCard h4, body.mobile-apk-m1 .tacticCard h4 { font-size: 12px; }
  body.mobile-apk-m1 .unitCard .meta, body.mobile-apk-m1 .buyCard .meta, body.mobile-apk-m1 .tacticCard .meta { font-size: 10.5px; }
  body.mobile-apk-m1 .stats { gap: 4px; margin-top: 5px; }
  body.mobile-apk-m1 .pill { font-size: 9px; padding: 2px 5px; }
  body.mobile-apk-m1 .cardZonePanel { max-height: 44svh; min-height: 180px; resize: none; padding-right: 4px; }
  body.mobile-apk-m1 .handStatusBanner { padding: 7px 8px; }
  body.mobile-apk-m1 .cardZoneGrid { grid-template-columns: 1fr; gap: 7px; }
  body.mobile-apk-m1 .debugStarterGrid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
  body.mobile-apk-m1 .debugCard strong { font-size: 10.5px; }
  body.mobile-apk-m1 .debugCard span { font-size: 9.5px; }
  body.mobile-apk-m1 .marketDock .body { max-height: 44svh; min-height: 110px; resize: none; }
  body.mobile-apk-m1 .marketDock .market { grid-template-columns: 1fr; gap: 6px; }
  body.mobile-apk-m1 #log { height: 24svh; min-height: 118px; font-size: 11px; }
  body.mobile-apk-m1 .logItem { padding: 4px 0; }
  body.mobile-apk-m1 .coord { display:none; }
  body.mobile-apk-m1 .hex { width: 56px; height: 64px; }
  body.mobile-apk-m1 .unitToken { width: 44px; height: 44px; }
  body.mobile-apk-m1 .unitToken .statMini { font-size: 9.5px; bottom: -11px; }
}

@media (pointer: coarse) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  body.mobile-apk-m1.mobile-landscape .app {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 36vw);
    grid-template-rows: auto minmax(0, 1fr) minmax(130px, 0.48fr);
    height: calc(100svh - 48px);
    overflow: hidden;
  }
  body.mobile-apk-m1.mobile-landscape .boardColumn {
    display: contents;
  }
  body.mobile-apk-m1.mobile-landscape #boardWrap {
    grid-column: 1;
    grid-row: 1 / span 3;
    height: 100%;
    min-height: 0;
  }
  body.mobile-apk-m1.mobile-landscape .setupPanel {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    max-height: 39svh;
    overflow: auto;
  }
  body.mobile-apk-m1.mobile-landscape .setupPanel > details:not([open]) > summary {
    border-bottom: 0;
  }
  body.mobile-apk-m1.mobile-landscape .handPrimaryDock {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
  }
  body.mobile-apk-m1.mobile-landscape .handPrimaryDock .body { height: calc(100% - 38px); overflow: hidden; }
  body.mobile-apk-m1.mobile-landscape .cardZonePanel { max-height: 100%; height: 100%; overflow: auto; }
  body.mobile-apk-m1.mobile-landscape .marketDock { display:none; }
  body.mobile-apk-m1.mobile-landscape .app > section.panel:last-child {
    grid-column: 2;
    grid-row: 3;
    min-height: 0;
    max-height: 46svh;
    overflow: auto;
  }
  body.mobile-apk-m1.mobile-landscape .app > section.panel:last-child .body { padding: 7px; }
  body.mobile-apk-m1.mobile-landscape #selectedPanel { margin-bottom: 5px; }
  body.mobile-apk-m1.mobile-landscape #actionPanel { gap: 5px; }
  body.mobile-apk-m1.mobile-landscape #actionPanel button { min-height: 36px; }
  body.mobile-apk-m1.mobile-landscape #log { height: 92px; min-height: 92px; }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 720px) and (orientation: portrait) {
  body.mobile-apk-m1.mobile-portrait::before {
    content: "Ruota il dispositivo in orizzontale per la modalità APK-M1.";
    display:block;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 7px 10px;
    text-align:center;
    color:#ffe1a1;
    background: rgba(90,55,10,.88);
    border-bottom:1px solid rgba(227,189,103,.45);
    font-size:12px;
  }
  body.mobile-apk-m1.mobile-portrait #boardWrap { height: 58svh; min-height: 360px; }
}


/* APK-M2 – Mobile Map Camera / Drawer UI
   M2 mantiene il renderer esagonale corrente e aggiunge una camera mobile
   pan/zoom più drawer sovrapposti. Nessuna modifica a logica, AI o regole. */
.mobileMapButtons { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }

@media (pointer: coarse), (max-width: 980px), (max-height: 520px) {
  body.mobile-apk-m2 #boardWrap {
    touch-action: none;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10)), var(--panel);
  }
  body.mobile-apk-m2 #board {
    cursor: grab;
    transition: transform .07s linear;
  }
  body.mobile-apk-m2 #board:active { cursor: grabbing; }
  body.mobile-apk-m2 .mobileMapHud {
    align-items:flex-start;
    pointer-events:none;
  }
  body.mobile-apk-m2 .mobileMapHud > span {
    padding: 8px 10px;
    min-height: 34px;
    display:flex;
    align-items:center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(10,12,18,.58);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    pointer-events:none;
  }
  body.mobile-apk-m2 .mobileMapButtons { pointer-events:auto; }
  body.mobile-apk-m2 .mobileMapButtons button {
    min-width: 42px;
    width: auto;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(10,12,18,.62);
    backdrop-filter: blur(4px);
    font-size: 11px;
  }
  body.mobile-apk-m2 #zoomOutBoardBtn,
  body.mobile-apk-m2 #zoomInBoardBtn {
    min-width: 34px;
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  body.mobile-apk-m2.mobile-landscape {
    overflow: hidden;
  }
  body.mobile-apk-m2.mobile-landscape header.topTitleBar {
    height: 46px;
    min-height: 46px;
    position: relative;
  }
  body.mobile-apk-m2.mobile-landscape .app {
    display:block;
    position:relative;
    height: calc(100svh - 46px);
    min-height: 0;
    overflow:hidden;
    padding:0;
  }
  body.mobile-apk-m2.mobile-landscape .boardColumn {
    display:block;
    width:100%;
    height:100%;
  }
  body.mobile-apk-m2.mobile-landscape #boardWrap {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    grid-column:auto;
    grid-row:auto;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    padding:0;
  }
  body.mobile-apk-m2.mobile-landscape .marketDock { display:none; }

  body.mobile-apk-m2.mobile-landscape .setupPanel,
  body.mobile-apk-m2.mobile-landscape .handPrimaryDock,
  body.mobile-apk-m2.mobile-landscape .app > section.panel:last-child {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    top: calc(46px + max(8px, env(safe-area-inset-top)));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(370px, 44vw);
    min-width: min(330px, 44vw);
    max-width: calc(100vw - 24px);
    z-index: 26;
    transform: translateX(calc(100% + 18px));
    transition: transform .16s ease, opacity .16s ease;
    opacity: .96;
    overflow:hidden;
    display:block;
    box-shadow: 0 18px 45px rgba(0,0,0,.48);
  }
  body.mobile-apk-m2.mobile-landscape.mobile-drawer-setup .setupPanel,
  body.mobile-apk-m2.mobile-landscape.mobile-drawer-hand .handPrimaryDock,
  body.mobile-apk-m2.mobile-landscape.mobile-drawer-command .app > section.panel:last-child {
    transform: translateX(0);
  }
  body.mobile-apk-m2.mobile-landscape .setupPanel > details,
  body.mobile-apk-m2.mobile-landscape .setupPanel > details > .body,
  body.mobile-apk-m2.mobile-landscape .handPrimaryDock > .body,
  body.mobile-apk-m2.mobile-landscape .app > section.panel:last-child > .body {
    height:100%;
    min-height:0;
  }
  body.mobile-apk-m2.mobile-landscape .setupPanel > details[open] > .body,
  body.mobile-apk-m2.mobile-landscape .handPrimaryDock > .body,
  body.mobile-apk-m2.mobile-landscape .app > section.panel:last-child > .body {
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-apk-m2.mobile-landscape .setupPanel > details:not([open]) {
    height:auto;
  }
  body.mobile-apk-m2.mobile-landscape .cardZonePanel {
    height: calc(100% - 4px);
    max-height:none;
    min-height:0;
    overflow:auto;
  }
  body.mobile-apk-m2.mobile-landscape .app > section.panel:last-child #log {
    height: 34svh;
    min-height: 118px;
  }
  body.mobile-apk-m2.mobile-landscape .app > section.panel:last-child #actionPanel button {
    min-height: 39px;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 720px) and (orientation: portrait) {
  body.mobile-apk-m2.mobile-portrait::before {
    content: "Ruota il dispositivo in orizzontale per APK-M2: mappa fullscreen, pan/zoom e drawer.";
  }
}


/* APK-M2b – Non-fullscreen mobile layout + splash shell
   Correzione dopo test M2: la mappa fullscreen rendeva difficili mano/scroll e gestione da smartphone.
   M2b conserva fit/camera leggera, ma torna a un layout visibile e scrollabile. */
.appSplash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 30%, rgba(170,40,30,.22), transparent 34%),
    radial-gradient(circle at 20% 80%, rgba(40,88,160,.18), transparent 35%),
    #05060a;
  color: var(--text);
  transition: opacity .32s ease, visibility .32s ease;
}
.appSplash.isHidden { opacity:0; visibility:hidden; pointer-events:none; }
.splashCard {
  width: min(620px, 92vw);
  min-height: min(340px, 72svh);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(20,24,34,.92), rgba(8,10,16,.92));
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 50px rgba(255,255,255,.03);
}
.splashKicker { font-size: clamp(12px, 2.4vw, 16px); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.splashLogoText {
  font-size: clamp(38px, 9vw, 86px);
  line-height:.9;
  letter-spacing:.08em;
  font-weight:900;
  text-shadow: 0 0 24px rgba(188,47,37,.35);
}
.splashSubtitle { color:var(--muted); font-size: clamp(14px, 2.8vw, 20px); }
.splashHint { color:var(--accent); font-size: 13px; margin-top: 6px; }
.splashSkipBtn { max-width: 180px; margin-top: 6px; }

@media (pointer: coarse), (max-width: 980px), (max-height: 520px) {
  body.mobile-apk-m2b {
    overflow: auto !important;
    overscroll-behavior: contain;
    touch-action: manipulation;
  }
  body.mobile-apk-m2b .mobileMapHud > span { display:none; }
  body.mobile-apk-m2b .mobileMapButtons button { min-height:36px; }
  body.mobile-apk-m2b #openHandDrawerBtn,
  body.mobile-apk-m2b #openCommandDrawerBtn,
  body.mobile-apk-m2b #openSetupDrawerBtn { display:inline-flex; }
}

@media (pointer: coarse) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  body.mobile-apk-m2b.mobile-landscape header.topTitleBar {
    height: 46px !important;
    min-height: 46px !important;
  }
  body.mobile-apk-m2b.mobile-landscape .app {
    display:grid !important;
    grid-template-columns: minmax(360px, 58vw) minmax(250px, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 7px !important;
    height: auto !important;
    min-height: calc(100svh - 46px) !important;
    overflow: auto !important;
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }
  body.mobile-apk-m2b.mobile-landscape .setupPanel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    bottom:auto !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    opacity:1 !important;
    overflow:visible !important;
    box-shadow:none !important;
  }
  body.mobile-apk-m2b.mobile-landscape .setupPanel > details > summary { min-height: 34px; padding: 7px 10px; }
  body.mobile-apk-m2b.mobile-landscape .setupPanel > details[open] > .body {
    max-height: 45svh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.mobile-apk-m2b.mobile-landscape .boardColumn {
    display: contents !important;
    width:auto !important;
    height:auto !important;
  }
  body.mobile-apk-m2b.mobile-landscape #boardWrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: calc(100svh - 100px) !important;
    min-height: 250px !important;
    max-height: calc(100svh - 86px) !important;
    border-radius: 13px !important;
    border: 1px solid var(--line) !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
  body.mobile-apk-m2b.mobile-landscape .handPrimaryDock {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height: calc((100svh - 104px) * .52) !important;
    min-height: 130px !important;
    bottom:auto !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    opacity:1 !important;
    display:block !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }
  body.mobile-apk-m2b.mobile-landscape .handPrimaryDock .body,
  body.mobile-apk-m2b.mobile-landscape .handPrimaryDock > .body {
    height: calc(100% - 38px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  body.mobile-apk-m2b.mobile-landscape .cardZonePanel {
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
  }
  body.mobile-apk-m2b.mobile-landscape .marketDock { display:none !important; }
  body.mobile-apk-m2b.mobile-landscape .app > section.panel:last-child {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self:end !important;
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height: calc((100svh - 104px) * .46) !important;
    min-height: 120px !important;
    bottom:auto !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    opacity:1 !important;
    display:block !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }
  body.mobile-apk-m2b.mobile-landscape .app > section.panel:last-child > .body {
    height: calc(100% - 38px) !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-apk-m2b.mobile-landscape .app > section.panel:last-child #log {
    height: 72px !important;
    min-height: 72px !important;
  }
  body.mobile-apk-m2b.mobile-landscape .mobileMapHud {
    top: 5px;
    left: 5px;
    right: 5px;
    padding: 0;
  }
  body.mobile-apk-m2b.mobile-landscape .mobileMapButtons {
    justify-content: space-between;
    width:100%;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 720px) and (orientation: portrait) {
  body.mobile-apk-m2b.mobile-portrait::before {
    content: "Ruota il dispositivo in orizzontale: APK-M2b usa mappa adattata + mano e comandi visibili." !important;
  }
}


/* APK-M3b – Intro Flow Polish / Splash / Music assets */
.appSplash[data-splash-phase] {
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#000;
  padding:0;
  touch-action:manipulation;
}
.splashSlides {
  position:absolute;
  inset:0;
  z-index:0;
  background:#000;
}
.splashSlide {
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.025);
  pointer-events:none;
  will-change:opacity, transform;
}
.splashSlideDev {
  transition: opacity .82s ease, transform 3.4s ease;
}
.splashSlideTitle {
  transition: opacity 1.85s ease, transform 13s cubic-bezier(.18,.82,.18,1);
  transform:scale(1.055);
}
.splashSlide.isActive {
  opacity:1;
  transform:scale(1);
}
.splashSlide img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.splashShade {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.88;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 36%, rgba(0,0,0,.54)),
    radial-gradient(circle at 50% 48%, transparent 42%, rgba(0,0,0,.30));
}
.appSplash[data-splash-phase="dev"] .splashShade { opacity:.34; }
.appSplash[data-splash-phase="title"] .splashShade { opacity:.56; }
.appSplash[data-splash-phase="boot"] .splashShade,
.appSplash[data-splash-phase="blackout"] .splashShade { opacity:1; background:#000; }
.splashUi {
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:#f4f0ea;
  text-align:center;
  pointer-events:none;
  text-shadow:0 2px 16px rgba(0,0,0,.9);
}
.splashEnterBtn {
  position:absolute;
  left:50%;
  bottom:clamp(58px, 9.2vh, 96px);
  transform:translateX(-50%) translateY(10px);
  min-width:min(420px, 78vw);
  min-height:48px;
  padding:12px 30px;
  border-radius:999px;
  border:1px solid rgba(186, 36, 36, .72);
  background:
    linear-gradient(180deg, rgba(58,18,18,.88), rgba(18,10,9,.90)),
    radial-gradient(circle at 50% 0%, rgba(225,190,130,.24), transparent 48%);
  color:#f2e9dc;
  font-weight:900;
  letter-spacing:.115em;
  text-transform:uppercase;
  box-shadow:
    0 0 0 1px rgba(255,225,180,.10) inset,
    0 14px 42px rgba(0,0,0,.66),
    0 0 28px rgba(130,0,0,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .75s ease 1.1s, transform .75s ease 1.1s, border-color .22s ease, filter .22s ease;
}
.appSplash[data-splash-phase="title"] .splashEnterBtn {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.splashEnterBtn:hover,
.splashEnterBtn:focus-visible {
  border-color:rgba(230,70,55,.96);
  filter:brightness(1.08);
}
.appSplash.isHidden {
  opacity:0;
  pointer-events:none;
  transition:opacity .68s ease;
}

@media (pointer: coarse) and (orientation: landscape), (max-height: 560px) and (orientation: landscape) {
  .splashEnterBtn {
    min-height:38px;
    min-width:min(360px, 70vw);
    padding:8px 20px;
    bottom:max(34px, env(safe-area-inset-bottom));
    font-size:12px;
  }
}

@media (orientation: portrait) {
  .splashSlide img { object-fit:cover; }
  .splashEnterBtn {
    bottom:max(66px, env(safe-area-inset-bottom));
    min-width:min(360px, 84vw);
  }
}

/* APK-M4 – Fixed Mobile Game Layout / Hard Mobile UI Rebuild
   Patch correttiva: niente scroll pagina, niente pan/zoom libero obbligatorio,
   mappa centrata con preset camera e pannelli bottom-sheet. */
.mobileStatusStrip,
.mobileGameBar { display:none; }

@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  html.mobile-apk-m4-root {
    width:100%;
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none;
  }
  body.mobile-apk-m4 {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:manipulation;
    background:#080a10;
    --m4-header-h: 36px;
    --m4-bar-h: 39px;
    --m4-status-h: 22px;
    --m4-gap: 4px;
    --m4-sheet-h: min(54dvh, 250px);
  }
  body.mobile-apk-m4 * {
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-apk-m4 header.topTitleBar {
    position:fixed !important;
    z-index:80;
    left:0;
    right:0;
    top:0;
    height:var(--m4-header-h) !important;
    min-height:var(--m4-header-h) !important;
    padding:3px max(5px, env(safe-area-inset-right)) 3px max(5px, env(safe-area-inset-left)) !important;
    grid-template-columns:72px 1fr 72px !important;
    gap:5px !important;
    background:rgba(6,8,13,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:none !important;
  }
  body.mobile-apk-m4 .topBarTitle h1 {
    font-size:10px !important;
    letter-spacing:.04em !important;
    line-height:1 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.mobile-apk-m4 .topBarTitle h1 span { display:none !important; }
  body.mobile-apk-m4 .topBarBtn {
    min-width:0 !important;
    width:100% !important;
    min-height:27px !important;
    height:27px !important;
    padding:2px 5px !important;
    border-radius:7px !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  body.mobile-apk-m4 main.app {
    display:block !important;
    position:fixed !important;
    z-index:10;
    left:0;
    right:0;
    top:var(--m4-header-h);
    bottom:0;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  body.mobile-apk-m4 .boardColumn { display:block !important; width:auto !important; height:auto !important; }
  body.mobile-apk-m4 #boardWrap {
    position:fixed !important;
    z-index:12;
    left:max(var(--m4-gap), env(safe-area-inset-left));
    right:max(var(--m4-gap), env(safe-area-inset-right));
    top:calc(var(--m4-header-h) + var(--m4-gap));
    bottom:calc(var(--m4-bar-h) + max(var(--m4-gap), env(safe-area-inset-bottom))) !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,.11) !important;
    background:radial-gradient(circle at 50% 48%, rgba(214,179,90,.08), rgba(255,255,255,.018) 42%, rgba(0,0,0,.22)), #111722 !important;
    box-shadow:none !important;
    touch-action:manipulation !important;
    isolation:isolate;
  }
  body.mobile-apk-m4.mobile-panel-hand #boardWrap,
  body.mobile-apk-m4.mobile-panel-command #boardWrap,
  body.mobile-apk-m4.mobile-panel-setup #boardWrap {
    bottom:calc(var(--m4-bar-h) + var(--m4-sheet-h) + max(var(--m4-gap), env(safe-area-inset-bottom))) !important;
  }
  body.mobile-apk-m4 #board {
    width:var(--board-native-width, 920px) !important;
    height:var(--board-native-height, 780px) !important;
    max-width:none !important;
    flex:0 0 auto !important;
    position:relative !important;
    border-radius:12px !important;
    overflow:hidden !important;
    transform:translate(var(--board-camera-x, 0px), var(--board-camera-y, 0px)) scale(var(--board-fit-scale, 1)) !important;
    transform-origin:center center !important;
    transition:none !important;
    will-change:auto !important;
    cursor:default !important;
    touch-action:manipulation !important;
  }
  body.mobile-apk-m4 .mobileMapHud { display:none !important; }
  body.mobile-apk-m4 .coord { display:none !important; }
  body.mobile-apk-m4 .hex {
    width:54px !important;
    height:62px !important;
    font-size:9px !important;
    touch-action:manipulation !important;
  }
  body.mobile-apk-m4 .unitToken {
    width:42px !important;
    height:42px !important;
    font-size:11px !important;
  }
  body.mobile-apk-m4 .unitToken .symbol,
  body.mobile-apk-m4 .unitToken .symbol svg { width:22px !important; height:22px !important; }
  body.mobile-apk-m4 .unitToken .statMini {
    bottom:-10px !important;
    font-size:8.8px !important;
    padding:1px 3px !important;
  }

  body.mobile-apk-m4 .mobileStatusStrip {
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    z-index:84;
    left:max(6px, env(safe-area-inset-left));
    right:max(6px, env(safe-area-inset-right));
    top:calc(var(--m4-header-h) + 5px);
    height:var(--m4-status-h);
    padding:2px 8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(5,7,11,.68);
    color:rgba(232,237,245,.86);
    backdrop-filter:blur(3px);
    font-size:9.5px;
    font-weight:750;
    letter-spacing:.035em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
    text-shadow:0 1px 5px rgba(0,0,0,.8);
  }

  body.mobile-apk-m4 .mobileGameBar {
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:3px;
    position:fixed;
    z-index:86;
    left:max(4px, env(safe-area-inset-left));
    right:max(4px, env(safe-area-inset-right));
    bottom:max(3px, env(safe-area-inset-bottom));
    height:var(--m4-bar-h);
    padding:3px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:rgba(6,8,13,.94);
    box-shadow:0 -6px 22px rgba(0,0,0,.42);
  }
  body.mobile-apk-m4 .mobileGameBar button {
    width:100%;
    height:31px;
    min-height:31px;
    padding:2px 3px;
    border-radius:8px;
    font-size:10px;
    line-height:1;
    letter-spacing:.02em;
    font-weight:850;
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.13);
  }
  body.mobile-apk-m4 .mobileGameBar button:active { background:rgba(188,47,37,.42); }

  body.mobile-apk-m4 .setupPanel,
  body.mobile-apk-m4 .handPrimaryDock,
  body.mobile-apk-m4 main.app > section.panel:last-child {
    position:fixed !important;
    z-index:70 !important;
    left:max(4px, env(safe-area-inset-left)) !important;
    right:max(4px, env(safe-area-inset-right)) !important;
    bottom:calc(var(--m4-bar-h) + max(7px, env(safe-area-inset-bottom))) !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    height:var(--m4-sheet-h) !important;
    min-height:0 !important;
    max-height:var(--m4-sheet-h) !important;
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(calc(100% + 14px)) !important;
    transition:transform .16s ease, opacity .16s ease, visibility .16s ease !important;
    overflow:hidden !important;
    border-radius:12px 12px 10px 10px !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.58) !important;
  }
  body.mobile-apk-m4.mobile-panel-setup .setupPanel,
  body.mobile-apk-m4.mobile-panel-hand .handPrimaryDock,
  body.mobile-apk-m4.mobile-panel-command main.app > section.panel:last-child {
    opacity:.985 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }
  body.mobile-apk-m4 .marketDock { display:none !important; }

  body.mobile-apk-m4 .panel,
  body.mobile-apk-m4 .unitCard,
  body.mobile-apk-m4 .buyCard,
  body.mobile-apk-m4 .tacticCard { border-radius:10px !important; }
  body.mobile-apk-m4 .panel h2,
  body.mobile-apk-m4 .panel h3,
  body.mobile-apk-m4 .setupPanel > details > summary,
  body.mobile-apk-m4 summary {
    min-height:28px !important;
    padding:6px 8px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }
  body.mobile-apk-m4 .panel .body,
  body.mobile-apk-m4 .setupPanel > details > .body,
  body.mobile-apk-m4 .handPrimaryDock > .body,
  body.mobile-apk-m4 main.app > section.panel:last-child > .body {
    height:calc(100% - 29px) !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding:6px !important;
  }
  body.mobile-apk-m4 .setupPanel > details { height:100%; overflow:hidden; }
  body.mobile-apk-m4 .setupPanel > details > .body { height:calc(100% - 29px) !important; }
  body.mobile-apk-m4 .cardZonePanel {
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    resize:none !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding-right:4px !important;
  }
  body.mobile-apk-m4 #log {
    height:96px !important;
    min-height:96px !important;
    max-height:40dvh !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    font-size:9.5px !important;
  }
  body.mobile-apk-m4 #actionPanel {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4px !important;
  }
  body.mobile-apk-m4 #actionPanel button,
  body.mobile-apk-m4 .statsToolbar button,
  body.mobile-apk-m4 .logToolbar button,
  body.mobile-apk-m4 select,
  body.mobile-apk-m4 button {
    min-height:30px !important;
    padding:4px 6px !important;
    border-radius:8px !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }
  body.mobile-apk-m4 label { font-size:9.5px !important; margin:3px 0 2px !important; }
  body.mobile-apk-m4 .help { font-size:9.5px !important; line-height:1.25 !important; }
  body.mobile-apk-m4 .scorebox { grid-template-columns:1fr 1fr !important; gap:4px !important; margin:4px 0 !important; }
  body.mobile-apk-m4 .score { padding:5px !important; }
  body.mobile-apk-m4 .score strong { font-size:10px !important; margin-bottom:2px !important; }
  body.mobile-apk-m4 .score span { font-size:9px !important; }
  body.mobile-apk-m4 .unitCard,
  body.mobile-apk-m4 .buyCard,
  body.mobile-apk-m4 .tacticCard { padding:6px !important; margin-bottom:5px !important; }
  body.mobile-apk-m4 .unitCard h4,
  body.mobile-apk-m4 .buyCard h4,
  body.mobile-apk-m4 .tacticCard h4 { font-size:11px !important; margin-bottom:4px !important; }
  body.mobile-apk-m4 .unitCard .meta,
  body.mobile-apk-m4 .buyCard .meta,
  body.mobile-apk-m4 .tacticCard .meta { font-size:9.5px !important; margin-bottom:4px !important; }
  body.mobile-apk-m4 .pill { font-size:8.5px !important; padding:2px 4px !important; }
  body.mobile-apk-m4 .stats { gap:3px !important; margin-top:4px !important; }
  body.mobile-apk-m4 .bar { height:6px !important; }
  body.mobile-apk-m4 .handStatusBanner { padding:5px !important; }
  body.mobile-apk-m4 .handStatusGrid { grid-template-columns:1fr 1fr !important; gap:5px !important; }
  body.mobile-apk-m4 .cardZoneGrid { grid-template-columns:1fr !important; gap:5px !important; }
  body.mobile-apk-m4 .debugHandList { display:grid; grid-template-columns:1fr; gap:5px; }
  body.mobile-apk-m4 .debugStarterGrid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:4px !important; }
  body.mobile-apk-m4 .debugCard strong { font-size:9.5px !important; }
  body.mobile-apk-m4 .debugCard span { font-size:8.5px !important; }
}

@media (pointer: coarse) and (orientation: landscape), (max-height: 560px) and (orientation: landscape) {
  body.mobile-apk-m4 {
    --m4-header-h: 33px;
    --m4-bar-h: 36px;
    --m4-status-h: 20px;
    --m4-sheet-h: min(58dvh, 214px);
  }
  body.mobile-apk-m4 .mobileStatusStrip { font-size:8.6px; top:calc(var(--m4-header-h) + 3px); height:19px; }
  body.mobile-apk-m4 .mobileGameBar { height:var(--m4-bar-h); padding:2px; gap:2px; }
  body.mobile-apk-m4 .mobileGameBar button { height:30px; min-height:30px; font-size:9.5px; }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 720px) and (orientation: portrait) {
  body.mobile-apk-m4 {
    --m4-header-h: 38px;
    --m4-bar-h: 42px;
    --m4-status-h: 23px;
    --m4-sheet-h: min(48dvh, 360px);
  }
  body.mobile-apk-m4::before {
    content:"Ruota il dispositivo in orizzontale per giocare meglio. La UI M4 resta utilizzabile anche in verticale.";
    position:fixed;
    z-index:90;
    left:0;
    right:0;
    top:var(--m4-header-h);
    padding:4px 8px;
    text-align:center;
    color:#ffe1a1;
    background:rgba(90,55,10,.88);
    border-bottom:1px solid rgba(227,189,103,.45);
    font-size:10px;
    pointer-events:none;
  }
  body.mobile-apk-m4 #boardWrap { top:calc(var(--m4-header-h) + 26px) !important; }
  body.mobile-apk-m4 .mobileStatusStrip { top:calc(var(--m4-header-h) + 29px); }
}


/* APK-M4b – Options scroll + hand foreground microfix.
   Mantiene il layout M4, ma rende Opzioni davvero scrollabile e la Mano dominante. */
@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  body.mobile-apk-m4 {
    --m4-hand-sheet-h: min(58dvh, 320px);
    --m4-command-sheet-h: min(54dvh, 270px);
    --m4-setup-top: calc(var(--m4-header-h) + max(6px, env(safe-area-inset-top)));
    --m4-setup-bottom: calc(var(--m4-bar-h) + max(7px, env(safe-area-inset-bottom)));
  }

  body.mobile-apk-m4 .handPrimaryDock {
    height: var(--m4-hand-sheet-h) !important;
    max-height: var(--m4-hand-sheet-h) !important;
    z-index: 78 !important;
  }
  body.mobile-apk-m4.mobile-panel-hand .handPrimaryDock {
    z-index: 104 !important;
    box-shadow: 0 -16px 42px rgba(0,0,0,.72) !important;
  }
  body.mobile-apk-m4 main.app > section.panel:last-child {
    height: var(--m4-command-sheet-h) !important;
    max-height: var(--m4-command-sheet-h) !important;
  }

  /* Opzioni: overlay alto, non mini bottom-sheet. Serve per vedere fazioni, comandanti,
     bot/umano, preset, statistiche e pulsanti anche su smartphone landscape. */
  body.mobile-apk-m4 .setupPanel {
    top: var(--m4-setup-top) !important;
    bottom: var(--m4-setup-bottom) !important;
    height: auto !important;
    max-height: none !important;
    z-index: 80 !important;
  }
  body.mobile-apk-m4.mobile-panel-setup .setupPanel {
    z-index: 106 !important;
    box-shadow: 0 12px 44px rgba(0,0,0,.76) !important;
  }
  body.mobile-apk-m4.mobile-panel-setup #boardWrap {
    bottom: calc(var(--m4-bar-h) + max(var(--m4-gap), env(safe-area-inset-bottom))) !important;
  }
  body.mobile-apk-m4 .setupPanel > details {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  body.mobile-apk-m4 .setupPanel > details > summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(18,22,31,.99), rgba(11,14,21,.97)) !important;
  }
  body.mobile-apk-m4 .setupPanel > details > .body {
    height: calc(100% - 31px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 7px 8px 18px !important;
  }
  body.mobile-apk-m4 .setupPanel .playerSetupRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr .78fr !important;
    gap: 5px !important;
  }
  body.mobile-apk-m4 .setupPanel details:not(#gameOptionsDetails) > summary {
    min-height: 26px !important;
  }
  body.mobile-apk-m4 .setupPanel .help {
    max-height: 72px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 3px;
  }

  /* Quando una carta viene scelta, il pannello Mano sparisce e la mappa torna alta. */
  body.mobile-apk-m4.mobile-hand-play-started .handPrimaryDock {
    pointer-events: none !important;
  }
}

/* =====================================================
   F9A/F9B – Application Shell / Setup Screen Foundation
   ===================================================== */
.appScreen {
  display: none;
}
.appScreen.isActive {
  display: grid;
}
.gameScreen {
  display: none;
}
body.app-screen-game .gameScreen {
  display: block;
}
body.app-screen-menu .gameScreen,
body.app-screen-setup .gameScreen,
body.app-screen-deck-builder .gameScreen,
body.app-screen-card-editor .gameScreen,
body.app-screen-card-pool .gameScreen,
body.app-screen-placeholder .gameScreen {
  display: none !important;
}
.mainMenuScreen,
.setupScreen,
.deckBuilderScreen,
.cardEditorScreen,
.cardPoolScreen,
.appPlaceholderScreen {
  position: fixed;
  inset: 0;
  z-index: 18;
  min-height: 100dvh;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78)),
    radial-gradient(circle at 50% 20%, rgba(150, 27, 24, .24), rgba(7, 8, 13, .96) 62%);
}
.mainMenuBackdrop {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.16), rgba(0,0,0,.7)),
    url("../assets/intro/arena-rubra-title.png") center center / cover no-repeat;
  opacity: .5;
  filter: saturate(.88) brightness(.72);
  pointer-events: none;
}
.mainMenuCard,
.setupScreenCard,
.deckBuilderCard,
.placeholderCard {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(22,24,33,.88), rgba(12,14,20,.92));
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.mainMenuKicker {
  color: var(--muted);
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
}
.mainMenuCard h1 {
  margin: 8px 0 0;
  text-align: center;
  font-size: clamp(36px, 7vw, 68px);
  line-height: .94;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.mainMenuStage {
  margin-top: 8px;
  text-align: center;
  color: #f1d37b;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
}
.mainMenuBuildBox {
  display: grid;
  gap: 5px;
  margin: 20px 0 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  color: var(--muted);
  font-size: 13px;
}
.mainMenuBuildBox strong {
  color: var(--text);
  display: inline-block;
  min-width: 72px;
}
.mainMenuActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mainMenuActions .primary {
  grid-column: 1 / -1;
  min-height: 46px;
  font-size: 16px;
}
.mainMenuNotes {
  margin: 16px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
.setupScreenCard {
  position: relative;
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
}
.setupScreenCard h2 {
  margin: 8px 0 8px;
  text-align: center;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.setupIntro {
  margin: 0 auto 18px;
  color: var(--muted);
  max-width: 680px;
  text-align: center;
  line-height: 1.45;
  font-size: 13px;
}
.setupScreenGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.setupSideBox,
.setupMatchBox {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.25);
}
.setupSideBox h3,
.setupMatchBox h3 {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.setupSideBox select,
.setupMatchBox select {
  margin-bottom: 7px;
}
.setupMatchBox {
  margin-top: 12px;
}
.setupMatchGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.setupCheckline {
  margin-top: 8px;
}
.setupScreenActions {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 10px;
  margin-top: 14px;
}
.setupScreenActions button {
  min-height: 46px;
}
@media (max-width: 840px) {
  .setupScreenGrid,
  .setupMatchGrid,
  .setupScreenActions {
    grid-template-columns: 1fr;
  }
}

.placeholderCard {
  width: min(520px, calc(100vw - 32px));
  text-align: center;
}
.placeholderCard h2 {
  margin: 0 0 10px;
  font-size: 24px;
}
.placeholderCard p {
  color: var(--muted);
  line-height: 1.45;
}
.topBarLeft {
  gap: 8px;
}
.compactTopBarBtn {
  min-width: 76px;
  width: auto;
}
@media (max-width: 620px) {
  .mainMenuCard,
  .setupScreenCard,
  .deckBuilderCard,
  .placeholderCard {
    padding: 20px;
    border-radius: 20px;
  }
  .mainMenuActions {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   F9C – GameScreen Map-First Foundation
   ===================================================== */
.gameHudStrip,
.gameActionBar {
  display: none;
}

body.app-screen-game:not(.mobile-apk-m4) .gameScreen {
  min-height: 100vh;
  padding-bottom: 72px;
}

body.app-screen-game:not(.mobile-apk-m4) .gameTopStack {
  position: sticky;
  top: 0;
  z-index: 20;
}

body.app-screen-game:not(.mobile-apk-m4) .gameTopStack > .topTitleBar,
body.app-screen-game:not(.mobile-apk-m4) .gameTopStack > .gameHudStrip {
  position: relative;
  top: auto;
}

body.app-screen-game:not(.mobile-apk-m4) .gameHudStrip {
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(12, 14, 20, .84);
  backdrop-filter: blur(9px);
}

.hudChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}
.hudPrimary {
  color: #ffe1a1;
  border-color: rgba(227,189,103,.38);
  font-weight: 850;
}
.hudBuild {
  color: rgba(255,255,255,.72);
  font-size: 11px;
}

body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
  grid-template-columns: minmax(285px, 360px) minmax(420px, 1fr) minmax(320px, 400px);
  grid-template-areas:
    "board board board"
    "setup hand command";
  align-items: start;
  gap: 14px;
}

body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .setupPanel { grid-area: setup; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn {
  grid-area: board;
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "board hand"
    "board market";
  gap: 14px;
  align-items: start;
}
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn > #boardWrap { grid-area: board; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn > .handPrimaryDock { grid-area: hand; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn > .marketDebugDock { grid-area: market; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .commandLogPanel { grid-area: command; }

body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  min-height: 850px;
}
body.app-screen-game:not(.mobile-apk-m4) .handPrimaryDock,
body.app-screen-game:not(.mobile-apk-m4) .marketDebugDock,
body.app-screen-game:not(.mobile-apk-m4) .commandLogPanel,
body.app-screen-game:not(.mobile-apk-m4) .setupPanel {
  scroll-margin-top: 116px;
}
body.app-screen-game:not(.mobile-apk-m4) #boardWrap,
body.app-screen-game:not(.mobile-apk-m4) #cardZonePanel,
body.app-screen-game:not(.mobile-apk-m4) #selectedPanel,
body.app-screen-game:not(.mobile-apk-m4) #actionPanel,
body.app-screen-game:not(.mobile-apk-m4) #log,
body.app-screen-game:not(.mobile-apk-m4) #gameOptionsDetails,
body.app-screen-game:not(.mobile-apk-m4) #matchupStatsPanel {
  scroll-margin-top: 116px;
}

body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
  position: sticky;
  bottom: 0;
  z-index: 24;
  display: grid;
  grid-template-columns: repeat(8, minmax(70px, 1fr));
  gap: 8px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 12, 18, .90);
  backdrop-filter: blur(10px);
}
body.app-screen-game:not(.mobile-apk-m4) .gameActionBar button {
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 999px;
  font-size: 12px;
}

@media (max-width: 1280px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "hand"
      "market";
  }
}

@media (max-width: 980px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "command"
      "hand"
      "setup";
  }
  body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
  }
  body.app-screen-game:not(.mobile-apk-m4) .gameHudStrip {
    top: 0;
  }
}

body.mobile-apk-m4 .gameHudStrip,
body.mobile-apk-m4 .gameActionBar {
  display: none !important;
}

/* =====================================================
   F9C1 – GameScreen UI Alignment Microfix
   ===================================================== */
.compactIconBtn {
  width: auto;
  min-width: 32px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
}

.selectedUnitFloat {
  position: absolute;
  z-index: 18;
  top: 12px;
  right: 12px;
  width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  display: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(20,24,34,.94), rgba(10,13,20,.91));
  box-shadow: 0 14px 32px rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.selectedUnitFloat.hasSelected { display: block; }
.selectedUnitFloatHeader {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.23);
}
.selectedUnitFloatHeader strong {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffe1a1;
}
.selectedUnitFloatBody {
  max-height: min(610px, calc(100vh - 220px));
  overflow: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.selectedUnitFloat.isCollapsed {
  width: auto;
  min-width: 172px;
}
.selectedUnitFloat.isCollapsed .selectedUnitFloatBody { display: none; }
.selectedUnitFloat #selectedPanel,
.selectedUnitFloat #actionPanel { margin: 0; }
.selectedUnitFloat #selectedPanel { margin-bottom: 8px; }
.selectedUnitFloat #actionPanel button { min-height: 34px; }

#tacticPanel:empty::before {
  content: "Avvia una partita per vedere le tattiche disponibili.";
  display: block;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}
#tacticPanel > div > h3 {
  padding-left: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  margin-top: 0 !important;
}

.logDock {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.logDockHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.logDockHeader h3 {
  flex: 1;
  padding: 10px 12px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.logDockHeader .compactIconBtn { margin-right: 8px; }
.logDock .logToolbar { padding: 8px; }
.logDock #log { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.logDock.isCollapsed .logToolbar,
.logDock.isCollapsed #log { display: none; }
.logDock.isCollapsed .logDockHeader { border-bottom: 0; }

body.app-screen-game:not(.mobile-apk-m4) .commandLogPanel {
  min-height: 0;
}

@media (max-width: 1280px) {
  .selectedUnitFloat {
    width: min(330px, calc(100% - 24px));
  }
}

body.mobile-apk-m4 .mobileGameBar {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body.mobile-apk-m4 .selectedUnitFloat {
  z-index: 46;
  top: 6px;
  right: 6px;
  width: min(292px, calc(100% - 12px));
  max-height: min(52%, 250px);
  border-radius: 11px;
  background: rgba(10,13,20,.93);
  backdrop-filter: none;
}
body.mobile-apk-m4 .selectedUnitFloatHeader {
  min-height: 28px;
  padding: 4px 5px 4px 7px;
}
body.mobile-apk-m4 .selectedUnitFloatHeader strong { font-size: 9.5px; }
body.mobile-apk-m4 .selectedUnitFloatBody {
  max-height: 216px;
  padding: 5px;
}
body.mobile-apk-m4 .selectedUnitFloat.isCollapsed {
  min-width: 118px;
  max-width: 42vw;
}
body.mobile-apk-m4 .selectedUnitFloat .unitCard,
body.mobile-apk-m4 .selectedUnitFloat .tacticCard {
  padding: 5px !important;
  margin-bottom: 4px !important;
}
body.mobile-apk-m4 .selectedUnitFloat #actionPanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px !important;
}
body.mobile-apk-m4 .selectedUnitFloat #actionPanel button {
  min-height: 28px !important;
  padding: 3px 5px !important;
  font-size: 9.5px !important;
}
body.mobile-apk-m4 .logDockHeader h3 { font-size: 11px !important; min-height: 28px !important; }
body.mobile-apk-m4 .logDock .logToolbar { padding: 5px !important; }

/* =====================================================
   F9D – PanelManager Foundation
   ===================================================== */
.gamePanelScrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: block;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
}
.gamePanelScrim[hidden] { display: none !important; }

.managedGamePanel { scroll-margin-top: 120px; }
.panelManagerCloseBtn {
  position: sticky;
  top: 8px;
  float: right;
  z-index: 3;
  margin: 6px 6px 0 8px;
  background: rgba(0,0,0,.42) !important;
  border-color: rgba(255,255,255,.18) !important;
}

body.app-screen-game:not(.mobile-apk-m4).game-panel-open {
  overflow: hidden;
}
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive {
  position: fixed !important;
  z-index: 31 !important;
  left: 50%;
  bottom: max(76px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(820px, calc(100vw - 36px));
  max-height: min(74vh, 760px);
  overflow: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  border-color: rgba(227,189,103,.28) !important;
  background: linear-gradient(180deg, rgba(18,22,32,.98), rgba(9,11,17,.97)) !important;
  animation: panelManagerRise .18s ease-out;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.app-screen-game:not(.mobile-apk-m4) .setupPanel.panelOverlayActive {
  width: min(980px, calc(100vw - 36px));
}
body.app-screen-game:not(.mobile-apk-m4) .commandLogPanel.panelOverlayActive {
  width: min(900px, calc(100vw - 36px));
}
body.app-screen-game:not(.mobile-apk-m4) #logDock.panelOverlayActive {
  width: min(820px, calc(100vw - 36px));
}
body.app-screen-game:not(.mobile-apk-m4) .handPrimaryDock.panelOverlayActive {
  width: min(920px, calc(100vw - 36px));
}
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive .body,
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive #cardZonePanel,
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive #log {
  max-height: none;
}
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive #log {
  height: min(52vh, 520px);
}
body.app-screen-game:not(.mobile-apk-m4) #logDock.panelOverlayActive #log {
  height: min(58vh, 560px);
}

@keyframes panelManagerRise {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 720px) {
  body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel.panelOverlayActive {
    width: calc(100vw - 18px);
    bottom: max(64px, env(safe-area-inset-bottom));
    max-height: 78vh;
    border-radius: 16px;
  }
}

body.mobile-apk-m4 .gamePanelScrim {
  display: none !important;
}
body.mobile-apk-m4 .panelManagerCloseBtn {
  display: none !important;
}
.managedGamePanel:not(.panelOverlayActive) > .panelManagerCloseBtn {
  display: none !important;
}
.managedGamePanel.panelOverlayActive > .panelManagerCloseBtn {
  display: inline-flex !important;
}

/* =====================================================
   F9D1 – Panel Separation Microfix
   ===================================================== */
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  grid-template-areas:
    "board board board board"
    "setup stats actions log";
}
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .statsPanel { grid-area: stats; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .tacticDock { grid-area: actions; }
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .logPanel { grid-area: log; }
body.app-screen-game:not(.mobile-apk-m4) .statsPanel,
body.app-screen-game:not(.mobile-apk-m4) .tacticDock,
body.app-screen-game:not(.mobile-apk-m4) .logPanel {
  scroll-margin-top: 116px;
}
body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
  grid-template-columns: repeat(7, minmax(74px, 1fr));
}
body.app-screen-game:not(.mobile-apk-m4) .tacticDock h2,
body.app-screen-game:not(.mobile-apk-m4) .statsPanel summary {
  color: #ffe1a1;
}
body.app-screen-game:not(.mobile-apk-m4) .tacticDock.panelOverlayActive,
body.app-screen-game:not(.mobile-apk-m4) .logPanel.panelOverlayActive,
body.app-screen-game:not(.mobile-apk-m4) .statsPanel.panelOverlayActive {
  width: min(860px, calc(100vw - 36px));
}
body.app-screen-game:not(.mobile-apk-m4) .logPanel.panelOverlayActive #log {
  height: min(58vh, 560px);
}
body.app-screen-game:not(.mobile-apk-m4) .statsPanel.panelOverlayActive .body,
body.app-screen-game:not(.mobile-apk-m4) .tacticDock.panelOverlayActive .body {
  max-height: none;
}
body.app-screen-game:not(.mobile-apk-m4) .logPanel .panelManagerCloseBtn {
  margin-right: 46px;
}

@media (max-width: 1180px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    grid-template-areas:
      "board board"
      "setup stats"
      "actions log";
  }
}
@media (max-width: 720px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "setup"
      "stats"
      "actions"
      "log";
  }
  body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
  }
}

/* Mobile M4: after panel separation, actions/log/stats have their own sheets. */
@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  body.mobile-apk-m4 .statsPanel,
  body.mobile-apk-m4 .tacticDock,
  body.mobile-apk-m4 .logPanel {
    position: fixed !important;
    z-index: 70 !important;
    left: max(4px, env(safe-area-inset-left)) !important;
    right: max(4px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--m4-bar-h) + max(7px, env(safe-area-inset-bottom))) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: var(--m4-command-sheet-h, min(54dvh, 270px)) !important;
    min-height: 0 !important;
    max-height: var(--m4-command-sheet-h, min(54dvh, 270px)) !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 14px)) !important;
    transition: transform .16s ease, opacity .16s ease, visibility .16s ease !important;
    overflow: hidden !important;
    border-radius: 12px 12px 10px 10px !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.58) !important;
  }
  body.mobile-apk-m4.mobile-panel-actions .tacticDock,
  body.mobile-apk-m4.mobile-panel-log .logPanel,
  body.mobile-apk-m4.mobile-panel-stats .statsPanel {
    opacity: .985 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 104 !important;
  }
  body.mobile-apk-m4.mobile-panel-actions #boardWrap,
  body.mobile-apk-m4.mobile-panel-log #boardWrap,
  body.mobile-apk-m4.mobile-panel-stats #boardWrap {
    bottom: calc(var(--m4-bar-h) + var(--m4-sheet-h) + max(var(--m4-gap), env(safe-area-inset-bottom))) !important;
  }
  body.mobile-apk-m4 .statsPanel > details,
  body.mobile-apk-m4 .tacticDock,
  body.mobile-apk-m4 .logPanel {
    height: 100% !important;
    overflow: hidden !important;
  }
  body.mobile-apk-m4 .statsPanel > details > .body,
  body.mobile-apk-m4 .tacticDock > .body,
  body.mobile-apk-m4 .logPanel #log {
    height: calc(100% - 31px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 7px 8px 18px !important;
  }
  body.mobile-apk-m4 .logPanel .logToolbar {
    padding: 5px 6px !important;
  }
  body.mobile-apk-m4 .logPanel #log {
    height: calc(100% - 82px) !important;
    min-height: 0 !important;
  }
  body.mobile-apk-m4 .statsPanel > details > summary,
  body.mobile-apk-m4 .tacticDock > h2,
  body.mobile-apk-m4 .logPanel .logDockHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(18,22,31,.99), rgba(11,14,21,.97)) !important;
  }
}

/* =====================================================
   F9E1 – HUD & Panel Usability Hotfix
   ===================================================== */
.gameHudStrip .hudMode {
  max-width: min(520px, 38vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(255, 209, 112, .20);
}
.gameHudStrip .hudMode.hudModeActive {
  color: #ffe1a1;
  border-color: rgba(255, 209, 112, .42);
  background: linear-gradient(180deg, rgba(92, 58, 19, .50), rgba(34, 24, 14, .74));
  box-shadow: 0 0 0 1px rgba(255, 209, 112, .06) inset;
}
.gameHudStrip .hudMode[data-hud-tone="target"] {
  color: #ffefbd;
}
.gameHudStrip .hudMode[data-hud-tone="move"] {
  color: #d9f0ff;
}
.gameHudStrip .hudMode[data-hud-tone="victory"] {
  color: #bfffc8;
}

body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "board" !important;
  align-items: stretch;
}
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn {
  grid-area: board;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "board" !important;
}
body.app-screen-game:not(.mobile-apk-m4) .managedGamePanel[data-game-panel-managed]:not(.panelOverlayActive) {
  display: none !important;
}
body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  min-height: min(850px, calc(100dvh - 178px));
}

body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .managedGamePanel.panelOverlayActive {
  left: auto !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  top: 128px !important;
  bottom: max(76px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
  width: min(440px, calc(100vw - 42px)) !important;
  max-height: none !important;
  animation: panelManagerSlideIn .18s ease-out !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .handPrimaryDock.panelOverlayActive {
  width: min(520px, calc(100vw - 42px)) !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .tacticDock.panelOverlayActive {
  width: min(430px, calc(100vw - 42px)) !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .managedGamePanel.panelOverlayActive .body,
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .managedGamePanel.panelOverlayActive #cardZonePanel,
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .managedGamePanel.panelOverlayActive #tacticPanel {
  max-height: calc(100dvh - 232px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="bottom"] .managedGamePanel.panelOverlayActive {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(76px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 36px)) !important;
  max-height: min(66vh, 660px) !important;
  animation: panelManagerRise .18s ease-out !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-current="log"] .logPanel.panelOverlayActive,
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-current="stats"] .statsPanel.panelOverlayActive,
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-current="setup"] .setupPanel.panelOverlayActive {
  width: min(980px, calc(100vw - 36px)) !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-current="log"] .logPanel.panelOverlayActive #log {
  height: min(52vh, 520px) !important;
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat {
  top: 14px;
  right: 14px;
  width: min(380px, calc(100% - 28px));
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat.isCollapsed {
  width: auto;
  min-width: 184px;
}
body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
  grid-template-columns: repeat(7, minmax(74px, 1fr)) !important;
}

@keyframes panelManagerSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
  .gameHudStrip .hudMode { max-width: 100%; }
  body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="side"] .managedGamePanel.panelOverlayActive,
  body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="bottom"] .managedGamePanel.panelOverlayActive {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(64px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 18px) !important;
    max-height: 78vh !important;
    animation: panelManagerRise .18s ease-out !important;
  }
}


/* =====================================================
   F9G – Camera Foundation
   ===================================================== */
.hudCamera {
  color: rgba(216, 235, 255, .82);
  border-color: rgba(132,185,255,.22);
}
.hudCamera[data-camera-mode="focus"] {
  color: #d9f0ff;
  border-color: rgba(132,185,255,.45);
  background: linear-gradient(180deg, rgba(35,58,86,.42), rgba(15,23,36,.74));
}
body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  overflow: hidden;
}
body.app-screen-game:not(.mobile-apk-m4) #board {
  width: var(--board-native-width, 920px);
  height: var(--board-native-height, 780px);
  max-width: none;
  flex: 0 0 auto;
}
body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
  grid-template-columns: repeat(7, minmax(74px, 1fr)) !important;
}
@media (max-width: 720px) {
  body.app-screen-game:not(.mobile-apk-m4) .gameActionBar {
    grid-template-columns: repeat(4, minmax(70px, 1fr)) !important;
  }
}


/* =====================================================
   F9H1 – Deck Builder Read/Validate Foundation
   ===================================================== */
.deckBuilderCard {
  position: relative;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
}
.deckBuilderHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.deckBuilderHeader h2 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 4.8vw, 48px);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deckBuilderIntro {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}
.deckBuilderHeaderActions {
  display: grid;
  gap: 8px;
  min-width: 190px;
}
.deckBuilderControls {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(210px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr);
  gap: 12px;
  align-items: end;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.24);
}
.deckBuilderMeta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}
.deckBuilderSummary {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.deckBuilderStatus {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}
.deckBuilderStatus.good { border-color: rgba(79,157,88,.55); color: #dcffe1; }
.deckBuilderStatus.bad { border-color: rgba(216,74,68,.62); color: #ffd8d4; }
.deckBuilderStatus span { color: var(--muted); }
.deckBuilderStatGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.deckBuilderRuleBox,
.deckBuilderIssueBox {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.deckBuilderIssueBox {
  border-color: rgba(216,74,68,.45);
  color: #ffd8d4;
}
.deckBuilderColumns {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(420px, 1.25fr);
  gap: 12px;
}
.deckBuilderBox {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.24);
}
.deckBuilderBox h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deckBuilderPoolBox { margin-top: 12px; }
.deckBuilderTableWrap {
  max-height: 300px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
}
.deckBuilderPoolTableWrap { max-height: 360px; }
.deckBuilderTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.deckBuilderTable th,
.deckBuilderTable td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  vertical-align: top;
}
.deckBuilderTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(16,18,25,.96);
  color: #f1d37b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.deckBuilderTable tr.deckBuilderInTemplate td {
  background: rgba(79,157,88,.1);
}
.deckBuilderStarterList {
  display: grid;
  gap: 8px;
}
.deckBuilderStarterCard h4 {
  margin-bottom: 3px;
}
@media (max-width: 900px) {
  .deckBuilderHeader,
  .deckBuilderControls,
  .deckBuilderColumns,
  .deckBuilderStatGrid {
    grid-template-columns: 1fr;
  }
  .deckBuilderHeaderActions {
    min-width: 0;
  }
}

/* =====================================================
   F9H2 – Deck Save/Load + Setup Integration
   ===================================================== */
.deckBuilderHeaderActions {
  min-width: 220px;
}
.deckBuilderHeaderActions .ghost,
.deckBuilderHeaderActions .primary {
  width: 100%;
}
.deckBuilderTable th:first-child,
.deckBuilderTable td:first-child {
  width: 38px;
  text-align: center;
  white-space: nowrap;
}
.miniBtn {
  min-width: 27px;
  min-height: 25px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 900;
  line-height: 1;
}
.deckBuilderAddBtn:not(:disabled) {
  border-color: rgba(79,157,88,.45);
}
.deckBuilderRemoveBtn {
  border-color: rgba(216,74,68,.42);
}
.deckBuilderTable tr.deckBuilderViolationRow td {
  background: rgba(216,74,68,.12);
}
.deckBuilderTable button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .deckBuilderHeaderActions {
    grid-template-columns: 1fr 1fr;
  }
  .deckBuilderHeaderActions .primary {
    grid-column: 1 / -1;
  }
}

/* F9H3 – deck save/load + setup integration */
.setupDeckInfo,
.setupDeckError,
.deckBuilderFeedback {
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  background: rgba(0,0,0,.22);
}
.setupDeckInfo.good,
.deckBuilderFeedback.good {
  border-color: rgba(79,157,88,.55);
  color: #dcffe1;
}
.setupDeckInfo.bad,
.setupDeckError.bad,
.deckBuilderFeedback.bad {
  border-color: rgba(216,74,68,.62);
  color: #ffd8d4;
}
.setupDeckError:empty,
.deckBuilderFeedback:empty {
  display: none;
}
.deckBuilderSavedBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(79,157,88,.45);
  border-radius: 999px;
  color: #dcffe1;
  font-size: 11px;
}

/* F9P1a – Deck import/export UX hotfix */
.deckBuilderImportTextBox {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(227,189,103,.35);
  border-radius: 16px;
  background: rgba(0,0,0,.30);
}
.deckBuilderImportTextBox[hidden] { display: none !important; }
.deckBuilderImportTextBox label {
  display: block;
  margin-bottom: 6px;
  color: #f1d37b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}
.deckBuilderImportTextBox p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.deckBuilderImportTextBox textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(0,0,0,.38);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
}
.deckBuilderImportActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 9px;
}

/* F9P1b – Saved Deck Gallery Microfix */
.deckBuilderSavedGalleryBox {
  margin: 12px 0 14px;
}
.deckBuilderBoxTitleRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.deckBuilderBoxTitleRow .help {
  color: var(--muted);
  font-size: 12px;
}
.deckBuilderSavedGalleryList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.deckBuilderSavedDeckCard {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px;
  background: rgba(0,0,0,.26);
}
.deckBuilderSavedDeckCard.selected {
  border-color: rgba(227,189,103,.55);
  box-shadow: 0 0 0 1px rgba(227,189,103,.18) inset;
}
.deckBuilderSavedDeckTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}
.deckBuilderSavedDeckTop strong {
  display: block;
  color: #fff4cf;
  font-size: 13px;
}
.deckBuilderSavedDeckTop span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  word-break: break-word;
}
.deckBuilderSavedState {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.deckBuilderSavedState.good {
  border-color: rgba(79,157,88,.55);
  color: #dcffe1;
}
.deckBuilderSavedState.bad {
  border-color: rgba(216,74,68,.62);
  color: #ffd8d4;
}
.deckBuilderSavedDeckMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.deckBuilderSavedDeckMeta span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 11px;
}
.deckBuilderSavedDeckNote {
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.deckBuilderSavedDeckActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.deckBuilderSavedDeckActions button {
  flex: 1 1 120px;
  min-height: 32px;
}
.deckBuilderSavedDeckActions button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.deckBuilderEmptyGallery {
  padding: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(0,0,0,.18);
  font-size: 12px;
}


/* F9I1b – Card Renderer Alignment/Stats/Asset Weight Microfix */
.deckBuilderPreviewBox {
  margin: 12px 0 14px;
}
.deckBuilderPreviewLayout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.deckBuilderPreviewCanvasWrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#deckBuilderCardPreviewCanvas {
  width: min(100%, 320px);
  aspect-ratio: 1024 / 1536;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.3);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.deckBuilderPreviewInfo {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.deckBuilderPreviewBody {
  display: grid;
  gap: 10px;
}
.deckBuilderPreviewStats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deckBuilderPreviewStats span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 12px;
}
.deckBuilderPreviewDesc,
.deckBuilderPreviewPaths,
.deckBuilderPreviewHelp {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.deckBuilderPreviewPaths code {
  color: #fff4cf;
  word-break: break-all;
}
.deckBuilderTable tr[data-db-preview-card] {
  cursor: pointer;
}
.deckBuilderTable tr.deckBuilderPreviewSelectedRow td {
  background: rgba(227,189,103,.14);
}
@media (max-width: 900px) {
  .deckBuilderPreviewLayout {
    grid-template-columns: 1fr;
  }
  .deckBuilderPreviewCanvasWrap {
    justify-content: center;
  }
}


/* F9I2 – In-game Card Preview Foundation */
.inGameCardPreviewBox {
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.inGameCardPreviewLayout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.inGameCardPreviewCanvasWrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#gameHandCardPreviewCanvas,
#selectedUnitCardPreviewCanvas {
  width: min(100%, 230px);
  aspect-ratio: 1024 / 1536;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  box-shadow: 0 14px 26px rgba(0,0,0,.24);
}
.inGameCardPreviewInfo {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.compactPreviewLayout {
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 10px;
}
.compactPreviewCanvasWrap #selectedUnitCardPreviewCanvas,
#selectedUnitCardPreviewCanvas {
  width: min(100%, 150px);
}
.compactPreviewBody .deckBuilderPreviewDesc,
.compactPreviewBody .deckBuilderPreviewHelp,
.compactPreviewBody .deckBuilderPreviewStats span {
  font-size: 11px;
}
.debugHandSlot.previewSelected,
.debugStarterSlot.previewSelected {
  outline: 2px solid rgba(242,207,87,.42);
  outline-offset: 2px;
  cursor: pointer;
}
.debugHandSlot,
.debugStarterSlot { cursor: pointer; }
@media (max-width: 900px) {
  .inGameCardPreviewLayout,
  .compactPreviewLayout {
    grid-template-columns: 1fr;
  }
  .inGameCardPreviewCanvasWrap { justify-content: center; }
}


/* F9I2a – Selected Unit Preview Space Microfix */
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat {
  max-height: min(calc(100% - 24px), 80vh);
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloatBody {
  max-height: min(760px, calc(100vh - 170px));
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat #selectedPanel {
  margin-bottom: 10px;
}
body.mobile-apk-m4 .selectedUnitFloat {
  max-height: min(88svh, 500px);
}
body.mobile-apk-m4 .selectedUnitFloatBody {
  max-height: min(78svh, 440px);
}
body.mobile-apk-m4 .compactPreviewCanvasWrap #selectedUnitCardPreviewCanvas,
body.mobile-apk-m4 #selectedUnitCardPreviewCanvas {
  width: min(100%, 190px);
}


/* F9J1 – Card Pool Screen Foundation */
.cardPoolCard {
  width: min(1260px, calc(100vw - 32px));
}
.cardPoolControls {
  grid-template-columns: minmax(150px, .85fr) minmax(130px, .65fr) minmax(150px, .75fr) minmax(240px, 1.2fr) auto;
}
.cardPoolControls input[type="search"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 7px 10px;
}
.cardPoolPreviewBox {
  margin: 12px 0 14px;
}
.cardPoolPreviewLayout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
#cardPoolPreviewCanvas {
  width: min(100%, 360px);
  aspect-ratio: 1024 / 1536;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.32);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.cardPoolTableWrap {
  max-height: min(52vh, 620px);
}
.cardPoolTable td:nth-child(3) strong {
  display: block;
}
.cardPoolTable td:nth-child(3) span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.cardPoolTable tr[data-card-pool-select] {
  cursor: pointer;
}
.cardPoolTable tr.cardPoolSelectedRow td {
  background: rgba(227,189,103,.14);
}
.cardPoolTable code {
  color: #fff4cf;
  font-size: 11px;
}
body.app-screen-card-pool .appPlaceholderScreen {
  display: none;
}
@media (max-width: 900px) {
  .cardPoolControls,
  .cardPoolPreviewLayout {
    grid-template-columns: 1fr;
  }
  #cardPoolPreviewCanvas {
    width: min(100%, 320px);
  }
}

/* F9J2 – Card Pool Gallery & Fullscreen Preview */
.cardPoolCard {
  width: min(1360px, calc(100vw - 28px));
}
.cardPoolPreviewToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.cardPoolViewModeGroup,
.cardPoolNavGroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cardPoolViewModeGroup .ghost.active {
  border-color: rgba(227,189,103,.42);
  background: rgba(227,189,103,.12);
  color: #fff4cf;
}
.compactMeta {
  min-width: 48px;
  text-align: center;
}
.cardPoolPreviewLayout {
  grid-template-columns: minmax(400px, 520px) minmax(0, 1fr);
  gap: 18px;
}
.cardPoolPreviewCanvasWrap {
  align-items: flex-start;
}
#cardPoolPreviewCanvas {
  width: min(100%, 500px);
  border-radius: 20px;
}
.cardPoolGalleryBox {
  margin-bottom: 14px;
}
.cardPoolGalleryBody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 12px;
  max-height: min(58vh, 760px);
  overflow: auto;
  padding-right: 4px;
}
.cardPoolGalleryItem {
  position: relative;
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 10px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cardPoolGalleryItem:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
}
.cardPoolGalleryItemSelected {
  border-color: rgba(227,189,103,.52);
  background: rgba(227,189,103,.12);
  box-shadow: 0 0 0 1px rgba(227,189,103,.18) inset;
}
.cardPoolGalleryItemCustom {
  overflow: hidden;
}
.cardPoolGalleryCustomCorner {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(227,189,103,.45);
  background: rgba(0,0,0,.62);
  color: #ffe0a8;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 4px 10px rgba(0,0,0,.24);
  pointer-events: none;
}
.cardPoolGalleryCanvas {
  width: min(100%, 156px);
  aspect-ratio: 1024 / 1536;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.cardPoolGalleryName {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.cardPoolGalleryMeta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}
.cardPoolFullscreenModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cardPoolFullscreenCard {
  width: min(1320px, 100%);
  max-height: min(95vh, 1000px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(15,19,27,.98), rgba(12,16,24,.96));
  box-shadow: 0 28px 72px rgba(0,0,0,.42);
  padding: 16px;
}
.cardPoolFullscreenTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cardPoolFullscreenLayout {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.cardPoolFullscreenCanvasWrap {
  display: flex;
  justify-content: center;
}
#cardPoolFullscreenCanvas {
  width: min(100%, 540px);
  aspect-ratio: 1024 / 1536;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.compactPaths code {
  display: inline-block;
  max-width: 100%;
}
body.cardPoolFullscreenOpen {
  overflow: hidden;
}
@media (max-width: 900px) {
  .cardPoolPreviewToolbar,
  .cardPoolFullscreenTopBar {
    align-items: stretch;
  }
  .cardPoolPreviewLayout,
  .cardPoolFullscreenLayout {
    grid-template-columns: 1fr;
  }
  .cardPoolGalleryBody {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    max-height: none;
  }
  .cardPoolFullscreenModal {
    padding: 0;
    background: rgba(0,0,0,.9);
  }
  .cardPoolFullscreenCard {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    padding: 12px;
  }
  #cardPoolPreviewCanvas {
    width: min(100%, 420px);
  }
  #cardPoolFullscreenCanvas {
    width: min(100%, 78vw);
  }
}

/* F9J2a – Card Pool Unified Preview Microfix */
.cardPoolFocusCloseBtn {
  display: none;
}
body.cardPoolFocusMode {
  overflow: hidden;
}
body.cardPoolFocusMode .cardPoolPreviewBox {
  position: fixed;
  inset: 10px;
  z-index: 3000;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(15,19,27,.98), rgba(12,16,24,.96));
  box-shadow: 0 28px 72px rgba(0,0,0,.45);
  padding: 16px;
}
body.cardPoolFocusMode .cardPoolFocusCloseBtn {
  display: inline-flex;
}
body.cardPoolFocusMode #cardPoolFullscreenOpenBtn {
  display: none;
}
body.cardPoolFocusMode .cardPoolPreviewLayout {
  grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
}
body.cardPoolFocusMode #cardPoolPreviewCanvas {
  width: min(100%, 540px);
}
.cardPoolFullscreenModal {
  display: none !important;
}
@media (max-width: 900px) {
  body.cardPoolFocusMode .cardPoolPreviewBox {
    inset: 0;
    border-radius: 0;
    padding: 12px;
  }
  body.cardPoolFocusMode .cardPoolPreviewLayout {
    grid-template-columns: 1fr;
  }
  body.cardPoolFocusMode #cardPoolPreviewCanvas {
    width: min(100%, 78vw);
  }
}


/* F9K1 – Card Editor Data-only Foundation */
.cardEditorCard {
  width: min(1380px, calc(100vw - 28px));
}
.cardEditorPolicyBox {
  margin: 10px 0 14px;
}
.cardEditorLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: 14px;
  align-items: start;
}
.cardEditorFormBox,
.cardEditorPreviewBox {
  min-width: 0;
}
.cardEditorFormGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.cardEditorFormGrid.compact {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}
.cardEditorFormGrid label,
.cardEditorFullLabel {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.cardEditorFormGrid label.wide {
  grid-column: span 3;
}
.cardEditorFormGrid input,
.cardEditorFormGrid select,
.cardEditorFullLabel textarea,
.inlineInputButton input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 7px 10px;
}
.cardEditorFullLabel textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.35;
}
.inlineInputButton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.cardEditorAbilityGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.cardEditorAbilityBox {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
}
.cardEditorAbilityBox h4 {
  margin: 0 0 8px;
  font-size: 13px;
}
.cardEditorValidation {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.cardEditorActions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.cardEditorPreviewLayout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
#cardEditorPreviewCanvas {
  width: min(100%, 300px);
  aspect-ratio: 1024 / 1536;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.32);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.cardEditorSavedTitle {
  margin-top: 16px;
}
.cardEditorSavedList {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
}
.cardEditorSavedItem {
  appearance: none;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  cursor: pointer;
}
.cardEditorSavedItem strong {
  font-size: 13px;
}
.cardEditorSavedItem span {
  color: var(--muted);
  font-size: 11px;
}
.cardEditorSavedSelected {
  border-color: rgba(227,189,103,.52);
  background: rgba(227,189,103,.12);
}
.deckBuilderRuleBox.bad {
  border-color: rgba(190,60,55,.42);
  background: rgba(190,60,55,.12);
}
.deckBuilderRuleBox.warn {
  border-color: rgba(227,189,103,.36);
  background: rgba(227,189,103,.10);
}
body.app-screen-card-editor .appPlaceholderScreen {
  display: none;
}
@media (max-width: 1050px) {
  .cardEditorLayout,
  .cardEditorPreviewLayout,
  .cardEditorAbilityGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .cardEditorFormGrid,
  .cardEditorFormGrid.compact {
    grid-template-columns: 1fr;
  }
  .cardEditorFormGrid label.wide {
    grid-column: span 1;
  }
}

/* F9K1b – Passive Text / Tooltip / Agathoi Tactic Alignment Microfix */
.cardRendererPassiveBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.cardRendererPassiveBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(227,189,103,.32);
  background: rgba(227,189,103,.10);
  color: #fff4cf;
  font-size: 11px;
  line-height: 1.15;
  cursor: help;
  user-select: none;
}
.cardRendererPassiveBadge:hover,
.cardRendererPassiveBadge:focus {
  border-color: rgba(227,189,103,.62);
  background: rgba(227,189,103,.18);
  outline: none;
}

/* F9K2 – Custom Card Library Foundation */
.cardEditorLibraryControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px;
  gap: 8px;
  margin: 8px 0 10px;
}
.cardEditorLibraryControls input,
.cardEditorLibraryControls select,
.cardEditorImportBox textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 7px 10px;
}
.cardEditorSavedItem em,
.cardPoolGalleryName em,
.cardPoolCustomBadge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(227,189,103,.35);
  background: rgba(227,189,103,.12);
  color: #fff4cf;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.cardEditorImportBox {
  display: grid;
  gap: 8px;
}
.cardEditorImportBox textarea {
  min-height: 132px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
}
.cardEditorImportActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cardEditorImportStatus {
  display: grid;
  gap: 8px;
}
@media (max-width: 780px) {
  .cardEditorLibraryControls {
    grid-template-columns: 1fr;
  }
  .cardEditorImportActions {
    justify-content: stretch;
  }
  .cardEditorImportActions button {
    flex: 1 1 auto;
  }
}
.cardPoolControls {
  grid-template-columns: minmax(140px, .8fr) minmax(120px, .55fr) minmax(140px, .7fr) minmax(130px, .65fr) minmax(220px, 1.1fr) auto;
}

/* F9K2b – Permanent Card Art Alignment Tool */
.cardEditorArtBox {
  margin: 14px 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 12px;
}
.cardEditorArtLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: start;
}
.cardEditorArtControls {
  display: grid;
  gap: 10px;
}
.cardEditorArtActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cardEditorArtTransformBox {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding: 10px;
}
.cardEditorArtTransformBox h4 {
  margin: 0 0 8px;
  font-size: 13px;
}
.cardEditorArtPreviewBox {
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  padding: 10px;
}
.cardEditorArtPreviewBox img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}
.cardEditorArtMeta,
.cardEditorArtStatus {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
.cardEditorArtStatus {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
@media (max-width: 900px) {
  .cardEditorArtLayout {
    grid-template-columns: 1fr;
  }
}


/* F9K3 – In-game Hand Rendered Thumbnails */
.renderedHandList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
  align-items: start;
}
.renderedStarterGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}
.renderedHandSlot,
.renderedStarterSlot {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 8px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.renderedHandSlot:hover,
.renderedStarterSlot:hover {
  transform: translateY(-1px);
  border-color: rgba(227,189,103,.32);
  background: rgba(227,189,103,.06);
}
.renderedHandSlot.previewSelected,
.renderedStarterSlot.previewSelected {
  border-color: rgba(227,189,103,.68);
  box-shadow: 0 0 0 2px rgba(227,189,103,.18), 0 10px 26px rgba(0,0,0,.28);
}
.renderedHandSlot.pending {
  outline: 2px solid rgba(227,189,103,.58);
  outline-offset: 2px;
}
.handRenderedCard {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.missionHiddenCardFace {
  width: 100%;
  aspect-ratio: 1024 / 1536;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(205,180,115,.38);
  color: #e9d9aa;
  background:
    linear-gradient(135deg, rgba(205,180,115,.08) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(205,180,115,.08) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(180deg, #211b2d, #0d111a);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.34);
}
.missionHiddenCardFace .handThumbEmpty { display:grid; gap:6px; padding:10px; }
.missionHiddenCardFace strong { font-size:12px; letter-spacing:.12em; }
.missionHiddenCardFace span { color:var(--muted); font-size:10px; }
.missionHiddenCard .handAction { cursor:default; }
.handCardThumbFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.13);
}
.handCardThumbCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.handCardThumbFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  padding: 8px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55));
  pointer-events: none;
}
.handRenderedCard.thumbRendered .handCardThumbFallback {
  display: none;
}
.handCardThumbFallback strong {
  font-size: 12px;
  line-height: 1.1;
}
.handCardThumbFallback span {
  font-size: 10px;
  color: var(--muted);
}
.handCardThumbMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}
.handCardThumbMeta .pill {
  font-size: 9.5px;
  padding: 2px 6px;
}
.renderedHandSlot .handAction,
.renderedStarterSlot .starterAction {
  margin-top: 7px;
}
.renderedHandSlot .handAction button,
.renderedStarterSlot .starterAction button {
  font-size: 10.5px;
  padding: 7px 6px;
}
.renderedHandSlot .handAction .meta,
.renderedStarterSlot .starterAction .meta {
  max-height: 3.2em;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .renderedHandList {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }
  .renderedHandSlot {
    flex: 0 0 118px;
    scroll-snap-align: start;
  }
  .renderedStarterGrid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
  }
  .renderedStarterSlot {
    flex: 0 0 112px;
  }
}
@media (max-width: 520px) {
  .renderedHandSlot { flex-basis: 104px; }
  .renderedStarterSlot { flex-basis: 100px; }
  .renderedHandSlot,
  .renderedStarterSlot { padding: 6px; }
  .handCardThumbMeta .pill { font-size: 9px; padding: 1px 5px; }
}

/* F9K3a – Map Hand Overlay Foundation */
body.app-screen-game .topBarRight #endTurnBtn {
  display: none;
}
.mapHandOverlay {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  pointer-events: none;
}
.mapHandOverlayInner {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12,16,24,.52), rgba(7,10,16,.70));
  box-shadow: 0 16px 48px rgba(0,0,0,.34);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}
.mapHandOverlayHeader {
  align-self: center;
  min-width: 0;
}
.mapHandOverlayHeader strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}
.mapHandOverlayHeader span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px;
}
.mapHandOverlayCards {
  display: flex;
  align-items: end;
  gap: 9px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 5px;
  scroll-snap-type: x proximity;
}
.mapHandCardSlot {
  flex: 0 0 96px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 6px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.mapHandCardSlot:hover {
  transform: translateY(-3px);
  border-color: rgba(227,189,103,.42);
  background: rgba(227,189,103,.065);
}
.mapHandCardSlot.playable {
  box-shadow: inset 0 0 0 1px rgba(127,201,127,.18);
}
.mapHandCardSlot.unavailable {
  opacity: .72;
}
.mapHandCardSlot.previewSelected,
.mapHandCardSlot.pending {
  opacity: 1;
  border-color: rgba(227,189,103,.78);
  box-shadow: 0 0 0 2px rgba(227,189,103,.20), 0 13px 34px rgba(0,0,0,.32);
}
.mapHandCardSlot .handRenderedCard {
  gap: 4px;
}
.mapHandCardSlot .handCardThumbFrame {
  border-radius: 9px;
}
.mapHandCardSlot .handCardThumbMeta {
  justify-content: center;
}
.mapHandCardSlot .handCardThumbMeta .pill {
  font-size: 8.5px;
  padding: 1px 4px;
}
.mapHandCardReason {
  display: block;
  min-height: 2.6em;
  max-height: 2.6em;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  overflow: hidden;
  text-align: center;
}
.mapHandEndTurnBtn {
  min-width: 112px;
  min-height: 48px;
  align-self: center;
  font-size: 13px;
  font-weight: 800;
  border-radius: 14px;
}
.mapHandOverlayEmpty {
  pointer-events: auto;
  color: var(--muted);
  font-size: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}
.mapHandOverlay.isEmpty {
  right: auto;
  max-width: 360px;
}
body.mobile-apk-m4 .mapHandOverlay {
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 45;
}
body.mobile-apk-m4 .mapHandOverlayInner {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "header end"
    "cards end";
  align-items: center;
  padding: 8px;
  gap: 7px;
  border-radius: 14px;
}
body.mobile-apk-m4 .mapHandOverlayHeader { grid-area: header; }
body.mobile-apk-m4 .mapHandOverlayCards { grid-area: cards; gap: 7px; }
body.mobile-apk-m4 .mapHandOverlayActions { grid-area: end; min-width: 78px; }
body.mobile-apk-m4 .mapHandEndTurnBtn { min-width: 78px; min-height: 42px; font-size: 11px; }
body.mobile-apk-m4 .mapHandCardSlot { flex-basis: 76px; padding: 5px; border-radius: 11px; }
body.mobile-apk-m4 .mapHandCardReason { display: none; }
body.mobile-apk-m4 .mapHandOverlayHeader strong { font-size: 11px; }
body.mobile-apk-m4 .mapHandOverlayHeader span { font-size: 10px; }
@media (max-width: 820px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayInner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "header end"
      "cards end";
  }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayHeader { grid-area: header; }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayCards { grid-area: cards; }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayActions { grid-area: end; min-width: 86px; }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandCardSlot { flex-basis: 84px; }
}

/* F9K3a1 – Map Hand Overlay Interaction Microfix */
.mapHandOverlay.isTargeting {
  transform: translateY(calc(100% + 36px));
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.mapHandOverlay:not(.isTargeting) {
  transition: transform .18s ease, opacity .18s ease;
}
.mapHandCardSlot {
  flex-basis: 108px;
  text-align: center;
}
.mapHandCardSlot.starter {
  border-color: rgba(227,189,103,.25);
  background: rgba(227,189,103,.045);
}
.mapHandVisualCard {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
}
.mapHandThumbFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.13);
}
.mapHandThumbCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mapHandVisualCard.thumbRendered .handCardThumbFallback {
  display: none;
}
.mapHandKindPill {
  display: inline-block;
  min-width: 54px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.26);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.mapHandKindPill.protected {
  border-color: rgba(127,201,127,.42);
  color: #bfe8bf;
  background: rgba(45,92,52,.30);
}
.mapHandCardReason,
.mapHandCardSlot .handCardThumbMeta,
.mapHandCardSlot .miniLabel {
  display: none !important;
}
.mapHandSelectionPreview {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 42;
  width: min(28vw, 390px);
  min-width: 250px;
  pointer-events: auto;
}
.mapHandSelectionPreviewInner {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12,16,24,.58), rgba(7,10,16,.78));
  box-shadow: 0 18px 58px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
}
.mapHandSelectionPreview canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
}
.mapHandSelectionPreviewFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mapHandSelectionPreviewFooter span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mapHandSelectionPreviewFooter button {
  white-space: nowrap;
}
body.mobile-apk-m4 .mapHandCardSlot {
  flex-basis: 86px;
}
body.mobile-apk-m4 .mapHandKindPill {
  font-size: 8.5px;
  min-width: 48px;
  padding: 1px 5px;
}
body.mobile-apk-m4 .mapHandSelectionPreview {
  right: max(8px, env(safe-area-inset-right));
  width: min(34vw, 260px);
  min-width: 170px;
}
body.mobile-apk-m4 .mapHandSelectionPreviewInner {
  padding: 7px;
  gap: 7px;
  border-radius: 14px;
}
body.mobile-apk-m4 .mapHandSelectionPreviewFooter {
  align-items: stretch;
  flex-direction: column;
}
body.mobile-apk-m4 .mapHandSelectionPreviewFooter button {
  width: 100%;
}
.mapHandSelectionPreview.hoverPreview {
  pointer-events: none;
}
.mapHandSelectionPreview.hoverPreview .mapHandSelectionPreviewInner {
  border-color: rgba(235,211,154,.34);
}
.mapHandSelectionPreview.hoverPreview .mapHandSelectionPreviewFooter {
  justify-content: flex-start;
}
.mapHandSelectionPreview.targetPreview .mapHandSelectionPreviewInner {
  border-color: rgba(103,182,255,.42);
}
@media (max-width: 820px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapHandCardSlot { flex-basis: 96px; }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandSelectionPreview {
    width: min(32vw, 300px);
    min-width: 210px;
  }
}


/* F9K3a2 – Map Hand Overlay Move Units Collapse */
.mapHandOverlayActions {
  display: grid;
  gap: 7px;
  align-self: center;
  min-width: 112px;
}
.mapHandMoveUnitsBtn {
  min-height: 38px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.mapHandOverlay.isMovementHidden {
  left: auto;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: auto;
  pointer-events: none;
  transform: none;
  opacity: 1;
}
.mapHandOverlayCompact {
  display: grid;
  gap: 7px;
  min-width: 118px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(12,16,24,.48), rgba(7,10,16,.70));
  box-shadow: 0 14px 42px rgba(0,0,0,.32);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}
.mapHandShowBtn,
.mapHandEndTurnBtn.compact {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
}
body.mobile-apk-m4 .mapHandOverlayActions {
  grid-area: end;
  min-width: 78px;
  gap: 6px;
}
body.mobile-apk-m4 .mapHandEndTurnBtn {
  min-height: 42px;
}
body.mobile-apk-m4 .mapHandMoveUnitsBtn {
  min-height: 36px;
  font-size: 10px;
  padding-left: 6px;
  padding-right: 6px;
}
body.mobile-apk-m4 .mapHandOverlay.isMovementHidden {
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
}
body.mobile-apk-m4 .mapHandOverlayCompact {
  min-width: 84px;
  padding: 7px;
  border-radius: 13px;
}
@media (max-width: 820px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayActions {
    grid-area: end;
    min-width: 86px;
  }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandMoveUnitsBtn {
    font-size: 10.5px;
    min-height: 36px;
  }
}

/* F9K3c – Map Action Box / Faction Tactics Dock */
.mapActionDock {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 154px);
  z-index: 38;
  width: min(300px, 34vw);
  max-height: min(44vh, 360px);
  pointer-events: auto;
}
.mapHandOverlay.isTargeting ~ .mapActionDock,
.mapHandOverlay.isMovementHidden ~ .mapActionDock {
  bottom: max(14px, env(safe-area-inset-bottom));
}
.mapActionDockInner {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,16,24,.50), rgba(7,10,16,.74));
  box-shadow: 0 16px 46px rgba(0,0,0,.34);
  backdrop-filter: blur(7px);
}
.mapActionDockHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mapActionDockHeader strong {
  color: #ffe1a1;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mapActionDockHeader span {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.mapActionDockList {
  display: grid;
  gap: 6px;
  max-height: min(34vh, 292px);
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.mapActionDockItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name cmd"
    "meta cmd";
  gap: 2px 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 6px 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  text-align: left;
}
.mapActionDockItem.ready {
  border-color: rgba(127,201,127,.24);
  background: rgba(127,201,127,.04);
}
.mapActionDockItem.active {
  border-color: rgba(227,189,103,.72);
  background: rgba(227,189,103,.10);
  box-shadow: 0 0 0 2px rgba(227,189,103,.16);
}
.mapActionDockItem.unavailable {
  opacity: .62;
}
.mapActionDockItem:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(227,189,103,.42);
  background: rgba(227,189,103,.07);
}
.mapActionDockName {
  grid-area: name;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapActionDockMeta {
  grid-area: meta;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapActionDockCmd {
  grid-area: cmd;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 52px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #ffe1a1;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.mapActionDockEmpty {
  color: var(--muted);
  font-size: 11px;
  padding: 9px 10px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(0,0,0,.24);
}
body.mobile-apk-m4 .mapActionDock {
  left: max(8px, env(safe-area-inset-left));
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 104px);
  z-index: 44;
  width: min(218px, 42vw);
  max-height: 42vh;
}
body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
  bottom: max(8px, env(safe-area-inset-bottom));
}
body.mobile-apk-m4 .mapActionDockInner {
  padding: 7px;
  border-radius: 13px;
  gap: 6px;
  backdrop-filter: none;
}
body.mobile-apk-m4 .mapActionDockHeader strong { font-size: 10px; }
body.mobile-apk-m4 .mapActionDockHeader span { font-size: 9px; }
body.mobile-apk-m4 .mapActionDockList { max-height: 32vh; gap: 5px; }
body.mobile-apk-m4 .mapActionDockItem {
  min-height: 36px;
  padding: 5px;
  gap: 1px 5px;
}
body.mobile-apk-m4 .mapActionDockName { font-size: 10px; }
body.mobile-apk-m4 .mapActionDockMeta { font-size: 8.5px; }
body.mobile-apk-m4 .mapActionDockCmd { min-width: 42px; font-size: 8.5px; padding: 0 4px; }
@media (max-width: 820px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapActionDock {
    width: min(248px, 48vw);
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 128px);
  }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay.isTargeting ~ .mapActionDock,
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay.isMovementHidden ~ .mapActionDock {
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}


/* F9K4 – Deck Builder Custom Integration */
.deckBuilderCustomToggle {
  align-self: end;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(227,189,103,.18);
  border-radius: 12px;
  background: rgba(227,189,103,.045);
}
.deckBuilderCustomHelp {
  margin: -4px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.deckBuilderNameCell {
  position: relative;
  min-width: 220px;
  padding-right: 78px !important;
}
.deckBuilderNameCell .deckBuilderCardNameText {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.deckBuilderNameCell .deckBuilderCustomBadge,
.deckBuilderNameCell .deckBuilderOfficialBadge {
  position: absolute;
  top: 7px;
  right: 8px;
  margin-left: 0;
  white-space: nowrap;
}

.deckBuilderCustomBadge,
.deckBuilderOfficialBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.deckBuilderCustomBadge {
  color: #ffe0a8;
  border: 1px solid rgba(227,189,103,.45);
  background: rgba(227,189,103,.14);
}
.deckBuilderOfficialBadge {
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.deckBuilderStatus.custom {
  border-color: rgba(227,189,103,.45);
  background: rgba(227,189,103,.08);
}
.deckBuilderIssueBox.warn {
  border-color: rgba(227,189,103,.42);
  background: rgba(227,189,103,.08);
}
.deckBuilderSavedDeckCard.custom {
  border-color: rgba(227,189,103,.38);
  background: rgba(227,189,103,.055);
}

/* F9K5c – legacy pointer hover shell disabled: hover uses the right-side mapHandSelectionPreview. */
.mapHandHoverPreview {
  position: fixed;
  z-index: 2600;
  width: 238px;
  max-width: min(238px, 28vw);
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.58));
}
.mapHandHoverPreview[hidden] { display: none !important; }
.mapHandHoverPreviewInner {
  border: 1px solid rgba(235,211,154,.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,14,13,.96), rgba(8,7,7,.94));
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.mapHandHoverPreview canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
}
.mapHandHoverPreviewFooter {
  display: grid;
  gap: 2px;
  padding: 7px 4px 2px;
  color: #f0e6c6;
  font-size: 11px;
}
.mapHandHoverPreviewFooter strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.mapHandHoverPreviewFooter span {
  color: #bba978;
}
body.mobile-apk-m4 .mapHandHoverPreview { display: none !important; }

.setupDeckSavedSelect[hidden],
.setupDeckSavedLabel[hidden] { display: none !important; }

/* =====================================================
   F9K7 – Menu / Lab Navigation Cleanup
   ===================================================== */
.mainMenuActionsF9K7 {
  grid-template-columns: 1fr;
  gap: 12px;
}
.mainMenuActionGroup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.mainMenuActionGroup h2,
.mainMenuActionGroup p {
  grid-column: 1 / -1;
  margin: 0;
}
.mainMenuActionGroup h2 {
  color: #f1d37b;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mainMenuActionGroup p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.mainMenuActionGroupPlay .primary {
  grid-column: span 2;
  min-height: 44px;
}
.mainMenuActionGroupPlay #mainMenuResumeBtn {
  min-height: 44px;
}
.mainMenuActionGroupDebug {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.setupPlayerBox {
  display: grid;
  gap: 10px;
}
.setupSideHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.setupSideHeader h3 {
  margin: 0;
}
.setupDeckBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.setupDeckBadge.custom {
  border-color: rgba(185,111,255,.58);
  color: #ead6ff;
  background: rgba(99,50,145,.22);
}
.setupDeckBadge.official {
  border-color: rgba(79,157,88,.58);
  color: #dcffe1;
  background: rgba(79,157,88,.14);
}
.setupDeckBadge.bad {
  border-color: rgba(216,74,68,.65);
  color: #ffd8d4;
  background: rgba(216,74,68,.14);
}
.setupDeckBadge.starter {
  border-color: rgba(227,189,103,.32);
  color: #f1d37b;
}
.setupPlayerSubsection {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.setupPlayerSubsection h4 {
  margin: 0 0 8px;
  color: #e6dcc3;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.setupFieldGrid {
  display: grid;
  gap: 5px;
}
.setupDeckRuntimeBox select {
  margin-bottom: 7px;
}
.setupDeckRuntimeBox .setupDeckSavedSelect:not([hidden]) {
  border-color: rgba(227,189,103,.30);
  background: rgba(10,9,8,.50);
}
.setupDeckInfo.good::before,
.setupDeckInfo.bad::before {
  display: inline-block;
  margin-right: 6px;
  font-weight: 900;
}
.setupDeckInfo.good::before { content: "✓"; }
.setupDeckInfo.bad::before { content: "!"; }
.deckBuilderHeaderActions button[data-app-open-card-editor],
.deckBuilderHeaderActions button[data-app-open-card-pool],
.deckBuilderHeaderActions button[data-app-open-deck-builder] {
  border-color: rgba(227,189,103,.30);
}
@media (max-width: 840px) {
  .mainMenuActionGroup,
  .mainMenuActionGroupDebug,
  .mainMenuActionGroupPlay .primary {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
  .setupSideHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =====================================================
   F9L1/F9L2 – Menu & Map Layout Calibration Tool
   ===================================================== */
:root {
  --f9l1-screen-padding: 18px;
  --f9l1-menu-card-width: 620px;
  --f9l1-setup-card-width: 880px;
  --f9l1-lab-card-width: 1180px;
  --f9l1-wide-lab-card-width: 1380px;
  --f9l1-card-padding: 28px;
  --f9l1-card-radius: 24px;
  --f9l1-group-gap: 12px;
  --f9l1-button-min-height: 44px;
  --f9l1-backdrop-opacity: .5;
  --f9l1-font-scale: 1;
}
body.app-screen-layout-lab .gameScreen { display: none !important; }
body.app-screen-layout-lab .menuLayoutLabScreen { display: grid; }
body.app-screen-layout-lab .mainMenuScreen,
body.app-screen-layout-lab .setupScreen,
body.app-screen-layout-lab .deckBuilderScreen,
body.app-screen-layout-lab .cardEditorScreen,
body.app-screen-layout-lab .cardPoolScreen,
body.app-screen-layout-lab .appPlaceholderScreen { display: none !important; }
.mainMenuScreen,
.setupScreen,
.deckBuilderScreen,
.cardEditorScreen,
.cardPoolScreen,
.appPlaceholderScreen,
.menuLayoutLabScreen {
  padding: max(var(--f9l1-screen-padding), env(safe-area-inset-top)) max(var(--f9l1-screen-padding), env(safe-area-inset-right)) max(var(--f9l1-screen-padding), env(safe-area-inset-bottom)) max(var(--f9l1-screen-padding), env(safe-area-inset-left));
}
.mainMenuBackdrop { opacity: var(--f9l1-backdrop-opacity); }
.mainMenuCard {
  width: min(var(--f9l1-menu-card-width), calc(100vw - 32px));
  padding: var(--f9l1-card-padding);
  border-radius: var(--f9l1-card-radius);
  font-size: calc(1rem * var(--f9l1-font-scale));
}
.setupScreenCard {
  width: min(var(--f9l1-setup-card-width), calc(100vw - 32px));
  padding: var(--f9l1-card-padding);
  border-radius: var(--f9l1-card-radius);
  font-size: calc(1rem * var(--f9l1-font-scale));
}
.deckBuilderCard {
  width: min(var(--f9l1-lab-card-width), calc(100vw - 32px));
  padding: var(--f9l1-card-padding);
  border-radius: var(--f9l1-card-radius);
  font-size: calc(1rem * var(--f9l1-font-scale));
}
.cardEditorCard,
.cardPoolCard {
  width: min(var(--f9l1-wide-lab-card-width), calc(100vw - 28px));
  padding: var(--f9l1-card-padding);
  border-radius: var(--f9l1-card-radius);
  font-size: calc(1rem * var(--f9l1-font-scale));
}
.mainMenuActionsF9K7,
.setupScreenGrid,
.setupMatchGrid,
.cardEditorLayout,
.cardPoolPreviewLayout,
.deckBuilderLayout,
.deckBuilderHeader,
.menuLayoutLabGrid {
  gap: var(--f9l1-group-gap);
}
.mainMenuActionGroup,
.setupSideBox,
.setupMatchBox,
.setupPlayerSubsection,
.deckBuilderBox {
  border-radius: max(12px, calc(var(--f9l1-card-radius) - 6px));
}
.mainMenuActionGroup button,
.setupScreenActions button,
.deckBuilderHeaderActions button,
.menuLayoutLabActions button {
  min-height: var(--f9l1-button-min-height);
}
.menuLayoutLabScreen {
  position: fixed;
  inset: 0;
  z-index: 18;
  min-height: 100dvh;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78)),
    radial-gradient(circle at 50% 20%, rgba(150, 27, 24, .24), rgba(7, 8, 13, .96) 62%);
}
.menuLayoutLabCard {
  position: relative;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--f9l1-card-radius);
  padding: var(--f9l1-card-padding);
  background: linear-gradient(180deg, rgba(22,24,33,.88), rgba(12,14,20,.94));
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.menuLayoutLabHeaderActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.menuLayoutLabControlsBox,
.menuLayoutLabExportBox {
  margin-top: 12px;
}
.menuLayoutLabEnabledLine {
  margin: 8px 0 12px;
}
.menuLayoutLabGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: end;
}
.menuLayoutLabField {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.026);
  color: var(--muted);
  font-size: 12px;
}
.menuLayoutLabField span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.menuLayoutLabField strong {
  color: #f1d37b;
  white-space: nowrap;
}
.menuLayoutLabField input[type="range"] {
  width: 100%;
  accent-color: #f1d37b;
}
.menuLayoutLabActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#menuLayoutExportText {
  width: 100%;
  min-height: 230px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  color: var(--text);
  padding: 10px;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.35;
}
#menuLayoutStatusLine.good { color: #bff3b8; }
#menuLayoutStatusLine.bad { color: #ffd1cc; }
@media (max-width: 840px) {
  .menuLayoutLabGrid {
    grid-template-columns: 1fr;
  }
  .menuLayoutLabHeaderActions {
    justify-content: stretch;
  }
  .menuLayoutLabHeaderActions button {
    width: 100%;
  }
}

/* =====================================================
   F9L2 – Map Visual Layer Foundation
   ===================================================== */
:root {
  --hex-center-x: 460px;
  --hex-center-y: 390px;
  --hex-size: 31px;
  --board-native-width: 920px;
  --board-native-height: 780px;
  --map-bg-opacity: .96;
  --map-grid-opacity: .11;
  --map-cell-fill-opacity: .20;
  --map-ps-glow-opacity: .78;
  --map-qg-glow-opacity: .82;
  /* F9M2c:
     --map-bg-image è lo slot asset reale; --map-bg-art resta fallback procedurale.
     Se l'immagine manca o non carica, il fallback rimane visibile e il gioco non si rompe.
     Le celle base sono volutamente molto trasparenti: il fondale deve restare leggibile sotto la griglia. */
  --map-bg-image: none;
  --map-bg-veil: linear-gradient(180deg, rgba(5,7,12,.14), rgba(5,7,12,.30));
  --map-bg-art: radial-gradient(circle at 50% 46%, rgba(194, 76, 46, .20), rgba(214, 179, 90, .08) 22%, rgba(21, 27, 38, .44) 53%, rgba(5, 7, 12, .92) 100%);
  --map-bg-grid: linear-gradient(30deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px), linear-gradient(150deg, rgba(255,255,255,.026) 0 1px, transparent 1px 42px);
  --map-bg-tint: linear-gradient(180deg, #171d29, #090b11);
  --map-bg-position: center center;
  --map-bg-size: cover, cover;
  --map-bg-asset-opacity: .98;
}
#boardWrap {
  isolation: isolate;
}
.boardVisualStack {
  position: relative;
  width: var(--board-native-width);
  height: var(--board-native-height);
  max-width: none;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.075);
  overflow: hidden;
  background: #111722;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 18px 40px rgba(0,0,0,.22);
  transform: translate3d(var(--board-camera-x, 0px), var(--board-camera-y, 0px), 0) scale(var(--board-fit-scale, 1));
  transform-origin: center center;
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint style;
  z-index: 1;
}
.boardVisualStack.mapCameraAnimating {
  transition: transform .12s ease;
}
.mapLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mapBgLayer {
  z-index: 0;
  opacity: var(--map-bg-opacity);
  background: var(--map-bg-art), var(--map-bg-tint);
  background-position: var(--map-bg-position);
  background-size: cover, cover;
}
.mapBgAssetImage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: var(--map-bg-asset-opacity);
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
}
.mapBgAssetImage[hidden] {
  display: none !important;
}
.mapBgAssetImage.loaded {
  display: block;
}
.mapBgLayer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--map-bg-grid), var(--map-bg-veil);
  background-position: var(--map-bg-position);
  background-size: auto, auto, cover;
}
.mapBgLayer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--hex-center-x) var(--hex-center-y), rgba(241,211,123,.12), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.20));
  mix-blend-mode: screen;
  opacity: .72;
}

html[data-map-bg-asset-status="loaded"] .mapBgLayer {
  opacity: var(--map-bg-opacity);
}
html[data-map-bg-asset-status="missing"] .mapBgLayer {
  box-shadow: inset 0 0 0 1px rgba(255, 210, 110, .10);
}
/* F9L2a hardening:
   #board ora vive dentro #boardVisualStack.
   Lo stack gestisce background, overflow, bordo e transform camera.
   #board resta solo il layer delle celle esagonali cliccabili.
   Questi override impediscono alle vecchie regole board di duplicare sfondo/bordi/camera. */
#board {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  z-index: 2;
}
.mapEffectsLayer {
  z-index: 5;
  opacity: .95;
}
.mapOverlayLayer {
  z-index: 6;
}
.hex {
  background: rgba(34, 41, 55, var(--map-cell-fill-opacity));
  outline: 1px solid rgba(255,255,255,var(--map-grid-opacity));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  backdrop-filter: blur(.5px);
}
.hex:hover:not(:disabled) {
  background: rgba(47, 57, 76, .82);
}
.hex.ps {
  background: linear-gradient(180deg, rgba(83,70,38,.72), rgba(41,43,52,.66));
  box-shadow: inset 0 0 0 2px rgba(214,179,90,var(--map-ps-glow-opacity)), 0 0 18px rgba(214,179,90,.18);
}
.hex.ps::after {
  opacity: var(--map-ps-glow-opacity);
}
.hex.hq {
  background: linear-gradient(180deg, rgba(74,61,37,.74), rgba(31,36,48,.68));
  box-shadow: inset 0 0 0 3px rgba(241,211,123,var(--map-qg-glow-opacity)), 0 0 22px rgba(241,211,123,.20);
}
.hex.hq::before {
  opacity: var(--map-qg-glow-opacity);
}
body.app-screen-game:not(.mobile-apk-m4) #boardVisualStack {
  width: var(--board-native-width, 920px);
  height: var(--board-native-height, 780px);
  max-width: none;
}
body.mobile-apk-m4 #boardVisualStack {
  width: var(--board-native-width, 920px) !important;
  height: var(--board-native-height, 780px) !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transform: translate3d(var(--board-camera-x, 0px), var(--board-camera-y, 0px), 0) scale(var(--board-fit-scale, 1)) !important;
  transform-origin: center center !important;
  /* APK-M4 usa la camera mobile validata: niente transizioni sullo stack. */
  transition: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: layout paint style !important;
  cursor: default !important;
  touch-action: manipulation !important;
}
body.mobile-apk-m4 #board {
  transform: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* =====================================================
   F9L3 – Unit Token Visual System
   =====================================================
   Visual-only pass: the map unit token keeps the existing SVG symbol + statMini
   renderer, but gains clearer size/type/weight/custom/selection styling.
   No gameplay, targeting, combat, AI, deck or map-coordinate logic is changed.
*/
:root {
  --token-infantry-w: 40px;
  --token-infantry-h: 40px;
  --token-vehicle-w: 44px;
  --token-vehicle-h: 40px;
  --token-structure-w: 46px;
  --token-structure-h: 46px;
  --token-commander-w: 43px;
  --token-commander-h: 43px;
  --token-qg-w: 46px;
  --token-qg-h: 46px;
  --token-core-shadow: 0 5px 10px rgba(0,0,0,.38), inset 0 -7px 13px rgba(0,0,0,.24), inset 0 4px 8px rgba(255,255,255,.12);
}

.unitToken {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  --token-ring-shadow: 0 0 0 0 rgba(255,255,255,0);
  box-shadow: var(--token-ring-shadow), var(--token-core-shadow) !important;
}

.unitToken.type-fanteria {
  width: var(--token-infantry-w);
  height: var(--token-infantry-h);
  border-radius: 50%;
}

.unitToken.type-veicolo {
  width: var(--token-vehicle-w);
  height: var(--token-vehicle-h);
  border-radius: 13px 9px 13px 9px;
}

.unitToken.type-struttura {
  width: var(--token-structure-w);
  height: var(--token-structure-h);
  border-radius: 10px;
  outline: 2px solid rgba(255,255,255,.18);
  --token-ring-shadow: 0 0 0 2px rgba(0,0,0,.22);
}

.unitToken.type-comandante {
  width: var(--token-commander-w);
  height: var(--token-commander-h);
  border-radius: 50%;
  border-color: rgba(228,84,84,.96);
  border-width: 3px;
  --token-ring-shadow: 0 0 0 3px rgba(228,84,84,.26), 0 0 16px rgba(228,84,84,.20);
}

.unitToken.type-qg {
  width: var(--token-qg-w);
  height: var(--token-qg-h);
  border-radius: 12px;
  border-color: rgba(241,211,123,.96);
  border-width: 3px;
  --token-ring-shadow: 0 0 0 3px rgba(241,211,123,.34), 0 0 18px rgba(241,211,123,.20);
}

.unitToken .symbol {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.unitToken .symbol svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.unitToken.type-fanteria .symbol svg { width: 22px; height: 22px; }
.unitToken.type-veicolo .symbol svg { width: 25px; height: 23px; }
.unitToken.type-struttura .symbol svg { width: 27px; height: 27px; }
.unitToken.type-comandante .symbol svg { width: 23px; height: 23px; }
.unitToken.type-qg .symbol svg { width: 27px; height: 27px; }

.unitToken.weight-pesante {
  border-color: rgba(241,200,75,.96);
  border-width: 3px;
  --token-ring-shadow: 0 0 0 2px rgba(241,200,75,.16), inset 0 0 0 2px rgba(255,255,255,.10);
}

.unitToken.weight-elite {
  border-color: rgba(255,214,94,.98);
  border-width: 3px;
  --token-ring-shadow: 0 0 0 2px rgba(255,214,94,.28), 0 0 16px rgba(255,214,94,.18), inset 0 0 0 2px rgba(255,255,255,.11);
}

.unitToken.weight-pivot {
  border-color: rgba(228,84,84,.98);
  border-width: 3px;
  --token-ring-shadow: 0 0 0 3px rgba(228,84,84,.30), 0 0 18px rgba(228,84,84,.20), inset 0 0 0 2px rgba(255,255,255,.10);
}

.unitToken.weight-leggera {
  border-color: rgba(255,255,255,.82);
  border-width: 2px;
}

.unitToken .pivotOverlay {
  position: absolute;
  top: -8px;
  right: -6px;
  z-index: 11;
  color: #ffd75e;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(255,215,94,.88), 0 1px 2px rgba(0,0,0,.95);
  pointer-events: none;
}

.unitToken.is-custom {
  outline: 1px dashed rgba(255,255,255,.34);
  outline-offset: 2px;
}

.unitToken .tokenCustomBadge {
  position: absolute;
  right: -4px;
  bottom: 1px;
  z-index: 12;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(5,8,14,.92);
  border: 1px solid rgba(255,255,255,.58);
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: 0 1px 4px rgba(0,0,0,.65);
  pointer-events: none;
}

.unitToken .statMini {
  bottom: -11px;
  min-width: 27px;
  justify-content: center;
  font-size: 8.8px;
  padding: 1px 4px 2px;
}

.unitToken.type-struttura .statMini,
.unitToken.type-qg .statMini {
  bottom: -14px;
  font-size: 8.6px;
  padding: 1px 4px 2px;
  border-color: rgba(241,211,123,.30);
}

.unitToken.type-veicolo .statMini {
  bottom: -12px;
}

.unitToken.is-selected {
  --token-ring-shadow: 0 0 0 3px rgba(255,255,255,.86), 0 0 18px rgba(132,185,255,.55), 0 0 30px rgba(255,255,255,.18);
  z-index: 9;
}

.unitToken.thorns {
  --token-ring-shadow: 0 0 0 3px rgba(143,224,154,.44), 0 0 16px rgba(143,224,154,.22);
}

.unitToken.is-selected.thorns {
  --token-ring-shadow: 0 0 0 3px rgba(255,255,255,.86), 0 0 0 6px rgba(143,224,154,.26), 0 0 20px rgba(132,185,255,.50);
}

.unitToken.bleeding::after {
  z-index: 13;
}

.unitToken.weight-pivot.bleeding::after {
  right: 8px;
}

.unitToken.inhibited::before {
  z-index: 13;
}

/* Keep APK-M4 token sizing deterministic despite earlier mobile !important rules. */
body.mobile-apk-m4 .unitToken.type-fanteria { width: 40px !important; height: 40px !important; }
body.mobile-apk-m4 .unitToken.type-veicolo { width: 44px !important; height: 40px !important; }
body.mobile-apk-m4 .unitToken.type-struttura,
body.mobile-apk-m4 .unitToken.type-qg { width: 46px !important; height: 46px !important; }
body.mobile-apk-m4 .unitToken.type-comandante { width: 43px !important; height: 43px !important; }
body.mobile-apk-m4 .unitToken.type-struttura .statMini,
body.mobile-apk-m4 .unitToken.type-qg .statMini { bottom: -13px !important; }

/* =====================================================
   F9L4 – Tactical Highlight Pass
   =====================================================
   Visual-only pass: uses existing target classes already produced by renderBoard()
   and adds only lightweight marker classes for controlled/tactical cells.
   Gameplay, movement, attack, targeting, AI and board coordinates remain untouched.
*/
:root {
  --target-move: 139, 209, 124;
  --target-attack: 239, 119, 119;
  --target-ability: 227, 189, 103;
  --target-build: 132, 185, 255;
  --target-spawn: 126, 222, 202;
  --target-selected: 255, 255, 255;
  --target-shadow-core: 0 8px 16px rgba(0,0,0,.26);
  --objective-ps: 214, 179, 90;
  --objective-qg: 241, 211, 123;
}

#board.has-tactical-mode .hex:not(.tacticalTarget):not(.selected) {
  filter: saturate(.78) brightness(.88);
}

.hex {
  transition: background-color .08s ease, box-shadow .08s ease, filter .08s ease, outline-color .08s ease;
}

.hex.controlledCell:not(.tacticalTarget):not(.selected) {
  box-shadow: inset 0 0 0 3px var(--cell-control-color, rgba(255,255,255,.82)), inset 0 0 18px rgba(0,0,0,.18) !important;
}

.hex.tacticalTarget {
  z-index: 6;
  cursor: pointer;
  filter: brightness(1.08) saturate(1.18);
}

.hex.tacticalTarget.occupied {
  z-index: 8;
}

.hex.moveTarget {
  background: radial-gradient(circle at 50% 44%, rgba(var(--target-move), .32), rgba(21,38,31,.58) 72%) !important;
  outline-color: rgba(var(--target-move), .70) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-move), .88),
    inset 0 0 18px rgba(var(--target-move), .24),
    0 0 16px rgba(var(--target-move), .28),
    var(--target-shadow-core) !important;
}

.hex.attackTarget {
  background: radial-gradient(circle at 50% 44%, rgba(var(--target-attack), .34), rgba(62,24,29,.62) 74%) !important;
  outline-color: rgba(var(--target-attack), .74) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-attack), .94),
    inset 0 0 19px rgba(var(--target-attack), .26),
    0 0 18px rgba(var(--target-attack), .32),
    var(--target-shadow-core) !important;
}

.hex.abilityTarget {
  background: radial-gradient(circle at 50% 44%, rgba(var(--target-ability), .34), rgba(56,44,21,.64) 74%) !important;
  outline-color: rgba(var(--target-ability), .74) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-ability), .92),
    inset 0 0 19px rgba(var(--target-ability), .25),
    0 0 18px rgba(var(--target-ability), .28),
    var(--target-shadow-core) !important;
}

.hex.buildTarget {
  background: radial-gradient(circle at 50% 44%, rgba(var(--target-build), .34), rgba(24,42,61,.64) 74%) !important;
  outline-color: rgba(var(--target-build), .74) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-build), .92),
    inset 0 0 18px rgba(var(--target-build), .25),
    0 0 17px rgba(var(--target-build), .27),
    var(--target-shadow-core) !important;
}

.hex.spawnTarget {
  background: radial-gradient(circle at 50% 44%, rgba(var(--target-spawn), .30), rgba(22,48,45,.62) 74%) !important;
  outline-color: rgba(var(--target-spawn), .72) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-spawn), .88),
    inset 0 0 18px rgba(var(--target-spawn), .24),
    0 0 16px rgba(var(--target-spawn), .24),
    var(--target-shadow-core) !important;
}

.hex.selected {
  z-index: 10;
  filter: brightness(1.14) saturate(1.12) !important;
  outline-color: rgba(var(--target-selected), .84) !important;
  box-shadow:
    inset 0 0 0 3px rgba(var(--target-selected), .96),
    inset 0 0 18px rgba(var(--target-selected), .20),
    0 0 22px rgba(132,185,255,.36),
    var(--target-shadow-core) !important;
}

.hex.tacticalTarget .unitToken {
  z-index: 10;
}

.hex.attackTarget .unitToken {
  --token-ring-shadow: 0 0 0 3px rgba(var(--target-attack), .82), 0 0 18px rgba(var(--target-attack), .42);
}

.hex.abilityTarget .unitToken {
  --token-ring-shadow: 0 0 0 3px rgba(var(--target-ability), .78), 0 0 16px rgba(var(--target-ability), .35);
}

.hex.moveTarget .unitToken,
.hex.spawnTarget .unitToken,
.hex.buildTarget .unitToken {
  --token-ring-shadow: 0 0 0 3px rgba(var(--target-build), .50), 0 0 14px rgba(var(--target-build), .28);
}

.hex.ps {
  position: absolute;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--objective-ps), .28), transparent 50%),
    linear-gradient(180deg, rgba(83,70,38,.76), rgba(41,43,52,.66)) !important;
}

.hex.ps::after {
  top: 2px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(5,8,14,.58);
  border: 1px solid rgba(var(--objective-ps), .34);
  font-size: 12px;
  line-height: 1;
}

.hex.hq {
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--objective-qg), .30), transparent 52%),
    linear-gradient(180deg, rgba(74,61,37,.80), rgba(31,36,48,.68)) !important;
}

.hex.hq::before {
  top: 2px;
  left: 6px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(5,8,14,.58);
  border: 1px solid rgba(var(--objective-qg), .36);
  font-size: 12px;
  line-height: 1;
}

.hex.ps.tacticalTarget::after,
.hex.hq.tacticalTarget::before {
  background: rgba(5,8,14,.78);
  border-color: rgba(255,255,255,.48);
}

.hex.psLocked {
  box-shadow:
    inset 0 0 0 3px rgba(187,112,226,.88),
    inset 0 0 18px rgba(187,112,226,.24),
    0 0 16px rgba(187,112,226,.22) !important;
}

.hex.cellBlocked,
.hex.cellTrapNexus,
.hex.cellPassageNexus,
.hex.cellTrapAgathoi,
.hex.cellBramble {
  filter: saturate(1.10) brightness(1.04);
}

.hex.cellBlocked:not(.tacticalTarget) {
  box-shadow:
    inset 0 0 0 3px rgba(143,224,154,.82),
    inset 0 0 18px rgba(143,224,154,.18) !important;
}

.hex.cellTrapNexus:not(.tacticalTarget) {
  box-shadow:
    inset 0 0 0 3px rgba(132,185,255,.72),
    inset 0 0 18px rgba(132,185,255,.18) !important;
}

.hex.cellPassageNexus:not(.tacticalTarget) {
  box-shadow:
    inset 0 0 0 3px rgba(132,185,255,.82),
    inset 0 0 18px rgba(132,185,255,.22) !important;
}

.hex.cellTrapAgathoi:not(.tacticalTarget),
.hex.cellBramble:not(.tacticalTarget) {
  box-shadow:
    inset 0 0 0 3px rgba(143,224,154,.78),
    inset 0 0 18px rgba(143,224,154,.20) !important;
}

.hex.tacticalTarget .coord,
.hex.selected .coord {
  opacity: .78;
  background: rgba(5,8,14,.62);
  border-radius: 999px;
  padding: 0 3px;
}

body.mobile-apk-m4 #board.has-tactical-mode .hex:not(.tacticalTarget):not(.selected) {
  filter: saturate(.82) brightness(.92);
}
body.mobile-apk-m4 .hex.tacticalTarget {
  filter: brightness(1.10) saturate(1.14);
}
body.mobile-apk-m4 .hex.moveTarget,
body.mobile-apk-m4 .hex.attackTarget,
body.mobile-apk-m4 .hex.abilityTarget,
body.mobile-apk-m4 .hex.buildTarget,
body.mobile-apk-m4 .hex.spawnTarget,
body.mobile-apk-m4 .hex.selected {
  box-shadow: inherit;
}

/* =====================================================
   F9L5 – Map Visual Polish / PS-QG Pass
   =====================================================
   Visual-only consolidation pass after F9L4.
   Fixes structure/QG stat badges being visually covered by adjacent hex cells
   and adds a small polish pass to objective labels. No gameplay, targeting,
   movement, combat, AI, deck or coordinate logic is changed.
*/
:root {
  --objective-label-bg: rgba(5, 8, 14, .72);
  --objective-label-border: rgba(255,255,255,.32);
  --structure-cell-z: 7;
  --selected-cell-z: 12;
}

/* F9L5: structure/QG tokens are larger and their stat strip can cross the
   visual edge of the hex. Raise the owning cell above adjacent normal cells
   so neighbouring hex backgrounds cannot cover the stat label. */
.hex.occupied-type-struttura,
.hex.occupied-type-qg {
  z-index: var(--structure-cell-z);
}

.hex.occupied-type-comandante,
.hex.occupied-weight-pivot {
  z-index: 8;
}

.hex.occupied-type-struttura.tacticalTarget,
.hex.occupied-type-qg.tacticalTarget,
.hex.occupied-type-comandante.tacticalTarget,
.hex.occupied-weight-pivot.tacticalTarget {
  z-index: 11;
}

.hex.selected {
  z-index: var(--selected-cell-z) !important;
}

.hex.selected .unitToken,
.hex.tacticalTarget .unitToken {
  z-index: 14;
}

/* Keep the stat badge for large static tokens docked inside the token, not
   hanging under the hex. This avoids clipping/covering on dense maps while
   keeping infantry/vehicle labels unchanged. */
.unitToken.type-struttura .symbol,
.unitToken.type-qg .symbol {
  transform: translateY(-4px);
}

.unitToken.type-struttura .statMini,
.unitToken.type-qg .statMini {
  bottom: 1px;
  min-width: 31px;
  padding: 1px 4px 2px;
  border-color: rgba(241,211,123,.38);
  background: rgba(3,5,10,.88);
  box-shadow: 0 1px 5px rgba(0,0,0,.60), inset 0 0 0 1px rgba(255,255,255,.05);
}

.unitToken.type-struttura.weight-pesante .statMini,
.unitToken.type-struttura.weight-elite .statMini,
.unitToken.type-qg .statMini {
  border-color: rgba(255,214,94,.42);
}

.unitToken.type-struttura.is-selected .statMini,
.unitToken.type-qg.is-selected .statMini {
  border-color: rgba(255,255,255,.62);
}

/* Objective markers: same information as F9L4, slightly clearer and less
   dependent on the underlying cell glow. */
.hex.ps::after,
.hex.hq::before {
  background: var(--objective-label-bg);
  border-color: var(--objective-label-border);
  box-shadow: 0 1px 5px rgba(0,0,0,.45), 0 0 10px rgba(241,211,123,.10);
  font-weight: 900;
  pointer-events: none;
}

.hex.ps:not(.psLocked)::after {
  content: "✦";
}

.hex.ps.psLocked::after {
  content: "⊘";
}

.hex.hq::before {
  content: "⌂";
}

.hex.cellObjective:not(.tacticalTarget):not(.selected) {
  filter: saturate(1.06) brightness(1.02);
}

.hex.ps.controlledCell:not(.tacticalTarget):not(.selected) {
  box-shadow:
    inset 0 0 0 3px var(--cell-control-color, rgba(255,255,255,.82)),
    inset 0 0 18px rgba(var(--objective-ps), .18),
    0 0 16px rgba(var(--objective-ps), .12) !important;
}

.hex.hq.controlledCell:not(.tacticalTarget):not(.selected) {
  box-shadow:
    inset 0 0 0 3px var(--cell-control-color, rgba(255,255,255,.82)),
    inset 0 0 18px rgba(var(--objective-qg), .18),
    0 0 16px rgba(var(--objective-qg), .14) !important;
}

body.mobile-apk-m4 .unitToken.type-struttura .statMini,
body.mobile-apk-m4 .unitToken.type-qg .statMini {
  bottom: 1px !important;
  min-width: 31px !important;
}

body.mobile-apk-m4 .unitToken.type-struttura .symbol,
body.mobile-apk-m4 .unitToken.type-qg .symbol {
  transform: translateY(-4px) !important;
}


/* =====================================================
   F9M1 – Map Background / Skin Slot
   =====================================================
   Visual-only skin slot: selezione background procedurale/CSS per lo stack mappa.
   Non introduce terrain per cella, collisioni, regole o asset obbligatori.
*/
.mapSkinSlotRow {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) 1fr;
  gap: 12px;
  align-items: stretch;
  margin: 10px 0 14px;
}
.mapSkinSelectBox {
  display: grid;
  gap: 8px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  padding: 12px;
}
.mapSkinSelectBox label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .86rem;
}
.mapSkinSelectBox select {
  min-height: 38px;
}
.mapSkinPreviewCard {
  position: relative;
  min-height: 86px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  background: var(--map-bg-grid), var(--map-bg-veil), var(--map-bg-image), var(--map-bg-art), var(--map-bg-tint);
  background-position: var(--map-bg-position);
  background-size: var(--map-bg-size);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.18);
}
.mapSkinPreviewCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(241,211,123,.12), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.24));
  pointer-events: none;
}
.mapSkinPreviewText {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  align-content: end;
  min-height: 86px;
  padding: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18), transparent);
}
.mapSkinPreviewText strong {
  color: #fff5cc;
  letter-spacing: .03em;
}
.mapSkinPreviewText span {
  color: rgba(246,239,218,.78);
  font-size: .82rem;
}
.mapSkinSlotMeta {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
@media (max-width: 820px) {
  .mapSkinSlotRow { grid-template-columns: 1fr; }
}

/* =====================================================
   F9M2/F9M2a – Visual Asset Slots Foundation
   =====================================================
   Visual-only pass: official map background asset slots, linked UI skin vars,
   and optional token graphics mode with safe CSS/SVG fallback.
   No terrain-per-cell, gameplay, AI, targeting, deck or combat logic is changed.
*/
:root {
  --skin-accent: var(--ps);
  --skin-panel-bg: var(--panel);
  --skin-panel-border: var(--line);
  --skin-button-bg: var(--panel-2);
  --skin-hand-bg: rgba(0,0,0,.24);
  --token-art-opacity: .96;
  --token-art-symbol-opacity: .10;
}

html[data-map-skin] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(214,179,90,.08), transparent 44%),
    radial-gradient(circle at top, #222838 0, var(--bg) 55%);
}

html[data-map-skin] header.topTitleBar,
html[data-map-skin] .panel,
html[data-map-skin] .mainMenuCard,
html[data-map-skin] .setupScreenCard,
html[data-map-skin] .deckBuilderCard,
html[data-map-skin] .cardEditorCard,
html[data-map-skin] .cardPoolCard,
html[data-map-skin] .menuLayoutLabCard,
html[data-map-skin] .deckBuilderBox,
html[data-map-skin] .mainMenuActionGroup,
html[data-map-skin] .setupSideBox,
html[data-map-skin] .setupMatchBox,
html[data-map-skin] .setupPlayerSubsection {
  border-color: var(--skin-panel-border);
}

html[data-map-skin] .panel,
html[data-map-skin] .mainMenuCard,
html[data-map-skin] .setupScreenCard,
html[data-map-skin] .deckBuilderCard,
html[data-map-skin] .cardEditorCard,
html[data-map-skin] .cardPoolCard,
html[data-map-skin] .menuLayoutLabCard {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--skin-panel-bg);
}

html[data-map-skin] .handPrimaryDock .body,
html[data-map-skin] #cardZonePanel,
html[data-map-skin] .gameActionBar,
html[data-map-skin] .tacticDock .body,
html[data-map-skin] .logDock .body {
  background: var(--skin-hand-bg);
}

html[data-map-skin] button:not(.primary):not(.danger),
html[data-map-skin] select {
  background: var(--skin-button-bg);
  border-color: var(--skin-panel-border);
}

html[data-map-skin] button:hover:not(:disabled):not(.primary):not(.danger) {
  border-color: var(--skin-accent);
}

html[data-map-skin] .mainMenuKicker,
html[data-map-skin] .deckBuilderBox h3,
html[data-map-skin] .deckBuilderTable th,
html[data-map-skin] .mapSkinPreviewText strong {
  color: var(--skin-accent);
}

.mapSkinAssetPath {
  display: block;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: .72rem !important;
  color: rgba(246,239,218,.62) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-token-graphics-mode="on"] .unitToken.has-token-art {
  /* F9M2e: keep overflow visible so infantry/vehicle stat badges outside the
     token are not clipped when image tokens are active. The image itself is
     clipped by its own border-radius/inset. */
  overflow: visible;
  isolation: isolate;
}

.unitToken .tokenArt {
  position: absolute;
  inset: 3px;
  z-index: 0;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
  filter: saturate(1.04) contrast(1.05);
  transition: none;
}

.unitToken.type-fanteria .tokenArt,
.unitToken.type-comandante .tokenArt { border-radius: 999px; }
.unitToken.type-veicolo .tokenArt { border-radius: 10px 7px 10px 7px; }
.unitToken.type-struttura .tokenArt,
.unitToken.type-qg .tokenArt { border-radius: 8px; }

/* F9M2f: tokenArt è uno span con background-image, non più un <img>.
   La classe token-art-loaded viene applicata subito se l'asset è già nella cache
   visuale; niente fade ad ogni renderBot/renderAll, niente flash sul fallback. */
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .tokenArt {
  opacity: var(--token-art-opacity);
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .symbol {
  opacity: var(--token-art-symbol-opacity);
  z-index: 2;
  mix-blend-mode: screen;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .pivotOverlay,
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .tokenCustomBadge,
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .statMini {
  z-index: 32 !important;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .statMini {
  display: inline-flex !important;
  opacity: 1 !important;
  background: rgba(3,5,10,.92) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded.type-fanteria .statMini,
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded.type-veicolo .statMini,
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded.type-comandante .statMini {
  bottom: -10px;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-missing .tokenArt {
  display: none;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-missing::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px dashed rgba(255,255,255,.18);
  pointer-events: none;
  opacity: .55;
}

body.mobile-apk-m4 .unitToken .tokenArt {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}


/* =====================================================
   F9M2d – Map Opacity Calibration Binding Fix
   =====================================================
   The Calibration Lab sliders must affect the visible board, not only the
   earliest base .hex rule. F9L4/F9L5 added later objective/target/polish
   backgrounds, so this final visual-only binding re-applies the map opacity
   variables at the end of the cascade. Gameplay, targeting and coordinates
   are untouched.
*/
.hex:not(.tacticalTarget):not(.selected):not(.cellBlocked):not(.cellPassageNexus):not(.cellBramble) {
  outline: 1px solid rgba(255,255,255,var(--map-grid-opacity)) !important;
}

.hex:not(.ps):not(.hq):not(.tacticalTarget):not(.selected):not(.cellBlocked):not(.cellTrapNexus):not(.cellPassageNexus):not(.cellTrapAgathoi):not(.cellBramble) {
  background: rgba(34, 41, 55, var(--map-cell-fill-opacity)) !important;
}

.hex.ps:not(.tacticalTarget):not(.selected) {
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--objective-ps), var(--map-cell-fill-opacity)), transparent 50%),
    linear-gradient(180deg, rgba(83,70,38,var(--map-cell-fill-opacity)), rgba(41,43,52,var(--map-cell-fill-opacity))) !important;
}

.hex.hq:not(.tacticalTarget):not(.selected) {
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--objective-qg), var(--map-cell-fill-opacity)), transparent 52%),
    linear-gradient(180deg, rgba(74,61,37,var(--map-cell-fill-opacity)), rgba(31,36,48,var(--map-cell-fill-opacity))) !important;
}

.hex.cellTrapNexus:not(.tacticalTarget):not(.selected),
.hex.cellTrapAgathoi:not(.tacticalTarget):not(.selected) {
  background: rgba(34, 41, 55, var(--map-cell-fill-opacity)) !important;
}

body.mobile-apk-m4 .hex:not(.tacticalTarget):not(.selected):not(.cellBlocked):not(.cellPassageNexus):not(.cellBramble) {
  outline-color: rgba(255,255,255,var(--map-grid-opacity)) !important;
}

/* =====================================================
   F9N2 – Combat & Status Feedback Layer
   =====================================================
   Event-driven visual feedback only. No gameplay values are computed here.
*/
.mapOverlayLayer {
  pointer-events: none;
  overflow: visible;
}

.combatFeedbackFloat {
  position: absolute;
  z-index: 120;
  transform: translate(-50%, -50%);
  min-width: max-content;
  padding: 2px 7px 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(4,7,13,.90);
  box-shadow: 0 3px 10px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.05);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.98), 0 0 7px currentColor;
  opacity: 0;
  animation: combatFeedbackFloatUp var(--feedback-duration, 1000ms) cubic-bezier(.16,.72,.25,1) var(--feedback-delay, 0ms) both;
  will-change: transform, opacity;
}

.combatFeedbackFloat.feedback-def { color: #f4f7ff; border-color: rgba(205,220,255,.52); }
.combatFeedbackFloat.feedback-hp { color: #ff7777; border-color: rgba(255,108,108,.54); }
.combatFeedbackFloat.feedback-status-block { color: #e8c56f; border-color: rgba(232,197,111,.58); }
.combatFeedbackFloat.feedback-status-stun { color: #d9a8ff; border-color: rgba(217,168,255,.58); }
.combatFeedbackFloat.feedback-status-bleed { color: #ff6e82; border-color: rgba(255,110,130,.60); }

@keyframes combatFeedbackFloatUp {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.82); }
  15% { opacity: 1; transform: translate(-50%, -52%) scale(1.06); }
  72% { opacity: 1; transform: translate(-50%, -92%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -128%) scale(.96); }
}

.unitToken.feedback-attacking {
  animation: combatFeedbackAttackLunge 230ms cubic-bezier(.22,.72,.22,1) both !important;
  z-index: 40 !important;
  will-change: transform;
}

@keyframes combatFeedbackAttackLunge {
  0% { transform: translate(0,0) scale(1); }
  42% { transform: translate(var(--feedback-shift-x, 0px), var(--feedback-shift-y, -8px)) scale(1.07); }
  100% { transform: translate(0,0) scale(1); }
}

.unitToken.feedback-impact {
  animation: combatFeedbackImpact 260ms ease-out both !important;
  will-change: transform, filter;
}

@keyframes combatFeedbackImpact {
  0% { transform: translate(0,0); filter: brightness(1); }
  22% { transform: translate(-2px,1px); filter: brightness(1.65); }
  45% { transform: translate(2px,-1px); filter: brightness(1.28); }
  72% { transform: translate(-1px,0); filter: brightness(1.12); }
  100% { transform: translate(0,0); filter: brightness(1); }
}

.unitToken.feedback-block { animation: combatFeedbackBlock 760ms ease-out both !important; }
.unitToken.feedback-stun { animation: combatFeedbackStun 760ms ease-out both !important; }
.unitToken.feedback-bleed { animation: combatFeedbackBleed 760ms ease-out both !important; }

@keyframes combatFeedbackBlock {
  0%,100% { transform: translate(0,0); box-shadow: var(--token-ring-shadow), var(--token-core-shadow); }
  30%,68% { transform: translate(0,1px) scale(.94); box-shadow: 0 0 0 4px rgba(232,197,111,.52), var(--token-core-shadow); }
}

@keyframes combatFeedbackStun {
  0%,100% { transform: rotate(0deg); filter: brightness(1); }
  18% { transform: rotate(-7deg); filter: brightness(1.55); }
  36% { transform: rotate(7deg); }
  54% { transform: rotate(-5deg); }
  72% { transform: rotate(4deg); }
}

@keyframes combatFeedbackBleed {
  0%,100% { transform: scale(1); filter: saturate(1); }
  28% { transform: scale(1.08); filter: saturate(1.8) brightness(1.28); }
  58% { transform: scale(.97); filter: saturate(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .combatFeedbackFloat { animation-duration: 1000ms !important; }
  .unitToken.feedback-attacking,
  .unitToken.feedback-impact,
  .unitToken.feedback-block,
  .unitToken.feedback-stun,
  .unitToken.feedback-bleed { animation-duration: 90ms !important; }
}

/* =====================================================
   F9N7 — Mission UI privata e rivelazione
   ===================================================== */
.missionDashboard {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(220, 193, 120, 0.28);
  border-radius: 12px;
  background: rgba(18, 21, 28, 0.88);
}
.missionDashboardTitle,
.missionPanelHeader,
.missionObjectiveHeader,
.missionPanelFooter,
.missionUiButtons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.missionDashboardTitle > div { display: grid; gap: 2px; }
.missionDashboardTitle span { color: var(--muted); font-size: 0.78rem; }
.missionDashboardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.missionPanel {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(8, 11, 16, 0.76);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.28);
}
.missionPanel.isSelected { outline: 2px solid rgba(238, 191, 84, 0.72); }
.missionPanel.isPublic { border-color: rgba(238, 191, 84, 0.52); }
.missionPanel-ready { border-color: rgba(92, 202, 123, 0.6); }
.missionPanel-blocked { border-color: rgba(213, 91, 91, 0.58); }
.missionEyebrow { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.missionPanel h4 { margin: 2px 0 0; font-size: 1rem; }
.missionStatus {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.missionStatus-ready { color: #b9f7c8; border-color: rgba(92,202,123,0.6); background: rgba(54,130,75,0.2); }
.missionStatus-blocked { color: #ffc2c2; border-color: rgba(213,91,91,0.62); background: rgba(132,42,42,0.22); }
.missionStatus-revealed { color: #ffe0a0; border-color: rgba(238,191,84,0.6); background: rgba(148,105,21,0.22); }
.missionStatus-tracking { color: #c5d7ff; border-color: rgba(95,133,211,0.52); background: rgba(45,72,132,0.2); }
.missionStatus-hidden,
.missionStatus-absent { color: #c8c8c8; }
.missionObjectiveList { display: grid; gap: 7px; margin: 10px 0; }
.missionObjective {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.missionObjective-completed { border-color: rgba(92,202,123,0.42); background: rgba(54,130,75,0.1); }
.missionObjective-satisfied { border-color: rgba(238,191,84,0.42); }
.missionObjectiveIndex {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  font-weight: 800;
}
.missionObjectiveBody { min-width: 0; display: grid; gap: 3px; }
.missionObjectiveHeader { align-items: flex-start; }
.missionObjectiveHeader strong { font-size: 0.78rem; line-height: 1.25; }
.missionObjectiveState { flex: 0 0 auto; color: var(--muted); font-size: 0.62rem; font-weight: 800; }
.missionObjective-completed .missionObjectiveState { color: #9eeab1; }
.missionObjectiveProgress { font-size: 0.76rem; font-weight: 700; }
.missionObjectiveDetail { color: var(--muted); font-size: 0.68rem; }
.missionRewardPreview {
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(238,191,84,0.07);
  color: #ead9af;
  font-size: 0.74rem;
}
.missionPanelFooter { align-items: flex-end; margin-top: 8px; color: var(--muted); font-size: 0.7rem; }
.missionPanelFooter > span { max-width: 52%; }
.missionUiButtons { justify-content: flex-end; flex-wrap: wrap; }
.missionUiButtons button { min-height: 30px; padding: 5px 9px; }
.missionUiHint { margin-top: 5px; text-align: right; color: var(--muted); font-size: 0.66rem; }
.missionRevealConfirm { display: grid; gap: 5px; max-width: 360px; text-align: right; }
.missionRevealConfirm span { color: var(--muted); font-size: 0.68rem; }
.missionHiddenBody { min-height: 94px; display: grid; place-items: center; padding: 12px; color: var(--muted); text-align: center; font-size: 0.76rem; }
.missionMapBadge { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.missionMapBadge-ready { border-color: rgba(92,202,123,0.62) !important; }
.missionMapBadge-blocked { border-color: rgba(213,91,91,0.62) !important; }
.missionMapBadge-revealed { border-color: rgba(238,191,84,0.62) !important; }
@media (max-width: 900px) {
  .missionDashboardGrid { grid-template-columns: 1fr; }
  .missionDashboardTitle { align-items: flex-start; }
  .missionPanelFooter { display: grid; }
  .missionPanelFooter > span { max-width: none; }
}

/* =====================================================
   F9N7a — Mission visibility & map HUD reflow
   ===================================================== */
.mapHandCollapseBtn {
  min-height: 36px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mapActionDock {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
.mapHandOverlay.isTargeting ~ .mapActionDock,
.mapHandOverlay.isMovementHidden ~ .mapActionDock {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
.mapActionDockHeader {
  align-items: center;
}
.mapActionDockIdentity {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.mapActionDockIdentity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapActionDockIdentity span {
  color: var(--muted);
  font-size: 9.5px;
}
.mapActionDockEnergy {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 5px 8px;
  border: 1px solid rgba(227,189,103,.28);
  border-radius: 11px;
  background: rgba(227,189,103,.075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.mapActionDockEnergy strong {
  color: #ffe7a7;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
}
.mapActionDockEnergy strong small {
  font-size: 9px;
  letter-spacing: .06em;
}
.mapActionDockEnergy span {
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.1;
  white-space: nowrap;
}

body.mobile-apk-m4 .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.mobile-apk-m4 .mapActionDockEnergy {
  padding: 4px 6px;
}
body.mobile-apk-m4 .mapActionDockEnergy strong {
  font-size: 16px;
}
body.mobile-apk-m4 .mapActionDockEnergy span {
  font-size: 7.5px;
}
body.mobile-apk-m4 .mapHandCollapseBtn {
  min-height: 34px;
  font-size: 9.5px;
  padding-left: 5px;
  padding-right: 5px;
}

@media (max-width: 820px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapActionDock,
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay.isTargeting ~ .mapActionDock,
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay.isMovementHidden ~ .mapActionDock {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* F9N9 – Missioni ordinarie/disperate e selezione ricompensa */
.missionPanel-resolved { border-color: rgba(102, 190, 154, .62); background: rgba(29, 86, 67, .13); }
.missionPanel-reward_pending { border-color: rgba(238, 191, 84, .72); }
.missionStatus-resolved { color:#b9f7dc; border-color:rgba(102,190,154,.65); background:rgba(29,86,67,.22); }
.missionStatus-reward_pending { color:#ffe0a0; border-color:rgba(238,191,84,.68); background:rgba(148,105,21,.22); }
.missionRewardChoice { margin-top:12px; padding:12px; border:1px solid rgba(238,191,84,.55); border-radius:12px; background:rgba(17,20,27,.94); display:grid; gap:10px; }
.missionRewardChoiceHeader { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.missionRewardChoiceHeader > div { display:grid; gap:3px; }
.missionRewardChoiceHeader span { color:var(--muted); font-size:.72rem; }
.missionRewardCardGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.missionRewardCard { min-height:68px; padding:8px; border:1px solid rgba(255,255,255,.15); border-radius:9px; background:rgba(255,255,255,.035); color:inherit; display:grid; gap:4px; text-align:left; }
.missionRewardCard span { color:var(--muted); font-size:.68rem; }
.missionRewardCard.isSelected { border-color:rgba(238,191,84,.85); background:rgba(148,105,21,.24); box-shadow:0 0 0 1px rgba(238,191,84,.28) inset; }

/* F9N9 – selezione bersagli Missioni disperate */
.missionRewardTargetGroup {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.missionRewardTargetGroup:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.missionRewardTargetGroup .missionObjectiveHeader {
  margin-bottom: 8px;
}


/* =====================================================
   F9O1 — Faction Theme Runtime
   La fazione del Giocatore 1 governa il layout solo in partita.
   ===================================================== */
body.app-screen-game[data-arena-faction-theme="nexus"] {
  --bg: #07111d;
  --panel: #0c2035;
  --panel-2: #12304c;
  --text: #e8f4ff;
  --muted: #a8c3d9;
  --line: #315b7a;
  --warn: #7dcdff;
  --skin-accent: #7dcdff;
  --theme-accent-border: rgba(125,205,255,.38);
  --theme-accent-soft: rgba(125,205,255,.15);
}
body.app-screen-game[data-arena-faction-theme="exordium"] {
  --bg: #120405;
  --panel: #2c0a0c;
  --panel-2: #451113;
  --text: #f4e5bf;
  --muted: #c7ad82;
  --line: #71332c;
  --warn: #d8b33e;
  --skin-accent: #d8b33e;
  --theme-accent-border: rgba(216,179,62,.38);
  --theme-accent-soft: rgba(216,179,62,.15);
}
body.app-screen-game[data-arena-faction-theme="liberti"] {
  --bg: #151006;
  --panel: #30240d;
  --panel-2: #4a3712;
  --text: #f3e7bd;
  --muted: #cbb779;
  --line: #725c25;
  --warn: #e0aa38;
  --skin-accent: #df9446;
  --theme-accent-border: rgba(223,148,70,.38);
  --theme-accent-soft: rgba(223,148,70,.15);
}
body.app-screen-game[data-arena-faction-theme="agathoi"] {
  --bg: #07120b;
  --panel: #102b1a;
  --panel-2: #173d25;
  --text: #e7f4df;
  --muted: #aec99f;
  --line: #356543;
  --warn: #8fe09a;
  --skin-accent: #8fe09a;
  --theme-accent-border: rgba(143,224,154,.38);
  --theme-accent-soft: rgba(143,224,154,.15);
}
body.app-screen-game[data-arena-faction-theme="fabeot"] {
  --bg: #0d0611;
  --panel: #291432;
  --panel-2: #3b2050;
  --text: #f0e9cf;
  --muted: #c8bda0;
  --line: #664a72;
  --warn: #e2d58b;
  --skin-accent: #e2d58b;
  --theme-accent-border: rgba(226,213,139,.38);
  --theme-accent-soft: rgba(226,213,139,.15);
}
body.app-screen-game[data-arena-faction-theme] header.topTitleBar,
body.app-screen-game[data-arena-faction-theme] .gameActionBar {
  border-color: var(--theme-accent-border);
}
body.app-screen-game[data-arena-faction-theme] .primary {
  border-color: var(--theme-accent-border);
  box-shadow: inset 0 0 0 1px var(--theme-accent-soft);
}
body.app-screen-game[data-arena-faction-theme] .panel h2,
body.app-screen-game[data-arena-faction-theme] .panel h3,
body.app-screen-game[data-arena-faction-theme] .setupPanel > details > summary {
  color: var(--text);
}


/* =====================================================
   F9O1a — Calibratore contestuale e preview live partita
   ===================================================== */
.menuLayoutCompetenceBlock {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.menuLayoutCompetenceBlock h4 { margin: 0; }
body.app-screen-layout-lab.app-layout-lab-game-context .gameScreen {
  display: block !important;
  pointer-events: none;
  filter: brightness(.76);
}
body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabScreen {
  display: grid !important;
  place-items: stretch end;
  pointer-events: none;
  padding: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.30) 52%, rgba(0,0,0,.72));
}
body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabScreen .mainMenuBackdrop { display: none; }
body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabCard {
  pointer-events: auto;
  width: min(610px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  margin-left: auto;
  padding: 18px;
  border-color: var(--theme-accent-border, rgba(255,255,255,.18));
  background: linear-gradient(180deg, rgba(15,18,27,.96), rgba(7,9,14,.98));
}
body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabGrid {
  grid-template-columns: 1fr;
}
body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabExportBox { display: none; }
@media (max-width: 760px) {
  body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabScreen { padding: 4px; }
  body.app-screen-layout-lab.app-layout-lab-game-context .menuLayoutLabCard {
    width: min(520px, calc(100vw - 8px));
    max-height: calc(100dvh - 8px);
    padding: 12px;
  }
}


/* =====================================================
   F9O1b — Controlli musica persistenti
   ===================================================== */
.srOnly {
  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;
}
.arenaMusicControl {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  color: var(--muted);
}
.arenaMusicToggle {
  width: auto;
  min-width: 92px;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--text);
  white-space: nowrap;
}
.arenaMusicToggle.isOff {
  opacity: .72;
  border-color: rgba(239,119,119,.35);
  color: #f1b0b0;
}
.arenaMusicVolumeLabel {
  display: grid;
  grid-template-columns: auto minmax(74px, 1fr) 38px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
}
.arenaMusicVolumeLabel input[type="range"] {
  width: 100%;
  min-width: 74px;
  accent-color: var(--skin-accent, var(--warn));
}
.arenaMusicVolumeLabel output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.arenaMusicControlMenu {
  width: min(420px, 100%);
  margin: 0 auto 14px;
  justify-content: center;
}
.arenaMusicControlGame {
  max-width: 250px;
  padding: 5px 7px;
  border-radius: 11px;
  background: rgba(0,0,0,.22);
}
.arenaMusicControlGame .arenaMusicToggle {
  min-width: 82px;
  padding: 6px 7px;
  font-size: 12px;
}
.arenaMusicControlGame .arenaMusicVolumeLabel {
  grid-template-columns: minmax(66px, 1fr) 35px;
}
.topBarRight { gap: 8px; }
body.app-screen-game[data-arena-faction-theme] .arenaMusicControl {
  border-color: var(--theme-accent-border);
}
@media (max-width: 980px) {
  header.topTitleBar { grid-template-columns: 1fr; }
  .topBarLeft, .topBarRight { justify-content: center; flex-wrap: wrap; }
  .arenaMusicControlGame { max-width: min(360px, 100%); }
}
@media (max-width: 560px) {
  .arenaMusicControlMenu { align-items: stretch; flex-direction: column; }
  .arenaMusicToggle { width: 100%; }
  .arenaMusicVolumeLabel { grid-template-columns: auto minmax(90px, 1fr) 38px; }
  .arenaMusicControlGame { width: 100%; }
}

@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  body.mobile-apk-m4 .arenaMusicControlGame {
    position: fixed;
    z-index: 85;
    left: max(6px, env(safe-area-inset-left));
    top: calc(var(--m4-header-h) + var(--m4-status-h) + 10px);
    width: min(220px, calc(100vw - 12px));
    max-width: none;
    min-height: 30px;
    padding: 3px 5px;
    gap: 5px;
    border-radius: 10px;
    background: rgba(6,8,13,.88);
    backdrop-filter: blur(4px);
  }
  body.mobile-apk-m4 .arenaMusicControlGame .arenaMusicToggle {
    width: auto !important;
    min-width: 70px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }
  body.mobile-apk-m4 .arenaMusicControlGame .arenaMusicVolumeLabel {
    grid-template-columns: minmax(64px, 1fr) 31px;
    gap: 4px;
    font-size: 9px;
  }
  body.mobile-apk-m4 .arenaMusicControlGame .arenaMusicVolumeLabel input[type="range"] {
    min-width: 64px;
  }
}


/* =====================================================
   F9O2 – Interactive Map Camera Foundation
   ===================================================== */
#boardWrap {
  overscroll-behavior: contain;
}
#boardVisualStack {
  cursor: grab;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#boardVisualStack.cameraDragging,
#boardWrap.cameraDragging #boardVisualStack {
  cursor: grabbing !important;
  transition: none !important;
}
#boardWrap.cameraDragging .hex {
  cursor: grabbing !important;
}

/* F9O4a – durante pan/pinch il layer mappa resta composito e sospende gli
   effetti che costringono WebView Android a ridipingere 127 celle per frame. */
#boardWrap.cameraDragging #boardVisualStack {
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: layout paint style !important;
}
#boardWrap.cameraDragging .hex {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}
#boardWrap.cameraDragging .hex.ps,
#boardWrap.cameraDragging .hex.hq {
  box-shadow: inset 0 0 0 2px rgba(241,211,123,.42) !important;
}
#boardWrap.cameraDragging .mapBgLayer::after {
  mix-blend-mode: normal !important;
  opacity: .24 !important;
}
#boardWrap.cameraDragging .unitToken,
#boardWrap.cameraDragging .unitToken .mini,
#boardWrap.cameraDragging .tokenSelectionHalo {
  box-shadow: none !important;
  filter: none !important;
}
#boardWrap.cameraDragging .unitToken *,
#boardWrap.cameraDragging .mapEffectsLayer * {
  animation-play-state: paused !important;
}
.mapCameraControls {
  position: absolute;
  z-index: 17;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,11,17,.82);
  box-shadow: 0 8px 22px rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.mapCameraControls button {
  width: auto;
  min-width: 34px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.mapCameraControls #cameraCenterBtn { min-width: 62px; }
.mapCameraZoomLabel {
  min-width: 42px;
  color: #d9f0ff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mapCameraControls[data-camera-locked="1"] {
  opacity: .48;
}
body.mobile-apk-m4 #boardVisualStack {
  touch-action: none !important;
  cursor: grab !important;
}
body.mobile-apk-m4 .mapCameraControls {
  position: fixed;
  z-index: 63;
  left: max(7px, env(safe-area-inset-left));
  top: calc(var(--m4-header-h) + 31px);
  gap: 3px;
  padding: 4px;
  max-width: calc(100vw - 14px);
}
body.mobile-apk-m4 .mapCameraControls button {
  min-width: 31px;
  min-height: 29px;
  padding: 3px 7px;
  font-size: 11px;
}
body.mobile-apk-m4 .mapCameraControls #cameraCenterBtn { min-width: 52px; }
body.mobile-apk-m4 .mapCameraZoomLabel { min-width: 36px; font-size: 10px; }
body.mobile-apk-m4.mobile-panel-hand .mapCameraControls,
body.mobile-apk-m4.mobile-panel-actions .mapCameraControls,
body.mobile-apk-m4.mobile-panel-log .mapCameraControls,
body.mobile-apk-m4.mobile-panel-setup .mapCameraControls,
body.mobile-apk-m4.mobile-panel-stats .mapCameraControls {
  opacity: .38;
  pointer-events: none;
}
@media (max-width: 560px) {
  body:not(.mobile-apk-m4) .mapCameraControls {
    left: 8px;
    top: 8px;
    gap: 3px;
    padding: 4px;
  }
  body:not(.mobile-apk-m4) .mapCameraControls button {
    min-width: 30px;
    min-height: 28px;
    padding: 3px 7px;
  }
  body:not(.mobile-apk-m4) .mapCameraZoomLabel { min-width: 36px; }
}


/* =====================================================
   F9O2d – Token Layering & Active Unit Cues
   =====================================================
   Separates the faction-coloured procedural base from the optional graphic
   asset. With graphic tokens enabled and loaded, the faction base remains
   translucent at all times while only the graphic asset is attenuated after
   the unit has acted. Selection cues are visual-only and never intercept
   mouse/touch input.
*/
:root {
  --token-faction-base-art-opacity: .22;
  --token-art-acted-opacity: .50;
  --token-selection-pulse-duration: 1180ms;
}

/* The procedural faction colour now lives in its own layer. The token shell
   itself stays transparent so its opacity is no longer coupled to token art. */
.unitToken.faction-nexus,
.unitToken.faction-exordium,
.unitToken.faction-liberti,
.unitToken.faction-agathoi,
.unitToken.faction-fabeot {
  background: transparent !important;
}

.unitToken .tokenFactionBase {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 1;
  pointer-events: none;
  filter: none;
}

.unitToken.faction-nexus { --token-active-rgb: 43,111,184; }
.unitToken.faction-exordium { --token-active-rgb: 180,58,50; }
.unitToken.faction-liberti { --token-active-rgb: 184,135,32; }
.unitToken.faction-agathoi { --token-active-rgb: 79,157,88; }
.unitToken.faction-fabeot { --token-active-rgb: 138,79,176; }

.unitToken.faction-nexus .tokenFactionBase { background: linear-gradient(180deg, var(--nexus), var(--nexus-soft)); }
.unitToken.faction-exordium .tokenFactionBase { background: linear-gradient(180deg, var(--exo), var(--exo-soft)); }
.unitToken.faction-liberti .tokenFactionBase { background: linear-gradient(180deg, var(--liberti), var(--liberti-soft)); }
.unitToken.faction-agathoi .tokenFactionBase { background: linear-gradient(180deg, var(--agathoi), var(--agathoi-soft)); }
.unitToken.faction-fabeot .tokenFactionBase { background: linear-gradient(180deg, var(--fabeot), var(--fabeot-soft)); }

/* Do not dim the complete token shell: stats, selection cues and status
   markers must stay readable. Fallback/procedural tokens preserve the old
   acted cue by attenuating only their visible base and icon. */
.unitToken.acted {
  opacity: 1 !important;
  filter: none !important;
}

.unitToken.acted:not(.token-art-loaded) .tokenFactionBase,
.unitToken.acted:not(.token-art-loaded) .symbol {
  opacity: .55;
  filter: grayscale(.35);
}

/* Graphic-token mode: the coloured faction tile is always translucent,
   independently from acted state. Missing assets keep the procedural fallback
   opaque so units never become unreadable. */
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .tokenFactionBase {
  opacity: var(--token-faction-base-art-opacity) !important;
  filter: none !important;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded.acted .tokenFactionBase {
  opacity: var(--token-faction-base-art-opacity) !important;
  filter: none !important;
}

html[data-token-graphics-mode="on"] .unitToken.token-art-loaded.acted .tokenArt {
  opacity: var(--token-art-acted-opacity) !important;
  filter: grayscale(.35) saturate(.82) contrast(1.02);
}

/* Selected/inspected unit: faction-coloured intermittent halo plus a compact
   arrow. These children remain inside the token transform, so pan/zoom and
   pinch require no extra positioning work. */
.unitToken .tokenSelectionHalo,
.unitToken .tokenActiveArrow {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

.unitToken.is-selected .tokenSelectionHalo {
  display: block;
  inset: -7px;
  z-index: 36;
  border-radius: inherit;
  border: 2px solid rgba(var(--token-active-rgb, 255,255,255), .92);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 0 13px rgba(var(--token-active-rgb, 255,255,255), .82),
    0 0 25px rgba(var(--token-active-rgb, 255,255,255), .42);
  animation: tokenActiveHaloPulse var(--token-selection-pulse-duration) ease-in-out infinite;
}

.unitToken.is-selected .tokenActiveArrow {
  display: block;
  left: 50%;
  top: -18px;
  z-index: 38;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid rgba(var(--token-active-rgb, 255,255,255), .98);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px rgba(0,0,0,.95)) drop-shadow(0 0 5px rgba(var(--token-active-rgb, 255,255,255), .72));
  animation: tokenActiveArrowBob var(--token-selection-pulse-duration) ease-in-out infinite;
}

@keyframes tokenActiveHaloPulse {
  0%, 100% { opacity: .52; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.055); }
}

@keyframes tokenActiveArrowBob {
  0%, 100% { opacity: .72; transform: translate(-50%, 1px); }
  50% { opacity: 1; transform: translate(-50%, -2px); }
}

/* Ensure selection remains above token art and stat strips without changing
   logical hit targets. */
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .tokenSelectionHalo,
html[data-token-graphics-mode="on"] .unitToken.token-art-loaded .tokenActiveArrow {
  z-index: 40;
}

@media (prefers-reduced-motion: reduce) {
  .unitToken.is-selected .tokenSelectionHalo,
  .unitToken.is-selected .tokenActiveArrow {
    animation: none !important;
  }
  .unitToken.is-selected .tokenSelectionHalo {
    opacity: .9;
    transform: none;
  }
  .unitToken.is-selected .tokenActiveArrow {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* =====================================================
   F9O2e — Mission accessibility, compact progress & build hotfix
   ===================================================== */
.mapMissionCompact {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
}
.mapMissionCompact-ready {
  border-color: rgba(227,189,103,.66);
  background: rgba(227,189,103,.09);
  box-shadow: 0 0 0 1px rgba(227,189,103,.10);
}
.mapMissionCompact-resolved { border-color: rgba(102,190,154,.42); }
.mapMissionCompact-blocked { border-color: rgba(202,91,91,.40); }
.mapMissionCompactHeader {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.mapMissionCompactHeader strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ffe1a1;
  font-size:10.5px;
}
.mapMissionCompactHeader span {
  flex:0 0 auto;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.035em;
}
.mapMissionCompactRows { display:grid; gap:3px; }
.mapMissionCompactRow {
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  gap:4px;
  align-items:center;
  min-height:18px;
  color:var(--muted);
  font-size:8px;
}
.mapMissionCompactRow.completed { color:#a9e4bc; }
.mapMissionCompactRow.active:not(.completed) { color:#ffe1a1; }
.mapMissionCompactIcon { text-align:center; font-weight:900; }
.mapMissionCompactText {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mapMissionCompactValue {
  max-width:74px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.mapMissionCompactFooter { min-height:20px; }
.mapMissionCompactActions,
.mapMissionCompactConfirm {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
}
.mapMissionCompactReason {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:7.5px;
}
.mapMissionCompactActions button,
.mapMissionCompactConfirm button {
  min-height:24px;
  padding:3px 7px;
  border-radius:8px;
  font-size:8px;
  white-space:nowrap;
}
.mapMissionCompactConfirm span {
  min-width:0;
  color:#ffe1a1;
  font-size:8px;
  line-height:1.15;
}
body.mobile-apk-m4 .mapMissionCompact { padding:5px; gap:4px; }
body.mobile-apk-m4 .mapMissionCompactHeader strong { font-size:9px; }
body.mobile-apk-m4 .mapMissionCompactHeader span,
body.mobile-apk-m4 .mapMissionCompactRow { font-size:7px; }
body.mobile-apk-m4 .mapMissionCompactValue { max-width:52px; }
body.mobile-apk-m4 .mapMissionCompactActions button,
body.mobile-apk-m4 .mapMissionCompactConfirm button { min-height:22px; padding:2px 5px; font-size:7px; }

/* =====================================================
   F9O3 — Event & Narrative Overlay Foundation
   ===================================================== */
.gameEventOverlayRoot {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.gameEventOverlayCard {
  --event-overlay-duration: 1000ms;
  pointer-events: auto;
  min-width: min(520px, 72vw);
  max-width: min(720px, 86vw);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border: 1px solid color-mix(in srgb, var(--theme-highlight, #e5c76b) 75%, transparent);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(6,8,12,.82), rgba(18,20,26,.94), rgba(6,8,12,.82));
  color: var(--theme-text, #f6f1df);
  box-shadow: 0 12px 40px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
  text-align: left;
  will-change: transform, opacity;
}

.gameEventOverlayCard[hidden] { display: none !important; }
.gameEventOverlayCard.isRunning { animation: arenaEventRise var(--event-overlay-duration) linear both; }
.gameEventOverlayCard.isReduced { animation-name: arenaEventFadeReduced; }
.gameEventOverlayCard[data-priority="critical"] {
  border-color: color-mix(in srgb, #ffcf58 86%, transparent);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 28px rgba(255,170,42,.18);
}
.gameEventOverlayCard[data-priority="high"] { border-color: color-mix(in srgb, var(--theme-highlight, #e5c76b) 88%, transparent); }

.gameEventOverlayIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-highlight, #e5c76b) 17%, rgba(0,0,0,.55));
  border: 1px solid color-mix(in srgb, var(--theme-highlight, #e5c76b) 62%, transparent);
  color: var(--theme-highlight, #e5c76b);
  font-size: 19px;
  font-weight: 900;
}
.gameEventOverlayCopy { min-width: 0; display: grid; gap: 2px; }
.gameEventOverlayTitle {
  font-size: clamp(13px, 1.45vw, 18px);
  line-height: 1.05;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--theme-highlight, #e5c76b);
}
.gameEventOverlayMessage {
  font-size: clamp(11px, 1.15vw, 15px);
  line-height: 1.22;
  color: var(--theme-text, #f6f1df);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes arenaEventRise {
  0%   { transform: translate3d(0, 86px, 0) scale(.985); opacity: .23; }
  24%  { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  74%  { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(0, -86px, 0) scale(.985); opacity: .23; }
}
@keyframes arenaEventFadeReduced {
  0% { opacity: .23; }
  20%, 80% { opacity: 1; }
  100% { opacity: .23; }
}

.narrativeOverlayRoot {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(12px, 3vw, 34px);
  background: linear-gradient(to top, rgba(0,0,0,.52), rgba(0,0,0,.08) 48%, transparent 72%);
}
.narrativeOverlayRoot[hidden] { display: none !important; }
.narrativeDialog {
  width: min(980px, 96%);
  min-height: 170px;
  display: grid;
  grid-template-columns: minmax(118px, 180px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--theme-highlight, #e5c76b) 72%, #2a1a12);
  background: linear-gradient(135deg, rgba(12,14,18,.96), rgba(30,25,22,.96));
  box-shadow: 0 20px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.05);
  color: var(--theme-text, #f6f1df);
}
.narrativeDialog[data-side="right"] { grid-template-columns: minmax(0, 1fr) minmax(118px, 180px); }
.narrativeDialog[data-side="right"] .narrativePortrait { grid-column: 2; grid-row: 1; }
.narrativeDialog[data-side="right"] .narrativeContent { grid-column: 1; grid-row: 1; }
.narrativePortrait {
  min-height: 142px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-highlight, #e5c76b) 48%, transparent);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--theme-highlight, #e5c76b) 18%, transparent), rgba(0,0,0,.55));
}
.narrativePortraitImage { width: 100%; height: 100%; object-fit: contain; }
.narrativePortraitPlaceholder { display: grid; place-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; }
.narrativePortraitSymbol { font-size: 58px; line-height: 1; color: var(--theme-highlight, #e5c76b); }
.narrativeExpressionLabel { opacity: .72; }
.narrativeContent { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.narrativeHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; }
.narrativeHeader strong { color: var(--theme-highlight, #e5c76b); font-size: 17px; letter-spacing: .045em; }
.narrativeStepLabel { opacity: .68; font-size: 12px; }
.narrativeText { min-height: 62px; font-size: clamp(14px, 1.6vw, 20px); line-height: 1.38; white-space: pre-wrap; }
.narrativeControls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 760px) {
  .gameEventOverlayCard { min-width: min(360px, 88vw); max-width: 92vw; padding: 9px 12px; gap: 9px; }
  .gameEventOverlayIcon { width: 28px; height: 28px; font-size: 16px; }
  .narrativeOverlayRoot { padding: 8px; }
  .narrativeDialog,
  .narrativeDialog[data-side="right"] { width: 100%; min-height: 0; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; padding: 9px; }
  .narrativeDialog[data-side="right"] .narrativePortrait { grid-column: 1; grid-row: 1; }
  .narrativeDialog[data-side="right"] .narrativeContent { grid-column: 2; grid-row: 1; }
  .narrativePortrait { min-height: 104px; }
  .narrativePortraitSymbol { font-size: 40px; }
  .narrativeText { font-size: 13px; min-height: 48px; }
  .narrativeControls { gap: 5px; }
  .narrativeControls button { padding: 6px 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .gameEventOverlayCard.isRunning { animation-name: arenaEventFadeReduced; }
  .narrativeDialog { scroll-behavior: auto; }
}


/* =====================================================
   F9O4 — Hidden Bot Hand, faction backs & card motion
   ===================================================== */
.factionCardBack {
  position: relative; width: 100%; height: 100%; min-height: 130px; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(255, 215, 128, .42);
  background: linear-gradient(145deg, rgba(22, 19, 28, .98), rgba(76, 22, 31, .92));
  box-shadow: inset 0 0 24px rgba(0,0,0,.55);
}
.factionCardBack.compact { min-height: 0; aspect-ratio: 2 / 3; }
.factionCardBackImage { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.factionCardBackFallback { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:10px; color:#f0d6a1; letter-spacing:.08em; }
.factionCardBackFallback strong { font-size:clamp(13px,2vw,20px); }
.factionCardBackFallback span { font-size:10px; opacity:.72; }
.cardBackBlockedMark { position:absolute; z-index:4; right:6px; top:6px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(148,20,30,.92); border:1px solid rgba(255,255,255,.75); box-shadow:0 0 12px rgba(255,50,60,.7); font-weight:900; }
.hiddenOpponentCardFace { min-width:92px; min-height:138px; }
.mapHandVisualCard.hiddenOpponentCardFace { min-width:76px; min-height:114px; }
.hiddenOpponentCard { cursor:not-allowed !important; }
.hiddenOpponentCard [data-preview-card-uid] { display:none !important; }
.cardMotionRoot { position:fixed; inset:0; z-index:1450; pointer-events:none; display:grid; place-items:center; overflow:hidden; }
.cardMotionStage { width:min(150px,24vw); aspect-ratio:2/3; transform-origin:center; animation:arenaCardMotionPlay .28s cubic-bezier(.2,.82,.25,1) both; }
.cardMotionStage.kind-draw { animation-name:arenaCardMotionDraw; }
.cardMotionStage.kind-discard { animation-name:arenaCardMotionDiscard; }
.cardMotionStage.kind-steal { animation-name:arenaCardMotionSteal; }
.cardMotionStage.kind-block, .cardMotionStage.kind-unblock { animation-name:arenaCardMotionPulse; }
.cardMotionStage.kind-recover { animation-name:arenaCardMotionRecover; }
.cardMotionCardWrap { width:100%; height:100%; display:flex; flex-direction:column; gap:6px; filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.cardMotionFace { flex:1; min-height:0; border-radius:12px; border:2px solid rgba(240,205,133,.8); background:linear-gradient(150deg,#201a22,#6a2430); color:#fff3d7; padding:12px 10px; display:flex; flex-direction:column; justify-content:space-between; text-align:center; overflow:hidden; }
.cardMotionFace strong { font-size:clamp(12px,2.1vw,18px); line-height:1.08; }
.cardMotionFace small { opacity:.76; }
.cardMotionKind { font-size:9px; letter-spacing:.16em; opacity:.82; }
.cardMotionCaption { color:#fff; background:rgba(10,10,15,.86); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 8px; font-size:11px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes arenaCardMotionPlay { 0%{opacity:0;transform:translateY(42vh) scale(.72) rotate(-4deg)} 45%{opacity:1;transform:translateY(0) scale(1.03) rotate(0)} 76%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-20vh) scale(.88)} }
@keyframes arenaCardMotionDraw { 0%{opacity:0;transform:translate(-24vw,-18vh) scale(.58) rotate(-10deg)} 52%{opacity:1;transform:translate(0,0) scale(1.04)} 100%{opacity:0;transform:translate(18vw,22vh) scale(.78) rotate(5deg)} }
@keyframes arenaCardMotionDiscard { 0%{opacity:0;transform:translate(0,18vh) scale(.8)} 45%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(25vw,28vh) scale(.55) rotate(14deg)} }
@keyframes arenaCardMotionSteal { 0%{opacity:0;transform:translate(-42vw,0) scale(.74) rotate(-12deg)} 45%{opacity:1;transform:translate(0,0) scale(1.04)} 100%{opacity:0;transform:translate(42vw,0) scale(.74) rotate(12deg)} }
@keyframes arenaCardMotionPulse { 0%{opacity:0;transform:scale(.5)} 45%{opacity:1;transform:scale(1.08)} 70%{opacity:1;transform:scale(.98)} 100%{opacity:0;transform:scale(1.18)} }
@keyframes arenaCardMotionRecover { 0%{opacity:0;transform:rotate(-18deg) scale(.55)} 55%{opacity:1;transform:rotate(5deg) scale(1.06)} 100%{opacity:0;transform:rotate(0) scale(.82)} }
@keyframes arenaCardMotionReduced { 0%{opacity:0;transform:scale(.96)} 35%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)} }
.cardMotionStage.reduced,
html[data-card-motion="reduced"] .cardMotionStage { animation-duration:.09s !important; animation-name:arenaCardMotionReduced !important; }
.arenaCardMotionToggle { white-space:nowrap; }
.arenaCardMotionToggle.isReduced { opacity:.78; }
.arenaCardMotionToggle.compact { font-size:10px; padding:5px 7px; }
@media (prefers-reduced-motion: reduce) {
  .cardMotionStage { animation-duration:.09s !important; animation-name:arenaCardMotionReduced !important; }
}
@media (max-width:760px) { .cardMotionStage { width:min(102px,24vw); } .cardMotionCaption { font-size:9px; padding:4px 6px; } .hiddenOpponentCardFace { min-width:72px; min-height:108px; } }

/* F9O4c — Android Render Stability Hotfix
   Niente CSS containment su board/celle: alcune WebView Android meno recenti
   possono perdere il paint di elementi assoluti durante resize e bottom-sheet. */
#board[data-renderer="incremental-f9o4c"] {
  contain: none;
}
#board[data-renderer="incremental-f9o4c"] .hex {
  contain: none;
}
body.mobile-apk-m4.mobile-panel-layout-pending #boardVisualStack {
  pointer-events: none;
}

/* =====================================================
   F9O5a — Token Motion & Dynamic FX / SFX Evaluation
   ===================================================== */
.arenaTokenFxToggle,
.arenaSfxToggle {
  min-width: 92px;
  white-space: nowrap;
}
.arenaSfxVolumeLabel { min-width: 150px; }
.arenaTokenFxToggle.isOff,
.arenaSfxToggle.isOff { opacity: .62; }

.tokenFxProjectile,
.tokenFxBurst,
.tokenFxAbilityPulse,
.tokenFxDeathGhost {
  position: absolute;
  z-index: 112;
  pointer-events: none;
  transform-origin: 0 50%;
  --fx-primary: #e9f3ff;
  --fx-secondary: #7ab9ff;
  --token-fx-duration: 300ms;
}

.fx-profile-ballistic_light { --fx-primary:#ffe6a3; --fx-secondary:#f2a544; }
.fx-profile-ballistic_heavy { --fx-primary:#fff0c7; --fx-secondary:#e46d3c; }
.fx-profile-energy { --fx-primary:#a9ecff; --fx-secondary:#4e8cff; }
.fx-profile-organic { --fx-primary:#c8ff9b; --fx-secondary:#5ab86d; }
.fx-profile-occult { --fx-primary:#efb4ff; --fx-secondary:#8a4fb0; }
.fx-profile-structure { --fx-primary:#ffd99a; --fx-secondary:#ba5e3f; }
.fx-profile-support { --fx-primary:#b8fff0; --fx-secondary:#59c9a8; }
.fx-profile-melee { --fx-primary:#ffe0bd; --fx-secondary:#d84d42; }

.tokenFxProjectile {
  height: 3px;
  margin-top: -1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--fx-secondary) 14%, var(--fx-primary) 52%, transparent 100%);
  box-shadow: 0 0 7px var(--fx-secondary), 0 0 2px #fff;
  opacity: 0;
  overflow: visible;
  animation: tokenFxProjectileTravel var(--token-fx-duration) linear both;
  will-change: clip-path, opacity, filter;
}
.tokenFxProjectile::before {
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--fx-primary);
  box-shadow:0 0 12px var(--fx-secondary);
  transform:translate(50%,-50%);
}
@keyframes tokenFxProjectileTravel {
  0% { opacity:0; clip-path:inset(0 100% 0 0); filter:brightness(1); }
  16% { opacity:1; }
  70% { opacity:1; clip-path:inset(0 0 0 0); filter:brightness(1.5); }
  100% { opacity:0; clip-path:inset(0 0 0 82%); filter:brightness(.8); }
}

.tokenFxBurst {
  width:10px;
  height:10px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 12%, var(--fx-primary) 13% 34%, transparent 66%);
  box-shadow:0 0 12px var(--fx-secondary);
  animation:tokenFxBurstCore var(--token-fx-duration) ease-out both;
}
.tokenFxBurst i {
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  margin:-2px;
  border-radius:50%;
  background:var(--fx-primary);
  box-shadow:0 0 6px var(--fx-secondary);
  transform:rotate(var(--fx-angle)) translateX(0);
  animation:tokenFxParticle var(--token-fx-duration) ease-out both;
}
.tokenFxBurst.tokenFx-bleed { --fx-primary:#ff8795; --fx-secondary:#a92038; }
.tokenFxBurst.tokenFx-destruction {
  width:20px;
  height:20px;
  background:radial-gradient(circle, #fff 0 7%, var(--fx-primary) 8% 26%, var(--fx-secondary) 27% 43%, transparent 70%);
}
@keyframes tokenFxBurstCore {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.25); }
  24% { opacity:1; transform:translate(-50%,-50%) scale(1.5); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.5); }
}
@keyframes tokenFxParticle {
  0% { opacity:0; transform:rotate(var(--fx-angle)) translateX(0) scale(.5); }
  18% { opacity:1; }
  100% { opacity:0; transform:rotate(var(--fx-angle)) translateX(var(--fx-distance)) scale(.1); }
}

.tokenFxAbilityPulse {
  width:46px;
  height:46px;
  transform:translate(-50%,-50%);
  border:3px solid var(--fx-primary);
  border-radius:50%;
  box-shadow:0 0 13px var(--fx-secondary), inset 0 0 12px var(--fx-secondary);
  animation:tokenFxAbilityPulse var(--token-fx-duration) ease-out both;
}
.tokenFxAbilityPulse.is-target {
  border-style:dashed;
  animation-delay:55ms;
}
@keyframes tokenFxAbilityPulse {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg); }
  25% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.65) rotate(70deg); }
}

.tokenFxDeathGhost {
  width:54px;
  height:54px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  animation:tokenFxDeathGhost var(--token-fx-duration) cubic-bezier(.17,.68,.25,1) both;
  filter:drop-shadow(0 0 7px var(--fx-secondary));
}
.tokenFxDeathGhost .tokenArt,
.tokenFxDeathGhost .tokenFactionBase,
.tokenFxDeathGhost .symbol {
  position:absolute;
  inset:4px;
  width:auto;
  height:auto;
  border-radius:12px;
}
.tokenFxDeathGhost .mini,
.tokenFxDeathGhost .tokenSelectionHalo,
.tokenFxDeathGhost .tokenActiveArrow,
.tokenFxDeathGhost .pivotOverlay,
.tokenFxDeathGhost .tokenCustomBadge { display:none !important; }
.tokenFxDeathMark { font-size:34px; color:var(--fx-primary); text-shadow:0 0 14px var(--fx-secondary); }
@keyframes tokenFxDeathGhost {
  0% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); filter:brightness(1); }
  25% { opacity:1; transform:translate(-50%,-58%) scale(1.15) rotate(-4deg); filter:brightness(1.8); }
  100% { opacity:0; transform:translate(-50%,-100%) scale(.25) rotate(18deg); filter:brightness(2.2) blur(2px); }
}

.unitToken.token-fx-recoil .tokenArt,
.unitToken.token-fx-recoil .symbol {
  animation:tokenFxRecoil var(--token-fx-duration, 260ms) cubic-bezier(.2,.72,.25,1) both;
}
@keyframes tokenFxRecoil {
  0%,100% { transform:translate(0,0) scale(1); }
  28% { transform:translate(-2px,1px) scale(.97); }
  58% { transform:translate(2px,-1px) scale(1.04); }
}

html[data-token-fx-mode="off"] .tokenFxProjectile,
html[data-token-fx-mode="off"] .tokenFxBurst,
html[data-token-fx-mode="off"] .tokenFxAbilityPulse,
html[data-token-fx-mode="off"] .tokenFxDeathGhost { display:none !important; }

html[data-token-fx-mode="reduced"] .tokenFxProjectile { height:2px; box-shadow:0 0 3px var(--fx-secondary); }
html[data-token-fx-mode="reduced"] .tokenFxAbilityPulse { width:34px; height:34px; border-width:2px; }
html[data-token-fx-mode="reduced"] .tokenFxBurst i:nth-child(n+3) { display:none; }

@media (prefers-reduced-motion: reduce) {
  .tokenFxProjectile,
  .tokenFxBurst,
  .tokenFxAbilityPulse,
  .tokenFxDeathGhost,
  .unitToken.token-fx-recoil .tokenArt,
  .unitToken.token-fx-recoil .symbol { animation-duration:110ms !important; }
}

body.mobile-apk-m4 .arenaTokenFxToggle,
body.mobile-apk-m4 .arenaSfxToggle { min-width:72px; font-size:10px; padding-inline:6px; }
body.mobile-apk-m4 .arenaSfxVolumeLabel { display:none; }

/* =====================================================
   F9O6 — Tutorial Runtime Foundation
   ===================================================== */
body.app-screen-tutorial .tutorialScreen { display:block; }
.tutorialScreen { min-height:100vh; position:relative; overflow:auto; }
.tutorialScreenCard { position:relative; z-index:2; width:min(1180px,94vw); margin:clamp(18px,4vh,54px) auto; padding:clamp(18px,3vw,34px); border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(8,12,18,.94); box-shadow:0 24px 80px rgba(0,0,0,.55); }
.tutorialLessonGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:18px 0; }
.tutorialLessonCard { display:grid; gap:8px; min-height:170px; padding:14px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.035); }
.tutorialLessonCard h3 { margin:0; color:var(--theme-highlight,#e5c76b); }
.tutorialLessonCard p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.42; }

.tutorialLessonCardActions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:4px;
}
.tutorialLessonCardActions button{
  flex:1 1 88px;
}

.tutorialLessonMeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.tutorialLessonMeta span { padding:4px 7px; border:1px solid rgba(255,255,255,.15); border-radius:999px; font-size:.68rem; }
.tutorialMenuActions { display:flex; flex-wrap:wrap; gap:9px; }
.tutorialRuntimeStatus { min-height:24px; margin-top:10px; color:var(--muted); font-size:.78rem; }

.tutorialSpotlightRoot { position:fixed; inset:0; z-index:94; pointer-events:none; overflow:hidden; }
.tutorialSpotlightRoot[hidden] { display:none !important; }
.tutorialSpotlightHole { position:fixed; border:3px solid var(--theme-highlight,#f1cb63); border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.76),0 0 0 6px rgba(241,203,99,.18),0 0 32px rgba(241,203,99,.46); transition:left 120ms ease,top 120ms ease,width 120ms ease,height 120ms ease; pointer-events:none; }
.tutorialSpotlightRoot[data-mode="informative"] .tutorialSpotlightHole { box-shadow:0 0 0 9999px rgba(0,0,0,.64),0 0 0 5px rgba(241,203,99,.14),0 0 26px rgba(241,203,99,.38); }
.tutorialSpotlightHint { position:fixed; max-width:min(360px,80vw); padding:8px 11px; border:1px solid rgba(241,203,99,.65); border-radius:10px; background:rgba(10,12,16,.94); color:#fff3c6; font-size:12px; box-shadow:0 8px 28px rgba(0,0,0,.4); pointer-events:none; opacity:0; transform:translateY(5px); transition:opacity 120ms ease,transform 120ms ease; }
.tutorialSpotlightHint.isVisible { opacity:1; transform:none; }
.tutorialSpotlightArrow { position:fixed; width:20px; height:20px; border-left:3px solid var(--theme-highlight,#f1cb63); border-top:3px solid var(--theme-highlight,#f1cb63); transform:rotate(45deg); filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)); pointer-events:none; animation:tutorialArrowPulse 700ms ease-in-out infinite alternate; }
@keyframes tutorialArrowPulse { from{opacity:.6; transform:translateY(4px) rotate(45deg)} to{opacity:1; transform:translateY(-2px) rotate(45deg)} }
.narrativeOverlayRoot.isNonModal { pointer-events:none; background:none; }
.narrativeOverlayRoot.isNonModal .narrativeDialog { pointer-events:auto; }
.narrativeOverlayRoot[data-position="top"] { align-items:start; background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent 70%); }
.narrativeOverlayRoot.isNonModal[data-position="top"] { background:none; }
body.tutorial-runtime-active [data-game-action], body.tutorial-runtime-active .mapHandCardSlot, body.tutorial-runtime-active .hex, body.tutorial-runtime-active .unitToken { touch-action:manipulation; }
@media (max-width:760px){ .tutorialScreenCard{width:96vw;margin:8px auto;padding:13px}.tutorialLessonGrid{grid-template-columns:1fr 1fr}.tutorialLessonCard{min-height:145px;padding:10px}.tutorialSpotlightHole{border-radius:10px}.tutorialSpotlightHint{font-size:10px} }
@media (max-width:520px){ .tutorialLessonGrid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .tutorialSpotlightArrow{animation:none}.tutorialSpotlightHole{transition:none} }


/* F9O7d — Collapsed Hand Controls Reflow
   Solo con Mano ridotta: i comandi passano sotto il dock abilità di fazione,
   sul lato sinistro della mappa. La Mano aperta conserva il layout F9O7c. */
.mapHandOverlay.isMovementHidden {
  display: none;
}
.mapCollapsedHandControls {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  min-width: 118px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(12,16,24,.48), rgba(7,10,16,.70));
  box-shadow: 0 14px 42px rgba(0,0,0,.32);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}
.mapCollapsedHandControls .mapHandShowBtn,
.mapCollapsedHandControls .mapHandEndTurnBtn.compact {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
}
body.mobile-apk-m4 .mapCollapsedHandControls {
  min-width: 0;
  padding: 7px;
  margin-top: 6px;
  border-radius: 13px;
  backdrop-filter: none;
}
body.mobile-apk-m4 .mapCollapsedHandControls .mapHandShowBtn,
body.mobile-apk-m4 .mapCollapsedHandControls .mapHandEndTurnBtn.compact {
  min-height: 36px;
  font-size: 9.5px;
  padding-left: 5px;
  padding-right: 5px;
}

/* F9O7f — Tutorial card-preview prominence
   Le anteprime hover restano sopra lo scrim dello spotlight in tutte le lezioni.
   La vignetta narrativa conserva priorità visiva (z-index 96). */
body.tutorial-runtime-active .mapHandSelectionPreview.isVisible.hoverPreview {
  z-index: 95;
  opacity: 1;
  filter: none;
  isolation: isolate;
}
body.tutorial-runtime-active .mapHandSelectionPreview.isVisible.hoverPreview .mapHandSelectionPreviewInner {
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 64px rgba(0,0,0,.64), 0 0 0 2px rgba(241,203,99,.22);
}
/* F9Q2/F9Q3 · terreni statici e Map & Terrain Lab */
.setupMapMeta {
  margin-top: .4rem;
  color: var(--muted, #b9ada1);
  font-size: .78rem;
  line-height: 1.35;
}

.mapEditorScreen {
  overflow: auto;
  padding: clamp(12px, 2vw, 28px);
}

.mapEditorCard {
  position: relative;
  z-index: 1;
  width: min(1760px, 100%);
  min-height: calc(100vh - 56px);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(230, 184, 116, .34);
  border-radius: 18px;
  background: rgba(18, 13, 12, .96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58);
}

.mapEditorHeader,
.mapEditorHeaderActions,
.mapEditorInline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mapEditorHeader {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.mapEditorHeader h2,
.mapEditorHeader p {
  margin: 0 0 6px;
}

.mapEditorHeaderActions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mapEditorWorkspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(500px, 1fr) minmax(230px, 310px);
  gap: 14px;
  min-height: 720px;
}

.mapEditorSidebar,
.mapEditorValidationPanel,
.mapEditorCanvasPanel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.mapEditorSidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mapEditorSidebar label,
.mapEditorSidebar legend {
  color: #e6c18a;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .035em;
}

.mapEditorSidebar select,
.mapEditorSidebar input {
  width: 100%;
}

.mapEditorSidebar fieldset {
  margin: 7px 0;
  padding: 10px;
  border: 1px solid rgba(230, 184, 116, .23);
  border-radius: 10px;
}

.mapEditorInline > select {
  flex: 1;
}

.mapEditorToolGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mapEditorToolGrid .isActive {
  border-color: #f0c069;
  color: #ffdb98;
  background: rgba(185, 81, 38, .35);
}

.mapEditorCanvasPanel {
  display: flex;
  flex-direction: column;
}

.mapEditorCanvasHelp {
  margin-bottom: 8px;
  color: #c9b9a6;
  font-size: .8rem;
}

.mapEditorCanvasViewport {
  position: relative;
  flex: 1;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(230, 184, 116, .24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(130, 54, 27, .24), transparent 50%),
    linear-gradient(145deg, #1c1512, #0d0b0b);
  touch-action: none;
}

#mapEditorCanvas {
  width: 100%;
  height: 100%;
  min-height: 650px;
  cursor: grab;
  user-select: none;
}

#mapEditorCanvas:active {
  cursor: grabbing;
}

.mapEditorHex polygon {
  fill: #51382b;
  stroke: rgba(244, 213, 163, .28);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: fill .12s, stroke .12s;
}

.mapEditorHex text {
  pointer-events: none;
  fill: rgba(255, 244, 220, .78);
  font-size: 10px;
  font-weight: 800;
}

.mapEditorHex:hover polygon,
.mapEditorHex:focus polygon,
.mapEditorHex.isSelected polygon {
  stroke: #ffd17f;
  stroke-width: 3;
}

.mapEditorHex.terrain-obstacle polygon,
.cell.terrain-obstacle {
  background-color: #211d1b;
  fill: #211d1b;
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(0, 0, 0, .32) 7px 11px);
}

.mapEditorHex.terrain-difficult polygon,
.cell.terrain-difficult {
  background-color: #634728;
  fill: #634728;
  background-image: radial-gradient(circle, rgba(255, 214, 132, .16) 0 2px, transparent 3px);
  background-size: 10px 10px;
}

.mapEditorHex.terrain-defensive polygon,
.cell.terrain-defensive {
  background-color: #28483c;
  fill: #28483c;
  box-shadow: inset 0 0 0 2px rgba(105, 215, 162, .2);
}

.mapEditorHex.terrain-exposed polygon,
.cell.terrain-exposed {
  background-color: #6c302c;
  fill: #6c302c;
  box-shadow: inset 0 0 18px rgba(255, 111, 86, .24);
}

.mapEditorHex.isHeadquarters polygon {
  stroke: #f1b74f;
  stroke-width: 3;
}

.mapEditorHex.isStrategicPoint polygon {
  stroke: #71c8ff;
  stroke-width: 2.5;
}

.mapEditorHazardLabel {
  fill: #ff6d6d !important;
  font-size: 8px !important;
}

.mapEditorValidationPanel {
  overflow: auto;
}

.mapEditorValidationPanel h3 {
  margin: 4px 0 10px;
}

.mapEditorValidationPanel ol {
  max-height: 300px;
  overflow: auto;
  padding-left: 1.35rem;
  font-size: .78rem;
}

.mapEditorValidationPanel li {
  margin-bottom: 7px;
}

.mapEditorValidationPanel li.error {
  color: #ff9790;
}

.mapEditorValidationPanel li.warning {
  color: #ffd07a;
}

.mapEditorValidationSummary {
  margin-bottom: 10px;
  padding: 9px;
  border-radius: 8px;
  font-weight: 800;
}

.mapEditorValidationSummary.isValid {
  color: #a8ecc5;
  background: rgba(38, 142, 86, .18);
}

.mapEditorValidationSummary.isInvalid {
  color: #ffaaa4;
  background: rgba(188, 55, 45, .2);
}

#mapEditorTerrainLegend > div {
  display: grid;
  grid-template-columns: 22px 72px 1fr;
  gap: 7px;
  align-items: start;
  margin-bottom: 8px;
  font-size: .72rem;
}

#mapEditorTerrainLegend small {
  color: #b8aba0;
}

.mapEditorSelection {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding: 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
  font-size: .75rem;
}

.terrainBadge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .25rem;
  padding: .08rem .3rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
}

#board .hex.terrain-obstacle {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .46) 0 7px, rgba(96, 86, 79, .34) 7px 11px),
    #211d1b;
  filter: saturate(.65);
  cursor: not-allowed;
}

#board .hex.terrain-difficult {
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 221, 155, .22) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 65%, rgba(255, 221, 155, .16) 0 2px, transparent 3px),
    #634728;
}

#board .hex.terrain-defensive {
  background: radial-gradient(circle, rgba(95, 218, 161, .2), transparent 62%), #28483c;
  outline: 2px solid rgba(105, 215, 162, .28);
}

#board .hex.terrain-exposed {
  background: radial-gradient(circle, rgba(255, 126, 94, .24), transparent 65%), #6c302c;
  outline: 2px dashed rgba(255, 143, 112, .35);
}

#board .hex.initialHazard-mine::after,
#board .hex.initialHazard-trap::after {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 2;
  color: #ff8a78;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

#board .hex.initialHazard-mine::after {
  content: "M";
}

#board .hex.initialHazard-trap::after {
  content: "T";
}

.mapEditorSidebar textarea {
  width: 100%;
  min-height: 4.4rem;
  resize: vertical;
}

.mapEditorComponentPanel {
  display: grid;
  gap: 8px;
}

.mapEditorComponentGrid {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) minmax(70px, .85fr);
  align-items: center;
  gap: 6px 8px;
}

.mapEditorHex.isSymmetryPreview polygon {
  stroke: #ffe08a;
  stroke-width: 4;
  filter: drop-shadow(0 0 5px rgba(255, 190, 70, .75));
}

.mapEditorValidationPanel li.editorWarning {
  color: #ffd58d;
}

#board .hex.hq3 {
  --hq-accent: #7dcf8b;
}

#board .hex.hq4 {
  --hq-accent: #c897ef;
}

#board .hex.controlledSide3 {
  box-shadow: inset 0 0 0 3px rgba(78, 183, 102, .8);
}

#board .hex.controlledSide4 {
  box-shadow: inset 0 0 0 3px rgba(167, 102, 214, .8);
}

@media (max-width: 1100px) {
  .mapEditorWorkspace {
    grid-template-columns: minmax(210px, 260px) 1fr;
  }
  .mapEditorValidationPanel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .mapEditorHeader {
    display: block;
  }
  .mapEditorHeaderActions {
    justify-content: flex-start;
    margin-top: 12px;
  }
  .mapEditorWorkspace {
    grid-template-columns: 1fr;
  }
  .mapEditorCanvasViewport,
  #mapEditorCanvas {
    min-height: 480px;
  }
}

/* =====================================================
   F9Q3a – Main Menu Product Layout
   ===================================================== */
.mainMenuScreen {
  overflow: auto;
  padding: clamp(12px, 2.2vw, 30px);
  align-items: start;
}
.mainMenuCard.mainMenuCardF9Q3a {
  width: min(1240px, 100%);
  max-width: none;
  min-height: min(820px, calc(100dvh - 48px));
  max-height: none;
  margin: auto;
  padding: clamp(18px, 2.5vw, 32px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 24px);
  overflow: visible;
}
.mainMenuHero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mainMenuHeroBrand h1 {
  margin: 2px 0 4px;
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: .055em;
  line-height: .96;
}
.mainMenuTagline {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 650px;
  font-size: clamp(13px, 1.35vw, 16px);
}
.mainMenuHeroStatus {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 500px;
}
.mainMenuHeroStatus .mainMenuStage,
.mainMenuBuildChip,
.mainMenuStorageChip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(7,10,16,.58);
  color: rgba(241,243,247,.92);
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mainMenuHeroStatus .mainMenuStage {
  margin: 0;
  color: #f1d37b;
  border-color: rgba(214,179,90,.34);
}
.mainMenuStorageChip[data-storage-tone="good"] {
  color: #bfffc8;
  border-color: rgba(126,220,148,.35);
}
.mainMenuStorageChip[data-storage-tone="warn"] {
  color: #ffd99b;
  border-color: rgba(255,190,94,.38);
}
.mainMenuDashboard {
  display: grid;
  grid-template-columns: minmax(310px, .88fr) minmax(460px, 1.42fr);
  grid-template-areas:
    "play studio"
    "presentation future";
  gap: 14px;
  align-content: start;
}
.mainMenuPlayPanel { grid-area: play; }
.mainMenuStudioPanel { grid-area: studio; }
.mainMenuPresentationPanel { grid-area: presentation; }
.mainMenuFuturePanel { grid-area: future; }
.mainMenuCardF9Q3a .mainMenuActionGroup,
.mainMenuStudioPanel,
.mainMenuPresentationPanel,
.mainMenuFuturePanel {
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.045), transparent 58%),
    rgba(10,14,22,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.mainMenuPlayPanel {
  background:
    radial-gradient(circle at 12% 8%, rgba(197,66,56,.18), transparent 42%),
    linear-gradient(150deg, rgba(214,179,90,.08), transparent 58%),
    rgba(10,14,22,.82);
}
.mainMenuSectionHeading { margin-bottom: 16px; }
.mainMenuSectionHeading.compact { margin-bottom: 12px; }
.mainMenuSectionHeading h2 {
  margin: 2px 0 5px;
  font-size: clamp(18px, 2vw, 25px);
}
.mainMenuSectionHeading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.mainMenuSectionEyebrow {
  color: #d6b35a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.mainMenuPlayActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mainMenuPlayActions .mainMenuPrimaryAction {
  grid-column: 1 / -1;
  min-height: 88px;
  display: grid;
  place-content: center;
  gap: 3px;
  font-size: 17px;
}
.mainMenuButtonTitle { font-weight: 800; }
.mainMenuButtonHint {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
}
.mainMenuStudioGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mainMenuStudioTile {
  min-height: 80px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
}
.mainMenuStudioTile > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mainMenuStudioTile strong { font-size: 14px; }
.mainMenuStudioTile small,
.mainMenuFutureActions small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.mainMenuTileIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(214,179,90,.10);
  color: #e4c56d;
  font-size: 18px;
}
.mainMenuLocalSummary {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(214,222,235,.72);
  font-size: 11px;
}
.mainMenuCardF9Q3a .arenaMusicControlMenu {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  gap: 9px;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.mainMenuCardF9Q3a .arenaMusicControlMenu .arenaMusicVolumeLabel {
  min-width: 0;
  width: 100%;
}
.mainMenuFxToggles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.mainMenuFutureActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.mainMenuFutureActions button {
  min-height: 58px;
  white-space: normal;
}
.mainMenuCardF9Q3a button:disabled,
.mainMenuCardF9Q3a button[aria-disabled="true"] {
  opacity: .46;
  cursor: not-allowed;
  filter: saturate(.45);
}
.mainMenuFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.mainMenuFooter .mainMenuNotes {
  margin: 0;
  max-width: 580px;
  text-align: left;
}
.mainMenuBuildMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 12px;
  color: rgba(200,208,221,.62);
  font-size: 9px;
}
.mainMenuBuildMeta strong { color: rgba(229,233,240,.76); }
.mainMenuDevOnly[hidden] { display: none !important; }

@media (max-width: 980px) {
  .mainMenuHero { align-items: start; }
  .mainMenuDashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "play play"
      "studio studio"
      "presentation future";
  }
}
@media (max-width: 680px) {
  .mainMenuScreen { padding: 8px; }
  .mainMenuCard.mainMenuCardF9Q3a {
    min-height: calc(100dvh - 16px);
    border-radius: 16px;
    padding: 16px;
  }
  .mainMenuHero {
    display: grid;
    align-items: start;
    gap: 14px;
  }
  .mainMenuHeroStatus { justify-content: flex-start; max-width: none; }
  .mainMenuHeroStatus .mainMenuStage,
  .mainMenuBuildChip,
  .mainMenuStorageChip { white-space: normal; }
  .mainMenuDashboard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "play" "studio" "presentation" "future";
  }
  .mainMenuStudioGrid,
  .mainMenuPlayActions,
  .mainMenuFutureActions { grid-template-columns: 1fr; }
  .mainMenuPlayActions .mainMenuPrimaryAction { grid-column: auto; }
  .mainMenuCardF9Q3a .arenaMusicControlMenu { grid-template-columns: 1fr; }
  .mainMenuFxToggles { grid-column: auto; grid-template-columns: 1fr; }
  .mainMenuFooter { display: grid; }
  .mainMenuBuildMeta { justify-content: flex-start; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .mainMenuScreen { padding: 8px; }
  .mainMenuCard.mainMenuCardF9Q3a { min-height: auto; padding: 14px; }
  .mainMenuHero { align-items: center; padding-bottom: 10px; }
  .mainMenuHeroBrand h1 { font-size: 34px; }
  .mainMenuTagline { display: none; }
  .mainMenuDashboard {
    grid-template-columns: minmax(260px,.85fr) minmax(420px,1.4fr);
    grid-template-areas: "play studio" "presentation future";
  }
  .mainMenuCardF9Q3a .mainMenuActionGroup,
  .mainMenuStudioPanel,
  .mainMenuPresentationPanel,
  .mainMenuFuturePanel { padding: 12px; }
  .mainMenuStudioTile { min-height: 60px; }
  .mainMenuPlayActions .mainMenuPrimaryAction { min-height: 64px; }
}

/* F9Q3a menu hardening: neutralizza le vecchie griglie del menu e la shell
   M4 di partita quando l'utente si trova nelle schermate applicative. */
.mainMenuCardF9Q3a .mainMenuPlayPanel {
  display: block;
}
body.mobile-apk-m4:not(.app-screen-game) .mobileStatusStrip,
body.mobile-apk-m4:not(.app-screen-game) .mobileGameBar,
body.mobile-apk-m4:not(.app-screen-game) .mapCameraControls {
  display: none !important;
}
body.mobile-apk-m4.mobile-portrait:not(.app-screen-game)::before,
body.mobile-apk-m4.mobile-portrait:not(.app-screen-game)::after {
  display: none !important;
  content: none !important;
}
body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  height: min(850px, calc(100dvh - 178px));
  min-height: min(850px, calc(100dvh - 178px));
  max-height: min(850px, calc(100dvh - 178px));
}

/* F9Q3a: lo stack della board è ancorato geometricamente al centro del
   viewport. Non partecipa più al sizing intrinseco della griglia, così mappe
   più alte/larghe della MAP1 non spostano il loro centro fuori dal render. */
#boardVisualStack {
  position: absolute;
  left: var(--board-layout-left, calc(50% - 460px));
  top: var(--board-layout-top, calc(50% - 390px));
}

/* =====================================================
   F9Q3b – Battlefield Readability
   Terrain quality, occupied-cell faction tint, stronger token base and
   conquest flags for strategic points. Visual-only: no targeting or rules.
   ===================================================== */
:root {
  /* F9O2d used .22. F9Q3b raises it by roughly 27% while keeping artwork visible. */
  --token-faction-base-art-opacity: .28;
}

.hex .cellOccupationTint {
  position: absolute;
  inset: 2px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--cell-occupant-color, transparent) 17%, transparent) 0 48%, transparent 76%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cell-occupant-color, transparent) 46%, transparent);
  opacity: .9;
}

.hex.tacticalTarget .cellOccupationTint,
.hex.selected .cellOccupationTint {
  opacity: .48;
}

.hex .cellTerrainMarker {
  position: absolute;
  top: 5px;
  left: 6px;
  z-index: 7;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 3px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 999px;
  background: rgba(5,8,14,.88);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.03em;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 1px 4px rgba(0,0,0,.72);
  pointer-events: none;
}

.hex .cellTerrainMarker[data-terrain="obstacle"] {
  color: #f0ddd1;
  background: rgba(28,24,22,.96);
  border-color: rgba(240,221,209,.82);
  font-size: 12px;
}

.hex .cellTerrainMarker[data-terrain="difficult"] {
  color: #ffe0a2;
  border-color: rgba(255,204,112,.88);
  background: rgba(80,53,24,.94);
}

.hex .cellTerrainMarker[data-terrain="defensive"] {
  color: #9af1c1;
  border-color: rgba(105,215,162,.9);
  background: rgba(18,66,48,.94);
}

.hex .cellTerrainMarker[data-terrain="exposed"] {
  color: #ffad98;
  border-color: rgba(255,143,112,.9);
  background: rgba(91,34,30,.94);
}

.hex .psControlFlag {
  position: absolute;
  top: 1px;
  left: 50%;
  z-index: 9;
  transform: translateX(-50%);
  color: var(--ps-flag-color, #d6b35a);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9),
     1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9),
     1px  1px 0 rgba(0,0,0,.9),
     0 0 7px color-mix(in srgb, var(--ps-flag-color, #d6b35a) 70%, transparent);
  pointer-events: none;
}

.hex .cellTerrainMarker[hidden],
.hex .cellOccupationTint[hidden],
.hex .psControlFlag[hidden] {
  display: none !important;
}

/* Keep the cell quality readable when occupied without covering the token. */
.hex.occupied .cellTerrainMarker {
  top: 3px;
  left: 4px;
  transform: scale(.94);
  transform-origin: top left;
}

body.mobile-apk-m4 .hex .cellTerrainMarker {
  min-width: 16px;
  height: 16px;
  top: 4px;
  left: 5px;
  font-size: 9px;
}

body.mobile-apk-m4 .hex .psControlFlag {
  font-size: 18px;
}

/* =====================================================
   F9Q3c – Custom Map Backgrounds
   ===================================================== */
.mapBgAssetImage.customMapBackground {
  object-fit: cover;
  transition: opacity .16s ease;
  will-change: transform, opacity;
}

.mapEditorBackgroundPanel {
  display: grid;
  gap: 8px;
}

.mapEditorBackgroundActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.mapEditorBackgroundStatus {
  min-height: 2.2rem;
  padding: 7px 8px;
  border: 1px solid rgba(130, 213, 162, .22);
  border-radius: 8px;
  color: #bfe8ce;
  background: rgba(21, 58, 42, .18);
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mapEditorBackgroundStatus.isMissing {
  color: #ffd18a;
  border-color: rgba(255, 184, 90, .28);
  background: rgba(92, 52, 18, .2);
}

.mapEditorBackgroundPanel output {
  float: right;
  color: #f3d39b;
  font-variant-numeric: tabular-nums;
}

.mapEditorBackgroundPanel input[type="range"] {
  accent-color: #d99b4f;
}

.mapEditorBackgroundOffsets {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(64px, .75fr);
  gap: 6px 8px;
  align-items: center;
}

.mapEditorBackgroundImage {
  pointer-events: none;
  filter: saturate(.96) contrast(1.02);
}

#mapEditorCanvas.hasCustomBackground .mapEditorHex polygon {
  fill-opacity: .8;
}

#mapEditorCanvas.hasCustomBackground .mapEditorHex.terrain-obstacle polygon {
  fill-opacity: .94;
}

@media (max-width: 720px) {
  .mapEditorBackgroundActions {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   F9Q3c1 – Obstacle Readability Hotfix
   Visual-only: obstacle cells must read as solid, impassable hexes at a glance.
   The final-cascade !important declarations intentionally override the generic
   map-cell opacity calibration binding without altering targeting or gameplay.
   ===================================================== */
:root {
  --terrain-obstacle-fill: rgba(4, 5, 7, .88);
  --terrain-obstacle-stripe: rgba(112, 118, 126, .22);
  --terrain-obstacle-edge: rgba(230, 235, 242, .24);
}

#board .hex.terrain-obstacle:not(.tacticalTarget):not(.selected) {
  background-color: var(--terrain-obstacle-fill) !important;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, .20) 0 7px,
      var(--terrain-obstacle-stripe) 7px 10px,
      rgba(0, 0, 0, .12) 10px 14px
    ) !important;
  outline-color: rgba(240, 244, 249, .30) !important;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, .96),
    inset 0 0 0 3px var(--terrain-obstacle-edge),
    inset 0 0 16px rgba(0, 0, 0, .92),
    0 2px 6px rgba(0, 0, 0, .48) !important;
  filter: saturate(.28) brightness(.76) contrast(1.12);
  cursor: not-allowed;
}

#board .hex.terrain-obstacle:hover:not(:disabled):not(.tacticalTarget):not(.selected) {
  background-color: rgba(8, 10, 13, .92) !important;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, .18) 0 7px,
      rgba(148, 154, 163, .28) 7px 10px,
      rgba(0, 0, 0, .10) 10px 14px
    ) !important;
  filter: saturate(.32) brightness(.88) contrast(1.12);
}

/* SVG editor preview: a true near-black fill follows the exact polygon silhouette. */
.mapEditorHex.terrain-obstacle polygon {
  fill: #07090c !important;
  fill-opacity: .90 !important;
  stroke: rgba(235, 239, 245, .38) !important;
  stroke-width: 2.1 !important;
}

#mapEditorCanvas.hasCustomBackground .mapEditorHex.terrain-obstacle polygon {
  fill-opacity: .96 !important;
}

.mapEditorHex.terrain-obstacle:hover polygon,
.mapEditorHex.terrain-obstacle:focus polygon,
.mapEditorHex.terrain-obstacle.isSelected polygon {
  fill: #0b0e12 !important;
  stroke: #ffd17f !important;
  stroke-width: 3 !important;
}


/* =====================================================
   F9O7h — Tutorial Guidance & Adaptive Framing
   ===================================================== */
body.tutorial-runtime-active .mapHandSelectionPreview.isVisible,
body.tutorial-runtime-active .mapHandHoverPreview:not([hidden]) {
  z-index: 95 !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.tutorial-runtime-active .mapHandSelectionPreview.isVisible .mapHandSelectionPreviewInner,
body.tutorial-runtime-active .mapHandHoverPreview:not([hidden]) .mapHandHoverPreviewInner {
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: none;
  box-shadow: 0 22px 72px rgba(0,0,0,.72), 0 0 0 3px rgba(241,203,99,.28);
}
.tutorialAttentionTarget,
.tutorialAttentionContext {
  outline-offset: 3px;
  will-change: box-shadow, outline-color;
}
.tutorialAttentionTarget {
  outline: 3px solid rgba(255,220,108,.95);
  animation: tutorialRequiredActionPulse 820ms ease-in-out infinite alternate;
}
.tutorialAttentionContext {
  outline: 2px solid rgba(255,220,108,.35);
  animation: tutorialContextPulse 1100ms ease-in-out infinite alternate;
}
.narrativeNextBtn.tutorialAttentionTarget {
  box-shadow: 0 0 0 2px rgba(255,231,150,.35), 0 0 26px rgba(255,207,73,.72);
}
@keyframes tutorialRequiredActionPulse {
  from { outline-color: rgba(255,222,112,.58); box-shadow: 0 0 0 0 rgba(255,211,76,.16); }
  to { outline-color: rgba(255,238,174,1); box-shadow: 0 0 0 7px rgba(255,211,76,.18), 0 0 30px rgba(255,198,48,.52); }
}
@keyframes tutorialContextPulse {
  from { outline-color: rgba(255,220,108,.22); box-shadow: 0 0 0 0 rgba(255,211,76,.08); }
  to { outline-color: rgba(255,238,174,.72); box-shadow: 0 0 0 5px rgba(255,211,76,.12), 0 0 18px rgba(255,198,48,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .tutorialAttentionTarget,
  .tutorialAttentionContext { animation: none !important; }
  .tutorialAttentionTarget { outline-color: rgba(255,238,174,1); box-shadow: 0 0 0 5px rgba(255,211,76,.18), 0 0 22px rgba(255,198,48,.42); }
}


/* =====================================================
   F9O7h1 — Tutorial Visibility Hotfix
   - Il pulsante narrativo richiesto lampeggia davvero, con fase quasi invisibile.
   - Le anteprime carta vengono portalizzate nel body per uscire dallo stacking
     context isolato di #boardWrap e restare sopra lo scrim dello spotlight.
   ===================================================== */
body.tutorial-runtime-active .mapHandSelectionPreview.tutorialPreviewPortal,
body.tutorial-runtime-active .mapHandHoverPreview.tutorialPreviewPortal {
  position: fixed !important;
  z-index: 95 !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}

.narrativeNextBtn.tutorialAttentionTarget {
  animation: tutorialNarrativeButtonBlink 920ms steps(1, end) infinite !important;
  will-change: opacity, box-shadow, outline-color, transform;
}

@keyframes tutorialNarrativeButtonBlink {
  0%, 44% {
    opacity: 1;
    transform: scale(1);
    outline-color: rgba(255,238,174,1);
    box-shadow: 0 0 0 5px rgba(255,211,76,.20), 0 0 30px rgba(255,198,48,.62);
  }
  45%, 72% {
    opacity: .10;
    transform: scale(.985);
    outline-color: transparent;
    box-shadow: none;
  }
  73%, 100% {
    opacity: 1;
    transform: scale(1);
    outline-color: rgba(255,238,174,1);
    box-shadow: 0 0 0 5px rgba(255,211,76,.20), 0 0 30px rgba(255,198,48,.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .narrativeNextBtn.tutorialAttentionTarget {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    outline-color: rgba(255,238,174,1);
    box-shadow: 0 0 0 5px rgba(255,211,76,.20), 0 0 30px rgba(255,198,48,.62);
  }
}


/* F9R3 — PS centrale semantico nell'Editor */
.mapEditorHex.isCentralStrategicPoint polygon {
  stroke: rgba(255, 217, 112, .98) !important;
  stroke-width: 3.2 !important;
  filter: drop-shadow(0 0 5px rgba(255, 196, 64, .72));
}
.mapEditorHex.isCentralStrategicPoint text { font-weight: 900; }


/* F9Q3d1 — selezione esplicita del giocatore bersaglio in FFA */
.player-target-overlay {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(5px);
}
.player-target-overlay[hidden] { display: none !important; }
.player-target-dialog {
  width: min(620px, 94vw);
  max-height: min(82vh, 760px);
  overflow: auto;
  border: 1px solid rgba(211, 169, 77, 0.72);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(25, 30, 38, 0.99), rgba(12, 15, 20, 0.99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}
.player-target-kicker {
  color: #d9b868;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.player-target-dialog h2 { margin: 6px 0 4px; }
.player-target-description { margin: 0 0 14px; color: #cbd0d8; }
.player-target-choices { display: grid; gap: 10px; }
.player-target-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  width: 100%;
  padding: 13px 15px;
  text-align: left;
  color: #f2f2ef;
  background: rgba(50, 57, 68, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  cursor: pointer;
}
.player-target-choice:hover,
.player-target-choice:focus-visible {
  border-color: rgba(221, 180, 83, 0.9);
  background: rgba(73, 61, 38, 0.88);
  outline: none;
}
.player-target-choice span { color: #d9b868; }
.player-target-choice small { grid-column: 1 / -1; color: #b9c0ca; }
.player-target-cancel { margin-top: 15px; width: 100%; }

/* =====================================================
   F9S1c1 – Official 50-Deck Roster & Deck Builder UX
   ===================================================== */
.deckBuilderHeader {
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  align-items: start;
}
.deckBuilderHeaderActions {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.deckBuilderQuickActions,
.deckBuilderAdvancedActions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
}
.deckBuilderHeaderActions .ghost,
.deckBuilderHeaderActions .primary,
.deckBuilderHeaderActions .danger {
  width: auto;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
}
.deckBuilderAdvancedTools {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
}
.deckBuilderAdvancedTools summary {
  padding: 8px 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  user-select: none;
}
.deckBuilderAdvancedTools[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #f1d37b;
}
.deckBuilderAdvancedActions { padding: 8px; }

.deckBuilderAnalysisPanel {
  display: grid;
  grid-template-columns: minmax(310px, .9fr) minmax(230px, .7fr) minmax(360px, 1.2fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(227,189,103,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
}
.deckBuilderAnalysisHeadline {
  display: grid;
  grid-template-columns: repeat(5, minmax(52px, 1fr));
  gap: 6px;
}
.deckBuilderAnalysisHeadline > div {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 70px;
  padding: 7px 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  text-align: center;
}
.deckBuilderAnalysisHeadline strong {
  color: #fff4cf;
  font-size: 18px;
}
.deckBuilderAnalysisHeadline span,
.deckBuilderAnalysisLabel span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.deckBuilderComposition,
.deckBuilderCurveBlock {
  display: grid;
  align-content: center;
  gap: 8px;
}
.deckBuilderAnalysisLabel {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
}
.deckBuilderRatioBar {
  display: flex;
  height: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.deckBuilderRatioUnits {
  flex: 0 0 var(--db-unit-ratio, 0%);
  background: rgba(79,157,88,.72);
}
.deckBuilderRatioTactics {
  flex: 1 1 auto;
  background: rgba(164,105,196,.64);
}
.deckBuilderEnergyCurve {
  display: grid;
  grid-template-columns: repeat(8, minmax(26px, 1fr));
  gap: 5px;
  align-items: end;
  height: 92px;
}
.deckBuilderCurveColumn {
  display: grid;
  grid-template-rows: 14px 64px 14px;
  justify-items: center;
  align-items: end;
  min-width: 0;
}
.deckBuilderCurveCount {
  color: var(--muted);
  font-size: 10px;
}
.deckBuilderCurveBar {
  width: min(22px, 78%);
  height: var(--db-curve-height, 2px);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(241,211,123,.9), rgba(143,91,45,.82));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.deckBuilderCurveColumn strong {
  color: #fff4cf;
  font-size: 10px;
}
.deckBuilderValidationStats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.deckBuilderTable th:first-child,
.deckBuilderTable td:first-child {
  width: 112px;
  min-width: 112px;
}
.deckBuilderCountControl {
  display: inline-grid;
  grid-template-columns: 28px minmax(34px, auto) 28px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.deckBuilderCountControl strong {
  min-width: 34px;
  color: #fff4cf;
  font-size: 11px;
  text-align: center;
}

.deckBuilderSavedGalleryLayout {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(300px, .85fr);
  gap: 12px;
  align-items: start;
}
.deckBuilderSavedDeckGroups {
  display: grid;
  gap: 10px;
}
.deckBuilderSavedDeckGroup {
  display: grid;
  grid-template-columns: minmax(110px, .34fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.deckBuilderSavedDeckGroup h4 {
  margin: 0;
  padding: 8px 5px 0 0;
  color: #f1d37b;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.deckBuilderSavedDeckNameGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 6px;
}
.deckBuilderSavedDeckNameBtn {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: normal;
}
.deckBuilderSavedDeckNameBtn:hover,
.deckBuilderSavedDeckNameBtn.selected {
  border-color: rgba(227,189,103,.6);
  background: rgba(227,189,103,.12);
  color: #fff4cf;
}
.deckBuilderSavedDeckNameBtn.invalid {
  border-color: rgba(216,74,68,.5);
}
.deckBuilderSavedDeckDetail {
  position: sticky;
  top: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(227,189,103,.38);
  border-radius: 15px;
  background: rgba(0,0,0,.32);
}
.deckBuilderSavedDeckDetail .deckBuilderSavedDeckNote {
  min-height: 0;
}

@media (max-width: 1050px) {
  .deckBuilderHeader,
  .deckBuilderAnalysisPanel,
  .deckBuilderSavedGalleryLayout {
    grid-template-columns: 1fr;
  }
  .deckBuilderSavedDeckDetail { position: static; }
  .deckBuilderSavedDeckNameGrid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}
@media (max-width: 700px) {
  .deckBuilderQuickActions,
  .deckBuilderAdvancedActions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deckBuilderAnalysisHeadline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deckBuilderValidationStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deckBuilderSavedDeckGroup { grid-template-columns: 1fr; }
  .deckBuilderSavedDeckGroup h4 { padding-top: 0; }
  .deckBuilderSavedDeckNameGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deckBuilderTable th:first-child,
  .deckBuilderTable td:first-child { width: 104px; min-width: 104px; }
}

/* =====================================================
   F9U1a – Map HUD Layout Foundation
   Dock sinistro permanente, menu Debug e rimozione delle barre legacy.
   UI-only: nessuna modifica a regole, dati o telemetria.
   ===================================================== */

.gameDebugHeaderBtn { display: none; }
.hudDebugBtn {
  width: auto;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border-color: rgba(227,189,103,.34);
  color: #ffe1a1;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hudDebugBtn.active,
.gameDebugHeaderBtn.active {
  background: rgba(227,189,103,.16);
  border-color: rgba(227,189,103,.62);
  box-shadow: 0 0 0 2px rgba(227,189,103,.11);
}

.gameDebugMenu {
  position: fixed;
  z-index: 110;
  top: 108px;
  right: max(14px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(227,189,103,.32);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,22,31,.985), rgba(8,11,17,.98));
  box-shadow: 0 20px 58px rgba(0,0,0,.58);
  backdrop-filter: blur(12px);
}
.gameDebugMenu[hidden] { display: none !important; }
.gameDebugMenuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 9px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.gameDebugMenuHeader > div { display: grid; gap: 2px; }
.gameDebugMenuHeader strong {
  color: #ffe1a1;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.gameDebugMenuHeader span { color: var(--muted); font-size: 10.5px; }
.gameDebugMenuGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 0;
}
.gameDebugMenuGrid button {
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
}
.gameDebugVersionBox {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(0,0,0,.20);
}
.gameDebugVersionBox span,
.gameDebugVersionBox small { color: var(--muted); font-size: 9.5px; }
.gameDebugVersionBox strong { color: var(--text); font-size: 11px; overflow-wrap: anywhere; }

/* La vecchia barra inferiore non deve più occupare spazio né desktop né mobile. */
body.app-screen-game .gameActionBar,
body.app-screen-game .mobileGameBar {
  display: none !important;
}
body.app-screen-game:not(.mobile-apk-m4) .gameScreen {
  padding-bottom: 0 !important;
}

/* La partita è map-first: setup, deck/debug legacy e tattiche duplicate restano
   nel DOM solo per compatibilità, ma non sono pannelli della schermata principale. */
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp {
  padding: 10px 12px 12px;
  gap: 0;
}
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .setupPanel,
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .tacticDock,
body.app-screen-game:not(.mobile-apk-m4) .boardColumn > .handPrimaryDock,
body.app-screen-game:not(.mobile-apk-m4) .boardColumn > .marketDebugDock {
  display: none !important;
}
body.app-screen-game:not(.mobile-apk-m4) .mapFirstGameApp > .boardColumn {
  display: block !important;
  width: 100%;
}
body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  height: min(920px, calc(100dvh - 126px)) !important;
  min-height: min(760px, calc(100dvh - 126px)) !important;
  max-height: min(920px, calc(100dvh - 126px)) !important;
  padding: 12px !important;
}

/* Dock sinistro principale: Missione, abilità di fazione, Mano e Fine turno. */
.mapActionDock {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  bottom: auto !important;
  width: min(306px, 28vw);
  max-height: calc(100% - 28px);
  z-index: 42;
}
.mapHandOverlay.isTargeting ~ .mapActionDock,
.mapHandOverlay.isMovementHidden ~ .mapActionDock {
  bottom: auto !important;
}
.mapActionDockInner {
  max-height: inherit;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding: 10px;
  gap: 8px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(14,18,27,.94), rgba(7,10,16,.94));
  box-shadow: 0 18px 46px rgba(0,0,0,.48);
  backdrop-filter: blur(10px);
}
.mapActionDockHeader { align-items: center; }
.mapActionDockIdentity { display: grid; gap: 2px; min-width: 0; }
.mapActionDockIdentity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapActionDockEnergy { display: grid; gap: 1px; text-align: right; }
.mapActionDockEnergy strong { color: #ffe1a1; font-size: 17px; line-height: 1; }
.mapActionDockEnergy strong small { color: var(--muted); font-size: 9px; }
.mapActionDockEnergy span { font-size: 8.5px; color: var(--muted); }
.mapActionDockSectionTitle {
  color: rgba(255,255,255,.72);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 1px 2px;
}
.mapActionDockList {
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}
.mapLeftDockControls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.mapLeftDockControls button {
  width: 100%;
  min-height: 40px;
  padding: 7px 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 850;
}
.mapLeftEndTurnBtn { letter-spacing: .02em; }
.mapCollapsedHandControls { display: none !important; }

/* La mano aperta non copre il dock sinistro. */
body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
  left: max(332px, calc(env(safe-area-inset-left) + 332px));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}
body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayInner {
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) minmax(92px, auto);
}
body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlayActions {
  min-width: 92px;
}

/* Log e Statistiche esistono soltanto come overlay richiamati da Debug. */
body.app-screen-game:not(.mobile-apk-m4) .statsPanel:not(.panelOverlayActive),
body.app-screen-game:not(.mobile-apk-m4) #logDock:not(.panelOverlayActive) {
  display: none !important;
}
body.app-screen-game:not(.mobile-apk-m4)[data-game-panel-placement="bottom"] .managedGamePanel.panelOverlayActive {
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
}
body.app-screen-game:not(.mobile-apk-m4) .statsPanel.panelOverlayActive,
body.app-screen-game:not(.mobile-apk-m4) #logDock.panelOverlayActive {
  width: min(980px, calc(100vw - 36px)) !important;
  max-height: min(76dvh, 760px) !important;
  z-index: 104 !important;
}
body.app-screen-game:not(.mobile-apk-m4) #logDock.panelOverlayActive #log {
  height: min(58dvh, 580px) !important;
}

@media (max-width: 1120px) and (min-width: 981px) {
  .mapActionDock { width: min(280px, 31vw); }
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
    left: max(302px, calc(env(safe-area-inset-left) + 302px));
  }
}

/* APK/mobile: stessa gerarchia senza la vecchia barra inferiore. */
body.mobile-apk-m4 .gameDebugHeaderBtn {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 27px !important;
  height: 27px !important;
  padding: 2px 5px !important;
  border-radius: 7px !important;
  font-size: 9.5px !important;
  align-items: center;
  justify-content: center;
}
body.mobile-apk-m4 .gameHudStrip { display: none !important; }
body.mobile-apk-m4 .gameDebugMenu {
  top: calc(var(--m4-header-h) + 5px);
  right: max(5px, env(safe-area-inset-right));
  width: min(300px, calc(100vw - 10px));
  padding: 8px;
  border-radius: 12px;
  backdrop-filter: none;
}
body.mobile-apk-m4 .gameDebugMenuGrid { gap: 5px; padding: 7px 0; }
body.mobile-apk-m4 .gameDebugMenuGrid button { min-height: 32px !important; font-size: 9.5px !important; }
body.mobile-apk-m4 .gameDebugMenuHeader strong { font-size: 10px; }
body.mobile-apk-m4 .gameDebugMenuHeader span,
body.mobile-apk-m4 .gameDebugVersionBox span,
body.mobile-apk-m4 .gameDebugVersionBox small { font-size: 8px; }
body.mobile-apk-m4 .gameDebugVersionBox strong { font-size: 9px; }

body.mobile-apk-m4 #boardWrap,
body.mobile-apk-m4.mobile-panel-hand #boardWrap,
body.mobile-apk-m4.mobile-panel-command #boardWrap,
body.mobile-apk-m4.mobile-panel-setup #boardWrap,
body.mobile-apk-m4.mobile-panel-actions #boardWrap,
body.mobile-apk-m4.mobile-panel-log #boardWrap,
body.mobile-apk-m4.mobile-panel-stats #boardWrap {
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
}
body.mobile-apk-m4 .setupPanel,
body.mobile-apk-m4 .tacticDock,
body.mobile-apk-m4 .handPrimaryDock,
body.mobile-apk-m4 .marketDock {
  display: none !important;
}
body.mobile-apk-m4 .statsPanel,
body.mobile-apk-m4 .logPanel {
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  height: min(72dvh, 420px) !important;
  max-height: min(72dvh, 420px) !important;
}
body.mobile-apk-m4 .mapActionDock {
  top: calc(var(--m4-header-h) + var(--m4-status-h) + 45px);
  left: max(7px, env(safe-area-inset-left));
  bottom: auto !important;
  width: min(220px, 47vw);
  max-height: calc(100dvh - var(--m4-header-h) - var(--m4-status-h) - 58px);
  z-index: 44;
}
body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
  bottom: auto !important;
}
body.mobile-apk-m4 .mapActionDockInner {
  max-height: inherit;
  padding: 7px;
  gap: 5px;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
}
body.mobile-apk-m4 .mapActionDockList { max-height: none; }
body.mobile-apk-m4 .mapLeftDockControls { gap: 5px; padding-top: 5px; }
body.mobile-apk-m4 .mapLeftDockControls button {
  min-height: 31px !important;
  padding: 4px !important;
  font-size: 8.5px !important;
}
body.mobile-apk-m4 .mapHandOverlay {
  left: max(7px, env(safe-area-inset-left));
  right: max(7px, env(safe-area-inset-right));
  bottom: max(7px, env(safe-area-inset-bottom));
  z-index: 48;
}
body.mobile-apk-m4 .selectedUnitFloat { z-index: 50; }
body.mobile-apk-m4 .gamePanelScrim { bottom: 0 !important; }

@media (max-width: 620px) {
  .mapActionDock { width: min(210px, 48vw); }
  .mapActionDockName { font-size: 9.5px; }
  .mapActionDockMeta { font-size: 8px; }
  .mapActionDockCmd { min-width: 38px; font-size: 8px; }
}

/* F9U1a precedence hardening: neutralizza il vecchio centraggio verticale F9N7a. */
.mapActionDock,
.mapHandOverlay.isTargeting ~ .mapActionDock,
.mapHandOverlay.isMovementHidden ~ .mapActionDock {
  top: max(14px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: none !important;
}
body.mobile-apk-m4 .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
  top: calc(var(--m4-header-h) + var(--m4-status-h) + 45px) !important;
  bottom: auto !important;
  transform: none !important;
}


/* =====================================================
   F9U1a1 — Inspector, Hand Alignment & Header Controls Hotfix
   ===================================================== */
body.app-screen-game:not(.mobile-apk-m4) .topTitleBar {
  grid-template-columns: minmax(180px, 230px) minmax(280px, 1fr) minmax(350px, 430px);
}
.arenaMusicControlGame {
  width: min(340px, 100%);
  max-width: 340px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 5px 7px;
}
.arenaGameAudioRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.arenaGamePresentationToggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.arenaGamePresentationToggles button {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  padding: 4px 5px;
  font-size: 9px;
  line-height: 1.08;
  white-space: normal;
}
.arenaMusicControlGame .arenaMusicVolumeLabel {
  width: 100%;
  grid-template-columns: minmax(82px, 1fr) 35px;
}

/* La mano si avvicina al centro della superficie di gioco senza tornare sotto il dock. */
body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
  left: max(220px, calc(env(safe-area-inset-left) + 220px));
}
@media (max-width: 1120px) and (min-width: 981px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
    left: max(190px, calc(env(safe-area-inset-left) + 190px));
  }
}

/* Inspector destro in colonna: carta, abilità principale, stat/abilità, azioni. */
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat {
  width: min(392px, calc(100% - 24px));
  max-height: min(calc(100% - 24px), 92vh);
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloatBody {
  max-height: min(830px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.selectedUnitFloat #selectedPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
}
.selectedUnitPreviewShell {
  display: grid;
  gap: 9px;
  justify-items: center;
}
.selectedUnitPreviewCanvasWrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.selectedUnitPreviewCanvasWrap #selectedUnitCardPreviewCanvas,
#selectedUnitCardPreviewCanvas {
  width: min(100%, 230px);
  aspect-ratio: 1024 / 1536;
}
.selectedUnitPrimaryAbilitySlot {
  width: 100%;
  display: grid;
}
.selectedUnitPrimaryAbilityBtn {
  width: 100%;
  min-height: 42px;
  font-size: 12px;
  font-weight: 850;
}
.selectedUnitDataCard {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(0,0,0,.20);
}
.selectedUnitIdentity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.selectedUnitIdentity strong { color: #ffe1a1; font-size: 14px; }
.selectedUnitIdentity span { color: var(--muted); font-size: 10px; }
.selectedUnitStatsTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  overflow: hidden;
  border-radius: 11px;
}
.selectedUnitStatsTable th {
  padding: 6px 4px 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  background: rgba(255,255,255,.035);
}
.selectedUnitStatsTable td {
  padding: 5px 4px 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.035);
}
.selectedUnitAbilitiesBox {
  display: grid;
  gap: 7px;
}
.selectedUnitAbilityRow,
.selectedUnitPassiveBlock {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  font-size: 11px;
  line-height: 1.35;
}
.selectedUnitAbilityRow strong,
.selectedUnitPassiveBlock > strong { color: #ffe1a1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.selectedUnitAbilityRow span,
.selectedUnitPassiveBlock div { color: var(--text); }
.selectedUnitAbilityRow.isMuted span,
.selectedUnitPassiveBlock .isMuted { color: var(--muted); }
.selectedUnitInspectorEmpty { padding: 10px; text-align: center; }
.selectedUnitFloat #actionPanel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.selectedUnitFloat #actionPanel button {
  width: 100%;
  min-height: 40px;
  font-size: 11.5px;
  font-weight: 820;
}

@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  body.mobile-apk-m4 .arenaMusicControlGame {
    width: min(330px, calc(100vw - 12px));
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 58px;
  }
  body.mobile-apk-m4 .arenaGameAudioRow {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
  }
  body.mobile-apk-m4 .arenaGamePresentationToggles { gap: 3px; }
  body.mobile-apk-m4 .arenaGamePresentationToggles button {
    min-height: 23px !important;
    height: auto !important;
    padding: 2px 3px !important;
    font-size: 7.5px !important;
  }
  body.mobile-apk-m4 .mapActionDock,
  body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
  body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
    top: calc(var(--m4-header-h) + var(--m4-status-h) + 78px) !important;
    max-height: calc(100dvh - var(--m4-header-h) - var(--m4-status-h) - 88px);
  }
  body.mobile-apk-m4 .selectedUnitFloat {
    width: min(312px, calc(100% - 12px));
    max-height: min(92svh, 620px);
  }
  body.mobile-apk-m4 .selectedUnitFloatBody {
    max-height: min(82svh, 560px);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.mobile-apk-m4 .selectedUnitPreviewCanvasWrap #selectedUnitCardPreviewCanvas,
  body.mobile-apk-m4 #selectedUnitCardPreviewCanvas {
    width: min(100%, 190px);
  }
  body.mobile-apk-m4 .selectedUnitPrimaryAbilityBtn { min-height: 31px !important; font-size: 9px !important; }
  body.mobile-apk-m4 .selectedUnitStatsTable td { font-size: 17px; }
  body.mobile-apk-m4 .selectedUnitAbilityRow,
  body.mobile-apk-m4 .selectedUnitPassiveBlock { font-size: 9px; padding: 6px; }
  body.mobile-apk-m4 .selectedUnitFloat #actionPanel {
    grid-template-columns: 1fr !important;
  }
}

/* F9U1a1 hand centering refinement: il pannello resta tra dock sinistro e inspector destro. */
body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
  right: max(434px, calc(env(safe-area-inset-right) + 434px));
}
@media (max-width: 1120px) and (min-width: 981px) {
  body.app-screen-game:not(.mobile-apk-m4) .mapHandOverlay {
    right: max(434px, calc(env(safe-area-inset-right) + 434px));
  }
}

/* F9U1a1 viewport clamp: l'inspector resta interamente dentro la schermata e scorre internamente. */
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat {
  max-height: calc(100dvh - 175px);
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloatBody {
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
}


/* =====================================================
   F9U1b — Unit Inspector & PS/Unit Comparison Bars
   Indicatori UI alimentati dallo stato runtime autorevole.
   ===================================================== */
.gameHudStatusRow,
.gameComparisonBars {
  flex: 0 1 1180px;
  width: min(1180px, 100%);
  max-width: 1180px;
  margin-inline: auto;
}
.gameHudStatusRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.gameComparisonBars {
  display: grid;
  gap: 4px;
  padding: 1px 2px 0;
}
.gameComparisonBars.isEmpty { opacity: .62; }
.gameComparisonRow {
  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr) minmax(210px, auto);
  align-items: center;
  gap: 8px;
  min-height: 14px;
}
.gameComparisonLabel {
  color: #e7d7b2;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
.gameComparisonTrack {
  min-width: 0;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.72);
}
.gameComparisonSegments {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.gameComparisonSegments.isEmpty::after {
  content: "";
  width: 100%;
  background: rgba(255,255,255,.045);
}
.gameComparisonSegment {
  display: block;
  min-width: 0;
  background: var(--comparison-color, #73839a);
  border-right: 1px solid rgba(0,0,0,.35);
  transition: flex-grow .18s ease, opacity .18s ease;
}
.gameComparisonSegment:last-child { border-right: 0; }
.gameComparisonSegment.isDuplicateFaction {
  background:
    repeating-linear-gradient(var(--comparison-stripe-angle, 55deg), rgba(255,255,255,.20) 0 2px, transparent 2px 7px),
    var(--comparison-color, #73839a);
}
.gameComparisonSegment.isEliminated { opacity: .42; filter: grayscale(.35); }
.gameComparisonSegment.isNeutral { background: #59606b; }
.gameComparisonCounters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.gameComparisonCounter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dce2ec;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.gameComparisonCounter b { font-weight: 850; }
.gameComparisonCounterDot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: var(--comparison-color, #73839a);
  box-shadow: 0 0 0 1px rgba(0,0,0,.44);
}
.gameComparisonCounter.isNeutral .gameComparisonCounterDot { background: #59606b; }
.gameComparisonCounter.isEliminated { opacity: .48; text-decoration: line-through; }

/* Il nuovo blocco occupa pochi pixel sotto i chip: la mappa resta dominante. */
body.app-screen-game:not(.mobile-apk-m4) #boardWrap {
  height: min(920px, calc(100dvh - 164px)) !important;
  min-height: min(720px, calc(100dvh - 164px)) !important;
  max-height: min(920px, calc(100dvh - 164px)) !important;
}

/* Inspector finalizzato: accento di fazione e nessun pulsante fittizio per unità passive. */
.selectedUnitFloat #selectedPanel { --selected-unit-accent: rgba(227,189,103,.52); }
.selectedUnitFloat .selectedUnitDataCard {
  border-color: color-mix(in srgb, var(--selected-unit-accent) 50%, rgba(255,255,255,.10));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--selected-unit-accent) 72%, transparent);
}
.selectedUnitPrimaryAbilitySlot[hidden] { display: none !important; }
.selectedUnitFloatHeader #selectedUnitFloatTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selectedUnitStatsTable td { font-size: 24px; }

@media (max-width: 1120px) and (min-width: 981px) {
  .gameComparisonRow { grid-template-columns: 44px minmax(100px, 1fr) minmax(170px, auto); gap: 6px; }
  .gameComparisonCounters { gap: 5px; }
  .gameComparisonCounter { font-size: 8.5px; }
}

/* APK/mobile: mostra soltanto le due linee del gameHudStrip, sotto i controlli audio. */
@media (pointer: coarse), (max-width: 980px), (max-height: 560px) {
  body.mobile-apk-m4 .gameHudStrip {
    display: block !important;
    position: fixed !important;
    z-index: 83;
    top: calc(var(--m4-header-h) + var(--m4-status-h) + 70px) !important;
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    width: auto;
    padding: 4px 6px !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(6,8,13,.82);
    backdrop-filter: none;
    pointer-events: none;
  }
  body.mobile-apk-m4 .gameHudStrip > :not(.gameComparisonBars) { display: none !important; }
  body.mobile-apk-m4 .gameComparisonBars { width: 100%; gap: 3px; padding: 0; }
  body.mobile-apk-m4 .gameComparisonRow {
    grid-template-columns: 35px minmax(70px, 1fr) minmax(135px, auto);
    gap: 5px;
    min-height: 11px;
  }
  body.mobile-apk-m4 .gameComparisonLabel { font-size: 7.5px; }
  body.mobile-apk-m4 .gameComparisonTrack { height: 6px; }
  body.mobile-apk-m4 .gameComparisonCounters { gap: 4px; }
  body.mobile-apk-m4 .gameComparisonCounter { font-size: 7px; gap: 2px; }
  body.mobile-apk-m4 .gameComparisonCounterDot { width: 5px; height: 5px; flex-basis: 5px; }
  body.mobile-apk-m4 .mapActionDock,
  body.mobile-apk-m4 .mapHandOverlay.isTargeting ~ .mapActionDock,
  body.mobile-apk-m4 .mapHandOverlay.isMovementHidden ~ .mapActionDock {
    top: calc(var(--m4-header-h) + var(--m4-status-h) + 112px) !important;
    max-height: calc(100dvh - var(--m4-header-h) - var(--m4-status-h) - 122px);
  }
  body.mobile-apk-m4 .selectedUnitStatsTable td { font-size: 18px; }
}

@media (max-width: 560px) {
  body.mobile-apk-m4 .gameComparisonRow { grid-template-columns: 31px minmax(48px, 1fr) minmax(102px, auto); gap: 3px; }
  body.mobile-apk-m4 .gameComparisonCounters { gap: 3px; }
  body.mobile-apk-m4 .gameComparisonCounter { font-size: 6.5px; }
}

/* F9U1b viewport clamp: le barre superiori aggiungono altezza, l'Inspector resta nel viewport. */
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloat {
  max-height: calc(100dvh - 205px);
}
body.app-screen-game:not(.mobile-apk-m4) .selectedUnitFloatBody {
  max-height: calc(100dvh - 250px);
}


/* =====================================================
   F9U2a – Card Pool Reorganization
   ===================================================== */
.cardPoolHeader {
  align-items: center;
}
.cardPoolHeaderActions {
  width: min(100%, 620px);
  min-width: 0;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.cardPoolHeaderActions .ghost,
.cardPoolHeaderActions .primary {
  width: 100%;
  min-height: 40px;
}
.cardPoolPreviewToolbar {
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(320px, 1fr) minmax(140px, auto);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}
.cardPoolViewModeGroup,
.cardPoolNavGroup,
.cardPoolFocusGroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.cardPoolNavGroup {
  justify-content: center;
}
.cardPoolFocusGroup {
  justify-content: flex-end;
}
.cardPoolToolbarLabel {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cardPoolPreviewLayout {
  grid-template-columns: minmax(400px, 520px) minmax(380px, 1fr);
  align-items: stretch;
}
.cardPoolSelectedInfoBox {
  align-self: stretch;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,19,27,.78), rgba(0,0,0,.24));
  box-shadow: 0 14px 30px rgba(0,0,0,.20);
}
.cardPoolPreviewMeta {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: 12px;
  letter-spacing: .02em;
}
.cardPoolSelectedHeading {
  display: grid;
  gap: 4px;
}
.cardPoolSelectedHeading h4 {
  margin: 0;
  color: #fff4cf;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.08;
}
.cardPoolSelectedHeading span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cardPoolLargeStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
}
.cardPoolLargeStat {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
}
.cardPoolLargeStat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}
.cardPoolLargeStat strong {
  color: #fff;
  font-size: 27px;
  line-height: 1;
}
.cardPoolAbilityStack {
  display: grid;
  gap: 10px;
}
.cardPoolAbilitySection {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
}
.cardPoolAbilitySection h5 {
  margin: 0 0 8px;
  color: #f1d37b;
  font-size: 16px;
  line-height: 1.2;
}
.cardPoolAbilitySection p {
  margin: 0;
  color: #e7edf5;
  font-size: 15px;
  line-height: 1.5;
}
.cardPoolAbilityMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.cardPoolAbilityMeta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(227,189,103,.12);
  color: #ffe8ad;
  font-size: 11px;
  font-weight: 800;
}
.cardPoolPassiveList {
  display: grid;
  gap: 9px;
}
.cardPoolPassiveList article {
  padding-left: 10px;
  border-left: 3px solid rgba(227,189,103,.48);
}
.cardPoolPassiveList strong {
  color: #fff4cf;
  font-size: 14px;
}
.cardPoolPassiveList p {
  margin-top: 3px;
}
.cardPoolFullText p {
  color: var(--muted);
}
.cardPoolDebugDetails {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 10px;
}
.cardPoolDebugSummary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 100px;
  cursor: pointer;
  list-style: none;
}
.cardPoolDebugSummary::-webkit-details-marker { display: none; }
.cardPoolDebugSummary::after {
  content: "▾";
  margin-left: 8px;
  transition: transform .12s ease;
}
.cardPoolDebugDetails[open] .cardPoolDebugSummary::after {
  transform: rotate(180deg);
}
.cardPoolDebugContent {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.cardPoolDebugBody {
  display: grid;
  gap: 6px;
  font-size: 11px;
}
.cardPoolDebugActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.cardPoolFocusMode .cardPoolSelectedInfoBox {
  min-height: 0;
}
@media (max-width: 1100px) {
  .cardPoolHeaderActions {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
  .cardPoolPreviewToolbar {
    grid-template-columns: 1fr 1fr;
  }
  .cardPoolNavGroup {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .cardPoolFocusGroup { justify-content: flex-end; }
  .cardPoolPreviewLayout {
    grid-template-columns: minmax(330px, 440px) minmax(320px, 1fr);
  }
}
@media (max-width: 760px) {
  .cardPoolHeaderActions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .cardPoolPreviewToolbar {
    grid-template-columns: 1fr;
  }
  .cardPoolViewModeGroup,
  .cardPoolNavGroup,
  .cardPoolFocusGroup {
    grid-column: auto;
    grid-row: auto;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cardPoolPreviewLayout {
    grid-template-columns: 1fr;
  }
  .cardPoolSelectedInfoBox {
    padding: 13px;
  }
  .cardPoolLargeStats {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
  }
  .cardPoolLargeStat {
    min-height: 62px;
  }
  .cardPoolLargeStat strong {
    font-size: 23px;
  }
  .cardPoolAbilitySection p {
    font-size: 14px;
  }
}


/* =====================================================
   F9U2b – Card Editor & Map Editor Layout Reorganization
   Layout-only: all existing editor IDs and runtime handlers remain authoritative.
   ===================================================== */
.cardEditorHeader,
.mapEditorHeaderF9U2b {
  gap: 18px;
}
.cardEditorHeading,
.mapEditorHeading {
  min-width: min(100%, 390px);
}
.cardEditorHeaderActions,
.mapEditorHeaderActions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.cardEditorActionGroup,
.mapEditorActionGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}
.cardEditorHeaderTools,
.mapEditorActionDetails {
  position: relative;
  min-width: 132px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
}
.cardEditorHeaderTools > summary,
.mapEditorActionDetails > summary,
.cardEditorDataExchange > summary,
.cardEditorWorkbenchDetails > summary,
.mapEditorValidationPanel > summary {
  cursor: pointer;
  list-style: none;
  color: #f0d6a6;
  font-weight: 800;
  padding: 10px 12px;
}
.cardEditorHeaderTools > summary::-webkit-details-marker,
.mapEditorActionDetails > summary::-webkit-details-marker,
.cardEditorDataExchange > summary::-webkit-details-marker,
.cardEditorWorkbenchDetails > summary::-webkit-details-marker,
.mapEditorValidationPanel > summary::-webkit-details-marker { display: none; }
.cardEditorHeaderTools > summary::after,
.mapEditorActionDetails > summary::after,
.cardEditorDataExchange > summary::after,
.cardEditorWorkbenchDetails > summary::after,
.mapEditorValidationPanel > summary::after {
  content: "▾";
  float: right;
  margin-left: 12px;
  opacity: .7;
}
.cardEditorHeaderTools:not([open]) > summary::after,
.mapEditorActionDetails:not([open]) > summary::after,
.cardEditorDataExchange:not([open]) > summary::after,
.cardEditorWorkbenchDetails:not([open]) > summary::after,
.mapEditorValidationPanel:not([open]) > summary::after { content: "▸"; }
.cardEditorHeaderToolsBody,
.mapEditorActionDetailsBody {
  display: grid;
  gap: 7px;
  padding: 0 8px 8px;
}
.cardEditorLivePolicyBar {
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  align-items: stretch;
}
.cardEditorLayoutF9U2b {
  grid-template-columns: minmax(620px, 1.2fr) minmax(390px, .8fr);
  gap: 16px;
}
.cardEditorFormBox,
.cardEditorPreviewBox {
  border-color: rgba(227,189,103,.15);
}
.cardEditorIdentityGrid,
.cardEditorStatsGrid,
.cardEditorAbilityGrid,
.cardEditorArtBox,
.cardEditorLibrarySection,
.cardEditorDataExchange {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.15);
}
.cardEditorIdentityGrid,
.cardEditorStatsGrid {
  padding: 12px;
}
.cardEditorStatsGrid {
  background: rgba(227,189,103,.045);
}
.cardEditorWorkbenchDetails {
  margin: 14px 0 12px;
  padding: 0;
  overflow: hidden;
}
.cardEditorWorkbenchDetailsBody,
.cardEditorDataExchangeBody {
  padding: 0 12px 12px;
}
.cardEditorWorkbenchDetails .deckBuilderBoxTitleRow {
  margin-top: 0;
}
.cardEditorPreviewBox {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}
.cardEditorPreviewLayout {
  grid-template-columns: minmax(210px, 285px) minmax(0,1fr);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cardEditorLibrarySection {
  margin-top: 16px;
  padding: 0 12px 12px;
}
.cardEditorDataExchange {
  margin-top: 14px;
  overflow: hidden;
}
.cardEditorDataExchange .cardEditorSavedTitle {
  margin-top: 0;
}

.mapEditorHeaderF9U2b {
  align-items: flex-start;
  margin-bottom: 10px;
}
.mapEditorHeaderActions {
  max-width: 940px;
}
.mapEditorActionDetailsBody button {
  width: 100%;
}
.mapEditorLiveBar {
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) minmax(150px, 1.2fr) repeat(7, minmax(68px, .55fr));
  gap: 7px;
  align-items: stretch;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid rgba(230,184,116,.24);
  border-radius: 13px;
  background: rgba(0,0,0,.26);
  overflow-x: auto;
}
.mapEditorLiveBar .mapEditorValidationSummary {
  margin: 0;
  min-width: 205px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}
.mapEditorLiveMetric {
  min-width: 68px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}
.mapEditorLiveMetric span {
  color: var(--muted);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.mapEditorLiveMetric strong {
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5dfb6;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.mapEditorWorkspaceF9U2b {
  grid-template-columns: minmax(250px, 310px) minmax(560px, 1fr) minmax(270px, 330px);
  gap: 12px;
}
.mapEditorProjectPanel,
.mapEditorToolsPanel {
  max-height: calc(100vh - 190px);
  overflow: auto;
  scrollbar-gutter: stable;
}
.mapEditorSideSection {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.13);
}
.mapEditorSideTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.mapEditorSideTitleRow h3 {
  margin: 0;
  font-size: .94rem;
}
.mapEditorTwoColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mapEditorTwoColumns label {
  display: grid;
  gap: 5px;
}
.mapEditorToolsPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mapEditorToolsPanel .mapEditorToolGrid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.mapEditorToolOptions {
  display: grid;
  gap: 6px;
}
.mapEditorToolOptions select {
  width: 100%;
}
.mapEditorSelectionSection {
  min-height: 125px;
}
.mapEditorSelection {
  margin-top: 0;
  background: rgba(255,255,255,.035);
}
.mapEditorValidationPanel {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  overflow: hidden;
}
.mapEditorValidationBody {
  padding: 0 10px 10px;
}
.mapEditorValidationPanel ol {
  max-height: 220px;
}
.mapEditorSideActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: auto;
}
.mapEditorCanvasPanel {
  min-height: 0;
}
.mapEditorCanvasViewport {
  height: calc(100vh - 250px);
  min-height: 570px;
}

@media (max-width: 1380px) {
  .mapEditorLiveBar {
    grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 1fr) repeat(7, minmax(64px, .5fr));
  }
  .mapEditorWorkspaceF9U2b {
    grid-template-columns: minmax(225px, 275px) minmax(480px, 1fr) minmax(245px, 295px);
  }
  .cardEditorLayoutF9U2b {
    grid-template-columns: minmax(520px, 1.1fr) minmax(350px, .9fr);
  }
}
@media (max-width: 1100px) {
  .cardEditorLivePolicyBar,
  .cardEditorLayoutF9U2b {
    grid-template-columns: 1fr;
  }
  .cardEditorPreviewBox {
    position: static;
    max-height: none;
  }
  .mapEditorWorkspaceF9U2b {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  }
  .mapEditorToolsPanel {
    grid-column: 1 / -1;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .mapEditorSideActions { align-self: end; }
}
@media (max-width: 760px) {
  .cardEditorHeaderActions,
  .mapEditorHeaderActions {
    justify-content: stretch;
  }
  .cardEditorActionGroup,
  .mapEditorActionGroup,
  .cardEditorHeaderTools,
  .mapEditorActionDetails {
    width: 100%;
  }
  .cardEditorActionGroup button,
  .mapEditorActionGroup button {
    flex: 1 1 auto;
  }
  .cardEditorPreviewLayout {
    grid-template-columns: 1fr;
  }
  .mapEditorLiveBar {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .mapEditorLiveBar .mapEditorValidationSummary {
    grid-column: 1 / -1;
  }
  .mapEditorWorkspaceF9U2b,
  .mapEditorToolsPanel {
    grid-template-columns: 1fr;
  }
  .mapEditorToolsPanel { grid-column: auto; }
  .mapEditorProjectPanel,
  .mapEditorToolsPanel { max-height: none; }
  .mapEditorCanvasViewport { min-height: 480px; height: 62vh; }
}

/* F9U2b tablet reflow: the editor workspaces become a single vertical flow before Android-specific work. */
@media (max-width: 900px) {
  .mapEditorLiveBar {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .mapEditorLiveBar .mapEditorValidationSummary {
    grid-column: 1 / -1;
  }
  .mapEditorWorkspaceF9U2b,
  .mapEditorToolsPanel {
    grid-template-columns: 1fr;
  }
  .mapEditorToolsPanel {
    grid-column: auto;
  }
  .mapEditorProjectPanel,
  .mapEditorToolsPanel {
    max-height: none;
  }
  .mapEditorCanvasViewport {
    min-height: 480px;
    height: 62vh;
  }
}

/* =====================================================
   F9U3 – Control Center
   ===================================================== */
.mainMenuCard.mainMenuCardF9Q3a {
  grid-template-rows: auto auto auto auto;
  width: min(1460px, 100%);
}
.mainMenuDashboard.controlCenterDashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: none;
  gap: 14px;
  align-items: stretch;
}
.controlCenterArea {
  min-width: 0;
  padding: clamp(15px, 1.7vw, 22px);
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.045), transparent 58%),
    rgba(10,14,22,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 48px rgba(0,0,0,.12);
}
.controlCenterAreaPlay {
  grid-column: span 4;
  background:
    radial-gradient(circle at 12% 8%, rgba(197,66,56,.19), transparent 44%),
    linear-gradient(150deg, rgba(214,179,90,.08), transparent 58%),
    rgba(10,14,22,.86);
}
.controlCenterAreaCards { grid-column: span 5; }
.controlCenterAreaMaps { grid-column: span 3; }
.controlCenterAreaAnalysis { grid-column: span 6; }
.controlCenterAreaSystem { grid-column: span 6; }
.controlCenterActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.controlCenterActionGridPlay .controlCenterActionPrimary { grid-column: 1 / -1; }
.controlCenterActionGridCompact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.controlCenterActionPrimary,
.controlCenterActionGrid .mainMenuStudioTile {
  min-height: 78px;
  white-space: normal;
}
.controlCenterActionPrimary {
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
}
.controlCenterActionPrimary > span:last-child {
  display: grid;
  gap: 3px;
}
.controlCenterActionPrimary strong { font-size: 16px; }
.controlCenterActionPrimary small {
  color: rgba(255,255,255,.76);
  font-size: 10px;
  font-weight: 600;
}
.controlCenterStatusBoard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.controlCenterStatusCard {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(6,9,15,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.controlCenterStatusCard > span {
  color: #d6b35a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.controlCenterStatusCard > strong {
  min-width: 0;
  color: rgba(247,248,251,.96);
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.controlCenterStatusCard > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.controlCenterStatusCard[data-tone="good"] { border-color: rgba(112,211,137,.28); }
.controlCenterStatusCard[data-tone="warn"] { border-color: rgba(255,190,94,.42); }
.controlCenterStatusCard[data-tone="bad"] {
  border-color: rgba(237,92,92,.48);
  background: rgba(45,10,14,.42);
}
.controlCenterPanel[hidden] { display: none !important; }
.controlCenterPanel {
  position: fixed;
  inset: 0;
  z-index: 5400;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.5vw, 30px);
}
.controlCenterPanelScrim {
  position: absolute;
  inset: 0;
  background: rgba(2,4,8,.82);
  backdrop-filter: blur(8px);
}
.controlCenterPanelSheet {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(900px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(214,179,90,.30);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(173,44,44,.15), transparent 32%),
    linear-gradient(155deg, rgba(29,35,47,.98), rgba(8,11,18,.99));
  box-shadow: 0 32px 100px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.055);
}
.controlCenterPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.controlCenterPanelHeader h2 { margin: 2px 0 0; font-size: clamp(20px, 2.3vw, 30px); }
.compactIconBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 25px;
}
.controlCenterPanelBody {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(15px, 2.2vw, 24px);
}
.controlCenterPanelLead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.controlCenterPanelLead h3,
.controlCenterPanelLead strong { margin: 0; color: rgba(248,249,252,.96); font-size: 18px; }
.controlCenterPanelLead p { margin: 5px 0 0; color: var(--muted); line-height: 1.45; }
.controlCenterInlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.controlCenterMetricGrid,
.controlCenterDiagnosticsGrid,
.controlCenterTransferGrid,
.controlCenterSettingsGrid,
.controlCenterVersionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.controlCenterMiniMetric,
.controlCenterDiagnosticCard,
.controlCenterTransferCard,
.controlCenterSettingCard,
.controlCenterVersionCard {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(5,8,14,.55);
}
.controlCenterMiniMetric { display: grid; gap: 5px; }
.controlCenterMiniMetric small { color: #d6b35a; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.controlCenterMiniMetric strong { overflow-wrap: anywhere; font-size: 17px; }
.controlCenterMiniMetric span { color: var(--muted); font-size: 10px; }
.controlCenterMiniMetric[data-tone="good"],
.controlCenterDiagnosticCard[data-tone="good"] { border-color: rgba(112,211,137,.28); }
.controlCenterMiniMetric[data-tone="warn"],
.controlCenterDiagnosticCard[data-tone="warn"] { border-color: rgba(255,190,94,.38); }
.controlCenterMiniMetric[data-tone="bad"],
.controlCenterDiagnosticCard[data-tone="bad"] { border-color: rgba(237,92,92,.44); }
.controlCenterTableWrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
}
.controlCenterTable {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 11px;
}
.controlCenterTable th,
.controlCenterTable td {
  padding: 10px 11px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  text-align: left;
  vertical-align: middle;
}
.controlCenterTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(22,27,37,.98);
  color: #e3c46d;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.controlCenterTable tr:last-child td { border-bottom: 0; }
.controlCenterTable td small { display: block; margin-top: 3px; color: var(--muted); }
.controlCenterTable td[data-tone="good"] { color: #bfffc8; }
.controlCenterTable td[data-tone="warn"] { color: #ffd99b; }
.controlCenterTable td[data-tone="bad"] { color: #ffb3b3; }
.controlCenterTableActions { white-space: nowrap; }
.controlCenterTableActions button { margin: 2px; }
.controlCenterEmptyState {
  padding: 30px 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}
.controlCenterJsonDetails {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
}
.controlCenterJsonDetails summary { padding: 12px 14px; cursor: pointer; color: #d6b35a; font-weight: 700; }
.controlCenterJsonDetails pre {
  max-height: 420px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border-top: 1px solid rgba(255,255,255,.07);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(223,229,238,.88);
  font-size: 10px;
  line-height: 1.5;
}
.controlCenterSettingCard,
.controlCenterTransferCard,
.controlCenterDiagnosticCard,
.controlCenterVersionCard { display: grid; align-content: start; gap: 9px; }
.controlCenterSettingCard h3,
.controlCenterTransferCard h3,
.controlCenterDiagnosticCard h3,
.controlCenterVersionCard h3 { margin: 0; font-size: 15px; }
.controlCenterSettingCard p,
.controlCenterTransferCard p,
.controlCenterDiagnosticCard p,
.controlCenterVersionCard p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.controlCenterSettingCard label,
.controlCenterToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.controlCenterSettingCard input[type="range"] { width: 100%; }
.controlCenterTransferCard dl,
.controlCenterVersionCard dl { display: grid; gap: 8px; margin: 0; }
.controlCenterTransferCard dl div,
.controlCenterVersionCard dl div { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,1.3fr); gap: 10px; }
.controlCenterTransferCard dt,
.controlCenterVersionCard dt { color: var(--muted); font-size: 10px; }
.controlCenterTransferCard dd,
.controlCenterVersionCard dd { margin: 0; overflow-wrap: anywhere; font-size: 11px; }
.controlCenterDiagnosticList { margin: 0; padding-left: 18px; color: rgba(226,230,237,.88); font-size: 11px; line-height: 1.5; }
.controlCenterFeedback {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: rgba(0,0,0,.22);
  color: var(--muted);
}
.controlCenterFeedback[data-tone="good"] { color: #bfffc8; border-color: rgba(112,211,137,.3); }
.controlCenterFeedback[data-tone="bad"] { color: #ffb3b3; border-color: rgba(237,92,92,.4); }
[data-control-center-dev-only][hidden],
html[data-arena-developer-mode="off"] [data-control-center-dev-only] { display: none !important; }
[data-f9w2a-profile-hidden="1"][hidden] { display: none !important; }

@media (max-width: 1120px) {
  .mainMenuDashboard.controlCenterDashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controlCenterAreaPlay,
  .controlCenterAreaCards,
  .controlCenterAreaMaps,
  .controlCenterAreaAnalysis,
  .controlCenterAreaSystem { grid-column: span 1; }
  .controlCenterAreaAnalysis,
  .controlCenterAreaSystem { grid-column: span 1; }
  .controlCenterStatusBoard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mainMenuDashboard.controlCenterDashboard { grid-template-columns: 1fr; }
  .controlCenterAreaPlay,
  .controlCenterAreaCards,
  .controlCenterAreaMaps,
  .controlCenterAreaAnalysis,
  .controlCenterAreaSystem { grid-column: auto; }
  .controlCenterActionGrid,
  .controlCenterActionGridCompact { grid-template-columns: 1fr; }
  .controlCenterActionGridPlay .controlCenterActionPrimary { grid-column: auto; }
  .controlCenterStatusBoard { grid-template-columns: 1fr; }
  .controlCenterStatusCard { min-height: 88px; }
  .controlCenterPanel { padding: 6px; }
  .controlCenterPanelSheet {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 15px;
  }
  .controlCenterPanelHeader { padding: 13px 14px; }
  .controlCenterPanelBody { padding: 12px; }
  .controlCenterPanelLead { display: grid; }
  .controlCenterMetricGrid,
  .controlCenterDiagnosticsGrid,
  .controlCenterTransferGrid,
  .controlCenterSettingsGrid,
  .controlCenterVersionGrid { grid-template-columns: 1fr; }
  .controlCenterInlineActions { display: grid; grid-template-columns: 1fr; }
  .controlCenterInlineActions button { width: 100%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .mainMenuDashboard.controlCenterDashboard { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
  .controlCenterAreaPlay,
  .controlCenterAreaCards,
  .controlCenterAreaMaps,
  .controlCenterAreaAnalysis,
  .controlCenterAreaSystem { grid-column: auto; }
  .controlCenterStatusBoard { grid-template-columns: repeat(4, minmax(190px, 1fr)); overflow-x: auto; }
}

/* F9U3 aliases matching the runtime-generated panel markup. */
.controlCenterMiniMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.controlCenterSettingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.controlCenterSettingsCard {
  min-width: 0;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(5,8,14,.55);
}
.controlCenterSettingsCard h3 { margin: 0; font-size: 15px; }
.controlCenterSettingsCard p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.controlCenterSettingsCard label,
.controlCenterDeveloperToggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.controlCenterSettingsCard label:has(input[type="range"]) {
  grid-template-columns: minmax(90px, auto) minmax(90px, 1fr) auto;
}
.controlCenterSettingsCard output { min-width: 42px; text-align: right; color: #d6b35a; }
.controlCenterDiagnosticGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.controlCenterDiagnosticGrid details,
.controlCenterNotesBox {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(4,7,12,.50);
}
.controlCenterDiagnosticGrid summary { cursor: pointer; color: #d6b35a; font-weight: 750; }
.controlCenterDiagnosticGrid ul { margin: 10px 0 0; padding-left: 18px; color: rgba(224,229,238,.86); font-size: 11px; line-height: 1.5; }
.controlCenterDiagnosticGrid pre { max-height: 320px; margin: 10px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; }
.controlCenterNotesBox { margin-top: 14px; }
.controlCenterNotesBox p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.controlCenterKeyValueTable { min-width: 560px; }
.controlCenterKeyValueTable th { position: static; width: 210px; }
@media (max-width: 760px) {
  .controlCenterMiniMetrics,
  .controlCenterSettingsGrid,
  .controlCenterDiagnosticGrid { grid-template-columns: 1fr; }
  .controlCenterSettingsCard label:has(input[type="range"]) { grid-template-columns: 1fr auto; }
  .controlCenterSettingsCard label:has(input[type="range"]) input { grid-column: 1 / -1; width: 100%; }
}
.controlCenterTableActions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 190px;
}
.controlCenterTableActions button {
  width: auto !important;
  min-width: 78px;
  flex: 0 0 auto;
}
.mainMenuDashboard.controlCenterDashboard > .controlCenterArea {
  grid-area: auto !important;
}
/* F9U3 explicit placement after neutralizing legacy named grid areas. */
.mainMenuDashboard.controlCenterDashboard > .controlCenterAreaPlay { grid-column: span 4 !important; }
.mainMenuDashboard.controlCenterDashboard > .controlCenterAreaCards { grid-column: span 5 !important; }
.mainMenuDashboard.controlCenterDashboard > .controlCenterAreaMaps { grid-column: span 3 !important; }
.mainMenuDashboard.controlCenterDashboard > .controlCenterAreaAnalysis,
.mainMenuDashboard.controlCenterDashboard > .controlCenterAreaSystem { grid-column: span 6 !important; }
@media (max-width: 1120px) {
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaPlay,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaCards,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaMaps,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaAnalysis,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaSystem { grid-column: span 1 !important; }
}
@media (max-width: 760px) {
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaPlay,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaCards,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaMaps,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaAnalysis,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaSystem { grid-column: 1 / -1 !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaPlay,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaCards,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaMaps,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaAnalysis,
  .mainMenuDashboard.controlCenterDashboard > .controlCenterAreaSystem { grid-column: auto !important; }
}