:root{
  --ink:#0a0e12; --ink2:#12181e; --ink3:#1b232b;
  --bone:#efe7d6; --muted:#8d949c;
  --brass:#c8a05a; --brass-dim:#8a6c36;
  --felt:#1d6b4d; --chalk:#7fb6d6; --oxblood:#8e2b33;
  --p0:#ff4d5e; --p1:#4aa8ff; --p2:#3ddc84; --p3:#ffcf3f;
  --shadow:0 18px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
.hidden{display:none !important}
h1,h2,h3{font-family:"Alfa Slab One",Georgia,serif; font-weight:400; margin:0}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}

/* -------------------------------------------------- tlacidla */
.btn{
  border:1px solid rgba(200,160,90,.4); background:rgba(255,255,255,.03);
  color:var(--bone); padding:.6rem 1.1rem; border-radius:3px; cursor:pointer;
  letter-spacing:.01em; transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover{background:rgba(200,160,90,.14); border-color:var(--brass)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--chalk); outline-offset:2px}
.btn.primary{background:var(--brass); border-color:var(--brass); color:#1a1206; font-weight:700}
.btn.primary:hover{background:#dcb26a}
.btn.ghost{border-color:rgba(239,231,214,.22); color:var(--muted)}
.btn.ghost:hover{color:var(--bone)}
.btn.link{background:none;border:none;color:var(--chalk);padding:0;text-decoration:underline;text-underline-offset:4px}
.btn.wide{width:100%; margin-top:.9rem}
.btn[disabled]{opacity:.4; cursor:not-allowed}

input,select{
  background:rgba(0,0,0,.35); border:1px solid rgba(239,231,214,.16);
  border-radius:3px; padding:.55rem .7rem; width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--chalk)}
#slotRow .opt{flex:0 0 46px}
#slotRow .opt.on{background:var(--brass);border-color:var(--brass);color:#1a1206;font-weight:700}

/* -------------------------------------------------- obrazovky */
.screen{
  position:fixed; inset:0; overflow-y:auto; z-index:20;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(29,107,77,.26), transparent 60%),
    radial-gradient(90% 70% at 10% 90%, rgba(142,43,51,.2), transparent 60%),
    var(--ink);
}
.menu-inner{max-width:1120px; margin:0 auto; padding:clamp(1.6rem,4vw,3.4rem) 1.2rem 4rem}
.menu-inner.narrow{max-width:760px}
.brand h1{
  font-size:clamp(3.2rem,9vw,6.4rem); line-height:.86; letter-spacing:-.02em;
  text-shadow:0 2px 0 var(--brass-dim), 0 16px 32px rgba(0,0,0,.6);
}
.brand.small h1{font-size:clamp(2rem,5vw,3rem)}
.tagline{color:var(--muted); max-width:46ch; margin:1rem 0 .6rem; line-height:1.55}
.code{
  font-family:"Alfa Slab One",serif; font-size:3rem; letter-spacing:.32em;
  color:var(--brass); margin:.4rem 0;
}

.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; margin:2.2rem 0}
.panel{
  background:linear-gradient(180deg,rgba(29,107,77,.16),rgba(0,0,0,0) 38%), var(--ink2);
  border:1px solid rgba(239,231,214,.1); border-top:2px solid var(--brass);
  padding:1.3rem 1.3rem 1.5rem; box-shadow:var(--shadow);
}
.panel h2{font-size:1.4rem}
.sub{color:var(--muted); font-size:.92rem; margin:.4rem 0 1rem; line-height:1.5}
.row{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}
.row .btn{flex:1 1 auto}
.row.join input{flex:1 1 90px; text-transform:uppercase; letter-spacing:.3em; text-align:center}
.field{display:block; margin:.6rem 0}
.field span{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem}
.err{color:var(--p0); min-height:1.2em; font-size:.9rem; margin:.6rem 0 0}

/* -------------------------------------------------- sedadla */
.seats,.lobbyseats{display:flex; flex-direction:column; gap:.5rem}
.seat{
  display:flex; align-items:center; gap:.8rem; padding:.55rem .7rem;
  background:rgba(0,0,0,.28); border-left:4px solid var(--seatc,#555);
}
.seat .nm{flex:1; font-weight:600}
.seat .tag{color:var(--muted); font-size:.85rem}
.seat .opts{display:flex; gap:.3rem}
.seat .opt{
  border:1px solid rgba(239,231,214,.18); background:none; padding:.25rem .6rem;
  font-size:.85rem; cursor:pointer; border-radius:2px; color:var(--muted);
}
.seat .opt.on{background:var(--seatc); border-color:var(--seatc); color:#0d1114; font-weight:700}

/* -------------------------------------------------- mapy */
.mapsblock h2{font-size:1.3rem; margin-bottom:.8rem}
.maps{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.7rem}
.mapc{
  text-align:left; cursor:pointer; padding:.75rem .85rem; background:var(--ink2);
  border:1px solid rgba(239,231,214,.1); border-left:5px solid var(--mc,#1d6b4d);
  color:var(--bone); transition:border-color .15s, background .15s;
}
.mapc:hover{background:var(--ink3)}
.mapc.on{border-color:var(--brass); border-left-color:var(--mc); background:var(--ink3)}
.mapc b{display:block; font-size:1.05rem}
.mapc .tag{color:var(--brass); font-size:.75rem; letter-spacing:.06em}
.mapc p{color:var(--muted); font-size:.82rem; margin:.35rem 0 0; line-height:1.4}

/* -------------------------------------------------- modaly */
.modal{position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:rgba(4,6,8,.78); padding:1rem; overflow-y:auto}
.sheet{
  position:relative; max-width:760px; width:100%; background:var(--ink2);
  border:1px solid rgba(239,231,214,.12); border-top:3px solid var(--brass);
  padding:1.6rem 1.8rem 2rem; box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;
}
.sheet.small{max-width:460px; text-align:center}
.sheet h2{font-size:1.9rem; margin-bottom:.4rem}
.sheet h3{font-family:Barlow,sans-serif; font-weight:700; font-size:1.05rem; color:var(--brass); margin:1.4rem 0 .4rem}
.sheet p,.sheet li{color:#cfd4d8; line-height:1.6; font-size:.95rem}
.sheet p.note{color:var(--muted); font-size:.85rem; border-left:2px solid var(--brass); padding-left:.7rem}
.sheet ul{margin:.3rem 0; padding-left:1.1rem}
.sheet li{margin:.25rem 0}
.close{position:absolute; top:.5rem; right:.7rem; background:none; border:none; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1}
.bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.5rem; margin-top:.6rem}
.bitem{display:flex; gap:.6rem; align-items:flex-start; background:rgba(0,0,0,.25); padding:.5rem .6rem}
.bitem .g{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border:2px solid var(--bc); color:var(--bc); font-weight:700; border-radius:3px;
}
.bitem b{font-size:.92rem}
.bitem span{display:block; color:var(--muted); font-size:.8rem; line-height:1.35}
.board{margin:1rem 0}
.brow{display:flex; align-items:center; gap:.7rem; padding:.5rem .6rem; background:rgba(0,0,0,.25); margin-bottom:.35rem; border-left:4px solid var(--c)}
.brow .nm{flex:1; text-align:left; font-weight:600}
.brow .sc{color:var(--muted); font-size:.9rem}

/* -------------------------------------------------- hra */
#app{position:fixed; inset:0; display:flex; flex-direction:column}
#table{flex:1; width:100%; min-height:0; display:block; touch-action:none; cursor:crosshair}

#hud{
  display:flex; gap:.5rem; padding:.5rem .6rem; background:linear-gradient(180deg,rgba(6,9,12,.94),rgba(6,9,12,.6));
  border-bottom:1px solid rgba(200,160,90,.25);
}
.pcard{
  flex:1 1 0; min-width:0; position:relative; padding:.4rem .6rem .5rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(239,231,214,.08);
  border-left:5px solid var(--c); opacity:.62; transition:opacity .2s,background .2s;
}
.pcard.act{opacity:1; background:rgba(200,160,90,.1); border-color:rgba(200,160,90,.5); border-left-color:var(--c)}
.pcard .top{display:flex; align-items:baseline; gap:.4rem}
.pcard .nm{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .meta{color:var(--muted); font-size:.78rem; white-space:nowrap}
.pcard .pips{display:flex; gap:4px; margin-top:.35rem; flex-wrap:wrap}
.chip{
  font-style:normal; width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; font-weight:700; color:#1a1d22; box-shadow:inset -2px -2px 3px rgba(0,0,0,.35);
}
.chip.eight{background:#15181d; color:#f3ede0}
.pcard .bs{display:flex; gap:3px; margin-top:.3rem; min-height:17px}
.bz{
  font-style:normal; font-size:.7rem; font-weight:700; width:17px; height:17px;
  display:grid; place-items:center; border:1px solid currentColor; border-radius:2px;
}
.bz.on{color:#101418; border-color:transparent}
.timer{position:absolute; left:0; bottom:0; height:3px; background:var(--brass); width:0}

#banner{
  position:absolute; top:calc(50% - 2rem); left:50%; transform:translateX(-50%);
  font-family:"Alfa Slab One",serif; font-size:clamp(1.4rem,4vw,2.6rem); text-align:center;
  pointer-events:none; opacity:0; transition:opacity .25s; text-shadow:0 6px 24px rgba(0,0,0,.8);
}
#banner.show{opacity:1}

#log{
  position:absolute; left:.8rem; bottom:6.4rem; list-style:none; margin:0; padding:0;
  max-width:min(46ch,60vw); pointer-events:none;
}
#log li{
  background:rgba(6,9,12,.82); border-left:3px solid var(--c,#555); padding:.3rem .6rem;
  margin-top:.25rem; font-size:.86rem; color:#d7dbdf; animation:slide .25s ease-out;
}
@keyframes slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

#controls{
  display:flex; align-items:center; gap:1rem; padding:.55rem .8rem;
  background:linear-gradient(0deg,rgba(6,9,12,.96),rgba(6,9,12,.7));
  border-top:1px solid rgba(200,160,90,.25);
}
.ctrl-left{flex:1 1 30%; min-width:0}
.ctrl-mid{flex:1 1 40%; text-align:center}
.ctrl-right{flex:0 0 auto; display:flex; gap:.6rem; align-items:center}
.spinwrap{display:flex; flex-direction:column; align-items:center; gap:2px; cursor:crosshair}
.spinwrap span{font-size:.65rem; color:var(--muted)}
#spinCv{border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.5); touch-action:none}
.boosts{display:flex; gap:.4rem}
.bslot{
  width:44px; height:44px; border:1px dashed rgba(239,231,214,.18); border-radius:3px;
  display:grid; place-items:center; background:none; cursor:default; color:var(--muted);
  font-weight:700; font-size:1.1rem; position:relative;
}
.bslot.has{border-style:solid; border-color:var(--bc); color:var(--bc); cursor:pointer; background:rgba(255,255,255,.04)}
.bslot.has:hover{background:rgba(255,255,255,.1)}
.bslot.on{background:var(--bc); color:#0d1114; box-shadow:0 0 14px var(--bc)}
.bslot .k{position:absolute; top:1px; right:3px; font-size:.6rem; opacity:.6; font-weight:400}
.hint{color:var(--muted); font-size:.75rem; margin:.25rem 0 0}
.status{font-weight:600; min-height:1.3em}
.status em{font-style:normal; color:var(--brass)}
.power{display:flex; align-items:center; gap:.6rem; margin-top:.3rem}
.power-track{flex:1; height:12px; background:rgba(0,0,0,.5); border:1px solid rgba(239,231,214,.14); overflow:hidden}
#powerFill{height:100%; width:50%; background:linear-gradient(90deg,var(--felt),var(--brass) 55%,var(--p0)); transition:width .05s linear}
#powerNum{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.85rem; width:3.4rem; text-align:right}

@media (max-width:720px){
  #hud{flex-wrap:wrap}
  .pcard{flex:1 1 45%}
  #controls{flex-wrap:wrap; gap:.5rem}
  .ctrl-left,.ctrl-mid{flex:1 1 100%}
  .ctrl-right{flex:1 1 100%}
  .ctrl-right .btn{flex:1}
  #log{bottom:10rem; font-size:.8rem}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}