:root {
      --bg: #242426;
      --text: #e6e6e6;
      --btn-bg: #2a2a2f;
      --btn-color: #e6e6e6;
      --btn-border: #3a3a40;
      --btn-hover: #34343a;
      --btn-disabled-bg: #3a3a40;
      --btn-disabled-color: #a3a3a3;
      --btn-disabled-border: #4a4a50;
      --prog-bg: #4a4a50;
      --prog-bar: #81c784;
      /* Dark card vars */
      --card-bg: #1f1f22;
      --card-border: #444;
      /* Badges on dark */
      --badge-warn: #ffd54f;
      --badge-disabled: #ff8a80;
      /* Runtime UI scale (affects table/card rendering) */
      --ui-scale: 1;
      --presentation-font-scale: 1;
      --card-type-scale: 1;
      --panel-heading-size: 13px;
      --panel-body-size: 13px;
      --panel-small-size: 12px;
      --panel-micro-size: 10px;
      --tutorial-main-size: 15px;
      --card-title-size: 16px;
      --card-desc-size: 13px;
      --card-badge-size: 12px;
      --card-stat-icon-size: 26px;
      --tutorial-attention-duration: 7s;
      --tutorial-attention-easing: ease-in-out;
      --tutorial-attention-angle: 118deg;
      --tutorial-attention-size: 340% 100%;
      --tutorial-attention-start: -145% 0;
      --tutorial-attention-mid: 50% 0;
      --tutorial-attention-end: 285% 0;
      --tutorial-attention-idle-opacity: 0.30;
      --tutorial-attention-peak-opacity: 0.72;
      --tutorial-attention-band-edge: rgba(255, 231, 167, 0.08);
      --tutorial-attention-band-peak: rgba(255, 231, 167, 0.30);
      --tutorial-attention-radial-core: rgba(216, 173, 98, 0.15);
      --tutorial-attention-radial-soft: rgba(216, 173, 98, 0.04);
      --tutorial-attention-outline-idle: rgba(244, 199, 111, 0.10);
      --tutorial-attention-outline-peak: rgba(244, 199, 111, 0.34);
      --tutorial-attention-frame-glow: rgba(244, 199, 111, 0.22);
      --message-dock-bottom: 14px;
      --message-header-height: 42px;
      --tutorial-message-gap: 12px;
    }

    html[data-presentation-tier="standard"] {
      --presentation-font-scale: 1.06;
      --card-type-scale: 1.08;
    }
    html[data-presentation-tier="large"] {
      --presentation-font-scale: 1.14;
      --card-type-scale: 1.14;
    }
    html[data-presentation-tier="wide"] {
      --presentation-font-scale: 1.22;
      --card-type-scale: 1.2;
    }
    html[data-presentation-tier] {
      --panel-heading-size: calc(13px * var(--presentation-font-scale));
      --panel-body-size: calc(13px * var(--presentation-font-scale));
      --panel-small-size: calc(12px * var(--presentation-font-scale));
      --panel-micro-size: max(11px, calc(10px * var(--presentation-font-scale)));
      --tutorial-main-size: calc(15px * var(--presentation-font-scale));
      --card-title-size: calc(16px * var(--card-type-scale));
      --card-desc-size: calc(13px * var(--card-type-scale));
      --card-badge-size: calc(12px * var(--card-type-scale));
      --card-stat-icon-size: calc(26px * var(--card-type-scale));
    }

    body {
      font-family: sans-serif;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      max-width: none;
      width: 100%;
      min-height: 100vh;
      margin: 0;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { max-width: 100%; overflow-x: hidden; }
    .floating-panel,
    .stats-panel {
      background:rgba(13, 14, 16, 0.9);
      border:1px solid rgba(216, 173, 98, 0.28);
      border-radius:8px;
      padding:10px;
      box-shadow:0 12px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter:blur(7px);
    }
    .floating-panel-title {
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:1px;
      font-size:13px;
      color:#e8e0c8;
      margin-bottom:8px;
    }
    .desk-status-stack {
      position:absolute;
      top:14px;
      right:14px;
      z-index:1380;
      display:grid;
      gap:9px;
      width:min(300px, calc(100% - 28px));
      pointer-events:none;
    }
    .desk-status-stack > * {
      pointer-events:auto;
    }
    .desk-options-row {
      display:flex;
      justify-content:stretch;
    }
    .options-menu-button {
      width:100%;
      min-height:36px;
      margin:0;
      border-color:rgba(216, 173, 98, 0.38);
      background:rgba(13, 14, 16, 0.86);
      color:#e8e0c8;
      border-radius:6px;
      padding:0 12px;
      font-weight:800;
      box-shadow:0 10px 24px rgba(0,0,0,0.34);
      backdrop-filter:blur(7px);
    }
    .stats-panel-title {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .stats-heading {
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:1px;
      font-size:13px;
      color:#e8e0c8;
    }
    .stats-time-chip {
      border:1px solid #334154;
      background:#17202b;
      color:#c7d7ee;
      border-radius:999px;
      padding:3px 8px;
      font-size:12px;
      font-weight:800;
      font-variant-numeric:tabular-nums;
      line-height:1.2;
    }
    .money-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .stat-card {
      min-width:0;
      border:1px solid #2f3338;
      border-radius:8px;
      background:#151518;
      padding:8px;
    }
    .stat-card-label,
    .status-chip-label {
      color:#8ea0ad;
      font-size:10px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0.08em;
      line-height:1.1;
    }
    .stat-card-value {
      margin-top:4px;
      color:#f4f0df;
      font-size:20px;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      line-height:1.1;
    }
    .stat-card-sub {
      margin-top:4px;
      color:#8ea0ad;
      font-size:11px;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .stat-meter {
      height:5px;
      margin-top:8px;
      border-radius:999px;
      overflow:hidden;
      background:#292c31;
    }
    .stat-meter-fill {
      height:100%;
      width:0%;
      border-radius:999px;
      transition:width 0.15s ease;
    }
    .money-clean { border-color:#31523d; }
    .money-clean .stat-card-value { color:#aee6b5; }
    .money-clean .stat-meter-fill { background:#6fc17b; }
    .money-clean.meter-hidden .stat-meter { display:none; }
    .money-clean.cover-gap { border-color:#6f5630; }
    .money-clean.cover-gap .stat-meter-fill { background:#d4ad64; }
    .money-dirty { border-color:#5b4328; }
    .money-dirty .stat-card-value { color:#f1c978; }
    .money-dirty .stat-meter { display:flex; }
    .money-dirty .stat-meter-fill { border-radius:0; }
    .money-dirty .stat-meter-fill:first-child { border-radius:999px 0 0 999px; }
    .money-dirty .stat-meter-fill:last-child { border-radius:0 999px 999px 0; }
    .money-dirty .covered-fill { background:#c89639; }
    .money-dirty .exposed-fill { background:#d85e56; }
    .money-clean.pressure { border-color:#8a4b45; box-shadow:0 0 0 1px rgba(255,115,115,0.12); }
    .money-dirty.active { background:#19150e; }
    .money-dirty.watch .stat-card-sub { color:#d4ad64; }
    .money-dirty.pressure { border-color:#8a6232; box-shadow:0 0 0 1px rgba(241,201,120,0.14); }
    .money-dirty.pressure .stat-card-sub { color:#f1c978; }
    .money-dirty.urgent { border-color:#8a4b45; background:#1a1212; box-shadow:0 0 0 1px rgba(255,115,115,0.16); }
    .money-dirty.urgent .stat-card-sub { color:#ffaaa3; }
    .money-clean.money-payout-arrival {
      border-color:rgba(174,230,181,0.72);
      box-shadow:0 0 0 1px rgba(174,230,181,0.30), 0 0 22px rgba(174,230,181,0.18);
      background:#121b15;
    }
    .money-dirty.money-payout-arrival {
      border-color:rgba(241,201,120,0.72);
      box-shadow:0 0 0 1px rgba(241,201,120,0.32), 0 0 24px rgba(241,201,120,0.20);
      background:#1f1a10;
    }
    .flow-card {
      margin-top:8px;
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      gap:8px 10px;
      border-color:#3b454b;
    }
    .flow-card.neg { border-color:#6c3b38; background:#181212; }
    .flow-card.warn { box-shadow:0 0 0 1px rgba(255,115,115,0.22); }
    .flow-value {
      justify-self:end;
      font-size:19px;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      color:#9ee29e;
      white-space:nowrap;
    }
    .flow-summary {
      grid-column:1 / -1;
      color:#aeb8c4;
      font-size:11px;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .status-grid {
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:8px;
      margin-top:8px;
    }
    .status-chip {
      min-width:0;
      border:1px solid #2f3338;
      border-radius:8px;
      background:#151518;
      padding:8px;
    }
    .status-chip-value {
      margin-top:4px;
      color:#f4f0df;
      font-size:17px;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      line-height:1.1;
    }
    .status-chip-sub {
      margin-top:3px;
      color:#8ea0ad;
      font-size:11px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .status-chip.heat.pressure { border-color:#7c3b39; background:#1a1212; }
    .status-chip.heat.pressure .status-chip-value { color:#ffaaa3; }
    .heat .stat-meter { margin-top:6px; }
    .heat .stat-meter-fill { background:#d85e56; }
    @media (max-width: 1100px) {
      .money-grid,
      .status-grid { grid-template-columns:1fr; }
      .flow-card { grid-template-columns:1fr; }
      .flow-value { justify-self:start; }
    }

    button {
      margin: 4px 0;
      padding: 0.5em 1em;
      background: var(--btn-bg);
      color: var(--btn-color);
      border: 1px solid var(--btn-border);
      border-radius: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    button:hover:not(:disabled) {
      background: var(--btn-hover);
    }
    button:disabled {
      background: var(--btn-disabled-bg);
      color: var(--btn-disabled-color);
      border-color: var(--btn-disabled-border);
      cursor: not-allowed;
      opacity: 0.8;
    }

    .hidden { display: none; }

    .progress {
      width: 200px;
      height: 16px;
      margin: 0;
      position: relative;
      background: var(--prog-bg);
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 4px;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background: var(--prog-bar);
      transition: width 0.1s linear;
    }

    .action {
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 208px;
      margin: 4px 0;
    }
    .action button {
      margin: 0;
    }
    .action .progress {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    /* World card specific adjustments */
    .world-card { overflow: hidden; }
    .world-card .progress { width: 100%; height: 12px; margin-top: 6px; }
    .world-card .progress .progress-bar { height: 100%; }
    /* Contextual info and action panel */
    .info-panel {
      background: #111;
      color: var(--card-ink);
      border: 1px solid rgba(194, 168, 106, 0.48);
      border-radius: 8px;
      padding: 12px;
      position: fixed;
      z-index: 2500;
      width: min(340px, calc(100vw - 24px));
      height: auto !important;
      max-height: min(420px, calc(100vh - 24px));
      margin: 0 !important;
      overflow: auto;
      box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .info-panel.pinned { border-color: #d8bd75; }
    .info-panel.hidden { display: none; }
    .info-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
    .info-row { margin: 4px 0; font-size: 13px; }
    #infoPanelDesc{ color: var(--card-ink-muted); }
    #infoPanelHint{ color: #c2a86a; white-space: pre-line; }
    #infoPanelStats{ color: #86c5ff; }
    .info-action-heading { margin: 8px 0 6px; font-size: 11px; font-weight: 800; color: #d8bd75; text-transform: uppercase; letter-spacing: 0.08em; }
    .info-action-option { display:block; width:100%; margin:6px 0 0; background:#222; color:var(--card-ink); border:1px solid #555; padding:8px 10px; border-radius:6px; font-size:var(--panel-body-size); text-align:left; }
    button.info-action-option { cursor:pointer; }
    button.info-action-option:hover { background:#2b2b2b; border-color:#766845; }
    .info-action-option[aria-disabled="true"] { opacity:0.86; cursor:default; background:#17191d; }
    .info-action-option-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .info-action-option-label { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .info-action-option-chip { flex:0 0 auto; border-radius:999px; padding:2px 7px; font-size:var(--panel-micro-size); font-weight:800; text-transform:uppercase; background:#203725; color:#9ee1a8; }
    .info-action-option-chip.blocked { background:#3b211f; color:#f0a093; }
    .info-action-option-chip.missing { background:#3b3320; color:#e7cf87; }
    .info-action-option-chip.unknown { background:#262c34; color:#b6c5d8; }
    .info-action-option-detail { margin-top:4px; color:var(--card-ink-muted); font-size:var(--panel-small-size); line-height:1.25; white-space:normal; }
    .info-action-auto-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; border-top:1px solid #3d3a34; padding-top:10px; }
    .info-action-auto-text { color:var(--card-ink); font-size:var(--panel-small-size); line-height:1.25; }
    .info-action-auto-cancel { flex:0 0 auto; border:1px solid #666; border-radius:6px; background:#2a2520; color:var(--card-ink); padding:7px 10px; font-size:var(--panel-body-size); cursor:pointer; }
    .info-action-auto-cancel:hover { background:#342d25; border-color:#8a7a55; }
    /* Unified tooltip styling */
    .ui-tooltip {
      position: fixed;
      z-index: 2000;
      background: #111;
      color: var(--text);
      border: 1px solid #333;
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.45);
      max-width: 320px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .12s ease, transform .12s ease;
    }
    .ui-tooltip.show { opacity: 1; transform: translateY(0); }
    .ui-tooltip h4 { margin: 0 0 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #cfc7ad; }
    .ui-tooltip .tip-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.25; }
    .ui-tooltip .pos { color: #9ee29e; }
    .ui-tooltip .neg { color: #ffb3b3; }
    .ui-tooltip hr { border: none; border-top: 1px solid #2a2a2f; margin: 6px 0; }
    #boardColumn { min-width: 0; width:100%; }
    #worldArea {
      height: 100vh;
      height: 100dvh;
      min-height: min(560px, 100vh);
      overflow: hidden;
      position: relative;
      background: #1b1b1e;
      cursor: grab;
      touch-action: none;
    }
    #worldArea.panning { cursor: grabbing; }
    #worldArea .world-card { cursor: grab; }
    #worldArea .world-card:active { cursor: grabbing; }
    .view-hud {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 1350;
      display: grid;
      gap: 7px;
      padding: 8px;
      border: 1px solid rgba(216, 173, 98, 0.36);
      border-radius: 8px;
      background: rgba(12, 13, 15, 0.88);
      color: var(--card-ink);
      box-shadow: 0 10px 28px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(7px);
      cursor: default;
    }
    .view-hud-title {
      color:#d5c18a;
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.08em;
      text-align:center;
      line-height:1;
    }
    .view-hud-controls {
      display:grid;
      grid-template-columns:32px 48px 32px;
      gap:5px;
      align-items:center;
    }
    .view-hud button {
      width:32px;
      height:32px;
      margin:0;
      padding:0;
      border-radius:6px;
      font-weight:900;
      line-height:1;
    }
    #zoomResetBtn {
      width:48px;
      font-size:11px;
      font-variant-numeric:tabular-nums;
    }
    .view-hud-hint {
      color:#9d916f;
      font-size:10px;
      line-height:1.15;
      text-align:center;
    }
    .offscreen-card-indicators {
      position: absolute;
      inset: 0;
      z-index: 1400;
      pointer-events: none;
    }
    .offscreen-card-indicator {
      position: absolute;
      width: 34px;
      height: 34px;
      margin: 0;
      padding: 0;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      border: 1px solid rgba(216, 173, 98, 0.72);
      background: rgba(14, 15, 17, 0.88);
      color: #f3ddb0;
      box-shadow: 0 6px 20px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.05);
      cursor: pointer;
      pointer-events: auto;
      backdrop-filter: blur(4px);
    }
    .offscreen-card-indicator:hover {
      border-color: #f0cf8f;
      background: rgba(36, 31, 22, 0.94);
    }
    .offscreen-card-indicator.offscreen-indicator-hint-target {
      z-index: 3;
      --tutorial-attention-inset: -4px;
    }
    .offscreen-card-indicator.offscreen-indicator-hint-target::after {
      inset: var(--tutorial-attention-inset);
      border-radius: inherit;
    }
    .offscreen-card-indicator-arrow {
      font-size: 20px;
      line-height: 1;
      font-weight: 900;
      transform: translateY(-1px);
    }
    .offscreen-card-indicator-count {
      position: absolute;
      right: -5px;
      top: -6px;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(0,0,0,0.5);
      background: #d8ad62;
      color: #14110c;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .offscreen-card-indicator-hint {
      position: absolute;
      z-index: 4;
      pointer-events: auto;
      isolation: isolate;
      --tutorial-attention-inset: 0;
    }
    .offscreen-card-indicator-hint::after {
      inset: var(--tutorial-attention-inset);
      border-radius: inherit;
      z-index: 0;
    }
    .offscreen-card-indicator-hint > * {
      position: relative;
      z-index: 1;
    }
    .offscreen-card-indicator-hint .guidance-alert-title {
      white-space: normal;
    }
    .offscreen-card-indicator-hint .guidance-alert-head {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .offscreen-card-indicator-hint-actions {
      margin-top: 10px;
      display: flex;
      justify-content: stretch;
    }
    .offscreen-card-indicator-hint-dismiss {
      width: 100%;
      min-height: 34px;
      border: 1px solid rgba(216, 173, 98, 0.5);
      border-radius: 7px;
      background: #201a10;
      color: #f3ddb0;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }
    .offscreen-card-indicator-hint-dismiss:hover {
      border-color: #f0cf8f;
      background: #2a2114;
      color: #fff5d7;
    }
    #questPanel {
      position: absolute;
      left: 16px;
      top: 16px;
      z-index: 1200;
      width: min(348px, calc(100% - 32px));
      max-height: calc(100% - 32px);
      overflow: auto;
      color: var(--card-ink);
      background: linear-gradient(180deg, rgba(18, 19, 22, 0.96), rgba(12, 13, 15, 0.94));
      border: 1px solid rgba(213, 193, 138, 0.34);
      border-radius: 8px;
      box-shadow: 0 18px 42px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
      padding: 13px;
      cursor: default;
    }
    #tutorialPanel {
      position: absolute;
      left: 50%;
      bottom: calc(var(--message-dock-bottom) + var(--message-header-height) + var(--tutorial-message-gap));
      transform: translateX(-50%);
      z-index: 1355;
      width: min(620px, calc(100% - 32px));
      border: 1px solid rgba(216, 173, 98, 0.5);
      border-top: 5px solid #d8ad62;
      border-radius: 8px;
      background: rgba(18, 16, 13, 0.96);
      color: var(--card-ink);
      padding: 12px 14px;
      box-shadow: 0 18px 60px rgba(0,0,0,0.55);
      backdrop-filter: blur(10px);
      cursor: default;
    }
    #tutorialPanel.hidden {
      display: none;
    }
    .tutorial-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      margin-bottom: 8px;
    }
    .tutorial-step-name {
      color: #d8ad62;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1.25;
      padding-top: 2px;
    }
    .tutorial-progress {
      border: 1px solid rgba(216, 173, 98, 0.36);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.2);
      color: #f0cf8f;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }
    .tutorial-copy {
      display: grid;
      gap: 6px;
    }
    .tutorial-main {
      color: var(--card-ink);
      font-size: 15px;
      line-height: 1.32;
      font-weight: 900;
    }
    .tutorial-detail {
      color: #d6c7a5;
      font-size: 12px;
      line-height: 1.35;
    }
    .tutorial-flavor {
      color: rgba(220, 210, 188, 0.66);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12px;
      font-style: italic;
      line-height: 1.35;
    }
    .tutorial-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .tutorial-actions button {
      min-height: 30px;
      border: 1px solid rgba(216, 173, 98, 0.32);
      border-radius: 7px;
      background: #17191c;
      color: var(--card-ink);
      padding: 5px 9px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .tutorial-actions button:hover:not(:disabled) {
      border-color: #d8ad62;
      background: #262016;
    }
    .tutorial-actions button:disabled {
      cursor: default;
      opacity: 0.45;
    }
    .ring-wrap.tutorial-highlight { filter: none; }
    .ring-wrap.tutorial-highlight .world-card,
    .ring-wrap.offscreen-indicator-hint-card .world-card {
      box-shadow: inset 0 0 0 1px var(--tutorial-attention-outline-idle), 0 12px 32px rgba(0,0,0,0.34);
    }
    .ring-wrap.tutorial-highlight .world-card::before,
    .ring-wrap.offscreen-indicator-hint-card .world-card::before {
      inset: 0;
      z-index: 4;
    }
    .ring-wrap.tutorial-highlight .world-card::before,
    .ring-wrap.offscreen-indicator-hint-card .world-card::before,
    .offscreen-card-indicator.offscreen-indicator-hint-target::after,
    .offscreen-card-indicator-hint::after,
    .tutorial-ui-highlight::after {
      content: "";
      position: absolute;
      pointer-events: none;
      background:
        linear-gradient(var(--tutorial-attention-angle), transparent 0%, transparent 26%, var(--tutorial-attention-band-edge) 42%, var(--tutorial-attention-band-peak) 50%, var(--tutorial-attention-band-edge) 58%, transparent 74%, transparent 100%),
        radial-gradient(120% 90% at 50% 50%, var(--tutorial-attention-radial-core), var(--tutorial-attention-radial-soft) 48%, transparent 72%);
      background-size: var(--tutorial-attention-size), 100% 100%;
      background-position: var(--tutorial-attention-start), 50% 50%;
      mix-blend-mode: screen;
      animation: tutorialAttentionSweep var(--tutorial-attention-duration) var(--tutorial-attention-easing) infinite;
    }
    .offscreen-card-indicator.offscreen-indicator-hint-target,
    .offscreen-card-indicator-hint,
    .tutorial-ui-highlight {
      animation: tutorialAttentionFrame var(--tutorial-attention-duration) var(--tutorial-attention-easing) infinite;
    }
    @keyframes tutorialAttentionSweep {
      0%, 12% { opacity: var(--tutorial-attention-idle-opacity); background-position: var(--tutorial-attention-start), 50% 50%; }
      38% { opacity: var(--tutorial-attention-peak-opacity); background-position: var(--tutorial-attention-mid), 50% 50%; }
      58%, 100% { opacity: var(--tutorial-attention-idle-opacity); background-position: var(--tutorial-attention-end), 50% 50%; }
    }
    @keyframes tutorialAttentionFrame {
      0%, 12%, 58%, 100% { box-shadow: inset 0 0 0 1px var(--tutorial-attention-outline-idle), 0 0 0 rgba(244, 199, 111, 0); }
      38% { box-shadow: inset 0 0 0 1px var(--tutorial-attention-outline-peak), 0 0 18px var(--tutorial-attention-frame-glow); }
    }
    .quest-panel-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      color: #e8e0c8;
    }
    .quest-panel-heading-button {
      width: 100%;
      min-height: 0;
      margin: 0 0 10px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
    }
    .quest-panel-heading-button:hover,
    .quest-panel-heading-button:focus-visible {
      color: #f0cf8f;
      outline: none;
    }
    #questPanel.quest-panel-collapsed .quest-panel-heading {
      margin-bottom: 0;
    }
    .quest-panel-toggle {
      width: 28px;
      height: 28px;
      min-height: 28px;
      margin: 0;
      padding: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(216, 173, 98, 0.38);
      border-radius: 5px;
      background: #171719;
      color: #d5c18a;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }
    .quest-panel-heading-button:hover .quest-panel-toggle,
    .quest-panel-heading-button:focus-visible .quest-panel-toggle {
      border-color: #d8ad62;
      background: #262016;
    }
    #questPanel.quest-panel-collapsed .quest-panel-body {
      display: none;
    }
    .questline {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 10px;
    }
    .questline:first-of-type {
      border-top: 0;
      padding-top: 0;
    }
    .questline-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }
    .questline-title {
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #f1e6c8;
    }
    .questline-summary {
      margin-top: 3px;
      color: var(--card-ink-muted);
      font-size: 12px;
      line-height: 1.3;
    }
    .questline-chip {
      min-width: 44px;
      border: 1px solid rgba(100, 111, 128, 0.85);
      border-radius: 999px;
      padding: 3px 9px;
      text-align: center;
      color: #d8dee8;
      background: rgba(35, 41, 50, 0.9);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }
    .questline-chip.complete {
      color: #151611;
      background: #d5c18a;
      border-color: #d5c18a;
    }
    .questline-meter {
      height: 5px;
      margin: 10px 0;
      border-radius: 999px;
      background: rgba(50, 54, 62, 0.9);
      overflow: hidden;
    }
    .questline-meter-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #6fb98c, #d5c18a);
      transition: width 140ms ease;
    }
    .quest-goals {
      display: grid;
      gap: 0;
      position: relative;
    }
    .quest-goal {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 6px 0;
      position: relative;
    }
    .quest-goal-marker {
      width: 18px;
      height: 18px;
      border: 1px solid #566173;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      color: transparent;
      background: #171b21;
      box-shadow: 0 0 0 3px rgba(18, 19, 22, 0.96);
      margin-top: 1px;
      position: relative;
    }
    .quest-goal:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 24px;
      bottom: -7px;
      width: 1px;
      background: rgba(86, 97, 115, 0.52);
    }
    .quest-goal.complete .quest-goal-marker {
      color: #10130f;
      background: #6fb98c;
      border-color: #6fb98c;
    }
    .quest-goal.active .quest-goal-marker {
      color: transparent;
      background: #171b21;
      border-color: #d5c18a;
    }
    .quest-goal.active .quest-goal-marker::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d5c18a;
    }
    .quest-goal.locked {
      opacity: 0.72;
    }
    .quest-goal-label {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
    }
    .quest-goal-detail {
      margin-top: 2px;
      color: var(--card-ink-muted);
      font-size: 12px;
      line-height: 1.25;
    }
    /* Responsive: keep floating desk panels inside narrow screens */
    @media (max-width: 900px) {
      :root { --message-dock-bottom: 10px; }
      #appLayout { grid-template-columns: 1fr; }
      #questPanel { left: 12px; top: 12px; width: min(300px, calc(100% - 24px)); }
      #tutorialPanel { width: min(520px, calc(100% - 24px)); }
      .view-hud { right: 10px; bottom: 10px; }
      .desk-status-stack { right: 10px; top: 10px; width:min(282px, calc(100% - 20px)); }
    }
    @media (max-width: 560px) {
      .desk-status-stack {
        left: 10px;
        right: 10px;
        width: auto;
        max-height: min(320px, 42vh);
        overflow: auto;
        pointer-events: auto;
        contain: paint;
        padding-right: 2px;
      }
    }
    /* Cash flow indicator states */
    #moneyFlowValue.neg { color: #ffb3b3; }
    #moneyFlowValue.warn { font-weight: 800; animation: flowPulse 1s ease-in-out infinite; }
    @keyframes flowPulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
    .guidance-panel {
      position:absolute;
      top:12px;
      left:50%;
      transform:translateX(-50%);
      z-index:1200;
      width:auto;
      max-width:calc(100% - 24px);
      max-height:40vh;
      overflow:visible;
      background:transparent;
      border:0;
      border-radius:0;
      padding:0;
      box-shadow:none;
      cursor:default;
      pointer-events:none;
    }
    .guidance-panel-title { display:none; }
    .guidance-alert-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; align-items:stretch; pointer-events:none; }
    .guidance-alert {
      flex:0 0 300px;
      width:300px;
      max-width:calc(100vw - 56px);
      margin:0;
      text-align:left;
      background:rgba(11,11,13,0.96);
      border:1px solid #2f3338;
      border-left:4px solid #e7cf87;
      border-radius:8px;
      padding:9px 10px;
      color:var(--card-ink);
      box-shadow:0 8px 22px rgba(0,0,0,0.4);
      pointer-events:auto;
    }
    .guidance-alert.is-clickable { cursor:pointer; }
    .guidance-alert.is-clickable:hover { background:#151518; border-color:#454a52; }
    .guidance-alert.guidance-urgent { border-left-color:#f0a093; }
    .guidance-alert.guidance-critical { border-left-color:#ff7373; box-shadow:0 0 0 1px rgba(255,115,115,0.18); }
    .guidance-alert-head { display:grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items:center; gap:8px; margin-bottom:5px; }
    .guidance-alert-title { font-size:13px; font-weight:800; color:var(--card-ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .guidance-alert-chip { flex:0 0 auto; border-radius:999px; padding:2px 7px; font-size:10px; font-weight:800; text-transform:uppercase; background:#2b2b2b; color:#e7cf87; }
    .guidance-alert-chip.guidance-urgent { color:#f0a093; }
    .guidance-alert-chip.guidance-critical { color:#ff7373; }
    .guidance-alert-dismiss {
      width:20px;
      height:20px;
      margin:0;
      padding:0;
      border:1px solid #444;
      border-radius:999px;
      background:#171719;
      color:#cfc7ad;
      font-size:12px;
      line-height:1;
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .guidance-alert-dismiss:hover { background:#26262a; color:#fff; }
    .guidance-alert-body { color:var(--card-ink-muted); font-size:12px; line-height:1.3; }
    .alert-empty-state { color:#8ea0ad; font-size:12px; padding:4px 0; }
    .tutorial-ui-highlight {
      position: relative;
      isolation: isolate;
      --tutorial-attention-inset: 0;
    }
    .tutorial-ui-highlight::after {
      inset: var(--tutorial-attention-inset);
      border-radius: inherit;
      z-index: 20;
    }
    body.main-menu-open #appLayout,
    body.demo-complete-active #appLayout,
    body.game-over-active #appLayout {
      filter: saturate(0.72) brightness(0.78);
      transition: filter 160ms ease;
    }
    body.endgame-review-mode #appLayout {
      filter: saturate(0.58) brightness(0.72);
    }
    /* Shell overlays are browser-viewport scoped; in-game HUD stays inside #worldArea. */
    .shell-overlay {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: grid;
      place-items: center;
      padding: 34px;
      background: rgba(9, 11, 14, 0.36);
      backdrop-filter: blur(10px) saturate(0.82);
    }
    .shell-overlay.hidden,
    .endgame-review-controls.hidden {
      display: none;
    }
    .desktop-warning-overlay {
      z-index: 5600;
      background: rgba(7, 8, 10, 0.58);
      backdrop-filter: blur(12px) saturate(0.78);
    }
    .desktop-warning-dialog {
      width: min(430px, 100%);
      padding: 22px;
      border: 1px solid rgba(216,189,117,0.42);
      border-radius: 8px;
      background: rgba(16, 18, 22, 0.96);
      box-shadow: 0 24px 64px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .desktop-warning-dialog h2 {
      margin: 0 0 10px;
      color: var(--text);
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: 0;
    }
    .desktop-warning-dialog p {
      margin: 0;
      color: #d4cbba;
      font-size: 15px;
      line-height: 1.45;
    }
    .desktop-warning-actions {
      margin-top: 18px;
      display: grid;
    }
    .main-menu-card {
      width: min(940px, 100%);
      min-height: 430px;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 22px;
      padding: 28px;
      border: 1px solid rgba(255,255,255,0.26);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)), rgba(15,18,23,0.72);
      box-shadow: 0 26px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .main-menu-brand {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 48px;
      line-height: 0.92;
      letter-spacing: 0;
      color: var(--text);
    }
    .main-menu-copy {
      display: grid;
      align-content: center;
      gap: 14px;
      min-width: 0;
    }
    .main-menu-copy p {
      max-width: 280px;
      margin: 0;
      color: #d4cbba;
      font-size: 15px;
      line-height: 1.5;
    }
    .main-menu-actions {
      display: grid;
      gap: 9px;
      max-width: 280px;
      margin-top: 8px;
    }
    .main-menu-option {
      max-width: 280px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 9px 10px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 4px;
      background: rgba(0,0,0,0.18);
      color: #d4cbba;
      font-size: 13px;
      line-height: 1.25;
      cursor: pointer;
    }
    .main-menu-option input {
      margin-top: 2px;
    }
    .main-menu-option b {
      display: block;
      color: var(--text);
      font-size: 13px;
    }
    .main-menu-option span {
      color: #a89f93;
      font-size: 12px;
    }
    .shell-button {
      min-height: 42px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 4px;
      background: rgba(255,255,255,0.07);
      color: var(--text);
      font: inherit;
      font-weight: 850;
      text-align: left;
      cursor: pointer;
    }
    .shell-button.hidden,
    .shell-button[hidden] {
      display: none;
    }
    .shell-button.primary {
      border-color: rgba(216,189,117,0.66);
      background: rgba(216,189,117,0.17);
      color: #f5dfa3;
    }
    .shell-button.featured {
      min-height: 58px;
      padding: 13px 14px;
      font-size: 17px;
      box-shadow: 0 0 0 1px rgba(216,189,117,0.16), 0 10px 26px rgba(0,0,0,0.22);
    }
    .shell-button:hover:not(:disabled) {
      background: rgba(255,255,255,0.11);
    }
    .shell-button.primary:hover:not(:disabled) {
      background: rgba(216,189,117,0.22);
    }
    .shell-button span {
      color: #a89f93;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .shell-save-summary {
      display: grid;
      gap: 10px;
      align-content: center;
    }
    .shell-save-card {
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 4px;
      background: rgba(0,0,0,0.22);
    }
    .shell-save-card b {
      display: block;
      margin-bottom: 3px;
      color: var(--text);
      font-size: 13px;
      text-transform: uppercase;
    }
    .shell-save-card span {
      color: #b9b0a0;
      font-size: 12px;
      line-height: 1.35;
    }
    .shell-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 5200;
      max-width: min(420px, calc(100% - 36px));
      padding: 12px 14px;
      border: 1px solid rgba(216,189,117,0.42);
      border-radius: 4px;
      background: rgba(11,13,16,0.92);
      color: #f2deb2;
      box-shadow: 0 16px 36px rgba(0,0,0,0.44);
      transform: translate(-50%, 18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
      font-size: 13px;
      font-weight: 800;
    }
    .shell-toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .endgame-debrief {
      width: min(860px, 100%);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 270px;
      gap: 18px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,0.23);
      border-radius: 8px;
      background: rgba(17,20,24,0.91);
      box-shadow: 0 28px 70px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .endgame-debrief h2 {
      margin: 0 0 8px;
      font-size: 30px;
      line-height: 1.08;
      letter-spacing: 0;
    }
    .endgame-section-title {
      margin: 0 0 8px;
      color: #d5c18a;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .debrief-reason {
      margin: 0;
      padding: 12px;
      border-radius: 4px;
      font-weight: 800;
      line-height: 1.4;
    }
    .debrief-reason.loss {
      border-left: 4px solid #c8645c;
      background: rgba(200,100,92,0.1);
      color: #f0c0ba;
    }
    .debrief-reason.victory {
      border-left: 4px solid #d5c18a;
      background: rgba(216,189,117,0.13);
      color: #f5dfa3;
    }
    .endgame-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }
    .endgame-stat {
      min-height: 92px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 4px;
      background: rgba(255,255,255,0.055);
    }
    .endgame-stat b {
      display: block;
      margin-bottom: 5px;
      color: var(--text);
      font-size: 22px;
    }
    .endgame-stat span {
      color: #b9b0a0;
      font-size: 12px;
      line-height: 1.3;
    }
    .endgame-actions {
      display: grid;
      gap: 9px;
      align-content: center;
    }
    .endgame-review-controls {
      position: fixed;
      inset: auto 30px 28px 30px;
      z-index: 5100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      pointer-events: none;
    }
    .endgame-review-controls .shell-button {
      border-color: rgba(216,189,117,0.58);
      background: rgba(216,189,117,0.15);
      color: #f5dfa3;
      pointer-events: auto;
    }
    .save-load-overlay {
      z-index: 5400;
    }
    .save-load-dialog {
      width: min(520px, 100%);
      padding: 18px;
      border: 1px solid rgba(216,189,117,0.42);
      border-radius: 8px;
      background: rgba(16, 18, 22, 0.97);
      box-shadow: 0 24px 64px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.1);
      color: var(--text);
    }
    .save-load-head {
      display:flex;
      align-items:start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:14px;
    }
    .save-load-title {
      color:var(--text);
      font-size:22px;
      line-height:1.1;
      font-weight:900;
      letter-spacing:0;
    }
    .save-load-subtitle {
      margin-top:5px;
      color:#b9b0a0;
      font-size:13px;
      line-height:1.35;
    }
    .save-load-close {
      width:32px;
      height:32px;
      margin:0;
      padding:0;
      border-radius:6px;
      font-size:18px;
      line-height:1;
      flex:0 0 auto;
    }
    .save-controls-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .save-controls-grid button {
      width:100%;
      min-height:38px;
      margin:0;
      font-weight:800;
    }
    .save-controls-grid #freshReload {
      grid-column:1 / -1;
    }
    @media (max-width: 900px) {
      .shell-overlay { padding: 18px; }
      .main-menu-card,
      .endgame-debrief {
        grid-template-columns: 1fr;
      }
      .main-menu-card {
        min-height: 0;
      }
      .endgame-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .endgame-review-controls {
        left: 18px;
        right: 18px;
        flex-direction: column;
        align-items: stretch;
      }
    }
    @media (max-width: 560px) {
      .main-menu-brand { font-size: 40px; }
      .endgame-stat-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      #appLayout { grid-template-columns: 1fr !important; }
    }
    html[data-presentation-tier] .stats-heading,
    html[data-presentation-tier] .floating-panel-title,
    html[data-presentation-tier] .log-title,
    html[data-presentation-tier] .quest-panel-heading {
      font-size: var(--panel-heading-size) !important;
    }
    html[data-presentation-tier] .stats-time-chip,
    html[data-presentation-tier] .stat-card-sub,
    html[data-presentation-tier] .status-chip-sub,
    html[data-presentation-tier] .flow-summary,
    html[data-presentation-tier] .info-action-option-detail,
    html[data-presentation-tier] .info-action-auto-text,
    html[data-presentation-tier] .tutorial-detail,
    html[data-presentation-tier] .tutorial-flavor,
    html[data-presentation-tier] .tutorial-actions button,
    html[data-presentation-tier] .guidance-alert-body,
    html[data-presentation-tier] .alert-empty-state,
    html[data-presentation-tier] #cardMessages,
    html[data-presentation-tier] .view-hud,
    html[data-presentation-tier] #timePanel,
    html[data-presentation-tier] #saveMenuOpen,
    html[data-presentation-tier] #mainMenuSaves,
    html[data-presentation-tier] #saveControls button {
      font-size: var(--panel-small-size) !important;
    }
    html[data-presentation-tier] .stat-card-label,
    html[data-presentation-tier] .status-chip-label,
    html[data-presentation-tier] .info-action-heading,
    html[data-presentation-tier] .info-action-option-chip,
    html[data-presentation-tier] .tutorial-progress,
    html[data-presentation-tier] .guidance-alert-chip,
    html[data-presentation-tier] .view-hud-title,
    html[data-presentation-tier] .view-hud-hint {
      font-size: var(--panel-micro-size) !important;
    }
    html[data-presentation-tier] .stat-card-value {
      font-size: calc(20px * var(--presentation-font-scale)) !important;
    }
    html[data-presentation-tier] .flow-value {
      font-size: calc(19px * var(--presentation-font-scale)) !important;
    }
    html[data-presentation-tier] .status-chip-value {
      font-size: calc(17px * var(--presentation-font-scale)) !important;
    }
    html[data-presentation-tier] .info-title {
      font-size: calc(16px * var(--presentation-font-scale)) !important;
    }
    html[data-presentation-tier] .info-row,
    html[data-presentation-tier] .info-action-option-label,
    html[data-presentation-tier] .info-action-auto-cancel,
    html[data-presentation-tier] .ui-tooltip h4,
    html[data-presentation-tier] .ui-tooltip .tip-row,
    html[data-presentation-tier] .quest-goal-label,
    html[data-presentation-tier] .guidance-alert-title {
      font-size: var(--panel-body-size) !important;
    }
    html[data-presentation-tier] .tutorial-step-name,
    html[data-presentation-tier] .questline-summary,
    html[data-presentation-tier] .quest-goal-detail {
      font-size: var(--panel-small-size) !important;
    }
    html[data-presentation-tier] .tutorial-main {
      font-size: var(--tutorial-main-size) !important;
    }
    html[data-presentation-tier] .questline-title {
      font-size: calc(14px * var(--presentation-font-scale)) !important;
    }

.log-entry { padding: 2px 0; color:#d7d7d7; }
              .log-important { color:#ffd58a; }
              .log-urgent { color:#ff9f9f; font-weight:700; }
              .log-flash { animation: logFlash 0.6s ease; }
              @keyframes logFlash { 0% { background:#2a2a2f; } 100% { background: transparent; } }

:root {
          --card-ink: #e8e0c8;
          --card-ink-muted: #cfc7ad;
          --card-radius: 22px;
          --card-edge: 4px;
          --card-title-h: 48px;
          --card-desc-h: 70px;
        }
        .world-card { position: relative; border-radius: var(--card-radius); border: var(--card-edge) solid transparent; background: linear-gradient(#000,#000) padding-box, radial-gradient(140% 120% at 50% -20%, #6f6f6f 40%, #222222 80%) border-box; aspect-ratio: 10 / 16; overflow: hidden; display: grid; grid-template-rows: var(--card-title-h) calc(100% - var(--card-title-h) - var(--card-desc-h)) var(--card-desc-h); width: 230px; color: var(--card-ink); }
        .world-card.player-owned { background: linear-gradient(#030303,#030303) padding-box, linear-gradient(155deg, #e8c15a 0%, #806228 28%, #3e7d73 64%, #24241f 100%) border-box; box-shadow: 0 0 0 1px rgba(232,193,90,0.28), 0 8px 18px rgba(0,0,0,0.28); }
        .world-card.player-owned .world-card-title { color:#f5dfa1; }
        .world-card-title { display: grid; place-items: center; padding-inline: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: var(--card-title-size); text-shadow: 0 1px 0 #000; text-align: center; background: #000; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; z-index: 2; }
        .world-card-art { position: relative; overflow: hidden; display: grid; place-items: center; background: #000; z-index: 1; }
        .world-card-art { display:flex; align-items:center; justify-content:center; }
        .world-card-art > img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; }
        .world-card.recruit .world-card-artImg{ filter: grayscale(1) contrast(0.95); }
        .world-card-artEmoji { font-size: 42px; line-height: 1; filter: saturate(0.9); }
        .world-card-aggregate-face { position:absolute; left:10px; right:10px; bottom:10px; z-index:5; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:stretch; gap:8px; padding:7px; border:1px solid rgba(242,212,134,0.70); border-radius:7px; background:rgba(12,10,5,0.86); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.75), 0 2px 10px rgba(0,0,0,0.34); pointer-events:none; }
        .world-card-aggregate-primary { display:grid; place-items:center; align-content:center; min-width:48px; padding-right:7px; border-right:1px solid rgba(242,212,134,0.28); color:#f4e3af; line-height:1; }
        .world-card-aggregate-primary-value { font-size:calc(var(--card-title-size) * 1.85); font-weight:900; font-variant-numeric:tabular-nums; }
        .world-card-aggregate-primary-label,
        .world-card-aggregate-metric-label { color:#cfc7ad; font-size:calc(var(--card-badge-size) * 0.78); font-weight:900; line-height:1; text-transform:uppercase; letter-spacing:0; }
        .world-card-aggregate-metrics { min-width:0; display:grid; gap:4px; align-content:center; }
        .world-card-aggregate-metric { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:2px; border-bottom:1px dotted rgba(255,255,255,0.22); line-height:1; }
        .world-card-aggregate-metric-value { color:#f4e3af; font-size:var(--card-badge-size); font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }
        .world-card-aggregate-trouble .world-card-aggregate-metric-value { color:#ffd6d6; }
        .world-card-desc { background: #000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:0; padding: 4px 14px 10px; z-index: 2; position: relative; }
        .world-card-descText { color: var(--card-ink-muted); text-align:center; line-height:1.25; font-size:var(--card-desc-size); display:-webkit-box; -webkit-line-clamp:3; line-clamp: 3; -webkit-box-orient:vertical; overflow:hidden; margin:0; min-width:0; max-width:100%; position:relative; z-index:1; }
        .world-card.has-card-countdown .world-card-desc { padding-top:5px; padding-bottom:8px; }
        .world-card.has-card-countdown .world-card-descText { -webkit-line-clamp:2; line-clamp: 2; }
        .world-card-descDyn { display:none; margin:0; max-width:100%; color:#d9bd75; text-align:center; line-height:1.15; font-size:calc(var(--card-desc-size) * 0.86); overflow:hidden; text-overflow:ellipsis; position:relative; z-index:1; }
        .world-card-descDyn:not(:empty) { display:block; }
        .world-card-descDyn.is-countdown { flex:0 0 auto; min-width:42px; padding:2px 7px; border-radius:999px; background:#2a0f0f; border:1px solid rgba(163,51,51,0.8); box-shadow:0 0 0 1px rgba(0,0,0,0.45); color:#ffd6d6; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
        .world-card-desc::after{ content: ""; position:absolute; left:0; right:0; bottom:0; height:16px; background: linear-gradient(to bottom, rgba(0,0,0,0), #000); pointer-events:none; z-index:0; }
        .world-card .progress { position:absolute; left:0; right:0; bottom:0; width:100%; height:8px; background: var(--prog-bg); z-index: 3; }
        .world-card.ring-active .progress { display: none; }
        .world-card .progress .progress-bar { height:100%; background: var(--prog-bar); }
        .world-card-badge { position:absolute; top:6px; right:6px; font-size:var(--card-badge-size); padding:2px 6px; border-radius:10px; background: rgba(0,0,0,0.5); }
        .world-card-badge.left{ left:6px; right:auto; }
        .world-card-badge.left.badge-action{ background: rgba(61,49,22,0.78); color:#f3ddb0; border:1px solid rgba(180,154,99,0.45); }
        .ring-wrap.consequence-active .world-card-badge.left.badge-action,
        .ring-wrap.heat-active .world-card-badge.left.badge-action{ top:30px; }
        .world-card-badge.left.badge-cooldown{ background: rgba(33,45,51,0.78); color:#c8d7db; border:1px solid rgba(127,146,153,0.45); }
        .ring-wrap.consequence-active .world-card-badge.left.badge-cooldown,
        .ring-wrap.heat-active .world-card-badge.left.badge-cooldown{ top:30px; }
        .world-card-badge.left.badge-consequence,
        .world-card-badge.left.badge-heat{ background:#5a1818; color:#ffd6d6; border:1px solid #a33; box-shadow:0 0 0 1px rgba(0,0,0,0.35), 0 0 10px rgba(255,82,82,0.42); }
        .world-card-art .world-card-stats { position:absolute; left:50%; bottom:8px; transform: translateX(-50%); display:flex; align-items:center; gap:6px; z-index:5; pointer-events:none; max-width:calc(100% - 20px); padding:3px 8px 3px 5px; border-radius:999px; background: rgba(0,0,0,0.76); border:1px solid rgba(255,255,255,0.18); color:#e0e0e0; text-shadow:0 1px 0 #000; }
        .world-card-stat { display:inline-flex; align-items:center; gap:2px; min-width:0; font-size:var(--card-badge-size); font-weight:900; font-variant-numeric:tabular-nums; line-height:1; }
        .world-card-stat-token { display:inline-grid; place-items:center; width:var(--card-stat-icon-size); height:var(--card-stat-icon-size); flex:0 0 auto; border:1px solid rgba(217,183,96,0.9); border-radius:999px; background:#050505; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.55); overflow:hidden; }
        .world-card-stat-icon { display:block; width:92%; height:92%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
        .world-card-stat-value { min-width:0.65em; text-align:left; color:#f4e3af; }
        #worldCanvasFrame { position: relative; min-width: 100%; min-height: 100%; }
        #worldCanvas { position: absolute; left: 0; top: 0; min-width: 100%; min-height: 100%; transform: translate(var(--desk-pan-x, 0px), var(--desk-pan-y, 0px)) scale(var(--ui-scale, 1)); transform-origin: top left; }
        .world-visual-effects-layer { position:absolute; left:0; top:0; width:0; height:0; overflow:visible; pointer-events:none; z-index:9500; }
        .screen-visual-effects-layer { position:fixed; left:0; top:0; width:0; height:0; overflow:visible; pointer-events:none; z-index:10000; }
        .money-flight-token {
          display:grid;
          grid-template-columns:22px 1fr;
          grid-template-rows:1fr 1fr;
          align-items:center;
          gap:0 6px;
          padding:5px 8px 5px 6px;
          border:1px solid rgba(255,255,255,0.22);
          border-radius:8px;
          background:#111713;
          box-shadow:0 8px 18px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(0,0,0,0.45);
          color:#f4f0df;
          font-weight:900;
          font-variant-numeric:tabular-nums;
          line-height:1;
        }
        .money-flight-token.money-flight-animating { pointer-events:none; will-change:transform, opacity; }
        .money-flight-mark {
          grid-row:1 / span 2;
          display:grid;
          place-items:center;
          width:22px;
          height:22px;
          border-radius:999px;
          background:#07120b;
          border:1px solid rgba(174,230,181,0.45);
          color:#aee6b5;
          font-size:15px;
        }
        .money-flight-value { font-size:14px; }
        .money-flight-label {
          color:#8ea0ad;
          font-size:9px;
          font-weight:800;
          text-transform:uppercase;
          letter-spacing:0.08em;
        }
        .money-flight-dirty {
          background:#1a150d;
          border-color:rgba(241,201,120,0.32);
        }
        .money-flight-dirty .money-flight-mark {
          background:#161006;
          border-color:rgba(241,201,120,0.52);
          color:#f1c978;
        }
        .money-flight-clean { border-color:rgba(174,230,181,0.32); }
        .world-visual-effects-layer .ring-wrap { pointer-events:none; }
        .ring-wrap { position: relative; }
        .ring-wrap.spawn-animating { pointer-events:none; will-change: transform, opacity; }
        .ring-wrap .world-card{ position: relative; z-index: 1; }
        .ring-wrap.guidance-focus { animation: guidanceFocusPulse 0.9s ease; }
        @keyframes guidanceFocusPulse { 0% { filter: brightness(1.45); } 100% { filter: brightness(1); } }
        .stack-frame { border:0; border-radius: calc(var(--card-radius) + 10px); background: transparent; z-index: 80; pointer-events:none; }
        .stack-frame.ring-active:not(.consequence-active)::before{ content:""; position:absolute; inset:-4px; border-radius: calc(var(--card-radius) + 11px); padding:5px; background: conic-gradient(#b49a63 calc(var(--ring-action-p,0)*1turn), #333 0); pointer-events:none; z-index:-1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .stack-frame.consequence-active::before{ content:""; position:absolute; inset:-9px; border-radius: calc(var(--card-radius) + 16px); padding:4px; background: conic-gradient(#ff5252 calc(var(--ring-consequence-p,0)*1turn), #2a2a2f 0); pointer-events:none; z-index:-1; box-shadow:0 0 8px rgba(255,82,82,0.24); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .stack-frame.consequence-active.ring-active::after{ content:""; position:absolute; inset:-4px; border-radius: calc(var(--card-radius) + 11px); padding:4px; background: conic-gradient(#d9bd75 calc(var(--ring-action-p,0)*1turn), #333 0); pointer-events:none; z-index:-1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.drag-lifted { z-index: var(--drag-z, 10000) !important; }
        .ring-wrap.drop-target-dimmed { filter:saturate(0.42) brightness(0.52) contrast(0.88); transition: filter 90ms ease; }
        .ring-wrap.ring-active:not(.consequence-active):not(.heat-active)::before{ content:""; position:absolute; inset:-6px; border-radius: calc(var(--card-radius) + 6px); padding:4px; background: conic-gradient(#b49a63 calc(var(--ring-action-p,0)*1turn), #333 0); pointer-events:none; z-index: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.cooldown-active:not(.ring-active):not(.consequence-active):not(.heat-active)::before{ content:""; position:absolute; inset:-6px; border-radius: calc(var(--card-radius) + 6px); padding:4px; background: conic-gradient(#7f9299 calc(var(--ring-cooldown-p,0)*1turn), #333 0); pointer-events:none; z-index: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.consequence-active::before,
        .ring-wrap.heat-active::before{ content:""; position:absolute; inset:-8px; border-radius: calc(var(--card-radius) + 8px); padding:4px; background: conic-gradient(#ff5252 calc(var(--ring-consequence-p,0)*1turn), #2a2a2f 0); pointer-events:none; z-index: 0; box-shadow:0 0 8px rgba(255,82,82,0.24); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.consequence-active.ring-active::after,
        .ring-wrap.heat-active.ring-active::after{ content:""; position:absolute; inset:-4px; border-radius: calc(var(--card-radius) + 4px); padding:3px; background: conic-gradient(#d9bd75 calc(var(--ring-action-p,0)*1turn), #333 0); pointer-events:none; z-index: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.consequence-active.cooldown-active:not(.ring-active)::after,
        .ring-wrap.heat-active.cooldown-active:not(.ring-active)::after{ content:""; position:absolute; inset:-4px; border-radius: calc(var(--card-radius) + 4px); padding:3px; background: conic-gradient(#8fa5ad calc(var(--ring-cooldown-p,0)*1turn), #333 0); pointer-events:none; z-index: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.stack-consequence-muted.consequence-active::before,
        .ring-wrap.stack-consequence-muted.heat-active::before{ content:none; box-shadow:none; }
        .ring-wrap.stack-consequence-muted.consequence-active.ring-active::after,
        .ring-wrap.stack-consequence-muted.heat-active.ring-active::after{ content:""; position:absolute; inset:-6px; border-radius: calc(var(--card-radius) + 6px); padding:4px; background: conic-gradient(#b49a63 calc(var(--ring-action-p,0)*1turn), #333 0); pointer-events:none; z-index: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
        .ring-wrap.deflecting::before{ content:""; position:absolute; inset:-6px; border-radius: calc(var(--card-radius) + 6px); background: conic-gradient(#ff5555 calc(var(--p,0) * 1turn), #333 0); pointer-events:none; z-index: 0; }
        .world-card-center-badge.badge-deflect { background:#3b1a1a; color:#ffdada; border-color:#5a2a2a; }
        .ring-wrap.cooldown-active .world-card{ filter: saturate(0.5) brightness(0.9); }
        .world-card-recovery-banner{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); background:#331d1d; color:#ffb3b3; border:1px solid #663333; padding:6px 12px; border-radius:12px; font-size:var(--card-desc-size); z-index:2; }
        /* Dim cards that are part of an active recipe */
        .world-card.action-active .world-card-artImg, .world-card.action-active .world-card-artEmoji { filter: saturate(0.55) brightness(0.85); }
        /* Center badge, reusable (e.g., Active, Recovering) */
        .world-card-center-badge{
          position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
          padding:6px 12px; border-radius:10px; font-size:var(--card-desc-size); z-index: 8;
          border:2px solid rgba(255,255,255,0.28);
          outline: 1px solid rgba(0,0,0,0.35);
          background: rgba(12,12,14,0.82);
          color: #eee;
          backdrop-filter: blur(2px) saturate(0.9);
          box-shadow: 0 6px 16px rgba(0,0,0,0.5);
          text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
          pointer-events:none;
        }
        .world-card-center-badge.badge-action-active { background: rgba(20,26,30,0.9); color:#e8f6ff; border-color: rgba(255,255,255,0.35); }
        .world-card-center-badge.badge-recover { background:#331d1d; color:#ffb3b3; border-color:#663333; }
        .time-controls { display:grid; gap:12px; }
        .time-pause-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid #2b2b31; }
        .time-state-label { color:#9ee1a8; font-size:var(--panel-body-size); font-weight:900; text-transform:uppercase; letter-spacing:0.08em; }
        .time-state-label.paused { color:#ffe8a3; }
        .time-state-label.locked { color:#ffb3b3; }
        #timePauseBtn { min-width:86px; margin:0; }
        #timePauseBtn[aria-pressed="true"],
        .time-speed-button[aria-pressed="true"] { border-color:#c2a86a; background:#2b2518; color:#ffe8a3; }
        .time-speed-group { display:grid; gap:6px; }
        .time-speed-label { color:#8ea0ad; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; }
    .time-speed-buttons { display:grid; grid-template-columns: repeat(4, minmax(42px, 1fr)); gap:6px; }
    .time-speed-button { margin:0; font-weight:900; font-variant-numeric:tabular-nums; }
        .log-dock {
          position:absolute;
          left:50%;
          bottom:var(--message-dock-bottom);
          transform:translateX(-50%);
          z-index:1360;
          width:min(720px, calc(100% - 28px));
          pointer-events:auto;
        }
        .log-card {
          padding:0;
          overflow:hidden;
          border-color:rgba(216, 173, 98, 0.32);
          background:rgba(11, 12, 14, 0.9);
        }
        .log-card summary {
          display:grid;
          grid-template-columns:auto minmax(0, 1fr) auto;
          gap:10px;
          align-items:center;
          min-height:var(--message-header-height);
          padding:6px 8px 6px 10px;
          cursor:pointer;
          list-style:none;
        }
        .log-card summary::-webkit-details-marker { display:none; }
        .log-toggle {
          width:28px;
          height:28px;
          display:grid;
          place-items:center;
          border:1px solid rgba(216, 173, 98, 0.38);
          border-radius:5px;
          color:#d5c18a;
          background:#171719;
          font-weight:900;
          line-height:1;
        }
        .log-toggle::before { content:"▲"; }
        .log-card[open] .log-toggle::before { content:"▼"; }
        .log-title {
          color:#e8e0c8;
          font-weight:800;
          text-transform:uppercase;
          letter-spacing:1px;
          font-size:var(--panel-small-size);
        }
        .log-summary-text {
          min-width:0;
          color:#c7b98b;
          font-size:var(--panel-small-size);
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          line-height:1.25;
        }
        #cardMessages {
          height:170px;
          overflow:auto;
          margin:0 8px 8px;
          background:rgba(4, 5, 7, 0.82);
          border:1px solid rgba(255,255,255,0.06);
          border-radius:7px;
          padding:8px 10px;
          font-size:13px;
        }
        @media (hover:hover) and (pointer:fine) { .popover { position: absolute; left: 50%; transform: translate(-50%, -8px); bottom: calc(var(--card-desc-h) + 8px); background: #111; color: var(--card-ink); border: 1px solid #333; border-radius: 8px; padding: 8px 10px; font-size: var(--panel-body-size); line-height: 1.2; z-index: 10; max-width: 220px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .popover.hidden { display: none; } }