/* 擦除关卡 */
#s-play { background: #14120e; }
/* 她的实时消息：每条新消息会弹一下 */
.banner { display: flex; align-items: center; gap: 8px; background: #ededed; padding: 6px 12px; border-bottom: 1px solid #ddd; font-size: 14px; }
.banner[hidden] { display: none; }
.banner img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex: none; }
.banner span { flex: 1; min-width: 0; padding: 5px 9px; border-radius: 6px; background: #fff; line-height: 1.35; }
.banner.pop { animation: pop .3s ease; }
.stage.shake { animation: shake .35s ease; }
.hud { padding: 8px 12px 6px; background: var(--paper); }
.hud-room { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.hud-room b { font-size: 16px; }
#hud-eta { color: var(--muted); font-size: 12px; }
.timer { height: 8px; margin-top: 6px; border-radius: 99px; background: #eadfb8; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: #3fbf6a; transform-origin: left; transition: background .3s; }
.timer.warn i { background: #e8423a; }

/* 舞台固定 2:3，宽高由 engine.js 按可用空间算出，污渍坐标与底图严格对齐 */
.stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #14120e; overflow: hidden; }
.stage { position: relative; overflow: hidden; background: linear-gradient(#cfe3f5, #f3e3c2); touch-action: none; user-select: none; -webkit-user-select: none; }
.stage > img#bg, .stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage > canvas { pointer-events: none; }
.cursor { position: absolute; width: 72px; height: 72px; object-fit: contain; pointer-events: none; transform: translate(-30%, -70%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); z-index: 3; }
.toast { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 5; padding: 10px 14px; border-radius: 12px; background: rgba(30, 27, 22, .88); color: #fff; font-size: 15px; line-height: 1.5; text-align: center; animation: pop .2s ease; }

.start-card { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20, 18, 14, .62); color: #fff; text-align: center; }
.start-card[hidden], .toast[hidden], .banner[hidden], .cursor[hidden] { display: none; }
.start-card h3 { margin: 0; font-size: 30px; }
.start-card p { margin: 0 0 14px; color: #e5ddc8; }

.tray { display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); }
.tool { flex: 1; min-width: 0; padding: 6px 4px; border: 2px solid transparent; border-radius: 14px; background: #fff; text-align: center; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.tool.on { border-color: var(--yellow-dk); background: #fff4b8; }
.tool img { display: block; width: 100%; max-width: 54px; aspect-ratio: 1; margin: 0 auto; object-fit: contain; }
.tool b { display: block; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool small { display: block; font-size: 10px; color: var(--muted); }

.room-end { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 18, 14, .78); }
.room-end[hidden] { display: none; }
.re-card { width: 100%; max-width: 340px; padding: 22px 18px; border-radius: 22px; background: var(--paper); text-align: center; animation: pop .25s ease; }
.re-score b { font-size: 56px; line-height: 1; }
.re-score small { font-size: 16px; margin-left: 2px; color: var(--muted); }
.re-card img { display: block; width: 84px; height: 84px; margin: 12px auto 8px; border-radius: 50%; object-fit: cover; background: #f1e7c8; }
.re-line { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }