/* HSK bubbles page: the network's look in its game column (hsk-network #look,
   hsk-bubbles #feel-look). Tokens, faces, level switches, and swatches come from
   ../style.css; this file only places and overrides them for the game. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --scrim: rgba(15, 20, 36, .62);
  --fs-head-game: var(--fs-head-phone);
}
@media (min-width: 600px) and (hover: hover) {
  :root { --fs-head-game: var(--fs-head); }
}

body.game {
  font-family: var(--font);
  background: var(--night);
  color: var(--ink-night);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.app {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--night);
}
@media (min-width: 560px) {
  .app { box-shadow: 0 0 0 1px var(--line-night); }
}

#board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }
/* Focus: a 2px ink ring on surfaces, light on the night board. */
:focus-visible { outline: var(--focus-ring) solid var(--ink-night); outline-offset: 2px; }
.sheet :focus-visible, .wcard :focus-visible { outline-color: var(--ink); }

.caption {
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
}

/* ---- HUD */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(var(--sat) + 4px) calc(var(--sar) + 8px) 4px calc(var(--sal) + 14px);
  pointer-events: none;
}
.hud[hidden] { display: none; }
.hud > * { pointer-events: auto; }
.hud-score { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.score {
  font-size: var(--fs-score-play);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.hud-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  color: var(--muted-night);
  white-space: nowrap;
}
.combo {
  padding: 0 7px;
  border: 1px solid var(--line-night);
  border-radius: var(--radius-pill);
  color: var(--ink-night);
  font-variant-numeric: tabular-nums;
}
.combo[hidden] { display: none; }
.hud-actions { display: flex; gap: 6px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line-night);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn .sound-state { font-size: var(--fs-caption); font-weight: var(--w-medium); white-space: nowrap; }
.icon-btn.sound-btn { padding: 0 10px 0 8px; }
.icon-btn.sound-btn[aria-checked="false"] { color: var(--muted-night); }
.sound-btn svg .i-slash, .sound-btn svg .i-wave { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.sound-btn[aria-checked="false"] svg .i-wave { display: none; }
.sound-btn[aria-checked="true"] svg .i-slash { display: none; }

/* ---- Hint, banner */
.hint {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  color: var(--muted-night);
  pointer-events: none;
  animation: breathe 2.4s ease-in-out infinite;
}
.hint[hidden] { display: none; }
@keyframes breathe { 50% { opacity: .45; } }

.banner {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: banner-in var(--dur-card) var(--ease-out) both;
}
.banner[hidden] { display: none; }
.banner .b-title { font-size: var(--fs-caption); font-weight: var(--w-medium); letter-spacing: var(--ls-caption); color: var(--muted); }
.banner .b-bonus { font-size: var(--fs-score-play); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, calc(-50% + var(--rise))); } }

/* Themed collection mark (hsk-network #color-levels): a hollow pill, surface fill
   and 2px ink outline; off, a muted outline. */
.swatch.themed {
  width: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.level[aria-checked="false"] .swatch.themed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* ---- Word and character cards: float above the launcher, never take input. */
.wcard {
  position: absolute;
  left: 50%;
  bottom: 140px;
  z-index: 2;
  width: max-content;
  min-width: 180px;
  max-width: min(340px, calc(100% - 32px));
  padding: 12px 18px 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--hsk1), var(--shadow);
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: card-in var(--dur-card) var(--ease-out) both;
}
.wcard[hidden] { display: none; }
.wcard.l2 { box-shadow: inset 4px 0 0 var(--hsk2), var(--shadow); }
.wcard.themed { box-shadow: var(--shadow); padding-left: 18px; }  /* no color: its hollow pill names it below */
.wcard.ccard { box-shadow: var(--shadow); padding-left: 18px; }
.wcard.out { animation: card-out var(--dur-card-leave) var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, var(--rise)); } }
@keyframes card-out { to { opacity: 0; transform: translate(-50%, calc(-1 * var(--rise))); } }
.wcard .k-def {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
}
.wcard .k-reading { margin-top: 8px; }
.wcard .k-reading .k-def { margin-top: 0; }
.wcard .k-levels { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.k-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  color: var(--muted);
}
.k-level .swatch { width: 10px; height: 10px; }
.k-level .swatch.themed { width: 16px; }
.s-tag {
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  color: var(--muted);
}

/* ---- Headword: built by ../headword.js, styled by ../style.css; the game only sizes it. */
.wcard { --head: var(--fs-head-game); }

/* ---- Screens: surfaces over the dimmed night board, dark in the dark appearance. */
.screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  background: var(--scrim);
  overflow-y: auto;
  animation: fade var(--dur-card) var(--ease-out) both;
}
.screen[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow);
  animation: rise var(--dur-card) var(--ease-out) both;
}
.sheet.small { max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }

/* Start: the first screenful is only the title, level chips, best score, the
   ink Play pill, and the quiet control row; the network link and Sources sit
   below the fold (#feel-look). */
#start.scroll:not([hidden]) { display: block; padding: 0; overscroll-behavior: contain; }
#start .fold {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
}
.start-sheet { max-height: none; overflow: visible; padding-top: 28px; }
#start .below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 412px;
  margin: 0 auto;
  padding: 8px calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px);
  color: var(--muted-night);
}

h1, h2 { margin: 0 0 14px; font-size: var(--fs-title); font-weight: var(--w-semibold); }
/* Collection chips wrap onto a second line on a phone (#feel-look); the row
   may use the sheet's side padding so both themed chips share a line from 390px. */
.levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
  margin: 0 -16px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
}
.best { margin: 10px 0 18px; color: var(--muted); }
.best .caption { vertical-align: 4px; }
.best strong {
  margin-left: 4px;
  color: var(--ink);
  font-size: var(--fs-score-play);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.new-best {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  vertical-align: 5px;
}
.new-best[hidden] { display: none; }
.final {
  margin: 0;
  font-size: var(--fs-score);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#over .best { margin: 6px 0 16px; }

/* One ink pill per screen for the primary action; no gradients on controls. */
.primary, .secondary {
  display: block;
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.primary { border: 0; color: var(--paper); background: var(--ink); }
.primary:disabled { opacity: .5; cursor: default; }
.secondary { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.primary:active:not(:disabled), .secondary:active, .chip-btn:active, .quiet-btn:active, .icon-btn:active { transform: scale(var(--press-scale)); }

/* Quiet row: script, pronunciation, effects. */
.quiet {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.quiet-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.quiet-btn[data-script], .quiet-btn[aria-checked="true"] { color: var(--ink); }
.quiet-btn svg { width: 18px; height: 18px; fill: currentColor; }

.row { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
#start .below .chip-btn { border-color: var(--line-night); background: transparent; color: var(--ink-night); }

.sources { width: 100%; font-size: var(--fs-caption); letter-spacing: var(--ls-caption); text-align: left; }
.sources summary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  cursor: pointer;
  list-style: none;
}
.sources summary::-webkit-details-marker { display: none; }
.sources p { margin: 0 0 8px; line-height: var(--lh-body); -webkit-user-select: text; user-select: text; }
.sources a { color: var(--ink-night); }

/* ---- Game over: popped words, Zhuyin on one line. */
.list-title {
  margin: 4px 0 6px;
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  color: var(--muted);
}
.popped-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-height: 34vh;
  overflow-y: auto;
  text-align: left;
  border-top: 1px solid var(--line);
}
.popped-list li { border-bottom: 1px solid var(--line); }
.popped-list .pw {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  min-height: 44px;
  padding: 8px 6px 8px 10px;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 3px 0 0 var(--hsk1);
}
.popped-list .pw.l2 { box-shadow: inset 3px 0 0 var(--hsk2); }
.popped-list .pw.themed { box-shadow: none; }
.popped-list a.pw:active { background: var(--hover); }
.popped-list .p-word { font-size: 22px; font-weight: var(--w-medium); }
.popped-list .p-reading { font-size: var(--fs-zhuyin-list); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popped-list .p-def {
  grid-column: 1 / -1;
  font-size: var(--fs-label);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popped-list .empty { padding: 12px 6px; color: var(--muted); font-size: var(--fs-label); text-align: center; }

/* Reduced motion: nothing slides, scales, or shakes; changes fade in 120ms. */
@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; }
  .banner, .wcard, .screen, .sheet { animation: fade var(--dur-reduced) linear both; }
  .wcard.out { animation: none; opacity: 0; }
  .primary, .secondary, .chip-btn, .quiet-btn, .icon-btn { transition: none; }
  .primary:active:not(:disabled), .secondary:active, .chip-btn:active, .quiet-btn:active, .icon-btn:active { transform: none; }
}