/* Barevné profily jsou stejné jako u Kostek, aby obě hry vypadaly jako jedna rodina.
   Mění se pozadí (--felt*), hlavní tlačítka (--gold*) a potvrzení (--act*). */
:root{
  --felt1:#1d6b40; --felt2:#0d3b24;
  --gold:#f2c14e; --gold2:#c99a2e; --gold-ink:#3a2c00;
  --act1:#49c97c; --act2:#2e8b57; --act-ink:#04220f;
  --ink:#1b1b1b; --cream:#fdf8ee;
  --tile:#fbf6e9; --tile2:#e6dfcc;
}
:root[data-theme="modra"]{ --felt1:#2166a0; --felt2:#08243d; --gold:#ffd166; --gold2:#d9a52e; --gold-ink:#33280a; --act1:#5cbdf0; --act2:#2a72a8; --act-ink:#04202f; }
:root[data-theme="ruzova"]{ --felt1:#c05a92; --felt2:#45102f; --gold:#ffd15c; --gold2:#dba634; --gold-ink:#3d2a00; --act1:#ff8fbf; --act2:#c74e8b; --act-ink:#40001c; }
:root[data-theme="oranzova"]{ --felt1:#d1741f; --felt2:#452007; --gold:#ffe08a; --gold2:#e8b34d; --gold-ink:#452a00; --act1:#57c98a; --act2:#2f8a5c; --act-ink:#042215; }
:root[data-theme="hneda"]{ --felt1:#7d5734; --felt2:#2b190c; --gold:#e8c48a; --gold2:#bf9257; --gold-ink:#3a2409; --act1:#7dc79a; --act2:#3d7d5a; --act-ink:#062117; }
:root[data-theme="cervena"]{ --felt1:#ad3434; --felt2:#3d0c0c; --gold:#f2c14e; --gold2:#c99a2e; --gold-ink:#3a2c00; --act1:#49c97c; --act2:#2e8b57; --act-ink:#04220f; }

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:radial-gradient(circle at 50% 20%, var(--felt1), var(--felt2) 75%);
  background-attachment:fixed;
  color:var(--cream); min-height:100dvh; touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
}
.screen{display:none; min-height:100dvh; flex-direction:column; align-items:center;
  padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));}
.screen.active{display:flex;}
h1{font-family:Georgia,'Times New Roman',serif; letter-spacing:1px; margin:8px 0 2px;
   color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.5); font-size:32px;}
.sub{opacity:.75; margin:0 0 16px; font-size:14px; text-align:center;}
.sub a, .hintline a{color:var(--gold);}
.card{background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:18px; width:100%; max-width:460px; box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(4px);}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; flex-wrap:wrap;}
.label{font-size:14px; opacity:.85;}
.seg{display:flex; background:rgba(0,0,0,.35); border-radius:12px; padding:4px; gap:4px;}
.seg button{border:0; border-radius:9px; padding:8px 11px; font-size:14px; font-weight:700;
  background:transparent; color:var(--cream); cursor:pointer;}
.seg button.on{background:var(--gold); color:var(--gold-ink);}
.names input{width:100%; margin:5px 0; padding:11px 13px; font-size:16px; border-radius:11px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.92); color:var(--ink);}
.codeinput{text-transform:uppercase; letter-spacing:8px; text-align:center; font-size:26px !important;
  font-weight:800; font-family:Georgia,serif;}
.btn{display:block; width:100%; border:0; border-radius:14px; padding:14px; font-size:17px;
  font-weight:800; cursor:pointer; margin-top:10px; box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .08s, filter .15s; white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn:disabled{filter:grayscale(.7) brightness(.6); cursor:default;}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:var(--gold-ink);}
.btn.green{background:linear-gradient(180deg,var(--act1),var(--act2)); color:var(--act-ink);}
.btn.ghost{background:rgba(255,255,255,.12); color:var(--cream); box-shadow:none;}
.btn.small{padding:9px; font-size:14px; margin-top:8px;}
.err{color:#ffb3a8; font-size:13px; min-height:18px; margin-top:8px; text-align:center;}
.orline{display:flex; align-items:center; gap:10px; margin:16px 0 10px; opacity:.5; font-size:12px;
  text-transform:uppercase; letter-spacing:1px;}
.orline::before,.orline::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.2);}
.hintline{font-size:12px; opacity:.65; text-align:center; margin:10px 0 0; line-height:1.5;}
.waitline{font-size:13px; opacity:.65; text-align:center; margin-top:10px;}

.themerow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;}
.themepicker{display:flex; gap:8px; flex-wrap:wrap;}
.swatch{width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.25); box-shadow:0 2px 6px rgba(0,0,0,.4);}
.swatch.on{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.swatch[data-theme="zelena"]{background:linear-gradient(135deg,#1d6b40,#0d3b24);}
.swatch[data-theme="modra"]{background:linear-gradient(135deg,#2166a0,#08243d);}
.swatch[data-theme="ruzova"]{background:linear-gradient(135deg,#c05a92,#45102f);}
.swatch[data-theme="oranzova"]{background:linear-gradient(135deg,#d1741f,#452007);}
.swatch[data-theme="hneda"]{background:linear-gradient(135deg,#7d5734,#2b190c);}
.swatch[data-theme="cervena"]{background:linear-gradient(135deg,#ad3434,#3d0c0c);}
.toggle{border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:var(--cream);
  border-radius:11px; padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer;}
.toggle.off{opacity:.55;}

/* ---------- čekárna ---------- */
.bigcode{font-family:Georgia,serif; font-size:50px; font-weight:800; letter-spacing:10px;
  color:var(--gold); text-shadow:0 3px 10px rgba(0,0,0,.5); margin:0 0 14px; padding-left:10px;}
.plist{margin:12px 0 4px;}
.prow{display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:rgba(0,0,0,.25); border-radius:11px; padding:9px 12px; margin:6px 0; font-size:15px;}
.prow i, .mrow i{opacity:.55; font-style:normal; font-size:12px;}
.prow .tags{display:flex; align-items:center; gap:6px;}
.prow .tags b{font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--gold);}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;
  background:#8b8b8b; vertical-align:middle;}
.dot.on{background:#49c97c;}
.mb-act{border:0; background:rgba(255,255,255,.14); color:var(--cream); border-radius:7px;
  padding:2px 7px; font-size:12px; cursor:pointer;}

/* ---------- hra ---------- */
#game{padding-top:8px; justify-content:flex-start;}
.gametop{width:100%; max-width:640px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.turninfo .who{font-size:19px; font-weight:800; color:var(--gold);}
.turninfo .tgt{font-size:12px; opacity:.7;}
.mini{background:rgba(0,0,0,.45); border:1px solid rgba(242,193,78,.3); border-radius:11px;
  padding:6px 9px; font-size:11px; min-width:150px; max-width:52vw;}
.mrow{display:flex; justify-content:space-between; gap:8px; padding:1px 0; align-items:center;}
.mrow.cur{color:var(--gold); font-weight:800;}
.mrow .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.mrow .tl{opacity:.8; white-space:nowrap;}
.mrow .sc{min-width:32px; text-align:right; font-variant-numeric:tabular-nums;}

.boardwrap{width:100%; max-width:640px; flex:0 1 auto; min-height:120px; margin-top:8px;
  background:rgba(0,0,0,.22); border:1px dashed rgba(255,255,255,.18); border-radius:14px;
  padding:8px; overflow-y:auto; max-height:46dvh;}
.board{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;}
.boardempty{opacity:.45; font-size:13px; padding:16px; width:100%; text-align:center;}
.set{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:11px;
  padding:5px 6px; cursor:pointer;}
.set.bad{border-color:#e0644f; background:rgba(224,100,79,.14);}
/* když hráč něco drží v ruce, sady se nabízejí jako cíl */
.board.dropping .set:not(.newset){border-color:var(--gold); border-style:dashed;}
.set-tiles{display:flex; gap:3px;}
.set-note{font-size:10px; color:#ffb3a8; margin-top:3px; text-align:center;}
.set.newset{display:flex; align-items:center; justify-content:center; min-width:110px;
  color:var(--cream); font-size:13px; font-weight:700; border-style:dashed; opacity:.5;}
.set.newset.ready{opacity:1; border-color:var(--gold); color:var(--gold);}

.held{display:none; width:100%; max-width:640px; margin-top:8px; padding:7px 9px;
  background:rgba(242,193,78,.14); border:1px solid var(--gold); border-radius:11px;
  align-items:center; gap:5px; flex-wrap:wrap;}
.held.show{display:flex;}
.held-label{font-size:12px; font-weight:800; color:var(--gold);}
.held-hint{font-size:11px; opacity:.7; width:100%;}

.status{width:100%; max-width:640px; min-height:34px; margin:8px 0 2px; font-size:13px;
  text-align:center; color:#d9f2df;}
.status.bad{color:#ffb3a8;}

#game .actions{width:100%; max-width:640px; display:flex; gap:8px;}
#game .actions .btn{margin-top:6px;}

.rackwrap{width:100%; max-width:640px; margin-top:10px; background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:8px;}
.rack-head{display:flex; justify-content:space-between; font-size:11px; opacity:.65; margin-bottom:6px;}
.rack{display:flex; flex-wrap:wrap; gap:5px; justify-content:center;}

/* ---------- kameny ---------- */
.tile{
  width:40px; height:52px; border-radius:7px; position:relative; cursor:pointer;
  background:linear-gradient(160deg, var(--tile), var(--tile2));
  box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; font-family:Georgia,serif; color:#222;
  transition:transform .1s;
}
.tile:active{transform:translateY(-2px);}
.tile.small{width:32px; height:42px; font-size:19px; border-radius:6px;}
.tile.locked{cursor:default;}
.tile.c-cerna{color:#1a1a1a;}
.tile.c-oranzova{color:#d2761a;}
.tile.c-modra{color:#1f66ad;}
.tile.c-cervena{color:#c62f2f;}
.tile.joker{color:#c9a227; background:linear-gradient(160deg,#fff8dc,#e8d9a8);}
.tile i{position:absolute; right:2px; bottom:1px; font-size:9px; font-style:normal; opacity:.55; font-family:sans-serif;}

/* ---------- konec partie ---------- */
.trophy{font-size:56px; margin:6px 0;}
.winner{font-size:26px; font-weight:800; color:var(--gold); text-align:center; overflow-wrap:anywhere;}
.standings{width:100%; max-width:460px; margin-top:8px;}
.st-row{display:flex; justify-content:space-between; gap:10px; background:rgba(0,0,0,.28);
  border-radius:11px; padding:9px 13px; margin:6px 0; font-size:15px;}
.st-row.first{background:rgba(242,193,78,.18); border:1px solid rgba(242,193,78,.5);}
.st-row i{display:block; font-style:normal; font-size:11px; opacity:.6;}
.st-num{text-align:right; white-space:nowrap;}
.st-num i{font-size:11px; opacity:.6;}
.endbtns{width:100%; max-width:460px;}

/* ---------- ostatní ---------- */
.modal{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); padding:16px;}
.modal.show{display:flex;}
.modal .card{max-height:84dvh; overflow-y:auto;}
.rules{font-size:13px; opacity:.85; line-height:1.6;}
#connbar{position:fixed; left:0; right:0; bottom:0; z-index:75; display:none;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.75); color:#ffe9b0; font-size:13px; text-align:center;
  border-top:1px solid rgba(242,193,78,.3);}
#connbar.show{display:block;}
#connbar.lost{color:#ffb3a8; cursor:pointer;}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90;
  background:rgba(0,0,0,.85); color:var(--cream); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:10px 16px; font-size:14px; max-width:90vw; text-align:center;}

@media (max-width:380px){
  .tile{width:34px; height:46px; font-size:21px;}
  .tile.small{width:28px; height:37px; font-size:16px;}
}