/* Plus Karácsony – karos húzógép */
@font-face {
	font-family: "Magic";
	src: url('../font/Magic_Christmas.woff2') format('woff2'), url('../font/Magic_Christmas.ttf') format('truetype');
	font-display: swap;
}
:root { --ej: #26050b; --ej2: #66101d; --piros: #d8232a; --arany: #f6c453; --zold: #1f7a4d; --krem: #fff8e9; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: #fff; font-family: Epilogue, system-ui, sans-serif;
	background: radial-gradient(ellipse at 50% 15%, #b01b2c 0%, #66101d 48%, #26050b 100%); }
.magic { font-family: Magic, Sora, serif; font-weight: 400; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--arany); }
#ho { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: fixed; inset: 0; z-index: 1; }

.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s, visibility 0s .5s; overflow-y: auto; overflow-x: hidden; }
.scene.aktiv { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s; }
.kicsi { font-size: 14px; opacity: .75; margin-top: 18px; }

/* gombok */
.gomb { display: inline-block; font: 800 17px Sora, sans-serif; color: #fff; text-decoration: none; cursor: pointer; border: 0;
	background: linear-gradient(#e8333a, #b3141b); border-radius: 40px; padding: 15px 32px;
	box-shadow: 0 6px 0 #7a0a12, 0 14px 26px rgba(0, 0, 0, .35); transition: transform .12s, box-shadow .12s, opacity .2s; }
.gomb:hover { transform: translateY(-2px); }
.gomb:active { transform: translateY(5px); box-shadow: 0 1px 0 #7a0a12, 0 4px 10px rgba(0, 0, 0, .35); }
.gomb.nagy { font-size: clamp(20px, 3vw, 28px); padding: 18px 54px; }
.gomb.hatter { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset; }
.gomb:disabled { opacity: .35; pointer-events: none; }

/* kapu */
.kapu-doboz { text-align: center; padding: 24px; }
.kapu-plus { font: 800 96px/1 Sora, sans-serif; color: #e6007e; text-shadow: 0 0 30px rgba(230, 0, 126, .7); animation: lebeg 3s ease-in-out infinite; }
.kapu-doboz h1 { font-size: clamp(36px, 9vw, 76px); margin: 4px 0 30px; text-shadow: 0 0 24px rgba(246, 196, 83, .5); }

/* intró */
#intro { background: linear-gradient(#040820, #11205e 80%, #1d2f7a); }
.eg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.eg.be { opacity: 1; }
.csillag { position: absolute; width: var(--m); height: var(--m); background: #fff; border-radius: 50%; animation: tw 3s infinite ease-in-out; }
.intro-svg { position: relative; width: min(100vw, 100vh); height: min(100vw, 100vh); max-height: 100%; }
.stud-cim { font: 800 58px Sora, sans-serif; letter-spacing: 12px; fill: #fff; filter: drop-shadow(0 0 14px rgba(150, 180, 255, .8)); }
.stud-alcim { font: 600 12px Sora, sans-serif; fill: #9fb0ff; }
.villan { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s; }
.kredit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .5s; }
.kredit.lathato { opacity: 1; }
.kr-sor { text-align: center; margin: 12px 0; opacity: 0; transform: translateY(14px); transition: opacity 1s, transform 1s; }
.kr-sor.be { opacity: 1; transform: none; }
.kr-sor span { display: block; font: 600 15px Sora, sans-serif; letter-spacing: 7px; text-transform: uppercase; opacity: .85; }
.kr-sor img { display: block; margin: 12px auto; max-width: 78vw; height: auto; }
.kihagy { position: absolute; right: 18px; bottom: 18px; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 30px; padding: 10px 18px; font: 600 14px Sora, sans-serif; cursor: pointer; }
.kihagy:hover { background: rgba(255, 255, 255, .25); }

/* cím */
.fenyfuzer { position: absolute; left: 0; right: 0; top: 0; height: 52px; animation: villog 1.6s steps(2) infinite;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='52'%3E%3Cpath d='M0 8 Q50 40 100 8 T200 8' fill='none' stroke='%23123' stroke-width='3'/%3E%3Cg%3E%3Ccircle cx='25' cy='28' r='8' fill='%23ff4d4d'/%3E%3Ccircle cx='75' cy='34' r='8' fill='%23f6c453'/%3E%3Ccircle cx='125' cy='28' r='8' fill='%234dff88'/%3E%3Ccircle cx='175' cy='34' r='8' fill='%236aa8ff'/%3E%3C/g%3E%3C/svg%3E") repeat-x top; }
.cim-doboz { text-align: center; padding: 24px; position: relative; }
.cim-fo { font-size: clamp(46px, 12vw, 150px); line-height: 1; color: #fff; text-shadow: 0 0 34px rgba(246, 196, 83, .6), 0 7px 0 #7a0a12; animation: lebeg 4s ease-in-out infinite; }
.cim-al { font-size: clamp(22px, 4.2vw, 46px); color: var(--arany); margin: 14px 0 38px; }
.vege-sz { font-size: clamp(16px, 2.4vw, 22px); line-height: 1.6; margin: 22px auto; max-width: 560px; }
.avege { font: 800 40px Sora, sans-serif; margin: 26px 0; letter-spacing: 8px; }
.avege span { display: block; font: 400 14px Epilogue, sans-serif; letter-spacing: 3px; margin-top: 6px; opacity: .7; }

/* névválasztás */
.valaszt-doboz { width: min(1100px, 94vw); padding: 26px 0 30px; text-align: center; margin: auto; }
.valaszt-doboz h2 { font-size: clamp(30px, 5.5vw, 58px); color: var(--arany); text-shadow: 0 4px 0 #7a0a12; }
.nevek { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; margin: 24px 0 26px; }
.nev-kartya { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; cursor: pointer;
	background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .16); border-radius: 18px; padding: 12px 6px 10px;
	animation: belep .5s both; animation-delay: calc(var(--i) * 55ms); transition: transform .2s, background .2s, border-color .2s; font-family: inherit; }
.nev-kartya:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .16); }
.nev-kartya .karakter { height: 132px; width: auto; }
.nev-kartya:hover .kar-test { animation: bob .55s ease-in-out infinite alternate; }
.nev-cimke { font: 800 17px Sora, sans-serif; }
.nev-kartya.kijelolt { border-color: var(--arany); background: rgba(246, 196, 83, .2); box-shadow: 0 0 0 4px rgba(246, 196, 83, .25); }
.nev-kartya.mar { opacity: .42; filter: grayscale(.8); }
.mar-jelzo { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font: 700 11px Sora, sans-serif; background: #000a; padding: 4px 8px; border-radius: 10px; white-space: nowrap; }
.nev-kartya.rez { animation: rez .4s; }
.lab { position: sticky; bottom: 0; padding: 10px 0; }

/* kívánság */
.kartya { width: min(880px, 94vw); background: rgba(54, 6, 14, .8); border: 2px solid rgba(246, 196, 83, .5); border-radius: 24px; padding: 28px; backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); margin: auto; }
.kiv-kartya { display: flex; gap: 28px; align-items: center; }
.kiv-avatar .karakter { height: 270px; width: auto; }
.kiv-szoveg { flex: 1; }
.kiv-szoveg h2 { font-size: clamp(30px, 4vw, 48px); color: var(--arany); margin-bottom: 10px; }
.kiv-szoveg p { line-height: 1.55; margin-bottom: 14px; }
.kiv-szoveg small { opacity: .7; }
textarea { width: 100%; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .25); background: #fffdf5; color: #222; padding: 14px; font: 16px/1.4 Epilogue, sans-serif; resize: vertical; }
textarea:focus { outline: 0; border-color: var(--arany); }
.gombsor { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* a gép */
#gep { justify-content: flex-start; overflow: hidden; }
.hud { margin: 8px auto 2px; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 6px 20px; border-radius: 30px; background: rgba(0, 0, 0, .3);
	font: 700 clamp(14px, 2.1vw, 20px) Sora, sans-serif; text-align: center; max-width: 94vw; z-index: 5; }
.hud:empty { opacity: 0; }
.hud.pop { animation: pop .45s; }
.gep-sav { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; padding: 4px 8px 0; }
.gep-wrap { position: relative; height: 100%; aspect-ratio: 600 / 920; max-height: calc((100vw - 16px) * 920 / 600); }
#gepsvg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55)); }
.marq { font-family: Magic, Sora, sans-serif; font-size: 52px; fill: var(--arany); filter: drop-shadow(0 0 8px rgba(246, 196, 83, .8)); }
.izzo { animation: villog 1s infinite; }
.izzo.a { animation-delay: .5s; }
.eletben .izzo { animation-duration: .4s; }
#nagygomb { transition: transform .1s; }
#nyil { animation: nyil .9s ease-in-out infinite alternate; }
#slotfeny { transition: opacity .3s; }
#prizeG.forro .tpapir { cursor: pointer; animation: glow .8s ease-in-out infinite alternate; }
#prizeG.forro { cursor: pointer; }

.vezerlok { height: 76px; display: flex; gap: 14px; justify-content: center; align-items: center; opacity: 0; transform: translateY(10px); transition: .3s; pointer-events: none; }
.vezerlok.lathato { opacity: 1; transform: none; pointer-events: auto; }
.vez { min-width: 76px; height: 56px; border-radius: 16px; border: 0; font: 800 22px Sora, sans-serif; background: linear-gradient(#ffd96a, #e0a920); color: #7a0a12;
	box-shadow: 0 5px 0 #a06f0a; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.vez.le { padding: 0 26px; background: linear-gradient(#e8333a, #b3141b); color: #fff; box-shadow: 0 5px 0 #7a0a12; font-size: 20px; }
.vez.nyomva, .vez:active { transform: translateY(4px); box-shadow: 0 1px 0 #0003; }

/* karakter a gép mellett */
.kar { position: absolute; left: 93%; bottom: -1%; height: 62%; aspect-ratio: 120 / 262; pointer-events: none; transition: transform 2.4s linear; z-index: 3; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }
.kar .karakter { width: 100%; height: 100%; overflow: visible; }
.kar.kivul { transform: translateX(110vw); transition: none; }
.kar-bal, .kar-jobb { transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.kar.nyul .kar-bal { transform: rotate(112deg); }
.kar-ll, .kar-rl { transform-box: fill-box; transform-origin: 50% 0; }
.kar.setal .kar-test { animation: bob .25s ease-in-out infinite alternate; }
.kar.setal .kar-ll { animation: ll .5s ease-in-out infinite alternate; }
.kar.setal .kar-rl { animation: ll .5s ease-in-out infinite alternate-reverse; }
.kar.setal .kar-bal { animation: ll .5s ease-in-out infinite alternate-reverse; }
.kar.setal .kar-jobb { animation: ll .5s ease-in-out infinite alternate; }
.kar:not(.setal) .kar-test { animation: lelegzik 3s ease-in-out infinite; }

/* érme */
.erme { position: fixed; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; display: none; align-items: center; justify-content: center; z-index: 30;
	background: radial-gradient(circle at 35% 30%, #fff6bf, #f6c453 48%, #b8860b); border: 3px solid #b8860b; font: 800 30px Sora, sans-serif; color: #a8760a; cursor: grab; touch-action: none;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(255, 255, 255, .25); user-select: none; -webkit-user-select: none; }
.erme.lathato { display: flex; animation: erme-pop .45s, erme-puls 1.1s .5s ease-in-out infinite alternate; }
.erme.fogva { cursor: grabbing; animation: none; transform: scale(1.18); box-shadow: 0 14px 24px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(255, 255, 255, .25); }
.erme.bent { animation: none; transition: transform .4s ease-in, opacity .4s; transform: scaleX(.16) translateY(34px); opacity: 0; }

/* eredmény: papír kibontása */
.eredmeny { position: fixed; inset: 0; z-index: 40; background: rgba(28, 2, 8, .86); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; overflow-y: auto; }
.eredmeny.aktiv { opacity: 1; visibility: visible; transition: opacity .4s; }
.er-doboz { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; margin: auto; }
.lap-keret { --sc: 1; width: calc(320px * var(--sc)); height: calc(330px * var(--sc)); flex: none; }
.lap-skala { position: relative; width: 320px; height: 330px; transform: scale(var(--sc)); transform-origin: top left; perspective: 1500px; }
.lap { position: absolute; left: 0; top: 90px; width: 320px; height: 150px; transform-style: preserve-3d; }
.lp { transform-style: preserve-3d; }
.lp2 { position: relative; width: 100%; height: 100%; }
.lp1, .lp3 { position: absolute; left: 0; width: 100%; height: 90px; transition: transform .85s cubic-bezier(.3, .8, .3, 1); }
.lp1 { bottom: 100%; transform-origin: 50% 100%; transform: translateZ(4px) rotateX(-180deg); }
.lp3 { top: 100%; transform-origin: 50% 0; transform: translateZ(2px) rotateX(180deg); }
.lap.ny1 .lp1 { transform: translateZ(0) rotateX(0deg); }
.lap.ny2 .lp3 { transform: translateZ(0) rotateX(0deg); }
.lp-elol, .lp-hat { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 18px; }
.lp-elol { background: linear-gradient(#fffdf5, #f6ecd2); color: #4a3a2a; box-shadow: inset 0 0 36px rgba(140, 100, 40, .2); }
.lp-hat { background: linear-gradient(#f4e8c8, #e7d8b0); transform: rotateX(180deg); box-shadow: inset 0 0 36px rgba(140, 100, 40, .3); }
.lp1 .lp-hat::after { content: "+"; width: 38px; height: 38px; border-radius: 50%; background: #d8232a; color: #fff; font: 800 28px/38px Sora, sans-serif; box-shadow: 0 3px 6px #0005, inset 0 0 0 3px #ffffff30; }
.lp3 .lp-hat { background: repeating-linear-gradient(45deg, #e7d8b0 0 12px, #f4e8c8 12px 24px); }
.lp-fel span, .lp-al span { font: 700 15px Sora, sans-serif; color: #7a0a12; }
.lp-al span { font-weight: 600; font-size: 13px; color: #5b6b55; }
.lp-fel { border-radius: 4px 4px 0 0; }
.lp-kozep { padding-top: 14px; }
.lp-kis { font: 700 13px Sora, sans-serif; letter-spacing: 5px; text-transform: uppercase; color: #9a8a76; }
.lp-nev { font-family: Sora, sans-serif; font-weight: 800; font-size: 50px; line-height: 1.05; color: #c8202a; opacity: 0; transform: scale(.4) rotate(-6deg); transition: opacity .5s, transform .7s cubic-bezier(.2, 1.6, .4, 1); text-shadow: 0 3px 0 #f6c453; }
.lap.ny3 .lp-nev { opacity: 1; transform: none; }
.er-alj { text-align: center; max-width: min(560px, 92vw); opacity: 0; transform: translateY(14px); transition: .5s; pointer-events: none; }
.er-alj.lathato { opacity: 1; transform: none; pointer-events: auto; }
.er-kivansag { text-align: left; background: rgba(255, 255, 255, .1); border-radius: 16px; padding: 12px 18px; margin-bottom: 12px; max-height: 26vh; overflow: auto; font-size: 15px; line-height: 1.5; }
.er-kivansag:empty { display: none; }
.er-kivansag h4 { font-size: 24px; color: var(--arany); margin-bottom: 6px; }
.er-level { font-size: 14px; opacity: .85; margin: 6px 0 14px; }
#konfetti { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 41; }
#konfetti.lathato { opacity: 1; }

.hang { position: fixed; right: 14px; top: 14px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer; }
.hang:hover { background: rgba(255, 255, 255, .28); }

/* animációk */
@keyframes lebeg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes villog { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes belep { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes rez { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes lelegzik { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes ll { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes erme-pop { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
@keyframes erme-puls { from { box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 0 rgba(246, 196, 83, .8), inset 0 0 0 5px rgba(255, 255, 255, .25); }
	to { box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 16px rgba(246, 196, 83, 0), inset 0 0 0 5px rgba(255, 255, 255, .25); } }
@keyframes nyil { from { transform: translateX(0); } to { transform: translateX(-7px); } }
@keyframes glow { from { filter: drop-shadow(0 0 3px #ffe27a); } to { filter: drop-shadow(0 0 16px #fff2a8); } }

/* kis kijelző */
@media (max-width: 720px) {
	.kiv-kartya { flex-direction: column; text-align: center; padding: 0; }
	.kartya { padding: 20px 16px; }
	.kiv-avatar .karakter { height: 120px; }
	.gombsor { justify-content: center; }
	.kar { left: auto; right: -4%; bottom: -1%; height: 33%; }
	.nev-kartya .karakter { height: 96px; }
	.nevek { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
	.vezerlok { height: 68px; }
	.vez { min-width: 68px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
	.cim-fo, .kapu-plus { animation: none; }
}

/* intró #1: kastély */
#intro0 { background: #05061e; overflow: hidden; }
.kastely-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#tuzijatek { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kcs { animation: tw 3s infinite ease-in-out; }
.kablak { animation: villog 3.4s infinite ease-in-out; }
.zaszlo { transform-box: fill-box; transform-origin: left center; animation: lobog 1.1s ease-in-out infinite alternate; }
.fust { transform-box: fill-box; transform-origin: center; animation: fust 2.4s linear infinite; }
.fust.f2 { animation-delay: .8s; } .fust.f3 { animation-delay: 1.6s; }
.hull { animation: hull 3s ease-in-out infinite alternate; }
.hull.h2 { animation-delay: -1s; } .hull.h3 { animation-delay: -2s; }
.plusney { position: absolute; left: 0; right: 0; top: 60%; text-align: center; opacity: 0; transform: scale(.92); transition: opacity 1.6s, transform 1.6s; pointer-events: none; text-shadow: 0 2px 16px #000a; }
.plusney.be { opacity: 1; transform: none; }
.plusney-cim { font-size: clamp(54px, 12vw, 150px); line-height: 1; color: #fff; text-shadow: 0 0 34px #ff9ad5, 0 0 8px #fff, 0 5px 0 #6a2a8a; }
.plusney-al { font: 600 clamp(11px, 1.6vw, 18px) Sora, sans-serif; color: #ffd9f0; margin-top: 6px; letter-spacing: .3em; }
@keyframes lobog { from { transform: skewY(-9deg) scaleX(1); } to { transform: skewY(9deg) scaleX(.82); } }
@keyframes fust { from { transform: translate(0, 0) scale(.6); opacity: .8; } to { transform: translate(-28px, -46px) scale(2.2); opacity: 0; } }
@keyframes hull { from { transform: translateX(-7px); } to { transform: translateX(7px); } }