* { box-sizing: border-box; margin: 0; }
:root {
  --felt: #0e5c3f;
  --felt-dark: #0a4630;
  --gold: #e8c76a;
  --card-w: 52px;
  --card-h: 74px;
}
body {
  font-family: 'Cairo', system-ui, sans-serif;
  background: radial-gradient(ellipse at center, var(--felt), var(--felt-dark));
  color: #f2efe6;
  min-height: 100vh;
}
.hidden { display: none !important; }
.screen { min-height: 100vh; display: flex; flex-direction: column; }
.error { color: #ff9b8a; min-height: 1.2em; margin-top: .5em; }
.muted { color: #bcd6c9; font-size: .85em; }
.code { font-family: monospace; letter-spacing: .2em; color: var(--gold); direction: ltr; unicode-bidi: embed; }
#join-code { direction: ltr; text-align: center; }
.card, .meld, .hand, .piles, .table-melds { direction: ltr; }

button, input, select { font-family: inherit; }
.btn {
  background: #1d7a57; color: #fff; border: 1px solid #2c9a70;
  padding: .55em 1.1em; border-radius: 8px; font-size: 1em; cursor: pointer;
}
.btn:hover { background: #23895f; }
.btn.primary { background: var(--gold); border-color: #c9a94f; color: #3a2e07; font-weight: 600; }
.btn.primary:hover { background: #f0d37f; }
.btn.small { padding: .35em .7em; font-size: .85em; }
.btn.danger { background: #a33b2e; border-color: #c4523f; }
.btn.voice-on { background: var(--gold); border-color: #c9a94f; color: #3a2e07; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- auth screen ---------- */
.auth-screen {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  padding: 4vh 1em;
  background:
    radial-gradient(ellipse 90% 60% at 50% 38%, #147a54 0%, var(--felt) 45%, var(--felt-dark) 100%);
}
.table-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 50% 30%, rgba(255, 234, 160, .13), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,.55), transparent 60%);
}

/* drifting ghost cards */
.bg-cards { position: absolute; inset: 0; pointer-events: none; direction: ltr; }
.bg-card {
  position: absolute;
  width: 72px; height: 102px;
  background: #fdfdf6; border-radius: 9px;
  color: #111; font-weight: 800; font-size: 1.3em;
  padding: 6px 9px; opacity: .10;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  animation: bgFloat 11s ease-in-out infinite alternate;
}
.bg-card i { display: block; font-style: normal; font-size: 1.5em; line-height: 1; }
.bg-card.red { color: #c22a1e; }
.bg-card:nth-child(1) { top: 8%;  left: 7%;  transform: rotate(-14deg); animation-delay: 0s; }
.bg-card:nth-child(2) { top: 66%; left: 12%; transform: rotate(11deg);  animation-delay: -2s; animation-duration: 13s; }
.bg-card:nth-child(3) { top: 22%; left: 84%; transform: rotate(17deg);  animation-delay: -5s; }
.bg-card:nth-child(4) { top: 74%; left: 82%; transform: rotate(-9deg);  animation-delay: -7s; animation-duration: 14s; }
.bg-card:nth-child(5) { top: 44%; left: 3%;  transform: rotate(6deg);   animation-delay: -3s; animation-duration: 16s; }
.bg-card:nth-child(6) { top: 6%;  left: 62%; transform: rotate(-20deg); animation-delay: -9s; }
.bg-card:nth-child(7) { top: 52%; left: 92%; transform: rotate(3deg);   animation-delay: -6s; animation-duration: 12s; }
.bg-card:nth-child(8) { top: 86%; left: 45%; transform: rotate(15deg);  animation-delay: -4s; animation-duration: 15s; }
@keyframes bgFloat {
  from { translate: 0 0;      rotate: 0deg; }
  to   { translate: 0 -34px;  rotate: 7deg; }
}

/* hero: fanned cards + shimmering title */
.auth-hero { position: relative; text-align: center; z-index: 1; }
.logo-fan { position: relative; height: 96px; margin-bottom: .2em; direction: ltr; }
.logo-fan .card.fan-card {
  position: absolute; left: 50%; top: 6px;
  display: inline-flex;
  --card-w: 62px; --card-h: 88px;
  font-size: 1.15em;
  cursor: default;
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
  animation: dealIn .7s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.logo-fan .fan-l { transform: translateX(-50%) translateX(-40px) rotate(-16deg); animation-delay: .05s; }
.logo-fan .fan-c { transform: translateX(-50%) translateY(-9px); z-index: 2; animation-delay: .2s; }
.logo-fan .fan-r { transform: translateX(-50%) translateX(40px) rotate(16deg); animation-delay: .35s; }
@keyframes dealIn {
  from { opacity: 0; translate: 0 -70px; scale: .6; }
  to   { opacity: 1; translate: 0 0;     scale: 1; }
}
.game-title {
  font-size: clamp(2.4em, 7vw, 3.6em);
  font-weight: 900;
  line-height: 1.15;
  background: linear-gradient(100deg, #9c7a2d 0%, var(--gold) 25%, #fff3c4 50%, var(--gold) 75%, #9c7a2d 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  from { background-position: 250% 0; }
  to   { background-position: -250% 0; }
}
.tagline { color: #ffe9a8; font-weight: 700; letter-spacing: .05em; margin-top: .1em; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.feature-chips { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; margin-top: .9em; }
.feature-chips span {
  background: rgba(0,0,0,.35); border: 1px solid rgba(232,199,106,.35);
  border-radius: 999px; padding: .25em .9em; font-size: .85em; color: #e8dfc6;
}

/* the auth panel */
.auth-screen .auth-box {
  margin: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 46, 32, .92), rgba(4, 32, 22, .95));
  border: 1px solid rgba(232,199,106,.55);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.25),
    0 0 45px rgba(232,199,106,.14),
    0 22px 50px rgba(0,0,0,.55);
  animation: riseIn .55s ease-out backwards .25s;
}
@keyframes riseIn {
  from { opacity: 0; translate: 0 34px; }
  to   { opacity: 1; translate: 0 0; }
}
.auth-screen .tabs {
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
.auth-screen .tab {
  border-radius: 999px;
  border-bottom: none;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.auth-screen .tab.active {
  background: var(--gold);
  color: #3a2e07;
}
.auth-screen input {
  background: rgba(0,0,0,.4);
  border-color: rgba(232,199,106,.25);
  transition: border-color .2s, box-shadow .2s;
}
.auth-screen input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,199,106,.2);
}
.btn.primary.btn-big {
  font-size: 1.1em;
  font-weight: 800;
  padding: .7em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4dc8f, #dfba55);
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 #fff8dd;
}
.btn.primary.btn-big::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 3.2s ease-in-out infinite;
}
@keyframes sheen {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}
.auth-footer { z-index: 1; color: #a8c9b8; font-size: .82em; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

@media (max-width: 600px) {
  .bg-card:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-card, .game-title, .btn-big::after, .fan-card, .auth-screen .auth-box { animation: none; }
}

/* ---------- auth & lobby ---------- */
.auth-box, .lobby-box {
  background: rgba(0,0,0,.25); border-radius: 14px; padding: 1.6em;
  max-width: 380px; width: 92%; margin: 6vh auto 1em;
}
.auth-box h1 { text-align: center; font-size: 2.2em; }
.subtitle { text-align: center; margin-bottom: 1.2em; color: #bcd6c9; }
.tabs { display: flex; gap: .5em; margin-bottom: 1em; }
.tab { flex: 1; background: none; border: none; color: #bcd6c9; padding: .5em; cursor: pointer; border-bottom: 2px solid transparent; font-size: 1em; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
form { display: flex; flex-direction: column; gap: .7em; }
input, select {
  padding: .6em; border-radius: 8px; border: 1px solid #2c9a70;
  background: #0b3f2c; color: #fff; font-size: 1em;
}
.row { display: flex; gap: .6em; align-items: center; margin: .8em 0; flex-wrap: wrap; }
.row label { display: flex; flex-direction: column; gap: .3em; font-size: .9em; }
.player-list { list-style: none; padding: 0; margin: 1em 0; }
.player-list li { padding: .45em .2em; border-bottom: 1px solid rgba(255,255,255,.1); }
.player-list .host::after { content: " 👑"; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: .6em;
  flex-wrap: wrap; row-gap: .3em;
  padding: calc(.5em + env(safe-area-inset-top)) .9em .5em;
  background: rgba(0,0,0,.35); font-size: .95em;
}
@media (max-width: 600px) {
  .topbar { font-size: .85em; padding-left: .5em; padding-right: .5em; }
  .topbar .btn { padding: .3em .55em; font-size: .95em; }
  #turn-info { order: 5; flex-basis: 100%; text-align: center; color: var(--gold); }
  .staging { justify-content: center; }
}

/* ---------- cards ---------- */
.card {
  width: var(--card-w); height: var(--card-h);
  background: #fdfdf6; border-radius: 6px; border: 1px solid #999;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  padding: 3px 4px; cursor: pointer; user-select: none; position: relative;
  color: #111; font-weight: 700; font-size: .95em;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.card .rank { line-height: 1; }
.card .suit-big { text-align: center; font-size: 1.5em; line-height: 1; }
.card.red { color: #c22a1e; }
.card.joker { color: #7b2fa8; }
.card.joker .suit-big { font-size: 1.2em; }
.card.selected { outline: 3px solid var(--gold); }
.staging .card.selected, .meld .card.selected { transform: translateY(-10px); }
.card.back {
  background: repeating-linear-gradient(45deg, #7b1e1e, #7b1e1e 6px, #5d1414 6px, #5d1414 12px);
  border-color: #3d0d0d;
}
.card.mini { --card-w: 38px; --card-h: 54px; font-size: .7em; padding: 2px 3px; }
.card.mini .suit-big { font-size: 1.1em; }
.draw-preview {
  position: fixed;
  left: 50%;
  top: 40%;
  --card-w: 122px;
  --card-h: 172px;
  font-size: 2.3em;
  transform: translate(-50%, -50%) scale(.3) rotate(-10deg);
  opacity: 0;
  z-index: 600;
  pointer-events: none;
  cursor: default;
  transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), opacity .18s;
  box-shadow: 0 18px 55px rgba(0,0,0,.65), 0 0 0 3px var(--gold);
}
.draw-preview.shown {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

.deal-fly {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}

.stock-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1em; text-shadow: 0 1px 2px #000;
}

/* ---------- game layout ---------- */
.opponents { display: flex; justify-content: center; gap: 1em; padding: .6em; flex-wrap: wrap; }
.opponent {
  background: rgba(0,0,0,.25); border-radius: 10px; padding: .5em .8em;
  text-align: center; min-width: 110px; border: 2px solid transparent;
}
.opponent.turn { border-color: var(--gold); }
.opponent.disconnected { opacity: .5; }
.opponent .name { font-weight: 600; }
.opponent .cards-count { font-size: .85em; color: #bcd6c9; }

.table-area { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .8em; padding: .5em 1em; overflow-y: auto; }
.piles { display: flex; gap: 1.2em; align-items: center; }
.piles .card { cursor: pointer; }
.table-melds { display: flex; flex-wrap: wrap; gap: .7em; justify-content: center; max-width: 900px; }
.meld {
  display: flex; gap: 2px; padding: 4px; border-radius: 8px;
  background: rgba(0,0,0,.2); cursor: pointer;
}
.meld:hover { background: rgba(232,199,106,.25); }
.meld .card { cursor: inherit; }

.staging {
  display: flex; align-items: center; gap: .7em; flex-wrap: wrap;
  padding: .4em .9em; background: rgba(0,0,0,.3);
}
#staging-melds { display: flex; gap: .6em; flex-wrap: wrap; }
#staging-melds .meld { cursor: pointer; }

.hand-area { padding: .6em .6em calc(.8em + env(safe-area-inset-bottom)); background: rgba(0,0,0,.35); }
.hand {
  position: relative;
  height: calc(var(--card-h) + 58px);
  overflow: visible;
}
.hand .card {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transition: transform .18s ease;
  will-change: transform;
  box-shadow: -3px 1px 6px rgba(0,0,0,.35);
  touch-action: none; /* the card handles its own drag; don't scroll the page */
  cursor: grab;
}
.hand .card.dragging {
  transition: none;
  cursor: grabbing;
  box-shadow: 0 12px 26px rgba(0,0,0,.55);
}
.actions { display: flex; gap: .5em; justify-content: center; margin-top: .5em; flex-wrap: wrap; }
.game-msg { text-align: center; min-height: 1.3em; margin-top: .4em; color: var(--gold); }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.overlay-box {
  background: var(--felt-dark); border: 1px solid var(--gold); border-radius: 14px;
  padding: 1.5em; max-width: 480px; width: 92%; text-align: center;
  max-height: 85vh; overflow-y: auto;
}
.overlay-box h2 { color: var(--gold); margin-bottom: .8em; }
.rules-box { max-width: 620px; text-align: start; }
.rules-content h3 { color: var(--gold); margin: 1em 0 .3em; font-size: 1.05em; }
.rules-content h3:first-child { margin-top: 0; }
.rules-content p { margin: .3em 0; line-height: 1.75; color: #e9e4d2; }
.rules-content .ex { direction: ltr; unicode-bidi: embed; background: #fdfdf6; color: #111; border-radius: 6px; padding: 0 .45em; font-weight: 700; white-space: nowrap; }
.rules-content .ex i, .rules-content i.red { font-style: normal; }
.rules-content .red { color: #c22a1e; }
.rules-box .btn { margin-top: 1.2em; }
.round-row { display: flex; justify-content: space-between; padding: .4em 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.overlay-box .btn { margin-top: 1em; }

@media (max-width: 600px) {
  :root { --card-w: 44px; --card-h: 62px; }
}