*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    color-scheme: dark;
    --safe-inset-top:    env(safe-area-inset-top, 0px);
    --safe-inset-bottom: env(safe-area-inset-bottom, 0px);
    --accent:            oklch(0.72 0.16 160);
    --bg:                oklch(0.115 0.018 245);
    --bg-2:              oklch(0.135 0.022 205);
    --text-1:            oklch(0.96 0.012 245);
    --text-2:            oklch(0.84 0.018 245 / 0.82);
    --text-3:            oklch(0.72 0.018 245 / 0.48);
    --line:              oklch(0.92 0.01 245 / 0.11);
    --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:           cubic-bezier(0.55, 0, 1, 0.45);
    --font-mono:         ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Liberation Mono', monospace;
    --shadow-inset-top:  inset 0 1px 0 oklch(0.96 0.01 245 / 0.08);
    --vh-full:           var(--app-height, 100vh);
}

html, body {
    width: 100%;
    height: var(--vh-full);
    overscroll-behavior: none;
    touch-action: none;
    overflow: clip;
    background: linear-gradient(145deg, var(--bg) 0%, oklch(0.105 0.018 245) 48%, var(--bg-2) 100%);
    font-family: 'Avenir Next', 'Avenir', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--text-1);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(90deg, oklch(0.9 0.01 245 / 0.035) 1px, transparent 1px),
        linear-gradient(0deg, oklch(0.9 0.01 245 / 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
    opacity: 0.32;
    pointer-events: none;
}

.screen {
    position: fixed;
    inset: 0;
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    contain: layout paint;
    background: radial-gradient(
        ellipse 80% 55% at 50% 110%,
        oklch(from var(--_dc, var(--accent)) l c h / 0.06) 0%,
        transparent 60%
    );
}

.screen.active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}

.screen-content {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    padding:
        clamp(24px, 5vmin, 54px)
        clamp(26px, 7vw, 88px)
        calc(clamp(54px, 8vmin, 88px) + var(--safe-inset-bottom));
    overflow: hidden;
}

.restaurant-name {
    max-width: 100%;
    margin-bottom: clamp(12px, 2vmin, 18px);
    flex-shrink: 0;
    overflow: hidden;
    color: color-mix(in oklch, var(--text-1) 88%, var(--_dc, var(--accent)));
    font-size: clamp(1.85rem, 7.15vw, 2.7rem);
    font-weight: 800;
    line-height: 1.04;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: title-in 360ms var(--ease-out) both;
    transition: color 150ms ease;
}

.day-panel-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --_dc-* locals are hoisted here so both .day-badge and .empty-menu-card inherit them */
.day-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    --_dc:        var(--accent);
    --_dc-muted:  oklch(from var(--_dc) l c h / 0.14);
    --_dc-border: oklch(from var(--_dc) l c h / 0.28);
    --_dc-soft:   oklch(from var(--_dc) l c h / 0.09);
    --line:       var(--_dc-muted);
}

.day-panel--animating { will-change: transform, opacity; }

/* Day-of-week palette: Mon=blue → Fri=orange */
.day-panel[data-dow="1"] { --_dc: oklch(0.70 0.17 240); }
.day-panel[data-dow="2"] { --_dc: oklch(0.72 0.16 175); }
.day-panel[data-dow="3"] { --_dc: oklch(0.74 0.15 130); }
.day-panel[data-dow="4"] { --_dc: oklch(0.74 0.18  55); }
.day-panel[data-dow="5"] { --_dc: oklch(0.70 0.20  18); }

.day-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-start;
    gap: 0.62rem;
    margin-bottom: clamp(16px, 3vmin, 30px);
    padding: 0.3rem 0.42rem 0.3rem 0.86rem;
    border: 1px solid var(--_dc-border);
    border-radius: 10px;
    background:
        linear-gradient(135deg, var(--_dc-muted), var(--_dc-soft)),
        oklch(0.16 0.018 245 / 0.78);
    color: var(--_dc);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: var(--shadow-inset-top);
}

.day-badge__label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-width: 6rem;
}

.day-badge__date {
    min-width: 3.2rem;
    padding: 0.28rem 0.46rem;
    border-radius: 7px;
    background: oklch(0.08 0.012 245 / 0.42);
    color: color-mix(in oklch, var(--_dc) 72%, var(--text-1));
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
}

.day-badge--today {
    border-color: transparent;
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--_dc) 92%, var(--text-1)), var(--_dc)),
        var(--_dc);
    color: oklch(0.97 0.005 245);
    transform: translate3d(0, -1px, 0);
    box-shadow:
        0 14px 34px color-mix(in oklch, var(--_dc) 34%, transparent),
        0 0 0 1px color-mix(in oklch, var(--_dc) 46%, transparent);
}

.day-badge--today .day-badge__date {
    background: oklch(0.99 0.006 160 / 0.22);
    color: oklch(0.985 0.008 160);
}

.menu-items {
    list-style: none;
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.menu-items--fixed {
    display: grid;
    grid-template-rows: repeat(8, minmax(0, 1fr)); /* must match TARGET_ROW_COUNT in script.js */
}

.menu-items li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--line);
    color: var(--text-2);
    column-gap: clamp(8px, 2vmin, 18px);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.34;
    overflow: hidden;
}

.menu-items li.menu-row--item { grid-template-columns: auto minmax(0, 1fr); }
.menu-items .menu-row--last   { border-bottom: 1px solid var(--line); }

.menu-items li.menu-row--placeholder {
    color: transparent;
    border-color: transparent;
}

.menu-items li.menu-row--placeholder .menu-item-text { background: none; }

.menu-items li.menu-row--empty { display: flex; }

.menu-item-num {
    color: var(--_dc);
    font-family: var(--font-mono);
    font-size: 0.7em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    opacity: 0.9;
    text-align: right;
    white-space: nowrap;
}

.menu-item-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.menu-items li.animate-in {
    animation: item-in 240ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 28ms + 24ms);
}

/* .empty-menu-card overrides only the two values that differ from .day-panel defaults */
.empty-menu-card {
    --_dc-border: oklch(from var(--_dc) l c h / 0.24);
    --_dc-soft:   oklch(from var(--_dc) l c h / 0.08);
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.84rem;
    width: min(100%, 36rem);
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--_dc-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--_dc-muted), var(--_dc-soft)),
        oklch(0.15 0.018 245 / 0.66);
    box-shadow: var(--shadow-inset-top);
}

.empty-menu-card__mark {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 8px;
    background: oklch(from var(--_dc) l c h / 0.17);
    color: var(--_dc);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 900;
}

.empty-menu-card__text {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.empty-menu-card strong {
    color: var(--text-1);
    font-size: 0.95rem;
    font-weight: 800;
}

.empty-menu-card small {
    color: var(--text-3);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
}

@keyframes title-in {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to   { opacity: 1; transform: translate3d(0,   0, 0); }
}

@keyframes item-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0,  0, 0); }
}

@keyframes day-exit-next {
    from { opacity: 1; transform: translate3d(0,    0, 0); }
    to   { opacity: 0; transform: translate3d(0, -18px, 0); }
}

@keyframes day-enter-next {
    from { opacity: 0; transform: translate3d(0,  18px, 0); }
    to   { opacity: 1; transform: translate3d(0,    0, 0); }
}

@keyframes day-exit-prev {
    from { opacity: 1; transform: translate3d(0,   0, 0); }
    to   { opacity: 0; transform: translate3d(0, 18px, 0); }
}

@keyframes day-enter-prev {
    from { opacity: 0; transform: translate3d(0, -18px, 0); }
    to   { opacity: 1; transform: translate3d(0,    0, 0); }
}

.day-exit-next  { animation: day-exit-next  120ms var(--ease-in)  forwards; }
.day-exit-prev  { animation: day-exit-prev  120ms var(--ease-in)  forwards; }
.day-enter-next { animation: day-enter-next 220ms var(--ease-out) both; }
.day-enter-prev { animation: day-enter-prev 220ms var(--ease-out) both; }

.loading,
.error {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-3);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}

.screen-dots {
    position: fixed;
    bottom: calc(clamp(14px, 3vmin, 28px) + var(--safe-inset-bottom));
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 240ms var(--ease-out);
}

.screen-dots.visible { opacity: 1; }

.screen-dot {
    width: 20px;
    height: 4px;
    border-radius: 100px;
    background: oklch(0.9 0.01 245 / 0.20);
    opacity: 0.7;
    transform: scaleX(0.22);
    transition:
        background 220ms var(--ease-out),
        opacity    220ms var(--ease-out),
        transform  220ms var(--ease-out);
}

.screen-dot.active {
    background: var(--_dc, var(--accent));
    opacity: 1;
    transform: scaleX(1);
}

#touch-capture {
    position: fixed;
    inset: 0;
    z-index: 10;
    outline: none;
    touch-action: none;
    overscroll-behavior: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

@media (min-width: 700px) {
    .restaurant-name { font-size: 3.3rem; }
    .menu-items li   { font-size: 1.12rem; }
    .day-badge       { font-size: 0.78rem; }
}

@media (min-width: 1100px) {
    .restaurant-name { font-size: 3.8rem; }
    .menu-items li   { font-size: 1.32rem; }
}

@media (max-height: 680px) {
    .restaurant-name { font-size: clamp(1.55rem, 5.85vw, 2.3rem); }
    .menu-items li   { font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}