:root {
  --bg: #0d0e11;
  --table: #14161b;
  --table-edge: #23262e;
  --text: #e6e7ea;
  --muted: #8a8f9c;
  --btn: #23262e;
  --btn-hover: #2f333d;
  --accent: #7c9cff;
  --card: #1f2229;
  --card-edge: #3a3f4b;
  --black-suit: #e8e9ec;
  --red-suit: #ff6b6b;
  --cw: 80px;
  --ch: 112px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #15171c 0%, var(--bg) 70%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--btn);
  border: 1px solid #30343e;
  border-radius: 6px;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
button:hover { background: var(--btn-hover); border-color: #3c414d; }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; }
button.small { font-size: 12px; padding: 5px 9px; }
button.active { border-color: var(--accent); color: var(--accent); }

.toolbar {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  display: flex;
  gap: 4px;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#table {
  position: absolute;
  left: 0;
  top: 0;
  width: 1400px;
  height: 900px;
  transform-origin: 0 0;
  touch-action: none;
}

#hand {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 12px;
  height: 160px;
  border: 1px dashed #2c3039;
  border-radius: 14px;
  background: rgba(124, 156, 255, 0.03);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  pointer-events: none;
  transition: background .15s, border-color .15s;
}
#hand span { font-size: 12px; color: #4a4f5c; letter-spacing: .02em; }
#hand.hover { background: rgba(124, 156, 255, 0.08); border-color: var(--accent); }

/* ---------- Cards ---------- */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  border-radius: 7px;
  cursor: grab;
  will-change: transform;
  perspective: 600px;
  touch-action: none;
}
.card.anim { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card.remote { transition: transform .08s linear; }
.card.dragging { cursor: grabbing; }
.card.dragging .inner { box-shadow: 0 14px 28px rgba(0,0,0,.55); }
.card.hidden { display: none; }

.card .inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .3s ease;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.card.up .inner { transform: rotateY(180deg); }

.card .face, .card .back {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card .back {
  background: url(card-back.svg) center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.card .face {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #262a33, var(--card));
  border: 1px solid var(--card-edge);
  color: var(--black-suit);
}
.card.red .face { color: var(--red-suit); }

.card .corner {
  position: absolute;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  width: 18px;
}
.card .corner small { display: block; font-size: 13px; margin-top: 1px; }
.card .corner.tl { top: 6px; left: 4px; }
.card .corner.br { bottom: 6px; right: 4px; transform: rotate(180deg); }
.card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.card .pip.court {
  font-size: 26px;
  font-weight: 700;
  inset: 22px 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: .85;
  flex-direction: column;
  line-height: 1;
}
.card .pip.court small { font-size: 18px; }

.card.mine .inner { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.6); }

/* ---------- Room panel ---------- */
.room {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 100000;
  width: 260px;
  background: rgba(20, 22, 27, .92);
  backdrop-filter: blur(8px);
  border: 1px solid #2a2e37;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
}
.room-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--muted); }
.room-title b { color: var(--text); letter-spacing: .08em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a524; }
.room.online .dot { background: #3ddc84; }
.invite { display: flex; gap: 4px; }
.invite input {
  flex: 1;
  min-width: 0;
  background: #0f1014;
  color: var(--muted);
  border: 1px solid #2a2e37;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}
#players { list-style: none; padding: 0; margin: 10px 0 8px; }
#players li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
#players li .swatch { width: 10px; height: 10px; border-radius: 3px; }
#players li .count { margin-left: auto; color: var(--muted); font-size: 12px; }
#players li.me .name::after { content: " (you)"; color: var(--muted); }

/* ---------- Cursors ---------- */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  transition: transform .08s linear, opacity .4s;
}
.cursor svg { display: block; }
.cursor .label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0d0e11;
  white-space: nowrap;
}

/* ---------- Misc ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #23262e;
  border: 1px solid #343843;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 100001;
  transition: opacity .2s;
}
.hidden { display: none !important; }


@media (max-width: 640px) {
  .room { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; }
}

/* ---------- Stacks ---------- */
.card.grouped .inner { box-shadow: 0 0 0 2px var(--accent), 0 8px 20px rgba(0,0,0,.5); }
.card.shuffling { animation: riffle .5s ease; }
@keyframes riffle {
  0%   { translate: 0 0; }
  30%  { translate: var(--sx) -6px; }
  60%  { translate: calc(var(--sx) * -0.6) 3px; }
  100% { translate: 0 0; }
}


/* ---------- Toolbar icons ---------- */
.toolbar button { height: 33px; display: inline-flex; align-items: center; gap: 6px; }
button.icon { width: 36px; padding: 0; justify-content: center; }
button.icon svg { width: 18px; height: 18px; }

/* ---------- Add menu ---------- */
.menu {
  position: fixed;
  top: 48px;
  left: 8px;
  z-index: 100001;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 60px);
  overflow: auto;
  background: rgba(20, 22, 27, .97);
  border: 1px solid #2a2e37;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.menu button.wide { width: 100%; justify-content: flex-start; padding: 9px 12px; display: flex; gap: 8px; }
.menu button.wide span { color: var(--muted); font-weight: 400; margin-left: auto; }
.menu-label { font-size: 12px; color: var(--muted); margin: 12px 2px 8px; }
#picker { display: grid; grid-template-columns: repeat(13, 38px); gap: 5px; }
.mini {
  width: 38px;
  height: 52px;
  padding: 0;
  border-radius: 5px;
  background: linear-gradient(160deg, #262a33, var(--card));
  border: 1px solid var(--card-edge);
  color: var(--black-suit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  font-size: 13px;
}
.mini.red { color: var(--red-suit); }
.mini small { font-size: 15px; }
.mini:hover { border-color: var(--accent); background: #2a2e38; transform: translateY(-2px); }
.mini.joker { grid-column: span 2; width: auto; font-size: 11px; letter-spacing: .06em; }
.mini.joker small { font-size: 16px; }

/* ---------- Jokers ---------- */
.card .pip.joker { flex-direction: column; font-size: 36px; gap: 2px; }
.card .pip.joker small { font-size: 9px; font-weight: 700; letter-spacing: .25em; margin-right: -.25em; }

/* ---------- Trash (clay) ---------- */
#trash {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 120px;
  cursor: grab;
  touch-action: none;
  z-index: 0;
}
#trash svg { width: 100%; height: 100%; overflow: visible; transition: filter .2s, transform .2s; }
#trash .groove { fill: none; stroke: rgba(70, 25, 10, .5); stroke-width: 2.4; stroke-linecap: round; }
#trash .groove-hi { fill: none; stroke: rgba(255, 205, 175, .2); stroke-width: 1.4; stroke-linecap: round; }
#trash .base { fill: none; stroke: rgba(255, 190, 150, .18); stroke-width: 2; stroke-linecap: round; }
#trash .lip { fill: none; stroke: #cf7a52; stroke-width: 4.5; }
#trash .lip-shadow { fill: none; stroke: #5a2716; stroke-width: 5.5; }
#trash .lip-hi { fill: none; stroke: rgba(255, 220, 195, .4); stroke-width: 1.6; stroke-linecap: round; }
#trash .print { fill: none; stroke: rgba(80, 30, 12, .22); stroke-width: .7; stroke-linecap: round; }
#trash .lid {
  transform-box: view-box;
  transform-origin: 50px 20px;
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
/* A card is being dragged nearby: lid peeks open */
#trash.near .lid { transform: translate(-3px, -7px) rotate(-6deg); }
/* Card is right over the can: lid fully open */
#trash.hot svg { filter: drop-shadow(0 0 12px rgba(255, 120, 80, .6)); transform: scale(1.06); }
#trash.hot .lid { transform: translate(-6px, -16px) rotate(-14deg) scale(.96); }
#trash.dragging { cursor: grabbing; }
#trash.gulp svg { animation: gulp .4s ease; }
@keyframes gulp { 30% { transform: scale(1.14, .92); } 60% { transform: scale(.96, 1.05); } 100% { transform: scale(1); } }

/* Jester artwork on jokers */
.jester { display: block; }
.jester .jface { fill: var(--jface, #24272f); }
.jester .jline { fill: none; stroke: var(--jface, #24272f); stroke-linecap: round; }
.card .face { --jface: #24272f; }
.card .pip.joker .jester { width: 54px; height: 46px; margin-bottom: 4px; }
.mini.joker { flex-direction: row; gap: 4px; --jface: #24272f; }
.mini.joker .jester { width: 28px; height: 24px; }

/* Room panel minimize */
.room-title { position: relative; }
.room-count { display: none; color: var(--muted); font-size: 12px; }
.min-btn { margin-left: auto; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.min-btn svg { width: 14px; height: 14px; }
.room { transition: width .2s; }
.room.min { width: auto; padding: 8px 8px 8px 12px; }
.room.min .room-title { margin-bottom: 0; cursor: pointer; gap: 8px; }
.room.min .room-count { display: inline; }
.room.min .invite, .room.min #players, .room.min #btn-rename { display: none; }
@media (max-width: 640px) { .room.min { left: auto; } }

/* ---------- Voice chat ---------- */
.voice-bar { display: flex; gap: 6px; margin-top: 10px; }
.voice-bar button { display: inline-flex; align-items: center; gap: 6px; }
.voice-bar button svg { width: 15px; height: 15px; }
.voice-bar button.leave { color: #ff8a7a; }
#players li .vstate { display: inline-flex; color: #3ddc84; }
#players li .vstate.off { color: #ff8a7a; }
#players li .vstate svg { width: 14px; height: 14px; }
#players li .vmute { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
#players li .vmute svg { width: 14px; height: 14px; }
#players li .vmute.active { color: #ff8a7a; border-color: #ff8a7a; }
/* talking indicator */
#players li .swatch { transition: box-shadow .15s; }
#players li.talking .swatch { box-shadow: 0 0 0 3px rgba(61, 220, 132, .35), 0 0 10px 2px #3ddc84; animation: talk 1s ease-in-out infinite; }
#players li.talking .name { color: #7ff0b0; }
@keyframes talk { 50% { box-shadow: 0 0 0 5px rgba(61, 220, 132, .18), 0 0 14px 3px #3ddc84; } }
.cursor.talking .label { box-shadow: 0 0 0 2px #3ddc84, 0 0 12px #3ddc84; }
.room.min.talking .dot { box-shadow: 0 0 0 3px rgba(61, 220, 132, .35), 0 0 10px #3ddc84; animation: talk 1s ease-in-out infinite; }
.room.min .voice-bar { display: none; }

/* Clay 3D icon variants are only shown by the clay theme */
.ico-clay { display: none; }