/* ── Kostkový poker: the board on paper, the pot, the tray, the turn ──── */
.dpoker-root{
  position:absolute;inset:0;
  display:flex;flex-direction:column;min-height:0;
}

/* the paper: a row per player with the hand made this round */
.dpoker-sheet{
  flex:0 1 auto;min-height:0;
  width:calc(100% - 20px);max-width:34rem;margin:8px auto 0;
  background:var(--ivory);color:var(--ink);border-radius:18px;
  overflow:auto;overscroll-behavior:contain;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7);
}
.dpoker-board{list-style:none;margin:0;padding:0}
.dpoker-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;
  min-height:clamp(40px,6.4vh,58px);padding:.25rem .9rem .25rem .8rem;
  border-bottom:1px solid var(--rule);
  transition:background-color .25s,box-shadow .25s;
}
.dpoker-row.me{background:rgba(118,176,67,.22)}
.dpoker-row.now{box-shadow:inset 4px 0 0 var(--accent-dark)}
.dpoker-row.won{background:rgba(118,176,67,.5)}
.dpoker-row.away .ava,.dpoker-row.away .dpoker-name{opacity:.45}
.dpoker-row.out .ava,.dpoker-row.out .dpoker-name,.dpoker-row.out .dpoker-stack{opacity:.4}
.dpoker-row .ava{
  width:32px;height:32px;font-size:.95rem;
  color:var(--ivory);background-color:var(--ink);box-shadow:none;
}
.dpoker-row .ava .chipico{width:17px;height:17px;right:-5px;bottom:-4px;padding:2px;box-shadow:0 0 0 1px var(--rule)}
.dpoker-who{display:grid;gap:.18rem;min-width:0}
.dpoker-name{font-size:.9rem;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpoker-row.now .dpoker-name{color:var(--accent-deep)}
.dpoker-row.final .dpoker-name{color:var(--cherry)}
/* the hand: five small dice and its name */
.dpoker-made{display:flex;align-items:center;gap:.5rem;min-height:1.05em;font-size:.78rem;line-height:1.2;color:rgba(23,23,15,.72)}
.dpoker-made small{font-size:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpoker-row.best .dpoker-made small{color:var(--accent-deep);font-weight:700}
.dpoker-mini{display:flex;gap:3px}
.dpoker-mini:empty{display:none}
.dpoker-die{
  --pip:currentColor;
  display:inline-block;width:1em;height:1em;font-size:15px;border-radius:.2em;
  background-color:var(--ivory);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(23,23,15,.62),0 1px 1px rgba(0,0,0,.25);
  background-repeat:no-repeat;
}
/* pips as radial gradients, placed by the face */
.dpoker-die[data-v="1"]{color:var(--accent-dark);background-image:radial-gradient(circle at 50% 50%,var(--pip) .13em,transparent .17em)}
.dpoker-die[data-v="2"]{background-image:radial-gradient(circle at 27% 27%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 73%,var(--pip) .1em,transparent .14em)}
.dpoker-die[data-v="3"]{background-image:radial-gradient(circle at 25% 25%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 50% 50%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 75% 75%,var(--pip) .1em,transparent .14em)}
.dpoker-die[data-v="4"]{background-image:radial-gradient(circle at 27% 27%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 27%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 27% 73%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 73%,var(--pip) .1em,transparent .14em)}
.dpoker-die[data-v="5"]{background-image:radial-gradient(circle at 25% 25%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 75% 25%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 50% 50%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 25% 75%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 75% 75%,var(--pip) .1em,transparent .14em)}
.dpoker-die[data-v="6"]{background-image:radial-gradient(circle at 27% 24%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 24%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 27% 50%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 50%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 27% 76%,var(--pip) .1em,transparent .14em),radial-gradient(circle at 73% 76%,var(--pip) .1em,transparent .14em)}
/* the stack, in gold on the dark table but ink on the paper; what the pot just added */
.dpoker-stack{display:grid;justify-items:end;min-width:3.4rem;font-variant-numeric:tabular-nums}
.dpoker-stack b{display:inline-flex;align-items:center;gap:.3rem;font:400 1.35rem/1 var(--display)}
/* a gold chip in front of every amount of chips */
.dpoker-stack b::before,.dpoker-pot b::before{
  content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;
  background:var(--gold);box-shadow:inset 0 0 0 .09em rgba(23,23,15,.35),0 0 0 .07em rgba(23,23,15,.25);
}
.dpoker-stack small{min-height:.9rem;font:700 .72rem/1.25 var(--ui);color:var(--accent-deep)}
.dpoker-row.final .dpoker-stack b{color:var(--cherry)}
/* the pot and the ante */
.dpoker-pot{
  display:flex;align-items:baseline;justify-content:center;gap:.5rem;
  margin:0;padding:.35rem .9rem .1rem;
  font-size:.86rem;font-weight:500;color:rgba(23,23,15,.72);
}
.dpoker-pot b{display:inline-flex;align-items:center;gap:.3rem;font:400 1.45rem/1 var(--display);color:var(--ink)}
.dpoker-pot .dpoker-ante::before{content:"·";margin-right:.5rem}
.dpoker-news{
  margin:0;min-height:2.2em;padding:.25rem .9rem .45rem;
  font-size:.86rem;font-weight:500;line-height:1.3;text-align:center;color:rgba(23,23,15,.72);
  border-radius:0 0 18px 18px;
}
.dpoker-news:empty::before{content:"\00a0"}
.dpoker-news.good{color:var(--ink);font-weight:700}

/* The tray and what stands under it keep their place and size whatever the
   texts do: the status line grows upwards, the paper gives way and scrolls. */
.dpoker-play{
  flex:none;margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 12px 12px;
}
.dpoker-status{flex:none;min-height:2.3em;display:grid;place-items:center;padding:.3em 1em}
/* fewer players leave a shorter paper: the tray takes that room */
.dpoker-tray{flex:none;height:clamp(112px,calc(21vh + (4 - var(--dpoker-n,4))*5vh),236px)}
.dpoker-tray canvas{position:absolute;inset:0}

/* the hand on the table and whether it is enough */
.dpoker-info{
  flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;row-gap:.1rem;align-items:baseline;
  width:100%;max-width:26rem;min-height:3.9em;
  padding:.4rem .85rem .45rem;border-radius:16px;
  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1.5px rgba(244,240,232,.09);
}
.dpoker-who2{font-size:.8rem;font-weight:500;color:var(--mist);white-space:nowrap}
.dpoker-who2:empty{display:none}
.dpoker-now{font:400 1.2rem/1.15 var(--display);color:var(--ivory);overflow:hidden;text-overflow:ellipsis}
.dpoker-now:empty{display:none}
.dpoker-vs{grid-column:1/-1;font-size:.82rem;line-height:1.25;color:var(--mist)}
.dpoker-info[data-vs="win"] .dpoker-vs{color:var(--gold);font-weight:600}
.dpoker-info[data-vs="lose"] .dpoker-vs{color:var(--ivory);opacity:.85}
.dpoker-info[data-vs="tie"] .dpoker-vs{color:var(--gold)}
.dpoker-info[data-vs="none"]{align-content:center}
.dpoker-info[data-vs="none"] .dpoker-vs{text-align:center}

.dpoker-acts{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:26rem}
.dpoker-acts .btn{padding-left:.6em;padding-right:.6em}

/* a short screen: everything a little tighter, nothing dropped */
@media (max-height:620px){
  .dpoker-sheet{margin-top:4px}
  .dpoker-row{min-height:36px;padding-top:.1rem;padding-bottom:.1rem;gap:.5rem}
  .dpoker-row .ava{width:26px;height:26px;font-size:.8rem}
  .dpoker-row .ava .chipico{width:14px;height:14px;right:-6px;bottom:-4px;padding:1.5px}
  .dpoker-who{gap:.1rem}
  .dpoker-made{font-size:.72rem}
  .dpoker-die{font-size:12px}
  .dpoker-stack b{font-size:1.15rem}
  .dpoker-stack small{min-height:.75rem;font-size:.66rem;line-height:1.1}
  .dpoker-pot{padding-top:.2rem;font-size:.8rem}
  .dpoker-pot b{font-size:1.2rem}
  .dpoker-news{min-height:0;padding-top:.15rem;padding-bottom:.3rem;font-size:.8rem}
  .dpoker-play{gap:5px;padding:5px 10px 8px}
  .dpoker-status{min-height:1.9em;padding:.2em .9em;font-size:.86rem;line-height:1.2}
  .dpoker-info{min-height:3.3em;padding:.25rem .7rem .3rem}
  .dpoker-now{font-size:1.05rem}
  .dpoker-vs{font-size:.76rem}
  .dpoker-acts .btn{min-height:46px;font-size:.96rem}
}
/* phone held sideways: the paper on the left, the dice on the right (under the tray the paper showed a single row) */
@media (max-height:480px) and (orientation:landscape){
  .dpoker-root{flex-direction:row;justify-content:center;gap:2px}
  .dpoker-sheet{flex:1 1 0;width:auto;min-width:0;max-width:27rem;margin:4px 0 8px 10px;align-self:flex-start;max-height:calc(100% - 12px)}
  .dpoker-play{flex:1 1 0;min-width:0;max-width:27rem;margin:0;justify-content:center}
  .dpoker-tray{height:clamp(92px,30vh,150px)}
}