/* ══════════════════════════════════════════════════════════════════════
   site.css — THE public stylesheet of nyekikarate.hu (the dojo design).

   Scope: every public page (the nine rooms, the post page, 404, maintenance, preview).
   Loaded first on /admin/* and setup.php too; admin.css follows there and adds the admin-only
   components. One colour scheme only — the dusk palette IS the design (design spec D-01):
   the whole palette is defined once on :root, body carries an explicit token background,
   and there is no light variant and no theme toggle (5-dojo/README.md §9).

   Source of truth: docs/input/<ITER>/dizajn/5-dojo/styles.css, adopted with exactly the
   edit list of docs/designs/design-spec-<ITER>.md §2.1: (a) the @font-face block below,
   (b) this header, (c) the classes the spec introduces (at the end of the file, each
   marked with its spec section), (d) mockup-only rules pruned, (e) the ADMIN block
   moved to admin.css. No token, no breakpoint and no duration was changed.

   Size budget: ≤ 64 KB unminified (spec §8 rule 12). Performance rules (spec §8):
   no backdrop-filter, no animated filter, will-change only on .world__in.is-moving.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── betűk (design spec §1.7) — self-hosted variable WOFF2, four subsets, no Google Fonts ─
   The latin-ext files carry ő/ű (the club's own name); the unicode-range split makes the
   browser fetch the latin file for everything else. font-display:swap — no FOIT. The two
   latin-ext files are the ones layout.phtml preloads. Source + licence: ../fonts/README.md */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─── tokenek ────────────────────────────────────────────────────────── */
:root {
  /* felület */
  --u-950:#100b07;
  --u-900:#150e09;
  --u-850:#1b120b;
  --u-800:#22170e;
  --u-750:#2b1d12;
  --cin-700:#3a2716;
  --cin-600:#4a321c;
  --ember:#8a4f23;
  --bronze:#d09a63;

  /* fény */
  --amb-600:#a1691f;
  --amb-500:#c07f2e;
  --amb-400:#d9973f;
  --amb-300:#eab463;
  --amb-200:#f6cf92;

  /* szöveg */
  --cream:#f7ecda;
  --cream-2:#e2d0b4;
  --cream-3:#c3ac90;

  /* jelzés */
  --isko:#8cbadd;
  --ok:#a9c47c;
  --bad:#f0a075;

  /* panel — féltetsző, backdrop-filter NÉLKÜL */
  --panel-a:rgba(27,18,11,.86);
  --panel-b:rgba(18,12,7,.90);
  --hair:rgba(217,151,63,.22);
  --hair-2:rgba(217,151,63,.12);

  /* tipográfia */
  --f-disp:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-micro:.72rem;
  --t-small:.83rem;
  --t-body:1rem;
  --t-lead:clamp(1.04rem, .98rem + .4vw, 1.2rem);
  --t-h3:clamp(1.06rem, 1rem + .35vw, 1.22rem);
  --t-h2:clamp(1.32rem, 1.16rem + .7vw, 1.75rem);
  --t-h1:clamp(2.3rem, 1.7rem + 2.8vw, 3.6rem);

  /* tér */
  --sp:clamp(1rem, .82rem + .75vw, 1.55rem);
  --panel-w:760px;
  --panel-w-wide:1140px;
  --stage-pt:84px;
  --stage-pb:140px;

  /* mozgás */
  --e-weight:cubic-bezier(.17,.86,.34,1.02);   /* apró túlfutás — „súly” */
  --e-soft:cubic-bezier(.3,.72,.28,1);
  --d-room:600ms;
  --d-world:900ms;

  /* parallaxis */
  --par-x:22px;
  --par-y:16px;
  --ws-base:1.12;
  --wx:0px; --wy:0px; --ws:1.12;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 var(--t-body)/1.62 var(--f-body);
  color:var(--cream);
  background:var(--u-950);
  overflow:hidden;               /* a szobák görgetnek, nem a lap */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}

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

.skip{position:fixed;left:12px;top:-100px;z-index:60;background:var(--amb-300);color:var(--u-900);
  padding:.6rem 1rem;font-weight:700;border-radius:3px;transition:top .18s var(--e-soft)}
.skip:focus{top:12px}

/* ─── 1. réteg: az állandó világ ─────────────────────────────────────── */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--u-950)}
.world__in{
  position:absolute;inset:0;
  transform:translate3d(var(--wx),var(--wy),0) scale(var(--ws));
  transition:transform var(--d-world) var(--e-soft);
}
.world__in.is-moving{will-change:transform}
.world picture,.world img{width:100%;height:100%;display:block}
.world img{object-fit:cover;object-position:50% 46%}

/* ─── 2. réteg: takarás (a szöveg olvashatóságáért) ──────────────────── */
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  /* A háttér ~10%-kal világosabb: a sötétítő fátyol átlátszatlansága 0,90-szeresre
     csökkentve. Szűrő helyett ezt állítjuk, mert a fátyol amúgy is itt van —
     így nincs futásidejű költség, és a festmény adatai sem sérülnek.
     Eredeti értékek: .20 .62 .86  /  .72 .30 .80 */
  background:
    radial-gradient(125% 95% at 50% 42%, rgba(21,14,9,.18) 0%, rgba(21,14,9,.558) 58%, rgba(16,11,7,.774) 100%),
    linear-gradient(180deg, rgba(16,11,7,.648) 0%, rgba(21,14,9,.27) 26%, rgba(16,11,7,.72) 100%);
}

/* ─── 3. réteg: szirmok (a háttér ÉS a tartalom között) ──────────────── */
.petals{position:fixed;inset:0;z-index:2;pointer-events:none;
  transition:transform 1100ms var(--e-soft)}

/* ─── 4. réteg: címer ────────────────────────────────────────────────── */
.brand{position:fixed;z-index:6;top:0;left:0;right:0;padding:14px 18px;pointer-events:none;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(16,11,7,.88) 0%,rgba(16,11,7,.55) 55%,transparent 100%)}
.brand__link{pointer-events:auto;width:max-content}
.brand__link{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream);
  padding:6px 10px 6px 6px;border-radius:3px;transition:background .2s var(--e-soft),transform .35s var(--e-weight)}
.brand__link:hover{background:rgba(27,18,11,.6);transform:translateX(2px)}
.brand__mon{width:34px;height:34px;color:var(--amb-300);flex:none;
  transition:transform .6s var(--e-weight),color .25s}
.brand__link:hover .brand__mon{transform:rotate(-8deg) scale(1.06);color:var(--amb-200)}
.brand__txt{display:flex;flex-direction:column;line-height:1.18}
.brand__txt b{font:600 .86rem/1.2 var(--f-disp);letter-spacing:.01em}
.brand__txt i{font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amb-300)}

/* ─── 5. réteg: a színpad és a szobák ────────────────────────────────── */
.stage{position:fixed;inset:0;z-index:4}
.room{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:rgba(217,151,63,.42) transparent}
.room[hidden]{display:none}
.room::-webkit-scrollbar{width:10px}
.room::-webkit-scrollbar-thumb{background:rgba(217,151,63,.34);border-radius:0;
  border:3px solid transparent;background-clip:padding-box}
.room::-webkit-scrollbar-thumb:hover{background:rgba(217,151,63,.6);background-clip:padding-box}
.room:focus{outline:none}
.room__in{min-height:100%;display:flex;justify-content:center;align-items:flex-start;
  padding:var(--stage-pt) 16px var(--stage-pb)}

.panel{
  width:100%;max-width:var(--panel-w);
  background:linear-gradient(178deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--hair);
  border-top:2px solid var(--amb-500);
  padding:clamp(1.3rem,1rem + 2.2vw,2.6rem) clamp(1.1rem,.8rem + 2.2vw,2.6rem) clamp(1.6rem,1.2rem + 2vw,2.8rem);
  box-shadow:0 26px 70px -22px rgba(0,0,0,.85), 0 2px 0 rgba(246,207,146,.05) inset;
  position:relative;
}
.panel--wide{max-width:var(--panel-w-wide)}
.panel::after{content:'';position:absolute;inset:7px;border:1px solid var(--hair-2);pointer-events:none}

/* ─── tipográfia ─────────────────────────────────────────────────────── */
.eyebrow{margin:0 0 .55rem;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amb-300);display:flex;align-items:center;gap:.6rem}
.eyebrow__mark{font-size:1.05rem;letter-spacing:0;color:var(--amb-400);opacity:.85}
.room__title{margin:0 0 .5rem;font:800 var(--t-h1)/1.02 var(--f-disp);letter-spacing:-.02em;
  color:var(--cream);text-wrap:balance}
.lead{margin:0 0 1.6rem;font-size:var(--t-lead);line-height:1.55;color:var(--cream-2);max-width:60ch}
.h2{margin:2.2rem 0 .8rem;font:600 var(--t-h2)/1.2 var(--f-disp);color:var(--amb-200);
  letter-spacing:-.01em;padding-bottom:.45rem;border-bottom:1px solid var(--hair-2)}
.h2--flush{margin-top:0;border-bottom:0;padding-bottom:0}
.h3{margin:0 0 .4rem;font:600 var(--t-h3)/1.25 var(--f-disp);color:var(--amb-200)}
.scroll p{margin:0 0 .9rem;max-width:66ch;color:var(--cream-2)}
.scroll b,.scroll strong{color:var(--cream);font-weight:600}
.fine{font-size:var(--t-small);color:var(--cream-3);max-width:64ch;margin:.7rem 0 0}
.link{color:var(--amb-300);text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{color:var(--amb-200)}
.todo{color:var(--isko);font-style:italic;white-space:nowrap}
.todo--big{font-style:normal;font-weight:700;font-size:1.05rem}
.onward{margin:2rem 0 0;padding-top:1rem;border-top:1px solid var(--hair-2);
  font-size:var(--t-small);color:var(--cream-3)}
.onward b{color:var(--amb-300)}
.count{margin:.2rem 0 1rem;font-size:var(--t-small);color:var(--cream-3);letter-spacing:.03em}
.empty{margin:1.4rem 0;padding:1.1rem 1.2rem;border:1px dashed var(--hair);
  color:var(--cream-3);font-size:var(--t-small)}
.note{margin:1.6rem 0 0;padding:.95rem 1.1rem;border-left:3px solid var(--amb-500);
  background:rgba(58,39,22,.5);font-size:var(--t-small);color:var(--cream-2)}
.note b{color:var(--amb-200)}

/* ─── gombok ─────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.66rem 1.15rem;border:1px solid var(--amb-500);background:transparent;color:var(--amb-200);
  font-weight:600;font-size:.92rem;letter-spacing:.01em;border-radius:2px;cursor:pointer;
  transition:transform .3s var(--e-weight),background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{background:rgba(192,127,46,.16);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(0,0,0,.9)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--amber{background:linear-gradient(178deg,var(--amb-300),var(--amb-500));color:#1a1108;
  border-color:var(--amb-300);font-weight:700}
.btn--amber:hover{background:linear-gradient(178deg,var(--amb-200),var(--amb-400));color:#160e06}
.btn--ghost{border-color:var(--hair);color:var(--cream-2)}
.btn--ghost:hover{border-color:var(--amb-500);color:var(--amb-200)}
.btn--sm{padding:.4rem .8rem;font-size:.82rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none;
  box-shadow:none;background:transparent;color:var(--cream-3);border-color:var(--hair-2)}
.btn--amber[disabled]{background:rgba(122,74,34,.3)}
.btn__arrow{transition:transform .35s var(--e-weight)}
.btn:hover .btn__arrow{transform:translateY(3px)}
.spin{display:none;width:15px;height:15px;border:2px solid rgba(26,17,8,.35);
  border-top-color:#1a1108;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-loading .spin{display:block}
.btn.is-loading{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--amb-300);outline-offset:2px;border-radius:2px}

/* ─── KAMIZA ─────────────────────────────────────────────────────────── */
.sensei{display:grid;grid-template-columns:1fr;gap:.5rem;text-align:center;align-items:start;
  padding:1.2rem;border:1px solid var(--hair);background:rgba(58,39,22,.35);margin-bottom:.6rem}
.sensei__name{margin-bottom:.2rem}
.sensei .sensei__photo{width:min(480px,100%);justify-self:center;margin:-.4rem 0 -.2rem}
.sensei picture{display:block}
.sensei__img{display:block;width:100%;height:auto}
.sensei__role{margin:.1rem 0 .7rem;font-size:var(--t-small);letter-spacing:.06em;
  text-transform:uppercase;color:var(--amb-300)}
.sensei__txt p{margin:0 0 .55rem;color:var(--cream-2)}

.gogen{margin:0}
.gogen__i{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--hair-2)}
.gogen__i:last-child{border-bottom:0}
.gogen dt{font:600 1rem/1.3 var(--f-disp);color:var(--amb-200)}
.gogen dt span{display:block;font-size:.8rem;color:var(--cream-3);font-family:var(--f-body)}
.gogen dd{margin:0;color:var(--cream-2);font-size:.94rem}
.gogen dd b{color:var(--cream)}

.kun{list-style:none;counter-reset:k;margin:0;padding:0}
.kun li{counter-increment:k;display:grid;grid-template-columns:2.2rem 1fr;gap:.9rem;
  padding:.6rem 0;border-bottom:1px solid var(--hair-2)}
.kun li:last-child{border-bottom:0}
.kun li::before{content:'一';font:600 1.1rem/1.4 var(--f-disp);color:var(--amb-500);text-align:center}
.kun__hu{display:block;color:var(--cream);font-weight:600}
.kun__jp{display:block;font-size:var(--t-small);color:var(--cream-3);font-style:italic}

.belts{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(5.4rem,1fr))}
.belts li{padding:.55rem .6rem .6rem;border:1px solid var(--hair-2);
  background:rgba(34,23,14,.6);transition:transform .3s var(--e-weight),border-color .25s}
.belts li:hover{transform:translateY(-3px);border-color:var(--amb-500)}
.belts__sw{display:block;height:9px;margin-bottom:.5rem;border:1px solid rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset}
.belts__n{font-size:.78rem;color:var(--cream-2);letter-spacing:.01em;overflow-wrap:anywhere}
.belts__k{display:block;font-size:var(--t-micro);color:var(--cream-3)}

.tblwrap{overflow-x:auto;border:1px solid var(--hair-2);scrollbar-width:thin}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.tbl__cap{caption-side:bottom;text-align:left;padding:.7rem .8rem;font-size:var(--t-small);
  color:var(--cream-3);background:rgba(16,11,7,.5)}
.tbl th,.tbl td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--hair-2);
  vertical-align:top}
.tbl thead th{background:rgba(58,39,22,.6);color:var(--amb-200);font-weight:600;
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;position:sticky;top:0}
.tbl tbody tr:hover{background:rgba(58,39,22,.3)}
.tbl td:first-child{color:var(--amb-300);font-weight:600;white-space:nowrap}

/* ─── TATAMI ─────────────────────────────────────────────────────────── */
.board{border:1px solid var(--amb-600);background:rgba(58,39,22,.42);padding:1.1rem 1.2rem 1.2rem}
.board__k{margin:0 0 .8rem;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amb-300)}
.board__rows{list-style:none;margin:0;padding:0}
.board__rows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;
  padding:.55rem 0;border-bottom:1px solid var(--hair-2)}
.board__rows li:last-child{border-bottom:0}
.board__d{flex:0 0 6rem;font:600 1.05rem/1.2 var(--f-disp);color:var(--cream)}
.board__h{font:800 1.35rem/1.1 var(--f-disp);color:var(--amb-200);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.board__p{flex:1 1 12rem;font-size:var(--t-small);color:var(--cream-3);text-align:right}
.board__note{margin:.9rem 0 0;font-size:var(--t-small);color:var(--cream-3)}

.what{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.what li{padding:.7rem .9rem .75rem 2.1rem;position:relative;border:1px solid var(--hair-2);
  background:rgba(34,23,14,.45);color:var(--cream-2);font-size:.94rem;
  transition:border-color .25s,transform .3s var(--e-weight)}
.what li::before{content:'◈';position:absolute;left:.8rem;top:.72rem;color:var(--amb-400);font-size:.8rem}
.what li:hover{border-color:var(--amb-600);transform:translateX(3px)}
.what b{color:var(--cream)}

.quote{margin:2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--hair-2)}
.quote p{margin:0;font:600 clamp(1.1rem,1rem + .6vw,1.4rem)/1.35 var(--f-disp);color:var(--amb-200)}
.quote p b{color:var(--cream)}
.quote cite{display:block;margin-top:.5rem;font-size:var(--t-small);font-style:normal;color:var(--cream-3)}

.cta{margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.1rem 1.2rem;border:1px solid var(--amb-600);
  background:linear-gradient(100deg,rgba(122,74,34,.42),rgba(58,39,22,.28))}
.cta__txt{display:flex;flex-direction:column;gap:.15rem}
.cta__txt b{font:600 1.1rem/1.3 var(--f-disp);color:var(--cream)}
.cta__txt span{font-size:var(--t-small);color:var(--cream-2)}

.dirs{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.dirs__b{display:grid;grid-template-columns:2rem 1fr;grid-template-rows:auto auto;
  gap:.1rem .6rem;width:100%;text-align:left;padding:.75rem .9rem;cursor:pointer;
  background:rgba(34,23,14,.55);border:1px solid var(--hair-2);border-radius:2px;
  transition:border-color .25s,background .25s,transform .35s var(--e-weight)}
.dirs__b:hover{border-color:var(--amb-500);background:rgba(58,39,22,.62);transform:translateY(-3px)}
.dirs__a{grid-row:1/3;align-self:center;font-size:1.35rem;color:var(--amb-400);
  transition:transform .35s var(--e-weight)}
.dirs__b:hover .dirs__a{transform:scale(1.2)}
.dirs__b b{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--amb-300)}
.dirs__b i{font-style:normal;font-size:.92rem;color:var(--cream-2)}

/* ─── HÍRFAL ─────────────────────────────────────────────────────────── */
.sub{outline:none}
.news{display:grid;gap:.7rem}
.ncard{display:grid;grid-template-columns:9.5rem 1fr;gap:0;width:100%;text-align:left;cursor:pointer;
  background:rgba(30,20,12,.6);border:1px solid var(--hair-2);border-left:3px solid var(--amb-600);
  padding:0;border-radius:0;overflow:hidden;
  transition:border-color .25s,background .25s,transform .4s var(--e-weight),box-shadow .3s}
.ncard:hover{background:rgba(58,39,22,.55);border-left-color:var(--amb-300);transform:translateX(5px);
  box-shadow:-4px 8px 22px -12px rgba(0,0,0,.9)}
.ncard__thumb{display:block;position:relative;overflow:hidden;background:var(--u-800);aspect-ratio:4/3}
.ncard__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  transition:transform .7s var(--e-soft);opacity:.92}
.ncard:hover .ncard__thumb img{transform:scale(1.07);opacity:1}
.ncard__body{padding:.85rem 1rem .95rem}
.ncard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.35rem}
.ncard__date{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);
  font-variant-numeric:tabular-nums}
.tag{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;padding:.12rem .5rem;
  border:1px solid var(--hair);color:var(--amb-300)}
.tag--verseny{border-color:var(--amb-500)}
.tag--vizsga{border-color:rgba(140,186,221,.45);color:var(--isko)}
.tag--tabor{border-color:rgba(169,196,124,.45);color:var(--ok)}
.tag--informacio{border-color:var(--hair-2);color:var(--cream-3)}
.ncard__t{display:block;margin:0 0 .3rem;font:600 1.14rem/1.25 var(--f-disp);color:var(--cream)}
.ncard__l{display:block;margin:0;font-size:.9rem;color:var(--cream-2)}
.ncard__more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;
  font-size:var(--t-small);color:var(--amb-300);letter-spacing:.03em}
.ncard__more span{transition:transform .35s var(--e-weight)}
.ncard:hover .ncard__more span{transform:translateX(4px)}

.back{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.2rem;padding:.4rem .8rem .4rem .55rem;
  background:transparent;border:1px solid var(--hair-2);color:var(--cream-2);font-size:var(--t-small);
  cursor:pointer;transition:border-color .2s,color .2s,transform .3s var(--e-weight)}
.back:hover{border-color:var(--amb-500);color:var(--amb-200);transform:translateX(-3px)}

.art__meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.5rem}
.art h2{margin:.1rem 0 .8rem;font:800 clamp(1.6rem,1.2rem + 1.8vw,2.5rem)/1.08 var(--f-disp);
  color:var(--cream);letter-spacing:-.02em}
.art__body p{margin:0 0 .9rem;color:var(--cream-2);max-width:64ch}
.res{margin:1.6rem 0 0}
.res__h{margin:0 0 .6rem;font:600 var(--t-h3)/1.2 var(--f-disp);color:var(--amb-200)}
.res table{width:100%;border-collapse:collapse;font-size:.9rem}
.res th,.res td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid var(--hair-2)}
.res thead th{background:rgba(58,39,22,.6);color:var(--amb-200);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase}
.res tbody tr:hover{background:rgba(58,39,22,.28)}
.res td:first-child{color:var(--cream);font-weight:600}
.res__p{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.res__p[data-p="1"]{color:var(--amb-200)}
.res__p[data-p="2"]{color:var(--cream-2)}
.res__p[data-p="3"]{color:var(--bronze)}
.medal{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.4rem;
  vertical-align:.02rem}
.medal[data-p="1"]{background:var(--amb-300)}
.medal[data-p="2"]{background:#b9b4ab}
.medal[data-p="3"]{background:#a4703f}

.strip{list-style:none;display:grid;gap:.5rem;margin:1.6rem 0 0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}

/* ─── GALÉRIA + képlapok ─────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
.chip{padding:.34rem .8rem;font-size:var(--t-small);letter-spacing:.02em;cursor:pointer;
  background:transparent;border:1px solid var(--hair-2);color:var(--cream-3);border-radius:2px;
  transition:border-color .2s,color .2s,background .2s,transform .3s var(--e-weight)}
.chip:hover{border-color:var(--amb-500);color:var(--amb-200);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:rgba(192,127,46,.2);border-color:var(--amb-400);color:var(--amb-200);
  font-weight:600}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.shot{position:relative;display:block;width:100%;padding:0;border:1px solid var(--hair-2);
  background:var(--u-800);cursor:zoom-in;overflow:hidden;aspect-ratio:4/3;
  transition:border-color .25s,transform .4s var(--e-weight),box-shadow .35s}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:.9;
  transition:transform .8s var(--e-soft),opacity .3s}
.shot:hover,.shot:focus-visible{border-color:var(--amb-400);transform:translateY(-4px) scale(1.012);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.95);z-index:1}
.shot:hover img,.shot:focus-visible img{transform:scale(1.08);opacity:1}
.shot::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(16,11,7,.8));opacity:0;transition:opacity .3s}
.shot:hover::after{opacity:1}
.shot__z{position:absolute;right:.4rem;bottom:.4rem;z-index:2;font-size:.72rem;color:var(--amb-200);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .35s var(--e-weight)}
.shot:hover .shot__z,.shot:focus-visible .shot__z{opacity:1;transform:none}

/* ─── KATAFAL ────────────────────────────────────────────────────────── */
.katabar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-start;justify-content:space-between}
.katabar .chips{flex:1 1 22rem;margin-bottom:.4rem}
.search{flex:0 1 15rem}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],
input[type=password],input[type=date],select,textarea{
  width:100%;padding:.55rem .7rem;background:rgba(16,11,7,.72);color:var(--cream);
  border:1px solid var(--hair-2);border-radius:2px;transition:border-color .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:rgba(217,151,63,.35)}
input:focus,select:focus,textarea:focus{border-color:var(--amb-400);background:rgba(16,11,7,.9);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amb-300);outline-offset:1px}
input::placeholder,textarea::placeholder{color:#a08b71}
textarea{resize:vertical;min-height:6rem}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--amb-400) 50%),
  linear-gradient(135deg,var(--amb-400) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15rem,calc(100% - 13px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
input[disabled],textarea[disabled],select[disabled]{opacity:.45;cursor:not-allowed}

.kgrid{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.kcard{display:flex;flex-direction:column;width:100%;padding:0;text-align:left;cursor:pointer;
  background:rgba(30,20,12,.62);border:1px solid var(--hair-2);border-radius:0;overflow:hidden;
  transition:border-color .25s,transform .4s var(--e-weight),box-shadow .35s}
.kcard:hover{border-color:var(--amb-400);transform:translateY(-4px);
  box-shadow:0 16px 32px -18px rgba(0,0,0,.95)}
.kposter{position:relative;aspect-ratio:16/9;background:
  radial-gradient(90% 120% at 30% 20%,rgba(122,74,34,.55),transparent 60%),
  linear-gradient(160deg,var(--cin-700),var(--u-850));
  display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--hair-2)}
.kposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;
  transition:opacity .3s,transform .7s var(--e-soft)}
.kcard:hover .kposter img{opacity:.95;transform:scale(1.05)}
.kposter__mark{position:absolute;right:.45rem;bottom:.1rem;font:800 2.7rem/1 var(--f-disp);
  color:rgba(246,207,146,.15);letter-spacing:.05em}
.kplay{position:absolute;left:50%;top:50%;translate:-50% -50%;width:46px;height:32px;border-radius:6px;
  background:rgba(21,14,9,.78);border:1px solid var(--amb-500);display:grid;place-items:center;
  transition:background .25s,transform .4s var(--e-weight),border-color .25s}
.kplay::after{content:'';border-left:10px solid var(--amb-200);border-top:6.5px solid transparent;
  border-bottom:6.5px solid transparent;margin-left:2px}
.kcard:hover .kplay{background:var(--amb-400);border-color:var(--amb-200);transform:scale(1.12)}
.kcard:hover .kplay::after{border-left-color:#1a1108}
.kbadge{position:absolute;left:.4rem;top:.4rem;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.14rem .42rem;background:rgba(21,14,9,.82);
  border:1px solid var(--amb-500);color:var(--amb-200)}
.kmeta{padding:.6rem .75rem .7rem;display:flex;flex-direction:column;gap:.12rem;flex:1}
.kmeta__n{font:600 1rem/1.2 var(--f-disp);color:var(--cream)}
.kmeta__a{font-size:var(--t-micro);color:var(--cream-3);font-style:italic}
.kmeta__f{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.3rem}
.kmeta__f span{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cream-3);
  border:1px solid var(--hair-2);padding:.08rem .38rem}
.kmeta__f .is-kyu{color:var(--amb-300);border-color:var(--amb-600)}

.player{background:rgba(30,20,12,.6);border:1px solid var(--hair);padding:1.1rem;outline:none}
.player h2{margin:0 0 .2rem;font:800 clamp(1.5rem,1.2rem + 1.4vw,2.2rem)/1.1 var(--f-disp);color:var(--cream)}
.player__sub{margin:0 0 1rem;font-size:var(--t-small);color:var(--cream-3)}
.frame{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,var(--cin-700),var(--u-900));
  border:1px solid var(--hair-2);display:grid;place-items:center;text-align:center;padding:1.2rem}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame__msg{max-width:44ch;color:var(--cream-2);font-size:.94rem}
.frame__msg b{display:block;font:600 1.1rem/1.3 var(--f-disp);color:var(--amb-200);margin-bottom:.4rem}

/* ─── PORTA ──────────────────────────────────────────────────────────── */
.places{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-bottom:1.4rem}
.place{padding:.95rem 1.05rem;border:1px solid var(--hair-2);background:rgba(34,23,14,.5)}
.place p{margin:0 0 .4rem;font-size:.92rem;color:var(--cream-2)}
.place__t{font-size:var(--t-small);color:var(--amb-300)}
.kv{margin:0;display:grid;gap:0}
.kv>div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--hair-2)}
.kv>div:last-child{border-bottom:0}
.kv dt{font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.kv dd{margin:0;color:var(--cream-2)}

.form{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.f{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.f--wide{grid-column:1/-1}
.f label{font-size:var(--t-small);letter-spacing:.05em;color:var(--cream-2)}
.req{color:var(--amb-400)}
.opt{color:var(--cream-3);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
.hint{margin:.15rem 0 0;font-size:var(--t-micro);color:var(--cream-3)}
.err{margin:.15rem 0 0;font-size:var(--t-small);color:var(--bad);display:flex;gap:.35rem;align-items:flex-start}
.err::before{content:'▲';font-size:.6rem;margin-top:.35em}
[aria-invalid="true"]{border-color:var(--bad)!important;background:rgba(240,160,117,.08)}
.f--actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.formstatus{grid-column:1/-1;margin:0;font-size:.92rem;min-height:1.4em}
.formstatus[data-s="ok"]{color:var(--ok)}
.formstatus[data-s="bad"]{color:var(--bad)}

/* ─── IRODA ──────────────────────────────────────────────────────────── */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.docs li{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;
  padding:.65rem .85rem;border:1px solid var(--hair-2);background:rgba(34,23,14,.45)}
.docs__m{display:flex;flex-direction:column;min-width:12rem}
.docs b{color:var(--cream);font-weight:600}
.docs i{font-style:normal;font-size:var(--t-small);color:var(--cream-3)}
.docs__s{display:flex;align-items:center;gap:.6rem}
.docs__s em{font-style:normal;font-size:var(--t-micro);color:var(--cream-3);letter-spacing:.04em}
/* ─── TÁJOLÓ ─────────────────────────────────────────────────────────── */
.compass{position:fixed;z-index:7;left:50%;translate:-50% 0;bottom:34px;width:min(520px,calc(100vw - 24px));
  background:linear-gradient(178deg,rgba(30,20,12,.96),rgba(18,12,7,.98));
  border:1px solid var(--hair);box-shadow:0 20px 50px -20px rgba(0,0,0,.95)}
.compass__bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:stretch}
.compass__step{background:transparent;border:0;border-right:1px solid var(--hair-2);color:var(--amb-300);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:.4rem;
  transition:background .2s,color .2s,transform .3s var(--e-weight)}
.compass__step:last-child{border-right:0;border-left:1px solid var(--hair-2)}
.compass__step:hover{background:rgba(192,127,46,.16);color:var(--amb-200)}
.compass__step:first-child:hover{transform:translateX(-2px)}
.compass__step:last-child:hover{transform:translateX(2px)}
.compass__toggle{display:grid;gap:.05rem;justify-items:center;background:transparent;border:0;
  padding:.5rem .6rem;cursor:pointer;position:relative;transition:background .2s}
.compass__toggle:hover{background:rgba(192,127,46,.1)}
.compass__eyebrow{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-3)}
.compass__here{font:600 1.02rem/1.2 var(--f-disp);color:var(--amb-200)}
.compass__caret{position:absolute;right:.7rem;top:50%;translate:0 -50%;font-size:.6rem;color:var(--amb-400);
  transition:transform .35s var(--e-weight)}
.compass__toggle[aria-expanded="true"] .compass__caret{transform:rotate(180deg)}
.compass__body{display:none;padding:.9rem 1rem 1rem;border-top:1px solid var(--hair-2)}
.compass.is-open .compass__body{display:block;animation:sheet .4s var(--e-weight)}
@keyframes sheet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.compass__lbl{margin:0 0 .55rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-3)}
.compass__hint{margin:.7rem 0 0;font-size:var(--t-micro);color:var(--cream-3);text-align:center}
kbd{font:inherit;font-size:.9em;border:1px solid var(--hair-2);padding:0 .25rem;border-radius:2px;
  color:var(--amb-300)}

.plan{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:2.9rem;gap:6px;
  padding:.5rem;border:1px solid var(--hair-2);background:
  repeating-linear-gradient(90deg,rgba(217,151,63,.05) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(0deg,rgba(217,151,63,.05) 0 1px,transparent 1px 24px),
  rgba(16,11,7,.5)}
.cell{position:relative;display:grid;place-items:center;gap:0;padding:2px;cursor:pointer;min-height:2.5rem;
  background:rgba(58,39,22,.45);border:1px solid var(--hair-2);color:var(--cream-3);
  transition:background .25s,border-color .25s,color .25s,transform .3s var(--e-weight)}
.cell:hover{background:rgba(122,74,34,.55);border-color:var(--amb-500);color:var(--amb-200);
  transform:scale(1.06);z-index:2}
.cell__g{font-size:1rem;line-height:1}
.cell[aria-current="true"]{background:linear-gradient(178deg,var(--amb-300),var(--amb-500));
  border-color:var(--amb-200);color:#1a1108;font-weight:700;
  box-shadow:0 0 0 1px rgba(246,207,146,.4),0 0 18px -2px rgba(217,151,63,.55)}
.cell[aria-current="true"] .cell__g{transform:scale(1.1)}
.cell.has-e::after,.cell.has-s::before{content:'';position:absolute;background:var(--amb-600);opacity:.55}
.cell.has-e::after{right:-7px;top:50%;translate:0 -50%;width:8px;height:2px}
.cell.has-s::before{bottom:-7px;left:50%;translate:-50% 0;height:8px;width:2px}
.cell__t{position:static;font-size:.5rem;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.15;text-align:center;padding:2px 2px;
  /* Szótagoló törés nélkül: a "KATA-FAL" olvashatatlanul csúnya. A kétszavas
     "hátsó szoba" magától tördelődik, az rendben van. */
  hyphens:none;overflow-wrap:normal;word-break:normal;
  opacity:.82;transition:opacity .2s}
.cell:hover .cell__t,.cell[aria-current="true"] .cell__t{opacity:1}

.rose{margin:.9rem auto 0;width:11.5rem;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:4px;place-items:stretch}
.rose__b{display:grid;place-items:center;gap:0;background:rgba(34,23,14,.6);border:1px solid var(--hair-2);
  color:var(--amb-300);cursor:pointer;padding:.3rem .1rem;
  transition:background .2s,border-color .2s,color .2s,transform .3s var(--e-weight)}
.rose__b:hover:not([disabled]){background:rgba(122,74,34,.6);border-color:var(--amb-400);color:var(--amb-200)}
.rose__b--u{grid-area:1/2}.rose__b--l{grid-area:2/1}.rose__b--r{grid-area:2/3}.rose__b--d{grid-area:3/2}
.rose__b--u:hover:not([disabled]){transform:translateY(-3px)}
.rose__b--d:hover:not([disabled]){transform:translateY(3px)}
.rose__b--l:hover:not([disabled]){transform:translateX(-3px)}
.rose__b--r:hover:not([disabled]){transform:translateX(3px)}
.rose__b[disabled]{opacity:.28;cursor:not-allowed}
.rose__a{font-size:1.05rem;line-height:1}
.rose__t{font-size:.53rem;letter-spacing:.1em;text-transform:uppercase}
.rose__c{grid-area:2/2;display:grid;place-items:center;color:var(--amb-600);font-size:.9rem}

/* ─── LIGHTBOX ───────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lb[hidden]{display:none}
.lb__scrim{position:absolute;inset:0;background:rgba(9,6,4,.93);cursor:zoom-out}
.lb__fig{position:relative;margin:0;max-width:min(1200px,92vw);max-height:82vh;display:flex;
  flex-direction:column;gap:.7rem;align-items:center}
.lb__img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--hair);box-shadow:0 30px 80px -30px #000}
.lb__cap{font-size:var(--t-small);color:var(--cream-2);text-align:center;max-width:70ch;line-height:1.5}
.lb__x,.lb__nav{position:absolute;z-index:2;background:rgba(21,14,9,.85);border:1px solid var(--hair);
  color:var(--amb-200);cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s,transform .3s var(--e-weight)}
.lb__x{top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);width:42px;height:42px;font-size:1.1rem}
.lb__nav{top:50%;translate:0 -50%;width:46px;height:76px;font-size:2rem;line-height:1}
.lb__nav--p{left:clamp(.4rem,1.5vw,1.2rem)}
.lb__nav--n{right:clamp(.4rem,1.5vw,1.2rem)}
.lb__x:hover,.lb__nav:hover{background:var(--amb-400);color:#1a1108;border-color:var(--amb-200)}
.lb__nav--p:hover{transform:translate(-4px,-50%)}
.lb__nav--n:hover{transform:translate(4px,-50%)}
.lb__x:hover{transform:rotate(90deg)}
.lb__n{position:absolute;left:50%;translate:-50% 0;bottom:clamp(.6rem,2vw,1.2rem);margin:0;
  font-size:var(--t-small);color:var(--cream-3);font-variant-numeric:tabular-nums;
  background:rgba(21,14,9,.8);padding:.2rem .7rem;border:1px solid var(--hair-2)}

/* ─── TOAST ──────────────────────────────────────────────────────────── */
.toaster{position:fixed;z-index:30;left:50%;translate:-50% 0;top:14px;display:grid;gap:.4rem;
  width:min(30rem,calc(100vw - 24px));pointer-events:none}
.toast{padding:.65rem .9rem;border:1px solid var(--amb-500);background:rgba(30,20,12,.97);
  color:var(--cream);font-size:.9rem;box-shadow:0 14px 34px -16px rgba(0,0,0,.95);
  animation:toastIn .45s var(--e-weight)}
.toast[data-s="bad"]{border-color:var(--bad)}
.toast[data-s="ok"]{border-color:var(--ok)}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}

/* ─── reszponzív ─────────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--par-x:10px;--par-y:8px;--ws-base:1.17;--stage-pt:74px;--stage-pb:130px}
  .world__in{transform:translate3d(var(--wx),var(--wy),0) scale(var(--ws))}
  .room__in{padding-left:10px;padding-right:10px}
  .panel{border-left-width:0;border-right-width:0}
  .panel::after{inset:5px 0}
  .ncard{grid-template-columns:1fr}
  .ncard__thumb{aspect-ratio:16/9}
  .ncard__thumb img{object-position:50% 24%}
  .gogen__i{grid-template-columns:1fr;gap:.2rem}
  .kv>div{grid-template-columns:1fr;gap:.1rem;padding:.5rem 0}
  .board__p{text-align:left;flex-basis:100%}
  .lb__nav{width:38px;height:60px;font-size:1.6rem}
  .docs li{gap:.4rem}
}
@media (min-width:1280px){
  .compass{left:24px;bottom:24px;translate:none;width:346px}
  .compass__bar{grid-template-columns:38px 1fr 38px}
  .compass__caret{display:none}
  .compass__body{display:block}
  :root{--stage-pb:40px}
  .room__in{padding-left:376px;padding-right:60px}
  .panel{margin-left:auto;margin-right:auto}
}
@media (min-width:1600px){
  .room__in{padding-left:396px;padding-right:140px}
}

/* ─── prefers-reduced-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .world__in{transform:none!important}
  .petals{transform:none!important;display:none}
  .btn:hover,.ncard:hover,.shot:hover,.kcard:hover,.dirs__b:hover,.cell:hover,.rose__b:hover{transform:none}
}

/* ─── A klub fejléce a kapun ────────────────────────────────────────
   A borito.jpg fehér vignettája alfára van cserélve (lásd ../shared/img),
   ezért ez a kép beleolvad a sötét térbe, nem fehér téglalapként ül rajta.
   Csak a kezdőszobában jelenik meg, és ott átveszi a kis címer szerepét —
   különben kétszer szerepelne ugyanaz a márkajelzés a képernyő tetején. */



.banner{
  width:100%;
  max-width:min(680px, 92vw);
  margin:0;
  text-align:center;
  /* A fejléc saját fotója (folyó, fák) versenyezne a mögötte lévő festménnyel,
     és a fehér vignettája világos téglalapként ütne el. Ez a lágy fátyol adja
     alá a sötét alapot: a kép széle így sötétbe olvad, nem a festménybe.
     Gradiens, nem szűrő — szándékosan olcsó. */
  background:radial-gradient(ellipse 72% 80% at 50% 46%,
    rgba(16,11,7,.90) 0%, rgba(16,11,7,.74) 52%, rgba(16,11,7,0) 78%);
}
.banner__img{
  display:block;
  width:100%;
  height:auto;
  /* A kép szélei átlátszóak, ezért nem kell keret és nem kell árnyék —
     a drop-shadow ráadásul szűrő, azt pedig nagy képen kerüljük. */
}
.banner__name{
  margin:.15rem 0 0;
  font:600 .74rem/1.3 var(--f-disp);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amb-300);
}
.banner__name span{color:var(--amb-500)}

/* A fejléc a szobával együtt érkezik: a body[data-room] váltásakor a
   szabály újra illeszkedik, ezért az animáció magától újraindul. */
body[data-room="kapu"] .banner{
  animation:banner-in .85s var(--e-weight) both;
}
@keyframes banner-in{
  from{opacity:0;transform:translateY(-14px) scale(.985)}
  to  {opacity:1;transform:none}
}





@media (prefers-reduced-motion: reduce){
  body[data-room="kapu"] .banner{animation:none}
}


/* ─── A tájoló fejléce és figyelemfelhívó fénye ───────────────────────── */

.compass__head{
  margin:0;
  padding:.5rem .7rem .45rem;
  text-align:center;
  font:600 .68rem/1.2 var(--f-disp);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--amb-300);
  border-bottom:1px solid var(--hair-2);
}

/* A tájoló könnyen elsikkad a festmény fölött, ezért kap egy lassan
   fel-le úszó fényudvart. Külön réteg, ami CSAK az opacity-t animálja —
   a box-shadow animálása képkockánként újrafestést kérne, a filter pedig
   tiltott ezen a lapon. */
.compass{position:fixed;isolation:isolate}
.compass::after{
  content:'';
  position:absolute;
  inset:-24px;
  z-index:-1;
  pointer-events:none;
  border-radius:10px;
  background:radial-gradient(ellipse at center,
    rgba(246,207,146,.60) 0%, rgba(217,151,63,.34) 38%, rgba(217,151,63,0) 70%);
  opacity:0;
  animation:compass-flash 7s ease-out infinite;
}
/* Felvillan ~200 ms alatt, majd ~2 mp alatt elhalványul, aztán szünet. */
@keyframes compass-flash{
  0%  {opacity:0}
  3%  {opacity:1}
  32% {opacity:0}
  100%{opacity:0}
}
/* Csak akkor áll meg, ha a felhasználó tényleg rajta van — az `is-open`
   NEM jó jelzés erre: 1280px fölött a tájoló alapból nyitva van, mobilon
   pedig megnyitás után nyitva marad, így a szünet gyakorlatilag állandó lett. */
.compass:hover::after,
.compass:focus-within::after{animation-play-state:paused;opacity:0}

/* ─── A fejléckép a panelen belül, a cím alatt ────────────────────────── */

.panel .banner{
  max-width:100%;
  margin:1rem 0 1.35rem;
  /* A panel most áttetsző, ezért a kép átlátszó pereme alatt a festmény
     látszana át; ez a lágy fátyol adja alá a sötét alapot. */
  background:radial-gradient(ellipse 74% 82% at 50% 46%,
    rgba(16,11,7,.72) 0%, rgba(16,11,7,.48) 54%, rgba(16,11,7,0) 79%);
}
.panel .banner__name{
  margin:.35rem 0 0;
  font-size:.66rem;
  letter-spacing:.16em;
}

@media (prefers-reduced-motion: reduce){
  .compass::after{animation:none;opacity:.5}
}

/* ─── A fejléckép kattintható ─────────────────────────────────────────── */

.banner__btn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  position:relative;
  border-radius:2px;
  transition:transform .35s var(--e-weight);
}
.banner__btn:hover{transform:scale(1.012)}
.banner__btn:active{transform:scale(.996)}
.banner__btn:focus-visible{outline:2px solid var(--amb-300);outline-offset:4px}

/* "Teljes méret" jelzés — csak egérrel/fókusszal jelenik meg, hogy a képet
   ne takarja. Érintésen a hover nem ragad be, mert csak :hover-re kapcsol. */
.banner__zoom{
  position:absolute;
  right:8%;
  bottom:14%;
  padding:.3rem .6rem;
  font:600 .58rem/1 var(--f-disp);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
  background:rgba(16,11,7,.82);
  border:1px solid var(--amb-600);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s var(--e-soft),transform .25s var(--e-soft);
  pointer-events:none;
}
.banner__btn:hover .banner__zoom,
.banner__btn:focus-visible .banner__zoom{opacity:1;transform:none}

/* Egyetlen kép a lightboxban: a kép maga is visszazár. */
.lb__img{cursor:zoom-out}

@media (prefers-reduced-motion: reduce){
  .banner__btn:hover,.banner__btn:active{transform:none}
  .banner__zoom{transition:none}
}

/* ─── Vizsgatáblák és kisszótár ───────────────────────────────────────── */

.ovdot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem;
  border:1px solid rgba(255,255,255,.28);vertical-align:-1px}
.ovcell{white-space:nowrap}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

.gloss{display:grid;gap:1.1rem;margin:.9rem 0 0}
@media (min-width:620px){.gloss{grid-template-columns:1fr 1fr}}
.gloss__g{border:1px solid var(--hair);padding:.75rem .85rem;background:rgba(27,18,11,.42)}
.gloss__h{margin:0 0 .5rem;font:600 .68rem/1.2 var(--f-disp);letter-spacing:.16em;
  text-transform:uppercase;color:var(--amb-300)}
.gloss dl{margin:0;display:grid;gap:.28rem}
.gloss dl > div{display:grid;grid-template-columns:minmax(6.5rem,auto) 1fr;gap:.6rem;
  align-items:baseline}
.gloss dt{font-style:italic;color:var(--amb-200)}
.gloss dd{margin:0;color:var(--cream-2,var(--cream));font-size:.9rem}

/* ─── Katafal: csoportfejlécek ────────────────────────────────────────
   A négy kategória (Kihon / Heian / Stílus / Szabadon) magyarázat nélkül
   megfejthetetlen volt a szűrősorban. Így a rács maga mondja meg. */
.kgroup{grid-column:1/-1;margin:1.5rem 0 .1rem;list-style:none}
.kgroup:first-child{margin-top:.2rem}
.kgroup__h{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;
  font:600 1.02rem/1.25 var(--f-disp);color:var(--amb-200);
  border-bottom:1px solid var(--hair);padding-bottom:.4rem}
.kgroup__n{font:600 .6rem/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amb-500);white-space:nowrap}
.kgroup__d{margin:.5rem 0 .2rem;max-width:56ch;font-size:.88rem;color:var(--cream-3,var(--cream))}

/* ─── Az emod.hu-ról átvett klubtartalom ──────────────────────────────
   Köszöntő és a sensei szavai — levélszerű, hogy elváljon a szerkesztői
   szövegtől és látszódjon: ez a mester saját megfogalmazása. */
.letter{
  margin:.9rem 0 1.4rem;padding:1.1rem 1.2rem;
  border-left:3px solid var(--amb-500);
  background:rgba(27,18,11,.5);
}
.letter p{margin:0 0 .8rem}
.letter p:last-of-type{margin-bottom:0}
.letter--tight p{font-size:.94rem}
.letter__sign{
  margin-top:.9rem;text-align:right;
  font:600 .72rem/1.3 var(--f-disp);letter-spacing:.13em;text-transform:uppercase;
  color:var(--amb-300);
}

/* Dojo etikett */
.etiq{margin:.6rem 0 1.2rem}
.etiq__h{
  margin:1.1rem 0 .45rem;
  font:600 .72rem/1.2 var(--f-disp);letter-spacing:.15em;text-transform:uppercase;
  color:var(--amb-300);
}
.etiq__l{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}
.etiq__l li{font-size:.93rem}
.etiq__end{
  margin:1.2rem 0 0;padding:.9rem 1rem;
  border:1px solid var(--hair);background:rgba(27,18,11,.5);
  font-size:.93rem;
}

/* A négy másik stílus */
.styles{margin:.7rem 0 1.3rem;display:grid;gap:.9rem}
@media (min-width:760px){.styles{grid-template-columns:1fr 1fr}}
.styles > div{border:1px solid var(--hair);padding:.8rem .9rem;background:rgba(27,18,11,.42)}
.styles dt{
  margin:0 0 .35rem;
  font:600 1rem/1.2 var(--f-disp);color:var(--amb-200);
}
.styles dd{margin:0;font-size:.9rem}

/* Vizsgaszabályzat */
.rules{margin:.7rem 0 1.3rem;display:grid;gap:1rem}
@media (min-width:900px){.rules{grid-template-columns:1fr 1fr 1fr}}
.rules section{border:1px solid var(--hair);padding:.8rem .9rem;background:rgba(27,18,11,.42)}
.rules__h{
  margin:0 0 .5rem;
  font:600 .68rem/1.2 var(--f-disp);letter-spacing:.15em;text-transform:uppercase;
  color:var(--amb-300);
}
.rules ul{margin:0;padding-left:1.05rem;display:grid;gap:.4rem}
.rules li{font-size:.89rem}

/* ─── Edzésrend-kártya a kapun (a köszöntő alatt) ─────────────────────── */
.board--teaser{margin-top:1.4rem}
.board--teaser .board__note a{color:var(--amb-200);text-decoration:none;border-bottom:1px solid var(--amb-600)}
.board--teaser .board__note a:hover{color:var(--amb-100,var(--cream))}

/* ── Aktuális közlemény: középen, a fejléc sorában; görgetésre kigördül ── */
.notice{pointer-events:auto;position:absolute;top:14px;left:50%;width:min(46rem,calc(100% - 2*236px));
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.42rem .9rem .42rem .8rem;border:1px solid var(--amb-400);
  background:rgba(192,127,46,.22);color:var(--cream);border-radius:2px;text-align:center;
  box-shadow:0 0 0 1px rgba(27,18,11,.5),0 6px 22px rgba(0,0,0,.35);
  transform:translate(-50%,var(--ny,0px));opacity:var(--nop,1);
  transition:opacity .15s linear;animation:notice-in .6s var(--e-weight) both}
.notice.is-gone{visibility:hidden;pointer-events:none}
.notice__k{flex:none;position:relative;padding-left:.95rem;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--amb-200);font-weight:700}
.notice__k::before{content:'';position:absolute;left:0;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;
  border-radius:50%;background:var(--amb-300);box-shadow:0 0 0 0 rgba(234,180,99,.7);
  animation:notice-pulse 2.2s ease-out infinite}
.notice__t{min-width:0;font-size:var(--t-small);font-weight:600;line-height:1.35}
@keyframes notice-in{from{opacity:0;margin-top:-6px}to{opacity:var(--nop,1);margin-top:0}}
@keyframes notice-pulse{0%{box-shadow:0 0 0 0 rgba(234,180,99,.7)}70%{box-shadow:0 0 0 .55rem rgba(234,180,99,0)}100%{box-shadow:0 0 0 0 rgba(234,180,99,0)}}
@media (max-width:900px){.notice{position:static;left:auto;width:100%;flex-basis:100%;transform:translateY(var(--ny,0px))}}
@media (prefers-reduced-motion:reduce){.notice{animation:none}.notice__k::before{animation:none}}

/* ── Készítői jelzés — jobb alsó sarok, keret nélkül, szolidan ─────────── */
.credit{position:fixed;z-index:5;right:16px;bottom:12px;font-size:var(--t-micro);letter-spacing:.06em;
  color:var(--cream-3);opacity:.72;text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:opacity .25s,color .25s}
.credit:hover,.credit:focus-visible{opacity:1;color:var(--amb-200);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1279px){.credit{bottom:9px;right:50%;translate:50% 0;white-space:nowrap}}   /* a tájoló ALATT, középen */

/* ══════════════════════════════════════════════════════════════════════
   Added by the design spec (§2.1 c) — the classes the baked site needs beyond the prototype.
   Each block names its spec section. Everything above this line is the prototype verbatim.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── §3.3 the world offset per room — server-rendered, no JS on first paint ─────────────
   The prototype's placeWorld() computed --wx = x·par-x, --wy = y·par-y, --ws = ws-base + y·.03.
   Per-URL pages make the same numbers a rule keyed on body[data-room]; dojo.js only writes
   the referrer's offset as an inline style for one frame (the counter-moving arrival). */
body[data-room="kapu"]   {--wx:-44px;--wy:0px;--ws:1.12}
body[data-room="kamiza"] {--wx:-22px;--wy:0px;--ws:1.12}
body[data-room="tatami"] {--wx:0px;--wy:0px;--ws:1.12}
body[data-room="katafal"]{--wx:0px;--wy:-16px;--ws:1.09}
body[data-room="hirfal"] {--wx:22px;--wy:0px;--ws:1.12}
body[data-room="galeria"]{--wx:44px;--wy:0px;--ws:1.12}
body[data-room="porta"]  {--wx:0px;--wy:16px;--ws:1.15}
body[data-room="iroda"]  {--wx:22px;--wy:16px;--ws:1.15}
@media (max-width:640px){
  body[data-room="kapu"]   {--wx:-20px;--wy:0px;--ws:1.17}
  body[data-room="kamiza"] {--wx:-10px;--wy:0px;--ws:1.17}
  body[data-room="tatami"] {--wx:0px;--wy:0px;--ws:1.17}
  body[data-room="katafal"]{--wx:0px;--wy:-8px;--ws:1.14}
  body[data-room="hirfal"] {--wx:10px;--wy:0px;--ws:1.17}
  body[data-room="galeria"]{--wx:20px;--wy:0px;--ws:1.17}
  body[data-room="porta"]  {--wx:0px;--wy:8px;--ws:1.20}
  body[data-room="iroda"]  {--wx:10px;--wy:8px;--ws:1.20}
}

/* ─── §6.2 #1 room entry — played by dojo.js on the arriving panel (Web Animations); this
   keyframe is the no-direction fallback a template may use without JS-driven values. */
@keyframes room-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

/* ─── §4.2 / §4.3 / §4.11 / §4.12 link-form controls (D-05): the compass cells, steps and rose
   buttons, the „Merre indulsz?" cards, the gallery shots and the kata tiles are <a href>
   in the baked markup (plain links without JS). Same look as the prototype's <button>s. */
a.cell,a.compass__step,a.rose__b,a.dirs__b,a.shot,a.kcard,a.back,a.ncard{text-decoration:none;color:inherit}
a.compass__step{display:grid;place-items:center}
a.cell{color:var(--cream-3)}
a.rose__b,a.compass__step{color:var(--amb-300)}
.cell--locked .cell__t::before{content:'';display:inline-block;width:10px;height:10px;margin:0 3px -1px 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 4.5V3a2.5 2.5 0 0 1 5 0v1.5' fill='none' stroke='%23eab463' stroke-width='1.2'/%3E%3Crect x='1.5' y='4.5' width='7' height='5' fill='%23eab463'/%3E%3C/svg%3E") center/contain no-repeat}

/* ─── §4.9 hírfal pager — replaces the prototype's inline margin on #newsMore */
.pager{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin:1.4rem 0 0}
.pager__n{font-size:var(--t-small);color:var(--cream-3);font-variant-numeric:tabular-nums}

/* ─── §4.12 belt swatches via data-belt (no inline style — CSP style-src 'self') */
.belts__sw[data-belt="feher"],.ovdot[data-belt="feher"]{background:#efe6d6}
.belts__sw[data-belt="citromsarga"],.ovdot[data-belt="citromsarga"]{background:#e8d24a}
.belts__sw[data-belt="narancssarga"],.ovdot[data-belt="narancssarga"]{background:#df8b2c}
.belts__sw[data-belt="kek"],.ovdot[data-belt="kek"]{background:#3f6f96}
.belts__sw[data-belt="zold"],.ovdot[data-belt="zold"]{background:#3f7a4a}
.belts__sw[data-belt="barna"],.ovdot[data-belt="barna"]{background:#6b4429}
.belts__sw[data-belt="fekete"],.ovdot[data-belt="fekete"]{background:#141210}
.kcard--novideo{cursor:default}
.kcard--novideo:hover{transform:none;border-color:var(--hair-2);box-shadow:none}
/* §4.12 div.rules fallbacks (roomview.php view_rules): a non-title paragraph inside a group, and a
   block that has lost its title + list shape altogether */
.rules__p{margin:0 0 .5rem;font-size:.89rem}
.rules-fb{grid-column:1/-1;font-size:.89rem}

/* ─── §4.10 / §4.12 video facade — local poster + play button; the iframe is created by
   yt.js on the click and nothing is requested from YouTube before it. */
.frame--facade{padding:0}
.frame__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;
  cursor:pointer;display:block}
.frame__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;
  transition:opacity .3s}
.frame__play:hover img,.frame__play:focus-visible img{opacity:.95}
.frame__play .kplay{transition:background .25s,transform .4s var(--e-weight),border-color .25s}
.frame__play:hover .kplay,.frame__play:focus-visible .kplay{background:var(--amb-400);border-color:var(--amb-200);
  transform:scale(1.12)}
.frame__play:hover .kplay::after,.frame__play:focus-visible .kplay::after{border-left-color:#1a1108}
.frame__play:focus-visible{outline:2px solid var(--amb-300);outline-offset:-2px}
.frame--facade .frame__msg{position:relative;z-index:1;pointer-events:none;padding:1.2rem}
.frame noscript{position:relative;z-index:2}
.frame__consent{margin:.6rem 0 0;font-size:var(--t-small);color:var(--cream-3);max-width:64ch}
.frame__title{margin:.8rem 0 .3rem;font:600 1.05rem/1.3 var(--f-disp);color:var(--amb-200)}

/* ─── §4.9–§4.11 (#35) — the renditions arrive as <picture> (WebP source + m.jpg fallback);
   the element is inline by default, so it is dissolved and the <img> keeps the prototype's
   box rules (.ncard__thumb img / .shot img / .frame__play img). */
.ncard__thumb picture,.shot picture,.frame__play picture{display:contents}
/* §4.10 the attached video: heading, facade, cached title, consent line, and the „Videó
   bezárása" button yt.js reveals while the iframe plays (design P6 states) */
.video{margin-top:1.6rem}
.video .h3{margin-bottom:.6rem}
.video__stop{margin-top:.6rem}
/* §4.10 social link buttons (D-3) — a link is not a request; the p.fine lines (#59: the oEmbed
   text cached at save time) take a full row of the flex box, above the buttons */
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.social .fine{flex:1 1 100%;margin:0}

/* ─── §4.11 lightbox caption link (galéria: post title → /hirek/<slug>) */
.lb__cap a{color:var(--amb-300);text-underline-offset:3px}
.lb__cap a:hover,.lb__cap a:focus-visible{color:var(--amb-200)}

/* ─── §4.1 preview ribbon (D-12) — the notice reused on /eloneze/{token} */
.notice--preview{border-color:var(--isko);background:rgba(140,186,221,.16)}
.notice--preview .notice__k{color:var(--isko)}
.notice--preview .notice__k::before{background:var(--isko);animation:none;box-shadow:none}

/* ─── P8 honeypot field — off-screen, never display:none, never type=hidden (contract §4.2) */
.f--hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ─── §4.18 the credit's landmark wrapper — visually nothing */
.credit-wrap{display:contents}

/* ─── §4.3 the lead as a block container — a room's `*.lead` block arrives as save-time
   HTML (`<p>…</p>`), so the templates wrap it in div.lead instead of p.lead; the inner
   paragraphs take the lead's own spacing. */
.lead>p{margin:0}
.lead>p+p{margin-top:.6rem}

/* ─── §4.6 / P1 a11y — the board is a named section and its label an h2 (visually the
   design's p.board__k); the note is a block container, its inner paragraph keeps the note's
   own spacing (the same shape as .lead above). */
.board h2.board__k{font-weight:400;font-family:inherit}
.board__note>p{margin:0}
.board__note>p+p{margin-top:.5rem}

/* ─── §4.4 / P2 — the design's button is a <button data-goto>; baked pages link (contract §5), so
   the same class on an <a> drops the link underline (a.btn: the CTA „A portára", later the porta). */
a.btn{text-decoration:none}

/* The green bar of the live post page after KÖZZÉTÉTEL (design 5.A3 `div.pubbar`, #62): hidden in
   the baked page, shown by dojo.js on the editor's one-time `?kozzeteve` flag; gone on any navigation. */
.pubbar{position:sticky;top:0;z-index:12;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;
  margin:0 0 1rem;padding:.6rem .9rem;border:1px solid var(--ok);background:rgba(30,20,12,.97);
  color:var(--ok);font-weight:600;font-size:var(--t-small)}
.pubbar[hidden]{display:none}
.pubbar .link{font-weight:400}