/* ============================================================
   TOKENS — colours taken 1:1 from the live ktklub.com
   ============================================================ */
:root{
  --ink:#0d0d0d;
  --panel:#141414;
  --card:#1a1a1a;
  --edge:#2a2620;
  --mat:#0d0d0d;          /* table surface — kept as dark as the body */

  --gold:#c9922a;
  --gold-lt:#e8b84b;
  --gold-dk:#a07020;

  --tx:#f0ede8;
  --tx-dim:#aaa49c;
  --tx-mut:#8b847c;

  --display:'Cinzel',Georgia,serif;
  --body:'Crimson Pro',Georgia,serif;
  --ui:'Barlow Condensed',Helvetica,sans-serif;

  --sheet:1440px;
  --pad:clamp(20px,4vw,64px);

  /* Space BETWEEN two page sections. Each section pays half of it top and
     bottom, so a pair always adds up to exactly this — no accidental doubling.
     A page that wants a tighter rhythm overrides --sec-gap on its own wrapper. */
  --sec-gap:clamp(48px,5.6vw,88px);
  --sec-gap-tight:clamp(12px,1.8vw,24px);   /* page header -> first section */
}

*,*::before,*::after{box-sizing:border-box}
/* color-scheme tells the browser this page is dark, so the canvas it paints
   BETWEEN documents is dark too — without it that frame is white, which is
   the flash you see when moving from page to page. The background belongs
   here as well as on body: html is what paints the canvas. */
html{background:var(--ink);color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  background:transparent;
  color:var(--tx);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:2px;
}

[id]{scroll-margin-top:24px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  font-family:var(--ui);letter-spacing:.2em;text-transform:uppercase;font-size:14px;
  background:var(--gold);color:var(--ink);padding:12px 20px;
}
.skip:focus{left:8px;top:8px}

.sheet{
  max-width:var(--sheet);
  margin:0 auto;
  padding-inline:var(--pad);
  position:relative;
}

/* --- shared type roles ------------------------------------ */
.eyebrow{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}
.datum{
  font-family:var(--ui);
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tx-mut);
}
.lead{
  font-size:20px;
  color:var(--tx-dim);
  max-width:46ch;
}
h2.hd{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px,4.4vw,54px);
  letter-spacing:-.02em;
  line-height:1.04;
  margin:0;
}

/* rotated label sitting in the outer margin of a section */
.rail{
  position:absolute;
  left:0;              /* sits in .sheet's gutter (abs box = padding box) */
  top:6px;
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--tx-mut);
  writing-mode:vertical-rl;
  white-space:nowrap;
}
.rail::after{
  content:"";
  display:block;
  width:1px;
  height:64px;
  margin:14px auto 0;
  background:linear-gradient(var(--edge),transparent);
}

/* --- tape-measure rule ------------------------------------
   the club measures ranges in inches; the rule reads as tape */
.tape{
  position:relative;
  height:22px;
  margin:0;
  background-image:
    linear-gradient(to right,var(--edge) 1px,transparent 1px),
    linear-gradient(to right,#221f1a 1px,transparent 1px);
  background-size:96px 12px,12px 6px;
  background-repeat:repeat-x;
  background-position:0 0,0 0;
  border-top:1px solid var(--edge);
}
.tape span{
  position:absolute;
  top:11px;
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--tx-mut);
  background:var(--ink);
  padding-right:14px;
}

/* ============================================================
   HEADER — deliberately off-balance: mark left, nav broken
   into two unequal rows on the right
   ============================================================ */
.top{
  position:relative;
  z-index:40;
  padding-top:22px;
  /* the logo used to sit flush on the bottom edge of the bar */
  padding-bottom:18px;
}
.top-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.mark{display:flex;align-items:center;gap:14px}
.mark img{width:52px;height:52px;border-radius:50%}
.mark .wordmark{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--tx);
}
.mark .wordmark em{display:block;color:var(--gold);font-style:normal}
.mark .tag{
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tx-mut);
  border-left:1px solid var(--edge);
  padding-left:14px;
  line-height:1.5;
  max-width:110px;
}
.nav{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.nav-row{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--ui);
  font-size:15px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tx-dim);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--tx);border-bottom-color:var(--gold)}
.nav a[aria-current]{color:var(--gold-lt);border-bottom-color:var(--gold-dk)}
.nav-row.sub a{font-size:13px;color:var(--tx-mut);letter-spacing:.2em}
.lang{display:flex;gap:8px;align-items:center}
.lang a{font-size:13px;letter-spacing:.14em}
.lang a.on{color:var(--gold-lt)}
.lang i{color:var(--edge);font-style:normal}

/* ============================================================
   HERO — editorial: big wordmark, systems row, bold hours
   ============================================================ */
.hero-ed{position:relative;padding:clamp(38px,6vw,92px) 0 clamp(48px,7vw,96px)}
.hero-ed .rule{height:3px;width:clamp(88px,12vw,150px);background:linear-gradient(90deg,var(--gold),transparent);margin:0 0 24px}
.hero-ed h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px,8vw,104px);
  line-height:.92;
  letter-spacing:-.04em;
  margin:14px 0 0;
  /* 16ch is 1087px at the top of the clamp — wider than the gap before the club
     mark (which starts 942px in), so a long title runs under it. Slovak did.
     The second cap is a share of the sheet, so it scales with the layout and
     only bites when a line would otherwise reach the mark; the Hungarian title
     tops out at 887px and is unaffected. */
  max-width:min(16ch, 68%);
}
.hero-ed h1 em{color:var(--gold);font-style:normal}
/* A longer club name gets a smaller size rather than more lines — four lines of
   display type is not a hero, it is a wall. The class is set in index.php from
   the name's character count. */
.hero-ed h1.is-mid{font-size:clamp(38px,6.8vw,88px)}
.hero-ed h1.is-long{font-size:clamp(34px,5.6vw,74px)}
.hero-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-top:clamp(24px,3vw,38px);
}
.hero-ed .lead{max-width:42ch;margin:0}
.hero-row .acts{margin-top:0;flex-shrink:0}
.systems{
  margin-top:clamp(28px,3.5vw,44px);padding-top:22px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
}
.systems span{font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.systems span.g{color:var(--gold-lt)}

/* prominent opening hours */
.hours-lbl{margin:clamp(30px,4vw,48px) 0 14px}
.hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.hours .slot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--panel);
  border:1px solid var(--edge);
  border-left:4px solid var(--gold);
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
}
.hours .slot .day{font-family:var(--ui);font-size:clamp(15px,1.6vw,18px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx)}
.hours .slot .day small{display:block;font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tx-mut);margin-top:4px}
.hours .slot .hrs{font-family:var(--display);font-size:clamp(24px,3.1vw,40px);font-weight:700;letter-spacing:-.01em;color:var(--gold-lt);white-space:nowrap}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{
  font-family:var(--ui);
  font-size:16px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:14px 30px;
  border:1px solid var(--gold-dk);
  color:var(--ink);
  background:var(--gold);
  transition:background .18s,transform .18s,color .18s;
}
.btn:hover{background:var(--gold-lt);transform:translateY(-2px)}
.btn.ghost{
  background:transparent;
  color:var(--tx);
  border-color:var(--edge);
}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,146,42,.06)}

/* ============================================================
   ABOUT — narrow off-centre column, photo overlapping in
   ============================================================ */
.about{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,84px)}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.about-photo{
  margin-top:clamp(0px,3vw,44px);
  transform:rotate(1deg);
  border:1px solid var(--edge);
  box-shadow:0 22px 48px rgba(0,0,0,.55);
}
.about-photo img{width:100%;height:clamp(220px,26vw,340px);object-fit:cover;filter:saturate(.8)}
.about-body{padding-top:6px}
.about-body p{margin:20px 0 0;color:var(--tx-dim);max-width:56ch}
.about-body p:first-of-type{color:var(--tx)}
.pull{
  margin:34px 0 0;
  padding:0 0 0 24px;
  border-left:2px solid var(--gold-dk);
  font-family:var(--body);
  font-style:italic;
  font-size:clamp(21px,2.4vw,29px);
  line-height:1.34;
  color:var(--tx);
  max-width:24ch;
}
.about-outro{text-align:center;margin-top:clamp(30px,4vw,52px)}
.about-outro .about-invite{border-left:none;padding-left:0;margin:0 auto;max-width:48ch}
.facts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(26px,6vw,80px);
  margin-top:clamp(30px,4vw,44px);
  padding-top:clamp(28px,3.5vw,38px);
  border-top:1px solid var(--edge);
}
.fact{text-align:center}
.fact .k{font-family:var(--display);font-size:clamp(36px,4.6vw,52px);font-weight:700;color:var(--gold-lt);line-height:1}
.fact .k.txt{font-size:clamp(24px,2.8vw,34px)}
.fact .v{font-family:var(--ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mut);margin-top:10px}

/* ============================================================
   CREW — who we are, big group photo
   ============================================================ */
.crew{position:relative;padding:clamp(56px,8vw,110px) 0}
.crew-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.crew-photo{
  position:relative;margin:0;
  transform:rotate(-1.1deg);
  border:1px solid var(--edge);
  box-shadow:0 26px 56px rgba(0,0,0,.55);
  background:var(--card);
}
.crew-photo img{width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.02)}
.crew-photo figcaption{
  font-family:var(--ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-mut);padding:11px 15px;border-top:1px solid var(--edge);
}
.crew-body h2{margin-top:8px}
.crew-body p{margin:20px 0 0;color:var(--tx-dim);max-width:52ch}
.crew-body p:first-of-type{color:var(--tx)}

/* ============================================================
   GAMES — hand-placed tiles: unequal spans, offsets, rotations
   ============================================================ */
.games{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px)}
.games-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(34px,4vw,58px);
}
.games-head .lead{margin:0;max-width:38ch}

.board{
  column-count:3;
  column-gap:clamp(14px,1.7vw,26px);
}
.tile{
  position:relative;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 clamp(14px,1.7vw,26px);
  width:100%;
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:10px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s;
  overflow:hidden;
}
.tile:hover,.tile:focus-within{
  transform:translateY(-8px);
  border-color:var(--gold-dk);
  box-shadow:0 24px 48px rgba(0,0,0,.6);
  z-index:3;
}
.tile img{
  width:100%;
  height:var(--h,190px);
  object-fit:cover;
  filter:saturate(.78) contrast(1.06) brightness(.86);
  transition:filter .28s;
}
.tile:hover img{filter:saturate(1) contrast(1.06) brightness(1)}
.tile .meta{padding:16px 20px 20px}
.tile .kind{
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
}
.tile h3{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.15;
  margin:6px 0 0;
  letter-spacing:-.01em;
}
.tile p{font-size:16px;color:var(--tx-dim);margin:8px 0 0;line-height:1.45}

/* the irregularity — each piece put down where it fits */
.tile.t1{grid-column:span 5;--h:300px;--rot:-.7deg}
.tile.t2{grid-column:span 4;--h:210px;--rot:.5deg;--off:22px}
.tile.t3{grid-column:span 3;--h:210px;--rot:-.4deg;--off:-10px}
.tile.t4{grid-column:span 4;--h:200px;--rot:.8deg;--off:-6px}
.tile.t5{grid-column:span 5;--h:250px;--rot:-.5deg;--off:26px}
.tile.t6{grid-column:span 3;--h:200px;--rot:.6deg}
.tile.t7{grid-column:span 4;--h:220px;--rot:-.6deg;--off:14px}
.tile.t8{grid-column:span 5;--h:200px;--rot:.4deg;--off:-8px}
.tile.t9{grid-column:span 3;--h:230px;--rot:-.9deg;--off:20px}

/* ============================================================
   VISIT — hours + reservation, wide and off-kilter
   ============================================================ */
.visit{
  position:relative;
  background:var(--panel);
  border-block:1px solid var(--edge);
  padding:clamp(52px,6vw,88px) 0;
}
.visit-head{max-width:640px}
.visit-head .hd{margin-top:10px}
.visit-panels{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:clamp(28px,4vw,46px);align-items:stretch}
.sched{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.sched-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(22px,3vw,34px) clamp(24px,3vw,36px)}
.sched-row+.sched-row{border-top:1px solid var(--edge)}
.sched-day{font-family:var(--ui);font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx);margin:0}
.sched-note{font-family:var(--body);font-size:clamp(16px,1.7vw,18px);color:var(--tx-dim);margin:7px 0 0}
.sched-hrs{font-family:var(--display);font-size:clamp(25px,2.7vw,36px);font-weight:700;color:var(--gold-lt);white-space:nowrap;margin:0}
.vcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:clamp(26px,3vw,34px)}
.vcard--cta{background:linear-gradient(158deg,#201e1a,#151310);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.vcard-k{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx);margin:0}
.vcard-k.gold{color:var(--gold)}
.vcard--cta h3{font-family:var(--display);font-size:clamp(23px,2.4vw,27px);font-weight:600;margin:8px 0 0;line-height:1.16;color:var(--tx)}
.vcard-txt{color:var(--tx-dim);font-size:16px;line-height:1.55;margin:12px 0 24px}
.vcard--cta .btn{align-self:flex-start;margin-top:auto}

/* ============================================================
   APP — the NEXUS Android app, phones fanned out by hand
   ============================================================ */
.app{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(60px,8vw,104px)}
.app-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.app-copy .lead{margin:20px 0 0}
.app-feats{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:48ch}
.app-feats li{position:relative;padding-left:28px;color:var(--tx-dim);font-size:17px}
.app-feats li::before{ /* small gold diamond pip */
  content:"";
  position:absolute;left:3px;top:.6em;
  width:9px;height:9px;
  background:var(--gold);
  transform:rotate(45deg);
}
.app .acts{margin-top:30px}
.app-note{font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mut);margin:16px 0 0}

.app-shots{position:relative;display:flex;justify-content:center;align-items:center}
.phone{
  flex:0 0 auto;
  width:clamp(150px,15.5vw,210px);
  border-radius:32px;
  border:1px solid var(--edge);
  background:#000;
  padding:7px;
  box-shadow:0 28px 58px rgba(0,0,0,.62);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
  overflow:hidden;
}
.phone img{width:100%;height:auto;display:block;border-radius:25px}
.phone.p1{transform:rotate(-7deg) translateY(16px);z-index:1;margin-right:-46px}
.phone.p2{transform:translateY(-6px) scale(1.06);z-index:3}
.phone.p3{transform:rotate(7deg) translateY(16px);z-index:1;margin-left:-46px}
.phone.p1:hover{transform:rotate(-4deg) translateY(4px);z-index:4}
.phone.p2:hover{transform:translateY(-14px) scale(1.07)}
.phone.p3:hover{transform:rotate(4deg) translateY(4px);z-index:4}

/* ============================================================
   EVENTS + CONTACT — two unequal columns, seam between them
   ============================================================ */
/* .foot-cols has no gutter of its own AND carries its own top padding, so the rail
   must drop past that padding to line up with the eyebrow (mini-title) like every other section */
.foot-cols .rail{left:calc(var(--pad) * -1);top:calc(clamp(56px,7vw,96px) + 6px)}
.foot-cols{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,76px);
  align-items:start;
}
/* headings here are secondary — smaller & matched so the two columns balance */
.foot-cols .hd{font-size:clamp(26px,3.3vw,40px);line-height:1.08}
.events p{color:var(--tx-dim);margin:18px 0 0;max-width:44ch}
.events .btn{display:inline-block;margin-top:28px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--edge);
  color:var(--tx-dim);
  transition:color .18s,border-color .18s,background .18s;
}
.chip svg{width:17px;height:17px;flex:0 0 auto}
.chip:hover{color:var(--gold-lt);border-color:var(--gold-dk);background:rgba(201,146,42,.06)}
.contact-map{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);transition:color .18s,gap .18s}
.contact-map:hover{color:var(--gold);gap:12px}

.contact{position:relative}
.contact::before{ /* the seam */
  content:"";
  position:absolute;
  left:clamp(-34px,-3vw,-18px);
  top:0;bottom:0;
  width:1px;
  background:linear-gradient(transparent,var(--edge) 18%,var(--edge) 82%,transparent);
}
.lines{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px;max-width:460px}
.lines li{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:16px;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--edge);
}
.lines .k{font-family:var(--ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-mut)}
.lines .v{font-size:18px;color:var(--tx)}
.lines a.v:hover{color:var(--gold-lt)}
.lines.compact{margin-top:18px}
.lines.compact li{padding:9px 0}
.lines.compact .v{font-size:16px}

/* contact form */
.cform{margin-top:24px;display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:grid;gap:6px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mut)}
.cform input,.cform textarea{
  font-family:var(--body);font-size:16px;text-transform:none;color:var(--tx);
  background:var(--card);border:1px solid var(--edge);border-radius:7px;
  padding:12px 14px;width:100%;
  transition:border-color .18s;
}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--gold)}
.cform textarea{resize:vertical;min-height:112px;line-height:1.5}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.cform button{justify-self:start;cursor:pointer;margin-top:2px}
.cform-status{margin:2px 0 0;font-family:var(--ui);font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--tx-dim);min-height:1.2em}
.cform-status.ok{color:var(--gold-lt)}
.cform-status.err{color:#e07a68}

/* partners — logos normalised to white silhouettes so the light (Rollback)
   and dark (imago, Meta Games, Army Painter) artwork are equally visible on
   the dark page; hover brightens (restoring true colour can't work here —
   the dark logos would vanish on black) */
.partners{padding:clamp(36px,4vw,56px) 0 clamp(44px,5vw,64px);border-top:1px solid var(--edge)}
.plogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(32px,6vw,84px);margin-top:30px}
.plogos img{
  height:clamp(46px,4.6vw,58px);
  width:auto;
  max-width:200px;
  object-fit:contain;
  padding:7px 12px;
  border-radius:9px;
  filter:brightness(0) invert(1);
  opacity:.85;
  transition:opacity .22s,filter .22s,background .22s,transform .22s;
}
/* hover → real colours; dark artwork needs a light chip to be visible… */
.plogos img:hover{opacity:1;filter:none;background:#f2efe9;transform:translateY(-2px)}
/* …and the light artwork (Rollback's white wordmark) needs a dark chip */
.plogos img.ondark:hover{background:#181818}

/* footer */
.bottom{
  border-top:1px solid var(--edge);
  background:var(--panel);
  padding:26px 0 34px;
}
.bottom-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.bottom .datum{color:var(--tx-dim)}
.bottom a:hover{color:var(--gold-lt)}

/* ============================================================
   MAP — Leaflet, dark tiles, logo pin
   ============================================================ */
.map{position:relative;padding-block:calc(var(--sec-gap) / 2)}
.map-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.map-title{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.1vw,38px);letter-spacing:-.01em;line-height:1.05;margin:8px 0 0}
.map-addr{font-family:var(--body);font-size:clamp(16px,1.5vw,18px);color:var(--tx-dim);margin:10px 0 0;max-width:56ch}
.klubmap{
  height:clamp(320px,44vw,480px);
  margin-top:clamp(22px,3vw,34px);
  border:1px solid var(--edge);
  background:var(--panel);
  position:relative;z-index:1;
}
/* custom logo pin */
.ktk-pin{background:none;border:0}
.ktk-pin-badge{position:relative;display:block;width:54px;height:54px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.ktk-pin-badge img{width:100%;height:100%;border-radius:50%;object-fit:cover;padding:8px!important;box-sizing:border-box}
.ktk-pin-badge::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:15px;height:15px;background:var(--gold);border-radius:0 0 3px 0;z-index:-1}
/* dark-theme Leaflet chrome */
.klubmap .leaflet-control-attribution{background:rgba(13,13,13,.82);color:var(--tx-mut)}
.klubmap .leaflet-control-attribution a{color:var(--tx-dim)}
.klubmap .leaflet-bar a{background:var(--panel);color:var(--tx);border-bottom-color:var(--edge)}
.klubmap .leaflet-bar a:hover{background:var(--card);color:var(--gold-lt)}
.klubmap .leaflet-popup-content-wrapper,.klubmap .leaflet-popup-tip{background:var(--panel);color:var(--tx)}
.klubmap .leaflet-popup-content{font-family:var(--body);font-size:15px}
.klubmap .leaflet-popup-content b{font-family:var(--display);color:var(--gold-lt)}

/* small beta ribbon so this preview is never mistaken for live */
.beta-flag{
  position:fixed;
  left:10px;bottom:10px;z-index:80;
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);
  padding:6px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  opacity:.9;
}

/* ============================================================
   MOTION
   ============================================================ */
/* progressive enhancement: content stays visible if JS never runs */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:none}
/* generic scroll-reveal (auto-applied per section by footer.php on non-homepage pages).
   Hidden state has NO transition so JS adding it never flashes a fade-out; the reveal
   transition lives on .in so it only animates when entering the viewport. */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
/* article reading-progress bar (only rendered on article pages) */
.read-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));z-index:200;pointer-events:none;will-change:transform}
.hero-copy>*{animation:enter .7s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.13s}
.hero-copy>*:nth-child(3){animation-delay:.21s}
.hero-copy>*:nth-child(4){animation-delay:.29s}
.hero-copy>*:nth-child(5){animation-delay:.37s}
.hero-piece{animation:enter .8s cubic-bezier(.2,.7,.3,1) .2s both}
@keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise,.js .reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE — the irregularity relaxes as space runs out
   ============================================================ */
@media (max-width:1100px){
  .counter.c1{left:-18px}
  .counter.c2{right:-8px}
  /* keep the alternating rhythm instead of collapsing to an even 2-up */
  .tile.t1,.tile.t4,.tile.t5,.tile.t8{grid-column:span 7}
  .tile.t2,.tile.t3,.tile.t6,.tile.t7{grid-column:span 5}
  .tile.t9{grid-column:span 12;--h:240px}
  .tile{--off:0px}
}
@media (max-width:900px){
  body{font-size:17px}
  .rail{display:none}
  .top-in{flex-direction:column;align-items:flex-start;gap:18px}
  .nav{align-items:flex-start}
  .nav-row{flex-wrap:wrap;gap:18px}
  .hero{grid-template-columns:1fr;padding-bottom:78px}
  .hero-piece{margin-top:34px}
  .counter{position:static;transform:none!important;margin-top:14px;min-width:0}
  .counter.c1,.counter.c2{inset:auto}
  .about-grid,.visit-panels,.foot-cols,.app-grid,.crew-grid{grid-template-columns:1fr}
  .board{column-count:2}
  .app-shots{margin-top:26px}
  .about-photo{order:2;transform:none;margin-top:8px}
  .crew-photo{transform:none}
  .contact::before{display:none}
  .visit-cta{transform:none}
  .slot:nth-child(1),.slot:nth-child(2){transform:none}
}
@media (max-width:640px){
  .board{column-count:1}
  .tile.t1,.tile.t2,.tile.t3,.tile.t4,.tile.t5,
  .tile.t6,.tile.t7,.tile.t8,.tile.t9{--h:200px}
  .lines li{grid-template-columns:1fr;gap:2px}
  .acts .btn{flex:1 1 100%;text-align:center}
  .hours{grid-template-columns:1fr}
  .hero-row .acts .btn{flex:1 1 100%}
  .frow{grid-template-columns:1fr}
  .phone{width:118px;padding:5px;border-radius:24px}
  .phone img{border-radius:19px}
  .phone.p1{margin-right:-28px}
  .phone.p3{margin-left:-28px}
}

/* ============================================================
   GAME DETAIL PAGE (.gp-*)  + clickable tiles (.tile .more)
   ============================================================ */
.tile .more{position:absolute;inset:0;z-index:4;font-size:0;line-height:0}
.tile .cue{display:inline-block;margin-top:12px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.tile:hover .cue{color:var(--gold)}

.gp-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge)}
.gp-hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(.9) brightness(.5)}
.gp-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 3%,rgba(13,13,13,.5) 46%,rgba(13,13,13,.8))}
.gp-hero .in{position:relative;z-index:2;padding-block:clamp(40px,7vw,96px)}
.gp-kind{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0}
.gp-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.4vw,82px);line-height:.98;letter-spacing:-.03em;margin:12px 0 0}
.gp-tagline{font-family:var(--ui);font-size:clamp(13px,1.5vw,16px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dim);margin:18px 0 0;max-width:44ch}
.gp-section{padding-block:calc(var(--sec-gap) / 2);border-bottom:1px solid var(--edge)}
.gp-section.last{border-bottom:none}
.gp-sechead{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.3vw,40px);letter-spacing:-.01em;line-height:1.08;color:var(--tx);margin:0 0 24px}
.gp-body{max-width:70ch}
/* One colour for the whole description: the first paragraph used to be full
   white and the rest dimmed, which read as a statement followed by two
   afterthoughts rather than as one piece of writing. */
.gp-body p{font-size:18px;color:var(--tx);margin:0 0 18px;line-height:1.62}
.gp-note{color:var(--tx-dim);margin-top:16px;font-size:19px;line-height:1.55;max-width:70ch}
.gp-factions{display:flex;flex-wrap:wrap;gap:14px}
.gp-faction{border:1px solid var(--edge);border-left:3px solid var(--gold);background:var(--card);padding:14px 24px;font-family:var(--display);font-size:20px;font-weight:600;color:var(--tx)}
.gp-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gp-reason{border:1px solid var(--edge);background:var(--card);padding:26px 24px}
.gp-reason .ic{font-size:26px;line-height:1}
.gp-reason h3{font-family:var(--display);font-size:21px;font-weight:600;margin:12px 0 8px;color:var(--tx)}
.gp-reason p{font-size:16px;color:var(--tx-dim);margin:0;line-height:1.5}
.gp-cta{border:1px solid var(--edge);background:var(--panel);padding:clamp(28px,4vw,44px);text-align:center}
.gp-cta .gp-kind{color:var(--gold-lt)}
.gp-cta h2{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:600;margin:8px 0 0;color:var(--tx)}
.gp-cta p{color:var(--tx-dim);font-size:17px;margin:12px auto 22px;max-width:54ch}
.gp-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mut);transition:color .18s,gap .18s}
.gp-back:hover{color:var(--gold-lt);gap:12px}
@media(max-width:820px){.gp-reasons{grid-template-columns:1fr}}

/* game-page: custom reason icons, faction image cards, team helper cards */
.gp-reason .ic svg{display:block;width:30px;height:30px;color:var(--gold)}
.gp-faction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gp-fac{margin:0;position:relative;border:1px solid var(--edge);background:var(--card);overflow:hidden}
.gp-fac img{width:100%;height:210px;object-fit:cover;filter:saturate(.9) contrast(1.03) brightness(.88);transition:filter .3s,transform .3s}
.gp-fac:hover img{filter:none;transform:scale(1.03)}
.gp-fac figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-family:var(--display);font-size:22px;font-weight:600;color:var(--tx);background:linear-gradient(0deg,rgba(10,9,9,.94),rgba(10,9,9,.55) 55%,transparent)}
@media(max-width:820px){.gp-faction-grid{grid-template-columns:1fr}.gp-fac img{height:200px}}

.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px}
.tm-card{display:flex;gap:26px;align-items:center;border:1px solid var(--edge);background:var(--card);padding:28px 30px}
.tm-photo{width:132px;height:132px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:3px solid var(--gold-dk)}
.tm-info{min-width:0}
.tm-name{font-family:var(--display);font-size:30px;font-weight:600;margin:0;color:var(--tx)}
.tm-langs{display:flex;gap:9px;margin:12px 0 12px}
.flag{width:36px;height:27px;border-radius:3px;display:inline-block;vertical-align:middle;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.tm-mail{font-family:var(--ui);font-size:15px;letter-spacing:.02em;color:var(--gold-lt);word-break:break-all}
.tm-mail:hover{color:var(--gold)}
@media(max-width:520px){.tm-grid{grid-template-columns:1fr}.tm-card{gap:18px;padding:20px}.tm-photo{width:96px;height:96px}.tm-name{font-size:24px}}

.gp-fsub{color:var(--tx-dim);font-size:19px;line-height:1.5;margin:0 0 22px;max-width:70ch}
.gp-fac figcaption small{display:block;font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;color:var(--tx-dim);margin-top:3px}

/* about — redesigned: intro + wide banner + two-column copy + invite */
.about-intro{max-width:820px}
.about-intro .lead{margin-top:16px;font-size:clamp(19px,2.1vw,23px);color:var(--tx-dim);max-width:62ch}
.about-banner{margin:clamp(30px,4.5vw,52px) 0;border:1px solid var(--edge);overflow:hidden}
.about-banner img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover;filter:saturate(.92) contrast(1.02)}
.about-cols{columns:2;column-gap:clamp(30px,4vw,64px)}
.about-cols p{margin:0 0 16px;color:var(--tx-dim);break-inside:avoid;font-size:18px;line-height:1.62}
.about-invite{margin:clamp(28px,3.5vw,42px) 0 0;font-family:var(--body);font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.34;color:var(--tx);max-width:34ch;border-left:2px solid var(--gold-dk);padding-left:24px}
@media(max-width:760px){.about-cols{columns:1}}

.plogos a{display:inline-flex;align-items:center}

/* ============================================================
   BLOG / ARTICLES
   ============================================================ */
.blog-head{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,32px)}
.blog-h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6vw,74px);letter-spacing:-.03em;line-height:1;margin:12px 0 0}
.blog-head .lead{margin-top:16px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:24px}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--card);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--gold-dk);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.bc-img{height:200px;overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .3s}
.blog-card:hover .bc-img img{transform:scale(1.04)}
.bc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.bc-date{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mut);margin:0}
.bc-title{font-family:var(--display);font-size:22px;font-weight:600;margin:8px 0 0;line-height:1.16;color:var(--tx)}
.bc-ex{color:var(--tx-dim);font-size:16px;margin:10px 0 0;line-height:1.5}
.bc-more{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:auto;padding-top:18px}

.article{padding:clamp(30px,4vw,52px) 0 clamp(48px,6vw,80px)}
.art-date{font-family:var(--ui);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:20px 0 0}
.art-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.02em;line-height:1.05;margin:12px 0 0;max-width:24ch}
.art-cover{margin:clamp(26px,4vw,44px) 0;border-block:1px solid var(--edge)}
.art-cover img{width:100%;max-height:540px;object-fit:cover;display:block}
.art-body{max-width:768px;font-size:18px;line-height:1.72;color:var(--tx-dim)}
.art-body p{margin:0 0 20px}
.art-body h2{font-family:var(--display);font-size:clamp(24px,3vw,33px);font-weight:600;color:var(--tx);margin:38px 0 14px;line-height:1.15}
.art-body h3{font-family:var(--display);font-size:23px;font-weight:600;color:var(--tx);margin:30px 0 10px}
.art-body img{width:100%;height:auto;margin:26px 0;border:1px solid var(--edge)}
.art-body ul,.art-body ol{margin:0 0 20px;padding-left:26px}
.art-body li{margin:0 0 9px}
.art-body strong{color:var(--tx)}
.art-body em{color:var(--tx-dim)}
.art-body a{color:var(--gold-lt);text-decoration:underline}
.art-body blockquote{border-left:2px solid var(--gold-dk);padding-left:22px;margin:24px 0;font-style:italic;color:var(--tx)}

/* ============================================================
   GAME LIBRARY (Játékkönyvtár)
   ============================================================ */
.lib-controls{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:10px}
.lib-filters{display:inline-flex;flex-wrap:wrap;gap:5px;padding:6px;background:var(--panel);border:1px solid var(--edge);border-radius:14px}
.lib-fbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.03em;padding:8px 15px;border:1px solid transparent;background:transparent;color:var(--tx-mut);cursor:pointer;border-radius:9px;transition:color .18s,border-color .18s,background .18s}
.lib-fbtn .lib-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--fc,var(--gold));box-shadow:0 0 0 3px var(--fc-glow,transparent);transition:box-shadow .18s}
.lib-fbtn:hover{color:var(--tx);background:var(--card)}
.lib-fbtn.is-active{color:var(--tx);background:var(--card);border-color:var(--edge)}
.lib-fbtn.is-active .lib-dot{box-shadow:0 0 0 3px var(--fc-glow,transparent)}
.lib-fbtn--mind{--fc:var(--gold)}
.lib-fbtn--egyszeru{--fc:#7cc47c;--fc-glow:rgba(124,196,124,.18)}
.lib-fbtn--halado{--fc:#e8b84b;--fc-glow:rgba(232,184,75,.18)}
.lib-fbtn--bonyolult{--fc:#e0705f;--fc-glow:rgba(224,112,95,.18)}
.lib-fbtn--nsfw{--fc:#d06aa0;--fc-glow:rgba(208,106,160,.18)}
.lib-fbtn--mind.is-active{background:var(--gold);color:var(--ink);border-color:var(--gold-dk)}
.lib-fbtn--mind.is-active .lib-dot{background:var(--ink)}
.lib-fbtn--egyszeru.is-active{color:#8fd08f;border-color:#375537;background:rgba(124,196,124,.12)}
.lib-fbtn--halado.is-active{color:#f0c869;border-color:#5a4a1c;background:rgba(232,184,75,.12)}
.lib-fbtn--bonyolult.is-active{color:#ea8575;border-color:#5a2c26;background:rgba(224,112,95,.12)}
.lib-fbtn--nsfw.is-active{color:#dd82b3;border-color:#54294a;background:rgba(208,106,160,.12)}
.lib-tools{display:flex;gap:10px;flex-wrap:wrap}
.lib-search{font-family:var(--body);font-size:16px;color:var(--tx);background:var(--card);border:1px solid var(--edge);border-radius:6px;padding:10px 14px;min-width:200px}
.lib-search:focus{outline:none;border-color:var(--gold)}
.lib-count{font-family:var(--ui);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut);margin:0 0 22px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.lib-card{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--card);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.lib-card[hidden]{display:none}
.lib-card:hover{transform:translateY(-4px);border-color:var(--gold-dk);box-shadow:0 18px 36px rgba(0,0,0,.5)}
.lib-img{aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.lib-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lib-card:hover .lib-img img{transform:scale(1.04)}
.lib-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.lib-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lib-pill{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 11px;border-radius:20px;background:var(--panel);border:1px solid var(--edge);color:var(--tx-dim)}
.lib-pill--egyszeru{color:#7cc47c;border-color:#375537}
.lib-pill--halado{color:#e8b84b;border-color:#5a4a1c}
.lib-pill--bonyolult{color:#e0705f;border-color:#5a2c26}
.lib-pill--nsfw{color:#d06aa0;border-color:#54294a}
.lib-pill--gyerekbarat{color:#6aa9d0;border-color:#274454}
.lib-title{font-family:var(--display);font-size:20px;font-weight:600;margin:0;line-height:1.15;color:var(--tx)}
.lib-desc{color:var(--tx-dim);font-size:15px;margin:8px 0 0;line-height:1.5}
.lib-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--edge)}
.lib-stats span{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--tx);background:rgba(201,146,42,.09);border:1px solid var(--edge);border-radius:20px;padding:5px 12px}
.lib-stats svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold-lt)}
.lib-flash{outline:2px solid var(--gold);outline-offset:4px}
.lib-empty{color:var(--tx-dim);font-size:18px;margin-top:24px}
.games-cta{margin-top:clamp(30px,4vw,48px);text-align:center}
@media(max-width:640px){.lib-controls{flex-direction:column;align-items:stretch}.lib-tools{justify-content:space-between}.lib-search{flex:1}}

.btn.hasico{display:inline-flex;align-items:center;gap:8px}
.btn-ico{width:18px;height:18px;flex:0 0 auto}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
body.adm{background:var(--ink)}
.adm-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(20px,4vw,48px);border-bottom:1px solid var(--edge);background:var(--panel);flex-wrap:wrap}
.adm-brand{font-family:var(--display);font-size:20px;font-weight:600;color:var(--gold-lt)}
.adm-nav{display:flex;gap:20px;flex-wrap:wrap}
.adm-nav a{font-family:var(--ui);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)}
.adm-nav a:hover{color:var(--gold-lt)}
.adm-main{max-width:980px;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(20px,4vw,48px)}
.adm-main h1{font-family:var(--display);font-size:clamp(28px,4vw,40px);font-weight:700;margin:0 0 24px}
.adm-main h2{font-family:var(--display);font-size:24px;font-weight:600;margin:34px 0 16px}
.adm-login{max-width:360px;margin:8vh auto;background:var(--card);border:1px solid var(--edge);padding:34px}
.adm-login h1{text-align:center}
.adm-err{background:rgba(224,112,95,.12);border:1px solid #5a2c26;color:#e8a99e;padding:12px 16px;border-radius:6px;margin:0 0 18px;font-size:15px}
.adm-form,.adm-login form{display:flex;flex-direction:column;gap:16px}
.adm-form label,.adm-login label{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.adm input,.adm textarea,.adm select{font-family:var(--body);font-size:16px;color:var(--tx);background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:11px 13px;text-transform:none;letter-spacing:0;font-weight:400;width:100%}
.adm input:focus,.adm textarea:focus,.adm select:focus{outline:none;border-color:var(--gold)}
.adm .adm-body{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.5}
.adm-form-actions{display:flex;gap:14px;align-items:center;margin-top:6px}
.adm-cover-prev img{max-height:120px;border:1px solid var(--edge);margin:6px 0;display:block}
.adm-fieldset{border:1px solid var(--edge);border-radius:6px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px 20px}
.adm-fieldset legend{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:0 8px}
.adm-chk{flex-direction:row!important;align-items:center;gap:7px!important;text-transform:none!important;letter-spacing:0!important;color:var(--tx-dim)!important;font-weight:500!important;font-size:15px!important}
.adm-chk input{width:auto}
.adm-head-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.adm-table{width:100%;border-collapse:collapse;margin-top:14px}
.adm-table th,.adm-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--edge);font-size:15px;vertical-align:middle}
.adm-table th{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut)}
.adm-table a{color:var(--gold-lt)}
.adm-table small{color:var(--tx-mut)}
.adm-thumb{width:46px;height:46px;border-radius:50%;object-fit:cover}
.adm-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.adm-btn{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.06em;padding:7px 13px;border:1px solid var(--edge);color:var(--tx-dim);background:var(--card);cursor:pointer;border-radius:4px}
.adm-btn:hover{color:var(--tx);border-color:var(--gold-dk)}
.adm-btn--danger:hover{color:#e8a99e;border-color:#5a2c26}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.adm-card{border:1px solid var(--edge);background:var(--card);padding:26px;display:block;transition:border-color .2s,transform .2s}
.adm-card:hover{border-color:var(--gold-dk);transform:translateY(-3px)}
.adm-card h2{margin:0;font-size:24px}
.adm-card p{color:var(--tx-dim);margin:6px 0 16px}
.adm-go{font-family:var(--ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt)}

/* admin beautify + Quill dark editor */
.adm-brand{display:inline-flex;align-items:center;gap:11px}
.adm-brand img{width:34px;height:34px;border-radius:50%}
.adm-brand span em{color:var(--gold);font-style:normal}
.adm-out{color:var(--tx-mut)!important}
.adm-login-logo{width:66px;height:66px;border-radius:50%;display:block;margin:0 auto 14px}
.adm-login h1 em{color:var(--gold);font-style:normal}
.adm-card{border-left:3px solid var(--gold)}
.adm-editor-field{display:flex;flex-direction:column;gap:6px}
.adm-editor-label{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
#editor{min-height:360px;font-family:var(--body);font-size:16px}
.ql-toolbar.ql-snow{background:var(--panel);border-color:var(--edge)!important;border-radius:6px 6px 0 0}
.ql-container.ql-snow{background:var(--card);border-color:var(--edge)!important;border-radius:0 0 6px 6px;font-family:var(--body)}
.ql-editor{min-height:360px;color:var(--tx);line-height:1.6}
.ql-editor.ql-blank::before{color:var(--tx-mut);font-style:normal;left:15px;right:15px}
.ql-editor h2,.ql-editor h3{font-family:var(--display);color:var(--tx)}
.ql-editor a{color:var(--gold-lt)}
.ql-editor blockquote{border-left:3px solid var(--gold-dk);color:var(--tx-dim)}
.ql-editor img{max-width:100%;height:auto}
.ql-snow .ql-stroke{stroke:var(--tx-dim)}
.ql-snow .ql-fill{fill:var(--tx-dim)}
.ql-snow .ql-picker{color:var(--tx-dim)}
.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--gold-lt)}
.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--gold-lt)}
.ql-snow .ql-picker-options{background:var(--panel);border-color:var(--edge)!important}
.ql-snow .ql-tooltip{background:var(--panel);border-color:var(--edge);color:var(--tx);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.ql-snow .ql-tooltip input[type=text]{background:var(--card);border-color:var(--edge);color:var(--tx)}

/* admin dashboard — redesigned cards */
.adm-dash-head{margin-bottom:30px}
.adm-eyebrow{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.adm-dash-head h1{margin:8px 0 0}
.adm-sub{color:var(--tx-dim);font-size:17px;margin:8px 0 0}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px}
.adm-card{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:16px;background:linear-gradient(158deg,#201e1a 0%,#171512 55%,#121110 100%);padding:30px 30px 26px;display:flex;flex-direction:column;min-height:224px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(0,0,0,.32);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.adm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-lt),var(--gold) 45%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.adm-card:hover{transform:translateY(-5px);border-color:var(--gold-dk);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 52px rgba(0,0,0,.55)}
.adm-card:hover::before{transform:scaleX(1)}
.adm-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.adm-card-ico{width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;color:var(--gold-lt);background:radial-gradient(120% 120% at 30% 25%,rgba(232,184,75,.30),rgba(201,146,42,.08));border:1px solid rgba(201,146,42,.34);box-shadow:0 6px 16px rgba(201,146,42,.14)}
.adm-card-ico svg{width:27px;height:27px}
.adm-card-num{font-family:var(--display);font-size:46px;font-weight:700;color:var(--gold-lt);line-height:1;letter-spacing:.01em;text-shadow:0 2px 18px rgba(201,146,42,.22)}
.adm-card h2{font-family:var(--display);font-size:26px;font-weight:600;margin:0;color:var(--tx)}
.adm-card p{color:var(--tx-dim);font-size:15px;line-height:1.55;margin:9px 0 0;max-width:34ch}
.adm-go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:auto;padding:11px 16px;border:1px solid var(--edge);border-radius:999px;background:rgba(201,146,42,.06);transition:gap .2s ease,color .2s ease,border-color .2s ease,background .2s ease}
.adm-card:hover .adm-go{color:#1a1408;background:var(--gold-lt);border-color:var(--gold-lt);gap:12px}

/* admin — custom form controls */
.adm-chk input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin:0;
  width:20px;height:20px;border:1.5px solid var(--edge);border-radius:5px;background:var(--panel);
  cursor:pointer;position:relative;flex:0 0 auto;transition:border-color .15s,background .15s}
.adm-chk:hover input[type=checkbox]{border-color:var(--gold-dk)}
.adm-chk input[type=checkbox]:checked{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%230d0d0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--gold-dk)}
.adm-chk input[type=checkbox]:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.adm-chk{cursor:pointer}

.adm input[type=file]{padding:0;color:var(--tx-dim);cursor:pointer;line-height:2.6;font-family:var(--ui);font-size:14px;letter-spacing:.02em}
.adm input[type=file]::file-selector-button{
  font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:0 22px;height:46px;margin-right:16px;border:none;border-right:1px solid var(--gold-dk);
  background:var(--gold);color:var(--ink);cursor:pointer;transition:background .15s}
.adm input[type=file]::file-selector-button:hover{background:var(--gold-lt)}

/* themed select arrow */
.adm select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa49c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* admin table + action buttons — polish */
.adm-table tbody tr{transition:background .15s}
.adm-table tbody tr:hover{background:rgba(201,146,42,.05)}
.adm-table td{padding:14px 12px}
.adm-thumb{width:48px;height:48px;border:2px solid var(--gold-dk);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.adm-btn{border-radius:6px;padding:8px 16px;color:var(--tx-dim);border:1px solid var(--edge);background:transparent;transition:color .15s,border-color .15s,background .15s}
.adm-btn:hover{color:var(--gold-lt);border-color:var(--gold-dk);background:rgba(201,146,42,.07)}
.adm-btn--danger{color:#d98a7d;border-color:#472521}
.adm-btn--danger:hover{color:#efb4a8;border-color:#6a2f28;background:rgba(224,112,95,.08)}

/* fix: actions cell must stay a table-cell so row borders span evenly */
td.adm-actions{display:table-cell;text-align:right;white-space:nowrap}
td.adm-actions .adm-btn{display:inline-block;vertical-align:middle;margin-left:8px}
td.adm-actions form{display:inline-block;vertical-align:middle}
.adm-table{border-collapse:collapse}
.adm-table th,.adm-table td{border-bottom:1px solid var(--edge)}
.adm-table tbody tr:last-child td{border-bottom:none}

/* --- Admin: game library + lookup --- */
.adm-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.adm-toolbar h1{margin:0}
.adm-toolbar .adm-sub{margin-top:4px}
.adm-search-in{font-family:var(--body);font-size:16px;color:var(--tx);background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:11px 13px;width:100%;margin:14px 0 4px}
.adm-search-in:focus{outline:none;border-color:var(--gold)}
.adm-thumb-lib{width:64px;height:38px;object-fit:cover;border-radius:5px;border:1px solid var(--edge);display:block}
.adm-lookup-box{background:var(--card);border:1px solid var(--edge);border-radius:8px;padding:18px 20px;margin:0 0 26px}
.adm-lookup-lead{font-family:var(--body);font-size:15px;line-height:1.5;color:var(--tx-dim);margin:0 0 14px}
.adm-lookup{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm-lookup .adm-search-in{margin:0;flex:1 1 260px;width:auto}
.adm-lookup .btn{white-space:nowrap}
.adm-lookup-alt{margin-top:12px}
.adm-lookup-alt label{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.adm-alt-select{font-family:var(--body);font-size:15px;color:var(--tx);background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:10px 12px;width:100%}
.adm-lookup-status{font-family:var(--body);font-size:14px;line-height:1.5;color:var(--gold-lt);margin:12px 0 0}
.adm-lookup-status.err{color:#e8a99e}
.adm-img-line{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin:-6px 0 2px}
.adm-img-line .adm-cover-prev img{max-height:96px}
.adm-file-inline{flex:1 1 220px}
.adm-lookup-other:not([hidden]){margin-top:12px;display:inline-block}

/* --- Legal / info pages --- */
.art-updated{margin-top:38px;padding-top:20px;border-top:1px solid var(--edge);font-family:var(--ui);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mut)}
.legal-dl{margin:6px 0 0;font-size:18px;line-height:1.6}
.legal-dl>div{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.legal-dl>div:last-child{border-bottom:none}
.legal-dl dt{flex:0 0 200px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.legal-dl dd{margin:0;color:var(--tx);flex:1 1 240px}

/* --- Cégadatok page --- */
.ceg-wrap{padding-bottom:clamp(44px,6vw,84px)}
.ceg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:6px}
.ceg-card{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(158deg,#201e1a,#151310);border:1px solid var(--edge);border-radius:14px;padding:22px 24px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ceg-card:hover{border-color:var(--gold-dk);transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.4)}
.ceg-card.wide{grid-column:1/-1}
.ceg-ico{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:var(--gold-lt);background:radial-gradient(120% 120% at 30% 25%,rgba(232,184,75,.28),rgba(201,146,42,.07));border:1px solid rgba(201,146,42,.30)}
.ceg-ico svg{width:22px;height:22px}
.ceg-txt{min-width:0}
.ceg-k{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:3px 0 0}
.ceg-v{font-family:var(--display);font-size:clamp(19px,2.1vw,23px);font-weight:600;color:var(--tx);margin:7px 0 0;line-height:1.25;word-break:break-word}
.ceg-v a{color:var(--tx)}.ceg-v a:hover{color:var(--gold-lt)}
.ceg-v.data{font-family:var(--ui);font-weight:600;letter-spacing:.01em;font-size:clamp(18px,2vw,21px);line-height:1.4}
.ceg-v.iban{font-family:var(--ui);font-weight:600;letter-spacing:.12em;font-size:clamp(20px,2.4vw,26px);color:var(--gold-lt)}
.ceg-copy{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);background:rgba(201,146,42,.08);border:1px solid var(--edge);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.2s ease}
.ceg-copy:hover{background:var(--gold-lt);color:#1a1408;border-color:var(--gold-lt)}
.ceg-copy svg{width:15px;height:15px}
.ceg-venue{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px;background:var(--panel);border:1px solid var(--edge);border-left:4px solid var(--gold);border-radius:14px;padding:24px 28px}
.ceg-venue-in{display:flex;gap:16px;align-items:flex-start}
.ceg-venue-in h2{font-family:var(--display);font-size:22px;margin:0;color:var(--tx)}
.ceg-venue-in p{margin:5px 0 0;color:var(--tx-dim)}
.ceg-venue .btn{flex:0 0 auto}
.ceg-contact{margin-top:clamp(30px,4vw,52px)}
.ceg-contact h2{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:600;margin:0 0 10px}
.ceg-contact p{color:var(--tx-dim);max-width:60ch;margin:0}
.ceg-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ============================================================
   TABLE RESERVATION WIZARD
   ============================================================ */
.res-wrap{max-width:920px;margin-inline:auto;padding-bottom:clamp(44px,6vw,84px)}
.res-wrap select,.res-wrap input,.res-wrap textarea{font-family:var(--body);font-size:16px;color:var(--tx);background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:11px 13px;width:100%}
.res-wrap select:focus,.res-wrap input:focus,.res-wrap textarea:focus{outline:none;border-color:var(--gold)}
.res-steps{list-style:none;display:flex;padding:0;margin:0 0 clamp(26px,4vw,40px)}
.res-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;color:var(--tx-mut);font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.res-step::before{content:"";position:absolute;top:18px;left:-50%;width:100%;height:2px;background:var(--edge);z-index:0}
.res-step:first-child::before{display:none}
.res-step-n{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--edge);font-family:var(--display);font-size:17px;position:relative;z-index:1;transition:.2s}
.res-step.is-active{color:var(--gold-lt)}
.res-step.is-active .res-step-n{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,146,42,.12)}
.res-step.is-done .res-step-n{background:var(--gold);border-color:var(--gold);color:#1a1408}
.res-step.is-done::before{background:var(--gold-dk)}
.res-panel{display:none}
.res-panel.is-active{display:block;animation:resfade .3s ease}
@keyframes resfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.res-h{font-family:var(--display);font-size:clamp(23px,3vw,31px);font-weight:600;margin:0 0 6px;color:var(--tx)}
.res-sub{color:var(--tx-dim);margin:0 0 22px;font-size:16px}
.res-note{color:var(--tx-dim)}
.res-note.ok{color:#8fd08f}
.res-err{background:rgba(224,112,95,.12);border:1px solid #5a2c26;color:#e8a99e;padding:12px 16px;border-radius:8px;margin:0 0 18px;font-size:15px}
.res-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.res-day{display:flex;flex-direction:column;gap:5px;text-align:left;padding:20px 22px;background:var(--card);border:1px solid var(--edge);border-radius:12px;cursor:pointer;transition:.2s;color:var(--tx)}
.res-day:hover{border-color:var(--gold-dk);transform:translateY(-3px)}
.res-day.sel{border-color:var(--gold);background:rgba(201,146,42,.09)}
.res-day-name{font-family:var(--ui);font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.res-day-date{font-family:var(--display);font-size:20px;color:var(--tx)}
.res-day-hrs{font-family:var(--body);font-size:15px;color:var(--tx-mut)}
.res-times{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.res-times label{display:flex;flex-direction:column;gap:7px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.res-times select{min-width:140px}
.res-dash{padding-bottom:12px;color:var(--tx-mut)}
.res-legend{display:flex;gap:20px;margin:0 0 20px;font-family:var(--ui);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);flex-wrap:wrap}
.res-lg{display:inline-flex;align-items:center;gap:7px}
.res-lg::before{content:"";width:13px;height:13px;border-radius:4px;border:1px solid}
.res-lg.free::before{background:rgba(124,196,124,.18);border-color:#4d7a4d}
.res-lg.occ::before{background:rgba(224,112,95,.14);border-color:#5a2c26}
.res-lg.sel::before{background:var(--gold);border-color:var(--gold)}
.res-map{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.res-group{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:20px 22px}
.res-group-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.res-count{font-size:13px;color:var(--gold-lt);letter-spacing:.04em;white-space:nowrap}
.res-group-note{color:var(--tx-mut);font-size:14px;margin:4px 0 16px}
.res-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}
.res-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 8px;border-radius:10px;border:1px solid var(--edge);background:var(--card);cursor:pointer;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.03em;transition:.15s;color:var(--tx-dim)}
.res-tile svg{width:26px;height:26px}
.res-tile.free{color:#8fd08f;border-color:#3c5a3c}
.res-tile.free:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-2px)}
.res-tile.occ{color:#8a5a52;border-color:#4a2822;background:rgba(224,112,95,.06);cursor:not-allowed;opacity:.75}
.res-tile.sel{background:var(--gold);border-color:var(--gold);color:#1a1408;box-shadow:0 6px 16px rgba(201,146,42,.3)}
.res-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.res-recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:18px 20px;margin-bottom:24px}
.res-recap>div{display:flex;flex-direction:column;gap:3px}
.res-recap span{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.res-recap strong{color:var(--tx);font-weight:600}
.res-form{display:flex;flex-direction:column;gap:16px}
.res-form>label{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.res-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.res-opt{color:var(--tx-mut);font-weight:400;text-transform:none;letter-spacing:0}
.res-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.res-captcha{max-width:260px}
.res-captcha strong{color:var(--gold-lt)}
.res-done-card{text-align:center;max-width:520px;margin:14px auto;background:linear-gradient(158deg,#201e1a,#151310);border:1px solid var(--edge);border-radius:16px;padding:clamp(28px,4vw,42px)}
.res-done-ico{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(124,196,124,.14);border:1px solid #4d7a4d;color:#8fd08f;display:flex;align-items:center;justify-content:center}
.res-done-ico svg{width:32px;height:32px}
.res-done-card h2{font-family:var(--display);font-size:clamp(24px,3vw,30px);margin:0 0 18px;color:var(--tx)}
.res-done-recap{display:flex;flex-direction:column;gap:11px;text-align:left;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:18px 20px;margin-bottom:18px}
.res-done-recap>div{display:flex;justify-content:space-between;gap:14px;align-items:center}
.res-done-recap span{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.res-done-recap strong{color:var(--tx);text-align:right}
.res-done-note{color:var(--tx-dim);font-size:15px;margin:0 0 22px}
.res-done-note strong{color:var(--gold-lt);font-family:var(--ui);letter-spacing:.12em}
.res-cancel-card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:26px 28px;max-width:560px}
.res-adm-day{font-family:var(--display);font-size:22px;margin:32px 0 10px;color:var(--tx);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.res-adm-cnt{font-family:var(--ui);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.res-block-add{display:flex;gap:12px;align-items:center;margin:12px 0 18px;max-width:420px;flex-wrap:wrap}
.res-block-list{display:flex;flex-wrap:wrap;gap:10px}
.res-block-chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--edge);border-radius:999px;padding:6px 8px 6px 14px;font-family:var(--ui);font-size:14px;color:var(--tx-dim)}
.res-block-chip button{background:none;border:none;color:var(--tx-mut);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:50%;line-height:1}
.res-block-chip button:hover{color:#e0705f}
@media(max-width:720px){.res-map,.res-row{grid-template-columns:1fr}.res-step-l{display:none}}

/* JS masonry (balanced-bottom columns); CSS column-count above is the no-JS fallback */
.board.js-masonry{display:flex;align-items:flex-start;column-count:auto;gap:clamp(14px,1.7vw,26px)}
.board-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(14px,1.7vw,26px)}
.board.js-masonry .tile{margin:0;width:auto}

/* --- Reservation floor-plan map --- */
.res-counts{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 14px;font-family:var(--ui);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim)}
.res-counts b{color:var(--gold-lt);font-size:16px}
.res-floor-wrap{border:1px solid var(--edge);border-radius:14px;background:var(--panel);padding:clamp(8px,1.6vw,16px);margin-bottom:14px;overflow:hidden}
.res-floor{width:100%;height:auto;display:block}
.rfloor{fill:var(--card);stroke:var(--edge);stroke-width:2}
.rwall{fill:none;stroke:#5a544a;stroke-width:6;stroke-linecap:round}
.rpillar{fill:#3c382f;stroke:#4a4438;stroke-width:1}
.rentry{fill:#201d17;stroke:var(--edge);stroke-width:1}
.rlabel{fill:var(--tx-mut);font-family:var(--ui);font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;dominant-baseline:middle}
.rlabel--zone{font-size:14px;opacity:.7}
.rtable{cursor:pointer;outline:none}
.rtable rect{fill:rgba(124,196,124,.10);stroke:#4d7a4d;stroke-width:2.5;transition:fill .15s,stroke .15s}
.rtable text{fill:#8fd08f;font-family:var(--ui);font-weight:700;font-size:22px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rtable--big rect{stroke-width:3;fill:rgba(124,196,124,.15)}
.rtable.is-free:hover rect,.rtable.is-free:focus-visible rect{fill:rgba(201,146,42,.2);stroke:var(--gold)}
.rtable.is-free:hover text,.rtable.is-free:focus-visible text{fill:var(--gold-lt)}
.rtable.is-occ{cursor:not-allowed}
.rtable.is-occ rect{fill:rgba(224,112,95,.10);stroke:#5a2c26;stroke-dasharray:6 4}
.rtable.is-occ text{fill:#8a5a52}
.rtable.is-sel rect{fill:var(--gold);stroke:var(--gold-lt);stroke-width:3}
.rtable.is-sel text{fill:#1a1408}
.res-floormaphint{color:var(--tx-mut);font-size:14px;line-height:1.5;margin:0 0 22px}
.res-floormaphint b{color:#8fd08f}

/* floor-plan: service zone, entrance door + path */
.rzone{fill:rgba(255,255,255,.045);stroke:var(--edge);stroke-width:1}
.rpath{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:1.5 9;stroke-linecap:round;opacity:.95}
.rdoor{stroke:var(--gold-lt);stroke-width:7;stroke-linecap:round}
.rlabel--entry{fill:var(--gold-lt);font-weight:700;font-size:18px;letter-spacing:.06em;text-anchor:start}

/* --- mobile touch-target + readability polish --- */
@media(max-width:760px){
  .nav a{padding-top:8px;padding-bottom:8px}     /* ~28px -> ~40px tap height */
  .lang a{padding:8px 5px}                        /* HU/SK/EN bigger to tap */
  .tile .kind{font-size:12px}                     /* 11px -> 12px readability floor */
}

/* --- mobile hamburger menu --- */
.nav-burger{display:none}
@media(max-width:900px){
  .top-in{flex-direction:row;align-items:center;gap:16px}
  .nav{position:static;align-items:flex-end}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;margin-left:auto;padding:11px;background:none;border:none;cursor:pointer}
  .nav-burger span{display:block;width:100%;height:2px;background:var(--tx);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease}
  .nav.is-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav-burger span:nth-child(2){opacity:0}
  .nav.is-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-row{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel);border:1px solid var(--edge);border-radius:14px;
    margin:14px clamp(16px,5vw,40px) 0;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
  .nav.is-open .nav-row{display:flex}
  .nav-row>a,.nav-drop-link,.nav-me{display:block;padding:13px 16px;font-size:16px;
    border-bottom:1px solid var(--edge);border-radius:0}
  .nav-drop{display:block}
  /* the submenu's own layout belongs to pages.css, which folds it correctly.
     This used to force display, opacity and visibility with !important, which
     overrode that and left the list permanently open in the burger menu. */
  .nav-menu{flex-direction:column;padding:0 0 0 14px;margin:0}
  .nav-menu>a{display:block;padding:11px 16px 11px 34px;font-size:14px;color:var(--tx-mut);
    border-bottom:1px solid var(--edge)}
  .lang{padding:14px 16px 6px;gap:16px;justify-content:flex-start}
  .lang a{font-size:16px;padding:4px 8px}
  .lang i{display:none}
}

/* the signed-in member's item in the top nav (shown on every page) */
.nav-me{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav-me-dot{
  box-sizing:border-box;width:26px;height:26px;border-radius:50%;flex:0 0 auto;padding-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:14px;font-weight:600;line-height:1;color:var(--gold-lt);
  border:1px solid var(--gold-dk);
  background:radial-gradient(120% 120% at 50% 35%,rgba(232,184,75,.20),rgba(201,146,42,.05))}

/* ── what the compatibility sweep found on phones ───────────────────────────
   Tap targets and the smallest type. Both only matter on a small screen, so
   both are scoped to one; nothing about the desktop layout changes.

   The links here stood 14 to 26px tall. A fingertip is nearer 45px, so these
   get padding — the target grows past the letters without the letters growing. */
@media (max-width:900px){
  .foot-legal a,.foot-links a,footer .sheet a{display:inline-block;padding:7px 0}
  .gp-back,.mb-back,.dnd-back{display:inline-block;padding:6px 0}
  .pcard-mail,a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding:4px 0}

}

/* Cross-document view transitions are OFF on purpose (2026-08-23).
   They caused a whole-screen white flash in Chrome on every navbar click —
   confirmed by switching them off; never reproducible in automated capture.
   The view-transition-name rules below are inert without this and are kept
   so the feature can be restored in one edit:  @view-transition{navigation:auto}  */
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* The cancel form is itself the flex row (.res-actions), so the e-mail field
   has to claim a full line of its own or it sits between the two buttons. */
.res-cancel-mail{flex:1 0 100%;display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.res-cancel-mail span{font-size:.85rem;color:var(--muted)}
.res-cancel-mail input{width:100%;max-width:340px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--edge);background:var(--bg);color:var(--fg);font:inherit}
.res-cancel-mail input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A tile with nothing to click must not advertise a click: no lift, no gold
   edge, no shadow, and the image keeps its resting treatment. */
.tile--static:hover,.tile--static:focus-within{
  transform:none;border-color:var(--edge);box-shadow:none;
}
.tile--static:hover img{filter:saturate(.92) contrast(1.02) brightness(.94)}

/* OSM ships light tiles; the site is near-black. Invert + hue-rotate is the
   standard way to get a dark basemap out of them - inverting alone turns the
   greens magenta, the hue rotation puts the colours back. Scoped to the tile
   pane on purpose: the pin, its logo and the zoom buttons must NOT invert. */
#klubmap .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) saturate(.22) brightness(.76) contrast(1.12);
}