/* The grill look: colors, textures and the per-board background photo. */
body {
    --ink: #f4eedb;
    --paper: #111417;
    --panel-paper: rgba(22, 24, 27, 0.86);
    --border: transparent;
    --muted: #d6c39a;
    --accent-soft: rgba(249, 200, 69, 0.22);
    --price: #f9c845;
    --title-color: #ffcd48;
    --subtitle-color: #ffcd48;
    --frame-bg: transparent;
    --panel-bg: #2B2B2E;
    --panel-shadow: 0 16px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --panel-title-bg: linear-gradient(95deg, #f4b700 0%, #ffc938 48%, #f1a800 100%);
    --panel-title-color: #161616;
    --panel-title-border: 1px solid rgba(120, 90, 0, 0.6);
    --panel-title-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
    --frame-shadow: 0 0 0 2px rgba(255, 196, 76, 0.15), 0 18px 34px rgba(0, 0, 0, 0.5);

    background-color: #121518;
    background-attachment: fixed;
    overflow-x: hidden;
    /* Per-board background image is set inline from "background" in data/menu.json. */
    background-size: cover;
}

body.tv-mode {
    overflow: hidden;
}

body #app,
body .frame,
body .page {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    box-shadow: none;
}

body .panel {
    box-shadow: var(--panel-shadow);
    background-image: url("grill/panel-bg.png");
    backdrop-filter: contrast(1.05) brightness(0.95);
}

body .panel-title {
    z-index: 100;
    border-radius: 3px;
    letter-spacing: 1.4px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.15);
    box-shadow: var(--panel-title-shadow);

    border-radius: 3px;

    /* golden gradient */
    background-image: linear-gradient(145deg,
            #fff6b7 0%,
            #f5d76e 25%,
            #d4af37 45%,
            #b8860b 60%,
            #f5d76e 75%,
            #fff2a6 100%);
    /* brushed smooth */
    background-image:
        linear-gradient(145deg,
            #fff6b7 0%,
            #f5d76e 25%,
            #d4af37 45%,
            #b8860b 60%,
            #f5d76e 75%,
            #fff2a6 100%),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(0, 0, 0, 0.04) 2px,
            rgba(255, 255, 255, 0.04) 4px);
    background-blend-mode: overlay;
}

body .item-title,
body .topping-grid {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

body .topping-grid>div {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

body .price {
    text-shadow: 0 2px 4px black, 0 0px 12px rgba(249, 200, 69, 0.2);
    z-index: 10;
}

body .header {
    box-shadow: var(--panel-shadow);
    background: var(--panel-bg);
    padding: 15px;
    padding-top: 10px;
    margin-bottom: 30px;
    background-image: url("grill/panel-bg.png");
}


body .header .title,
body .header .subtitle {
    text-shadow: 0 2px 4px black;
    z-index: 10;
}

body section.panel::after {
    /* content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0.18) 100%);
    mix-blend-mode: overlay; */


    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at center,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.25) 100%);

    mix-blend-mode: multiply;
}

body .panel::before {
    background:
        radial-gradient(circle at 80% 0%,
            rgba(255, 255, 255, 0.08),
            rgba(0, 0, 0, 0.25) 70%);
    mix-blend-mode: soft-light;
}