/* 抽抽能杀猪 · 星港猪铺 — 9:16 phone layout. Sizes use container units of #stage
   (cqw = 1% of stage width, cqh = 1% of stage height) so 320 and 390 wide match. */
:root {
  --build: "7hao-20261114";
  color-scheme: dark;
  --ink: #120c0a;
  --brass: #d9a24a;
  --brass-hi: #ffd88a;
  --brass-lo: #7a5222;
  --metal: #23302a;
  --metal-hi: #3a4c40;
  --paper: #f3e6c8;
  --paper-ink: #3a2616;
  --good: #8ee08a;
  --gold: #ffd36b;
  --bad: #ff7a6a;
  --mint: #7ef0c0;
  --font: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif;
  --num: "DIN Alternate", "Roboto Mono", "WenQuanYi Zen Hei Mono", monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #05070a; overflow: hidden; }
body { font-family: var(--font); color: var(--paper); display: grid; place-items: center; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
button[aria-disabled="true"] { cursor: not-allowed; }

.stage {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  container-type: size;
  background: #0b0f12;
  box-shadow: 0 0 60px #000;
}
.screen { position: absolute; inset: 0; }

/* ---------- shared buttons ---------- */
.big, .sheet-actions button, .menu-list button, .title-row button, .deal-actions button, .tool {
  border: 0.5cqw solid var(--brass-lo);
  border-radius: 2.2cqw;
  background: linear-gradient(#3e5244, #24322a);
  box-shadow: inset 0 0.5cqw #ffffff22, 0 1cqw #0008;
  color: var(--paper);
  font-weight: 800;
  font-size: 4cqw;
  min-height: 11.5cqw;
  padding: 1cqw 3cqw;
}
.primary, .big.primary, .deal-actions .ok {
  background: linear-gradient(#f2c06a, #c27a2c);
  border-color: #6a3c14;
  color: #2a1406;
  text-shadow: 0 0.3cqw #ffe8b088;
}
button:active:not([aria-disabled="true"]) { transform: translateY(0.5cqw); filter: brightness(1.1); }
button[aria-disabled="true"] { filter: grayscale(0.8) brightness(0.65); }
.ghost { background: transparent !important; box-shadow: none !important; color: #c8b89a !important; }

/* ---------- title ---------- */
.title-art { position: absolute; inset: 0; background: #0c0e16 url("assets/title-v3.webp?v=7hao-20261114") center / cover no-repeat; }
@keyframes drift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.08) translateY(-1.5%); } }
.title::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#000a 0, #0000 30%, #0000 58%, #000c 78%, #000e); }
@keyframes drop { from { transform: translateY(-40cqh) rotate(-12deg); opacity: 0; } 70% { transform: translateY(1cqh) rotate(3deg); } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } }
.title-menu { position: absolute; z-index: 2; left: 8cqw; right: 8cqw; bottom: 4cqh; display: grid; gap: 2.4cqw; animation: fadein .6s 1s both; }
.big { min-height: 15cqw; font-size: 6cqw; letter-spacing: 1cqw; }
.title-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.title-row button { font-size: 3.8cqw; padding: 1cqw; min-height: 12cqw; }

/* ---------- intro ---------- */
.intro { background: #000; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.skip { position: absolute; z-index: 3; top: 5.5cqh; right: 3cqw; min-height: 10cqw; min-width: 22cqw; border-radius: 6cqw;
  background: #000a; border: 0.4cqw solid #fff5; color: #fff; font-size: 3.8cqw; font-weight: 700; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- game layout: HUD 8 / yard 37.5 / counter 31 / tray 23.5 ---------- */
.game { display: grid; grid-template-rows: 8cqh calc(100cqw * 2 / 3) 1fr 23.5cqh; background: #0d1210; }
.hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 1.4cqw; padding: 0 1.6cqw;
  background: linear-gradient(#2a2016, #17110c); border-bottom: 0.6cqw solid var(--brass-lo); }
.avatar { width: 11.5cqw; height: 11.5cqw; padding: 0; border: 0.5cqw solid var(--brass); border-radius: 50%; overflow: hidden; background: #333; }
.portrait { display: block; width: 100%; height: 100%; background-image: url("assets/outfits-atlas.png?v=7hao-20261114"); background-size: 300% 200%; background-color: #4fa38a; }
html[data-artatlas="missing"] .portrait { background-image: linear-gradient(#4b2f27 0 40%, #f3c9ac 40% 62%, var(--dress, #4fa38a) 62%); }
.when { min-width: 0; }
.when b { display: block; font-size: 3.2cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brass-hi); }
.goal-bar { position: relative; height: 3.6cqw; margin-top: 0.6cqw; border-radius: 2cqw; background: #000a; border: 0.3cqw solid #6a5030; overflow: hidden; }
.goal-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #6ad08a, #c8f07a); transition: width .5s; }
.goal-bar span { position: relative; display: block; font-size: 2.5cqw; line-height: 3cqw; text-align: center; color: #fff; text-shadow: 0 0.2cqw #000; white-space: nowrap; }
.cash { display: flex; align-items: center; gap: 0.8cqw; padding: 0.6cqw 1.6cqw; border-radius: 4cqw; background: #000a; border: 0.4cqw solid var(--brass-lo); }
.cash b { font: 800 4.4cqw/1 var(--num); color: var(--gold); min-width: 6cqw; text-align: right; }
.cash.pulse { animation: pulse .5s; }
@keyframes pulse { 40% { transform: scale(1.18); } }
.coin { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a0, #e0a020 60%, #8a5a10); box-shadow: 0 0 0 0.3cqw #5a3a08; }
.pips { display: grid; grid-template-columns: repeat(3, 2.2cqw); gap: 0.6cqw; }
.pips i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #3a3020; box-shadow: inset 0 0 0 0.3cqw #6a5030; }
.pips i.on { background: radial-gradient(circle at 35% 35%, #c8ffd8, #3ac070); box-shadow: 0 0 1.4cqw #3ac07088; }
.rent { display: flex; align-items: center; gap: 0.8cqw; padding: 0.4cqw 1.4cqw 0.4cqw 0.4cqw; min-height: 11cqw; border-radius: 5cqw; background: #2a0e18; border: 0.4cqw solid #a03a5a; }
.rent span { display: grid; line-height: 1.05; text-align: left; }
.rent small { font-size: 2.1cqw; color: #f0a0c0; white-space: nowrap; }
.rent b { font: 800 3.6cqw/1 var(--num); color: #ffc0d4; }
.rent.due { animation: pulse 1s infinite; background: #5a0e28; }
.face { display: block; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background-image: url("assets/npc-atlas.png?v=7hao-20261114"); background-size: 200% 200%; background-color: #444; border: 0.3cqw solid #0006; }
.face.drugs { background-position: 100% 0; }
.face.big { width: 22cqw; height: 22cqw; border-radius: 3cqw; }
.menu-btn { width: 11cqw; height: 11cqw; border-radius: 2cqw; border: 0.4cqw solid var(--brass-lo); background: #000a; font-size: 6cqw; line-height: 1; color: var(--brass-hi); }

/* yard */
.yard { position: relative; overflow: hidden; background: #1a2420; }
.yard canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pen-tags { position: absolute; left: 0; right: 0; top: 81%; height: 0; }
.pen-tag { position: absolute; transform: translateX(-50%); width: 25cqw; min-height: 11.5cqw; padding: 0.6cqw 1.2cqw; border-radius: 2cqw;
  background: #120c08d8; border: 0.4cqw solid #6a5030; display: grid; gap: 0.5cqw; text-align: left; }
.pen-tag:nth-child(1) { left: 24%; } .pen-tag:nth-child(2) { left: 50%; } .pen-tag:nth-child(3) { left: 74%; }
.pen-tag.sel { border-color: var(--gold); box-shadow: 0 0 2.4cqw #ffd36b88; }
.pen-tag.ready { border-color: var(--mint); }
.pen-tag .nm { display: flex; justify-content: space-between; font-size: 3cqw; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.pen-tag .nm em { font-style: normal; font-size: 2.4cqw; padding: 0 1cqw; border-radius: 1cqw; background: var(--mint); color: #0a2a1a; }
.pen-tag .nm em.premium { background: var(--gold); color: #3a2006; }
.pen-tag .nm em.fed { background: #6a5030; color: #ffe8c0; }
.bar { position: relative; height: 1.7cqw; border-radius: 1cqw; background: #000; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 1cqw; }
.bar.kg i { background: linear-gradient(90deg, #d08a5a, #ffb070); }
.bar.cl i { background: linear-gradient(90deg, #4a9ad0, #a0e8ff); }
.bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.3cqw; background: #fff9; left: var(--mark, 66%); }
.pen-tag.empty { text-align: center; place-items: center; color: #c8b89a; font-size: 3cqw; }

.bubble { position: absolute; z-index: 4; top: 1.5cqw; width: 70cqw; transform: translateX(-50%); padding: 3.2cqw 1.6cqw 1.6cqw; border-radius: 3cqw;
  background: linear-gradient(#2a2016f4, #1a120cf4); border: 0.6cqw solid var(--brass); box-shadow: 0 2cqw 5cqw #000c; animation: pop .18s both; }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0; } }
.bubble::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -3cqw; width: 4cqw; height: 4cqw; background: #1a120c; border: 0.6cqw solid var(--brass);
  border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
/* the pig's stats ride on the bubble's top border, costing no height */
.bubble-title { position: absolute; top: -1.2cqw; left: 3cqw; max-width: 50cqw; padding: 0 1.6cqw; border-radius: 1.4cqw; background: var(--brass); color: #2a1406; font-size: 2.8cqw; line-height: 3.8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.bubble-acts button { display: grid; justify-items: center; gap: 0.2cqw; padding: 0.8cqw 0.4cqw; min-height: 17cqw; border-radius: 2.4cqw;
  background: linear-gradient(#3e5244, #24322a); border: 0.5cqw solid var(--brass-lo); }
.bubble-acts button.suggest { border-color: var(--mint); box-shadow: 0 0 0 0.6cqw #7ef0c055, 0 0 3cqw #7ef0c0aa; animation: glow 1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 1cqw #7ef0c033, 0 0 5cqw #7ef0c0; } }
.bubble-acts span { font-size: 3.6cqw; font-weight: 800; }
.bubble-acts small { font-size: 2.6cqw; color: #f0d8a8; white-space: nowrap; }
.prop { display: block; width: 10cqw; height: 10cqw; background: url("assets/shop-props-v3.webp?v=7hao-20261114") 0 0 / 200% 200% no-repeat; }
.prop.p1 { background-position: 100% 0; } .prop.p2 { background-position: 0 100%; } .prop.p3 { background-position: 100% 100%; }
.prop.piglet { background-image: url("assets/pig-sprites-v3.webp?v=7hao-20261114"); background-position: 0 100%; background-size: 200% 200%; }
html[data-artprops="missing"] .prop { background: none; }

.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.floater { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 4.6cqw; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 0.9cqw #1a0e06; paint-order: stroke fill; animation: float 1.3s ease-out both; }
.floater.big { font-size: 6.4cqw; }
.floater.small { font-size: 3.4cqw; }
.floater.good { color: var(--good); } .floater.gold { color: var(--gold); } .floater.bad { color: var(--bad); } .floater.warn { color: #ffb070; }
@keyframes float { 0% { transform: translate(-50%, -20%) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }

/* counter */
.counter { position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: 1.4cqw; padding: 2cqw 2.4cqw 1.6cqw;
  background: #2a1a10 url("assets/counter-v3.webp?v=7hao-20261114") center 30% / cover no-repeat; border-top: 0.6cqw solid var(--brass-lo); }
.counter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#0006, #0000 30%, #0008); pointer-events: none; }
.guest, .empty-guest, .deal-actions, .fridge { position: relative; }
.guest { display: grid; grid-template-columns: 27cqw 1fr; gap: 2.4cqw; min-height: 0; }
.card { position: relative; border-radius: 2.4cqw; border: 0.6cqw solid var(--brass); overflow: hidden; background: #222; box-shadow: 0 1.4cqw 3cqw #000a; animation: walkin .45s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes walkin { from { transform: translateX(-40cqw) rotate(-6deg); } }
.card .art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.card b { position: absolute; left: 0; right: 0; bottom: 3.6cqw; padding: 0.4cqw 1cqw; font-size: 3.4cqw; text-align: center; background: #000b; }
.card small { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3cqw; font-size: 2.6cqw; text-align: center; background: var(--brass); color: #2a1406; font-weight: 800; }
.card.regular { border-color: var(--mint); } .card.regular small { background: var(--mint); color: #0a2a1a; }
.speech { position: relative; min-width: 0; padding: 2cqw 2.6cqw; border-radius: 2.4cqw; background: var(--paper); color: var(--paper-ink); box-shadow: 0 1.4cqw 3cqw #000a; overflow: hidden; }
.speech p { margin: 0; font-size: 3.4cqw; line-height: 1.4; }
.deal { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.4cqw; }
.chip { padding: 0.4cqw 1.6cqw; border-radius: 3cqw; font-size: 3cqw; font-weight: 800; background: #3a2616; color: #fff1d0; white-space: nowrap; }
.chip.pay { background: #a0601a; } .chip.dep { background: #5a6a3a; }
.speech .compare { margin-top: 1cqw; font-size: 2.7cqw; color: #7a5636; line-height: 1.35; }
.speech .compare b { color: #a02a1a; }
.speech.done { opacity: 0.85; }
.empty-guest { display: grid; place-items: center; border-radius: 2.4cqw; background: #000a; border: 0.4cqw dashed #6a5030; }
.empty-guest p { margin: 0; padding: 3cqw; font-size: 3.6cqw; text-align: center; color: #e8d8b8; }
.deal-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2cqw; }
.deal-actions button { display: grid; place-content: center; line-height: 1.1; }
.deal-actions small { font-size: 2.8cqw; font-weight: 600; }
.deal-actions .no { min-width: 18cqw; }
.fridge { display: grid; grid-template-columns: auto repeat(6, 1fr); gap: 1.2cqw; align-items: center; padding: 1cqw 1.6cqw; border-radius: 2cqw; background: #0a1418e0; border: 0.4cqw solid #3a6a6a; }
.fridge > b { font-size: 3cqw; color: #9ad6d0; white-space: nowrap; }
.slot { position: relative; height: 8cqw; border-radius: 1.2cqw; background: #00000080; box-shadow: inset 0 0 0 0.3cqw #3a6a6a; }
.slot.full { background: url("assets/pig-sprites-v3.webp?v=7hao-20261114") 100% 100% / 200% 200% no-repeat, #00000080; animation: popin .35s both; }
html[data-artpigs="missing"] .slot.full { background: #8a5a3c; }
.slot.premium::after { content: "✦"; position: absolute; right: -0.6cqw; top: -1.6cqw; font-size: 3.4cqw; color: var(--gold); text-shadow: 0 0 1cqw #000; }
@keyframes popin { from { transform: scale(.2); } 60% { transform: scale(1.2); } }

/* tray */
.tray { display: grid; grid-template-rows: 1fr auto; gap: 1.6cqw; padding: 1.6cqw 2.4cqw 2.4cqw; background: linear-gradient(#1a120c, #0c0806); border-top: 0.6cqw solid var(--brass-lo); }
.coach { display: flex; align-items: center; gap: 2cqw; margin: 0; padding: 1.4cqw 2.4cqw 1.4cqw 1.4cqw; border-radius: 3cqw; background: #2a3a30; border: 0.4cqw solid #5a8a6a; font-size: 3.6cqw; line-height: 1.35; min-height: 0; overflow: hidden; }
.coach .portrait { flex: 0 0 auto; width: 10cqw; height: 10cqw; border-radius: 50%; border: 0.4cqw solid var(--mint); }
.coach.flash { animation: pulse .5s; }
.tray-row { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 2cqw; }
.tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 1cqw; text-align: left; padding: 1cqw 2cqw; min-height: 15cqw; }
.tool .prop { grid-row: span 2; width: 9cqw; height: 9cqw; }
.tool span { font-size: 3.6cqw; }
.tool small { font-size: 2.8cqw; color: #f0d8a8; font-weight: 600; }
.tool.close { grid-template-columns: 1fr; text-align: center; background: linear-gradient(#c8503a, #7a2414); border-color: #3a0e06; }
.tool.close span { font-size: 4.4cqw; }
.tool.close.ready { animation: glow 1s infinite alternate; border-color: var(--gold); }

.pointer { position: absolute; z-index: 20; width: 0; height: 0; pointer-events: none; animation: poke .8s ease-in-out infinite; filter: drop-shadow(0 0.6cqw 0.6cqw #000); }
.pointer::before { content: ""; position: absolute; left: -3.4cqw; top: -9cqw; border: 3.4cqw solid transparent; border-top: 5cqw solid var(--mint); }
.pointer::after { content: ""; position: absolute; left: -1.4cqw; top: -15cqw; width: 2.8cqw; height: 6.4cqw; border-radius: 0.6cqw; background: var(--mint); }
@keyframes poke { 50% { transform: translateY(-2.4cqw); } }
.coach-target { box-shadow: 0 0 0 0.8cqw var(--mint), 0 0 4cqw var(--mint) !important; }
.flybox-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.flybox { position: fixed; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; background: url("assets/pig-sprites-v3.webp?v=7hao-20261114") 100% 100% / 200% 200% no-repeat; }
html[data-artpigs="missing"] .flybox { background: #8a5a3c; }
.flycoin { position: fixed; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a0, #e0a020 60%, #8a5a10); }

/* ---------- dialogs ---------- */
.sheet-dialog { width: 92cqw; max-width: 92cqw; max-height: 94cqh; padding: 0; border: 0.8cqw solid var(--brass); border-radius: 3cqw; background: #1a140e; color: var(--paper); overflow: auto; }
.sheet-dialog::backdrop { background: #000c; }
.sheet { padding: 4cqw; }
.sheet h2 { margin: 0; font-size: 5.4cqw; color: var(--brass-hi); }
.lead { margin: 1.6cqw 0; font-size: 3.6cqw; color: #e8d8b8; }
.hint-small { margin: 1cqw 0 2cqw; font-size: 3cqw; color: #b8a888; }
.sheet-actions { display: flex; justify-content: space-between; gap: 2cqw; margin-top: 3cqw; }
.sheet-actions button { flex: 1; }
.receipt .sheet { background: linear-gradient(var(--paper), #e8d4a8); color: var(--paper-ink); }
.receipt h2 { color: #6a2a10; }
.receipt .lead { color: #5a3a20; }
.receipt-top { display: flex; align-items: center; gap: 2cqw; }
.receipt-top .prop { width: 12cqw; height: 12cqw; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cols h3 { display: flex; justify-content: space-between; margin: 0; padding-bottom: 0.6cqw; font-size: 3.6cqw; border-bottom: 0.4cqw dashed #8a6a4a; }
.cols ul { list-style: none; margin: 1cqw 0 0; padding: 0; font-size: 3cqw; line-height: 1.55; }
.cols li { display: flex; justify-content: space-between; gap: 1cqw; }
.cols li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum { display: grid; gap: 1cqw; margin: 3cqw 0 0; padding-top: 2cqw; border-top: 0.4cqw solid #8a6a4a; font-size: 3.4cqw; }
.sum div { display: flex; justify-content: space-between; gap: 2cqw; }
.sum dt { color: #7a5636; flex: 0 0 auto; }
.sum dd { margin: 0; text-align: right; font-weight: 700; }
.week { margin-top: 2cqw; padding: 2cqw 3cqw; border-radius: 2cqw; background: #3a2616; color: #fff1d0; font-size: 3.3cqw; line-height: 1.5; }
.week p { margin: 0.4cqw 0; }
.unlock { margin: 2cqw 0 0; padding: 2cqw; border-radius: 2cqw; background: #6a2a5a; color: #ffe0f0; font-weight: 800; font-size: 3.4cqw; text-align: center; animation: pulse .6s 2; }
.rent-scene { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; padding: 2cqw; border-radius: 2cqw; background: #2a0e18; color: #ffd0e0; }
.rent-scene p { margin: 0; font-size: 3.6cqw; line-height: 1.4; }
.stamp { position: absolute; right: 2cqw; bottom: -2cqw; padding: 0.6cqw 2cqw; border: 0.8cqw solid currentColor; border-radius: 2cqw; font-size: 6cqw; transform: rotate(-12deg); animation: stamp .5s .3s cubic-bezier(.2,1.6,.5,1) both; }
.stamp.ok { color: #3aa05a; } .stamp.miss { color: #c03a2a; }
@keyframes stamp { from { transform: scale(3) rotate(-12deg); opacity: 0; } }
.outfits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-top: 3cqw; }
.outfits button { position: relative; display: grid; gap: 1cqw; padding: 1.4cqw; border-radius: 2.4cqw; background: #2a2016; border: 0.6cqw solid #5a4430; }
.outfits button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 3cqw #ffd36b88; }
.outfits .portrait { aspect-ratio: 1; height: auto; border-radius: 1.6cqw; }
.outfits b { font-size: 3.2cqw; }
.outfits button.locked .portrait { filter: grayscale(1) brightness(.35); }
.outfits button.locked::after { content: "未解锁"; position: absolute; top: 26%; left: 50%; transform: translateX(-50%); padding: 0.6cqw 1.6cqw; border-radius: 1.4cqw; background: #000c; border: 0.4cqw solid #8a6a4a; font-size: 2.8cqw; font-weight: 800; white-space: nowrap; color: #e8d8b8; }
.outfits small { font-size: 2.6cqw; color: #c8b89a; line-height: 1.3; }
.board { margin: 0; padding-left: 7cqw; font-size: 3.8cqw; line-height: 1.9; }
.board li { display: flex; justify-content: space-between; gap: 2cqw; }
.board li.me { color: var(--gold); font-weight: 800; }
.board .empty { list-style: none; margin-left: -7cqw; color: #b8a888; }
.menu-list { display: grid; gap: 2.4cqw; margin-top: 3cqw; }
.manual { margin-top: 3cqw; font-size: 3.3cqw; line-height: 1.6; color: #e8d8b8; }
.manual p { margin: 1.4cqw 0; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 25cqh; transform: translateX(-50%); max-width: 86cqw; padding: 2cqw 4cqw; border-radius: 3cqw;
  background: #1a120cf0; border: 0.5cqw solid var(--brass); font-size: 3.6cqw; font-weight: 700; text-align: center; animation: toast 2.4s both; pointer-events: none; }
.toast.unlock { background: #4a1a3af4; border-color: #ff9ad0; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 2cqh); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.audio-rows { display: grid; gap: 2.4cqw; margin-top: 3cqw; }
.audio-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2.4cqw; font-size: max(15px, 4.2cqw); }
.audio-row button { min-height: 44px; min-width: 22cqw; border-radius: 2.2cqw; border: 0.5cqw solid var(--brass-lo); background: linear-gradient(#3e5244, #24322a); color: var(--paper); font-weight: 800; font-size: max(14px, 3.8cqw); }
.audio-row .switch[aria-pressed="true"] { background: linear-gradient(#6ad08a, #2f8a52); color: #06210f; }
.audio-row .switch[aria-pressed="false"] { background: #2a2a2a; color: #b8a888; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

.bubble-acts .prop { width: 8.5cqw; height: 8.5cqw; }
.coach.notice { background: #3a2a14; border-color: var(--brass); color: var(--brass-hi); font-weight: 700; }
.coach.notice.unlock { background: #4a1a3a; border-color: #ff9ad0; color: #ffe0f0; }

/* ================= header pass (表头与片头版式.md) ================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- title: logo top-left, vermilion start button --- */
.logo { position: absolute; z-index: 2; top: 4cqh; left: 8cqw; margin: 0; animation: logo-in .7s cubic-bezier(.2,1.5,.5,1) both; }
.logo h1 { margin: 0; line-height: 0; }
.logo-img { display: block; width: clamp(178px, 58cqw, 228px); height: auto; filter: drop-shadow(0 1cqw 1.4cqw #000c); }
.logo-sub { margin: 1.2cqw 0 0 1cqw; font-size: max(12px, 3.4cqw); letter-spacing: 0.6cqw; color: #f3dca8; text-shadow: 0 0.3cqw 0.6cqw #000; animation: fadein .8s .5s both; }
@keyframes logo-in { from { transform: translateY(-6cqh) scale(.85); opacity: 0; } }
.title .sound { position: absolute; z-index: 3; top: 4cqh; right: 4cqw; display: grid; place-items: center; align-content: center; width: max(44px, 13cqw); height: max(44px, 13cqw);
  border-radius: 2.4cqw; border: 0.5cqw solid var(--brass-lo); background: #120c08cc; color: var(--brass-hi); font-size: max(16px, 5cqw); line-height: 1; }
.title .sound small { font-size: max(11px, 3cqw); color: #e8d8b8; }
.name-field { display: grid; gap: 1cqw; font-size: max(12px, 3.4cqw); color: #e8d8b8; }
.name-field input { font: inherit; font-size: clamp(15px, 4.8cqw, 16px); padding: 0 3cqw; min-height: 44px; border-radius: 2cqw; border: 0.5cqw solid var(--brass-lo); background: #120e0cd8; color: var(--paper); }
.big.primary[data-ui="start"] { background: linear-gradient(#d4472e, #9a2414 60%, #7a1a0e); border-color: #f0c070; color: #fff3e0;
  text-shadow: 0 0.4cqw 0 #5a0e06; box-shadow: inset 0 0.6cqw #ff9a7a66, 0 1.2cqw #000a; }

/* --- business header: dark wood bar with thin gold --- */
.hud { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "av when cash acts rent menu"; gap: 1.2cqw; padding: 1cqw 2.2cqw;
  padding-block: 0.4cqw; background: #2a160e; border: 0 solid transparent; border-width: 8px 10px; border-image: url("assets/ui-bar.webp?v=7hao-20261114") 30 40 fill / 8px 10px stretch; }
.hud .avatar { grid-area: av; width: max(40px, 11.5cqw); height: max(40px, 11.5cqw); }
.hud .when { grid-area: when; }
.hud .when b { font-size: max(13px, 3.4cqw); }
.hud .goal-bar { height: max(14px, 3.8cqw); }
.hud .goal-bar span { font-size: max(12px, 2.8cqw); line-height: max(13px, 3.4cqw); }
.hud .cash { grid-area: cash; }
.hud .cash b { font-size: max(16px, 4.6cqw); }
.hud .coin { width: max(15px, 4.2cqw); height: max(15px, 4.2cqw); }
.acts { grid-area: acts; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 1cqw; line-height: 1.1; }
.acts small { font-size: max(12px, 2.9cqw); color: #e8d0a0; }
.acts b { font: 800 max(16px, 4.2cqw)/1 var(--num); color: #c8ffd8; }
.acts .pips { grid-column: 1 / -1; display: flex; gap: 0.6cqw; margin-top: 0.6cqw; }
.acts .pips i { width: max(6px, 1.9cqw); height: max(6px, 1.9cqw); }
.hud .rent { grid-area: rent; min-height: 40px; min-width: 40px; }
.hud .rent small { font-size: max(12px, 2.9cqw); }
.hud .rent b { font-size: max(16px, 4.2cqw); }
.hud .face.drugs { width: max(26px, 7cqw); height: max(26px, 7cqw); }
.hud .menu-btn { grid-area: menu; width: max(40px, 11cqw); height: max(40px, 11cqw); }
.game { grid-template-rows: minmax(8cqh, auto) calc(100cqw * 2 / 3) 1fr 23.5cqh; }
/* Narrow phones: actions drop to a slim status row so every item stays readable. */
@container (max-width: 359.9px) {
  .hud { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "av when cash rent menu" "acts acts acts acts acts"; row-gap: 0.6cqw; padding: 0.6cqw 2cqw; }
  .acts { display: flex; align-items: center; gap: 1.6cqw; }
  .acts .pips { margin: 0; }
}

/* --- intro: paper bubble, short tail, wooden nameplate; text stays live --- */
.intro-line { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; bottom: 6.5cqh; display: flex; flex-direction: column; align-items: flex-start; animation: fadein .25s both; }
.intro-line .nameplate { position: relative; z-index: 2; margin: 0 0 -1.2cqw 3cqw; padding: 0.4cqw 6cqw; min-width: 24cqw; text-align: center;
  font-size: max(14px, 4cqw); font-weight: 800; color: #ffe2a8; letter-spacing: 0.4cqw; text-shadow: 0 0.3cqw #000;
  border: 0 solid transparent; border-width: 9px 16px; border-image: url("assets/ui-name.webp?v=7hao-20261114") 40 70 fill / 9px 16px stretch; }
.intro-line .paper { position: relative; align-self: stretch; display: flex; align-items: center; gap: 2.6cqw; min-height: calc(2 * 1.45 * max(15px, 4.6cqw) + 22px);
  padding: 1cqw 9cqw 1cqw 2cqw; border: 0 solid transparent; border-width: 12px 16px; border-image: url("assets/ui-bubble.webp?v=7hao-20261114") 60 70 fill / 12px 16px stretch;
  filter: drop-shadow(0 1.4cqw 2cqw #000b); }
.intro-line .paper p { margin: 0; flex: 1; font-size: clamp(15px, 4.6cqw, 18px); line-height: 1.45; color: #3a2414; }
.intro-line .face { flex: 0 0 auto; width: clamp(42px, 13cqw, 48px); height: clamp(42px, 13cqw, 48px); border-radius: 1.6cqw; border: 0.5cqw solid #8a5a22; background-color: #333; }
.intro-line .tail { position: absolute; top: -28px; width: 34px; height: 30px; background: url("assets/ui-tail.webp?v=7hao-20261114") center / contain no-repeat; transform: scaleY(-1); }
.intro-line[data-side="left"] .tail { left: 34%; }
.intro-line[data-side="center"] .tail { left: 52%; }
.intro-line[data-side="right"] .tail { right: 16%; transform: scale(-1, -1); }
.intro-line .more { position: absolute; right: 2cqw; bottom: 0.2cqw; font-size: max(11px, 3cqw); color: #8a5a22; animation: blink 1s infinite; }
.skip { z-index: 4; }

/* keep the form inside the lower cabinet so face, hand and pig stay clear */
.title-menu { bottom: 2.6cqh; gap: 2cqw; }
.title-menu .big { min-height: max(46px, 14cqw); }
.title-row button { min-height: max(40px, 11.5cqw); }


/* ======================= v4: isometric shop, draws, codex, expansion ======================= */
/* --- layout: HUD / isometric yard (crop 1206x964) / ticket counter / tray --- */
.game { grid-template-rows: minmax(8cqh, auto) calc(100cqw * 964 / 1206) 1fr auto; background: #0a0d24; }
.hud { background: #4a1410; border-image: url("assets/ui-sign.webp?v=7hao-20261114") 60 90 fill / 9px 14px stretch; }

.yard { background: #0a0d24; }
.yard-top { position: absolute; z-index: 3; top: 1.4cqw; left: 2cqw; right: 2cqw; display: flex; align-items: flex-start; gap: 1.6cqw; pointer-events: none; }
.yard-top > * { pointer-events: auto; }
.yard-top .spacer { flex: 1; }
.bays { display: flex; border-radius: 2.4cqw; overflow: hidden; border: 0.5cqw solid var(--brass-lo); }
.bays button { min-height: 40px; min-width: max(48px, 14cqw); border: 0; background: #1a120cd8; color: #c8b89a; font-weight: 800; font-size: max(13px, 3.6cqw); }
.bays button[aria-selected="true"] { background: linear-gradient(#f2c06a, #c27a2c); color: #2a1406; }
.chip-btn { display: grid; justify-items: center; align-content: center; min-height: 40px; min-width: max(48px, 14cqw); padding: 0.6cqw 2cqw; border-radius: 2.4cqw;
  border: 0.5cqw solid var(--brass-lo); background: #1a120cdd; color: var(--paper); line-height: 1.1; }
.chip-btn b { font-size: max(13px, 3.6cqw); }
.chip-btn small { font-size: max(11px, 2.8cqw); color: var(--gold); }
.chip-btn.codex { border-color: #8ad0ff; }
.chip-btn.night { border-color: #ff8a6a; background: #3a0e18dd; animation: glow 1.2s infinite alternate; }

.pen-tag { width: 24cqw; min-height: 40px; transform: translate(-50%, 0); padding: 0.6cqw 1.2cqw; background: #120c08e0; }
.pen-tag .nm { font-size: max(12px, 3cqw); gap: 1cqw; }
.pen-tag .nm > span { display: flex; gap: 0.8cqw; align-items: baseline; min-width: 0; overflow: hidden; }
.pen-tag .breed { font-style: normal; font-size: max(10px, 2.5cqw); padding: 0 0.8cqw; border-radius: 1cqw; background: #3a3a3a; color: #e8e8e8; white-space: nowrap; }
.pen-tag .breed.rR { background: #2a5a9a; } .pen-tag .breed.rSR { background: #a0701a; color: #fff4d0; }
.pen-tag.locked { color: #8a7a6a; border-style: dashed; background: #120c08b0; font-size: max(12px, 3cqw); display: grid; place-items: center; }
.pen-tag.empty small { font-size: max(10px, 2.6cqw); }

.yard .fridge { position: absolute; z-index: 2; left: 2cqw; bottom: 2cqw; width: 50cqw; padding: 0.8cqw 1.4cqw; gap: 0.8cqw; grid-template-columns: auto repeat(6, 1fr); background: #0a1418e8; }
.yard .fridge > b { font-size: max(11px, 2.8cqw); }
.yard .fridge .slot { height: 6.4cqw; }

.bubble { top: 12cqw; }
.bubble-acts button { min-height: 17cqw; }
.bubble-acts span { font-size: max(12px, 3.4cqw); }
.bubble-acts small { font-size: max(10px, 2.5cqw); }
.prop.lamp { background: radial-gradient(circle at 50% 45%, #ffd36b 0 28%, #c8402a 30% 60%, transparent 62%); }
.prop.ticket { background: linear-gradient(135deg, #f2c06a, #c27a2c); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 92% 50%, 100% 60%, 100% 80%, 0 80%, 0 60%, 8% 50%, 0 40%); }

/* --- counter: ticket on paper over the counter art, with its own idle motion --- */
.counter { gap: 1.2cqw; padding: 1.6cqw 2.4cqw; overflow: hidden; }
.counter-fx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.counter > :not(.counter-fx) { position: relative; z-index: 1; }
.guest { grid-template-columns: 22cqw 1fr; gap: 2cqw; }
.speech { background: transparent; border: 0 solid transparent; border-width: 10px 12px; border-image: url("assets/ui-paper.webp?v=7hao-20261114") 60 60 fill / 10px 12px stretch; padding: 0.4cqw 0.6cqw; }
.speech p { font-size: max(12px, 3.3cqw); }
.chip { font-size: max(11px, 2.9cqw); }
.chip.pay { background: #b8641a; font-size: max(13px, 3.4cqw); }
.speech .compare { font-size: max(10px, 2.6cqw); }
.deal-actions button { min-height: 44px; }

/* --- tray: coach + 散卖 / 抽猪 / 打烊 on slate --- */
.tray { gap: 1.2cqw; padding: 1.2cqw 2.4cqw 2cqw; }
.coach { font-size: max(12px, 3.4cqw); padding: 1cqw 2cqw 1cqw 1cqw; }
.coach .portrait { width: 9cqw; height: 9cqw; }
.tray-row { grid-template-columns: 1fr 1fr 1.2fr; }
.tool { min-height: 46px; border: 0 solid transparent; border-width: 8px 10px; border-image: url("assets/ui-slate.webp?v=7hao-20261114") 50 60 fill / 8px 10px stretch; background: none; box-shadow: none; }
.tool.close { border-image: url("assets/ui-sign.webp?v=7hao-20261114") 60 90 fill / 8px 12px stretch; background: none; }
.tool.draw.has { animation: glow 1.2s infinite alternate; }
.tool span { font-size: max(13px, 3.6cqw); }
.tool small { font-size: max(11px, 2.7cqw); }

/* --- title: wooden sign + three-slot toolbar, layered idle motion --- */
.big.primary.sign[data-ui="start"] { min-height: max(54px, 16cqw); border: 0 solid transparent; border-width: 12px 18px; border-image: url("assets/ui-sign.webp?v=7hao-20261114") 60 90 fill / 12px 18px stretch;
  background: none; box-shadow: 0 1.2cqw 2cqw #000a; color: #fff3e0; font-size: max(20px, 6.4cqw); letter-spacing: 1.4cqw; text-shadow: 0 0.4cqw 0 #3a0a04, 0 0 2cqw #ffb04a88; }
.toolbar { gap: 0; padding: 1.2cqw 1.6cqw; border: 0 solid transparent; border-width: 10px 12px; border-image: url("assets/ui-toolbar.webp?v=7hao-20261114") 40 50 fill / 10px 12px stretch; }
.toolbar button { display: grid; justify-items: center; gap: 0.6cqw; background: none; border: 0; box-shadow: none; min-height: max(48px, 13cqw); color: #ffe8c0; font-size: max(13px, 3.6cqw); }
.ico { display: block; width: max(18px, 5.4cqw); height: max(18px, 5.4cqw); background: var(--brass-hi); }
.ico.film { clip-path: polygon(15% 10%, 90% 50%, 15% 90%); }
.ico.cup { clip-path: polygon(10% 10%, 90% 10%, 85% 45%, 60% 60%, 60% 80%, 78% 80%, 78% 95%, 22% 95%, 22% 80%, 40% 80%, 40% 60%, 15% 45%); }
.ico.hanger { clip-path: polygon(45% 5%, 55% 5%, 55% 30%, 100% 75%, 100% 90%, 0 90%, 0 75%, 45% 30%); }
.title-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.title-fx i { position: absolute; display: block; }
.fx-ship { left: -12%; top: 24%; width: 6cqw; height: 1.4cqw; border-radius: 1cqw 3cqw 3cqw 1cqw; background: linear-gradient(#e8ecf8, #8a96b8); box-shadow: -2cqw 0 1.4cqw #ffcf7a99; animation: fly 16s linear infinite; }
.fx-ship.s2 { top: 31%; width: 4cqw; height: 1cqw; opacity: .7; animation-duration: 23s; animation-delay: -9s; }
@keyframes fly { from { transform: translateX(0); } to { transform: translateX(135cqw); } }
.fx-glow { width: 20cqw; height: 20cqw; margin: -10cqw 0 0 -10cqw; border-radius: 50%; background: radial-gradient(#ffcf7a88, #ffcf7a00 70%); mix-blend-mode: screen; animation: breathe 3.2s ease-in-out infinite alternate; }
.fx-glow.g1 { left: 6.4%; top: 12.3%; } .fx-glow.g2 { left: 22.8%; top: 42%; animation-delay: -1.1s; } .fx-glow.g3 { left: 93%; top: 36%; width: 16cqw; height: 16cqw; animation-delay: -2s; }
@keyframes breathe { from { opacity: .35; transform: scale(.92); } to { opacity: .9; transform: scale(1.06); } }
.fx-steam { left: 46%; top: 66%; width: 4cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(#ffffffaa, #ffffff00 70%); filter: blur(1cqw); animation: steam 3.4s ease-out infinite; }
.fx-steam.s2 { left: 51%; animation-delay: -1.2s; } .fx-steam.s3 { left: 55%; animation-delay: -2.3s; }
@keyframes steam { 0% { transform: translateY(0) scaleX(.6); opacity: 0; } 30% { opacity: .5; } 100% { transform: translateY(-9cqh) scaleX(1.4); opacity: 0; } }
.fx-receipt { left: 85%; top: 47%; width: 9%; height: 24%; background: linear-gradient(170deg, transparent 35%, #ffffff55 45%, transparent 55%) 0 -100% / 100% 300% no-repeat; animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
.counter-fx i { position: absolute; display: block; }
.counter-fx .fx-lamp { left: 21%; top: 32%; width: 22%; height: 34%; margin: -17% 0 0 -11%; border-radius: 50%; background: radial-gradient(#ffcf7a77, #ffcf7a00 70%); animation: breathe 2.6s ease-in-out infinite alternate; }
.counter-fx .fx-ship { left: 80%; top: 27%; width: 3%; height: 1.2%; box-shadow: 1.2cqw 0 1cqw #ffcf7a99; animation: fly-left 13s linear infinite; }
@keyframes fly-left { from { transform: translateX(0); } to { transform: translateX(-60cqw); } }
.counter-fx .fx-steam { left: 16%; top: 40%; width: 2.4%; height: 8%; animation-duration: 3s; }
.counter-fx .fx-steam.s2 { left: 17.4%; animation-delay: -1.4s; }
.counter-fx .fx-paper { left: 84%; top: 37%; width: 5%; height: 10%; background: #f3e6c8; border-radius: 0.4cqw 0.4cqw 1cqw 1cqw; transform-origin: top center; animation: flutter 2.8s ease-in-out infinite; opacity: .85; }
@keyframes flutter { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(1px); } }

/* --- breed art, draws, codex --- */
.breed-art { display: block; width: 100%; background-repeat: no-repeat; }
.breed-art.unseen { filter: brightness(0) opacity(.45); }
.paper .sheet { background: transparent; }
.sheet-dialog.paper { background: #2a1c12; }
.lead b { font-size: max(16px, 4.6cqw); color: var(--gold); }
.gacha-stage { display: grid; grid-template-columns: 34cqw 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; padding: 3cqw; border-radius: 3cqw; background: #120c08; border: 0.6cqw solid #5a4430; min-height: 30cqw; }
.gacha-stage .breed-art { width: 100%; }
.gacha-stage b { display: block; font-size: max(16px, 4.6cqw); color: var(--paper); }
.gacha-stage small { display: inline-block; margin-top: 1cqw; padding: 0.3cqw 2cqw; border-radius: 2cqw; font-size: max(12px, 3.2cqw); font-weight: 800; background: #555; }
.gacha-stage p { margin: 1.4cqw 0 0; font-size: max(12px, 3.3cqw); line-height: 1.5; color: #e8d8b8; }
.gacha-stage[data-rarity="rolling"] { animation: roll .7s ease-in-out; }
@keyframes roll { 0%, 100% { transform: none; } 20% { transform: rotate(-2deg) scale(1.02); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1deg) scale(1.04); filter: brightness(1.6); } }
.gacha-stage[data-rarity="N"] { border-color: #9aa0a8; } .gacha-stage[data-rarity="N"] small { background: #6a7078; }
.gacha-stage[data-rarity="R"] { border-color: #5aa0ff; box-shadow: 0 0 4cqw #5aa0ff88; } .gacha-stage[data-rarity="R"] small { background: #2a5a9a; }
.gacha-stage[data-rarity="SR"] { border-color: #ffd36b; box-shadow: 0 0 6cqw #ffd36bcc; animation: glow 1s infinite alternate; } .gacha-stage[data-rarity="SR"] small { background: #a0701a; }
.gacha-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2cqw; }
.gacha-actions button, .view-card, .waiting button { display: grid; place-content: center; min-height: 48px; border-radius: 2.2cqw; border: 0.5cqw solid var(--brass-lo); background: linear-gradient(#3e5244, #24322a); color: var(--paper); font-weight: 800; font-size: max(14px, 3.8cqw); }
.gacha-actions .primary { background: linear-gradient(#d4472e, #7a1a0e); color: #fff3e0; border-color: #f0c070; }
.gacha-actions small { font-size: max(11px, 2.8cqw); font-weight: 600; opacity: .85; }
.view-card { width: 100%; margin-top: 2cqw; border-color: #8ad0ff; }
.waiting { margin-top: 3cqw; }
.waiting h3 { margin: 0 0 1.4cqw; font-size: max(14px, 3.8cqw); color: var(--brass-hi); }
.waiting ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.waiting li { display: grid; grid-template-columns: 14cqw 1fr auto; gap: 2cqw; align-items: center; font-size: max(12px, 3.2cqw); }
.waiting button { min-width: 24cqw; font-size: max(12px, 3.2cqw); }
.rates { margin-top: 3cqw; font-size: max(12px, 3.2cqw); line-height: 1.55; color: #e8d8b8; }
.rates summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; color: var(--brass-hi); font-weight: 800; }
.rates p { margin: 1cqw 0; }
#codex-title small { font-size: max(12px, 3.4cqw); color: var(--gold); margin-left: 2cqw; }
.codex-detail { display: grid; grid-template-columns: 30cqw 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; padding: 2.4cqw; border-radius: 2.4cqw; background: #120c08; border: 0.6cqw solid #5a4430; min-height: 30cqw; }
.codex-detail[data-rarity="R"] { border-color: #5aa0ff; } .codex-detail[data-rarity="SR"] { border-color: #ffd36b; }
.codex-detail b { font-size: max(16px, 4.6cqw); }
.codex-detail small { display: block; font-size: max(11px, 3cqw); color: var(--gold); margin-top: 0.6cqw; }
.codex-detail p { margin: 1cqw 0; font-size: max(12px, 3.2cqw); line-height: 1.45; color: #e8d8b8; }
.codex-detail ul { margin: 0; padding-left: 4cqw; font-size: max(12px, 3.1cqw); line-height: 1.5; color: #b8f0c8; }
.codex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; max-height: 52cqh; overflow-y: auto; padding: 0.4cqw; }
.codex-card { display: grid; gap: 0.4cqw; justify-items: center; padding: 1cqw 0.6cqw; min-height: 44px; border-radius: 2cqw; background: #1e1610; border: 0.5cqw solid #3a2c20; color: #8a7a6a; }
.codex-card b { font-size: max(11px, 2.8cqw); color: inherit; }
.codex-card small { font-size: max(10px, 2.4cqw); }
.codex-card.known { color: var(--paper); border-color: #6a7078; }
.codex-card.known[data-rarity="R"] { border-color: #5aa0ff; } .codex-card.known[data-rarity="SR"] { border-color: #ffd36b; background: #2a1e0e; }
.codex-card[aria-pressed="true"] { box-shadow: 0 0 0 0.8cqw var(--mint); }
.final { margin-top: 2cqw; padding: 2.4cqw 3cqw; border-radius: 2cqw; background: #3a2616; color: #fff1d0; }
.final h3 { margin: 0 0 1cqw; font-size: max(15px, 4.2cqw); color: var(--gold); }
.final-sum { display: grid; gap: 0.8cqw; margin: 0; font-size: max(12px, 3.3cqw); }
.final-sum div { display: flex; justify-content: space-between; gap: 2cqw; }
.final-sum dt { color: #e8c890; } .final-sum dd { margin: 0; text-align: right; font-weight: 700; }
.formula { margin: 1.6cqw 0 0.6cqw; font-size: max(11px, 2.9cqw); line-height: 1.5; color: #e8d8b8; }
.score { margin: 0; font-size: max(15px, 4.2cqw); } .score b { font-size: max(22px, 7cqw); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .title-fx i, .counter-fx i { animation: none !important; }
  .fx-ship, .counter-fx .fx-ship, .fx-steam, .fx-receipt { display: none !important; }
}
.yard .pen-tags { top: 0; height: 100%; inset: 0; pointer-events: none; z-index: 2; }
.yard .pen-tags .pen-tag { pointer-events: auto; }
.yard .pen-tags .pen-tag { width: 21cqw; }
@container (max-width: 359.9px) {
  .tool { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 0.6cqw 1cqw; }
  .tool .prop { display: none; }
  .tool span { font-size: 14px; } .tool small { font-size: 11px; white-space: nowrap; }
}
.mute { position: absolute; z-index: 3; top: 5.5cqh; right: 27cqw; min-height: max(40px, 10cqw); min-width: max(56px, 16cqw); border-radius: 6cqw;
  background: #000a; border: 0.4cqw solid #fff5; color: #fff; font-size: max(13px, 3.6cqw); font-weight: 700; }
.mute[aria-pressed="true"] { border-color: #ff8a6a; color: #ffb0a0; }
.yard .bubble { top: 1.4cqw; }
.yard .bubble { top: max(46px, 13cqw); }
/* compact title cabinet: the form must start below 70% so face, hand and pig stay clear */
.title-menu { bottom: 1.8cqh; gap: 1.6cqw; }
.big.primary.sign[data-ui="start"] { min-height: max(46px, 13cqw); border-width: 9px 16px; border-image-width: 9px 16px; font-size: max(19px, 5.8cqw); }
.toolbar { padding: 0.6cqw 1.2cqw; border-width: 8px 10px; border-image-width: 8px 10px; }
.toolbar button { grid-auto-flow: column; align-items: center; justify-content: center; gap: 1.2cqw; min-height: 40px; }
.toolbar .ico { width: max(15px, 4.4cqw); height: max(15px, 4.4cqw); }
@container (max-width: 359.9px) {
  .bubble-acts button { min-height: 44px; padding: 0.4cqw; gap: 0; }
  .bubble-acts .prop { width: 6cqw; height: 6cqw; }
  .bubble { padding: 3cqw 1.2cqw 1.2cqw; }
  .title-menu { gap: 1.2cqw; bottom: 1.4cqh; }
  .big.primary.sign[data-ui="start"] { min-height: 44px; border-width: 8px 14px; border-image-width: 8px 14px; }
}

/* ======================= v5: real frames, comic intro, counter with talk + tickets + fridge ======================= */
:root { --wood: #2a1a10; --wood-hi: #4a3020; --lac: #8a2418; --r-N: #9aa0a8; --r-R: #5aa0ff; --r-SR: #ffd36b; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- title: plate, acting layers, owner plaque, bronze sign, icon tabs --- */
.title-art { background: #0c0e16 url("assets/title-plate-v5.webp?v=7hao-20261114") center top / 100% 100% no-repeat; }
.title::after { background: linear-gradient(#000a 0, #0000 22%, #0000 80%, #0006); }
.title-fx .fx-glow.g1 { left: 6.4%; top: 12.3%; } .title-fx .fx-glow.g2 { left: 22.5%; top: 25.4%; }
.title-actors { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.t-bust, .t-pig { position: absolute; display: block; background: url("assets/character-acting-v5-clean.webp?v=7hao-20261114") 0 0 / 514% 169% no-repeat; }
/* the bust stops at the counter's back edge (plate y=1125 -> 119.6cqw) */
.t-bust { left: 14cqw; width: 40cqw; aspect-ratio: 345 / 525; top: calc(119.6cqw - 40cqw * 525 / 345); }
.t-pig { left: 55cqw; width: 30cqw; aspect-ratio: 370 / 302; top: 102.5cqw; pointer-events: auto; border: 0; padding: 0; background-color: transparent; border-radius: 40%; }
.t-pig.hop { animation: hop .5s ease-out; }
@keyframes hop { 40% { transform: translateY(-3cqw); } }
.logo { animation: logo-land .2s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes logo-land { 0% { transform: scale(.95); opacity: .2; } 55% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.logo::after { content: ""; position: absolute; left: 6%; top: 60%; width: 9cqw; height: 9cqw; margin: -4.5cqw; border-radius: 50%; border: 0.7cqw solid #ffd27a; opacity: 0; animation: coin-stamp .45s .18s ease-out both; pointer-events: none; }
@keyframes coin-stamp { 0% { transform: scale(1.8); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.title-menu { left: 6cqw; right: 6cqw; bottom: 2.4cqh; gap: 2.2cqw; animation: fadein .4s .2s both; }
.owner-plate { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2cqw; padding: 0 2.4cqw; min-height: 46px;
  border: 0 solid transparent; border-width: 9px 14px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 9px 14px stretch; }
.owner-plate b { font-size: max(13px, 3.8cqw); color: #ffd88a; letter-spacing: 0.6cqw; text-shadow: 0 0.3cqw #000; }
.owner-plate input { font: inherit; font-size: 16px; min-height: 36px; padding: 0 2.4cqw; border-radius: 1.6cqw; border: 0.4cqw solid #c8963e; background: #f3e6c8; color: #3a2414; width: 100%; min-width: 0; }
.start-sign { display: flex; align-items: center; justify-content: center; gap: 3cqw; min-height: max(56px, 16cqw); padding: 0 4cqw; color: #fff6dc;
  font-size: max(20px, 6.6cqw); font-weight: 900; letter-spacing: 1.2cqw; text-shadow: 0 0.4cqw 0 #0a2a22, 0 0 2cqw #000a; background: none;
  border: 0 solid transparent; border-width: 14px 20px; border-image: url("assets/ui-btn-bronze.webp?v=7hao-20261114") 40 60 fill / 14px 20px stretch; filter: drop-shadow(0 1cqw 1.4cqw #000c); }
.keyhole { position: relative; width: max(26px, 8cqw); height: max(26px, 8cqw); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a8, #c8902e 60%, #6a4210); box-shadow: inset 0 0 0 0.4cqw #5a3a10; }
.keyhole::after { content: ""; position: absolute; left: 50%; top: 28%; width: 22%; height: 50%; transform: translateX(-50%); background: #2a1606; border-radius: 50% 50% 20% 20%; }
.title-tabs { display: flex; justify-content: center; gap: 4cqw; }
.title-tabs button { display: grid; justify-items: center; align-content: center; gap: 0.6cqw; min-width: max(64px, 20cqw); min-height: max(52px, 14cqw); padding: 1cqw 2cqw;
  border-radius: 2cqw 2cqw 4cqw 4cqw; border: 0.5cqw solid #c8963e; background: linear-gradient(#24302c, #121a18); color: #ffe8c0; font-size: max(13px, 3.6cqw); font-weight: 800; box-shadow: 0 1cqw 1.6cqw #000a, inset 0 0.4cqw #ffffff18; }
.title-tabs .ico { width: max(18px, 5.4cqw); height: max(18px, 5.4cqw); }
@container (max-width: 359.9px) {
  .title-menu { gap: 1.4cqw; bottom: 1.6cqh; }
  .start-sign { min-height: 50px; border-width: 11px 16px; }
  .title-tabs button { min-height: 46px; }
}

/* --- intro: four-panel comic, one panel in focus, DOM caption --- */
.intro { background: #07060c; }
.comic { position: absolute; left: 2.5cqw; right: 2.5cqw; top: 15cqh; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.comic-panel { position: relative; aspect-ratio: 619 / 482; overflow: hidden; border: 0.6cqw solid #2a2016; border-radius: 1cqw; background: #000;
  filter: brightness(.32) saturate(.55); transition: filter .5s, transform .5s, border-color .5s; }
.comic-panel.seen { filter: brightness(.55) saturate(.8); }
.comic-panel.focus { filter: none; border-color: #e8b04a; box-shadow: 0 0 0 0.4cqw #000, 0 0 5cqw #e8b04a66; transform: scale(1.04); z-index: 2; }
.comic-panel .art { position: absolute; inset: 0; background: center / cover no-repeat; }
.comic-panel.p1 .art { background-image: url("assets/comic-1.webp?v=7hao-20261114"); transform-origin: 50% 70%; }
.comic-panel.p2 .art { background-image: url("assets/comic-2.webp?v=7hao-20261114"); transform-origin: 78% 30%; }
.comic-panel.p3 .art { background-image: url("assets/comic-3.webp?v=7hao-20261114"); transform-origin: 70% 40%; }
.comic-panel.p4 .art { background-image: url("assets/comic-4.webp?v=7hao-20261114"); transform-origin: 35% 45%; }
.comic-panel.focus .art { animation: push 7s ease-out both; }
@keyframes push { to { transform: scale(1.09); } }
.comic-panel .fx { position: absolute; display: block; pointer-events: none; opacity: 0; }
.comic-panel.focus .fx { opacity: 1; }
.rainfx { inset: 0; background: repeating-linear-gradient(105deg, transparent 0 9px, #bcd6ff33 9px 10px, transparent 10px 23px); background-size: 46px 46px; mix-blend-mode: screen; }
.comic-panel.focus .rainfx { animation: rainfall .45s linear infinite; }
@keyframes rainfall { to { background-position: -12px 46px; } }
.phone { left: 52%; top: 80%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; background: radial-gradient(#e8f4ffaa, #e8f4ff00 65%); mix-blend-mode: screen; }
.comic-panel.focus .phone { animation: breathe 1.4s ease-in-out infinite alternate; }
.beam { top: 29%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; background: radial-gradient(#fffbe8, #ffe6a0aa 30%, #ffe6a000 70%); mix-blend-mode: screen; }
.beam.b1 { left: 69%; } .beam.b2 { left: 85%; }
.comic-panel.acting .beam { animation: beam 1.2s ease-in both; }
@keyframes beam { from { transform: scale(.3); opacity: .2; } to { transform: scale(1.5); opacity: 1; } }
.lantern { left: 10.5%; top: 44%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; background: radial-gradient(#ffcf7a99, #ffcf7a00 68%); mix-blend-mode: screen; }
.comic-panel.focus .lantern { animation: flick 2.2s steps(1) infinite; }
@keyframes flick { 0%, 60%, 100% { opacity: 1; } 62% { opacity: .35; } 66% { opacity: .9; } 70% { opacity: .5; } }
.twinkle { right: 12%; top: 12%; width: 1.4%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: -9cqw 3cqw #fff, -4cqw 7cqw #fffa, -14cqw 1cqw #fff8; }
.comic-panel.focus .twinkle { animation: blink 1.6s infinite; }
/* the brass bell swings on its chain (a crop of the same panel, pivot at the hook) */
.bell { left: 30.4%; top: 26.6%; width: 12%; height: 25.3%; background: url("assets/comic-4.webp?v=7hao-20261114") 30.4% 26.6% / 833% 395% no-repeat; transform-origin: 23% 0; }
.comic-panel.acting .bell { animation: swing 1s ease-in-out 2; }
@keyframes swing { 25% { transform: rotate(14deg); } 75% { transform: rotate(-12deg); } }
.ding { left: 45%; top: 30%; color: #ffe27a; font-weight: 900; font-size: max(14px, 4.6cqw); font-style: normal; -webkit-text-stroke: 0.6cqw #3a1a06; paint-order: stroke fill; }
.comic-panel.acting .ding { animation: ding .9s ease-out both; }
@keyframes ding { from { transform: scale(.4) translateY(2cqw); opacity: 0; } 40% { transform: scale(1.2); opacity: 1; } to { transform: none; opacity: 1; } }
.comic-count { position: absolute; z-index: 3; left: 4cqw; top: 5.5cqh; min-height: 32px; display: flex; align-items: center; padding: 0 3cqw; border-radius: 4cqw; background: #000a; border: 0.4cqw solid #fff3; color: #e8d8b8; font-size: max(12px, 3.4cqw); }
.intro-line { bottom: 7cqh; }
.intro-line .paper p { min-height: calc(2 * 1.45 * clamp(15px, 4.6cqw, 18px)); }
.intro-line:not(.done) .more { visibility: hidden; }

/* --- yard: switch, tags --- */
.light-switch { position: absolute; z-index: 3; width: 44px; height: 56px; transform: translate(-50%, -38%); border: 0; border-radius: 3cqw; background: transparent; }
.light-switch:focus-visible { outline: 0.6cqw solid var(--mint); }
.light-switch i { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 0 1.2cqw; border-radius: 1cqw; background: #1a120cd8; border: 0.3cqw solid #c8963e; font-size: max(10px, 2.6cqw); font-style: normal; color: #ffe8a8; white-space: nowrap; line-height: 1.5; }
.light-switch i::after { content: "关灯"; }
.light-switch.off i::after { content: "开灯"; }
.light-switch.off i { color: #b8a888; border-color: #6a5030; }
.yard .pen-tags .pen-tag { width: 20.5cqw; min-height: 44px; gap: 0.3cqw; padding: 0.5cqw 0.8cqw; text-align: left; place-items: stretch; }
.pen-tag .nm { display: flex; justify-content: space-between; align-items: center; gap: 0.6cqw; font-size: max(11px, 3cqw); }
.pen-tag .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-tag .nm .grow { font-style: normal; flex: 0 0 auto; font-size: max(10px, 2.5cqw); padding: 0 0.9cqw; border-radius: 1cqw; line-height: 1.45; }
.pen-tag .nm .grow.piglet { background: #ffb0c8; color: #4a0e22; }
.pen-tag .nm .grow.adult { background: #6a7a5a; color: #f0ffe0; }
.pen-tag .nm .grow.ready { background: var(--mint); color: #0a2a1a; }
.pen-tag .nm .grow.premium { background: var(--gold); color: #3a2006; }
.pen-tag .br { font-size: max(10px, 2.5cqw); line-height: 1.3; color: #e8e0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pen-tag .br.rR { color: #9ac8ff; } .pen-tag .br.rSR { color: #ffd88a; }
.pen-tag .meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8cqw; }
.pen-tag .meter small { font-size: max(9px, 2.3cqw); color: #f0d8a8; font-family: var(--num); min-width: 5.6cqw; text-align: right; }
.pen-tag .bar { height: max(4px, 1.3cqw); }
.pen-tag.piglet { border-color: #ff9ab8; border-style: dashed; }
.pen-tag.adult { border-color: #8a9a6a; }
.pen-tag.ready { border-color: var(--mint); border-style: solid; }
.pen-tag.empty { border-style: dashed; color: #c8b89a; text-align: center; }
.pen-tag.empty small { font-size: max(10px, 2.5cqw); }
.prop.seal { background: radial-gradient(circle at 50% 45%, #f3e6c8 0 34%, #b8321e 36% 62%, transparent 64%); }

/* --- counter: desk (fridge + tickets) and the talk strip --- */
.counter { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.4cqw; padding: 1.6cqw 2cqw 1.2cqw; }
.desk { display: grid; grid-template-columns: 41cqw minmax(0, 1fr); gap: 1.6cqw; min-height: 0; align-items: start; }
.fridge { position: relative; display: block; width: 100%; aspect-ratio: 456 / 378; padding: 0; border: 0; background: url("assets/ui-fridge.webp?v=7hao-20261114") center / 100% 100% no-repeat; filter: drop-shadow(0 1cqw 1.4cqw #000c); }
.fridge-label { position: absolute; z-index: 2; left: 50%; top: -1.2cqw; transform: translateX(-50%); padding: 0 2cqw; border-radius: 1.4cqw; background: #0a2a28; border: 0.4cqw solid #c8963e; color: #bff0e8; font-size: max(11px, 3cqw); line-height: 1.5; white-space: nowrap; }
.fridge-cells { position: absolute; inset: 0; }
.fridge .cell { position: absolute; display: grid; place-items: end center; width: 27.4%; height: 35.7%; font-style: normal; }
.fridge .cell:nth-child(1) { left: 9.9%; top: 15.9%; } .fridge .cell:nth-child(2) { left: 39.5%; top: 15.9%; } .fridge .cell:nth-child(3) { left: 68.4%; top: 15.9%; }
.fridge .cell:nth-child(4) { left: 9.9%; top: 55%; } .fridge .cell:nth-child(5) { left: 39.5%; top: 55%; } .fridge .cell:nth-child(6) { left: 68.4%; top: 55%; }
.fridge .cell .box { position: absolute; left: 12%; right: 12%; top: 8%; bottom: 30%; background: url("assets/ui-crate.webp?v=7hao-20261114") center / contain no-repeat; opacity: 0; }
.fridge .cell.full .box { opacity: 1; }
.fridge .cell small { position: relative; z-index: 1; margin-bottom: 4%; padding: 0 0.6cqw; border-radius: 0.8cqw; background: #000b; color: #f3e6c8; font-size: max(9px, 2.3cqw); line-height: 1.35; white-space: nowrap; }
.fridge .cell:not(.full) small { display: none; }
.fridge .cell.premium::after { content: "✦"; position: absolute; right: 4%; top: 2%; color: var(--gold); font-size: max(10px, 2.8cqw); text-shadow: 0 0 1cqw #000; }
.fridge .cell.in .box { animation: box-in .5s cubic-bezier(.2,1.4,.5,1) both; }
.fridge .cell.in { animation: cell-glow .7s; }
@keyframes box-in { from { transform: translateY(-40%) scale(.5); opacity: 0; } }
@keyframes cell-glow { 30% { background: #ffe8a855; } }
.fridge .cell.out::before { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; bottom: 30%; background: url("assets/ui-crate.webp?v=7hao-20261114") center / contain no-repeat; animation: box-out .5s ease-in both; }
@keyframes box-out { to { transform: translateX(60%) scale(.4); opacity: 0; } }
.tickets { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.ticket-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; }
.ticket-tabs button { position: relative; min-height: 36px; padding: 0 0.6cqw; border-radius: 1.6cqw 1.6cqw 0 0; border: 0.4cqw solid #8a6a3a; border-bottom: 0; background: #3a2616; color: #e8d0a0; font-weight: 800; font-size: max(12px, 3.2cqw); }
.ticket-tabs button[aria-selected="true"] { background: #f3e6c8; color: #5a2a10; border-color: #c8963e; }
.ticket-tabs button.dot i { position: absolute; right: 0.8cqw; top: 0.6cqw; width: 1.8cqw; height: 1.8cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #e8402a; box-shadow: 0 0 0 0.3cqw #fff8; }
.ticket { display: grid; align-content: start; gap: 0.6cqw; min-height: 0; overflow: auto; padding: 1.4cqw 1.8cqw; color: var(--paper-ink);
  border: 0 solid transparent; border-width: 8px 10px; border-image: url("assets/ui-paper.webp?v=7hao-20261114") 60 60 fill / 8px 10px stretch; }
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; margin: 0; font-size: max(13px, 3.6cqw); color: #5a1a08; }
.t-head small { font-size: max(10px, 2.6cqw); color: #8a5a2a; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-fields { display: grid; gap: 0.2cqw; margin: 0; font-size: max(11px, 2.9cqw); line-height: 1.35; }
.t-fields div { display: grid; grid-template-columns: 8.4cqw 1fr; gap: 1cqw; min-width: 0; }
.t-fields dt { color: #8a5a2a; font-weight: 700; }
.t-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.t-fields .pay dd b { font-size: max(13px, 3.6cqw); color: #a0400e; }
.t-fields .gift dd { color: #2a6a3a; font-weight: 700; }
.t-state { margin: 0; font-size: max(10px, 2.6cqw); color: #6a4a2a; line-height: 1.35; }
.ticket .deal-actions { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.ticket .deal-actions button { flex: 1 1 auto; min-height: 40px; padding: 0.4cqw 1.6cqw; font-size: max(13px, 3.4cqw); line-height: 1.1; }
.ticket .deal-actions button small { display: block; font-size: max(10px, 2.4cqw); font-weight: 600; }
.ticket .deal-actions .no { flex: 0 0 auto; min-width: 14cqw; }
.talk { display: grid; grid-template-columns: 15cqw minmax(0, 1fr); gap: 1.6cqw; align-items: center; }
.talk-face { display: block; width: 15cqw; height: 15cqw; border-radius: 2cqw; border: 0.5cqw solid #c8963e; background-color: #3a2a1e; background-repeat: no-repeat; box-shadow: 0 1cqw 1.6cqw #000a; }
.talk-face.pop { animation: face-pop .26s ease-out; }
@keyframes face-pop { from { transform: translateY(1.2cqw); filter: brightness(1.4); } }
.talk[data-state="talk"] .talk-face { border-color: #ffe08a; }
.talk-bubble { position: relative; display: block; min-height: max(48px, 15cqw); padding: 0.6cqw 6cqw 0.6cqw 4cqw; text-align: left; color: #3a2414; background: none;
  border: 0 solid transparent; border-width: 10px 12px 10px 20px; border-image: url("assets/ui-bubble.webp?v=7hao-20261114") 40 50 40 74 fill / 10px 12px 10px 20px stretch; }
.talk-name { display: block; font-size: max(11px, 2.8cqw); color: #8a4a1a; }
.talk-text { display: block; font-size: max(13px, 3.5cqw); line-height: 1.4; min-height: 2.8em; }
.talk-more { position: absolute; right: 1cqw; bottom: 0; font-style: normal; font-size: max(10px, 2.6cqw); color: #8a5a22; visibility: hidden; }
.talk[data-state="more"] .talk-more { visibility: visible; animation: blink 1s infinite; }
.talk.notice .talk-face { border-color: var(--gold); }
.talk.notice.unlock .talk-bubble { filter: drop-shadow(0 0 1.6cqw #ff9ad0aa); }
.tray { grid-template-rows: auto; padding: 1.4cqw 2.4cqw 2cqw; }

/* --- wood sheets: one ship-cabin material for every dialog --- */
.sheet-dialog.wood { border: 0.8cqw solid #b07a32; border-radius: 2.4cqw; background: #2a1a10 url("assets/wood-board.webp?v=7hao-20261114") center / cover; box-shadow: inset 0 0 0 0.6cqw #0008, 0 2cqw 6cqw #000; color: #f3e6c8; }
.sheet-dialog.wood .sheet { background: linear-gradient(#1a0e08cc, #1a0e08aa); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-bottom: 1.6cqw; }
.sheet-head h2, .sheet-dialog.wood h2 { display: inline-block; margin: 0; padding: 0 4cqw; font-size: max(17px, 5cqw); line-height: 1.6; color: #ffe2a8; text-shadow: 0 0.3cqw #000;
  border: 0 solid transparent; border-width: 8px 14px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 8px 14px stretch; }
.sheet-head .x { min-width: 44px; min-height: 44px; border-radius: 50%; border: 0.5cqw solid #c8963e; background: radial-gradient(#4a3020, #1a0e08); color: #ffe2a8; font-size: max(16px, 4.6cqw); font-weight: 900; }
.sheet-dialog.wood .primary { background: none; color: #fff6dc; text-shadow: 0 0.3cqw #0a2a22; border: 0 solid transparent; border-width: 10px 14px; border-image: url("assets/ui-btn-bronze.webp?v=7hao-20261114") 40 60 fill / 10px 14px stretch; box-shadow: none; }
.sheet-dialog.wood .menu-list button:not(.primary):not(.ghost), .sheet-dialog.wood .sheet-actions button:not(.primary):not(.ghost) { background: none; border: 0 solid transparent; border-width: 9px 14px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 9px 14px stretch; box-shadow: none; color: #ffe8c0; }
.sheet-dialog.wood .hint-small, .sheet-dialog.wood .lead { color: #e8d8b8; }
.sheet-dialog.wood .sum dt { color: #e8c890; } .sheet-dialog.wood .sum { border-top-color: #8a6a4a; }
.menu-list button { min-height: 48px; font-size: max(15px, 4.2cqw); }

/* --- gacha: crate, two buttons, batch results --- */
.ticket-bal { display: flex; align-items: center; gap: 1.4cqw; margin: 0 0 1cqw; font-size: max(14px, 4cqw); font-weight: 800; }
.ticket-bal .prop { width: 7cqw; height: 5cqw; }
.ticket-bal b { font-size: max(18px, 5.4cqw); color: var(--gold); }
.ticket-bal small { margin-left: auto; font-size: max(11px, 2.9cqw); font-weight: 600; color: #c8b89a; }
.crate-stage { position: relative; height: 34cqw; margin: 0 auto 1.4cqw; width: 70%; }
.crate-stage i { position: absolute; inset: 0; background: center / contain no-repeat; transition: opacity .2s; }
.crate-stage .crate { background-image: url("assets/ui-crate.webp?v=7hao-20261114"); }
.crate-stage .crate-open { background-image: url("assets/ui-crate-open.webp?v=7hao-20261114"); opacity: 0; }
.crate-stage .crate-glow { background: radial-gradient(#ffe8a8cc, #ffe8a800 60%); opacity: 0; mix-blend-mode: screen; }
.crate-stage[data-state="shake"] .crate { animation: crate-shake .8s ease-in-out; }
@keyframes crate-shake { 10%, 50%, 90% { transform: rotate(-3deg); } 30%, 70% { transform: rotate(3deg) translateY(-1cqw); } }
.crate-stage[data-state="open"] .crate { opacity: 0; }
.crate-stage[data-state="open"] .crate-open { opacity: 1; }
.crate-stage[data-state="open"] .crate-glow { opacity: 1; animation: breathe 1.6s ease-in-out infinite alternate; }
.gacha-actions { grid-template-columns: 1fr 1fr; }
.gacha-actions button { display: grid; place-content: center; min-height: 54px; font-size: max(16px, 4.6cqw); line-height: 1.15; }
.gacha-actions .g1 { background: none; color: #fff6dc; border: 0 solid transparent; border-width: 11px 16px; border-image: url("assets/ui-btn-bronze.webp?v=7hao-20261114") 40 60 fill / 11px 16px stretch; }
.gacha-actions .g10 { background: linear-gradient(#c8402a, #7a1a0e); color: #fff3e0; border: 0.6cqw solid #f0c070; border-radius: 2.4cqw; }
.gacha-actions small { font-size: max(11px, 2.8cqw); font-weight: 700; opacity: .95; }
.gacha-note { margin: 1.2cqw 0; font-size: max(12px, 3.1cqw); color: #e8d8b8; line-height: 1.45; }
.results h3 { margin: 1cqw 0; font-size: max(14px, 3.8cqw); color: var(--brass-hi); }
.results-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqw; }
.results-grid[data-n="1"] { grid-template-columns: minmax(0, 36cqw); justify-content: center; }
.rcard { display: grid; justify-items: center; align-content: start; gap: 0.2cqw; min-height: 44px; padding: 0.8cqw 0.4cqw; border-radius: 1.6cqw; border: 0.5cqw solid #6a5030; background: #1e1610; color: var(--paper); min-width: 0; }
.rcard.back { background: repeating-linear-gradient(45deg, #2a4a40 0 2cqw, #23403a 2cqw 4cqw); border-color: #c8963e; }
.rcard.back .rc-view { background: url("assets/ui-crate.webp?v=7hao-20261114") center / 80% no-repeat; }
.rcard .rc-view { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.rcard .breed-art { width: 100%; }
.rcard b { font-size: max(10px, 2.6cqw); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rcard small { font-size: max(9px, 2.3cqw); line-height: 1.25; white-space: nowrap; }
.rcard .rc-r { font-weight: 800; }
.rcard[data-rarity="N"] { border-color: var(--r-N); } .rcard[data-rarity="N"] .rc-r { color: #c8ccd2; }
.rcard[data-rarity="R"] { border-color: var(--r-R); box-shadow: 0 0 2cqw #5aa0ff66; } .rcard[data-rarity="R"] .rc-r { color: #9ac8ff; }
.rcard[data-rarity="SR"] { border-color: var(--r-SR); box-shadow: 0 0 3cqw #ffd36b99; background: #2a1e0e; } .rcard[data-rarity="SR"] .rc-r { color: var(--gold); }
.rcard .rc-new { color: #c8b89a; } .rcard .rc-new.new { color: #8ef0a8; font-weight: 800; }
.rcard .rc-to { color: #f0d8a8; }
.rcard.flip { animation: flip .35s ease-out; }
@keyframes flip { from { transform: rotateY(90deg); } }
.results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin-top: 1.4cqw; }
.results-actions button { min-height: 44px; border-radius: 2cqw; border: 0.5cqw solid #c8963e; background: #2a1a10; color: #ffe8c0; font-weight: 800; font-size: max(13px, 3.5cqw); }
.gacha-more { display: grid; margin-top: 2cqw; }
.gacha-more button { display: grid; place-content: center; min-height: 44px; border: 0 solid transparent; border-width: 9px 14px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 9px 14px stretch; background: none; color: #ffe8c0; font-weight: 800; font-size: max(14px, 3.8cqw); }
.gacha-more small { font-size: max(11px, 2.7cqw); font-weight: 600; }
.waiting li { grid-template-columns: 13cqw 1fr auto; }
.waiting .wa { display: grid; place-items: center; aspect-ratio: 1; }

/* --- codex: counts, tabs, detail, fixed 3-column cards, one scroll --- */
#codex .sheet { display: flex; flex-direction: column; height: 90cqh; }
.codex-counts { display: flex; justify-content: space-between; gap: 2cqw; margin: 0 0 1.2cqw; font-size: max(12px, 3.2cqw); color: #e8d8b8; }
.codex-counts span { padding: 0.4cqw 2cqw; border-radius: 2cqw; background: #0008; border: 0.4cqw solid #6a5030; }
.codex-counts b { font-size: max(14px, 4cqw); color: var(--gold); }
.codex-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-bottom: 1.2cqw; }
.codex-tabs button { min-height: 40px; border-radius: 2cqw; border: 0.5cqw solid #6a5030; background: #1e1610; color: #c8b89a; font-weight: 800; font-size: max(13px, 3.5cqw); }
.codex-tabs button[aria-selected="true"] { background: #f3e6c8; color: #5a2a10; border-color: #c8963e; }
.codex-detail { flex: 0 0 auto; grid-template-columns: 30cqw minmax(0, 1fr); margin: 0 0 1.4cqw; padding: 2cqw; background: #120c08e8; min-height: 0; align-items: start; }
.codex-detail.pop { animation: detail-pop .25s ease-out; }
@keyframes detail-pop { from { opacity: .4; transform: translateY(1cqw); } }
.cd-view { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.6cqw; background: radial-gradient(#3a2c20, #120c08); }
.cd-view .breed-art { width: 92%; }
.cd-info { min-width: 0; }
.cd-info b { display: block; font-size: max(16px, 4.6cqw); }
.cd-info small { display: block; font-size: max(11px, 2.9cqw); color: var(--gold); margin-top: 0.4cqw; }
.cd-info p { margin: 0.8cqw 0; font-size: max(12px, 3.1cqw); line-height: 1.4; color: #e8d8b8; }
.cd-info ul { margin: 0; padding-left: 4cqw; font-size: max(11px, 3cqw); line-height: 1.45; color: #b8f0c8; }
.codex-grid { flex: 1 1 auto; min-height: 0; max-height: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1.6cqw; overflow-y: auto; padding: 0.6cqw; align-content: start; }
.codex-card { display: grid; grid-template-rows: auto auto auto; justify-items: stretch; gap: 0.3cqw; padding: 1cqw; min-height: 44px; border-radius: 1.8cqw; background: #1e1610; border: 0.5cqw solid #3a2c20; color: #8a7a6a; text-align: center; }
.codex-card .cc-view { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.2cqw; background: radial-gradient(#2a3040, #10141c); overflow: hidden; }
.codex-card .breed-art { width: 92%; }
.codex-card .cc-q { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: max(18px, 6cqw); color: #c8d0e8aa; }
.codex-card.known .cc-q { display: none; }
.codex-card .cc-name { display: block; font-size: max(12px, 3.1cqw); line-height: 1.3; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex-card .cc-no { display: block; font-size: max(10px, 2.5cqw); line-height: 1.2; color: #a89878; font-family: var(--num); }
.codex-card.known { color: var(--paper); border-color: #6a7078; background: #241a12; }
.codex-card.known .cc-view { background: radial-gradient(#4a3a2a, #1a120c); }
.codex-card.known[data-rarity="R"] { border-color: var(--r-R); } .codex-card.known[data-rarity="SR"] { border-color: var(--r-SR); }
.codex-card.season .cc-no::after { content: " · 本季"; color: #8ef0a8; }
.codex-card[aria-pressed="true"] { box-shadow: 0 0 0 0.8cqw var(--mint); }
.codex-card.ping { animation: ping .8s ease-out 2; }
@keyframes ping { 50% { box-shadow: 0 0 0 1.4cqw #7ef0c0aa, 0 0 4cqw var(--mint); } }

/* --- fridge sheet, wardrobe figures, bill tasks --- */
.fridge-list { list-style: none; margin: 1cqw 0; padding: 0; display: grid; gap: 1cqw; }
.fridge-list li { display: grid; grid-template-columns: 10cqw 1fr auto; align-items: center; gap: 2cqw; min-height: 40px; padding: 0.6cqw 1.6cqw; border-radius: 1.6cqw; background: #0a2420cc; border: 0.4cqw solid #3a6a6a; font-size: max(13px, 3.4cqw); }
.fridge-list li small { font-size: max(11px, 2.8cqw); color: #a8d8d0; }
.fridge-list .box { display: block; height: 8cqw; background: url("assets/ui-crate.webp?v=7hao-20261114") center / contain no-repeat; }
.fridge-list li.empty .box { opacity: .2; }
.fridge-list li.premium { border-color: var(--gold); }
#fridge-dlg[open] .fridge-list li { animation: popin .3s both; }
.outfits .figure { display: block; width: 100%; aspect-ratio: 3 / 5; background-repeat: no-repeat; border-radius: 1.6cqw; background-color: #1a1410; }
.outfits button.locked .figure { filter: grayscale(1) brightness(.35); }
.tasks-line { margin: 2cqw 0 0; padding: 1.4cqw 2cqw; border-radius: 1.6cqw; background: #2a4a30; color: #e0ffe8; font-size: max(12px, 3.2cqw); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .comic-panel .art, .comic-panel .fx, .t-pig, .logo, .logo::after, .fridge .cell, .fridge .cell .box, .rcard { animation: none !important; }
}

/* ======================= v5 补充: fridge icon, 3x3 cabinet, gift tab, use mode ======================= */
.desk { display: block; height: 100%; min-height: 0; }
.tickets { height: 100%; }
.ticket { min-height: 0; overflow-y: auto; }
.ticket-tabs { grid-template-columns: repeat(4, 1fr); }
.ticket-tabs button { min-height: 38px; }
.fridge-icon { position: absolute; z-index: 3; left: 1.6cqw; bottom: 1.6cqw; display: flex; align-items: center; gap: 1cqw; min-height: 48px; min-width: 48px; padding: 0.4cqw 2cqw 0.4cqw 0.6cqw;
  border-radius: 2.4cqw; border: 0.5cqw solid #c8963e; background: #0e1c1ce0; color: #dff6f0; box-shadow: 0 1cqw 2cqw #000a; }
.fridge-icon i { display: block; width: max(36px, 11cqw); height: max(36px, 11cqw); background: url("assets/fridge-icon.webp?v=7hao-20261114") center / contain no-repeat; }
.fridge-icon span { display: grid; line-height: 1.15; text-align: left; }
.fridge-icon b { font-size: max(12px, 3.3cqw); }
.fridge-icon small { font: 800 max(12px, 3.2cqw) / 1.1 var(--num); color: #9ef0e0; }
.fridge-icon .fridge-plus { position: absolute; right: -1.4cqw; top: -2cqw; font-style: normal; font-weight: 900; font-size: max(12px, 3.2cqw); color: #ffe27a; -webkit-text-stroke: 0.5cqw #2a1406; paint-order: stroke fill; opacity: 0; }
.fridge-icon.bump { animation: pulse .5s; }
.fridge-icon.bump .fridge-plus { animation: float 1.2s ease-out both; }
.use-chip { position: absolute; z-index: 4; left: 50%; bottom: 1.6cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 1.4cqw; min-height: 44px; padding: 0 1.4cqw 0 0.8cqw;
  border-radius: 6cqw; border: 0.5cqw solid var(--mint); background: #0a2a1ee8; color: #e0fff0; font-size: max(12px, 3.3cqw); font-weight: 800; animation: glow 1s infinite alternate; }
.use-chip i { width: 9cqw; height: 9cqw; min-width: 30px; min-height: 30px; background: center / contain no-repeat; }
.use-chip b { padding: 0.4cqw 2cqw; border-radius: 3cqw; background: #e8d0a0; color: #3a2414; }
.cabinet { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2.4cqw; aspect-ratio: 1; width: min(100%, 70cqw); margin: 1cqw auto 2cqw; padding: 6.2%;
  background: url("assets/fridge-liner.webp?v=7hao-20261114") center / 100% 100% no-repeat; }
.cabinet .cab-slot { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 1.6cqw; border: 0.4cqw dashed #6fa8a0aa; background: #0a1e1e66; color: #a8d8d0; }
.cabinet .cab-slot.supply { border-color: #c8963eaa; background: #2a1e0e55; }
.cabinet .cab-slot.full { border-style: solid; background: #cfeee81a; }
.cabinet .cab-slot .si { position: absolute; inset: 12% 12% 26%; background: center / contain no-repeat; }
.cabinet .cab-slot small { position: absolute; bottom: 4%; left: 0; right: 0; font-size: max(10px, 2.6cqw); text-align: center; white-space: nowrap; overflow: hidden; color: #e8f6f0; text-shadow: 0 0.3cqw #000; }
.cabinet .cab-slot:not(.full) small { color: #7aa8a0; }
.cabinet .cab-slot em { position: absolute; right: 4%; top: 2%; font-style: normal; font-weight: 900; font-size: max(11px, 3cqw); color: var(--gold); text-shadow: 0 0.3cqw #000; }
.cabinet .cab-slot.picked { box-shadow: 0 0 0 0.8cqw var(--mint); }
.cabinet .cab-slot.in { animation: cell-glow .8s; }
.cabinet .cab-slot.in .si { animation: box-in .5s cubic-bezier(.2,1.4,.5,1) both; }
.slot-detail { display: grid; grid-template-columns: 14cqw minmax(0, 1fr); gap: 2cqw; align-items: start; padding: 2cqw; border-radius: 2cqw; background: #120c08e0; border: 0.4cqw solid #6a5030; }
.slot-detail .sd-icon { display: block; width: 14cqw; aspect-ratio: 1; background: center / contain no-repeat #1a2a28; border-radius: 1.4cqw; }
.slot-detail b { font-size: max(15px, 4.2cqw); }
.slot-detail small { display: block; margin-top: 0.4cqw; font-size: max(11px, 3cqw); color: var(--gold); }
.slot-detail p { margin: 0.8cqw 0 0; font-size: max(12px, 3.1cqw); line-height: 1.45; color: #e8d8b8; }
.slot-detail .sd-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.slot-detail .sd-actions button { min-height: 44px; font-weight: 800; font-size: max(13px, 3.6cqw); color: #ffe8c0; border-radius: 2cqw; border: 0.5cqw solid #c8963e; background: #2a1a10; }
@media (prefers-reduced-motion: reduce) { .fridge-icon, .fridge-icon .fridge-plus, .cabinet .cab-slot, .cabinet .cab-slot .si, .use-chip { animation: none !important; } }
/* the fridge icon sits in the free bottom-right corner, label under the door; the
   use chip docks under the top chips so it never covers a pen tag */
.fridge-icon { left: auto; right: 1.4cqw; bottom: 1.2cqw; flex-direction: column; gap: 0; padding: 0.6cqw 1cqw; min-width: 48px; }
.fridge-icon span { text-align: center; }
.fridge-icon b { font-size: max(11px, 2.9cqw); }
.fridge-icon small { font-size: max(11px, 2.9cqw); }
.use-chip { top: max(46px, 13cqw); bottom: auto; }
.intro .skip, .intro .mute { min-height: 44px; }
/* card content in normal flow: the square art window gets its real height (grid items ignored it) */
.codex-card { display: flex; flex-direction: column; align-items: stretch; }
.codex-card .cc-view { width: 100%; flex: 0 0 auto; }
.codex-grid { grid-auto-rows: max-content; }
.codex-card .cc-name { min-height: 1.3em; }

/* ======================= v6: rooms, counter scene, pen card, full-screen intro, title hotspots ======================= */
:root { --verdigris: #3f7a68; --verdigris-lo: #1c3a32; --gold-line: #e8c070; }
[hidden] { display: none !important; }

/* --- layout: HUD / scene / tray --- */
.game { grid-template-rows: auto minmax(0, 1fr) auto; }
.scenes { position: relative; min-height: 0; display: grid; }
.scene { min-height: 0; }
.yard-scene { display: grid; grid-template-rows: calc(100cqw * 964 / 1206) auto minmax(0, 1fr); min-height: 0; }
.yard-scene .talk { padding: 1cqw 2.4cqw; align-self: start; }
.yard-scene .talk-face { width: 12cqw; height: 12cqw; }
.yard-scene .talk { grid-template-columns: 12cqw minmax(0, 1fr); }
.tray-row { grid-template-columns: 1fr 1fr 1fr 1.05fr; gap: 1.4cqw; }
.tool .prop.bellico { background: url("assets/object-v6-4.webp?v=7hao-20261114") center / 150% no-repeat; }
.tool.scene-tab[aria-pressed="true"] { filter: brightness(1.25) drop-shadow(0 0 1.2cqw #ffd36b88); }
.tool.scene-tab.has small { color: #ffe08a; }
.tool.scene-tab[data-scene="counter"].has::after { content: ""; position: absolute; right: 1.6cqw; top: 1.2cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ff7a4a; box-shadow: 0 0 1cqw #ff7a4a; }
.tool { position: relative; }

/* --- yard: room tabs, locked room, machines --- */
.bays { flex-wrap: nowrap; }
.bays button { min-width: max(44px, 12.5cqw); padding: 0 1cqw; font-size: max(12px, 3.3cqw); }
.bays button.locked { color: #8a7a68; }
.bays button.locked::before { content: "🔒"; font-size: 0.8em; margin-right: 0.3em; filter: grayscale(1); }
.yard[data-room] canvas { transition: filter .2s; }
.room-lock { position: absolute; z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%); display: grid; gap: 1cqw; justify-items: center; padding: 2.4cqw 4cqw; border-radius: 2.4cqw;
  background: #120c08e6; border: 0.5cqw solid var(--brass); text-align: center; }
.room-lock b { font-size: max(14px, 4cqw); color: var(--brass-hi); }
.room-lock small { font-size: max(12px, 3.2cqw); color: #e8d8b8; }
.room-lock button { min-height: 44px; padding: 0 4cqw; font-weight: 800; color: #fff6dc; background: none; border: 0 solid transparent; border-width: 9px 14px; border-image: url("assets/ui-btn-bronze.webp?v=7hao-20261114") 40 60 fill / 9px 14px stretch; }
.yard:has(.room-lock:not([hidden])) canvas { filter: grayscale(.6) brightness(.55); }
.machine { position: absolute; z-index: 2; left: 2cqw; bottom: 2cqw; display: grid; justify-items: center; width: max(52px, 15cqw); padding: 0.6cqw; border-radius: 2cqw;
  background: #0a1418d8; border: 0.5cqw solid #6fa8a0; color: #e8f6f0; }
.machine[data-kind="washer"] { left: auto; right: 22cqw; }
.machine i { display: block; width: 100%; aspect-ratio: 1; background: center / contain no-repeat; }
.machine[data-kind="feeder"] i { background-image: url("assets/object-v6-5.webp?v=7hao-20261114"); }
.machine[data-kind="washer"] i { background-image: url("assets/object-v6-6.webp?v=7hao-20261114"); }
.machine small { font-size: max(11px, 2.6cqw); white-space: nowrap; }
.machine.locked i { filter: grayscale(1) brightness(.6); }
.machine.on { border-color: var(--gold); box-shadow: 0 0 1.4cqw #ffd36b66; }
.pen-tag { width: auto; min-width: 16cqw; min-height: 36px; }
.pen-tag.sel { outline: 0.6cqw solid #c8963e; box-shadow: 0 0 0 1cqw #7a5222aa, 0 0 2cqw #ffd36b88; }

/* --- pen detail card --- */
.pen-card { position: relative; z-index: 2; display: grid; gap: 0.8cqw; margin: 0 2cqw; margin-top: -1cqw; padding: 1.6cqw 2.4cqw 1.8cqw; border-radius: 0 0 2.4cqw 2.4cqw;
  background: #22160e url("assets/wood-board.webp?v=7hao-20261114") center / cover; border: 0.5cqw solid #b07a32; border-top: 0; box-shadow: inset 0 0 0 2000px #1a0e0898, 0 1.4cqw 2.4cqw #000a; animation: fadein .15s both; }
.pc-row1 { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 1.6cqw; }
.pc-face { display: block; width: max(40px, 11cqw); height: max(32px, 8.6cqw); aspect-ratio: auto !important; background-repeat: no-repeat; border-radius: 1.4cqw; background-color: #f3e6c822; border: 0.4cqw solid #c8963e; }
.pc-row1 b { font-size: max(15px, 4.2cqw); color: #ffe8c0; white-space: nowrap; }
.pc-row1 small { font-size: max(12px, 3cqw); color: #e8c890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stage { font-style: normal; font-weight: 800; font-size: max(12px, 3cqw); padding: 0.2cqw 2cqw; border-radius: 3cqw; background: #3e5244; color: #e8fff0; white-space: nowrap; }
.pen-card[data-state="piglet"] .pc-stage { background: #c87a9a; }
.pen-card[data-state="ready"] .pc-stage { background: var(--gold); color: #3a2006; }
.pc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin: 0; }
.pc-row2 > div { display: flex; justify-content: space-between; gap: 1cqw; padding: 0.4cqw 1.6cqw; border-radius: 1.4cqw; background: #0006; }
.pc-row2 dt { font-size: max(12px, 3cqw); color: #e8c890; } .pc-row2 dd { margin: 0; font-size: max(13px, 3.3cqw); font-weight: 800; color: #fff; white-space: nowrap; }
.pc-grow { margin: 0; font-size: max(12px, 3.2cqw); color: #ffc8dc; }
.pc-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.plank { display: grid; justify-items: center; align-content: center; min-height: 46px; padding: 0.4cqw 0.6cqw; border: 0 solid transparent; border-width: 8px 12px; color: #ffe8c0; background: none;
  border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 8px 12px stretch; }
.plank span { font-size: max(15px, 4.2cqw); font-weight: 900; line-height: 1.1; }
.plank small { font-size: max(11px, 2.7cqw); color: #f0d8a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.plank[aria-disabled="true"] { filter: grayscale(.7) brightness(.7); }
.plank[aria-disabled="true"] small { color: #ffb0a0; }
.plank.suggest { animation: glow 1s infinite alternate; }
.plank.alt { border-image-source: url("assets/ui-btn-bronze.webp?v=7hao-20261114"); }

/* --- counter scene: visitor behind the desk --- */
.counter-scene { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; background: #160e08; }
.cs-stage { position: relative; min-height: 0; overflow: hidden; }
.cs-bg, .cs-desk { position: absolute; inset: 0; background: url("assets/counter-empty-v6.webp?v=7hao-20261114") center 62% / cover no-repeat; }
/* the desk front: the same picture from the desk's top edge down, laid over the visitor */
.cs-desk { clip-path: inset(var(--desk, 64%) 0 0 0); pointer-events: none; z-index: 2; }
.cs-guest { position: absolute; z-index: 1; left: 50%; bottom: calc(100% - var(--desk, 64%) - 8%); transform: translateX(-50%); width: 58%; aspect-ratio: 3 / 4;
  background-color: #2a1e16; background-repeat: no-repeat; border-radius: 2.4cqw 2.4cqw 0 0; border: 0.8cqw solid #b07a32; border-bottom: 0;
  box-shadow: 0 0 0 0.5cqw #0008, 0 2cqw 4cqw #000c; animation: guest-in .35s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes guest-in { 0% { transform: translate(-50%, 8%); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
.cs-say { position: absolute; z-index: 3; left: 4%; right: 4%; top: 3%; padding: 1.6cqw 3cqw; border-radius: 2.4cqw; background: var(--paper); color: var(--paper-ink); box-shadow: 0 1.4cqw 3cqw #000a; }
.cs-say::after { content: ""; position: absolute; left: 50%; bottom: -2.6cqw; width: 4cqw; height: 4cqw; margin-left: -2cqw; background: var(--paper); transform: rotate(45deg); }
.cs-say b { display: block; font-size: max(11px, 2.8cqw); color: #8a4a1a; }
.cs-say span { display: block; font-size: max(13px, 3.4cqw); line-height: 1.4; }
.cs-hot { position: absolute; z-index: 4; display: grid; place-items: end center; min-width: 44px; min-height: 44px; padding: 0; border: 0.5cqw dashed #ffd36b00; border-radius: 2cqw; background: transparent; }
.cs-hot small { padding: 0 1.6cqw; border-radius: 2cqw; background: #120c08e0; color: #ffe2a8; font-size: max(11px, 2.8cqw); font-weight: 800; white-space: nowrap; border: 0.3cqw solid #c8963e; }
.cs-hot:focus-visible, .cs-hot[aria-pressed="true"] { border-color: #ffd36b; background: #ffd36b1a; }
.cs-hot.dot::after { content: ""; position: absolute; right: -0.6cqw; top: -0.6cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #ff7a4a; box-shadow: 0 0 1.2cqw #ff7a4a; }
.cs-bell { left: 1%; top: calc(var(--desk, 64%) - 7%); width: 17%; height: 13%; }
.cs-bell i { position: absolute; inset: 0 10% 30%; background: url("assets/object-v6-4.webp?v=7hao-20261114") center / contain no-repeat; transform-origin: 50% 90%; }
.cs-bell.ring i { animation: bell-ring .6s ease-in-out; }
@keyframes bell-ring { 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } }
.cs-ledger { right: 0; top: calc(var(--desk, 64%) - 7%); width: 20%; height: 12%; }
.cs-shelf { left: 0; top: 26%; width: 14%; height: 28%; }
.cs-bench { right: 0; top: 30%; width: 14%; height: 22%; }
.cs-fridge { right: 22%; top: calc(var(--desk, 64%) - 2%); width: 15%; height: 12%; }
.cs-fridge::before { content: ""; position: absolute; inset: 0 10% 30%; background: url("assets/object-v6-7.webp?v=7hao-20261114") center / contain no-repeat; }
.cs-panel { position: relative; z-index: 3; max-height: 46cqh; overflow-y: auto; margin: -3cqw 2cqw 1.4cqw; padding: 2cqw 3cqw; border-radius: 2cqw; background: linear-gradient(var(--paper), #e8d4a8); color: var(--paper-ink); box-shadow: 0 1.4cqw 3cqw #000c; }
.cs-panel .t-head { margin: 0 0 1cqw; display: flex; align-items: baseline; gap: 2cqw; font-size: max(15px, 4.2cqw); }
.cs-panel .t-head small { font-size: max(11px, 2.8cqw); color: #8a5a22; }
.cs-panel .t-fields { display: grid; gap: 0.4cqw; margin: 0; }
.cs-panel .t-fields > div { display: grid; grid-template-columns: 12cqw 1fr; gap: 1.4cqw; font-size: max(12px, 3.2cqw); line-height: 1.35; }
.cs-panel .t-fields dt { color: #8a5a22; } .cs-panel .t-fields dd { margin: 0; }
.cs-panel .t-fields .pay dd b { color: #9a3a10; font-size: 1.15em; }
.cs-panel .t-state { margin: 1cqw 0 0; font-size: max(12px, 3.1cqw); color: #5a3a1a; }
.cs-panel .deal-actions { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 1.4cqw; }
.cs-panel .deal-actions button { flex: 1 1 30%; min-height: 46px; display: grid; place-content: center; font-weight: 800; font-size: max(14px, 3.6cqw); }
.cs-panel .deal-actions button small { font-size: max(11px, 2.6cqw); font-weight: 600; }
.cs-panel .deal-actions .ok, .t-extra .ok { color: #fff6dc; background: linear-gradient(#3e7a5a, #24503a); border: 0.5cqw solid #1a3a2a; border-radius: 2cqw; }
.cs-panel .deal-actions .no, .t-extra .no { color: #3a2414; background: #e8d4a8; border: 0.5cqw solid #b08a5a; border-radius: 2cqw; }
.cs-panel [aria-disabled="true"] { filter: grayscale(.8); opacity: .7; }
.t-extra h5 { margin: 1.4cqw 0 0.6cqw; font-size: max(12px, 3.2cqw); color: #6a3a14; }
.live-list, .shelf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; }
.live-list li, .shelf-list li, .reg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2cqw; align-items: center; padding: 0.8cqw 1.4cqw; border-radius: 1.6cqw; background: #fff6; }
.live-list span, .shelf-list span, .reg-row span { font-size: max(13px, 3.3cqw); font-weight: 700; min-width: 0; }
.live-list small, .shelf-list small, .reg-row small { display: block; font-size: max(11px, 2.7cqw); font-weight: 400; color: #6a4a2a; }
.live-list button, .shelf-list button, .reg-row button { min-height: 44px; min-width: 20cqw; padding: 0 2cqw; font-weight: 800; font-size: max(13px, 3.3cqw); }
.reg-row button:not(.ok) { color: #fff6dc; background: linear-gradient(#a06a2a, #6a4214); border: 0.5cqw solid #3a2408; border-radius: 2cqw; }
.reg-row { margin-top: 1cqw; }
.quiz { margin-top: 1.2cqw; padding: 1.4cqw; border-radius: 1.6cqw; background: #fff8; border: 0.4cqw solid #c8963e; }
.quiz .q { margin: 0; font-size: max(13px, 3.4cqw); line-height: 1.45; font-weight: 700; }
.quiz .qr { display: block; margin: 0.6cqw 0; font-size: max(11px, 2.7cqw); color: #8a5a22; }
.opts { display: grid; gap: 1cqw; }
.opts button { min-height: 44px; padding: 0.6cqw 2cqw; text-align: left; font-size: max(13px, 3.3cqw); color: #3a2414; background: #f8eed8; border: 0.4cqw solid #b08a5a; border-radius: 1.6cqw; }
.opts button.right { background: #c8f0d0; border-color: #3a8a5a; } .opts button.wrong { background: #f8c8c0; border-color: #a03a2a; }
.opts.rps { grid-template-columns: repeat(3, 1fr); } .opts.rps button { text-align: center; font-weight: 900; }
.quiz .why { margin: 1cqw 0 0; font-size: max(12px, 3.1cqw); } .quiz .why.ok { color: #1a6a3a; } .quiz .why.bad { color: #9a2a1a; }
.prank-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 1.2cqw; } .prank-acts button { min-height: 46px; font-weight: 800; }
.cards { margin: 0.6cqw 0; font-size: max(14px, 3.6cqw); } .cards b { letter-spacing: 1cqw; }
.duel { font-weight: 800; }
.ledger { width: 100%; border-collapse: collapse; font-size: max(12px, 3.1cqw); }
.ledger td { padding: 0.4cqw 1cqw; border-bottom: 0.3cqw dashed #b08a5a; }
.ledger td:nth-child(2), .ledger td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.ledger button { min-height: 40px; padding: 0 1.6cqw; color: #3a2414; background: #f8eed8; border: 0.4cqw solid #b08a5a; border-radius: 1.4cqw; font-size: max(12px, 3cqw); }

/* --- full-screen intro shots --- */
.shots { position: absolute; inset: 0; overflow: hidden; background: #000; }
.shot { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.shot.on { opacity: 1; z-index: 1; }
.shot .art { position: absolute; inset: 0; background: center 30% / cover no-repeat; }
.shot.s1 .art { background-image: url("assets/intro-v6-1.webp?v=7hao-20261114"); }
.shot.s2 .art { background-image: url("assets/intro-v6-2.webp?v=7hao-20261114"); }
.shot.s3 .art { background-image: url("assets/intro-v6-3.webp?v=7hao-20261114"); }
.shot.s4 .art { background-image: url("assets/intro-v6-4.webp?v=7hao-20261114"); }
.shot.on .art { animation: push 8s ease-out both; }
.shot.acting .art { animation: cut-in .35s ease-out both, push 8s .35s ease-out both; }
@keyframes cut-in { 0% { transform: scale(1.08); filter: brightness(1.6); } 100% { transform: scale(1); filter: none; } }
.shot .fx { position: absolute; display: block; pointer-events: none; opacity: 0; }
.shot.on .fx { opacity: 1; }
.shot .rainfx { inset: 0; background: repeating-linear-gradient(105deg, #fff0 0 9px, #cfe4ff2a 9px 10px, #fff0 10px 23px); background-size: 120% 120%; }
.shot.on .rainfx { animation: rainfall .5s linear infinite; }
.shot .phone { left: 30%; top: 33%; width: 16%; height: 10%; border-radius: 40%; background: radial-gradient(#bfe0ff88, #bfe0ff00 70%); }
.shot.on .phone { animation: breathe 1.4s ease-in-out infinite alternate; }
.shot .beam { top: 20%; width: 40%; height: 30%; background: radial-gradient(#fff6c8cc, #fff6c800 65%); }
.shot .beam.b1 { left: 52%; } .shot .beam.b2 { left: 66%; top: 24%; }
.shot.acting .beam { animation: beam 1.3s ease-in both; }
.shot .dooropen { inset: 0 50% 0 0; background: linear-gradient(90deg, #000c, #0000); }
.shot.acting .dooropen { animation: door-open 1s ease-out both; }
@keyframes door-open { 0% { opacity: 1; } 100% { opacity: 0; transform: translateX(-40%); } }
.shot .twinkle { left: 40%; top: 10%; width: 50%; height: 30%; background: radial-gradient(circle at 30% 40%, #fff 0 1px, #0000 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, #0000 2px); }
.shot.on .twinkle { animation: blink 1.6s infinite; }
.shot .bellring { left: 58%; top: 54%; width: 20%; height: 10%; border-radius: 50%; border: 0.6cqw solid #ffe08a; opacity: 0; }
.shot.acting .bellring { animation: ring-wave .9s ease-out 2; }
@keyframes ring-wave { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
.shot .ding { left: 62%; top: 44%; font-style: normal; font-weight: 900; font-size: max(22px, 7cqw); color: #ffe08a; text-shadow: 0 0.5cqw #000; }
.shot.acting .ding { animation: ding .9s .2s ease-out both; }
.intro-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2cqw; padding: max(1.6cqh, env(safe-area-inset-top)) 3cqw 1cqh; background: linear-gradient(#000a, #0000); }
.intro-top .comic-count { position: static; margin-right: auto; }
.intro-top .skip, .intro-top .mute { position: static; min-height: 44px; min-width: 44px; padding: 0 3cqw; border-radius: 2cqw; border: 0.4cqw solid #fff5; background: #000a; color: #fff; font-size: max(13px, 3.4cqw); }
.intro .intro-line { bottom: max(3cqh, env(safe-area-inset-bottom)); }
.intro .intro-line .paper { background: #f3e6c8f0; border-radius: 2.4cqw; padding: 2cqw 3cqw; }

/* --- title: themes, hotspots, ships, lamp, sound knob, verdigris lock plate --- */
.title-port { position: absolute; z-index: 0; left: 18%; right: 0; top: 4%; height: 40%; background: var(--port, url("assets/port-v6-1.webp?v=7hao-20261114")) center 40% / cover no-repeat; opacity: .82; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 18%), linear-gradient(#000 60%, #0000); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #0000, #000 18%), linear-gradient(#000 60%, #0000); mask-composite: intersect; mix-blend-mode: screen; }
.title-art { z-index: 0; }
.title-port .port-ship { position: absolute; left: 100%; top: 44%; width: 16%; aspect-ratio: 116 / 23; background: var(--port, url("assets/port-v6-1.webp?v=7hao-20261114")) 8.3% 48.7% / 662% 1483% no-repeat; mix-blend-mode: lighten; animation: ship-left 34s linear infinite; }
.title-port .port-ship.p2 { top: 36%; width: 10%; animation-duration: 47s; animation-delay: -20s; opacity: .8; }
@keyframes ship-left { 0% { transform: translateX(0); } 100% { transform: translateX(-760%); } }
.title-fx, .fx-ship { display: none !important; }
.title-dark { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #050819; opacity: 0; transition: opacity .25s; }
.title.lamp-off .title-dark { opacity: .45; }
.title-lampglow { position: absolute; z-index: 1; left: 4%; top: 30%; width: 34%; height: 22%; pointer-events: none; background: radial-gradient(#ffcf7a55, #ffcf7a00 65%); transition: opacity .25s; }
.title.lamp-off .title-lampglow { opacity: 0; }
.title-actors { z-index: 2; }
.t-hot { position: absolute; z-index: 3; padding: 0; border: 0.5cqw dashed transparent; border-radius: 2cqw; background: transparent; min-width: 44px; min-height: 44px; pointer-events: auto; }
.t-hot:focus-visible { border-color: #ffd36b; }
.t-chou { left: 24cqw; top: 36cqh; width: 26cqw; height: 24cqh; }
.t-meat { left: 2cqw; top: 21cqh; width: 20cqw; height: 13cqh; }
.t-meat i { position: absolute; inset: 0; background: url("assets/title-plate-v5.webp?v=7hao-20261114") 2.5% 24.14% / 500% 769.2% no-repeat; transform-origin: 50% 0; }
.t-meat.swing i { animation: meat-swing 1.1s ease-in-out; }
@keyframes meat-swing { 20% { transform: rotate(5deg); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } }
.t-lamp { left: 11cqw; top: 34.5cqh; width: 13cqw; height: 8cqh; }
.t-bell { left: 6.4cqw; top: 64.5cqh; width: 11.5cqw; height: 6cqh; }
.t-bell i { position: absolute; inset: 0; background: url("assets/title-plate-v5.webp?v=7hao-20261114") 7.23% 68.62% / 869.6% 1666.7% no-repeat; transform-origin: 50% 90%; }
.t-bell.ring i { animation: bell-ring .6s ease-in-out; }
.t-bust.nod { animation: nod .5s ease-in-out; }
@keyframes nod { 40% { transform: translateY(0.8cqw); } }
.t-say { position: absolute; z-index: 4; left: 40cqw; top: 46cqh; max-width: 46cqw; margin: 0; padding: 1.4cqw 2.4cqw; border-radius: 2.4cqw; background: var(--paper); color: var(--paper-ink); font-size: max(13px, 3.4cqw); box-shadow: 0 1cqw 2cqw #000a; }
.t-say.pop { animation: pop .2s both; }
.logo h1 { position: relative; }
.logo-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url("assets/title-logo.webp?v=7hao-20261114") center / 100% 100% no-repeat; mask: url("assets/title-logo.webp?v=7hao-20261114") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, #fff0 40%, #fff6dc99 50%, #fff0 60%) -150% 0 / 250% 100% no-repeat; animation: shine 7s ease-in-out 2s infinite; }
@keyframes shine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.title .sound.knob { width: max(48px, 14cqw); height: max(52px, 15cqw); border: 0; background: none; }
.title .sound.knob i { display: block; width: 100%; flex: 1; aspect-ratio: 1; background: url("assets/object-v6-1.webp?v=7hao-20261114") center / 130% no-repeat; filter: drop-shadow(0 0.6cqw 0.8cqw #000c); transition: transform .2s; }
.title .sound.knob:active i { transform: rotate(30deg); }
.title .sound.knob small { font-size: max(11px, 2.8cqw); color: #ffe2a8; text-shadow: 0 0.3cqw #000; }
.start-sign { border: 0.8cqw solid #12261f; border-image: none; border-radius: 2.4cqw; background: radial-gradient(circle at 6% 50%, #d8b060 0 1.2cqw, #0000 1.4cqw), radial-gradient(circle at 94% 50%, #d8b060 0 1.2cqw, #0000 1.4cqw),
  linear-gradient(#4f8d79, var(--verdigris) 45%, var(--verdigris-lo)); box-shadow: inset 0 0.5cqw #9fd8c055, inset 0 -0.8cqw #0006, 0 1cqw 1.6cqw #000c; }
.start-sign .keyhole { transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.start-sign.turning .keyhole { transform: rotate(90deg); }
.start-sign.turning .keyhole::after { background: #6a3a08; }
.title-tabs { gap: 0; padding: 0.6cqw; border-radius: 2cqw; background: linear-gradient(#5a3a22, #3a2414); border: 0.5cqw solid #1a0e06; box-shadow: inset 0 0.4cqw #ffffff22, 0 1cqw 1.6cqw #000a; }
.title-tabs button { flex: 1; border: 0; border-radius: 0; background: none; box-shadow: none; color: #ffe2a8; }
.title-tabs button + button { border-left: 0.5cqw solid #1a0e06; box-shadow: inset 0.4cqw 0 #ffffff1a; }
.title-tabs .ico { background: var(--gold-line); }
@media (prefers-reduced-motion: reduce) { .title-port .port-ship, .logo-shine, .shot .art, .shot .fx { animation: none !important; } }

/* --- volume dialog: two faders --- */
.sliders { display: grid; gap: 4cqw; margin: 3cqw 0 1cqw; }
.fader { display: grid; grid-template-columns: 12cqw 1fr 12cqw; align-items: center; gap: 2cqw; }
.fader b { font-size: max(14px, 3.8cqw); color: #ffe2a8; }
.fader output { font-size: max(13px, 3.4cqw); color: #e8d8b8; text-align: right; }
.fader .track { position: relative; display: block; height: 48px; background: url("assets/object-v6-2.webp?v=7hao-20261114") center / 140% 260% no-repeat; }
.fader input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fader input::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ffd36b var(--fill, 50%), #1a0e06 var(--fill, 50%)); box-shadow: inset 0 0 0 2px #3a2408; }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 40px; margin-top: -15px; border: 0; background: url("assets/object-v6-3.webp?v=7hao-20261114") center / 170% no-repeat; }
.fader input::-moz-range-track { height: 10px; border-radius: 5px; background: #1a0e06; }
.fader input::-moz-range-progress { height: 10px; border-radius: 5px; background: #ffd36b; }
.fader input::-moz-range-thumb { width: 34px; height: 40px; border: 0; background: url("assets/object-v6-3.webp?v=7hao-20261114") center / 170% no-repeat; }
.fader input:focus-visible { outline: 0.6cqw solid var(--mint); }

/* --- fridge: meat and supply grids, upgrade, specialty shop --- */
.cab-h { margin: 1.6cqw 0 0.6cqw; font-size: max(13px, 3.6cqw); color: #ffe2a8; } .cab-h small { font-weight: 400; color: #e8d8b8; }
.cabinet.meat, .cabinet.supply { aspect-ratio: auto; grid-template-rows: none; width: 100%; padding: 2cqw; margin: 0; grid-template-columns: repeat(6, 1fr); }
.cabinet.supply { grid-template-columns: repeat(4, 1fr); }
.cab-upgrade { display: grid; grid-template-columns: 1fr auto; gap: 2cqw; align-items: center; margin-top: 2cqw; font-size: max(12px, 3.1cqw); }
.cab-upgrade p { margin: 0; }
.cab-upgrade button, .cab-shop button { min-height: 44px; padding: 0 3cqw; }
.cab-shop { display: flex; flex-wrap: wrap; gap: 1.6cqw; align-items: center; margin-top: 1.4cqw; }
.cab-shop p { margin: 0; width: 100%; }
.cab-shop button { display: grid; color: #ffe8c0; background: none; border: 0 solid transparent; border-width: 8px 12px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 8px 12px stretch; font-size: max(12px, 3.2cqw); }
.cab-shop small { font-size: max(11px, 2.6cqw); color: var(--gold); }

/* --- expand: room preview; machine dialog --- */
.room-preview { display: grid; grid-template-columns: 34cqw 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; }
.room-preview i { display: block; aspect-ratio: 1; border-radius: 2cqw; background: #0a0d24 center / cover no-repeat; border: 0.5cqw solid #b07a32; }
.room-preview p { margin: 0; font-size: max(12px, 3.2cqw); color: #e8d8b8; }
.machine-view { display: grid; grid-template-columns: 30cqw 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; }
.machine-view i { display: block; aspect-ratio: 3 / 4; background: center / contain no-repeat; }
.machine-view i.locked { filter: grayscale(1) brightness(.6); }
.machine-view p { margin: 0 0 1cqw; font-size: max(13px, 3.3cqw); }
.machine-plan { margin: 0 0 2cqw; padding: 0; list-style: none; font-size: max(12px, 3.2cqw); }
.machine-plan li { display: flex; justify-content: space-between; padding: 0.6cqw 0; border-bottom: 0.3cqw dashed #8a6a4a; }

/* --- codex: a wooden book, 3x3 pages, big portrait with facts --- */
#codex.sheet-dialog { border: 1.6cqw solid #5a3618; border-radius: 2cqw; box-shadow: inset 0 0 0 0.6cqw #c8963e, inset 0 0 0 1.2cqw #2a1408, 0 2cqw 6cqw #000; }
#codex .sheet { padding: 3cqw; }
.codex-rarity { margin-top: 1cqw; }
.codex-tabs button { min-height: 40px; }
#codex .codex-detail { grid-template-columns: 38cqw 1fr; align-items: start; min-height: 0; background: #f3e6c8; color: #3a2414; border: 0.6cqw solid #8a5a22; }
#codex .codex-detail .cd-view { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.6cqw; background: radial-gradient(#fff8e8, #e0c898); }
#codex .codex-detail .cd-view .breed-art { width: 92%; height: auto; }
#codex .codex-detail b { color: #3a2414; }
#codex .codex-detail small { color: #8a5a22; }
#codex .codex-detail p { color: #3a2414; }
#codex .codex-detail ul { color: #2a6a3a; }
#codex .codex-detail[data-rarity="X"] { border-color: #c04a8a; }
.cd-facts { display: grid; gap: 0.4cqw; margin: 1cqw 0; }
.cd-facts > div { display: grid; grid-template-columns: 10cqw 1fr; gap: 1cqw; font-size: max(11px, 2.9cqw); line-height: 1.35; }
.cd-facts dt { color: #8a5a22; font-weight: 800; } .cd-facts dd { margin: 0; }
#codex .codex-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; max-height: none; overflow: visible; gap: 1.6cqw; padding: 1.6cqw; border-radius: 1.6cqw; background: #3a2414; box-shadow: inset 0 0 0 0.4cqw #1a0e06; }
#codex .codex-card { min-height: 0; background: #f3e6c8; border-color: #8a5a22; color: #6a5a4a; }
#codex .codex-card.known { color: #3a2414; }
#codex .codex-card.blank { visibility: hidden; }
#codex .codex-card .breed-art.unseen { filter: brightness(0) opacity(.55); }
#codex .codex-card[data-rarity="X"].known { border-color: #c04a8a; background: #fbe6f0; }
.codex-pager { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw; margin-top: 1.6cqw; }
.codex-pager small { text-align: center; color: #e8d8b8; font-size: max(12px, 3cqw); }
.codex-pager button { min-height: 44px; padding: 0 3cqw; color: #ffe8c0; background: none; border: 0 solid transparent; border-width: 8px 12px; border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 8px 12px stretch; }

/* --- wardrobe: seated portraits, theme preview, goals --- */
.wd-preview { position: relative; display: grid; grid-template-columns: 34cqw 1fr; gap: 3cqw; align-items: center; margin: 2cqw 0; padding: 2cqw; border-radius: 2cqw; overflow: hidden; border: 0.5cqw solid #b07a32; }
.wd-port { position: absolute; inset: 0; background: #0a0d24 center / cover no-repeat; opacity: .55; }
.wd-seat { position: relative; display: block; aspect-ratio: 1; border-radius: 1.6cqw; border: 0.5cqw solid #c8963e; background-color: #1a1410; }
.wd-info { position: relative; }
.wd-info b { display: block; font-size: max(16px, 4.6cqw); color: #ffe2a8; text-shadow: 0 0.3cqw #000; }
.wd-info small { display: block; font-size: max(12px, 3cqw); color: #e8d8b8; }
.wd-goals { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; gap: 0.6cqw; }
.wd-goals li { display: flex; justify-content: space-between; gap: 2cqw; padding: 0.4cqw 1.4cqw; border-radius: 1.2cqw; background: #000a; font-size: max(12px, 3cqw); color: #ffc8b0; }
.wd-goals li.ok { color: #b8f0c8; }
.outfits { grid-template-columns: repeat(3, 1fr); }
.outfits .figure { aspect-ratio: 1; }
.outfits button.locked .figure { filter: grayscale(.85) brightness(.55); }
.outfits button.picked { box-shadow: 0 0 0 0.8cqw var(--gold); }

/* --- manual --- */
.manual-pages { display: grid; gap: 3cqw; max-height: 66cqh; overflow-y: auto; }
.mcard { display: grid; grid-template-columns: 34cqw 1fr; gap: 3cqw; align-items: start; padding: 2cqw; border-radius: 2cqw; background: #f3e6c8; color: #3a2414; }
.mshot { display: block; aspect-ratio: 3 / 4; border-radius: 1.4cqw; background: #2a1a10 center top / cover no-repeat; border: 0.5cqw solid #8a5a22; }
.mcard h3 { margin: 0 0 0.6cqw; font-size: max(14px, 3.9cqw); }
.mcard p { margin: 0 0 0.6cqw; font-size: max(12px, 3.1cqw); line-height: 1.45; }
.mcard .mact { display: inline-block; padding: 0.2cqw 1.6cqw; border-radius: 1.4cqw; background: #3e5244; color: #e8fff0; font-weight: 800; }

/* --- decorations from byproducts --- */
.decor-spot { position: absolute; z-index: 2; display: grid; place-items: center; width: 13%; aspect-ratio: 1; border-radius: 1.6cqw; background: #120c08b0; border: 0.4cqw solid #c8963e; color: #ffe2a8; font-size: max(10px, 2.4cqw); text-align: center; line-height: 1.15; pointer-events: none; }
.decor-spot i { display: block; width: 60%; aspect-ratio: 1; background: center / contain no-repeat; }

@container (max-width: 359.9px) {
  .pc-acts { gap: 1cqw; }
  .plank { min-height: 44px; border-width: 7px 9px; }
  .cs-panel { max-height: 50cqh; }
  .bays button { min-width: 44px; font-size: 12px; padding: 0 0.6cqw; }
}
.shelf-list .prod { display: grid; grid-template-columns: auto 1fr; column-gap: 1.4cqw; align-items: center; }
.shelf-list .prod i { grid-row: span 2; width: max(32px, 9cqw); aspect-ratio: 192 / 160; background: center / contain no-repeat; }
.decor-spot { background: #120c0880 center / 80% no-repeat; }

/* --- title (追加): prop layers and the bottom stand from ref-menu-v6 --- */
.title-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.t-ship { position: absolute; left: 100%; top: 18%; width: 22cqw; aspect-ratio: 351 / 215; background: url("assets/title-prop-v6-1.webp?v=7hao-20261114") center / contain no-repeat;
  animation: ship-fly 38s linear infinite, ship-frame .5s steps(1) infinite; }
.t-ship.far { top: 26%; width: 12cqw; opacity: .75; filter: brightness(.8); animation-duration: 55s, .6s; animation-delay: -24s, 0s; }
@keyframes ship-fly { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(-140cqw) translateY(4cqh); } }
@keyframes ship-frame { 50% { background-image: url("assets/title-prop-v6-2.webp?v=7hao-20261114"); } }
.t-star { position: absolute; left: 62%; top: 9%; width: 7cqw; aspect-ratio: 1; background: url("assets/title-prop-v6-7.webp?v=7hao-20261114") center / contain no-repeat; animation: twinkle 4.2s ease-in-out infinite; }
.t-star.s2 { left: 84%; top: 25%; width: 5cqw; animation-delay: -2s; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.logo { left: 13cqw; }
.t-lamp { left: 0; top: 6cqh; width: 12cqw; height: 11.5cqh; }
.t-lamp i { position: absolute; left: 1cqw; top: 0.6cqh; width: 9.5cqw; aspect-ratio: 250 / 467; background: url("assets/title-prop-v6-5.webp?v=7hao-20261114") center / contain no-repeat; transform-origin: 50% 0; }
.title.lamp-off .t-lamp i { background-image: url("assets/title-prop-v6-6.webp?v=7hao-20261114"); }
.t-lamp:active i { animation: meat-swing .8s ease-in-out; }
.title-lampglow { left: -6%; top: 6%; width: 34%; height: 22%; }
.t-meat { left: 9cqw; top: 19.5cqh; width: 15cqw; height: 15cqh; }
.t-meat i { left: 2cqw; right: auto; width: 11cqw; height: auto; aspect-ratio: 135 / 455; top: 0; background: url("assets/title-prop-v6-3.webp?v=7hao-20261114") center / contain no-repeat; }
.t-meat.swing i { animation: meat-swing 1.1s ease-in-out, meat-frame 1.1s steps(1); }
@keyframes meat-frame { 25%, 75% { background-image: url("assets/title-prop-v6-4.webp?v=7hao-20261114"); } }
.title-menu { left: 0; right: 0; bottom: 0; gap: 1.6cqw; padding: 2.4cqw 6cqw max(2.4cqh, env(safe-area-inset-bottom)); justify-items: center;
  background: linear-gradient(#3a2414, #24160c); border-top: 0.8cqw solid #120a04; box-shadow: inset 0 0.5cqw #ffffff14, 0 -1.6cqw 3cqw #000a;
  background-image: repeating-linear-gradient(90deg, #0000 0 18cqw, #0003 18cqw 18.6cqw), linear-gradient(#3a2414, #24160c); }
.owner-plate { width: auto; min-width: 56cqw; border: 0.4cqw solid #c8963e; border-image: none; border-radius: 1.4cqw; background: #2a1a0e; padding: 0.4cqw 1.6cqw; min-height: 40px; }
.owner-plate b { font-size: max(12px, 3.2cqw); white-space: nowrap; }
.owner-plate input { min-height: 34px; }
.start-sign { position: relative; width: 100%; min-height: 0; aspect-ratio: 1024 / 242; max-height: 26cqw; padding: 0 4cqw 0 25%; border: 0; border-radius: 0;
  background: url("assets/title-lockplate-v6.webp?v=7hao-20261114") center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 1cqw 1.2cqw #000c);
  font-size: max(20px, 6.8cqw); color: #fff3cc; text-shadow: 0 0.4cqw 0 #0a2a22, 0 0 1.6cqw #000a; justify-content: center; }
.start-sign:focus-visible { outline: 0.8cqw solid #ffd36b; outline-offset: 0.6cqw; }
.title-tabs { width: 100%; background: none; border: 0; box-shadow: none; padding: 0; }
.title-tabs button { min-height: 48px; }
.title-tabs button + button { border-left: 0.4cqw solid #c8963e88; box-shadow: none; }
.title-tabs .ico { background: var(--gold-line); }
.ico.replay { -webkit-mask: radial-gradient(circle, #0000 40%, #000 42% 60%, #0000 62%); mask: radial-gradient(circle, #0000 40%, #000 42% 60%, #0000 62%); }
.ico.bars { -webkit-mask: linear-gradient(90deg, #000 0 22%, #0000 22% 39%, #000 39% 61%, #0000 61% 78%, #000 78%) bottom / 100% 100% no-repeat; clip-path: polygon(0 50%, 22% 50%, 22% 25%, 39% 25%, 39% 0, 61% 0, 61% 35%, 78% 35%, 78% 60%, 100% 60%, 100% 100%, 0 100%); }
.t-bell { top: 64cqh; }
@media (prefers-reduced-motion: reduce) { .t-ship, .t-star { animation: none !important; } .t-ship { left: 60%; } }
.tray .tool { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; row-gap: 0.2cqw; padding: 0.6cqw 0.8cqw; min-height: 52px; }
.tray .tool .prop { display: block; grid-row: auto; width: max(22px, 6.4cqw); height: max(22px, 6.4cqw); }
.tray .tool span { font-size: max(13px, 3.5cqw); white-space: nowrap; line-height: 1.1; }
.tray .tool small { font-size: max(10px, 2.5cqw); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tray .tool.close { grid-template-rows: auto auto; align-content: center; }
.title .sound.knob { display: grid; justify-items: center; align-content: center; }
.title .sound.knob i { width: max(36px, 10cqw); height: max(36px, 10cqw); flex: none; }
/* codex per ref-codex-v6: one filter row, card detail with stats, fixed pager */
#codex.sheet-dialog { height: 94cqh; overflow: hidden; }
#codex .sheet { height: 100%; display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.6cqw; }
#codex .sheet-head { display: flex; align-items: center; gap: 2cqw; }
.codex-total { margin-left: auto; padding: 0.4cqw 2.4cqw; border-radius: 3cqw; background: #120a04; border: 0.4cqw solid #c8963e; color: #ffe2a8; font-size: max(13px, 3.4cqw); }
#codex .codex-counts { display: none; }
#codex .codex-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin: 0; }
#codex .codex-tabs button { min-height: 44px; font-weight: 800; }
#codex .codex-detail { grid-template-columns: 40% 1fr; grid-template-areas: "view info" "more more"; gap: 1.4cqw 2.4cqw; margin: 0; padding: 1.6cqw; flex: none; }
#codex .cd-view { grid-area: view; } #codex .cd-info { grid-area: info; } #codex .cd-more { grid-area: more; }
.cd-info b { display: block; text-align: center; padding: 0.4cqw; border-radius: 1.4cqw; background: #3a2414; color: #ffe2a8 !important; font-size: max(15px, 4.2cqw); }
.cd-stats { display: grid; gap: 0.4cqw; margin: 1cqw 0 0; }
.cd-stats > div { display: flex; justify-content: space-between; gap: 1cqw; padding: 0.4cqw 0.8cqw; border-bottom: 0.3cqw solid #c8a878; font-size: max(12px, 3.1cqw); }
.cd-stats dt { color: #8a5a22; white-space: nowrap; } .cd-stats dd { margin: 0; text-align: right; }
.cd-more summary { min-height: 40px; display: flex; align-items: center; font-size: max(12px, 3.1cqw); font-weight: 800; color: #6a3a14; cursor: pointer; }
.cd-more[open] { max-height: 30cqh; overflow-y: auto; }
#codex .codex-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
#codex .codex-card { padding: 0.8cqw; gap: 0.2cqw; border-radius: 1.4cqw; border-width: 0.5cqw; }
#codex .codex-card .cc-view { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 1cqw; background: #2a3a4a; }
#codex .codex-card.known .cc-view { background: radial-gradient(#fff8e8, #d8c09a); }
#codex .codex-card .cc-view .breed-art { width: 86%; height: auto; max-height: 100%; }
#codex .codex-card .breed-art.unseen { filter: brightness(0) invert(.25) sepia(1) hue-rotate(170deg) saturate(2.5) opacity(.85); }
#codex .codex-card b { font-size: max(12px, 3.2cqw); } #codex .codex-card small { font-size: max(10px, 2.6cqw); }
#codex .codex-card:not(.known) b { display: none; }
.codex-empty { grid-column: 1 / -1; margin: 2cqw; text-align: center; color: #e8d8b8; }
#codex .codex-pager { flex: none; margin: 0; }
.cabinet.meat, .cabinet.supply { background: #0a1e1e66; border-radius: 2cqw; }
.cabinet.meat .cab-slot, .cabinet.supply .cab-slot { aspect-ratio: 1; }
/* counter: the visitor fills the stage behind the desk; the line sits beside the face */
.cs-guest { height: 86%; width: auto; aspect-ratio: 3 / 4; left: 38%; bottom: calc(100% - var(--desk, 64%) - 6%); }
.cs-say { left: auto; right: 2.4%; top: 6%; width: 36%; padding: 1.2cqw 2cqw; }
.cs-say::after { left: -1.4cqw; top: 40%; bottom: auto; margin: 0; }
.cs-panel { max-height: 40cqh; }
/* the stand stays under the counter: pig, Chouchou and the bell remain uncovered */
.title-menu { gap: 1cqw; padding: 1.4cqw 6cqw max(1.2cqh, env(safe-area-inset-bottom)); }
.owner-plate { min-height: 36px; padding: 0 1.6cqw; }
.owner-plate input { min-height: 30px; }
.start-sign { width: 80%; max-height: none; }
.title-tabs button { min-height: 44px; padding: 0.4cqw 1cqw; }
.logo { left: 15cqw; }
.t-meat { top: 22cqh; height: 14cqh; }
.owner-plate { min-height: 40px; } .owner-plate input { min-height: 34px; }
/* 实装美术第一批 */
.cs-guest.bust { border: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 1.4cqw 1.6cqw #000a); }
.machine[data-kind="feeder"] i { background-image: url("assets/machine-feeder-room-v6.webp?v=7hao-20261114"); aspect-ratio: 220 / 260; }
.machine[data-kind="washer"] i { background-image: url("assets/machine-washer-room-v6.webp?v=7hao-20261114"); aspect-ratio: 220 / 260; }
.light-switch i { background: url("assets/lamp-pull-on-v6.webp?v=7hao-20261114") center / contain no-repeat !important; }
.light-switch.off i { background-image: url("assets/lamp-pull-off-v6.webp?v=7hao-20261114") !important; }
.cs-shelf { background: url("assets/counter-shelf-v6.webp?v=7hao-20261114") center / contain no-repeat; }
.cs-bench { background: url("assets/counter-bench-v6.webp?v=7hao-20261114") center / contain no-repeat; }
.cs-fridge::before { background-image: url("assets/freezer-room-v6.webp?v=7hao-20261114"); }
.fridge-icon > i { background-image: url("assets/freezer-room-v6.webp?v=7hao-20261114") !important; background-size: contain !important; }
.bays button.locked::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: url("assets/room-lock-v6.webp?v=7hao-20261114") center / contain no-repeat; filter: none; }

/* ===== v6 counter-quality overlay (merged from incoming baseline-overlay) ===== */
/* scene-polish.css */
/* Layered title plate, meat and bell art (scene supplement). Until all seven images
   load, html has no .title-layers-ok / .bell-layers-ok and that group's earlier art stays in place. */
.cs-bell-base, .cs-bell-cap, .t-bell i.t-bell-cap { display: none; }
.bell-layers-ok .cs-bell-base, .bell-layers-ok .cs-bell-cap, .title-layers-ok .t-bell i.t-bell-cap { display: block; }
.bell-layers-ok .cs-bell > i { display: none; }
/* The title plate holds the rack and countertop. The props share its coordinates. */
.title-layers-ok .title-art {
  background-image: url("assets/title-plate-layered-v6.webp?v=7hao-20261114");
}
.title-layers-ok .title[data-theme="classic"] .title-port { display: none; }
.title-menu { animation: fadein .24s ease-out both; }
.title-layers-ok .title-port {
  left: 21%; right: 7%; top: 15%; height: 37%;
  clip-path: polygon(0 0, 83% 0, 100% 24%, 100% 78%, 0 100%);
  opacity: .9;
  mix-blend-mode: normal;
  mask-image: radial-gradient(ellipse, #000 23%, #000e 49%, #0000 74%);
}
.title-layers-ok .title-sky {
  clip-path: polygon(23% 15%, 78% 15%, 93% 23%, 92% 32%, 76% 40%, 24% 39%);
}
.t-ship {
  left: 0; top: 23%; width: 12cqw;
  filter: brightness(.84) saturate(.9);
  animation: title-ship-east 34s linear infinite, ship-frame .5s steps(1) infinite;
  animation-delay: -11s, 0s;
}
.t-ship.far { top: 31%; width: 6cqw; opacity: .62; }
@keyframes title-ship-east {
  from { transform: translateX(-14cqw); }
  to { transform: translateX(106cqw) translateY(-2cqh); }
}
.title-layers-ok .t-meat { left: 2.9%; top: 19.3%; width: 17.6%; height: 12%; }
.title-layers-ok .t-meat i {
  inset: -2% 0 auto;
  width: 100%; height: auto; aspect-ratio: 348 / 422;
  transform-origin: 48% 4%;
  background: url("assets/title-meat-layer-v6.webp?v=7hao-20261114") top center / 100% 100% no-repeat;
  filter: drop-shadow(0.6cqw 0.7cqw 0.45cqw #130a09a0);
}
.title-layers-ok .t-meat.swing i { animation: title-meat-swing .92s ease-out; }
@keyframes title-meat-swing {
  20% { transform: rotate(7deg); }
  43% { transform: rotate(-4deg); }
  70% { transform: rotate(2deg); }
  88% { transform: rotate(-1deg); }
}
/* the approved title bell: the old 1daf placement (left 6.4cqw, top 64.5cqh, 11.5cqw x 6cqh), drawn from
   the layered dome bell with its grey halo removed (review/tools/clean-title-bell.js) */
.title-layers-ok .t-bell { left: 6.4cqw; top: 64.5cqh; width: 11.5cqw; height: 6cqh; }
.title-layers-ok .t-bell i {
  inset: auto 0 0;
  width: 100%; aspect-ratio: 354 / 314;
  background: url("assets/title-bell-base-clean-v6.png?v=7hao-20261114") bottom center / 100% 100% no-repeat;
  pointer-events: none;
}
.title-layers-ok .t-bell i.t-bell-cap { background-image: url("assets/title-bell-cap-clean-v6.png?v=7hao-20261114"); }
.title-layers-ok .t-bell.ring i { animation: none; }
.title-layers-ok .t-bell.ring .t-bell-cap { animation: title-bell-press .36s ease-out; }
@keyframes title-bell-press {
  24% { transform: translateY(1.05cqw); }
  63% { transform: translateY(-.18cqw); }
}
.title-layers-ok .t-lamp i { display: none; }
.cs-bg, .cs-desk { background-image: url("assets/counter-plate-no-chair-v6.webp?v=7hao-20261114"); }
.bell-layers-ok .cs-bell-base, .bell-layers-ok .cs-bell-cap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("assets/counter-bell-base-v6.webp?v=7hao-20261114") center 62% / cover no-repeat;
}
.bell-layers-ok .cs-bell-cap { background-image: url("assets/counter-bell-cap-v6.webp?v=7hao-20261114"); }
.bell-layers-ok .cs-stage:has(.cs-bell.ring) .cs-bell-cap { animation: title-bell-press .36s ease-out; }
.toast { pointer-events: none; }

.yard-scene {
  grid-template-rows: calc(100cqw * 964 / 1206) auto auto minmax(0, 1fr);
  overflow: auto;
  background: #20150f url("assets/wood-board.webp?v=7hao-20261114") center bottom / 120% auto;
  scrollbar-width: thin;
}
.yard-scene .talk {
  grid-template-columns: max(43px, 12cqw) minmax(0, 1fr);
  margin: 0 2cqw;
  padding: 2cqw;
  gap: 2cqw;
  border: 1px solid #85613d;
  background: #171817e8;
}
.yard-scene .talk-face { width: max(43px, 12cqw); height: max(43px, 12cqw); }
.yard-scene .talk-bubble {
  min-height: 48px;
  border: 0;
  border-left: 1px solid #805d39;
  border-image: none;
  border-radius: 0;
  padding: .25cqw 4cqw .25cqw 2.3cqw;
  color: #f7e6cb;
}
.yard-scene .talk-name { color: #ecc48b; }
.yard-scene .talk-text { min-height: 1.5em; line-height: 1.4; }
.yard-scene .talk-more { color: #ecc48b; }
.yard-note {
  display: grid;
  align-self: start;
  grid-template-columns: 1.2fr 1fr;
  margin: 1.8cqw 2cqw 2cqw;
  border-block: 1px solid #a77d45;
  background: #21170fe8;
  color: #f7e4bb;
}
.yard-note > div { min-width: 0; padding: 1.3cqw 2cqw; }
.yard-note > div + div { border-left: 1px solid #946c3f; }
.yard-note span { display: block; color: #dbaf79; font-size: max(11px, 2.7cqw); }
.yard-note b { display: block; font-size: max(12px, 3.1cqw); overflow-wrap: anywhere; }
@container (max-width: 420px) {
  .hud {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "av when cash rent menu" "acts acts acts acts acts";
    row-gap: .6cqw;
  }
  .hud .acts { display: flex; align-items: center; gap: 1.6cqw; }
  .hud .acts .pips { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .title-menu { animation: none; }
  .t-ship { left: 58%; }
  .t-ship.far { left: 37%; }
  .t-meat.swing i, .t-bell.ring .t-bell-cap,
  .cs-stage:has(.cs-bell.ring) .cs-bell-cap { animation: none; }
}

/* counter-arrival.css (rev 2: the line sits between the scene and the slip) */
/* Match the visible busts even though their transparent top margins differ. */
.cs-guest {
  --portrait-box-scale: 1.157;
  left: 38%;
  bottom: calc(100% - var(--desk, 64%) - 2%);
  height: min(calc(48% * var(--portrait-box-scale)), calc(40cqw * var(--portrait-box-scale)));
  animation: none;
}

.cs-guest[data-portrait="alan"],
.cs-guest[data-portrait="chili"],
.cs-guest[data-portrait="drummer"],
.cs-guest[data-portrait="hailin"],
.cs-guest[data-portrait="suannai"],
.cs-guest[data-portrait="yii"] { --portrait-box-scale: 1.151; }
.cs-guest[data-portrait="crunch4"] { --portrait-box-scale: 1.119; }
.cs-guest[data-portrait="joe"] { --portrait-box-scale: 1.229; }
.cs-guest[data-portrait="chi"],
.cs-guest[data-portrait="drugs"],
.cs-guest[data-portrait="pigboy"],
.cs-guest[data-portrait="raspberry"] { --portrait-box-scale: 1.299; }
.cs-guest[data-portrait="feng"],
.cs-guest[data-portrait="sam"],
.cs-guest[data-portrait="xu"] { --portrait-box-scale: 1.347; }
.cs-guest[data-portrait="chixuan"] { --portrait-box-scale: 1.411; }
.cs-guest[data-portrait="martin"] { --portrait-box-scale: 1.498; }
.cs-guest[data-portrait="teahost"] { --portrait-box-scale: 1.918; left: 34%; }

.counter-scene {
  grid-template-rows: minmax(0, 1fr) auto;
}

.counter-scene:has(.cs-say:not([hidden])) {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.counter-scene > .cs-say {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 2cqw;
  width: auto;
  margin: 0 1.8cqw 1cqw;
  padding: 6px max(8px, 2.3cqw);
  border: 1px solid #9b7951;
  border-radius: 3px;
  background: #26332e;
  color: #fff1d5;
  box-shadow: 0 2px 0 #100a07;
}

.counter-scene > .cs-say::after { display: none; }
.counter-scene > .cs-say b { color: #f0c58a; white-space: nowrap; }
.counter-scene > .cs-say span { line-height: 1.35; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .cs-stage.guest-arriving > .cs-guest {
    animation: counter-guest-enter 760ms ease-out both;
  }

  .counter-scene:has(.cs-stage.guest-arriving) > .cs-say {
    animation: counter-guest-line 190ms 650ms ease-out both;
  }

  @keyframes counter-guest-enter {
    0%, 12% { opacity: 0; transform: translateX(calc(-50% - 54cqw)); }
    36% { opacity: .66; transform: translate(calc(-50% - 25cqw), 1px); }
    63% { opacity: 1; transform: translate(calc(-50% - 9cqw), -1px); }
    82% { transform: translate(calc(-50% - 2cqw), .5px); }
    100% { opacity: 1; transform: translateX(-50%); }
  }

  @keyframes counter-guest-line {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* yard-idle.css */
.yard-scene {
  grid-template-rows: calc(100cqw * 964 / 1206);
  grid-auto-rows: max-content;
  align-content: start;
  padding-bottom: 2cqw;
  background-color: #1c1713;
  background-image: linear-gradient(#19141055, #141412c2), url("assets/wood-board.webp?v=7hao-20261114");
}

.yard-scene .talk {
  margin-top: 1.5cqw;
  border: 1px solid #8f724b;
  border-radius: 4px;
  background: linear-gradient(110deg, #34271b, #1d2420 80%);
}

.yard-scene .talk-face {
  box-shadow: none;
}

.yard-scene .yard-note {
  order: 1;
  margin-top: 1.3cqw;
  margin-bottom: 0;
  border-top-color: #7e674b;
  border-bottom-color: #7e674b;
  background: #2b231be8;
}

.yard-scene .yard-note > div + div {
  border-left-color: #7e674b;
}

.yard-scene .yard-note > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 1.7cqw;
}

.yard-scene .yard-note span {
  white-space: nowrap;
}

.yard-idle {
  align-self: start;
  margin: 1.8cqw 2cqw 0;
  padding: 1.3cqw 1.8cqw 1.8cqw;
  border: 1px solid #846c49;
  border-radius: 4px;
  background: linear-gradient(112deg, #202c28f5, #262b22ed);
  box-shadow: inset 0 1px #e8bb7c25, 0 2px 5px #0a08065c;
}

.yard-idle h3 {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin: 0 0 1.2cqw;
  color: #f2d198;
  font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  font-size: max(14px, 3.7cqw);
  line-height: 1.3;
}

.yard-idle h3::after {
  content: "";
  flex: 1;
  border-top: 1px solid #9b84575e;
}

.yard-idle-pens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4cqw;
}

.yard-idle-pen {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  justify-items: start;
  gap: .9cqw;
  min-height: max(48px, 13cqw);
  padding: .8cqw;
  border: 1px solid #74664c;
  border-radius: 3px;
  color: #f7e8c8;
  background: #17211f;
  text-align: left;
}

.yard-idle-pen:focus-visible {
  outline: 2px solid #ffe4aa;
  outline-offset: 1px;
}

.yard-idle-pen:hover {
  border-color: #d4a767;
  background: #273833;
}

.yard-idle-pen .yard-idle-art {
  display: block;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 2px #0008);
}

.yard-idle-meta {
  min-width: 0;
  line-height: 1.2;
}

.yard-idle-meta strong,
.yard-idle-meta small {
  display: block;
  overflow-wrap: anywhere;
}

.yard-idle-meta strong {
  font-size: max(12px, 3.1cqw);
}

.yard-idle-meta small {
  margin-top: 2px;
  color: #d3c2a4;
  font-size: max(10px, 2.55cqw);
  font-variant-numeric: tabular-nums;
}

.yard-idle-pen[data-status="ready"] small {
  color: #a5dfb9;
}

.yard-idle-pen[data-status="empty"] {
  border-style: dashed;
  color: #e0c593;
}

.yard-idle-pen[data-status="empty"] .yard-idle-art {
  width: 66%;
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  border: 1px dashed #ae8b5e;
  border-radius: 2px;
  filter: none;
}

.yard-idle-pen[data-status="empty"] .yard-idle-art::after {
  content: "+";
  color: #d7b47d;
  font: 500 max(13px, 3.5cqw) / 1 var(--num);
}

@container (max-width: 345px) {
  .yard-scene .talk {
    grid-template-columns: 35px minmax(0, 1fr);
    padding: 1cqw 2cqw;
  }

  .yard-scene .talk-face {
    width: 35px;
    height: 35px;
  }

  .yard-scene .talk-bubble {
    min-height: 44px;
    padding-block: 0;
  }

  .yard-idle {
    margin-top: 1.3cqw;
    padding-block: 1cqw;
  }

  .yard-idle-pen {
    grid-template-columns: minmax(0, 27px) minmax(0, 1fr);
  }

  .yard-idle-pen .yard-idle-art {
    max-width: 27px;
  }

  .yard-idle-pen[data-status="empty"] .yard-idle-art {
    width: 21px;
  }
}

/* settlement.css */
/* The nightly receipt uses the shop's wood, paper and brass palette. */
#bill {
  --receipt-paper: #efe0be;
  --receipt-ink: #352618;
  --receipt-rule: #92745488;
  width: min(92cqw, 440px);
  max-height: min(92cqh, calc(100dvh - 24px));
  margin: auto;
  overflow: hidden;
  border: 1px solid #b38a55;
  border-radius: 5px;
  background: #2b2119;
  box-shadow: 0 0 0 3px #160f0b, 0 16px 44px #000a;
  color: var(--receipt-ink);
}

#bill[open] {
  display: flex;
  flex-direction: column;
}

#bill .receipt-content {
  min-height: 0;
  padding: clamp(13px, 4cqw, 20px);
  overflow: auto;
  scrollbar-color: #95724b #e4d1ae;
  scrollbar-width: thin;
  background:
    repeating-linear-gradient(0deg, #79543708 0 1px, transparent 1px 4px),
    linear-gradient(110deg, #f2e7cd, var(--receipt-paper));
}

#bill .receipt-top {
  gap: clamp(8px, 2.7cqw, 14px);
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 3px double #96714b;
}

#bill .receipt-top .prop {
  flex: none;
  width: clamp(33px, 10cqw, 44px);
  height: clamp(33px, 10cqw, 44px);
}

#bill-date {
  margin: 0 0 2px;
  font-size: 12px;
  color: #624a34;
}

#bill-title {
  color: #482b1d;
  font: 800 clamp(22px, 6cqw, 29px) / 1.1 "Songti SC", "Noto Serif CJK SC", SimSun, serif;
}

#bill .receipt-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0 11px;
  font-variant-numeric: tabular-nums;
}

#bill-lead {
  margin: 0;
  color: #624a34;
  font-size: clamp(12px, 3.2cqw, 14px);
}

#bill-net {
  flex: none;
  color: #285148;
  font-size: clamp(20px, 6cqw, 30px);
  line-height: 1.15;
}

#bill[data-phase="lost"] #bill-net { color: #8b3c2e; }

#bill .cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 3cqw, 15px);
}

#bill .cols h3 {
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--receipt-rule);
  font-size: clamp(13px, 3.6cqw, 16px);
}

#bill-in { color: #285148; }
#bill-out { color: #883d30; }
#bill .cols ul { font-size: clamp(12px, 3.15cqw, 14px); }
#bill .cols li + li { margin-top: 3px; }
#bill .cols li span {
  white-space: normal;
  overflow-wrap: anywhere;
}

#bill .sum {
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--receipt-rule);
  font-size: clamp(12px, 3.35cqw, 15px);
}

#bill .sum dt { color: #624a34; }
#bill .sum dd { overflow-wrap: anywhere; }

#bill .rent-scene,
#bill .week,
#bill .final,
#bill .tasks-line,
#bill .unlock {
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 2px;
}

#bill .rent-scene {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  background: #5e392a;
  color: #f7e7c9;
}

#bill .rent-scene .face { flex: none; width: 34px; height: 34px; }
#bill .rent-scene.no-landlord .face { display: none; }
#bill .rent-scene p { flex: 1; font-size: clamp(12px, 3.3cqw, 14px); }
#bill .stamp {
  position: static;
  flex: 0 1 auto;
  padding: 2px 5px;
  border-width: 1px;
  border-radius: 2px;
  color: #f8bdaa;
  font-size: clamp(11px, 3cqw, 14px);
  text-align: center;
  transform: rotate(-5deg);
  animation: none;
}

#bill .stamp.ok { color: #bee4b7; }
#bill .week { background: #dfcaa3; color: #44301f; }
#bill .week p { font-size: clamp(12px, 3.2cqw, 14px); }
#bill .final { background: #243d37; }
#bill .final-sum dt { flex-shrink: 0; }

#bill .receipt-actions {
  flex: none;
  margin: 0;
  gap: 8px;
  padding: 10px clamp(12px, 4cqw, 20px);
  border-top: 1px dashed #c5a475;
  background: linear-gradient(#2b2119dc, #2b2119ed), url("assets/wood-board.webp?v=7hao-20261114") center / cover;
}

#bill .receipt-actions button,
#restart-confirm .sheet-actions button {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid #b08a56;
  border-radius: 3px;
  box-shadow: none;
  font-size: clamp(14px, 3.9cqw, 17px);
  line-height: 1.2;
}

#bill .receipt-actions button { background: #3a2920; color: #f1ddbb; }
#bill .receipt-actions .primary { background: #284c45; color: #fff2d0; }
#bill .receipt-actions [data-ui="restart"] { background: #743d30; }
#bill .receipt-actions span { margin-left: 0.3em; }

#restart-confirm .lead {
  margin: 13px 0;
  font-size: clamp(14px, 3.8cqw, 16px);
  line-height: 1.55;
}

#restart-confirm .sheet-actions button {
  border-image: none;
  background: #284c45;
  color: #fff2d0;
  text-shadow: none;
}

#restart-confirm .sheet-actions .primary { background: #743d30; }

/* title-motion.css (rev 2, after the title layer) */
.title .t-say {
  /* The bust ends at 54cqw. Leave space for the tail and the pig's hop. */
  inset: auto 4% 46% calc(54% + max(10px, 3cqw));
  max-width: none;
  padding: max(6px, 1.55cqw) max(8px, 2.2cqw);
  border: 1px solid #ad8051;
  border-radius: 3px;
  background: #182422f7;
  box-shadow: inset 0 1px #f0c38528, 0 3px 8px #08080aa6;
  color: #fff0cf;
  font-size: max(13px, 3.3cqw);
  line-height: 1.42;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.title .t-say::before {
  content: "";
  position: absolute;
  inset: 55% auto auto -4px;
  width: 6px;
  height: 6px;
  border: solid #ad8051;
  border-width: 0 0 1px 1px;
  background: #182422;
  transform: rotate(45deg);
}

.title .t-say.pop {
  animation: title-caption-in .24s ease-out both;
}

@keyframes title-caption-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.title .logo {
  animation: none;
}

.title .logo h1 {
  transform-origin: 27% 70%;
  animation: title-logo-arrival .7s cubic-bezier(.2, .75, .22, 1) both;
}

.title .logo::after {
  content: none;
}

.title .logo-sub {
  animation: title-subtitle-in .38s .34s ease-out both;
}

.title .logo-shine {
  background: linear-gradient(105deg, #fff0 41%, #ffe9b399 49%, #fff4cd73 50%, #fff0 57%) -150% 0 / 230% 100% no-repeat;
  animation: title-logo-sheen 8.4s 1.05s ease-in-out infinite;
}

.title .logo h1::after {
  content: "";
  position: absolute;
  top: 7%;
  right: 8%;
  width: max(8px, 2.9cqw);
  aspect-ratio: 1;
  background: url("assets/title-prop-v6-7.webp?v=7hao-20261114") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: title-logo-glint 8.4s 1.05s ease-in-out infinite;
}

@keyframes title-logo-arrival {
  0% { opacity: 0; transform: translateY(-8px) rotate(-1.7deg) scale(.98); }
  66% { opacity: 1; transform: translateY(1px) rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes title-subtitle-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes title-logo-sheen {
  0% { background-position: -150% 0; }
  11%, 100% { background-position: 250% 0; }
}

@keyframes title-logo-glint {
  0%, 7%, 15%, 100% { opacity: 0; transform: scale(.65); }
  10.5% { opacity: .9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .title .t-say.pop, .title .logo h1, .title .logo-sub, .title .logo h1::after {
    animation: none;
  }
}

/* ===== v10 review: counter receipts, meat grades, quiz card, draw stages ===== */
:root { --ui10: url("assets/ui-counter-v10.webp?v=7hao-20261114"); --meat10: url("assets/meat-grades-v10.webp?v=7hao-20261114"); }
/* Receipt: same paper, double rule, stamp and two-column fields for every slip; the ink colour
   and the stamped word say which kind it is. Actions stay pinned at the bottom, details scroll. */
.cs-panel { --rc: #8a5a2a; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; max-height: 40cqh;
  background: var(--ui10) 0 0 / 127.75% 505.76% no-repeat, #ead6ad; border: 3px double var(--rc); border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 1px #fff6, 0 1.4cqw 3cqw #000c; padding: 1.6cqw 2.6cqw 1.4cqw; }
.cs-panel[data-kind="buyer"] { --rc: #8a5a2a; }
.cs-panel[data-kind="order"] { --rc: #b0361e; }
.cs-panel[data-kind="commission"] { --rc: #2f3f7c; }
.cs-panel[data-kind="care"] { --rc: #1f766a; }
.cs-panel[data-kind="gift"] { --rc: #6e4058; }
.cs-panel[data-kind="regular"] { --rc: #3d6a3a; }
.cs-panel[data-kind="prank"] { --rc: #5a5048; }
.cs-panel .t-head { position: relative; padding: 0 16cqw 0.8cqw 0; margin: 0 0 0.8cqw; border-bottom: 3px double var(--rc); color: var(--rc); }
.cs-panel .t-head::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-8deg); padding: 0.3cqw 1.4cqw; border: 2px solid var(--rc); border-radius: 1cqw;
  color: var(--rc); font-size: max(11px, 2.8cqw); font-weight: 900; letter-spacing: .1em; opacity: .85; content: "票据"; }
.cs-panel[data-kind="buyer"] .t-head::after { content: "收货单"; }
.cs-panel[data-kind="order"] .t-head::after { content: "急单"; }
.cs-panel[data-kind="commission"] .t-head::after { content: "委托"; }
.cs-panel[data-kind="care"] .t-head::after { content: "照料"; }
.cs-panel[data-kind="gift"] .t-head::after { content: "礼物"; }
.cs-panel[data-kind="regular"] .t-head::after { content: "常客"; }
.cs-panel[data-kind="prank"] .t-head::after { content: "挑战"; }
.cs-panel[data-kind="idle"] .t-head::after, .cs-panel[data-kind="event"] .t-head::after { content: "柜台"; }
.cs-panel .t-head small { color: color-mix(in srgb, var(--rc) 75%, #3a2414); }
.cs-panel .t-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.6cqw; scrollbar-width: thin; }
.cs-panel .t-fields > div { grid-template-columns: 15cqw 1fr; }
.cs-panel .t-fields dt { color: var(--rc); font-weight: 800; }
.cs-panel .t-fields .buy-crates strong, .cs-panel .t-fields .buy-grown strong { color: #8a3010; font-size: 1.15em; margin-right: 1.4cqw; }
.cs-panel .t-fields .buy-crates span, .cs-panel .t-fields .buy-grown span { color: #6a4a2a; font-size: .92em; }
.cs-panel .deal-actions { margin-top: 1cqw; padding-top: 1cqw; border-top: 1px dashed color-mix(in srgb, var(--rc) 60%, transparent); }
.cs-panel .deal-actions button { min-height: 44px; }
.stamp-btn, .next-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 1.2cqw; }
.stamp-btn[hidden], .next-btn[hidden] { display: none !important; }
.stamp-btn { flex-wrap: wrap; }
.stamp-btn small { flex-basis: 100%; text-align: center; }
.ic-stamp, .ic-next { flex: none; width: max(20px, 6cqw); aspect-ratio: 1; background: var(--ui10) no-repeat; }
.ic-stamp { background-size: 138.64% 516.58%; background-position: 0 35.815%; }
.ic-next { background-size: 169.44% 670.83%; background-position: 0 57.299%; }
.stamp-btn:active .ic-stamp { animation: stamp-press .3s ease-out; }
@keyframes stamp-press { 40% { transform: translateY(18%) scale(.92); } }
.next-btn:active .ic-next { animation: next-nudge .3s ease-out; }
@keyframes next-nudge { 50% { transform: translateX(22%); } }
/* meat grades: text label + colour + wrapper art (never colour alone) */
.grade { display: inline-block; padding: 0 0.9cqw; border-radius: 0.8cqw; font-weight: 900; font-size: .92em; line-height: 1.5; color: #fff6e4; }
.grade.g-scrap { background: #7a6a58; } .grade.g-std { background: #8a6a3a; } .grade.g-select { background: #2f6c58; } .grade.g-prime { background: #6a3a8a; }
.meat-ic { display: inline-block; flex: none; width: max(34px, 10cqw); aspect-ratio: 200 / 180; background: var(--meat10) 0 0 / 400% 600% no-repeat; }
.grade-list { list-style: none; margin: 0 0 1cqw; padding: 0; display: grid; gap: 1cqw; }
.grade-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6cqw; padding: 0.6cqw 1cqw; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); border-radius: 1.2cqw; background: #fff5; }
.grade-list li span { display: grid; justify-items: start; font-size: max(12px, 3.1cqw); min-width: 0; }
.grade-list li small { color: #6a4a2a; font-size: max(11px, 2.7cqw); overflow-wrap: anywhere; }
.grade-list button { min-height: 44px; min-width: 21cqw; padding: 0 1.6cqw; font-weight: 800; font-size: max(12px, 3.1cqw); }
.cabinet .cab-slot .mk { position: absolute; left: 3%; bottom: 20%; width: 34%; height: auto; aspect-ratio: auto; background-repeat: no-repeat; filter: drop-shadow(0 1px 1px #000c); pointer-events: none; }
.cabinet .cab-slot .si { inset: 6% 6% 24%; }
.cabinet .cab-slot[data-grade="prime"] { border-color: #b48ad8; } .cabinet .cab-slot[data-grade="select"] { border-color: #6ac0a0; } .cabinet .cab-slot[data-grade="scrap"] { border-color: #8a7a68; border-style: dotted; }
.cabinet .cab-slot.held::after { content: "留单"; position: absolute; left: 3%; top: 3%; padding: 0 0.6cqw; border-radius: 0.6cqw; background: #b0361e; color: #fff; font-size: max(9px, 2.2cqw); font-weight: 800; }
.cabinet .cab-slot small { font-size: max(9px, 2.3cqw); }
#sd-icon { background-repeat: no-repeat; }
/* pen card: meat forecast */
/* HUD: projected after-rent progress can be negative early in the week */
.goal-bar.neg #goal-fill { background: #a0402a; }
#hud-goal { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 800; }
.hud .goal-cap { display: block; margin-top: 0.2cqw; font-size: max(10px, 2.5cqw); line-height: 1.2; color: #e8cf9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .goal-bar { margin-top: 0.3cqw; }
.hud .goal-bar #hud-goal.long { font-size: 10px; letter-spacing: -0.03em; }
/* bill: tomorrow's rush order on its own line */
.bill-next-order { display: block; margin-top: 0.4em; color: #8a2f1a; font-weight: 800; overflow-wrap: anywhere; }
/* quiz card: fits 320x568 at normal type — question, 4 options, reward and way back */
.quiz-card { width: min(94vw, 460px); max-height: 96dvh; padding: 0; border: 0; background: transparent; }
.quiz-card .qc { display: grid; gap: 2.2cqw; padding: 3.4cqw; border: 3px double #3d6a3a; border-radius: 2cqw; container-type: inline-size;
  background: var(--ui10) 0 0 / 127.75% 505.76% no-repeat, #ead6ad; color: #3a2414; max-height: 94dvh; overflow-y: auto; }
.qc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; border-bottom: 3px double #3d6a3a; padding-bottom: 1.4cqw; color: #2d5a2a; }
.qc-head b { font-size: max(15px, 4.4cqw); } .qc-head small { font-size: max(11px, 3cqw); font-weight: 700; }
.qc-q { margin: 0; font-size: max(16px, 4.6cqw); font-weight: 800; line-height: 1.45; }
.qc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.qc-opts button { display: flex; align-items: center; gap: 1.6cqw; min-height: 48px; padding: 1cqw 2cqw; text-align: left; font-size: max(14px, 4cqw); color: #3a2414; background: #f8eed8; border: 2px solid #b08a5a; border-radius: 1.6cqw; }
.qc-opts button b { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #3d6a3a; color: #fff6dc; font-size: .85em; }
.qc-opts button[aria-disabled="true"] { filter: none; opacity: .72; }
.qc-opts button.right { background: #c8f0d0; border-color: #2e7a4a; opacity: 1; } .qc-opts button.wrong { background: #f8c8c0; border-color: #a03a2a; opacity: 1; }
.qc-why { margin: 0; padding: 1.4cqw 2cqw; border-radius: 1.4cqw; font-size: max(13px, 3.6cqw); font-weight: 700; }
.qc-why.ok { background: #d8f0d8; color: #1a5a2a; } .qc-why.bad { background: #f8dcd4; color: #8a2a1a; }
.qc-reward { margin: 0; font-size: max(12px, 3.3cqw); color: #6a4a2a; }
.qc-actions { display: flex; }
.qc-actions button { flex: 1; min-height: 48px; font-weight: 800; }
.quiz-row button { min-width: 18cqw; min-height: 44px; }
/* draw: before = the empty display crate, after = the pig actually drawn (or the rarest of ten) */
.gacha-cap { margin: -0.6cqw 0 1.4cqw; font-size: max(12px, 3.2cqw); font-weight: 700; color: #bfe6c8; }
.gacha-cap[data-ok="false"] { color: #f0b49a; }
.rcard.best { outline: 3px solid #ffd36a; outline-offset: 1px; box-shadow: 0 0 3cqw #ffd36a88; }
@keyframes focus-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@container (max-width: 340px) {
  .cs-panel .t-fields > div { grid-template-columns: 17cqw 1fr; }
  .qc-opts { gap: 1.6cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-btn:active .ic-stamp, .next-btn:active .ic-next { animation: none; }
}
/* codex: the whole 3x3 page and the pager stay on screen down to 320x568; the cards share the
   height left under the detail, art scales inside them; opened details scroll in place */
#codex .sheet { display: flex; flex-direction: column; height: min(90cqh, 96dvh); }
#codex .codex-detail { flex: 0 0 auto; grid-template-columns: 30cqw minmax(0, 1fr); padding: 1.6cqw; margin-bottom: 1cqw; }
#codex .cd-more[open] { max-height: 26cqh; overflow-y: auto; overscroll-behavior: contain; }
#codex .codex-grid { flex: 1 1 0; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: 0; overflow: hidden; padding: 1.2cqw; gap: 1.2cqw; }
#codex .codex-card { min-height: 0; overflow: hidden; padding: 0.8cqw; }
#codex .codex-card .cc-view { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
#codex .codex-card .cc-view .breed-art { width: auto; height: 90%; max-width: 92%; }
#codex .codex-pager { flex: 0 0 auto; }
/* narrow HUD (320-360): the rent pill keeps its words and amount but drops the face, the cash
   pill tightens, so 4-digit cash on a Sunday still leaves room for the day and the goal */
@container (max-width: 360px) {
  .hud { column-gap: 1cqw; }
  .hud .rent .face.drugs { display: none; }
  .hud .rent { padding: 0.4cqw 1.8cqw; min-width: 0; }
  .hud .rent small { font-size: 10px; }
  .hud .cash { padding: 0.6cqw 1.2cqw; gap: 0.4cqw; }
  .hud .cash b { font-size: 15px; min-width: 0; }
  .hud .coin { width: 13px; height: 13px; }
}
@media (max-height: 700px) {
  #codex .codex-detail { grid-template-columns: 24cqw minmax(0, 1fr); }
  #codex .codex-detail .cd-info small { display: none; }
  #codex .codex-tabs button { min-height: 36px; }
  #codex .codex-card .cc-no { font-size: 10px; }
}

/* ===== v11 bell round: local overlay (yard pens + lamps, fridge scene, gacha dock, pause menu, workbench) ===== */
/* yard-interaction.css */
/* The pens themselves are the hit areas. Only the active inspection card is drawn. */
.yard .pen-tags .pen-tag {
  display: block;
  width: max(44px, 20.5cqw);
  height: max(44px, 17cqw);
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  outline: none;
  border-radius: 8px;
  background: none;
  box-shadow: none;
}

.yard .pen-tags .pen-tag:focus-visible,
.yard .light-switch:focus-visible {
  outline: 2px solid #ffd68f;
  outline-offset: 2px;
}

.yard .pen-tags .pen-tag.coach-target { box-shadow: none !important; }

.pen-preview {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  display: grid;
  width: max-content;
  max-width: clamp(98px, 31cqw, 154px);
  gap: 3px;
  padding: 6px 8px;
  transform: translateX(-50%);
  border: 1px solid #c0935a;
  border-left: 3px solid #5e8b78;
  border-radius: 2px;
  background: #efe1c3;
  color: #332519;
  box-shadow: 0 3px 8px #170d08b0;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  pointer-events: none;
}

.pen-preview b {
  font-size: max(12px, 3.4cqw);
  overflow-wrap: anywhere;
}

.pen-preview small,
.pen-preview em {
  color: #61462e;
  font-size: max(11px, 2.7cqw);
  font-style: normal;
}

.pen-preview em { color: #355b4a; }
.yard .pen-tag:focus-visible .pen-preview { visibility: visible; }
#game:has(.pen-tag:focus-visible) #pointer { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .yard .pen-tag:hover .pen-preview { visibility: visible; }
  #game:has(.pen-tag:hover) #pointer { visibility: hidden; }
}

.yard .light-switch {
  width: max(44px, 13cqw);
  height: max(44px, 13cqw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.yard .light-switch i { display: none; }

.yard .light-switch:active,
.yard .pen-tags .pen-tag:active {
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .yard .light-switch:hover {
    box-shadow: inset 0 0 0 1px #ffe6a680, 0 0 12px #ffc3635c;
  }
}

/* fridge-scene.css */
#fridge-dlg {
  border: 1px solid #92764e;
  border-radius: 6px;
  background: #131e20;
  color: #f3ead6;
  box-shadow: inset 0 0 0 2px #0d1718, 0 8px 25px #000a;
  scrollbar-width: thin;
  scrollbar-color: #8b7754 #142224;
  overscroll-behavior: contain;
}

#fridge-dlg .sheet {
  padding: max(9px, 2.8cqw);
  background: linear-gradient(#253b3a, #162427 48%, #171c1b);
}

#fridge-dlg .sheet-head {
  margin-bottom: 0;
}

#fridge-dlg #fridge-title {
  padding: 0;
  border: 0;
  color: #ffe5ab;
  font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  font-size: max(22px, 6cqw);
  line-height: 1.15;
}

#fridge-dlg .sheet-head .x {
  border: 1px solid #8c8061;
  border-radius: 3px;
  background: #1c2b2b;
  color: #f5dfb5;
}

#fridge-dlg #fridge-sum {
  margin: 0 0 7px;
  color: #c9e1d8;
  font-size: max(12px, 3.15cqw);
}

#fridge-dlg .fridge-visual {
  position: relative;
  height: clamp(124px, 41cqw, 176px);
  overflow: hidden;
  border: 1px solid #4c6c6c;
  border-radius: 4px 4px 0 0;
  background: #0b1c20 url("assets/fridge-open-scene-v6.webp?v=7hao-20261114") center 53% / cover no-repeat;
}

#fridge-dlg .fridge-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #8fdedc00, #c6ffff65 60%, #8fdedc00);
  opacity: 0;
  pointer-events: none;
}

#fridge-dlg[open] .fridge-visual {
  animation: fridge-unseal 330ms ease-out both;
}

#fridge-dlg[open] .fridge-visual::after {
  animation: fridge-light 480ms 80ms ease-out both;
}

@keyframes fridge-unseal {
  from { clip-path: inset(0 0 0 80%); filter: brightness(.53); }
  to { clip-path: inset(0); filter: brightness(1); }
}

@keyframes fridge-light {
  0%, 100% { opacity: 0; }
  30% { opacity: .6; }
}

#fridge-dlg .fridge-interior {
  padding: 0 max(5px, 1.7cqw) max(6px, 1.8cqw);
  border: 1px solid #4c6c6c;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #112729, #203637 45%, #162e31);
}

#fridge-dlg .cab-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 3px;
  color: #e3f4eb;
}

#fridge-dlg .cab-h small {
  color: #b3d7d4;
  font-size: max(11px, 2.8cqw);
  text-align: end;
}

#fridge-dlg .cabinet {
  grid-template-columns: repeat(var(--fridge-cols, 6), minmax(0, 1fr));
  gap: max(3px, 1cqw);
  padding: max(3px, 1cqw);
  border: 1px solid #6a8d88;
  border-bottom: 2px solid #526f6d;
  border-radius: 2px;
  background: #0d2024;
  box-shadow: inset 0 2px 6px #0008;
}

#fridge-dlg .cabinet[data-count="3"] { --fridge-cols: 3; --fridge-cols-narrow: 3; }
#fridge-dlg .cabinet[data-count="6"] { --fridge-cols-narrow: 3; }
#fridge-dlg .cabinet[data-count="5"] { --fridge-cols: 5; }
#fridge-dlg .cabinet[data-count="8"] { --fridge-cols: 4; --fridge-cols-narrow: 4; }

#fridge-dlg .cabinet .cab-slot {
  height: max(44px, 12.4cqw);
  aspect-ratio: auto;
  border: 1px solid #50706e;
  border-radius: 2px;
  background: #152e32;
}

#fridge-dlg .cab-slot.full {
  border-color: #809793;
  background: linear-gradient(#3d5a56, #294441);
}

#fridge-dlg .cab-slot.premium {
  border-color: #bf9d62;
}

#fridge-dlg .cab-slot.supply:not(.full) {
  border-color: #7b7964;
}

#fridge-dlg .cab-slot:not(.full) small {
  display: none;
}

#fridge-dlg .cab-slot.picked {
  border-color: #bbecd8;
  box-shadow: inset 0 0 0 1px #bbecd8;
}

#fridge-dlg button:focus-visible {
  outline: 2px solid #fff0ae;
  outline-offset: 2px;
}

#fridge-dlg .slot-detail {
  margin-top: 7px;
  scroll-margin: 8px;
  border: 1px solid #82918a;
  border-radius: 3px;
  background: #223131;
}

#fridge-dlg .slot-detail .sd-actions:has(> button[hidden]:first-child + button[hidden]) {
  display: none;
}

#fridge-dlg .slot-detail .sd-icon {
  border-radius: 2px;
  background-color: #19282b;
}

#fridge-dlg .cab-upgrade {
  border-block: 1px solid #6b7362;
  padding: 4px 0;
}

#fridge-dlg .cab-shop {
  padding-block: 5px 1px;
}

#fridge-dlg .cab-shop button,
#fridge-dlg .cab-upgrade button {
  min-height: 44px;
  border: 1px solid #978365;
  border-radius: 3px;
  background: #263d3c;
  color: #ffebc5;
}

@container (max-width: 345px) {
  #fridge-dlg .cabinet { grid-template-columns: repeat(var(--fridge-cols-narrow, 5), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #fridge-dlg[open] .fridge-visual,
  #fridge-dlg[open] .fridge-visual::after { animation: none; }
}

/* gacha-dock.css: replaced in v11 by the authored draw room (see the draw-room section) */

/* pause-menu.css */
/* The top of the pause screen shows the shop. The controls sit on the walnut panel. */
#menu.sheet-dialog.wood {
  inset: 0;
  width: 100cqw;
  max-width: 100vw;
  height: 100cqh;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #97683d;
  border-radius: clamp(7px, 3.5cqw, 16px);
  background: #251510 url("assets/pause-shop-v6.webp?v=7hao-20261114") top center / 100% 100% no-repeat;
  color: #f6e6ca;
  scrollbar-width: thin;
  scrollbar-color: #916944 #2a1a12;
}

#menu.sheet-dialog.wood > .sheet {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: min(27cqh, 210px) clamp(18px, 10cqw, 62px) 16px;
  background: linear-gradient(180deg, #180c0700 18%, #180c0730 31%, #180c0738 78%, #180c0780);
}

#menu #menu-title {
  position: absolute;
  top: clamp(5px, 1.3cqh, 14px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 clamp(22px, 8cqw, 40px);
  border: 9px solid transparent;
  border-image: url("assets/ui-btn-wood.webp?v=7hao-20261114") 40 60 fill / 9px 14px stretch;
  background: none;
  color: #fff0ca;
  font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  font-size: clamp(17px, 5.3cqw, 25px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .12em;
  text-indent: .12em;
  text-shadow: 0 1px 3px #130a05;
}

#menu .menu-list {
  display: grid;
  gap: clamp(4px, 1.75cqw, 9px);
  margin: 0;
}

#menu .menu-list > button:not(.primary),
#menu .menu-list > button.primary {
  position: relative;
  min-height: 44px;
  margin: 0;
  border: 1px solid #a4754880;
  border-image: none;
  border-radius: 3px;
  background: #231510c7;
  box-shadow: inset 0 1px #e0ad6f1f, 0 2px 4px #160d0a80;
  color: #f8e7c9;
  text-shadow: 0 1px 2px #160d0a;
}

#menu .menu-list > button:not(.primary) {
  min-height: clamp(44px, 7.7cqh, 56px);
  padding: 6px 30px 6px 41px;
  text-align: left;
  font-size: clamp(14px, 4.15cqw, 18px);
  font-weight: 700;
}

#menu .menu-list > button.primary {
  width: 90%;
  justify-self: center;
  min-height: clamp(50px, 15cqw, 70px);
  margin-bottom: clamp(9px, 3.4cqw, 20px);
  border: 0;
  border-image: url("assets/ui-sign.webp?v=7hao-20261114") 56 82 fill / 12px 20px stretch;
  padding: 6px 12px;
  font-size: clamp(17px, 5.6cqw, 25px);
  letter-spacing: .06em;
}

#menu .menu-list > button:not(.primary):not(.ghost)::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: #dbaf78;
}

#menu .menu-list [data-ui="manual"]::before {
  background-image: linear-gradient(to right, transparent 46%, #231510 46% 54%, transparent 54%);
  clip-path: polygon(3% 14%, 25% 9%, 50% 20%, 75% 9%, 97% 14%, 97% 86%, 76% 81%, 50% 91%, 24% 81%, 3% 86%);
}

#menu .menu-list [data-ui="board"]::before {
  clip-path: polygon(25% 7%, 75% 7%, 75% 19%, 97% 19%, 97% 39%, 88% 52%, 72% 54%, 60% 63%, 56% 67%, 56% 82%, 76% 82%, 76% 93%, 24% 93%, 24% 82%, 44% 82%, 44% 67%, 40% 63%, 28% 54%, 12% 52%, 3% 39%, 3% 19%, 25% 19%);
}

#menu .menu-list [data-ui="sound"]::before {
  clip-path: polygon(30% 19%, 86% 5%, 86% 72%, 78% 84%, 59% 87%, 48% 81%, 50% 70%, 61% 63%, 75% 64%, 75% 28%, 41% 36%, 41% 85%, 33% 96%, 14% 99%, 3% 93%, 5% 82%, 17% 75%, 30% 75%);
}

#menu .menu-list [data-ui="home"]::before {
  clip-path: polygon(50% 3%, 98% 46%, 87% 56%, 79% 49%, 79% 91%, 59% 91%, 59% 67%, 41% 67%, 41% 91%, 21% 91%, 21% 49%, 13% 56%, 2% 46%);
}

#menu .menu-list > button:not(.primary):not(.ghost)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(45deg);
  border: solid #bf9465;
  border-width: 1px 1px 0 0;
}

#menu .menu-list > button.ghost {
  margin-top: clamp(10px, 4cqw, 21px);
  padding: 6px 12px;
  border-color: transparent;
  box-shadow: none;
  color: #e2c9a6 !important;
  font-size: clamp(12px, 3.65cqw, 15px);
  font-weight: 600;
  text-align: center;
}

#menu .menu-list > button.ghost::before {
  content: "↺" / "";
  margin-inline-end: .5em;
  color: #c79e76;
}

#menu .menu-list > button.ghost::after {
  content: "";
  position: absolute;
  inset: -5px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bb865d99 25% 75%, transparent);
}

#menu .menu-list > button:focus-visible { outline: 2px solid #ffe0a2; outline-offset: 2px; }
#menu .menu-list > button:hover { border-color: #d3a069; filter: brightness(1.13); }

@media (max-height: 480px) {
  #menu.sheet-dialog.wood > .sheet { padding-top: min(23cqh, 94px); }
}

/* yard-workbench.css */
.yard-workbench {
  display: grid;
  grid-template-columns: 1.35fr minmax(0, 1fr);
  gap: 6px;
  margin: 1.5cqw 2cqw 0;
}

.yard-workbench .yard-stock {
  position: relative;
  inset: auto;
  z-index: auto;
  flex-direction: row;
  justify-content: center;
  min-height: 48px;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid #8b7750;
  border-radius: 4px;
  background: #203231;
  color: #f7e5bc;
  box-shadow: inset 0 0 0 2px #142322;
}

.yard-workbench .yard-stock > i {
  width: clamp(48px, 16cqw, 76px);
  height: clamp(40px, 13cqw, 65px);
  background-image: url("assets/fridge-closed-v6.webp?v=7hao-20261114") !important;
}

.yard-workbench .yard-stock span { text-align: left; }
.yard-workbench .yard-stock small { white-space: nowrap; }

.yard-order {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid #b09161;
  border-radius: 3px;
  background: repeating-linear-gradient(0deg, #a0723612 0 1px, transparent 1px 4px), #e6d2a9;
  color: #4f3120;
}

.yard-order span { color: #754725; font-size: max(11px, 2.9cqw); }
.yard-order b { font-size: max(12px, 3.15cqw); overflow-wrap: anywhere; }

.cs-hot.cs-fridge {
  right: 19%;
  width: 20%;
  height: 19%;
  top: calc(var(--desk, 64%) - 8%);
  background: url("assets/fridge-closed-v6.webp?v=7hao-20261114") center 40% / contain no-repeat;
}


/* ===== v11 bell round: yard workbench (cold cabinet left, order clip right), errand slips, inventory 待领 ===== */
.yard-workbench[hidden] { display: none; }
.yard-scene .yard-workbench {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2cqw;
  align-self: stretch; min-height: 0; max-height: 46cqw; margin: 1.6cqw 2cqw;
}
/* the cabinet: old brass frame around cold glass; the real boxes sit on two shelves */
.yard-workbench .yard-stock {
  position: relative; inset: auto; z-index: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1cqw;
  min-height: 64px; padding: 1.2cqw 1.6cqw 1.6cqw; text-align: left;
  border: 2px solid #9a7445; border-radius: 5px;
  background: linear-gradient(#3b2a1c, #2a1d13); box-shadow: inset 0 0 0 2px #1a110a, inset 0 1px #e0b07a40, 0 2px 4px #0008;
  color: #f7e5bc;
}
.yard-workbench .yard-stock::before, .yard-workbench .yard-stock::after {
  content: ""; position: absolute; left: -3px; width: 5px; height: 16%; border-radius: 2px;
  background: linear-gradient(90deg, #6c4a22, #d6a65e 45%, #6c4a22); box-shadow: 0 1px 1px #0009;
}
.yard-workbench .yard-stock::before { top: 30%; }
.yard-workbench .yard-stock::after { bottom: 14%; }
.yard-workbench .ys-label { order: -1; display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 1cqw; min-width: 0; }
.yard-workbench .ys-label b { font-size: max(12px, 3.3cqw); color: #ffe0a6; }
.yard-workbench .ys-label small { font: 800 max(11px, 2.9cqw) / 1.1 var(--num); color: #9ef0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yard-workbench .ys-cab { position: relative; display: block; flex: 1 0 auto; min-height: clamp(46px, 15cqw, 92px); border: 1px solid #b48a4f; border-radius: 3px; background: #10262a; box-shadow: inset 0 0 0 1px #0a1416; overflow: hidden; }
.yard-workbench .ys-glass {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0 3%; padding: 3% 4% 2%;
  background:
    linear-gradient(115deg, #ffffff00 30%, #d8fbff2e 38%, #ffffff00 46%, #ffffff00 64%, #d8fbff1f 70%, #ffffff00 76%),
    linear-gradient(#0000 calc(50% - 1px), #8aa9ad 0 calc(50% + 1px), #0000 0),
    linear-gradient(#0000 calc(100% - 3px), #8aa9ad 0),
    radial-gradient(ellipse at 50% 0, #9fe6ff44, #0000 70%), linear-gradient(#173c42, #0f2a2f);
}
.yard-workbench .ys-glass:empty::after { content: "空"; grid-area: 1 / 1 / 3 / 4; place-self: center; color: #7fb1b4; font-size: max(11px, 2.8cqw); }
.yard-workbench .ys-box { position: relative; display: block; min-width: 0; min-height: 0; }
.yard-workbench .ys-box .meat-ic { position: absolute; left: 50%; bottom: 3px; width: auto; height: calc(100% - 4px); max-width: 100%; transform: translateX(-50%); filter: drop-shadow(0 1px 1px #000a); }
.yard-workbench .ys-box .mk { position: absolute; right: 0; bottom: 4%; width: 30%; aspect-ratio: 1; background-size: contain; filter: drop-shadow(0 0 1px #000); }
.yard-workbench .fridge-plus { position: absolute; right: 2cqw; top: -2.4cqw; font-style: normal; font-weight: 900; font-size: max(12px, 3.2cqw); color: #ffe27a; -webkit-text-stroke: .5cqw #2a1406; paint-order: stroke fill; opacity: 0; }
.yard-workbench .yard-stock.bump .fridge-plus { animation: float 1.2s ease-out both; }
.yard-workbench .yard-stock.dot .ys-label b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #ff7a4a; box-shadow: 0 0 4px #ff7a4a; vertical-align: middle; }
/* the order clip: paper on a board with a brass clip; the yard's only order status */
.yard-workbench .yard-order {
  position: relative; display: grid; align-content: start; gap: .6cqw; min-width: 0; min-height: 64px;
  padding: 3.2cqw 2.2cqw 1.6cqw; border: 1px solid #a98a58; border-radius: 3px;
  background: repeating-linear-gradient(0deg, #a0723614 0 1px, #0000 1px 5px), linear-gradient(#ecdcb6, #dcc496);
  box-shadow: 0 0 0 3px #4a2f1b, 0 0 0 4px #9a7445, 0 3px 5px #000a; color: #3f2717; overflow: hidden;
}
.yard-workbench .yard-order::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 34%; height: 2.6cqw; min-height: 8px; transform: translateX(-50%);
  border-radius: 0 0 4px 4px; background: linear-gradient(#e2b56a, #8d6630); box-shadow: 0 1px 1px #0008;
}
.yard-workbench .yo-title { color: #8a4b22; font-size: max(11px, 2.8cqw); font-weight: 800; letter-spacing: .1em; }
.yard-workbench .yard-order b { font-size: max(12px, 3.3cqw); line-height: 1.25; overflow-wrap: anywhere; }
.yard-workbench .yard-order small { color: #6a4a30; font-size: max(11px, 2.7cqw); line-height: 1.3; overflow-wrap: anywhere; }
.yard-workbench .yard-order small:empty { display: none; }
.yard-workbench .yard-order[data-mood="ready"] b { color: #23643a; }
.yard-workbench .yard-order[data-mood="short"] b { color: #a1301c; }
.yard-workbench .yard-order[data-mood="done"] b { color: #5c5248; }

/* errands inside a visitor's slip: the ink of that errand's own slip kind */
.cs-panel .errand { --ec: #6e4058; margin: 1.6cqw 0 0; padding: 1.2cqw 0 .4cqw 2.2cqw; border-left: 3px solid var(--ec); }
.cs-panel .errand[data-errand="care"] { --ec: #1f766a; }
.cs-panel .errand[data-errand="commission"] { --ec: #2f3f7c; }
.cs-panel .errand h5 { margin: 0 0 .6cqw; color: var(--ec); font-size: max(12px, 3.3cqw); }
.cs-panel .errand p { margin: .4cqw 0; font-size: max(12px, 3.2cqw); line-height: 1.35; }
.cs-panel .errand .er-note { color: #5a4030; }
.cs-panel .errand .t-fields { margin: .4cqw 0; }
.cs-panel .er-acts { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin: 1cqw 0 .4cqw; }
.cs-panel .er-acts button { flex: 1 1 40%; min-height: 44px; }

/* inventory: 待领／摆设 inside the cold cabinet */
#fridge-dlg .pending { margin: 7px 0 0; padding: 0 max(5px, 1.7cqw) 4px; border: 1px solid #4c6c6c; border-radius: 4px; background: #142224; }
#fridge-dlg .pending .shelf-list { margin: 0; padding: 0; list-style: none; }
#fridge-dlg .pending .shelf-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px solid #4c6c6c66; }
#fridge-dlg .pending .shelf-list span { display: grid; min-width: 0; }
#fridge-dlg .pending .shelf-list small { color: #b3d7d4; font-size: max(11px, 2.8cqw); }
#fridge-dlg .pending .shelf-list button { min-height: 44px; min-width: 64px; }
#fridge-dlg .pending h5 { margin: 6px 0 2px; color: #e3f4eb; }
#fridge-dlg .pending .prod i { display: inline-block; width: 22px; height: 22px; margin-right: 4px; vertical-align: middle; background: center / contain no-repeat; }
.deal-actions .er-bar { display: contents; }
.deal-actions .er-bar[hidden] { display: none; }
#gacha .rcard .rc-new:not(.new) { display: block; color: #b9ab98; }

/* ===== v11 follow-up: the yard is one phone screen (320x568, 390x844) =====
   art / one context row (Chouchou's line, or the selected pen's compact card in its place) /
   cabinet + order workbench filling what is left; the bottom navigation never moves. */
.yard-scene { grid-template-rows: calc(100cqw * 964 / 1206) auto minmax(0, 1fr); grid-auto-rows: 0; align-content: stretch; overflow: hidden; padding-bottom: 0; }
.yard-scene > .yard { grid-row: 1; grid-column: 1; }
.yard-scene > .talk, .yard-scene > .pen-card { grid-row: 2; grid-column: 1; }
.yard-scene > .yard-idle { display: none !important; }
.yard-scene > .yard-workbench { grid-row: 3; grid-column: 1; }
.yard-scene:has(> .pen-card:not([hidden])) > .talk { display: none; }
.yard-scene > .yard-workbench[hidden] { display: grid !important; visibility: hidden; }
.yard-scene .yard-workbench { align-self: stretch; max-height: 44cqw; min-height: 0; margin: 1.4cqw 2cqw 1.6cqw; }
.yard-workbench .yard-stock, .yard-workbench .yard-order { min-height: 0; }
.yard-workbench .ys-cab { flex: 1 1 0; min-height: 22px; }
/* compact pen card: face, name, stage, kg and clean on one line, then the actions. The hint
   line (meat grade / growth) shows when the screen is tall enough; the planks always say what is missing. */
.yard-scene > .pen-card { margin: 1.2cqw 2cqw 0; padding: 1cqw 2cqw 1.2cqw; gap: .8cqw; border-top: .5cqw solid #b07a32; border-radius: 2cqw;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "r1 r2" "hint hint" "acts acts"; align-items: center; }
.yard-scene > .pen-card .pc-row1 { grid-area: r1; grid-template-columns: auto minmax(0, auto) auto; gap: 1.2cqw; min-width: 0; }
.yard-scene > .pen-card .pc-face { width: max(28px, 8cqw); height: max(24px, 6.6cqw); }
.yard-scene > .pen-card .pc-row1 b { font-size: max(14px, 3.9cqw); overflow: hidden; text-overflow: ellipsis; }
.yard-scene > .pen-card .pc-row1 small { display: none; }
.yard-scene > .pen-card .pc-row2 { grid-area: r2; display: flex; gap: 1cqw; }
.yard-scene > .pen-card .pc-row2[hidden] { display: none; }
.yard-scene > .pen-card .pc-row2 > div { padding: .2cqw 1.4cqw; gap: .8cqw; }
.yard-scene > .pen-card .pc-row2 dd small { display: none; }
.yard-scene > .pen-card .pc-grow { grid-area: hint; display: none; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: max(11px, 2.9cqw); line-height: 1.3; }
@container (min-height: 760px) {
  .yard-scene > .pen-card .pc-grow:not([hidden]) { display: block; }
  .yard-scene > .pen-card .pc-row2 dd small { display: inline; }
}
.yard-scene > .pen-card .pc-acts { grid-area: acts; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.yard-scene > .pen-card .pc-acts > [hidden] { display: none; }
.yard-scene > .pen-card .plank { min-height: 44px; border-width: 6px 10px; }
.yard-scene > .pen-card .plank span { font-size: max(14px, 3.8cqw); }

/* v11 follow-up: the counter speech has its own reserved row between the scene and the slip:
   always there (blank when nobody talks), two lines tall, so nothing overlaps or jumps. */
.counter-scene, .counter-scene:has(.cs-say:not([hidden])) { grid-template-rows: minmax(0, 1fr) auto auto; }
.counter-scene > .cs-say { position: relative; z-index: 1; height: calc(2 * 1.35 * max(12px, 3.3cqw) + 12px); min-height: 0; box-sizing: border-box; overflow: hidden; align-items: start; }
.counter-scene > .cs-say.quiet { visibility: hidden; }
.counter-scene > .cs-say span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: max(12px, 3.3cqw); }

/* v11 follow-up: guests without a delivered bust stand at the counter as a framed portrait,
   cropped square around the face from their card art (whole head in frame). */
.cs-guest.card { --portrait-box-scale: 1; aspect-ratio: 1; width: auto; height: min(44%, 38cqw); bottom: calc(100% - var(--desk, 64%) + 1%);
  border: 3px solid #b48a4f; border-radius: 6px; box-shadow: inset 0 0 0 2px #2a1a0e, 0 4px 10px #000a; background-repeat: no-repeat; }
/* the slip starts below the speech row, never under it */
.counter-scene > .cs-panel { margin-top: 0; }
.cs-guest.card { height: min(58%, 46cqw); bottom: calc(100% - var(--desk, 64%) - 5%); }

/* ===== v11 draw room (authored pixel art, replaces the rejected dock scene) =====
   Full stage, not a floating modal: wall + porthole + lamp + jar shelf + table drawn at 240x150 and
   scaled with crisp pixels; the sealed crate sits on the burlap on the table. Controls hang below
   like the approved mockup: balance on top, two big stamps, a strip for room / waiting / odds /
   buying, then the result tray (5 x 2 for a ten-pull, one large card for a single). */
#gacha.draw-room { inset: 0; width: 100cqw; max-width: 100cqw; height: 100cqh; max-height: 100cqh; margin: auto; padding: 0; border: 0; border-radius: 0;
  background: #1b110c; color: #f6e6ca; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#gacha.draw-room::backdrop { background: #000c; }
#gacha .dr { display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); gap: 1.6cqw; min-height: 100%; padding-bottom: 2.4cqw;
  background: linear-gradient(#0000 0, #0000 40%, #120a07 100%), #24160f; }
#gacha .dr-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.2cqw 2.4cqw; background: #2a1912; border-bottom: 2px solid #9a6a2c; box-shadow: 0 1px 0 #140c08; }
#gacha .dr-top h2 { margin: 0; padding: 0; border: 0; background: none; font: 800 max(17px, 5.2cqw) / 1.1 "Songti SC", "Noto Serif CJK SC", SimSun, serif; color: #ffe2a8; letter-spacing: .08em; }
#gacha .dr-top .ticket-bal { display: flex; align-items: center; gap: 1.4cqw; margin: 0; padding: .6cqw 3cqw; border: 2px solid #9a6a2c; border-radius: 99px; background: #140c08; font-size: max(13px, 3.6cqw); }
#gacha .dr-top .ticket-bal .prop { width: max(22px, 6cqw); height: max(14px, 3.8cqw); }
#gacha .dr-top .ticket-bal b { color: #ffd77a; font: 800 max(16px, 4.6cqw) / 1 var(--num); }
#gacha .dr-top .x { justify-self: end; min-width: 44px; min-height: 44px; border: 2px solid #9a6a2c; border-radius: 50%; background: #140c08; color: #ffe2a8; }
/* the room: anchored at the table so the crate always stands on the cloth */
#gacha .dr-scene { position: relative; width: 100%; height: 62.5cqw; overflow: hidden; border: 0; border-radius: 0; margin: 0;
  background: #2a1912 url("assets/draw-counter-painted-v12.webp?v=7hao-20261114") center bottom / 100cqw 62.5cqw no-repeat; image-rendering: pixelated; box-shadow: inset 0 -2px 0 #140c08; }
#gacha[data-has="10"] .dr-scene, #gacha[data-has="1"] .dr-scene { height: 34cqw; }
#gacha .dr-scene i { position: absolute; left: calc(50% - 20.833cqw); bottom: 10.8cqw; width: 41.667cqw; height: 31.25cqw; right: auto; top: auto; margin: 0; opacity: 1; filter: none;
  background: url("assets/draw-crate-closed-v12.webp?v=7hao-20261114") center / 100% 100% no-repeat; image-rendering: pixelated; animation: none; transform: none; }
#gacha .dr-scene .crate-open { background-image: url("assets/draw-crate-open-v12.webp?v=7hao-20261114"); visibility: hidden; }
#gacha .dr-scene[data-state="open"] .crate { visibility: hidden; }
#gacha .dr-scene[data-state="open"] .crate-open { visibility: visible; }
#gacha .dr-scene[data-state="shake"] .crate { animation: dr-shake .8s steps(8) both; }
@keyframes dr-shake { 0%, 100% { transform: none; } 12% { transform: translate(-.84cqw, 0); } 25% { transform: translate(.84cqw, -.42cqw); } 37% { transform: translate(-.84cqw, 0); } 50% { transform: translate(.84cqw, -.84cqw); } 62% { transform: translate(-.42cqw, 0); } 75% { transform: translate(.42cqw, -.42cqw); } 87% { transform: none; } }
/* two stamps: green single, red ten */
#gacha .gacha-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin: 0 3cqw; }
#gacha .gacha-actions button { display: grid; justify-items: center; gap: .4cqw; min-height: 50px; padding: 1.2cqw 1cqw; border: 2px solid #d29a45; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #140c08, inset 0 3px 0 #ffffff22, 0 2px 0 #0a0604; color: #fff1d0; text-shadow: 0 1px 0 #0008; }
#gacha .gacha-actions .g1 { background: #2f5a4e; }
#gacha .gacha-actions .g10 { background: #8a2c1e; }
#gacha .gacha-actions span { font: 800 max(17px, 5.4cqw) / 1 "Songti SC", "Noto Serif CJK SC", SimSun, serif; letter-spacing: .06em; }
#gacha .gacha-actions small { font: 700 max(11px, 3cqw) / 1.1 var(--font); color: #f2dcae; }
#gacha .gacha-actions [aria-disabled="true"] { filter: saturate(.35) brightness(.8); }
#gacha .dr-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4cqw; margin: 0 3cqw; }
#gacha .dr-strip small#gacha-room { flex: 1 1 auto; min-width: 0; color: #d9c29a; font-size: max(11px, 3cqw); white-space: nowrap; }
#gacha .dr-strip button { min-height: 44px; min-width: 44px; padding: 0 2cqw; border: 1px solid #7a5530; border-radius: 3px; background: #2a1a12; color: #f0dcb4; font-size: max(12px, 3.3cqw); }
#gacha .dr-strip button[aria-pressed="true"] { border-color: #d29a45; background: #3d2a1a; color: #fff1d0; }
#gacha .dr-strip button:disabled { opacity: .5; }
#gacha .dr-strip .buy { display: grid; line-height: 1.1; }
#gacha .dr-strip .buy small { font-size: max(10px, 2.6cqw); color: #d9c29a; }
#gacha .gacha-note { margin: 0 3cqw; color: #e8c890; font-size: max(11px, 3cqw); }
#gacha .gacha-note:empty { display: none; }
#gacha [data-gacha-pane] { min-height: 0; margin: 0 3cqw; }
#gacha [data-gacha-pane][hidden] { display: none; }
#gacha .results h3, #gacha .waiting h3 { display: flex; align-items: center; gap: 2cqw; margin: 0 0 1.4cqw; color: #ffe2a8; font-size: max(13px, 3.6cqw); }
#gacha .results h3::before, #gacha .results h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #0000, #9a6a2c); }
#gacha .results h3::after { background: linear-gradient(90deg, #9a6a2c, #0000); }
#gacha .dr-empty { margin: 0; color: #c8b08a; font-size: max(12px, 3.2cqw); text-align: center; }
#gacha .results-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4cqw; }
#gacha .results-grid[data-n="1"] { grid-template-columns: minmax(0, 44cqw); justify-content: center; }
#gacha .results-grid [role="listitem"] { display: grid; min-width: 0; }
#gacha .rcard { width: 100%; padding: .6cqw .4cqw 1cqw; gap: 0; border: 2px solid #7a5530; border-radius: 3px; background: #3a2416 linear-gradient(#0000 55%, #6a4a1e55 55%, #6a4a1e55 70%, #0000 70%); box-shadow: inset 0 0 0 1px #140c08; }
#gacha .rcard .rc-view { aspect-ratio: 2 / 1; }
#gacha .rcard .rc-view .breed-art { width: auto; height: 100%; }
#gacha .results-grid[data-n="1"] .rcard .rc-view { aspect-ratio: 4 / 3; }
#gacha .rcard b { font-size: max(10px, 2.9cqw); }
#gacha .rcard small { font-size: max(9px, 2.5cqw); }
#gacha .rcard.back { background: #24160f; border-color: #9a6a2c; }
#gacha .rcard.back .rc-view { background: url("assets/draw-crate-closed-v12.webp?v=7hao-20261114") center / 90% auto no-repeat; image-rendering: pixelated; }
#gacha .rcard[data-rarity="X"] { border-color: #dda6ec; } #gacha .rcard[data-rarity="X"] .rc-r { color: #f2c4ff; }
#gacha .results-grid[data-n="1"] .rcard b { font-size: max(16px, 4.8cqw); }
#gacha .results-grid[data-n="1"] .rcard small { font-size: max(12px, 3.3cqw); }
#gacha .results-actions { display: grid; grid-template-columns: 1fr; gap: 2cqw; margin-top: 1.6cqw; }
#gacha .results-actions button { min-height: 44px; border: 2px solid #9a6a2c; border-radius: 3px; background: #2f5a4e; color: #fff1d0; font-weight: 800; }
#gacha .results-actions [hidden] { display: none; }
#gacha .waiting ul { margin: 0; padding: 0; list-style: none; }
#gacha .waiting li { display: grid; grid-template-columns: minmax(32px, 11cqw) 1fr auto; align-items: center; gap: 2cqw; padding: 1cqw 0; border-bottom: 1px solid #7a553066; font-size: max(12px, 3.2cqw); }
#gacha .waiting li button { min-height: 44px; }
#gacha .rates p { margin: 0 0 1.4cqw; color: #e2cfa4; font-size: max(12px, 3.2cqw); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { #gacha .dr-scene i { animation: none !important; } }
#gacha .rcard { line-height: 1.15; }
#gacha .rcard small { line-height: 1.2; }
#gacha[data-has="10"] .dr-scene i, #gacha[data-has="1"] .dr-scene i { left: calc(50% - 15cqw); bottom: 11.4cqw; width: 30cqw; height: 22.5cqw; }

/* v11 conversation stage: placement comes from placeGuest() (shared anchor, normalized height,
   face on the centre line); no CSS offsets, scale factors or translate on top of it. */
.cs-guest.staged { right: auto; bottom: auto; aspect-ratio: auto; transform: none; --portrait-box-scale: 1; max-width: none; animation: none; }
.cs-guest.staged.card { border: 3px solid #b48a4f; border-radius: 6px; box-shadow: inset 0 0 0 2px #2a1a0e, 0 4px 10px #000a; }
@media (prefers-reduced-motion: no-preference) {
  .cs-stage.guest-arriving > .cs-guest.staged { animation: staged-enter 520ms ease-out both; }
  @keyframes staged-enter { 0% { opacity: 0; transform: translateX(-18cqw); } 70% { opacity: 1; transform: translateX(1cqw); } 100% { opacity: 1; transform: none; } }
}
#gacha .results-grid .rcard.ghost { display: grid; min-height: 0; height: 21cqw; aspect-ratio: auto; border: 2px dashed #6a4a2a; background: repeating-linear-gradient(170deg, #2e1d12 0 3px, #34210f 3px 6px); box-shadow: none; }
#gacha .results-grid .rcard.ghost .rc-view { aspect-ratio: auto; height: 100%; background: url("assets/draw-crate-closed-v12.webp?v=7hao-20261114") center / 60% auto no-repeat; image-rendering: pixelated; opacity: .28; }
#gacha .dr-empty { margin-bottom: 1.4cqw; }
#gacha .dr-empty { font-size: max(11px, 3cqw); }

/* v12: the real brass bell, 1.2x around its foot; one fridge picture and one hotspot at the counter */
.bell-layers-ok .cs-bell-base, .bell-layers-ok .cs-bell-cap { scale: 1.2; transform-origin: var(--bell-x, 9%) var(--bell-y, 70%); }
.bell-layers-ok .cs-hot.cs-bell { right: auto; bottom: auto; min-width: 44px; min-height: 44px; background: none; }
.bell-layers-ok .cs-hot.cs-bell small { position: absolute; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%); white-space: nowrap; }
.cs-fridge::before { content: none !important; display: none !important; }
/* v12: the send-off note sits in the speech row: warm beige, 13px, one line, left, no frame; the row keeps its height */
.counter-scene > .cs-say.note { visibility: visible; border-color: transparent; background: transparent; box-shadow: none; grid-template-columns: minmax(0, 1fr); align-items: center; }
.counter-scene > .cs-say.note b { display: none; }
.counter-scene > .cs-say.note span { display: block; font-size: 13px; font-weight: 400; color: #e9d3a8; white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: left; -webkit-line-clamp: unset; animation: say-note 2s ease-out both; }
@keyframes say-note { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .counter-scene > .cs-say.note span { animation: none; } }

/* v12 counter receipt (#cs-panel, separate from the nightly #bill): plain aged paper, no cropped
   frame, no heavy shadow or backing board. Dark-brown text, brick-red money, the slip type kept
   as a small stamp top-right; head, type, body and the pinned actions each keep their own row. */
.counter-scene > .cs-panel { --rc: #6a4426; color: #3b2416; border: 1px solid #a88656; border-radius: 2px; padding: 1.6cqw 2.6cqw 1.4cqw;
  background: #efe0bd url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover no-repeat; box-shadow: 0 1px 0 #00000040; }
.counter-scene > .cs-panel .t-head { min-height: 1.5em; border-bottom: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); padding-right: 18cqw; color: #3b2416; }
.counter-scene > .cs-panel .t-head::after { border-width: 1.5px; opacity: .8; transform: translateY(-50%) rotate(-4deg); background: none; }
.counter-scene > .cs-panel .t-fields dt { color: color-mix(in srgb, var(--rc) 80%, #3b2416); }
.counter-scene > .cs-panel .t-fields dd, .counter-scene > .cs-panel .t-state, .counter-scene > .cs-panel .errand p { color: #3b2416; }
.counter-scene > .cs-panel .t-fields .pay dd b, .counter-scene > .cs-panel .t-fields strong { color: #9a3418; }
.counter-scene > .cs-panel .deal-actions { border-top: 1px dashed color-mix(in srgb, var(--rc) 45%, transparent); }
.counter-scene > .cs-panel[data-kind="idle"] .t-head { border-bottom: 0; }
.counter-scene > .cs-panel[data-kind="idle"] .t-state { margin-top: 0; }

/* v12 nightly receipt: it feeds out of a brass printer mouth when the day really closes —
   title and date first, then the whole slip (≈520 ms). Restored bills and reduced motion show it still. */
#bill .printer-mouth { flex: none; display: block; height: clamp(20px, 7cqw, 30px); margin: 0 -1px; position: relative; z-index: 2;
  background: url("assets/receipt-printer-mouth-v12.webp?v=7hao-20261114") center 62% / 100% auto no-repeat; filter: drop-shadow(0 2px 2px #0008); }
@media (prefers-reduced-motion: no-preference) {
  #bill.printing .receipt-content { animation: bill-feed 520ms cubic-bezier(.3, .7, .3, 1) both; }
  @keyframes bill-feed {
    0% { clip-path: inset(0 0 100% 0); transform: translateY(-28px); }
    38% { clip-path: inset(0 0 74% 0); transform: translateY(-14px); }
    55% { clip-path: inset(0 0 70% 0); transform: translateY(-10px); }
    100% { clip-path: inset(0); transform: none; }
  }
}

/* v12 draw room: the painted night-market counter (960x640, no text) with the fine-pixel crate as a
   separate layer. Both crate pictures share the foot line (y 308 of 322), which stands on the rug
   (78% down the counter picture). With results on screen the room shortens and the crate scales
   down around the same foot, so the tray gets the space. */
#gacha .dr-scene { height: 66.667cqw; background: #2a1912 url("assets/draw-counter-painted-v12.webp?v=7hao-20261114") center bottom / 100cqw 66.667cqw no-repeat; image-rendering: auto; }
#gacha[data-has="10"] .dr-scene, #gacha[data-has="1"] .dr-scene { height: 40cqw; }
#gacha .dr-scene i { left: calc(50% - 25cqw); bottom: 13.2cqw; width: 50cqw; height: 33.54cqw; background: url("assets/draw-crate-closed-v12.webp?v=7hao-20261114") center / 100% 100% no-repeat; image-rendering: auto; filter: drop-shadow(0 1.2cqw .8cqw #0009); }
#gacha .dr-scene .crate-open { background-image: url("assets/draw-crate-open-v12.webp?v=7hao-20261114"); }
#gacha[data-has="10"] .dr-scene i, #gacha[data-has="1"] .dr-scene i { left: calc(50% - 18.75cqw); bottom: 13.57cqw; width: 37.5cqw; height: 25.16cqw; }
#gacha .rcard.back .rc-view, #gacha .results-grid .rcard.ghost .rc-view { background-image: url("assets/draw-crate-closed-v12.webp?v=7hao-20261114"); image-rendering: auto; }
/* single draw: the pig and its rarity lead */
#gacha .results-grid[data-n="1"] .rcard .rc-r { font-size: max(15px, 4.4cqw); letter-spacing: .1em; }
#gacha .results-grid[data-n="1"] .rcard[data-rarity="SR"] .rc-view, #gacha .results-grid[data-n="1"] .rcard[data-rarity="X"] .rc-view { background: radial-gradient(closest-side, #ffd36a33, #0000); }

/* v12 yard workbench: the glass cold cabinet (coldcab-glass-v12) and the brass order clipboard
   (order-clipboard-v12) are drawn as nine-slice frames, so the door frame, thin glass and the two
   shelves stay true at the short one-screen height. The real boxes sit on the shelves (top two
   compartments first); an empty cabinet just shows its shelves. */
.yard-workbench .yard-stock { border: 0; padding: 0; background: none; box-shadow: none; gap: .6cqw; }
.yard-workbench .yard-stock::before, .yard-workbench .yard-stock::after { content: none; }
.yard-workbench .ys-label { padding: 0 1cqw; }
.yard-workbench .ys-label b { color: #ffe0a6; text-shadow: 0 1px 0 #000; }
.yard-workbench .ys-cab { border: 0 solid transparent; border-width: 3.7cqw 4.2cqw 4.2cqw 3.1cqw; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  border-image: url("assets/coldcab-glass-v12.webp?v=7hao-20261114") 62 70 70 52 fill / 3.7cqw 4.2cqw 4.2cqw 3.1cqw stretch; }
.yard-workbench .ys-glass { inset: 0; padding: 0 2%; background: none; grid-template-rows: 36.6% 30.1% 33.3%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3%; }
.yard-workbench .ys-glass:empty::after { content: none; }
.yard-workbench .ys-box .meat-ic { bottom: 1px; height: calc(100% - 2px); }
.yard-workbench .yard-order { padding: 8.6cqw 3cqw 2.6cqw; border: 0 solid transparent; border-width: 8.6cqw 2.7cqw 2.7cqw; border-radius: 0; box-shadow: none; background: none;
  border-image: url("assets/order-clipboard-v12.webp?v=7hao-20261114") 95 30 30 fill / 8.6cqw 2.7cqw 2.7cqw stretch; padding: 0 .6cqw .4cqw; align-content: start; overflow: visible; }
.yard-workbench .yard-order::before { content: none; }
.yard-workbench .yo-title { margin-top: -1.4cqw; }
/* the opened cabinet uses the same frame around its real, tappable slots */
#fridge-dlg .fridge-interior { border: 0 solid transparent; border-width: 3.7cqw 4.2cqw 4.2cqw 3.1cqw; border-radius: 0; background: none;
  border-image: url("assets/coldcab-glass-v12.webp?v=7hao-20261114") 62 70 70 52 fill / 3.7cqw 4.2cqw 4.2cqw 3.1cqw stretch; padding: 0 1cqw 1cqw; }
#fridge-dlg .fridge-interior .cab-h { color: #f4f8f2; text-shadow: 0 1px 1px #000; }
#fridge-dlg .fridge-interior .cab-slot { background-color: #0d1d20cc; }
/* the counter's cabinet: one picture, one hotspot */
.cs-hot.cs-fridge { background: url("assets/coldcab-glass-v12.webp?v=7hao-20261114") center 40% / contain no-repeat !important; }

/* v12 room tabs and codex: one dark-teal enamel sign with worn brass (bay-enamel-v12), no bright
   blue outline. Locked rooms stay tappable (they open the expansion view) and stay readable. */
.bays, #codex-btn { border: 0 solid transparent; border-width: 1.6cqw 2.2cqw; border-radius: 0; background: none; box-shadow: 0 1px 2px #0008;
  border-image: url("assets/bay-enamel-v12.webp?v=7hao-20261114") 40 46 fill / 1.6cqw 2.2cqw stretch; }
.bays { overflow: visible; gap: .4cqw; }
.bays button { min-height: 38px; background: transparent; color: #d9e6df; text-shadow: 0 1px 0 #0009; border-radius: 2px; }
.bays button.locked { color: #b9c8c0; }
.bays button[aria-selected="true"] { background: linear-gradient(#e8bb6a, #b9802f); color: #2a1406; text-shadow: none; box-shadow: inset 0 0 0 1px #6b4a1e; }
#codex-btn { color: #f1e6c8; outline: 0; }
#codex-btn b { color: #ffe2a6; }
#codex-btn small { color: #cfe0d8; }
/* the scene never scrolls (a focused hotspot used to scroll an overflow:hidden stage and lift everyone) */
.cs-stage, #gacha .dr-scene, .yard { overflow: clip; }

/* v12 bills: the daily slip and the end-of-run slip share the plain aged paper and dark-brown ink */
#bill { --receipt-ink: #3b2416; }
#bill .receipt-content { color: #3b2416; background: #efe0bd url("assets/receipt-paper-v12.webp?v=7hao-20261114") center top / 100% auto repeat-y; }
#bill .bill-detail > summary { display: none; }
#bill .bill-detail { margin: 0; }
/* end of the run: summary first, details folded, buttons fixed below the scrolling slip */
#bill.final .receipt-top, #bill.final .receipt-total, #bill.final .rent-scene { display: none; }
#bill .end-head { display: grid; gap: 1.4cqw; margin: 0 0 2cqw; text-align: center; }
#bill .end-head[hidden] { display: none; }
#bill .end-day { margin: 0; font-size: max(12px, 3.2cqw); color: #6a4a2e; letter-spacing: .06em; }
#bill .end-head h2 { margin: 0; font: 900 max(22px, 6.6cqw) / 1.1 "Songti SC", "Noto Serif CJK SC", SimSun, serif; color: #7a2410; letter-spacing: .12em; }
#bill .end-why { margin: 0; font-size: max(13px, 3.6cqw); color: #3b2416; }
#bill .end-nums { display: grid; grid-template-columns: 1fr 1fr; margin: 1cqw 0 0; border-block: 1px dashed #9a7a5288; }
#bill .end-nums > div { display: grid; justify-items: center; padding: 1.6cqw 0; }
#bill .end-nums > div + div { border-left: 1px dashed #9a7a5288; }
#bill .end-nums small { font-size: max(11px, 3cqw); color: #6a4a2e; }
#bill .end-nums b { font: 900 max(20px, 6cqw) / 1.15 var(--num); color: #9a3418; white-space: nowrap; }
#bill .end-score b { font-size: max(28px, 8.6cqw); color: #3b2416; }
#bill .end-say { display: flex; align-items: center; gap: 2cqw; margin: 0; text-align: left; font-size: max(12px, 3.2cqw); color: #4a3020; font-style: italic; }
#bill .end-face { flex: none; width: max(30px, 8.5cqw); aspect-ratio: 1; border-radius: 50%; border: 1px solid #9a7a52; background-color: #2a1e16; background-repeat: no-repeat; }
#bill .end-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; margin: 0; }
#bill .end-stats > div { display: grid; justify-items: center; padding: 1cqw .4cqw; border-radius: 2px; background: #3b241610; }
#bill .end-stats dt { font-size: max(10px, 2.7cqw); color: #6a4a2e; }
#bill .end-stats dd { margin: 0; font-weight: 800; font-size: max(13px, 3.6cqw); white-space: nowrap; }
#bill.final .bill-detail > summary { display: list-item; min-height: 44px; padding: 3cqw 0 0; font-size: max(13px, 3.4cqw); font-weight: 700; color: #6a4426; cursor: pointer; }
#bill.final .bill-detail[open] > summary { margin-bottom: 1.4cqw; border-bottom: 1px solid #9a7a5266; }
#bill.final .tasks-line, #bill.final .unlock { font-size: max(11px, 2.8cqw); color: #7a6248; font-weight: 400; }
#bill .receipt-actions { flex: none; position: relative; z-index: 2; }
/* the title bell art stays 11.5cqw even where the tap area is held at 44px */
.title-layers-ok .t-bell i { inset: 0 auto auto 0; width: 11.5cqw; }
/* the meat's tap area starts just under the logo; the hanging art stays exactly where it was */
.title-layers-ok .t-meat { top: calc(19.3% + 5px); height: calc(12% - 5px); }
.title-layers-ok .t-meat i { top: calc(-2% * 12 / 12 - 5px); }
/* with a pen card up the workbench is short: the clipboard keeps just the order line, nothing spills */
.yard-scene .yard-workbench, .yard-workbench .yard-order, .yard-workbench .yard-stock { overflow: clip; }
.yard-scene:has(> .pen-card:not([hidden])) .yard-order .yo-title,
.yard-scene:has(> .pen-card:not([hidden])) .yard-order small { display: none; }
.yard-scene:has(> .pen-card:not([hidden])) .yard-order b { font-size: max(11px, 3cqw); }
/* with results showing, the painted room keeps only the table strip so the 5x2 tray and the codex link fit 320x568 */
#gacha[data-has="10"] .dr-scene, #gacha[data-has="1"] .dr-scene { height: 32cqw; }
#gacha[data-has="10"] .dr-scene i, #gacha[data-has="1"] .dr-scene i { left: calc(50% - 15cqw); bottom: 13.8cqw; width: 30cqw; height: 20.13cqw; }

/* v12.1: the counter slip has one fixed height (the 40cqh it already reached with a full receipt), so
   the scene above never resizes between guests or an empty counter and the bell keeps one screen
   position; longer slips scroll inside .t-body while the actions stay pinned. */
.counter-scene > .cs-panel { height: 40cqh; max-height: 40cqh; box-sizing: border-box; }
/* the bell's tap area never shifts on press (its cap press is the feedback), so a finger resting on one
   spot always lands on it */
.cs-hot.cs-bell:active { transform: none; }

/* v12.2 maintenance */
/* codex cards sit on cream paper: the number and the 本季 tag need dark ink (were 2.3:1 and ~1.3:1) */
.codex-card .cc-no { color: #5e4628; }
.codex-card.season .cc-no::after { color: #1f6a34; font-weight: 700; }
/* the lock as a picture (the emoji is missing from many fonts) */
.lock-ic { display: inline-block; width: 1em; height: 1em; margin-right: .25em; vertical-align: -0.15em; background: url("assets/room-lock-v6.webp?v=7hao-20261114") center / contain no-repeat; }
/* the cold cabinet dialog: one framed cabinet (no second picture of an empty cabinet above it), then the
   upgrade and the feed shop right under it, 待领／摆设 last; all reachable on 320x568 */
#fridge-dlg .sheet { display: flex; flex-direction: column; gap: 1.6cqw; }
#fridge-dlg #fridge-sum { margin: 0; }
#fridge-dlg .fridge-interior { animation: fadein .25s ease-out both; }
#fridge-dlg .cabinet .cab-slot { min-height: 40px; }
#fridge-dlg .cab-upgrade { margin: 0; grid-template-columns: minmax(0, 1fr) auto; }
#fridge-dlg .cab-upgrade p { font-size: max(12px, 3.2cqw); line-height: 1.3; }
#fridge-dlg .cab-upgrade p small { display: block; color: #b3d7d4; font-size: max(11px, 2.8cqw); }
#fridge-dlg .cab-shop { margin: 0; flex-wrap: nowrap; }
#fridge-dlg .cab-shop p { width: auto; flex: 1 1 auto; font-size: max(11px, 2.8cqw); }
#fridge-dlg .cab-shop button { flex: none; }
#fridge-dlg .pending { margin: 0; }
#fridge-dlg .slot-detail[hidden] { display: none; }
/* the longer "周日应缴" label stays compact so the left HUD column (day, goal) keeps its room */
.hud .rent small { font-size: max(10px, 2.4cqw); letter-spacing: -.02em; }
/* the order clip's title sits inside the paper (it was nudged up under the clip and got cut) */
.yard-workbench .yo-title { margin-top: 0; }
/* up to 460px the actions take the HUD's second row (as at 390), so day, goal, cash and the
   Sunday rent each keep their room in the first row */
@container (max-width: 460px) {
  .hud { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "av when cash rent menu" "acts acts acts acts acts"; row-gap: .6cqw; }
  .hud .acts { display: flex; align-items: center; gap: 1.6cqw; }
  .hud .acts .pips { margin: 0; }
}
/* Sunday renewal: next week's target sits in the first screen */
#bill .bill-nextweek { display: grid; gap: .4cqw; margin: 0 0 2cqw; padding: 1.6cqw 2cqw; border: 1px dashed #9a7a52; border-radius: 2px; text-align: center; }
#bill .bill-nextweek[hidden] { display: none; }
#bill .bill-nextweek b { font-size: max(15px, 4.4cqw); color: #7a2410; }
#bill .bill-nextweek span { font-size: max(12px, 3.1cqw); color: #4a3020; }
/* drugs' round avatar: same picture logic everywhere; 46px in the settlement and the weekly rent note */
.hud .rent .face.drugs { background-repeat: no-repeat; border-radius: 50%; }
#bill .end-face, #bill .rent-scene .face { width: 46px; height: 46px; border-radius: 50%; background-repeat: no-repeat; }
/* the desk layer is masked at the plate's real table edge (set by placeBell from the same mapping) */
.cs-desk { clip-path: inset(var(--desk-y, 64%) 0 0 0); }

/* v12.2 counter: the big cold cabinet stands behind the counter on the right; its door is the only way
   into the fridge and its shelves show the real boxes. Its foot goes behind the desk edge. */
.cs-cab { position: absolute; z-index: 1; right: 2%; top: calc(var(--desk-y, 69%) - 60%); height: 66%; aspect-ratio: 524 / 561; min-width: 44px; padding: 0; border: 0;
  background: url("assets/coldcab-glass-v12.webp?v=7hao-20261114") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 4px #000a); }
.cs-cab:active { transform: none; filter: drop-shadow(0 2px 4px #000a) brightness(1.08); }
.cs-cab-glass { position: absolute; inset: 11% 11% 11% 12%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 30% 25% 30%; gap: 0 6%; align-content: start; }
.cs-cab-glass .ys-box { position: relative; min-width: 0; min-height: 0; }
.cs-cab-glass .ys-box .meat-ic { position: absolute; left: 50%; bottom: 1px; width: auto; height: calc(100% - 2px); max-width: 100%; transform: translateX(-50%); }
.cs-cab-glass .ys-box .mk { position: absolute; right: 0; bottom: 0; width: 34%; aspect-ratio: 1; background-size: contain; }
/* things guests leave on the table: tap to take them (support money to the till, a gift to the fridge) */
.cs-desk-items { position: absolute; z-index: 4; left: 56%; top: calc(var(--desk-y, 69%) + 1px); display: flex; gap: 4px; }
.desk-item { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.desk-item i { display: block; width: 32px; height: 32px; background: center / contain no-repeat; filter: drop-shadow(0 3px 2px #000a); animation: desk-drop .35s ease-out both; }
.desk-item.coin i { width: 30px; height: 22px; border-radius: 50% / 40%; background: radial-gradient(ellipse at 50% 30%, #fff1a6, #e6a72a 55%, #8a5a12); box-shadow: 0 4px 0 #a06a18, 0 8px 0 #c48a28, 0 9px 3px #0008; }
@keyframes desk-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .desk-item i { animation: none; } }

/* v12.2 yard order: a small paper slip (status in a few words, never cut), the slip itself opens the full order */
.yard-scene .yard-workbench { position: relative; overflow: visible; }
.yard-workbench .yard-order { display: grid; align-content: start; gap: .4cqw; min-height: 44px; padding: 1.4cqw 2.2cqw 2.4cqw; margin: 0; border: 0; border-image: none; border-radius: 0;
  background: #efe0bd url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover no-repeat; color: #3b2416; text-align: left; overflow: clip;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 90% 100%, 80% calc(100% - 5px), 70% 100%, 60% calc(100% - 5px), 50% 100%, 40% calc(100% - 5px), 30% 100%, 20% calc(100% - 5px), 10% 100%, 0 calc(100% - 5px));
  filter: drop-shadow(0 2px 2px #0008); }
.yard-workbench .yard-order:active { transform: none; }
.yard-workbench .yo-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0; color: #7a4a22; font-size: max(11px, 2.9cqw); font-weight: 800; letter-spacing: .06em; }
.yard-workbench .yo-more { font-style: normal; font-weight: 600; color: #9a3418; letter-spacing: 0; }
.yard-workbench .yard-order b { font-size: max(14px, 3.9cqw); line-height: 1.2; color: #3b2416; white-space: nowrap; }
.yard-workbench .yard-order small { font-size: 12px; color: #5a3a22; white-space: nowrap; }
.yard-workbench .yard-order[data-mood="ready"] b { color: #1f6a34; }
.yard-workbench .yard-order[data-mood="short"] b { color: #9a3418; }
.yard-order-more { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(100% + 4px); padding: 2cqw 3cqw; border: 1px solid #a88656; border-radius: 2px;
  background: #efe0bd url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover; color: #3b2416; box-shadow: 0 4px 10px #000b; }
.yard-order-more[hidden] { display: none; }
.yard-order-more p { margin: 0 0 1cqw; font-size: 13px; line-height: 1.4; }
.yard-order-more p:last-child { margin: 0; }
.yard-scene:has(> .pen-card:not([hidden])) .yard-order .yo-title { display: flex; }
.yard-scene:has(> .pen-card:not([hidden])) .yard-order small { display: none; }

/* v12.2 draw: two states. draw = the room takes the free height and the crate (sized in JS) is the
   main picture; results = the batch on its own (one big card or 5x2) with the way back to the crate. */
#gacha .dr { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; height: 100%; min-height: 0; }
#gacha .dr-scene, #gacha[data-has="10"] .dr-scene, #gacha[data-has="1"] .dr-scene { height: auto; min-height: 56cqw; background-size: cover; background-position: center bottom; }
#gacha[data-view="results"] .dr { grid-template-rows: auto minmax(0, 1fr); }
#gacha[data-view="results"] .dr-scene, #gacha[data-view="results"] .gacha-actions, #gacha[data-view="results"] .dr-strip, #gacha[data-view="results"] .gacha-note { display: none; }
#gacha[data-view="results"] .results { overflow-y: auto; min-height: 0; padding-top: 2cqw; }
#gacha[data-view="draw"] .results { display: none; }
#gacha .results-actions { grid-template-columns: 1fr 1fr; }
#gacha .results-actions .back-crate { background: #3a2416; }
#gacha .results-actions [hidden] + .view-card, #gacha .results-actions .view-card:only-of-type { grid-column: auto; }
#gacha .results-grid[data-n="1"] { grid-template-columns: minmax(0, 60cqw); }
#gacha .results-grid[data-n="1"] .rcard .rc-view { aspect-ratio: 1 / 1; }
#gacha .dr-strip button[data-pane="results"]:disabled { display: none; }

/* v12.2 pen card: a compact paper slip. Name 15px, notes and prices 12-13px, short labels, every
   action at least 44px; the meat grade (source) line and the offcut second-tap stay as they are. */
.yard-scene > .pen-card { background: #efe0bd url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover no-repeat; border: 1px solid #a88656; border-top: 1px solid #a88656; border-radius: 2px;
  box-shadow: 0 2px 4px #0008; color: #3b2416; }
.yard-scene > .pen-card .pc-row1 b { font-size: 15px; color: #3b2416; }
.yard-scene > .pen-card .pc-stage { font-size: 12px; }
.yard-scene > .pen-card .pc-row2 > div { background: #3b241614; }
.yard-scene > .pen-card .pc-row2 dt { font-size: 12px; color: #6a4a2e; }
.yard-scene > .pen-card .pc-row2 dd { font-size: 13px; color: #3b2416; }
.yard-scene > .pen-card .pc-grow { font-size: 12px; color: #4a3020; }
.yard-scene > .pen-card .plank { min-height: 44px; border-width: 5px 9px; }
.yard-scene > .pen-card .plank span { font-size: 15px; }
.yard-scene > .pen-card .plank small { font-size: 12px; }

/* ===== v13 art ===== */
/* counter: the redrawn counter with the big cold cabinet; the desk layer is the same picture below its table edge */
.cs-bg, .cs-desk { background: #1c2a22 url("assets/counter-fridge-v13.webp?v=7hao-20261114") 50% var(--cbg-pos, 59%) / cover no-repeat; }
.cs-cab { background: none; filter: none; min-height: 44px; }
.cs-cab:focus-visible { outline: 2px solid #ffd68f; outline-offset: -2px; }
.cs-cab-glass { position: absolute; inset: auto; grid-template-rows: 33% 30% 37%; gap: 0 4%; padding: 0 4%; }
/* the opened cold cabinet: one picture (fridge-open-v13) with the real, tappable slots standing on its
   shelves (cavity x 18-66%; shelf lines at 38 / 51 / 64 / 80%); upgrade and feed shop pinned below */
#fridge-dlg .fridge-interior { position: relative; width: 100%; aspect-ratio: 679 / 940; padding: 0; border: 0; border-image: none; background: url("assets/fridge-open-v13.webp?v=7hao-20261114") center top / 100% auto no-repeat; animation: fadein .25s ease-out both; }
#fridge-dlg .fridge-interior .cab-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#fridge-dlg #cabinet { position: absolute; left: 18.5%; width: 47%; top: 25.5%; height: 38.5%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc(100% / 3); gap: 0 2%; margin: 0; }
#fridge-dlg #cabinet-supply { position: absolute; left: 18.5%; width: 47%; top: 66.5%; height: 13.5%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 2%; margin: 0; }
#fridge-dlg .fridge-interior .cab-slot { min-height: 0; min-width: 0; padding: 0 0 2px; border: 1px dashed #bfe6ee55; border-radius: 3px; background: #0d2a3018; display: grid; align-content: end; justify-items: center; }
#fridge-dlg .fridge-interior .cab-slot.full { border-style: solid; border-color: #bfe6ee88; background: #0d2a3030; }
#fridge-dlg .fridge-interior .cab-slot .si { width: 86%; aspect-ratio: 200 / 180; height: auto; }
#fridge-dlg .fridge-interior .cab-slot small { font-size: 10px; line-height: 1.1; color: #eaf7f5; text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#fridge-dlg .fridge-interior .cab-slot em { position: absolute; top: 1px; right: 2px; font-size: 10px; color: #ffe2a6; text-shadow: 0 1px 1px #000; font-style: normal; }
#fridge-dlg .fridge-interior .cab-slot { position: relative; }
#fridge-dlg .cab-actions { position: sticky; bottom: -1px; z-index: 3; display: grid; gap: 1.6cqw; margin: 0 calc(-1 * max(9px, 2.8cqw)) calc(-1 * max(9px, 2.8cqw)); padding: 2cqw max(9px, 2.8cqw) max(9px, 2.8cqw); background: linear-gradient(#162427ee, #101b1d); border-top: 1px solid #4c6c6c; }
#fridge-dlg #cabinet[data-count="12"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#fridge-dlg #cabinet-supply[data-count="8"] { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; }
.desk-item.coin i { width: 38px; height: 30px; border-radius: 0; box-shadow: none; background: url("assets/gift-coins-v13.webp?v=7hao-20261114") center bottom / contain no-repeat; }
.desk-item.gift i { width: 22px; height: 40px; background: url("assets/gift-vial-v13.webp?v=7hao-20261114") center bottom / contain no-repeat; }
.cs-desk-items { top: calc(var(--desk-y, 69%) - 18px); }
/* draw: before drawing the room is the v13 hero picture (the sealed crate is painted in it); while a
   batch opens the hero steps aside for the separate closed/open crate on the plain counter, then the
   results take the screen. Buttons: teal / red plates with the ticket icons, DOM text. */
#gacha[data-view="draw"]:not(.opening) .dr-scene { background: #24160f url("assets/draw-hero-v13.webp?v=7hao-20261114") center 58% / cover no-repeat; }
#gacha[data-view="draw"]:not(.opening) .dr-scene i { display: none; }
#gacha.opening .dr-scene { background: #2a1912 url("assets/draw-counter-painted-v12.webp?v=7hao-20261114") center bottom / cover no-repeat; }
#gacha .gacha-actions button { position: relative; grid-template-columns: auto 1fr; grid-template-areas: "ic t" "ic s"; align-items: center; column-gap: 1.4cqw; min-height: 56px; padding: 1.4cqw 3cqw;
  border: 0 solid transparent; border-width: 10px 16px; border-radius: 0; box-shadow: none; background: none; }
#gacha .gacha-actions .g1 { border-image: url("assets/button-teal-v13.webp?v=7hao-20261114") 34 44 fill / 10px 16px stretch; }
#gacha .gacha-actions .g10 { border-image: url("assets/button-red-v13.webp?v=7hao-20261114") 34 44 fill / 10px 16px stretch; }
#gacha .gacha-actions .g-ic { grid-area: ic; width: max(30px, 9cqw); aspect-ratio: 1; background: url("assets/draw-one-v13.webp?v=7hao-20261114") center / contain no-repeat; }
#gacha .gacha-actions .g10 .g-ic { background-image: url("assets/draw-ten-v13.webp?v=7hao-20261114"); }
#gacha .gacha-actions span { grid-area: t; }
#gacha .gacha-actions small { grid-area: s; margin: 0; }
#gacha .rcard b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* yard order: a short ticket row (order-ticket-v13), not a clipboard: icon, who · state, › opens it */
.yard-workbench .yard-order { align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic note more" "sub sub sub"; align-items: center; column-gap: 1.4cqw; row-gap: 0;
  min-height: 46px; padding: 1.2cqw 3cqw; clip-path: none; filter: drop-shadow(0 2px 2px #0008); border: 0 solid transparent; border-width: 6px 10px;
  border-image: url("assets/order-ticket-v13.webp?v=7hao-20261114") 30 40 fill / 6px 10px stretch; background: none; }
.yard-workbench .yo-ic { grid-area: ic; width: 24px; height: 18px; background: url("assets/order-ticket-v13.webp?v=7hao-20261114") center / contain no-repeat; filter: sepia(.4) saturate(1.4) hue-rotate(-12deg) brightness(.85); }
.yard-workbench .yard-order b { grid-area: note; font-size: max(13px, 3.5cqw); white-space: nowrap; overflow: visible; }
.yard-workbench .yo-more { grid-area: more; font-style: normal; font-weight: 800; color: #9a3418; font-size: 16px; }
.yard-workbench .yard-order small { grid-area: sub; font-size: 12px; white-space: nowrap; }
.yard-workbench .yard-order small:empty { display: none; }
.yard-workbench .yard-order[data-mood="short"] b { color: #9a3418; }
/* never cut: on a narrow column the ticket line wraps instead */
.yard-workbench .yard-order b { white-space: normal; line-height: 1.25; }
.yard-workbench .yard-order small { white-space: normal; }
/* pen card actions: v13 feed scoop, wash, pack crate icons beside short labels */
.yard-scene > .pen-card .plank { grid-template-columns: auto minmax(0, auto); grid-template-areas: "ic t" "ic s"; justify-content: center; column-gap: 1cqw; }
.yard-scene > .pen-card .plank span { grid-area: t; }
.yard-scene > .pen-card .plank small { grid-area: s; }
.yard-scene > .pen-card .plank .pk-ic { grid-area: ic; width: 26px; height: 26px; background: center / contain no-repeat; }
.yard-scene > .pen-card .plank[data-action="feed"] .pk-ic { background-image: url("assets/feed-v13.webp?v=7hao-20261114"); }
.yard-scene > .pen-card .plank[data-action="wash"] .pk-ic { background-image: url("assets/wash-v13.webp?v=7hao-20261114"); }
.yard-scene > .pen-card .plank[data-action="process"] .pk-ic { background-image: url("assets/pack-crate-v13.webp?v=7hao-20261114"); }
/* codex details open as a paper panel over the card grid and scroll on their own, so the page of
   cards keeps its size (their pictures no longer collapse) */
#codex .codex-detail { position: relative; }
#codex .cd-more[open] { max-height: none; overflow: visible; }
#codex .cd-more-body { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 1cqw); max-height: min(44cqh, 300px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2cqw 3cqw; border: 1px solid #a88656; border-radius: 2px; background: #f3e6c8; color: #3b2416; box-shadow: 0 4px 12px #000a; font-size: max(12px, 3.1cqw); line-height: 1.45; }
#codex .cd-more-body .cd-facts dt { color: #6a3a14; }
#codex .cd-more-body ul { margin: 1cqw 0 0; padding-left: 1.2em; }
/* slot rows end exactly on the picture's shelf lines (38 / 51 / 64%, and 80% for supplies) */
#fridge-dlg #cabinet, #fridge-dlg #cabinet-supply { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; box-sizing: border-box; }
#fridge-dlg #cabinet { grid-template-rows: 32.47% 33.77% 33.76%; grid-auto-rows: 0; }
#fridge-dlg .fridge-interior .cab-slot { aspect-ratio: auto; height: 100%; align-self: stretch; }

/* v13.1 pen card actions: one row of three; icon + short label on the first line, the note on a full-
   width second line (12px, never cut on a 320 screen); 44px targets */
.yard-scene > .pen-card .plank { grid-template-columns: auto auto; grid-template-areas: "ic t" "s s"; justify-content: center; align-content: center; column-gap: 4px; row-gap: 1px; border-width: 5px 6px; padding: 0 2px; }
.yard-scene > .pen-card .plank .pk-ic { width: 20px; height: 20px; }
.yard-scene > .pen-card .plank span { font-size: 15px; line-height: 1.1; }
.yard-scene > .pen-card .plank small { justify-self: center; max-width: none; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: visible; text-overflow: clip; letter-spacing: -.02em; }
/* draw results: the picture box is wider than any pig (cells are at most ~1.4:1), so a pig sized to
   its height always fits inside, keeps its proportions and never covers the name or rarity */
#gacha .rcard .rc-view { overflow: hidden; display: grid; place-items: center; }
#gacha .results-grid[data-n="1"] .rcard .rc-view { aspect-ratio: 16 / 10; width: 100%; }
#gacha .rcard .rc-view .breed-art { height: 100%; width: auto; max-width: 100%; }

/* ===== v14 polish ===== */
/* HUD goal: the bar is a plain button (tap = the detail); its line reads 房租差 / 已备齐房租 / 扣租后余 */
.hud .goal-bar { display: block; width: 100%; padding: 0; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.hud .goal-bar:focus-visible { outline: 2px solid #e2b25c; outline-offset: 1px; }
.hud .goal-bar:active { transform: none; }
.hud .goal-bar.neg span { color: #ffe1c8; }
.hud .goal-cap { white-space: nowrap; }

/* rewards (purple before): a warm ivory receipt slip; normal notices (blue / brown before): a dark-green
   old shop sign with worn brass. Grade and indicator colours are untouched. */
.toast { background: #1f2e26f2; border: 1px solid #9a7444; border-radius: 3px; color: #f1e3c2; box-shadow: inset 0 0 0 2px #14201a, 0 3px 8px #000a; }
.toast.unlock, #toast.toast.unlock { background: #f2e4c2 url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover; border: 1px solid #a88656; border-radius: 2px; color: #3b2416; box-shadow: 0 3px 8px #0009; }
.coach.notice { background: #1f2e26; border-color: #9a7444; color: #f1e3c2; }
.coach.notice.unlock { background: #f2e4c2; border-color: #a88656; color: #3b2416; }
.yard-scene .talk.notice .talk-bubble, .talk.notice .talk-bubble { background: #1f2e26; border: 1px solid #9a7444; border-radius: 3px; color: #f1e3c2; }
.talk.notice .talk-name { color: #e2c48a; }
.talk.notice.unlock .talk-bubble, .yard-scene .talk.notice.unlock .talk-bubble { background: #f2e4c2 url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover; border-color: #a88656; color: #3b2416; filter: none; box-shadow: 0 2px 6px #0008; }
.talk.notice.unlock .talk-name { color: #7a4a22; }
.talk.notice .talk-face, .talk.notice.unlock .talk-face { border-color: #9a7444; }
.unlock, #bill-unlock.unlock { background: #f2e4c2 url("assets/receipt-paper-v12.webp?v=7hao-20261114") center / cover; border: 1px solid #a88656; border-radius: 2px; color: #3b2416; font-weight: 700; animation: none; }

/* the tutorial arrow: a small aged-bronze arrow (about 21 x 23 px) resting just above the target's edge;
   it never takes a tap and never sits on the target's words; still under reduced motion */
.pointer { width: 21px; height: 23px; margin: 0; transform: translate(-50%, -100%); filter: drop-shadow(0 1px 1px #000c);
  background: linear-gradient(160deg, #f0c27a, #b07a34 48%, #6e4618); clip-path: polygon(34% 0, 66% 0, 66% 48%, 100% 48%, 50% 100%, 0 48%, 34% 48%);
  animation: poke-small 1.1s ease-in-out infinite; }
.pointer::before, .pointer::after { content: none; }
@keyframes poke-small { 50% { transform: translate(-50%, calc(-100% - 3px)); } }
@media (prefers-reduced-motion: reduce) { .pointer { animation: none !important; } }
/* coach highlights: restrained amber instead of mint */
.coach-target { box-shadow: 0 0 0 2px #d9a24a, 0 0 8px #d9a24a66 !important; }
.plank.suggest, .bubble-acts button.suggest { animation: glow-amber 1.4s ease-in-out infinite alternate; border-color: #d9a24a; }
@keyframes glow-amber { from { box-shadow: 0 0 0 1px #d9a24a66; } to { box-shadow: 0 0 0 2px #d9a24a, 0 0 8px #d9a24a55; } }
@keyframes ping { 50% { box-shadow: 0 0 0 2px #d9a24a, 0 0 8px #d9a24a77; } }
@media (prefers-reduced-motion: reduce) { .plank.suggest, .bubble-acts button.suggest { animation: none; box-shadow: 0 0 0 2px #d9a24a; } }
/* helper rings and chips (selection, picked slot, the use-item chip, focus): amber, not mint.
   Status colours that mean something (ready pens, grades, rarity) keep their colours. */
.codex-card[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a24a !important; }
#codex .codex-card[aria-pressed="true"] { outline: 0; border-color: #d9a24a; }
.cabinet .cab-slot.picked { box-shadow: 0 0 0 2px #d9a24a; }
.use-chip { border-color: #d9a24a !important; background: #1f2e26f0 !important; color: #f1e3c2 !important; animation: none !important; box-shadow: 0 0 0 1px #6e4618; }
.coach .portrait { border-color: #9a7444; }
.light-switch:focus-visible, .fader input:focus-visible { outline-color: #e2b25c; }
.hud .goal-cap { font-size: 11px; line-height: 1.15; }
/* a long goal line (4-digit cash) stays at a readable 11px and still fits a 320 HUD */
.hud .goal-bar #hud-goal.long { font-size: 11px; letter-spacing: -0.04em; }
/* the day / goal block is one button: no button chrome, same look as before */
.hud button.when { display: block; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hud button.when:active { transform: none; }
.hud button.when:focus-visible { outline: 2px solid #e2b25c; outline-offset: 2px; border-radius: 3px; }
.hud .goal-bar { display: block; }

/* ===== v14 art: reward receipt, hint plaque (stretchable frames), guide arrow ===== */
/* rewards: the ivory receipt plate; long lines wrap inside it, the brass edge stretches */
.toast.unlock, #toast.toast.unlock, .coach.notice.unlock, .unlock, #bill-unlock.unlock,
.talk.notice.unlock .talk-bubble, .yard-scene .talk.notice.unlock .talk-bubble {
  background: none; border: 0 solid transparent; border-width: 8px 10px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 3px #0009);
  border-image: url("assets/reward-receipt-v14.webp?v=7hao-20261114") 16 20 fill / 8px 10px stretch; color: #3b2416; }
/* ordinary notices: the dark-green plaque */
.toast:not(.unlock), .coach.notice:not(.unlock), .talk.notice:not(.unlock) .talk-bubble, .yard-scene .talk.notice:not(.unlock) .talk-bubble {
  background: none; border: 0 solid transparent; border-width: 9px 12px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 3px #0009);
  border-image: url("assets/hint-plaque-v14.webp?v=7hao-20261114") 18 24 fill / 9px 12px stretch; color: #f1e3c2; }
/* narrow screens: long notices wrap, never overflow the plate */
.toast { max-width: min(86cqw, calc(100% - 24px)); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.talk.notice .talk-text, .talk.notice .talk-bubble { overflow-wrap: anywhere; min-width: 0; }
/* the guide arrow picture, shown at about 21 x 23 */
.pointer { background: url("assets/guide-arrow-v14.webp?v=7hao-20261114") center / contain no-repeat; clip-path: none; filter: drop-shadow(0 1px 1px #000a); image-rendering: auto; }

/* v14.1 notices: one narrow strip (about 270px on a 320 screen), 12-13px, two lines at most; taps pass
   through. At the counter it lies exactly over the reserved speech row. */
.toast { width: min(270px, 86cqw); max-width: min(270px, 86cqw); min-height: 0; padding: 4px 10px; font-size: 13px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; pointer-events: none; box-sizing: border-box; }
.toast.at-say { width: min(270px, calc(100% - 24px)); }
@media (max-width: 340px) { .toast { font-size: 12px; } }
/* over the speech row the strip only fades (no slide), so it sits exactly on the row */
.toast.at-say { transform: translateX(-50%); animation-name: toast-fade; }
@keyframes toast-fade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* the bill's .unlock margin must not move the reward strip */
.toast.unlock { margin: 0; }
/* while a notice strip lies over the speech row, the row's words hide (the row keeps its size) */
.counter-scene > .cs-say.under-toast > * { visibility: hidden; }

/* ===== v15 HUD: two rows, every item its own cell =====
   row 1: avatar, date (+ festival tag), cash, actions, menu
   row 2: Sunday rent, shortfall / balance, the week's goal
   Nothing is cut with an ellipsis: a cell may break onto a second line instead (the date between week
   and weekday, the goal caption between its two words), and never drops 币 or the weekday. */
.hud.v15 { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto;
  grid-template-areas: "av day cash acts menu" "row2 row2 row2 row2 row2"; column-gap: 6px; row-gap: 3px; padding-block: 2px; align-items: center; }
.hud.v15 .avatar { grid-area: av; width: 38px; height: 38px; }
.hud.v15 .menu-btn { grid-area: menu; width: 40px; height: 40px; }
.hud.v15 .day { grid-area: day; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 1px 5px; line-height: 1.15; }
.hud.v15 #hud-day { display: block; overflow: visible; white-space: normal; text-overflow: clip; font-size: 13px; color: var(--brass-hi); }
.hud.v15 #hud-day > span { white-space: nowrap; }
.hud.v15 .fest { flex: none; padding: 0 4px; border: 1px solid #c9893a; border-radius: 2px; background: #5a2a10; color: #ffd890; font-size: 11px; line-height: 15px; white-space: nowrap; }
.hud.v15 .fest[hidden] { display: none; }
.hud.v15 .cash { grid-area: cash; padding: 3px 7px; gap: 4px; }
.hud.v15 .cash b { font-size: 16px; min-width: 0; white-space: nowrap; }
/* the coin is one image slot: drop a picture into --coin-img later, the drawn coin stays as the fallback */
.hud.v15 .coin { flex: none; width: 14px; height: 14px; background: var(--coin-img, radial-gradient(circle at 35% 35%, #fff2a0, #e0a020 60%, #8a5a10)); background-size: contain; background-repeat: no-repeat; background-position: center; }
.hud.v15 .acts { grid-area: acts; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; row-gap: 2px; }
.hud.v15 .acts small { font-size: 12px; white-space: nowrap; }
.hud.v15 .acts b { font-size: 16px; white-space: nowrap; }
.hud.v15 .acts .pips { grid-column: 1 / -1; display: flex; gap: 3px; margin: 0; }
.hud.v15 .acts .pips i { width: 6px; height: 6px; }
.hud.v15 .hud-row2 { grid-area: row2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: stretch; min-width: 0;
  padding-top: 3px; border-top: 1px solid #7a5a3266; }
.hud.v15 .rent { grid-area: auto; min-height: 34px; min-width: 0; padding: 1px 8px 1px 2px; gap: 4px; border-radius: 17px; }
.hud.v15 .rent .face.drugs { display: block; width: 28px; height: 28px; }
.hud.v15 .rent span { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.hud.v15 .rent small { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.hud.v15 .rent b { font-size: 16px; white-space: nowrap; }
.hud.v15 button.when { grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 34px; }
.hud.v15 .goal-bar { margin: 0; height: auto; min-height: 22px; display: flex; align-items: center; justify-content: center; padding: 1px 6px; }
.hud.v15 .goal-bar #hud-goal, .hud.v15 .goal-bar #hud-goal.long { font-size: 12px; line-height: 1.2; letter-spacing: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.hud.v15 .goal-cap { margin: 0; font-size: 11px; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; max-width: 5.5em; text-align: right; }
@container (max-width: 340px) {
  .hud.v15 { column-gap: 4px; }
  .hud.v15 .avatar { width: 34px; height: 34px; }
  .hud.v15 .menu-btn { width: 38px; height: 38px; }
  .hud.v15 .cash { padding: 3px 5px; }
  .hud.v15 .rent .face.drugs { width: 24px; height: 24px; }
}

/* ===== v15 draw: one stage =====
   top: title, tickets, close. Stage: the empty room (draw-stage-v15) with the transparent crate layer
   on its rug; placeCrate() maps both, closed and open share one footprint, only the crate layer shakes.
   Tray: 结果 / 待领 / 概率 tabs over one fixed-height area (pig watermark when empty, the small single
   card, or the 2 x 5 ten-pull), so nothing jumps. Bottom: the two draw buttons and 买券. */
#gacha.v15 { --tray-cw: calc((100cqw - 54px) / 5); --tray-ch: calc(var(--tray-cw) * .72 + 30px); --tray-gh: calc(var(--tray-ch) * 2 + 5px); overflow: hidden; }
#gacha.v15 .dr { grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; height: 100%; min-height: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#gacha.v15 .dr-top { padding-block: 4px; }
#gacha.v15 .dr-scene, #gacha.v15[data-has="10"] .dr-scene, #gacha.v15[data-has="1"] .dr-scene { height: auto; min-height: 150px;
  background: #1a120c url("assets/draw-stage-v15.webp?v=7hao-20261114") center 30% / cover no-repeat; image-rendering: auto; }
#gacha.v15 .dr-scene i { display: block; background: url("assets/draw-crate-closed-v15.webp?v=7hao-20261114") center / 100% 100% no-repeat; filter: drop-shadow(0 4px 3px #0008); image-rendering: auto; transform-origin: 50% 96.5%; }
#gacha.v15 .dr-scene .crate-open { background-image: url("assets/draw-crate-open-v15.webp?v=7hao-20261114"); visibility: hidden; animation: none; }
#gacha.v15 .dr-scene[data-state="open"] .crate { visibility: hidden; animation: none; }
#gacha.v15 .dr-scene[data-state="open"] .crate-open { visibility: visible; }
#gacha.v15 .dr-scene[data-state="shake"] .crate { animation: dr15-shake .8s ease-in-out both; }
@keyframes dr15-shake { 0%, 100% { transform: none; } 15% { transform: rotate(-2deg); } 30% { transform: rotate(2deg) translateY(-2px); } 45% { transform: rotate(-2.5deg); } 60% { transform: rotate(2.5deg) translateY(-3px); } 75% { transform: rotate(-1.2deg); } 90% { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { #gacha.v15 .dr-scene i { animation: none !important; } }
/* the tray */
#gacha.v15 .dr-tray { display: grid; grid-template-rows: auto auto; gap: 4px; margin: 0 10px; padding: 4px 6px 6px; border: 2px solid #8a5f2c; border-radius: 3px;
  background: #24160f linear-gradient(#0000, #0003); box-shadow: inset 0 0 0 2px #120a07, inset 0 6px 10px #0006; }
#gacha.v15 .dr-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
#gacha.v15 .dr-tabs button { min-height: 36px; min-width: 44px; padding: 0 8px; border: 1px solid #7a5530; border-radius: 3px; background: #2a1a12; color: #f0dcb4; font-size: 12px; white-space: nowrap; }
#gacha.v15 .dr-tabs button[aria-pressed="true"] { border-color: #d29a45; background: #3d2a1a; color: #fff1d0; }
#gacha.v15 .dr-tabs button:disabled { opacity: .5; }
#gacha.v15 .dr-tabs #gacha-room { flex: 1 1 auto; min-width: 0; text-align: right; color: #d9c29a; font-size: 11px; line-height: 1.2; }
#gacha.v15 [data-gacha-pane] { margin: 0; height: calc(var(--tray-gh) + 30px); min-height: 0; }
#gacha.v15 [data-gacha-pane][hidden] { display: none; }
#gacha.v15 .waiting, #gacha.v15 .rates { overflow-y: auto; overscroll-behavior: contain; }
#gacha.v15 .results { display: grid; grid-template-rows: 30px minmax(0, 1fr); overflow: hidden; }
#gacha.v15 .results-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
#gacha.v15 .results-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; color: #ffe2a8; white-space: nowrap; }
#gacha.v15 .results-head h3::before, #gacha.v15 .results-head h3::after { content: none; }
#gacha.v15 .results-head button { flex: none; min-height: 28px; padding: 0 10px; border: 1px solid #d29a45; border-radius: 3px; background: #2f5a4e; color: #fff1d0; font-size: 12px; font-weight: 800; }
#gacha.v15 .results-head button[hidden] { display: none; }
#gacha.v15 .results .gacha-note { display: none; } /* the 一键全开 button says it */
/* empty: the faint pig watermark */
#gacha.v15 .results-grid[data-n="0"] { height: var(--tray-gh); background: url("assets/pig-watermark-v15.webp?v=7hao-20261114") center / auto min(60%, 70px) no-repeat; opacity: .13; }
/* ten: a fixed 2 x 5 grid */
#gacha.v15 .results-grid[data-n="10"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: var(--tray-ch); gap: 5px; height: var(--tray-gh); }
#gacha.v15 .results-grid [role="listitem"] { display: grid; min-width: 0; min-height: 0; }
#gacha.v15 .rcard { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-content: stretch; gap: 1px; width: 100%; height: 100%; min-height: 0; padding: 3px 2px 3px; overflow: hidden; }
#gacha.v15 .rcard .rc-view { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
#gacha.v15 .rcard .rc-view .breed-art { height: 100%; width: auto; max-width: 100%; }
#gacha.v15 .results-grid[data-n="10"] .rcard b { max-width: 100%; font-size: 10px; line-height: 1.2; }
#gacha.v15 .results-grid[data-n="10"] .rcard .rc-r { font-size: 10px; line-height: 1.2; }
#gacha.v15 .results-grid[data-n="10"] .rcard .rc-new, #gacha.v15 .results-grid[data-n="10"] .rcard .rc-to { display: none; }
#gacha.v15 .results-grid[data-n="10"] .rcard.back .rc-view { background: url("assets/draw-crate-closed-v15.webp?v=7hao-20261114") center / contain no-repeat; opacity: .9; }
/* single: one small card with the whole pig, its name, rarity and where it went */
#gacha.v15 .results-grid[data-n="1"] { display: grid; grid-template-columns: min(190px, 56cqw); grid-template-rows: var(--tray-gh); justify-content: center; height: var(--tray-gh); }
#gacha.v15 .results-grid[data-n="1"] .rcard { grid-template-rows: minmax(0, 1fr) auto auto auto; padding: 4px 6px; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-view { aspect-ratio: auto; }
#gacha.v15 .results-grid[data-n="1"] .rcard b { font-size: 14px; line-height: 1.2; max-width: 100%; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-r { font-size: 12px; letter-spacing: .04em; line-height: 1.2; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-new { display: none; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-to { font-size: 12px; line-height: 1.2; }
#gacha.v15 .waiting h3 { margin: 2px 0 4px; font-size: 12px; }
#gacha.v15 .waiting li { font-size: 12px; }
#gacha.v15 .waiting li button { min-height: 40px; }
#gacha.v15 .rates p { font-size: 12px; margin: 2px 0 6px; }
/* the bottom bar: both draw buttons and the daily ticket */
#gacha.v15 .gacha-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin: 0 10px; }
#gacha.v15 .gacha-actions button { min-height: 54px; padding: 4px 8px; column-gap: 6px; }
#gacha.v15 .gacha-actions .g-ic { width: 28px; }
#gacha.v15 .gacha-actions span { font-size: 16px; white-space: nowrap; }
#gacha.v15 .gacha-actions small { font-size: 11px; white-space: nowrap; }
#gacha.v15 .gacha-actions .buy { display: grid; grid-template-columns: auto; grid-template-areas: none; justify-items: center; align-content: center; min-width: 52px; padding: 2px 6px; border: 1px solid #7a5530; border-width: 1px; border-image: none; border-radius: 3px; background: #2a1a12; color: #f0dcb4; font-size: 13px; font-weight: 700; }
#gacha.v15 .gacha-actions .buy small { color: #d9c29a; font-size: 11px; }
@container (max-width: 359.9px) {
  #gacha.v15 .gacha-actions .g-ic { display: none; }
  #gacha.v15 .gacha-actions button { grid-template-columns: 1fr; grid-template-areas: "t" "s"; justify-items: center; padding: 4px 4px; }
}
#gacha.v15 .gacha-actions .buy small { grid-area: auto; }
#gacha.v15 .gacha-actions .g1, #gacha.v15 .gacha-actions .g10 { background: none; }
#gacha.v15 .results-head button, #gacha.v15 .results-head .view-card { display: inline-flex; align-items: center; width: auto; margin: 0; min-height: 28px; border-radius: 3px; border: 1px solid #d29a45; font-size: 12px; }
#gacha.v15 .rcard { background: #3a2416; }
#gacha.v15 .rcard.back { background: #24160f; }
#gacha.v15 .rcard[data-rarity="SR"] { background: #2a1e0e; }

/* ===== v15 title unlock: four frames on the plate's own lock, one centre =====
   01 idle sits over the painted lock; a tap plays 02 insert, 03 turn, 04 release in place (no key sliding
   in from the side). The frames swap on the same centre with a slight centred press; reduced motion
   shows the release frame at once. The other three frames load with the page (the ::after layers). */
.start-sign .t-lock { position: absolute; left: 16.6%; top: 50%; height: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: url("assets/title-lock-01-v15.webp?v=7hao-20261114") center / contain no-repeat; }
.start-sign .t-lock::after { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0;
  background: url("assets/title-lock-02-v15.webp?v=7hao-20261114"), url("assets/title-lock-03-v15.webp?v=7hao-20261114"), url("assets/title-lock-04-v15.webp?v=7hao-20261114"); background-size: 1px 1px; }
.start-sign.turning .t-lock { animation: lock15 .5s linear both; }
@keyframes lock15 {
  0% { background-image: url("assets/title-lock-02-v15.webp?v=7hao-20261114"); transform: translate(-50%, -50%) scale(1); animation-timing-function: step-end; }
  32% { background-image: url("assets/title-lock-03-v15.webp?v=7hao-20261114"); transform: translate(-50%, -50%) scale(1.05); animation-timing-function: step-end; }
  66% { background-image: url("assets/title-lock-04-v15.webp?v=7hao-20261114"); transform: translate(-50%, -50%) scale(1); }
  100% { background-image: url("assets/title-lock-04-v15.webp?v=7hao-20261114"); transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .start-sign.turning .t-lock { animation: none; background-image: url("assets/title-lock-04-v15.webp?v=7hao-20261114"); } }
/* v15 HUD coin picture (16-19px; the drawn coin stays as the fallback underneath) */
.hud.v15 .coin { --coin-img: url("assets/hud-coin-v15.webp?v=7hao-20261114"); width: 17px; height: 17px; border-radius: 0; box-shadow: none; background-color: transparent; }
/* acts as in the HUD design: 行动 6/6 on one line; the pips stay hidden (the number says it) */
.hud.v15 .acts .pips { display: none; }
.hud.v15 .acts { grid-template-columns: auto auto; }

/* ===== v15 counter: nobody at the desk = a blank paper with a faint pig (no repeated empty text);
   the bell's own label says what is next (按铃开张 / 按铃 · 余N位 / 客人走完 / 打烊) ===== */
#cs-panel.blank { position: relative; }
#cs-panel.blank .t-head, #cs-panel.blank .t-state:empty { visibility: hidden; }
#cs-panel.blank::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(120px, 34%); aspect-ratio: 224 / 137; transform: translate(-50%, -50%);
  background: url("assets/pig-watermark-v15.webp?v=7hao-20261114") center / contain no-repeat; opacity: .12; pointer-events: none; }
.counter-scene > .cs-say.idle { visibility: visible; border-color: transparent; background: transparent; box-shadow: none; grid-template-columns: minmax(0, 1fr); align-items: center; }
.counter-scene > .cs-say.idle b { display: none; }
.counter-scene > .cs-say.idle span { display: block; font-size: 12px; font-weight: 400; color: #e9d3a8a6; white-space: nowrap; text-align: left; -webkit-line-clamp: unset; }
/* goal caption: breaks between its two words only */
.hud.v15 .goal-cap > span { white-space: nowrap; }
/* a lower two-row HUD: 36px first row, 30px second row */
.hud.v15 { row-gap: 2px; padding-block: 0; }
.hud.v15 .avatar { width: 36px; height: 36px; }
.hud.v15 .menu-btn { width: 38px; height: 38px; }
.hud.v15 .rent, .hud.v15 button.when { min-height: 30px; }
.hud.v15 .rent .face.drugs { width: 26px; height: 26px; }
.hud.v15 .hud-row2 { padding-top: 2px; }
.hud.v15 .goal-bar { min-height: 20px; }

/* ===== v15 pen feedback: short, faint, 12px, over the pig's back (not on the name or the buttons) ===== */
.yard .floater { font-size: 12px; font-weight: 700; letter-spacing: .02em; -webkit-text-stroke: 2.5px #1a0e06cc; opacity: .82; animation: float15 1.3s ease-out both; }
.yard .floater.big, .yard .floater.small { font-size: 12px; }
.yard .floater.good { color: #b8e8b0; } .yard .floater.gold { color: #f2d48a; } .yard .floater.bad { color: #f0a090; }
@keyframes float15 { 0% { transform: translate(-50%, -30%); opacity: 0; } 15% { transform: translate(-50%, -50%); opacity: .82; } 75% { opacity: .7; } 100% { transform: translate(-50%, -150%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yard .floater { animation: none; } }

/* ===== v15 fridge: the cabinet scrolls in its own area; the upgrade / shop bar is a separate footer
   below it (nothing scrolls under it, nothing shows through). Every slot gives the picture and its
   label their own rows; the order number and the breed face sit in the picture row's corners. On the
   smallest cells (level 3 supplies) only the picture and the count stay; a tap always opens the detail. */
#fridge-dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
#fridge-dlg .sheet { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: inherit; overflow: hidden; gap: 6px; }
#fridge-dlg .sheet-head { flex: none; }
#fridge-dlg .fridge-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
#fridge-dlg .fridge-scroll > * { flex: none; }
#fridge-dlg .cab-actions { position: static; flex: none; margin: 0 calc(-1 * max(9px, 2.8cqw)) calc(-1 * max(9px, 2.8cqw)); box-shadow: 0 -4px 8px #0006; }
#fridge-dlg .fridge-interior .cab-slot { container-type: size; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; justify-items: center; padding: 1px 1px 2px; overflow: hidden; }
#fridge-dlg .fridge-interior .cab-slot .si { position: relative; inset: auto; grid-row: 1; width: 100%; height: 100%; aspect-ratio: auto; background-position: center; background-size: contain; }
#fridge-dlg .fridge-interior .cab-slot small { position: static; grid-row: 2; max-width: 100%; overflow: hidden; text-overflow: clip; }
#fridge-dlg .fridge-interior .cab-slot em { top: 1px; right: 2px; line-height: 1; }
#fridge-dlg .fridge-interior .cab-slot .mk { position: absolute; left: 2px; top: 1px; bottom: auto; width: 32%; max-width: 22px; aspect-ratio: 1; height: auto; background-size: contain; background-position: center; }
#fridge-dlg .fridge-interior .cab-slot.held::after { top: auto; bottom: 14px; left: 1px; font-size: 9px; }
/* tiny cells: picture + count only */
@container (max-height: 40px) {
  #fridge-dlg .fridge-interior .cab-slot small { display: none; }
}
@container (max-width: 36px) {
  #fridge-dlg .fridge-interior .cab-slot .mk { display: none; }
}
/* the picture keeps the box art's 200 x 180 shape inside its row (the slot is a size container) */
#fridge-dlg .fridge-interior .cab-slot .si { width: min(100cqw - 2px, (100cqh - 15px) * 200 / 180); height: auto; aspect-ratio: 200 / 180; align-self: center; }
@container (max-height: 40px) { #fridge-dlg .fridge-interior .cab-slot .si { width: min(100cqw - 2px, (100cqh - 3px) * 200 / 180); } }
@container (max-width: 31px) {
  #fridge-dlg .fridge-interior .cab-slot small { display: none; }
  #fridge-dlg .fridge-interior .cab-slot .si { width: min(100cqw - 2px, (100cqh - 3px) * 200 / 180); }
}

/* ===== v15.1 draw cards: no container-unit track, no squash =====
   single: one px/% column, never under 140px, centred; ten: 5 equal columns of the tray, 2 rows.
   The picture box is a size container and the pig fits it at its own shape (--ar from breedArt):
   width = min(box width, box height x ratio). The reveal is a fade, not a sideways flip. */
#gacha.v15 .results-grid[data-n="1"] { display: grid; grid-template-columns: minmax(140px, min(190px, 72%)); justify-content: center; width: 100%; }
#gacha.v15 .results-grid[data-n="1"] > [role="listitem"] { width: 100%; min-width: 140px; }
#gacha.v15 .results-grid[data-n="10"] { width: 100%; }
#gacha.v15 .results-grid > [role="listitem"] > .rcard { width: 100%; min-width: 0; }
#gacha.v15 .rcard .rc-view { container-type: size; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
#gacha.v15 .rcard .rc-view .breed-art { width: min(100cqw, 100cqh * var(--ar, 1.3)); height: auto; max-width: none; max-height: 100%; }
#gacha.v15 .rcard.flip { animation: card-in15 .18s ease-out both; }
@keyframes card-in15 { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #gacha.v15 .rcard.flip { animation: none; } }
/* ten: names are short breed names; cut them never, shrink them a step instead */
#gacha.v15 .results-grid[data-n="10"] .rcard b { overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 10px; letter-spacing: -.04em; }
/* HUD row 2 keeps 34px tap targets */
.hud.v15 .rent, .hud.v15 button.when { min-height: 34px; }
/* single: the pig takes the height; name on one line, rarity · destination side by side under it */
#gacha.v15 .results-grid[data-n="1"] .rcard { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 0; padding: 4px 6px 5px; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-view { grid-column: 1 / -1; }
#gacha.v15 .results-grid[data-n="1"] .rcard b { grid-column: 1 / -1; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-r { grid-column: 1; justify-self: end; }
#gacha.v15 .results-grid[data-n="1"] .rcard .rc-to { grid-column: 2; justify-self: start; white-space: nowrap; }
/* compact two-row HUD: thinner frame, 34px rows (row 2 keeps 34px targets) */
.hud.v15 { border-width: 4px 10px; row-gap: 1px; }
.hud.v15 .avatar { width: 32px; height: 32px; }
.hud.v15 .menu-btn { width: 36px; height: 34px; }
.hud.v15 .hud-row2 { padding-top: 1px; }
/* 300-330px: the rent cell drops drugs' face (the label says it), so 房租差 X 币 stays on one line;
   the yard order ticket loses its icon and tightens so its line fits above the tray */
@container (max-width: 330px) {
  .hud.v15 .rent .face.drugs { display: none; }
  .hud.v15 .rent { padding-left: 8px; }
  .yard-workbench .yard-order { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "note more" "sub sub"; min-height: 40px; padding: 2px 4px; column-gap: 2px; }
  .yard-workbench .yo-ic { display: none; }
  .yard-workbench .yard-order b { font-size: 12px; line-height: 1.2; }
}
/* the cash pill's change pulse stays inside its own cell (the old 1.18 scale reached the date and the actions) */
.hud.v15 .cash.pulse { animation: pulse15 .5s; }
@keyframes pulse15 { 40% { transform: scale(1.05); } }
.hud.v15 .avatar { width: 34px; height: 34px; }

/* ===== v16 猪只档案 (pen card header): face | name + stage / breed · rarity · traits | weight, clean
   Two short lines beside the face instead of one long row, so the breed and its rule traits show with
   only a few px more height; the stats stack on the right. The file line is a button (tap = all traits). */
.yard-scene > .pen-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name r2" "face file r2" "hint hint hint" "acts acts acts"; column-gap: 6px; row-gap: 3px; }
.yard-scene > .pen-card .pc-row1 { display: contents; }
.yard-scene > .pen-card .pc-face { grid-area: face; align-self: center; width: 34px; height: 30px; }
.yard-scene > .pen-card #pc-name { grid-area: name; justify-self: start; align-self: end; max-width: 100%; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.yard-scene > .pen-card .pc-stage { grid-area: name; justify-self: end; align-self: end; padding: 0 5px; border-radius: 2px; background: #2f5a4e; color: #f6ead0; font-size: 11px; line-height: 16px; font-style: normal; white-space: nowrap; }
.yard-scene > .pen-card #pc-name { padding-right: 3.6em; }
.yard-scene > .pen-card .pc-row1 small#pc-breed { display: none; }
.yard-scene > .pen-card .pc-file { grid-area: file; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 18px; margin: 0; padding: 0; border: 0; background: none; color: #4a3020; font: inherit; text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer; }
.yard-scene > .pen-card .pc-file[hidden] { display: none; }
.yard-scene > .pen-card .pc-file:active { transform: none; }
.yard-scene > .pen-card .pc-file:focus-visible { outline: 2px solid #b07a32; outline-offset: 1px; }
.yard-scene > .pen-card .pc-file .pf-breed { flex: none; font-size: 12px; font-weight: 700; color: #3b2416; }
.yard-scene > .pen-card .pc-file i { flex: none; font-style: normal; font-size: 11px; line-height: 15px; padding: 0 4px; border-radius: 2px; }
.yard-scene > .pen-card .pc-file i[hidden] { display: none; }
.yard-scene > .pen-card .pc-file .pf-rar { color: #fff7e2; background: #7a6a58; }
.yard-scene > .pen-card .pc-file .pf-rar.r-R { background: #3e6a9a; } .yard-scene > .pen-card .pc-file .pf-rar.r-SR { background: #a0701a; } .yard-scene > .pen-card .pc-file .pf-rar.r-X { background: #7a4a8e; }
.yard-scene > .pen-card .pc-file .pf-tr { color: #4a3020; background: #3b24161a; border: 1px solid #a8865666; line-height: 13px; }
.yard-scene > .pen-card .pc-row2 { grid-area: r2; flex-direction: column; gap: 2px; align-self: center; }
.yard-scene > .pen-card .pc-row2 > div { display: flex; justify-content: space-between; gap: 4px; padding: 0 5px; line-height: 15px; }
.yard-scene > .pen-card .pc-row2 dd { margin: 0; white-space: nowrap; }
/* empty pen: name and stage only */
.yard-scene > .pen-card[data-state="empty"] { grid-template-areas: "face name name" "hint hint hint" "acts acts acts"; }
/* tight header: 15 + 16px lines, small gaps; on narrow screens the order ticket under an open card is 34px */
.yard-scene > .pen-card { row-gap: 1px; padding-top: 3px; padding-bottom: 4px; }
.yard-scene > .pen-card #pc-name { font-size: 14px; line-height: 15px; }
.yard-scene > .pen-card .pc-file { min-height: 16px; }
.yard-scene > .pen-card .pc-acts { margin-top: 2px; }
.yard-scene > .pen-card .pc-face { height: 28px; }
@container (max-width: 330px) {
  .yard-scene:has(> .pen-card:not([hidden])) .yard-order { min-height: 34px; padding-block: 0; }
  .yard-scene > .pen-card .pc-file .pf-breed { font-size: 11px; }
  .yard-scene > .pen-card .pc-file { gap: 3px; }
}
.yard-scene > .pen-card { margin-top: 3px; padding-bottom: 3px; }
.yard-scene > .pen-card .pc-acts { margin-top: 1px; }
@container (max-width: 330px) {
  .yard-scene > .pen-card { column-gap: 4px; padding-left: 5px; padding-right: 5px; }
  .yard-scene > .pen-card .pc-row2 > div { padding: 0 2px; gap: 3px; }
  .yard-scene > .pen-card .pc-file i { padding: 0 3px; }
}
/* 猪只档案 plate (Codex v16): the blank cream sheet with its brass edge, stretched as a nine-slice */
.yard-scene > .pen-card { background: none; border: 0 solid transparent; border-width: 5px 6px; border-radius: 0; box-shadow: 0 2px 4px #0008;
  border-image: url("assets/pig-passport-plate-v16.webp?v=7hao-20261114") 18 20 fill / 5px 6px stretch; }
.yard-scene > .pen-card { border-width: 4px 6px; padding-top: 0; padding-bottom: 0; border-image-width: 4px 6px; }

/* ===== v16 fridge: one screen, no scrollbar =====
   header (title, one-line summary, close) / the painted cabinet at its own shape in the height that is
   left (placeFridge) — or the 待领 panel in the same box, paged / a fixed one-line slot row (tap = full
   text) / one 待领 row with its count and a 详情 toggle / the footer: 扩容 and both specialty feeds.
   Narrow screens keep every control and drop only the decorative helper lines (their facts are what
   the buttons say when tapped). */
#fridge-dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
#fridge-dlg .sheet { display: flex; flex-direction: column; gap: 5px; flex: none; min-height: 0; overflow: hidden; padding: 6px 8px 0; }
#fridge-dlg .sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; margin: 0; }
#fridge-dlg .sheet-head #fridge-sum { margin: 0; font-size: 11px; line-height: 1.25; color: #cfe3dc; }
#fridge-dlg .sheet-head .x { min-width: 40px; min-height: 40px; }
#fridge-dlg .fridge-body { position: relative; flex: none; display: grid; place-items: center; min-height: 0; overflow: hidden; }
#fridge-dlg .fridge-body > .fridge-interior { grid-area: 1 / 1; width: auto; max-width: 100%; aspect-ratio: auto; margin: 0; }
#fridge-dlg .fridge-body > .fridge-interior[hidden] { display: none; }
#fridge-dlg .pending-panel { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px; margin: 0; padding: 4px 6px; border: 1px solid #4c6c6c; border-radius: 4px; background: #142224; overflow: hidden; }
#fridge-dlg .pending-panel[hidden] { display: none; }
#fridge-dlg .pp-head { display: flex; align-items: center; gap: 6px; }
#fridge-dlg .pp-head b { flex: 1 1 auto; font-size: 13px; color: #f4f8f2; }
#fridge-dlg .pp-head small { font-size: 12px; color: #b3d7d4; }
#fridge-dlg .pp-head button { min-width: 40px; min-height: 36px; border: 1px solid #978365; border-radius: 3px; background: #263d3c; color: #ffebc5; }
#fridge-dlg .pp-head button[hidden] { display: none; }
#fridge-dlg .pending-panel .shelf-list { margin: 0; padding: 0; list-style: none; }
#fridge-dlg .pending-panel .shelf-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 2px 0; border-bottom: 1px solid #4c6c6c66; font-size: 13px; }
#fridge-dlg .pending-panel .shelf-list span { display: grid; min-width: 0; }
#fridge-dlg .pending-panel .shelf-list small { color: #b3d7d4; font-size: 11px; }
#fridge-dlg .pending-panel .shelf-list button { min-height: 40px; min-width: 60px; flex: none; }
#fridge-dlg .pending-panel .prod i { display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: middle; background: center / contain no-repeat; }
/* the slot row: always there, one line + one small line, actions on the right */
#fridge-dlg .slot-detail, #fridge-dlg .slot-detail[hidden] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 2px 6px; flex: none; }
#fridge-dlg .slot-detail .sd-icon { width: 34px; height: 30px; }
#fridge-dlg .slot-detail[data-empty="true"] .sd-icon { display: none; }
#fridge-dlg .slot-detail[data-empty="true"] { grid-template-columns: minmax(0, 1fr); }
#fridge-dlg .slot-detail .sd-text { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#fridge-dlg .slot-detail .sd-text:active { transform: none; }
#fridge-dlg .slot-detail .sd-text b { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fridge-dlg .slot-detail .sd-text small { font-size: 11px; line-height: 1.25; color: #b3d7d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fridge-dlg .slot-detail .sd-use { display: none; }
#fridge-dlg .slot-detail .sd-actions { display: flex; gap: 4px; margin: 0; }
#fridge-dlg .slot-detail .sd-actions button { min-height: 40px; padding: 0 8px; font-size: 12px; }
#fridge-dlg .slot-detail .sd-actions button[hidden] { display: none; }
/* the 待领 row */
#fridge-dlg .pending { display: flex; align-items: center; gap: 6px; flex: none; min-height: 36px; margin: 0; padding: 0 6px; }
#fridge-dlg .pending .cab-h { flex: 1 1 auto; margin: 0; font-size: 12px; white-space: nowrap; }
#fridge-dlg .pending .cab-h small { font-size: 11px; }
#fridge-dlg .pending .pending-toggle { flex: none; min-height: 36px; min-width: 52px; border: 1px solid #978365; border-radius: 3px; background: #263d3c; color: #ffebc5; font-size: 12px; }
#fridge-dlg .pending .pending-toggle[hidden] { display: none; }
/* footer: not sticky, outside any scroll */
#fridge-dlg .cab-actions { position: static; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 6px; flex: none; margin: 0 -8px; padding: 6px 8px; box-shadow: none; }
#fridge-dlg .cab-upgrade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; margin: 0; }
#fridge-dlg .cab-upgrade p { margin: 0; font-size: 11px; line-height: 1.25; }
#fridge-dlg .cab-upgrade p small { display: block; font-size: 10.5px; color: #b3d7d4; }
#fridge-dlg .cab-upgrade button, #fridge-dlg .cab-shop button { display: grid; place-content: center; min-height: 44px; padding: 2px 6px; font-size: 12px; line-height: 1.15; }
#fridge-dlg .cab-upgrade button small, #fridge-dlg .cab-shop button small { display: block; font-size: 11px; }
#fridge-dlg .cab-shop { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 4px; margin: 0; }
#fridge-dlg .cab-shop p { margin: 0; font-size: 11px; line-height: 1.2; max-width: 4.5em; }
@container (max-width: 400px) {
  /* compact: three buttons in one row; the helper lines become the buttons' own tap messages */
  #fridge-dlg .cab-actions { grid-template-columns: 1fr 2fr; }
  #fridge-dlg .cab-upgrade { grid-template-columns: 1fr; }
  #fridge-dlg .cab-upgrade p, #fridge-dlg .cab-shop p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #fridge-dlg .cab-shop { grid-template-columns: 1fr 1fr; }
}
/* a notice inside a dialog sits over the dialog's lower part */
.toast.in-dialog { position: absolute; bottom: 64px; left: 50%; max-width: 90%; }
@container (max-width: 400px) {
  #fridge-dlg .cab-upgrade:has(> button[hidden]) p { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
#fridge-dlg .slot-detail { grid-template-rows: 44px; height: 48px; overflow: hidden; }
#fridge-dlg .slot-detail > * { grid-row: 1; }
#fridge-dlg .slot-detail .sd-icon { grid-column: 1; } #fridge-dlg .slot-detail .sd-text { grid-column: 2; } #fridge-dlg .slot-detail .sd-actions { grid-column: 3; flex-wrap: nowrap; }
#fridge-dlg .slot-detail[data-empty="true"] .sd-text { grid-column: 1; }
#fridge-dlg .slot-detail .sd-text { align-self: stretch; align-content: center; min-height: 44px; }
/* in a dialog the notice lies over the top of the picture (cabinet / draw stage), under the header,
   never on a row of buttons; it wraps in full (no clamp) */
.toast.in-dialog { top: 54px; bottom: auto; width: min(92%, 300px); max-width: 92%; display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; max-height: none; white-space: normal; }
/* the file line ends in a › (tap = all traits); the first trait gives way to its short form before it ever shrinks */
.yard-scene > .pen-card .pc-file .pf-more { flex: none; margin-left: auto; padding: 0 2px; font-size: 14px; line-height: 15px; font-weight: 800; color: #9a3418; background: none; border: 0; }
.yard-scene > .pen-card .pc-file .pf-tr.squeezed { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yard-scene > .pen-card .pc-file .pf-breed { min-width: 0; overflow: hidden; text-overflow: clip; }
/* the file's full text opens in the actions' place; tap the file line or 收起 to go back */
.yard-scene > .pen-card .pc-detail { grid-area: acts; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 45px; margin-top: 1px; padding: 2px 4px; border-top: 1px dashed #a8865688; }
.yard-scene > .pen-card .pc-detail[hidden] { display: none; }
.yard-scene > .pen-card .pc-detail p { margin: 0; font-size: 12px; line-height: 1.3; color: #3b2416; }
.yard-scene > .pen-card .pc-detail-x { min-height: 40px; min-width: 44px; padding: 0 6px; border: 1px solid #a88656; border-radius: 3px; background: #efe0bd; color: #6a3a18; font-size: 12px; }
.yard-scene > .pen-card[data-file="open"] .pc-acts { display: none; }
#fridge-dlg .slot-info { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 6px 8px; border: 1px solid #4c6c6c; border-radius: 4px; background: #142224; overflow: hidden; }
#fridge-dlg .slot-info[hidden] { display: none; }
#fridge-dlg .slot-info .pp-head b { white-space: normal; }
#fridge-dlg .slot-info p { margin: 0; font-size: 13px; line-height: 1.45; color: #e8f2ee; }
#fridge-dlg .slot-info .si-qty { color: #ffe2a6; }
/* the whole detail block is the close target: the text gets the card's full width (three lines at 300) */
.yard-scene > .pen-card .pc-detail { display: block; width: 100%; margin: 1px 0 0; padding: 2px 4px; border: 0; border-top: 1px dashed #a8865688; border-radius: 0; background: none; color: #3b2416; font: inherit; text-align: left; cursor: pointer; }
.yard-scene > .pen-card .pc-detail[hidden] { display: none; }
.yard-scene > .pen-card .pc-detail:active { transform: none; }
.yard-scene > .pen-card .pc-detail #pc-detail-text { font-size: 12px; line-height: 1.25; }
.yard-scene > .pen-card .pc-detail .pc-detail-x { display: inline; min-height: 0; margin-left: 4px; padding: 0; border: 0; background: none; color: #9a3418; font-size: 11px; font-weight: 700; white-space: nowrap; }
@container (max-width: 330px) { .yard-scene > .pen-card .pc-detail #pc-detail-text { font-size: 11.5px; } }
.yard-scene > .pen-card .pc-detail { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; min-height: 45px; padding: 1px 4px 0; }
.yard-scene > .pen-card .pc-detail #pc-detail-text { display: inline; }
.yard-scene > .pen-card .pc-detail { box-sizing: border-box; height: 45px; min-height: 0; margin-top: 1px; overflow: hidden; }
.yard-scene > .pen-card .pc-detail { display: block; align-items: initial; }
@container (max-width: 330px) { .yard-scene > .pen-card .pc-detail #pc-detail-text { font-size: 11px; line-height: 1.24; } }
.yard-scene > .pen-card .pc-detail { font-size: 12px; line-height: 15px; }
@container (max-width: 330px) { .yard-scene > .pen-card .pc-detail { font-size: 11px; line-height: 14px; } }
.yard-scene > .pen-card .pc-detail #pc-detail-text, .yard-scene > .pen-card .pc-detail .pc-detail-x { line-height: inherit; }

/* ===== v16 classic-card guests at the counter ===== */
.cs-panel .card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cs-panel .card-acts button { flex: 1 1 auto; min-height: 40px; min-width: 64px; padding: 2px 8px; border: 1px solid #a88656; border-radius: 3px; background: #f6ead0; color: #3b2416; font-size: 13px; font-weight: 700; }
.cs-panel .card-acts button[aria-pressed="true"] { background: #2f5a4e; color: #f6ead0; border-color: #2f5a4e; }
.cs-panel .card-acts button[aria-disabled="true"]:not([aria-pressed="true"]) { opacity: .55; }
.cs-panel .card-acts .card-form { background: #efe0bd; border-style: dashed; }
.cs-panel .card-row small, .cs-panel .card-quiz small { display: block; }
/* 抽抽's own badge on the blank paper (her avatar), the watermark stays */
.cs-panel .self-badge { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 2px solid #a88656; border-radius: 50%;
  background: #2a1e16 var(--self-face, none) center / cover no-repeat; box-shadow: 0 1px 3px #0006; }
.cs-panel .self-badge .sb-face { display: none; }
/* 爱睡觉's lamp cord: the counter dims and comes back once */
#cs-stage.blink { animation: cs-blink .9s steps(2, jump-none) 1; }
@keyframes cs-blink { 0%, 100% { filter: none; } 50% { filter: brightness(.35); } }
@media (prefers-reduced-motion: reduce) { #cs-stage.blink { animation: none; } }
/* guest actions use the slip's own enabled button (green receipt stamp); the chosen answer gets a gold
   edge; done buttons grey out like every other done button; the form toggle is the plain brass one */
.cs-panel .card-acts button.ok { background: linear-gradient(#3e7a5a, #24503a); color: #fff6dc; border: 1px solid #1a3a2a; }
.cs-panel .card-acts button.ok[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #e2b25c; filter: none; opacity: 1; }
.cs-panel .card-acts .card-form { color: #fff6dc; background: linear-gradient(#a06a2a, #6a4214); border: 1px solid #3a2408; border-style: solid; }

/* ===== V17 猪只登记卡 (approved image 2) =====
   left ~24%: the pig in a thin-ruled photo frame, breed and rarity as its caption; right: name (large),
   rarity star, green stage pill / a rule / three columns: 体重 · 洁净 · boxed meat grade with its box
   count / a rule / 特点 row (tap = full text) with the 畜牧登记 seal in its own corner; the 44px actions
   sit right under the card's lower edge. Everything comes from the rules. */
.yard-scene > .pen-card.passport { grid-template-columns: 24% minmax(0, 1fr); grid-template-areas: "photo r1" "photo r2" "photo file" "hint hint" "acts acts";
  column-gap: 8px; row-gap: 0; position: relative; }
.yard-scene > .pen-card.passport .pc-photo { grid-area: photo; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 1px;
  margin: 3px 0; padding: 3px 2px 2px; border: 1px solid #8a6a4a; border-radius: 4px; box-shadow: inset 0 0 0 2px #f6ead2, inset 0 0 0 3px #8a6a4a55; background: #f3e3bf; min-height: 0; overflow: hidden; }
.yard-scene > .pen-card.passport .pc-face { grid-area: auto; min-height: 0; max-height: none; align-self: center; background-repeat: no-repeat; }
.yard-scene > .pen-card.passport .pc-caption { display: grid; justify-items: center; line-height: 1.1; color: #5a3a20; font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 100%; }
.yard-scene > .pen-card.passport .pc-caption span + span { font-weight: 400; font-size: 10.5px; color: #7a5a3a; }
.yard-scene > .pen-card.passport .pc-row1 { grid-area: r1; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 0 2px; border-bottom: 1px solid #8a6a4a66; }
.yard-scene > .pen-card.passport #pc-name { grid-area: auto; padding: 0; font-size: 17px; line-height: 20px; font-weight: 900; color: #2e1a0e; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; flex: 0 1 auto; }
.yard-scene > .pen-card.passport .pc-star { flex: none; font-style: normal; font-size: 13px; line-height: 1; color: #b88a3a; text-shadow: 0 1px 0 #fff8; }
.yard-scene > .pen-card.passport .pc-star[hidden] { display: none; }
.yard-scene > .pen-card.passport .pc-star.r-R { color: #3e6a9a; } .yard-scene > .pen-card.passport .pc-star.r-SR { color: #c88a1a; } .yard-scene > .pen-card.passport .pc-star.r-X { color: #8a4aa0; }
.yard-scene > .pen-card.passport .pc-stage { grid-area: auto; flex: none; justify-self: auto; align-self: center; padding: 0 9px; border-radius: 10px; background: #24503a; color: #f6ead0; font-size: 12px; line-height: 19px; font-weight: 800; }
.yard-scene > .pen-card.passport .pc-row1 small#pc-breed { display: none; }
.yard-scene > .pen-card.passport .pc-row2 { grid-area: r2; display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 0; align-items: stretch; flex-direction: row; margin: 0; padding: 2px 0; border-bottom: 1px solid #8a6a4a66; }
.yard-scene > .pen-card.passport .pc-row2[hidden] { display: none; }
.yard-scene > .pen-card.passport .pc-col { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: start; align-content: center; column-gap: 3px; padding: 0 4px; background: none; border-left: 1px solid #8a6a4a55; min-width: 0; }
.yard-scene > .pen-card.passport .pc-col:first-child { border-left: 0; padding-left: 0; }
.yard-scene > .pen-card.passport .pc-col dt { font-size: 11px; line-height: 17px; color: #6a4a2e; white-space: nowrap; }
.yard-scene > .pen-card.passport .pc-col dd { margin: 0; font-size: 15px; line-height: 17px; font-weight: 900; color: #2e1a0e; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.yard-scene > .pen-card.passport .pc-sub { grid-column: 1 / -1; font-size: 11px; line-height: 13px; color: #7a5a3a; white-space: nowrap; }
.yard-scene > .pen-card.passport .pc-meat { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; align-self: center; margin-left: 4px; padding: 0; border: 1px solid #6a4a2e; border-radius: 4px; overflow: hidden; }
.yard-scene > .pen-card.passport .pc-meat dt { width: 100%; text-align: center; background: #6a5a48; color: #fbf1dc; font-size: 12px; line-height: 15px; font-weight: 800; }
.yard-scene > .pen-card.passport .pc-meat[data-g="prime"] dt { background: #7a4a8e; } .yard-scene > .pen-card.passport .pc-meat[data-g="select"] dt { background: #2f6a54; } .yard-scene > .pen-card.passport .pc-meat[data-g="std"] dt { background: #8a6a3a; }
.yard-scene > .pen-card.passport .pc-meat dd { font-size: 12px; line-height: 15px; font-weight: 800; }
.yard-scene > .pen-card.passport .pc-file { grid-area: file; display: flex; align-items: center; gap: 4px; min-height: 18px; padding: 1px 46px 1px 0; overflow: hidden; }
.yard-scene > .pen-card.passport .pc-file .pf-label { flex: none; font-size: 12px; font-weight: 800; color: #3b2416; }
.yard-scene > .pen-card.passport .pc-file .pf-tr { padding: 0; border: 0; background: none; font-size: 12px; line-height: 15px; color: #3b2416; }
.yard-scene > .pen-card.passport .pc-file .pf-tr::before { content: "· "; color: #8a6a4a; }
.yard-scene > .pen-card.passport .pc-file .pf-more { margin-left: 2px; }
.yard-scene > .pen-card.passport .pc-seal { position: absolute; right: 4px; bottom: 49px; z-index: 0; padding: 0 3px; border: 1.5px solid #b03a2a; border-radius: 3px; color: #b03a2a; font-style: normal; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .05em;
  transform: rotate(-8deg); opacity: .5; pointer-events: none; white-space: nowrap; }
.yard-scene > .pen-card.passport .pc-grow { grid-area: hint; }
.yard-scene > .pen-card.passport .pc-acts { grid-area: acts; margin-top: 3px; }
.yard-scene > .pen-card.passport .pc-detail { grid-area: acts; margin-top: 3px; }
/* empty pen: the photo frame says 空栏; name (栏号) and the buy plank */
.yard-scene > .pen-card.passport[data-state="empty"] { grid-template-areas: "photo r1" "photo hint" "acts acts"; }
.yard-scene > .pen-card.passport[data-state="empty"] .pc-file, .yard-scene > .pen-card.passport[data-state="empty"] .pc-seal { display: none; }
.yard-scene > .pen-card.passport[data-state="empty"] .pc-grow { display: block; }
@container (max-width: 330px) {
  .yard-scene > .pen-card.passport { column-gap: 5px; grid-template-columns: 22% minmax(0, 1fr); }
  .yard-scene > .pen-card.passport #pc-name { font-size: 16px; }
  .yard-scene > .pen-card.passport .pc-col { padding: 0 2px; column-gap: 2px; }
  .yard-scene > .pen-card.passport .pc-col dd { font-size: 13px; }
  .yard-scene > .pen-card.passport .pc-col dt { font-size: 11px; }
  .yard-scene > .pen-card.passport .pc-file { padding-right: 40px; }
  .yard-scene > .pen-card.passport .pc-seal { font-size: 9px; padding: 0 2px; }
}
.yard-scene > .pen-card.passport .pc-row1 { height: 24px; box-sizing: border-box; padding: 2px 0 1px; }
.yard-scene > .pen-card.passport .pc-row2 { height: 34px; box-sizing: border-box; padding: 1px 0; }
.yard-scene > .pen-card.passport .pc-col dt, .yard-scene > .pen-card.passport .pc-col dd { line-height: 16px; }
.yard-scene > .pen-card.passport .pc-sub { line-height: 13px; }
.yard-scene > .pen-card.passport .pc-meat dt, .yard-scene > .pen-card.passport .pc-meat dd { line-height: 14px; }
.yard-scene > .pen-card.passport .pc-file { height: 19px; min-height: 0; box-sizing: border-box; }
.yard-scene > .pen-card.passport .pc-photo { margin: 2px 0 1px; }
.yard-scene > .pen-card.passport .pc-seal { bottom: 50px; }
/* the photo: the pig fits the frame at its own shape (sprite crop + --ar from breedArt) */
.yard-scene > .pen-card.passport .pc-photo { grid-template-rows: minmax(0, 1fr) auto; }
.yard-scene > .pen-card.passport .pc-photo .pc-face { border: 0; border-radius: 0; background-color: transparent; }
/* the seal lives in the 特点 row's reserved right end (its own grid cell), never over the columns above */
.yard-scene > .pen-card.passport .pc-seal { position: relative; grid-area: file; justify-self: end; align-self: center; right: auto; bottom: auto; margin-right: 1px; transform: rotate(-5deg); font-size: 9.5px; line-height: 12px; }
.yard-scene > .pen-card.passport .pc-file { padding-right: 54px; }
@container (max-width: 330px) { .yard-scene > .pen-card.passport .pc-file { padding-right: 50px; } }

/* ===== V18 urgent-order receipt: a colour hierarchy on the parchment =====
   Only a few things carry colour, all dark inks with a label or weight beside them:
   goods / grade = neutral brown badge; need and stock apart, stock teal when enough and restrained red
   (with 还差 N) when short; price bold warm rust, per-box and deposit small and muted; deadline and
   penalty dark red with their own labels; bonus tickets muted green; the relationship row indigo. */
.counter-scene > .cs-panel .t-fields .tk-goods { display: inline-block; padding: 0 5px; border: 1px solid #8a6a4a; border-radius: 3px; background: #ead9b4; color: #4a2e18; font-weight: 800; line-height: 1.35; }
.counter-scene > .cs-panel .t-fields .tk-row-qty dd { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.counter-scene > .cs-panel .t-fields .tk-need { font-weight: 800; color: #3b2416; }
.counter-scene > .cs-panel .t-fields .tk-stock { font-weight: 700; }
.counter-scene > .cs-panel .t-fields .tk-stock.ok { color: #1d6457; }
.counter-scene > .cs-panel .t-fields .tk-stock.short { color: #a3352a; }
.counter-scene > .cs-panel .t-fields .tk-row-pay dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.counter-scene > .cs-panel .t-fields .tk-row-pay dd b.tk-price { color: #8a2c0e; font-size: 1.35em; font-weight: 900; letter-spacing: .01em; }
.counter-scene > .cs-panel .t-fields .tk-sub { color: #7a6250; font-size: .88em; font-weight: 400; }
.counter-scene > .cs-panel .t-fields .tk-bonus { color: #3f6a3a; }
.counter-scene > .cs-panel .t-fields .tk-row-due dd { display: flex; flex-wrap: wrap; gap: 0 10px; }
.counter-scene > .cs-panel .t-fields .tk-due { color: #7a1c12; font-weight: 800; }
.counter-scene > .cs-panel .t-fields .tk-penalty { color: #7a1c12; font-weight: 400; }
/* the relationship line: its own compact indigo line */
.counter-scene > .cs-panel .story-row { background: #e3e4ee99; border: 1px solid #5a6488; border-radius: 4px; color: #2e3a6a; padding: 2px 6px; }
.counter-scene > .cs-panel .story-row small { color: #4a5680; }
.counter-scene > .cs-panel .story-row button { min-height: 36px; }

/* ===== V19 HUD: the six action pips are back (old green = left, dark = used), under 行动 n/6 ===== */
.hud.v15 .acts .pips { display: flex; grid-column: 1 / -1; gap: 3px; margin: 0; }
.hud.v15 .acts .pips i { width: 6px; height: 6px; border-radius: 50%; background: #3a3020; box-shadow: inset 0 0 0 1px #6a5030; }
.hud.v15 .acts .pips i.on { background: radial-gradient(circle at 35% 35%, #c8ffd8, #3ac070); box-shadow: 0 0 4px #3ac07088; }
.hud.v15 .acts { row-gap: 1px; align-content: center; }
.hud.v15 .acts b, .hud.v15 .acts small { line-height: 1.1; }
/* V19 阿花's help: a small pill on the name line; 帮喂 / 帮洗 / 算了 take the actions' place */
.yard-scene > .pen-card.passport .pc-helper { flex: none; margin-left: auto; min-height: 20px; padding: 0 7px; border: 1px solid #8a6a4a; border-radius: 10px; background: #f3e3bf; color: #4a2e18; font-size: 11px; line-height: 18px; font-weight: 800; }
.yard-scene > .pen-card.passport .pc-helper[hidden] { display: none; }
.yard-scene > .pen-card.passport .pc-help { grid-area: acts; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: inherit; margin-top: 3px; }
.yard-scene > .pen-card.passport .pc-help[hidden] { display: none; }
.yard-scene > .pen-card.passport[data-help="open"] .pc-acts { display: none; }
.yard-scene > .pen-card.passport .pc-help .plank { min-height: 44px; }
.yard-scene > .pen-card.passport .pc-help .plank span { font-size: 13px; }
.yard-scene > .pen-card.passport .pc-help .plank small { font-size: 11px; }

/* ===== V19 夜市排行榜: two tabs, a brass podium (2nd / 1st / 3rd), then a compact wooden list =====
   The main figure is large; rank and shop owner are clear; the other figures sit small at the lower right.
   Fewer than three entries: the podium has only those steps (no empty frames). */
#board .board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 4px; }
#board .board-tabs button { min-height: 40px; border: 1px solid #8a6a3a; border-radius: 3px; background: #2a1a10; color: #e8d6b0; font-size: 14px; font-weight: 800; }
#board .board-tabs button[aria-selected="true"] { background: linear-gradient(#a06a2a, #6a4214); color: #fff6dc; border-color: #d29a45; box-shadow: inset 0 1px 0 #ffffff33; }
#board #board-hint { margin: 0 0 6px; }
#board .podium { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; margin: 4px 0 8px; }
#board .podium:empty { display: none; }
#board .podium[data-n="1"] { grid-auto-columns: minmax(0, 60%); justify-content: center; }
#board .podium[data-n="2"] { grid-auto-columns: minmax(0, 45%); justify-content: center; }
#board .podium > div { position: relative; display: grid; grid-template-rows: auto auto auto auto; justify-items: center; gap: 2px; min-width: 0; padding: 22px 4px 6px; border: 1px solid #8a6a3a; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(#4a3020, #2a1a10); box-shadow: inset 0 0 0 2px #1a0e08, 0 2px 4px #0008; text-align: center; }
#board .podium > div[data-rank="1"] { padding-top: 30px; min-height: 128px; }
#board .podium > div[data-rank="2"] { min-height: 108px; }
#board .podium > div[data-rank="3"] { min-height: 96px; }
#board .br-rank { font-style: normal; }
#board .podium .br-rank { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #3a2410; background: radial-gradient(circle at 35% 30%, #f3d48a, #b98a3a 60%, #6a4a1a); color: #2a1406; font-size: 14px; font-weight: 900; box-shadow: 0 1px 3px #0009; }
#board .podium > div[data-rank="2"] .br-rank { background: radial-gradient(circle at 35% 30%, #e6e1d2, #a8a08c 60%, #5a5446); }
#board .podium > div[data-rank="3"] .br-rank { background: radial-gradient(circle at 35% 30%, #e8b48a, #a8683a 60%, #5a3416); }
#board .br-name { max-width: 100%; color: #f3e2c0; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.2; }
#board .br-main { color: #ffd36b; font-weight: 900; line-height: 1; }
#board .br-main span { font-size: 26px; font-variant-numeric: tabular-nums; }
#board .br-main small { margin-left: 2px; font-size: 13px; color: #e8c890; }
#board .podium > div[data-rank="1"] .br-main span { font-size: 32px; }
#board .br-sub { color: #c8b08a; font-size: 11px; line-height: 1.25; }
#board .podium .br-sub { justify-self: end; }
#board ol.board { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#board ol.board li:not(.empty) { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "rank name main" "rank sub sub"; align-items: center; column-gap: 8px; padding: 5px 8px; border: 1px solid #6a4a2a; border-radius: 3px; background: #2a1a10; }
#board ol.board li .br-rank { grid-area: rank; justify-self: center; color: #c8a060; font-size: 15px; font-weight: 900; }
#board ol.board li .br-name { grid-area: name; text-align: left; }
#board ol.board li .br-main { grid-area: main; }
#board ol.board li .br-main span { font-size: 20px; }
#board ol.board li .br-sub { grid-area: sub; justify-self: end; }
#board .me .br-name::after { content: " · 本局"; color: #8ef0a8; font-size: 11px; }
#board ol.board li.empty { padding: 14px 8px; color: #c8b08a; font-size: 13px; text-align: center; }

/* ===== V19 counter ticket: one scroll =====
   The ticket paper is the only vertical scroller (same height as before, so the stage and the bell keep
   their places); its body no longer scrolls on its own; the order buttons stay pinned to the paper's
   lower edge, so the deal and its buttons are on screen together. Blocks: 收购 · 库存 / 金额 · 期限 /
   附带礼物 (one summary line once taken) / 关系故事. */
.counter-scene > .cs-panel { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.counter-scene > .cs-panel .t-body { overflow: visible; max-height: none; min-height: 0; }
.counter-scene > .cs-panel .deal-actions { position: sticky; bottom: calc(-1 * max(4px, 1.4cqw)); z-index: 2; margin-top: 4px; padding: 4px 0 max(4px, 1.4cqw); background: linear-gradient(#efe0bd00, #efe0bd 8px), #efe0bd; }
.counter-scene > .cs-panel .t-fields .tk-sec, .counter-scene > .cs-panel .tk-sec { display: block; grid-column: 1 / -1; margin: 6px 0 2px; padding-bottom: 1px; border-bottom: 1px dashed #a8865688; color: #6a4a2e; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.counter-scene > .cs-panel .t-fields .tk-sec:first-child { margin-top: 0; }
.counter-scene > .cs-panel details.errand.folded { margin: 4px 0; padding: 0; border: 0; background: none; }
.counter-scene > .cs-panel details.errand.folded summary { min-height: 32px; display: flex; align-items: center; padding: 2px 6px; border: 1px solid #a8865666; border-radius: 3px; color: #3b2416; font-size: 12px; cursor: pointer; }
.counter-scene > .cs-panel details.errand.folded p { margin: 4px 6px; font-size: 12px; color: #4a3020; }

/* ===== V20 opening: seven panels, compact text controls, studio ident ===== */
.intro .intro-top .mute, .intro .intro-top .skip { min-height: 36px; min-width: 52px; padding: 0 10px; border: 1px solid #ffffff55; border-radius: 3px; background: #0008; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.intro .intro-top .mute[aria-pressed="false"] { color: #ffffff88; text-decoration: line-through; }
.shot.v20 .art { background-position: center 40%; }
.shot.v20[data-shot="collision"] .art { background-position: center 45%; }
.shot.v20[data-shot="key"] .art { background-position: center 42%; }
/* the collision: one restrained push toward the car, no flash, no strobe */
.shot.v20.hit.acting .art { animation: hit-push .45s cubic-bezier(.2, .8, .3, 1) both, push 8s .45s ease-out both; }
@keyframes hit-push { 0% { transform: scale(1.06) translateX(-2%); filter: brightness(.85); } 100% { transform: scale(1); filter: none; } }
/* rain: on in 1-3, fading on the portal, none after */
.intro[data-rain="fade"] .shot.on .rainfx { animation: rainfall .5s linear infinite, rain-fade 2.4s ease-out both; }
@keyframes rain-fade { from { opacity: 1; } to { opacity: 0; } }
.intro[data-rain=""] .shot .rainfx { display: none; }
/* the caption sits at the top where the panel's faces are low */
.intro-line[data-place="top"] { top: calc(env(safe-area-inset-top) + 60px); bottom: auto; }
@media (prefers-reduced-motion: reduce) { .shot.v20.hit.acting .art, .intro[data-rain="fade"] .shot.on .rainfx { animation: none; } }
.ident { display: grid; place-items: center; background: #000; z-index: 60; cursor: pointer; }
.ident[hidden] { display: none; }
.ident .ident-mark { display: grid; justify-items: center; gap: 10px; opacity: 0; }
.ident .ident-mark img { width: min(44vw, 180px); height: auto; image-rendering: pixelated; }
.ident .ident-mark p { margin: 0; color: #fff; font: 600 15px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; }

/* ===== V21 来客手册 ===== */
/* hotspots: the painted books themselves; a small native label, nothing drawn over the art */
.book-spot { position: absolute; z-index: 4; display: grid; place-items: end center; min-width: 44px; min-height: 44px; padding: 0 0 2px; border: 0; background: none; cursor: pointer; }
.book-spot[hidden] { display: none; }
.book-spot small { padding: 0 4px; border-radius: 2px; background: #1a0e08b3; color: #f3e2c0; font-size: 10px; line-height: 14px; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.book-spot:focus-visible { outline: 2px solid #e2b25c; outline-offset: 1px; }
.yard .yard-book { pointer-events: auto; }
#guestbook .sheet { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; max-height: inherit; overflow: hidden; }
#guestbook .gb-index, #guestbook .gb-page { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
#guestbook .gb-index[hidden], #guestbook .gb-page[hidden] { display: none; }
#guestbook .gb-intro { margin: 0 0 6px; color: #d9c29a; font-size: 12px; }
#guestbook h3 { margin: 8px 0 4px; color: #ffe2a8; font-size: 13px; }
#guestbook .gb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
#guestbook .gb-list button { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "f n" "f s"; align-items: center; column-gap: 6px; width: 100%; min-height: 44px; padding: 4px 6px; border: 1px solid #7a5530; border-radius: 3px; background: #2a1a12; color: #f0dcb4; text-align: left; }
#guestbook .gb-list button.ready { border-color: #d29a45; box-shadow: 0 0 0 1px #d29a4566; }
#guestbook .gb-list button.unmet { opacity: .7; }
#guestbook .gb-face { grid-area: f; width: 30px; height: 30px; border-radius: 50%; background-size: cover; }
#guestbook .gb-nm { grid-area: n; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.2; }
#guestbook .gb-list small { grid-area: s; font-size: 11px; color: #c8b08a; }
#guestbook .gb-nav { display: flex; align-items: center; gap: 6px; }
#guestbook .gb-nav small { flex: 1; text-align: center; color: #c8b08a; font-size: 12px; }
#guestbook .gb-nav button { min-height: 40px; min-width: 44px; border: 1px solid #7a5530; border-radius: 3px; background: #2a1a12; color: #f0dcb4; }
#guestbook .gb-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; margin: 8px 0; }
#guestbook .gb-portrait { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #a88656; background-size: cover; }
#guestbook .gb-head b { display: block; color: #ffe2a8; font-size: 16px; }
#guestbook .gb-role { color: #c8b08a; font-size: 12px; }
#guestbook .gb-track { margin: 6px 0; padding: 6px 8px; border: 1px solid #6a4a2a; border-radius: 3px; background: #efe0bd; color: #3b2416; }
#guestbook .gb-track h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin: 0 0 4px; font-size: 13px; color: #2e3a6a; }
#guestbook .gb-track h4 small { color: #4a5680; font-weight: 400; font-size: 11px; }
#guestbook .gb-ch { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#guestbook .gb-ch li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: start; gap: 6px; font-size: 12px; line-height: 1.4; }
#guestbook .gb-ch li b { color: #6a4a2e; }
#guestbook .gb-ch li.locked { color: #8a7460; }
#guestbook .gb-ch li.ready button { min-height: 36px; padding: 0 10px; }
#guestbook .gb-extra { display: grid; gap: 2px; margin: 6px 0; padding: 6px 8px; border: 1px dashed #a8865688; border-radius: 3px; color: #f0dcb4; font-size: 12px; }
#guestbook .gb-extra b { color: #ffe2a8; }
#guestbook .gb-extra small { color: #c8b08a; }
#guestbook .gb-extra button { justify-self: start; min-height: 36px; padding: 0 12px; }

/* ===== V21 opening art ===== */
/* impact: one airborne snap, no flash (a short push, never repeated) */
.shot.v20.hit.acting .art { animation: hit-push .5s cubic-bezier(.2, .8, .3, 1) both, push 8s .5s ease-out both; }
@keyframes hit-push { 0% { transform: scale(1.05) translateX(-1.5%); } 100% { transform: scale(1); } }
/* the street after the portal: a cut across the portal edge, and the white arc above her head softened */
.intro[data-enter="edge"] .shot.v20.on.acting[data-shot="street"] { animation: edge-cut .42s cubic-bezier(.3, .7, .3, 1) both; transition: none; }
@keyframes edge-cut { from { clip-path: inset(0 0 0 46%); } to { clip-path: inset(0 0 0 0); } }
.shot.v20 .fx.soften { inset: 0 0 auto 0; height: 30%; background: linear-gradient(#07060c66, #07060c00); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .intro[data-enter="edge"] .shot.v20.on.acting[data-shot="street"] { animation: none; } }
/* the rent note on the key panel: a written note, not a speech line */
.intro-line.note .nameplate { background: #6a2a1a; color: #fbeedd; letter-spacing: .2em; }
.intro-line.note .paper p { font-style: italic; color: #4a2010; }

/* ===== V21 arcade title (title-arcade-v21, 840 x 527, transparent): replaces the old logo graphic;
   the sheen follows its shape; a compact width keeps the two-line art clear of the volume knob,
   Chouchou and the subtitle ===== */
.title .logo .logo-img { width: clamp(150px, 50cqw, 210px); height: auto; aspect-ratio: 840 / 527; }
.title .logo .logo-shine { -webkit-mask: url("assets/title-arcade-v21.webp?v=7hao-20261114") center / 100% 100% no-repeat; mask: url("assets/title-arcade-v21.webp?v=7hao-20261114") center / 100% 100% no-repeat; }
.title .logo h1::after { content: none; }

/* ===== V22 title sign (title-sign-v22, 960 x 266, subtitle painted in): the brief's measured box ===== */
#title .logo { left: 15.5%; top: 10.8%; width: min(68%, calc(82.5% - 44px)); right: auto; margin: 0; }
#title .logo h1 { margin: 0; }
#title .logo .logo-img { width: 100%; height: auto; aspect-ratio: 960 / 266; filter: drop-shadow(0 2px 3px #000a); }
#title .logo .logo-shine, #title .logo h1::after, #title .logo::after { display: none; content: none; }
#title .logo .logo-sub.sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#title .sound.knob { width: 44px; height: 44px; right: 2%; top: 3.6%; }
#title .sound.knob i { width: 29px; height: 29px; }

/* The cat appears with its sound, then fades out at the end of the ident. */
.ident.play .ident-mark { animation: ident-show 3400ms ease-in-out both; }
@keyframes ident-show { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ident.play .ident-mark { animation: none; opacity: 1; } }

#title .title-tabs .ico { width: clamp(15px, 4.3cqw, 21px); height: clamp(15px, 4.3cqw, 21px); }

/* ===== V22 夜市排行榜 (approved reference): near-black espresso, thin double bronze frame ===== */
#board.board-v22 { width: min(92cqw, 420px); max-width: 92cqw; max-height: 94cqh; padding: 0; border: 0; border-radius: 6px; background: #1c130d; color: #f1e3c6; overflow: auto; overscroll-behavior: contain; }
#board.board-v22::backdrop { background: #000c; }
#board .bd-frame { margin: 6px; padding: 10px 12px 12px; border: 1px solid #a07a46; border-radius: 4px; box-shadow: inset 0 0 0 3px #1c130d, inset 0 0 0 4px #a07a4688; display: grid; gap: 6px; }
#board .bd-eyebrow, #board .bd-seats { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: #d8bf92; font-size: 12px; letter-spacing: .18em; }
#board .bd-eyebrow i, #board .bd-seats i { font-style: normal; color: #c89a52; font-size: 10px; }
#board .bd-eyebrow::before, #board .bd-eyebrow::after { content: ""; flex: 1; max-width: 70px; height: 1px; background: #a07a4688; }
#board .bd-seats[hidden] { display: none; }
#board .bd-star { justify-self: center; font-style: normal; color: #e8c27a; font-size: 14px; line-height: 1; }
#board h2 { margin: 0; padding: 0 0 6px; border: 0; border-bottom: 1px solid #a07a4688; background: none; text-align: center; color: #f6e7c8; font: 900 26px/1.15 "Songti SC", "Noto Serif CJK SC", SimSun, serif; letter-spacing: .12em; }
#board .board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
#board .board-tabs button { min-height: 40px; border: 1px solid #6a5034; border-radius: 4px; background: #2a1e15; color: #d8c6a4; font-size: 14px; font-weight: 800; }
#board .board-tabs button[aria-selected="true"] { border-color: #c9a35e; background: linear-gradient(#6a5530, #4a3a20); color: #fff3d6; box-shadow: inset 0 1px 0 #ffffff22; }
#board .bd-local { margin: 0; text-align: center; color: #b8a27e; font-size: 11px; letter-spacing: .14em; }
#board .podium { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; margin: 14px 0 2px; }
#board .podium:empty { display: none; }
#board .podium[data-n="1"] { grid-auto-columns: minmax(0, 46%); justify-content: center; }
#board .podium[data-n="2"] { grid-auto-columns: minmax(0, 42%); justify-content: center; }
#board .podium > div { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 18px 4px 6px; border: 1px solid #5a4632; border-radius: 3px; background: linear-gradient(#2a2622, #1f1a16); box-shadow: 0 3px 6px #0009; text-align: center; }
#board .podium > div[data-rank="1"] { padding-top: 24px; min-height: 172px; border-color: #b8924e; background: linear-gradient(#4a3a22, #2e2416); }
#board .podium > div[data-rank="2"] { min-height: 150px; border-color: #6a6a70; background: linear-gradient(#2c2e30, #1e1f21); }
#board .podium > div[data-rank="3"] { min-height: 140px; border-color: #7a4e34; background: linear-gradient(#33241b, #241812); }
#board .br-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 24px; height: 19px; fill: #e8c27a; image-rendering: pixelated; }
#board .podium > div[data-rank="2"] .br-crown { fill: #cfd3da; } #board .podium > div[data-rank="3"] .br-crown { fill: #d48a62; }
#board .br-face { display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #b8924e; background-size: cover; box-shadow: 0 0 0 2px #1c130d; }
#board .podium > div[data-rank="1"] .br-face { width: 62px; height: 62px; border-color: #e8c27a; }
#board .podium > div[data-rank="2"] .br-face { border-color: #a8acb4; } #board .podium > div[data-rank="3"] .br-face { border-color: #b8764e; }
#board .br-name { max-width: 100%; color: #f6e7c8; font-size: 13px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
#board .br-main { color: #e8c27a; font-weight: 900; line-height: 1; }
#board .br-main span { font-size: 22px; font-variant-numeric: tabular-nums; font-family: Georgia, "Songti SC", serif; }
#board .br-main small { font-size: 13px; }
#board .podium > div[data-rank="1"] .br-main span { font-size: 26px; }
#board .podium > div[data-rank="2"] .br-main { color: #cfd3da; } #board .podium > div[data-rank="3"] .br-main { color: #d48a62; }
#board .br-roman { align-self: end; width: 100%; padding-top: 4px; border-top: 1px solid #ffffff1f; font-style: normal; font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: #e8c27a; }
#board .podium > div[data-rank="2"] .br-roman { color: #cfd3da; } #board .podium > div[data-rank="3"] .br-roman { color: #d48a62; }
#board ol.board { margin: 0; padding: 0; list-style: none; display: grid; border: 1px solid #5a4632; border-radius: 4px; overflow: hidden; gap: 0; }
#board ol.board li:not(.empty) > * { grid-area: auto; }
#board ol.board li .br-rank { justify-self: start; }
#board ol.board:empty { display: none; }
#board ol.board li:not(.empty) { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; column-gap: 8px; padding: 6px 10px; border-bottom: 1px solid #5a463299; background: #241a13; }
#board ol.board li:last-child { border-bottom: 0; }
#board ol.board li .br-rank { color: #b8a27e; font-family: Georgia, serif; font-size: 14px; font-style: normal; }
#board ol.board li .br-face { width: 32px; height: 32px; }
#board ol.board li .br-name { text-align: left; }
#board ol.board li .br-main span { font-size: 18px; }
#board ol.board li.empty { padding: 18px 10px; color: #b8a27e; font-size: 13px; text-align: center; background: none; border: 0; }
#board .me .br-name::after { content: " · 本局"; color: #8ed8b8; font-size: 11px; }
#board .bd-back { justify-self: center; width: min(72%, 240px); min-height: 44px; margin-top: 6px; border: 1px solid #9ab89a; border-radius: 4px; background: linear-gradient(#2f5a4e, #24453c); color: #f6ead0; font-size: 18px; font-weight: 800; letter-spacing: .4em; }

/* ===== V22 来客手册: the open leather book behind live text; 12 equal tiles a spread, no headings ===== */
#guestbook.sheet-dialog { width: min(96cqw, 520px); max-width: 96cqw; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#guestbook .sheet { position: relative; padding: 9% 7% 8%; background: url("assets/guestbook-open-v22.webp?v=7hao-20261114") center / 100% 100% no-repeat; color: #3b2416; max-height: 94cqh; overflow: hidden; }
#guestbook .sheet-head { justify-content: center; margin: 0 0 6px; }
#guestbook .sheet-head h2 { margin: 0 auto; padding: 4px 18px; border: 1px solid #c8964e; border-radius: 3px; background: #5a3418; color: #fbe6c0; font-size: 18px; letter-spacing: .1em; }
#guestbook .sheet-head .x { position: absolute; right: 6%; top: 6%; }
#guestbook .gb-intro, #guestbook #gb-index h3 { display: none; }
#guestbook .gb-index { overflow: visible; }
#guestbook .gb-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
#guestbook .gb-list li { display: grid; }
#guestbook .gb-list button { display: grid; grid-template-columns: 1fr; grid-template-areas: "f" "n" "s"; justify-items: center; align-content: center; gap: 2px; height: 100px; min-height: 0; padding: 5px 3px; border: 1px solid #c8a67a; border-radius: 4px; background: #f6e7c8cc; color: #3b2416; text-align: center; }
#guestbook .gb-list button.ready { border-color: #b8862e; box-shadow: inset 0 0 0 1px #d8a24a; background: #fbecc8; }
#guestbook .gb-list button.unmet { opacity: 1; color: #7a6250; }
#guestbook .gb-face { width: 36px; height: 36px; border: 2px solid #8a5a32; }
#guestbook .gb-nm { font-size: 12px; line-height: 1.2; color: #2e1a0e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#guestbook .gb-list small { font-size: 10.5px; color: #7a5a3a; }
#guestbook .gb-list button.ready small { color: #8a4a10; font-weight: 800; }
#guestbook .gb-spread { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
#guestbook .gb-spread small { padding: 2px 12px; border: 1px solid #c8a67a; border-radius: 12px; background: #f6e7c8; color: #3b2416; font-size: 13px; font-weight: 800; }
#guestbook .gb-spread button, #guestbook .gb-nav button { min-width: 44px; min-height: 40px; border: 1px solid #8a5a32; border-radius: 3px; background: #5a3418; color: #fbe6c0; font-size: 18px; }
#guestbook .gb-page { overflow-y: auto; max-height: calc(94cqh - 120px); color: #3b2416; }
#guestbook .gb-head b { color: #2e1a0e; }
#guestbook .gb-role, #guestbook .gb-nav small { color: #6a4a2e; }
#guestbook .gb-extra { border-color: #a8865688; color: #3b2416; }
#guestbook .gb-extra b { color: #5a3418; }
#guestbook .gb-extra small { color: #7a5a3a; }
/* a claim's notice sits mid-book, never over the page arrows */
#guestbook .toast.in-dialog { top: 44%; }
/* the designed zero state: one quiet card, a vacant seat under the star */
#board ol.board li.empty { display: block; box-sizing: border-box; width: 100%; padding: 16px 18px 18px; line-height: 1.6; }
#board ol.board li.empty::before { content: "✦ 虚位以待 ✦"; display: block; margin-bottom: 6px; color: #e8c27a; font: 900 18px/1.3 "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: .2em; }
/* V22 QA: first place always stands clear above second and third, whatever the names' length:
   every card stretches to the row, the side cards start lower (third a little lower than second) */
#board .podium { align-items: stretch; }
#board .podium > div[data-rank="1"] { margin-top: 0; }
#board .podium > div[data-rank="2"] { margin-top: 26px; min-height: 0; }
#board .podium > div[data-rank="3"] { margin-top: 36px; min-height: 0; }
/* V22 QA: podium names stay at two lines (full name in the tooltip / label) so no card grows past gold */
#board .podium .br-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: start; max-height: 2.5em; line-height: 1.25; }
/* 返回 always reachable: it stays pinned at the frame's foot when a long board scrolls */
#board .bd-back { position: sticky; bottom: 4px; z-index: 1; box-shadow: 0 -6px 10px #1c130d; }
/* short screens (300 x 540): a compact board, so the podium, two rows, 返回 and the frame all fit */
@media (max-height: 680px) {
  #board.board-v22 { max-height: 96cqh; }
  #board .bd-frame { margin: 4px; padding: 6px 10px 8px; gap: 3px; }
  #board .bd-eyebrow, #board .bd-seats { font-size: 10px; }
  #board .bd-star { display: none; }
  #board h2 { font-size: 20px; padding-bottom: 3px; }
  #board .board-tabs { margin-top: 2px; }
  #board .board-tabs button { min-height: 32px; font-size: 13px; }
  #board .bd-local { font-size: 10px; }
  #board .podium { margin: 10px 0 0; gap: 5px; }
  #board .podium > div { padding: 12px 3px 3px; gap: 2px; }
  #board .podium > div[data-rank="1"] { padding-top: 14px; min-height: 0; }
  #board .podium > div[data-rank="2"] { margin-top: 18px; }
  #board .podium > div[data-rank="3"] { margin-top: 26px; }
  #board .br-crown { top: -10px; width: 18px; height: 14px; }
  #board .br-face { width: 36px; height: 36px; }
  #board .podium > div[data-rank="1"] .br-face { width: 44px; height: 44px; }
  #board .br-name { font-size: 12px; line-height: 1.2; }
  #board .br-main span { font-size: 17px; }
  #board .podium > div[data-rank="1"] .br-main span { font-size: 20px; }
  #board .br-roman { padding-top: 2px; font-size: 13px; }
  #board ol.board li:not(.empty) { padding: 3px 8px; }
  #board ol.board li .br-face { width: 26px; height: 26px; }
  #board ol.board li .br-main span { font-size: 15px; }
  #board .bd-back { min-height: 40px; margin-top: 2px; font-size: 16px; }
}