/* Varázslevél · éjszakai dolgozószoba, holdfény, gyertyák, pergamen és smaragd tinta. */

@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pinyon-script.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-regular.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-light.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300 400;font-display:swap;src:url(fonts/spectral-light-italic.woff2) format('woff2')}

:root{
  --ej:#0c1220;
  --ej-2:#111a2c;
  --dio:#17100b;
  --dio-2:#1e150e;
  --krem:#efe6d3;
  --krem-2:#cbbfa7;
  --arany:#d9b46c;
  --arany-2:#f1d79a;
  --smaragd:#86cdac;
  --tinta:#15453a;
  --tinta-2:#2a5e4e;
  --bordo:#6a1626;
  --bordo-2:#842033;
  --pergamen:#ecdfc3;
  --barna:#4d3b28;
  --script:'Pinyon Script','Snell Roundhand',cursive;
  --serif:'Spectral',Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bk-edit:rgba(217,180,108,.75);
  /* Pergamen: finom rostozat (zaj), halvány foltok és sötétebb szélek */
  --perg-zaj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .13 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --perg-folt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 .6 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ej)}
body{margin:0;background:var(--ej);color:var(--krem);font:400 17px/1.65 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--arany);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 40px,1080px);margin-inline:auto}
section,footer{position:relative}
.h2{margin:0 0 .45em;font:300 clamp(2.2rem,6.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.01em;color:var(--krem)}
.h2 em{font-style:italic;color:var(--arany)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:0;border-radius:3px;background:var(--arany);color:#1d150a;font:500 16px/1.2 var(--serif);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .2s ease,box-shadow .3s ease,transform .2s ease}
.btn:hover{background:var(--arany-2);box-shadow:0 0 26px -6px rgba(241,215,154,.6)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--krem);box-shadow:inset 0 0 0 1px rgba(239,230,211,.5)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--arany);color:var(--arany)}
.btn.bordo{background:var(--bordo);color:#f6ead9}
.btn.bordo:hover{background:var(--bordo-2);box-shadow:0 6px 22px -10px rgba(106,22,38,.8)}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ───────────── Viaszpecsét (a levélen, a lap alján, a kapunál és a köszönetnél ugyanaz) ───────────── */
.pecset-test{position:relative;display:grid;place-items:center;border-radius:47% 53% 45% 55% / 54% 46% 56% 44%;
  background:radial-gradient(circle at 34% 28%,#b23b4a 0,#7d1a2b 34%,#55101d 66%,#370a13 100%);
  box-shadow:0 3px 7px rgba(20,4,6,.5),0 1px 1px rgba(20,4,6,.6),inset 0 -3px 6px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,170,170,.25)}
.pecset-test::before{content:"";position:absolute;inset:15%;border-radius:50%;box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 1px 0 rgba(255,190,190,.22);background:radial-gradient(circle at 40% 35%,rgba(170,40,60,.55),rgba(80,12,26,.2) 70%)}
.pecset-test::after{content:"";position:absolute;inset:6% 8% 10% 6%;border-radius:inherit;background:radial-gradient(circle at 30% 22%,rgba(255,210,210,.35),transparent 30%);pointer-events:none}
.pm{position:relative;font:italic 400 1em/1 var(--serif);color:#2b050c;text-shadow:0 1px 0 rgba(255,170,170,.32),0 -1px 0 rgba(0,0,0,.35);letter-spacing:.02em;white-space:nowrap}
.pm i{font-size:.75em;margin:0 .06em;font-style:italic;opacity:.85}

/* ───────────── Fejléc: a szoba ───────────── */
.szoba{--hh:max(560px,calc(var(--vh,1svh) * 100));--aw:min(56vw,calc(var(--hh) * .36),400px);--lw:min(calc(100vw - 32px),520px);--lh:min(calc(var(--hh) * .8),calc(var(--lw) * 1.72));
  position:relative;height:var(--hh);overflow:hidden;background:#0d0f17;color:var(--krem);touch-action:pan-y;-webkit-tap-highlight-color:transparent;isolation:isolate}
.szoba.szunet *,.szoba.szunet *::before,.szoba.szunet *::after{animation-play-state:paused!important}
.fal{position:absolute;inset:0;background:
  radial-gradient(ellipse 50% 42% at 8% 84%,rgba(255,168,80,.26),transparent 70%),
  radial-gradient(ellipse 40% 34% at 92% 20%,rgba(255,180,90,.12),transparent 70%),
  radial-gradient(ellipse 46% 50% at 50% 26%,rgba(90,120,180,.16),transparent 70%),
  var(--perg-zaj),
  linear-gradient(#0b0d15,#130f0f 55%,#1b130d);background-size:auto,auto,auto,200px 200px,auto}
.fal::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 50%,rgba(3,3,6,.62))}

/* Ablak: félköríves, nyitott, középen osztóléc; mögötte éjkék ég, hold, dombok */
.ablak{position:absolute;left:50%;top:calc(var(--hh) * .055);width:var(--aw);height:calc(var(--aw) * 1.55);margin-left:calc(var(--aw) / -2);z-index:1;
  border-radius:calc(var(--aw) / 2) calc(var(--aw) / 2) 3px 3px;padding:calc(var(--aw) * .045);
  background:linear-gradient(90deg,#1c130c,#2e2015 30%,#33241a 50%,#2a1d13 70%,#170f09);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,210,160,.06);
  translate:calc(var(--px,0) * -6px) calc(var(--py,0) * -4px)}
.eg{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--aw) * .455) calc(var(--aw) * .455) 2px 2px;
  background:radial-gradient(circle at 64% 26%,rgba(200,215,255,.32),transparent 34%),linear-gradient(#060a18,#0c1630 45%,#1a2b4c 78%,#2a3b58);
  box-shadow:inset 0 0 calc(var(--aw) * .12) rgba(0,0,0,.65)}
.hold{position:absolute;left:64%;top:26%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,rgba(200,195,175,.55) 0 8%,transparent 9%),radial-gradient(circle at 62% 58%,rgba(190,186,168,.5) 0 12%,transparent 13%),radial-gradient(circle at 30% 66%,rgba(205,200,180,.45) 0 6%,transparent 7%),radial-gradient(circle at 45% 40%,#fffbea,#efe6c8 60%,#d9cfae);
  box-shadow:0 0 18px 4px rgba(255,248,220,.45),0 0 70px 20px rgba(190,205,255,.2)}
.csillagok i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#f4f1ff;box-shadow:0 0 4px rgba(220,230,255,.8);opacity:.7;animation:pisla var(--p) ease-in-out var(--d) infinite}
@keyframes pisla{0%,100%{opacity:.75}50%{opacity:.2}}
.felho{position:absolute;height:9%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(150,165,200,.22),rgba(150,165,200,0) 70%);filter:blur(2px)}
.felho.f1{width:90%;left:-20%;top:35%;animation:felho 46s linear infinite alternate}
.felho.f2{width:70%;left:40%;top:16%;opacity:.7;animation:felho 60s linear -20s infinite alternate-reverse}
@keyframes felho{from{transform:translateX(-12%)}to{transform:translateX(14%)}}
.taj{position:absolute;left:0;bottom:0;width:100%;height:24%}
.taj-1{fill:#16223a}.taj-2{fill:#0f1829}.taj-3{fill:#080d17}
.osztas{position:absolute;left:50%;top:calc(var(--aw) * .045);bottom:calc(var(--aw) * .045);width:calc(var(--aw) * .03);margin-left:calc(var(--aw) * -.015);background:linear-gradient(90deg,#1f150d,#3a2a1d 50%,#1a110a);box-shadow:0 0 6px rgba(0,0,0,.6)}
.osztas::after{content:"";position:absolute;left:calc(var(--aw) * -.455);right:calc(var(--aw) * -.455);top:56%;height:calc(var(--aw) * .03);background:linear-gradient(#3a2a1d,#1f150d);box-shadow:0 0 6px rgba(0,0,0,.6)}
.parkany{position:absolute;left:-8%;right:-8%;bottom:calc(var(--aw) * -.05);height:calc(var(--aw) * .08);border-radius:2px;background:linear-gradient(#4a3524,#2a1c11 60%,#1a110a);box-shadow:0 10px 18px -6px rgba(0,0,0,.8)}
/* A bagoly: sziluett, a holdfényben halvány peremmel */
.bagoly{position:absolute;left:0;top:0;width:46%;opacity:0;pointer-events:none}
.bagoly.repul{opacity:1}
.bagoly svg{display:block;width:100%;height:auto;overflow:visible;fill:#05070d;stroke:#05070d;filter:drop-shadow(0 0 1.5px rgba(200,215,255,.35))}
.bagoly .sz{transform-origin:68px 34px;transform-box:view-box}
.bagoly.repul .sz{animation:csap .36s ease-in-out infinite}
@keyframes csap{0%,100%{transform:rotate(16deg) scaleY(1)}50%{transform:rotate(-30deg) scaleY(.72)}}
.bagoly-level{fill:#e6d6b4;stroke:none;opacity:0}
.bagoly.visz .bagoly-level{opacity:1}

.holdfeny{position:absolute;left:0;right:0;top:calc(var(--hh) * .055 + var(--aw) * 1.6);bottom:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 34% 100% at 50% 0%,rgba(170,190,240,.13),rgba(170,190,240,.04) 60%,transparent 85%)}

/* Lebegő gyertyák */
.gyertyak{position:absolute;inset:0;z-index:3;pointer-events:none}
.gy{display:block;position:absolute;left:var(--x);top:calc(var(--hh) * var(--y));width:calc(13px * var(--s));height:calc(66px * var(--s));
  translate:calc(var(--px,0) * var(--z) * -22px) calc(var(--py,0) * var(--z) * -12px);
  animation:lebeg var(--t) ease-in-out var(--f) infinite alternate;will-change:transform}
.gy.messze{opacity:.72;filter:blur(.6px)}
@keyframes lebeg{from{transform:translateY(calc(-7px * var(--s)))}to{transform:translateY(calc(7px * var(--s)))}}
.gy-te{position:absolute;left:0;right:0;top:calc(20px * var(--s));bottom:0;border-radius:2px 2px 3px 3px;
  background:linear-gradient(90deg,#9c8e74,#e2d7bd 30%,#fbf5e6 48%,#d6c9ad 72%,#857861)}
.gy-te::before{content:"";position:absolute;left:-6%;right:-6%;top:-2px;height:calc(9px * var(--s));border-radius:45% 55% 40% 60% / 40% 40% 60% 60%;background:linear-gradient(#fffaf0,#e3d8bf);box-shadow:0 calc(4px * var(--s)) 0 -1px #e9dfc7}
.gy-te::after{content:"";position:absolute;left:50%;top:calc(-5px * var(--s));width:1.5px;height:calc(6px * var(--s));margin-left:-.75px;background:#2b1d12}
.gy-la{position:absolute;left:50%;top:calc(-1px * var(--s));width:calc(8px * var(--s));height:calc(20px * var(--s));margin-left:calc(-4px * var(--s));
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;transform-origin:50% 92%;
  background:radial-gradient(ellipse 60% 70% at 50% 78%,#fff 0 22%,#ffeab0 38%,#ffbe5c 62%,rgba(255,130,40,0) 80%);
  box-shadow:0 0 calc(8px * var(--s)) calc(2px * var(--s)) rgba(255,190,90,.55);
  animation:lang calc(1.1s + var(--z) * .5s) ease-in-out var(--f) infinite alternate}
@keyframes lang{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(-3deg)}60%{transform:scale(1.04,.94) skewX(2deg)}100%{transform:scale(.96,1.05) skewX(-1deg)}}
.gy-fe{position:absolute;left:50%;top:calc(4px * var(--s));width:calc(130px * var(--s));height:calc(130px * var(--s));margin:calc(-65px * var(--s)) 0 0 calc(-65px * var(--s));border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,110,.3),rgba(255,170,80,.1) 35%,transparent 66%);animation:fenyl calc(2.3s + var(--z) * 1s) ease-in-out var(--f) infinite alternate}
@keyframes fenyl{from{opacity:.75}to{opacity:1}}

/* Az asztal: diófa, gyertyatartó, tintatartó */
.asztal{position:absolute;left:0;right:0;bottom:0;top:calc(var(--hh) * .66);z-index:4;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 60% at 10% 0%,rgba(255,170,85,.2),transparent 70%),
    repeating-linear-gradient(177deg,rgba(255,210,160,.035) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(183deg,rgba(0,0,0,.12) 0 1px,transparent 1px 17px),
    var(--perg-zaj),
    linear-gradient(#3b2617,#281a10 6%,#1d130b 45%,#0f0905);
  background-size:auto,auto,auto,200px 200px,auto;
  box-shadow:inset 0 1px 0 rgba(255,205,150,.22),inset 0 2px 0 rgba(0,0,0,.6),0 -14px 30px -10px rgba(0,0,0,.6)}
.asztal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 22%,transparent 78%,rgba(0,0,0,.55))}
.tarto{position:absolute;left:max(2%,calc(50% - 560px));top:-98px}
.tarto .gy{position:relative;left:auto;top:auto;animation:none;translate:none}
.tarto-tal{position:absolute;left:50%;bottom:-10px;width:62px;height:16px;margin-left:-31px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#e3bd73,#9a6e2c 55%,#4a3112);box-shadow:0 6px 10px rgba(0,0,0,.6)}
.tintatarto{position:absolute;right:max(1%,calc(50% - 600px));top:calc(var(--hh) * -.1);width:clamp(70px,calc(var(--hh) * .14),130px);height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}

.szikra{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* ───────────── A levél ───────────── */
.level{position:absolute;left:50%;top:calc((var(--hh) - var(--lh)) / 2 - var(--hh) * .015);width:var(--lw);height:var(--lh);margin-left:calc(var(--lw) / -2);z-index:5;transform-origin:50% 50%}
.level.rejtve{visibility:hidden}
.lap,.hl{background-color:var(--pergamen);background-image:var(--perg-zaj),var(--perg-folt),radial-gradient(ellipse 75% 60% at 50% 45%,rgba(255,250,235,.4),transparent 70%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 58%,rgba(120,80,35,.32));
  background-size:200px 200px,520px 520px,100% 100%,100% 100%}
.lap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--lh) * .07) calc(var(--lw) * .08) calc(var(--lh) * .09);text-align:center;color:var(--tinta);border-radius:2px;
  box-shadow:0 1px 1px rgba(60,40,20,.35),0 24px 50px -16px rgba(0,0,0,.85),0 0 90px -20px rgba(255,200,120,.25)}
/* Hajtásnyomok a kinyitott lapon */
.lap::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:
  linear-gradient(transparent calc(33.333% - 1px),rgba(90,60,25,.2) calc(33.333% - 1px),rgba(255,250,235,.45) calc(33.333% + 1px),transparent calc(33.333% + 2px)),
  linear-gradient(transparent calc(66.666% - 1px),rgba(90,60,25,.2) calc(66.666% - 1px),rgba(255,250,235,.45) calc(66.666% + 1px),transparent calc(66.666% + 2px)),
  linear-gradient(rgba(70,45,20,.05),transparent 33.3%,rgba(70,45,20,.06) 33.4%,transparent 66.6%,rgba(70,45,20,.05) 66.7%,transparent)}
.lap>*{position:relative}
.lap-kicker{margin:0 0 .5em;font:italic 300 clamp(15px,calc(var(--lw) * .046),19px)/1.3 var(--serif);color:var(--barna);letter-spacing:.03em}
.lap-nevek{margin:0;display:flex;flex-direction:column;align-items:center;font:400 min(calc(var(--lw) * var(--nk)),calc(var(--lh) * .118))/1.05 var(--script);color:var(--tinta);letter-spacing:0}
.lap-nevek>.ink{display:block}
.lap-es{display:block;margin:.02em 0 .04em;font:italic 300 .36em/1.2 var(--serif);color:var(--tinta-2)}
.kacs{width:min(62%,240px);height:auto;margin:.55em 0 .35em;overflow:visible}
.kacs path{fill:none;stroke:var(--tinta-2);stroke-width:1.3;stroke-linecap:round}
.lap-datum{margin:0;font:400 clamp(21px,calc(var(--lw) * .078),36px)/1.2 var(--serif);letter-spacing:.06em;font-variant-numeric:lining-nums;color:var(--tinta)}
.lap-ido{margin:.15em 0 0;font:italic 300 clamp(16px,calc(var(--lw) * .05),20px)/1.3 var(--serif);color:var(--barna)}
.lap-hely{margin:.7em 0 0;font:400 clamp(15px,calc(var(--lw) * .046),19px)/1.35 var(--serif);color:var(--barna);max-width:100%;overflow-wrap:anywhere}
.lap-pecset{position:absolute!important;left:50%;bottom:calc(var(--lh) * .035);width:clamp(40px,calc(var(--lw) * .12),58px);aspect-ratio:1;margin-left:calc(clamp(40px,calc(var(--lw) * .12),58px) / -2);font-size:clamp(16px,calc(var(--lw) * .042),19px)}
.ink{display:inline-block;padding:.12em .3em;margin:-.12em -.3em}

/* Írás: balról jobbra, aranyló tintával, ami lassan smaragdzöldre szárad */
.lap.iratlan .ink,.lap.iratlan .kacs,.lap.iratlan .lap-pecset{visibility:hidden}
.lap.iras .ink{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:ir var(--d) linear var(--t) both,szarad calc(var(--d) + 1.5s) ease-out var(--t) both}
@keyframes ir{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes szarad{0%,40%{color:#b9862c;text-shadow:0 0 .22em rgba(255,206,110,.85),0 0 .6em rgba(255,190,90,.35)}100%{text-shadow:0 0 0 rgba(255,206,110,0)}}
.lap.iras .kacs path{stroke-dasharray:1;animation:kacs .9s ease-in-out var(--t) both,kacsszin 2s ease-out var(--t) both}
@keyframes kacs{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kacsszin{0%,45%{stroke:#c39235}}
.lap.iras .lap-pecset{animation:nyom .5s cubic-bezier(.3,1.4,.5,1) var(--t) both}
@keyframes nyom{from{opacity:0;transform:scale(1.5) rotate(-12deg)}to{opacity:1;transform:none}}

/* Hajtások a nyitás alatt */
.level.hajtva .lap{clip-path:inset(33.333% 0 33.334% 0);box-shadow:none}
.hajt{position:absolute;left:0;right:0;height:33.334%;transform-style:preserve-3d}
.hajt-f{top:0;transform-origin:50% 100%;transform:perspective(1300px) rotateX(-180deg);z-index:3}
.hajt-a{top:66.666%;transform-origin:50% 0;transform:perspective(1300px) rotateX(180deg);z-index:2}
.hl{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.hajt-f .hl-be{background-position:0 0,0 0,50% 0,50% 0;background-size:200px 200px,520px 520px,100% 300%,100% 300%}
.hajt-a .hl-be{background-position:0 calc(var(--lh) / -1.5),0 calc(var(--lh) / -1.5),50% 100%,50% 100%;background-size:200px 200px,520px 520px,100% 300%,100% 300%}
.hl-ki{transform:rotateX(180deg);background-color:#e6d7b8;box-shadow:inset 0 0 0 1px rgba(120,85,40,.18),inset 0 0 26px rgba(120,80,35,.22)}
.hajt-f .hl-ki{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--lh) * .018) 8% calc(var(--lh) * .06);text-align:center;color:var(--tinta);
  box-shadow:inset 0 0 0 1px rgba(120,85,40,.18),inset 0 0 26px rgba(120,80,35,.22),0 18px 40px -14px rgba(0,0,0,.9)}
.arny{position:absolute;inset:0;background:linear-gradient(rgba(40,25,10,.55),rgba(40,25,10,.25));opacity:0;pointer-events:none}
.cim-kedves{align-self:flex-start;margin:0 0 .2em;font:italic 300 clamp(13px,calc(var(--lw) * .036),16px)/1.2 var(--serif);color:var(--tinta-2)}
.cim-nevek{margin:0;font:400 min(calc(var(--lw) * var(--nka)),calc(var(--lh) * .085))/1.1 var(--script);color:var(--tinta);white-space:nowrap}
.cim-sor{margin:.1em 0 0;font:italic 300 clamp(14px,calc(var(--lw) * .04),17px)/1.25 var(--serif);color:var(--tinta-2)}
.cim-datum{margin:.15em 0 0;font:400 clamp(14px,calc(var(--lw) * .042),18px)/1.25 var(--serif);letter-spacing:.06em;color:var(--tinta)}
.pecset{position:absolute;left:50%;top:66.666%;z-index:4;width:clamp(56px,calc(var(--lw) * .18),86px);aspect-ratio:1;margin:calc(clamp(56px,calc(var(--lw) * .18),86px) / -2) 0 0 calc(clamp(56px,calc(var(--lw) * .18),86px) / -2);
  padding:0;border:0;background:none;cursor:pointer;font-size:clamp(18px,calc(var(--lw) * .056),27px);-webkit-tap-highlight-color:transparent}
.pecset:focus-visible{outline-offset:6px;border-radius:50%}
.pf{position:absolute!important;inset:0}
.pf-b{clip-path:polygon(0 0,53% 0,46% 22%,56% 44%,45% 63%,54% 82%,49% 100%,0 100%)}
.pf-j{clip-path:polygon(53% 0,100% 0,100% 100%,49% 100%,54% 82%,45% 63%,56% 44%,46% 22%)}
.pecset.hivo{animation:hiv 1.6s ease-in-out infinite}
@keyframes hiv{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,120,0))}50%{filter:drop-shadow(0 0 10px rgba(255,200,120,.75))}}

.cue{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:7;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--krem);font:italic 300 15px/1.2 var(--serif);text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.9);transition:opacity .8s ease .3s}
.cue::after{content:"";width:1px;height:22px;background:linear-gradient(var(--arany),rgba(217,180,108,0));animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.szoba.nyitas .cue{opacity:0;pointer-events:none;transition:none}

/* Nyitás rétege: felirat fent, tipp és kihagyás lent; a levél kapja az érintést */
.op{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 20px max(14px,env(safe-area-inset-bottom));pointer-events:none;transition:opacity .6s ease}
.op.halvanyul .op-cim,.op.halvanyul .op-tipp{opacity:0;transition:opacity .5s ease}
.op:focus{outline:none}
.op-cim{margin:0;text-align:center;font:italic 300 17px/1.3 var(--serif);color:var(--krem);text-shadow:0 1px 14px rgba(0,0,0,.9)}
.op-also{text-align:center}
.op-tipp{margin:0 auto 2px;max-width:22em;min-height:1.4em;font:italic 300 19px/1.3 var(--serif);color:var(--arany-2);text-shadow:0 1px 14px rgba(0,0,0,.95)}
.op-skip{pointer-events:auto;background:none;border:0;padding:10px 14px;color:var(--krem);font:400 15px/1.2 var(--serif);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(239,230,211,.55);text-shadow:0 1px 10px rgba(0,0,0,.9);cursor:pointer}

/* ───────────── Meghívás ───────────── */
.hivas{padding:clamp(72px,12vw,150px) 0 clamp(60px,9vw,110px);background:linear-gradient(#1b130d,var(--ej) 220px)}
.hivas-szoveg{margin:0 0 clamp(34px,5vw,58px);max-width:21em;font:italic 300 clamp(1.65rem,4.6vw,2.6rem)/1.32 var(--serif);color:var(--krem)}
.tenyek{margin:0 0 38px;display:grid;gap:18px 44px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));max-width:920px}
.tenyek div{padding-top:14px;border-top:1px solid rgba(217,180,108,.4)}
.tenyek dt{font:italic 300 16px/1.3 var(--serif);color:var(--arany);margin-bottom:4px}
.tenyek dd{margin:0;font:400 21px/1.35 var(--serif)}

/* ───────────── Történet ───────────── */
.tortenet{padding:clamp(64px,10vw,130px) 0;background:var(--ej-2)}
.tortenet-in{display:grid;gap:clamp(36px,6vw,84px);align-items:center}
@media (min-width:860px){.tortenet-in{grid-template-columns:.9fr 1fr}}
.keret{position:relative;margin:0;max-width:460px;aspect-ratio:4/5;padding:10px;background:linear-gradient(135deg,#6b5228,#d9b46c 30%,#8a6a32 55%,#e6c98a 75%,#6b5228);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.keret img{width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.keret::after{content:"";position:absolute;inset:10px;pointer-events:none;box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.tortenet-szoveg{max-width:34em}
.tortenet-szoveg p{margin:0 0 1em;color:#ddd3bf}
.tortenet-szoveg h3{font:italic 400 23px/1.3 var(--serif);color:var(--arany);margin:1.2em 0 .3em}
.tortenet-szoveg ul{padding-left:1.1em;color:#ddd3bf}

/* ───────────── Órarend: vonalas pergamenlap ───────────── */
.orarend{padding:clamp(72px,10vw,130px) 0;background:radial-gradient(70% 60% at 50% 0%,rgba(255,180,90,.08),transparent 70%),var(--dio)}
.orarend-lap{position:relative;max-width:760px;margin:0 auto;padding:clamp(30px,6vw,60px) clamp(20px,5vw,56px) clamp(26px,5vw,50px) clamp(30px,7vw,84px);color:var(--barna);border-radius:2px;
  background-color:var(--pergamen);background-image:var(--perg-zaj),var(--perg-folt),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(120,80,35,.3));background-size:200px 200px,520px 520px,100% 100%;
  box-shadow:0 1px 1px rgba(60,40,20,.3),0 34px 60px -24px rgba(0,0,0,.85)}
.orarend-lap::before{content:"";position:absolute;top:0;bottom:0;left:clamp(16px,4.5vw,58px);width:4px;border-left:1px solid rgba(106,22,38,.42);border-right:1px solid rgba(106,22,38,.42);pointer-events:none}
.orarend-fej{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;margin-bottom:clamp(14px,3vw,26px);padding-bottom:10px;border-bottom:1px solid rgba(77,59,40,.35)}
.orarend-fej h2{margin:0;font:400 clamp(2.8rem,9vw,4.2rem)/1 var(--script);color:var(--tinta)}
.orarend-fej p{margin:0;font:italic 300 17px/1.3 var(--serif);color:var(--barna)}
.orak{list-style:none;margin:0;padding:0}
.orak li{display:grid;grid-template-columns:72px 1fr;gap:2px 18px;align-items:baseline;padding:14px 0 15px;border-bottom:1px solid rgba(77,59,40,.2);transition-delay:calc(var(--i) * 70ms)}
.orak li:last-child{border-bottom:0}
.ora-ido{font:400 21px/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--bordo)}
.ora-mi h3{margin:0;font:400 20px/1.3 var(--serif);color:var(--tinta)}
.ora-mi p{margin:3px 0 0;font:italic 300 17px/1.45 var(--serif);color:#5e4a33}
@media (max-width:420px){.orak li{grid-template-columns:1fr;gap:0}}

/* ───────────── Helyszín ───────────── */
.helyszin{padding:clamp(72px,10vw,130px) 0;background:radial-gradient(60% 70% at 85% 30%,rgba(110,140,200,.1),transparent 70%),var(--ej)}
.helyszin-szoveg{max-width:640px}
.elo{margin:0 0 .4em;font:italic 300 17px/1.3 var(--serif);color:var(--smaragd)}
.helyszin-szoveg>p:not(.elo){color:#ddd3bf;max-width:32em}
.gombok{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ───────────── Amit jó, ha tudtok ───────────── */
.gyik{padding:clamp(72px,10vw,130px) 0;background:var(--ej-2)}
.gyik-in{max-width:820px}
.kerdesek details{border-top:1px solid rgba(217,180,108,.28)}
.kerdesek details:last-child{border-bottom:1px solid rgba(217,180,108,.28)}
.kerdesek summary{position:relative;display:block;padding:18px 40px 18px 0;font:400 21px/1.35 var(--serif);color:var(--krem);cursor:pointer;list-style:none}
.kerdesek summary::-webkit-details-marker{display:none}
.kerdesek summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.5px solid var(--arany);border-bottom:1.5px solid var(--arany);transform:rotate(45deg);transition:transform .3s ease}
.kerdesek details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.kerdesek .txt{padding:0 0 20px;color:#ddd3bf}
.kerdesek .txt p{margin:0 0 .6em}
.kerdesek ul{margin:0;padding-left:1.1em}

/* ───────────── Visszajelzés: bagolyposta ───────────── */
.valasz{padding:clamp(72px,10vw,130px) 0;background:radial-gradient(60% 50% at 50% 0%,rgba(255,180,90,.08),transparent 70%),var(--dio)}
.valasz-lap{position:relative;max-width:640px;margin:0 auto;padding:clamp(30px,6vw,56px) clamp(20px,5vw,48px);color:var(--barna);border-radius:2px;
  background-color:var(--pergamen);background-image:var(--perg-zaj),var(--perg-folt),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(120,80,35,.3));background-size:200px 200px,520px 520px,100% 100%;
  box-shadow:0 1px 1px rgba(60,40,20,.3),0 34px 60px -24px rgba(0,0,0,.85);--bk-edit:rgba(106,22,38,.6);color-scheme:light}
.valasz-lap h2{margin:0 0 .3em;font:400 clamp(2.1rem,7.4vw,3.2rem)/1.1 var(--script);color:var(--tinta)}
.valasz-bev{margin:0 0 26px;color:#5e4a33}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin:0 0 7px;font:400 16px/1.35 var(--serif);color:var(--tinta);padding:0}
.field small{display:block;margin-top:6px;font-size:14px;color:#5e4a33}
.input{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(77,59,40,.4);border-radius:3px;background:rgba(255,252,242,.55);color:#2a2116;font-size:16px;transition:border-color .2s ease,background .2s ease}
.input::placeholder{color:rgba(77,59,40,.62)}
.input:focus{outline:none;border-color:var(--tinta);background:rgba(255,252,242,.85);box-shadow:0 0 0 1px var(--tinta)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d3b28' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea.input{min-height:110px;resize:vertical}
.choice{display:grid;gap:10px}
@media (min-width:560px){.choice{grid-template-columns:1fr 1fr}}
.choice label{display:flex;align-items:center;gap:10px;min-height:50px;margin:0;padding:12px 14px;border:1px solid rgba(77,59,40,.4);border-radius:3px;cursor:pointer;color:#2a2116;background:rgba(255,252,242,.35);transition:border-color .2s ease,background .2s ease}
.choice input{accent-color:var(--tinta);width:18px;height:18px;margin:0;flex:none}
.choice label:has(input:checked){border-color:var(--tinta);background:rgba(21,69,58,.08);box-shadow:inset 0 0 0 1px var(--tinta)}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.cond>div{overflow:hidden;min-height:0}
.cond.show{grid-template-rows:1fr}
.cond.show>div{padding-top:4px}
.form-error{margin:0 0 12px;min-height:1px;color:var(--bordo);font-weight:400}
.kuldes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.demo-note{margin:0;font:italic 300 14px/1.4 var(--serif);color:#5e4a33}
.koszi{text-align:center;padding:10px 0;outline:none}
.koszi-pecset{width:64px;aspect-ratio:1;margin:0 auto 14px;font-size:21px;animation:nyom .55s cubic-bezier(.3,1.4,.5,1) both}
.koszi-nagy{margin:0 0 .2em;font:400 clamp(2.2rem,7vw,3rem)/1.1 var(--script);color:var(--tinta)}

/* ───────────── Zárás ───────────── */
.zaras{padding:clamp(70px,10vw,120px) 20px calc(clamp(60px,9vw,100px) + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(var(--dio),#0a0705)}
.zaras-nevek{margin:0 0 .2em;font:400 clamp(2.6rem,9vw,4.4rem)/1.15 var(--script);color:var(--arany-2);text-shadow:0 0 30px rgba(255,200,120,.25);overflow-wrap:anywhere}
.zaras p{margin:0;color:var(--krem-2)}
.ujra{margin-top:26px;background:none;border:0;padding:10px 14px;color:var(--arany);font:italic 300 16px/1.2 var(--serif);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ───────────── Belépőkód ───────────── */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:radial-gradient(60% 50% at 50% 30%,rgba(255,180,90,.12),transparent 70%),rgba(8,10,16,.97)}
.gate form{color-scheme:light;width:min(100%,420px);padding:36px 26px 30px;text-align:center;color:var(--barna);border-radius:2px;
  background-color:var(--pergamen);background-image:var(--perg-zaj),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(120,80,35,.3));background-size:200px 200px,100% 100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.gate-pecset{width:62px;aspect-ratio:1;margin:0 auto 14px;font-size:20px}
.gate h1{margin:0 0 .3em;font:400 clamp(2.2rem,9vw,2.8rem)/1.1 var(--script);color:var(--tinta)}
.gate p{margin:0 0 18px}
.gate .input{text-align:center;letter-spacing:.2em}

/* ───────────── Kis kijelzők, fekvő telefon ───────────── */
@media (max-width:380px){body{font-size:16px}.tenyek dd{font-size:19px}}
@media (orientation:landscape) and (max-height:600px){.szoba{--aw:min(30vw,calc(var(--hh) * .3),300px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .szoba *,.szoba *::before,.szoba *::after{animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .cond{transition:none}
}