/* The fonts Mimic Mayhem uses (Ernest, 2026-11-11): Cinzel for the name, the buttons and the HUD, Alegreya Sans for the
   small print. Both OFL (fonts/*-OFL.txt). Whatever weight a rule asks for, Cinzel is drawn at 800. */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
:root {
  /* The colours of the KayKit dungeon art itself (Ernest, 2026-11-11): the walls' grey-blue stone, their dark slate
     caps, the doors' and barrels' red-brown wood, the coins' gold, the banners' red. Flat fills like the models'
     flat faces, a dark outline, a thick lip under each piece and a light edge on top, corners only a little round.
     Wood is "press me" (and "you can afford this"), light stone a plain button, dark slate a panel; red is danger. */
  --bg: #262933;
  --raise: #3d434f; /* a panel: the walls' slate caps */
  --raise2: #596273; /* what sits in a panel, or a button that can't be pressed yet */
  --line: #8e98a8; /* the walls' stone, as a quiet outline */
  --back: #b9582e; /* wood */
  --stone: #c5ccd6; /* a plain button */
  --ink: #fff8ea; /* the text */
  --muted: #d3d9e2;
  --edge: #1d1f27; /* the outline and the lip of everything */
  --gold: #f9bb36;
  --goldInk: #23252d; /* text on stone */
  --red: #d63a33;
  --gem: #6eeaff;
  --dark: rgba(29, 31, 39, 0.84); /* the backing of a counter over the scene */
  --bevel: inset 0 calc(var(--u) * 0.14) 0 rgba(255, 255, 255, 0.26);
  --lip: 0 calc(var(--u) * 0.34) 0 var(--edge);
  --r: calc(var(--u) * 0.55);
  /* the HUD's unit: everything in it is sized from this, so it shrinks with the window's height */
  /* It follows the device: the window's height, but never so big that the six tower cards (about 68 units) don't
     fit its width; a big monitor gets a big HUD (up to 30px a unit). */
  --u: clamp(9px, min(2.5vh, 1.45vw), 30px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.02em;
  /* the page is a game: nothing selects or drags, no pull-to-refresh or bounce (CrazyGames asks for it) */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; }

/* text with a dark outline, readable over the scene */
/* (not the banners: Ernest wants their text plain, 2026-11-12) */
.top, .action { text-shadow: 0 0.12em 0 var(--edge), 0.07em 0 0 var(--edge), -0.07em 0 0 var(--edge), 0 -0.07em 0 var(--edge); }

/* ---- screens */
.screen, #loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
  text-align: center;
  padding: var(--u);
  z-index: 4;
}
.screen { background: rgba(29, 31, 39, 0.74); }
.screen.clear { background: radial-gradient(ellipse at center, rgba(29, 31, 39, 0.05), rgba(29, 31, 39, 0.62)); }
/* research opens over the screen it was opened from (title, pause, game over), which comes later in the page */
#research { z-index: 5; }
#loading { background: radial-gradient(90% 60% at 50% 30%, var(--raise) 0%, var(--bg) 70%); z-index: 6; }
.brand { font-size: calc(var(--u) * 2.6); color: var(--gold); margin: 0; }
h1 { font-size: calc(var(--u) * 5.2); line-height: 0.92; margin: 0 0 calc(var(--u) * 0.6); color: var(--gold); font-weight: 400; }
h2 { font-size: calc(var(--u) * 2.2); margin: 0; font-weight: 400; color: var(--gold); }
p { margin: 0; font-size: calc(var(--u) * 1.05); }
.note { opacity: 0.75; font-size: calc(var(--u) * 0.9); font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  background: var(--raise);
  border: calc(var(--u) * 0.18) solid var(--edge);
  border-radius: calc(var(--u) * 0.9);
  box-shadow: var(--bevel), 0 calc(var(--u) * 0.5) 0 var(--edge), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, 0.5);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8);
  max-width: min(94vw, calc(var(--u) * 34));
  max-height: 94vh;
  max-height: 94svh; /* (svh: the height with the browser's bars showing, so a card never hides behind them) */
}

/* a plain button is light stone with dark text; .primary is wood with light text */
button {
  font: inherit;
  font-size: calc(var(--u) * 1.15);
  color: var(--goldInk);
  background: var(--stone);
  border: calc(var(--u) * 0.16) solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--bevel), var(--lip);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.5);
  min-width: calc(var(--u) * 10);
  cursor: pointer;
  text-shadow: none;
  transition: transform 0.06s;
}
button:active { transform: translateY(calc(var(--u) * 0.24)); box-shadow: var(--bevel), 0 calc(var(--u) * 0.1) 0 var(--edge); }
button:focus-visible { outline: calc(var(--u) * 0.14) solid var(--gold); outline-offset: 2px; }
button.primary { background: var(--back); color: var(--ink); }
button.big { font-size: calc(var(--u) * 2); padding: calc(var(--u) * 0.5) calc(var(--u) * 2.6); }
@media (hover: hover) { button:hover { filter: brightness(1.08); } }

.bar { width: min(60vw, calc(var(--u) * 20)); height: calc(var(--u) * 0.8); border-radius: var(--u); background: var(--raise2); overflow: hidden; border: 2px solid var(--edge); }
#loadingFill { height: 100%; width: 0; background: var(--gold); transition: width 0.15s; }

/* ---- icons, drawn in CSS so they're sharp at any size */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; position: relative; }
.ico.coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 45%, #d98a12); border: 0.1em solid #7a4a08; }
.ico.gem { background: linear-gradient(135deg, #e9fdff, var(--gem) 45%, #2a8fe0); border: 0.1em solid #0d3a66; transform: rotate(45deg) scale(0.74); border-radius: 0.12em; }
.ico.pause { background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); width: 0.7em; height: 0.8em; border-radius: 0.08em; }
.ico.sound { background: currentColor; clip-path: polygon(0 32%, 30% 32%, 62% 5%, 62% 95%, 30% 68%, 0 68%); }
.ico.sound::after { content: ""; position: absolute; }
.muted .ico.sound { opacity: 0.35; }

/* ---- the HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
/* (the bar's faded top edge lets taps and drags through to the hall; its cards and panel take them) */
#hud button, #shop, #towerPanel { pointer-events: auto; }
.top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--u);
  padding: max(calc(var(--u) * 0.6), env(safe-area-inset-top)) max(calc(var(--u) * 0.8), env(safe-area-inset-right)) 0 max(calc(var(--u) * 0.8), env(safe-area-inset-left));
}
.top .left { display: flex; gap: calc(var(--u) * 0.5); }
.top .right { display: flex; gap: calc(var(--u) * 0.6); justify-content: flex-end; }
.top .middle { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.35); }
/* the small square ones (pause, sound, close): slate blocks */
button.round { min-width: 0; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); padding: 0; display: grid; place-items: center; font-size: calc(var(--u) * 1.2); background: var(--raise2); color: var(--ink); }

#wavePlate {
  background: var(--back);
  color: var(--ink);
  border: calc(var(--u) * 0.16) solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--bevel), var(--lip);
  padding: calc(var(--u) * 0.25) calc(var(--u) * 1.4) calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 1.5);
  min-width: calc(var(--u) * 11);
  text-align: center;
}
#wavePlate.boss { background: var(--red); color: #fff; }
.waveBar { height: calc(var(--u) * 0.3); background: rgba(0, 0, 0, 0.45); border-radius: var(--u); overflow: hidden; margin-top: calc(var(--u) * 0.1); }
#waveFill { height: 100%; width: 100%; background: var(--gold); transform-origin: left; }

.count {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  background: var(--dark);
  border: calc(var(--u) * 0.16) solid var(--edge);
  border-radius: var(--r);
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.9) calc(var(--u) * 0.2) calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 1.5);
  min-width: calc(var(--u) * 5.5);
}
.count.bump { animation: bump 0.18s; }
.count.inPanel { text-shadow: none; }
@keyframes bump { 40% { transform: scale(1.16); } }

#banner {
  position: absolute;
  top: 20%; left: 0; right: 0;
  text-align: center;
  font-size: calc(var(--u) * 3.2);
  color: var(--gold);
  animation: banner 2.2s both;
}
#banner.boss { color: #ff6a5e; }
@keyframes banner { 0% { transform: scale(0.4); opacity: 0; } 12% { transform: scale(1.12); opacity: 1; } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.side { position: absolute; right: max(calc(var(--u) * 0.8), env(safe-area-inset-right)); bottom: calc(var(--u) * 9.4); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); align-items: flex-end; }
/* (the Research button: a slate block) */
button.action { min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.05); position: relative; background: var(--raise2); color: var(--ink); text-shadow: none; }
button.action b { font-weight: 400; }
button .dot { position: absolute; top: calc(var(--u) * -0.5); right: calc(var(--u) * -0.4); width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--edge); display: grid; place-items: center; font-size: calc(var(--u) * 0.9); text-shadow: none; animation: bump 0.7s infinite; }


/* ---- research */
#researchList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 0.5); overflow-y: auto; touch-action: pan-y; width: 100%; padding: 2px 2px calc(var(--u) * 0.4); }
button.res { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; gap: 0 calc(var(--u) * 0.6); padding: calc(var(--u) * 0.4) calc(var(--u) * 0.9); background: var(--back); color: var(--ink); }
button.res .name { font-size: calc(var(--u) * 1.05); }
button.res .what { grid-column: 1; font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; font-size: calc(var(--u) * 0.72); opacity: 0.9; text-shadow: none; }
button.res .price { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: calc(var(--u) * 0.3); background: var(--edge); color: var(--ink); border-radius: var(--u); padding: calc(var(--u) * 0.1) calc(var(--u) * 0.7) calc(var(--u) * 0.1) calc(var(--u) * 0.35); }
/* what can't be bought yet is grey stone; what is full, dark slate with gold words */
button.res.poor { background: var(--raise2); color: var(--muted); cursor: default; }
button.res.poor .price { color: #ffa39c; }
button.res.maxed { background: var(--bg); color: var(--gold); cursor: default; }

.toast {
  position: fixed;
  left: 50%; top: 27%;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--raise);
  border: calc(var(--u) * 0.16) solid var(--edge);
  box-shadow: var(--bevel), var(--lip);
  border-radius: var(--r);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 1.15);
  pointer-events: none;
  animation: banner 4s both;
}


/* ---- Twin Gates Defense: lives, the next wave, the banner's second line */
.ico.heart { background: #ff4a4a; clip-path: polygon(50% 100%, 4% 48%, 4% 22%, 22% 6%, 40% 8%, 50% 22%, 60% 8%, 78% 6%, 96% 22%, 96% 48%); }
#livesBox { min-width: calc(var(--u) * 4.6); }
#livesBox.hurt { animation: hurt 0.3s; }
@keyframes hurt { 30% { transform: scale(1.25); background: var(--red); } }
#nextWave { font-size: calc(var(--u) * 0.95); background: var(--dark); border-radius: var(--r); padding: calc(var(--u) * 0.1) calc(var(--u) * 0.9); white-space: nowrap; }
#nextWave:empty { display: none; }
#nextWave b { font-weight: 400; color: var(--gold); }
#banner { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
/* A dark band across the screen behind every banner, fading out at the ends, with a line above and below (like
   Mimic Mayhem's; Ernest, 2026-11-12: the text alone couldn't be read over the scene). Drawn with gradients, not a
   mask, which a phone redraws at full size every frame of the animation. */
#banner {
  --band: var(--gold);
  padding: 0.22em 0 0.28em;
  gap: 0.08em;
  background:
    linear-gradient(90deg, transparent, var(--band) 18%, var(--band) 82%, transparent) top / 100% max(2px, calc(var(--u) * 0.24)) no-repeat,
    linear-gradient(90deg, transparent, var(--band) 18%, var(--band) 82%, transparent) bottom / 100% max(2px, calc(var(--u) * 0.24)) no-repeat,
    linear-gradient(90deg, transparent, rgba(20, 22, 29, 0.86) 18%, rgba(20, 22, 29, 0.86) 82%, transparent);
  will-change: transform;
}
#banner.boss { --band: #ff6a5e; }
#banner small { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: 0.01em; font-size: 0.46em; color: var(--ink); max-width: 90vw; }
#banner small:empty { display: none; }

/* ---- the bar along the bottom: tower cards to build with, or the picked tower's panel */
#bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: calc(var(--u) * 0.9) max(calc(var(--u) * 0.6), env(safe-area-inset-right)) max(calc(var(--u) * 0.6), env(safe-area-inset-bottom)) max(calc(var(--u) * 0.6), env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(29, 31, 39, 0.88) 35%);
}
#shop {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, calc(var(--u) * 10.5)));
  justify-content: center;
  gap: calc(var(--u) * 0.5);
}
button.card {
  min-width: 0;
  height: calc(var(--u) * 5.6);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--back); /* wood: you can afford it */
  color: var(--ink);
}
button.card .name { font-size: calc(var(--u) * 1.15); white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 0.35); }
button.card .dot { position: static; width: calc(var(--u) * 0.85); height: calc(var(--u) * 0.85); border-radius: 50%; border: 2px solid var(--edge); background: var(--tint); animation: none; flex: none; }
button.card .note { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: 0; font-size: calc(var(--u) * 0.72); line-height: 1.1; text-shadow: none; }
button.card .price { display: flex; align-items: center; gap: calc(var(--u) * 0.3); background: var(--edge); color: var(--ink); border-radius: var(--u); padding: calc(var(--u) * 0.06) calc(var(--u) * 0.7) calc(var(--u) * 0.06) calc(var(--u) * 0.35); font-size: calc(var(--u) * 1.05); }
button.card.poor { background: var(--raise2); color: var(--muted); }
button.card.poor .price { color: #ffa39c; }
button.card.locked { background: var(--raise); color: var(--muted); box-shadow: var(--lip); cursor: default; }
button.card.locked .note, button.card.locked .name { opacity: 0.55; }
button.card.locked .price .ico { display: none; }
button.card.locked .price { padding-left: calc(var(--u) * 0.7); background: var(--edge); color: var(--muted); }
button.card.fresh { animation: fresh 0.5s 4; }
@keyframes fresh { 50% { filter: brightness(1.7); transform: translateY(calc(var(--u) * -0.4)); } }
button.card.bought, #towerPanel button.bought { animation: bought 0.2s; }
@keyframes bought { 40% { transform: scale(1.08); filter: brightness(1.5); } }

#towerPanel { display: flex; justify-content: center; align-items: stretch; gap: calc(var(--u) * 0.6); height: calc(var(--u) * 5.6); }
#towerPanel .about {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(var(--u) * 0.1);
  background: var(--raise);
  border: calc(var(--u) * 0.16) solid var(--edge);
  box-shadow: var(--bevel), var(--lip);
  border-radius: var(--r);
  padding: 0 calc(var(--u) * 1.1);
  min-width: calc(var(--u) * 15);
  font-size: calc(var(--u) * 1.3);
}
#towerStars { color: var(--gold); font-size: 0.8em; letter-spacing: 0.1em; }
#towerPanel small { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: 0; font-size: calc(var(--u) * 0.8); text-shadow: none; }
#towerPanel button { min-width: calc(var(--u) * 9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.1); padding: 0 calc(var(--u) * 1.2); }
#towerPanel button .price { display: flex; align-items: center; gap: calc(var(--u) * 0.3); background: var(--edge); color: var(--ink); border-radius: var(--u); padding: calc(var(--u) * 0.06) calc(var(--u) * 0.7) calc(var(--u) * 0.06) calc(var(--u) * 0.35); font-size: calc(var(--u) * 1.05); }
#towerPanel button.poor { background: var(--raise2); color: var(--muted); }
#towerPanel button.poor .price { color: #ffa39c; }
#towerPanel button.maxed { background: var(--bg); color: var(--gold); cursor: default; }
#towerPanel button.maxed .price { display: none; }
#towerPanel button.round { min-width: 0; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); align-self: center; padding: 0; font-size: calc(var(--u) * 1.6); line-height: 1; }

/* ---- the title (Ernest, 2026-11-12: "premium and complete"): the hall drifting behind a vignette, the crest and the
   name on the left, the menu on a slate card on the right (stacked when the window is upright), a sound button in the
   corner. Sized by --t, the title's own unit: the HUD's, but never so big the two columns don't fit the width. */
#title {
  --t: min(var(--u), 1.32vw);
  background:
    radial-gradient(ellipse 75% 85% at 50% 50%, rgba(18, 20, 27, 0.3), rgba(18, 20, 27, 0.82) 100%),
    linear-gradient(90deg, rgba(18, 20, 27, 0.72), rgba(18, 20, 27, 0.35) 40%, rgba(18, 20, 27, 0.08) 60%, rgba(18, 20, 27, 0.5));
  padding: max(calc(var(--t) * 1.4), env(safe-area-inset-top)) max(calc(var(--t) * 2), env(safe-area-inset-right)) max(calc(var(--t) * 1.4), env(safe-area-inset-bottom)) max(calc(var(--t) * 2), env(safe-area-inset-left));
}
.titleWrap { display: flex; align-items: center; justify-content: center; gap: calc(var(--t) * 6); width: 100%; }

.logo { display: flex; flex-direction: column; align-items: center; animation: rise 0.7s both; }
.crest { width: calc(var(--t) * 7.5); height: auto; filter: drop-shadow(0 calc(var(--t) * 0.8) calc(var(--t) * 1.2) rgba(0, 0, 0, 0.55)); margin-bottom: calc(var(--t) * 0.6); }
#title h1 { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 400; text-transform: uppercase; color: var(--gold); }
#title h1 .big, #title h1 .small {
  display: block;
  background: linear-gradient(180deg, #fff1bf 0%, #ffd25e 38%, #f0a422 62%, #b8670c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--t) * 0.32) 0 var(--edge)) drop-shadow(0 calc(var(--t) * 0.7) calc(var(--t) * 1) rgba(0, 0, 0, 0.5));
}
#title h1 .big { font-size: calc(var(--t) * 5.2); letter-spacing: 0.04em; line-height: 0.95; white-space: nowrap; }
#title h1 .small { font-size: calc(var(--t) * 2.9); letter-spacing: 0.32em; padding-left: 0.32em; }
/* the ornament between the two lines: a gold rule either side of a gem */
#title h1 .orn { display: flex; align-items: center; gap: calc(var(--t) * 0.9); width: 100%; margin: calc(var(--t) * 0.55) 0 calc(var(--t) * 0.5); font-size: calc(var(--t) * 1.5); }
#title h1 .orn::before, #title h1 .orn::after { content: ""; flex: 1; height: calc(var(--t) * 0.22); border-radius: 1em; background: linear-gradient(90deg, transparent, var(--gold)); }
#title h1 .orn::after { background: linear-gradient(90deg, var(--gold), transparent); }

.menu {
  display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--t) * 0.8);
  width: calc(var(--t) * 25);
  padding: calc(var(--t) * 1.6) calc(var(--t) * 1.8) calc(var(--t) * 1.4);
  background: linear-gradient(180deg, rgba(61, 67, 79, 0.96), rgba(43, 47, 57, 0.96));
  border: calc(var(--t) * 0.18) solid var(--edge);
  border-radius: calc(var(--t) * 1.1);
  box-shadow: inset 0 0 0 calc(var(--t) * 0.12) rgba(249, 187, 54, 0.28), var(--bevel), 0 calc(var(--t) * 0.5) 0 var(--edge), 0 calc(var(--t) * 1.6) calc(var(--t) * 3.5) rgba(0, 0, 0, 0.55);
  animation: rise 0.7s 0.15s both;
}
.menu .label { font-size: calc(var(--t) * 0.95); letter-spacing: 0.2em; color: var(--gold); text-align: center; }
/* the difficulties: one bar of three, the picked one wood; a locked one dim with a lock, saying how to open it */
.seg { display: flex; padding: calc(var(--t) * 0.25); gap: calc(var(--t) * 0.25); background: var(--edge); border-radius: calc(var(--t) * 0.75); }
.seg button {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--t) * 0.35);
  font-size: calc(var(--t) * 1.1); padding: calc(var(--t) * 0.45) calc(var(--t) * 0.4);
  background: var(--raise); color: var(--muted); border: 0; border-radius: calc(var(--t) * 0.5); box-shadow: none;
}
.seg button.on { background: var(--back); color: var(--ink); box-shadow: var(--bevel); }
.seg button.locked { color: rgba(211, 217, 226, 0.45); }
.seg button:active { transform: none; }
.ico.lock { width: 0.75em; height: 0.8em; background: currentColor; border-radius: 0.12em; clip-path: polygon(0 45%, 18% 45%, 18% 25%, 30% 8%, 50% 2%, 70% 8%, 82% 25%, 82% 45%, 100% 45%, 100% 100%, 0 100%, 0 45%, 30% 45%, 70% 45%, 70% 28%, 60% 18%, 40% 18%, 30% 28%, 30% 45%); }
#diffNote { text-align: center; min-height: 1.2em; margin-top: calc(var(--t) * -0.2); font-size: calc(var(--t) * 0.95); }
#diffNote.nudge { animation: nudge 0.35s; opacity: 1; color: var(--gold); }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

#btnPlay { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: calc(var(--t) * 0.8); font-size: calc(var(--t) * 2.4); padding: calc(var(--t) * 0.55) 0; min-width: 0; margin-top: calc(var(--t) * 0.3); }
/* a slow glint across PLAY */
#btnPlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.35) 50%, transparent 65%); transform: translateX(-120%); animation: glint 3.6s 1.2s infinite; pointer-events: none; }
@keyframes glint { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
/* Continue: a run left between waves, above PLAY (which then looks like the second choice it is) */
/* CONTINUE over a small gold line (the wave, and DAILY for today's challenge), so neither crowds the edges */
#btnContinue { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--t) * 0.2); font-size: calc(var(--t) * 1.75); line-height: 1; padding: calc(var(--t) * 0.5) calc(var(--t) * 0.6); min-width: 0; margin-top: calc(var(--t) * 0.3); }
#btnContinue small { font-size: 0.45em; letter-spacing: 0.08em; color: var(--gold); }
#btnContinue small:empty { display: none; }
#btnContinue:not([hidden]) + #btnPlay { font-size: calc(var(--t) * 1.6); background: var(--raise2); margin-top: 0; }
#btnContinue:not([hidden]) + #btnPlay::after { animation: none; }
/* the daily challenge: a stone card with a gold edge, its twist, and the bonus still to win at the right */
button.daily { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(var(--t) * 0.6); row-gap: calc(var(--t) * 0.1); text-align: left; min-width: 0; padding: calc(var(--t) * 0.5) calc(var(--t) * 0.9); background: var(--raise2); color: var(--ink); border-color: rgba(255, 200, 80, 0.6); }
button.daily .tag { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--t) * 0.75); letter-spacing: 0.14em; color: var(--gold); }
button.daily .bonus { grid-row: span 3; display: flex; align-items: center; gap: calc(var(--t) * 0.2); font-size: calc(var(--t) * 1.25); color: var(--ink); }
button.daily.taken .bonus { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--t) * 0.8); color: var(--muted); }
button.daily .name { font-size: calc(var(--t) * 1.25); line-height: 1.1; }
button.daily small { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 700; font-size: calc(var(--t) * 0.85); opacity: 0.8; line-height: 1.15; }
.ico.play { width: 0.62em; height: 0.7em; background: currentColor; clip-path: polygon(8% 0, 100% 50%, 8% 100%); }
#btnTitleResearch { align-self: stretch; justify-content: center; font-size: calc(var(--t) * 1.2); }
/* the records: three counters in a row */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--t) * 0.4); padding-top: calc(var(--t) * 0.9); border-top: calc(var(--t) * 0.12) solid rgba(142, 152, 168, 0.3); }
.stats div { display: flex; flex-direction: column; align-items: center; gap: calc(var(--t) * 0.15); }
.stats div + div { border-left: calc(var(--t) * 0.12) solid rgba(142, 152, 168, 0.3); }
.stats b { display: flex; align-items: center; gap: calc(var(--t) * 0.25); font-weight: 400; font-size: calc(var(--t) * 1.6); color: var(--ink); }
.stats small { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--t) * 0.85); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }

#btnTitleSound { position: absolute; top: max(calc(var(--t) * 1.2), env(safe-area-inset-top)); right: max(calc(var(--t) * 1.4), env(safe-area-inset-right)); width: calc(var(--t) * 3); height: calc(var(--t) * 3); font-size: calc(var(--t) * 1.4); animation: rise 0.7s 0.3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(calc(var(--t) * 1.5)); } }
@media (prefers-reduced-motion: reduce) { .logo, .menu, #btnTitleSound, #btnPlay::after { animation: none; } }

.row { display: flex; gap: calc(var(--u) * 0.5); }
#over .action { align-self: center; }
/* the game-over screen's next goal: a gold-edged plate with its label above */
.goal { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.15); text-align: center; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.1); border: calc(var(--u) * 0.12) solid rgba(255, 200, 80, 0.45); border-radius: var(--r); background: rgba(0, 0, 0, 0.18); color: var(--ink); }
.goal small { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--u) * 0.72); letter-spacing: 0.12em; color: var(--gold); }
.goal span:empty { display: none; }
.adNote { text-align: center; color: var(--gold); opacity: 1; }
.crystalRow { align-items: center; }
#btnRevive { font-size: calc(var(--u) * 1.4); }
/* the speed button: a fast-forward sign, gold (and gold-edged) while the game runs fast */
.ico.ff { width: 0.95em; height: 0.75em; background: currentColor; clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%); }
#btnSpeed .ico.ff { opacity: 0.6; }
#btnSpeed.fast { color: var(--gold); border-color: var(--gold); }
#btnSpeed.fast .ico.ff { opacity: 1; }

/* a phone held sideways: the window is short, so the HUD's unit gets its own floor (playbook: check 740x320, 844x390) */
@media (max-height: 500px) {
  :root { --u: clamp(8.5px, min(3.4vh, 1.45vw), 16px); }
  .side { bottom: calc(var(--u) * 8.6); }
  /* the title's menu with Continue and the daily card both showing: a little tighter, or it overflows 740x320 */
  .menu { gap: calc(var(--t) * 0.6); padding-top: calc(var(--t) * 1.2); padding-bottom: calc(var(--t) * 1.1); }
}
/* a narrow window (a phone upright): two rows of three cards; the wave plate goes under the buttons and the purse */
@media (max-aspect-ratio: 1/1) {
  :root { --u: clamp(9px, min(2.35vh, 2.7vw), 22px); }
  .top { grid-template-columns: auto 1fr; grid-template-areas: "left right" "middle middle"; row-gap: calc(var(--u) * 0.6); }
  .top .left { grid-area: left; }
  .top .middle { grid-area: middle; }
  .top .right { grid-area: right; gap: calc(var(--u) * 0.4); }
  #title { --t: min(var(--u), 2.4vw); }
  .titleWrap { flex-direction: column; gap: calc(var(--t) * 3); }
  .menu { width: min(100%, calc(var(--t) * 32)); }
  #shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side { bottom: calc(var(--u) * 15.5); }
  #researchList { grid-template-columns: 1fr; }
  #towerPanel { flex-wrap: wrap; height: auto; }
}

/* On a phone, vh is the height with the browser's bars hidden: while they show, a HUD sized by vh is too big for what's
   left and its bottom gets cut off. svh is the height with them showing. (A custom property can't fall back by being
   written twice, so the svh units are swapped in here, where the browser has them; keep these in step with the above.) */
@supports (height: 1svh) {
  :root { --u: clamp(9px, min(2.5svh, 1.45vw), 30px); }
  @media (max-height: 500px) { :root { --u: clamp(8.5px, min(3.4svh, 1.45vw), 16px); } }
  @media (max-aspect-ratio: 1/1) { :root { --u: clamp(9px, min(2.35svh, 2.7vw), 22px); } }
}

/* On a phone the pop-up cards (research, pause, game over, win) get a bigger unit of their own than the HUD's (Ernest,
   2026-11-12: "a bit small"). Sideways it's as big as the tallest card, research, still fits the height (about 24
   units tall); upright, as wide as fits. */
@media (max-height: 500px) { .panel { --u: clamp(10px, min(3.85vh, 2.1vw), 20px); } }
@media (max-aspect-ratio: 1/1) { .panel { --u: clamp(10px, 3.1vw, 20px); max-width: 94vw; } }
@supports (height: 1svh) {
  @media (max-height: 500px) { .panel { --u: clamp(10px, min(3.85svh, 2.1vw), 20px); } }
}

/* ---- the guided tutorial (src/coach.js; Ernest, 2026-11-12: a spotlight and a pointing hand). Over everything but the
   loading screen. Only the card takes presses itself: coach.js lets presses through to what's in the hole. */
#coach { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
/* the hole: its shadow, spread over the whole screen, is the dim */
#coachHole {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-radius: calc(var(--u) * 0.8);
  box-shadow: 0 0 0 200vmax rgba(15, 16, 22, var(--dim, 0.6));
  transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease;
}
#coachHole.round { border-radius: 50%; }
/* a gold ring pulsing out from the hole's edge */
#coachHole::after {
  content: ""; position: absolute; inset: calc(var(--u) * -0.3);
  border: max(2px, calc(var(--u) * 0.22)) solid var(--gold); border-radius: inherit;
  animation: coachRing 1.1s ease-out infinite;
}
#coach.nohole #coachHole::after { display: none; }
@keyframes coachRing { from { transform: scale(1); opacity: 0.95; } to { transform: scale(1.16); opacity: 0; } }
/* the hand: points up into a hole below it, or down into one above (.down), bobbing toward it */
#coachHand { position: absolute; left: 0; top: 0; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); transition: transform 0.25s ease; }
#coachHand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * 0.18) 0 rgba(0, 0, 0, 0.35)); animation: coachPoint 0.6s ease-in-out infinite alternate; }
#coachHand.down svg { animation-name: coachPointDown; }
@keyframes coachPoint { from { transform: translateY(calc(var(--u) * 0.7)); } to { transform: translateY(0); } }
@keyframes coachPointDown { from { transform: rotate(180deg) translateY(calc(var(--u) * 0.7)); } to { transform: rotate(180deg) translateY(0); } }
/* the card: a slate panel like the game's others */
#coachCard {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6);
  width: max-content;
  max-width: min(calc(100vw - 20px), calc(var(--u) * 24));
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3) calc(var(--u) * 0.8);
  background: var(--raise);
  border: calc(var(--u) * 0.16) solid var(--edge);
  border-radius: calc(var(--u) * 0.8);
  box-shadow: var(--bevel), 0 calc(var(--u) * 0.4) 0 var(--edge), 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.45);
  text-align: center;
  transition: transform 0.25s ease;
}
#coachText { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: 0.01em; font-size: calc(var(--u) * 1.3); line-height: 1.22; }
#coachBtn { min-width: calc(var(--u) * 8); }
#coachCard .links { display: flex; gap: calc(var(--u) * 0.8); }
#coachCard .links:not(:has(button:not([hidden]))) { display: none; }
/* a quiet text button: Skip tutorial, No more tips, How to play */
button.link {
  min-width: 0; background: none; border: 0; box-shadow: none;
  padding: calc(var(--u) * 0.15) calc(var(--u) * 0.4);
  font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: 0.02em;
  font-size: calc(var(--u) * 0.9); color: var(--muted); text-decoration: underline; text-underline-offset: 0.18em;
}
button.link:active { transform: none; box-shadow: none; }
#btnHowTo { align-self: center; font-size: calc(var(--t, var(--u)) * 0.95); }
#btnOverMenu { align-self: center; font-size: calc(var(--u) * 1.05); }
/* the line while wave 1 runs: no dim, no hole, nothing blocked, under the wave plate */
#coach.quiet #coachHole, #coach.quiet #coachHand { display: none; }
#coach.quiet #coachCard { pointer-events: none; left: 50%; top: calc(var(--u) * 7); transform: translateX(-50%); transition: none; background: var(--dark); box-shadow: none; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.1); max-width: min(calc(100vw - 20px), calc(var(--u) * 40)); }
#coach.quiet #coachText { font-size: calc(var(--u) * 1.1); }
@media (max-aspect-ratio: 1/1) { #coach.quiet #coachCard { top: calc(var(--u) * 10); } }
/* the camera's hands-on steps (.open): no dim, so the hall shows as it moves; the card near the top; for a drag, the
   hand in the middle sliding side to side */
#coach.open #coachHole { display: none; }
#coachHand.drag svg { animation: coachDrag 1.8s ease-in-out infinite; }
@keyframes coachDrag {
  0% { transform: translateX(calc(var(--u) * -3)); opacity: 0; }
  12% { transform: translateX(calc(var(--u) * -3)) scale(0.9); opacity: 1; }
  70% { transform: translateX(calc(var(--u) * 3)) scale(0.9); opacity: 1; }
  85%, 100% { transform: translateX(calc(var(--u) * 3)); opacity: 0; }
}
/* on a phone the card's words get the pop-up cards' bigger unit */
@media (max-height: 500px) { #coachCard { --u: clamp(10px, min(3.6vh, 2vw), 18px); } }
@media (max-aspect-ratio: 1/1) { #coachCard { --u: clamp(10px, 3vw, 18px); } }
@supports (height: 1svh) {
  @media (max-height: 500px) { #coachCard { --u: clamp(10px, min(3.6svh, 2vw), 18px); } }
}
@media (prefers-reduced-motion: reduce) {
  #coachHole::after, #coachHand svg, #coachHand.drag svg { animation: none; }
  #coachHand.down svg { transform: rotate(180deg); }
}