:root{--ink:#1d1b2e;--paper:#fffaf0;--red:#e0344b;--green:#2f9e5b;--bg:#0b2a4a;--font:"Arial Rounded MT Bold","Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow:hidden;font-family:var(--font);color:var(--paper);user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#touch,.tc{display:none}
body.touch #touch{display:block}
body.touch .tc{display:inline}
body.touch .kb{display:none}
.tb{position:absolute;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.3);border:3px solid rgba(11,42,74,.55);display:grid;place-items:center;padding:0;touch-action:none;cursor:pointer}
.tb svg{width:54px;height:54px}
.tb.on{background:rgba(255,228,92,.8)}
#tDown{left:22px;bottom:22px}
#tUp{right:22px;bottom:22px}
.tb.small{width:46px;height:46px;top:16px}
.tb.small svg{width:24px;height:24px}
#tPause{right:16px}
#tMute{right:70px}
#rotateO{position:fixed;inset:0;background:var(--bg);display:none;place-items:center;text-align:center;color:#fff;font:900 22px var(--font);padding:24px;z-index:9}
#rotateO svg{width:96px;height:96px;margin-bottom:12px}
body.touch.portrait #rotateO{display:grid}
#wrap{position:absolute;left:50%;top:50%;width:960px;height:540px;transform:translate(-50%,-50%) scale(var(--s,1))}
#inner{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px #0009}
canvas{display:block;width:960px;height:540px}
.overlay{position:absolute;inset:0;display:none;place-items:center}
.overlay.show{display:grid}
.dim{background:rgba(8,40,90,.35)}
.card{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:24px;padding:20px 30px;text-align:center;width:580px;max-height:520px;overflow-y:auto;box-shadow:0 8px 0 var(--ink),0 20px 40px #0005}
.card h1{font-size:48px;line-height:1.05;white-space:nowrap;letter-spacing:1px;color:#e8323f;-webkit-text-stroke:2px var(--ink);text-shadow:0 5px 0 #ffd23f}
.card h2{font-size:30px;color:#e8323f;-webkit-text-stroke:1.5px var(--ink);text-shadow:0 4px 0 #ffd23f}
.card .lvl{font-weight:700;color:#e8323f;margin:-6px 0 10px}
.card .tag{margin:10px 0 12px;color:#1f7bff;font-size:16px;font-weight:700}
.card ul{list-style:none;text-align:left;margin:0 auto 14px;font-size:15px;line-height:1.7;width:fit-content}
.btn{display:inline-block;background:linear-gradient(#ffe45c,#ffb020);color:var(--ink);font:900 19px var(--font);border:3px solid var(--ink);border-radius:999px;padding:10px 30px;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
.hint{font-size:12px;color:#8a85a0;margin-top:8px}
.btn.ghost{background:#fff;margin-left:8px}
kbd{font:700 12px var(--mono);background:#ffe45c;border:2px solid var(--ink);border-radius:6px;padding:1px 6px}
#game.ruined{filter:grayscale(.75) brightness(.7);transition:filter .6s}
.receipt{position:absolute;left:330px;top:10px;width:300px;max-height:0;overflow:hidden;background:#fffef6;color:#2a2733;font:600 12px/1.38 var(--mono);box-shadow:0 12px 30px #0007;animation:unroll 1.2s steps(24) forwards}
.receipt .in{padding:10px 18px 8px}
.receipt .c{text-align:center}
.receipt .b{font-weight:800}
.receipt hr{border:0;border-top:2px dashed #2a273355;margin:6px 0}
.receipt .row{display:flex;justify-content:space-between;gap:8px}
.receipt .row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.receipt .row span:last-child{white-space:nowrap}
.receipt .neg{color:#c62839}
.receipt .pos{color:#2f7a45}
.receipt .sm{font-size:11px;color:#6b6578;margin-top:6px}
.receipt .btn{margin-top:12px;font-size:13px;padding:8px 14px}
.receipt .btn.share{background:#fff;margin-right:6px}
#shareO{z-index:3;background:rgba(8,40,90,.55)}
#shareO .card{width:auto;padding:12px 16px 14px;position:relative}
#shareO h2{font-size:22px}
#shareO img{display:block;width:300px;height:300px;margin:6px auto 10px;border:3px solid var(--ink);border-radius:14px}
#shareClose{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);background:#fff;font:900 16px var(--font);color:var(--ink);cursor:pointer;line-height:1;padding:0}
#shareCard{display:none;margin:0 auto 12px;font-size:16px;padding:8px 22px}
#shareCard.on{display:block}
.socials{display:flex;justify-content:center;gap:10px}
.soc{display:flex;flex-direction:column;align-items:center;gap:5px;font:800 11px var(--font);color:var(--ink);background:none;border:0;cursor:pointer;padding:0}
.soc span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.soc svg{width:22px;height:22px}
.stamp{position:absolute;left:290px;top:322px;font:900 60px var(--font);letter-spacing:3px;color:#d6243a;border:6px double #d6243a;border-radius:10px;padding:0 16px;transform:rotate(-9deg);mix-blend-mode:multiply;opacity:.88;animation:stamp .28s cubic-bezier(.3,1.7,.5,1) both;pointer-events:none}
.shake{animation:shake .45s linear 2}
.calm .shake,.calm .stamp{animation:none}
@keyframes unroll{to{max-height:520px}}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-9px,5px)}40%{transform:translate(8px,-6px)}60%{transform:translate(-6px,-4px)}80%{transform:translate(7px,6px)}}
@keyframes stamp{from{transform:rotate(-9deg) scale(3);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.88}}