*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#1b1a17;color:#f3ead7;font-family:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;overflow:hidden;touch-action:none}
#app{display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto}
#hud{display:flex;align-items:center;gap:8px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));background:#2a2620;font-size:14px}
#phase{font-weight:700;color:#e9c46a}#timer{font-variant-numeric:tabular-nums;font-weight:700;min-width:44px}
#pop{margin-left:auto}#jl{display:flex;gap:3px;align-items:center;margin-left:auto}
.pip{width:12px;height:12px;border-radius:3px;background:#444;border:1px solid #777}.pip.on{background:#e9c46a}
#stage{flex:1;position:relative;min-height:0}#cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#banner{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 6px #000;pointer-events:none}
#panel{background:#2a2620;padding:6px;padding-bottom:max(6px,env(safe-area-inset-bottom));min-height:118px}
.row{display:flex;gap:5px;margin-bottom:5px;overflow-x:auto}
.card,.btn{flex:1;min-width:56px;background:#3b352c;border:2px solid #5a5143;border-radius:8px;color:#f3ead7;padding:5px 3px;text-align:center;font-size:12px;line-height:1.25;cursor:pointer}
.card b,.btn b{display:block;font-size:13px}.card.sel,.btn.sel{border-color:#e9c46a;background:#4b4231}
.btn.dis,.card.dis{opacity:.4}.btn.go{background:#7a2e1f;border-color:#b5543c}
.tip{font-size:12px;color:#bfb39b;padding:0 2px 4px}
#gsel{position:absolute;inset:0;display:none;flex-direction:column;gap:8px;padding:12px;background:rgba(20,18,15,.88);overflow-y:auto}
#gsel .gh{text-align:center;font-size:18px;color:#e9c46a}#gsel .gh small{color:#d8ccb2;font-size:12px}
#gsel .gt{text-align:center;font-size:14px;color:#bfb39b}
.gc{display:flex;gap:10px;align-items:center;background:#3b352c;border:2px solid #5a5143;border-radius:10px;padding:8px;font-size:12px;line-height:1.4;cursor:pointer}
.gc:active{border-color:#e9c46a}.gc b{font-size:16px;color:#e9c46a}.gc .pas{color:#9fd18b}
.pt{flex:none;width:58px;height:58px;border-radius:50%;background:#22252b center/cover;border:2px solid #e9c46a;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800}
.syn{gap:3px}.sb{flex:1;min-width:52px;border:1px dashed #5a5143;border-radius:6px;padding:2px;font-size:10px;text-align:center;color:#8f8573;line-height:1.2}
.sb b{font-size:11px}.sb.on{border:1px solid #e9c46a;color:#f3ead7;background:#4b4231}.sb small{font-size:9px}