/* Art-directed arcade stages: enamel kitchen and night delivery. */
.food-screen,
.drone-screen {
    font-family: inherit;
    --arcade-shadow: #05060a;
}

.food-screen {
    --game-accent: #f23127;
    background: #202125;
    color: #fff8e8;
}
.food-screen:not(.food-kitchen) {
    padding: clamp(20px, 4vw, 48px);
    background:
        linear-gradient(90deg, rgba(8,9,11,.94), rgba(8,9,11,.56)),
        url('/assets/games/art/food-or-ai.png') center / cover;
}
.food-screen .game-start,
.food-screen .game-result {
    width: min(830px, 100%);
    max-height: none;
    padding: clamp(24px, 4vw, 46px);
    border: 4px solid #101113;
    outline: 2px solid #8e9396;
    outline-offset: -8px;
    background: linear-gradient(145deg, #303238, #131416 70%);
    box-shadow: 0 0 0 3px #020203, 8px 8px 0 #050505, inset 0 4px #a7a5a0, inset 0 -6px #050505;
    backdrop-filter: none;
}
.food-screen .game-start h2,
.food-screen .game-result h2 {
    font-family: var(--arcade-display, 'Arial Black', sans-serif);
    font-size: clamp(34px, 5.4vw, 65px);
    line-height: .99;
    letter-spacing: -.025em;
    text-shadow: 3px 3px #050505;
}
.food-screen .game-start h2 { font-size: clamp(32px, 4.4vw, 52px); }
.food-screen .game-start-badge,
.food-screen .game-result-kicker {
    display: inline-block;
    padding: 7px 10px;
    background: #dc2923;
    color: #fff5d9;
    box-shadow: 3px 3px #070707;
    letter-spacing: .08em;
}
.food-screen .game-start > p:not(.game-start-badge),
.food-screen .game-result > p:not(.game-result-kicker) {
    color: #d6d3c9;
    font-size: 15px;
    line-height: 1.6;
}
.food-screen .game-start-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
}
.food-screen .game-button {
    min-height: 53px;
    background: linear-gradient(#36393e, #1c1d20);
    border: 3px solid #07080a;
    color: #f7efde;
    box-shadow: inset 0 2px #9c9d96, inset 0 -4px #111, 4px 4px #030303;
    font-family: var(--arcade-display, 'Arial Black', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .025em;
    text-align: left;
}
.food-screen .game-button--primary {
    background: linear-gradient(#ff5141 0 5%, #dc201c 9% 88%, #a21117 92%);
    box-shadow: inset 0 2px #ffc4a3, inset 0 -4px #7f1115, 4px 4px #030303;
}
.food-screen .game-button:disabled { opacity: .65; filter: saturate(.3); }
.food-screen .game-result-stat { background: #0c0e11; border: 2px solid #74777a; box-shadow: inset 0 3px #020303; }
.food-screen .game-result-stat strong { color: #ffce42; font-family: var(--arcade-display, 'Arial Black', sans-serif); }

.food-screen.food-kitchen { padding: 0; background: #15171b; color: #fff8e8; }
.food-screen .food-pixel-hud {
    position: relative;
    z-index: 4;
    gap: 9px;
    grid-template-columns: 1.05fr .65fr .65fr 1.2fr;
    padding: 11px 13px;
    background: repeating-linear-gradient(90deg, #151619 0 90px, #08090a 91px 95px);
    border-bottom: 5px solid #050505;
    box-shadow: 0 3px #e52b24;
}
.food-screen .food-pixel-hud > div {
    min-height: 59px;
    padding: 9px 12px;
    border: 3px solid #090909;
    outline: 1px solid #65676c;
    background: linear-gradient(#202227, #090a0c);
    box-shadow: inset 0 2px #92928c, inset 0 -2px #33353a, 3px 3px #000;
}
.food-screen .food-pixel-hud strong {
    color: #ffcf3b;
    font-family: var(--arcade-display, 'Arial Black', sans-serif);
    font-size: clamp(24px, 2.7vw, 36px);
    line-height: .95;
    letter-spacing: .03em;
    text-shadow: 2px 2px #050505;
}
.food-screen .food-pixel-hud small,
.food-screen .food-pixel-hud span { color: #c9c9c2; font-size: 9px; letter-spacing: .07em; }
.food-screen .food-hud-brand { border-top-color: #e82a22 !important; }
.food-screen .food-hud-brand strong { color: #fff5df; font-size: clamp(21px, 2vw, 30px); }
.food-screen .food-hud-brand small { margin-top: 4px; }
.food-screen .food-clock { background: linear-gradient(#202227, #090a0c); }
.food-screen .food-clock strong { color: #ffce3e; }
.food-screen .food-hud-status { grid-template-columns: 1fr 1fr; gap: 5px; }
.food-screen .food-hud-status .food-hearts { grid-column: 1 / -1; color: #ff4238; font-size: 18px !important; letter-spacing: .18em; text-shadow: 2px 2px #000; }
.food-screen .food-kitchen-stage {
    padding: 88px 24px 22px;
    background:
        linear-gradient(0deg, #4a4b4c 0 5px, #111216 6px 11px, transparent 12px) 0 72% / 100% 9%,
        linear-gradient(0deg, #a71b1c, #72191a) 0 87% / 100% 22% no-repeat,
        repeating-linear-gradient(90deg, transparent 0 70px, #080a0d 71px 75px),
        repeating-linear-gradient(0deg, #24262a 0 44px, #090a0c 45px 49px);
}
.food-screen .food-kitchen-stage::before {
    position: absolute;
    inset: 0 17% auto;
    height: 63px;
    border: 4px solid #08090a;
    background:
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.09) 11px 14px),
        linear-gradient(#56595b, #8c8b84 34%, #2a2d32 37% 79%, #111317 80%);
    box-shadow: 0 8px #07080a, 0 10px #5c5c5b;
}
.food-screen .food-kitchen-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 9% 0, rgba(255,196,87,.16), transparent 25%),
        radial-gradient(ellipse at 91% 0, rgba(255,196,87,.16), transparent 25%),
        linear-gradient(90deg, #070708 0 5px, transparent 6px calc(100% - 6px), #070708 calc(100% - 5px));
}
.food-screen .food-kitchen-sign {
    top: 17px;
    z-index: 2;
    gap: 15px;
    padding: 8px 17px;
    border: 3px solid #08090b;
    outline: 2px solid #be2524;
    outline-offset: 2px;
    background: #101113;
    box-shadow: inset 0 2px #5f6267, 4px 7px #050505;
}
.food-screen .food-kitchen-sign span { color: #ff4d3e; font-size: 9px; font-weight: 800; }
.food-screen .food-kitchen-sign strong { font-family: var(--arcade-display, 'Arial Black', sans-serif); color: #fff5df; font-size: 18px; letter-spacing: .04em; }
.food-screen .food-conveyor { gap: 17px; align-items: end; }
.food-screen .food-dish-card {
    min-height: 270px;
    padding: 36px 12px 16px;
    overflow: hidden;
    background: #f6f0df;
    color: #25231f;
    border: 4px solid #080909;
    box-shadow: 0 0 0 2px #aaa69b, 5px 6px #070707;
}
.food-screen .food-dish-card::after { inset: 5px; border: 2px solid #d42824; }
.food-screen .food-dish-card.is-current {
    min-height: 300px;
    transform: translateY(-11px);
    background: #fff9e9;
    border-color: #080909;
    box-shadow: 0 0 0 3px #f33227, 6px 8px #050505;
}
.food-screen .food-order-number {
    top: 11px;
    left: 12px;
    padding: 4px 7px;
    background: #222428;
    color: #ece8dc;
    font-size: 9px;
    letter-spacing: .08em;
}
.food-screen .is-current .food-order-number { background: #e52c24; color: #fff6dc; }
.food-screen .food-dish-plate {
    width: min(100%, 210px);
    aspect-ratio: 1;
    overflow: hidden;
    background: none;
    filter: drop-shadow(0 5px rgba(50,41,29,.18));
}
.food-screen .food-dish-sprite {
    aspect-ratio: 1;
    background-size: 500% 400%;
    clip-path: inset(6% 6% 3%);
    image-rendering: auto;
    filter: saturate(1.03) contrast(1.04);
}
.food-screen .food-dish-card h2 {
    align-self: end;
    margin: 2px 0 5px;
    padding: 0 3px;
    font-family: var(--arcade-display, 'Arial Black', sans-serif);
    font-size: clamp(15px, 1.7vw, 23px);
    line-height: 1.03;
    letter-spacing: .01em;
}
.food-screen .food-dish-card small { font-size: 9px; color: #7a7369; }
.food-screen .food-belt {
    height: 42px;
    gap: 18px;
    margin: -3px -24px 0;
    border-width: 6px 0;
    border-color: #080909;
    padding: 6px 20px;
    background: repeating-linear-gradient(90deg, #35373b 0 17px, #111317 18px 23px);
    box-shadow: 0 3px #838382, 0 8px #090a0c, 0 11px #b52121;
}
.food-screen .food-belt i { background: radial-gradient(circle, #e02b27 0 16%, #111 18% 30%, #7e7e7a 32% 65%, #3c3e42 67%); border: 2px solid #070708; }
.food-screen .food-decision-deck { grid-template-columns: 1fr 1.05fr 1fr; gap: 16px; margin-top: 25px; }
.food-screen .food-decision {
    position: relative;
    min-height: 88px;
    gap: 10px;
    padding: 14px;
    border: 5px solid #070808;
    outline: 2px solid #34383c;
    outline-offset: 1px;
    color: #fff8e7;
    font-family: var(--arcade-display, 'Arial Black', sans-serif);
    font-size: clamp(23px, 3vw, 39px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 2px 2px rgba(0,0,0,.4);
    box-shadow: inset 0 4px #ffb495, inset 0 -6px #8e1417, 5px 7px #050505;
    transition: transform .12s, filter .12s;
}
.food-screen .food-decision--menu { background: linear-gradient(#fa4b3d, #df201e 28% 80%, #bf151b); }
.food-screen .food-decision--trash { background: linear-gradient(#35383b, #151719 28% 80%, #090a0c); box-shadow: inset 0 4px #8a8d89, inset 0 -6px #050505, 5px 7px #050505; }
.food-screen .food-decision span { width: 33px; height: 36px; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: 36px; }
.food-screen .food-decision:hover { filter: brightness(1.14); transform: translateY(-2px); }
.food-screen .food-decision:active { transform: translateY(3px); }
.food-screen .food-decision:focus-visible { outline: 3px solid #ffcf45; outline-offset: 4px; }
.food-screen .food-chef-note { padding: 10px 13px; background: #f3e8cf; border: 3px solid #18191b; box-shadow: 4px 4px #050505; color: #36322a; font-size: 11px; font-weight: 600; line-height: 1.4; transform: rotate(-1deg); }
.food-screen .food-timebar { z-index: 5; height: 9px; border-radius: 0; border-top: 2px solid #050505; background: #151719; }
.food-screen .food-timebar > span { background: repeating-linear-gradient(90deg, #ffcd39 0 20px, #d69220 21px 23px); }
.food-screen .food-feedback { max-width: min(560px, calc(100% - 40px)); padding: 24px 28px; background: #fff4d9; color: #27251f; border: 5px solid #0c0d0f; outline: 3px solid #f1362a; outline-offset: 2px; box-shadow: 9px 12px #070707; font-size: 16px; line-height: 1.5; }

.drone-screen { --game-accent: #f6b744; background: #07172c; color: #edf2ff; padding: 0; }
.drone-screen > .game-start {
    width: min(910px, calc(100% - 48px));
    max-height: none;
    margin: 30px auto;
    padding: clamp(24px, 4vw, 42px);
}
.drone-screen:has(> .game-start) {
    background: linear-gradient(90deg, rgba(3,12,28,.96), rgba(3,12,28,.67)), url('/assets/games/art/drone-delivery.png') center / cover;
}
.drone-screen .game-start,
.drone-screen .game-result {
    border: 4px solid #080c17;
    outline: 2px solid #436390;
    outline-offset: -9px;
    background: linear-gradient(145deg, #172c4d, #081120 75%);
    box-shadow: 0 0 0 2px #2a4162, 8px 8px #02060d, inset 0 3px #6d88ac;
    backdrop-filter: none;
}
.drone-screen .game-start h2,
.drone-screen .game-result h2 { font-family: var(--arcade-display, 'Arial Black', sans-serif); font-size: clamp(34px, 5.6vw, 65px); letter-spacing: -.015em; line-height: 1; color: #edf3ff; text-shadow: 3px 3px #02070f; }
.drone-screen .game-start-badge,
.drone-screen .game-result-kicker { color: #f9bf4b; font-size: 11px; letter-spacing: .14em; }
.drone-screen .game-start > p:not(.game-start-badge),
.drone-screen .game-result > p:not(.game-result-kicker) { color: #b6c6e0; font-size: 15px; line-height: 1.6; }
.drone-screen .game-start-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 10px; }
.drone-screen .game-button { min-height: 53px; padding: 11px 13px; background: linear-gradient(#263d60, #12213a); border: 3px solid #050b16; color: #d8e7ff; box-shadow: inset 0 2px #6385b1, inset 0 -3px #081124, 4px 4px #02060e; font-family: var(--arcade-display, 'Arial Black', sans-serif); font-size: 16px; font-weight: 700; letter-spacing: .025em; text-align: left; }
.drone-screen .game-button--primary { background: linear-gradient(#ffda70, #e4a536); color: #101d31; box-shadow: inset 0 2px #fff2b2, inset 0 -3px #9e6826, 4px 4px #02060e; }
.drone-screen .game-button:disabled { opacity: .43; filter: saturate(.3); }
.drone-screen .game-result-stat { border: 2px solid #4d6d99; background: #060e1c; }
.drone-screen .game-result-stat strong { font-family: var(--arcade-display, 'Arial Black', sans-serif); color: #f8c254; }
.drone-screen .drone-canvas-wrap { overflow: hidden; background: #07142b !important; }
.drone-screen .drone-canvas { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 22% center; }
.drone-screen .drone-canvas-wrap::after { content: ''; position: absolute; z-index: 2; inset: 0; border: 5px solid #050b16; box-shadow: inset 0 0 0 2px #29446c, inset 0 0 80px rgba(0,3,12,.45); pointer-events: none; }
.drone-screen .drone-stealth-hud { inset: 16px 18px auto; grid-template-columns: 1fr .5fr 1.1fr; gap: 17px; }
.drone-screen .drone-mission-card,
.drone-screen .drone-altimeter,
.drone-screen .drone-alert-card { min-width: 0; padding: 12px 15px; border: 3px solid #050b15; outline: 2px solid #34527e; outline-offset: 0; background: linear-gradient(#111e36, #060c1b); color: #ecf1ff; box-shadow: inset 0 2px #526f9b, inset 0 -2px #213b60, 4px 5px rgba(0,0,0,.65); }
.drone-screen .drone-mission-card { grid-template-columns: 1fr; gap: 2px; }
.drone-screen .drone-mission-card small { color: #88a8d5; font-size: 9px; letter-spacing: .12em; }
.drone-screen .drone-mission-card strong { font-family: var(--arcade-display, 'Arial Black', sans-serif); color: #ffc94c; font-size: clamp(20px, 2.6vw, 30px); line-height: 1; letter-spacing: .02em; }
.drone-screen .drone-mission-card span { justify-self: start; color: #95aed0; font-size: 9px; }
.drone-screen .drone-altimeter { align-content: center; gap: 3px; }
.drone-screen .drone-altimeter small { color: #91abd0; font-size: 9px; letter-spacing: .1em; }
.drone-screen .drone-altimeter strong { color: #e0eaff; font-family: var(--arcade-display, 'Arial Black', sans-serif); font-size: 27px; line-height: 1; }
.drone-screen .drone-alert-title { align-items: baseline; font-family: var(--arcade-display, 'Arial Black', sans-serif); font-size: 17px; letter-spacing: .04em; }
.drone-screen .drone-alert-title strong { color: #ff4b65; font-size: 23px; }
.drone-screen .drone-alert-track { height: 14px; margin: 6px 0 7px; background: repeating-linear-gradient(90deg, #282c4b 0 12px, #090d1e 13px 16px); border: 0; box-shadow: inset 0 2px #030713; }
.drone-screen .drone-alert-track span { background: repeating-linear-gradient(90deg, #ff4259 0 12px, #ad2038 13px 16px); box-shadow: 0 0 12px rgba(255,33,64,.45); }
.drone-screen .drone-telemetry { color: #9fb3d1; font-size: 8px; letter-spacing: .04em; }
.drone-screen .drone-mobile-thrust { right: 25px; bottom: 23px; width: 94px; height: 76px; border: 4px solid #030913; outline: 2px solid #4b678a; outline-offset: 0; background: linear-gradient(#ffdf81, #e2a936); color: #13223b; font-family: var(--arcade-display, 'Arial Black', sans-serif); font-size: 22px; letter-spacing: .05em; box-shadow: inset 0 3px #fff2bf, inset 0 -6px #9c6323, 5px 6px #02060e; }
.drone-screen .drone-mobile-thrust::before { content: '▲'; display: block; margin-bottom: 2px; font-size: 18px; }
.drone-screen .drone-mobile-thrust:active { transform: translateY(3px); filter: brightness(1.15); }
.drone-screen .drone-overlay { padding: 28px; background: rgba(2,8,20,.6); backdrop-filter: blur(2px); }
.drone-screen .drone-overlay .game-start,
.drone-screen .drone-overlay .game-result { width: min(720px, 100%); padding: clamp(24px, 4vw, 45px); }
.drone-screen .drone-overlay .game-start-actions { grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
    .food-screen .food-pixel-hud { grid-template-columns: 1.1fr .7fr .7fr; gap: 7px; padding: 9px; }
    .food-screen .food-hud-status { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; min-height: 26px !important; padding-block: 5px !important; }
    .food-screen .food-hud-status .food-hearts { grid-column: auto; }
    .food-screen .food-kitchen-stage { padding-top: 80px; }
    .food-screen .food-conveyor { gap: 16px; }
    .food-screen .food-dish-card { min-height: 255px; }
    .food-screen .food-dish-card.is-current { min-height: 280px; }
    .food-screen .food-dish-plate { width: min(100%, 230px); }
    .food-screen .food-decision-deck { grid-template-columns: 1fr 1fr; gap: 13px; }
    .food-screen .food-chef-note { grid-column: 1 / -1; grid-row: 1; padding: 10px 16px; font-size: 12px; }
    .food-screen .food-decision { min-height: 75px; }
    .drone-screen .game-start-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .food-screen.food-kitchen { min-height: 630px; height: auto; }
    .food-screen:not(.food-kitchen) { padding: 20px 15px; }
    .food-screen .game-start, .food-screen .game-result { padding: 24px 21px; }
    .food-screen .game-start-actions { gap: 8px; }
    .food-screen .game-button { padding: 10px 11px; font-size: 14px; }
    .food-screen .food-pixel-hud { grid-template-columns: 1.2fr .7fr .7fr; gap: 6px; padding: 8px; }
    .food-screen .food-pixel-hud > div { padding: 8px 7px; min-height: 54px; border-width: 2px; }
    .food-screen .food-pixel-hud strong { font-size: 27px; }
    .food-screen .food-hud-brand strong { font-size: 23px; }
    .food-screen .food-hud-brand small { font-size: 8px; letter-spacing: 0; }
    .food-screen .food-pixel-hud span { font-size: 8px; }
    .food-screen .food-kitchen-stage { padding: 61px 14px 14px; }
    .food-screen .food-kitchen-stage::before { height: 43px; }
    .food-screen .food-kitchen-sign { top: 11px; width: max-content; max-width: calc(100% - 40px); gap: 8px; padding: 7px 12px; }
    .food-screen .food-kitchen-sign span { display: none; }
    .food-screen .food-kitchen-sign strong { font-size: 17px; }
    .food-screen .food-conveyor { gap: 11px; }
    .food-screen .food-dish-card { min-height: 216px; padding: 31px 7px 12px; border-width: 3px; }
    .food-screen .food-dish-card.is-current { min-height: 232px; transform: translateY(-7px); }
    .food-screen .food-dish-card::after { inset: 4px; border-width: 1px; }
    .food-screen .food-order-number { top: 10px; left: 10px; padding: 3px 5px; font-size: 8px; }
    .food-screen .food-dish-plate { width: min(100%, 140px); }
    .food-screen .food-dish-card h2 { margin-top: 5px; font-size: 17px; }
    .food-screen .food-dish-card small { font-size: 8px; }
    .food-screen .food-belt { margin-inline: -14px; height: 30px; gap: 9px; padding: 4px 12px; }
    .food-screen .food-decision-deck { margin-top: 18px; gap: 10px; }
    .food-screen .food-decision { min-height: 60px; padding: 9px 7px; border-width: 4px; font-size: 25px; }
    .food-screen .food-decision span { display: none; }
    .food-screen .food-chef-note { padding: 8px 10px; font-size: 11px; }
    .food-screen .food-feedback { min-width: 0; width: calc(100% - 40px); padding: 20px; font-size: 14px; }
    .drone-screen > .game-start { width: calc(100% - 30px); margin-block: 20px; padding: 27px 22px; }
    .drone-screen .game-start-actions { gap: 8px; margin-top: 22px; }
    .drone-screen .game-button { padding: 9px 11px; min-height: 53px; font-size: 14px; }
    .drone-screen .drone-canvas-wrap { min-height: 620px; }
    .drone-screen .drone-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 23% center; }
    .drone-screen .drone-stealth-hud { inset: 12px 12px auto; grid-template-columns: 1fr 1fr; gap: 11px; }
    .drone-screen .drone-mission-card, .drone-screen .drone-alert-card { padding: 10px 9px; border-width: 2px; }
    .drone-screen .drone-altimeter { display: none; }
    .drone-screen .drone-mission-card strong { font-size: 23px; }
    .drone-screen .drone-mission-card small { font-size: 8px; }
    .drone-screen .drone-alert-title { font-size: 15px; }
    .drone-screen .drone-alert-title strong { font-size: 20px; }
    .drone-screen .drone-telemetry { font-size: 7px; gap: 5px; }
    .drone-screen .drone-alert-track { height: 13px; }
    .drone-screen .drone-mobile-thrust { right: 20px; bottom: 24px; width: 95px; height: 82px; }
    .drone-screen .drone-overlay { padding: 19px; }
    .drone-screen .drone-overlay .game-start, .drone-screen .drone-overlay .game-result { padding: 26px 22px; }
    .drone-screen .game-result-stat { padding: 10px 7px; }
    .drone-screen .game-result-stat strong { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .food-screen .food-decision, .food-screen .food-dish-card { transition: none; }
}