/* Gameplay first: one compact header, one customer strip, a large grill. */
#app:has(.focused-play:not(.hidden)){padding:12px}
.game.focused-play{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:40px 42px 44px minmax(180px,1fr) 22px 54px 60px;
  grid-template-areas:"top top" "hud order" "customers customers" "stage stage" "signal signal" "flesh flesh" "cut cut";
  gap:6px 12px;width:100%;max-width:800px;height:calc(100svh - 24px);
  min-height:520px;max-height:none;padding:0 12px 12px;margin:auto;
}
.focused-play .game-top{grid-area:top;height:auto;margin:0 -12px;padding:0 12px;background:#39271e;box-shadow:none}
.focused-play .game-brand{font-size:16px;letter-spacing:2px}.focused-play .game-brand span{display:none}
.focused-play .icon-btn{width:34px;height:30px;font-size:16px;border-radius:8px}
.focused-play .awning,.focused-play .core-rule,.focused-play .game-footer,
.focused-play .stage-stamp,.focused-play .order small,.focused-play .sale-notice,
.focused-play #difficulty-label,.focused-play .signal-track,.focused-play .flesh-legend,
.focused-play .scorch-status b,.focused-play .knife-symbol{display:none}
.focused-play .hud{grid-area:hud;gap:16px;padding:0;background:none;justify-content:flex-start}
.focused-play .hud>div{display:flex;align-items:baseline;gap:6px;flex:initial}
.focused-play .hud small{font-size:10px;white-space:nowrap;margin:0;letter-spacing:0}
.focused-play .hud strong{font-size:22px}.focused-play .hud strong span{font-size:10px}
.focused-play .hud .core-rule{display:none}
.focused-play .order{grid-area:order;margin:0;padding:4px 0;border:0;background:none;border-radius:0}
.focused-play .order>div:first-child{font-size:11px;gap:8px}.focused-play .order b{font-size:19px}
.focused-play .progress-track{height:4px;margin-top:5px}
.focused-play .customer-panel{grid-area:customers;display:flex;align-items:center;gap:14px;margin:0;padding:5px 10px;border-radius:8px}
.focused-play .customer-top{gap:10px;margin:0;font-size:10px;flex-shrink:0}
.focused-play .customer-top>b,.focused-play .customer-top>span:last-child{display:none}
.focused-play .customer-top strong{font-size:12px}
.focused-play .customer-queue{flex:1;min-height:0;gap:10px}
.focused-play .customer{gap:0}.focused-play .customer-avatar,.focused-play .customer-info>b{display:none}
.focused-play .customer-info>span{font-size:9px;margin:0;flex-wrap:nowrap;justify-content:flex-start;gap:3px}
.focused-play .customer-info strong{font-size:11px}.focused-play .customer-info em{font-size:9px;margin-left:auto}
.focused-play .patience-track{height:3px;margin-top:4px}
.game.focused-play .stage-wrap{grid-area:stage;margin:0;min-height:0;height:100%;max-height:none!important;width:100%;display:flex;border-radius:10px;overflow:hidden}
.game.focused-play .stage-wrap canvas{display:block;width:100%;height:100%!important;max-height:none;object-fit:contain}
.focused-play .breed-signal{grid-area:signal;display:flex;align-items:center;justify-content:center;margin:0;padding:0 8px;border:0;background:transparent;overflow:hidden}
.focused-play .breed-signal>div:first-child{font-size:11px;justify-content:center;width:100%}.focused-play .breed-signal span{text-align:center}
.focused-play .breed-signal.warning{background:#7a3c242e;border-radius:6px}
.focused-play .flesh-panel{grid-area:flesh;position:relative;display:grid;grid-template-columns:1fr 110px;grid-template-rows:22px 8px;gap:6px 18px;margin:0;padding:6px 10px;border:0;background:#d2ac690a;border-radius:8px}
.focused-play .flesh-panel>div:nth-child(3){grid-column:1;grid-row:1;font-size:11px;gap:8px}
.focused-play .flesh-panel strong{font-size:16px;white-space:nowrap}
.focused-play .flesh-track{grid-column:1;grid-row:2;margin:0;height:8px}
.focused-play .scorch-status{grid-column:2;grid-row:1;font-size:10px!important;margin:0;justify-content:flex-end}
.focused-play .scorch-track{grid-column:2;grid-row:2;margin:0;height:8px;align-self:center}
/* Notifications still reach screen readers. The persistent meat and heat meters
   and species cue supply visual warnings without another notification panel. */
.focused-play .event-rail{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;min-height:0;pointer-events:none}
.focused-play .cut-btn{grid-area:cut;margin:0;width:100%;min-height:0;height:100%;gap:0;border-radius:10px}
.focused-play .cut-btn strong{font-size:22px;letter-spacing:1px}.focused-play .cut-btn small{font-size:10px;margin-top:3px}
.focused-play .key-hint{top:20px;right:16px}
@media(max-width:600px){
 #app:has(.focused-play:not(.hidden)){padding:0}
 .game.focused-play{height:100svh;min-height:500px;padding:env(safe-area-inset-top) 10px max(10px,env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;gap:5px 10px;grid-template-rows:36px 38px 40px minmax(180px,1fr) 20px 50px 56px}
 .focused-play .game-top{margin:0 -10px;padding:0 10px}.focused-play .game-brand{font-size:14px}
 .focused-play .hud{gap:10px}.focused-play .hud small{display:none}.focused-play .hud strong{font-size:21px}
 .focused-play .order>div:first-child{font-size:10px}.focused-play .order #breed-label{font-size:10px;letter-spacing:0}.focused-play .order b{font-size:17px}
 .focused-play .customer-panel{padding:4px 7px;gap:10px}.focused-play .customer-top{font-size:9px}
 .focused-play .customer-info>span,.focused-play .customer-info em{font-size:8px}.focused-play .customer-info strong{font-size:10px}
 .game.focused-play .stage-wrap canvas{object-fit:cover}
 .focused-play .flesh-panel{grid-template-columns:1fr 82px;gap:5px 12px;padding:5px 7px}.focused-play .flesh-panel>div:nth-child(3){font-size:10px}.focused-play .scorch-status{font-size:9px!important}
 .focused-play .breed-signal>div:first-child{font-size:10px}.focused-play .cut-btn strong{font-size:21px}.focused-play .key-hint{display:none}
}

/* Dynamic viewport sizing also covers embedded browsers and split-screen. */
:root{--play-height:100vh;--play-width:100vw}
@supports(height:100dvh){:root{--play-height:100dvh}}
.game.focused-play{height:calc(var(--play-height) - 24px);min-height:0;grid-template-rows:44px 42px 44px minmax(0,1fr) 22px 54px 60px}
.focused-play .icon-btn{width:44px;height:44px;flex-shrink:0}
.game.focused-play .stage-wrap{position:relative}
html[data-play-layout] .game.focused-play .stage-wrap canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--scene-width,100%);height:var(--scene-height,100%)!important;max-width:none;max-height:none;object-fit:fill}
.modal{max-height:var(--play-height);padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.modal-card{max-height:calc(var(--play-height) - 24px);overscroll-behavior:contain}
@media(max-width:600px){
 .game.focused-play{height:var(--play-height);min-height:0;grid-template-rows:44px 38px 40px minmax(0,1fr) 20px 50px 60px;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .focused-play .hud strong{font-size:22px}.focused-play .cut-btn strong{font-size:23px}
}
@media(pointer:coarse){.focused-play .key-hint{display:none}.audio-settings button,.text-btn{min-height:44px}}
/* A short, wide screen gets a grill on the left and thumb controls on the right. */
@media(orientation:landscape) and (max-height:599px){
 #app:has(.focused-play:not(.hidden)){padding:0}
 .game.focused-play{max-width:none;width:100%;height:var(--play-height);min-height:0;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:4px 12px;grid-template-columns:minmax(0,1fr) clamp(210px,32vw,290px);grid-template-rows:44px 30px 32px 40px 22px minmax(48px,1fr) 56px;grid-template-areas:"top top" "stage hud" "stage order" "stage customers" "stage signal" "stage flesh" "stage cut"}
 .focused-play .game-top{margin:0;padding:0;background:transparent}.focused-play .game-brand{font-size:14px}
 .focused-play .hud{justify-content:space-between;padding:0}.focused-play .hud small{display:none}.focused-play .hud strong{font-size:22px}
 .focused-play .order{padding:0}.focused-play .order b{font-size:17px}.focused-play .order>div:first-child{font-size:10px}
 .focused-play .customer-panel{gap:7px;padding:4px 6px}.focused-play .customer-top{font-size:9px}.focused-play .customer-queue{gap:5px}
 .focused-play .customer-info>span{font-size:0}.focused-play .customer-info strong{font-size:10px}.focused-play .customer-info em{font-size:8px}
 .focused-play .flesh-panel{align-self:end;height:48px;grid-template-columns:minmax(0,1fr) 74px;gap:4px 8px;padding:4px}.focused-play .flesh-panel>div:nth-child(3){font-size:9px}.focused-play .flesh-panel strong{font-size:14px}.focused-play .scorch-status{font-size:8px!important}
 .focused-play .breed-signal>div:first-child{font-size:10px}.focused-play .cut-btn strong{font-size:21px}.focused-play .cut-btn small{font-size:9px}.focused-play .key-hint{display:none}
}