/* AUTÓSKÁRTYA — arcade, TV-re. Fix 1920×1080-as színpad, amely a képernyőhöz skálázódik.
   Minden elem fix pozíciójú: a játék közben semmi nem ugrál és nincs görgetés. */

:root{
  --bg:#07061a; --panel:#120f33; --panel2:#171347; --line:#3a2f8f;
  --pink:#ff2d95; --cyan:#19e3ff; --yellow:#ffe14d; --green:#5dff8a;
  --ink:#f4f1ff; --muted:#9a93d6;
  --display:Impact,Haettenschweiler,"Roboto Condensed","Arial Narrow","Liberation Sans Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --mono:"Courier New",Consolas,Menlo,monospace;
  --body:"Trebuchet MS","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;font-synthesis:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--body);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;
  transform-origin:50% 50%;overflow:hidden;background:var(--bg)}
.screen{position:absolute;inset:0}
.off{visibility:hidden;opacity:0;pointer-events:none}

/* ---------- háttér ---------- */
.bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,#2f1773 0%,rgba(47,23,115,0) 70%),
             linear-gradient(#07061a 0%,#0b0a2b 55%,#14093f 100%)}
.bg::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-8%;height:52%;opacity:.55;
  background:linear-gradient(90deg,rgba(25,227,255,.35) 2px,transparent 2px) 0 0/100px 100px,
             linear-gradient(rgba(255,45,149,.30) 2px,transparent 2px) 0 0/100px 100px;
  transform:perspective(520px) rotateX(63deg);transform-origin:50% 100%}
.crt{position:absolute;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,rgba(0,0,0,0) 2px 4px),
             radial-gradient(ellipse at center,rgba(0,0,0,0) 60%,rgba(0,0,0,.45) 100%)}

/* ---------- gombok ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 36px/1 var(--display);letter-spacing:2px;
  color:#07061a;background:var(--yellow);border-radius:12px;box-shadow:0 6px 0 #b8960f;padding:0 28px;text-transform:uppercase;
  transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #b8960f}
.btn:focus{outline:6px solid var(--cyan);outline-offset:5px}
.btn:disabled{opacity:.4;cursor:default}
.btn.small{font-size:28px;height:52px;padding:0 22px;background:var(--panel2);color:var(--ink);box-shadow:0 5px 0 #0a0830;border:3px solid var(--line)}
.btn.danger{background:var(--pink);box-shadow:0 6px 0 #9c1760;color:#fff}
.ghost{visibility:hidden}

/* ---------- kezdőképernyő ---------- */
.hero{position:absolute;left:90px;top:110px;width:880px;height:880px}
.kicker{font:700 30px var(--mono);letter-spacing:6px;color:var(--cyan)}
.hero h1{font:700 190px/.88 var(--display);letter-spacing:6px;margin-top:26px;color:var(--ink);
  text-shadow:6px 6px 0 var(--pink)}
.hero h1 em{font-style:normal;color:var(--yellow);text-shadow:6px 6px 0 var(--pink),0 0 40px rgba(255,225,77,.35)}
.tagline{font:30px/1.45 var(--body);color:#c9c4ff;margin-top:34px}
.hero-car{position:absolute;left:-10px;top:590px;width:720px;animation:idle 3.2s ease-in-out infinite}
.credit{position:absolute;left:0;top:850px;font:700 32px var(--mono);letter-spacing:3px;color:var(--yellow)}
.blink{animation:blink 1.1s ease-in-out infinite}

.panel{position:absolute;right:90px;top:90px;width:800px;height:900px;padding:38px 46px;
  background:rgba(18,15,51,.94);border:6px solid var(--cyan);border-radius:22px;
  box-shadow:0 0 0 6px #07061a,0 0 0 11px var(--pink),0 0 60px rgba(255,45,149,.25)}
.panel-head{display:flex;align-items:center;gap:20px;font:700 28px var(--mono);letter-spacing:3px;color:var(--cyan)}
.panel-head i{flex:1;height:3px;background:var(--line)}
.field-label{font:700 26px var(--mono);letter-spacing:2px;color:var(--yellow);margin:34px 0 14px}
.field-label span{font-size:20px;color:var(--muted);letter-spacing:0;margin-left:10px;font-weight:400}

.picker{display:flex;align-items:center;gap:26px;height:100px}
.btn.sq{width:100px;height:100px;padding:0;font-size:46px}
.picker output{width:150px;text-align:center;font:700 110px/1 var(--display);color:var(--cyan);text-shadow:0 0 24px rgba(25,227,255,.45)}
.picker-hint{font:24px/1.35 var(--mono);color:var(--muted);margin-left:14px}

.modes{display:flex;gap:22px}
.modes .mode{min-width:0;flex:1 1 0}
.mode{position:relative;height:196px;text-align:left;padding:20px 22px;background:var(--panel2);border:5px solid var(--line);border-radius:16px;
  color:var(--ink)}
.mode strong{display:block;font:700 40px/1 var(--display);letter-spacing:1px;white-space:nowrap}
.mode small{display:block;margin-top:12px;font:22px/1.3 var(--body);color:#b9b3ee}
.mode.on{border-color:var(--yellow);background:#2b1f6e;box-shadow:inset 0 0 0 3px rgba(255,225,77,.25)}
.mode.on strong{color:var(--yellow)}
.mode.on::after{content:"✔";position:absolute;right:16px;bottom:10px;font:700 34px/1 var(--body);color:var(--green)}
.mode:focus{outline:6px solid var(--cyan);outline-offset:5px}

#names{width:100%;height:72px;padding:0 22px;font:700 32px var(--mono);background:#0a0825;border:5px solid var(--line);border-radius:12px;color:var(--ink);
  -webkit-user-select:text;user-select:text}
#names::placeholder{color:#5f58a8}
#names:focus{outline:6px solid var(--cyan);outline-offset:5px;border-color:var(--cyan)}

.btn.start{position:absolute;left:46px;right:46px;bottom:38px;height:112px;font-size:62px;background:var(--pink);color:#fff;box-shadow:0 8px 0 #9c1760}
.btn.start:disabled{background:#4a2a6a;box-shadow:0 8px 0 #2a1740;font-size:40px}

/* ---------- HUD ---------- */
.hud{position:absolute;left:40px;right:40px;top:20px;height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{font:700 46px/1 var(--display);letter-spacing:4px;color:var(--ink);text-shadow:3px 3px 0 var(--pink);width:470px;white-space:nowrap}
.logo em{font-style:normal;color:var(--yellow);margin-left:14px}
.hud-round{font:700 60px/1 var(--display);letter-spacing:4px;color:var(--cyan);text-shadow:0 0 22px rgba(25,227,255,.5);text-align:center;flex:1}
.hud-right{display:flex;align-items:center;gap:16px;width:690px;justify-content:flex-end}
.chip{font:700 24px/1 var(--mono);letter-spacing:1px;padding:14px 18px;border:3px solid var(--yellow);color:var(--yellow);border-radius:8px;white-space:nowrap}
.chip.alt{border-color:var(--cyan);color:var(--cyan)}

/* ---------- játékosok és lapok ---------- */
.slots{position:absolute;left:40px;right:40px;top:100px;height:537px;display:flex;justify-content:center;gap:40px}
.slot{width:270px;flex:none;position:relative}
.plate{height:72px;padding:6px 14px;background:var(--panel);border:4px solid var(--line);border-radius:12px;position:relative}
.pname{font:700 30px/34px var(--display);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.pinfo{font:700 20px/24px var(--mono);color:var(--cyan);white-space:nowrap}
.plate.caller{border-color:var(--yellow);background:#2b1f6e;box-shadow:0 0 0 4px rgba(255,225,77,.3)}
.plate.caller .pname{color:var(--yellow)}
.plate.caller::after{content:"▶";position:absolute;right:12px;top:16px;font:700 30px/1 var(--display);color:var(--yellow)}
.plate.gone{opacity:.45}
.pinfo.bump{animation:bump .5s ease-out}

.cardbox{position:absolute;left:0;top:80px;width:270px;height:405px;perspective:1400px}
.card3d{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.45,.05,.25,1)}
.card3d.up{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.55)}
.face.front{transform:rotateY(180deg);background:#fff}
.face.front img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.face.back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(45deg,#2a1470 0 16px,#1f1062 16px 32px);border:6px solid var(--pink)}
.back-mark{width:110px;height:110px;display:grid;place-items:center;font:700 84px/1 var(--display);color:var(--yellow);
  border:6px solid var(--yellow);transform:skewX(-6deg);text-shadow:4px 4px 0 var(--pink)}
.back-title{font:700 30px/1 var(--display);letter-spacing:2px;color:var(--ink);margin-top:12px;white-space:nowrap}
.back-sub{font:700 17px var(--mono);letter-spacing:2px;color:var(--cyan)}
.empty{position:absolute;inset:0;display:none;place-items:center;border:5px dashed #4b3fa8;border-radius:16px;font:700 40px var(--display);letter-spacing:3px;color:#6d63c4}
.slot.out .empty{display:grid}
.slot.out .card3d{visibility:hidden}

.face{transition:opacity .4s}
.slot.lose .face{opacity:.38}
.slot.win .cardbox::after,.slot.tie .cardbox::after{content:"";position:absolute;inset:-10px;border:6px solid var(--yellow);border-radius:24px;pointer-events:none;
  box-shadow:0 0 36px rgba(255,225,77,.7);animation:glow .9s ease-in-out infinite alternate}
.slot.tie .cardbox::after{border-color:var(--cyan);box-shadow:0 0 36px rgba(25,227,255,.7)}
.slot.dealing .cardbox{animation:dealIn .5s ease-out both;animation-delay:calc(var(--i,0)*110ms)}

.tag{position:absolute;left:0;top:493px;width:270px;height:44px;font:700 34px/44px var(--display);letter-spacing:1px;text-align:center;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.tag.call{color:var(--yellow)}
.tag.win{color:#07061a;background:var(--yellow);border-radius:8px}
.tag.tie{color:#07061a;background:var(--cyan);border-radius:8px}

/* ---------- üzenetsáv ---------- */
.msgbar{position:absolute;left:40px;right:40px;top:660px;height:100px;display:grid;grid-template-columns:250px 1fr 420px;gap:24px}
.pot{background:var(--panel);border:4px solid var(--cyan);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pot small{font:700 20px/1 var(--mono);letter-spacing:3px;color:var(--cyan)}
.pot div{font:700 30px/1.1 var(--display);letter-spacing:2px;margin-top:4px}
.pot b{font-weight:400;font-size:52px;color:var(--yellow)}
.msg{background:var(--panel);border:4px solid var(--pink);border-radius:14px;padding:0 30px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;min-width:0}
.msg-title{font:700 50px/1.05 var(--display);letter-spacing:3px;color:var(--yellow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.msg-title.info{color:var(--cyan)}
.msg-title.tie{color:var(--cyan)}
.msg-sub{font:700 26px/1.25 var(--body);color:#dcd8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px}
.next-wrap{display:flex}
.btn.next{width:100%;height:100%;font-size:36px;white-space:nowrap;padding:0 12px;background:var(--green);box-shadow:0 7px 0 #2b9f4d;color:#07210f}

/* ---------- tulajdonságok ---------- */
.stats{position:absolute;left:40px;right:40px;top:780px;height:156px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--panel2);border:5px solid var(--line);border-radius:16px;color:var(--ink);transition:opacity .25s}
.stat .k{position:absolute;left:12px;top:10px;width:34px;height:34px;display:grid;place-items:center;
  font:700 24px/1 var(--mono);background:var(--yellow);color:#07061a;border-radius:6px}
.stat .l{font:700 23px/1 var(--mono);letter-spacing:1px;color:#b9b3ee}
.stat .v{font:700 60px/1.05 var(--display);letter-spacing:1px;color:var(--cyan);margin:6px 0 4px;white-space:nowrap}
.stat .d{font:700 20px/1 var(--mono);color:var(--pink)}
.stat.long .v{font-size:44px;margin:12px 0 8px}
.stat:focus{outline:none;border-color:var(--yellow);background:#2b1f6e;box-shadow:0 0 0 6px var(--cyan)}
.stat:disabled{cursor:default}
.stat.chosen{border-color:var(--yellow);background:#2b1f6e}
.stat.chosen .v{color:var(--yellow)}
.stat.dim{opacity:.3}

/* ---------- lábléc ---------- */
.foot{position:absolute;left:40px;right:40px;top:960px;height:80px;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.log{font:700 24px/1.45 var(--mono);color:var(--muted);width:1000px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.log div{overflow:hidden;text-overflow:ellipsis}
.log div:first-child{color:#d8d4ff}
.hints{font:700 22px/1.4 var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
kbd{font:700 20px var(--mono);color:#07061a;background:var(--cyan);border-radius:6px;padding:3px 9px;margin:0 6px 0 14px}

/* ---------- repülő lapok ---------- */
.fly-layer{position:absolute;inset:0;pointer-events:none;z-index:40}
.fly{position:absolute;width:56px;height:84px;border-radius:7px;border:4px solid var(--pink);
  background:repeating-linear-gradient(45deg,#2a1470 0 7px,#1f1062 7px 14px);box-shadow:0 4px 12px rgba(0,0,0,.6)}

/* ---------- megerősítő ablak ---------- */
.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(5,4,20,.88)}
.dialog{width:900px;padding:54px;text-align:center;background:var(--panel);border:6px solid var(--pink);border-radius:22px;box-shadow:0 0 60px rgba(255,45,149,.3)}
.dialog h2{font:700 70px/1 var(--display);letter-spacing:3px;color:var(--yellow)}
.dialog p{font:30px var(--body);color:#c9c4ff;margin:22px 0 40px}
.dialog-btns{display:flex;gap:30px;justify-content:center}
.dialog-btns .btn{width:340px;height:104px;font-size:52px}

/* ---------- animációk ---------- */
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes blink{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
@keyframes glow{from{opacity:.55}to{opacity:1}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes dealIn{from{opacity:0;transform:translateY(-60px) rotate(-4deg)}to{opacity:1;transform:none}}