/* Locked palette and one shared component system. */
:root {
 color-scheme:light;
 --cream:#FFF7E8; --navy:#193548; --orange:#C84D2A; --gold:#F2B84B; --olive:#9DAA83;
 --focus:var(--navy); --link:var(--orange); --page:var(--cream); --surface:var(--cream); --text:var(--navy); --muted:#52616B; --border:#C79C61; --button:var(--cream);
 --green:#2F9963; --green-2:#26784D; --correct-text:#FFF7E8; --red:#C43E32; --red-2:#9C2A22;
 --logo-ink:var(--navy); --scene:url('../backgrounds/kitchen-light.webp'); --shadow:0 8px 24px rgb(25 53 72 / .12);
 font-size:16px;
}
html[data-theme="dark"] {
 color-scheme:dark;
 --number-border:var(--gold); --focus:var(--gold); --link:var(--gold); --page:#101F2A; --surface:var(--navy); --text:var(--cream); --muted:#CBD3D7; --border:#84969C; --button:var(--navy);
 --green:#54BF80; --green-2:#2F9963; --correct-text:#102D20; --red:#DB5A47; --red-2:#BA4332;
 --logo-ink:var(--cream); --scene:url('../backgrounds/kitchen-dark.webp'); --shadow:0 12px 32px rgb(0 0 0 / .3);
}
@media(prefers-color-scheme:dark) {
 html[data-theme="system"] {
  color-scheme:dark;
  --number-border:var(--gold); --focus:var(--gold); --link:var(--gold); --page:#101F2A; --surface:var(--navy); --text:var(--cream); --muted:#CBD3D7; --border:#84969C; --button:var(--navy);
  --green:#54BF80; --green-2:#2F9963; --correct-text:#102D20; --red:#DB5A47; --red-2:#BA4332;
  --logo-ink:var(--cream); --scene:url('../backgrounds/kitchen-dark.webp'); --shadow:0 12px 32px rgb(0 0 0 / .3);
 }
}
* {box-sizing:border-box}
body {margin:0;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--page);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,select,input,textarea {font:inherit}
button {cursor:pointer;touch-action:manipulation}
button:disabled {cursor:default}
a {color:inherit;text-underline-offset:.2em}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--focus);outline-offset:4px}
.hidden {display:none!important}
.sr-only,.mascot-copy {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link {position:fixed;top:8px;left:8px;z-index:50;padding:12px;background:var(--surface);transform:translateY(-200%)}
.skip-link:focus {transform:none}
.app-frame {position:relative;width:min(100%,430px);margin:0 auto;border:1px solid var(--border);border-radius:30px;background:var(--surface);box-shadow:var(--shadow);isolation:isolate}
.app-frame::before {content:"";position:absolute;inset:0 0 auto;height:610px;border-radius:29px 29px 0 0;background-image:linear-gradient(to bottom,transparent 75%,var(--surface)),var(--scene);background-size:100% 100%,cover;background-position:center;z-index:-1;pointer-events:none}
.topbar {position:relative;min-height:184px;padding:14px 14px 4px}
.brand {display:block;width:min(76%,300px);margin:15px auto 0;text-align:center;text-decoration:none}
.brand svg {display:block;width:100%;height:auto;overflow:visible}
.logo-sizzle {fill:var(--logo-ink)}
.logo-sequence {fill:var(--orange)}
.brand span {display:block;margin-top:-8px;font-size:.88rem;font-weight:750;color:var(--text)}
.nav-menu {position:absolute;top:16px;left:14px}
.header-actions {position:absolute;top:16px;right:14px;display:flex;gap:7px}
.icon-button {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:13px;color:var(--text);background:var(--surface)}
.icon-button svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-menu {border-color:transparent;background:transparent}
.trophy-button {color:#805008;background:var(--cream)}
.shell {padding:0 16px}
.game-card {padding-bottom:8px}
.status-line {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px;margin:5px 2px 0;font-size:.9rem}
.status-line strong {white-space:nowrap}
.status-line span {text-align:right}
.status-line>* {padding:5px 8px;border-radius:9px;background:var(--surface);font-weight:700}
.mascot-wrap {position:relative}
/* The reserved canvas includes the entire handle. Only the lower pan meets the panel. */
.mascot-stage {width:calc(100% + 16px);margin-left:-8px;aspect-ratio:1448/1086;display:grid;align-items:end}
.mascot-stage .bacon-art {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgb(24 15 6 / .2))}
.sequence-float {position:relative;margin-top:-30px;padding:11px 13px 13px;background:var(--navy);color:var(--cream);border:2px solid var(--gold);border-radius:22px;box-shadow:0 5px 0 rgb(25 53 72 / .12)}
.sequence-head {display:flex;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:.97rem;font-weight:750}
.sequence-head strong {white-space:nowrap}
.sequence-slots {display:grid;grid-template-columns:repeat(var(--slot-columns,4),minmax(0,1fr));gap:7px}
.sequence-slot {display:grid;place-items:center;min-height:49px;border:1px solid #8CA1AC;border-radius:12px;background:#365363;color:#D5DFE2;font-size:1.5rem;font-weight:850}
.sequence-slot.filled {background:var(--cream);border-color:var(--cream);color:var(--navy);box-shadow:0 3px 0 rgb(0 0 0 / .18)}
.instruction {min-height:22px;margin:12px 2px 8px;font-size:.85rem;font-weight:650;color:var(--muted)}
.number-grid {display:grid;grid-template-columns:repeat(var(--number-columns,2),minmax(0,1fr));gap:11px}
.number-button {min-height:78px;border:1px solid var(--number-border,var(--border));border-radius:20px;background:var(--button);color:var(--text);box-shadow:0 4px 0 color-mix(in srgb,var(--border) 38%,transparent);font-size:2.25rem;font-weight:850;transition:transform .1s}
.number-button:active {transform:translateY(2px)}
.number-button.correct {background:linear-gradient(var(--green),var(--green-2));color:var(--correct-text);border-color:var(--green-2);box-shadow:0 4px 0 color-mix(in srgb,var(--green-2) 50%,transparent)}
.number-button.wrong {background:linear-gradient(var(--red),var(--red-2));color:#FFF7E8;border-color:var(--red-2);box-shadow:0 4px 0 color-mix(in srgb,var(--red-2) 50%,transparent);animation:wrongShake .25s}
.mode-picker {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:19px 0 0;padding:4px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.mode-picker label {position:relative;min-width:0}
.mode-picker input {position:absolute;width:1px;height:1px;opacity:0}
.mode-picker span {display:grid;place-items:center;min-height:44px;border-radius:10px;font-size:.9rem;font-weight:750}
.mode-picker input:checked+span {background:var(--navy);color:var(--cream);box-shadow:inset 0 0 0 2px var(--gold)}
.mode-picker input:focus-visible+span {outline:3px solid var(--focus);outline-offset:2px}
.game-footer {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 0;font-size:.78rem}
.game-footer strong {font-weight:650}
.text-button {min-height:44px;border:0;padding:8px;background:transparent;color:var(--link);font-weight:750;font-size:1.18rem}
.ad-zone {display:none;padding:20px;text-align:center;font-size:.75rem;color:var(--muted)}
.ad-zone.ad-ready:not(.no-ads) {display:block}
.below-game {padding:17px 0 0;border-top:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.below-game h2 {margin:0 0 5px;font-size:.93rem}
.below-game p {margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}
.site-footer,.legal-nav {display:flex;flex-wrap:wrap;justify-content:center;gap:0 15px;padding:12px 0;color:var(--muted);font-size:.78rem}
.site-footer a,.legal-nav a {min-height:44px;display:inline-flex;align-items:center}
dialog {border:0;padding:0;background:transparent;color:var(--text);width:min(calc(100vw - 28px),410px);max-width:none;max-height:calc(100dvh - 28px);overflow-y:auto;border-radius:27px}
dialog::backdrop {background:rgb(6 18 26 / .75);backdrop-filter:blur(5px)}
.result-card,.settings-card {padding:20px;border:1px solid var(--border);border-radius:27px;background:var(--surface)}
.result-card {text-align:center}
.result-mascot-wrap {aspect-ratio:1448/1086;display:grid;place-items:center}
.result-art {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgb(0 0 0 / .15))}
.result-eyebrow {display:block;margin-top:3px;color:var(--link);font-size:1.18rem;font-weight:850}
.result-card h2 {margin:6px 0 10px;font-family:"Sizzle Display",Georgia,serif;font-size:clamp(1.9rem,7vw,2.5rem);line-height:1.13}
.result-card p {margin:0 0 12px;line-height:1.5}
.badge-earned {padding:11px;margin:13px 0;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--gold) 20%,var(--surface));font-weight:750;font-size:.9rem}
.verify-status {font-size:.76rem;color:var(--muted);min-height:18px}
.primary-button,.secondary-button {display:inline-grid;place-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--border);border-radius:15px;font-weight:800}
.primary-button {width:100%;background:var(--gold);color:var(--navy);border-color:#A56815;box-shadow:0 4px 0 rgb(165 104 21 / .28);font-size:1.2rem}
.secondary-button {background:var(--surface);color:var(--text)}
.result-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px}
.result-actions:has(#shareButton.hidden) {grid-template-columns:1fr}
.result-card.result-loss {background:var(--navy);color:var(--cream)}
.result-loss .result-eyebrow,.result-loss .dialog-mode-button {color:var(--gold)}
.result-loss .verify-status {display:none}
.result-loss .secondary-button {background:var(--gold);color:var(--navy);border-color:#A56815;box-shadow:0 4px 0 rgb(165 104 21 / .28);font-size:1.2rem}
.dialog-header {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.dialog-header h2 {margin:0;font-size:1.35rem}
.close-button {flex-shrink:0;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:1.7rem}
.setting-row,.setting-action {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;width:100%;padding:7px 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);color:var(--text);background:transparent;text-align:left;text-decoration:none}
.setting-action strong {color:var(--muted);font-size:.82rem}
.setting-row select {padding:9px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);max-width:55%}
.setting-row input[type="checkbox"] {width:24px;height:24px;accent-color:var(--orange)}
.settings-section-title {margin:19px 0 8px;color:var(--muted);font-size:.77rem;font-weight:750}
.settings-links {display:grid;grid-template-columns:1fr 1fr;gap:7px}
.settings-links a {display:grid;place-items:center;min-height:44px;padding:7px;border:1px solid var(--border);border-radius:10px;text-decoration:none;font-size:.8rem}
.version-button {display:block;min-height:44px;margin:9px auto 0;padding:8px;border:0;background:transparent;color:var(--muted);font-size:.78rem}
.tiny {color:var(--muted);font-size:.77rem;line-height:1.5}
.pin-input {width:100%;margin-top:9px;padding:12px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--surface)}
.error-text {color:var(--text);font-weight:700;min-height:20px}
.badge-list {display:grid;gap:10px}
.badge-item {display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--border);border-radius:15px}
.badge-item>span {font-size:1.5rem}
.badge-item div {display:grid;gap:4px}
.badge-item div span,.badge-item small {color:var(--muted);font-size:.8rem}
.how-list {padding-left:24px;line-height:1.7}
.how-list li+li {margin-top:10px}
@font-face {font-family:"Sizzle Display";src:url('../branding/display.woff') format('woff');font-display:swap}
@keyframes wrongShake {25% {transform:translateX(-4px)}75% {transform:translateX(4px)}}
@keyframes winBob {50% {transform:translateY(-4px)}}
.result-art.celebrating {animation:winBob .9s ease-in-out 2}
@media(min-width:700px) {body {padding-block:24px}}
@media(max-width:360px) {
 .shell {padding-inline:11px}.header-actions {gap:4px;right:10px}.topbar {padding-inline:10px;min-height:167px}
 .brand {margin-top:23px;width:74%}.brand span {font-size:.76rem}.number-button {min-height:70px}
 .sequence-float {padding-inline:10px}.sequence-slot {min-height:44px;font-size:1.3rem}.sequence-head {font-size:.85rem}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}