/* Not Rummikub, shared by the TV and the phones: the tiles, the joker, tile backs,
   the tile wordmark, the hourglass and the felt. Size a tile with --rkw (its width).
   Dark first, then the light overrides at the end. */

/* ---- a tile: thick cream plastic, the number engraved in its colour ---- */
.rkt {
  --w: var(--rkw, 40px); --tc: #1f1d1a;
  position: relative; flex: none; box-sizing: border-box;
  width: var(--w); height: calc(var(--w) * 1.36);
  border-radius: calc(var(--w) * .14);
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--w) * .1);
  color: var(--tc);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #fffaf0 0%, #f8f0dd 58%, #efe3c7 100%);
  box-shadow:
    inset 0 calc(var(--w) * -.075) 0 #d8c59c,
    inset 0 calc(var(--w) * -.09) 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(140,105,55,.22),
    0 calc(var(--w) * .06) calc(var(--w) * .12) rgba(30,20,5,.38);
  user-select: none; -webkit-user-select: none;
}
.rkt b {
  display: block; font-family: "Arial Black", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: calc(var(--w) * .7); line-height: 1; letter-spacing: -.03em;
  text-shadow: 0 calc(var(--w) * -.012) 0 rgba(0,0,0,.25), 0 calc(var(--w) * .02) 0 rgba(255,255,255,.8);
}
.rkt.two b { font-size: calc(var(--w) * .55); letter-spacing: -.08em; margin-top: calc(var(--w) * .08); text-indent: -.06em; }
.rkt i {
  display: block; width: calc(var(--w) * .2); height: calc(var(--w) * .2); border-radius: 50%;
  border: calc(var(--w) * .045) solid currentColor; margin-top: auto; margin-bottom: calc(var(--w) * .17); opacity: .85;
}
.rkt.c-k { --tc: #1f1d1a; }
.rkt.c-r { --tc: #d3242c; }
.rkt.c-b { --tc: #1d5ec4; }
.rkt.c-o { --tc: #e07d00; }
.rkt.joker { padding: calc(var(--w) * .08) calc(var(--w) * .06) calc(var(--w) * .14); justify-content: center; }
.rkt .rkj { width: 100%; height: 100%; display: block; }
.rkt.joker em {
  position: absolute; right: calc(var(--w) * -.12); top: calc(var(--w) * -.14);
  min-width: calc(var(--w) * .42); height: calc(var(--w) * .42); padding: 0 calc(var(--w) * .06); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font: 900 calc(var(--w) * .26)/1 "Arial Black", "Avenir Next", Arial, sans-serif; color: #fff; background: #3a3a3c;
  box-shadow: 0 0 0 calc(var(--w) * .035) #fffaf0, 0 2px 6px rgba(0,0,0,.3);
}
.rkt.joker em.c-k { background: #1f1d1a; } .rkt.joker em.c-r { background: #d3242c; } .rkt.joker em.c-b { background: #1d5ec4; } .rkt.joker em.c-o { background: #e07d00; }

/* ---- face down ---- */
.rkt.back { padding: 0; align-items: center; justify-content: center; }
.rkt.back span { width: 62%; height: 70%; border-radius: calc(var(--w) * .08); box-shadow: inset 0 0 0 calc(var(--w) * .035) rgba(160,125,70,.28), inset 0 calc(var(--w) * .03) 0 rgba(255,255,255,.6); background: repeating-linear-gradient(45deg, rgba(160,125,70,.07) 0 2px, transparent 2px 5px); }

/* ---- the wordmark: letters on tiles ---- */
.rkw { margin: 0 1px; padding-top: calc(var(--w) * .2); }
.rkw b { font-size: calc(var(--w) * .66); letter-spacing: 0; }
.rkw-gap { display: inline-block; width: 10px; }

/* ---- the hourglass ---- */
.rk-glass { position: relative; display: inline-flex; align-items: center; gap: 10px; --f: 1; }
.rk-glass svg { width: 64px; height: 96px; overflow: visible; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.rk-glass .cap { fill: #6e4524; }
.rk-glass .post { fill: #94643a; }
.rk-glass .bulb { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.75); stroke-width: 1.6; }
.rk-glass .shine { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }
.rk-glass .sand { fill: #e7ad45; }
.rk-glass .sand.top { transform: translateY(calc((1 - var(--f)) * 35px)); }
.rk-glass .sand.bot { transform: translateY(calc(var(--f) * 36px)); }
.rk-glass .stream { fill: #e7ad45; animation: rk-stream .35s linear infinite; }
.rk-glass.out .stream { opacity: 0; }
@keyframes rk-stream { 50% { opacity: .55; } }
.rk-glass b { font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.rk-glass.urgent .sand, .rk-glass.urgent .stream { fill: #ff5a36; }
.rk-glass.urgent .bulb { stroke: #ff7a5c; }
.rk-glass.urgent b { color: #ff453a; animation: rk-urgent .5s ease-in-out infinite alternate; }
@keyframes rk-urgent { to { transform: scale(1.12); } }

/* ---- the felt: deep green at night, pale sage by day ---- */
.tbl-rummy {
  --tbl-edge: #0b1f17; --tbl-rim: #7a5b34; --tbl-glow: rgba(190,255,220,.08);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(90,180,130,.20), transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1d4b38 0%, #173f2f 60%, #123426 100%);
}
[data-theme="light"] .tbl-rummy {
  --tbl-edge: #f8f3e7; --tbl-rim: #b89565; --tbl-glow: rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,.5), transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, rgba(30,80,50,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(30,80,50,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #d9eadf 0%, #cde2d4 60%, #c1dac9 100%);
}

/* ---- light theme ---- */
[data-theme="light"] .rkt { box-shadow: inset 0 calc(var(--w) * -.075) 0 #d8c59c, inset 0 calc(var(--w) * -.09) 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(140,105,55,.26), 0 calc(var(--w) * .05) calc(var(--w) * .1) rgba(40,60,45,.28); }
[data-theme="light"] .rk-glass .bulb { fill: rgba(255,255,255,.55); stroke: rgba(80,60,30,.45); }
[data-theme="light"] .rk-glass .shine { stroke: rgba(255,255,255,.9); }
[data-theme="light"] .rk-glass svg { filter: drop-shadow(0 6px 10px rgba(60,50,20,.22)); }