:root{--paper:#f3e9d6;--black:#26221f;--pink:#ff3d9e;--red:#f2381d;--yellow:#ffd200;--blue:#2152d9;--teal:#0093a8;--purple:#7b3dc4;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");--dots:radial-gradient(circle, var(--black) 1.1px, transparent 1.35px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--paper);height:100%;color:var(--black);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;font:700 13px/1.3 ui-monospace,SF Mono,Menlo,monospace;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{display:block}.hidden{display:none!important}svg.st,svg.sp{display:block;overflow:visible}#hud{pointer-events:none;padding:max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));position:fixed;inset:0}#top{right:10px;top:max(10px, env(safe-area-inset-top));align-items:center;gap:7px;display:flex;position:absolute}#sync{color:var(--black);opacity:.6;font-size:9px}#flagBtn,#pauseBtn{pointer-events:auto;border:2.5px solid var(--black);background:var(--paper);width:38px;height:38px;color:var(--black);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);border-radius:0;place-items:center;padding:0;display:grid}#flagBtn{color:var(--red);transform:rotate(-2deg)}#pauseBtn:active,#flagBtn:active{background:var(--black);color:var(--paper)}#hint{left:0;right:0;bottom:max(70px, env(safe-area-inset-bottom));text-align:center;color:var(--red);padding:0 16px;font-size:11px;position:absolute}#screen{z-index:4;background:var(--grain), var(--paper);padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));touch-action:pan-y;flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;display:flex;position:fixed;inset:0;overflow-y:auto}#screen:before{content:"";background:var(--dots);opacity:.55;pointer-events:none;background-size:5px 5px;height:10px;position:fixed;top:0;left:0;right:0}#screen:after{content:"";border:1.5px solid var(--black);pointer-events:none;opacity:.5;position:fixed;inset:7px}#screen>:first-child{margin-top:auto}#screen>:last-child{margin-bottom:auto}.title{justify-content:center;padding:4px 14px;display:flex;position:relative;transform:rotate(-1.5deg)}.title:before{content:"";background:radial-gradient(circle, var(--band,var(--pink)) 1.7px, transparent 2px) 0 0 / 6px 6px;opacity:.75;z-index:-1;position:absolute;inset:22% -6px -8%;transform:skew(-12deg)}.title svg{position:relative}.masthead{background:radial-gradient(circle, var(--pink) 1.5px, transparent 1.8px) 0 0 / 6px 6px;align-items:flex-end;gap:10px;padding:6px 18px 10px;display:flex;position:relative}.masthead .title{background:var(--paper);padding:0 6px}.masthead .title:before{display:none}.masthead .kana{color:var(--black);margin-bottom:6px;transform:rotate(4deg)}.btn{pointer-events:auto;background:var(--black);min-width:220px;color:var(--paper);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);border:0;justify-content:center;padding:13px 22px;display:flex}.btn:first-child{box-shadow:none;transform:rotate(-1deg)}.btn:active{background:var(--pink)}.btn.ghost{min-width:190px;color:var(--black);border:2.5px solid var(--black);clip-path:none;background:0 0;padding:9px 18px}.btns{flex-direction:column;align-items:center;gap:10px;display:flex}.btns.dock{width:calc(100% + 32px);padding:12px 16px max(14px, env(safe-area-inset-bottom));background:var(--grain), var(--paper);border-top:2.5px solid var(--black);flex-direction:row;justify-content:center;position:sticky;bottom:-20px}.btns.dock .btn{flex:1;min-width:0;max-width:230px}.btns.dock .btn.ghost{flex:none}.howto{border-top:2.5px solid var(--black);border-bottom:2.5px solid var(--black);flex-direction:column;gap:10px;width:100%;max-width:360px;padding:12px 0;display:flex}.hrow{grid-template-columns:62px 1fr;align-items:start;gap:10px;display:grid}.hkey{flex-direction:column;align-items:center;gap:3px;display:flex}.parts{flex-direction:column;gap:12px;width:100%;max-width:360px;display:flex}.slotHead{background:var(--black);color:var(--paper);margin-bottom:6px;padding:3px 6px 2px;display:inline-block;transform:rotate(-1deg)}.opts{gap:6px;display:flex}.opt{border:2px solid var(--black);color:var(--black);background:0 0;border-radius:0;flex:1;justify-content:center;padding:9px 2px;display:flex}.opt.sel{background:var(--pink);color:var(--paper);border-color:var(--pink)}.line{min-height:34px;margin-top:6px}.cards{flex-direction:column;gap:12px;width:100%;max-width:360px;display:flex}.card{text-align:left;border:2.5px solid var(--black);background:var(--paper);color:var(--black);font:inherit;border-radius:0;flex-direction:column;align-items:flex-start;gap:7px;padding:14px 14px 16px;display:flex;position:relative}.card.pick:nth-child(2){transform:rotate(.6deg)}.card.pick:nth-child(3){transform:rotate(-.5deg)}.card.pick:after{content:"";background:radial-gradient(circle, var(--pink) 1.6px, transparent 1.9px) 0 0 / 6px 6px;opacity:.8;width:46px;height:46px;position:absolute;top:8px;right:8px}.card.pick:active{background:var(--yellow)}.card .stamp{border:1.8px solid var(--black);padding:2px 5px 1px;transform:rotate(-2deg)}.notes{grid-template-columns:1fr 1fr;gap:8px;display:grid}.card.note{padding:10px}.seg{gap:6px;display:flex}.seg button{border:2px solid var(--black);color:var(--black);background:0 0;border-radius:0;padding:7px 11px}.seg button.sel{background:var(--black);color:var(--paper)}#note{border:2px solid var(--black);width:100%;max-width:360px;color:var(--black);font:inherit;text-transform:uppercase;background:0 0;border-radius:0;padding:11px}.stats{border-top:2.5px solid var(--black);border-bottom:2.5px solid var(--black);grid-template-columns:repeat(3,1fr);gap:12px 10px;width:100%;max-width:340px;padding:12px 0;display:grid}.stat{flex-direction:column;align-items:center;gap:3px;display:flex}#ver{color:var(--black);opacity:.35;pointer-events:none;font-size:8px;position:fixed;bottom:2px;right:6px}#replayBar{padding:8px 12px max(10px, env(safe-area-inset-bottom));background:var(--paper);border-top:2.5px solid var(--black);z-index:5;flex-direction:column;gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0}#rpInfo{white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.rpRow{align-items:center;gap:8px;display:flex}.rpRow button{border:2px solid var(--black);color:var(--black);font:inherit;background:0 0;border-radius:0;min-width:48px;padding:7px 11px}#rpTime{font-variant-numeric:tabular-nums;margin-left:auto}.rpSeekWrap{position:relative}#rpSeek{width:100%;accent-color:var(--black)}#rpMarks{pointer-events:none;height:0;position:absolute;top:-4px;left:0;right:0}#rpMarks i{background:var(--red);width:3px;height:10px;position:absolute;transform:translate(-1px)}body.replay #flagBtn,body.replay #sync{display:none}