/* public/style.css — sober card-room theme. All colors via CSS variables. */
:root {
  --bg: #14171c;
  --panel: #1d222b;
  --felt: #2f6b54;        /* desaturated green felt */
  --felt-edge: #244f3f;
  --ink: #e9edf2;
  --muted: #9aa6b2;
  --line: #303843;
  --accent: #d9a441;      /* warm amber, used only for active turn / primary */
  --accent-ink: #1a1205;
  --card-bg: #f7f5ef;
  --card-red: #c0392b;
  --card-black: #1c2230;
  --danger: #d9534f;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,.35);
  --cw: clamp(60px, 6.2vw, 96px);   /* base card width */
  --card-ratio: 1.5;                /* card height = width * ratio (elongated shape) */
  --font-fun: 'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* class display rules (e.g. .row) must not override the hidden attribute */
html, body { margin: 0; height: 100%; }
body {
  font: 500 15px/1.45 var(--font-fun);
  background: var(--felt-edge) radial-gradient(1100px 760px at 50% 28%, var(--felt), var(--felt-edge)) no-repeat fixed;
  color: var(--ink);
}
.screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.screen[hidden] { display: none; }
.panel {
  width: min(440px, 92vw); margin: 7vh auto; padding: 22px 26px;
  background: rgba(0, 0, 0, .16); border: none;
  border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}

/* Logo */
#screen-home { justify-content: center; align-items: center; gap: 0; padding: 14px 16px;
  background: radial-gradient(closest-side circle at 50% 22%, rgba(176, 235, 120, .16), transparent 72%); }

/* Header-style home: top band [LOGO ............ TABLES], create/join panel centered beneath.
   Default (mobile) is a single stacked column (logo -> panel -> tables);
   wide screens split into a header row with the panel as a centered focal row below. */
.home-grid {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.home-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
/* stacked (mobile): every cell centers its content; tables card matches panel width.
   Source order is logo -> panel -> tables, which is the desired phone priority. */
#screen-home .home-logo { align-items: center; }
#screen-home .home-panel { align-items: center; }
#screen-home .home-tables { align-items: center; }
#screen-home .home-tables .open-tables-wrap { margin: 0 auto; width: 100%; max-width: 520px; }

/* Wide screens: logo + open tables side by side, CENTERED as a group; create/join
   panel centered directly beneath them. */
@media (min-width: 860px) {
  #screen-home { align-items: center; justify-content: center; padding: 24px 32px; }
  .home-grid {
    display: grid;
    grid-template-columns: auto minmax(290px, 310px);
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo   tables"
      "panel  panel";
    align-items: center;
    justify-content: center; /* center the logo + tables pair horizontally */
    column-gap: 34px;
    row-gap: 26px;
    max-width: 1100px;
    width: 100%;
  }
  .home-logo   { grid-area: logo;   justify-self: center; align-items: center; min-width: 0; }
  .home-tables { grid-area: tables; justify-self: stretch; align-items: stretch; min-width: 0; }
  .home-panel  { grid-area: panel;  justify-self: center; align-items: center; min-width: 0; }

  /* logo, moderate size, centered */
  #screen-home .home-logo .logo { width: auto; max-width: 220px; margin: 0; }
  #screen-home .home-logo .logo-wordmark { width: auto; max-width: 220px; margin: 0; }
  /* open-tables card, fixed comfortable width so the Join button is never clipped */
  #screen-home .home-tables .open-tables-wrap { margin: 0; width: 100%; max-width: 310px; }
  #screen-home .open-tables { max-height: 220px; }
  /* create/join panel, centered beneath */
  #screen-home .home-panel .panel { width: 100%; max-width: 440px; margin: 0; }
}

#screen-home .panel { margin: 0 auto; width: min(640px, 94vw); padding: 2px 10px; background: none; box-shadow: none; }

/* Home: two side-by-side columns (Create | Join), stacking on small screens */
.home-cols { display: flex; gap: 22px; align-items: stretch; }
.home-cols .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-cols .col > label:first-child { margin-top: 4px; }
.home-cols .col > button { width: 100%; margin-top: 12px; white-space: nowrap; font-size: 16px; padding-left: 10px; padding-right: 10px; }
.col-sep { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #eafdf0; font-weight: 800; font-size: 14px; }
.col-sep .ln { flex: 1; width: 2px; min-height: 16px; background: rgba(255, 255, 255, .18); border-radius: 2px; }
@media (max-width: 560px) {
  .home-cols { flex-direction: column; gap: 10px; }
  .home-cols .col > button { margin-top: 10px; }
  .col-sep { flex-direction: row; }
  .col-sep .ln { width: auto; height: 2px; min-height: 0; }
  /* keep the whole home screen visible without scrolling on phones
     (#screen-home prefix out-specifies the base .logo/label/input rules) */
  #screen-home .logo { width: min(248px, 64vw); margin-bottom: -2px; }
  #screen-home .logo-wordmark { width: min(270px, 78vw); margin-bottom: 0; }
  #screen-home .logo-main { font-size: clamp(54px, 17vw, 76px); -webkit-text-stroke-width: 2px; }
  #screen-home .logo-subline { font-size: clamp(22px, 7vw, 32px); border-width: 2px; border-radius: 12px; }
  #screen-home { padding: 8px 16px; }
  #screen-home .panel { padding: 0 8px; }
  #screen-home label { margin: 7px 0 4px; font-size: 17px; }
  #screen-home input { padding: 9px 14px; font-size: 22px; }
  #screen-home .home-cols .col > button { margin-top: 8px; }
  #screen-home .rules-btn { margin-top: 4px; }
}
.logo {
  width: min(400px, 86vw); height: auto; display: block; margin-bottom: -6px; border-radius: 22px;
  animation: logoIn .7s cubic-bezier(.2,.8,.2,1) both,
             logoFloat 4s ease-in-out .75s infinite,
             logoGlow 4s ease-in-out .75s infinite;
  will-change: transform, filter;
}
.logo[hidden], .logo-wordmark[hidden] { display: none !important; }
.logo-wordmark {
  width: min(400px, 86vw);
  margin: 0 auto 4px;
  text-align: center;
  text-transform: uppercase;
  animation: logoIn .7s cubic-bezier(.2,.8,.2,1) both,
             logoFloat 4s ease-in-out .75s infinite,
             logoGlow 4s ease-in-out .75s infinite;
  will-change: transform, filter;
}
.logo-main {
  display: block;
  font-size: clamp(66px, 14vw, 132px);
  line-height: .82;
  letter-spacing: 0;
  font-weight: 900;
  color: #ffd944;
  -webkit-text-stroke: 3px #0f2c49;
  text-shadow:
    0 7px 0 #ef8a1f,
    0 12px 0 #0f2c49,
    0 18px 28px rgba(0, 0, 0, .45);
}
.logo-subline {
  display: inline-block;
  margin-top: 8px;
  padding: 1px 18px 4px;
  font-size: clamp(28px, 6vw, 54px);
  line-height: .95;
  letter-spacing: 0;
  font-weight: 900;
  color: #effcff;
  background: linear-gradient(180deg, #5ce7ff 0%, #168cc8 100%);
  border: 3px solid #0f2c49;
  border-radius: 18px;
  box-shadow: 0 6px 0 #0c5f91, 0 12px 22px rgba(0, 0, 0, .32);
  text-shadow: 0 3px 0 #0c3d68;
}
.logo-cap { margin: 0; color: var(--ink); opacity: .85; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 13px; }
.logo-sm { width: 148px; border-radius: 14px; margin: 0 auto 10px; animation: logoFloat 5s ease-in-out infinite; }
@keyframes logoIn { 0% { opacity: 0; transform: translateY(-18px) scale(.72) rotate(-3deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes logoFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-7px) rotate(-1.2deg) scale(1.012); }
  50%  { transform: translateY(-12px) rotate(0deg) scale(1.02); }
  75%  { transform: translateY(-7px) rotate(1.2deg) scale(1.012); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes logoFloatSimple { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 14px 28px rgba(0,0,0,.45)); }
  50% { filter: drop-shadow(0 16px 34px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(150,230,90,.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .logo, .logo-sm, .logo-wordmark { animation: logoFloatSimple 4.5s ease-in-out infinite; }
}
h1 { margin: 0 0 18px; font-size: 30px; letter-spacing: .5px; }
h1 .sub, h2 .sub { display: block; font-size: 13px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
h2 { margin: 0 0 16px; }
label { display: block; margin: 12px 0 5px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 1px 0 rgba(0, 0, 0, .25); }
input {
  width: 100%; margin-top: 2px; padding: 12px 16px; font-size: 26px; text-align: center;
  font-family: var(--font-fun); font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px;
}
input::placeholder { color: rgba(255, 255, 255, .5); font-weight: 600; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 164, 65, .45); }
.code-input { letter-spacing: 6px; text-transform: uppercase; font-weight: 800; }
button {
  padding: 11px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: var(--font-fun);
  background: #3a7d66; color: var(--ink); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), background .15s ease, filter .15s ease, box-shadow .14s ease, opacity .15s ease;
}
button:hover { background: #459077; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: transparent; border-color: transparent; }
ion-icon { color: #fff; vertical-align: middle; pointer-events: none; }
.mute-btn ion-icon { font-size: 19px; vertical-align: -3px; }
.leave-btn ion-icon, .rules-btn ion-icon { font-size: 1.1em; vertical-align: -2px; }
.rules-list ion-icon { font-size: 1.35em; vertical-align: -4px; margin-right: 6px; }

/* Jovial candy CTAs — white bubbly text like the logo, chunky pressable bottom edge */
button.primary, button.join {
  color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .4px;
  padding: 13px 18px; border: none;
  text-shadow: 0 2px 1px rgba(0, 0, 0, .28);
}
button.primary { background: linear-gradient(180deg, #ffc64f, #f2992a); box-shadow: 0 5px 0 #c9781a; }
button.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, #ffce63, #f49b2c); transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 0 #c9781a, 0 12px 18px rgba(0, 0, 0, .32); }
button.primary:active { transform: translateY(3px) scale(1); box-shadow: 0 2px 0 #c9781a; }
button.join { background: linear-gradient(180deg, #5cbcf2, #2f9be0); box-shadow: 0 5px 0 #1f72ab; }
button.join:hover { filter: brightness(1.06); background: linear-gradient(180deg, #6fc6f5, #34a0e6); transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 0 #1f72ab, 0 12px 18px rgba(0, 0, 0, .32); }
button.join:active { transform: translateY(3px) scale(1); box-shadow: 0 2px 0 #1f72ab; }
button.play-now {
  font-size: 18px;
  background: linear-gradient(180deg, #6fe68d, #35b962);
  box-shadow: 0 5px 0 #208646;
}
button.play-now:hover {
  background: linear-gradient(180deg, #80f09a, #39c86a);
  box-shadow: 0 8px 0 #208646, 0 12px 18px rgba(0, 0, 0, .32);
}
select { padding: 12px 14px; font-size: 16px; font-family: var(--font-fun); font-weight: 700; background: #26513f; color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; }
.players li .rm { margin-left: auto; padding: 2px 9px; font-size: 13px; line-height: 1; }
.row { display: flex; gap: 10px; margin-top: 8px; }
.row button { flex: 1; }
.row select { flex: 1; }
#btn-copy { background: rgba(255, 255, 255, .18); color: #fff; border: none; padding: 7px 14px; font-size: 14px; border-radius: 10px; }
#btn-copy:hover { background: rgba(255, 255, 255, .28); }
#btn-addbot { color: #fff; font-weight: 800; border: none; background: linear-gradient(180deg, #6fd08a, #45b06a); box-shadow: 0 5px 0 #2f8a4f; }
#btn-addbot:hover { filter: brightness(1.06); transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 0 #2f8a4f, 0 12px 18px rgba(0, 0, 0, .3); }
#btn-addbot:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f8a4f; }
#btn-start { width: 100%; margin-top: 10px; }
.divider { text-align: center; color: #eafdf0; opacity: .9; margin: 18px 0 6px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.hint { color: #dceee5; font-size: 15px; margin-top: 14px; }
.lobby-autostart {
  min-height: 38px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #eafdf0;
  font-size: 15px;
  font-weight: 800;
}
.lobby-start-ring { width: 34px; height: 34px; box-shadow: none; }
.lobby-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: #eafdf0;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.lobby-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lobbySpin 0.8s linear infinite;
}
@keyframes lobbySpin {
  to { transform: rotate(360deg); }
}
.code-banner { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 17px; color: #fff; }
.code-banner strong { letter-spacing: 5px; font-size: 26px; color: #fff; }
.players { list-style: none; padding: 0; margin: 0; }
.players li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 17px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3fae6b; }
.dot.off { background: #6b7480; }
.badge { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; }

/* Toast */
.toast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 10px 16px; border-radius: 8px;
  box-shadow: var(--shadow); z-index: 100; font-weight: 600;
}
.micro-reward {
  position: fixed;
  right: 18px;
  top: 76px;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(310px, calc(100vw - 28px));
  padding: 9px 12px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  animation: microRewardIn .48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.micro-reward-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
}
.micro-reward b { display: block; font-size: 14px; line-height: 1.15; font-weight: 800; font-family: var(--font-fun); }
.micro-reward small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.15; font-weight: 700; }
.micro-reward.leaving { animation: microRewardOut .28s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }
@keyframes microRewardIn {
  0% { opacity: 0; transform: translate(24px, -8px) scale(0.92); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes microRewardOut {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(16px, -6px) scale(0.95); }
}
@media (max-width: 640px) {
  .micro-reward {
    right: 12px;
    top: 68px;
    width: min(292px, calc(100vw - 24px));
  }
}
.leave-btn {
  position: fixed; top: 14px; left: 14px; z-index: 40; font-size: 13px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); color: var(--ink);
}
.leave-btn:hover { background: rgba(0,0,0,.55); }
/* danger (logout) button — themed red, not black */
.danger-btn { background: linear-gradient(180deg, #e0706f, #c0392b); color: #fff; border: none; box-shadow: 0 5px 0 #8e2a20; }
.danger-btn:hover { background: linear-gradient(180deg, #ea807f, #cc3a2d); filter: brightness(1.06); }
.danger-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #8e2a20; }

/* Discard animations (equipped cosmetic, plays on a discarded card) */
@keyframes animBorderDraw {
  0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0); }
  15% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
  30% { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
  45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  60%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
}
@keyframes animGlow { 0%,100% { box-shadow: 0 2px 6px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 14px 2px rgba(217,164,65,0.45), 0 2px 6px rgba(0,0,0,.45); } }
@keyframes animBurst { 0% { filter: brightness(1); } 30% { filter: brightness(1.8) saturate(1.4); } 100% { filter: brightness(1); } }
@keyframes animRipple { 0% { transform: scale(1); } 30% { transform: scale(.88); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.card.anim-spin::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: inherit;
  pointer-events: none;
  animation: animBorderDraw .9s linear forwards;
}
.card.anim-glow { animation: animGlow .9s ease-in-out; }
.card.anim-burst { animation: animBurst .9s ease-out; }
.card.anim-ripple { animation: animRipple .9s ease-in-out; }
/* tiny preview swatches also animate so the shop shows the effect */
.swatch-preview.anim-glow, .swatch-preview.anim-burst, .swatch-preview.anim-ripple { animation-iteration-count: infinite; animation-duration: 1.6s; }
.swatch-preview.anim-spin { position: relative; }
.swatch-preview.anim-spin::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: inherit;
  pointer-events: none;
  animation: animBorderDraw 1.6s linear infinite;
}
.swatch-preview.anim-glow { animation-name: animGlow; }
.swatch-preview.anim-burst { animation-name: animBurst; }
.swatch-preview.anim-ripple { animation-name: animRipple; }
#audio-controls { position: fixed; top: 14px; right: 14px; z-index: 40; }
.mute-btn { font-size: 16px; padding: 8px 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.mute-btn:hover { background: rgba(0, 0, 0, .55); }
.mute-btn.off { color: var(--muted); }
/* click the speaker → popover with independent Music / Sound-effects toggles */
.audio-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, #2f6b54, #28583f); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.audio-menu[hidden] { display: none; }
.audio-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border-radius: 8px; color: #fff; font-size: 14px; cursor: pointer; user-select: none; }
.audio-row:hover { background: rgba(255, 255, 255, .08); }
.audio-label ion-icon { font-size: 1.1em; vertical-align: -3px; margin-right: 7px; }
.switch { width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .25); position: relative; flex: 0 0 auto; transition: background .2s ease; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }

/* Rules button + overlay */
.rules-btn { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); font-weight: 700; }
.rules-btn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.overlay[hidden] { display: none; }

/* Auth — inline sign-up / login on the home screen (no modal) */
.auth-section { margin-bottom: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.fields-2 { display: flex; gap: 10px; }                /* two fields side-by-side (auth + room code/password) */
.fields-2 label { flex: 1; margin: 0; font-size: 14px; }
.fields-2 input { font-size: 16px; text-align: left; padding: 11px 14px; }
.fields-2 .code-input { text-align: center; }
.auth-form .row { margin-top: 4px; }
/* S'inscrire — green candy CTA on theme (no black buttons) */
#btn-auth-register { color: #fff; font-weight: 800; border: none; background: linear-gradient(180deg, #6fd08a, #45b06a); box-shadow: 0 5px 0 #2f8a4f; }
#btn-auth-register:hover { filter: brightness(1.06); transform: translateY(-3px) scale(1.03); background: linear-gradient(180deg, #7bd695, #4cb872); box-shadow: 0 8px 0 #2f8a4f, 0 12px 18px rgba(0, 0, 0, .3); }
#btn-auth-register:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f8a4f; }
.auth-logged { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px; }
.auth-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.auth-actions { display: flex; gap: 8px; }
.auth-logged .auth-who { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: #eaf2ee; background: none; border: none; padding: 4px 8px; border-radius: 10px; cursor: pointer; transition: background .15s ease; }
.auth-logged .auth-who:hover { background: rgba(255,255,255,.12); }
.auth-logged .auth-who ion-icon { font-size: 22px; color: var(--accent); }
.rank-badge { height: 28px; width: auto; object-fit: contain; flex: 0 0 auto; }
.auth-logged .auth-who .rank-badge { height: 34px; }
.auth-progress { display: flex; align-items: center; gap: 10px; }
.lvl-chip { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #eaf2ee; background: var(--accent); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; }
.xp-bar { flex: 1; height: 10px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #6fd08a, #d9a441); border-radius: 999px; transition: width .4s ease; }
.coin-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #ffd87a; background: rgba(0,0,0,.3); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,216,122,.4); }
.shop-coins, .shop-diamonds { float: right; margin-top: -6px; }
.shop-diamonds { margin-left: 6px; }
.swatch .price { font-size: 12px; font-weight: 800; color: #ffd87a; }
.swatch.owned { outline: 2px solid #6fd08a; outline-offset: 1px; }
.swatch.owned .price { color: #9ad8a9; }

/* Purchase celebration */
#purchase-celebration { z-index: 80; }
#celebrate-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#celebrate-box { position: relative; z-index: 2; text-align: center; animation: celebPop .5s cubic-bezier(.2,1.6,.4,1) both; }
.celebrate-preview { --cw: 130px; width: 130px; height: 178px; border-radius: 13px; margin: 0 auto 18px; box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 18px 50px rgba(0,0,0,.55); animation: celebShine 2.2s ease-in-out infinite; }
#celebrate-box h2 { margin: 0 0 4px; color: #fff; font-size: 30px; }
#celebrate-sub { margin: 0; color: #ffd87a; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
@keyframes celebPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes celebShine { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
/* Wheel-result reveal: same confetti pop-up fanfare as a shop purchase. */
#wheel-celebration { z-index: 80; }
#wheel-celebration-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#wheel-celebration-box { position: relative; z-index: 2; text-align: center; animation: celebPop .5s cubic-bezier(.2,1.6,.4,1) both; }
#wheel-celebration-icon { font-size: 90px; line-height: 1; margin-bottom: 10px; animation: celebShine 2.2s ease-in-out infinite; }
#wheel-celebration-box h2 { margin: 0; color: #fff; font-size: 26px; }
.auth-btn { padding: 7px 16px; font-size: 14px; border-radius: 10px; flex: 0 0 auto; }

/* Cosmetics / shop / profile / progress overlays share the rules-card shell */
.rules-card h3 { margin: 14px 0 8px; font-size: 16px; color: #dceee5; }
.big-xp { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.big-xp .xp-bar { height: 16px; }
.big-xp .lvl-chip { font-size: 15px; padding: 5px 14px; }
.stat-row { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.14); color: #eaf2ee; font-size: 17px; }
.stat-row:last-child { border-bottom: none; }
.stat-row b { color: #fff; }
.profile-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.14); color: #f2f7f4; cursor: pointer; }
.profile-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.profile-toggle-copy { display: grid; gap: 3px; min-width: 0; }
.profile-toggle small { color: #cfe0d7; font-size: 13px; line-height: 1.25; }
.roadmap { list-style: none; padding: 0; margin: 0; }
.roadmap li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.12); color: #eaf2ee; font-size: 16px; }
.roadmap li.done { opacity: .55; }
.roadmap .rm-lvl { flex: 0 0 48px; font-weight: 800; color: var(--accent); }
.roadmap .rm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mini reward preview in the progression roadmap — a shrunken card swatch so the
   player sees the actual skin they're grinding toward, not just its name. */
.roadmap .rm-preview {
  flex: 0 0 auto;
  --cw: 30px;
  width: 30px; height: 42px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  /* paintCosmeticPreview() fills the className/background; these defaults only
     apply while the preview is empty (e.g. an unknown type). */
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.roadmap .rm-hint { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #9fb0a8; }
.roadmap .rm-check { margin-left: auto; color: #6fd08a; font-weight: 900; }
/* Battle-pass challenge rows */
.challenge { background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.challenge.done { opacity: .62; }
/* Locked (pass not purchased): keep the progress bar readable but tint the row
   and desaturate the reward so it clearly reads "buy the pass to claim". */
.challenge.locked { opacity: .8; border-style: dashed; border-color: rgba(217,164,65,.35); }
.challenge.locked .ch-reward { color: rgba(255,216,122,.55); }
.challenge.locked .ch-name { color: #d6e2db; }
.ch-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ch-name { font-weight: 700; color: #fff; font-size: 15px; }
.ch-reward { font-weight: 800; color: #ffd87a; font-size: 14px; }
.ch-bar { height: 9px; }
.ch-progress { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: #cfe0d7; }
.bp-locked { text-align: center; background: rgba(0,0,0,.18); border: 1px dashed rgba(217,164,65,.5); border-radius: 14px; padding: 18px; }
.bp-locked p { margin: 0 0 14px; color: #eaf2ee; font-size: 15px; }
.bp-locked .primary { padding: 12px 22px; font-size: 17px; }
/* Compact banner sits above the (still-visible) challenge list when the pass is
   not owned: shorter padding, smaller button — it announces the unlock, the rows
   below show the accruing progress. */
.bp-locked.bp-locked-compact { padding: 12px 14px; margin: 6px 0 10px; }
.bp-locked.bp-locked-compact p { margin: 0 0 10px; font-size: 14px; }
.bp-locked.bp-locked-compact .primary { padding: 9px 18px; font-size: 15px; }
/* Achievement list (long-term goals, reached or in progress). */
.ach-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); margin-bottom: 8px; }
.ach-item.done { background: rgba(74,156,90,.18); }
.ach-item.claimed { opacity: .82; }
.ach-check { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; background: rgba(0,0,0,.25); color: #cfe; }
.ach-item.claimed .ach-check { background: var(--accent); color: #1a1a22; }
.ach-item.done .ach-check { background: rgba(255,216,122,.3); color: #ffd87a; }
.ach-info { flex: 1; min-width: 0; }
.ach-info b { display: block; color: #eaf2ee; font-size: 16px; }
.ach-prog { font-size: 13px; color: #9fb0a8; margin: 2px 0 5px; }
.ach-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,.3); overflow: hidden; }
.ach-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ffd87a); border-radius: 4px; }

/* Daily hub: login streak, wheel, daily quests. */
.daily-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent); color: #1a1a22; font-size: 12px; font-weight: 800; vertical-align: middle; }
.daily-streak { text-align: center; background: rgba(255,216,122,.12); border: 1px solid rgba(255,216,122,.3); border-radius: 12px; padding: 10px; margin-bottom: 12px; color: #ffe9b0; font-size: 15px; }
.streak-flame { font-size: 20px; }

/* Wheel of Fortune — a premium labeled prize wheel with hub, rim and pointer. */
.wheel-area { position: relative; width: 280px; height: 280px; margin: 14px auto 6px; }
.wheel {
  position: relative; width: 280px; height: 280px; border-radius: 50%;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.6));
  transition: transform 5.2s cubic-bezier(.13,.84,.16,1);
  will-change: transform;
}
/* outer rim: a gold gradient ring around the whole wheel */
.wheel-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe6a8, #c79a3a, #ffe6a8, #8a6516, #ffe6a8, #c79a3a, #ffe6a8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 0 18px rgba(255,216,122,.35);
}
.wheel-segments { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; }
/* each segment is a full circle with a conic-gradient slice + a rotated label */
.wheel-seg {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
}
/* segment label: position (left/top) + centering transform are set inline per-slice
   by buildWheelSegments(); only visual styling lives here. */
.wheel-seg-label {
  position: absolute;
  font-weight: 800; font-size: 16px; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  white-space: nowrap;
}
/* glossy highlight overlay */
.wheel-segments::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120px 90px at 35% 25%, rgba(255,255,255,.35), transparent 60%);
}
/* gold hub in the center */
.wheel-hub {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d6, #e7b94e 55%, #8a6516);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.4);
  z-index: 3;
}
.wheel-hub-inner {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd87a);
  box-shadow: inset 0 0 4px rgba(0,0,0,.4);
  z-index: 4;
}
/* pointer at the top, pointing down into the wheel */
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 0; height: 0;
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 30px solid #ffd87a;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
.wheel-pointer::after {
  content: ''; position: absolute; top: -34px; left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d6, #c79a3a);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.wheel-result { text-align: center; min-height: 26px; font-weight: 800; font-size: 17px; color: #ffd87a; margin-top: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.quest-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); margin-bottom: 8px; }
.quest-item.done { background: rgba(74,156,90,.18); }
.quest-item .primary { flex: 0 0 auto; padding: 8px 14px; }
.quest-claimed-tag { color: var(--accent); font-size: 22px; font-weight: 800; flex: 0 0 auto; }

/* Ladder: leagues + leaderboard. */
.ladder-banner-wrap {
  position: relative;
  width: 100%; max-width: 460px;
  margin: 0 auto 8px;
  border-radius: 12px;
  overflow: hidden; /* clips the shimmer sweep to the banner shape */
}
.ladder-banner { display: block; width: 100%; height: auto; border-radius: 12px; }
/* `.replay` is toggled on every openLadder() (remove → reflow → re-add) to
   restart the one-shot entrance and the perpetual float + glow. */
.ladder-banner-wrap.replay {
  animation: ladderBannerIn 1.6s cubic-bezier(.22,.61,.36,1) both,
             ladderFloat 9s ease-in-out 1.6s infinite,
             ladderGlow 9s ease-in-out 1.6s infinite;
}
@keyframes ladderBannerIn {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: none; }
}
/* Gentle, barely-there float for the large banner — much subtler than the home
   logo's float: a few pixels, no rotation, slow cycle. */
@keyframes ladderFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes ladderGlow {
  0%, 100% { filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
  50%      { filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
}
.ladder-standing { text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.my-league { font-size: 22px; font-weight: 800; color: #ffd87a; display: flex; align-items: center; justify-content: center; gap: 10px; }
.my-league .rank-badge { height: 30px; }
/* The viewer's own rank icon (big set) — pops in, then keeps a soft permanent
   shimmer so the badge feels alive and earned. */
.my-league .rank-badge-big {
  height: 72px; width: auto; flex: 0 0 auto;
  animation: rankBadgeIn .55s cubic-bezier(.2,1.5,.4,1) both,
             rankBadgeShine 2.6s ease-in-out .6s infinite;
}
@keyframes rankBadgeIn { 0% { transform: scale(.4) rotate(-10deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes rankBadgeShine {
  0%, 100% { filter: brightness(1) drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
  50%      { filter: brightness(1.35) drop-shadow(0 4px 14px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,255,255,.5)); }
}
@media (prefers-reduced-motion: reduce) {
  .ladder-banner-wrap { animation: none; }
  .my-league .rank-badge-big { animation: none; }
}
.my-elo { margin-top: 4px; color: #eaf2ee; }
.my-season { font-size: 12px; color: #9fb0a8; margin-top: 2px; }
.ladder-body { max-height: 340px; overflow-y: auto; }
.ladder-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; margin-top: 6px; }
.ladder-section-head:first-child { margin-top: 0; }
.lsh-icon { font-size: 20px; display: inline-flex; align-items: center; }
.lsh-icon .rank-badge { height: 24px; }
.lsh-name { font-weight: 800; color: #ffd87a; font-size: 15px; }
.lsh-range { margin-left: auto; font-size: 12px; font-weight: 700; color: #9fb0a8; font-variant-numeric: tabular-nums; }
.ladder-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 6px; }
.ladder-row.me { background: rgba(217,164,65,.22); outline: 1px solid rgba(255,216,122,.5); }
.lr-rank { width: 42px; flex: 0 0 auto; font-weight: 800; color: #ffd87a; text-align: right; }
.lr-name { flex: 1; min-width: 0; color: #eaf2ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-elo { flex: 0 0 auto; color: #9fb0a8; font-variant-numeric: tabular-nums; }
/* Variant badge on the open-tables list (30 for Rami 30, lightning for Blitz). */
.ot-variant { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.cash-hint { font-size: 12px; color: #ffd87a; font-weight: 700; }
.swatch.pack { width: 100px; }
.swatch.premium .price { color: #b8d8ff; }
/* Admin editor */
.admin-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #eaf2ee; }
.admin-item .ai-name { flex: 1 1 130px; min-width: 130px; font-weight: 700; color: #fff; line-height: 1.2; }
.admin-item .ai-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.ai-price { width: 64px; padding: 5px 7px; font-size: 13px; text-align: left; }
/* mini swatch + saved/unsaved pill inside each admin row */
.admin-item .ai-swatch { --cw: 30px; width: 30px; height: 42px; border-radius: 5px; flex: 0 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.ai-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.ai-dot.clean { background: #46d17a; }
.ai-dot.dirty { background: #f0a93b; animation: aiDotPulse 1.3s ease-in-out infinite; }
@keyframes aiDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
#ad-save-all.dirty { box-shadow: 0 0 0 3px rgba(240,169,59,.55); }
#ad-save-all:disabled { opacity: .65; cursor: progress; }
.admin-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #f2f7f4;
  cursor: pointer;
}
.admin-mode-toggle:hover { background: rgba(255, 255, 255, .08); }
.admin-mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.admin-mode-copy { display: grid; gap: 3px; min-width: 0; }
.admin-mode-copy b { color: #fff; font-size: 15px; line-height: 1.15; }
.admin-mode-copy small { color: #cfe0d7; font-size: 13px; line-height: 1.25; }
.admin-mode-toggle input:focus-visible ~ .switch { outline: 2px solid rgba(255,216,122,.8); outline-offset: 3px; }
.admin-mode-toggle input:checked ~ .switch { background: var(--accent); }
.admin-mode-toggle input:checked ~ .switch::after { transform: translateX(18px); }
.cosmetics-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 84px; padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; }
.swatch:hover:not(.locked) { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.swatch-preview { --cw: 52px; width: 52px; height: 70px; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.swatch-preview.mini-card-face { position: relative; color: var(--card-black); font-family: system-ui, 'Segoe UI', Arial, sans-serif; font-weight: 800; overflow: hidden; }
.swatch-preview.mini-card-face .corner { position: absolute; left: 8%; top: 6%; font-size: 14px; line-height: 1; z-index: 1; }
.swatch-preview.mini-card-face .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 29px; z-index: 1; }
.swatch-name { font-weight: 700; text-align: center; line-height: 1.1; }
.swatch.locked { opacity: .5; cursor: not-allowed; }
.swatch.equipped { outline: 3px solid var(--accent); outline-offset: 1px; }
.swatch-lock { font-size: 11px; color: var(--accent); font-weight: 800; }
.swatch-tick { position: absolute; top: 4px; right: 6px; color: var(--accent); font-weight: 900; }
.rules-card {
  position: relative;
  width: min(580px, 94vw); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #2f6b54, #28583f);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 22px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.rules-card::-webkit-scrollbar { width: 10px; }
.rules-card::-webkit-scrollbar-track { background: transparent; }
.rules-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.rules-card::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }
.rules-card h2 { margin: 0 0 12px; font-size: 28px; }
.rules-list { list-style: none; padding: 0; margin: 0 0 16px; }
.rules-list li { padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #f2f7f4; font-size: 18px; line-height: 1.45; }
.rules-list li:last-child { border-bottom: none; }
.rules-list strong { color: #fff; }
.rules-card > button { width: 100%; }
.overlay > .overlay-close {
  position: fixed;
  top: max(12px, calc(5vh + 8px));
  right: max(12px, calc((100vw - min(580px, 94vw)) / 2 + 10px));
  z-index: 65;
  display: grid; place-items: center;
  width: 28px; height: 28px; min-width: 28px;
  padding: 0;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.overlay > .overlay-close:hover { background: transparent; opacity: .78; transform: none; }
.overlay > .overlay-close:active { transform: none; opacity: .62; }
.overlay-close ion-icon { font-size: 24px; --ionicon-stroke-width: 38px; }

/* Game-over celebration */
.over-panel { text-align: center; }
.over-logo { width: min(220px, 58vw); margin: 0 auto 8px;
  animation: logoPopIn .55s cubic-bezier(.2, 1.5, .4, 1) both, logoFloat 3.4s ease-in-out .55s infinite, logoGlow 3.4s ease-in-out .55s infinite; }
.over-wordmark {
  width: min(250px, 64vw);
  margin: 0 auto 12px;
  animation: logoPopIn .55s cubic-bezier(.2, 1.5, .4, 1) both, logoFloat 3.4s ease-in-out .55s infinite, logoGlow 3.4s ease-in-out .55s infinite;
}
.over-wordmark .logo-main {
  font-size: clamp(46px, 11vw, 78px);
  -webkit-text-stroke-width: 2px;
  text-shadow: 0 5px 0 #ef8a1f, 0 9px 0 #0f2c49, 0 14px 20px rgba(0, 0, 0, .4);
}
.over-wordmark .logo-subline {
  font-size: clamp(19px, 5vw, 32px);
  border-width: 2px;
  border-radius: 12px;
}
@keyframes logoPopIn { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
#over-title { font-size: 32px; margin: 0 0 4px; line-height: 1.1; }
#over-title ion-icon { font-size: .9em; vertical-align: -4px; color: #ffd24f; }
.over-sub { margin: 0 0 16px; color: #eafdf0; font-size: 17px; font-weight: 700; }
.over-rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.reward-chip {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.reward-chip b { display: block; font-size: 18px; line-height: 1; color: #fff; }
.reward-chip span { display: block; margin-top: 4px; color: #dceee5; font-size: 13px; font-weight: 700; line-height: 1.15; }
.reward-chip.highlight { background: rgba(255, 205, 82, .18); border-color: rgba(255, 205, 82, .42); }
@media (max-width: 460px) {
  .over-rewards { grid-template-columns: 1fr; }
}
.over-scores li { font-size: 17px; }
.over-scores .score-cell { margin-left: auto; font-weight: 800; white-space: nowrap; }
.over-scores .delta { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.over-scores li.reached { color: #ff9b8a; }

/* Confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti-piece { position: absolute; top: -24px; width: 10px; height: 15px; border-radius: 2px; opacity: .95; transform: rotate(var(--rot)); animation-name: confettiFall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes confettiFall { to { transform: translateY(108vh) rotate(calc(var(--rot) + 620deg)); opacity: .85; } }

/* Table — fills the viewport: opponents top, play area middle, hand bottom */
#screen-table { background:
  radial-gradient(1100px 720px at 50% 40%, var(--felt), var(--felt-edge));
  justify-content: space-between;
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } /* never page-scroll; melds shrink to fit */
#screen-table.felt-cyberpunk {
  background: 
    linear-gradient(rgba(255, 0, 127, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 243, 255, 0.04) 1px, transparent 1px),
    radial-gradient(1100px 720px at 50% 40%, var(--felt), var(--felt-edge));
  background-size: 50px 50px, 50px 50px, 100% 100%;
}
#screen-table.felt-aurora {
  position: relative;
}
#screen-table.felt-aurora::before {
  content: ""; position: absolute; inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(46, 213, 163, 0.18) 0%, transparent 50%), 
    radial-gradient(circle at 80% 70%, rgba(0, 243, 255, 0.12) 0%, transparent 50%);
  opacity: 0.8;
  animation: auroraPulse 8s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes auroraPulse {
  0% { opacity: 0.4; transform: scale(1); filter: blur(5px); }
  100% { opacity: 0.9; transform: scale(1.15); filter: blur(2px); }
}
.opponents { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 16px 14px 0; width: 100%; flex: 0 0 auto; }
.seat { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 16px; min-width: 122px; text-align: center; }
.seat.turn { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217,164,65,.4); }
.seat .name { font-weight: 700; font-size: 15px; }
.seat .meta { display: flex; align-items: baseline; justify-content: center; font-size: 12px; color: #d6e2da; white-space: nowrap; }
.seat-timer { font-size: inherit; font-weight: 800; color: var(--accent); letter-spacing: .3px; }
.seat-timer-separator { margin: 0 5px; color: rgba(214,226,218,.75); }
.seat-timer.low { color: var(--danger); }

.center { display: flex; gap: clamp(20px, 4vw, 56px); justify-content: center; align-items: center; flex: 0 0 auto; padding: 6px 0; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile-label { font-size: 11px; color: #cfe0d7; text-transform: uppercase; letter-spacing: 1px; }
.count { font-size: 13px; color: #cfe0d7; font-weight: 700; }
#stock, #discard { transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease; }
#stock.drawable, #discard.drawable { cursor: pointer; box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(0,0,0,.5); }
#stock.drawable:hover, #discard.drawable:hover { transform: translateY(-8px); }
#discard.dragover { box-shadow: 0 0 0 4px var(--accent); transform: scale(1.07); }
/* On my draw turn, both piles gently wiggle to invite me to draw. Softer than
   the old late-timer shake since it now runs from the start of the turn. */
@keyframes stockNudge {
  0%, 100% { transform: none; }
  35% { transform: translateX(-2px) rotate(-1.1deg); }
  55% { transform: translateX(2px) rotate(1.1deg); }
  75% { transform: translateX(-1px); }
}
#stock.nudge, #discard.nudge { animation: stockNudge 2.2s ease-in-out infinite; box-shadow: 0 0 0 3px var(--accent), 0 12px 28px rgba(0,0,0,.55); }
/* keep the user's hover/drag interaction readable over the looping nudge */
#stock.nudge:hover, #discard.nudge:hover { animation-play-state: paused; }

.melds { display: flex; gap: var(--meld-gap, 14px); flex-wrap: wrap; justify-content: center; align-content: flex-start; padding: 8px 14px; width: 100%; flex: 1 1 auto; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .32) transparent; }
#screen-table.has-melds .melds { min-height: 92px; }
.melds::-webkit-scrollbar { width: 9px; }
.melds::-webkit-scrollbar-track { background: transparent; }
.melds::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.melds::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42); }
.meld { display: flex; gap: 0; padding: 8px 12px; background: rgba(0,0,0,.18); border-radius: 12px; align-self: flex-start; }
.meld .card { box-shadow: -2px 2px 6px rgba(0,0,0,.4); }
.meld .card + .card { margin-left: calc(var(--cw) * var(--meld-overlap, .40) * -1); }   /* overlap laid-down cards; --meld-overlap set on .melds by fitMelds */
.meld.droppable { outline: 2px dashed var(--accent); }
/* a reclaimable joker (échange de joker): click to swap it back for its natural card */
.meld .card.swappable { cursor: pointer; outline: 2px solid #e8b84b; outline-offset: 1px; position: relative; z-index: 3; animation: swapPulse 1.6s ease-in-out infinite; }
.meld .card.swappable:hover { transform: translateY(-4px); transition: transform .15s ease; }
.meld .card.swappable.swap-drop { outline-color: #f7ffd0; box-shadow: 0 0 0 4px rgba(232, 184, 75, .28), 0 0 18px rgba(247, 255, 208, .7), -2px 2px 6px rgba(0,0,0,.4); transform: translateY(-5px); }
@keyframes swapPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,75,0), -2px 2px 6px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 10px 2px rgba(232,184,75,.75), -2px 2px 6px rgba(0,0,0,.4); }
}

/* Cards (pure CSS, size driven by --cw) */
.card {
  width: var(--cw); height: calc(var(--cw) * var(--card-ratio)); border-radius: calc(var(--cw) * .11);
  background: var(--card-bg); position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.45);
  flex: 0 0 auto; font-weight: 700; user-select: none;
  font-family: system-ui, 'Segoe UI', Arial, sans-serif;   /* crisp rank/suit, not the display font */
}
.card.back,
.card.back-blue,
.swatch-preview.back-blue { background: repeating-linear-gradient(45deg, #36506b 0 8px, #2b4156 8px 16px); }
.card.back-red, .swatch-preview.back-red { background: repeating-linear-gradient(45deg, #834142 0 8px, #653036 8px 16px); }
.card.back-emerald, .swatch-preview.back-emerald { background: repeating-linear-gradient(45deg, #2f7a5a 0 8px, #215840 8px 16px); }
.card.back-gold, .swatch-preview.back-gold { background: repeating-linear-gradient(45deg, #b8862f 0 8px, #8a611c 8px 16px); }
.card.back-violet, .swatch-preview.back-violet { background: repeating-linear-gradient(45deg, #5b3a8a 0 8px, #432a69 8px 16px); }
.card.back-rose, .swatch-preview.back-rose { background: repeating-linear-gradient(45deg, #b5546e 0 8px, #8a3c52 8px 16px); }
.card.back-onyx, .swatch-preview.back-onyx { background: repeating-linear-gradient(45deg, #2a2f3a 0 8px, #16191f 8px 16px); }
.card.back-sapphire, .swatch-preview.back-sapphire { background: repeating-linear-gradient(45deg, #2b5c8f 0 8px, #1d3d63 8px 16px); }
.card.back-ruby, .swatch-preview.back-ruby { background: repeating-linear-gradient(45deg, #a8233c 0 8px, #7b1424 8px 16px); }
.card.back-platinum, .swatch-preview.back-platinum { background: repeating-linear-gradient(45deg, #b2bec3 0 8px, #95a5a6 8px 16px); }
.card.back-nebula, .swatch-preview.back-nebula { background: repeating-linear-gradient(-45deg, #301934 0 6px, #483d8b 6px 12px, #8a2be2 12px 18px); }
.card.back-cyber, .swatch-preview.back-cyber { background: repeating-linear-gradient(90deg, #120e24 0 4px, #00f3ff 4px 5px, #120e24 5px 9px, #ff007f 9px 10px); }
.card.back-wood, .swatch-preview.back-wood { background: repeating-linear-gradient(0deg, #4a2511 0 5px, #5c2e16 5px 12px, #3d1e0d 12px 14px); }
.card.back-marble, .swatch-preview.back-marble { background: linear-gradient(135deg, #f3ede2 0%, #e3d7c3 50%, #cfaa68 100%); position: relative; }
.card.back-marble::after, .swatch-preview.back-marble::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 60%), repeating-linear-gradient(65deg, rgba(184,134,11,0.15) 0 2px, transparent 2px 15px); pointer-events: none; }
.card.back-tartan, .swatch-preview.back-tartan { background: repeating-linear-gradient(45deg, #1b3f2b 0 10px, #0f2a1d 10px 20px, #b8862f 20px 22px); }

/* Card faces — the look of the cards themselves (override the default card-bg) */
.swatch-preview.face-classic { background: var(--card-bg); }
.card.face-parchment, .swatch-preview.face-parchment { background: #ece0c4; }
.card.face-mint, .swatch-preview.face-mint { background: #e6f2ea; }
.card.face-slate, .swatch-preview.face-slate { background: #dde2ea; }
.card.face-royal, .swatch-preview.face-royal { background: linear-gradient(145deg, #fff7df 0%, #f6e6bc 48%, #d9ad4a 100%); box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 2px rgba(13,42,91,.70); }
.swatch-preview.face-rosebleu { background: linear-gradient(135deg, #fff 0 43%, #d05377 44% 50%, #2681ab 51% 100%); }
.card.face-chocolate, .swatch-preview.face-chocolate { background: #f4ece1; }
.swatch-preview.face-chocolate { background: linear-gradient(135deg, #f4ece1 0 43%, #c2593f 44% 50%, #452c1e 51% 100%); }
.swatch-preview.face-noirmetal { background: linear-gradient(160deg, #1b1920 0%, #2a2310 100%); }
.swatch-preview.face-noirmetal.mini-card-face.black { color: #e8c25a; }
.card.face-lavender, .swatch-preview.face-lavender { background: #edf0f8; }
.swatch-preview.face-lavender { background: linear-gradient(135deg, #edf0f8 0 43%, #a54d86 44% 50%, #2b2e4a 51% 100%); }
.card.face-royal-classic,
.swatch-preview.face-royal-classic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e3 50%, #eee3cb 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .022) #d9be8b,
    inset 0 0 calc(var(--cw) * .12) rgba(150, 120, 60, .15);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
.card.face-royal-classic::before,
.swatch-preview.face-royal-classic::before {
  content: "";
  position: absolute;
  inset: calc(var(--cw) * .022 + 1px);
  border: calc(var(--cw) * .01) solid rgba(217, 190, 139, 0.6);
  border-radius: calc(var(--cw) * .09);
  pointer-events: none;
  z-index: 0;
}
.card.face-royal-classic::after,
.swatch-preview.face-royal-classic::after {
  content: "";
  position: absolute;
  inset: 15%;
  background: radial-gradient(circle at 50% 50%, rgba(217, 190, 139, 0.08) 0%, transparent 70%);
  border: calc(var(--cw) * .006) dashed rgba(217, 190, 139, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.card.face-royal-classic .corner,
.card.face-royal-classic .pip {
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.card.face-royal-classic.red { color: #8c1d40; }
.card.face-royal-classic.black { color: #242321; }
.card.face-royal-classic.joker .joker-svg,
.card.face-royal-classic.joker .joker-label { color: #b38e46; }
/* Rose & Navy: keep the white card face, only recolour the ink — red suits become rose, black suits become dark navy */
.card.face-rosebleu.red { color: #d05377; }
.card.face-rosebleu.black { color: #2681ab; }
/* Chocolate: warm cream face, terracotta red suits, dark espresso black suits */
.card.face-chocolate.red { color: #c2593f; }
.card.face-chocolate.black { color: #452c1e; }
/* Noir & Or/Argent: black face on all cards — gold replaces black suits (♠♣), silver replaces red suits (♥♦) */
.card.face-noirmetal { background: linear-gradient(160deg, #1b1920 0%, #2a2310 100%); }
.card.face-noirmetal.red { color: #cfd6e0; }
.card.face-noirmetal.black { color: #e8c25a; }
/* Lavender: pale lavender face, violet-pink red suits, indigo-black black suits */
.card.face-lavender.red { color: #a54d86; }
.card.face-lavender.black { color: #2b2e4a; }
/* Noir & Or/Argent: distinctive serif numerals + elongated suit insignas */
.card.face-noirmetal { font-family: Georgia, 'Times New Roman', 'Playfair Display', serif; font-weight: 700; }
.card.face-noirmetal .pip { transform: scaleY(1.45); }
/* The Joker adopts the Noir & Or/Argent skin too (dark face + gold art) */
.card.face-noirmetal.joker { background: linear-gradient(160deg, #1b1920 0%, #2a2310 100%); }
.card.face-noirmetal.joker .joker-svg, .card.face-noirmetal.joker .joker-label { color: #e8c25a; }
.card.slot { background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.3); box-shadow: none; }
.card .corner { position: absolute; left: 7%; top: 4%; font-size: calc(var(--cw) * .26); line-height: 1; }
.card .corner.br { left: auto; right: 7%; bottom: 4%; top: auto; transform: rotate(180deg); }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); }
.card.red { color: var(--card-red); }
.card.black { color: var(--card-black); }
.card.joker .pip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; }
.card.joker .joker-svg { width: 50%; height: auto; color: #8a6d2f; }
.card.joker .joker-label { font-size: calc(var(--cw) * .15); color: #8a6d2f; font-weight: 800; letter-spacing: .5px; }
.card.joker { background: var(--card-bg); }

/* Theme-specific Jokers */
.card.face-parchment.joker { background: #ece0c4; }
.card.face-parchment.joker .joker-svg, .card.face-parchment.joker .joker-label { color: #5c4033; }

.card.face-mint.joker { background: #e6f2ea; }
.card.face-mint.joker .joker-svg, .card.face-mint.joker .joker-label { color: #2d5a27; }

.card.face-slate.joker { background: #dde2ea; }
.card.face-slate.joker .joker-svg, .card.face-slate.joker .joker-label { color: #2c3e50; }

.card.face-rosebleu.joker { background: #ffffff; }
.card.face-rosebleu.joker .joker-svg, .card.face-rosebleu.joker .joker-label { color: #2681ab; }

.card.face-chocolate.joker { background: #f4ece1; }
.card.face-chocolate.joker .joker-svg, .card.face-chocolate.joker .joker-label { color: #452c1e; }

.card.face-lavender.joker { background: #edf0f8; }
.card.face-lavender.joker .joker-svg, .card.face-lavender.joker .joker-label { color: #2b2e4a; }

.card.face-royal-classic.joker {
  background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e3 50%, #eee3cb 100%);
}

.card.face-royal.joker {
  background: linear-gradient(145deg, #fff7df 0%, #f6e6bc 48%, #d9ad4a 100%);
}

/* Polished face skins: richer paper/ink treatments while keeping the same card DOM. */
.card.face-parchment,
.card.face-chocolate,
.card.face-mint,
.card.face-slate,
.card.face-lavender,
.card.face-royal,
.card.face-cyberpunk,
.card.face-vintage,
.card.face-aurora,
.card.face-marble,
.card.face-sunset,
.card.face-forest,
.card.face-royal-purple,
.card.face-charcoal,
.card.face-ocean,
.card.face-gold,
.swatch-preview.face-parchment,
.swatch-preview.face-chocolate,
.swatch-preview.face-mint,
.swatch-preview.face-slate,
.swatch-preview.face-lavender,
.swatch-preview.face-royal,
.swatch-preview.face-cyberpunk,
.swatch-preview.face-vintage,
.swatch-preview.face-aurora,
.swatch-preview.face-marble,
.swatch-preview.face-sunset,
.swatch-preview.face-forest,
.swatch-preview.face-royal-purple,
.swatch-preview.face-charcoal,
.swatch-preview.face-ocean,
.swatch-preview.face-gold {
  --face-deco-inset: 2px;
  --face-deco-radius: max(4px, calc((var(--cw) * .11) - var(--face-deco-inset)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.card.face-parchment .corner,
.card.face-parchment .pip,
.card.face-chocolate .corner,
.card.face-chocolate .pip,
.card.face-mint .corner,
.card.face-mint .pip,
.card.face-slate .corner,
.card.face-slate .pip,
.card.face-lavender .corner,
.card.face-lavender .pip,
.card.face-royal .corner,
.card.face-royal .pip,
.card.face-cyberpunk .corner,
.card.face-cyberpunk .pip,
.card.face-vintage .corner,
.card.face-vintage .pip,
.card.face-aurora .corner,
.card.face-aurora .pip,
.card.face-marble .corner,
.card.face-marble .pip,
.card.face-sunset .corner,
.card.face-sunset .pip,
.card.face-forest .corner,
.card.face-forest .pip,
.card.face-royal-purple .corner,
.card.face-royal-purple .pip,
.card.face-charcoal .corner,
.card.face-charcoal .pip,
.card.face-ocean .corner,
.card.face-ocean .pip,
.card.face-gold .corner,
.card.face-gold .pip {
  z-index: 1;
}

.card.face-parchment,
.swatch-preview.face-parchment {
  --face-parchment-bg:
    radial-gradient(circle at 18% 17%, rgba(122, 73, 35, .23), transparent 22%),
    radial-gradient(circle at 76% 70%, rgba(109, 61, 28, .17), transparent 20%),
    radial-gradient(ellipse at 50% 103%, rgba(93, 52, 24, .20), transparent 28%),
    repeating-linear-gradient(96deg, rgba(92, 56, 29, .08) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #f4dfad 0%, #e7c983 48%, #cfaa68 100%);
  background: var(--face-parchment-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .018) rgba(110, 69, 34, .60),
    inset 0 0 calc(var(--cw) * .18) rgba(91, 49, 20, .22);
  font-family: 'Lucida Calligraphy', 'Segoe Script', 'Palatino Linotype', Georgia, serif;
  font-weight: 800;
}
.card.face-parchment::before,
.swatch-preview.face-parchment::before {
  content: "";
  position: absolute;
  inset: var(--face-deco-inset);
  border: calc(var(--cw) * .014) solid rgba(92, 56, 29, .46);
  border-radius: var(--face-deco-radius);
  box-shadow:
    inset 0 0 0 calc(var(--cw) * .010) rgba(255, 240, 186, .42),
    0 0 calc(var(--cw) * .05) rgba(79, 43, 17, .18);
  pointer-events: none;
  z-index: 0;
}
.card.face-parchment::after,
.swatch-preview.face-parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 8%, rgba(84, 44, 18, .20), transparent 15%),
    radial-gradient(circle at 91% 92%, rgba(84, 44, 18, .17), transparent 16%),
    linear-gradient(90deg, rgba(121, 77, 38, .15), transparent 18% 82%, rgba(121, 77, 38, .15));
  pointer-events: none;
  z-index: 0;
}
.card.face-parchment .corner {
  font-family: 'Lucida Calligraphy', 'Segoe Script', 'Palatino Linotype', Georgia, serif;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255, 235, 181, .52);
}
.card.face-parchment .pip,
.swatch-preview.face-parchment.mini-card-face .pip {
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}
.card.face-parchment .pip { text-shadow: 0 2px 0 rgba(83, 45, 18, .10); }
.card.face-parchment.red { color: #8f2f26; }
.card.face-parchment.black { color: #4d321c; }
.card.face-parchment.joker { background: var(--face-parchment-bg); }
.card.face-parchment.joker .joker-svg,
.card.face-parchment.joker .joker-label { color: #5c341f; }

.card.face-chocolate,
.swatch-preview.face-chocolate {
  --face-chocolate-bg:
    radial-gradient(circle at 78% 20%, rgba(105, 56, 31, .14), transparent 24%),
    radial-gradient(circle at 22% 78%, rgba(176, 99, 63, .13), transparent 25%),
    repeating-linear-gradient(135deg, rgba(86, 47, 26, .055) 0 2px, transparent 2px 9px),
    linear-gradient(150deg, #fff4e2 0%, #f0d9b9 52%, #dec09a 100%);
  background: var(--face-chocolate-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .018) rgba(92, 49, 28, .72),
    inset 0 0 0 calc(var(--cw) * .045) rgba(190, 121, 70, .18);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
}
.card.face-chocolate::before,
.swatch-preview.face-chocolate::before {
  content: "";
  position: absolute;
  inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(79, 40, 22, .42);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .06) rgba(100, 53, 31, .16);
  pointer-events: none;
  z-index: 0;
}
.card.face-chocolate::after,
.swatch-preview.face-chocolate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(116, 62, 33, .12), transparent 13% 87%, rgba(116, 62, 33, .12)),
    linear-gradient(180deg, rgba(255, 245, 224, .26), transparent 18% 82%, rgba(116, 62, 33, .10));
  pointer-events: none;
  z-index: 0;
}
.card.face-chocolate .corner,
.card.face-chocolate .pip { text-shadow: 0 1px 0 rgba(255, 237, 207, .52); }
.card.face-chocolate.red { color: #b54b34; }
.card.face-chocolate.black { color: #3f2418; }
.card.face-chocolate.joker { background: var(--face-chocolate-bg); }
.card.face-chocolate.joker .joker-svg,
.card.face-chocolate.joker .joker-label { color: #4a2919; }

.card.face-mint,
.swatch-preview.face-mint {
  --face-mint-bg:
    radial-gradient(circle at 20% 18%, rgba(91, 215, 184, .25), transparent 23%),
    radial-gradient(circle at 82% 76%, rgba(155, 238, 218, .30), transparent 23%),
    repeating-linear-gradient(130deg, rgba(28, 168, 136, .075) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, #fbfffc 0%, #ddfaef 48%, #bcecdf 100%);
  background: var(--face-mint-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .018) rgba(42, 178, 146, .62),
    inset 0 0 calc(var(--cw) * .16) rgba(50, 195, 162, .18);
  font-family: 'Segoe UI Rounded', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 800;
}
.card.face-mint::before,
.swatch-preview.face-mint::before {
  content: "";
  position: absolute;
  inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(31, 154, 127, .40);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 0 calc(var(--cw) * .010) rgba(255, 255, 255, .72);
  pointer-events: none;
  z-index: 0;
}
.card.face-mint::after,
.swatch-preview.face-mint::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(35, 178, 147, .16), transparent 14% 86%, rgba(35, 178, 147, .16)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.48), transparent 36%);
  pointer-events: none;
  z-index: 0;
}
.card.face-mint .corner,
.card.face-mint .pip { text-shadow: 0 1px 0 rgba(255, 255, 255, .72); }
.card.face-mint.red { color: #d24d64; }
.card.face-mint.black { color: #09856f; }
.card.face-mint.joker { background: var(--face-mint-bg); }
.card.face-mint.joker .joker-svg,
.card.face-mint.joker .joker-label { color: #0c8e75; }

.card.face-slate,
.swatch-preview.face-slate {
  --face-slate-bg:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.42), transparent 23%),
    radial-gradient(circle at 78% 83%, rgba(79, 99, 121, .16), transparent 24%),
    repeating-linear-gradient(100deg, rgba(39, 53, 68, .075) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #f4f7fa 0%, #dce5ee 52%, #bbc8d5 100%);
  background: var(--face-slate-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .018) rgba(62, 78, 95, .62),
    inset 0 0 0 calc(var(--cw) * .045) rgba(255,255,255,.24);
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-weight: 850;
}
.card.face-slate::before,
.swatch-preview.face-slate::before {
  content: "";
  position: absolute;
  inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(52, 67, 83, .38);
  border-radius: var(--face-deco-radius);
  box-shadow:
    inset 0 calc(var(--cw) * .028) calc(var(--cw) * .05) rgba(255,255,255,.35),
    inset 0 calc(var(--cw) * -.028) calc(var(--cw) * .06) rgba(49, 64, 80, .16);
  pointer-events: none;
  z-index: 0;
}
.card.face-slate::after,
.swatch-preview.face-slate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 24%, rgba(255,255,255,.22), transparent 18%),
    repeating-linear-gradient(18deg, transparent 0 9px, rgba(55, 70, 88, .055) 9px 10px);
  pointer-events: none;
  z-index: 0;
}
.card.face-slate .corner,
.card.face-slate .pip { text-shadow: 0 1px 0 rgba(255,255,255,.62); }
.card.face-slate.red { color: #96314f; }
.card.face-slate.black { color: #172536; }
.card.face-slate.joker { background: var(--face-slate-bg); }
.card.face-slate.joker .joker-svg,
.card.face-slate.joker .joker-label { color: #23384f; }

.card.face-lavender,
.swatch-preview.face-lavender {
  --face-lavender-bg:
    radial-gradient(circle at 28% 20%, rgba(191, 143, 222, .28), transparent 24%),
    radial-gradient(circle at 74% 79%, rgba(126, 140, 214, .20), transparent 25%),
    repeating-linear-gradient(120deg, rgba(86, 77, 142, .06) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #fbf8ff 0%, #eee6fb 48%, #d8d5f2 100%);
  background: var(--face-lavender-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .018) rgba(116, 89, 164, .55),
    inset 0 0 calc(var(--cw) * .15) rgba(147, 97, 183, .14);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
}
.card.face-lavender::before,
.swatch-preview.face-lavender::before {
  content: "";
  position: absolute;
  inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(111, 86, 164, .38);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 0 calc(var(--cw) * .010) rgba(255,255,255,.54);
  pointer-events: none;
  z-index: 0;
}
.card.face-lavender::after,
.swatch-preview.face-lavender::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(156, 74, 142, .12), transparent 13% 87%, rgba(43, 46, 91, .10)),
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 18% 82%, rgba(43, 46, 91, .08));
  pointer-events: none;
  z-index: 0;
}
.card.face-lavender .corner,
.card.face-lavender .pip { text-shadow: 0 1px 0 rgba(255,255,255,.70); }
.card.face-lavender.red { color: #9b3f8a; }
.card.face-lavender.black { color: #282d5b; }
.card.face-lavender.joker { background: var(--face-lavender-bg); }
.card.face-lavender.joker .joker-svg,
.card.face-lavender.joker .joker-label { color: #38306a; }

.card.face-royal,
.swatch-preview.face-royal {
  --face-royal-bg:
    radial-gradient(ellipse at 50% 48%, rgba(216, 170, 69, .21) 0 17%, rgba(216, 170, 69, .08) 28%, transparent 50%),
    radial-gradient(circle at 24% 23%, rgba(144, 18, 58, .075), transparent 19%),
    radial-gradient(circle at 77% 74%, rgba(18, 54, 118, .09), transparent 21%),
    radial-gradient(ellipse at 50% 118%, rgba(101, 63, 9, .14), transparent 31%),
    repeating-linear-gradient(118deg, rgba(150, 101, 18, .040) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, #fff8e6 0%, #f6e6bc 48%, #d6a83f 100%);
  background: var(--face-royal-bg);
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 calc(var(--cw) * .013) rgba(171, 120, 26, .82),
    inset 0 0 0 calc(var(--cw) * .033) rgba(13, 42, 91, .70),
    inset 0 0 0 calc(var(--cw) * .050) rgba(255, 245, 211, .64),
    inset 0 0 calc(var(--cw) * .17) rgba(107, 68, 12, .18);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
}
.card.face-royal::before,
.swatch-preview.face-royal::before {
  content: "";
  position: absolute;
  inset: 9% 10%;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 32%, rgba(171, 120, 26, .10) 33% 34%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255, 247, 214, .26), transparent 45%),
    radial-gradient(circle at 19% 18%, rgba(18, 54, 118, .10) 0 2%, transparent 3%),
    radial-gradient(circle at 81% 18%, rgba(144, 18, 58, .09) 0 2%, transparent 3%),
    radial-gradient(circle at 19% 82%, rgba(144, 18, 58, .08) 0 2%, transparent 3%),
    radial-gradient(circle at 81% 82%, rgba(18, 54, 118, .09) 0 2%, transparent 3%);
  opacity: .82;
  pointer-events: none;
  z-index: 0;
}
.card.face-royal::after,
.swatch-preview.face-royal::after {
  content: "";
  position: absolute;
  inset: 23% 25%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 225, .34) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(174, 121, 23, .13) 29% 31%, transparent 32% 47%, rgba(174, 121, 23, .09) 48% 50%, transparent 51%),
    repeating-conic-gradient(from 12deg at 50% 50%, rgba(18, 54, 118, .075) 0deg 9deg, transparent 9deg 18deg, rgba(144, 18, 58, .055) 18deg 24deg, transparent 24deg 36deg);
  border-radius: 50%;
  filter: blur(.15px);
  opacity: .44;
  pointer-events: none;
  z-index: 0;
}
.card.face-royal .corner,
.card.face-royal .pip,
.swatch-preview.face-royal.mini-card-face .corner,
.swatch-preview.face-royal.mini-card-face .pip { text-shadow: 0 1px 0 rgba(255, 246, 216, .86), 0 0 calc(var(--cw) * .045) rgba(255, 231, 154, .24); }
.card.face-royal.red,
.swatch-preview.face-royal.mini-card-face.red { color: #9f123d; }
.card.face-royal.black,
.swatch-preview.face-royal.mini-card-face.black { color: #102f73; }
.card.face-royal.joker { background: var(--face-royal-bg); }
.card.face-royal.joker .joker-svg,
.card.face-royal.joker .joker-label { color: #102f73; }

/* Cyberpunk Face */
.card.face-cyberpunk, .swatch-preview.face-cyberpunk {
  background: linear-gradient(135deg, #0d0e15 0%, #151828 50%, #1a1025 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) #ff007f;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
}
.card.face-cyberpunk::before, .swatch-preview.face-cyberpunk::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(0, 243, 255, 0.45);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .06) rgba(0, 243, 255, 0.2);
  pointer-events: none; z-index: 0;
}
.card.face-cyberpunk::after, .swatch-preview.face-cyberpunk::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 0, 127, 0.03) 0 2px, transparent 2px 4px);
  pointer-events: none; z-index: 0;
}
.card.face-cyberpunk.red, .swatch-preview.face-cyberpunk.mini-card-face.red { color: #ff007f; text-shadow: 0 0 5px rgba(255, 0, 127, 0.6); }
.card.face-cyberpunk.black, .swatch-preview.face-cyberpunk.mini-card-face.black { color: #00f3ff; text-shadow: 0 0 5px rgba(0, 243, 255, 0.6); }
.card.face-cyberpunk.joker { background: linear-gradient(135deg, #0d0e15 0%, #151828 50%, #1a1025 100%); }
.card.face-cyberpunk.joker .joker-svg, .card.face-cyberpunk.joker .joker-label { color: #ff007f; text-shadow: 0 0 5px rgba(255, 0, 127, 0.6); }

/* Vintage Face */
.card.face-vintage, .swatch-preview.face-vintage {
  background: linear-gradient(145deg, #ebdcb9 0%, #dfcc9f 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(74, 53, 37, 0.5);
  font-family: Georgia, serif;
  font-weight: 800;
}
.card.face-vintage::before, .swatch-preview.face-vintage::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .014) solid rgba(74, 53, 37, 0.65);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .04) rgba(0, 0, 0, 0.1);
  pointer-events: none; z-index: 0;
}
.card.face-vintage.red, .swatch-preview.face-vintage.mini-card-face.red { color: #9c3d24; }
.card.face-vintage.black, .swatch-preview.face-vintage.mini-card-face.black { color: #33251a; }
.card.face-vintage.joker { background: linear-gradient(145deg, #ebdcb9 0%, #dfcc9f 100%); }
.card.face-vintage.joker .joker-svg, .card.face-vintage.joker .joker-label { color: #33251a; }

/* Aurora Face */
.card.face-aurora, .swatch-preview.face-aurora {
  background: linear-gradient(135deg, #0b1e1c 0%, #142e2a 50%, #0d2526 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(46, 213, 163, 0.3);
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.card.face-aurora::before, .swatch-preview.face-aurora::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(46, 213, 163, 0.5);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .06) rgba(46, 213, 163, 0.2);
  pointer-events: none; z-index: 0;
}
.card.face-aurora.red, .swatch-preview.face-aurora.mini-card-face.red { color: #ff5e7e; }
.card.face-aurora.black, .swatch-preview.face-aurora.mini-card-face.black { color: #2ed5a3; }
.card.face-aurora.joker { background: linear-gradient(135deg, #0b1e1c 0%, #142e2a 50%, #0d2526 100%); }
.card.face-aurora.joker .joker-svg, .card.face-aurora.joker .joker-label { color: #2ed5a3; }

/* Marble Face */
.card.face-marble, .swatch-preview.face-marble {
  background: linear-gradient(135deg, #f7f9fa 0%, #e9ecef 50%, #d8e2dc 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(197, 160, 89, 0.4);
  font-family: Georgia, serif;
  font-weight: 800;
}
.card.face-marble::before, .swatch-preview.face-marble::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .014) solid rgba(197, 160, 89, 0.65);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .04) rgba(0, 0, 0, 0.08);
  pointer-events: none; z-index: 0;
}
.card.face-marble.red, .swatch-preview.face-marble.mini-card-face.red { color: #a82c35; }
.card.face-marble.black, .swatch-preview.face-marble.mini-card-face.black { color: #1f365c; }
.card.face-marble.joker { background: linear-gradient(135deg, #f7f9fa 0%, #e9ecef 50%, #d8e2dc 100%); }
.card.face-marble.joker .joker-svg, .card.face-marble.joker .joker-label { color: #1f365c; }

/* Sunset Face */
.card.face-sunset, .swatch-preview.face-sunset {
  background: linear-gradient(145deg, #fff3e3 0%, #fcd5be 50%, #f69d9d 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(197, 98, 59, 0.4);
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.card.face-sunset::before, .swatch-preview.face-sunset::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(197, 98, 59, 0.6);
  border-radius: var(--face-deco-radius);
  pointer-events: none; z-index: 0;
}
.card.face-sunset.red, .swatch-preview.face-sunset.mini-card-face.red { color: #e04a3f; }
.card.face-sunset.black, .swatch-preview.face-sunset.mini-card-face.black { color: #241f3b; }
.card.face-sunset.joker { background: linear-gradient(145deg, #fff3e3 0%, #fcd5be 50%, #f69d9d 100%); }
.card.face-sunset.joker .joker-svg, .card.face-sunset.joker .joker-label { color: #241f3b; }

/* Forest Face */
.card.face-forest, .swatch-preview.face-forest {
  background: linear-gradient(145deg, #f2f5f1 0%, #dbecd8 50%, #c4ddbe 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(60, 92, 68, 0.35);
  font-family: Georgia, serif;
  font-weight: 800;
}
.card.face-forest::before, .swatch-preview.face-forest::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(60, 92, 68, 0.5);
  border-radius: var(--face-deco-radius);
  pointer-events: none; z-index: 0;
}
.card.face-forest.red, .swatch-preview.face-forest.mini-card-face.red { color: #a52a2a; }
.card.face-forest.black, .swatch-preview.face-forest.mini-card-face.black { color: #1c3829; }
.card.face-forest.joker { background: linear-gradient(145deg, #f2f5f1 0%, #dbecd8 50%, #c4ddbe 100%); }
.card.face-forest.joker .joker-svg, .card.face-forest.joker .joker-label { color: #1c3829; }

/* Royal Purple Face */
.card.face-royal-purple, .swatch-preview.face-royal-purple {
  background: linear-gradient(145deg, #fbf0ff 0%, #ecd8fb 50%, #d7bdf2 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(111, 86, 164, 0.4);
  font-family: Georgia, serif;
  font-weight: 800;
}
.card.face-royal-purple::before, .swatch-preview.face-royal-purple::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .014) solid rgba(212, 175, 55, 0.7);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 0 calc(var(--cw) * .008) rgba(111, 86, 164, 0.3);
  pointer-events: none; z-index: 0;
}
.card.face-royal-purple.red, .swatch-preview.face-royal-purple.mini-card-face.red { color: #8a256f; }
.card.face-royal-purple.black, .swatch-preview.face-royal-purple.mini-card-face.black { color: #3c1660; }
.card.face-royal-purple.joker { background: linear-gradient(145deg, #fbf0ff 0%, #ecd8fb 50%, #d7bdf2 100%); }
.card.face-royal-purple.joker .joker-svg, .card.face-royal-purple.joker .joker-label { color: #3c1660; }

/* Charcoal Face */
.card.face-charcoal, .swatch-preview.face-charcoal {
  background: linear-gradient(135deg, #1e2022 0%, #2b2e30 50%, #3a3f42 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(200, 200, 200, 0.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.card.face-charcoal::before, .swatch-preview.face-charcoal::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(200, 200, 200, 0.4);
  border-radius: var(--face-deco-radius);
  pointer-events: none; z-index: 0;
}
.card.face-charcoal.red, .swatch-preview.face-charcoal.mini-card-face.red { color: #ff3344; }
.card.face-charcoal.black, .swatch-preview.face-charcoal.mini-card-face.black { color: #ffcc00; }
.card.face-charcoal.joker { background: linear-gradient(135deg, #1e2022 0%, #2b2e30 50%, #3a3f42 100%); }
.card.face-charcoal.joker .joker-svg, .card.face-charcoal.joker .joker-label { color: #ffcc00; }

/* Ocean Face */
.card.face-ocean, .swatch-preview.face-ocean {
  background: linear-gradient(145deg, #eef9ff 0%, #cae8f7 50%, #90caf9 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(30, 136, 229, 0.35);
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.card.face-ocean::before, .swatch-preview.face-ocean::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .012) solid rgba(30, 136, 229, 0.5);
  border-radius: var(--face-deco-radius);
  pointer-events: none; z-index: 0;
}
.card.face-ocean.red, .swatch-preview.face-ocean.mini-card-face.red { color: #e53935; }
.card.face-ocean.black, .swatch-preview.face-ocean.mini-card-face.black { color: #0d47a1; }
.card.face-ocean.joker { background: linear-gradient(145deg, #eef9ff 0%, #cae8f7 50%, #90caf9 100%); }
.card.face-ocean.joker .joker-svg, .card.face-ocean.joker .joker-label { color: #0d47a1; }

/* Gold Face */
.card.face-gold, .swatch-preview.face-gold {
  background: linear-gradient(135deg, #fffbf0 0%, #f7e7be 50%, #cfab4c 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw) * .018) rgba(184, 134, 11, 0.4);
  font-family: Georgia, serif;
  font-weight: 800;
}
.card.face-gold::before, .swatch-preview.face-gold::before {
  content: ""; position: absolute; inset: var(--face-deco-inset);
  border: calc(var(--cw) * .014) solid rgba(184, 134, 11, 0.7);
  border-radius: var(--face-deco-radius);
  box-shadow: inset 0 0 calc(var(--cw) * .05) rgba(184, 134, 11, 0.15);
  pointer-events: none; z-index: 0;
}
.card.face-gold.red, .swatch-preview.face-gold.mini-card-face.red { color: #b22222; }
.card.face-gold.black, .swatch-preview.face-gold.mini-card-face.black { color: #1a1917; }
.card.face-gold.joker { background: linear-gradient(135deg, #fffbf0 0%, #f7e7be 50%, #cfab4c 100%); }
.card.face-gold.joker .joker-svg, .card.face-gold.joker .joker-label { color: #1a1917; }


/* Hand — larger cards, sits at the bottom band */
.hand-area { position: relative; width: 100%; background: rgba(0,0,0,.32); border-top: 1px solid rgba(255,255,255,.08); padding: 8px 10px 12px; flex: 0 0 auto; --cw: clamp(64px, 7vw, 112px); }
/* Floating action buttons above the hand (centered cluster — Meld / Confirm / Discard / Clear) */
.float-actions { position: absolute; left: 50%; top: -52px; transform: translateX(-50%); z-index: 45; display: flex; gap: 10px; align-items: flex-end; }
.float-actions button[hidden] { display: none; }
.float-actions .cta { font-size: 19px; padding: 12px 26px; }
.float-actions button { animation: floatPop .16s ease; }
.ghost-light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .28); font-weight: 700; }
.ghost-light:hover { background: rgba(255, 255, 255, .26); transform: translateY(-2px); }
@keyframes floatPop { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
.handbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.handbar .status { flex: 1; min-width: 0; }
/* Local player's own name + ELO chip, shown at their POV in the handbar. */
.handbar .my-name { flex: 0 0 auto; font-weight: 800; font-size: 14px; color: #ffd87a; white-space: nowrap; }
.turn-ring {
  --turn-progress: 1;
  --turn-color: #a8e8ad;
  --turn-track: rgba(230, 255, 238, .20);
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  box-shadow: 0 2px 7px rgba(0,0,0,.10);
}
.turn-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--turn-color) calc(var(--turn-progress) * 1turn), var(--turn-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.35px) calc(100% - .55px), transparent calc(100% - .05px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.35px) calc(100% - .55px), transparent calc(100% - .05px));
  filter: drop-shadow(0 0 1px rgba(255,255,255,.16));
  pointer-events: none;
}
.turn-ring.low { animation: timerPulse 1.2s ease-in-out infinite; }
.turn-ring span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@keyframes timerPulse {
  0%, 100% { transform: none; box-shadow: 0 3px 9px rgba(0,0,0,.12); }
  50% { transform: scale(1.035); box-shadow: 0 0 12px rgba(210, 110, 86, .22); }
}
/* small "auto-sort the hand" button, sits just above the cards */
.sort-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; font-weight: 800; padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.sort-btn ion-icon { font-size: 1.2em; vertical-align: -2px; }
.sort-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.sort-btn:active { transform: translateY(0); }
.meld-assist {
  display: flex; gap: 6px; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  padding: 0 8px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.meld-assist[hidden] { display: none; }
.meld-assist::-webkit-scrollbar { display: none; }
.assist-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; max-width: min(78vw, 360px); padding: 5px 10px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .11); color: #fff;
  font-family: var(--font-fun); font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18); cursor: pointer;
}
.assist-chip:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.assist-chip:active { transform: translateY(0); }
.assist-chip.opening {
  color: var(--accent-ink);
  background: linear-gradient(180deg, #ffd878, #f0a735);
  border-color: rgba(0, 0, 0, .12);
}
.assist-kind { white-space: nowrap; }
.assist-cards { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: system-ui, 'Segoe UI', Arial, sans-serif; }
.hand { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; padding: calc(var(--cw) * .3) 6px 8px; justify-content: safe center; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .32) transparent; }
.hand::-webkit-scrollbar { height: 10px; }
.hand::-webkit-scrollbar-track { background: transparent; }
.hand::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.hand::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42); }
.hand .card { cursor: grab; transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s ease; box-shadow: -2px 2px 7px rgba(0,0,0,.45); }
.hand .card + .card { margin-left: calc(var(--cw) * -0.42); }   /* overlap into a compact fan */
.hand .card:hover { transform: translateY(-10px); z-index: 10; }
.hand .card.sel { transform: translateY(calc(var(--cw) * -.32)); outline: 3px solid var(--accent); box-shadow: 0 12px 22px rgba(0,0,0,.5); z-index: 30; }
.hand .card.staged { opacity: .4; outline: 2px dashed var(--accent); cursor: default; }
.hand .card.staged:hover { transform: none; }
.hand .card { touch-action: none; }
.hand.dragging .card:hover { transform: none; }   /* calm the row while dragging */
.hand .card.gap { opacity: 0; }                    /* lifted card's slot becomes the parting gap */

/* Floating card that follows the cursor while dragging */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  display: block; margin: 0; opacity: 1; visibility: visible;
  border-radius: calc(var(--cw) * .11);
  box-shadow: 0 20px 44px rgba(0,0,0,.6);
  transform-origin: top left;
  will-change: transform; /* own compositor layer -> dragging never repaints the hand */
}

/* A completed four-of-a-kind leaving the table sails into the discard pile. */
.fly-discard {
  position: fixed; z-index: 55; pointer-events: none; margin: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease-in;
  will-change: transform, opacity;
}
.draw-flight {
  position: fixed; z-index: 54; pointer-events: none; margin: 0;
  box-shadow: 0 18px 38px rgba(0,0,0,.58);
  transition: transform .62s cubic-bezier(.22,1,.36,1), opacity .62s ease-out;
  will-change: transform, opacity;
}
/* A discarded card flies from the player's hand into the discard pile —
   the mirror of .draw-flight, sober and short. */
.discard-flight {
  position: fixed; z-index: 54; pointer-events: none; margin: 0;
  box-shadow: 0 18px 38px rgba(0,0,0,.58);
  transition: transform .6s cubic-bezier(.34,1.1,.5,1), opacity .6s ease-in;
  will-change: transform, opacity;
}

/* A freshly drawn card eases in slowly and glows so you can spot it */
@keyframes drawIn { 0% { transform: translateY(-30px) scale(.82); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes drawGlow { 0%, 55% { box-shadow: 0 0 0 3px var(--accent), 0 10px 22px rgba(0,0,0,.5); } 100% { box-shadow: 0 2px 6px rgba(0,0,0,.45); } }
.hand .card.just-drawn { animation: drawIn .55s cubic-bezier(.2,.8,.2,1), drawGlow 1.4s ease; }

.handbar .mute { margin-left: auto; }
.handbar .mute.off { color: var(--muted); }

.actionbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; min-height: 40px; }
.status { color: #eafdf0; font-weight: 700; font-size: 16px; text-align: center; }

/* ---- Phones & portrait tablets: bigger 2-row hand, piles centred vertically ---- */
@media (max-width: 900px) {
  /* centre the stock/discard + melds block vertically so there's no big empty gap
     up top — auto margins absorb the free space above .center and below .melds */
  #screen-table { --cw: clamp(64px, 16vw, 92px); justify-content: flex-start; }
  .center { flex: 0 0 auto; gap: 16px; padding: 2px 0; }
  /* melds fill the middle and centre their content; fitMelds shrinks them to fit */
  .melds { flex: 1 1 0; min-height: 0; align-content: center; padding: 6px 8px; gap: 8px; }
  #screen-table.has-melds { --cw: clamp(54px, 13vw, 76px); }
  #screen-table.has-melds .melds { min-height: min(118px, 18vh); }
  #screen-table.has-melds .hand-area { --cw: clamp(62px, 16vw, 86px); }
  /* opponents sit BELOW the fixed Give up / sound buttons so they never overlap */
  .opponents { padding: 66px 8px 4px; gap: 6px; flex-wrap: nowrap; }
  .seat { flex: 1 1 0; min-width: 0; max-width: 31%; padding: 6px 8px; }
  .seat .name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .seat .meta { font-size: 10px; }

  .hand-area { --cw: clamp(68px, 18.7vw, 98px); padding: 4px 6px 10px; }  /* large full hand cards */
  .handbar { padding: 4px 8px; }
  .hand { flex-wrap: nowrap; overflow: visible; justify-content: center; padding: 8px 6px 4px; }
  .hand .card + .card { margin-left: calc(var(--cw) * -0.34); }           /* overlapping fan; one row for <=7 cards */
  /* 8+ cards: a CSS grid splits them into two even, centered full-card rows.
     Grid keeps the 15-card draw case as 8 + 7 instead of creating a third row. */
  .hand:has(.card:nth-child(8)) {
    display: grid; grid-auto-flow: row;
    grid-template-columns: repeat(6, calc(var(--cw) * 0.66)) var(--cw);
    justify-content: center; row-gap: 8px;
  }
  /* Draw phase gives 15 cards. Keep them as 8 + 7 instead of creating a lonely
     third row; the tighter step still fits narrow phones. */
  .hand:has(.card:nth-child(15)) {
    grid-template-columns: repeat(7, calc(var(--cw) * 0.58)) var(--cw);
  }
  .hand:has(.card:nth-child(8)) .card { width: var(--cw); }
  .hand:has(.card:nth-child(8)) .card + .card { margin-left: 0; }         /* grid positions; cancel flex overlap */
  .hand .card:hover { transform: none; }                                 /* no hover lift on touch */
  .hand .card.sel { transform: translateY(calc(var(--cw) * -0.28)); z-index: 30; }

  .float-actions { top: -42px; gap: 8px; }
  .float-actions .cta { font-size: 15px; padding: 9px 16px; }
  .sort-btn { width: 34px; height: 32px; justify-content: center; gap: 0; padding: 0; font-size: 0; }
  .sort-btn ion-icon { font-size: 18px; }
  .status { font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
}

/* ---- Desktop / wide screens (>900px): big full-width hand, melds fill the middle ---- */
@media (min-width: 901px) {
  /* card sizes are capped by viewport HEIGHT too (min(..., vh)) so a wide-but-short
     window doesn't make the cards so tall that everything overflows */
  #screen-table { justify-content: flex-start; --cw: min(clamp(108px, 9vw, 160px), 17vh); }
  .center { flex: 0 0 auto; padding-top: 6px; }       /* piles sit just under the opponents */
  /* melds take the whole middle and centre their content; fitMelds shrinks the
     cards when there are too many so nothing ever overflows the viewport */
  #melds { flex: 1 1 0; min-height: 0; align-content: center; }
  /* big, tall cards; JS (layoutHandFull) lays the single row out as an overlapping fan */
  .hand-area { --cw: min(clamp(120px, 9.6vw, 176px), 19vh); }
  .hand { overflow: visible; }
  #screen-table.has-melds { --cw: min(clamp(88px, 7.2vw, 128px), 13vh); }
  #screen-table.has-melds .center { padding-top: 2px; padding-bottom: 2px; }
  #screen-table.has-melds #melds { min-height: min(150px, 19vh); padding-top: 6px; padding-bottom: 6px; }
  #screen-table.has-melds .hand-area { --cw: min(clamp(104px, 8vw, 146px), 15.5vh); padding-top: 4px; }
  #screen-table.has-melds .hand { padding-top: calc(var(--cw) * .18); }
}

/* Short phones (e.g. iPhone SE): shrink the home logo and fields further so the
   whole home screen still fits with no scroll. Placed last so it wins ordering. */
@media (max-height: 720px) {
  #screen-home .logo { width: min(168px, 42vw); margin-bottom: -2px; }
  #screen-home .logo-wordmark { width: min(220px, 62vw); }
  #screen-home .logo-main { font-size: clamp(42px, 13vw, 58px); }
  #screen-home .logo-subline { margin-top: 5px; font-size: clamp(17px, 5.4vw, 24px); }
  #screen-home label { margin: 5px 0 3px; font-size: 15px; }
  #screen-home input { padding: 7px 12px; font-size: 19px; }
  #screen-home .home-cols { gap: 8px; }
}

/* ---- open tables (home) — primary entry, sits just under the logo ---- */
#screen-home { position: relative; }
.open-tables-wrap {
  margin: 14px auto 0;
  width: 100%;
  max-width: 520px;
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 12px 14px 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  overflow: hidden; /* no horizontal scrollbar leaking out of the card */
}
.open-tables-wrap h3 {
  font-size: 11px;
  margin: 0 0 8px;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.open-tables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.open-tables::-webkit-scrollbar { width: 8px; }
.open-tables::-webkit-scrollbar-track { background: transparent; }
.open-tables::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.open-table {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  padding: 6px 9px;
}
.open-table .ot-names {
  flex: 1;
  min-width: 0; /* allow truncation so the row never overflows horizontally */
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-table .ot-count {
  font-size: 11px;
  opacity: .6;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 800;
}
.open-table .join {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 8px;
  box-shadow: 0 2px 0 #1f72ab;
}
.open-table .join:active { transform: translateY(1px); box-shadow: 0 1px 0 #1f72ab; }
#open-tables-empty { font-size: 12px; opacity: .6; margin: 6px 2px 0; }

/* create/join panel, centered in its own cell */
#screen-home .home-panel .panel { margin-top: 4px; }