.play-pill-open{background:#0090ff;border-color:#0090ff;color:#fff}.play-chevron{flex-shrink:0;transition:transform .16s cubic-bezier(.2,.8,.2,1)}.play-pill-open .play-chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.play-chevron{transition:none}}.play-dim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#00000026;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .16s cubic-bezier(.2,.8,.2,1);pointer-events:none}.play-dim[data-state=open]{opacity:1;pointer-events:auto}.play-dim[data-state=closing]{opacity:0;pointer-events:none}@media (prefers-reduced-motion: reduce){.play-dim{transition:none}}.play-menu{position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 98px);left:10px;z-index:11;width:224px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:12px;padding:8px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 32px #00000040;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top left;transition:opacity .16s cubic-bezier(.2,.8,.2,1),transform .16s cubic-bezier(.2,.8,.2,1);pointer-events:none}.play-menu[data-state=open]{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.play-menu[data-state=closing]{opacity:0;transform:translateY(-6px) scale(.96);transition-duration:var(--close-duration, .12s);transition-timing-function:cubic-bezier(.2,.8,.2,1);pointer-events:none}@media (prefers-reduced-motion: reduce){.play-menu{transition:none}}.play-menu-primary{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#fff;font-weight:600;font-size:14px;background:#0090ff;border:none;border-radius:8px;cursor:pointer;touch-action:manipulation;text-decoration:none;min-height:48px}.play-menu-primary:active{background:#0070cc}.play-menu-icon{flex-shrink:0;width:20px;height:20px}.play-menu-primary-content{display:flex;flex-direction:column;gap:2px;min-width:0}.play-menu-title{line-height:1.2;font-weight:600;font-size:14px}.play-menu-subtitle{font-size:11px;font-weight:400;color:#ffffffd9;line-height:1.2}.play-menu-row{display:flex;gap:4px}.play-menu-half{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;font-size:13px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:8px;cursor:pointer;touch-action:manipulation;text-decoration:none;min-height:44px}.play-menu-half:active{background:var(--ui-border)}.play-menu-divider{border:none;border-top:1px solid var(--ui-border);margin:4px 0}.play-menu-plain{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 14px;font-size:13px;color:var(--ui-text);background:transparent;border:none;border-radius:8px;cursor:pointer;touch-action:manipulation;text-decoration:none;min-height:44px}.play-menu-plain:active{background:var(--ui-border)}@media (max-height: 650px){.play-menu{max-height:calc(100vh - 160px);overflow-y:auto}}@media (prefers-reduced-motion: reduce){.play-chevron,.play-dim,.play-menu,.play-menu[data-state=closing]{transition:none!important}}:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:light dark;--ui-bg: rgba(255, 255, 255, .92);--ui-border: rgba(0, 0, 0, .1);--ui-text: #1d1d1f;--ui-muted: #86868b}@media (prefers-color-scheme: dark){:root{--ui-bg: rgba(30, 30, 32, .92);--ui-border: rgba(255, 255, 255, .14);--ui-text: #f5f5f7;--ui-muted: #98989d}}*{box-sizing:border-box}html,body,#root{margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#ececef}.draw-wrap{position:relative;width:100%;height:100%;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.draw-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.recenter-button{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--ui-text);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;box-shadow:0 4px 12px #0000001a;touch-action:manipulation}.share-button{right:56px}.share-notice{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 40px);left:50%;transform:translate(-50%);z-index:20;font-size:12px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:4px 10px;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px #0003}.name-pill{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;z-index:2}.play-pill{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 46px);left:10px;z-index:3;font:inherit;font-size:13px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:6px 12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;touch-action:manipulation;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px}.play-pill:hover{background:var(--ui-border)}.play-pill-open{background:#0090ff;border-color:#0090ff;color:#fff;z-index:12}.play-dim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#00000026;-webkit-tap-highlight-color:transparent}.name-button,.name-input{font:inherit;font-size:13px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:6px 12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.name-button{cursor:pointer}.name-input{width:140px;outline:none}.toolbar{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:2;width:min(500px,calc(100vw - 20px));background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:16px;padding:8px 10px 10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 28px #0000002e}.ink-meter{height:4px;border-radius:999px;background:#00000014;overflow:hidden;margin-bottom:8px}@media (prefers-color-scheme: dark){.ink-meter{background:#ffffff1f}}.ink-fill{height:100%;border-radius:inherit;background:#0090ff;transition:width .2s linear}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}.swatches{display:flex;gap:6px;flex:1}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;flex:none;touch-action:manipulation}.swatch-active{border-color:var(--ui-text);box-shadow:inset 0 0 0 2px var(--ui-bg)}.brushes{display:flex;gap:2px}.brush{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--ui-muted);background:none;border:none;border-radius:8px;padding:4px 6px;cursor:pointer;min-width:34px;touch-action:manipulation}.brush-dot{display:block;border-radius:50%;background:currentColor}.brush-active{color:var(--ui-text);background:#0000000f}@media (prefers-color-scheme: dark){.brush-active{background:#ffffff1a}}.undo-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--ui-border);background:none;color:var(--ui-text);cursor:pointer;flex:none;touch-action:manipulation}.undo-button:disabled{opacity:.35;cursor:default}.status-pill{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:2;display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:6px 10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ui-muted)}.status-dot-live{background:#30a46c}.status-dot-warn{background:#f5a623}.status-dot-down{background:var(--ui-muted);animation:status-pulse 1.2s ease-in-out infinite}@keyframes status-pulse{50%{opacity:.35}}.ink-meter-flash{animation:ink-shake .3s ease-in-out}.ink-meter-flash .ink-fill{background:#e5484d}@keyframes ink-shake{20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}.report-active{color:#e5484d;border-color:#e5484d80}.name-notice{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 40px);left:10px;z-index:2;font-size:12px;color:var(--ui-muted);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:8px;padding:4px 8px;pointer-events:none}.banned-notice{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 40px);left:50%;transform:translate(-50%);z-index:2;font-size:12px;color:var(--ui-muted);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:4px 10px;pointer-events:none;white-space:nowrap}.report-thanks{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 40px);left:50%;transform:translate(-50%);z-index:20;font-size:12px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:4px 10px;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px #0003}.report-popover{position:absolute;z-index:3;transform:translate(-50%,14px);display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;padding:6px 8px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px #0003}.report-author{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-popover button{font:inherit;font-size:12px;border:1px solid var(--ui-border);border-radius:7px;background:transparent;color:inherit;padding:4px 8px;cursor:pointer}.report-popover .report-go{color:#e5484d;border-color:#e5484d80}.report-popover .report-close{padding:4px 6px}.admin-loading{display:grid;place-items:center;height:100dvh;color:var(--ui-muted)}.admin-shell{min-height:100dvh;background:var(--ui-bg);color:var(--ui-text);padding:24px 16px 64px}.admin-shell>*{max-width:880px;margin-inline:auto}.admin-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.admin-header h1{font-size:18px;margin:0 auto 0 0}.admin-tabs,.admin-actions{display:flex;gap:8px}.admin-tabs button,.admin-actions button,.admin-card button,.admin-card input{font:inherit;font-size:13px;color:var(--ui-text);background:transparent;border:1px solid var(--ui-border);border-radius:8px;padding:6px 12px;cursor:pointer}.admin-tab-active{background:var(--ui-border)}.admin-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ui-border);border-radius:12px;padding:16px;background:#ffffff80}@media (prefers-color-scheme: dark){.admin-card{background:#00000040}}.admin-list{display:flex;flex-direction:column;gap:12px}.admin-row{flex-direction:row;align-items:flex-start;gap:16px}.admin-meta{display:flex;flex-direction:column;gap:6px;min-width:0}.admin-muted{color:var(--ui-muted);font-size:13px}.admin-error{color:#e5484d;font-size:13px}.admin-notice{color:#30a46c;font-size:13px}.admin-reports{color:#f5a623;font-size:13px}.admin-hidden{color:#e5484d;font-size:13px}.leaderboard{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 46px);right:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100vw - 24px)}.leaderboard-toggle{display:flex;align-items:center;gap:6px;font:inherit;font-size:12px;color:var(--ui-text);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;padding:6px 10px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);touch-action:manipulation}.leaderboard-chevron{color:var(--ui-muted);font-size:10px}.leaderboard-card{width:min(216px,calc(100vw - 24px));background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:12px;padding:8px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 28px #0000002e}.leaderboard-windows{display:flex;gap:4px;margin-bottom:6px}.leaderboard-window{font:inherit;font-size:12px;color:var(--ui-muted);background:transparent;border:1px solid var(--ui-border);border-radius:999px;padding:3px 10px;cursor:pointer;touch-action:manipulation}.leaderboard-window-active{color:var(--ui-text);background:#0000000f}@media (prefers-color-scheme: dark){.leaderboard-window-active{background:#ffffff1f}}.leaderboard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}.leaderboard-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text);padding:2px}.leaderboard-me{font-weight:600}.leaderboard-flag{width:18px;text-align:center}.leaderboard-code{width:22px}.leaderboard-metrics{color:var(--ui-muted);margin-left:auto;white-space:nowrap}.leaderboard-empty,.leaderboard-legend{font-size:11px;color:var(--ui-muted);padding:2px}.leaderboard-legend{margin-top:4px;text-align:right}.status-bar{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px}.status-pill{position:static;transform:none}.status-footer{display:flex;gap:10px;font-size:11px;color:var(--ui-muted)}.status-footer-item a{color:inherit;text-decoration:none}.status-footer-item a:hover{text-decoration:underline}.status-footer-link{display:inline-block;padding:13px 6px;margin:-13px -6px}@media (hover: hover){.play-pill:hover{background-color:var(--ui-bg);background-image:linear-gradient(var(--ui-border),var(--ui-border))}}.play-pill.play-pill-open,.play-pill.play-pill-open:hover{background-color:#0090ff;background-image:none;border-color:#0090ff;color:#fff}.draw-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='white' stroke-width='3'/%3E%3Cpath d='M12 2v20M2 12h20' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 12 12,crosshair}