/* ============================================================
   RHEIN DÖNER — animated menu boards
   Charcoal street-food poster · mustard accents · grunge banners
   Designed at exactly 1920 x 1080
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,500&display=swap');

:root {
  --bg:      #0c0b08;
  --bg-2:    #15120c;
  --ink:     #f7f1e1;
  --muted:   #a99d82;
  --muted-2: #6f6650;
  --accent:  #ffc21e;   /* mustard amber */
  --accent-d:#e69a00;
  --green:   #3a8a55;   /* subtle nod to existing boards */
  --red:     #e2402b;
  --line:    rgba(255,194,30,.22);

  --display: "Anton", sans-serif;
  --head:    "Bebas Neue", sans-serif;
  --name:    "Oswald", sans-serif;
  --body:    "Barlow", sans-serif;
}

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

html, body {
  width:100%; height:100%;
  background:#000;
  overflow:hidden;
  font-family:var(--body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---- viewport scaler: keeps the 1920x1080 stage centred & fitted ---- */
#viewport {
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#000;
}
.stage {
  position:relative;
  width:1920px; height:1080px;
  transform-origin:center center;
  transform:scale(var(--scale,1));
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% -10%, #241d12 0%, transparent 55%),
    radial-gradient(100% 80% at 12% 115%, #1a2418 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 55%, #070603 100%);
  isolation:isolate;
}

/* ============================================================
   ATMOSPHERE LAYERS
   ============================================================ */

/* drifting grill smoke */
.smoke { position:absolute; inset:-12%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.5; }
.smoke i {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,194,30,.10), transparent 70%);
  mix-blend-mode:screen;
}
.smoke i:nth-child(1){ width:760px; height:760px; left:-8%;  top:35%; background:radial-gradient(circle, rgba(255,160,40,.12), transparent 70%); animation:drift1 26s ease-in-out infinite; }
.smoke i:nth-child(2){ width:620px; height:620px; right:-6%; top:-12%; animation:drift2 32s ease-in-out infinite; }
.smoke i:nth-child(3){ width:540px; height:540px; left:46%;  bottom:-22%; background:radial-gradient(circle, rgba(58,138,85,.16), transparent 70%); animation:drift3 38s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(80px,-60px) scale(1.15);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-70px,50px) scale(1.2);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-80px) scale(1.1);} }

/* slow spotlight sweep */
.sweep {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,210,90,.06) 50%, transparent 62%);
  background-size:260% 100%;
  animation:sweep 14s linear infinite;
}
@keyframes sweep{ 0%{ background-position:140% 0;} 100%{ background-position:-60% 0;} }

/* film grain */
.grain {
  position:absolute; inset:-50%; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0);} 33%{ transform:translate(-6%,4%);} 66%{ transform:translate(5%,-5%);} 100%{ transform:translate(0,0);}
}

/* vignette + hazard edge */
.vignette { position:absolute; inset:0; z-index:55; pointer-events:none;
  box-shadow:inset 0 0 240px 40px rgba(0,0,0,.7); }

/* ============================================================
   FRAME / HEADER
   ============================================================ */
.stage > .content { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; padding:46px 58px 40px; }

.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }

.brand { display:flex; align-items:center; gap:22px; }
.flame {
  width:64px; height:64px; flex:0 0 auto; position:relative;
  display:grid; place-items:center;
}
.flame svg { width:100%; height:100%; filter:drop-shadow(0 0 14px rgba(255,150,30,.6)); animation:flicker 2.4s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ opacity:1; transform:scale(1);} 45%{ opacity:.82; transform:scale(.96) rotate(-1deg);} 70%{ opacity:.94; transform:scale(1.03);} }

.brand-text { line-height:.86; }
.brand-text .name {
  font-family:var(--display); font-size:62px; letter-spacing:1px; color:var(--ink);
  text-transform:uppercase; position:relative;
}
.brand-text .name b { color:var(--accent); font-weight:400; }
.brand-text .tag {
  font-family:var(--body); font-weight:600; letter-spacing:5px; font-size:14px;
  color:var(--muted); text-transform:uppercase; margin-top:8px; padding-left:3px;
}

.board-id { text-align:right; }
.board-id .kicker {
  font-family:var(--body); font-weight:600; letter-spacing:6px; font-size:13px;
  color:var(--accent); text-transform:uppercase;
}
.board-id .title {
  font-family:var(--display); font-size:40px; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink); margin-top:4px;
}

.rule { height:4px; margin:26px 0 30px; position:relative; background:
  repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 40px); opacity:.85; }
.rule::after { content:""; position:absolute; right:0; top:-7px; width:18px; height:18px;
  background:var(--accent); transform:rotate(45deg); box-shadow:0 0 18px rgba(255,194,30,.6); }

/* ============================================================
   BOARD GRID
   ============================================================ */
.board-grid { flex:1; display:grid; gap:30px; min-height:0; overflow:hidden; }
body[data-board="1"] .board-grid { grid-template-columns:2.55fr 1fr; }
body[data-board="2"] .board-grid { grid-template-columns:2.7fr 1fr; }

/* board-3: four explicit balanced columns */
body[data-board="3"] .board-grid { display:flex; gap:34px; align-items:flex-start; }
body[data-board="3"] .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:30px; }

/* ============================================================
   SECTION + GRUNGE BANNER
   ============================================================ */
.section { display:flex; flex-direction:column; min-height:0; min-width:0; }

.banner {
  position:relative; align-self:flex-start; margin-bottom:20px;
  padding:9px 30px 11px; transform:skewX(-7deg);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.banner::before { /* rough-edged yellow background ONLY (text stays crisp) */
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%);
  filter:url(#grunge);
}
.banner.accent::before { background:linear-gradient(180deg, #3fae68 0%, var(--green) 100%); }
.banner::after { /* halftone shading over the background */
  content:""; position:absolute; inset:0; z-index:1; opacity:.15; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(0,0,0,.85) 1px, transparent 1.4px);
  background-size:7px 7px;
}
.banner h2 {
  position:relative; z-index:2;
  font-family:var(--display); font-size:42px; letter-spacing:1.5px; line-height:1;
  text-transform:uppercase; color:#1a1205; transform:skewX(7deg);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.banner.accent h2 { color:#0c1a10; }

.section .note {
  font-family:var(--body); font-style:italic; font-weight:500; font-size:15px;
  color:var(--accent); margin:-8px 0 16px 4px; letter-spacing:.3px;
}

/* internal columns for big sections */
.list { min-height:0; }
.list.cols-3 { column-count:3; column-gap:40px; }
.list.cols-2 { column-count:2; column-gap:40px; }
/* grouped wide sections: balanced flex columns (no overflow) */
.list.gcols { display:flex; gap:40px; align-items:flex-start; }
.list.gcols .gcol { flex:1; min-width:0; }
.group { break-inside:avoid; margin-bottom:14px; min-width:0; }
body[data-board="2"] .s-pasta .item { padding:5px 0 6px; }
.group .glabel {
  display:inline-block; font-family:var(--head); font-size:23px; letter-spacing:2px;
  color:var(--accent); text-transform:uppercase; margin:2px 0 6px;
  border-bottom:2px solid var(--line); padding:0 2px 2px;
}
.group .gnote { display:block; font-family:var(--body); font-style:italic; font-size:12.5px;
  color:var(--muted); margin:-3px 0 8px; }

/* ============================================================
   ITEM ROW
   ============================================================ */
.item { break-inside:avoid; padding:7px 0 8px; position:relative; }
.item + .item { border-top:1px dashed rgba(255,255,255,.07); }

.item .top { display:flex; align-items:baseline; gap:10px; }
.item .iname {
  font-family:var(--name); font-weight:600; font-size:23px; line-height:1.05;
  color:var(--ink); text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
.item .dots { flex:1; height:0; border-bottom:2px dotted rgba(255,194,30,.25); transform:translateY(-4px); min-width:14px; }
.item .price {
  font-family:var(--head); font-size:28px; line-height:.9; color:var(--accent);
  letter-spacing:.5px; white-space:nowrap; text-shadow:0 0 18px rgba(255,194,30,.18);
}
.item .price small { font-size:18px; opacity:.8; }
.item .ing {
  display:block; font-family:var(--body); font-weight:500; font-size:14.5px;
  color:var(--muted); margin-top:2px; letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96%;
}

/* compact variant (drink/snack heavy lists) */
.section.compact .item { padding:5px 0 6px; }
.section.compact .item .iname { font-size:20px; }
.section.compact .item .price { font-size:24px; }

/* board-3 runs compact everywhere */
body[data-board="3"] .item { padding:4px 0 5px; }
body[data-board="3"] .item .iname { font-size:20px; white-space:normal; }
body[data-board="3"] .item .price { font-size:24px; }
body[data-board="3"] .banner h2 { font-size:36px; }
body[data-board="3"] .group .glabel { font-size:21px; }

/* ============================================================
   FOOD PHOTOS (transparent cut-outs filling empty space)
   ============================================================ */
.menu-photo {
  position:relative; margin-top:auto; padding-top:14px;
  display:grid; place-items:end center; min-height:0;
}
.menu-photo::before { /* warm glow puddle */
  content:""; position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:78%; height:46%;
  background:radial-gradient(60% 60% at 50% 60%, rgba(255,168,40,.22), transparent 72%);
  filter:blur(14px); z-index:0;
}
.menu-photo::after { /* contact shadow on the floor */
  content:""; position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  width:60%; height:24px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  filter:blur(6px); z-index:0;
}
.menu-photo img {
  position:relative; z-index:1;
  width:100%; max-width:440px; height:auto; max-height:300px;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.55));
  animation:floaty 6.5s ease-in-out infinite;
}
/* per-slot sizing to match the empty pocket */
.s-schnitzel .menu-photo     { padding-bottom:14px; }
.s-schnitzel .menu-photo img { width:104%; max-width:none; max-height:460px; }
.s-salate    .menu-photo img { max-height:300px; }
.group .menu-photo           { margin-top:10px; margin-bottom:20px; }
.group .menu-photo img       { width:118%; max-width:none; max-height:300px; }
body[data-board="3"] .s-getranke .menu-photo img { max-height:300px; max-width:360px; }
body[data-board="3"] .s-dessert  .menu-photo img { max-height:240px; max-width:360px; }
@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

/* slowly spinning plates: pizza, pasta, salat */
@keyframes spin360 { to { transform:rotate(360deg); } }
.s-schnitzel .menu-photo img,   /* pizza */
.s-pasta .menu-photo img,       /* pasta */
.s-salate .menu-photo img {     /* salat */
  animation:spin360 36s linear infinite;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { display:flex; align-items:center; justify-content:space-between;
  margin-top:24px; padding-top:16px; border-top:2px solid var(--line); }
.footer .left { font-family:var(--body); font-weight:600; letter-spacing:3px; font-size:13px;
  color:var(--muted); text-transform:uppercase; }
.footer .right { font-family:var(--head); font-size:22px; letter-spacing:3px; color:var(--accent); }
.footer .dot { color:var(--red); }

/* ============================================================
   INTRO ANIMATION (plays once)
   ============================================================ */
@keyframes fadeUp { from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
@keyframes bannerIn {
  0%{ opacity:0; transform:skewX(-7deg) scaleX(.2); transform-origin:left center; }
  60%{ opacity:1; transform:skewX(-7deg) scaleX(1.04); }
  100%{ opacity:1; transform:skewX(-7deg) scaleX(1); }
}
@keyframes stamp {
  0%{ opacity:0; transform:scale(1.5) rotate(-4deg); }
  70%{ opacity:1; transform:scale(.94); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes logoIn { from{ opacity:0; transform:translateX(-40px) skewX(6deg);} to{ opacity:1; transform:none;} }
@keyframes idIn   { from{ opacity:0; transform:translateX(40px);} to{ opacity:1; transform:none;} }
@keyframes ruleIn { from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.anim .brand   { opacity:0; animation:logoIn .8s cubic-bezier(.2,.8,.2,1) .1s both; }
.anim .board-id{ opacity:0; animation:idIn   .8s cubic-bezier(.2,.8,.2,1) .25s both; }
.anim .rule    { transform-origin:left center; animation:ruleIn .9s cubic-bezier(.7,0,.3,1) .5s both; }
.anim .banner  { opacity:0; animation:bannerIn .7s cubic-bezier(.2,.85,.25,1) both;
                 animation-delay:calc(.6s + var(--s,0) * .12s); }
.anim .section .note { opacity:0; animation:fadeUp .6s ease both; animation-delay:calc(.8s + var(--s,0) * .12s); }
.anim .item    { opacity:0; animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) both;
                 animation-delay:calc(.7s + var(--i,0) * .035s); }
.anim .item .price { animation:stamp .5s cubic-bezier(.2,.9,.3,1.2) both;
                 animation-delay:calc(.8s + var(--i,0) * .035s); }
.anim .menu-photo { opacity:0; animation:photoIn 1s cubic-bezier(.2,.8,.2,1) both;
                 animation-delay:calc(1.05s + var(--i,0) * .02s); }
.anim .footer  { opacity:0; animation:fadeUp .8s ease both 1.7s; }
@keyframes photoIn { from{ opacity:0; transform:translateY(34px) scale(.92);} to{ opacity:1; transform:none;} }

/* ambient shimmer on prices after intro */
.item .price { will-change:transform; }

/* ============================================================
   HELP / LAUNCHER PAGE (index)
   ============================================================ */
.launch { position:fixed; inset:0; display:grid; place-items:center; z-index:100;
  background:radial-gradient(120% 90% at 50% -10%, #241d12, transparent 55%), linear-gradient(160deg,#15120c,#070603); }
.launch .card { width:min(900px,92vw); text-align:center; }
.launch .name { font-family:var(--display); font-size:88px; text-transform:uppercase; letter-spacing:2px; }
.launch .name b { color:var(--accent); font-weight:400; }
.launch .tag { font-family:var(--body); letter-spacing:6px; color:var(--muted); text-transform:uppercase; margin:6px 0 40px; }
.launch .links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.launch a { display:block; padding:22px 30px; min-width:240px; text-decoration:none;
  background:linear-gradient(180deg,var(--accent),var(--accent-d)); color:#1a1205;
  font-family:var(--display); font-size:24px; text-transform:uppercase; letter-spacing:1px;
  transform:skewX(-7deg); transition:transform .2s; }
.launch a span { display:block; transform:skewX(7deg); }
.launch a small { display:block; font-family:var(--body); font-size:13px; letter-spacing:2px; margin-top:6px; opacity:.7; }
.launch a:hover { transform:skewX(-7deg) translateY(-4px) scale(1.03); }
.launch .hint { margin-top:42px; font-family:var(--body); color:var(--muted-2); font-size:14px; letter-spacing:1px; }
.launch .hint kbd { background:#241d12; color:var(--accent); padding:2px 8px; border-radius:4px; font-family:var(--head); letter-spacing:1px; }