/* SZARMAZTATOTT FAJL · forras: 11-KARTYAK/epito/prototipus.py
   Ujrageneralas: python 11-KARTYAK/epito/plugin_lapok.py */

/* ══ A LAP ══════════════════════════════════════════════ */
.p360l{margin:0;perspective:820px}
.p360l-sik{position:relative;aspect-ratio:1060/1484;border-radius:15px;
  overflow:hidden;background:#0a0910;cursor:crosshair;
  transform:rotateX(calc(var(--py,0)*-7deg)) rotateY(calc(var(--px,0)*7deg))
    translate3d(calc(var(--px,0)*.9%),calc(var(--py,0)*.7%),0);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 22px 46px rgba(0,0,0,.58)}
.p360l.aktiv .p360l-sik{transition:transform .12s linear}
.p360l-kep{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.p360l-r{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:fill;backface-visibility:hidden;transform-origin:50% 50%}
/* A lap EGYBEN mozdul, mint egy tárgy, amit megdöntesz. Semmi nem mozog
   a lapon BELÜL: sem rétegek egymáson, sem torzítás. Így nem tud sem
   megkettőződni, sem szellemképet hagyni. Az effektek (fólia, akcentus)
   a kész lap tetején ülnek, és együtt dőlnek vele. */
.p360l-sik-kep{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1}

/* ══ AZ AKCENTUS ════════════════════════════════════════
   Kurzorra „bekapcsol egy lágy fény" a lap saját akcentusszínén.
   Három réteg, mindegyik SAJÁT maszkkal, hogy ne kelljen kétszer
   maszkolni (a kettős maszk levágta a hatás nagy részét):

     halo    a forma erősen elmosott térképe, a lap saját színével.
             Ez a fényudvar: a szál KÖRÉ is kerül fény, nem csak rá.
     erosit  a lap saját színét erősíti fel a pontos formán.
     mag     a szál izzó belseje, a mutató körül a legerősebb.

   A gyújtás a szélektől befelé tart 620 ms alatt, ezért „bekapcsol",
   nem „felvillan". */
.p360l-akcent{position:absolute;inset:0;z-index:7;pointer-events:none}
.p360l-akcent i{position:absolute;inset:0;display:block;opacity:0;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity .62s cubic-bezier(.22,.75,.3,1)}

.p360l-akcent .halo{mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:var(--szin,#fff);filter:blur(2px)}
.p360l-akcent .erosit{
  -webkit-backdrop-filter:saturate(2.2) brightness(1.3);
  backdrop-filter:saturate(2.2) brightness(1.3)}
.p360l-akcent .mag{mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,46%),
    rgba(255,255,255,.95) 0,rgba(255,255,255,.5) 14%,rgba(255,255,255,.14) 34%,
    transparent 58%)}

.aktiv .p360l-akcent .halo{opacity:.62;transition-delay:.05s}
.aktiv .p360l-akcent .erosit{opacity:1}
.aktiv .p360l-akcent .mag{opacity:.85;transition-duration:.34s}

/* ══ A FÓLIA ════════════════════════════════════════════ */
.p360l-fem,.p360l-veset{position:absolute;inset:0;z-index:8;pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:var(--maszk);mask-image:var(--maszk);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.p360l-fem i,.p360l-veset i{position:absolute;display:block}
.csik{inset:-30% -60%;opacity:0;
  mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:linear-gradient(104deg,transparent 42%,rgba(226,240,255,.22) 47%,
    rgba(255,255,255,.8) 50%,rgba(226,240,255,.22) 53%,transparent 58%);
  transform:translateX(calc(var(--px,0)*34%));
  transition:opacity .55s cubic-bezier(.2,.8,.3,1)}
/* Nem jár körbe magától: a fény ott van, ahol a mutató. Ha megállsz,
   megáll. Ez az, ami egy valódi fóliára hasonlít, és nem zavaró. */
.aktiv .csik{opacity:.5}
.platina.aktiv .csik,.prizma.aktiv .csik{opacity:1}
@keyframes p360l-fut{0%{opacity:0;transform:translateX(-40%)}
  10%{opacity:1}52%{opacity:1}62%,100%{opacity:0;transform:translateX(40%)}}
/* a vesett vonalhalo, ha megjott a 08-as terkep. Ugyanugy a mutatot koveti,
   csak egy arnyalattal keskenyebben, hogy a vonalak elvaljanak a sima femtol. */
.p360l-veset i{inset:-30% -60%;mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:linear-gradient(104deg,transparent 44%,rgba(255,255,255,.62) 50%,
    transparent 56%);opacity:0;
  transform:translateX(calc(var(--px,0)*30%));
  transition:opacity .55s cubic-bezier(.2,.8,.3,1)}
.platina.aktiv .p360l-veset i,.prizma.aktiv .p360l-veset i{opacity:.85}
/* a prizma szivarvanya: a helye ES a szine is a dontes szogebol jon */
.szivarvany{inset:0;
  -webkit-backdrop-filter:saturate(2.4) brightness(1.1);
  backdrop-filter:saturate(2.4) brightness(1.1)}
.szivarvany::after{content:"";position:absolute;inset:0;
  mix-blend-mode:overlay;opacity:.17;
  background:linear-gradient(112deg,#ff3d7f,#ff9a3a 14%,#f4f75c 28%,#4dff9e 44%,
    #4dd2ff 60%,#9a7bff 78%,#ff3d7f 96%);
  background-size:140% 100%;
  background-position:calc(50% + var(--px,0)*-58%) calc(50% + var(--py,0)*-30%);
  filter:hue-rotate(calc(var(--px,0)*62deg + var(--py,0)*24deg)) saturate(1.3)}
.szivarvany::after{background-size:140% 100%}

/* ══ A KERET · teljes kifutás, a cím sötét átmeneten ════ */
/* A fátyol a lap SAJÁT világosságához igazodik. Sötét lapra sötét,
   világosra világos: különben a fehér papírt bemocskolja egy fekete folt. */
.p360l-fatyol{position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,5,10,.58) 0%,rgba(6,5,10,0) 13%,
    rgba(6,5,10,0) 58%,rgba(6,5,10,.66) 86%,rgba(6,5,10,.92) 100%)}
.vilagos .p360l-fatyol{
  background:linear-gradient(180deg,rgba(250,248,244,.52) 0%,rgba(250,248,244,0) 13%,
    rgba(250,248,244,0) 58%,rgba(250,248,244,.72) 86%,rgba(250,248,244,.94) 100%)}
.vilagos .p360l-cim{color:#221d26;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.vilagos .p360l-cim::before,.vilagos .p360l-cim::after{
  background:linear-gradient(90deg,transparent,rgba(40,34,46,.55) 82%,rgba(40,34,46,.55))}
.vilagos .p360l-fok{color:rgba(46,40,52,.68)}
.vilagos .p360l-fejlec{color:rgba(40,34,46,.62);text-shadow:0 1px 6px rgba(255,255,255,.85)}
.vilagos .p360l-keret{box-shadow:inset 0 0 0 1px rgba(40,34,46,.22),
  inset 0 0 0 5px rgba(250,248,244,.5),inset 0 0 0 6px rgba(40,34,46,.12)}
.vilagos.platina .p360l-keret,.vilagos.prizma .p360l-keret{
  box-shadow:inset 0 0 0 1px rgba(92,110,140,.7),
    inset 0 0 0 5px rgba(250,248,244,.6),inset 0 0 0 6px rgba(92,110,140,.28)}
.p360l-keret{position:absolute;inset:0;z-index:10;pointer-events:none;
  border-radius:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 5px rgba(10,9,14,.55),inset 0 0 0 6px rgba(255,255,255,.07)}
.platina .p360l-keret,.prizma .p360l-keret{
  box-shadow:inset 0 0 0 1px rgba(232,242,255,.62),
    inset 0 0 0 5px rgba(10,12,18,.6),inset 0 0 0 6px rgba(232,242,255,.24)}
.platina .p360l-sik,.prizma .p360l-sik{box-shadow:0 22px 48px rgba(0,0,0,.58),
  0 0 30px -6px rgba(214,232,255,.28)}

.p360l-fejlec{position:absolute;z-index:11;top:2.6%;left:0;right:0;text-align:center;
  font-family:var(--veset);font-size:calc(.42rem + .22vw);font-weight:500;
  letter-spacing:.34em;color:rgba(238,234,244,.72);text-indent:.34em;
  text-shadow:0 1px 8px rgba(0,0,0,.9)}
.p360l-fejlec i{font-style:normal;color:rgba(255,120,180,.85)}
.platina .p360l-fejlec i,.prizma .p360l-fejlec i{color:rgba(206,226,252,.95)}
.p360l-cim{position:absolute;z-index:11;left:7%;right:7%;bottom:8.4%;margin:0;
  text-align:center;font-family:var(--veset);font-weight:400;
  font-size:calc(.72rem + .95vw);letter-spacing:.2em;text-indent:.2em;
  color:#fbf8fc;text-shadow:0 2px 14px rgba(0,0,0,.95)}
.p360l-cim::before,.p360l-cim::after{content:"";position:absolute;top:54%;
  width:16%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,236,246,.6) 82%,rgba(240,236,246,.6))}
.p360l-cim::before{left:-13%}
.p360l-cim::after{right:-13%;transform:scaleX(-1)}
.p360l-fok{position:absolute;z-index:11;left:0;right:0;bottom:4.2%;text-align:center;
  font-family:var(--mono);font-size:calc(.3rem + .13vw);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(226,220,232,.62)}
.platina .p360l-fok,.prizma .p360l-fok{color:rgba(214,232,255,.85)}

figcaption{margin-top:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--halk)}


/* ⚠️ A KIEMELES `--col-brand`, NEM `--tint-brand`. Merve 2026-09-09:
   a `--tint-brand` temafuggo, es VILAGOS modban #c30d5e, ami sotet bordo,
   nem magenta. A prototipust sotetben neztuk, ott #ff5fa3 volt, ezert nem
   tunt fel. A `--col-brand` mindket temaban magenta (#e5106f / #f0157e).
   Roland jelezte: „nem magenta a felirat ahol eddig az volt". */
/* ============ Kártya-prototípus (2026-09-08) ============
   Csak a pult tokenjeit használja, ezért a témaváltóval együtt mozog. */
.p360p{max-width:none}
.p360p-fej{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.p360p-fej h1{font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:38px;
  letter-spacing:.02em;margin:0;color:var(--pt-text-head)}
.p360p-fej .db{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;
  color:var(--pt-text-muted)}
.p360p-fej .vissza{margin-left:auto;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;cursor:pointer;
  color:var(--col-brand,#f0157e);background:none;border:0;padding:0}
.p360p-fej .vissza:hover{text-decoration:underline}
.p360p-bev{color:var(--pt-text-body);font-size:15px;line-height:1.66;max-width:62ch;
  margin:10px 0 34px}

/* ── a fal ── */
.p360p-fal{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(246px,1fr))}
.p360p-lap{position:relative;aspect-ratio:1060/1484;border-radius:16px;overflow:hidden;
  background:#050409;cursor:pointer;border:0;padding:0;display:block;width:100%;
  transition:transform .35s cubic-bezier(.16,.84,.28,1),box-shadow .35s cubic-bezier(.16,.84,.28,1)}
/* A falon is dol a lap, egeszben. A perspektiva LAPONKENT van, nem a racson:
   racs-szintu perspektivanal az egesz falnak egyetlen enyeszpontja lenne, es
   a szelso lapok mind a kozep fele dolnenek. */
.p360p-lap{transform-style:preserve-3d;
  transform:perspective(900px)
    rotateX(calc(var(--py,0)*-7deg)) rotateY(calc(var(--px,0)*7deg))
    translate3d(calc(var(--px,0)*.9%),calc(var(--py,0)*.7%),0)
    translateZ(calc(var(--emel,0)*14px))}
.p360p-lap.mozog{transition:transform .12s linear,box-shadow .35s ease}
.p360p-lap:not(.kod):not(.tavol):hover{box-shadow:0 18px 34px rgba(0,0,0,.52)}
.p360p-lap:focus-visible{outline:2px solid var(--col-brand,#f0157e);outline-offset:3px}
.p360p-lap .r{position:absolute;inset:0}
/* A falon a lap ÁLL. Bélyegképen a parallax semmit nem ad, viszont
   ugyanabból a képből két eltolt másolatot mutatna. Marad az emelkedés. */
.p360p-lap .r img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ A PARALLEL FELULETE A FALON ═════════════════════════
   A kioldott lap nem ugyanaz a kep mas kerettel: mas a FELULETE.
   A femen feny fut vegig, az akcentusszin halkan izzik. Mivel a falon
   nincs kurzor, ez magatol jar, lassan. */
.p360p-folia,.p360p-akc{position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;overflow:hidden;transition:opacity .6s ease;
  -webkit-mask-image:var(--maszk);mask-image:var(--maszk);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.platina .p360p-folia,.gyemant .p360p-folia{opacity:1}
.platina .p360p-akc,.gyemant .p360p-akc{opacity:1}
.p360p-folia i{position:absolute;inset:-30% -60%;display:block;
  mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:linear-gradient(104deg,transparent 42%,rgba(226,240,255,.26) 47%,
    rgba(255,255,255,.9) 50%,rgba(226,240,255,.26) 53%,transparent 58%);
  animation:p360p-falcsik 9000ms cubic-bezier(.5,0,.42,1) infinite}
@keyframes p360p-falcsik{0%{opacity:0;transform:translateX(-42%)}
  10%{opacity:1}46%{opacity:1}56%,100%{opacity:0;transform:translateX(42%)}}
.gyemant .p360p-folia i{background:linear-gradient(104deg,transparent 40%,
  rgba(255,190,235,.34) 46%,rgba(255,255,255,.92) 50%,
  rgba(180,225,255,.34) 54%,transparent 60%)}
.p360p-akc{-webkit-backdrop-filter:saturate(1.9) brightness(1.14);
  backdrop-filter:saturate(1.9) brightness(1.14)}

/* ══ A PLATINA JELE ══════════════════════════════════════
   Sarokvasak és talp, rezes fémmel. Nem fut körbe, ezért nem zárja be
   a képet. A méretek százalékban, hogy bélyegképen is ugyanaz legyen. */
/* A keret irizalo fem. A rezes valtozat kiesett: egy lapon jol nezett ki,
   negy kulonbozo vilagu lap kozott nem. */
.p360p-lap.platina,.p360p-nagy.platina{
  --f1:#fff4fb;--f2:#cfe4ff;--f3:#7f9ad6;--f4:#ffe0f2}

/* ── ARANY · a legalso megszerzett fokozat ───────────────
   Meleg, halk fem. Nem a rezes: az egy lapon jol nezett ki, negy
   kulonbozo vilagu lap kozott nem. Ez halványabb es semlegesebb. */
.p360p-lap.arany,.p360p-nagy.arany{
  --f1:#fffaf2;--f2:#efe2c6;--f3:#b7a06d;--f4:#f9f2e4}

/* ── GYEMANT · a legfelso fokozat ────────────────────────
   Ugyanaz a keret, de a szine a DONTESSEL VALTOZIK, es a lapon
   szinbontott feny fut vegig. A ritkasagot itt is viselkedes viszi,
   nem egy masik szinkod. */
.p360p-lap.gyemant,.p360p-nagy.gyemant{
  --f1:#ffffff;--f2:#bde3ff;--f3:#6f7de0;--f4:#ffd2f4}
.gyemant .p360p-vas s,.gyemant .p360p-talp,.gyemant .p360p-potty{
  filter:hue-rotate(calc(var(--px,0)*84deg + var(--py,0)*26deg)) saturate(1.55)}
.p360p-lap.gyemant{box-shadow:0 0 0 1px rgba(226,238,255,.6),
  0 0 36px -6px rgba(190,170,255,.6)}
/* a lapon athalado feny szetbomlik */
.gyemant .p360p-folia i{background:linear-gradient(104deg,transparent 34%,
  rgba(255,140,215,.42) 42%,rgba(255,255,255,.95) 50%,
  rgba(120,220,255,.42) 58%,transparent 66%);
  animation-duration:6800ms}
.gyemant .p360p-akc{-webkit-backdrop-filter:saturate(2.4) brightness(1.2);
  backdrop-filter:saturate(2.4) brightness(1.2)}
.p360p-lap.gyemant .p360p-ritkajel{
  background:linear-gradient(120deg,#ffd9ee,#cfe4ff 46%,#d7ffe9);color:#221a2a}
.p360p-lap.gyemant .p360p-lapfeny i{
  background:linear-gradient(104deg,transparent 40%,rgba(255,200,235,.3) 46%,
    rgba(255,255,255,.62) 50%,rgba(190,230,255,.3) 54%,transparent 60%)}
.p360p-vas{position:absolute;inset:0;z-index:6;pointer-events:none;display:none}
.platina .p360p-vas,.gyemant .p360p-vas{display:block}
.p360p-vas s{position:absolute;width:22%;height:15.7%;
  border-style:solid;border-color:transparent;
  border-image:linear-gradient(calc(150deg + var(--px,0)*30deg),
    var(--f1),var(--f2) 30%,var(--f3) 58%,var(--f4)) 1;
  filter:drop-shadow(0 0 5px rgba(214,200,255,.32))}
.p360p-vas s:nth-child(1){left:2.4%;top:1.7%;border-width:2.6px 0 0 2.6px;
  border-top-left-radius:8px}
.p360p-vas s:nth-child(2){right:2.4%;top:1.7%;border-width:2.6px 2.6px 0 0;
  border-top-right-radius:8px}
.p360p-vas s:nth-child(3){right:2.4%;bottom:1.7%;border-width:0 2.6px 2.6px 0;
  border-bottom-right-radius:8px}
.p360p-vas s:nth-child(4){left:2.4%;bottom:1.7%;border-width:0 0 2.6px 2.6px;
  border-bottom-left-radius:8px}
.p360p-talp{position:absolute;left:0;right:0;bottom:0;height:1.5%;z-index:6;
  pointer-events:none;display:none;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,var(--f1),var(--f2) 34%,var(--f3) 72%,var(--f4));
  box-shadow:0 -1px 0 rgba(8,11,16,.85),0 0 16px rgba(214,200,255,.35)}
.platina .p360p-talp,.gyemant .p360p-talp{display:block}
.p360p-potty{position:absolute;z-index:7;left:50%;bottom:1.5%;width:2.5%;
  aspect-ratio:1;display:none;transform:translate(-50%,50%) rotate(45deg);
  background:linear-gradient(150deg,var(--f1),var(--f3));
  box-shadow:0 0 0 1px rgba(8,11,16,.95),0 0 12px rgba(214,200,255,.5)}
.platina .p360p-potty,.gyemant .p360p-potty{display:block}

/* ── PLATINA A FALON ──────────────────────────────────────
   NEM szürkíti el a lapot: Roland mércéje szerint a szín elvesztése csúnya.
   A ritkaság jele fémes keret és egy magától átfutó csillanás. Az bélyegképen
   is látszik, és nem nyúl a képhez. */
.p360p-lap.platina{box-shadow:0 0 0 1px rgba(226,238,255,.5),
  0 0 32px -6px rgba(214,190,255,.5)}
.p360p-lap.platina .p360p-ker{border-color:rgba(232,242,255,.6)}
.p360p-lap.platina .p360p-ker::after{border-color:rgba(226,238,255,.45)}
.p360p-lap.platina .p360p-fok{background:linear-gradient(150deg,#eef3fa,#c3cfdf);
  color:#10151c}
.p360p-lapfeny{position:absolute;inset:0;z-index:4;pointer-events:none;
  overflow:hidden;opacity:0}
.p360p-lap.platina .p360p-lapfeny{opacity:1}
.p360p-lapfeny i{position:absolute;inset:-30% -60%;display:block;
  mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:linear-gradient(104deg,transparent 42%,rgba(226,240,255,.22) 47%,
    rgba(255,255,255,.45) 50%,rgba(226,240,255,.16) 53%,transparent 58%);
  animation:p360p-lapcsik 11000ms cubic-bezier(.5,0,.42,1) infinite}
@keyframes p360p-lapcsik{0%{opacity:0;transform:translateX(-40%)}
  10%{opacity:.85}34%{opacity:.85}44%,100%{opacity:0;transform:translateX(40%)}}
.p360p-ritkajel{position:absolute;z-index:5;right:12px;bottom:12px;
  font-family:var(--mono,monospace);font-size:8px;letter-spacing:.2em;color:#0f141c;
  background:linear-gradient(150deg,#eef3fa,#c3cfdf);border-radius:999px;
  padding:4px 9px;font-weight:600}

.p360p-sot{position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(5,4,9,.62) 0%,rgba(5,4,9,0) 26%,
    rgba(5,4,9,0) 48%,rgba(5,4,9,.80) 78%,rgba(5,4,9,.97) 100%)}
.p360p-ker{position:absolute;inset:0;z-index:4;border-radius:16px;
  border:1px solid rgba(255,255,255,.14)}
.p360p-ker::after{content:'';position:absolute;inset:9px;border-radius:9px;
  border:1px solid rgba(240,21,126,.22)}
.p360p-fok{position:absolute;z-index:5;left:12px;top:12px;font-family:var(--mono,monospace);
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:rgba(240,21,126,.85);border-radius:999px;padding:5px 11px;font-weight:600}
.p360p-nev{position:absolute;z-index:5;left:12px;right:12px;bottom:40px;text-align:center;
  font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:23px;letter-spacing:.06em;
  color:#fff;line-height:1.04;text-shadow:0 2px 16px rgba(0,0,0,.95)}
.p360p-ido{position:absolute;z-index:5;left:0;right:0;bottom:17px;text-align:center;
  font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.16em;color:#b6a7b8}
.p360p-pipa{position:absolute;z-index:5;right:12px;top:12px;width:24px;height:24px;
  border-radius:50%;background:#25d07c;display:grid;place-items:center;
  font-size:13px;color:#06120b;font-weight:700;line-height:1}
/* Amig nincs megoldva, a lapot NEM latod. A nyitott lap is rejtve van,
   csak nem ugyanugy: azon latszik a fokozat, es kattinthato. */
.p360p-lap.rejtve .r{filter:blur(17px) saturate(.42) brightness(.82)}
.p360p-lap.rejtve .p360p-kodfatyol{background:rgba(6,5,10,.5)}
.p360p-lap.kod .r,.p360p-lap.tavol .r{filter:blur(8px) saturate(.5)}
.p360p-lap.tavol .r{filter:blur(14px) saturate(.3);opacity:.6}
.p360p-kodfatyol{position:absolute;inset:0;z-index:4;background:rgba(6,5,10,.55)}
.p360p-lap.tavol .p360p-kodfatyol{background:rgba(6,5,10,.72)}
.p360p-lap.kod,.p360p-lap.tavol{cursor:default}
.p360p-varjel{position:absolute;z-index:5;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.16em;color:#6f6572}

/* ── a segítség: aki kéri, megkapja; aki nem, annak nehezebb marad ── */
.p360p-tipp{margin:2px 0 16px;border-left:2px solid var(--vp-vonal,#26262c);
  padding-left:14px}
.p360p-tipp summary{cursor:pointer;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--col-brand,#f0157e);
  list-style:none;padding:3px 0}
.p360p-tipp summary::-webkit-details-marker{display:none}
.p360p-tipp summary::before{content:'+ ';font-weight:700}
.p360p-tipp[open] summary::before{content:'− '}
.p360p-tipp summary:hover{text-decoration:underline}
.p360p-tipp p{margin:8px 0 4px!important;font-size:13.8px!important;
  color:var(--pt-text-muted)!important}

/* ── a feladvány nézet ── */
.p360p-racs{display:grid;gap:34px;grid-template-columns:352px 1fr;align-items:start}
@media(max-width:900px){.p360p-racs{grid-template-columns:1fr}}
.p360p-nagy{position:relative;aspect-ratio:1060/1484;border-radius:15px;overflow:hidden;
  background:#050409;box-shadow:0 22px 44px rgba(0,0,0,.5)}
/* Amig nincs megoldva, a nagy lapon sem latszik a kep. A megszerzeskor
   ez tunik el: a kod nem csak vilagosodik, hanem ELOSZOR ekkor latod a lapot. */
.p360p-nagy:not(.megvan) .p360l-kep{filter:blur(24px) saturate(.4) brightness(.78)}
.p360p-nagy:not(.megvan) .p360l-akcent,
.p360p-nagy:not(.megvan) .p360l-fem,
.p360p-nagy:not(.megvan) .p360l-veset{display:none}
.p360p-nagy.earn .p360l-kep{
  animation:p360p-elotunik 900ms cubic-bezier(.2,.86,.3,1) 240ms both}
@keyframes p360p-elotunik{
  0%{filter:blur(24px) saturate(.4) brightness(.78)}
  100%{filter:blur(0) saturate(1) brightness(1)}}

/* A nagy lap belseje a LAPMOTORBOL jon; a CSS-e a KARTYA_CSS.
   A lap EGYBEN dol meg a mutatora, belul semmi nem mozog. */
.p360p-nagy .p360l-kep{position:absolute;inset:0;z-index:1}
.p360p-racs > div:first-child{perspective:820px}
.p360p-nagy{transform-style:preserve-3d;
  transform:rotateX(calc(var(--py,0)*-7deg)) rotateY(calc(var(--px,0)*7deg))
    translate3d(calc(var(--px,0)*.9%),calc(var(--py,0)*.7%),0);
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.p360p-nagy.aktiv{transition:transform .12s linear}
/* ══ A MEGSZERZÉS PILLANATA ══════════════════════════════
   Öt ütem, összesen ~1,6 másodperc. Nincs konfetti: a lap
   maga csinálja meg, amit egy vitrinbe kerülő tárgy csinál.
     0 ms  a lap megül, egyet lélegzik
    60 ms  a belső keret kigyullad
   140 ms  halk villanás fut át rajta
   240 ms  a köd felszáll a lapról, előjön, ami eddig takarva volt
   400 ms  a fémcsík egyszer végigsöpör  (ez a platina lap csíkja)
   700 ms  a pecsét helyre ugrik és zöldre vált
   940 ms  a jutalom alulról felcsúszik                              */

.p360p-nagy{transform-origin:50% 56%}
.p360p-nagy.earn{animation:p360p-ul 980ms cubic-bezier(.2,.9,.24,1) both}
@keyframes p360p-ul{0%{transform:scale(1)}14%{transform:scale(.982)}
  46%{transform:scale(1.014)}100%{transform:scale(1)}}

.p360p-nagy .villan{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;
  mix-blend-mode:overlay;pointer-events:none}
.p360p-nagy.earn .villan{animation:p360p-villan 560ms cubic-bezier(.16,.84,.28,1) 140ms both}
@keyframes p360p-villan{0%{opacity:0}20%{opacity:.26}100%{opacity:0}}

.p360p-sug{position:absolute;inset:8px;border-radius:8px;border:1.4px solid transparent;
  opacity:0;z-index:6;pointer-events:none}
.p360p-nagy.earn .p360p-sug{animation:p360p-korbe 820ms cubic-bezier(.16,.84,.28,1) 60ms both}
@keyframes p360p-korbe{0%{opacity:0;border-color:rgba(240,21,126,0);
    box-shadow:0 0 0 rgba(240,21,126,0)}
  20%{opacity:1;border-color:#f0157e;box-shadow:0 0 22px rgba(240,21,126,.5)}
  100%{opacity:0;border-color:rgba(240,21,126,0);box-shadow:0 0 0 rgba(240,21,126,0)}}

/* a köd felszáll: a sötét sáv leül és megvékonyodik, a kép kinyílik */
.p360p-nagy.megvan .p360p-sot{opacity:.58}
.p360p-nagy.earn .p360p-sot{animation:p360p-kodfel 720ms cubic-bezier(.2,.86,.3,1) 240ms both}
@keyframes p360p-kodfel{0%{opacity:1;transform:translateY(0)}
  100%{opacity:.58;transform:translateY(4%)}}

/* a fémcsík: ugyanaz, ami a platina lapon körbe-körbe fut, itt egyszer */
/* A megszerzeskor a folia-csik EGYSZER fut le, erosebben. Ugyanaz az
   elem, mint amin a platina lap folyamatos csillanasa megy: a lapmotor
   .p360l-fem retege, a Codex sajat folia-maszkjaval. */
.p360p-nagy.earn .p360l-fem .csik{
  animation:p360p-fem-fut 1000ms cubic-bezier(.42,0,.3,1) 400ms both !important}
@keyframes p360p-fem-fut{0%{opacity:0;transform:translateX(-46%)}
  16%{opacity:1}84%{opacity:1}100%{opacity:0;transform:translateX(46%)}}
.p360p-nagy.earn .p360l-veset i{
  animation:p360p-fem-fut 1000ms cubic-bezier(.42,0,.3,1) 520ms both !important}

/* a pecsét helyre ugrik */
.p360p-nagy.earn.megvan .p360p-zar{
  animation:p360p-pecset 520ms cubic-bezier(.18,.9,.24,1) both}
@keyframes p360p-pecset{0%{transform:scale(.9);opacity:0}
  58%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:1}}

/* a jutalom felcsúszik */
.p360p-jutalom.frissen{animation:p360p-jut 620ms cubic-bezier(.18,.86,.26,1) 240ms both}
@keyframes p360p-jut{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .p360p-nagy.earn,.p360p-nagy.earn .villan,.p360p-nagy.earn .p360p-sug,
  .p360p-nagy.earn .p360l-kep,
  .p360p-nagy.earn .p360p-sot,.p360p-nagy.earn .p360l-fem .csik,
  .p360p-nagy.earn .p360l-veset i,.p360p-lapfeny i,
  .p360p-nagy.earn.megvan .p360p-zar,.p360p-jutalom.frissen{animation:none}
  .p360p-nagy .p360l-fem .csik{opacity:0}
}
.p360p-zar{position:absolute;z-index:7;left:16px;right:16px;bottom:20px;text-align:center;
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.13em;color:#cfc4d0;
  background:rgba(8,6,12,.62);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:8px 10px}
.p360p-nagy.megvan .p360p-zar{background:rgba(37,208,124,.16);
  border-color:rgba(37,208,124,.45);color:#bff5d8}

.p360p-tabla{background:var(--pt-card-bg,#141419);border:1px solid var(--vp-vonal,#26262c);
  border-radius:14px;padding:30px 34px 34px}
.p360p-cel{font-size:15px;line-height:1.68;color:var(--pt-text-body);margin:0 0 8px;
  padding-bottom:26px;border-bottom:1px solid var(--vp-vonal,#26262c)}
.p360p-fel{padding:30px 0;border-bottom:1px solid rgba(128,128,140,.16)}
.p360p-fel:last-of-type{border-bottom:0}
.p360p-fel h3{font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:24px;
  letter-spacing:.02em;margin:0 0 14px;color:var(--pt-text-head)}
.p360p-fel .sz{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.2em;
  color:var(--col-brand,#f0157e);display:block;margin-bottom:7px}
.p360p-fel p{margin:0 0 14px;font-size:14.4px;color:var(--pt-text-body);line-height:1.72;
  max-width:64ch;text-wrap:pretty;hyphens:none}
.p360p-fel li,.p360p-cel,.p360p-bev{text-wrap:pretty;hyphens:none}
.p360p-fel h3,.p360p-kerdes{text-wrap:balance}
.p360p-fel ol{margin:16px 0 0;padding-left:22px}
.p360p-fel li{font-size:14.2px;color:var(--pt-text-body);padding:7px 0;line-height:1.6;
  max-width:62ch}
.p360p-orak{display:flex;gap:11px;flex-wrap:wrap;margin:20px 0 4px}
.p360p-ora{flex:1 1 96px;border:1px solid var(--vp-vonal,#26262c);border-radius:10px;
  padding:14px 10px;text-align:center;background:var(--vp-hover,rgba(255,255,255,.03))}
.p360p-ora b{display:block;font-family:var(--mono,monospace);font-size:24px;
  color:var(--pt-text-head);line-height:1;margin-bottom:6px}
.p360p-ora span{font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.1em;
  color:var(--pt-text-muted);text-transform:uppercase}
.p360p-kep{margin:22px auto 0;max-width:508px;color:var(--pt-text-head,#eae7ef);border:1px solid var(--vp-vonal,#26262c);
  border-radius:11px;overflow:hidden;background:var(--vp-hover,rgba(255,255,255,.03))}
.p360p-kep svg{width:100%;display:block;padding:12px 12px 2px;box-sizing:border-box}
.p360p-kep figcaption{font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.16em;
  color:var(--pt-text-muted);padding:4px 16px 14px;text-transform:uppercase;text-align:center}

.p360p-valasz{margin-top:38px;padding-top:30px;border-top:2px solid var(--vp-vonal,#26262c)}
.p360p-kerdes{font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:25px;
  letter-spacing:.03em;margin:0 0 22px;color:var(--pt-text-head)}
.p360p-mezo{margin-bottom:26px}
.p360p-cimke{display:block;font-family:var(--mono,monospace);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pt-text-muted);margin-bottom:11px}
.p360p-parok{display:flex;gap:10px;flex-wrap:wrap}
.p360p-parok .p360p-sel{flex:1 1 150px}
.p360p-akkordok{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.p360p-slot{border:1px solid var(--vp-vonal,#26262c);border-radius:11px;padding:13px;
  background:var(--vp-hover,rgba(255,255,255,.03));transition:border-color .2s,background .2s}
.p360p-slot .n{display:block;font-family:var(--mono,monospace);font-size:9px;
  letter-spacing:.18em;color:var(--pt-text-muted);margin-bottom:10px}
.p360p-slot .p{display:flex;gap:8px}
.p360p-sel{min-width:0;background:var(--vp-hover,rgba(255,255,255,.05));
  border:1px solid var(--vp-vonal,#26262c);border-radius:9px;padding:12px;
  color:var(--pt-text-head);font-family:var(--mono,monospace);font-size:13.5px;cursor:pointer}
.p360p-slot .p .p360p-sel{flex:1 1 0}
.p360p-sel:focus{outline:2px solid var(--col-brand,#f0157e);outline-offset:1px}
.p360p-slot.jo{border-color:rgba(37,208,124,.55);background:rgba(37,208,124,.07)}
.p360p-slot.nem{border-color:rgba(240,166,21,.45)}
.p360p-gomb{border:0;cursor:pointer;background:var(--vp-btn,#dd0e6a);color:#fff;
  font-family:var(--mono,monospace);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;padding:15px 30px;border-radius:10px;margin-top:6px}
.p360p-keret{margin:12px 0 0;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.08em;color:var(--pt-text-muted)}
.p360p-uzenet{margin-top:18px;font-size:14.2px;line-height:1.65;display:none;max-width:60ch}
.p360p-uzenet.lat{display:block}
.p360p-uzenet.jo{color:#7ee2ac}
.p360p-uzenet.nem{color:#f0b64a}

/* ── a megszerzett lap jutalma ── */
.p360p-jutalom{display:none;margin-top:30px;padding-top:26px;
  border-top:2px solid rgba(37,208,124,.35)}
.p360p-jutalom.lat{display:block}
.p360p-letolt{display:inline-block;margin-top:16px;border:0;cursor:pointer;
  background:var(--vp-btn,#dd0e6a);color:#fff;text-decoration:none;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;padding:13px 22px;border-radius:9px}
.p360p-letolt:hover{filter:brightness(1.08)}
.p360p-jutszoveg{margin:0 0 4px;font-size:14.4px;line-height:1.7;
  color:var(--pt-text-body);max-width:56ch}
.p360p-jutszoveg b{color:var(--pt-text-head);font-weight:500}
.p360p-jutalom h3{font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:23px;
  letter-spacing:.03em;margin:0 0 10px;color:var(--pt-text-head)}

/* ── prototípus-sáv ── */
.p360p-sav{margin-top:34px;padding:12px 16px;border-radius:10px;
  border:1px dashed var(--vp-vonal,#26262c);display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;font-family:var(--mono,monospace);font-size:10.5px;
  letter-spacing:.08em;color:var(--pt-text-muted)}
.p360p-kapcs{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:var(--pt-text-body);text-transform:uppercase;letter-spacing:.1em}
.p360p-kapcs input{accent-color:var(--col-brand,#f0157e);cursor:pointer}
.p360p-sav button{border:1px solid var(--vp-vonal,#26262c);background:none;cursor:pointer;
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pt-text-body);padding:7px 13px;border-radius:7px}
.p360p-sav button:hover{border-color:var(--col-brand,#f0157e);color:var(--pt-text-head)}
.p360p-rejt{display:none!important}

/* ── amit csak az ELES oldal hasznal ──────────────────────────────── */
/* HIBA / ÖTLET (2026-09-14). Ugyanaz a diszkrét magenta pirula, mint az
   eszközök `.p360bb-feedback` gombja, a fejléc jobb szélén. Ahol van
   „Vissza" link, az viszi a margin-left:auto-t, a gomb utána áll. */
.p360p-fej .p360p-hibaotlet{margin-left:auto;align-self:center;display:inline-flex;
  align-items:center;gap:6px;font-family:var(--mono,'IBM Plex Mono',monospace);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--col-brand,#f0157e);text-decoration:none;white-space:nowrap;
  padding:5px 11px;border-radius:999px;border:1px solid rgba(240,21,126,.38);
  background:rgba(240,21,126,.07);transition:background .15s,color .15s}
.p360p-fej .vissza ~ .p360p-hibaotlet{margin-left:0}
.p360p-fej .p360p-hibaotlet:hover,.p360p-fej .p360p-hibaotlet:focus-visible{
  background:var(--col-brand,#f0157e);color:#fff}
.p360p-fej .p360p-hibaotlet svg{width:13px;height:13px;flex:none}
.p360p-megfejtem{display:inline-block;margin:6px 0 0;font-size:12.5px;font-weight:650;
  color:var(--col-brand,#f0157e);text-decoration:none}
/* ── A LEGÖRDÜLŐK ─────────────────────────────────────────────────
   Roland 2026-09-10: „a gombok amiket be kell állítani legyen szebb".
   A gyári nyíl és a lapos doboz volt a baj. Saját nyíl, mélyebb felület,
   és látható állapotok: alaphelyzet · rálépés · kitöltve · fókusz. */
.p360p-sel{
  appearance:none;-webkit-appearance:none;
  min-width:0;padding:12px 34px 12px 14px;
  border-radius:10px;
  border:1px solid var(--pt-card-border,#26262c);
  background-color:var(--pt-card-bg,#141419);
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  color:var(--pt-text-head);
  font-family:var(--mono,monospace);font-size:13.5px;line-height:1.2;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .12s ease;
}
/* A nyíl SVG-ként, hogy témától függetlenül ugyanaz legyen. */
.p360p-sel{
  background-repeat:no-repeat;
  background-position:right 12px center, 0 0;
  background-size:11px 7px, auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239aa0ab' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
}
.p360p-sel:hover{border-color:var(--pt-text-muted);transform:translateY(-1px)}
.p360p-sel:focus{outline:none;border-color:var(--col-brand,#f0157e);
  box-shadow:0 0 0 3px rgba(240,21,126,.22)}
/* Kitöltve: halkan jelezzük, hogy ez a mező már megvan. */
.p360p-sel:valid{border-color:rgba(37,208,124,.45)}
.p360p-sel option{background:var(--pt-card-bg,#141419);color:var(--pt-text-head)}

/* ── A KVÍZ OLDALA ────────────────────────────────────────────────
   ⚠️ NINCS LEGÖRDÜLŐ. A ház mintája a `producer-tipus-kviz`: nagy,
   kattintható kártyák magenta kijelöléssel, `translateY(-2px)` emeléssel
   és magenta árnyékkal. Ugyanazt a nyelvet beszéli, csak a pult
   színtokenjeivel, hogy világos témában is jó legyen. */

/* a fejléc-sáv: a kártya a főszereplő, a szöveg ALATTA
   Roland 2026-09-10: „a kártya lehetne nagyobb, ami jobbra mellette van az
   lehetne alatta is, ami eredetileg volt kártyanagyság az teljesen jó volt".
   Ezért 352px — ugyanaz, mint a `.p360p-racs` kártyahasábja a rejtvényen —,
   és a cél, a haladássáv meg a legjobb eredmény egy oszlopban alá kerül. */
.p360kv-sav{display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:352px;margin:0 auto 34px;text-align:center}
.p360kv-sav .p360p-nagy{width:100%;margin:0}
.p360kv-savszov{width:100%}
.p360kv-cel{margin:0 0 12px;font-size:15px;line-height:1.5;
  color:var(--pt-text-head);font-weight:600}
.p360kv-csik{height:6px;border-radius:999px;overflow:hidden;
  background:var(--pt-list-bg,rgba(0,0,0,.06))}
/* ⚠️ `transform`, NEM `width`. A szelesseg animalasa minden lepesnel
   ujraszamoltatja az elrendezest; a `scaleX` a compositoron fut, es nem nyul
   hozza a layouthoz. A sav igy a teljes szinatmenetet mutatja osszenyomva,
   nem az atmenet elso darabjat -- ez legalabb olyan jo. A JS ehhez
   `style.transform`-ot allit, nem `style.width`-et. */
.p360kv-csik i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--col-brand,#f0157e),#ff7ab8);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
.p360kv-halad{margin:9px 0 0;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.08em;color:var(--pt-text-muted)}
.p360kv-eddig{margin:5px 0 0;font-size:12.5px;color:var(--pt-text-muted)}

/* blokk-cím */
.p360kv-blokk{display:flex;align-items:center;gap:12px;margin:30px 0 12px;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--col-brand,#f0157e);font-weight:700}
.p360kv-blokk::after{content:"";flex:1 1 auto;height:1px;background:var(--pt-card-border)}

/* egy feladat */
.p360kv-fel{position:relative;padding:18px 20px;margin:0 0 12px;border-radius:14px;
  background:var(--pt-card-bg);border:1px solid var(--pt-card-border);
  transition:border-color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.p360kv-fel.hianyos{border-color:var(--col-brand,#f0157e)}
/* SIKERES kitöltés után a hibás feladat (2026-09-14): borostyán keret, alatta
   a megoldás. Nem piros: a kártya megvan, ez tanulság, nem bukás. */
.p360kv-fel.hibas{border-color:rgba(240,182,74,.75)}
.p360kv-megoldas{margin:12px 0 0;padding:9px 12px;border-radius:10px;
  background:rgba(240,182,74,.12);border:1px solid rgba(240,182,74,.35);
  font-size:14px;line-height:1.45;color:var(--pt-text-body)}
.p360kv-megoldas b{font-family:var(--mono,monospace);letter-spacing:.04em;
  color:var(--pt-text-head)}
.p360kv-kerdes{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;
  font-size:15.5px;line-height:1.45;color:var(--pt-text-head);font-weight:600}
.p360kv-kerdes .sz{flex:0 0 26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  font-family:var(--mono,monospace);font-size:12px;font-weight:700;
  background:var(--pt-list-bg,rgba(0,0,0,.06));color:var(--pt-text-muted)}
.p360kv-fel.kesz .p360kv-kerdes .sz{background:rgba(37,208,124,.16);color:#1a7f37}

/* ── a billentyűzet ──
   Nem chip-sor: zongora. Hét fehér billentyű a sorban, öt fekete föléjük
   abszolút pozícióval (`left:calc(100%/7*N)`, a sablon adja). A kiválasztás
   magenta, ugyanaz a nyelv, mint a válaszkártyáké. */
.p360kv-zong{position:relative;display:flex;height:128px;border-radius:12px;
  overflow:hidden;border:1px solid var(--pt-card-border);
  background:var(--pt-card-border);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.p360kv-b{flex:1 1 0;min-width:0;border:0;cursor:pointer;padding:0 0 11px;
  display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--mono,monospace);font-size:12.5px;font-weight:700;
  letter-spacing:.02em;user-select:none;
  background:linear-gradient(180deg,#fbfbfd 0%,#e9e7ee 100%);
  border-right:1px solid var(--pt-card-border);
  transition:background .16s cubic-bezier(.22,1,.36,1),color .16s,box-shadow .16s}
.p360kv-b:last-of-type{border-right:0}
.p360kv-b span{pointer-events:none}
/* ⚠️ A HOVER NEM ROZSASZIN KITOLTES. Eloszor az volt, es Roland 2026-09-10-en
   ezt latta: "a kovetkezo akkordra atugrik es a billentyun a jeloles marad".
   Az allapot valojaban torlodott -- a kurzor viszont a most lenyomott
   billentyun maradt, es a rozsaszin hover ugyanugy nezett ki, mint a
   kijeloles. Ket kulonbozo jelentes nem hasonlithat egymasra. A hover most
   halvany alapon egy magenta ALSO EL: eszreveheto, de senki nem nezi
   kivalasztasnak. */
.p360kv-b:hover{background:linear-gradient(180deg,#ffffff 0%,#f1eff5 100%);
  box-shadow:inset 0 -3px 0 rgba(240,21,126,.45)}
.p360kv-b[aria-pressed="true"]{
  background:linear-gradient(180deg,#ff5ba6 0%,var(--col-brand,#f0157e) 100%);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}

.p360kv-b.fekete{position:absolute;top:0;height:62%;z-index:2;
  width:calc(100%/7*.56);transform:translateX(-50%);
  border:0;border-radius:0 0 7px 7px;padding-bottom:9px;font-size:11px;
  background:linear-gradient(180deg,#3a3a46 0%,#101014 100%);
  box-shadow:0 6px 12px -4px rgba(0,0,0,.75)}
.p360kv-b.fekete:hover{background:linear-gradient(180deg,#45454f 0%,#141419 100%);
  box-shadow:0 6px 12px -4px rgba(0,0,0,.75),inset 0 -3px 0 rgba(240,21,126,.5)}
.p360kv-b.fekete[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--col-brand,#f0157e) 0%,#8e0b4a 100%);
  color:#fff;box-shadow:0 6px 14px -4px rgba(240,21,126,.7)}
.p360kv-b:focus-visible{outline:2px solid var(--col-brand,#f0157e);outline-offset:-3px;
  z-index:3}
/* ⚠️ `!important`, ÉS A `span`-ON IS. A billentyű felirata a Tutor-pult
   témájától kapott színt, nem a miénket: világosban `--pt-text-head` fekete
   lett a FEKETE billentyűn, sötétben fehér a FEHÉREN. Mindkettő olvashatatlan,
   és mindkettőt Roland vette észre, nem a próbapadom — az nem tölti be a
   pult saját stíluslapját. Ezért nem az öröklésre bízzuk. */
.p360kv-b,.p360kv-b span{color:#2b2b34!important}
.p360kv-b.fekete,.p360kv-b.fekete span{color:#eceff5!important}
.p360kv-b[aria-pressed="true"],.p360kv-b[aria-pressed="true"] span,
.p360kv-b.fekete[aria-pressed="true"],
.p360kv-b.fekete[aria-pressed="true"] span{color:#fff!important}

@media (max-width:520px){ .p360kv-zong{height:104px} .p360kv-b{font-size:11px} }

/* ── amit eddig beirtal ──
   A rejtvenyen az „allas" visszaolvassa a valaszt, es az sokat segit. A
   kvizen eddig csak egy szamlalo allt itt („2 / 3 hang kivalasztva"), ami
   nem mondta meg, MIT valasztottal. Het hangnal (G-dur skala) ez keves:
   ha elrontasz egyet, a sor nemán kiejti a legregebbit, es nem latszik. */
.p360kv-alatt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:11px 0 0}
.p360kv-beirt{font-family:var(--mono,monospace);font-size:14px;font-weight:700;
  letter-spacing:.06em;color:var(--pt-text-head)}
.p360kv-beirt.ures{color:var(--pt-text-muted);font-weight:400;letter-spacing:.02em}
.p360kv-szam{font-size:12px;color:var(--pt-text-muted)}
.p360kv-szam b{font-family:var(--mono,monospace);color:var(--pt-text-body)}
.p360kv-torol{margin-left:auto;padding:4px 10px;border-radius:8px;cursor:pointer;
  background:none;border:1px solid var(--pt-card-border);
  font-size:11.5px;letter-spacing:.02em;
  transition:border-color .2s cubic-bezier(.22,1,.36,1),color .2s}
.p360kv-torol,.p360kv-torol span{color:var(--pt-text-muted)!important}
.p360kv-torol:hover{border-color:rgba(240,21,126,.55)}
.p360kv-torol:hover,.p360kv-torol:hover span{color:var(--col-brand,#f0157e)!important}

/* ── a válaszkártyák ── */
.p360kv-valaszok{display:flex;flex-direction:column;gap:10px}
.p360kv-v{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  padding:15px 18px;border-radius:12px;cursor:pointer;
  background:var(--pt-list-bg,rgba(0,0,0,.035));
  border:1px solid var(--pt-card-border);color:var(--pt-text-body);
  font-size:14.5px;line-height:1.45;
  transition:border-color .2s cubic-bezier(.22,1,.36,1),background .2s,
    transform .2s,box-shadow .2s}
.p360kv-v:hover{border-color:rgba(240,21,126,.5);background:rgba(240,21,126,.06);
  transform:translateY(-2px)}
.p360kv-v[aria-pressed="true"],
.p360kv-v[aria-pressed="true"]:hover{
  background:rgba(240,21,126,.13);border-color:var(--col-brand,#f0157e);
  color:var(--pt-text-head);transform:translateY(-2px);
  box-shadow:0 10px 28px -12px rgba(240,21,126,.55)}
.p360kv-v .pont{flex:0 0 19px;width:19px;height:19px;margin-top:2px;border-radius:999px;
  border:2px solid var(--pt-card-border);display:grid;place-items:center}
.p360kv-v[aria-pressed="true"] .pont{border-color:var(--col-brand,#f0157e);
  background:var(--col-brand,#f0157e)}
.p360kv-v .pont i{width:7px;height:7px;border-radius:999px;background:#fff;
  display:block;opacity:0;transition:opacity .18s}
.p360kv-v[aria-pressed="true"] .pont i{opacity:1}
.p360kv-v:focus-visible{outline:2px solid var(--col-brand,#f0157e);outline-offset:2px}

.p360kv-lab{margin-top:24px;padding-top:20px;border-top:1px solid var(--pt-card-border)}

/* -- A REJTVENY MEGFEJTES-MEGADOJA --------------------------------
   Ot ALLAS (a hangnem + negy akkord) egy sorban, alattuk EGY zongora.
   Az elso valtozat negy egyforma zongorat rakott egymas ala: Roland
   szerint "nehezen atlathato", es igaza volt -- semmi nem mutatta, hogy
   ez egy SOR. Most a negy akkord balrol jobbra all, nyilakkal, es
   visszaolvassa, amit beirtal: ez maga az akkordkor. */
.p360p-tabla{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 22px}
.p360p-csop{flex:0 0 auto;min-width:0}
.p360p-csop.kor{flex:1 1 auto}
.p360p-cimke{display:block;margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pt-text-muted);font-weight:700}

.p360p-allasok{display:flex;flex-wrap:wrap;gap:10px}
/* A nyil a ket allas KOZE kerul: ettol lesz sor, nem negy kulon doboz. */
.p360p-allasok.nyilas .p360p-allas + .p360p-allas{margin-left:20px}
/* Literális nyíl, NEM `92` CSS-escape: ez a fájl Python-forrás, és ott a
   `` OKTÁLIS escape-nek számít — a generált CSS-be U+0011 meg egy „92"
   került, a lapon pedig egy tofu-négyzet és a 92. */
.p360p-allasok.nyilas .p360p-allas + .p360p-allas::before{content:"→";
  position:absolute;left:-21px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--pt-text-muted);opacity:.7}

.p360p-allas{position:relative;min-width:96px;padding:12px 16px 13px;
  border-radius:13px;cursor:pointer;text-align:center;
  background:var(--pt-card-bg);border:1px solid var(--pt-card-border);
  transition:border-color .2s cubic-bezier(.22,1,.36,1),background .2s,
    transform .2s,box-shadow .2s}
.p360p-allas .n{display:block;font-family:var(--mono,monospace);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px}
.p360p-allas .n,.p360p-allas .n *{color:var(--pt-text-muted)!important}
.p360p-allas .e{display:block;font-size:19px;font-weight:700;line-height:1.15;
  letter-spacing:.01em}
.p360p-allas .e,.p360p-allas .e *{color:var(--pt-text-muted)!important}
.p360p-allas.kesz .e,.p360p-allas.kesz .e *{color:var(--pt-text-head)!important}
.p360p-allas:hover{border-color:rgba(240,21,126,.5);transform:translateY(-2px)}
.p360p-allas[aria-pressed="true"]{border-color:var(--col-brand,#f0157e);
  background:rgba(240,21,126,.09);
  box-shadow:0 0 0 1px var(--col-brand,#f0157e),0 12px 28px -14px rgba(240,21,126,.6)}
.p360p-allas.jo{border-color:rgba(37,208,124,.7)}
.p360p-allas.nem{border-color:rgba(240,21,126,.7)}
.p360p-allas:focus-visible{outline:2px solid var(--col-brand,#f0157e);outline-offset:2px}

/* A szerkeszto: mindig azt az allast irja, amelyik aktiv. */
.p360p-szerk{padding:16px 18px 18px;border-radius:14px;margin:0 0 20px;
  background:var(--pt-card-bg);border:1px solid var(--pt-card-border)}
.p360p-szerkfej{margin:0 0 12px;font-size:13.5px;color:var(--pt-text-muted)}
.p360p-szerkfej b{color:var(--col-brand,#f0157e);font-weight:700;
  font-family:var(--mono,monospace);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase}
.p360kv-zong.mini{height:88px}
.p360kv-zong.mini .p360kv-b{font-size:11.5px;padding-bottom:8px}
.p360kv-zong.mini .p360kv-b.fekete{font-size:10px;padding-bottom:6px}

.p360p-fajta{display:flex;gap:9px;margin-top:10px}
.p360p-chip{flex:1 1 0;padding:12px 16px;border-radius:11px;cursor:pointer;
  font-size:14.5px;font-weight:600;
  background:var(--pt-list-bg,rgba(0,0,0,.04));
  border:1px solid var(--pt-card-border);
  transition:border-color .2s cubic-bezier(.22,1,.36,1),background .2s,
    transform .2s,box-shadow .2s}
.p360p-chip,.p360p-chip span{color:var(--pt-text-body)!important}
.p360p-chip:hover{border-color:rgba(240,21,126,.5);background:rgba(240,21,126,.06);
  transform:translateY(-2px)}
/* A kijeloles ugyanolyan HANGOS, mint a lenyomott billentyu: ket jelzes egy
   kepernyon nem beszelhet ket hangeron. */
.p360p-chip[aria-pressed="true"],.p360p-chip[aria-pressed="true"]:hover{
  background:linear-gradient(180deg,#ff5ba6 0%,var(--col-brand,#f0157e) 100%);
  border-color:var(--col-brand,#f0157e);transform:translateY(-2px);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 12px 28px -12px rgba(240,21,126,.6)}
.p360p-chip[aria-pressed="true"],.p360p-chip[aria-pressed="true"] span{
  color:#fff!important}
.p360p-chip:focus-visible{outline:2px solid var(--col-brand,#f0157e);outline-offset:2px}

/* A Bekuldom gomb: VILAGOS temaban a pult temaja `--pt-text-head`-et adott
   neki, vagyis SOTET feliratot a magenta gombra. Ugyanaz az ok, mint a
   billentyuknel -- Roland ezt is eszrevette. */
.p360p-gomb,.p360p-gomb span{color:#fff!important}

/* ── A FŐOLDALI SÁV ───────────────────────────────────────────────
   Nem a fal kicsinyített mása: más a dolga. Bélyegkép, név, fokozat.
   A `p360_vp_after_content` horgon rajzolódik ki (`includes/lapok-fal.php`). */
.p360k-sav{margin-top:18px}
.p360k-sor{display:flex;gap:14px;flex-wrap:wrap;padding:4px 0 2px}
.p360k-savlap{display:block;width:104px;text-decoration:none;color:inherit}
.p360k-savlap .kep{position:relative;display:block;aspect-ratio:1060/1484;
  border-radius:9px;overflow:hidden;background:var(--pt-card-bg,#141419);
  border:1px solid var(--pt-card-border,#26262c);
  transition:transform .22s cubic-bezier(.16,.84,.28,1),box-shadow .22s ease}
.p360k-savlap.zart .kep{border-style:dashed}
.p360k-savlap:hover .kep{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.32)}
.p360k-savlap .kep img{width:100%;height:100%;object-fit:cover;display:block}
.p360k-savlap.zart .kep img{filter:blur(5px) saturate(.5) brightness(.5)}
.p360k-savlap .pipa{position:absolute;right:5px;top:5px;width:17px;height:17px;
  border-radius:50%;background:#1a7f37;color:#fff;font-size:10px;line-height:17px;
  text-align:center;font-weight:700}
.p360k-savlap .nev{display:block;margin-top:6px;font-size:11.5px;font-weight:650;
  line-height:1.25;color:var(--pt-text-head)}
.p360k-savlap.zart .nev{color:var(--pt-text-muted)}
.p360k-savlap .fok{display:block;margin-top:2px;font-family:var(--mono,monospace);
  font-size:9px;letter-spacing:.12em;color:var(--pt-text-muted)}
.p360k-savlink{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:650;
  color:var(--col-brand,#f0157e);text-decoration:none}
.p360k-savlink:hover{text-decoration:underline}
@media (max-width:600px){.p360k-savlap{width:88px}}

/* ⚠️ A RÁCS ELEME A CELLA, NEM A KÁRTYA. A `.p360p-fal` grid, tehát a
   „Mi kell hozzá?" panel és a letöltés-gomb KÜLÖN cellába esne, és a
   kártyák mellé csúszna. A burok fogja őket egybe. */
.p360p-cella{min-width:0}

/* ── A KÁRTYÁN LÉVŐ FELIRATOK FEHÉREK ─────────────────────────────
   Mérve 2026-09-09: a pult saját stíluslapja beszínezi a span-eket, és a
   `.p360p-nev{color:#fff}` egyosztályos szelektora alulmaradt. Roland
   jelezte: „a négy torony felirat sötét maradt", „a szöveg szürke és nem
   fehér". A `.p360p` konténerrel megemelt szelektor nyer, témától
   függetlenül — ezek a feliratok a KÁRTYÁN ülnek, nem a lapon, tehát
   világos témában sem szabad sötétedniük. */
/* ⚠️ `!important`, ÉS EZ INDOKOLT, NEM LUSTASÁG.
   Mérve 2026-09-09 valódi böngészőben, a mi stíluslapunkkal egyedül: ezek a
   feliratok `rgb(255,255,255)`-re számítódnak. A pulton mégis szürkék, tehát
   valami MÁS stíluslap nyer. A pult saját két lapja (`app.css`,
   `vezerlopult.css`) egyetlen `p360p-` szabályt sem tartalmaz, viszont
   tucatnyi `!important`-tal dolgozik — ebben a környezetben egy sima szabály
   bármikor alulmaradhat. A felirat a KÁRTYÁN ül, sötét lefutón: itt a fehér
   nem ízlés kérdése, hanem olvashatóságé. */
.p360p .p360p-nev,
.p360p .p360p-ido,
.p360p .p360p-pipa{color:#fff !important}

/* A „még nem derült ki" másodlagos információ: fehér, de halkabb. Nem
   szürke, mert az a sötét lefutón olvashatatlan. */
.p360p .p360p-varjel{color:rgba(255,255,255,.74) !important}

/* ⚠️ A TÍPUSCÍMKE KIVÉTEL, ÉS EZ AZ ELŐZŐ JAVÍTÁSOM HIBÁJA VOLT.
   A `.p360p-lap.platina .p360p-fok` szándékosan VILÁGOS chipet ad SÖTÉT
   szöveggel a kioldott lapon. Az én általános fehér felülírásom világos
   chipre tett fehér szöveget, és attól lett olvashatatlan. Roland jelezte:
   „a szövegek a kártyákon halványak".
   Ezért a fehér csak a MÉG NEM kioldott lapra vonatkozik, ahol a chip
   magenta alapon ül. */
.p360p .p360p-lap:not(.platina):not(.gyemant) .p360p-fok{color:#fff !important}

/* ── A FALON A FÉNY CSAK KURZORRA FUT ─────────────────────────────
   Mérve 2026-09-09: a `p360p-lapfeny i` 11 másodperces, a `p360p-folia i`
   9 másodperces VÉGTELEN animációval futott. Vagyis a fal magától villogott,
   és mivel a lapfény NINCS maszkolva, egy fehér sáv húzott át a kártya
   közepén. Roland: „kicsit furán fénylik, a lap közepétől".

   ⛔ Ez a saját szabályunkat is sértette (2026-09-08): „nincs magától futó
   animáció, csak kurzorra". A JS-ben be is tartottam a dőlésnél, a CSS-ben
   viszont bent maradt.

   A hatás nem tűnik el, csak akkor jön, amikor ránézel. A szabály CSAK a
   falra vonatkozik: a rejtvényoldal megszerzés-animációja érintetlen. */
.p360p-fal .p360p-lapfeny i,
.p360p-fal .p360p-folia i{
  opacity:0;
  animation-play-state:paused;
  transition:opacity .35s cubic-bezier(.22,1,.36,1);
}
.p360p-fal .p360p-lap.mozog .p360p-lapfeny i,
.p360p-fal .p360p-lap.mozog .p360p-folia i{
  opacity:1;
  animation-play-state:running;
}

/* ── A ZÁRT LAP: HÁROMSZOROSAN VOLT SÖTÉTÍTVE ─────────────────────
   Mérve 2026-09-09 (helyi renderelés): a 40 képpontos sejtető képre RÁJÖTT
   a `.rejtve .r` sötétítő szűrője, a `p360p-kodfatyol` fátyla ÉS a
   `p360p-sot` lefutója. Az eredmény fekete téglalap: nem titokzatos, hanem
   üresnek látszik. Roland: „nagyon csúnyák".
   A sejtető kép már eleve kicsi, tehát a titkot a MÉRET őrzi, nem a
   sötétség. Itt világosítunk, hogy a forma és a szín átjöjjön. */
.p360p .p360p-lap.rejtve .r{filter:blur(13px) saturate(.7) brightness(1.22)}
.p360p .p360p-lap.rejtve .p360p-kodfatyol{background:rgba(6,5,10,.3)}
.p360p .p360p-lap.rejtve .p360p-ker{border-color:rgba(255,255,255,.2)}
.p360p .p360p-varjel{font-size:9.5px;letter-spacing:.14em}

/* ── A KÁRTYA ALATTI SÁV ──────────────────────────────────────────
   Eddig három különböző stílusú elem lógott egymás alatt: egy magenta
   nyers link, egy pirula-gomb és egy panel. Rendetlen volt, és a letöltés
   miatt az első oszlop magasabb lett, ami elrontotta a sor ritmusát.
   Most egy sáv: bal oldalt a nyitó, jobb oldalt a letöltés, azonos
   magassággal, halkan. A kártya a főszereplő, nem a gombjai. */
.p360p-labl{display:flex;align-items:center;gap:10px;margin-top:9px;min-height:26px}
.p360p .p360p-elvaras{margin:0;flex:1 1 auto;min-width:0}
.p360p .p360p-elvaras>summary{color:var(--pt-text-muted);font-weight:600;
  font-size:12px;letter-spacing:.01em}
.p360p .p360p-elvaras>summary:hover{color:var(--col-brand,#f0157e)}
.p360p .p360p-elvaras[open]>summary{color:var(--pt-text-head)}
.p360p .p360p-elvbelso{position:relative;z-index:2}
.p360p .p360p-falletolt{flex:0 0 auto;margin:0;padding:4px 10px;font-size:9.5px;
  letter-spacing:.1em;color:var(--pt-text-muted);border-color:var(--pt-card-border)}
.p360p .p360p-falletolt:hover{color:var(--col-brand,#f0157e)}

/* ── „Mi kell hozzá?" panel ──────────────────────────────────────── */
.p360p-elvaras{margin:8px 0 0;font-size:12.5px}
.p360p-elvaras>summary{cursor:pointer;color:var(--col-brand,#f0157e);font-weight:650;
  list-style:none;user-select:none}
.p360p-elvaras>summary::-webkit-details-marker{display:none}
.p360p-elvaras>summary::before{content:"+ ";font-family:var(--mono,monospace)}
.p360p-elvaras[open]>summary::before{content:"– "}
.p360p-elvbelso{margin-top:7px;padding:10px 12px;border-radius:9px;
  background:var(--pt-list-bg,rgba(255,255,255,.06));
  border:1px solid var(--pt-card-border);color:var(--pt-text-body);line-height:1.5}
.p360p-elvbelso p{margin:0 0 7px}
.p360p-eddig{color:var(--pt-text-muted)}
.p360p-lepcsok{margin:0;padding:0;list-style:none}
.p360p-lepcsok li{display:flex;align-items:baseline;gap:6px;padding:3px 0;
  color:var(--pt-text-muted);border-top:1px solid var(--pt-card-border)}
.p360p-lepcsok li:first-child{border-top:0}
.p360p-lepcsok li.kesz{color:var(--pt-text-body)}
.p360p-lepcsok .jel{margin-left:auto;color:#1a7f37;font-weight:700}
.p360p-lepcsok .hatra{margin-left:auto;font-family:var(--mono,monospace);font-size:11px}

/* Letöltés a falon · CSAK gyémánt lapnál jelenik meg. */
.p360p-falletolt{display:inline-block;margin:8px 0 0;padding:5px 12px;border-radius:999px;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.08em;font-weight:700;
  text-transform:uppercase;text-decoration:none;
  color:var(--pt-text-head);border:1px solid var(--pt-card-border)}
.p360p-falletolt:hover{border-color:var(--col-brand,#f0157e);color:var(--col-brand,#f0157e)}
.p360p-megfejtem:hover{text-decoration:underline}
/* ── a ZÁRT kártya ────────────────────────────────────────────────────
   A sejtető kép 40 képpont széles, tehát a böngésző nagyítja fel. A blur
   nem titkosítás, csak simítás: a titkot a KIS MÉRET őrzi, nem a szűrő. */
.p360p-sejtes{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(9px) saturate(.55) brightness(.42);
  transform:scale(1.08);
  opacity:.7;
}
html[data-p360-tema="vilagos"] .p360p-sejtes{filter:blur(9px) saturate(.5) brightness(.75);opacity:.5}

.p360p-mit{
  position:relative;
  font-family:var(--mono,'IBM Plex Mono',monospace);
  font-size:11px;letter-spacing:.16em;font-weight:700;
  color:#fff;mix-blend-mode:normal;
  padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}
html[data-p360-tema="vilagos"] .p360p-mit{
  color:var(--pt-text-head);background:rgba(255,255,255,.72);
  border-color:rgba(0,0,0,.14);
}
.p360p-lapkep{position:relative;aspect-ratio:1060/1484;display:grid;place-items:center;
  border-radius:10px;overflow:hidden;background:var(--pt-card-bg);
  border:1px solid var(--pt-card-border)}
.p360p-lap.zart .p360p-lapkep{border-style:dashed}
.p360p-lapkep img{display:block;width:100%;height:100%;object-fit:cover}
.p360p-keret-info{margin:10px 0 0;font-size:12.5px;color:var(--pt-text-muted)}
a.vissza{text-decoration:none}