/* =========================================================
   Clay theme — layered on top of style.css.
   To undo: remove the <link href="clay.css"> line in index.html.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900&display=swap');

:root {
  --clay-bg: #1e1714;
  --clay-slab: #2e2420;
  --clay-slab-hi: #3a2e29;
  --clay-terra: #c46a45;
  --clay-terra-dk: #8e452a;
  --clay-cream: #f1e2d0;
  --text: #f1e2d0;
  --muted: #b39a88;
  --accent: #e0915f;
  --red-suit: #e8674a;
  --black-suit: #f1e2d0;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the "puffy" clay shading: soft highlight top-left, soft shade bottom-right */
  --puff: inset 2px 3px 3px rgba(255, 225, 200, .16), inset -3px -4px 6px rgba(0, 0, 0, .38), 3px 6px 12px rgba(0, 0, 0, .45);
  --puff-sm: inset 1px 2px 2px rgba(255, 225, 200, .16), inset -2px -3px 4px rgba(0, 0, 0, .35), 2px 4px 8px rgba(0, 0, 0, .4);
  --pressed: inset 3px 4px 7px rgba(0, 0, 0, .5), inset -2px -2px 4px rgba(255, 225, 200, .08);
}

html, body {
  font-family: 'Nunito', ui-rounded, -apple-system, sans-serif;
  background:
    var(--grain),
    radial-gradient(ellipse at 50% 40%, #2a201c 0%, var(--clay-bg) 70%);
  background-size: 160px 160px, cover;
}

/* ---------- Buttons: puffy clay pills ---------- */
button {
  font-family: inherit;
  font-weight: 800;
  color: var(--clay-cream);
  background: var(--grain), linear-gradient(160deg, var(--clay-slab-hi), var(--clay-slab));
  background-size: 160px 160px, cover;
  border: none;
  border-radius: 14px;
  box-shadow: var(--puff-sm);
  transition: transform .12s, box-shadow .12s, background .15s;
}
button:hover { background: var(--grain), linear-gradient(160deg, #453730, #352a25); background-size: 160px 160px, cover; transform: translateY(-1px); }
button:active { transform: translateY(1px) scale(.97); box-shadow: var(--pressed); }
button.ghost { background: var(--grain), linear-gradient(160deg, #2a211d, #241c19); background-size: 160px 160px, cover; }
button.active {
  color: #2a1209;
  background: var(--grain), linear-gradient(160deg, #e0915f, var(--clay-terra));
  background-size: 160px 160px, cover;
}
.toolbar { gap: 7px; top: 10px; left: 10px; }
.toolbar button { height: 38px; }
button.icon { width: 42px; border-radius: 50% / 46%; }
button.icon svg { stroke-width: 2.4; }

/* ---------- Panels & menus: clay slabs ---------- */
.room, .menu, .toast {
  background: var(--grain), linear-gradient(160deg, #362a25, var(--clay-slab));
  background-size: 160px 160px, cover;
  backdrop-filter: none;
  border: none;
  border-radius: 22px;
  box-shadow: var(--puff);
}
.room { padding: 14px 14px 12px; }
.menu { padding: 14px; top: 56px; }
.toast { border-radius: 18px; font-weight: 700; }
.invite input {
  background: #1d1613;
  color: var(--muted);
  border: none;
  border-radius: 12px;
  box-shadow: var(--pressed);
  padding: 8px 10px;
}
.menu button.wide { border-radius: 16px; }
.menu-label { font-weight: 700; }
#players li .swatch { border-radius: 50%; width: 12px; height: 12px; box-shadow: inset -1px -2px 2px rgba(0,0,0,.35), inset 1px 1px 1px rgba(255,255,255,.3); }
.dot { box-shadow: inset -1px -1px 2px rgba(0,0,0,.4); }

/* ---------- Hand tray: a groove pressed into the clay ---------- */
#hand {
  border: none;
  border-radius: 26px;
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 4px 6px 12px rgba(0, 0, 0, .55), inset -3px -3px 8px rgba(255, 220, 190, .05);
}
#hand span { color: #6e5a4e; font-weight: 700; }
#hand.hover { background: rgba(224, 145, 95, .08); box-shadow: inset 4px 6px 12px rgba(0, 0, 0, .55), 0 0 0 2px var(--accent); }

/* ---------- Cards: clay tiles ---------- */
.card, .card .inner, .card .face, .card .back { border-radius: 11px; }
.card .inner { box-shadow: 2px 3px 5px rgba(0, 0, 0, .5); }
.card .face {
  font-family: 'Nunito', ui-rounded, sans-serif;
  background: var(--grain), linear-gradient(155deg, #4a3b34, #352a25);
  background-size: 160px 160px, cover;
  border: none;
  box-shadow: inset 2px 2px 3px rgba(255, 225, 200, .14), inset -2px -3px 5px rgba(0, 0, 0, .4);
}
.card .corner { font-weight: 900; }
.card .pip.court { border-radius: 9px; border-width: 2px; font-weight: 900; }
.card .back {
  border: none;
  box-shadow: inset 1px 2px 2px rgba(255, 255, 255, .45), inset -2px -3px 4px rgba(60, 20, 8, .3);
}
.card.dragging .inner { box-shadow: 8px 16px 22px rgba(0, 0, 0, .55); }
.card.mine .inner, .card.grouped .inner { box-shadow: 0 0 0 3px var(--accent), 3px 6px 12px rgba(0, 0, 0, .5); }

/* ---------- Card picker: tiny clay tiles ---------- */
.mini {
  font-family: inherit;
  font-weight: 900;
  border: none;
  border-radius: 10px;
  background: var(--grain), linear-gradient(155deg, #4a3b34, #352a25);
  background-size: 160px 160px, cover;
  box-shadow: var(--puff-sm);
}
.mini:hover { background: var(--grain), linear-gradient(155deg, #574640, #3f322c); background-size: 160px 160px, cover; }
#picker { gap: 7px; }

/* ---------- Cursors ---------- */
.cursor .label { border-radius: 10px; font-weight: 800; box-shadow: inset -1px -2px 2px rgba(0,0,0,.25), 1px 2px 4px rgba(0,0,0,.4); }

/* Jester face matches the clay card color */
.card .face, .mini.joker { --jface: #3f322c; }

/* ---------- Clay icons: chunky 3D clay objects ---------- */
button.icon { width: 46px; }
.toolbar button { height: 42px; }
button.icon .ico-flat { display: none; }
button.icon .ico-clay { display: block; width: 32px; height: 32px; object-fit: contain; pointer-events: none; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .45)); transition: transform .15s; }
button.icon:hover .ico-clay { transform: translateY(-1px) rotate(-4deg) scale(1.06); }
button.icon:active .ico-clay { transform: scale(.92); }
.min-btn svg { width: 15px; height: 15px; stroke-width: 3.4; color: #f3dcc4; filter: url(#clay-icon); overflow: visible; }
.menu { top: 60px; }