/* 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;}
.offlinenote{display:none; font-size:12px; line-height:1.5; text-align:center; margin:10px 0 2px;
  padding:8px 10px; border-radius:11px; color:#ffe9b0;
  background:rgba(0,0,0,.35); border:1px solid rgba(242,193,78,.4);}
.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;}

.die{
  width:56px; height:56px; border-radius:16px; position:relative; cursor:pointer;
  background:linear-gradient(145deg,#ffffff,#e8e4d8);
  box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.15), inset 0 2px 3px #fff;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:8px; transition:transform .12s, box-shadow .15s, opacity .2s;
}
.die .pip{display:flex; align-items:center; justify-content:center;}
.die .pip i{width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4a4a,#111);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35);}
.die.small{width:38px; height:38px; border-radius:7px; padding:5px; cursor:default;
  box-shadow:0 3px 7px rgba(0,0,0,.45);}
.die.small .pip i{width:6px; height:6px;}
.die.sel{transform:translateY(-8px) scale(1.05);
  box-shadow:0 12px 20px rgba(0,0,0,.55), 0 0 0 4px var(--gold), inset 0 2px 3px #fff;}
.die.locked{cursor:default;}
/* neutrální, ať sedí ke každému barevnému profilu */
.die.unrolled{background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(0,0,0,.3)); cursor:default;}
.die.unrolled .q{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; color:rgba(255,255,255,.5); font-weight:800;}
@keyframes shake{
  0%{transform:rotate(0) translate(0,0);} 25%{transform:rotate(8deg) translate(2px,-3px);}
  50%{transform:rotate(-7deg) translate(-2px,2px);} 75%{transform:rotate(5deg) translate(1px,-1px);}
  100%{transform:rotate(0) translate(0,0);}
}

/* ---------- 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;}
.pot{background:rgba(0,0,0,.45); border:1px solid var(--gold); border-radius:12px;
  padding:6px 12px; text-align:center; min-width:96px;}
.pot b{display:block; font-size:22px; color:var(--gold); font-variant-numeric:tabular-nums;}
.pot span{font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:.7;}

.seats{width:100%; max-width:640px; margin-top:8px; display:flex; flex-wrap:wrap; gap:6px;}
.seat{flex:1 1 45%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:7px 9px; font-size:13px; min-width:140px;}
.seat.cur{border-color:var(--gold); background:rgba(242,193,78,.14);}
.seat.folded{opacity:.45;}
.seat .nm{font-weight:700; display:flex; justify-content:space-between; gap:6px;}
.seat .chips{color:var(--gold); font-variant-numeric:tabular-nums;}
.seat .info{font-size:11px; opacity:.75; margin-top:2px; display:flex; gap:6px; flex-wrap:wrap;}
.seat .btn-mark{background:var(--gold); color:var(--gold-ink); border-radius:50%;
  width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800;}
.seat .hidden-dice{display:inline-flex; gap:2px;}
.hidden-die{width:13px; height:13px; border-radius:3px; background:linear-gradient(145deg,#6b6b6b,#3a3a3a);
  border:1px solid rgba(255,255,255,.25);}

.tablearea{width:100%; max-width:640px; margin-top:10px; padding:10px;
  background:rgba(0,0,0,.25); border:1px dashed rgba(255,255,255,.2); border-radius:14px;
  display:flex; gap:8px; justify-content:center; align-items:center; min-height:76px; flex-wrap:wrap;}
.tablearea .label{width:100%; text-align:center; font-size:10px; text-transform:uppercase;
  letter-spacing:1px; opacity:.55;}

.myarea{width:100%; max-width:640px; margin-top:10px; padding:10px;
  background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.14); border-radius:14px;}
.myarea .head{display:flex; justify-content:space-between; font-size:11px; opacity:.7; margin-bottom:8px;}
.mydice{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
/* po položení: co hraje a co šlo stranou */
.die.inplay{box-shadow:0 6px 14px rgba(0,0,0,.5), 0 0 0 3px var(--gold), inset 0 2px 3px #fff;}
.die.aside{opacity:.32; filter:grayscale(.6);}

.besthand{margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.12);}
.bh-note{font-size:11px; opacity:.6; text-align:center; line-height:1.5;}
.bh-dice{display:flex; gap:4px; justify-content:center; margin:6px 0 4px; flex-wrap:wrap;}
.bh-value{font-size:12px; text-align:center; opacity:.8;}
.bh-value.good{color:var(--gold); font-weight:700; opacity:1;}

.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; flex-wrap:wrap;}
#game .actions .btn{margin-top:6px; flex:1 1 30%;}

.showdown{width:100%; max-width:640px; margin-top:8px;}
.sdrow{background:rgba(0,0,0,.3); border-radius:11px; padding:8px 10px; margin:6px 0;}
.sdrow.win{background:rgba(242,193,78,.18); border:1px solid rgba(242,193,78,.5);}
.sdrow .top{display:flex; justify-content:space-between; font-size:14px; font-weight:700;}
.sdrow .hand{display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; align-items:center;}
.sdrow .val{font-size:12px; opacity:.8; margin-top:3px;}
.sdrow.mine{border:1px solid rgba(255,255,255,.35);}
.sdrow .legend{font-size:10px; opacity:.55; display:flex; align-items:center; gap:4px;}
.sdrow .legend .mark{display:inline-block; width:10px; height:10px; border-radius:2px;
  background:#fbf6e9; border-bottom:3px solid var(--gold);}
/* kostky, které kombinaci tvoří — lehce obarvené, ať jsou vidět na první pohled */
.die.scoring{background:linear-gradient(145deg,#d8f3df,#a9dcbb);
  box-shadow:0 3px 7px rgba(0,0,0,.45), 0 0 0 2px #4fae72;}
.die.fromtable{border-bottom:3px solid var(--gold);}

.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);}
.endbtns{width:100%; max-width:460px;}

.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;}
.rules table{width:100%; font-size:13px; border-collapse:collapse; margin:8px 0;}
.rules td{padding:3px 5px; border-top:1px solid rgba(255,255,255,.08);}
.rules td:last-child{text-align:right; color:var(--gold); font-weight:700;}
#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;}