/* Shared customer presentation. Business state, visibility and native controls
   remain owned by their page modules. Loaded after the existing page styles. */
:root {
  --brand:#22553d; --ink:#183a2b; --bg:#faf8f2; --surface:#fff;
  --muted:#5d695f; --line:#e0e4d9; --soft:#edf1e6; --lime:#e7eece;
  --accent:#22553d; --accent-ink:#22553d; --accent-contrast:#fff;
}
html { background:var(--bg); scroll-padding-bottom:calc(9rem + env(safe-area-inset-bottom)); }
body { background:var(--bg); color:var(--ink); }
:where(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #28764b; outline-offset:4px; }
/* Result headings receive focus for announcements, but are not controls.
   Keep that focus and native keyboard navigation without the browser's ring. */
:where(h1,h2,h3,h4,h5,h6)[tabindex="-1"]:focus { outline:0; }
/* Pointer focus does not need a persistent ring. Keyboard :focus-visible and
   text-entry indicators remain intact; unsupported browsers keep defaults. */
:where(button,a,summary,[role="button"]):focus:not(:focus-visible) { outline:0; }
:where(button,a,summary,label,input,select,textarea,[role="button"]) { -webkit-tap-highlight-color:transparent; }
button,a,summary { touch-action:manipulation; }
.home-shell { max-width:1200px; padding-inline:40px; }
.home-header { min-height:96px; gap:16px 24px; padding-block:20px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.header-tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-left:auto; }
.header-tools .header-actions { gap:4px; flex-wrap:wrap; }
.header-tools [data-language-switch] { margin-left:5px; }
.header-tools .icon-button { width:44px; height:44px; border:0; border-radius:12px; box-shadow:none; background:transparent; }
.header-tools .icon-button:hover { background:var(--soft); }
.locale-control { border-color:var(--line); border-radius:12px; background:var(--surface); }
.brand,.game-brand { gap:10px; align-items:center; }
.brand-mark { display:grid; place-items:center; position:relative; width:50px; height:50px; flex:none; overflow:visible; border-radius:12px; background:#12251a; }
.brand .brand-mark img,.game-brand .brand-mark img,.brand-mark img { position:static; inset:auto; display:block; width:46px; height:46px; max-width:100%; padding:0; clip-path:none; object-fit:contain; border-radius:0; background:transparent; }
.brand-name { font-size:20px; line-height:1.15; letter-spacing:-.7px; font-weight:800; white-space:normal; overflow-wrap:normal; }
:is(.customer-nav,.game-nav) { border:1px solid var(--line); border-radius:20px; background:#fffffff5; box-shadow:0 6px 24px #17392514; padding:5px; }
:is(.customer-nav,.game-nav) :is(button,a) { border-radius:15px; min-height:60px; }
:is(.customer-nav,.game-nav) :is(button,a)[aria-current=page] { background:var(--brand); color:#fff; }
:is(.customer-nav,.game-nav) :is(button,a)[aria-current=page]:hover { background:var(--brand); color:#fff; }
:is(.customer-nav,.game-nav) :is(button,a) > svg { width:21px; height:21px; }
.welcome { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:48px; overflow:visible; min-height:390px; margin:0 0 30px; background:transparent; border-radius:0; }
.welcome-content { padding:24px 0; min-width:0; }
.welcome-eyebrow { display:block; color:var(--brand); font-size:12px; line-height:1.5; font-weight:750; letter-spacing:1.5px; margin-bottom:16px; }
.welcome h1 { max-width:9em; font-size:clamp(34px,4.8vw,58px); line-height:1.06; letter-spacing:-2px; font-weight:800; overflow-wrap:anywhere; }
.welcome-copy { max-width:25em; font-size:17px; line-height:1.65; color:var(--muted); margin-top:20px; }
.hero-actions { margin-top:26px; }
.hero-action { min-height:52px; gap:24px; padding:13px 22px; color:#fff; background:var(--brand); border-radius:14px; box-shadow:none; font-size:16px; font-weight:750; }
.hero-action:hover { background:#163e2a; color:#fff; }
.welcome .home-discovery { display:block; min-width:0; grid-column:auto; grid-row:auto; border:0; padding:0; margin:0; background:transparent; border-radius:0; }
.welcome .discovery-dish { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; position:relative; align-items:start; border:0; }
.welcome .discovery-media { display:block; grid-column:1/-1; width:100%; height:auto; aspect-ratio:4/3; margin-bottom:16px; border-radius:22px; background:#eceee7; overflow:hidden; }
.welcome .discovery-media img { display:block; width:100%; height:100%; object-fit:cover; }
.welcome .discovery-media .dish-symbol { width:64px; height:64px; margin:auto; }
.welcome .discovery-copy { min-width:0; padding:0; }
.welcome .discovery-category { color:var(--muted); font-size:12px; font-weight:600; line-height:1.5; }
.welcome .discovery-copy h3 { font-size:22px; margin:2px 0 0; line-height:1.3; letter-spacing:-.5px; }
.welcome .discovery-copy h3 button { min-height:36px; }
.welcome .discovery-price { margin-top:2px; font-size:17px; font-weight:750; }
.welcome .discovery-dish > .favorite-button { position:static; align-self:center; background:#fff; border-color:var(--line); box-shadow:none; }
.welcome .discovery-dish > .favorite-button[aria-pressed=true] { background:var(--brand); }
.welcome .discovery-next { font-size:13px; margin-top:6px; min-height:44px; }
.welcome:has(.home-discovery[hidden]) { grid-template-columns:minmax(0,1fr); min-height:280px; }
.welcome:has(.home-discovery[hidden]) .welcome h1 { max-width:18em; }
.home-explore { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 40px; margin-bottom:28px; }
.game-spotlight { grid-row:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:170px; border:1px solid #d6dec5; border-radius:18px; background:var(--lime); color:var(--ink); }
.game-spotlight-copy { padding:22px; }
.game-kicker { color:#4e6446; font-size:10px; font-weight:800; letter-spacing:1px; gap:6px; }
.game-kicker > span { font-size:14px; }
.game-spotlight h2 { font-size:25px; line-height:1.2; max-width:none; margin-top:6px; letter-spacing:-.6px; }
.game-spotlight p { margin-top:8px; font-size:13px; line-height:1.5; color:#425a3d; }
.game-play { display:inline-flex; justify-content:flex-start; gap:16px; margin-top:10px; padding:0; min-height:36px; background:transparent; color:var(--ink); border-radius:0; font-size:14px; }
.game-spotlight:hover .game-play { background:transparent; text-decoration:underline; text-underline-offset:4px; }
.game-spotlight-art { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:86px; flex:none; padding:0; margin-right:20px; gap:5px; transform:rotate(5deg); }
.match-tile { border-radius:9px; box-shadow:none; }
.tile-star { color:#f4f6e9; background:#456642; font-size:25px; }
.tile-burger { background:#f7faee; color:#456642; }
.home-shortcuts { display:flex; flex-direction:column; gap:0; }
.home-shortcut { flex:auto; min-height:82px; padding:15px 0; border-bottom:1px solid var(--line); }
.shortcut-copy strong { font-size:15px; line-height:1.5; }
.shortcut-copy small { font-size:12px; line-height:1.6; color:var(--muted); }
.home-invitation { grid-column:1/-1; grid-row:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 20px; border-block:1px solid var(--line); padding:12px 0; margin:0; }
.home-invitation p { font-size:14px; line-height:1.6; }
.home-invitation button { min-height:44px; }
.home-visit { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 20px; padding:0; font-size:14px; }
.home-visit a { min-height:44px; display:inline-flex; align-items:center; }
.home-visit p small { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.home-visit-links { display:flex; align-items:center; flex-wrap:wrap; gap:4px 24px; }
.home-visit-links a { gap:8px; }
.home-footer { border-top:1px solid var(--line); padding-top:16px; gap:8px; }
.home-footer .footer-heading > span { font-size:12px; letter-spacing:1px; }
.home-footer .footer-contact-row:empty { display:none; }
.services { margin:20px 0; }
.direct-link { border-radius:14px; box-shadow:none; }
body:not([data-view=home]) .services { display:none; }
.menu-discovery { background:var(--bg); padding-top:8px; }
.search-field { border-color:var(--line); border-radius:14px; box-shadow:none; }
.search-field input[type=search] { border-radius:14px; }
.menu-filter-button { border-radius:14px; border-color:var(--line); }
.menu-categories { padding-block:12px; gap:7px; scroll-snap-type:x proximity; }
.category-button { border:1px solid var(--line); border-radius:12px; background:#fff; color:#45554a; padding:10px 15px; font-size:13px; scroll-snap-align:start; }
.category-button[aria-pressed=true] { border-color:var(--brand); background:var(--brand); color:#fff; }
.menu-grid { gap:18px; }
.menu-group-heading { font-size:23px; margin-top:24px; }
.dish-card { border:1px solid var(--line); border-radius:18px; box-shadow:none; }
.dish-media { aspect-ratio:1.18; background:#eeeae2; }
.dish-card .dish-content { padding:15px 16px 18px; }
.dish-name { font-size:17px; line-height:1.4; }
.dish-price { font-size:17px; font-weight:800; line-height:1.4; }
.favorite-button { border-color:#ffffffb3; width:44px; height:44px; box-shadow:0 2px 8px #0000000a; }
.dish-dialog { border-radius:24px 24px 0 0; background:var(--surface); }
.dish-dialog-description { color:#415046; line-height:1.75; }
.dish-cart-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:12px; }
.dish-cart-status { flex:1 1 auto; margin:0; color:var(--brand); font-size:14px; font-weight:750; line-height:1.5; }
.dish-cart-status:empty { display:none; }
.dish-cart-feedback > .button { flex:1 1 150px; min-width:0; min-height:44px; white-space:normal; text-align:center; }
.dish-cart-error { flex-basis:100%; margin:0; color:#9c3026; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.dish-image-note { color:var(--muted); font-size:12px; line-height:1.6; margin-top:14px; }
.dish-media,.discovery-media,.dish-dialog-media { position:relative; }
.media-caption { position:absolute; bottom:8px; left:8px; max-width:calc(100% - 16px); padding:3px 7px; border-radius:5px; background:#183a2be6; color:#fff; font-size:10px; line-height:1.5; font-weight:500; pointer-events:none; }
.dish-next-button { border-radius:14px; }
.button,.game-button,.game-primary { border-radius:12px; }
.button-dark,.button-accent { background:var(--brand); color:#fff; }
.button-outline { border-color:#cbd6ca; }
.feedback-section,.feedback-history,.followup-panel { max-width:700px; margin-inline:auto; }
.feedback-intro h2,.feedback-history > h2 { font-size:clamp(26px,4vw,36px); letter-spacing:-.8px; }
.feedback-body { border-radius:20px; box-shadow:none; border-color:var(--line); }
.rating-field { padding-top:24px; }
.history-entry { border-color:var(--line); padding-block:18px; }
.history-reference { color:var(--muted); font-size:11px; letter-spacing:.5px; }
.history-open { font-size:17px; }
.account-panel,.order-panel,.game-panel { border-color:var(--line); box-shadow:none; border-radius:18px; }
.account-header,.order-header,.game-header { border-color:var(--line); }
.customer-app { --paper:#faf8f2; --ink:#183a2b; --accent:#22553d; --muted:#5d695f; --line:#e0e4d9; --soft:#edf1e6; background:var(--paper); }
.customer-app .panel { border-radius:18px; box-shadow:none; }
.customer-app :is(button,.button) { border-radius:12px; }
@media (min-width:900px) {
  .dish-dialog { border-radius:24px; }
}
@media (max-width:759px) {
  .home-shell { padding-inline:20px; }
  .home-header { min-height:0; padding-block:16px; gap:10px 12px; margin-bottom:22px; }
  .brand-name { font-size:19px; }
  .header-tools { width:100%; justify-content:flex-end; border-top:1px solid var(--line); padding-top:9px; }
  .home-header .brand { margin-right:0; }
  .header-tools .header-actions { margin-right:auto; }
  .welcome { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:20px; min-height:0; margin-bottom:22px; }
  .welcome-content { flex:auto; align-self:stretch; width:100%; padding:0; }
  .welcome-eyebrow { font-size:10px; margin-bottom:10px; letter-spacing:1px; }
  .welcome h1 { font-size:36px; max-width:11em; line-height:1.08; letter-spacing:-1.2px; }
  .welcome-copy { font-size:14px; line-height:1.6; margin-top:12px; max-width:26em; }
  .hero-actions { margin-top:16px; }
  .hero-action { min-height:48px; padding:11px 18px; font-size:15px; }
  .welcome .discovery-media { aspect-ratio:1.6; border-radius:18px; margin-bottom:10px; }
  .welcome .discovery-copy h3 { font-size:19px; }
  .welcome .discovery-price { font-size:16px; }
  .welcome .discovery-dish { grid-template-columns:minmax(0,1fr) 44px; gap:0 10px; }
  .welcome .discovery-next { margin-top:2px; }
  .welcome:has(.home-discovery[hidden]) { min-height:220px; }
  .home-explore { display:flex; flex-direction:column; gap:20px; }
  .game-spotlight { min-height:0; gap:8px; }
  .game-spotlight-copy { padding:18px; }
  .game-spotlight h2 { font-size:24px; }
  .game-spotlight-art { width:62px; margin-right:16px; }
  .game-spotlight p { font-size:13px; }
  .home-shortcut { min-height:76px; }
  .home-invitation { padding:10px 0; }
  .home-visit { font-size:13px; }
  .menu-grid { gap:12px; }
  .menu-group-heading { font-size:21px; margin-top:20px; }
  .dish-card { border-radius:15px; }
  .dish-card .dish-content { padding:12px 12px 15px; }
  .dish-name { font-size:14px; line-height:1.4; letter-spacing:-.2px; }
  .dish-price { font-size:15px; margin-top:7px; }
  .dish-card .favorite-button { top:6px; right:6px; }
  .dish-card.no-photo .dish-content { padding:18px 60px 18px 2px; }
  .dish-card.no-photo .dish-name { font-size:16px; }
  .menu-order-bot { background:transparent; border:0; padding:6px 0; font-size:13px; }
}
@media (max-width:374px) {
  .home-shell { padding-inline:16px; }
  .welcome h1 { font-size:32px; }
  .game-spotlight-art { display:none; }
  .game-spotlight-copy { padding:17px; }
  .dish-card .dish-content { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Optional extras use the same quiet, readable controls as checkout. */
.dish-addon-context { display:grid; gap:8px; margin:20px 0 4px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--soft,#edf1e6); }
.dish-addon-context[hidden] { display:none; }
.dish-addon-context label { font-size:14px; font-weight:750; }
.dish-addon-context select { box-sizing:border-box; max-width:100%; width:100%; min-height:48px; padding:10px 36px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface,#fff); color:var(--ink); font:inherit; font-size:15px; }
.dish-addon-context .form-hint { margin:0; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.dish-next-button[data-suggestion-kind=addon] { background:#f0f3e8; border-color:#d7dfc8; }
.sheet-actions > #dish-dialog-order { white-space:normal; line-height:1.4; }