.game-frame-header{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:48px;display:grid}.game-frame-header>a{justify-self:start}.game-frame-title{letter-spacing:-.04em;align-items:baseline;gap:7px;display:flex}.game-frame-title span{color:#fff;letter-spacing:.16em;font-size:13px;font-weight:900}.game-frame-title strong{font-size:24px}.game-frame-actions{justify-self:end;gap:8px;display:flex}.game-frame-actions .control--icon{font-size:21px}.game-scoreboard{border:3px solid var(--control-ink);background:var(--control-paper);box-shadow:0 5px 0 var(--control-ink);overflow:hidden}.game-setup{z-index:10;backdrop-filter:blur(4px);background:#10213dc2;place-items:center;padding:72px 16px 16px;display:grid;position:fixed;inset:0;overflow:hidden}.game-setup-card{text-align:center;width:min(100%,520px);max-height:calc(100dvh - 92px);padding:22px;position:relative;overflow:hidden}.game-setup-back{align-self:flex-start;margin-bottom:12px}.game-setup-intro{color:#59667d;font-size:12px;font-weight:700;display:block}.game-option{border-color:var(--control-ink);transition:transform .13s cubic-bezier(.23,1,.32,1),background-color .13s ease-out}.game-option[aria-pressed=true]{background:var(--game-option-selected,#dcecff);box-shadow:inset 0 0 0 2px var(--game-option-accent,#2878d4), 0 3px 0 var(--control-ink)}.game-option--toggle[aria-pressed=true]{--game-option-selected:#dff8e8;--game-option-accent:#25875f}@media (width<=440px){.game-setup{padding-inline:10px}.game-setup-card{padding:15px 13px}}@media (width<=680px){.game-frame-header{grid-template-columns:1fr auto}.game-frame-title{display:none}}:root{--pattern-ink:#10213d;--pattern-orange:#f26b3a;--pattern-mint:#64d8b2;--pattern-yellow:#ffd166;--pattern-paper:#fff9e8;--pattern-sky:#63c9ec;--pattern-ease:cubic-bezier(.23, 1, .32, 1);color:var(--pattern-ink);background:var(--pattern-sky);font-synthesis:none;font-family:ui-rounded,Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body{min-width:320px;min-height:100%}body{margin:0}.pattern-page{background:linear-gradient(#10213d14,#10213d38),url(/art/playground-world.webp) 50%/cover;place-items:center;min-height:100dvh;display:grid;overflow:hidden}.pattern-shell{flex-direction:column;gap:10px;width:min(96vw,1280px);height:min(94dvh,600px);padding:12px;display:flex;overflow:hidden}.pattern-scoreboard{border:3px solid var(--pattern-ink);background:var(--pattern-paper);min-height:76px;box-shadow:0 5px 0 var(--pattern-ink);border-radius:18px 18px 11px;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:18px;padding:10px 16px;display:grid}.pattern-scoreboard>div:first-child{align-items:baseline;gap:9px;display:flex}.pattern-scoreboard span{color:#5f6b80;letter-spacing:.13em;font-size:11px;font-weight:1000}.pattern-scoreboard strong{font-size:34px;line-height:1}.pattern-scoreboard strong small{color:#69768c;font-size:16px}.pattern-progress{border:3px solid var(--pattern-ink);background:#dce5e5;border-radius:999px;height:18px;overflow:hidden}.pattern-progress i{transform-origin:0;background:var(--pattern-mint);width:100%;height:100%;transition:transform .24s var(--pattern-ease);display:block;box-shadow:inset 0 3px #ffffff73}.pattern-board{border:3px solid var(--pattern-ink);background:var(--pattern-paper);min-height:0;box-shadow:0 7px 0 var(--pattern-ink), 0 20px 50px #10213d2e;transition:transform .16s var(--pattern-ease), opacity .16s var(--pattern-ease);border-radius:28px 28px 18px;flex:1;grid-template-rows:auto minmax(0,1fr) minmax(92px,.62fr) 20px;gap:clamp(9px,2vh,16px);padding:clamp(16px,3vw,30px);display:grid}.pattern-board.is-correct{background:#e3faef}.pattern-board.is-wrong{background:#ffd4c4}.pattern-board.is-wrong .pattern-socket{background:#ffd2c5;border-color:#c43d2b}.pattern-board>header{text-align:center}.pattern-board>header p{color:#a34324;letter-spacing:.19em;margin:0;font-size:11px;font-weight:1000}.pattern-board>header h1{letter-spacing:-.045em;margin:3px 0 0;font-size:clamp(24px,4vw,42px);line-height:1}.pattern-ribbon{border:3px solid var(--pattern-ink);background:linear-gradient(135deg,#ffffff85 25%,#0000 25%) 0 0/24px 24px,#c8f0e0;border-radius:22px;justify-content:center;align-items:center;gap:clamp(4px,1vw,12px);min-height:0;margin:0;padding:clamp(10px,2vw,20px);list-style:none;display:flex}.pattern-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pattern-tile,.pattern-socket{aspect-ratio:1;border:3px solid var(--pattern-ink);width:min(10vw,86px);min-width:0;box-shadow:0 5px 0 var(--pattern-ink);background:#fff;border-radius:17px 17px 11px;place-items:center;display:grid}.pattern-tile:nth-child(2n){transform:rotate(1.5deg)}.pattern-tile:nth-child(odd){transform:rotate(-1deg)}.pattern-socket{background:var(--pattern-yellow);box-shadow:none;border-style:dashed}.pattern-socket>span{font-size:clamp(26px,5vw,46px);font-weight:1000}.pattern-token{font-weight:1000;line-height:1;display:block}.pattern-token--number{font-size:clamp(22px,4.4vw,43px)}.pattern-token--shape{color:var(--pattern-orange);-webkit-text-stroke:1px var(--pattern-ink);font-size:clamp(24px,4.8vw,48px)}.pattern-choices{grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,16px);display:grid}.pattern-choices button{border:3px solid var(--pattern-ink);min-width:0;min-height:92px;color:var(--pattern-ink);box-shadow:0 6px 0 var(--pattern-ink);cursor:pointer;transition:transform .12s var(--pattern-ease);background:#fff;border-radius:20px 20px 13px}.pattern-choices button:active{box-shadow:0 2px 0 var(--pattern-ink);transform:translateY(4px)scale(.97)}.pattern-board output{color:#5d697f;letter-spacing:.11em;text-align:center;font-size:11px;font-weight:1000}.pattern-setup{--game-option-accent:#2878d4}.pattern-setup-card{flex-direction:column;display:flex}.pattern-setup-card>p{color:#a34324;letter-spacing:.2em;margin:0;font-size:11px;font-weight:1000}.pattern-setup-card>h1{letter-spacing:-.045em;margin:5px 0;font-size:32px;line-height:1}.pattern-setup-card>span{color:#59667d;font-size:12px;font-weight:700;line-height:1.35;display:block}.pattern-setup fieldset{border:0;margin:16px 0 0;padding:0}.pattern-setup legend{color:#526078;letter-spacing:.16em;text-align:left;width:100%;margin-bottom:6px;font-size:10px;font-weight:1000}.pattern-difficulty-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pattern-difficulty-grid button{border:2px solid var(--pattern-ink);min-height:76px;color:var(--pattern-ink);box-shadow:0 3px 0 var(--pattern-ink);cursor:pointer;background:#fff;border-radius:14px;place-items:center;padding:8px;display:grid}.pattern-difficulty-grid button strong{font-size:13px}.pattern-difficulty-grid button small{color:#556279;font-size:10px;font-weight:700}.pattern-target-grid{gap:8px;display:flex}.pattern-target-grid button{flex:1}.pattern-start{width:100%;margin-top:16px}.pattern-winner{background:0 0;border:0;max-width:none;max-height:none;padding:0}.pattern-winner::backdrop{background:#10213dd6}.pattern-winner section{border:3px solid var(--pattern-ink);background:var(--pattern-paper);width:min(100vw - 32px,480px);box-shadow:8px 9px 0 var(--pattern-ink);text-align:center;border-radius:28px 28px 18px;padding:32px 24px}.pattern-winner section>span{color:var(--pattern-yellow);-webkit-text-stroke:2px var(--pattern-ink);font-size:58px}.pattern-winner p{color:#a34324;letter-spacing:.18em;margin:7px 0;font-size:11px;font-weight:1000}.pattern-winner h2{margin:0 0 4px;font-size:34px;line-height:1.05}.pattern-winner small{color:#59667d;font-weight:800}.pattern-winner section>div{justify-content:center;gap:8px;margin-top:22px;display:flex}.pattern-choices button:focus-visible,.pattern-difficulty-grid button:focus-visible,.pattern-target-grid button:focus-visible{outline:3px solid var(--pattern-ink);outline-offset:3px}@media (hover:hover) and (pointer:fine){.pattern-choices button:hover{transform:translateY(-2px)}}@media (width<=980px) and (orientation:portrait){body{height:100dvh;overflow:hidden}.pattern-page{height:100dvh;min-height:0}.pattern-shell{gap:7px;width:100%;height:100dvh;padding:8px}}@media (width<=680px){.pattern-scoreboard{grid-template-columns:auto 1fr;gap:10px;min-height:62px;padding:7px 10px}.pattern-scoreboard>span{display:none}.pattern-scoreboard strong{font-size:28px}.pattern-board{border-radius:20px 20px 13px;grid-template-rows:auto minmax(0,1fr) minmax(100px,.7fr) 18px;gap:8px;padding:12px}.pattern-board>header h1{font-size:25px}.pattern-ribbon{gap:4px;padding:8px 5px}.pattern-tile,.pattern-socket{border-radius:12px 12px 8px;flex:1;width:auto;max-width:66px}.pattern-token--number{font-size:clamp(18px,6vw,28px)}.pattern-token--shape{font-size:clamp(20px,6.5vw,31px)}.pattern-choices{gap:7px}.pattern-choices button{border-radius:15px 15px 9px;min-height:100px}.pattern-setup-card{padding:19px 15px}.pattern-setup-card>h1{font-size:28px}.pattern-setup fieldset{margin-top:12px}.pattern-difficulty-grid{gap:6px}.pattern-difficulty-grid button{min-height:68px}.pattern-difficulty-grid button small{display:none}.pattern-start{margin-top:12px}}@media (width<=980px) and (height<=560px) and (orientation:landscape){body{height:100dvh;overflow:hidden}.pattern-shell{gap:6px;width:100%;height:100dvh;padding:6px 9px}.game-frame-header{z-index:15;pointer-events:none;position:fixed;inset:7px 9px auto}.game-frame-header>*{pointer-events:auto}.pattern-scoreboard{align-self:center;width:min(62%,560px);min-height:48px;padding-block:5px}.pattern-board{grid-template-rows:auto minmax(0,1fr) minmax(76px,.7fr) 16px;gap:5px;padding:9px 70px}.pattern-board>header h1{font-size:22px}.pattern-ribbon{padding:5px 12px}.pattern-tile,.pattern-socket{width:min(7vw,62px)}.pattern-choices button{min-height:70px}.pattern-setup{padding:6px 96px}.pattern-setup-card{max-height:calc(100dvh - 12px);padding:12px 17px}.game-setup-back{margin:0;position:absolute;top:8px;left:10px}.pattern-setup-card>h1{font-size:24px}.pattern-setup-card>span{display:none}.pattern-setup fieldset{margin-top:7px}.pattern-difficulty-grid button{min-height:54px}.pattern-start{min-height:44px;margin-top:8px}}@media (prefers-reduced-motion:reduce){.pattern-board,.pattern-progress i,.pattern-choices button{transition:none}.pattern-tile,.pattern-choices button:hover{transform:none}}