/* Snowball Battle HUD — DESIGN.md §8. Tokens mirror UI.colors in src/sprites.js. */
:root {
  --page: #10142a;
  --panel: #1a1c2c;
  --panel-a: rgba(26, 28, 44, 0.88);
  --border: #5d6f9e;
  --hi: #8fa7cf;
  --shadow: #0b0d18;
  --text: #f4f8ff;
  --dim: #8fa7cf;
  --up: #a6e85c;
  --down: #ff5d6c;
  --green: #a6e85c;
  --red: #d63a4f;
  --red-d: #8a1f3c;
  --gold: #ffe27a;
  --demo: #f5b83d;
  --whale: #7fb8ff;
  --snow: #e4eef8;
  --display: 'Press Start 2P', monospace;
  --body: 'Tiny5', 'Press Start 2P', monospace;
  /* Readable text in the profile / achievements / forecasts / tutorial. To go back to pixel
     text, change this ONE line to:  --font-read: var(--body);  */
  --font-read: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  --octagon: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--page);
  color: var(--text);
  font: 16px/1 var(--body);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.app {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.in-telegram .app { height: var(--tg-viewport-height, 100dvh); }

/* ---------- stage (canvas + overlays) ---------- */
.stage {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--snow);
}
.field {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.px-icon { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel-a);
  border: 2px solid var(--panel);
  outline: 2px solid var(--border);
  outline-offset: -4px;
  box-shadow: 0 2px 0 var(--shadow);
  padding: 6px 8px;
  clip-path: var(--octagon);
}
.ttl { font: 8px/1 var(--display); color: var(--dim); margin-bottom: 6px; }

.hud-top {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  pointer-events: none;
}
.hud-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.slot-score { flex: 1; min-width: 0; display: flex; justify-content: center; }
.slot-score:empty { display: none; }
.slot-score .score { padding: 6px; gap: 4px; }
.slot-score .score-ic { width: 14px; height: 8px; } /* 1× heads on the phone overlay */
/* The price must never shrink; on narrow phones the score drops its head icons
   (digits are already team-coloured) so the top row fits next to the HUD buttons. */
.hud-row .ticker { flex: none; }
@media (max-width: 400px) { .slot-score .score-ic { display: none; } }
.slot-top { display: flex; gap: 6px; align-items: stretch; }
.slot-top:empty { display: none; }
.slot-top .pressure { flex: 1; min-width: 0; }
.hud-bottom {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  pointer-events: none;
}
.hud-bottom .feed { flex: 1; min-width: 0; position: relative; pointer-events: auto; cursor: pointer; }
.hud-bottom .feed { padding-right: 24px; } /* room for the +N / - expand indicator */
.hud-bottom .feed .ttl { position: absolute; top: 50%; right: 7px; margin: -4px 0 0; }
.hud-bottom .feed .ttl > span:first-child { display: none; }
.hud-bottom .feed-list { min-height: 44px; } /* collapsed = 2 rows, even when empty */
.feed-more { color: var(--gold); }
button, .toggles { pointer-events: auto; }

/* ---------- price ---------- */
.price { font: 16px/1 var(--display); color: var(--text); white-space: nowrap; }
.side .price { font-size: 24px; }
.price.up, .price.flash-up { color: var(--up); }
.price.down, .price.flash-down { color: var(--down); }
.price.flash-up, .price.flash-down { text-shadow: 0 0 0 currentColor, 0 2px 0 var(--shadow); }
.chg { font: 8px/1 var(--display); margin-top: 6px; white-space: nowrap; }
.chg:empty { display: none; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

/* ---------- source / DEMO badge ---------- */
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 8px/1 var(--display);
  color: var(--dim);
  background: var(--panel-a);
  border: 2px solid var(--panel);
  box-shadow: 0 2px 0 var(--shadow);
  padding: 4px 5px 3px;
  white-space: nowrap;
}
.src-badge { cursor: pointer; pointer-events: auto; min-height: 24px; }
.src-badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.src-badge .caret { /* pixel ▾ */
  width: 0; height: 0; margin-left: 2px;
  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor;
}
.src-badge .dot { width: 6px; height: 6px; background: var(--up); animation: blink 1s steps(2) infinite; }
.src-badge[data-state="connecting"] .dot { background: var(--dim); animation: none; }
.src-badge[data-state="demo"] { color: var(--panel); background: var(--demo); }
.src-badge[data-state="demo"] .dot { display: none; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- buttons ---------- */
.toggles { display: flex; gap: 6px; }
.btn {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  font: 16px/1 var(--body);
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: inset 0 2px 0 rgba(143, 167, 207, 0.25), 0 2px 0 var(--shadow);
  cursor: pointer;
}
.btn:active, .btn[aria-pressed="true"] { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(143, 167, 207, 0.25); }
.btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.btn-icon { display: grid; place-items: center; padding: 4px; }
.btn-icon .waves { display: none; }
.btn-icon[aria-pressed="true"] .waves { display: inline; }
.btn-icon[aria-pressed="true"] .mute { display: none; }

/* ---------- pressure bar ---------- */
.pbar-labels { display: flex; justify-content: space-between; gap: 8px; font: 8px/1 var(--display); margin-bottom: 5px; white-space: nowrap; }
.pbar-labels .g { color: var(--green); }
.pbar-labels .r { color: var(--down); }
.pbar {
  position: relative;
  height: 10px;
  margin: 0 2px 4px;
  background: var(--red);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 2px var(--border);
}
.pbar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--green);
  transition: width 0.4s steps(8);
}
.pbar::after { /* 1 px dark separators every 6 px (segmented look) */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(26, 28, 44, 0.35) 5px 6px);
}
.pbar .mid { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text); z-index: 1; }

/* ---------- score ---------- */
.score { display: flex; align-items: center; gap: 6px; font: 16px/1 var(--display); white-space: nowrap; }
.score .g { color: var(--green); }
.score .r { color: var(--red); }
.score .sep { color: var(--dim); }

/* ---------- walls ---------- */
.wall-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; height: 20px; }
.amt { font: 8px/1 var(--display); white-space: nowrap; }
.amt.buy { color: var(--up); }
.amt.sell { color: var(--down); }
.amt.gold { color: var(--gold); }
.amt.whale { color: var(--whale); }
.amt.dim { color: var(--dim); }

/* ---------- feed ---------- */
.feed-list { list-style: none; margin: 0; padding: 0; }
.frow {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  border-top: 2px solid rgba(93, 111, 158, 0.35);
}
.frow:first-child { border-top: 0; }
.frow.empty { color: var(--dim); }
.frow .ic { flex: none; width: 26px; display: flex; justify-content: center; }
.frow .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow.enter { animation: slide-in 0.16s steps(2) both; }
@keyframes slide-in { from { transform: translateX(-12px); } to { transform: none; } }

/* ---------- victory banner ---------- */
/* Shown/hidden via [hidden]; the pop (scale .2 → .6 → 1) is stepped by timers in hud.js so
   the resting state is always full size even if animations are throttled. */
.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  pointer-events: none;
  z-index: 5;
}
.banner[hidden] { display: none; }
.band {
  text-align: center;
  padding: 12px 4px 10px;
  border-top: 4px solid var(--panel);
  border-bottom: 4px solid var(--panel);
  box-shadow: 0 4px 0 rgba(11, 13, 24, 0.5);
}
.banner-title { font: 16px/1.3 var(--display); white-space: nowrap; }
.banner-sub { font: 8px/1 var(--display); margin-top: 6px; opacity: 0.85; }
.banner.green .band { background: var(--green); color: var(--panel); }
.banner.red .band { background: var(--red); color: var(--text); text-shadow: 0 2px 0 var(--red-d); }

/* ---------- loading ---------- */
.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 20, 42, 0.35);
}
.loading[hidden] { display: none; }
.loading-panel { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.loading-panel .px-icon { animation: bob 0.5s steps(2) infinite alternate; }
.loading-text { font: 8px/1 var(--display); }
.loading-text::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes bob { to { transform: translateY(-4px); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ---------- wide layout: side panel ---------- */
.side { display: none; }
[data-layout="wide"] .side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: none;
  padding: 4px 4px 8px;
}
@media (max-width: 819px) { [data-layout="wide"] .side { width: 270px; } } /* landscape phones */
[data-layout="wide"] .hud-bottom, [data-layout="wide"] .hud-top { display: none; }
.side .panel { flex: none; }
.side-head { display: flex; gap: 8px; align-items: stretch; }
.side-head .ticker { flex: 1; min-width: 0; }
.side-head .hud-right { justify-content: space-between; }
.side .score { justify-content: center; font-size: 16px; }
.side .frow { height: 26px; }
.side .feed .ttl { display: flex; justify-content: space-between; }

.title-panel { text-align: left; }
.game-title { margin: 0; font: 16px/1.2 var(--display); color: var(--text); letter-spacing: 0; }
.game-sub { margin-top: 6px; color: var(--dim); }

.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend-list li { display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.legend-list .ic { flex: none; width: 34px; display: flex; justify-content: center; }
.rope-ico { /* tiny rope + posts, drawn with boxes */
  display: block;
  width: 28px;
  height: 8px;
  background:
    linear-gradient(#573522, #573522) 0 0 / 2px 8px no-repeat,
    linear-gradient(#573522, #573522) 100% 0 / 2px 8px no-repeat,
    linear-gradient(#dcb784, #dcb784) 0 3px / 100% 2px no-repeat;
}

/* ---------- data-source menu (popover on wide, bottom sheet on phone) ---------- */
.menu { position: fixed; inset: 0; z-index: 50; }
.menu[hidden] { display: none; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(11, 13, 24, 0.55); }
.menu-sheet {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px 12px;
  background: var(--panel);
}
.menu.sheet .menu-sheet { /* phone: bottom sheet */
  left: 50%;
  bottom: 0;
  width: min(520px, 100vw);
  max-width: none;
  transform: translateX(-50%);
  padding-bottom: calc(14px + var(--safe-bottom));
}
.menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.menu-title { margin: 0; font: 8px/1.4 var(--display); color: var(--text); }
.menu-sub { margin: 12px 0 6px; font: 8px/1 var(--display); color: var(--dim); }
.source-list { display: flex; flex-direction: column; gap: 4px; }
.src-row {
  display: grid;
  grid-template-columns: 14px 8px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  border: 2px solid var(--border);
  background: rgba(93, 111, 158, 0.12);
  cursor: pointer;
}
.src-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.src-row[aria-checked="true"] { border-color: var(--gold); background: rgba(255, 226, 122, 0.1); }
.src-row[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.src-row .radio { width: 12px; height: 12px; border: 2px solid var(--dim); background: var(--panel); }
.src-row[aria-checked="true"] .radio { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--panel); background: var(--gold); }
.src-row .vdot { width: 8px; height: 8px; background: var(--up); }          /* live: filled square */
.src-row.down .vdot { background: transparent; border: 2px solid var(--down); } /* down: hollow square */
.src-row .src-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-row .src-meta { font: 8px/1 var(--display); color: var(--dim); white-space: nowrap; }
.src-row.down .src-meta { color: var(--down); }
.menu-settings { display: flex; gap: 6px; }
.setting {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  font: 16px/1 var(--body);
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 0 2px 0 var(--shadow);
  cursor: pointer;
}
.setting .state { font: 8px/1 var(--display); color: var(--gold); }
.setting[aria-checked="false"] .state { color: var(--dim); }
.venues .src-row { min-height: 30px; }

/* ---------- profile / achievements (v1.05, DESIGN.md §10) ---------- */
:root {
  --r-common: #8fa7cf;
  --r-rare: #7fb8ff;
  --r-epic: #f07c34;
  --r-legendary: #f5b83d;
  --r-legendary-shine: #ffe27a;
  --locked-ring: #3b4468;
}
.btn-profile { position: relative; padding: 2px; }
.btn-profile .px-icon { width: 28px; height: auto; }
.lvl-badge {
  position: absolute; right: -2px; bottom: -3px;
  min-width: 12px; padding: 1px 2px 0;
  font: 8px/1 var(--display); color: var(--panel); background: var(--gold);
}
.tri { display: inline-block; width: 0; height: 0; margin-right: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.tri.up { border-bottom: 5px solid currentColor; }
.tri.down { border-top: 5px solid currentColor; }
.gbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 2px 8px;
  font: 16px/1 var(--body); color: var(--panel);
  border: 2px solid var(--panel); box-shadow: 0 2px 0 var(--shadow); cursor: pointer; white-space: nowrap;
}
.gbtn.g { background: var(--green); }
.gbtn.r { background: var(--red); color: var(--text); }
.gbtn.later { background: var(--panel); color: var(--dim); border-color: var(--border); }
.gbtn:disabled { opacity: 0.4; cursor: default; }
.gbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

/* guess bar: phone = one compact row (≤ 28 px) above the feed; wide = side-panel section */
.guess { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.g-row1, .g-row2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.g-row2[hidden] { display: none; }
.guess[hidden] { display: none; }
.guess-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guess-part { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.guess-part[hidden] { display: none; }
.mode-btn {
  flex: none; min-height: 20px; padding: 0 6px; font: 8px/1 var(--display); color: var(--gold);
  background: var(--panel); border: 2px solid var(--gold); cursor: pointer;
}
.mode-btn[hidden] { display: none; }
/* phone round mode: the ROUND tab + ▲/▼ buttons say it all; the question lives in title/aria */
.hud-bottom .guess[data-gmode="open"] #guess-round .guess-label { display: none; }
.hud-bottom #guess-round .guess-actions { margin-left: auto; }
.guess { position: relative; }
.guess-actions { display: flex; gap: 6px; flex: none; }
.guess-actions[hidden] { display: none; }
.guess[data-mode="locked"] .guess-label, .guess[data-mode="demo"] .guess-label, .guess[data-mode="wait"] .guess-label { color: var(--dim); }
.guess[data-side="g"] .guess-label { color: var(--green); }
.guess[data-side="r"] .guess-label { color: var(--down); }
.guess-note { display: none; }
.hud-bottom { flex-direction: column; align-items: stretch; }
.hud-bottom .guess { padding: 3px 6px; }
/* tap targets ≥ 36 px in the phone bar (round buttons, horizon chips, candle buttons) */
.hud-bottom .guess .gbtn { min-height: 36px; padding: 0 8px; font-size: 16px; }
.hud-bottom .mode-btn { min-height: 36px; }
.bar-chips { display: flex; flex: 1; gap: 3px; min-width: 0; }
.bar-chips[hidden] { display: none; }
.bar-chips .chip { flex: 1; min-width: 0; min-height: 36px; padding: 0 2px; }
.fc-status { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; font-size: 12px; line-height: 1.25; }
.fc-status .l1 { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-status .l2 { color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forecast-panel .fc-status { margin-bottom: 6px; }
.menu-version { margin-top: 10px; font-size: 12px; color: var(--dim); text-align: right; font-family: var(--font-read); }
.side .guess { flex-wrap: wrap; }
.side .guess .guess-label { flex-basis: 100%; }
.side .guess .guess-note { display: block; flex-basis: 100%; color: var(--dim); }
.side .guess-part { flex-wrap: wrap; }
.side .guess .guess-part > .guess-label { flex-basis: 100%; }

/* time forecasts */
.chip {
  min-height: 24px; padding: 0 6px; font: 8px/1 var(--display); color: var(--text);
  background: var(--panel); border: 2px solid var(--border); cursor: pointer; white-space: nowrap;
}
.chip.on { border-color: var(--gold); color: var(--gold); }
.chip.busy { color: var(--dim); }
.chip .caret, .chip.pick .caret { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; }
.forecast-panel .fc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fc-wide-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.fc-wide-actions .gbtn { flex: 1; }
.fc-hint { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.fc-list { display: flex; flex-direction: column; gap: 3px; }
.fc-row {
  display: grid; grid-template-columns: 34px 72px 1fr auto 14px; align-items: center; gap: 6px;
  padding: 3px 6px; border: 2px solid rgba(93, 111, 158, 0.35); font-size: 13px;
}
.fc-row.win { border-color: rgba(166, 232, 92, 0.6); background: rgba(166, 232, 92, 0.08); }
.fc-row.lose { border-color: rgba(255, 93, 108, 0.6); background: rgba(255, 93, 108, 0.08); }
.fc-h { font: 8px/1 var(--display); color: var(--gold); }
.fc-dir { display: inline-flex; align-items: center; font-weight: 600; font-size: 12px; }
.fc-dir.u { color: var(--green); }
.fc-dir.d { color: var(--down); }
.fc-entry, .fc-time { font-weight: 600; }
.fc-time { color: var(--dim); }
.fc-mark { text-align: center; font-weight: 700; }
.fc-row.win .fc-mark { color: var(--up); }
.fc-row.lose .fc-mark { color: var(--down); }
.fc-empty { font-size: 12px; color: var(--dim); }
.fc-stats { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.fc-stats th { font: 8px/1 var(--display); color: var(--dim); padding: 3px 2px; text-align: center; }
.fc-stats tbody th { text-align: left; font: 12px/1 var(--font-read); }
.fc-stats td { text-align: center; padding: 3px 2px; color: var(--text); }

/* side-of-the-day prompt + unlock toast: pinned under the top HUD, centred */
.side-prompt, .ach-toast {
  position: absolute; left: 50%; top: calc(var(--top-space, 60px) + 6px); transform: translateX(-50%);
  z-index: 6; max-width: calc(100% - 16px);
}
[data-layout="wide"] .side-prompt, [data-layout="wide"] .ach-toast { top: 12px; }
.side-prompt[hidden], .ach-toast[hidden] { display: none; }
.side-prompt { text-align: center; pointer-events: auto; width: max-content; }
.side-prompt-title { font: 8px/1.4 var(--display); margin-bottom: 8px; }
.side-prompt-actions { display: flex; gap: 6px; justify-content: center; }
.ach-toast { display: flex; align-items: center; gap: 10px; outline-color: var(--gold); pointer-events: none; }
.ach-toast .px-icon { width: auto; }
.ach-toast-kicker { font: 8px/1.2 var(--display); color: var(--gold); }
.ach-toast-name { margin-top: 4px; white-space: nowrap; font-size: 14px; font-weight: 600; }
.ach-toast-xp { font: 8px/1 var(--display); color: var(--up); white-space: nowrap; }

/* profile sheet: bottom sheet on phone (≤ 75% height), centred modal on wide */
.profile-menu .profile-sheet { overflow-y: auto; max-height: 75vh; }
.profile-menu:not(.sheet) .profile-sheet {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-height: 85vh;
}
.profile-body { display: flex; flex-direction: column; gap: 6px; }
.prof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.read, .profile-body, .profile-panel, .fc-list, .tut-body, .ach-toast-name, .side-prompt-sub {
  font-family: var(--font-read);
  -webkit-font-smoothing: antialiased;   /* smoothing only inside readable-text areas */
  -moz-osx-font-smoothing: grayscale;
}
.num { font-variant-numeric: tabular-nums; }
.profile-body, .profile-panel { font-size: 12px; font-weight: 400; }
.prof-name { font: 600 14px/1.2 var(--font-read); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-note { font-size: 12px; line-height: 1.3; color: var(--dim); }
.prof-level { font: 8px/1 var(--display); color: var(--gold); }
.xpbar { height: 8px; border: 2px solid var(--shadow); background: #3b4468; }
.xpbar i { display: block; height: 100%; background: var(--gold); }
.prof-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--dim); }
.xp-txt { font: 600 12px/1 var(--font-read); color: var(--dim); }
.streak { display: inline-flex; align-items: center; gap: 4px; }
.side-row b { font-weight: normal; }
.side-g { color: var(--green); }
.side-r { color: var(--down); }
.side-none { color: var(--dim); }
.side-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.side-pick-label { flex-basis: 100%; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.stat { padding: 4px; border: 2px solid rgba(93, 111, 158, 0.35); }
.stat-v { font: 700 16px/1.2 var(--font-read); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-k { font-size: 12px; color: var(--dim); line-height: 1.2; margin-top: 2px; }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ach {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 76px; padding: 8px 2px 4px; background: rgba(26, 28, 44, 0.6);
  box-shadow: inset 0 0 0 2px var(--locked-ring); border: 0; color: var(--text); cursor: pointer; font: 16px/1 var(--body);
}
.ach.r-common { box-shadow: inset 0 0 0 2px var(--r-common); }
.ach.r-rare { box-shadow: inset 0 0 0 2px var(--r-rare); }
.ach.r-epic { box-shadow: inset 0 0 0 2px var(--r-epic); }
.ach.r-legendary { animation: legend-shine 1.2s steps(2) infinite; }
@keyframes legend-shine { 0% { box-shadow: inset 0 0 0 2px var(--r-legendary); } 100% { box-shadow: inset 0 0 0 2px var(--r-legendary-shine); } }
.ach.sel { outline: 2px solid var(--gold); outline-offset: -1px; }
.ach .px-icon { max-height: 40px; width: auto; }
.ach-name { font: 600 13px/1.15 var(--font-read); -webkit-font-smoothing: antialiased; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; hyphens: auto; }
.ach.locked .ach-name { color: var(--dim); }
.ach-badge { position: absolute; top: 3px; left: 3px; padding: 1px 2px 0; font: 8px/1 var(--display); color: var(--panel); }
.ach-badge.r-common { background: var(--r-common); }
.ach-badge.r-rare { background: var(--r-rare); }
.ach-badge.r-epic { background: var(--r-epic); }
.ach-badge.r-legendary { background: var(--r-legendary); }
.ach.locked .ach-badge { background: var(--locked-ring); color: var(--dim); }
.ach-prog { width: 56px; max-width: 90%; height: 6px; border: 2px solid var(--shadow); background: #3b4468; box-sizing: content-box; }
.ach-prog i { display: block; height: 100%; background: var(--r-common); }
.ach-detail { padding: 6px; border: 2px solid var(--gold); line-height: 1.35; font-size: 12px; }
.ach-detail b { font-weight: 600; font-size: 14px; color: var(--text); }
.ach-detail .dim, .prof-foot { color: var(--dim); }
.prof-foot { line-height: 1.35; margin-top: 4px; font-size: 12px; }
.profile-panel .recent { display: flex; gap: 6px; min-height: 20px; align-items: center; }
.profile-panel .recent .px-icon { max-height: 28px; width: auto; }
.profile-panel .all-ach { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ach.r-legendary { animation: none; box-shadow: inset 0 0 0 2px var(--r-legendary); } }

.side-prompt-sub { font-size: 12px; color: var(--dim); margin: -4px 0 8px; }
.setting-help { flex: 0 0 44px; justify-content: center; font: 16px/1 var(--display); color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* first-launch tutorial */
.tutorial .tut-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 24px)); padding: 16px 14px 12px; }
.tut-card { text-align: center; min-height: 180px; }
.tut-card[hidden] { display: none; }
.tut-icons { display: flex; justify-content: center; align-items: flex-end; gap: 10px; min-height: 44px; margin-bottom: 12px; }
.tut-icons .px-icon { max-height: 40px; width: auto; }
.tut-title { margin: 0 0 10px; font: 16px/1.3 var(--display); color: var(--gold); }
.tut-body { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.tut-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.tut-next { border-color: var(--gold); color: var(--gold); font-family: var(--display); font-size: 8px; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 8px; height: 8px; background: var(--border); }
.tut-dots i.on { background: var(--gold); }

/* ---------- v1.07: my kid + wardrobe (DESIGN.md §11) ---------- */
.my-tag {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  font: 16px/1 var(--body); color: #1a1c2c; background: rgba(244, 248, 255, 0.85);
  padding: 2px; white-space: nowrap; will-change: transform;
}
.my-tag[hidden] { display: none; }
.btn-profile.has-new::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  background: var(--gold); border: 2px solid var(--panel);
}
.kid-card { display: flex; flex-direction: column; gap: 8px; }
.prof-top { display: flex; gap: 12px; align-items: flex-start; }
.prof-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.avatar-box {
  position: relative; flex: none; padding: 4px;
  background: var(--snow) linear-gradient(#bfd2ea, #bfd2ea) bottom / 100% 26px no-repeat;
  border: 4px solid var(--panel); outline: 2px solid var(--border); outline-offset: -2px;
}
.avatar-box.framed {
  border-color: var(--frame-a); outline: 0;
  box-shadow: inset 0 2px 0 0 var(--frame-c), inset 0 0 0 2px var(--frame-b);
}
.avatar-box canvas.avatar { display: block; width: 168px; height: 180px; image-rendering: crisp-edges; image-rendering: pixelated; }
.lvl-tag {
  position: absolute; top: -8px; left: -8px; padding: 4px; font: 8px/1 var(--display);
  color: var(--panel); background: var(--gold); border: 2px solid var(--panel);
}
.side-line { font-size: 12px; color: var(--dim); }
.side-line b { font-weight: 600; }
.side-hint { font-size: 12px; color: var(--gold); line-height: 1.3; }
.side-hint[hidden], .side-pick[hidden] { display: none; }
.try-seg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.try-label { font-size: 12px; color: var(--dim); }
.seg-btn {
  min-height: 28px; padding: 2px 8px; font: 600 12px/1 var(--font-read); color: var(--text);
  background: var(--panel); border: 2px solid var(--border); cursor: pointer;
}
.seg-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.wardrobe { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wr-slot-name { font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 3px; }
/* Collapsible wardrobe sections (<details>): compact summary row, one open at a time. */
details.wr-slot { border-bottom: 2px solid var(--border); }
details.wr-slot > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 6px 2px; color: var(--text); -webkit-tap-highlight-color: transparent;
}
details.wr-slot > summary::-webkit-details-marker { display: none; }
details.wr-slot > summary .wr-sum-name { font-size: 14px; font-weight: 600; }
details.wr-slot > summary .wr-sum-value { flex: 1; min-width: 0; font-size: 12px; font-weight: 400; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.wr-slot > summary .wr-sum-count { font-size: 12px; font-weight: 400; color: var(--dim); font-variant-numeric: tabular-nums; }
details.wr-slot > summary .caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--dim); transition: transform .12s steps(2); }
details.wr-slot[open] > summary .caret { transform: rotate(180deg); }
details.wr-slot[open] > .wr-items { padding-bottom: 10px; }
.wr-items { display: flex; flex-wrap: wrap; gap: 4px; }
.wr-item {
  width: 92px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 2px 4px;
  background: rgba(26, 28, 44, 0.6); border: 2px solid var(--border); color: var(--text); cursor: pointer;
  font: 400 12px/1.15 var(--font-read); -webkit-font-smoothing: antialiased;
}
.wr-item.on { border-color: var(--gold); }
.wr-item.locked { border-color: #3b4468; cursor: not-allowed; }
.wr-item.locked .wr-name { color: var(--dim); }
.wr-thumb { display: grid; place-items: center; width: 84px; height: 90px; background: var(--snow); }
.wr-thumb .px-icon { width: 84px; height: 90px; }
.wr-name { text-align: center; max-width: 100%; overflow-wrap: break-word; }
.wr-req { font: 8px/1.3 var(--display); color: #8fa7cf; background: #3b4468; padding: 2px 3px; text-align: center; max-width: 100%; overflow-wrap: break-word; hyphens: none; }
.wr-req[hidden] { display: none; }
.wr-slot .wr-item:has(.wr-swatch) .wr-thumb { height: 32px; }
.wr-swatch.trail { width: 2px; height: 2px; background: var(--c1); box-shadow: 6px -4px 0 var(--c2), 12px 2px 0 var(--c3), -6px 3px 0 var(--c2), -12px -3px 0 var(--c3); }
.wr-swatch.frame { width: 26px; height: 26px; border: 4px solid var(--c1); box-shadow: inset 0 2px 0 0 var(--c3), inset 0 0 0 2px var(--c2); background: var(--snow); }
.wr-swatch.empty { background: none; border-color: transparent; box-shadow: none; }
.wr-swatch.empty::after { content: '—'; color: var(--dim); }
.wr-status { font-size: 12px; color: var(--dim); min-height: 1.2em; }
.wr-shop { padding: 6px 8px; font-size: 12px; color: var(--dim); border: 2px dashed #3b4468; opacity: 0.7; cursor: default; }

/* ---------- v1.08: cosmetics v2 — premium try-on + looks row (DESIGN.md §12) ---------- */
.wr-item.previewing { border-color: var(--whale); }
.wr-item.premium .wr-req { color: var(--gold); background: #3b4468; }
.wr-looks .wr-items { gap: 6px; }

/* ---------- debug (?debug=1) ---------- */
.debug {
  position: absolute;
  left: 4px;
  top: 45%;
  margin: 0;
  padding: 4px;
  font: 10px/1.3 ui-monospace, monospace;
  color: var(--text);
  background: rgba(16, 20, 42, 0.75);
  white-space: pre;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .src-badge .dot, .loading-panel .px-icon, .frow.enter { animation: none; }
  .pbar .fill { transition: none; }
}

/* ---------- PvP duels (v1.08, gamification/PVP-SPEC.md) ---------- */
.btn-pvp { position: relative; padding: 4px; }
.btn-pvp .px-icon { width: 20px; height: auto; }
.pvp-energy-badge {
  position: absolute; right: -2px; bottom: -3px; min-width: 12px; padding: 1px 2px 0;
  font: 8px/1 var(--display); color: var(--panel); background: var(--up);
}
.pvp {
  position: fixed; inset: 0; z-index: 70; background: var(--page); color: var(--text);
  display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left); padding-right: var(--safe-right);
}
.pvp[hidden] { display: none; }
.pvp-bar {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--panel); border-bottom: 2px solid var(--border); box-shadow: 0 2px 0 var(--shadow);
}
.pvp-bar-title { font: 8px/1.4 var(--display); color: var(--text); }
.pvp-bar-spacer { flex: 1; }
.pvp-screen { display: none; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.pvp-screen.on { display: flex; }
.pvp-sec { padding: 10px 12px 0; }
.pvp-panel { background: var(--panel-a); border: 2px solid var(--panel); outline: 2px solid var(--border); outline-offset: -4px; box-shadow: 0 2px 0 var(--shadow); padding: 8px 10px; }
.pvp-row { display: flex; align-items: center; gap: 8px; }
.pvp-grow { flex: 1; min-width: 0; }
.pvp-space { justify-content: space-between; }
.pvp-dim { color: var(--dim); font: 8px/1.5 var(--body); }
.pvp-d8 { font: 8px/1.6 var(--display); }
.pvp-gold { color: var(--gold); }
.pvp-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-progress { height: 10px; margin: 5px 0 8px; border: 2px solid var(--panel); background: var(--border); position: relative; outline: 2px solid var(--border); }
.pvp-progress > i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--hi); }
.pvp-league { display: flex; gap: 10px; align-items: center; }
.pvp-league .px-icon { width: 32px; height: auto; }
.pvp-pips { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.pvp-pips i { width: 16px; height: 16px; display: block; border: 2px solid var(--panel); background: var(--border); }
.pvp-pips i.on { background: var(--up); }
.pvp-opp { display: flex; gap: 10px; align-items: center; }
.pvp-opp canvas { width: 28px; height: 40px; background: var(--snow); border: 2px solid var(--panel); image-rendering: pixelated; }
.pvp-badge-bot { font: 8px/1 var(--display); background: var(--demo); color: var(--panel); padding: 2px 4px; border: 2px solid var(--panel); }
.pvp-menu { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; margin-top: auto; }
.pvp-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--panel); box-shadow: 0 3px 0 var(--shadow); background: var(--border); color: var(--text); font: 16px/1 var(--body); padding: 9px 10px; outline: 2px solid var(--border); outline-offset: -4px; }
.pvp-btn:active { transform: translateY(2px); box-shadow: none; outline-color: var(--gold); }
.pvp-btn.primary { background: var(--green); color: var(--panel); outline-color: #4fa446; }
.pvp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* fight */
#pvp-fight { background: var(--snow); }
.pvp-fhud { flex: none; background: var(--panel); border-bottom: 2px solid var(--panel); box-shadow: inset 0 -2px 0 var(--border); padding: 5px 8px; display: flex; flex-direction: column; gap: 4px; }
.pvp-fhud .pvp-row { gap: 6px; }
.pvp-fhud .px-icon { width: 16px; height: auto; }
.pvp-hp { flex: 1; height: 12px; border: 2px solid var(--panel); background: var(--border); position: relative; }
.pvp-hp i { position: absolute; inset: 0 auto 0 0; display: block; transition: width .15s steps(3); }
.pvp-hp.r i { background: var(--red); box-shadow: inset 0 -3px 0 var(--red-d); }
.pvp-hp.g i { background: var(--green); box-shadow: inset 0 -3px 0 #4fa446; }
.pvp-hp b { position: absolute; right: 3px; top: -1px; font: 8px/1 var(--display); color: var(--text); text-shadow: 1px 1px 0 var(--panel); }
.pvp-timer { font: 16px/1 var(--display); min-width: 40px; text-align: center; }
.pvp-wind { font: 8px/1.4 var(--display); text-align: center; color: var(--dim); }
.pvp-wind b { color: var(--up); } .pvp-wind b.neg { color: var(--down); }
.pvp-arena { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#pvp-arena { position: absolute; left: 0; top: 0; width: 100%; image-rendering: pixelated; }
.pvp-hint { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); background: var(--panel-a); border: 2px solid var(--panel); padding: 4px 8px; white-space: nowrap; z-index: 3; pointer-events: none; font: 8px/1.4 var(--display); }
.pvp-hint[hidden] { display: none; }
.pvp-giantbtn {
  position: absolute; right: 8px; bottom: 8px; z-index: 4; display: none; flex-direction: column; align-items: center; gap: 2px;
  background: var(--demo); color: var(--panel); border: 2px solid var(--panel); outline: 2px solid var(--gold); outline-offset: -4px;
  padding: 4px 6px; box-shadow: 0 3px 0 var(--shadow); font: 8px/1.3 var(--display); animation: pvp-pulse .6s steps(2) infinite;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pvp-giantbtn .px-icon { width: 32px; height: auto; }
.pvp-giantbtn.show { display: flex; }
@keyframes pvp-pulse { 50% { outline-color: #fff; } }
.pvp-over { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: rgba(16, 20, 42, .55); z-index: 5; }
.pvp-over.show { display: flex; }
.pvp-band { width: 100%; text-align: center; padding: 12px; border-top: 4px solid var(--panel); border-bottom: 4px solid var(--panel); font: 16px/1.4 var(--display); }
.pvp-band.g { background: var(--green); color: var(--panel); }
.pvp-band.r { background: var(--red); color: var(--text); text-shadow: 2px 2px 0 var(--red-d); }
.pvp-band.n { background: var(--panel); color: var(--gold); }
.pvp-ctrl { flex: none; background: var(--panel); border-top: 2px solid var(--panel); padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.pvp-mebars { display: flex; gap: 6px; align-items: center; }
.pvp-mebars .px-icon { width: 16px; height: auto; }
.pvp-stam { width: 90px; height: 8px; border: 2px solid var(--panel); background: var(--border); position: relative; flex: none; }
.pvp-stam i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--whale); }
/* v1.081: one-hand cluster (◀▶ + wide duck) on one side, a big round THROW button on the other.
   Default is move-left/throw-right; .pvp-lefty (toggled from the entry screen, persisted in
   localStorage) mirrors the row. Every control here is touch-action:none so pointer events fire
   immediately (no 300ms delay), can't be text-selected, and won't double-tap zoom. */
.pvp-ctrl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pvp-lefty .pvp-ctrl-row { flex-direction: row-reverse; }
.pvp-move-cluster { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.pvp-move-pair { display: flex; gap: 12px; }
.pvp-movebtn {
  width: 64px; height: 64px; min-height: 64px; flex: none; font-size: 22px; padding: 0;
  justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none;
}
.pvp-duck { min-height: 48px; font: 8px/1.4 var(--display); justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.pvp-duck.on { background: var(--whale); outline-color: var(--gold); }
.pvp-throwbtn {
  position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--text); border: 2px solid var(--panel);
  box-shadow: 0 3px 0 var(--shadow); outline: 2px solid var(--red-d); outline-offset: -4px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pvp-throwbtn:active { transform: translateY(2px); box-shadow: none; }
.pvp-throwbtn-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 10px/1 var(--display); text-shadow: 2px 2px 0 var(--red-d); }
.pvp-throwbtn-inner .px-icon { width: 22px; height: auto; }
.pvp-throwring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; }
.pvp-throwring circle { fill: none; stroke-width: 6; }
.pvp-throwring .bg { stroke: rgba(16, 20, 42, .35); }
.pvp-throwring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; }

/* result */
.pvp-rband { margin: 12px 12px 8px; padding: 10px; text-align: center; border-top: 4px solid var(--panel); border-bottom: 4px solid var(--panel); font: 16px/1.5 var(--display); }
.pvp-rband.g { background: var(--green); color: var(--panel); }
.pvp-rband.r { background: var(--red); color: var(--text); text-shadow: 2px 2px 0 var(--red-d); }
.pvp-rband.n { background: var(--panel); color: var(--gold); }
.pvp-rband small { display: block; font-size: 8px; margin-top: 4px; }
#pvp-res-art { display: block; width: 100%; border-top: 2px solid var(--panel); border-bottom: 2px solid var(--panel); image-rendering: pixelated; }
.pvp-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.pvp-kv span { font: 8px/1.4 var(--body); color: var(--dim); }
.pvp-kv b { font: 8px/1.4 var(--display); text-align: right; }
.pvp-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px; }
.pvp-chip { display: flex; align-items: center; gap: 6px; background: var(--border); border: 2px solid var(--panel); outline: 2px solid var(--gold); outline-offset: -4px; padding: 3px 8px; font: 8px/1.4 var(--body); }
.pvp-chip .px-icon { height: 20px; width: auto; }

/* stats */
.pvp-stat { display: grid; grid-template-columns: 34px 1fr 36px 36px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 2px solid rgba(93, 111, 158, .35); }
.pvp-stat img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.pvp-stat .nm { line-height: 1.3; font: 8px/1.4 var(--display); }
.pvp-stat .nm span { color: var(--dim); }
.pvp-stat .v { color: var(--dim); font: 8px/1.5 var(--body); margin-top: 3px; }
.pvp-stat .v b { color: var(--up); font-weight: normal; }
.pvp-spips { display: flex; gap: 2px; margin-top: 3px; }
.pvp-spips i { width: 12px; height: 10px; background: var(--border); border: 1px solid var(--panel); display: block; }
.pvp-spips i.on { background: var(--green); }
.pvp-spips i.soft { height: 6px; margin-top: 4px; }
.pvp-spips i.soft.on { background: #4fa446; }
.pvp-stat .pvp-btn { padding: 4px 0; min-height: 34px; }

@media (prefers-reduced-motion: reduce) {
  .pvp-giantbtn { animation: none; }
}

/* ---------- v1.084: help / onboarding ---------- */
.menu-settings + .menu-settings { margin-top: 6px; }
.menu-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* small "?" affordance reused at every contextual help spot */
.help-q {
  flex: none; min-width: 22px; min-height: 22px; padding: 0;
  font: 8px/1 var(--display); color: var(--gold);
  background: var(--panel); border: 2px solid var(--gold); cursor: pointer;
}
.fc-ttl-row { display: flex; justify-content: space-between; align-items: center; }
.pvp-help-row { display: flex; justify-content: flex-end; padding: 6px 10px 0; }

/* help card: shared dialog for forecast / duel / wardrobe / profile */
.help-panel { width: 340px; max-height: 80vh; overflow-y: auto; }
.help-menu:not(.sheet) .help-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.help-card-icons { display: flex; justify-content: center; align-items: flex-end; gap: 10px; min-height: 40px; margin-bottom: 10px; }
.help-card-icons .px-icon { max-height: 36px; width: auto; }
.help-lines { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; }
.help-lines li { margin-bottom: 4px; }
.help-card-example { margin-top: 8px; padding: 6px 8px; border: 2px solid var(--gold); font-size: 12px; line-height: 1.4; color: var(--dim); }
.help-card-example b { color: var(--gold); font-weight: 600; }

/* first-steps pill (HUD) + sheet */
.fs-pill {
  position: absolute; left: 6px; top: calc(var(--top-space, 60px) + 6px); z-index: 6;
  display: flex; align-items: center; pointer-events: auto; cursor: pointer;
  font: 8px/1 var(--display); color: var(--gold); background: var(--panel-a);
  border: 2px solid var(--panel); outline: 2px solid var(--border); outline-offset: -4px;
  box-shadow: 0 2px 0 var(--shadow); padding: 5px 7px; white-space: nowrap;
}
[data-layout="wide"] .fs-pill { top: 12px; }
.fs-pill[hidden] { display: none; }
.fs-panel { width: 380px; max-height: 80vh; overflow-y: auto; }
.fs-menu:not(.sheet) .fs-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fs-body { display: flex; flex-direction: column; gap: 6px; }
.fs-step { display: flex; align-items: center; gap: 10px; padding: 6px; border: 2px solid rgba(93, 111, 158, 0.35); }
.fs-step.done { border-color: rgba(166, 232, 92, 0.6); background: rgba(166, 232, 92, 0.08); }
.fs-step .px-icon { flex: none; max-height: 28px; width: auto; }
.fs-step-body { flex: 1; min-width: 0; }
.fs-step-name { font-size: 13px; font-weight: 600; }
.fs-step-how { font-size: 12px; color: var(--dim); line-height: 1.35; margin-top: 2px; }
.fs-step-check { flex: none; color: var(--up); font-size: 20px; font-weight: 700; }
.fs-sheet-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.fs-foot { margin-top: 4px; font-size: 12px; color: var(--dim); text-align: center; }

/* brief attention flash used by the "Показать" buttons to point at the real UI */
@keyframes fs-flash { 0%, 100% { outline-color: var(--border); } 50% { outline-color: var(--gold); } }
.fs-flash { animation: fs-flash 0.5s steps(2) 3; }
@media (prefers-reduced-motion: reduce) { .fs-flash { animation: none; outline-color: var(--gold); } }

/* rules sheet: collapsible chapters (reusing the wardrobe's <details> look) + FAQ */
.rules-panel { width: min(560px, calc(100vw - 24px)); max-height: 82vh; overflow-y: auto; }
.rules-menu:not(.sheet) .rules-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rules-body details { border-bottom: 2px solid var(--border); padding: 4px 0; }
.rules-body summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; padding: 6px 2px; -webkit-tap-highlight-color: transparent; }
.rules-body summary::-webkit-details-marker { display: none; }
.rules-body summary::before { content: '▸ '; color: var(--gold); }
.rules-body details[open] summary::before { content: '▾ '; }
.rules-body details p { margin: 4px 2px 8px; font-size: 13px; line-height: 1.45; color: var(--text); }
.rules-faq { margin: 4px 0 0; }
.rules-faq dt { font-size: 13px; font-weight: 600; margin-top: 10px; }
.rules-faq dd { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--dim); }

/* ---------- Duel call-to-action (v1.085, phone bottom HUD) ---------- */
[data-layout="phone"] #btn-pvp { display: none; }
[data-layout="wide"] .duel-cta { display: none; }
.duel-cta {
  order: 9; pointer-events: auto; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px; cursor: pointer; color: var(--panel);
  background: var(--up); border: 2px solid var(--panel); box-shadow: 0 3px 0 var(--shadow), inset 0 -3px 0 #6fb33a;
  font: 14px/1 var(--display); text-align: left;
}
.duel-cta[hidden] { display: none; }
.duel-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow), inset 0 -3px 0 #6fb33a; }
.duel-cta .px-icon { width: 24px; height: auto; flex: none; }
.duel-cta-title { flex: none; }
.duel-cta-meter { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.duel-cta-pips { display: flex; gap: 2px; }
.duel-cta-pips i { width: 8px; height: 10px; background: rgba(26, 28, 44, .25); border: 1px solid var(--panel); }
.duel-cta-pips i.on { background: var(--gold); }
.duel-cta-count { font: 9px/1 var(--display); white-space: nowrap; }
.duel-cta[data-empty="1"] { background: var(--dim); box-shadow: 0 3px 0 var(--shadow), inset 0 -3px 0 #6d84ad; }