@font-face { font-family: 'Jersey 15'; src: url('./fonts/Jersey15-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('./fonts/DMSans-Variable.ttf') format('truetype'); font-weight: 100 1000; font-display: swap; }

:root { --ink: #2a1a12; --paper: #f8ecd6; --mint: #59907c; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1714; }
canvas { display: block; width: 100vw; height: 100dvh; image-rendering: pixelated; touch-action: none; }
/* the game canvas is sized in device pixels by main2d.mjs; CSS keeps it full-screen */

.chip {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  padding: 6px 14px 8px; border: 3px solid var(--ink); border-radius: 10px; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink); pointer-events: none;
}
.title { font: 28px/1 'Jersey 15', system-ui; color: var(--ink); letter-spacing: 0.5px; }
.chip-right { left: auto; right: max(12px, env(safe-area-inset-right)); display: flex; align-items: baseline; gap: 8px; }
/* narrow screens: the finds and wardrobe chip sits under the place name instead of beside it */
@media (max-width: 560px) { .chip-right { top: calc(max(12px, env(safe-area-inset-top)) + 80px); left: max(12px, env(safe-area-inset-left)); flex-wrap: wrap; align-items: center; row-gap: 6px; } }
.tally-label { font: 600 13px/1 'DM Sans', system-ui; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; }
.tally { font: 26px/1 'Jersey 15', system-ui; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; font: 600 12px/1 'DM Sans', system-ui; }
.funding { color: var(--ink); opacity: 0.75; font-variant-numeric: tabular-nums; }
.live { pointer-events: auto; cursor: pointer; padding: 3px 8px 3px 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 12px/1 'DM Sans', system-ui; position: relative; }
.live::before { content: ''; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #3ddc97; }
.live.quiet::before { background: #ffb703; }
.chip { pointer-events: auto; }
.clock { margin-left: 12px; font: 22px/1 'Jersey 15', system-ui; color: var(--mint); font-variant-numeric: tabular-nums; }

.hint {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0;
  padding: 6px 12px; border-radius: 999px; background: rgb(26 18 12 / 0.62); color: var(--paper);
  font: 500 14px/1.2 'DM Sans', system-ui; white-space: nowrap; pointer-events: none;
}
.hint { transition: opacity 0.6s ease; }
.hint.gone { opacity: 0; }
.touch { display: none; }
@media (pointer: coarse) { .keys { display: none; } .touch { display: inline; } }

/* place title card, shown when walking through a door */
.card {
  position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%); margin: 0;
  font: 52px/1 'Jersey 15', system-ui; color: var(--paper); letter-spacing: 1px;
  text-shadow: 0 3px 0 var(--ink), 0 0 12px rgb(26 18 12 / 0.6);
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none; white-space: nowrap;
}
.card.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* dialogue box: paper panel at the bottom with the speaker's portrait; their name on a tab above the text */
.talk {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(660px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; padding: 22px 20px 20px;
  display: flex; gap: 16px; align-items: flex-start;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.talk[hidden] { display: none; }
.talk-face { flex: none; width: 96px; height: 96px; border: 3px solid var(--ink); border-radius: 10px; background: #ead8b8; image-rendering: pixelated; }
.talk-face[hidden] { display: none; }
.talk-body { position: relative; flex: 1; min-width: 0; }
.talk-name {
  position: absolute; top: -40px; left: 0; margin: 0; padding: 3px 12px 5px; white-space: nowrap;
  border: 3px solid var(--ink); border-radius: 8px; background: var(--mint); color: var(--paper);
  font: 22px/1 'Jersey 15', system-ui; letter-spacing: 0.5px;
}
.talk-name small { margin-left: 8px; font: 600 13px/1 'DM Sans', system-ui; letter-spacing: 0; opacity: 0.9; }
.talk-text { margin: 4px 0 0; min-height: 4.4em; font: 500 17px/1.45 'DM Sans', system-ui; }
.talk-count { position: absolute; right: 36px; bottom: 9px; font: 600 12px/1 'DM Sans', system-ui; opacity: 0.55; }
.talk-more { position: absolute; right: 14px; bottom: 8px; font-size: 12px; opacity: 0; }
.talk.ready .talk-more { opacity: 0.7; animation: nudge 0.9s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .talk.ready .talk-more { animation: none; } }
@media (max-width: 480px) { .talk { gap: 12px; padding: 20px 14px 18px; } .talk-face { width: 64px; height: 64px; } .talk-text { font-size: 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a discovery (or a wardrobe change) announced at the top, gone after a few seconds or a tap */
.note {
  position: fixed; left: 50%; top: max(76px, calc(env(safe-area-inset-top) + 64px)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; padding: 12px 16px 14px;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); color: var(--ink);
  transition: opacity 0.35s ease, translate 0.35s ease;
}
.note[hidden] { display: none; }
.note.out { opacity: 0; translate: 0 -8px; }
.note b { display: block; font: 24px/1.05 'Jersey 15', system-ui; color: var(--mint); }
.note b::before { content: '✦ '; color: #d99a1e; }
.note span { display: block; margin-top: 4px; font: 500 15px/1.4 'DM Sans', system-ui; }
@media (prefers-reduced-motion: reduce) { .note { transition: none; } }

/* wardrobe: a modal of the six looks */
.hud-button {
  margin-left: 4px; padding: 4px 10px 6px; border: 3px solid var(--ink); border-radius: 8px; background: var(--mint);
  color: var(--paper); font: 20px/1 'Jersey 15', system-ui; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 0 var(--ink);
}
.sound-toggle[aria-pressed="false"] { opacity: 0.55; text-decoration: line-through; }
.hud-button:focus-visible, .look:focus-visible, .wardrobe button:focus-visible { outline: 3px solid #d99a1e; outline-offset: 2px; }
.chip-right { pointer-events: auto; }
.wardrobe {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 18px 18px 20px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.wardrobe::backdrop { background: rgb(26 18 12 / 0.55); }
.wardrobe h2 { margin: 0 0 4px; font: 30px/1 'Jersey 15', system-ui; }
.wardrobe p { margin: 0 0 14px; font: 500 14px/1.4 'DM Sans', system-ui; opacity: 0.8; }
/* twelve looks: four across, three on narrow screens, two on phones; the dialog scrolls if it must */
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.look {
  display: grid; justify-items: center; gap: 6px; padding: 10px 6px 12px; border: 3px solid var(--ink); border-radius: 10px;
  background: #ead8b8; color: var(--ink); font: 19px/1 'Jersey 15', system-ui; cursor: pointer;
}
.look canvas { width: 96px; height: 96px; max-width: 100%; image-rendering: pixelated; }
.look[aria-pressed="true"] { background: var(--mint); color: var(--paper); }
.look small { font: 600 11px/1 'DM Sans', system-ui; text-transform: uppercase; letter-spacing: 0.08em; }
.wardrobe .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font: 22px/1 'Jersey 15', system-ui; cursor: pointer; }

/* "talk" / "look" hint floating above whoever or whatever is in reach */
.prompt {
  position: fixed; left: 0; top: 0; margin: 0; padding: 2px 9px 4px; border: 3px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink); pointer-events: none;
  font: 19px/1 'Jersey 15', system-ui; white-space: nowrap; will-change: transform;
}
.prompt[hidden] { display: none; }
.prompt kbd { font: inherit; padding: 0 5px; margin-right: 5px; border-radius: 4px; background: var(--ink); color: var(--paper); }

/* shown until the sprites have loaded */
.loading {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 16px 10px;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font: 24px/1 'Jersey 15', system-ui;
}

/* where each door and lane leads: a pill over it; up close it says how to go through (tap it to walk there) */
.exits { position: fixed; inset: 0; pointer-events: none; }
.exit {
  position: absolute; left: 0; top: 0; margin: 0; padding: 4px 11px 6px; border: 0; border-radius: 999px; pointer-events: auto; cursor: pointer;
  background: rgb(26 18 12 / 0.74); color: var(--paper); font: 19px/1 'Jersey 15', system-ui; white-space: nowrap; will-change: transform;
}
.exit[hidden] { display: none; }
.exit.near { padding: 4px 12px 6px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 20px; }
.exit kbd { font: inherit; padding: 0 5px; margin-right: 6px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.exit:focus-visible { outline: 3px solid #d99a1e; outline-offset: 2px; }

/* how to play */
.help {
  width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px 20px 20px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.help::backdrop { background: rgb(26 18 12 / 0.55); }
.help h2 { margin: 0 0 12px; font: 30px/1 'Jersey 15', system-ui; }
.help dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font: 500 15px/1.4 'DM Sans', system-ui; }
.help dt { font: 20px/1.2 'Jersey 15', system-ui; color: var(--mint); }
.help dd { margin: 0; }
.help kbd { font: 600 13px/1 'DM Sans', system-ui; padding: 2px 6px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.help .bubble { padding: 0 5px; border: 2px solid var(--ink); border-radius: 6px; background: #f8ecd6; font-weight: 700; letter-spacing: 1px; }
.help .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font: 22px/1 'Jersey 15', system-ui; cursor: pointer; }
@media (max-width: 420px) { .help dl { grid-template-columns: 1fr; gap: 2px; } .help dd { margin-bottom: 8px; } }

/* the ledger: exact numbers behind what the kingdom shows (law 8: in full, tabular, with source and time) */
.ledger {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; box-sizing: border-box; margin: 0;
  padding: 14px 18px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  color: var(--ink); cursor: pointer;
}
.ledger[hidden] { display: none; }
.ledger-kicker { margin: 0; font: 600 11px/1 'DM Sans', system-ui; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mint); }
.ledger-title { margin: 4px 0 2px; font: 28px/1 'Jersey 15', system-ui; font-weight: 400; }
.ledger-what { margin: 0 0 8px; font: 500 14px/1.4 'DM Sans', system-ui; opacity: 0.85; }
.ledger-rows { width: 100%; border-collapse: collapse; font: 500 15px/1.35 'DM Sans', system-ui; font-variant-numeric: tabular-nums; }
.ledger-rows th { text-align: left; font-weight: 500; padding: 4px 10px 4px 0; opacity: 0.8; vertical-align: top; white-space: nowrap; }
/* numbers stay on one line; a long value (a list of names) wraps instead of pushing the column out of the card */
.ledger-rows td { text-align: right; font-weight: 700; padding: 4px 0; overflow-wrap: anywhere; }
.ledger-rows tr + tr th, .ledger-rows tr + tr td { border-top: 1px dashed rgb(42 26 18 / 0.25); }
.ledger-source { margin: 8px 0 0; font: 500 12px/1.4 'DM Sans', system-ui; opacity: 0.75; }
.ledger-source.stale { color: #b23a48; opacity: 1; }
.ledger-close { margin: 4px 0 0; font: 500 11px/1 'DM Sans', system-ui; opacity: 0.5; text-align: right; }
@media (max-width: 480px) { .ledger-rows { font-size: 14px; } .ledger-rows td { white-space: normal; } }