/* Barevné profily. Volba je jen na daném zařízení (localStorage), mění se
   pozadí (--felt*), hlavní tlačítka (--gold*) a potvrzovací tlačítko (--act*). */
:root{
  --felt1:#1d6b40; --felt2:#0d3b24;
  --gold:#f2c14e; --gold2:#c99a2e; --gold-ink:#3a2c00;
  --act1:#49c97c; --act2:#2e8b57; --act-ink:#04220f;
  --ink:#1b1b1b; --cream:#fdf8ee;
}
: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% 25%, 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:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + 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:34px;}
.sub{opacity:.75; margin:0 0 18px; font-size:14px; text-align:center;}
.card{
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:18px; width:100%; max-width:420px;
  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:9px 13px; font-size:15px; font-weight:700;
  background:transparent; color:var(--cream); cursor:pointer;}
.seg button.on{background:var(--gold); color:var(--gold-ink); box-shadow:0 2px 8px rgba(0,0,0,.4);}
.stepper{display:flex; align-items:center; gap:12px;}
.stepper button{width:40px; height:40px; border-radius:50%; border:0; font-size:22px; font-weight:800;
  background:var(--gold); color:var(--gold-ink); cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.4);}
.stepper button:disabled{opacity:.35; cursor:default;}
.stepper .num{font-size:24px; font-weight:800; width:28px; text-align:center;}
.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);}
.btn{display:block; width:100%; border:0; border-radius:14px; padding:15px; font-size:18px;
  font-weight:800; cursor:pointer; margin-top:12px; letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(0,0,0,.4); transition:transform .08s, filter .15s;}
.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:10px; font-size:15px; margin-top:8px;}

/* ---------- HRA ---------- */
#game{padding-top:10px;}
.topbar{width:100%; max-width:460px; display:flex; justify-content:space-between; align-items:flex-start;}
.turninfo{padding:4px 2px; max-width:60%;}
.turninfo .who{font-size:20px; font-weight:800; color:var(--gold); overflow-wrap:anywhere;}
.turninfo .tgt{font-size:12px; opacity:.7;}

#miniboard{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right)); z-index:40;
  background:rgba(0,0,0,.55); border:1px solid rgba(242,193,78,.35);
  border-radius:12px; padding:8px 10px; font-size:12px; min-width:120px; max-width:44vw;
  box-shadow:0 4px 14px rgba(0,0,0,.45); backdrop-filter:blur(4px); display:none;
}
#miniboard .mb-title{font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:.6; margin-bottom:4px;}
#miniboard .mb-row{display:flex; justify-content:space-between; gap:10px; padding:1.5px 0;}
#miniboard .mb-row.cur{color:var(--gold); font-weight:800;}
#miniboard .mb-row{align-items:center;}
#miniboard .mb-row .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#miniboard .mb-row .nm i{font-style:normal; opacity:.6; font-size:11px;}
#miniboard .mb-row .pts{font-variant-numeric:tabular-nums;}

.kepttray{
  width:100%; max-width:460px; min-height:64px; margin-top:6px;
  background:rgba(0,0,0,.25); border:1px dashed rgba(255,255,255,.22); border-radius:14px;
  padding:8px 10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.kepttray .kt-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.6; width:100%;}
.kepttray .hint{opacity:.4; font-size:13px;}
.turnscore{width:100%; max-width:460px; text-align:center; margin:10px 0 2px; font-size:15px;}
.turnscore b{color:var(--gold); font-size:22px; font-variant-numeric:tabular-nums;}
.selinfo{min-height:38px; font-size:14px; color:#ffe9b0; text-align:center; margin-bottom:4px;}
.selinfo.bad{color:#ffb3a8;}

.dicearea{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  width:100%; max-width:340px; margin:10px auto; justify-items:center;}
.die{
  width:86px; height:86px; 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:12px; transition:transform .12s, box-shadow .15s, opacity .2s;
}
.die .pip{display:flex; align-items:center; justify-content:center;}
.die .pip i{width:13px; height:13px; 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:44px; height:44px; border-radius:9px; padding:6px; cursor:default;
  box-shadow:0 3px 7px rgba(0,0,0,.45);}
.die.small .pip i{width:7px; height:7px;}
.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);}
}
.die.rolling{animation:shake .12s infinite;}
.actions{width:100%; max-width:420px; display:flex; gap:10px;}
/* popisky jako „HODIT VŠEMI 6" nebo „ZAPSAT 1 000" se musí vejít na jeden řádek */
.actions .btn{margin-top:8px; font-size:16px; letter-spacing:0; white-space:nowrap; padding:15px 8px;}
.gamefoot{width:100%; max-width:420px; display:flex; gap:10px;}

/* spáleno */
#farkle{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(120,10,0,.55); backdrop-filter:blur(2px);}
#farkle.show{display:flex;}
#farkle .fk{font-family:Georgia,serif; font-size:52px; font-weight:800; color:#fff;
  text-shadow:0 0 30px #ff3b00, 0 4px 10px rgba(0,0,0,.6); letter-spacing:3px;
  animation:pop .4s ease-out; text-align:center; padding:16px;}
#farkle .fk small{display:block; font-size:16px; letter-spacing:1px; opacity:.85; font-family:inherit;}
/* animovaný „HA HA HA" — GIF má průhledné pozadí, sedí rovnou na červené hlášce */
#farkle .fk-gif{display:block; width:min(78vw, 420px); height:auto; margin:10px auto 6px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
@keyframes pop{0%{transform:scale(.3); opacity:0;} 70%{transform:scale(1.15);} 100%{transform:scale(1); opacity:1;}}

/* modály */
.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:82dvh; overflow-y:auto;}
table.lb{width:100%; border-collapse:collapse; font-size:14px;}
table.lb th{font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.55; text-align:left; padding:4px 6px;}
table.lb th.r,table.lb td.r{text-align:right;}
table.lb td{padding:6px; border-top:1px solid rgba(255,255,255,.08); font-variant-numeric:tabular-nums;}
table.lb td.rank{width:26px; opacity:.6;}
table.lb td.date{opacity:.6; font-size:12px; white-space:nowrap;}
table.lb td{vertical-align:middle;}
table.lb td.avg{color:var(--gold); font-weight:800;}
.hofnote{font-size:12px; opacity:.6; line-height:1.5; margin:6px 0 4px;}
.help-table{width:100%; font-size:14px; border-collapse:collapse; margin-top:10px;}
.help-table td{padding:4px 6px; border-top:1px solid rgba(255,255,255,.08);}
.help-table td:last-child{text-align:right; color:var(--gold); font-weight:700;}
.rules{font-size:13px; opacity:.8; line-height:1.55;}

/* konec hry */
#gameover .trophy{font-size:64px; margin:6px 0;}
#gameover .winner{font-size:28px; font-weight:800; color:var(--gold);
  text-shadow:0 2px 8px rgba(0,0,0,.5); text-align:center; overflow-wrap:anywhere;}
.standings{width:100%; max-width:420px; margin-top:8px;}
.standings .st-row{display:flex; justify-content:space-between; gap:10px; background:rgba(0,0,0,.28);
  border-radius:11px; padding:10px 14px; margin:6px 0; font-size:16px;}
.standings .st-row.first{background:rgba(242,193,78,.18); border:1px solid rgba(242,193,78,.5);}
.standings .st-row span:first-child{overflow-wrap:anywhere;}
.standings .st-num{display:flex; align-items:baseline; gap:8px; white-space:nowrap;}
.standings .st-num i{font-style:normal; font-size:12px; opacity:.6;}
.newrec{margin-top:8px; color:var(--gold); font-weight:700; font-size:15px; text-align:center;}
.endbtns{width:100%; max-width:420px;}

.confetti{position:fixed; top:-12px; z-index:80; font-size:20px; animation:fall linear forwards; pointer-events:none;}
@keyframes fall{to{transform:translateY(110dvh) rotate(720deg); opacity:.7;}}

/* ---------- barevné profily ---------- */
.themerow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px;}
.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;}
.themepicker{display:flex; gap:8px; flex-wrap:wrap;}
.swatch{width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,.25); box-shadow:0 2px 6px rgba(0,0,0,.4); padding:0;}
.swatch.on{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.4);}
.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);}

/* ---------- poslední kolo ---------- */
.lastround{display:none; width:100%; max-width:460px; margin-top:8px; padding:7px 12px;
  background:rgba(0,0,0,.35); border:1px solid var(--gold); border-radius:11px;
  color:var(--gold); font-size:13px; font-weight:700; text-align:center;}

/* ---------- rozcestník, online obrazovky ---------- */
.hintline{font-size:12px; opacity:.6; text-align:center; margin:6px 0 14px; line-height:1.6;}
.hintline a{color:var(--gold);}
.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);}
.err{color:#ffb3a8; font-size:13px; min-height:18px; margin-top:8px; text-align:center;}
.codeinput{text-transform:uppercase; letter-spacing:8px; text-align:center; font-size:26px !important;
  font-weight:800; font-family:Georgia,serif;}
.bigcode{font-family:Georgia,serif; font-size:52px; 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{opacity:.55; font-style:normal; font-size:13px;}
.prow .tags{display:flex; align-items:center; gap:6px;}
.prow .tags b{font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); opacity:.85;}
.waitline{font-size:13px; opacity:.65; text-align:center; margin-top:10px;}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;
  background:#8b8b8b; box-shadow:0 0 0 2px rgba(0,0,0,.25); 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 6px; margin-left:6px; font-size:12px; cursor:pointer;}
.mb-act:active{background:rgba(255,255,255,.3);}

#connbar{position:fixed; left:0; right:0; bottom:0; z-index:75; display:none;
  padding:9px calc(12px + env(safe-area-inset-left)) 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;
  box-shadow:0 6px 18px rgba(0,0,0,.5); animation:toastin .2s ease-out;}
@keyframes toastin{from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);}}

@media (prefers-reduced-motion: reduce){
  .die.rolling{animation:none;}
  .confetti{display:none;}
  #farkle .fk{animation:none;}
}
@media (max-width:360px){
  .die{width:74px; height:74px;}
  .dicearea{gap:12px;}
}