/* FREAKY KITCHEN • Five optional design experiments • no changes to game logic */
:root{--fx-orange:#F79B08;--fx-ink:#21191A;--fx-cream:#FFF5E9}
/* Burger Reveal */
.dish-interactive{position:relative;display:flex;flex-direction:column;align-items:flex-start;cursor:default;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.dish-interactive .foot{width:100%}
.dish-reveal{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;padding:9px 15px;min-height:36px;background:#21191A;border:2px solid #21191A;border-radius:99px;color:#FFF7E8;font-size:.7rem;font-weight:900;letter-spacing:.09em;transition:background .18s,color .18s,transform .18s}
.dish-reveal:hover,.dish-reveal:focus-visible{background:var(--fx-orange);color:var(--fx-ink);transform:translateY(-2px)}
.dish-interactive:hover{border-color:#e4a648;box-shadow:6px 9px 0 #f9d6a7}
.burger-modal[hidden],.secret-surprise[hidden]{display:none!important}
.burger-modal,.secret-surprise{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.burger-modal-scrim,.secret-surprise-scrim{position:absolute;inset:0;background:rgba(17,15,15,.84);backdrop-filter:blur(6px)}
.burger-modal-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);width:min(910px,100%);max-height:min(86vh,780px);overflow:auto;border-radius:23px;background:#fff5e9;border:3px solid #21191a;box-shadow:12px 12px 0 var(--fx-orange);color:#21191A;animation:fx-popup .22s ease-out}
.burger-modal-close,.secret-surprise-close{position:absolute;right:15px;top:15px;z-index:3;display:grid;place-items:center;border:2px solid #21191A;border-radius:50%;background:#fff7ef;color:#21191A;width:43px;height:43px;font-size:1.65rem;font-weight:900}
.burger-modal-imagebox{position:relative;min-height:330px;background:#1a1313;display:grid;place-items:center;overflow:hidden}
.burger-modal-imagebox img{display:block;width:100%;height:100%;object-fit:cover;max-height:470px}
.burger-modal-imagebox img[src$='.svg']{object-fit:contain;width:60%;height:auto;max-height:330px;filter:drop-shadow(0 12px 1px #0003)}
.burger-modal-photo-label{position:absolute;bottom:13px;left:13px;background:#fff9ed;color:#251b1a;border-radius:30px;padding:7px 10px;font-size:.65rem;font-weight:800;letter-spacing:.025em}
.burger-modal-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:42px 33px}
.burger-modal-copy .label{color:#a16100}
.burger-modal-copy h2{font-size:clamp(2.8rem,5vw,5.1rem);line-height:.94;margin:0;color:#21191a;overflow-wrap:anywhere}
.burger-modal-copy p{font-size:1rem;line-height:1.65;color:#51413c;margin:0 0 8px}
.burger-modal-copy .btn{border-color:#21191a;background:#f79b08;color:#21191a;box-shadow:4px 5px 0 #21191a}
.burger-modal-copy .btn:hover{transform:translateY(-2px);background:#ffbe58}
body.fx-modal-open{overflow:hidden}
/* Real truck spotlight */
.truck-spotlight{background:#221b1b;color:#FFF6E8;overflow:hidden}
.truck-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,75px);align-items:center}
.truck-photo-panel{position:relative;min-width:0;transform:rotate(-2deg);border:5px solid #FFF3E2;border-radius:22px;box-shadow:13px 15px 0 #f79b08;overflow:visible}
.truck-photo-panel img{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 50%;border-radius:16px}
.truck-photo-sticker{position:absolute;bottom:-14px;right:-12px;transform:rotate(3deg);background:#f79b08;border:2px solid #21191a;color:#21191a;border-radius:8px;box-shadow:4px 5px 0 #21191a;font-weight:1000;font-size:.72rem;letter-spacing:.06em;padding:12px 15px}
.truck-copy .label{color:#ffae42}
.truck-copy h2{font-size:clamp(4.5rem,8.1vw,8.8rem);line-height:.78;margin:27px 0 30px;letter-spacing:-.035em}
.truck-copy h2 span{color:#F79B08}
.truck-copy p{font-size:1.06rem;line-height:1.75;max-width:430px;color:#e6d7ca;margin-bottom:25px}
.truck-cta{border:2px solid #F79B08;background:#F79B08;color:#21191a;border-radius:99px;box-shadow:5px 6px 0 #fff1d3}
.truck-cta:hover{background:#FFB43A;transform:translateY(-3px)}
.truck-mini-line{font-weight:800;font-size:.71rem;letter-spacing:.17em;color:#cebca8;margin-top:34px}
/* Secret skater – no soundtrack; original GIF is untouched */
.secret-skater-trigger{appearance:none;display:block;background:none;border:0;padding:0;margin:0 auto;cursor:pointer;width:100%;color:inherit;line-height:0;border-radius:13px}
.secret-skater-trigger .hero-mascot{pointer-events:none}
.secret-skater-trigger:hover .hero-mascot{filter:drop-shadow(0 10px 0 rgba(247,155,8,.26))}
.secret-surprise-card{position:relative;overflow:hidden;isolation:isolate;max-width:520px;width:100%;padding:45px 32px 36px;background:#ffecce;border:4px solid #1b1618;box-shadow:12px 12px 0 #f79b08;border-radius:24px;text-align:center;color:#21191a;animation:fx-popup .22s ease-out}
.secret-spark{font-size:3.4rem;color:#d98400;line-height:1}
.secret-caption{font-size:.77rem;letter-spacing:.16em;font-weight:1000;margin:18px 0}
.secret-surprise h2{font-size:clamp(3.6rem,10vw,6rem);line-height:.83;margin:10px 0 20px;color:#21191a}
.secret-surprise p{font-size:1rem;line-height:1.65;max-width:340px;margin:0 auto 23px}
.secret-okay{font-size:.9rem;font-weight:900;letter-spacing:.06em;border:2px solid #21191a;border-radius:60px;padding:13px 30px;background:#f79b08;color:#21191a;box-shadow:4px 5px 0 #21191a}
.secret-okay:hover{background:#ffc26b}
.secret-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.secret-confetti i{position:absolute;left:var(--x);top:-14px;width:var(--w,8px);height:18px;background:var(--c);transform:rotate(var(--r));opacity:.9;animation:fx-fall var(--d,2.2s) linear var(--delay,0s) both}
@keyframes fx-fall{to{top:115%;transform:rotate(480deg) translateX(35px);opacity:0}}
@keyframes fx-popup{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Events as festival tickets, all original dates and towns intact */
.event-grid{gap:18px}
.event-card.ticket-card{position:relative;display:flex;flex-direction:column;min-height:215px;overflow:visible;padding:0;border:2px solid #241d1b;border-radius:18px;background:#fffdf8;box-shadow:4px 5px 0 #f1c992;isolation:isolate;transition:transform .24s ease,box-shadow .24s ease}
.ticket-card:before,.ticket-card:after{content:'';position:absolute;top:53px;z-index:2;width:15px;height:24px;background:#fff6eb;border:2px solid #241d1b}
.ticket-card:before{left:-8px;border-radius:0 15px 15px 0;border-left:0}
.ticket-card:after{right:-8px;border-radius:15px 0 0 15px;border-right:0}
.ticket-card .ticket-band{min-height:65px;background:#F79B08;display:flex;align-items:center;justify-content:center;border-radius:15px 15px 0 0;border-bottom:2px dashed #21191a;padding:12px 23px}
.ticket-card .event-date{background:transparent;border:0;color:#21191a;padding:0;font-size:1.05rem;font-weight:1000}
.ticket-card .ticket-main{flex:1;padding:23px 26px 17px}
.ticket-card h3{font-size:clamp(2.05rem,2.8vw,2.55rem);margin:0 0 7px;color:#21191a}
.ticket-card p{font-size:.9rem;color:#675652}
.ticket-card .ticket-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;border-top:1px dashed #ae9a8b;margin:0 24px;padding:13px 0;font-size:.66rem;font-weight:900;letter-spacing:.11em;color:#8a5808}
.ticket-card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:7px 9px 0 #e6aa59;border-color:#241d1b}
/* Small motion; do not hide content when JS/IntersectionObserver is unavailable. */
@media(hover:hover){.btn,.arcade-link,.nav-cta,.filter,.ticket-card{transition-duration:.23s}}
@media (min-width:701px) and (prefers-reduced-motion:no-preference){.fx-motion .reveal-me{opacity:0;transform:translateY(16px);transition:opacity .48s ease,transform .48s ease}.fx-motion .reveal-me.fx-in{opacity:1;transform:translateY(0)}.fx-motion .truck-photo-panel.reveal-me.fx-in{transform:rotate(-2deg)}.fx-motion .ticket-card:hover,.fx-motion .dish-interactive:hover{transform:translateY(-4px)}.fx-motion .truck-copy.reveal-me{transition-delay:.09s}}
@media(max-width:900px){.truck-layout{grid-template-columns:1fr;gap:40px}.truck-photo-panel{max-width:640px}.truck-photo-panel img{height:380px}}
@media(max-width:680px){.burger-modal-panel{grid-template-columns:1fr;max-height:87dvh;box-shadow:5px 7px 0 var(--fx-orange)}.burger-modal-imagebox{min-height:215px;height:220px}.burger-modal-copy{gap:12px;padding:27px 22px 28px}.burger-modal-copy h2{font-size:3.2rem}.burger-modal-close{right:10px;top:10px}.truck-spotlight{padding:76px 0}.truck-photo-panel{margin:0 12px 0 0}.truck-photo-panel img{height:295px}.truck-photo-sticker{font-size:.63rem;padding:8px 9px}.truck-copy h2{font-size:clamp(4.5rem,17vw,7rem)}.ticket-card:before,.ticket-card:after{top:53px}.secret-surprise-card{padding:38px 21px 30px;box-shadow:5px 7px 0 #f79b08}}
@media(prefers-reduced-motion:reduce){.burger-modal-panel,.secret-surprise-card,.secret-confetti i{animation:none!important}.dish-interactive,.ticket-card,.truck-cta,.btn{transition:none!important}.dish-interactive:hover,.ticket-card:hover,.truck-cta:hover{transform:none!important}}

/* Keep long product names readable, never split a word in the modal. */
.burger-modal-copy h2{font-size:clamp(2.35rem,3.6vw,3.2rem);overflow-wrap:normal;word-break:normal;letter-spacing:-.025em}
@media(max-width:680px){.burger-modal-copy h2{font-size:clamp(2.1rem,8.5vw,2.65rem)}}

/* Fit long burger names on all viewports */
.burger-modal-copy h2{font-size:clamp(2.2rem,3.2vw,2.8rem);letter-spacing:-.03em}
@media(max-width:680px){.burger-modal-copy h2{font-size:clamp(2rem,7.5vw,2.25rem)}html,body{max-width:100%;overflow-x:clip}}

/* The Bärner Frites pop-up uses the real, uncaptained user photo. */
.burger-modal-imagebox.is-frites img{object-fit:contain;object-position:center;background:#1a1313}