/* Owia ne Osuo: warm evening palette, generic kente-style stripe accents
   (no named patterns, no colour meanings), mobile first. */

:root {
  --bg: #1d120b;
  --bg2: #2b1a10;
  --card: #2e1d12;
  --card2: #3a2617;
  --line: #5a3d26;
  --text: #fbefe1;
  --muted: #d3b89c;
  --sun: #f2b33d;
  --sun-deep: #e8711a;
  --rain: #5aa9e6;
  --rain-deep: #1f4fa3;
  --green: #1f7a3a;
  --gold: #fcd116;
  --ink: #1a0f0a;
  --danger: #ff9b85;
  --radius: 18px;
  --gutter: 16px;
  --stripes: repeating-linear-gradient(
    90deg,
    #f2b33d 0 14px,
    #1f7a3a 14px 20px,
    #f2b33d 20px 26px,
    #1f4fa3 26px 36px,
    #1a0f0a 36px 38px,
    #f5f1e6 38px 42px,
    #1a0f0a 42px 44px
  );
  --font: 'Andika', 'Noto Sans', Roboto, system-ui, sans-serif;
  --display: 'Baloo 2', 'Andika', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}
/* Ghanaian words are optional (Settings): things that only make sense with them on */
body:not(.gh-words) .gh-only {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* no double-tap zoom anywhere; menus still scroll (see "zoom lock" for the game) */
  touch-action: manipulation;
  overscroll-behavior: none;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(242, 179, 61, 0.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(90, 169, 230, 0.14), transparent 70%),
    linear-gradient(180deg, #2a170c 0%, var(--bg) 55%) fixed;
  background-color: var(--bg);
}

.kente-edge {
  position: fixed;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--stripes);
  z-index: 20;
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.display {
  font-family: var(--display);
  font-weight: 800;
}

/* ---- screens and cards ---- */

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px max(var(--gutter), env(safe-area-inset-right)) 18px max(var(--gutter), env(safe-area-inset-left));
}

.card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 20px;
  width: min(440px, 100%);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}
.card.wide {
  width: min(820px, 100%);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--stripes);
}

h1,
h2 {
  margin: 0;
  line-height: 1.05;
}
h2 {
  font-size: 26px;
  margin-bottom: 6px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin: 4px 0 6px;
}
.logo .sun {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1a8, var(--sun) 55%, var(--sun-deep));
  box-shadow: 0 0 0 5px rgba(242, 179, 61, 0.18), 0 0 26px rgba(242, 179, 61, 0.55);
}
.logo .rain {
  width: 34px;
  height: 44px;
  background: linear-gradient(#cdeeff, var(--rain) 55%, var(--rain-deep));
  clip-path: polygon(50% 0, 100% 62%, 92% 85%, 72% 98%, 50% 100%, 28% 98%, 8% 85%, 0 62%);
  filter: drop-shadow(0 0 12px rgba(90, 169, 230, 0.6));
}

h1 {
  font-size: clamp(40px, 9vw, 58px);
  background: linear-gradient(90deg, var(--sun-deep), var(--sun) 40%, #ffe7a3 50%, #a9dcff 60%, var(--rain));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 4px;
}
.subtitle {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.tagline {
  margin: 0 0 6px;
  font-size: 16px;
}
.tagline i {
  color: var(--sun);
  font-style: italic;
  font-weight: 700;
}
.welcome {
  margin: 0 0 18px;
  font-weight: 700;
  color: #ffe7a3;
  font-size: 18px;
}
.welcome-big {
  font-size: 28px;
  color: #ffe7a3;
}
.small {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0;
}
.note {
  color: #ffe7a3;
}
.status {
  margin: 14px 0 4px;
  font-weight: 700;
}
.error {
  color: var(--danger);
  min-height: 1.2em;
  margin: 10px 0 0;
}
.invite {
  background: rgba(242, 179, 61, 0.12);
  border: 1px dashed var(--sun);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-weight: 700;
}
.loading {
  margin: 16px 0 0;
  min-height: 2.8em;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.loading small {
  font-style: normal;
  opacity: 0.7;
  font-size: 11px;
}

/* ---- buttons and inputs ---- */

button,
.button,
input {
  font: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #3d2818;
  color: var(--text);
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
input {
  cursor: text;
}
button:hover,
.button:hover {
  filter: brightness(1.12);
}
button:active {
  transform: translateY(1px);
}
button:focus-visible,
input:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.primary {
  width: 100%;
  font-weight: 700;
  font-size: 18px;
  border: none;
  background: linear-gradient(90deg, var(--sun-deep), var(--sun));
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(232, 113, 26, 0.35);
}
.ghost {
  background: transparent;
  width: 100%;
  margin-top: 10px;
}
.danger {
  color: var(--danger);
  border-color: rgba(255, 155, 133, 0.5);
}
.link {
  background: transparent;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 8px;
}
.whatsapp {
  background: #1f7a43;
  border-color: #25a35a;
}

.row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.row.links {
  margin-top: 10px;
}
.row.actions {
  margin-top: 16px;
}
.row.actions > * {
  flex: 1 1 110px;
  margin-top: 0;
  width: auto;
}
.stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.stack .ghost {
  margin-top: 4px;
}

.join {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.join input {
  flex: 1;
  min-width: 0;
  text-align: center;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 700;
  background: #1f130b;
}
.code {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.25em;
  margin: 2px 0 12px;
  padding-left: 0.25em;
  color: #ffe7a3;
}

.me-chip {
  margin: 4px auto 6px;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
}

/* ---- chips (profile, settings) ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.chip {
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 40px;
  background: #33210f;
}
.chip[aria-pressed='true'] {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  font-weight: 700;
}
.chip .today {
  font-size: 11px;
  font-weight: 700;
  color: #ffe7a3;
}
.chip[aria-pressed='true'] .today {
  color: var(--ink);
}
.swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--sw);
  border: 3px solid rgba(255, 255, 255, 0.2);
}
.swatch[aria-pressed='true'] {
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(242, 179, 61, 0.35);
}

.field {
  border: none;
  margin: 0 0 12px;
  padding: 0;
  min-width: 0;
}
.field legend,
.legend {
  display: block;
  font-weight: 700;
  margin: 0 auto 6px;
  padding: 0;
  text-align: center;
}
.field input {
  width: 100%;
  text-align: center;
  background: #1f130b;
}
.tipline {
  min-height: 1.4em;
}

.profile-grid {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#preview {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6dfb0, #e7b877 70%, #b77a45 70%, #9c6236);
  border: 1px solid var(--line);
}
.preview-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 700px) {
  .profile-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
  .preview {
    position: sticky;
    top: 12px;
  }
}

/* ---- play screen ---- */

#play {
  justify-content: flex-start;
  gap: 6px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
/* HUD + stage. Desktop: no box of its own (the HUD row sits above the stage). Touch: see
   "touch layout" below. */
#arena {
  display: contents;
}
.hud {
  width: min(960px, 100%);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.hud-left,
.hud-right {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.pill {
  background: rgba(46, 29, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 11px;
  min-height: 32px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform 0.15s;
}
.pill.strong {
  font-weight: 700;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 28px;
}
.pill.icon {
  padding: 2px 8px;
}
.pill svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pill svg path:first-child {
  fill: currentColor;
}
#btn-sound .cross {
  display: none;
}
#btn-sound[aria-pressed='false'] .wave {
  display: none;
}
#btn-sound[aria-pressed='false'] .cross {
  display: inline;
}
#btn-fs svg path {
  fill: none;
}
#btn-fs .fs-out,
#btn-fs[aria-pressed='true'] .fs-in {
  display: none;
}
#btn-fs[aria-pressed='true'] .fs-out {
  display: inline;
}
.pill.bump {
  transform: scale(1.18);
}
#btn-restart.armed {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
}
.pill.stars {
  color: var(--gold);
  letter-spacing: 0.08em;
}
.pill.time {
  font-variant-numeric: tabular-nums;
}
.pill.voice.live {
  border-color: #2ecc71;
}
.pill.voice.warn,
.pill.net {
  border-color: #e67e22;
}
.pill.voice.speaking {
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.5);
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.dot.sun {
  background: var(--sun);
}
.dot.rain {
  background: var(--rain);
}

#stage {
  position: relative;
  width: min(100%, 960px, calc((100dvh - 64px) * 960 / 528));
  aspect-ratio: 960 / 528;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: #1a0f0a;
}
#cv {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* toast */
.toast {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%, -6px);
  background: rgba(29, 18, 11, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 16px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  max-width: 92%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast b {
  font-size: 16px;
}
.toast span {
  font-size: 13px;
  color: #ffe7a3;
}
.toast span:empty {
  display: none;
}

/* Akoma-style linked hearts that fill while a hold group fills */
.hearts {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 18px;
}
.hearts i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.15s, transform 0.15s;
}
.hearts i.on {
  color: #e8436b;
  transform: scale(1.15);
}
.hearts i + i::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 2px;
  margin: 0 1px 5px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.3);
}

.tryagain {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
.tryagain:active {
  transform: translateY(1px);
}

/* stickers: top-left corner of the stage (row 0 is wall and the rows under it are empty
   sky on every stop), so the toggle never hides a hero, a gem or a door on the floor */
.stickers {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  flex-direction: column-reverse; /* toggle on top, the list opens downwards */
  align-items: flex-start;
  gap: 6px;
  z-index: 3;
  max-width: min(420px, calc(100% - 16px));
}
.sticker-toggle {
  border-radius: 999px;
  min-height: 36px;
  padding: 4px 12px;
  background: rgba(29, 18, 11, 0.6);
  font-weight: 700;
}
.sticker-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sticker-toggle .dots {
  stroke-width: 3;
}
.sticker-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  background: rgba(29, 18, 11, 0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
}
.sticker-list button {
  min-height: 38px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}
.sticker-list kbd {
  font: inherit;
  font-size: 10px;
  opacity: 0.6;
}

/* intro card and waiting card */
.intro {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 16px;
  background: rgba(20, 11, 6, 0.45);
  z-index: 4;
  cursor: pointer;
}
.intro-card {
  margin: auto 0; /* centred when it fits, scrolls from the top when it doesn't */
  width: min(560px, 100%);
  background: rgba(46, 29, 18, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: rise 0.35s ease-out;
}
.intro-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--stripes);
}
.intro-kicker {
  margin: 4px 0 2px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.intro-card h2 {
  font-size: clamp(22px, 4vw, 32px);
  color: #ffe7a3;
}
.intro-sub {
  margin: 0 0 8px;
  font-style: italic;
  color: var(--sun);
}
.intro-fact {
  margin: 0 0 4px;
  font-size: clamp(14px, 2.2vw, 17px);
}
.intro-src {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--muted);
}
.intro-tip,
.intro-star {
  margin: 0 0 4px;
  font-size: 14px;
  color: #ffe7a3;
  font-weight: 700;
}
.intro-star {
  font-weight: 400;
}
.intro-tap {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
@keyframes rise {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

.retry {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 11, 6, 0.55);
  z-index: 4;
  pointer-events: none;
}
.retry p {
  margin: 0 16px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(46, 29, 18, 0.95);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: clamp(16px, 3vw, 22px);
}

/* win overlay */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(20, 11, 6, 0.4);
  z-index: 5;
  overflow-y: auto;
}
.card.win {
  margin: auto 0;
  flex: none;
  width: min(460px, 100%);
  padding: 18px 18px 14px;
  animation: rise 0.35s ease-out;
}
/* the three stars sit side by side so the whole card fits a landscape phone stage */
.star-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
}
.star-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  line-height: 1.2;
}
.star-list small {
  font-size: 12px;
}
@media (max-height: 520px) {
  .star-list small {
    display: none;
  }
  .card.win {
    padding: 12px 14px 10px;
  }
  .card.win h2 {
    font-size: 22px;
  }
  .card.win .row.actions {
    margin-top: 10px;
  }
}
@media (max-height: 400px) {
  .overlay {
    padding: 6px 12px;
  }
  .card.win .small {
    margin: 2px 0;
  }
  .star-list {
    margin: 4px 0;
  }
  .star-list li {
    padding: 4px;
  }
  .card.win .row.actions button {
    min-height: 40px;
    padding: 6px 12px;
  }
}
.star-list .st {
  font-size: 24px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.25);
  width: 26px;
  text-align: center;
  flex: none;
}
.star-list li.got .st {
  color: var(--gold);
}
.star-list li.new .st {
  animation: pop 0.6s ease-out both;
}
.star-list li:nth-child(2).new .st {
  animation-delay: 0.2s;
}
.star-list li:nth-child(3).new .st {
  animation-delay: 0.4s;
}
.star-list b {
  display: block;
}
.star-list small {
  color: var(--muted);
}
@keyframes pop {
  0% {
    transform: scale(0.2);
  }
  60% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.ribbon {
  display: inline-block;
  margin: 4px 0;
  padding: 4px 14px;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.ribbon:empty {
  display: none;
}
.strip-wrap {
  margin: 6px 0;
}
.strip {
  display: flex;
  justify-content: center;
  gap: 0;
  height: 18px;
}
.strip i {
  width: 12px;
  height: 18px;
  border-left: 1px solid var(--ink);
}
.love .chips button {
  border-radius: 999px;
}

/* ---- tips under the stage ---- */

.tip {
  margin: 0;
  color: #ffe7a3;
  text-align: center;
  font-weight: 700;
  max-width: 960px;
}
.keys {
  margin: 0;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---- touch controls ---- */

#touch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  pointer-events: none;
  z-index: 6;
}
#touch .pad {
  display: flex;
  gap: var(--pad-gap, 10px);
  pointer-events: auto;
  touch-action: none;
}
/* action above jump: the right pad is one button wide, so it fits beside the stage */
#touch .pad:last-child {
  flex-direction: column;
  align-items: center;
}
#touch button {
  position: relative;
  width: var(--btn, 64px);
  height: var(--btn, 64px);
  border-radius: 50%;
  font-size: calc(var(--btn, 64px) * 0.42);
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.28);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#touch button.big {
  width: calc(var(--btn, 64px) * 1.15);
  height: calc(var(--btn, 64px) * 1.15);
}
#touch button.held {
  background: rgba(242, 179, 61, 0.45);
}
/* a thumb landing just outside a button still counts (input.js hit-tests the element,
   and a pseudo-element is part of it) */
#touch button::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
/* ---- touch layout: the stage fills the screen ----
   Phones in landscape: the stage is as tall as the visible screen (minus notches) and as
   wide as 960:528 allows. The HUD is a slim see-through row inside the top of the stage,
   and the pads float over the bottom corners (or sit in the side margins when there are
   any), so nothing takes space from the stage. */
body.touch-mode {
  --btn: 80px;
  --pad-gap: 12px;
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}
body.touch-mode.playing {
  overflow: hidden;
}
body.touch-mode.playing .kente-edge {
  display: none;
}
body.touch-mode #play {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  justify-content: center;
  padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
}
body.touch-mode #arena {
  display: block;
  position: relative;
  flex: none;
  width: min(calc(100vw - var(--sa-l) - var(--sa-r)), calc((100vh - var(--sa-t) - var(--sa-b)) * 960 / 528));
  width: min(calc(100vw - var(--sa-l) - var(--sa-r)), calc((100dvh - var(--sa-t) - var(--sa-b)) * 960 / 528));
  aspect-ratio: 960 / 528;
}
body.touch-mode #stage {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
body.touch-mode .hud {
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  z-index: 3; /* under the intro card, retry and win overlays */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 6px 12px;
  background: linear-gradient(rgba(20, 11, 6, 0.5), rgba(20, 11, 6, 0));
  pointer-events: none; /* taps between the pills still reach the scene (pings) */
}
body.touch-mode .hud-left,
body.touch-mode .hud-right {
  flex-wrap: nowrap;
  gap: 4px;
}
body.touch-mode .hud-left {
  flex: 1 1 auto;
}
body.touch-mode .hud-right {
  flex: 0 1 auto;
}
body.touch-mode .hud .pill {
  pointer-events: auto;
  flex: none;
  min-height: 30px;
  font-size: 13px;
  padding: 1px 9px;
  background: rgba(29, 18, 11, 0.62);
  border-color: rgba(90, 61, 38, 0.8);
}
body.touch-mode .hud .pill.icon {
  padding: 1px 8px;
}
body.touch-mode .hud button.pill {
  position: relative;
}
/* a bigger finger target than the slim pill shows */
body.touch-mode .hud button.pill::after {
  content: '';
  position: absolute;
  inset: -6px -3px;
}
body.touch-mode .hud .pill.strong {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 34vw;
  line-height: 26px;
}
body.touch-mode .hud .pill.voice,
body.touch-mode .hud .pill.net {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 26px;
}
body.touch-mode .hud .time {
  display: none;
}
/* things in the stage's top corners move below the HUD row */
body.touch-mode .stickers {
  top: 42px;
}
body.touch-mode .tryagain {
  top: 42px;
  right: 8px;
}
body.touch-mode .toast {
  top: 42px;
}
body.touch-mode #touch {
  bottom: max(8px, var(--sa-b));
  padding: 0 max(10px, var(--sa-r)) 0 max(10px, var(--sa-l));
}
/* outline-only, so a hero or door under a thumb button still shows through */
body.touch-mode #touch button {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.42);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
body.touch-mode #touch button.held {
  background: rgba(242, 179, 61, 0.45);
}
/* nothing to steer while the win card is up: the pads would only cover its buttons */
#play:has(#overlay:not([hidden])) #touch,
body.win-open #touch {
  visibility: hidden;
}
/* short landscape phones (iPhone SE, 360-tall Androids): smaller pads cover less of the
   level's corners, still at least 48px to hit */
@media (max-height: 380px) {
  /* html prefix: must beat the later max-height: 500px block in the cascade */
  html body.touch-mode {
    --btn: 70px;
    --pad-gap: 10px;
  }
}
/* every tap target on touch is at least 48px tall */
body.touch-mode .hud button.pill::after {
  inset: -9px -5px;
}
body.touch-mode .hud-right {
  gap: 6px;
}
body.touch-mode .sticker-toggle,
body.touch-mode .sticker-list button,
body.touch-mode .tryagain,
body.touch-mode .card.win .actions button,
body.touch-mode .howto-ok {
  min-height: 48px;
}
.touch-mode .tip,
.touch-mode .keys {
  display: none;
}
/* Restart lives in the Menu on touch: a small pill next to Sound was too easy to hit. */
.touch-mode #btn-restart {
  display: none;
}

/* ---- zoom lock: gameplay never zooms or scrolls the page ----
   The stage and the pads take every touch themselves (main.js also stops iOS pinch and quick
   double-taps). Cards inside the stage that can be taller than it still scroll up and down. */
#stage,
#cv,
#touch,
#touch .pad,
#touch button,
#btn-map {
  touch-action: none;
}
#stage .intro,
#stage .overlay,
#stage .howto-wrap,
#stage .howto-card,
#stage .sticker-list {
  touch-action: pan-y;
}
#play,
#touch,
#btn-map {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* "See the whole level" (the camera zooms in on small screens) */
#btn-map svg path {
  fill: none;
}
#btn-map[aria-pressed='true'] {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
}

/* Settings: Zoom Auto / On / Off */
.set-row .chips.seg {
  flex: none;
  flex-wrap: nowrap;
  gap: 4px;
}
.set-row .chips.seg .chip {
  min-height: 44px;
  padding: 6px 12px;
}

/* iPhone: no element fullscreen, so a one-time tip to add the game to the home screen */
.ios-tip {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 14;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(46, 29, 18, 0.96);
  border: 1px solid var(--sun);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-weight: 700;
  font-size: 15px;
}
.ios-tip .close {
  min-height: 40px;
  width: 40px;
}

/* ---- sheets (menu, levels, settings, words) ---- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px max(var(--gutter), env(safe-area-inset-right)) 16px max(var(--gutter), env(safe-area-inset-left));
  background: rgba(10, 6, 3, 0.65);
  overflow-y: auto;
}
.sheet-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: left;
}
.sheet-card h2 {
  text-align: left;
}
#sheet-menu .sheet-card {
  text-align: center;
}
#sheet-menu .sheet-card h2 {
  text-align: center;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.close {
  border-radius: 50%;
  width: 44px;
  padding: 0;
  flex: none;
}

.level-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.level-list button {
  width: 100%;
  min-height: 92px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 10px 12px;
  background: #33210f;
  position: relative;
}
.level-list button.current {
  border-color: var(--sun);
}
.level-list button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.level-list .num {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.level-list .name {
  font-weight: 700;
  line-height: 1.15;
}
.level-list .stars {
  color: var(--gold);
  letter-spacing: 0.1em;
}
.level-list .best {
  font-size: 12px;
  color: var(--muted);
}

.settings {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: none;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.set-row b {
  display: block;
}
.set-row small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.set-row input[type='range'] {
  width: 46%;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--sun);
}
.toggle {
  min-width: 72px;
  border-radius: 999px;
  flex: none;
}
.toggle[aria-pressed='true'] {
  background: var(--green);
  border-color: #2fa356;
  font-weight: 700;
}

.word-list {
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}
.word-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) 1.6fr;
  gap: 2px 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.word-list dt {
  font-weight: 700;
  color: #ffe7a3;
  font-size: 17px;
}
.word-list dd {
  margin: 0;
}
.word-list small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

/* How to play card (howto.js) over the stage: above the HUD, stickers and touch pads,
   under the sheets and the portrait "turn your phone sideways" prompt. */
#stage > .howto-wrap {
  z-index: 12;
}
.howto-wrap.howto-fixed {
  z-index: 16;
}

/* ---- rotate prompt ---- */

#rotate {
  display: none;
}
@media (pointer: coarse) and (orientation: portrait) {
  body.playing #rotate {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    background: var(--bg);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 24px;
    z-index: 30;
  }
}

/* ---- small phones in landscape: keep the stage as big as possible ---- */

@media (max-height: 500px) {
  .screen {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #play {
    gap: 4px;
  }
  .pill {
    min-height: 28px;
    font-size: 13px;
    padding: 1px 9px;
  }
  .pill.strong {
    line-height: 24px;
  }
  /* The stage height below assumes ONE hud row (28 px + 4 px gap), so the hud never wraps:
     the level name and the voice / network pills shrink with an ellipsis instead. */
  #stage {
    width: min(100%, 960px, calc((100vh - 48px) * 960 / 528));
    width: min(
      100%,
      960px,
      calc((100dvh - max(8px, env(safe-area-inset-top, 0px)) - max(6px, env(safe-area-inset-bottom, 0px)) - 34px) * 960 / 528)
    );
  }
  .hud,
  .hud-left,
  .hud-right {
    flex-wrap: nowrap;
  }
  .hud-left {
    flex: 1 1 auto;
  }
  .hud-right {
    flex: 0 1 auto;
  }
  .hud .pill {
    flex: none;
  }
  .hud .time {
    display: none;
  }
  .hud .pill.strong {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 28vw;
  }
  .hud .pill.voice,
  .hud .pill.net {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 24px;
  }
  body.touch-mode {
    --btn: 74px;
    --pad-gap: 10px;
  }
  h1 {
    font-size: 40px;
  }
  .card {
    padding: 18px 18px 14px;
  }
  .intro-card {
    padding: 12px 14px 10px;
  }
  .intro-card h2 {
    font-size: 22px;
  }
  .intro-fact {
    font-size: 14px;
  }
}

/* ---- reduce motion ---- */

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}