/* Supplied layers share a 952 x 2048 canvas. Keep original coordinates and pixels. */
#screen-home.home-concept { display: none !important; background: #ffefd0; }
/* Homepage overrides; coordinates normalized from 450 x 975. */
#screen-home.home-concept {
  --home-cast-top: 17.64102564102564%;
  --home-cast-height: 18.974358974358974%;
  --home-cast-left: 4%;
  --home-cast-right: 4%;
  --home-building-top: 0%;
  --home-building-width: 100%;
  --home-building-left: 0%;
  --home-building-height: 100%;
  --home-building-opacity: 1;
  --home-chef-top: 71.03028882769934%;
  --home-chef-height: 44.153963325326615%;
  --home-chef-left: 50%;
  --home-table-top: 0%;
  --home-table-width: 100%;
  --home-table-left: 0%;
  --home-menu-scale: 1;
  --home-menu-bottom: 0%;
}
#screen-home.home-concept.active { display: block !important; }
.home-scenery, .home-actions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.home-scenery { overflow: hidden; }
.home-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.home-sky { z-index: 1; }
.home-sky, .home-wall { top: var(--home-building-top, 0); left: var(--home-building-left, 0); width: var(--home-building-width, 100%); height: var(--home-building-height, 100%); }
.home-cast { position: absolute; top: var(--home-cast-top, 17.64102564102564%); left: var(--home-cast-left, 4%); right: var(--home-cast-right, 4%); height: var(--home-cast-height, 18.974359%); display: flex; justify-content: space-around; z-index: 2; }
.home-cast img { height: 100%; width: 24%; object-fit: contain; object-position: center top; }
.home-cast-member { position: relative; width: 24%; height: 100%; will-change: transform; }
.home-cast-member img, .home-cast-sprite { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; image-rendering: pixelated; }
.home-cast-props { z-index: 7; pointer-events: none; }
.home-cast-vegetable { position: absolute; top: -5%; left: 50%; width: 50px; height: 50px; image-rendering: pixelated; transform-origin: center bottom; }
.home-chef-animated { pointer-events: none; }
.home-chef-touch { position: absolute; top: 36%; left: 4%; right: 4%; height: 36%; z-index: 8; display: flex; }
.home-chef-touch button { width: 42%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.home-chef-touch button:nth-child(2) { width: 16%; }
.home-chef-touch button:focus-visible { outline: 2px dashed #ffe5a2; outline-offset: -4px; }
.home-wall { z-index: 3; opacity: var(--home-building-opacity, 1); }
.home-chef-window { position: absolute; top: 0; left: 0; width: 100%; height: 64.111328%; overflow: hidden; z-index: 4; }
.home-chef { position: absolute; top: var(--home-chef-top, 55.513%); height: var(--home-chef-height, 69.911%); width: auto; left: var(--home-chef-left, 50%); transform: translateX(-50%); image-rendering: pixelated; }
.home-cardpack { position: absolute; top: 58.7%; left: 50%; width: 14.1%; height: 7.8%; z-index: 5; transform: translateX(-50%); pointer-events: none; }
.home-cardpack::before { content: ''; position: absolute; bottom: 4%; left: 18%; width: 64%; height: 6%; border-radius: 50%; background: rgba(76, 39, 24, .24); }
.home-cardpack img, .home-cardpack canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.home-cardpack canvas { visibility: hidden; }
.home-cardpack[data-renderer="webgl"] canvas { visibility: visible; }
.home-cardpack[data-renderer="webgl"] img { visibility: hidden; }
.home-counter { z-index: 5; top: var(--home-table-top, 0); left: var(--home-table-left, 0); width: var(--home-table-width, 100%); }
.home-logo { position: absolute; top: 2%; left: 11%; width: 77%; margin: 0; z-index: 6; pointer-events: none; }
.home-logo img { display: block; width: 100%; height: auto; }
.home-settings { position: absolute; top: calc(var(--top-safe-area-height) + var(--top-safe-area-gap)); right: 2.1%; z-index: 11; width: 11%; height: 5%; min-height: 42px; padding: 12px; }
.home-settings svg { display: block; width: 100%; height: 100%; fill: #583026; }
.home-settings circle { fill: #fff1ce; }
.home-actions { z-index: 10; transform: translateY(var(--home-menu-bottom, 0)) scale(var(--home-menu-scale, 1)); transform-origin: center 93%; }
.home-current-music { position: absolute; top: 72%; left: 8%; width: 84%; height: 3.5%; display: flex; align-items: center; justify-content: center; color: #603428; font-size: 20px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 1px #fff8df; }
#home-music-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-music-note { flex-shrink: 0; margin-right: 10px; font-size: 26px; }
.home-settings { transition: transform 120ms ease, filter 120ms ease; }
.home-art-button:disabled { cursor: wait; filter: grayscale(.6); opacity: .65; transform: none; }
.home-art-button { position: absolute; border: 0; border-radius: 0; padding: 0; background: transparent; overflow: hidden; cursor: pointer; pointer-events: auto; transition: transform 100ms ease, filter 100ms ease; }
.home-art-button { display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 24px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.home-button-icon { width: 28px; height: 32px; flex-shrink: 0; margin-right: 12px; fill: currentColor; pointer-events: none; }
/* Keep the original visible button coordinates; the shared base fills each hit area. */
.home-play { left: 4.936975%; top: 75.976563%; width: 90.231092%; height: 9.570313%; }
.home-play.pixel-button { --button-main: #ff8555; --button-dark: #cb5535; --button-light: #ffbd83; color: #fff2c9; font-size: 44px; letter-spacing: 3px; text-shadow: 2px 2px #613629, -2px -2px #613629, 0 3px #613629; }
.home-play .home-button-icon { width: 38px; height: 44px; margin-right: 18px; filter: drop-shadow(2px 2px #613629); }
.home-choose { left: 5.252101%; top: 86.621094%; width: 44.012605%; height: 6.25%; }
.home-import { left: 50.840336%; top: 86.621094%; width: 44.012605%; height: 6.25%; }
.home-import.pixel-button { --button-main: #8ed5f0; --button-dark: #509bc6; --button-light: #cef2ff; color: #173d50; }
.home-art-button:active, .home-settings:active { transform: translateY(3px) scale(0.99); }
.home-art-button:focus, .home-settings:focus { outline: 3px solid #603428; outline-offset: 4px; }
.home-art-button:focus:not(:focus-visible), .home-settings:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) { .home-art-button:hover { filter: brightness(1.07); } }
.home-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.home-settings-overlay .modal-dialog { color: #603b2b; background: #fff0ce; border: 3px solid #74432d; }
.home-settings-overlay .modal-title { color: #603b2b; }
.home-settings-hint { font-size: 12px; margin-top: 10px; }
.home-settings-help { font-size: 14px; line-height: 1.9; margin: 0 0 22px; }
.home-settings-overlay .range-slider { background: #dac49b; }
@media (prefers-reduced-motion: reduce) { .home-art-button { transition: none; } }
/* Keep the existing developer control away from the settings hit area on phones. */
@media (max-width: 600px) { .rc-tweak-trigger { left: 14px; right: auto; } }