/* Four tactile light pads, each with a distinct shape for visual recall. */
body[data-game="pattern"] .pattern-wrap { padding:clamp(12px,3vw,28px) 0; }
body[data-game="pattern"] .pattern-board {
    width:min(100%,390px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
    padding:20px; border:1px solid #c6ccdb; border-radius:38px;
    background:linear-gradient(145deg,#e8ecf5,#cad2e2);
    box-shadow:inset 0 2px 1px #fff,0 8px 0 #b4bed1,0 18px 30px #27375b20;
}
body[data-game="pattern"] .pattern-key {
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; width:100%; min-height:44px; padding:12px; isolation:isolate; overflow:hidden;
    border:1px solid #ffffff65; border-radius:24px; opacity:1; color:#fff;
    background:linear-gradient(155deg,var(--pad-top),var(--pad-base));
    box-shadow:inset 0 2px 1px #ffffff65,inset 0 -5px 0 #0002,0 5px 0 var(--pad-edge),0 8px 10px #17244430;
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
    -webkit-tap-highlight-color:transparent;
}
.pattern-key[data-key="0"] { --pad-top:#e9637c; --pad-base:#b8304e; --pad-edge:#88223a; --pad-glow:#ff6e89; }
.pattern-key[data-key="1"] { --pad-top:#5d9ae6; --pad-base:#3268b0; --pad-edge:#23467e; --pad-glow:#70bdff; }
.pattern-key[data-key="2"] { --pad-top:#e9b84d; --pad-base:#b77a19; --pad-edge:#875713; --pad-glow:#ffdb7b; }
.pattern-key[data-key="3"] { --pad-top:#4fbb91; --pad-base:#237b59; --pad-edge:#19583f; --pad-glow:#6effbb; }
body[data-game="pattern"] .pattern-key::before {
    content:''; position:absolute; inset:8px; border:1px solid #ffffff40; border-radius:17px; pointer-events:none;
}
.pattern-glyph { width:clamp(34px,7vw,62px); height:clamp(34px,7vw,62px); fill:none; stroke:currentColor; stroke-width:3.5; stroke-linejoin:round; filter:drop-shadow(0 2px 1px #0002); }
.pattern-number { font:800 .76rem var(--font-mono); line-height:1; opacity:.9; }
body[data-game="pattern"] .pattern-key:hover { filter:brightness(1.08); }
body[data-game="pattern"] .pattern-key:focus-visible { outline:3px solid #172444; outline-offset:5px; }
body[data-game="pattern"] .pattern-key.active,
body[data-game="pattern"] .pattern-key:active {
    transform:translateY(4px); filter:brightness(1.4); border-color:#fff;
    box-shadow:inset 0 0 0 2px #fff9,inset 0 0 24px #ffffff55,0 1px 0 var(--pad-edge),0 0 30px var(--pad-glow);
}
body[data-game="pattern"] .pattern-key.active .pattern-glyph { fill:#ffffff40; stroke-width:4.5; }
body[data-game="pattern"] #start-pattern { width:100%; min-height:52px; border-radius:14px; box-shadow:0 4px 0 #35279b,0 8px 18px #5945cb20; }
body[data-game="pattern"] #start-pattern:active { transform:translateY(2px); box-shadow:0 2px 0 #35279b; }
body[data-game="pattern"] #start-pattern:focus-visible { outline:3px solid #172444; outline-offset:4px; }
body[data-theme="dark"][data-game="pattern"] .pattern-board { background:linear-gradient(145deg,#343e56,#20283b); border-color:#53607a; box-shadow:inset 0 2px 1px #ffffff20,0 8px 0 #121a2c,0 18px 30px #0004; }
@media(max-width:430px) {
    body[data-game="pattern"] .pattern-board { padding:14px; gap:13px; border-radius:28px; }
    body[data-game="pattern"] .pattern-key { border-radius:19px; }
    body[data-game="pattern"] .pattern-key::before { inset:6px; border-radius:13px; }
}
@media(prefers-reduced-motion:reduce) {
    body[data-game="pattern"] .pattern-key { transition:none; }
    body[data-game="pattern"] .pattern-key.active,body[data-game="pattern"] .pattern-key:active { transform:none; }
}