/* ===== EduGame – design ===== */
:root{
  --acc-rgb:255,140,0;--ink-rgb:255,255,255;--glow2-rgb:255,70,90;--glow3-rgb:255,190,0;--surface:#202020;--surface-rgb:27,25,23;--bg-rgb:18,18,18;--field:rgba(0,0,0,.28);--text-soft:#dcd6cd;--btn-ink:#1a1208;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --bg:#121212;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);
  --orange:#ff8c00;--orange2:#ff5e00;--amber:#ffc23d;--pink:#ff4d6d;--teal:#2dd4bf;
  --green:#2ecc71;--red:#ff4d4d;--text:#f6f2ec;--muted:#a59f96;--r:20px;
  --grad:linear-gradient(135deg,#ffb347 0%,#ff8c00 45%,#ff5e00 100%);
  --ease:cubic-bezier(.2,.9,.25,1.15);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{font-size:calc(100% * var(--fs,1))}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:1rem;line-height:var(--lh,1.45);overflow-x:hidden}

/* animált háttér */
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 38% at 18% 22%,rgba(var(--acc-rgb),.26),transparent 70%),
             radial-gradient(34% 34% at 82% 28%,rgba(var(--glow2-rgb),.15),transparent 70%),
             radial-gradient(40% 40% at 55% 95%,rgba(var(--acc-rgb),.14),transparent 70%);
  animation:drift 22s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(var(--ink-rgb),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.035) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
@keyframes drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.15)}}
.floaters{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.floaters span{position:absolute;bottom:-70px;left:var(--x);font-size:var(--s);color:rgba(var(--acc-rgb),.4);opacity:0;animation:rise var(--d) linear var(--dl) infinite;filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.45))}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.55}85%{opacity:.4}100%{transform:translateY(-118vh) rotate(380deg);opacity:0}}

a{color:var(--orange)}
h1,h2,h3{margin:0 0 .5em;line-height:1.12;letter-spacing:-.01em}

/* logó */
.brand{display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:1.45rem;color:var(--text);text-decoration:none;letter-spacing:-.5px}
.brand .mark{width:1.7em;height:1.7em;filter:drop-shadow(0 4px 14px rgba(var(--acc-rgb),.55));animation:bob 3.4s ease-in-out infinite}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand.xl{font-size:clamp(2.6rem,9vw,5rem)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}

/* gombok */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:2px solid rgba(var(--acc-rgb),.7);background:rgba(var(--acc-rgb),.04);color:var(--orange);font:inherit;font-weight:700;padding:.75em 1.4em;border-radius:14px;cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),background .2s,box-shadow .25s,border-color .2s}
.btn:hover{background:rgba(var(--acc-rgb),.14);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--acc-rgb),.2)}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--grad);border-color:transparent;color:var(--btn-ink);box-shadow:0 6px 22px rgba(var(--acc-rgb),.35)}
.btn-primary:hover{background:var(--grad);box-shadow:0 10px 32px rgba(var(--acc-rgb),.55)}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(var(--ink-rgb),.55),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{left:-70%}100%{left:130%}}
.btn-danger{border-color:rgba(255,77,77,.7);color:var(--red);background:rgba(255,77,77,.04)}
.btn-danger:hover{background:rgba(255,77,77,.14);box-shadow:0 8px 24px rgba(255,60,60,.2)}
.btn-sm{padding:.4em .9em;font-size:.9rem;border-radius:10px}
.btn-lg{font-size:1.25rem;padding:.95em 1.8em;border-radius:16px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled::after{display:none}

input,textarea,select{width:100%;background:var(--field);border:2px solid var(--line);color:var(--text);font:inherit;padding:.75em .95em;border-radius:14px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
label{display:block;color:var(--muted);font-size:.85rem;margin:0 0 .3em}
.field{margin-bottom:1em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fadeUp .55s var(--ease) both}
.card.lift{transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card.lift:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.5);box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 30px rgba(var(--acc-rgb),.12)}
.muted{color:var(--muted)}
.err{color:var(--red);min-height:1.4em;margin:.5em 0}
.ok{color:var(--green)}
.hide{display:none!important}
.center{text-align:center}
.row{display:flex;gap:.8em;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-12px) rotate(-1deg)}35%{transform:translateX(10px) rotate(1deg)}55%{transform:translateX(-7px)}75%{transform:translateX(5px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== nyitóképernyő ===== */
.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;gap:22px;text-align:center}
.landing .brand.xl .mark{animation:bob 3.4s ease-in-out infinite,glowmark 3s ease-in-out infinite}
@keyframes glowmark{0%,100%{filter:drop-shadow(0 6px 20px rgba(var(--acc-rgb),.45))}50%{filter:drop-shadow(0 6px 44px rgba(var(--acc-rgb),.95))}}
.tagline{font-size:clamp(1.1rem,3vw,1.6rem);color:var(--muted);min-height:2em}
.tagline em{font-style:normal;color:var(--orange);font-weight:700;border-right:3px solid var(--orange);padding-right:4px;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(760px,100%);margin-top:10px}
.role{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 18px 28px;border-radius:26px;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px);transition:transform .3s var(--ease),box-shadow .3s;animation:fadeUp .7s var(--ease) both;isolation:isolate;overflow:hidden}
.role:nth-child(2){animation-delay:.12s}
.role::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--orange) 85%,transparent 100%);z-index:-1;animation:rot 4s linear infinite;opacity:.9}
.role::after{content:"";position:absolute;inset:2px;border-radius:24px;background:var(--surface);z-index:-1}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rot{to{--a:360deg}}
.role:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(var(--acc-rgb),.28)}
.role .ico{font-size:3.6rem;line-height:1;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.role:nth-child(2) .ico{animation-delay:-1.5s}
.role strong{font-size:1.6rem}
.role small{color:var(--muted)}
.role.primary strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.perks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.perks span{padding:.4em .95em;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:.9rem;color:var(--muted);animation:fadeUp .8s var(--ease) both}
.perks span:nth-child(2){animation-delay:.1s}.perks span:nth-child(3){animation-delay:.2s}.perks span:nth-child(4){animation-delay:.3s}
@media(max-width:560px){.split{grid-template-columns:1fr}}

/* ===== diák kliens ===== */
.phone{min-height:100dvh;display:flex;flex-direction:column;padding:16px 18px;max-width:520px;margin:0 auto}
.phone .brand{align-self:center;font-size:1.2rem}
.phone .view{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;animation:fadeUp .5s var(--ease) both}
.pin-input{font-size:2.2rem;text-align:center;letter-spacing:.4em;font-weight:800;padding-left:.9em}
.avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.avatars button{aspect-ratio:1;font-size:1.5rem;border-radius:14px;border:2px solid var(--line);background:var(--panel);cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background .2s;padding:0}
.avatars button:hover{transform:scale(1.15) rotate(-6deg)}
.avatars button.sel{border-color:var(--orange);background:rgba(var(--acc-rgb),.2);transform:scale(1.12);box-shadow:0 0 18px rgba(var(--acc-rgb),.5)}
.avatar-big{font-size:5.5rem;line-height:1;display:inline-block;animation:float 2.2s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(var(--acc-rgb),.45))}
.orbit{position:relative;width:170px;height:170px;margin:0 auto}
.orbit::before,.orbit::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.55);animation:ripple 2.4s ease-out infinite}
.orbit::after{animation-delay:1.2s}
.orbit .avatar-big{position:absolute;inset:0;display:grid;place-items:center}
@keyframes ripple{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.5);opacity:0}}
.tip{min-height:3em;color:var(--muted);animation:fadeUp .6s both}
.dots span{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:var(--orange);animation:dot 1.2s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1.2);opacity:1}}
.pulse{width:110px;height:110px;border-radius:50%;margin:0 auto 10px;background:var(--grad);display:grid;place-items:center;font-size:3rem;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(var(--acc-rgb),.55)}50%{transform:scale(1);box-shadow:0 0 0 34px rgba(var(--acc-rgb),0)}}
.timebar{height:12px;background:var(--panel2);border-radius:8px;overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--amber),var(--orange2));transform-origin:left;border-radius:8px}
.timebar.low i{background:linear-gradient(90deg,#ff7a7a,var(--red));animation:blink .5s ease-in-out infinite alternate}
@keyframes blink{to{filter:brightness(1.5)}}
.chip-n{background:var(--panel2);padding:.2em .8em;border-radius:99px;font-weight:700}
.qtext{font-size:1.5rem;font-weight:800}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answers.col1{grid-template-columns:1fr}
.ans{--c:var(--orange);min-height:100px;border:0;border-radius:20px;background:var(--c);color:var(--btn-ink);font:inherit;font-weight:800;font-size:1.1rem;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:space-between;text-align:left;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s,filter .2s;animation:pop .45s var(--ease) both}
.ans:nth-child(2){animation-delay:.06s}.ans:nth-child(3){animation-delay:.12s}.ans:nth-child(4){animation-delay:.18s}
.ans:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.ans .l{font-size:1.4rem;opacity:.75}
.ans:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
.ans.picked{filter:none;outline:4px solid #fff;transform:scale(1.03)}
.ans[data-i="0"],.hopt[data-i="0"]{--c:#ff8c00}
.ans[data-i="1"],.hopt[data-i="1"]{--c:#ff4d6d}
.ans[data-i="2"],.hopt[data-i="2"]{--c:#ffc23d}
.ans[data-i="3"],.hopt[data-i="3"]{--c:#2dd4bf}
.slider-val{font-size:4rem;font-weight:900;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
input[type=range]{padding:0;height:44px;accent-color:var(--orange);background:transparent;border:0}
.fb{border-radius:26px;padding:30px 18px;text-align:center;animation:pop .5s var(--ease) both}
.fb.good{background:radial-gradient(circle at 50% 0,rgba(46,204,113,.3),rgba(46,204,113,.08));border:2px solid var(--green);box-shadow:0 0 50px rgba(46,204,113,.25)}
.fb.bad{background:radial-gradient(circle at 50% 0,rgba(255,77,77,.28),rgba(255,77,77,.07));border:2px solid var(--red);animation:shake .6s}
.fb .emo{font-size:4rem;display:block;animation:pop .6s var(--ease) both .1s}
.fb h2{font-size:2rem;margin:.2em 0}
.big{font-size:3.4rem;font-weight:900;line-height:1}
.rankline{font-size:1.1rem;animation:fadeUp .6s .3s both}
.up{color:var(--green);font-weight:800}.down{color:var(--red);font-weight:800}
.medal{font-size:7rem;line-height:1;animation:medal 1.2s var(--ease) both}
@keyframes medal{0%{transform:scale(0) rotate(-200deg)}70%{transform:scale(1.2) rotate(15deg)}100%{transform:scale(1) rotate(0)}}

/* visszaszámlálás */
.cd{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:rgba(10,8,6,.82);backdrop-filter:blur(8px);pointer-events:none;animation:fadein .2s both}
.cd b{font-size:min(38vw,22rem);font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 60px rgba(var(--acc-rgb),.7));animation:cdpop .95s var(--ease) both}
.cd b.go{font-size:min(26vw,15rem);animation:cdgo .55s var(--ease) both}
@keyframes cdpop{0%{transform:scale(2.4);opacity:0}25%{transform:scale(1);opacity:1}85%{transform:scale(.9);opacity:1}100%{transform:scale(.4);opacity:0}}
@keyframes cdgo{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes fadein{from{opacity:0}}

/* ===== tanári felület ===== */
.top{display:flex;align-items:center;gap:16px;padding:12px 28px;background:rgba(var(--bg-rgb),.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.wrap{max-width:1180px;margin:0 auto;padding:28px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:30px}
.stat{position:relative;overflow:hidden}
.stat::after{content:attr(data-i);position:absolute;right:-6px;bottom:-14px;font-size:4.5rem;opacity:.1;transform:rotate(-10deg)}
.stat b{display:block;font-size:2.6rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .card:nth-child(2){animation-delay:.07s}.stats .card:nth-child(3){animation-delay:.14s}.stats .card:nth-child(4){animation-delay:.21s}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.grid2 .card:nth-child(2){animation-delay:.06s}.grid2 .card:nth-child(3){animation-delay:.12s}.grid2 .card:nth-child(4){animation-delay:.18s}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.65em .7em;border-bottom:1px solid var(--line)}
tr:hover td{background:rgba(var(--acc-rgb),.04)}
th{color:var(--muted);font-weight:600;font-size:.85rem}
.bar{height:9px;border-radius:5px;background:var(--panel2);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--grad);border-radius:5px;animation:grow 1s var(--ease) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}}
.tag{display:inline-block;padding:.12em .65em;border-radius:99px;font-size:.78rem;background:var(--panel2);color:var(--muted)}
.tag.on{background:rgba(var(--acc-rgb),.18);color:var(--orange)}
.qcard{margin-bottom:16px}
.opt{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.opt input[type=radio]{width:22px;height:22px;accent-color:var(--orange);flex:none}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:min(430px,100%);padding:2em}
.tabs{display:flex;gap:8px;margin-bottom:1.2em}
.tabs .btn{flex:1}

/* ===== kivetítő (host) ===== */
.host{min-height:100vh;display:flex;flex-direction:column;padding:24px 40px}
.host-head{display:flex;align-items:center;gap:20px}
.pin-huge{display:flex;gap:.08em;font-size:clamp(4rem,11vw,9rem);font-weight:900;line-height:1}
.pin-huge span{display:inline-grid;place-items:center;width:.75em;height:1.15em;border-radius:.14em;background:var(--panel);border:1px solid var(--line);color:var(--orange);text-shadow:0 0 40px rgba(var(--acc-rgb),.6);animation:flip .8s var(--ease) both}
@keyframes flip{0%{transform:perspective(400px) rotateX(-90deg);opacity:0}100%{transform:perspective(400px) rotateX(0);opacity:1}}
.lobby-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;margin:16px 0}
@media(max-width:900px){.lobby-grid{grid-template-columns:1fr}.host{padding:16px}}
.qrwrap{position:relative;padding:5px;border-radius:26px;width:fit-content;overflow:hidden;animation:pop .7s var(--ease) both}
.qrwrap::before{content:"";position:absolute;inset:-50%;background:conic-gradient(var(--orange),#ffc23d,var(--pink),var(--orange));animation:spin 4s linear infinite}
#qr{position:relative;background:#fff;padding:14px;border-radius:22px;line-height:0}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:.4em;background:var(--panel);border:1px solid var(--line);padding:.45em 1em .45em .6em;border-radius:99px;font-weight:700;font-size:1.1rem;animation:pop .5s var(--ease) both,float 3.2s ease-in-out infinite;animation-delay:0s,var(--fd,0s)}
.chip .av{font-size:1.5rem}
.chip.off{opacity:.4}
.chip button{background:none;border:0;color:var(--muted);cursor:pointer;margin-left:.2em;font-size:1rem}
.chip button:hover{color:var(--red)}
.hq{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:900;margin:.4em 0;animation:fadeUp .6s var(--ease) both}
.hopts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hopt{--c:var(--orange);--pct:0%;position:relative;overflow:hidden;background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:20px;font-size:1.6rem;font-weight:800;display:flex;gap:14px;align-items:center;z-index:0;animation:pop .5s var(--ease) both}
.hopt:nth-child(2){animation-delay:.07s}.hopt:nth-child(3){animation-delay:.14s}.hopt:nth-child(4){animation-delay:.21s}
.hopt::before{content:"";position:absolute;inset:0;width:var(--pct);background:var(--c);opacity:.32;z-index:-1;transition:width 1.1s var(--ease)}
.hopt .l{flex:none;width:46px;height:46px;border-radius:12px;background:var(--c);color:var(--btn-ink);display:grid;place-items:center}
.hopt.right{border-color:var(--green);box-shadow:0 0 36px rgba(46,204,113,.35);animation:pop .5s var(--ease) both,glowg 1.4s ease-in-out infinite alternate}
@keyframes glowg{to{box-shadow:0 0 60px rgba(46,204,113,.6)}}
.hopt.wrong{opacity:.45}
.hopt .cnt{margin-left:auto;font-size:2rem;color:var(--text)}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:var(--panel2)}
.ring .fg{stroke:var(--orange);stroke-dasharray:264;transition:stroke .3s}
.ring.low .fg{stroke:var(--red)}
.ring.low{animation:pulsering .5s ease-in-out infinite alternate}
@keyframes pulsering{to{transform:scale(1.1)}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;font-weight:900}
.lb{width:100%;max-width:780px}
.lb .r{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.6em 1em;margin-bottom:8px;font-size:1.3rem;animation:slidein .55s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes slidein{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
.lb .r .n{width:2em;color:var(--orange);font-weight:900}
.lb .r .av{font-size:1.6rem}
.lb .r .s{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums}
.lb .r .d{color:var(--green);font-size:.95rem;font-weight:700}
.lb .r.top1{background:linear-gradient(90deg,rgba(var(--acc-rgb),.28),var(--panel));border-color:rgba(var(--acc-rgb),.6)}
.lb .r.help{border-color:var(--red)}
.help-tag{color:var(--red);font-size:.78rem;font-weight:800;animation:blink .7s ease-in-out infinite alternate}
.podium{display:flex;gap:16px;align-items:flex-end;justify-content:center;margin:20px 0;min-height:340px}
.podium>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;background:var(--panel);border:2px solid var(--orange);border-radius:18px 18px 0 0;padding:14px 22px;text-align:center;min-width:170px;transform-origin:bottom;animation:rise2 1s var(--ease) both;font-weight:800;font-size:1.3rem}
.podium .av{font-size:3rem;animation:float 2s ease-in-out infinite}
.podium .p1{height:290px;background:linear-gradient(180deg,rgba(var(--acc-rgb),.35),var(--panel));animation-delay:1.6s;box-shadow:0 0 60px rgba(var(--acc-rgb),.35)}
.podium .p2{height:220px;animation-delay:.9s}
.podium .p3{height:170px;animation-delay:.2s}
@keyframes rise2{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.podium b{display:block;font-size:2.6rem}
.crown{font-size:2.4rem;animation:bob 2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* nagyított QR (kivetítő) */
.zoomable{cursor:zoom-in;transition:transform .3s var(--ease),box-shadow .3s}
.zoomable:hover{transform:scale(1.04);box-shadow:0 0 50px rgba(var(--acc-rgb),.45)}
.zoom{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:rgba(8,6,4,.94);backdrop-filter:blur(10px);cursor:zoom-out;animation:fadein .25s both}
.zoom-in{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;animation:pop .45s var(--ease) both}
#zqr{background:#fff;padding:22px;border-radius:30px;line-height:0;box-shadow:0 0 90px rgba(var(--acc-rgb),.45)}
#zlink{font-size:clamp(1.6rem,4vw,3rem);font-weight:900;color:var(--orange);text-decoration:none}
.zpin{font-size:clamp(3rem,9vw,7rem);font-weight:900;letter-spacing:.12em;color:#fff;line-height:1}
@media(min-width:1100px) and (min-aspect-ratio:3/2){.zoom-in{flex-direction:row;gap:60px;text-align:left}}
/* ===== üzenetközpont ===== */
.top{top:var(--banner-h,0px)}
#gm-top{position:fixed;top:0;left:0;right:0;z-index:850;display:flex;flex-direction:column}
#gm-toasts{position:fixed;right:16px;bottom:16px;z-index:860;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
#gm-toasts .gm{pointer-events:auto}
.gm{--c:#4da3ff;position:relative;display:flex;gap:12px;align-items:flex-start;color:#f6f2ec;background:var(--surface);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.4)}
.gm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);border-radius:inherit}
.gm-info{--c:#4da3ff}.gm-success{--c:#2ecc71}.gm-warning{--c:#ffb020}.gm-danger{--c:#ff4d4d}.gm-event{--c:#ff8c00}
.gm-ico{font-size:1.5rem;line-height:1.2;flex:none;animation:float 3s ease-in-out infinite}
.gm-txt{flex:1;min-width:0}
.gm-txt b{display:block;font-size:1.05rem;margin-bottom:.15em}
.gm-body{white-space:pre-line;color:var(--text-soft);word-break:break-word}
.gm-body a{color:var(--c)}
.gm-x{flex:none;background:none;border:0;color:#a59f96;font-size:1rem;cursor:pointer;padding:2px 6px;border-radius:8px}
.gm-x:hover{background:rgba(var(--ink-rgb),.1);color:var(--text)}
.gm-banner{padding:.7em 1em .7em 1.3em;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,var(--surface)),var(--surface) 70%);border-width:0 0 1px;animation:gmdown .5s var(--ease) both}
.gm-banner::before{width:0}
.gm-toast{padding:.9em 1em .9em 1.3em;border-radius:16px;animation:gmin .5s var(--ease) both}
.gm-popup{flex-wrap:wrap;width:min(460px,calc(100vw - 32px));padding:1.6em 1.4em 1.4em 1.8em;border-radius:22px;animation:pop .5s var(--ease) both}
.gm-popup .gm-ico{font-size:2.6rem}
.gm-popup .gm-txt b{font-size:1.4rem}
.gm-popup .gm-ok{width:100%;margin-top:.6em}
.gm-backdrop{position:fixed;inset:0;z-index:870;display:grid;place-items:center;background:rgba(8,6,4,.72);backdrop-filter:blur(6px);animation:fadein .25s both}
.gm-danger.gm-banner,.gm-danger.gm-toast{animation:gmdown .5s var(--ease) both,gmpulse 2.4s ease-in-out .6s infinite}
.gm-event.gm-banner{background:linear-gradient(90deg,rgba(var(--acc-rgb),.3),rgba(255,77,109,.18),var(--surface) 80%);background-size:200% 100%;animation:gmdown .5s var(--ease) both,gmshimmer 6s linear infinite}
.gm-out{animation:gmout .35s ease-in forwards!important}
.gm-prev{position:static!important;width:auto!important;max-width:100%;animation:none!important}
@keyframes gmdown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes gmin{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes gmout{to{transform:translateY(-12px) scale(.96);opacity:0}}
@keyframes gmpulse{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 0 rgba(255,77,77,.0)}50%{box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 28px 2px rgba(255,77,77,.45)}}
@keyframes gmshimmer{to{background-position:-200% 0}}
/* ===== Újdonságok és ötletek ablak ===== */
.cm-backdrop{position:fixed;inset:0;z-index:880;display:grid;place-items:center;background:rgba(8,6,4,.78);backdrop-filter:blur(6px);padding:14px;animation:fadein .25s both}
.cm-box{width:min(640px,100%);max-height:min(88vh,820px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:pop .4s var(--ease) both;overflow:hidden}
.cm-head{display:flex;justify-content:space-between;gap:10px;padding:18px 20px 8px}
.cm-title{font-size:1.25rem}
.cm-tabs{display:flex;gap:8px;padding:6px 20px 12px;border-bottom:1px solid var(--line)}
.cm-tabs button{flex:1;padding:.55em;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-weight:700;cursor:pointer;transition:.18s}
.cm-tabs button.sel{border-color:var(--orange);background:rgba(var(--acc-rgb),.15)}
.cm-body{padding:16px 20px 22px;overflow:auto}
.cm-sec{margin:20px 0 8px;color:var(--muted);font-size:.9rem;font-weight:700}
.cm-entry{padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);animation:fadeUp .4s var(--ease) both}
.cm-entry b{display:block;margin:.35em 0 .1em}
.cm-text{white-space:pre-line;color:var(--text-soft);word-break:break-word}
.cm-tag{display:inline-block;padding:.12em .6em;border-radius:99px;font-size:.76rem;font-weight:700;background:var(--panel2);color:var(--muted)}
.cm-new{background:rgba(var(--acc-rgb),.2);color:var(--orange)}.cm-imp{background:rgba(57,135,229,.2);color:#6da7ec}.cm-fix{background:rgba(46,204,113,.18);color:var(--green)}.cm-plan{background:var(--panel2);color:var(--text-soft)}
.cm-form{display:flex;flex-direction:column;gap:10px;position:relative}
.cm-form textarea,.cm-form input,.cm-form select{font-size:.95rem;padding:.6em .8em}
.cm-msg{font-size:.9rem}.cm-msg.ok{color:var(--green)}.cm-msg.err{color:var(--red)}
.cm-idea{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);animation:fadeUp .4s var(--ease) both}
.cm-vote{flex:none;display:flex;flex-direction:column;align-items:center;gap:0;width:50px;padding:.35em 0;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--muted);font:inherit;cursor:pointer;transition:.18s var(--ease)}
.cm-vote:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.cm-vote.on{border-color:var(--orange);background:rgba(var(--acc-rgb),.2);color:var(--orange)}
.cm-vote b{font-size:1.1rem;color:var(--text)}
.cm-dot{display:inline-block;width:9px;height:9px;margin-left:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,77,77,.7);animation:dotp 1.6s infinite;vertical-align:middle}
@keyframes dotp{70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.beta{width:min(760px,100%);padding:16px 18px;border-radius:20px;background:linear-gradient(135deg,rgba(var(--acc-rgb),.14),rgba(var(--ink-rgb),.04));border:1px solid rgba(var(--acc-rgb),.4);backdrop-filter:blur(10px);text-align:left;animation:fadeUp .7s var(--ease) both}
.beta h3{margin:0 0 .2em;font-size:1.05rem}
.beta ul{margin:.5em 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:.92rem}
.beta li b{color:var(--text)}
/* tömörebb tanári fejléc */
.top{flex-wrap:wrap;gap:8px 10px;padding:10px 20px}
.top .btn-sm{white-space:nowrap;padding:.35em .7em}
.cm-form .row select{flex:1;min-width:140px;width:auto}

/* ===== tanári fejléc: mobilon lenyíló menü ===== */
.tnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.tnav form{margin:0}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:2px solid rgba(var(--acc-rgb),.7);background:rgba(var(--acc-rgb),.06);color:var(--orange);font:inherit;font-size:1.3rem;cursor:pointer}
.pc-hint{display:flex;gap:10px;align-items:flex-start;margin:10px 14px 0;padding:.7em .9em;border-radius:14px;background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.4);font-size:.88rem;color:var(--text-soft)}
.pc-hint.hide{display:none}
.pc-hint button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;margin-left:auto}
@media(max-width:820px){
  .top{padding:10px 14px;flex-wrap:nowrap;gap:10px}
  .top .brand{font-size:1.15rem}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .tnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;padding:12px 14px 16px;background:rgba(var(--surface-rgb),.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:calc(100vh - 70px);overflow:auto}
  .tnav.open{display:flex;animation:fadeUp .25s var(--ease) both}
  .tnav .btn,.tnav form .btn{width:100%;justify-content:flex-start;padding:.7em 1em;font-size:1rem}
  .tnav .who{order:90;padding:.3em .2em;font-size:.9rem}
  .tnav a[href="logout.php"]{order:99}
  .wrap{padding:16px 14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  table{font-size:.88rem}
}
/* kép a kérdésben + magyarázat */
.qimg{display:block;max-width:100%;max-height:34vh;margin:6px auto 4px;border-radius:18px;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.45);animation:pop .5s var(--ease) both}
.phone .qimg{max-height:26vh;margin:0 auto}
.expl{margin:6px 0 10px;padding:.8em 1em;border-radius:14px;background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.4);color:var(--text-soft);font-size:1.15rem;animation:fadeUp .5s var(--ease) both}
.phone .expl{font-size:.95rem;text-align:left}
.wsbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:12px 0;padding:.8em 1.1em;border-radius:16px;background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.5);animation:fadeUp .4s var(--ease) both}
.wsbar.hide{display:none}

/* ===== új kérdéstípusok a kivetítőn / telefonon ===== */
.hopt[data-i="4"]{--c:#d55181}.hopt[data-i="5"]{--c:#9085e9}
.hopts.one{grid-template-columns:1fr}.hopts.two{grid-template-columns:1fr 1fr;align-items:start}.hopts.sorts{grid-template-columns:1fr}
.hcol{display:flex;flex-direction:column;gap:12px}
.hitem{--c:var(--orange);display:flex;gap:12px;align-items:center;padding:.8em 1em;border:2px solid var(--line);border-radius:16px;background:var(--panel);font-size:1.5rem;font-weight:700;animation:pop .45s var(--ease) both}
.hitem .l{flex:none;width:40px;height:40px;border-radius:11px;background:var(--c);color:var(--btn-ink);display:grid;place-items:center;font-size:1.1rem}
.hitem[data-i="1"]{--c:#ff4d6d}.hitem[data-i="2"]{--c:#ffc23d}.hitem[data-i="3"]{--c:#2dd4bf}
.hitem.alt .l{background:var(--panel2);color:var(--text)}
.hitem.right{border-color:var(--green);background:rgba(46,204,113,.12)}.hitem.right .l{background:var(--green)}
.hcats{display:flex;gap:12px;flex-wrap:wrap}
.hcat{--c:var(--orange);flex:1;min-width:140px;text-align:center;padding:.7em;border-radius:14px;font-weight:800;font-size:1.4rem;background:var(--c);color:var(--btn-ink);animation:pop .45s var(--ease) both}
.hcat[data-i="1"]{--c:#ff4d6d}.hcat[data-i="2"]{--c:#ffc23d}.hcat[data-i="3"]{--c:#2dd4bf}
.hchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hchip{padding:.5em 1em;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:1.3rem;font-weight:700;animation:pop .45s var(--ease) both}
/* telefon */
.ans.multi .l{border-radius:8px}
.ans.on{outline:4px solid #fff;filter:none;transform:scale(1.02)}
.ans.on .l{background:var(--btn-ink);color:#fff}
.rowitem{display:flex;gap:10px;align-items:center;padding:.6em .8em;border-radius:14px;background:var(--panel);border:2px solid var(--line);font-weight:700;margin-bottom:8px;animation:pop .4s var(--ease) both}
.rowitem .mv{flex:none;display:flex;flex-direction:column;gap:4px}
.rowitem .mv button{width:38px;height:30px;border-radius:9px;border:2px solid var(--orange);background:transparent;color:var(--orange);cursor:pointer;font:inherit;line-height:1}
.rowitem .mv button:disabled{opacity:.25}
.rowitem .num{flex:none;width:30px;height:30px;border-radius:9px;background:var(--orange);color:var(--btn-ink);display:grid;place-items:center}
.rowitem select{flex:1;min-width:0;padding:.55em .6em}
.catbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.catbtns button{flex:1;min-width:70px;padding:.5em .4em;border-radius:10px;border:2px solid var(--line);background:transparent;color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.catbtns button.on{border-color:transparent;color:var(--btn-ink)}

/* =====================================================================
   TÉMÁK – az admin választja a Megjelenés oldalon. Minden téma MINDEN változót megad,
   így egymás előnézetei is hibátlanok. A [data-theme] a <html>-en vagy egy előnézeti dobozon lehet.
   ===================================================================== */
[data-theme="default"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);--field:rgba(0,0,0,.28);--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--surface:#202020;--btn-ink:#1a1208;--orange:#ff8c00;--surface-rgb:27,25,23;--glow2-rgb:255,70,90;--bg-rgb:18,18,18;--bg:#121212;--muted:#a59f96;--grad:linear-gradient(135deg,#ffb347 0%,#ff8c00 45%,#ff5e00 100%);--acc-rgb:255,140,0;--text:#f6f2ec;--amber:#ffc23d;--orange2:#ff5e00;--text-soft:#dcd6cd}
[data-theme="ocean"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);--field:rgba(0,0,0,.28);--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--surface:#12212f;--btn-ink:#04131f;--orange:#29b6f6;--surface-rgb:18,33,47;--glow2-rgb:0,150,180;--bg-rgb:11,22,34;--bg:#0b1622;--muted:#8fb0c7;--grad:linear-gradient(135deg,#81d4fa 0%,#29b6f6 45%,#0277bd 100%);--acc-rgb:41,182,246;--text:#eaf6ff;--amber:#80deea;--orange2:#0277bd;--text-soft:#cfe3f1}
[data-theme="forest"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);--field:rgba(0,0,0,.28);--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--surface:#15231b;--btn-ink:#04150b;--orange:#3ddc84;--surface-rgb:21,35,27;--glow2-rgb:20,160,100;--bg-rgb:14,23,18;--bg:#0e1712;--muted:#93b5a0;--grad:linear-gradient(135deg,#b8f5c9 0%,#3ddc84 45%,#1b9e5a 100%);--acc-rgb:61,220,132;--text:#eefaf2;--amber:#c6f36b;--orange2:#1b9e5a;--text-soft:#cfe6d6}
[data-theme="candy"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);--field:rgba(0,0,0,.28);--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--surface:#251633;--btn-ink:#1f0a1c;--orange:#ff5fa2;--surface-rgb:37,22,51;--glow2-rgb:168,85,247;--bg-rgb:26,16,34;--bg:#1a1022;--muted:#c3a3bd;--grad:linear-gradient(135deg,#ff9ac8 0%,#ff5fa2 45%,#a855f7 100%);--acc-rgb:255,95,162;--text:#fff0f8;--amber:#ffd36e;--orange2:#a855f7;--text-soft:#ecd3e6}
[data-theme="sunny"]{color-scheme:light;--ink-rgb:60,40,10;--panel:rgba(255,255,255,.78);--panel2:rgba(60,40,10,.07);--line:rgba(60,40,10,.15);--field:#fffdf8;--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--text:#2a2118;--surface-rgb:255,255,255;--grad:linear-gradient(135deg,#ffb74d 0%,#f57c00 50%,#e65100 100%);--amber:#ffb300;--surface:#ffffff;--text-soft:#4a3d2e;--muted:#7a6a58;--glow2-rgb:255,160,120;--btn-ink:#2a1500;--orange:#f57c00;--bg-rgb:255,247,232;--acc-rgb:245,124,0;--orange2:#e65100;--bg:#fff7e8}
[data-theme="contrast"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(255,255,255,.1);--panel2:rgba(255,255,255,.18);--line:rgba(255,255,255,.6);--field:#000000;--r:20px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--text:#ffffff;--btn-ink:#000000;--surface-rgb:10,10,10;--surface:#0a0a0a;--grad:linear-gradient(135deg,#fff176 0%,#ffd400 55%,#ffb300 100%);--amber:#ffe45c;--text-soft:#ffffff;--muted:#d6d6d6;--glow2-rgb:255,212,0;--orange:#ffd400;--bg-rgb:0,0,0;--acc-rgb:255,212,0;--orange2:#ffb300;--bg:#000000}
[data-theme="retro"]{color-scheme:dark;--ink-rgb:255,255,255;--panel:rgba(var(--ink-rgb),.05);--panel2:rgba(var(--ink-rgb),.09);--line:rgba(var(--ink-rgb),.11);--field:rgba(0,0,0,.28);--r:8px;--font:"Courier New",ui-monospace,Menlo,monospace;--surface:#0a140a;--btn-ink:#021402;--orange:#39ff14;--surface-rgb:10,20,10;--glow2-rgb:255,0,180;--bg-rgb:5,10,5;--grad:linear-gradient(135deg,#b6ff9f 0%,#39ff14 50%,#00c853 100%);--bg:#050a05;--muted:#6fbf6f;--acc-rgb:57,255,20;--text:#c8ffc8;--amber:#f4ff61;--orange2:#00c853;--text-soft:#a6e8a6}
[data-theme="retro"] body::after{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);background-size:auto;opacity:.7;mask-image:none;-webkit-mask-image:none}
[data-theme="retro"] h1,[data-theme="retro"] h2,[data-theme="retro"] h3,[data-theme="retro"] .big,[data-theme="retro"] .pin-huge span,[data-theme="retro"] .brand b{text-shadow:0 0 12px rgba(var(--acc-rgb),.65)}
[data-theme="contrast"] .card,[data-theme="contrast"] .hopt,[data-theme="contrast"] .btn{border-width:2px}
[data-theme="sunny"] body::before{opacity:.55}
/* előnézeti doboz az admin Megjelenés oldalán */
.tp{background:var(--bg);color:var(--text);font-family:var(--font);border:2px solid var(--line);border-radius:16px;padding:12px;min-height:120px;position:relative;overflow:hidden}
.tp .tp-glow{position:absolute;inset:-30%;background:radial-gradient(40% 40% at 25% 20%,rgba(var(--acc-rgb),.3),transparent 70%),radial-gradient(35% 35% at 80% 30%,rgba(var(--glow2-rgb),.2),transparent 70%)}
.tp>*{position:relative}
.tp .tp-btn{display:inline-block;padding:.3em .9em;border-radius:10px;background:var(--grad);color:var(--btn-ink);font-weight:800;font-size:.8rem}
.tp .tp-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.4em .6em;margin:8px 0;font-size:.78rem}
.tp .tp-title{font-weight:800}.tp .tp-title b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* megjegyzés-buborék a logó mellett */
.brand-note{--note:var(--orange);position:relative;display:inline-block;margin-left:.55rem;padding:.2em .75em;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.02em;line-height:1.2;color:var(--btn-ink);background:var(--note);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:notepop .6s var(--ease) both,notefloat 3.2s ease-in-out .6s infinite}
.brand-note::before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:0;border-right-color:var(--note)}
.brand-note.t-blue{--note:#4da3ff}.brand-note.t-green{--note:#2ecc71}.brand-note.t-red{--note:#ff5470}.brand-note.t-violet{--note:#9085e9}
.brand.xl .brand-note{font-size:.95rem;margin-left:.8rem}
@keyframes notepop{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes notefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:480px){.brand-note{font-size:.66rem;padding:.15em .55em}}
/* ===== sarokgombok: info (i) + világos/sötét váltó ===== */
.corner{position:fixed;top:14px;right:14px;z-index:60;display:flex;gap:8px;align-items:center}
.round{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.7);background:var(--panel);color:var(--orange);font:inherit;font-weight:800;font-size:1.2rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.round:hover{transform:scale(1.1) rotate(-6deg);background:rgba(var(--acc-rgb),.16);box-shadow:0 0 22px rgba(var(--acc-rgb),.4)}
.round.sm{width:34px;height:34px;font-size:1rem;border-width:2px}
.info-btn{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.5rem;position:relative}
.info-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.6);animation:ripple 2.6s ease-out infinite;pointer-events:none}
.top .round{flex:none}
/* tájékoztató (Rólunk) tartalom */
.cm-sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cm-sub button{padding:.35em .9em;border-radius:99px;border:2px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:.18s}
.cm-sub button:hover{border-color:rgba(var(--acc-rgb),.6);color:var(--text)}
.cm-sub button.sel{border-color:var(--orange);background:rgba(var(--acc-rgb),.16);color:var(--orange)}
.cm-prose{line-height:1.6;color:var(--text-soft);animation:fadeUp .35s var(--ease) both}
.cm-prose h4{margin:1.1em 0 .35em;color:var(--text);font-size:1.05rem}
.cm-prose h4:first-child{margin-top:0}
.cm-prose p{margin:.5em 0}
.cm-prose ul,.cm-prose ol{margin:.4em 0 .6em;padding-left:1.3em}
.cm-prose li{margin:.25em 0}
.cm-prose a{color:var(--orange)}
.cm-prose strong{color:var(--text)}
/* ===== saját megjelenés (⚙) – csak az adott eszközön érvényes ===== */
html[data-lh="wide"]{--lh:1.75}
html[data-font="read"]{--font:Verdana,Tahoma,"Segoe UI",sans-serif}
html[data-font="read"] body{letter-spacing:.02em;word-spacing:.08em}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-deco="off"] .floaters{display:none!important}
html[data-deco="off"] body::before,html[data-deco="off"] body::after{display:none!important}
html[data-hc="on"]{--muted:var(--text-soft);--line:rgba(var(--ink-rgb),.4)}
.prefs-pop{position:fixed;z-index:910;width:min(350px,calc(100vw - 16px));max-height:calc(100vh - 80px);overflow:auto;padding:16px 16px 14px;border-radius:20px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.55);animation:pop .3s var(--ease) both;font-size:calc(16px * min(var(--fs,1),1.25));line-height:1.4}
.prefs-pop h3{margin:0 0 2px;font-size:1.05rem}
.prefs-pop .pnote{margin:0 0 12px;font-size:.8rem;color:var(--muted)}
.prefs-pop .prow{margin:12px 0 4px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchips button{flex:1 1 auto;padding:.4em .7em;border-radius:10px;border:2px solid var(--line);background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:.15s}
.pchips button:hover:not(:disabled){border-color:rgba(var(--acc-rgb),.7)}
.pchips button.sel{border-color:var(--orange);background:rgba(var(--acc-rgb),.16);color:var(--orange);font-weight:700}
.pchips button:disabled{opacity:.45;cursor:not-allowed}
.psw{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.45em 0;cursor:pointer}
.psw input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:99px;background:var(--panel2);border:2px solid var(--line);position:relative;cursor:pointer;flex:none;transition:.2s}
.psw input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.2s}
.psw input:checked{background:rgba(var(--acc-rgb),.35);border-color:var(--orange)}
.psw input:checked::after{left:20px;background:var(--orange)}
.plock{margin-top:6px;padding:.5em .7em;border-radius:12px;background:rgba(var(--acc-rgb),.08);border:1px dashed var(--line);font-size:.8rem;color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
/* ===== party játékmódok (kivetítő + telefon) ===== */
.bigterm{font-size:clamp(1.4rem,3vw,2.4rem);color:var(--muted);margin:.4em 0}
.pattern{font-family:ui-monospace,Consolas,monospace;font-size:clamp(1.8rem,5vw,3.4rem);font-weight:900;letter-spacing:.12em;text-align:center;color:var(--orange);margin:.2em 0 .4em;white-space:pre-wrap}
.canvas-wrap{display:flex;justify-content:center}
.dimg{background:#fff;border-radius:20px;max-width:100%;width:min(520px,60vh);aspect-ratio:1;object-fit:contain;box-shadow:0 12px 50px rgba(0,0,0,.5);animation:pop .4s var(--ease) both}
.scr{font-size:clamp(1.6rem,4.8vw,4.2rem);font-weight:900;letter-spacing:.08em;text-align:center;color:var(--orange);margin:.4em 0;line-height:1.25;white-space:pre-wrap;word-break:break-word;animation:pop .5s var(--ease) both;text-shadow:0 0 40px rgba(var(--acc-rgb),.5)}
/* telefon */
.pterm{font-size:2rem;font-weight:900;text-align:center;line-height:1.15;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.2em 0}
.pbtn{width:100%;margin-top:10px}
.popt{width:100%;text-align:left;padding:.9em 1em;margin-bottom:10px;border-radius:16px;border:2px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-weight:700;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:.15s;animation:pop .4s var(--ease) both}
.popt .l{flex:none;width:30px;height:30px;border-radius:9px;background:var(--orange);color:var(--btn-ink);display:grid;place-items:center}
.popt:active{transform:scale(.98)}.popt.own{opacity:.45}.popt.own .l{background:var(--panel2);color:var(--text)}
.popt:disabled{cursor:default}
.draw-canvas{width:100%;aspect-ratio:1;background:#fff;border-radius:18px;touch-action:none;box-shadow:0 8px 30px rgba(0,0,0,.4);display:block}
.draw-tools{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;align-items:center}
.draw-tools .sw{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0}
.draw-tools .sw.on{border-color:var(--text);transform:scale(1.12)}
.draw-tools .tbtn{padding:.35em .7em;border-radius:10px;border:2px solid var(--line);background:transparent;color:var(--text);font:inherit;cursor:pointer}
.draw-tools .tbtn.on{border-color:var(--orange);color:var(--orange)}
.hint-box{margin:8px 0;padding:.6em .8em;border-radius:12px;background:rgba(77,163,255,.12);border:1px solid rgba(77,163,255,.4);color:var(--text-soft);font-size:.92rem;animation:fadeUp .4s var(--ease) both}
.scr-phone{font-size:2.1rem;font-weight:900;letter-spacing:.06em;text-align:center;color:var(--orange);line-height:1.3;white-space:pre-wrap;word-break:break-word;margin:.3em 0}
.shake{animation:shake .5s}
@media(max-width:480px){.corner{top:8px;right:8px;gap:6px}.corner .round{width:36px;height:36px;font-size:1rem}.corner .info-btn{font-size:1.25rem}.phone .brand{align-self:flex-start;margin-left:4px}}

.maint-bar{background:rgba(255,176,32,.16);border-bottom:1px solid rgba(255,176,32,.55);padding:.45em 14px;text-align:center;font-size:.9rem;color:var(--text)}
.maint-bar a{color:var(--orange);font-weight:700}

/* ===== tanári fejléc: legördülő "Több" menü, hogy sose csússzon el ===== */
.dd{position:relative}
.dd>summary{list-style:none;cursor:pointer}
.dd>summary::-webkit-details-marker{display:none}
.dd[open]>summary{background:rgba(var(--acc-rgb),.18)}
.dd-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.5);z-index:40;display:flex;flex-direction:column;gap:2px;animation:pop .2s var(--ease) both}
.dd-menu a,.dd-menu button{display:block;width:100%;text-align:left;padding:.55em .8em;border-radius:10px;background:none;border:0;color:var(--text);font:inherit;text-decoration:none;cursor:pointer}
.dd-menu a:hover,.dd-menu button:hover{background:rgba(var(--acc-rgb),.14);color:var(--orange)}
.dd-menu form{margin:0}
.nav-sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.tnav .who{white-space:nowrap}
@media(max-width:820px){
  .tnav .dd{width:100%}
  .dd>summary{width:100%;justify-content:flex-start;padding:.7em 1em;font-size:1rem}
  .dd-menu{position:static;min-width:0;box-shadow:none;border:0;background:none;padding:4px 0 0 10px;animation:none}
  .nav-sep{display:none}
}