/* Slova z písmen: the round and the clock on top, the players' plates, the
   player's own words (the part that scrolls), and at the bottom the rail the
   word is laid on, the rack of letter tiles and three buttons. After a round
   the pad makes room for the table of everybody's words and one button.
   Every class begins with sl-: the shell and the other games share the page. */
.sl{
  --sl-t:clamp(44px,min(calc((100vw - 60px)/5),9.4vh),66px); /* a tile of the rack */
  --sl-p:min(36px,calc((100vw - 44px)/9 - 3px));              /* a letter on the rail */
  position:absolute;inset:0;margin:0 auto;max-width:620px;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;
  overflow:hidden;
}
@supports (height:1dvh){
  .sl{--sl-t:clamp(44px,min(calc((100vw - 60px)/5),9.4dvh),66px)}
}
.sl [hidden]{display:none}

/* ── round, status, clock ────────────────────────────────────────────── */
.sl-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 4px}
.sl-info{display:grid;gap:4px;justify-items:start;min-width:0}
.sl-round{margin:0;display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.sl-lang{padding:.1em .6em;border:1px solid var(--line);border-radius:999px;font-size:.68rem;letter-spacing:.04em}
.sl-status{justify-self:start;margin:0;padding:.3em .85em;font-size:.9rem;text-align:left;max-width:100%}
.sl-status:not(.go){padding-left:0}
.sl-clock{display:grid;justify-items:center;gap:3px;min-width:62px}
.sl-clock[hidden]{display:none}
.sl-sec{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold)}
.sl-bar{display:block;width:60px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.sl-bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transition:transform .2s linear}
.sl-clock.sl-low .sl-sec{color:#ff8fa5;animation:sl-beat 1s ease-in-out infinite}
.sl-clock.sl-low .sl-bar i{background:var(--cherry)}
@keyframes sl-beat{50%{transform:scale(1.14)}}

/* ── plates ──────────────────────────────────────────────────────────── */
.sl-plates{display:flex;gap:6px;padding:4px 10px 6px}
.sl-plate{
  position:relative;display:flex;align-items:center;gap:6px;
  flex:1 1 0;min-width:0;max-width:300px;min-height:40px;padding:3px 8px 3px 4px;
  border:1.5px solid var(--line);border-radius:999px;background:rgba(13,18,10,.3);
}
.sl-plate .ava{width:30px;height:30px;font-size:.9rem;flex:none}
.sl-plate .ava .chipico{width:14px;height:14px;right:-4px;bottom:-3px;padding:1.5px}
.sl-who{display:grid;line-height:1.15;min-width:0;flex:1}
.sl-nm{font-weight:600;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sub{font-size:.68rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-total{flex:none;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--ivory)}
.sl-plate.sl-ahead .sl-total,.sl-plate.sl-best .sl-total{color:var(--gold)}
.sl-plate.sl-me{border-color:rgba(244,240,232,.42)}
.sl-plate.sl-best{border-color:var(--gold);background:rgba(118,176,67,.13)}
/* how many words the player has in this round: a small tile */
.sl-count{
  flex:none;min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;
  border-radius:5px;background:var(--ivory);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(23,23,15,.22);
  font:700 .78rem/1 var(--ui);font-style:normal;font-variant-numeric:tabular-nums;
}
.sl-tick{
  position:absolute;left:22px;top:-3px;width:17px;height:17px;border-radius:50%;
  background:var(--gold) center/72% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23241a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:0 0 0 2px var(--plum-2);
  transform:scale(0);transition:transform .2s var(--ease);
}
.sl-plate.sl-ok .sl-tick{transform:scale(1)}
@media (max-width:440px){
  .sl-plates[data-n="4"] .sl-who,.sl-plates[data-n="3"] .sl-who{display:none}
  .sl-plates[data-n="4"] .sl-plate,.sl-plates[data-n="3"] .sl-plate{justify-content:space-between;padding-right:7px;gap:4px}
  .sl-plates[data-n="4"] .sl-plate .ava{width:26px;height:26px;font-size:.8rem}
  .sl-plates[data-n="4"] .sl-tick{left:18px}
  .sl-plates[data-n="4"] .sl-total{font-size:.86rem}
}

/* ── the part that scrolls: my words, or the table of the round ──────── */
.sl-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sl-cap{display:flex;justify-content:space-between;align-items:baseline;margin:2px 2px 6px;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.sl-cap b{color:var(--gold);font-size:.9rem;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.sl-chips{display:flex;flex-wrap:wrap;gap:5px}
.sl-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:.22em .4em .22em .65em;border-radius:7px;
  background:var(--ivory);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(23,23,15,.16);
  font:600 .92rem/1.25 var(--ui);
}
.sl-chip b{
  min-width:1.5em;padding:0 .3em;border-radius:5px;background:rgba(23,23,15,.1);
  font-size:.74rem;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums;
}
/* a bonus the word brought: a small gold figure behind its points */
.sl-chip em{font-style:normal;font-size:.74rem;font-weight:700;line-height:1.5;color:#3f6d1e;font-variant-numeric:tabular-nums;margin-left:-2px}
.sl-chip.sl-shared em{color:var(--gold)}
/* the streak: five pips between the caption and the points */
.sl-run{display:inline-flex;gap:3px;margin:0 auto 0 10px;align-self:center}
.sl-run u{width:7px;height:7px;border-radius:50%;background:var(--line);text-decoration:none;transition:background .15s,transform .15s}
.sl-run u.sl-lit{background:var(--gold);transform:scale(1.15)}
.sl-run u.sl-pop{animation:sl-pip .35s var(--ease)}
@keyframes sl-pip{0%{transform:scale(.2)}55%{transform:scale(2.1);box-shadow:0 0 10px 2px rgba(118,176,67,.9)}}
.sl-run{position:relative}
.sl-run.sl-fire u{background:#ff9d3c;box-shadow:0 0 9px 2px rgba(255,140,40,.85);animation:sl-burn .32s ease-in-out infinite alternate}
.sl-run.sl-fire u:nth-child(2n){animation-delay:.12s}
.sl-run s{position:absolute;left:100%;top:50%;margin-left:5px;text-decoration:none;font-size:1.05rem;line-height:1;transform:translateY(-58%);animation:sl-flame .5s var(--ease) both,sl-burn .3s .5s ease-in-out infinite alternate}
@keyframes sl-burn{to{transform:scale(1.5)}}
@keyframes sl-flame{from{transform:translateY(-20%) scale(.2);opacity:0}60%{transform:translateY(-70%) scale(1.5);opacity:1}to{transform:translateY(-58%) scale(1)}}
.sl-chip.sl-new{animation:sl-pop .34s var(--ease)}
@keyframes sl-pop{0%{transform:scale(.5);background:var(--gold)}60%{transform:scale(1.1);background:var(--gold)}100%{transform:none}}
.sl-empty{font-size:.88rem;color:var(--mist)}

/* the table: the hidden word in tiles, then a block for every player */
.sl-base{display:grid;justify-items:center;gap:5px;margin:2px 0 10px}
.sl-cap2{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.sl-baseword{display:flex;gap:3px}
.sl-baseword i{
  width:min(30px,calc((100vw - 60px)/9));aspect-ratio:1/1.08;display:grid;place-items:center;
  border-radius:5px;background:var(--gold);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(40,80,10,.3);
  font:400 1.15rem/1 var(--display);font-style:normal;padding-bottom:2px;
}
.sl-row{padding:7px 0 9px;border-top:1px solid var(--line)}
.sl-row h3{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font:inherit}
.sl-rname{font-weight:700;font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-rcount{flex:1;font-size:.76rem;color:var(--mist);white-space:nowrap}
.sl-gain{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.sl-row.sl-own .sl-rname{box-shadow:inset 0 -2px 0 var(--gold)}
/* whoever made the most in the round */
.sl-row.sl-top{margin:0 -7px;padding-left:7px;padding-right:7px;border-radius:10px;border-top-color:transparent;background:rgba(118,176,67,.11);box-shadow:inset 0 0 0 1.5px rgba(118,176,67,.5)}
.sl-row.sl-top + .sl-row{border-top-color:transparent}
.sl-crown{flex:none;padding:.15em .6em;border-radius:999px;background:var(--gold);color:var(--ink);font:700 .66rem/1.3 var(--ui);font-style:normal;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
/* the table has just come: gold words turn up one by one, the best row lights up */
.sl-table.sl-show .sl-chip.sl-uniq{animation:sl-turn .5s var(--ease) both;animation-delay:calc(var(--sl-i,0)*65ms + 350ms)}
@keyframes sl-turn{0%{transform:perspective(300px) rotateX(88deg);background:var(--ivory);filter:brightness(1)}55%{transform:perspective(300px) rotateX(-12deg);filter:brightness(1.5)}100%{transform:none;filter:none}}
.sl-table.sl-show .sl-baseword i{animation:sl-in .4s var(--ease) both;animation-delay:calc(var(--sl-k,0)*40ms)}
.sl-table.sl-show .sl-row.sl-top{animation:sl-toprow .6s 1.2s var(--ease) both}
.sl-table.sl-show .sl-crown{animation:sl-in .4s 1.3s var(--ease) both}
@keyframes sl-in{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}}
@keyframes sl-toprow{0%{background:transparent;box-shadow:inset 0 0 0 1.5px transparent}50%{background:rgba(118,176,67,.3)}}
.sl-table .sl-chip{font-size:.84rem;padding:.16em .32em .16em .55em}
/* a word nobody else has: gold; one that others found too: only an outline */
.sl-chip.sl-uniq{background:var(--gold);box-shadow:inset 0 -2px 0 rgba(40,80,10,.3)}
.sl-chip.sl-uniq b{background:rgba(23,23,15,.16)}
.sl-chip.sl-shared{background:none;color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500}
.sl-chip.sl-shared b{background:rgba(244,240,232,.12)}
.sl-chip.sl-could{background:none;color:var(--mist);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500;padding-right:.65em}
.sl-chip.sl-could.sl-got{color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--gold)}
.sl-chip.sl-could:first-child{color:var(--gold)}
/* where a player's points came from */
.sl-from{display:flex;flex-wrap:wrap;gap:2px 10px;margin:-2px 0 7px;font-size:.76rem;color:var(--mist)}
.sl-from span{white-space:nowrap}
.sl-from b{color:var(--ivory);font-variant-numeric:tabular-nums}
.sl-from .sl-plus b{color:var(--gold)}
/* my words the dictionary refused, each a button that reports it */
.sl-missed{margin-top:9px}
.sl-misscap{margin:0 0 5px;font-size:.76rem;color:var(--mist)}
.sl-miss{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:.2em .45em .2em .7em;
  border:1.5px dashed rgba(255,157,176,.6);border-radius:8px;background:none;color:var(--ivory);cursor:pointer;
  font:500 .86rem/1.2 var(--ui);
}
.sl-miss b{padding:.25em .6em;border-radius:999px;background:rgba(244,240,232,.14);font-size:.74rem;font-weight:700;white-space:nowrap}
.sl-miss.sl-sent{border-style:solid;border-color:var(--line);color:var(--mist);cursor:default}
.sl-miss.sl-sent b{background:none;padding-left:0;color:var(--gold)}
.sl-miss.sl-plain{min-height:0;padding:.2em .65em;cursor:default}
.sl-dotb{font-style:normal;font-weight:700;color:var(--gold)}
.sl-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font-size:.74rem;color:var(--mist)}
.sl-key span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sl-dot{width:14px;height:14px;border-radius:4px}
.sl-dot.sl-uniq{background:var(--gold)}
.sl-dot.sl-shared{box-shadow:inset 0 0 0 1.5px var(--mist)}

/* ── the pad: note, rail, rack, buttons ──────────────────────────────── */
.sl-pad{position:relative;display:grid;justify-items:center;gap:7px;padding:4px 10px 10px;background:linear-gradient(rgba(13,18,10,0),rgba(13,18,10,.34) 30%)}
.sl-noterow{display:flex;justify-content:center;align-items:center;gap:8px;max-width:100%;min-height:30px}
/* "it should have counted": a small button behind the refusal */
.sl-rep{
  flex:none;min-height:30px;padding:.2em .8em;border:1.5px solid rgba(255,157,176,.7);border-radius:999px;
  background:rgba(13,18,10,.5);color:#ffc2cd;font:700 .78rem/1 var(--ui);cursor:pointer;position:relative;
}
.sl-rep::after{content:"";position:absolute;inset:-9px -6px} /* a finger-sized target */
.sl-rep:disabled{border-color:var(--line);color:var(--gold);cursor:default}
.sl-rep[hidden]{display:none}
/* a bonus: its name and points in gold above the rail */
.sl-cheer{position:absolute;left:0;right:0;bottom:calc(100% - 4px);display:none;justify-items:center;gap:4px;pointer-events:none;z-index:2}
.sl-cheer.sl-on{display:grid}
.sl-cheer span{
  display:inline-flex;align-items:baseline;gap:9px;padding:.22em .8em .3em;border-radius:999px;
  background:var(--gold);color:var(--ink);box-shadow:0 8px 22px -6px rgba(0,0,0,.8),0 0 0 3px rgba(118,176,67,.3);
  font:400 1.2rem/1.15 var(--display);white-space:nowrap;
  animation:sl-cheer 1.4s var(--ease) both;
}
.sl-cheer span:nth-child(2){animation-delay:.09s}
.sl-cheer span:nth-child(3){animation-delay:.18s}
.sl-cheer b{font:700 1.02rem/1 var(--ui);font-variant-numeric:tabular-nums}
.sl-cheer .sl-c-all{font-size:1.55rem;box-shadow:0 8px 22px -6px rgba(0,0,0,.8),0 0 0 4px rgba(118,176,67,.4),0 0 34px 6px rgba(118,176,67,.55)}
.sl-cheer.sl-still span,.sl-cheer.sl-still .sl-bigword i{animation:none}
/* a word of all the tiles: laid out once more, big and gold */
.sl-bigword{display:flex;justify-content:center;gap:3px;margin-bottom:3px}
.sl-bigword i{
  width:min(31px,calc((100vw - 44px)/9 - 3px));aspect-ratio:1/1.1;display:grid;place-items:center;padding-bottom:2px;
  border-radius:6px;background:linear-gradient(#c8e8a6,var(--gold) 60%,#6ba63c);color:var(--ink);
  box-shadow:inset 0 -3px 0 rgba(40,80,10,.35),0 6px 12px -4px rgba(0,0,0,.8),0 0 14px rgba(118,176,67,.55);
  font:400 1.25rem/1 var(--display);font-style:normal;
  animation:sl-bigtile 1.4s var(--ease) both;animation-delay:calc(var(--sl-k)*45ms);
}
@keyframes sl-bigtile{0%{transform:translateY(46px) scale(.3) rotate(-25deg);opacity:0}14%{transform:translateY(-9px) scale(1.2) rotate(4deg);opacity:1}24%{transform:none}80%{transform:none;opacity:1}100%{transform:translateY(-22px) scale(.9);opacity:0}}
.sl-cheer.sl-big::before{
  content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(118,176,67,.5),rgba(118,176,67,.16) 55%,transparent);
  transform:translate(-50%,-50%);animation:sl-glow 1.4s ease-out both;
}
.sl-cheer.sl-still::before{animation:none;opacity:.5}
@keyframes sl-glow{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
/* and the whole screen takes a gold breath */
.sl.sl-flash::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 70% at 50% 62%,rgba(118,176,67,.3),transparent 70%);animation:sl-flash .9s ease-out both}
@keyframes sl-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* the last ten seconds: the rail's edge beats with the clock */
.sl.sl-hurry .sl-rail{animation:sl-hurry 1s ease-in-out infinite}
.sl.sl-hurry .sl-rail.sl-no{animation:sl-shake .4s linear}
@keyframes sl-hurry{50%{box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 2px rgba(255,120,145,.55),0 0 16px rgba(201,42,42,.5)}}
@keyframes sl-cheer{0%{transform:translateY(18px) scale(.5);opacity:0}16%{transform:translateY(-4px) scale(1.12);opacity:1}28%{transform:none}82%{transform:none;opacity:1}100%{transform:translateY(-16px);opacity:0}}
/* and the rack hops, tile after tile */
.sl-rack.sl-party .sl-tile{animation:sl-hop .5s var(--ease)}
.sl-rack.sl-party .sl-tile:nth-child(3n+2){animation-delay:.07s}
.sl-rack.sl-party .sl-tile:nth-child(3n){animation-delay:.14s}
@keyframes sl-hop{35%{transform:translateY(-9px) rotate(var(--sl-tilt,0deg))}}
.sl-note{margin:0;min-height:1.35em;min-width:0;font-size:.9rem;font-weight:600;line-height:1.35;text-align:center;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-note.sl-good{color:var(--gold)}
.sl-note.sl-bad{color:#ff9db0}
.sl-railbox{position:relative;width:100%;display:grid;justify-items:center}
/* the rail: a groove in the table the word is laid into */
.sl-rail{
  display:flex;justify-content:center;align-items:center;gap:3px;
  width:min(100%,calc(9*var(--sl-p) + 8*3px + 16px));height:calc(var(--sl-p)*1.08 + 12px);padding:0 8px;
  border-radius:10px;background:rgba(13,18,10,.5);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 1px 0 var(--line);
}
.sl-hint{font-size:.86rem;color:var(--mist);opacity:.8}
.sl-pick{
  flex:none;width:var(--sl-p);height:calc(var(--sl-p)*1.08);padding:0 0 2px;display:grid;place-items:center;
  border:0;border-radius:6px;background:var(--ivory);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(23,23,15,.2),0 3px 6px -3px rgba(0,0,0,.7);
  position:relative;
}
.sl-pick b{font:400 calc(var(--sl-p)*.62)/1 var(--display)}
.sl-rail{position:relative}
.sl-rail.sl-wait .sl-pick{opacity:.75}
/* refused: the word goes red and shakes */
.sl-rail.sl-no{animation:sl-shake .4s linear;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 2px rgba(255,120,145,.8)}
.sl-rail.sl-no .sl-pick{background:#ffb3c0;color:#7a0f26;box-shadow:inset 0 -3px 0 rgba(122,15,38,.3);animation:sl-fall .42s ease-in both}
.sl-rail.sl-no .sl-pick:nth-child(2n){animation-delay:.03s}
@keyframes sl-fall{0%,45%{transform:none;opacity:1}100%{transform:translateY(9px) rotate(5deg);opacity:.25}}
/* a long word: a sweep of light over the rail */
.sl-rail.sl-sweep::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%) no-repeat;background-size:60% 100%;
  animation:sl-sweep .55s ease-out both;
}
@keyframes sl-sweep{from{background-position:-150% 0}to{background-position:250% 0}}
.sl-rail.sl-won .sl-pick{background:var(--gold);box-shadow:inset 0 -3px 0 rgba(40,80,10,.3);animation:sl-win .3s var(--ease)}
@keyframes sl-win{40%{transform:translateY(-7px) scale(1.08)}}
.sl-rail.sl-shake{animation:sl-shake .3s linear}
@keyframes sl-shake{15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-6px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
/* the points of a word on their way into the sum; sparks */
.sl-fly{
  position:absolute;z-index:5;pointer-events:none;white-space:nowrap;
  font:400 1.7rem/1 var(--display);font-style:normal;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.75);
  transform:translate(-50%,-50%);opacity:0;
}
.sl-sparks{position:absolute;z-index:4;width:0;height:0;pointer-events:none}
.sl-sparks i{
  position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--gold);
  box-shadow:0 0 8px 1px rgba(118,176,67,.8);opacity:0;
  animation:sl-spark .8s cubic-bezier(.1,.7,.3,1) both;
}
.sl-sparks i:nth-child(3n){background:var(--ivory);border-radius:50%}
.sl-sparks i:nth-child(4n){background:#ff8fa5}
@keyframes sl-spark{0%{transform:scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--sl-x),var(--sl-y)) rotate(200deg) scale(var(--sl-s,1));opacity:0}}
.sl-sum.sl-bump{display:inline-block;animation:sl-bump .3s var(--ease)}
.sl-total.sl-bump,.sl-gain.sl-bump{animation:sl-bump .3s var(--ease)}
@keyframes sl-bump{40%{transform:scale(1.35)}}
/* the rack: ivory tiles with a thick lower edge, a little askew */
.sl-rack{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:calc(5*var(--sl-t) + 4*6px)}
.sl-rack[data-n="8"]{width:calc(4*var(--sl-t) + 3*6px)}
.sl-tile{
  flex:none;width:var(--sl-t);height:var(--sl-t);padding:0 0 5px;display:grid;place-items:center;
  border:0;border-radius:calc(var(--sl-t)*.17);cursor:pointer;
  background:linear-gradient(#fffaf0,var(--ivory) 55%,#f1e7d3);color:var(--ink);
  box-shadow:inset 0 -5px 0 #d9cdb6,inset 0 1px 0 #fff,0 5px 9px -4px rgba(0,0,0,.75);
  transform:rotate(var(--sl-tilt,0deg));
  transition:transform .12s var(--ease),opacity .12s,box-shadow .12s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.sl-tile b{font:400 calc(var(--sl-t)*.6)/1 var(--display);pointer-events:none}
.sl-tile:active{transform:translateY(3px) rotate(var(--sl-tilt,0deg));box-shadow:inset 0 -2px 0 #d9cdb6,0 2px 4px -2px rgba(0,0,0,.7)}
/* a tile lying on the rail leaves its hollow in the rack */
.sl-tile.sl-used{
  background:rgba(13,18,10,.55);color:transparent;cursor:default;pointer-events:none;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75),inset 0 0 0 2px rgba(244,240,232,.13);
  transform:scale(.8);
}
.sl-tile.sl-used b{visibility:hidden}
.sl-pad.sl-closed .sl-tile{opacity:.5;pointer-events:none}

.sl-keys{display:grid;grid-template-columns:52px 52px minmax(0,1fr);gap:8px;width:calc(5*var(--sl-t) + 4*6px);max-width:100%;margin-top:2px}
.sl-keys .btn{min-height:48px;padding:0;display:grid;place-items:center}
.sl-key2 svg{width:24px;height:24px;display:block}
.sl-send{font-size:1.02rem}

/* ── the button under the table ──────────────────────────────────────── */
.sl-foot{display:flex;justify-content:center;padding:6px 10px 10px}
.sl-go{width:min(100%,22rem);min-height:50px}

.sl-sum{margin:.2em 0 .6em;font-size:.9rem;opacity:.75;text-align:center}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .sl-head{padding:5px 12px 2px}
  .sl-sec{font-size:1.8rem}
  .sl-plates{padding:2px 8px 4px}
  .sl-plate{min-height:36px}
  .sl-plate .ava{width:26px;height:26px;font-size:.8rem}
  .sl-tick{left:18px}
  .sl-pad{gap:5px;padding:2px 10px 7px}
  .sl-noterow{min-height:26px}
  .sl-rep{min-height:26px}
  .sl-keys .btn{min-height:44px}
  .sl-foot{padding:4px 10px 6px}
  .sl-go{min-height:46px}
}
/* a wide screen: more air */
@media (min-width:700px) and (min-height:620px){
  .sl-head{padding-top:18px}
  .sl-pad{gap:10px;padding-bottom:22px}
  .sl-chip{font-size:1rem}
  .sl-foot{padding-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .sl-cheer span,.sl-bigword i,.sl-cheer.sl-big::before,.sl-rail.sl-no,.sl-rail.sl-no .sl-pick,.sl-rail.sl-sweep::after,.sl.sl-hurry .sl-rail,.sl-run u,.sl-run s,.sl-sparks i,.sl-rack.sl-party .sl-tile,.sl-clock.sl-low .sl-sec,.sl-chip.sl-new,.sl-pick,.sl-rail.sl-won .sl-pick,.sl-rail.sl-shake{animation:none}
  .sl-bar i,.sl-tick,.sl-tile{transition:none}
}