@layer legacy {
/*
  The Eternal - Shackles Campaign UI
  Version: web-v24

  Structure:
  1. Design tokens and base elements
  2. Layout shell and navigation
  3. Reusable cards, grids, forms, modals
  4. Screen-specific patterns
  5. Responsive anti-clipping rules
*/

:root {
      --bg: #4a3926;
      --bg2: #6b5536;
      --wood: #2c1d13;
      --wood2: #4b301c;
      --wood3: #73542f;
      --paper: #e9ddbd;
      --paper2: #d8c89f;
      --paper3: #c2aa7a;
      --ink: #1d1711;
      --ink-soft: #483a28;
      --muted: #6b583d;
      --faint: #8c7a5e;
      --line: rgba(30, 20, 10, .22);
      --line-strong: rgba(30, 20, 10, .42);
      --text: #24180f;
      --gold: #b8842e;
      --gold2: #ffe29a;
      --cyan: #17d8d1;
      --danger: #c23826;
      --danger-bg: rgba(194, 56, 38, .13);
      --ok: #24733a;
      --ok-bg: rgba(36, 115, 58, .13);
      --warn: #bd741b;
      --warn-bg: rgba(189, 116, 27, .16);
      --blue: #2e6f8f;
      --shadow: 0 12px 26px rgba(37, 25, 13, .28);
      --radius: 14px;
      --tap: 48px;
      --max: 860px;
      font-family: Georgia, "Times New Roman", serif;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
    body {
      background:
        radial-gradient(circle at top left, rgba(255,224,151,.20), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(20,216,208,.12), transparent 30rem),
        linear-gradient(180deg, var(--bg2), var(--bg));
      -webkit-font-smoothing: antialiased;
    }
    button, input, select, textarea { font: inherit; }
    button { -webkit-tap-highlight-color: transparent; }
    .app { width: 100%; max-width: var(--max); margin: 0 auto; min-height: 100vh; padding-bottom: 92px; }
    .topbar {
      position: sticky; top: 0; z-index: 10;
      background: linear-gradient(180deg, rgba(44,29,19,.98), rgba(58,38,23,.96)); backdrop-filter: blur(10px);
      border-bottom: 3px solid var(--cyan); color: #f9ead1; padding: 12px 14px 10px;
    }
    .title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    h1 { margin: 0; font-size: 1.58rem; letter-spacing: .02em; color:#fff8e8; text-shadow:0 2px 0 #000; }
    .subtitle { color: #d8c89f; font-size: .84rem; margin-top: 2px; }
    .sync-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 7px 10px; border-radius: 999px; color: var(--muted); font-size: .78rem; white-space: nowrap; background: rgba(255,255,255,.03); }
    .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
    .sync-pill.cloud .sync-dot { background: var(--ok); }
    .sync-pill.error .sync-dot { background: var(--danger); }
    .sync-pill.waiting .sync-dot { background: var(--warn); }
    .time-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .time-actions .full { grid-column: 1 / -1; }
    .button {
      min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: 14px;
      background: linear-gradient(180deg, var(--wood3), var(--wood2)); color: #fff4dc;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 10px 12px; font-weight: 720; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.16);
    }
    .button:active { transform: translateY(1px); }
    .button.primary { background: linear-gradient(180deg, #e2b45a, #9c6426); color: #1a1008; border-color: rgba(255,231,170,.65); }
    .button.secondary { background: linear-gradient(180deg, #285c68, #154552); color: #fff4dc; border-color: rgba(23,216,209,.35); }
    .button.danger { background: var(--danger-bg); border-color: rgba(224,106,85,.35); color: #ffd3ca; }
    .button.ghost { background: transparent; box-shadow: none; }
    .button.small { min-height: 36px; padding: 7px 10px; border-radius: 11px; font-size: .88rem; }
    .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    .summary-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: .88rem; }
    .tag { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.03); color: var(--muted); }

    main { padding: 10px; }
    .screen { display: none; animation: fade .16s ease-out; }
    .screen.active { display: block; }
    @keyframes fade { from { opacity: .5; transform: translateY(2px); } to { opacity: 1; transform: none; } }
    .section-title { margin: 13px 2px 7px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
    .section-title h2 { font-size: 1.02rem; margin: 0; color: #ffd879; letter-spacing: .02em; text-shadow:0 1px 0 rgba(0,0,0,.6); }
    .section-title .hint { color: #d9cda9; font-size: .78rem; }
    .card { background: linear-gradient(180deg, var(--paper), var(--paper2)); border: 2px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 10px; color: var(--ink); }
    .card.compact { padding: 11px; }
    .grid { display: grid; gap: 10px; }
    .grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .stat-grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; }
    .stat-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x proximity; }
    .stat-strip .ability-card { min-width: 88px; scroll-snap-align:start; }
    .ability-card { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align:center; min-height: 82px; cursor: pointer; }
    .ability-card .name { font-size: .72rem; color: var(--muted); font-weight: 800; letter-spacing: .08em; }
    .ability-card .score { font-size: 1.08rem; font-weight: 850; margin-top: 3px; }
    .ability-card .mod { color: var(--gold2); font-weight: 850; margin-top: 2px; }
    .ability-card .base { color: var(--faint); font-size: .68rem; margin-top: 2px; }
    .metric { background: rgba(255,248,224,.48); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 66px; }
    .metric .label { color: var(--muted); font-size: .78rem; font-weight:700; }
    .metric .value { font-size: 1.18rem; font-weight: 850; margin-top: 3px; color:#111; }
    .metric .note { color: var(--muted); font-size: .74rem; margin-top: 3px; }
    .warning { background: var(--warn-bg); border: 1px solid rgba(233,180,84,.33); color: #ffe4a3; border-radius: 16px; padding: 12px; margin-bottom: 12px; }
    .warning.danger { background: var(--danger-bg); border-color: rgba(224,106,85,.4); color: #ffd7d0; }
    .warning h3 { margin: 0 0 7px; font-size: .92rem; }
    .warning ul { margin: 0; padding-left: 20px; }
    .row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
    .row:last-child { border-bottom: 0; }
    .row-title { font-weight: 760; }
    .row-sub { color: var(--muted); font-size: .82rem; margin-top: 2px; line-height: 1.35; }
    .row-value { font-weight: 850; color: #111; white-space: nowrap; }
    .hpbar { height: 9px; width: 100%; background: rgba(0,0,0,.26); border-radius: 999px; overflow: hidden; margin-top: 8px; border: 1px solid rgba(255,255,255,.06); }
    .hpbar > span { display: block; height: 100%; width: 0%; transition: width .18s ease, background .18s ease; }
    .hpbar > span.hp-ok { background: var(--ok); }
    .hpbar > span.hp-warn { background: var(--warn); }
    .hpbar > span.hp-danger { background: var(--danger); }
    .hpbar > span.hp-empty { background: #7c251d; }
    .chip { display: inline-flex; align-items:center; gap: 5px; border-radius: 999px; border: 1px solid var(--line); padding: 4px 8px; color: var(--muted); font-size: .75rem; background: rgba(255,255,255,.03); }
    .chip.ok { color: #cff2c4; border-color: rgba(130,196,108,.38); background: var(--ok-bg); }
    .chip.warn { color: #ffe4a3; border-color: rgba(233,180,84,.38); background: var(--warn-bg); }
    .chip.danger { color: #ffd7d0; border-color: rgba(224,106,85,.38); background: var(--danger-bg); }
    .list-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
      background: rgba(44,29,19,.98); backdrop-filter: blur(10px); border-top: 2px solid var(--cyan);
      display: flex; justify-content: center; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }
    .bottom-nav-inner { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 100%; max-width: var(--max); }
    .navbtn { border: 0; background: transparent; color: var(--faint); border-radius: 12px; padding: 8px 2px; min-height: 50px; font-size: .70rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
    .navbtn span:first-child { font-size: 1.12rem; }
    .navbtn.active { color: #fff4dc; background: rgba(23,216,209,.18); outline:1px solid rgba(23,216,209,.32); }
    .modal-backdrop { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,.64); display:none; align-items:flex-end; justify-content:center; padding: 12px; }
    .modal-backdrop.active { display:flex; }
    .modal { width: 100%; max-width: var(--max); max-height: min(86vh, 820px); overflow:auto; background: linear-gradient(180deg, var(--paper), var(--paper2)); border: 2px solid var(--line-strong); border-radius: 24px 24px 18px 18px; color: var(--ink); box-shadow: 0 28px 80px rgba(0,0,0,.55); padding: 16px; }
    .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
    .modal h2 { margin:0; font-size: 1.1rem; color: var(--gold2); }
    .x { border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); border-radius: 999px; width: 38px; height: 38px; }
    .form-grid { display:grid; gap: 11px; }
    label { display:block; color: var(--muted); font-size:.8rem; margin-bottom: 6px; }
    input, select, textarea { width: 100%; border: 1px solid var(--line-strong); background: #fff7df; color: #160f09; border-radius: 10px; padding: 12px; min-height: 46px; outline: none; }
    select option { background: #fff7df; color: #160f09; }
    select:focus, input:focus, textarea:focus { border-color: rgba(240,207,131,.65); box-shadow: 0 0 0 3px rgba(216,169,75,.12); }
    textarea { min-height: 98px; resize: vertical; }
    input[type="checkbox"] { width: auto; min-height: auto; transform: scale(1.2); margin-right: 8px; }
    .form-actions { display:flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
    .split { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .screen-title { margin: 0 0 10px; display:flex; justify-content:space-between; gap: 10px; align-items:center; }
    .screen-title h2 { margin:0; font-size: 1.15rem; }
    .searchbar { margin: 0 0 12px; }
    .muted { color: var(--muted); }
    .faint { color: var(--faint); }
    .empty { color: var(--muted); text-align:center; padding: 22px 12px; border: 1px dashed var(--line-strong); border-radius: 16px; background: rgba(255,255,255,.02); }
    .portrait { width: 58px; height:58px; border-radius: 15px; object-fit: cover; background: rgba(0,0,0,.24); border: 1px solid var(--line); flex: 0 0 auto; display:flex; align-items:center; justify-content:center; color: var(--faint); font-weight: 900; }
    .npc-row { display:flex; gap: 12px; align-items:flex-start; }
    .nowrap { white-space: nowrap; }
    .code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; padding: 2px 6px; }
    .toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; background: rgba(35, 26, 20, .98); color: #fff4dc; border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 14px; box-shadow: var(--shadow); display:none; max-width: calc(100vw - 28px); text-align:center; }
    .toast.active { display:block; }

    .compact-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .quick-dashboard { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; }
    .quick-dashboard .metric { min-height: 64px; padding:10px; }
    .quick-dashboard .metric .value { font-size: 1.05rem; }
    .warning.info { background: rgba(117,167,215,.14); border-color: rgba(117,167,215,.34); color: #d9ecff; }
    .secret-card { border-color: rgba(224,106,85,.42); background: linear-gradient(180deg, rgba(86,39,32,.72), rgba(45,33,25,.95)); }
    .resource-row { align-items:flex-start; }
    .row-buttons { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; }
    .loadout-board { display:grid; gap:10px; }
    details.loadout-section { background: rgba(0,0,0,.10); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
    details.loadout-section > summary { list-style:none; cursor:pointer; padding:12px; font-weight:850; color:var(--gold2); display:flex; justify-content:space-between; gap:8px; }
    details.loadout-section > summary::-webkit-details-marker { display:none; }
    .slot-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:7px; padding:0 10px 10px; }
    .slot-grid.frontback { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .slot-cell { min-height:64px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.18); color:var(--text); padding:8px; text-align:left; cursor:pointer; }
    .slot-cell.empty { color:var(--faint); border-style:dashed; }
    .slot-cell.unmanned { border-color: rgba(233,180,84,.42); }
    .slot-label { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.03em; }
    .slot-weapon { font-weight:850; font-size:.78rem; margin-top:3px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .slot-meta { color:var(--faint); font-size:.68rem; margin-top:3px; }
    .pull-table { display:grid; gap:7px; }
    .pull-row { display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.14); }
    .pull-row .desc { grid-column:1 / -1; color:var(--muted); font-size:.75rem; line-height:1.35; }
    .mobile-note { font-size:.78rem; color:var(--faint); line-height:1.35; }

    .compact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
    .component-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
    .ship-stat-table { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .stat-table { border:2px solid #14100c; background:var(--paper); }
    .stat-line { display:grid; grid-template-columns: 1fr 54px 80px; border-bottom:1px solid #14100c; min-height:38px; align-items:center; }
    .stat-line:last-child { border-bottom:0; }
    .stat-line > div { padding:6px 8px; border-right:1px solid #14100c; text-align:center; }
    .stat-line > div:last-child { border-right:0; }
    .stat-name { font-weight:900; letter-spacing:.04em; }
    .stat-score { background:rgba(255,255,255,.35); font-size:1.08rem; }
    .stat-mod { font-weight:900; font-size:1.08rem; color:#111; }
    .section-header-bar { background:linear-gradient(180deg, var(--paper3), #b89860); color:#080604; border:2px solid #100b07; border-bottom:0; border-radius:12px 12px 0 0; padding:8px 10px; font-weight:900; text-align:center; font-size:1.05rem; }
    .boxed-section { border:2px solid #100b07; border-radius:0 0 12px 12px; background:var(--paper); padding:10px; margin-bottom:10px; }
    details.compact-board { background:linear-gradient(180deg, var(--paper), var(--paper2)); border:2px solid var(--line-strong); border-radius:14px; margin-bottom:10px; overflow:hidden; color:var(--ink); }
    details.compact-board > summary { list-style:none; cursor:pointer; padding:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:900; }
    details.compact-board > summary::-webkit-details-marker { display:none; }
    details.compact-board .board-body { padding:0 12px 12px; }
    .dead-npc-card { opacity:.74; }
    .filter-row { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:end; margin-bottom:10px; }
    .board-summary-note { font-size:.78rem; color:var(--muted); font-weight:600; }

    @media (max-width: 430px) {
      .stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .split { grid-template-columns: 1fr; }
      .bottom-nav-inner { gap: 1px; }
      .navbtn { font-size: .66rem; }
      .card { padding: 10px; }
      .quick-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .slot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .component-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .ship-stat-table { grid-template-columns:1fr; }
      .slot-grid.frontback { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (min-width: 680px) {
      .modal-backdrop { align-items:center; }
      .modal { border-radius: 22px; }
    }

    /* v4 accessibility and phone-first visual audit overrides */
    :root {
      --bg: #3e301f;
      --bg2: #705a37;
      --wood: #26170f;
      --wood2: #352114;
      --wood3: #6e4b23;
      --paper: #f2e8c9;
      --paper2: #e4d5aa;
      --paper3: #c6a469;
      --ink: #17110b;
      --ink-soft: #342616;
      --muted: #5d4a31;
      --faint: #7a684c;
      --line: rgba(23, 17, 11, .32);
      --line-strong: rgba(23, 17, 11, .62);
      --text: #17110b;
      --gold: #b9842c;
      --gold2: #ffe49a;
      --accent: #0c6774;
      --accent2: #0d5360;
      --danger: #a52a1d;
      --danger-bg: #f5d3c8;
      --ok: #1f7437;
      --ok-bg: #d5ead2;
      --warn: #9c5c0d;
      --warn-bg: #f0dbad;
      --shadow: 0 10px 20px rgba(20, 12, 6, .24);
      --radius: 16px;
      --tap: 48px;
      --max: 1040px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    html { font-size: 17px; }
    body { color: var(--ink); line-height: 1.45; }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 9px 9px; mix-blend-mode: soft-light; }
    h1, h2, h3, .row-title, .button, .navbtn, summary, .value, .stat-name, .stat-mod, .section-header-bar { font-family: Georgia, "Times New Roman", serif; }
    .app { max-width: var(--max); }
    .topbar { border-bottom: 2px solid rgba(255,226,154,.55); background: linear-gradient(180deg, rgba(38,23,15,.99), rgba(51,32,20,.985)); box-shadow: 0 5px 20px rgba(0,0,0,.28); }
    h1 { font-size: clamp(1.85rem, 4vw, 2.55rem); }
    .subtitle { color:#f3e3bf; font-size:.95rem; }
    .sync-pill, .tag { color:#f3e3bf; background:rgba(255,244,220,.10); border-color:rgba(255,226,154,.24); }
    .summary-line { color:#f8ead0; gap:10px; }
    .button { color:#fff8eb; text-shadow:0 1px 1px rgba(0,0,0,.45); border-color: rgba(20,10,5,.45); font-size:1rem; }
    .button.primary { color:#17110b; text-shadow:none; background:linear-gradient(180deg, #f0cf79, #b77d2b); border-color:#f7dfa1; }
    .button.secondary { background:linear-gradient(180deg, #155d68, #0b414d); border-color:#5fb7c1; }
    .button.danger { color:#5f130b; background:#f5d1c3; border-color:#d17f65; text-shadow:none; }
    .button.ghost { color:#fff2d5; background:rgba(255,244,220,.09); border-color:rgba(255,226,154,.22); }
    .button.small { font-size:.95rem; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #ffd86e; outline-offset: 2px; }

    main { padding: 14px 12px; }
    .section-title h2, .screen-title h2 { color:#fff1b8; text-shadow:0 2px 2px rgba(0,0,0,.65); font-size: clamp(1.2rem, 3vw, 1.45rem); }
    .section-title .hint, .mobile-note { color:#f5e8c8; }
    .screen-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
    .card, details.compact-board, .metric { background: linear-gradient(180deg, var(--paper), var(--paper2)); color:var(--ink); border-color:rgba(23,17,11,.55); }
    .card { box-shadow: var(--shadow); }
    .row-title { color:var(--ink); font-size:1.05rem; }
    .row-sub, .note, .board-summary-note, .mobile-note, .desc { color:#4a3822; }
    .row-value, .value { color:#080604; }
    .warning { background:#f3dfba; color:#2a170f; border-color:#b76a42; }
    .warning h3 { color:#2a170f; }
    .warning.danger { background:#f1d1c5; color:#2a0c06; border-color:#a7462c; }
    .warning.info { background:#d7eced; border-color:#19717d; }

    .quick-dashboard, .compact-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
    .component-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
    .npc-grid, .holding-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; align-items:stretch; }
    .holding-section { margin: 14px 0 18px; }
    .holding-section > h3 { color:#fff1b8; text-shadow:0 2px 2px rgba(0,0,0,.55); margin: 8px 2px 10px; }
    .holding-card .hpbar { margin-top:10px; }
    .holding-kind { font-weight:800; color:#624318; }

    .ship-stat-table { display:grid; grid-template-columns: 1fr; gap:10px; }
    .stat-table { border:3px solid #0c0805; background:#f0e5c5; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
    .stat-line { min-height:44px; grid-template-columns: 1fr minmax(48px, 64px) minmax(58px, 72px); }
    .stat-line > div { padding:8px 10px; }
    .stat-name { font-size:1.05rem; }
    .stat-score, .stat-mod { font-size:1.08rem; color:#090705; }

    .hpbar { background:#a99d80; border: 1px solid rgba(23,17,11,.35); height: 11px; }
    .hpbar span.hp-ok { background: linear-gradient(90deg, #20783b, #3b9a4f); }
    .hpbar span.hp-warn { background: linear-gradient(90deg, #b26b13, #dc9a28); }
    .hpbar span.hp-danger { background: linear-gradient(90deg, #8e2018, #d94d37); }
    .hpbar span.hp-empty { background:#6f120d; }

    .loadout-board { gap:12px; }
    details.loadout-section { background: rgba(255,244,220,.10); border-color: rgba(255,226,154,.25); }
    details.loadout-section > summary { color:#fff1b8; font-size:1.08rem; background:rgba(0,0,0,.16); }
    .slot-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px; padding:10px; }
    .slot-grid.side { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .slot-cell { background:#f1e6c5; color:#17110b; border-color:rgba(23,17,11,.46); min-height:72px; box-shadow:0 3px 10px rgba(0,0,0,.14); }
    .slot-cell.empty { background:#e2d2a7; color:#4d3b24; }
    .slot-cell.unmanned { border-color:#b9842c; background:#f4dfae; }
    .slot-label { color:#63481f; font-size:.75rem; }
    .slot-weapon { color:#17110b; font-size:.9rem; }
    .slot-meta { color:#4d3b24; font-size:.76rem; }
    .pull-row { background:#f5ecd0; color:#17110b; border-color:rgba(23,17,11,.35); }
    .pull-row .desc { color:#3c2a18 !important; font-size:.86rem; }

    input, select, textarea { color:#111; background:#fff8e7; border:1px solid rgba(23,17,11,.48); min-height:42px; border-radius:10px; padding:8px 10px; }
    select option { background:#fff8e7; color:#111; }
    label { color:#2a1d10; font-weight:700; }
    .modal { color:var(--ink); background: linear-gradient(180deg, #f7edd1, #dfcea1); }

    .bottom-nav { background:rgba(38,23,15,.98); border-top:2px solid rgba(255,226,154,.52); }
    .navbtn { color:#f1e2bf; min-height:56px; }
    .navbtn.active { color:#fff9e8; background:rgba(15,104,116,.42); }

    @media (min-width: 760px) {
      .ship-stat-table { grid-template-columns: 1fr 1fr; }
      .time-actions { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      html { font-size:16px; }
      .topbar { padding: 12px 10px 9px; }
      main { padding:10px 8px; }
      .time-actions { gap:8px; }
      .button { min-height:48px; padding:10px 9px; }
      .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
      .component-grid .card { padding:9px; }
      .component-grid .row-title { font-size:.98rem; }
      .component-grid .row-sub { font-size:.78rem; }
      .component-grid .button.small { min-height:34px; padding:6px 8px; font-size:.82rem; }
      .npc-grid, .holding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
      .npc-grid .card, .holding-grid .card { padding:10px; }
      .portrait { width:46px; height:46px; }
      .slot-grid.side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 360px) {
      .component-grid, .npc-grid, .holding-grid { grid-template-columns: 1fr; }
    }

    /* v5: readable nautical parchment theme and responsive layout audit */
    :root {
      --bg: #574627;
      --bg2: #7b663d;
      --wood: #20140c;
      --wood2: #2f1d10;
      --paper: #f5edcf;
      --paper2: #e7d9ad;
      --paper3: #c9a563;
      --ink: #130d07;
      --muted: #4b3822;
      --faint: #6c5838;
      --accent: #145b66;
      --accent2: #0d4049;
      --gold2: #fff0b0;
      --line: rgba(22,15,8,.36);
      --line-strong: rgba(22,15,8,.72);
    }
    body { background: linear-gradient(180deg, #7b663d 0%, #4d3c23 42%, #342719 100%); }
    .topbar { border-bottom: 3px solid #b7924e; box-shadow: 0 8px 26px rgba(0,0,0,.36); }
    .summary-line .tag { color:#fff3d0; opacity:1; }
    .button, .navbtn { letter-spacing:.01em; }
    .button.secondary { background: linear-gradient(180deg, #1d6370, #0d414b); color:#fff9e8; }
    .button.primary { background: linear-gradient(180deg, #f5d986, #bd842f); color:#130d07; }
    .card, .metric, details.compact-board { color:#130d07; background: linear-gradient(180deg, #f7eed0, #e4d3a3); }
    .card *, .metric *, details.compact-board * { text-shadow:none; }
    .secret-card { background: linear-gradient(180deg, #5f2e24, #372018); color:#fff1db; border-color:#bf7052; }
    .secret-card .row-title, .secret-card .row-sub, .secret-card .muted, .secret-card .chip { color:#fff1db !important; }
    .warning { font-size:.95rem; }
    .compact-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .component-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .npc-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .holding-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .movement-table { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:8px; }
    .rule-note { margin:0 0 10px; color:var(--ink); font-size:.96rem; line-height:1.35; background:rgba(255,255,255,.32); border:1px solid rgba(53,35,18,.18); border-radius:12px; padding:10px 12px; }
    .mod-card { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:14px; padding:10px; background:rgba(255,255,255,.26); }
    .mod-card.equipped { background:#f7ebbf; border-color:#9e742d; }
    .mod-title { font-weight:850; color:#130d07; }
    .mod-meta { color:#4b3822; font-size:.82rem; margin-top:2px; }
    .mod-description { color:#2f2113; font-size:.87rem; margin-top:6px; line-height:1.35; }
    .mod-list { display:grid; gap:8px; }
    .slot-grid.side { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .slot-cell, .pull-row { background:#f7eed0 !important; color:#130d07 !important; }
    .slot-cell.empty { background:#dfcf9e !important; color:#3b2b18 !important; }
    .slot-cell * { color:inherit; }
    .row-sub, .note, .board-summary-note, .mobile-note, .desc { color:#4b3822; }
    @media (max-width: 600px) {
      .component-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .npc-grid, .holding-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .card .row { align-items:flex-start; }
      .row-buttons { gap:5px; }
      .button.small { font-size:.82rem; }
    }
    @media (max-width: 380px) {
      .component-grid, .npc-grid, .holding-grid { grid-template-columns: 1fr; }
      .bottom-nav-inner { grid-template-columns: repeat(7, 1fr); }
      .navbtn { font-size:.61rem; }
    }

    /* v6 readability, layout, and accessibility audit */
    :root {
      --bg: #5a482d;
      --bg2: #7a633d;
      --wood: #25180f;
      --wood2: #3b2818;
      --wood3: #6b4b24;
      --paper: #f4edcf;
      --paper2: #e4d4a5;
      --paper3: #bd9c5b;
      --ink: #130d07;
      --ink-soft: #2f2417;
      --muted: #5b472c;
      --faint: #6e5a39;
      --line: rgba(19, 13, 7, .28);
      --line-strong: rgba(19, 13, 7, .60);
      --gold: #b6842f;
      --gold2: #fff0b7;
      --cyan: #1f6b76;
      --danger: #a52f22;
      --ok: #1f6f37;
      --warn: #986012;
      --tap: 46px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body {
      color: #130d07;
      background:
        radial-gradient(circle at top left, rgba(244,237,207,.16), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(45,80,84,.16), transparent 28rem),
        linear-gradient(180deg, #7a633d, #4c3b25 45%, #312317);
    }
    h1, h2, h3, .row-title, .button, .stat-name, .stat-mod, .slot-weapon, .mod-title { font-family: Georgia, "Times New Roman", serif; }
    .app { max-width: 920px; background: rgba(40,28,16,.12); }
    .topbar { background: linear-gradient(180deg, #271a10, #352315); border-bottom: 2px solid #8a7041; padding: 16px; }
    h1 { font-size: clamp(2rem, 8vw, 3.6rem); line-height: .95; color: #fff7e6; text-shadow: 0 3px 0 #050302, 0 0 10px rgba(0,0,0,.45); }
    .subtitle { color: #f2e5c5; font-size: 1rem; font-weight: 600; }
    .sync-pill, .tag { color: #f1e2be; background: rgba(255,240,200,.09); border-color: rgba(255,240,200,.24); }
    .summary-line { color: #f1e2be; }
    .button { font-weight: 800; letter-spacing: .01em; }
    .button.primary { color:#160f08; background: linear-gradient(180deg, #f3d778, #b7812c); }
    .button.secondary { background: linear-gradient(180deg, #2f6b78, #184b56); color:#fff9e7; }
    .button.danger { background:#f1d5c9; color:#5e170e; border-color:#b84b38; }
    .button.ghost { color:#fff6d6; background: rgba(30,20,10,.24); border-color: rgba(255,240,200,.22); }
    .button:focus-visible, .navbtn:focus-visible, .slot-cell:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #fff0a8; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(35,83,91,.45); }

    main { padding: 12px 14px 96px; }
    .section-title { margin: 16px 2px 8px; }
    .section-title h2, .screen-title h2, .holding-section > h3 { color:#fff2bb; text-shadow: 0 2px 2px rgba(0,0,0,.65); font-size: clamp(1.15rem, 4.2vw, 1.45rem); }
    .section-title .hint { color:#fff0c7; }
    .card, .metric, details.compact-board { color:#130d07; background: linear-gradient(180deg, #fbf3d3, #e5d5a6); border-color:#3a2917; box-shadow: 0 8px 22px rgba(0,0,0,.24); }
    .metric { min-height: 58px; padding: 9px 10px; }
    .metric .label, label { color:#4b351d; font-weight: 800; }
    .metric .value, .row-value { color:#0b0703; }
    .metric .note, .row-sub, .note, .mobile-note, .desc, .board-summary-note { color:#4b351d; }
    .warning { background:#f2d6c8; color:#211008; border: 2px solid #a65439; }
    .warning h3 { color:#1b0e07; font-size: 1.05rem; }
    .warning li { margin:.22rem 0; }
    .warning.danger { background:#f2d6c8; color:#211008; border-color:#a65439; }
    .warning.info { background:#e8e0bf; color:#171007; border-color:#78613b; }
    .chip { color:#2d1f12; background:#eadbb0; border-color:#8e7344; font-weight: 750; }
    .chip.ok { color:#0d3d1b; background:#cfe7bd; border-color:#52935b; }
    .chip.warn { color:#3a2205; background:#f1d28c; border-color:#b87a20; }
    .chip.danger { color:#5e170e; background:#f3c7b8; border-color:#b84b38; }
    .bottom-nav { border-top: 1px solid #8a7041; background: linear-gradient(180deg, #2d1d12, #20140c); }
    .navbtn { color:#f4e7c6; font-weight: 750; }
    .navbtn.active { background:#284f56; color:#fff8e6; outline:1px solid #8bbbc0; }
    .modal { background: linear-gradient(180deg, #fbf3d3, #e5d5a6); color:#130d07; }
    .modal h2 { color:#1c1209; text-shadow:none; }
    .x { color:#1c1209; background:#efe1b4; border-color:#7c6237; }
    input, select, textarea { background:#fff9e6; color:#130d07; border-color:#6f5a35; }
    select option { background:#fff9e6; color:#130d07; }

    .ship-stat-table { display:none !important; }
    .ship-stat-compact-grid { width:100%; border:2px solid #120c06; background:#f7edca; padding:0; display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:0; cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
    .stat-compact { min-height: 44px; display:grid; grid-template-columns: 1fr; align-content:center; justify-items:center; gap:1px; border-right:1px solid #120c06; padding:6px 4px; color:#080503; }
    .stat-compact:last-child { border-right:0; }
    .stat-compact .stat-name { font-size:.78rem; letter-spacing:.05em; font-weight:900; }
    .stat-compact .stat-score { font-size:1rem; line-height:1; }
    .stat-compact .stat-mod { font-size:1.02rem; line-height:1; }
    .stat-note { color:#f3e7c5; margin:5px 2px 8px; font-size:.76rem; }
    @media (max-width: 430px) {
      .ship-stat-compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .stat-compact:nth-child(3) { border-right:0; }
      .stat-compact:nth-child(-n+3) { border-bottom:1px solid #120c06; }
    }

    .component-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .compact-grid, .quick-dashboard, .npc-grid, .holding-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .screen-title { align-items:center; gap:10px; }

    details.loadout-section { background: rgba(40,28,16,.35); border:1px solid #9b824d; border-radius:16px; overflow:hidden; }
    details.loadout-section > summary { color:#fff4c8; background:linear-gradient(180deg, rgba(45,31,18,.92), rgba(62,45,25,.86)); border-bottom:1px solid rgba(255,240,200,.15); }
    details.loadout-section .chip { color:#2b1d10; background:#e1ca8c; }
    .slot-table-wrap { padding:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .slot-table-head, .slot-table-row { display:grid; grid-template-columns: repeat(4, minmax(112px, 1fr)); gap:8px; min-width: 488px; }
    .slot-table-head { margin-bottom:8px; color:#fff4c8; font-weight:900; text-align:center; }
    .slot-table-row { margin-bottom:8px; }
    .slot-cell { color:#130d07; background:#f4edcf; border:1px solid #8b7345; min-height:64px; }
    .slot-cell.empty { color:#2d2012; background:#ded1a6; border-style:dashed; }
    .slot-cell.unmanned { background:#f5df9d; border-color:#b17b18; }
    .slot-label, .slot-meta { color:#4b351d; }
    .slot-weapon { color:#050302; font-size:.9rem; }
    .pull-row { background:#f5ebc9; border-color:#826a3e; color:#130d07; }
    .pull-row .desc { color:#4b351d !important; }

    details.compact-board > summary { color:#130d07; background: linear-gradient(180deg, #efdfad, #d2b879); }
    details.compact-board > summary span:first-child { color:#130d07; }
    .mod-card { background:#f5ebc9; color:#130d07; border-color:#80663c; }
    .mod-card.equipped { border-color:#33733d; background:#dbeac4; }
    .mod-meta, .mod-description { color:#3e2b16 !important; }
    .secret-card { background:linear-gradient(180deg, #f0d1c3, #d9a895); color:#150b06; border-color:#90472f; }
    .secret-card .row-sub { color:#3d2719 !important; }
    .portrait { background:#e7d7aa; color:#130d07; }
    .empty { color:#4b351d; }

    @media (max-width: 520px) {
      .time-actions { gap:8px; }
      .button { min-height:44px; }
      .button.primary.full { min-height:54px; }
      .compact-grid, .quick-dashboard, .npc-grid, .holding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .card.compact { padding:9px; }
      .row-buttons .button.small { min-height:34px; padding:6px 8px; }
      .metric .value { font-size:1.05rem; }
      .metric .note { font-size:.72rem; }
    }
    @media (max-width: 360px) {
      .compact-grid, .quick-dashboard, .npc-grid, .holding-grid, .component-grid { grid-template-columns: 1fr; }
    }

    /* v8 aesthetic, spacing, and readability pass */
    .topbar { border-bottom: 1px solid rgba(229,205,143,.35); }
    .button .faint { color: rgba(255,244,220,.92); font-weight: 800; }
    .button.primary .faint { color: #4b341d; font-weight: 900; }
    .rule-note.compact-rule { margin: 0 0 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.34); color: #2c1d10; border: 1px solid rgba(25,16,8,.18); font-size: .88rem; }
    .section-title { margin-top: 14px; }
    .screen-title h2, .section-title h2 { color:#fff1be; text-shadow:0 1px 2px #000; }
    .filter-row { background: rgba(36,24,14,.34); border: 1px solid rgba(255,236,178,.22); border-radius: 14px; padding: 10px; }
    .filter-row label { color:#fff1be; font-weight: 850; margin-bottom: 5px; }
    label { color: #2b1c0e; font-weight: 800; }
    main > .screen > label, main > .screen label, .screen label { color:#fff1be; }
    .modal label, .card label, .compact-board label { color:#2b1c0e; }
    select, input, textarea { background:#fff9e8; color:#111; border-color:rgba(20,12,6,.42); }
    select option { background:#fff9e8; color:#111; }
    .compact-board .board-body { padding-top: 8px; }
    .compact-board .compact-board { margin-top: 8px; }
    .subhead { margin: 16px 0 8px; color:#1a1008; font-size: 1.05rem; }
    .mod-help { margin: 0 0 10px; color:#2f2113; background: rgba(255,255,255,.38); border:1px solid rgba(25,16,8,.18); border-radius:12px; padding:9px 10px; font-size:.9rem; }
    .mod-card.owned { background:#eee1b9; border-color:#98733c; }
    .mod-card { align-items:flex-start; }
    .mod-card .button { flex: 0 0 auto; }
    .resource-grid, .quest-grid, .flag-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
    .resource-card { background: linear-gradient(180deg, #f7efcf, #e6d7a8); border: 2px solid rgba(27,18,9,.42); border-radius: 16px; padding: 12px; color:#130d07; box-shadow: 0 5px 14px rgba(0,0,0,.12); }
    .resource-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .resource-card .row-buttons { justify-content:flex-start; margin-top: 10px; }
    .resource-warning { margin-top:8px; color:#743018; background:#f3d5c4; border:1px solid #b66a49; border-radius:10px; padding:6px 8px; font-size:.8rem; }
    .ship-stat-compact-grid { background:#f7efcf; border-color:#120c06; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
    .stat-compact { min-height: 38px; padding: 5px 3px; background: transparent; }
    .stat-compact .stat-name { font-size:.76rem; color:#080503; }
    .stat-compact .stat-score, .stat-compact .stat-mod { background: transparent; color:#080503; font-size:.98rem; line-height:1.05; }
    .stat-note { color:#f8e9bd; text-shadow:0 1px 1px rgba(0,0,0,.7); }
    .slot-table-head { color:#fff1be; }
    .slot-table-row { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .slot-table-wrap { padding: 0 10px 10px; display:grid; gap:8px; }
    @media (max-width: 620px) {
      .resource-grid, .quest-grid, .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .resource-card { padding: 10px; }
      .resource-card .row-buttons .button { flex: 1 1 80px; }
    }
    @media (max-width: 430px) {
      .resource-grid, .quest-grid, .flag-grid { grid-template-columns: 1fr; }
      .ship-stat-compact-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    }

    /* v9 layout density, card readability, and mobile scaling audit */
    .loadout-board { margin-top: 12px; gap: 12px; }
    .loadout-board + details.compact-board,
    details.compact-board + details.compact-board { margin-top: 12px; }
    .screen-title .button-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
    .section-title .button.small { min-height: 36px; padding: 7px 10px; }

    .resource-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .resource-card { min-height: 118px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
    .resource-card .resource-head { align-items:flex-start; }
    .resource-card .row-title { font-size: clamp(1rem, 4.2vw, 1.25rem); line-height:1.15; }
    .resource-card .row-value { font-size: clamp(1rem, 4vw, 1.2rem); }
    .resource-card .resource-meta { color:#3c2b19; font-size:.82rem; line-height:1.25; margin-top:2px; }
    .resource-card .row-buttons { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px; }
    .resource-card .button.small { min-height: 40px; padding:7px 8px; }
    .resource-warning { font-size:.76rem; line-height:1.25; padding:5px 7px; }

    .slot-table-wrap { padding: 10px; overflow-x: visible; }
    .slot-table-head, .slot-table-row { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; gap: 6px; }
    .slot-table-head { font-size:.83rem; margin-bottom:6px; }
    .slot-table-row { margin-bottom:6px; }
    .slot-cell { min-height: 56px; padding: 6px; border-radius: 11px; }
    .slot-label { font-size:.66rem; }
    .slot-weapon { font-size:.78rem; line-height:1.12; -webkit-line-clamp:2; }
    .slot-meta { font-size:.66rem; line-height:1.15; }

    .pull-table { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
    .weapon-summary-card { background:#f7eed0; border:1px solid #826a3e; border-radius:14px; padding:10px; color:#130d07; display:flex; flex-direction:column; gap:8px; }
    .weapon-summary-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
    .weapon-summary-title { font-weight:900; font-size:1.02rem; line-height:1.15; }
    .weapon-summary-pills { display:flex; flex-wrap:wrap; gap:6px; }
    .weapon-summary-facts { display:grid; grid-template-columns: 1fr; gap:5px; font-size:.86rem; color:#362515; }
    .weapon-summary-facts b { color:#130d07; }
    .weapon-summary-special { border-left:4px solid #b9842c; padding-left:8px; color:#352414; font-size:.84rem; line-height:1.3; }

    .flag-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap:10px; }
    .flag-card { background:#f7eed0; border:1px solid #826a3e; border-radius:14px; padding:10px; color:#130d07; display:flex; flex-direction:column; gap:6px; min-height:110px; }
    .flag-card .button { align-self:flex-start; margin-top:auto; }

    .mod-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:10px; }
    .mod-card { display:flex; flex-direction:column; gap:8px; min-height: 150px; }
    .mod-card .mod-action-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }
    .mod-title { font-size:1.05rem; line-height:1.15; }
    .mod-meta { font-size:.78rem; line-height:1.25; }
    .mod-description { font-size:.84rem; line-height:1.32; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .mod-card.equipped .mod-description { -webkit-line-clamp:4; }

    .holding-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .holding-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .holding-card.over-capacity { border-color:#a65439; background:linear-gradient(180deg, #f4ddcf, #e7c2b0); }
    .capacity-warning { color:#671b0f; background:#f4d2c4; border:1px solid #b75a3c; border-radius:10px; padding:6px 8px; font-size:.78rem; line-height:1.25; margin-top:8px; }

    .fleet-form-note { background:#f6eccb; border:1px solid rgba(23,17,11,.28); border-radius:12px; padding:10px; color:#2b1b0c; font-size:.9rem; }

    @media (max-width: 620px) {
      .resource-grid, .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .resource-card { min-height: 112px; padding:9px; }
      .resource-card .row-buttons { gap:6px; }
      .slot-table-head, .slot-table-row { gap:5px; }
      .slot-cell { min-height: 52px; padding:5px; }
      .slot-weapon { font-size:.72rem; }
      .slot-meta { font-size:.62rem; }
      .pull-table { grid-template-columns: 1fr; }
      .mod-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 380px) {
      .resource-grid, .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:7px; }
      .resource-card .button.small { min-height: 36px; font-size:.78rem; }
      .slot-table-head { font-size:.72rem; }
      .slot-weapon { font-size:.68rem; }
      .slot-label, .slot-meta { font-size:.59rem; }
    }

    /* v10 usability polish: sticky modals, sticky filters, compact responsive cards */
    .modal { padding: 0; overflow: auto; }
    .modal-head {
      position: sticky;
      top: 0;
      z-index: 6;
      padding: 14px 16px 12px;
      margin: 0;
      background: linear-gradient(180deg, #fbf3d3, #ead9aa);
      border-bottom: 1px solid rgba(35, 24, 12, .28);
    }
    .modal > div:not(.modal-head), .modal > form, .modal .form-grid, .modal .form-actions { margin-left: 16px; margin-right: 16px; }
    .modal > div:last-child, .modal .form-actions:last-child { margin-bottom: 16px; }
    .modal .x { position: sticky; top: 10px; flex: 0 0 auto; }
    .resource-card { min-height: 104px; }
    .resource-card .row-title-with-badge { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
    .debt-badge { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border-radius:999px; border:1px solid #b9573c; background:#f2d3c5; color:#6e1d10; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }
    .filter-row.sticky-tools {
      position: sticky;
      top: 6px;
      z-index: 9;
      box-shadow: 0 8px 18px rgba(0,0,0,.22);
      backdrop-filter: blur(6px);
    }
    .toolbar-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end; }
    .toolbar-grid.two { grid-template-columns: minmax(0,1fr) auto; }
    .owned-weapon-toolbar { display:flex; justify-content:flex-end; margin:0 0 8px; }
    .weapon-summary-card { min-height: 132px; }
    .weapon-summary-top { align-items:flex-start; }
    .weapon-summary-title { font-size: clamp(.94rem, 2.7vw, 1.05rem); overflow-wrap:anywhere; }
    .weapon-summary-facts { font-size: clamp(.80rem, 2.4vw, .90rem); }
    .weapon-summary-special { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .owned-weapon-card { background:#f6edd0; border:1px solid #826a3e; border-radius:14px; padding:10px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .owned-weapon-card .owned-title { font-weight:900; line-height:1.15; }
    .owned-weapon-card .owned-meta { color:#4b351d; font-size:.84rem; margin-top:4px; }
    .npc-card { display:grid; grid-template-columns: 52px minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:8px 10px; min-height: 190px; }
    .npc-card .portrait { grid-row: 1 / span 2; width:52px; height:52px; border-radius:14px; }
    .npc-main { min-width:0; }
    .npc-title { font-family: Georgia, 'Times New Roman', serif; font-weight:900; font-size:1.05rem; line-height:1.14; overflow-wrap:anywhere; }
    .npc-meta { color:#4b351d; font-size:.84rem; line-height:1.25; margin-top:3px; }
    .npc-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
    .npc-notes { grid-column: 1 / -1; color:#4b351d; font-size:.86rem; line-height:1.28; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:2.2em; }
    .npc-card .list-actions { grid-column: 1 / -1; margin-top:auto; }
    .npc-card .list-actions .button.small { flex:1 1 84px; }
    @media (min-width: 720px) { .pull-table { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 620px) {
      .toolbar-grid { grid-template-columns: 1fr; }
      .toolbar-grid .button { width:100%; }
      .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .resource-card { min-height: 100px; }
      .resource-card .row-title { font-size: .98rem; }
      .resource-card .row-buttons { grid-template-columns: 1fr 1fr; }
      .npc-card { grid-template-columns: 44px minmax(0,1fr); min-height: 170px; padding:9px; }
      .npc-card .portrait { width:44px; height:44px; }
      .npc-title { font-size:.96rem; }
      .npc-meta, .npc-notes { font-size:.78rem; }
      .npc-card .list-actions .button.small { min-height:34px; padding:6px 7px; }
      .weapon-summary-card { min-height:118px; padding:9px; }
      .weapon-summary-pills .chip { font-size:.68rem; padding:3px 6px; }
    }

    /* v11 usability fixes: sticky time toggle, search debounce, compact NPC cards, clearer empty states */
    .summary-line { align-items:center; }
    .time-toggle {
      min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
      border:1px solid rgba(255,226,154,.34); border-radius:999px;
      background:rgba(255,244,220,.10); color:#fff2d6; font-weight:800; cursor:pointer;
    }
    .time-toggle input { min-height:auto; width:18px; height:18px; accent-color:#d4a747; margin:0; }
    .time-toggle span { white-space:nowrap; }
    .empty {
      color:#2b1c0e;
      background:rgba(247,238,208,.72);
      border:1px dashed rgba(45,31,16,.55);
      font-weight:700;
      text-align:center;
    }
    .npc-card {
      display:grid !important;
      grid-template-columns: 46px minmax(0, 1fr) !important;
      grid-template-rows: auto auto 1fr auto !important;
      gap:7px 9px !important;
      min-height: 0 !important;
      padding:10px !important;
      align-content:start;
    }
    .npc-card .portrait {
      grid-row: 1 / span 2 !important;
      width:46px !important;
      height:46px !important;
      border-radius:13px !important;
      font-size:1rem !important;
    }
    .npc-title { font-size: clamp(.92rem, 3.5vw, 1.08rem) !important; line-height:1.08 !important; }
    .npc-meta { font-size: clamp(.72rem, 2.8vw, .84rem) !important; line-height:1.18 !important; margin-top:2px !important; }
    .npc-chips {
      grid-column: 1 / -1;
      display:flex !important;
      flex-wrap:wrap !important;
      gap:5px !important;
      margin-top:2px !important;
    }
    .npc-chips .chip {
      flex:0 1 auto;
      min-width:0;
      max-width:100%;
      justify-content:center;
      font-size: clamp(.63rem, 2.55vw, .78rem) !important;
      padding:3px 7px !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .npc-notes {
      grid-column: 1 / -1 !important;
      min-height:0 !important;
      margin-top:2px;
      font-size: clamp(.72rem, 2.8vw, .84rem) !important;
      line-height:1.24 !important;
      -webkit-line-clamp:2 !important;
    }
    .npc-card .list-actions {
      grid-column: 1 / -1 !important;
      display:grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap:7px !important;
      margin-top:4px !important;
    }
    .npc-card .list-actions .button.small { width:100%; min-height:38px; }
    @media (max-width: 430px) {
      .npc-card { grid-template-columns: 38px minmax(0, 1fr) !important; gap:6px 8px !important; padding:8px !important; }
      .npc-card .portrait { width:38px !important; height:38px !important; border-radius:11px !important; }
      .npc-card .list-actions .button.small { min-height:34px; padding:6px; }
    }

    /* v12 layout and usability refinements */
    .topbar { border-bottom-color: rgba(255, 227, 155, .55); }
    .time-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .time-actions .button { width: 100%; }
    .summary-line { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.2fr) auto; gap:8px; align-items:center; }
    .summary-pill { justify-content:center; min-height: 42px; display:flex; align-items:center; }
    .time-toggle.icon-only { min-height:42px; min-width:52px; justify-content:center; padding: 8px 12px; }
    .time-toggle.icon-only span { font-size: 1.15rem; line-height: 1; }
    .time-toggle.icon-only input { margin-right:0; }
    .stores-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .resource-card-core { border-color: rgba(185,132,44,.66); box-shadow: inset 0 0 0 1px rgba(255,226,154,.24); }
    .empty.empty-compact { max-width: 280px; justify-self:start; padding: 16px 14px; min-height: 0; }
    .compact-grid > .empty.empty-compact { grid-column: 1 / -1; }
    .loadout-board { margin-top: 12px; }
    .quest-overview { margin-bottom: 10px; }
    .quest-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:10px; }
    .quest-card { display:grid; grid-template-rows: auto auto 1fr auto; gap:10px; }
    .quest-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .quest-meta { display:flex; flex-wrap:wrap; gap:6px; }
    .quest-notes { line-height:1.45; min-height: 62px; }
    .quest-card .list-actions .button.small { flex:1 1 92px; }
    .resource-grid, .quest-grid, .flag-grid, .npc-grid, .holding-grid { align-items:start; }
    .more-dashboard { margin-bottom: 10px; }
    .more-board-grid { display:grid; gap:10px; }
    .event-card, .consumable-card { background: rgba(255,255,255,.22); border:1px solid var(--line); border-radius:12px; padding:10px; }
    .calendar-grid, .consumable-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
    .form-grid.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.form-grid-2 > .span-2 { grid-column: 1 / -1; }
    .modal .form-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(242,232,201,.2), rgba(228,213,170,.95)); padding-top: 10px; margin-top: 14px; }
    .owned-weapon-toolbar { margin-bottom: 10px; display:flex; justify-content:flex-start; }
    .pull-table { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:10px; }
    .weapon-summary-card { height:100%; }
    #screen-more .compact-board .board-body { padding-top: 6px; }
    #screen-more .row { align-items:flex-start; }
    #screen-more .list-actions { margin-top: 8px; }
    .board-body .resource-grid, .board-body .calendar-grid { margin-top: 4px; }
    @media (max-width: 560px) {
      .summary-line { grid-template-columns: 1fr 1fr auto; }
      .summary-pill { font-size: .82rem; padding-inline: 8px; }
      .form-grid.form-grid-2 { grid-template-columns: 1fr 1fr; }
      .pull-table { grid-template-columns: 1fr; }
      .quest-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 420px) {
      .summary-line { grid-template-columns: 1fr 1fr auto; gap: 6px; }
      .summary-pill { font-size: .75rem; }
      .time-actions .button { font-size: .95rem; }
      .form-grid.form-grid-2 { grid-template-columns: 1fr; }
      .form-grid.form-grid-2 > .span-2 { grid-column: auto; }
      .stores-summary-grid { grid-template-columns: 1fr 1fr; }
      .resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .resource-card { min-height: 0; }
    }

    /* v13 first-visit crew selection */
    .player-gate {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,226,154,.16), transparent 34rem),
        rgba(18, 11, 6, .82);
      backdrop-filter: blur(8px);
    }
    .player-gate.active { display:flex; }
    .player-panel {
      width: min(100%, 560px);
      max-height: min(92vh, 760px);
      overflow: auto;
      background: linear-gradient(180deg, #f6edd2, #e6d4a6);
      border: 2px solid rgba(23,17,11,.7);
      border-radius: 22px;
      box-shadow: 0 24px 70px rgba(0,0,0,.55);
      color: #17110b;
      padding: 20px 18px;
    }
    .gate-crest { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
    .gate-crest svg { width:30px; height:30px; stroke:#7a5a2c; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
    .player-panel h2 { margin:0; font-size: clamp(1.35rem, 5vw, 1.7rem); line-height:1.05; }
    .player-panel .row-sub, .gate-help { color:#5a4527; font-size:.92rem; line-height:1.4; margin:0 0 14px; }
    .gate-divider {
      display:flex; align-items:center; gap:10px;
      margin: 4px 0 12px;
      color:#8a6c3c; font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
    }
    .gate-divider::before, .gate-divider::after { content:""; height:1px; flex:1; background:rgba(122,90,44,.4); }
    .player-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin: 0;
    }
    .player-choice {
      min-height: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      border: 2px solid rgba(23,17,11,.32);
      border-radius: 14px;
      background: linear-gradient(180deg, #fff6da, #e7d4a0);
      color:#15100b;
      padding: 15px 10px;
      cursor:pointer;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 900;
      font-size: 1.12rem;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
      transition: border-color .12s ease, background .12s ease, transform .06s ease;
    }
    .player-choice:focus-visible { outline: 4px solid rgba(12,103,116,.45); outline-offset: 2px; }
    .player-choice:hover { border-color: rgba(12,103,116,.7); }
    .player-choice:active { transform: translateY(1px); }
    .player-choice.selected { border-color: rgba(12,103,116,.85); background: linear-gradient(180deg, #e5f1df, #cfe4c1); }
    .player-help {
      margin-top: 14px;
      display:flex; align-items:center; gap:8px;
      border-radius: 12px;
      background: rgba(12,103,116,.09);
      border:1px solid rgba(12,103,116,.22);
      padding:9px 11px;
      color:#2d2114;
      font-size:.84rem;
    }
    .player-help svg { width:16px; height:16px; stroke:#136777; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
    @media (max-width: 360px) {
      .player-panel { padding: 16px 14px; border-radius: 18px; }
      .player-choice { padding: 13px 8px; font-size: 1.04rem; }
    }

    /* v16 loadout readability fixes */
    details.compact-board[open] > .board-body,
    details.loadout-section[open] > .slot-grid,
    details.loadout-section[open] > .slot-table-wrap {
      padding-top: 12px;
    }
    details.compact-board > summary,
    details.loadout-section > summary {
      border-bottom: 1px solid rgba(23, 17, 11, .20);
    }
    .compact-board .board-body > .pull-table,
    .compact-board .board-body > .flag-grid,
    .compact-board .board-body > .mod-help,
    .compact-board .board-body > .owned-weapon-toolbar {
      margin-top: 4px;
    }
    .mod-category { margin-top: 10px; }
    .mod-category .board-body { padding-top: 10px !important; }
    .subhead { margin: 16px 0 8px; }
    .mod-list { display: grid; gap: 10px; }

    .pull-table { gap: 12px; }
    .weapon-summary-card {
      min-height: 0;
      height: 100%;
      background: linear-gradient(180deg, #f8efd2, #ede0b8);
      border: 1px solid #8b7245;
      border-radius: 14px;
      padding: 10px;
      color: #130d07;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .weapon-summary-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      align-items: start;
    }
    .weapon-summary-title {
      font-weight: 900;
      font-size: clamp(.90rem, 2.4vw, 1.02rem);
      line-height: 1.12;
      overflow-wrap: anywhere;
    }
    .weapon-summary-pills {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
    }
    .weapon-summary-pills .chip { white-space: nowrap; font-size: .76rem; padding: 4px 8px; }
    .weapon-summary-facts {
      display: grid;
      gap: 6px;
      font-size: clamp(.80rem, 2.25vw, .90rem);
      color: #2b1d0f;
      line-height: 1.28;
    }
    .weapon-summary-facts b { color:#130d07; }
    .weapon-summary-special {
      border-left: 4px solid #b9842c;
      padding: 6px 8px;
      background: rgba(255,255,255,.32);
      border-radius: 7px;
      color: #2f2113;
      font-size: .84rem;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (min-width: 900px) {
      .pull-table { grid-template-columns: repeat(3, minmax(0,1fr)); }
    }
    @media (min-width: 620px) and (max-width: 899px) {
      .pull-table { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 520px) {
      .weapon-summary-pills .chip { font-size: .70rem; padding: 3px 7px; }
      .weapon-summary-title { font-size: .88rem; }
    }

    /* v17 card uniformity, catalogue cards, and modal form cleanup */
    .resource-grid, .npc-grid, .flag-grid, .holding-grid, .quest-grid, .compact-grid {
      align-items: stretch !important;
    }
    .resource-card, .npc-card, .flag-card, .holding-card, .quest-card, .metric {
      height: 100%;
    }
    .resource-card, .npc-card, .quest-card, .holding-card {
      display: flex;
      flex-direction: column;
    }
    .resource-card .row-buttons,
    .npc-card .list-actions,
    .quest-card .list-actions,
    .holding-card .list-actions {
      margin-top: auto;
    }
    .resource-grid {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .npc-grid {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    @media (max-width: 520px) {
      .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .npc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .npc-card { min-height: 0 !important; }
    }
    @media (max-width: 360px) {
      .npc-grid { grid-template-columns: 1fr; }
    }
    .weapon-catalogue-grid {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
    }
    .weapon-catalogue-card {
      background: linear-gradient(180deg, #fff9e8, #eadcb4);
      border: 1px solid #826a3e;
      border-radius: 14px;
      padding: 10px;
      color:#140d07;
      display:grid;
      gap:8px;
      min-height: 140px;
    }
    .weapon-catalogue-head {
      display:grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap:8px;
      align-items:start;
    }
    .weapon-catalogue-title {
      font-weight:900;
      font-size: clamp(.96rem, 2.5vw, 1.08rem);
      line-height:1.12;
      overflow-wrap:anywhere;
    }
    .weapon-catalogue-facts {
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:7px;
      font-size:.84rem;
      line-height:1.25;
    }
    .weapon-catalogue-fact {
      background: rgba(255,255,255,.44);
      border:1px solid rgba(31,22,12,.18);
      border-radius:10px;
      padding:6px 8px;
    }
    .weapon-catalogue-fact b {
      display:block;
      color:#6a4a1e;
      text-transform:uppercase;
      font-size:.70rem;
      letter-spacing:.03em;
    }
    .weapon-catalogue-special {
      border-left:4px solid #b9842c;
      padding:7px 9px;
      background: rgba(255,255,255,.34);
      border-radius:8px;
      line-height:1.3;
      font-size:.84rem;
    }

    .weapon-summary-top {
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: start;
    }
    .weapon-summary-pills {
      justify-content: flex-end;
      flex-wrap: wrap;
      max-width: 92px;
    }
    .weapon-summary-title {
      word-break: normal;
      overflow-wrap: anywhere;
      hyphens: auto;
    }
    @media (max-width: 430px) {
      .weapon-summary-top { grid-template-columns: 1fr !important; }
      .weapon-summary-pills { max-width: none; justify-content:flex-start; }
    }

    .form-grid.form-grid-2, .modal-form-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .span-2 { grid-column: 1 / -1; }
    .modal-note {
      background:#fff6d9;
      border:1px solid rgba(23,17,11,.22);
      border-radius:12px;
      padding:10px;
      color:#2b1b0c;
      line-height:1.35;
    }
    .modal-section-title {
      grid-column:1 / -1;
      font-weight:900;
      color:#4b301c;
      border-bottom:1px solid rgba(23,17,11,.20);
      padding-top:4px;
      padding-bottom:4px;
    }
    @media (max-width: 440px) {
      .form-grid.form-grid-2, .modal-form-grid { grid-template-columns: 1fr 1fr; }
      .modal-form-grid .span-2, .form-grid.form-grid-2 .span-2 { grid-column: 1 / -1; }
      .weapon-catalogue-grid { grid-template-columns: 1fr; }
      .weapon-catalogue-facts { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 340px) {
      .form-grid.form-grid-2, .modal-form-grid { grid-template-columns: 1fr; }
      .span-2 { grid-column: auto; }
    }

    .check-row { display:flex; align-items:center; gap:8px; min-height:46px; padding:10px 12px; border:1px solid rgba(23,17,11,.20); border-radius:10px; background:#fff7df; color:#24180f; }
    .check-row input { margin:0; }

    /* v18 loadout polish: modification cards, unmanned slot state, log readability */
    .slot-cell.unmanned {
      background: linear-gradient(180deg, #f6df9f, #e6c86e) !important;
      border-color: #9e6d16 !important;
      box-shadow: inset 0 0 0 1px rgba(255,245,205,.5);
    }
    .slot-cell.can-man {
      outline: 2px solid rgba(162, 74, 34, .55);
      outline-offset: -3px;
    }
    .slot-cell.can-man .slot-meta::after {
      content: ' • spare crew available';
      color: #6d1f0d;
      font-weight: 800;
    }

    .mod-list {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .mod-card {
      background: linear-gradient(180deg, #fff8dc, #eadbb1) !important;
      border: 1px solid #826a3e !important;
      border-radius: 15px !important;
      padding: 11px !important;
      color: #130d07 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 9px !important;
      min-height: 0 !important;
      box-shadow: 0 2px 0 rgba(64,42,20,.08);
    }
    .mod-card.equipped {
      background: linear-gradient(180deg, #e8f2d7, #d4e7bf) !important;
      border-color: #4f8746 !important;
    }
    .mod-card.owned:not(.equipped) {
      background: linear-gradient(180deg, #f4e8c4, #e6d2a2) !important;
      border-color: #98733c !important;
    }
    .mod-card-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }
    .mod-title {
      font-weight: 900;
      font-size: clamp(.95rem, 2.4vw, 1.08rem) !important;
      line-height: 1.12 !important;
      overflow-wrap: anywhere;
    }
    .mod-facts {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }
    .mod-fact {
      background: rgba(255,255,255,.42);
      border: 1px solid rgba(31,22,12,.18);
      border-radius: 10px;
      padding: 6px 8px;
      font-size: .78rem;
      line-height: 1.22;
      min-width: 0;
    }
    .mod-fact b, .mod-effect b {
      display:block;
      color:#6a4a1e;
      text-transform:uppercase;
      font-size:.68rem;
      letter-spacing:.03em;
      margin-bottom:2px;
    }
    .mod-effect {
      border-left: 4px solid #b9842c;
      background: rgba(255,255,255,.34);
      border-radius: 8px;
      padding: 8px 9px;
      font-size: .84rem;
      line-height: 1.32;
    }
    .mod-description {
      color:#3d2d19 !important;
      font-size: .82rem !important;
      line-height: 1.32 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    .mod-action-row {
      display:flex !important;
      justify-content:flex-end !important;
      align-items:center !important;
      margin-top:auto !important;
    }

    .log-grid {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
    }
    .log-card {
      background: linear-gradient(180deg, #fff8dc, #eadbb1);
      border: 1px solid #826a3e;
      border-radius: 14px;
      padding: 10px;
      color:#130d07;
      display:grid;
      gap:7px;
    }
    .log-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }
    .log-action { font-weight:900; line-height:1.15; overflow-wrap:anywhere; }
    .log-time { color:#5d4a31; font-size:.78rem; }
    .log-details { display:grid; gap:6px; }
    .log-fact { background:rgba(255,255,255,.40); border:1px solid rgba(31,22,12,.18); border-radius:10px; padding:6px 8px; font-size:.78rem; line-height:1.25; }
    .log-fact b { display:block; color:#6a4a1e; text-transform:uppercase; font-size:.66rem; letter-spacing:.03em; }
    .log-fact span { overflow-wrap:anywhere; }
    .empty.empty-centered {
      justify-self: stretch;
      max-width: none;
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
      min-height: 72px;
    }
    .owned-weapon-toolbar + .compact-grid .empty-centered { grid-column: 1 / -1; }
    @media (max-width: 520px) {
      .mod-list { grid-template-columns: 1fr; }
      .mod-facts { grid-template-columns: 1fr 1fr; }
      .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .log-card { padding: 8px; gap: 6px; border-radius: 12px; }
      .log-head { gap: 5px; }
      .log-action { font-size: .82rem; }
      .log-time { font-size: .66rem; }
      .log-fact { padding: 5px 6px; font-size: .68rem; border-radius: 8px; }
      .log-fact b { font-size: .58rem; }
      .slot-cell.can-man .slot-meta::after { content: ' • crew ready'; }
    }

    /* v19 card polish: ship mods, quests, log cap, false-flag form spacing */
    .mod-card { min-width: 0 !important; overflow: hidden; }
    .mod-card-head { min-width: 0; }
    .mod-card-head .chip { flex: 0 0 auto; white-space: nowrap; }
    .mod-title { overflow-wrap: anywhere; word-break: normal; }
    .mod-fact { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
    .mod-fact, .mod-effect, .mod-description { min-width: 0; }
    @media (max-width: 720px) {
      .mod-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 410px) {
      .mod-card-head { grid-template-columns: 1fr; }
      .mod-card-head .chip { justify-self: start; }
      .mod-facts { grid-template-columns: 1fr; }
    }

    .quest-card {
      grid-template-rows: auto auto auto auto !important;
      align-content: start;
    }
    .quest-card .list-actions { margin-top: 10px !important; }
    .quest-notes {
      min-height: 0 !important;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (max-width: 520px) {
      .quest-notes { -webkit-line-clamp: 2; }
    }

    .modal .modal-form-grid { padding-top: 14px; }
    .modal-form-grid > .check-row {
      align-self: end;
      min-height: 48px;
      margin-top: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-form-grid > .check-row input { flex: 0 0 auto; }

    .log-limit-note {
      font-size: .76rem;
      color: #5d4a31;
      margin: 0 0 8px;
    }

    /* v20 screen real-estate audit: compact rows, predictable cards, and anti-clipping defaults */
    .card, .metric, .resource-card, .quest-card, .npc-card, .holding-card, .mod-card, .weapon-summary-card, .slot-cell { min-width: 0; overflow-wrap: anywhere; }
    .button, .chip, .tag { white-space: nowrap; }
    .clamp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .summary-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap:8px; margin-bottom:10px; align-items:stretch; }
    .summary-pill-card { background: linear-gradient(180deg, rgba(255,248,224,.72), rgba(228,213,170,.82)); border:1px solid var(--line); border-radius:12px; padding:8px 10px; min-height:58px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
    .summary-pill-card b { font-size: clamp(.72rem, 2.2vw, .86rem); color: var(--muted); }
    .summary-pill-card span { font-weight:900; font-size: clamp(.95rem, 3.5vw, 1.15rem); color:#080604; overflow-wrap:anywhere; }
    .summary-pill-card small { color: var(--muted); font-size: clamp(.66rem, 2.1vw, .76rem); line-height:1.15; }
    .compact-summary { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
    .movement-board > summary span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .movement-rows { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
    .movement-row { display:flex; flex-direction:column; gap:2px; padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:rgba(255,248,224,.48); min-height:64px; }
    .movement-row b { color:var(--muted); font-size:.74rem; font-weight:800; overflow-wrap:break-word; }
    .movement-row span { font-size:1.08rem; font-weight:850; color:var(--ink); overflow-wrap:break-word; }
    .movement-row small { color:var(--muted); font-size:.74rem; line-height:1.28; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .component-table { padding:0; overflow:hidden; }
    .component-table-head, .component-row { display:grid; grid-template-columns: minmax(84px,1.1fr) 44px minmax(120px,1.4fr) minmax(148px,auto); gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); }
    .component-table-head { background:rgba(122,96,52,.22); font-weight:900; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
    .component-row:last-child { border-bottom:0; }
    .component-name { min-width:0; display:flex; flex-direction:column; gap:1px; }
    .component-name b { font-size:clamp(.9rem, 3.2vw, 1.05rem); overflow-wrap:anywhere; }
    .component-name small, .component-hp .hp-text { color:var(--muted); font-size:.72rem; }
    .component-ac { text-align:center; font-weight:900; }
    .component-hp { min-width:0; }
    .component-actions { display:flex; gap:5px; justify-content:flex-end; flex-wrap:nowrap; }
    .button.mini { min-height:32px; padding:5px 8px; border-radius:9px; font-size:.78rem; }
    .crew-compact { display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; align-items:center; }
    .crew-line { background:rgba(255,255,255,.18); border:1px solid var(--line); border-radius:12px; padding:8px; min-width:0; display:flex; flex-direction:column; }
    .crew-line span { font-size:1rem; font-weight:900; }
    .crew-line small { color:var(--muted); line-height:1.2; }
    .quest-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .quest-card { min-height:0; grid-template-rows:auto auto auto; gap:8px; }
    .quest-head { align-items:flex-start; }
    .quest-title-block { min-width:0; }
    .quest-meta-line { overflow-wrap:anywhere; }
    .quest-notes { min-height:0 !important; line-height:1.35; }
    .quest-card .list-actions { margin-top:2px; }
    .completed-card { opacity:.82; }
    .completed-card .button.secondary { background:linear-gradient(180deg,#285c68,#154552); }
    .compact-list, .timeline-list { display:grid; gap:7px; }
    .compact-list-row, .timeline-row { display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.20); min-width:0; }
    .compact-list-row b, .timeline-row b { display:block; min-width:0; overflow-wrap:anywhere; font-size:clamp(.88rem, 2.8vw, 1rem); }
    .compact-list-row small, .timeline-row small { display:block; color:var(--muted); font-size:.75rem; line-height:1.25; }
    .row-mini-actions { display:flex; gap:5px; }
    .timeline-date { width:42px; height:42px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(184,132,46,.18); border:1px solid var(--line); font-weight:900; }
    .timeline-date small { font-size:.64rem; }
    .mod-card-compact { display:grid; grid-template-rows:auto auto auto auto; gap:8px; }
    .mod-microfacts { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:6px; }
    .mod-microfacts span { background:rgba(255,255,255,.25); border:1px solid var(--line); border-radius:10px; padding:6px; font-size:clamp(.72rem, 2.4vw, .84rem); line-height:1.18; min-width:0; overflow-wrap:anywhere; }
    .mod-effect { line-height:1.3; }
    .mod-description { display:none; }
    .mini-details { border:1px solid var(--line); border-radius:10px; padding:7px 9px; background:rgba(255,255,255,.17); }
    .mini-details summary { cursor:pointer; font-weight:800; color:var(--muted); }
    .mini-details div { margin-top:6px; line-height:1.35; }
    .mod-list.compact-mod-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items:stretch; }
    .mod-card .button { width:max-content; max-width:100%; }
    @media (max-width: 560px) {
      .component-table-head { display:none; }
      .component-row { grid-template-columns: minmax(74px, .9fr) 36px minmax(96px, 1fr); grid-template-areas:'name ac hp' 'actions actions actions'; gap:6px; padding:8px; }
      .component-name { grid-area:name; }
      .component-ac { grid-area:ac; }
      .component-hp { grid-area:hp; }
      .component-actions { grid-area:actions; justify-content:stretch; }
      .component-actions .button { flex:1 1 0; }
      .crew-compact { grid-template-columns: 1fr; }
      .compact-list-row, .timeline-row { grid-template-columns: minmax(0,1fr) auto; }
      .row-mini-actions { grid-column:1 / -1; }
      .row-mini-actions .button { flex:1 1 0; }
      .mod-list.compact-mod-list { grid-template-columns:1fr; }
      .mod-microfacts { grid-template-columns: repeat(3, minmax(0,1fr)); }
    }
    @media (max-width: 390px) {
      .component-row { grid-template-columns: minmax(70px,.9fr) 32px minmax(80px,1fr); }
      .button.mini { font-size:.72rem; padding:5px 6px; }
      .summary-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .compact-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .mod-microfacts { grid-template-columns:1fr; }
    }

    /* v21 full real-estate and clipping audit pass */
    html { font-size: 16px; }
    *, *::before, *::after { box-sizing: border-box; }
    .card,.metric,.resource-card,.quest-card,.npc-card,.holding-card,.mod-card,.weapon-summary-card,.slot-cell,.timeline-row,.compact-list-row,.weapon-catalogue-card,.component-row{
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: normal;
    }
    .modal-backdrop {
      align-items: flex-start !important;
      overflow: auto !important;
      padding-top: max(10px, env(safe-area-inset-top)) !important;
      padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    .modal {
      margin-top: 0 !important;
      max-height: calc(100dvh - 22px) !important;
      overflow: auto !important;
      overscroll-behavior: contain;
    }
    .modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
    .modal-form-grid, .form-grid.form-grid-2 { align-items: start; }
    .modal-form-grid input, .modal-form-grid select, .modal-form-grid textarea { min-width: 0; }
    .weapon-catalogue-title,.weapon-summary-title,.mod-title{
      font-size: clamp(.88rem, 2.35vw, 1rem) !important;
      line-height: 1.12 !important;
      overflow-wrap: anywhere !important;
    }
    .weapon-catalogue-facts{
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 6px !important;
    }
    .weapon-catalogue-fact{
      min-height: 0 !important;
      justify-content: flex-start !important;
      padding: 6px 7px !important;
      overflow-wrap: anywhere;
    }
    .weapon-catalogue-special,.weapon-summary-special{
      max-height: none !important;
      overflow: visible !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
      font-size: clamp(.76rem, 2.15vw, .84rem) !important;
    }
    @media (max-width: 560px) {
      .weapon-catalogue-facts{ grid-template-columns: 1fr 1fr !important; }
    }
    .weapon-summary-card { gap: 7px !important; }
    .weapon-summary-top { grid-template-columns: minmax(0,1fr) auto !important; align-items:start !important; }
    .weapon-summary-pills { max-width: none !important; justify-content: flex-end !important; }
    .weapon-summary-pills .chip { font-size: clamp(.66rem, 1.9vw, .74rem) !important; padding: 3px 7px !important; }
    .weapon-summary-facts { gap: 4px !important; font-size: clamp(.76rem, 2.1vw, .86rem) !important; }
    .mini-details summary { font-size: clamp(.82rem, 2.2vw, .92rem) !important; line-height: 1.2 !important; }
    .mini-details div { font-size: clamp(.78rem, 2.2vw, .86rem) !important; line-height: 1.32 !important; color:#3d2d19 !important; }
    .mod-effect { font-size: clamp(.78rem, 2.15vw, .86rem) !important; line-height: 1.3 !important; }
    .mod-microfacts span, .mod-fact { font-size: clamp(.68rem, 1.9vw, .78rem) !important; }
    .timeline-row {
      grid-template-columns: 48px minmax(0,1fr) auto !important;
      gap: 8px !important;
      align-items: center !important;
      padding: 7px 8px !important;
    }
    .timeline-main { min-width:0; text-align:left; justify-self:stretch; }
    .timeline-main b { text-align:left; font-size: clamp(.88rem, 2.45vw, 1rem) !important; line-height: 1.16 !important; }
    .timeline-main small { text-align:left; }
    .timeline-row .button { width:auto; min-width: 58px; justify-self:end; }
    .timeline-date { width:42px !important; height:42px !important; flex:0 0 auto; }
    @media (max-width: 520px) {
      .timeline-row { grid-template-columns: 46px minmax(0,1fr) auto !important; }
      .timeline-row .button { grid-column:auto; min-width: 54px; padding-inline: 8px; }
    }
    @media (max-width: 380px) {
      .timeline-row { grid-template-columns: 42px minmax(0,1fr); }
      .timeline-row .button { grid-column: 2; justify-self: start; min-width: 74px; }
    }
    .component-table-head, .component-row {
      grid-template-columns: minmax(82px,1.05fr) 58px minmax(112px,1.35fr) minmax(136px,auto) !important;
    }
    .component-ac {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:3px;
      font-size: clamp(.78rem, 2.2vw, .90rem);
      border:1px solid rgba(31,22,12,.20);
      border-radius: 9px;
      background:rgba(255,255,255,.28);
      min-height:30px;
      padding:4px 6px;
    }
    .component-ac .ac-label { color:#6a4a1e; font-size:.68em; font-weight:900; letter-spacing:.03em; }
    .component-ac .ac-value { font-weight:900; color:#0c0804; }
    .component-hp .hp-text { display:flex; justify-content:space-between; gap:8px; font-size: .76rem !important; }
    .component-actions .button { min-width: 52px; }
    @media (max-width: 560px) {
      .component-row {
        grid-template-columns: minmax(86px,.95fr) 58px minmax(100px,1.2fr) !important;
        grid-template-areas:'name ac hp' 'actions actions actions' !important;
      }
      .component-actions { gap:6px !important; }
      .component-actions .button { min-width:0; padding-inline:6px; }
    }
    .holding-card.island-card { display:grid !important; grid-template-rows:auto auto auto; gap:8px; }
    .holding-card.island-card .island-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }
    .island-facts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .island-chip { border:1px solid var(--line); border-radius:999px; padding:4px 8px; background:rgba(255,255,255,.34); font-weight:800; font-size:.78rem; color:#3b2a16; }
    .island-notes { font-size: clamp(.78rem, 2.15vw, .86rem); line-height:1.3; color:#4b351d; }
    .crew-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
    @media (min-width: 720px) { .crew-form-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (max-width: 360px) { .crew-form-grid { grid-template-columns: 1fr; } }
    .quest-card { min-height: 0 !important; }
    .quest-card .list-actions .button { flex: 1 1 82px; }
    @media (max-width: 520px) {
      .quest-card .list-actions { gap:6px !important; }
      .quest-card .list-actions .button { min-height: 36px; padding-inline:8px; }
    }

    /* v22 refinement: non-sticky filters, balanced modal placement, compact ship mods, non-emoji nav glyphs */
    .filter-row,
    .filter-row.sticky-tools {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .navbtn .nav-symbol {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 900;
      font-size: 1.16rem;
      line-height: 1;
      color: inherit;
    }

    .modal-backdrop {
      align-items: center !important;
      justify-content: center !important;
      padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
    }
    .modal {
      margin: 0 auto !important;
      max-height: min(92dvh, 900px) !important;
      width: min(720px, calc(100vw - 20px));
    }
    @media (max-height: 680px) {
      .modal-backdrop { align-items: flex-start !important; }
      .modal { max-height: calc(100dvh - 20px) !important; }
    }

    .mod-list,
    .mod-list.compact-mod-list {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
      gap: 9px !important;
      align-items: stretch !important;
    }
    .mod-card.mod-card-compact {
      padding: 9px 10px !important;
      gap: 7px !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: auto auto auto auto;
      align-content: start;
    }
    .mod-card-head-v22 {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 8px !important;
      align-items: start !important;
    }
    .mod-badges {
      display:flex;
      flex-wrap:wrap;
      gap:5px;
      justify-content:flex-end;
      align-items:flex-start;
      min-width:0;
      max-width: 100%;
    }
    .mod-badges .chip {
      min-height: 24px;
      padding: 3px 7px;
      font-size: .74rem;
      line-height: 1.1;
      white-space: nowrap;
    }
    .mod-use-chip { background: #f3e4b7; }
    .mod-title {
      font-size: clamp(.95rem, 2.2vw, 1.06rem) !important;
      line-height: 1.12 !important;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .mod-inline-meta {
      display:flex;
      flex-wrap:wrap;
      gap: 5px;
      color:#4b351d;
      font-size: clamp(.72rem, 2vw, .82rem);
      line-height:1.15;
    }
    .mod-inline-meta span {
      border: 1px solid rgba(31,22,12,.18);
      background: rgba(255,255,255,.33);
      border-radius: 999px;
      padding: 3px 7px;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .mod-card .mod-effect {
      padding: 7px 8px !important;
      font-size: clamp(.78rem, 2.15vw, .88rem) !important;
      line-height: 1.25 !important;
      min-height: 0 !important;
      display: block;
    }
    .mod-card .mod-effect b {
      display:inline !important;
      margin-right: 5px;
      font-size: .68rem;
    }
    .mod-card-footer {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-top: auto;
      min-width:0;
    }
    .mod-card-footer .button {
      flex:0 0 auto;
      min-height: 36px;
      padding-block: 6px;
    }
    .mini-details.mod-lore {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      font-size: clamp(.76rem, 2.1vw, .86rem) !important;
    }
    .mini-details.mod-lore > summary {
      min-height: 34px;
      padding: 5px 8px;
      border-radius: 9px;
      background: rgba(255,255,255,.26);
    }
    .mini-details.mod-lore > div {
      font-size: clamp(.76rem, 2.1vw, .86rem) !important;
      line-height: 1.28 !important;
      padding-top: 6px;
    }
    @media (max-width: 430px) {
      .mod-list, .mod-list.compact-mod-list { grid-template-columns: 1fr !important; }
      .mod-card-head-v22 { grid-template-columns: 1fr !important; }
      .mod-badges { justify-content:flex-start; }
      .mod-card-footer { align-items:flex-start; }
    }

    /* v23 NPC portrait lightbox and image-scaling safeguards */
    .portrait-button {
      appearance: none;
      padding: 0 !important;
      cursor: zoom-in;
      overflow: hidden;
      background: #e7d7aa !important;
    }
    .portrait-button:hover,
    .portrait-button:focus-visible {
      outline: 2px solid #176b78;
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgba(23,107,120,.18);
    }
    .portrait-button img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: inherit;
    }
    .npc-lightbox {
      padding: 2px 16px 18px;
      display: grid;
      gap: 10px;
      justify-items: center;
    }
    .npc-lightbox-caption {
      color: #2b1c0e;
      font-weight: 800;
      text-align: center;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .scroll-image-frame {
      width: min(100%, 780px);
      max-height: min(72vh, 720px);
      overflow: hidden;
      border: 10px solid transparent;
      border-radius: 22px;
      padding: clamp(8px, 2vw, 14px);
      background:
        linear-gradient(180deg, #f9edc5, #dcc187) padding-box,
        repeating-linear-gradient(135deg, #2a1b10 0 10px, #8a6330 10px 18px, #d4b66b 18px 26px, #5b3d1d 26px 34px) border-box;
      box-shadow: 0 20px 55px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.30);
    }
    .scroll-image-frame img {
      width: 100%;
      height: auto;
      max-height: calc(min(72vh, 720px) - 48px);
      object-fit: contain;
      display: block;
      border-radius: 12px;
      background: #1d130b;
      box-shadow: inset 0 0 0 1px rgba(33,20,9,.45);
    }
    @media (max-width: 520px) {
      .npc-lightbox { padding-inline: 10px; }
      .scroll-image-frame { border-width: 8px; border-radius: 18px; }
    }

.npc-grid > .empty,
.npc-grid > .empty-compact,
.npc-grid > .empty-centered {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  width: min(320px, 100%);
  text-align: center;
  margin-inline: auto;
}

.compact-tile-grid,
.consumable-grid.compact-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  align-items: stretch;
}
.consumable-tile {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,249,232,.78), rgba(234,220,180,.74));
  color: var(--ink);
}
.consumable-main {
  min-width: 0;
}
.consumable-title {
  font-weight: 900;
  font-size: clamp(.92rem, 2.5vw, 1.02rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.consumable-meta {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(.75rem, 2.1vw, .84rem);
  line-height: 1.28;
}
.consumable-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.consumable-tile > .chip {
  justify-self: end;
  align-self: start;
}
.consumable-tile .row-mini-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-self: end;
}
.consumable-tile.is-depleted {
  opacity: .62;
  filter: grayscale(.25);
  background: linear-gradient(180deg, rgba(230,224,202,.66), rgba(191,181,153,.58));
}
.consumable-tile.is-depleted .consumable-title::after {
  content: ' — depleted';
  font-size: .78em;
  color: #6e1d10;
}
@media (max-width: 470px) {
  .compact-tile-grid,
  .consumable-grid.compact-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .consumable-tile { padding: 8px; gap: 6px; }
  .consumable-tile .row-mini-actions { grid-template-columns: 1fr; gap: 5px; }
}

/* v33 mobile input and icon refinement */
:root {
  --app-vvh: 100vh;
}

.navbtn .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.42rem;
  height: 1.42rem;
  color: currentColor;
  line-height: 1;
}
.navbtn .nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.navbtn span:first-child.nav-icon {
  font-size: inherit;
}
.navbtn.active .nav-icon {
  color: #fff8e6;
}

.modal-backdrop.active {
  height: var(--app-vvh) !important;
  max-height: var(--app-vvh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal {
  max-height: calc(var(--app-vvh) - 22px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.modal input,
.modal select,
.modal textarea {
  font-size: 16px; /* prevents mobile Safari zoom and keeps keyboard behaviour stable */
}
.modal .form-actions {
  z-index: 2;
}
@media (max-width: 620px) {
  .modal-backdrop.active {
    align-items: flex-start !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .modal {
    width: min(760px, calc(100vw - 14px)) !important;
    max-height: calc(var(--app-vvh) - 16px) !important;
    border-radius: 22px !important;
  }
}

.adjust-resource-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-left: 16px;
  margin-right: 16px;
}
.adjust-mode-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(31,22,12,.24);
  border-radius: 15px;
  background: rgba(255,249,232,.62);
  min-width: 0;
}
.delta-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.delta-mode {
  border: 1px solid rgba(31,22,12,.36);
  border-radius: 12px;
  min-height: 42px;
  background: rgba(255,255,255,.48);
  color: #23160c;
  font-weight: 900;
  cursor: pointer;
}
.delta-mode.active {
  background: linear-gradient(180deg, #f4d56c, #cf9f2f);
  border-color: #836220;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
}
.delta-mode#deltaModeRemove.active {
  background: linear-gradient(180deg, #f0c8b6, #d78c68);
  border-color: #8e4e34;
}
.mobile-number-input {
  min-height: 52px !important;
  font-size: 16px !important;
}
@media (min-width: 640px) {
  .adjust-resource-form {
    grid-template-columns: 1fr 1fr;
  }
  .adjust-resource-form > .modal-note {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
  .adjust-mode-card {
    padding: 10px;
  }
  .delta-mode {
    min-height: 40px;
  }
}

/* v34 Infamy / Impositions and compact weapon-slot picker scaling */
.infamy-panel {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.infamy-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.infamy-value {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  color: #130c06;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.infamy-board {
  margin: 0;
  box-shadow: none;
}

.imposition-help {
  margin-bottom: 10px;
}

.imposition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 10px;
}

.imposition-card {
  min-width: 0;
  border: 1px solid rgba(95,66,27,.42);
  border-radius: 14px;
  background: rgba(255,250,230,.66);
  padding: 10px;
  display: grid;
  gap: 8px;
  overflow-wrap: anywhere;
}

.imposition-card.locked {
  opacity: .58;
  background: rgba(230,220,190,.52);
}

.imposition-card.used {
  border-color: rgba(24,119,72,.55);
  background: rgba(220,242,220,.64);
}

.imposition-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.imposition-title {
  font-weight: 900;
  font-size: clamp(1rem, 3.4vw, 1.18rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.imposition-threshold {
  margin-top: 2px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
}

.imposition-quote {
  color: #53391c;
  font-style: italic;
  font-size: .92rem;
  line-height: 1.25;
  background: rgba(255,255,255,.28);
  border-left: 4px solid rgba(181,132,37,.75);
  border-radius: 10px;
  padding: 8px 9px;
}

.imposition-effect {
  font-size: .94rem;
  line-height: 1.28;
  color: #20150a;
}

.toggle-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.toggle-pair .button.active {
  box-shadow: 0 0 0 3px rgba(19,103,119,.22);
  border-color: rgba(19,103,119,.65);
}

@media (max-width: 380px) {
  .infamy-main,
  .imposition-head {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   WEAPON SLOT PICKER  (v34 — single source of truth)
   -------------------------------------------------------------------------
   History: v26–v33 each appended a new !important "fix" without removing the
   previous one, leaving ~9 competing #weaponPickerList / .weapon-picker-list
   definitions plus dead .weapon-choice rules. They fought each other and the
   facts grid collapsed, so cards overlapped. All of that is now deleted and
   replaced by this ONE block. It mirrors the Weapon Catalogue card model
   (which never had this bug): a CSS grid of self-sizing cards. The selectable
   option owns its full measured height, so facts can never paint over the
   next card. Markup classes: .slot-weapon-option / -head / -title / -crew /
   -facts / -fact / -special  (rendered by Components.weaponChoice).
   ========================================================================= */

.weapon-picker-search { margin-bottom: 12px; }

/* The list is a responsive auto-fit grid: two columns on roomy modals,
   one column on phones. align-items:start lets each card take its own height. */
#weaponPickerList.weapon-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: 10px;
  padding: 10px;
  max-height: min(58dvh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(246, 237, 208, .55);
  border: 1px solid rgba(23, 17, 11, .20);
  border-radius: 16px;
}

/* Each selectable weapon card. display:grid + gap stacks head over facts and
   guarantees the card height equals head + facts (no collapse, no overlap). */
#weaponPickerList .slot-weapon-option {
  display: grid;
  grid-template-rows: auto auto;
  gap: 9px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #826a3e;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff9e8, #eadcb4);
  color: #140d07;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
#weaponPickerList .slot-weapon-option:hover {
  border-color: #136777;
}
#weaponPickerList .slot-weapon-option:active {
  transform: translateY(1px);
}
#weaponPickerList .slot-weapon-option.selected {
  border-color: #136777;
  background: linear-gradient(180deg, #eaf3ea, #cfe3d2);
  box-shadow: 0 0 0 3px rgba(19, 103, 119, .22);
}
#weaponPickerList .slot-weapon-option:focus-visible {
  outline: 3px solid rgba(19, 103, 119, .5);
  outline-offset: 2px;
}

/* Title row: name fills, crew chip hugs the right and never wraps under. */
#weaponPickerList .slot-weapon-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}
#weaponPickerList .slot-weapon-title {
  min-width: 0;
  font-weight: 900;
  font-size: clamp(.98rem, 2.6vw, 1.1rem);
  line-height: 1.16;
  overflow-wrap: anywhere;
}
#weaponPickerList .slot-weapon-crew {
  justify-self: end;
  white-space: nowrap;
}

/* Facts: two even columns that each size to content; special spans full width. */
#weaponPickerList .slot-weapon-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}
#weaponPickerList .slot-weapon-fact,
#weaponPickerList .slot-weapon-special {
  box-sizing: border-box;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(31, 22, 12, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .46);
  font-size: clamp(.82rem, 2.3vw, .92rem);
  line-height: 1.26;
  overflow-wrap: anywhere;
}
#weaponPickerList .slot-weapon-fact b {
  display: block;
  margin-bottom: 2px;
  color: #6a4a1e;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .03em;
}
#weaponPickerList .slot-weapon-special {
  grid-column: 1 / -1;
  border-left: 4px solid #b9842c;
  background: rgba(255, 255, 255, .34);
}

/* Phones: switch to a denser two-column grid so many more weapons are visible
   at once. Each card's facts collapse from four boxes to tight label/value
   lines, which keeps two cards readable side by side instead of one tall card
   filling the screen. */
@media (max-width: 560px) {
  #weaponPickerList.weapon-picker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 60dvh;
    padding: 8px;
    gap: 8px;
  }
  #weaponPickerList .slot-weapon-option {
    gap: 7px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  #weaponPickerList .slot-weapon-head {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #weaponPickerList .slot-weapon-title {
    font-size: clamp(.86rem, 3.6vw, .98rem);
    line-height: 1.12;
  }
  #weaponPickerList .slot-weapon-crew {
    justify-self: start;
    font-size: .72rem;
    padding: 1px 7px;
  }
  /* Stack the four facts as compact rows so the card stays narrow + legible. */
  #weaponPickerList .slot-weapon-facts {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  #weaponPickerList .slot-weapon-fact,
  #weaponPickerList .slot-weapon-special {
    padding: 4px 7px;
    border-radius: 8px;
    font-size: clamp(.76rem, 3.1vw, .86rem);
    line-height: 1.2;
  }
  #weaponPickerList .slot-weapon-fact b {
    display: inline;
    margin-right: 5px;
    font-size: .64rem;
  }
}
/* Very narrow phones: drop to a single column so two-up cards never get so
   tight that the labels wrap awkwardly. */
@media (max-width: 340px) {
  #weaponPickerList.weapon-picker-list {
    grid-template-columns: 1fr;
  }
  #weaponPickerList .slot-weapon-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #weaponPickerList .slot-weapon-crew {
    justify-self: end;
  }
}

/* =========================================================================
   v34 LAYOUT & TYPE SCALE  (single source of truth, appended last)
   -------------------------------------------------------------------------
   Earlier versions (v4–v23) each re-themed in place, leaving competing
   --max widths (860 / 1040 / 920) and h1 sizes (1.58rem / 2.55rem / 3.6rem)
   stacked on top of each other. The 8vw-driven title made "The Eternal"
   huge on every screen. This block sets the final, intentional values for
   both phones and laptops without touching the working card/grid layouts.
   ========================================================================= */

/* Fluid base size: ~15.5px on small phones up to ~17px on laptops.
   Everything sized in rem/clamp scales smoothly between the two. */
html {
  font-size: clamp(15.5px, 0.9rem + 0.25vw, 17px);
}

/* Roomier column on laptops/desktops so the app no longer sits in a narrow
   strip surrounded by empty wood, while staying full-width on phones. */
:root { --max: 1080px; }
.app {
  max-width: var(--max);
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.bottom-nav-inner { max-width: var(--max); }

/* On true desktop widths, give a little more air and a slightly wider shell. */
@media (min-width: 1200px) {
  :root { --max: 1140px; }
  .app { padding-left: 22px; padding-right: 22px; }
}

/* Title: calm, readable on phones, never oversized on laptops.
   Replaces the runaway clamp(2rem, 8vw, 3.6rem). */
h1 {
  font-size: clamp(1.65rem, 1.1rem + 2.6vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: .01em;
}
.subtitle {
  font-size: clamp(.86rem, .8rem + .3vw, .98rem);
}

/* Section headers: keep the existing hierarchy but cap the top end so big
   screens don't blow them up. */
.section-title h2, .screen-title h2 {
  font-size: clamp(1.18rem, 1rem + 1vw, 1.4rem);
}

/* Topbar: a touch tighter so the time controls sit closer to the title. */
.topbar { padding: 14px 16px 12px; }
@media (max-width: 560px) {
  .topbar { padding: 11px 12px 10px; }
}

/* Two-column time actions read better than a 1x4 stack on wider phones and
   up; on very small screens they stack to a single column for tap comfort. */
.time-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
@media (min-width: 760px) {
  .time-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .time-actions { grid-template-columns: 1fr; }
}


/* v34.4 Pathfinder calendar display */
.calendar-today {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #826a3e;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff9e8, #ead9ab);
  color: #1c1206;
}
.calendar-today-date {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(1.1rem, .9rem + 1.2vw, 1.4rem);
  line-height: 1.1;
}
.calendar-today-sub {
  font-size: clamp(.78rem, 2.2vw, .88rem);
  color: #6a4a1e;
}
/* The date-entry mode toggle in the time-event form. */
.event-date-fields { min-width: 0; }
.event-date-fields .modal-form-grid { gap: 11px; }

/* =========================================================================
   v34.8 STATUS & ALERTS — grouped, severity-aware presentation
   Replaces the old single flat bullet list. Each alert is its own row with a
   severity colour, icon, and category tag; rows are grouped under
   Critical / Watch / Info subheaders so the eye lands on what matters first.
   ========================================================================= */
.alert-panel {
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(30, 20, 10, .28);
  background: linear-gradient(180deg, #efe4c4, #e2d2a8);
  color: #241a10;
}
.alert-panel-danger { border-color: rgba(167, 70, 44, .55); }
.alert-panel-warn { border-color: rgba(183, 132, 44, .5); }
.alert-panel-info { border-color: rgba(25, 113, 125, .45); }

.alert-panel-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 10px;
}
.alert-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  font-family: Georgia, "Times New Roman", serif;
}
.alert-panel-sub {
  font-size: .8rem;
  color: #6a5332;
}

.alert-group { margin-bottom: 10px; }
.alert-group:last-child { margin-bottom: 0; }
.alert-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 6px 2px;
}
.alert-danger-head { color: #a3361f; }
.alert-warn-head { color: #8a5f15; }
.alert-info-head { color: #136777; }
.alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: .66rem;
  background: rgba(31, 22, 12, .14);
  color: #3a2a18;
  letter-spacing: 0;
}

.alert-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(31, 22, 12, .16);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(255, 252, 242, .6);
  font-size: .9rem;
  line-height: 1.34;
}
.alert-row:last-child { margin-bottom: 0; }
.alert-row.alert-danger { border-left-color: #c0492c; background: rgba(244, 209, 197, .55); }
.alert-row.alert-warn { border-left-color: #c79234; background: rgba(248, 233, 197, .5); }
.alert-row.alert-info { border-left-color: #1f8794; background: rgba(206, 230, 232, .5); }

.alert-ico {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alert-danger .alert-ico { stroke: #a3361f; }
.alert-warn .alert-ico { stroke: #8a5f15; }
.alert-info .alert-ico { stroke: #136777; }

.alert-text { min-width: 0; overflow-wrap: anywhere; }
.alert-cat {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(31, 22, 12, .12);
  color: #4a3a22;
  vertical-align: 1px;
}

@media (max-width: 380px) {
  .alert-row { font-size: .86rem; padding: 7px 8px; gap: 7px; }
  .alert-ico { width: 16px; height: 16px; }
}

/* v34.8 Officer roster + daily duties + plunder helper */
.officer-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.duty-list { display: grid; gap: 7px; }
.duty-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(31, 22, 12, .18);
  border-radius: 11px;
  background: rgba(255, 252, 242, .55);
}
.duty-row.is-done {
  background: rgba(206, 227, 210, .5);
  border-color: rgba(19, 103, 119, .35);
}
.duty-check {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  flex: none;
  border: 2px solid #826a3e;
  border-radius: 7px;
  background: #fff9e8;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.duty-row.is-done .duty-check {
  background: #136777;
  border-color: #136777;
}
.duty-tick { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.duty-main { min-width: 0; }
.duty-title { font-weight: 850; font-size: .95rem; line-height: 1.2; }
.duty-row.is-done .duty-title { text-decoration: line-through; text-decoration-color: rgba(19,103,119,.6); }
.duty-officer { font-size: .64rem; vertical-align: 2px; }
.duty-sub { color: var(--muted); font-size: .8rem; margin-top: 3px; line-height: 1.34; }

/* =========================================================================
   v34.11 MAPS — card grid + full-screen interactive map editor
   ========================================================================= */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.map-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid rgba(31,22,12,.22);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(255,252,242,.6);
  cursor: pointer;
  padding: 0;
  transition: border-color .12s ease, transform .06s ease;
}
.map-card:hover { border-color: rgba(12,103,116,.6); }
.map-card:active { transform: translateY(1px); }
.map-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #d8c79b;
}
.map-card-thumb-empty { display:flex; align-items:center; justify-content:center; }
.map-card-thumb-empty svg { width:34px; height:34px; stroke:#8a6c3c; fill:none; stroke-width:1.6; stroke-linejoin:round; }
.map-card-body { padding: 8px 10px; }
.map-card-name { font-weight: 850; font-size: .94rem; line-height: 1.15; }
.map-card-sub { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.map-form-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(31,22,12,.25);
}

/* ---- Full-screen editor ---- */
.map-editor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: #1c130a;
}
.map-editor.active { display: flex; }
.map-editor-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #2c2016, #241a10);
  border-bottom: 2px solid rgba(255,226,154,.3);
  color: #f4edcf;
}
.map-editor-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 1.05rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-bar-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,226,154,.3);
  border-radius: 11px;
  background: rgba(255,246,218,.08);
  color: #f4edcf;
  cursor: pointer;
}
.map-bar-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.map-stage {
  flex: 1;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 40%, rgba(60,42,22,.5), #160f08);
  touch-action: none;
  /* v39.33: the map has its own hold gesture for opening marker details.
     Suppress iOS/Android's image callout so it does not cover that UI with
     Copy image / Download image / Save image. Scoped to the chart only. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.map-stage *,
.map-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* v39.22: no permanent will-change here. Keeping the whole (potentially
     HD) map promoted to one composited layer exceeded the GPU's max layer
     size on phones once zoomed, so the browser clipped/evicted raster tiles
     and never repainted them (stair-step holes after zoom in/out). The JS
     now applies will-change only DURING gestures and drops it when the view
     settles, forcing a fresh, correct rasterisation at the final scale. */
  line-height: 0;
  z-index: 1;
}
.map-img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

/* Pins live in an unscaled overlay above the transformed map image. Their
   screen position is recalculated by JS from the current pan/zoom, so HTML
   labels stay sharp even at 1200% zoom instead of being raster-scaled with the
   map canvas. */
.map-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  display: block;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  will-change: left, top;
}
/* The label floats above the dot by default but is absolutely positioned so it
   can be flipped below the dot when it would otherwise clip the top edge of the
   map (see .label-below, set by declutterLabels). Names stay on one line and
   show a "…" only when too long; tapping the marker reveals the full name. */
.map-pin-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  color: #2a1c0c;
  background: linear-gradient(180deg, #fff6da, #ecdcad);
  border: 1px solid rgba(31,22,12,.5);
  border-radius: 6px;
  padding: 3px 7px;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  /* width:max-content sizes the label to its text (one line) so short names
     never wrap; max-width caps it and the "…" only appears when a name is
     genuinely too long. The label is absolutely positioned over a tiny dot, so
     without max-content its shrink-to-fit width collapsed and wrapped every
     word — that was the bug. */
  width: max-content;
  max-width: 168px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Flip below the dot when there's no room above (top-edge pins). */
.map-pin.label-below .map-pin-label {
  bottom: auto;
  top: calc(100% + 5px);
}
/* A tapped/revealed marker shows its full name (wrapping as needed) on top. */
.map-pin.label-revealed .map-pin-label {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 220px;
  overflow: visible;
  text-overflow: clip;
  z-index: 250;
}
.map-pin-dot {
  display: block;
  margin: 0 auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2.5px solid #fff6da;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* Decluttered labels: hidden when they'd overlap a kept label or fall off the
   viewport edge. The dot stays, and the label returns as you zoom in. */
.map-pin-label.label-hidden { display: none; }
/* R2/R9: Google-Maps-style importance fade. Labels stay in their fixed spot
   above the dot; a lower-priority label that would overlap a more important one
   fades to near-transparent while zoomed out, and returns as you zoom in (the
   declutter pass re-evaluates overlaps every frame). Kept labels get an inline
   opacity ramp by rank; this rule covers the faded losers. */
.map-pin-label { transition: opacity .15s ease; }
.map-pin-label.label-faded { opacity: .28; pointer-events: none; }
.pin-poi .map-pin-dot { background: #2f8f9c; }
.pin-port .map-pin-dot { background: #c79234; }
.pin-holding .map-pin-dot { background: #3f9d54; }
.pin-quest .map-pin-dot { background: #b07cc6; }
.pin-danger .map-pin-dot { background: #c0492c; }

/* Tools */
.map-editor-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, #2c2016, #241a10);
  border-top: 2px solid rgba(255,226,154,.3);
}
/* Keep the zoom group hugging the right edge even when the row wraps, so it
   never gets pushed off-screen when the extra "Drop pin" button appears in
   edit mode on narrow phones (R4). */
.map-zoom { margin-left: auto; }
.map-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,226,154,.32);
  border-radius: 11px;
  background: rgba(255,246,218,.08);
  color: #f4edcf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
}
.map-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-tool.active {
  background: #2f8f9c;
  border-color: #2f8f9c;
  color: #fff;
}
.map-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.map-zoom .map-tool { padding: 0 11px; min-width: 44px; justify-content: center; }

/* R4: on narrow phones, tighten the tool buttons so Edit + Drop pin + Pins +
   zoom can share the bar; if they still don't fit, flex-wrap (above) drops the
   zoom group to a second right-aligned line instead of off-screen. */
@media (max-width: 480px) {
  .map-editor-tools { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .map-tool { padding: 0 11px; min-height: 40px; font-size: .84rem; gap: 5px; }
  .map-zoom { gap: 5px; }
  .map-zoom .map-tool { padding: 0 9px; min-width: 40px; }
}

/* v34.12 inline action button pair (settings rows) */
.inline-actions { display:flex; gap:6px; flex:none; }

/* v34.12 access (password) gate */
.access-gate { z-index: 130; }
.access-panel { width: min(100%, 440px); }
.access-input {
  width: 100%;
  margin: 4px 0 10px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 2px solid rgba(23,17,11,.32);
  background: #fff6da;
  color: #15100b;
  font-size: 1.05rem;
  box-sizing: border-box;
}
.access-input:focus-visible { outline: 4px solid rgba(12,103,116,.4); outline-offset: 1px; border-color: rgba(12,103,116,.6); }
.access-submit { width: 100%; justify-content: center; }
.access-error { color: #a3361f; font-weight: 800; font-size: .86rem; margin-bottom: 10px; }

/* v34.12 loot cards + rarity colours + notes toggle */
.loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
.loot-card {
  border-left: 5px solid #b9a978;
  padding: 11px 12px;
}
.loot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.loot-title { font-weight: 850; font-size: .98rem; line-height: 1.15; }
.loot-price { font-weight: 800; color: #6a4a1e; white-space: nowrap; }
.loot-meta { color: var(--muted); font-size: .8rem; margin-top: 3px; }
.loot-note { margin-top: 6px; }
.loot-total { margin-top: 10px; font-size: .9rem; color: #3a2a18; }
/* D&D rarity accents */
.rarity-mundane { border-left-color: #b9a978; }
.rarity-common  { border-left-color: #d9d2c2; }
.rarity-common .loot-title { color: #2a1c0c; }
.rarity-uncommon { border-left-color: #3f9d54; }
.rarity-uncommon .loot-title { color: #1f6e34; }
.rarity-rare { border-left-color: #2f6db0; }
.rarity-rare .loot-title { color: #1f558c; }
.rarity-legendary { border-left-color: #d98b2b; }
.rarity-legendary .loot-title { color: #b06a12; }

/* Looted items: keep at least two tiles per row on phones, scale text to fit */
@media (max-width: 520px) {
  .loot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .loot-card { padding: 9px 9px; border-left-width: 4px; }
  .loot-head { gap: 5px; flex-wrap: wrap; }
  .loot-title { font-size: .86rem; }
  .loot-price { font-size: .8rem; }
  .loot-meta { font-size: .7rem; }
  .loot-total { font-size: .82rem; }
}

.notes-toggle {
  margin: 4px 0 2px;
  padding: 0;
  border: 0;
  background: none;
  color: #136777;
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
}
.notes-toggle:hover { text-decoration: underline; }
.notes-expanded { -webkit-line-clamp: unset !important; display: block !important; }

/* v34.14 map editor: draggable pins, hint, pins list sheet */
.map-pin { cursor: grab; touch-action: none; user-select: none; }
.map-pin .map-pin-dot { transition: transform .1s ease; }
.map-pin.dragging { cursor: grabbing; z-index: 5; }
.map-pin.dragging .map-pin-dot { transform: scale(1.35); }
.map-pin.pin-flash .map-pin-dot { animation: pinflash 1.4s ease; }
@keyframes pinflash {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,.6); }
  20%, 60% { box-shadow: 0 0 0 8px rgba(255,246,218,.7); transform: scale(1.4); }
}
/* bigger invisible hit area so pins are easy to grab on mobile */
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 38px; height: 38px;
  transform: translateX(-50%);
  border-radius: 50%;
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: 86%;
  background: rgba(20,13,7,.92);
  color: #f4edcf;
  border: 1px solid rgba(255,226,154,.4);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: .86rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.map-hint.show { opacity: 1; }

.primary-tool { background: #2f8f9c; border-color: #2f8f9c; color: #fff; }
/* "Drop pin" while placement is armed: pulse so it's clear the next tap places. */
.primary-tool.is-active { background: #b07cc6; border-color: #b07cc6; box-shadow: 0 0 0 3px rgba(176,124,198,.35); }

/* Pins list bottom sheet */
.map-list-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  max-height: 60%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2c2016, #20160d);
  border-top: 2px solid rgba(255,226,154,.35);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
.map-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  color: #f4edcf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,226,154,.2);
}
.map-list-body { overflow: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.map-list-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px;
}
.map-list-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff6da; flex: none; }
.map-list-dot.pin-poi { background: #2f8f9c; }
.map-list-dot.pin-port { background: #c79234; }
.map-list-dot.pin-holding { background: #3f9d54; }
.map-list-dot.pin-quest { background: #b07cc6; }
.map-list-dot.pin-danger { background: #c0492c; }
.map-list-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 44px;
  justify-content: center;
  background: rgba(255,246,218,.06);
  border: 1px solid rgba(255,226,154,.18);
  border-radius: 10px;
  padding: 6px 11px;
  color: #f4edcf;
  cursor: pointer;
  text-align: left;
}
.map-list-name { font-weight: 800; font-size: .95rem; }
.map-list-kind { font-size: .72rem; color: #d9c89a; }
.map-list-find, .map-list-del {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,226,154,.25);
  background: rgba(255,246,218,.06);
  cursor: pointer;
}
.map-list-find svg, .map-list-del svg { width: 19px; height: 19px; fill: none; stroke: #f4edcf; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-list-del { border-color: rgba(192,73,44,.5); }
.map-list-del svg { stroke: #e88e78; }
.map-list-empty { color: #d9c89a; text-align: center; padding: 22px 14px; font-size: .9rem; }

/* v34.15 map legend + filter + empty hint */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #241a10, #1d150c);
  border-bottom: 1px solid rgba(255,226,154,.18);
}
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,226,154,.28);
  background: rgba(255,246,218,.06);
  color: #f4edcf;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.map-legend-item.off { opacity: .42; text-decoration: line-through; }
.map-legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff6da; flex: none; }
.map-legend-count { opacity: .7; font-size: .72rem; }

.map-pin.is-hidden { display: none; }

.map-empty-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%;
  text-align: center;
  color: #f4edcf;
  background: rgba(20,13,7,.8);
  border: 1px solid rgba(255,226,154,.3);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: .92rem;
  pointer-events: none;
}
.map-empty-hint b { color: #ffd98a; }

/* R7: note at the top of the Pins list when the legend filter is active. */
.map-list-filter-note {
  margin: 2px 4px 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,226,154,.22);
  border-radius: 9px;
  background: rgba(47,143,156,.12);
  color: #d9c89a;
  font-size: .78rem;
  line-height: 1.35;
}

/* R3: Map Marker Importance reorder modal (Settings → More). */
.marker-order-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.marker-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.34);
}
.marker-order-rank {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff7e2;
  font-weight: 850;
  font-size: .82rem;
}
.marker-order-name { flex: 1 1 auto; font-weight: 800; color: var(--ink); }
.marker-order-moves { flex: none; display: inline-flex; gap: 6px; }
.marker-order-moves .button.mini {
  min-width: 34px;
  padding: 4px 8px;
  line-height: 1;
}
.marker-order-moves .button.mini[disabled] { opacity: .35; cursor: default; }

/* Fleet ship Dmg / Fix / Edit action row — three equal-width buttons */
.fleet-ship-actions { display: flex; gap: 8px; flex-wrap: nowrap; margin-top: auto; }
.fleet-ship-actions .button.small { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
@media (max-width: 520px) {
  .fleet-ship-actions { gap: 6px; }
  .fleet-ship-actions .button.small { min-height: 36px; padding-inline: 6px; }
}

/* ============================================================
   v34.17 — accessibility & mobile polish
   ============================================================ */

/* Remove the default grey/blue tap flash on our custom-styled controls
   (they already have their own :active / :focus-visible states). */
.button, .navbtn, .slot-cell, .x, summary,
.player-choice, .map-card, .portrait-button,
.duty-check, .notes-toggle, .access-submit {
  -webkit-tap-highlight-color: transparent;
}

/* Roomier touch targets on touch / coarse-pointer devices, without
   making the desktop layout feel oversized. */
@media (pointer: coarse) {
  .button.small { min-height: 42px; }
  .button.mini  { min-height: 40px; }
  .notes-toggle { padding-block: 4px; }
}

/* Respect the operating-system "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .screen { animation: none !important; }
  .map-pin.pin-flash .map-pin-dot { animation: none !important; }
}

/* ============================================================
   v34.19 — refined search/sort toolbars (NPCs, Quests, Loot)
   ============================================================ */
/* A toolbar that flows its fields into as many columns as fit, then drops
   to a single column on phones. Keeps Search/Location/Order/Status tidy. */
.toolbar-grid.flow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.filter-row-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.check-inline {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff1be; font-weight: 750; font-size: .88rem;
  cursor: pointer; user-select: none;
}
.check-inline input { width: 18px; height: 18px; accent-color: #2f8f9c; flex: 0 0 auto; }
.loot-showing { color: var(--muted); font-size: .82rem; margin: 2px 0 8px; }

/* Filter toolbars (NPCs / Quests / Loot): a deterministic two-column grid.
   Dropdowns, the search box, and the notes checkbox all flow into it two per
   row, in document order, so the layout is exactly:
     Location | Status      Location | Order       Magic class | Order
     Order    | Search      Search   | notes       Search      | notes
     notes
   width:100% + min-width:0 stops the old squish; the Clear button sits on its
   own row beneath. */
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 10px;
}
.filter-row .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.filter-row .field > label {
  font-size: .82rem;
  font-weight: 750;
  color: #fff1be;
  letter-spacing: .01em;
}
.filter-row .field select,
.filter-row .field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.filter-grid .check-inline {
  min-width: 0;
  gap: 6px;
  padding-bottom: 8px;
}
.filter-row-foot {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

/* ============================================================
   v34.20 — readable column width on large monitors
   The shell (.app) is already centred with margin auto and capped
   at --max; the bottom nav spans full-width with a centred inner
   capped at the same value. The earlier rules set a wide 1080px
   cap that *grew* to 1140px past 1200px, so on big desktops/4K the
   UI stretched out. Cap it at a comfortable reading width instead,
   and don't widen further on large screens. Phones are untouched:
   their viewport is narrower than the cap, so width:100% still wins.
   ============================================================ */
:root { --max: 900px; }
@media (min-width: 1200px) { :root { --max: 900px; } }
/* Centered page wrapper.
   A fixed 900px cap wasn't enough on high-DPI laptops: with heavy Windows
   display scaling, the browser's CSS viewport at 100% zoom can be ~850px —
   narrower than the cap — so it never engaged and the app filled the width
   (only zooming to ~67% widened the viewport enough to reveal the margins).
   Using a viewport-relative width makes the side margins appear at 100% zoom on
   those laptops too, while still capping at 900px on large screens. Phones
   (viewport < 700px) keep the full width. */
.app {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.bottom-nav-inner { max-width: 900px; }
@media (min-width: 700px) {
  .app,
  .bottom-nav-inner { max-width: min(900px, 76vw); }
}

/* Small build-version label at the bottom of the More screen, so it's easy to
   confirm which build is actually loaded (helps diagnose stale caches). */
.version-footer {
  text-align: center;
  color: var(--faint);
  font-size: .78rem;
  padding: 14px 0 4px;
  opacity: .8;
}

/* Dev-only "Lock map" toggle in the Edit Map modal (light parchment surface,
   so dark text), and the disabled padlock shown to players on a locked map. */
.lock-row { margin-top: 2px; }
.lock-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  color: #2a1c0c;
  cursor: pointer;
}
.lock-toggle input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: #7a5b2e;
}
.map-bar-btn[disabled] {
  opacity: .4;
  cursor: default;
}

/* Map: Edit-mode toggle (active state), Hide-all chip, locked-card badge. */
.map-tool.edit-toggle.is-active {
  background: #2f6f7e;
  border-color: #4a93a3;
  color: #fff6da;
}
.map-legend-all {
  font-weight: 750;
  opacity: .9;
}
.map-card-lock { margin-left: 6px; font-size: .85em; opacity: .8; }

/* Naval Ram (baseline) card inside Equipped Weapons, plus Leviathan's Fang use. */
.ram-card { border-style: dashed; }
/* Ram cards are reference text — never clamp them, always show the full rules. */
.ram-card .weapon-summary-special {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
/* Leviathan's Fang supplement: tinted callout with dark, readable text. */
.ram-card .ram-supplement {
  color: #3f2a0d;
  background: rgba(185, 132, 44, .16);
  border-left-color: #a9741f;
}
.ram-fang-use { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ram-fang-reset { font-size: .74rem; opacity: .7; }

/* v34.34 equipped weapon desktop title fix
   On wide laptop/desktop view the Equipped Weapons grid uses three columns.
   A weapon with three pills (qty + unmanned + crew) can consume the whole
   header row and force the title to wrap one character at a time. Stack the
   title over the pills in that compact three-column layout only. */
@media (min-width: 900px) {
  .pull-table .weapon-summary-top {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .pull-table .weapon-summary-title {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .pull-table .weapon-summary-pills {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* v34.36 laptop density fix
   Browser 100% on high-DPI laptops can make the app feel oversized. Apply a
   denser desktop layout only to non-phone, fine-pointer viewports. Phones stay
   on the existing mobile rules. */
@media (min-width: 700px) and (pointer: fine) {
  html { font-size: 14px !important; }
  :root { --tap: 40px; }

  .topbar { padding: 9px 12px 8px; }
  h1 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.02; }
  .subtitle { font-size: .84rem; }

  main { padding: 10px 10px 80px !important; }
  .screen-title { margin: 10px 0; }
  .section-title { margin: 12px 2px 7px; }
  .screen-title h2, .section-title h2 { font-size: clamp(1.05rem, 2.4vw, 1.25rem); }

  .time-actions { gap: 8px; margin-top: 10px; }
  .button { min-height: 40px; padding: 7px 10px; border-radius: 12px; font-size: .95rem; }
  .button.small { min-height: 33px; padding: 5px 8px; font-size: .84rem; }

  .summary-line { margin-top: 8px; gap: 7px; font-size: .82rem; }
  .summary-pill { min-height: 34px; }
  .time-toggle.icon-only { min-height: 34px; min-width: 44px; padding: 6px 10px; }

  .card, .metric, .resource-card, .weapon-summary-card, details.compact-board { border-radius: 13px; }
  .card, .resource-card, .weapon-summary-card { padding: 9px; }
  .metric { min-height: 58px; padding: 8px; }
  .metric .value { font-size: 1.04rem; }

  /* There are eight nav items. On desktop/laptop, keep them on one row so the
     bottom bar does not consume a large block of vertical space. */
  .bottom-nav { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .navbtn { min-height: 46px; padding: 6px 2px; font-size: .63rem; }
  .navbtn .nav-icon { width: 1.25rem; height: 1.25rem; }
}

/* Slightly tighter again for the common high-DPI 13–14 inch laptop band. */
@media (min-width: 700px) and (max-width: 1200px) and (pointer: fine) {
  html { font-size: 13.5px !important; }
  .app, .bottom-nav-inner { max-width: min(900px, 82vw); }
}


/* v34.36 TravelMate / touchscreen-laptop density fix
   The v34.35 desktop density rule used (pointer:fine), which can be skipped on
   2-in-1 touchscreen laptops because the browser may report the primary
   pointer as coarse. Use viewport size instead: phones remain unaffected in
   portrait, and short phone-landscape views are also excluded. */
@media (min-width: 700px) and (min-height: 500px) {
  html { font-size: 12px !important; }
  :root { --tap: 36px !important; }

  .app {
    max-width: min(900px, 82vw);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 68px;
  }
  .bottom-nav-inner { max-width: min(900px, 82vw); }

  .topbar {
    padding: 8px 12px 8px;
  }
  h1 {
    font-size: clamp(2.05rem, 2.6vw, 2.45rem) !important;
    line-height: 1.02 !important;
  }
  .subtitle { font-size: .90rem; }
  .title-row { gap: 8px; }
  .sync-pill { padding: 5px 9px; font-size: .78rem; }

  .time-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .button {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 11px;
    font-size: .92rem;
  }
  .button.small {
    min-height: 31px;
    padding: 5px 8px;
    font-size: .80rem;
    border-radius: 9px;
  }
  .button.mini {
    min-height: 29px;
    padding: 4px 7px;
    font-size: .76rem;
  }

  .summary-line {
    margin-top: 8px;
    gap: 7px;
    font-size: .82rem;
  }
  .summary-pill,
  .tag { padding: 4px 8px; }
  .time-toggle.icon-only {
    min-height: 32px;
    min-width: 42px;
    padding: 5px 9px;
  }

  main { padding: 10px 10px 70px !important; }
  .screen-title { margin: 9px 0; }
  .section-title { margin: 11px 2px 7px; }
  .screen-title h2,
  .section-title h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
  }

  .card,
  .metric,
  .resource-card,
  .quest-card,
  .npc-card,
  .holding-card,
  .mod-card,
  .weapon-summary-card,
  details.compact-board {
    border-radius: 12px !important;
  }
  .card,
  .resource-card,
  .quest-card,
  .holding-card,
  .weapon-summary-card { padding: 8px !important; }
  .metric { min-height: 52px; padding: 7px 8px; }
  .metric .label { font-size: .74rem; }
  .metric .value { font-size: 1.12rem; margin-top: 1px; }
  .metric .note { font-size: .70rem; margin-top: 1px; }
  .quick-dashboard,
  .compact-grid,
  .component-grid,
  .resource-grid,
  .quest-grid,
  .npc-grid,
  .holding-grid,
  .pull-table { gap: 8px !important; }

  .alert-panel {
    padding: 9px !important;
    margin-bottom: 10px !important;
  }
  .alert-panel-head { margin-bottom: 7px !important; }
  .alert-panel-head h3 { font-size: 1rem !important; }
  .alert-row {
    padding: 6px 8px !important;
    gap: 7px !important;
    margin-bottom: 5px !important;
    font-size: .88rem !important;
  }
  .alert-ico { width: 16px; height: 16px; }

  details.compact-board > summary,
  details.loadout-section > summary {
    padding: 9px 10px !important;
    font-size: .95rem !important;
  }
  details.compact-board .board-body { padding: 0 9px 9px !important; }

  .bottom-nav {
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
  }
  .bottom-nav-inner {
  }
  .navbtn {
    min-height: 42px;
    padding: 5px 2px;
    font-size: .60rem;
    border-radius: 10px;
  }
  .navbtn .nav-icon,
  .navbtn svg {
    width: 1.18rem;
    height: 1.18rem;
  }
}

/* Slightly denser for the common 13–14 inch Windows laptop band. */
@media (min-width: 700px) and (max-width: 1200px) and (min-height: 500px) {
  html { font-size: 11.5px !important; }
  .app,
  .bottom-nav-inner { max-width: min(900px, 80vw); }
  h1 { font-size: clamp(2rem, 2.4vw, 2.35rem); }
}

/* v34.37 overview status/alerts column layout
   On laptop/tablet-sized screens, the alert groups sit in columns instead of
   using full-width rows. Phone portrait and short phone-landscape views keep
   the original single-column alert layout. */
@media (min-width: 700px) and (min-height: 500px) {
  .alert-panel {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 8px 10px !important;
    align-items: start !important;
    padding: 9px 10px !important;
  }

  .alert-panel-head {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }

  .alert-panel-head h3 {
    font-size: .98rem !important;
  }

  .alert-panel-sub {
    font-size: .76rem !important;
  }

  .alert-group {
    margin: 0 !important;
    min-width: 0 !important;
  }

  .alert-group-head {
    margin: 0 0 5px 2px !important;
  }

  .alert-row {
    margin-bottom: 5px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }

  .alert-row:last-child {
    margin-bottom: 0 !important;
  }

  .alert-ico {
    width: 15px;
    height: 15px;
  }

  .alert-cat {
    padding: 1px 6px !important;
    font-size: .58rem !important;
    margin-right: 5px !important;
  }
}

/* On wider laptop/desktop views, force two useful columns so Watch and Info
   can sit beside each other instead of stacking down the page. */
@media (min-width: 900px) and (min-height: 500px) {
  .alert-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v34.45: Local visual overlay. Cosmetic only; no cloud/state changes. */
.time-pill {
  appearance: none;
  font: inherit;
  cursor: default;
  user-select: none;
}
.time-pill:hover,
.time-pill:active {
  transform: none;
}
.time-pill:focus-visible {
  outline: 3px solid rgba(255, 226, 154, .72);
  outline-offset: 2px;
}














/* ============================================================
   MODE CARD — shared banner shown under the top summary pills for
   every local UI easter-egg overlay (Mutiny, Gay, Flumph, Daddy
   Problem, Skuttles, Christmas, ...).

   ALL layout/sizing/responsive rules live here, on the single
   ".mode-card" class. Every mode-specific class below (.gay-mode-card,
   .flumph-mode-card, etc.) should ONLY set colors/background/border —
   never layout — so any mode automatically spans the full width of
   the #topSummary grid on every screen size instead of getting
   squashed into one narrow column (the bug that hit Flumph, Daddy
   Problem, Skuttles, and Christmas mode: their old CSS blocks
   repeated this layout by hand and forgot "grid-column: 1 / -1").
   New modes are registered in assets/js/00c-easter-eggs.js — see the
   comment there for the full add/remove workflow.
   ============================================================ */







/* Mode card theme: Gay Mode (color/background only — layout is in .mode-card) */





/* v34.47: Mutiny Mode. Automatic cosmetic overlay when morale drops below 5. */














/* Mode card theme: Mutiny Mode (color/background only — layout is in .mode-card) */






/* v34.48: Local sticky-header preference. Default is sticky; this class lets
   users make the top app bar scroll away normally. */
body.sticky-header-off .topbar {
  position: static;
  top: auto;
}
.settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 20, 10, .20);
  background: rgba(255, 248, 226, .9);
  color: #3c2a10;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}
.settings-toggle span {
  color: #3c2a10;
}
.settings-toggle input {
  width: 18px;
  height: 18px;
  min-height: auto;
  margin: 0;
  accent-color: #b8842e;
}

/* v34.53: Additional runtime-only Local UI Overlay Modes. */


@keyframes christmasSnow {
  from { background-position: 0 -120px, 40px -80px, 80px -220px; }
  to { background-position: 0 520px, 40px 640px, 80px 700px; }
}





























@keyframes flumphBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}




















/* v34.53: Special-mode sticky top readability.
   Keep time controls readable on dark seasonal/character headers. */








/* Mode card themes: Flumph Mode, Daddy Problem Mode, Christmas Mode
   (color/background only — layout is in .mode-card / .mode-emblem) */

















/* v34.64: Skuttles Mode. Runtime-only cave-talk UI overlay with cave-art styling and a hidden piano. */



















.skuttles-banana {
  display: block;
  margin: 5px auto 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .18;
  font-size: 1.05rem;
  line-height: 1;
  cursor: default;
  filter: saturate(.8);
}
.skuttles-banana:hover,
.skuttles-banana:focus-visible {
  opacity: .46;
  cursor: pointer;
  outline: none;
}
/* Mode card theme: Skuttles Mode (color/background only — layout is in
   .mode-card). The ::after cave-art texture is mode-specific decoration
   and stays here. */





.skuttles-keyboard-card { overflow: visible; }
.skuttles-piano {
  position: relative;
  margin-top: 14px;
  height: clamp(136px, 27svh, 188px);
  border-radius: 18px;
  padding: clamp(8px, 2.3vw, 12px);
  background: linear-gradient(180deg, #2c2016, #1d140d);
  border: 2px solid rgba(255,240,184,.34);
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.28);
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.skuttles-white-keys {
  position: absolute;
  inset: clamp(8px, 2.3vw, 12px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1px, .85vw, 4px);
  min-width: 0;
}
.skuttles-key {
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  border: 2px solid rgba(31,20,9,.55);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.14);
  min-width: 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  touch-action: manipulation;
}
.skuttles-key span {
  display: block;
  min-width: 0;
  font-size: clamp(.64rem, 2.6vw, .95rem);
  line-height: 1;
}
.skuttles-key.white {
  background: linear-gradient(180deg, #fff7d9, #d8be79);
  color: #3b2612;
  border-radius: 0 0 12px 12px;
  padding-top: clamp(72px, 17svh, 112px);
}
.skuttles-black-keys {
  position: absolute;
  inset: clamp(8px, 2.3vw, 12px);
  pointer-events: none;
}
.skuttles-key.black {
  position: absolute;
  top: 0;
  width: clamp(14px, 6.15%, 34px);
  height: clamp(68px, 16svh, 106px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2a1b11, #070504);
  color: #fff0b8;
  border-color: rgba(255,240,184,.2);
  border-radius: 0 0 9px 9px;
  pointer-events: auto;
}
@media (max-width: 430px) {
  
  .skuttles-piano {
    height: clamp(126px, 24svh, 150px);
    padding: 8px;
  }
  .skuttles-key.white {
    padding-top: clamp(66px, 13svh, 84px);
    border-width: 1.5px;
  }
  .skuttles-key.black {
    width: clamp(13px, 6.35%, 20px);
    height: clamp(58px, 11.5svh, 78px);
    border-width: 1.5px;
  }
}


/* =========================================================================
   v36.1 Actions tab
   ========================================================================= */
.nav-icon svg { width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#screen-actions .actions-shortcuts { margin: 0 0 12px; }
#screen-actions .section-title { margin-top: 14px; }
.actions-snapshot { margin-bottom: 10px; }
.actions-top-grid, .actions-card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap:10px; }
.action-subgrid { margin-top:10px; }
.action-card { background:linear-gradient(180deg, var(--paper), var(--paper2)); border:2px solid var(--line-strong); border-left:4px solid var(--gold); border-radius:14px; padding:12px; color:var(--ink); box-shadow:0 3px 10px rgba(0,0,0,.10); }
.action-card-head { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
.action-card h3 { margin:0; font-size:1rem; font-weight:850; line-height:1.18; overflow-wrap:break-word; color:var(--ink); }
.action-chip-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.action-chip { font-size:.69rem; }
.action-bullets { margin:0; padding-left:1.05rem; display:grid; gap:5px; font-size:.86rem; line-height:1.34; }
.action-effect, .action-linked-note { font-size:.88rem; line-height:1.35; color:var(--ink); }
.action-linked-note { margin-top:8px; padding:8px 9px; border-left:4px solid #b9842c; background:rgba(185,132,44,.14); border-radius:8px; }
.actions-mini-table { margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.actions-mini-table > div { display:grid; grid-template-columns: 1fr auto; gap:8px; padding:7px 9px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.20); }
.actions-mini-table > div:last-child { border-bottom:0; }
.actions-ref-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.12); }
.actions-ref-head, .actions-ref-row { display:grid; grid-template-columns:minmax(98px,.8fr) minmax(0,1.6fr); gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); align-items:start; }
.actions-ref-head { font-weight:900; text-transform:uppercase; font-size:.72rem; color:var(--muted); letter-spacing:.04em; background:rgba(122,96,52,.20); }
.actions-ref-row:last-child { border-bottom:0; }
.actions-ref-row b { color:var(--ink); font-weight:800; }
.actions-ref-row span { font-size:.85rem; line-height:1.32; }
.actions-pull-table { margin-bottom:8px; }
.fitted-ability-card .action-effect { border-left:4px solid #668b52; padding-left:9px; }
.hazards-grid .action-card { border-left-color:rgba(185,132,44,.42); border-color:rgba(185,132,44,.42); }

/* Combat Now: computed readout — keep it inline and text-sized, not a feature box. */
.action-stat-readout { margin:0 0 8px; padding:0; border:0; background:transparent; border-radius:0; font-size:.86rem; line-height:1.32; color:var(--ink); overflow-wrap:anywhere; }
.action-stat-label { font-weight:850; color:var(--muted); text-transform:uppercase; letter-spacing:.035em; font-size:.68rem; margin-right:4px; white-space:nowrap; }
.action-stat-value { display:inline; min-width:0; text-align:left; font-size:inherit; font-weight:850; color:var(--ink); line-height:inherit; overflow-wrap:anywhere; }
.action-stat-meta { display:inline; min-width:0; font-size:.82rem; color:var(--muted); overflow-wrap:anywhere; }
.action-stat-meta::before { content:' — '; }
.action-card .action-stat-readout + .action-bullets { margin-top:2px; }

/* Combat Now: tabbed layout so the whole section isn't a long open scroll */
.combat-tab-bar { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px; margin-bottom:10px; border-radius:14px; background:linear-gradient(180deg, #2d1d12, #20140c); border:1px solid rgba(255,226,154,.30); scrollbar-width:none; }
.combat-tab-bar::-webkit-scrollbar { display:none; }
.combat-tab-btn { flex:0 0 auto; border:1px solid transparent; background:transparent; color:#f1e2bf; font-family:Georgia,"Times New Roman",serif; font-weight:750; font-size:.82rem; padding:8px 12px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.combat-tab-btn.active { color:#fff9e8; background:rgba(184,132,46,.32); border-color:rgba(255,226,154,.55); }
.combat-tab-btn:focus-visible { outline:2px solid #fff0a8; outline-offset:1px; }
.combat-tab-panel { display:none; }
.combat-tab-panel.active { display:block; animation: combatTabIn .12s ease-out; }
@keyframes combatTabIn { from { opacity:.4; } to { opacity:1; } }
.combat-tab-panels > .combat-tab-panel.active > details.compact-board { margin-bottom:0; }

@media (max-width: 560px) {
  .bottom-nav-inner .navbtn { min-width:64px; flex-basis:64px; font-size:.64rem; }
  .actions-card-grid, .actions-top-grid { grid-template-columns:1fr; }
  .actions-ref-head { display:none; }
  .actions-ref-row { grid-template-columns:1fr; gap:3px; padding:9px 10px; }
  #screen-actions .screen-title { align-items:flex-start; }
  .combat-tab-btn { font-size:.78rem; padding:7px 10px; }
}

/* ============================================================
   v36.4 — accessibility, keyboard, and pointer polish
   ============================================================ */

/* Stop phone browsers (notably iOS Safari in landscape) from auto-inflating
   text sizes, which was distorting the tuned responsive breakpoints. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Visually hidden but readable by screen readers. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link: invisible until it receives keyboard focus, then
   drops in over the topbar so keyboard users can bypass the header/nav. */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 400;
  transform: translateY(-300%);
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 10px 14px; font-weight: 800; text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transition: transform .12s ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid #ffd86e; outline-offset: 2px; }
/* The skip target itself shouldn't show a focus ring around the whole page. */
#main:focus { outline: none; }

/* Nicer wrapping on titles — avoids single-word orphan lines. */
h1, h2, h3 { text-wrap: balance; }

/* The toast is a status readout, never interactive; make sure it can't
   swallow taps aimed at the bottom nav underneath it. */
.toast { pointer-events: none; }

/* Keep modal scrolling from chaining into the page behind it. */
.modal { overscroll-behavior: contain; }

/* Bigger close-button hit area on touch devices (was 38px, under the 44px
   comfortable-tap guideline). Visual size only grows slightly. */
@media (pointer: coarse) {
  .x { width: 44px; height: 44px; }
}

/* Press feedback on nav buttons (state change, not an animation, so it also
   behaves under prefers-reduced-motion). */
.navbtn:active { transform: scale(.94); }

/* Hover/pointer polish for laptop and desktop users only. */
@media (hover: hover) and (pointer: fine) {
  .button { transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; }
  .button:hover:not(:disabled) { filter: brightness(1.07); }
  .button:active:not(:disabled) { filter: brightness(.97); }
  .navbtn { transition: background-color .12s ease, color .12s ease; }
  .navbtn:not(.active):hover { color: #fff4dc; background: rgba(255,244,220,.09); }
  .sync-pill:hover { border-color: rgba(255,226,154,.5); }
  .slot-cell:hover { border-color: rgba(12,103,116,.55); }

  /* Themed scrollbars so the default grey bar doesn't clash with the
     wood/parchment palette on desktop. */
  html { scrollbar-width: thin; scrollbar-color: #73542f rgba(38,23,15,.55); }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: rgba(38,23,15,.35); border-radius: 8px; }
  ::-webkit-scrollbar-thumb { background: #73542f; border-radius: 8px; border: 2px solid rgba(0,0,0,.25); }
  ::-webkit-scrollbar-thumb:hover { background: #8a6538; }
}

/* Reduced motion: the skip link should simply appear, and hover polish
   shouldn't animate. (Global animation kill in v34.17 already covers most.) */
@media (prefers-reduced-motion: reduce) {
  .skip-link, .button, .navbtn { transition: none; }
}

/* ============================================================
   v36.5 — quick undo, contrast, and map-pin keyboard access
   ============================================================ */

/* Toast action button (Undo). The toast itself stays click-through so it
   can't block the bottom nav; only the button accepts taps. */
.toast { display: none; align-items: center; gap: 10px; }
.toast.active { display: inline-flex; }
.toast .toast-action {
  pointer-events: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 226, 154, .55);
  background: rgba(255, 226, 154, .14);
  color: #ffe29a;
  border-radius: 999px;
  padding: 5px 14px;
  min-height: 30px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.toast .toast-action:focus-visible { outline: 3px solid #ffd86e; outline-offset: 2px; }

/* Contrast fix: slot metadata sits on a darkened cell (rgba(0,0,0,.18) over
   parchment), where var(--faint) lands at ~3.5:1 — below AA for its tiny
   .68rem size. var(--muted) passes there and everywhere else these appear.
   Deliberately NOT changing the --faint token itself: it passes on plain
   parchment and is shared by dark-surface elements. */
.slot-meta, .slot-cell.empty { color: var(--muted); }

/* Map pins are now keyboard-focusable; give them a clear focus ring that
   survives the dark map background. */
.map-pin:focus-visible {
  outline: 3px solid #ffd86e;
  outline-offset: 3px;
  border-radius: 10px;
  z-index: 5;
}

/* ============================================================
   v36.6 — Actions/More/Stores restructure
   ============================================================ */

/* Settings are now grouped: General, Data & sync, Developer. */
.settings-group { margin-bottom: 14px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group-title {
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
/* The developer group reads as clearly separate from player-facing settings. */
.settings-group-dev {
  border: 1px dashed rgba(176, 108, 44, .55);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(176, 108, 44, .07);
}
.settings-group-dev .settings-group-title { border-bottom-color: rgba(176, 108, 44, .4); }

/* Boards that moved into Stores (Consumables, Plunder, Loot) get breathing
   room below the ammo grid so nothing clips into the slot tiles. */
.stores-boards { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.stores-boards .compact-board { margin-top: 0; }

/* ============================================================
   v36.7 — Actions tab dynamic readout anti-clipping fix
   The Ship Actions cards can contain long live strings such as
   "12× Ballista, light". Keep those values compact and wrapping
   so they do not force horizontal overflow on mobile or laptops.
   ============================================================ */
#screen-actions,
#screen-actions * {
  min-width: 0;
}

#screen-actions .actions-board,
#screen-actions .board-body,
#screen-actions .combat-tab-panel,
#screen-actions .combat-tab-panels,
#screen-actions .action-card {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#screen-actions .actions-card-grid,
#screen-actions .actions-top-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

#screen-actions .action-card {
  overflow: hidden;
}

#screen-actions .action-stat-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  margin: 2px 0 9px;
  padding: 8px 10px;
}

#screen-actions .action-stat-value {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  text-align: left;
  font-size: clamp(0.98rem, 0.55vw + 0.88rem, 1.18rem);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

#screen-actions .action-stat-meta {
  min-width: 0;
  max-width: 100%;
}

#screen-actions .action-stat-meta b {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: .035em;
}

#screen-actions .action-stat-meta span {
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  #screen-actions .action-card {
    padding: 10px;
  }
  #screen-actions .action-stat-readout {
    padding: 8px 9px;
  }
  #screen-actions .action-stat-value {
    font-size: 1.02rem;
  }
  #screen-actions .action-bullets {
    font-size: .84rem;
    line-height: 1.32;
  }
}


/* ============================================================
   v36.9 — Actions Broadside side-aware readiness
   ============================================================ */
.broadside-readiness {
  margin: 4px 0 10px;
  display: grid;
  gap: 7px;
}
.broadside-title {
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.broadside-title span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--ink);
}
.broadside-option {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px 9px;
}
.broadside-option-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}
.broadside-option-head b {
  font-size: .9rem;
  line-height: 1.15;
  color: var(--ink);
}
.broadside-option-head span {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}
.broadside-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.broadside-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(139,100,39,.45);
  background: rgba(185,132,44,.16);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .74rem;
  font-weight: 850;
  line-height: 1.2;
}
.broadside-chip.both {
  background: rgba(82, 120, 76, .16);
  border-color: rgba(82, 120, 76, .45);
}
.broadside-note {
  margin-top: 5px;
  font-size: .78rem;
  line-height: 1.25;
  color: var(--muted);
}
.broadside-readiness.not-ready .broadside-note {
  border-left: 3px solid var(--gold);
  padding-left: 8px;
  color: var(--ink);
}
}

/* v39.36: keep a first-time network chart hidden until its natural image size
   and the full-screen stage size are both available. This prevents the map
   being fitted as if it were 1px wide, which appeared as a blank pale panel on
   phones until the same chart was reopened from cache. */
.map-stage.is-loading .map-canvas,
.map-stage.is-loading .map-pin-layer,
.map-stage.is-loading .map-empty-hint {
  opacity: 0;
}
.map-stage .map-canvas,
.map-stage .map-pin-layer {
  transition: opacity .14s ease;
}
.map-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #f4edcf;
  font-weight: 850;
  letter-spacing: .01em;
  background: radial-gradient(circle at 50% 40%, rgba(60,42,22,.5), #160f08);
  pointer-events: none;
}
.map-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(244,237,207,.24);
  border-top-color: #e1aa3e;
  border-radius: 50%;
  animation: map-loading-spin .75s linear infinite;
}
@keyframes map-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .map-loading-spinner { animation-duration: 1.8s; }
  .map-stage .map-canvas,
  .map-stage .map-pin-layer { transition: none; }
}