:root{--pc:#ff3ea5;--pcd:rgba(255,62,165,.22);--bg:#0b0620}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:#fff;font-family:Rubik,system-ui,sans-serif;overscroll-behavior:none;overflow:hidden}
body{-webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font-family:inherit;cursor:pointer;color:#fff}
.pg{position:fixed;left:0;top:0;right:0;bottom:0;display:none}
.pg.on{display:flex;flex-direction:column}
.disp{font-family:"Russo One",Rubik,sans-serif}

/* Csatlakozás */
#join{overflow-y:auto;align-items:center;padding:26px 20px 30px;background:radial-gradient(circle at 50% -10%,#4a1270,#0b0620 62%)}
.logo{font-family:"Russo One",Rubik,sans-serif;font-size:46px;line-height:1;white-space:nowrap;margin-top:6px}
.logo .l1{text-shadow:0 0 8px #ff3ea5,0 0 22px #ff3ea5}
.logo .l2{color:#c9f9ff;margin-left:4px;text-shadow:0 0 8px #22e6ff,0 0 22px #22e6ff}
.sub{color:#cdbcff;font-weight:600;margin-top:6px;letter-spacing:.5px}
label{display:block;width:100%;max-width:420px;margin-top:16px;font-weight:700;color:#cdbcff;font-size:13px;letter-spacing:1px;text-transform:uppercase}
input{display:block;width:100%;margin-top:6px;font-size:22px;padding:13px 16px;border-radius:14px;border:2px solid #3a2f6e;background:#150d33;color:#fff;outline:none;font-family:inherit;font-weight:700;-webkit-user-select:text;user-select:text}
input:focus{border-color:#22e6ff;box-shadow:0 0 0 3px rgba(34,230,255,.2)}
#code{font-family:"Russo One",Rubik,sans-serif;letter-spacing:14px;text-align:center;font-size:36px;padding:10px}
.avs{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:8px;width:100%;max-width:420px;margin-top:8px}
.avs button{font-size:30px;padding:7px 0;border-radius:14px;background:#150d33;border:2px solid transparent;transition:transform .1s}
.avs button.on{border-color:#22e6ff;background:#2a1d66;transform:scale(1.08)}
.big{display:block;width:100%;max-width:420px;margin:20px auto 0;padding:17px;font-size:22px;font-family:"Russo One",Rubik,sans-serif;letter-spacing:1px;border:0;border-radius:18px;background:linear-gradient(135deg,#ff3ea5,#7b2ff7);box-shadow:0 8px 24px rgba(255,62,165,.35)}
.big:active{transform:scale(.97)}
.big[disabled]{opacity:.4}
.ghost{display:block;margin:14px auto 0;padding:12px 22px;font-size:17px;font-weight:700;border-radius:14px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.err{color:#ff7a8f;font-weight:700;margin-top:12px;text-align:center;max-width:420px;min-height:1em}
.help{color:#9a8cc9;font-size:14px;text-align:center;max-width:420px;margin-top:10px;line-height:1.4}
#conn,.ov{align-items:center;justify-content:center;text-align:center;padding:30px}
#conn p,.ov p{margin-top:22px;font-size:20px;font-weight:700;line-height:1.4}
.spin{width:64px;height:64px;border-radius:50%;border:6px solid rgba(255,255,255,.15);border-top-color:#22e6ff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ov{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(8,4,24,.92);z-index:50;display:none;flex-direction:column}
.ov.on{display:flex}

/* Vezérlő fejléc */
#ctl{background:radial-gradient(circle at 50% -30%,var(--pcd),rgba(0,0,0,0) 70%),var(--bg)}
#bar{flex:0 0 auto;display:flex;align-items:center;height:46px;padding:0 8px 0 10px;background:rgba(0,0,0,.4);border-bottom:2px solid var(--pc);padding-top:env(safe-area-inset-top)}
.me{display:flex;align-items:center;font-weight:800;font-size:17px;min-width:0;white-space:nowrap;overflow:hidden}
.me i{font-style:normal;display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;border-radius:50%;background:var(--pc);margin-right:8px;font-size:19px;box-shadow:0 0 12px var(--pc);flex:0 0 auto}
.me b{color:#ffd32a;margin-left:6px}
.stt{flex:1;text-align:right;font-size:12px;color:#9a8cc9;padding-right:8px;white-space:nowrap}
.hb,.xb{border:0;background:rgba(255,255,255,.1);border-radius:10px;height:34px;min-width:38px;font-size:17px;margin-left:6px;padding:0 10px;font-weight:800}
.hb:empty{display:none}
.ui{flex:1;position:relative;overflow:hidden}

/* Várakozás, menü, intro, eredmény */
.wait,.res,.intro,.pause{position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.wi,.medal,.ii{font-size:84px;line-height:1.1;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wait h2,.res h2,.intro h2,.pause h2{font-family:"Russo One",Rubik,sans-serif;font-weight:400;font-size:28px;margin-top:10px}
.wait p{font-size:18px;color:#e6dcff;margin-top:8px;line-height:1.4;max-width:460px}
.wait ul,.intro ul{list-style:none;margin-top:14px;max-width:460px;text-align:left}
.wait li,.intro li{padding:7px 0 7px 24px;position:relative;font-size:16px;color:#e6dcff;border-bottom:1px solid rgba(255,255,255,.08)}
.wait li:before,.intro li:before{content:"▸";position:absolute;left:4px;color:var(--pc)}
.tip{font-size:14px!important;color:#9a8cc9!important;margin-top:20px!important}
.menu{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column}
.mh{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px}
.mh h2{font-family:"Russo One",Rubik,sans-serif;font-weight:400;font-size:22px}
.mh button{border:0;background:rgba(255,255,255,.1);border-radius:12px;font-size:20px;padding:6px 12px}
.mg{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;padding:6px 12px 16px;align-content:start;-webkit-overflow-scrolling:touch}
@media (min-width:600px){.mg{grid-template-columns:1fr 1fr 1fr}}
.gcard{position:relative;text-align:left;border:0;border-radius:18px;padding:12px;min-height:116px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 6px 0 rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.2);overflow:hidden}
.gcard .gi{display:block;font-size:36px;line-height:1}
.gcard b{display:block;font-family:"Russo One",Rubik,sans-serif;font-weight:400;font-size:16px;margin-top:8px;text-shadow:0 2px 3px rgba(0,0,0,.4)}
.gcard small{display:block;font-size:12px;font-weight:700;margin-top:3px;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.gcard.no{filter:grayscale(.8);opacity:.45}
.gcard:active{transform:scale(.97)}
.intro .ii{font-size:96px}
.intro .why{color:#ffd32a;font-weight:800;margin-top:16px;font-size:18px}
.res .lbl{font-size:20px;margin-top:6px;color:#e6dcff;font-weight:700}
.res .aw{font-size:20px;margin-top:10px;color:#ffd32a;font-weight:800}
.res .tot{font-size:16px;margin-top:6px;color:#9a8cc9}
.res .waith{margin-top:20px;color:#9a8cc9}
.pause .big,.res .big,.intro .big{max-width:340px}

/* Beállítások lap */
.sheet{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(5,3,18,.88);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet .sb{width:100%;max-width:520px;max-height:90%;overflow-y:auto;background:#160e38;border-radius:24px 24px 0 0;padding:18px 18px 26px;border-top:3px solid var(--pc)}
.sheet h3{font-family:"Russo One",Rubik,sans-serif;font-weight:400;font-size:22px;margin-bottom:8px}
.srow{margin-top:14px}
.srow p{font-weight:700;color:#cdbcff;font-size:14px;margin-bottom:6px}
.seg{display:flex;border-radius:12px;overflow:hidden;border:2px solid #3a2f6e}
.seg button{flex:1;border:0;padding:11px 4px;background:#150d33;font-weight:700;font-size:15px}
.seg button.on{background:var(--pc)}
.plist div{display:flex;align-items:center;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.plist span{flex:1}
.plist button{border:0;background:rgba(255,71,87,.25);border-radius:10px;padding:6px 10px;font-weight:700}

/* Gamepad */
.pad{position:absolute;left:0;top:0;right:0;bottom:0;display:flex}
.pz{position:relative;flex:1.15;touch-action:none;border-right:2px dashed rgba(255,255,255,.07)}
.phint{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px dashed rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:44px;color:rgba(255,255,255,.28);pointer-events:none}
.phint small{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.jb{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid var(--pc);background:radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:0 0 26px var(--pc);display:none;pointer-events:none}
.jb.on{display:block}
.pz.act .phint{display:none}
.jb.dp{border-radius:22px;background:none;box-shadow:none;border:0}
.jb.dp:before{content:"";position:absolute;left:50px;top:0;width:50px;height:150px;border-radius:12px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--pc)}
.jb.dp:after{content:"";position:absolute;left:0;top:50px;width:150px;height:50px;border-radius:12px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--pc)}
.jk{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--pc) 62%);box-shadow:0 0 20px var(--pc);z-index:2}
.pb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none}
.pbtn{width:148px;height:148px;border-radius:50%;border:0;margin:10px;font-family:"Russo One",Rubik,sans-serif;font-size:21px;letter-spacing:.5px;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),var(--bc) 56%,rgba(0,0,0,.45));box-shadow:0 8px 0 rgba(0,0,0,.4),0 0 30px var(--bc);touch-action:none;text-shadow:0 2px 3px rgba(0,0,0,.4)}
.pbtn.sm{width:108px;height:108px;font-size:16px}
.pbtn.dn{transform:translateY(6px) scale(.96);box-shadow:0 2px 0 rgba(0,0,0,.4),0 0 44px var(--bc)}
.pinfo{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-weight:700;color:#efe7ff;pointer-events:none;font-size:15px;text-shadow:0 1px 3px #000}
.rot{position:absolute;left:0;right:0;top:6px;text-align:center;font-size:13px;color:#9a8cc9;pointer-events:none;display:none}
@media (orientation:portrait){
  .pad{flex-direction:column}
  .pz{border-right:0;border-bottom:2px dashed rgba(255,255,255,.07)}
  .pb{flex-direction:row;flex:0 0 42%}
  .pbtn{width:132px;height:132px}
  .pbtn.sm{width:100px;height:100px}
  .rot{display:block}
}

/* Nagy gomb */
.tapb{position:absolute;left:14px;right:14px;top:14px;bottom:14px;border-radius:34px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Russo One",Rubik,sans-serif;font-size:46px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.35),var(--bc) 62%,rgba(0,0,0,.4));box-shadow:0 10px 0 rgba(0,0,0,.4),0 0 40px var(--bc);touch-action:none;text-shadow:0 3px 4px rgba(0,0,0,.4)}
.tapb small{font-family:Rubik,sans-serif;font-size:17px;font-weight:700;margin-top:10px;opacity:.9}
.tapb .cnt{font-style:normal;font-size:64px;margin-top:6px}
.tapb.dn{transform:translateY(6px) scale(.985);box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 60px var(--bc)}
.tapb.off{filter:grayscale(.8);opacity:.5}

/* Választás */
.chv{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:10px}
.chv h3{text-align:center;font-size:19px;line-height:1.3;margin:4px 6px 4px}
.chs{text-align:center;color:#cdbcff;font-size:14px;margin-bottom:6px}
.cg{flex:1;display:grid;grid-gap:10px;min-height:0;margin-top:4px}
.cg.c2{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
.cg.c3{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:1fr}
.cg.c1{grid-template-columns:1fr;overflow-y:auto;grid-auto-rows:minmax(58px,auto);align-content:start;-webkit-overflow-scrolling:touch}
.cg.cx{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.cb{border:0;border-radius:18px;font-weight:800;font-size:19px;line-height:1.2;padding:10px;background:var(--bc);box-shadow:0 6px 0 rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.45);word-break:break-word}
.cb .ci{font-size:32px;margin-right:10px;flex:0 0 auto}
.cg.c1 .cb{justify-content:flex-start;text-align:left}
.cb.sel{box-shadow:0 0 0 4px #fff,0 0 24px var(--bc);transform:scale(1.02)}
.cb.dim{opacity:.28}
.cb:active{transform:scale(.97)}
.seq{text-align:center;font-size:26px;min-height:32px;margin-top:6px}

/* Szöveg, szám */
.tx{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:14px;overflow-y:auto}
.tx h3{font-size:21px;text-align:center}
.txs{text-align:center;color:#cdbcff;margin-top:6px;font-size:15px;min-height:1em}
.tx form{display:flex;margin-top:12px}
.tx input{flex:1;margin:0;font-size:20px}
.tx form button{border:0;border-radius:14px;margin-left:8px;padding:0 18px;font-family:"Russo One",Rubik,sans-serif;font-size:17px;background:var(--pc)}
.log{margin-top:12px}
.log div{padding:9px 12px;margin-bottom:6px;border-radius:12px;background:rgba(255,255,255,.06);font-weight:700;font-size:16px;animation:tin .25s}
.log .ok{background:rgba(46,213,115,.25);color:#b8ffd3}
.log .bad{background:rgba(255,71,87,.18);color:#ffc1c9}
.log .warn{background:rgba(255,211,42,.2);color:#fff1a8}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nm{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:12px}
.nm h3{text-align:center;font-size:18px;line-height:1.3}
.nd{margin:10px 0;text-align:center;font-family:"Russo One",Rubik,sans-serif;font-size:40px;padding:8px;border-radius:14px;background:#150d33;border:2px solid var(--pc);min-height:66px}
.nd small{font-family:Rubik,sans-serif;font-size:16px;color:#9a8cc9;margin-left:6px}
.kp{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:8px;min-height:0}
.kp button{border:0;border-radius:14px;background:#251a5c;font-size:26px;font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.kp button.ok{background:var(--pc);font-size:20px}
.kp button:active{transform:translateY(3px)}

/* Rajzolás */
.dr{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:8px}
.drh{width:100%;display:flex;align-items:center;justify-content:space-between;padding:2px 6px 6px}
.dw{font-family:"Russo One",Rubik,sans-serif;font-size:22px;color:#ffd32a}
.dt{font-family:"Russo One",Rubik,sans-serif;font-size:22px}
.dcw{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.dc{background:#fff;border-radius:12px;touch-action:none;box-shadow:0 0 0 3px var(--pc)}
.tools{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:8px}
.tools button{border:0;margin:3px;border-radius:50%;width:36px;height:36px}
.tools .sw.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pc)}
.tools .sz{background:#2a1f66;color:#fff;font-weight:800}
.tools .sz.on{background:var(--pc)}
.tools .ac{border-radius:12px;width:auto;padding:0 12px;background:#2a1f66;font-weight:800;font-size:16px}

/* Kártyák */
.cd{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:8px}
.cdtop{display:flex;align-items:center;justify-content:space-between;padding:4px 6px}
.cst{font-family:"Russo One",Rubik,sans-serif;font-size:19px;text-align:right;flex:1;margin-left:10px}
.cst.me{color:#ffd32a;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.55}}
.minic{display:flex;align-items:center;font-weight:700;font-size:14px;color:#cdbcff}
.hand{flex:1;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:18px 10px 10px;-webkit-overflow-scrolling:touch;min-height:0}
.card{flex:0 0 auto;width:84px;height:126px;margin-right:-14px;border-radius:12px;border:3px solid #fff;font-family:"Russo One",Rubik,sans-serif;font-size:34px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 10px rgba(0,0,0,.5);transition:transform .15s}
.card:after{content:"";position:absolute;left:10px;top:18px;right:10px;bottom:18px;border-radius:50%;background:rgba(255,255,255,.22);transform:rotate(25deg)}
.card span{position:relative;z-index:1;text-shadow:0 2px 2px rgba(0,0,0,.4)}
.card.ok{transform:translateY(-14px);box-shadow:0 0 0 3px #ffd32a,0 8px 16px rgba(0,0,0,.6)}
.card.no{filter:brightness(.55)}
.card.k0{background:#ff4757}.card.k1{background:#f5b800}.card.k2{background:#20bf6b}.card.k3{background:#3d8bff}
.card.k4{background:conic-gradient(#ff4757 0 25%,#f5b800 0 50%,#20bf6b 0 75%,#3d8bff 0)}
.card.mini{width:44px;height:64px;font-size:18px;margin:0 8px 0 0;border-width:2px}
.cbtns{display:flex;justify-content:center;flex-wrap:wrap;padding:6px 0 4px}
.cbtns button{border:0;border-radius:16px;margin:4px;padding:14px 20px;font-family:"Russo One",Rubik,sans-serif;font-size:18px;background:#2a1f66;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.cbtns .last{background:linear-gradient(135deg,#ff3ea5,#ffb400);animation:pulse .6s ease-in-out infinite alternate;font-size:22px}
@keyframes pulse{to{transform:scale(1.08)}}
.cpick{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(5,3,18,.9);z-index:45;display:none;flex-direction:column;align-items:center;justify-content:center}
.cpick.on{display:flex}
.cpick p{font-family:"Russo One",Rubik,sans-serif;font-size:22px;margin-bottom:14px}
.cpick div{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px}
.cpick button{width:120px;height:90px;border:0;border-radius:18px;font-weight:800;font-size:18px}

/* Titkos lap */
.rv{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:14px;overflow-y:auto}
.rv h3{font-size:20px;text-align:center}
.hold{position:relative;width:100%;max-width:440px;height:230px;margin-top:12px;border-radius:24px;flex:0 0 auto}
.cover,.secret{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px}
.cover{background:repeating-linear-gradient(45deg,#2a1f66,#2a1f66 14px,#231955 14px,#231955 28px);border:3px dashed var(--pc);font-size:20px;font-weight:800}
.cover small{font-size:14px;color:#cdbcff;font-weight:600;margin-top:6px}
.secret{display:none;background:linear-gradient(135deg,var(--pc),#2a1f66);box-shadow:0 0 30px var(--pc)}
.hold.show .secret{display:flex}
.secret b{font-family:"Russo One",Rubik,sans-serif;font-weight:400;font-size:28px;line-height:1.2}
.secret span{font-size:18px;margin-top:8px;font-weight:700}
.secret button{margin-top:14px;border:0;border-radius:14px;padding:12px 16px;font-weight:800;font-size:16px;background:#fff;color:#2a1f66}
.rbtns{width:100%;max-width:440px;margin-top:14px}
.rbtns button{display:block;width:100%;margin-top:10px;border:0;border-radius:16px;padding:16px;font-weight:800;font-size:18px;background:#2a1f66;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.rbtns button.on{background:var(--pc)}
.rsub{margin-top:12px;color:#cdbcff;text-align:center;font-size:15px;line-height:1.4}

/* Pong él-vezérlő */
.edge{position:absolute;left:0;top:0;right:0;bottom:0;touch-action:none}
.edge canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.edge p{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-weight:700;color:#cdbcff;font-size:14px;pointer-events:none}

#toast{position:fixed;left:50%;top:56px;transform:translateX(-50%);z-index:60;pointer-events:none;text-align:center;width:92%;max-width:440px}
#toast div{margin-bottom:6px;padding:10px 16px;border-radius:16px;background:rgba(20,12,52,.96);border:2px solid #22e6ff;font-weight:800;font-size:17px;animation:tin .25s;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#toast div.ok{border-color:#2ed573}#toast div.bad{border-color:#ff4757}#toast div.warn{border-color:#ffd32a}