.game-dpad{--dpad-angle:0deg;width:var(--dpad-size,clamp(150px, 46vw, 210px));aspect-ratio:1;border:1px solid var(--line);background:linear-gradient(45deg, transparent calc(50% - .75px), var(--line) 50%, transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), var(--line) 50%, transparent calc(50% + .75px)), var(--paper);box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-radius:50%;flex-shrink:0;position:relative}.game-dpad:before{content:"";background:conic-gradient(from -45deg, color-mix(in srgb, var(--gold) 34%, var(--paper)) 0 90deg, transparent 90deg);opacity:0;transform:rotate(var(--dpad-angle));pointer-events:none;border-radius:50%;transition:opacity 80ms;position:absolute;inset:0;mask:radial-gradient(circle,#0000 18%,#000 18.5%)}.game-dpad[data-active]:before{opacity:1}.game-dpad[data-active=right]{--dpad-angle:90deg}.game-dpad[data-active=down]{--dpad-angle:180deg}.game-dpad[data-active=left]{--dpad-angle:270deg}.game-dpad:after{content:"";border:1px solid var(--line);background:var(--paper);pointer-events:none;border-radius:50%;position:absolute;inset:34%}.game-dpad button{z-index:1;width:34%;height:34%;color:inherit;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute}.game-dpad button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.game-dpad svg{fill:none;stroke:currentColor;stroke-width:2.8px;stroke-linecap:round;stroke-linejoin:round;width:46%;height:46%}.game-dpad-up{top:2%;left:33%}.game-dpad-down{bottom:2%;left:33%}.game-dpad-down svg{transform:rotate(180deg)}.game-dpad-left{top:33%;left:2%}.game-dpad-left svg{transform:rotate(-90deg)}.game-dpad-right{top:33%;right:2%}.game-dpad-right svg{transform:rotate(90deg)}.game-dpad[data-active=up] .game-dpad-up,.game-dpad[data-active=right] .game-dpad-right,.game-dpad[data-active=down] .game-dpad-down,.game-dpad[data-active=left] .game-dpad-left{color:var(--focus)}.game-dpad[aria-disabled=true]{opacity:.55}.game-dpad[aria-disabled=true] button{cursor:default}@media (prefers-reduced-motion:reduce){.game-dpad:before{transition:none}}.sn{--sn-frame:#dfe7cf;--sn-card:#fff;--sn-card-ink:#1d2a22}.sn-stage{--dpad-size:clamp(150px, 46vw, 210px);--sn-field:min(100%, 560px);justify-items:center;gap:14px;display:grid}.sn-field{width:var(--sn-field);max-width:var(--sn-field);grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;display:grid}:is(.game-frame:fullscreen,.game-frame-expanded) .sn-stage{--dpad-size:clamp(140px, min(50cqw, 30cqh), 220px);--sn-chrome:84px;--sn-field:min(100cqw - 16px, 100cqh - var(--sn-chrome));box-sizing:border-box;grid-template-rows:auto 1fr;min-height:100cqh;padding-bottom:8px}:is(.game-frame:fullscreen,.game-frame-expanded) .sn-stage[data-pad]{--sn-chrome:calc(var(--dpad-size) + 112px)}.game-frame:not(:fullscreen,.game-frame-expanded) .sn-stage{padding-bottom:24px}.sn-pad{align-self:end}.sn-stage[data-pad-side=left] .sn-pad{justify-self:start;margin-inline-start:12px}.sn-stage[data-pad-side=right] .sn-pad{justify-self:end;margin-inline-end:12px}.sn-hud{justify-content:space-between;align-items:end;gap:12px;min-width:0;display:flex}.sn-hud-mode{gap:4px;min-width:0;display:grid}.sn-chip{text-overflow:ellipsis;border:1px solid var(--line);background:var(--paper);max-width:100%;color:var(--ink);white-space:nowrap;border-radius:999px;justify-self:start;padding:3px 10px;font-size:.82rem;font-weight:700;overflow:hidden}.sn-hud-detail,.sn-goal{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.sn-goal{align-items:center;gap:8px;display:flex}.sn-goal-bar{background:var(--line);border-radius:999px;width:72px;height:6px;position:relative;overflow:hidden}.sn-goal-bar:after{content:"";width:calc(var(--share) * 100%);border-radius:inherit;background:var(--gold);transition:width .2s;position:absolute;inset:0 auto 0 0}.sn-scores{flex-shrink:0;gap:8px;margin:0;display:flex}.sn-scores>div{border:1px solid var(--line);background:var(--paper);text-align:center;border-radius:12px;min-width:64px;padding:5px 12px 6px;display:grid}.sn-scores dt{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;font-weight:700}.sn-scores dd{color:var(--ink);font-variant-numeric:tabular-nums;margin:0;font-size:1.35rem;font-weight:800;line-height:1.15}.sn-pop{animation:.26s ease-out sn-pop}@keyframes sn-pop{0%{color:var(--focus);text-shadow:0 0 12px color-mix(in srgb, var(--gold) 70%, transparent)}}.sn-surface{aspect-ratio:1;width:100%;box-shadow:0 0 0 1px var(--sn-frame), 0 14px 34px -18px color-mix(in srgb, var(--ink) 55%, transparent);border-radius:20px;position:relative;container-type:inline-size}.sn-board{border-radius:inherit;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:absolute;inset:0}.sn-board:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.sn-board canvas{border-radius:inherit;width:100%;height:100%;display:block}.sn-veil{border-radius:inherit;background:color-mix(in srgb, var(--sn-card) 22%, transparent);pointer-events:none;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.sn-veil[data-place=start]{place-items:start center}.sn-veil[data-place=end]{place-items:end center}.sn-card{background:var(--sn-card);max-width:min(320px,88%);box-shadow:0 12px 30px -14px color-mix(in srgb, var(--sn-card-ink) 60%, transparent);color:var(--sn-card-ink);text-align:center;border-radius:18px;justify-items:center;gap:6px;padding:clamp(12px,5cqi,22px) clamp(16px,7cqi,28px);font-size:clamp(.78rem,3.6cqi,.95rem);display:grid}.sn-card strong{letter-spacing:-.01em;font-size:clamp(1.05rem,6cqi,1.45rem)}.sn-card-hint{align-items:center;gap:8px;margin-top:4px;font-weight:700;display:flex}.sn-keys svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:30px;height:20px;display:block}.sn-end{gap:8px;max-width:min(360px,92%)}.sn-end-actions{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;display:flex}.sn-end-actions .game-button{white-space:nowrap}.sn-text-button{min-height:44px;color:var(--sn-card-ink);font:inherit;text-underline-offset:3px;cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:999px;padding:0 12px;font-weight:700;text-decoration:underline}.sn-text-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sn-toast{background:var(--sn-card);width:max-content;max-width:88%;box-shadow:0 8px 20px -12px color-mix(in srgb, var(--sn-card-ink) 60%, transparent);color:var(--sn-card-ink);text-align:center;pointer-events:none;border-radius:999px;margin:0 auto;padding:7px 14px;font-size:clamp(.72rem,3.4cqi,.9rem);font-weight:700;animation:2.2s both sn-toast;position:absolute;inset:auto 0 12px}@keyframes sn-toast{0%{opacity:0}10%,88%{opacity:1}to{opacity:0}}.sn-modes{gap:10px;display:grid}.sn-mode{border:1px solid var(--line);background:var(--paper);width:100%;min-height:64px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:16px;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:12px 16px;transition:border-color .15s,box-shadow .15s;display:grid}.sn-mode-daily{border-color:var(--gold-line);background:color-mix(in srgb, var(--gold) 16%, var(--paper))}.sn-mode:focus-visible,.sn-maze:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (hover:hover) and (pointer:fine){.sn-mode:hover,.sn-maze:not(:disabled):hover{border-color:var(--focus);box-shadow:0 6px 18px -12px color-mix(in srgb, var(--ink) 60%, transparent)}}.sn-mode-icon{background:color-mix(in srgb, var(--gold) 30%, var(--paper));width:44px;height:44px;color:var(--ink);border-radius:12px;place-items:center;display:grid}.sn-mode-icon svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.sn-mode-text{gap:2px;display:grid}.sn-mode-text strong{font-size:1.05rem}.sn-mode-text small{color:var(--muted);font-size:.82rem}.sn-mode-go{color:var(--muted);font-size:1.2rem}.sn-setup{gap:4px;display:grid}.sn-setup-best{color:var(--muted);margin:8px 0 0;font-size:.85rem}.sn-setup-actions{flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:12px;display:flex}.sn-maze-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:10px 0 0;padding:0;list-style:none;display:grid}.sn-maze{border:1px solid var(--line);background:var(--paper);width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:14px;gap:6px;padding:10px;transition:border-color .15s,box-shadow .15s;display:grid}.sn-maze:disabled{cursor:default}.sn-maze-name{font-size:.9rem;font-weight:700}.sn-maze small{color:var(--muted);font-size:.78rem}.sn-maze-preview{width:100%;height:auto;fill:var(--muted);border-radius:8px}.sn-maze-preview>rect:first-child{fill:color-mix(in srgb, var(--gold) 14%, var(--paper))}.sn-maze:disabled .sn-maze-preview{opacity:.45}@container game (orientation:landscape){.sn .sn-stage[data-pad]{--dpad-size:clamp(130px, 44cqh, 220px);--sn-field:min(100cqw - var(--dpad-size) - 60px, 100cqh - 64px);grid-template-columns:var(--sn-field) auto;grid-template-rows:auto;place-content:center;gap:6px 28px}.sn .sn-stage[data-pad][data-pad-side=left]{grid-template-columns:auto var(--sn-field)}.sn .sn-stage[data-pad][data-pad-side=left] .sn-pad{grid-area:1/1}.sn .sn-stage[data-pad] .sn-field{gap:6px}.sn .sn-stage[data-pad] .sn-goal-bar{display:none}@media (height<=480px){.sn .sn-stage[data-pad] .sn-veil{padding:6px}.sn .sn-stage[data-pad] .sn-card{border-radius:12px;gap:2px;max-width:96%;padding:6px 12px;font-size:.72rem}.sn .sn-stage[data-pad] .sn-card strong{font-size:.92rem}.sn .sn-stage[data-pad] .sn-card>span:not(.sn-card-hint,.sn-card-twist),.sn .sn-stage[data-pad] .sn-keys,.sn .sn-stage[data-pad] .sn-text-button{display:none}.sn .sn-stage[data-pad] .sn-card-hint{margin-top:0}.sn .sn-stage[data-pad] .sn-card:has(.sn-card-twist) .sn-card-hint{display:none}.sn .sn-stage[data-pad] .sn-end-actions{flex-wrap:nowrap;gap:6px;margin-top:2px}.sn .sn-stage[data-pad] .sn-end-actions .game-button{padding:8px 12px;font-size:.78rem}}.sn .sn-stage[data-pad] .sn-scores>div{min-width:48px;padding:2px 8px}.sn .sn-stage[data-pad] .sn-scores dt{font-size:.6rem}.sn .sn-stage[data-pad] .sn-scores dd{font-size:1.05rem}.sn .sn-stage[data-pad] .sn-pad{place-self:center;margin:0}}@media (prefers-reduced-motion:reduce){.sn-pop,.sn-toast{animation:none}.sn-goal-bar:after,.sn-mode,.sn-maze{transition:none}}