:root {
  --bg: #120c08;
  --panel: #1f1610;
  --panel-2: #2b2017;
  --line: #463629;
  --text: #f6ecdc;
  --muted: #b9a58d;
  --accent: #ffb547;
  --accent-2: #ff7b3a;
  --ember: #ff8a3c;
  --par: #7fd4ff;
  --good: #8ee06a;
  --radius: 12px;
  --header-h: 48px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out or the home indicator. What the player reads or touches stays
     inside them. The tests set these to try insets the browsers here lack. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone.
     The room's signs, drawn on the canvas, read it too (main.js). */
  --t-min: 14px;
  color-scheme: dark;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* ---------- Game box ---------- */

/* No scrolling, zooming, selection or long-press menu mid-play
   (docs/PLATFORMS.md): the stage takes no touch gestures, the menus scroll
   (.overlay), and main.js prevents Safari's pinch and the context menu. */
.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  /* 16:9 room plus the HUD strip, but never taller than the window under the header. */
  height: min(calc(100vh - var(--header-h) - var(--safe-t) - 16px), calc(min(100vw - 16px, 1280px) * 0.5625 + 36px));
  height: min(calc(100dvh - var(--header-h) - var(--safe-t) - 16px), calc(min(100vw - 16px, 1280px) * 0.5625 + 36px));
  min-height: 260px;
  background: #0b0806;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Scrolled to for play, it stops below the status bar of a home-screen app. */
  scroll-margin-top: var(--safe-t);
}

/* Touch screens: the room, its HUD and the band of controls under it, above
   the home indicator. On the menus and the pause screen the game fits under
   the site header, with "Full screen" in it; while a room is on
   (html.hw-playing) it takes the whole window, scrolled to (main.js). */
.hw-touch .game-root {
  height: min(calc(100vh - var(--header-h) - var(--safe-t) - 16px), calc((min(100vw - 16px, 1280px) - 10px) * 0.5625 + 210px + var(--safe-b)));
  height: min(calc(100dvh - var(--header-h) - var(--safe-t) - 16px), calc((min(100vw - 16px, 1280px) - 10px) * 0.5625 + 210px + var(--safe-b)));
  border-radius: 8px;
}

.hw-touch.hw-playing .game-root {
  height: min(calc(100vh - var(--safe-t)), calc((min(100vw - 16px, 1280px) - 10px) * 0.5625 + 210px + var(--safe-b)));
  height: min(calc(100dvh - var(--safe-t)), calc((min(100vw - 16px, 1280px) - 10px) * 0.5625 + 210px + var(--safe-b)));
}

/* Full screen (the site's button): the game fills the screen edge to edge,
   and the stage keeps inside the safe areas. The sides take the larger inset
   both ways (a phone held sideways has its camera on one side), so the
   stage's middle is the screen's, where the site puts "Leave full screen". */
.game-root:fullscreen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  border: 0;
  border-radius: 0;
}

.game-root:-webkit-full-screen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  border: 0;
  border-radius: 0;
}

.stage {
  position: absolute;
  inset: 0;
  outline: none;
  touch-action: none;
}

.hw-touch .stage {
  bottom: var(--safe-b);
}

.game-root:fullscreen .stage {
  top: var(--safe-t);
  right: var(--safe-x);
  bottom: var(--safe-b);
  left: var(--safe-x);
}

.game-root:-webkit-full-screen .stage {
  top: var(--safe-t);
  right: var(--safe-x);
  bottom: var(--safe-b);
  left: var(--safe-x);
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hud-top, 0px);
  height: var(--hud-h, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 0 12px;
  background: linear-gradient(#1a120ce6, #1a120c99);
  border-bottom: 1px solid #3a2c20;
  font-variant-numeric: tabular-nums;
  z-index: 3;
}

.hud-l,
.hud-r {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hud-l {
  flex: 1 1 auto;
}

.hud-r {
  flex: none;
}

/* Touch: thumb-sized buttons, and 24 px clear of a phone's rounded corners. */
.hw-touch .hud {
  padding: 0 24px;
}

/* Full screen, with room beside "Leave full screen" (main.js): the HUD's
   halves keep a 60 px gap in its middle, which is the screen's. */
.stage[data-hud='split'] .hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  column-gap: 0;
  padding: 0 12px;
}

.hw-touch .stage[data-hud='split'] .hud {
  padding: 0 24px;
}

.stage[data-hud='split'] .hud-r {
  grid-column: 3;
  justify-self: end;
}

.hud-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: max(15px, var(--t-min));
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

/* The room's name gives way first on a narrow screen. */
.hud-room {
  display: block;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.hud-time {
  flex: none;
}

.hud-time span {
  min-width: 4.2ch;
  text-align: right;
}

.hud-time span.over {
  color: #ffb08a;
}

.hud-time small {
  font-size: var(--t-min);
  font-weight: 600;
  color: var(--muted);
}

.hud svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
}

.hud-ember {
  color: #5d4636;
}

.hud-ember.earned {
  color: #a0603a;
}

.hud-ember.have {
  color: var(--ember);
  filter: drop-shadow(0 0 4px #ff8a3caa);
}

.hud-deaths {
  color: var(--muted);
}

.hud-deaths svg {
  fill: #d9c9ad;
  stroke: #d9c9ad;
}

.hud-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.hud-btn:hover {
  border-color: var(--accent);
}

.hw-touch .hud-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.hw-touch .hud-btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- Touch controls ---------- */

.touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.pad,
.tbtn {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Placed by main.js (layout): beside the room, under it or over its corners,
   always 16 px in from the stage's sides and 24 px up from its foot. */
.pad {
  position: absolute;
  width: 132px;
  height: 104px;
  left: var(--pad-x, 16px);
  bottom: var(--pad-b, 24px);
  border-radius: 22px;
  background: #ffffff10;
  border: 1.5px solid #ffffff2e;
}

.pad span {
  position: absolute;
  width: 0;
  height: 0;
  border: 13px solid transparent;
  opacity: 0.75;
}

.pad .pad-l {
  left: 12px;
  top: 30%;
  border-right: 18px solid #fff;
  border-left-width: 0;
}

.pad .pad-r {
  right: 12px;
  top: 30%;
  border-left: 18px solid #fff;
  border-right-width: 0;
}

.pad .pad-d {
  left: calc(50% - 10px);
  bottom: 7px;
  border-width: 12px 10px 0;
  border-top-color: #ffffffaa;
}

.pad[data-bits='1'] .pad-l,
.pad[data-bits='9'] .pad-l,
.pad[data-bits='2'] .pad-r,
.pad[data-bits='10'] .pad-r,
.pad[data-bits='8'] .pad-d,
.pad[data-bits='9'] .pad-d,
.pad[data-bits='10'] .pad-d {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--accent));
}

.pad.down {
  background: #ffffff1c;
}

/* Dash up and to the left of Jump, 8 px apart: side by side in the band
   under the room, one above the other in a column beside it. */
.tbtns {
  position: absolute;
  right: var(--btn-x, 16px);
  bottom: var(--btn-b, 24px);
  width: 154px;
  height: 118px;
}

.stage[data-touch='side'] .tbtns {
  width: 124px;
  height: 154px;
}

.tbtn {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #ffffff40;
  background: #ffffff14;
  color: #fff;
  font-weight: 800;
  font-size: var(--t-min);
  letter-spacing: 0.3px;
  padding: 0;
}

.t-jump {
  right: 0;
  bottom: 0;
  width: 84px;
  height: 84px;
  border-color: #ffb54788;
  background: #ffb54726;
}

.t-dash {
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  border-color: #7fd4ff77;
  background: #7fd4ff1f;
}

.tbtn.down {
  background: #ffffff44;
  transform: scale(0.95);
}

/* Short landscape phones: a narrow sliding surface on the left, and two
   circles stacked on the right. Keep the same directions, down gesture,
   colours and lower-corner positions as the broad controls. */
.stage[data-compact='true'] .pad {
  width: 64px;
}

.stage[data-compact='true'] .pad .pad-l {
  left: 6px;
  border-width: 9px 12px 9px 0;
}

.stage[data-compact='true'] .pad .pad-r {
  right: 6px;
  border-width: 9px 0 9px 12px;
}

.stage[data-compact='true'] .tbtns {
  width: 48px;
  height: 104px;
}

.stage[data-compact='true'] .t-jump {
  width: 48px;
  height: 48px;
}

.stage[data-compact='true'] .t-dash {
  width: 48px;
  height: 48px;
  left: 0;
}

/* Not enough space beside or under the room: over its corners, see-through. */
.stage[data-touch='overlay'] .pad,
.stage[data-touch='overlay'] .tbtn {
  opacity: 0.55;
}

/* ---------- Overlay screens ---------- */

/* The menus scroll with a finger; nothing beyond them does. In full screen
   they start below "Leave full screen". */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.game-root:fullscreen .overlay {
  padding-top: max(12px, var(--exit-band, 60px));
}

.game-root:-webkit-full-screen .overlay {
  padding-top: max(12px, var(--exit-band, 60px));
}

.overlay.dim {
  background: #0b0806b8;
}

.menu {
  margin: auto;
  width: min(520px, 100%);
  text-align: center;
}

.panel {
  background: #1d1510f2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 10px 40px #000a;
}

.menu h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.menu-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.menu-top h2 {
  margin: 0;
  flex: 1;
}

.muted {
  color: var(--muted);
  font-size: var(--t-min);
}

.logo {
  margin: 0;
  font-size: clamp(40px, 9vw, 76px);
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffe2a6;
  text-shadow:
    0 0 18px #ff9a2e99,
    0 3px 0 #7a3a12;
}
/* Candle-lit lettering: warm at the top, amber at the foot, drawn once. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .logo {
    background: linear-gradient(180deg, #fff6dc 0%, #ffe2a6 42%, #f4a24c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(255, 154, 46, 0.5)) drop-shadow(0 3px 0 #7a3a12);
  }
}

.tagline {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: max(15px, var(--t-min));
}

.menu-buttons {
  display: grid;
  gap: 8px;
  width: min(320px, 100%);
  margin: 0 auto;
}

.menu-buttons.row {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.btn small {
  font-weight: 500;
  font-size: var(--t-min);
  color: var(--muted);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.btn-primary {
  background: linear-gradient(#ffb547, #f08a2c);
  border-color: #ffcc7a;
  color: #2a1606;
}

.btn-primary small {
  color: #5a3312;
}

.btn-small {
  padding: 6px 12px;
  font-size: max(14px, var(--t-min));
}

.btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.keys {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--t-min);
}

/* Hints for keys follow the last input used (main.js): gone after a touch. */
.hw-touch .key-hint {
  display: none;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text);
  font: 600 var(--t-min) system-ui, sans-serif;
}

/* Rooms */
.world-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.wtab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: pointer;
  min-width: 0;
}

.wtab .wnum {
  font-weight: 800;
  font-size: max(14px, var(--t-min));
}

.wtab .wname {
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wtab.active {
  border-color: var(--accent);
  background: #3a2717;
}

.wtab.locked {
  opacity: 0.55;
}

.blurb {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--t-min);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.room-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  cursor: pointer;
  min-width: 0;
}

.room-card:hover:not([disabled]),
.room-card:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.room-card.locked {
  opacity: 0.4;
  cursor: default;
}

.rnum {
  font-weight: 800;
  font-size: 15px;
}

.rname {
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rbest {
  font-size: var(--t-min);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.star {
  color: #4b3a2c;
  font-size: max(14px, var(--t-min));
}

.star.on {
  color: #ffd166;
}

.star.ember.on {
  color: var(--ember);
}

.star.par.on {
  color: var(--par);
}

.legend {
  margin: 10px 0 0;
  font-size: var(--t-min);
  color: var(--muted);
}

/* Settings: each switch is its whole row, 8 px from the next. */
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  text-align: left;
  font-size: max(15px, var(--t-min));
  cursor: pointer;
}

.toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* Achievements */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: var(--t-min);
  color: var(--muted);
  margin-bottom: 10px;
}

.stat-row b {
  color: var(--text);
}

.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  text-align: left;
  max-height: min(52vh, 420px);
  overflow: auto;
}

.ach-list li {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  opacity: 0.6;
  font-size: var(--t-min);
  color: var(--muted);
}

.ach-list li b {
  display: block;
  color: var(--text);
  font-size: max(13px, var(--t-min));
}

.ach-list li.done {
  opacity: 1;
  border-color: #8a6a2f;
}

.ach-list li.done b::before {
  content: '★ ';
  color: #ffd166;
}

/* Results */
.result-title {
  color: #ffe2a6;
}

.result-time {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 6px;
}

.rstar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  animation: pop 0.35s ease-out both;
}

.rstar .star {
  font-size: 34px;
  line-height: 1.1;
}

.rstar small {
  font-size: var(--t-min);
  color: var(--muted);
}

.rstar.on .star {
  color: #ffd166;
  text-shadow: 0 0 12px #ffb54799;
}

.rstar.ember.on .star {
  color: var(--ember);
}

.rstar.par.on .star {
  color: var(--par);
  text-shadow: 0 0 12px #7fd4ff88;
}

.rstar.new small {
  color: var(--good);
}

@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.result-notes {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  color: var(--muted);
  font-size: var(--t-min);
}

.result-notes li + li {
  margin-top: 2px;
}

/* ---------- Toast ---------- */

/* Under the HUD, or in full screen under "Leave full screen" (main.js sets --band). */
.toast {
  position: absolute;
  left: 50%;
  top: calc(var(--band, 0px) + 10px);
  transform: translate(-50%, -8px);
  padding: 7px 14px;
  border-radius: 999px;
  background: #2b2017ee;
  border: 1px solid #8a6a2f;
  font-weight: 700;
  font-size: max(14px, var(--t-min));
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Below the game ---------- */

.ad-slot {
  max-width: 970px;
  margin: 12px auto 0;
}

.about {
  max-width: 820px;
  margin: 20px auto 0;
  padding: 0 8px;
  line-height: 1.55;
  color: #e7dccb;
}

.about h1 {
  font-size: 26px;
  margin-bottom: 6px;
}

.about h2 {
  font-size: 18px;
  margin: 18px 0 6px;
}

.about li {
  margin: 3px 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  .hud,
  .hud-l,
  .hud-r {
    gap: 8px;
  }
  .hud {
    padding: 0 6px 0 8px;
  }
  .hud-item {
    font-size: max(13px, var(--t-min));
  }
  .room-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .wtab .wname {
    display: none;
  }
  .menu-buttons.row {
    grid-template-columns: repeat(3, 1fr);
  }
  .rstar {
    min-width: 70px;
  }
}

@media (max-height: 460px) {
  .overlay {
    padding: 6px;
  }
  .panel {
    padding: 10px 12px;
  }
  .menu h2 {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .logo {
    font-size: 40px;
  }
  .tagline {
    margin: 0 0 8px;
    font-size: var(--t-min);
  }
  .btn {
    padding: 6px 10px;
    font-size: max(14px, var(--t-min));
  }
  .title-menu .menu-buttons,
  .pause-menu .menu-buttons {
    grid-template-columns: 1fr 1fr;
    width: min(460px, 100%);
  }
  .title-menu .menu-buttons .btn-primary,
  .pause-menu .menu-buttons .btn-primary {
    grid-column: 1 / -1;
  }
  .room-card {
    padding: 4px 2px;
  }
  .result-time {
    font-size: 26px;
  }
  .rstar .star {
    font-size: 26px;
  }
  .result-notes {
    margin-bottom: 8px;
  }
  .keys {
    display: none;
  }
}