*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;inset:0;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;background:#0d0e16;font-family:"PingFang HK","PingFang TC","Hiragino Sans CNS","Noto Sans CJK HK","Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#f1f3f5}
body.en{font-family:"Arial Rounded MT Bold","Avenir Next","Trebuchet MS","Helvetica Neue",Arial,sans-serif}
canvas#c{position:fixed;left:0;top:0;display:block;touch-action:none}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) max(14px,env(safe-area-inset-right)) max(18px, calc(env(safe-area-inset-bottom) + 12px)) max(14px,env(safe-area-inset-left));touch-action:manipulation;z-index:5;background:linear-gradient(180deg,rgba(13,14,22,.15),rgba(13,14,22,.55) 45%,rgba(13,14,22,.85))}
#title{justify-content:space-between}
#res,#pause,#how,#stages{background:rgba(8,8,14,.72);justify-content:center}
.hidden{display:none!important}
.card{width:100%;max-width:400px;background:rgba(16,15,28,.94);border:2px solid #ff2e4d;border-radius:22px;padding:14px 16px 12px;text-align:center;box-shadow:0 0 0 1px rgba(255,46,77,.25),0 0 26px rgba(255,46,77,.35),0 14px 30px rgba(0,0,0,.5);animation:pop .38s cubic-bezier(.2,1.6,.4,1) both;touch-action:manipulation;max-height:100%;overflow-y:auto}
@keyframes pop{0%{transform:translateY(40px) scale(.85);opacity:0}100%{transform:none;opacity:1}}
.logoWrap{text-align:center;margin-top:6px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
.gavel{font-size:40px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,212,59,.6))}
.title{font-size:54px;font-weight:900;line-height:1.05;color:#fff;letter-spacing:4px;text-shadow:0 0 6px #ff2e4d,0 0 18px #ff2e4d,0 0 36px rgba(255,46,77,.6),0 4px 0 #5a0012}
body.en .title{font-size:46px;letter-spacing:1px}
.titleEn{font-size:20px;font-weight:900;letter-spacing:4px;color:#20e3ff;text-shadow:0 0 10px rgba(32,227,255,.8);margin-top:2px;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif}
.sub{display:inline-block;margin-top:8px;font-size:14px;font-weight:900;color:#ffd43b;background:rgba(0,0,0,.55);border:1px solid rgba(255,212,59,.5);border-radius:99px;padding:4px 12px}
.goalLine{margin:8px auto 0;color:#fff;font-size:16px;font-weight:900;line-height:1.25;text-shadow:0 2px 8px #ff2e4d}
.lang{display:flex;width:max-content;margin:10px auto 0;border:2px solid #20e3ff;border-radius:12px;overflow:hidden;box-shadow:0 0 12px rgba(32,227,255,.4)}
.lang button{appearance:none;border:0;background:rgba(0,0,0,.6);color:#c8f7ff;font-weight:900;font-size:14px;font-family:inherit;padding:7px 14px;cursor:pointer;touch-action:manipulation}
.lang button.on{background:#20e3ff;color:#06121a}
.howto{display:inline-block;background:#ff2e4d;color:#fff;font-weight:900;font-size:18px;border-radius:99px;padding:7px 16px;margin-bottom:8px;box-shadow:0 0 14px rgba(255,46,77,.6)}
.tips{list-style:none;padding:0;margin:0 0 8px;font-size:13.5px;font-weight:700;color:#cfd3e6;line-height:1.6;text-align:left}
.tips li::before{content:"▸ ";color:#ff2e4d}
.tips b{color:#ffd43b}
.daily{font-size:13px;font-weight:800;color:#9aa0b8;margin:2px 0 8px}
.daily b{color:#ffd43b}
.row{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.btn{appearance:none;-webkit-appearance:none;border:2px solid #ff2e4d;border-radius:16px;font-family:inherit;font-weight:900;color:#fff;background:linear-gradient(180deg,#ff4d66,#d81a3a);box-shadow:0 4px 0 #6d0018,0 0 14px rgba(255,46,77,.45);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;transition:transform .06s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6d0018}
.btn.big{font-size:22px;padding:11px 0;flex:1;min-height:56px;width:100%}
.btn.small{font-size:14px;padding:7px 12px;box-shadow:0 3px 0 #6d0018}
#btnHow,#btnPRetry,#btnPHome,#btnShare,#btnResHome,.btn.small.ic{font-size:20px;min-width:52px;line-height:1.2;padding:5px 12px}
.btn.alt{background:linear-gradient(180deg,#38e8ff,#13a9c9);border-color:#20e3ff;color:#06121a;box-shadow:0 3px 0 #08515f,0 0 12px rgba(32,227,255,.4)}
.btn.ghost{background:rgba(255,255,255,.06);border-color:#4a4f6a;color:#e9ecef;box-shadow:0 3px 0 #23263a}
.brand{margin-top:10px;font-size:11px;font-weight:800;color:#7d84a3;letter-spacing:1px}
.stHead{font-size:28px;font-weight:900;color:#fff;text-shadow:0 0 12px #ff2e4d;margin-bottom:2px}
.mini{font-size:13px;font-weight:800;color:#ffd43b;margin-bottom:8px}
.stList{display:flex;flex-direction:column;gap:8px}
.stBtn{appearance:none;display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid #3b3f55;border-radius:16px;background:rgba(255,255,255,.04);color:#fff;font-family:inherit;padding:9px 12px;cursor:pointer;touch-action:manipulation}
.stBtn .n{font-size:24px;font-weight:900;color:#ff2e4d;min-width:30px;text-shadow:0 0 10px rgba(255,46,77,.7)}
.stBtn .t{flex:1;min-width:0}
.stBtn .t b{display:block;font-size:18px}
.stBtn .t i{display:block;font-style:normal;font-size:12px;color:#9aa0b8;font-weight:700}
.stBtn .s{font-size:18px;letter-spacing:1px;color:#3b3f55}
.stBtn .s .on{color:#ffd43b;text-shadow:0 0 8px rgba(255,212,59,.8)}
.stBtn.next{border-color:#ff2e4d;box-shadow:0 0 14px rgba(255,46,77,.5);animation:again 1.1s ease-in-out infinite}
.stBtn.lock{opacity:.45}
.stBtn .boss{display:inline-block;font-size:10px;font-weight:900;background:#b46bff;color:#fff;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle}
@keyframes again{50%{transform:scale(1.03)}}
.howTable{text-align:left;font-size:14px;font-weight:800;margin:4px 0 8px}
.howTable div{display:flex;justify-content:space-between;gap:8px;padding:6px 4px;border-bottom:1px solid #2b2e42}
.howTable span:last-child{color:#ffd43b;text-align:right}
.howNote{font-size:12.5px;font-weight:700;color:#9aa0b8;line-height:1.5;margin-bottom:10px}
.resTitle{font-size:28px;font-weight:900;color:#fff;text-shadow:0 0 12px #ff2e4d}
.resTitle.win{text-shadow:0 0 12px #4dff9a}
.stars{font-size:48px;line-height:1;margin:4px 0;letter-spacing:6px}
.stars span{display:inline-block;color:#2b2e42;transform:scale(.6);transition:transform .35s cubic-bezier(.2,1.8,.4,1),color .2s}
.stars span.on{color:#ffd43b;transform:scale(1.1);text-shadow:0 0 16px rgba(255,212,59,.9)}
.cause{font-size:15px;font-weight:900;color:#ff6b81;margin:2px 0}
.scoreLbl{font-size:12px;font-weight:800;color:#9aa0b8;margin-top:2px}
.score{font-size:44px;font-weight:900;line-height:1.05;color:#fff}
.newbest{display:inline-block;background:#ffd43b;color:#1a1300;border-radius:10px;padding:2px 10px;font-weight:900;font-size:14px;transform:rotate(-4deg)}
.quip{font-size:15px;font-weight:900;color:#20e3ff;margin:4px 0}
.stats{font-size:13px;font-weight:700;color:#cfd3e6;line-height:1.6}
.stats b{color:#ffd43b}
.vcard{margin:8px 0 2px;border:2px dashed #ff2e4d;border-radius:14px;padding:8px 10px;background:rgba(255,46,77,.08);font-weight:900}
.vcard .d{font-size:20px;color:#ff2e4d;text-shadow:0 0 10px rgba(255,46,77,.6)}
.vcard .b{font-size:13px;color:#ffd43b;margin-top:2px}
.vcard .k{font-size:12px;color:#9aa0b8;margin-top:2px}
.unlock{display:inline-block;margin:6px auto 0;background:linear-gradient(90deg,#7c5cff,#ff2e4d);color:#fff;font-weight:900;font-size:14px;border-radius:12px;padding:4px 12px}
#hudBtns{position:fixed;right:max(8px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 6px);z-index:4;width:max-content;display:flex;gap:6px}
.ib{appearance:none;width:38px;height:38px;border-radius:12px;border:2px solid #4a4f6a;background:rgba(10,10,18,.8);color:#fff;font-weight:900;font-size:14px;cursor:pointer;touch-action:manipulation}
#btnSkipTut{width:auto;padding:0 9px;border-color:#ffd43b;color:#ffd43b;font-size:12px;font-family:inherit}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 70px);transform:translateX(-50%) translateY(-20px);background:#ff2e4d;color:#fff;font-weight:800;padding:10px 18px;border-radius:99px;opacity:0;transition:all .25s;z-index:20;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-height:700px){.tips{font-size:12px;line-height:1.45}.title{font-size:44px}.gavel{font-size:30px}.score{font-size:36px}.stars{font-size:40px}}
@media (max-height:600px){.tips{display:none}}
/* v2: warden */
.warden{line-height:0;margin-bottom:-4px;filter:drop-shadow(0 0 14px rgba(255,170,80,.35))}
.modes{gap:8px}
.btn.mode{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:linear-gradient(180deg,#8a5a2e,#5c3a1c);border:2px solid #ffb35c;color:#fff;font-weight:900;font-size:15px;padding:9px 6px;border-radius:16px;box-shadow:0 0 14px rgba(255,170,80,.35)}
.btn.mode i{font-style:normal;font-size:11px;color:#ffe3b8;font-weight:800;min-height:13px}
.rulesTable{text-align:left;font-size:12.5px;font-weight:800;margin:4px 0 8px;max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch}
.rulesTable div{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 4px;border-bottom:1px solid #2b2e42}
.rulesTable b{color:#fff}.rulesTable em{grid-column:1;font-style:normal;color:#9aa0b8;font-size:11px;font-weight:700}
.rulesTable span{grid-row:1/3;grid-column:2;align-self:center;color:#ffd43b;font-size:15px;font-weight:900}
.stBtn.soon{opacity:.4}
.vcard .r{font-size:12px;color:#cfd3e6;margin-top:2px;font-weight:800}

/* v5: difficulty, how-to, briefing */
.diff{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 8px;font-weight:800;font-size:13px;color:#cfd3e6}
.diff button{font:inherit;font-weight:900;font-size:14px;padding:7px 14px;border-radius:999px;border:1.5px solid #4a4e63;background:#15161f;color:#cfd3e6;cursor:pointer}
.diff button.on{background:#ffd43b;border-color:#ffd43b;color:#111}
.btn.how{background:linear-gradient(#20e3ff,#1593b0);color:#04121a}
.card.brief{max-height:92vh;overflow:auto;padding-bottom:14px}
.briefSub{text-align:center;color:#cfd3e6;font-size:13px;margin:-4px 0 10px;font-weight:700}
.briefGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.briefGrid .bc{display:flex;flex-direction:column;align-items:center;background:#11121a;border:1px solid #2c2f40;border-radius:10px;padding:7px 5px 8px;text-align:center}
.briefGrid .bc img{width:96px;height:48px;border-radius:6px;image-rendering:auto}
.briefGrid .bc b{font-size:14px;color:#fff;margin-top:4px;line-height:1.2}
.briefGrid .bc .m{font-size:15px;color:#ffd43b;font-weight:900}
.briefGrid .bc i{font-style:normal;font-size:12px;color:#aab0c6;line-height:1.3;margin-top:2px}
.briefSkip{display:flex;justify-content:center;align-items:center;gap:6px;color:#9aa0b8;font-size:12px;margin-top:8px}
.briefGrid .bc{padding:5px 4px 6px}
.briefGrid .bc img{width:84px;height:42px}
#btnBriefGo{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 18px #0b0c12}
/* v6: one big play button, compact title */
.btn.big.play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;font-size:28px;margin-top:6px}
.btn.big.play i{font-style:normal;font-size:12px;font-weight:800;opacity:.85;min-height:14px}
.brand .hubLink{color:inherit;text-decoration:underline;text-underline-offset:2px}
.briefSub2{text-align:center;color:#ffd43b;font-size:12px;font-weight:800;margin:-6px 0 10px}
.card .howto{margin-bottom:10px}
/* launch polish (Oct 2026) */
.btn.small.lbl{flex-direction:column;gap:1px;line-height:1.05;padding:6px 12px 5px;min-width:64px}
.btn.small.lbl .l{font-size:11.5px;white-space:nowrap}
.btn.small.lbl .i{font-size:18px}
.btn.big .lbl .l,.btn.big.lbl .l{font-size:20px}
.btn.big.lbl,.btn.big .lbl{gap:6px}
.hubLink.lbl .l{font-size:inherit}
.verChip{appearance:none;display:block;margin:6px auto 0;border:0;background:none;font-family:inherit;font-size:11.5px;font-weight:800;color:#8b90ad;text-decoration:underline dotted;cursor:pointer;padding:4px 8px}
#clog{z-index:30;justify-content:center;background:rgba(5,6,12,.6)}
.clogList{text-align:left;max-height:55vh;overflow-y:auto;font-size:13.5px;font-weight:700;color:#d8dbea;line-height:1.5;margin:6px 0 10px;touch-action:pan-y}
.clogList b{display:block;color:#ffd84d;font-size:15px;margin-top:8px}
.clogList ul{margin:2px 0 0;padding-left:18px}
@media (max-height:520px) and (orientation:landscape){
  .screen{padding:calc(env(safe-area-inset-top) + 6px) max(14px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 6px) max(14px,env(safe-area-inset-left));justify-content:center}
  #title{flex-direction:row;align-items:center;justify-content:center;gap:22px}
  #title .logoWrap{flex:0 0 auto;max-width:36%}
  #title .card{max-height:calc(100% - 4px)}
  .card{zoom:.85;max-height:calc(100vh / .85 - 16px)}
  .btn.big{min-height:46px;padding:6px 0}
}
@media (max-width:430px){.goalLine{font-size:15px}.title{font-size:48px}body.en .title{font-size:40px}.card{padding:12px 13px 10px}}
@media (max-height:440px){#res .card,#pause .card,#brief .card,#clog .card{max-height:calc(100% - 4px);overflow-y:auto;overscroll-behavior:contain}.goalLine{margin-top:4px;font-size:14px}.logoWrap{margin-top:0}}
@media (max-height:440px) and (orientation:landscape){#res .vcard .r,#res .vcard .k{display:none}#res .vcard{padding:4px 8px;margin-top:4px}#res .stars{font-size:26px;line-height:1;margin:0}#res .score{font-size:30px}#res .resTitle{font-size:22px}#res .row{margin-top:5px}#res .cause,#res .quip{margin:2px 0}#resFb:empty{display:none}}
#resFb:empty{display:none}