/* ============================================
   TROISIÈME ŒEIL — Stylesheet v2.0
   DA : éditorial noir/gris, fond abstrait, grain cinéma
   ============================================ */

/* ── Variables ── */
:root {
  --bg:      #070707;
  --bg-1:    #0b0b0b;
  --bg-card: #111111;
  --bg-card2:#191919;
  --white:   #ffffff;
  --g1:      #e4e4e4;
  --g2:      #8a8a8a;
  --g3:      #565656;
  --g4:      #303030;
  --border:  rgba(255,255,255,.07);
  --fh:      'Bebas Neue', sans-serif;
  --fm:      'Space Mono', monospace;
  --nav-h:   58px;
  --tr:      0.28s ease;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--bg);
  color: var(--g1);
  font-family: var(--fm);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grain cinéma — overlay fixe très subtil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.055'/></svg>");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: overlay;
}

img { display:block; width:100%; height:100%; object-fit:cover; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }
button { font-family:var(--fm); cursor:pointer; border:none; background:none; }

/* ── Layout helpers ── */
.container      { max-width:1100px; margin:0 auto; padding:0 2rem; }
.container-wide { max-width:1440px; margin:0 auto; padding:0 2rem; }
.section        { padding:clamp(5rem,10vw,9rem) 0; position:relative; overflow:hidden; }

/* ── Section labels & titles ── */
.section-header { position:relative; z-index:1; margin-bottom:clamp(3rem,6vw,5rem); }
.section-label {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: .32em;
  color: var(--g3);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.section-title {
  font-family: var(--fh);
  font-size: clamp(3.5rem,8vw,7rem);
  letter-spacing: .04em;
  color: var(--white);
  line-height: .95;
}

/* Ghost section number */
.bg-num {
  position: absolute;
  top: -2rem; right: -1rem;
  font-family: var(--fh);
  font-size: clamp(8rem,22vw,20rem);
  color: rgba(255,255,255,.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Ligne dégradée réutilisable au-dessus des sections */
.apropos::before,
.galerie::before,
.contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 25%, rgba(255,255,255,.12) 75%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(2) { transition-delay:.1s; }
.reveal:nth-child(3) { transition-delay:.2s; }
.reveal:nth-child(4) { transition-delay:.3s; }

/* ════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════ */
.navbar {
  position: fixed; top:0; left:0; right:0;
  z-index: 1000; height:var(--nav-h);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 2rem;
  background: rgba(7,7,7,.80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background var(--tr);
  will-change: background;
}
@media (max-width:600px) {
  .navbar { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
}
.navbar.scrolled { background:rgba(7,7,7,.97); }

.nav-logo {
  display: flex; align-items: center;
  flex-shrink: 0;
  transition: opacity var(--tr);
}
.nav-logo:hover { opacity: .7; }
.nav-logo-img {
  width: auto;
  height: 38px;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: screen;
  display: block;
}

.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a {
  font-family: var(--fm);
  font-size: .72rem; letter-spacing:.15em;
  color: var(--g3); text-transform:uppercase;
  transition: color var(--tr);
}
.nav-links a:hover,
.nav-links a.active { color:var(--white); }

.nav-right { display:flex; align-items:center; gap:1.25rem; flex-shrink:0; }
.lang-toggle { display:flex; align-items:center; gap:.3rem; }
.lang-sep    { color:var(--g4); font-size:.72rem; }
.lang-btn {
  font-family:var(--fm); font-size:.72rem; letter-spacing:.06em;
  color:var(--g3); transition:color var(--tr); padding:.2rem 0;
}
.lang-btn.active { color:var(--white); }
.lang-btn:hover  { color:var(--g1); }

.burger { display:none; flex-direction:column; gap:5px; padding:4px; }
.burger span {
  display:block; width:22px; height:1.5px;
  background:var(--white);
  transition:transform var(--tr),opacity var(--tr);
}

/* ════════════════════════════════════════════
   HERO — fond abstrait : blobs gris + dot grid
   ════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  padding-top: var(--nav-h);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 75% 55% at 10% 90%,  rgba(85,85,85,.14) 0%, transparent 52%),
    radial-gradient(ellipse 60% 65% at 90% 8%,   rgba(65,65,65,.11) 0%, transparent 50%),
    radial-gradient(ellipse 42% 40% at 56% 54%,  rgba(48,48,48,.07) 0%, transparent 62%),
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 28px 28px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

.hero-content {
  text-align:center; padding:0 1rem;
  position:relative;
}

.hero-eyebrow {
  font-family:var(--fm); font-size:.68rem; letter-spacing:.35em;
  color:var(--g3); text-transform:uppercase; margin-bottom:1.5rem;
}

.hero-mascot {
  width: clamp(260px, 48vw, 560px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: invert(1);
  mix-blend-mode: screen;
  cursor: pointer;
  user-select: none;
  transition: opacity var(--tr), transform .4s ease;
  -webkit-user-drag: none;
}
.hero-mascot:hover { opacity: .82; transform: scale(1.03); }

.hero-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: .9rem;
  cursor: pointer;
  user-select: none;
  animation: hint-breathe 3.2s ease-in-out infinite;
  transition: opacity var(--tr);
}
.hero-hint span {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--g4);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Stop breathing and freeze visible when a step is active */
.hero-hint[data-step] {
  animation: none;
  opacity: 1;
}
/* Step 1: premier dot s'allume */
.hero-hint[data-step="1"] span:nth-child(1) {
  background: var(--g2);
  transform: scale(1.7);
  box-shadow: 0 0 5px var(--g2);
}
/* Step 2: deux dots s'allument */
.hero-hint[data-step="2"] span:nth-child(1),
.hero-hint[data-step="2"] span:nth-child(2) {
  background: var(--g1);
  transform: scale(1.9);
  box-shadow: 0 0 8px var(--g1);
}
@keyframes hint-breathe {
  0%, 100% { opacity: .22; }
  50%       { opacity: .52; }
}

.hero-rule {
  width:clamp(60px,12vw,120px); height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin:1.8rem auto 1.4rem;
}

.hero-desc {
  font-family:var(--fm); font-size:.72rem;
  letter-spacing:.2em; color:var(--g3); text-transform:uppercase;
}

.hero-scroll {
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  color:var(--g4);
  animation:bob 2s ease-in-out infinite;
  transition:color var(--tr);
}
.hero-scroll:hover { color:var(--g2); }
@keyframes bob {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(5px); }
}

/* ════════════════════════════════════════════
   À PROPOS — layout éditorial
   ════════════════════════════════════════════ */
.apropos {
  background-color: var(--bg-1);
  background-image:
    linear-gradient(138deg, rgba(42,42,42,.20) 0%, transparent 48%),
    radial-gradient(ellipse 80% 55% at 96% 92%, rgba(52,52,52,.14) 0%, transparent 52%);
}

.apropos-body { position:relative; z-index:1; }

.apropos-lead {
  font-family: var(--fh);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: .03em;
  text-align: justify;
  color: var(--g1);
  line-height: 1.18;
  max-width: 940px;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.apropos-lead::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: clamp(80px,20%,200px); height: 1px;
  background: rgba(255,255,255,.25);
}

.apropos-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.apropos-cols p {
  font-family: var(--fm);
  font-size: .85rem;
  line-height: 1.9;
  color: var(--g2);
}

/* Placeholders images galerie */
.img-ph    { background:var(--bg-card2); }
.img-ph-g1 { background:linear-gradient(135deg,#202020,#0e0e0e); }
.img-ph-g2 { background:linear-gradient(135deg,#1b1b1b,#111); }
.img-ph-g3 { background:linear-gradient(135deg,#1e1e1e,#0d0d0d); }
.img-ph-g4 { background:linear-gradient(135deg,#181818,#0a0a0a); }
.img-ph-g5 { background:linear-gradient(135deg,#1c1c1c,#0f0f0f); }
.img-ph-g6 { background:linear-gradient(135deg,#191919,#0c0c0c); }

/* ════════════════════════════════════════════
   GALERIE
   ════════════════════════════════════════════ */
.galerie {
  background-color: var(--bg-1);
  background-image:
    radial-gradient(ellipse 65% 70% at 95% 30%, rgba(50,50,50,.14) 0%, transparent 54%),
    linear-gradient(222deg, rgba(36,36,36,.12) 0%, transparent 44%);
}

.gallery-carousel {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--g4) transparent;
  margin: 0 -2rem;
  padding: 0 2rem .75rem;
  position: relative;
  z-index: 1;
}
.gallery-carousel::-webkit-scrollbar { height: 3px; }
.gallery-carousel::-webkit-scrollbar-thumb { background: var(--g4); border-radius: 2px; }

.gallery-item {
  flex-shrink: 0;
  width: clamp(220px, 36vw, 400px);
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--bg-card2);
  scroll-snap-align: start;
}
.gallery-item::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.06) 100%);
  opacity:0; transition:opacity var(--tr);
}
.gallery-item:hover::after { opacity:1; }
.gallery-item img { transition:transform .55s ease; }
.gallery-item:hover img { transform:scale(1.05); }

/* Lightbox */
.lightbox {
  display:none; position:fixed; inset:0;
  z-index:2000;
  background:rgba(4,4,4,.95);
  align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lb-content { max-width:90vw; max-height:90vh; overflow:hidden; }
.lb-content img { max-width:90vw; max-height:90vh; width:auto; height:auto; object-fit:contain; }
.lb-close,.lb-prev,.lb-next {
  position:absolute;
  background:rgba(255,255,255,.07); color:var(--white);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; cursor:pointer; transition:background var(--tr);
  border:1px solid var(--border);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover { background:rgba(255,255,255,.16); }
.lb-close { top:1.5rem; right:1.5rem; font-size:1rem; }
.lb-prev  { left:1.5rem; top:50%; transform:translateY(-50%); font-size:2rem; }
.lb-next  { right:1.5rem; top:50%; transform:translateY(-50%); font-size:2rem; }

/* ════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════ */
.contact {
  background-color: var(--bg);
  background-image:
    linear-gradient(222deg, rgba(44,44,44,.18) 0%, transparent 46%),
    radial-gradient(ellipse 55% 65% at 10% 92%, rgba(50,50,50,.14) 0%, transparent 54%);
}

.contact-inner {
  display:grid; grid-template-columns:1fr 280px;
  gap:4rem; align-items:start; position:relative; z-index:1;
}
.contact-form { width:100%; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-group:last-of-type { margin-bottom:0; }

label { font-family:var(--fm); font-size:.65rem; letter-spacing:.18em; color:var(--g3); }

input, textarea {
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.06);
  padding:.8rem 1rem; color:var(--white);
  font-family:var(--fm); font-size:.82rem;
  outline:none; resize:none; width:100%;
  border-radius:0; -webkit-appearance:none;
  transition:border-color var(--tr), background var(--tr);
}
input:focus, textarea:focus {
  border-color: rgba(255,255,255,.20);
  background: #131313;
}
input::placeholder, textarea::placeholder { color:rgba(255,255,255,.14); }

.btn-submit {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; padding:1rem;
  background: linear-gradient(135deg, var(--white) 0%, #e2e2e2 100%);
  color:var(--bg); font-family:var(--fm); font-size:.78rem;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  margin-top:1.25rem; transition:opacity var(--tr),transform var(--tr);
}
.btn-submit:hover         { opacity:.88; transform:translateY(-1px); }
.btn-submit:disabled      { opacity:.5; transform:none; cursor:default; }

.form-feedback {
  font-family:var(--fm); font-size:.72rem; letter-spacing:.1em;
  margin-top:.75rem; min-height:1.2em; color:var(--g2);
}
.form-feedback.ok  { color:#6fff6f; }
.form-feedback.err { color:#ff6f6f; }

.contact-aside { padding-top:.25rem; }
.contact-aside-label {
  font-family:var(--fm); font-size:.65rem; letter-spacing:.25em;
  color:var(--g3); margin-bottom:1.2rem;
}
.social-link {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--fm); font-size:.72rem; letter-spacing:.15em;
  color:var(--g3); text-transform:uppercase;
  border:1px solid rgba(255,255,255,.07);
  padding:.8rem 1rem;
  background: rgba(255,255,255,.015);
  transition:color var(--tr), border-color var(--tr), background var(--tr);
}
.social-link:hover { color:var(--white); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03); }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.footer {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 80% 55% at 50% 120%, rgba(42,42,42,.22) 0%, transparent 58%);
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 25%, rgba(255,255,255,.12) 75%, transparent 100%) 1;
  padding:2.5rem 2rem 1.5rem;
}
.footer-inner {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem;
}
.footer-brand { display:flex; align-items:center; gap:1rem; }
.footer-mascot {
  width: auto;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  filter: invert(1);
  mix-blend-mode: screen;
  display: block;
}
.footer-tagline { font-family:var(--fm); font-size:.62rem; letter-spacing:.18em; color:var(--g3); text-transform:uppercase; }
.footer-nav { display:flex; gap:1.75rem; flex-wrap:wrap; }
.footer-nav a {
  font-family:var(--fm); font-size:.7rem; letter-spacing:.12em;
  color:var(--g3); text-transform:uppercase; transition:color var(--tr);
}
.footer-nav a:hover { color:var(--white); }
.footer-ig { color:var(--g3); transition:color var(--tr); }
.footer-ig:hover { color:var(--white); }
.footer-copy {
  max-width:1100px; margin:0 auto;
  display:flex; gap:.5rem;
  font-family:var(--fm); font-size:.65rem; letter-spacing:.08em; color:var(--g4);
  border-top:1px solid var(--border); padding-top:1rem;
}

/* ════════════════════════════════════════════
   INSTAGRAM CAROUSEL
   ════════════════════════════════════════════ */
.insta-section {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
  margin-top: 3.5rem;
  position: relative; z-index: 1;
}
.insta-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 1.4rem;
  flex-wrap: wrap; gap: .75rem;
}
.insta-handle {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fm); font-size: .7rem; letter-spacing: .18em;
  color: var(--g2); text-transform: uppercase;
}
.insta-handle svg { flex-shrink: 0; }
.insta-follow {
  font-family: var(--fm); font-size: .68rem; letter-spacing: .18em;
  color: var(--g3); text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.09);
  padding: .4rem .9rem;
  transition: color var(--tr), border-color var(--tr);
}
.insta-follow:hover { color: var(--white); border-color: rgba(255,255,255,.22); }

.insta-carousel {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--g4) transparent;
  padding-bottom: .5rem;
  margin: 0 -2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.insta-carousel::-webkit-scrollbar { height: 3px; }
.insta-carousel::-webkit-scrollbar-thumb { background: var(--g4); border-radius: 2px; }

.insta-card {
  flex-shrink: 0;
  width: clamp(160px, 28vw, 240px);
  aspect-ratio: 1;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: var(--bg-card2);
  display: block;
}
.insta-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.insta-card:hover img { transform: scale(1.06); }
.insta-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  opacity: 0; transition: opacity var(--tr);
  display: flex; align-items: flex-end;
  padding: .7rem;
}
.insta-card:hover .insta-card-overlay { opacity: 1; }
.insta-card-overlay svg { color: var(--white); }

/* Placeholder cards (no image) */
.insta-card.img-ph { }

/* ════════════════════════════════════════════
   HIGH SCORES
   ════════════════════════════════════════════ */
.highscores {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 65% 55% at 8% 50%, rgba(42,42,42,.13) 0%, transparent 54%),
    linear-gradient(158deg, rgba(38,38,38,.10) 0%, transparent 48%);
}
.highscores::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 25%, rgba(255,255,255,.12) 75%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.hs-board {
  position: relative; z-index: 1;
  max-width: 560px;
}
.hs-row {
  display: flex; align-items: center;
  gap: 1.5rem;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.hs-row:first-child { border-top: 1px solid rgba(255,255,255,.04); }
.hs-rank {
  font-family: var(--fm);
  font-size: .62rem;
  color: var(--g4);
  letter-spacing: .15em;
  width: 2rem;
  flex-shrink: 0;
}
.hs-rank.gold   { color: #c9911a; }
.hs-rank.silver { color: #7a7a7a; }
.hs-rank.bronze { color: #7a4218; }
.hs-name {
  font-family: var(--fm);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--white);
  flex: 1;
}
.hs-score {
  font-family: var(--fh);
  font-size: 2rem;
  letter-spacing: .04em;
  color: var(--white);
  text-align: right;
}
.hs-row:first-child .hs-score { color: #c9911a; }
.hs-empty {
  font-family: var(--fm);
  font-size: .7rem;
  color: var(--g4);
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 3rem 0;
}

/* ════════════════════════════════════════════
   GAME OVERLAY
   ════════════════════════════════════════════ */
.game-overlay {
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(18,18,18,.98) 0%, rgba(4,4,4,.99) 100%);
  z-index:3000; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:1rem;
}
.game-overlay.open { display:flex; }

.game-close {
  position:absolute; top:1.25rem; right:1.5rem;
  font-family:var(--fm); font-size:.72rem; letter-spacing:.15em;
  color:var(--g3); transition:color var(--tr);
}
.game-close:hover { color:var(--white); }

.game-wrap { position:relative; width:min(900px,100vw); }

#game-canvas {
  display:block; width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#000;
  touch-action:none;        /* prevent pinch-zoom / scroll during gameplay */
}

.game-wrap #ni {
  position:absolute; left:50%; top:62%; transform:translate(-50%,-50%);
  width:96px; font-family:var(--fm); font-size:22px; font-weight:700;
  text-align:center; letter-spacing:.32em; text-transform:uppercase;
  background:transparent; color:#fff; border:none;
  border-bottom:2px solid rgba(255,255,255,.4); outline:none;
  display:none; caret-color:transparent; padding:4px 0; z-index:10;
}
.game-wrap #nb {
  position:absolute; left:50%; top:75%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-family:var(--fm); font-size:11px; font-weight:700;
  letter-spacing:.1em; padding:8px 18px; cursor:pointer; display:none; z-index:10;
}
.game-wrap #nd {
  position:absolute; left:50%; top:86%; transform:translate(-50%,-50%);
  background:none; border:none; color:rgba(255,255,255,.32);
  font-family:var(--fm); font-size:9px; letter-spacing:.12em;
  cursor:pointer; display:none; z-index:10; padding:6px 12px;
  text-transform:uppercase; transition:color .2s;
}
.game-wrap #nd:hover { color:rgba(255,255,255,.65); }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width:900px) {
  .contact-inner { grid-template-columns:1fr; gap:3rem; }
  .contact-aside { display:flex; align-items:center; gap:2rem; }
  .contact-aside-label { margin-bottom:0; }
}

@media (max-width:768px) {
  .navbar { padding:0 1.25rem; }

  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(7,7,7,.98);
    flex-direction:column; align-items:center; gap:0;
    padding:0; max-height:0; overflow:hidden;
    transition:max-height .4s ease, padding .4s ease;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open { max-height:400px; padding:1rem 0; }
  .nav-links li   { width:100%; text-align:center; }
  .nav-links a    { display:block; padding:.9rem 1rem; font-size:.82rem; }
  .burger         { display:flex; }

  .hero-mascot { width: clamp(200px, 68vw, 400px); }

  .apropos-cols { grid-template-columns:1fr; gap:1.5rem; }
  .drops-grid   { grid-template-columns:1fr; gap:1px; }
  .form-row     { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-nav   { gap:1rem; }
  .section      { padding:clamp(4rem,8vw,6rem) 0; }
}

@media (max-width:480px) {
  .contact-aside { flex-direction:column; align-items:flex-start; }
}