/* The page is a hot-dog stand. The films are things happening inside it. */
:root { --red:#bb2118; --receipt:#fffbea; --counter:#ff614a; }
html { background:#00ef00; scroll-behavior:smooth; scroll-padding-top:18px; }
body { caret-color:#bb2118; }
button, a, input { -webkit-tap-highlight-color:transparent; }
input { min-width:0; }
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn.pink { color:#0b0b0b; }
.hero-order { margin:18px auto 0; display:flex; align-items:center; justify-content:center; gap:14px; }
.hero-order > span { font:12px/1.3 var(--font-mono); max-width:130px; text-align:left; }
.hero-order .btn { transform:rotate(-2deg); }
.hero-order .btn:active { transform:translate(3px,3px); }
.subtitle { color:var(--ink); text-shadow:1px 1px 0 #ffacf1; }
.grid, .coin-grid { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); }
.grid > *, .coin-grid > *, .item > * { min-width:0; }
.card > h2 { text-wrap:balance; }
.reveal { opacity:1; transform:none; transition:none; }

/* The lunch-table cartoon stays an early attraction, without a cinema wrapper. */
.card.film { background:transparent; border:0; box-shadow:none; margin-top:30px; }
.film > h2 { color:var(--ink); background:transparent; border:0; padding:0; font-size:26px; letter-spacing:.02em; }
.film-sub { padding:6px 0 0; text-align:center; color:#073c0c; }
.film-stage { margin:12px 0; border:4px solid var(--ink); box-shadow:5px 6px 0 #12230b; }
.film-note { padding:0; text-align:center; color:#073c0c; }

/* Cloth awning, deep service opening and a counter that overlaps the footage. */
.stand-grid { margin-top:34px; gap:24px; align-items:start; }
.menu-board { background:#ffe8a4; overflow:visible; }
.stand-awning { height:56px; position:relative; margin:-4px -4px 0; border:4px solid var(--ink); border-bottom:0; background:repeating-linear-gradient(90deg,#ff4a36 0 38px,#fff6cc 38px 76px); z-index:3; }
.stand-awning::after { content:""; position:absolute; inset:auto -4px -13px; height:20px; border-bottom:4px solid var(--ink); background:inherit; clip-path:polygon(0 0,100% 0,100% 70%,95% 100%,90% 70%,85% 100%,80% 70%,75% 100%,70% 70%,65% 100%,60% 70%,55% 100%,50% 70%,45% 100%,40% 70%,35% 100%,30% 70%,25% 100%,20% 70%,15% 100%,10% 70%,5% 100%,0 70%); }
.stand-awning span { position:absolute; left:50%; top:9px; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; padding:4px 17px; color:#fff8bc; background:var(--ink); font:20px/1 var(--font-slam); letter-spacing:.07em; border:2px solid #fff8bc; }
.order-window { position:relative; aspect-ratio:16/9; background:#16430b; margin:0 13px 13px; border:8px solid #285e16; border-top:0; isolation:isolate; }
.order-window video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.order-window::before { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 14px 20px #0007,inset 8px 0 0 #0004,inset -8px 0 0 #0004; z-index:1; }
.window-shelf { position:absolute; left:-20px; right:-20px; bottom:-15px; height:20px; background:var(--counter); border:3px solid var(--ink); border-top-color:#ffb489; box-shadow:0 8px 0 #8c2c22; z-index:3; transform:skewX(-4deg); }
.scene-control { position:absolute; right:8px; bottom:8px; z-index:2; min-width:62px; min-height:44px; padding:6px 9px; color:#fff; background:#10180be8; border:2px solid #fff7c9; font:700 11px/1 var(--font-fun); cursor:pointer; }
.scene-control:focus-visible { outline:3px solid var(--magenta); outline-offset:3px; }
.menu-board > h2 { margin:30px 14px 0; padding:8px; background:var(--yellow); color:var(--ink); border:3px solid var(--ink); font-size:30px; letter-spacing:.025em; transform:rotate(-1deg); }
.menu-list { gap:0; padding:14px; }
.item { background:transparent; border:0; border-bottom:2px dashed #8e551c; padding:14px 0; gap:10px; }
.item:last-child { border-bottom:0; }
.item:hover { transform:none; box-shadow:none; }
.item img { transform:rotate(-3deg); box-shadow:3px 3px 0 #0b0b0b; }
.item:nth-child(even) img { transform:rotate(2deg); }
.item .nm { font-weight:800; }
.item .ds { color:#493412; line-height:1.35; }
.item .pr { color:#184a13; font-variant-numeric:tabular-nums; }
.item .add { background:var(--yellow); min-width:72px; }

/* The shopping list is an actual receipt coming out of the register. */
.register { position:relative; background:var(--receipt); border:0; box-shadow:5px 6px 0 #102b0b; padding-top:9px; }
.register::before { content:""; position:absolute; top:0; left:0; right:0; height:10px; background:repeating-linear-gradient(135deg,var(--receipt) 0 8px,#101c0b 8px 10px,var(--receipt) 10px 15px); }
.register > h2 { background:transparent; color:var(--ink); border:0; padding-top:18px; letter-spacing:.04em; font-size:24px; }
.receipt-note { margin:0 0 16px; padding-bottom:12px; border-bottom:2px dashed #4a3e23; text-align:center; font:10px/1.6 var(--font-mono); letter-spacing:.12em; }
.cart-body { padding:12px 18px 18px; }
#cartList li { font-family:var(--font-mono); font-size:12px; border-bottom:1px dashed #aa9c7d; padding:9px 0; }
.empty { color:#64573f; }
.total-row { border-top:3px double #0b0b0b; padding-top:12px; }
.receipt-stamp { min-height:25px; margin-top:12px; font:700 11px/1.5 var(--font-mono); color:#7c2116; letter-spacing:.08em; text-align:center; }
.receipt-stamp.stamped { animation:receiptStamp .35s ease-out; }
@keyframes receiptStamp { from { transform:scale(1.2) rotate(-6deg); opacity:.3; } to { transform:scale(1) rotate(-2deg); opacity:1; } }
.change-return { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:10px; align-items:center; padding:14px 18px 18px; background:#275823; border:4px solid var(--ink); box-shadow:inset 0 5px 0 #497641; }
.change-heading { grid-column:1/-1; color:#fff9b5; font:16px/1 var(--font-slam); letter-spacing:.14em; }
.change-aperture { position:relative; aspect-ratio:2/1; overflow:hidden; border:5px solid #12280e; background:#030903; box-shadow:0 3px 0 #86a16c,inset 0 0 12px #000; }
.change-aperture video { display:block; width:100%; height:100%; object-fit:cover; }
.change-aperture::after { content:""; position:absolute; inset:0 0 60%; background:linear-gradient(#628d51,#24431b); border-bottom:5px solid #12280e; box-shadow:0 6px 9px #0009; transform-origin:top; transition:transform .24s ease-out; pointer-events:none; }
.change-return.dispensing .change-aperture::after { transform:translateY(-80%); }
.change-lip { position:absolute; left:0; right:0; bottom:0; height:12%; background:#345c25; border-top:3px solid #88a76a; box-shadow:0 -3px 8px #0009; pointer-events:none; }
.change-return .scene-control { position:static; background:#112a0d; border-color:#9fbb7e; width:62px; }
.change-note { grid-column:1/-1; margin:0; font:11px/1.35 var(--font-mono); color:#fff9b5; }
.issued-coin { position:absolute; left:38%; bottom:25px; opacity:0; pointer-events:none; width:26px; height:26px; display:grid; place-items:center; color:#573208; background:#ffd94a; border:3px double #80520c; border-radius:50%; font:700 11px var(--font-mono); }
.dispensing .issued-coin { animation:changeCoin .9s ease-out; }
@keyframes changeCoin { 0% { opacity:0; transform:translateY(-28px) rotateX(75deg); } 20% { opacity:1; } 70% { opacity:1; transform:translateY(14px) rotate(-70deg); } 100% { opacity:0; transform:translateY(38px) rotate(-160deg); } }

/* The other pieces belong to the counter, rather than another stack of boxes. */
.order-pad { position:relative; background:#fff8b8; border:0; border-top:12px solid #252b16; box-shadow:5px 6px 0 #102b0b; }
.order-pad > h2 { color:var(--ink); background:transparent; border-bottom:2px solid #cead63; text-align:left; font-size:23px; }
.order-pad .gb-body { background:repeating-linear-gradient(transparent 0 27px,#c9b77966 27px 28px); }
#gbList li { border-left:0; border-bottom:1px solid #cead63; background:#fff8b8; padding:9px 2px; color:#372b15; }
.card.coin { margin-top:34px; background:#07170b; }
.coin::after { display:none; }
.coin-grid { gap:20px; }
.coin-img { max-width:116px; border-radius:50%; border-color:#5f8f49; }
.coin-right { align-content:start; }
.chart-label, .quote cite, .agent-note { color:#a1c6a9; }
.quote { margin:0; border-left:0; border-top:1px dashed #5f8f49; padding:14px 0 0; background:transparent; }
.card.memes, .card.gallery { border:0; background:transparent; box-shadow:none; margin-top:34px; }
.memes > h2, .gallery > h2 { background:transparent; color:var(--ink); border:0; font-size:25px; letter-spacing:.035em; }
.meme-grid { gap:16px; padding:20px 8px 14px; }
.meme { border:6px solid #fffbe0; box-shadow:4px 5px 0 #12330c; transform:rotate(-2deg); }
.meme:nth-child(even) { transform:rotate(2deg); }
.meme img { width:100%; height:auto; aspect-ratio:1; }
.meme span { padding:9px; }
.memes-note, .gal-sub { color:#073c0c; text-align:center; }
.gal-grid { gap:20px 16px; padding:20px 8px; }
.gal-grid figure { position:relative; border:7px solid #fffbe0; box-shadow:4px 5px 0 #12330c; transform:rotate(1.5deg); }
.gal-grid figure:nth-child(even) { transform:rotate(-1.5deg); }
.gal-grid figure::before { content:""; position:absolute; width:45%; height:19px; top:-17px; left:28%; background:#ffe8a8d9; border:1px solid #c3a55e99; transform:rotate(-5deg); z-index:2; }
.gal-grid figure:hover { transform:rotate(0); box-shadow:4px 5px 0 #12330c; }
.gal-grid img { height:auto; border:0; }
.gal-grid figcaption { padding:10px 3px 4px; background:#fffbe0; color:#3c2a15; }
.agents { border:5px solid #263422; box-shadow:5px 6px 0 #102b0b,inset 0 0 0 2px #759268; }
.agents > h2 { background:#2f4d29; color:#fff9b5; padding:14px; letter-spacing:.025em; font-size:22px; }
.intercom-speaker { height:19px; margin:12px 16px 0; background:radial-gradient(#000 2px,transparent 3px) 0 0/9px 8px; opacity:.65; }
.chat-form input { min-width:0; }
.card.news { position:relative; border:3px dashed #0b0b0b; box-shadow:5px 6px 0 #14300a; }
.news > h2 { color:var(--ink); background:transparent; border-bottom:2px dashed #0b0b0b; font-size:27px; letter-spacing:.02em; }
.news-count { color:#62410a; }
.news-body p { font-size:14px; }
.modal-box { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.order-dock { display:none; }

@media (max-width:820px) {
  .grid, .coin-grid { grid-template-columns:minmax(0,1fr); }
  .stand-grid { gap:26px; }
  .stand-grid > aside { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .item { grid-template-columns:70px minmax(0,1fr) 90px; }
  .item img { width:70px; height:70px; }
  .item .buy-col { grid-column:auto; flex-direction:column; align-items:flex-end; gap:6px; }
  .meme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coin-right { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:start; }
  .coin-img { grid-row:span 2; width:100px; margin:0; }
  .coin-right .tok, .coin-right .buy-big { grid-column:1/-1; }
  .coin-pitch { font-size:12px; }
  #chart { height:210px; }
}
@media (max-width:600px) {
  body { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .wrap { padding:0 12px; }
  .topbar { font-size:10px; line-height:1.5; letter-spacing:.035em; padding:6px 12px; }
  .hero { padding-top:15px; }
  h1.slam { font-size:clamp(39px,11vw,57px); }
  .subtitle { margin-top:12px; font-size:13px; padding:6px 9px; }
  .hero-order { margin-top:16px; gap:13px; }
  .hero-order > span { font-size:10px; max-width:102px; }
  .hero-order .btn { font-size:13px; padding:10px 17px; }
  .stage { height:240px; margin-top:18px; }
  .controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:15px; }
  .controls .btn { font-size:11px; padding:8px 3px; }
  .controls [data-top="double"] { grid-column:span 2; }
  .ticker { margin-top:20px; }
  .ticker span { font-size:12px; }
  .film > h2 { font-size:24px; }
  .film-sub { font-size:12px; }
  .film-note { font-size:10px; line-height:1.5; }
  .stand-grid > aside { grid-template-columns:minmax(0,1fr); gap:26px !important; }
  .stand-awning { height:48px; }
  .stand-awning span { font-size:18px; }
  .order-window { margin-right:10px; margin-left:10px; }
  .window-shelf { left:-16px; right:-16px; }
  .menu-board > h2 { font-size:27px; margin-left:12px; margin-right:12px; }
  .menu-list { padding:7px 12px; }
  .item { grid-template-columns:58px minmax(0,1fr) 68px; gap:9px; padding:15px 0; }
  .item img { width:58px; height:58px; border-width:2px; }
  .item .nm { font-size:13px; }
  .item .ds { font-size:12px; }
  .item .pr { font-size:24px; }
  .item .add { min-width:66px; width:66px; min-height:44px; font-size:10px; padding:5px 3px; letter-spacing:0; }
  .card > h2 { letter-spacing:.025em; }
  .meme-grid { gap:12px; padding:16px 3px 14px; }
  .meme { border-width:4px; }
  .meme span { font-size:clamp(11px,3.1vw,16px); padding:5px 3px; }
  .gal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 13px; padding:22px 5px 14px; }
  .gal-grid figure { border-width:5px; }
  .gal-grid figcaption, .gal-grid figcaption b { font-size:11px; }
  .gallery > h2, .memes > h2 { font-size:24px; }
  .agents > h2 { font-size:21px; padding:12px; }
  .agent-body { padding:13px; }
  .chat { font-size:12px; }
  .chat-form { gap:6px; }
  .chat-form .btn { font-size:11px; padding:8px; }
  .news-body { padding:16px 13px; }
  .news-body p { font-size:13px; text-align:left; }
  .news > h2 { font-size:26px; }
  .gb-fields input, .chat-form input, .news-form input, .ck-fields input { font-size:16px; min-height:46px; }
  .btn.small, .btn:not(.small) { min-height:44px; }
  .foot { margin-top:28px; font-size:11px; }
  .order-dock { display:grid; grid-template-columns:2fr 3fr; gap:9px; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#14240d; border-top:4px solid var(--ink); box-shadow:0 -5px 15px #0003; transition:transform .18s ease-out; }
  .order-dock a { min-height:52px; padding:7px 10px; margin:0; box-shadow:3px 3px 0 #000; font:700 12px/1.2 var(--font-fun); text-decoration:none; border:2px solid #000; color:#0b0b0b; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--yellow); }
  .order-dock a:last-child { justify-content:space-between; background:#ff79df; }
  .dock-receipt-label { display:flex; align-items:center; gap:7px; }
  #dockCount { display:grid; place-items:center; min-width:24px; min-height:24px; background:#0b0b0b; color:#fffbd2; border-radius:50%; font-size:12px; }
  #dockTotal { font:22px/1 var(--font-slam); font-variant-numeric:tabular-nums; }
  .order-dock a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
  .keyboard-open .order-dock, body:has(.modal.on) .order-dock { visibility:hidden; transform:translateY(120%); }
  .order-dock.order-added #dockCount { animation:receiptStamp .35s ease-out; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .receipt-stamp.stamped, .dispensing .issued-coin, .order-dock.order-added #dockCount { animation:none; }
  .change-aperture::after, .order-dock { transition:none; }
}