:root {
  --bg: #070b14; --ink: #d8e2f0; --muted: #7d8aa3;
  --gold: #e8c872; --cyan: #5fd4ff; --red: #ff6b6b; --green: #7fd9a0;
  --glass: rgba(12, 18, 32, 0.78); --line: rgba(95, 212, 255, 0.22);
}

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

html, body {
  height: 100%; margin: 0; overflow: hidden; background: var(--bg);
  color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Layout shell: topbar / panel / dock / palette stacked in a grid.
   Board canvas shows through empty cells because #ui has pointer-events: none. */
#ui {
  position: fixed; inset: 0; pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "mid" "dock" "pal";
  gap: 8px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
#ui > * { pointer-events: auto; }
#ui > .tooltip, #ui > .toast, #ui > .flash { pointer-events: none; }

.label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Generic controls: every interactive target is at least 44px */
button {
  font: inherit; cursor: pointer; background: #0f1828; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  min-height: 44px; min-width: 44px;
}
button:disabled { cursor: not-allowed; opacity: 0.4; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.primary { background: var(--gold); border-color: var(--gold); color: #1a1405; font-weight: 600; }
button.danger { background: transparent; border-color: var(--red); color: var(--red); }

select, input[type=number], input[type=text] {
  font: inherit; min-height: 44px; padding: 6px 8px; color: var(--ink);
  background: #050a14; border: 1px solid var(--line); border-radius: 8px;
}
label.check, label:has(> input[type=checkbox]) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-size: 13px;
}
input[type=checkbox] {
  inline-size: 22px; block-size: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--gold);
}

/* Topbar: HUD + top actions */
.topbar {
  grid-area: top; justify-self: center; width: 100%; max-width: 920px; min-width: 0;
  display: flex; align-items: flex-start; gap: 8px;
}

/* HUD */
.hud {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.goals { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.goal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; min-width: 0; }
.goal .label { flex: 0 0 auto; }
.goal-text { flex: 1 1 auto; min-width: 0; }
.goal-short { display: none; }
.goal-eta { white-space: nowrap; font-size: 12px; }
.goal .bar { flex: 1 0 100%; margin-top: 2px; }
.explain {
  margin: 0; font-size: 12px; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.next { display: flex; align-items: center; gap: 8px; min-width: 0; }
.next .label { flex: 0 0 auto; font-size: 10px; }
.next .bar { flex: 1 1 auto; height: 4px; }
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fill {
  height: 100%; width: 0; background: linear-gradient(90deg, #b8912e, var(--gold), #fff3c4);
  transition: width 0.4s ease;
}

.top-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
/* HUD expand/collapse control: shown only in the phone portrait block below */
button.hud-toggle { display: none; }
button.guide-btn, button.panel-toggle { min-width: 44px; min-height: 44px; padding: 6px 10px; background: var(--glass); }
button.guide-btn.attention { position: relative; }
button.guide-btn.attention::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(232, 200, 114, 0.8);
}

/* Palette (bottom grid row) */
.palette {
  grid-area: pal; justify-self: center; align-self: end; width: 100%; max-width: 720px; min-width: 0;
  display: flex; gap: 8px; padding: 6px 8px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
button.tool {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; min-width: 96px; min-height: 44px;
  padding: 4px 12px; text-align: left; line-height: 1.2;
}
.tool .name { font-weight: 600; font-size: 13px; padding-right: 12px; }
.tool .cost { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--cyan); }
.tool .key {
  position: absolute; top: 3px; right: 5px; font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--muted);
}
.tool .key.letter { font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: 0.04em; }
button.tool.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 200, 114, 0.35); }
button.tool.cant .cost, button.tool:disabled .cost { color: var(--red); opacity: 0.7; }
button.tool:disabled { opacity: 0.55; }
.tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tool.hint {
  outline: 2px solid var(--gold); outline-offset: 2px;
  animation: hint-pulse 1.6s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 114, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(232, 200, 114, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tool.hint { animation: none; }
  .fill { transition: none; }
}
.ctl { margin-bottom: 8px; }
.ctl .help { margin: 4px 0 0; }
.guide-list { margin: 0 0 8px; padding-left: 18px; font-size: 12px; color: var(--muted); }
.guide-list li { margin-bottom: 4px; }
.guide-list b { color: var(--ink); }

/* Panel (mid grid row; scrolls inside its row) */
.panel {
  grid-area: mid; justify-self: end; align-self: start; width: 340px; max-width: 100%;
  max-height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.panel.hidden { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-size: 16px; color: var(--gold); }
button.panel-close { min-height: 44px; min-width: 44px; }
button.panel-toggle { position: relative; }
.help { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
button.tab {
  flex: 0 0 auto; min-height: 44px; background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: 6px 8px; color: var(--muted); white-space: nowrap;
}
button.tab.active { color: var(--ink); border-bottom-color: var(--gold); }
button.tab.locked { font-style: italic; opacity: 0.5; }
button.tab.locked::after { content: ' \1F512'; }
.card {
  margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255, 255, 255, 0.02);
}
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card p { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
button.buy { border-color: var(--gold); color: var(--gold); font-variant-numeric: tabular-nums; }
button.buy:disabled { opacity: 0.4; }
.card.done { border-color: rgba(127, 217, 160, 0.6); }
.card.locked { opacity: 0.45; }
.why { margin: 4px 0 8px; font-size: 12px; color: var(--red); opacity: 0.9; }

/* Keep / reset lists */
ul.keep, ul.reset { margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; }
ul.keep li, ul.reset li { position: relative; padding-left: 18px; margin-bottom: 3px; }
ul.keep li::before {
  content: '\2713'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700;
}
ul.reset li::before {
  content: '\21BA'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700;
}

/* Square vs hyperbolic comparison */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.compare .box {
  min-width: 0; padding: 8px; text-align: center; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02);
}
.compare .big {
  display: block; font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Dock (above palette): tutorial + info card */
.dock {
  grid-area: dock; justify-self: center; width: 100%; max-width: 720px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  align-self: end; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
}
.tutorial {
  display: flex; flex-direction: column;
  max-height: 34vh; overflow: hidden;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tutorial.hidden { display: none; }
.tutorial h3.tut-title { margin: 0 0 4px; font-size: 14px; color: var(--gold); }
.tutorial p.tut-body {
  margin: 0 0 6px; font-size: 13px; line-height: 1.35;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.tut-progress { display: block; margin-bottom: 6px; font-size: 11px; }
.tutorial .tut-actions { flex: 0 0 auto; margin-top: 4px; }
.tutorial .tut-actions button { min-height: 44px; min-width: 44px; }
.infocard {
  min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.info-text { margin: 0 0 6px; font-size: 13px; line-height: 1.35; }
.info-actions:empty { display: none; }
.info-actions { flex-wrap: wrap; gap: 6px; }
.info-actions button { min-height: 44px; min-width: 44px; padding-inline: 12px; }
/* While the guide is open, its text replaces the duplicate tool help to save board space. */
.dock:has(.tutorial:not(.hidden)) .info-text { display: none; }
/* Tutorial open and no tool/cell actions to show: the info card would be an empty stripe. */
.dock:has(.tutorial:not(.hidden)) .infocard:has(.info-actions[hidden]) { display: none; }

/* Tooltip (desktop only; touch uses the infocard) */
.tooltip {
  position: fixed; z-index: 45; max-width: 240px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--glass); backdrop-filter: blur(10px); font-size: 13px;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(3, 6, 12, 0.7);
}
.modal-backdrop.hidden { display: none; }
/* Column: heading and footer stay put, .modal-body is the only scroll container */
.modal {
  display: flex; flex-direction: column; width: 100%;
  max-width: min(560px, calc(100vw - 24px));
  max-height: 100vh; max-height: calc(100dvh - 24px);
  padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #0c1424;
}
.modal > h2 { flex: none; margin: 0 0 8px; font-size: 20px; color: var(--gold); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.modal-body > :first-child { margin-top: 0; }
.modal p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.modal h3 { margin: 10px 0 4px; font-size: 14px; color: var(--gold); }
.modal ul { margin: 0 0 8px; padding-left: 18px; font-size: 12px; color: var(--muted); }
.modal ul li { margin-bottom: 3px; }
.modal textarea, .modal input[type=text] {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #050a14; color: var(--ink); font: inherit;
}
.modal textarea { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
.modal button { min-height: 44px; min-width: 44px; }
.modal .modal-foot {
  flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px;
}
.modal .modal-foot button { flex: 0 1 auto; }

/* Dev panel: bottom-left, above the palette */
.dev {
  position: fixed; z-index: 30; left: 12px;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 112px);
  max-width: 260px; padding: 8px;
  border: 1px solid rgba(255, 107, 107, 0.5); border-radius: 8px;
  background: rgba(30, 8, 12, 0.8); color: #ffb3b3;
  font-family: ui-monospace, monospace; font-size: 11px;
}
.dev.hidden { display: none; }

/* Toast: centred, around 40% from top, never blocks input */
.toast {
  position: fixed; z-index: 40; top: 40%; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 32px); padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--glass); color: var(--gold); text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.toast.show { opacity: 1; visibility: visible; }

/* Prestige flash */
.flash {
  position: fixed; z-index: 60; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  animation: flash 1.2s ease-in-out forwards;
}
@keyframes flash { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

/* Touch devices: no hover tooltips */
@media (hover: none) {
  .tooltip { display: none; }
}
/* Touch-only phones: key badges are no use without a keyboard (bindings still work) */
@media (hover: none) and (pointer: coarse) {
  .tool .key { display: none; }
  .tool .name { padding-right: 0; }
}

/* Phone portrait (360x640, 390x844, 430x932) */
@media (max-width: 699px) {
  .panel { justify-self: stretch; width: auto; }
  .hud { padding: 6px 8px; gap: 4px 10px; }
  .hud .value { font-size: 15px; }
  .hud .stat { min-width: 52px; }
  #ui.panel-open .dock { display: none; }
  .palette { gap: 6px; padding: 6px; }
  button.tool { min-width: 78px; padding: 4px 8px; }
  .dock { max-height: 36vh; }
  .tutorial { max-height: 23vh; padding: 8px 10px; }
  .infocard { padding: 6px 10px; }
  /* Three lines at most; the rest scrolls inside the card so the board keeps >= 55% of the height */
  .info-text { margin-bottom: 4px; font-size: 12.5px; line-height: 1.3; max-height: 3.9em; overflow-y: auto; }
  /* Place / Cancel / Centre cell stay on one row at 360px so the preview card keeps the board band free */
  .info-actions button { padding-inline: 10px; font-size: 14px; }

  /* Collapsed HUD: Ink, Ink/s, a goal chip and the 44px toggle share one row; Guide and Menu sit beside it */
  .topbar { gap: 6px; }
  .top-actions { flex-direction: row; gap: 4px; }
  button.guide-btn, button.panel-toggle { padding: 6px; font-size: 14px; }
  button.hud-toggle {
    display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center;
    padding: 0; font-size: 15px;
  }
  .hud:not(.hud-open) { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 4px 8px; }
  .hud:not(.hud-open) .stat { min-width: 0; }
  .hud:not(.hud-open) .hud-detail,
  .hud:not(.hud-open) .explain,
  .hud:not(.hud-open) .next,
  .hud:not(.hud-open) .goal .label,
  .hud:not(.hud-open) .goal-eta { display: none; }
  .hud:not(.hud-open) .goals { flex: 1 1 0; min-width: 0; flex-direction: row; gap: 0; }
  /* The goal is one chip: its progress bar fills it behind the name or glyph; full text is in the expanded HUD */
  .hud:not(.hud-open) .goal {
    position: relative; flex: 1 1 0; min-width: 0; height: 32px; padding: 0 8px;
    flex-wrap: nowrap; overflow: hidden; font-size: 12px; border-radius: 8px;
    container: goal / inline-size;
  }
  .hud:not(.hud-open) .goal .bar {
    position: absolute; inset: 0; flex: none; height: auto; margin: 0; opacity: 0.3; border-radius: 8px;
  }
  /* Compact name in the chip; the full sentence stays in the DOM (live region) but is visually hidden.
     Names are <= 7 characters and sized to fit 42px, so they are never cut. Below 42px of chip content the
     name gives way to its glyph (the progress fill still shows); the glyph is aria-hidden like the name. */
  .hud:not(.hud-open) .goal-short {
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; min-width: 0;
    overflow: hidden; white-space: nowrap;
  }
  .hud:not(.hud-open) .goal-name { white-space: nowrap; }
  .hud:not(.hud-open) .goal-icon { display: none; width: 18px; height: 18px; flex: none; }
  .hud:not(.hud-open) .goal-icon svg {
    display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  @container goal (max-width: 41.9px) {
    .hud:not(.hud-open) .goal-name { display: none; }
    .hud:not(.hud-open) .goal-icon { display: inline-block; }
  }
  .hud:not(.hud-open) .goal-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Expanded HUD: the full detail as before, scrolling inside its own box, with a full-width collapse control */
  .hud.hud-open { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
  .hud.hud-open button.hud-toggle { flex: 1 1 100%; }
}

/* Phone landscape (844x390, 932x430): two columns, panel spans the board */
@media (max-height: 500px) and (orientation: landscape) {
  #ui {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "mid mid" "dock pal";
  }
  .topbar { max-width: none; }
  .hud { padding: 4px 10px; gap: 2px 12px; }
  /* Stats as one inline row: label and value share a line */
  .hud .stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 4px; min-width: 0; }
  .hud .value { font-size: 13px; }
  .hud .label { font-size: 9px; }
  .goals { gap: 3px; }
  .goal { font-size: 12px; line-height: 1.2; }
  .explain { -webkit-line-clamp: 1; font-size: 11px; line-height: 1.2; }
  .next .label { font-size: 9px; }
  .next .bar { height: 3px; }
  .top-actions { flex-direction: row; }
  .panel { justify-self: end; width: min(380px, 55vw); }
  /* Map keeps >= 120px clear: 100vh - (16 padding + ~100 HUD + 16 gaps) - dock >= 120 */
  .tutorial { max-height: 136px; padding: 6px 10px; }
  .dock { max-height: min(38vh, calc(100vh - 252px)); }
  .infocard { padding: 6px 10px; }
  .info-text { margin-bottom: 4px; font-size: 12px; line-height: 1.3; }
  .dev { bottom: max(8px, env(safe-area-inset-bottom)); max-width: 200px; }
  #ui.panel-open .dock { display: none; }
  .palette { gap: 6px; padding: 6px; max-height: 62px; }
  button.tool { min-width: 78px; min-height: 44px; padding: 4px 8px; }
}

/* HUD Ink pulse on GPU mote arrival (visual only; class restarted by ui.bumpInk) */
#ink-counter.ink-bump { animation: ink-bump 0.32s ease-out; }
@keyframes ink-bump { 30% { transform: scale(calc(1 + 0.12 * var(--bump, 0.5))); filter: brightness(1.5); } }
@media (prefers-reduced-motion: reduce) { #ink-counter.ink-bump { animation: none; } }
body.transitioning #c { pointer-events: none; }