*,*::before,*::after{box-sizing:border-box;min-inline-size:0}
:root{color-scheme:light;--ink:oklch(0.27 0.035 210);--muted:oklch(0.48 0.025 210);--paper:oklch(0.97 0.025 80);--cream:oklch(0.995 0.01 85);--mint:oklch(0.72 0.13 166);--lavender:oklch(0.72 0.12 300);--orange:oklch(0.65 0.18 42);--line:oklch(0.83 0.035 80);--shadow:oklch(0.25 0.025 70 / .12);--gutter:clamp(.65rem,.4rem + 1.4vw,1.5rem);font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;font-synthesis:none;text-wrap:pretty;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
body{margin:0;min-block-size:100svh;background:var(--paper);color:var(--ink)}
/* Match the approved portal shell, including its exact background color. */
:root{--backdrop:#000f3f;--shell-text:oklch(1 0 none);--shell-muted:oklch(.84 .025 255)}
body{background:var(--backdrop);color:var(--shell-text)}
button,a{touch-action:manipulation}
button{font:inherit;font-weight:700;cursor:pointer;min-block-size:44px;padding-block:.5rem;padding-inline:.85rem;background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:.8rem;user-select:none;-webkit-user-select:none}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
button:active,a:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,p{margin:0}
h1,h2{text-wrap:balance}
img,svg{display:block;max-inline-size:100%;block-size:auto}
.page{--content:38rem;--breakout:38rem;display:grid;grid-template-columns:[full-width-start] minmax(var(--gutter),1fr) [breakout-start] minmax(0,calc((var(--breakout) - var(--content))/2)) [content-start] min(100% - var(--gutter)*2,var(--content)) [content-end] minmax(0,calc((var(--breakout) - var(--content))/2)) [breakout-end] minmax(var(--gutter),1fr) [full-width-end];padding-block-start:env(safe-area-inset-top,0px);padding-block-end:calc(.6rem + env(safe-area-inset-bottom,0px));gap:.65rem}
.page>*{grid-column:content}
.page{column-gap:0}
.game-nav{display:flex;align-items:center;gap:.5rem;min-block-size:48px;border-block-end:1px solid var(--line);font-size:.76rem}
.game-nav a{display:flex;align-items:center;min-block-size:44px;font-weight:700}
.game-nav button{margin-inline-start:auto;background:transparent;font-size:.75rem}
.page>.game-nav{grid-column:full-width}
.game-nav{justify-content:space-between;min-block-size:60px;padding-block:8px;padding-inline:max(12px,env(safe-area-inset-left,0px),calc((100% - 1000px)/2)) max(12px,env(safe-area-inset-right,0px),calc((100% - 1000px)/2));border-block-end-color:oklch(1 0 none / .18);font-size:.75rem}
.game-nav .nav-title{flex:1;text-align:center;color:var(--shell-text);font-size:clamp(.75rem,.6rem + 1vw,1.125rem);line-height:1.35;letter-spacing:-.035em}
.nav-title>span{display:inline-block;white-space:nowrap;color:inherit}
.game-nav .nav-button{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:.3rem;min-block-size:44px;padding-inline:.65rem;background:var(--cream);color:var(--ink);border:1px solid var(--shell-muted);border-radius:.75rem;box-shadow:0 2px 0 oklch(.7 .03 255);font-size:.75rem;font-weight:800;white-space:nowrap}
.nav-button>span{font-size:1.4rem;line-height:1}
.game-nav :focus-visible{outline-color:oklch(.86 .16 90)}
.page:is(.expanded,:fullscreen) #fullscreen{font-size:.625rem}
.heading{text-align:center;display:grid;gap:.2rem;padding-block:.2rem}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.heading .eyebrow{color:var(--shell-muted)}
h1{font-size:clamp(1.65rem,1.35rem + 1.4vw,2.35rem);font-weight:900;line-height:1.2;letter-spacing:-.05em}
h1 span{color:var(--orange)}
.game{display:grid;gap:.5rem}
.game{inline-size:min(100%,max(17.75rem,calc((100svh - 28.75rem)*1.04)));justify-self:center}
.stats{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-block-end:1px solid var(--line);padding-block-end:.35rem;font-size:.8rem}
.stats>p:first-child{display:flex;align-items:baseline;gap:.6rem}
.stats strong{font-size:1.4rem;font-variant-numeric:tabular-nums}
.stats strong span{font-size:.75rem;margin-inline-start:.2rem}
.stats button{font-size:.75rem;min-block-size:40px}
.stats{border-block-end-color:oklch(1 0 none / .18)}
.diners{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.diner{--tone:var(--mint);display:grid;grid-template-columns:minmax(65px,.8fr) 1fr;align-items:center;padding-inline:.35rem;border:1px solid var(--line);border-radius:1.1rem;background:color-mix(in oklch,var(--tone) 7%,var(--cream));min-block-size:108px}
.diner[data-player="1"]{--tone:var(--lavender)}
.diner{color:var(--ink)}
.diner.active{border-color:var(--tone);box-shadow:0 0 0 2px color-mix(in oklch,var(--tone) 24%,transparent)}
.diner-visual{position:relative;display:grid;place-items:center;align-self:end}
.alien{block-size:clamp(5.4rem,4.9rem + 2vw,7.4rem);inline-size:auto;object-fit:contain;transform-origin:50% 90%}
.diner-info{display:grid;gap:.2rem}
.diner-name{font-size:.76rem;font-weight:800}
.diner-score{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.diner-score small{font-size:.65rem}
.diner-misses,.diner-state{font-size:.65rem;color:var(--muted)}
.hunger{display:flex;gap:3px;margin-block:.15rem}
.hunger i{inline-size:9px;block-size:6px;border-radius:3px;background:var(--tone)}
.hunger i.empty{background:color-mix(in oklch,var(--muted) 18%,transparent)}
.diner.urgent .diner-state{color:var(--orange);font-weight:800}
.diners.solo{grid-template-columns:1fr}
.diners.solo .diner{grid-template-columns:120px 1fr;inline-size:min(100%,24rem);justify-self:center}
.diners.solo .diner-info{grid-template-columns:auto auto;align-items:center;column-gap:1rem}
.diners.solo .diner-state,.diners.solo .hunger{grid-column:1/-1}
.speech{position:absolute;inset-block-start:.2rem;inset-inline-end:-.8rem;border-radius:1rem;background:var(--cream);border:1px solid var(--line);font-size:.7rem;font-weight:800;padding-block:.25rem;padding-inline:.5rem;white-space:nowrap;z-index:1}
.turn-line{display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-block-size:24px;font-size:.75rem}
#turn-label{font-weight:800}
#best{font-size:.65rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#best{color:oklch(.9 .12 95)}
.table-wrap{display:grid;position:relative}
.table-top{border-radius:1.25rem;padding:clamp(.4rem,.25rem + .8vw,.75rem);background:oklch(.89 .055 85);border:1px solid oklch(.8 .055 80);box-shadow:inset 0 2px 0 oklch(1 0 none / .6),0 5px 0 oklch(.77 .045 80)}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.25rem,.12rem + .7vw,.5rem)}
.card{position:relative;display:grid;place-items:center;aspect-ratio:1.28;min-block-size:44px;padding:0;border-radius:.75rem;border:1px solid oklch(.76 .04 75);background:linear-gradient(150deg,oklch(.99 .01 90),oklch(.92 .02 80));box-shadow:0 3px 0 oklch(.72 .04 75),inset 0 1px 0 oklch(1 0 none);overflow:clip;isolation:isolate}
.card>*{grid-area:1/1}
.card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.card>.food{min-block-size:0}
.food{inline-size:100%;block-size:100%;object-fit:contain;opacity:0;pointer-events:none;padding:.1rem}
.lid{inline-size:88%;pointer-events:none;filter:drop-shadow(0 3px 2px oklch(.2 0 none / .15));}
.card-number{position:absolute;inset-block-end:2px;inset-inline-end:5px;font-size:clamp(.55rem,.48rem + .3vw,.7rem);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.card.open{background:var(--cream);border-color:var(--orange);box-shadow:0 2px 0 color-mix(in oklch,var(--orange) 40%,var(--line))}
.card.open .food{opacity:1}
.card.open .lid{opacity:0;transform:translateY(-30%) scale(.85)}
.card.matched{visibility:hidden;pointer-events:none}
.card.pair{border-color:oklch(.59 .13 165);background:oklch(.97 .045 150)}
.card:disabled:not(.open):not(.matched){opacity:1}
.board[data-phase="paused"] .food{visibility:hidden}
.overlay{position:absolute;inset-block:0;inset-inline:0;border-radius:1.25rem;display:grid;place-items:safe center;padding:clamp(.75rem,.3rem + 2vw,1.6rem);background:oklch(.97 .025 85 / .94);z-index:4;overflow-y:auto;overscroll-behavior:contain}
.overlay-card{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;text-align:center;inline-size:min(100%,22rem);padding-block:.6rem}
.overlay-card>*{flex-shrink:0}
.overlay{color:var(--ink)}
.overlay h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);letter-spacing:-.05em;line-height:1.3}
#overlay-copy{font-size:.8rem;line-height:1.7;color:var(--muted)}
.start-actions{display:grid;gap:.45rem}
.primary{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:0 3px 0 color-mix(in oklch,var(--ink),black 20%);font-size:.95rem}
.primary:focus-visible{outline-color:var(--orange)}
.secondary{background:var(--cream);font-size:.9rem}
.primary:disabled{background:var(--muted);box-shadow:none}
.small{font-size:.65rem;line-height:1.6;color:var(--muted)}
.status{min-block-size:1.4em;font-size:.8rem;text-align:center;font-weight:700;padding-block-start:.3rem}
.toolbar{display:flex;gap:.5rem;justify-content:center}
.toolbar button{font-size:.76rem;flex:1}
footer{display:grid;gap:.2rem;text-align:center;font-size:.65rem;color:var(--muted);line-height:1.6;padding-block:.4rem}
footer{color:var(--shell-muted)}
.preview-note{font-size:.6rem}
.results{display:grid;gap:.35rem}
.result-row{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;background:var(--cream);border:1px solid var(--line);padding:.6rem;border-radius:.7rem;font-size:.8rem}
.result-row strong{font-size:1.3rem;font-variant-numeric:tabular-nums}
.result-row small{font-size:.6rem;color:var(--muted);text-align:start}
.results .breakdown{font-size:.7rem;color:var(--muted);line-height:1.7}
dialog{inline-size:min(92vw,30rem);max-block-size:85dvh;border:1px solid var(--line);border-radius:1.25rem;padding:1.3rem;background:var(--paper);color:var(--ink);box-shadow:0 20px 80px var(--shadow)}
dialog::backdrop{background:oklch(.15 .02 210 / .5)}
dialog h2{font-size:1.3rem;margin-block-end:.8rem}
dialog p{font-size:.85rem;line-height:1.8}
.help-copy{display:grid;gap:.8rem;margin-block-end:1rem}
dialog>.primary{inline-size:100%}
.dialog-actions{display:flex;gap:.6rem;margin-block-start:1rem}
.dialog-actions button{flex:1}
.flight{position:fixed;pointer-events:none;z-index:8;object-fit:contain}
.definitions{position:absolute;inline-size:0;block-size:0;overflow:clip;pointer-events:none}
.expanded{position:fixed;inset-block:0;inset-inline:0;z-index:200;background:var(--backdrop);overflow-y:auto;overscroll-behavior:contain}
.page:fullscreen{background:var(--backdrop);overflow-y:auto}
.page::backdrop{background:var(--backdrop)}
.game[data-paused="true"] .alien{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){button:not(:disabled):hover{filter:brightness(1.04)}.card:not(:disabled):hover{background:var(--cream);border-color:var(--orange)}a:hover{text-decoration:underline}}
@media (prefers-reduced-motion:no-preference){
 button,a{transition:transform 160ms ease-out,background-color 160ms ease-out}
 .lid{transition:transform 240ms ease-out,opacity 180ms ease-out}
 .food{transition:opacity 140ms ease-out}
 .diner.eating .alien{animation:munch 300ms ease-out infinite alternate}
 .diner.urgent.active .hunger{animation:warning 900ms ease-out infinite alternate}
 @keyframes munch{from{transform:scale(1.02,.98) rotate(-1deg)}to{transform:scale(.99,1.02) rotate(1deg)}}
 @keyframes warning{to{opacity:.45}}
}
@media (max-height:740px){body.is-playing .heading{display:none}.page{row-gap:.35rem}.diner{min-block-size:88px}.alien{block-size:5.4rem}.game{gap:.3rem}footer{padding-block:.15rem}}
@media (forced-colors:active){.card,.table-top{border:1px solid CanvasText}.hunger i{background:Highlight}.card.open{outline:2px solid Highlight}.card-number{color:CanvasText}}

/* White and vivid game colors; no pastel UI surfaces. */
:root{--ink:oklch(.16 0 none);--muted:oklch(.4 0 none);--paper:oklch(1 0 none);--cream:oklch(1 0 none);--line:oklch(.5 0 none);--mint:oklch(.75 .23 150);--lavender:oklch(.6 .28 300);--orange:oklch(.66 .23 40);--yellow:#ffea00;--blue:oklch(.5 .28 264);--red:oklch(.63 .25 29);--shell-muted:oklch(1 0 none)}
button{border:2px solid var(--ink);border-radius:.5rem;background:var(--cream);box-shadow:0 3px 0 var(--ink)}
.game-nav .nav-button{border:2px solid var(--cream);border-radius:.5rem;box-shadow:0 3px 0 var(--blue)}
.primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:0 3px 0 var(--ink)}
.secondary{background:var(--blue);color:var(--cream);border-color:var(--blue);box-shadow:0 3px 0 var(--ink)}
.primary:disabled{background:oklch(.5 0 none);color:var(--cream);border-color:oklch(.5 0 none)}
#pause{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
#sound{background:var(--blue);color:var(--cream);border-color:var(--blue)}
#sound[aria-pressed="true"]{background:var(--mint);color:var(--ink);border-color:var(--mint)}
#restart{background:var(--red);color:var(--cream);border-color:var(--red)}
#best{color:var(--yellow)}
.diner,.diner.active{border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--shell-text);padding-inline:0;grid-template-columns:minmax(50px,.7fr) minmax(0,1fr);gap:.25rem;min-block-size:112px}
.diner-visual{align-self:center}
.alien{inline-size:100%;block-size:110px;object-fit:contain}
.diner-info{gap:.2rem}
.diner-name{font-size:1.15rem;font-weight:900;line-height:1.15}
.diner.active .diner-name{color:var(--yellow)}
.diner.active .diner-name::before{content:'▶';font-size:.65em;margin-inline-end:.3rem}
.diner-score{display:flex;align-items:baseline;gap:.15rem;white-space:nowrap;font-size:clamp(1.6rem,1.05rem + 2.5vw,2.25rem);font-weight:900}
.diner-score small{font-size:.75rem}
.diner-misses{font-size:.62rem;color:var(--shell-text)}
.life-count{font-size:clamp(.75rem,.65rem + .4vw,.95rem);font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.hunger{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-block:.1rem}
.hunger i{inline-size:100%;block-size:13px;border-radius:1px;border:1px solid var(--tone);background:var(--tone)}
.hunger i.empty{background:transparent;border-color:var(--shell-text)}
.diner-state{font-size:.62rem;color:var(--shell-text)}
.diner.urgent .diner-state{color:var(--yellow)}
.diners.solo .diner{grid-template-columns:minmax(85px,120px) minmax(0,1fr);inline-size:min(100%,23rem)}
.diners.solo .diner-info{grid-template-columns:1fr;gap:.2rem}
.diners.solo .diner-score{font-size:clamp(2.3rem,1.4rem + 4vw,3rem)}
.diners.solo .diner-state,.diners.solo .hunger{grid-column:auto}
.speech{background:var(--yellow);color:var(--ink);border:0;border-radius:.4rem;inset-inline-end:-.35rem}
.table-top{background:var(--cream);border:0;border-radius:.75rem;box-shadow:none}
.card{background:var(--cream);border:1px solid var(--ink);border-radius:.5rem;box-shadow:none}
.food{padding:0}
.card-number{font-size:.6rem;color:var(--ink);line-height:1;inset-block-end:2px;inset-inline-end:3px}
.card.open{background:var(--cream);border:2px solid var(--blue);box-shadow:none}
.card.pair{background:var(--cream);border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.overlay{background:var(--cream);border-radius:.75rem}
.result-row{background:var(--cream);border:2px solid var(--ink);border-radius:.5rem}
dialog{background:var(--cream);border:2px solid var(--ink);border-radius:.75rem}
@media (hover:hover) and (pointer:fine){.card:not(:disabled):hover{background:var(--cream);border-color:var(--blue)}}