/* ── Kostky 10 000: the score board on paper, the tray, the turn ──────── */
.tenk-root{
  position:absolute;inset:0;
  display:flex;flex-direction:column;min-height:0;
}

/* the paper */
.tenk-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);
}
.tenk-final{
  margin:0;padding:.42rem .9rem;
  background:var(--cherry);color:var(--ivory);
  font-size:.88rem;font-weight:600;line-height:1.25;text-align:center;
}
.tenk-board{list-style:none;margin:0;padding:0}
.tenk-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;
  min-height:clamp(38px,6.2vh,56px);padding:.25rem .9rem .25rem .8rem;
  border-bottom:1px solid var(--rule);
  transition:background-color .25s,box-shadow .25s;
}
.tenk-row.me{background:rgba(255,198,92,.22)}
.tenk-row.now{box-shadow:inset 4px 0 0 var(--cherry)}
.tenk-row.away .ava,.tenk-row.away .tenk-name{opacity:.45}
.tenk-row .ava{
  width:32px;height:32px;font-size:.95rem;
  color:var(--ivory);background-color:var(--ink);box-shadow:none;
}
.tenk-row .ava .chipico{width:17px;height:17px;right:-5px;bottom:-4px;padding:2px;box-shadow:0 0 0 1px var(--rule)}
.tenk-who{display:grid;gap:.3rem;min-width:0}
.tenk-name{font-size:.9rem;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenk-row.now .tenk-name{color:var(--cherry)}
.tenk-miss{margin-left:.4em;font-style:normal;font-weight:700;letter-spacing:.1em;color:var(--cherry)}
/* the way to the target: banked so far, and what this turn would add */
.tenk-bar{position:relative;height:6px;border-radius:3px;background:rgba(36,26,45,.12);overflow:hidden}
.tenk-fill,.tenk-more{position:absolute;top:0;bottom:0;left:0;width:0;transition:width .5s var(--ease),left .5s var(--ease)}
.tenk-fill{background:var(--ink)}
.tenk-more{background:var(--cherry)}
.tenk-sum{display:grid;justify-items:end;min-width:3.6rem;font-variant-numeric:tabular-nums}
.tenk-sum b{font:400 1.4rem/1 var(--display)}
.tenk-row.best .tenk-sum b{color:var(--cherry)}
.tenk-sum small{min-height:.95rem;font:700 .72rem/1.3 var(--ui);color:var(--cherry)}
.tenk-news{
  margin:0;min-height:2.2em;padding:.4rem .9rem;
  font-size:.86rem;font-weight:500;line-height:1.3;text-align:center;color:rgba(36,26,45,.72);
  border-radius:0 0 18px 18px;
}
.tenk-news:empty::before{content:"\00a0"}
.tenk-news.bad{color:var(--cherry);font-weight:600}
.tenk-news.flash{animation:tenk-flash 1.8s ease-out}
@keyframes tenk-flash{from{background:var(--gold)}}

/* 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. */
.tenk-play{
  flex:none;margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 12px 12px;
}
.tenk-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 (the number does not change during a game) */
.tenk-tray{flex:none;height:clamp(112px,calc(21vh + (4 - var(--tenk-n,4))*5vh),236px);transition:box-shadow .25s}
.tenk-tray canvas{position:absolute;inset:0}
.tenk-tray.tenk-dead{box-shadow:inset 0 3px 12px rgba(0,0,0,.5),inset 0 0 0 2px var(--cherry)}
/* dashed rings: dice of the throw that can score */
.tenk-hints{position:absolute;inset:0;z-index:1;pointer-events:none}
.tenk-hints i{
  position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  border:2px dashed rgba(255,198,92,.8);
  animation:tenk-hint 1.8s ease-in-out infinite;
}
@keyframes tenk-hint{50%{opacity:.4}}

.tenk-info{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;max-width:26rem}
.tenk-info>div{
  display:grid;align-content:start;gap:.15rem;
  padding:.4rem .85rem .45rem;border-radius:16px;
  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1.5px rgba(251,245,234,.09);
}
.tenk-lab{align-self:center;font-size:.8rem;font-weight:500;color:var(--mist)}
.tenk-info b{font:400 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.tenk-pick{grid-template-columns:minmax(0,1fr) auto}
.tenk-pick b{justify-self:end}
/* room for two lines, so that a long selection does not push the tray */
.tenk-words{grid-column:1/-1;min-height:2.4em;font-size:.82rem;line-height:1.2;color:var(--ivory)}
.tenk-pick.bad b,.tenk-pick.bad .tenk-words{color:var(--gold)}
.tenk-turn{min-width:5.4rem;justify-items:end;align-content:center;text-align:right}

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

/* a short screen: everything a little tighter, nothing dropped */
@media (max-height:620px){
  .tenk-sheet{margin-top:4px}
  .tenk-row{min-height:34px;padding-top:.1rem;padding-bottom:.1rem}
  .tenk-row .ava{width:26px;height:26px;font-size:.8rem}
  .tenk-row .ava .chipico{width:14px;height:14px;right:-6px;bottom:-4px;padding:1.5px}
  .tenk-who{gap:.2rem}
  .tenk-bar{height:5px}
  .tenk-sum b{font-size:1.2rem}
  .tenk-sum small{min-height:.8rem;font-size:.68rem;line-height:1.15}
  .tenk-final,.tenk-news{min-height:0;padding-top:.22rem;padding-bottom:.22rem;font-size:.8rem}
  .tenk-play{gap:5px;padding:5px 10px 8px}
  .tenk-status{min-height:1.9em;padding:.2em .9em;font-size:.86rem;line-height:1.2}
  .tenk-info>div{padding:.25rem .7rem .3rem;gap:.05rem}
  .tenk-info b{font-size:1.15rem}
  .tenk-words{font-size:.76rem}
  .tenk-acts .btn{min-height:46px;font-size:.96rem}
}