/* Agent of Somebody. Everything drawn over the game view: screens, HUD and touch controls.
   Plain CSS, no build step. js/80-ui.js sets three attributes on #ui that this file keys on:
   data-screen (loading, title, play, dead, win), data-input (desk, touch) and
   data-layout (wide, port, land). */

/* ---- Fonts. The site serves these files. Anywhere else they 404 and the system fonts stand in. ---- */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/sora-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
  --bg: #211a2c;
  --bg-2: #1b1525;
  --surface: #2a2236;
  --surface-2: #352b43;
  --inset: #18121f;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.2);
  --text: #ffffff;
  --text-2: #d1cece;
  --text-3: #918aa3;
  --teal: #48e0c0;
  --blue: #8ea8ff;
  --ocean: linear-gradient(135deg, #8ea8ff, #48e0c0);
  --on-accent: #032726;
  --danger: #ff6b5a;
  --amber: #fdb022;
  --display: Sora, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* a shadow that keeps loose text readable over a bright or flickering scene */
  --ts: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.7);
}

/* ---- Page ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg-2); color: var(--text); }
body {
  position: fixed; inset: 0;
  font-family: var(--font); font-size: 14px; line-height: 1.4;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg-2); touch-action: none; outline: none; }
#ui {
  position: fixed; inset: 0; z-index: 2; overflow: hidden; touch-action: none;
  --pad: 12px;
  --et: max(var(--pad), env(safe-area-inset-top, 0px));
  --er: max(var(--pad), env(safe-area-inset-right, 0px));
  --eb: max(var(--pad), env(safe-area-inset-bottom, 0px));
  --el: max(var(--pad), env(safe-area-inset-left, 0px));
  --sab: env(safe-area-inset-bottom, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --side: 230px;
  --slot: 52px;
}
#ui[data-layout="wide"] { --pad: 16px; --side: 270px; }
#ui[data-layout="land"] { --side: clamp(150px, 26vw, 230px); }
/* resets at zero specificity, so any class below can set its own margin, colour or font */
:where(#ui) :where(p, h2, h3, dl, dd, ol, ul) { margin: 0; }
:where(#ui) :where(ol, ul) { padding: 0; list-style: none; }
:where(#ui) a { color: inherit; }
:where(#ui) img { -webkit-user-drag: none; user-select: none; }
:where(#ui) button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; touch-action: none; }
#ui :focus { outline: none; }
#ui :focus-visible, #nogl :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Shared parts ---- */
.glass {
  background: rgba(27, 21, 37, 0.84);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
}
/* a blur over a moving canvas costs a phone a frame, so touch layouts get a denser panel */
#ui[data-input="touch"] #hud .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(27, 21, 37, 0.9); }

.lbl { font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  font: 600 14px/1 var(--display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.08s;
}
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.34); }
.btn:active { transform: scale(0.98); }
.btn-primary { border: 0; background: var(--ocean); color: var(--on-accent); box-shadow: 0 6px 22px rgba(72, 224, 192, 0.2); }
.btn-primary:hover { background: var(--ocean); filter: brightness(1.08); }
.btn-ghost { background: transparent; }

/* A grade is always this chip, and these colours are for grades only. */
.g {
  display: inline-block; min-width: 2.3em; padding: 1px 5px; flex: none;
  border: 1px solid var(--g, var(--line-2)); border-radius: 5px;
  font: 600 11px/1.5 var(--mono); text-align: center; color: var(--g, var(--text));
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--g, #ffffff) 12%, transparent);
}
[data-g="AA"] { --g: #2dd4bf; }
[data-g="A"] { --g: #4ade80; }
[data-g="BB"] { --g: #a3e635; }
[data-g="B"] { --g: #facc15; }
[data-g="C"] { --g: #f5b73c; }
[data-g="D"] { --g: #fb923c; }
[data-g="E"] { --g: #f87171; }
[data-g="F"] { --g: #ef4444; }
.sc { font: 500 12px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.own { flex: none; font: 500 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(72, 224, 192, 0.45); border-radius: 4px; padding: 2px 4px; margin-left: 7px; }

/* A logo sits on a pale tile so a dark mark stays visible. Without one, initials on the listing's hue. */
.logo { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: #f1eef6; overflow: hidden; font-size: 13px; }
.logo img { display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; pointer-events: none; }
.logo i { display: none; font: 600 1em/1 var(--mono); font-style: normal; letter-spacing: 0.02em; }
.logo.no-img { background: hsl(var(--h, 260) 45% 22%); }
.logo.no-img img { display: none; }
.logo.no-img i { display: block; color: hsl(var(--h, 260) 70% 80%); }

kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); font: 500 11px/1 var(--mono); color: var(--text); }
.controls dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 22px; }
.controls dl > div { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.controls dt { display: flex; align-items: center; gap: 3px; font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.controls dt em { font-style: normal; padding: 0 2px; }
.controls dd { font-size: 13px; color: var(--text-2); }
.controls.is-touch dl { grid-template-columns: repeat(2, auto); gap: 7px 22px; }

/* One tool, as the loot card, the tooltip, the swap prompt and the end screen show it. */
.th { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
.th-name { display: flex; align-items: center; min-width: 0; font: 600 15px/1.25 var(--display); }
.th-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-mid { min-width: 0; }
.th-sub { font-size: 12px; line-height: 1.3; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-grade { display: flex; align-items: center; gap: 7px; }
.ab { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ab b { color: var(--text); font-weight: 600; margin-right: 6px; }
.rv { padding-left: 9px; border-left: 2px solid rgba(255, 255, 255, 0.18); }
.rv-t { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.rv-by { display: flex; align-items: center; gap: 7px; margin-top: 3px; font: 400 10.5px/1.2 var(--mono); color: var(--text-3); }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
.pips i.f { background: var(--text-2); }

/* ---- Screens ---- */
.scr { position: absolute; inset: 0; display: none; }
#ui[data-screen="loading"] .scr-loading { display: grid; }
#ui[data-screen="title"] .scr-title { display: block; }
#ui[data-screen="dead"] .scr-dead { display: flex; }
#ui[data-screen="win"] .scr-win { display: block; }
.scr-title, .scr-win, .scr-dead, .scr-pause { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* a menu that is taller than a small screen still scrolls when the drag starts on a button */
#ui .scr .btn { touch-action: pan-y; }

/* Loading */
.scr-loading { place-items: center; background: radial-gradient(ellipse at 50% 42%, #2a2236 0%, var(--bg-2) 62%); }
.load { display: grid; justify-items: center; gap: 0; padding: 24px; text-align: center; }
.load-mark { width: 56px; height: 56px; }
.load-name { margin-top: 18px; font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; }
.load-line { width: 220px; max-width: 60vw; height: 2px; margin-top: 22px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.load-line i { display: block; height: 100%; background: var(--ocean); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s ease-out; }
.load-text { min-height: 1.4em; margin-top: 12px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--text-3); }

/* Title. "the menu needs to be cool". Behind it the agent stands in each of the three cities in
   turn (js/90-main.js). The copy and the form sit on the left over a scrim that clears toward
   them, the three jobs sit top right with the hour it is there now, and how the game plays runs
   along the bottom, so nobody starts without having been told that they fire by themselves. */
.scr-title {
  background:
    linear-gradient(90deg, rgba(13, 8, 19, 0.94) 0%, rgba(13, 8, 19, 0.78) 28%, rgba(13, 8, 19, 0.22) 56%, rgba(13, 8, 19, 0) 76%),
    linear-gradient(0deg, rgba(13, 8, 19, 0.96) 0%, rgba(13, 8, 19, 0.74) 22%, rgba(13, 8, 19, 0) 46%),
    linear-gradient(180deg, rgba(13, 8, 19, 0.6) 0%, rgba(13, 8, 19, 0) 15%);
}
.title-wrap {
  min-height: 100%; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  column-gap: 48px; align-items: start;
  padding: max(22px, env(safe-area-inset-top, 0px)) max(4.5vw, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(6vw, env(safe-area-inset-left, 0px));
}
.title-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 4px 6px 4px 0; border-radius: 8px; font: 600 14px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
.brand-mark { width: 26px; height: 26px; }
.btn-sm { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; }
.btn[hidden], .ib[hidden] { display: none; }
.title-main { grid-column: 1; grid-row: 2; align-self: end; padding-top: 18px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--teal); }
.title-h { margin: 12px 0 0; font: 800 clamp(44px, min(6.4vw, 9.4vh), 96px)/0.92 var(--display); letter-spacing: -0.045em; text-wrap: balance; text-shadow: 0 0 46px rgba(72, 224, 192, 0.16); }
/* the human is whoever the player names, so the word is drawn hollow. The fill is the scrim's
   colour painted over the inner half of the stroke, which hides where a glyph's contours overlap. */
.title-h span { display: block; color: #120c1a; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.94); paint-order: stroke fill; }
.lede { margin-top: 14px; max-width: 40ch; font-size: 18px; line-height: 1.45; color: var(--text-2); }
.lede span { white-space: nowrap; }
/* who the three jobs are against, under the lede */
.foe { margin-top: 8px; max-width: 46ch; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.title-side { grid-column: 1; grid-row: 3; width: 100%; max-width: 480px; margin-top: 14px; }
.join .lbl { display: block; }
.join-row { display: flex; gap: 8px; margin-top: 8px; }
.field {
  flex: 1 1 0; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(24, 18, 31, 0.86); color: var(--text);
  font: 500 16px/1 var(--font); -webkit-user-select: text; user-select: text; touch-action: manipulation;
  -webkit-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: var(--text-3); opacity: 1; }
#ui .field:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(72, 224, 192, 0.18); }
.best { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 400 12px/1.2 var(--mono); color: var(--text-3); }
.best[hidden] { display: none; }
.best b { font-weight: 500; color: var(--text); }
/* the three jobs. The one behind the menu right now is lit, and each shows its own hour */
.title-night {
  grid-column: 2; grid-row: 2; align-self: start; justify-self: end; width: min(100%, 328px); margin-top: 20px; padding: 12px 14px 6px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 8, 19, 0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);       /* a dawn sky behind it would wash the words out */
}
.title-night .cities, .title-night .cities li:last-child { border-bottom: 0; }
.title-night .lbl, .ti .lbl { display: block; margin: 0 0 8px; color: var(--teal); }
.cities { counter-reset: job; border-top: 1px solid var(--line); }
.cities li { counter-increment: job; display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); transition: color 0.6s; }
.cities li::before { content: counter(job); width: 1.2em; font: 500 11px/1 var(--mono); color: var(--text-3); transition: color 0.6s; }
.cities b { color: var(--text); font: 600 14px/1.2 var(--display); margin-right: 2px; white-space: nowrap; }
.cities time { margin-left: auto; padding-left: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--text-3); font-variant-numeric: tabular-nums; transition: color 0.6s; }
.cities li.on { color: var(--text); }
.cities li.on::before, .cities li.on time { color: var(--teal); }
/* how it plays: four short lines across, then the keys in one row. The pause menu shows the same four as a list */
.title-info { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.how { margin: 0; padding: 0; list-style: none; counter-reset: how; }
.how li { counter-increment: how; position: relative; padding: 0 0 6px 22px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.how li::before { content: counter(how); position: absolute; left: 0; top: 0.3em; font: 500 10px/1 var(--mono); color: var(--teal); }
.how b { font-weight: 600; color: var(--text); }
.title-info .how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.title-info .how li { padding-bottom: 0; }
.title-info .how b { display: block; margin-bottom: 2px; }
.ti-keys { display: flex; align-items: baseline; gap: 18px; margin-top: 10px; }
.ti-keys .lbl { flex: none; margin: 0; }
.title-info .controls dl, .title-info .controls.is-touch dl { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.title-info .controls dd { font-size: 12.5px; }
.fine { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.fine a { color: var(--text-2); text-underline-offset: 2px; }
.pause-how { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pause-how .lbl { display: block; margin-bottom: 8px; }
.pause-how .how li { font-size: 12.5px; padding-bottom: 4px; }

#ui[data-screen="title"] .title-top,
#ui[data-screen="title"] .title-main > *,
#ui[data-screen="title"] .title-side > *,
#ui[data-screen="title"] .title-night,
#ui[data-screen="title"] .title-info,
#ui[data-screen="title"] .fine { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#ui[data-screen="title"] .title-h { animation-delay: 0.06s; }
#ui[data-screen="title"] .lede { animation-delay: 0.14s; }
#ui[data-screen="title"] .foe { animation-delay: 0.2s; }
#ui[data-screen="title"] .join { animation-delay: 0.24s; }
#ui[data-screen="title"] .title-night { animation-delay: 0.3s; }
#ui[data-screen="title"] .title-info { animation-delay: 0.34s; }
#ui[data-screen="title"] .fine { animation-delay: 0.44s; }

/* a narrow window or a phone held upright: one column, the scene behind all of it, and it scrolls */
@media (max-width: 900px) and (min-height: 561px), (max-width: 900px) and (orientation: portrait) {
  .scr-title { background: linear-gradient(180deg, rgba(13, 8, 19, 0.8) 0%, rgba(13, 8, 19, 0.42) 22%, rgba(13, 8, 19, 0.8) 50%, rgba(13, 8, 19, 0.96) 100%); }
  .title-wrap { display: flex; flex-direction: column; align-items: stretch; padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
  .title-main { padding-top: 24vh; }
  .title-h { font-size: clamp(44px, 13.5vw, 72px); }
  .title-h span { -webkit-text-stroke-width: 2.5px; }
  .lede { margin-top: 16px; font-size: 16px; }
  .title-side { max-width: none; }
  .title-night { align-self: stretch; width: auto; margin-top: 26px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .title-top .crumbs li + li { display: none; }      /* the name is in the heading just below */
  .title-info .how { display: block; }
  .title-info .how li { padding-bottom: 8px; }
  .title-info .how b { display: inline; }
  .ti-keys { display: block; }
  .ti-keys .lbl { margin-bottom: 8px; }
  .fine { margin-top: 18px; }
}
/* a phone on its side: the copy and the form side by side, the rest below them */
@media (max-height: 560px) and (orientation: landscape) {
  .scr-title { background: linear-gradient(90deg, rgba(13, 8, 19, 0.92) 0%, rgba(13, 8, 19, 0.8) 46%, rgba(13, 8, 19, 0.5) 100%); }
  .title-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; align-items: center; column-gap: 32px;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(26px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(26px, env(safe-area-inset-left, 0px));
  }
  .title-main { padding-top: 6px; align-self: center; }
  .title-h { margin-top: 8px; font-size: clamp(34px, 6.6vw, 56px); }
  .title-h span { -webkit-text-stroke-width: 2.5px; }
  .lede { margin-top: 10px; font-size: 15px; }
  .foe { margin-top: 8px; font-size: 12.5px; }
  .title-side { grid-column: 2; grid-row: 2; max-width: none; margin-top: 0; align-self: center; }
  .title-night { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; width: auto; margin-top: 14px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
  .cities li { gap: 6px; padding: 5px 0; font-size: 12px; }
  .cities li::before { display: none; }
  .cities b { font-size: 13px; }
  .title-info { margin-top: 14px; padding-top: 12px; }
  .title-info .how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
  .how li { font-size: 12px; }
  .fine { margin-top: 10px; font-size: 10.5px; line-height: 1.45; }
}

/* WebGL2 missing, or scripts off */
#nogl { position: fixed; inset: 0; z-index: 50; background: var(--bg-2); }
#nogl[hidden] { display: none; }
.nogl-card { position: absolute; left: 50%; top: 50%; width: min(420px, calc(100% - 48px)); transform: translate(-50%, -50%); display: grid; justify-items: center; text-align: center; }
.nogl-h { margin: 18px 0 0; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.nogl-p { margin: 10px 0 22px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.nojs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); font-size: 14px; text-align: center; color: var(--text-2); }
.nojs a { color: var(--teal); }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; display: none; }
#ui[data-screen="play"] #hud { display: block; }
#hud > * { pointer-events: none; }
/* a soft shade along the top edge, so the level line reads over a lamp or a bank of fog */
#hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(10, 6, 16, 0.62), rgba(10, 6, 16, 0)); }
#hud button, #hud a { pointer-events: auto; }
#hud .play { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#hud.is-look .play { cursor: grabbing; }
.plates, .fct, .fx { position: absolute; inset: 0; overflow: hidden; contain: strict; }

/* nameplates: pooled, moved by transform only */
.plate { position: absolute; left: 0; top: 0; width: 64px; margin: -16px 0 0 -32px; visibility: hidden; will-change: transform; }
.plate.on { visibility: visible; }
.plate-hp { height: 5px; border-radius: 2px; background: rgba(8, 5, 12, 0.78); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); overflow: hidden; }
.plate-hp i, .plate-cast i { display: block; height: 100%; transform-origin: 0 50%; will-change: transform; }
.plate-hp i { background: linear-gradient(180deg, #ff8f80, var(--danger)); }
.plate-cast { height: 3px; margin-top: 3px; border-radius: 1px; background: rgba(8, 5, 12, 0.78); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); overflow: hidden; visibility: hidden; }
.plate-cast i { background: var(--amber); }
.plate.on.casting .plate-cast { visibility: visible; }
.plate.elite { width: 86px; margin-left: -43px; }
.plate.elite .plate-hp { height: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.34); }
.plate.is-tgt .plate-hp { box-shadow: 0 0 0 1px #ffffff, 0 0 8px rgba(255, 255, 255, 0.45); }
.plate.is-tgt::before { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid #ffffff; border-bottom: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }

/* floating combat text: pooled, animated from script */
.ft { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; font: 600 15px/1 var(--mono); color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85); }
.ft-crit { font-size: 24px; color: var(--amber); }
.ft-hurt { font-size: 17px; color: var(--danger); }
.ft-heal { color: var(--teal); }
.ft-block { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #b9b3c8; }
.ft-perfect { font: 700 22px/1.1 var(--display); letter-spacing: 0.01em; color: transparent; background: var(--ocean); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.ft-note { font: 500 12px/1 var(--font); color: var(--text-2); }

/* edge flashes */
.fx i { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.fx-hurt { background: radial-gradient(ellipse at 50% 50%, rgba(255, 70, 50, 0) 50%, rgba(255, 70, 50, 0.55) 100%); }
.fx-heal { background: radial-gradient(ellipse at 50% 50%, rgba(72, 224, 192, 0) 56%, rgba(72, 224, 192, 0.4) 100%); }
.fx-perfect { background: linear-gradient(135deg, rgba(142, 168, 255, 0.55), rgba(72, 224, 192, 0.55)); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 54%, #000000 100%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 54%, #000000 100%); }
.fx-low { background: radial-gradient(ellipse at 50% 50%, rgba(255, 70, 50, 0) 58%, rgba(255, 70, 50, 0.3) 100%); }
#hud.is-low .fx-low { opacity: 1; animation: low 1.5s ease-in-out infinite; }

/* top left: home, where you are, what is left to do */
.hud-tl { position: absolute; top: var(--et); left: var(--el); display: flex; align-items: center; gap: 6px; max-width: var(--side); }
#ui[data-layout="port"] .hud-tl { max-width: calc(100% - var(--el) - var(--er) - 100px); }
.home { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.home svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.where { min-width: 0; text-shadow: var(--ts); }
.lvl { font: 600 14px/1.25 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl span { margin-left: 5px; font: 400 13px/1.25 var(--font); letter-spacing: 0; color: var(--text-2); }
.obj { margin-top: 2px; font: 500 11px/1.25 var(--mono); letter-spacing: 0.03em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* top right: sound and pause */
.hud-tr { position: absolute; top: var(--et); right: var(--er); display: flex; gap: 8px; }
.ib { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; cursor: pointer; color: var(--text); transition: background 0.15s, border-color 0.15s; }
.ib:hover { border-color: rgba(255, 255, 255, 0.3); }
.ib svg { width: 18px; height: 18px; }
.ib .i-off, .ib[aria-pressed="true"] .i-on { display: none; }
.ib[aria-pressed="true"] .i-off { display: block; }
.ib[aria-pressed="true"] { color: var(--text-3); }

/* top centre: boss, then target. On a phone held upright the messages stack under them. */
.col-top { container-type: inline-size; position: absolute; top: var(--et); left: 50%; width: min(520px, calc(100% - 2 * (var(--el) + var(--side) + 12px))); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#ui[data-layout="land"] .col-top { width: min(480px, calc(100% - 2 * (var(--el) + var(--side) + 8px))); }
#ui[data-layout="port"] .col-top { top: calc(var(--et) + 48px); left: 0; right: 0; width: min(520px, calc(100% - var(--el) - var(--er))); margin: 0 auto; transform: none; }
.col-side { position: absolute; top: calc(var(--et) + 52px); right: var(--er); width: clamp(250px, calc(50vw - 300px), 340px); display: flex; flex-direction: column; gap: 10px; }
#ui[data-layout="land"] .col-side { left: var(--el); right: auto; width: var(--side); top: calc(var(--et) + 50px); }

/* health bars */
.hp { position: relative; height: 10px; border-radius: 3px; background: rgba(8, 5, 12, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
.hp > i { position: absolute; inset: 0; transform-origin: 0 50%; will-change: transform; }
.hp-lag { background: rgba(255, 255, 255, 0.6); transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1) 0.12s; }
.hp-fill { background: linear-gradient(180deg, #ff9485 0%, var(--danger) 48%, #d9493a 100%); }
.hp-ticks { background: repeating-linear-gradient(90deg, rgba(10, 6, 16, 0) 0, rgba(10, 6, 16, 0) calc(10% - 1px), rgba(10, 6, 16, 0.6) calc(10% - 1px), rgba(10, 6, 16, 0.6) 10%); }
.hp > .hp-shield { bottom: auto; height: 4px; background: linear-gradient(180deg, #dbe3ff, var(--blue)); box-shadow: 0 0 6px rgba(142, 168, 255, 0.9); visibility: hidden; }
.has-shield .hp > .hp-shield { visibility: visible; }

/* a cast: name and time on one line, a thin bar under it. Amber means it can be interrupted. */
.cast { margin-top: 6px; visibility: hidden; }
.cast.on { visibility: visible; }
.cast-row { display: flex; align-items: center; gap: 8px; height: 16px; }
.cast-name { min-width: 0; font: 500 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-int { display: none; flex: none; padding: 2px 5px; border: 1px solid rgba(253, 176, 34, 0.55); border-radius: 4px; font: 600 9px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.cast.int .cast-int { display: block; animation: nudge 0.9s ease-in-out infinite; }
.cast-t { margin-left: auto; flex: none; font: 500 11px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cast-bar { height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(8, 5, 12, 0.72); overflow: hidden; }
.cast-bar i { display: block; height: 100%; background: #c9c2dd; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.cast.int .cast-bar i { background: var(--amber); }

.boss { display: none; width: 100%; padding: 8px 12px 9px; }
.boss.on { display: block; }
.boss-top { display: flex; align-items: baseline; gap: 8px; }
.boss-name { flex: 0 1 auto; min-width: 0; font: 600 14px/1.25 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-title { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-meta { flex: none; display: flex; align-items: baseline; gap: 8px; font: 500 10px/1.25 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.boss-enr { color: var(--amber); letter-spacing: 0.06em; }
.boss-enr.soon { color: var(--danger); }
.boss-enr:empty, .boss-phase:empty { display: none; }
.boss-pct { flex: none; min-width: 4ch; font: 500 12px/1.25 var(--mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
#ui[data-layout="port"] .boss-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "title meta"; gap: 2px 10px; }
#ui[data-layout="port"] .boss-name { grid-area: name; }
#ui[data-layout="port"] .boss-pct { grid-area: pct; }
#ui[data-layout="port"] .boss-title { grid-area: title; }
#ui[data-layout="port"] .boss-meta { grid-area: meta; }
/* a narrow column anywhere else: phase and enrage drop to a line of their own before the name is cut */
@container (max-width: 330px) {
  .boss-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "meta meta"; gap: 2px 10px; }
  .boss-name { grid-area: name; }
  .boss-pct { grid-area: pct; }
  .boss-meta { grid-area: meta; justify-self: start; }
  .boss-title { display: none; }
}
.boss .hp { margin-top: 6px; }
.boss.is-tgt { border-color: rgba(255, 255, 255, 0.34); }

.target { display: none; width: min(340px, 100%); padding: 6px 10px 7px; }
.target.on { display: block; }
.tg-top { display: flex; align-items: baseline; gap: 6px; }
.tg-kind, .tg-mark { display: none; flex: none; font: 500 9px/1.25 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.tg-kind { color: var(--text-2); }
.tg-mark { color: var(--teal); }
.target[data-kind="elite"] .tg-kind, .target.marked .tg-mark, .boss.marked .tg-mark { display: block; }
.tg-name { flex: 1 1 0; min-width: 0; font: 600 13px/1.25 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-pct { flex: none; font: 500 11px/1.25 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.target .hp { height: 6px; margin-top: 5px; }
.target .cast { margin-top: 5px; }
/* the boss frame keeps room for its cast line so the target frame under it does not jump.
   The target frame does not, since an idle line there reads as an empty panel. */
.target .cast:not(.on) { display: none; }
/* a phone on its side has little height: tighter frames, and the boss's title gives way */
#ui[data-layout="land"] .boss { padding: 6px 10px 7px; }
#ui[data-layout="land"] .boss-title { display: none; }
#ui[data-layout="land"] .boss-name { flex: 1 1 0; }
#ui[data-layout="land"] .boss .hp { height: 8px; margin-top: 5px; }
#ui[data-layout="land"] .boss .cast, #ui[data-layout="land"] .target .cast { margin-top: 4px; }
#ui[data-layout="land"] .col-top { gap: 4px; }
#ui[data-layout="land"] .target { width: min(300px, 100%); padding: 5px 10px 6px; }

/* a message from the human, in the manner of a phone notification */
.say { display: none; width: 100%; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 9px 12px 10px 10px; }
.say.on { display: grid; animation: drop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.say.out { animation: fade 0.22s ease-in both; }
.say-av { grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ocean); color: var(--on-accent); font: 700 13px/1 var(--display); }
.say-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.say-from { min-width: 0; font: 600 12px/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.say-when { flex: none; font: 400 10px/1.3 var(--mono); color: var(--text-3); }
.say-text { font-size: 13.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }

#ui[data-layout="land"] .say { grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; padding: 7px 10px 8px 8px; }
#ui[data-layout="land"] .say-av { width: 24px; height: 24px; font-size: 11px; }
#ui[data-layout="land"] .say-text { font-size: 13px; line-height: 1.35; }

/* loot: a key connected a tool */
.loot { display: none; position: relative; width: 100%; max-width: 380px; padding: 12px 12px 12px; overflow: hidden; }
.loot.on { display: block; animation: drop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.loot.out { animation: fade 0.25s ease-in both; }
.loot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ocean); }
.loot-head { display: flex; justify-content: space-between; gap: 8px; }
.loot-head .lbl:first-child { color: var(--teal); }
.loot .th { margin-top: 9px; }
.loot .logo { width: 40px; height: 40px; border-radius: 9px; }
.loot .ab { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.loot .rv { margin-top: 9px; }

/* a phone on its side: the card sits top centre, so it is kept short */
#ui[data-layout="land"] .loot { padding: 9px 11px 10px; }
#ui[data-layout="land"] .loot .th { margin-top: 7px; }
#ui[data-layout="land"] .loot .logo { width: 32px; height: 32px; border-radius: 8px; }
#ui[data-layout="land"] .loot .th-name { font-size: 14px; }
#ui[data-layout="land"] .loot .ab { margin-top: 7px; padding-top: 7px; font-size: 12.5px; line-height: 1.35; }
#ui[data-layout="land"] .loot .rv { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
#ui[data-layout="land"] .loot .rv-t { flex: 1 1 0; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui[data-layout="land"] .loot .rv-by { flex: none; margin-top: 0; }

/* level intro: a lower third that plays once and leaves */
.intro { position: absolute; left: 0; right: 0; bottom: 25%; padding: 20px max(6vw, var(--el)) 22px; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; background: linear-gradient(90deg, rgba(18, 12, 26, 0.84) 0%, rgba(18, 12, 26, 0.62) 36%, rgba(18, 12, 26, 0) 76%); }
.intro::before, .intro::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 66%); }
.intro::before { top: 0; }
.intro::after { bottom: 0; }
.intro.on { opacity: 1; visibility: visible; transition: opacity 0.35s; }
.intro-k { display: flex; align-items: center; gap: 10px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.intro-k span + span { padding-left: 10px; border-left: 1px solid var(--line-2); color: var(--text-2); }
.intro-city { margin-top: 8px; font: 800 clamp(40px, 7vw, 80px)/1 var(--display); letter-spacing: -0.04em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.intro-rule { width: 120px; height: 2px; margin: 14px 0 12px; background: var(--ocean); transform-origin: 0 50%; }
.intro-place { font-size: 15px; line-height: 1.35; color: var(--text-2); text-shadow: var(--ts); }
.intro-job { margin-top: 3px; font: 600 18px/1.35 var(--font); text-shadow: var(--ts); }
.intro-slots { margin-top: 10px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); text-shadow: var(--ts); }
.intro.on > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.intro.on > .intro-city { animation-delay: 0.08s; }
.intro.on > .intro-rule { animation: draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.intro.on > .intro-place { animation-delay: 0.3s; }
.intro.on > .intro-job { animation-delay: 0.38s; }
.intro.on > .intro-slots { animation-delay: 0.5s; }
#ui[data-layout="port"] .intro { bottom: 54%; padding: 16px max(20px, var(--el)) 18px; background: linear-gradient(90deg, rgba(18, 12, 26, 0.86) 0%, rgba(18, 12, 26, 0.7) 60%, rgba(18, 12, 26, 0.2) 100%); }
#ui[data-layout="land"] .intro { bottom: calc(var(--sab) + 64px); padding: 12px max(28px, var(--el)) 14px; }
#ui[data-layout="land"] .intro-city { font-size: clamp(34px, 6vw, 52px); }
#ui[data-layout="land"] .intro-rule { margin: 9px 0 8px; }
#ui[data-layout="land"] .intro-job { font-size: 16px; }
#ui[data-layout="land"] .intro-slots { margin-top: 6px; }

/* banner: boss pull, enrage, checkpoint */
.banner { position: absolute; left: 0; right: 0; top: 24%; padding: 14px 20px 16px; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; background: linear-gradient(90deg, rgba(18, 12, 26, 0) 0%, rgba(18, 12, 26, 0.74) 30%, rgba(18, 12, 26, 0.74) 70%, rgba(18, 12, 26, 0) 100%); }
.banner::before, .banner::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.3) 38%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 88%); }
.banner::before { top: 0; }
.banner::after { bottom: 0; }
.banner.on { opacity: 1; visibility: visible; transition: opacity 0.25s; }
.banner-t { padding-left: 0.16em; font: 700 clamp(22px, 4.4vw, 44px)/1.1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.banner-s { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--text-2); text-shadow: var(--ts); }
.banner-s:empty { display: none; }
.banner.on .banner-t { animation: settle 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#ui[data-layout="port"] .banner { top: 31%; }
#ui[data-layout="land"] .banner { top: 30%; padding: 9px 20px 11px; }

/* bottom: hint, the player's frame, the action bar */
.dock { position: absolute; left: 50%; bottom: var(--eb); transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.hint { align-self: center; max-width: min(560px, 92vw); margin-bottom: 4px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(18, 12, 26, 0.8); font: 500 13px/1.35 var(--font); text-align: center; color: var(--text); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.hint.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }

.pframe { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 8px 12px 9px; }
/* a narrow frame: counter and credits take a second line, then the words give way to the numbers */
@container (max-width: 250px) {
  .pf-side { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .cred .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 110px) {
  .pf-row .lbl, .pip span { display: none; }
  .pf-row { justify-content: flex-end; }
}
.pf-main { flex: 1 1 130px; min-width: 0; }
.pf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-num { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-num small { font-size: 11px; color: var(--text-3); }
.pframe .hp { margin-top: 6px; }
.pframe .hp-fill { background: linear-gradient(90deg, var(--blue), var(--teal)); }
.pframe.is-low .hp-fill { background: linear-gradient(180deg, #ff9485, var(--danger)); }
.pframe.is-low .pf-num { color: var(--danger); }
.pf-shield { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 6px); visibility: hidden; }
.pframe.has-shield .pf-shield { visibility: visible; }
.pframe.has-shield .hp { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px var(--blue), 0 0 10px rgba(142, 168, 255, 0.55); }
.pf-side { flex: none; display: flex; align-items: center; gap: 14px; }
.pip { display: flex; align-items: center; gap: 6px; font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); transition: color 0.12s; }
.pip i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); transition: background 0.12s, box-shadow 0.12s; }
.pip.on { color: var(--text); }
.pip.on i { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 8px rgba(72, 224, 192, 0.9); }
.cred { display: flex; align-items: center; gap: 5px; }
.cred svg { width: 12px; height: 12px; color: var(--teal); }
.cred b { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cred .lbl { font-size: 9px; }

.bar { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 16px; }
.bar-sep { align-self: stretch; width: 1px; margin: 5px 3px; background: var(--line); }

/* One slot. The same eight buttons are a row on a desk and two arcs under a thumb. */
.slot {
  position: relative; flex: none; width: var(--slot); height: var(--slot); padding: 0; border: 0; border-radius: 11px;
  background: rgba(10, 6, 16, 0.78); cursor: pointer; --cd: 0;
  box-shadow: inset 0 0 0 1.5px var(--g, rgba(255, 255, 255, 0.26)), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s, box-shadow 0.15s;
}
.slot.is-press { transform: scale(0.92); }
.slot .logo { position: absolute; inset: 5px; width: auto; height: auto; border-radius: 7px; font-size: 15px; transition: filter 0.15s, opacity 0.15s; }
.slot-cd { position: absolute; inset: 1.5px; border-radius: 9.5px; opacity: 0; background: conic-gradient(from 0deg, rgba(14, 9, 20, 0) calc((1 - var(--cd)) * 360deg), rgba(14, 9, 20, 0.7) calc((1 - var(--cd)) * 360deg)); }
.slot-n { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--mono); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.9); font-variant-numeric: tabular-nums; }
.slot-key { position: absolute; left: -3px; top: -4px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); font: 500 9px/1 var(--mono); color: var(--text-2); }
.slot-g { position: absolute; right: -3px; bottom: -4px; min-width: 0; padding: 0 3px; border-radius: 4px; font-size: 8.5px; line-height: 1.45; background: var(--bg-2); display: none; }
.slot-lock, .slot-plus { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 3px; color: var(--text-3); }
.slot-lock svg { width: 13px; height: 13px; }
.slot-plus svg { width: 16px; height: 16px; }
.slot-lock em, .slot-plus em { font: 500 7.5px/1 var(--mono); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.slot-ring { position: absolute; inset: -3px; border-radius: 14px; border: 2px solid #ffffff; opacity: 0; pointer-events: none; }

.slot[data-state="tool"] .slot-g { display: block; }
.slot[data-state="empty"], .slot[data-state="locked"] { background: rgba(10, 6, 16, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.slot[data-state="empty"] { box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.26); }
.slot[data-state="empty"] .logo, .slot[data-state="locked"] .logo { display: none; }
.slot[data-state="empty"] .slot-plus, .slot[data-state="locked"] .slot-lock { display: grid; }
.slot[data-state="locked"] { cursor: default; }
.slot[data-state="locked"] .slot-key { opacity: 0.5; }
.slot.is-cd .slot-cd { opacity: 1; }
.slot.is-cd .logo { filter: saturate(0.35) brightness(0.5); }
.slot.is-off .logo { filter: saturate(0.3) brightness(0.55); }
.slot.is-active { box-shadow: inset 0 0 0 1.5px #ffffff, 0 0 0 2px rgba(72, 224, 192, 0.55), 0 0 18px rgba(72, 224, 192, 0.6); animation: glow 1.1s ease-in-out infinite; }

.dodge { width: 64px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text); }
.dodge svg { width: 20px; height: 20px; }
.dodge-k { font: 500 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.dodge.is-cd svg, .dodge.is-cd .dodge-k { opacity: 0.35; }
.dodge .slot-n { align-content: center; }

/* a narrow desk window: the row shrinks before it wraps */
#ui[data-input="desk"][data-layout="port"], #ui[data-input="desk"][data-layout="land"] { --slot: clamp(34px, calc((100vw - 110px) / 9.6), 52px); }

/* tooltip over a slot */
.tip { position: absolute; left: 0; top: 0; z-index: 6; display: none; width: 300px; padding: 12px; background: rgba(27, 21, 37, 0.96); }
.tip.on { display: block; }
.tip .ab { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.tip .rv { margin-top: 9px; }
.tip-plain { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.tip-plain b { display: block; margin-bottom: 2px; font: 600 14px/1.3 var(--display); color: var(--text); }

/* ---- Touch: two arcs of tools round a dodge button, a target button above, a stick where the thumb lands ---- */
.tgt { position: absolute; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text); right: calc(var(--sar) + 14px); bottom: calc(var(--sab) + var(--cl, 226px)); }
.tgt svg { width: 20px; height: 20px; }
.tgt.is-press { transform: scale(0.92); }
#ui[data-input="touch"] .tgt { display: grid; }
#ui[data-input="touch"] .dock, #ui[data-input="touch"] .bar { display: contents; }
#ui[data-input="touch"] .bar-sep, #ui[data-input="touch"] .slot-key, #ui[data-input="touch"] .tip { display: none; }
#ui[data-input="touch"] { --bs: 46px; --dc: 52px; --k: 1; --ds: 76px; --cl: 226px; }
#ui[data-input="touch"] .slot { position: absolute; width: var(--bs); height: var(--bs); border-radius: 50%; right: calc(var(--sar) + var(--dc) - var(--bs) / 2 + var(--x) * var(--k)); bottom: calc(var(--sab) + var(--dc) - var(--bs) / 2 + var(--y) * var(--k)); background: rgba(10, 6, 16, 0.84); }
#ui[data-input="touch"] .slot .logo { inset: 4px; border-radius: 50%; font-size: 13px; }
#ui[data-input="touch"] .slot .logo img { padding: 19%; }
#ui[data-input="touch"] .slot-cd { border-radius: 50%; }
#ui[data-input="touch"] .slot-ring { border-radius: 50%; }
#ui[data-input="touch"] .slot-n { font-size: 14px; }
#ui[data-input="touch"] .slot-g { right: 50%; bottom: -3px; transform: translateX(50%); }
#ui[data-input="touch"] .slot-lock svg { width: 11px; height: 11px; }
#ui[data-input="touch"] .slot-lock em { font-size: 7px; letter-spacing: 0; }
.slot[data-i="0"] { --x: 76px; --y: 0px; }
.slot[data-i="1"] { --x: 53.7px; --y: 53.7px; }
.slot[data-i="2"] { --x: 0px; --y: 76px; }
.slot[data-i="3"] { --x: 136px; --y: 0px; }
.slot[data-i="4"] { --x: 125.6px; --y: 52px; }
.slot[data-i="5"] { --x: 96.2px; --y: 96.2px; }
.slot[data-i="6"] { --x: 52px; --y: 125.6px; }
.slot[data-i="7"] { --x: 0px; --y: 136px; }
#ui[data-input="touch"] .dodge { width: var(--ds); height: var(--ds); right: calc(var(--sar) + var(--dc) - var(--ds) / 2); bottom: calc(var(--sab) + var(--dc) - var(--ds) / 2); box-shadow: inset 0 0 0 1.5px rgba(142, 168, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5); }
#ui[data-input="touch"] .dodge svg { width: 24px; height: 24px; }
#ui[data-input="touch"] .dodge-k { color: var(--text-2); }

#ui[data-input="touch"] .hint { position: absolute; left: 50%; bottom: calc(var(--sab) + var(--cl) + 4px); width: max-content; max-width: calc(100% - 136px); margin: 0; transform: translate(-50%, 4px); }
#ui[data-input="touch"] .hint.on { transform: translate(-50%, 0); }
#ui[data-input="touch"][data-layout="land"] .hint, #ui[data-input="touch"][data-layout="wide"] .hint { bottom: calc(var(--eb) + 88px); max-width: calc(100% - 2 * (var(--er) + var(--cl))); }
#ui[data-input="touch"] .pframe { position: absolute; left: var(--el); bottom: var(--eb); width: min(200px, calc(100% - var(--el) - var(--sar) - var(--cl))); gap: 7px 10px; padding: 7px 10px 8px; }
#ui[data-input="touch"][data-layout="land"] .pframe, #ui[data-input="touch"][data-layout="wide"] .pframe { left: 50%; width: min(380px, calc(100% - 2 * (var(--er) + var(--cl)))); transform: translateX(-50%); }
/* a short phone on its side: the frame under the hint runs to two lines, and the hint may use
   the free width to the left of the buttons instead of staying centred */
@media (max-width: 800px) {
  #ui[data-input="touch"][data-layout="land"] .hint { left: var(--el); right: calc(var(--sar) + var(--cl)); bottom: calc(var(--eb) + 80px); width: fit-content; max-width: none; margin: 0 auto; transform: translateY(4px); }
  #ui[data-input="touch"][data-layout="land"] .hint.on { transform: none; }
}
/* a tablet: larger buttons on wider arcs, for a hand that is further from the glass */
@media (min-width: 700px) and (min-height: 700px) {
  #ui[data-input="touch"] { --bs: 56px; --dc: 64px; --k: 1.2; --ds: 92px; --cl: 268px; }
  #ui[data-input="touch"] .slot .logo { font-size: 15px; }
  #ui[data-input="touch"] .tgt { width: 52px; height: 52px; right: calc(var(--sar) + 18px); }
}
/* a narrow phone: slightly smaller buttons on tighter arcs, so the player's frame keeps some width */
@media (max-width: 350px) {
  #ui[data-input="touch"] { --bs: 44px; --dc: 46px; --k: 0.92; --ds: 68px; --cl: 206px; }
  #ui[data-input="touch"] .pframe { padding: 6px 8px 7px; }
  .controls.is-touch dl { grid-template-columns: auto; }
}

.stick { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.12s; will-change: transform; }
.stick.on { opacity: 1; }
.stick-ring { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: radial-gradient(circle, rgba(27, 21, 37, 0.08) 42%, rgba(27, 21, 37, 0.5) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.stick-knob { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4); will-change: transform; }

/* ---- Swap prompt: every slot is full and a new key was picked up ---- */
#hud .swap { position: absolute; inset: 0; z-index: 8; display: none; padding: max(16px, var(--et)) max(16px, var(--er)) max(16px, var(--eb)) max(16px, var(--el)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; background: rgba(13, 8, 19, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#hud .swap.on { display: flex; animation: fadein 0.2s both; }
.swap-card { flex: none; margin: auto; width: min(640px, 100%); padding: 18px; border-radius: 14px; background: rgba(33, 26, 44, 0.97); border: 1px solid var(--line-2); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.swap-h { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; }
.swap-p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.swap-new { margin-top: 14px; padding: 11px 12px 12px; border: 1px solid rgba(72, 224, 192, 0.4); border-radius: 10px; background: rgba(72, 224, 192, 0.06); }
.swap-new .lbl { display: block; margin-bottom: 8px; color: var(--teal); }
.swap-new .ab { margin-top: 9px; }
.swap-b { margin-top: 16px; }
.swap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.swap-slot { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 52px; padding: 7px 10px 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.035); text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
#hud .swap-slot { touch-action: pan-y; }
.swap-slot:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.swap-slot .logo { width: 34px; height: 34px; }
.swap-i { width: 16px; font: 500 11px/1 var(--mono); color: var(--text-3); text-align: center; }
.swap-t { min-width: 0; }
.swap-t b, .swap-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* giving a tool up: the bar under three headings, what each tool does written out, one of them replaceable */
.swap-group { display: grid; gap: 6px; align-content: start; }
.swap-group .lbl { color: var(--teal); }
.swap-t .swap-d { white-space: normal; overflow: visible; }
.swap-slot.is-kept { cursor: default; opacity: 0.72; background: none; }
.swap-slot.is-kept:hover { background: none; border-color: var(--line); }
.swap-slot.is-take { border-color: rgba(72, 224, 192, 0.7); background: rgba(72, 224, 192, 0.08); }
.swap-go { padding: 5px 9px; border-radius: 7px; background: var(--teal); color: #0d0813; font: 600 11.5px/1 var(--display); }
.swap-t b { font: 600 13px/1.3 var(--display); }
.swap-t span { font-size: 11.5px; line-height: 1.3; color: var(--text-3); }
.swap-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.swap-keys { font-size: 12px; color: var(--text-3); }
#ui[data-input="touch"] .swap-keys { display: none; }
#ui[data-input="touch"] .swap-foot .btn { flex: 1 1 auto; }
.swap-foot .btn { height: 44px; }
#hud .swap-foot .btn { touch-action: pan-y; }
#ui[data-layout="port"] .swap-card { padding: 16px 14px; }
#ui[data-layout="port"] .swap-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
#ui[data-layout="port"] .swap-slot { min-height: 46px; padding: 5px 10px 5px 8px; }
#ui[data-layout="port"] .swap-slot .logo { width: 32px; height: 32px; }
#ui[data-layout="land"] .swap-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); grid-template-areas: "a b" "f b"; gap: 10px 16px; width: min(780px, 100%); padding: 14px; align-items: start; }
#ui[data-layout="land"] .swap-a { grid-area: a; }
#ui[data-layout="land"] .swap-b { grid-area: b; margin-top: 0; }
#ui[data-layout="land"] .swap-foot { grid-area: f; margin-top: 0; align-self: end; }
#ui[data-layout="land"] .swap-keys { display: none; }
#ui[data-layout="land"] .swap-foot .btn { width: 100%; height: 40px; }
#ui[data-layout="land"] .swap-h { font-size: 17px; }
#ui[data-layout="land"] .swap-new { margin-top: 10px; padding: 9px 10px 10px; }
#ui[data-layout="land"] .swap-grid { gap: 6px; }
#ui[data-layout="land"] .swap-slot { min-height: 44px; padding: 5px 8px 5px 6px; gap: 7px; }
#ui[data-layout="land"] .swap-slot .logo { width: 30px; height: 30px; }

/* ---- Pause ---- */
.scr-pause { z-index: 20; padding: max(16px, var(--et)) max(16px, var(--er)) max(16px, var(--eb)) max(16px, var(--el)); background: rgba(13, 8, 19, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#ui[data-screen="play"].is-paused .scr-pause { display: flex; animation: fadein 0.18s both; }
.pause-card { flex: none; margin: auto; width: min(400px, 100%); padding: 22px; border-radius: 14px; background: rgba(33, 26, 44, 0.97); border: 1px solid var(--line-2); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.pause-h { font: 700 30px/1.1 var(--display); letter-spacing: -0.03em; }
.pause-btns { display: grid; gap: 8px; margin-top: 16px; }
.pause-btns .btn { width: 100%; }
.pause-b { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pause-b .controls dl { grid-template-columns: auto minmax(0, 1fr); }
.pause-b .controls dl > div { white-space: normal; }
.pause-b .controls dt { flex: none; }
.btn-sw { justify-content: space-between; padding: 0 16px 0 22px; }
.sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); transition: background 0.15s; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform 0.15s, background 0.15s; }
[aria-checked="true"] .sw { background: var(--teal); }
[aria-checked="true"] .sw::after { transform: translateX(14px); background: var(--on-accent); }
.pause-tools { display: none; gap: 7px; margin-top: 16px; }
.pause-tools.on { display: grid; }
.pause-tools .lbl { margin-bottom: 1px; }
.ptool { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.ptool .logo { width: 26px; height: 26px; border-radius: 6px; font-size: 10px; }
.ptool-t { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.ptool-t b { margin-right: 6px; font-weight: 600; color: var(--text); }
.pause-q { margin-top: 14px; font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--text-3); }
.pause-q:empty { display: none; }
#ui[data-layout="land"] .pause-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 24px; width: min(640px, 100%); padding: 18px 20px; align-items: start; }
#ui[data-layout="land"] .pause-b { margin-top: 0; padding-top: 2px; border-top: 0; padding-left: 24px; border-left: 1px solid var(--line); align-self: stretch; }
#ui[data-layout="land"] .pause-btns .btn { height: 42px; }
#ui[data-layout="land"] .pause-btns { margin-top: 12px; }

/* ---- Dead ---- */
.scr-dead { padding: max(24px, var(--et)) max(24px, var(--er)) max(24px, var(--eb)) max(24px, var(--el)); text-align: center; background: radial-gradient(ellipse at 50% 42%, rgba(70, 16, 20, 0.6) 0%, rgba(17, 10, 22, 0.93) 68%); }
.dead-in { flex: none; margin: auto; width: min(560px, 100%); }
.dead-in::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto 22px; background: var(--danger); }
.dead-line { font: 700 clamp(30px, 6.2vw, 58px)/1.05 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.dead-tip { max-width: 44ch; margin: 16px auto 0; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dead-in .btn { min-width: 180px; margin-top: 28px; }
#ui[data-screen="dead"] .dead-in > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#ui[data-screen="dead"] .dead-tip { animation-delay: 0.1s; }
#ui[data-screen="dead"] .dead-in .btn { animation-delay: 0.2s; }
#ui[data-layout="land"] .dead-line { font-size: clamp(28px, 5vw, 40px); }
#ui[data-layout="land"] .dead-in::before { margin-bottom: 14px; }
#ui[data-layout="land"] .dead-in .btn { margin-top: 18px; }

/* ---- Win ---- */
.scr-win { background: linear-gradient(180deg, rgba(27, 21, 37, 0.93), rgba(23, 17, 32, 0.97)); }
.win-wrap { min-height: 100%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 460px); align-content: center; justify-content: center; align-items: start; gap: 24px 64px; padding: max(28px, var(--et)) max(24px, var(--er)) max(28px, var(--eb)) max(24px, var(--el)); }
.win-grade { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.g-big { min-width: 1.9em; padding: 10px 16px 12px; border-width: 2px; border-radius: 16px; font: 600 68px/1 var(--mono); letter-spacing: -0.04em; }
.win-label { font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.win-score { margin-top: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.win-score:empty { display: none; }
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 18px; margin-top: 26px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.stats dd { font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.win-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.win-btns .btn { flex: 1 1 150px; }
.win-h { font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; }
.stack { display: grid; gap: 6px; margin-top: 12px; }
.stack a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); text-decoration: none; transition: background 0.12s, border-color 0.12s; }
#ui .stack a { touch-action: pan-y; }
.stack a:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); }
.stack .logo { width: 32px; height: 32px; border-radius: 7px; }
.stack .th-name { font-size: 13.5px; }
.stack-empty { font-size: 13px; color: var(--text-3); }
.stack.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack.is-long .sc { display: none; }
#ui[data-screen="win"] .win-a > *, #ui[data-screen="win"] .win-b { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#ui[data-screen="win"] .win-grade { animation-delay: 0.08s; }
#ui[data-screen="win"] .stats { animation-delay: 0.16s; }
#ui[data-screen="win"] .win-btns { animation-delay: 0.24s; }
#ui[data-screen="win"] .win-b { animation-delay: 0.2s; }
#ui[data-layout="port"] .win-wrap { grid-template-columns: minmax(0, 480px); align-content: start; gap: 26px; padding-left: max(20px, var(--el)); padding-right: max(20px, var(--er)); }
#ui[data-layout="port"] .g-big { font-size: 56px; }
#ui[data-layout="port"] .win-label { font-size: 21px; }
#ui[data-layout="port"] .stats { margin-top: 20px; }
#ui[data-layout="port"] .stats dd { font-size: 19px; }
#ui[data-layout="port"] .win-btns { margin-top: 18px; }
#ui[data-layout="port"] .stack.is-long { grid-template-columns: minmax(0, 1fr); }
#ui[data-layout="port"] .stack.is-long .sc { display: block; }
#ui[data-layout="land"] .win-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 32px; padding-top: max(14px, var(--et)); padding-bottom: max(14px, var(--eb)); }
#ui[data-layout="land"] .win-grade { margin-top: 10px; gap: 14px; }
#ui[data-layout="land"] .g-big { padding: 6px 12px 8px; border-radius: 12px; font-size: 44px; }
#ui[data-layout="land"] .win-label { font-size: 19px; }
#ui[data-layout="land"] .stats { margin-top: 14px; padding: 10px 0; }
#ui[data-layout="land"] .stats dd { font-size: 18px; }
#ui[data-layout="land"] .win-btns { margin-top: 14px; }
#ui[data-layout="land"] .win-btns .btn { height: 42px; }
#ui[data-layout="land"] .stack { gap: 5px; margin-top: 8px; }
#ui[data-layout="land"] .stack a { padding: 4px 10px 4px 6px; }
#ui[data-layout="land"] .stack .logo { width: 26px; height: 26px; }

/* ---- Motion ---- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settle { from { opacity: 0; letter-spacing: 0.34em; } to { opacity: 1; letter-spacing: 0.16em; } }
@keyframes glow { 0%, 100% { box-shadow: inset 0 0 0 1.5px #ffffff, 0 0 0 2px rgba(72, 224, 192, 0.55), 0 0 18px rgba(72, 224, 192, 0.6); } 50% { box-shadow: inset 0 0 0 1.5px #ffffff, 0 0 0 2px rgba(72, 224, 192, 0.3), 0 0 8px rgba(72, 224, 192, 0.3); } }
@keyframes low { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes nudge { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  #ui[data-screen="title"] .title-top, #ui[data-screen="title"] .title-main > *, #ui[data-screen="title"] .title-side > *, #ui[data-screen="title"] .title-night, #ui[data-screen="title"] .title-info, #ui[data-screen="title"] .fine,
  #ui[data-screen="dead"] .dead-in > *, #ui[data-screen="win"] .win-a > *, #ui[data-screen="win"] .win-b,
  .intro.on > *, .intro.on > .intro-rule, .banner.on .banner-t, .say.on, .loot.on { animation: none; }
  .slot.is-active, #hud.is-low .fx-low, .cast.int .cast-int { animation: none; }
  .hp-lag { transition: none; }
  .btn, .slot { transition: none; }
}

/* the middle of the view, shown while the mouse is captured: a click picks what sits under it */
.aim { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(244, 243, 247, 0.85); box-shadow: 0 0 0 1px rgba(10, 6, 16, 0.65), 0 0 10px rgba(10, 6, 16, 0.5); opacity: 0; transition: opacity 0.2s; }
#hud.is-locked .aim { opacity: 0.85; }
#hud.is-locked .play { cursor: none; }

/* ---- Level, flask, and the level-up choice ---- */
.lv { display: flex; align-items: baseline; gap: 6px; }
.lv b { font: 700 15px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .lv .lbl { display: none; } .lv b::before { content: "Lv "; font: 500 10px/1 var(--mono); color: var(--text-3); letter-spacing: 0.08em; } }
.flask { position: relative; width: 56px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text); }
.flask svg { width: 20px; height: 20px; color: var(--teal); }
.flask-n { position: absolute; right: 5px; top: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: rgba(72, 224, 192, 0.18); border: 1px solid rgba(72, 224, 192, 0.5); font: 600 10px/13px var(--mono); color: var(--text); text-align: center; }
.flask.is-empty svg, .flask.is-empty .dodge-k { opacity: 0.3; }
.flask.is-empty .flask-n { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--text-3); }
.flask.is-cd svg { opacity: 0.45; }
#ui[data-input="touch"] .flask { width: 48px; height: 48px; right: calc(var(--sar) + 68px); bottom: calc(var(--sab) + var(--cl, 226px) - 2px); background: rgba(10, 6, 16, 0.84); }
#ui[data-input="touch"] .flask .dodge-k { display: none; }
#ui[data-input="touch"] .flask-n { right: -2px; top: -2px; }
.lvup-card { width: min(720px, 100%); }
.lvup-k { color: var(--teal); }
.lvup-h { margin-top: 4px; font-size: 30px; }
.lvup-gains { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 14px; padding: 0; list-style: none; }
.lvup-gains li { padding: 5px 9px; border: 1px solid rgba(72, 224, 192, 0.35); border-radius: 999px; background: rgba(72, 224, 192, 0.07); font: 500 12px/1.2 var(--mono); color: var(--text); }
.lvup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lvup-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; min-height: 108px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.035); text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.08s; }
#hud .lvup-opt { touch-action: pan-y; }
.lvup-opt:hover, .lvup-opt:focus-visible { background: rgba(72, 224, 192, 0.08); border-color: rgba(72, 224, 192, 0.6); }
.lvup-opt:active { transform: scale(0.985); }
.lvup-t b { display: block; font: 600 15px/1.25 var(--display); color: var(--text); }
.lvup-t span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.lvup-t em { display: block; margin-top: 6px; font: 500 10px/1.3 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
#ui[data-layout="port"] .lvup-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#ui[data-layout="port"] .lvup-opt { min-height: 0; padding: 10px 12px; }

/* ---- Breadcrumb on the title screen: the brand, then where you are ---- */
.crumbs ol { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--text-3); font: 500 12px/1 var(--mono); }
.crumbs [aria-current] { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* a line said in a city's own language, with the English under it */
.say-sub { display: none; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.say.has-sub .say-sub { display: block; }
.say.has-sub .say-text { font-style: italic; }
.lvup-tag { display: block; margin-bottom: 5px; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
/* the level-up card keeps one column on a wide, short screen: the swap card's two-column grid is not for it */
#ui[data-layout="land"] .lvup-card { display: block; width: min(760px, 100%); padding: 14px 16px; }
#ui[data-layout="land"] .lvup-h { font-size: 24px; }
#ui[data-layout="land"] .lvup-gains { margin: 8px 0 10px; }
#ui[data-layout="land"] .lvup-opt { min-height: 0; padding: 10px; }

/* ---- Difficulty on the title screen, and its mark on the health frame ---- */
.mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mode-b { display: grid; align-content: start; gap: 3px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); text-align: left; cursor: pointer; color: var(--text-2); transition: background 0.12s, border-color 0.12s, color 0.12s; }
.mode-b b { font: 600 13.5px/1.2 var(--display); color: var(--text); }
.mode-b span { font: 400 11px/1.2 var(--mono); color: var(--text-3); }
.mode-b:hover { background: rgba(255, 255, 255, 0.07); }
.mode-b[aria-checked="true"] { border-color: rgba(72, 224, 192, 0.7); background: rgba(72, 224, 192, 0.08); }
.mode-b[data-mode="hardcore"][aria-checked="true"] { border-color: rgba(248, 113, 113, 0.75); background: rgba(248, 113, 113, 0.09); }
.mode-b[data-mode="hardcore"][aria-checked="true"] span { color: #f87171; }
/* Where a run begins, and the run kept from last time. */
.from { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.from .lbl { margin-right: 6px; }
.from-b { height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text-2); font: 600 12.5px/1 var(--display); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.from-b:hover { background: rgba(255, 255, 255, 0.07); }
.from-b[aria-checked="true"] { border-color: rgba(72, 224, 192, 0.7); background: rgba(72, 224, 192, 0.08); color: var(--text); }
.from-b[hidden] { display: none; }
.from-go { margin-left: auto; border-color: rgba(142, 168, 255, 0.55); color: var(--text); }
.from-note { font: 400 11px/1.2 var(--mono); color: var(--text-3); }
.from-note[hidden] { display: none; }
.hc-tag { display: none; margin-left: 10px; font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #f87171; }
.pframe.is-hardcore .hc-tag { display: inline; }
.pframe.is-hardcore .hp-fill { background: linear-gradient(90deg, #f87171, #fb923c); }

/* What is still hurting the agent: a chip a name, with its stacks and the seconds left. */
.ail { display: inline-flex; gap: 5px; margin-left: 10px; vertical-align: middle; }
.ail-chip { padding: 2px 6px 2px; border-radius: 9px; border: 1px solid rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.14); font: 600 10px/1.2 var(--mono); letter-spacing: 0.04em; color: #fcd34d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ail:empty { display: none; }

/* On a phone the frame is narrow: the chips sit above it, not in its row, where they pushed the
   health number out under the tool buttons. The hint clears the flask in portrait. */
#ui[data-input="touch"] .ail { position: absolute; left: 0; bottom: 100%; margin: 0 0 6px; flex-wrap: wrap; max-width: 100%; }
#ui[data-input="touch"][data-layout="port"] .hint, #ui[data-input="touch"]:not([data-layout="land"]):not([data-layout="wide"]) .hint { bottom: calc(var(--sab) + var(--cl) + 58px); }

/* The closing line on the win screen: what the three jobs added up to. */
.win-line { margin: 2px 0 14px; max-width: 46ch; font: 500 15px/1.45 var(--font); color: var(--text-2); }
.swap-b[hidden] { display: none; }