:root {
--ink: #24373a;
--gold: #d7bf85;
--paper: #f5ecd8;
--red: #a44436;
--scale: 0.5;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
background: #090b0a;
color: var(--ink);
font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
#viewport { width: 100vw; height: 100dvh; display: grid; place-items: center; position: relative; overflow: hidden; }
#game {
position: absolute;
width: 1080px;
height: 1920px;
left: 50%;
top: 50%;
overflow: hidden;
transform: translate(-50%, -50%) scale(var(--scale));
transform-origin: center;
background: #efe5ce;
box-shadow: 0 0 80px #000;
}
#backdrop { position: absolute; inset: 0; width: 1080px; height: 1920px; }
.plaque {
position: absolute;
left: 120px;
top: 78px;
width: 840px;
height: 225px;
filter: drop-shadow(9px 13px 7px #140b0790);
}
/* 牌匾是位图 assets/art/plaque.png（现为 2280×610，自带透明通道），等比摆到 840 宽＝高 225，可见内容高 209。
left 取 (1080-840)/2＝120 横向居中；top 78 让可见内容落在画布 y 88..297，居中于「画布顶～标题板 top 385」
这段空白（(385-209)/2＝88，再减掉图顶那 26 px 透明边按 840/2280 折算的 9.6）。
早先那版 3226×1192 是 720 宽＝高 266、可见到 y 326；现在这张图更矮，所以要摆得更大才填得住这块空白。 */
.plaque-art { position: absolute; left: 0; top: 0; width: 840px; height: auto; }
/* 牌匾文案的可机读文案源：位图读不出文字，所以这里与 ![]()
的 alt 各留一份副本，
供 tools/test_cover_3x4.cjs 抽取牌匾文案，不要删改结构。 */
.plaque-inner { display: none; }
/* 标题不画任何底框：深绿底 + 金边那版太生硬，去掉后直接用墨色字压在木墙上，
靠 text-shadow 的浅色高光（0 3px 0）+ 轻投影（0 6px 13px）做出「刻在墙上」的浮雕感。
墙面实测约 RGB(200,170,120)，墨色 #24373a 对比度约 5.7:1，比原来的淡金 #ffe8ad（约 1.6:1）清楚得多。
字号按反馈放大过一档（h1 62→70、p 31→35，约 +13%），阴影偏移同步等比放大以免浮雕变细。
width/height 只为占位，不与其它元素联动。 */
.title-board {
position: absolute;
left: 150px;
top: 385px;
width: 780px;
height: 160px;
margin: 0;
color: #24373a;
text-align: center;
text-shadow: 0 3px 0 #fbf4e2b3, 0 6px 13px #2b1a0f3d;
}
.title-board h1 { margin: 5px 0 0; font-size: 70px; line-height: 1.28; font-weight: 500; }
.title-board p { margin: 0; font-size: 35px; color: #5c4630; }
.timer-wrap { position: absolute; left: 150px; top: 557px; width: 780px; text-align: center; }
.timer-track { width: 100%; height: 30px; overflow: hidden; background: #d1c3a5; border: 2px solid #aa9872; border-radius: 15px; }
.timer-fill { width: 100%; height: 100%; transform-origin: left; background: #b74b3d; border-radius: inherit; }
#timerText { display: inline-block; margin-top: 2px; min-width: 120px; color: #71362f; font-size: 40px; }
/* 开关声音只是一个纯白图标：没有底色和边框，命中区放大到 112×112（隐形）方便点按，
两态共用一个