:root { --ink:#f7f0d0; --field:#697742; --dark:#222919; --orange:#d96340; --edge:#f2c7a3; --line:rgba(247,240,208,.25); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#11150e; color:var(--ink); font-family:"Songti SC",STSong,serif; }
body { display:grid; place-items:center; overflow:hidden; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
.shell { width:min(100vw,430px); height:100dvh; max-height:932px; display:grid; grid-template-rows:minmax(0,1fr) auto; background:var(--dark); }
.game-frame { position:relative; min-height:0; overflow:hidden; background:var(--field); }
#game { display:block; width:100%; height:100%; image-rendering:pixelated; }
.hud { position:absolute; inset:max(12px,env(safe-area-inset-top)) 12px auto; display:flex; justify-content:space-between; align-items:center; font-weight:900; pointer-events:none; }
.hearts { color:#e96652; text-shadow:1px 1px #2a160f; letter-spacing:2px; }.phase { color:var(--orange); font-family:"Kaiti SC",KaiTi,serif; font-size:20px; text-shadow:1px 0 var(--edge),-1px 0 var(--edge),2px 2px #090806; }.timer { background:rgba(21,27,15,.72); border:1px solid var(--line); padding:4px 8px; border-radius:8px; }
.contract-bar { position:absolute; top:54px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:7px; color:#e6deb8; font-size:10px; pointer-events:none; }.contract-bar span,.contract-bar button { background:rgba(28,34,20,.74); border:1px solid rgba(247,240,208,.16); padding:4px 6px; border-radius:5px; }.contract-bar button { pointer-events:auto; min-width:58px; font-size:10px; }
.toast { position:absolute; top:94px; left:50%; transform:translate(-50%,-8px); width:max-content; max-width:84%; text-align:center; background:#282c1b; border:1px solid var(--line); padding:8px 11px; opacity:0; transition:.16s; pointer-events:none; font-size:14px; }.toast.visible { opacity:1; transform:translate(-50%,0); }
.screen { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:rgba(18,23,13,.48); }.screen[hidden] { display:none; }.card { width:min(100%,360px); background:rgba(26,32,20,.94); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.45); padding:24px 20px; text-align:center; }.eyebrow { color:#d7c88f; letter-spacing:.14em; font-size:12px; margin:0 0 8px; }.card h1,.card h2 { font-family:"Kaiti SC",KaiTi,serif; color:var(--orange); font-size:42px; margin:0 0 12px; text-shadow:1px 0 var(--edge),-1px 0 var(--edge),3px 3px #080705; }.card h2 { font-size:30px; }.lead { line-height:1.65; margin:8px 0 18px; }.flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; color:#f0dc9b; font-size:13px; margin-bottom:18px; }.flow span { border:1px solid rgba(240,220,155,.38); padding:5px 7px; }.instructions { display:grid; grid-template-columns:1fr 1fr; gap:7px; text-align:left; font-size:13px; margin:0 0 18px; }.instructions span { padding:7px; border-left:2px solid var(--orange); background:rgba(255,255,255,.04); }.primary,.secondary { width:100%; border:0; padding:13px; font-weight:900; border-radius:4px; }.primary { background:var(--orange); color:#180e09; }.secondary { margin-top:8px; background:transparent; border:1px solid var(--line); }.note { color:#c8c4aa; font-size:11px; line-height:1.55; margin:13px 0 0; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:16px 0; }.stats div { background:rgba(255,255,255,.06); padding:8px; }.stats small { display:block; color:#c8c4aa; }.stats strong { display:block; font-size:22px; color:#f0dc9b; }.share-line { font-size:13px; line-height:1.55; border:1px dashed rgba(247,240,208,.32); padding:8px; }.controls { position:absolute; inset:auto 12px max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.controls button { background:rgba(25,31,18,.86); border:1px solid var(--line); min-height:48px; border-radius:7px; font-weight:900; }.controls button:active { background:var(--orange); color:#1a110b; } footer { padding:7px 10px; font-size:10px; color:#c0ba99; text-align:center; background:#161b10; }
@media (max-height:700px) { .card { padding:18px; }.card h1 { font-size:34px; }.lead { margin:6px 0 12px; }.note { font-size:10px; }.controls button { min-height:42px; } }

/* 用户版收口：遮罩层优先，结果信息保持可读，按钮不露出内部状态。 */
.screen { z-index:5; overflow:auto; }
.controls { z-index:2; }
.toast { z-index:6; }
.back-link { width:100%; padding:10px 8px 0; background:transparent; border:0; color:#d7c88f; font-size:12px; text-decoration:underline; }
.result-stamp { margin:9px 0 0; color:#e3c579; font-size:12px; }
#start:not([hidden]) ~ .controls, #result:not([hidden]) ~ .controls { visibility:hidden; pointer-events:none; }