.logo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
  vertical-align: middle;
  overflow: hidden;
  line-height: 1;
}

:root {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --panel2: #f0eee8;
  --text: #16181d;
  --muted: #6c707a;
  --line: #e6e3db;
  --accent: #ffb938;
  --accent-ink: #16181d;
  --good: #3d9a58;
  --mid: #d0a52b;
  --miss: #7d818a;
  --bad: #d64545;
  --is: 75%;
  --il: 91%;
  --shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 20px rgba(20, 20, 30, 0.05);
  --g1: #f4d86b;
  --g2: #a7cf72;
  --g3: #a9c6f0;
  --g4: #c49be0;
  --gi: #16181d;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111318;
    --panel: #1a1d24;
    --panel2: #252933;
    --text: #eef0f4;
    --muted: #99a0ad;
    --line: #2a2f3a;
    --accent: #ffbf4d;
    --accent-ink: #16181d;
    --good: #4fae69;
    --mid: #c9a43a;
    --miss: #474c57;
    --bad: #e56060;
    --is: 35%;
    --il: 22%;
    --shadow: none;
  }
}
:root[data-theme='dark'] {
  --bg: #111318;
  --panel: #1a1d24;
  --panel2: #252933;
  --text: #eef0f4;
  --muted: #99a0ad;
  --line: #2a2f3a;
  --accent: #ffbf4d;
  --accent-ink: #16181d;
  --good: #4fae69;
  --mid: #c9a43a;
  --miss: #474c57;
  --bad: #e56060;
  --is: 35%;
  --il: 22%;
  --shadow: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.45 ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px calc(100px + env(safe-area-inset-bottom));
}
/* top */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 6px;
}
.top h1 {
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}
.top .sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}
.spacer {
  flex: 1;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 700;
  background: var(--panel);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 17px;
  display: grid;
  place-items: center;
  flex: none;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--miss);
}
.dot.on {
  background: var(--good);
}
.dot.wait {
  background: var(--mid);
}
/* cards */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.hero {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bar {
  height: 10px;
  background: var(--panel2);
  border-radius: 99px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s;
}
.sec-h {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 4px 8px;
}
.list {
  padding: 4px 0;
}
.gr {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
}
.gr:first-child {
  border-top: 0;
}
.gr:hover {
  background: var(--panel2);
}
.gi {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 23px;
  flex: none;
  background: hsl(var(--h) var(--is) var(--il));
}
.gr .t {
  flex: 1;
  min-width: 0;
}
.gr .nm {
  font-weight: 700;
}
.gr .bl {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st {
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--accent-ink);
  white-space: nowrap;
}
.st.done {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.st.go {
  background: var(--panel2);
  color: var(--text);
}
h2 {
  font-size: 22px;
  margin: 22px 0 10px;
  letter-spacing: -0.015em;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 13.5px;
}
.btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  min-height: 46px;
}
.btn.ghost {
  background: var(--panel2);
  color: var(--text);
}
.btn.sm {
  padding: 8px 13px;
  font-size: 14px;
  min-height: 0;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 480px) {
  .row > .btn {
    white-space: nowrap;
    flex: 1 1 max-content;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.sharebar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sharebar .btn {
  flex: 1;
  min-width: 120px;
}
.tx {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  outline: none;
}
.tx:focus {
  border-color: var(--accent);
}
textarea.tx {
  min-height: 92px;
  font:
    14px/1.4 ui-monospace,
    Menlo,
    monospace;
  resize: vertical;
}
label.lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 6px;
}
.center {
  text-align: center;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stat {
  background: var(--panel2);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
.stat b {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}
.stat span {
  font-size: 12px;
  color: var(--muted);
}
.notice {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  background: color-mix(in srgb, var(--mid) 18%, transparent);
  margin-top: 14px;
}
/* bottom nav */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav .in {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
}
.nav button {
  flex: 1;
  background: none;
  border: 0;
  padding: 9px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.nav button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav button[aria-selected='true'] {
  color: var(--text);
}
.nav button[aria-selected='true'] svg {
  stroke: var(--text);
}
/* game screen */
.gh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 12px;
}
.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
.gh h2 {
  margin: 0;
  font-size: 20px;
  flex: 1;
}
.rules {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.bignum {
  font-size: clamp(34px, 10vw, 50px);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 8px 0;
  letter-spacing: -0.02em;
}
.msg {
  min-height: 24px;
  text-align: center;
  margin: 10px 0;
  font-weight: 700;
}
.clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
pre.grid-out {
  font:
    19px/1.25 ui-monospace,
    monospace;
  text-align: center;
  margin: 10px 0;
  white-space: pre;
}
/* leaderboard */
.datenav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px;
}
.datenav .d {
  flex: 1;
  text-align: center;
  font-weight: 800;
}
.seg {
  display: flex;
  background: var(--panel2);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 12px;
}
.seg button {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 10px;
  padding: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
.seg button[aria-pressed='true'] {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.lb {
  margin-bottom: 10px;
  padding: 14px 16px;
}
.lb h3 {
  margin: 0 0 6px;
  font-size: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.lb table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.lb td {
  padding: 8px 4px;
  border-top: 1px solid var(--line);
}
.lb td.rk {
  width: 34px;
  color: var(--muted);
  font-weight: 800;
}
.lb td.sc {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lb td.x {
  width: 26px;
  text-align: right;
}
.lb tr.me td {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.lb .del {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  padding: 0 4px;
}
.tag {
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--panel2);
  color: var(--muted);
  white-space: nowrap;
}
.champ {
  display: flex;
  align-items: center;
  gap: 12px;
}
.champ .big {
  font-size: 30px;
}
/* explore */
.ex {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.ex:first-child {
  border-top: 0;
}
.ex .nm {
  font-weight: 700;
}
.ex .bl {
  font-size: 13px;
  color: var(--muted);
}
/* wordle */
.fv-boards {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.fv-board {
  display: grid;
  gap: 5px;
  width: min(300px, 100%);
}
.n2 .fv-board {
  width: calc(50% - 5px);
  max-width: 220px;
  gap: 4px;
}
.fv-board.solved {
  opacity: 0.75;
}
.fv-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.n2 .fv-row {
  gap: 3px;
}
.tile {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 28px);
  text-transform: uppercase;
  background: var(--panel);
}
.n2 .tile {
  font-size: clamp(12px, 3.6vw, 18px);
  border-radius: 5px;
  border-width: 1.5px;
}
.tile.f {
  border-color: var(--muted);
  animation: pop 0.1s;
}
@keyframes pop {
  50% {
    transform: scale(1.08);
  }
}
.tile.g,
.key.g {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
}
.tile.y,
.key.y {
  background: var(--mid);
  border-color: var(--mid);
  color: #fff;
}
.tile.b,
.key.b {
  background: var(--miss);
  border-color: var(--miss);
  color: #fff;
}
.kb {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 500px;
  margin: 0 auto;
}
.kb .kr {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.key {
  flex: 1;
  max-width: 44px;
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: var(--panel2);
  font-weight: 800;
  touch-action: manipulation;
  padding: 0;
  font-size: 15px;
}
.key.wide {
  max-width: 68px;
  flex: 1.5;
  font-size: 12px;
}
/* groups */
.gp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.gp-grid button {
  aspect-ratio: 1.25;
  border: 0;
  border-radius: 10px;
  background: var(--panel2);
  font-weight: 800;
  font-size: clamp(11px, 3.3vw, 15px);
  text-transform: uppercase;
  padding: 2px;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.1;
  transition:
    transform 0.1s,
    background 0.12s;
}
.gp-grid button.sel {
  background: #5a5f6b;
  color: #fff;
}
.gp-grid button.long {
  font-size: clamp(9px, 2.6vw, 13px);
}
.gp-grid button:active {
  transform: scale(0.95);
}
.gp-solved {
  display: grid;
  gap: 7px;
  margin-bottom: 7px;
}
.gp-band {
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  color: var(--gi);
  animation: pop 0.25s;
}
.gp-band b {
  display: block;
  text-transform: uppercase;
  font-size: 15px;
}
.gp-band span {
  font-size: 13.5px;
  text-transform: uppercase;
}
.lv1 {
  background: var(--g1);
}
.lv2 {
  background: var(--g2);
}
.lv3 {
  background: var(--g3);
}
.lv4 {
  background: var(--g4);
}
.lives {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 14px 0;
  font-size: 14px;
  color: var(--muted);
}
.lives i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5a5f6b;
  display: inline-block;
}
.lives i.gone {
  background: var(--panel2);
}
/* hunt */
.hunt {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: min(380px, 100%);
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hunt div {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(14px, 4.4vw, 20px);
  border-radius: 8px;
  background: var(--panel2);
}
.hunt div.hov {
  background: var(--accent);
  color: var(--accent-ink);
}
.hunt div.anc {
  outline: 2px solid var(--accent);
}
.words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 12px 0;
}
.words span {
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 9px;
  background: var(--panel2);
  text-transform: uppercase;
}
.words span.got {
  text-decoration: line-through;
  opacity: 0.5;
}
/* sudoku */
.sd {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: min(360px, 100%);
  margin: 0 auto;
  border: 2.5px solid var(--text);
  border-radius: 10px;
  overflow: hidden;
}
.sd button {
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: clamp(18px, 6vw, 26px);
  font-weight: 800;
  color: var(--accent-ink);
  padding: 0;
}
.sd button.u {
  color: #2f6fd6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sd button {
    color: var(--text);
  }
  :root:not([data-theme='light']) .sd button.u {
    color: #7fb0ff;
  }
}
:root[data-theme='dark'] .sd button {
  color: var(--text);
}
:root[data-theme='dark'] .sd button.u {
  color: #7fb0ff;
}
.sd button.c3 {
  border-right: 2.5px solid var(--text);
}
.sd button.r2 {
  border-bottom: 2.5px solid var(--text);
}
.sd button.hl {
  background: var(--panel2);
}
.sd button.on {
  background: color-mix(in srgb, var(--accent) 45%, var(--panel));
}
.sd button.err {
  color: var(--bad) !important;
}
.pad {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(360px, 100%);
  margin: 14px auto 0;
}
.pad button {
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--panel2);
  font-size: 20px;
  font-weight: 800;
}
/* numbers */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(340px, 100%);
  margin: 0 auto;
}
.tiles button {
  height: 62px;
  border: 0;
  border-radius: 14px;
  background: var(--panel2);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tiles button.sel {
  background: var(--accent);
  color: var(--accent-ink);
}
.tiles button.new {
  animation: pop 0.25s;
}
.ops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(340px, 100%);
  margin: 10px auto;
}
.ops button {
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  font-size: 24px;
  font-weight: 800;
}
.ops button.sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
}
.steps {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}
/* lists (timeline/capitals) */
.tl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl .it {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel2);
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
}
.tl .it .ev {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}
.tl .it .yr {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tl .it.ok {
  background: color-mix(in srgb, var(--good) 22%, var(--panel));
}
.tl .it.no {
  background: color-mix(in srgb, var(--bad) 18%, var(--panel));
}
.arrows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arrows button {
  width: 34px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: var(--panel);
  font-size: 12px;
}
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.opts button {
  min-height: 58px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-weight: 700;
  padding: 8px;
}
.opts button.ok {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
}
.opts button.no {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
/* sprint / hilo / recall */
.timer {
  height: 8px;
  background: var(--panel2);
  border-radius: 99px;
  overflow: hidden;
}
.timer i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s linear;
}
.hint {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}
.log {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  justify-content: center;
}
.log span {
  background: var(--panel2);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.rc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(320px, 100%);
  margin: 14px auto;
}
.rc button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: var(--panel2);
  transition:
    background 0.15s,
    transform 0.1s;
  touch-action: manipulation;
}
.rc button.lit {
  background: var(--accent);
}
.rc button.ok {
  background: var(--good);
}
.rc button.no {
  background: var(--bad);
}
/* dialogs / toast */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 22px;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
}
dialog::backdrop {
  background: rgba(10, 10, 15, 0.5);
}
dialog h2 {
  margin-top: 0;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: var(--text);
  color: var(--bg);
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 700;
  opacity: 0;
  transition: 0.25s;
  pointer-events: none;
  z-index: 50;
  max-width: calc(100% - 32px);
  text-align: center;
  font-size: 14.5px;
}
.toast.on {
  opacity: 1;
  transform: translateX(-50%);
}
[hidden] {
  display: none !important;
}
/* ===== social hub ===== */
.chips2 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.chips2 button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 7px 13px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--muted);
}
.chips2 button[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.act {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  animation: rise 0.35s both;
}
.act .body {
  flex: 1;
  min-width: 0;
}
.act .line1 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.act .line2 {
  font-size: 14.5px;
  margin-top: 2px;
}
.rx {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rx button {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 800;
  min-width: 40px;
  transition: transform 0.12s;
}
.rx button:active {
  transform: scale(0.9);
}
.rx button.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
}
.rx .ct {
  font-size: 12px;
  margin-left: 3px;
  color: var(--muted);
}
.inb {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.inb:first-child {
  border-top: 0;
}
.inb.unread {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.inb .ico {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex: none;
}
.ticker .live {
  cursor: pointer;
}
.gpick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.gpick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-weight: 800;
  font-size: 12.5px;
}
.gpick button span {
  font-size: 22px;
}
/* ===== ads (only when AdSense is configured) ===== */
.adwrap {
  margin: 18px 0 6px;
  padding: 8px 10px 10px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--panel);
  min-height: 60px;
}
.adwrap .adlbl {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 6px;
}
.adwrap ins.adsbygoogle[data-ad-status='unfilled'] {
  display: none !important;
}
.adwrap:has(ins[data-ad-status='unfilled']) {
  display: none;
}
/* ===== Daily 5 ===== */
.d5 {
  margin-top: 14px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, #a77bff 16%, var(--panel)) 0%,
    color-mix(in srgb, var(--accent) 16%, var(--panel)) 100%
  );
  border-color: color-mix(in srgb, #a77bff 30%, var(--line));
  position: relative;
  overflow: hidden;
}
.d5 h2 {
  margin: 0;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.d5grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin: 14px 0;
}
.d5c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 9px;
  border-radius: 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.15s;
}
.d5c:active {
  transform: scale(0.95);
}
.d5c .ic {
  font-size: 24px;
  line-height: 1;
}
.d5c .n {
  font-size: 11px;
  font-weight: 800;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d5c .s {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.d5c.done {
  border-color: color-mix(in srgb, var(--good) 45%, var(--line));
}
.d5c.next {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.d5total {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  animation: popin 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
.d5total small {
  font-size: 18px;
  color: var(--muted);
  font-weight: 800;
}
.d5sq {
  font-size: 22px;
  letter-spacing: 2px;
  margin: 6px 0 2px;
}
/* ===== widgets & badges ===== */
.wprev {
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(var(--panel2) 0 25%, var(--panel) 0 50%) 0 0/16px 16px;
  border-radius: 12px;
  padding: 16px;
  min-height: 90px;
  border: 1px solid var(--line);
}
.wprev img {
  max-width: 100%;
  height: auto;
}
.codebox {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 8px;
}
.codebox code {
  flex: 1;
  min-width: 0;
  font:
    12px/1.4 ui-monospace,
    Menlo,
    monospace;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  white-space: nowrap;
  overflow-x: auto;
  display: block;
}
.codebox .btn {
  flex: none;
}
/* ===== live ticker ===== */
.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 7px 10px;
  margin-top: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ticker .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--bad);
  flex: none;
}
.ticker .live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.ticker .win {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.ticker .track {
  display: inline-flex;
  gap: 26px;
  white-space: nowrap;
  animation: marquee var(--dur, 40s) linear infinite;
  padding-left: 4px;
}
.ticker:hover .track,
.ticker:focus-within .track {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.ti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  cursor: pointer;
}
.ti .av {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.ti .ago {
  color: var(--muted);
  font-size: 12px;
}
.ti .tag2 {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.ti.fresh b.sc {
  animation: popin 0.6s cubic-bezier(0.3, 1.7, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ticker .win {
    overflow-x: auto;
  }
  .ticker .track {
    animation: none;
  }
}
/* ===== brain index + clipboard bar ===== */
.bi {
  display: flex;
  gap: 16px;
  align-items: center;
}
.bi .ring {
  --p: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--chart) calc(var(--p) * 1%), var(--panel2) 0);
  position: relative;
}
.bi .ring:after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--panel);
}
.bi .ring b {
  position: relative;
  z-index: 1;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.bi .tier {
  font-size: 18px;
  font-weight: 900;
}
.delta {
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
}
.delta.up {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.delta.down {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
}
#clipbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: 520px;
  margin: 0 auto;
  animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#clipbar .cb-in {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--panel);
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 16px;
  padding: 10px 10px 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
body.ingame #clipbar {
  bottom: calc(14px + env(safe-area-inset-bottom));
}
/* ===== flair & pop ===== */
body {
  background:
    radial-gradient(900px 420px at 110% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(700px 380px at -20% 8%, color-mix(in srgb, #7aa7ff 14%, transparent), transparent 60%), var(--bg);
  background-attachment: fixed;
}
.brand .logo {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: rotate(-4deg);
}
.hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--panel)) 0%, var(--panel) 55%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.bar i {
  background: linear-gradient(90deg, #ffb938, #ff7a45, #ff5fa2);
  background-size: 200% 100%;
  animation: shine 3s linear infinite;
}
@keyframes shine {
  to {
    background-position: -200% 0;
  }
}
.btn {
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    filter 0.2s;
}
.btn:active {
  transform: scale(0.96);
}
.btn:not(.ghost):not(.apple):not(.bmc):hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
  filter: saturate(1.1);
}
.pill.hot {
  border-color: color-mix(in srgb, #ff7a45 55%, var(--line));
  animation: glow 2.4s ease-in-out infinite;
}
.pill.hot .flame {
  display: inline-block;
  animation: flick 1.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes glow {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, #ff7a45 22%, transparent);
  }
}
@keyframes flick {
  0%,
  100% {
    transform: scale(1) rotate(-3deg);
  }
  50% {
    transform: scale(1.18) rotate(4deg);
  }
}
.list .gr,
.feat .fc,
.fcard,
.tile2,
.lb {
  animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gr .gi,
.fc .gi {
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.gr:hover .gi,
.fc:hover .gi {
  transform: rotate(-8deg) scale(1.1);
}
.gr:active {
  transform: scale(0.985);
}
.feat .fc {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.feat .fc:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(20, 20, 30, 0.12);
}
.feat .fc.wild:before {
  background: linear-gradient(90deg, #ff5fa2, #ffb938, #4fd18b, #5aa9ff, #a77bff);
  height: 6px;
}
.feat .fc.wild {
  background: linear-gradient(160deg, color-mix(in srgb, #a77bff 12%, var(--panel)), var(--panel) 60%);
}
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--panel2);
  color: var(--text);
  width: max-content;
}
.ribbon.new {
  background: color-mix(in srgb, #5aa9ff 18%, transparent);
}
.ribbon.wild {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #ff5fa2 22%, transparent),
    color-mix(in srgb, #a77bff 22%, transparent)
  );
}
.bignum {
  animation: popin 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
@keyframes popin {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.nav button[aria-selected='true'] svg {
  animation: hop 0.35s ease;
}
.nav button[aria-selected='true']:after {
  content: '';
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  margin-top: 1px;
}
@keyframes hop {
  50% {
    transform: translateY(-4px);
  }
}
.st:not(.done):not(.go) {
  background: linear-gradient(135deg, #ffc24d, #ff9f43);
}
.pb-badge {
  display: inline-block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 4px 12px;
  background: linear-gradient(90deg, #ffe07a, #ffb938);
  color: #16181d;
  animation: popin 0.6s 0.2s both;
}
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* ===== charts (validated: light #c07800 on #fff, dark #c98418 on #1a1d24) ===== */
:root {
  --chart: #c07800;
  --chart-wash: rgba(192, 120, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --chart: #c98418;
    --chart-wash: rgba(201, 132, 24, 0.14);
  }
}
:root[data-theme='dark'] {
  --chart: #c98418;
  --chart-wash: rgba(201, 132, 24, 0.14);
}
.chart {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}
.chart svg {
  display: block;
  overflow: visible;
}
.chart .ax {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}
.chart .bar {
  fill: var(--chart);
  transition: opacity 0.12s;
}
.chart .bar.dim {
  opacity: 0.45;
}
.chart .ln {
  fill: none;
  stroke: var(--chart);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .area {
  fill: var(--chart-wash);
}
.chart .dot {
  fill: var(--chart);
  stroke: var(--panel);
  stroke-width: 2;
}
.chart .xh {
  stroke: var(--muted);
  stroke-width: 1;
}
.ctip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.ctip b {
  font-size: 14px;
  display: block;
  color: var(--text);
}
.chart-card h3 {
  margin: 0;
  font-size: 16px;
}
.chart-card .sub {
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 10px;
}
.hbars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hb {
  display: grid;
  grid-template-columns: minmax(80px, 34%) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
}
.hb .lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb .track {
  height: 14px;
  position: relative;
}
.hb .track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--chart);
  border-radius: 0 4px 4px 0;
  min-width: 3px;
}
.hb b {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  min-width: 22px;
  text-align: right;
}
.tiles8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tile2 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.tile2 .v {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile2 .k {
  font-size: 12.5px;
  color: var(--muted);
}
.pbt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pbt th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
  font-weight: 800;
  padding: 6px 4px;
}
.pbt td {
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pbt td:not(:first-child),
.pbt th:not(:first-child) {
  text-align: right;
}
details.tbl summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 8px;
}
.selrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.selrow select {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  color: var(--text);
}
/* ===== competition ===== */
.league .lr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.league .lr:first-of-type {
  border-top: 0;
}
.league .lr.me {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  margin: 0 -16px;
  padding: 9px 16px;
}
.league .rk {
  width: 26px;
  text-align: center;
  font-weight: 800;
  color: var(--muted);
}
.league .pts {
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.league .sub2 {
  font-size: 12px;
  color: var(--muted);
}
.h2h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.h2h .bar2 {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
  display: flex;
  gap: 2px;
}
.h2h .bar2 i {
  display: block;
  height: 100%;
}
.vs-mini {
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--panel2);
  white-space: nowrap;
}
.vs-mini.up {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.vs-mini.down {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
}
/* ===== Scores: dedicated log area ===== */
.viewseg {
  display: flex;
  background: var(--panel2);
  border-radius: 14px;
  padding: 4px;
  margin: 14px 0 4px;
}
.viewseg button {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 11px;
  padding: 11px 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--muted);
}
.viewseg button[aria-pressed='true'] {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.logbox {
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.steps3 {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}
.steps3 div {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  font-size: 12.5px;
  text-align: center;
  color: var(--muted);
}
.steps3 b {
  display: block;
  color: var(--text);
  font-size: 15px;
}
.btn.big {
  width: 100%;
  min-height: 58px;
  font-size: 17px;
  border-radius: 14px;
}
.preview {
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 14.5px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.preview.ok {
  background: color-mix(in srgb, var(--good) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--good) 40%, transparent);
}
.preview.no {
  background: var(--panel2);
  color: var(--muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips a {
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--panel2);
  color: var(--text);
  text-decoration: none;
  border: 1.5px solid transparent;
}
.chips a.done {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.chips a.focus {
  border-color: var(--accent);
}
/* ===== featured row ===== */
.feat {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 16px 6px;
  margin: 0 -16px;
  scrollbar-width: none;
}
.feat::-webkit-scrollbar {
  display: none;
}
.feat .fc {
  flex: 0 0 min(80%, 310px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 18px;
  min-height: 280px;
  height: auto;
  position: relative;
  overflow: visible;
}
.feat .fc .bl {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat .fc .fscore {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel2);
  color: var(--muted);
  line-height: 1.3;
}
.feat .fc .fscore.on {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.feat .fc .fscore.on b {
  font-size: 15px;
}
.feat .fc .fact {
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
}
.feat .fc .fact .btn {
  white-space: nowrap;
  flex: 1;
}
.feat .fc .top2 .gi {
  width: 52px;
  height: 52px;
  font-size: 28px;
}
.feat .fc .nm {
  font-size: 17px;
}
@media (min-width: 960px) {
  .feat .fc {
    min-height: 290px;
  }
}
.feat {
  align-items: stretch;
  padding-bottom: 10px;
}
.feat .fc {
  align-items: stretch;
  text-align: left;
}
.feat .fc > .row {
  justify-content: flex-start;
}
.feat .fc:before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: hsl(var(--h) 70% 55%);
}
.feat .fc .top2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feat .fc .gi {
  width: 44px;
  height: 44px;
  font-size: 22px;
}
.feat .fc .nm {
  font-weight: 800;
  font-size: 17px;
}
.feat .fc .bl {
  font-size: 13.5px;
  color: var(--muted);
  flex: 1;
}
.feat .fc .row .btn {
  flex: 1;
}
/* ===== maker tag + about ===== */
.maker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 4px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.maker:hover {
  color: var(--text);
}
.maker .dd {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.about-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 6px 0 16px;
}
.about-logo .logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 900;
}
/* ===== profile page + support ===== */
.me-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 16px;
}
.me-hero .nm {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.stats6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.heat {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.heat i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--panel2);
  display: block;
}
.heat i.today {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}
.heat-lbl {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 4px;
}
.coffee {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, #ffdd00 22%, var(--panel)), var(--panel));
  border-color: color-mix(in srgb, #ffdd00 45%, var(--line));
}
.coffee .cup {
  font-size: 40px;
  line-height: 1;
}
.btn.bmc {
  background: #ffdd00;
  color: #16181d;
  border: 1px solid #e6c700;
}
.coffee-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
}
#setleague::placeholder {
  text-transform: none;
}
/* ===== front-page game feed ===== */
.feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fcard {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  animation: fadein 0.35s ease both;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fcard .gi {
  width: 52px;
  height: 52px;
  font-size: 26px;
}
.fcard .t {
  flex: 1;
  min-width: 0;
}
.fcard .nm {
  font-weight: 800;
  font-size: 16.5px;
}
.fcard .bl {
  font-size: 13.5px;
  color: var(--muted);
  margin: 2px 0 6px;
}
.fcard .acts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}
.feed-end {
  padding: 22px 10px 10px;
  text-align: center;
}
.feed-sentinel {
  height: 1px;
}
.feed-skel {
  height: 84px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--panel2), var(--panel), var(--panel2));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
/* ===== accounts, friends, profiles ===== */
.auth-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 4px;
}
.gbtn-wrap {
  min-height: 44px;
  display: flex;
  justify-content: center;
}
.btn.apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn.apple {
    background: #fff;
    color: #000;
    border-color: #fff;
  }
}
:root[data-theme='dark'] .btn.apple {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin: 16px 0 12px;
}
.or:before,
.or:after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.linkbtn {
  background: none;
  border: 0;
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  padding: 8px 0;
  font-size: 14px;
}
.av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  flex: none;
  color: #16181d;
  background: hsl(var(--h, 40) 75% 72%);
}
.av.lg {
  width: 76px;
  height: 76px;
  font-size: 32px;
}
.frow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
}
.frow:first-child {
  border-top: 0;
}
.frow .t {
  flex: 1;
  min-width: 0;
}
.frow .nm {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frow .un {
  font-size: 13px;
  color: var(--muted);
}
.frow .acts {
  display: flex;
  gap: 6px;
  flex: none;
}
.prof-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 4px 0 14px;
}
.prof-h .nm {
  font-size: 22px;
  font-weight: 800;
}
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--panel2);
  color: var(--muted);
}
.lb td a.pl {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.lb td a.pl:hover {
  text-decoration: underline;
}
.vis-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-top: 8px;
  cursor: pointer;
}
.vis-opt input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.vis-opt b {
  display: block;
  font-size: 15px;
}
.vis-opt span {
  font-size: 13px;
  color: var(--muted);
}
.vis-opt:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.dot-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 0 5px;
  margin-left: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
}
/* ===== full-screen games + tall-phone tuning (e.g. 1080x2400 ≈ 412x915 CSS px) ===== */
body.ingame .nav {
  display: none;
}
body.ingame .wrap {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
#stage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100dvh - var(--navh, 0px));
}
#stage .gh {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding-top: calc(12px + env(safe-area-inset-top));
}
#gbox {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#gbox > .kb,
#gbox > .gp-ctl,
#gbox > .pad-wrap {
  margin-top: auto;
}
#gbox > .kb {
  width: 100%;
  max-width: 520px;
  align-self: center;
}
#gbox > .fv-boards,
#gbox > .gp-solved,
#gbox > .sd {
  margin-top: auto;
}
#gbox > .gp-solved:empty + .gp-grid {
  margin-top: 0;
}
#gbox > .msg {
  margin: 12px 0;
}
.fv-board {
  width: min(100%, 380px, max(190px, calc((100dvh - 410px - var(--navh, 0px)) * 0.83)));
}
.n2 .fv-board {
  width: min(calc(50% - 5px), max(140px, calc((100dvh - 400px - var(--navh, 0px)) * 0.7)));
  max-width: none;
}
.key {
  height: clamp(50px, 6.6dvh, 62px);
}
/* build 411: daily (non-live) games on desktop. Bigger keys laid out like a real keyboard, clear hover and press, and the board sized to whatever height is left */
@media (min-width: 900px) and (hover: hover) {
  #gbox > .kb {
    max-width: 620px;
    gap: 8px;
  }
  .kb .kr {
    gap: 6px;
  }
  .key {
    max-width: 54px;
    height: clamp(52px, 6.2dvh, 60px);
    border-radius: 10px;
    font-size: 17px;
    box-shadow: inset 0 -3px 0 #0003;
    cursor: pointer;
    transition:
      transform 0.08s ease-out,
      filter 0.12s ease-out;
  }
  .key.wide {
    max-width: 86px;
    flex: 1.6;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .key:hover {
    filter: brightness(1.18);
  }
  .key:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 #0003;
  }
  .key:focus-visible {
    outline: 3px solid var(--acc, #ffb938);
    outline-offset: 2px;
  }
  .kb .kr:nth-child(2) {
    padding: 0 4%;
  }
  .fv-board {
    width: min(100%, 420px, calc((100dvh - 470px) * 0.83));
  }
  .n2 .fv-board {
    width: min(calc(50% - 7px), calc((100dvh - 470px) * 0.7));
  }
  .fv-boards {
    gap: 14px;
  }
  #gbox > .msg {
    height: 24px;
    min-height: 0;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .key {
    transition: none;
  }
}
.gp-ctl {
  padding-top: 8px;
}
.pad-wrap {
  padding-top: 10px;
}
input.tx,
textarea.tx {
  font-size: 16px;
}
/* on-screen keyboard (html.kb, set from visualViewport): full-screen games shrink to the part of the screen you can see,
   and the bottom tab bar steps aside so it doesn't sit on top of the keyboard */
html.kb .nav,
html.kb body.ingame .nav {
  display: none !important;
}
html.kb dialog {
  --dlg-bot: 10px !important;
}
html.kb dialog::backdrop {
  bottom: 0 !important;
}
html.kb body.ingame #stage {
  padding-bottom: 16px;
}
html.kb :is(#cw, #tq, #gm, #lnx, #flx, #snk, #tqbook) {
  top: var(--vvt, 0px);
  bottom: auto;
  height: var(--vvh, 100%);
}
html.kb #cw .cw-say {
  display: none;
}
@media (max-width: 480px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  .top {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .top h1 {
    font-size: 23px;
  }
  .gr {
    padding: 14px;
    gap: 14px;
  }
  .gi {
    width: 50px;
    height: 50px;
    font-size: 25px;
    border-radius: 14px;
  }
  .gr .nm {
    font-size: 17px;
  }
  .gr .bl {
    font-size: 14px;
  }
  .st {
    padding: 8px 14px;
    font-size: 14px;
  }
  .hero {
    padding: 18px;
  }
  .kb {
    gap: 8px;
  }
  .kb .kr {
    gap: 5px;
  }
  .key {
    font-size: 16px;
    border-radius: 7px;
  }
  .gp-grid {
    gap: 6px;
  }
  .gp-grid button {
    aspect-ratio: auto;
    height: clamp(72px, 11dvh, 96px);
  }
  .hunt {
    width: 100%;
    gap: 4px;
  }
  .hunt div {
    font-size: clamp(17px, 5.4vw, 24px);
  }
  .sd,
  .pad,
  .tiles,
  .ops {
    width: 100%;
  }
  .pad button {
    height: clamp(54px, 7.5dvh, 68px);
    font-size: 22px;
  }
  .tiles button {
    height: clamp(62px, 9dvh, 80px);
    font-size: 26px;
  }
  .ops button {
    height: clamp(52px, 7dvh, 64px);
  }
  .opts button {
    min-height: clamp(58px, 8.5dvh, 76px);
    font-size: 16px;
  }
  .rc {
    width: 100%;
    max-width: 400px;
  }
  .tl .it {
    padding: 13px 10px 13px 14px;
  }
  .arrows button {
    width: 40px;
    height: 32px;
  }
  .btn {
    min-height: 50px;
  }
  .lb td {
    padding: 10px 4px;
  }
  .nav button {
    padding: 10px 0 12px;
  }
}

/* ===== habit pet 2.0 ===== */
.av svg,
.avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.av.pet {
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, hsl(var(--h) 85% 93%), hsl(var(--h) 55% 82%));
}
.av.xs {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.avatar .av {
  width: 40px;
  height: 40px;
  border: 0;
}
.avatar.haspet {
  background: none;
  padding: 0;
}
.coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 3px 9px;
  background: color-mix(in srgb, #ffc53d 26%, var(--panel));
  white-space: nowrap;
}
.coin.big {
  font-size: 15px;
  padding: 6px 12px;
}
.coin.pop {
  animation: coinpop 0.5s;
}
@keyframes coinpop {
  40% {
    transform: scale(1.3) rotate(-4deg);
  }
}
.coinpop {
  position: fixed;
  left: 50%;
  top: 22%;
  z-index: 60;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ffe07a, #ffb938);
  color: #3b2a00;
  font-weight: 900;
  font-size: 22px;
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 10px 30px #0003;
  pointer-events: none;
  animation: cpop 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  text-align: center;
}
.coinpop small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.8;
}
@keyframes cpop {
  0% {
    transform: translate(-50%, 20px) scale(0.4);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, 0) scale(1.1);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, 0) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -40px);
    opacity: 0;
  }
}
.shake {
  animation: shake1 0.45s;
}
.shake2 {
  animation: shake2 0.6s;
}
@keyframes shake1 {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translate(-4px, 2px);
  }
  40% {
    transform: translate(4px, -2px);
  }
  60% {
    transform: translate(-3px, 1px);
  }
  80% {
    transform: translate(2px, -1px);
  }
}
@keyframes shake2 {
  0%,
  100% {
    transform: none;
  }
  10% {
    transform: translate(-8px, 4px) rotate(-1deg);
  }
  25% {
    transform: translate(8px, -4px) rotate(1deg);
  }
  40% {
    transform: translate(-6px, 3px);
  }
  55% {
    transform: translate(6px, -2px);
  }
  75% {
    transform: translate(-3px, 1px);
  }
}
.habit {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  margin-top: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.hc-pet {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, var(--panel2)), var(--panel2));
}
.hc-body {
  flex: 1;
  min-width: 0;
}
.hc-line {
  margin-top: 3px;
}
.wkdots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.wkdots i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  background: var(--panel2);
  color: var(--muted);
}
.wkdots i.on {
  background: var(--good);
  color: #fff;
}
.wkdots i.today {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.wkdots span {
  margin-left: 6px;
}
.meters {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.meters span {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.meters i {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
  display: block;
}
.meters b {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff8fb1, #ffb938);
  transition: width 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.petspot {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.ps-pet,
.pc-pet {
  width: 70px;
  height: 70px;
  flex: none;
}
.petcard .pc-pet {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  overflow: hidden;
}
.traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trait {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel2);
  opacity: 0.75;
}
.trait.on {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel2));
  animation: popin 0.5s both;
}
.trait .ti2 {
  font-size: 22px;
}
.trait b {
  font-size: 13.5px;
}
.traits.compact .trait .muted {
  font-size: 11.5px;
}
.petfed {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.pf-pet {
  width: 64px;
  height: 64px;
  flex: none;
  position: relative;
}
.pf-pet .food {
  position: absolute;
  left: 50%;
  top: -6px;
  font-size: 22px;
  animation: foodin 1.2s 0.3s both;
  z-index: 2;
}
@keyframes foodin {
  0% {
    transform: translate(-50%, -30px) scale(0.4);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, 0) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 26px) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 30px) scale(0);
    opacity: 0;
  }
}
.learn {
  margin-top: 12px;
}
.learn-rev {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
}
.learn-rev .lh {
  display: block;
  margin-bottom: 2px;
}
/* pet tab */
#tab-pet {
  padding-top: calc(8px + env(safe-area-inset-top));
}
.pet-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 10px;
}
.pet-name {
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: none;
  border: 0;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}
.pet-top .chip {
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--panel2);
}
.pscreen {
  position: relative;
  height: min(64vh, 560px);
  min-height: 400px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(var(--sky1), var(--sky2));
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px #0000000d;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.pscreen .ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -70px;
  height: 190px;
  border-radius: 50%;
  background: var(--ground);
}
.pscreen .deco {
  position: absolute;
  font-size: 30px;
  opacity: 0.85;
  animation: drift 7s ease-in-out infinite;
  pointer-events: none;
}
.pscreen .d0 {
  left: 24%;
  top: 12%;
}
.pscreen .d1 {
  right: 24%;
  top: 20%;
  animation-delay: -2s;
  font-size: 24px;
}
.pscreen .d2 {
  left: 20%;
  bottom: 90px;
  animation-delay: -4s;
}
.pscreen .d3 {
  right: 21%;
  bottom: 104px;
  animation-delay: -1s;
  font-size: 26px;
}
@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}
.pscreen .decor {
  position: absolute;
  bottom: 34px;
  font-size: 40px;
  z-index: 1;
  filter: drop-shadow(0 4px 3px #0002);
}
.pscreen .r0 {
  left: 18%;
}
.pscreen .r1 {
  right: 18%;
}
.pscreen .r2 {
  left: 30%;
  bottom: 18px;
  font-size: 32px;
}
.pscreen .r3 {
  right: 30%;
  bottom: 18px;
  font-size: 32px;
}
.pmood {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background: #ffffffd9;
  color: #16181d;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  z-index: 3;
  white-space: nowrap;
  box-shadow: 0 2px 8px #0001;
}
.pmood span {
  font-size: 16px;
}
.walker {
  position: absolute;
  bottom: 66px;
  width: min(52%, 250px);
  transform: translateX(-50%);
  transition-property: left;
  transition-timing-function: ease-in-out;
  z-index: 2;
}
.walker .pwrap {
  aspect-ratio: 200/232;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s;
}
.walker.flip .pwrap {
  transform: scaleX(-1);
}
.walker.walking .pwrap .pb {
  animation: pwalk 0.42s ease-in-out infinite !important;
}
@keyframes pwalk {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}
.walker .shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2px;
  height: 12px;
  border-radius: 50%;
  background: #0000002a;
  z-index: -1;
}
.walker .pwrap.evolving {
  animation: evo 1.3s ease-in both;
}
@keyframes evo {
  0% {
    filter: none;
  }
  30% {
    filter: brightness(2) saturate(0);
  }
  60% {
    filter: brightness(3) saturate(0);
    transform: scale(1.1) rotate(8deg);
  }
  100% {
    filter: brightness(4) saturate(0);
    transform: scale(0.9) rotate(-360deg);
  }
}
.bubble {
  transition: opacity 0.3s;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(62vw, 250px);
  background: #fff;
  color: #16181d;
  border-radius: 16px;
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  box-shadow: 0 4px 14px #0002;
  z-index: 6;
  line-height: 1.35;
}
.bubble:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.bubble.pop {
  animation: bpop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes bpop {
  0% {
    transform: translateX(-50%) scale(0.6);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
.walker .fx {
  position: absolute;
  bottom: 60%;
  font-size: 26px;
  pointer-events: none;
  animation: floatup 1.7s ease-out both;
}
.walker .coinfx {
  font-size: 15px;
  font-weight: 900;
  color: #8a5a00;
  background: #ffe9a8;
  border-radius: 99px;
  padding: 2px 8px;
}
.walker .bub {
  font-size: 22px;
}
@keyframes floatup {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    transform: translateY(-130px) scale(0.9);
    opacity: 0;
  }
}
.walker .fly {
  position: absolute;
  left: 50%;
  top: 10%;
  font-size: 36px;
  animation: fly 0.65s ease-in both;
  pointer-events: none;
  z-index: 5;
}
@keyframes fly {
  0% {
    transform: translate(110px, -70px) rotate(-30deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 110px) scale(0.4) rotate(20deg);
    opacity: 0;
  }
}
.walker .studybook {
  position: absolute;
  right: -6%;
  top: 40%;
  font-size: 34px;
  animation: bookin 2.4s ease both;
}
@keyframes bookin {
  0% {
    transform: scale(0) rotate(-40deg);
  }
  15% {
    transform: scale(1.2) rotate(8deg);
  }
  25%,
  85% {
    transform: scale(1) rotate(0);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.toy {
  position: absolute;
  left: 0;
  top: 45%;
  font-size: 34px;
  animation: toy 1.5s ease-in-out both;
  pointer-events: none;
  z-index: 3;
}
.ballsvg {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ff6b6b 11% 45%, #e03131 70%);
  box-shadow:
    inset -4px -5px 0 #0002,
    0 3px 6px #0003;
  position: relative;
}
.ballsvg:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 46%, #fff 46% 54%, transparent 54%);
  opacity: 0.8;
}
@keyframes toy {
  0% {
    transform: translate(-40px, 80px) rotate(0);
  }
  25% {
    transform: translate(28vw, -90px) rotate(200deg);
  }
  45% {
    transform: translate(44vw, 10px) rotate(360deg);
  }
  70% {
    transform: translate(62vw, -110px) rotate(560deg);
  }
  100% {
    transform: translate(110vw, 60px) rotate(720deg);
    opacity: 0;
  }
}
.mess {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  font-size: 30px;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  animation:
    messin 0.5s both,
    wig 2.2s 1s ease-in-out infinite;
}
.mess.gone {
  animation: poof 0.4s both;
}
@keyframes messin {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes wig {
  0%,
  90%,
  100% {
    transform: rotate(0);
  }
  94% {
    transform: rotate(-12deg);
  }
  97% {
    transform: rotate(10deg);
  }
}
@keyframes poof {
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
.rail {
  position: absolute;
  top: 56px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 4;
}
.rail.left {
  left: 10px;
}
.rail.right {
  right: 10px;
}
.pact {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 0;
  background: #ffffffe6;
  color: #16181d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 3px 10px #0002;
  cursor: pointer;
  transition: transform 0.15s;
}
.pact span {
  font-size: 22px;
  line-height: 1;
}
.pact em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}
.pact:active {
  transform: scale(0.9);
}
.pact:disabled {
  opacity: 0.4;
}
.pmeters {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: #ffffffd9;
  border-radius: 16px;
  padding: 7px 9px;
  z-index: 4;
  box-shadow: 0 2px 10px #0002;
}
.pmeters div {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.pmeters span {
  font-size: 14px;
}
.pmeters i {
  flex: 1;
  height: 7px;
  border-radius: 9px;
  background: #0000001a;
  overflow: hidden;
  display: block;
}
.pmeters b {
  display: block;
  height: 100%;
  border-radius: 9px;
  transition: width 0.8s;
}
.tray {
  position: absolute;
  left: 74px;
  right: 74px;
  bottom: 62px;
  z-index: 6;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 8px 24px #0003;
  animation: bpop2 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes bpop2 {
  from {
    transform: translateY(20px) scale(0.9);
    opacity: 0;
  }
}
.trayit {
  flex: none;
  border: 0;
  background: #f3f1ec;
  color: #16181d;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  cursor: pointer;
}
.trayit small {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.trayit.x {
  font-size: 16px;
  min-width: 36px;
  justify-content: center;
}
.catchhud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #16181d;
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 14px;
  z-index: 8;
}
.pscreen.gaming .pmood {
  display: none;
}
.snack {
  position: absolute;
  top: -50px;
  z-index: 7;
  font-size: 38px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  animation: fall linear both;
}
.snack.got {
  font-size: 20px;
  font-weight: 900;
  color: #2b8a3e;
  animation: poof 0.3s both;
}
@keyframes fall {
  to {
    transform: translateY(calc(min(64vh, 560px) + 60px)) rotate(200deg);
  }
}
.pscreen.dark .deco {
  opacity: 0.95;
}
.plate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 12px;
  margin-top: 10px;
  font-size: 22px;
}
.plate .new {
  animation: popin 0.5s both;
}
.plate .btn {
  font-size: 13px;
}
.giftcard,
.invitecard {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}
.giftcard {
  background: linear-gradient(90deg, #fff1c2, #ffe0f0);
  color: #16181d;
  animation: giftwig 2.4s infinite;
}
@keyframes giftwig {
  0%,
  90%,
  100% {
    transform: none;
  }
  93% {
    transform: rotate(-1deg);
  }
  96% {
    transform: rotate(1deg);
  }
}
.ptabs {
  margin-top: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ptabs::-webkit-scrollbar {
  display: none;
}
.ptabs button {
  flex: none;
}
#ptab {
  margin-top: 6px;
}
.chips2.slots {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips2.slots button {
  flex: none;
}
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.item {
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.item.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.item.locked .ip {
  filter: grayscale(1) opacity(0.5);
}
.item .ip {
  width: 80px;
  height: 90px;
  display: grid;
  place-items: center;
}
.item .in {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  min-height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item .in small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.item .lk {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.25;
}
.item .btn {
  width: 100%;
}
.item .emo {
  font-size: 46px;
  line-height: 1;
}
.emo.eggbob,
.eggbob {
  animation: wob 2.6s ease-in-out infinite;
  display: inline-block;
}
.items.pets .ip {
  height: 80px;
}
.bgprev {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 26px;
}
.bgprev i {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -24px;
  height: 44px;
  border-radius: 50%;
}
.invrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.invit {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 14px;
  font-size: 24px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text);
}
.invit b {
  font-size: 13px;
}
.looks .lkprev {
  width: 180px;
  margin: 0 auto;
}
.lkgroup {
  margin-top: 12px;
}
.lkgroup > b {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.lkopts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lkopt {
  border: 1.5px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 12px;
  padding: 6px 9px;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.lkopt span {
  font-size: 16px;
}
.lkopt small {
  color: var(--muted);
  font-weight: 700;
}
.lkopt.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel2));
}
.looks #evolve {
  margin-top: 16px;
  width: 100%;
}
.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sw {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
}
.sw.on {
  border-color: var(--text);
  transform: scale(1.1);
}
.grouprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.grouprow div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 58px;
}
.grouprow small {
  font-size: 10.5px;
  font-weight: 700;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qrbox {
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  width: min(240px, 70vw);
  margin: 4px auto;
}
.qrbox svg {
  width: 100%;
  height: auto;
  display: block;
}
.invcode {
  font:
    900 26px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
/* companion in games */
.companion {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  padding: 0;
  flex: none;
  cursor: pointer;
  margin-right: 6px;
}
.companion svg {
  width: 44px;
  height: 44px;
}
.cbub {
  position: absolute;
  right: -4px;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: min(76vw, 280px);
  background: var(--text);
  color: var(--bg);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
  box-shadow: 0 6px 20px #0003;
  animation: bpop2 0.3s both;
  line-height: 1.35;
}
.cbub:before {
  content: '';
  position: absolute;
  right: 18px;
  top: -7px;
  border: 7px solid transparent;
  border-bottom-color: var(--text);
  border-top: 0;
}
/* notifications */
.notif {
  position: fixed;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top));
  transform: translate(-50%, -150%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px #0003;
  max-width: min(92vw, 420px);
  width: max-content;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  font-size: 14px;
}
.notif.on {
  transform: translate(-50%, 0);
}
.notif .ni {
  font-size: 24px;
}
.bell {
  position: relative;
}
.bell .dot-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  margin: 0;
}
/* profile pet showcase */
.petshow {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  height: 210px;
  margin: 10px 0 4px;
}
.petshow .psv {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 170px;
  transform: translateX(-50%);
}
.petshow .ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -60px;
  height: 110px;
  border-radius: 50%;
}
.petshow .tagl {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ffffffe0;
  color: #16181d;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12.5px;
}
.petshow .tagr {
  position: absolute;
  right: 10px;
  top: 10px;
  background: #ffffffe0;
  color: #16181d;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12.5px;
}
/* pet animations (gentle, PG) */
.petsvg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.petsvg .pb {
  transform-origin: 100px 212px;
  animation: pbob 2.6s ease-in-out infinite;
}
@keyframes pbob {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(-4px) scale(0.98, 1.03);
  }
}
.petsvg .pe {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.4s infinite;
}
@keyframes blink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
.petsvg.joyful .pb {
  animation: pdance 1.5s ease-in-out infinite;
}
@keyframes pdance {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  25% {
    transform: translateY(-7px) rotate(0);
  }
  50% {
    transform: rotate(3deg);
  }
  75% {
    transform: translateY(-7px) rotate(0);
  }
}
.petsvg.joyful .arm-l {
  transform-box: fill-box;
  transform-origin: top right;
  animation: wave 0.75s ease-in-out infinite alternate;
}
.petsvg.joyful .arm-r {
  transform-box: fill-box;
  transform-origin: top left;
  animation: wave2 0.75s ease-in-out infinite alternate;
}
@keyframes wave {
  to {
    transform: rotate(-28deg);
  }
}
@keyframes wave2 {
  to {
    transform: rotate(28deg);
  }
}
.petsvg.sad .pb,
.petsvg.sleeping .pb,
.petsvg.asleep .pb,
.petsvg.tired .pb {
  animation-duration: 4.5s;
}
.petsvg.hungry .pb {
  animation: pwant 1.2s ease-in-out infinite;
}
.petsvg.bored .pb {
  animation: psway 3s ease-in-out infinite;
}
@keyframes psway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
.petsvg.dirty .stink {
  animation: stink 1.6s ease-in-out infinite;
}
@keyframes stink {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(4px);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
@keyframes pwant {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px) scale(0.97, 1.04);
  }
  45% {
    transform: translateY(0) scale(1.04, 0.96);
  }
}
.petsvg .tear {
  animation: tear 2.4s ease-in infinite;
}
.petsvg .drool {
  animation: tear 3s ease-in infinite;
}
@keyframes tear {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(18px);
    opacity: 0;
  }
}
.petsvg .yawn {
  transform-box: fill-box;
  transform-origin: center;
  animation: yawn 3s ease-in-out infinite;
}
@keyframes yawn {
  0%,
  60%,
  100% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(1.2);
  }
}
.petsvg .zz {
  animation: zz 2.4s ease-in-out infinite;
}
.petsvg .z2 {
  animation-delay: 1.2s;
}
@keyframes zz {
  0% {
    transform: translate(0, 6px);
    opacity: 0;
  }
  40% {
    opacity: 0.7;
  }
  100% {
    transform: translate(8px, -10px);
    opacity: 0;
  }
}
.petsvg .spark,
.petsvg .glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 1.8s ease-in-out infinite;
}
.petsvg .s2 {
  animation-delay: 0.6s;
}
.petsvg .s3 {
  animation-delay: 1.2s;
}
@keyframes twinkle {
  0%,
  100% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
.petsvg.f-creepy .pe {
  animation: creep 5s infinite;
}
@keyframes creep {
  0%,
  88%,
  100% {
    transform: none;
  }
  90%,
  96% {
    transform: translateX(3px);
  }
}
.petsvg.hop .pb {
  animation: phop 0.65s cubic-bezier(0.3, 1.5, 0.5, 1) !important;
}
@keyframes phop {
  0% {
    transform: scale(1.1, 0.88);
  }
  40% {
    transform: translateY(-34px) scale(0.93, 1.08);
  }
  75% {
    transform: translateY(0) scale(1.08, 0.92);
  }
  100% {
    transform: none;
  }
}
.petsvg.hug .pb {
  animation: phug 0.9s ease-in-out !important;
}
@keyframes phug {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: scale(1.12, 0.9);
  }
  60% {
    transform: scale(0.95, 1.06) rotate(-4deg);
  }
}
.petsvg.twirl .pb {
  animation: ptwirl 0.8s ease-in-out !important;
}
@keyframes ptwirl {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-16px) scaleX(-1);
  }
  100% {
    transform: none;
  }
}
.petsvg.wiggle2 .pb {
  animation: pwig 0.8s ease-in-out !important;
}
@keyframes pwig {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(4deg);
  }
}
.petsvg.read .pb {
  animation: pread 1.4s ease-in-out !important;
}
@keyframes pread {
  0%,
  100% {
    transform: none;
  }
  20%,
  80% {
    transform: rotate(-6deg) translateY(4px);
  }
  50% {
    transform: rotate(6deg) translateY(4px);
  }
}
.petsvg.evolve .pb {
  animation: pevo 1.2s cubic-bezier(0.3, 1.4, 0.5, 1) !important;
}
@keyframes pevo {
  0% {
    transform: scale(0.3) rotate(-180deg);
    filter: brightness(3);
  }
  60% {
    transform: scale(1.15) rotate(10deg);
    filter: brightness(1.4);
  }
  100% {
    transform: none;
    filter: none;
  }
}
.petsvg.munch .pm {
  transform-box: fill-box;
  transform-origin: center;
  animation: chomp 0.18s 5 alternate;
}
.petsvg.munch .pb {
  animation: pmunch 0.9s ease-in-out !important;
}
@keyframes chomp {
  to {
    transform: scale(1.4, 0.35);
  }
}
@keyframes pmunch {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale(1.06, 0.95);
  }
}
.pf-pet .petsvg.munch .pm {
  animation: chomp 0.18s 1.2s 6 alternate;
}
.egg {
  transform-origin: 100px 202px;
  animation: wob 3.2s ease-in-out infinite;
}
@keyframes wob {
  0%,
  78%,
  100% {
    transform: rotate(0);
  }
  82% {
    transform: rotate(-7deg);
  }
  86% {
    transform: rotate(6deg);
  }
  90% {
    transform: rotate(-4deg);
  }
  94% {
    transform: rotate(2deg);
  }
}
.egg .crack {
  opacity: 0;
}
.petsvg.hatching .egg {
  animation: eshake 0.22s linear infinite;
}
.petsvg.hatching .crack {
  opacity: 1;
  transition: opacity 0.4s;
}
@keyframes eshake {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
.petsvg.wiggle .egg {
  animation: eshake 0.2s 3;
}
.avatar .petsvg .pb {
  animation: pbob 3s ease-in-out infinite;
}
.frow .petsvg *,
.lr .petsvg *,
.ti .petsvg *,
.act .petsvg *,
.item .petsvg *,
.grouprow .petsvg * {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .petsvg *,
  .petsvg,
  .egg,
  .walker .fx,
  .walker .fly,
  .toy,
  .pf-pet .food,
  .deco,
  .mess,
  .giftcard,
  .eggbob,
  .coinpop {
    animation: none !important;
  }
  .walker {
    transition: none !important;
  }
}

/* cleaner pet UI */
.pet-top {
  align-items: flex-start;
  padding: 12px 2px 12px;
}
.pet-name {
  font-size: 24px;
  line-height: 1.1;
}
.pet-sub {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 3px;
  flex-wrap: wrap;
}
.pet-sub span {
  white-space: nowrap;
}
.pet-sub .pmood {
  position: static;
  transform: none;
  background: none;
  box-shadow: none;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}
.pet-sub .pmood:before {
  content: '·';
  margin-right: 8px;
}
.pscreen {
  border-radius: 26px;
  box-shadow: 0 10px 30px #0000001a;
}
.pscreen .deco {
  opacity: 0.55;
  font-size: 24px;
}
.pscreen .d1,
.pscreen .d3 {
  font-size: 20px;
}
.rail {
  top: 50%;
  transform: translateY(-62%);
  gap: 10px;
}
.rail.left {
  left: 10px;
}
.rail.right {
  right: 10px;
}
.pact {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffffb3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px #00000014;
  border: 1px solid #ffffff80;
  position: relative;
}
.pact span {
  font-size: 21px;
}
.pact em {
  display: none;
}
.pact:hover em,
.pact:focus-visible em {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #16181d;
  color: #fff;
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.rail.left .pact:hover em,
.rail.left .pact:focus-visible em {
  left: 54px;
}
.rail.right .pact:hover em,
.rail.right .pact:focus-visible em {
  right: 54px;
}
.pscreen.dark .pact {
  background: #ffffff26;
  border-color: #ffffff33;
}
.pmeters {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(88%, 360px);
  bottom: 12px;
  gap: 8px;
  background: #ffffffa6;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: none;
  border: 1px solid #ffffff80;
}
.pmeters span {
  font-size: 12px;
}
.pmeters i {
  height: 5px;
}
.pscreen.dark .pmeters {
  background: #ffffff26;
  border-color: #ffffff33;
}
.walker {
  bottom: 58px;
}
.plate {
  justify-content: space-between;
  border-radius: 16px;
  padding: 8px 8px 8px 14px;
  font-size: 20px;
  gap: 8px;
}
.pl-food {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.pl-food .muted {
  margin-right: 4px;
}
.ptabs {
  margin-top: 16px;
}
.hintn {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 2px;
}
.hintn2 {
  display: block;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
}

/* Pawtopia */
.plaza-hero {
  background: linear-gradient(135deg, #ffe3f1, #e3f0ff 55%, #e8ffe6);
  color: #16181d;
  text-align: center;
  border: 0;
}
.plaza-hero .muted {
  color: #16181d99;
}
.ph-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
}
.plaza {
  margin-top: 12px;
}
.pz-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pz-h b {
  font-size: 16px;
}
.wheelwrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 6px auto 14px;
}
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  border: 6px solid #ffb938;
  box-shadow:
    0 6px 18px #0002,
    inset 0 0 0 4px #fff;
  background: conic-gradient(
    #ffd6e8 0 45deg,
    #d6f0ff 45deg 90deg,
    #fff1c2 90deg 135deg,
    #dcfce7 135deg 180deg,
    #ffd6e8 180deg 225deg,
    #d6f0ff 225deg 270deg,
    #fff1c2 270deg 315deg,
    #dcfce7 315deg 360deg
  );
  transition: transform 4s cubic-bezier(0.15, 0.8, 0.2, 1);
}
.wheel span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 26px;
  transform: rotate(calc(var(--i) * var(--seg) + var(--seg) / 2)) translateY(-78px)
    rotate(calc(-1 * (var(--i) * var(--seg) + var(--seg) / 2)));
  margin: -16px 0 0 -14px;
}
.wheelptr {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  font-size: 26px;
  color: #e03131;
  text-shadow: 0 2px 4px #0003;
}
.pond {
  position: relative;
  height: 120px;
  border-radius: 50%/40%;
  background: radial-gradient(ellipse at 50% 40%, #8fd8ff, #3a9bd9);
  margin: 6px 0 12px;
  overflow: hidden;
  box-shadow: inset 0 -8px 20px #0002;
}
.pond .bob {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 22px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.pond.casting .bob {
  opacity: 1;
  animation: bobf 1.2s ease-in-out infinite;
}
.pond.bite .bob {
  animation: bite 0.25s 4;
}
@keyframes bobf {
  50% {
    transform: translate(-50%, -40%);
  }
}
@keyframes bite {
  50% {
    transform: translate(-50%, -10%);
  }
}
.pond .ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 14px;
  border: 2px solid #ffffff99;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.pond.casting .ripple {
  animation: ripple 1.6s ease-out infinite;
}
@keyframes ripple {
  0% {
    opacity: 0.9;
    width: 20px;
    height: 7px;
  }
  100% {
    opacity: 0;
    width: 140px;
    height: 44px;
  }
}
.pond .lily {
  position: absolute;
  font-size: 22px;
}
.pond .l1 {
  left: 14%;
  top: 30%;
}
.pond .l2 {
  right: 16%;
  top: 56%;
}
.pond .catch {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 48px;
  transform: translate(-50%, -50%);
  animation: catchup 1.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes catchup {
  0% {
    transform: translate(-50%, 40%) scale(0.3) rotate(-40deg);
  }
  60% {
    transform: translate(-50%, -80%) scale(1.3) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.statusgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.statusgrid div {
  background: var(--panel2);
  border-radius: 12px;
  padding: 8px 10px;
}
.statusgrid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.statusgrid b {
  font-size: 14px;
}
.keeper {
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 12px;
  margin: 10px 0 4px;
}
.kface {
  font-size: 40px;
  animation: drift 3s ease-in-out infinite;
  display: inline-block;
}
.ksay {
  font-size: 13.5px;
  margin-top: 2px;
}
.tag2.bot {
  font-size: 10px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  background: #e7e9ee;
  color: #555;
  margin-left: 4px;
}

/* hatching, brain x pet, tighter pet screen */
.walker .bubble {
  bottom: calc(var(--pt, 0.8) * 100% + 10px);
}
.walker .pwrap.tapme {
  animation: tapme 1.4s ease-in-out infinite;
  cursor: pointer;
}
@keyframes tapme {
  0%,
  100% {
    filter: drop-shadow(0 0 0 #ffd23f00);
  }
  50% {
    filter: drop-shadow(0 0 18px #ffd23f);
  }
}
.petsvg.readyegg .egg {
  animation: wob 2.4s ease-in-out infinite;
}
.petsvg.crackhit .egg {
  animation: crackhit 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) !important;
}
@keyframes crackhit {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.08, 0.9) rotate(-8deg);
  }
  55% {
    transform: scale(0.96, 1.05) rotate(7deg);
  }
  100% {
    transform: none;
  }
}
.petsvg.eggbuild .egg {
  animation: eggbuild 2s ease-in both !important;
}
@keyframes eggbuild {
  0% {
    transform: none;
    filter: none;
  }
  40% {
    transform: rotate(-6deg) scale(1.03);
    filter: brightness(1.2);
  }
  60% {
    transform: rotate(6deg) scale(1.06);
  }
  80% {
    transform: rotate(-8deg) scale(1.1);
    filter: brightness(1.7) drop-shadow(0 0 20px #fff6a8);
  }
  100% {
    transform: scale(1.25);
    filter: brightness(3) drop-shadow(0 0 40px #fff);
  }
}
.eggglow {
  animation: twinkle 1s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.pscreen.flash:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, #fff, #fff8 40%, transparent 75%);
  z-index: 9;
  animation: flash 0.9s ease-out both;
  pointer-events: none;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.shellbit {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 34px;
  height: 34px;
  z-index: 8;
  pointer-events: none;
  animation: shell 1.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.shellbit svg {
  width: 100%;
  height: 100%;
}
@keyframes shell {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 180px)) rotate(var(--r));
    opacity: 0;
  }
}
.walker .shell {
  font-size: 22px;
}
.walker.bigbrain .pwrap {
  filter: drop-shadow(0 0 14px #ffe066aa);
}
.walker.bigbrain:before {
  content: '💡';
  position: absolute;
  left: 62%;
  top: calc((1 - var(--pt, 0.8)) * 100% - 10px);
  font-size: 22px;
  animation: idea 3s ease-in-out infinite;
  z-index: 3;
}
@keyframes idea {
  0%,
  100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
}
.brainpet {
  background: linear-gradient(135deg, color-mix(in srgb, #b197fc 18%, var(--panel)), var(--panel));
}
.bpscore {
  font-weight: 900;
  font-size: 22px;
  background: linear-gradient(90deg, #9775fa, #f783ac);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bpbars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 74px;
  margin: 10px 0 8px;
}
.bpbars div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.bpbars i {
  display: block;
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 3px 3px;
  background: #b197fc;
  min-height: 4px;
}
.bpbars small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}
.bpline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--panel2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.bpline svg {
  width: 42px;
  height: 42px;
  flex: none;
}
.act.bot {
}
/* tighter pet screen */
.pet-top {
  padding: 8px 2px 8px;
}
.pet-name {
  font-size: 22px;
}
.pet-sub {
  margin-top: 2px;
  font-size: 12.5px;
}
.pscreen {
  height: min(58vh, 500px);
  min-height: 360px;
  border-radius: 24px;
}
.rail {
  gap: 8px;
}
.rail.left {
  left: 8px;
}
.rail.right {
  right: 8px;
}
.pact {
  width: 42px;
  height: 42px;
}
.pact span {
  font-size: 19px;
}
.pmeters {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 5px 12px;
  bottom: 10px;
  width: min(90%, 380px);
}
.pmeters span {
  font-size: 11px;
}
.pmeters i {
  height: 4px;
}
.walker {
  bottom: 48px;
  width: min(48%, 230px);
}
.pscreen .ground {
  height: 150px;
  bottom: -62px;
}
.plate {
  margin-top: 8px;
  padding: 6px 6px 6px 12px;
  font-size: 18px;
}
.ptabs {
  margin-top: 10px;
}
.ptabs button {
  padding: 6px 11px;
  font-size: 13px;
}
#ptab .card {
  padding: 14px;
}
.bubble {
  padding: 8px 12px;
  font-size: 13.5px;
}

/* capsule machine */
.gacha {
  background: linear-gradient(160deg, color-mix(in srgb, #ffd43b 14%, var(--panel)), var(--panel));
}
.machine {
  position: relative;
  width: 170px;
  height: 210px;
  margin: 6px auto 0;
}
.dome {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 0;
  height: 130px;
  border-radius: 50% 50% 12px 12px;
  background: radial-gradient(circle at 35% 30%, #ffffffcc, #dff3ff66 40%, #a5d8ff55);
  border: 4px solid #e9ecef;
  overflow: hidden;
  box-shadow: inset 0 -10px 20px #0001;
}
.dome i {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: calc(8px + (var(--i) * 13%));
  bottom: calc(6px + (var(--i) % 3) * 22px);
  box-shadow:
    inset -4px -4px 0 #0002,
    inset 3px 3px 0 #fff6;
}
.machine.crank .dome i {
  animation: jiggle 0.25s ease-in-out 5 alternate;
}
@keyframes jiggle {
  from {
    transform: translate(-3px, 2px);
  }
  to {
    transform: translate(3px, -4px) rotate(20deg);
  }
}
.mbody {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 124px;
  height: 80px;
  border-radius: 14px;
  background: linear-gradient(#ff6b6b, #e03131);
  box-shadow: inset 0 -6px 0 #0002;
}
.mbody .slot {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 46px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: #2b2d42;
}
.mbody .knob {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 26px;
  transition: transform 0.8s;
}
.machine.crank .knob {
  transform: rotate(540deg);
}
.capsule {
  position: absolute;
  left: 50%;
  top: 170px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(var(--rc, #8ce99a) 50%, #fff 50%);
  border: 2px solid #0002;
}
.capsule.drop {
  animation: capdrop 0.7s 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.capsule.open {
  animation: capopen 0.6s both;
  box-shadow: 0 0 0 0 var(--rc);
}
@keyframes capdrop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes capopen {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    transform: scale(1.6);
    box-shadow: 0 0 40px 20px var(--rc);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
.capgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.capgrid.ten {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.capres {
  border-radius: 16px;
  border: 2px solid var(--rc);
  background: color-mix(in srgb, var(--rc) 16%, var(--panel));
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: popin 0.5s both;
}
.capres .ip {
  width: 84px;
  height: 92px;
  display: grid;
  place-items: center;
}
.capres .emo {
  font-size: 44px;
}
.capres b {
  font-size: 13px;
}
.capres small {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.capres.r-legendary {
  animation:
    popin 0.5s both,
    legend 1.6s ease-in-out infinite;
}
.capres.r-epic {
  box-shadow: 0 0 16px var(--rc);
}
@keyframes legend {
  50% {
    box-shadow: 0 0 26px var(--rc);
  }
}
.capgrid:not(.ten) .capres .ip {
  width: 130px;
  height: 150px;
}
.capcol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.capcol span {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1.5px dashed var(--line);
  color: var(--muted);
}
.capcol span.got {
  border: 1.5px solid var(--rc);
  color: var(--text);
  background: color-mix(in srgb, var(--rc) 14%, var(--panel));
}

/* softer, less-white pet page */
#tab-pet .plate {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  margin-top: 6px;
}
#tab-pet .giftcard {
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: none;
  border: 0;
}
#tab-pet .ptabs button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#tab-pet .ptabs button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: transparent;
  color: var(--text);
}
#tab-pet .chips2.slots button {
  background: transparent;
}
#tab-pet .chips2.slots button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: transparent;
}
#ptab .card {
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
  box-shadow: none;
  border-color: transparent;
}
#ptab .item {
  background: color-mix(in srgb, var(--panel2) 80%, transparent);
  border-color: transparent;
}
#ptab .item.on {
  border-color: var(--accent);
}
#ptab .plaza-hero {
  background: linear-gradient(135deg, #ffe3f166, #e3f0ff66 55%, #e8ffe666);
  border: 0;
}
#ptab .keeper {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: transparent;
}
#ptab .statusgrid div,
#ptab .trait {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.pact {
  background: #ffffff73;
  border-color: #ffffff59;
}
.pmeters {
  background: #ffffff66;
  border-color: #ffffff4d;
}
.pscreen .bubble,
.walker .bubble {
  background: #fffffff2;
}

.archbar {
  background: color-mix(in srgb, #b197fc 22%, var(--panel));
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: 0 0 12px 12px;
  margin: 0 -2px;
}
.archdays {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.archdays::-webkit-scrollbar {
  display: none;
}
.archdays button {
  flex: none;
  width: 48px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 5px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--text);
  cursor: pointer;
}
.archdays button small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}
.archdays button b {
  font-size: 16px;
}
.archdays button i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--good);
}
.archdays button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.archgames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ag {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text);
  cursor: pointer;
}
.ag span {
  font-size: 22px;
}
.ag b {
  font-size: 12px;
}
.ag small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.ag.done {
  background: color-mix(in srgb, var(--good) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
}

/* rarity + birthday */
.rankstar {
  font-size: 14px;
  color: var(--rc);
  -webkit-text-stroke: 0.3px #0003;
  letter-spacing: -0.5px;
}
.walker.ranked .pwrap {
  filter: drop-shadow(0 0 10px var(--rc));
}
.walker.ranked .shadow {
  background: radial-gradient(color-mix(in srgb, var(--rc) 50%, transparent), transparent 70%);
}
.walker.cosmic .pwrap {
  animation: cosmic 4s linear infinite;
}
@keyframes cosmic {
  0% {
    filter: drop-shadow(0 0 12px #63e6be) hue-rotate(0);
  }
  50% {
    filter: drop-shadow(0 0 20px #b197fc);
  }
  100% {
    filter: drop-shadow(0 0 12px #63e6be);
  }
}
.walker.bigbrain.ranked .pwrap {
  filter: drop-shadow(0 0 10px var(--rc)) drop-shadow(0 0 14px #ffe066aa);
}
.rankcard {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rc) 16%, transparent),
    color-mix(in srgb, var(--nc) 16%, transparent)
  ) !important;
  margin-bottom: 12px;
}
.rankrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 12px 0;
}
.rk {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
}
.rk small {
  display: block;
  font-size: 12px;
  font-weight: 800;
}
.av.pet.rk {
  box-shadow: 0 0 0 2px var(--rc);
}

/* personality, quests, report, trades */
.walker .pe circle {
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform 0.18s ease-out;
}
.walker .thought {
  position: absolute;
  left: 58%;
  top: calc((1 - var(--pt, 0.8)) * 100% - 26px);
  font-size: 22px;
  background: #ffffffd9;
  border-radius: 18px;
  padding: 2px 8px;
  z-index: 5;
  animation: think 3.2s ease-in-out both;
}
@keyframes think {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.6);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
.quests .quest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 14px;
}
.quests .quest:first-of-type {
  border-top: 0;
}
.quest .qi {
  font-size: 20px;
  width: 26px;
  text-align: center;
}
.quest.got {
  opacity: 0.6;
}
.quest.ok:not(.got) .qi {
  animation: drift 2s ease-in-out infinite;
}
.weekly {
  margin-bottom: 12px;
}
.wkgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.wkgrid div {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
}
.wkgrid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wkgrid b {
  font-size: 16px;
}
.wkgrid em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
}
.wkgrid em.up {
  color: var(--good);
}
.wkgrid em.down {
  color: var(--bad);
}
.trade {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.trade .ip {
  width: 58px;
  height: 58px;
  flex: none;
}

.limited {
  background: linear-gradient(90deg, #fff3bf, #ffe3ec);
  color: #16181d;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 6px;
  animation: giftwig 3s infinite;
}
.limited .muted {
  color: #16181d99;
}

.pact.cd {
  position: relative;
  overflow: hidden;
}
.pact.cd:after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0000002e;
  transform-origin: bottom;
  animation: cdfill var(--cd, 10s) linear forwards;
  border-radius: inherit;
}
@keyframes cdfill {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
.shinytag {
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(90deg, #ff8cc6, #ffd43b, #69db7c, #4dabf7, #b197fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  vertical-align: middle;
}
.petsvg .shinyfx {
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.55;
  }
}

.buddy {
  position: fixed;
  right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 9;
  cursor: pointer;
  animation: buddyin 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.buddy svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 5px 6px #0003);
  transform-origin: 50% 90%;
  animation: bbreathe 2.6s ease-in-out infinite;
}
.buddy .bshadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -2px;
  height: 7px;
  border-radius: 50%;
  background: #0002;
  filter: blur(2px);
  animation: bshad 2.6s ease-in-out infinite;
}
@keyframes bbreathe {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(-3px) scale(1.03, 0.97);
  }
}
@keyframes bshad {
  50% {
    transform: scaleX(0.85);
    opacity: 0.7;
  }
}
.buddy.b-hop svg {
  animation: bhop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes bhop {
  0%,
  100% {
    transform: none;
  }
  35% {
    transform: translateY(-22px) scale(0.95, 1.08);
  }
  70% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}
.buddy.b-wiggle svg {
  animation: bwig 0.8s ease-in-out;
}
@keyframes bwig {
  20%,
  60% {
    transform: rotate(-12deg);
  }
  40%,
  80% {
    transform: rotate(12deg);
  }
}
.buddy.b-spin svg {
  animation: bspin 0.9s cubic-bezier(0.5, 0, 0.3, 1);
}
@keyframes bspin {
  to {
    transform: rotate(360deg);
  }
}
.buddy.b-peek svg {
  animation: bpeek 1.6s ease-in-out;
}
@keyframes bpeek {
  30%,
  70% {
    transform: translateX(-10px) rotate(-10deg);
  }
}
.buddy.b-flip svg {
  animation: bflip 1s ease-in-out;
}
@keyframes bflip {
  50% {
    transform: translateY(-26px) rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.buddy.b-squish svg {
  animation: bsq 0.6s ease;
}
@keyframes bsq {
  40% {
    transform: scale(1.25, 0.7);
  }
  70% {
    transform: scale(0.9, 1.12);
  }
}
.buddy.b-dance svg {
  animation: bdance 1.4s ease-in-out;
}
@keyframes bdance {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: rotate(-10deg) translateY(-6px);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg) translateY(-6px);
  }
}
.buddy.b-sleep svg {
  animation: bbreathe 4s ease-in-out infinite;
  filter: drop-shadow(0 5px 6px #0003) saturate(0.8);
}
.buddy .bz {
  position: absolute;
  right: -2px;
  top: -6px;
  font-size: 14px;
  animation: bz 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bz {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.6);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(8px, -14px) scale(1.1);
  }
}
.buddy .bfx {
  position: absolute;
  left: 50%;
  top: 10%;
  font-size: 16px;
  pointer-events: none;
  animation: bfx 1.4s ease-out forwards;
}
@keyframes bfx {
  to {
    transform: translate(var(--dx), -50px) scale(1.2);
    opacity: 0;
  }
}
.buddy.walking {
  transition: right 2.4s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .buddy svg,
  .buddy .bshadow {
    animation: none !important;
  }
}
@keyframes buddyin {
  from {
    transform: translateY(80px) scale(0.5);
  }
}
.bbub {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(72vw, 260px);
  background: var(--text);
  color: var(--bg);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
  box-shadow: 0 6px 20px #0003;
  animation: bpop2 0.3s both;
  line-height: 1.35;
}
.bbub:after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -7px;
  border: 7px solid transparent;
  border-top-color: var(--text);
  border-bottom: 0;
}
body.ingame .buddy {
  display: none;
}

/* ===== desktop & large screens ===== */
@media (min-width: 960px) {
  .nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 210px;
    border-top: 0;
    border-right: 1px solid var(--line);
    padding: 28px 0 0;
  }
  .nav .in {
    flex-direction: column;
    max-width: none;
    gap: 4px;
    padding: 0 12px;
  }
  .nav button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 15.5px;
    position: relative;
  }
  .nav button svg {
    width: 22px;
    height: 22px;
  }
  .nav button[aria-selected='true'] {
    background: var(--panel2);
  }
  .nav button[aria-selected='true']:after {
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 4px;
    margin: 0;
    border-radius: 4px;
  }
  .wrap {
    max-width: 820px;
    margin-left: max(226px, calc((100vw - 820px) / 2 + 105px));
    margin-right: auto;
    padding-bottom: 48px;
  }
  body.ingame .wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  .pscreen {
    height: min(64vh, 620px);
  }
  .walker {
    width: min(40%, 260px);
  }
  .pact {
    width: 48px;
    height: 48px;
  }
  .pact span {
    font-size: 22px;
  }
  .buddy {
    bottom: 28px;
    right: 28px;
    width: 78px;
    height: 78px;
  }
  .buddy svg {
    width: 78px;
    height: 78px;
  }
  .items {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  }
  .d5grid {
    gap: 10px;
  }
  dialog {
    width: min(520px, calc(100% - 32px));
  }
  .notif {
    top: 18px;
  }
}
@media (min-width: 1280px) {
  .wrap {
    max-width: 900px;
    margin-left: max(236px, calc((100vw - 900px) / 2 + 105px));
  }
}
@media (min-width: 1600px) {
  html {
    zoom: 1.12;
  }
}
@media (min-width: 2200px) {
  html {
    zoom: 1.3;
  }
}

/* pet fonts: rounded UI font on the pet page, each personality speaks in its own legible font */
#tab-pet {
  font-family:
    'Fredoka',
    'Nunito',
    ui-rounded,
    'SF Pro Rounded',
    'Segoe UI',
    system-ui,
    -apple-system,
    Roboto,
    Arial,
    sans-serif;
}
#tab-pet .pet-name,
#tab-pet .ph-title {
  font-family: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
#tab-pet input,
#tab-pet select,
#tab-pet button {
  font-family: inherit;
}
.walker .bubble,
.cbub,
.bbub {
  font-family: var(--pf, system-ui, sans-serif);
  font-weight: var(--pfw, 600);
  font-size: calc(15px * var(--pfs, 1));
  line-height: 1.38;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.walker .bubble b,
.cbub b,
.bbub b {
  font-weight: 800;
}
.hintn,
.hintn2 {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
}
@media (prefers-contrast: more) {
  .walker .bubble,
  .cbub,
  .bbub {
    font-family:
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      Arial,
      sans-serif;
    font-weight: 700;
  }
}

.mailrow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.mailrow:first-child {
  border-top: 0;
}
.mailrow .mico {
  font-size: 28px;
}
.mailrow:not(.done) .mico {
  animation: giftwig 1.8s infinite;
  display: inline-block;
}
.mailrow.done {
  opacity: 0.7;
}
.mailrow.opening .mico {
  animation: crackhit 0.35s 2;
}
.community {
  margin-top: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #63e6be 14%, var(--panel)),
    color-mix(in srgb, #74c0fc 14%, var(--panel))
  );
}
.cbar {
  position: relative;
  height: 22px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
  margin: 10px 0 6px;
}
.cbar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #63e6be, #4dabf7);
  transition: width 1s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.cbar span {
  position: relative;
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
}
.potd {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  cursor: pointer;
}
.potd .pv {
  width: 48px;
  height: 48px;
  flex: none;
}
.brandbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.brandbtn:hover .logo {
  transform: rotate(-8deg) scale(1.06);
}
.brandbtn .logo {
  transition: transform 0.25s;
}

.ab-hero {
  text-align: center;
  position: relative;
  padding: 4px 0 10px;
}
.ab-logo {
  background: linear-gradient(135deg, #ffc53d, #ff922b);
  color: #16181d;
  font-weight: 900;
  width: 64px;
  height: 64px;
  font-size: 34px;
  border-radius: 18px;
  display: inline-grid;
  place-items: center;
  animation: abbob 3s ease-in-out infinite;
  box-shadow: 0 10px 24px #ffb93866;
}
@keyframes abbob {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}
.ab-pet {
  position: absolute;
  right: 18%;
  top: 18px;
  width: 56px;
  height: 56px;
  animation: abbob 2.4s ease-in-out infinite reverse;
}
.ab-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.ab-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.ab-feats div {
  background: var(--panel2);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: popin 0.45s both;
}
.ab-feats div:nth-child(2) {
  animation-delay: 0.05s;
}
.ab-feats div:nth-child(3) {
  animation-delay: 0.1s;
}
.ab-feats div:nth-child(4) {
  animation-delay: 0.15s;
}
.ab-feats div:nth-child(5) {
  animation-delay: 0.2s;
}
.ab-feats div:nth-child(6) {
  animation-delay: 0.25s;
}
.ab-feats span {
  font-size: 22px;
}
.ab-feats b {
  font-size: 14px;
}
.ab-feats small {
  font-size: 12px;
  color: var(--muted);
}
.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.ab-stats div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
.ab-stats b {
  display: block;
  font-size: 20px;
}
.ab-stats small {
  color: var(--muted);
  font-size: 12px;
}
.ab-coffee {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  padding: 14px !important;
  font-size: 17px !important;
}
.ab-coffee small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 2px;
}
.jarwrap {
  border-radius: 18px;
  overflow: hidden;
  max-width: min(360px, max(150px, calc(100dvh - var(--navh, 0px) - 440px)));
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px var(--line);
}
.jarsvg {
  width: 100%;
  height: auto;
  display: block;
}

/* favorites */
.favbtn {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  transition: transform 0.2s;
}
.favbtn.on {
  color: #f5b301;
  animation: favpop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.favbtn:hover {
  transform: scale(1.15);
}
@keyframes favpop {
  50% {
    transform: scale(1.45) rotate(-12deg);
  }
}
.gr .favbtn {
  margin-left: auto;
  margin-right: 2px;
}
.favrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.favrow::-webkit-scrollbar {
  display: none;
}
.favchip {
  flex: none;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  padding: 10px 8px;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.favchip:active {
  transform: scale(0.96);
}
.favchip .fi {
  font-size: 24px;
}
.favchip b {
  font-size: 12.5px;
  text-align: center;
}
.favchip small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.favchip.done {
  background: color-mix(in srgb, var(--good) 10%, var(--panel));
}
/* speech bubble styles */
.walker[data-bs='cloud'] .bubble {
  border-radius: 28px;
  box-shadow:
    0 0 0 4px #fff,
    0 6px 16px #0002;
}
.walker[data-bs='comic'] .bubble {
  border: 3px solid #16181d;
  border-radius: 6px;
  box-shadow: 4px 4px 0 #16181d;
  font-weight: 800;
}
.walker[data-bs='neon'] .bubble {
  background: #12122a;
  color: #9ff;
  border: 2px solid #0ff;
  box-shadow: 0 0 14px #0ff8;
}
.walker[data-bs='neon'] .bubble:after {
  border-top-color: #0ff;
}
.walker[data-bs='parchment'] .bubble {
  background: #f4e4bc;
  color: #4a3520;
  border: 1px solid #c9a86a;
}
.walker[data-bs='parchment'] .bubble:after {
  border-top-color: #f4e4bc;
}
.walker[data-bs='candy'] .bubble {
  background: linear-gradient(135deg, #ffd6e8, #fff0f7);
  border: 2px solid #ff9ccf;
}
.walker[data-bs='candy'] .bubble:after {
  border-top-color: #ff9ccf;
}
.walker[data-bs='galaxy'] .bubble {
  background: linear-gradient(135deg, #2b1a5e, #0b0b2a);
  color: #fff;
  box-shadow: 0 0 16px #b197fc88;
}
.walker[data-bs='galaxy'] .bubble:after {
  border-top-color: #2b1a5e;
}
.walker[data-bs='pixel'] .bubble {
  border-radius: 0;
  border: 3px solid #16181d;
  font-family: 'Space Grotesk', monospace;
  box-shadow:
    0 0 0 3px #fff,
    6px 6px 0 #0003;
}
.bubprev {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 12px;
  background: #fff;
  color: #16181d;
  box-shadow: 0 2px 6px #0002;
}
.bubprev.bs-cloud {
  border-radius: 20px;
  box-shadow:
    0 0 0 3px #fff,
    0 2px 6px #0002;
}
.bubprev.bs-comic {
  border: 2px solid #16181d;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #16181d;
}
.bubprev.bs-neon {
  background: #12122a;
  color: #9ff;
  border: 1.5px solid #0ff;
}
.bubprev.bs-parchment {
  background: #f4e4bc;
  color: #4a3520;
}
.bubprev.bs-candy {
  background: #ffd6e8;
  border: 1.5px solid #ff9ccf;
}
.bubprev.bs-galaxy {
  background: #2b1a5e;
  color: #fff;
}
.bubprev.bs-pixel {
  border: 2px solid #16181d;
  border-radius: 0;
}
.trailfx {
  position: absolute;
  z-index: 1;
  font-size: 16px;
  pointer-events: none;
  animation: trail 1.4s ease-out both;
}
@keyframes trail {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.1);
  }
}
.pscreen .r4 {
  left: 6%;
  bottom: 60px;
  font-size: 30px;
}
.pscreen .r5 {
  right: 6%;
  bottom: 60px;
  font-size: 30px;
}
.decoritems {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.dnabox {
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #63e6be 18%, transparent),
    color-mix(in srgb, #b197fc 18%, transparent)
  );
}
/* 7-day login track */
.ltrack {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.ltrack div {
  border-radius: 10px;
  background: #ffffff99;
  padding: 4px 2px;
  text-align: center;
  line-height: 1.15;
  border: 1.5px solid transparent;
}
.ltrack small {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  opacity: 0.7;
}
.ltrack b {
  font-size: 15px;
}
.ltrack span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
}
.ltrack .got {
  opacity: 0.5;
}
.ltrack .now {
  border-color: #f59f00;
  background: #fff;
  animation: giftwig 1.4s infinite;
}
/* smoother transitions & menus */
main > section:not([hidden]) {
  animation: tabin 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes tabin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
dialog[open] {
  animation: dlgin 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) both;
}
dialog::backdrop {
  background: #0006;
  animation: fadein 0.25s both;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@keyframes dlgin {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}
#ptab > * {
  animation: tabin 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.btn,
.chips2 button,
.iconbtn,
.pact,
.item,
.lkopt {
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:active,
.chips2 button:active,
.iconbtn:active,
.lkopt:active {
  transform: scale(0.96);
}
#tab-pet .ptabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 8px 0;
  margin-left: -4px;
  margin-right: -4px;
}
.nav button {
  transition: color 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  main > section,
  dialog[open],
  #ptab > *,
  .trailfx {
    animation: none !important;
  }
}

/* flip luck */
.fliprounds {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0;
}
.fliprounds span {
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 99px;
  padding: 4px 10px;
  background: var(--panel2);
}
.fliprounds .cur {
  background: var(--accent);
  color: var(--accent-ink);
}
.flipcards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 86px;
  align-items: center;
  margin: 10px 0;
}
.fc {
  width: 52px;
  height: 74px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(160deg, #fff, #f1f3f5);
  color: #16181d;
  box-shadow:
    0 3px 8px #0002,
    inset 0 0 0 2px #dee2e6;
}
.fc.bonus {
  background: linear-gradient(160deg, #fff3bf, #ffe066);
}
.fc.x2 {
  background: linear-gradient(160deg, #d0bfff, #b197fc);
}
.fc.luck {
  background: linear-gradient(160deg, #d3f9d8, #8ce99a);
}
.fc.new {
  animation: cardflip 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes cardflip {
  from {
    transform: rotateY(90deg) scale(0.8);
  }
  to {
    transform: none;
  }
}
.fc.dup {
  background: linear-gradient(160deg, #ffc9c9, #ff8787);
  animation:
    cardflip 0.45s,
    shake1 0.5s 0.45s;
}
.flipcard.busted {
  animation: shake2 0.6s;
}
/* good vibes */
body:before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 20%, color-mix(in srgb, #ffd43b 22%, transparent), transparent 70%),
    radial-gradient(35% 30% at 85% 30%, color-mix(in srgb, #ff8cc6 18%, transparent), transparent 70%),
    radial-gradient(40% 35% at 60% 90%, color-mix(in srgb, #63e6be 18%, transparent), transparent 70%);
  animation: vibes 26s ease-in-out infinite alternate;
}
@keyframes vibes {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(3%, -2%) rotate(6deg);
  }
  100% {
    transform: translate(-3%, 2%) rotate(-4deg);
  }
}
.vibe {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
  animation: tabin 0.6s 0.2s both;
}
.wave {
  display: inline-block;
  animation: wave3 2.4s ease-in-out 1s 2;
  transform-origin: 70% 70%;
}
@keyframes wave3 {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  10%,
  30% {
    transform: rotate(16deg);
  }
  20%,
  40% {
    transform: rotate(-10deg);
  }
}
@media (hover: hover) {
  .card.gr,
  .gr,
  .fcard,
  .favchip,
  .feat .card,
  .d5c {
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
  .gr:hover,
  .fcard:hover,
  .favchip:hover,
  .d5c:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px #0000001a;
  }
}
.nav button[aria-selected='true'] svg {
  animation: navpop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes navpop {
  40% {
    transform: translateY(-4px) scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:before,
  .wave,
  .fc {
    animation: none !important;
  }
}
.pachwrap {
  border-radius: 16px;
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: 0 6px 18px #0003;
}
#pach {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}
.pachinko {
  background: linear-gradient(160deg, color-mix(in srgb, #ff6b9d 12%, var(--panel)), var(--panel));
}
/* share picker, settings, misc */
.invbanner {
  background: linear-gradient(90deg, #fff1c2, #ffe0f0);
  color: #16181d;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
  animation: popin 0.5s both;
}
.shlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}
.shrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--panel2);
  cursor: pointer;
  font-size: 14.5px;
}
.shrow input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.shrow .ic {
  font-size: 18px;
}
.sgroup {
  background: var(--panel2);
  border-radius: 18px;
  padding: 12px 14px;
  margin-top: 14px;
}
.sgh {
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 8px;
}
.tgl,
.srow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.sgh + .tgl,
.sgh + .srow {
  border-top: 0;
  padding-top: 2px;
}
.ti3 {
  font-size: 22px;
  width: 30px;
  text-align: center;
  flex: none;
}
.tt {
  flex: 1;
  min-width: 0;
}
.tt b {
  display: block;
  font-size: 14.5px;
}
.tt small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
  margin-top: 1px;
}
.tgl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tgl i {
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 99px;
  background: var(--line);
  position: relative;
  transition: background 0.2s;
}
.tgl i:after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.tgl input:checked + i {
  background: var(--good);
}
.tgl input:checked + i:after {
  transform: translateX(20px);
}
.tgl input:focus-visible + i {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.seg3 {
  display: grid;
  gap: 6px;
}
.opt3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  cursor: pointer;
}
.opt3 input {
  accent-color: var(--accent);
}
.opt3 b {
  display: block;
  font-size: 14px;
}
.opt3 small {
  color: var(--muted);
  font-size: 12px;
}
.opt3:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.lb h3.clk {
  cursor: pointer;
}
.lb h3.clk .playlink {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 6px;
}
.gl {
  padding: 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}
.inb[data-opengame] {
  cursor: pointer;
}
.moregames {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 11px;
  font: inherit;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.explink {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.explink .big {
  font-size: 34px;
}
.gr.xr {
  cursor: default;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
}
.gr.xr a.st,
.gr.xr span.st {
  text-decoration: none;
  cursor: pointer;
}
.gr.xr .st + .st {
  margin-left: 4px;
}
.xtag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--muted);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- card packs ---- */
.ccard {
  position: relative;
  width: 118px;
  aspect-ratio: 5/7;
  border-radius: 14px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, hsl(var(--h) 70% 92%), hsl(var(--h) 60% 80%));
  border: 3px solid var(--rc);
  box-shadow: 0 4px 14px #0002;
  color: #1d1d2b;
  overflow: hidden;
  flex: 0 0 auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ccard {
    background: linear-gradient(160deg, hsl(var(--h) 45% 30%), hsl(var(--h) 50% 18%));
    color: #fff;
  }
}
:root[data-theme='dark'] .ccard {
  background: linear-gradient(160deg, hsl(var(--h) 45% 30%), hsl(var(--h) 50% 18%));
  color: #fff;
}
.ccard .cc-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  font-weight: 800;
}
.ccard .cc-ed {
  background: #0008;
  color: #fff;
  border-radius: 99px;
  padding: 0 6px;
  font-size: 11px;
}
.ccard .cc-art {
  font-size: 46px;
  flex: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 4px #0003);
}
.ccard .cc-nm {
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  line-height: 1.1;
}
.ccard .cc-r {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ccard.mini {
  width: 76px;
  padding: 5px;
  border-width: 2px;
  border-radius: 10px;
}
.ccard.mini .cc-art {
  font-size: 28px;
}
.ccard.mini .cc-nm {
  font-size: 10px;
}
.ccard.mini .cc-top {
  font-size: 10px;
}
.ccard.t-epic::after,
.ccard.t-legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, #fff7 45%, #ffe8 50%, transparent 65%);
  background-size: 250% 100%;
  animation: holo 3.2s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ccard.t-legendary {
  box-shadow:
    0 0 0 2px #fff6,
    0 0 22px var(--rc);
}
.ccard.e1 .cc-ed {
  background: linear-gradient(90deg, #ffd43b, #ff922b);
  color: #3a2300;
}
.ccard.e10 .cc-ed {
  background: #c0c7d2;
  color: #222;
}
.ccard.e100 .cc-ed {
  background: #d9955b;
  color: #2a1600;
}
.ccard.ghost {
  background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 6px, transparent 6px, transparent 12px);
  border-style: dashed;
  color: var(--muted);
  opacity: 0.7;
}
.cc-new {
  position: absolute;
  top: 26px;
  right: -18px;
  transform: rotate(35deg);
  background: #ff6b9d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 20px;
}
.cc-x {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 10px;
  font-weight: 800;
  background: #0007;
  color: #fff;
  border-radius: 99px;
  padding: 0 5px;
}
@keyframes holo {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.packdlg {
  max-width: min(560px, 94vw);
}
.pack-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.pack {
  width: 170px;
  height: 240px;
  border-radius: 16px;
  background: linear-gradient(145deg, #7048e8, #e64980 60%, #fab005);
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px #7048e855;
  animation: packwob 1.6s ease-in-out infinite;
  overflow: hidden;
}
.pack-lbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 44px;
  text-shadow: 0 2px 6px #0005;
}
.pack-lbl b {
  font-size: 18px;
  letter-spacing: 0.12em;
}
.pack-lbl span {
  font-size: 11px;
  opacity: 0.9;
}
.pack-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, #fff6 50%, transparent 65%);
  background-size: 250% 100%;
  animation: holo 2.4s linear infinite;
}
.pack.tear {
  animation: packtear 0.7s ease-in forwards;
}
@keyframes packwob {
  0%,
  100% {
    transform: rotate(-2deg) scale(1);
  }
  50% {
    transform: rotate(2deg) scale(1.03);
  }
}
@keyframes packtear {
  30% {
    transform: scale(1.1) rotate(-4deg);
  }
  100% {
    transform: scale(1.5) translateY(-40px);
    opacity: 0;
    filter: brightness(2);
  }
}
.pack-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.flipwrap {
  perspective: 700px;
  width: 118px;
  aspect-ratio: 5/7;
  cursor: pointer;
  animation: dealin 0.45s both;
}
.flipwrap:nth-child(2) {
  animation-delay: 0.08s;
}
.flipwrap:nth-child(3) {
  animation-delay: 0.16s;
}
.flipwrap:nth-child(4) {
  animation-delay: 0.24s;
}
@keyframes dealin {
  from {
    transform: translateY(40px) scale(0.6);
    opacity: 0;
  }
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
  transform-style: preserve-3d;
}
.flipwrap.on .flipper {
  transform: rotateY(180deg);
}
.cback,
.cfront {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.cfront {
  transform: rotateY(180deg);
}
.cback {
  border-radius: 14px;
  background: repeating-linear-gradient(45deg, #5f3dc4, #5f3dc4 8px, #7048e8 8px, #7048e8 16px);
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  font-size: 40px;
  box-shadow: 0 4px 14px #0003;
}
.pack-sum {
  text-align: center;
  font-size: 14px;
}
.setdone {
  margin-top: 6px;
  font-weight: 800;
  color: var(--good);
}
.packrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.setchip {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: hsl(var(--h) 60% 50%/0.14);
}
.setchip.done {
  background: hsl(var(--h) 65% 45%);
  color: #fff;
}
.albtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 10px 0;
  padding-bottom: 4px;
}
.albtabs .chip {
  white-space: nowrap;
}
.albgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  justify-items: center;
}
.albslot {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.albslot.miss {
  cursor: default;
}
.pinmark {
  position: absolute;
  top: -6px;
  left: -4px;
  font-size: 16px;
}
.carddet {
  margin-top: 12px;
}
.edlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.edchip {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 99px;
  padding: 3px 9px;
  cursor: pointer;
}
.edchip.on {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.edchip.e1 {
  box-shadow: 0 0 0 2px #ffd43b;
}
.edchip.e10 {
  box-shadow: 0 0 0 2px #c0c7d2;
}
.edchip:disabled {
  opacity: 0.5;
  cursor: default;
}
.showcase .sc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
}
.sc-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 4px;
}
.sc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.bdg {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, #ffd43b 22%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn.glow {
  animation: glowp 1.8s ease-in-out infinite;
}
@keyframes glowp {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ccard::after,
  .pack,
  .pack-shine,
  .btn.glow {
    animation: none !important;
  }
}

/* ---- scroll lock under dialogs ---- */
html:has(dialog[open]),
body.dlg-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
dialog {
  overscroll-behavior: contain;
}
/* ---- Pawtopia Plaza page ---- */
.pzhero {
  padding: 12px;
  overflow: hidden;
}
.pzscene {
  position: relative;
  height: 190px;
  border-radius: 16px;
  background: linear-gradient(180deg, #bde3ff 0%, #e9f6ff 55%, #bfe8b0 56%, #9fd88f 100%);
  overflow: hidden;
}
.pzscene.fw {
  background: linear-gradient(180deg, #1b1b4b 0%, #4b3d8f 55%, #5c8f55 56%, #46794a 100%);
}
:root[data-theme='dark'] .pzscene:not(.fw) {
  background: linear-gradient(180deg, #27406a 0%, #3a5b86 55%, #3f6b3c 56%, #2f5530 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pzscene:not(.fw) {
    background: linear-gradient(180deg, #27406a 0%, #3a5b86 55%, #3f6b3c 56%, #2f5530 100%);
  }
}
.pzpetwrap {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 120px;
  text-align: center;
}
#pzpet {
  display: block;
  cursor: pointer;
}
#pzpet svg {
  width: 120px;
  height: 132px;
  animation: bbreathe 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 6px 6px #0003);
}
.pzbub {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(70vw, 240px);
  background: var(--text);
  color: var(--bg);
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.pzbub.pop {
  opacity: 1;
  animation: bpop2 0.3s both;
}
.pzbub:empty {
  display: none;
}
.pzdecor {
  position: absolute;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 30px;
}
.pzdecor.l {
  left: 10px;
}
.pzdecor.r {
  right: 10px;
}
.pzdecor .big {
  font-size: 52px;
}
.pzdecor .big {
  animation: pzsway 6s ease-in-out infinite;
}
.pzdecor .bal {
  animation: pzfloat 3s ease-in-out infinite;
}
.pzdecor .b2 {
  animation-delay: -1.4s;
}
@keyframes pzsway {
  50% {
    transform: rotate(4deg);
  }
}
@keyframes pzfloat {
  50% {
    transform: translateY(-8px);
  }
}
.pzflowers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 6px;
  opacity: 0.9;
}
.pzlights {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  display: flex;
  justify-content: space-around;
  border-top: 2px solid #0003;
  border-radius: 50%/0 0 12px 12px;
  padding: 0 6px;
}
.pzlights i {
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 45% 45%;
  margin-top: -1px;
  background: hsl(calc(var(--i) * 47) 90% 62%);
  box-shadow: 0 0 8px hsl(calc(var(--i) * 47) 90% 62%);
  animation: pzblink 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.23s);
}
@keyframes pzblink {
  50% {
    opacity: 0.35;
    box-shadow: none;
  }
}
.pzfw {
  position: absolute;
  font-size: 30px;
  opacity: 0;
  animation: pzfw 3.6s ease-out infinite;
}
.pzfw.f1 {
  left: 14%;
  top: 12%;
}
.pzfw.f2 {
  right: 16%;
  top: 6%;
  animation-delay: -1.2s;
}
.pzfw.f3 {
  left: 46%;
  top: 4%;
  animation-delay: -2.4s;
}
@keyframes pzfw {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  15% {
    opacity: 1;
    transform: scale(1.2);
  }
  60% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
  }
}
.pzgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .pzgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pztile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, hsl(var(--h) 80% 60%/0.16), var(--panel) 70%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 45ms);
  transition:
    transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.2s;
}
.pztile:hover,
.pztile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px #0001;
}
.pztile:active {
  transform: scale(0.97);
}
.pztile .pzi {
  font-size: 34px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.pztile:hover .pzi {
  transform: rotate(-10deg) scale(1.15);
}
.pztile b {
  font-size: 15px;
}
.pztile small {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.pztile.hot small {
  color: var(--good);
}
.pzdot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 var(--good);
  animation: pzping 1.8s infinite;
}
@keyframes pzping {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
}
.pzshoptabs {
  margin-bottom: 6px;
}
.pzlist {
  display: flex;
  flex-direction: column;
}
.pzrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-top: 1px solid var(--line);
}
.pzrow:first-child {
  border-top: 0;
}
.pzri {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--panel2);
  border-radius: 12px;
  flex: none;
}
.lvl {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 2px;
}
.plazadlg {
  width: min(520px, 94vw);
  max-height: 92vh;
  padding: 0;
  overflow: auto;
}
.plazadlg #plazabody {
  padding: 0 14px 16px;
}
.pzdlg-h {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: linear-gradient(180deg, var(--panel) 80%, transparent);
}
.pzdi {
  font-size: 28px;
}
.dlgpet {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 64px;
  margin: -4px 0 6px;
}
#pzdpet svg {
  width: 62px;
  height: 68px;
  animation: bbreathe 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.dlgpet .pzbub {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  align-self: center;
  max-width: calc(100% - 80px);
}
.pzdlg-body .card.plaza,
.pzdlg-body .card {
  box-shadow: none;
  border: 0;
  padding: 0;
  background: none;
  margin: 0;
}
.coinpill {
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .pzscene *,
  .pztile,
  .pzdot {
    animation: none !important;
  }
}

/* ---- feel-good corner ---- */
.wellcard {
  margin-top: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, #8ce99a 16%, var(--panel)), var(--panel) 70%);
}
.moodpick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.moodpick button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.moodpick button span {
  font-size: 26px;
}
.moodpick button small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.moodpick button:hover {
  transform: translateY(-3px) scale(1.05);
}
.moodpick button:active {
  transform: scale(0.94);
}
.wellmood {
  font-size: 14px;
  margin: 6px 0;
}
.mooddots {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}
.mooddots span {
  flex: 1;
  text-align: center;
  font-size: 18px;
  padding: 3px 0;
  border-radius: 8px;
  background: var(--panel2);
  color: var(--muted);
}
.mooddots span.today {
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.wellbtns {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.wellbtns .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}
.supportnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #ffd43b 18%, var(--panel));
  font-size: 13px;
  line-height: 1.4;
}
.supportnote a {
  color: var(--accent);
  font-weight: 700;
}
.welldlg {
  width: min(460px, 94vw);
}
.breathe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 0 18px;
}
.bcircle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #74c0fc 55%, #fff), #74c0fc55 70%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 40px #74c0fc66;
  transform: scale(1);
}
.bpet svg {
  width: 84px;
  height: 92px;
}
.bword {
  font-size: 18px;
  font-weight: 800;
  min-height: 24px;
}
.gjar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 14px;
}
.gjar span {
  font-size: 36px;
}
.gjar b {
  font-size: 24px;
}
#gtext {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel2);
  color: var(--text);
  resize: vertical;
}
.gnote {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel2);
  font-style: italic;
}
.gnote small {
  display: block;
  font-style: normal;
  color: var(--muted);
  margin-top: 4px;
}
.carelist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.careit {
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.careit span {
  font-size: 22px;
}
.careit b {
  flex: 1;
  font-weight: 650;
  font-size: 14px;
}
.careit i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  color: #fff;
}
.careit.on {
  background: color-mix(in srgb, var(--good) 12%, var(--panel));
}
.careit.on i {
  background: var(--good);
  border-color: var(--good);
}
.bsel {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: var(--panel2);
  color: var(--text);
  max-width: 55%;
}
/* ---- mobile polish ---- */
html,
body {
  overflow-x: clip;
}
@media (max-width: 420px) {
  .top h1 {
    font-size: clamp(19px, 5.6vw, 23px);
  }
  .nav button {
    font-size: 10.5px;
    gap: 2px;
    padding: 8px 0 9px;
  }
  .nav button svg {
    width: 22px;
    height: 22px;
  }
  .giftcard {
    flex-wrap: wrap;
    position: relative;
  }
  .giftcard > div {
    flex: 1 1 calc(100% - 34px);
    min-width: 0;
  }
  .giftcard .coin {
    flex: 1 1 100%;
    text-align: center;
    padding: 9px;
  }
  .ltrack {
    gap: 3px;
  }
  .ltrack small {
    font-size: 8.5px;
  }
  .ltrack span {
    font-size: 9.5px;
  }
  .pzscene {
    height: 170px;
  }
  .pzdecor .big {
    font-size: 42px;
  }
  .moodpick button span {
    font-size: 23px;
  }
  .sc-stats {
    font-size: 12px;
  }
  .card {
    scroll-margin-top: 12px;
  }
}
@media (max-width: 420px) {
  #tab-play .top h1 {
    font-size: 19px;
    line-height: 1.2;
  }
  #tab-play .top {
    gap: 8px;
  }
  #tab-play .top .vibe {
    font-size: 12.5px;
  }
}
@media (max-width: 360px) {
  .nav button {
    font-size: 9.5px;
  }
  .moodpick small {
    display: none;
  }
}
.pzdlg-body .pz-h > b {
  display: none;
}
.pzdlg-body .pz-h {
  justify-content: flex-end;
}

/* ---- pachinko layout & lucky finds ---- */
.pachtip {
  margin: 0 0 10px;
}
.pachdrop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.pz-sub {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 2px 6px;
}
.ballpacks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 380px) {
  .ballpacks {
    grid-template-columns: repeat(2, 1fr);
  }
}
.bpack {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s;
}
.bpack b {
  font-size: 16px;
}
.bpack span {
  font-size: 12px;
  font-weight: 700;
}
.bpack small {
  font-size: 10px;
  font-weight: 800;
  color: var(--good);
}
.bpack:active {
  transform: scale(0.95);
}
.bpack:disabled {
  opacity: 0.45;
}
.pachlegend {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  margin-top: 12px;
  font-size: 11px;
  text-align: center;
}
.pachlegend span {
  padding: 4px 0;
  border-radius: 6px;
  background: var(--panel2);
}
.pachlegend .hot {
  background: #ff6b9d33;
}
.luckydlg {
  width: min(340px, 90vw);
}
.lucky {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.lbox {
  font-size: 90px;
  cursor: pointer;
  animation: lwob 1s ease-in-out infinite;
  user-select: none;
}
.lbox.open {
  animation: lpop 0.65s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}
@keyframes lwob {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg) scale(1.05);
  }
}
@keyframes lpop {
  40% {
    transform: scale(1.35) rotate(8deg);
  }
  100% {
    transform: scale(1);
  }
}
.ltext {
  font-size: 16px;
  text-align: center;
  min-height: 24px;
}

/* ---- explore search ---- */
.exsearch {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 8px 0;
  margin: 0 -2px;
  background: linear-gradient(180deg, var(--bg) 75%, transparent);
}
.acwrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.acwrap .tx {
  width: 100%;
  box-sizing: border-box;
  padding-right: 34px;
}
.acclear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--panel2);
  color: var(--muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
}
.acbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 34px #0002;
  overflow: hidden;
  z-index: 7;
  animation: bpop2 0.18s both;
}
.acit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.acit.on,
.acit:hover {
  background: var(--panel2);
}
.aci {
  font-size: 20px;
  width: 28px;
  text-align: center;
}
.acn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acn small {
  font-weight: 600;
  color: var(--muted);
  font-size: 11.5px;
}
.acn mark {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: inherit;
  border-radius: 3px;
}
.acfoot {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
#excats {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-right: -16px;
  padding-right: 16px;
}
#excats::-webkit-scrollbar {
  display: none;
}
#excats button {
  flex: none;
  white-space: nowrap;
}
#tab-explore.searching .exmid,
#tab-explore.searching .exintro,
#tab-explore.searching .exbar {
  display: none;
}
#tab-explore.searching #exhead {
  margin-top: 8px !important;
}

/* ---- answers ---- */
.answers {
  margin-top: 12px;
}
.answers summary {
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.answers summary::-webkit-details-marker {
  display: none;
}
.answers summary:after {
  content: '▾';
  float: right;
  color: var(--muted);
}
.answers:not([open]) summary:after {
  content: '▸';
}
.ansbody {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.ansbody .gp-band {
  margin-bottom: 6px;
}
.answord {
  letter-spacing: 0.12em;
  font-size: 18px;
  background: var(--panel2);
  padding: 2px 8px;
  border-radius: 8px;
}
.anschips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.anschips span {
  background: var(--panel2);
  border-radius: 99px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}
.anssd {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  max-width: 220px;
  margin: 0 auto;
}
.anssd i {
  font-style: normal;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  background: var(--panel2);
  font-weight: 700;
}
.anssd i.giv {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel2));
}
.anssd i:nth-child(6n + 3) {
  margin-right: 4px;
}
.anslist {
  margin: 0;
  padding-left: 20px;
}
.anslist li {
  margin: 3px 0;
}
.anscaps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.luckyfab {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 11;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  color: #3a2300;
  background: linear-gradient(90deg, #ffd43b, #ffa94d);
  box-shadow: 0 8px 24px #f59f0066;
  cursor: pointer;
  animation:
    fabin 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both,
    giftwig 1.6s 0.6s infinite;
}
.luckyfab span {
  opacity: 0.8;
  font-size: 12px;
}
@keyframes fabin {
  from {
    transform: translateY(80px) scale(0.6);
    opacity: 0;
  }
}
@media (min-width: 960px) {
  .luckyfab {
    bottom: 28px;
  }
}
.unhint {
  font-size: 12.5px;
  margin-top: 6px;
  min-height: 18px;
}
.unhint .good {
  color: var(--good);
  font-weight: 700;
}
.unhint .bad {
  color: var(--bad);
  font-weight: 700;
}

.btn.launch {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.btn.launch small {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
}
.btn.launch.firing {
  animation: firing 0.26s ease-in-out infinite;
  box-shadow: 0 0 0 4px #ff6b9d55;
}
@keyframes firing {
  50% {
    transform: scale(0.97);
  }
}
.qby {
  display: block;
  font-size: 0.85em;
  opacity: 0.75;
  margin-top: 2px;
}

/* ---- idle poses ---- */
#petstage svg.p-sit {
  animation: psit 5s ease-in-out both !important;
  transform-origin: 50% 95%;
}
@keyframes psit {
  0% {
    transform: none;
  }
  12%,
  88% {
    transform: translateY(8%) scale(1.08, 0.84);
  }
  100% {
    transform: none;
  }
}
#petstage svg.p-jump {
  animation: pjump 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) both !important;
  transform-origin: 50% 95%;
}
@keyframes pjump {
  0% {
    transform: none;
  }
  15% {
    transform: scale(1.15, 0.8);
  }
  45% {
    transform: translateY(-38%) scale(0.92, 1.1) rotate(-4deg);
  }
  70% {
    transform: translateY(0) scale(1.18, 0.82);
  }
  85% {
    transform: translateY(-6%) scale(0.97, 1.04);
  }
  100% {
    transform: none;
  }
}
#petstage svg.p-stretch {
  animation: pstretch 1.6s ease-in-out both !important;
  transform-origin: 50% 95%;
}
@keyframes pstretch {
  30% {
    transform: scale(0.9, 1.18);
  }
  60% {
    transform: scale(1.12, 0.9) rotate(3deg);
  }
  100% {
    transform: none;
  }
}
#petstage svg.p-nap {
  animation: pnap 3.2s ease-in-out infinite !important;
  transform-origin: 50% 95%;
  filter: saturate(0.85);
}
@keyframes pnap {
  0%,
  100% {
    transform: translateY(10%) scale(1.1, 0.8) rotate(-6deg);
  }
  50% {
    transform: translateY(9%) scale(1.13, 0.78) rotate(-6deg);
  }
}
.walker .napz {
  position: absolute;
  right: 8%;
  top: 10%;
  font-size: 22px;
  animation: bz 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}
.buddy.b-sit svg {
  animation: bsit 4.2s ease-in-out;
}
@keyframes bsit {
  12%,
  88% {
    transform: translateY(5px) scale(1.1, 0.82);
  }
}
.buddy.b-jump svg {
  animation: bjump 1s cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes bjump {
  15% {
    transform: scale(1.15, 0.8);
  }
  45% {
    transform: translateY(-30px) scale(0.92, 1.1);
  }
  70% {
    transform: scale(1.15, 0.85);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #petstage svg.p-sit,
  #petstage svg.p-jump,
  #petstage svg.p-stretch,
  #petstage svg.p-nap {
    animation: none !important;
  }
}

/* ---- feel-good dialogs fit small screens ---- */
.welldlg {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.welldlg #wellbody > .row:first-child {
  position: sticky;
  top: -1px;
  z-index: 2;
  background: var(--panel);
  padding: 2px 0 6px;
}
@media (max-width: 480px), (max-height: 720px) {
  .welldlg {
    width: calc(100vw - 20px);
    max-width: none;
    padding: 14px;
  }
  .carelist {
    gap: 5px;
    margin-top: 8px;
  }
  .careit {
    padding: 7px 10px;
    gap: 8px;
    border-radius: 10px;
  }
  .careit span {
    font-size: 18px;
  }
  .careit b {
    font-size: 13px;
    line-height: 1.25;
  }
  .careit i {
    width: 20px;
    height: 20px;
    flex: none;
  }
  .breathe {
    padding: 14px 0 10px;
    gap: 10px;
  }
  .bcircle {
    width: 110px;
    height: 110px;
  }
  .bpet svg {
    width: 70px;
    height: 78px;
  }
  #gtext {
    font-size: 16px;
  }
}
@media (max-height: 600px) and (min-width: 440px) {
  .carelist {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .careit b {
    font-size: 12px;
  }
}
.careit {
  min-width: 0;
}
.careit b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hatchbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  font: inherit;
  color: #16181d;
  cursor: pointer;
  background: linear-gradient(90deg, #fff3bf, #ffe3f1);
  border: 0;
  animation: giftwig 2.4s infinite;
}
.hatchbanner .hbegg {
  font-size: 34px;
  animation: eggwob 1.2s ease-in-out infinite;
}
@keyframes eggwob {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
.dnacard .statusgrid {
  grid-template-columns: repeat(2, 1fr);
}

/* =====================================================================
   BookBuddies "paper" theme — warm, printed-feeling, hand-set details.
   Only visuals live here; every behavior above is unchanged.
   ===================================================================== */
:root {
  --bg: #f5efe4;
  --panel: #fffdf8;
  --panel2: #f0e8d9;
  --text: #2a2521;
  --muted: #786d61;
  --line: #e3d9c6;
  --ink: #2a2521;
  --accent: #c9492a;
  --accent-ink: #fffaf2;
  --good: #3d8a55;
  --bad: #c7392f;
  --mid: #c79a2e;
  --is: 62%;
  --il: 88%;
  --radius: 16px;
  --shadow: 0 2px 0 var(--line);
  --hand: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1a1815;
    --panel: #23201c;
    --panel2: #2d2924;
    --text: #f2ebdf;
    --muted: #a79b8c;
    --line: #3a342d;
    --ink: #0d0c0a;
    --accent: #f0895c;
    --accent-ink: #1a1815;
    --good: #6cbf84;
    --bad: #f07a6e;
    --is: 40%;
    --il: 26%;
    --shadow: 0 2px 0 #0006;
  }
}
:root[data-theme='dark'] {
  --bg: #1a1815;
  --panel: #23201c;
  --panel2: #2d2924;
  --text: #f2ebdf;
  --muted: #a79b8c;
  --line: #3a342d;
  --ink: #0d0c0a;
  --accent: #f0895c;
  --accent-ink: #1a1815;
  --good: #6cbf84;
  --bad: #f07a6e;
  --is: 40%;
  --il: 26%;
  --shadow: 0 2px 0 #0006;
}
body {
  font-family: var(--body);
  background: var(--bg) radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 0.8px, transparent 1px) 0 0/16px
    16px;
  background-attachment: scroll;
  letter-spacing: 0.003em;
}
h1,
h2,
h3,
.top h1,
.bignum,
.brand,
.ab-name,
.d5total,
.ph-title,
.pz-dlg-h b,
.pzdlg-h b,
.prof-h .nm,
.me-hero .nm {
  font-family: var(--hand);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}
.top h1 {
  font-weight: 700;
  font-size: 26px;
}
.bignum {
  font-weight: 800;
}
/* section headings: a quiet serif with a hand-drawn underline instead of shouty caps */
.sec-h {
  font-family: var(--hand);
  text-transform: none;
  letter-spacing: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 2px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sec-h::after {
  content: '';
  flex: 0 0 38px;
  height: 8px;
  margin-left: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 8'%3E%3Cpath d='M1 5c5-4 8 2 12-1s7-3 11 0 8 2 13-2' fill='none' stroke='%23c9492a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
  opacity: 0.8;
}
/* cards: paper with a crisp edge */
.card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero {
  background: var(--panel);
  border-color: var(--line);
  border-left: 5px solid var(--accent);
}
/* buttons: tactile, inked, pressable */
.btn {
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: 0.01em;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.2s;
  position: relative;
}
.btn:not(.ghost):not(.apple):not(.bmc):hover {
  box-shadow: 0 4px 0 var(--ink);
  filter: none;
  transform: translateY(-1px);
}
.btn:active,
.btn:not(.ghost):not(.apple):not(.bmc):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
.btn.ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--ink);
}
.btn.ghost:hover {
  background: var(--panel2);
}
.btn:disabled,
.btn[disabled] {
  box-shadow: none;
  transform: none;
  opacity: 0.45;
  border-style: dashed;
}
.btn.sm {
  box-shadow: 0 2px 0 var(--ink);
  border-width: 1.5px;
}
.btn.sm:active {
  transform: translateY(1.5px);
  box-shadow: 0 0.5px 0 var(--ink);
}
.iconbtn {
  border: 1.5px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: 0 2px 0 var(--line);
}
.linkbtn {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
/* chips and pills: stitched outlines, pressed = inked */
.chips2 button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  box-shadow: 0 1.5px 0 var(--line);
}
.chips2 button[aria-pressed='true'],
.chip.on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  box-shadow: none;
}
.pill {
  border: 1.5px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1.5px 0 var(--line);
}
.tag,
.tag2 {
  border-radius: 6px;
}
/* progress bars: striped like a paper ticket instead of a neon gradient */
.bar {
  background: var(--panel2);
  border: 1.5px solid var(--line);
}
.bar i {
  background: repeating-linear-gradient(
    -45deg,
    var(--accent),
    var(--accent) 6px,
    color-mix(in srgb, var(--accent) 80%, #fff) 6px,
    color-mix(in srgb, var(--accent) 80%, #fff) 12px
  );
  animation: none;
}
/* logo: a little rubber stamp */
.brand .logo,
.logo {
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-4deg);
  font-family: var(--hand);
}
/* nav: a simple printed tab bar */
.nav {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-top: 1.5px solid var(--line);
}
.nav button {
  font-family: var(--body);
  font-weight: 700;
}
.nav button[aria-selected='true'] {
  color: var(--accent);
}
.nav button[aria-selected='true'] svg {
  stroke: var(--accent);
}
.nav button[aria-selected='true']:after {
  background: var(--accent);
  height: 3px;
  width: 14px;
  border-radius: 2px;
}
/* dialogs: sheets of paper */
dialog {
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px #2a25213d;
  background: var(--panel);
  color: var(--text);
}
dialog::backdrop {
  background: #2a252166;
  backdrop-filter: blur(2px);
}
/* inputs */
.tx,
input.tx,
textarea,
select {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  font-family: var(--body);
}
.tx:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* game list rows: calmer */
.list .gr {
  border-bottom: 1px dashed var(--line);
}
.gi {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px #0000000d;
}
.gr .st {
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  font-weight: 800;
}
.gr .st.done {
  border-color: transparent;
  box-shadow: none;
}
/* featured cards: index-card feel */
.feat .fc {
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
}
.feat .fc:before {
  height: 4px;
}
.feat .fc:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 6px 0 var(--line);
}
/* daily 5, gifts, wellbeing: tone down the gradients */
.giftcard,
.hatchbanner {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  box-shadow: none !important;
}
.wellcard {
  background: var(--panel);
}
.moodpick button {
  box-shadow: 0 2px 0 var(--line);
}
/* ticker */
.ticker {
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 var(--line);
  background: var(--panel);
}
/* toasts & notices */
.notif,
#toast {
  border: 1.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
/* focus ring that looks drawn, not default */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
/* gentle page-in */
section:not([hidden]) {
  animation: pagein 0.28s ease-out both;
}
@keyframes pagein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  section:not([hidden]) {
    animation: none;
  }
}
/* pet speech bubbles always readable */
.walker .bubble {
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1.5px solid #2a252122;
}
.bbub {
  max-width: min(78vw, 280px);
}

#featwrap .sec-h::after {
  display: none;
}
#featwrap .row {
  flex-wrap: nowrap;
}
#featwrap .btn.sm {
  padding: 6px 10px;
  min-height: 0;
}
.feat .fc .nm,
.feat .fc .bl {
  color: var(--text);
}
.feat .fc .muted {
  color: var(--muted);
}

.ulink {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.ulink:hover {
  color: var(--accent);
}
[data-prof].av {
  cursor: pointer;
}

/* ---- buddy rail ---- */
.buddy {
  transition:
    left 2.4s ease-in-out,
    top 2.4s ease-in-out;
}
.buddy .bbub {
  right: auto;
  left: auto;
  bottom: auto;
  top: auto;
}
.buddy[data-rail='right'] .bbub {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.buddy[data-rail='left'] .bbub {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.buddy[data-rail='bottom'] .bbub {
  bottom: calc(100% + 10px);
  right: 0;
}
.buddy[data-rail='top'] .bbub {
  top: calc(100% + 10px);
  right: 0;
}
.buddy[data-rail='left'] .bbub:after,
.buddy[data-rail='right'] .bbub:after,
.buddy[data-rail='top'] .bbub:after {
  display: none;
}
.buddy.flip svg {
  scale: -1 1;
}
.railpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tag.signin {
  background: color-mix(in srgb, #f2b134 25%, transparent);
  color: var(--text);
}

.d5c {
  position: relative;
}
.d5hide {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  color: var(--muted);
  background: var(--panel2);
  opacity: 0.75;
}
.d5hide:hover {
  opacity: 1;
  color: var(--bad);
}
.hidebtn {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.55;
  padding: 2px 4px;
}
.hidebtn:hover {
  opacity: 1;
}
.feat .hidebtn.fh {
  margin-right: auto;
}

.fbcontact {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.fbcontact a {
  color: var(--accent);
  font-weight: 700;
}
.tsizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tsizes button {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.tsizes button small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.tsizes button[aria-pressed='true'] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}
.tsizes button[aria-pressed='true'] small {
  color: var(--bg);
  opacity: 0.8;
}

.rwcard {
  padding: 6px 14px;
}
.rwrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}
.rwrow:first-child {
  border-top: 0;
}
.rwi {
  font-size: 22px;
  width: 30px;
  text-align: center;
}
.rwrow b {
  font-size: 14px;
  font-weight: 700;
}
.rwbar {
  height: 6px;
  border-radius: 4px;
  background: var(--panel2);
  margin: 5px 0 2px;
  overflow: hidden;
}
.rwbar i {
  display: block;
  height: 100%;
  background: var(--good);
  border-radius: 4px;
}
.rwhow {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
}
.rwhow b {
  color: var(--good);
}
.coin .coinct,
.coinpill .coinct {
  cursor: pointer;
}
.coin:has(.coinct),
.coinpill,
.pill:has(.coinct) {
  cursor: pointer;
}

#askdlg {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.coinpill {
  position: relative;
}
.rwdot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--bg);
}
@media (max-width: 380px) {
  #tab-play .top .pill {
    padding: 5px 8px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  #tab-play .top {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #tab-play .top > div:first-child {
    flex: 1 1 100%;
  }
  #tab-play .top .spacer {
    display: none;
  }
  #tab-play .top .avatar {
    margin-left: auto;
  }
}

/* ===== wide & ultrawide desktops ===== */
@media (min-width: 1500px) {
  .wrap {
    max-width: none;
    width: auto;
    margin-left: 250px !important;
    margin-right: 32px !important;
    padding-left: 8px;
    padding-right: 8px;
  }
  body.ingame .wrap {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    gap: 32px;
    align-items: start;
  }
  .wgrid .waside {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wgrid .waside > * {
    margin-top: 0 !important;
  }
  .wgrid.w-pet {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .wgrid.w-pet .wmain {
    position: sticky;
    top: 12px;
  }
  .wgrid.w-pet .waside {
    position: static;
  }
  .w-pet .pscreen {
    height: min(74vh, 780px);
  }
  .w-play .wmain .card.list,
  .w-play .wmain .sec-h {
    max-width: none;
  }
  .wsecs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 0 20px;
    align-items: start;
  }
  .wsec {
    min-width: 0;
  }
  #lbbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 14px;
    align-items: start;
  }
  #lbbody > * {
    margin: 0 !important;
  }
  #lbbody > .champ,
  #lbbody > .card.center,
  #lbbody > .league,
  #lbbody > .row {
    grid-column: 1/-1;
  }
  #exlist.feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
  }
  #exlist .fcard {
    margin: 0;
  }
  .exmid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
  }
  .exmid > * {
    min-width: 0;
  }
  .pzgrid {
    grid-template-columns: repeat(6, 1fr);
  }
  .pzscene {
    height: 300px;
  }
  #tab-profile {
    column-count: 2;
    column-gap: 32px;
  }
  #tab-profile > * {
    break-inside: avoid;
  }
  #tab-profile > .top {
    column-span: all;
  }
  #tab-profile > .sec-h {
    break-after: avoid;
  }
  .feat .fc {
    flex-basis: 340px;
  }
  dialog {
    max-width: min(620px, 92vw);
  }
}
@media (min-width: 2200px) {
  .wgrid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  }
  #tab-profile {
    column-count: 3;
  }
}

/* ---- in-game companion strip ---- */
.cstrip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 2px 2px 10px;
  position: sticky;
  top: calc(66px + env(safe-area-inset-top));
  z-index: 4;
  background: var(--bg);
}
.cstrip .companion {
  margin: 0;
  width: 48px;
  height: 48px;
  flex: none;
}
.cstrip .companion svg {
  width: 48px;
  height: 48px;
}
.cstrip .cbub {
  position: relative;
  right: auto;
  top: auto;
  flex: 1;
  min-width: 0;
  max-width: none;
  width: auto;
  max-height: 64px;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  border: 1.5px solid var(--line);
  box-shadow: none;
  animation: none;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.cstrip .cbub.say {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  animation: bpop2 0.3s both;
}
.cstrip .cbub:before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  border: 7px solid transparent;
  border-right-color: var(--line);
  border-left: 0;
}
.cstrip .cbub.say:before {
  border-right-color: var(--text);
}
.cstrip .cbub .muted {
  color: var(--muted);
}
/* ---- pet screen speech sits above the side buttons ---- */
.walker {
  z-index: 5;
}
.walker .bubble {
  z-index: 8;
}
/* ---- home pet size ---- */
.buddy {
  width: calc(64px * var(--bz, 1));
  height: calc(64px * var(--bz, 1));
}
.buddy svg {
  width: calc(64px * var(--bz, 1));
  height: calc(64px * var(--bz, 1));
}
@media (min-width: 960px) {
  .buddy {
    width: calc(78px * var(--bz, 1));
    height: calc(78px * var(--bz, 1));
  }
  .buddy svg {
    width: calc(78px * var(--bz, 1));
    height: calc(78px * var(--bz, 1));
  }
}
/* ---- hosted games scale to the screen ---- */
#gbox {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}
body.ingame .rules {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 960px) {
  body.ingame .wrap {
    max-width: 760px;
  }
  #gbox {
    max-width: 640px;
  }
  .cstrip {
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 370px) {
  #gbox .card {
    padding: 12px;
  }
}

/* ---- plaza signpost & walk-over ---- */
.pzsign {
  position: absolute;
  right: 14px;
  bottom: 26px;
  z-index: 3;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pzsign .board {
  order: 0;
  background: #8a5a33;
  color: #fff6e6;
  font-weight: 800;
  font-size: 12.5px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 2px solid #5e3b1f;
  box-shadow: 0 3px 0 #5e3b1f;
  transform: rotate(-3deg);
  white-space: nowrap;
  transition: transform 0.2s;
}
.pzsign .post {
  order: 1;
  width: 5px;
  height: 22px;
  background: #6b4526;
  border-radius: 2px;
}
.pzsign:hover .board {
  transform: rotate(2deg) scale(1.06);
}
.walker.toplaza .pwrap {
  animation: pwalk 0.38s ease-in-out infinite;
}
.pscreen.leaving {
  animation: scrleave 0.7s ease-in forwards;
}
@keyframes scrleave {
  to {
    transform: translateX(-18%) scale(0.96);
    opacity: 0;
    filter: blur(2px);
  }
}
.pzscene.arriving {
  animation: scrarrive 0.8s ease-out both;
}
@keyframes scrarrive {
  from {
    transform: translateX(18%) scale(0.96);
    opacity: 0;
    filter: blur(2px);
  }
}
#pzpet.walkin {
  animation: pzwalkin 1.4s ease-out both;
}
#pzpet.walkin svg {
  animation: pwalk 0.38s ease-in-out infinite !important;
}
@keyframes pzwalkin {
  from {
    transform: translateX(-260%);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pscreen.leaving,
  .pzscene.arriving,
  #pzpet.walkin {
    animation: none;
  }
}

.pachlegend span {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.pachlegend small {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--muted);
}

/* ---- game name menu ---- */
[data-gm] {
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
[data-gm]:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
.gmenu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-width: 280px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px #2a252140;
  padding: 6px;
  animation: bpop2 0.16s both;
}
.gmh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}
.gmh b {
  display: block;
  font-family: var(--hand);
  font-size: 16px;
}
.gmh small {
  color: var(--muted);
  font-size: 12px;
}
.gmi {
  font-size: 24px;
}
.gmenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.gmenu button:hover,
.gmenu button:focus-visible {
  background: var(--panel2);
  outline: none;
}
.gmenu button span {
  width: 22px;
  text-align: center;
}
.card.adu {
  margin: 0 0 10px;
}

/* admin console */
.adnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1.5px solid var(--line);
  margin: 4px -2px 14px;
  padding: 0 2px;
}
.adnav::-webkit-scrollbar {
  display: none;
}
.adnav button {
  flex: none;
  border: 0;
  background: none;
  padding: 9px 11px 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.adnav button[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.adstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 700px) {
  .adstats {
    grid-template-columns: repeat(6, 1fr);
  }
}
.adstats div {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.adstats b {
  display: block;
  font-size: 22px;
  font-family: var(--hand);
  line-height: 1.1;
}
.adstats span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.adquick {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.adquick .btn {
  flex: 1;
}
.adh {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 4px 8px;
}
.card.adlist {
  padding: 4px 0;
}
.adrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: inherit;
  font: inherit;
}
.adlist > .adrow:first-child,
.adlist > .adu2:first-child .adrow {
  border-top: 0;
}
.adrow .adt {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.adrow .av.sm {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.adi {
  width: 28px;
  text-align: center;
  font-size: 18px;
  flex: none;
}
.adq {
  margin-top: 3px;
  padding-left: 9px;
  border-left: 3px solid var(--line);
  white-space: pre-wrap;
}
.adbadge {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  vertical-align: 1px;
}
.adtap {
  cursor: pointer;
  align-items: center;
}
.adu2 .adact {
  display: none;
  padding: 2px 14px 14px 58px;
}
.adu2.open .adact {
  display: block;
}
.adu2.open {
  background: var(--panel2);
}
.adlbl {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin: 12px 0 5px;
}
.card > .adlbl:first-child,
.adact > .adlbl:first-child {
  margin-top: 4px;
}
.adchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.adchips button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 800;
  font-size: 13px;
}
.adaud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.adaud button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 8px 4px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.adaud button span {
  font-size: 19px;
}
.adaud button[aria-checked='true'] {
  border-color: var(--text);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.adsearch {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.pfadmin {
  margin: 14px 0 0;
  border-radius: 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  width: 100%;
}
.pfadmin .adico {
  font-size: 22px;
}
@media (max-width: 420px) {
  .adu2 .adact {
    padding-left: 14px;
  }
}
/* announcements */
.announce {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.announce.bye {
  opacity: 0;
  transform: translateY(-6px);
}
.announce.annprev {
  margin: 0;
}
.annhead {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.annico {
  font-size: 22px;
  line-height: 1;
}
.annfrom {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.anntitle {
  display: block;
  font-size: 16px;
  margin-top: 1px;
}
.annmsg {
  margin-top: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.4;
}
.iconbtn.sm {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

/* ---------- sliders (no text box needed) ---------- */
.nsl {
  margin: 10px 0 4px;
}
.nsl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.nsl-lbl {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
}
.nsl-val {
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.nsl-val small {
  font-size: 0.7em;
  color: var(--muted);
  font-weight: 700;
}
.nsl.big .nsl-top {
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.nsl.big .nsl-val {
  font-family: var(--hand);
  font-size: 40px;
  line-height: 1.1;
}
.nsl.off {
  opacity: 0.4;
  pointer-events: none;
}
.nsl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nsl-b {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  display: grid;
  place-items: center;
  touch-action: manipulation;
  box-shadow: 0 1.5px 0 var(--line);
  user-select: none;
  -webkit-user-select: none;
}
.nsl-b:active {
  transform: translateY(1px);
  box-shadow: none;
}
.nsl-b:disabled {
  opacity: 0.4;
}
.nsl input[type='range'] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  background: transparent;
  margin: 0;
  touch-action: pan-y;
  --p: 50%;
}
.nsl input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--p), color-mix(in srgb, var(--line) 80%, transparent) var(--p));
}
.nsl input[type='range']::-moz-range-track {
  height: 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}
.nsl input[type='range']::-moz-range-progress {
  height: 10px;
  border-radius: 99px;
  background: var(--accent);
}
.nsl input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--text);
  box-shadow: 0 2px 6px #0003;
  cursor: grab;
}
.nsl input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--text);
  box-shadow: 0 2px 6px #0003;
}
.nsl input[type='range']:focus-visible {
  outline: none;
}
.nsl input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
.nsl input[type='range']:disabled {
  opacity: 0.5;
}
.gslide {
  margin-top: 12px;
  padding: 6px 4px 0;
}
.huedot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: hsl(var(--eh) 80% 62%);
  vertical-align: middle;
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1.5px var(--line);
}
/* sprint number pad */
.ansbox {
  min-height: 52px;
  margin: 6px auto 10px;
  max-width: 220px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--panel2);
  display: grid;
  place-items: center;
  font: 800 30px/1 var(--hand);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s;
}
.ansbox.ok {
  background: color-mix(in srgb, var(--good) 30%, var(--panel2));
}
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.numpad button {
  height: 54px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  box-shadow: 0 2px 0 var(--line);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.numpad button.down,
.numpad button:active {
  transform: translateY(2px);
  box-shadow: none;
  background: var(--panel2);
}
.numpad .np-alt {
  font-size: 15px;
  color: var(--muted);
}
/* admin form bits */
.adseg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--panel2);
  border-radius: 12px;
  padding: 3px;
  margin-top: 4px;
}
.adseg button {
  border: 0;
  background: none;
  border-radius: 10px;
  padding: 8px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--muted);
}
.adseg button[aria-checked='true'] {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.adchips button[aria-pressed='true'] {
  border-color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--text);
}
.btn.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.adform .nsl {
  margin: 12px 0 2px;
}
.adgrid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 22px;
}
@media (min-width: 700px) {
  .adgrid {
    grid-template-columns: 1fr 1fr;
  }
}
.evemos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.evemos button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 21px;
}
.evemos button[aria-pressed='true'] {
  border-color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  transform: scale(1.06);
}
.adbadge.live {
  background: color-mix(in srgb, var(--good) 25%, var(--panel));
}
.adquick .btn {
  padding-left: 8px;
  padding-right: 8px;
}
/* ---------- events ---------- */
.evcard {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 12px 0;
  background: linear-gradient(135deg, hsl(var(--eh) 85% 88%), hsl(calc(var(--eh) + 40) 80% 84%));
  color: #1d1a16;
  border: 1.5px solid hsl(var(--eh) 55% 70%);
  box-shadow: 0 3px 0 hsl(var(--eh) 45% 72%);
}
[data-theme='dark'] .evcard,
.dark .evcard {
  background: linear-gradient(135deg, hsl(var(--eh) 45% 26%), hsl(calc(var(--eh) + 40) 40% 22%));
  color: #f6f1ea;
  border-color: hsl(var(--eh) 40% 38%);
  box-shadow: 0 3px 0 hsl(var(--eh) 35% 18%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .evcard {
    background: linear-gradient(135deg, hsl(var(--eh) 45% 26%), hsl(calc(var(--eh) + 40) 40% 22%));
    color: #f6f1ea;
    border-color: hsl(var(--eh) 40% 38%);
    box-shadow: 0 3px 0 hsl(var(--eh) 35% 18%);
  }
}
.evcard.soon {
  opacity: 0.92;
}
.evfloat {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.evfloat i {
  position: absolute;
  font-style: normal;
  font-size: 20px;
  opacity: 0.28;
  left: calc(8% + var(--i) * 16%);
  top: 100%;
  animation: evup calc(7s + var(--i) * 0.9s) linear infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
@keyframes evup {
  to {
    transform: translateY(-190px) rotate(40deg);
  }
}
.evtop {
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}
.evemo {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 #0002);
  animation: hop 2.6s ease-in-out infinite;
}
.evkick {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 6px;
}
.livedot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e04848;
  box-shadow: 0 0 0 3px #e0484833;
  animation: glow 1.6s infinite;
}
.evtitle {
  display: block;
  font-family: var(--hand);
  font-size: 23px;
  line-height: 1.15;
}
.evmsg {
  margin-top: 6px;
  font-size: 14.5px;
  position: relative;
}
.evperks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  position: relative;
}
.evperks span {
  background: #ffffff8c;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}
[data-theme='dark'] .evperks span {
  background: #0000003a;
}
.evgift {
  width: 100%;
  margin-top: 12px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 8px;
}
.evgift small {
  opacity: 0.8;
  font-weight: 700;
}
.evdone {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.8;
  position: relative;
}
.coinpill {
  position: relative;
}
.boostx {
  position: absolute;
  top: -8px;
  right: -8px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 900;
  background: #e04848;
  color: #fff;
  border-radius: 999px;
  padding: 1px 5px;
  box-shadow: 0 1px 0 #0003;
}
/* ---------- daily ritual ---------- */
:root {
  --r-mind: #e6a23c;
  --r-pet: #e0709a;
  --r-heart: #4fae69;
}
.ritual {
  margin-top: 12px;
}
.rrings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.rring {
  position: relative;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  color: inherit;
  border-radius: 14px;
}
.rring:hover {
  background: var(--panel2);
}
.rring svg {
  width: 62px;
  height: 62px;
  transform: rotate(-90deg);
}
.rring .rt {
  fill: none;
  stroke: var(--line);
  stroke-width: 5;
}
.rring .rf {
  fill: none;
  stroke: var(--rc);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.rring .ri {
  position: absolute;
  top: 22px;
  font-size: 22px;
  line-height: 1;
}
.rring.done .ri {
  color: var(--rc);
  font-weight: 900;
}
.rring b {
  font-size: 14px;
  margin-top: 2px;
}
.rring small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.ritual.whole {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--r-mind) 14%, var(--panel)),
    color-mix(in srgb, var(--r-heart) 14%, var(--panel))
  );
}
.wellcard.flash {
  animation: glow 1.2s 1;
}
/* ---------- the Commons ---------- */
.commons {
  margin-top: 12px;
}
.cmeadow {
  position: relative;
  height: 150px;
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(#cfe9fb, #eaf6ea 62%);
}
[data-theme='dark'] .cmeadow {
  background: linear-gradient(#27405a, #2a3b33 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cmeadow {
    background: linear-gradient(#27405a, #2a3b33 62%);
  }
}
.cmeadow.fest {
  background: linear-gradient(hsl(var(--eh) 80% 88%), #eaf6ea 62%);
}
.cmgrass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: radial-gradient(120% 90% at 50% 0, #9bd48a, #77bd6a);
  border-radius: 50% 50% 0 0/22% 22% 0 0;
}
[data-theme='dark'] .cmgrass {
  background: radial-gradient(120% 90% at 50% 0, #3f6b3a, #2f5530);
}
.cmdecor i {
  position: absolute;
  font-style: normal;
  top: 8px;
  left: calc(6% + var(--i) * 20%);
  font-size: 18px;
  animation: pbob 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.6s);
}
.cmpet {
  position: absolute;
  transform: translateX(-50%);
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cmwander var(--d) ease-in-out infinite alternate;
  animation-delay: var(--dl);
  z-index: 1;
}
.cmpet .cmbody {
  width: 52px;
  height: 52px;
  display: block;
  animation: pbob 2.4s ease-in-out infinite;
  animation-delay: var(--dl);
}
.cmpet .cmbody svg {
  width: 100%;
  height: 100%;
}
.cmpet.me .cmbody {
  width: 60px;
  height: 60px;
}
.cmpet.me {
  z-index: 2;
}
.cmtag {
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 800;
  background: #ffffffd9;
  color: #1d1a16;
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: -4px;
  white-space: nowrap;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmpet.me .cmtag {
  background: var(--text);
  color: var(--bg);
}
.cmpet.sel .cmtag {
  background: var(--accent);
  color: var(--accent-ink);
}
.cmpet.hop .cmbody {
  animation: hop 0.6s ease-out 1;
}
@keyframes cmwander {
  from {
    margin-left: -14px;
  }
  to {
    margin-left: 14px;
  }
}
.cmheart {
  position: absolute;
  bottom: 60px;
  font-size: 18px;
  pointer-events: none;
  animation: cmheart 1.4s ease-out forwards;
  z-index: 3;
}
@keyframes cmheart {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.6);
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), -70px) scale(1.2);
  }
}
.cmpop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel2);
}
.cmhint {
  margin-top: 8px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cmpet,
  .cmpet .cmbody,
  .evfloat i,
  .evemo,
  .cmdecor i {
    animation: none;
  }
}
#evhue input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    hsl(0 80% 62%),
    hsl(60 80% 62%),
    hsl(120 70% 55%),
    hsl(180 70% 55%),
    hsl(240 70% 65%),
    hsl(300 70% 65%),
    hsl(350 80% 62%)
  );
}
#evhue input[type='range']::-moz-range-track {
  background: linear-gradient(
    90deg,
    hsl(0 80% 62%),
    hsl(60 80% 62%),
    hsl(120 70% 55%),
    hsl(180 70% 55%),
    hsl(240 70% 65%),
    hsl(300 70% 65%),
    hsl(350 80% 62%)
  );
}
#evhue input[type='range']::-moz-range-progress {
  background: transparent;
}

/* card album: names sit on a dark strip so they read on light and shiny cards */
.ccard .cc-nm {
  position: relative;
  z-index: 2;
  background: #1d1d2bdc;
  color: #fff;
  border-radius: 7px;
  padding: 3px 5px;
  width: 100%;
  box-sizing: border-box;
  text-shadow: none;
}
.ccard .cc-r {
  position: relative;
  z-index: 2;
  background: #1d1d2bb8;
  color: #fff;
  border-radius: 6px;
  padding: 1px 6px;
  margin-top: 3px;
  opacity: 1;
}
.ccard .cc-top {
  position: relative;
  z-index: 2;
}
.ccard .cc-top > span:first-child {
  background: #1d1d2bb0;
  border-radius: 99px;
  padding: 0 4px;
}
.ccard.ghost .cc-nm {
  background: #1d1d2bb0;
  color: #fff;
}
/* showcase pet + photos */
.sc-pet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.sc-portrait {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 16px;
  background: linear-gradient(#cfe9fb, #e7f5e3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sc-portrait svg {
  width: 56px;
  height: 56px;
}
.phgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.phthumb {
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--panel2);
  cursor: pointer;
}
.phthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phthumb.sm {
  width: 64px;
  flex: none;
}
.phthumb[aria-pressed='true'] {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.wphrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}
.pvwrap {
  position: relative;
  margin: 12px 0 6px;
}
.pvimg {
  width: 100%;
  border-radius: 14px;
  display: block;
  max-height: 62vh;
  object-fit: contain;
  background: var(--panel2);
}
.pvnav {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  background: #fffd;
}
.pvnav.r {
  left: auto;
  right: 6px;
}
.seg.wseg {
  flex-wrap: wrap;
}
.seg.wseg button {
  flex: 1 0 30%;
}
.ccard.mini .cc-nm {
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 3px;
}

/* holiday calendar */
.hdlist {
  margin-top: 6px;
  max-height: 520px;
  overflow: auto;
  border-radius: 12px;
}
.hdrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  margin-top: 6px;
  background: linear-gradient(90deg, hsl(var(--eh) 80% 92% / 0.9), transparent 70%);
}
[data-theme='dark'] .hdrow {
  background: linear-gradient(90deg, hsl(var(--eh) 40% 25% / 0.7), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hdrow {
    background: linear-gradient(90deg, hsl(var(--eh) 40% 25% / 0.7), transparent 70%);
  }
}
.hdrow .hdemo {
  font-size: 26px;
  width: 34px;
  text-align: center;
  flex: none;
}
.hdrow .adt {
  flex: 1;
  min-width: 0;
}
.hdrow .btn.sm {
  padding: 6px 10px;
  flex: none;
}
.hdrow.on {
  opacity: 0.75;
}
.hdcats {
  flex-wrap: wrap;
}
.evup.clip > .adrow:nth-child(n + 7) {
  display: none;
}
.evday {
  margin-top: 6px;
  font-weight: 800;
  font-size: 14px;
}
.ab-tag {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
}
.ab-foot {
  text-align: center;
  margin: 20px 0 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.ab-foot .buildtag {
  opacity: 0.75;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.nav [data-tab='pet'] {
  position: relative;
}
.navdot {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--panel);
}
/* breathing room at the bottom so nothing hides behind the tab bar, the pet, floating buttons or the phone's home bar */
.wrap {
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}
body.ingame .wrap {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
#gbox {
  padding-bottom: 12px;
}
dialog > div {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 960px) {
  .wrap {
    padding-bottom: 110px;
  }
  body.ingame .wrap {
    padding-bottom: 110px;
  }
}
.numpad {
  width: min(340px, calc(100vw - 72px));
}
.ansbox {
  width: min(220px, calc(100vw - 120px));
}
.namechk.ok {
  color: var(--good);
}
.namechk.bad {
  color: var(--bad);
}
.namechk .linkbtn {
  font-size: inherit;
}
/* Today header: brand + stats on one line, greeting and vibe underneath */
.tophead {
  padding-top: calc(12px + env(safe-area-inset-top));
  margin-bottom: 10px;
}
.th-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.th-row .brandbtn {
  flex: none;
}
.th-row .pill.sm {
  padding: 5px 9px;
  font-size: 13.5px;
  min-height: 0;
  white-space: nowrap;
}
.th-row .iconbtn.bell {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  flex: none;
}
.th-row .avatar {
  flex: none;
}
.th-greet {
  font-family: var(--hand);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 2px;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.15;
}
.th-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
}
.th-sub .vibe {
  margin: 0;
  font-size: 13.5px;
}
.th-date {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 380px) {
  .th-row .brandbtn {
    font-size: 0;
    gap: 0;
  }
  .th-row .brandbtn .logo {
    font-size: 16px;
  }
}
@media (min-width: 960px) {
  .tophead {
    padding-top: 20px;
  }
}
/* welcome incubator */
.incub {
  position: relative;
  width: 150px;
  height: 138px;
  margin: 4px auto 0;
}
.inc-glow {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 130px;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #ffb93866, transparent);
  animation: incglow 2.4s ease-in-out infinite;
}
.inc-egg {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 78px;
  height: 90px;
  transform: translateX(-50%);
  transform-origin: 50% 90%;
  animation: incrock 3.2s ease-in-out infinite;
  cursor: pointer;
  z-index: 1;
}
.inc-egg svg {
  width: 100%;
  height: 100%;
}
.inc-egg.wig {
  animation: incwig 0.6s ease-in-out 1;
}
.inc-dome {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 120px;
  height: 112px;
  transform: translateX(-50%);
  border-radius: 60px 60px 8px 8px;
  border: 2px solid #ffffffb0;
  background: linear-gradient(115deg, #ffffff70 8%, #ffffff12 30%, #ffffff05 60%, #ffffff40 92%);
  box-shadow:
    inset 0 0 18px #ffffff60,
    0 2px 10px #0001;
  z-index: 2;
  pointer-events: none;
}
.inc-base {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: linear-gradient(#e8a23a, #c77d1f);
  box-shadow: 0 3px 0 #9a5f12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.inc-base i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dff9a;
  box-shadow: 0 0 6px #7dff9a;
  animation: incblink 1.8s infinite;
}
.inc-base i:nth-child(2) {
  animation-delay: 0.6s;
}
.inc-base i:nth-child(3) {
  animation-delay: 1.2s;
}
.inc-base span {
  font:
    800 11px/1 system-ui,
    sans-serif;
  color: #3a2300;
  margin-left: 6px;
}
.inc-cap {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 2px;
}
@keyframes incrock {
  0%,
  100% {
    transform: translateX(-50%) rotate(-3deg);
  }
  50% {
    transform: translateX(-50%) rotate(3deg);
  }
}
@keyframes incwig {
  0%,
  100% {
    transform: translateX(-50%) rotate(0);
  }
  20% {
    transform: translateX(-50%) rotate(-12deg);
  }
  40% {
    transform: translateX(-50%) rotate(10deg);
  }
  60% {
    transform: translateX(-50%) rotate(-7deg);
  }
  80% {
    transform: translateX(-50%) rotate(4deg);
  }
}
@keyframes incglow {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes incblink {
  0%,
  70%,
  100% {
    opacity: 1;
  }
  80% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inc-egg,
  .inc-glow,
  .inc-base i {
    animation: none;
  }
}
.ab-brand {
  margin: 6px 0 2px;
}
.ab-brand .maker {
  cursor: default;
}
#aboutbody {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.ab-foot {
  margin-bottom: 12px;
}

/* pet club: small pet portraits */
.petclub {
  padding: 6px 14px;
}
.pcrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.pcrow:first-child {
  border-top: 0;
}
.pcrow .pv {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--panel2);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}
.pcrow .pv svg {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
}
.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* new-player dialog: breathing room top and bottom, and it fits the screen */
#namedlg {
  padding: 0;
  overflow-y: auto;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
#namedlg > #welcome {
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
}
#namedlg .brand {
  margin-bottom: 6px;
}
#namedlg h2 {
  margin: 2px 0 4px;
}
#namedlg #welcome > p.muted {
  margin-bottom: 12px;
}
#namedlg .auth-stack {
  margin-top: 10px;
}
#namedlg .or {
  margin: 12px 0 10px;
}
@media (max-height: 900px) {
  #namedlg .incub {
    zoom: 0.82;
  }
  #namedlg .inc-cap {
    margin-top: 4px;
  }
}
@media (max-height: 760px) {
  #namedlg > #welcome {
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  }
  #namedlg .incub {
    zoom: 0.62;
  }
  #namedlg h2 {
    font-size: 20px;
  }
  #namedlg #welcome > p.muted {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  #namedlg .btn {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  #namedlg .namechk,
  #namedlg #welcome > p.small {
    font-size: 11.5px;
    line-height: 1.4;
  }
  #namedlg .auth-stack {
    gap: 8px;
  }
  #namedlg .or {
    margin: 8px 0;
  }
}
@media (max-height: 700px) {
  #namedlg > #welcome {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  #namedlg .incub {
    zoom: 0.5;
  }
  #namedlg .inc-cap {
    font-size: 11.5px;
  }
  #namedlg h2 {
    font-size: 18px;
  }
  #namedlg #welcome > p.muted {
    font-size: 13px;
    margin-bottom: 8px;
  }
  #namedlg .btn {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  #namedlg .tx {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  #namedlg .brand {
    margin-bottom: 2px;
  }
  #namedlg #welcome > p.small {
    font-size: 11px;
    margin-top: 2px;
  }
  #namedlg .namechk {
    font-size: 11px;
  }
}

/* friend rows: on narrow screens the buttons drop below the name instead of squeezing it */
.frow {
  flex-wrap: wrap;
  row-gap: 8px;
}
.frow .t {
  flex: 1 1 150px;
}
.frow .acts {
  margin-left: auto;
}

/* embedded in another site: no menu bar, no sign-up prompts, just the game */
html.embed .nav {
  display: none !important;
}
html.embed .wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 20px;
}
html.embed .buddy {
  display: none !important;
}
html.embed .notif,
html.embed #toastnote,
html.embed .ingame-pet {
  display: none !important;
}

/* admin: Daily 5 */
.d5wl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.d5wi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font-size: 13px;
  cursor: pointer;
}
.d5hits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.d5day {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.d5day:first-child {
  border-top: 0;
}
.d5dg {
  flex: 1 1 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  min-width: 0;
}
.d5pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.d5pick button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.d5pick button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

/* ================= BookBuddies ================= */
:root,
:root[data-theme] {
  --accent: #8cc9a6;
  --accent-ink: #11261d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #79c19b;
  }
}
/* covers */
.bcov {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 6px 10px 10px 6px;
  overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--h) 45% 42%), hsl(calc(var(--h) + 30) 50% 28%));
  color: #fff;
  box-shadow:
    inset 6px 0 0 #0002,
    0 3px 10px #0002;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 8px 8px 12px;
  box-sizing: border-box;
  text-align: left;
}
.bcov img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.bcov-t {
  font: 700 12.5px/1.2 var(--hand);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcov-a {
  font-size: 10px;
  opacity: 0.85;
  margin-top: 4px;
}
.bcov.sm {
  width: 62px;
  flex: none;
}
.bcov.xs {
  width: 40px;
  flex: none;
  border-radius: 4px 6px 6px 4px;
  padding: 3px;
}
.bcov.xs .bcov-t {
  font-size: 8px;
}
.bcov.xs .bcov-a {
  display: none;
}
.bcov.lg {
  width: 132px;
  flex: none;
}
.btile {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  min-width: 0;
}
.btile b {
  font-size: 13px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}
.btile small {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btile em {
  font-size: 11px;
  color: var(--muted);
}
.btile:hover .bcov {
  transform: translateY(-2px);
}
.bcov {
  transition: transform 0.15s;
}
.bgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px 12px;
}
.brow {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.brow::-webkit-scrollbar {
  display: none;
}
.brow .btile {
  width: 96px;
  flex: none;
}
.btile-wrap {
  position: relative;
}
.lrm {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: var(--panel);
  box-shadow: 0 1px 4px #0003;
  font-size: 11px;
  z-index: 2;
  cursor: pointer;
}
.stars {
  color: var(--line);
  letter-spacing: 1px;
}
.stars i {
  font-style: normal;
}
.stars i.on {
  color: #e8a824;
}
.stars.sm {
  font-size: 12px;
}
.pbar {
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
  margin: 8px 0 4px;
}
.pbar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}
.pbar.thin {
  height: 5px;
  margin: 4px 0;
}
/* home */
.nowread {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 10px;
}
.nowread.empty {
  align-items: center;
}
.bttl {
  font-weight: 800;
  font-size: 15.5px;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  padding: 0;
}
.bkstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.bkstats div {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}
.bkstats b {
  display: block;
  font: 700 20px/1.1 var(--hand);
}
.bkstats small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.chal {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  position: relative;
}
.chring {
  width: 84px;
  height: 84px;
  flex: none;
  transform: rotate(-90deg);
}
.chring .rt {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
}
.chring .rf {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s;
}
.chnum {
  position: absolute;
  left: 16px;
  width: 84px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.chnum b {
  display: block;
  font: 700 24px/1 var(--hand);
}
.chnum small {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.feedl {
  padding: 4px 0;
}
.feedi {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.feedi:first-child {
  border-top: 0;
}
.rvsnip {
  margin-top: 3px;
  font-style: italic;
}
/* search */
.bsearch {
  position: relative;
}
.bsearch .tx {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
}
.bqsug {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px #0002;
  overflow: hidden;
}
.bqsug button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 10px;
  text-align: left;
  color: inherit;
  border-top: 1px solid var(--line);
}
.bqsug button:first-child {
  border-top: 0;
}
.bqsug span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bqsug small {
  color: var(--muted);
  font-size: 12px;
}
.subjchips {
  flex-wrap: wrap;
  margin-top: 14px;
}
/* build 499: Discover's shelves fit in three swipeable rows on phones instead of a dozen stacked ones */
@media (max-width: 700px) {
  .chips2.subjchips {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    justify-content: start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -12px;
    padding: 0 12px 4px 0;
    scroll-snap-type: x proximity;
  }
  .chips2.subjchips::-webkit-scrollbar {
    display: none;
  }
  .chips2.subjchips > * {
    scroll-snap-align: start;
    white-space: nowrap;
  }
}
/* build 499: Settings header covers the dialog's top edge, so nothing peeks above it while scrolling */
#setdlg {
  padding-top: 0;
}
/* build 499: Shelves' four views fit a phone; the jump bar stays inside the page */
@media (max-width: 440px) {
  .viewseg.shvseg button {
    padding: 9px 7px;
    font-size: 13px;
    gap: 4px;
  }
  .viewseg.shvseg button svg {
    width: 15px;
    height: 15px;
  }
  .shvjump.shvjump {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* build 499: square and wide covers (picture books, audiobooks) show whole in a tall frame instead of cropped */
img.cv-fit {
  object-fit: contain !important;
  background: color-mix(in srgb, var(--panel2) 85%, #000);
}
.blist {
  padding: 4px 0;
}
.brow1 {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.brow1:first-child {
  border-top: 0;
}
.brow1main {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1 1 220px;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.brow1main span {
  display: flex;
  flex-direction: column;
}
.brow1main small {
  color: var(--muted);
  font-size: 12.5px;
}
.brow1main em {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--good);
  margin-top: 2px;
}
.qacts {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 16px;
  line-height: 1.1;
  color: inherit;
  cursor: pointer;
  min-width: 46px;
}
.qa small {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--muted);
}
.qa.on {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, var(--panel));
}
/* book page */
.bookdlg {
  max-width: 560px;
}
.bkhead {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 4px;
}
.bkmeta {
  min-width: 0;
}
.bkmeta h2 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.2;
}
.bkavg {
  margin: 8px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bkshelves {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.bkshelves button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 9px 4px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--muted);
}
.bkshelves button[aria-checked='true'] {
  border-color: var(--text);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}
.bkprog {
  margin-top: 8px;
}
.ratepick {
  display: inline-flex;
  gap: 2px;
}
.ratepick button {
  border: 0;
  background: none;
  font-size: 26px;
  color: var(--line);
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
}
.ratepick button.on {
  color: #e8a824;
}
.ratepick.big button {
  font-size: 38px;
}
.bkhist {
  margin: 10px 0;
}
.bkhist div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.bkhist span {
  width: 26px;
  color: var(--muted);
}
.bkhist i {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, #e8a824 var(--w), color-mix(in srgb, var(--line) 70%, transparent) var(--w));
}
.bkhist small {
  width: 24px;
  text-align: right;
  color: var(--muted);
}
.bkdesc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-line;
}
.bktags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bktags span {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--panel2);
  border-radius: 99px;
  padding: 3px 9px;
  color: var(--muted);
}
.bkfr .row {
  padding: 4px 0;
}
.review {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
}
.rvtxt {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.45;
}
.rvlike {
  margin-top: 4px;
  font-size: 13px;
  text-decoration: none;
}
.rvlike.on {
  font-weight: 800;
}
#rvtext,
#qrtext {
  width: 100%;
  box-sizing: border-box;
}
/* shelves */
.shelfchips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: -16px;
  padding-right: 16px;
}
.shelfchips::-webkit-scrollbar {
  display: none;
}
.shelfchips button {
  flex: none;
  white-space: nowrap;
}
.shelfchips small {
  opacity: 0.6;
}
.linkbtn.on {
  font-weight: 800;
  text-decoration: underline;
}
.yib .yibbars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 90px;
  align-items: end;
  margin-top: 12px;
}
.yibbars div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.yibbars i {
  display: block;
  width: 100%;
  min-height: 3px;
  background: var(--accent);
  border-radius: 5px 5px 2px 2px;
}
.yibbars small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
/* clubs & custom shelves */
.club .clubm {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.clubm .rk {
  width: 18px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.clubl {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.lpick {
  padding: 4px 0;
}
.lrow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.lrow:first-child {
  border-top: 0;
}
.lrow input {
  width: 20px;
  height: 20px;
  flex: none;
}
/* about */
.abx-why {
  margin-top: 14px;
  line-height: 1.55;
}
.abx-why p {
  margin: 8px 0 0;
  font-size: 14.5px;
}
.abx-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 520px) {
  .abx-feats {
    grid-template-columns: 1fr 1fr;
  }
}
.abx-f {
  display: flex;
  gap: 10px;
  background: var(--panel2);
  border-radius: 14px;
  padding: 12px;
}
.abx-f > span {
  font-size: 24px;
  line-height: 1;
}
.abx-f b {
  font-size: 14.5px;
}
.abx-f p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.abx-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.abx-steps div {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.abx-steps i {
  font-style: normal;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.abx-steps b {
  font-size: 14px;
}
.abx-steps small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.abx-vals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.abx-vals > div {
  display: flex;
  gap: 10px;
}
.abx-vals span {
  font-size: 22px;
}
.abx-vals small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}
@media (max-width: 380px) {
  .abx-steps {
    grid-template-columns: 1fr;
  }
}
#aboutbody > .row:first-child {
  position: sticky;
  top: 8px;
  z-index: 3;
  pointer-events: none;
  margin-bottom: -6px;
}
#aboutbody > .row:first-child .iconbtn {
  pointer-events: auto;
}
.abx-steps small {
  font-size: 13px;
}
.abx-steps b {
  line-height: 1.25;
}
.abx-more {
  margin-top: 10px;
}
.abx-more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  color: var(--text);
}
.abx-more > summary::-webkit-details-marker {
  display: none;
}
.abx-more > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.abx-more[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.abx-more > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.abx-more > .abx-feats {
  margin-top: 8px;
}
/* ===== bookstore look: warm paper, wood shelves, serif headings ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');
:root,
:root[data-theme] {
  --accent: #b8743f;
  --accent-ink: #fff8ee;
  --hand: 'Fraunces', Georgia, 'Times New Roman', serif;
}
:root:not([data-theme='dark']) {
  --bg: #f6efe3;
  --panel: #fffaf1;
  --panel2: #f1e6d4;
  --line: #e3d4bb;
  --text: #2a1f16;
  --muted: #65543f;
  --accent: #8f5224;
  --accent-ink: #fffaf1;
  --good: #2b6b40;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14110e;
    --panel: #1e1813;
    --panel2: #272019;
    --line: #3a2f24;
    --text: #f5ecdf;
    --muted: #c2b19b;
    --accent: #d99a62;
    --accent-ink: #14110e;
  }
}
:root[data-theme='dark'] {
  --bg: #14110e;
  --panel: #1e1813;
  --panel2: #272019;
  --line: #3a2f24;
  --text: #f5ecdf;
  --muted: #c2b19b;
  --accent: #d99a62;
  --accent-ink: #14110e;
}
body {
  background: radial-gradient(1200px 600px at 10% -10%, #e9d7b818, transparent), var(--bg);
}
.sec-h {
  font-family: var(--hand);
  letter-spacing: -0.01em;
}
.th-greet {
  font-family: var(--hand);
}
.bookline {
  margin: 6px 0 2px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-radius: 0 12px 12px 0;
}
.bookline q {
  display: block;
  font: italic 600 15px/1.4 var(--hand);
  quotes: '“' '”';
}
.bookline cite {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  font-style: normal;
}
.bookline cite::before {
  content: '— ';
}
/* wooden shelves under rows of covers */
.shelfrow,
.shelfgrid,
.fbrow {
  position: relative;
}
.shelfrow {
  padding-bottom: 22px;
  background: linear-gradient(
      transparent calc(100% - 18px),
      #9b6a3f calc(100% - 18px),
      #7c5230 calc(100% - 8px),
      #5f3d22 100%
    )
    no-repeat;
  border-radius: 0 0 6px 6px;
}
.shelfrow .btile small,
.shelfrow .btile b {
  text-shadow: none;
}
/* featured popular books */
.featbooks {
  margin: 12px -16px 4px;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, #7a4b2a, #5e391f);
  color: #fff5e6;
  box-shadow:
    inset 0 -10px 0 #4a2c17,
    0 6px 18px #0002;
}
@media (min-width: 720px) {
  .featbooks {
    margin: 12px 0 4px;
    border-radius: 18px;
  }
}
.featbooks.skel {
  height: 250px;
  opacity: 0.5;
}
.fbh {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.fbh b {
  flex: 1;
  font: 800 19px var(--hand);
}
.fbh .linkbtn {
  color: #ffe2bb;
}
.fbrow {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.fbrow::-webkit-scrollbar {
  display: none;
}
.fbk {
  position: relative;
  flex: none;
  width: 118px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  animation: fbin 0.5s both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes fbin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.fbk .bcov {
  box-shadow: 4px 6px 14px #0006;
}
.fbk b {
  font-size: 13px;
  line-height: 1.2;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fbk small {
  font-size: 11px;
  opacity: 0.8;
}
.fbk em {
  position: absolute;
  top: 6px;
  right: 6px;
  font-style: normal;
  background: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.fbrank {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #ffcf6b;
  color: #3a2410;
  font: 900 12px/1 var(--hand);
  padding: 5px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 6px #0004;
  z-index: 2;
}
.fbhot {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e5484d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 6px;
  z-index: 2;
}
/* live ticker */
.bticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 7px 10px;
  margin-top: 10px;
  overflow: hidden;
}
.bticker .live {
  font-size: 11px;
  font-weight: 900;
  color: #d64545;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.bticker .live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d64545;
  animation: glow 1.4s infinite;
}
.tkwrap {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tkrun {
  display: inline-flex;
  gap: 26px;
  white-space: nowrap;
  animation: tkmove var(--dur) linear infinite;
}
.bticker:hover .tkrun {
  animation-play-state: paused;
}
@keyframes tkmove {
  to {
    transform: translateX(-50%);
  }
}
.tk {
  font-size: 13px;
}
.tk b {
  cursor: pointer;
}
.tk i {
  font-style: normal;
  color: var(--muted);
  font-size: 11.5px;
}
.tk .linkbtn {
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .tkrun {
    animation: none;
  }
}
/* goals, levels, badges */
.dgoal {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  position: relative;
}
.dgring {
  width: 74px;
  height: 74px;
  flex: none;
  transform: rotate(-90deg);
}
.dgring .rt {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
}
.dgring .rf {
  fill: none;
  stroke: #3f9a67;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s;
}
.dgnum {
  position: absolute;
  left: 16px;
  width: 74px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.dgnum b {
  font: 800 22px/1 var(--hand);
}
.dgnum small {
  font-size: 11px;
  color: var(--muted);
}
.lvcard {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  color: inherit;
}
.lvbadge {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7c66a, #d88a2e);
  color: #3a2410;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -3px 0 #0002;
}
.lvbadge b {
  font: 900 22px/1 var(--hand);
}
.lvbadge small {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.goals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.goal > span {
  font-size: 20px;
  width: 26px;
  text-align: center;
}
.bbadges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.bbadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--panel2);
}
.bbadge span {
  font-size: 26px;
}
.bbadge b {
  font-size: 12px;
}
.bbadge small {
  font-size: 10.5px;
  color: var(--muted);
}
.bbadge.locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.lvlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.lvlist div {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  opacity: 0.6;
}
.lvlist div.got {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.lvlist b {
  grid-row: span 2;
  font: 800 18px var(--hand);
  text-align: center;
}
.lvlist small {
  color: var(--muted);
  font-size: 11.5px;
}
/* book page */
.bktabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--line);
  margin: 14px 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bktabs button {
  flex: none;
  border: 0;
  background: none;
  padding: 9px 12px 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.bktabs button[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.bkdesc.clamp {
  max-height: 9.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
}
.bkdesc.open {
  max-height: none;
  -webkit-mask-image: none;
}
.bktags button {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--panel2);
  border-radius: 99px;
  padding: 3px 9px;
  color: var(--muted);
  border: 0;
  cursor: pointer;
}
.authlink {
  font-weight: 800;
  color: var(--text);
}
.authlink.sm {
  font-size: 12.5px;
  font-weight: 700;
}
.extrat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.xr {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12.5px;
  background: var(--panel2);
  border-radius: 10px;
  padding: 4px 8px;
  color: inherit;
  text-decoration: none;
}
.xr small {
  color: var(--muted);
}
.extlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.extlinks a {
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
}
.emosum {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 13px;
}
.emochip {
  font-size: 15px;
}
.emopick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.emopick button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 6px 2px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}
.emopick small {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.1;
}
.emopick button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.bkstatgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.bkstatgrid div {
  background: var(--panel2);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
.bkstatgrid b {
  display: block;
  font: 700 17px var(--hand);
}
.bkstatgrid small {
  font-size: 11px;
  color: var(--muted);
}
.emobars div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}
.emobars span {
  width: 150px;
  flex: none;
}
.emobars i {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--w), color-mix(in srgb, var(--line) 70%, transparent) var(--w));
}
.pro {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 8px;
}
.pro small {
  color: var(--accent);
  font-weight: 700;
}
.posts {
  padding: 4px 0;
}
.post {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.post:first-child {
  border-top: 0;
}
.pct {
  font-weight: 800;
  font-size: 11px;
  background: var(--panel2);
  border-radius: 6px;
  padding: 1px 6px;
}
.lockedposts {
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
  background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 8px, var(--panel) 8px, var(--panel) 16px);
}
.rcfr {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rcfr button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 99px;
  padding: 4px 10px 4px 4px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.rcfr button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
/* discover */
.bfilters {
  margin-top: 10px;
}
.bfilters summary {
  cursor: pointer;
}
.bfgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .bfgrid {
    grid-template-columns: 1fr;
  }
}
.bfgrid label,
.rqform label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
}
.bfgrid .tx,
.rqform .tx,
.rqform textarea {
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  color: var(--text);
}
.rqform {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sugall {
  justify-content: center;
  font-weight: 800;
  color: var(--accent) !important;
}
.tagsd {
  font-size: 10px;
  font-weight: 800;
  background: color-mix(in srgb, var(--good) 18%, transparent);
  border-radius: 6px;
  padding: 1px 5px;
  vertical-align: 1px;
}
.matches {
  padding: 4px 0;
}
.match {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
}
.match:first-child {
  border-top: 0;
}
.match small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.mpct {
  font: 800 16px var(--hand);
  color: #3f9a67;
}
.sisnudge {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 4px;
}
.sisnudge a {
  font-weight: 800;
  color: var(--accent);
}
.breq {
  margin-top: 8px;
}
.bcov.feat {
  width: 118px;
}
/* clubs, challenges, moderation, pet reading, custom shelves */
.clubtag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--text);
  border: 0;
  margin-left: 4px;
  vertical-align: 1px;
  cursor: pointer;
  white-space: nowrap;
}
.topclubs {
  padding: 4px 0;
}
.tcl {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
}
.tcl:first-child {
  border-top: 0;
}
.tcl .rk {
  width: 24px;
  font-size: 16px;
  text-align: center;
}
.chals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chl.done {
  opacity: 0.85;
}
.chl.missed {
  opacity: 0.55;
}
.modi.rep {
  border-color: #e5484d;
}
.modi.hid {
  opacity: 0.6;
}
.adbadge.rep {
  background: color-mix(in srgb, #e5484d 22%, var(--panel));
}
.rvrep {
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.6;
  text-decoration: none;
}
.rvrep:hover {
  opacity: 1;
}
.homeshelf {
  margin-top: 4px;
}
.homeend {
  padding: 16px 0 10px;
}
#petstage.reading svg {
  animation: preadbob 2.4s ease-in-out infinite !important;
  transform-origin: 50% 95%;
}
@keyframes preadbob {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-3px);
  }
}
.petbook {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: 62px;
  height: 40px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  perspective: 200px;
  filter: drop-shadow(0 3px 3px #0003);
}
.petbook span {
  flex: 1;
  background: linear-gradient(90deg, #fff, #f1e6d4);
  border: 2px solid #7a4b2a;
  border-radius: 3px 0 0 3px;
}
.petbook .pb-r {
  border-radius: 0 3px 3px 0;
  background: linear-gradient(270deg, #fff, #f1e6d4);
}
.petbook i {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fffaf1;
  border: 2px solid #7a4b2a;
  border-radius: 0 3px 3px 0;
  transform-origin: 0 50%;
  animation: pageflip 2.2s ease-in-out infinite;
}
@keyframes pageflip {
  0%,
  40% {
    transform: rotateY(0);
  }
  70%,
  100% {
    transform: rotateY(-170deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .petbook i,
  #petstage.reading svg {
    animation: none !important;
  }
}
/* customizable shelves */
.shelfrow,
.shelfgrid {
  --sh1: #9b6a3f;
  --sh2: #7c5230;
  --sh3: #5f3d22;
}
:root[data-shelf] .shelfrow {
  background: linear-gradient(
      transparent calc(100% - 18px),
      var(--sh1) calc(100% - 18px),
      var(--sh2) calc(100% - 8px),
      var(--sh3) 100%
    )
    no-repeat;
}
.shelfrow::after {
  content: var(--deco, '');
  position: sticky;
  right: 0;
  align-self: flex-end;
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px 16px;
  white-space: nowrap;
  flex: none;
}
:root[data-shelf='rainbow'] .shelfrow {
  background: linear-gradient(
      transparent calc(100% - 18px),
      #ff8a8a calc(100% - 18px),
      #ffd36e calc(100% - 12px),
      #7fd6a4 calc(100% - 6px),
      #8ab6ff 100%
    )
    no-repeat;
}
.shprev {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  min-height: 120px;
  padding: 10px 10px 22px;
  margin-top: 10px;
  border-radius: 12px;
  background-color: var(--panel2);
}
.shthemes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.shthemes button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.shthemes i {
  width: 100%;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--a), var(--b));
}
.shthemes button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.shthemes button:disabled,
.shdecor button:disabled {
  opacity: 0.5;
}
.shthemes small,
.shdecor small {
  font-size: 10px;
  color: var(--muted);
}
.shdecor {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.shdecor button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.shdecor span {
  font-size: 22px;
}
.shdecor button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

/* legible notification dots in both themes */
.dot-badge {
  background: #b83c32 !important;
  color: #fff !important;
}
.buildtag {
  opacity: 0.9 !important;
}
/* ===== the home store: aisles, shelf signs, shelf talkers ===== */
.storehead {
  margin: 26px 0 6px;
}
.storehead h2 {
  margin: 0;
  font: 800 24px/1.15 var(--hand);
}
.storehead p {
  margin: 4px 0 0;
}
.pstore {
  min-height: 60vh;
}
.pstore.ready,
#bkfeat.ready {
  animation: storein 0.45s ease both;
}
@keyframes storein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.aislenav {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px -16px 6px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.aislenav::-webkit-scrollbar {
  display: none;
}
.aislenav button {
  flex: none;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 99px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.aislenav button:hover {
  border-color: var(--accent);
}
.aislenav.skel span {
  flex: none;
  width: 110px;
  height: 32px;
  border-radius: 99px;
  background: var(--panel2);
}
.aisle {
  scroll-margin-top: 56px;
  margin-top: 18px;
}
.aislesign {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 18px auto 10px;
  padding: 12px 18px 10px;
  max-width: 420px;
  border-radius: 12px;
  background: linear-gradient(180deg, #6b4221, #4a2c17);
  color: #fff3e0;
  box-shadow:
    0 6px 16px #0004,
    inset 0 1px 0 #ffffff22;
  border: 2px solid #8e5d31;
}
.aislesign::before,
.aislesign::after {
  content: '';
  position: absolute;
  top: -14px;
  width: 2px;
  height: 14px;
  background: #8e5d31;
}
.aislesign::before {
  left: 26%;
}
.aislesign::after {
  right: 26%;
}
.aislesign .asn {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0.85;
}
.aislesign b {
  font: 800 20px/1.2 var(--hand);
}
.aislesign small {
  font-size: 12.5px;
  opacity: 0.9;
}
.strow {
  margin-top: 8px;
}
.shsign {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
}
.shsign b {
  display: inline-block;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 5px 10px;
  font: 800 15px/1.2 var(--hand);
  box-shadow: 0 2px 6px #0002;
}
.shsign .linkbtn {
  margin-left: auto;
  font-weight: 800;
}
.stile {
  position: relative;
}
.talker {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  z-index: 3;
  white-space: nowrap;
  background: #fff4c2;
  color: #3d2b10;
  font:
    800 10.5px/1 system-ui,
    sans-serif;
  padding: 5px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0004;
}
.stile .onshelf {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  font-style: normal;
  background: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 1px 4px #0003;
}
.petpicks .pickbub {
  position: relative;
  display: inline-block;
  margin: 0 0 8px 4px;
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  font-size: 13.5px;
}
.storeend {
  margin: 28px 0 8px;
  text-align: center;
}
.sktile .bcov,
.featbooks.skel .bcov {
  background: linear-gradient(
    100deg,
    var(--panel2) 30%,
    color-mix(in srgb, var(--panel2) 60%, var(--line)) 50%,
    var(--panel2) 70%
  );
  background-size: 300% 100%;
  animation: skshine 1.3s linear infinite;
  box-shadow: none;
}
.skbar {
  display: block;
  height: 12px;
  width: 70%;
  margin-top: 8px;
  border-radius: 6px;
  background: var(--panel2);
}
.shsign .skbar {
  width: 160px;
  height: 26px;
  margin: 0;
}
@keyframes skshine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.featbooks.skel {
  height: auto;
  opacity: 1;
}
.featbooks.skel .fbk {
  width: 118px;
}
@media (prefers-reduced-motion: reduce) {
  .pstore.ready,
  #bkfeat.ready,
  .sktile .bcov,
  .featbooks.skel .bcov {
    animation: none;
  }
}
.pstore .shelfrow::after {
  content: none;
}
/* where to get it */
.getit {
  padding: 12px;
}
.giavail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.giavail:not(:empty) {
  margin-bottom: 10px;
}
.gichip {
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
  border: 1.5px solid var(--line);
  background: var(--panel2);
  border-radius: 99px;
  padding: 6px 11px;
}
.gichip.free {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 16%, var(--panel));
}
.gichip.lib {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.gitabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--panel2);
  border-radius: 12px;
  padding: 4px;
}
.gitabs button {
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 800;
  font-size: 12.5px;
  border-radius: 9px;
  padding: 8px 2px;
  cursor: pointer;
}
.gitabs button[aria-selected='true'] {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 4px #0003;
}
.gipane {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.gitabs {
  grid-template-columns: repeat(5, 1fr);
}
.gipane.gpprice {
  display: block;
}
.gipane.gpprice[hidden] {
  display: none;
}
.gpbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.gpchips {
  display: flex;
  gap: 4px;
}
.gpchips button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 11px;
  font:
    700 12.5px/1 Figtree,
    system-ui,
    sans-serif;
  cursor: pointer;
}
.gpchips button[aria-pressed='true'] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.gpsort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font:
    700 12.5px/1 Figtree,
    system-ui,
    sans-serif;
  color: var(--muted);
}
.gpsort select {
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 8px;
  font:
    600 13px/1.1 Figtree,
    system-ui,
    sans-serif;
}
.gplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.gprow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease-out;
}
.gprow:hover {
  border-color: var(--accent);
}
.gprow.best {
  border-color: color-mix(in srgb, #3f9a5a 60%, var(--line));
  background: color-mix(in srgb, #3f9a5a 8%, var(--panel));
}
.gpsrc {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.gpsrc b {
  font-size: 14px;
}
.gpsrc small {
  font-size: 11.5px;
  color: var(--muted);
}
.gpp {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.gpp b {
  font-size: 17px;
}
.gpp s {
  font-size: 12px;
  color: var(--muted);
}
.gprow.best .gpp b {
  color: #2f8a4c;
}
.gprow.nop {
  margin-top: 6px;
  border-style: dashed;
  background: none;
}
.gprow.nop .gpp small {
  font:
    700 12.5px/1 Figtree,
    system-ui,
    sans-serif;
  color: var(--muted);
}
.gpmeta {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--muted);
}
.gpmeta .linkbtn {
  font-size: 12px;
}
.gpempty {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel2);
}
.gptrack {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--panel2);
  display: grid;
  gap: 10px;
}
.gptrack.on {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel2));
}
.gpth {
  display: grid;
  gap: 2px;
}
.gpth b {
  font-size: 14px;
}
.gpth small {
  font-size: 12px;
  color: var(--muted);
}
.gptf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gptin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    700 12.5px/1 Figtree,
    system-ui,
    sans-serif;
  color: var(--muted);
}
.gptin input {
  width: 96px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font:
    700 15px/1 Figtree,
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.gpall {
  justify-self: start;
  font-size: 13px;
}
.gpprint {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}
.gpprint b {
  font-size: 13.5px;
}
.gpprint small {
  font-size: 12px;
  color: var(--muted);
}
.gplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.gplinks a {
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font:
    600 12.5px/1.1 Figtree,
    system-ui,
    sans-serif;
}
.gplinks a:hover {
  border-color: var(--accent);
}
.gpsk {
  display: grid;
  gap: 6px;
}
.gpsk i {
  display: block;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--panel2), color-mix(in srgb, var(--panel2) 50%, var(--panel)), var(--panel2));
  background-size: 200% 100%;
  animation: gpsk 1.2s linear infinite;
}
@keyframes gpsk {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gpsk i {
    animation: none;
  }
}
.ptlist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ptrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel2);
}
.ptrow.hit {
  background: color-mix(in srgb, #3f9a5a 14%, var(--panel2));
}
.ptb {
  all: unset;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ptb b {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptb small {
  font-size: 12px;
  color: var(--muted);
}
.ptb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.ptp {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.ptp b {
  font-size: 16px;
}
.ptp small {
  font-size: 11.5px;
  color: var(--muted);
}
.ptp .dn {
  color: #2f8a4c;
  font-weight: 800;
}
.ptp .up {
  color: #c0503a;
  font-weight: 800;
}
.ptacts {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 420px) {
  .gitabs button {
    font-size: 11.5px;
  }
  .ptrow {
    grid-template-columns: 1fr auto;
  }
  .ptacts {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}
.gilink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
}
.gilink:hover {
  border-color: var(--accent);
}
.gie {
  font-size: 20px;
}
.gin {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.gin b {
  font-size: 14px;
}
.gin small {
  font-size: 11.5px;
  color: var(--muted);
}
.gia {
  color: var(--muted);
  font-weight: 800;
}
/* reading buddy */
.rbuddy {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
}
.bdpet {
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}
.bdpet svg {
  width: 84px;
  height: 84px;
}
.bdpet.happy svg {
  animation: bdhop 1.6s ease-in-out infinite;
}
.bdegg {
  font-size: 52px;
}
.bdtxt {
  flex: 1;
  min-width: 0;
}
.bdtxt > b {
  font: 800 17px/1.25 var(--hand);
}
.bdnext {
  margin-top: 6px;
}
@keyframes bdhop {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}
.rsstage {
  position: relative;
  height: 170px;
  margin: 10px 0 4px;
  border-radius: 18px;
  background: radial-gradient(
    120% 90% at 50% 100%,
    color-mix(in srgb, var(--accent) 22%, var(--panel2)),
    var(--panel2)
  );
  overflow: hidden;
}
.rspet {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
}
.rspet svg {
  width: 140px;
  height: 140px;
  animation: preadbob 2.4s ease-in-out infinite;
  transform-origin: 50% 95%;
}
.rsbook {
  bottom: 18px;
}
.rsstage.paused .rspet svg,
.rsstage.paused .petbook i {
  animation-play-state: paused;
}
.rsbub {
  position: relative;
  margin: 4px auto 0;
  max-width: 340px;
  text-align: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1.5px solid var(--line);
  font-size: 14px;
  min-height: 20px;
}
.rstime {
  text-align: center;
  font: 800 44px/1.1 var(--hand);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.rsstk {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  font-size: 22px;
}
.buddypop {
  position: fixed;
  left: 50%;
  width: max-content;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  padding: 8px 14px 8px 8px;
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);
  box-shadow: 0 10px 30px #0006;
  font-weight: 700;
  font-size: 14px;
  transition: 0.3s;
}
.buddypop.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.bpp {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.bpp svg {
  width: 46px;
  height: 46px;
}
.bpp .bdegg {
  font-size: 32px;
}
@media (prefers-reduced-motion: reduce) {
  .bdpet.happy svg,
  .rspet svg {
    animation: none;
  }
}
/* club competitions */
.comp {
  padding: 12px 14px;
}
.comp.done {
  opacity: 0.92;
}
.cpbadge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1.5px solid var(--line);
  background: var(--panel2);
}
.cpbadge.cup {
  border-color: #c9a13b;
  color: var(--text);
  background: color-mix(in srgb, #e8b33a 22%, var(--panel));
}
.cpbadge.duel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.cptitle {
  display: block;
  font: 800 18px/1.25 var(--hand);
  margin: 6px 0 2px;
}
.cpvs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}
.cpvs .vs {
  align-self: center;
  font: 800 14px var(--hand);
  color: var(--muted);
}
.cpside {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.cpside.me {
  border-color: var(--accent);
}
.cpside.win {
  border-color: #d9a52e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d9a52e 35%, transparent);
}
.cpbar {
  height: 10px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
  margin: 6px 0 4px;
}
.cpbar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.6s;
}
.cpbar.sm {
  height: 7px;
  width: 80px;
  margin: 0;
  flex: none;
}
.cpresult {
  margin-top: 8px;
  font-weight: 800;
}
.cplb {
  margin-top: 8px;
}
.cprow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-top: 1px solid var(--line);
}
.cprow:first-child {
  border-top: 0;
}
.cprow.me {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 8px;
}
.cprow .rk {
  width: 24px;
  text-align: center;
}
.cpsc {
  min-width: 36px;
  text-align: right;
}
.cppast summary {
  cursor: pointer;
  margin: 8px 0;
}
.newrib {
  position: absolute;
  top: 8px;
  left: -3px;
  z-index: 3;
  background: #c2410c;
  color: #fff;
  font:
    800 10px/1 system-ui,
    sans-serif;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 2px 4px #0005;
}
/* ===== the Shelves tab: one bookcase ===== */
.shvbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 8px;
}
.shvbar .tx {
  flex: 1;
  min-width: 0;
  font-size: 15px;
}
.shvjump {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 4px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.shvjump::-webkit-scrollbar {
  display: none;
}
.shvjump button {
  flex: none;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 99px;
  padding: 6px 11px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.shvjump small {
  color: var(--muted);
  margin-left: 2px;
}
.bookcase {
  position: relative;
  padding: 12px 12px 16px;
  margin: 6px -4px 14px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #5e391f 30%, var(--panel2)),
    color-mix(in srgb, #4a2c17 22%, var(--panel2))
  );
  border: 3px solid color-mix(in srgb, #6b4221 70%, var(--line));
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, #8e5d31 25%, transparent),
    0 8px 22px #0003;
}
.bcshelf {
  scroll-margin-top: 60px;
  margin-bottom: 14px;
}
.bchead {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}
.bcname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--panel);
  color: var(--text);
  border-radius: 9px;
  padding: 5px 10px;
  border-left: 5px solid var(--accent);
  box-shadow: 0 2px 6px #0003;
  cursor: pointer;
  max-width: 78%;
}
.bcname b {
  font: 800 15px/1.2 var(--hand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bcname small {
  color: var(--muted);
  font-weight: 800;
}
.bce {
  font-size: 16px;
}
.iconbtn.sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.bcrow {
  padding: 6px 4px 24px;
  min-height: 120px;
  background: linear-gradient(
      transparent calc(100% - 18px),
      var(--sh1, #9b6a3f) calc(100% - 18px),
      var(--sh2, #7c5230) calc(100% - 8px),
      var(--sh3, #5f3d22) 100%
    )
    no-repeat !important;
}
.bcrow .btile {
  width: 92px;
}
.bcgrid {
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-bottom: 10px solid var(--sh2, #7c5230);
}
.bcempty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 84px;
  padding: 10px 14px 28px;
  font-size: 13px;
  color: var(--muted);
  background: linear-gradient(
      transparent calc(100% - 18px),
      var(--sh1, #9b6a3f) calc(100% - 18px),
      var(--sh2, #7c5230) calc(100% - 8px),
      var(--sh3, #5f3d22) 100%
    )
    no-repeat;
  border-radius: 0 0 6px 6px;
}
.bcempty span {
  background: var(--panel);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px dashed var(--line);
}
.bcnew {
  display: block;
  width: 100%;
  border: 2px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  cursor: pointer;
}
.shtile {
  position: relative;
}
.shtile.sel .bcov {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.shchk {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--panel);
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--text);
}
.shtile.sniff .bcov {
  animation: sniff 1s ease-in-out infinite;
  box-shadow:
    0 0 0 3px #ffd36e,
    0 0 18px #ffd36e99;
}
@keyframes sniff {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}
.selbar {
  position: sticky;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 0 10px 26px #0005;
}
.bcpet {
  position: absolute;
  right: 10px;
  top: -34px;
  z-index: 14;
  width: 52px;
  height: 52px;
  cursor: pointer;
  transition:
    left 1.6s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 1.6s cubic-bezier(0.45, 0.05, 0.3, 1);
  filter: drop-shadow(0 4px 4px #0005);
}
.bcpet svg {
  width: 52px;
  height: 52px;
  transform: scaleX(var(--fx, 1));
  transition: transform 0.4s ease;
}
.bcpet .bdegg {
  font-size: 38px;
}
.bcpet.walk svg,
.bcpet.walk .bdegg {
  animation: bchop 0.42s ease-in-out infinite alternate;
}
@keyframes bchop {
  from {
    transform: scaleX(var(--fx, 1)) translateY(0);
  }
  to {
    transform: scaleX(var(--fx, 1)) translateY(-6px);
  }
}
.bcbub {
  position: absolute;
  z-index: 15;
  width: 280px;
  max-width: calc(100% - 16px);
  padding: 11px 13px 10px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);
  box-shadow: 0 14px 28px -8px #0008;
  font-size: 14px;
  line-height: 1.45;
  transition:
    left 1.2s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 1.2s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.bcbub::before {
  content: '';
  position: absolute;
  top: -9px;
  left: var(--tail, 40px);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--panel);
  border-left: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: rotate(45deg);
}
.bcbub:not([style*='--tail'])::before {
  display: none;
}
.bcbub .bcn {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 2px;
}
.bcbub .bcl {
  display: block;
}
.bcbub .bcl b {
  font-weight: 800;
}
.bcbub .bcact {
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bcdots {
  display: inline-flex;
  gap: 5px;
}
.bcdots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.bcdots i.on {
  background: var(--accent);
}
.bcbub[hidden] {
  display: none;
}
.bcbub:not([style*='top']) {
  right: 10px;
  top: 26px;
}
.qshead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.qst {
  font: 800 17px/1.2 var(--hand);
  display: block;
}
.qsshelves {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.qsshelves button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 4px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.qsshelves button[aria-checked='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}
.qspg {
  padding: 10px 12px;
}
.qspgn {
  font: 800 28px/1 var(--hand);
}
.qspg input[type='range'] {
  accent-color: var(--accent);
  margin: 8px 0;
}
.qsrate button {
  font-size: 26px;
}
.qslists {
  flex-wrap: wrap;
}
.seemoji {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.seemoji button {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  font-size: 20px;
  padding: 5px 0;
  cursor: pointer;
}
.seemoji button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}
.sesort {
  flex-wrap: wrap;
}
.sepreview {
  margin: 8px 0 10px;
}
.sarr {
  padding: 4px 8px;
}
.sarow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.sarow:first-child {
  border-top: 0;
}
.sarow.off {
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .shtile.sniff .bcov,
  .bcpet.walk svg {
    animation: none;
  }
  .bcpet {
    transition: none;
  }
}
button.chip {
  border: 1.5px solid var(--line) !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
  cursor: pointer;
  padding: 6px 11px;
  font-size: 13px;
}
button.chip[aria-pressed='true'] {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 24%, var(--panel)) !important;
}
.bcpet {
  right: 52px;
}
.ratepick.qsrate button {
  color: var(--muted);
}
.ratepick.qsrate button.on {
  color: #e8a824;
}
/* Social → Games (Habitdle's games, shown inside BookBuddies) */
.hghero {
  margin-top: 12px;
}
.hglogo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #d4552b;
  color: #fff;
  display: grid;
  place-items: center;
  font: 900 22px/1 var(--hand);
}
.hggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}
.hgcard {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  margin: 0;
  color: var(--text);
  padding: 12px 14px;
}
.hgcard:hover {
  border-color: var(--accent);
}
.hgi {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--panel2);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.hgi.sm {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.hgt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hgt small {
  color: var(--muted);
  font-size: 12.5px;
}
.hgplay {
  flex: none;
  font-weight: 800;
  color: var(--accent);
  font-size: 13.5px;
}
dialog.hgdlg {
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
dialog.hgdlg:not([open]) {
  display: none;
}
@media (min-width: 760px) {
  dialog.hgdlg {
    width: min(760px, 96vw);
    height: min(92dvh, 980px);
    margin: auto;
    border-radius: 20px;
    border: 1.5px solid var(--line);
  }
}
.hgbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.hgframe {
  position: relative;
  flex: 1;
  min-height: 0;
}
.hgframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.hgload {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.hgcard.done {
  border-color: color-mix(in srgb, var(--good) 45%, var(--line));
}
.hglogo {
  font-size: 22px;
  background: var(--panel2) !important;
  color: var(--text) !important;
}
/* Brain Index: reading mix */
.rmix {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rmrow {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}
.rmrow.off span {
  color: var(--muted);
}
.rmrow.off i {
  opacity: 0.6;
}
.rmrow i {
  height: 8px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
}
.rmrow i b {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}
.rmrow small {
  color: var(--muted);
  min-width: 24px;
  text-align: right;
}
/* home pet picks a book */
.petpicked .bcov {
  animation: sniff 1s ease-in-out 5;
  box-shadow:
    0 0 0 3px #ffd36e,
    0 0 22px #ffd36e99 !important;
}
.petpick {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translate(-50%, -24px);
  opacity: 0;
  pointer-events: none;
  z-index: 70;
  width: min(94vw, 440px);
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 18px;
  box-shadow: 0 14px 34px #0007;
  padding: 12px 14px;
  transition: 0.28s;
}
.petpick.on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
@media (min-width: 960px) {
  .petpick {
    left: auto;
    top: auto;
    right: 130px;
    bottom: 30px;
    transform: translateY(24px);
  }
  .petpick.on {
    transform: none;
  }
}
.ppk-h {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ppk-h .bttl {
  display: block;
  font: 800 16px/1.2 var(--hand);
  text-align: left;
}
.ppk-c {
  margin-top: 8px;
  min-height: 68px;
}
.ppk-c b {
  font-size: 13px;
}
.ppk-c p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.ppk-f {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ppk-dots {
  flex: 1;
  display: flex;
  gap: 4px;
}
.ppk-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.ppk-dots i.on {
  background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .petpicked .bcov {
    animation: none;
  }
}

.logo svg.bbmark {
  width: 84%;
  height: 84%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ---- dialogs: breathing room top and bottom, clear of the notch / status bar and the home bar ---- */
dialog:not(.hgdlg):not(.wlfull):not(#setupdlg) {
  --dlg-top: calc(env(safe-area-inset-top, 0px) + 18px);
  --dlg-bot: calc(env(safe-area-inset-bottom, 0px) + 18px);
  inset: var(--dlg-top) 0 var(--dlg-bot) 0 !important;
  margin: auto !important;
  max-height: calc(100dvh - var(--dlg-top) - var(--dlg-bot)) !important;
  padding: 22px 20px 26px !important;
  scroll-padding-block: 22px;
  overflow-y: auto;
}
dialog:not(.hgdlg):not(.wlfull):not(#setupdlg) > div {
  padding-bottom: 6px;
}
#bookdlg {
  padding-top: 18px !important;
}
#bookdlg #bookbody > .row:first-child,
#askbody > .row:first-child {
  position: sticky;
  top: -18px;
  z-index: 5;
  margin: -18px -20px 8px;
  padding: 12px 16px 8px;
  background: linear-gradient(var(--panel) 75%, transparent);
}
#askbody > .row:first-child {
  top: -22px;
  margin-top: -22px;
}
@media (max-width: 480px) {
  dialog:not(.hgdlg):not(.wlfull):not(#setupdlg) {
    width: calc(100% - 24px) !important;
    padding: 20px 16px 24px !important;
  }
  #bookdlg #bookbody > .row:first-child,
  #askbody > .row:first-child {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.jcard {
  position: relative;
}
.jcard.pinned {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.jpin {
  font-size: 15px;
  line-height: 1;
  padding: 4px;
  margin: -4px 2px -4px -4px;
  border-radius: 8px;
  filter: grayscale(1);
  opacity: 0.45;
  cursor: pointer;
}
.jpin.on {
  filter: none;
  opacity: 1;
}
.jpin:hover {
  opacity: 0.9;
}
.jcard.selmode {
  padding-left: 12px;
}
.jcard.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.jchk {
  font-size: 16px;
  margin-right: 2px;
}
.jselbar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-top: 10px;
  box-shadow: 0 8px 20px #0003;
}
.jselbar .btn {
  min-height: 36px;
}

.calspans {
  padding: 4px 12px;
}
.calspans .li {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 8px 0;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  position: relative;
}
.calspans .li:first-child {
  border-top: 0;
}
.calspans .li .bcov {
  width: 34px;
  flex: none;
}
.calspans .li .t {
  flex: 1;
  min-width: 0;
}
.calspans .li b {
  display: inline;
}
.calspans .li .t > b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calspans .spanbar {
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  background: hsl(var(--h) 55% 55%);
  flex: none;
}

/* ---- dropdowns and form controls follow the theme (no black text on dark menus) ---- */
:root {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
}
select,
select.tx,
.tx,
input,
textarea {
  color: var(--text);
  background-color: var(--panel);
}
select option,
select optgroup {
  color: var(--text);
  background-color: var(--panel);
}
select option:checked {
  background-color: color-mix(in srgb, var(--accent) 30%, var(--panel));
}
select:disabled,
select option:disabled {
  color: var(--muted);
}

/* ---- roomier, calmer UI: smaller count badges, lighter notifications, more breathing room between buttons ---- */
.dot-badge {
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  font-size: 9.5px;
  line-height: 15px;
  padding: 0 4px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 2px var(--bg);
}
.dot-badge:empty {
  display: none;
}
.navdot {
  width: 7px;
  height: 7px;
  top: 7px;
  right: calc(50% - 15px);
  box-shadow: 0 0 0 2px var(--panel);
}
.nav button {
  position: relative;
}
.nav #freqbadge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  line-height: 0;
}
.nav #freqbadge .dot-badge {
  position: static;
  margin: 0;
}
@media (min-width: 960px) {
  .nav #freqbadge {
    position: static;
    margin-left: 6px;
  }
}
.tophead .iconbtn,
.tophead .pill,
.tophead .avatar {
  position: relative;
}
.tophead .dot-badge,
.iconbtn .dot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin: 0;
}
.tophead > *,
.tophead .row {
  gap: 8px;
  min-width: 0;
}
.tophead .brandbtn {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .tophead .brandbtn {
    font-size: 0;
    gap: 0;
  }
  .tophead .brandbtn .logo {
    font-size: 17px;
  }
  .tophead .pill {
    padding: 5px 10px;
  }
}
.iconbtn {
  overflow: visible;
}
.iconbtn > svg {
  overflow: hidden;
}
.notif {
  max-width: min(360px, calc(100vw - 32px));
  padding: 9px 12px;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 14px;
  box-shadow: 0 8px 24px #0000002e;
}
.notif .ni {
  font-size: 18px;
}
.notif .muted.small {
  font-size: 11.5px;
  white-space: nowrap;
}
.notif > span:nth-child(2) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.toast {
  font-size: 13.5px;
  padding: 10px 14px;
  max-width: min(420px, calc(100vw - 32px));
}
.row {
  gap: 10px;
}
.chips2 {
  gap: 8px;
}
.btn.sm {
  padding: 9px 15px;
}
.btn + .btn {
  margin-left: 0;
}
.card .row .btn,
.card .btn + .btn {
  margin-top: 0;
}
dialog .row {
  row-gap: 10px;
}
.pfhero-btns,
.clubacts,
.dxtools,
.libacts,
.wbtns {
  gap: 10px !important;
}
.pill {
  padding: 6px 12px;
}

#bellbtn {
  overflow: visible !important;
}
#bellbadge {
  position: absolute;
  top: -2px;
  right: -2px;
  line-height: 0;
}
#bellbadge .dot-badge {
  position: static;
  margin: 0;
}
.rwdot {
  width: 7px !important;
  height: 7px !important;
  top: -1px !important;
  right: -1px !important;
}
.ratepick.pending {
  outline: 2px dashed color-mix(in srgb, #e8a824 55%, transparent);
  outline-offset: 3px;
  border-radius: 10px;
}
.rpend {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  margin-left: 6px;
  white-space: nowrap;
}

.ratepick {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.ratepick.dragging {
  outline: 2px solid color-mix(in srgb, #e8a824 60%, transparent);
  outline-offset: 3px;
  border-radius: 10px;
}
.stepq {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.stepq button {
  min-width: 40px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font: 800 13px/1 inherit;
  cursor: pointer;
  padding: 0 10px;
}
.stepq output {
  min-width: 44px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  align-self: center;
}

/* slightly bigger stars, with a little more room between them, so sliding a finger across is easy */
.ratepick button {
  font-size: 31px;
  padding: 2px 4px;
  min-width: 36px;
  min-height: 40px;
}
.ratepick.big button {
  font-size: 42px;
  min-width: 46px;
}
.ratepick.qsrate button {
  font-size: 30px;
}
@media (max-width: 360px) {
  .ratepick button {
    font-size: 27px;
    min-width: 32px;
    padding: 2px 3px;
  }
}

/* ---- review area: feelings picker labels fit (the club emoji picker shares the .emopick name) ---- */
.emopick:has([data-emo2]) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.emopick [data-emo2] {
  width: auto !important;
  height: auto !important;
  min-height: 60px;
  padding: 7px 4px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-size: 20px;
  line-height: 1;
  background: var(--panel) !important;
}
.emopick [data-emo2] small {
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}
.emopick [data-emo2][aria-pressed='true'] {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important;
}
.bkavg {
  flex-wrap: wrap;
  row-gap: 2px;
}
.bkavg .muted {
  white-space: normal;
}
.bktabs button {
  padding: 9px 10px 10px;
  font-size: 13.5px;
}
.placebox .fmts button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
.placebox .fmts {
  gap: 6px;
}
.sec-h {
  overflow-wrap: anywhere;
}
.row > b,
.row > span {
  min-width: 0;
}

.bktabs {
  gap: 0;
}
.bktabs button {
  flex: 1 0 auto;
}
@media (max-width: 400px) {
  .bktabs button {
    padding: 9px 7px 10px;
    font-size: 12.5px;
  }
}

html,
body {
  overflow-x: hidden;
}
dialog {
  overflow-x: hidden;
}
body.stardrag,
body.stardrag * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none;
}
body.stardrag {
  overscroll-behavior: none;
  touch-action: none;
}
.ratepick {
  touch-action: pan-y;
}

/* "Where to get it" tabs: icon above the word on every tab, so they line up */
.gitabs {
  gap: 4px;
}
.gitabs button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  font-size: 13px;
}

.bkshelves {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.bkshelves button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  font-size: 12.5px;
  min-width: 0;
}
.row:has(> #ratepick) {
  flex-wrap: wrap;
  row-gap: 6px;
}

.rpend {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.smptag {
  display: inline-grid !important;
  place-items: center;
  width: auto !important;
  padding: 0 2px !important;
  margin-left: 3px !important;
  background: none !important;
  border: 0 !important;
  font-size: 0.95em !important;
  line-height: 1;
  cursor: help;
  vertical-align: baseline;
}

/* club members: one tidy row each (rank · avatar · name & progress · pages), sprout and crown stay on the name line */
.cmembers .clubm {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.cmembers .clubm:first-of-type {
  border-top: 0;
}
.cmembers .clubm .rk {
  flex: none;
  width: 18px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.cmembers .clubm > .av {
  flex: none;
}
.cmembers .clubm > div {
  flex: 1;
  min-width: 0;
}
.cmembers .clubm > div > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.cmembers .clubm > div > div:first-child > a,
.cmembers .clubm > div > div:first-child > button,
.cmembers .clubm > div > div:first-child > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmembers .clubm > div > div:first-child .muted {
  flex: 0 1000 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmembers .clubm > div > div:first-child > a,
.cmembers .clubm > div > div:first-child > button {
  flex: 0 1 auto;
  min-width: 5.5em;
}
.cmembers .clubm .smptag {
  margin-left: 1px !important;
  flex: none;
}
.cmembers .clubm .pbar {
  margin: 5px 0 3px;
}
.cmembers .clubm > b,
.cmembers .clubm > small,
.cmembers .clubm > span:not(.rk) {
  flex: none;
}
.cmembers .clubm > button {
  flex: none;
}

.msortsel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.msortsel select {
  font-size: 14px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  max-width: 190px;
}

.libgridc {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px 12px;
  align-items: start;
}
.libgridc > div {
  min-width: 0;
}
.libgridc .btile {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.libgridc .btile .bcov {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2/3;
  border-radius: 4px 8px 8px 4px;
  overflow: hidden;
}
.libgridc .btile .bcov img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.libgridc .btile b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.25;
  min-height: 2.5em;
  text-align: left;
}
.libgridc .btile small,
.libgridc .btile .muted {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  text-align: left;
}

/* page entrance only when you actually switch tabs; redraws (and <section>s inside pages, like library groups) never fade in */
section:not([hidden]),
main > section:not([hidden]) {
  animation: none !important;
}
main > section.tab-enter {
  animation: tabin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

#dxaisles .dxrow {
  margin-top: 4px;
}
#dxaisles .brow {
  min-height: 210px;
}

.bcov img {
  z-index: 1;
}
.bcov .audbadge,
.btile .onshelf,
.btile .newrib,
.btile .talker,
.btile .audbadge {
  z-index: 6 !important;
}
.btile {
  position: relative;
}
.bcov.art .audbadge {
  z-index: 6;
}

.rvlk,
.rvlike,
[data-rvlike],
[data-like] {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel2) 80%, transparent);
  text-decoration: none !important;
}
.rvlk.on,
.rvlike.on,
[data-rvlike].on,
[data-like].on {
  background: color-mix(in srgb, #ff5d7a 18%, var(--panel));
}

/* desktop: no sideways scrolling rows anywhere */
@media (min-width: 900px) {
  .fbrow {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px 16px;
    overflow: visible !important;
  }
  .fbrow > .fbk {
    width: auto !important;
    min-width: 0;
  }
  .fbrow .bcov {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2/3;
  }
  .fbrow:not(.showall) > *:nth-child(n + 13) {
    display: none !important;
  }
  .feat,
  .favrow,
  .rvrs,
  .pfchips,
  .shelfchips,
  .slots,
  .aislenav,
  .shvjump,
  .pfspines,
  .albtabs,
  .ptabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .rvrs > * {
    flex: 1 1 280px !important;
    max-width: 100%;
  }
  .feat > * {
    flex: 1 1 300px !important;
  }
  .favrow > *,
  .pfspines > * {
    flex: none;
  }
}

/* book page: one clear place for format (the Your reading card) — drop the extra repeated notes */
#bookbody .fmtnote,
#bookbody .trackline {
  display: none !important;
}
#bookbody .myread .bkmode small {
  display: none;
}
#bookbody .myread .bkmode button {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

#bookbody .myread .mrh b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* build 532: evolution card and the stage-3 aura */
.evocard {
  margin-bottom: 12px;
  --acc: #ff7a45;
}
.evobadge {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 22%, transparent);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.evoforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px 0 6px;
}
.evoform {
  flex: 1;
  max-width: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.evoform b {
  font-size: 13px;
  line-height: 1.2;
}
.evoform small {
  color: var(--muted, #9a8f84);
  font-size: 11px;
}
.evofig {
  width: 88px;
  height: 100px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--panel2);
}
.evofig svg {
  width: 82px;
  height: 95px;
}
.evofeat {
  font-style: normal;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, #9a8f84);
  text-wrap: balance;
}
.evoform.on .evofig {
  background: color-mix(in srgb, var(--acc) 20%, var(--panel2));
  box-shadow: 0 0 0 2px var(--acc);
}
.evoform.locked .evofig svg {
  filter: brightness(0) invert(0.6);
  opacity: 0.5;
}
.evoform.locked b {
  opacity: 0.6;
}
.evoarrow {
  color: var(--muted, #9a8f84);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 28px;
}
.evonext {
  text-align: center;
  margin-bottom: 10px;
}
.evoattrs {
  display: grid;
  gap: 7px;
  max-width: 560px;
  margin: 0 auto 10px;
}
.evoattr {
  display: grid;
  grid-template-columns: 7.5em 1fr 3.2em;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  font-size: 13px;
}
.evoattr > b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.evoattr > small {
  grid-column: 2/4;
  color: var(--muted, #9a8f84);
  font-size: 11px;
  margin-top: -2px;
}
.ea-bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--panel2);
  overflow: hidden;
}
.ea-bar i,
.ea-bar u {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: var(--acc);
}
.ea-bar u {
  opacity: 0.28;
  text-decoration: none;
}
.petsvg .evoaura {
  transform-box: fill-box;
  transform-origin: center;
  animation: evoPulse 2.8s ease-in-out infinite;
}
@keyframes evoPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .petsvg .evoaura {
    animation: none;
  }
}
.dnabox.dnasolo {
  margin: 0 0 12px;
}
/* build 532: pets as shelf decor, the evolution ceremony and pet XP */
.dk-pet .dkp {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation:
    dkpBreathe 3.4s ease-in-out var(--d) infinite,
    dkpLook 11s ease-in-out var(--d) infinite;
}
.dk-pet.flip .dkp svg {
  transform: scaleX(-1);
}
.dk-pet.doze .dkp {
  animation: dkpBreathe 5.5s ease-in-out var(--d) infinite;
}
.dk-pet.go .dkp {
  animation: dkpHop 0.55s ease-out;
}
.dkbub.dkbub-pet {
  white-space: normal;
  width: max-content;
  max-width: 150px;
  line-height: 1.25;
  text-align: center;
  animation-duration: 2.7s;
}
@keyframes dkpBreathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.03, 0.96);
  }
}
@keyframes dkpLook {
  0%,
  80%,
  100% {
    rotate: 0deg;
  }
  84% {
    rotate: -6deg;
  }
  90% {
    rotate: 5deg;
  }
  95% {
    rotate: 0deg;
  }
}
@keyframes dkpHop {
  0% {
    transform: scale(1.1, 0.88);
  }
  40% {
    transform: translateY(-16px) scale(0.94, 1.06);
  }
  75% {
    transform: translateY(0) scale(1.06, 0.94);
  }
  100% {
    transform: none;
  }
}
#petstage.evoready svg {
  filter: drop-shadow(0 0 calc(8px + var(--evo, 0) * 26px) #fff3a6) brightness(calc(1 + var(--evo, 0) * 0.35));
}
#petstage.evohit .pb {
  animation: evoHit 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) !important;
}
#petstage.evobuild .pb {
  animation: evoBuild 1.9s ease-in both !important;
}
@keyframes evoHit {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.1, 0.92);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes evoBuild {
  0% {
    transform: scale(1);
    filter: brightness(1.3);
  }
  60% {
    transform: scale(1.12) rotate(-3deg);
    filter: brightness(2.4);
  }
  85% {
    transform: scale(0.96) rotate(3deg);
    filter: brightness(3.2);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(4);
  }
}
.evoxp {
  margin: 2px auto 12px;
  max-width: 560px;
}
.evoxp .row {
  font-size: 13px;
  margin-bottom: 5px;
}
.evoxp .row span {
  flex: 1;
}
.evoxp b {
  font-variant-numeric: tabular-nums;
}
.evoxp .ea-bar {
  display: block;
  height: 10px;
}
.evogo {
  width: 100%;
  margin: 2px 0 12px;
}
.evocard.ready .evoform.on .evofig {
  animation: evoReadyGlow 1.6s ease-in-out infinite;
}
@keyframes evoReadyGlow {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--acc);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--acc),
      0 0 18px 2px color-mix(in srgb, var(--acc) 55%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dk-pet .dkp,
  .dk-pet.go .dkp,
  #petstage.evohit .pb,
  #petstage.evobuild .pb,
  .evocard.ready .evoform.on .evofig {
    animation: none !important;
  }
}
.evochip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--panel2);
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}
.evochip i {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 9px;
  background: linear-gradient(90deg, #2fc48d var(--p), color-mix(in srgb, currentColor 20%, transparent) var(--p));
}
.evochip.ready {
  background: color-mix(in srgb, #ffd23f 32%, var(--panel2));
  font-weight: 700;
  animation: evoChipGlow 1.6s ease-in-out infinite;
}
.evochip:focus-visible {
  outline: 2px solid #ffd23f;
  outline-offset: 2px;
}
@keyframes evoChipGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 #ffd23f00;
  }
  50% {
    box-shadow: 0 2px 12px 1px #ffd23f88;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evochip.ready {
    animation: none;
  }
}
@media (max-width: 560px) {
  .pet-sub {
    gap: 4px 6px;
  }
  .pet-sub .pmood:before {
    margin-right: 5px;
  }
  .evochip {
    padding: 1px 7px;
    gap: 4px;
  }
  .evochip i {
    width: 24px;
  }
}
/* build 537: the pet screen is a little room, drawn with the same walls, window, floor and rug as the big room (js/lazy/room.js).
   Each room theme tints the walls and floor and shows its sky and its four little things through the window */
.pscreen,
#prx {
  --wall: color-mix(in oklab, var(--sky2) 48%, #f3e3cc);
  --wall2: color-mix(in oklab, var(--ground) 30%, #ecdcc4);
  --side: color-mix(in oklab, var(--wall) 84%, #5a3b24);
  --floor: color-mix(in oklab, var(--ground) 14%, #c99662);
  --seam: color-mix(in oklab, var(--floor) 66%, #3b2414);
  --trim: color-mix(in oklab, var(--floor) 55%, #5a3720);
  --rug: color-mix(in oklab, var(--sky1) 58%, #fff5e8);
  --rug2: color-mix(in oklab, var(--sky1) 62%, #8a4a56);
}
.pscreen.dark,
#prx.dark {
  --wall: color-mix(in oklab, var(--sky1) 64%, #3b3150);
  --wall2: color-mix(in oklab, var(--sky2) 40%, #2c2437);
  --side: color-mix(in oklab, var(--wall) 78%, #07050b);
  --floor: color-mix(in oklab, var(--ground) 28%, #6b4a35);
  --seam: color-mix(in oklab, var(--floor) 60%, #000);
  --trim: color-mix(in oklab, var(--floor) 55%, #1c120b);
  --rug: color-mix(in oklab, var(--sky2) 55%, #d9c6f0);
  --rug2: color-mix(in oklab, var(--sky2) 70%, #f2c66d);
}
.pscreen {
  background: var(--wall);
}
.pscreen .ground {
  display: none;
}
.proom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.proom svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.proom .prw {
  fill: var(--wall);
}
.proom .prs {
  fill: var(--side);
}
.proom .prc {
  fill: var(--wall2);
}
.proom .prc.s {
  fill: color-mix(in oklab, var(--wall2) 84%, #2a160b);
}
.proom .prf {
  fill: var(--floor);
}
.proom .prb {
  fill: var(--trim);
}
.proom .prl {
  fill: none;
  stroke: var(--seam);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.proom .prr {
  fill: none;
  stroke: var(--trim);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.proom:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 24% 24%, #ffffff47, #fff0 72%),
    linear-gradient(transparent 62%, #0000000d 70%, transparent 82%);
}
.pscreen.dark .proom:after {
  background: radial-gradient(52% 34% at 50% 90%, #ffcf8a2e, #0000 72%);
}
.pwin {
  position: absolute;
  left: 10%;
  top: 9%;
  width: clamp(118px, 27%, 250px);
  aspect-ratio: 5/4;
  padding: 6px;
  border-radius: 10px;
  background: #fffaf1;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--trim) 45%, transparent),
    0 6px 14px #0000001f;
}
.pwin:after {
  content: '';
  position: absolute;
  left: -9px;
  right: -9px;
  bottom: -9px;
  height: 9px;
  border-radius: 4px;
  background: #fffaf1;
  box-shadow: 0 3px 6px #0000001f;
}
.pwv {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(var(--sky1), var(--sky2));
  box-shadow: inset 0 2px 6px #0000002e;
}
.pwv:before,
.pwv:after {
  content: '';
  position: absolute;
  background: #fffaf1;
  z-index: 2;
}
.pwv:before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 5px;
  transform: translateX(-50%);
}
.pwv:after {
  left: 0;
  right: 0;
  top: 47%;
  height: 5px;
}
.pwv i {
  position: absolute;
  font-style: normal;
  line-height: 1;
  animation: drift 7s ease-in-out infinite;
}
.pwv .pwh {
  left: -25%;
  right: -25%;
  bottom: -48%;
  height: 80%;
  border-radius: 50%;
  background: var(--ground);
  animation: none;
}
.pwv .w0 {
  left: 12%;
  top: 12%;
  font-size: clamp(18px, 2.4vw, 30px);
}
.pwv .w1 {
  right: 12%;
  top: 10%;
  font-size: clamp(14px, 1.8vw, 22px);
  animation-delay: -2s;
}
.pwv .w2 {
  left: 16%;
  bottom: 10%;
  font-size: clamp(16px, 2vw, 26px);
  animation-delay: -4s;
}
.pwv .w3 {
  right: 14%;
  bottom: 12%;
  font-size: clamp(15px, 1.9vw, 24px);
  animation-delay: -1s;
}
.prug {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(64%, 460px);
  height: 14%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rug) 0 70%, var(--rug2) 71% 77%, var(--rug) 78% 100%);
  box-shadow: 0 2px 0 #0000001a;
}
.ppic {
  position: absolute;
  right: 12%;
  top: 15%;
  width: clamp(56px, 10%, 104px);
  aspect-ratio: 4/5;
  z-index: 0;
  border: 3px solid var(--trim);
  border-radius: 4px;
  background: color-mix(in oklab, var(--wall) 40%, #fff8ec);
  padding: 4px 3px 0;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 4px 10px #00000026;
}
.ppic svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ppic .petsvg * {
  animation: none !important;
}
.proomgo {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid #ffffff99;
  background: #ffffffc7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #2b2230;
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px #0000001f;
  transition:
    transform 0.15s,
    background 0.15s;
}
.proomgo:hover {
  background: #fffffff0;
  transform: translateY(-1px);
}
.proomgo:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.proomgo .ic {
  width: 17px;
  height: 17px;
}
.pscreen.dark .proomgo {
  background: #1b1625bf;
  color: #f6efe2;
  border-color: #ffffff33;
}
.pscreen.decorating .proomgo,
.pscreen.gaming .proomgo {
  display: none;
}
.rmcard {
  display: grid;
  gap: 12px;
}
.rmch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rmsteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}
.rms {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 4px 7px;
  border-radius: 12px;
  background: var(--panel2);
  text-align: center;
  min-width: 0;
}
.rms svg {
  max-width: 100%;
  height: auto;
  fill: color-mix(in srgb, var(--muted) 45%, transparent);
}
.rms.on svg {
  fill: color-mix(in srgb, var(--accent) 70%, transparent);
}
.rms b {
  font-size: 12px;
  line-height: 1.2;
}
.rms small {
  font-size: 11px;
  color: var(--muted);
}
.rms.cur {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.rmcard #rmup {
  width: 100%;
}
.rmmax {
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .pwv i {
    animation: none;
  }
  .proomgo {
    transition: none;
  }
}
/* build 541: the home pet blinks, glances around, and tucks itself away while you scroll */
.buddy .pe {
  transform-box: fill-box;
  transform-origin: center;
  animation: bblink 5.2s infinite;
}
@keyframes bblink {
  0%,
  92%,
  100% {
    transform: none;
  }
  94% {
    transform: scaleY(0.12);
  }
}
.buddy.b-look svg {
  animation: blook 2.2s ease-in-out;
}
@keyframes blook {
  25%,
  40% {
    rotate: -9deg;
  }
  65%,
  80% {
    rotate: 9deg;
  }
}
.buddy svg {
  transition:
    opacity 0.35s ease,
    scale 0.35s ease;
}
.buddy.b-tuck svg {
  opacity: 0.38;
  scale: 0.78;
}
.buddy.flip.b-tuck svg {
  scale: -0.78 0.78;
}
@media (prefers-reduced-motion: reduce) {
  .buddy .pe {
    animation: none;
  }
}

/* build 543: big screens. On ultrawide monitors the page stops stretching edge to edge and sits centred beside the sidebar,
   and the costly full-screen effects calm down (no drifting glow behind everything, solid bars instead of live blur) so scrolling stays smooth at 1440p and up */
@media (min-width: 960px) {
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel);
  }
  .shvjump {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
  }
}
@media (min-width: 1500px) {
  body:before {
    animation: none;
  }
}
@media (min-width: 1900px) {
  .wrap {
    max-width: 1680px;
    margin-left: max(250px, calc(50% - 731px)) !important;
  }
}
/* build 545: new players see that BookBuddies is free, with an optional tip jar */
.wfree {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, #ffdd00 10%, var(--panel));
  border: 1px solid color-mix(in srgb, #e6c700 40%, var(--line));
}
.wfree p {
  flex: 1 1 190px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.wfree p b {
  color: var(--text);
}
.wfree .bmc {
  flex: none;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 13.5px;
  min-height: 38px;
  text-decoration: none;
  white-space: nowrap;
}
/* Games: the experimental live games sit in their own section at the bottom */
#xpexp {
  margin-top: 6px;
}
#xpexp .hgexp-n {
  margin: -2px 2px 10px;
}
#xpexp .pwxp {
  display: none;
}
/* the gentle tip jar card: never blocks the page, sits above the bottom bar on phones and in the corner on desktop */
.tipcard {
  position: fixed;
  z-index: 9000;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  align-items: center;
  padding: 14px 16px 14px 14px;
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow:
    0 18px 44px #0000004a,
    0 2px 8px #0000001f;
  transform: translate(-50%, 18px);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    opacity 0.25s;
}
.tipcard.on {
  transform: translate(-50%, 0);
  opacity: 1;
}
.tipcard .tpet {
  grid-row: span 2;
  width: 58px;
  aspect-ratio: 200/232;
  display: block;
}
.tipcard .tpet svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: scale(1.45);
  transform-origin: 50% 72%;
}
.tipcard.nopet {
  grid-template-columns: 1fr;
}
.tipcard b {
  font-size: 15.5px;
  line-height: 1.25;
  padding-right: 22px;
}
.tipcard p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.tipcard .tacts {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tipcard .tacts .bmc {
  flex: 1.5;
  white-space: nowrap;
}
.tipcard .tacts .btn {
  flex: 1;
  margin: 0;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tipcard .tclose {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.tipcard .tclose:hover {
  background: var(--panel2);
  color: var(--text);
}
.tipcard.thx {
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 960px) {
  .tipcard {
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: translateY(18px);
  }
  .tipcard.on {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tipcard {
    transition: opacity 0.2s;
  }
}
/* build 546: "Playing as" picker on the Games page; every game, Plaza and Tales use this pet */
.ppick {
  position: relative;
  margin-left: auto;
}
.ppick-b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
}
.ppick-b:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.ppick .a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel2);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.ppick .a svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ppick .t {
  display: grid;
  text-align: left;
  line-height: 1.15;
  min-width: 0;
}
.ppick .t small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.ppick .t b {
  font-size: 14px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppick .c {
  color: var(--muted);
  font-size: 12px;
}
.ppick-l {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(240px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px #00000040;
}
.ppick-l button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}
.ppick-l button:hover,
.ppick-l button:focus-visible {
  background: var(--panel2);
}
.ppick-l button[aria-selected='true'] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ppick-l .t {
  flex: 1;
}
.ppick-l .k {
  color: var(--accent);
  font-weight: 800;
}
/* build 547: Social. Readers with your taste scroll sideways as small cards; a club head's set-up prompts form one list */
.matches {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin: 0 -2px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.matches .match {
  flex: 0 0 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.matches .match:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-1px);
}
.matches .match .av {
  margin-bottom: 4px;
}
.matches .match .mn {
  font-size: 15px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matches .match .mpct {
  font-weight: 800;
  font-size: 13px;
  color: var(--good, #3fae6a);
}
.matches .match small {
  font-size: 12px;
  color: var(--muted);
  display: block;
}
.matches .match .clubtag {
  margin-top: 4px;
  font-size: 11px;
  pointer-events: none;
}
.ctools {
  margin: 4px 0 6px;
}
.ctools .ctl {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.ctools .ctl > .card {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  padding: 12px 14px !important;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ctools .ctl > .card + .card {
  border-top: 1px solid var(--line) !important;
}
.ctools .ctl > .card:hover {
  background: var(--panel2) !important;
}
/* build 548: Home start guide for new readers, and the how-logging-works sheet */
.rd-start .rds-h {
  margin: 0;
  font: 700 clamp(23px, 5vw, 30px)/1.15 var(--hand);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rd-start .rds-p {
  margin: 6px 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 60ch;
}
.rds-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: rds;
}
.rds-steps li {
  counter-increment: rds;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  align-content: start;
}
.rds-steps li:before {
  content: counter(rds);
  grid-row: span 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 15px/1 var(--hand);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.rds-steps b {
  font-size: 15.5px;
  line-height: 1.3;
  padding-top: 2px;
}
.rds-steps small {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.rd-start .rd-acts {
  align-items: center;
  gap: 10px;
}
.rd-start .rd-acts .linkbtn {
  margin-left: 4px;
}
@media (min-width: 760px) {
  .rds-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .rds-steps li {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .rds-steps li:before {
    grid-row: auto;
    margin-bottom: 4px;
  }
}
@media (min-width: 900px) {
  .rdesk.rd-start {
    grid-template-columns: 1fr;
  }
  .rd-start .rd-next {
    max-width: none;
  }
}
.lhelp {
  display: grid;
  gap: 14px;
}
.lhelp h2 {
  font: 700 21px/1.2 var(--hand);
}
.lhelp section {
  display: grid;
  gap: 6px;
}
.lhelp h3 {
  margin: 0;
  font-size: 15.5px;
}
.lhelp ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
}
.lhelp li,
.lhelp p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.lhelp li b,
.lhelp p b {
  color: var(--text);
}
/* build 549: a cleaner Shelves page */
#tab-board > .top {
  gap: 8px;
}
#tab-board > .top h1 {
  min-width: 0;
}
.shczb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shczb .ic {
  width: 17px;
  height: 17px;
}
.viewseg.shvseg button small {
  font:
    700 11px/1 Figtree,
    system-ui,
    sans-serif;
  color: var(--muted);
  background: var(--panel2);
  border-radius: 999px;
  padding: 3px 6px;
}
#tab-board > .bkstats.shstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 2px 8px;
}
#tab-board > .bkstats.shstrip[hidden] {
  display: none;
}
#tab-board > .bkstats.shstrip div {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: left;
}
#tab-board > .bkstats.shstrip b {
  font-size: 15px;
}
#tab-board > .bkstats.shstrip small {
  font-size: 13px;
  color: var(--muted);
}
#tab-board .shvjump[hidden],
#tab-board .bcpet[hidden],
#tab-board .yib[hidden],
#tab-board .sec-h[hidden] {
  display: none;
}
.bcx-panel.shczp {
  box-shadow: none;
  padding: 14px 0 4px;
  margin: 0;
  background: none;
}
.shczls {
  display: grid;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.shczl {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.shczl:hover {
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
}
.shczl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}
.shczi {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel2);
  font-size: 18px;
}
.shczi .ic {
  width: 19px;
  height: 19px;
}
.shczt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.shczt b {
  font-size: 15px;
}
.shczt small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.shczl .chev {
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}
@media (max-width: 440px) {
  #tab-board > .top h1 {
    font-size: 25px;
  }
  .viewseg.shvseg button svg {
    display: none;
  }
  .viewseg.shvseg button {
    padding: 9px 4px;
  }
  .shczb {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 360px) {
  .shczb span {
    display: none;
  }
}
/* build 550: clearer logging */
.lehead {
  gap: 12px;
  margin-top: 10px;
}
.lehint {
  margin: 10px 2px 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.leexact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel2);
}
.leexact > span {
  flex: none;
  font-weight: 700;
  font-size: 13.5px;
}
.leexact .hmbox {
  flex: 1;
  margin: 0;
}
.leexact .hmbox input {
  min-height: 40px;
  font-size: 16px;
}
.lelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 2px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.lelbox {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel2);
}
.lelbox > small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.lelbox .hmbox {
  margin-top: 6px;
}
/* build 551: Profile grouped lists, Discover filters chevron */
.pfgroups {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}
.pfgh {
  margin: 0 4px 8px;
  font:
    700 13px/1.2 Figtree,
    system-ui,
    sans-serif;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.pfglist {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.pfglist .pfrow.card {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  min-height: 0;
}
.pfglist .pfrow.card:first-child {
  border-top: 0;
}
.pfglist .pfrow.card:hover {
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}
.pfglist .pfrow.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 12px;
}
.pfglist .pfrow .big {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--panel2);
  font-size: 19px;
}
.pfglist .pfrow .big .ic {
  width: 20px;
  height: 20px;
}
.pfglist .pfrow b {
  font-size: 15px;
}
.pfglist .pfrow .muted.small {
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bfilters > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bfilters > summary::-webkit-details-marker {
  display: none;
}
.bfilters > summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.bfilters[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .bfilters > summary::after {
    transition: none;
  }
}
@media (min-width: 1100px) {
  .pfgroups {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 16px;
  }
}
/* build 552: format switch and pages in my copy */
.fmtseg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0 6px;
}
.fmtseg button {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.fmtseg button .ic {
  width: 20px;
  height: 20px;
}
.fmtseg button b {
  font-size: 13.5px;
  color: var(--text);
}
.fmtseg button small {
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
}
.fmtseg button[aria-checked='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
}
.fmtseg button[aria-checked='true'] .ic {
  color: var(--accent);
}
.fmtseg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fmtseg[data-busy] button {
  opacity: 0.6;
  pointer-events: none;
}
#bookbody .myread .bkfmt {
  display: none;
}
.mpbox {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 13.5px;
}
.mpbox input {
  font-size: 20px;
  min-height: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bkp .pgcopy {
  margin-top: 10px;
}
/* build 552: the switch above replaces the older Print/eBook/Audiobook row in the place box */
#bookbody:has(.fmtseg) .placebox .fmts,
#askbody:has(.fmtseg) .placebox .fmts {
  display: none;
}
/* build 553: comics, manga and anything else you read; Find your book; Add it yourself */
.mkline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.mkline[hidden] {
  display: none;
}
.mkline .ic {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.mkline > span:first-of-type {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}
.mkline b {
  color: var(--text);
}
.mkline .mkchg {
  flex: none;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mkline:focus-visible,
.mkgrid button:focus-visible,
.muchips button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rosec {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.rolbl {
  font-weight: 800;
  font-size: 13.5px;
}
.rosec .tx {
  font-size: 16px;
  min-height: 44px;
  box-sizing: border-box;
  width: 100%;
}
.rohint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.rohint:empty {
  display: none;
}
.roopen {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.roopen[hidden] {
  display: none;
}
.roopen input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.mkgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mkgrid button {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px 9px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  min-width: 0;
}
.mkgrid button .ic {
  width: 22px;
  height: 22px;
}
.mkgrid button[aria-checked='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  font-weight: 800;
}
.mkgrid button[aria-checked='true'] .ic {
  color: var(--accent);
}
.muchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.muchips button {
  min-height: 38px;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
}
.muchips button[aria-checked='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.upbig {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 16px 0 10px;
}
.upbig small {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.upnum {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upnum input {
  width: 116px;
  min-height: 56px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
  font: 800 30px/1 var(--display, inherit);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.upnum .bkp-step {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.frres {
  margin-top: 10px;
  max-height: 56vh;
  overflow: auto;
}
.frres .sec-h {
  margin: 12px 0 4px;
}
.frrow {
  gap: 8px;
}
.frmain {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.frmain .t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.frrow .frmain .t b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.25;
}
.frwait {
  padding: 10px 2px;
}
.frown {
  margin-top: 12px;
}
.bqmine {
  border-bottom: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.bqmine > small {
  display: block;
  padding: 8px 10px 2px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.bqmine button:first-of-type {
  border-top: 0;
}
.mkchip {
  display: inline-block;
  align-self: flex-start;
  margin: 4px 0 -2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
#baddown {
  margin-top: 10px;
}
#baddown > .ic {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin: 0 3px;
}
/* build 554: add it yourself (cover, link, AO3), and the page of something a reader added */
.aolink {
  display: flex;
  gap: 8px;
}
.aolink .tx {
  flex: 1;
  min-width: 0;
}
.aolink .btn {
  flex: none;
  min-height: 44px;
}
.aotop {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 4px;
}
.aocov {
  width: 104px;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel2);
  box-shadow: 0 6px 18px #0003;
}
.aocov img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aocov .bcov {
  width: 100%;
  height: 100%;
  margin: 0;
}
.aofields .rosec:first-child {
  margin-top: 0;
}
.aocvbtns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.aoup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.aoup .ic {
  width: 16px;
  height: 16px;
}
.aoyr {
  max-width: 140px;
}
.rosec textarea.tx {
  min-height: 72px;
  resize: vertical;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  padding: 10px 12px;
}
.aochecks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.aosub {
  align-items: flex-start;
}
.aosub input {
  margin-top: 2px;
}
.aosub span {
  display: grid;
  gap: 2px;
}
.aosub small {
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
}
.mycust {
  margin-top: 10px;
  padding: 12px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
}
.mchead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.mchead b {
  color: var(--text);
}
.mchead .ic {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}
.mcnotes {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.mcnotes b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.mcacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mcacts:empty {
  display: none;
}
.mcacts .btn {
  min-height: 38px;
}
.rqmine {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
@media (max-width: 380px) {
  .aotop {
    grid-template-columns: 84px 1fr;
  }
  .aocov {
    width: 84px;
  }
}
/* build 555: series from AniList, MangaDex and Comic Vine */
#bookbody[data-ext] #bkedition,
#bookbody[data-ext] #extrat {
  display: none;
}
.extsrc {
  display: inline-block;
}
#bres .sec-h {
  flex-wrap: wrap;
}
#bres .sec-h .luof {
  flex-basis: 100%;
  order: 2;
  margin: 2px 0 0;
}
/* build 556: calmer welcome page */
.wl-grid {
  align-items: start;
}
@media (min-width: 860px) {
  .wl-egg {
    position: sticky;
    top: 12px;
  }
}
#namedlg .wl-grid .wl-egg .wl-steps {
  margin-top: 18px;
  padding-top: 0;
} /* steps sit under the egg, not pinned to the bottom */
.wl-main .wl-auth {
  margin-top: 4px;
}
.wl-folds {
  display: grid;
  gap: 8px;
  margin: 16px 0 6px;
}
@media (min-width: 1180px) {
  .wl-folds {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.wl-fold {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
}
.wl-fold > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 11px 14px;
  min-height: 52px;
  border-radius: 16px;
}
.wl-fold > summary::-webkit-details-marker {
  display: none;
}
.wl-fold > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wl-fold > summary .gi {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 18px;
  background: hsl(var(--gh, 30) 60% 50% / 0.14);
}
.wl-fold > summary b {
  grid-column: 2;
  font-size: 15px;
}
.wl-fold > summary small {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.wl-fold > summary::after {
  content: '';
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  margin: 0 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.wl-fold[open] > summary::after {
  transform: rotate(-135deg);
}
.wl-fold ul {
  list-style: none;
  margin: 0;
  padding: 2px 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wl-fold li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.wl-fold.wl-priv ul {
  display: block;
  padding: 2px 16px 4px 36px;
  font-size: 13.5px;
  color: var(--muted);
}
.wl-fold.wl-priv li {
  display: list-item;
  list-style: disc;
  background: none;
  padding: 2px 0;
  font-weight: 500;
}
.wl-fold.wl-priv .wl-more {
  margin: 4px 14px 12px;
}
@media (min-width: 2400px) {
  #namedlg.wlfull .wl {
    zoom: 1.22;
  }
}
/* ---------- build 557: Home and Games premium pass ---------- */
.hatchbanner .hbegg {
  width: 46px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 34px;
}
.hatchbanner .hbegg svg {
  width: 100%;
  height: 100%;
}
.talespromo .tphero > svg {
  width: 100%;
  height: 100%;
}
:is(.rd-row, .nowrow):not(:has(.bcov)) .cdcov {
  aspect-ratio: 1;
}
:is(.rd-row, .nowrow):not(:has(.bcov)) .cdcov .cdt {
  top: 10.5%;
  height: 24%;
}
:is(.rd-row, .nowrow):not(:has(.bcov)) .cdcov .cda {
  bottom: 13.5%;
}
.pstore:has(> .storefail) {
  min-height: 0;
}
#tab-play:has(.storefail) #bkfeat {
  display: none;
}
#tab-games .hgcard {
  border-radius: 16px;
  min-height: 76px;
}
#tab-games .hgi {
  background: color-mix(in srgb, var(--hue, var(--accent)) 16%, var(--panel2));
  color: color-mix(in srgb, var(--hue, var(--accent)) 72%, var(--text));
}
#xpgames {
  --hue: #e9a23b;
}
#xpexp {
  --hue: #78c26a;
}
#tab-games .hgplay {
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  white-space: nowrap;
}
#tab-games .hgcard:hover .hgplay {
  background: var(--accent);
  color: var(--bg);
}
#tab-games .hgt small {
  line-height: 1.4;
  margin-top: 2px;
  text-wrap: pretty;
}
#tab-games .hgfeat {
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #8a5cd6 26%, transparent), transparent 62%), var(--panel);
}
#tab-games .hgfeat .hgi {
  width: 52px;
  height: 52px;
  --hue: #b48cff;
}
#tab-games .hgfeat b {
  font-family: var(--display, var(--hand));
  font-size: 19px;
}
#tab-games .sec-h.hgsub {
  font-size: 15.5px;
  margin: 20px 2px 8px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
#tab-games .sec-h.hgsub::after {
  display: none;
}
#tab-games .hgbb-n {
  display: inline-block;
  margin-left: 4px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 1500px) {
  #tab-games .hggrid.feat7 > .hgfeat {
    grid-column: span 2;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #tab-games .hgcard {
    transition:
      transform 0.15s,
      box-shadow 0.15s,
      border-color 0.15s;
  }
  #tab-games .hgcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px #0003;
  }
}
/* ---------- build 559: a quieter, more minimal look ----------
   One calm warm surface instead of three drifting colored glows, flat cards (border only, no lip shadow),
   headings without the squiggle, and banners that sit still. Shelves, pets, rooms and games keep their own art. */
:root,
:root[data-theme='dark'] {
  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --shadow: none;
  }
}
body:before {
  inset: 0;
  animation: none !important;
  background: radial-gradient(
    80% 50% at 50% -18%,
    color-mix(in srgb, var(--accent) 8%, transparent),
    transparent 70%
  ) !important;
}
.card {
  box-shadow: none;
}
.sec-h::after {
  display: none;
}
.sec-h {
  font-size: 18px;
  margin: 30px 2px 10px;
}
.hatchbanner,
.giftcard {
  animation: none !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
}
#tab-board .top:has(#shaddm) {
  position: relative;
}
.shaddm {
  position: absolute;
  z-index: 60;
  right: 0;
  top: calc(100% + 2px);
  width: min(300px, calc(100vw - 20px));
  padding: 6px;
  display: grid;
  gap: 2px;
  box-shadow: 0 12px 32px #0005 !important;
}
.shaddm button {
  display: grid;
  gap: 2px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
}
.shaddm button:hover,
.shaddm button:focus-visible {
  background: var(--panel2);
  outline: none;
}
.shaddm b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.shaddm small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
/* Discover: book rows are plain aisles, so no shelf decorations there (build 561) */
#tab-explore .shelfrow::after {
  content: none;
}
/* ===== build 562: Discover has one bar with search and menus, and the books come right after it ===== */
#tab-explore .dxbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 6px 0 14px;
}
@media (min-width: 1600px) {
  #tab-explore .dxbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
#tab-explore .dxbar .bsearchrow {
  margin: 0;
}
#tab-explore .dxbtns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* phones: the menu buttons share one row that scrolls sideways */
@media (max-width: 700px) {
  #tab-explore .dxbtns {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -12px;
    padding: 0 12px 2px;
    scrollbar-width: none;
  }
  #tab-explore .dxbtns::-webkit-scrollbar {
    display: none;
  }
  #tab-explore .dxbtns > * {
    flex: none;
  }
}
#tab-explore .dxbtns .btn.sm,
#tab-explore .dxbtns details.bfilters > summary {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
}
#tab-explore .dxbtns details.bfilters {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#tab-explore .dxbtns details.bfilters > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: none;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
#tab-explore .dxbtns details.bfilters > summary::-webkit-details-marker {
  display: none;
}
#tab-explore .dxmb[aria-expanded='true'],
#tab-explore .dxbtns details.bfilters[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}
#tab-explore .dxmenu,
#tab-explore .dxfpanel {
  position: absolute;
  z-index: 45;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(70vh, 560px);
  overflow: auto;
  margin: 0;
  padding: 14px;
  box-shadow: 0 14px 36px #0006 !important;
}
@media (min-width: 900px) {
  #tab-explore .dxmenu,
  #tab-explore .dxfpanel {
    left: auto;
    width: min(620px, 100%);
  }
}
#tab-explore .dxmh {
  margin: 0 2px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
#tab-explore .dxmenu .subjchips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  overflow: visible;
}
#tab-explore .dxmenu .sec-h {
  display: none;
}
#tab-explore .dxmenu .trchips {
  flex-wrap: wrap !important;
  overflow: visible !important;
}
#tab-explore .dxmore {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#tab-explore .dxmi {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
#tab-explore .dxmi:hover,
#tab-explore .dxmi:focus-visible {
  background: var(--panel2);
}
#tab-explore .dxsrc {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
}
/* build 563: switching between book, ebook and audiobook, and setting your place */
:root {
  --aud: #9b82f0;
}
.fmtseg {
  --seg: var(--accent);
  position: relative;
  isolation: isolate;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--panel));
}
.fmtseg:has(> [data-fmtto='audio'][aria-checked='true']) {
  --seg: var(--aud);
}
/* the selected format sits on a tile that slides across when you switch */
.fmtseg::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 10px;
  background: color-mix(in srgb, var(--seg) 16%, var(--panel));
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--seg) 60%, transparent),
    0 2px 8px -3px rgb(0 0 0 / 0.35);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.34s ease,
    box-shadow 0.34s ease;
}
.fmtseg:has(> [data-fmtto='ebook'][aria-checked='true'])::before {
  transform: translateX(100%);
}
.fmtseg:has(> [data-fmtto='audio'][aria-checked='true'])::before {
  transform: translateX(200%);
}
.fmtseg:not(:has(> [aria-checked='true']))::before {
  opacity: 0;
}
.fmtseg button,
.fmtseg button[aria-checked='true'] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  transition: color 0.2s ease;
}
.fmtseg button b {
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .fmtseg button,
  .fmtseg button[aria-checked='true'] {
    gap: 5px;
    padding: 0 2px;
  }
  .fmtseg button b {
    font-size: 13.5px;
  }
  .fmtseg button .ic {
    width: 16px;
    height: 16px;
  }
}
.fmtseg button small {
  display: none;
}
.fmtseg button .ic {
  width: 18px;
  height: 18px;
  flex: none;
}
.fmtseg button[aria-checked='true'],
.fmtseg button:hover {
  color: var(--text);
}
.fmtseg button[aria-checked='true'] .ic {
  color: var(--seg);
}
@media (prefers-reduced-motion: reduce) {
  .fmtseg::before {
    transition: none;
  }
}
/* the Home sheet for a book you're reading */
#askbody .ns563 {
  display: grid;
  gap: 14px;
}
.ns563 .ns-hd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.ns563 .ns-hd .bcov,
.ns563 .ns-hd .cdcov {
  width: 56px !important;
  flex: none;
}
.ns563 .ns-ti b {
  display: block;
  font: 700 18px/1.25 var(--hand);
  text-wrap: balance;
}
.ns563 .ns-ti span {
  display: block;
  margin-top: 3px;
}
.ns563 .fmtseg {
  margin: 0;
}
.ns-kept {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -4px 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.ns-kept .ic {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}
.ns-place {
  --fx: var(--accent);
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fx) 7%, var(--panel2));
}
.ns563.aud .ns-place {
  --fx: var(--aud);
}
.ns-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: -6px;
}
.ns-lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.ns-nums {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 3px;
  min-width: 0;
}
/* your numbers are typed straight into the line, underlined so they read as editable */
.ns-num,
.bkp-tot {
  box-sizing: content-box;
  width: calc(var(--w, 3) * 0.62em + 4px);
  min-width: 0.7em;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--fx, var(--accent)) 50%, transparent);
  border-radius: 0;
  background: none;
  color: var(--text);
  font: 800 34px/1.1 var(--hand);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  caret-color: var(--fx, var(--accent));
}
.ns-num.tot,
.bkp-tot {
  font-size: 24px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  border-bottom-style: dashed;
}
.ns563.aud .ns-num {
  font-size: 30px;
}
.ns563.aud .ns-num.tot {
  font-size: 22px;
}
.ns-num::-webkit-inner-spin-button,
.ns-num::-webkit-outer-spin-button,
.bkp-tot::-webkit-inner-spin-button,
.bkp-tot::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ns-num::placeholder,
.bkp-tot::placeholder {
  color: color-mix(in srgb, var(--fx, var(--accent)) 70%, var(--muted));
  opacity: 1;
}
.ns-num:hover,
.bkp-tot:hover {
  border-bottom-color: var(--fx, var(--accent));
}
.ns-num:focus,
.bkp-tot:focus {
  outline: none;
  border-bottom-color: var(--fx, var(--accent));
  border-bottom-style: solid;
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--fx, var(--accent)) 14%, transparent);
}
.ns-of,
.ns-u {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.ns-of {
  margin: 0 4px;
}
.ns-pct {
  font: 800 20px/1 var(--hand);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fx);
}
.ns-range {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  cursor: pointer;
}
.ns-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 9px;
  background: linear-gradient(to right, var(--fx) var(--p), color-mix(in srgb, var(--text) 13%, transparent) var(--p));
}
.ns-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid var(--fx);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
.ns-range::-moz-range-track {
  height: 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 13%, transparent);
}
.ns-range::-moz-range-progress {
  height: 8px;
  border-radius: 9px;
  background: var(--fx);
}
.ns-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--fx);
  border-radius: 50%;
  background: var(--panel);
}
.ns-range:focus-visible {
  outline: 2px solid var(--fx);
  outline-offset: 4px;
  border-radius: 9px;
}
.ns-sub {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.ns-act {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ns-quick {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-width: 240px;
}
.ns-quick button {
  min-height: 40px;
  padding: 0 6px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ns-quick button:hover {
  border-color: var(--fx);
}
.ns563 .ns-save {
  min-height: 44px;
  margin-left: auto;
  padding: 0 18px;
}
.ns563.aud .ns-save:not(:disabled) {
  background: var(--aud);
  color: #16121f;
}
.ns563 .ns-save:disabled {
  opacity: 1;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}
.ns563 .ns-open {
  width: 100%;
}
/* book page: "of 382" in your progress card can be typed over */
#bookbody .bkp-big .bkp-of {
  margin: 0 2px;
}
#bookbody .bkp-big .bkp-tot {
  font-size: 20px;
  vertical-align: baseline;
}
/* the home shelf box: the copy chips are about the copy you own, not how you're reading */
.ownbox > .ownfmt::before {
  content: 'Your copy is a';
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* build 565: players change only the body. On phones the save button floats above the bottom bar while you scroll the bodies, with a small preview of the pick */
.lkbody:has(#evolve.lkgo) {
  animation: none;
  transform: none;
}
.lkbody #evolve.lkgo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 899px) {
  .lkbody #evolve.lkgo {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 9;
    width: auto;
    max-width: 656px;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.22);
  }
  .lkbody:has(#evolve.lkgo) {
    padding-bottom: 96px;
  }
}
.lkbody .lkmini {
  flex: none;
  width: 34px;
  height: 34px;
  margin: -6px 0;
}
.lkbody .lkmini svg {
  width: 100%;
  height: 100%;
}
.lkbody .lkgo-t {
  min-width: 0;
  line-height: 1.2;
}
.lkbody .lkgo-c {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.12);
  font-size: 15px;
  white-space: nowrap;
}

/* build 575: Pawtopia Plaza and Booked Solid are closed for maintenance. A closed sign hangs over your own Plaza,
   your pet steps aside to look at it, and the two Games cards wear a small version of the same amber plank */
.pzmaint .pzpetwrap {
  left: 24%;
}
.pzsign {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 66%;
  width: max-content;
  padding-top: 30px;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: 50% 0;
  animation: pzswing 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pzsign::before,
.pzsign::after,
.pzsign-b::before,
.pzsign-b::after {
  content: '';
  position: absolute;
  background: #5b4128;
}
.pzsign::before,
.pzsign::after {
  top: 0;
  width: 2px;
  height: 38px;
  border-radius: 2px;
}
.pzsign::before,
.pzsign-b::before {
  left: 20%;
}
.pzsign::after,
.pzsign-b::after {
  right: 20%;
}
.pzsign-b::before,
.pzsign-b::after {
  top: 6px;
  width: 6px;
  height: 6px;
  margin: 0 -2px;
  border-radius: 50%;
}
.pzsign-b {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 11px 22px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd27a, #f3a838);
  color: #2b1a07;
  box-shadow: 0 12px 20px -10px rgb(70 40 5 / 0.55);
  white-space: nowrap;
}
.pzsign-b b {
  font: 800 30px/1 var(--hand);
  letter-spacing: -0.01em;
}
.pzsign-b small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pzsign-b small svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 480px) {
  .pzsign-b {
    padding: 9px 16px 10px;
  }
  .pzsign-b b {
    font-size: 24px;
  }
  .pzsign-b small {
    font-size: 10.5px;
  }
}
@keyframes pzswing {
  0% {
    transform: translateX(-50%) rotate(-10deg);
  }
  38% {
    transform: translateX(-50%) rotate(5deg);
  }
  70% {
    transform: translateX(-50%) rotate(-3.5deg);
  }
  100% {
    transform: translateX(-50%) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pzsign {
    animation: none;
  }
}
.pzmaint-tx {
  padding: 14px 4px 2px;
}
.pzmaint-tx p {
  margin: 0 0 12px;
  max-width: 60ch;
  line-height: 1.5;
}
.pzmaint-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#tab-games .hgcard.maint {
  cursor: default;
}
#tab-games .hgcard.maint .hgi {
  filter: grayscale(1);
  opacity: 0.6;
}
#tab-games .hgcard.maint .hgplay,
#tab-games .hgcard.maint:hover .hgplay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #ffd27a, #f3a838);
  color: #2b1a07;
  font-weight: 800;
}
#tab-games .hgcard.maint .hgplay svg {
  width: 14px;
  height: 14px;
}
#tab-games .hgcard.maint:hover {
  transform: none;
  box-shadow: none;
}
/* build 577: wide-but-short screens (a phone or the Fold on its side, short laptop windows): the Fiver boards sit beside the keyboard */
@media (min-aspect-ratio: 5/4) and (max-height: 700px) {
  body.ingame .wrap:has(#gbox > .fv-boards) {
    max-width: 1000px;
  }
  #gbox:has(> .fv-boards) {
    display: grid;
    grid-template-columns: auto minmax(0, 560px);
    grid-template-rows: 1fr auto auto 1fr;
    justify-content: center;
    column-gap: 20px;
    max-width: none;
  }
  #gbox > .fv-boards {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: center;
    margin: 0;
  }
  #gbox:has(> .fv-boards) > .msg {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 8px;
  }
  #gbox:has(> .fv-boards) > .kb {
    grid-column: 2;
    grid-row: 3;
    max-width: 560px;
    margin: 0;
    justify-self: center;
  }
  .fv-board {
    width: min(380px, calc((100dvh - 150px - var(--navh, 0px)) * 0.83), calc(100vw - 500px));
  }
  .n2 .fv-board {
    width: min(260px, calc((100dvh - 150px - var(--navh, 0px)) * 0.7), calc(50vw - 250px));
  }
  .key {
    height: clamp(40px, 7.5dvh, 52px);
  }
}
/* build 577: Groups tiles get shorter when the screen is square or wide, so the Submit row stays on screen */
@media (min-aspect-ratio: 4/5) {
  .gp-grid button {
    aspect-ratio: auto;
    height: clamp(44px, calc((100dvh - var(--navh, 0px) - 320px) / 4), 124px);
  }
}
/* build 577: Timeline rows and the Jar Guess picture make room on shorter screens */
@media (max-width: 480px) and (max-height: 900px) {
  .tl .it {
    padding: 8px 10px 8px 14px;
  }
  .arrows button {
    height: 28px;
  }
}
@media (min-aspect-ratio: 5/4) and (max-height: 700px) {
  .tl {
    gap: 6px;
  }
  .tl .it {
    padding: 5px 10px 5px 14px;
  }
  .arrows {
    flex-direction: row;
  }
  #gbox .card:has(> .jarwrap) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    align-content: center;
  }
  #gbox .card:has(> .jarwrap) > * {
    grid-column: 2;
  }
  #gbox .card > .jarwrap {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: center;
    width: 100%;
    max-width: min(360px, calc(100dvh - var(--navh, 0px) - 190px));
  }
}
/* daily games QoL (build 578): Fiver flip/shake, Scramble hint, Sudoku notes, Word Hunt hint, Timeline grip, Capitals keys */
@media (prefers-reduced-motion: no-preference) {
  /* !important beats the .still rule in 03-books.js, which zeroes delays on redrawn nodes */
  .tile.fv-flip {
    animation: fv-flip 0.42s ease-in-out backwards;
    animation-delay: var(--fv-d, 0ms) !important;
  }
  .fv-row.fv-shake {
    animation: fv-shake 0.36s;
    animation-delay: 0s !important;
  }
}
@keyframes fv-flip {
  0% {
    transform: rotateX(0);
    background: var(--panel);
    border-color: var(--muted);
    color: var(--text);
  }
  49% {
    background: var(--panel);
    border-color: var(--muted);
    color: var(--text);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes fv-shake {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}
.dsc-hint {
  min-height: 22px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pad .sdk-dg {
  position: relative;
}
.sdk-left {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.pad .sdk-done {
  opacity: 0.35;
}
.sdk-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: min(360px, 100%);
  margin: 10px auto 0;
}
.sdk-tools .btn {
  flex: 1;
}
.sdk-tools [aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 30%, var(--panel));
  border-color: var(--accent);
}
.sd button.sdk-same {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}
.sdk-nt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  font-size: clamp(8px, 2.4vw, 11px);
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.sdk-nt i {
  font-style: normal;
  display: grid;
  place-items: center;
}
.hn-count {
  font-variant-numeric: tabular-nums;
}
.hunt div.hn-hint {
  outline: 3px solid var(--mid);
  background: color-mix(in srgb, var(--mid) 35%, var(--panel2));
}
@media (prefers-reduced-motion: no-preference) {
  .hunt div.hn-hint {
    animation: hn-glow 0.9s ease-in-out infinite alternate;
    animation-delay: 0s !important;
  }
}
@keyframes hn-glow {
  to {
    outline-color: transparent;
  }
}
.tl-grip {
  touch-action: none;
  cursor: grab;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  padding: 6px 2px;
  margin-left: -6px;
  user-select: none;
  -webkit-user-select: none;
}
.tl .it.tl-drag {
  outline: 2px solid var(--accent);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}
.tl .it.tl-drag .tl-grip {
  cursor: grabbing;
}
.opts button {
  position: relative;
}
.cap-k {
  position: absolute;
  left: 7px;
  top: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
}
@media (pointer: coarse) {
  .cap-k {
    display: none;
  }
}

/* ---------- build 587: welcome page, bookplate pass ----------
   Flat paper-and-ink look instead of glows and pills. Phones get a compact egg strip so
   "Continue as guest" is on screen without scrolling. Content is unchanged. */
html #namedlg.wlfull > #welcome {
  background: var(--bg);
}
html #namedlg.wlfull .wl-ring,
html #namedlg.wlfull .wl-tap {
  display: none;
}
html #namedlg.wlfull .wl-top {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
html #namedlg.wlfull .wl-what {
  border-radius: 10px;
  background: transparent;
}
html #namedlg.wlfull .wl-egg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  outline: 1px solid var(--line);
  outline-offset: -7px;
}
html #namedlg.wlfull .wl-kick {
  font: italic 500 15px/1.2 var(--hand, Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
html #namedlg.wlfull .wl-egg h3 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}
html #namedlg.wlfull .wl-egg .inc-cap {
  font-weight: 500;
  color: var(--muted);
}
html #namedlg.wlfull .wl-steps {
  gap: 0;
  font-size: 13px;
  color: var(--muted);
}
html #namedlg.wlfull .wl-steps span {
  background: none;
  border-radius: 0;
  padding: 2px 12px;
  font-weight: 600;
}
html #namedlg.wlfull .wl-steps span + span {
  border-left: 1px solid var(--line);
}
html #namedlg.wlfull .wl-main h2 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}
html #namedlg.wlfull .wl-lead {
  max-width: 60ch;
}
html #namedlg.wlfull .wl-auth {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
html #namedlg.wlfull .wl-fold,
html #namedlg.wlfull .wfree {
  border-radius: 12px;
  border-width: 1px;
}
html #namedlg.wlfull .wl-fold > summary {
  border-radius: 12px;
}
html #namedlg.wlfull .wl-fold > summary .gi {
  background: none;
  width: 26px;
}
html #namedlg.wlfull .wl-fold li {
  border-radius: 6px;
  font-weight: 600;
}
html #namedlg.wlfull ::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
html #namedlg.wlfull .tx {
  caret-color: var(--accent);
}
@media (max-width: 859px) {
  html #namedlg.wlfull > #welcome {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  html #namedlg.wlfull .wl-top {
    padding-bottom: 8px;
  }
  html #namedlg.wlfull .wl-grid {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
    margin-top: 12px;
  }
  /* the right column's pieces join the page flow so they can be ordered around the egg */
  html #namedlg.wlfull .wl-main {
    display: contents;
  }
  html #namedlg.wlfull .wl-main > * {
    order: 5;
    margin-top: 0;
    margin-bottom: 0;
  }
  html #namedlg.wlfull .wl-egg {
    order: 1;
  }
  html #namedlg.wlfull .wl-main > h2 {
    order: 2;
  }
  html #namedlg.wlfull .wl-main > .invbanner {
    order: 3;
  }
  html #namedlg.wlfull .wl-main > .wl-auth {
    order: 4;
  }
  html #namedlg.wlfull .wl-main h2 {
    font-size: clamp(23px, 6.4vw, 30px);
  }
  /* compact egg strip: incubator on the left, the words beside it */
  html #namedlg.wlfull .wl-egg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 10px 12px 10px 8px !important;
    column-gap: 10px;
    min-height: 0;
  }
  html #namedlg.wlfull .wl-egg > * {
    grid-column: 2;
    margin: 0;
  }
  html #namedlg.wlfull .wl-egg .incub,
  html #namedlg.wlfull .wl-egg .wl-petshow {
    grid-column: 1;
    grid-row: 1 / span 4;
    zoom: 0.5;
    margin: 0;
  }
  html #namedlg.wlfull .wl-egg .wl-petshow {
    zoom: 1;
    width: 84px;
  }
  html #namedlg.wlfull .wl-egg h3 {
    font-size: 19px;
    margin: 1px 0 2px;
    white-space: nowrap;
  }
  html #namedlg.wlfull .wl-egg .inc-cap {
    text-align: left;
    font-size: 13.5px;
    margin: 0;
  }
  html #namedlg.wlfull .wl-egg .wl-steps {
    justify-content: flex-start;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 11.5px;
    flex-wrap: wrap;
    gap: 0 10px;
    white-space: nowrap;
  }
  html #namedlg.wlfull .wl-steps span {
    padding: 0;
    border: 0 !important;
  }
  html #namedlg.wlfull .wl-egg .inc-cap {
    text-wrap: balance;
  }
  html #namedlg.wlfull .wl-auth {
    padding: 14px;
  }
  html #namedlg.wlfull .wl-auth .or {
    margin: 8px 0;
  }
  html #namedlg.wlfull .wl-auth .auth-stack {
    gap: 8px;
    margin-top: 0;
  }
  html #namedlg.wlfull .wl-auth .btn {
    min-height: 46px;
  }
  html #namedlg.wlfull .wl-foot {
    order: 9;
  }
}
/* build 597: on phones the My library shelf header fits (the Shelf/Covers and Scan labels hide, the icons stay) */
@media (max-width: 400px) {
  .bchead .shmodeb b {
    display: none;
  }
  .bchead [data-scanopen] {
    font-size: 0;
    padding: 0 10px;
    margin-right: 0 !important;
  }
  .bchead [data-scanopen] .ic {
    width: 18px;
    height: 18px;
  }
}