/* ── Mezi kozy: the bank, the players, three dice in a row, the bet ──────────
   The screen is the space under the top bar (#groot). Everything is sized from
   that space (container units, with viewport units as the fallback), so the
   bet controls are always wholly on the screen: the table in the middle is the
   part that gives way. A phone held sideways gets two columns. */
.kozy-root{
  position:absolute;inset:0;overflow:hidden;
  container-type:size;
  /* Nothing here scrolls, so a finger dragged across the table must not start a
     page pan or a swipe back out of the game; the browser also swallows the tap
     that follows such a pan. */
  touch-action:none;
  --kozy-d:clamp(44px,min(21vw,11.5vh),108px); /* side of a die */
  --kozy-win:#8fe39a;
  --kozy-lose:#ff8b9b;
}
@supports (width:1cqh){
  .kozy-root{--kozy-d:clamp(44px,min(22cqw,13cqh),108px)}
}
.kozy-col{
  height:100%;width:100%;max-width:30rem;margin:0 auto;
  display:flex;flex-direction:column;gap:6px;
  padding:4px 12px 10px;
}
.kozy-main{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

/* the bank, gold */
.kozy-bank{
  flex:none;display:flex;align-items:baseline;justify-content:center;gap:.5rem;
  min-width:9rem;padding:.25rem 1.2rem .3rem;border-radius:999px;
  background:rgba(0,0,0,.26);box-shadow:inset 0 0 0 1.5px rgba(118,176,67,.28);
}
.kozy-banklab{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.kozy-bankval{font:400 1.9rem/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.kozy-ante{font-size:.72rem;color:var(--mist);white-space:nowrap}

/* the players in a row */
.kozy-seats{
  flex:none;list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;gap:6px;width:100%;
}
.kozy-seat{
  position:relative;flex:1 1 0;min-width:0;max-width:8.5rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:.4rem;align-items:center;
  padding:.28rem .45rem .28rem .32rem;border-radius:14px;
  background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1.5px rgba(244,240,232,.08);
  transition:box-shadow .25s,background-color .25s;
}
.kozy-seat .ava{grid-row:1/3;width:32px;height:32px;font-size:.95rem}
.kozy-seat .ava .chipico{width:15px;height:15px;right:-5px;bottom:-4px;padding:2px}
.kozy-seat.me{background:rgba(118,176,67,.14)}
.kozy-seat.now{box-shadow:inset 0 0 0 2px var(--gold)}
.kozy-seat.out .ava,.kozy-seat.out .kozy-nm,.kozy-seat.away .ava,.kozy-seat.away .kozy-nm{opacity:.45}
.kozy-nm{font-size:.74rem;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kozy-stack{font:400 1.1rem/1.1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.kozy-seat.out .kozy-stack{font:600 .72rem/1.5 var(--ui);color:var(--mist)}
/* what the last bet brought: a small tag on the corner of the plate */
.kozy-delta{
  position:absolute;top:-7px;right:5px;padding:2px 6px;border-radius:999px;
  font-size:.68rem;font-weight:700;line-height:1;
  background:var(--ink);box-shadow:0 0 0 1.5px rgba(244,240,232,.15);
}
.kozy-delta:empty{display:none}
.kozy-delta.up{color:var(--kozy-win)}
.kozy-delta.down{color:var(--kozy-lose)}
/* four at the table: smaller plates */
.kozy-seats[data-n="4"]{gap:4px}
.kozy-seats[data-n="4"] .kozy-seat{padding:.22rem .25rem;column-gap:.28rem;border-radius:12px}
.kozy-seats[data-n="4"] .ava{width:24px;height:24px;font-size:.75rem}
.kozy-seats[data-n="4"] .ava .chipico{width:12px;height:12px;right:-4px;bottom:-3px;padding:1.5px}
.kozy-seats[data-n="4"] .kozy-nm{font-size:.66rem}
.kozy-seats[data-n="4"] .kozy-stack{font-size:.95rem}
/* four plates in a row are narrow: the stack gets the whole width under the name, so 12 500 fits */
.kozy-seats[data-n="4"] .kozy-seat{row-gap:1px}
.kozy-seats[data-n="4"] .ava{grid-row:1}
.kozy-seats[data-n="4"] .kozy-stack{grid-column:1 / -1;justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){
  .kozy-seats[data-n="3"] .ava{grid-row:1}
  .kozy-seats[data-n="3"] .kozy-stack{grid-column:1 / -1;justify-self:center;max-width:100%}
}
.kozy-seats[data-n="4"] .kozy-delta{right:2px;padding:1px 4px;font-size:.62rem}

/* ── the table: post — third — post ──────────────────────────────────────── */
.kozy-table{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;
}
/* three equal places in one row; each is as wide as a die, so they cannot meet */
.kozy-row{flex:none;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(10px,calc(var(--kozy-d)*.34),40px)}
.kozy-slot{
  flex:0 0 var(--kozy-d);position:relative;width:var(--kozy-d);aspect-ratio:1;
  display:grid;place-items:center;border-radius:18%;
  transition:box-shadow .2s;
}
/* a die: an ivory square with a 3×3 grid of pips */
.kozy-die{
  position:relative;width:100%;aspect-ratio:1;border-radius:18%;overflow:hidden;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;
  background:linear-gradient(150deg,#fffdf8,#eadfc9);
  box-shadow:inset 0 -.12em .2em rgba(23,23,15,.16),0 0 0 1px rgba(23,23,15,.2),0 .3em .6em -.15em rgba(0,0,0,.65);
  font-size:var(--kozy-d);
}
.kozy-die i{place-self:center;width:72%;height:72%;border-radius:50%;background:var(--ink);visibility:hidden}
.kozy-die[data-v="1"] i:nth-child(5),
.kozy-die[data-v="2"] i:nth-child(1),.kozy-die[data-v="2"] i:nth-child(9),
.kozy-die[data-v="3"] i:nth-child(1),.kozy-die[data-v="3"] i:nth-child(5),.kozy-die[data-v="3"] i:nth-child(9),
.kozy-die[data-v="4"] i:nth-child(1),.kozy-die[data-v="4"] i:nth-child(3),.kozy-die[data-v="4"] i:nth-child(7),.kozy-die[data-v="4"] i:nth-child(9),
.kozy-die[data-v="5"] i:nth-child(1),.kozy-die[data-v="5"] i:nth-child(3),.kozy-die[data-v="5"] i:nth-child(5),.kozy-die[data-v="5"] i:nth-child(7),.kozy-die[data-v="5"] i:nth-child(9),
.kozy-die[data-v="6"] i:nth-child(1),.kozy-die[data-v="6"] i:nth-child(3),.kozy-die[data-v="6"] i:nth-child(4),.kozy-die[data-v="6"] i:nth-child(6),.kozy-die[data-v="6"] i:nth-child(7),.kozy-die[data-v="6"] i:nth-child(9){visibility:visible}
.kozy-die[data-v="1"] i{width:92%;height:92%;background:var(--cherry)}
/* not thrown yet: an empty place with a question mark */
.kozy-die[data-v="0"]{background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px rgba(244,240,232,.22)}
.kozy-die[data-v="0"]::after{
  content:"?";position:absolute;inset:0;display:grid;place-items:center;
  font:400 .5em/1 var(--display);color:rgba(244,240,232,.45);
}
.kozy-die.kozy-throw,.kozy-slot .card.kozy-throw{animation:kozy-tumble .55s var(--ease) both}
@keyframes kozy-tumble{
  0%{transform:translateY(-55%) rotate(-200deg) scale(.55);opacity:0}
  60%{transform:translateY(0) rotate(14deg) scale(1.08);opacity:1}
  100%{transform:none}
}
/* the posts wear gold, the third value the colour of its result */
.kozy-lo,.kozy-hi{box-shadow:0 0 0 3px rgba(118,176,67,.85)}
.kozy-empty .kozy-lo,.kozy-empty .kozy-hi{box-shadow:none}
.kozy-nogap .kozy-slot{opacity:.6}
.kozy-mid.win{box-shadow:0 0 0 4px var(--kozy-win),0 0 22px rgba(143,227,154,.55)}
.kozy-mid.lose{box-shadow:0 0 0 4px var(--kozy-lose)}
.kozy-mid.post{box-shadow:0 0 0 4px var(--cherry),0 0 22px rgba(201,42,42,.6)}

/* card form: three cards in the same row */
.kozy-cards .kozy-slot{aspect-ratio:1/1.2;border-radius:8%}
.kozy-cards .kozy-slot .card{--w:calc(var(--kozy-d)*.845)}
.kozy-cards .kozy-slot .card.kozy-wait{opacity:.4}
.kozy-cards .kozy-lo,.kozy-cards .kozy-hi,.kozy-cards .kozy-mid{box-shadow:none}
.kozy-cards .kozy-lo .card,.kozy-cards .kozy-hi .card{box-shadow:0 0 0 3px rgba(118,176,67,.85),0 .14em .26em -.1em rgba(0,0,0,.6)}
.kozy-cards .kozy-mid.win .card{box-shadow:0 0 0 4px var(--kozy-win),0 0 22px rgba(143,227,154,.55)}
.kozy-cards .kozy-mid.lose .card{box-shadow:0 0 0 4px var(--kozy-lose)}
.kozy-cards .kozy-mid.post .card{box-shadow:0 0 0 4px var(--cherry),0 0 22px rgba(201,42,42,.6)}

/* the verdict: "Mezi! +40" */
.kozy-verdict{
  flex:none;margin:0;min-height:1.75em;padding:.22em 1em;border-radius:999px;
  font-size:1.2rem;font-weight:700;line-height:1.3;text-align:center;white-space:nowrap;
  background:var(--ivory);color:var(--ink);
}
.kozy-verdict[hidden]{display:block!important;visibility:hidden}
.kozy-verdict.win{background:var(--kozy-win);animation:kozy-pop .35s var(--ease)}
.kozy-verdict.lose{animation:kozy-pop .35s var(--ease)}
.kozy-verdict.post{background:var(--cherry);color:var(--ivory);animation:kozy-pop .35s var(--ease)}
.kozy-verdict.pass{background:rgba(0,0,0,.3);color:var(--mist);font-weight:600}
.kozy-verdict.gap{background:none;color:var(--gold);font-weight:600}
@keyframes kozy-pop{from{transform:scale(.6);opacity:0}}

/* the line of all values: posts, the gap, where the third landed */
.kozy-strip{flex:none;display:flex;gap:4px;width:100%;max-width:19rem}
.kozy-strip i{
  flex:1 1 0;min-width:0;height:22px;display:grid;place-items:center;border-radius:6px;
  font-style:normal;font-size:.76rem;font-weight:600;line-height:1;
  color:rgba(244,240,232,.4);background:rgba(0,0,0,.18);
  transition:background-color .25s,color .25s;
}
/* the whole deck: thirteen ranks across */
.kozy-strip[data-n="13"]{max-width:none;gap:2px}
.kozy-strip[data-n="13"] i{font-size:.66rem;border-radius:5px}
.kozy-strip i.in{color:var(--ink);background:rgba(118,176,67,.78)}
.kozy-strip i.post{color:var(--ivory);background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1.5px var(--gold)}
.kozy-strip i.hit{color:var(--ivory);background:var(--cherry);box-shadow:0 0 0 2px var(--ivory)}
.kozy-strip i.in.hit{background:#2f9b4a}

.kozy-news{
  flex:none;margin:0;min-height:2.6em;width:100%;
  font-size:.84rem;font-weight:500;line-height:1.3;text-align:center;color:var(--ivory);
}
.kozy-news.bad{color:var(--gold)}

/* ── the bet ─────────────────────────────────────────────────────────────── */
.kozy-acts{flex:none;display:grid;justify-items:center;gap:6px;width:100%;max-width:26rem;margin:0 auto}
.kozy-status{min-height:2.1em;display:grid;place-items:center;padding:.25em 1em;font-size:.92rem}
/* the "throw" button and the chooser share one place, so nothing moves when the turn goes round */
.kozy-panel{display:grid;width:100%}
.kozy-panel>*{grid-area:1/1;min-width:0}
.kozy-open{align-self:center;width:100%}
.kozy-open[hidden]{display:inline-flex!important;visibility:hidden}
.kozy-betbox{display:grid;gap:6px}
.kozy-betbox[hidden]{display:grid!important;visibility:hidden}
.kozy-pick{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem}
.kozy-amount{min-width:2.4ch;font:400 1.9rem/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.kozy-amount.banco{color:var(--ivory)}
.kozy-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:none;
  touch-action:none; /* a finger on the slider moves the slider, never the page */
  cursor:pointer;
}
.kozy-slider:disabled{opacity:.4;cursor:default}
/* only one bet possible: words instead of a slider that cannot move */
.kozy-pick>.kozy-slider,.kozy-pick>.kozy-only{grid-area:1/2}
.kozy-only{align-self:center;font-size:.86rem;color:var(--mist);pointer-events:none}
.kozy-pick.fixed .kozy-slider{visibility:hidden}
.kozy-pick:not(.fixed) .kozy-only{display:none}
.kozy-slider::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(244,240,232,.12)}
.kozy-slider::-moz-range-track{height:8px;border-radius:4px;background:rgba(0,0,0,.35)}
.kozy-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;
  background:var(--gold);border:3px solid var(--ivory);box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.kozy-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid var(--ivory)}
.kozy-slider:focus-visible{outline:none}
.kozy-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(118,176,67,.45)}
.kozy-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kozy-quick .btn{min-height:44px;padding:.3em .4em;font-size:.88rem}
.kozy-quick .btn.on{background:rgba(118,176,67,.2);border-color:var(--gold)}
.kozy-go{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
.kozy-go .btn{padding-left:.6em;padding-right:.6em}

/* a short screen: everything a little tighter, nothing dropped */
@media (max-height:680px){
  .kozy-col{gap:4px;padding:2px 10px 8px}
  .kozy-main{gap:5px}
  .kozy-bank{padding:.12rem 1rem .18rem}
  .kozy-bankval{font-size:1.5rem}
  .kozy-seat .ava{width:26px;height:26px;font-size:.8rem}
  .kozy-stack{font-size:1rem}
  .kozy-table{gap:5px}
  .kozy-verdict{font-size:1.02rem}
  .kozy-strip i{height:19px;font-size:.7rem}
  .kozy-news{font-size:.78rem}
  .kozy-acts{gap:4px}
  .kozy-status{min-height:1.9em;padding:.2em .9em;font-size:.84rem;line-height:1.2}
  .kozy-betbox{gap:4px}
  .kozy-amount{font-size:1.6rem}
  .kozy-slider{height:40px}
  .kozy-quick .btn{min-height:40px;font-size:.82rem}
  .kozy-go .btn,.kozy-open{min-height:46px;font-size:.96rem}
}
@media (max-height:520px){
  .kozy-col{gap:3px;padding:0 8px 6px}
  .kozy-main,.kozy-table{gap:3px}
  .kozy-bankval{font-size:1.3rem}
  .kozy-ante{display:none}
  .kozy-seat{padding:.15rem .3rem}
  .kozy-verdict{font-size:.94rem;padding:.12em .9em}
  .kozy-strip i{height:16px;font-size:.66rem}
  .kozy-news{font-size:.74rem;line-height:1.2;min-height:2.4em}
  .kozy-status{min-height:1.6em;padding:.12em .8em;font-size:.8rem}
  .kozy-amount{font-size:1.4rem}
  .kozy-slider{height:40px}
  .kozy-quick .btn{min-height:40px}
  .kozy-go .btn,.kozy-open{min-height:44px}
}

/* a phone held sideways: the table on the left, the bet on the right */
@media (orientation:landscape) and (max-height:520px){
  .kozy-root{--kozy-d:clamp(44px,17vh,84px)}
  .kozy-col{max-width:50rem;flex-direction:row;align-items:center;gap:18px;padding:0 14px 6px}
  .kozy-main{flex:1.15 1 0;height:100%;min-width:0;justify-content:center}
  .kozy-table{flex:0 1 auto}
  .kozy-acts{flex:1 1 0;min-width:0;margin:0;gap:6px}
  .kozy-ante{display:inline}
  .kozy-slider{height:40px}
  .kozy-quick .btn{min-height:42px}
  .kozy-go .btn,.kozy-open{min-height:48px}
}
@supports (width:1cqh){
  @media (orientation:landscape) and (max-height:520px){
    .kozy-root{--kozy-d:clamp(44px,20cqh,84px)}
  }
}