* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --felt: #0e5c2f;
  --felt-dark: #0a4423;
  --gold: #e8c15a;
  --card-w: 52px;
  --card-h: 74px;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(ellipse at 50% 30%, var(--felt), var(--felt-dark));
  color: #fff;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }
.muted { opacity: 0.7; font-size: 14px; }

.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- Menu screens ---------- */
#screen-home.active, #screen-setup.active, #screen-lobby.active {
  align-items: center; justify-content: center; padding: 20px;
}
.home-card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 20px; padding: 28px 22px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
h1 { font-size: 40px; text-align: center; color: var(--gold); letter-spacing: 1px; }
h2 { font-size: 24px; text-align: center; color: var(--gold); }
.tagline { text-align: center; opacity: 0.85; margin-bottom: 8px; }

label { font-size: 14px; opacity: 0.85; }
input, select {
  width: 100%; padding: 12px; border-radius: 10px; border: none;
  font-size: 17px; background: #fff; color: #222;
}
button {
  padding: 13px 16px; border: none; border-radius: 12px;
  font-size: 17px; font-weight: 600; cursor: pointer;
  background: var(--gold); color: #3a2c00;
}
button:active { transform: scale(0.97); }
button.big { width: 100%; }
button.secondary { background: rgba(255,255,255,0.15); color: #fff; }
button:disabled { opacity: 0.4; }

.lang-row { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.lang { padding: 6px 14px; font-size: 14px; background: rgba(255,255,255,0.12); color: #fff; }
.lang.active { background: var(--gold); color: #3a2c00; }

.setup-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.setup-field.check { flex-direction: row; align-items: center; gap: 10px; }
.setup-field.check input { width: 22px; height: 22px; }

.room-code-box { text-align: center; }
.room-code { font-size: 44px; font-weight: 800; letter-spacing: 10px; color: var(--gold); }
.lobby-rules { text-align: center; font-size: 14px; opacity: 0.85; }
.player-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.player-list li {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px;
}
.player-list .tag { font-size: 12px; background: rgba(255,255,255,0.18); border-radius: 6px; padding: 2px 7px; }
.player-list .kick { margin-left: auto; padding: 4px 10px; font-size: 13px; background: rgba(255,80,80,0.7); color: #fff; }
.player-list .offline { opacity: 0.5; }

/* ---------- Game screen ---------- */
#screen-game { padding: env(safe-area-inset-top) 0 0; }

#status-bar {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--gold); color: #3a2c00;
  font-size: 16px; text-align: center;
}
#status-round { font-weight: 800; }
#status-turn { font-weight: 600; font-size: 15px; }
#status-bar.your-turn { background: #cde86b; }

#opponents {
  display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto;
}
.opp {
  flex: 1; min-width: 74px; text-align: center;
  background: rgba(0,0,0,0.25); border-radius: 12px; padding: 6px 4px;
  border: 2px solid transparent; font-size: 12px;
}
.opp.turn { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,193,90,0.5); }
.opp .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp .meta { opacity: 0.85; }
.opp .melded-mark { color: #8f8; }

#table-area { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 10px; overflow-y: auto; min-height: 120px; }
#piles { display: flex; gap: 18px; justify-content: center; align-items: center; }
.pile { position: relative; text-align: center; font-size: 12px; }
.pile .card { margin: 0 auto; }
#stock-count { display: block; margin-top: 3px; opacity: 0.8; }
.pile.pulse .card { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 16px 4px rgba(232,193,90,0.8); } }

#melds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.meld {
  display: flex; padding: 4px 6px; border-radius: 10px;
  background: rgba(0,0,0,0.25); border: 2px solid transparent;
}
.meld.targetable { border-color: rgba(232,193,90,0.8); }
.meld .card { width: 30px; height: 44px; font-size: 11px; margin-left: -12px; }
.meld .card:first-child { margin-left: 0; }
.meld-owner { font-size: 10px; opacity: 0.75; text-align: center; }

#event-line { text-align: center; font-size: 13px; min-height: 19px; opacity: 0.85; padding: 0 10px; }

#staging { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 2px 10px; }
.staged {
  display: flex; padding: 3px 6px; border-radius: 8px;
  background: rgba(232,193,90,0.25); border: 1px dashed var(--gold);
}
.staged .card { width: 28px; height: 40px; font-size: 10px; margin-left: -10px; }
.staged .card:first-child { margin-left: 0; }

#action-bar {
  display: flex; gap: 8px; padding: 8px 10px; flex-wrap: wrap; justify-content: center;
  min-height: 56px; align-items: center;
}
#action-bar button { font-size: 15px; padding: 10px 14px; }
#action-bar .hint { width: 100%; text-align: center; font-size: 13px; opacity: 0.8; }

#hand-info { display: flex; justify-content: space-between; padding: 0 14px; font-size: 13px; opacity: 0.85; }

#hand {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  padding: 6px 8px 14px;
}

/* ---------- Cards ---------- */
.card {
  width: var(--card-w); height: var(--card-h);
  background: #fff; border-radius: 7px;
  color: #111; font-size: 16px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  position: relative; flex-shrink: 0;
}
.card .r { line-height: 1; }
.card .s { line-height: 1; font-size: 1.25em; }
.card.red { color: #c62828; }
.card.joker { color: #7b1fa2; font-size: 11px; }
.card.joker .s { font-size: 22px; }
.card.back {
  background: repeating-linear-gradient(45deg, #7a1f1f, #7a1f1f 6px, #942727 6px, #942727 12px);
  border: 3px solid #fff;
}
.card.selected { outline: 3px solid var(--gold); transform: translateY(-8px); }
#hand .card { cursor: grab; touch-action: none; }

/* Freshly drawn card: bouncing arrow above it */
.card.just-drawn::before {
  content: '⬇';
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 20px; color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  animation: bounce 0.9s infinite;
}
.card.just-drawn { outline: 3px solid #cde86b; }
@keyframes bounce { 50% { transform: translateX(-50%) translateY(5px); } }

/* Where the last card was played (meld or discard): orange arrow */
.card.just-played { outline: 3px solid #ffb054; z-index: 2; }
.card.just-played::before {
  content: '⬇';
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 17px; color: #ffb054;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  animation: bounce 0.9s infinite;
}
.meld { margin-top: 18px; } /* room for the arrow above meld cards */

/* Drag & drop */
.drag-ghost {
  position: fixed; z-index: 100; pointer-events: none;
  transform: translate(-50%, -70%) scale(1.12) rotate(3deg);
  opacity: 0.92;
}
.card.drag-source { opacity: 0.35; }
.meld.drop-hover, .pile.drop-hover .card { outline: 4px solid #cde86b; }
.drop-ok { box-shadow: 0 0 18px 4px rgba(205,232,107,0.9); }

button.mini {
  padding: 4px 10px; font-size: 13px; border-radius: 8px;
  background: rgba(255,255,255,0.15); color: #fff;
}
#sort-buttons { display: flex; gap: 6px; }

/* Hint / recommendation banner */
#hint-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 10px; padding: 10px 12px;
  background: rgba(120, 90, 220, 0.35);
  border: 1px solid rgba(180, 150, 255, 0.7);
  border-radius: 12px; font-size: 14px; line-height: 1.35;
}
#hint-bar.hidden { display: none; }
#hint-text { flex: 1; }
#hint-actions { display: flex; gap: 6px; }
#hint-do { background: #b79aff; color: #2a1a55; font-weight: 700; }
.card.hint-glow { outline: 3px solid #b79aff; box-shadow: 0 0 14px 3px rgba(183,154,255,0.8); }

/* ---------- Overlay (round end / scores) ---------- */
#overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px;
}
.overlay-card {
  background: var(--felt-dark); border: 2px solid var(--gold); border-radius: 18px;
  padding: 24px 20px; width: 100%; max-width: 400px; max-height: 85dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.score-table th { color: var(--gold); }
.score-table .total { font-weight: 800; }
.winner-row { color: #9f9; font-weight: 700; }
.terremoto-banner {
  background: #c62828; color: #fff; font-weight: 800;
  padding: 10px 12px; border-radius: 10px;
  animation: shake 0.5s 3;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

#rules-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 30; padding: 20px;
}
#rules-modal.hidden { display: none; }
.rules-card { text-align: left; }
.rules-card h2 { text-align: center; font-size: 20px; }
.rb-section h3 { color: var(--gold); font-size: 15px; margin-bottom: 4px; }
.rb-section p, .rb-section { font-size: 14px; line-height: 1.45; }
.rules-card .score-table td, .rules-card .score-table th { text-align: left; font-size: 13px; }

#toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(200,40,40,0.95); color: #fff; padding: 10px 18px;
  border-radius: 12px; font-size: 15px; z-index: 20; max-width: 90%;
  text-align: center;
}
#toast.info { background: rgba(0,0,0,0.85); }

@media (min-width: 700px) {
  :root { --card-w: 62px; --card-h: 88px; }
  .meld .card { width: 38px; height: 54px; font-size: 13px; }
}