/* Histortoise. The prototype's look (prototype@6b14d86 prototype/styles.css) made the
   real thing, with the header, results and dialogs from statameleon@c24f834
   src/styles.css: dark, monospace, one warm accent, pixels kept crisp. */
:root {
  --bg: #12101c; --panel: #1d1a2c; --panel2: #24203a; --ink: #f1ead8; --dim: #9c94b4; --line: #2f2a44;
  --accent: #f9b234; --sea: #0d1428; --diff: #e0443e;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* "hidden" must win over any display rule (the guess box is display:flex). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.4 var(--mono); -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;
}
a { color: #7fb6d6; }
.grow { flex: 1; }
.muted { color: var(--dim); }
.small { font-size: 12px; }

/* Wide enough that the tortoise can stand beside the map and the map keep its size. */
.app { max-width: 960px; margin: 0 auto; padding: 8px 16px 48px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; }
.wordmark { margin: 0; font-size: 20px; letter-spacing: .2em; color: var(--accent); }
.daynum { color: var(--dim); font-size: 13px; }
.icon { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font-weight: bold; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { display: block; width: 4px; background: var(--ink); }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 13px; } .bars i:nth-child(3) { height: 9px; }

.howto { background: var(--panel); border: 2px solid var(--line); padding: 6px 12px; font-size: 13px; margin: 0 0 10px; }
.howto summary { cursor: pointer; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.howto ol, dialog ol, dialog ul { margin: 6px 0 4px; padding-left: 1.4em; }
.howto li, dialog li { margin: 3px 0; }
.parch-note { margin: 4px 0 2px; color: var(--dim); display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* The map's own parchment, hatch and all, so the line points at what it means. */
.parch-swatch {
  flex: none; width: 14px; height: 14px; border: 1px solid #0c0814;
  background: repeating-linear-gradient(45deg, #b0a07a 0 3px, #92835e 3px 4px);
}

/* The stage: the tortoise's room on the left, the map on the right, side by side and
   always the same height. The room's width is solved from the stage's width and the two
   shapes (--ra the map's, --ta the tortoise's, set by game.js):
     c = map canvas height = (100cqw - gap - mb - ta * mb) / (ra + ta)
     room width = ta * (c + mb)
   where mb is the map's border, top and bottom together. The container has to be a
   wrapper, since an element's cqw never refers to itself. */
.pin { background: var(--bg); }
.stagebox { container-type: inline-size; }
.stage {
  --ra: 2.2727; --ta: 0.5; --gap: 4px; --mb: 4px;
  --c: calc((100cqw - var(--gap) - var(--mb) - var(--ta) * var(--mb)) / (var(--ra) + var(--ta)));
  display: grid; gap: var(--gap); align-items: stretch;
  grid-template-columns: calc(var(--ta) * (var(--c) + var(--mb))) minmax(0, 1fr);
}
.mapwrap { position: relative; background: var(--sea); border: 2px solid var(--line); overflow: hidden; touch-action: pan-y; }
.mapwrap.zoomed { touch-action: none; cursor: grab; }
#map { display: block; width: 100%; height: auto; aspect-ratio: 800 / 352; transform-origin: 0 0; image-rendering: pixelated; image-rendering: crisp-edges; }
/* No box: he stands on the page, and only the strata under him are drawn. */
.room { position: relative; overflow: hidden; pointer-events: none; min-width: 0; }
/* Out of the flow, so the map alone sets the row's height and rounding never stretches it. */
.room canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.unzoom { position: absolute; right: 6px; top: 6px; padding: 4px 8px; font-size: 12px; background: #000c; }

button {
  font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: 0;
  padding: 6px 10px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: #4a4268; }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #1b1408; font-weight: bold;
  text-transform: uppercase; letter-spacing: .14em; box-shadow: 0 4px 0 #8a5a12; margin-bottom: 4px;
}
button.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a12; }
button.link { background: none; border: 0; padding: 0; color: #7fb6d6; text-decoration: underline; font-size: inherit; }

/* The colour key, always on (round 5). */
.legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 8px; min-height: 26px; }
.legend .key {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font: 12px/1.5 var(--mono); color: var(--ink);
  background: var(--panel); border: 2px solid var(--line); border-radius: 0; cursor: pointer;
}
.legend .key:hover, .legend .key:focus-visible { border-color: var(--ink); }
.legend .key i { width: 10px; height: 10px; border: 1px solid #0c0814; flex: none; }
.legend .key.unnamed { color: var(--dim); font-style: italic; }

/* The box sits right under the map and its key, so a phone never scrolls between them. */
.entry { display: flex; gap: 6px; margin-top: 2px; }
.entry input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px; border-radius: 0;
  background: #0b0a12; color: var(--ink); border: 2px solid var(--line);
}
.entry input:focus { outline: none; border-color: var(--accent); }
.entry .era { min-width: 3.4em; font-weight: bold; color: var(--accent); margin-bottom: 4px; }
.msg { min-height: 1.4em; margin: 2px 0 0; font-size: 13px; color: #ff8a3d; }

.views { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.views .giveup { margin-left: auto; color: var(--dim); }
.views .giveup.armed { border-color: var(--diff); color: var(--diff); }
.caption { margin: 0 0 10px; font-size: 12px; color: var(--dim); min-height: 1.4em; }
.caption b { color: var(--ink); font-weight: normal; }
.caption .hatch { color: var(--diff); }

.rows { display: grid; gap: 4px; }
.g {
  display: grid; grid-template-columns: 6.5em 7em minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; background: var(--panel); border: 2px solid transparent; border-left: 6px solid var(--warm);
  padding: 6px 8px; font-size: 14px;
}
.g.sel { border-color: var(--ink); border-left-color: var(--warm); }
.g .yr { font-weight: bold; }
.g .arr i { font-style: normal; color: var(--warm); }
.g .off { color: var(--dim); font-size: 13px; }
.g .chip { background: var(--warm); color: #12101c; padding: 1px 6px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .08em; }
.g.b0 .off { color: var(--ink); }
.g.b5 .chip { color: var(--ink); }
.g.b5 .arr i { color: var(--dim); }

.results { background: var(--panel); border: 2px solid var(--accent); padding: 10px 12px; margin: 0 0 10px; }
.players { font-size: 16px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line); }
.players b { color: var(--accent); }
.chart { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 5.5em; gap: 3px 8px; font-size: 12px; margin-top: 8px; align-items: center; }
.chart .b { height: 12px; background: #4a4268; min-width: 2px; }
.chart .me .b { background: var(--accent); }
.chart .me { color: var(--accent); }
.results .held { margin: 0 0 8px; }
.results .held b { color: var(--accent); }
.results .muted { font-size: 13px; margin: 6px 0 2px; }
.tops { margin: 0 0 10px; padding: 0; list-style: none; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tops i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid #0c0814; }
.changed { margin: 8px 0; font-size: 14px; }
.message { margin: 6px 0; }
pre.share { background: #0b0a12; padding: 8px; white-space: pre-wrap; margin: 10px 0 8px; font: inherit; font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.credit { margin: 10px 0 0; font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin: 12px 0 4px; }
.statgrid b { display: block; font-size: 22px; }
.statgrid span { font-size: 11px; color: var(--dim); }

.footer { margin-top: 28px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.footer p { margin: 4px 0; }

dialog { background: var(--panel); color: var(--ink); border: 2px solid var(--accent); max-width: min(560px, 92vw); padding: 14px 16px; font-size: 14px; }
dialog::backdrop { background: #000a; }
dialog h2 { margin: 0 0 8px; font-size: 16px; color: var(--accent); }
dialog .close { margin-top: 12px; }

/* A phone gives the map the whole width: he moves to a short strip above it, which
   game.js fills with a wider scene and sizes so strip, map and key stay within
   PHONE_STAGE_VH. They stay pinned at the top while the page scrolls, with the
   guess box just under them, as in Statameleon. The 700 px is PHONE_BREAKPOINT. */
@media (max-width: 699.98px) {
  .pin { position: sticky; top: 0; z-index: 10; padding-bottom: 2px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .room { height: clamp(96px, 25vh, 210px); }
  /* One swipeable row, so the key never pushes the guess box down. */
  .legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px 0 4px; }
  .legend::-webkit-scrollbar { display: none; }
  .legend .key { flex: none; font-size: 11px; padding: 2px 6px; }
  .views button { padding: 6px 8px; font-size: 13px; }
}

@media (max-width: 520px) {
  .app { padding: 4px 16px 40px; }
  .wordmark { font-size: 17px; letter-spacing: .14em; }
  .g { grid-template-columns: 4.8em 6.6em minmax(0, 1fr) auto; gap: 6px; font-size: 13px; padding: 6px; }
  .g .off { font-size: 12px; }
  .g .chip { padding: 1px 4px; font-size: 11px; letter-spacing: .04em; }
  .players { font-size: 14px; }
  .statgrid b { font-size: 18px; }
}