:root{--ink:#f6ead2;--gold:#e8c47a;--warm:#ffb46a;--night:#0b1020;--serif:"Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;--sans:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--ink);font-family:var(--sans);-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#app,#app canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}button{font-family:var(--serif);cursor:pointer}.overlay{z-index:20;place-items:center;display:grid;position:fixed;inset:0}#start{background:radial-gradient(at 50% 52%,#08060400 30%,#08060459 62%,#040302d9 100%),linear-gradient(#0403028c 0%,#04030200 28% 66%,#04030299 100%);transition:opacity 1.2s}#start.fade{opacity:0;pointer-events:none}.start-inner{text-align:center;box-sizing:border-box;flex-direction:column;align-items:center;max-width:680px;height:100%;padding:9vh 24px 7vh;display:flex}.start-inner .bar{margin-top:auto}.start-inner .kicker,.start-inner .sub,.start-inner .tip{text-shadow:0 1px 12px #000c}.kicker{letter-spacing:.4em;color:#f6ead2b3;font-size:12px}h1{font-family:var(--serif);white-space:nowrap;letter-spacing:.12em;color:#fff4dc;text-shadow:0 0 28px #ffaa5a73;margin:14px 0 6px;font-size:clamp(38px,8.6vw,72px);font-weight:700}.sub{font-family:var(--serif);color:#f6ead2d9;margin:0 0 30px;font-size:17px}.bar{background:#ffffff1f;border-radius:2px;width:220px;height:2px;margin:0 auto 22px;overflow:hidden}.bar i{background:linear-gradient(90deg,#ffcf8a,#ff9a4a);width:0;height:100%;transition:width .3s;display:block}#start-btn{letter-spacing:.2em;color:#2a1608;background:linear-gradient(#ffd69a,#f2a85a);border:0;border-radius:999px;padding:13px 34px;font-size:18px;transition:transform .2s,opacity .3s;box-shadow:0 0 32px #ffa05073}#start-btn:disabled{opacity:.55;cursor:default;box-shadow:none}#start-btn:not(:disabled):hover{transform:translateY(-1px)scale(1.02)}.tip{color:#f6ead28c;letter-spacing:.08em;margin-top:22px;font-size:12px}#hud{pointer-events:none;z-index:10;font-family:var(--serif);position:fixed;inset:0}#matches{top:max(18px, env(safe-area-inset-top));gap:9px;display:flex;position:absolute;left:20px}#matches .m{background:linear-gradient(#c8392b 0 18%,#e7d2a2 18% 100%);border-radius:3px;width:9px;height:40px;transition:opacity .6s,filter .6s;box-shadow:0 0 10px #ff8c3c59}#matches .m.used{opacity:.22;filter:grayscale();box-shadow:none}#clock{top:max(20px, env(safe-area-inset-top));letter-spacing:.2em;color:#f6ead2bf;font-size:15px;position:absolute;left:50%;transform:translate(-50%)}#sound{pointer-events:auto;top:max(14px, env(safe-area-inset-top));width:38px;height:38px;color:var(--ink);background:#0a0e1c59;border:1px solid #f6ead24d;border-radius:50%;font-size:16px;position:absolute;right:16px}#sound.off{opacity:.45;text-decoration:line-through}#hint{bottom:max(26px, env(safe-area-inset-bottom));letter-spacing:.12em;color:#f6ead2b3;text-shadow:0 1px 8px #000c;white-space:nowrap;font-size:14px;transition:opacity .6s;position:absolute;left:50%;transform:translate(-50%)}#action{pointer-events:auto;letter-spacing:.16em;color:#2a1608;background:linear-gradient(#ffd69a,#f2a85a);border:0;border-radius:999px;padding:14px 30px;font-size:18px;animation:1.8s ease-in-out infinite breathe;position:absolute;bottom:82px;left:50%;transform:translate(-50%);box-shadow:0 0 34px #ff964699}@keyframes breathe{50%{box-shadow:0 0 46px #ffaa5ad9}}#card{text-align:center;width:min(620px,88vw);animation:.9s both rise;position:absolute;bottom:18vh;left:50%;transform:translate(-50%)}#card .card-title{letter-spacing:.4em;color:var(--gold);margin-bottom:10px;font-size:13px}#card .card-text{color:#fff4dc;text-shadow:0 2px 18px #000000e6,0 0 2px #000000e6;font-size:clamp(18px,3.6vw,24px);line-height:1.7}@keyframes rise{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}#toast{left:18px;bottom:max(70px, calc(env(safe-area-inset-bottom) + 60px));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c10209e;border:1px solid #e8c47a59;border-radius:12px;width:min(320px,80vw);padding:14px 16px;animation:.6s both slide;position:absolute}#toast .toast-title{letter-spacing:.3em;color:var(--gold);margin-bottom:6px;font-size:12px}#toast .toast-text{font-size:15px;line-height:1.6}@keyframes slide{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}#skip{z-index:15;right:18px;bottom:max(18px, env(safe-area-inset-bottom));color:var(--ink);letter-spacing:.2em;background:#0a0e1c66;border:1px solid #f6ead259;border-radius:999px;padding:8px 18px;font-size:13px;position:fixed}#postcard{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30;background:#04060eb8;animation:1.2s both fadein}@keyframes fadein{0%{opacity:0}to{opacity:1}}.pc-inner{text-align:center;width:min(860px,94vw)}#pc-canvas{border-radius:6px;width:100%;height:auto;box-shadow:0 20px 60px #0009}.pc-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;display:flex}#pc-name{font-family:var(--serif);color:var(--ink);-webkit-user-select:text;user-select:text;background:#0a0e1c80;border:1px solid #f6ead259;border-radius:999px;outline:none;width:220px;padding:11px 16px;font-size:15px}.pc-row button{letter-spacing:.12em;color:#2a1608;background:linear-gradient(#ffd69a,#f2a85a);border:0;border-radius:999px;padding:11px 22px;font-size:15px}.pc-row button.ghost{color:var(--ink);background:0 0;border:1px solid #f6ead259}body.trailer #matches,body.trailer #clock,body.trailer #sound,body.trailer #hint,body.trailer #action,body.trailer #skip{display:none!important}@media (max-width:640px){#action{padding:13px 26px;font-size:17px;bottom:70px}#toast{bottom:140px;left:50%;transform:translate(-50%)}@keyframes slide{0%{opacity:0}to{opacity:1}}}