:root {
  color-scheme: light;
  --ink: #211b18;
  --muted: #6f625b;
  --paper: #f7f0dd;
  --desk: #b76434;
  --desk-dark: #7c2d12;
  --cream: #fffaf0;
  --accent: #c2410c;
  --jade: #166534;
  --line: rgba(66, 38, 23, .18);
  font-family: "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }

body {
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.25), transparent 34%),
    repeating-linear-gradient(4deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #54220f, #25100a 65%);
}

button, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(430px, 1fr) auto;
  gap: 14px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: #fff8e7;
  padding: 4px 10px 0;
}

.eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .24em; opacity: .64; }
h1 { margin: 0; font-family: "Songti SC", serif; font-size: clamp(28px, 4vw, 46px); letter-spacing: .08em; }

.live-stats { display: flex; gap: 8px; font-size: 12px; color: #f7e3b4; }
.live-stats > span { display: grid; min-width: 62px; padding: 5px 9px 4px; text-align: center; border: 1px solid rgba(255,224,148,.35); border-radius: 10px; background: linear-gradient(#6e2f19, #40180d); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.2); }
.live-stats b { min-height: 20px; font-size: 17px; color: #fff; }

.game-frame {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 3px solid #c88745;
  border-radius: 22px;
  background: #a9582f;
  box-shadow: 0 22px 60px rgba(0,0,0,.34), inset 0 0 0 2px rgba(75,30,11,.52), inset 0 1px rgba(255,255,255,.35);
  touch-action: none;
  cursor: none;
}

.game-frame,
.game-frame *,
#game-canvas { cursor: none !important; }

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.game-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 84px);
  padding: 10px 16px;
  text-align: center;
  color: #fff9ed;
  background: rgba(48, 21, 14, .7);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.game-hint span { font-size: 12px; opacity: .78; }
.game-hint.is-hidden { opacity: 0; transform: translate(-50%, 8px); }

.offline-banner, .storage-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 96px);
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(255,250,240,.9);
  color: #7c2d12;
  box-shadow: 0 5px 18px rgba(0,0,0,.14);
}
.storage-banner { top: 48px; }

.debug-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(48,21,14,.55);
}

.bottom-nav { display: grid; grid-template-columns: 1fr minmax(150px, 1.2fr) 1fr; gap: 10px; }
.bottom-nav button, .result-actions button {
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  color: #fff8e7;
  background: linear-gradient(#7b351b, #4a1d10);
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.bottom-nav button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bottom-nav button span { opacity: .76; }
.primary-action { border-color: #ffe4a0 !important; color: #4b190a !important; background: linear-gradient(#ffe49d, #e7a94c) !important; font-weight: 800; box-shadow: inset 0 1px #fff4c9, 0 8px 22px rgba(0,0,0,.2) !important; }

.art-number { display: inline-flex !important; align-items: center; justify-content: center; gap: 1px; white-space: nowrap; }
.art-digit { width: auto; height: 1.08em; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(88,32,8,.55)); }
.art-number-symbol { display: inline-grid; place-items: center; min-width: .38em; color: #ffe294; font-family: "Songti SC", serif; font-weight: 900; line-height: 1; }
.bottom-nav .art-digit { height: 1.35em; }
.bottom-nav .art-number-symbol { color: #ffdc83; }

.panel {
  width: min(540px, calc(100% - 28px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,250,231,.94), rgba(238,220,178,.96)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(86,76,60,.08) 27px 28px);
  box-shadow: 0 28px 100px rgba(0,0,0,.45);
}
.panel::backdrop { background: rgba(30,13,8,.72); backdrop-filter: blur(5px); }
.panel form { position: relative; padding: 28px; overflow: auto; max-height: inherit; }
.panel form::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(111,67,31,.22); border-radius: 15px; pointer-events: none; }
.wide-panel { width: min(760px, calc(100% - 28px)); }
.panel-close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 28px; background: #efe4ce; color: var(--muted); }
.panel-kicker { margin: 0 0 4px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.panel h2 { margin: 0 42px 8px 0; font-size: 28px; }
.result-grade { color: var(--muted); }
.result-new { padding: 10px 13px; border-radius: 12px; background: #dcfce7; color: var(--jade); font-weight: 700; }
.result-cards { display: flex; gap: 8px; min-height: 110px; overflow-x: auto; padding: 8px 2px 14px; }
.mini-card { position: relative; flex: 0 0 72px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #eadfca; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.mini-card img { width: 100%; height: 100%; object-fit: cover; }
.mini-card .rarity-frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mini-card b { position: absolute; right: 3px; bottom: 3px; z-index: 2; min-width: 22px; padding: 2px 5px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.65); font-size: 11px; text-align: center; }
.mini-card.rarity-rare { box-shadow: 0 4px 14px rgba(126, 34, 206, .42); }
.mini-card.rarity-hidden { box-shadow: 0 4px 16px rgba(244, 172, 36, .58); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-actions button { color: var(--ink); background: #efe4ce; border-color: #d8cab1; }

.collection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.collection-item { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.collection-item .card-frame { position: relative; aspect-ratio: 2/3; border-radius: 11px; overflow: hidden; background: #e8ddc9; box-shadow: 0 7px 18px rgba(60,32,18,.16); }
.collection-item img { width: 100%; height: 100%; object-fit: cover; }
.collection-item.is-locked img { filter: grayscale(1) contrast(.45) brightness(1.25); opacity: .45; }
.collection-item.is-locked .card-frame::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: rgba(55,40,30,.45); }
.collection-item strong { color: var(--ink); }
.collection-item .rarity-label { width: max-content; margin-top: -3px; padding: 2px 7px; border-radius: 999px; color: #24503f; background: #dcebdc; font-weight: 700; }
.collection-item.rarity-rare .rarity-label { color: #5b2184; background: #eee0f8; }
.collection-item.rarity-hidden .rarity-label { color: #7b4810; background: #f8e2ae; }

.leaderboard-rule { color: var(--muted); }
.leaderboard-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; counter-reset: rank; }
.leaderboard-row { counter-increment: rank; display: grid; grid-template-columns: 42px 1fr auto auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #f2e9d8; }
.leaderboard-row::before { content: counter(rank); font-weight: 800; color: var(--accent); text-align: center; }
.leaderboard-row span { color: var(--muted); font-size: 13px; }
.empty-state { padding: 28px; text-align: center; color: var(--muted); }

.debug-panel {
  position: fixed;
  right: 18px;
  top: 86px;
  z-index: 9;
  width: min(320px, calc(100% - 36px));
  padding: 18px;
  border-radius: 16px;
  color: #f9f1e5;
  background: rgba(31,20,16,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.debug-panel h2 { margin: 0 0 12px; font-size: 16px; }
.debug-panel label { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; margin: 10px 0; font-size: 12px; }
.debug-panel input { width: 100%; }
.record-diagnostic { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid #f6c968; border-radius: 10px; color: #32170e; background: #f6c968; font-weight: 700; }
.record-diagnostic:disabled { opacity: .65; cursor: wait; }
.record-status { margin: 8px 0 0; color: #fde7b0; font-size: 11px; line-height: 1.45; }
.debug-panel pre { max-height: 160px; overflow: auto; font-size: 11px; white-space: pre-wrap; color: #bbf7d0; }

/* ART-A8 formal UI components */
.topbar { align-items: center; }
.title-brand {
  width: clamp(112px, 14vw, 158px);
  min-height: 110px;
  display: grid;
  place-content: center;
  padding: 0;
  filter: drop-shadow(0 5px 6px rgba(27,12,5,.25));
}
.title-brand img { display: block; width: 100%; height: auto; }

.live-stats {
  width: min(420px, 46vw);
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding: 13px 18px 12px 40px;
  color: #633016;
  background: url("./assets/art/v3/ui/panels/hud_bar_blank.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(34,13,4,.24));
}
.live-stats > span {
  min-width: 0;
  flex: 1;
  padding: 3px 4px 3px 22px;
  border: 0;
  color: #7a4628;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 2px center;
  background-size: 20px;
  box-shadow: none;
}
.live-stats .stat-active { background-image: url("./assets/art/v3/ui/icons/icon_player_avatar_round.webp"); }
.live-stats .stat-today { background-image: url("./assets/art/v3/ui/icons/icon_calendar_check.webp"); }
.live-stats .stat-total { background-image: url("./assets/art/v3/ui/icons/icon_star_gold.webp"); }
.live-stats b { color: #8f3f11; text-shadow: 0 1px #fff5ce; }
.live-stats .art-number-symbol { color: #8f3f11; }

.game-hint {
  min-width: min(480px, calc(100% - 44px));
  min-height: 78px;
  place-content: center;
  padding: 16px 48px 22px;
  color: #65361e;
  border: 0;
  border-radius: 0;
  background: url("./assets/art/v3/ui/panels/speech_bubble_blank.webp") center / 100% 100% no-repeat;
  backdrop-filter: none;
  text-shadow: 0 1px #fff7db;
}
.game-hint span { color: #87614b; opacity: 1; }

.bottom-nav {
  width: min(620px, 100%);
  margin: 0 auto;
  grid-template-columns: 76px minmax(180px, 1fr) 76px;
  align-items: center;
}
#open-collection, #open-leaderboard {
  position: relative;
  width: 72px;
  min-height: 72px;
  justify-self: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 6px 5px rgba(23,10,3,.3));
}
#open-collection { background-image: url("./assets/art/v3/ui/buttons/btn_icon_book_round.webp"); }
#open-leaderboard { background-image: url("./assets/art/v3/ui/buttons/btn_icon_trophy_round.webp"); }
#open-collection > span, #open-leaderboard > span {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  color: #59270f;
  background: #ffe7a8;
  font-size: 10px;
  font-weight: 800;
  opacity: 1;
  white-space: nowrap;
}
#open-collection > b, #open-leaderboard > b {
  position: absolute;
  right: -8px;
  top: -3px;
  min-width: 30px;
  min-height: 22px;
  padding: 3px 5px;
  border: 2px solid #f8d47c;
  border-radius: 999px;
  color: #fff7d5;
  background: #743118;
  font-size: 11px;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
#restart-round {
  border: 16px solid transparent !important;
  border-image: url("./assets/art/v3/ui/buttons/btn_primary_orange.webp") 45 130 fill / 16px 44px stretch !important;
  border-radius: 0;
  color: #6f280d !important;
  background: none !important;
  text-shadow: 0 1px #fff2ac;
}
#restart-round:active {
  transform: translateY(2px) scale(.985);
  border-image-source: url("./assets/art/v4/interaction/buttons/btn_primary_orange_pressed.webp") !important;
  box-shadow: none !important;
}
#open-collection:active, #open-leaderboard:active { transform: translateY(2px) scale(.98); filter: none; }
#open-collection:active { background-image: url("./assets/art/v4/interaction/buttons/btn_icon_book_round_pressed.webp"); }
#open-leaderboard:active { background-image: url("./assets/art/v4/interaction/buttons/btn_icon_trophy_round_pressed.webp"); }
#restart-round:disabled {
  pointer-events: none;
  opacity: .8;
  border-image-source: url("./assets/art/v5/interaction/buttons/btn_primary_orange_disabled.webp") !important;
}

@media (hover: hover) and (pointer: fine) {
  #restart-round:not(:disabled):hover {
    transform: translateY(-1px) scale(1.025);
    border-image-source: url("./assets/art/v5/interaction/buttons/btn_primary_orange_hover.webp") !important;
    filter: drop-shadow(0 8px 7px rgba(55, 23, 6, .3));
  }
  #result-collection:hover {
    transform: translateY(-1px) scale(1.025);
    border-image-source: url("./assets/art/v5/interaction/buttons/btn_primary_blue_hover.webp");
  }
  #result-again:hover {
    transform: translateY(-1px) scale(1.025);
    border-image-source: url("./assets/art/v5/interaction/buttons/btn_primary_orange_hover.webp") !important;
  }
  #open-collection:hover {
    transform: translateY(-1px) scale(1.035);
    background-image: url("./assets/art/v5/interaction/buttons/btn_icon_book_round_hover.webp");
  }
  #open-leaderboard:hover {
    transform: translateY(-1px) scale(1.035);
    background-image: url("./assets/art/v5/interaction/buttons/btn_icon_trophy_round_hover.webp");
  }
}
#restart-round:active:not(:disabled) {
  transform: translateY(2px) scale(.985);
  border-image-source: url("./assets/art/v4/interaction/buttons/btn_primary_orange_pressed.webp") !important;
  filter: none;
}
#open-collection:active { transform: translateY(2px) scale(.98); background-image: url("./assets/art/v4/interaction/buttons/btn_icon_book_round_pressed.webp"); filter: none; }
#open-leaderboard:active { transform: translateY(2px) scale(.98); background-image: url("./assets/art/v4/interaction/buttons/btn_icon_trophy_round_pressed.webp"); filter: none; }

.shake-control { display: none; }

@media (max-width: 820px), (pointer: coarse) {
  .shake-control:not([hidden]) {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    display: block;
    min-height: 38px;
    padding: 7px 13px;
    border: 2px solid #f6d58a;
    border-radius: 999px;
    color: #fff7d5;
    background: rgba(89, 39, 15, .88);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(37, 14, 4, .28);
  }
  .shake-control[data-state="enabled"],
  .shake-control[data-state="waiting"],
  .shake-control[data-state="ready"] { opacity: .88; }
  .shake-control[data-state="triggered"] {
    color: #4b2109;
    background: #ffd76a;
    transform: scale(1.04);
  }
}

.panel {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.panel form {
  border-radius: 18px;
  background: linear-gradient(rgba(255,250,231,.98), rgba(238,220,178,.98));
  filter: drop-shadow(0 24px 34px rgba(25,10,4,.45));
}
.panel form::before { display: none; }
.result-panel form {
  box-sizing: border-box;
  min-height: 500px;
  padding: 68px 64px 32px 76px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: url("./assets/art/v16/result/result_exercise_book_blank.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
.result-panel { width: min(720px, calc(100% - 24px)); }
.result-panel form::before {
  display: none;
}
.result-panel form::after {
  display: none;
}
.result-panel form > *:not(.panel-close) { position: relative; z-index: 1; }
.result-panel .panel-close {
  position: absolute !important;
  right: 28px !important;
  left: auto !important;
  top: 24px !important;
}
.album-panel form {
  background:
    url("./assets/art/v3/ui/album_rank/album_open_book_blank.webp") center 92px / 92% 330px no-repeat,
    linear-gradient(rgba(255,249,226,.98), rgba(225,196,142,.98));
}
.rank-panel form {
  background:
    url("./assets/art/v3/ui/panels/panel_leaderboard_blank.webp") center / 100% 100% no-repeat,
    #f6e7bf;
}
.panel-close {
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(107, 53, 24, .34);
  color: #6b3518;
  background: linear-gradient(#fff4cf, #e6c783);
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 3px 7px rgba(54,23,8,.18);
  font: 700 28px/1 system-ui, sans-serif;
}
.panel-close.collection-close {
  width: 52px;
  height: 48px;
  border: 0;
  color: transparent;
  background: url("./assets/art/v3/ui/icons/icon_back_arrow_button.webp") center / contain no-repeat;
  box-shadow: none;
}
.panel-kicker {
  width: max-content;
  min-width: 170px;
  padding: 12px 35px;
  text-align: center;
  color: #6b3518;
  letter-spacing: .12em;
  background: url("./assets/art/v3/ui/panels/strip_wood_blank_01.webp") center / 100% 100% no-repeat;
}
.result-panel .panel-kicker {
  min-width: 190px;
  margin: 0 0 10px;
  padding: 7px 24px;
  border: 1px solid rgba(105,55,28,.48);
  border-radius: 5px;
  color: #59351f;
  letter-spacing: .08em;
  background: linear-gradient(180deg, rgba(224,192,127,.94), rgba(196,151,80,.88));
  box-shadow: inset 0 0 0 2px rgba(255,239,188,.46), 0 2px 3px rgba(78,43,20,.16);
}
.result-panel .panel-kicker span { color: #a63725; font-weight: 900; }
.result-panel h2 {
  color: #9f3925;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: .04em;
}
.result-panel:not(.is-empty-result) h2 { color: #211b18; font-size: 32px; }
.result-panel .result-grade {
  margin: 7px 0 4px;
  color: #3d2a20;
  font-family: "Songti SC", "STSong", serif;
  font-size: 20px;
  font-weight: 800;
}
.result-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  margin-top: 0;
}
.result-empty[hidden], .result-cards[hidden] { display: none; }
.result-empty-cards {
  position: relative;
  width: 218px;
  height: 145px;
}
.result-empty-cards::before,
.result-empty-cards::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 250px;
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.result-empty-cards::before {
  background:
    linear-gradient(22deg, transparent 47%, rgba(92,58,37,.58) 48% 49%, transparent 50%) 0 0 / 54px 40px,
    linear-gradient(-20deg, transparent 47%, rgba(92,58,37,.48) 48% 49%, transparent 50%) 14px 10px / 64px 46px;
  opacity: .72;
}
.result-empty-cards::after {
  border: 3px solid rgba(155,57,37,.4);
  border-width: 0 0 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  opacity: .5;
}
.result-card-back {
  position: absolute;
  top: 10px;
  width: 82px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: url("./assets/art/v9/cards/runtime/card_back.png?v=2") center / 100% 100% no-repeat;
  box-shadow: 0 8px 11px rgba(50,27,15,.3);
}
.result-card-back::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 37%;
  z-index: 1;
  width: 86%;
  height: 29%;
  border: 2px solid #17394a;
  border-radius: 50%;
  background: #ead7a4;
}
.result-card-back img {
  position: absolute;
  left: 5%;
  top: 41%;
  z-index: 2;
  width: 90%;
  height: auto;
}
.result-card-back-left { left: 32px; transform: rotate(-7deg); }
.result-card-back-right { right: 32px; transform: rotate(7deg); }
.result-hint {
  width: min(100%, 430px);
  margin: 0;
  padding: 8px 12px 9px;
  border-bottom: 2px solid rgba(158,54,38,.42);
  color: #3e2b20;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background: rgba(239,222,177,.52);
}
.result-hint span { margin-right: 8px; color: #a53d2b; font-size: 21px; }
.result-new {
  border-radius: 0;
  color: #713614;
  background: url("./assets/art/v3/ui/panels/strip_parchment_blank.webp") center / 100% 100% no-repeat;
}
.result-actions button {
  border: 15px solid transparent;
  border-radius: 0;
  color: #5f2d14;
  background: none;
  text-shadow: 0 1px #fff4c8;
}
.result-panel .result-actions {
  position: absolute;
  left: 76px;
  right: 62px;
  bottom: 38px;
  grid-template-columns: .72fr 1.28fr;
  gap: 14px;
  margin: 0;
}
.result-panel .result-actions button { min-height: 58px; font-size: 18px; font-weight: 800; }
.result-panel:not(.is-empty-result) .result-cards {
  min-height: 170px;
  max-height: 260px;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: auto;
  gap: 10px;
}
.result-panel:not(.is-empty-result) .mini-card { flex-basis: 92px; }
#result-collection { border-image: url("./assets/art/v3/ui/buttons/btn_primary_blue.webp") 44 130 fill / 15px 42px stretch; }
#result-again { border-image: url("./assets/art/v3/ui/buttons/btn_primary_orange.webp") 44 130 fill / 15px 42px stretch !important; background: none !important; }
#result-collection:active, #result-again:active { transform: translateY(2px) scale(.985); box-shadow: none; }
#result-collection:active { border-image-source: url("./assets/art/v4/interaction/buttons/btn_primary_blue_pressed.webp"); }
#result-again:active { border-image-source: url("./assets/art/v4/interaction/buttons/btn_primary_orange_pressed.webp") !important; }

@media (max-width: 540px) {
  .result-panel { width: calc(100% - 10px); }
  .result-panel form {
    min-height: min(600px, calc(100dvh - 16px));
    padding: 65px 25px 24px 42px;
    border-radius: 18px;
  }
  .result-panel .panel-close { right: 19px !important; top: 21px !important; }
  .result-panel .panel-kicker { min-width: 168px; margin-bottom: 10px; padding-inline: 14px; }
  .result-panel h2 { font-size: clamp(32px, 10vw, 42px); }
  .result-panel:not(.is-empty-result) h2 { font-size: 26px; }
  .result-empty-cards { width: 200px; height: 150px; }
  .result-card-back { width: 84px; }
  .result-hint { font-size: 14px; }
  .result-panel .result-actions { grid-template-columns: .8fr 1.2fr; gap: 8px; }
  .result-panel .result-actions { left: 42px; right: 25px; bottom: 30px; }
  .result-panel .result-actions button { min-height: 52px; padding-inline: 0; font-size: 15px; }
}

/* V0.16.3: restore the exact zero-result art direction approved on Aug 9. */
.result-panel.is-empty-result {
  width: min(650px, calc(100% - 20px));
}
.result-panel.is-empty-result form {
  width: 100%;
  min-height: 0;
  aspect-ratio: 900 / 928;
  padding: 0;
  border: 0;
  border-radius: 2.6%;
  background: url("./assets/art/v16/result/result_zero_approved.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 22px 32px rgba(25,10,4,.5));
}
.result-panel.is-empty-result .panel-kicker,
.result-panel.is-empty-result h2,
.result-panel.is-empty-result .result-grade,
.result-panel.is-empty-result .result-empty,
.result-panel.is-empty-result .result-new,
.result-panel.is-empty-result .result-kill,
.result-panel.is-empty-result .result-cards {
  visibility: hidden;
  pointer-events: none;
}
.result-panel.is-empty-result .panel-close {
  position: absolute !important;
  right: 1.2% !important;
  top: 1.2% !important;
  width: 9.2%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none !important;
}
.result-panel.is-empty-result .result-actions {
  position: absolute !important;
  left: 8.7%;
  right: 10.4%;
  bottom: 8.1%;
  height: 10.3%;
  grid-template-columns: .37fr .63fr;
  gap: 4.1%;
}
.result-panel.is-empty-result .result-actions button,
.result-panel.is-empty-result #result-collection,
.result-panel.is-empty-result #result-again {
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0 !important;
  border-image: none !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none;
  text-shadow: none;
  outline: none !important;
}

/* Successful rounds keep dynamic cards on the earlier torn-paper result panel. */
.result-panel:not(.is-empty-result) form {
  min-height: 520px;
  padding: 72px 62px 104px;
  border-radius: 18px;
  background:
    url("./assets/art/v3/ui/panels/panel_result_parchment_blank.webp") center / 100% 100% no-repeat,
    #ead7ad;
}
.result-panel:not(.is-empty-result) .result-actions {
  left: 62px;
  right: 62px;
  bottom: 36px;
}

@media (max-width: 540px) {
  .result-panel.is-empty-result { width: calc(100% - 10px); }
  .result-panel.is-empty-result form { min-height: 0; padding: 0; }
  .result-panel:not(.is-empty-result) form {
    min-height: min(600px, calc(100dvh - 16px));
    padding: 66px 25px 94px 38px;
  }
  .result-panel:not(.is-empty-result) .result-actions {
    left: 38px;
    right: 25px;
    bottom: 28px;
  }
}

.collection-item .card-frame {
  aspect-ratio: 225 / 310;
  padding: 7%;
  overflow: visible;
  border-radius: 0;
  background: url("./assets/art/v3/ui/album_rank/card_slot_unlocked_gold.webp") center / contain no-repeat;
  box-shadow: none;
}
.collection-item .card-frame img { border-radius: 7px; object-fit: cover; }
.collection-item .card-frame .rarity-frame { position: absolute; inset: 7%; z-index: 1; width: 86%; height: 86%; pointer-events: none; }
.collection-item.rarity-rare .card-frame { filter: drop-shadow(0 5px 5px rgba(126, 34, 206, .28)); }
.collection-item.rarity-hidden .card-frame { filter: drop-shadow(0 5px 6px rgba(205, 131, 14, .4)); }
.collection-item.is-locked .card-frame { background-image: url("./assets/art/v3/ui/album_rank/card_slot_locked_01.webp"); }
.collection-item.is-locked img { visibility: hidden; }
.collection-item.is-locked .card-frame::after { display: none; }
.collection-item.is-duplicate .card-frame::before {
  content: "";
  position: absolute;
  right: -8px;
  top: -7px;
  z-index: 2;
  width: 54%;
  aspect-ratio: 148 / 105;
  background: url("./assets/art/v3/ui/album_rank/tag_duplicate_card.webp") center / contain no-repeat;
}

.leaderboard-row {
  box-sizing: border-box;
  width: 100%;
  grid-template-columns: 92px minmax(150px, 1fr) 105px 112px;
  gap: 8px;
  min-height: 62px;
  padding: 8px 20px 8px 12px;
  border: 14px solid transparent;
  border-radius: 0;
  background: none;
  border-image: url("./assets/art/v3/ui/album_rank/rank_row_normal.webp") 28 90 fill / 14px 44px stretch;
}
.leaderboard-row::before { display: none; }
.leaderboard-row strong,
.leaderboard-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-row strong { color: #6b3518; text-align: center; }
.leaderboard-row span { color: #6f4a2d; text-align: center; }
.leaderboard-row.rank-1 { border-image-source: url("./assets/art/v3/ui/album_rank/rank_row_top1_gold.webp"); }
.leaderboard-row.rank-2 { border-image-source: url("./assets/art/v3/ui/album_rank/rank_row_top2_silver.webp"); }
.leaderboard-row.rank-3 { border-image-source: url("./assets/art/v3/ui/album_rank/rank_row_top3_bronze.webp"); }
.leaderboard-row.rank-1 strong { color: #8b4b08; }
.leaderboard-row.rank-2 strong { color: #59616a; }
.leaderboard-row.rank-3 strong { color: #805032; }

@media (max-width: 720px) {
  .app-shell { padding-inline: 10px; gap: 9px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .topbar { align-items: center; }
  .live-stats { gap: 4px; font-size: 9px; }
  .live-stats > span { min-width: 48px; padding-inline: 5px; }
  .live-stats b { font-size: 14px; }
  .game-frame { min-height: 0; height: calc(100dvh - 160px); border-radius: 16px; }
  .bottom-nav { gap: 7px; }
  .bottom-nav button { min-height: 46px; font-size: 13px; }
  .game-hint { font-size: 13px; }
  .rank-panel form { padding: 28px 16px 22px; overflow-x: hidden; }
  .rank-panel .leaderboard-list { margin-top: 10px; }
  .leaderboard-row {
    grid-template-columns: 44px minmax(82px, 1fr) 58px 64px;
    gap: 3px;
    min-height: 54px;
    padding: 6px 7px;
    border-width: 8px;
    font-size: 10px;
  }
  .leaderboard-row span { font-size: 10px; text-align: center; }
  .title-brand { width: min(28%, 108px); min-width: 78px; min-height: 76px; }
  .live-stats { width: 70%; min-width: 0; min-height: 58px; padding: 9px 6px 9px 22px; }
  .live-stats > span { padding-left: 15px; background-size: 14px; font-size: 8px; }
  .live-stats b { min-height: 15px; font-size: 12px; }
  .bottom-nav { grid-template-columns: 64px minmax(140px, 1fr) 64px; }
  #open-collection, #open-leaderboard { width: 60px; min-height: 60px; }
  .game-hint { min-width: calc(100% - 28px); padding-inline: 30px; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 430px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ART-A15 《啪一叽》 shared main UI */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(2deg, rgba(255,255,255,.018) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at 50% 42%, #7b421f 0, #542913 68%, #2c150b 100%);
}

.a15-main-shell {
  --a15-ratio: 1.776833;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url("./assets/art/a15/main_ui/refs/01_pc_master_reference.png") center / 100% 100% no-repeat;
  box-shadow: 0 0 70px rgba(10,3,1,.58);
}

.a15-main-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(45,20,8,.24) 35px, transparent 37px),
    repeating-linear-gradient(176deg, transparent 0 91px, rgba(255,221,155,.08) 93px, transparent 96px);
  mix-blend-mode: soft-light;
}

.a15-props { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.a15-prop { position: absolute; display: block; height: auto; user-select: none; }
.a15-prop-left-upper { left: 0; top: 14.24%; width: 24.82%; }
.a15-prop-left-lower { left: 0; top: 48.25%; width: 26.68%; }
.a15-prop-right-upper { right: 0; top: 14.88%; width: 26.86%; }
.a15-prop-right-lower { right: 0; top: 52.18%; width: 29.13%; }

.a15-main-shell .topbar {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  padding: 0;
  pointer-events: none;
}

.a15-main-shell .title-brand {
  position: absolute;
  left: 32.78%;
  top: .85%;
  width: 34.33%;
  min-height: 0;
  padding: 0;
  filter: none;
  pointer-events: none;
}
.a15-main-shell .title-brand img { width: 100%; height: auto; }
.a15-main-shell .title-brand img,
.a15-progress-board > img,
.a15-round-action > img,
.a15-utility-group > img,
.a15-access-stats > img { opacity: 0; }

.a15-progress-board {
  position: absolute;
  left: 1.97%;
  top: 2.55%;
  width: 21.41%;
  aspect-ratio: 358 / 196;
  pointer-events: none;
}
.a15-progress-board > img,
.a15-round-action > img,
.a15-utility-group > img,
.a15-access-stats > img,
.a15-mid-panel > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.a15-progress-cell {
  position: absolute;
  top: 42%;
  z-index: 1;
  width: 40%;
  height: 24%;
  display: block;
  text-align: center;
  color: #3c1c0c;
  background: transparent;
  box-shadow: none;
}
.a15-progress-unique { left: 9%; }
.a15-progress-total { right: 9%; }
.a15-progress-cell span { display: none; }
.a15-progress-cell b {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #9d2419;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,244,201,.22), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(83,42,18,.035) 10px),
    #d8c08e;
  border-radius: 7%;
  font-size: clamp(13px, 1.65vw, 29px);
  line-height: 1;
  box-shadow: inset 0 0 7px rgba(83,42,18,.11), 0 0 2px #d8c08e;
}

.a15-top-actions {
  position: absolute;
  right: .85%;
  top: 1.9%;
  width: 31.6%;
  height: 21.5%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  pointer-events: auto;
}
.a15-round-action {
  all: unset;
  position: relative;
  display: block;
  width: 32%;
  aspect-ratio: 167 / 202;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .16s ease, filter .16s ease;
}
.a15-round-action:focus-visible,
.a15-utility-hit:focus-visible,
.a15-reset-hotspot:focus-visible { outline: 3px solid #ffe28d; outline-offset: 3px; }
.a15-round-action:hover { transform: translateY(-2px) scale(1.025); filter: brightness(1.05); }
.a15-round-action:active { transform: translateY(2px) scale(.98); }
#open-collection.a15-round-action,
#open-leaderboard.a15-round-action {
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
}

.a15-utility-group {
  position: relative;
  width: 45%;
  aspect-ratio: 238 / 158;
}
.a15-utility-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: transparent;
  background: transparent;
}
.a15-utility-hit:hover { background: rgba(255,233,169,.12); }
.a15-utility-hit:active { transform: translateY(2px); }
.a15-sound-hit { left: 0; }
.a15-rules-hit { left: 33.333%; }
.a15-settings-hit { right: 0; }
.a15-sound-hit[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 48%;
  height: 4px;
  border-radius: 99px;
  background: #a4281b;
  transform: rotate(-35deg);
  box-shadow: 0 1px #ffe9b2;
}

.a15-main-shell .game-frame {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.a15-main-shell #game-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(91,42,17,.78);
  border-radius: 18px;
  box-shadow:
    0 0 0 5px rgba(211,145,66,.28),
    0 0 0 10px rgba(54,23,9,.28),
    inset 0 0 54px rgba(25,8,2,.36),
    0 16px 34px rgba(21,7,2,.3);
}

.a15-mid-panels {
  position: absolute;
  left: 29%;
  top: -22%;
  z-index: 4;
  width: 42%;
  height: 27%;
  display: flex;
  justify-content: center;
  gap: 3%;
  pointer-events: none;
}
.a15-mid-panel { position: relative; height: 100%; }
.a15-mid-encyclopedia { width: 46%; }
.a15-mid-obtained { width: 51%; }
.a15-mid-panel span,
.a15-mid-panel b {
  position: absolute;
  left: 8%;
  right: 8%;
  z-index: 1;
  text-align: center;
  font-family: "Songti SC", serif;
}
.a15-mid-panel span { display: none; }
.a15-mid-panel b {
  top: 54%;
  bottom: 17%;
  display: grid;
  place-items: center;
  color: #a32b1b;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,244,201,.2), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(83,42,18,.035) 9px),
    #cfb177;
  border-radius: 7%;
  font-size: clamp(13px, 1.35vw, 23px);
  box-shadow: inset 0 0 6px rgba(83,42,18,.1), 0 0 2px #cfb177;
}

.a15-main-shell .game-hint {
  left: 50%;
  bottom: -20%;
  z-index: 3;
  width: 98.5%;
  min-width: 0;
  max-width: none;
  aspect-ratio: 760 / 136;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/art/a15/main_ui/ui_slices/09_hint_chalk_zone_no_hand.png") center / 100% 100% no-repeat;
  filter: none;
}
.a15-main-shell .game-hint strong,
.a15-main-shell .game-hint span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.a15-main-shell .game-hint.is-hidden { opacity: .42; transform: translateX(-50%); }

.a15-reset-hotspot {
  position: absolute;
  left: 18.2%;
  top: 74.5%;
  z-index: 6;
  width: 5.3%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
#restart-round.a15-reset-hotspot {
  min-height: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
}
.a15-reset-hotspot span {
  position: absolute;
  left: 105%;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  padding: 2px 4px;
  color: #f4d49a;
  background: transparent;
  font-family: "Kaiti SC", "STKaiti", cursive;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow: 0 1px #3c1709, 1px 0 rgba(255,239,184,.28);
  rotate: -3deg;
  pointer-events: none;
}
.a15-reset-hotspot span::before { content: "↻ "; font-family: system-ui, sans-serif; }
.a15-reset-hotspot:hover { background: rgba(255,226,139,.12); }
.a15-reset-hotspot:active { transform: translateY(2px) scale(.96); }
.a15-reset-hotspot:disabled { cursor: wait; opacity: .52; }

.a15-access-stats {
  position: absolute;
  left: 23.21%;
  bottom: 1.9%;
  z-index: 5;
  width: 53.83%;
  height: auto;
  min-height: 0;
  aspect-ratio: 900 / 112;
  display: block;
  padding: 0;
  color: #3f200f;
  background: none;
  filter: none;
  pointer-events: none;
}
.a15-access-stats > span {
  position: absolute;
  top: 31%;
  width: 9%;
  height: 27%;
  z-index: 1;
  min-width: 0;
  display: block;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-family: "Songti SC", serif;
  font-size: 0;
  white-space: nowrap;
  background-image: none;
}
.a15-access-stats .stat-active { left: 15.3%; }
.a15-access-stats .stat-today { left: 43.8%; }
.a15-access-stats .stat-total { left: 71.3%; width: 10.5%; }
.a15-access-stats b {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: #9d2d20;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(83,42,18,.035) 8px),
    #c9a96f;
  border-radius: 8%;
  font-size: clamp(10px, 1.15vw, 19px);
  line-height: 1;
  box-shadow: inset 0 0 4px rgba(83,42,18,.1), 0 0 2px #c9a96f;
}
.a15-access-stats .stat-total b { color: #1f5c78; }

.a15-main-shell .offline-banner,
.a15-main-shell .storage-banner { z-index: 8; top: 2%; }
.a15-main-shell .storage-banner { top: 7%; }
.a15-main-shell .shake-control:not([hidden]) { right: 1%; bottom: -16%; }

.rules-list { margin: 18px 0 4px; padding-left: 1.5em; display: grid; gap: 12px; line-height: 1.65; }

@media (max-aspect-ratio: 4 / 5) {
  .a15-main-shell {
    width: 100vw;
    height: 100dvh;
    background:
      radial-gradient(circle at 17% 26%, rgba(221,155,79,.12), transparent 25%),
      radial-gradient(circle at 81% 64%, rgba(32,10,3,.17), transparent 32%),
      repeating-linear-gradient(1.5deg, rgba(255,232,187,.018) 0 2px, transparent 2px 7px),
      linear-gradient(100deg, #6d381a, #7b4320 45%, #633116);
  }
  .a15-props { display: none; }
  .a15-main-shell .title-brand img,
  .a15-progress-board > img,
  .a15-round-action > img,
  .a15-utility-group > img,
  .a15-access-stats > img { opacity: 1; }
  .a15-main-shell .title-brand { left: 7%; top: max(1%, env(safe-area-inset-top)); width: 86%; }
  .a15-progress-board { left: 2%; top: 14%; width: 36%; }
  .a15-top-actions {
    right: 1%;
    top: 13.5%;
    width: 43%;
    height: 18%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }
  .a15-round-action { width: 100%; }
  .a15-side-tools { grid-column: 1 / -1; width: 100%; margin-top: -12%; }
  .a15-progress-cell span { font-size: clamp(9px, 3.2vw, 14px); }
  .a15-progress-cell b { font-size: clamp(15px, 5vw, 24px); }

  .a15-main-shell .game-frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .a15-main-shell #game-canvas { border-radius: 0; }
  .a15-mid-panels { display: none; }
  .a15-main-shell .game-hint { bottom: -10%; width: 100%; }
  .a15-reset-hotspot { left: 3%; top: 79%; width: 18%; }
  .a15-reset-hotspot span { font-size: clamp(16px, 4.8vw, 22px); }
  .a15-access-stats {
    left: 2%;
    bottom: max(.5%, env(safe-area-inset-bottom));
    width: 52%;
    padding-inline: 0;
  }
  .a15-access-stats > span { font-size: 0; line-height: 0; }
  .a15-access-stats b { font-size: clamp(14px, 4.2vw, 20px); }
  .a15-main-shell .shake-control:not([hidden]) { right: 3%; bottom: -7%; }
}

/* Usability and accessibility pass. */
#game-canvas:focus-visible {
  outline: 4px solid #ffe28d;
  outline-offset: 4px;
}

.collection-item {
  appearance: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  background: transparent;
  cursor: pointer;
}
.collection-item:focus-visible {
  outline: 3px solid #a33a24;
  outline-offset: 4px;
  border-radius: 10px;
}
.collection-item .card-frame { transition: transform .16s ease; }
.collection-item:hover .card-frame { transform: translateY(-3px); }

.card-detail-panel { width: min(560px, calc(100% - 24px)); }
.card-detail-panel form {
  min-height: 390px;
  padding: 34px 38px;
  background: #f4e5bd url("./assets/art/v16/result/result_exercise_book_blank.png") center / 100% 100% no-repeat;
}
.card-detail-layout {
  display: grid;
  grid-template-columns: minmax(150px, 42%) 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}
.card-detail-art { aspect-ratio: 2 / 3; filter: drop-shadow(0 10px 12px rgba(42,18,8,.25)); }
.card-detail-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-detail-copy { display: grid; gap: 10px; color: #624127; }
.card-detail-copy h2 { margin: 0; font-size: clamp(28px, 5vw, 42px); color: #8f2e20; }
.card-detail-copy p { margin: 0; }
.card-detail-number { font-weight: 800; color: #9b3625; }
.card-detail-count { margin-top: 8px; font-size: 20px; color: #28613c; }

.wind-range-guide {
  position: relative;
  width: min(300px, 84vw);
  aspect-ratio: 2 / 1;
  margin: 8px auto 18px;
}
.wind-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: start center;
  border: 2px dashed currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 800;
}
.wind-ring-far { width: 100%; height: 100%; padding-top: 4px; color: #8b765d; }
.wind-ring-mid { width: 66%; height: 66%; padding-top: 4px; color: #c67a26; }
.wind-ring-near { width: 34%; height: 34%; padding-top: 3px; color: #ad3324; }
.wind-range-guide > b {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%) rotate(-5deg);
  color: #9f271c;
  font-size: 22px;
}

@media (max-width: 720px) {
  .leaderboard-row {
    grid-template-columns: 52px minmax(86px, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 7px;
    min-height: 62px;
    padding: 7px 9px;
    border-width: 8px;
    font-size: 12px;
  }
  .leaderboard-row strong { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .leaderboard-row span { font-size: 12px; text-align: left; }
  .leaderboard-row span:nth-of-type(1) { grid-column: 2 / 4; grid-row: 1; }
  .leaderboard-row span:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .leaderboard-row span:nth-of-type(3) { grid-column: 3; grid-row: 2; }
}

@media (max-width: 540px) {
  .card-detail-panel form { min-height: 340px; padding: 30px 24px; }
  .card-detail-layout { grid-template-columns: 42% 1fr; gap: 16px; margin-top: 18px; }
  .card-detail-copy { gap: 7px; font-size: 13px; }
  .card-detail-count { font-size: 16px; }
}

/* ART-A5 composition + ART-A8 formal collection components */
.album-panel {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100dvh - 18px);
  color: #4f2914;
}
.album-panel::backdrop {
  background: rgba(35, 14, 5, .78);
  backdrop-filter: blur(7px);
}
.album-panel .collection-shell {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 6px;
  width: 100%;
  height: min(900px, calc(100dvh - 18px));
  max-height: none;
  padding: 12px 28px 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 225, 159, .6);
  border-radius: 26px;
  background:
    linear-gradient(rgba(110, 56, 23, .12), rgba(61, 26, 9, .24)),
    url("./assets/art/a16/main_ui/backgrounds/desk_clean_wood.png") center / cover no-repeat;
  box-shadow: inset 0 0 70px rgba(38, 13, 3, .28), 0 28px 80px rgba(0, 0, 0, .55);
  filter: none;
}
.album-panel .collection-close {
  right: 20px;
  top: 16px;
  width: 48px;
  height: 44px;
  overflow: hidden;
  border: 0;
  color: transparent;
  background: url("./assets/art/a8/formal_ui/icons/icon_back_arrow_button.png") center / contain no-repeat;
}

.collection-hero {
  position: relative;
  justify-self: center;
  display: grid;
  place-content: center;
  width: min(430px, 48vw);
  min-height: 174px;
  margin-bottom: 5px;
  padding: 38px 72px 42px;
  text-align: center;
  background: url("./assets/art/a8/formal_ui/panels/title_plaque_gourd_blank.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 8px rgba(46, 18, 4, .28));
}
.collection-eyebrow {
  margin: 0;
  color: #6b3a1f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.album-panel .collection-hero h2 {
  margin: 0;
  color: #63290f;
  font-family: "Kaiti SC", "STKaiti", "Songti SC", serif;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.02;
  text-shadow: 0 2px rgba(255, 239, 183, .85);
}
.collection-summary {
  position: absolute;
  left: 50%;
  bottom: -8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 215px;
  min-height: 58px;
  padding: 15px 46px 13px 25px;
  color: #71401f;
  background: url("./assets/art/a8/formal_ui/panels/progress_badge_blank.png") center / 100% 100% no-repeat;
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
}
.collection-summary .art-number {
  display: inline-flex;
  height: 18px;
  vertical-align: -4px;
}

.collection-status-tabs,
.collection-series-tabs {
  display: flex;
  justify-content: center;
  align-items: end;
  min-width: 0;
}
.collection-status-tabs {
  z-index: 2;
  gap: 8px;
  margin-bottom: -13px;
}
.collection-status-tabs button {
  width: min(176px, 22vw);
  min-height: 48px;
  padding: 4px 20px 9px;
  border: 0;
  color: #75421f;
  background: url("./assets/art/a8/formal_ui/album_rank/album_tab_unselected.png") center / 100% 100% no-repeat;
  font-family: "Kaiti SC", "STKaiti", serif;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 900;
  text-shadow: 0 1px #fff1c7;
}
.collection-status-tabs button[aria-selected="true"] {
  min-height: 54px;
  color: #fff8d7;
  background-image: url("./assets/art/a8/formal_ui/album_rank/album_tab_selected.png");
  text-shadow: 0 2px 2px rgba(68, 30, 10, .65);
  transform: translateY(1px);
}
.collection-series-tabs {
  justify-content: flex-start;
  gap: 7px;
  width: min(900px, 92%);
  margin: 0 auto -5px;
  padding: 0 10px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.collection-series-tabs button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 5px 14px;
  border: 1px solid rgba(91, 45, 18, .42);
  border-radius: 99px;
  color: #6d3b1e;
  background: rgba(250, 226, 171, .88);
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(58,25,8,.18);
  font-weight: 800;
  white-space: nowrap;
}
.collection-series-tabs button[aria-pressed="true"] {
  color: #fff7d4;
  background: #a84a23;
  border-color: #6d2c14;
}
.collection-series-tabs button b {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(71, 30, 11, .14);
  font-size: 11px;
}

.collection-book {
  position: relative;
  justify-self: center;
  box-sizing: border-box;
  width: min(940px, 100%);
  min-height: min(390px, 48vh);
  padding: 38px 7.5% 43px;
  overflow: hidden;
  background: url("./assets/art/a8/formal_ui/album_rank/album_open_book_blank.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 13px 10px rgba(43, 16, 4, .34));
}
.collection-book-toolbar {
  position: absolute;
  top: 24px;
  left: 9%;
  right: 9%;
  display: flex;
  justify-content: space-between;
  color: #8a5a31;
  font-size: 12px;
}
.collection-book-toolbar > div { display: flex; gap: 14px; }
.collection-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 17px 14px;
  height: 100%;
  margin: 0;
  padding: 13px 9px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(128, 75, 33, .46) transparent;
  scrollbar-width: thin;
}
.collection-item {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  color: #623b20;
  font-size: 11px;
  text-align: center;
  max-width: 120px;
  justify-self: center;
}

.collection-grid { scrollbar-color: #b87932 rgba(99, 53, 24, .12); }
.collection-grid::-webkit-scrollbar { width: 10px; }
.collection-grid::-webkit-scrollbar-track {
  margin-block: 8px;
  border-radius: 99px;
  background: rgba(99, 53, 24, .12);
}
.collection-grid::-webkit-scrollbar-thumb {
  border: 2px solid #efd39a;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b511f, #cf9448 48%, #8b511f);
  box-shadow: inset 0 0 0 1px rgba(75, 35, 12, .28);
}

.settings-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.settings-actions button,
.settings-actions .settings-lab-entry {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 5px 34px 10px;
  border: 0;
  color: #5b2d16;
  background: url("./assets/art/a8/formal_ui/buttons/btn_primary_blue.png") center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: "Kaiti SC", "STKaiti", serif;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px #fff2c4;
  text-decoration: none;
}
.settings-actions [hidden] { display: none; }
.settings-actions button:nth-child(2) {
  background-image: url("./assets/art/a8/formal_ui/buttons/btn_primary_orange.png");
}
.settings-actions .settings-lab-entry {
  color: #fff5d2;
  background: linear-gradient(180deg, #bd562d, #7d2b1b);
  border: 2px solid #f1cd7e;
  border-radius: 999px;
  text-shadow: 0 2px #5a1c12;
}
.settings-actions button:hover { filter: brightness(1.05); }
.settings-actions button:active { transform: translateY(2px) scale(.985); }
.settings-note { color: #76553c; font-size: 13px; line-height: 1.6; }
.collection-item .card-frame {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 227 / 311;
  padding: 7.5%;
  overflow: visible;
  background: url("./assets/art/a8/formal_ui/album_rank/card_slot_unlocked_gold.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 4px rgba(66, 34, 14, .22));
}
.collection-item .card-frame .card-art {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}
.collection-item.is-locked .card-frame {
  background-image: url("./assets/art/a8/formal_ui/album_rank/card_slot_locked_01.png");
  filter: none;
}
.collection-item.is-locked .card-art { visibility: hidden; }
.collection-item.rarity-rare .card-frame { filter: drop-shadow(0 5px 5px rgba(126, 34, 206, .32)); }
.collection-item.rarity-hidden .card-frame { filter: drop-shadow(0 6px 6px rgba(205, 131, 14, .42)); }
.collection-card-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 5px;
}
.collection-card-caption strong {
  overflow: hidden;
  color: #4d2b16;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-card-caption span {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  color: #896242;
  font-size: 9px;
}
.collection-card-caption span b { color: #9e2d1d; }
.collection-empty {
  position: absolute;
  inset: 42% 15% auto;
  margin: 0;
  color: #896445;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.collection-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  min-height: 62px;
}
.collection-actions button {
  width: min(230px, 30vw);
  min-height: 58px;
  padding: 4px 28px 9px;
  border: 0;
  color: #5b2d16;
  background: center / 100% 100% no-repeat;
  font-family: "Kaiti SC", "STKaiti", serif;
  font-size: 21px;
  font-weight: 900;
  text-shadow: 0 1px #fff2c4;
}
.collection-back { background-image: url("./assets/art/a8/formal_ui/buttons/btn_primary_orange.png") !important; }
.collection-rank { background-image: url("./assets/art/a8/formal_ui/buttons/btn_primary_blue.png") !important; }
.collection-actions button:active { transform: translateY(2px) scale(.985); }

@media (max-width: 760px) {
  .album-panel {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
  }
  .album-panel .collection-shell {
    height: 100dvh;
    padding: max(6px, env(safe-area-inset-top)) 10px max(7px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }
  .album-panel .collection-close {
    right: 8px;
    top: max(7px, env(safe-area-inset-top));
    width: 42px;
    height: 38px;
  }
  .collection-hero {
    width: min(82vw, 360px);
    min-height: 148px;
    margin-bottom: 3px;
    padding: 30px 52px 38px;
  }
  .collection-eyebrow { font-size: 9px; }
  .album-panel .collection-hero h2 { font-size: clamp(27px, 8vw, 38px); }
  .collection-summary { bottom: -7px; width: 180px; min-height: 50px; padding: 13px 38px 10px 20px; font-size: 10px; }
  .collection-status-tabs { gap: 2px; margin-bottom: -10px; }
  .collection-status-tabs button {
    width: 30vw;
    min-height: 43px;
    padding: 4px 10px 8px;
    font-size: 17px;
  }
  .collection-status-tabs button[aria-selected="true"] { min-height: 48px; }
  .collection-series-tabs { width: 96%; padding-inline: 4px; }
  .collection-series-tabs button { min-height: 29px; padding: 3px 10px; font-size: 11px; }
  .collection-book {
    width: 100%;
    min-height: min(470px, 60vh);
    padding: 34px 7% 36px;
  }
  .collection-item { width: 100%; max-width: none; }
  .collection-book-toolbar { top: 23px; font-size: 10px; }
  .collection-book-toolbar > div { gap: 7px; }
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 12px;
    padding: 10px 9% 20px;
  }
  .collection-card-caption strong { font-size: 12px; }
  .collection-actions { gap: 8px; min-height: 52px; }
  .collection-actions button {
    width: min(46vw, 210px);
    min-height: 49px;
    padding: 3px 18px 7px;
    font-size: 18px;
  }
}

@media (min-width: 761px) and (max-width: 940px) {
  .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .a15-main-shell .title-brand { top: 0; width: 30%; left: 35%; }
  .a15-progress-board { top: 1%; width: 19%; }
  .a15-top-actions { top: 1%; width: 29%; }
}

/* ART-A16/A17 production composition */
.a15-main-shell {
  background-color: #4b260f;
  background-image: url("./assets/art/a16/main_ui/backgrounds/desk_with_props_no_cards_ui.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.a15-main-shell::before { opacity: .08; }
.a17-mobile-props { display: none; }

.a15-main-shell .title-brand {
  left: 34%;
  top: 1.4%;
  width: 32%;
}

.a15-main-shell .title-brand img,
.a15-progress-board > img,
.a15-round-action > img,
.a15-access-stats > img { opacity: 1; }

.a15-progress-board {
  left: 2.2%;
  top: 3.6%;
  width: 24%;
  aspect-ratio: 1443 / 754;
}

.a15-progress-cell {
  top: 16%;
  left: auto;
  width: 31%;
  height: 72%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 3%;
  gap: 2%;
}
.a15-progress-unique { left: 12.5%; }
.a15-progress-total { left: 56.5%; right: auto; }
.a15-progress-cell span {
  display: block;
  flex: 0 0 auto;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Noto Serif SC", serif;
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: 700;
  color: #2a1a12;
  line-height: 1.1;
  text-shadow: 0 0 5px #f4e4c6, 0 0 8px #f4e4c6;
}
.a15-progress-cell b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  transform: translateY(-18%);
  gap: .12em;
  color: #7a3328;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Noto Serif SC", serif;
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 1px rgba(255,246,220,.55);
}
.a15-progress-cell b i {
  font-style: normal;
  font-size: .58em;
  font-weight: 700;
  transform: translateY(.06em);
}

.a15-top-actions {
  right: 1.2%;
  top: 2.1%;
  width: 31%;
  height: 18%;
  align-items: flex-start;
  gap: 1.2%;
}
.a15-round-action { width: 22%; aspect-ratio: 1; }
.a15-round-action > img { object-fit: contain; }

.a15-utility-group {
  width: 38%;
  height: 72%;
  aspect-ratio: auto;
  display: flex;
  align-items: flex-start;
  gap: 1%;
  padding-top: 3%;
}
.a15-side-tools {
  display: flex;
  flex-direction: column;
  width: 38%;
  gap: 4%;
}
.a15-side-tools .a15-utility-group {
  width: 100%;
  height: auto;
  padding-top: 0;
}
.a15-extra-group {
  display: flex;
  width: 100%;
  gap: 1%;
  align-items: flex-start;
}
.a15-extra-group .a15-utility-hit {
  flex: 1 1 0;
  text-decoration: none;
}
.a15-utility-hit {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12%;
  overflow: visible;
}
.a15-utility-hit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.a15-sound-hit,
.a15-rules-hit,
.a15-settings-hit { left: auto; right: auto; }

.a15-main-shell .game-frame {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.a15-main-shell #game-canvas {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.a15-mid-panels { display: none; }
.a15-main-shell .game-hint { display: none; }

.a15-reset-hotspot {
  left: 18%;
  top: 69.5%;
  width: 5.5%;
}

.a15-access-stats {
  left: 31%;
  bottom: 1.4%;
  width: 36%;
  aspect-ratio: 1349 / 238;
}
.a15-access-stats .stat-label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}
.a15-access-stats > span {
  top: 46%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-align: center;
  white-space: nowrap;
}
.a15-access-stats .stat-active { left: 6.2%; width: 20%; }
.a15-access-stats .stat-today { left: 35.2%; width: 29%; }
.a15-access-stats .stat-total { left: 68.2%; width: 27%; }
.a15-access-stats > .stat-active,
.a15-access-stats > .stat-today,
.a15-access-stats > .stat-total { background-image: none; }
.a15-access-stats b,
.a15-access-stats b.art-number {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #7a3328;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Noto Serif SC", serif;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px rgba(255,246,220,.55);
}
.a15-access-stats .art-digit { display: none; }
.a15-access-stats .art-number-symbol { color: inherit; font-family: inherit; }
.a15-access-stats .stat-today b,
.a15-access-stats .stat-total b { color: #7a3328; }

@media (max-aspect-ratio: 4 / 5) {
  .a15-main-shell {
    background-image: url("./assets/art/a16/main_ui/backgrounds/desk_clean_wood.png");
    background-position: center;
    background-size: cover;
  }

  .a17-mobile-props {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  .a17-prop {
    position: absolute;
    display: block;
    height: auto;
    object-fit: contain;
    user-select: none;
  }
  .prop-pencilcase { left: 0; bottom: 7.2%; width: 40%; z-index: 2; }
  .prop-notebook { left: 3%; bottom: 5.5%; width: 30%; z-index: 3; }
  .prop-star { left: 32%; bottom: 20.5%; width: 8%; z-index: 4; }
  .prop-eraser { left: 40%; bottom: 22%; width: 13%; z-index: 4; }
  .prop-graphpaper { right: 0; bottom: 7%; width: 30%; z-index: 2; }
  .prop-ruler { right: 10%; bottom: 14.5%; width: 20%; z-index: 3; }
  .prop-magazine { right: 2%; bottom: 4.5%; width: 34%; z-index: 4; }
  .prop-pennant { right: 0; bottom: 3.5%; width: 24%; z-index: 5; }

  .a15-main-shell .title-brand {
    left: 4%;
    top: max(1%, env(safe-area-inset-top));
    width: 72%;
  }
  .a15-progress-board {
    left: 3%;
    top: 26%;
    width: 34%;
  }
  .a15-progress-cell { top: 16%; height: 76%; }
  .a15-progress-cell span { font-size: clamp(14px, 4.1vw, 18px); }
  .a15-progress-cell b {
    font-size: clamp(18px, 5.8vw, 26px);
    transform: translateY(-22%);
  }

  .a15-top-actions {
    right: 1%;
    top: max(1.5%, env(safe-area-inset-top));
    width: 24%;
    height: 48%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2%;
  }
  .a15-round-action { width: 72%; }
  .a15-side-tools {
    width: 58%;
    margin: -3% 7% 0 0;
    gap: 2px;
  }
  .a15-utility-group {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
  }
  .a15-extra-group {
    flex-direction: column;
    gap: 1px;
  }
  .a15-utility-hit { flex: 0 0 auto; width: 100%; }

  .a15-main-shell .game-frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .a15-mid-panels {
    left: 1%;
    top: -22%;
    z-index: 4;
    width: 47%;
    height: 20%;
    display: block;
  }
  .a15-mid-encyclopedia { display: none; }
  .a15-mid-obtained { width: 100%; height: 100%; }
  .a15-mid-panel b {
    top: 52%;
    bottom: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12em;
    color: #7a3328;
    background: transparent;
    box-shadow: none;
    font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
    font-size: clamp(14px, 4.5vw, 23px);
  }
  .a15-mid-panel b i {
    font-style: normal;
    font-size: .58em;
    font-weight: 700;
  }

  .a15-reset-hotspot { left: 24%; top: 78%; width: 16%; }
  .a15-reset-hotspot span {
    font-size: clamp(17px, 5vw, 24px);
    padding: 4px 8px;
  }
  .a15-access-stats {
    left: 2%;
    bottom: max(.5%, env(safe-area-inset-bottom));
    z-index: 6;
    width: 50%;
    padding: 0;
  }
  .a15-access-stats > span { top: 46%; height: 40%; font-size: 0; line-height: 0; }
  .a15-access-stats b { font-size: clamp(16px, 4.8vw, 22px); }
  .a15-main-shell .shake-control:not([hidden]) { right: 3%; bottom: -7%; }
}