.play-page{background:var(--surface-soft);flex-direction:column;width:100%;min-width:0;max-width:100%;height:100dvh;display:flex;overflow:hidden}.play-page.is-together{z-index:1000;position:fixed;inset:0}.play-header{background:var(--paper-strong);border-bottom:1px solid var(--line);z-index:50;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;padding:0 22px;display:grid;position:relative}.play-stats{align-items:center;gap:18px;display:flex}.play-stats span{text-align:center;min-width:60px}.play-stats small,.play-stats b{display:block}.play-stats small{color:var(--muted);font-family:var(--font-geist-mono);letter-spacing:.1em;font-size:.52rem}.play-stats b{font-family:var(--font-geist-mono);margin-top:3px;font-size:.8rem}.play-stats i{background:var(--line);width:1px;height:24px}.play-actions{justify-self:end;align-items:center;gap:8px;display:flex}.play-actions .player-header-action{width:42px;border:1px solid var(--line)!important;background:color-mix(in srgb,var(--paper-strong) 72%,var(--surface-control))!important;min-width:42px!important;min-height:42px!important;color:var(--ink)!important;box-shadow:none!important;border-radius:999px!important;padding:0!important}.play-actions .player-header-action:hover:not(:disabled){border-color:color-mix(in srgb,var(--mint-dark) 48%,var(--line))!important;background:var(--surface-muted)!important}.play-actions .player-header-action:focus-visible{border-color:color-mix(in srgb,var(--mint-dark) 58%,var(--line))!important;box-shadow:0 0 0 3px var(--focus-ring-soft)!important;outline:none!important}.play-actions .player-header-action:disabled{opacity:.52;cursor:help;background:var(--surface-muted)!important}.play-action-icon{width:20px;height:20px;display:block}.player-hint-control{display:inline-flex;position:relative}.play-actions .player-hint-trigger{color:var(--mint-dark)!important}.play-hint-remaining{z-index:1;border:2px solid var(--paper-strong);background:var(--mint-dark);min-width:19px;height:19px;color:var(--primary-on);font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;pointer-events:none;border-radius:999px;place-items:center;padding:0 5px;font-size:.52rem;font-weight:850;line-height:1;display:inline-grid;position:absolute;top:-4px;right:-4px}.player-options-panel{box-sizing:border-box;overscroll-behavior:contain;width:min(19rem,100vw - 1.5rem);max-width:calc(100vw - 1.5rem);max-height:min(72dvh,34rem);overflow:hidden auto}.player-options-divider{background:var(--control-line);flex:0 0 1px;align-self:stretch;height:1px;margin:4px 8px}.player-options-state{color:var(--muted);white-space:nowrap;font-size:.72rem}.player-options-debug{color:var(--mint-dark)}.player-options-exit{color:var(--coral-dark)}.play-workspace{flex-direction:column;flex:1;min-width:0;min-height:0;padding:12px 16px 10px;display:flex}.board-frame{flex:1;min-width:0;min-height:0;position:relative}.board-scroll{overscroll-behavior:contain;border:1px solid var(--line);background-color:var(--surface-board);background-image:radial-gradient(var(--surface-board-dot) 1px,transparent 1px);scrollbar-width:none;background-size:18px 18px;border-radius:22px;width:100%;min-width:0;max-width:100%;height:100%;min-height:0;display:block;overflow:auto}.board-scroll::-webkit-scrollbar{width:0;height:0}.board-canvas-shell{place-items:center;min-width:100%;min-height:100%;display:grid}.canvas-stack{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);flex:none;position:relative}.phaser-puzzle-host{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.phaser-puzzle-host[hidden]{display:none}.phaser-puzzle-host canvas{pointer-events:none;display:block;position:absolute;inset:0;width:100%!important;height:100%!important}.canvas-stack>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.canvas-stack>canvas[data-interaction-layer]{z-index:3;cursor:grab}.canvas-stack>canvas[data-interaction-layer][data-cursor-target=piece],.canvas-stack.piece-selected>canvas[data-interaction-layer]{cursor:move}.canvas-stack.is-panning>canvas[data-interaction-layer]{cursor:grabbing}.canvas-stack>canvas[data-hint-layer],.canvas-stack>canvas[data-selection-layer]{pointer-events:none;width:auto;height:auto;inset:auto}.canvas-stack>canvas[data-hint-layer]{z-index:1;opacity:1}.canvas-stack>canvas[data-selection-layer]{z-index:2;transform-origin:50%}.canvas-stack>canvas[data-selection-layer][data-active=true]{will-change:transform;animation:1.15s ease-in-out infinite selected-piece-float}.canvas-stack.gameplay-paused>canvas[data-interaction-layer],.canvas-stack.gameplay-paused>canvas[data-interaction-layer]:active{cursor:not-allowed}.initial-session-sync-overlay,.initial-session-failure-overlay{z-index:7;border:1px solid var(--line);background:var(--surface-canvas);color:var(--ink);text-align:center;border-radius:22px;place-content:center;justify-items:center;gap:8px;padding:24px;display:grid;position:absolute;inset:0}.initial-session-sync-overlay strong,.initial-session-failure-overlay strong{letter-spacing:-.02em;margin-top:4px;font-size:1rem}.initial-session-sync-overlay>span,.initial-session-failure-overlay>span{max-width:360px;color:var(--muted);font-size:.72rem;line-height:1.55}.canvas-stack.hint-active{box-shadow:inset 0 0 0 2px #f4c95db3,0 0 0 5px #f4c95d1f}.canvas-stack.hint-active>canvas[data-hint-layer]{will-change:opacity;animation:1.05s ease-in-out infinite hint-highlight-blink}.piece-selection-guide{pointer-events:none;z-index:4;border:1px dashed var(--canvas-selection);background:var(--surface-glass-strong);max-width:calc(100% - 28px);color:var(--ink);text-align:center;box-shadow:0 8px 22px var(--shadow-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:.68rem;font-weight:720;line-height:1.35;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.piece-selection-guide[hidden]{display:none}.piece-selection-guide .piece-selection-guide-icon{background:var(--mint);width:20px;height:20px;color:var(--mint-dark);border-radius:50%;flex:none;place-items:center;font-size:.72rem;display:grid}.play-zoom-toolbar{z-index:12;border:1px solid color-mix(in srgb,var(--control-line) 68%,transparent);background:var(--surface-glass-strong);box-shadow:0 10px 28px var(--shadow-medium);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:4px;position:absolute;bottom:12px;right:12px}.play-zoom-toolbar .astryx-button{min-width:38px!important;min-height:38px!important;color:var(--ink)!important;background:color-mix(in srgb,var(--paper-strong) 84%,transparent)!important;border-color:var(--line)!important;box-shadow:none!important}.play-zoom-toolbar .astryx-button:hover:not([aria-disabled=true]):not(:disabled){background:var(--surface-muted)!important}.play-zoom-toolbar .astryx-button:focus-visible{box-shadow:inset 0 0 0 2px var(--focus-ring),0 0 0 2px var(--surface-glass-strong)!important;outline:none!important}.play-zoom-toolbar .play-zoom-fit{font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;font-size:.7rem;min-width:62px!important}.play-zoom-toolbar .play-zoom-button span{font-size:1rem;font-weight:720;line-height:1}.snap-feedback{pointer-events:none;z-index:4;color:#fff;text-align:center;background:#182521e6;border:1px solid #ffffffb3;border-radius:18px;min-width:170px;padding:12px 18px;animation:1.35s both snap-pop;position:absolute;top:9%;left:50%;transform:translate(-50%);box-shadow:0 16px 35px #1825213d}.snap-feedback strong,.snap-feedback span{display:block}.snap-feedback strong{letter-spacing:-.02em;font-size:1rem}.snap-feedback span{color:#ccebdc;margin-top:3px;font-size:.67rem}.snap-feedback.milestone{background:#b8442cf0}.snap-feedback.milestone span{color:#fff4d6}.snap-feedback.chain-snap{background:linear-gradient(135deg,#182521f5,#2f8062f5);border-width:2px;border-color:#fff1a6f5;animation:1.35s cubic-bezier(.2,.85,.2,1) both chain-snap-pop;box-shadow:0 0 0 5px #f4c95d29,0 20px 48px #18252161}.snap-feedback.chain-snap strong{color:#fff4b8;font-size:1.12rem}.hint-message{pointer-events:none;z-index:4;background:var(--surface-glass-strong);max-width:calc(100% - 28px);color:var(--ink);box-shadow:0 10px 24px var(--shadow-medium);border-radius:999px;align-items:center;gap:9px;padding:9px 12px;font-size:.68rem;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.hint-message b{color:var(--coral-dark);font-family:var(--font-geist-mono);font-size:.58rem}.canvas-quality-notice{pointer-events:none;z-index:4;border:1px solid color-mix(in srgb,var(--mint-dark) 34%,var(--line));background:var(--surface-glass-strong);max-width:min(290px,100% - 24px);color:var(--ink);box-shadow:0 10px 24px var(--shadow-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:8px 11px;font-size:.64rem;line-height:1.4;position:absolute;top:12px;right:12px}.canvas-quality-error{z-index:6;background:color-mix(in srgb,var(--surface-canvas) 86%,transparent);color:var(--ink);text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);place-content:center;justify-items:center;gap:8px;padding:24px;display:grid;position:absolute;inset:0}.canvas-quality-error strong{font-size:1rem}.canvas-quality-error>span{max-width:340px;color:var(--muted);font-size:.72rem;line-height:1.55}.canvas-quality-error>div{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;display:flex}.play-bottom{min-height:44px;color:var(--muted);grid-template-columns:auto auto minmax(100px,1fr) auto auto;align-items:center;gap:12px;padding-top:7px;font-size:.64rem;display:grid}.play-session-goal{background:var(--surface-glass);color:var(--mint-dark);white-space:nowrap;border-radius:999px;grid-area:1/2;padding:4px 8px;font-size:.6rem}.mini-progress{grid-area:1/3;width:100%}.play-bottom>strong{color:var(--ink);font-family:var(--font-geist-mono);white-space:nowrap;grid-area:1/4}.play-focus-toggle{grid-area:1/1;justify-self:start;width:38px;border:1px solid var(--line)!important;background:var(--surface-glass)!important;min-width:38px!important;min-height:38px!important;color:var(--ink)!important;box-shadow:none!important;border-radius:12px!important}.play-focus-toggle:hover:not(:disabled){background:var(--surface-muted)!important}.play-focus-icon{width:18px;height:18px;display:block}.play-page.is-focus-mode .play-header{display:none}.play-page.is-focus-mode .play-workspace{padding:calc(4px + env(safe-area-inset-top)) 4px calc(4px + env(safe-area-inset-bottom))}.play-page.is-focus-mode .board-scroll{border-radius:12px}.play-loading,.play-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100vh;display:flex}.loading-piece{background:var(--mint);border-radius:20px 9px;place-items:center;width:70px;height:70px;margin-top:25px;font-size:2rem;animation:1.4s ease-in-out infinite piece-bob;display:grid}.play-loading p,.play-empty p{color:var(--muted)}.play-empty h1{letter-spacing:-.06em;margin:28px 0 0;font-size:2.5rem}@keyframes piece-bob{50%{transform:translateY(-9px)rotate(5deg)}}@keyframes snap-pop{0%{opacity:0;transform:translate(-50%,12px)scale(.84)}16%{opacity:1;transform:translate(-50%)scale(1.04)}72%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-8px)scale(.96)}}@keyframes chain-snap-pop{0%{opacity:0;transform:translate(-50%,18px)scale(.7)rotate(-1.5deg)}13%{opacity:1;transform:translate(-50%,-3px) scale(var(--chain-scale,1.16)) rotate(1deg)}28%{transform:translate(-50%)scale(1.04)rotate(0)}72%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-12px)scale(.94)}}@keyframes hint-highlight-blink{0%,to{opacity:1}50%{opacity:.62}}@keyframes selected-piece-float{0%,to{transform:translateY(1px)rotate(-1.1deg)}50%{transform:translateY(-6px)rotate(1.25deg)}}@keyframes completion-original-reveal{0%{filter:saturate(.86)brightness(.9)contrast(.94);transform:scale(.992)}58%{filter:saturate(.94)brightness(.96)contrast(.98);transform:scale(.997)}82%{filter:saturate(1.06)brightness(1.035)contrast(1.015);transform:scale(1.002)}to{filter:none;transform:scale(1)}}@keyframes completion-lines-dissolve{0%,28%{opacity:1;filter:blur()}68%{opacity:.72;filter:blur(.15px)}90%{opacity:.12;filter:blur(1.2px)}to{opacity:0;filter:blur(2px)}}@keyframes completion-reveal-sheen{0%,47%{opacity:0;transform:translate(-62%)skew(-8deg)}58%{opacity:.16}73%{opacity:.88}88%{opacity:.12;transform:translate(58%)skew(-8deg)}to{opacity:0;transform:translate(64%)skew(-8deg)}}@keyframes completion-starlight-halo{0%{opacity:0;transform:translate(-50%,-50%)scale(.22)}24%{opacity:.88}58%{opacity:.42;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.46)}}@keyframes completion-starlight-ring{0%{opacity:0;transform:translate(-50%,-50%)scale(.18)}30%{opacity:.78}to{opacity:0;transform:translate(-50%,-50%)scale(1.72)}}@keyframes completion-star-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(calc(var(--star-rotation) - 18deg))}24%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(var(--star-rotation))}48%{opacity:.7;transform:translate(-50%,-50%) scale(.72) rotate(calc(var(--star-rotation) + 5deg))}66%{opacity:.98;transform:translate(-50%,-50%) scale(1.02) rotate(calc(var(--star-rotation) + 8deg))}to{opacity:0;transform:translate(-50%,-50%) scale(.16) rotate(calc(var(--star-rotation) + 16deg))}}.complete-dialog{--color-background-surface:var(--paper-strong);--color-background-card:var(--paper-strong);--color-text-primary:var(--ink);--color-text-secondary:var(--muted);--color-accent:var(--button-strong-bg);--color-on-accent:var(--button-strong-text);--color-border:var(--line);--completion-reveal-duration:4s;background:var(--paper-strong);color:var(--ink);overflow:hidden}.complete-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.complete-dialog h2[tabindex="-1"]:focus{outline:none}.complete-content{background:color-mix(in srgb,var(--surface-soft) 52%,var(--paper-strong));text-align:left}.completion-reveal{isolation:isolate;background:color-mix(in srgb,var(--surface-board) 76%,var(--ink));width:100%;height:clamp(280px,46dvh,520px);box-shadow:inset 0 -1px 0 var(--line);position:relative;overflow:hidden}.completion-reveal-image{object-fit:contain;image-rendering:auto;opacity:0;transform-origin:50%;width:100%;height:100%;display:block}.completion-reveal.is-ready .completion-reveal-image{opacity:1}.completion-reveal-lines{z-index:2;pointer-events:none;opacity:0;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.completion-reveal-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}.completion-reveal-line-shadow{stroke:color-mix(in srgb,var(--ink) 46%,transparent);stroke-width:3.5px}.completion-reveal-line-light{stroke:color-mix(in srgb,var(--paper-strong) 86%,transparent);stroke-width:1.35px}.completion-reveal-sheen{z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(108deg,#0000 38%,#ffffff14 45%,#ffffffb8 50%,#ffffff1a 55%,#0000 62%);position:absolute;inset:-24% -42%;transform:translate(-62%)skew(-8deg)}.completion-starlight{z-index:4;pointer-events:none;contain:layout paint;position:absolute;inset:0;overflow:hidden}.completion-starlight-halo,.completion-starlight-ring{aspect-ratio:1;opacity:0;pointer-events:none;border-radius:50%;position:absolute;top:50%;left:50%}.completion-starlight-halo{filter:blur(1.5px);mix-blend-mode:screen;background:radial-gradient(circle,#ffffffb8 0 3%,#f4c95d66 12%,#4aa98924 32%,#0000 68%);width:min(76%,460px)}.completion-starlight-ring{border:1px solid #fff3c2c7;width:min(58%,340px);box-shadow:0 0 14px #f4c95d57,inset 0 0 12px #ffffff47}.completion-star{--star-color:#fffdf4;--star-glow:#ffffffe0;left:var(--star-x);top:var(--star-y);width:var(--star-size);aspect-ratio:1;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0 9%,var(--star-color) 42%,color-mix(in srgb,var(--star-color) 76%,#fff) 100%);clip-path:polygon(50% 0,56% 38%,85% 15%,62% 44%,100% 50%,62% 56%,85% 85%,56% 62%,50% 100%,44% 62%,15% 85%,38% 56%,0 50%,38% 44%,15% 15%,44% 38%);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--star-glow));transform-origin:50%;position:absolute}.completion-star[data-tone=gold]{--star-color:#f4c95d;--star-glow:#e7a827cc}.completion-star[data-tone=mint]{--star-color:#9fe0c8;--star-glow:#4aa989b8}.completion-reveal.is-active.is-ready .completion-reveal-image{animation:completion-original-reveal var(--completion-reveal-duration) cubic-bezier(.22,.68,.18,1) both}.completion-reveal.is-active.is-ready .completion-reveal-lines{animation:completion-lines-dissolve var(--completion-reveal-duration) cubic-bezier(.2,.7,.2,1) both}.completion-reveal.is-active.is-ready .completion-reveal-sheen{animation:completion-reveal-sheen var(--completion-reveal-duration) cubic-bezier(.2,.72,.2,1) both}.completion-reveal.is-active.is-ready .completion-starlight-halo{animation:1.48s cubic-bezier(.16,.76,.24,1) both completion-starlight-halo}.completion-reveal.is-active.is-ready .completion-starlight-ring{animation:1.36s cubic-bezier(.18,.72,.22,1) 80ms both completion-starlight-ring}.completion-reveal.is-active.is-ready .completion-star{animation:completion-star-bloom var(--star-duration) cubic-bezier(.18,.76,.2,1) var(--star-delay) both}.complete-result-meta{background:var(--paper-strong);justify-content:center;align-items:center;gap:14px;min-height:88px;padding:18px 26px;display:flex}.complete-result-mark{border:1px solid color-mix(in srgb,var(--mint-dark) 22%,var(--line));background:var(--mint);width:42px;height:42px;color:var(--mint-dark);box-shadow:0 9px 24px color-mix(in srgb,var(--mint-dark) 12%,transparent);border-radius:15px 8px;flex:none;place-items:center;font-size:1rem;font-weight:850;display:grid;transform:rotate(-4deg)}.complete-result-copy{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;min-width:0;display:flex}.complete-result-copy p{color:var(--muted);font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;margin:0;font-size:.72rem;line-height:1.55}.complete-combo{font-family:var(--font-geist-mono);font-size:.68rem;display:inline-flex}.complete-multiplayer-result{border-top:1px solid var(--line);background:var(--paper);gap:12px;padding:18px 24px;display:grid}.complete-multiplayer-result>.astryx-badge{justify-self:start}.complete-player-score-briefing{gap:10px;min-width:0;display:grid}.complete-player-score-briefing h3{letter-spacing:-.02em;margin:0;font-size:.92rem}.complete-player-score-briefing p{color:var(--muted);margin:0;font-size:.72rem;line-height:1.6}.complete-replay-status{gap:10px;display:grid}.complete-replay-status p{color:var(--muted);margin:0;font-size:.72rem;line-height:1.6}.complete-actions{gap:12px;width:100%;display:grid}.complete-primary-action{min-height:50px}.complete-secondary-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.complete-secondary-actions .pieceflow-button{min-width:0;padding-inline:14px}.session-goal-dialog{--color-background-surface:var(--paper-strong);--color-background-card:var(--paper-strong);--color-text-primary:var(--ink);--color-text-secondary:var(--muted);--color-accent:var(--button-strong-bg);--color-on-accent:var(--button-strong-text);--color-border:var(--line);background:var(--paper-strong);color:var(--ink)}.session-goal-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.session-goal-dialog h2[tabindex="-1"]:focus{outline:none}.session-goal-content{text-align:center;justify-items:center;display:grid}.session-goal-content p{max-width:32rem;color:var(--muted);margin:0;font-size:.78rem;line-height:1.65}.session-goal-icon{background:var(--mint);width:58px;height:58px;color:var(--mint-dark);border-radius:21px 10px;place-items:center;margin-bottom:16px;font-size:1.45rem;display:grid;transform:rotate(-4deg)}.session-goal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;display:grid}.snap-mode-dialog,.piece-layout-dialog{--color-background-surface:var(--paper-strong);--color-background-card:var(--paper-strong);--color-text-primary:var(--ink);--color-text-secondary:var(--muted);--color-accent:var(--button-strong-bg);--color-on-accent:var(--button-strong-text);--color-border:var(--line);background:var(--paper-strong);color:var(--ink)}.piece-layout-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.piece-layout-dialog h2[tabindex="-1"]:focus{outline:none}.piece-layout-dialog-details{color:var(--muted);margin:0;font-size:.9rem;line-height:1.65}.piece-layout-dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.restart-options-dialog{--color-background-surface:var(--paper-strong);--color-background-card:var(--paper-strong);--color-text-primary:var(--ink);--color-text-secondary:var(--muted);--color-accent:var(--button-strong-bg);--color-on-accent:var(--button-strong-text);--color-border:var(--line);background:var(--paper-strong);color:var(--ink)}.restart-options-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.restart-options-dialog h2[tabindex="-1"]:focus{outline:none}.restart-options-content{min-width:0}.restart-options-fields{gap:18px;display:grid}.restart-options-fields .astryx-selector{min-width:0}.restart-options-warning,.restart-options-error{width:100%}.restart-options-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.multiplayer-menu-status,.multiplayer-connection-indicator>span,.multiplayer-latency-dot{background:var(--muted);width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 14%,transparent);border-radius:50%;flex:none}.multiplayer-menu-status[data-status=connected],.multiplayer-connection-indicator[data-status=connected]>span,.multiplayer-latency[data-quality=good] .multiplayer-latency-dot{background:var(--mint-dark);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint-dark) 16%,transparent)}.multiplayer-menu-status[data-status=reconnecting],.multiplayer-connection-indicator[data-status=reconnecting]>span,.multiplayer-latency[data-quality=fair] .multiplayer-latency-dot{background:#d89b16;box-shadow:0 0 0 3px #d89b162e}.multiplayer-menu-status[data-status=disconnected],.multiplayer-connection-indicator[data-status=disconnected]>span,.multiplayer-latency[data-quality=poor] .multiplayer-latency-dot{background:var(--coral-dark);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral-dark) 16%,transparent)}.multiplayer-information-dialog{--color-background-surface:var(--paper-strong);--color-background-card:var(--paper-strong);--color-text-primary:var(--ink);--color-text-secondary:var(--muted);--color-accent:var(--button-strong-bg);--color-on-accent:var(--button-strong-text);--color-border:var(--line);background:var(--paper-strong);color:var(--ink)}.multiplayer-information-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.multiplayer-information-dialog h2[tabindex="-1"]:focus{outline:none}.multiplayer-information-content{min-width:0}.multiplayer-information-content section+section{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}.multiplayer-information-content h3{letter-spacing:-.02em;margin:0 0 12px;font-size:.92rem}.multiplayer-information-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;display:grid}.multiplayer-information-metrics>div{border:1px solid var(--line);background:var(--surface-soft);border-radius:13px;min-width:0;padding:12px}.multiplayer-information-metrics dt{color:var(--muted);font-size:.68rem;line-height:1.4}.multiplayer-information-metrics dd{font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:5px 0 0;font-size:.72rem;font-weight:720}.multiplayer-connection-indicator,.multiplayer-latency{align-items:center;gap:8px;display:inline-flex}.multiplayer-information-peer-list{gap:8px;display:grid}.multiplayer-information-peer{border:1px solid var(--line);background:var(--surface-glass);border-radius:13px;justify-content:space-between;align-items:center;gap:16px;padding:11px 12px;display:flex}.multiplayer-information-peer>div{gap:3px;min-width:0;display:grid}.multiplayer-information-peer strong{font-size:.76rem}.multiplayer-information-peer>div span{color:var(--muted);font-size:.65rem}.multiplayer-latency{font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;flex:none;font-size:.68rem}.multiplayer-information-copy,.multiplayer-information-empty,.multiplayer-information-privacy{color:var(--muted);margin:0;font-size:.7rem;line-height:1.6}.multiplayer-voice-controls{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.multiplayer-voice-state{color:var(--muted);margin:9px 0 0;font-size:.68rem;line-height:1.5}.multiplayer-voice-state[data-ready=true]{color:var(--mint-dark);font-weight:700}.multiplayer-chat-log{border:1px solid var(--line);background:var(--surface-soft);border-radius:13px;gap:7px;max-height:190px;margin-top:16px;padding:10px;display:grid;overflow-y:auto}.multiplayer-chat-log>p{background:var(--surface-glass);overflow-wrap:anywhere;white-space:pre-wrap;border-radius:10px;gap:3px;margin:0;padding:8px 10px;font-size:.72rem;line-height:1.45;display:grid}.multiplayer-chat-log>p[data-local=true]{background:color-mix(in srgb,var(--mint) 42%,var(--surface-soft));margin-left:min(15%,48px)}.multiplayer-chat-log strong{color:var(--muted);font-size:.62rem}.multiplayer-chat-typing{min-height:1.4em;color:var(--muted);margin:6px 0;font-size:.64rem}.multiplayer-chat-compose{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;display:grid}.multiplayer-protocol-table-scroll{border:1px solid var(--line);border-radius:13px;max-width:100%;margin-top:12px;overflow-x:auto}.multiplayer-protocol-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;min-width:630px;font-size:.66rem}.multiplayer-protocol-table th,.multiplayer-protocol-table td{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap;padding:10px 12px}.multiplayer-protocol-table thead th{background:var(--surface-soft);color:var(--muted);font-weight:720}.multiplayer-protocol-table tbody tr:last-child>*{border-bottom:0}.multiplayer-protocol-table tbody th{gap:3px;min-width:190px;display:grid}.multiplayer-protocol-table code{color:var(--mint-dark);font-family:var(--font-geist-mono);font-size:.66rem}.multiplayer-protocol-table tbody th span{max-width:260px;color:var(--muted);text-overflow:ellipsis;font-weight:500;overflow:hidden}.multiplayer-fair-table{min-width:520px}.multiplayer-fair-table tbody tr[data-local=true]{background:color-mix(in srgb,var(--mint) 34%,transparent)}.multiplayer-fair-table tbody tr[data-completed=true] td{font-weight:720}.multiplayer-player-score-table{min-width:580px}.multiplayer-player-score-table tbody tr[data-local=true]{background:color-mix(in srgb,var(--mint) 38%,transparent)}.multiplayer-player-score-table tbody tr[data-rank="1"]>*{font-weight:780}.multiplayer-player-score-table tbody th{min-width:145px}.multiplayer-player-score-rank{color:var(--mint-dark);font-weight:780}.multiplayer-information-empty{border:1px dashed var(--line);text-align:center;border-radius:13px;margin-top:12px;padding:16px}.multiplayer-information-privacy{background:color-mix(in srgb,var(--mint) 42%,var(--surface-soft));color:var(--ink);border-radius:13px;margin-top:22px;padding:12px}.multiplayer-information-actions{justify-content:flex-end;display:flex}.ad-break-dialog{background:var(--paper-strong);color:var(--ink)}.ad-break-content{text-align:center}.ad-countdown strong{border:1px solid color-mix(in srgb,var(--coral) 58%,var(--line));background:color-mix(in srgb,var(--coral) 16%,var(--surface-soft));width:92px;height:92px;color:var(--coral-dark);font-family:var(--font-geist-mono);box-shadow:0 18px 42px color-mix(in srgb,var(--coral) 18%,transparent);border-radius:32px 16px;place-items:center;margin:2px auto 18px;font-size:3rem;line-height:1;display:grid}.ad-countdown p,.mock-ad p{color:var(--muted);margin:0;font-size:.78rem;line-height:1.6}.mock-ad{justify-items:center;gap:10px;padding:8px 0;display:grid}.mock-ad>span{background:var(--mint);width:64px;height:64px;color:var(--mint-dark);font-family:var(--font-geist-mono);letter-spacing:.12em;border-radius:20px 10px;place-items:center;font-size:.72rem;font-weight:850;display:grid}.mock-ad strong{letter-spacing:-.035em;font-size:1.15rem}.ad-break-actions{justify-content:center;display:flex}.ad-break-actions .pieceflow-button{min-width:190px}@media (max-width:760px){.play-header{grid-template-columns:1fr auto;height:62px;padding:0 12px}.play-stats{display:none}.play-actions{gap:8px;max-width:none;overflow:visible}.play-actions .player-header-action{width:44px;min-width:44px!important;min-height:44px!important}.player-options-panel{max-height:calc(100dvh - 78px)}.play-workspace{padding:8px 8px calc(6px + env(safe-area-inset-bottom))}.board-scroll{border-radius:16px}.play-zoom-toolbar{bottom:8px;right:8px}.play-zoom-toolbar .astryx-button{min-width:42px!important;min-height:42px!important}.play-zoom-toolbar .play-zoom-fit{min-width:60px!important}.piece-selection-guide{border-radius:14px;width:max-content;max-width:calc(100% - 16px);padding:7px 10px;font-size:.64rem;top:8px}.snap-feedback{min-width:150px;padding:9px 14px;top:7%}.hint-message{border-radius:14px;width:calc(100% - 16px);bottom:8px}.play-bottom{grid-template-columns:auto auto minmax(64px,1fr) auto auto;gap:6px;min-height:44px;padding-top:2px;font-size:.58rem}.play-session-goal{padding:3px 6px;font-size:.55rem}.play-focus-toggle{width:44px;min-width:44px!important;min-height:44px!important}.complete-actions .pieceflow-button{width:100%}.completion-reveal{height:clamp(220px,36dvh,300px)}.completion-star{width:calc(var(--star-size) * .8)}.complete-result-meta{min-height:76px;padding:14px 18px}.complete-result-mark{width:38px;height:38px}.complete-result-copy p{font-size:.66rem}.session-goal-actions{grid-template-columns:1fr}.session-goal-content p{font-size:.74rem}}@media (min-width:421px) and (max-width:760px){.complete-dialog.is-portrait .completion-reveal{height:clamp(300px,42dvh,360px)}}@media (max-width:420px){.complete-actions{gap:10px}.complete-secondary-actions{grid-template-columns:1fr;gap:8px}.play-bottom>strong{font-size:.58rem}}@media (max-width:520px){.piece-layout-dialog-actions,.restart-options-actions{grid-template-columns:1fr;display:grid}.piece-layout-dialog-actions .astryx-button,.restart-options-actions .astryx-button{width:100%}.multiplayer-information-metrics{grid-template-columns:1fr}.multiplayer-information-peer{align-items:flex-start}.multiplayer-information-actions{display:grid}.multiplayer-information-actions .astryx-button{width:100%}.multiplayer-chat-compose{grid-template-columns:1fr}.multiplayer-chat-compose .astryx-button{width:100%}}@media (max-width:760px){.canvas-quality-notice{max-width:calc(100% - 16px);top:8px;right:8px}.canvas-quality-error,.initial-session-sync-overlay,.initial-session-failure-overlay{padding:18px}.initial-session-sync-overlay,.initial-session-failure-overlay{border-radius:16px}.canvas-quality-error>div{width:min(100%,260px);display:grid}}@media (prefers-reduced-motion:reduce){.canvas-stack.hint-active>canvas[data-hint-layer]{opacity:1;animation:none}.canvas-stack>canvas[data-selection-layer][data-active=true]{animation:none;transform:none}.snap-feedback.chain-snap{opacity:1;animation:none;transform:translate(-50%)}.completion-reveal.is-active.is-ready .completion-reveal-image{filter:none;animation:none;transform:none}.completion-reveal.is-active.is-ready .completion-reveal-lines{opacity:0;filter:none;animation:none}.completion-reveal.is-active.is-ready .completion-reveal-sheen,.completion-starlight{display:none}}
