/* Maple Grind: a night in Kerning City. Every screen is a real place in town, shown by its own map art and the NPC
   who works there (img/kerning, img/sprites): the main street under the skyline (now), the subway ticketing booth
   (spots: where to go), the Thieves' Hideout (your training: the old jobs), Naora Hospital (settings). There is the
   game's own status bar along the bottom (level, HP, MP, EXP, and the menu in the game's orange buttons), and the
   whole window is the town at night; the brand is the station's amber LED board. Panels are the game's own
   windows: steel, square-cornered, a title bar, a bevelled edge; buttons are the game's buttons, the main action in the
   subway sign's blue. Colour comes from the places (concrete, pipe steel, brick, the LED amber, the sign blue), not
   from a palette laid over them. Numbers behave like the game's damage numbers (lamp gold, thick dark outline).
   App, not page: every screen fits the window. Rubik (self-hosted) for text and numbers, Secular One ("Sign",
   self-hosted) for the signs. Spacing on a 4 px scale. */

@font-face { font-family: Rubik; src: url(fonts/rubik-latin.woff2) format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Rubik; src: url(fonts/rubik-hebrew.woff2) format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Sign; src: url(fonts/secular-one-latin.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: Sign; src: url(fonts/secular-one-hebrew.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  color-scheme: dark;
  --bg: #141619;         /* the street at night: wet concrete */
  --rail: rgba(10, 11, 14, 0.84);
  --panel: rgba(28, 31, 35, 0.94); /* the game's window steel, over the town */
  --panel-top: #262a2f;  /* a window's title bar */
  --raise: #2b3035;
  --line: #31363c;
  --line-2: #4a5158;
  --edge: #0a0b0d;       /* the dark outline every game window has */
  --text: #eef0f2;
  --muted: #b7bdc3;
  --faint: #8d949b;
  --gold: #ffc94a;       /* street lamps: the one number that matters */
  --gold-ink: #2a1800;
  --led: #ffcc33;        /* the station's LED boards */
  --aqua: #5be38a;       /* the turnstiles' green arrow: what just came in */
  --aqua-ink: #00301a;
  --blue: #2f68dc;       /* the subway sign: the main action, the line */
  --blue-hi: #4a86f2;
  --blue-lo: #1a3f94;
  --plaster: #e7e1d3;    /* pasted notices */
  --paper-ink: #2a2230;
  --tag: #ffd23a;        /* the game's name tags */
  --good: #7ee08f;
  --warn: #ffcf4a;
  --bad: #ff7b6b;
  --r: 4px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --font: Rubik, "Segoe UI", system-ui, sans-serif;
  --sign: Sign, Rubik, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --side-w: 300px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* (else a component's own display would show what's meant to be hidden) */
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 400 15px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  caret-color: var(--gold);
}
::selection { background: var(--gold); color: var(--gold-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); border-radius: 2px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
p { margin: 0; }
h2, h3 { margin: 0; }
b { font-weight: 700; }
a { color: var(--blue-hi); text-underline-offset: 3px; }
img[src$=".gif"], img[src$=".png"] { image-rendering: pixelated; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the game's name tag: a yellow plate under every figure */
.nametag {
  display: inline-block; background: var(--tag); color: #2a2000; font-size: 11px; font-weight: 700;
  line-height: 1; padding: 3px 6px 2px; border-radius: 3px; white-space: nowrap; direction: ltr;
}

/* ── the shell: rail | work | side, the whole window, no page scroll ── */
/* one window: the top bar across, the board and the side column, the game's bar along the bottom */
.app { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
/* the town behind everything: the night sky, Kerning's real skyline along the bottom of the window */
.world { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#0a0b12, #17172a 55%, #2a2436); }
.world::after {
  content: ''; position: absolute; inset: auto 0 0; height: 78%;
  background: url(img/kerning/skyline.webp) center bottom / auto 100% repeat-x; opacity: 0.55; filter: saturate(0.9) brightness(0.85);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent);
  animation: town-pan 120s linear infinite alternate;
}

/* the brand: the station's amber LED board */
.led {
  display: block; padding: 6px var(--s3); background: #0b0b08; border: 2px solid #3a3a34; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, 0 2px 0 #000;
  font: 800 15px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; direction: ltr; text-align: center; white-space: nowrap;
  color: var(--led); text-shadow: 0 0 6px rgba(255, 204, 51, 0.55);
  /* the board's dots */
  -webkit-mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.55) 64%); -webkit-mask-size: 3px 3px;
  mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.55) 64%); mask-size: 3px 3px;
}

/* the bar along the bottom, quiet and dark: the screens (a gold line over the one you're on), then HP, MP and EXP as
   slim gauges with their numbers above them, then the level */
.hud {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s5); height: 58px; z-index: 2;
  background: #0c0d10; border-top: 1px solid #23272c; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.tabs { display: flex; gap: var(--s2); flex: none; align-self: stretch; }
.tabs button {
  position: relative; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); cursor: pointer;
  font: 600 15px/1 var(--font); color: #9aa1a8; background: none; border: 0; white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.tabs button .ic { width: 18px; height: 18px; }
.tabs button::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: #fff; }
.tabs button[aria-selected="true"] .ic { color: var(--gold); }
.tabs button[aria-selected="true"]::before { transform: scaleX(1); }
.tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.hud-gauges { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: var(--s5); direction: ltr; }
.gauge { display: grid; gap: 5px; min-width: 0; }
.g-head { display: flex; justify-content: space-between; gap: var(--s2); font: 700 11px/1 var(--font); color: #9aa1a8; white-space: nowrap; }
.g-head b { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.g-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: #1c1f24; overflow: hidden; }
.g-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; transition: width 0.6s var(--ease); }
.hp .g-bar i { background: linear-gradient(90deg, #e2382d, #ff8b7e); }
.mp .g-bar i { background: linear-gradient(90deg, #2f74d8, #8cc6ff); }
.xp .g-bar i { background: linear-gradient(90deg, #e6be14, #fff08a); }
.hud-lv { display: flex; align-items: baseline; gap: 4px; direction: ltr; flex: none; }
.hud-lv span { font: 700 11px/1 var(--font); color: #9aa1a8; }
.hud-lv b { font: 900 26px/1 var(--font); color: var(--gold); min-width: 2ch; }
.lang { flex: none; }



/* the top bar: a steel bar across the whole window */
.top {
  grid-column: 1 / -1; z-index: 3;
  display: flex; align-items: center; gap: var(--s3) var(--s4); padding: var(--s2) var(--s5); min-height: 58px; flex-wrap: wrap;
  background: linear-gradient(var(--panel-top), var(--panel)); border-bottom: 1px solid var(--edge); box-shadow: inset 0 -1px 0 var(--line);
  font-size: 14px; color: var(--muted);
}
.top b { color: var(--text); font-weight: 600; }
/* where you are: the map's name, big, so it can't be missed */
.where { display: inline-flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.where .ic { color: var(--gold); align-self: center; }
.where b { font: 400 24px/1.1 var(--sign); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.where small { font-size: 13px; color: var(--faint); white-space: nowrap; }
.state { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 600; }
.fact { display: inline-flex; align-items: center; gap: 6px; }
.fact .ic { color: var(--faint); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.tracking { background: var(--aqua); box-shadow: 0 0 0 4px rgba(91, 227, 138, 0.18); animation: breathe 2.4s ease-in-out infinite; }
.dot.paused, .dot.held, .dot.ready, .dot.unreadable, .dot.waiting { background: var(--warn); }
.dot.nogame { background: var(--bad); }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(91, 227, 138, 0.05); } }
.timer { display: inline-flex; align-items: baseline; gap: var(--s2); }
.timer-k { font-size: 12px; color: var(--faint); }
.timer b { font: 800 22px/1 var(--font); direction: ltr; letter-spacing: 0.01em; color: var(--led); padding: 5px var(--s2); background: #0b0b08; border: 1px solid #3a3a34; border-radius: 3px; }

/* ── the game's buttons: square-cornered steel with a bevel; the main action in the subway sign's blue ── */
.btn {
  font: 700 14px/1.2 var(--font); color: var(--text); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s2); padding: 8px var(--s4);
  background: linear-gradient(#41474e, #2c3136); border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transition: filter 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.btn.primary { background: linear-gradient(var(--blue-hi), var(--blue) 55%, var(--blue-lo)); border-color: #0d2563; }
.btn.bar-btn.on { box-shadow: inset 0 0 0 1px var(--aqua), 0 1px 2px rgba(0, 0, 0, 0.5); color: var(--aqua); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); text-shadow: none; }
.btn.ghost:hover { color: var(--text); background: var(--raise); filter: none; }
.btn.small { padding: 5px var(--s3); font-size: 13px; }
.btn.danger:hover { color: var(--bad); }
.btn.link { background: none; border: 0; box-shadow: none; padding: 0 var(--s1); color: var(--faint); font-size: 14px; font-weight: 500; text-shadow: none; }
.btn.link:hover { color: var(--bad); background: none; filter: none; }

/* fields: sunk into the steel */
input, select {
  font: inherit; font-size: 14px; color: var(--text); background: #0d0f11; border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05); padding: 7px var(--s3); min-width: 0;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: none; border-color: var(--gold); }
/* the game's square checkbox */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; padding: 0; margin: 0; cursor: pointer;
  background: #0d0f11; border: 1px solid var(--line-2); border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
input[type="checkbox"]:checked {
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: #0d2563;
}
input[type="radio"] { accent-color: var(--blue); }
.check { display: inline-flex; gap: var(--s2); align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row > input { flex: 1 1 200px; }
.controls { margin-block: var(--s3); gap: var(--s3); }

/* a choice of two: the game window's joined tabs */
.seg { position: relative; display: inline-flex; border: 1px solid var(--edge); border-radius: 3px; background: #0d0f11; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.seg label { cursor: pointer; }
.seg label + label { border-inline-start: 1px solid var(--edge); }
/* (the hidden radio sits inside the switch: placed by .app, as it was, it hung far below the board and stretched the
   whole page, so the page scrolled on past the end of the board) */
.seg input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg > label > span { display: flex; gap: 6px; align-items: center; padding: 6px var(--s3); font-size: 14px; font-weight: 600; color: var(--faint); transition: color 0.2s var(--ease); }
.seg > label:hover > span { color: var(--text); }
.seg input:checked + span { color: #fff; background: linear-gradient(#41474e, #2c3136); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 var(--gold); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); }

.note { margin: var(--s3) var(--s5) 0; padding: var(--s2) var(--s4); border-radius: 3px; background: rgba(255, 207, 74, 0.08); border: 1px solid rgba(255, 207, 74, 0.3); color: #ffe39a; font-size: 14px; }
.fine { color: var(--muted); font-size: 13px; max-width: 72ch; text-wrap: pretty; }
.toast { display: none; } /* (the guide's bubble says it) */

/* ── the screens: one at a time, each fills the work area ── */
.screens { flex: 1; min-height: 0; position: relative; }
.panel { position: absolute; inset: 0; padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); min-height: 0; overflow: auto; }
.panel.enter { animation: screen-in 0.42s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); filter: blur(6px); } }
[dir="rtl"] .panel.enter { --dir: -1; }
.panel-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.panel-head h2 { font: 400 26px/1.1 var(--sign); margin-inline-end: auto; }

/* the game's window: steel, a title bar, a dark outline and a bevelled edge */
.block, .card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); min-width: 0; padding: 0 var(--s4) var(--s4);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.block > h2, .card > h2, .advanced > summary {
  display: flex; align-items: center; gap: var(--s2); margin: 0 calc(-1 * var(--s4)) var(--s3); padding: 9px var(--s4);
  font: 400 17px/1.2 var(--sign); color: #fff; background: linear-gradient(var(--panel-top), #202428);
  border-bottom: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 var(--line);
  border-radius: var(--r) var(--r) 0 0;
}
.block > h2 .ic { color: var(--led); }

/* a place: its map art across the top of the screen, its NPC on the floor */
.scene {
  position: relative; flex: none; height: clamp(120px, 20vh, 180px); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
  background: #000 center bottom / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.scene[data-scene="subway"] { background-image: url(img/kerning/scene-subway.png); background-position: 30% 72%; }
.scene[data-scene="hideout"] { background-image: url(img/kerning/scene-hideout.png); background-position: 40% 100%; }
.scene[data-scene="hospital"] { background-image: url(img/kerning/scene-hospital.png); background-position: 50% 100%; }
.scene figure { position: absolute; bottom: 4px; inset-inline-end: 14%; margin: 0; display: grid; justify-items: center; gap: 3px; }
.scene img { zoom: 1.4; }
.settings > .scene { grid-column: 1 / -1; }

/* ── session: the street, the strip, the inner tabs ── */
.session { overflow: hidden; }
.stage {
  container-type: size;
  position: relative; flex: 1 1 auto; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 96px; border-radius: var(--r); overflow: hidden; isolation: isolate;
}
/* the street behind the number: Kerning's real skyline, dimmed into the night and faded out towards the top */
.town {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/kerning/skyline.webp) center bottom / auto 100% repeat-x;
  opacity: 0.5; filter: saturate(0.85) brightness(0.8);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%); mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  animation: town-pan 90s linear infinite alternate;
}
@keyframes town-pan { from { background-position-x: 0; } to { background-position-x: -600px; } }
/* the pavement: Kerning's bricks under the monsters' feet */
.stage::after {
  content: ''; position: absolute; inset: auto 0 0; height: 34px; z-index: -1; border-top: 3px solid #7a6150;
  background: linear-gradient(rgba(12, 8, 14, 0.35), rgba(12, 8, 14, 0.65)), url(img/kerning/brick.png) 0 0 / auto 68px repeat-x;
}
.stage-k { display: flex; align-items: center; gap: var(--s2); font-size: 15px; font-weight: 600; color: var(--muted); }
.stage-k .ic { color: var(--gold); }
.stage-sub { position: relative; z-index: 2; font-size: 14px; font-weight: 600; color: var(--aqua); background: rgba(8, 8, 10, 0.8); padding: 3px var(--s3); border-radius: 3px; }
.stage-sub:empty { visibility: hidden; }
.idle .stage-sub { color: var(--muted); }

/* the damage number: the game's combat numbers, lamp gold with a thick dark outline */
.dmg {
  position: relative; z-index: 2; font-size: clamp(40px, min(8.4vw, 100cqh - 96px), 128px); font-weight: 900; line-height: 1; letter-spacing: -0.01em;
  color: var(--gold); -webkit-text-stroke: 0.075em var(--gold-ink); paint-order: stroke fill;
  text-shadow: 0 0.045em 0 var(--gold-ink), 0 0.12em 0.18em rgba(0, 0, 0, 0.45);
  direction: ltr; margin: var(--s1) 0 var(--s2); white-space: nowrap;
}
.idle .dmg { color: var(--faint); -webkit-text-stroke: 0; text-shadow: none; }
.pop { animation: pop 0.5s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 22% { transform: scale(1.09) translateY(-4px); } 100% { transform: scale(1); } }

/* the monsters stand on the pavement, their name tags over the bricks, as in the game */
.stage-floor { position: absolute; inset-inline: 10%; bottom: 12px; display: flex; justify-content: space-around; align-items: flex-end; }
.stage-floor figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.stage-floor img { height: 46px; width: auto; }
/* gains float up from the floor like the game's damage numbers */
.floats { position: absolute; inset: auto 0 70px; height: 0; z-index: 1; pointer-events: none; }
.float {
  position: absolute; bottom: 0; translate: -50% 0; font-size: 22px; font-weight: 900; color: var(--aqua); white-space: nowrap; direction: ltr;
  -webkit-text-stroke: 0.08em var(--aqua-ink); paint-order: stroke fill; animation: float-up 1.6s var(--ease) forwards;
}
.float.lv { color: var(--gold); -webkit-text-stroke-color: var(--gold-ink); font-size: 28px; }
.float.death { color: var(--bad); -webkit-text-stroke-color: #3a0a06; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(10px) scale(0.7); } 15% { opacity: 1; transform: translateY(-6px) scale(1.12); } 100% { opacity: 0; transform: translateY(-58px) scale(1); } }

/* the strip: four readouts in one steel bar, ruled between, not four cards */
.strip {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); flex: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.ro { min-width: 0; padding: var(--s3) var(--s4); }
.ro + .ro { border-inline-start: 1px solid var(--line); }
.ro .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.ro .k .ic { color: var(--faint); }
.ro .v { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin-top: 2px; direction: ltr; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .ro .v { text-align: right; }
.ro .sub { font-size: 12px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
[dir="rtl"] .ro .sub { text-align: right; }
.idle .ro .v { color: var(--faint); }
/* the level: the game's EXP gauge */
.lvbar { height: 8px; margin-top: 6px; background: #0d0f11; border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; direction: ltr; }
.lvbar i { display: block; height: 100%; width: 0; background: linear-gradient(#c8ff9a, var(--aqua) 50%, #2f9a58); transition: width 0.8s var(--ease); }
.notcounted { flex: none; }

/* the inner views: a window whose title bar is its tabs */
.inner {
  flex: 0 0 auto; height: clamp(230px, 35vh, 330px); display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.inner-tabs { display: flex; flex: none; background: linear-gradient(var(--panel-top), #202428); border-bottom: 1px solid var(--edge); border-radius: var(--r) var(--r) 0 0; }
.inner-tabs button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--faint); background: none; border: 0; border-inline-end: 1px solid var(--edge); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 9px var(--s4); transition: color 0.2s var(--ease);
}
.inner-tabs button:hover { color: var(--text); }
.inner-tabs button[aria-selected="true"] { color: #fff; background: var(--panel); box-shadow: inset 0 -2px 0 var(--gold); }
.inner-tabs button[aria-selected="true"] .ic { color: var(--gold); }
.inner-panel { flex: 1; min-height: 0; overflow: auto; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.inner-panel.enter { animation: inner-in 0.3s var(--ease) both; }
@keyframes inner-in { from { opacity: 0; transform: translateY(8px); } }
.chart { width: 100%; flex: 1; min-height: 90px; display: block; }
.loot-total { font-size: 13px; font-weight: 800; color: var(--gold); direction: ltr; }
.meso-line { font-size: 14px; }

/* tables: the game's list windows */
.table-wrap { overflow: auto; min-height: 0; }
.table-wrap.fill { flex: 1 1 auto; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { position: sticky; top: 0; z-index: 1; background: linear-gradient(var(--panel-top), #202428); color: var(--muted); font-weight: 600; font-size: 12px; text-align: start; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--edge); white-space: nowrap; }
.table td { padding: 10px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.table td.n, .table th.n { direction: ltr; text-align: end; white-space: nowrap; font-weight: 600; }
[dir="rtl"] .table td.n, [dir="rtl"] .table th.n { text-align: left; }
.table .sub { display: block; color: var(--faint); font-size: 12px; font-weight: 400; }
#compare td:first-child { min-width: 150px; }
#history td:nth-child(3) { min-width: 120px; }
.table tr.best td { background: rgba(255, 201, 74, 0.07); }
.table tr.best td.n { color: var(--gold); }
.table tr.best td:first-child { font-weight: 800; }
.table td.empty { color: var(--faint); padding-block: var(--s6); text-align: center; }
.table input[type="checkbox"] { width: 16px; height: 16px; }
.table tr.picked td { background: rgba(47, 104, 220, 0.12); }
.table tr.live td:nth-child(2) { color: var(--aqua); font-weight: 700; }

/* your training: the list, and the picked ones side by side beside it */
.runs-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: var(--s4); }
.runs-split > .table-wrap { min-height: 0; }
.runs-side {
  align-self: start; max-height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s4) var(--s4);
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0 calc(-1 * var(--s4)); padding: 6px var(--s4); background: linear-gradient(var(--panel-top), #202428); border-bottom: 1px solid var(--edge); border-radius: var(--r) var(--r) 0 0; }
.side-head h3 { font: 400 17px/1.2 var(--sign); }
.runs-cmp th, .runs-cmp td { text-align: center; }
.runs-cmp th:first-child, .runs-cmp td:first-child { text-align: start; color: var(--muted); font-weight: 500; white-space: nowrap; }
.runs-cmp th { color: var(--text); font-size: 13px; font-weight: 800; background: none; position: static; }
.runs-cmp th .sub { font-weight: 400; }
.runs-cmp td.win { color: var(--gold); font-weight: 800; }

/* loot */
.loot .icon { width: 36px; height: 36px; image-rendering: pixelated; display: block; border-radius: 2px; background: #d9e0e6; }
.loot input { width: 100%; min-width: 120px; padding: 5px var(--s2); }
.loot input.price { min-width: 90px; direction: ltr; text-align: end; }
.loot tr.total td { font-weight: 800; }

/* settings: two columns that fit the window */
.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: var(--s4); }
.set-col { display: grid; gap: var(--s4); min-width: 0; }
/* what the overlay shows: a checklist in columns, not a cloud of pills */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: var(--s3); border: 1px solid var(--edge); border-radius: 3px; background: #15181b; }
.chips label { display: flex; align-items: center; gap: var(--s2); padding: 8px var(--s3); font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--line); }
.chips label:hover { background: rgba(255, 255, 255, 0.03); color: var(--text); }
.chips label:has(input:checked) { color: var(--text); }
.chips label .ic { color: var(--faint); }
.chips label:has(input:checked) .ic { color: var(--led); }
.safe { display: flex; gap: var(--s3); align-items: flex-start; color: var(--faint); font-size: 13px; }
.safe .ic { color: var(--good); margin-top: 2px; }
.safe b { color: var(--muted); }

/* plugin panels (notifications / smart alerts) */
.card .muted { color: var(--muted); font-size: 13px; margin-bottom: var(--s3); }
.card .check { margin-inline-end: var(--s4); }
.card .btn { margin-top: var(--s3); }
.alerts .alert-rows { display: grid; margin-bottom: var(--s3); border: 1px solid var(--edge); border-radius: 3px; background: #15181b; }
.alerts .alert-rows > * { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px; padding: 4px var(--s3); border-bottom: 1px solid var(--line); }
.alerts .alert-rows > *:last-child { border-bottom: 0; }
.alerts .alert-rows select { padding: 4px var(--s2); font-size: 13px; }
.alerts .alert-how { display: flex; flex-wrap: wrap; gap: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); margin-bottom: var(--s2); }
.alerts .row .btn { margin-top: 0; }

/* the advanced corner */
.advanced { padding-bottom: 0; }
.advanced > summary { cursor: pointer; margin-bottom: 0; color: var(--muted); list-style: none; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: '▸'; color: var(--led); }
.advanced[open] > summary::before { content: '▾'; }
.advanced > summary:hover { color: #fff; }
.advanced[open] { padding-bottom: var(--s4); }
.advanced[open] > summary { margin-bottom: var(--s3); color: #fff; }
.advanced > * + * { margin-top: var(--s3); }
.preview-wrap { direction: ltr; overflow-x: auto; background: #000; border-radius: 2px; }
#preview { display: block; image-rendering: pixelated; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); align-items: end; }
.cal-grid label { display: grid; gap: var(--s1); font-size: 12px; color: var(--muted); }
.cal-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.errors { color: var(--bad); margin: 0; padding-inline-start: var(--s5); font-size: 14px; }
.errors:empty { display: none; }
.errors .ok { color: var(--good); }
.teach { display: flex; gap: var(--s4); align-items: center; background: var(--raise); border: 1px solid rgba(255, 201, 74, 0.45); border-radius: 3px; padding: var(--s3); }
.teach canvas { flex: none; image-rendering: pixelated; background: #fff; border-radius: 2px; }
.digits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.digits .btn { min-width: 36px; justify-content: center; padding: 5px 0; }
.debug { background: #0d0f11; border-radius: 3px; padding: var(--s3); font-size: 12px; overflow-x: auto; direction: ltr; text-align: left; }
.btn.file { cursor: pointer; }

/* ── the side: Dark Lord, the setup steps, what just came in ── */
.side { background: var(--rail); border-inline-start: 1px solid var(--edge); display: flex; flex-direction: column; gap: var(--s5); padding: var(--s4); min-height: 0; overflow: hidden; }
.side h2 { font: 400 15px/1.2 var(--sign); color: var(--muted); margin-bottom: var(--s2); }
.guide { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s2); }
.npc { margin: 0; display: grid; justify-items: center; gap: 4px; flex: none; }
.npc img { height: 104px; width: auto; }
/* the game's chat bubble: white, hugging its words, its tail pointing down at whoever talks */
.bubble {
  position: relative; max-width: 100%; text-align: center;
  background: #fff; color: #1f1a26; border-radius: 10px; padding: 8px var(--s3); font-size: 14px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); animation: bubble-in 0.35s var(--ease);
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; border-inline: 7px solid transparent; border-top: 8px solid #fff; }
.bubble:empty { display: none; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* the setup steps: a notice pasted up, two strips of tape */
.steps-block {
  position: relative; background: var(--plaster); color: var(--paper-ink); padding: var(--s5) var(--s4) var(--s4); border-radius: 1px;
  transform: rotate(-1.2deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55);
}
.steps-block::before, .steps-block::after { content: ''; position: absolute; top: -8px; width: 54px; height: 18px; background: rgba(255, 250, 225, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.steps-block::before { inset-inline-start: 14px; transform: rotate(-6deg); }
.steps-block::after { inset-inline-end: 14px; transform: rotate(5deg); }
.side .steps-block h2 { color: var(--paper-ink); font-size: 19px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.steps li { display: flex; gap: var(--s3); align-items: flex-start; color: #7a6f80; font-size: 14px; }
.steps li.now, .steps li.done { color: var(--paper-ink); }
.steps .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #fff; border: 1px solid #c9c0b0; }
.steps .mark .ic { width: 14px; height: 14px; }
.steps li.now .mark { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--gold); }
.steps li.done .mark { background: #2f8a55; border-color: #2f8a55; color: #fff; }
.steps .hint { color: #4d4455; font-size: 13px; }

/* what just came in: the game's own system messages, a dark strip each */
.log-block { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.log li { display: flex; align-items: baseline; gap: var(--s2); font-size: 12px; color: #dfe3e6; background: rgba(0, 0, 0, 0.55); border-radius: 2px; padding: 3px var(--s2); animation: log-in 0.45s var(--ease); }
.log li b { font-size: 15px; font-weight: 800; color: var(--aqua); direction: ltr; white-space: nowrap; }
.log li.lv b { color: var(--gold); }
.log li.death b { color: var(--bad); }
.log li.meso b { color: var(--tag); }
.log li:nth-child(n+6) { opacity: 0.75; }
.log li:nth-child(n+9) { opacity: 0.5; }
.log li:nth-child(n+12) { opacity: 0.28; }
@keyframes log-in { from { opacity: 0; transform: translateY(-10px); } }
.log-empty { background: rgba(0, 0, 0, 0.45); padding: var(--s2) var(--s3); border-radius: 2px; color: var(--muted); }

/* ── the small things: the overlay's "?" and what it opens, sharing a run, what you're killing ── */
.help-btn { padding: 8px; }
.help-btn .ic { width: 18px; height: 18px; }
/* the overlay explained: a native popover in the game's window steel, centred, the strip itself shown at the top */
.help-pop {
  width: min(440px, calc(100vw - 32px)); padding: var(--s5); margin: auto; border: 1px solid var(--edge); border-radius: 8px;
  background: #1c1f23; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.help-pop::backdrop { background: rgba(5, 6, 8, 0.55); }
.help-pop h3 { font: 400 22px/1.2 var(--sign); margin-bottom: var(--s4); }
.help-pop p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: var(--s3); }
.help-pop p.fine { font-size: 13px; color: var(--faint); }
.help-pop .help-strip { position: static; display: inline-flex; margin-bottom: var(--s2); animation: none; }
/* share the run going on now, from the street itself */
.stage-share { position: absolute; z-index: 3; top: var(--s3); inset-inline-end: var(--s3); }
.stage-share .ic { width: 16px; height: 16px; }
/* a run's actions at the end of its row */
.row-acts { white-space: nowrap; }
.btn.link.share:hover { color: var(--gold); }
/* what you're killing: one line a monster, its share of the kills as a bar */
.mobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.mobs li { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); font-size: 14px; }
.mobs li b { font-weight: 800; color: var(--gold); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.mob-bar { height: 10px; border-radius: 3px; background: #0d0f11; overflow: hidden; direction: ltr; }
.mob-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--aqua), #b6ffd2); transition: width 0.6s var(--ease); }
.mob-v { color: var(--muted); font-size: 13px; white-space: nowrap; }
.mobs li.empty { display: block; color: var(--faint); }

/* the party's share of your EXP, under the street's sub line */
.stage-party { position: relative; z-index: 2; margin-top: 6px; font-size: 13px; font-weight: 600; color: #c9b4ff; background: rgba(8, 8, 10, 0.8); padding: 3px var(--s3); border-radius: 3px; }
/* "a new map: what is it called?" — a window strip under the status bar, gold edge, until it's named */
.name-map {
  display: flex; align-items: center; gap: var(--s3); margin: var(--s3) var(--s5) 0; padding: var(--s2) var(--s3) var(--s2) var(--s4);
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.45);
  font-size: 14px; font-weight: 600;
}
.name-map .ic { color: var(--gold); }
.name-map input { flex: 1; min-width: 160px; max-width: 320px; padding: 5px var(--s3); }
.name-map .btn { margin-inline-start: auto; }

/* the data credit NiaDB asked for */
.credit { font-size: 13px; color: var(--faint); }
.credit a { color: var(--muted); text-underline-offset: 3px; }
.credit a:hover { color: var(--gold); }
.l-end .credit { margin-top: var(--s5); }

/* ── one window: the board, the hero, the windows, the filters, settings in a dialog ── */
.board { grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.board > .note, .board > .name-map { margin: 0; }
.side { grid-column: 2; grid-row: 2; }
/* the filters: one switch per window, pressed when it's shown */
.filters { display: flex; gap: 4px; margin-inline-start: auto; }
.filters button {
  font: 700 13px/1 var(--font); color: var(--faint); cursor: pointer; padding: 7px var(--s3);
  background: #0d0f11; border: 1px solid var(--edge); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: color 0.15s var(--ease);
}
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { color: #fff; background: linear-gradient(#41474e, #2c3136); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 var(--gold); }
.filters button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the hero: the street with the damage number, the next level beside it */
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: var(--s3); flex: none; }
.hero .stage { min-height: 250px; height: clamp(250px, 34vh, 340px); flex: none; }
.lvbox {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s2); padding: var(--s4) var(--s5);
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.lvbox .k { font-size: 14px; color: var(--muted); }
.lv-eta { font: 800 clamp(30px, 3vw, 44px)/1 var(--font); direction: ltr; text-align: start; }
[dir="rtl"] .lv-eta { text-align: right; }
.lvbar.big { height: 14px; margin: var(--s1) 0; }
.lvbar.big i { background: linear-gradient(#fff08a, #e6be14 50%, #a88a00); }
.lv-row { display: flex; justify-content: space-between; gap: var(--s3); font-size: 13px; color: var(--faint); }
.ltr { direction: ltr; }

/* the four totals: net profit green when ahead, red when the spot cost you */
.ro.gain { background: rgba(91, 227, 138, 0.07); }
.ro.gain .v { color: var(--aqua); }
.ro.loss { background: rgba(255, 123, 107, 0.08); }
.ro.loss .v { color: var(--bad); }

/* the windows: three across, then two */
.wins { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); flex: none; align-items: stretch; }
.wins.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.win {
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 280px; padding: 0 var(--s4) var(--s4);
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.win-head {
  display: flex; align-items: center; gap: var(--s2); margin: 0 calc(-1 * var(--s4)) var(--s1); padding: 9px var(--s4);
  font: 400 17px/1.2 var(--sign); color: #fff; background: linear-gradient(var(--panel-top), #202428);
  border-bottom: 1px solid var(--edge); border-radius: var(--r) var(--r) 0 0;
}
.win-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.win .chart { flex: 1; min-height: 200px; }
.win .table-wrap { max-height: 320px; }
.win .runs-split { flex: 1; }

/* what you made: the range switch, three numbers, the list */
.earn-range { display: inline-flex; align-self: flex-start; border: 1px solid var(--edge); border-radius: 3px; background: #0d0f11; }
.earn-range button { font: 700 12px/1 var(--font); color: var(--faint); background: none; border: 0; padding: 6px 10px; cursor: pointer; }
.earn-range button + button { border-inline-start: 1px solid var(--edge); }
.earn-range button[aria-pressed="true"] { color: var(--gold-ink); background: var(--gold); }
.money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.money div { display: grid; gap: 2px; }
.money .k { font-size: 12px; color: var(--muted); }
.money b { font: 800 24px/1.1 var(--font); direction: ltr; text-align: start; }
[dir="rtl"] .money b { text-align: right; }
.g { color: var(--aqua); }
.r { color: var(--bad) !important; }
/* the potions on the quick slots: start → now, what the drunk ones cost */
.stock { list-style: none; margin: 0; padding: var(--s2) 0; display: grid; gap: 4px; border-bottom: 1px solid var(--line); }
.stock li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); font-size: 13px; }
.stock .it { width: 18px; height: 18px; border-radius: 5px 5px 7px 7px; background: linear-gradient(#ff8b7e, #c42a22); border: 1px solid var(--edge); }
.stock .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock .ltr { color: var(--muted); font-weight: 700; }
.earn-list { list-style: none; margin: 0; padding: 0; display: grid; overflow: auto; max-height: 260px; }
.earn-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.earn-list li:last-child { border-bottom: 0; }
.earn-list .it { width: 22px; height: 22px; border-radius: 3px; background: #2b3035; border: 1px solid var(--edge); }
.earn-list .it.meso { background: radial-gradient(circle at 35% 35%, #fff3a0, #e6be14 55%, #9a7400); border-radius: 50%; }
.earn-list .it.pot { background: linear-gradient(#ff8b7e, #c42a22); border-radius: 6px 6px 8px 8px; }
.earn-list .nm { display: grid; min-width: 0; font-weight: 600; }
.earn-list .nm small, .earn-list .val small { font-size: 12px; font-weight: 400; color: var(--faint); }
.earn-list .nm, .earn-list .nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earn-list .n { direction: ltr; color: var(--muted); font-size: 13px; }
.earn-list .val { direction: ltr; font-weight: 800; color: var(--tag); text-align: end; white-space: nowrap; }
.earn-list .val.none { color: var(--faint); font-weight: 600; display: grid; }
.earn-list .est { font-style: normal; font-size: 11px; font-weight: 600; color: var(--faint); margin-inline-start: 4px; }
.earn-list li.empty { display: block; color: var(--faint); padding: var(--s4) 0; }
.inv summary { cursor: pointer; font-size: 13px; color: var(--muted); display: flex; gap: var(--s2); }
.inv[open] summary { margin-bottom: var(--s2); color: var(--text); }

/* the game's pickup lines, as they were read */
.log.pick li { font-size: 12px; color: #dfe3e6; display: block; }
.log.pick li.exp { box-shadow: inset 2px 0 0 var(--aqua); }
.log.pick li.mesos { box-shadow: inset 2px 0 0 var(--tag); }
.log.pick li.item { box-shadow: inset 2px 0 0 var(--blue-hi); }
.log.pick li.bonus { box-shadow: inset 2px 0 0 #c9b4ff; }

/* settings, behind the gear: a game window over the town */
.settings-dlg {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: var(--s4); overflow: auto;
  color: var(--text); background: #16191c; border: 1px solid var(--edge); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.settings-dlg::backdrop { background: rgba(5, 6, 8, 0.65); }
.settings-dlg .scene { margin-bottom: var(--s4); }
.settings-dlg .settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--s4); }
.dlg-close { position: absolute; top: var(--s5); inset-inline-end: var(--s5); z-index: 2; background: rgba(10, 11, 14, 0.85); }

/* ── smaller windows: the side folds away at mid widths; on a phone everything stacks and the page scrolls ── */
@media (max-width: 1520px) { .top .btn { padding-inline: var(--s3); } .filters button { padding-inline: var(--s2); } }
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --side-w: 0px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .wins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wins.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) { .settings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px), (max-height: 640px) {
  .app { display: block; height: auto; }
  .board { overflow: visible; padding-inline: var(--s4); }
  .hero, .wins, .wins.two { grid-template-columns: minmax(0, 1fr); }
  .hud { position: sticky; bottom: 0; flex-wrap: wrap; height: auto; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); }
  .hud-gauges { order: 2; flex: 1 0 100%; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--s3); }
  .top { padding-inline: var(--s4); }
  .filters { order: 9; flex: 1 0 100%; margin: 0; overflow-x: auto; }
  .where b { max-width: 60vw; }
  .stage { min-height: 260px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ro:nth-child(3) { border-inline-start: 0; }
  .ro:nth-child(n+3) { border-top: 1px solid var(--line); }
  .runs-split { grid-template-columns: minmax(0, 1fr); }
  .side { border: 0; overflow: visible; }
  .log li:nth-child(n+6) { display: none; }
}
@media (max-width: 560px) {
  .ro .v { font-size: 24px; }
  .stage-floor { inset-inline: 2%; }
  .stage-floor img { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── the landing: what this is and how it works. The town is the backdrop (a full-bleed street at its own painted
   resolution, two places as bands), the site's own screens are the proof; huge white type over the image, the
   game's orange button to go in (src/landing.js) ── */
body.landing-open { overflow: hidden; }
.landing { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; background: var(--bg); color: var(--text); scroll-behavior: smooth; }
.landing.out { animation: land-out 0.3s var(--ease) forwards; }
@keyframes land-out { to { opacity: 0; transform: scale(1.03); } }

/* the one way in: a red sticker slapped on the wall, in the sign font, white edge, hard black shadow, a little crooked */
.l-go {
  font: 400 22px/1 var(--sign); color: #fff; cursor: pointer; padding: 13px 34px 14px; white-space: nowrap;
  background: #e8452c; border: 3px solid #fff; border-radius: 6px; transform: rotate(-2deg);
  box-shadow: 5px 6px 0 #000; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.l-go:hover { background: #f2553b; transform: rotate(-2deg) translate(-2px, -2px); box-shadow: 7px 8px 0 #000; }
.l-go:active { transform: rotate(-2deg) translate(3px, 4px); box-shadow: 2px 2px 0 #000; }
.l-go:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.l-go.small { font-size: 16px; padding: 8px 18px 9px; border-width: 2px; box-shadow: 3px 4px 0 #000; }
.l-go.small:hover { box-shadow: 4px 5px 0 #000; }

/* the top line, over the street */
.l-nav { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; gap: var(--s5); padding: var(--s5) 6vw; }
.l-brand { font: 900 22px/1 var(--font); text-transform: uppercase; letter-spacing: 0.02em; direction: ltr; margin-inline-end: auto; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.l-nav a { color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.l-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
a.account-btn, #accountSignIn { text-decoration: none; }

/* the hero: Kerning's street, the whole window, the name huge over it */
.l-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.l-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.l-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 10, 20, 0.55), rgba(10, 10, 20, 0.15) 30%, rgba(10, 10, 20, 0.35) 55%, rgba(12, 12, 18, 0.96)); }
.l-hero-text { position: relative; z-index: 1; padding: 0 6vw 9vh; max-width: 1100px; }
/* the name: a graffiti piece (an inline SVG in the hand of a real tag, self-hosted), sprayed on the street */
@font-face { font-family: Graffiti; src: url(fonts/sedgwick-ave-display-latin.woff2) format('woff2'); font-display: block; }
.l-word { margin: 0 0 var(--s4); line-height: 0; }
.l-piece { display: block; width: clamp(420px, 48vw, 800px); height: auto; overflow: visible; margin-inline-start: -2vw; }
/* the question, big in the sign font, straight on the street; one plain line under it */
.l-q { font: 400 clamp(28px, 2.6vw, 40px)/1.2 var(--sign); color: #fff; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.8); text-wrap: balance; }
.l-q b { color: var(--gold); font-weight: 400; }
.l-lead { margin-top: var(--s2); font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; line-height: 1.5; max-width: 52ch; color: #d6d3de; text-shadow: 0 2px 6px #000; text-wrap: pretty; }
.l-cta { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s5); flex-wrap: wrap; }
.l-link { font: 400 20px/1 var(--sign); color: #fff; text-decoration: none; text-shadow: 0 2px 0 #000; }
.l-link:hover { color: var(--gold); }

/* a band: a place in town, full width, one huge line over it */
.l-band { position: relative; padding: 18vh 6vw; background: #000 center / cover no-repeat; overflow: hidden; isolation: isolate; }
.l-band[data-scene="subway"] { background-image: url(img/kerning/scene-subway.png); }
.l-band[data-scene="hideout"] { background-image: url(img/kerning/scene-hideout.png); background-position: 40% 60%; }
.l-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 16, 0.86), rgba(10, 10, 16, 0.55)); }
[dir="rtl"] .l-band::before { background: linear-gradient(270deg, rgba(10, 10, 16, 0.86), rgba(10, 10, 16, 0.55)); }
.l-band-head { font: 900 clamp(44px, 6.5vw, 108px)/0.98 var(--font); letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; }
.l-band-text { margin-top: var(--s5); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; max-width: 44ch; color: #e8e6f0; }

/* the sections: how it works, what's inside */
.l-sec { padding: 14vh 6vw 6vh; max-width: 1400px; margin: 0 auto; }
.l-sec-head { font: 900 clamp(40px, 5vw, 76px)/1 var(--font); letter-spacing: -0.02em; margin-bottom: 7vh; }
.l-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); counter-reset: step; }
.l-steps li { counter-increment: step; }
.l-steps h3 { font: 800 24px/1.2 var(--font); margin: var(--s4) 0 var(--s2); display: flex; gap: var(--s3); align-items: baseline; }
.l-steps h3::before { content: counter(step); font: 900 24px/1 var(--font); color: var(--gold); }
.l-steps p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.l-step-img { margin: 0; aspect-ratio: 16 / 10; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; background: #0d0f11; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px rgba(0, 0, 0, 0.45); }
.l-step-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; image-rendering: auto; }
/* the game's own status line, at its own pixels, centred in the frame over the street */
.l-step-img.l-status { display: grid; place-items: center; padding: var(--s4); background: #11141a url(img/kerning/hero-street.jpg) center 70% / cover; }
.l-step-img.l-status img { width: 100%; height: auto; object-fit: contain; image-rendering: pixelated; border: 1px solid #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }

.l-feat { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 6vw; align-items: center; padding-block: 7vh; }
.l-feat.flip { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); }
.l-feat.flip .l-feat-text { order: 2; }
.l-feat h3 { font: 900 clamp(30px, 3vw, 48px)/1.05 var(--font); letter-spacing: -0.01em; margin-bottom: var(--s4); }
.l-feat p { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 40ch; }
.l-shot { margin: 0; }
.l-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.55); image-rendering: auto; }
.l-shot figcaption { margin-top: var(--s3); font-size: 13px; color: var(--faint); }
/* the overlay over the game: the game's own status line, the overlay strip floating above it */
.l-bar { position: relative; padding: 12vh 4vw 4vh; border-radius: 6px; background: #11141a url(img/kerning/hero-street.jpg) center 60% / cover; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.l-bar .l-bar-game { image-rendering: pixelated; border-color: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }
/* the overlay strip itself, drawn as overlay.css draws it: the dark street, the lead number as a damage number */
.l-bar-strip {
  display: flex; align-items: center; height: 40px; padding: 0 var(--s3);
  background: #141619; border: 1px solid #000; border-radius: 4px; direction: rtl;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.l-bar .l-bar-strip { position: absolute; inset-inline-end: 8%; top: 4vh; animation: hover-bar 4s ease-in-out infinite alternate; }
.l-bs-dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee08f; margin-inline-end: var(--s2); }
.l-bs { display: flex; align-items: center; gap: 5px; padding: 0 var(--s3); font: 800 15px/1 var(--font); color: var(--text); direction: ltr; white-space: nowrap; }
.l-bs + .l-bs { border-inline-start: 1px solid var(--line); }
.l-bs .ic { color: var(--aqua); }
.l-bs:first-of-type b { color: var(--gold); font-weight: 900; -webkit-text-stroke: 3px var(--gold-ink); paint-order: stroke fill; }
.l-bs:first-of-type .ic { color: var(--gold); }
@keyframes hover-bar { to { transform: translateY(-6px); } }
.l-bar figcaption { position: absolute; inset-inline-start: 4vw; bottom: 1vh; margin: 0; color: #fff; text-shadow: 0 1px 6px #000; }

.l-end { padding: 16vh 6vw 18vh; text-align: center; display: grid; justify-items: center; gap: var(--s5); }
.l-end .l-sec-head { margin: 0; }

.brand { all: unset; cursor: pointer; display: block; }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 900px) {
  .l-nav a { display: none; }
  .l-steps { grid-template-columns: minmax(0, 1fr); }
  .l-feat, .l-feat.flip { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .l-feat.flip .l-feat-text { order: 0; }
  .l-piece { width: 92vw; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .landing { scroll-behavior: auto; } .l-bar .l-bar-strip { animation: none; } }

/* a newer site on the local server: offered, never forced (a reload ends the screen sharing) */
.update-bar { position: fixed; inset: 0 0 auto 0; z-index: 10000; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.update-bar[hidden] { display: none; }
.update-bar button { font: inherit; padding: 4px 12px; border: 2px solid var(--gold-ink); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }

/* ══ Kerning at sunset (Ron's pick, 25.10): the town at the end of the day. The sky from purple to orange, Kerning's
   skyline along the bottom; light concrete windows with a dark ink outline and a hard shadow, each topped by a strip of
   the town's brick with its name in the sign font; EXP an hour on the station's amber LED board; the street with the
   monsters under it, their yellow name tags back. Buttons white with an ink edge, the main one in the subway sign's
   blue. Colour where it says something: each total its own, the net green or red, gold for the best. ══ */
.app, .settings-dlg, .help-pop, .signin-dlg {
  --ink: #2a2230;
  --text: #2a2230;
  --muted: #5e5468;
  --faint: #7a6f80;
  --panel: #f4eeff;
  --panel-2: #fbf7ff;
  --line: #e2d6f5;
  --line-2: #cdbde8;
  --edge: #2a2230;
  --gold: #b07800;
  --aqua: #1f8a46;
  --bad: #c2392a;
  --r: 12px;
  --win-shadow: 0 4px 0 #2a2230, 0 14px 26px rgba(40, 20, 50, 0.28);
  --brick: linear-gradient(rgba(90, 30, 15, 0.25), rgba(60, 20, 10, 0.55)), url(img/kerning/brick.png) 0 30% / 200px auto;
}
body { background: #5b4c9c; }
.app, .settings-dlg, .help-pop, .signin-dlg { color: var(--text); }
::-webkit-scrollbar-thumb { background: rgba(42, 34, 48, 0.35); border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; }
::selection { background: #ffcc33; color: #2a2230; }

/* the sky, and the town against it */
.app .world { background: linear-gradient(#5b4c9c 0%, #c86b8f 40%, #f4a259 70%, #ffd59a 100%); }
.app .world::after { opacity: 0.5; filter: brightness(0.35) saturate(0.6); height: 46%; animation: none; }

/* buttons: white, an ink edge, a hard shadow under; the main one the subway sign's blue */
.app .btn, .settings-dlg .btn, .help-pop .btn {
  border-radius: 8px; border: 2px solid var(--ink); background: #f1e8ff; color: var(--ink); text-shadow: none;
  box-shadow: 0 3px 0 var(--ink); padding: 6px 14px;
}
.app .btn:active, .settings-dlg .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.app .btn.small, .settings-dlg .btn.small { padding: 4px 11px; }
.app .btn.primary, .settings-dlg .btn.primary { background: linear-gradient(#4a86f2, #2f68dc); color: #fff; }
.app .btn.ghost, .settings-dlg .btn.ghost, .help-pop .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.app .btn.ghost:hover, .settings-dlg .btn.ghost:hover { background: rgba(42, 34, 48, 0.08); }
.app .btn.link { background: none; border: 0; box-shadow: none; padding: 0 4px; color: var(--faint); }
.app .btn.bar-btn.on { background: #e8f8ec; border-color: #1f8a46; color: #1f6b3a; box-shadow: 0 3px 0 #1f6b3a; }
.app input, .app select, .settings-dlg input, .settings-dlg select { background: #fbf7ff; color: var(--ink); border: 2px solid var(--line-2); border-radius: 8px; box-shadow: none; }
.app input:focus, .app select:focus, .settings-dlg input:focus { border-color: #2f68dc; }
.app input[type="checkbox"], .settings-dlg input[type="checkbox"] { border: 2px solid var(--ink); border-radius: 4px; background-color: #fbf7ff; }
.app input[type="checkbox"]:checked, .settings-dlg input[type="checkbox"]:checked { background-color: #2f68dc; border-color: var(--ink); }
:focus-visible { outline-color: #2f68dc; }

/* the top bar: over the sky, white words; the brand the station's LED board */
.app .top { background: transparent; border: 0; box-shadow: none; color: #fff; padding-block: var(--s3); }
.app .top b { color: #fff; }
.app .where .ic { color: #ffb870; }
.app .where b { font: 400 24px/1.1 var(--sign); color: #fff; text-shadow: 0 2px 0 rgba(42, 20, 50, 0.6); }
.app .where small, .app .state { color: #fff; text-shadow: 0 1px 0 rgba(42, 20, 50, 0.6); }
.app .timer b { color: #fff; background: rgba(42, 34, 48, 0.55); border: 0; border-radius: 8px; }
.app .filters { padding: 3px; gap: 3px; border-radius: 10px; background: rgba(42, 34, 48, 0.55); }
.app .filters button { border: 0; border-radius: 7px; background: none; box-shadow: none; color: #e9e2f0; }
.app .filters button[aria-pressed="true"] { background: #f1e8ff; color: var(--ink); box-shadow: 0 2px 0 var(--ink); }

/* windows: light concrete, an ink outline, a brick strip on top with the name in the sign font */
/* (section.win: a best cell in the comparison is also called .win) */
.app section.win, .app .lvbox, .app .runs-side { background: var(--panel); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--win-shadow); }
.app .win-head, .app .side-head {
  background: var(--brick); border-bottom: 2px solid var(--ink); color: #fff; text-shadow: 0 2px 0 #2a0f05;
  font: 400 17px/1.2 var(--sign); border-radius: 9px 9px 0 0;
}
.app .side-head h3 { color: #fff; }
.app .side-head .btn.ghost { color: #fff; }
.app .fine, .app .k { color: var(--muted); }

/* the session: the street with the monsters, EXP an hour on the LED board above them */
.app .hero { gap: var(--s4); }
.app .hero .stage {
  border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--win-shadow);
  background: linear-gradient(rgba(25, 18, 40, 0.42), rgba(25, 18, 40, 0.15) 55%, rgba(25, 18, 40, 0.05)), url(img/kerning/hero-street.jpg) center 62% / cover;
}
.app .town { display: none; }
.app .stage::after { display: none; }
.app .stage-k { color: #fff; text-shadow: 0 1px 2px #000; }
.app .stage-k .ic { color: #ffb870; }
.app .dmg {
  color: var(--ink); -webkit-text-stroke: 0; text-shadow: none;
  background: linear-gradient(#ffcf7a, #f39a3c); border: 3px solid var(--ink); border-radius: 12px; padding: 0.04em 0.26em 0.08em;
  box-shadow: 0 4px 0 var(--ink), 0 10px 24px rgba(0, 0, 0, 0.35);
  font-size: clamp(36px, min(6.4vw, 100cqh - 120px), 100px);
}
.app .idle .dmg { background: #f1e8ff; color: var(--faint); }
.app .stage-sub, .app .stage-party { background: rgba(42, 34, 48, 0.72); color: #fff; border-radius: 6px; }
.app .stage-floor .nametag { display: inline-block; }
.app .lvbox .k { color: var(--muted); }
.app .lv-eta { color: var(--ink); }
.app .lvbar { height: 14px; border: 2px solid var(--ink); border-radius: 8px; background: #ddd5ca; }
.app .lvbar i, .app .lvbar.big i { border-radius: 6px; background: linear-gradient(#fff38a, #f4c916 55%, #d49b00); }
.app .lv-row { color: var(--faint); }

/* the four totals: white tiles, an ink edge, each number its own colour */
.app .strip { gap: var(--s2); background: none; border: 0; box-shadow: none; }
.app .ro { background: #f1e8ff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.app .ro + .ro { border-inline-start: 2px solid var(--ink); }
.app .ro .v { color: var(--ink); }
.app .ro[data-ro="kills"] .v { color: #c25e08; }
.app .ro[data-ro="exp"] .v { color: #6a3fc2; }
.app .ro[data-ro="mesos"] .v { color: #a87400; }
.app .ro.gain { background: #e8f8ec; }
.app .ro.gain .v { color: #1f8a46; }
.app .ro.loss { background: #fdecea; }
.app .ro.loss .v { color: #c2392a; }
.app .idle .ro .v { color: var(--faint); }

/* what you made: a receipt; the range a row of small buttons */
.app .earn-range, .app .seg { border: 2px solid var(--ink); border-radius: 8px; background: #fbf7ff; box-shadow: none; overflow: hidden; }
.app .earn-range button { color: var(--muted); }
.app .earn-range button + button, .app .seg label + label { border-inline-start: 2px solid var(--ink); }
.app .earn-range button[aria-pressed="true"], .app .seg input:checked + span { background: #2f68dc; color: #fff; box-shadow: none; }
.app .seg > label > span { color: var(--muted); }
.app .money { border-bottom: 1px dashed var(--line-2); }
.app .money b { color: var(--ink); }
.app .g { color: #1f8a46; }
.app .earn-list li, .app .stock { border-color: var(--line); }
.app .earn-list .val { color: #a87400; }

/* tables: a light header, white rows, gold for the best, the ticked ones warm */
.app .table-wrap.fill { background: #fbf7ff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: none; }
.app .table th { background: #ece2fb; color: var(--faint); border-bottom: 2px solid var(--ink); }
.app .table td { border-bottom: 1px solid var(--line); background: #fbf7ff; }
.app .table tr:hover td { background: #f6efff; }
.app .table tr.picked td { background: #ffe9b8; }
.app .table tr.best td { background: #fff3c8; }
.app .table tr.best td.n, .app .runs-cmp td.win { color: #a06c00; }
.app .table tr.live td:nth-child(2) { color: #1f8a46; }
.app .runs-cmp th { background: none; color: var(--ink); }
/* the best cell of a comparison line is td.win: undo the window look the base .win rule gives it */
.app .table td.win { display: table-cell; min-width: 0; min-height: 0; padding: 10px var(--s3); gap: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: #fff3c8; font-weight: 800; }
.app #history.picking input[type="checkbox"] { box-shadow: 0 0 0 3px rgba(47, 104, 220, 0.45); }
.app .mob-bar { background: #e5ddd1; border: 1px solid var(--line-2); }
.app .mob-bar i { background: linear-gradient(90deg, #f4c916, #ffe36b); }
.app .mobs li b { color: var(--ink); }
.app .mob-v { color: var(--faint); }

/* the side: a light rail at the town's edge; the setup steps are the pasted notice again; the log the game's dark
   system lines */
.app .side { background: rgba(244, 238, 255, 0.92); border-inline-start: 2px solid var(--ink); }
.app .side h2 { color: var(--muted); }
.app .log-empty { background: #fbf7ff; border: 1px solid var(--line); }
.app .log li { background: rgba(20, 14, 30, 0.84); color: #eef0f2; border-radius: 4px; }
.app .log li b { color: #8dffb8; }
.app .log li.lv b { color: #ffd36b; }
.app .log li.meso b, .app .log.pick li.mesos b { color: #ffd23a; }
.app .log li.death b { color: #ff9a8a; }

/* the bottom bar stays the game's dark status bar */
.app .hud { color: #b7bdc3; }
.app .hud-lv b { color: #ffc94a; }
.app .note { background: #fff7d6; border: 2px solid #e2b23a; color: #6a4a00; border-radius: 10px; }
.app .name-map { background: var(--panel); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--win-shadow); }

/* settings and the overlay's help: the same concrete windows */
.settings-dlg { background: #efe7fb; color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink), 0 30px 80px rgba(0, 0, 0, 0.5); }
.settings-dlg .block, .settings-dlg .card { background: #fbf7ff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.settings-dlg .block > h2, .settings-dlg .card > h2, .settings-dlg .advanced > summary { background: var(--brick); color: #fff; border-bottom: 2px solid var(--ink); text-shadow: 0 2px 0 #2a0f05; border-radius: 10px 10px 0 0; }
.settings-dlg .chips, .settings-dlg .alerts .alert-rows { background: #fbf7ff; border: 2px solid var(--line-2); }
.settings-dlg .chips label { color: var(--muted); border-color: var(--line); }
.settings-dlg .chips label:has(input:checked) { color: var(--ink); }
.settings-dlg .seg { border: 2px solid var(--ink); border-radius: 8px; background: #fbf7ff; overflow: hidden; }
.settings-dlg .seg label + label { border-inline-start: 2px solid var(--ink); }
.settings-dlg .seg input:checked + span { background: #2f68dc; color: #fff; box-shadow: none; }
.settings-dlg .fine, .settings-dlg .muted, .settings-dlg .safe, .settings-dlg .credit { color: var(--muted); }
.help-pop { background: #f4eeff; color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink), 0 24px 60px rgba(0, 0, 0, 0.5); }
.help-pop p { color: var(--muted); }

/* the chart's minutes in the subway sign's blue (the last one gold); your training and where it pays each the full
   width, the picked runs compared under the list rather than squeezed beside it */
:root { --bars: #2f68dc; }
.app .wins.two { grid-template-columns: minmax(0, 1fr); }
.app .runs-split { grid-template-columns: minmax(0, 1fr); }
.app .runs-side { align-self: stretch; padding: 0 var(--s4) var(--s4); }
.app .win .table-wrap { max-height: 360px; }

/* Lavender and orange (Ron's pick, 25.10, the floating window's colours): lavender instead of white, and no black-and-
   yellow LED: EXP an hour and the brand sit on warm orange with ink letters */
.app .led { background: linear-gradient(#ffcf7a, #f39a3c); color: var(--ink); text-shadow: none; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--ink); -webkit-mask-image: none; mask-image: none; padding: 5px 12px; }
.app .lv-eta { color: var(--ink); }

/* ══ Dusk panels and round letters (Ron, 25.10: "too bright, not white"; "the fonts don't look good, not like the site
   I sent"): the windows are the sky's own dusk plum with light words, the tiles a lighter glass on it; Fredoka for
   headings, numbers and buttons, Nunito for the words, Varela Round for their Hebrew (Ron's pick: the pair meso.watch uses;
   all self-hosted). ══ */
@font-face { font-family: Fredoka; src: url(fonts/fredoka-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-hebrew.woff2) format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Nunito; src: url(fonts/nunito-latin.woff2) format('woff2'); font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Varela Round"; src: url(fonts/varela-round-latin.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Varela Round"; src: url(fonts/varela-round-hebrew.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

.app, .settings-dlg, .help-pop, .signin-dlg {
  --font: Fredoka, "Varela Round", Rubik, sans-serif;
  --sign: Fredoka, Rubik, sans-serif;
  --words: Nunito, "Varela Round", Rubik, sans-serif;
  --text: #fff6fb;
  --muted: #e4d6f4;
  --faint: #bba9d4;
  --panel: linear-gradient(#4a3468, #36254f);
  --panel-2: rgba(255, 255, 255, 0.07);
  --glass: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.24);
  font-family: var(--font);
}
/* the words in the round sans, the numbers and titles in Fredoka */
.app .fine, .app p, .app label, .app .k, .app .sub, .app .bubble, .app .steps, .app .earn-list, .app .mobs, .app .log,
.settings-dlg p, .settings-dlg label, .help-pop p { font-family: var(--words); }
.app .ro .v, .app .dmg, .app .lv-eta, .app .money b, .app .table td.n, .app .timer b, .app .hud-lv b, .app .where b,
.app .win-head, .app .side-head h3, .app .btn, .app .filters button, .settings-dlg .btn, .settings-dlg .block > h2 { font-family: var(--font); }
.app .win-head, .app .side-head h3, .settings-dlg .block > h2, .settings-dlg .card > h2 { font-weight: 600; letter-spacing: 0.01em; }
.app .ro .v, .app .dmg, .app .lv-eta, .app .money b { font-weight: 700; }

/* the dusk windows */
.app section.win, .app .lvbox, .app .runs-side, .app .name-map { background: var(--panel); color: var(--text); }
.app .ro { background: var(--panel); color: var(--text); }
.app .ro .v { color: var(--text); }
.app .ro[data-ro="kills"] .v { color: #ffb48a; }
.app .ro[data-ro="exp"] .v { color: #d6b8ff; }
.app .ro[data-ro="mesos"] .v { color: #ffd27a; }
.app .ro.gain { background: rgba(80, 220, 140, 0.18); }
.app .ro.gain .v { color: #8dffb8; }
.app .ro.loss { background: rgba(255, 120, 100, 0.18); }
.app .ro.loss .v { color: #ffa89a; }
.app .lv-eta { color: var(--text); }
.app .lvbar { background: rgba(0, 0, 0, 0.3); }
.app .idle .dmg { background: rgba(255, 255, 255, 0.12); color: var(--faint); }

/* fields and switches on the dusk */
.app input, .app select, .settings-dlg input, .settings-dlg select { background: rgba(0, 0, 0, 0.25); color: var(--text); border-color: var(--line-2); }
.app input::placeholder { color: var(--faint); }
.app input[type="checkbox"], .settings-dlg input[type="checkbox"] { background-color: rgba(255, 255, 255, 0.9); }
.app .earn-range, .app .seg { background: rgba(0, 0, 0, 0.25); }
.app .earn-range button, .app .seg > label > span { color: var(--muted); }
.app .money b, .app .g { color: var(--text); }
.app .g { color: #8dffb8; }
.app .r { color: #ffa89a !important; }
.app .earn-list .val { color: #ffd27a; }

/* tables on the dusk */
.app .table-wrap.fill { background: rgba(0, 0, 0, 0.18); }
.app .table th { background: rgba(0, 0, 0, 0.28); color: var(--faint); }
.app .table td { background: transparent; color: var(--text); border-bottom-color: var(--line); }
.app .table tr:hover td { background: rgba(255, 255, 255, 0.06); }
.app .table tr.picked td { background: rgba(255, 158, 74, 0.2); }
.app .table tr.best td, .app .table td.win { background: rgba(255, 207, 122, 0.16); }
.app .table tr.best td.n, .app .runs-cmp td.win { color: #ffd27a; }
.app .table tr.live td:nth-child(2) { color: #8dffb8; }
.app .runs-cmp th { color: var(--text); }
.app .mob-bar { background: rgba(0, 0, 0, 0.3); border: 0; }
.app .mobs li b { color: var(--text); }

/* the side rail at dusk; the notice stays pasted paper */
.app .side { background: rgba(42, 30, 62, 0.88); }
.app .side h2 { color: var(--faint); }
.app .log-empty { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

/* settings and help at dusk */
.settings-dlg { background: #2e2042; color: var(--text); }
.settings-dlg .block, .settings-dlg .card { background: var(--panel); color: var(--text); }
.settings-dlg .chips, .settings-dlg .alerts .alert-rows { background: rgba(0, 0, 0, 0.2); border-color: var(--line); }
.settings-dlg .chips label { color: var(--muted); }
.settings-dlg .chips label:has(input:checked) { color: var(--text); }
.settings-dlg .seg { background: rgba(0, 0, 0, 0.25); }
.settings-dlg .fine, .settings-dlg .muted, .settings-dlg .safe, .settings-dlg .credit { color: var(--muted); }
.help-pop { background: #36254f; color: var(--text); }
.help-pop p { color: var(--muted); }

/* the overlay as a picture (the help popover, the landing): the compact window in its colours, the sunset sky, the LV
   tag, the yellow bar, four lavender tiles */
.mini-bar {
  display: inline-grid; gap: 8px; width: min(420px, 100%); height: auto; padding: 9px 10px 10px; direction: ltr;
  background: linear-gradient(#5b4c9c, #b8668f 60%, #f09a5a); border: 2px solid #2a2230; border-radius: 10px;
  box-shadow: 0 4px 0 #2a2230, 0 14px 30px rgba(0, 0, 0, 0.45); font-family: Fredoka, Rubik, sans-serif; color: #2a2230;
}
.mini-bar .mb-row { display: flex; width: 100%; align-items: center; gap: 7px; }
.mini-bar .mb-dot { width: 8px; height: 8px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 6px #7dffb0; border: 1px solid #2a2230; }
.mini-bar .mb-lv { padding: 1px 8px; border-radius: 6px; border: 2px solid #2a2230; background: linear-gradient(#ff7aa8, #ff9e4a); color: #fff; font-size: 12px; text-shadow: 0 1px 0 #2a2230; }
.mini-bar .mb-xp { display: block; position: relative; flex: 1 1 auto; min-width: 140px; height: 16px; border-radius: 8px; border: 2px solid #2a2230; background: #f1e6da; overflow: hidden; }
.mini-bar .mb-xp i { position: absolute; inset: 0 auto 0 0; width: 42.65%; background: linear-gradient(#fff38a, #f4c916 55%, #d49b00); }
.mini-bar .mb-xp em { position: relative; display: block; text-align: center; font: italic 700 10px/12px Fredoka, Rubik, sans-serif; color: #4a3200; }
.mini-bar .mb-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini-bar .mb-cells > span { display: grid; padding: 4px 8px; border-radius: 8px; border: 2px solid #2a2230; background: #f1e8ff; box-shadow: 0 2px 0 #2a2230; }
.mini-bar small { font: 700 9px/1.2 "Varela Round", Rubik, sans-serif; color: #6a5f72; }
.mini-bar b { font-size: 16px; font-weight: 700; color: #2a2230; }
.mini-bar .mb-gold { color: #a87400; } .mini-bar .mb-up { color: #1f8a46; }
.help-pop .mini-bar.help-strip { position: static; display: grid; width: 100%; margin-bottom: var(--s3); animation: none; }
.l-bar .mini-bar.l-bar-strip { display: grid; height: auto; }
.l-bar .mini-bar { position: absolute; inset-inline-end: 8%; top: 4vh; animation: hover-bar 4s ease-in-out infinite alternate; }
/* the words a touch heavier, as in the site Ron pointed to (500: Varela Round has no bold, and a faked one looks worse) */
.app .fine, .app p, .app label, .app .k, .app .sub, .app .steps, .app .earn-list, .app .mobs, .app .log, .settings-dlg p, .settings-dlg label, .help-pop p { font-weight: 500; }

/* what this map drops, and the quests for your loot: two windows side by side */
.wins.pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.drops, .quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drops li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.drops .it-img { width: 28px; height: 28px; object-fit: contain; image-rendering: auto; }
.it-mark { width: 22px; height: 22px; margin: 3px; border-radius: 6px; border: 2px solid #2a2230; background: #b9a8d0; }
.it-mark.etc { background: linear-gradient(#e2b07a, #b47a3a); }
.it-mark.use { background: linear-gradient(#ff9a8a, #d9483a); border-radius: 6px 6px 9px 9px; }
.it-mark.eqp { background: linear-gradient(#9cc4ff, #4a7ad8); }
.drops .nm { display: grid; min-width: 0; }
.drops .nm b, .drops .nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drops .nm small { font-size: 12px; color: var(--faint); }
.drops .pct { font: 700 16px/1 var(--font); color: #ffd27a; direction: ltr; }
.drops .val { font: 600 14px/1 var(--font); color: var(--muted); direction: ltr; text-align: end; min-width: 64px; white-space: nowrap; }
.drops .est { font: 500 11px var(--words, inherit); font-style: normal; color: var(--faint); margin-inline-start: 4px; }
.quests li { position: relative; display: grid; gap: 5px; padding: 9px 12px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 2px solid transparent; }
.quests li.ready { border-color: #8dffb8; background: rgba(80, 220, 140, 0.14); }
.q-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.q-nm { display: grid; min-width: 0; }
.q-nm small { font-size: 12px; color: var(--faint); }
.q-rew { display: flex; gap: var(--s3); font-size: 12px; color: var(--muted); white-space: nowrap; }
.q-rew b { font: 700 14px var(--font); color: #ffd27a; }
.q-part { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: var(--s2); font-size: 13px; }
.q-part .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); overflow: hidden; direction: ltr; }
.pbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #fff38a, #f4c916); }
.quests li.ready .pbar i { background: linear-gradient(90deg, #b6ffd2, #4fd78a); }
.q-part .pv { font: 700 13px var(--font); direction: ltr; }
.q-ready { justify-self: start; font: 700 12px var(--font); color: #0f3a22; background: #8dffb8; border: 2px solid #2a2230; border-radius: 999px; padding: 1px 10px; }
@media (max-width: 900px), (max-height: 640px) { .wins.pair { grid-template-columns: minmax(0, 1fr); } }

/* the landing: safe for your account, in plain words */
.l-safe { margin-top: var(--s5); max-width: 560px; padding: var(--s4) var(--s5); border-radius: 16px; background: rgba(20, 14, 30, 0.72); border: 2px solid rgba(255, 255, 255, 0.18); }
.l-safe h3 { font: 700 22px/1.2 Fredoka, Rubik, sans-serif; margin: 0 0 var(--s3); }
.l-safe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.l-safe li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 16px; line-height: 1.45; }
.l-safe li::before { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font: 700 13px/1 Rubik, sans-serif; }
.l-safe li.yes::before { content: '✓'; background: #8dffb8; color: #0f3a22; }
.l-safe li.no::before { content: '✕'; background: #ffb4a8; color: #4a1208; }
.l-safe-note { margin-top: var(--s3); font-size: 13px; color: #c9bfd8; }

/* ══ Pages (Ron, 29.10: "not one long scroll"): the session on one screen, every other window a page of its own ══ */
/* the tabs: a dark strip with the one you're on in amber, clear against the sky */
.app .pages { display: flex; gap: 3px; padding: 4px; margin-inline-start: auto; border-radius: 12px; background: rgba(20, 14, 30, 0.82); border: 2px solid #2a2230; }
.app .pages button { font: 600 14px/1 var(--font); color: #e4d6f4; background: none; border: 0; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.app .pages button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.app .pages button[aria-selected="true"] { color: #2a2230; background: linear-gradient(#ffcf7a, #f39a3c); box-shadow: 0 2px 0 #2a2230; }
.app .pages button:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 2px; }

.app .page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s3); }
.app .page > section.win { flex: 1 1 auto; min-height: 0; overflow: auto; }
.app .page[data-page="chart"] .chart { flex: 1; min-height: 240px; }
/* the session: the top card, the four totals, then what you made and what you're killing side by side; it fits the
   window, a long list scrolls inside its own window */
.app .page[data-page="session"] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.app .page[data-page="session"][hidden] { display: none; }
.app .wins.sess { min-height: 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.app .wins.sess > section.win { min-height: 0; overflow: auto; }
.app .hero .stage { height: clamp(250px, 36vh, 340px); min-height: 0; padding-bottom: 96px; justify-content: center; }
.app .top { flex-wrap: nowrap; }
.app .where b { font-size: 20px; }

/* the top card: no street behind the number any more (it couldn't be read on it); the dusk, a ground line, and the
   monsters you're training on standing on it with their names and kills */
.app .hero .stage { background: radial-gradient(ellipse at 50% 115%, rgba(255, 160, 110, 0.28), transparent 62%), linear-gradient(#3e2c62, #261a40); }
.app .stage::after { display: block; content: ''; position: absolute; inset: auto 6% 34px; height: 2px; background: rgba(255, 255, 255, 0.18); border: 0; }
.app .dmg, .app .idle .dmg { background: linear-gradient(#ffcf7a, #f39a3c); color: #2a2230; }
.app .idle .dmg { opacity: 0.75; }
.hero-facts { display: flex; gap: var(--s2); margin-top: var(--s2); position: relative; z-index: 2; }
.hero-facts span { display: grid; justify-items: center; min-width: 74px; padding: 3px 10px 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.14); }
.hero-facts small { font: 600 10px/1.2 var(--words, sans-serif); color: #d8c8ee; letter-spacing: 0.04em; }
.hero-facts b { font: 700 16px/1.15 var(--font); color: #fff; direction: ltr; }
.stage-mobs { display: flex; justify-content: center; gap: clamp(24px, 6%, 72px); align-items: flex-end; width: 100%; }
.stage-mobs figure { min-width: 90px; }
.stage-mobs figure { margin: 0; display: grid; justify-items: center; gap: 3px; }
.stage-mobs img { height: 44px; width: auto; }
.stage-mobs .nametag { display: inline-block; }
.mob-blob { width: 34px; height: 26px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 35% 35%, #d6c4ff, #8f72c8); border: 2px solid #2a2230; }
.mob-n { font: 700 12px/1 var(--font); color: #ffd27a; direction: ltr; }
.stage-wait { color: #d8c8ee; font-size: 13px; }

/* the side column in the same letters as the rest: the setup notice a dusk panel, not pasted paper */
.app .steps-block { transform: none; background: linear-gradient(#4a3468, #36254f); color: #fff6fb; border: 2px solid #2a2230; border-radius: 12px; box-shadow: 0 3px 0 #2a2230; padding: var(--s4); }
.app .steps-block::before, .app .steps-block::after { display: none; }
.app .side h2, .app .side .steps-block h2 { font: 600 16px/1.2 var(--font); color: #fff6fb; }
.app .steps li { color: #bba9d4; font-family: var(--words); }
.app .steps li.now, .app .steps li.done { color: #fff6fb; }
.app .steps .hint { color: #e4d6f4; }
.app .steps .mark { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: #e4d6f4; font-family: var(--font); }
.app .steps li.now .mark { background: linear-gradient(#ffcf7a, #f39a3c); color: #2a2230; border-color: #2a2230; }
.app .log li, .app .log-empty { font-family: var(--words); }

@media (max-width: 900px), (max-height: 640px) {
  .app .page[data-page="session"] { display: flex; }
  .app .wins.sess { grid-template-columns: minmax(0, 1fr); }
  .app .pages { order: 9; flex: 1 0 100%; margin: 0; overflow-x: auto; }
}

/* ══ 29.10 b51-b54 ══ */
/* the red numbers readable (Ron: "it gets swallowed"): a loss sits on a dark red plate with light words, not salmon
   on salmon; the money row is three small tiles */
.app .ro.loss { background: #5a1f2e; border-color: #2a2230; }
.app .ro.loss .v { color: #ffd6cf; }
.app .ro.loss .k, .app .ro.loss .sub { color: #ffc4bb; }
.app .money { border-bottom: 0; }
.app .money > div { padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.1); }
.app .money b.r { color: #ffd6cf !important; }
.app .money > div:has(b.r) { background: #5a1f2e; border-color: rgba(255, 140, 120, 0.4); }
.app .money > div:has(b.r) .k { color: #ffc4bb; }
.app .earn-list .val.r, .app .stock .r { color: #ff9e92 !important; font-weight: 800; }
/* real icons in the lists */
.it-img { width: 26px; height: 26px; object-fit: contain; image-rendering: auto; flex: none; }
.app .earn-list li, .app .stock li { grid-template-columns: 28px minmax(0, 1fr) auto auto; }

/* the session: what you made, what you're killing, and the map's likeliest drops, three across */
.app .wins.sess { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.9fr); }
.drops.mini li { grid-template-columns: 28px minmax(0, 1fr) auto auto; padding: 4px 8px; }
.drops.mini .nm small { display: none; }
.drops li.empty { display: block; background: none; color: var(--faint); }
.more-link { align-self: flex-start; }
/* the drops page: all of them, in groups */
.drops .drop-group { display: block; background: none; padding: 8px 2px 0; }
.drops .drop-group h3 { font: 700 15px/1 var(--font); color: #ffd27a; margin: 0; }
.drops .drop-group small { color: var(--faint); font-weight: 600; margin-inline-start: 4px; }
.app .page[data-page="drops"] .drops { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.app .page[data-page="drops"] .drop-group, .app .page[data-page="drops"] .mob-group { grid-column: 1 / -1; }

/* compare: your runs and the spots side by side, the chart under them */
.app .page[data-page="compare"] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 220px; }
.app .page[data-page="compare"][hidden] { display: none; }
.app .page[data-page="compare"] > section[data-sec="chart"] { grid-column: 1 / -1; grid-row: 2; }
.app .page[data-page="compare"] > section[data-sec="runs"] { grid-row: 1; }
.app .page[data-page="compare"] > section[data-sec="spots"] { grid-row: 1; }
.app .page[data-page="compare"] .chart { min-height: 120px; }
/* sortable headers: click for highest first, again for lowest first */
.app .table th.sortable { cursor: pointer; user-select: none; }
.app .table th.sortable:hover { color: #fff; }
.app .table th.sortable.on { color: #ffd27a; }
.app .table th .arrow { font-size: 10px; margin-inline-start: 4px; }
@media (max-width: 1180px) { .app .wins.sess { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .app .wins.sess > [data-sec="dropsMini"] { grid-column: 1 / -1; } }
@media (max-width: 900px), (max-height: 640px) { .app .page[data-page="compare"] { display: flex; } .app .wins.sess { grid-template-columns: minmax(0, 1fr); } }

/* a window's parts never squeeze (in a short window the range switch was cut in half): the window scrolls instead */
.app section.win > * { flex-shrink: 0; }
.app .earn-range button { line-height: 1.2; }

/* scrollbars in the site's colours (one was the browser's green): a lavender thumb on a dark track */
.app, .app *, .settings-dlg, .settings-dlg * { scrollbar-color: #a98bd6 rgba(0, 0, 0, 0.28); scrollbar-width: thin; }

/* the drops page: any map, its order, the rarity under the chance and the worth a kill under the price */
#dropsMap { min-width: 220px; flex: 0 1 280px; }
.drops .pct, .drops .val { display: grid; justify-items: end; gap: 2px; }
.drops .pct small, .drops .val small { font: 600 11px/1 var(--words, sans-serif); color: var(--faint); white-space: nowrap; }
.drops .val small { color: #c9b0ff; }

/* Hebrew without mirroring the site (Ron, 29.10): the page stays laid out as in English; each piece of text takes its
   own direction from its first letter, so Hebrew lines read right to left inside the same windows, tabs and columns */
:root[lang="he"] :is(p, h1, h2, h3, li, label, summary, small, figcaption, th, td, button, .k, .sub, .nm, .fine, .bubble, .note, .eta, .say, .q-nm, .pn, .stage-sub, .stage-party, .where, .state) {
  unicode-bidi: plaintext;
}
/* an inventory item named and shown with its own icon: no slot-white behind it */
.app .loot .icon.named { background: none; object-fit: contain; }
.app .loot .est { font-style: normal; font-size: 11px; color: var(--faint); }

/* ══ 29.10 g63: the top card with room for everything (Ron: "crowded, things on top of each other, some stick out").
   It had a fixed height and the monsters on an absolute floor, so the number, the two lines and the facts ran over
   them when they didn't fit. Now everything stands in one column, the card as tall as what's in it, the monsters'
   row last; the number scales with the card's width (and the screen's height), and every line wraps inside ══ */
.app .hero .stage {
  container-type: inline-size; height: auto; min-height: 0; justify-content: flex-start; gap: 6px;
  padding: 12px 16px 8px;
}
.app .hero .stage::after { display: none; }
.app .stage-k { margin: 0; }
.app .dmg { margin: 2px 0 4px; font-size: clamp(34px, min(13cqw, 10vh), 92px); max-width: 100%; }
.app .stage-sub, .app .stage-party { margin: 0; max-width: 100%; text-align: center; white-space: normal; line-height: 1.35; }
.app .stage-sub:empty { display: none; }
.app .stage-party b { color: #ffd27a; font-weight: 700; }
.hero-facts { flex-wrap: wrap; justify-content: center; margin-top: 2px; max-width: 100%; }
.hero-facts span { min-width: 64px; }
.app .stage-floor { position: relative; inset: auto; bottom: auto; margin-top: auto; padding-top: 10px; width: 100%; }
/* the ground line under the monsters' feet (the row's pictures are 44px tall, under 10px of room) */
.app .stage-floor::before { content: ''; position: absolute; inset-inline: 4%; top: 54px; height: 2px; background: rgba(255, 255, 255, 0.18); }
.app .stage-floor:has(.stage-wait)::before { display: none; }
.stage-mobs { flex-wrap: wrap; gap: 4px clamp(10px, 5cqw, 64px); }
.stage-mobs figure { min-width: 0; }
.stage-mobs .nametag { max-width: 22cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a narrow card: Share stops floating over the title and takes its own line, top right */
@container (max-width: 520px) {
  .app .stage-share { position: static; align-self: flex-end; margin-bottom: -2px; }
  .hero-facts span { min-width: 56px; padding-inline: 8px; }
}

/* ══ 29.10 g64: Dark Lord is alive. He breathes (a slow bob from his feet), and every time he says something new he
   hops; a good word gets a happy double hop and a gold bubble edge, a bad one a short shake and a pink edge. With
   reduced motion everything stands still (the rule above) ══ */
.npc img { transform-origin: 50% 100%; animation: npc-breathe 3.4s ease-in-out infinite; }
@keyframes npc-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3px) scale(1.015, 0.985); } }
.npc.hop { animation: npc-hop 0.6s var(--ease); }
@keyframes npc-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px); } 55% { transform: translateY(0); } 72% { transform: translateY(-4px); } }
.guide[data-tone="good"] .npc.hop { animation: npc-joy 0.8s var(--ease); }
@keyframes npc-joy { 0%, 50%, 100% { transform: translateY(0); } 22% { transform: translateY(-16px) rotate(-4deg); } 72% { transform: translateY(-10px) rotate(4deg); } }
.guide[data-tone="bad"] .npc.hop { animation: npc-shake 0.5s var(--ease); }
@keyframes npc-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.bubble.say { animation: bubble-in 0.35s var(--ease); }
.app .guide[data-tone="good"] .bubble { box-shadow: 0 0 0 3px #ffcf7a, 0 6px 14px rgba(0, 0, 0, 0.45); }
.app .guide[data-tone="bad"] .bubble { box-shadow: 0 0 0 3px #ff8fb1, 0 6px 14px rgba(0, 0, 0, 0.45); }
/* the kills beside the name tag, not under it (one line less), and on a short screen the number and the monsters a
   little smaller, so the windows under the card keep their room */
.stage-mobs figure { grid-template-columns: auto auto; column-gap: 5px; align-items: center; }
.stage-mobs figure > :is(img, .mob-blob) { grid-column: 1 / -1; justify-self: center; }
.stage-mobs figure:not(:has(.mob-n)) .nametag { grid-column: 1 / -1; }
@media (max-height: 820px) {
  .app .dmg { font-size: clamp(32px, min(13cqw, 8vh), 92px); }
  .stage-mobs img { height: 36px; }
  .app .stage-floor::before { top: 46px; }
  .app .hero .stage { gap: 4px; padding-top: 8px; }
}
/* the top bar: when there's no room the map's name shortens with "…" instead of running under "Counting", and the
   level beside it goes first (it's in the bar at the bottom too) */
.app .where { overflow: hidden; flex: 0 1 auto; }
.app .where b { min-width: 3em; flex: 0 1 auto; }
.app .where small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1320px) { .app .where small { display: none; } }
@media (max-width: 1320px) { .app .where { min-width: 6em; } .app .state #stateText { display: none; } }

/* the meso coin and the item pictures at the game's own size and crisp (Ron, 29.10: the coin, stretched from 23px
   to 26 and smoothed, looked blurry) */
.it-img { image-rendering: pixelated; }
.it-img[src$="meso.png"] { width: 23px; height: 24px; justify-self: center; }
/* a potion running out (20 or fewer): its row in the quick slots red, blinking */
.app .stock li.low { background: #5a1f2e; border-radius: 8px; padding: 2px 6px; animation: low-blink 1s ease-in-out infinite; }
.app .stock li.low .ltr { color: #ffd6cf; }
@keyframes low-blink { 50% { background: #8a2a3e; } }

/* ══ 29.10: a past run opens looking like the session page (its top card, money and list, as they were when it
   ended), in a window over the site ══ */
.run-dlg {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 14px; overflow: auto;
  display: none; flex-direction: column; gap: 12px;
  color: var(--text); background: linear-gradient(#4a3468, #36254f); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.run-dlg[open] { display: flex; }
.run-dlg::backdrop { background: rgba(20, 12, 30, 0.6); }
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.run-head p { display: grid; gap: 2px; min-width: 0; }
.run-head b { font: 600 20px/1.2 var(--font); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-head small { font-size: 13px; color: #d8c8ee; }
.app .run-dlg .stage {
  container-type: inline-size; height: auto; min-height: 0; flex: none; justify-content: flex-start; gap: 6px; padding: 12px 16px 8px;
  border: 2px solid var(--ink); background: radial-gradient(ellipse at 50% 115%, rgba(255, 160, 110, 0.28), transparent 62%), linear-gradient(#3e2c62, #261a40);
}
.app .run-dlg .stage::after { display: none; }
.run-dlg .run-earn { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.app .open-run { padding: 0; text-align: start; color: inherit; font: inherit; text-decoration: underline dotted rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.app .open-run:hover { color: #ffd27a; }

/* ══ 29.10: Play / Pause / Stop by the clock in the top bar (Ron: like a player). Play blue, Stop red; while a run
   is stopping, "Run saved · Undo (4)" in their place ══ */
.player { display: inline-flex; gap: 4px; flex: none; }
.player:empty { display: none; }
.app .player .pl {
  height: 30px; min-width: 30px; padding: 0 8px; display: inline-grid; place-items: center; cursor: pointer;
  color: var(--ink); background: #f1e8ff; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 var(--ink);
  font: 700 13px/1 var(--font);
}
.app .player .pl:active { transform: translateY(2px); box-shadow: none; }
.app .player .pl .ic { width: 16px; height: 16px; }
.app .player .pl[data-pl="play"] .ic, .app .player .pl[data-pl="stop"] .ic { fill: currentColor; }
.app .player .pl.go { color: #fff; background: linear-gradient(#4a86f2, #2f68dc); }
.app .player .pl[data-pl="stop"] { color: #c2392a; }
.app .player .pl.off { opacity: 0.4; pointer-events: none; }
.app .player .pl.undo { color: #fff; background: linear-gradient(#ff9a8a, #e0574a); white-space: nowrap; }
.app .player .pl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ══ 30.10: a closed beta for a few friends: "Beta" by the name, in the top bar and on the landing ══ */
.beta {
  display: inline-block; vertical-align: middle; margin-inline-start: 6px; padding: 3px 8px 4px;
  font: 700 11px/1 var(--font, Fredoka, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: none;
  color: #fff; background: #ff7aa8; border: 2px solid #2a2230; border-radius: 999px; box-shadow: 0 2px 0 #2a2230;
}
.brand { display: inline-flex; align-items: center; }

/* the "name this map" prompt: the maps that fit, as buttons on their own line, one click names it */
.map-guesses { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.map-guesses[hidden] { display: none; }
.map-guesses .k { font-size: 13px; color: var(--muted); }
.map-guesses .btn { display: inline-grid; justify-items: start; gap: 1px; text-align: start; }
.map-guesses small { font: 600 11px/1 var(--words, sans-serif); opacity: 0.75; }
.app .name-map { flex-wrap: wrap; }
.name-map .map-guesses .btn { margin-inline-start: 0; }

/* ══════════ 31.10: a night scene behind the site (Ron: a whole game scene behind it, like ClassicRank's, but ours).
   The sky is CSS (stars, the moon, clouds drifting); Kerning's skyline dark against it; a ground at the bottom with
   the map's monsters walking on it; bats, pumpkins and graves around Halloween. The windows are game windows over the
   scene: dark blue and a little see-through, gold numbers, a purple top bar, pill tabs. ══════════ */
.app { --night-panel: rgba(16, 24, 58, 0.87); --night-edge: #0a0f28; --gold-n: #ffd76a; --ground-h: 26px; --mob-h: 38px; --hud-h: 58px; }
/* (Ron, 31.10 evening: "the old design, with the new additions": the sunset sky and plum windows of the floating
   window stay; only the scene's life is added on top. The night colours below are gone, stars and moon too) */
.app .world { overflow: hidden; }
.world .stars, .world .moon, .world .shooting { display: none; }
/* the stars: dots of a few sizes, tiled, the brighter ones twinkling */
.world .stars {
  position: absolute; inset: 0 0 30%;
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent), radial-gradient(1px 1px at 141px 87px, #dfe6ff, transparent),
    radial-gradient(1px 1px at 77px 153px, #fff, transparent), radial-gradient(1.5px 1.5px at 189px 19px, #fff, transparent),
    radial-gradient(1px 1px at 251px 131px, #cfd8ff, transparent), radial-gradient(1px 1px at 301px 61px, #fff, transparent);
  background-size: 320px 190px; opacity: 0.75;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}
.world .stars::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(2px 2px at 60px 70px, #fff, transparent), radial-gradient(2px 2px at 380px 30px, #fff6d0, transparent), radial-gradient(2px 2px at 530px 120px, #fff, transparent);
  background-size: 620px 240px; animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
/* the moon: pale with a soft halo, up in the side column's sky to the right of Dark Lord (his cloud in front of it), not
   behind a window where it would show through; at Halloween a warmer gold */
.world .moon {
  position: absolute; top: 140px; right: 14px; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffdf0, #f2e8c4 60%, #d9cc9e);
  box-shadow: 0 0 40px 10px rgba(255, 244, 200, 0.25), 0 0 120px 40px rgba(180, 190, 255, 0.12);
}
.world .moon::after { content: ''; position: absolute; inset: 22% 50% 50% 24%; border-radius: 50%; background: rgba(200, 188, 140, 0.35); box-shadow: 34px 30px 0 -4px rgba(200, 188, 140, 0.3), 12px 44px 0 -8px rgba(200, 188, 140, 0.28); }
.halloween .world .moon { background: radial-gradient(circle at 38% 36%, #fff3c4, #ffd27a 60%, #e8a84a); box-shadow: 0 0 50px 14px rgba(255, 200, 110, 0.3), 0 0 140px 50px rgba(255, 150, 80, 0.12); }
/* clouds: soft blue-grey puffs drifting across */
.world .cloud {
  position: absolute; width: 340px; height: 70px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 160, 215, 0.38), rgba(150, 160, 215, 0.12) 70%, transparent);
  animation: drift 160s linear infinite;
}
.world .cloud::before, .world .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.world .cloud::before { width: 55%; height: 120%; left: 15%; top: -45%; }
.world .cloud::after { width: 40%; height: 90%; right: 12%; top: -25%; }
.world .c1 { top: 14%; animation-delay: -30s; }
.world .c2 { top: 30%; scale: 0.7; animation-duration: 200s; animation-delay: -120s; opacity: 0.8; }
.world .c3 { top: 6%; scale: 0.55; animation-duration: 240s; animation-delay: -60s; opacity: 0.7; }
@keyframes drift { from { left: -360px; } to { left: 100%; } }
/* the phone and narrow windows */
@media (max-width: 900px), (max-height: 640px) {
  /* (the top bar wraps instead of making the page wider than the phone) */
  .app .top { flex-wrap: wrap; row-gap: 8px; }
  .app .top .bar-btn, .app .top .help-btn[popovertarget] { display: none; }
}

/* the top bar at any width (31.10, the night scene's check: between 800 and 1300 it ran off the right edge and the
   page scrolled sideways): below 1320 "Open overlay" and "Disconnect" are icons (their words in the tooltip) and the
   bar may wrap; below 1100 the page tabs take a line of their own */
@media (max-width: 1320px) {
  .app .top { flex-wrap: wrap; row-gap: 8px; }
  .app .top .bar-btn span, .app .top #connect.live span { display: none; }
  .app .top .bar-btn, .app .top #connect.live { padding-inline: 10px; }
}
@media (max-width: 1100px) {
  .app .pages { order: 9; flex: 1 0 100%; justify-content: center; margin: 0; }
}

/* ══ 31.10 (Ron: "just pretty to look at, eye-catching", no reacting to the game): the scene comes alive. The street
   drifts, a shooting star now and then, pixies and fairies flying across (wraiths at Halloween). It all stops while the
   tab is hidden (html.asleep) and for reduced motion (the rule near the top) ══ */
.asleep .world, .asleep .world *, .asleep .world::after { animation-play-state: paused !important; }
/* the street drifts, slowly */
.app .world::after { animation: none; }
/* a shooting star across the top every so often */
.world .shooting {
  position: absolute; top: 8%; left: 10%; width: 140px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 70%, #fffbe0); rotate: 18deg;
  animation: shoot 11s ease-in 3s infinite;
}
@keyframes shoot { 0%, 88% { opacity: 0; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(520px); } }

/* the session's lower windows never shrink to their title band (31.10: at 1024x768 "What you're killing" and "What
   can drop" were 28px tall with their rows hidden): at least room for three or four rows; when the window is too short
   for that, the page scrolls instead */
.app .page[data-page="session"] { grid-template-rows: auto auto minmax(190px, 1fr); }
.app .wins.sess > section.win { min-height: 190px; }

/* a wide screen (Ron, 31.10: "like ClassicRank"; mesos.watch the same): the site is a column in the middle, the calm
   sunset around it */
@media (min-width: 1500px) {
  .app { grid-template-columns: minmax(0, 1fr) minmax(0, 1040px) var(--side-w) minmax(0, 1fr); column-gap: 14px; }
  .app .board { grid-column: 2; }
  .app .side { grid-column: 3; }
}

/* the drops by monster (Ron, 31.10: "not by what but by mobs"): each monster's picture and name over its drops */
.drops .mob-group { display: flex; align-items: flex-end; gap: 8px; background: none; padding: 10px 2px 2px; }
.drops .mob-group:first-child { padding-top: 2px; }
.drops .mob-group img { height: 34px; width: auto; max-width: 54px; object-fit: contain; image-rendering: pixelated; }
.drops .mob-group h3 { font: 700 15px/1.2 var(--font); color: #ffd27a; margin: 0; }
.drops .mob-group small { color: var(--faint); font-weight: 600; font-size: 12px; padding-bottom: 1px; }

/* ══ 1.11 (Ron: "I'd like the characters and everything to be the site's background, not just like that", as on
   ClassicRank): Kerning's street is the background of the whole site, behind the windows, at the game's own size, along
   the bottom of the screen over the bar; its two ends show at the sides of the windows (the telephone and the posters at
   the left, the shop at the right), one picture each, no seam. On it, in those sides, a thief training on an Octopus and
   a mage and a pirate standing together, now and then a word in the game's chat bubble (src/scene.js). The top card is a
   plain window again, its numbers on its own dusk; the monsters you train on stand on its floor line. Earlier (31.10)
   the street was inside the top card: the numbers sat on the bricks ══ */
.world .kerning {
  position: absolute; bottom: var(--hud-h); width: 50%; height: 560px;
  background: url(img/kerning/hero-street.jpg) 0 calc(100% - 28px) / auto 520px no-repeat, linear-gradient(#6b4a3e, #3b2a2a) 0 100% / 100% 28px no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%);
}
.world .kerning.l { left: 0; }
.world .kerning.r { right: 0; background-position: 100% calc(100% - 28px), 0 100%; }
/* (the dark skyline is under the street now) */
.app .world::after { display: none; }
/* the street's people, on the same pavement line as the monsters' feet */
.street { position: absolute; inset: auto 0 calc(var(--hud-h) + 30px); height: 0; pointer-events: none; }
.street img { position: absolute; bottom: 0; image-rendering: pixelated; }
.street .thief { left: 40px; }
.street .octo { left: 118px; transition: opacity 0.8s; }
.street .octo.gone { opacity: 0; }
/* a small number in the game's orange, rising and fading */
.street .dmg {
  position: absolute; bottom: 66px; font: 400 20px/1 Sign, Impact, sans-serif; letter-spacing: -1px;
  background: linear-gradient(#ffe36a, #ff8a1c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #3a1600; filter: drop-shadow(0 1px 0 #3a1600); animation: dmg-up 1.3s ease-out forwards;
}
@keyframes dmg-up { 0% { translate: 0 6px; opacity: 0; } 15% { opacity: 1; } 100% { translate: 0 -24px; opacity: 0; } }
/* the two standing at the right, facing each other, and the game's own chat bubble */
.street .bench { position: absolute; bottom: -10px; right: 40px; display: flex; gap: 8px; align-items: flex-end; }
.street .sitter { position: relative; display: flex; justify-content: center; }
.street .sitter img { position: static; }
.street .sitter.mage img { scale: -1 1; }
.street .sitter i {
  position: absolute; bottom: calc(100% + 2px); white-space: nowrap; font: 500 12px/1.2 Fredoka, sans-serif; font-style: normal; color: #222;
  background: #fff; border: 1px solid #555; border-radius: 6px; padding: 3px 7px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.4s;
}
.street .mage i { right: -6px; }
.street .pirate i { right: 0; }
.street .sitter.talk i { opacity: 0.95; }
/* the people only where the windows leave them room at the sides (a narrower screen: the street alone) */
@media (max-width: 1759px) { .world .street { display: none; } }

/* the session page's rarest drops (Ron, 1.11: "the icons are too big", the names cut to "Garn..."): a small icon, the
   whole name over two lines if it must, "1 in N" and the chance beside it; no price column */
.drops.mini li { grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s2); padding: 4px 8px; }
.drops.mini .it-img { width: 20px; height: 20px; }
.drops.mini .nm b { white-space: normal; font-size: 13px; line-height: 1.2; }
.drops.mini .pct { font-size: 13px; }
.drops.mini .mob-group img { height: 28px; }

/* ══ 1.11, the account (src/account.js): Sign in in the top row a white button like its neighbours; once signed in,
   the player's name in a dark pill with a green dot (signed in, kept in the account), cut short when long. On the
   landing, Sign in an outlined pill beside the links, so it reads as a button and not one more anchor ══ */
.app .top .account-btn { background: #f1e8ff; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); white-space: nowrap; }
.app .top .account-btn.signed-in {
  display: inline-flex; align-items: center; gap: 7px; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(20, 12, 36, 0.55); color: #fff; border-color: rgba(255, 255, 255, 0.25); box-shadow: none;
}
.app .top .account-btn.signed-in::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4cd07d; box-shadow: 0 0 0 2px rgba(76, 208, 125, 0.25); }
.app .top .account-btn.signed-in:hover { background: rgba(20, 12, 36, 0.75); }
.l-nav a.l-signin { padding: 7px 16px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 999px; background: rgba(0, 0, 0, 0.25); text-shadow: none; }
.l-nav a.l-signin:hover { background: rgba(0, 0, 0, 0.45); text-decoration: none; }
.settings-dlg #accountDelete { color: #ff9f8f; }

/* ══ 1.11, the session page's lower windows twice as tall (Ron saw the before/after and said "do it": on a 900px high
   screen "What you made", "What you're killing" and "What can drop" showed two or three lines each). The top card in
   one row, EXP an hour at the left, the small numbers in the middle, the monsters at the right; the four totals a thin
   band, the number at the side of its name. A phone, or a short window, keeps the one-under-the-other layout ══ */
@media (min-width: 901px) and (min-height: 641px) {
  .app .hero .stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; row-gap: 2px; padding: 12px 20px; }
  .app .hero .stage > .stage-share { position: absolute; top: 8px; inset-inline-end: 8px; }
  .app .hero .stage > .stage-k { grid-column: 1; grid-row: 1; }
  .app .hero .stage > .dmg { grid-column: 1; grid-row: 2; font-size: 46px; margin: 0; }
  .app .hero .stage > .stage-sub { grid-column: 1; grid-row: 3; }
  .app .hero .stage > .stage-party { grid-column: 1 / -1; grid-row: 4; }
  .app .hero .stage > .hero-facts { grid-column: 2; grid-row: 1 / 4; align-self: center; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 6px; }
  .app .hero .stage > .stage-floor { grid-column: 3; grid-row: 1 / 4; width: auto; margin: 30px 0 0; padding-top: 0; }
  .app .hero .lvbox { padding-block: 12px; justify-content: center; }
  .app .strip .ro { padding: 8px 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
  .app .strip .ro .k { grid-column: 1; grid-row: 1; }
  .app .strip .ro .sub { grid-column: 1; grid-row: 2; margin: 0; }
  .app .strip .ro .v { grid-column: 2; grid-row: 1 / 3; font-size: 24px; margin: 0; text-align: end; }
}

/* ══ 1.11, the sign-in window (src/account.js askSignIn): Google or Discord, one under the other ══ */
.signin-dlg { width: min(400px, calc(100vw - 32px)); padding: 28px 24px 20px; background: #2e2042; color: var(--text); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink), 0 30px 80px rgba(0, 0, 0, 0.5); }
.signin-dlg::backdrop { background: rgba(20, 12, 30, 0.6); }
.signin-dlg h2 { margin: 0 0 8px; font-size: 22px; }
.signin-dlg .dlg-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.signin-ways { display: grid; gap: 10px; margin: 18px 0; }
.signin-ways .btn { justify-content: center; text-decoration: none; padding: 11px 16px; font-size: 15px; }
.signin-ways .signin-google { background: #fff; color: #1f1f1f; }
.signin-ways .signin-discord { background: #5865f2; color: #fff; border-color: #3c45a5; }
.signin-dlg .fine a { color: inherit; }

/* ══ 1.11, the sign-in window in the site's look: a game window like the others (the brick title band, the ink edge
   and hard shadow), the two ways as the site's buttons (Google white, Discord its own blue), the small print under a
   line, the demo apart at the bottom ══ */
.signin-dlg { padding: 0; overflow: hidden; background: var(--panel, #36254f); border-radius: 12px; box-shadow: 0 5px 0 var(--ink), 0 30px 80px rgba(0, 0, 0, 0.55); }
.signin-dlg h2 { margin: 0; padding: 12px 20px; background: var(--brick); color: #fff; border-bottom: 2px solid var(--ink); font: 600 20px/1.2 var(--font); text-shadow: 0 2px 0 #2a0f05; }
.signin-dlg .dlg-close { inset-block-start: 9px; inset-inline-end: 10px; padding: 4px 10px; border-radius: 8px; color: #fff; text-shadow: 0 1px 0 #2a0f05; }
.signin-dlg .dlg-close:hover { background: rgba(0, 0, 0, 0.25); }
.signin-dlg > p, .signin-dlg .signin-ways { margin-inline: 20px; }
.signin-dlg #signInWhy { margin-top: 16px; font-size: 14px; color: var(--text); }
.signin-ways { margin-block: 16px 18px; gap: 12px; }
.signin-ways .btn { border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--ink); font: 600 15px/1.2 var(--font); }
.signin-ways .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.signin-ways .signin-google { background: #fff; color: #1f1f1f; }
.signin-ways .signin-google:hover { background: #f1e8ff; }
.signin-ways .signin-discord { background: #5865f2; border-color: var(--ink); }
.signin-ways .signin-discord:hover { background: #4752c4; }
.signin-dlg > p.fine:not(#signInWhy) { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.signin-dlg .signin-demo { margin-bottom: 0; padding: 12px 20px 16px; margin-inline: 0; background: rgba(0, 0, 0, 0.18); }
.signin-dlg .signin-demo a { color: #ffd27a; font-weight: 600; }