/* ROB chrome: design tokens + components. Direction: docs/UI_DIRECTION.md
   Pixel art stays in the canvas; everything here is the chunky, colorful, readable UI around it. */

@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Jersey+25&family=Press+Start+2P&display=swap');

:root {
  /* Titan One ships one weight: never fake-bold it (the smear made a white fringe on buttons) */
  /* ink + materials */
  --ink: #1b1410;
  --ink-2: #2a201a;
  --gold: #f3c440;
  --gold-hi: #ffd866;
  --gold-lo: #b8861d;
  --red: #e5443a;
  --red-hi: #ff7a6e;
  --red-lo: #9a2a22;
  --green: #6bd46b;
  --green-lo: #3f9a3f;
  --blue: #5ad1ff;
  --blue-lo: #2a8fc0;
  --purple: #b07cff;
  --purple-lo: #7a4fc0;
  --parch: #f1e3bf;
  --parch-lo: #e2cf9f;
  --parch-line: rgba(107, 63, 34, 0.10);
  --wood: #6b3f22;
  --wood-hi: #8b5a2b;
  --wood-lo: #4a2a14;
  --sky-1: #1a0f3a;
  --sky-2: #2b1d5c;
  --sky-3: #4a2d7a;
  --horizon: #c86a5a;
  --water: #0f1230;
  --warm: #ffb347;
  --hud-bg: rgba(20, 16, 40, 0.72);
  --panel-dark: rgba(28, 22, 48, 0.92);
  /* tiers */
  --tier-tent: #b8b8c8;
  --tier-hut: #6bd46b;
  --tier-cottage: #5ad1ff;
  --tier-manor: #b07cff;
  --tier-castle: #f3c440;
  /* type */
  --font-ui: 'Jersey 25', 'Trebuchet MS', sans-serif;
  --font-num: 'Titan One', 'Jersey 25', sans-serif;
  --font-btn: 'Titan One', 'Jersey 25', sans-serif;
  /* number boxes: base and floor sizes the fit-to-width step-down uses (JS reads these) */
  --fs-giant: 52px; --fs-giant-min: 22px;
  --fs-giant-side: 40px;
  --fs-pill-num: 18px; --fs-pill-num-min: 11px;
  --fs-chip-n: 14px; --fs-chip-n-min: 10px;
  --fs-amt: 17px; --fs-amt-min: 11px;
  --num-stroke: 4px;
  --font-stamp: 'Press Start 2P', monospace;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-h: 24px;
  --fs-h-big: 30px;
  /* motion */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 320ms;
  /* outlined display text: a real stroke painted under the fill (paint-order), plus an ink drop */
  --outline: 0 0 0 transparent;
  --outline-drop: 0 3px 0 var(--ink);
}

/* ------------------------------------------------------------------ base */
.ui, .ui * { box-sizing: border-box; }
.ui {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.ui .pixel, .ui .spr, .ui canvas.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.ui button { font: inherit; cursor: pointer; }
.ui h1, .ui h2, .ui h3 { margin: 0; font-weight: 700; }
.ui .muted { opacity: 0.72; }
.ui .small { font-size: var(--fs-small); }

/* outlined display text: white fill, ink outline, ink drop */
.ui .outlined, .ui .btn, .ui .ribbon, .ui .bignum .val, .ui .bignums .x, .ui .badge .t, .ui .float-num,
.ui .result .stamp-title, .ui .result .loot-val, .ui .kit-stamp {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.ui .btn.parch, .ui .btn.parch *, .ui .btn .sub { -webkit-text-stroke: 0; }
.ui .outlined {
  color: #fff;
  font-weight: 700;
  text-shadow: var(--outline-drop);
  letter-spacing: 0.5px;
}
.ui .outlined.gold { color: var(--gold); }
.ui .outlined.red { color: var(--red-hi); }
.ui .stamp {
  font-family: var(--font-stamp);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ------------------------------------------------------------------ sprites from the atlas (3x)
   sizes + positions are injected at runtime from atlas.json by ui-sprites.js */
.ui .spr {
  display: inline-block;
  background-image: url('assets/sprites_day.png');
  background-repeat: no-repeat;
  flex: none;
}
.ui .spr.night { background-image: url('assets/sprites_night.png'); }

/* ------------------------------------------------------------------ pixel icons (inline svg, 8x8 grid) */
.ui .ico {
  width: 24px;
  height: 24px;
  flex: none;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
}
.ui .ico.lg { width: 32px; height: 32px; }

/* ------------------------------------------------------------------ HUD pill */
.ui .pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 16px 4px 8px;
  border-radius: 999px;
  background: var(--hud-bg);
  border: 2px solid var(--gold);
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out);
}
.ui .pill .label { font-weight: 500; font-size: var(--fs-small); opacity: 0.8; margin-right: 2px; }
.ui .pill .num { font-size: 18px; color: var(--gold-hi); }
.ui .pill.bump { animation: pill-bump var(--t-slow) var(--ease-out-back); }
@keyframes pill-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ui .pill.icon-only { padding: 4px 8px; }
.ui .pill.avatar { padding-left: 4px; }
.ui .pill .ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--gold); background: radial-gradient(var(--sky-3), var(--sky-1));
  display: grid; place-items: center; overflow: hidden;
}
.ui .pill .ring { position: relative; }
.ui .pill .ring .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ui .pill .caret { font-size: 13px; opacity: 0.7; }
.ui .pill.live .num::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px; margin-left: 8px; vertical-align: 2px;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--ink);
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* ------------------------------------------------------------------ 3D bevel buttons */
.ui .btn {
  --face: var(--gold);
  --hi: var(--gold-hi);
  --lo: var(--gold-lo);
  --lift: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 28px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--face);
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: var(--outline-drop);
  box-shadow:
    inset 0 5px 0 var(--hi),
    inset 0 -7px 0 var(--lo),
    0 6px 0 var(--ink),
    0 12px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(var(--lift));
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast);
  user-select: none;
  overflow: hidden;
}
.ui .btn:hover {
  --lift: -2px;
  box-shadow:
    inset 0 5px 0 var(--hi),
    inset 0 -7px 0 var(--lo),
    0 8px 0 var(--ink),
    0 16px 22px rgba(0, 0, 0, 0.35);
  filter: brightness(1.06);
}
.ui .btn:active, .ui .btn.pressed {
  --lift: 3px;
  box-shadow:
    inset 0 3px 0 var(--hi),
    inset 0 -4px 0 var(--lo),
    0 3px 0 var(--ink),
    0 6px 10px rgba(0, 0, 0, 0.3);
}
.ui .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.ui .btn.flash::after { animation: btn-flash 160ms steps(2, end); }
@keyframes btn-flash { 0% { opacity: 0.9; } 50% { opacity: 0.9; } 100% { opacity: 0; } }
.ui .btn.red { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); }
.ui .btn.green { --face: var(--green); --hi: #9df09d; --lo: var(--green-lo); }
.ui .btn.blue { --face: var(--blue); --hi: #a8e8ff; --lo: var(--blue-lo); }
.ui .btn.parch {
  --face: var(--parch); --hi: #fff6dc; --lo: var(--parch-lo);
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ui .btn.big { min-height: 72px; font-size: 32px; padding: 12px 40px 18px; border-radius: 20px; }
.ui .btn.small { min-height: 40px; font-size: 16px; padding: 6px 16px 9px; border-radius: 12px; border-width: 2px;
  box-shadow: inset 0 3px 0 var(--hi), inset 0 -4px 0 var(--lo), 0 4px 0 var(--ink), 0 8px 12px rgba(0, 0, 0, 0.3); }
.ui .btn.small:hover { box-shadow: inset 0 3px 0 var(--hi), inset 0 -4px 0 var(--lo), 0 6px 0 var(--ink), 0 10px 14px rgba(0, 0, 0, 0.3); }
.ui .btn.small:active { box-shadow: inset 0 2px 0 var(--hi), inset 0 -2px 0 var(--lo), 0 2px 0 var(--ink); }
.ui .btn { flex-wrap: wrap; }
.ui .btn .sub { display: block; flex-basis: 100%; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: 0.9; margin-top: 2px; font-weight: 500; }
.ui .btn[disabled] { filter: saturate(0.3) brightness(0.8); cursor: not-allowed; --lift: 2px; box-shadow: inset 0 3px 0 var(--hi), inset 0 -4px 0 var(--lo), 0 3px 0 var(--ink); }
.ui .btn.pulse { animation: btn-pulse 1.6s var(--ease-out) infinite; }
@keyframes btn-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }

/* ------------------------------------------------------------------ ribbon banner */
.ui .ribbon {
  position: relative;
  display: inline-block;
  margin: 0 28px;
  padding: 10px 30px 14px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-h-big);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: var(--outline-drop);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 4px 0 var(--red-hi), inset 0 -5px 0 var(--red-lo);
  z-index: 1;
}
.ui .ribbon::before, .ui .ribbon::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 24px 16px;
  z-index: -1;
}
.ui .ribbon::before { left: -30px; border-color: var(--red-lo) var(--red-lo) var(--red-lo) transparent; }
.ui .ribbon::after { right: -30px; border-color: var(--red-lo) transparent var(--red-lo) var(--red-lo); }
.ui .ribbon.gold { background: var(--gold); box-shadow: inset 0 4px 0 var(--gold-hi), inset 0 -5px 0 var(--gold-lo); }
.ui .ribbon.gold::before { border-color: var(--gold-lo) var(--gold-lo) var(--gold-lo) transparent; }
.ui .ribbon.gold::after { border-color: var(--gold-lo) transparent var(--gold-lo) var(--gold-lo); }
.ui .ribbon.blue { background: var(--blue); box-shadow: inset 0 4px 0 #a8e8ff, inset 0 -5px 0 var(--blue-lo); }
.ui .ribbon.blue::before { border-color: var(--blue-lo) var(--blue-lo) var(--blue-lo) transparent; }
.ui .ribbon.blue::after { border-color: var(--blue-lo) transparent var(--blue-lo) var(--blue-lo); }
.ui .ribbon.sm { font-size: 20px; padding: 7px 22px 10px; margin: 0 20px; }
.ui .ribbon.sm::before, .ui .ribbon.sm::after { border-width: 18px 12px; top: 6px; }
.ui .ribbon.sm::before { left: -22px; }
.ui .ribbon.sm::after { right: -22px; }

/* ------------------------------------------------------------------ wood + parchment panel */
.ui .panel {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px),
    var(--parch);
  border: 6px solid var(--wood);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 4px var(--wood-hi),
    inset 0 0 0 5px var(--wood-lo),
    0 6px 0 var(--ink),
    0 14px 24px rgba(0, 0, 0, 0.45);
  padding: 22px 24px 24px;
  color: var(--ink);
}
.ui .panel > .ribbon, .ui .panel > .ribbon-wrap {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
}
.ui .panel.has-ribbon { padding-top: 36px; margin-top: 26px; }
.ui .panel .panel-title { font-size: var(--fs-h); font-weight: 700; margin-bottom: 10px; }
.ui .panel p { margin: 0 0 10px; }
.ui .panel .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ui .panel .divider { height: 3px; background: var(--wood-hi); opacity: 0.5; margin: 14px 0; border-radius: 2px; }
.ui .panel .kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 2px dotted rgba(107, 63, 34, 0.35); }
.ui .panel .kv:last-child { border-bottom: 0; }
.ui .panel .kv b { font-weight: 700; }
/* dark variant (Balatro): */
.ui .panel.dark {
  background: var(--panel-dark);
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 6px 0 var(--ink), 0 14px 24px rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 14px;
}
.ui .panel.dark .kv { border-bottom-color: rgba(255, 255, 255, 0.2); }
.ui .panel.dark .divider { background: rgba(255, 255, 255, 0.2); }
.ui .panel .close {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--red);
  color: #fff; font-weight: 700; font-size: 20px; line-height: 1;
  box-shadow: inset 0 3px 0 var(--red-hi), inset 0 -3px 0 var(--red-lo), 0 3px 0 var(--ink);
  text-shadow: var(--outline);
}
.ui .panel .close:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--red-hi), inset 0 -2px 0 var(--red-lo), 0 1px 0 var(--ink); }

/* enter animation: slide + 6% overshoot */
.ui .enter-up { animation: enter-up var(--t-slow) var(--ease-out-back) both; }
@keyframes enter-up { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
.ui .enter-right { animation: enter-right var(--t-slow) var(--ease-out-back) both; }
@keyframes enter-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.ui .leave-down { animation: leave-down var(--t-mid) var(--ease-in) both; }
@keyframes leave-down { to { opacity: 0; transform: translateY(24px) scale(0.98); } }

/* ------------------------------------------------------------------ tier starburst badge */
.ui .badge {
  --c: var(--tier-tent);
  --c-lo: #7f7f92;
  position: relative;
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  flex: none;
  filter: drop-shadow(0 3px 0 var(--ink));
  transition: transform var(--t-mid) var(--ease-out-back);
}
.ui .badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui .badge svg .star { fill: var(--c); stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; }
.ui .badge svg .star-in { fill: var(--c-lo); opacity: 0.55; }
.ui .badge .t { position: relative; color: #fff; font-weight: 700; font-size: 18px; text-shadow: var(--outline); line-height: 1; }
.ui .badge:hover { transform: scale(1.12) rotate(-6deg); }
.ui .badge.tent { --c: var(--tier-tent); --c-lo: #8c8ca0; }
.ui .badge.hut { --c: var(--tier-hut); --c-lo: var(--green-lo); }
.ui .badge.cottage { --c: var(--tier-cottage); --c-lo: var(--blue-lo); }
.ui .badge.manor { --c: var(--tier-manor); --c-lo: var(--purple-lo); }
.ui .badge.castle { --c: var(--tier-castle); --c-lo: var(--gold-lo); }
.ui .badge.lg { width: 72px; height: 72px; }
.ui .badge.lg .t { font-size: 26px; }
.ui .badge.pop { animation: badge-pop var(--t-slow) var(--ease-out-back); }
@keyframes badge-pop { 0% { transform: scale(0.4) rotate(-30deg); } 100% { transform: none; } }

/* label chip floating above a building (hover) */
.ui .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 6px;
  background: var(--hud-bg);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  color: #fff; font-weight: 700; font-size: var(--fs-small);
  box-shadow: 0 3px 0 var(--ink);
  white-space: nowrap;
}
.ui .chip .dot { width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.ui .chip .sep { opacity: 0.4; }
.ui .chip.gold { border-color: var(--gold); }

/* ------------------------------------------------------------------ gold-ring portrait + name pill */
.ui .portrait {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
}
.ui .portrait .ring {
  position: relative;
  width: 156px; height: 156px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--sky-3), var(--sky-1) 75%);
  border: 7px solid var(--gold);
  box-shadow:
    inset 0 0 0 4px var(--gold-lo),
    inset 0 0 0 6px rgba(0, 0, 0, 0.35),
    0 0 0 3px var(--ink),
    0 7px 0 var(--ink),
    0 14px 20px rgba(0, 0, 0, 0.45);
  display: grid; place-items: center;
  overflow: hidden;
}
.ui .portrait .ring::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(transparent, rgba(255, 179, 71, 0.35));
}
.ui .portrait .ring .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ui .portrait .badge { position: absolute; right: -6px; top: -6px; z-index: 2; }
.ui .portrait .ringwrap { position: relative; }
.ui .nameplate {
  margin-top: -14px;
  position: relative; z-index: 1;
  padding: 8px 18px 9px;
  background: var(--parch);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 var(--parch-lo), 0 4px 0 var(--ink);
  color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1;
  white-space: nowrap;
}
.ui .nameplate .sub { display: block; font-size: var(--fs-small); font-weight: 500; opacity: 0.7; margin-top: 3px; text-align: center; }
.ui .portrait.sm .ring { width: 72px; height: 72px; border-width: 4px; background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); }
.ui .portrait.sm .nameplate { margin-top: -10px; padding: 5px 12px 6px; font-size: 14px; }

/* ------------------------------------------------------------------ giant Balatro numbers */
.ui .bignums { display: inline-flex; align-items: stretch; gap: 10px; }
.ui .bignum {
  --c: var(--blue); --c-lo: var(--blue-lo); --c-hi: #a8e8ff;
  position: relative;
  min-width: 160px;
  padding: 10px 22px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--c);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 4px 0 var(--c-hi), inset 0 -7px 0 var(--c-lo), 0 6px 0 var(--ink), 0 12px 18px rgba(0, 0, 0, 0.35);
}
.ui .bignum .lbl { font-size: var(--fs-small); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.95; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.ui .bignum .val { font-size: 56px; font-weight: 400; line-height: 1; text-shadow: var(--outline-drop); display: inline-block; font-synthesis: none; }
.ui .bignum .unit { font-size: 22px; vertical-align: 14px; margin-left: 2px; }
.ui .bignum.gold { --c: var(--gold); --c-lo: var(--gold-lo); --c-hi: var(--gold-hi); }
.ui .bignum.red { --c: var(--red); --c-lo: var(--red-lo); --c-hi: var(--red-hi); }
.ui .bignum.green { --c: var(--green); --c-lo: var(--green-lo); --c-hi: #9df09d; }
.ui .bignums .x { align-self: center; font-size: 36px; font-weight: 400; color: #fff; text-shadow: var(--outline-drop); }
.ui .bignum .val.pop { animation: num-pop var(--t-slow) var(--ease-out-back); }
@keyframes num-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.ui .bignum .val.wobble { animation: wobble 420ms var(--ease-out); }
@keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(1.08); } 55% { transform: rotate(4deg) scale(1.04); } 100% { transform: none; } }
/* float-up "+10" */
.ui .float-num {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  color: #fff; font-weight: 700; font-size: 26px; text-shadow: var(--outline-drop);
  pointer-events: none;
  animation: float-up 900ms var(--ease-out) both;
}
.ui .float-num.gold { color: var(--gold); }
.ui .float-num.red { color: var(--red-hi); }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }

/* ------------------------------------------------------------------ result card + sunburst */
.ui .result-wrap { position: relative; display: inline-grid; place-items: center; padding: 40px 30px; isolation: isolate; }
.ui .sunburst {
  position: absolute; inset: 50% auto auto 50%;
  width: 640px; height: 640px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 102, 0.28) 0deg 10deg, rgba(255, 216, 102, 0) 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%);
  mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: spin 24s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.ui .sunburst.red { background: repeating-conic-gradient(from 0deg, rgba(229, 68, 58, 0.28) 0deg 10deg, rgba(229, 68, 58, 0) 10deg 20deg); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ui .result {
  position: relative;
  width: 360px; max-width: 100%;
  padding: 26px 22px 22px;
  text-align: center;
}
.ui .result .stamp-title {
  font-family: var(--font-stamp);
  font-size: 28px;
  color: var(--gold);
  text-shadow: var(--outline-drop);
  letter-spacing: 2px;
  margin: 4px 0 14px;
}
.ui .result .loot-val { font-size: 54px; font-weight: 400; color: #fff; text-shadow: var(--outline-drop); line-height: 1; display: inline-block; font-synthesis: none; }
.ui .result .loot-val .unit { font-size: 22px; vertical-align: 14px; }
.ui .result .from { margin: 8px 0 14px; font-size: var(--fs-body); opacity: 0.9; }
.ui .result .from b { color: var(--gold-hi); }
.ui .result .taunt {
  margin: 0 auto 18px;
  padding: 10px 14px 12px;
  background: var(--parch);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-weight: 500; font-size: var(--fs-body); font-style: italic;
  box-shadow: inset 0 -3px 0 var(--parch-lo);
}
.ui .result .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ui .result.drop { animation: card-drop 420ms var(--ease-out-back) both; }
@keyframes card-drop { 0% { opacity: 0; transform: translateY(-80px) scale(0.9); } 100% { opacity: 1; transform: none; } }
/* CAUGHT stamp: slams on, scale 3 -> 1, rotate -8deg */
.ui .caught {
  position: absolute;
  left: 50%; top: 46%;
  padding: 12px 18px 14px;
  border: 6px solid var(--red);
  border-radius: 10px;
  color: var(--red);
  font-family: var(--font-stamp);
  font-size: 30px;
  letter-spacing: 3px;
  background: rgba(241, 227, 191, 0.08);
  text-shadow: 0 0 0 var(--red);
  box-shadow: inset 0 0 0 3px rgba(229, 68, 58, 0.35);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
}
.ui .caught.slam { animation: slam 380ms var(--ease-in) both; }
@keyframes slam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(3); }
  70% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
.ui .shake { animation: shake 200ms steps(6) both; }
@keyframes shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } 100% { transform: none; } }

/* ------------------------------------------------------------------ crew on the road */
.ui .road-wrap { width: 420px; max-width: 100%; }
.ui .road-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 2px 0 var(--ink); }
.ui .road-label .timer { font-size: 22px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ui .road {
  --p: 0%;
  position: relative;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background:
    linear-gradient(#5b4330, #4a3524);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.35), 0 4px 0 var(--ink);
  overflow: visible;
}
.ui .road::before {
  /* the dashed line down the middle of the road */
  content: '';
  position: absolute; left: 10px; right: 10px; top: 50%; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--parch-lo) 0 12px, transparent 12px 24px);
  opacity: 0.7;
}
.ui .road .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p);
  border-radius: 9px 0 0 9px;
  background: linear-gradient(#8a6a44, #6f5236);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12);
  transition: width 1s linear;
}
.ui .road .house { position: absolute; right: 6px; bottom: 6px; width: 60px; height: 60px; }
.ui .road .house .spr { position: absolute; right: 0; bottom: 0; transform-origin: bottom right; }
.ui .road .walker {
  position: absolute; bottom: 6px;
  left: var(--p);
  transform: translateX(-50%);
  transition: left 1s linear;
}
.ui .road .walker .spr { display: block; }
.ui .road .walker .dust {
  position: absolute; left: -10px; bottom: 0; width: 6px; height: 6px;
  background: var(--parch-lo); opacity: 0;
  animation: dust 0.7s ease-out infinite;
}
@keyframes dust { 0% { opacity: 0.8; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-14px, -6px) scale(0.4); } }

/* ------------------------------------------------------------------ toast: pixel speech bubble */
.ui .toast {
  position: relative;
  display: inline-block;
  max-width: 360px;
  padding: 12px 16px 14px;
  background: var(--parch);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--ink), inset 0 -3px 0 var(--parch-lo);
  font-weight: 500; font-size: var(--fs-body);
  animation: toast-in var(--t-slow) var(--ease-out-back) both;
}
.ui .toast b { font-weight: 700; }
.ui .toast::after {
  /* stepped pixel tail */
  content: '';
  position: absolute; left: 22px; bottom: -15px; width: 6px; height: 6px;
  background: var(--parch);
  box-shadow:
    0 0 0 3px var(--ink),
    6px -6px 0 0 var(--parch), 6px -6px 0 3px var(--ink),
    12px -12px 0 0 var(--parch);
  clip-path: inset(-6px -6px -6px -6px);
}
.ui .toast::before {
  content: '';
  position: absolute; left: 19px; bottom: -8px; width: 24px; height: 8px;
  background: var(--parch);
}
.ui .toast.good { border-color: var(--green-lo); box-shadow: 6px 6px 0 var(--green-lo), inset 0 -3px 0 var(--parch-lo); }
.ui .toast.bad { border-color: var(--red-lo); box-shadow: 6px 6px 0 var(--red-lo), inset 0 -3px 0 var(--parch-lo); }
.ui .toast .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.9); } to { opacity: 1; transform: none; } }
.ui .toast.out { animation: toast-out var(--t-mid) var(--ease-in) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.95); } }
.ui .toasts { position: fixed; left: 16px; bottom: 90px; display: grid; gap: 22px; z-index: 60; pointer-events: none; }

/* ------------------------------------------------------------------ bottom sheet (phone) */
.ui .sheet-scrim {
  position: fixed; inset: 0; background: rgba(10, 6, 24, 0.55);
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid);
  z-index: 70;
}
.ui .sheet {
  position: fixed; left: 50%; bottom: 0;
  width: min(100%, 520px);
  max-height: 86vh;
  transform: translate(-50%, 110%);
  transition: transform var(--t-slow) var(--ease-out-back);
  z-index: 71;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px),
    var(--parch);
  border: 6px solid var(--wood);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: inset 0 0 0 4px var(--wood-hi), 0 -8px 24px rgba(0, 0, 0, 0.5);
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  color: var(--ink);
  overflow: auto;
}
.ui .sheet .grab { width: 56px; height: 8px; margin: 0 auto 14px; border-radius: 4px; background: var(--wood-hi); box-shadow: 0 2px 0 var(--wood-lo); }
.ui .sheet.open { transform: translate(-50%, 0); }
.ui .sheet-scrim.open { opacity: 1; pointer-events: auto; }
.ui .sheet .ribbon-wrap { text-align: center; margin: -36px 0 10px; }

/* ------------------------------------------------------------------ Sheriff's Board drawer */
.ui .drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: min(72vh, 620px);
  transform: translateY(calc(100% - 0px));
  transition: transform var(--t-slow) var(--ease-out-back);
  z-index: 50;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--wood);
  border-top: 6px solid var(--wood-hi);
  box-shadow: 0 -8px 0 var(--ink), 0 -16px 30px rgba(0, 0, 0, 0.5);
}
.ui .drawer.open { transform: translateY(0); }
.ui .drawer.open .tab-handle { display: inline-flex; }
.ui .drawer .tab-handle {
  position: absolute; left: 50%; top: -58px; transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px 24px 14px;
  background: var(--wood);
  border: 4px solid var(--wood-hi); border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -5px 0 var(--ink);
  color: var(--parch); font-weight: 700; font-size: 18px; text-shadow: 0 2px 0 var(--ink);
  display: none; align-items: center; gap: 10px;
  cursor: pointer;
}
.ui .drawer .tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
.ui .drawer .tab {
  flex: 1 1 0;
  padding: 10px 12px 12px;
  border: 3px solid var(--ink); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--wood-lo);
  color: var(--parch-lo); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 2px 0 var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ui .drawer .tab.active { background: var(--parch); color: var(--ink); text-shadow: none; box-shadow: inset 0 4px 0 #fff6dc; }
.ui .drawer .body {
  color: var(--ink);
  margin: 0 14px 14px;
  background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch);
  border: 3px solid var(--ink);
  border-radius: 0 12px 12px 12px;
  overflow: auto;
  padding: 14px;
}
.ui .list-row {
  display: grid; grid-template-columns: 36px 64px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
}
.ui .list-row:nth-child(odd) { background: rgba(107, 63, 34, 0.08); }
.ui .list-row .rank { font-weight: 700; font-size: 20px; color: var(--wood); text-align: center; }
.ui .list-row .rank.top { color: var(--gold-lo); }
.ui .list-row .name { font-weight: 700; font-size: 16px; }
.ui .list-row .meta { font-size: var(--fs-small); opacity: 0.7; }
.ui .list-row .amt { font-weight: 700; font-size: 18px; color: var(--red); white-space: nowrap; }
.ui .list-row .amt.good { color: var(--green-lo); }
.ui .skel { background: linear-gradient(90deg, rgba(107, 63, 34, 0.12) 25%, rgba(107, 63, 34, 0.25) 50%, rgba(107, 63, 34, 0.12) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; height: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.ui .mini-ring { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--gold); background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); display: grid; place-items: center; overflow: hidden; }
.ui .mini-ring { position: relative; }
.ui .mini-ring .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ------------------------------------------------------------------ bottom toolbar (Monopoly GO) */
.ui .toolbar {
  display: inline-flex; gap: 6px; padding: 6px;
  background: var(--hud-bg); border: 2px solid var(--gold); border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
}
.ui .toolbar .tool {
  width: 56px; height: 52px; border-radius: 12px; border: 2px solid transparent;
  background: transparent; display: grid; place-items: center; color: #fff;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.ui .toolbar .tool:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.ui .toolbar .tool.active { background: rgba(243, 196, 64, 0.2); border-color: var(--gold); }
.ui .toolbar .tool .ico { width: 28px; height: 28px; }
.ui .toolbar .tool .dotn {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--red); border: 2px solid var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 16px;
}
.ui .toolbar .tool { position: relative; }
.ui .toolbar .tool.lit { animation: tool-lit 1.2s ease-in-out 3; } @keyframes tool-lit { 0%, 100% { box-shadow: none; transform: none; } 50% { box-shadow: 0 0 0 3px #ffd54a, 0 0 18px 6px rgba(255, 213, 74, 0.55); transform: translateY(-2px); } } /* the poster wall glows after the tutorial raid: that is where the poster went (owner 10-21) */

/* ------------------------------------------------------------------ inputs */
.ui .field { display: grid; gap: 6px; min-width: 0; }
.ui .field label { font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.ui .input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #fff8e6;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.08);
  font-weight: 700; font-size: 20px; color: var(--ink);
}
.ui .input input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
.ui .input .unit { font-size: 14px; opacity: 0.6; }
.ui .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 7px; background: var(--wood-lo); border: 3px solid var(--ink); outline: none; }
.ui .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-lo), 0 3px 0 var(--ink); cursor: grab; }
.ui .seg { display: inline-flex; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--wood-lo); }
.ui .seg button { padding: 8px 14px 9px; border: 0; background: transparent; color: var(--parch-lo); font-weight: 700; font-size: 15px; }
.ui .seg button.active { background: var(--gold); color: var(--ink); box-shadow: inset 0 3px 0 var(--gold-hi); } .ui .seg button small { display: block; font-size: 11px; font-weight: 400; line-height: 1; margin-top: 3px; opacity: .8; } /* the wallet's balance under each asset (owner 10-22) */

/* ------------------------------------------------------------------ phone */
@media (max-width: 600px) {
  .ui .bignum { min-width: 130px; padding: 8px 14px 12px; }
  .ui .bignum .val { font-size: 44px; }
  .ui .btn.big { min-height: 64px; font-size: 26px; padding: 10px 24px 14px; }
  .ui .ribbon { font-size: 22px; padding: 8px 20px 11px; margin: 0 22px; }
  .ui .ribbon::before, .ui .ribbon::after { border-width: 20px 12px; top: 6px; }
  .ui .ribbon::before { left: -24px; }
  .ui .ribbon::after { right: -24px; }
  .ui .result { width: 100%; }
  .ui .portrait .ring { width: 124px; height: 124px; }
  .ui .drawer { height: 78vh; }
  .ui .drawer .tab-handle { white-space: nowrap; font-size: 16px; top: -52px; padding: 8px 18px 12px; }
  .ui .drawer .tab { font-size: 13px; letter-spacing: 0; padding: 10px 6px 12px; white-space: nowrap; gap: 5px; }
  .ui .drawer .tab .ico { display: none; }
}
.ui.still *, .ui.still *::before, .ui.still *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .ui *, .ui *::before, .ui *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ================================================================== app layout (index.html) */
html, body { margin: 0; height: 100%; overscroll-behavior-x: none; } /* a two-finger horizontal scroll over the chrome must drag the street, never go back in history and reload */
body.ui.app { background: var(--sky-1); overflow: hidden; color: #fff; }
#app { position: fixed; inset: 0; }
/* nothing on the street or in the chrome is selectable text (accidental clicks turned words blue); typing fields keep selection */
body.ui, #app, #app canvas, .ui .tut-stamp, .ui .tut-rank, .ui .tut-progress, .ui .tut-bubble, .ui .tut-hand, .ui .chip, .ui .ticker, .ui .hud-top, .ui .hud-bottom, .ui .panel, .ui .sheet, .ui .dialog, .ui .poster { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui input, .ui textarea, .ui [contenteditable] { -webkit-user-select: text; user-select: text; }
#app > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.ui .hud { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px; pointer-events: none; z-index: 20; }
.ui .hud > * { pointer-events: auto; }
.ui .hud-top { top: 0; padding-top: calc(12px + env(safe-area-inset-top)); }
.ui .hud-bottom { bottom: 0; align-items: flex-end; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.ui .hud-left, .ui .hud-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ui .hud-right { justify-content: flex-end; }
.ui .hud .pill { cursor: pointer; }
.ui .hud button.pill { font: inherit; font-weight: 700; }
.ui .primary-wrap { display: grid; place-items: center; min-width: 280px; }
.ui .primary-wrap .btn.big { min-width: 320px; max-width: 70vw; }
.ui .primary-wrap .btn.big .sub { font-size: 14px; }
.ui .primary-wrap .road-wrap { width: 380px; }
.ui .primary-wrap[hidden], .ui [hidden] { display: none !important; }

/* minimap */
.ui .minimap {
  position: relative; width: 240px; height: 44px;
  background: var(--hud-bg); border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
  overflow: hidden; cursor: pointer;
}
.ui .minimap .mm-ground { position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; background: rgba(255, 255, 255, 0.25); }
.ui .minimap .mm-b { position: absolute; bottom: 13px; width: 5px; background: var(--c, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.ui .minimap .mm-view { position: absolute; top: 2px; bottom: 2px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 6px; background: rgba(255, 255, 255, 0.08); pointer-events: none; transition: left 120ms linear, width 120ms linear; }
.ui .minimap .mm-me { position: absolute; bottom: 30px; width: 0; height: 0; border: 5px solid transparent; border-top: 7px solid var(--gold); transform: translateX(-5px); }

/* side panels: slide from the right on desktop, bottom sheets on phone */
.ui .side {
  position: absolute; right: 16px; top: 96px; bottom: auto; max-height: calc(100vh - 196px);
  width: 400px; max-width: calc(100vw - 32px);
  overflow: hidden auto; overscroll-behavior: contain;
  transform: translateX(130%);
  transition: transform var(--t-slow) var(--ease-out-back);
  z-index: 30;
}
.ui .side.open { transform: translateX(0); }
.ui .side.has-ribbon { margin-top: 0; padding-top: 16px; }
.ui .side > .ribbon { position: relative; left: auto; top: auto; transform: none; display: table; margin: -6px auto 12px; }
.ui .side .fine { font-size: var(--fs-small); opacity: 0.75; line-height: 1.4; margin-top: 12px; }
.ui .side .panel-portrait { display: flex; gap: 14px; align-items: center; }
.ui .side .panel-portrait .meta { flex: 1; min-width: 0; }
.ui .side .panel-portrait .meta .big { font-size: 20px; font-weight: 700; word-break: break-all; }
.ui .side .bignums { width: 100%; margin: 12px 0 6px; }
.ui .side .bignums .bignum { flex: 1; min-width: 0; padding: 8px 10px 12px; }
.ui .side .bignums .bignum .val { font-size: 44px; }
.ui .side .taunt-in { width: 100%; font-size: 15px; font-weight: 500; }
.ui .side .send-wrap { margin-top: 14px; }
.ui .side .send-wrap .btn { width: 100%; }
.ui .side .tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.ui .side .tabs .tab { flex: 1; padding: 8px 6px 10px; border: 3px solid var(--ink); border-radius: 10px; background: var(--wood-lo); color: var(--parch-lo); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.ui .side .tabs .tab.on { background: var(--gold); color: var(--ink); box-shadow: inset 0 3px 0 var(--gold-hi); }
.ui .side section { display: none; }
.ui .side section.on { display: block; }
.ui .side .buy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui .side .buy.two { grid-template-columns: repeat(2, 1fr); }
.ui .side .buy .btn { padding: 6px 6px 9px; font-size: 14px; min-height: 48px; }
.ui .side .buy .btn .sub { font-size: 12px; margin-top: 2px; }
.ui .side .ok { color: var(--green-lo); } .ui .side .warn { color: var(--red); }
.ui .side .kv b.ok { color: var(--green-lo); } .ui .side .kv b.warn { color: var(--red); }

/* result card overlay */
.ui .overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8, 5, 20, 0.55); z-index: 40; padding: 16px; }
.ui .overlay.open { display: flex; }
.ui .overlay .result-wrap { padding: 20px; }
.ui .overlay .result .close { position: absolute; top: -14px; right: -14px; }

/* poster */
.ui .poster {
  width: 340px; max-width: 100%; position: relative; text-align: center; color: var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 11px, var(--parch-line) 11px 12px), var(--parch);
  border: 6px solid var(--wood); box-shadow: inset 0 0 0 4px var(--wood-hi), 0 8px 0 var(--ink), 0 16px 30px rgba(0, 0, 0, 0.5);
  padding: 18px 18px 16px;
}
.ui .poster::before, .ui .poster::after { content: ''; position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; background: var(--ink); border-radius: 50%; box-shadow: inset 0 2px 0 #555; }
.ui .poster::after { left: auto; right: 10px; }
.ui .poster .sub { font-size: var(--fs-small); letter-spacing: 1px; text-transform: uppercase; color: var(--wood); font-weight: 700; }
.ui .poster h1 { font-family: var(--font-stamp); font-size: 32px; letter-spacing: 4px; margin: 10px 0 6px; color: var(--ink); }
.ui .poster .pic { width: 168px; height: 168px; margin: 12px auto; border: 4px solid var(--ink); background: #d9c99a; image-rendering: pixelated; display: block; }
.ui .poster .who { font-size: 17px; line-height: 1.4; }
.ui .poster .amt { font-size: 32px; font-weight: 700; color: var(--red); margin: 8px 0; -webkit-text-stroke: 0; }
.ui .poster .q { font-size: var(--fs-small); line-height: 1.5; color: var(--wood); border-top: 3px solid var(--ink); padding-top: 10px; margin-top: 10px; font-style: italic; }
.ui .poster .actions { display: flex; gap: 10px; margin-top: 14px; }
.ui .poster .actions .btn { flex: 1; }

/* how it works */
.ui .howto { width: min(960px, 100%); }
.ui .overlay#howto { overflow: auto; align-items: flex-start; padding-top: 48px; }
@media (min-height: 760px) { .ui .overlay#howto { align-items: center; } }
.ui .howto .lead { font-size: 16px; margin: 6px 0 16px; }
.ui .howto .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ui .howto .step { background: rgba(107, 63, 34, 0.1); border: 3px solid var(--wood-hi); border-radius: 12px; padding: 12px 10px; text-align: center; }
.ui .howto .step canvas { width: 96px; height: 96px; image-rendering: pixelated; display: block; margin: 0 auto 10px; background: #0f1230; border: 3px solid var(--ink); border-radius: 8px; }
.ui .howto .step b { display: block; font-size: 16px; margin-bottom: 6px; }
.ui .howto .step p { font-size: var(--fs-small); line-height: 1.4; margin: 0; }
.ui .howto .foot { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.ui .howto .foot .fine { flex: 1; min-width: 220px; font-size: var(--fs-small); opacity: 0.8; }

/* system toast (load errors from app.js) */
.ui #toast.sys { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 60; display: none; animation: none; pointer-events: none; }
.ui #toast.sys.on { display: block; animation: toast-in var(--t-slow) var(--ease-out-back) both; }

/* drawer board lists */
.ui .drawer .body .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ui .drawer .list-row { cursor: pointer; }
.ui .drawer .list-row:hover { background: rgba(107, 63, 34, 0.18); }

@media (max-width: 700px) {
  .ui .hud { padding: 10px; gap: 8px; }
  .ui .hud-top .pill .label, .ui .hud-top .pill#pill-bags .label { display: none; }
  .ui .hud-top .pill { min-height: 36px; font-size: 14px; padding: 3px 10px 3px 6px; gap: 6px; }
  .ui .hud-top .pill .ico.lg { width: 24px; height: 24px; }
  .ui .hud-top .pill .num { font-size: 15px; }
  .ui .minimap { display: none; }
  .ui .hud-bottom { flex-wrap: nowrap; align-items: center; }
  .ui .primary-wrap { min-width: 0; flex: 1; }
  .ui .primary-wrap .btn.big { min-width: 0; width: 100%; max-width: none; min-height: 60px; font-size: 19px; padding: 8px 12px 12px; line-height: 1.05; }
  .ui .primary-wrap .btn.big .sub { display: none; }
  .ui .primary-wrap .road-wrap { width: 100%; }
  .ui .road-label { font-size: 14px; }
  .ui .toolbar .tool { width: 44px; height: 44px; }
  .ui .side {
    left: 50%; right: auto; top: auto; bottom: 0; width: 100%; max-width: 560px; max-height: 84vh;
    transform: translate(-50%, 110%);
    border-bottom: 0; border-radius: 20px 20px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .ui .side.open { transform: translate(-50%, 0); }
  .ui .side.has-ribbon { padding-top: 16px; }
  .ui .howto .steps { grid-template-columns: 1fr 1fr; }
  .ui .howto .step canvas { width: 72px; height: 72px; }
  .ui .poster { width: 100%; }
}

/* ================================================================== WANTED wall */
.ui .wall { width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.ui .wall-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 14px;
  padding: 10px 6px 4px; overflow: auto; max-height: calc(100vh - 220px);
  background: radial-gradient(circle at 20% 10%, rgba(0, 0, 0, 0.08), transparent 60%);
}
.ui .mini-poster {
  position: relative; padding: 12px 10px 10px; text-align: center; color: var(--ink); cursor: pointer;
  background: repeating-linear-gradient(0deg, transparent 0 9px, var(--parch-line) 9px 10px), #f6ead0;
  border: 3px solid var(--ink); box-shadow: 4px 5px 0 rgba(27, 20, 16, 0.55);
  transform: rotate(var(--tilt, 0deg)); transition: transform var(--t-fast) var(--ease-out);
}
.ui .mini-poster:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.ui .mini-poster::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 var(--red-lo); }
.ui .mini-poster:nth-child(3n+1) { --tilt: -2deg; } .ui .mini-poster:nth-child(3n+2) { --tilt: 1.5deg; } .ui .mini-poster:nth-child(3n) { --tilt: -0.5deg; }
.ui .mini-poster:nth-child(4n) { --tilt: 2.5deg; }
.ui .mini-poster .h { font-family: var(--font-stamp); font-size: 16px; letter-spacing: 2px; margin: 4px 0 6px; }
.ui .mini-poster .pic { width: 84px; height: 84px; margin: 0 auto 8px; border: 3px solid var(--ink); background: #d9c99a; image-rendering: pixelated; display: block; }
.ui .mini-poster .who { font-size: var(--fs-small); line-height: 1.35; }
.ui .mini-poster .who b { font-size: 15px; }
.ui .mini-poster .taunt-line { font-size: 13px; font-style: italic; color: var(--wood); margin-top: 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui .mini-poster .amt { font-size: 22px; font-weight: 700; color: var(--red); margin-top: 4px; }
.ui .mini-poster .amt.good { color: var(--green-lo); }
.ui .mini-poster .when { font-size: 12px; opacity: 0.6; margin-top: 2px; }
.ui .mini-poster .stamp-mini { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-12deg); font-family: var(--font-stamp); font-size: 16px; color: var(--red); border: 3px solid var(--red); padding: 4px 8px; letter-spacing: 2px; opacity: 0.9; background: rgba(246, 234, 208, 0.6); }
.ui .wall-empty { grid-column: 1 / -1; text-align: center; padding: 30px; font-size: 16px; opacity: 0.8; }

/* ================================================================== first-visit tour (spotlight) */

/* name change flourish: nameplate / avatar pill pop with a gold glow */
.ui .name-flash { animation: name-flash 700ms var(--ease-out-back); }
@keyframes name-flash {
  0% { transform: scale(0.8) rotate(-4deg); box-shadow: 0 0 0 0 rgba(243, 196, 64, 0.9), 0 4px 0 var(--ink); }
  40% { transform: scale(1.15) rotate(3deg); box-shadow: 0 0 0 10px rgba(243, 196, 64, 0), 0 4px 0 var(--ink); }
  100% { transform: none; }
}


/* ================================================================== v3: Mistria / Sea of Stars grade chrome */
:root {
  --navy: #1c2f5c; --navy-hi: #2a4580; --navy-lo: #12203f; --cream: #f6ecd2;
  --frame: var(--ink);
}
/* every pill: dark outline outside, light edge inside, deeper drop */
.ui .pill {
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, 0.35);
  padding: 5px 18px 5px 9px;
}
.ui .pill.icon-only { padding: 5px 9px; }
.ui .pill.avatar { padding-left: 5px; }
/* panels: thicker rounded frame with an outline, like Mistria's cards */
.ui .panel {
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 6px var(--wood),
    inset 0 0 0 8px var(--wood-hi),
    inset 0 0 0 9px rgba(255, 255, 255, 0.25),
    0 8px 0 var(--ink),
    0 18px 28px rgba(0, 0, 0, 0.45);
  padding: 26px 28px 28px;
}
.ui .panel.dark {
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.16), inset 0 4px 0 rgba(255, 255, 255, 0.08), 0 8px 0 var(--ink), 0 18px 28px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
}
.ui .panel .close { top: -16px; right: -16px; width: 44px; height: 44px; border-width: 4px; }
.ui .side.has-ribbon { padding-top: 18px; }
.ui .btn { border-width: 4px; border-radius: 18px; }
.ui .btn.small { border-width: 3px; border-radius: 12px; }
.ui .nameplate { border-width: 4px; }
.ui .chip { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 3px 0 var(--ink); }
.ui .toolbar { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, 0.35); border-radius: 18px; }
.ui .minimap { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 var(--ink); border-radius: 14px; }
.ui .drawer { border-top: 4px solid var(--ink); box-shadow: inset 0 4px 0 var(--wood-hi), 0 -10px 30px rgba(0, 0, 0, 0.5); }
.ui .drawer .tab-handle { border: 4px solid var(--ink); border-bottom: 0; box-shadow: inset 0 3px 0 var(--wood-hi); }

/* navy dialog (Mistria) for system speakers: cream text, cream frame, speaker tab */
.ui .dialog {
  position: relative; display: inline-block; max-width: 420px; margin-top: 22px;
  padding: 12px 16px 13px;
  background: linear-gradient(var(--navy-hi), var(--navy) 30%, var(--navy-lo));
  color: var(--cream);
  border: 3px solid var(--cream);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), 0 12px 18px rgba(0, 0, 0, 0.45);
  font-size: 16px; font-weight: 500; line-height: 1.35;
  animation: toast-in var(--t-slow) var(--ease-out-back) both;
}
.ui .dialog b { color: var(--gold-hi); font-weight: 700; }
.ui .dialog .speaker {
  position: absolute; left: 10px; top: -24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 4px; border-radius: 8px 8px 0 0;
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-bottom: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.ui .dialog .speaker .ico { width: 16px; height: 16px; filter: none; }
.ui .dialog.out { animation: toast-out var(--t-mid) var(--ease-in) both; }
.ui .dialog .cue { position: absolute; right: 10px; bottom: 6px; font-size: 12px; opacity: 0.6; animation: blink 1.2s steps(1) infinite; }

/* icon chips with ring timers (replaces sentence chips) */
.ui .ichip {
  --f: 1; --c: var(--gold);
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 4px;
  background: var(--hud-bg); color: #fff;
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 3px 0 var(--ink);
  font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.ui .ichip .ring {
  position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--f) * 360deg), rgba(255, 255, 255, 0.15) 0);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.ui .ichip .ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.ui .ichip .ring .ico { position: relative; width: 14px; height: 14px; filter: none; }
.ui .ichip.shield { --c: var(--blue); } .ui .ichip.heist { --c: var(--red); } .ui .ichip.robbed { --c: #9aa0b8; } .ui .ichip.packing { --c: var(--gold); }
.ui .ichip.guards { --c: var(--purple); } .ui .ichip.budget { --c: var(--green); } .ui .ichip.lvl .ring { background: var(--c); }
.ui .ichip .n { color: #fff; }
.ui .ichip .n.red { color: var(--red-hi); } .ui .ichip .n.gold { color: var(--gold-hi); }
.ui .ichip.urgent .ring { animation: ring-pulse 0.9s ease-in-out infinite; }
@keyframes ring-pulse { 50% { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgba(229, 68, 58, 0.35); } }
/* tooltip = the sentence */
.ui .ichip[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  padding: 6px 10px 7px; background: var(--navy); color: var(--cream); border: 2px solid var(--cream); border-radius: 8px;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; z-index: 5;
}
.ui .ichips { display: flex; gap: 8px; flex-wrap: wrap; }

/* day-clock dial (Dave the Diver) */
.ui .clock {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; cursor: pointer;
  border: 3px solid var(--ink);
  background: conic-gradient(from 180deg, var(--navy) 0 90deg, #c86a5a 90deg 110deg, #78c0f0 110deg 250deg, #c86a5a 250deg 270deg, var(--navy) 270deg 360deg);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, 0.35);
}
.ui .clock .hand { position: absolute; left: 50%; top: 50%; width: 3px; height: 17px; margin-left: -1.5px; background: var(--cream); transform-origin: 50% 0; transform: rotate(var(--a, 0deg)); border-radius: 2px; box-shadow: 0 0 0 1px var(--ink); }
.ui .clock .hand::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--gold-hi); border: 2px solid var(--ink); }
.ui .clock .pin { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); }
.ui .clock .ico { position: absolute; width: 12px; height: 12px; filter: none; }
.ui .clock .ico.sun { left: 50%; top: 5px; margin-left: -6px; }
.ui .clock .ico.moon { left: 50%; bottom: 5px; margin-left: -6px; }
.ui .clock.lg { width: 72px; height: 72px; } .ui .clock.lg .hand { height: 29px; }

/* live ticker under the pills */
.ui .ticker {
  position: absolute; left: 16px; top: 68px; z-index: 19;
  width: min(640px, calc(100vw - 32px)); height: 30px; overflow: hidden;
  background: var(--hud-bg); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 3px 0 var(--ink);
  pointer-events: auto;
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ui .ticker .track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 0; white-space: nowrap; animation: ticker-run var(--dur, 40s) linear infinite; will-change: transform; }
.ui .ticker:hover .track { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
.ui .ticker .item { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; height: 100%; }
.ui .ticker .item:hover { color: var(--gold-hi); }
.ui .ticker .item b { font-weight: 700; }
.ui .ticker .item .ico { width: 16px; height: 16px; filter: none; }
.ui .ticker .item .ago { opacity: 0.6; font-size: 13px; }
.ui .ticker .item .amt { color: var(--gold-hi); font-weight: 700; } .ui .ticker .item .amt.bad { color: var(--red-hi); }
.ui .ticker .sep { width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); flex: none; }

@media (max-width: 700px) {
  .ui .ticker { left: 10px; top: 104px; width: calc(100vw - 20px); height: 26px; }
  .ui .ticker .item { font-size: 13px; padding: 0 12px; }
  .ui .clock { width: 36px; height: 36px; } .ui .clock .hand { height: 13px; }
  .ui .panel { padding: 20px 18px 22px; }
  .ui .dialog { max-width: calc(100vw - 32px); font-size: 15px; }
}

/* ================================================================== v3: cinematic chrome + claim a plot */
.ui .hud, .ui .ticker, .ui .side, .ui .drawer { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out-back); }
body.ui.cinematic .hud-top, body.ui.cinematic .ticker { opacity: 0.3; pointer-events: none; }
body.ui.cinematic .hud-bottom .minimap, body.ui.cinematic .hud-bottom .toolbar { opacity: 0; pointer-events: none; }
body.ui.cinematic .hud-bottom .primary-wrap { opacity: 1; }
body.ui.cinematic .side:not(.open) { opacity: 0; }
body.ui.cinematic .drawer { transform: translateY(100%); }
/* vignette while the camera is in */
.ui .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 15; opacity: 0; transition: opacity 600ms var(--ease-out);
  background: radial-gradient(ellipse 70% 60% at 50% 55%, transparent 40%, rgba(8, 5, 20, 0.55) 100%); }
body.ui.cinematic .vignette { opacity: 1; }
/* claim a plot: the deposit sheet gets a FOR SALE header and a plot pin */
.ui .plot-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.ui .plot-head .sign { display: inline-grid; place-items: center; width: 64px; height: 56px; background: var(--wood-hi); border: 3px solid var(--ink); border-radius: 8px; box-shadow: inset 0 -4px 0 var(--wood), 0 3px 0 var(--ink); }
.ui .plot-head .sign b { font-family: var(--font-stamp); font-size: 9px; color: var(--cream); letter-spacing: 0; line-height: 1.3; text-align: center; -webkit-text-stroke: 0; }
.ui .plot-head .meta .big { font-size: 20px; font-weight: 700; }
.ui .plot-head .meta .small { opacity: 0.75; }
.ui .plot-pin { position: absolute; z-index: 25; width: 0; height: 0; pointer-events: none; }
.ui .plot-pin::before { content: ''; position: absolute; left: -14px; top: -40px; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px var(--gold-hi); animation: pin-bob 1s ease-in-out infinite; }
@keyframes pin-bob { 50% { transform: rotate(-45deg) translate(-4px, -4px); } }

/* focus: gold ring, never the browser default */
.ui :focus { outline: none; }
.ui :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
.ui .btn:focus-visible { outline-offset: 4px; }

/* ================================================================== v3: identity */
.ui .hoods { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(4px, 1.5vw, 10px); } /* eight hoods, always one row: ~36 px swatches at 390, 44 px on desktop (owner: never a lone swatch on a second row) */
.ui .hood {
  width: 100%; height: auto; aspect-ratio: 1; max-width: 44px; justify-self: center; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--ink); background: var(--c);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25), inset 0 4px 0 rgba(255, 255, 255, 0.25), 0 3px 0 var(--ink);
  cursor: pointer; transition: transform var(--t-fast) var(--ease-out-back); position: relative;
}
.ui .hood:hover { transform: translateY(-2px) scale(1.08); }
.ui .hood.on { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25), inset 0 4px 0 rgba(255, 255, 255, 0.25), 0 0 0 3px var(--gold), 0 3px 0 var(--ink); }
.ui .hood.on::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.ui .hood-ring .ring { border-color: var(--hood, var(--gold)); }
.ui .pill.avatar .ring { border-color: var(--hood, var(--gold)); }
.ui .stars { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.ui .stars .set { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; letter-spacing: 1px; }
.ui .stars .set .ico { width: 16px; height: 16px; filter: none; margin-right: 4px; }
.ui .stars .set .s { color: var(--gold); text-shadow: 0 1px 0 var(--ink); } .ui .stars .set .s.off { color: rgba(27, 20, 16, 0.25); text-shadow: none; }
.ui .stars .set.fort .s { color: var(--blue-lo); }
.ui .stars .set .s.off, .ui .stars .set.fort .s.off { color: rgba(27, 20, 16, 0.22); text-shadow: none; }
.ui .nameplate .stars-inline { display: block; text-align: center; font-size: 12px; margin-top: 2px; letter-spacing: 1px; }
.ui .nameplate .stars-inline .w { color: var(--gold-lo); } .ui .nameplate .stars-inline .f { color: var(--blue-lo); margin-left: 6px; }
.ui .crown-badge { position: absolute; left: -6px; top: -10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--ink); animation: badge-pop var(--t-slow) var(--ease-out-back); }
.ui .crown-badge .ico { width: 16px; height: 16px; filter: none; }
.ui .crown-inline { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; filter: drop-shadow(0 1px 0 var(--ink)); }
.ui .statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ui .stat { padding: 8px 10px 9px; background: rgba(107, 63, 34, 0.1); border: 3px solid var(--wood-hi); border-radius: 10px; }
.ui .stat .k { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; }
.ui .stat .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.ui .stat .v.gold { color: var(--gold-lo); } .ui .stat .v.red { color: var(--red); } .ui .stat .v.green { color: var(--green-lo); }
.ui .stat .sub { font-size: 12px; opacity: 0.7; }
.ui .streak { display: inline-flex; align-items: center; gap: 6px; }
.ui .streak .flame { width: 18px; height: 18px; filter: none; animation: flame 0.8s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.15) translateY(-1px); } }
.ui .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; }
.ui .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui .switch .knob { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--wood-lo); border: 3px solid var(--ink); transition: background var(--t-fast); }
.ui .switch .knob::after { content: ''; position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--parch); border: 2px solid var(--ink); box-sizing: border-box; transition: left var(--t-fast) var(--ease-out-back); }
.ui .switch input:checked + .knob { background: var(--green); }
.ui .switch input:checked + .knob::after { left: 21px; }
.ui .list-row .name .crown-inline { width: 14px; height: 14px; }
.ui .mini-poster .pstars { font-size: 11px; color: var(--gold-lo); letter-spacing: 1px; margin-top: 2px; }
.ui .poster .pstars { font-size: 13px; color: var(--gold-lo); letter-spacing: 2px; margin-top: 4px; }


/* ================================================================== round 4: readable type, inside close, motion, focus */
/* numbers: Lilita One, tabular, every digit unambiguous; stamps stay Press Start 2P; everything else Fredoka */
.ui .num, .ui .pill .num, .ui .bignum .val, .ui .result .loot-val, .ui .float-num, .ui .ichip .n, .ui .road-label .timer,
.ui .list-row .amt, .ui .list-row .rank, .ui .stat .v, .ui .mini-poster .amt, .ui .poster .amt, .ui .ticker .amt, .ui .kv b,
.ui .input input, .ui .bignums .x, .ui .nameplate .sub, .ui .tour .step-n, .ui .toolbar .dotn, .ui .chip, .ui .p-money {
  font-family: var(--font-num); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.3px;
}
.ui .kv b, .ui .chip { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.ui .kv b.money, .ui .money { font-family: var(--font-num); font-weight: 400; font-variant-numeric: tabular-nums; }
.ui .pill { font-weight: 600; }
.ui .pill .num { font-size: 19px; letter-spacing: 0.4px; }
.ui .pill .label { font-weight: 600; font-size: 13px; letter-spacing: 0.2px; }
/* buttons and ribbons: no stroke, Fredoka 700 with an ink drop */
.ui .btn, .ui .ribbon, .ui .badge .t, .ui .outlined, .ui .bignums .x, .ui .kit-stamp { -webkit-text-stroke: 0; }
.ui .btn { font-family: var(--font-btn); font-weight: 400; letter-spacing: 0.6px; text-shadow: 0 3px 0 var(--ink); font-synthesis: none; }
.ui .btn.big { font-size: 30px; }
.ui .btn .sub { font-weight: 600; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.ui .btn.parch { text-shadow: none; }
.ui .ribbon { font-family: var(--font-ui); font-weight: 700; text-shadow: 0 2px 0 var(--ink); letter-spacing: 1px; }
.ui .badge .t { font-family: var(--font-num); text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); }
.ui .bignums .x { text-shadow: 0 3px 0 var(--ink); }
/* the outline stays on the big numbers only */
.ui .bignum .val, .ui .result .loot-val { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; letter-spacing: 1px; }
.ui .bignum .unit { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.ui .float-num { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.ui .bignum .lbl { font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.ui .result .from, .ui .result .taunt { font-weight: 500; }
.ui .nameplate { font-weight: 700; }
.ui .list-row .name { font-weight: 700; }
.ui .list-row .rank { font-size: 22px; }
.ui .stat .v { font-size: 22px; }
.ui .tabs .tab, .ui .drawer .tab, .ui .seg button { font-family: var(--font-ui); font-weight: 700; }
.ui .field label { font-weight: 700; letter-spacing: 1px; }
.ui .dialog { font-weight: 500; font-size: 16px; }
.ui .dialog .speaker { font-weight: 700; }
.ui .toast { font-weight: 500; }
.ui .ichip .n { font-size: 15px; }
.ui .road-label { font-weight: 700; }
.ui .road-label .timer { font-size: 24px; }
.ui .mini-poster .who, .ui .poster .who { font-weight: 500; }
.ui .plot-head .meta .big { font-weight: 700; }

/* close button: fully inside the panel, 44px hit area */
.ui .panel .close, .ui .result .close, .ui .overlay .result .close { top: 10px; right: 10px; width: 44px; height: 44px; font-size: 24px; }
.ui .side.has-ribbon > .ribbon { margin-right: 44px; margin-left: 44px; }
.ui .panel.has-ribbon > .ribbon { position: relative; left: auto; top: auto; transform: none; display: table; margin: -6px auto 12px; }
.ui .panel.has-ribbon { margin-top: 0; padding-top: 18px; }
.ui .howto > .ribbon { margin-right: 52px; }
.ui .wall > .ribbon { margin-right: 52px; }
.ui .panel .close:focus-visible, .ui .pill:focus-visible, .ui .tool:focus-visible, .ui .hood:focus-visible, .ui .tab:focus-visible, .ui .list-row:focus-visible, .ui .mini-poster:focus-visible, .ui .minimap:focus-visible, .ui .ichip:focus-visible, .ui .clock:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* hover lifts on every clickable */
.ui .pill:hover, .ui .clock:hover, .ui .tab:hover, .ui .drawer .tab:hover, .ui .seg button:hover, .ui .switch:hover .knob, .ui .list-row:hover, .ui .minimap:hover, .ui .ticker .item:hover { transform: translateY(-2px); }
.ui .pill, .ui .clock, .ui .tab, .ui .drawer .tab, .ui .seg button, .ui .switch .knob, .ui .list-row, .ui .minimap, .ui .ticker .item { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast); }
.ui .list-row { cursor: pointer; }
.ui .list-row:not([data-id]):not([data-owner]) { cursor: default; }
.ui .list-row:not([data-id]):not([data-owner]):hover { transform: none; }

/* reduce motion: no shake, no sunburst spin, no pulses (the world reads data-reduce-motion for parallax) */
html[data-reduce-motion="1"] .ui .shake { animation: none !important; }
html[data-reduce-motion="1"] .ui .sunburst { animation: none !important; }
html[data-reduce-motion="1"] .ui .ichip.urgent .ring, html[data-reduce-motion="1"] .ui .tour .spot.pulse, html[data-reduce-motion="1"] .ui .plot-pin::before, html[data-reduce-motion="1"] .ui .streak .flame, html[data-reduce-motion="1"] .ui .btn.pulse { animation: none !important; }
html[data-reduce-motion="1"] .ui .ticker .track { animation-duration: 120s !important; }

/* loading screen */

/* big centered dialog for welcome / errors */
.ui .overlay .dialog.lg { max-width: 520px; font-size: 17px; padding: 18px 20px 18px; }
.ui .dialog .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ui .dialog .actions .btn.small { min-height: 44px; }
.ui .dialog a { color: var(--gold-hi); font-weight: 700; }

/* viewport tiers */
@media (max-width: 1100px) { .ui .hud-top .pill .label { display: none; } .ui .primary-wrap .btn.big { min-width: 260px; font-size: 24px; } .ui .side { width: 380px; } }
@media (max-height: 720px) and (min-width: 701px) { .ui .side { top: 84px; bottom: 92px; } .ui .side .bignums .bignum .val { font-size: 38px; } .ui .panel { padding: 18px 20px 20px; } .ui .ticker { top: 62px; } }
@media (min-width: 701px) and (max-width: 1000px) { .ui #pill-heists { display: none; } .ui .hud-top .pill .label { display: none; } .ui .hud-left, .ui .hud-right { flex-wrap: nowrap; } }
@media (min-width: 701px) and (max-width: 900px) { .ui .side { width: 360px; } .ui .minimap { width: 160px; } .ui .primary-wrap .btn.big { min-width: 220px; font-size: 22px; } .ui .primary-wrap .btn.big .sub { display: none; } }
@media (max-width: 700px) and (max-height: 700px) { .ui .hud-top .pill { min-height: 32px; } .ui .side { max-height: 80vh; } .ui .side .bignums .bignum .val { font-size: 34px; } .ui .ticker { top: 96px; } }
@media (max-width: 700px) and (min-height: 900px) { .ui .side { max-height: 78vh; } }

/* ================================================================== fit-to-width numbers (round 4b) */
.ui .fit { display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: bottom; }
.ui .bignum .val { font-size: var(--fs-giant); max-width: 100%; }
.ui .side .bignums .bignum .val { font-size: var(--fs-giant-side); }
.ui .result .loot-val { font-size: var(--fs-giant); }
.ui .bignum { min-width: 0; overflow: hidden; }
.ui .bignums { max-width: 100%; }
.ui .pill .num { font-size: var(--fs-pill-num); }
.ui .ichip .n { font-size: var(--fs-chip-n); }
.ui .list-row .amt, .ui .stat .v { font-size: var(--fs-amt); }
.ui .list-row .amt { max-width: 38vw; overflow: hidden; text-overflow: clip; }
.ui .nameplate { max-width: 100%; overflow: hidden; }
.ui .nameplate .name-text { display: inline-block; max-width: 100%; white-space: nowrap; }
.ui .pill { max-width: 100%; min-width: 0; }
.ui .pill .num { max-width: 60vw; }
.ui .mini-poster .amt { max-width: 100%; }
@media (max-width: 700px) { .ui .bignum .val { font-size: 44px; } }

/* ================================================================== owner's pick: Titan One numbers + buttons, Jersey 25 body */
.ui { font-weight: 400; }
.ui b, .ui strong, .ui .panel-title, .ui .nameplate, .ui .list-row .name, .ui .plot-head .meta .big, .ui .tour .step-t, .ui .result .from b { font-weight: 400; }
.ui .btn { font-family: var(--font-btn); font-weight: 400; letter-spacing: 0.4px; }
.ui .btn .sub { font-family: var(--font-ui); font-weight: 400; font-size: 15px; }
.ui .btn.small { font-size: 17px; }
.ui .btn.big { font-size: 28px; }
.ui .ribbon { font-family: var(--font-btn); font-weight: 400; letter-spacing: 1px; }
.ui .ribbon.sm { font-size: 20px; }
.ui .tabs .tab, .ui .drawer .tab, .ui .seg button { font-family: var(--font-ui); font-weight: 400; font-size: 17px; letter-spacing: 0.5px; }
.ui .drawer .tab { font-size: 18px; }
.ui .field label { font-size: 14px; letter-spacing: 1.2px; }
.ui .pill .label { font-size: 15px; }
.ui .pill { font-weight: 400; }
.ui .dialog { font-size: 19px; line-height: 1.3; }
.ui .dialog .speaker { font-size: 15px; }
.ui .toast { font-size: 17px; }
.ui .kv { font-size: 17px; }
.ui .kv b { font-weight: 400; }
.ui .fine, .ui .small, .ui .demo-note { font-size: 15px; }
.ui .side .fine { font-size: 15px; line-height: 1.3; }
.ui .result .from, .ui .result .taunt { font-size: 17px; }
.ui .bignum .lbl { font-family: var(--font-ui); font-size: 14px; letter-spacing: 2px; }
.ui .ichip .n { font-family: var(--font-num); }
.ui .road-label { font-size: 17px; }
.ui .list-row .meta { font-size: 15px; }
.ui .stat .k { font-size: 13px; }
.ui .stat .sub { font-size: 14px; }
.ui .mini-poster .who { font-size: 15px; } .ui .mini-poster .who b { font-size: 17px; }
.ui .poster .who { font-size: 19px; }
.ui .input { font-family: var(--font-num); font-size: 20px; }
.ui .input .unit { font-family: var(--font-ui); font-size: 15px; }
.ui .ticker .item { font-size: 16px; }
.ui .nameplate { font-size: 19px; }
.ui .portrait.sm .nameplate { font-size: 16px; }
.ui .wall-empty, .ui .howto .lead { font-size: 18px; }
.ui .howto .step b { font-size: 18px; } .ui .howto .step p { font-size: 15px; }
.ui .outlined, .ui .btn, .ui .ribbon { -webkit-text-stroke: 0; }

/* no synthetic bold anywhere a display face is used */
.ui .btn, .ui .btn *, .ui .bignum, .ui .result .loot-val, .ui .money, .ui .pill .v, .ui .chip .v, .ui .num { font-synthesis: none; }
.ui .money, .ui .pill .v, .ui .chip .v, .ui .num, .ui .kv b.money { font-weight: 400; }

/* ================================================================== single-weight faces: never synthesize bold
   Titan One, Jersey 25 and Press Start 2P each ship weight 400 only. Any 700 above makes the browser smear a fake bold
   over the ink drop (the white fringe the owner saw on the primary button). This wins over every rule above. */
.ui, .ui *, .ui *::before, .ui *::after, #loading, #loading * { font-weight: 400 !important; font-synthesis: none !important; }
.ui .btn { text-shadow: 0 3px 0 var(--ink); }
.ui .btn.parch { text-shadow: none; }

/* buttons never carry a text stroke: a later shorthand reset the stroke colour to white and the width rule above turned it into a 4px white halo */
.ui .btn, .ui .btn.big, .ui .btn.small, .ui .btn * { -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; }

/* ================================================================== text stroke: one authoritative block
   Rule: a `-webkit-text-stroke: 0` shorthand resets the colour to currentColor (white on buttons); any later or more
   specific `-webkit-text-stroke-width` then paints a WHITE stroke (the halo the owner saw). So: everything in the chrome
   gets width 0 + transparent, and only the four giant-number elements get an explicit ink stroke, width and colour together. */
.ui, .ui *, .ui *::before, .ui *::after { -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; }
.ui .bignum .val, .ui .result .loot-val { -webkit-text-stroke-width: var(--num-stroke) !important; -webkit-text-stroke-color: var(--ink) !important; paint-order: stroke fill; }
.ui .bignum .unit, .ui .float-num { -webkit-text-stroke-width: 2px !important; -webkit-text-stroke-color: var(--ink) !important; paint-order: stroke fill; }

/* ================================================================== round 5: simple, viral, fun */
.ui .outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.ui .outcome { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px 9px; border: 3px solid var(--ink); border-radius: 12px; background: rgba(107, 63, 34, 0.08); white-space: nowrap; min-width: 0; overflow: hidden; }
.ui .outcome b { max-width: 70%; }
.ui .outcome .k { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.ui .outcome b { font-size: 22px; }
.ui .outcome.win b { color: var(--green-lo); } .ui .outcome.lose b { color: var(--red); }
.ui .outcome.win { border-color: var(--green-lo); } .ui .outcome.lose { border-color: var(--red-lo); }
.ui .taunt-field .input { padding-right: 6px; }
.ui .dice { width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); background: var(--gold); font-size: 20px; line-height: 1; flex: none; box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-lo), 0 3px 0 var(--ink); transition: transform var(--t-fast) var(--ease-out-back); }
.ui .dice:hover { transform: translateY(-2px) rotate(-12deg); } .ui .dice:active { transform: translateY(2px); }
.ui .dice.spin { animation: dice-spin 400ms var(--ease-out-back); } @keyframes dice-spin { to { transform: rotate(360deg); } }
.ui .details { margin-top: 14px; border-top: 3px dotted rgba(107, 63, 34, 0.35); padding-top: 8px; }
.ui .details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 17px; padding: 6px 0; opacity: 0.85; }
.ui .details summary::-webkit-details-marker { display: none; }
.ui .details summary::before { content: '▸'; font-size: 14px; transition: transform var(--t-fast); }
.ui .details[open] summary::before { transform: rotate(90deg); }
.ui .info { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--parch); font-size: 13px; cursor: help; margin-left: auto; position: relative; }
.ui .info[data-tip]:hover::after, .ui .info[data-tip]:focus::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); width: 260px; padding: 8px 10px 9px; background: var(--navy); color: var(--cream); border: 2px solid var(--cream); border-radius: 8px; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); font-size: 15px; line-height: 1.3; white-space: normal; z-index: 5; text-align: left; }
.ui .practice-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 4px; border-radius: 999px; background: var(--green); border: 3px solid var(--ink); color: #fff; font-size: 15px; text-shadow: 0 1px 0 var(--ink); }
.ui .send-wrap .btn.practice { --face: var(--green); --hi: #9df09d; --lo: var(--green-lo); }
/* needle */
.ui .needle-wrap { margin: 2px 0 10px; }
.ui .needle-bar { position: relative; height: 26px; border: 3px solid var(--ink); border-radius: 13px; background: var(--red); overflow: visible; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25); }
.ui .needle-bar .zone-win { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); background: var(--green); border-radius: 10px 0 0 10px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25); }
.ui .needle { position: absolute; top: -9px; bottom: -9px; left: var(--x, 0%); width: 6px; margin-left: -3px; background: var(--cream); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); transition: left 1200ms cubic-bezier(0.2, 0.9, 0.25, 1); }
.ui .needle::after { content: ''; position: absolute; left: 50%; top: -8px; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent; border-top: 10px solid var(--cream); filter: drop-shadow(0 1px 0 var(--ink)); }
.ui .needle-legend { display: flex; justify-content: space-between; font-size: 15px; margin-top: 6px; opacity: 0.9; }
.ui .needle-legend .win b { color: var(--green); } .ui .needle-legend .roll b { color: var(--gold-hi); }
.ui .result .stamp-title.hold, .ui .result .loot-val.hold, .ui .result .from.hold, .ui .result .taunt.hold, .ui .result .actions.hold { visibility: hidden; }
.ui .practice-tag { display: inline-block; margin: -6px 0 8px; padding: 3px 12px 4px; border-radius: 999px; background: var(--green); border: 3px solid var(--ink); color: #fff; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; }
.ui .house-link { margin-top: 10px; font-size: 15px; opacity: 0.85; word-break: break-all; }
.ui .house-link a { color: var(--gold-hi); }
.ui .poster .house-link a { color: var(--wood); }
/* spectator toast with mini needle */
.ui .toast .mini-needle { position: relative; height: 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--red); margin-top: 8px; }
.ui .toast .mini-needle .z { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); background: var(--green); }
.ui .toast .mini-needle .n { position: absolute; top: -4px; bottom: -4px; left: var(--x, 0%); width: 4px; margin-left: -2px; background: var(--cream); border: 1px solid var(--ink); transition: left 900ms cubic-bezier(0.2, 0.9, 0.25, 1); }
/* LIVE pill */
.ui .live-pill { --c: var(--red); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, 0.35); }
.ui .live-pill .reddot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--ink), 0 0 10px var(--red); animation: blink 1.2s steps(1) infinite; margin-left: 4px; }
.ui .live-pill .num::after { display: none; }
.ui .live-pill .label { color: var(--red-hi); text-transform: uppercase; letter-spacing: 1px; }
/* how-to: three words */

/* ================================================================== v6 review fixes */
/* (1) the close button lives in the card's top padding, the needle bar starts below it */
.ui .result { padding-top: 54px; }
.ui .result .close, .ui .overlay .result .close { top: 8px; right: 8px; }
.ui .result .practice-tag { margin-top: -40px; margin-bottom: 14px; }
.ui .result .needle-wrap { margin: 0 44px 10px 0; }
.ui .result .practice-tag + .needle-wrap { margin-right: 0; }
/* (2) the CAUGHT stamp sits over the amount, tilts less, and the lines under it keep their air */
.ui .result .caught { top: auto; bottom: auto; transform: translate(-50%, -50%) rotate(-6deg); font-size: 26px; padding: 8px 14px 10px; }
.ui .result .caught.slam { animation-name: slam-soft; }
@keyframes slam-soft {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(2.6); }
  70% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
}
.ui .result .loot-val { position: relative; }
.ui .result.busted .loot-val { margin-bottom: 18px; }
/* (3) phone: the LIVE pill gets its own slot above the ticker, the ticker moves down */
@media (max-width: 700px) {
  .ui .hud-top .live-pill { order: 9; flex-basis: 100%; justify-content: center; max-width: max-content; }
  .ui .hud-left { flex-wrap: wrap; }
  .ui .ticker { top: 148px; }
  .ui .live-pill ~ * { }
}
/* (4) the bottom chrome hides while the result card is up */
body.ui:has(#result-wrap.open) .hud-bottom .toolbar, body.ui:has(#result-wrap.open) .hud-bottom .primary-wrap, body.ui:has(#result-wrap.open) .hud-bottom .minimap { opacity: 0; pointer-events: none; }
body.ui.result-open .hud-bottom .toolbar, body.ui.result-open .hud-bottom .primary-wrap, body.ui.result-open .hud-bottom .minimap { opacity: 0; pointer-events: none; }

.ui .result .stamp-title.stamped { opacity: 0.22; transition: opacity 200ms; }
.ui .result .caught { font-size: 30px; padding: 10px 18px 12px; }
.ui .result .caught { font-size: 22px; padding: 6px 14px 7px; border-width: 5px; letter-spacing: 2px; }
.ui .result .stamp-title { margin-top: 12px; }

/* ================================================================== the wait: captioned beats, road pills */
.ui .road-pills { position: absolute; right: 16px; top: 108px; z-index: 21; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: auto; }
.ui .road-pill {
  position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--hud-bg); border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, 0.35); color: #fff; overflow: hidden; cursor: pointer;
  animation: enter-right var(--t-slow) var(--ease-out-back) both;
}
.ui .road-pill .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, rgba(243, 196, 64, 0.22), rgba(243, 196, 64, 0.08)); transition: width 1s linear; pointer-events: none; }
.ui .road-pill .who { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; }
.ui .road-pill .who .spr { position: absolute; left: 50%; top: 50%; }
.ui .road-pill .txt { position: relative; min-width: 0; }
.ui .road-pill .cap { font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .road-pill .sub { font-size: 14px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ui .road-pill .sub.swap { animation: sub-swap 320ms var(--ease-out); }
@keyframes sub-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ui .road-pill .timer { position: relative; font-family: var(--font-num); font-size: 22px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ui .road-pill .beats { position: absolute; left: 62px; right: 70px; bottom: 3px; display: flex; gap: 4px; }
.ui .road-pill .beats i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.ui .road-pill .beats i.on { background: var(--gold); box-shadow: 0 0 6px rgba(243, 196, 64, 0.6); }
.ui .road-pill.is-late { grid-template-rows: auto auto; }
.ui .road-pill .late { position: relative; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 2px; }
.ui .road-pill .late .fine { font-size: 15px; opacity: 0.85; }
.ui .road-pill .late .btn { min-height: 44px; padding: 0 14px; font-size: 16px; }
.ui .road-pill.settling .timer { color: var(--red-hi); animation: blink 0.6s steps(1) infinite; }
.ui .grow-hint { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 15px; color: var(--wood); }
.ui .grow-hint .ico { width: 16px; height: 16px; filter: none; }
.ui .grow-hint b { color: var(--ink); }
@media (max-width: 700px) {
  .ui .road-pills { left: 10px; right: 10px; top: 182px; width: auto; }
  .ui .road-pill .cap { font-size: 15px; } .ui .road-pill .timer { font-size: 19px; }
}

/* phone: one road pill (nearest to settle) with a +N badge; the others collapse */
@media (max-width: 700px) {
  .ui .road-pills { top: 184px; gap: 6px; }
  .ui .road-pills .road-pill:not(.first) { display: none; }
  .ui .road-pill { grid-template-columns: 40px 1fr auto; padding: 4px 10px 4px 4px; border-radius: 14px; }
  .ui .road-pill .who { width: 40px; height: 40px; }
  .ui .road-pill .sub { display: none; }
  .ui .road-pill .beats { left: 52px; right: 64px; bottom: 2px; }
  .ui .road-pill .more { position: absolute; right: 8px; top: -10px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); border: 2px solid var(--ink); color: #fff; font-size: 13px; line-height: 18px; text-align: center; }
  .ui .primary-wrap .btn.big { font-size: 20px; }
}
.ui .road-pill .more { display: none; }
@media (max-width: 700px) { .ui .road-pill.first .more:not(:empty) { display: block; } }

/* ================================================================== round 7: cinematics, transitions, dossier, bulletin */
/* letterbox + camera breathing */
.ui .letterbox { position: absolute; left: 0; right: 0; height: 0; background: #06040f; z-index: 16; transition: height 600ms var(--ease-out); pointer-events: none; }
.ui .letterbox.top { top: 0; } .ui .letterbox.bottom { bottom: 0; }
body.ui.cinematic .letterbox { height: 7vh; }
body.ui.cinematic #app > canvas { animation: breathe 7s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
html[data-reduce-motion="1"] body.ui.cinematic #app > canvas { animation: none; }
/* parallax layers on the result card */
.ui .result-wrap .plx { transition: transform 120ms linear; will-change: transform; }
/* phone iris wipe for sheets */
@media (max-width: 700px) {
  .ui .side { clip-path: circle(0% at 50% 100%); transition: transform var(--t-slow) var(--ease-out-back), clip-path 480ms var(--ease-out); }
  .ui .side.open { clip-path: circle(150% at 50% 100%); }
}
/* dialogs: soft fade */
.ui .overlay { transition: opacity 260ms var(--ease-out); opacity: 0; }
.ui .overlay.open { opacity: 1; }
/* flying coins */
.ui .coin-layer { position: absolute; inset: 0; pointer-events: none; z-index: 65; }
.ui .fly-coin { position: absolute; width: 18px; height: 18px; filter: drop-shadow(0 2px 0 var(--ink)); will-change: transform; }
.ui .fly-coin .ico { width: 18px; height: 18px; filter: none; }
.ui .pill.catch { animation: pill-catch 220ms var(--ease-out-back); }
@keyframes pill-catch { 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* dossier */
.ui .dossier { background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), linear-gradient(135deg, #f6ead0, var(--parch) 60%, #e9d8b0); }
.ui .dossier::before { content: ''; position: absolute; left: 22px; right: 22px; top: 48px; height: 2px; background: repeating-linear-gradient(90deg, var(--wood-hi) 0 8px, transparent 8px 14px); opacity: 0.5; }
.ui .dossier-head { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; margin-top: 6px; }
.ui .dossier .mug { position: relative; display: grid; justify-items: center; gap: 0; }
.ui .dossier .mug .ring { position: relative; width: 118px; height: 118px; border-radius: 12px; border: 5px solid var(--ink); background: repeating-linear-gradient(0deg, #cdbd94 0 2px, #d9c99a 2px 12px); box-shadow: inset 0 0 0 4px var(--hood, var(--gold)), 0 5px 0 var(--ink); display: grid; place-items: center; overflow: hidden; }
.ui .dossier .mug .ring .spr { position: absolute; left: 50%; top: 50%; }
.ui .dossier .mug .ring::after { content: 'WANTED'; position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--cream); font-family: var(--font-stamp); font-size: 9px; letter-spacing: 2px; text-align: center; padding: 3px 0 4px; }
.ui .dossier .mug-plate { margin-top: -8px; position: relative; z-index: 1; padding: 6px 14px 7px; background: var(--parch); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--ink); font-size: 17px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .dossier .crown-badge { left: auto; right: 0; top: -8px; }
.ui .dossier .stamp-line { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .dossier-meta .big { font-size: 24px; }
.ui .dossier-section { margin-top: 14px; }
.ui .dossier-label { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin-bottom: 8px; }
.ui .dossier-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui .dossier-posters .mini-poster { padding: 8px 6px 8px; }
.ui .dossier-posters .mini-poster .h { font-size: 11px; letter-spacing: 1px; margin: 2px 0 4px; }
.ui .dossier-posters .mini-poster .pic { width: 56px; height: 56px; margin-bottom: 4px; }
.ui .dossier-posters .mini-poster .who { font-size: 12px; } .ui .dossier-posters .mini-poster .who b { font-size: 13px; }
.ui .dossier-posters .mini-poster .amt { font-size: 16px; }
.ui .dossier-posters .mini-poster .when, .ui .dossier-posters .mini-poster .taunt-line, .ui .dossier-posters .mini-poster .pstars { display: none; }
.ui .dossier-posters .empty { grid-column: 1 / -1; font-size: 15px; opacity: 0.7; padding: 10px 0; }
.ui .dossier .statgrid { margin-top: 12px; }
/* bulletin strip */
.ui .bulletin { margin: 0 0 12px; }
.ui .bulletin .notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ui .bulletin .note { position: relative; padding: 10px 12px 10px 14px; background: #fbf1d8; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 4px 0 rgba(27, 20, 16, 0.5); transform: rotate(var(--tilt, -1deg)); }
.ui .bulletin .note:nth-child(2) { --tilt: 1deg; } .ui .bulletin .note:nth-child(3) { --tilt: -0.5deg; }
.ui .bulletin .note::before { content: ''; position: absolute; top: -8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
.ui .bulletin .note .k { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .bulletin .note .v { font-size: 18px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .bulletin .note .v .money { color: var(--green-lo); }
.ui .bulletin .note .v i { font-style: italic; }
.ui .bulletin-title { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin: 2px 0 8px; }
@media (max-width: 700px) { .ui .dossier-head { grid-template-columns: 110px 1fr; } .ui .dossier .mug .ring { width: 100px; height: 100px; } .ui .dossier-posters { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
/* the drawer never grows wider than the viewport: the tab strip scrolls on phones instead of pushing the body out */
.ui .drawer { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { .ui .drawer .tabs { overflow-x: auto; scrollbar-width: none; } .ui .drawer .tabs::-webkit-scrollbar { display: none; } .ui .drawer .tab { flex: 0 0 auto; } }
@media (max-width: 700px) {
  .ui .list-row { grid-template-columns: 28px 64px minmax(0, 1fr); gap: 8px 12px; }
  .ui .list-row .amt { grid-column: 3; justify-self: start; max-width: none; font-size: 16px; }
  .ui .list-row > div:nth-child(3) { min-width: 0; }
}
/* lore round: Alan-a-Dale's prefix in the ticker, the Silver Arrow in place of the crown */
.ui .ticker .item.alan { color: var(--gold); cursor: default; }
.ui .ticker .item.alan b { color: var(--gold); }
.ui .crown-inline, .ui .crown-badge .ico { color: inherit; }
@media (max-width: 700px) { .ui .primary-wrap { overflow: hidden; } .ui .primary-wrap .btn.big { white-space: normal; font-size: 18px; } }
.ui .primary-wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { .ui .primary-wrap .btn.big { min-width: 0; } }
@media (max-width: 700px) { .ui .primary-wrap .btn.big > .ico { display: none; } }
/* road pill: ⤢ zooms out while the camera is in the raid; tapping the pill goes back to it */
.ui .road-pill .zoom { display: none; position: absolute; right: 6px; top: 4px; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 2px solid var(--ink); background: var(--parch); color: var(--ink); font: 14px/1 var(--font-ui); place-items: center; cursor: pointer; z-index: 2; }
body.ui.cinematic .road-pill .zoom { display: grid; }
.ui .road-pill .zoom:hover { background: var(--gold); }
@media (max-width: 700px) { .ui .road-pill .zoom { top: auto; bottom: 4px; } }
@media (max-width: 700px) { body.ui.cinematic .road-pill { padding-right: 36px; } .ui .road-pill .zoom { top: 50%; bottom: auto; transform: translateY(-50%); } }

/* ================================================================== calm pass: a quiet evening village, not a casino */
.ui { --t-fast: 200ms; --t-slow: 300ms; --ease-out-back: cubic-bezier(0.22, 1, 0.36, 1); }
/* HUD: one quiet pill (Robin's Share + cellars); raids/h lives in the board */
.ui #pill-bags, .ui #pill-heists { display: none; }
.ui .pill .sub-label { opacity: 0.7; margin-left: 2px; }
.ui .live-pill { --c: var(--gold-lo); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 3px 0 var(--ink); }
.ui .live-pill .reddot { background: var(--gold); box-shadow: 0 0 0 2px var(--ink); animation: none; }
.ui .live-pill .label { color: var(--parch); letter-spacing: 0.5px; text-transform: none; }
.ui .pill.live .num::after { display: none; }
.ui .pill.pulse { animation: pill-bump 800ms var(--ease-out) 2; }
.ui .phone-only { display: none; }
/* ticker: slower, quieter, no icons; phones show it only on tap */
.ui .ticker { opacity: 0.72; background: transparent; box-shadow: none; }
.ui .ticker .item { color: var(--parch); font-size: 13px; font-weight: 400; padding: 0 14px; }
.ui .ticker .item b { font-weight: 400; color: #fff; }
.ui .ticker .item .ico { display: none; }
.ui .ticker .item .amt { color: var(--gold); font-weight: 400; } .ui .ticker .item .amt.bad { color: var(--parch); }
.ui .ticker .sep { width: 4px; height: 4px; background: var(--parch); box-shadow: none; opacity: 0.5; }
.ui .ticker .item.alan, .ui .ticker .item.alan b { color: var(--gold); }
@media (max-width: 700px) { .ui .phone-only { display: inline-flex; } .ui .ticker { display: none; } body.ui.ticker-open .ticker { display: block; } }
/* panels: thinner frame, no double inner frame, more air, nothing pulsing */
.ui .panel { border-width: 4px; box-shadow: 0 5px 0 var(--ink), 0 12px 22px rgba(0, 0, 0, 0.4); }
.ui .side.panel { padding: 24px 26px 26px; }
.ui .outcome.win, .ui .outcome.lose { border-color: var(--wood-lo); background: rgba(255, 255, 255, 0.35); }
.ui .panel .field, .ui .panel .kv { margin-top: 14px; }
.ui .ichip.urgent .ring { animation: none; }
.ui .streak .flame { animation: none; }
.ui .bignum, .ui .bignum.gold { --c: var(--wood); --c-lo: var(--wood-lo); --c-hi: var(--wood-hi); box-shadow: inset 0 3px 0 var(--c-hi), inset 0 -5px 0 var(--c-lo), 0 4px 0 var(--ink); }
.ui .bignum.gold .val { color: var(--gold-hi); }
.ui .ichip.heist { --c: var(--gold-lo); } .ui .ichip .n.red { color: var(--parch); }
.ui .bulletin { display: none; }
.ui .board-note { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--wood); margin: 2px 0 10px; opacity: 0.8; }
.ui .sunburst { animation: none; opacity: 0.55; background: repeating-conic-gradient(from 0deg, rgba(255, 216, 102, 0.14) 0deg 10deg, rgba(255, 216, 102, 0) 10deg 20deg); }
.ui .sunburst.red { background: repeating-conic-gradient(from 0deg, rgba(229, 68, 58, 0.12) 0deg 10deg, rgba(229, 68, 58, 0) 10deg 20deg); }
.ui .btn.parch.big { color: var(--ink); }
.ui .ichip .ring .spr { position: absolute; left: 50%; top: 50%; z-index: 1; }
.ui .ichip.shield .ring { width: 30px; height: 30px; } .ui .ichip.shield .ring::before { inset: 3px; }
/* Robin's Share: the weekly pot tab, XP bar, referral line */
.ui .pot-card { border: 3px solid var(--ink); border-radius: 12px; background: rgba(255, 255, 255, 0.35); padding: 12px 14px 12px; margin-bottom: 12px; }
.ui .pot-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; }
.ui .pot-asset { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .pot-total { font-family: var(--font-num); font-size: 30px; color: var(--green-lo); text-align: center; }
.ui .pot-close { font-size: 14px; color: var(--wood); } .ui .pot-close b { color: var(--ink); }
.ui .pot-rows { margin-top: 8px; } .ui .pot-rows .kv { margin-top: 6px; padding: 4px 0; } .ui .pot-rows .kv.mine { background: rgba(243, 196, 64, 0.18); border-radius: 6px; padding: 4px 8px; }
.ui .pot-last { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed rgba(27, 20, 16, 0.25); }
.ui .pot-last .k { font-size: 14px; color: var(--wood); } .ui .pot-last .done { color: var(--green-lo); font-size: 15px; } .ui .pot-last .muted { opacity: 0.6; font-size: 14px; }
.ui .pot-fine { margin-top: 4px; opacity: 0.75; }
.ui .xp { margin-top: 8px; } .ui .xp-row { display: flex; justify-content: space-between; font-size: 14px; } .ui .xp-row b { font-size: 16px; }
.ui .xp-bar { height: 8px; border: 2px solid var(--ink); border-radius: 6px; background: rgba(27, 20, 16, 0.12); overflow: hidden; margin-top: 4px; } .ui .xp-bar i { display: block; height: 100%; background: var(--gold); }
.ui .ref-line { margin-top: 6px; }
@media (max-width: 700px) { .ui .pot-head { grid-template-columns: 1fr auto; } .ui .pot-total { grid-column: 1 / -1; text-align: left; font-size: 26px; } }
.ui .pot-rows .kv, .ui .pot-last { font-size: 15px; } .ui .pot-rows .kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .ui .pot-rows .kv b { text-align: right; }
/* rob the rich: gold variant of the result card and the poster */
.ui .result.rich { box-shadow: 0 0 0 3px var(--gold), 0 6px 0 var(--ink), 0 14px 24px rgba(0, 0, 0, 0.45); }
.ui .result.rich::before, .ui .poster.rich::before { content: 'ROB THE RICH'; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font-stamp); font-size: 9px; letter-spacing: 2px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 4px; padding: 3px 8px; z-index: 2; }
.ui .poster.rich { box-shadow: 0 0 0 4px var(--gold), 0 8px 0 var(--ink); }
/* X: verified check, x.com links, avatars, the Verify on X block */
.ui .vn { display: inline-flex; align-items: center; gap: 4px; }
.ui .chk { width: 13px; height: 13px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }
.ui a.xlink { color: inherit; text-decoration: none; } .ui a.xlink:hover { text-decoration: underline; text-decoration-color: var(--blue); }
.ui .mini-ring.has-av { overflow: hidden; } .ui .mini-ring img.av, .ui .ring img.av { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; border-radius: inherit; display: block; }
.ui .dossier .mug .ring.has-av .spr { display: none; } .ui .dossier .mug .ring img.av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.ui .xverify { margin-top: 14px; padding: 12px; border: 3px dashed rgba(27, 20, 16, 0.3); border-radius: 10px; }
.ui .xverify .xrow { margin-top: 8px; gap: 8px; } .ui .xverify .input.grow { flex: 1; min-width: 0; } .ui .xverify .fine.ok { color: var(--green-lo); }
.ui .sunday { justify-content: flex-start; margin-top: 10px; }
.ui .result .from .vn, .ui .poster .who .vn { vertical-align: middle; }
.ui .sunday { display: flex; align-items: center; gap: 10px; }
.ui .pill .ring.has-av .spr { display: none; } .ui .pill .ring.has-av { overflow: hidden; } .ui .pill .ring img.av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.ui .xverify .xrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.ui .xverify .xrow .input { min-width: 0; } .ui .xverify .xrow input { min-width: 0; width: 100%; }
@media (max-width: 420px) { .ui .xverify .xrow { grid-template-columns: 1fr 1fr; } .ui .xverify .xrow .input { grid-column: 1 / -1; } }
.ui .sunday .btn.small { box-shadow: 0 3px 0 var(--ink); }
/* Earn your hood: initiation steps + progress chip */
.ui .initiation { display: grid; gap: 8px; margin-top: 10px; }
.ui .initiation .step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 10px; }
.ui .initiation .step .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--parch); display: grid; place-items: center; font-family: var(--font-num); font-size: 14px; }
.ui .initiation .step.done { opacity: 0.6; } .ui .initiation .step.done .n { background: var(--green); border-color: var(--green); color: var(--ink); }
.ui .initiation .step .small { font-size: 13px; opacity: 0.75; }
.ui .hood-chip { --c: var(--gold-lo); gap: 8px; } .ui .hood-chip .num { font-size: 15px; }
.ui #hood-pick .hood { width: 26px; height: 26px; }
.ui #bag-body > .xverify { margin: 0 0 12px; }
.ui .xverify .xrow { grid-template-columns: 1fr auto; }
.ui .xverify .xrow .input { grid-column: 1 / -1; order: -1; }
.ui .xverify .xrow .input input { font-family: var(--font-ui); font-size: 15px; }
.ui .xverify .xrow #x-post { justify-self: start; }

/* ================================================================== onboarding chrome (docs/ONBOARDING.md) */
body.ui.tutorial .hud-top .hud-left, body.ui.tutorial .ticker, body.ui.tutorial .hud-bottom .toolbar, body.ui.tutorial .hud-bottom .minimap, body.ui.tutorial .hud-bottom .primary-wrap, body.ui.tutorial .hud-top .clock, body.ui.tutorial #toggle, body.ui.tutorial #howto-open, body.ui.tutorial #hood-chip { opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out); }
body.ui.tutorial.tut-slowmo #app > canvas { filter: saturate(1.2) brightness(1.05); }
.ui .tut-progress { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(420px, 70vw); height: 28px; z-index: 70; pointer-events: none; --p: 0%; }
.ui .tut-progress .bar { position: absolute; left: 14px; right: 14px; top: 12px; height: 6px; border: 2px solid var(--ink); border-radius: 5px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.ui .tut-progress .bar i { display: block; height: 100%; width: var(--p); background: var(--gold); transition: width 600ms var(--ease-out); }
.ui .tut-progress .star { position: absolute; top: -2px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); background: var(--wood-lo); color: rgba(255, 255, 255, 0.35); display: grid; place-items: center; font-size: 15px; line-height: 1; transform: translateX(-50%); }
.ui .tut-progress .s1 { left: 16.7%; } .ui .tut-progress .s2 { left: 50%; } .ui .tut-progress .s3 { left: 83.3%; }
.ui .tut-progress .star.on { background: var(--gold); color: var(--ink); } .ui .tut-progress .star.hood .hoodmark { display: block; width: 14px; height: 15px; margin: 2px auto 0; background: var(--hood, #3fa34d); border: 2px solid var(--ink); border-radius: 50% 50% 38% 38% / 62% 62% 30% 30%; box-sizing: border-box; } .ui .tut-progress .star.hood.on .hoodmark { box-shadow: 0 0 0 2px var(--gold) inset; } /* the rail: two stars and the hood (owner 10-22) */ .ui .tut-progress .star.fill { animation: star-fill 500ms var(--ease-out); }
@keyframes star-fill { 0% { transform: translateX(-50%) scale(0.6); } 60% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1); } }
.ui .tut-hand { position: fixed; z-index: 80; width: 32px; height: 32px; margin: -4px 0 0 -6px; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45)); animation: hand-bounce 625ms ease-in-out infinite; transition: left 160ms var(--ease-out), top 160ms var(--ease-out), opacity 150ms; }
.ui .tut-hand svg { width: 100%; height: 100%; } .ui .tut-hand.tap { animation: hand-tap 220ms var(--ease-out); }
@keyframes hand-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes hand-tap { 40% { transform: scale(0.85); } 100% { transform: scale(1); } }
.ui .tut-target { outline: 0; border-radius: 8px; position: relative; z-index: 1; filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.35)) drop-shadow(0 0 14px rgba(243, 196, 64, 0.45)); animation: tut-breathe 1.4s ease-in-out infinite alternate; } /* the one thing to touch: a soft gold glow that breathes, never a solid border */
@keyframes tut-breathe { from { filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.25)) drop-shadow(0 0 10px rgba(243, 196, 64, 0.3)); } to { filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.45)) drop-shadow(0 0 20px rgba(243, 196, 64, 0.6)); } }
html[data-reduce-motion] .ui .tut-target { animation: none; }
.ui .tut-dim { opacity: 0.35; pointer-events: none; transition: opacity 250ms; }
.ui .tut-bubble { position: fixed; z-index: 75; max-width: min(340px, calc(100vw - 32px)); padding: 10px 14px 12px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 var(--ink); font-size: 17px; line-height: 1.25; --tail-x: 40px; cursor: pointer; }
.ui .tut-bubble .who { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin-bottom: 2px; }
.ui .tut-bubble .tail { position: absolute; left: var(--tail-x); bottom: -14px; width: 0; height: 0; border: 12px solid transparent; border-top-color: var(--ink); border-bottom: 0; margin-left: -12px; }
.ui .tut-bubble .tail::after { content: ''; position: absolute; left: -9px; top: -13px; border: 9px solid transparent; border-top-color: var(--parch); border-bottom: 0; }
.ui .tut-bubble.bottom { left: 50%; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); } .ui .tut-bubble.bottom .tail { display: none; }
.ui .tut-bubble.pop { animation: bubble-pop 220ms var(--ease-out); } @keyframes bubble-pop { from { opacity: 0; transform: translateY(6px); } }
.ui .tut-bubble.bottom.pop { animation: bubble-pop-c 220ms var(--ease-out); } @keyframes bubble-pop-c { from { opacity: 0; transform: translate(-50%, 6px); } to { transform: translateX(-50%); } }
.ui .tut-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 85; } .ui .tut-flash.go { animation: flash 420ms ease-out; } @keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.ui .tut-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 84; }
.ui .tut-stamp { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 86; text-align: center; pointer-events: none; }
.ui .tut-stamp .word { font-family: var(--font-num); font-size: 84px; color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); letter-spacing: 4px; }
.ui .tut-stamp .amt { font-family: var(--font-num); font-size: 56px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); margin-top: -8px; }
.ui .tut-stamp.slam { animation: stamp-slam 420ms var(--ease-out); } @keyframes stamp-slam { 0% { transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); opacity: 0; } 60% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.92); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }
.ui .tut-stamp.out { transition: opacity 400ms, transform 400ms; opacity: 0; transform: translate(-50%, -70%) rotate(-6deg) scale(0.9); }
.ui .poster.print { animation: poster-print 700ms var(--ease-out) both; } @keyframes poster-print { from { transform: translateY(110vh); } to { transform: none; } }
.ui .poster.stamped h1 { animation: stamp-hit 300ms var(--ease-out); } @keyframes stamp-hit { 0% { transform: scale(1.6); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.ui .side.guided .btn.big { position: relative; }
.ui .tut-verify { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.ui .tut-verify .tut-vpanel { pointer-events: auto; width: min(440px, 100%); }
.ui .tut-verify .xrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; } .ui .tut-verify .xrow .input { grid-column: 1 / -1; } .ui .tut-verify .xrow input { width: 100%; min-width: 0; font-family: var(--font-ui); font-size: 15px; }
.ui .tut-verify .whittle { height: 56px; position: relative; margin-top: 8px; } .ui .tut-verify .whittle .spr { position: absolute; left: 24px; bottom: 0; } .ui .tut-verify .arrow-whittle { position: absolute; left: 64px; bottom: 16px; width: 40px; height: 4px; background: var(--wood-lo); animation: whittle 1.2s ease-in-out infinite alternate; } @keyframes whittle { to { width: 28px; } }
.ui .tut-ceremony { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(243, 196, 64, 0.25), rgba(6, 4, 15, 0.92) 60%); opacity: 0; transition: opacity 600ms var(--ease-out); }
.ui .tut-ceremony.go { opacity: 1; } .ui .tut-ceremony.out { opacity: 0; }
.ui .cer-inner { text-align: center; color: var(--parch); display: grid; justify-items: center; gap: 12px; padding: 20px; }
.ui .cer-ring { position: relative; width: 140px; height: 140px; border-radius: 50%; border: 5px solid var(--ink); background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); box-shadow: inset 0 0 0 5px var(--hood, var(--gold)), 0 0 60px rgba(243, 196, 64, 0.5); overflow: hidden; animation: cer-ring 900ms var(--ease-out); }
.ui .cer-ring .spr { position: absolute; left: 50%; top: 50%; } .ui .cer-ring .cer-hood { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -40px 40px -30px var(--hood, var(--gold)); }
@keyframes cer-ring { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.ui .cer-title { font-family: var(--font-num); font-size: 44px; color: var(--gold); text-shadow: 0 4px 0 var(--ink); } .ui .cer-sub { font-size: 18px; } .ui .cer-inner .hoods { width: min(100%, 420px); margin: 0 auto; }
.ui .pill.drop-in { animation: pill-drop 700ms var(--ease-out) both; } @keyframes pill-drop { 0% { transform: translateY(-80px); opacity: 0; } 70% { transform: translateY(6px); opacity: 1; } 100% { transform: none; } }
.ui .tut-skip { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 76; font: 14px var(--font-ui); color: var(--parch); background: rgba(6, 4, 15, 0.55); border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
@media (max-width: 700px) { .ui .tut-progress { top: 10px; width: 72vw; } .ui .tut-stamp .word { font-size: 56px; } .ui .tut-stamp .amt { font-size: 40px; } .ui .tut-rank .t { font-size: 32px; } .ui .cer-title { font-size: 34px; } .ui .tut-bubble { font-size: 16px; } }
body.ui.tutorial .hud-top { opacity: 0; pointer-events: none; }
.ui .tut-bubble.top { left: 50%; top: 52px; bottom: auto; transform: translateX(-50%); z-index: 71; } .ui .tut-bubble.top .tail { display: none; }
.ui .tut-bubble.top.pop { animation: bubble-pop-c 220ms var(--ease-out); }
.ui .tut-verify .tut-vpanel { padding-top: 40px; }
.ui .tut-verify { align-items: end; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.ui .tut-verify .whittle .spr { transform: translate(0, 0) scale(2); transform-origin: left bottom; }
@media (max-width: 700px) { .ui .tut-verify { align-items: center; padding-bottom: 16px; } .ui .tut-rank { top: 30%; } }
.ui .tut-progress { transition: opacity 600ms var(--ease-out); } .ui .tut-progress.fade { opacity: 0; }
@media (max-width: 700px) { .ui .tut-skip { bottom: auto; top: 46px; left: 10px; font-size: 13px; padding: 4px 10px; } }

/* ================================================================== raid v2 (docs/RAID.md): plank + arrow, raid chip, the personal poster */
body.ui.cinematic .road-pills { opacity: 0; pointer-events: none; transition: opacity 300ms; }
.ui .raid-chip { position: absolute; right: 16px; top: 108px; z-index: 21; padding: 6px 12px; border-radius: 999px; background: var(--hud-bg); border: 2px solid var(--gold-lo); color: var(--parch); font-size: 13px; letter-spacing: 1px; }
.ui .raid-chip b { font-family: var(--font-num); color: var(--gold-hi); font-size: 15px; }
@media (max-width: 700px) { .ui .raid-chip { top: 182px; right: 10px; } }
.ui .plank { position: relative; height: 30px; border: 3px solid var(--ink); border-radius: 4px; background: repeating-linear-gradient(90deg, var(--red) 0 18px, var(--red-lo) 18px 22px), var(--red); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.15), 0 4px 0 var(--ink); overflow: visible; }
.ui .plank::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0) 40%, rgba(0,0,0,0.22)); pointer-events: none; z-index: 1; }
.ui .plank .zone-win { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); background: repeating-linear-gradient(90deg, var(--green) 0 18px, var(--green-lo) 18px 22px), var(--green); border-right: 3px solid var(--ink); }
.ui .plank .arrow { position: absolute; z-index: 2; top: 50%; left: var(--x, 0%); width: 0; height: 0; transform: translate(-100%, -50%) translateX(-60px); transition: left 1100ms cubic-bezier(0.2, 0.9, 0.3, 1), transform 1100ms cubic-bezier(0.2, 0.9, 0.3, 1); pointer-events: none; }
.ui .plank .arrow .shaft { position: absolute; right: 0; top: -3px; width: 60px; height: 6px; background: #e9dcc0; border: 2px solid var(--ink); border-radius: 2px; }
.ui .plank .arrow .head { position: absolute; right: -14px; top: -9px; width: 0; height: 0; border-left: 16px solid #c9d2dc; border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
.ui .plank .arrow .fletch { position: absolute; right: 46px; top: -10px; width: 14px; height: 20px; background: linear-gradient(180deg, var(--gold) 0 50%, var(--cream) 50%); border: 2px solid var(--ink); transform: skewX(-22deg); }
.ui .plank .arrow.stuck { transform: translate(-100%, -50%) translateX(-14px); } /* the TIP marks the roll: the head's tip sits 14 px right of the arrow's origin */
.ui .plank .arrow.stuck .fletch { animation: fletch-wobble 500ms ease-out; } @keyframes fletch-wobble { 0% { transform: skewX(-20deg) rotate(10deg); } 50% { transform: skewX(-20deg) rotate(-6deg); } 100% { transform: skewX(-20deg); } }
.ui .needle-wrap.thunk .plank { animation: plank-thunk 320ms ease-out; } @keyframes plank-thunk { 0% { transform: translate(3px, 2px) rotate(-1deg); } 40% { transform: translate(-2px, 1px) rotate(0.6deg); } 100% { transform: none; } }
.ui .poster .pic-wrap { position: relative; width: 168px; height: 168px; margin: 12px auto; border: 4px solid var(--ink); background: #d9c99a; box-shadow: inset 0 0 0 4px var(--hood, var(--gold)); }
.ui .poster .pic-wrap .pic { width: 100%; height: 100%; margin: 0; border: 0; display: block; image-rendering: pixelated; }
.ui .poster .pic-wrap .av-big { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ui .poster .who .robber { font-size: 24px; display: block; } .ui .poster .who .line { margin-top: 4px; font-size: 16px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.ui .poster .av-sm { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; image-rendering: pixelated; vertical-align: middle; }
.ui .poster .reward { display: flex; flex-direction: column; align-items: center; margin: 8px 0 2px; }
.ui .poster .reward .k { font-family: var(--font-stamp); font-size: 10px; letter-spacing: 3px; color: var(--wood); }
.ui .poster .reward .amt { font-size: 34px; color: var(--green-lo); margin: 2px 0 0; } .ui .poster.busted .reward .amt { color: var(--red); } /* a win is green, red only for a loss (owner, 10-18: 'the reward in red') */
.ui .poster .q { font-style: italic; font-size: 16px; color: var(--ink); border-top: 3px solid var(--ink); padding-top: 10px; margin-top: 10px; }
.ui .poster .foot { font-size: 13px; color: var(--wood); margin-top: 8px; }
.ui .poster.practice:not(.first) .reward .k::after { content: ' · practice'; }
.ui .poster.first .sub#po-for { color: var(--green-lo); }
.ui .poster.busted .pic-wrap { filter: saturate(0.6); }
.ui .poster.busted .reward .k { visibility: hidden; position: relative; } .ui .poster.busted .reward .k::before { content: 'Forfeit'; visibility: visible; position: absolute; left: 50%; transform: translateX(-50%); }
.ui .poster .reward .k { text-transform: uppercase; }
.ui .tut-soft { opacity: 0.6; transition: opacity 250ms; } .ui .tut-soft:hover { opacity: 0.85; }
/* live-path fixes: whittling John at the sheet's right edge, name status, no-wallet primary, opaque ceremony */
.ui .tut-verify .whittle { height: 44px; margin-top: 14px; }
.ui .tut-verify .whittle .spr { left: auto; right: 10px; bottom: 0; transform: translate(0, 0) scale(1.6); transform-origin: right bottom; }
.ui .tut-verify .arrow-whittle { left: auto; right: 44px; bottom: 12px; }
.ui .name-status { margin-top: 6px; color: var(--green-lo); } .ui .name-status.bad { color: var(--red); }
.ui .btn.big.nowallet { --face: var(--parch); --hi: #fff6dc; --lo: #cdb98f; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } /* the parch recipe: a dark label with no dark shadow under it (the dark shadow on dark text read as a black blob) */
.ui .btn.big.nowallet .sub { color: var(--wood); text-shadow: none; }
.ui .wallets { margin-top: 8px; } .ui .wallets a { color: var(--blue-lo); }
.ui .tut-ceremony { background: radial-gradient(circle at 50% 40%, rgba(243, 196, 64, 0.22), rgba(6, 4, 15, 0) 45%), rgba(6, 4, 15, 0.97); }
.ui .cer-inner { background: rgba(6, 4, 15, 0.35); border-radius: 18px; padding: 24px 28px; max-width: calc(100vw - 32px); }
.ui .tut-verify .tut-vpanel .fine#tv-status { padding-right: 70px; }
.ui .tut-verify .whittle { position: absolute; right: 14px; bottom: 10px; width: 60px; height: 48px; margin: 0; }
.ui .tut-verify .whittle .spr { transform: translate(0, 0) scale(0.6); transform-origin: right bottom; }
.ui .tut-verify .arrow-whittle { right: 36px; bottom: 6px; width: 26px; }
@media (max-width: 700px) { .ui .cer-inner .hoods { gap: 8px; } } /* one row at the ceremony too */
/* onboarding v3: the three-sentence card, the checklist card */
/* v3 phone fixes: echo bubble wraps, the tutorial ribbon stays on one line */
.ui .tut-bubble.top { max-width: min(360px, calc(100vw - 24px)); white-space: normal; }
.ui .tut-bubble .txt { display: inline; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) { .ui #panel .ribbon.sm { white-space: nowrap; } } /* the head rule owns the size and the fit; no overflow clip here, so the ribbon keeps its tails on phones like the build sheet's */

/* ================================================================== v4 chrome (docs/GIANTS_V4.md): the banner, Little John's face, the road, the blocked card */
.ui .tut-banner { position: fixed; left: 50%; top: 0; transform: translate(-50%, -115%); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 12px 40px 18px; background: var(--red); color: #fff; border: 4px solid var(--ink); border-top: 0; border-radius: 0 0 24px 24px; box-shadow: inset 0 6px 0 var(--red-hi), inset 0 -8px 0 var(--red-lo), 0 8px 0 var(--ink), 0 16px 24px rgba(0, 0, 0, 0.4); font-family: var(--font-num); font-size: 44px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; pointer-events: none; transition: transform 460ms var(--ease-out-back); }
.ui .tut-banner.go { transform: translate(-50%, 0); }
.ui .tut-banner.out { transform: translate(-50%, -115%); transition: transform 380ms var(--ease-in); }
.ui .tut-banner .feather { width: 14px; height: 40px; background: var(--green); border: 3px solid var(--ink); border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; transform: rotate(-24deg); box-shadow: inset -4px 0 0 var(--green-lo); }
@media (max-width: 700px) { .ui .tut-banner { font-size: 30px; padding: 8px 24px 13px; gap: 10px; } .ui .tut-banner .feather { width: 10px; height: 28px; } }
/* Little John's face on the bubble */
.ui .tut-bubble { padding-left: 64px; min-height: 60px; }
.ui .tut-bubble .face { position: absolute; left: 8px; top: 8px; width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; background: var(--green-lo); overflow: hidden; display: grid; place-items: center; box-shadow: 0 2px 0 var(--ink); }
.ui .tut-bubble .face canvas { width: 42px; height: 42px; image-rendering: pixelated; }
/* EARN YOUR HOOD: the road */
.ui .road-card { width: min(640px, 100%); padding: 18px 20px 20px; text-align: center; }
.ui .road-card .close { top: 10px; right: 10px; }
.ui .road-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--wood); margin: 0 48px 14px 0; }
.ui .road-row { display: flex; align-items: flex-start; justify-content: center; margin: 4px 0 12px; }
.ui .road-row .link { flex: 1 1 0; max-width: 56px; height: 8px; margin-top: 36px; background: repeating-linear-gradient(90deg, var(--wood-hi) 0 8px, transparent 8px 14px); border-radius: 4px; }
.ui .node { display: grid; justify-items: center; gap: 6px; width: 96px; cursor: pointer; }
.ui .node.done, .ui .node.prize { cursor: default; }
.ui .node .ring { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--ink); background: var(--parch-lo); display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); transition: transform 220ms var(--ease-out); }
.ui .node .ring .spr { position: absolute; left: 50%; top: 50%; }
.ui .node .lbl { font-family: var(--font-num); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.ui .node.todo .ring { filter: grayscale(1) opacity(0.5); } .ui .node.todo .lbl { opacity: 0.55; }
.ui .node.done .ring { background: var(--parch-lo); } /* a ticked node keeps the parchment disc: the green check says done; the gold is the prize's alone */
.ui .node .tick { display: none; position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--green); border: 3px solid var(--ink); color: var(--ink); font: 700 18px/24px var(--font-ui); text-align: center; }
.ui .node.done .tick { display: block; }
.ui .node.next .ring { box-shadow: 0 0 0 3px rgba(243, 196, 64, 0.35), 0 0 18px rgba(243, 196, 64, 0.45), 0 4px 0 var(--ink); animation: node-breathe 1.4s ease-in-out infinite alternate; }
@keyframes node-breathe { from { box-shadow: 0 0 0 3px rgba(243, 196, 64, 0.25), 0 0 10px rgba(243, 196, 64, 0.3), 0 4px 0 var(--ink); } to { box-shadow: 0 0 0 3px rgba(243, 196, 64, 0.5), 0 0 22px rgba(243, 196, 64, 0.6), 0 4px 0 var(--ink); } }
.ui .node.next:hover .ring { transform: translateY(-3px); }
@keyframes node-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
html[data-reduce-motion] .ui .node.next .ring { animation: none; }
.ui .node.prize .ring { background: radial-gradient(circle, rgba(243, 196, 64, 0.55), var(--parch-lo) 72%); }
.ui .node .hoodpic { width: 60px; height: 60px; image-rendering: pixelated; }
.ui .poster-mini { display: grid; place-items: center; align-content: start; width: 40px; height: 52px; background: var(--parch); border: 3px solid var(--ink); border-radius: 3px; box-sizing: border-box; padding-top: 4px; }
.ui .poster-mini b { font: 5px var(--font-stamp); letter-spacing: 0; color: var(--ink); }
.ui .poster-mini i { width: 22px; height: 24px; border: 2px dashed var(--wood); margin-top: 3px; }
.ui .road-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
@media (max-width: 700px) { .ui .road-card { padding: 14px 8px 16px; } .ui .road-card .close { top: -16px; right: -8px; } .ui .road-numbers { margin: 0 0 14px; font-size: 12px; gap: 0 10px; } .ui .road-numbers .pot { display: none; } .ui .poster-mini b { display: none; } .ui .node { width: 70px; } .ui .node .ring { width: 60px; height: 60px; border-width: 3px; } .ui .node .hoodpic { width: 46px; height: 46px; } .ui .node .tick { width: 24px; height: 24px; font-size: 14px; line-height: 19px; right: -6px; bottom: -6px; } .ui .road-row .link { max-width: 22px; margin-top: 26px; height: 6px; } .ui .node .lbl { font-size: 12px; } .ui .poster-mini { width: 30px; height: 40px; } .ui .poster-mini i { width: 16px; height: 17px; } .ui .road-actions .btn.big { font-size: 24px; min-height: 56px; padding: 8px 24px 12px; } }
/* the blocked raid: a picture of what is missing + one button */
.ui .blocked { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, 0.35); }
.ui .blocked .hoodpic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch-lo); }
.ui .blocked .hoodpic canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.ui .blocked .frac { position: absolute; right: -10px; bottom: -6px; font-family: var(--font-num); font-size: 13px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 10px; padding: 1px 6px 2px; }
.ui .blocked .t { font-family: var(--font-num); font-size: 20px; text-align: left; color: var(--ink); line-height: 1.1; }
.ui .blocked .btn { min-height: 48px; font-size: 20px; padding: 8px 18px 11px; }

/* the deposit sheet, picture first */
.ui .dep-preview { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; margin: 2px 0 4px; }
.ui .dep-stage { position: relative; width: 136px; height: 112px; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, #2b1d5c 0 72%, #4a3320 72% 100%); overflow: hidden; box-shadow: inset 0 -4px 0 #3b2816; }
.ui .dep-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ui .dep-stage .puff { position: absolute; left: 50%; bottom: 26%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; opacity: 0; pointer-events: none; background: transparent; box-shadow: -18px -4px 0 4px #e9dcc0, 18px -2px 0 3px #e9dcc0, -8px -14px 0 3px #e9dcc0, 10px -12px 0 4px #e9dcc0, 0 2px 0 5px #e9dcc0; }
.ui .dep-stage .puff.go { animation: puff 480ms ease-out; } @keyframes puff { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.2); } }
.ui .dep-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: end; align-self: end; }
.ui .dchip { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1; padding: 4px 9px 5px; border: 2px solid var(--ink); border-radius: 10px; background: rgba(255, 255, 255, 0.4); color: var(--ink); white-space: nowrap; }
.ui .dchip.bad { background: var(--red); color: #fff; } .ui .dchip.tier { background: var(--gold); }
.ui .dep-row { display: flex; gap: 8px; align-items: stretch; } .ui .dep-row .input.grow { flex: 1; min-width: 0; }
.ui .slider.tiers { margin-top: 12px; }
.ui .tier-notches { position: relative; height: 20px; margin: 2px 12px 0; }
.ui .tier-notches i { position: absolute; left: var(--x); top: 0; width: 2px; height: 6px; background: var(--wood); }
.ui .tier-notches i b { position: absolute; top: 6px; left: 0; transform: translateX(-50%); font: 700 10px var(--font-ui); letter-spacing: 1px; text-transform: uppercase; color: var(--wood); white-space: nowrap; }
.ui .tier-notches i:first-child b { transform: none; } .ui .tier-notches i:last-child b { transform: translateX(-100%); }
@media (max-width: 700px) { .ui .dep-stage { width: 112px; height: 94px; } .ui .tier-notches i b { font-size: 9px; letter-spacing: 0.3px; } }
/* Sign your poster v3 (docs/X_POST.md): stepper, the card, the handle field, one primary per screen */
.ui .signposter.v3 { display: grid; gap: 10px; justify-items: center; }
.ui .signposter.v3 .stepper { display: flex; gap: 14px; justify-content: center; font: 700 11px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); } .ui .signposter.v3 .stepper i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; opacity: 0.55; } .ui .signposter.v3 .stepper i b { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--parch); } .ui .signposter.v3 .stepper i.on { opacity: 1; color: var(--ink); } .ui .signposter.v3 .stepper i.on b { background: var(--green); } .ui .signposter.v3 .stepper i.done { opacity: 0.8; } .ui .signposter.v3 .stepper i.done b { background: var(--gold); }
.ui .signposter.v3 .input.handle { width: 100%; max-width: 300px; padding: 6px 12px; } .ui .signposter.v3 .input.handle .at { font-family: var(--font-ui); font-weight: 700; font-size: 20px; opacity: 0.55; } .ui .signposter.v3 .input.handle input { font-family: var(--font-ui); font-size: 19px; font-weight: 700; }
.ui .signposter.v3 .card-wrap { position: relative; width: min(240px, 100%); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 0 var(--ink), 0 8px 18px rgba(0, 0, 0, 0.35); background: #2a1c0c; } .ui .signposter.v3 .card-wrap.small { width: min(200px, 100%); } .ui .signposter.v3 .card-wrap canvas { display: block; width: 100%; height: 100%; }
.ui .signposter.v3 .card-wrap .spin { position: absolute; left: 50%; top: 44%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid rgba(255, 240, 200, 0.35); border-top-color: #f3c440; display: none; animation: spin 800ms linear infinite; } .ui .signposter.v3 .card-wrap.loading .spin { display: block; } @keyframes spin { to { transform: rotate(360deg); } }
.ui .signposter.v3 .card-wrap .stamp { position: absolute; display: none; padding: 3px 9px 4px; font: 11px var(--font-stamp); letter-spacing: 2px; text-transform: uppercase; color: var(--red); border: 3px solid var(--red); border-radius: 4px; background: rgba(255, 250, 235, 0.85); } .ui .signposter.v3 .card-wrap .stamp.posted { left: 10px; top: 12px; transform: rotate(-12deg); } .ui .signposter.v3 .card-wrap .stamp.checked { right: 10px; bottom: 12px; transform: rotate(8deg); color: var(--green-lo); border-color: var(--green-lo); padding: 4px 8px 2px; }
.ui .signposter.v3.tapped .card-wrap .stamp.posted, .ui .signposter.v3.sign .card-wrap .stamp.posted, .ui .signposter.v3.checking .card-wrap .stamp.posted, .ui .signposter.v3.verified .card-wrap .stamp.posted { display: block; animation: stamp-hit 300ms var(--ease-out); } .ui .signposter.v3.verified .card-wrap .stamp.checked { display: block; animation: stamp-hit 300ms var(--ease-out); }
.ui .signposter.v3 .stepper-row { display: flex; align-items: center; width: 100%; } .ui .signposter.v3 .stepper-row .stepper { margin: 0 auto; } .ui .signposter.v3 .back-spacer { flex: none; width: 58px; } .ui .signposter.v3 .linkish.back { flex: none; width: 58px; text-align: left; padding: 4px 0; text-decoration: none; font-size: 14px; } /* ← Back on screens 2 and 3, the stepper stays centred */
  .ui .signposter.v3 .post-strip { display: grid; gap: 8px; width: 100%; max-width: 300px; } .ui .signposter.v3 .post-strip .btn.big b, .ui .signposter.v3 .post-row .btn.big b { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); font-family: var(--font-num); font-size: 13px; font-weight: 400; text-shadow: none; } .ui .signposter.v3 .btn.big.parch { color: var(--ink); } .ui .signposter.v3 .btn.big.parch b { background: rgba(0, 0, 0, 0.12); } .ui .signposter.v3 .btn.big.parch.done { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); } .ui .signposter.v3 .btn.big.parch.done b { background: var(--green); color: #fff; } /* 1 SAVE POSTER (gold once done) · 2 POST ON X */
  .ui .signposter.v3 .post-row.two { grid-template-columns: 1.7fr 1fr; width: 100%; max-width: 300px; } .ui .signposter.v3 .post-row.two .btn.big { font-size: 18px; } .ui .signposter.v3 .post-row.two .btn.parch { font-size: 16px; }
  .ui .signposter.v3 .btn.big .sub { font-size: 12px; margin-top: 1px; } .ui .signposter.v3 #tv-sign, .ui .signposter.v3 #x-sign { flex-wrap: wrap; line-height: 1.05; padding-top: 8px; padding-bottom: 10px; } .ui .signposter.v3 .btn.big .t { display: block; flex-basis: 100%; }
  .ui .signposter.v3 .sign-rows { display: grid; gap: 3px; justify-items: center; font: 700 14px var(--font-ui); color: var(--wood); } .ui .signposter.v3 .sign-rows i { font-style: normal; opacity: 0.45; } .ui .signposter.v3 .sign-rows i.done { opacity: 1; color: var(--green-lo); } .ui .signposter.v3 .sign-rows i.now { opacity: 1; color: var(--ink); animation: row-pulse 1s ease-in-out infinite; } @keyframes row-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Name ✓ · Claim ✓ · The Sheriff is reading…: the one in flight pulses */
  .ui .signposter.v3 .card-wrap .stamp.saved { left: 10px; bottom: 12px; transform: rotate(-8deg); color: var(--green-lo); border-color: var(--green-lo); } .ui .signposter.v3.saved .card-wrap .stamp.saved { display: block; animation: stamp-hit 300ms var(--ease-out); }
.ui .signposter.v3 .xmock { width: 100%; max-width: 300px; display: grid; gap: 4px; } .ui .signposter.v3 .xm-box { position: relative; height: 74px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden; } .ui .signposter.v3 .xm-av { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: #c9b98f; }
  .ui .signposter.v3 .xm-line { position: absolute; left: 38px; top: 10px; right: 8px; font: 600 12px var(--font-ui); color: #0f1419; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); animation: xm-type 6s steps(28, end) infinite; }
  .ui .signposter.v3 .xm-thumb { position: absolute; left: 38px; top: 30px; width: 30px; height: 38px; border-radius: 4px; background: linear-gradient(#e7d3a0, #c9a85d); border: 1px solid #8a6a2a; opacity: 0; transform: translateY(-14px) scale(1.3); animation: xm-drop 6s ease-out infinite; }
  .ui .signposter.v3 .xm-post { position: absolute; right: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px; font: 700 11px var(--font-ui); color: #fff; background: #8ecdf8; animation: xm-post 6s step-end infinite; }
  @keyframes xm-type { 0% { clip-path: inset(0 100% 0 0); } 35%, 100% { clip-path: inset(0 0 0 0); } } @keyframes xm-drop { 0%, 40% { opacity: 0; transform: translateY(-14px) scale(1.3); } 52%, 100% { opacity: 1; transform: none; } } @keyframes xm-post { 0%, 62% { background: #8ecdf8; } 63%, 100% { background: #1d9bf0; } }
  .ui .signposter.v3 .xm-cap { text-align: center; font-weight: 700; } /* the looping mock: the line types in, the poster drops in, Post lights (owner 10-19) */
  .ui .signposter.v3 .post-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 300px; } .ui .signposter.v3 .post-steps li.txt { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; opacity: 0.6; } .ui .signposter.v3 .post-steps li.txt.now { opacity: 1; } .ui .signposter.v3 .post-steps li.txt > b { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); font: 400 12px var(--font-num); } .ui .signposter.v3 .post-steps li.txt i { display: block; font: 700 16px var(--font-ui); font-style: normal; text-transform: uppercase; letter-spacing: 1px; } .ui .signposter.v3 .post-steps li.txt .fine { display: block; }
  .ui .signposter.v3 .check-q, .ui .signposter.v3 .nophoto { display: grid; gap: 8px; justify-items: center; width: 100%; max-width: 300px; text-align: center; } .ui .signposter.v3 .check-q .q, .ui .signposter.v3 .nophoto .q { font: 700 18px var(--font-ui); color: var(--ink); } .ui .signposter.v3 .nophoto .q { color: var(--red-lo, #a3261e); }
.ui .signposter.v3 .hoods { width: 100%; max-width: 300px; } .ui .signposter.v3 .btn.big { width: 100%; max-width: 300px; min-height: 60px; font-size: 22px; } .ui .signposter.v3 .btn.big:disabled { opacity: 0.55; cursor: default; }
.ui .signposter.v3 .post-row { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; max-width: 300px; } .ui .signposter.v3 .post-row:has(.btn + .btn) { grid-template-columns: 1.7fr 1fr; } .ui .signposter.v3 .post-row:has(.btn + .btn) .btn.big { font-size: 19px; letter-spacing: 0.5px; padding: 6px 8px 9px; } .ui .signposter.v3 .post-row .btn.parch { min-height: 60px; font-size: 16px; letter-spacing: 0.5px; padding: 6px 6px 9px; white-space: nowrap; } /* I POSTED IT · NOT YET on one line each, even at 390 */
@media (max-width: 400px) { .ui .signposter.v3 .post-row:has(.btn + .btn) .btn.big { font-size: 17px; } .ui .signposter.v3 .post-row .btn.parch { font-size: 15px; } }
.ui .signposter.v3 .post-row.tut-room, .ui .signposter.v3 .post-strip > .btn.tut-room, .ui .signposter.v3 .post-steps > li.tut-room { margin-bottom: 26px; } /* the glove hangs under the pointed button: the hint steps out of its way */
.ui .signposter.v3 .fine.hint { min-height: 18px; text-align: center; } .ui .signposter.v3 .links { display: flex; gap: 18px; justify-content: center; } .ui .signposter.v3 .linkish { border: 0; background: none; padding: 4px 2px; font: 700 14px var(--font-ui); color: var(--wood); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ui .signposter.v3 .linkish:hover { color: var(--ink); }
.ui .signposter.v3 .input.link { width: 100%; max-width: 300px; } .ui .signposter.v3 .status { min-height: 18px; text-align: center; } .ui .signposter.v3 .name-status { font-size: 13px; }
@media (max-width: 700px) { .ui .signposter.v3 .card-wrap { width: min(200px, 100%); } .ui .signposter.v3 .card-wrap.small { width: min(160px, 100%); } }
/* Sign your poster (v2, the paper poster: kept for the result card's mini posters) */
.ui .signposter { display: grid; gap: 10px; }
.ui .poster.sign { width: min(250px, 100%); margin: 0 auto; padding: 10px 12px 12px; border-width: 4px; box-shadow: inset 0 0 0 3px var(--wood-hi), 0 5px 0 var(--ink); }
.ui .poster.sign::before, .ui .poster.sign::after { top: 6px; left: 6px; width: 8px; height: 8px; } .ui .poster.sign::after { left: auto; right: 6px; }
.ui .poster.sign .sub { font-size: 11px; letter-spacing: 1px; } .ui .poster.sign h1 { font-size: 20px; letter-spacing: 3px; margin: 4px 0 2px; }
.ui .poster.sign .pic-wrap { position: relative; width: 96px; height: 96px; margin: 8px auto 6px; border: 3px solid var(--ink); background: #d9c99a; }
.ui .poster.sign .pic-wrap .pic { width: 100%; height: 100%; margin: 0; border: 0; display: block; image-rendering: pixelated; }
.ui .poster.sign .pic-wrap .av-big { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity 700ms; }
.ui .signposter.verified .pic-wrap .av-big { opacity: 1; }
.ui .poster.sign .pic-wrap.frame::after { content: ''; position: absolute; inset: 6px; border: 2px dashed rgba(27, 20, 16, 0.45); pointer-events: none; }
.ui .signposter.verified .pic-wrap.frame::after { display: none; }
.ui .poster.sign .stamp { position: absolute; display: none; padding: 2px 7px 3px; font: 9px var(--font-stamp); letter-spacing: 1px; text-transform: uppercase; color: var(--red); border: 3px solid var(--red); border-radius: 4px; background: rgba(241, 227, 191, 0.9); transform: rotate(-12deg); z-index: 2; }
.ui .poster.sign .stamp.posted { left: -14px; top: 6px; } .ui .poster.sign .stamp.linked { right: -12px; bottom: 10px; transform: rotate(10deg); }
.ui .poster.sign .stamp.checked { left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-6deg); color: var(--green-lo); border-color: var(--green-lo); padding: 4px 8px 2px; } .ui .poster.sign .stamp.checked .chk { width: 16px; height: 16px; }
.ui .signposter.paste .stamp.posted, .ui .signposter.verify .stamp.posted, .ui .signposter.checking .stamp.posted, .ui .signposter.verified .stamp.posted { display: block; animation: stamp-hit 300ms var(--ease-out); }
.ui .signposter.verify .stamp.linked, .ui .signposter.checking .stamp.linked, .ui .signposter.verified .stamp.linked { display: block; animation: stamp-hit 300ms var(--ease-out); }
.ui .signposter.verified .stamp.checked { display: block; animation: stamp-hit 300ms var(--ease-out); }
.ui .poster.sign .input.handle { margin-top: 4px; } .ui .poster.sign .input.handle input { font-family: var(--font-ui); font-size: 17px; }
.ui .poster.sign .name-status { margin-top: 4px; font-size: 13px; }
.ui .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui .steps3 .btn { min-height: 52px; font-size: 17px; padding: 6px 6px 9px; gap: 6px; border-radius: 12px; flex-wrap: nowrap; }
.ui .steps3 .btn b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); font-family: var(--font-num); font-size: 12px; font-weight: 400; text-shadow: none; }
.ui .steps3 .btn.now { --face: var(--green); --hi: #9df09d; --lo: var(--green-lo); }
.ui .steps3 .btn.todo { --face: var(--parch); --hi: #fff6dc; --lo: var(--parch-lo); color: var(--ink); text-shadow: none; opacity: 0.7; } .ui .steps3 .btn.todo b { background: rgba(0, 0, 0, 0.12); }
.ui .steps3 .btn.done { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); color: var(--ink); text-shadow: none; } .ui .steps3 .btn.done b { background: var(--green); }
.ui .signposter .input.link input { font-family: var(--font-ui); font-size: 15px; } .ui .signposter .input.link { padding-right: 6px; }
.ui .signposter .input.link .ok { flex: none; width: 44px; height: 44px; margin: -6px 0; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 3px 0 #fff6dc, inset 0 -3px 0 var(--parch-lo), 0 3px 0 var(--ink); padding: 0; opacity: 0.55; transition: background 120ms, opacity 120ms; } .ui .signposter .input.link .ok svg { width: 24px; height: 24px; }
.ui .signposter .input.link .ok.lit { opacity: 1; background: var(--green); box-shadow: inset 0 3px 0 #9df09d, inset 0 -3px 0 var(--green-lo), 0 3px 0 var(--ink); } .ui .signposter .input.link .ok.lit:active { transform: translateY(2px); box-shadow: inset 0 3px 0 #9df09d, inset 0 -3px 0 var(--green-lo), 0 1px 0 var(--ink); } .ui .signposter .input.link .ok:disabled { cursor: default; }
.ui .signposter .input.link .ok.tut-glow { animation: ok-pulse 1.2s ease-in-out infinite; } /* the paste step reads like the amount step: a recognised link lights the ✓ (owner, 10-18) */
.ui .signposter .status { min-height: 18px; text-align: center; margin-top: 0; }
.ui .signposter .whittle, .ui .tut-verify .signposter .whittle { position: relative; right: auto; bottom: auto; width: auto; height: 64px; margin: 4px 0 0; } .ui .signposter .whittle .spr, .ui .tut-verify .signposter .whittle .spr { position: absolute; left: 50%; right: auto; bottom: 0; transform: translateX(-70%) scale(0.8); transform-origin: 50% 100%; } .ui .signposter .arrow-whittle, .ui .tut-verify .signposter .arrow-whittle { left: 50%; right: auto; bottom: 10px; margin-left: 14px; }
.ui .tut-verify .tut-vpanel { width: min(400px, 100%); }
.ui .xverify { padding: 10px; }
.ui .xverify { margin: 12px 0 0; padding: 0; border: 3px dashed rgba(27, 20, 16, 0.3); border-radius: 12px; overflow: hidden; }
.ui .xverify-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: rgba(255, 255, 255, 0.25); color: var(--ink); font: 700 17px var(--font-ui); text-align: left; cursor: pointer; }
.ui .xverify-head .spr { transform: scale(1.4); transform-origin: 50% 50%; margin: 0 6px; } .ui .xverify-head .t { flex: 1; } .ui .xverify-head .caret { opacity: 0.6; transition: transform 200ms; }
.ui .xverify:not(.collapsed) .xverify-head .caret { transform: rotate(180deg); }
.ui .xverify.collapsed #xverify-body { display: none; } .ui #xverify-body { padding: 10px; }
.ui .xverify.verified .xverify-head { display: none; } .ui .xverify.verified #xverify-body .fine.ok { margin: 0; color: var(--green-lo); font-weight: 700; }
/* the road sheet never hides the street: no backdrop, parchment slightly see-through, bottom third on desktop (the sign, Little John and the vignette play behind it) */
.ui #tut-check.overlay { background: transparent; align-items: end; padding-bottom: 110px; pointer-events: none; } .ui #tut-check .road-card { pointer-events: auto; } /* the backdrop is see-through to the pointer too: the sign under the glove must take the tap while the sheet is up (owner: 'when I click POST nothing happens') */
.ui #tut-check .road-card { background: repeating-linear-gradient(0deg, transparent 0 11px, var(--parch-line) 11px 12px), rgba(241, 227, 191, 0.92); }
@media (max-width: 700px) { .ui #tut-check.overlay { align-items: center; padding-bottom: 16px; } }
/* v4 step 4: meters, the cart, the podium, chips in the cellar sheet, the help frames */
.ui .dchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; } .ui .dchip.on { background: var(--blue); color: var(--ink); }
.ui .meter { position: relative; height: 26px; border: 3px solid var(--ink); border-radius: 13px; background: var(--wood-lo); overflow: hidden; margin: 2px 0 8px; }
.ui .meter i { display: block; height: 100%; width: calc(var(--f, 1) * 100%); background: var(--red); box-shadow: inset 0 4px 0 var(--red-hi); transition: width 260ms var(--ease-out); }
.ui .meter.cap i { background: var(--gold); box-shadow: inset 0 4px 0 var(--gold-hi); }
.ui .meter b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-num); font-size: 14px; color: #fff; text-shadow: var(--outline-drop); }
.ui .meter.preview i { filter: brightness(1.15); }
.ui .ringc { position: relative; display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--f, 0) * 360deg), rgba(27, 20, 16, 0.18) 0); }
.ui .ringc::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--parch-lo); border: 3px solid var(--ink); }
.ui .ringc > * { position: relative; z-index: 1; }
.ui .cart-pic { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 2px 0 6px; }
.ui .cart-pic .ringc .spr { transform: scale(1.2); } .ui .cart-pic .ringc.on { background: conic-gradient(var(--blue) calc(var(--f, 0) * 360deg), rgba(27, 20, 16, 0.18) 0); }
.ui .pot-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ui .pot-top .trophy { width: 72px; height: 72px; } .ui .pot-top .trophy .ico { width: 30px; height: 30px; filter: none; color: var(--gold-lo); }
.ui .pot-top .pot-total { font-size: 34px; text-align: left; } .ui .pot-when { font-size: 14px; color: var(--wood); } .ui .pot-when b { color: var(--ink); }
.ui .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 6px; margin: 12px 0 4px; }
.ui .pod { display: grid; justify-items: center; gap: 4px; padding-bottom: 6px; border-radius: 10px 10px 0 0; background: rgba(107, 63, 34, 0.18); border: 2px solid rgba(27, 20, 16, 0.25); border-bottom: 4px solid var(--wood); }
.ui .pod.p1 { padding-top: 10px; min-height: 120px; background: rgba(243, 196, 64, 0.35); } .ui .pod.p2 { min-height: 96px; } .ui .pod.p3 { min-height: 84px; }
.ui .pod b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; } .ui .pod .mini-ring { width: 44px; height: 44px; border-width: 3px; } .ui .pod.p1 .mini-ring { width: 56px; height: 56px; }
.ui .pod .step { font-family: var(--font-num); font-size: 14px; color: var(--wood); font-style: normal; } .ui .pod .mini-ring.empty { opacity: 0.35; }
.ui .pot-mine { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(243, 196, 64, 0.2); }
.ui .pot-mine .coins { position: relative; width: 40px; height: 26px; } .ui .pot-mine .coins .spr { position: absolute; left: 0; bottom: 0; transform: scale(1.1); } .ui .pot-mine .coins .spr:nth-child(2) { left: 12px; bottom: 6px; } .ui .pot-mine .coins .spr:nth-child(3) { left: 22px; bottom: 1px; }
.ui .pot-mine b { font-size: 24px; } .ui .pot-mine .lbl { font-size: 14px; color: var(--wood); }
/* round 2 after v4 (docs/XSTEP_V2.md): the deposit's why and safety, the X step v2 */
.ui .mode-chip { display: inline-block; margin: 0 0 8px; padding: 3px 10px 4px; border: 2px solid var(--ink); border-radius: 10px; font: 700 12px var(--font-ui); letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 255, 255, 0.4); color: var(--wood); }
.ui .mode-chip.real { color: #fff; background: var(--red); } .ui .mode-chip.mock { color: var(--wood); background: rgba(27, 20, 16, 0.08); }
.ui .dep-why { font: 700 17px var(--font-ui); color: var(--ink); margin: 2px 0 8px; }
.ui .dchip .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; filter: none; }
.ui .dchips.upside { justify-content: center; margin-top: 8px; } .ui .dchip.good { background: var(--green); }
.ui .poster.sign .handle-line { margin-top: 6px; font: 700 20px var(--font-ui); color: var(--ink); min-height: 24px; } .ui .poster.sign .handle-line i { font-style: normal; opacity: 0.4; }
.ui .poster.sign .reward { display: flex; visibility: hidden; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 26px; } .ui .signposter.peek .reward { visibility: visible; } /* reserved space: the hover preview must not move the button under the pointer */
.ui .poster.sign .peekpic { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms; } .ui .signposter.peek .peekpic, .ui .signposter.peek .av-big { opacity: 1; }
.ui .signposter.peek .pic-wrap.frame::after { display: none; }
.ui .poster.sign .ringc.read { display: none; position: absolute; inset: -10px; width: auto; height: auto; border-radius: 8px; background: conic-gradient(var(--gold) calc(var(--f, 0) * 360deg), rgba(27, 20, 16, 0.15) 0); pointer-events: none; z-index: 0; }
.ui .poster.sign .ringc.read::before { inset: 7px; border-radius: 3px; background: transparent; border: 0; }
.ui .poster.sign .pic-wrap .pic { position: relative; z-index: 1; } .ui .poster.sign .pic-wrap .peekpic, .ui .poster.sign .pic-wrap .av-big { position: absolute; z-index: 1; } .ui .poster.sign .stamp { z-index: 2; } .ui .signposter.checking .ringc.read { display: block; }
.ui .signposter .post-preview { display: none; align-items: center; gap: 10px; padding: 8px 10px; border: 2px dashed rgba(27, 20, 16, 0.3); border-radius: 10px; background: rgba(255, 255, 255, 0.35); font-size: 14px; color: var(--ink); text-align: left; }
.ui .signposter.post .post-preview { display: flex; } .ui .signposter .post-preview .spr { flex: none; transform: scale(1.3); margin: 0 8px; } .ui .signposter .post-preview .txt { overflow-wrap: anywhere; }
.ui .signposter .copyhint { display: none; align-items: center; justify-content: center; gap: 8px; } .ui .signposter.paste .copyhint { display: flex; }
.ui .signposter .copyhint .f { display: inline-grid; place-items: center; min-width: 44px; height: 36px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: 700 14px var(--font-ui); font-style: normal; }
.ui .signposter .copyhint .f .ico { width: 18px; height: 18px; filter: none; } .ui .signposter .copyhint .f.share .ico { transform: rotate(-90deg); } .ui .signposter .copyhint .arr { font-style: normal; color: var(--wood); font-weight: 700; }
.ui .hood-chip .ringc.sm { width: 22px; height: 22px; } .ui .hood-chip .ringc.sm::before { inset: 4px; border-width: 2px; }
.ui .steps3 .btn[disabled] { filter: none; opacity: 0.9; }
/* round 3: the road is walked in order */
.ui .node.locked .ring { filter: grayscale(1) opacity(0.4); } .ui .node.locked { cursor: not-allowed; }
.ui .node .lock { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--parch); border: 3px solid var(--ink); display: grid; place-items: center; filter: none; opacity: 1; } .ui .node .lock .ico { width: 14px; height: 14px; filter: none; }
.ui .node.nudge .ring { animation: node-nudge 500ms var(--ease-out); } @keyframes node-nudge { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.ui .road-note { flex-basis: 100%; font: 700 15px var(--font-ui); color: var(--red); margin-top: 4px; } .ui .road-actions { flex-wrap: wrap; }
@media (max-width: 420px) { .ui .steps3 .btn { font-size: 15px; padding: 6px 4px 9px; gap: 4px; } }
.ui .poster.sign .no { font: 11px var(--font-stamp); letter-spacing: 1px; color: var(--red); margin: 2px 0 4px; text-transform: uppercase; }
.ui .poster.sign .line { font: italic 14px var(--font-ui); color: var(--wood); margin-top: 4px; }
/* the glove is enough on a slider: no gold ring on range inputs (owner, play street) */
.ui input[type="range"].tut-target, .ui .slider.tut-target { outline: 0; outline-offset: 0; border-radius: 10px; }
/* the tutorial win's poster is the victory: gold frame, glow, one green way on */
.ui .poster.first { box-shadow: inset 0 0 0 4px var(--wood-hi), 0 0 0 4px var(--gold), 0 8px 0 var(--ink), 0 0 70px rgba(243, 196, 64, 0.45); }
.ui .poster.first .reward .amt { font-size: 40px; }
.ui .poster .actions #po-go { flex-basis: 100%; font-size: 26px; padding: 12px 20px 18px; white-space: nowrap; }
/* ================================================================== the companion (docs/COMPANION.md) */
.ui .companion { position: fixed; inset: 0; z-index: 78; pointer-events: none; }
.ui .companion[hidden] { display: none; }
.ui .companion .cp-dim { position: absolute; inset: 0; background: rgba(6, 4, 15, 0.35); opacity: 0; transition: opacity 180ms var(--ease-out); pointer-events: none; }
.ui .companion.talk .cp-dim { opacity: 1; pointer-events: auto; }
.ui .companion .cp-bust { position: absolute; left: 12px; bottom: -24px; width: 192px; height: 288px; display: none; transform: translateX(-110%); transition: transform 180ms var(--ease-out); pointer-events: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.ui .companion.talk .cp-bust { display: block; } .ui .companion.talk.in .cp-bust { transform: translateX(0); animation: cp-bob 1.2s ease-in-out infinite alternate; } .ui .companion.out .cp-bust { transform: translateX(-110%); transition-duration: 150ms; }
@keyframes cp-bob { from { translate: 0 0; } to { translate: 0 -1px; } }
.ui .companion .cp-bust .spr { position: absolute; left: 0; bottom: 0; } .ui .companion .cp-bust canvas { position: absolute; left: 28px; bottom: 0; width: 136px; height: 256px; image-rendering: pixelated; }
.ui .companion .cp-box { position: absolute; left: 212px; bottom: 150px; width: min(520px, calc(100vw - 240px)); min-height: 0; padding: 18px 20px 20px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch); border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink), 0 14px 24px rgba(0, 0, 0, 0.4); color: var(--ink); font: 24px/1.3 var(--font-ui); display: none; opacity: 0; transform: translateX(-16px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); pointer-events: auto; cursor: pointer; user-select: none; }
.ui .companion.talk .cp-box { display: block; } .ui .companion.talk.in .cp-box { opacity: 1; transform: translateX(0); } .ui .companion.out .cp-box { opacity: 0; transition-duration: 150ms; }
.ui .companion .cp-name { position: absolute; left: 14px; top: -16px; padding: 3px 12px 5px; background: var(--green); border: 3px solid var(--ink); border-radius: 10px; font: 14px var(--font-num); letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.ui .companion .cp-text { min-height: 2.6em; max-height: 3.9em; overflow: hidden; white-space: pre-wrap; padding-right: 22px; } /* two lines minimum, three at most; the box grows with the line */
.ui .companion .cp-chev { position: absolute; right: 16px; bottom: 8px; font: 15px var(--font-ui); text-transform: lowercase; color: var(--ink); opacity: 0; animation: cp-hint 260ms ease-out 120ms forwards; } .ui .companion .cp-chev[hidden] { display: none; }
@keyframes cp-hint { to { opacity: 0.6; } }
.ui .companion .cp-box.printed { animation: cp-bob-once 320ms ease-out; } @keyframes cp-bob-once { 0% { translate: 0 0; } 45% { translate: 0 -2px; } 100% { translate: 0 0; } }
.ui .companion .cp-tail { position: absolute; left: -18px; top: 36px; width: 0; height: 0; border: 12px solid transparent; border-right-color: var(--ink); border-left: 0; } .ui .companion .cp-tail::after { content: ''; position: absolute; left: 5px; top: -9px; border: 9px solid transparent; border-right-color: var(--parch); border-left: 0; }
.ui .companion .cp-medal { position: absolute; left: 16px; top: 60px; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 40%, #6fb86f, #2d6b2d 80%); box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--gold); display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.ui .companion .cp-medal[hidden] { display: none; } .ui .companion .cp-medal canvas { width: 72px; height: 72px; image-rendering: pixelated; } .ui .companion .cp-medal .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ui .tut-bubble.beside { left: 124px; top: 70px; bottom: auto; right: auto; transform: none; max-width: min(360px, calc(100vw - 140px)); z-index: 79; } .ui .tut-bubble.beside .tail { display: none; } .ui .tut-bubble.beside .face { display: none; } .ui .tut-bubble.beside { padding-left: 14px; min-height: 0; }
.ui .tut-bubble.beside.pop { animation: bubble-pop 220ms var(--ease-out); }
html[data-reduce-motion] .ui .companion .cp-bust, html[data-reduce-motion] .ui .companion .cp-chev { animation: none; }
@media (max-width: 700px) {
  .ui .companion .cp-bust { width: 160px; height: 240px; left: 4px; bottom: -20px; } .ui .companion .cp-bust .spr { transform: scale(0.8333); transform-origin: 0 100%; } .ui .companion .cp-bust canvas { width: 113px; height: 213px; left: 24px; }
  .ui .companion .cp-box { left: 12px; right: 12px; width: auto; bottom: 236px; font-size: 20px; min-height: 0; padding: 16px 16px 18px; }
  .ui .companion .cp-tail { left: 60px; top: auto; bottom: -18px; border: 12px solid transparent; border-top-color: var(--ink); border-bottom: 0; border-left: 12px solid transparent; } .ui .companion .cp-tail::after { left: -9px; top: -13px; border: 9px solid transparent; border-top-color: var(--parch); border-bottom: 0; }
  .ui .companion .cp-medal { top: 86px; left: 10px; width: 72px; height: 72px; } .ui .companion .cp-medal canvas { width: 54px; height: 54px; } .ui .companion .cp-medal .spr { transform: translate(-50%, -50%) scale(0.75); }
  .ui .tut-bubble.beside { left: 92px; top: 92px; max-width: calc(100vw - 104px); }
}
/* the raid panel's ribbon stays on one line at every width (the tutorial label is long) */
.ui .side > .ribbon { max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
@media (min-width: 701px) { .ui #panel .ribbon.sm { font-size: 15px; letter-spacing: 0.5px; padding: 7px 14px 9px; margin: -6px 56px 12px 8px; } }
.ui #panel > .close { z-index: 6; } /* the close button sits above the ribbon's tail */
/* the raid panel reads odds · what you win · what you risk, each once */
.ui .bignum.win { --c: var(--wood); --c-lo: var(--wood-lo); --c-hi: var(--wood-hi); } .ui .bignum.win .val { color: var(--green); }
.ui .outcomes.one { grid-template-columns: 1fr; }
/* the wallet picker (EIP-6963: every installed wallet announces itself) */
.ui .dialog .wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.ui .dialog .wallet { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: var(--parch); color: var(--ink); font: 700 16px var(--font-ui); cursor: pointer; text-align: left; }
.ui .dialog .wallet img { width: 28px; height: 28px; border-radius: 6px; } .ui .dialog .wallet:hover { background: #fff6dc; }
/* the loading screen ends on TAP TO ENTER (the first gesture unlocks audio) */
/* the raid panel header: the target in one line, then one outcome plank split at the odds (the bar the arrow will hit) with the money under each half */
.ui #panel .target { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; min-height: 56px; }
.ui #panel .target .ring { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--gold); background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); box-shadow: 0 3px 0 var(--ink); }
.ui #panel .target .ring .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .ui #panel .target .ring .badge { position: absolute; right: -8px; top: -8px; z-index: 2; }
.ui #panel .target .who { flex: 1; min-width: 0; } .ui #panel .target .nameplate { display: inline-block; max-width: 100%; margin: 0; padding: 4px 12px 5px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui #panel .target .meta { margin-top: 4px; font-size: 15px; color: var(--wood); font-variant-numeric: tabular-nums; } .ui #panel .target .meta .money { font-family: var(--font-num); font-weight: 400; color: var(--ink); font-size: 17px; }
.ui #panel .target .ichips { flex: none; margin: 0; } .ui #panel .target .ichips:empty { display: none; }
.ui .outcome-bar { margin: 2px 0 10px; }
.ui .outcome-bar .plank { height: 40px; border-radius: 6px; }
.ui .outcome-bar .plank .pct { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; font-family: var(--font-num); font-size: 20px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: 1px; font-variant-numeric: tabular-nums; min-width: 4ch; }
.ui .outcome-bar .plank .pct.win { left: calc(var(--w, 50%) - 10px); transform: translate(-100%, -50%); text-align: right; } .ui .outcome-bar.narrow .plank .pct.win { left: calc(var(--w, 50%) + 10px); transform: translate(0, -50%); text-align: left; }
.ui .outcome-bar .plank .pct.lose { right: 10px; opacity: 0.6; text-align: right; } .ui .outcome-bar.wide .plank .pct.lose { display: none; }
.ui .outcome-bar .plank .zone-win { border-right: 3px solid var(--ink); transition: width 120ms var(--ease-out); }
.ui .outcome-bar .plank .marker { position: absolute; z-index: 3; left: var(--x, 50%); bottom: -11px; width: 0; height: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid var(--ink); transition: left 120ms var(--ease-out); }
.ui .outcome-bar .plank .marker::after { content: ''; position: absolute; left: -5px; top: 3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--gold); }
.ui .outcome-bar .amounts { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-family: var(--font-num); font-size: 24px; font-variant-numeric: tabular-nums; }
.ui .outcome-bar .amounts span { min-width: 7ch; } .ui .outcome-bar .amounts .win { color: var(--green-lo); text-align: left; } .ui .outcome-bar .amounts .lose { color: var(--red); text-align: right; }
.ui .outcome-bar .amounts span::before { display: block; font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wood); } .ui .outcome-bar .amounts .win::before { content: 'win'; } .ui .outcome-bar .amounts .lose::before { content: 'caught'; }
@media (max-width: 700px) { .ui .outcome-bar .amounts { font-size: 21px; } .ui #panel .target .ring { width: 48px; height: 48px; } }
body.ui.title-up .hud-top, body.ui.title-up .ticker, body.ui.title-up .toasts, body.ui.title-up .toast, body.ui.title-up .tut-progress { opacity: 0 !important; pointer-events: none; transition: opacity 200ms; }
/* the odds: one number, one shape. A ring gauge with the chance inside, WIN / LOSE pills beside it */
.ui .gauge { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; }
.ui .ring-gauge { position: relative; flex: none; width: 136px; height: 136px; }
.ui .ring-gauge svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); overflow: visible; }
.ui .ring-gauge .track { fill: none; stroke: rgba(27, 20, 16, 0.15); stroke-width: 14; }
.ui .ring-gauge .arc { fill: none; stroke: var(--green); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 235.62; transition: stroke-dashoffset 200ms var(--ease-out); filter: drop-shadow(0 2px 0 var(--green-lo)); }
.ui .ring-gauge .gloss { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 235.62; transition: stroke-dashoffset 200ms var(--ease-out); transform: translate(0, -3px); }
.ui .ring-gauge .tip { transition: transform 200ms var(--ease-out), opacity 150ms; } .ui .ring-gauge .tip polygon { fill: var(--gold); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ui .ring-gauge .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ui .ring-gauge .num b { font-family: var(--font-num); font-weight: 400; font-size: 34px; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; letter-spacing: 1px; font-variant-numeric: tabular-nums; font-synthesis: none; }
.ui .ring-gauge .num span { display: block; margin-top: 4px; font: 700 12px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .gauge .pills { flex: 1; min-width: 0; display: grid; gap: 10px; }
.ui .pill-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 10px; border: 3px solid var(--ink); border-radius: 14px; color: #fff; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 3px 0 var(--ink); }
.ui .pill-out.win { background: var(--green); } .ui .pill-out.lose { background: var(--red); }
.ui .pill-out .k { font: 700 13px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.ui .pill-out b { font-family: var(--font-num); font-weight: 400; font-size: 22px; line-height: 1; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; font-synthesis: none; min-width: 7ch; text-align: right; white-space: nowrap; }
@media (max-width: 700px) { .ui .ring-gauge { width: 116px; height: 116px; } .ui .ring-gauge .num b { font-size: 28px; } .ui .pill-out b { font-size: 20px; } }
/* ================================================================== the landing (docs/LANDING.md): the live street is the art */
#loading { position: fixed; inset: 0; z-index: 200; background: linear-gradient(180deg, rgba(6, 4, 15, 0.5) 0%, rgba(6, 4, 15, 0.45) 20%, rgba(6, 4, 15, 0) 34%, rgba(6, 4, 15, 0) 60%, rgba(6, 4, 15, 0.45) 72%, rgba(6, 4, 15, 0.55) 100%); transition: opacity 400ms var(--ease-out); }
#loading.out { opacity: 0; pointer-events: none; }
#loading .black { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity 600ms ease-out; pointer-events: none; } #loading.lit .black { opacity: 0; }
/* the entry (owner 10-24): no PLAY button. The button covers the screen; while loading it reads LOADING N% over a thin bar, then TAP TO PLAY breathes and a tap anywhere enters. The Band door (a visitor sent to onboarding) keeps a green button */
#loading .enter { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: default; -webkit-tap-highlight-color: transparent; outline: none; font-family: var(--font-btn); font-weight: 400; font-synthesis: none; text-transform: uppercase; color: #fff4d8; }
#loading .enter .word { position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%); white-space: nowrap; font-size: 22px; letter-spacing: 2px; text-shadow: 0 3px 0 var(--ink), 0 0 22px rgba(6, 4, 15, 0.7); transition: opacity 300ms var(--ease-out); }
#loading .enter .bar { position: absolute; left: 50%; top: calc(72% + 28px); width: 220px; height: 10px; transform: translateX(-50%); border: 3px solid var(--ink); border-radius: 8px; background: rgba(27, 21, 38, 0.7); overflow: hidden; box-shadow: 0 3px 0 var(--ink); transition: opacity 300ms var(--ease-out); }
#loading .enter .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(180deg, #ffe27a, var(--gold)); transition: width 220ms var(--ease-out); }
#loading .enter.ready { cursor: pointer; } #loading .enter.ready .bar { opacity: 0; }
#loading .enter.tap .word { font-size: 40px; letter-spacing: 3px; color: #fff4d8; text-shadow: -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 6px 0 var(--ink), 0 0 26px rgba(255, 213, 74, 0.35); animation: tap-breathe 1.6s ease-in-out infinite; } /* the title sign's hard ink outline, a soft gold glow */
@keyframes tap-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); color: #fff4d8; } 50% { transform: translate(-50%, -50%) scale(1.05); color: #ffe27a; } }
#loading .enter.tap:focus-visible .word { outline: 3px solid var(--gold); outline-offset: 8px; border-radius: 8px; }
#loading .enter.tap.pressed .word { animation: tap-go 260ms var(--ease-out) forwards; } @keyframes tap-go { to { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } }
#loading .enter.door .word { padding: 16px 40px 18px; font-size: 30px; color: #fff; background: var(--green); border: 4px solid var(--ink); border-radius: 20px; box-shadow: inset 0 5px 0 #9df09d, inset 0 -7px 0 var(--green-lo), 0 6px 0 var(--ink), 0 12px 18px rgba(0, 0, 0, 0.45); }
#loading .enter.door.pressed .word { transform: translate(-50%, calc(-50% + 3px)); }
#loading .enter.fail .word { font-size: 18px; text-transform: none; color: #fff; background: var(--red); border: 4px solid var(--ink); border-radius: 16px; padding: 12px 20px; }
@media (prefers-reduced-motion: reduce) { #loading .enter.tap .word { animation: none; } }
#loading .chips { position: absolute; left: 50%; top: calc(70% + 54px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(640px, 86vw); }
#loading .chips span { font: 14px var(--font-ui); color: var(--ink); background: var(--parch); border: 2px solid var(--ink); border-radius: 12px; padding: 3px 10px 4px; white-space: nowrap; box-shadow: 0 2px 0 var(--ink); }
#loading .snd { position: absolute; z-index: 2; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); } #loading .snd .ico { width: 20px; height: 20px; } #loading .snd.off { background: var(--parch-lo); }
#loading .ver { position: absolute; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); font: 12px var(--font-ui); color: rgba(241, 227, 191, 0.55); }
@media (max-width: 700px) { #loading .enter .word { top: 70%; font-size: 18px; } #loading .enter .bar { top: calc(70% + 24px); width: 180px; } #loading .enter.tap .word { font-size: 30px; } #loading .enter.door .word { font-size: 24px; padding: 12px 30px 14px; } #loading .chips { top: calc(68% + 46px); max-width: 300px; } #loading .chips span { font-size: 13px; } }
html.landing .ui .hud-top, html.landing .ui .hud-bottom, html.landing .ui .ticker, html.landing .ui .road-pills, html.landing .ui .toasts, html.landing .ui .toast { opacity: 0 !important; pointer-events: none !important; }
/* the odds, third pass: a big number and a slim meter; the level badge off the face */
.ui .odds-tile { flex: 1; min-width: 0; display: grid; align-content: center; gap: 2px; }
.ui .odds-tile b { font-family: var(--font-num); font-weight: 400; font-size: 40px; line-height: 1; color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; font-synthesis: none; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 5px 0 var(--ink); } /* the outline is shadows: text-stroke is zeroed globally since the halo incident */
.ui .odds-tile .k { font: 700 12px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .odds-tile .meter-slim { position: relative; height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(27, 20, 16, 0.2); overflow: visible; }
.ui .odds-tile .meter-slim i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 25%); min-width: 4px; border-radius: 4px; background: var(--green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: width 200ms var(--ease-out); }
.ui .odds-tile .meter-slim i::after { content: ''; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--ink); }
.ui .gauge .pills { flex: 0 0 min(190px, 50%); }
/* the raid header is its own row: the ring on the left, name pill and money line stacked to its right, the badge bottom-right of the ring inside the row's box, the i pill right-aligned; nothing under the ribbon */
.ui #panel .target { align-items: flex-start; gap: 12px; margin: 12px 0 12px; padding: 4px 0 6px; }
.ui #panel .target .ring-box { position: relative; flex: none; width: 56px; height: 56px; margin: 2px 6px 6px 0; }
.ui #panel .target .ring-box .ring { width: 100%; height: 100%; overflow: hidden; }
.ui #panel .target .ring-box .badge { position: absolute; right: -6px; bottom: -6px; top: auto; transform: scale(0.6); transform-origin: 100% 100%; z-index: 2; } /* never over the face */
.ui #panel .target .who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 2px; }
.ui #panel .target .nameplate { margin: 0; } .ui #panel .target .meta { margin: 0; }
.ui #panel .target .info-pill { align-self: flex-start; margin-top: 8px; }
@media (max-width: 700px) { .ui #panel .target .ring-box { width: 48px; height: 48px; } }
/* identity links: never an underline, never blue; hover = the gold glow */
.ui a.xlink:hover { text-decoration: none; filter: drop-shadow(0 0 2px rgba(243, 196, 64, 1)) drop-shadow(0 0 6px rgba(243, 196, 64, 0.9)); }
.ui .nameplate:has(a.xlink:hover), .ui .vn-pill:has(a.xlink:hover) { box-shadow: inset 0 -3px 0 var(--parch-lo), 0 4px 0 var(--ink), 0 0 0 3px var(--gold), 0 0 14px rgba(243, 196, 64, 0.7); } /* the pill glows gold like a button */
@media (max-width: 700px) { .ui .gauge { flex-direction: column; align-items: stretch; gap: 12px; } .ui .odds-tile b { font-size: 36px; } .ui .gauge .pills { flex: none; width: 100%; } }
/* the raid sheet as a bet slip (Robinhood / Polymarket / Stake order tickets): target → YOUR BET (hero) → consequences → one CTA */
.ui #panel .info-pill, .ui #bagpanel .info-pill { margin-left: auto; align-self: flex-start; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch); color: var(--ink); font: 700 16px var(--font-ui); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 var(--ink); z-index: 6; }
.ui #panel .info-pill:hover, .ui #bagpanel .info-pill:hover { background: #fff6dc; } /* the build sheet's i is the identical pill (owner, 10-18: 'a different UX design now') */
.ui .bet-tile { position: relative; margin: 6px 0 12px; padding: 12px 14px 12px; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--ink); cursor: text; }
.ui .bet-tile label { display: block; font: 700 12px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin-bottom: 4px; } .ui .bet-tile label .muted { opacity: 0.7; letter-spacing: 1px; text-transform: none; font-weight: 500; }
.ui .bet-amount { display: flex; align-items: baseline; gap: 8px; }
.ui .bet-amount input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font-family: var(--font-num); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; font-synthesis: none; padding: 0; caret-color: var(--green-lo); }
.ui .bet-amount .unit { font: 700 14px var(--font-ui); letter-spacing: 1px; color: var(--wood); }
.ui .quick { display: flex; gap: 6px; margin: 8px 0 10px; }
.ui .quick button { flex: 1; padding: 5px 0 6px; border: 2px solid var(--ink); border-radius: 10px; background: var(--parch); color: var(--ink); font: 700 13px var(--font-ui); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.ui .quick button.on { background: var(--green); color: #fff; text-shadow: 0 1px 0 var(--ink); } .ui .quick button:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.ui .slider.thin { height: 10px; border-width: 2px; border-radius: 5px; } .ui .slider.thin::-webkit-slider-thumb { width: 24px; height: 24px; }
.ui .bet-tile.tut-glow { animation: tut-breathe 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.35)) drop-shadow(0 0 14px rgba(243, 196, 64, 0.45)); }
.ui .outcome-strip { margin: 0 0 12px; }
.ui .outcome-strip .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui .otile { padding: 8px 12px 9px; border: 3px solid var(--ink); border-radius: 14px; color: #fff; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 3px 0 var(--ink); }
.ui .otile.win { background: var(--green); } .ui .otile.lose { background: var(--red); }
.ui .otile b { display: block; font-family: var(--font-num); font-weight: 400; font-size: 24px; line-height: 1.1; color: #fff; text-shadow: 0 2px 0 var(--ink); font-variant-numeric: tabular-nums; font-synthesis: none; white-space: nowrap; min-width: 7ch; }
.ui .otile span { display: block; margin-top: 2px; font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.95; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } .ui .otile span i { font-style: normal; font-family: var(--font-num); font-size: 14px; letter-spacing: 0; }
.ui .otile.win::before { content: 'win'; } .ui .otile.lose::before { content: 'lose'; } .ui .otile::before { display: block; font: 700 11px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; margin-bottom: 2px; }
.ui .outcome-strip .meter-slim { position: relative; height: 8px; margin-top: 10px; border-radius: 4px; background: rgba(27, 20, 16, 0.2); }
.ui .outcome-strip .meter-slim i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 25%); min-width: 4px; border-radius: 4px; background: var(--green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: width 200ms var(--ease-out); }
.ui .outcome-strip .meter-slim i::after { content: ''; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--ink); }
.ui #panel .send-wrap .btn.big { font-size: 30px; white-space: nowrap; } .ui #panel .send-wrap .btn.big .sub { white-space: nowrap; }
.ui #p-details { margin-top: 12px; } .ui #p-details summary { display: none; } .ui #p-details[hidden] { display: none; }
@media (max-width: 700px) { .ui .bet-amount input { font-size: 30px; } .ui .otile b { font-size: 21px; } .ui #panel .send-wrap .btn.big { font-size: 26px; } }
/* v5: the bet is a visible text field; TO WIN is the hero; the loss is one muted line (sportsbook slip / Stake dice / Polymarket) */
.ui .bet-amount { align-items: center; }
.ui .bet-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff8e6; box-shadow: inset 0 2px 0 rgba(27, 20, 16, 0.12); cursor: text; }
.ui .bet-box input { font-size: 28px; text-align: left; } .ui .bet-box input::placeholder { color: rgba(27, 20, 16, 0.55); font-family: var(--font-num); font-size: 28px; font-weight: 400; letter-spacing: 1px; opacity: 1; } /* the default bet, greyed: the player knows to put something in */
.ui .bet-box:focus-within { box-shadow: inset 0 2px 0 rgba(27, 20, 16, 0.12), 0 0 0 3px rgba(107, 212, 107, 0.45); }
.ui .bet-box .pen { width: 16px; height: 16px; flex: none; fill: rgba(27, 20, 16, 0.55); }
.ui .hero { margin: 0 0 12px; padding: 10px 14px 10px; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, 0.32); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--ink); }
.ui .hero .k { font: 700 12px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin-bottom: 2px; }
.ui .hero .pair { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ui .hero b { position: relative; display: inline-block; font-family: var(--font-num); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--green); font-variant-numeric: tabular-nums; font-synthesis: none; white-space: nowrap; min-width: 6ch; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 5px 0 var(--ink); }
.ui .hero b.spark::after, .ui .hero .chance i.spark::after { content: ''; position: absolute; right: -14px; top: -6px; width: 18px; height: 18px; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 0deg, var(--gold) 0 8%, transparent 8% 25%, var(--gold) 25% 33%, transparent 33% 50%, var(--gold) 50% 58%, transparent 58% 75%, var(--gold) 75% 83%, transparent 83%); border-radius: 50%; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: hero-spark 420ms var(--ease-out) 180ms both; }
.ui .hero .chance i.spark::after { right: -12px; top: -8px; width: 14px; height: 14px; }
@keyframes hero-spark { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1.1) rotate(30deg); } 100% { opacity: 0; transform: scale(0.6) rotate(60deg); } }
.ui .hero .chance { font: 700 13px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wood); } .ui .hero .chance i { position: relative; display: inline-block; font-style: normal; font-family: var(--font-num); font-weight: 400; font-size: 18px; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; font-synthesis: none; text-shadow: 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 1.5px 0 var(--ink), 0 -1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 3px 0 var(--ink); margin-right: 4px; }
.ui .hero .meter-slim { position: relative; height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(27, 20, 16, 0.2); }
.ui .hero .meter-slim i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 25%); min-width: 4px; border-radius: 4px; background: var(--green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: width 250ms var(--ease-out); }
.ui .hero .meter-slim i::after { content: ''; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--ink); }
.ui .hero .risk { margin-top: 6px; font: 600 12px var(--font-ui); color: rgba(27, 20, 16, 0.55); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ui .bet-box input { font-size: 26px; } .ui .hero b { font-size: 40px; } .ui .hero .pair { gap: 10px; } }
/* sticky sheet heads (owner: the X must never be missed): ribbon + close (+ the cellar's tabs) stay at the top while the body scrolls under them */
.ui .side > .sheet-head { position: sticky; top: 0; z-index: 7; margin: -18px -28px 10px; padding: 18px 28px 2px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch); border-bottom: 1px solid transparent; }
.ui .side.scrolled > .sheet-head { border-bottom-color: var(--ink); }
.ui .side > .sheet-head > .ribbon { position: relative; left: auto; top: auto; transform: none; display: table; margin: -6px auto 12px; white-space: nowrap; } /* the same shrink-to-fit centring the ribbon had as the panel's child */
.ui .side > .sheet-head > .tabs { margin-bottom: 0; }
.ui .side > .sheet-head > .close { top: 10px; right: 10px; }
@media (max-width: 700px) { .ui .side > .sheet-head { margin: -16px -18px 10px; padding: 16px 18px 2px; } }
/* the identity layer (docs/X_PRESENCE.md): the target as a person, the X glyph, the dossier */
.ui .xg { width: 12px; height: 12px; fill: currentColor; vertical-align: -1px; margin-right: 3px; }
.ui .xline { font: 700 13px var(--font-ui); color: var(--wood); } .ui .xline .vn { gap: 3px; }
.ui #panel .target .ring.has-av .spr { display: none; } .ui #panel .target .ring img.av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; image-rendering: auto; } .ui #panel .target .ring img.av.px { image-rendering: pixelated; } /* the 32 px plate file upscaled: pixel art stays crisp */
.ui #panel .target .ring-box .house-chip { position: absolute; left: -8px; bottom: -6px; width: 26px; height: 26px; border-width: 2px; box-shadow: 0 0 0 2px var(--ink); z-index: 2; background: var(--parch); }
.ui #panel .target .meta #p-no { display: block; font: 700 13px var(--font-ui); color: var(--wood); margin-bottom: 2px; } /* Outlaw No. · rank on its own line, the money line under it: no mid-line wrap */
.ui .list-row .meta .xg { width: 11px; height: 11px; }
/* the raid header, centred and on the rhythm of the tiles below (owner: 'the top part is small and asymmetric') */
.ui #panel .target { flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 6px 0 14px; padding: 0; }
.ui #panel .target .ring-box { width: 72px; height: 72px; margin: 0 0 6px; }
.ui #panel .target .ring-box .badge { right: -8px; bottom: -8px; transform: scale(0.66); }
.ui #panel .target .ring-box .house-chip { left: -10px; bottom: -6px; width: 28px; height: 28px; }
.ui #panel .target .p-name { font-family: var(--font-num); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--ink); font-synthesis: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui #panel .target .p-name .name-text { display: inline; } .ui #panel .target .p-name .stars-inline { font-size: 13px; vertical-align: middle; margin-left: 4px; }
.ui #panel .target .xline { font-size: 13px; }
.ui #panel .target .p-no { font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wood); }
.ui #panel .target .meta { font-size: 15px; } .ui #panel .target .meta .money { font-size: 18px; }
.ui #panel .target .ichips { justify-content: center; margin-top: 4px; }
.ui #panel .sheet-head .info-pill { position: absolute; right: 16px; top: 64px; margin: 0; } /* under the close, inside the sticky head so nothing covers it */
@media (max-width: 700px) { .ui #panel .target .ring-box { width: 64px; height: 64px; } .ui .bet-box input::placeholder { font-size: 26px; } .ui #panel .sheet-head .info-pill { right: 14px; top: 62px; } }
/* CONTINUE TUTORIAL: the Little John medallion chip under the HUD for a player who left the raid */
.ui .tut-resume { position: fixed; left: 16px; top: calc(108px + env(safe-area-inset-top)); z-index: 31; display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 5px; border: 3px solid var(--ink); border-radius: 999px; background: var(--parch); color: var(--ink); font: 700 13px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--parch-lo), 0 4px 0 var(--ink); cursor: pointer; animation: chip-breathe 2.4s ease-in-out infinite; }
.ui .tut-resume[hidden], body.title-up .tut-resume, html.landing .tut-resume { display: none; }
.ui .tut-resume .medal { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); overflow: hidden; }
.ui .tut-resume .medal .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.42); }
.ui .tut-resume:hover { transform: translateY(-2px); } .ui .tut-resume:active { transform: translateY(1px); box-shadow: inset 0 -3px 0 var(--parch-lo), 0 2px 0 var(--ink); }
@keyframes chip-breathe { 0%, 100% { box-shadow: inset 0 -3px 0 var(--parch-lo), 0 4px 0 var(--ink), 0 0 0 0 rgba(243, 196, 64, 0); } 50% { box-shadow: inset 0 -3px 0 var(--parch-lo), 0 4px 0 var(--ink), 0 0 0 5px rgba(243, 196, 64, 0.35); } }
@media (max-width: 700px) { .ui .tut-resume .long { display: none; } .ui .tut-resume { top: calc(122px + env(safe-area-inset-top)); } } /* under the HUD's two rows on phones, under the ticker on desktop */
/* the header row: house chip · square avatar · level badge (owner: the round ring cropped the pfp and left the sides bare) */
.ui #panel .target .id-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 2px 0 8px; }
.ui #panel .target .ring.sq { position: relative; flex: none; width: 80px; height: 80px; border-radius: 12px; border: 4px solid var(--gold); background: radial-gradient(circle at 50% 40%, #7a5aa8, #2b1d5c 80%); box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); overflow: hidden; }
.ui #panel .target .ring.sq img.av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; image-rendering: auto; } .ui #panel .target .ring.sq img.av.px { image-rendering: pixelated; } /* the 32 px plate file upscaled into the ring stays crisp */
.ui #panel .target .ring.sq.has-av .spr { display: none; }
.ui #panel .target .id-row .house-chip { position: relative; left: auto; bottom: auto; width: 36px; height: 36px; border-width: 3px; box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); background: var(--parch); }
.ui #panel .target .id-row .house-chip .spr { position: absolute; left: 50%; top: 50%; } /* the ring sprite's centring transform needs the absolute anchor */
.ui #panel .target .id-row .house-chip.ghost { visibility: hidden; }
.ui #panel .target .id-row .badge { position: static; transform: none; width: 36px; height: 36px; flex: none; }
.ui #panel .target .id-row .badge .t { font-size: 14px; }
@media (max-width: 700px) { .ui #panel .target .ring.sq { width: 72px; height: 72px; } }
/* the guided bet step: RAID waits until the bet is in */
.ui #panel.bet-pending .send-wrap .btn.big { opacity: 0.55; } .ui #panel.bet-pending .send-wrap .btn.big:hover { --lift: 0; }
/* ================================================================== the raid sheet, designed once (docs/RAID_SHEET.md): fixed header, scrolling middle of three tiles, fixed footer, details as a sub-sheet */
.ui .side.raid-sheet { display: flex; flex-direction: column; padding: 12px; overflow: hidden; top: 96px; bottom: 16px; max-height: none; }
.ui .side.raid-sheet.open { transform: translateX(0); }
.ui .raid-sheet .rs-head { position: relative; flex: none; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 100px; } /* the ribbon is capped away from the i and the close on the right and mirrored on the left */
.ui .raid-sheet .rs-head .info-pill { position: absolute; right: 52px; top: 12px; width: 40px; height: 40px; margin: 0; font-size: 18px; } /* in the fixed head, left of the close: reachable at any scroll */ /* 52 + the panel's 12: the ribbon is capped at sheet − 128 and can never reach the close */
.ui #panel.raid-sheet .ribbon.sm, .ui #bagpanel.raid-sheet .ribbon.sm, .ui .side.raid-sheet .ribbon.sm { margin: 0; max-width: 100%; font-size: 20px; letter-spacing: 1px; padding: 7px 16px 9px; } @media (max-width: 700px) { .ui #panel.raid-sheet .ribbon.sm, .ui #bagpanel.raid-sheet .ribbon.sm, .ui .side.raid-sheet .ribbon.sm { font-size: 17px; padding: 6px 14px 9px; } } /* both sheets' heads: the raid ribbon's full size (20 / 17 on phones), the same rule for BUILD (owner, 10-18: 'the BUILD title is too small'); fitRibbon() keeps the word inside the cap */ /* one size at every width; the id selectors outrank the old #panel .ribbon.sm phone/desktop rules (17 px + a 96 px cap, 15 px + 8/56 margins) that squeezed the head's ribbon to 62 px and ellipsised 'Tutorial raid' (owner, 10-18) */
@media (max-width: 700px) { body:has(#panel.open) .tut-skip { visibility: hidden; } } /* the phone sheet covers the skip pill's spot; the sheet's X is the way out while it is open */ /* one size at every width; the old desktop left-docked margins do not apply here */
.ui .raid-sheet .rs-head .rs-ribbon { position: relative; left: auto; top: auto; transform: none; display: block; margin: 0; max-width: 100%; min-width: 0; box-sizing: border-box; }
.ui .raid-sheet .rs-head .rs-ribbon > span { display: block; overflow: hidden; white-space: nowrap; } /* fitRibbon() picks the word and the size that fit: no ellipsis, ever */
.ui .raid-sheet .rs-head .close { position: absolute; top: 10px; right: 0; width: 44px; height: 44px; font-size: 24px; }
.ui .raid-sheet .rs-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px 4px 16px; overflow: hidden auto; overscroll-behavior: contain; }
.ui .raid-sheet .rs-body > .tile, .ui .raid-sheet .rs-body section > .tile { flex: none; margin: 0; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, 0.32); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--ink); }
.ui #panel.raid-sheet .target { margin: 0; padding: 16px 12px 14px; gap: 6px; }
.ui #panel.raid-sheet .target .id-row { margin: 0 0 8px; }
.ui #panel.raid-sheet .target .ring.sq { width: 96px; height: 96px; border-radius: 14px; }
.ui #panel.raid-sheet .target .ring.sq img.av { border-radius: 10px; }
.ui #panel.raid-sheet .target .ichips:empty { display: none; }
.ui .raid-sheet .rs-foot { flex: none; min-height: 96px; display: flex; align-items: center; justify-content: center; padding: 12px 4px 12px; } /* RAID alone, centred */
.ui .raid-sheet .rs-foot .send-wrap { flex: 1; min-width: 0; margin: 0; }
.ui .raid-sheet .rs-foot .send-wrap .btn.big { width: 100%; min-height: 56px; padding: 8px 12px 10px; font-size: 24px; }
.ui .raid-sheet .rs-foot .send-wrap .btn.big .sub { font-size: 12px; margin-top: 2px; }
.ui .raid-sheet .rs-details { position: absolute; left: 12px; right: 12px; top: 76px; bottom: 108px; z-index: 8; margin: 0; padding: 12px 16px 14px; border: 3px solid var(--ink); border-top: 3px solid var(--ink); border-radius: 16px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch); box-shadow: 0 -4px 0 var(--ink), 0 10px 22px rgba(0, 0, 0, 0.35); overflow: hidden auto; transform: translateY(16px); opacity: 0; transition: transform 200ms var(--ease-out), opacity 200ms; }
.ui .raid-sheet .rs-details[hidden] { display: none; } .ui .raid-sheet .rs-details.open { transform: none; opacity: 1; }
.ui .raid-sheet .rs-details .rs-dhead { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; font: 700 15px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); }
.ui .raid-sheet .rs-details .rs-dhead .close.sm { position: absolute; right: -4px; top: 0; width: 40px; height: 40px; font-size: 20px; }
.ui .raid-sheet .rs-details .kv { padding: 7px 0; }
@media (max-width: 700px) {
  .ui .side.raid-sheet { top: auto; bottom: 0; width: 100%; max-width: 560px; height: 92vh; max-height: 92vh; padding: 12px 12px calc(8px + env(safe-area-inset-bottom)); } /* full width on phones (the 380 px narrow-desktop width must not apply) */
  .ui .side.raid-sheet.open { transform: translate(-50%, 0); }
  .ui .raid-sheet .rs-head { height: 56px; padding: 0 100px; } .ui .raid-sheet .rs-head .close { top: 6px; } .ui .raid-sheet .rs-head .info-pill { top: 8px; }
  .ui .raid-sheet .rs-body { padding: 16px 4px 12px; gap: 16px; }
  .ui #panel.raid-sheet .target .ring.sq { width: 72px; height: 72px; }
  .ui .raid-sheet .rs-foot { min-height: 104px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); }
  .ui .raid-sheet .rs-details { top: 68px; bottom: 116px; }
}
@media (max-width: 700px) and (max-height: 700px) { .ui .side.raid-sheet { max-height: 92vh; } }
/* the amount's ✓ (owner: people are not used to Enter) */
.ui .bet-box .ok { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; border-radius: 50%; border: 3px solid var(--ink); background: var(--green); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 3px 0 #9df09d, inset 0 -3px 0 var(--green-lo), 0 3px 0 var(--ink); } /* the button recipe: green disc, ink outline, bevel, a white check with the ink stroke */
.ui .bet-box .ok svg { width: 24px; height: 24px; } .ui .bet-box .ok:active { transform: translateY(2px); box-shadow: inset 0 3px 0 #9df09d, inset 0 -3px 0 var(--green-lo), 0 1px 0 var(--ink); }
.ui .bet-box .ok[hidden] { display: none; } .ui .bet-box.typing .pen { display: none; }
/* the balance alone in the header, big; primaries always green */
.ui #panel.raid-sheet .target .meta { margin-top: 2px; } .ui #panel.raid-sheet .target .meta .money { font-size: 28px; }
.ui .btn.practice { --face: var(--green); --hi: #9df09d; --lo: var(--green-lo); }
/* guided steps never dim (owner): the sheet keeps full contrast; the ring, the glove and the step line show the target */
.ui .tut-dim, .ui .tut-soft { opacity: 1; pointer-events: auto; } .ui .tut-soft:hover { opacity: 1; }
.ui #bagpanel .tile.tut-glow, .ui #bagpanel .send-wrap.tut-glow { border-radius: 14px; animation: tut-breathe 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.35)) drop-shadow(0 0 12px rgba(243, 196, 64, 0.45)); }
/* what the hood is, said where it appears; the ✓ ringed during the guided bet step */
.ui .road-sub { margin-top: 2px; font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wood); text-align: center; }
.ui .node .lbl small { display: block; margin-top: 2px; font: 600 10px var(--font-ui); letter-spacing: 0.5px; text-transform: none; color: var(--wood); }
.ui .blocked .t small { display: block; font: 600 12px var(--font-ui); letter-spacing: 0.3px; color: var(--wood); }
.ui .bet-box .ok.tut-glow { animation: ok-pulse 1.2s ease-in-out infinite; box-shadow: inset 0 3px 0 #9df09d, inset 0 -3px 0 var(--green-lo), 0 3px 0 var(--ink), 0 0 0 4px rgba(243, 196, 64, 0.65), 0 0 14px rgba(243, 196, 64, 0.6); }
@keyframes ok-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* the needle legend says the outcome in words */
.ui .needle-legend .said { width: 100%; text-align: center; } .ui .needle-legend .said .r { color: var(--gold-hi); } .ui .needle-legend .said .in { color: var(--green); } .ui .needle-legend .said .out { color: #ff8a80; }
/* a tx in flight: the button holds its pressed, pulsing state until the chain answers */
.ui .btn.pending { animation: btn-pending 1.6s ease-in-out infinite; cursor: progress; opacity: 1; }
.ui .btn.pending .ico { width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; animation: glyph-tap 0.8s ease-in-out infinite; }
@keyframes btn-pending { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } } @keyframes glyph-tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
/* ================================================================== the build sheet (docs/BUILD_SHEET.md): the raid sheet's recipe; the sheet is as tall as its two tiles, never taller than the view */
.ui .side.cellar-sheet { bottom: auto; max-height: calc(100vh - 112px); }
.ui .cellar-sheet .rs-tabs { flex: none; margin: 0 4px 2px; } .ui .cellar-sheet .rs-tabs[hidden] { display: none; }
.ui .cellar-sheet .rs-body section.on { display: flex; flex-direction: column; gap: 16px; }
.ui .cellar-sheet .rs-body > .fine, .ui .cellar-sheet .rs-body section > .fine { margin: 0; }
.ui .cellar-sheet .rs-foot { display: none; } .ui .cellar-sheet.tab-deposit .rs-foot { display: flex; } /* the one button is the deposit tab's; defend and leave keep theirs in the body */
.ui .cellar-sheet .house-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 12px 10px; }
.ui .cellar-sheet .house-tile .dep-stage { width: 100%; max-width: 280px; height: 128px; border-radius: 14px; }
.ui .cellar-sheet .house-tile .tier-word { font-family: var(--font-num); font-weight: 400; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); font-synthesis: none; line-height: 1.2; }
.ui .cellar-sheet .cellar-tile { cursor: text; }
.ui .cellar-sheet .cellar-tile .seg { display: flex; width: 100%; margin: 2px 0 8px; } .ui .cellar-sheet .cellar-tile .seg button { flex: 1; padding: 6px 10px 7px; font-size: 14px; }
.ui .cellar-sheet .cellar-tile .bet-amount { align-items: center; }
.ui .cellar-sheet .cellar-tile .slider.tiers { margin-top: 12px; }
.ui .cellar-sheet .tier-notches { height: 22px; margin: 4px 12px 0; }
.ui .cellar-sheet .tier-notches i button { position: absolute; top: 6px; left: 0; transform: translateX(-50%); padding: 2px 4px 3px; border: 0; background: transparent; font: 700 10px var(--font-ui); letter-spacing: 1px; text-transform: uppercase; color: var(--wood); white-space: nowrap; cursor: pointer; border-radius: 6px; }
.ui .cellar-sheet .tier-notches i:first-child button { transform: none; margin-left: -4px; } /* castle sits at 85 % of the log scale, not at the end: it is centred like the others (the old right-aligned castle landed on abbey) */
.ui .cellar-sheet .tier-notches i button.on { color: var(--ink); background: rgba(243, 196, 64, 0.55); }
.ui .cellar-sheet .cellar-tile .risk { margin-top: 8px; font: 600 12px var(--font-ui); color: rgba(27, 20, 16, 0.55); }
.ui .cellar-sheet .cellar-tile .risk { display: flex; align-items: center; gap: 8px; } .ui .cellar-sheet .cellar-tile .risk .dchip { text-transform: uppercase; letter-spacing: .4px; font-size: 12px; } /* MAX LOSS 30% PER 6 H: the contract's cap, said before the money (owner 10-26, mac-db F2 part A) */
.ui .cellar-sheet .rs-foot .send-wrap .btn.big { font-size: 22px; }
.ui .cellar-sheet.has-tabs .rs-details { top: 128px; }
.ui .cellar-sheet .rs-details .kv span { color: var(--wood); }
@media (max-width: 700px) {
  .ui .side.cellar-sheet { height: auto; max-height: 92vh; }
  .ui .cellar-sheet .house-tile .dep-stage { height: 96px; }
  .ui .cellar-sheet .tier-notches i button { font-size: 9px; letter-spacing: 0.3px; }
  .ui .cellar-sheet.has-tabs .rs-details { top: 120px; }
}
/* the no-picture screen's two buttons (owner 10-19): equal columns, one line each at 390; last in the file so it beats the post-row :has() sizes */
.ui .signposter.v3 .nophoto .post-row.two { grid-template-columns: 1fr 1fr; } .ui .signposter.v3 .nophoto .post-row.two .btn.big { font-size: 16px; letter-spacing: 0; white-space: nowrap; padding-left: 4px; padding-right: 4px; min-width: 0; }
/* every two-button row in the sign sheet: equal halves, one line each, the fitter shrinks what still overflows (owner 10-19) */
.ui .signposter.v3 .check-q .post-row.two, .ui .signposter.v3 .post-row.two { grid-template-columns: 1fr 1fr; } .ui .signposter.v3 .check-q .post-row.two .btn, .ui .signposter.v3 .post-row.two .btn { min-width: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; font-size: 17px; letter-spacing: 0.5px; } .ui .signposter.v3 .check-q #tv-no, .ui .signposter.v3 .check-q #x-no { flex-wrap: wrap; line-height: 1.05; } .ui .signposter.v3 .check-q .btn .t { display: block; flex-basis: 100%; }
/* the tutorial's poster sheet scrolls inside the viewport: at 375x667 or a 700 px laptop window I POSTED IT sat below the edge, unreachable (found 10-19) */
.ui .tut-verify .tut-vpanel { max-height: calc(100vh - 16px - max(110px, calc(110px + env(safe-area-inset-bottom)))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 700px) { .ui .tut-verify .tut-vpanel { max-height: calc(100vh - 32px); } }
/* ================================================================== UI pass 10-19 (measured by uiaudit at 375/390/768/1024/1440) */
/* the profile head: the meta column is minmax(0, 1fr) so the 230 px star row wraps instead of pushing past the sheet's right edge; the dossier starts below the sticky head (it ran 6–8 px under it, the ribbon's tails covered OUTLAW RANK) */
.ui .dossier-head { grid-template-columns: 130px minmax(0, 1fr); margin-top: 18px; }
@media (max-width: 700px) { .ui .dossier-head { grid-template-columns: 110px minmax(0, 1fr); } }
.ui .dossier-meta { min-width: 0; } .ui .dossier-meta .stars { flex-wrap: wrap; gap: 4px 10px; }
/* the notice board's X sat under its own ribbon on phones (ribbon 59..330, close 316..360, ribbon z 1) */
.ui .wall > .close { z-index: 3; }
@media (max-width: 700px) { .ui .wall > .ribbon { max-width: calc(100% - 120px); font-size: 22px; } }
/* how it works: three equal cards that may shrink below their content (the third card spilled 22 px out of the sheet at 375/390) */
/* the poster's two buttons: stacked full width when two labels can't sit side by side (SHARE ON X / ROB HOODIE were clipped 4–9 px at 375–768) */
.ui .poster .actions { flex-wrap: wrap; } .ui .poster .actions .btn { flex: 1 1 150px; white-space: nowrap; }
/* tap targets: the tier ticks under the cellar slider were 14–15 px tall, the i pills 32 px; each gets an invisible 40+ px hit area, layout unchanged */
.ui .cellar-sheet .tier-notches i button::after { content: ''; position: absolute; inset: -13px -4px; }
.ui .cellar-sheet .tier-notches i button { font-size: 11px; }
@media (max-width: 700px) { .ui .cellar-sheet .tier-notches i button { font-size: 10px; letter-spacing: 0.5px; } }
.ui .raid-sheet .rs-head .info-pill::after { content: ''; position: absolute; inset: -6px; } /* the pill is absolute in the fixed head, so the hit area hangs off it without moving it */
/* the tutorial on phones: Little John's band (stars 10..38, skip 46..71, medal 86..158) owns the top; every sheet the tutorial opens starts below it instead of under it (the build sheet's house, the poster's first line and SIGN YOUR POSTER's ribbon were covered) */
@media (max-width: 700px) {
  body.cp-step #bagpanel.open, body.cp-step #panel.open { top: 166px; max-height: calc(100vh - 176px); }
  body.cp-step #poster-wrap, body.cp-step .tut-verify { padding-top: 166px; }
  body.cp-step .tut-verify .tut-vpanel { max-height: calc(100vh - 176px); }
}
/* phones: the side sheets are the screen's width (the 1100 px rule's 380 px came later and won, so at 375 every sheet sat 2.5 px past both edges) */
@media (max-width: 700px) { .ui .side { width: 100%; } }
.ui .poster .actions .btn { flex-basis: 180px; }
/* the bottom bar says what each icon opens (Supercell labels its nav); one look at every size */
.ui .toolbar .tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; }
.ui .toolbar .tool .ico { width: 26px; height: 26px; }
.ui .toolbar .tool .tool-lbl { font: 11px var(--font-num); letter-spacing: 0.5px; text-transform: uppercase; color: var(--parch); line-height: 1; text-shadow: 0 1px 0 var(--ink); }
@media (max-width: 700px) { .ui .toolbar .tool { width: 52px; height: 56px; } .ui .toolbar .tool .ico { width: 24px; height: 24px; } .ui .toolbar .tool .tool-lbl { font-size: 10px; } }
/* phones: money + hood + live on the left, the avatar and ONE menu on the right; help, day/night, the ballad and sound move into the menu */
@media (max-width: 700px) {
  .ui .hud-right #howto-open, .ui .hud-right #clock, .ui .hud-right #toggle, .ui .hud-right #ticker-open, .ui .hud-right #sound { display: none; }
  .ui .hud-right { flex-wrap: nowrap; }
}
.ui #menu-open { width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; }
.ui #menu-open .bars { display: grid; gap: 4px; width: 20px; } .ui #menu-open .bars i { display: block; height: 3px; border-radius: 2px; background: var(--parch); box-shadow: 0 1px 0 var(--ink); }
.ui #menu-open.active { border-color: var(--gold); background: rgba(243, 196, 64, 0.25); }
.ui .hud-menu { position: fixed; right: 10px; top: calc(66px + env(safe-area-inset-top)); z-index: 60; width: 236px; padding: 6px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--parch-line) 15px 16px), var(--parch); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink), 0 10px 24px rgba(0, 0, 0, 0.45); transform-origin: top right; animation: hm-in 160ms var(--ease-out); }
.ui .hud-menu[hidden] { display: none; }
@keyframes hm-in { from { opacity: 0; transform: scale(0.92) translateY(-4px); } to { opacity: 1; transform: none; } }
html[data-reduce-motion] .ui .hud-menu { animation: none; }
.ui .hud-menu .hm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 19px var(--font-ui); text-align: left; cursor: pointer; }
.ui .hud-menu .hm-row + .hm-row { border-top: 1px dashed rgba(27, 20, 16, 0.25); border-radius: 0; }
.ui .hud-menu .hm-row:active, .ui .hud-menu .hm-row:hover { background: rgba(243, 196, 64, 0.3); }
.ui .hud-menu .hm-row .ico { width: 22px; height: 22px; flex: none; color: var(--ink); filter: none; } .ui .hud-menu .hm-row .glyph { display: grid; place-items: center; font-size: 20px; }
.ui .hud-menu .hm-row > span:not(.ico) { flex: 1; }
.ui .hud-menu .hm-state { font: 13px var(--font-num); text-transform: uppercase; letter-spacing: 1px; color: var(--wood); }
.ui .hud-menu .hm-row svg.ico { filter: brightness(0.12); } /* the HUD's pixel icons are painted cream for dark pills; on the parchment menu they print in ink */
/* the result card: the amount, one line, the proof, two buttons stacked full width (owner 10-19: Supercell / Coin Master show one number and at most two buttons) */
.ui .result #r-actions { flex-direction: column; align-items: stretch; width: min(300px, 100%); margin: 0 auto; gap: 10px; }
.ui .result #r-actions .btn { width: 100%; margin: 0; }
.ui .result .proof-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 14px; padding: 4px 12px 5px; min-height: 32px; border: 2px solid rgba(241, 227, 191, 0.35); border-radius: 999px; background: rgba(6, 4, 15, 0.35); color: var(--parch); font: 14px var(--font-ui); letter-spacing: 0.5px; cursor: pointer; position: relative; }
.ui .result .proof-chip[hidden] { display: none; }
.ui .result .proof-chip::after { content: ''; position: absolute; inset: -6px -2px; } /* 44 px hit area */
.ui .result .proof-chip .pf-arrow { width: 18px; height: 18px; flex: none; } .ui .result .proof-chip b { color: var(--green-hi, #7ee07e); font-weight: 400; }
.ui .result .proof-chip:hover, .ui .result .proof-chip[aria-expanded="true"] { border-color: var(--gold); }
.ui .result .proof-detail { margin: -6px auto 14px; max-width: 300px; padding: 8px 12px; border-radius: 10px; background: rgba(6, 4, 15, 0.45); font: 14px var(--font-ui); line-height: 1.35; color: var(--parch); text-align: center; }
.ui .result .proof-detail[hidden] { display: none; }
.ui .result .proof-detail .rnd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; opacity: 0.8; margin: 4px 0; word-break: break-all; }
.ui .result .proof-detail a { color: var(--gold-hi); }
/* the rich-houses strip (phones only): over the water, just above the bottom bar; swipe sideways, tap a card to fly there and open the raid sheet */
.ui .target-strip { display: none; }
@media (max-width: 700px) {
  .ui .target-strip:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: calc(98px + env(safe-area-inset-bottom)); z-index: 20; pointer-events: none; }
  .ui .target-strip .ts-k { margin: 0 0 4px 14px; font: 11px var(--font-num); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 1px 0 var(--ink), 0 0 6px rgba(0, 0, 0, 0.8); }
  .ui .target-strip .ts-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 6px; scroll-snap-type: x mandatory; scroll-padding-left: 14px; scrollbar-width: none; pointer-events: auto; overscroll-behavior-x: contain; }
  .ui .target-strip .ts-row::-webkit-scrollbar { display: none; }
  .ui .target-strip .ts-card { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; min-width: 132px; max-width: 188px; height: 56px; padding: 4px 12px 4px 4px; border: 3px solid var(--ink); border-radius: 14px; background: var(--parch); box-shadow: 0 3px 0 var(--ink); color: var(--ink); text-align: left; cursor: pointer; position: relative; }
  .ui .target-strip .ts-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
  .ui .target-strip .ts-card .mini-ring { width: 42px; height: 42px; flex: none; border-width: 3px; }
  .ui .target-strip .ts-card .mini-ring .spr { transform: translate(-50%, -50%) scale(0.6); }
  .ui .target-strip .ts-txt { display: grid; min-width: 0; line-height: 1.05; }
  .ui .target-strip .ts-name { font: 16px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 116px; } /* X handles run to 15 characters */
  .ui .target-strip .ts-amt { font: 16px var(--font-num); color: #2f7a34; } /* money green, the street plates' colour */
  .ui .target-strip .ts-card.shielded { background: #dcd2bb; } .ui .target-strip .ts-card.shielded .ts-amt { color: var(--wood); }
  .ui .target-strip .ts-shield { position: absolute; right: -6px; top: -8px; width: 22px; height: 22px; } .ui .target-strip .ts-shield .spr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.75); }
  /* out of the way whenever something else has the stage */
  html[data-tutorial="1"] .ui .target-strip, body.ui:has(.side.open) .target-strip, body.ui:has(#board.open) .target-strip, body.ui:has(.overlay.open) .target-strip, body.ui.result-open .target-strip, body.ui.cinematic .target-strip, body.ui:has(#road-wrap:not([hidden])) .target-strip { display: none; }
}
/* Sign your poster: the frame's grid column may shrink below its widest child (an implicit auto column grew to the hood row's ~305 px and the input, swatches and THAT'S ME ran 16 px past the frame's right edge at 390) */
.ui .signposter.v3 { grid-template-columns: minmax(0, 1fr); }
.ui .signposter.v3 .hoods { grid-template-columns: repeat(8, minmax(0, 1fr)); } .ui .signposter.v3 .hoods .hood { min-width: 0; width: 100%; height: auto; aspect-ratio: 1; padding: 0; }
.ui .signposter.v3 .back-spacer { flex: 0 1 58px; min-width: 0; } /* the empty slot gives way first, so the stepper stays centred */
@media (max-width: 400px) { .ui .signposter.v3 .stepper { gap: 8px; letter-spacing: 1px; } }

/* How it works v2 (owner 10-19: 'looks quite bad'): Clash Royale / Brawl Stars how-to-play cards. Three chunky numbered cards joined by gold arrows, a live night scene on each, the title and one line; step 3 shows both outcomes (win green, caught red); one primary, the free-practice line under it, a plain text way out. Phones: the cards become rows (scene left, words right) */
.ui .howto.ht { width: min(940px, 100%); padding: 34px 30px 22px; }
.ui .ht-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.ui .ht-step { position: relative; display: flex; flex-direction: column; background: #fbf3dc; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 10px 10px 14px; text-align: center; }
.ui .ht-step canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--ink); border-radius: 10px; background: #0d1030; image-rendering: pixelated; }
.ui .ht-step:not(:last-child)::after { content: ''; position: absolute; top: 34%; right: -29px; width: 18px; height: 26px; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 3px 0 var(--ink)); }
.ui .ht-n { position: absolute; top: -16px; left: -16px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-lo), 0 3px 0 var(--ink); font: 22px var(--font-num); color: var(--ink); line-height: 1; }
.ui .ht-t { padding: 12px 4px 0; }
.ui .ht-t b { display: block; font: 23px var(--font-btn); color: var(--ink); letter-spacing: 0.3px; line-height: 1.05; }
.ui .ht-t p { margin: 6px 0 0; font-size: 18px; line-height: 1.2; color: var(--wood); }
.ui .ht-o { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui .ht-o + .ht-o { margin-top: 4px; }
.ui .ht-o i { font: 13px var(--font-btn); font-style: normal; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; padding: 3px 7px 2px; border-radius: 6px; border: 2px solid var(--ink); flex: none; }
.ui .ht-o.win i { background: var(--green-lo); } .ui .ht-o.win { color: #2f7a34; }
.ui .ht-o.lose i { background: var(--red); } .ui .ht-o.lose { color: var(--red-lo); }
.ui .howto .ht-fair { margin: 26px 0 0; text-align: center; font-size: 16px; color: var(--wood); opacity: 0.85; }
.ui .ht-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.ui .ht-cta #howto-try { width: min(440px, 100%); }
.ui .ht-free { font-size: 16px; color: var(--green-lo); }
.ui .ht-skip { min-height: 44px; padding: 0 16px; background: none; border: 0; font: 18px var(--font-ui); color: var(--wood); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui .ht-skip:hover { color: var(--ink); }
@media (max-width: 700px) {
  .ui .howto.ht { padding: 30px 14px 14px; }
  .ui .ht-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
  .ui .ht-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 8px 7px 7px; text-align: left; }
  .ui .ht-step canvas { width: 96px; border-width: 2px; border-radius: 8px; }
  .ui .ht-step:not(:last-child)::after { display: none; }
  .ui .ht-n { top: -10px; left: -10px; width: 32px; height: 32px; font-size: 17px; }
  .ui .ht-t { padding: 0; }
  .ui .ht-t b { font-size: 18px; }
  .ui .ht-t p { font-size: 15px; margin-top: 3px; }
  .ui .ht-o { justify-content: flex-start; gap: 6px; } .ui .ht-o i { font-size: 11px; padding: 2px 5px 1px; }
  .ui .howto .ht-fair { margin-top: 14px; font-size: 14px; }
  .ui .ht-cta { margin-top: 8px; gap: 2px; } .ui .ht-cta #howto-try { font-size: 22px; padding-left: 10px; padding-right: 10px; } .ui .ht-free { font-size: 14px; margin-top: 4px; }
  .ui .overlay#howto { padding-top: 24px; padding-bottom: 16px; }
  .ui .howto > .ribbon { margin: -6px auto 12px; font-size: 19px; padding-left: 14px; padding-right: 14px; } /* centred (owner 10-23); the x sits on the panel's corner */
  .ui .howto.ht > .close { top: -14px; right: -10px; }
}

/* ================================================================== the raid sheet v6.1 (owner-designed 10-19; prototype + SPEC from session B)
   Four blocks only: HERO · YOUR BET · TO WIN · RAID. No loss in numbers or red, no fine print; RAID green, says only RAID, live from the first frame.
   Sized from the visible viewport (r2Fit in ui.js): u 1 → .72, then .compact, .mini under 430 px, .micro while typing on the tiniest screens; .tight (scroll) only past all. */
.ui #panel.rs2 { --u: 1; --cash: #2f7a34; --plate: #f4e9cf; --parch-hi2: #fbf3dc;
  position: fixed; right: 22px; left: auto; bottom: auto; top: calc(var(--vt, 0px) + var(--top, 96px) + (var(--vh, 100vh) - var(--top, 96px) - var(--top-b, 16px)) / 2); width: 380px; max-width: calc(100vw - 32px); max-height: calc(var(--vh, 100vh) - var(--top, 96px) - var(--top-b, 16px));
  transform: translate(130%, -50%); transition: transform var(--t-slow) var(--ease-out-back); overflow: visible;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(107, 63, 34, 0.07) 22px 23px), var(--parch); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink), 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 0 calc(14px * var(--u)) calc(14px * var(--u)); margin: 0; display: flex; flex-direction: column; gap: calc(10px * var(--u)); color: var(--ink); font-family: var(--font-ui); font-weight: 400; font-synthesis: none; }
.ui #panel.rs2.open { transform: translate(0, -50%); }
.ui #panel.rs2.tight { overflow: hidden auto; } /* the last resort below the smallest budget: scroll the sheet, never cut the button */
.ui #panel.rs2 .r2-ribbon { align-self: center; flex: none; margin-top: -22px; max-width: calc(100% - 110px); position: relative; z-index: 2; font-family: var(--font-num); font-size: 24px; letter-spacing: 2px; line-height: 1.2; color: #fff; background: #e5443a; border: 4px solid var(--ink); padding: 3px 30px 5px; border-radius: 6px; text-shadow: 0 3px 0 #9a2a22; box-shadow: 0 4px 0 var(--ink); text-transform: uppercase; }
.ui #panel.rs2 .r2-ribbon > span { display: block; overflow: hidden; white-space: nowrap; } /* fitRibbon() picks the word and the size that fit: no ellipsis, ever */
.ui #panel.rs2 .r2-ribbon::before, .ui #panel.rs2 .r2-ribbon::after { content: ''; position: absolute; top: 10px; width: 22px; height: 28px; background: #9a2a22; border: 4px solid var(--ink); z-index: -1; }
.ui #panel.rs2 .r2-ribbon::before { left: -24px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); } .ui #panel.rs2 .r2-ribbon::after { right: -24px; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.ui #panel.rs2 .r2-ribbon.gold { background: var(--gold); color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); } .ui #panel.rs2 .r2-ribbon.gold::before, .ui #panel.rs2 .r2-ribbon.gold::after { background: var(--gold-lo, #b8861d); }
.ui #panel.rs2 > .r2-x { position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; margin: 0; z-index: 6; font-size: 26px; }
.ui #panel.rs2 .r2-box { position: relative; flex: none; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.ui #panel.rs2 .r2-lbl { font-family: var(--font-ui); font-size: 18px; letter-spacing: 1.6px; line-height: 1; color: rgba(27, 20, 16, 0.75); }
.ui #panel.rs2 .r2-top { display: flex; justify-content: space-between; align-items: baseline; }

/* 1. the target: their house is the scene; the street's own player card, enlarged, holds every word */
.ui #panel.rs2 .r2-hero { height: calc(196px * var(--u)); overflow: hidden; background: linear-gradient(#6fb8ee, #b8e0fa 62%, #6dbf5a 62%); }
.ui #panel.rs2 .r2-scene { position: absolute; right: 14px; bottom: calc(58px * var(--u)); image-rendering: pixelated; }
.ui #panel.rs2 .r2-tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; line-height: 1.25; letter-spacing: 0.5px; background: var(--cash); color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 0 10px 1px; box-shadow: 0 2px 0 var(--ink); }
.ui #panel.rs2 .r2-tag.shield, .ui #panel.rs2 .r2-tag.guards { background: #3d3666; } .ui #panel.rs2 .r2-tag .ico { width: 14px; height: 14px; } /* a bribe is a lock on night slate, never red */
.ui #panel.rs2 .r2-plate { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; background: var(--plate); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); padding: 7px 12px 7px 7px; }
.ui #panel.rs2 .r2-id { display: flex; align-items: center; gap: 10px; }
.ui #panel.rs2 .r2-face { position: relative; flex: none; width: calc(46px * var(--u)); height: calc(46px * var(--u)); border-radius: 9px; border: 3px solid var(--ink); background: #d9c99a; overflow: hidden; }
.ui #panel.rs2 .r2-face.v { border-color: var(--gold); box-shadow: 0 0 0 2px var(--ink); } /* verified: the game's gold frame */
.ui #panel.rs2 .r2-face canvas, .ui #panel.rs2 .r2-face img.av { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ui #panel.rs2 .r2-face img.av:not(.px) { image-rendering: auto; } .ui #panel.rs2 .r2-face img.av[hidden] { display: none; }
.ui #panel.rs2 .r2-who { min-width: 0; flex: 1; }
.ui #panel.rs2 .r2-n { font-family: var(--font-num); font-size: max(18px, calc(21px * var(--u))); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ui #panel.rs2 .r2-n a, .ui #panel.rs2 .r2-h a { color: inherit; text-decoration: none; } .ui #panel.rs2 .r2-n .crown-inline { width: 18px; height: 18px; vertical-align: -2px; margin-right: 4px; }
.ui #panel.rs2 .r2-h { font-size: 16px; line-height: 1.15; color: rgba(27, 20, 16, 0.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui #panel.rs2 .r2-h[hidden] { display: none; }
.ui #panel.rs2 .r2-cel { display: flex; align-items: center; justify-content: space-between; border-top: 2px dashed rgba(27, 20, 16, 0.25); margin-top: 6px; padding-top: 5px; }
.ui #panel.rs2 .r2-cel .k { font-size: 16px; letter-spacing: 1.4px; color: rgba(27, 20, 16, 0.62); }
.ui #panel.rs2 .r2-cel .v { display: flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: max(24px, calc(26px * var(--u))); line-height: 1; color: var(--cash); }
.ui #panel.rs2 canvas.r2-coin { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }

/* 2. your bet: the amount is the hero of the input */
.ui #panel.rs2 .r2-bet { background: var(--parch-hi2); padding: calc(9px * var(--u)) 12px calc(8px * var(--u)); }
.ui #panel.rs2 .r2-hint { font-size: 15px; color: rgba(27, 20, 16, 0.75); }
.ui #panel.rs2 .r2-field { margin: calc(6px * var(--u)) 0 0; display: flex; align-items: center; gap: 6px; background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 0 12px; cursor: text; transition: box-shadow 0.15s; height: calc(60px * var(--u)); min-height: 52px; letter-spacing: 0; text-transform: none; }
.ui #panel.rs2 .r2-field:focus-within { box-shadow: 0 0 0 4px var(--gold); }
.ui #panel.rs2 .r2-field .cur { font-family: var(--font-num); font-size: calc(34px * var(--u)); color: rgba(27, 20, 16, 0.6); } .ui #panel.rs2 .r2-field .cur[hidden] { display: none; }
.ui #panel.rs2 .r2-field input { flex: 1; min-width: 0; width: auto; height: auto; border: 0; outline: 0; box-shadow: none; background: transparent; font-family: var(--font-num); font-weight: 400; font-size: calc(40px * var(--u)); color: var(--ink); padding: 0; margin: 0; }
.ui #panel.rs2 .r2-field .unit { font-family: var(--font-ui); font-size: 20px; color: rgba(27, 20, 16, 0.6); }
.ui #panel.rs2 .r2-cap { position: absolute; right: 16px; top: calc(10px * var(--u)); font-size: 15px; color: #fff; background: var(--ink); border-radius: 999px; padding: 1px 10px 2px; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
.ui #panel.rs2 .r2-cap.on { opacity: 1; transform: none; }
.ui #panel.rs2 .nope { animation: r2-nope 0.32s ease-in-out; } @keyframes r2-nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ui #panel.rs2 .r2-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: calc(8px * var(--u)); }
.ui #panel.rs2 .r2-quick button { font-family: var(--font-num); font-weight: 400; font-size: 16px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 11px; background: var(--parch); box-shadow: 0 3px 0 var(--ink); cursor: pointer; color: var(--ink); touch-action: manipulation; }
.ui #panel.rs2 .r2-quick button.on { background: var(--green); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ui #panel.rs2 .r2-quick button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
/* the slider: a 40 px hit box around a 12 px track, a 30 px gold thumb */
.ui #panel.rs2 .r2-slide { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: calc(2px * var(--u)) 0 -6px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.ui #panel.rs2 .r2-slide::-webkit-slider-runnable-track { height: 12px; border-radius: 7px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--green) var(--fill, 25%), #4a2a14 var(--fill, 25%)); }
.ui #panel.rs2 .r2-slide::-moz-range-track { height: 12px; border-radius: 7px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--green) var(--fill, 25%), #4a2a14 var(--fill, 25%)); }
.ui #panel.rs2 .r2-slide::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe9a0, var(--gold) 60%, #b8861d); border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.ui #panel.rs2 .r2-slide::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); }
.ui #panel.rs2 .r2-bet:has(input:disabled) { opacity: 0.6; }
.ui #panel.rs2 .r2-bet.tut-glow { animation: tut-breathe 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px rgba(243, 196, 64, 0.35)) drop-shadow(0 0 14px rgba(243, 196, 64, 0.45)); }

/* 3. to win: one big number; the chance is a live badge of ONE size; the plank shows it as the result screen will */
.ui #panel.rs2 .r2-win { background: linear-gradient(#173a24, #0f2a1a); color: #fff; padding: calc(9px * var(--u)) 12px calc(11px * var(--u)); overflow: hidden; }
.ui #panel.rs2 .r2-win::after { content: ''; position: absolute; inset: -40% -10%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.1) 50%, transparent 58%); animation: r2-sheen 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes r2-sheen { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.ui #panel.rs2 .r2-win .r2-lbl { color: #cdeed3; }
.ui #panel.rs2 .r2-amount { display: flex; align-items: center; gap: 10px; margin-top: calc(4px * var(--u)); }
.ui #panel.rs2 .r2-amount canvas.r2-coin { width: calc(38px * var(--u)); height: calc(38px * var(--u)); filter: drop-shadow(0 0 10px rgba(255, 214, 90, 0.65)); }
.ui #panel.rs2 .r2-amount .v { /* no overflow clip: it cut the glow into a lighter box (fitWin keeps the digits off the badge) */ flex: 1; min-width: 0; white-space: nowrap; font-family: var(--font-num); font-size: calc(44px * var(--u)); line-height: 1.02; color: #8ef08e; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 0 22px rgba(142, 240, 142, 0.4); }
.ui #panel.rs2 .r2-badge { --c: #5cc65c; position: relative; flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: calc(104px * var(--u)); min-width: 86px;
  font-family: var(--font-num); font-size: calc(22px * var(--u)); line-height: 1; padding: 6px 8px 7px; border: 3px solid var(--ink); border-radius: 14px; background: var(--c); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transition: background 0.25s; white-space: nowrap; }
.ui #panel.rs2 .r2-badge small { font-family: var(--font-ui); font-size: 15px; letter-spacing: 1px; line-height: 1; margin-top: 1px; text-transform: uppercase; }
.ui #panel.rs2 .r2-badge[data-pal="mid"] { --c: #5ec8f2; }
.ui #panel.rs2 .r2-badge[data-pal="long"] { --c: #c49aff; box-shadow: 0 3px 0 var(--ink), 0 0 16px #c49aff; } /* a long shot is a lavender glow and a twinkle, never red (owner: 'we want degens to play at 1 %') */
.ui #panel.rs2 .r2-badge[data-pal="long"]::before { content: '✦'; position: absolute; right: -6px; top: -10px; color: #fff3b0; font-size: 16px; text-shadow: 0 0 6px #fff; animation: r2-twinkle 1.4s ease-in-out infinite; }
@keyframes r2-twinkle { 50% { opacity: 0.3; transform: scale(0.7); } }
.ui #panel.rs2 .r2-plank { position: relative; height: calc(22px * var(--u)); min-height: 16px; margin-top: calc(8px * var(--u)); border: 3px solid var(--ink); border-radius: 7px; background: repeating-linear-gradient(90deg, #3d3666 0 10%, #342e5a 10% 20%); }
.ui #panel.rs2 .r2-plank .zone { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: repeating-linear-gradient(90deg, #7ce07c 0 10%, #5cc65c 10% 20%); transition: width 0.38s cubic-bezier(0.3, 1.45, 0.5, 1); }
.ui #panel.rs2 .r2-plank .mark { position: absolute; top: -7px; bottom: -7px; width: 6px; margin-left: -3px; background: #fff3d6; border: 2px solid var(--ink); border-radius: 3px; transition: left 0.38s cubic-bezier(0.3, 1.45, 0.5, 1); box-shadow: 0 2px 0 var(--ink); }
.ui #panel.rs2 .bump { animation: r2-bump 0.3s ease-out; } @keyframes r2-bump { 40% { transform: scale(1.14); } }
.ui #panel.rs2 .glowup { animation: r2-glowup 0.45s ease-out; } @keyframes r2-glowup { 30% { text-shadow: 0 0 34px rgba(190, 255, 190, 0.9); } }

/* 4. the one primary: green, chunky, alive; sinks on press, fires on release, springs back */
.ui #panel.rs2 .r2-foot { flex: none; margin: 0; }
.ui #panel.rs2 .r2-go { --lip: 9px; position: relative; display: block; width: 100%; height: calc(78px * var(--u)); min-height: 62px; border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; outline: none; }
.ui #panel.rs2 .r2-go[hidden] { display: none; }
.ui #panel.rs2 .r2-go .base { position: absolute; left: 0; right: 0; top: var(--lip); bottom: 0; border-radius: 20px; background: #1d6a29; border: 4px solid var(--ink); }
.ui #panel.rs2 .r2-go .face { position: absolute; left: 0; right: 0; top: 0; bottom: var(--lip); border-radius: 20px; border: 4px solid var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#a8f59a 0%, #63d35a 46%, #43b64a 54%, #36a03e 100%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14), inset 0 3px 0 rgba(255, 255, 255, 0.55); transition: transform 70ms ease-out, filter 0.15s; }
.ui #panel.rs2 .r2-go .face::before { content: ''; position: absolute; left: 12px; right: 12px; top: 5px; height: 34%; border-radius: 14px; background: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)); }
.ui #panel.rs2 .r2-go .face::after { content: ''; position: absolute; top: -30%; bottom: -30%; width: 28%; left: -40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: r2-sweep 3.4s ease-in-out infinite 1.2s; }
@keyframes r2-sweep { 0% { left: -40%; } 22% { left: 120%; } 100% { left: 120%; } }
.ui #panel.rs2 .r2-go .t { position: relative; font-family: var(--font-num); font-weight: 400; font-size: calc(42px * var(--u)); letter-spacing: 3px; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); line-height: 1; margin-top: -4px; white-space: nowrap; }
@media (hover: hover) { .ui #panel.rs2 .r2-go:not(:disabled):hover .face { filter: brightness(1.07); transform: translateY(-2px); } }
.ui #panel.rs2 .r2-go.down .face { transform: translateY(calc(var(--lip) - 1px)) scale(0.985, 0.96); transition: transform 60ms ease-out; filter: brightness(1.08); }
.ui #panel.rs2 .r2-go.pop .face { animation: r2-spring 0.26s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes r2-spring { 0% { transform: translateY(calc(var(--lip) - 1px)) scale(0.985, 0.96); } 42% { transform: translateY(-4px) scale(1.05, 1.03); } 100% { transform: none; } }
.ui #panel.rs2 .r2-go:focus-visible .face { box-shadow: 0 0 0 4px #fff3d6, 0 0 0 8px var(--ink); }
.ui #panel.rs2 .r2-go.sent { pointer-events: none; } .ui #panel.rs2 .r2-go.sent .face { filter: saturate(0.75) brightness(0.95); transform: translateY(4px); } .ui #panel.rs2 .r2-go.sent .face::after { display: none; } .ui #panel.rs2 .r2-go.sent .t { font-size: calc(30px * var(--u)); letter-spacing: 2px; }
.ui #panel.rs2 .r2-go.wait .face { flex-direction: column; justify-content: center; gap: 3px; } .ui #panel.rs2 .r2-go.wait .face .t { position: static; transform: none; font-size: 78%; line-height: 1; margin: 0 0 6px; -webkit-text-stroke: 4px var(--ink); text-shadow: 0 3px 0 var(--ink); } .ui #panel.rs2 .r2-go.wait .face::before { display: none; } .ui #panel.rs2 .r2-go .face small#send-sub { font-size: 13px; font-weight: 400; opacity: 1; text-transform: none; letter-spacing: 0; } /* the waiting RAID face: STAMPING YOUR POSTER… over the Sheriff's line, greyed, flips in place at the stamp (mac-cb 10-22) */ .ui #panel.rs2 .r2-go.off { cursor: default; } .ui #panel.rs2 .r2-go.off .face { filter: grayscale(0.85) brightness(0.92); } .ui #panel.rs2 .r2-go.off .face::after { display: none; } .ui #panel.rs2 .r2-go.off .t { font-size: calc(28px * var(--u)); letter-spacing: 1px; } /* gates closed / nothing left: greyed, saying why */
.ui #panel.rs2.bet-pending .r2-go { opacity: 0.55; } .ui #panel.rs2.bet-pending .r2-go .face::after { display: none; } /* the tutorial's bet step: RAID waits for the bet */
/* the tutorial's bet step: the suggested bet reads as a greyed-out placeholder ("write here", owner 10-20); tapped or typed, it turns ink */
.ui #panel.rs2.bet-pending .r2-field:not(:focus-within) input { color: rgba(27, 20, 16, 0.32); text-shadow: none; }
.ui #panel.rs2.bet-pending .r2-field:not(:focus-within) .cur { color: rgba(27, 20, 16, 0.25); }
.r2-fx { position: fixed; left: 0; top: 0; width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; z-index: 90; }
.r2-ring { position: fixed; border: 4px solid #fff3d6; border-radius: 24px; pointer-events: none; z-index: 89; }
html[data-reduce-motion="1"] .ui #panel.rs2 .r2-go .face::after, html[data-reduce-motion="1"] .ui #panel.rs2 .r2-win::after, html[data-reduce-motion="1"] .ui #panel.rs2 .r2-badge::before { animation: none; }

/* the compact header (keyboard open, short screens): the card alone, one row; no slider, no labels; a one-line badge, a thin plank */
.ui #panel.rs2.compact { gap: 6px; padding-bottom: 10px; }
.ui #panel.rs2.compact .r2-hero { height: auto; background: none; border: 0; box-shadow: none; overflow: visible; }
.ui #panel.rs2.compact .r2-scene, .ui #panel.rs2.compact .r2-tag { display: none; }
.ui #panel.rs2.compact .r2-plate { position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px 5px 5px; }
.ui #panel.rs2.compact .r2-id { min-width: 0; flex: 1; }
.ui #panel.rs2.compact .r2-cel { border: 0; margin: 0; padding: 0; flex: none; } .ui #panel.rs2.compact .r2-cel .k, .ui #panel.rs2.compact .r2-h { display: none; }
.ui #panel.rs2.compact .r2-face { width: 36px; height: 36px; }
.ui #panel.rs2.compact .r2-slide, .ui #panel.rs2.compact .r2-top { display: none; }
.ui #panel.rs2.compact .r2-bet, .ui #panel.rs2.compact .r2-win { padding-top: 7px; padding-bottom: 7px; }
.ui #panel.rs2.compact .r2-field { margin-top: 0; } .ui #panel.rs2.compact .r2-quick { margin-top: 6px; } .ui #panel.rs2.compact .r2-cap { top: -12px; }
.ui #panel.rs2.compact .r2-amount { margin-top: 0; } .ui #panel.rs2.compact .r2-amount .v { font-size: 32px; } .ui #panel.rs2.compact .r2-amount canvas.r2-coin { width: 24px; height: 24px; }
.ui #panel.rs2.compact .r2-badge { flex-direction: row; align-items: baseline; gap: 3px; width: auto; min-width: 118px; font-size: 18px; padding: 4px 10px 5px; border-radius: 999px; } .ui #panel.rs2.compact .r2-badge small { font-size: 13px; }
.ui #panel.rs2.compact .r2-plank { height: 12px; min-height: 12px; margin-top: 5px; }
.ui #panel.rs2.compact .r2-ribbon { font-size: 18px; margin-top: -17px; padding: 1px 22px 3px; }
.ui #panel.rs2.compact .r2-go { min-height: 56px; height: 56px; } .ui #panel.rs2.compact .r2-go .t { font-size: 32px; }
.ui #panel.rs2.micro .r2-hero { display: none; }
.ui #panel.rs2.mini { padding-top: 10px; } .ui #panel.rs2.mini .r2-ribbon { display: none; } .ui #panel.rs2.mini > .r2-x { top: -22px; right: 6px; font-size: 24px; } .ui #panel.rs2.mini.compact .r2-plate { padding-right: 62px; }
.ui #panel.rs2 .blocked { margin: 0; }

/* phones: a bottom sheet the width of the screen, the street visible above it, sitting on the keyboard */
@media (max-width: 700px) {
  .ui #panel.rs2 { left: 0; right: 0; width: auto; max-width: none; top: auto; bottom: calc(100vh - var(--vt, 0px) - var(--vh, 100vh)); max-height: calc(var(--vh, 100vh) - 40px);
    transform: translateY(110%); border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2), 0 -18px 40px rgba(0, 0, 0, 0.35); padding-bottom: calc(12px + env(safe-area-inset-bottom)); clip-path: none; }
  .ui #panel.rs2.open { transform: none; clip-path: none; }
  .ui #panel.rs2 > .r2-x { right: 10px; top: -18px; }
  body.cp-step #panel.rs2.open { top: auto; max-height: calc(var(--vh, 100vh) - 176px); } /* the tutorial: Little John's band owns the top 166 px */
}
.ui #panel.rs2.compact .blocked { padding: 4px 8px; gap: 8px; } .ui #panel.rs2.compact .blocked .hoodpic { width: 46px; height: 46px; } .ui #panel.rs2.compact .blocked .hoodpic canvas { width: 40px; height: 40px; }
.ui #panel.rs2.compact .blocked .t { font-size: 17px; } .ui #panel.rs2.compact .blocked .t small { display: none; } .ui #panel.rs2.compact .blocked .btn { min-height: 44px; font-size: 18px; padding: 6px 14px 9px; } /* the locked foot is no taller than the compact RAID */
@media (min-width: 701px) { .ui #panel.rs2.mini > .r2-x { top: 6px; right: 6px; } } /* short landscape: the sheet nearly fills the height, so the × sits inside it, over the plate's reserved 62 px */
.ui #panel.rs2.compact .r2-n { font-size: 18px; } .ui #panel.rs2.compact .r2-n .crown-inline { display: none; } /* one row: the name gets the room */
/* the sheet's outlined numbers and the RAID label: the global no-stroke reset (above) would flatten them to 1.4:1 on the green face; re-asserted like .bignum */
.ui #panel.rs2 .r2-go .t { -webkit-text-stroke-width: 8px !important; -webkit-text-stroke-color: var(--ink) !important; } .ui #panel.rs2 .r2-go.wait .face .t { -webkit-text-stroke-width: 4px !important; } /* the waiting face's smaller title: RAID's 8 px stroke and 5 px shadow ran under the letters at 78 % and read as a ghost line (mac-cb 10-22) */
.ui #panel.rs2 .r2-amount .v { -webkit-text-stroke-width: 7px !important; -webkit-text-stroke-color: var(--ink) !important; }
.ui #panel.rs2 .r2-quick button.on { -webkit-text-stroke-width: 3px !important; -webkit-text-stroke-color: var(--ink) !important; }
/* short phones: the sheet reaches under the top HUD; the HUD steps aside while it is open (r2Fit sets the class) */
body.ui.r2-over-hud .hud-top { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
/* the sheets' ×: a keyboard-only ring, thin and hugging the circle (owner 10-19: the gold ring around the × looked bad); a mouse or touch press shows none */
.ui .close:focus { outline: none; }
.ui .close:focus-visible, .ui .panel .close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; box-shadow: 0 0 0 1px #fff3d6; }

/* ================================================================== raid result v5 (owner-approved 10-19; session B's SPEC + prototype)
   The OTHER player's medallion sits half above the card (gold win / pewter caught / red robbed), the ribbon drapes under it, then who, the amount, the proof, two buttons. */
.ui .overlay.r5 { background: rgba(12, 8, 30, 0.55); overflow: hidden; padding: 16px; }
.ui .r5-stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.ui .r5-burst { position: absolute; left: 50%; top: 50%; width: min(900px, 160vw); aspect-ratio: 1; margin: calc(min(900px, 160vw) / -2) 0 0 calc(min(900px, 160vw) / -2); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 226, 120, 0.22) 0 9deg, rgba(255, 226, 120, 0) 9deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 72%); mask: radial-gradient(closest-side, #000 30%, transparent 72%); opacity: 0; transform: scale(0.6); }
.ui .r5-burst.on { animation: r5-burst-in 0.45s ease-out forwards, r5-spin 18s linear infinite; } @keyframes r5-burst-in { to { opacity: 1; transform: scale(1); } } @keyframes r5-spin { to { rotate: 360deg; } }
.ui .r5-card { position: relative; width: min(420px, calc(100vw - 32px)); background: var(--parch); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink), 0 24px 60px rgba(0, 0, 0, 0.45); padding: 118px 18px 16px; margin-top: 84px; text-align: center; pointer-events: auto; opacity: 0; transform: scale(0.7); color: var(--ink); font-family: var(--font-ui); font-weight: 400; font-synthesis: none; }
.ui .r5-card.in { animation: r5-card-in 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; } @keyframes r5-card-in { to { opacity: 1; transform: none; } }
.ui .r5-card.shake { animation: r5-card-in 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) forwards, r5-shake 0.3s 0.1s linear; } @keyframes r5-shake { 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
.ui .r5-ribbon { position: absolute; left: 50%; top: 58px; z-index: 3; translate: -50% 0; font-family: var(--font-num); font-size: 34px; letter-spacing: 3px; line-height: 1.15; color: #fff; background: linear-gradient(#ffd866, #f3c440 60%, #d9a21c); border: 4px solid var(--ink); padding: 2px 30px 6px; border-radius: 8px; -webkit-text-stroke: 7px var(--ink) !important; paint-order: stroke fill; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; transform: scale(2.4); opacity: 0; }
.ui .r5-ribbon::before, .ui .r5-ribbon::after { content: ''; position: absolute; top: 14px; width: 24px; height: 30px; background: #c98a1e; border: 4px solid var(--ink); z-index: -1; }
.ui .r5-ribbon::before { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); } .ui .r5-ribbon::after { right: -26px; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.ui .r5-ribbon.slam { animation: r5-slam 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; } @keyframes r5-slam { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.ui .r5-ribbon.big { background: linear-gradient(#ff9ad8, #c49aff 55%, #8a5ce0); } .ui .r5-ribbon.big::before, .ui .r5-ribbon.big::after { background: #6a3fb8; }
.ui .r5-ribbon.jackpot { background: linear-gradient(#fff3a0, #ffd23a 50%, #ff9a3a); } .ui .r5-ribbon.jackpot::before, .ui .r5-ribbon.jackpot::after { background: #c96a1e; }
.ui .r5-ribbon.robbed { background: linear-gradient(#ff9a8a, #e5443a 60%, #b52c24); } .ui .r5-ribbon.robbed::before, .ui .r5-ribbon.robbed::after { background: #8e2a1f; }
.ui .r5-ribbon.caught { background: linear-gradient(#9aa2b4, #6e748a); } .ui .r5-ribbon.caught::before, .ui .r5-ribbon.caught::after { background: #4d5266; }
.ui .r5-streak { position: absolute; right: -10px; top: 40px; z-index: 4; rotate: 8deg; font-family: var(--font-num); font-size: 15px; background: #ff7ab6; color: #fff; -webkit-text-stroke: 3px var(--ink) !important; paint-order: stroke fill; border: 3px solid var(--ink); border-radius: 999px; padding: 2px 10px 3px; opacity: 0; } .ui .r5-streak.on { animation: r5-slam 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; } .ui .r5-streak[hidden] { display: none; }
.ui .r5-medal { position: absolute; left: 50%; top: -92px; translate: -50% 0; width: 132px; height: 132px; z-index: 2; }
.ui .r5-medal .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, #fff3b0, #f3c440, #c98a1e, #f3c440, #fff3b0); border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(255, 214, 90, 0.55); }
.ui .r5-medal.plain .ring { background: conic-gradient(from 200deg, #e9e2cf, #b8ad94, #8f846c, #b8ad94, #e9e2cf); box-shadow: 0 5px 0 var(--ink); }
.ui .r5-medal.red .ring { background: conic-gradient(from 200deg, #ffb3a8, #e5443a, #8e2a1f, #e5443a, #ffb3a8); box-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(229, 68, 58, 0.45); }
.ui .r5-medal .pic { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; border: 4px solid var(--ink); background: #d9c99a; object-fit: cover; image-rendering: pixelated; box-sizing: border-box; } .ui .r5-medal img.pic:not(.px) { image-rendering: auto; } .ui .r5-medal img.pic[hidden] { display: none; }
.ui .r5-medal .shine { position: absolute; inset: 12px; border-radius: 50%; background: linear-gradient(150deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.ui .r5-medal.jolt { animation: r5-jolt 0.35s ease-out; } @keyframes r5-jolt { 20% { rotate: -6deg; } 50% { rotate: 5deg; } 80% { rotate: -2deg; } 100% { rotate: 0deg; } }
.ui .r5-practice { font-size: 15px; color: rgba(27, 20, 16, 0.7); margin-bottom: 4px; } .ui .r5-practice[hidden] { display: none; }
.ui .r5-handle { font-family: var(--font-num); font-size: 24px; line-height: 1.1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .r5-handle small { display: block; font-family: var(--font-ui); font-size: 16px; letter-spacing: 1px; color: rgba(27, 20, 16, 0.62); margin-bottom: -2px; }
.ui .r5-late { opacity: 0; transition: opacity 0.25s; } .ui .r5-late.on { opacity: 1; }
.ui .r5-amount { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; } .ui .r5-amount[hidden] { display: none; }
.ui .r5-amount canvas { width: 46px; height: 46px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255, 214, 90, 0.7)); flex: none; }
.ui .r5-amount .v { font-family: var(--font-num); font-size: 64px; line-height: 1; color: #8ef08e; -webkit-text-stroke: 8px var(--ink) !important; paint-order: stroke fill; text-shadow: 0 0 26px rgba(142, 240, 142, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui .r5-amount .v.dim { opacity: 0.35; } .ui .r5-amount .v.lost { color: #ffd0c8; text-shadow: none; } .ui .r5-amount .v.pop { animation: r5-vpop 0.3s ease-out; } @keyframes r5-vpop { 40% { transform: scale(1.14); } }
.ui .r5-loss { margin-top: 8px; font-size: 17px; color: rgba(27, 20, 16, 0.75); } .ui .r5-loss[hidden] { display: none; }
.ui .r5-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.ui .r5-plank { position: relative; width: 210px; height: 16px; border: 3px solid var(--ink); border-radius: 6px; background: repeating-linear-gradient(90deg, #3d3666 0 10%, #342e5a 10% 20%); flex: none; }
.ui .r5-plank .zone { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; background: repeating-linear-gradient(90deg, #7ce07c 0 10%, #5cc65c 10% 20%); }
.ui .r5-plank .hit { position: absolute; top: -8px; width: 4px; height: 26px; margin-left: -4px; /* the 8 px box (4 + 2 × 2 border) centred on the roll */ background: #fff3d6; border: 2px solid var(--ink); border-radius: 2px; }
.ui .r5-chip { position: relative; white-space: nowrap; font-family: var(--font-ui); font-size: 15px; background: var(--ink); color: #fff3d6; border: 0; border-radius: 999px; padding: 0 12px; height: 32px; display: inline-flex; align-items: center; cursor: pointer; } .ui .r5-chip::after { content: ''; position: absolute; inset: -6px -2px; } .ui .r5-chip[hidden] { display: none; }
.ui .r5-proofd { margin-top: 8px; font-size: 14px; color: rgba(27, 20, 16, 0.8); } .ui .r5-proofd[hidden] { display: none; } .ui .r5-proofd a { color: var(--ink); }
.ui .r5-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; } .ui .r5-btns.pre { opacity: 0.35; transform: none; } .ui .r5-btns.on { opacity: 1; transform: none; pointer-events: auto; }
.ui .r5-btn { position: relative; display: block; width: 100%; height: 64px; border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; cursor: pointer; font: inherit; text-decoration: none; }
.ui .r5-btn .base { position: absolute; left: 0; right: 0; top: 8px; bottom: 0; border-radius: 18px; border: 4px solid var(--ink); }
.ui .r5-btn .face { position: absolute; left: 0; right: 0; top: 0; bottom: 8px; border-radius: 18px; border: 4px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: 28px; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 6px var(--ink) !important; paint-order: stroke fill; transition: transform 60ms; overflow: hidden; white-space: nowrap; }
.ui .r5-btn .face::before { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 34%; border-radius: 12px; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06)); }
.ui .r5-btn:active .face { transform: translateY(7px); }
.ui .r5-btn.go .base { background: #1d6a29; } .ui .r5-btn.go .face { background: linear-gradient(#a8f59a, #63d35a 46%, #43b64a 54%, #36a03e); }
.ui .r5-btn.x { height: 48px; } .ui .r5-btn.x .base { top: 6px; background: #2a2244; border-width: 3px; } .ui .r5-btn.x .face { bottom: 6px; border-width: 3px; background: linear-gradient(#5a5280, #3d3666); font-size: 19px; -webkit-text-stroke: 4px var(--ink) !important; }
.ui .r5-btn:focus-visible { outline: none; } .ui .r5-btn:focus-visible .face { box-shadow: 0 0 0 3px #fff3d6, 0 0 0 6px var(--ink); }
.r5-fx { position: fixed; left: 0; top: 0; width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; z-index: 90; }
.r5-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 89; }
.ui .r5-share { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(12, 8, 30, 0.7); padding: 16px; } .ui .r5-share[hidden] { display: none; }
.ui .r5-share .sbox { width: min(640px, 100%); background: var(--parch); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 7px 0 var(--ink); padding: 14px; color: var(--ink); }
.ui .r5-share .sbox img { width: 100%; display: block; border: 3px solid var(--ink); border-radius: 10px; }
.ui .r5-share .stext { margin: 10px 2px 12px; font-size: 18px; font-family: var(--font-ui); } .ui .r5-share .srow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ui .r5-btn.sp { height: 56px; } .ui .r5-btn.sp .face { font-size: 22px; }
@media (max-height: 480px) { .ui .r5-stage { zoom: 0.74; } } @media (max-width: 374px) { .ui .r5-stage { zoom: 0.9; } } /* landscape phones: the whole card fits */
@media (max-width: 420px) { .ui .r5-plank { width: 150px; } .ui .r5-chip { font-size: 14px; } }
html[data-reduce-motion="1"] .ui .r5-burst.on { animation: none; opacity: 1; transform: none; }
html[data-reduce-motion="1"] .ui .r5-card.in, html[data-reduce-motion="1"] .ui .r5-card.shake { animation: none; opacity: 1; transform: none; } html[data-reduce-motion="1"] .ui .r5-ribbon.slam { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui .r5-burst.on { animation: none; opacity: 1; transform: none; } .ui .r5-card.in, .ui .r5-card.shake { animation: none; opacity: 1; transform: none; } .ui .r5-ribbon.slam { animation: none; opacity: 1; transform: none; } }
@media (max-height: 480px) { .ui .r5.pr .r5-stage { zoom: 0.7; } } /* practice carries one more line: landscape phones keep the whole card */
.ui .r5-btn.x::after { content: ''; position: absolute; inset: -6px 0; } /* the slim second button keeps a 44 px hit area at every zoom (36 px drawn at 844x390) */
.ui .r5-btn .face { padding: 0 8px; }

/* owner 10-19: no plank on the result card (the arrow already showed it); the drand chip stays, centred */
.ui .r5-plank { display: none; }

/* poster: a × like every sheet, and the paper scrolls in its overlay when the screen is shorter than it (a phone held sideways cut WANTED off the top and SHARE off the bottom) */
.ui .poster > .close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--red); color: #fff; font-weight: 700; font-size: 22px; line-height: 1; box-shadow: inset 0 3px 0 var(--red-hi), inset 0 -3px 0 var(--red-lo), 0 3px 0 var(--ink); text-shadow: var(--outline); }
.ui .poster > .close:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--red-hi), inset 0 -2px 0 var(--red-lo), 0 1px 0 var(--ink); }
.ui #poster-wrap { overflow: hidden auto; overscroll-behavior: contain; align-items: flex-start; padding: 26px 20px 20px; }
.ui #poster-wrap > .poster { margin: auto; flex: none; }
@media (max-height: 520px) { .ui #poster-wrap > .poster { zoom: 0.72; width: 340px; } .ui #poster-wrap > .poster > .close { zoom: 1.39; top: -12px; right: -12px; } } /* sideways: the paper keeps its shape (not stretched to the phone's width) and scrolls */
/* build sheet on a phone held sideways: the sheet starts at the top like the raid sheet and the house preview steps aside, so the amount, the slider and BUILD all show without scrolling a 90 px window */
@media (max-height: 480px) { .ui #bagpanel.open { top: 8px; bottom: 8px; max-height: calc(100vh - 16px); } .ui #bagpanel #dep-house, .ui #bagpanel #dep-note { display: none; } .ui #bagpanel .rs-head { height: 48px; } .ui #bagpanel .rs-head .close { top: 2px; } .ui #bagpanel .rs-head .info-pill { top: 4px; } .ui #bagpanel .rs-body { padding: 8px 4px; } .ui #bagpanel .rs-foot { min-height: 76px; padding: 6px 4px; } } /* the button's own line says 'yours anytime'; the note under the slider steps aside with the house */

/* owner 10-20: phones show the signed-in player's picture only, so the top bar stays one row at 375-430 px (the name is in the profile) */
@media (max-width: 700px) { .ui #connect.signed #me-name { display: none; } }
/* owner 10-20: on wide screens the bottom button and CELLAR / POSTERS / RANKS step aside while a side sheet is open (laptops: the sheet covered them and cut the button mid-word; the sheet carries its own button) */
@media (min-width: 701px) { body.ui:has(.side.open) .hud-bottom .primary-wrap, body.ui:has(.side.open) .hud-bottom .toolbar { opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out); } }

/* the wall's CAUGHT stamp sits on the picture, not over the robber's name (10-20 design pass) */
.ui .mini-poster .stamp-mini { top: 31%; }

/* RANKS tabs: the long label on wide screens, a short one on phones, all four in one row with no sideways scroll ('BIGGEST CELLA…' was cut; backlog 1) */
.ui .drawer .tab .ts { display: none; }
@media (max-width: 700px) { .ui .drawer .tabs { overflow: visible; gap: 4px; padding: 10px 8px 0; } .ui .drawer .tab { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 14px; padding: 10px 4px 12px; } .ui .drawer .tab .tl { display: none; } .ui .drawer .tab .ts { display: inline; } }
/* RANKS on wide screens: rows no wider than 920 px, so a name sits near its amount */
@media (min-width: 1001px) { .ui .drawer .tabs { width: 100%; max-width: 920px; margin: 0 auto; box-sizing: border-box; } .ui .drawer .body { width: calc(100% - 28px); max-width: 892px; margin-left: auto; margin-right: auto; box-sizing: border-box; } }

/* the Band gate (owner 10-20): a wallet that never joined sees one card at the board step */
.signposter.band .joinband { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 8px; text-align: center; }
.signposter.band .joinband .q { font-size: 22px; font-family: 'Jersey 25', monospace; color: #f3c440; }
.signposter.band .joinband .fine { max-width: 30ch; }
.signposter.band .joinband .btn.big { min-height: 44px; width: 100%; max-width: 280px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.signposter.band .joinband .btn.parch { min-height: 44px; }
.signposter .input.handle input[readonly] { color: #e9dcc0; opacity: .9; }

/* the tutorial's bet is a placeholder (owner 10-21): grey like the landing's @yourhandle, nothing typed until the player types */
.ui #panel.rs2 .r2-field input::placeholder { color: rgba(27, 20, 16, 0.32); opacity: 1; text-shadow: none; }
.ui #panel.rs2 .r2-field:has(input:placeholder-shown) .cur { color: rgba(27, 20, 16, 0.25); }

/* a dialog's detail line sits under the sentence, muted, never glued onto it (owner 10-21: "Something went wrong.nonce has…" read as a bug) */
.ui #dialog-box .fine { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; opacity: 0.75; }

/* ---------------------------------------------------------------- the WANTED poster on the sign-up poster's bones (owner 10-21): pixel ink, the same layout and words
   as the poster players posted on X (BY ORDER OF / THE SHERIFF OF NOTTINGHAM, WANTED, DEAD OR ALIVE, FOR ROBBING THE RICH, the framed face, known as @handle, OUTLAW No.,
   REWARD + the red seal, LAST SEEN …). The paper is .po-paper (.sheet is the bottom sheets); the rank and the buttons sit off it, on the backdrop (game chrome, not print) */
.ui #poster-wrap .poster { width: 360px; max-width: 100%; background: none; border: 0; box-shadow: none; padding: 0; }
.ui #poster-wrap .poster::before, .ui #poster-wrap .poster::after { display: none; }
.ui #poster-wrap .po-paper { position: relative; text-align: center; color: var(--ink); padding: 20px 20px 16px;
  background: radial-gradient(circle at 15px calc(100% - 15px), #555 0 2px, var(--ink) 2.5px 5px, transparent 5.5px), radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #555 0 2px, var(--ink) 2.5px 5px, transparent 5.5px), repeating-linear-gradient(0deg, transparent 0 11px, var(--parch-line) 11px 12px), var(--parch);
  border: 6px solid var(--wood); box-shadow: inset 0 0 0 4px var(--wood-hi), 0 8px 0 var(--ink), 0 16px 30px rgba(0, 0, 0, 0.5); }
.ui #poster-wrap .po-paper::before { content: none; position: absolute; } /* the two pins are painted into the paper at the bottom corners (the top-right one sat under the ×, and ROB THE RICH took the ::before one: mac-cb 10-21) */
.ui #poster-wrap .po-paper .by { font: 9px var(--font-stamp); letter-spacing: 3px; color: var(--wood); text-transform: uppercase; }
.ui #poster-wrap .po-paper .sheriff { font: 11px var(--font-stamp); letter-spacing: 1px; color: var(--ink); text-transform: uppercase; margin-top: 6px; padding-bottom: 8px; border-bottom: 3px solid var(--ink); }
.ui #poster-wrap .po-paper h1 { font-family: var(--font-stamp); font-size: 38px; letter-spacing: 4px; margin: 12px 0 6px; color: var(--ink); }
.ui #poster-wrap .po-paper .doa { font: 15px var(--font-stamp); letter-spacing: 2px; color: var(--ink); text-transform: uppercase; }
.ui #poster-wrap .po-paper .crime { font: 9px var(--font-stamp); letter-spacing: 2px; color: var(--wood); text-transform: uppercase; margin-top: 7px; }
.ui #poster-wrap .po-paper .note { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 8px var(--font-stamp); letter-spacing: 1px; color: #fff; text-transform: uppercase; background: var(--green-lo); border: 2px solid var(--ink); border-radius: 4px; padding: 4px 8px; z-index: 2; } /* the tutorial / practice note rides the frame's top edge (off the header), like ROB THE RICH */
.ui #poster-wrap .po-paper .pic-wrap { margin: 12px auto 10px; }
.ui #poster-wrap .po-paper .alias { font: 22px var(--font-ui); color: var(--ink); line-height: 1.1; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui #poster-wrap .po-paper .alias i { font-style: italic; font-size: 17px; color: var(--wood); }
.ui #poster-wrap .po-paper .alias .chk { width: 18px; height: 18px; }
.ui #poster-wrap .po-paper .no { font: 10px var(--font-stamp); letter-spacing: 2px; color: var(--wood); text-transform: uppercase; margin-top: 6px; }
.ui #poster-wrap .po-paper .reward { position: relative; margin: 10px 0 2px; }
.ui #poster-wrap .po-paper .reward .k { font: 10px var(--font-stamp); letter-spacing: 3px; color: var(--wood); }
.ui #poster-wrap .po-paper .seal { position: absolute; right: -2px; bottom: 2px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f0675c, var(--red) 55%, #8f1f18); border: 3px solid #6d1711; box-shadow: 0 3px 0 rgba(27, 20, 16, 0.45); color: #ffd9d2; font: 16px var(--font-stamp); transform: rotate(-8deg); }
.ui #poster-wrap .po-paper .seen { margin-top: 8px; padding-top: 8px; border-top: 3px solid var(--ink); font: 18px var(--font-ui); color: var(--ink); line-height: 1.5; } .ui #poster-wrap .po-paper .seen .av-sm { margin: 0 2px; } /* inline text: "bigbag's door" never splits at the name */
.ui #poster-wrap .po-paper .seen > span { font: 9px var(--font-stamp); letter-spacing: 1px; color: var(--wood); text-transform: uppercase; }
.ui #poster-wrap .po-paper .caught { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 6px 10px 5px; font: 16px var(--font-stamp); letter-spacing: 2px; text-transform: uppercase; color: var(--red); border: 4px solid var(--red); border-radius: 6px; background: rgba(241, 227, 191, 0.88); z-index: 2; }
.ui #poster-wrap .poster.busted .po-paper .caught { display: block; }
.ui #poster-wrap .poster.rich .po-paper { box-shadow: inset 0 0 0 4px var(--wood-hi), 0 0 0 4px var(--gold), 0 8px 0 var(--ink); } .ui #poster-wrap .poster.rich { box-shadow: none; }
.ui #poster-wrap .poster.first .po-paper { box-shadow: inset 0 0 0 4px var(--wood-hi), 0 0 0 4px var(--gold), 0 8px 0 var(--ink), 0 0 70px rgba(243, 196, 64, 0.45); } .ui #poster-wrap .poster.first { box-shadow: none; }
.ui #poster-wrap .pstars { margin-top: 18px; text-align: center; font-size: 20px; color: var(--gold); letter-spacing: 2px; text-shadow: 0 2px 0 var(--ink); }
.ui #poster-wrap .pstars span { font: 12px var(--font-stamp); letter-spacing: 1px; color: #fff3d6; vertical-align: 3px; }
.ui #poster-wrap .poster .actions { margin-top: 14px; }
.ui #poster-wrap .poster .foot { color: rgba(255, 243, 214, 0.8); text-align: center; text-shadow: 0 1px 0 var(--ink); }
.ui #poster-wrap .poster > .close { top: -16px; right: -16px; }
@media (max-width: 400px) { .ui #poster-wrap .po-paper .sheriff { letter-spacing: 0; } .ui #poster-wrap .po-paper .note { letter-spacing: 0; padding: 4px 6px; left: calc(50% - 14px); } .ui #poster-wrap .po-paper { padding: 16px 14px 12px; } .ui #poster-wrap .po-paper h1 { font-size: 32px; } .ui #poster-wrap .po-paper .pic-wrap { width: 140px; height: 140px; } }
.ui #poster-wrap .poster.rich:not(.practice):not(.first) .po-paper::before { content: 'ROB THE RICH'; top: -16px; left: 50%; transform: translateX(-50%); width: auto; height: auto; border-radius: 4px; box-shadow: none; font: 9px var(--font-stamp); letter-spacing: 2px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); padding: 3px 8px; z-index: 2; white-space: nowrap; } /* a raid on the rich: the gold tag rides the frame's top edge, off the header */

/* ---- the result card, owner 10-21 ("something is missing"): the other side reacts, how well you did, the level row ---- */
.ui .r5-medal .rays { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; z-index: -1; opacity: 0; transform: scale(0.6); background: repeating-conic-gradient(rgba(255, 222, 110, 0.55) 0 9deg, rgba(255, 222, 110, 0) 9deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; }
.ui .r5-medal.hit .rays { opacity: 1; transform: scale(1); animation: r5-spin 14s linear infinite; }
.ui .r5-medal .stamp { position: absolute; left: 50%; top: 80%; z-index: 3; translate: -50% -50%; rotate: -12deg; font-family: var(--font-num); font-size: 20px; letter-spacing: 2px; line-height: 1; color: #e5443a; padding: 4px 9px 3px; border: 4px solid #e5443a; border-radius: 8px; background: rgba(255, 243, 214, 0.86); box-shadow: 0 3px 0 rgba(27, 20, 16, 0.35); pointer-events: none; }
.ui .r5-medal .stamp[hidden] { display: none; }
.ui .r5-medal .stamp.slap { animation: r5-slap 0.32s cubic-bezier(0.3, 1.5, 0.5, 1) both; } @keyframes r5-slap { 0% { transform: scale(2.6); opacity: 0; } 55% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.ui .r5-grade { display: inline-block; margin: 0 auto 6px; rotate: -3deg; font-family: var(--font-num); font-size: 17px; letter-spacing: 1.5px; color: #1d6a29; background: #e6f8d8; border: 3px solid var(--ink); border-radius: 8px; padding: 3px 10px 2px; box-shadow: 0 3px 0 var(--ink); }
.ui .r5-grade.ls { color: #4a2f8a; background: #e4dbff; } .ui .r5-grade[hidden] { display: none; }
.ui .r5-xp { display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; } .ui .r5-xp[hidden] { display: none; }
.ui .r5-xp .lv { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-num); font-size: 17px; color: #fff3d6; background: var(--ink); border: 3px solid var(--ink); box-shadow: 0 2px 0 rgba(27, 20, 16, 0.4); }
.ui .r5-xp .lv.nx { width: 28px; height: 28px; font-size: 14px; color: var(--ink); background: #e9e2cf; }
.ui .r5-xp .bar { position: relative; flex: 1; height: 20px; border: 3px solid var(--ink); border-radius: 999px; background: #3d3666; overflow: visible; }
.ui .r5-xp .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(#ffe48a, #f3c440 60%, #d9a21c); }
.ui .r5-xp .bar b { position: absolute; left: 50%; top: 50%; translate: -50% -52%; white-space: nowrap; font-family: var(--font-num); font-weight: 400; font-size: 15px; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 3px var(--ink) !important; paint-order: stroke fill; }
.ui .r5-xp .bar b.fly { animation: r5-xpfly 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes r5-xpfly { 0% { transform: translateY(-26px) scale(1.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ui .r5-xp.up .bar { box-shadow: 0 0 0 3px #fff3b0, 0 0 22px rgba(255, 214, 90, 0.9); } .ui .r5-xp.up .lv:not(.nx) { background: #f3c440; color: var(--ink); }
.ui .r5-xp .lv.flip { animation: r5-flip 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); } @keyframes r5-flip { 0% { transform: scale(0.4) rotateY(90deg); } 100% { transform: none; } }
.ui .r5-xpnote { margin-top: 4px; font-size: 14px; color: rgba(27, 20, 16, 0.62); } .ui .r5-xpnote[hidden] { display: none; }
.ui .r5-road { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .ui .r5-road[hidden] { display: none; }
.ui .r5-road .lbl { width: 100%; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: rgba(27, 20, 16, 0.62); }
.ui .r5-road .st { font-family: var(--font-num); font-size: 16px; letter-spacing: 1px; padding: 4px 10px 3px; border: 3px solid var(--ink); border-radius: 999px; background: #e9e2cf; color: rgba(27, 20, 16, 0.7); }
.ui .r5-road .st.done { background: #8ef08e; color: var(--ink); } .ui .r5-road i { width: 14px; height: 3px; background: var(--ink); border-radius: 2px; }
.ui .r5-card > .r5-practice { margin: 10px 0 0; font-size: 13px; }
.ui .xp-next { margin-top: 4px; font-size: 13px; color: rgba(27, 20, 16, 0.66); } /* the profile's level headline: the next title, the named men in your band */
.ui #pf-xp .xp-row b { font-size: 20px; } .ui #pf-xp .xp-bar { height: 12px; }

/* ---- the Band in the game (owner 10-21): the ticket chip in the top bar and its sheet (the landing's road, invite, top recruiters) ---- */
.ui .pill.band-chip { gap: 6px; } .ui .pill.band-chip .spr.coin { flex: none; }
/* the mint card (owner 10-26): chest · bar · n/next on top, the two gates under it */
.ui .pill.band-chip .mc-chest { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; animation: mc-bob 2.4s ease-in-out infinite; } .ui .pill.band-chip .mc-chest .br-chest { width: 28px; height: 28px; image-rendering: pixelated; }
@keyframes mc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } html[data-reduce-motion="1"] .ui .pill.band-chip .mc-chest { animation: none; }
.ui .pill.band-chip .mc-body { display: grid; gap: 3px; min-width: 0; }
.ui .pill.band-chip .mc-top { display: flex; align-items: center; gap: 6px; }
.ui .pill.band-chip .mc-bar { position: relative; flex: none; width: 58px; height: 9px; border: 2px solid var(--ink); border-radius: 6px; background: #3a2a1c; overflow: hidden; }
.ui .pill.band-chip .mc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe27a, #f3c440 60%, #c99a1e); transition: width 600ms var(--ease-out); }
.ui .pill.band-chip .mc-gate { display: flex; gap: 4px; }
.ui .pill.band-chip .mg, .ui .band-mint .mg { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); color: #e8d9b0; font: 700 10px var(--font-ui); letter-spacing: .3px; white-space: nowrap; }
.ui .pill.band-chip .mg .ico, .ui .band-mint .mg .ico { width: 11px; height: 11px; }
.ui .pill.band-chip .mg.ok, .ui .band-mint .mg.ok { background: #2f8a3a; color: #fff; }
.ui .pill.band-chip.signin .mc-bar, .ui .pill.band-chip.signin .mc-gate { display: none; }
.ui .band-mint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; } .ui .band-mint .bm-k { font: 400 11px var(--font-stamp); font-synthesis: none; letter-spacing: 1px; color: var(--wood); }
.ui .band-mint .mg { font-size: 12px; padding: 3px 8px; background: #6b4a30; color: #f4e9cf; } .ui .band-mint .mg .ico { width: 13px; height: 13px; }
@media (min-width: 701px) { .ui .pill.band-chip .mc-bar { width: 84px; } .ui .pill.band-chip .mg { font-size: 11px; padding: 2px 6px; } .ui .pill.band-chip .mg .ico { width: 12px; height: 12px; } }
@media (max-width: 700px) { .ui .hud-top .pill.band-chip { gap: 4px; padding-left: 6px; padding-right: 8px; } .ui .hud-top .pill.band-chip .label { display: none; } .ui .pill.band-chip .mc-chest { width: 24px; height: 24px; } .ui .pill.band-chip .mc-chest .br-chest, .ui .pill.band-chip .mc-chest svg { width: 22px; height: 22px; } .ui .pill.band-chip .mc-top { gap: 4px; } .ui .pill.band-chip .mc-bar { width: 32px; height: 8px; } .ui .pill.band-chip .mg { font-size: 9px; padding: 1px 3px; gap: 2px; } .ui .pill.band-chip .mg .ico { width: 9px; height: 9px; } .ui .pill.band-chip .mc-gate { gap: 3px; } }
.ui .bandp { width: min(520px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 30px 22px 18px; }
.ui .bandp .close { position: absolute; top: 10px; right: 10px; z-index: 6; } /* inside the sheet: the sheet scrolls (overflow auto), so a corner button outside it was clipped and made a sideways scrollbar (owner 10-26) */
.ui .band-who { font-size: 15px; color: rgba(27, 20, 16, 0.75); margin-top: 6px; } .ui .band-who b { color: var(--ink); }
.ui .band-tix { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 2px; } .ui .band-tix .spr.coin.big { zoom: 2; filter: drop-shadow(0 0 6px rgba(255, 214, 90, 0.7)); }
.ui .band-tix b { font-family: var(--font-num); font-weight: 400; font-size: 44px; line-height: 1; color: var(--gold-hi, #f3c440); -webkit-text-stroke: 6px var(--ink) !important; paint-order: stroke fill; } .ui .band-tix span { font-size: 15px; color: rgba(27, 20, 16, 0.75); }
.ui .band-road { position: relative; height: 112px; margin: 14px 4px 10px; }
.ui .br-bar { position: absolute; left: 4%; right: 4%; top: 18px; height: 12px; border: 3px solid var(--ink); border-radius: 999px; background: rgba(27, 20, 16, 0.18); overflow: hidden; } .ui .br-bar i { display: block; height: 100%; background: linear-gradient(#ffe48a, #f3c440 60%, #d9a21c); }
.ui .br-stop { position: absolute; top: 0; translate: -50% 0; width: 25%; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: rgba(27, 20, 16, 0.6); }
.ui .br-stop .br-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #e9e2cf; border: 3px solid var(--ink); filter: grayscale(1) opacity(0.55); }
.ui .br-stop b { font-family: var(--font-num); font-weight: 400; font-size: 16px; color: var(--ink); }
.ui .br-stop.got .br-ic { filter: none; background: #fff1b8; } .ui .br-stop.got { color: var(--ink); }
.ui .br-stop.next .br-ic { filter: none; background: #fff8e0; box-shadow: 0 0 0 3px #f3c440, 0 0 16px rgba(243, 196, 64, 0.8); animation: br-pulse 1.6s ease-in-out infinite; } @keyframes br-pulse { 50% { transform: scale(1.08); } }
.ui .band-go { margin-top: 6px; } .ui .band-go .face { font-size: 24px; }
.ui .band-link { display: block; margin: 8px auto 0; background: none; border: 0; text-decoration: underline; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.ui .band-quest { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 14px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: rgba(255, 255, 255, 0.35); }
.ui .band-quest .xq { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font-size: 20px; }
.ui .band-quest div { flex: 1; display: flex; flex-direction: column; } .ui .band-quest div span { font-size: 13px; color: rgba(27, 20, 16, 0.65); } .ui .band-quest em { font-style: normal; font-family: var(--font-num); color: #1d6a29; font-size: 18px; }
.ui .band-top { margin-top: 14px; text-align: left; } .ui .band-top[hidden] { display: none; } .ui .band-k { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: rgba(27, 20, 16, 0.62); margin-bottom: 4px; }
.ui .band-top ol { list-style: none; margin: 0; padding: 0; } .ui .band-top li { display: flex; gap: 8px; padding: 4px 2px; border-bottom: 2px dashed rgba(27, 20, 16, 0.18); } .ui .band-top li .r { width: 28px; color: rgba(27, 20, 16, 0.6); } .ui .band-top li em { margin-left: auto; font-style: normal; font-family: var(--font-num); }
.ui .band-fine { margin: 14px 0 0; font-size: 12px; color: rgba(27, 20, 16, 0.6); } .ui .band-fine a { color: var(--ink); }
@media (max-width: 420px) { .ui .br-stop span { font-size: 10px; } .ui .br-stop .br-ic { width: 40px; height: 40px; } .ui .br-stop .br-ic svg { width: 32px; height: 32px; } .ui .band-tix b { font-size: 38px; } }
.ui .band-acct { margin-top: 12px; font-size: 13px; color: rgba(27, 20, 16, 0.7); } .ui .band-acct a { color: var(--ink); font-weight: 600; }
.ui .r5-share .sbox { max-width: 100%; min-width: 0; } .ui .r5-share .stext { overflow-wrap: anywhere; word-break: break-word; } /* the shared link is one long word (mac-aa: the dialog ran off a 390 screen) */
.ui .band-quest .btn { text-decoration: none; } /* the underline cut through the outlined GO */
.ui .br-stop .spr { zoom: 1.3; }
@media (max-height: 700px) { .ui .bandp { padding-top: 24px; } .ui .band-road { height: 100px; margin: 10px 4px 6px; } .ui .band-quest { margin-top: 10px; padding: 8px 10px; } .ui .band-acct { margin-top: 8px; } .ui .band-fine { margin-top: 8px; } .ui #band.overlay { padding: 10px 16px; } }
.ui .br-stop .br-ic { overflow: hidden; } .ui .br-stop .spr { zoom: normal; }
.ui .pill.band-chip.fresh { animation: band-fresh 1.8s ease-in-out infinite; } @keyframes band-fresh { 0%, 70%, 100% { box-shadow: none; transform: none; } 80% { transform: scale(1.12); box-shadow: 0 0 0 3px #f3c440, 0 0 14px rgba(243, 196, 64, 0.9); } }
html[data-reduce-motion="1"] .ui .pill.band-chip.fresh { animation: none; box-shadow: 0 0 0 3px #f3c440; }
.ui .hud-top .pill.band-chip.signin .label { display: inline; opacity: 1; font-weight: 600; } /* a member to sign in on a phone: the chip says so (mac-cb: a bare blinking coin said nothing) */
/* phones: the bottom dock steps aside while a sheet or an overlay has the stage (mac-cb: the BUILD sheet showed two BUILD YOUR CELLAR buttons; the poster's buttons sat over the dock) */
@media (max-width: 700px) { body.ui:has(.side.open) .hud-bottom, body.ui:has(.overlay.open) .hud-bottom, body.ui.result-open .hud-bottom { visibility: hidden; } }

/* ---- mac-cb's UI scan 10-22, the objective quick fixes (research report items #3 #8 #10 #12 #13 #14 #15) ---- */
/* #3 the profile: its three buttons stay at the foot while the dossier scrolls; a newcomer's stats are one wide line (ui.js pf-stats) */
.ui .dossier .pf-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 14px; padding: 10px 0 2px; gap: 10px; background: var(--parch); box-shadow: 0 -14px 10px -8px var(--parch); border-top: 3px dotted rgba(107, 63, 34, 0.35); }
.ui .statgrid .stat.wide { grid-column: 1 / -1; }
/* #8 the Ranks drawer takes its content's height (three rows left 600 px of blank paper at 1440x900), capped as before */
.ui .drawer { height: auto; max-height: min(72vh, 620px); }
.ui .drawer .body { min-height: 0; overflow: auto; }
@media (max-width: 700px) { .ui .drawer { height: auto; max-height: 78vh; } }
/* #10 the live pill keeps its word on phones (a bare red "1" on its own row read as nothing) */
@media (max-width: 1100px) { .ui .hud-top #pill-live .label { display: inline; } }
/* #12 phones: an 11 px floor on the dock labels, the tier notches and the poster's small caps; 44 px hit areas on Skip and the (i) */
@media (max-width: 700px) { .ui .toolbar .tool .tool-lbl { font-size: 11px; } .ui .cellar-sheet .tier-notches i button { font-size: 11px; letter-spacing: 0.3px; } .ui .tier-notches i b { font-size: 11px; } .ui .poster .reward .k { font-size: 11px; letter-spacing: 2px; } .ui .poster .by, .ui .poster .sub { font-size: 11px; } }
@media (max-width: 700px) { .ui .tut-skip { min-height: 36px; padding: 6px 12px; } .ui .tut-skip::after { content: ''; position: absolute; inset: -4px; } }
.ui .info-pill { position: relative; } .ui .info-pill::after { content: ''; position: absolute; inset: -8px; } /* a 44 px hit area around the (i) */
/* #14 BUILD at 1280x720: the body no longer clips its last line (26 px) */
@media (max-height: 720px) and (min-width: 701px) { .ui .cellar-sheet .rs-body { gap: 12px; padding-top: 10px; padding-bottom: 10px; } .ui .dep-stage { height: 96px; } }
/* #15 the POSTER WALL ribbon on one line at 390 and under */
@media (max-width: 420px) { .ui .overlay .panel > .ribbon, .ui .overlay .ribbon { font-size: 18px; padding: 7px 14px 10px; margin: 0 20px; } }
@media (max-width: 700px) { .ui .poster .by, .ui .poster .crime, .ui .poster .seen, .ui .poster .reward .k { font-size: 11px; } .ui .hood { width: 38px; height: 38px; } } /* #12: the poster's small caps and the hood swatches on phones */
@media (max-height: 720px) and (min-width: 701px) { .ui .side { top: 76px; bottom: 84px; } } /* #14: 16 px more for the side sheets at 1280x720 (BUILD clipped its last line) */
@media (max-width: 700px) { .ui #poster-wrap .po-paper .by, .ui #poster-wrap .po-paper .crime, .ui #poster-wrap .po-paper .seen > span { font-size: 11px; letter-spacing: 1px; } .ui #poster-wrap .po-paper .reward .k { font-size: 11px; letter-spacing: 2px; } } /* #12: the poster's 9 px pixel caps on phones */
@media (max-height: 720px) and (min-width: 701px) { .ui .side.cellar-sheet { top: 80px; max-height: calc(100vh - 96px); } } /* #14: BUILD at 1280x720 keeps its last line */

/* the waiting RAID face's sub line (mac-f1's live walk 10-22): light grey on the greyed button was near-invisible; ink on the grey face reads */
.ui #panel.rs2 .r2-go.wait.off .face small#send-sub { color: var(--ink); opacity: 0.92; text-shadow: none; }

/* ---------------------------------------------------------------- the house sheet "YOUR MILL" (owner 10-22, mac-cb's design) */
.ui #bagpanel.house .tabs, .ui #bagpanel.house #dep-house, .ui #bagpanel.house #dep-note { display: none; }
.ui #bagpanel .hs .hero { display: grid; grid-template-columns: 104px 1fr; gap: 8px 12px; align-items: center; padding: 10px 14px 10px; }
.ui #bagpanel .hs .art { position: relative; width: 104px; height: 78px; overflow: hidden; } .ui #bagpanel .hs .hero .art:has(.spr.abbey0), .ui #bagpanel .hs .hero .art:has(.spr.castle0) { height: 100px; } /* the big houses get a 100 px box so they fit whole and look big (mac-cb); the small ones keep 78, so a mill with three raids on the door still opens without a scroll */
.ui #bagpanel .hs .art .spr { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scale(var(--s, .46)); transform-origin: 50% 100%; } .ui #bagpanel .hs .art .spr.abbey0 { --s: .34; } .ui #bagpanel .hs .art .spr.castle0 { --s: .28; } /* the big houses are wider sprites: scaled to the 104 px box */
.ui #bagpanel .hs .k { font: 600 11px/1.2 var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; color: #6b4126; opacity: .9; }
.ui #bagpanel .hs .k.lk { margin-top: 4px; text-transform: none; letter-spacing: 0; }
.ui #bagpanel .hs .big { font: 400 38px/1.05 var(--font-num); color: var(--ink); margin-top: 4px; letter-spacing: .5px; -webkit-text-stroke: 0; text-shadow: none; }
.ui #bagpanel .hs .big small { font: 600 13px var(--font-ui); letter-spacing: .5px; color: #6b4126; margin-left: 7px; vertical-align: middle; }
.ui #bagpanel .hs .earn { font: 700 14px/1.2 var(--font-ui); color: #1d6a29; margin-top: 5px; }
.ui #bagpanel .hs .earn.zero { color: #6b4126; font-weight: 600; }
.ui #bagpanel .hs .barwrap { grid-column: 1 / -1; margin-top: 2px; }
.ui #bagpanel .hs .bar { position: relative; height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: #e9dcbb; overflow: hidden; }
.ui #bagpanel .hs .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd45a, #f3b61f); border-right: 3px solid var(--ink); transition: width 500ms var(--ease-out); }
.ui #bagpanel .hs .barl { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font: 600 12px var(--font-ui); color: var(--ink); }
.ui #bagpanel .hs .barl b { font: 800 12px var(--font-ui); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; paint-order: normal; }
.ui #bagpanel .hs .barl span { -webkit-text-stroke: 0; text-shadow: none; }
.ui #bagpanel .hs .ghost { position: relative; display: inline-block; width: 34px; height: 30px; margin-left: 6px; vertical-align: bottom; opacity: .55; filter: grayscale(1); overflow: hidden; }
.ui #bagpanel .hs .ghost .spr { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scale(.105); transform-origin: 50% 100%; }
.ui #bagpanel .hs .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 0; }
.ui #bagpanel .hs .chip { font: 700 14px var(--font-ui); color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.ui #bagpanel .hs .chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ui #bagpanel .hs .chip.on { background: #f3c440; }
.ui #bagpanel .hs .chip.goal { background: #8ef08e; }
.ui #bagpanel .hs .chip.goal.on { background: #5fd65f; }
.ui #bagpanel .hs .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -4px; }
.ui #bagpanel .hs .def { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff6dc; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); font: 700 13px/1.15 var(--font-ui); color: var(--ink); text-align: left; cursor: pointer; }
.ui #bagpanel .hs .def small { display: block; font: 600 11px/1.25 var(--font-ui); color: #6b4126; margin-top: 2px; }
.ui #bagpanel .hs .def .ic { width: 28px; height: 28px; border-radius: 50%; background: #ffd45a; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; }
.ui #bagpanel .hs .def .ic svg { width: 16px; height: 16px; }
.ui #bagpanel .hs .def.off .ic { background: #d9ccad; }
.ui #bagpanel .hs .feed { padding: 8px 12px 8px; }
.ui #bagpanel.house .rs-body { gap: 12px; }
.ui #bagpanel .hs .feed .k { margin-bottom: 6px; }
.ui #bagpanel .hs .feed .l { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 13px/1.5 var(--font-ui); color: var(--ink); }
.ui #bagpanel .hs .feed .l em { font-style: normal; font-weight: 800; color: #1d6a29; flex: none; }
.ui #bagpanel .hs .feed .l.bad em { color: #b23b3b; }
.ui #bagpanel .hs .feed .l.muted span { color: #6b4126; }
.ui #bagpanel .hs .feed .btn.small.rev { min-height: 26px; font-size: 11px; padding: 2px 8px 4px; border-radius: 8px; }
.ui #bagpanel .hs .sun { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font: 600 13px var(--font-ui); color: var(--ink); gap: 8px; }
.ui #bagpanel .hs .sun .btn.small { padding: 5px 10px; font-size: 12px; min-height: 32px; }
.ui #bagpanel .hs .second { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 5px 12px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.ui #bagpanel .hs .second .art { width: 56px; height: 42px; }
.ui #bagpanel .hs .second .art .spr { --s: .25; } .ui #bagpanel .hs .second .art .spr.abbey0 { --s: .18; } .ui #bagpanel .hs .second .art .spr.castle0 { --s: .15; } /* the other house's card: the hero's scale × 56/104 (it read as a speck, owner 10-26) */
.ui #bagpanel .hs .second .big { font-size: 22px; margin: 0; }
.ui #bagpanel .hs .second .k { margin-top: 2px; }
.ui #bagpanel .hs .second .k.t { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.ui #bagpanel .hs .second .car { font: 400 22px var(--font-num); color: #6b4126; }
.ui #bagpanel .hs .second.ghost2 { border-style: dashed; opacity: .85; background: transparent; }
.ui #bagpanel .hs .second.ghost2 .plus { width: 44px; height: 44px; border: 3px dashed #6b4126; border-radius: 10px; display: grid; place-items: center; font: 400 26px var(--font-num); color: #6b4126; }
.ui #bagpanel .hs .leave { display: flex; justify-content: flex-end; align-items: center; margin: -6px 2px 0; font: 600 13px var(--font-ui); color: #6b4126; }
.ui #bagpanel .hs .leave a { color: #6b4126; text-decoration: underline; text-underline-offset: 3px; }
.ui #bagpanel.house .rs-body section[data-t="deposit"].on, .ui #bagpanel.house .rs-body section[data-t="defend"].on, .ui #bagpanel.house .rs-body section[data-t="leave"].on { padding-top: 0; }

/* the house sheet, pass 2 (mac-cb's review 10-22): the feed rows, the in-place expansions, the leave row, phones */
.ui #bagpanel.house #asset-seg, .ui #bagpanel.house #xverify { display: none; }
.ui #bagpanel .hs .feed .l { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 3px 6px 3px 8px; margin: 0 -6px; border-radius: 10px; font: 600 13px/1.3 var(--font-ui); color: var(--ink); position: relative; }
.ui #bagpanel .hs .feed .l + .l { margin-top: 1px; }
.ui #bagpanel .hs .feed .l .hr { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--h, #3fa34d); border: 2px solid var(--ink); position: relative; box-sizing: border-box; }
.ui #bagpanel .hs .feed .l .hr i { position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; border-radius: 50%; background: #1d6a29; color: #fff; font: 800 10px/13px var(--font-ui); text-align: center; border: 2px solid var(--ink); box-sizing: border-box; font-style: normal; }
.ui #bagpanel .hs .feed .l.bad .hr i { background: #b23b3b; }
.ui #bagpanel .hs .feed .l.bad .hr { background: color-mix(in srgb, var(--h, #3fa34d) 35%, #b23b3b); } /* the robbed row is red top to bottom (mac-cb): the raider's hood tinted red */
.ui #bagpanel .hs .feed .l .who { grid-column: 2; grid-row: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui #bagpanel .hs .feed .l .who.one { grid-column: 1 / -1; grid-row: 1; font-weight: 600; color: #6b4126; }
.ui #bagpanel .hs .feed .l em { grid-column: 3; grid-row: 1; font-style: normal; font-weight: 800; color: #1d6a29; justify-self: end; }
.ui #bagpanel .hs .feed .l.bad em { color: #b23b3b; }
.ui #bagpanel .hs .feed .l .what { grid-column: 2; grid-row: 2; font-size: 12px; color: #6b4126; font-weight: 600; }
.ui #bagpanel .hs .feed .l .when { grid-column: 3; grid-row: 2; font-size: 12px; color: #6b4126; font-weight: 600; justify-self: end; }
.ui #bagpanel .hs .feed .l.bad { background: rgba(178, 59, 59, 0.08); box-shadow: inset 4px 0 0 #b23b3b; }
.ui #bagpanel .hs .feed .btn.small.rev { min-height: 26px; font-size: 11px; padding: 2px 9px 4px; border-radius: 8px; }
.ui #bagpanel .hs .def.sel { background: #ffe9a8; }
.ui #bagpanel .hs .hx { margin-top: -6px; padding: 10px 12px 10px; border: 3px solid var(--ink); border-radius: 12px; background: rgba(255, 255, 255, 0.32); }
.ui #bagpanel .hs .hx .k { margin-bottom: 8px; font-size: 11px; }
.ui #bagpanel .hs .hx .k.mercy { margin: 8px 0 0; }
.ui #bagpanel .hs .hx .buy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui #bagpanel .hs .hx .buy.two { grid-template-columns: repeat(2, 1fr); }
.ui #bagpanel .hs .hx .btn.lv { min-height: 44px; font-size: 15px; padding: 6px 8px 8px; }
.ui #bagpanel .hs .hx .btn.lv .sub { display: block; font-size: 12px; font-weight: 800; opacity: 1; color: rgba(36, 22, 15, 0.85); text-shadow: none; } /* the sub is a fact under the label: ink, not white on blue (mac-cb) */
.ui #bagpanel .hs .lv-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; margin-top: -2px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: rgba(255, 255, 255, 0.32); font: 600 12px/1.3 var(--font-ui); color: var(--ink); }
.ui #bagpanel .hs .lv-row .ringc { width: 40px; height: 40px; }
.ui #bagpanel .hs .lv-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; margin-top: 6px; } /* any amount + 25 / 50 / ALL (owner 10-26) */
.ui #bagpanel .hs .lv-amt .lv-box { display: flex; align-items: center; gap: 4px; min-width: 0; height: 40px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.ui #bagpanel .hs .lv-amt .lv-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 20px var(--font-num); color: var(--ink); }
.ui #bagpanel .hs .lv-amt .lv-box .cur { font: 400 16px var(--font-num); color: #a08860; }
.ui #bagpanel .hs .lv-amt .chip { min-height: 40px; padding: 0 10px; }
.ui #bagpanel .hs .lv-row .ringc::before { inset: 5px; border-width: 2px; }
.ui #bagpanel .hs .lv-row .ringc .spr { transform: scale(.5); }
.ui #bagpanel .hs .lv-row .btn.small { min-height: 34px; font-size: 13px; padding: 4px 12px 6px; }
@media (max-width: 700px) { .ui:has(#bagpanel.open) .toasts, .ui:has(#panel.open) .toasts { bottom: calc(var(--sheet-foot, 96px) + 12px); } } /* measured: ui.js sets --sheet-foot from the open sheet's foot */ /* a Sheriff's line never sits on the sheet's foot on a phone (mac-cb #9) */

/* a top-up in YOUR MILL (mac-cb 10-22): coins fly, the house pops on a tier-up, the button says ADDED ✓ */
.ui .coin-fly { position: fixed; z-index: 120; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe27a, #e0a400); border: 2px solid var(--ink); box-sizing: border-box; pointer-events: none; }
.ui #bagpanel .hs .hero .art .spr.pop { animation: hs-pop 520ms var(--ease-out); }
@keyframes hs-pop { 0% { transform: translateX(-50%) scale(var(--s, .46)); } 45% { transform: translateX(-50%) scale(calc(var(--s, .46) * 1.2)); } 100% { transform: translateX(-50%) scale(var(--s, .46)); } }
.ui #dep-go.added { filter: saturate(1.15); }
/* CAUGHT ONE: RAID THEM BACK with "@x tried your door" under it (mac-cb 10-22) */
.ui .r5-btn .face-sub { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 600 11px/1 var(--font-ui); color: rgba(255, 255, 255, 0.9); letter-spacing: .2px; pointer-events: none; text-transform: none; -webkit-text-stroke: 0; text-shadow: 0 1px 0 var(--ink); }
.ui .r5-btn.has-sub .face { padding-bottom: 12px; }

/* ---------------------------------------------------------------- THE TRAINING YARD (W8, owner 10-22): the practice raid on the landing, nothing of the game beyond it */
html.yard #mybag, html.yard #pill-box, html.yard #band-chip, html.yard #hood-chip, html.yard #connect, html.yard #menu-open, html.yard #primary, html.yard #primary-wrap { display: none !important; } /* nothing that needs real money or the Band: no cellar, pots, Band, hood, wallet, menu, and no EARN YOUR HOOD primary. The bags / heists lists, the posters wall and the ranks show (owner 10-23: "let's show them"), on the pretend street */
html.yard .hud-bottom .toolbar, html.yard #board { display: none !important; } /* owner 10-23: no POSTERS / RANKS in the Yard; both get a redesign before the real launch (HANDOFF: LAUNCH TODO) */
html.yard .tut-progress .s2, html.yard .tut-progress .s3 { display: none; } html.yard .tut-progress .s1 { left: 50%; }
.ui .yard-wrap { z-index: 92; }
.ui .yard-panel { position: relative; width: min(520px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; display: grid; justify-items: center; gap: 12px; padding: 18px 18px 18px; }
.ui .yard-panel > .close { position: absolute; right: 10px; top: 10px; }
.ui .yard-poster { position: relative; width: 220px; transform: rotate(-3deg); transition: transform 120ms var(--ease-out); }
.ui .yard-poster.drop { transform: rotate(-3deg) translateY(-18px) scale(1.04); }
.ui .yard-card { display: block; width: 220px; height: 275px; border: 4px solid var(--ink); border-radius: 10px; background: #2a1c0c; box-shadow: 0 6px 0 var(--ink); cursor: zoom-in; }
.ui .yard-coin { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.ui .yard-row { height: 40px; display: inline-flex; align-items: center; gap: 8px; font: 400 26px/1 var(--font-num); color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); border-radius: 999px; padding: 0 16px 2px 10px; box-shadow: 0 3px 0 var(--ink); }
.ui .yard-row .spr { transform: scale(.6); margin: -6px -4px; } .ui .yard-row .plus { color: #1d6a29; } .ui .yard-row .arr { color: #6b4126; font-size: 20px; } .ui .yard-row.bump { animation: hs-bump 500ms var(--ease-out); }
@keyframes hs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ui .yard-main { display: flex; gap: 10px; align-items: stretch; justify-content: center; width: 100%; }
.ui .yard-panel a.btn, .ui .yard-panel .btn { text-decoration: none !important; } /* no underline on a button (mac-f1) */
.ui .yard-primary { flex: 1 1 auto; } .ui .yard-primary.full { width: 100%; white-space: nowrap; } .ui .yard-primary .xg { font-size: 1.05em; margin-right: 6px; }
.ui .yard-primary .tix { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; height: 1.35em; padding: 0 10px 0 6px; font-size: 1em; color: var(--ink); background: #f3c440; border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap; vertical-align: middle; -webkit-text-stroke: 0; text-shadow: none; } .ui .yard-primary .tix .spr { transform: scale(.6); margin: -8px -4px; } /* the badge: a gold pill at label height (mac-f1) */
.ui .yard-sq { width: 56px; min-width: 56px; height: 56px; padding: 0; display: grid; place-items: center; font-size: 22px; border-radius: 14px; } .ui .yard-sq svg { width: 22px; height: 22px; transform: rotate(90deg); } .ui .yard-sq.did { background: #8ef08e; }
.ui .yard-pair { display: flex; gap: 12px; justify-content: center; }
.ui .yard-fun { display: grid; justify-items: center; gap: 8px; margin-top: 4px; }
.ui .yard-fun .k { font: 600 12px/16px var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; color: #6b4126; } .ui .yard-fun .k .tick { color: #1d6a29; }
.ui .yard-fun .stars { display: flex; gap: 20px; }
.ui .yard-star { width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform 160ms var(--ease-out); }
.ui .yard-star svg { width: 48px; height: 48px; } .ui .yard-star path { fill: transparent; stroke: #e0a400; stroke-width: 3; stroke-linejoin: round; }
.ui .yard-star:hover { transform: translateY(-3px); } .ui .yard-star.on path { fill: #ffd45a; stroke: var(--ink); } .ui .yard-star.pop { animation: yard-pop 300ms var(--ease-out); }
@keyframes yard-pop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ui .yard-spark { position: fixed; z-index: 120; width: 8px; height: 8px; border-radius: 50%; background: #ffd45a; border: 2px solid var(--ink); box-sizing: border-box; pointer-events: none; }
.ui .yard-idea { height: 18px; border: 0; background: transparent; font: 600 13px/18px var(--font-ui); color: #6b4126; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui .yard-ideabox { position: relative; width: min(300px, 100%); } .ui .yard-ideabox input { width: 100%; height: 44px; box-sizing: border-box; font: 500 14px var(--font-ui); color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); border-radius: 12px; padding: 0 48px 0 12px; }
.ui .yard-ideabox button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #8ef08e; color: var(--ink); font: 700 16px/1 var(--font-ui); cursor: pointer; } .ui .yard-ideabox .tick { display: block; text-align: center; font: 800 20px/44px var(--font-ui); color: #1d6a29; }
.ui .yard-back { height: 20px; font: 600 14px/20px var(--font-ui); color: #6b4126; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.ui .yard-panel.still .yard-poster { transition: none; }
@media (max-width: 480px) { .ui .yard-panel { width: calc(100vw - 32px); } .ui .yard-poster, .ui .yard-card { width: 180px; } .ui .yard-card { height: 225px; } .ui .yard-primary.full { font-size: 19px; } .ui .yard-primary.full .tix { margin-left: 8px; } .ui .yard-panel .ribbon.sm { max-width: calc(100% - 88px); box-sizing: border-box; white-space: nowrap; font-size: 15px; letter-spacing: .3px; padding: 7px 16px 10px; } } /* one line at 390: the ribbon a step smaller and never wrapping, inside a width that clears the ✕; the badge inline */
/* the Yard's street is FULL (owner 10-22, from the bare-vs-full pictures): the ticker, the live pill, the minimap, the clock, help and the house timer chips all stay; they read the mock street alone */
.ui .yard-card { cursor: zoom-in; }
.ui .yard-big { z-index: 95; place-items: center; cursor: zoom-out; }
.ui .yard-big.open { display: grid; } /* only while open: a bare display:grid beat .overlay's display:none, so the closed poster stayed on screen (mac-d6 QA S3) */
.ui .yard-big canvas { width: auto; height: min(90vh, 1350px); max-width: calc(100vw - 24px); border: 4px solid var(--ink); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
/* the result card's buttons answer the pointer like every other button (owner 10-22 late: FINISH didn't move on hover): a 2 px lift and a touch brighter */
.ui .r5-btn .face { transition: transform var(--t-fast, 120ms) var(--ease-out, ease-out), filter var(--t-fast, 120ms); }
@media (hover: hover) { .ui .r5-btn:hover .face { transform: translateY(-2px); filter: brightness(1.06); } }
.ui .r5-btn:active .face { transform: translateY(7px); filter: none; }

/* ================================================================== THE TRAINING YARD's end, v3 (owner 10-22 late: "quite bad… top games' UX"; no stars, the
   feedback box open, KEEP PLAYING the one button). Poster + share icons on the left, the gain on the right: +1 ticket → the road → the FREE MINT chest */
.ui .yard-panel.v3 { width: min(560px, calc(100vw - 32px)); gap: 14px; padding-top: 34px; }
.ui .yard-top { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; width: 100%; }
.ui .yard-panel.v3 .yard-poster { width: 168px; }
.ui .yard-panel.v3 .yard-card { width: 100%; height: auto; display: block; cursor: zoom-in; }
.ui .yard-panel.v3 .yard-pair { margin-top: 10px; gap: 10px; }
.ui .yard-panel.v3 .yard-sq { width: 48px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; }
.ui .yard-gain { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.ui .yard-plus { display: inline-flex; align-items: center; gap: 8px; font: 400 46px/1 var(--font-num); color: #1d6a29; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ui .yard-plus.bump { animation: yplus .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes yplus { 40% { transform: scale(1.18); } }
.ui .yard-road { position: relative; width: 100%; height: 50px; display: flex; align-items: center; }
.ui .yr-bar { position: relative; flex: 1; height: 20px; margin-right: 26px; border: 3px solid var(--ink); border-radius: 12px; background: #4a3326; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .28); overflow: hidden; }
.ui .yr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#8ef08e, #3fa34d); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.ui .yr-chest { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--ink);
  background: radial-gradient(circle at 50% 38%, #fff4bf, #f3c440 58%, #c98a1d); box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #f3c440, 0 0 24px 6px rgba(255, 212, 90, .7); animation: yglow 2.4s ease-in-out infinite; }
@keyframes yglow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #f3c440, 0 0 38px 12px rgba(255, 212, 90, .9); } }
.ui .yard-goal { display: inline-flex; align-items: center; gap: 4px; font: 400 26px/1 var(--font-num); color: var(--ink); }
.ui .yard-goal small { font-size: 18px; color: #6b4126; } .ui .yard-goal .ytk.sm { margin: 0 4px 0 2px; }
.ui .yard-goal span { margin-left: 6px; font: 400 20px/1 var(--font-num); color: #f3c440; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: .5px; }
.ui svg.ytk, .ui svg.ych { display: inline-block; flex: none; image-rendering: pixelated; }
.ui .yard-fly { position: absolute; left: 50%; top: 40%; z-index: 5; pointer-events: none; margin: -12px 0 0 -26px; }
.ui .yard-panel.v3 .yard-primary { width: 100%; }
.ui .yard-join { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ui .yard-join .plus { display: inline-flex; align-items: center; gap: 6px; color: #1d6a29; }
.ui .yfb { width: 100%; display: grid; gap: 8px; }
.ui .yfb textarea { width: 100%; min-height: 78px; resize: vertical; box-sizing: border-box; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff6dc; color: var(--ink); font: 500 16px/1.35 var(--font-ui); box-shadow: inset 0 3px 0 rgba(36, 22, 15, .08); }
.ui .yfb textarea:focus { outline: none; border-color: #3fa34d; box-shadow: 0 0 0 3px rgba(63, 163, 77, .35); }
.ui .yfb-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 40px; }
.ui .yfb-msg { flex: 1; font: 600 14px/1.2 var(--font-ui); color: #6b4126; } .ui .yfb-msg .tick { color: #1d6a29; }
.ui .yfb.sent textarea { opacity: .55; }
.ui .yard-panel.v3 .yard-back { margin-top: 0; text-decoration: none; }
.ui .yard-panel.v3 .yard-back:hover { text-decoration: underline; }
.ui .yfb-panel { padding-top: 40px; }
/* the dock once the end screen closes: the way back and FEEDBACK, bottom-left, over the street */
.ui .yard-dock { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; gap: 8px; }
.ui .yard-dock[hidden] { display: none; }
.ui .yard-dock .btn { text-decoration: none; }
@media (max-width: 480px) {
  .ui .yard-panel.v3 { gap: 12px; }
  .ui .yard-top { gap: 12px; }
  .ui .yard-panel.v3 .yard-poster { width: 118px; }
  .ui .yard-panel.v3 .yard-sq { width: 40px; height: 38px; }
  .ui .yard-plus { font-size: 36px; }
  .ui .yr-chest { width: 50px; height: 50px; } .ui .yr-chest svg { width: 36px; height: 27px; }
  .ui .yard-goal { font-size: 22px; } .ui .yard-goal span { font-size: 16px; }
  .ui .yfb textarea { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ui .yr-chest { animation: none; } .ui .yr-bar i { transition: none; } }
.ui .yard-panel .yard-join { display: flex; flex-wrap: nowrap; white-space: nowrap; min-height: 54px; font-size: 22px; }
.ui .yard-goal, .ui .yard-goal span { white-space: nowrap; }
@media (max-width: 480px) { .ui .yard-panel .yard-join { font-size: 18px; } .ui .yard-goal span { font-size: 15px; } }
@media (max-width: 480px) and (max-height: 760px) {
  .ui .yard-panel.v3 { gap: 10px; padding-top: 30px; }
  .ui .yard-panel.v3 .yard-poster { width: 96px; }
  .ui .yard-panel.v3 .yard-pair { margin-top: 6px; } .ui .yard-panel.v3 .yard-sq { width: 36px; height: 34px; }
  .ui .yard-panel.v3 .yard-primary { min-height: 54px; }
  .ui .yfb textarea { min-height: 52px; } .ui .yfb-foot { min-height: 34px; }
}
.ui .yard-dock { left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* centred: the day/night switch and the minimap keep their corners */
.ui .yard-dock .yd-night { width: 46px; padding: 0; display: grid; place-items: center; } .ui .yard-dock .yd-night .ico { width: 22px; height: 22px; }
@media (min-width: 761px) { .ui .yard-dock .yd-night { display: none; } } /* computers keep the HUD's own switch (top right) */
/* the dock steps aside while a sheet or card is up (it covered the raid sheet's RAID on phones) */
.ui:has(.side.open, #panel.open, #bagpanel.open, #result-wrap.open, #dialog-wrap.open, #tut-check.open, #poster-wrap.open, #wall.open, #band.open, .overlay.open, .plot-sheet.open) .yard-dock { display: none; } /* the profile too (owner 10-24: BAND · FEEDBACK sat on its gear and x) */
.ui .yard-dock .yd-night { background: #2a2244; color: #f3c440; border-color: var(--ink); } .ui .yard-dock .yd-night .ico { fill: currentColor; color: #f3c440; }
@media (max-width: 760px) { .ui .yard-dock { left: auto; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; transform: none; } } /* phones: the bottom row is the game's (POSTERS, ranks); the top right is free */
@media (max-width: 760px) { .ui .yard-dock { top: calc(60px + env(safe-area-inset-top, 0px)); } } /* under the raid-live pill */

/* ================================================================== THE TRAINING YARD's end, v4 (owner 10-23): TRAINING COMPLETE, no poster (it lives on your house and
   on level-ups); the +1 ticket, the road to the FREE MINT, two recap tiles (LOOT, HOUSE BUILT), KEEP PLAYING, the feedback box. Tight: no dead space */
.ui .yard-panel.v4 { width: min(500px, calc(100vw - 32px)); gap: 12px; padding-top: 38px; }
.ui .yard-hero { width: 100%; display: grid; justify-items: center; gap: 6px; }
.ui .yard-panel.v4 .yard-plus { font-size: 52px; }
.ui .yard-panel.v4 .yard-road { height: 64px; margin-top: -4px; }
.ui .yard-panel.v4 .yr-bar { margin-right: 30px; }
.ui .yard-panel.v4 .yr-chest { width: 66px; height: 66px; right: -4px; }
.ui .yard-panel.v4 .yard-goal { margin-top: -4px; }
.ui .yard-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ui .yr-tile { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 70px; padding: 8px; border: 3px solid var(--ink); border-radius: 12px; background: #fff6dc; box-shadow: 0 4px 0 var(--ink); }
.ui .yr-tile b { font: 400 28px/1 var(--font-num); color: var(--ink); display: inline-flex; align-items: center; } .ui .yr-tile.win b { color: #1d6a29; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.ui .yr-tile b .ico { width: 30px; height: 30px; }
.ui .yr-tile span { font: 700 12px/1 var(--font-ui); letter-spacing: 1.2px; color: #6b4126; }
@media (max-width: 480px) { .ui .yard-panel.v4 .yard-plus { font-size: 42px; } .ui .yr-tile { min-height: 60px; } .ui .yr-tile b { font-size: 24px; } }
@media (max-width: 480px) and (max-height: 760px) { .ui .yard-panel.v4 { gap: 9px; padding-top: 32px; } .ui .yard-panel.v4 .yard-plus { font-size: 36px; } .ui .yard-panel.v4 .yard-road { height: 54px; } .ui .yard-panel.v4 .yr-chest { width: 54px; height: 54px; } .ui .yr-tile { min-height: 52px; padding: 6px; } }
html.yard .tut-progress .s2 { display: grid; left: 75%; } html.yard .tut-progress .s1 { left: 25%; } /* the Yard's rail: the raid, the house (owner 10-23); the hood stays hidden */
.ui .yard-panel.v4 .yard-hero:not(:has(.yard-plus)) { padding-top: 16px; } /* a guest has no +1 row: the chest clears the ribbon */

/* owner 10-23: off the screen, in the Yard and the game: the "N raid live" pill, the raid history ticker, the minimap, and the clock dial (one
   day/night switch stays: #toggle, sun = day, half-moon = night, i-sunb / i-moonb) */
.ui #pill-live, .ui #ticker, .ui #minimap, .ui #clock { display: none !important; }
.ui #toggle .ico, .ui .yard-dock .yd-night .ico { image-rendering: pixelated; }
.ui .hm-row[data-proxy="ticker-open"], .ui #ticker-open { display: none !important; } /* the ballad (the ticker) went with it */

/* ================================================================== THE PLAYER CHIP, top-left (owner 10-23; Clash Royale / Clash of Clans / Hay Day): the portrait,
   a gold star with the level on its corner, the title over a thin XP bar, in the HUD's navy-and-gold pill. Always on; a tap = the profile */
.ui .me-chip { position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 30; display: flex; align-items: center; gap: 0; padding: 0 16px 0 0; height: 46px; margin-top: 6px;
  background: linear-gradient(#34406b, #262f52); border: 3px solid var(--ink); border-radius: 999px; box-shadow: inset 0 0 0 2px #c9a24a, 0 4px 0 var(--ink); cursor: pointer; color: #fff3d6; font: inherit;
  transition: transform 120ms var(--ease-out, ease-out), filter 120ms; -webkit-tap-highlight-color: transparent; }
.ui .me-chip:hover { transform: translateY(-2px); filter: brightness(1.06); } .ui .me-chip:active { transform: translateY(1px); }
.ui .me-chip:focus-visible { outline: 3px solid #f3c440; outline-offset: 3px; }
.ui .mc-face { position: relative; flex: none; width: 58px; height: 58px; margin: -9px 8px -9px -8px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 0 0 3px #f3c440, 0 4px 0 3px var(--ink); background: #d9c99a; }
.ui .mc-face canvas, .ui .mc-face img { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: cover; }
.ui .mc-face.has-av canvas { display: none; }
.ui .mc-lv { position: absolute; left: 26px; top: 26px; width: 34px; height: 34px; display: grid; place-items: center; padding-top: 3px; box-sizing: border-box; z-index: 2; pointer-events: none;
  font: 400 15px/1 var(--font-num); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5.3 11 12 1.5-8.8 8.3 2.3 11.9L20 28.9 9.2 34.7l2.3-11.9-8.8-8.3 12-1.5z' fill='%23f3c440' stroke='%2324160f' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M20 7l3.6 7.4 7.4 1' fill='none' stroke='%23fff1b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ui .mc-lv.pop { animation: mc-pop 700ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.7) rotate(-12deg); } 100% { transform: scale(1); } }
.ui .mc-body { display: grid; gap: 4px; min-width: 0; text-align: left; }
.ui .mc-title { font: 400 14px/1 var(--font-num); letter-spacing: .6px; text-transform: uppercase; color: #fff3d6; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.ui .mc-bar { position: relative; width: 120px; height: 11px; border: 2px solid var(--ink); border-radius: 6px; background: #151a33; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.ui .mc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe27a, #f3c440 55%, #d6a12c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); transition: width 600ms cubic-bezier(.2, .8, .2, 1); }
.ui .me-chip.up .mc-bar { box-shadow: 0 0 0 2px #f3c440, 0 0 12px 3px rgba(255, 212, 90, .8); }
.ui .mc-gain { position: absolute; right: 8px; top: -6px; font: 400 14px/1 var(--font-num); color: #8ef08e; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; opacity: 0; pointer-events: none; }
.ui .mc-gain.go { animation: mc-gain 1.4s ease-out forwards; }
@keyframes mc-gain { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-20px); } }
@media (max-width: 760px) { .ui .me-chip { height: 40px; padding-right: 12px; } .ui .mc-face { width: 50px; height: 50px; margin: -8px 7px -8px -7px; } .ui .mc-lv { left: 22px; top: 22px; width: 30px; height: 30px; font-size: 13px; } .ui .mc-title { display: none; } .ui .mc-bar { width: 76px; height: 10px; } }
@media (prefers-reduced-motion: reduce) { .ui .mc-bar i { transition: none; } .ui .mc-lv.pop, .ui .mc-gain.go { animation: none; } }
html.landing .me-chip { display: none; } /* the chip shows from the first frame in the game, the title included (owner 10-23: your X picture as soon as you enter) */ /* not on the landing gate or under the title */
/* CONTINUE TUTORIAL sits under the chip (owner 10-23); the HUD's own left pills start after it */
.ui .tut-resume { top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) { .ui .tut-resume { top: calc(70px + env(safe-area-inset-top, 0px)); } }
.ui .hud-left { margin-left: 210px; }
@media (max-width: 760px) { .ui .hud-left { margin-left: 140px; } .ui .yard-dock { top: calc(72px + env(safe-area-inset-top, 0px)); } }
.ui .mc-lv { left: 28px; top: 24px; width: 40px; height: 40px; padding-top: 4px; font-size: 17px; color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 1px 0 #fff1b8; } /* the level reads at a glance: bigger star, ink number */
@media (max-width: 760px) { .ui .mc-lv { left: 24px; top: 20px; width: 36px; height: 36px; font-size: 15px; } }
@media (max-width: 700px) { body:not(.title-up) .ui .tut-skip, body.ui:not(.title-up) .tut-skip { top: calc(70px + env(safe-area-inset-top, 0px)); } } /* phones: under the player chip once it shows (the title is down) */
/* the player chip owns the top-left 64 px (owner 10-23): Little John's medallion, his line, Skip (phones) and the sheets that open under them move down by that */
.ui .companion .cp-medal { top: 84px; } .ui .tut-bubble.beside { top: 94px; }
@media (max-width: 700px) {
  .ui .companion .cp-medal { top: 116px; } .ui .tut-bubble.beside { top: 122px; }
  body.cp-step #panel.rs2.open { max-height: calc(var(--vh, 100vh) - 206px); }
  .ui .tut-progress { left: auto; right: 12px; transform: none; width: calc(100vw - 186px); } /* the rail starts after the chip */
}
/* the chip, bigger (owner 10-23: "a bit bigger… the tutorial face is much bigger"): portrait 84 on computers (Little John's medal is 96), the pill and bar to match */
@media (min-width: 761px) {
  .ui .me-chip { height: 60px; padding-right: 22px; margin-top: 10px; left: 18px; }
  .ui .mc-face { width: 84px; height: 84px; margin: -14px 12px -14px -12px; }
  .ui .mc-lv { left: 46px; top: 48px; width: 50px; height: 50px; padding-top: 5px; font-size: 21px; }
  .ui .mc-title { font-size: 19px; letter-spacing: .8px; }
  .ui .mc-body { gap: 6px; }
  .ui .mc-bar { width: 170px; height: 14px; border-radius: 8px; }
  .ui .mc-gain { font-size: 17px; top: -10px; }
  .ui .companion .cp-medal { top: 116px; } .ui .tut-bubble.beside { top: 126px; }
  .ui .tut-resume { top: calc(108px + env(safe-area-inset-top, 0px)); }
  .ui .hud-left { margin-left: 290px; }
}
@media (max-width: 760px) {
  .ui .me-chip { height: 46px; padding-right: 14px; }
  .ui .mc-face { width: 62px; height: 62px; margin: -10px 8px -10px -8px; }
  .ui .mc-lv { left: 30px; top: 28px; width: 40px; height: 40px; font-size: 17px; }
  .ui .mc-bar { width: 92px; height: 12px; }
  .ui .yard-dock { top: calc(84px + env(safe-area-inset-top, 0px)); }
  .ui .tut-progress { width: calc(100vw - 196px); }
}
@media (max-width: 700px) {
  body.ui:not(.title-up) .tut-skip { top: calc(84px + env(safe-area-inset-top, 0px)); }
  .ui .companion .cp-medal { top: 130px; } .ui .tut-bubble.beside { top: 136px; }
  .ui .tut-resume { top: calc(84px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 700px) { body.cp-step #bagpanel.open, body.cp-step #panel.open { top: 212px; max-height: calc(100vh - 222px); } body.cp-step #poster-wrap, body.cp-step .tut-verify { padding-top: 212px; } body.cp-step #panel.rs2.open { top: auto; max-height: calc(var(--vh, 100vh) - 222px); } } /* phones only: under the chip + Little John (a computer's sheets are centred; a fixed top there pushed the raid card off the screen, owner 10-23) */

/* ================================================================== XP: the collect + LEVEL UP (owner 10-23: "top-notch animation when you get xp… when leveling up") */
.ui .mc-bar i.mc-ghost { background: rgba(255, 246, 201, .55); box-shadow: none; transition: width 300ms ease-out; }
.ui .mc-bar i#mc-fill { z-index: 1; transition: width 220ms cubic-bezier(.2, .8, .2, 1); }
.ui .mc-bar i#mc-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .85) 45%, transparent 70%); transform: translateX(-120%); }
.ui .me-chip.hit .mc-bar { animation: mc-hit 260ms ease-out; } .ui .me-chip.hit .mc-bar i#mc-fill::after { animation: mc-shine 420ms ease-out; }
.ui .me-chip.hit .mc-face { animation: mc-bump 260ms ease-out; }
.ui .me-chip.done .mc-bar { animation: mc-done 700ms ease-out; }
@keyframes mc-hit { 0% { filter: brightness(1.6); transform: scaleY(1.25); } 100% { filter: none; transform: none; } }
@keyframes mc-shine { to { transform: translateX(120%); } }
@keyframes mc-bump { 40% { transform: scale(1.08); } }
@keyframes mc-done { 0% { box-shadow: 0 0 0 2px #f3c440, 0 0 18px 6px rgba(255, 212, 90, .9); } 100% { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); } }
.xp-orb { position: fixed; left: 0; top: 0; z-index: 120; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 216, 102, .9)) drop-shadow(0 2px 0 rgba(36, 22, 15, .5)); will-change: transform; }
.xp-orb svg { width: 100%; height: 100%; display: block; }
.xp-spark { position: fixed; z-index: 121; width: 6px; height: 6px; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 8px 2px #ffd866; pointer-events: none; }
.xp-pop { position: fixed; z-index: 122; transform: translate(-50%, -50%); pointer-events: none; font: 400 34px/1 'Titan One', var(--font-num, sans-serif); color: #ffd866; -webkit-text-stroke: 4px #24160f; paint-order: stroke fill; text-shadow: 0 4px 0 #24160f; animation: xp-pop 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes xp-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -90%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -120%) scale(.9); } }
.ui .mc-lv.away { visibility: hidden; }
/* the LEVEL UP moment */
.ui .lvup { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; cursor: pointer; }
.ui .lvup.on { display: grid; }
.ui .lv-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(40, 30, 80, .55), rgba(6, 4, 15, .86) 70%); animation: lv-fade 300ms ease-out; }
.ui .lv-rays { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 216, 102, .30) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: lv-spin 14s linear infinite; transition: opacity 400ms; }
.ui .lvup.flipped .lv-rays { opacity: 1; }
.ui .lv-stage { position: relative; display: grid; justify-items: center; gap: 14px; margin-top: -6vh; }
.ui .lv-star { position: relative; width: 190px; height: 190px; display: grid; place-items: center; filter: drop-shadow(0 8px 0 rgba(36, 22, 15, .55)) drop-shadow(0 0 28px rgba(255, 216, 102, .55));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5.3 11 12 1.5-8.8 8.3 2.3 11.9L20 28.9 9.2 34.7l2.3-11.9-8.8-8.3 12-1.5z' fill='%23f3c440' stroke='%2324160f' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M20 7l3.6 7.4 7.4 1' fill='none' stroke='%23fff1b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ui .lvup.flipped .lv-star { animation: lv-throb 1.6s ease-in-out 400ms infinite; }
.ui .lv-n { margin-top: 14px; font: 400 64px/1 'Titan One', var(--font-num, sans-serif); color: #24160f; text-shadow: 0 2px 0 #fff1b8; perspective: 400px; display: inline-block; }
.ui .lv-rib { opacity: 0; transform: scale(.3); padding: 10px 34px 12px; background: linear-gradient(#ff6b5a, #d4443a); color: #fff; border: 4px solid #24160f; border-radius: 12px; box-shadow: 0 6px 0 #24160f; font: 400 38px/1 'Titan One', var(--font-num, sans-serif); letter-spacing: 1px; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; }
.ui .lvup.flipped .lv-rib { animation: lv-drop 520ms cubic-bezier(.2, 1.6, .4, 1) forwards; }
.ui .lv-title { opacity: 0; display: grid; justify-items: center; gap: 2px; color: #fff3d6; text-align: center; }
.ui .lv-title small { font: 700 13px/1 var(--font-ui); letter-spacing: 2px; color: #ffd866; }
.ui .lv-title b { font: 400 30px/1.1 'Titan One', var(--font-num, sans-serif); letter-spacing: .5px; color: #fff3d6; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; text-transform: uppercase; }
.ui .lvup.flipped .lv-title { animation: lv-rise 420ms ease-out 260ms forwards; }
.ui .lv-men { opacity: 0; font: 600 15px/1.2 var(--font-ui); color: #8ef08e; } .ui .lvup.flipped .lv-men { animation: lv-rise 420ms ease-out 420ms forwards; }
.ui .lv-tap { opacity: 0; margin-top: 10px; font: 700 12px/1 var(--font-ui); letter-spacing: 2px; color: rgba(255, 243, 214, .65); } .ui .lvup.flipped .lv-tap { animation: lv-rise 400ms ease-out 1200ms forwards; }
.ui .lvup.out .lv-dim, .ui .lvup.out .lv-rays, .ui .lvup.out .lv-rib, .ui .lvup.out .lv-title, .ui .lvup.out .lv-men, .ui .lvup.out .lv-tap { transition: opacity 260ms; opacity: 0 !important; animation: none; }
.lv-confetti { position: fixed; inset: 0; z-index: 115; pointer-events: none; }
.lv-shard { z-index: 116; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@keyframes lv-fade { from { opacity: 0; } }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-throb { 50% { transform: scale(1.05); } }
@keyframes lv-drop { 0% { opacity: 0; transform: translateY(-30px) scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes lv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .ui .lv-star { width: 150px; height: 150px; } .ui .lv-n { font-size: 50px; margin-top: 10px; } .ui .lv-rib { font-size: 30px; padding: 8px 26px 10px; } .ui .lv-title b { font-size: 24px; } .ui .lv-rays { width: 640px; height: 640px; margin: -320px 0 0 -320px; } .xp-pop { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .ui .lv-rays, .ui .lvup.flipped .lv-star { animation: none; } .ui .lvup.flipped .lv-rib, .ui .lvup.flipped .lv-title, .ui .lvup.flipped .lv-men, .ui .lvup.flipped .lv-tap { animation: none; opacity: 1; transform: none; } }
.xp-orb { width: 30px; height: 30px; margin: -15px 0 0 -15px; filter: drop-shadow(0 0 9px rgba(255, 216, 102, 1)) drop-shadow(0 2px 0 rgba(36, 22, 15, .5)); }
@media (max-width: 700px) { .xp-orb { width: 24px; height: 24px; margin: -12px 0 0 -12px; } }
.xp-pop { font-size: 44px; } @media (max-width: 700px) { .xp-pop { font-size: 32px; } }
/* the feedback boxes: SEND centred (owner 10-23), the note's status over it */
.ui .yfb-foot { flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.ui .yfb-foot .yfb-send { min-width: 160px; }
.ui .yfb-msg { flex: none; text-align: center; min-height: 0; } .ui .yfb-msg:empty { display: none; }
/* TRAINING COMPLETE: the FREE MINT as on the landing (owner 10-23: "hard to see in that color, highlight the icon"): the chest is the prize, big and glowing with
   rays and a lock, FREE MINT in big gold with an ink outline under it, the count under that */
.ui .yard-panel.v4 .yard-road { height: 92px; }
.ui .yard-panel.v4 .yr-chest { width: 96px; height: 96px; right: -10px; overflow: visible; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px #f3c440, 0 0 34px 8px rgba(255, 212, 90, .75); }
.ui .yard-panel.v4 .yr-chest svg { width: 66px !important; height: 50px !important; position: relative; z-index: 1; }
.ui .yard-panel.v4 .yr-chest::before { content: ''; position: absolute; inset: -60%; border-radius: 50%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(rgba(255, 216, 102, .55) 0 9deg, transparent 9deg 26deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 36%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 36%, transparent 70%); animation: lv-spin 16s linear infinite; }
.ui .yard-panel.v4 .yr-chest::after { content: ''; position: absolute; right: 0; bottom: 2px; width: 26px; height: 26px; border-radius: 7px; z-index: 2; background: #24160f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='3' y='1' width='4' height='1' fill='%23f3c440'/%3E%3Crect x='2' y='2' width='1' height='3' fill='%23f3c440'/%3E%3Crect x='7' y='2' width='1' height='3' fill='%23f3c440'/%3E%3Crect x='1' y='5' width='8' height='4' fill='%23f3c440'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%2324160f'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ui .yard-panel.v4 .yr-bar { margin-right: 52px; height: 24px; }
@media (max-width: 480px) { .ui .yard-panel.v4 .yr-chest { width: 76px; height: 76px; } .ui .yard-panel.v4 .yr-chest svg { width: 52px !important; height: 39px !important; } .ui .yard-panel.v4 .yg-label { font-size: 24px; -webkit-text-stroke-width: 4px; } .ui .yard-panel.v4 .yard-road { height: 78px; } }
/* the label under the chest, the count under it, both centred on the chest's column */
.ui .yard-panel.v4 .yard-goal { display: grid; justify-items: center; gap: 2px; justify-self: end; margin: 4px -14px 0 0; min-width: 150px; }
.ui .yard-panel.v4 .yg-label { margin: 0; font: 400 30px/1 var(--font-num); color: #f3c440; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.ui .yard-panel.v4 .yg-n { display: inline-flex; align-items: center; gap: 4px; font: 400 22px/1 var(--font-num); color: var(--ink); } .ui .yard-panel.v4 .yg-n small { font-size: 16px; color: #6b4126; }
/* the chest and its label inside the card: chest 14 px in from the road's end, the label's 170 px column centred under it */
.ui .yard-panel.v4 .yr-chest { right: 14px; } .ui .yard-panel.v4 .yr-bar { margin-right: 70px; }
.ui .yard-panel.v4 .yard-goal { width: 170px; min-width: 0; margin: 2px -23px 0 0; } .ui .yard-panel.v4 .yg-label { font-size: 27px; }
@media (max-width: 480px) { .ui .yard-panel.v4 .yr-bar { margin-right: 60px; } .ui .yard-panel.v4 .yard-goal { width: 150px; margin-right: -23px; } }
@media (max-width: 480px) and (max-height: 760px) {
  .ui .yard-panel.v4 .yr-chest { width: 64px; height: 64px; } .ui .yard-panel.v4 .yr-chest svg { width: 44px !important; height: 33px !important; } .ui .yard-panel.v4 .yard-road { height: 66px; }
  .ui .yard-panel.v4 .yard-goal { margin-right: -29px; margin-top: 0; } .ui .yard-panel.v4 .yg-label { font-size: 21px; } .ui .yard-panel.v4 .yg-n { font-size: 18px; }
  .ui .yfb textarea { min-height: 44px; } .ui .yard-panel.v4 .yfb-send { min-height: 38px; } .ui .yard-panel.v4 .yard-join { min-height: 46px; }
}
@media (max-width: 480px) and (max-height: 760px) { .ui .yard-panel.v4 { gap: 8px; } .ui .yr-tile { min-height: 46px; padding: 5px; } .ui .yr-tile b { font-size: 20px; } .ui .yard-panel.v4 .yard-back { margin-top: -2px; } }
/* hover / focus (computers): the title gives way to the exact XP; an idle shine crosses the bar every 7 s */
.ui .mc-nums { display: none; font: 400 15px/1 var(--font-num); letter-spacing: .4px; color: #ffd866; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; white-space: nowrap; }
@media (hover: hover) and (min-width: 761px) { .ui .me-chip:hover .mc-title, .ui .me-chip:focus-visible .mc-title { display: none; } .ui .me-chip:hover .mc-nums, .ui .me-chip:focus-visible .mc-nums { display: block; font-size: 19px; } }
.ui .me-chip:not(.hit) .mc-bar i#mc-fill::after { animation: mc-shine 900ms ease-in-out 3s infinite; animation-duration: 7s; }
@keyframes mc-idle { 0%, 88% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ui .me-chip:not(.hit) .mc-bar i#mc-fill::after { animation: mc-idle 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ui .me-chip .mc-bar i#mc-fill::after { animation: none !important; } }
.ui .me-chip.collecting { z-index: 126; } /* above a result card while its XP flies in (owner 10-23: XP as soon as it is earned) */
.ui .lvup { z-index: 127; }

/* ================================================================== the profile v2 (owner 10-23: "the weakest part of our game"; mac-c7)
   The living WANTED poster is the hero; it looks more wanted by tier: t0 plain paper, two nails · t1 nailed at four corners, a torn corner, a tilt ·
   t2 DEAD OR ALIVE · t3 aged paper, a gold rule, the wax seal · t4 two older posters behind it and a MOST WANTED stamp · t5 the Prince's gold decree, a crown.
   Under it: the road to the next level, four records, the last raids as faces, the band. Hood & sound behind the gear. */
.ui .dossier.pf2::before { display: none; }
.ui .side.pf2 > .sheet-head { position: sticky; top: 0; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; z-index: 8; } /* the gear and the x float on the poster's corners: no empty band above it */
.ui .pf2 > .sheet-head .pf-gear { position: absolute; left: -12px; top: -6px; } .ui .pf2 > .sheet-head .close { position: absolute; right: -12px; top: -6px; }
.ui .pf-gear { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch-lo); color: var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.ui .pf-gear .ico { width: 24px; height: 24px; } .ui .pf-gear[aria-expanded="true"] { background: var(--gold); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ui .pf-gear:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ui .wp { position: relative; margin: 10px auto 16px; width: min(300px, 92%); }
.ui .pf2 #pf-poster { margin-top: 54px; } /* owner 10-24: the gear and the x sit in the corners above the poster, never on it (the tilted tiers lift a corner ~6px) */
.ui .wp-back { position: absolute; inset: 0; border: 3px solid var(--ink); background: #d9c99a; border-radius: 4px; display: none; }
.ui .wp-back.b1 { transform: rotate(-5deg) translate(-14px, 4px); } .ui .wp-back.b2 { transform: rotate(4deg) translate(14px, 2px); background: #cdb985; }
.ui .wp-paper { position: relative; padding: 16px 18px 16px; text-align: center; border: 4px solid var(--ink); border-radius: 4px; box-shadow: 0 6px 0 var(--ink), 0 14px 24px rgba(0,0,0,.25);
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(107, 63, 34, .18) 100%), linear-gradient(160deg, #fbf1d8, #ead8ae); }
.ui .wp-nail { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9b08a, #5a3a22 60%); box-shadow: 0 1px 0 var(--ink); }
.ui .wp-nail.n1 { left: 8px; top: 8px; } .ui .wp-nail.n2 { right: 8px; top: 8px; } .ui .wp-nail.n3 { left: 8px; bottom: 8px; display: none; } .ui .wp-nail.n4 { right: 8px; bottom: 8px; display: none; }
.ui .wp-h { font: 400 44px/1 var(--font-btn); letter-spacing: 3px; color: var(--ink); margin-top: 2px; }
.ui .wp-doa { display: none; margin: 6px auto 0; width: max-content; padding: 3px 12px 2px; background: #c0392b; color: #fff3d6; font: 400 14px/1.1 var(--font-btn); letter-spacing: 2px; border: 2px solid var(--ink); }
.ui .wp-pic { position: relative; width: 150px; height: 150px; margin: 12px auto 0; border: 4px solid var(--ink); border-radius: 4px; background: #d9c99a; overflow: hidden; }
.ui .wp-pic img, .ui .wp-pic canvas { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } .ui .wp-pic img.av { image-rendering: auto; }
.ui .wp-name { margin-top: 10px; font: 400 24px/1.05 var(--font-btn); color: var(--ink); overflow-wrap: anywhere; }
.ui .wp-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.ui .wp-title b { font: 400 20px/1 var(--font-btn); letter-spacing: 1px; text-transform: uppercase; color: #8e2a1f; }
.ui .wp-lv { position: relative; width: 36px; height: 36px; display: grid; place-items: center; font: 400 16px/1 var(--font-num); color: var(--ink); background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 2px 0 var(--ink)); padding-top: 3px; }
.ui .wp-raids { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 2px dashed rgba(27, 20, 16, .3); }
.ui .wp-raids b { font: 400 34px/1 var(--font-num); color: #2f7a34; } .ui .wp-raids span { font: 400 15px/1 var(--font-btn); letter-spacing: 1.5px; color: var(--wood); }
.ui .wp-seal, .ui .wp-stamp, .ui .wp-crown { display: none; position: absolute; pointer-events: none; }
.ui .wp-seal { right: -12px; bottom: 38px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e0584a, #9e2a22 62%, #7a1c14); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ui .wp-seal::after { content: 'R'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px/1 var(--font-btn); color: #6a1810; }
.ui .wp-stamp { left: 6px; top: 54%; transform: rotate(-12deg); padding: 4px 10px 3px; border: 3px solid rgba(192, 57, 43, .85); color: rgba(192, 57, 43, .9); font: 400 18px/1 var(--font-btn); letter-spacing: 1.5px; background: rgba(251, 241, 216, .55); }
.ui .wp-crown { left: 50%; top: -30px; width: 64px; height: 34px; transform: translateX(-50%); background: var(--gold); clip-path: polygon(0 100%, 0 20%, 25% 55%, 50% 0, 75% 55%, 100% 20%, 100% 100%); filter: drop-shadow(0 3px 0 var(--ink)); }
.ui .wp .crown-badge { right: -10px; left: auto; top: -10px; }
/* the tiers */
.ui .wp.t1 .wp-paper, .ui .wp.t2 .wp-paper, .ui .wp.t3 .wp-paper, .ui .wp.t4 .wp-paper { transform: rotate(-1.2deg); }
.ui .wp:not(.t0) .wp-nail.n3, .ui .wp:not(.t0) .wp-nail.n4 { display: block; }
.ui .wp.t1 .wp-paper { clip-path: polygon(0 0, 100% 0, 100% 88%, 93% 100%, 0 100%); }
.ui .wp.t2 .wp-doa, .ui .wp.t3 .wp-doa, .ui .wp.t4 .wp-doa, .ui .wp.t5 .wp-doa { display: block; }
.ui .wp.t3 .wp-paper, .ui .wp.t4 .wp-paper { background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(107, 63, 34, .3) 100%), linear-gradient(160deg, #f3e3bb, #d8bd84); outline: 3px solid #b8861d; outline-offset: -11px; }
.ui .wp.t3 .wp-seal, .ui .wp.t4 .wp-seal, .ui .wp.t5 .wp-seal { display: block; }
.ui .wp.t4 .wp-back { display: block; } .ui .wp.t4 .wp-stamp { display: block; }
.ui .wp.t5 .wp-paper { transform: none; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(160deg, #fff1b8, #e7c463); outline: 4px double #c98a1e; outline-offset: -12px; box-shadow: 0 6px 0 var(--ink), 0 0 40px rgba(243, 196, 64, .55); }
.ui .wp.t5 .wp-crown { display: block; } .ui .wp.t5 { margin-top: 28px; }
/* the road, the records, the faces, the band */
.ui .pf-road { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 2px; }
.ui .pr-star { width: 34px; height: 34px; display: grid; place-items: center; padding-top: 3px; font: 400 15px/1 var(--font-num); color: var(--ink); background: var(--gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ui .pr-star.nx { background: #c9b88c; color: var(--wood-lo); }
.ui .pr-bar { position: relative; height: 22px; border: 3px solid var(--ink); border-radius: 12px; background: #2a2140; overflow: hidden; }
.ui .pr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); border-radius: 9px; min-width: 6px; }
.ui .pr-bar em { position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px/1 var(--font-num); font-style: normal; color: #fff3d6; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: .5px; }
.ui .pr-flag { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 400 14px/1 var(--font-btn); color: var(--wood); text-transform: uppercase; letter-spacing: 1px; }
.ui .pr-flag .ico { width: 16px; height: 16px; } .ui .pr-flag small { font: inherit; padding: 2px 6px 1px; border-radius: 8px; background: var(--ink); color: var(--gold); }
.ui .pf-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ui .pr-rec { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border: 3px solid var(--ink); border-radius: 10px; background: #fbf3dc; box-shadow: 0 3px 0 var(--ink); text-align: center; min-width: 0; }
.ui .pr-rec b { font: 400 19px/1 var(--font-num); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ui .pr-rec.gold b { color: #2f7a34; } .ui .pr-rec.green b { color: var(--blue-lo); }
.ui .pr-rec span { font: 400 11px/1.05 var(--font-btn); letter-spacing: .6px; text-transform: uppercase; color: var(--wood); }
.ui .pr-rec.none { background: transparent; box-shadow: none; border-style: dashed; border-color: rgba(27, 20, 16, .35); } .ui .pr-rec.none b { color: rgba(27, 20, 16, .35); }
.ui .pf-sec { margin-top: 14px; } .ui .pf-lab { font: 400 13px/1 var(--font-btn); letter-spacing: 2px; text-transform: uppercase; color: var(--wood); margin-bottom: 8px; }
.ui .pf-last { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ui .pl-face { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 0; border: 3px solid var(--ink); background: #d9c99a; cursor: pointer; box-shadow: 0 0 0 3px #c9b88c; }
.ui .pl-face .pl-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .ui .pl-face .pl-pic img, .ui .pl-face .pl-pic canvas { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; } .ui .pl-face .pl-pic img { image-rendering: auto; }
.ui .pl-face i { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font: 400 11px/1 var(--font-btn); font-style: normal; color: #fff; }
.ui .pl-face i .ico { width: 12px; height: 12px; }
.ui .pl-face.won { box-shadow: 0 0 0 3px var(--green-lo); } .ui .pl-face.won i { background: var(--green-lo); }
.ui .pl-face.lost { box-shadow: 0 0 0 3px #b8ad94; filter: grayscale(.6); } .ui .pl-face.lost i { background: #8f846c; }
.ui .pl-face.held { box-shadow: 0 0 0 3px var(--blue-lo); } .ui .pl-face.held i { background: var(--blue-lo); }
.ui .pl-face.hit { box-shadow: 0 0 0 3px var(--red); } .ui .pl-face.hit i { background: var(--red); }
.ui .pl-face.empty { cursor: default; background: transparent; border: 3px dashed rgba(27, 20, 16, .3); box-shadow: none; }
.ui .pl-face:hover:not(.empty) { transform: translateY(-2px); } .ui .pl-face:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ui .pf-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ui .pb-man { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px; border-radius: 10px; background: rgba(107, 63, 34, .08); }
.ui .pb-man canvas { width: 48px; height: 56px; image-rendering: pixelated; }
.ui .pb-man b { font: 400 13px/1 var(--font-btn); color: var(--ink); } .ui .pb-man.on { background: #fbf3dc; border: 2px solid var(--ink); }
.ui .pb-man i { display: inline-flex; align-items: center; gap: 3px; font: 400 13px/1 var(--font-num); font-style: normal; color: var(--wood); } .ui .pb-man i .ico { width: 12px; height: 12px; }
.ui .pf-set { margin-top: 14px; padding: 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fbf3dc; } .ui .pf-set[hidden] { display: none; }
.ui .pf2 .pf-actions { display: grid; grid-template-columns: 1fr 1fr; } .ui .pf2 .pf-actions #pf-connect { grid-column: 1 / -1; } .ui .pf2 .pf-actions [hidden] { display: none; }
.ui #pf-sharedlg { z-index: 140; }
.ui .lv-share { opacity: 0; margin-top: 14px; padding: 10px 26px 8px; font: 400 20px/1 var(--font-btn); letter-spacing: 1px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); cursor: pointer; pointer-events: auto; }
.ui .lvup.flipped .lv-share { animation: lv-rise 400ms ease-out 1000ms forwards; } .ui .lvup.out .lv-share { opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) { .ui .lvup.flipped .lv-share { animation: none; opacity: 1; } }
@media (max-width: 700px) {
  .ui .wp { width: min(270px, 84%); } .ui .wp-h { font-size: 38px; } .ui .wp-pic { width: 128px; height: 128px; } .ui .wp-name { font-size: 21px; }
  .ui .pf-recs { gap: 6px; } .ui .pr-rec { padding: 9px 2px 8px; } .ui .pr-rec b { font-size: 16px; } .ui .pr-rec span { font-size: 10px; }
}
/* the Yard's label (owner 10-23: clear that it is practice with no real money, without getting in the way): top centre under the stars rail; on phones top right, clear of the chip */
.ui .yard-tag { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 60; pointer-events: none; padding: 5px 12px 6px; border-radius: 999px; background: rgba(27, 21, 38, 0.82); border: 2px solid var(--gold); color: var(--parch); font: 12px var(--font-num); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; line-height: 1; box-shadow: 0 2px 0 var(--ink); }
html[data-tutorial="1"] .ui .yard-tag { top: 52px; }
body.ui.cinematic .yard-tag, body.ui:has(.overlay.open) .yard-tag, body.ui.result-open .yard-tag { opacity: 0; }
@media (max-width: 700px) { .ui .yard-tag { left: auto; right: 10px; transform: none; top: 14px; font-size: 10px; padding: 4px 9px 5px; } html[data-tutorial="1"] .ui .yard-tag { top: 46px; } }
html.landing .ui .target-strip { display: none; } /* the loading screen shows the street and TAP TO PLAY only (owner 10-24) */
/* the house sheet's amount field (owner 10-24, mac-ab): in the fixed foot, left of ADD, one row above a phone's keyboard */
.ui #bagpanel.amt-foot .rs-foot { gap: 10px; padding-left: 12px; padding-right: 12px; } .ui #bagpanel.amt-foot .rs-foot .send-wrap { flex: 1 1 0; min-width: 0; } .ui #bagpanel.amt-foot #dep-go { width: 100%; }
.ui #bagpanel .hs-amt { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; height: 72px; padding: 0 12px; background: #fffaf0; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); cursor: text; }
.ui #bagpanel .hs-amt:focus-within { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px rgba(243, 196, 64, 0.8); }
.ui #bagpanel .hs-amt .cur { font: 400 26px var(--font-num); color: #6b4126; }
.ui #bagpanel .hs-amt input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; background: none; padding: 0; font: 400 30px var(--font-num); color: var(--ink); }
.ui #bagpanel .hs-amt .unit { font: 700 12px var(--font-ui); letter-spacing: 1.5px; color: #6b4126; }
@media (max-width: 360px) { .ui #bagpanel .hs-amt .unit { display: none; } }
.ui #bagpanel .hs .chips .chip { flex: 1 1 auto; } .ui #bagpanel .hs .chip.max { background: #dfe9ff; }
/* phones: the player chip and the Yard's label step aside while a sheet is open (they sat on the sheet's ribbon and x) */
@media (max-width: 700px) { body.ui:has(.side.open) #me-chip, body.ui:has(.side.open) .yard-tag { opacity: 0; pointer-events: none; } }
/* phones, the tutorial (owner 10-24: "little john bubble texts at the top left basically overlap with everything"): one slim strip under the chip and the
   stars rail, his small face + his line on one row; Skip moves to the right under the rail; every sheet and card starts under the strip (166 px, was 212) */
@media (max-width: 700px) {
  .ui .companion .cp-medal { top: calc(104px + env(safe-area-inset-top, 0px)); left: 10px; width: 46px; height: 46px; border-width: 3px; }
  .ui .companion .cp-medal canvas { width: 34px; height: 34px; } .ui .companion .cp-medal .spr { transform: translate(-50%, -50%) scale(0.48); }
  .ui .tut-bubble.beside { top: calc(104px + env(safe-area-inset-top, 0px)); left: 64px; right: 10px; max-width: none; min-height: 46px; padding: 6px 12px 7px; font-size: 15px; line-height: 1.2; display: flex; align-items: center; box-shadow: 0 3px 0 var(--ink); }
  .ui .tut-bubble.beside .who { display: none; }
  body.ui:not(.title-up) .tut-skip, .ui .tut-skip { top: calc(70px + env(safe-area-inset-top, 0px)); left: auto; right: 10px; bottom: auto; }
  body.cp-step #bagpanel.open, body.cp-step #panel.open { top: 166px; max-height: calc(100vh - 176px); }
  body.cp-step #poster-wrap, body.cp-step .tut-verify { padding-top: 166px; }
  body.cp-step #panel.rs2.open { top: auto; max-height: calc(var(--vh, 100vh) - 176px); }
  body.cp-step #result-wrap { padding-top: 166px; }
}
/* a closed sheet is not there (owner 10-24, iPhone Safari: the closed raid sheet's TUTORIAL ribbon and x peeked under the floating toolbar): hidden once its slide-out ends, back the moment it opens */
.ui .side:not(.open) { visibility: hidden; transition-property: transform, visibility; transition-delay: 0s, 450ms; }
.ui .side.open { visibility: visible; transition-property: transform, visibility; transition-delay: 0s, 0s; }
/* the first moment after TAP TO PLAY (owner 10-24: 'for a millisecond it flashes some stuff'): the bars and the rich-houses strip wait until the tutorial has the screen; a returning player's chrome fades in after it */
html.entering .ui .hud-top, html.entering .ui .hud-bottom, html.entering .ui .target-strip { opacity: 0 !important; pointer-events: none; }
/* CLEANED OUT / BUSY (owner 10-24): one block in place of the bet and TO WIN; ROB ANOTHER in green */
.ui #panel[data-out] #bet-tile, .ui #panel[data-out] #o-bar { display: none; }
.ui #panel .r2-out { display: grid; justify-items: center; gap: 4px; padding: 14px 16px 16px; background: linear-gradient(#3a2a1e, #2a1d14); color: var(--parch); text-align: center; }
.ui #panel .r2-out[hidden] { display: none; }
.ui #panel .r2-out .ro-head { display: flex; align-items: center; gap: 8px; }
.ui #panel .r2-out .ro-ico { width: 28px; height: 28px; image-rendering: pixelated; }
.ui #panel .r2-out .ro-k { font: 400 26px var(--font-num); letter-spacing: 1.5px; text-transform: uppercase; color: #ffd27a; text-shadow: 0 2px 0 var(--ink); }
.ui #panel .r2-out .ro-lbl { font: 700 12px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: #d9c79f; }
.ui #panel .r2-out .ro-time { font: 400 calc(48px * var(--u, 1)) var(--font-num); line-height: 1; color: #fff4d8; text-shadow: 0 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
.ui #panel .r2-out .ro-bar { width: 100%; height: 12px; margin-top: 6px; border: 3px solid var(--ink); border-radius: 8px; background: #1a120c; overflow: hidden; }
.ui #panel .r2-out .ro-bar i { display: block; height: 100%; background: linear-gradient(#ffd27a, #e0a83c); transition: width 900ms linear; }
.ui #panel .r2-out.busy { background: linear-gradient(#4a4a55, #34343d); } .ui #panel .r2-out.busy .ro-k { color: #e6e6ee; } .ui #panel .r2-out.busy .ro-bar i { background: linear-gradient(#cfd3dd, #9ca1ad); }
.ui #panel .r2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ui #panel .r2-tags:not(:has(> :not([hidden]))) { display: none; }
.ui #panel .r2-left { font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #1d2a12; background: #ffd27a; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
.ui #panel .r2-left[hidden] { display: none; }
.ui #bagpanel .hs .safe { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 2px solid var(--ink); border-radius: 8px; background: #8ef08e; color: var(--ink); letter-spacing: 1px; }
.ui #panel #send.another #send-t { font-size: calc(30px * var(--u, 1)); letter-spacing: 1px; } /* ROB ANOTHER fits the RAID button with a margin */
.ui #panel .r2-xp { font: 700 12px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: #f3c440; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
.ui #panel .r2-xp.cut { background: #f6dfa0; } .ui #panel .r2-xp.none { background: #cfc8b8; color: #4a4030; } .ui #panel .r2-xp[hidden] { display: none; }
/* HOW TO ROB: the repeat-target XP rule as labels (owner 10-24: 'explain why they get 0 xp, encourage new targets') */
.ui .ht .ht-xp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.ui .ht .ht-xp span { flex-basis: 100%; } /* the label, then the three XP steps together on their own line */
.ui .ht .ht-xp i { font-style: normal; font: 700 11px var(--font-ui); letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 7px; background: #f6dfa0; color: var(--ink); }
.ui .ht .ht-xp i.z { background: #cfc8b8; }
@media (max-width: 480px) { .ui .yard-panel.v4 .yard-goal { margin-right: -6px; } .ui .yard-panel.v4 .yg-label { font-size: 22px; letter-spacing: .5px; } } /* FREE MINT stays inside the card on phones (mac-86 10-24: the T was cut at 390) */
/* TRAINING COMPLETE: the quest path (owner 10-24, as the landing's): PLAY — EARN TICKETS — FREE MINT */
.ui .yard-path { position: relative; list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ui .yard-path::before { content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 25px; border-top: 3px dashed #c9a86a; }
.ui .yard-path li { position: relative; display: grid; justify-items: center; gap: 5px; }
.ui .yard-path .pb { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fffaf0, #f1dfb4 72%); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ui .yard-path .pb .ico { width: 26px; height: 26px; }
.ui .yard-path b { font: 400 12px/1 var(--font-num); letter-spacing: .5px; color: var(--ink); white-space: nowrap; }
.ui .yard-path .pq-goal .pb { background: radial-gradient(circle at 50% 38%, #fff6c8, #f3c440 75%); box-shadow: 0 3px 0 var(--ink), 0 0 14px 4px rgba(255,213,74,.5); }
.ui .yard-path .pq-goal b { color: #a0700f; }
@media (max-height: 760px) { .ui .yard-path { display: none; } } /* short screens: the card must fit without a scroll; the road + FREE MINT above already carry the goal */
/* the Yard (owner 10-25: 'fix all the issues'): no 'Take gold out' on a practice house, nothing real can leave it; Bribe and Guards stay (owner) */
html.yard #hs .leave, html.yard #hs .lv-row { display: none !important; }

/* ================================================================== THE TOWN (owner 10-25; mac-86's rules): RAIDS · WANTED · POT, labels only, smooth */
.ui .town, .ui #town.panel { padding: 0; display: flex; flex-direction: column; overflow: hidden; width: 440px; height: calc(100vh - 196px); max-height: 720px; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.ui #town.panel:not(.open) { transition-duration: 180ms; }
.ui .town .tw-grab { display: none; }
.ui .town .tw-head { display: flex; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(#5a3a22, #47301c); border-bottom: 3px solid var(--ink); touch-action: none; }
.ui .town .tw-tabs { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(0,0,0,.3); border: 3px solid var(--ink); border-radius: 14px; padding: 3px; }
.ui .town .tw-tab { position: relative; z-index: 1; height: 38px; border: 0; background: none; color: #f1e3bf; cursor: pointer; font: 400 15px var(--font-num); letter-spacing: 1px; transition: color 200ms; }
.ui .town .tw-tab.on { color: var(--ink); }
.ui .town .tw-ink { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 10px; background: linear-gradient(#ffe07a, #f3c440); box-shadow: inset 0 -3px 0 #c8962a; transform: translateX(calc(var(--tw-i, 0) * 100%)); transition: transform 200ms cubic-bezier(.3,1.25,.5,1); }
.ui .town .tw-x { position: static; flex: none; }
.ui .town .tw-body { position: relative; flex: 1; overflow-y: auto; padding: 12px; overscroll-behavior: contain; transition: opacity 140ms; scrollbar-width: thin; }
.ui .town .tw-body.out { opacity: 0; }
.ui .town .tw-body.anim li, .ui .town .tw-body.anim .tw-pod, .ui .town .tw-body.anim .tw-pot > * { animation: tw-in 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes tw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ui .town .tw-btn { display: inline-grid; justify-items: center; align-content: center; min-width: 78px; height: 40px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 3px 0 var(--ink); cursor: pointer; font: 400 15px/1 var(--font-num); letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform 90ms; }
.ui .town .tw-btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 0 var(--ink); }
.ui .town .tw-btn.green { background: #4cc85a; } .ui .town .tw-btn.gold { background: linear-gradient(#ffd75a, #f0a92a); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ui .town .tw-btn i { font: 400 10px var(--font-num); font-style: normal; letter-spacing: .5px; margin-top: 2px; }
.ui .town .tw-btn.big { width: 100%; height: 56px; font-size: 22px; }
.ui .town .tw-tag { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 10px; background: #e6dcc3; color: #6b5636; font: 400 14px var(--font-num); }
.ui .town .tw-tag .ico { width: 14px; height: 14px; }
.ui .town .tw-pk { position: relative; width: 24px; height: 24px; flex: none; } .ui .town .tw-pk .ico { width: 24px; height: 24px; color: #6b5636; } .ui .town .tw-pk .spr { position: absolute; left: 5px; top: 9px; transform: scale(.34); transform-origin: 0 0; } /* a boarded-up house (mac-86: the planks alone read as ✕): icon_planks 42px at 3x → 14 px over the house's door */
.ui .town .tw-r.landed { animation: tw-land 600ms ease-out; } @keyframes tw-land { 0% { box-shadow: 0 0 0 6px #ffe07a, 0 3px 0 var(--ink); background: #fff3c4; } 100% { box-shadow: 0 3px 0 var(--ink); } } .ui .town .tw-tag.road { background: #ffe9a8; color: var(--ink); }
/* RAIDS */
.ui .town .tw-cap { text-align: center; font: 400 12px var(--font-stamp); font-synthesis: none; letter-spacing: 2px; color: #8a6a3e; margin: 0 0 30px; } /* WANTED's amounts are the week's loot, not a bounty (owner 10-26) */
.ui .town .tw-feed, .ui .town .tw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui .town .tw-r { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px 8px 14px; background: #fff8e6; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; overflow: hidden; }
.ui .town .tw-r::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #d8c49a; }
.ui .town .tw-r.loss::before { background: #e0473a; } .ui .town .tw-r.gain::before { background: #3fb24f; } .ui .town .tw-r.road::before { background: #f3c440; }
.ui .town .tw-r.me { background: #fff0ea; }
.ui .town .tw-r:hover { background: #fffdf4; } .ui .town .tw-r.me:hover { background: #fff5f1; }
.ui .town .tw-faces { display: flex; align-items: center; }
.ui .town .tw-f { position: relative; } .ui .town .tw-f .mini-ring { width: 40px; height: 40px; }
.ui .town .tw-arrow { width: 0; height: 0; margin: 0 4px; border: 8px solid transparent; border-left: 12px solid var(--ink); border-right: 0; }
.ui .town .tw-stamp { position: absolute; right: -6px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); }
.ui .town .tw-stamp .ico { width: 13px; height: 13px; } .ui .town .tw-stamp.r { background: #e0473a; color: #fff; } .ui .town .tw-stamp.g { background: #3fb24f; color: #fff; }
.ui .town .tw-who { min-width: 0; font: 600 13px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .town .tw-who i { font-style: normal; color: #a08860; margin: 0 4px; } .ui .town .tw-who b { font-weight: 800; }
.ui .town .tw-amt { display: grid; justify-items: end; } .ui .town .tw-amt b { font: 400 17px var(--font-num); color: var(--ink); white-space: nowrap; }
.ui .town .tw-amt.loss b { color: #c0392b; } .ui .town .tw-amt.gain b { color: #2f8a3a; } .ui .town .tw-amt small { font: 600 11px var(--font-ui); color: #8a6a3e; white-space: nowrap; }
.ui .town .tw-act:empty { display: none; }
.ui .town .tw-empty { display: grid; justify-items: center; gap: 14px; padding: 48px 12px; color: #8a6a3e; font: 400 16px var(--font-num); letter-spacing: 1px; } .ui .town .tw-empty > .ico { width: 44px; height: 44px; opacity: .5; }
/* WANTED */
.ui .town .tw-bar { display: flex; justify-content: center; margin-bottom: 18px; }
.ui .town .tw-clock { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #fff8e6; border: 3px solid var(--ink); border-radius: 999px; font: 400 16px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.ui .town .tw-clock .ico { width: 16px; height: 16px; } .ui .town .tw-clock.hot { background: #ffe07a; animation: tw-pulse 1s ease-in-out infinite; }
@keyframes tw-pulse { 50% { transform: scale(1.05); } }
.ui .town .tw-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 10px 0 14px; }
.ui .town .tw-pod { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 4px 14px; background: #fff3d4; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; text-align: center; min-width: 0; }
.ui .town .tw-pod.p1 { padding-top: 22px; padding-bottom: 26px; background: linear-gradient(#fff8d6, #ffe07a); }
.ui .town .tw-pod.empty { opacity: .45; cursor: default; }
.ui .town .tw-pf .mini-ring.big { width: 48px; height: 48px; } .ui .town .tw-pod.p1 .tw-pf .mini-ring.big { width: 56px; height: 56px; }
.ui .town .tw-pod.p1 .mini-ring { box-shadow: 0 0 0 3px #f3c440; } .ui .town .tw-pod.p2 .mini-ring { box-shadow: 0 0 0 3px #c9ccd6; } .ui .town .tw-pod.p3 .mini-ring { box-shadow: 0 0 0 3px #d08a4a; }
.ui .town .tw-pod b { font: 600 12px var(--font-ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .town .tw-pm { font: 400 15px var(--font-num); color: var(--ink); white-space: nowrap; } .ui .town .tw-pod.p1 .tw-pm { font-size: 18px; }
.ui .town .tw-crown { position: absolute; top: -18px; color: #f3c440; } .ui .town .tw-crown .ico { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 var(--ink)); }
.ui .town .tw-step { position: absolute; bottom: 6px; font: 400 18px var(--font-num); font-style: normal; color: #8a6a3e; } .ui .town .tw-pod.p1 .tw-step { font-size: 24px; color: var(--ink); }
.ui .town .tw-l, .ui .town .tw-me { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; background: #fff8e6; border: 2px solid #d8c49a; border-radius: 12px; cursor: pointer; }
.ui .town .tw-l .mini-ring, .ui .town .tw-me .mini-ring { width: 36px; height: 36px; }
.ui .town .tw-l:hover { background: #fffdf4; }
.ui .town .tw-n { font: 400 16px var(--font-num); color: #8a6a3e; text-align: center; }
.ui .town .tw-lm { font: 400 15px var(--font-num); color: var(--ink); white-space: nowrap; } .ui .town .tw-lm.dim { color: #a08860; }
.ui .town .tw-l { grid-template-columns: 28px 36px minmax(0, 1fr) auto; }
.ui .town .tw-me { position: sticky; bottom: -12px; margin: 14px -4px -4px; background: linear-gradient(#fff8d6, #ffe9a0); border: 3px solid var(--ink); box-shadow: 0 -8px 16px rgba(80,50,20,.14), 0 3px 0 var(--ink); cursor: default; }
.ui .town .tw-me .tw-n { color: var(--ink); }
.ui .town .tw-l.tw-mine { grid-template-columns: 28px 36px minmax(0, 1fr) auto auto; background: linear-gradient(#fff8d6, #ffe9a0); border: 3px solid var(--ink); cursor: default; } .ui .town .tw-l.tw-mine .tw-n { color: var(--ink); }
.ui .town .tw-pod.mine { outline: 3px solid #f3c440; outline-offset: 2px; }
.ui .town .tw-gap { display: inline-flex; align-items: center; gap: 4px; font: 400 13px var(--font-num); padding: 2px 8px 2px 4px; border-radius: 999px; background: #fff3c4; border: 2px solid #c8962a; color: #7a5a14; white-space: nowrap; } .ui .town .tw-gap .mini-ring { width: 22px !important; height: 22px !important; } .ui .town .tw-gap.top { background: none; color: #f3c440; } .ui .town .tw-gap .ico { width: 18px; height: 18px; }
/* POT */
.ui .town .tw-pot { display: grid; justify-items: center; gap: 12px; padding: 22px 6px 6px; text-align: center; }
.ui .town .tw-chest { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff8d6, #f3c440 72%); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ui .town .tw-chest > .ico { position: relative; width: 50px; height: 50px; }
.ui .town .tw-rays { position: absolute; inset: -34px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,213,74,.38) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); animation: tw-spin 18s linear infinite; z-index: -1; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
.ui .town .tw-total { display: grid; justify-items: center; gap: 4px; font: 400 44px/1 var(--font-num); color: #2f8a3a; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #fff; } .ui .town .tw-total span + span { font-size: 24px; color: #4a9a52; }
.ui .town .tw-share { width: 100%; display: grid; gap: 2px; padding: 12px; background: #e9f9e4; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); } .ui .town .tw-share small { font: 400 12px var(--font-num); letter-spacing: 2px; color: #2f8a3a; } .ui .town .tw-share b { font: 400 28px var(--font-num); color: #2f8a3a; }
.ui .town .tw-pot .tw-btn.big { margin-top: 6px; }
/* RAID = a small outlined pill: the amounts are the bright things; only REVENGE is a big filled button (mac-86 #2) */
.ui .town .tw-btn.ghost { min-width: 64px; height: 34px; background: #fff; color: #2f8a3a; text-shadow: none; border-color: #3fb24f; box-shadow: 0 2px 0 #2f8a3a; font-size: 14px; }
.ui .town .tw-btn.ghost:hover { background: #e9f9e4; }
.ui .town .tw-btn.gold { min-width: 96px; height: 46px; }
/* POT: the hero centred in the sheet (mac-86 #9) */
.ui .town .tw-body:has(.tw-pot) { display: flex; flex-direction: column; justify-content: center; } .ui .town .tw-pot { padding-bottom: 40px; }
.ui .town .tw-head { position: relative; z-index: 2; } .ui .town .tw-body { padding-top: 18px; }
.ui .town .tw-new { position: absolute; z-index: 3; left: 50%; bottom: -14px; transform: translateX(-50%); height: 26px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 999px; background: #ffe07a; font: 400 14px var(--font-num); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); animation: tw-in 220ms var(--ease-out) both; }
@media (max-width: 700px) {
  body.ui:has(#town.open) #hood-chip { opacity: 0; pointer-events: none; }
  .ui .town, .ui #town.panel { width: 100%; height: 84vh; max-height: 84vh; padding-bottom: env(safe-area-inset-bottom); transform: translate(-50%, calc(110% + var(--tw-dy, 0px))); }
  .ui #town.panel.open { transform: translate(-50%, var(--tw-dy, 0px)); } .ui #town.panel.drag { transition: none; }
  .ui #town.panel.open.peek { transform: translate(-50%, calc(84vh - 30vh)); }
  .ui .town .tw-grab { display: block; position: absolute; top: 5px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255,255,255,.45); z-index: 2; }
  .ui .town .tw-head { padding-top: 16px; }
  .ui .town .tw-r { min-height: 64px; gap: 8px; padding-right: 8px; }
  .ui .town .tw-r { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto; row-gap: 1px; } .ui .town .tw-r .tw-faces { grid-row: 1 / span 2; } .ui .town .tw-r .tw-who { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; line-height: 1.15; } .ui .town .tw-r .tw-amt { grid-column: 2; grid-row: 2; align-self: start; display: flex; align-items: baseline; gap: 6px; justify-items: start; } .ui .town .tw-r .tw-act { grid-column: 3 / -1; grid-row: 1 / span 2; } /* phones: the name over the amount, never on it (owner's robtest screenshot 10-26) */
  .ui .town .tw-btn { min-width: 70px; height: 38px; font-size: 14px; } .ui .town .tw-btn.big { height: 54px; font-size: 20px; }
  .ui .town .tw-f .mini-ring { width: 36px; height: 36px; }
  .ui .town .tw-total { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ui .town, .ui .town .tw-ink, .ui .town .tw-body { transition: opacity 140ms; } .ui .town .tw-rays, .ui .town .tw-clock.hot { animation: none; } }

/* +1 🎟 after a raid that earns a ticket, and the FREE MINT moment in the game (owner 10-25 via mac-c3) */
.tkt-fly { position: fixed; z-index: 120; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 999px; background: linear-gradient(#ffe07a, #f3c440); font: 400 22px var(--font-num); color: var(--ink); box-shadow: 0 3px 0 var(--ink); pointer-events: none; animation: tkt-in 380ms cubic-bezier(.2, 1.6, .4, 1) both; }
.tkt-fly.fade { transition: opacity 600ms; opacity: 0; }
@keyframes tkt-in { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.fmm-g { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(43, 26, 80, .82), rgba(10, 6, 24, .94)); opacity: 0; transition: opacity 240ms; overflow: hidden; }
.fmm-g.on { opacity: 1; }
.fmm-g-rays { position: absolute; left: 50%; top: 40%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: repeating-conic-gradient(rgba(255, 213, 74, .22) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 58%); mask: radial-gradient(circle, #000 18%, transparent 58%); animation: tw-spin 22s linear infinite; }
.fmm-g-box { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 16px; }
.fmm-g-coin { display: block; filter: drop-shadow(0 0 30px rgba(255, 213, 74, .85)); animation: fmm-g-pop 700ms cubic-bezier(.2, 1.5, .4, 1) both; } @keyframes fmm-g-pop { 0% { transform: scale(.2) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }
.fmm-g h2 { margin: 0; font: 400 clamp(44px, 9vw, 76px)/1 var(--font-num); color: #ffd45a; text-shadow: 0 5px 0 var(--ink); letter-spacing: 2px; }
.fmm-g b { font: 400 24px var(--font-num); color: #8ef08e; text-shadow: 0 3px 0 var(--ink); }
.fmm-g .btn { min-width: 260px; }
@media (prefers-reduced-motion: reduce) { .fmm-g-rays { animation: none; } }

/* economy v2 (owner 10-25): Prince John's Castle */
.ui .town .tw-castle { padding-top: 6px; gap: 14px; }
.ui .town .tw-castle .tw-keep { position: relative; width: 100%; aspect-ratio: 203 / 172; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px rgba(255, 255, 255, .35); background: #86c6f0; }
.ui .town .tw-castle .tw-keepcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ui .town .tw-castle .tw-sign { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; gap: 10px; align-items: baseline; padding: 6px 16px 7px; border: 3px solid var(--ink); border-radius: 10px;
  background: linear-gradient(#a8703e, #7a4a24); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .45), 0 3px 0 var(--ink); font: 400 30px/1 var(--font-num); color: #ffe07a; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.ui .town .tw-castle .tw-sign span + span { font-size: 18px; color: #fff1b8; }
@media (max-width: 700px) { .ui .town .tw-castle .tw-sign { font-size: 24px; padding: 5px 12px; } }
.ui .town .tw-guards { display: flex; align-items: center; gap: 6px; } .ui .town .tw-guard .ico { width: 28px; height: 28px; } .ui .town .tw-guard.gone { opacity: .25; filter: grayscale(1); }
.ui .town .tw-guards b { margin-left: 6px; font: 400 18px var(--font-num); color: var(--ink); }
.ui .town .tw-btn.wait { background: #e6dcc3; color: #6b5636; text-shadow: none; box-shadow: 0 3px 0 var(--ink); cursor: default; }
#p-face #p-castle { display: none; } #p-face.castle #p-castle { display: block; position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; } #p-face.castle #p-stranger, #p-face.castle .av { visibility: hidden; }
.ui .town .tw-cw { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 2px solid #c0392b; border-radius: 999px; background: #ffe9e4; font: 400 15px var(--font-num); color: #8e2620; }
.ui .town .tw-cw .tw-clock { border: 0; background: none; height: auto; padding: 0; color: #8e2620; }
.ui .town .tw-disc { margin: 4px 0 0; font: 600 12px var(--font-ui); color: #8a6a3e; text-align: center; }
.ui .town .tw-cw.k0.easier { border-color: #3fb24f; background: #e9f9e4; color: #2f8a3a; } .ui .town .tw-cw.k0.easier .tw-clock { color: #2f8a3a; }
.ui .br-chest { image-rendering: pixelated; display: block; } .ui .br-stop:not(.got) .br-chest { opacity: .45; filter: grayscale(1); }
.ui .mini-ring canvas.av.pj { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(#9fd0f4, #d9eefc); image-rendering: pixelated; } /* Prince John's castle as his face, on a little sky (owner 10-26) */