/* ─────────────────────────────────────────────────────────────
   Game Hub – vzhled

   Palety jsou jediný zdroj pravdy: JS je čte zpátky přes
   getComputedStyle a překlápí do Pixi, takže motiv se propíše
   i do herní plochy, ne jen do menu.
   ───────────────────────────────────────────────────────────── */

/* ── Motivy ─────────────────────────────────────────────── */
:root,
[data-theme="midnight"]{
  --bg:#07070d; --bg2:#0d0d16; --surface:#13131f; --surface2:#1c1c2c;
  --brd:rgba(255,255,255,.07); --brd2:rgba(255,255,255,.15);
  --acc:#7c6ff7; --acc2:#a78bfa; --ok:#06d6a0; --warn:#ffd166; --bad:#ff5757;
  --tx:#e8e8f0; --tx2:#9a9ab4; --tx3:#5f5f78;
  --board:#14141f; --board-line:#ffffff;
  --glow-a:rgba(124,111,247,.16); --glow-b:rgba(6,214,160,.11);
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-display:'Orbitron',monospace;
}
[data-theme="neon"]{
  --bg:#04010c; --bg2:#0b0418; --surface:#140825; --surface2:#1e0d35;
  --brd:rgba(255,43,214,.14); --brd2:rgba(255,43,214,.34);
  --acc:#ff2bd6; --acc2:#ff7ae6; --ok:#00e5ff; --warn:#ffe600; --bad:#ff3b5c;
  --tx:#f6e9ff; --tx2:#b48ccc; --tx3:#6f4d86;
  --board:#160a28; --board-line:#ff2bd6;
  --glow-a:rgba(255,43,214,.20); --glow-b:rgba(0,229,255,.16);
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-display:'Orbitron',monospace;
}
[data-theme="sakura"]{
  --bg:#140810; --bg2:#1d0e18; --surface:#271420; --surface2:#341c2b;
  --brd:rgba(255,144,179,.13); --brd2:rgba(255,144,179,.30);
  --acc:#ff90b3; --acc2:#ffc0d4; --ok:#a8e6cf; --warn:#ffd9a0; --bad:#ff6b81;
  --tx:#fbe9f0; --tx2:#c99bad; --tx3:#8a6274;
  --board:#2a1623; --board-line:#ffc0d4;
  --glow-a:rgba(255,144,179,.18); --glow-b:rgba(168,230,207,.12);
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-display:'Orbitron',monospace;
}
[data-theme="crt"]{
  --bg:#010a05; --bg2:#03140a; --surface:#051c0e; --surface2:#082714;
  --brd:rgba(53,255,109,.16); --brd2:rgba(53,255,109,.36);
  --acc:#35ff6d; --acc2:#8affab; --ok:#c8ff35; --warn:#ffe066; --bad:#ff5f5f;
  --tx:#c9ffd7; --tx2:#5fbd7d; --tx3:#37704a;
  --board:#04180c; --board-line:#35ff6d;
  --glow-a:rgba(53,255,109,.16); --glow-b:rgba(200,255,53,.10);
  --font:'Space Grotesk',ui-monospace,monospace;
  --font-display:'Orbitron',monospace;
}
[data-theme="ember"]{
  --bg:#0e0603; --bg2:#170a05; --surface:#1f0e07; --surface2:#2c150b;
  --brd:rgba(255,122,47,.14); --brd2:rgba(255,122,47,.32);
  --acc:#ff7a2f; --acc2:#ffa76b; --ok:#ffd166; --warn:#ffe29a; --bad:#ff4d4d;
  --tx:#ffece0; --tx2:#c39a7f; --tx3:#8a6350;
  --board:#22110a; --board-line:#ffa76b;
  --glow-a:rgba(255,122,47,.18); --glow-b:rgba(255,209,102,.12);
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-display:'Orbitron',monospace;
}
[data-theme="arctic"]{
  --bg:#eef2f8; --bg2:#e3e9f4; --surface:#ffffff; --surface2:#f2f5fb;
  --brd:rgba(16,32,56,.10); --brd2:rgba(16,32,56,.20);
  --acc:#4c6ef5; --acc2:#748ffc; --ok:#12b886; --warn:#f59f00; --bad:#e03131;
  --tx:#16202e; --tx2:#5a6b82; --tx3:#94a3b8;
  --board:#f4f7fc; --board-line:#16202e;
  --glow-a:rgba(76,110,245,.14); --glow-b:rgba(18,184,134,.10);
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-display:'Orbitron',monospace;
}

:root{ --r:12px; --r2:18px; --r3:26px; --head:62px; }

/* ── Základ ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--font);
  overflow:hidden;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
/* Pomalu plující záře na pozadí – drží menu "živé" bez canvasu. */
body::before{
  content:''; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 42% at 76% 12%,var(--glow-a),transparent 62%),
    radial-gradient(44% 40% at 14% 88%,var(--glow-b),transparent 62%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(3%,-3%,0) scale(1.12) } }
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
.hidden{display:none!important}
::selection{background:var(--acc); color:var(--bg)}

*::-webkit-scrollbar{width:8px; height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--brd2); border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--acc)}

/* ── Hlavička ───────────────────────────────────────────── */
header{
  display:flex; align-items:center; gap:14px; padding:0 20px; height:var(--head);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--brd); flex-shrink:0; z-index:60;
}
/* Logo i pravá strana dostanou stejný pružný podíl (flex:1 1 0), takže
   prostřední blok sedí přesně na středu okna. S `margin:0 auto` se centroval
   jen ve zbytku místa a širší pravá strana ho táhla doleva. */
.logo{
  display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0;
  font-family:var(--font-display); font-weight:900; font-size:1rem; letter-spacing:.06em;
}
.logo-mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--ok)); color:var(--bg);
  font-size:.95rem; box-shadow:0 4px 16px var(--glow-a);
}
.logo-text{
  background:linear-gradient(100deg,var(--acc2),var(--ok));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.head-mid{display:flex; gap:8px; flex:0 1 340px; min-width:0}
.head-right{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1 1 0}
body[data-screen="login"] .head-mid,
body[data-screen="game"] .head-mid{visibility:hidden}

.conn{
  display:flex; align-items:center; gap:7px; font-size:.75rem; color:var(--tx2);
  padding:6px 11px; border-radius:99px; background:var(--surface); border:1px solid var(--brd);
}
.conn-dot{width:7px; height:7px; border-radius:50%; background:var(--tx3); flex-shrink:0}
.conn-dot.ok{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.conn-dot.warn{background:var(--warn); animation:blink 1s infinite}
.conn-dot.bad{background:var(--bad)}
.ping{color:var(--tx3); font-variant-numeric:tabular-nums}
@keyframes blink{50%{opacity:.3}}

.user-chip{
  display:none; align-items:center; gap:9px; padding:5px 13px 5px 5px; cursor:default;
  background:var(--surface); border:1px solid var(--brd); border-radius:99px; font-size:.85rem; font-weight:600;
}
.user-chip.show{display:flex}
.avatar{
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  font-size:.72rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.menu-wrap{position:relative}
.menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:220px; z-index:80;
  background:var(--surface); border:1px solid var(--brd2); border-radius:var(--r2);
  box-shadow:0 22px 60px rgba(0,0,0,.45); overflow:hidden; padding:6px;
  display:none; animation:pop .16s cubic-bezier(.2,.9,.3,1);
}
.menu.open{display:block}
@keyframes pop{from{opacity:0; transform:translateY(-6px) scale(.97)}}
.menu-item{
  display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:10px;
  font-size:.87rem; font-weight:500; cursor:pointer;
}
.menu-item:hover{background:var(--surface2)}
.menu-item.danger{color:var(--bad)}
.menu-sep{height:1px; background:var(--brd); margin:5px 8px}

/* ── Tlačítka a pole ────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border:1px solid transparent; border-radius:11px; cursor:pointer;
  font:600 .88rem/1 var(--font); color:var(--tx); background:var(--surface2);
  transition:transform .13s cubic-bezier(.2,.9,.3,1),background .18s,box-shadow .18s,opacity .18s;
  white-space:nowrap;
}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--acc); color:#fff}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 24px var(--glow-a)}
.btn.ok{background:var(--ok); color:var(--bg)}
.btn.ok:hover:not(:disabled){box-shadow:0 8px 24px var(--glow-b)}
.btn.danger{background:var(--bad); color:#fff}
.btn.ghost{background:transparent; border-color:var(--brd2); color:var(--tx2)}
.btn.ghost:hover{background:var(--surface2); color:var(--tx)}
.btn.icon{width:38px; height:38px; padding:0; font-size:1rem; background:var(--surface); border:1px solid var(--brd)}
.btn.icon:hover{border-color:var(--brd2)}
.btn.big{padding:14px 24px; font-size:1rem; width:100%}
.btn.tiny{padding:4px 10px; font-size:.72rem; border-radius:8px}

input,select{
  padding:11px 14px; background:var(--bg2); color:var(--tx);
  border:1px solid var(--brd2); border-radius:11px; outline:none; width:100%;
  font:500 .9rem var(--font); transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus{border-color:var(--acc); box-shadow:0 0 0 3px var(--glow-a)}
input::placeholder{color:var(--tx3)}
input:disabled,select:disabled{opacity:.4; cursor:not-allowed}
#codeInput,#roomCodeInput{font-family:var(--font-display); letter-spacing:.16em; text-transform:uppercase; text-align:center}
#codeInput::placeholder{font-family:var(--font); letter-spacing:0; text-transform:none}
.sel{cursor:pointer}
.field{display:flex; flex-direction:column; gap:7px}
.field>span{font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tx2)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:11px}

/* ── Obrazovky ──────────────────────────────────────────── */
.view{display:none; flex:1; min-height:0; overflow:auto}
.view.active{display:block; animation:fadeIn .28s ease}
.view.center.active{display:grid; place-items:center; padding:24px}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}}

.sec-title{
  display:flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--tx2);
}
.sec-label{font-size:.78rem; font-weight:600; color:var(--tx2)}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent); animation:ripple 1.9s infinite;
}
@keyframes ripple{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ── Přihlašovací obrazovka ─────────────────────────────── */
.hero{max-width:640px; text-align:center; display:flex; flex-direction:column; gap:20px}
.hero h1{font-family:var(--font-display); font-size:clamp(1.9rem,5.4vw,3.1rem); line-height:1.14; font-weight:900}
.hero h1 span{
  background:linear-gradient(100deg,var(--acc2),var(--ok));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{color:var(--tx2); font-size:1rem; line-height:1.65; max-width:52ch; margin:0 auto}
.hero-start{display:flex; gap:10px; justify-content:center; max-width:420px; margin:0 auto; width:100%}
.hero-start input{text-align:center; font-size:1rem; padding:14px}
.hero-start .btn{padding:14px 26px; font-size:1rem; flex-shrink:0}
.hero-alt{font-size:.84rem; color:var(--tx3)}
.hero-alt a{color:var(--acc2); text-decoration:none; font-weight:600}
.hero-alt a:hover{text-decoration:underline}
.hero-themes{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px}

/* ── Hub ────────────────────────────────────────────────── */
.hub{max-width:1180px; margin:0 auto; padding:24px 26px 40px; display:flex; flex-direction:column; gap:26px}

.hero-card{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:22px 24px; border-radius:var(--r3);
  background:linear-gradient(125deg,var(--surface),color-mix(in srgb,var(--surface2) 70%,transparent));
  border:1px solid var(--brd); position:relative; overflow:hidden;
}
.hero-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 130% at 88% 0%,var(--glow-a),transparent 70%);
}
.hero-id{display:flex; align-items:center; gap:15px; flex:1; min-width:220px; position:relative}
.hero-avatar{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex-shrink:0;
  font-size:1.3rem; font-weight:800; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.3);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.hero-hi{font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx2); font-weight:600}
.hero-nick{font-family:var(--font-display); font-size:1.35rem; font-weight:900; line-height:1.2}
.hero-actions{display:flex; align-items:center; gap:20px; position:relative; flex-wrap:wrap}
.hero-stat{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px}
.hero-stat b{font-family:var(--font-display); font-size:1.15rem; font-weight:900; color:var(--acc2); font-variant-numeric:tabular-nums}
.hero-stat small{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); font-weight:600}

.hub-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.tabs{display:flex; gap:5px; padding:5px; background:var(--surface); border:1px solid var(--brd); border-radius:13px}
.tab{
  padding:8px 15px; border:none; border-radius:9px; cursor:pointer;
  font:600 .82rem var(--font); color:var(--tx2); background:transparent; transition:all .18s;
}
.tab:hover{color:var(--tx)}
.tab.active{background:var(--acc); color:#fff}
#gameSearch{max-width:260px; margin-left:auto}

.game-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px}

.game-card{
  --c:var(--acc);
  position:relative; overflow:hidden; cursor:pointer; isolation:isolate;
  background:var(--surface); border:1px solid var(--brd); border-radius:var(--r3);
  padding:26px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; min-height:214px;
  transition:transform .24s cubic-bezier(.2,.9,.3,1),border-color .24s,box-shadow .24s;
}
/* barevná záře podle hry */
.game-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5; transition:opacity .24s;
  background:radial-gradient(75% 58% at 50% -12%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);
}
/* přejezd lesku při hoveru */
.game-card::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--c) 16%,transparent),transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.game-card:hover{transform:translateY(-6px); border-color:color-mix(in srgb,var(--c) 45%,transparent); box-shadow:0 20px 46px rgba(0,0,0,.4)}
.game-card:hover::before{opacity:1}
.game-card:hover::after{left:125%}

.game-emoji{
  font-size:3rem; line-height:1; margin-bottom:2px;
  filter:drop-shadow(0 5px 14px color-mix(in srgb,var(--c) 55%,transparent));
  transition:transform .28s cubic-bezier(.2,1.4,.4,1);
}
.game-card:hover .game-emoji{transform:scale(1.16) rotate(-6deg)}
.game-title{font-weight:700; font-size:1.04rem}
.game-desc{font-size:.79rem; color:var(--tx3); line-height:1.45; flex:1}
.badges{display:flex; gap:5px; flex-wrap:wrap; justify-content:center}
.badge{
  font-size:.67rem; font-weight:600; padding:3px 9px; border-radius:99px;
  background:var(--surface2); border:1px solid var(--brd); color:var(--tx2);
}
.badge.hot{background:color-mix(in srgb,var(--c) 18%,transparent); border-color:color-mix(in srgb,var(--c) 40%,transparent); color:var(--tx)}

.game-card.soon{cursor:not-allowed; opacity:.5}
.game-card.soon:hover{transform:none; box-shadow:none; border-color:var(--brd)}
.game-card.soon:hover .game-emoji{transform:none}
.game-card.soon .game-emoji{filter:grayscale(.75)}
.soon-tag{
  position:absolute; top:12px; right:12px; font-size:.62rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:99px;
  background:var(--surface2); border:1px solid var(--brd2); color:var(--tx2);
}

/* ── Živé místnosti ─────────────────────────────────────── */
.room-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px}
.room-row{
  display:flex; align-items:center; gap:13px; padding:13px 16px; cursor:pointer;
  background:var(--surface); border:1px solid var(--brd); border-radius:var(--r2);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.room-row:hover{border-color:var(--acc); transform:translateX(3px); box-shadow:0 8px 22px rgba(0,0,0,.24)}
.room-emoji{font-size:1.6rem; flex-shrink:0}
.room-info{flex:1; min-width:0}
.room-title{font-weight:600; font-size:.92rem}
.room-meta{font-size:.74rem; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.room-count{
  font-family:var(--font-display); font-weight:900; font-size:.82rem; color:var(--ok);
  padding:5px 10px; border-radius:9px; background:color-mix(in srgb,var(--ok) 12%,transparent); flex-shrink:0;
}
.empty{
  grid-column:1/-1; padding:26px; text-align:center; font-size:.86rem; color:var(--tx3);
  border:1px dashed var(--brd2); border-radius:var(--r2);
}

/* ── Panel / čekárna ────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--brd); border-radius:var(--r3);
  padding:26px; display:flex; flex-direction:column; gap:14px; width:100%; max-width:470px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.panel h2,.panel h3{font-size:1.08rem; font-weight:700}
.row{display:flex; gap:10px; align-items:center}
.row>.btn{flex:1}
.row.between{justify-content:space-between}
.divider{position:relative; text-align:center; font-size:.75rem; color:var(--tx3); margin:2px 0}
.divider::before,.divider::after{content:''; position:absolute; top:50%; width:36%; height:1px; background:var(--brd)}
.divider::before{left:0} .divider::after{right:0}

.room-panel{max-width:530px; max-height:calc(100vh - 100px); overflow:auto}
.code{
  font-family:var(--font-display); font-size:2.7rem; font-weight:900; letter-spacing:.18em;
  text-align:center; color:var(--acc2); background:var(--bg2); border:1px solid var(--brd2);
  border-radius:var(--r2); padding:16px; cursor:pointer; user-select:all; transition:all .18s;
}
.code:hover{border-color:var(--acc); box-shadow:0 0 0 4px var(--glow-a)}
.code-hint{text-align:center; font-size:.72rem; color:var(--tx3); margin-top:-7px}

/* ── Volby před hrou ────────────────────────────────────── */
.opt-list{display:flex; flex-direction:column; gap:7px}
.opt-head{font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tx2)}
.opt{
  display:flex; align-items:flex-start; gap:10px; padding:10px 13px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--brd); border-radius:12px; transition:border-color .16s;
}
.opt:hover{border-color:var(--brd2)}
.opt:has(input:checked){border-color:var(--acc); background:color-mix(in srgb,var(--acc) 9%,var(--bg2))}
.opt input{width:17px; height:17px; margin-top:2px; accent-color:var(--acc); flex-shrink:0}
.opt-emoji{font-size:1.15rem; line-height:1.2}
.opt-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.opt-text b{font-size:.87rem; font-weight:600}
.opt-text small{font-size:.73rem; color:var(--tx3); line-height:1.35}

.opt.zamceno{opacity:.6; cursor:default}

/* Volba z možností – nastavuje se až v čekárně, kde je znám počet hráčů. */
.opt-panel{display:flex; flex-direction:column; gap:9px; text-align:left; margin-top:4px}
.opt-volba{
  background:var(--bg2); border:1px solid var(--brd); border-radius:12px; padding:9px 11px 11px;
}
.opt-volba.zamceno{opacity:.75}
.opt-label{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px}
.opt-label b{font-size:.85rem; font-weight:600}
.opt-label .zamek{font-size:.7rem; color:var(--warn)}
.opt-choices{display:flex; gap:6px; flex-wrap:wrap}
.opt-choice{
  flex:1 1 auto; min-width:96px; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:7px 10px; border-radius:10px; cursor:pointer; text-align:left;
  background:var(--surface); border:1px solid var(--brd); color:var(--tx1);
  font:inherit; transition:border-color .16s, background .16s;
}
.opt-choice:not(:disabled):hover{border-color:var(--brd2)}
.opt-choice.sel{
  border-color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,var(--surface));
}
.opt-choice:disabled{cursor:default; opacity:.55}
.opt-choice .oc-top{font-size:.83rem; font-weight:600}
.opt-choice small{font-size:.7rem; color:var(--tx3); line-height:1.3}
.opt-odhad{
  font-size:.78rem; color:var(--tx2); padding:7px 11px; border-radius:10px;
  background:color-mix(in srgb,var(--acc) 8%,transparent);
  border:1px dashed color-mix(in srgb,var(--acc) 30%,transparent);
}
.opt-odhad b{color:var(--acc2)}
.opt-odhad small{color:var(--tx3); font-size:.7rem}
.opt-pozn{font-size:.72rem; color:var(--tx3); text-align:center}

.opt-badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.opt-badge{
  font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:99px;
  background:color-mix(in srgb,var(--acc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent); color:var(--acc2);
}

.player-list{display:flex; flex-direction:column; gap:7px}
.player{
  display:flex; align-items:center; gap:11px; padding:10px 13px;
  background:var(--bg2); border:1px solid var(--brd); border-radius:12px; transition:opacity .2s;
}
.player.off{opacity:.45}
.p-avatar{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background:var(--surface2); font-size:.75rem; font-weight:800;
}
.p-name{flex:1; font-size:.88rem; font-weight:500; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tag{font-size:.62rem; font-weight:800; padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.05em}
.tag.host{background:color-mix(in srgb,var(--acc) 22%,transparent); color:var(--acc2)}
.tag.bot{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.tag.off{background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad)}
.wait{text-align:center; font-size:.85rem; color:var(--acc2); font-weight:600}

.chat{display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--brd); padding-top:13px}
.chat-log{
  height:150px; overflow-y:auto; padding:2px 2px 0;
  display:flex; flex-direction:column; gap:3px;
}
.bubble{
  max-width:78%; padding:8px 13px; border-radius:17px; font-size:.84rem; line-height:1.4;
  word-break:break-word; animation:bubbleIn .22s cubic-bezier(.2,.9,.3,1);
}
.bubble.them{align-self:flex-start; background:var(--surface2); color:var(--tx); border-bottom-left-radius:6px}
.bubble.me{align-self:flex-end; background:var(--acc); color:#fff; border-bottom-right-radius:6px}
/* jen první bublina série má "ocásek", navazující jsou plynulé */
.bubble.them:not(.first){border-bottom-left-radius:17px; border-top-left-radius:6px}
.bubble.me + .bubble.me{border-top-right-radius:6px; border-bottom-right-radius:17px}
.bubble.me:last-child{border-bottom-right-radius:6px}
.bubble .who{
  display:block; font-size:.66rem; font-weight:800; color:var(--acc2);
  margin-bottom:2px; letter-spacing:.02em;
}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px) scale(.96)}}

/* ── Herní obrazovka ────────────────────────────────────── */
#view-game.active{display:block; position:relative}
.stage{position:absolute; inset:0}
.stage canvas{width:100%; height:100%}
.hud{position:absolute; inset:0; padding:15px; pointer-events:none; z-index:10}
.hud-row{
  display:flex; align-items:center; justify-content:center; gap:20px; width:fit-content; margin:0 auto;
  background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(14px);
  border:1px solid var(--brd); border-radius:99px; padding:10px 22px; font-size:.88rem;
}
.hud-seat{display:flex; align-items:center; gap:8px; color:var(--tx2); font-weight:600; opacity:.5; transition:opacity .2s}
.hud-seat.active{opacity:1; color:var(--tx)}
.hud-seat .mark{font-size:1.05rem; font-weight:900; color:var(--c); line-height:1}
.hud-seat.active .mark{text-shadow:0 0 12px var(--c)}
.hud-turn{font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--acc2)}
.leave-btn{position:absolute; top:15px; right:15px; z-index:20}

/* ── HUD arény ──────────────────────────────────────────── */
.ar-top{display:flex; gap:9px; justify-content:center}
.ar-chip{
  display:flex; align-items:center; gap:6px; padding:8px 15px; border-radius:99px;
  background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(12px);
  border:1px solid var(--brd); font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.ar-chip.dim{color:var(--tx3); font-weight:500; font-size:.74rem}
.ar-chip.high{
  color:var(--ok); border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,color-mix(in srgb,var(--bg) 74%,transparent));
}
.ar-chip.exposed{
  color:var(--bad); border-color:color-mix(in srgb,var(--bad) 60%,transparent);
  background:color-mix(in srgb,var(--bad) 15%,color-mix(in srgb,var(--bg) 74%,transparent));
  animation:blink .5s infinite;
}

/* zbraň a zásobník */
.ar-gun{
  position:absolute; left:50%; bottom:52px; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px; padding:8px 16px; border-radius:99px;
  background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(12px);
  border:1px solid var(--brd); font-size:.82rem; white-space:nowrap;
}
.ar-gun.reloading{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.ar-gun-name{font-weight:700}
.ar-gun-txt{color:var(--tx3); font-size:.74rem; font-variant-numeric:tabular-nums}
.ar-mag{display:flex; gap:4px}
.ar-mag i{
  width:8px; height:15px; border-radius:3px; display:block;
  background:var(--brd2); transition:background .12s;
}
.ar-mag i.on{background:var(--warn); box-shadow:0 0 7px color-mix(in srgb,var(--warn) 60%,transparent)}
.ar-reload{
  width:104px; height:7px; border-radius:99px; overflow:hidden;
  background:var(--brd2); display:block;
}
.ar-reload i{display:block; height:100%; background:var(--warn); border-radius:99px}

/* ── Hlášení blížící se katastrofy ──────────────────────── */
/* Pulzuje plynule po celou dobu hlášení. Element se vytváří jen při
   změně druhu pohromy, takže se animace nerestartuje – dokud se
   přestavoval s HUDem, cukalo to 15× za sekundu. */
.ar-alert{
  position:absolute; left:50%; top:62px; z-index:12; pointer-events:none;
  display:flex; align-items:center; gap:13px; padding:11px 24px; border-radius:99px;
  background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(14px);
  border:1.5px solid currentColor; white-space:nowrap;
  transform-origin:center;
  animation:alertPulse 1.15s ease-in-out infinite;
}
.ar-alert.flood{color:#8fd0ff}
.ar-alert.meteors{color:var(--warn)}
.ar-alert.storm{color:var(--acc2)}
.ar-alert.zombies{color:#8fd06a}
.ar-alert-ico{font-size:1.35rem; line-height:1}
.ar-alert-txt{
  font-family:var(--font-display); font-weight:900; font-size:.86rem; letter-spacing:.05em;
}
@keyframes alertPulse{
  0%,100%{ transform:translateX(-50%) scale(1);     opacity:.82; box-shadow:0 0 0 0 transparent }
  50%    { transform:translateX(-50%) scale(1.035); opacity:1;   box-shadow:0 0 22px -2px currentColor }
}

/* barevný nádech po okrajích, ať to jde vidět i koutkem oka */
.ar-alert-edge{
  position:absolute; inset:0; pointer-events:none; z-index:11;
  animation:edgeBreathe 1.15s ease-in-out infinite;
}
.ar-alert-edge.flood{box-shadow:inset 0 0 120px 12px rgba(47,127,216,.55)}
.ar-alert-edge.meteors{box-shadow:inset 0 0 120px 12px color-mix(in srgb,var(--bad) 55%,transparent)}
.ar-alert-edge.storm{box-shadow:inset 0 0 120px 12px color-mix(in srgb,var(--acc) 55%,transparent)}
.ar-alert-edge.zombies{box-shadow:inset 0 0 120px 12px rgba(91,156,70,.6)}
@keyframes edgeBreathe{0%,100%{opacity:.18} 50%{opacity:.6}}

/* stav událostí */
.ar-events{
  position:absolute; right:15px; top:64px; display:flex; flex-direction:column; gap:7px; align-items:flex-end;
}
.ev{
  padding:6px 13px; border-radius:99px; font-size:.75rem; font-weight:700;
  background:color-mix(in srgb,var(--bg) 76%,transparent); backdrop-filter:blur(12px);
  border:1px solid var(--brd); color:var(--tx2); white-space:nowrap;
}
.ev.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.ev.warn{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ev.bad{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 55%,transparent); animation:blink .8s infinite}
.ar-drown{
  position:absolute; left:50%; top:96px; transform:translateX(-50%);
  padding:9px 20px; border-radius:99px; font-size:.9rem; font-weight:800;
  background:color-mix(in srgb,#2f7fd8 26%,color-mix(in srgb,var(--bg) 72%,transparent));
  border:1px solid #8fd0ff; color:#cfeaff; animation:blink .7s infinite; white-space:nowrap;
}

/* aktivní power-upy */
.ar-buffs{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:7px;
}
.ar-buff{
  display:flex; align-items:center; gap:7px; padding:6px 12px 6px 8px; border-radius:99px;
  background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--acc2);
}
.ar-buff span{font-size:1rem}

.ar-hp{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px; width:min(300px,52vw);
}
.ar-hp-bar{
  flex:1; height:11px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb,var(--bg) 80%,transparent); border:1px solid var(--brd2);
}
.ar-hp-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--bad),var(--warn),var(--ok));
  transition:width .18s ease;
}
.ar-hp span{font-family:var(--font-display); font-weight:900; font-size:1.05rem; min-width:34px}

.ar-dead{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center;
  background:color-mix(in srgb,var(--bad) 9%,transparent);
}
.ar-dead-t{font-family:var(--font-display); font-size:2.1rem; font-weight:900; color:var(--bad)}
.ar-dead-s{color:var(--tx2); font-size:.92rem; font-variant-numeric:tabular-nums}

.ar-board{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(16px);
  border:1px solid var(--brd2); border-radius:var(--r2); padding:18px 22px; min-width:330px;
}
.ar-board table{border-collapse:collapse; width:100%; font-size:.86rem}
.ar-board th{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx3);
  text-align:left; padding:0 10px 8px; font-weight:700;
}
.ar-board td{padding:6px 10px; border-top:1px solid var(--brd)}
.ar-board td:nth-child(1){color:var(--tx3); width:26px}
.ar-board td:nth-child(3),.ar-board td:nth-child(4){text-align:right; font-variant-numeric:tabular-nums}
.ar-board td:nth-child(3){color:var(--ok); font-weight:800}
.ar-board tr.me td{color:var(--acc2); font-weight:700}

.overlay{
  position:absolute; inset:0; display:none; place-items:center; z-index:40;
  background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(7px);
}
.overlay.open{display:grid; animation:fadeIn .22s ease}
.overlay.hard{position:fixed; background:color-mix(in srgb,var(--bg) 92%,transparent); flex-direction:column}
.over-panel{max-width:390px; text-align:center; align-items:center}
.over-title{font-family:var(--font-display); font-size:1.75rem; font-weight:900}
.over-title.win{color:var(--ok)} .over-title.lose{color:var(--bad)}
.over-reason{color:var(--tx2); font-size:.9rem}
.count-num{font-family:var(--font-display); font-size:7rem; font-weight:900; color:var(--acc2); line-height:1}
.count-label{color:var(--tx2); font-size:1rem; text-align:center}

/* ── Volba motivu ───────────────────────────────────────── */
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px}
.theme-card{
  padding:13px; border-radius:var(--r2); cursor:pointer; text-align:left;
  border:1.5px solid var(--brd); background:var(--t-bg); transition:transform .18s,border-color .18s;
  display:flex; flex-direction:column; gap:9px;
}
.theme-card:hover{transform:translateY(-3px); border-color:var(--brd2)}
.theme-card.active{border-color:var(--t-acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--t-acc) 26%,transparent)}
.theme-top{display:flex; align-items:center; gap:8px}
.theme-name{font-size:.86rem; font-weight:700; color:var(--t-tx)}
.theme-note{font-size:.66rem; color:var(--t-tx2)}
.theme-swatches{display:flex; gap:5px}
.theme-swatches i{width:100%; height:16px; border-radius:5px; display:block}
.theme-check{margin-left:auto; color:var(--t-acc); font-weight:900}

/* mini přepínač na přihlašovací obrazovce */
.theme-mini{
  width:30px; height:30px; border-radius:9px; cursor:pointer; border:1.5px solid var(--brd2);
  background:linear-gradient(135deg,var(--m1),var(--m2)); transition:transform .18s,border-color .18s;
}
.theme-mini:hover{transform:scale(1.14)}
.theme-mini.active{border-color:var(--tx); transform:scale(1.14)}

/* ── Závody ────────────────────────────────── */
.rc-hud{
  position:absolute; left:16px; bottom:16px; display:flex; gap:10px; pointer-events:none;
}
.rc-big{
  background:color-mix(in srgb,var(--bg) 74%,transparent); border:1px solid var(--brd2);
  border-radius:11px; padding:7px 14px; text-align:center; min-width:72px; backdrop-filter:blur(6px);
}
.rc-big b{display:block; font-family:var(--font-display); font-weight:900; font-size:1.35rem; color:var(--tx); line-height:1.1}
.rc-big span{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx3)}

/* Pod tlačítkem „Opustit hru“, jinak se překrývají. */
.rc-board{
  position:absolute; right:16px; top:64px; border-collapse:collapse; pointer-events:none;
  background:color-mix(in srgb,var(--bg) 74%,transparent); border:1px solid var(--brd2);
  border-radius:11px; overflow:hidden; backdrop-filter:blur(6px); font-size:.82rem;
}
.rc-board td{padding:5px 11px; color:var(--tx2); white-space:nowrap}
.rc-board td:first-child{font-family:var(--font-display); font-weight:900; color:var(--tx3); text-align:right}
.rc-board tr.me td{color:var(--tx); font-weight:700; background:color-mix(in srgb,var(--acc) 16%,transparent)}
.rc-board i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px}

/* Semafor místo číselného odpočtu. Žárovky se rozsvěcují po jedné,
/* Stavěcí panel – ruka dílů, past a potvrzení. */
.rc-build{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:9px; align-items:center; z-index:7;
  background:color-mix(in srgb,var(--bg) 84%,transparent); border:1px solid var(--brd2);
  border-radius:14px; padding:12px 16px; backdrop-filter:blur(8px); max-width:min(680px,94vw);
}
.rc-build.hidden{display:none}
.rc-bhead{font-size:.86rem; color:var(--tx2)}
.rc-bhead b{color:var(--tx)}
.rc-bhead small{color:var(--tx3); margin-left:6px}

.rc-dily{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.rc-dily button{
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  background:var(--surface); border:2px solid var(--brd); border-radius:11px;
  padding:7px 10px; min-width:72px; color:var(--tx); transition:border-color .15s, transform .15s;
}
.rc-dily button i{font-style:normal; font-size:1.35rem; line-height:1}
.rc-dily button span{font-size:.66rem; color:var(--tx3); white-space:nowrap}
.rc-dily button:hover:not(:disabled){transform:translateY(-2px); border-color:var(--brd2)}
.rc-dily button.sel{border-color:var(--acc); background:color-mix(in srgb,var(--acc) 16%,var(--surface))}
.rc-dily button:disabled{opacity:.32; cursor:not-allowed}
.rc-nic{color:var(--tx3); font-size:.78rem; font-style:italic; padding:8px; flex-basis:100%; text-align:center}

.rc-past{display:flex; gap:6px; align-items:center; font-size:.78rem; color:var(--tx2)}
.rc-past button{
  background:var(--bg2); border:1px solid var(--brd); border-radius:7px;
  padding:3px 10px; font-size:.74rem; color:var(--tx2); cursor:pointer;
}
.rc-past button.sel{border-color:var(--acc); color:var(--tx)}

.rc-polozit{
  background:var(--ok); color:var(--bg); border:none; border-radius:10px;
  padding:8px 26px; font-weight:800; font-size:.9rem; cursor:pointer;
}
.rc-polozit:disabled{opacity:.4; cursor:not-allowed}


   při startu všechny zeleně. Žívá mimo #hud, aby ho jeho překreslování
   nerestartovalo – to byl důvod, proč původní odpočet blikal. */
.rc-lights{
  position:absolute; top:9%; left:50%; transform:translateX(-50%);
  display:flex; gap:14px; padding:14px 18px; pointer-events:none; z-index:6;
  background:#0d0f12; border:3px solid #23262b; border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.06);
}
.rc-lights.hidden{display:none}
.rc-lights i{
  width:clamp(26px,4.2vmin,46px); height:clamp(26px,4.2vmin,46px); border-radius:50%;
  background:#2a1012; box-shadow:inset 0 3px 7px rgba(0,0,0,.8);
  transition:background .12s, box-shadow .12s;
}
.rc-lights i.on{
  background:radial-gradient(circle at 38% 32%, #ff8a8a, #e01b1b 62%, #7a0d0d);
  box-shadow:0 0 22px rgba(224,27,27,.85), inset 0 2px 5px rgba(255,255,255,.35);
}
/* Start: všechno zeleně a celý semafor odjede nahoru. */
.rc-lights.jed{animation:rcGo 1.3s ease forwards}
.rc-lights.jed i.on{
  background:radial-gradient(circle at 38% 32%, #a8ffb0, #16c02c 62%, #0a6b18);
  box-shadow:0 0 26px rgba(22,192,44,.9), inset 0 2px 5px rgba(255,255,255,.35);
}
@keyframes rcGo{
  0%{transform:translateX(-50%) scale(1); opacity:1}
  55%{transform:translateX(-50%) scale(1.12); opacity:1}
  100%{transform:translateX(-50%) translateY(-70px) scale(.9); opacity:0}
}

.rc-closing{
  position:absolute; top:16px; left:50%; transform:translateX(-50%); pointer-events:none;
  background:color-mix(in srgb,var(--bad) 82%,transparent); color:#fff; font-weight:800;
  padding:7px 18px; border-radius:20px; font-size:.86rem; animation:rcPulse 1s ease-in-out infinite;
}
@keyframes rcPulse{50%{opacity:.55}}

.rc-warn.hidden,.rc-closing.hidden{display:none}
.rc-warn{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%); pointer-events:none;
  color:var(--warn); font-weight:800; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.rc-keys{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); pointer-events:none;
  color:var(--tx3); font-size:.72rem; white-space:nowrap;
}

@media(max-width:900px){
  .rc-board{font-size:.72rem; right:8px; top:8px}
  .rc-hud{left:8px; bottom:44px; gap:6px}
  .rc-big{min-width:56px; padding:5px 9px}
  .rc-keys{display:none}
}

/* ── Dostihy a sázky ────────────────────────────────────── */
/* Deska má vlastní pevnou paletu, ne barvy motivu. Je to herní stůl –
   sukno, pergamenová pole a zlatý rám vypadají stejně v Půlnoci i
   v Arktidě, protože takhle vypadá skutečná deska. Motiv hubu zůstává
   všude kolem (hlavička, hubové modály). */
.dh{
  --f1:#2a5c32;          /* sukno – světlejší střed */
  --f2:#153a1c;          /* sukno – okraj */
  --f3:#0c2412;          /* stín pod rámem */
  --wood:#4a2f16;        /* mantinel */
  --parch:#f2e8d0;       /* pergamen polí */
  --parch2:#e8d8b4;      /* rohy a neutrální pole */
  --parch3:#d9c9a4;
  --ink:#1a1208;
  --ink2:#5a4a2e;
  --gold:#c8920a;
  --gold2:#e8b020;
  --gold3:#f5cc50;
  --line:#6b5420;        /* spáry mezi poli */

  position:absolute; inset:0; z-index:12; display:flex; gap:14px; padding:14px;
  pointer-events:auto; overflow:hidden;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:1rem; color:var(--parch);
  background:
    repeating-linear-gradient(48deg,  rgba(255,255,255,.022) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-48deg, rgba(0,0,0,.030)       0 2px, transparent 2px 4px),
    radial-gradient(120% 90% at 50% 42%, var(--f1) 0%, var(--f2) 58%, var(--f3) 100%),
    var(--f2);
  box-shadow:inset 0 0 0 9px var(--wood), inset 0 0 0 11px var(--gold),
             inset 0 0 90px rgba(0,0,0,.55);
}

.dh-side{
  width:236px; flex-shrink:0; display:flex; flex-direction:column; gap:9px; min-height:0;
}
.dh-label{
  font-family:"Playfair Display",Georgia,serif;
  font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold3); padding-bottom:5px; border-bottom:1px solid rgba(200,146,10,.4);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.dh-players{display:flex; flex-direction:column; gap:7px; overflow-y:auto; flex-shrink:0; max-height:46%}
/* Hráči leží na sukně jako pergamenové karty. */
.dh-p{
  background:linear-gradient(160deg,var(--parch) 0%,var(--parch3) 100%);
  border:1px solid #b9a271; border-radius:5px; color:var(--ink);
  padding:8px 11px; cursor:pointer; position:relative;
  box-shadow:0 3px 7px rgba(0,0,0,.45); transition:transform .16s, box-shadow .16s;
}
.dh-p:hover{transform:translateY(-2px); box-shadow:0 6px 13px rgba(0,0,0,.5)}
.dh-p.on{border-color:var(--gold2); box-shadow:0 0 0 2px var(--gold2), 0 6px 14px rgba(0,0,0,.5)}
.dh-p.held{border-color:#a33; box-shadow:0 0 0 2px rgba(170,50,50,.7), 0 4px 9px rgba(0,0,0,.45)}
.dh-p.out{opacity:.45; filter:grayscale(.8)}
.dh-pname{display:flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:var(--ink)}
.dh-pname i{width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.dh-pmoney{
  font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:1.12rem;
  color:#7a5200; margin-top:1px;
}
.dh-pmeta{font-size:.76rem; color:var(--ink2)}
.dh-pgroups{display:flex; gap:3px; margin-top:4px; flex-wrap:wrap}
.dh-pgroups b{width:13px; height:13px; border-radius:2px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.dh-tag{display:inline-block; font-size:.74rem; font-weight:700; margin-top:2px; color:var(--ink2)}
.dh-tag.bad{color:#a02020}
.dh-tag.bot{color:#1c5a8a}
/* Protokol je zápisník položený na stole. */
.dh-log{
  flex:1; min-height:0; overflow-y:auto; color:#2a2114; line-height:1.45;
  background:
    repeating-linear-gradient(180deg,transparent 0 21px,rgba(107,84,32,.14) 21px 22px),
    linear-gradient(160deg,var(--parch) 0%,var(--parch3) 100%);
  border:1px solid #b9a271; border-radius:4px; padding:9px 11px; font-size:.86rem;
  box-shadow:0 3px 9px rgba(0,0,0,.45);
}

.dh-boardwrap{flex:1; display:grid; place-items:center; min-width:0; min-height:0}
/* Rám desky: dřevo → zlato → tmavá linka, ať to má hloubku jako krabice. */
.dh-board{
  display:grid; grid-template-columns:1.9fr repeat(9,1fr) 1.9fr;
  grid-template-rows:1.9fr repeat(9,1fr) 1.9fr; gap:1px;
  width:min(78vh, 100%); height:min(78vh, 100%); aspect-ratio:1;
  background:var(--line); border:3px solid var(--gold); border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 7px var(--wood), 0 0 0 8px #2b1a0c,
             0 22px 55px rgba(0,0,0,.62), inset 0 0 40px rgba(0,0,0,.25);
}
.dh-cell{
  background:var(--parch); color:var(--ink);
  position:relative; display:flex; flex-direction:column;
  overflow:hidden; cursor:default; min-width:0; min-height:0;
}
.dh-cell.dh-corner, .dh-cell.dh-start, .dh-cell.dh-card, .dh-cell.dh-tax{background:var(--parch2)}
.dh-cell.dh-horse, .dh-cell.dh-trainer, .dh-cell.dh-service{cursor:pointer}
.dh-cell.dh-horse:hover, .dh-cell.dh-trainer:hover, .dh-cell.dh-service:hover{filter:brightness(.93)}
.dh-strip{flex-shrink:0}
/* Barevny pruh miri vzdy do stredu desky. Bez toho pruhy horni rady
   a bocnich sloupcu koukaly ven a deska nevypadala jako deska. */
.dh-cell.dh-side-b{flex-direction:column}
.dh-cell.dh-side-t{flex-direction:column-reverse}
.dh-cell.dh-side-l{flex-direction:row-reverse}
.dh-cell.dh-side-r{flex-direction:row}
.dh-side-b>.dh-strip{height:21%; width:100%; border-bottom:1px solid rgba(0,0,0,.45)}
.dh-side-t>.dh-strip{height:21%; width:100%; border-top:1px solid rgba(0,0,0,.45)}
.dh-side-l>.dh-strip{width:21%; height:100%; border-left:1px solid rgba(0,0,0,.45)}
.dh-side-r>.dh-strip{width:21%; height:100%; border-right:1px solid rgba(0,0,0,.45)}
/* V levem sloupci sedi pruh vpravo, tak zetony pres nej nesmi lezt. */
.dh-side-l .dh-tokens{right:auto; left:2px; justify-content:flex-start}
.dh-cbody{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2px; gap:1px}
.dh-cname{
  font-family:"Playfair Display",Georgia,serif; font-weight:700;
  font-size:clamp(6px,.98vmin,10px); text-align:center; line-height:1.15; color:var(--ink);
}
.dh-cprice{font-size:clamp(5px,.82vmin,9px); color:#6b5a3a; font-weight:600}
.dh-cico{font-size:clamp(10px,1.7vmin,18px)}
.dh-clabel{
  font-family:"Playfair Display",Georgia,serif; font-weight:900;
  font-size:clamp(7px,1.08vmin,11px); letter-spacing:.05em;
  text-align:center; padding:6px; color:#7a2b12; align-self:center; margin:auto;
}
.dh-pot{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:clamp(6px,.9vmin,10px);
  color:#1c4a22; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.2);
  padding:2px 6px; border-radius:3px; white-space:nowrap;
}
.dh-owner{
  position:absolute; bottom:0; left:0; width:100%; height:7px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4); transition:background .3s;
}
.dh-tokens{position:absolute; top:2px; right:2px; display:flex; gap:1px; flex-wrap:wrap; width:20px; justify-content:flex-end}
.dh-tokens b{width:5px; height:5px; border-radius:50%; background:var(--gold); display:block; box-shadow:0 0 0 .5px rgba(0,0,0,.5)}
.dh-tokens b.stable{width:9px; height:6px; border-radius:1px; background:#8e2020}
.dh-token{
  position:absolute; width:22%; height:22%; max-width:15px; max-height:15px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 2px 4px rgba(0,0,0,.55); transition:left .3s, top .3s;
}

/* Střed stolu – tmavší sukno uvnitř desky. */
.dh-center{
  grid-column:2/11; grid-row:2/11;
  background:
    repeating-linear-gradient(48deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    radial-gradient(120% 100% at 50% 40%, #2f6538 0%, #17401f 62%, #0d2712 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:12px;
  box-shadow:inset 0 0 0 1px rgba(200,146,10,.55), inset 0 0 0 4px rgba(0,0,0,.35),
             inset 0 0 70px rgba(0,0,0,.6);
}
.dh-logo{
  display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;
  transform:rotate(-7deg); pointer-events:none; user-select:none;
}
.dh-logo b{
  font-family:"Playfair Display",Georgia,serif; font-weight:900; letter-spacing:.14em;
  font-size:clamp(15px,2.9vmin,34px);
  background:linear-gradient(180deg,var(--gold3) 0%,var(--gold) 55%,#8a6407 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dh-logo span{
  font-size:clamp(8px,1.15vmin,14px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold2); opacity:.85; padding-left:.42em;
}
/* Mosazný štítek s aktuálním výkupním kurzem – podle něj se rozhoduje,
   jestli teď prodat, nebo počkat na lepší kolo. */
.dh-rate{
  font-family:"Cormorant Garamond",Georgia,serif; font-size:.86rem; color:var(--parch);
  background:rgba(0,0,0,.32); border:1px solid rgba(200,146,10,.55); border-radius:3px;
  padding:3px 11px; margin-bottom:2px; white-space:nowrap;
}
.dh-rate b{font-family:"Playfair Display",Georgia,serif; color:var(--gold3); font-size:1rem}
.dh-rate small{color:rgba(242,232,208,.55)}

.dh-die{
  width:54px; height:54px; display:grid; place-items:center; font-size:40px; line-height:1;
  background:linear-gradient(160deg,#fdfaf2,#ddd2b8); border:2px solid #b9a271;
  border-radius:9px; color:#1a1208; box-shadow:0 5px 12px rgba(0,0,0,.5);
}
.dh-die.roll{animation:dhRoll .45s ease}
@keyframes dhRoll{0%{transform:rotate(-20deg) scale(1.15)}50%{transform:rotate(18deg) scale(.9)}100%{transform:none}}
.dh-buy{display:none; text-align:center}
.dh-buy.open{display:block}
.dh-buyname{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:.95rem; color:var(--parch)}
.dh-buyprice{font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:1.3rem; color:var(--gold3)}
.dh-acts{display:flex; flex-direction:column; gap:7px; width:min(230px,90%)}
.dh-timer{font-size:.82rem; color:rgba(242,232,208,.65); font-style:italic}

/* Tlačítka jako mosazné štítky. */
.dh-btn{
  padding:8px 16px; border-radius:4px; cursor:pointer; white-space:nowrap;
  font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:.92rem;
  background:linear-gradient(180deg,var(--gold3),var(--gold) 55%,#9a7008);
  border:1px solid #7a5806; color:#2a1c02;
  box-shadow:0 3px 7px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .14s, filter .14s;
}
.dh-btn:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.08)}
.dh-btn:disabled{opacity:.42; cursor:not-allowed; box-shadow:none}
.dh-btn.ok{background:linear-gradient(180deg,#5eaa5e,#2f7a35 55%,#1d5423); border-color:#164a1c; color:#f2f8f0}
.dh-btn.blue{background:linear-gradient(180deg,#6f9fd8,#2f6ba8 55%,#1e4c7c); border-color:#193f66; color:#f0f6fc}
.dh-btn.red{background:linear-gradient(180deg,#d06a6a,#a02828 55%,#761a1a); border-color:#5e1414; color:#fdf2f2}
.dh-btn.gray{background:linear-gradient(180deg,#efe6cf,#cdbf9d); border-color:#9c8a63; color:#3a2f18; box-shadow:0 2px 5px rgba(0,0,0,.35)}

/* Karty pozemků – líc jako skutečná karta ze hry. */
.dh-modal{
  position:absolute; inset:0; z-index:30; display:none; place-items:center; padding:18px;
  background:rgba(8,26,14,.72); backdrop-filter:blur(4px); overflow-y:auto;
}
.dh-modal.open{display:grid}
.dh-card{
  background:linear-gradient(165deg,var(--parch) 0%,var(--parch3) 100%); color:var(--ink);
  border:1px solid #8a7444; border-radius:4px; width:min(300px,100%); overflow:hidden;
  box-shadow:0 0 0 3px var(--gold), 0 24px 55px rgba(0,0,0,.6);
}
.dh-chead{padding:11px; display:flex; flex-direction:column; align-items:center; gap:2px; border-bottom:1px solid rgba(0,0,0,.35)}
.dh-chead small{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9)}
.dh-chead b{font-family:"Playfair Display",Georgia,serif; font-size:1.25rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dh-cbody2{padding:12px 14px}
.dh-cfoot{padding:0 14px 14px; display:flex; flex-direction:column; gap:7px}
.dh-own{
  display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700;
  background:rgba(107,84,32,.14); border-radius:3px; padding:5px 9px; margin-bottom:9px; color:var(--ink);
}
.dh-own.free{color:#1c5a24}
.dh-own i{width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.dh-toks{display:flex; gap:4px; justify-content:center; min-height:12px; align-items:center; margin-bottom:8px}
.dh-toks b{width:11px; height:11px; border-radius:50%; background:var(--gold); display:block; box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.dh-toks b.stable{width:18px; height:11px; border-radius:2px; background:#8e2020}
.dh-toks.small b{width:8px; height:8px}
.dh-tags{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-bottom:7px}
.dh-tags span{font-size:.76rem; background:rgba(107,84,32,.16); border-radius:3px; padding:2px 7px; color:#5a4a2e}
.dh-tags span.hi{font-weight:700; color:var(--ink)}
.dh-rent{width:100%; border-collapse:collapse; font-size:.84rem}
.dh-rent td{padding:3px 5px; border-top:1px solid rgba(107,84,32,.3); color:#4a3c22}
.dh-rent td:last-child{text-align:right; font-weight:700; color:var(--ink)}
.dh-rent tr.cur{background:rgba(200,146,10,.28)}
.dh-rent tr.cur td{color:#6b4a00; font-weight:800}
.dh-desc{font-size:.88rem; color:#5a4a2e; text-align:center; line-height:1.5; margin:8px 0; font-style:italic}
.dim{color:rgba(242,232,208,.6); font-style:italic; font-size:.85rem}

.dh-prof{
  background:linear-gradient(165deg,var(--parch) 0%,var(--parch3) 100%); color:var(--ink);
  border:1px solid #8a7444; border-radius:5px; width:min(600px,100%); padding:20px;
  max-height:100%; overflow-y:auto; box-shadow:0 0 0 3px var(--gold), 0 24px 55px rgba(0,0,0,.6);
}
.dh-prof.narrow{width:min(380px,100%)}
.dh-phead{display:flex; align-items:center; gap:12px; padding-bottom:13px; border-bottom:1px solid rgba(107,84,32,.35); margin-bottom:13px}
.dh-pav{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:"Playfair Display",Georgia,serif; font-weight:900; color:#fff; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.6), 0 3px 7px rgba(0,0,0,.4);
}
.dh-pn{font-family:"Playfair Display",Georgia,serif; font-size:1.15rem; font-weight:900; color:var(--ink)}
.dh-pm{font-family:"Playfair Display",Georgia,serif; font-size:1.25rem; font-weight:900; color:#7a5200}
.dh-phead .dh-btn{margin-left:auto}
.dh-stats{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.dh-stats>div{flex:1; min-width:88px; background:rgba(107,84,32,.13); border:1px solid rgba(107,84,32,.3); border-radius:4px; padding:7px; text-align:center}
.dh-stats b{display:block; font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:1.05rem; color:#7a5200}
.dh-stats span{font-size:.72rem; color:#5a4a2e}
.dh-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; margin-bottom:14px}
.dh-mini{background:rgba(255,255,255,.4); border:1px solid rgba(107,84,32,.32); border-radius:3px; overflow:hidden}
.dh-mhead{font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.95); padding:4px; text-align:center}
.dh-mbody{padding:7px}
.dh-mname{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:.88rem; text-align:center; margin-bottom:4px; color:var(--ink)}
.dh-input{
  margin-bottom:10px; text-align:center; font-family:"Playfair Display",Georgia,serif; font-weight:700;
  background:rgba(255,255,255,.55); border:1px solid #9c8a63; color:var(--ink);
}
.dh-checks{
  display:flex; flex-direction:column; gap:4px; max-height:190px; overflow-y:auto;
  background:rgba(255,255,255,.4); border:1px solid rgba(107,84,32,.32);
  border-radius:4px; padding:7px; margin-bottom:11px;
}
.dh-checks label{display:flex; align-items:center; gap:7px; font-size:.86rem; cursor:pointer; color:var(--ink)}
.dh-checks i{width:11px; height:11px; border-radius:2px; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.dh-checks small{color:#6b5a3a; margin-left:auto}
.dh-row{display:flex; gap:8px}
.dh-row .dh-btn{flex:1}
.dh-offer{background:rgba(200,146,10,.18); border-left:3px solid var(--gold); border-radius:3px; padding:8px 11px; font-weight:700; font-size:.92rem; margin-bottom:10px; color:var(--ink)}

.dh-toast{
  position:absolute; bottom:18px; left:50%; transform:translate(-50%,20px);
  background:linear-gradient(165deg,var(--parch),var(--parch3)); color:var(--ink);
  border:1px solid #8a7444; border-radius:4px; padding:11px 20px; z-index:32;
  text-align:center; max-width:340px; box-shadow:0 0 0 2px var(--gold), 0 14px 32px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .28s, transform .28s;
}
.dh-toast.open{opacity:1; transform:translate(-50%,0)}
.dh-tt{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#8a6407; margin-bottom:4px; font-weight:700}
.dh-tx{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:.98rem; line-height:1.35}
.dh-tv{font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:1.2rem; margin-top:5px; color:#7a5200}

.dh-banner{
  position:absolute; right:14px; bottom:14px; z-index:28; display:none;
  flex-direction:column; gap:7px; width:min(290px,60vw);
  background:linear-gradient(165deg,var(--parch),var(--parch3)); color:var(--ink);
  border:1px solid #8a7444; border-radius:4px; padding:12px;
  box-shadow:0 0 0 2px var(--gold), 0 14px 32px rgba(0,0,0,.55);
}
.dh-banner.open{display:flex}
.dh-bhead{font-size:.9rem; line-height:1.4}
.dh-boffer{display:flex; flex-direction:column; gap:5px; background:rgba(107,84,32,.14); border-radius:3px; padding:7px; font-size:.86rem}
.dh-banner .dim{color:#6b5a3a}

@media(max-width:900px){
  .dh{flex-direction:column; padding:8px; gap:8px; box-shadow:inset 0 0 0 5px var(--wood), inset 0 0 0 6px var(--gold), inset 0 0 60px rgba(0,0,0,.5)}
  .dh-side{width:auto; flex-direction:row; max-height:110px}
  .dh-players{flex-direction:row; max-height:none; flex:1}
  .dh-p{min-width:130px}
  .dh-log{display:none}
  .dh-board{width:min(92vw,72vh); height:min(92vw,72vh); box-shadow:0 0 0 4px var(--wood), 0 0 0 5px #2b1a0c, 0 14px 32px rgba(0,0,0,.55)}
}


/* ── Šachy ─────────────────────────────────────────────── */
.ch{
  position:absolute; inset:0; z-index:12; display:flex; gap:16px; padding:16px;
  pointer-events:auto; overflow:hidden;
}
.ch-side{width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; min-height:0}
.ch-label{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx2); padding-bottom:4px; border-bottom:1px solid var(--brd);
}
.ch-hraci{display:flex; flex-direction:column; gap:6px}
.ch-hrac{
  display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1.5px solid var(--brd); border-radius:10px; padding:8px 11px; font-size:.86rem;
}
.ch-hrac.on{border-color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,var(--surface))}
.ch-hrac i{width:14px; height:14px; border-radius:3px; flex-shrink:0; border:1px solid var(--brd2)}
.ch-hrac i.bila{background:#f0e9dd}
.ch-hrac i.cerna{background:#2a2622}

.ch-zajate{display:flex; flex-direction:column; gap:3px}
.ch-zrada{font-size:1.35rem; line-height:1.2; letter-spacing:-2px; min-height:26px}
.ch-zrada.bily{color:#f0e9dd}
.ch-zrada.cerny{color:#8a8480}

.ch-log{
  flex:1; min-height:0; overflow-y:auto; background:var(--bg2); border:1px solid var(--brd);
  border-radius:9px; padding:8px 10px; font-size:.8rem; color:var(--tx2); line-height:1.7;
}
.ch-log span{color:var(--tx3); display:inline-block; min-width:26px}
.ch-log b{color:var(--tx); font-weight:600}

.ch-deskawrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:0}
.ch-stav{
  display:flex; align-items:baseline; gap:10px;
  background:var(--surface); border:1px solid var(--brd2); border-radius:10px; padding:7px 16px;
}
.ch-stav b{font-size:.95rem}
.ch-stav small{color:var(--tx3); font-size:.75rem}
.ch-stav.muj{border-color:var(--ok)}

/* Barvy desčice přicházejí z vybraného motivu jako proměnné. */
.ch-deska{
  --sv:#ebecd0; --tm:#779556; --ram:#5c7043;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  width:min(70vh,100%); height:min(70vh,100%); aspect-ratio:1;
  border:4px solid var(--ram); border-radius:5px; overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
.ch-pole{position:relative; display:grid; place-items:center; cursor:pointer}
.ch-pole.svetle{background:var(--sv)}
.ch-pole.tmave{background:var(--tm)}
.ch-fig{
  width:86%; height:86%; user-select:none; -webkit-user-drag:none; pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

.ch-pole.posledni{box-shadow:inset 0 0 0 4px rgba(255,214,64,.55)}
.ch-pole.vybrane{box-shadow:inset 0 0 0 4px var(--acc)}
.ch-pole.sach{box-shadow:inset 0 0 0 5px var(--bad)}

/* Tečka = kam smíš táhnout, kroužek = tam něco sebereš. */
.ch-tecka{display:none; position:absolute; pointer-events:none}
.ch-pole.cil .ch-tecka{
  display:block; width:26%; height:26%; border-radius:50%;
  background:rgba(20,20,20,.34);
}
.ch-pole.cil.bral .ch-tecka{
  width:84%; height:84%; background:none; border-radius:50%;
  border:5px solid rgba(20,20,20,.34);
}

/* Vzhled desky – malé dlaždice pod šachovnicí. */
.ch-motivy{display:flex; gap:8px}
.ch-motivy button{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--surface); border:2px solid var(--brd); border-radius:9px;
  padding:5px 10px; color:var(--tx2); font-size:.72rem;
}
.ch-motivy button:hover{border-color:var(--brd2)}
.ch-motivy button.sel{border-color:var(--acc); color:var(--tx)}
.ch-motivy i{width:16px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.35)}

.ch-promo{position:absolute; inset:0; z-index:30; display:grid; place-items:center;
  background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(5px)}
.ch-promo.hidden{display:none}
.ch-promobox{
  background:var(--surface); border:2px solid var(--brd2); border-radius:14px;
  padding:18px 22px; text-align:center; font-size:.9rem;
}
.ch-promorada{display:flex; gap:10px; margin-top:12px}
.ch-promorada button{
  display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  background:var(--bg2); border:2px solid var(--brd); border-radius:11px;
  padding:10px 14px; font-size:2rem; line-height:1; color:var(--tx);
}
.ch-promorada button:hover{border-color:var(--acc)}
.ch-promorada span{font-size:.62rem; color:var(--tx3)}

@media(max-width:900px){
  .ch{flex-direction:column; padding:8px; gap:8px}
  .ch-side{width:auto; flex-direction:row; max-height:96px}
  .ch-log{display:none}
  .ch-deska{width:min(94vw,58vh); height:min(94vw,58vh)}
  .ch-motivy button span{display:none}
}


/* ── Modály a toasty ────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:16px;
  background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(6px);
}
.modal.open{display:grid; animation:fadeIn .2s ease}
.modal .panel{max-width:420px; max-height:90vh; overflow:auto}
.modal .panel.wide{max-width:560px}

#toasts{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:9px}
.toast{
  display:flex; align-items:center; gap:10px; padding:12px 17px; max-width:330px;
  background:var(--surface); border:1px solid var(--brd2); border-left-width:3px; border-radius:var(--r);
  font-size:.86rem; box-shadow:0 14px 36px rgba(0,0,0,.42); transition:opacity .25s;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1);
}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--acc)}
@keyframes toastIn{from{opacity:0; transform:translateX(20px)}}

/* ── Mobil ──────────────────────────────────────────────── */
/* Pod ~900 px se logo + kód + ovládání na jeden řádek nevejdou a hlavička
   se přeplní. Kód dostane vlastní řádek dřív, než začne cokoliv přetékat. */
@media(max-width:900px){
  header{flex-wrap:wrap; height:auto; padding:11px 16px}
  .logo{flex:0 0 auto}
  .head-mid{order:3; flex:1 1 100%}
  .head-right{flex:1 1 auto}
}
@media(max-width:820px){
  .hub{padding:18px 16px 32px; gap:20px}
  .hero-card{padding:18px}
  .hero-actions{width:100%; justify-content:space-between}
  #gameSearch{max-width:none; margin-left:0; order:3; width:100%}
  .room-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  header{padding:10px 14px; gap:9px}
  .head-right{gap:7px}
  #userName,#connText{display:none}
  .user-chip{padding:5px}
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .game-card{min-height:184px; padding:20px 14px 16px}
  .game-emoji{font-size:2.5rem}
  .code{font-size:2.1rem}
  .count-num{font-size:5rem}
  #toasts{left:14px; right:14px; bottom:14px}
  .toast{max-width:none}
}