/* Méhecske-kvíz (pages/mehecske-kviz.php): önálló, teljes képernyős játék, a webhely sablonja nélkül */
:root{--y:#FFC83D;--o:#F5A623;--br:#3B2A1A;--cr:#FFF7E6;--ok:#2E9E44;--okb:#E6F6E8;--bad:#D9432F;--lav:#F1EEFA;--lavb:#B9A8E3}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cr);color:var(--br);font:600 17px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}
a{color:#A0602C}
.bar{background:var(--y);display:flex;align-items:center;gap:10px;padding:10px 14px;position:sticky;top:0;z-index:5}
.bar .home{width:48px;height:48px;flex:none;border-radius:14px;border:3px solid var(--br);background:#fff;display:grid;place-items:center;padding:0}
.bar .home svg{width:26px;height:26px}
.ttl{flex:1;min-width:0}
.ttl .ch{font-size:13px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl h1{margin:0;font-size:clamp(19px,5vw,26px);font-weight:900;line-height:1.1}
.stars{flex:none;font-weight:900;display:flex;align-items:center;gap:4px;background:#fff;border:3px solid var(--br);border-radius:999px;padding:4px 12px 4px 8px;font-size:18px}
.stars svg{width:22px;height:22px}
.prog{height:8px;background:#FFE7A6}
.prog i{display:block;height:100%;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .4s}
main{max-width:760px;margin:0 auto;padding:16px 16px 40px}
.ic{display:block}
.q{font-size:clamp(18px,4.6vw,22px);font-weight:800;text-align:center;margin:2px 0 12px}
.msg{min-height:50px;text-align:center;margin:12px 0 0;font-weight:700;font-size:17px}
.msg.no{color:#B23A28}
.card{background:#fff;border:3px solid var(--o);border-radius:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:0 30px;border-radius:999px;border:3px solid var(--br);background:var(--y);font-weight:900;font-size:20px;box-shadow:0 4px 0 var(--br);transition:transform .1s,box-shadow .1s;text-decoration:none;color:var(--br)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--br)}
.btn.sec{background:#fff;font-size:17px;min-height:50px}
.btn:disabled{opacity:.45}
.c{text-align:center}
.mt16{margin-top:16px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.opt{position:relative;background:#fff;border:3px solid var(--o);border-radius:18px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;font-weight:800;font-size:16px;line-height:1.2;text-align:center;transition:background .2s,border-color .2s}
.opt .ic{width:72px;height:72px}
.opt.num{font-size:36px;min-height:76px}
.opt.ok{border-color:var(--ok);background:var(--okb)}
.opt.bad{border-color:var(--bad)}
.opt:disabled{opacity:1}
.opt.ok::after{content:"";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.sil{filter:brightness(0);opacity:.75}
.shake{animation:sh .4s}
@keyframes sh{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pic{display:block;width:100%;height:auto;max-height:44vh;margin:0 auto 12px}
.scene{display:block;width:100%;height:auto;border-radius:16px;border:3px solid var(--br);touch-action:manipulation;background:#FFF0C2}
.scene .it{cursor:pointer}
/* intro */
.intro{padding:22px 18px;text-align:center}
.intro .ics{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.intro .ics .ic{width:96px;height:96px}
.intro p{font-size:19px;line-height:1.5;margin:8px 0 20px;font-weight:600}
.tag{display:inline-block;background:var(--lav);border:2px solid var(--lavb);border-radius:999px;padding:3px 12px;font-size:14px;margin-bottom:10px}
/* home */
.hero{padding:22px 18px;text-align:center}
.hero .bee{width:170px;height:122px;margin:0 auto;display:block;animation:fly 3s ease-in-out infinite}
@keyframes fly{50%{transform:translateY(-10px) rotate(-3deg)}}
.hero h2{font-size:clamp(24px,6.5vw,34px);margin:6px 0;font-weight:900}
.hero p{margin:6px 0 16px;font-size:18px}
.hero small{display:block;margin-top:14px;font-size:14px;opacity:.8;font-weight:600}
.hero p.done{display:table;background:#BFE6A8;border-radius:999px;padding:4px 14px;font-weight:800;font-size:16px;margin:0 auto 14px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 6px}
.mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 14px;border:3px solid var(--br);border-radius:22px;background:var(--y);box-shadow:0 5px 0 var(--br);font-size:clamp(17px,4.6vw,21px);line-height:1.15;transition:transform .1s,box-shadow .1s}
.mode:active{transform:translateY(4px);box-shadow:0 1px 0 var(--br)}
.mode.nagy{background:#C4B5EC}
.mode .ic{width:96px;height:70px}
.mode small{display:block;margin:0;font-size:14px;font-weight:700;opacity:.85}
.mode i{font-style:normal;font-size:14px;background:#fff;border-radius:999px;padding:2px 10px;margin-top:2px}
@media (max-width:340px){.modes{grid-template-columns:1fr}}
/* order */
.ord{grid-template-columns:1fr 1fr}
.ord .opt{min-height:140px;padding-top:14px}
.ord .ic{width:84px;height:84px}
.nb{position:absolute;top:6px;left:6px;width:36px;height:36px;border-radius:50%;border:3px solid var(--br);background:#fff;display:grid;place-items:center;font-weight:900;font-size:19px}
.ok .nb{background:var(--y)}
.ord .opt.ok::after{display:none}
/* match */
.mt{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.mt .col{display:flex;flex-direction:column;gap:10px;justify-content:space-around}
.mt .lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mt .opt{flex-direction:row;justify-content:flex-start;text-align:left;min-height:76px;padding:6px 10px;font-size:15px}
.mt .opt .ic{width:58px;height:58px;flex:none}
.mt .R .opt{background:var(--lav);border-color:var(--lavb)}
.mt .R .opt.ok{background:var(--okb);border-color:var(--ok)}
.mt .opt.sel{border-color:var(--br);box-shadow:0 0 0 4px var(--y)}
.mt .opt.ok::after{width:20px;height:20px;top:4px;right:4px;background-size:15px}
.mt .R .opt.so{justify-content:center}
.mt .R .opt.so .ic{width:66px;height:66px}
/* diff */
.dif{display:grid;gap:10px}
.found{display:flex;justify-content:center;gap:10px;margin-top:12px}
.found i{width:34px;height:34px;border-radius:50%;border:3px solid var(--br);background:#fff;transition:background .2s}
.found i.on{background:var(--y)}
/* maze */
.mz{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;touch-action:none}
.ar{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(2,56px);gap:6px;justify-content:center;margin-top:12px}
.ar button{border:3px solid var(--br);border-radius:16px;background:#fff;display:grid;place-items:center;padding:0}
.ar button svg{width:26px;height:26px}
.ar .u{grid-column:2;grid-row:1}.ar .l{grid-column:1;grid-row:2}.ar .d{grid-column:2;grid-row:2}.ar .r{grid-column:3;grid-row:2}
/* dots */
.dots{display:block;width:100%;height:auto;border-radius:16px;border:3px solid var(--o);touch-action:manipulation;background:#FFFDF5}
#bf{transition:opacity .8s}
.pulse{animation:pl 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pl{50%{transform:scale(1.25);opacity:.5}}
/* board */
.bd{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.cell{aspect-ratio:1;border:3px solid var(--br);border-radius:12px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:clamp(14px,3.6vw,21px);line-height:1}
.cell .ic{width:44%;height:44%}
.piece{position:absolute;left:4%;top:-22%;width:92%;height:70%;z-index:2;animation:hop .25s}
.piece .ic{width:100%;height:100%}
@keyframes hop{50%{transform:translateY(-8px)}}
.roll{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.dice{width:76px;height:76px;border-radius:18px;border:4px solid var(--br);background:#fff;display:grid;place-items:center;font-size:40px;font-weight:900}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.legend span{display:flex;align-items:center;gap:6px;border:2px solid var(--br);border-radius:12px;padding:4px 8px;font-size:14px}
.legend .ic{width:24px;height:24px}
.legend small{font-weight:600}
/* overlay */
.ov{position:fixed;inset:0;background:rgba(59,42,26,.5);display:grid;place-items:center;padding:16px;z-index:20;animation:fd .2s}
@keyframes fd{from{opacity:0}}
.pop{background:#fff;border:4px solid var(--o);border-radius:24px;max-width:520px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:20px;text-align:center;animation:pp .3s}
@keyframes pp{from{transform:scale(.85);opacity:0}}
.pop .bee{width:120px;height:86px;margin:0 auto;display:block;animation:fly 1.6s ease-in-out infinite}
.pop h2{margin:4px 0 10px;font-size:28px;font-weight:900}
.fact{background:#FFF3CF;border-radius:16px;padding:14px;text-align:left;margin:0 0 16px;font-size:17px;line-height:1.45}
.fact b{display:block;color:#A0602C;margin-bottom:4px}
.fact ol{margin:8px 0 0;padding-left:22px}
/* result */
.res{padding:20px;text-align:center}
.big{font-size:52px;font-weight:900;margin:4px 0}
.learn{list-style:none;padding:0;margin:12px 0 0;text-align:left;display:grid;gap:8px}
.learn li{display:flex;align-items:center;gap:12px;background:#FFF9E8;border-radius:14px;padding:8px 12px;font-size:16px}
.learn .ic{width:52px;height:52px;flex:none}
.form{padding:20px;margin-top:16px}
.form h2{margin:0 0 6px;font-size:22px}
.form p{margin:0 0 14px;font-weight:600}
.form label{display:block;font-weight:800;margin-bottom:12px}
.form input[type=email],.form input[type=text]{display:block;width:100%;margin-top:6px;font:inherit;font-size:19px;padding:14px;border:3px solid var(--o);border-radius:14px;background:#fff;color:var(--br)}
.form input[type=email]:focus,.form input[type=text]:focus{outline:3px solid var(--y);outline-offset:1px}
.form .chk{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.form .chk input{width:26px;height:26px;flex:none;margin:0;accent-color:var(--o)}
/* betöltő */
.ld{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--cr);transition:opacity .3s,visibility .3s}
.ld.off{opacity:0;visibility:hidden;pointer-events:none}   /* eltűnés közben se nyelje el a koppintást */
.ldbox{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px}
.ldart{position:relative;width:210px;height:210px}
.ldcomb{position:absolute;left:30px;top:30px;width:150px;height:150px}
.ldcomb .hb{fill:#FFF0C2;stroke:#E3B35C;stroke-width:3}
.ldcomb .hf{fill:#F5A623;opacity:0;transform-box:fill-box;transform-origin:center;animation:hf 1.8s ease-in-out infinite}
@keyframes hf{0%,6%{opacity:0;transform:scale(.4)}30%,70%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
.orb{position:absolute;inset:0;animation:orb 2.2s linear infinite}
.orb svg{position:absolute;top:-8px;left:50%;width:70px;height:50px;margin-left:-35px}
@keyframes orb{to{transform:rotate(360deg)}}
.ldt{font-size:22px;font-weight:900;margin:0;text-align:center}
.ldbar{width:230px;max-width:100%;height:14px;border-radius:999px;background:#FFE7A6;overflow:hidden;border:2px solid var(--br)}
.ldbar i{display:block;width:40%;height:100%;background:var(--o);border-radius:999px;animation:lb 1.1s ease-in-out infinite}
@keyframes lb{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.ldbar.fill{margin:16px auto 0}
.ldbar.fill i{width:100%;transform-origin:left;animation:lf 1.5s linear forwards}
@keyframes lf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
main.enter{animation:en .35s ease-out}
@keyframes en{from{opacity:0;transform:translateY(14px)}}
.big.bump{animation:pp .5s}
:focus-visible{outline:3px solid #3B8EE6;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.form .chk a{font-weight:800}
/* adatkezelési tájékoztató a játékon belül */
.pop.legal{text-align:left}
.pop.legal h2{text-align:center;font-size:22px}
.legal-body{font-size:14px;font-weight:500;line-height:1.5;margin-bottom:16px}
.legal-body ul,.legal-body ol{padding-left:20px}
.pop.legal .btn{display:flex;margin:0 auto}
/* egymás melletti gombok: kis kijelzőn sem csúsznak egymásra */
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* párosítás: a jó válasz pipája ne takarja a szöveg végét */
.mt .opt.ok{padding-right:28px}
/* a Radocsai logó a játék alján, a tájékoztató fölött (a kezdőlapra visz) */
.disc .logo{display:inline-block;line-height:0;margin-bottom:10px}
.disc .logo img{height:56px;width:auto}
/* tájékoztató a játék alján */
.disc{max-width:760px;margin:0 auto;padding:0 16px 28px;text-align:center;font-size:13px;font-weight:500;line-height:1.45}
.disc p{margin:0 0 6px;opacity:.8}