:root {
  --wood: #5a3720;
  --wood-d: #2b180d;
  --wood-l: #9b6638;
  --amber: #f2b13a;
  --orange: #e2672a;
  --teal: #3fb8a8;
  --teal-d: #1d4d4a;
  --ink: #120a06;
  --paper: #f3dfb0;
  --red: #c8402a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #0b0604; overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
/* CRT 扫描线 + 暗角 */
#stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}
#ui { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; pointer-events: none; color: var(--paper); }
#ui * { pointer-events: auto; }
#ui .pass, #ui .pass * { pointer-events: none; }

.num { font-family: "Press Start 2P", monospace; letter-spacing: 0; }
.panel {
  background: linear-gradient(#6b4226, #4a2b17); border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px #9b6638, inset 0 -4px 0 2px #2b180d, 0 4px 0 rgba(0,0,0,.5);
  border-radius: 2px; padding: 8px 12px;
}
.sign {
  background: linear-gradient(#7a4a28, #50301a); border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px #b07040, 0 0 18px rgba(242,177,58,.35);
  color: var(--amber); text-shadow: 0 0 8px rgba(242,177,58,.8), 2px 2px 0 #2b180d;
}
.btn {
  font: inherit; font-weight: 800; font-size: 18px; color: var(--ink); cursor: pointer;
  background: linear-gradient(#ffd36a, #e2952a); border: 3px solid var(--ink);
  box-shadow: inset 0 -4px 0 #a85a1a, inset 0 2px 0 #fff2b0, 0 4px 0 #000;
  padding: 8px 18px; border-radius: 2px; transition: transform .05s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #a85a1a, 0 1px 0 #000; }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.btn.teal { background: linear-gradient(#6fe0cf, #2f9c8e); box-shadow: inset 0 -4px 0 #1d5d55, inset 0 2px 0 #c8fff6, 0 4px 0 #000; }
.btn.dark { color: var(--paper); background: linear-gradient(#5a3720, #3b2314); box-shadow: inset 0 -4px 0 #24140a, inset 0 2px 0 #9b6638, 0 4px 0 #000; }
.btn[disabled] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }
.btn.small { font-size: 14px; padding: 5px 10px; }

/* 标题 */
.title-wrap { position: absolute; left: 40px; top: 50px; width: 520px; text-align: center; }
.logo {
  font-size: 76px; font-weight: 900; line-height: 1; letter-spacing: 4px; color: #ffcf5a; padding: 18px 10px 10px;
  text-shadow: 0 0 14px rgba(255,170,40,.9), 4px 4px 0 #8a3a12, 8px 8px 0 #1a0d06;
  -webkit-text-stroke: 2px #3a1a08;
}
.logo-sub { margin-top: 10px; font-size: 20px; color: var(--teal); text-shadow: 0 0 8px rgba(63,184,168,.8), 2px 2px 0 #000; letter-spacing: 6px; font-weight: 800; }
.title-btns { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.title-btns .btn { width: 240px; font-size: 22px; }
.title-stat { margin-top: 18px; font-size: 13px; color: #e8c890; text-shadow: 1px 1px 0 #000; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* 字幕 */
.caption {
  position: absolute; left: 60px; right: 60px; bottom: 26px; min-height: 96px; font-size: 21px; line-height: 1.6; font-weight: 700;
  color: #ffe9b8; text-shadow: 2px 2px 0 #000;
}
.caption .who { color: var(--amber); font-size: 15px; display: block; margin-bottom: 2px; }
.skip { position: absolute; right: 16px; top: 14px; }
.hint { position: absolute; right: 70px; bottom: 6px; font-size: 12px; color: #c9a77a; }

/* HUD */
.hud-wallet { position: absolute; left: 10px; top: 10px; display: flex; gap: 10px; align-items: center; padding: 6px 12px 6px 6px; }
.hud-wallet img { width: 52px; height: 52px; image-rendering: pixelated; background: #2b180d; border: 2px solid var(--ink); }
.usd { font-size: 17px; color: #ffd36a; text-shadow: 2px 2px 0 #000; }
.cny { font-size: 12px; color: var(--teal); margin-top: 6px; text-shadow: 1px 1px 0 #000; }
.rate { font-size: 11px; color: #c9a77a; margin-top: 4px; }
.hud-btns { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; }
.hud-ball { position: absolute; left: 10px; bottom: 10px; width: 300px; font-size: 13px; font-weight: 700; }
.bar { height: 14px; background: #1a0d06; border: 2px solid var(--ink); margin: 4px 0 6px; position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd36a, #e2672a); }
.bar.teal > i { background: linear-gradient(#8ff0e0, #2f9c8e); }
.hud-tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; font-size: 13px; color: #ffe9b8; text-shadow: 1px 1px 0 #000; background: rgba(20,10,5,.6); padding: 4px 10px; border: 2px solid #000; white-space: nowrap; }

/* 修剪 */
.trim-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); text-align: center; padding: 6px 22px; min-width: 380px; }
.trim-top .big { font-size: 26px; font-weight: 900; }
.trim-top .sub { font-size: 13px; color: #ffe9b8; }
.tools { position: absolute; left: 12px; top: 120px; display: flex; flex-direction: column; gap: 10px; }
.tool { width: 92px; padding: 6px 4px 4px; text-align: center; font-size: 13px; font-weight: 800; cursor: pointer; color: var(--paper); }
.tool img { width: 56px; height: 56px; display: block; margin: 0 auto 2px; image-rendering: pixelated; }
.tool.on { box-shadow: inset 0 0 0 2px #fff2b0, 0 0 0 3px var(--teal), 0 0 16px var(--teal); }
.tool.locked { filter: grayscale(1) brightness(.5); cursor: not-allowed; }
.tool .key { font-size: 10px; color: #c9a77a; }
.trim-right { position: absolute; right: 12px; top: 120px; width: 210px; font-size: 14px; font-weight: 700; }
.trim-right .row { display: flex; justify-content: space-between; margin: 4px 0; }
.trim-right .price { font-size: 15px; color: #ffd36a; margin-top: 6px; }
.timer { font-size: 22px; color: #ffd36a; text-align: center; margin-bottom: 4px; }
.timer.low { color: #ff6a4a; animation: blink .5s steps(2) infinite; }
.deliver { position: absolute; right: 12px; bottom: 16px; font-size: 22px; padding: 10px 26px; }

/* 结算 */
.modal-bg { position: absolute; inset: 0; background: rgba(8,4,2,.72); display: flex; align-items: center; justify-content: center; }
.result { width: 560px; text-align: center; padding: 16px 22px 18px; }
.grade { font-family: "Press Start 2P", monospace; font-size: 64px; line-height: 1; margin: 6px 0 4px; text-shadow: 4px 4px 0 #000, 0 0 20px currentColor; }
.quote { font-size: 15px; color: #ffe9b8; margin: 6px 0 10px; min-height: 22px; }
.breakdown { text-align: left; font-size: 14px; background: rgba(0,0,0,.3); border: 2px solid #000; padding: 8px 12px; margin: 8px 0; }
.breakdown .row { display: flex; justify-content: space-between; margin: 3px 0; }
.total-usd { font-size: 30px; color: #ffd36a; text-shadow: 3px 3px 0 #000, 0 0 12px rgba(255,200,80,.7); margin-top: 8px; }
.total-cny { font-size: 18px; color: var(--teal); margin-top: 10px; text-shadow: 2px 2px 0 #000; }
.slogan { margin: 12px 0 8px; font-size: 18px; font-weight: 900; color: #ff9a4a; text-shadow: 2px 2px 0 #000; }
.result .btns { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }

/* 商店 */
.shop { position: absolute; left: 40px; right: 40px; top: 70px; bottom: 16px; padding: 10px 14px; display: flex; flex-direction: column; }
.shop-head { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 30px; font-weight: 900; padding: 4px 40px; letter-spacing: 6px; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.tabs .wallet { margin-left: auto; text-align: right; }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 4px 4px 0; }
.card { background: rgba(20,10,5,.55); border: 2px solid #000; box-shadow: inset 0 0 0 2px #6b4226; padding: 8px; display: flex; gap: 8px; }
.card img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; }
.card .nm { font-size: 15px; font-weight: 900; color: #ffd36a; }
.card .ds { font-size: 12px; color: #e8d0a0; margin: 3px 0 6px; line-height: 1.35; min-height: 32px; }
.card .pr { font-size: 11px; color: #ffd36a; }
.card .pr .c { color: var(--teal); }
.card .act { margin-top: 6px; }
.card.owned { box-shadow: inset 0 0 0 2px var(--teal); }

/* toast */
.toasts { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 10; }
.toast { font-size: 16px; font-weight: 800; padding: 6px 14px; white-space: nowrap; animation: tin .25s ease-out, tout .4s ease-in forwards; animation-delay: 0s, var(--d, 2.4s); }
.toast.gold { color: #ffd36a; }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
@keyframes tout { to { transform: translateY(-10px); opacity: 0; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) { .blink, .timer.low { animation: none; } }

/* ---------- 角色立绘 + 饰品叠加 ---------- */
.hero { position: relative; display: inline-block; line-height: 0; }
.hero > img { width: 100%; image-rendering: pixelated; }
.hero .ov { position: absolute; height: auto; image-rendering: pixelated; }
.hero .aura { position: absolute; left: 10%; right: 10%; bottom: -4%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,160,40,.7), transparent 70%); animation: aura .6s steps(3) infinite alternate; }
@keyframes aura { to { transform: scaleX(1.2); opacity: .6; } }
.avatar { width: 56px; height: 56px; overflow: hidden; background: #2b180d; border: 2px solid var(--ink); display: flex; align-items: flex-start; justify-content: center; }
.avatar .hero { margin-top: 2px; }
.small { font-size: 12px; color: #e8d0a0; }

.title-links { margin-top: 14px; display: flex; gap: 16px; justify-content: center; }
.link { background: none; border: 0; color: #c9a77a; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.link:hover, .link:focus-visible { color: var(--amber); }

.row-b { display: flex; justify-content: space-between; }
.hud-ball .bar { height: 12px; }
.hud-keys { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: #e8c890; text-shadow: 1px 1px 0 #000; }
.hud-tip { bottom: 70px; transition: opacity .2s; }
.handicon { display: block; font-size: 38px; line-height: 56px; height: 56px; }
.trim-right .big-row { font-size: 16px; margin-top: 8px; }

/* 结算 */
.result { display: flex; gap: 14px; align-items: center; width: 680px; text-align: center; }
.res-hero { flex: none; width: 120px; }
.res-main { flex: 1; }
.levelup { color: var(--teal); font-weight: 900; font-size: 16px; margin-top: 4px; text-shadow: 0 0 8px rgba(63,184,168,.7); }

/* 商店 */
.shop { top: 74px; }
.shop-head { z-index: 2; }
.tabnote { font-size: 12px; color: #e8d0a0; margin-left: 6px; }
.backbtn { margin-left: auto; }
.shop-body { flex: 1; display: flex; gap: 10px; min-height: 0; }
.grid { grid-template-columns: repeat(2, 1fr); align-content: start; }
.mirror { flex: none; width: 170px; text-align: center; background: rgba(20,10,5,.55); border: 2px solid #000; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.card .info { flex: 1; min-width: 0; }
.tag { font-size: 12px; color: var(--teal); font-weight: 800; }

/* 酒馆 */
.tav { position: absolute; right: 14px; top: 84px; width: 250px; font-size: 14px; font-weight: 700; }
.tav .row { display: flex; justify-content: space-between; margin: 4px 0; }
.tav-btns { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.tav-btns .btn { font-size: 15px; line-height: 1.2; }
.tav-btns small { font-size: 11px; }
.note { line-height: 1.5; }
.shop-head + .hud-wallet, .hud-wallet { z-index: 3; }