/* Self-hosted fonts (SIL Open Font License) — latin + latin-ext for Croatian characters */
/* outfit-latin-ext-wght-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* outfit-latin-wght-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* oswald-latin-ext-wght-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* oswald-latin-wght-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --color-bg-dark: #0f1012;
  --color-orange: #b02d00; /* Deep brick orange */
  --color-orange-dark: #8a2200;
  --color-text-main: #ffffff;
  --color-text-muted: #a0a0a0;
  --font-primary: "Outfit", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Typography */
h1,
h2,
h3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1 {
  font-size: clamp(2.4rem, 4vw, 4rem); /* Reduced by ~20% */
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

/* Navbar */
.navbar {
    position: fixed; /* Changed to fixed for sticky header */
    top: 0; left: 0;
    width: 60%; /* Expanded width so items fit in one row */
    padding: 2rem 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s ease;
}

.navbar.scrolled {
    width: 100%;
    padding: 1rem 5%;
    background: rgba(15, 16, 18, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

.logo-img {
    height: 60px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

.nav-box {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Street style background that appears on hover */
.nav-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-orange);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
    z-index: -1;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
}

.nav-box:hover {
    color: #fff;
    transform: translateY(-2px);
}

.nav-box:hover::before {
    opacity: 1;
    transform: translateY(0);
}

/* nav CTA pill - keep it always visible as a button but match the style */
.nav-cta::before {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.8rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* Primary street-style button */
.btn-street {
  background-color: var(--color-orange);
  color: #fff;
  border: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
  padding: 1rem 2.5rem;
}

.btn-street::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.25s;
}

.btn-street:hover::after {
  opacity: 1;
}

.btn-street:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(217, 59, 0, 0.5);
}

/* Outline game button */
.btn-outline {
  background-color: transparent;
  color: #fff;
  border: 3px solid #fff;
}

.btn-outline:hover {
  background-color: #fff;
  color: var(--color-orange);
}

.btn-icon-right {
  margin-left: 6px;
}

.btn-dark-outline {
  border-color: #000;
  color: #000;
}

.btn-dark-outline:hover {
  background-color: #000;
  color: #fff;
}



/* Hero Section */
.hero {
    display: flex;
    min-height: 100vh;
    position: relative;
    background-color: #0f1012;
    background-image: url("assets/img/hero.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-left {
    width: 40%;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 4rem 2rem 4rem 5%;
    position: relative;
    z-index: 2;
}



.hero-content {
    width: 100%;
    padding-top: 20px; 
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-logo {
    width: 96%;
    max-width: 228px;
    height: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    animation: fadeUp 1s ease-out forwards;
}

.hero-content h1 {
    font-family: 'Oswald', 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 3.2rem); /* Reduced by 20% */
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

/* --- Hero Animations --- */
.typewriter-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid var(--color-orange);
    width: 0;
    animation: typing 2.5s steps(40, end) forwards, blink 0.8s step-end infinite;
}

/* Because the text has a <br>, a pure width typing effect might break. 
   A safer multi-line approach for "Typewriter" is a rapid wipe or clip-path. 
   We will use a modern clip-path reveal that mimics a typewriter wiping across. */
@supports (clip-path: inset(0)) {
    .typewriter-text {
        white-space: pre-wrap; /* allow breaks */
        width: auto;
        border-right: none;
        clip-path: inset(0 100% 0 0);
        animation: typeWipe 2s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
        animation-delay: 0.3s;
    }
}

.fade-in-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
    animation-delay: 1.5s; /* Wait for text to finish typing */
}

/* New Hero Animations */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes heroFadeRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-hero-up {
    animation: heroFadeUp 0.8s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
}

.animate-hero-left {
    animation: heroFadeLeft 0.8s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
}

.animate-hero-right {
    animation: heroFadeRight 0.8s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
}

.animate-hero-down {
    animation: heroFadeDown 0.8s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
}

@keyframes typeWipe {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-orange); }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-features {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    max-width: 560px;
}

.feature-item {
    flex: 1;
    padding: 1rem 0.75rem 1rem;
    border-top: 2px solid var(--color-orange);
    background: rgba(255,255,255,0.03);
    transition: background 0.3s;
}

.feature-item:hover {
    background: rgba(176,45,0,0.08);
}

.feature-item .icon {
    font-size: 1.5rem;
    color: var(--color-orange);
    margin-bottom: 0.6rem;
    display: block;
}

.feature-label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.feature-item p {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.5;
    margin: 0;
}

.hero-right {
    width: 60%;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* Hero background on play hover: the second image fades in on its own layer.
   It loads only once the pointer nears the right side (script.js adds .play-ready). */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: center / cover no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s ease, transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero.play-ready::before { background-image: url("assets/img/hero-play.webp"); }
.hero.play-hover::before { opacity: 0.85; transform: scale(1); }

/* Decorative circles */
.deco-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.circle-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
}
.circle-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: 50px;
}

.game-preview-container {
    width: 85%;
    aspect-ratio: 2304 / 1534;
    background: #000 url('assets/img/game-poster-v2.webp') center / cover no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 10;
    overflow: hidden;
    border: 2px solid rgba(176,45,0,0.55);
    box-shadow:
        0 0 0 1px rgba(176,45,0,0.2),
        0 0 40px rgba(176,45,0,0.3),
        0 0 80px rgba(176,45,0,0.12),
        0 30px 60px rgba(0,0,0,0.7),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

.game-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.game-preview-container:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1px rgba(176,45,0,0.5),
        0 0 50px rgba(176,45,0,0.5),
        0 0 100px rgba(176,45,0,0.2),
        0 40px 70px rgba(0,0,0,0.8),
        inset 0 0 0 1px rgba(255,255,255,0.06);
}

.game-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-bg-dark);
    transition: background 0.3s ease;
}

.game-preview-container:hover .game-preview-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.game-preview-overlay .btn {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    background: #fff;
    color: #ff4500;
    border-color: #fff;
}

.game-preview-container:hover .game-preview-overlay .btn {
    opacity: 1;
    transform: translateY(0);
}

.game-preview-overlay .btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Sections */
section {
  padding: 8rem 0;
}

/* About Section */
.about {
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
}

.about-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-orange);
  display: block;
  margin-bottom: 1rem;
}

.about-text-block h2 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 2rem;
  text-align: left;
  color: #fff;
  transition: color 2.4s ease;
  cursor: default;
}
.about-text-block:hover h2 {
  color: var(--color-orange);
}

.about-text-block p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: 1.2rem;
  line-height: 1.8;
}

.about-quote {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem !important;
  font-style: italic;
  color: var(--color-orange) !important;
  border-left: 4px solid var(--color-orange);
  padding-left: 1.2rem;
  margin-top: 2rem !important;
}

.about-photo {
  position: relative;
}

.about-photo-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border: 3px solid #222;
  box-shadow: -8px 8px 0 var(--color-orange);
}

/* Menu Section */
.real-menu {
  background-color: #0c0c0c;
  padding: 6rem 0;
}

.section-title {
  text-align: center;
  color: var(--color-orange);
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
}

/* The Menu — oversized stencil title */
#menu .section-title {
  font-size: clamp(5.5rem, 14vw, 11.4rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.9;
  color: #fff;
  position: relative;
  display: block;
  text-align: center;
  text-shadow: none;
}
#menu .section-title::after {
  content: attr(data-text);
  position: absolute;
  inset: -5px;
  color: var(--color-orange);
  clip-path: inset(110% 0 -10px 0);
  transition: clip-path 2.4s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-text-stroke: 0;
}
#menu .section-title:hover::after {
  clip-path: inset(-10px 0 -10px 0);
}

/* Sides — same effect, smaller */
#menu .sides-title {
  font-size: clamp(2.2rem, 5.6vw, 4.56rem);
  letter-spacing: 0;
}
#menu .sides-title::after {
  transition: clip-path 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  margin-top: 4rem;
}

.menu-block {
  border-bottom: 1px dashed #333;
  padding-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.menu-block:hover {
  transform: translateX(15px);
  border-bottom: 1px solid var(--color-orange);
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.8rem;
}

.menu-header h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  color: var(--color-text-main);
  letter-spacing: 1px;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.menu-block:hover h3 {
  color: var(--color-orange);
  text-shadow: 0 0 10px rgba(217, 59, 0, 0.3);
  transform: scale(1.05);
}

.menu-header .price {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  color: var(--color-orange);
  font-weight: 700;
  white-space: nowrap;
  padding-left: 1rem;
}

.desc-hr {
  color: #ccc;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.desc-en {
  color: #888;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
}

.sides-title {
  margin-top: 6rem;
  font-size: 2rem;
  color: #fff;
}

.sides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 3rem;
  margin-top: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.side-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #222;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  color: #bbb;
}

.side-item .price {
  color: var(--color-orange);
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
}

.allergen-box {
  margin-top: 5rem;
  padding: 2rem;
  border: 1px solid #333;
  border-left: 4px solid var(--color-orange);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.allergen-box .allergen-title {
  color: var(--color-text-main);
  margin-bottom: 1rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
}

.allergen-box p {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}
.allergen-box p:last-child {
  margin-bottom: 0;
}

/* Game Section — full width */
.game-section {
  background: #000;
  padding: 0;
  overflow: hidden;
}

.game-play-area {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}

.game-title-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 2rem 3rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 2rem;
  pointer-events: none;
}

.game-title-overlay .section-title {
  font-size: 2rem;
  margin: 0;
}

.game-subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0;
}

.game-iframe-container {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.game-iframe-wrapper {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #000;
}

/* Street Art Footer */
.street-footer {
  position: relative;
  background-color: #050505;
  background-image: url("assets/img/footer-v2.webp");
  background-size: cover;
  background-position: center top; /* Shifted to allow parallax */
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 0;
  /* CSS-only parallax approach as a base */
  background-attachment: fixed;
}

.street-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1;
}

.footer-graffiti {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(12rem, 28vw, 22rem);
  font-weight: 900;
  line-height: 0.9;
  color: rgba(217, 59, 0, 0.06);
  letter-spacing: -10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 2rem 3rem;
  gap: 2rem;
}

.footer-logo-wrapper {
  margin-bottom: 0;
}

.footer-big-logo {
  max-width: 280px;
  height: auto;
  filter: brightness(1.1);
}

.typewriter-text {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 2.88vw, 2.74rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
}

.hero .typewriter-text {
  cursor: default;
  transition: color 0.15s ease;
}
/* After load anim: JS adds .anim-done. On first hover: JS adds .is-glitching then .is-glitched */
.hero .typewriter-text.anim-done {
  clip-path: inset(0 0 0 0) !important;
  animation: none !important;
}
.hero .typewriter-text.anim-done.is-glitching {
  animation: heroGlitch 0.825s steps(1) forwards !important;
}
.hero .typewriter-text.anim-done.is-glitched {
  color: var(--color-orange) !important;
  animation: none !important;
}

@keyframes heroGlitch {
  0%   { transform: translate(0,0) skewX(0);      color: #fff;                   filter: none; }
  8%   { transform: translate(-5px, 2px) skewX(-0.8deg); color: #fff;            filter: drop-shadow( 8px 0 0 rgba(255,20,20,.95)) drop-shadow(-8px 0 0 rgba(0,220,255,.95)) brightness(1.2); }
  16%  { transform: translate( 5px,-2px) skewX( 0.5deg); color: var(--color-orange); filter: drop-shadow(-9px 0 0 rgba(255,20,20,.85)) drop-shadow( 9px 0 0 rgba(0,220,255,.85)); }
  24%  { transform: translate(-3px, 1px) skewX( 0.6deg); color: #fff;            filter: drop-shadow( 6px 0 0 rgba(255,20,20,.9))  drop-shadow(-6px 0 0 rgba(0,220,255,.9))  contrast(1.3); }
  32%  { transform: translate( 6px,-1px) skewX(-0.4deg); color: var(--color-orange); filter: drop-shadow(-7px 0 0 rgba(255,20,20,.8))  drop-shadow( 7px 0 0 rgba(0,220,255,.8)); }
  40%  { transform: translate(-6px, 0px) skewX( 0.7deg); color: #fff;            filter: drop-shadow(10px 0 0 rgba(255,20,20,.9))  drop-shadow(-10px 0 0 rgba(0,220,255,.9)) brightness(1.15); }
  50%  { transform: translate( 3px, 2px) skewX(-0.3deg); color: var(--color-orange); filter: drop-shadow(-5px 0 0 rgba(255,20,20,.7))  drop-shadow( 5px 0 0 rgba(0,220,255,.7)); }
  60%  { transform: translate(-2px,-1px) skewX( 0.2deg); color: var(--color-orange); filter: drop-shadow( 3px 0 0 rgba(255,20,20,.5))  drop-shadow(-3px 0 0 rgba(0,220,255,.5)); }
  75%  { transform: translate( 1px, 0px);               color: var(--color-orange); filter: drop-shadow(-1px 0 0 rgba(255,20,20,.25)) drop-shadow( 1px 0 0 rgba(0,220,255,.25)); }
  100% { transform: translate(0,0);                     color: var(--color-orange); filter: none; }
}

.footer-tagline p {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  transition: all 0.3s ease;
}

.insta-btn {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  color: #fff;
}

/* --- Utility Classes for JS Animations --- */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.js .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hero Entrance Animations --- */
@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeDown {
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes heroFadeRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes heroZoomPop {
  0% { opacity: 0; transform: scale(0.8) rotate(-5deg); filter: blur(10px); }
  70% { transform: scale(1.05) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.anim-hero-up {
  animation: heroFadeUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}
.anim-hero-down {
  animation: heroFadeDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}
.anim-hero-left {
  animation: heroFadeLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}
.anim-hero-right {
  animation: heroFadeRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}
.anim-hero-zoom-pop {
  animation: heroZoomPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}

/* Staggered transition delays for JS reveal */
.js .reveal.child-delay-1 { transition-delay: 0.05s; }
.js .reveal.child-delay-2 { transition-delay: 0.1s; }
.js .reveal.child-delay-3 { transition-delay: 0.15s; }
.js .reveal.child-delay-4 { transition-delay: 0.2s; }
.js .reveal.child-delay-5 { transition-delay: 0.25s; }
.js .reveal.child-delay-6 { transition-delay: 0.3s; }

/* Delays for pure CSS */
.delay-100 { animation-delay: 0.1s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1100 { animation-delay: 1.1s; }

.insta-btn {
  background: transparent;
  border: 2px solid var(--color-orange);
  color: #fff;
}

.insta-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(217, 59, 0, 0.5);
}

.ta-btn {
  background: transparent;
  border: 2px solid #555;
  color: #fff;
}

.ta-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: #333;
  color: var(--color-orange);
  border-color: #333;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}

.footer-bottom {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid #222;
  width: 100%;
  text-align: center;
}

.copyright-text {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== SPRAY PAINT DIVIDERS ===== */
.spray-divider-wrap {
  display: none; /* temporarily disabled */
  position: relative;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  line-height: 0;
  margin: 0;
}

.spray-divider {
  width: 100%;
  height: 60px;
  display: block;
  overflow: visible;
}

/* Wide soft stroke for the halo glow */
.spray-halo {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 20;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 1s ease 0.1s;
}

/* Main spray stroke — draws left to right */
.spray-stroke {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thin accent line underneath */
.spray-accent {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  opacity: 0.5;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

/* Spray splatter particles */
.spray-dot {
  fill: var(--color-orange);
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0.2s);
}

/* Stagger delays via nth-of-type — no inline styles needed */
.spray-divider circle:nth-of-type(1)  { --d: .20s; }
.spray-divider circle:nth-of-type(2)  { --d: .26s; }
.spray-divider circle:nth-of-type(3)  { --d: .32s; }
.spray-divider circle:nth-of-type(4)  { --d: .38s; }
.spray-divider circle:nth-of-type(5)  { --d: .44s; }
.spray-divider circle:nth-of-type(6)  { --d: .50s; }
.spray-divider circle:nth-of-type(7)  { --d: .56s; }
.spray-divider circle:nth-of-type(8)  { --d: .62s; }
.spray-divider circle:nth-of-type(9)  { --d: .68s; }
.spray-divider circle:nth-of-type(10) { --d: .74s; }
.spray-divider circle:nth-of-type(11) { --d: .80s; }
.spray-divider circle:nth-of-type(12) { --d: .86s; }
.spray-divider circle:nth-of-type(13) { --d: .92s; }
.spray-divider circle:nth-of-type(14) { --d: .98s; }
.spray-divider circle:nth-of-type(15) { --d: 1.04s; }
.spray-divider circle:nth-of-type(16) { --d: 1.10s; }
.spray-divider circle:nth-of-type(17) { --d: 1.16s; }
.spray-divider circle:nth-of-type(18) { --d: 1.22s; }
.spray-divider circle:nth-of-type(19) { --d: 1.28s; }
.spray-divider circle:nth-of-type(20) { --d: 1.34s; }

/* Triggered state — add .active class via Intersection Observer */
.spray-divider-wrap.active .spray-halo   { opacity: 0.14; }
.spray-divider-wrap.active .spray-stroke { stroke-dashoffset: 0; }
.spray-divider-wrap.active .spray-accent { stroke-dashoffset: 0; }
.spray-divider-wrap.active .spray-dot    { opacity: 0.65; }

/* ─── HERO IMAGE CINEMATIC GLITCH ─────────────────────── */

/* Image: shake + RGB chromatic aberration — fires in 3 bursts per loop */
@keyframes kai-glitch-img {
  0%,22%,28%,47%,53%,72%,78%,100% {
    transform: translate(0,0) skew(0deg);
    filter: none;
  }
  /* Burst 1 */
  23% { transform: translate(-3px,  1px) skew(-0.4deg); filter: drop-shadow( 7px 0 0 rgba(255,20,20,.9)) drop-shadow(-7px 0 0 rgba(0,220,255,.9)) brightness(1.12); }
  24% { transform: translate( 3px, -2px) skew( 0.3deg); filter: drop-shadow(-5px 0 0 rgba(255,20,20,.7)) drop-shadow( 5px 0 0 rgba(0,220,255,.7)); }
  25% { transform: translate(-1px,  1px) skew( 0.4deg); filter: drop-shadow( 4px 0 0 rgba(255,20,20,.8)) drop-shadow(-4px 0 0 rgba(0,220,255,.8)) contrast(1.2); }
  26% { transform: translate( 2px, -1px) skew(-0.2deg); filter: none; }
  /* Burst 2 */
  48% { transform: translate( 4px, -2px) skew( 0.5deg); filter: drop-shadow( 6px 0 0 rgba(255,20,20,.85)) drop-shadow(-6px 0 0 rgba(0,220,255,.85)) brightness(1.1); }
  49% { transform: translate(-3px,  2px) skew(-0.3deg); filter: drop-shadow(-8px 0 0 rgba(255,20,20,.65)) drop-shadow( 8px 0 0 rgba(0,220,255,.65)) contrast(1.3); }
  50% { transform: translate( 2px,  0px) skew( 0.2deg); filter: drop-shadow( 5px 0 0 rgba(255,20,20,.8)) drop-shadow(-5px 0 0 rgba(0,220,255,.8)); }
  51% { transform: translate(-1px, -1px);                filter: none; }
  /* Burst 3 */
  73% { transform: translate(-4px,  1px) skew(-0.5deg); filter: drop-shadow( 6px 0 0 rgba(255,20,20,.9)) drop-shadow(-6px 0 0 rgba(0,220,255,.9)) brightness(1.15); }
  74% { transform: translate( 4px, -1px) skew( 0.4deg); filter: drop-shadow(-7px 0 0 rgba(255,20,20,.75)) drop-shadow( 7px 0 0 rgba(0,220,255,.75)); }
  75% { transform: translate(-2px,  2px) skew(-0.2deg); filter: drop-shadow( 3px 0 0 rgba(255,20,20,.85)) drop-shadow(-3px 0 0 rgba(0,220,255,.85)) contrast(1.15); }
  76% { transform: translate( 1px, -1px);                filter: none; }
}

/* Horizontal slice strips that jump across the image */
@keyframes kai-glitch-slice {
  0%,22%,27%,47%,53%,72%,78%,100% { opacity:0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
  /* Burst 1 — two slices */
  23% { opacity:1; clip-path: inset(18% 0 74% 0); background: rgba(176,45,0,.6);      transform: translateX(-9px); }
  24% { opacity:1; clip-path: inset(18% 0 74% 0); background: rgba(176,45,0,.6);      transform: translateX( 9px); }
  25% { opacity:1; clip-path: inset(62% 0 28% 0); background: rgba(255,255,255,.08); transform: translateX( 5px); }
  26% { opacity:0; clip-path: inset(0 0 100% 0);  transform: translateX(0); }
  /* Burst 2 */
  48% { opacity:1; clip-path: inset(44% 0 46% 0); background: rgba(255,255,255,.1);  transform: translateX(11px); }
  49% { opacity:1; clip-path: inset(44% 0 46% 0); background: rgba(0,220,255,.08);   transform: translateX(-7px); }
  50% { opacity:1; clip-path: inset(80% 0 12% 0); background: rgba(176,45,0,.5);      transform: translateX( 6px); }
  51% { opacity:1; clip-path: inset(80% 0 12% 0); transform: translateX(-6px); }
  52% { opacity:0; clip-path: inset(0 0 100% 0);  transform: translateX(0); }
  /* Burst 3 */
  73% { opacity:1; clip-path: inset(30% 0 60% 0); background: rgba(176,45,0,.55);     transform: translateX(-8px); }
  74% { opacity:1; clip-path: inset(30% 0 60% 0); transform: translateX(8px); }
  75% { opacity:1; clip-path: inset(70% 0 22% 0); background: rgba(255,255,255,.07); transform: translateX( 7px); }
  76% { opacity:1; clip-path: inset(70% 0 22% 0); transform: translateX(-5px); }
  77% { opacity:0; clip-path: inset(0 0 100% 0);  transform: translateX(0); }
}

/* Scanline overlay — breathes gently */
@keyframes kai-scanlines-breathe {
  0%,100% { opacity: .07; }
  50%      { opacity: .13; }
}

/* Base pseudo-element setup */
.game-preview-container::before,
.game-preview-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

/* ::before = scanlines */
.game-preview-container::before {
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.32) 2px,
    rgba(0,0,0,.32) 4px
  );
  transition: opacity .4s ease;
}

/* ::after = glitch slices */
.game-preview-container::after {
  z-index: 4;
}

/* Glitch hover triggers — disabled, keyframes kept for future use */
/* .game-preview-container:hover::before { opacity: 1; animation: kai-scanlines-breathe 1.6s ease-in-out infinite; } */
/* .game-preview-container:hover::after  { animation: kai-glitch-slice 3s steps(1) infinite; } */
/* .game-preview-container:hover .game-preview-img { animation: kai-glitch-img 3s steps(1) infinite; } */

/* ================================================================
   OPTION D — VISUAL ENHANCEMENTS: Grain + Ghost Numbers + Polish
   ================================================================ */

/* A: Grain texture — fixed noise overlay on entire page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* A: Ambient orange glow behind key focal sections */
.about {
  background-image: url("assets/img/about-bg.webp");
  background-size: 67% 100%;
  background-position: center right;
  background-repeat: no-repeat;
}
/* C: Menu cards — price chip badge */
.menu-header .price {
  background: rgba(176,45,0,0.15);
  padding: 0.2rem 0.7rem;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

/* C: Side items — orange bottom border + slide on hover */
.side-item {
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.side-item:hover {
  border-bottom-color: var(--color-orange);
  color: #fff;
  transform: translateX(10px);
}

/* C: About photo — top-right corner accent bracket */
.about-photo::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-top: 2px solid rgba(176,45,0,0.65);
  border-right: 2px solid rgba(176,45,0,0.65);
  pointer-events: none;
  z-index: 2;
}



/* ================================================================
   LAUNCH PREP — icons, nav, open status, game launcher, find us,
   accessibility and mobile. Kept at the end so it wins the cascade.
   ================================================================ */

body { overflow-x: clip; }
body.no-scroll { overflow: hidden; }

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 3000;
  background: var(--color-orange);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid #ff6a2b;
  outline-offset: 3px;
}

/* Nav extras (mobile only) */
.nav-logo,
.nav-toggle { display: none; }

/* Hero actions + open status */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #e6e6e6;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease;
}
.open-status:hover { border-color: rgba(255, 255, 255, 0.35); }

.status-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #777;
  flex-shrink: 0;
}
.open-status[data-state="open"] .status-dot {
  background: #3ddc84;
  animation: statusPulse 2s infinite;
}
.open-status[data-state="late"] .status-dot { background: #f5a524; }
.open-status[data-state="closed"] .status-dot { background: #e5484d; }

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.open-status-lg {
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  margin-bottom: 2.5rem;
}

/* Hero game preview is now a link */
a.game-preview-container { text-decoration: none; }
.game-preview-container:focus-visible .game-preview-overlay { background: rgba(0, 0, 0, 0.55); }
.game-preview-container:focus-visible .game-preview-overlay .btn { opacity: 1; transform: translateY(0); }

/* Game coming soon: neon sign on the hero preview + small teaser section */
.nav-soon {
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.62em;
  letter-spacing: 1px;
  vertical-align: 0.2em;
  color: #fff;
  background: var(--color-orange);
}
.nav-cta .nav-soon { background: #fff; color: var(--color-orange); }

.game-preview-container.is-soon .game-preview-overlay {
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.35), rgba(8, 8, 10, 0.68));
  -webkit-backdrop-filter: blur(2px) saturate(0.75);
  backdrop-filter: blur(2px) saturate(0.75);
}
.game-preview-container.is-soon:hover .game-preview-overlay { background: linear-gradient(180deg, rgba(8, 8, 10, 0.25), rgba(8, 8, 10, 0.55)); }
.soon-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.4rem 2.2rem 1.25rem;
  border: 2px solid #ffd9c7;
  border-radius: 16px;
  box-shadow: 0 0 6px #ff8a5c, 0 0 18px #ff5a1f, 0 0 40px rgba(255, 90, 31, 0.55), inset 0 0 6px #ff8a5c, inset 0 0 16px rgba(255, 90, 31, 0.45);
  animation: npOn 1.4s steps(1) 1.2s both, npHum 7s 3s infinite;
}
.soon-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #f4f1ec;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.soon-neon {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  text-transform: uppercase;
  color: #fff3ec;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff8a5c, 0 0 18px #ff5a1f, 0 0 38px #ff5a1f, 0 0 70px rgba(176, 45, 0, 0.9);
}
.game-preview-container.is-soon:hover .soon-sign { animation: npBuzz 0.5s steps(1), npHum 7s 0.5s infinite; }

.game-soon {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background:
    radial-gradient(50% 70% at 25% 50%, rgba(176, 45, 0, 0.12), transparent 70%),
    #0c0c0c;
}
.game-soon-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.game-soon-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(176, 45, 0, 0.55);
  box-shadow: 0 0 40px rgba(176, 45, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.7);
}
.game-soon-screen img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.7) brightness(0.62);
  transition: filter 0.5s ease;
}
.game-soon-screen:hover img { filter: saturate(0.85) brightness(0.75); }
/* CRT scanlines */
.game-soon-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
}
/* Rubber stamp that slams on when the section scrolls into view */
.game-soon-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: 0.45rem 1.2rem;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ff5a1f;
  border: 4px solid #ff5a1f;
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.5);
  box-shadow: inset 0 0 0 3px rgba(255, 90, 31, 0.25);
  filter: url(#spray-rough);
  transform: translate(-50%, -50%) rotate(-9deg);
}
.js .game-soon-screen .game-soon-stamp { opacity: 0; }
.js .game-soon-screen.active .game-soon-stamp { animation: stampSlam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.5s both; }
@keyframes stampSlam {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}
.game-soon-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.4rem;
  color: #fff;
}
.game-soon-text p {
  max-width: 480px;
  margin-bottom: 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.game-soon-btn {
  padding: 0.85rem 1.8rem;
  font-size: 1rem;
  border-width: 2px;
}

/* Game section: click-to-play poster (back at game launch) */
.game-launch {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.game-launch picture,
.game-launch-img {
  display: block;
  width: 100%;
  height: 100%;
}
.game-launch-img {
  object-fit: cover;
  filter: brightness(0.55);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.game-launch:hover .game-launch-img,
.game-launch:focus-visible .game-launch-img {
  transform: scale(1.03);
  filter: brightness(0.42);
}
.game-launch-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1rem;
}
.game-launch-play {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-orange);
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  padding-left: 6px;
  box-shadow: 0 0 0 10px rgba(176, 45, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.game-launch:hover .game-launch-play {
  transform: scale(1.08);
  box-shadow: 0 0 0 16px rgba(176, 45, 0, 0.2), 0 20px 40px rgba(0, 0, 0, 0.6);
}
.game-launch-label {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.game-launch-hint {
  color: #ddd;
  font-size: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.game-play-area.is-playing .game-title-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.game-fullscreen {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font: 600 0.8rem var(--font-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.game-fullscreen:hover { background: var(--color-orange); }
.game-fullscreen[hidden] { display: none; }

/* ================================================================
   GALLERY — PASTE-UP WALL: prints and stickers on a concrete wall
   ================================================================ */
.paste-wall {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6.5rem;
  background-color: #1b1b1d;
  background-image:
    linear-gradient(180deg, #0c0c0c 0%, rgba(12, 12, 12, 0) 12%, rgba(12, 12, 12, 0) 88%, #0c0c0c 100%),
    radial-gradient(40% 30% at 18% 28%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(35% 40% at 82% 70%, rgba(0, 0, 0, 0.4), transparent 70%),
    radial-gradient(25% 20% at 60% 15%, rgba(120, 90, 60, 0.08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paste-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(14rem, 34vw, 30rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px rgba(176, 45, 0, 0.14);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.paste-head { position: relative; z-index: 1; text-align: center; padding: 0 1rem; margin-bottom: 1.5rem; }
.paste-head-2 { margin: 3.5rem 0 1rem; }

/* Spray-painted handle */
.paste-spray {
  position: relative;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #ff5a1f;
  transform: rotate(-2.5deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.paste-spray small {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.32em;
  letter-spacing: 0.4em;
  color: #f4f1ec;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.2);
}
.paste-spray-handle {
  position: relative;
  display: inline-block;
  filter: url(#spray-rough);
  text-shadow: 0 0 3px rgba(255, 90, 31, 0.9), 0 0 22px rgba(255, 90, 31, 0.45);
}
.paste-spray-handle::before,
.paste-spray-handle::after {
  content: '';
  position: absolute;
  top: 92%;
  width: 4px;
  border-radius: 0 0 3px 3px;
  background: currentColor;
  transition: height 0.8s cubic-bezier(0.5, 0, 0.3, 1);
}
.paste-spray-handle::before { left: 18%; height: 22px; }
.paste-spray-handle::after { left: 71%; height: 12px; }
.paste-spray:hover { color: #ff7a45; transform: rotate(-2.5deg) scale(1.04); }
.paste-spray:hover .paste-spray-handle::before { height: 40px; }
.paste-spray:hover .paste-spray-handle::after { height: 26px; }

/* Pasted paper strip */
.paste-strip-wrap {
  display: inline-block;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
  transform: rotate(1.3deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.paste-strip-wrap:hover { transform: rotate(0deg) scale(1.03); }
.paste-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 3rem;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #121212;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.07) 36%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0) 80%),
    #ece6d8;
  clip-path: polygon(1.2% 6%, 4% 0, 30% 3%, 62% 0, 97% 4%, 100% 0, 98.6% 50%, 100% 100%, 70% 96%, 38% 100%, 3% 95%, 0 100%, 1.5% 52%);
}
.paste-strip span { color: var(--color-orange); }
.paste-strip .icon { color: var(--color-orange); }

/* Rows of prints */
.paste-row { position: relative; z-index: 1; padding: 2.6rem 0; }
.paste-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-left: 16px;
  animation: pasteScroll 120s linear infinite;
}
.paste-row-rev .paste-track { animation-direction: reverse; animation-duration: 130s; }
.paste-row:hover .paste-track { animation-play-state: paused; }
@keyframes pasteScroll {
  to { transform: translateX(-50%); }
}
.paste-item {
  --r: -2deg;
  --y: 0px;
  position: relative;
  flex: none;
  margin: 0 0 0 -16px;
  padding: 9px;
  background: #f3efe6;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
  transform: translateY(var(--y)) rotate(var(--r));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.paste-item img {
  display: block;
  height: 280px;
  width: auto;
  background: #2a2a2d; /* dark placeholder while the photo lazy-loads */
  filter: contrast(1.05) saturate(1.06);
}
/* Wheat-paste wrinkles */
.paste-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0) 52%),
    linear-gradient(24deg, rgba(0, 0, 0, 0) 58%, rgba(255, 255, 255, 0.1) 63%, rgba(0, 0, 0, 0) 68%);
}
.paste-item:nth-child(5n+1) { --r: -3deg;   --y: -12px; }
.paste-item:nth-child(5n+2) { --r: 2.2deg;  --y: 14px; }
.paste-item:nth-child(5n+3) { --r: -1.2deg; --y: -4px; }
.paste-item:nth-child(5n+4) { --r: 3.4deg;  --y: 9px; }
.paste-item:nth-child(5n)   { --r: -2.4deg; --y: -16px; }
/* Some prints are full-bleed posters with torn edges (patterns repeat every 10 so the loop is seamless) */
.paste-item:nth-child(10n+4),
.paste-item:nth-child(10n+8) {
  padding: 0;
  background: none;
  clip-path: polygon(0 2%, 8% 0, 30% 1.5%, 55% 0, 80% 2%, 100% 0, 99% 30%, 100% 65%, 98.5% 100%, 75% 98%, 50% 100%, 22% 97.5%, 0 100%, 1.2% 60%);
}
/* Some are polaroid-style */
.paste-item:nth-child(10n+2),
.paste-item:nth-child(10n+6) { padding-bottom: 38px; }
.paste-item:hover {
  z-index: 5;
  transform: translateY(0) rotate(0deg) scale(1.08);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.7);
}

/* Stickers */
.sticker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
.sticker-round {
  top: -16px;
  right: -14px;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #fff;
  background: var(--color-orange);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 3px 6px rgba(0, 0, 0, 0.35);
  transform: rotate(14deg);
}
.sticker-round-alt {
  top: auto;
  bottom: -18px;
  right: auto;
  left: -12px;
  color: var(--color-orange);
  background: #f4f1ec;
  box-shadow: inset 0 0 0 3px var(--color-orange), 0 3px 6px rgba(0, 0, 0, 0.35);
  transform: rotate(-12deg);
}
.sticker-hot {
  top: 14px;
  left: -14px;
  padding: 0.45rem 0.8rem;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: #ff5a1f;
  background: #111;
  clip-path: polygon(0 0, 100% 6%, 96% 100%, 4% 92%);
  transform: rotate(-9deg);
  box-shadow: none;
}
.sticker-tag {
  bottom: 18px;
  right: -20px;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
  color: #fff;
  background: #111;
  border: 2px solid #f4f1ec;
  transform: rotate(-6deg);
}
.sticker-paper {
  top: -12px;
  left: 50%;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 4px;
  color: #111;
  background: #e9e2d2;
  transform: translateX(-50%) rotate(4deg);
}

/* Allergen title (was h4) */
.allergen-box .allergen-title {
  font-size: 1.05rem;
  text-transform: none;
  font-weight: 700;
}

/* FIND US — KAI's shop front at night: brick wall, spray paint, street sign, neon */
.find-section {
  position: relative;
  overflow: hidden;
  padding: 8rem 0 9rem;
  background-color: #141416;
  background-image:
    linear-gradient(180deg, #0c0c0c 0%, rgba(12, 12, 12, 0) 18%, rgba(12, 12, 12, 0) 80%, #0a0a0b 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(8, 8, 9, 0.85) 100%),
    radial-gradient(65% 75% at 80% 38%, rgba(255, 106, 43, 0.1), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Crect width='128' height='64' fill='%23151517'/%3E%3Crect x='66' y='2' width='60' height='29' fill='%23171719'/%3E%3Crect x='34' y='34' width='62' height='29' fill='%23131315'/%3E%3Crect x='2' y='34' width='30' height='29' fill='%23161618'/%3E%3Cpath d='M0 1H128M0 33H128M1 0V33M65 0V33M33 33V64M97 33V64' stroke='%230c0c0d' stroke-width='2.5'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 128px 64px;
}
.find-fx { position: absolute; width: 0; height: 0; }

/* Overhead cables, catching a little neon light */
.find-cables {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
}
.find-cables path { fill: none; stroke: #060607; stroke-width: 3; vector-effect: non-scaling-stroke; }
.find-cables .find-cable-lit { stroke: rgba(255, 140, 70, 0.22); stroke-width: 1; transform: translateY(-1px); }

.find-inner {
  position: relative;
  z-index: 0;
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  grid-template-areas:
    "wall   window"
    "poster window";
  gap: 0 5rem;
  align-items: center;
}
.find-wall { grid-area: wall; align-self: end; }
.find-poster { grid-area: poster; align-self: start; }
.neon-wall { grid-area: window; }

/* Spray-painted heading */
.find-title {
  position: relative;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 1px;
  margin: 0.2rem 0 3.2rem;
  color: #f4f1ec;
  cursor: default;
}
.find-title-text {
  display: block;
  filter: url(#spray-rough);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.22), 0 0 2px rgba(255, 255, 255, 0.5), 12px 0 44px rgba(255, 106, 43, 0.28);
}
.drip {
  position: absolute;
  top: 82%;
  width: 6px;
  height: 0;
  background: #f4f1ec;
  border-radius: 0 0 4px 4px;
  filter: url(#spray-rough);
  transition: height 1.6s cubic-bezier(0.5, 0, 0.3, 1);
}
.drip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 10px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: inherit;
  transform: translateX(-50%);
}
.drip:nth-of-type(2) { left: 9%; }
.drip:nth-of-type(3) { left: 51%; }
.drip:nth-of-type(4) { left: 86%; width: 5px; }
.find-title.active .drip:nth-of-type(2) { height: 34px; transition-delay: 0.6s; }
.find-title.active .drip:nth-of-type(3) { height: 52px; transition-delay: 0.9s; transition-duration: 2.2s; }
.find-title.active .drip:nth-of-type(4) { height: 22px; transition-delay: 1.2s; }

.find-swoosh {
  position: absolute;
  left: -2%;
  bottom: -1.9rem;
  width: 104%;
  height: 2.2rem;
  overflow: visible;
  filter: url(#spray-rough);
}
.swoosh-halo,
.swoosh-line {
  fill: none;
  stroke: #ff5a1f;
  stroke-linecap: round;
}
.swoosh-halo { stroke-width: 18; opacity: 0; transition: opacity 1s ease 0.9s; }
.swoosh-line {
  stroke: var(--color-orange);
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(0.6, 0, 0.2, 1) 0.4s;
}
.find-swoosh circle { fill: var(--color-orange); opacity: 0; transition: opacity 0.3s ease 1.3s; }
.find-title.active .swoosh-halo { opacity: 0.12; }
.find-title.active .swoosh-line { stroke-dashoffset: 0; }
.find-title.active .find-swoosh circle { opacity: 0.8; }

/* Street sign + house number, bolted to the wall */
.street-signs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 2.6rem;
}
.street-sign {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  transform: rotate(-1.2deg);
  transform-origin: 20% 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 106, 43, 0.14));
}
.street-sign:hover { transform: rotate(-3.5deg); }
.street-sign-plate,
.street-sign-number {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.85rem 1.8rem 0.75rem;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px currentColor, inset 0 0 0 5px rgba(0, 0, 0, 0.25);
}
/* Screws */
.street-sign-plate::before,
.street-sign-plate::after,
.street-sign-number::before,
.street-sign-number::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9d9d9, #6b6b6b 60%, #3a3a3a);
  transform: translateY(-50%);
}
.street-sign-plate::before,
.street-sign-number::before { left: 0.6rem; }
.street-sign-plate::after,
.street-sign-number::after { right: 0.6rem; }
.street-sign-plate {
  color: #f4f1ec;
  background:
    linear-gradient(90deg, rgba(255, 120, 50, 0) 55%, rgba(255, 120, 50, 0.1) 100%),
    linear-gradient(170deg, #1d1d22 0%, #0f0f12 100%);
}
.street-sign-name {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.street-sign-city {
  margin-top: 0.35rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #9a9aa2;
}
.street-sign-number {
  align-items: center;
  min-width: 5.2rem;
  color: #fff;
  background: linear-gradient(170deg, #c93500 0%, var(--color-orange) 100%);
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}
.arrow-sign {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.3rem 0.6rem 1rem;
  margin-left: 0.4rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f6ece3;
  text-shadow: 0 0 10px rgba(255, 140, 70, 0.35);
  background: rgba(12, 12, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 106, 43, 0.1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.arrow-sign:hover { transform: translateX(-6px); }
.arrow-neon {
  flex: none;
  width: 2.6rem;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 2px #ff6a2b) drop-shadow(0 0 8px #ff6a2b);
}
.arrow-neon path { fill: none; stroke: #ffd9c4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js .street-signs .arrow-neon { opacity: 0.12; }
.street-signs.active .arrow-neon { animation: npOn 1.2s steps(1) 0.6s both, npHum 7s 2.2s infinite; }

.find-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.find-actions .btn-street .icon { transition: transform 0.3s ease; }
.find-actions .btn-street:hover .icon { transform: rotate(-45deg); }

.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 1.4rem;
  font: 600 0.85rem var(--font-primary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #d6d6d6;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.btn-copy:hover { border-color: #fff; color: #fff; }
.btn-copy[hidden] { display: none; }
.btn-copy .icon-check { display: none; }
.btn-copy.is-copied { border-color: #3ddc84; color: #3ddc84; background: rgba(61, 220, 132, 0.08); }
.btn-copy.is-copied .icon-copy { display: none; }
.btn-copy.is-copied .icon-check { display: inline-block; animation: findPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes findPop {
  from { transform: scale(0.3); }
  to   { transform: scale(1); }
}

/* Wheat-pasted poster */
.find-poster {
  position: relative;
  max-width: 400px;
  margin-top: 3.5rem;
  padding: 1.8rem 1.8rem 2.4rem;
  color: #141414;
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.06) 47%, rgba(0, 0, 0, 0) 54%),
    linear-gradient(170deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 72%),
    #ebe5d8;
  clip-path: polygon(0 1%, 22% 0, 48% 1.5%, 75% 0, 100% 1%, 99.5% 30%, 100% 62%, 99% 100%, 88% 97.5%, 76% 100%, 63% 97%, 51% 99.5%, 38% 97%, 25% 100%, 13% 97.5%, 0 99.5%, 0.8% 60%);
  transform: rotate(1.6deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.js .find-poster.active { transform: rotate(1.6deg); }
.find-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(10, 8, 12, 0.34) 0%, rgba(10, 8, 12, 0.1) 45%, rgba(255, 120, 45, 0.13) 100%);
}
.poster-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-orange);
}
.poster-title {
  margin: 0.2rem 0 0.6rem;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}
.poster-text {
  max-width: 290px;
  font-size: 1rem;
  line-height: 1.55;
  color: #3a3a3a;
}
.poster-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 0.8rem 1.5rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #141414;
  transition: background 0.25s ease, transform 0.25s ease;
}
.poster-btn:hover { background: var(--color-orange); transform: translateY(-2px); }
.poster-sticker {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-orange);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 3px 6px rgba(0, 0, 0, 0.25);
  transform: rotate(12deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.find-poster:hover .poster-sticker { transform: rotate(-8deg) scale(1.06); }

/* Asian neon: tube-drawn signs on the brick wall (OPEN/CLOSED, noodle bowl, vertical カイ board) */
.neon-wall {
  --jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  position: relative;
}
/* Coloured light on the bricks */
.neon-wall::before {
  content: '';
  position: absolute;
  inset: -20% -18% 10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 35% 30%, var(--spill-a, rgba(255, 106, 43, 0.15)), transparent 70%),
    radial-gradient(35% 45% at 85% 40%, var(--spill-b, rgba(255, 110, 40, 0.16)), transparent 70%),
    radial-gradient(30% 25% at 30% 70%, var(--spill-c, rgba(255, 110, 40, 0.1)), transparent 70%);
  opacity: 0;
  transition: opacity 1.4s ease 0.8s;
}
.neon-wall[data-state="closed"] { --spill-b: rgba(255, 110, 40, 0.12); --spill-c: rgba(60, 232, 255, 0.1); }
.neon-wall.active::before { opacity: 1; }

.neon-signs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "open vert"
    "bowl vert";
  column-gap: 1.6rem;
  row-gap: 0.8rem;
  align-items: center;
}
.nz { display: block; overflow: visible; }
.nz-open { grid-area: open; width: 100%; height: auto; }
.nz-bowl { grid-area: bowl; justify-self: center; width: 42%; height: auto; }

/* Vertical board on a wall bracket */
.nz-vbox {
  grid-area: vert;
  position: relative;
  align-self: start;
  width: 118px;
  margin-top: 26px;
  padding: 6px;
  background: linear-gradient(180deg, #121216, #0a0a0c);
  border: 3px solid #26262b;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.nz-vbox::before { /* bracket arm into the wall */
  content: '';
  position: absolute;
  top: -22px;
  left: 30%;
  right: -34px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5a5a62, #2a2a2f);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}
.nz-vbox::after { /* two hanging rods + wall plate */
  content: '';
  position: absolute;
  top: -18px;
  left: 30%;
  right: 22%;
  height: 18px;
  border-left: 3px solid #3a3a40;
  border-right: 3px solid #3a3a40;
}
.nz-vert { width: 100%; height: auto; }

.nz-backing { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.08); stroke-width: 1.5; }
.nz-screw { fill: #6a6a72; }

/* Tubes */
.nz use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.np-orange { --c: #ff6a2b; }
.np-amber  { --c: #ffb04a; }
.np-cyan   { --c: #3be8ff; }
.np-red    { --c: #ff2d4a; }
.np-steam  { --c: #f4f1ec; }
.np-off use  { stroke: rgba(255, 255, 255, 0.09); stroke-width: 4.5; }
.np-tube use { stroke: var(--c); stroke-width: 4.5; }
.np-core use { stroke: #fff6f0; stroke-width: 1.5; }
.np-on {
  opacity: 0;
  filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 9px var(--c));
}
.nz-vert .np-off use,
.nz-vert .np-tube use { stroke-width: 4; }
/* Kanji are lit text, not tubes; the unlit pair stays invisible so only one set shows */
.np-kanji { font-family: var(--jp); font-size: 44px; font-weight: 400; } /* inherited into the <use> clones */
.np-kanji .np-off { display: none; }
.np-kanji .np-tube use { fill: var(--c); stroke: var(--c); stroke-width: 1.5; }
.np-kanji .np-core use { fill: #fff2f4; stroke: none; }
/* Steam has no visible glass; it flows upward */
.np-steam .np-off { display: none; }
.np-steam use { stroke-dasharray: 5 9; animation: npSteam 1.6s linear infinite; }
.np-steam .np-tube use { stroke-width: 3; }
.np-steam .np-core use { stroke-width: 1; }
@keyframes npSteam { to { stroke-dashoffset: -28; } }

/* Turn-on sequence + states (data-state is set from the live Zagreb time) */
.neon-wall.active .np-brand .np-on { animation: npOn 1.2s steps(1) 0.3s both, npHum 7s 2s infinite; }
.neon-wall.active .np-brand.np-broken .np-on { animation: npOn 1.2s steps(1) 0.45s both, npBroken 5.5s 3s infinite; }
.neon-wall.active .np-frame .np-on { animation: npOn 1s steps(1) 0.8s both, npHum 9s 2.4s infinite; }
.neon-wall.active:not([data-state="closed"]) .np-open .np-on { animation: npOn 1.3s steps(1) 1.1s both, npHum 6s 2.6s infinite; }
.neon-wall.active[data-state="closed"] .np-closed .np-on { animation: npOn 1.3s steps(1) 1.1s both, npHum 8s 2.6s infinite; }
.neon-wall.active[data-state="open"] .np-bowl .np-on { animation: npOn 1s steps(1) 1.7s both, npHum 8s 3.2s infinite; }
.neon-wall.active[data-state="open"] .np-steam .np-on { animation: npOn 0.6s steps(1) 2.3s both; }
.nz-open:hover .np-on { animation-name: npBuzz, npHum; animation-duration: 0.5s, 6s; animation-delay: 0s, 0.5s; animation-iteration-count: 1, infinite; }
@keyframes npOn {
  0%, 12%, 26%, 44% { opacity: 0.1; }
  8%, 20%, 34%, 60%, 100% { opacity: 1; }
}
@keyframes npHum {
  0%, 41%, 43%, 77%, 78.5%, 100% { opacity: 1; }
  42% { opacity: 0.6; }
  78% { opacity: 0.75; }
}
@keyframes npBroken {
  0%, 60%, 62%, 64%, 67%, 100% { opacity: 1; }
  61%, 63% { opacity: 0.15; }
  65%, 66% { opacity: 0.35; }
}
@keyframes npBuzz {
  0%, 30%, 60% { opacity: 0.35; }
  15%, 45%, 100% { opacity: 1; }
}

/* Backlit hours panel */
.neon-plate {
  margin-top: 2.4rem;
  padding: 1.6rem 2rem 1.5rem;
  text-align: center;
  color: rgba(244, 241, 236, 0.92);
  background: linear-gradient(180deg, rgba(18, 16, 22, 0.92), rgba(10, 10, 12, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 0 #ff6a2b, 0 -2px 14px rgba(255, 106, 43, 0.35), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.neon-plate-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.8rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 6px;
  margin-bottom: 0.8rem;
  color: inherit;
}
.neon-plate-jp {
  font-family: var(--jp);
  font-size: 1rem;
  letter-spacing: 3px;
  color: #ffe9ee;
  text-shadow: 0 0 4px #ff2d4a, 0 0 12px #ff2d4a;
}
.neon-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6e6e6;
}
.neon-wall[data-state="open"] .status-dot { background: #3ddc84; animation: statusPulse 2s infinite; }
.neon-wall[data-state="late"] .status-dot { background: #f5a524; }
.neon-wall[data-state="closed"] .status-dot { background: #e5484d; }
.neon-hours {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.neon-hours th,
.neon-hours td {
  padding: 0.7rem 0;
  font-weight: 400;
  border-bottom: 1px solid rgba(244, 241, 236, 0.12);
}
.neon-hours th { text-align: left; font-size: 0.95rem; }
.neon-hours td { text-align: right; font-size: 1.15rem; white-space: nowrap; padding-left: 1rem; }
.neon-hours tr.is-closed { color: rgba(244, 241, 236, 0.4); }
.neon-hours tr.is-today th::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: #ff6a2b;
  box-shadow: 0 0 8px #ff6a2b;
  vertical-align: 0.12em;
}
.neon-hours tr.is-today { color: #fff; }
.neon-note {
  margin-top: 0.9rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}

/* Footer extras */
/* The street photo loads only as the footer comes near (script.js adds .bg-in) */
.js .street-footer:not(.bg-in) { background-image: none; }
.footer-info {
  text-align: center;
  color: #ccc;
  line-height: 1.8;
  letter-spacing: 0.5px;
}
.footer-bottom { margin-top: 2rem; }
.copyright-text {
  font-size: 0.9rem;
  color: #999;
  font-weight: 500;
}
/* Footer social buttons: solid slanted fills (the slanted clip-path sliced a border apart) */
.insta-btn,
.ta-btn {
  border: 0;
  padding: 0.85rem 2.1rem;
}
.insta-btn { background: var(--color-orange); }
.insta-btn:hover { background: #c93500; transform: translateY(-3px); box-shadow: none; }
.ta-btn { background: #f4f1ec; color: #141414; }
.ta-btn .icon { color: var(--color-orange); }
.ta-btn:hover { background: #fff; color: #141414; transform: translateY(-3px); box-shadow: none; }

/* Reduced motion: keep everything visible, stop moving parts */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .paste-track { animation: none !important; }
  .np-steam use { animation: none !important; }
  .paste-row { overflow-x: auto; }
}

/* ================= MOBILE ================= */
@media (max-width: 900px) {
  /* Nav: logo + hamburger + full-screen menu */
  .navbar,
  .navbar.scrolled {
    width: 100%;
    padding: 0.75rem 1.25rem;
    justify-content: space-between;
  }
  .navbar.nav-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-logo {
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .nav-logo img { width: 44px; height: 44px; display: block; }
  .navbar.scrolled .nav-logo,
  .navbar.nav-open .nav-logo { opacity: 1; pointer-events: auto; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0 12px;
    margin-left: auto;
    position: relative;
    z-index: 2;
    background: rgba(15, 16, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: rgba(12, 12, 14, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .navbar.nav-open .nav-links { opacity: 1; visibility: visible; }
  .nav-links .nav-box {
    font-family: 'Oswald', sans-serif;
    font-size: 1.7rem;
    letter-spacing: 3px;
    padding: 0.8rem 2.2rem;
    opacity: 1;
    animation: none;
  }

  /* Hero */
  .hero {
    flex-direction: column;
    min-height: auto;
    background-image: linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.72) 55%, rgba(10, 10, 12, 0.85) 100%), url("assets/img/hero-mobile.webp");
  }
  .hero::before { display: none; }
  .hero-left,
  .hero-right { width: 100%; min-height: 0; }
  .hero-left { padding: 6rem 1.25rem 2.5rem; }
  .hero-right { padding: 0 1.25rem 4rem; overflow: visible; }
  .hero-content { padding-top: 0; }
  .hero-logo { max-width: 150px; }
  .deco-circle { display: none; }

  .hero-features {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: none;
    margin-bottom: 2rem;
  }
  .feature-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    align-items: center;
    padding: 0.75rem 1rem;
  }
  .feature-item .icon {
    grid-row: span 2;
    font-size: 1.3rem;
    margin: 0;
  }
  .feature-label { margin: 0; }
  .hero-actions { gap: 1rem; }

  .game-preview-container {
    width: 100%;
    background-image: url('assets/img/game-poster-mobile-v2.webp');
  }
  .game-preview-overlay { background: rgba(0, 0, 0, 0.35); }
  .game-preview-overlay .btn { opacity: 1; transform: none; }
  .game-preview-container:hover { transform: none; }

  /* Sections */
  section,
  .about,
  .real-menu,
  .find-section { padding: 5rem 0; }
  .container { padding: 0 1.25rem; }

  .about { background-size: cover; background-position: center; }
  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-photo-img { height: 320px; transform: none !important; }

  #menu .section-title { font-size: clamp(3.5rem, 18vw, 5.5rem); }
  .menu-grid-new { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; }
  .menu-block:hover { transform: none; }
  .menu-header h3 { font-size: 1.35rem; }
  .sides-title { margin-top: 4rem; }
  .sides-grid { grid-template-columns: 1fr; }
  .side-item { font-size: 1rem; }
  .side-item:hover { transform: none; }
  .allergen-box { padding: 1.5rem; margin-top: 3.5rem; }

  /* Game: title above, poster below */
  .game-section { padding: 0; }
  .game-play-area { aspect-ratio: auto; }
  .game-title-overlay {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 3.5rem 1.25rem 1.5rem;
    background: none;
  }
  .game-title-overlay .section-title { font-size: 2rem; text-align: left; }
  .game-iframe-container { position: relative; aspect-ratio: 3 / 2; }
  .game-launch-play { width: 72px; height: 72px; font-size: 1.6rem; }
  .game-launch-hint { font-size: 0.9rem; }

  /* Game coming soon */
  .soon-sign { padding: 1rem 1.4rem 0.9rem; gap: 0.5rem; border-radius: 12px; }
  .soon-kicker { font-size: 0.66rem; letter-spacing: 3px; }
  .soon-neon { font-size: 1.7rem; }
  .game-soon { padding: 4.5rem 0; }
  .game-soon-inner { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .game-soon-title { font-size: 2.2rem; margin-bottom: 1rem; }
  .game-soon-text p { font-size: 1rem; margin-bottom: 1.6rem; }

  /* Gallery: paste-up wall */
  .paste-wall { padding: 4rem 0 4.5rem; }
  .paste-spray { font-size: clamp(1.7rem, 9vw, 2.6rem); letter-spacing: 1px; }
  .paste-spray small { letter-spacing: 0.25em; font-size: 0.38em; }
  .paste-strip { padding: 0.85rem 1.5rem; font-size: 0.85rem; letter-spacing: 2px; }
  .paste-row { padding: 2rem 0; }
  .paste-item img { height: 190px; }
  .paste-item { padding: 7px; margin-left: -12px; }
  .paste-item:nth-child(10n+2),
  .paste-item:nth-child(10n+6) { padding-bottom: 28px; }
  .sticker-round { width: 3.3rem; height: 3.3rem; font-size: 0.9rem; }
  .sticker-hot { font-size: 1rem; }
  .sticker-tag { font-size: 0.68rem; }

  /* Find us */
  .find-section { padding: 5.5rem 0 6rem; background-size: 100% 100%, 100% 100%, 96px 48px; }
  .find-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "wall" "window" "poster";
    gap: 3.5rem;
  }
  .find-title { font-size: clamp(4rem, 21vw, 6rem); margin-bottom: 2.8rem; }
  .street-signs { margin-bottom: 2.2rem; }
  .street-sign:hover { transform: rotate(-1.2deg); }
  .street-sign-plate,
  .street-sign-number { padding: 0.7rem 1.4rem 0.6rem; }
  .street-sign-name { font-size: 1.65rem; letter-spacing: 2px; }
  .street-sign-city { font-size: 0.62rem; letter-spacing: 4px; }
  .street-sign-number { min-width: 4.2rem; font-size: 2rem; }
  .arrow-sign { font-size: 0.7rem; letter-spacing: 1px; gap: 0.6rem; padding: 0.5rem 0.9rem 0.5rem 0.75rem; }
  .arrow-sign:hover { transform: none; }
  .arrow-neon { width: 1.9rem; }
  .find-cables { height: 110px; }
  .find-actions { gap: 0.75rem; }
  .find-actions > * { flex: 1 1 100%; justify-content: center; }
  .find-actions .btn-street { padding: 1rem 1.8rem; font-size: 1rem; }
  .btn-copy { padding: 0.95rem 1.1rem; }

  .neon-signs { column-gap: 0.9rem; row-gap: 0.4rem; }
  .nz-vbox { width: 72px; margin-top: 20px; padding: 4px; border-width: 2px; }
  .nz-vbox::before { right: -24px; top: -16px; height: 5px; }
  .nz-vbox::after { top: -12px; height: 12px; }
  .nz-bowl { width: 46%; }
  .neon-plate { margin-top: 1.8rem; padding: 1.3rem 1rem 1.2rem; }
  .neon-plate-title { font-size: 0.9rem; letter-spacing: 4px; }
  .neon-status { font-size: 0.85rem; }
  .neon-hours th { font-size: 0.8rem; letter-spacing: 1px; }
  .neon-hours td { font-size: 1rem; letter-spacing: 1px; }
  .neon-note { font-size: 0.75rem; letter-spacing: 2px; }

  .find-poster { max-width: none; margin: 0 0.4rem; padding: 1.6rem 1.4rem 2.2rem; }
  .poster-sticker { width: 3.8rem; height: 3.8rem; font-size: 0.9rem; }

  /* Footer (fixed backgrounds jank on iOS) */
  .street-footer { background-attachment: scroll; }
  .footer-inner { padding: 4rem 1.25rem 2.5rem; }
  .footer-graffiti { font-size: 9rem; }
  .footer-big-logo { max-width: 180px; }
  .footer-tagline p { font-size: 1.1rem; letter-spacing: 2px; text-align: center; }
  .footer-links { flex-direction: column; align-items: center; gap: 0.9rem; }
  .footer-social-btn { min-width: 220px; justify-content: center; }
}