@font-face{font-family:"Baloo";src:url(../fonts/Baloo-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Quicksand";src:url(../fonts/Quicksand-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--ink:#1B1033;--bg:#1B1033;--card:#2A1850;--card2:#34205F;--line:#5B3A99;--pur:#9B4DFF;--pink:#FF4FD8;--cyan:#5CF2FF;
--gold:#FFE45C;--green:#35E0A1;--orange:#FF8A3D;--txt:#F4F1FF;--soft:#C9B8F0;--red:#FF6B6B}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:"Quicksand","Trebuchet MS",system-ui,sans-serif;
font-weight:700;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#app{min-height:100dvh;position:relative;overflow-x:hidden;
background:radial-gradient(circle at 20% 10%,#4A2489 0,transparent 45%),radial-gradient(circle at 85% 80%,#3B1466 0,transparent 40%),var(--bg);
padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#app:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#fff 1px,transparent 1.5px);
background-size:90px 90px,140px 140px;background-position:0 0,40px 60px}
.screen{position:relative;z-index:1;max-width:1100px;margin:0 auto;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,.h{font-family:"Baloo","Trebuchet MS",sans-serif;font-weight:400;line-height:1.1;margin:0}
h1{font-size:clamp(30px,6vw,56px)}h2{font-size:clamp(24px,4.5vw,38px)}
.soft{color:var(--soft)}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:12px 22px;font-size:clamp(17px,2.6vw,21px);
color:var(--ink);background:var(--gold);box-shadow:0 5px 0 #C9A21E;transition:transform .08s;font-family:"Baloo",sans-serif}
button:active{transform:translateY(4px);box-shadow:0 1px 0 #C9A21E}
button:disabled{opacity:.5}
button.ghost{background:transparent;color:var(--txt);box-shadow:none;border:3px solid var(--line)}
button.pur{background:var(--pur);color:#fff;box-shadow:0 5px 0 #6E24D9}
button:focus-visible{outline:4px solid var(--cyan);outline-offset:3px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bar .t{flex:1;font-family:"Baloo";font-size:clamp(20px,3.6vw,28px);min-width:120px}
.pill{background:#3B1F6B;border-radius:999px;padding:8px 16px;color:var(--gold);font-family:"Baloo";font-size:20px;white-space:nowrap}
.round{width:52px;height:52px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:24px}
/* kezdőlap */
.home{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:4vh}
.home .team{display:flex;align-items:flex-end;justify-content:center;gap:0;flex-wrap:nowrap;width:min(760px,100%)}
.home .team img{width:24%;max-width:190px;filter:drop-shadow(0 0 14px rgba(180,92,255,.7));animation:bob 3s ease-in-out infinite}
.home .team img:nth-child(2){width:30%;max-width:240px;animation-delay:.4s}.home .team img:nth-child(3){animation-delay:.8s}
.home .team img:nth-child(4){animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-8px)}}
.home .btns{display:flex;flex-direction:column;gap:14px;width:min(360px,90%)}
.home .btns button{font-size:24px;padding:16px}
/* térkép */
.map{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:560px){.map{grid-template-columns:1fr}}
.region{border-radius:28px;padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;text-align:left;color:var(--txt);
border:4px solid var(--line);background:var(--card);box-shadow:none;transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.region:hover{transform:translateY(-3px)}
.region img{width:clamp(84px,16vw,130px);filter:drop-shadow(0 0 10px rgba(255,255,255,.25));flex:none}
.region .rn{font-family:"Baloo";font-size:clamp(22px,3.6vw,30px);display:block;line-height:1.05}
.region .rs{font-size:15px;color:var(--soft);display:block;margin:4px 0 8px}
.prog{display:block;height:12px;border-radius:99px;background:#1B1033;overflow:hidden;width:100%}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));border-radius:99px}
.r-szikra{border-color:#9B4DFF}.r-diocska{border-color:#FF8A3D}.r-holdi{border-color:#5CF2FF}.r-gombi{border-color:#35E0A1}
/* játéklista, szintek */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.game{border-radius:24px;padding:16px;background:var(--card);border:3px solid var(--line);color:var(--txt);box-shadow:none;text-align:left;
display:flex;flex-direction:column;gap:6px}
.game b{font-family:"Baloo";font-weight:400;font-size:26px}.game small{color:var(--soft);font-size:15px}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.lvl{aspect-ratio:1;border-radius:22px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
font-size:30px;background:var(--pur);color:#fff;box-shadow:0 5px 0 #6E24D9}
.lvl .st{font-size:14px;letter-spacing:1px;color:var(--gold)}
.lvl.locked{background:#2A1850;color:#6D5A9C;box-shadow:0 5px 0 #20113F}
/* játéktér */
.stage{background:#24134A;border-radius:24px;padding:14px;position:relative;min-height:300px}
.say{display:flex;align-items:flex-end;gap:10px;margin-top:12px;min-height:92px}
.say img{width:clamp(70px,12vw,100px);filter:drop-shadow(0 0 8px rgba(180,92,255,.8));flex:none}
.bubble{background:#fff;color:var(--ink);border-radius:20px;padding:10px 16px;font-size:clamp(17px,2.8vw,22px);position:relative;
margin-bottom:26px;max-width:640px;line-height:1.3}
.bubble:before{content:"";position:absolute;left:-10px;bottom:14px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.center{text-align:center}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.big{font-family:"Baloo";font-size:clamp(30px,6vw,52px)}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.pop{animation:pop .35s}@keyframes pop{50%{transform:scale(1.15)}}
.fx{position:fixed;pointer-events:none;font-size:28px;z-index:50;animation:fly 1.2s ease-out forwards}
@keyframes fly{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3)}}
.stars3{font-size:clamp(46px,10vw,80px);letter-spacing:6px}
.stars3 span{display:inline-block;color:#4A3478;transition:color .3s}.stars3 span.on{color:var(--gold);animation:pop .4s}
/* matricaalbum */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.stk{background:var(--card);border-radius:22px;border:3px dashed var(--line);aspect-ratio:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:8px;font-size:14px;color:var(--soft)}
.stk img{width:80%;height:auto}.stk.on{border-style:solid;border-color:var(--gold);background:#3B1F6B}
.stk.off img{filter:brightness(0) invert(.25);opacity:.6}
.panel{background:var(--card);border-radius:24px;padding:18px;margin-bottom:14px;line-height:1.5}
.panel p{margin:.4em 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}