.app{--pad-size: clamp(120px, 40vw, 190px);--edge: max(1.25rem, env(safe-area-inset-left));flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;margin:0 auto;padding:max(1.75rem,env(safe-area-inset-top)) var(--edge) max(1.5rem,env(safe-area-inset-bottom));position:relative}.app--shake{animation:shake .42s ease}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.app__header{text-align:center;margin-bottom:1.25rem}.app__eyebrow{margin:0 0 .25rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.app__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,9vw,2.75rem);letter-spacing:-.02em;background:linear-gradient(120deg,var(--text) 40%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.status{width:100%;background:var(--surface);border:1px solid var(--surface-line);border-radius:20px;padding:1rem 1.25rem;margin-bottom:clamp(1.5rem,5vw,2.5rem)}.status__scores{display:flex;justify-content:center;gap:2.5rem;margin-bottom:.65rem}.status__stat{display:flex;flex-direction:column;align-items:center}.status__stat-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.status__stat-value{font-family:var(--font-display);font-size:1.9rem;font-weight:600;line-height:1.1;color:var(--text)}.status__stat--muted .status__stat-value{color:var(--muted)}.status__message{margin:0;text-align:center;font-size:.9rem;font-weight:600;color:var(--text);min-height:1.2em}.pips{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}.pips__dot{width:8px;height:8px;border-radius:50%;background:var(--surface-line);transition:background .16s ease,transform .16s ease}.pips__dot--filled{background:var(--mint);box-shadow:0 0 8px var(--mint-glow);transform:scale(1.15)}.board{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.board__grid{display:grid;grid-template-columns:repeat(2,var(--pad-size));grid-template-rows:repeat(2,var(--pad-size));gap:clamp(.9rem,4vw,1.5rem)}.pad{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:28px;cursor:pointer;touch-action:manipulation;isolation:isolate;overflow:hidden;transition:transform .12s ease}.pad:disabled{cursor:default}.pad:active:not(:disabled){transform:scale(.94)}.pad:focus-visible{outline:3px solid var(--text);outline-offset:3px}.pad__number{position:absolute;right:.85rem;bottom:.7rem;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:#00000047}.pad__glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .12s ease}.pad--crimson{background:linear-gradient(155deg,#ff7c8d 0%,var(--crimson) 60%,#d63b53 100%)}.pad--amber{background:linear-gradient(155deg,#ffcb82 0%,var(--amber) 60%,#db8f2e 100%)}.pad--mint{background:linear-gradient(155deg,#7cf0c9 0%,var(--mint) 60%,#29b98c 100%)}.pad--violet{background:linear-gradient(155deg,#bcaeff 0%,var(--violet) 60%,#6f5de0 100%)}.pad--crimson .pad__glow{box-shadow:inset 0 0 0 6px #ffffff80,0 0 34px 10px var(--crimson-glow)}.pad--amber .pad__glow{box-shadow:inset 0 0 0 6px #ffffff80,0 0 34px 10px var(--amber-glow)}.pad--mint .pad__glow{box-shadow:inset 0 0 0 6px #ffffff80,0 0 34px 10px var(--mint-glow)}.pad--violet .pad__glow{box-shadow:inset 0 0 0 6px #ffffff80,0 0 34px 10px var(--violet-glow)}.pad--active{transform:scale(1.045)}.pad--active .pad__glow{opacity:1}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--edge);background:#120f1bb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:inherit;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay__card{width:100%;max-width:360px;text-align:center;background:var(--surface);border:1px solid var(--surface-line);border-radius:24px;padding:2rem 1.75rem}.overlay__eyebrow{margin:0 0 .5rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}.overlay__title{margin:0 0 .6rem;font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.25}.overlay__title span{color:var(--mint)}.overlay__sub{margin:0 0 1.5rem;font-size:.9rem;color:var(--muted);line-height:1.5}.overlay__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:100%;padding:.9rem 1rem;border-radius:14px;background:linear-gradient(120deg,var(--violet),var(--mint));color:#120f1b;font-family:var(--font-body);font-size:1rem;font-weight:800;cursor:pointer;touch-action:manipulation}.overlay__btn:active{transform:scale(.98)}.overlay__hint{margin:.85rem 0 0;font-size:.75rem;color:var(--muted)}@media (min-width: 640px){.app{padding-top:3rem}.board__grid{gap:1.75rem}}:root{--bg: #120f1b;--bg-elev: #1a1630;--surface: #221d3b;--surface-line: #322a54;--text: #f1edfb;--muted: #9c93c2;--crimson: #ff5d73;--crimson-glow: rgba(255, 93, 115, .55);--amber: #ffb454;--amber-glow: rgba(255, 180, 84, .55);--mint: #49e3b0;--mint-glow: rgba(73, 227, 176, .55);--violet: #9c8cff;--violet-glow: rgba(156, 140, 255, .55);--danger: #ff3b4e;--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(120% 120% at 50% -10%,var(--bg-elev) 0%,var(--bg) 55%);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#root{min-height:100dvh;display:flex;flex-direction:column}button{font-family:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}