@font-face{font-family:"Lilita One";src:url("/assets/font-lilita-one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ZCOOL KuaiLe";src:url("/assets/font-zcool-kuaile.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Karla;src:url("/assets/font-karla-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Karla;src:url("/assets/font-karla-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --chili:#C83C1C;--chili-ink:#FFFFFF;--ink:#3B2116;--muted:#75604F;
  --rice:#FFF4DF;--paper:#FFFDF6;--steel:#E3D2B8;--scallion:#2F7A47;--yolk:#F0B23A;
  --font-body:Karla,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"Lilita One","ZCOOL KuaiLe",system-ui,sans-serif;
  --text-meta:13px;--text-secondary:15px;--text-body:17px;--text-h3:21px;--text-h2:28px;--text-h1:38px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius:6px;--line:1.5px;--line-selected:2px;--gutter:16px;--container:1120px;
  --header-height:56px;--target:48px;--slot-size:14px;--slot-gap:6px;
  --toast-offset:16px;
}
@media(prefers-color-scheme: dark){
  :root{--rice:#1E1512;--paper:#2A1E19;--ink:#F6EAD6;--muted:#C4AC96;--steel:#4E3D33;--chili:#E5553A;--chili-ink:#1E1512;--scallion:#7FC08C;--yolk:#F0B23A}
}
@media(min-width:600px){:root{--gutter:24px}}
@media(min-width:900px){:root{--text-h1:clamp(38px,4.375vw,56px);--text-h2:clamp(28px,2.8125vw,36px)}}

:where(*, *::before, *::after){box-sizing:border-box}
:where(html){scroll-padding-top:calc(var(--header-height) + var(--space-4))}
:where(body){margin:0;background:var(--rice);color:var(--ink);font:400 var(--text-body)/1.5 var(--font-body);overflow-wrap:anywhere}
:where(h1,h2,h3,h4){font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0 0 var(--space-4)}
:where(h1){font-size:var(--text-h1)}
:where(h2){font-size:var(--text-h2)}
:where(h3,h4){font-size:var(--text-h3)}
:where(p,ul,ol,dl,figure){margin:0 0 var(--space-4)}
:where(ul,ol){padding-inline-start:var(--space-6)}
:where(dd){margin:0}
:where(img,svg,canvas,video){max-width:100%;height:auto}
:where(img){display:block}
:where(a){color:inherit;text-decoration:underline;text-underline-offset:var(--space-1)}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button,summary,a,input,select,textarea){min-height:var(--target);min-width:var(--target)}
:where(button,summary){cursor:pointer}
:where(button){background:transparent;border:var(--line) solid var(--ink);border-radius:var(--radius);padding:var(--space-2) var(--space-4)}
:where(input,select,textarea){background:var(--paper);border:var(--line) solid var(--steel);border-radius:var(--radius);padding:var(--space-3);max-width:100%}
:where(button:disabled){cursor:default;opacity:.6}
:where(address){font-style:normal}
:where(dialog){background:var(--rice);color:var(--ink)}
/* The dark underlay keeps the yolk ring distinct on cream and red surfaces. */
:where(:focus-visible){outline:3px solid var(--yolk);outline-offset:2px;box-shadow:0 0 0 6px var(--ink)}

.ui-container{width:min(100% - var(--gutter) * 2,var(--container));margin-inline:auto}
.ui-meta{font-size:var(--text-meta);color:var(--muted)}
.ui-secondary{font-size:var(--text-secondary);color:var(--muted)}
.ui-number{font-variant-numeric:tabular-nums}
.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ui-skip{position:fixed;top:var(--space-2);left:var(--gutter);z-index:30;padding:var(--space-3) var(--space-4);background:var(--rice);transform:translateY(-200%)}
.ui-skip:focus{transform:translateY(0)}
.ui-notice{padding:var(--space-2) var(--gutter);text-align:center;font-size:var(--text-meta);background:var(--ink);color:var(--rice)}
.ui-header{position:sticky;top:0;z-index:20;background:#FFF4DF;color:#3B2116;border-bottom:var(--line) solid #E3D2B8}
.ui-header-inner{height:calc(var(--header-height) - var(--line));display:flex;align-items:center;gap:var(--space-2)}
.ui-brand{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--target);text-decoration:none;font-family:var(--font-display);flex-shrink:0}
.ui-logo{width:var(--target);height:var(--target);object-fit:contain}
.ui-header-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2)}
.ui-language{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2);font-size:var(--text-secondary)}
.ui-navigation{position:relative}
.ui-menu-toggle{display:flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);padding:var(--space-2);list-style:none;font-size:var(--text-secondary);border:var(--line) solid currentColor;border-radius:var(--radius)}
.ui-menu-toggle::-webkit-details-marker{display:none}
.ui-drawer{position:absolute;right:0;top:calc(100% + var(--space-2));width:min(100vw - var(--gutter) * 2,var(--space-12) * 6);max-height:calc(100dvh - var(--header-height) - var(--space-8));overflow:auto;padding:var(--space-2);background:var(--rice);color:var(--ink);border:var(--line) solid var(--steel);border-radius:var(--radius)}
.ui-nav-list{list-style:none;padding:0;margin:0}
.ui-nav-link{display:flex;align-items:center;min-height:var(--target);padding:var(--space-3) var(--space-4);text-decoration:none}
.ui-nav-link:hover{text-decoration:underline}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--target);min-width:var(--target);max-width:100%;padding:var(--space-3) var(--space-6);border:var(--line) solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:var(--text-body);font-weight:700;text-decoration:none;text-align:center;line-height:1.5}
.ui-btn--primary{background:var(--chili);color:var(--chili-ink);border-color:var(--chili)}
.ui-btn--secondary{background:transparent;border-color:var(--ink)}
/* The kitchen stays lit in either theme; only its primary button uses chili. */
.ui-home-hero{--rice:#FFF4DF;--ink:#3B2116;--chili:#C83C1C;--chili-ink:#FFFFFF;color-scheme:light}
.ui-chili{display:inline-block;position:relative;width:12px;height:16px}
.ui-chili svg{display:block;width:12px;height:16px;max-width:none}
.ui-chili--half .ui-chili-fill{clip-path:inset(0 50% 0 0)}
.ui-link{display:inline-flex;align-items:center;min-width:var(--target);min-height:var(--target);max-width:100%;padding-block:var(--space-3);color:var(--ink);text-decoration:underline}
.ui-footer{background:var(--ink);color:var(--rice);padding-block:var(--space-4);margin-top:var(--space-8)}
.ui-footer-content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2)}
.ui-footer-content>div,.ui-footer-nav{grid-column:1/-1}
.ui-footer-content>div{font-size:var(--text-secondary)}
.ui-footer-content>div>p{margin:0}
.ui-footer-content>div>.ui-link{padding-block:0}
.ui-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--space-2) var(--space-4)}
.ui-footer-action{display:inline-flex;align-items:center;min-height:var(--target);padding:var(--space-3) 0;border:0;border-radius:0;font-size:var(--text-secondary);text-decoration:underline}
.ui-footer .ui-link{color:inherit}
.ui-footer-game{display:inline-flex;align-items:center;gap:var(--space-2);justify-self:start;min-height:var(--target);padding:var(--space-2) var(--space-4);border:var(--line) solid currentColor;border-radius:999px;font-size:var(--text-secondary)}
.ui-footer-lala{width:var(--space-8);height:var(--space-8);object-fit:contain}
.ui-footer-address{margin:0}
.ui-footer-note{margin:0;font-size:var(--text-meta);color:inherit;align-self:center;justify-self:end}

/* Pair decorative circles with a .ui-sr-only text equivalent. */
.ui-slots{display:flex;align-items:center;flex-wrap:wrap;gap:var(--slot-gap)}
.ui-slot{display:inline-block;flex:0 0 var(--slot-size);width:var(--slot-size);height:var(--slot-size);border:var(--line) solid var(--ink);border-radius:50%}
.ui-slot--extra{border-style:dashed}
.ui-slot--filled{background:var(--ink);border-style:solid}
.ui-free{color:var(--scallion);font-size:var(--text-meta);font-weight:700}
.ui-slot--stamp{animation:ui-stamp 150ms ease-out}
@keyframes ui-stamp{from{transform:scale(.8)}to{transform:scale(1)}}

/* .ui-pan is the wrapper; .ui-pan-add is the full tile's add button.
   Keep .ui-pan-remove as its sibling, never nest buttons. */
.ui-pan{position:relative;min-width:0;background:transparent;border:0;padding:0;border-radius:0;overflow:visible}
.ui-pan--selected img{outline:var(--line-selected) solid var(--ink);outline-offset:2px}
.ui-pan-add{display:flex;flex-direction:column;width:100%;min-height:var(--target);padding:0;border:0;border-radius:0;text-align:start;background:transparent}
.ui-pan-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.ui-pan-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-secondary);line-height:1.5;padding:var(--space-2) 0 0;min-height:var(--target)}
.ui-pan-quantity{position:absolute;top:var(--space-2);right:var(--space-2);display:grid;place-items:center;min-width:var(--space-8);height:var(--space-8);padding-inline:var(--space-1);border-radius:50%;background:var(--ink);color:var(--rice);font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.ui-pan-remove{position:absolute;right:var(--space-2);bottom:var(--space-2);width:var(--target);height:var(--target);padding:var(--space-2);border-color:var(--ink);background:var(--rice)}

.ui-bowl{min-width:0;background:transparent;border:0;padding:0;overflow:visible}
.ui-bowl-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.ui-bowl-content{padding:var(--space-2) 0 0}
.ui-bowl-name{font:400 var(--text-h3)/1.15 var(--font-display);margin:0 0 var(--space-2)}
.ui-bowl-heat{font-size:var(--text-secondary);color:var(--ink);margin-bottom:var(--space-3)}
.ui-bowl-prices{display:flex;flex-wrap:wrap;gap:var(--space-6);font-variant-numeric:tabular-nums}
.ui-bowl-price-label{font-size:var(--text-secondary);color:var(--muted)}
.ui-bowl-price{font:400 var(--text-h3)/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.ui-ticket{background:var(--paper);border-radius:0;padding:var(--space-6);clip-path:polygon(0 8px,4% 0,8% 8px,12% 0,16% 8px,20% 0,24% 8px,28% 0,32% 8px,36% 0,40% 8px,44% 0,48% 8px,52% 0,56% 8px,60% 0,64% 8px,68% 0,72% 8px,76% 0,80% 8px,84% 0,88% 8px,92% 0,96% 8px,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%)}
.ui-ticket-total{display:flex;justify-content:space-between;gap:var(--space-4);font:400 var(--text-h2)/1.15 var(--font-display);font-variant-numeric:tabular-nums;margin-bottom:var(--space-6)}
.ui-ticket-group{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-block:var(--space-6) var(--space-3)}
.ui-ticket-row{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2)}
.ui-ticket-leader{flex:1;min-width:var(--space-4);border-bottom:var(--line) dotted var(--ink)}
.ui-ticket-quantity{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Use role="status" and data-ui-toast. app.js hides the toast after 6s.
   Set --toast-offset to the fixed bar height plus a spacing token if needed. */
.ui-toast{position:fixed;z-index:25;bottom:var(--toast-offset);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - var(--gutter) * 2);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);background:var(--ink);color:var(--rice);border-radius:var(--radius);padding:var(--space-3) var(--space-4)}
.ui-toast-undo{border-color:currentColor;color:inherit;background:transparent;font-weight:700}
.ui-dialog{width:min(65ch,100% - var(--gutter) * 2);max-height:calc(100dvh - var(--space-8));padding:var(--space-6);border:var(--line) solid var(--steel);border-radius:var(--radius);overflow:auto}
.ui-dialog::backdrop{background:color-mix(in srgb,var(--ink) 50%,transparent)}
.ui-dialog-close{display:block;margin-inline-start:auto;width:var(--target);height:var(--target);padding:var(--space-2)}
.ui-dialog-lala{width:calc(var(--space-12) * 2);height:auto;margin-bottom:var(--space-4)}
.ui-dialog-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.ui-noscript{padding:var(--space-4) var(--gutter)}
/* The retained kitchen stylesheet expects --brown and uses light game surfaces. */
.ui-game{--brown:#3B2116;--paper:#FFFDF6;--rice:#FFF4DF;color-scheme:light}
@media print{
  .ui-header{display:none}
  .ui-notice{display:none}
  .ui-footer{display:none}
  .ui-skip{display:none}
}
[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none;transition:none;scroll-behavior:auto}
  .ui-slot--stamp{animation:none}
}
/* Shared static bowl links and portion summaries, used by home and menu. */
.ui-bowl-link{display:block;text-decoration:none;min-width:0}
.ui-bowl:focus-within{outline:3px solid var(--yolk);outline-offset:2px}
.ui-bowl-prices{margin-bottom:0;gap:var(--space-3)}
.ui-bowl-prices>div{min-width:0;flex:1}
.ui-chilies{display:inline-flex;vertical-align:middle;gap:var(--space-1)}
.ui-chilies svg{width:var(--space-3);height:var(--space-4)}
.ui-portions{margin:0;font-size:var(--text-secondary)}
.ui-portion-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);align-items:center;padding-block:var(--space-1);border-bottom:var(--line) solid var(--steel)}
.ui-portion-row dd{min-width:0}

/* Shared wrapping cards and photo placeholders for home and menu. */
.ui-bowl-photo,.broth-illustration{background-color:var(--rice)}
.ui-bowl{display:flex;flex-direction:column}
.ui-bowl-link{display:flex;flex-direction:column;flex:1}
.ui-bowl-content{display:flex;flex-direction:column;flex:1;padding:var(--space-2) 0 0}
.ui-bowl-name{white-space:normal;overflow:visible;margin-bottom:auto;padding-bottom:var(--space-1)}
.ui-bowl-heat{margin-top:0;margin-bottom:var(--space-1);font-size:var(--text-meta)}
.ui-bowl-price-label{font-size:var(--text-meta)}
.ui-bowl-prices{margin-top:0}
.ui-footer-extras{display:grid;justify-items:start;align-content:start;gap:var(--space-2)}
.ui-footer-extras .ui-footer-note{justify-self:start}
@media(min-width:768px){
 .ui-footer-content{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2) var(--space-12);align-items:start}
 .ui-footer-content>div,.ui-footer-nav{grid-column:auto;min-width:0}
 .ui-footer-nav{grid-template-columns:auto;justify-items:start;gap:var(--space-2)}
 .ui-footer-action{justify-self:start}
}
@media(min-width:900px){
 .ui-footer-action,.ui-footer-content .ui-link{min-height:0;padding-block:0}
}
@media(min-width:1100px){.ui-footer-content{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(prefers-color-scheme:dark){
 :where(:focus-visible){box-shadow:0 0 0 6px var(--rice)}
 .ui-header :focus-visible{box-shadow:0 0 0 6px #3B2116}
 .ui-notice,.ui-footer{background:#120C0A;color:var(--ink)}
}

/* Boxless sides and desserts, shared by the home and menu pages. */
.ui-extra{min-width:0;display:flex;flex-direction:column}
.ui-extra-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.ui-extra-name{margin:var(--space-2) 0;font:400 var(--text-h3)/1.15 var(--font-display)}
.ui-extra-description{margin:0 0 var(--space-2);font-size:var(--text-secondary);color:var(--muted)}
.ui-extra-price{margin:auto 0 0;font:400 var(--text-h3)/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.ui-extra-note{display:block;margin-top:var(--space-1);font:400 var(--text-secondary)/1.5 var(--font-body)}