:root {
  --bg: #050814;
  --bg-soft: #0b1220;
  --surface: rgba(11, 18, 32, 0.92);
  --surface-2: rgba(16, 26, 45, 0.98);
  --border: rgba(140, 171, 221, 0.18);
  --border-strong: rgba(248, 190, 80, 0.35);
  --text: #eef4ff;
  --muted: #9fb0cd;
  --accent: #38bdf8;
  --accent-2: #f59e0b;
  --success: #22c55e;
  --danger: #f87171;
  --felt-1: #0f5b45;
  --felt-2: #083126;
  --shadow: 0 24px 80px rgba(1, 7, 18, 0.58);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 650px at 50% -15%, rgba(56, 189, 248, 0.15), transparent 55%),
    radial-gradient(900px 540px at 100% 0%, rgba(245, 158, 11, 0.12), transparent 45%),
    linear-gradient(180deg, #07101f 0%, #03060d 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

.page-shell {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 34px;
}

.surface {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.hero-banner,
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}

.hero-copy,
.brand-copy {
  display: grid;
  gap: 4px;
}

.brand-lockup {
  display: flex;
  gap: 16px;
  align-items: center;
}

.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: #08111f;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 18px 40px rgba(56, 189, 248, 0.22);
}

.brand-copy h1,
.section-title,
.panel-title,
.card-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.4vw, 1.8rem);
  line-height: 1.1;
}

.brand-copy p,
.muted,
.helper,
.footer-note,
.table-note,
.chat-meta,
.rule-list,
.card-copy,
.kicker {
  margin: 0;
  color: var(--muted);
}

.hero-actions,
.stack-inline,
.form-row,
.toolbar,
.actions,
.call-stack,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pill,
.badge,
.mini-chip,
.rank-chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: rgba(8, 15, 28, 0.74);
  color: var(--text);
  font-size: 0.88rem;
}

.pill strong,
.score-pill strong,
.money {
  color: #fdd173;
}

.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #061120;
  box-shadow: 0 18px 36px rgba(56, 189, 248, 0.18);
}

.btn.secondary {
  background: rgba(8, 15, 28, 0.74);
  border-color: var(--border);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border);
}

.btn.small {
  padding: 8px 12px;
  font-size: 0.88rem;
}

.input,
.select,
textarea.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(5, 10, 20, 0.88);
  color: var(--text);
  outline: none;
}

.input:focus,
.select:focus,
textarea.input:focus {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}

.grid-3,
.grid-2,
.link-grid,
.stats-grid,
.top-grid,
.bottom-grid {
  display: grid;
  gap: 16px;
}

.grid-3,
.stats-grid,
.link-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2,
.top-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-block {
  padding: 22px 24px;
}

.link-card,
.info-card,
.stat-card,
.panel-card {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(9, 16, 30, 0.92), rgba(14, 22, 38, 0.95));
}

.link-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent-2);
  margin-bottom: 12px;
}

.stat-value {
  font-size: 1.7rem;
  font-weight: 900;
}

.flash {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(127, 29, 29, 0.18);
}

.flash.success {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(20, 83, 45, 0.22);
}

.flash.warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(120, 53, 15, 0.22);
}

.table-wrap {
  overflow: auto;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 660px;
}

.table th,
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
}

.table th {
  color: #bfd0ee;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(9, 16, 30, 0.82);
}

.table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.empty-row {
  text-align: center;
  color: var(--muted);
}

.footer-line {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.feature-list,
.rule-list {
  padding-left: 18px;
  line-height: 1.6;
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) 360px;
  gap: 18px;
  margin-top: 18px;
}

.board-surface {
  padding: 18px;
}

.board-top {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.player-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.player-badge {
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(6, 12, 24, 0.82);
  color: var(--muted);
}

.player-badge strong {
  color: var(--text);
}

.scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.score-pill {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(6, 12, 24, 0.76);
}

.score-pill span {
  color: var(--muted);
  font-size: 0.82rem;
}

.score-pill strong {
  font-size: 1.5rem;
}

.score-pill.you {
  text-align: right;
}

.room-chip {
  justify-self: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fcd34d;
  font-weight: 800;
}

.table-felt {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 24px;
  min-height: 690px;
  background:
    radial-gradient(520px 280px at 50% 28%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(880px 420px at 50% 50%, rgba(255,255,255,0.05), transparent 50%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.table-felt::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 999px;
  border: 10px solid rgba(3, 25, 19, 0.32);
  box-shadow: inset 0 0 0 2px rgba(236, 253, 245, 0.08);
  pointer-events: none;
}

.felt-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 640px;
}

.hand-zone {
  display: grid;
  gap: 10px;
}

.hand-zone.yours {
  align-self: end;
}

.hand-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.hand-head strong {
  font-size: 1.04rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  min-height: 158px;
}

.cards-player {
  align-items: flex-end;
}

.cardc,
.mesa-card {
  width: 96px;
  height: 144px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(1, 7, 18, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 10, 20, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}

.cardc.playable {
  cursor: pointer;
}

.cardc.playable:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 34px rgba(1, 7, 18, 0.55);
}

.cardc.disabled {
  opacity: 0.78;
}

.mesa-zone {
  display: grid;
  align-content: center;
  gap: 16px;
}

.status-banner {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 9, 18, 0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.call-stack {
  justify-content: center;
}

.call-pill {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(5, 10, 20, 0.65);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem;
}

.call-pill.active {
  border-color: rgba(245, 158, 11, 0.42);
  color: #fde68a;
}

.mesa-cards {
  display: flex;
  justify-content: center;
  gap: 18px;
  min-height: 154px;
}

.actions {
  justify-content: center;
  min-height: 48px;
}

.actions button {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(3, 9, 18, 0.56);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.actions button.primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #05111f;
  border-color: transparent;
}

.actions button.warn {
  border-color: rgba(245, 158, 11, 0.35);
  color: #fde68a;
}

.action-caption {
  color: rgba(241, 245, 249, 0.85);
  text-align: center;
}

.side-stack {
  display: grid;
  gap: 18px;
}

.chat-surface,
.rules-surface {
  padding: 20px;
}

.chat-messages {
  margin-top: 14px;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 10px;
}

.chat-line {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(6, 12, 24, 0.72);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.92rem;
}

.chat-line b {
  color: #f8fafc;
}

.form-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rank-chip {
  justify-content: space-between;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  margin-top: 18px;
}

.copy-stack {
  display: grid;
  gap: 14px;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.login-card {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
}

.login-side,
.login-panel {
  padding: 30px;
}

.login-side {
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(245, 158, 11, 0.18), transparent 60%),
    radial-gradient(520px 260px at 100% 100%, rgba(56, 189, 248, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.94), rgba(6, 11, 20, 0.98));
}

.legal-note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.auth-form.compact {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.field-label {
  color: #d7e5ff;
  font-size: 0.86rem;
  font-weight: 800;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

pre.json-box {
  padding: 14px;
  border-radius: 18px;
  overflow: auto;
  background: rgba(6, 12, 24, 0.8);
  border: 1px solid var(--border);
  color: #d7e5ff;
  font-size: 0.84rem;
}

@media (max-width: 1120px) {
  .game-grid,
  .hero-split,
  .login-card {
    grid-template-columns: 1fr;
  }

  .side-stack {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .page-shell {
    width: min(100% - 18px, 100%);
    padding-top: 16px;
  }

  .grid-3,
  .grid-2,
  .link-grid,
  .stats-grid,
  .top-grid,
  .side-stack {
    grid-template-columns: 1fr;
  }

  .hero-banner,
  .panel-head,
  .brand-lockup,
  .hand-head,
  .toolbar,
  .hero-actions {
    align-items: flex-start;
  }

  .hero-banner,
  .panel-head {
    flex-direction: column;
  }

  .scoreboard {
    grid-template-columns: 1fr;
  }

  .score-pill.you {
    text-align: left;
  }

  .room-chip {
    justify-self: start;
  }

  .table-felt {
    min-height: 0;
    padding: 16px;
  }

  .felt-layout {
    min-height: 0;
  }

  .cardc,
  .mesa-card {
    width: 82px;
    height: 123px;
  }

  .form-inline {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 24px;
  }

  .section-block,
  .hero-banner,
  .panel-head,
  .chat-surface,
  .rules-surface {
    padding: 18px;
  }

  .cardc,
  .mesa-card {
    width: 72px;
    height: 108px;
    border-radius: 16px;
  }
}

/* ===== TRUCOYA 3D / Producción ===== */
body.game3d-page {
  background:
    radial-gradient(1100px 680px at 50% 0%, rgba(25, 80, 138, 0.38), transparent 60%),
    linear-gradient(180deg, #020511 0%, #060812 100%);
  overflow-x: hidden;
}

.game3d-shell {
  width: min(1480px, calc(100% - 20px));
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 0 24px;
}

.game3d-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 22px;
}

.table-3d-stage {
  --room-skin: url('../game/backgrounds/pulperia_bar_criollo.png');
  position: relative;
  min-height: min(78vh, 980px);
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(1, 5, 12, 0.05), rgba(1, 5, 12, 0.50)),
    var(--room-skin);
  background-size: cover;
  background-position: center bottom;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.table-3d-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 360px at 50% 54%, rgba(65, 126, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.34));
  pointer-events: none;
  z-index: 0;
}

.ambient-glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(64vw, 760px);
  height: min(32vw, 360px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 135, 255, 0.26), transparent 65%);
  filter: blur(12px);
  z-index: 1;
  pointer-events: none;
}

.score-orbs {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
}

.score-orb {
  width: min(174px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: start;
  border-radius: 50%;
  border: 3px solid rgba(249, 202, 102, 0.85);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.08), 0 18px 38px rgba(0,0,0,0.45);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(145deg, rgba(8, 23, 48, 0.94), rgba(1, 8, 24, 0.96));
  text-align: center;
}

.score-orb.red {
  justify-self: end;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(145deg, rgba(93, 14, 18, 0.95), rgba(31, 5, 10, 0.97));
}

.score-orb span,
.score-orb small {
  color: #ffd978;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.45);
}

.score-orb strong {
  color: #ffeaa3;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.95;
  text-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.stage-chip {
  margin-top: 10px;
  background: rgba(4, 8, 16, 0.80);
  backdrop-filter: blur(14px);
}

.table-perspective {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: end center;
  perspective: 1200px;
  pointer-events: none;
  padding: 100px 2vw 118px;
}

.virtual-table {
  position: relative;
  width: min(880px, 94vw);
  height: min(540px, 54vh);
  min-height: 430px;
  transform: rotateX(54deg) translateY(8%);
  transform-style: preserve-3d;
  border-radius: 40px;
  background:
    radial-gradient(480px 280px at 50% 42%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(180deg, rgba(15, 44, 88, 0.92), rgba(4, 14, 38, 0.98));
  border: 14px solid rgba(82, 43, 16, 0.92);
  box-shadow:
    inset 0 0 0 2px rgba(255, 204, 103, 0.25),
    inset 0 -26px 50px rgba(0,0,0,0.35),
    0 42px 90px rgba(0,0,0,0.65);
  pointer-events: auto;
}

.virtual-table::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 30px;
  border: 2px solid rgba(244, 168, 63, 0.52);
  box-shadow: inset 0 0 32px rgba(255,255,255,0.03);
  pointer-events: none;
}

.virtual-table::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 34px;
  border: 1px solid rgba(251, 216, 129, 0.18);
  pointer-events: none;
}

.player-seat {
  position: absolute;
  left: 50%;
  width: min(620px, 84%);
  transform: translateX(-50%) translateZ(62px) rotateX(-54deg);
  transform-style: preserve-3d;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: auto;
}

.rival-seat {
  top: -58px;
}

.your-seat {
  bottom: -72px;
}

.seat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(3, 7, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.30);
}

.center-play-zone {
  position: absolute;
  inset: 31% 10% 24%;
  transform: translateZ(70px) rotateX(-54deg);
  transform-style: preserve-3d;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  pointer-events: auto;
}

.table-3d-stage .status-banner {
  background: rgba(5, 9, 18, 0.72);
  border-color: rgba(255, 217, 125, 0.24);
  color: #fff2bd;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.38);
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.5vw, 18px);
  min-height: 128px;
  flex-wrap: nowrap;
}

.cardc,
.mesa-card {
  width: clamp(72px, 8vw, 118px);
  height: calc(clamp(72px, 8vw, 118px) * 1.5);
  border-radius: 14px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.cardc img,
.mesa-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 26px rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  background: #f8f1df;
}

.cards-player .cardc:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.cards-player .cardc:nth-child(2) { transform: translateY(-2px); }
.cards-player .cardc:nth-child(3) { transform: rotate(7deg) translateY(10px); }
.cards-rival .cardc:nth-child(1) { transform: rotate(7deg) translateY(-4px); }
.cards-rival .cardc:nth-child(2) { transform: translateY(4px); }
.cards-rival .cardc:nth-child(3) { transform: rotate(-7deg) translateY(-4px); }

.cardc.playable {
  cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(255, 207, 93, 0.16));
  touch-action: manipulation;
}

.cardc.playable:hover {
  transform: translateY(-24px) scale(1.06) rotate(0deg) !important;
  filter: drop-shadow(0 0 18px rgba(255, 215, 116, 0.40));
}

.cardc.disabled {
  opacity: 0.72;
}

.cardc.selected {
  filter:
    drop-shadow(0 0 18px rgba(255, 220, 108, 0.58))
    drop-shadow(0 18px 18px rgba(0,0,0,0.52));
}

.cardc.card-denied {
  animation: cardDenied 0.34s ease both;
}

.mesa-cards {
  min-height: clamp(112px, 16vh, 170px);
  align-items: center;
  gap: 18px;
}

.mesa-card {
  transform: rotate(-2deg);
}

.mesa-card:nth-child(even) {
  transform: rotate(4deg) translateY(8px);
}

.action-dock {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 12px;
  width: min(980px, calc(100% - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(4, 8, 16, 0.78);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

.action-dock > *,
.action-dock button,
.action-dock a,
.action-dock input {
  pointer-events: auto;
}

.players-strip.compact {
  justify-content: center;
}

.actions {
  justify-content: center;
  min-height: 48px;
}

.actions button {
  border: 1px solid rgba(250, 208, 119, 0.36);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.11), transparent 28%),
    linear-gradient(180deg, rgba(16, 28, 48, 0.96), rgba(4, 10, 22, 0.96));
  color: #ffe9a6;
  padding: 12px 16px;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 18px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.actions button.primary {
  background: linear-gradient(135deg, #ffd166, #38bdf8);
  color: #061120;
  border-color: transparent;
}

.actions button.warn {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fecaca;
}

.action-caption {
  width: 100%;
  color: rgba(241, 245, 249, 0.92);
  text-align: center;
}

.game3d-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 14px;
  margin-top: 14px;
}

.shop-preview {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  border-radius: 18px;
  background: rgba(4, 10, 20, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
}

.shop-preview img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
}

.shop-preview.card-back img {
  width: 120px;
  height: 180px;
  object-fit: contain;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.shop-card {
  display: grid;
  gap: 12px;
}

.shop-card .card-copy {
  min-height: 40px;
}

.native-hero {
  position: relative;
  overflow: hidden;
}

.native-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 420px;
  height: 420px;
  background: url('../brand/logo_truco_criollo.png') center/contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.lobby-room-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(6, 12, 24, 0.78);
}

.lobby-room-card img {
  width: 160px;
  height: 96px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

.wallet-positive { color: #86efac; }
.wallet-negative { color: #fca5a5; }

@media (max-width: 1080px) {
  .game3d-topbar,
  .game3d-bottom-grid {
    grid-template-columns: 1fr;
  }
  .game3d-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .game3d-shell {
    width: min(100% - 10px, 100%);
    padding-top: 8px;
  }
  .table-3d-stage {
    min-height: 82vh;
    border-radius: 24px;
    background-position: center bottom;
  }
  .score-orbs {
    grid-template-columns: 1fr auto 1fr;
    padding: 8px;
  }
  .score-orb {
    width: 102px;
    border-width: 2px;
  }
  .score-orb span,
  .score-orb small {
    font-size: 0.62rem;
  }
  .table-perspective {
    padding: 96px 0 136px;
  }
  .virtual-table {
    width: 96vw;
    height: 48vh;
    min-height: 390px;
    transform: rotateX(58deg) translateY(10%);
    border-width: 10px;
  }
  .player-seat {
    width: 96%;
  }
  .rival-seat { top: -44px; }
  .your-seat { bottom: -62px; }
  .center-play-zone {
    inset: 29% 4% 24%;
  }
  .actions button {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.88rem;
  }
  .players-strip.compact {
    display: none;
  }
  .game3d-bottom-grid,
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .lobby-room-card {
    grid-template-columns: 1fr;
  }
  .lobby-room-card img {
    width: 100%;
    height: 160px;
  }
}

/* ===== Native vertical game layer ===== */
.native-game-hud {
  border-radius: 18px;
}

body.game3d-page {
  background: #02040a;
}

.game3d-page .game3d-shell {
  width: min(100%, 430px);
  min-height: 100svh;
  padding: 0;
}

.game3d-page .game3d-topbar,
.game3d-page .game3d-bottom-grid {
  display: none;
}

.native-table-stage {
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

.native-table-stage::before {
  opacity: 0.18;
}

.native-game-logo {
  position: absolute;
  z-index: 11;
  top: 42px;
  left: 50%;
  width: min(148px, 38vw);
  transform: translateX(-50%) translateZ(0);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.58)) drop-shadow(0 0 16px rgba(255, 200, 79, 0.18));
  animation: nativeLogoFloat 4.8s ease-in-out infinite;
  pointer-events: none;
}

.native-props {
  position: absolute;
  z-index: 2;
  bottom: 5.5%;
  width: 118px;
  height: 118px;
  background: center/contain no-repeat;
  opacity: 0.92;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,0.6));
  pointer-events: none;
}

.native-props-left {
  left: -12px;
  background-image: url('../game/props/wicker_jug.png');
  transform: rotate(-8deg) scale(0.92);
}

.native-props-right {
  right: -14px;
  background-image: url('../game/props/mate_gourd_bombilla.png');
  transform: rotate(8deg) scale(0.95);
}

.native-top-icons {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
}

.native-icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(244, 190, 82, 0.78);
  color: #ffe6a2;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.16), transparent 28%), #13151b;
  box-shadow: 0 12px 26px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.07);
  font-weight: 900;
  cursor: pointer;
}

.native-icon-btn.danger {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.16), transparent 28%), #8f1d17;
}

.native-icon-btn.active {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22), transparent 28%), #0f5b45;
}

.native-table-stage .score-orbs {
  grid-template-columns: 112px 1fr 112px;
  padding: 124px 16px 0;
}

.native-table-stage .score-orb {
  width: 106px;
  border-width: 2px;
  transform: translateZ(0);
}

.native-table-stage .score-orb span,
.native-table-stage .score-orb small {
  font-size: 0.64rem;
}

.native-table-stage .score-orb strong {
  font-size: 2.35rem;
}

.native-table-stage .stage-chip {
  align-self: center;
  justify-self: center;
  margin: 0;
  border-radius: 999px;
  padding: 12px 18px;
  transform: translateY(-8px);
  background: rgba(4, 8, 16, 0.84);
  border-color: rgba(252, 211, 77, 0.34);
  box-shadow: 0 16px 28px rgba(0,0,0,0.42);
}

.turn-clock {
  position: absolute;
  z-index: 13;
  top: 210px;
  left: 50%;
  display: grid;
  min-width: 118px;
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 2px solid rgba(244, 190, 82, 0.82);
  border-radius: 18px;
  text-align: center;
  color: #ffe9a6;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 32%),
    linear-gradient(180deg, rgba(14, 21, 34, 0.94), rgba(3, 7, 15, 0.94));
  box-shadow: 0 14px 28px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.turn-clock.hidden {
  display: none;
}

.turn-clock.yours {
  border-color: rgba(103, 232, 249, 0.92);
}

.turn-clock.warning {
  animation: clockPulse 1s ease-in-out infinite;
}

.turn-clock.danger {
  border-color: rgba(248, 113, 113, 0.94);
  color: #fecaca;
  animation: clockDanger 0.55s ease-in-out infinite;
}

.turn-clock span,
.turn-clock small {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.turn-clock strong {
  font-size: 1.5rem;
  line-height: 1.05;
}

.native-table-stage .table-perspective {
  padding: 164px 0 128px;
  place-items: end center;
}

.native-table-stage .virtual-table {
  width: 96vw;
  max-width: 420px;
  height: 45vh;
  min-height: 340px;
  transform: rotateX(57deg) translateY(8%);
  background:
    radial-gradient(280px 160px at 50% 44%, rgba(255,255,255,0.08), transparent 62%),
    rgba(5, 16, 36, 0.10);
  border: 8px solid rgba(101, 50, 18, 0.30);
  box-shadow: 0 34px 72px rgba(0,0,0,0.44), inset 0 0 24px rgba(28, 90, 160, 0.16);
}

.native-table-stage .virtual-table::before {
  inset: 12px;
  border-width: 1px;
  opacity: 0.36;
}

.native-table-stage .virtual-table::after {
  opacity: 0.28;
}

.native-table-stage .player-seat {
  width: 96%;
}

.native-table-stage .rival-seat {
  top: -52px;
}

.native-table-stage .your-seat {
  bottom: -70px;
}

.native-table-stage .seat-label,
.tutorial-page .seat-label {
  border-radius: 999px;
  padding: 9px 13px;
  color: #f8fafc;
  background: rgba(3, 7, 18, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 26px rgba(0,0,0,0.44);
}

.native-table-stage .center-play-zone {
  inset: 26% 2% 22%;
}

.native-table-stage .status-banner {
  width: min(360px, 92vw);
  border-color: rgba(252, 211, 77, 0.30);
}

.native-table-stage .cardc,
.native-table-stage .mesa-card {
  width: clamp(78px, 24vw, 112px);
  height: calc(clamp(78px, 24vw, 112px) * 1.5);
  animation: cardDealIn 0.38s cubic-bezier(.2,.8,.2,1) both;
}

.native-table-stage .cardc img,
.native-table-stage .mesa-card img {
  border-radius: 11px;
  box-shadow: 0 20px 24px rgba(0,0,0,0.54), 0 0 0 2px rgba(255,255,255,0.20);
}

.native-table-stage .cards-player .cardc:nth-child(1) { transform: rotate(-9deg) translateY(18px) translateZ(24px); }
.native-table-stage .cards-player .cardc:nth-child(2) { transform: translateY(-8px) translateZ(30px); }
.native-table-stage .cards-player .cardc:nth-child(3) { transform: rotate(9deg) translateY(18px) translateZ(24px); }
.native-table-stage .cards-rival .cardc:nth-child(1) { transform: rotate(8deg) translateY(-2px) scale(0.88); }
.native-table-stage .cards-rival .cardc:nth-child(2) { transform: translateY(5px) scale(0.88); }
.native-table-stage .cards-rival .cardc:nth-child(3) { transform: rotate(-8deg) translateY(-2px) scale(0.88); }

.native-table-stage .cardc.playable {
  animation: playablePulse 1.4s ease-in-out infinite;
}

.native-table-stage .cardc.playable:hover {
  transform: translateY(-34px) scale(1.09) rotate(0deg) !important;
}

.native-table-stage .cardc.throwing {
  opacity: 0.25;
  pointer-events: none;
}

.native-table-stage .your-seat {
  z-index: 8;
}

.card-flight {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 26px 24px rgba(0,0,0,0.58));
}

.card-flight::before {
  content: "";
  position: absolute;
  inset: -24px -54px;
  z-index: 0;
  background: url('../game/missing_ui/effects/card_throw_trail.png') center/contain no-repeat;
  opacity: 0.78;
  transform: rotate(-8deg);
  pointer-events: none;
}

.card-flight img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px;
}

.table-slam-effect {
  position: fixed;
  z-index: 998;
  width: 150px;
  height: 110px;
  margin: -55px 0 0 -75px;
  pointer-events: none;
  background: url('../game/premium_v2/effects/card_slam_2x.png') center/contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(255, 210, 94, 0.44));
  animation: tableSlamBurst 0.58s cubic-bezier(.18,.82,.2,1) forwards;
}

.mesa-card.landed {
  animation: mesaCardLanded 0.5s cubic-bezier(.16,.9,.22,1) both;
}

.native-table-stage .action-dock {
  bottom: 8px;
  width: min(390px, calc(100% - 24px));
  border-radius: 20px;
  background: rgba(3, 7, 18, 0.86);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -18px 42px rgba(0,0,0,0.50);
}

.native-table-stage .players-strip.compact {
  display: none;
}

.native-table-stage .actions button {
  border-radius: 14px;
  color: #ffe9a6;
  border-color: rgba(252, 211, 77, 0.38);
  box-shadow: 0 8px 16px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.06);
}

@keyframes nativeLogoFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-7px) scale(1.02); }
}

@keyframes cardDealIn {
  from { opacity: 0; transform: translateY(40px) rotate(0deg) scale(0.84); }
  to { opacity: 1; }
}

@keyframes playablePulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 207, 93, 0.18)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 207, 93, 0.45)); }
}

@keyframes tableSlamBurst {
  0% { opacity: 0; transform: translateY(8px) scale(0.35) rotate(-8deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(1.28) rotate(2deg); }
}

@keyframes mesaCardLanded {
  0% { transform: translateY(-18px) scale(1.12) rotate(5deg); filter: brightness(1.2); }
  60% { transform: translateY(3px) scale(0.97) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes clockPulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 14px 28px rgba(0,0,0,0.52), 0 0 0 rgba(252, 211, 77, 0); }
  50% { transform: translateX(-50%) scale(1.045); box-shadow: 0 14px 28px rgba(0,0,0,0.52), 0 0 24px rgba(252, 211, 77, 0.34); }
}

@keyframes clockDanger {
  0%, 100% { transform: translateX(-50%) rotate(-1deg) scale(1); }
  50% { transform: translateX(-50%) rotate(1deg) scale(1.055); }
}

.call-burst {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.call-burst.show {
  opacity: 1;
  transform: scale(1);
}

.call-burst-card,
.tutorial-call {
  min-width: min(520px, 82vw);
  padding: 20px 28px;
  border-radius: 22px;
  text-align: center;
  border: 3px solid rgba(252, 211, 77, 0.92);
  color: #ffe9a6;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 111, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(119, 20, 17, 0.96), rgba(46, 6, 10, 0.96));
  box-shadow: 0 0 34px rgba(255, 193, 70, 0.34), 0 24px 70px rgba(0,0,0,0.62);
}

.call-burst-card span,
.tutorial-call {
  display: block;
  font-family: Georgia, serif;
  font-size: clamp(2.3rem, 9vw, 5.6rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(72, 25, 5, 0.9), 0 0 18px rgba(255, 215, 116, 0.38);
}

.call-burst-card small {
  display: block;
  margin-top: 6px;
  font-weight: 900;
  color: #fef3c7;
}

.call-burst-art {
  width: min(660px, 88vw);
  max-height: 34vh;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.66)) drop-shadow(0 0 24px rgba(255, 206, 91, 0.34));
  animation: cantoPop 0.56s cubic-bezier(.18,.9,.18,1) both;
}

@keyframes cantoPop {
  0% { opacity: 0; transform: translateY(20px) scale(0.72) rotate(-2deg); }
  64% { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (orientation: portrait) {
  .game3d-shell {
    width: min(100%, 760px);
    padding: 0;
  }

  .native-game-hud {
    display: none;
  }

  .native-table-stage {
    min-height: 100svh;
    border-radius: 0;
    border: 0;
    background-size: cover;
    background-position: center top;
  }

  .native-table-stage::before {
    opacity: 0.22;
  }

  .score-orbs {
    padding-top: 54px;
  }

  .table-perspective {
    padding: 148px 0 118px;
    place-items: end center;
  }

  .virtual-table {
    width: 96vw;
    height: 44vh;
    min-height: 330px;
    background: rgba(10, 28, 58, 0.08);
    border-color: rgba(91, 44, 18, 0.18);
    box-shadow: 0 28px 70px rgba(0,0,0,0.28);
  }

  .virtual-table::before,
  .virtual-table::after {
    opacity: 0.25;
  }

  .action-dock {
    bottom: 10px;
    border-radius: 18px;
  }
}

/* ===== Tutorial ===== */
.tutorial-page {
  background: #02040a;
}

.tutorial-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.46)),
    var(--tutorial-room);
  background-size: cover;
  background-position: center;
}

.tutorial-hud {
  position: fixed;
  z-index: 30;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffe9a6;
}

.tutorial-hud div {
  display: grid;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
}

.tutorial-hud span {
  color: #cbd5e1;
  font-size: 0.78rem;
}

.tutorial-stage {
  position: relative;
  min-height: 100svh;
  padding: 118px 18px 24px;
  display: grid;
}

.tutorial-logo {
  position: absolute;
  z-index: 2;
  top: 54px;
  left: 50%;
  width: min(132px, 34vw);
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 18px rgba(0,0,0,0.58)) drop-shadow(0 0 16px rgba(255, 200, 79, 0.18));
  animation: nativeLogoFloat 4.8s ease-in-out infinite;
  pointer-events: none;
}

.tutorial-score,
.tutorial-table {
  position: relative;
  z-index: 3;
}

.tutorial-score {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  gap: 10px;
  align-items: center;
}

.tutorial-score > div {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(2, 6, 16, 0.78);
  border: 1px solid rgba(252, 211, 77, 0.28);
  text-align: center;
}

.tutorial-score span {
  display: block;
  color: #f8d57b;
  font-weight: 900;
}

.tutorial-score strong {
  color: #fff2bd;
  font-size: 2rem;
  font-family: Georgia, serif;
}

.tutorial-status {
  color: #ffe9a6;
  font-weight: 900;
}

.tutorial-table {
  align-self: end;
  min-height: 72vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  justify-items: center;
  perspective: 900px;
}

.tutorial-opponent,
.tutorial-center,
.tutorial-hand {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.tutorial-card-drop,
.tutorial-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 150px;
}

.tutorial-coach,
.tutorial-objective {
  max-width: 620px;
  padding: 13px 16px;
  border-radius: 16px;
  color: #fff7d6;
  background: rgba(4, 8, 16, 0.78);
  border: 1px solid rgba(252, 211, 77, 0.28);
  text-align: center;
  font-weight: 800;
}

.tutorial-card {
  cursor: pointer;
}

.tutorial-card.correct img {
  outline: 4px solid #22c55e;
  transform: translateY(-16px) scale(1.05);
}

.tutorial-card.hint img {
  outline: 4px solid #f59e0b;
}

.tutorial-panel {
  align-self: stretch;
  padding: 86px 22px 22px;
  display: grid;
  align-content: center;
  gap: 16px;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255,255,255,0.12);
}

.tutorial-panel h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 3rem);
}

.tutorial-panel p {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.55;
}

.tutorial-progress,
.tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tutorial-progress button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(252, 211, 77, 0.32);
  color: #ffe9a6;
  background: rgba(4, 8, 16, 0.78);
  font-weight: 900;
  cursor: pointer;
}

.tutorial-progress button.active {
  background: linear-gradient(135deg, #f59e0b, #38bdf8);
  color: #061120;
}

@media (max-width: 940px) {
  .tutorial-shell {
    grid-template-columns: 1fr;
  }

  .tutorial-panel {
    min-height: auto;
    padding: 18px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}

/* ===== Game identity for lobby, shop and profile ===== */
body:not(.game3d-page):not(.tutorial-page) {
  background:
    linear-gradient(180deg, rgba(2, 5, 12, 0.24), rgba(2, 5, 12, 0.86)),
    url('../game/backgrounds/pulperia_bar_criollo.png') center top/cover fixed;
}

body:not(.game3d-page):not(.tutorial-page) .surface {
  border-color: rgba(252, 211, 77, 0.28);
  background:
    linear-gradient(180deg, rgba(12, 17, 25, 0.90), rgba(5, 9, 16, 0.96)),
    linear-gradient(135deg, rgba(88, 45, 16, 0.32), transparent 44%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.04);
}

body:not(.game3d-page):not(.tutorial-page) .hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

body:not(.game3d-page):not(.tutorial-page) .hero-banner::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -46px;
  width: min(260px, 42vw);
  aspect-ratio: 1;
  background: url('../game/ui/logo_truco_criollo.png') center/contain no-repeat;
  opacity: 0.16;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.6));
  pointer-events: none;
}

body:not(.game3d-page):not(.tutorial-page) .brand-mark,
body:not(.game3d-page):not(.tutorial-page) .card-icon {
  border: 2px solid rgba(252, 211, 77, 0.58);
  color: #ffe9a6;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(145deg, #17365d, #06111f);
}

body:not(.game3d-page):not(.tutorial-page) .btn.primary,
body:not(.game3d-page):not(.tutorial-page) .actions button.primary {
  border-color: rgba(252, 211, 77, 0.54);
  background: linear-gradient(180deg, #2f9f4f, #126632);
  color: #fff7d6;
  text-shadow: 0 2px 0 rgba(0,0,0,0.42);
  box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.12);
}

body:not(.game3d-page):not(.tutorial-page) .btn.secondary,
body:not(.game3d-page):not(.tutorial-page) .btn.ghost {
  border-color: rgba(252, 211, 77, 0.32);
  background: rgba(3, 7, 18, 0.72);
}

body:not(.game3d-page):not(.tutorial-page) .panel-card,
body:not(.game3d-page):not(.tutorial-page) .link-card,
body:not(.game3d-page):not(.tutorial-page) .stat-card,
body:not(.game3d-page):not(.tutorial-page) .lobby-room-card {
  border-color: rgba(252, 211, 77, 0.26);
  background:
    linear-gradient(180deg, rgba(18, 14, 9, 0.90), rgba(7, 8, 12, 0.95)),
    radial-gradient(320px 180px at 50% 0%, rgba(252, 211, 77, 0.11), transparent 62%);
  box-shadow: 0 18px 34px rgba(0,0,0,0.42);
}

body:not(.game3d-page):not(.tutorial-page) .shop-preview {
  border-color: rgba(252, 211, 77, 0.24);
  background: rgba(3, 7, 18, 0.72);
  box-shadow: inset 0 0 32px rgba(255, 197, 70, 0.06);
}

body:not(.game3d-page):not(.tutorial-page) .shop-card {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

body:not(.game3d-page):not(.tutorial-page) .shop-card:hover,
body:not(.game3d-page):not(.tutorial-page) .link-card:hover,
body:not(.game3d-page):not(.tutorial-page) .lobby-room-card:hover {
  transform: translateY(-3px);
  border-color: rgba(252, 211, 77, 0.54);
}

/* ===== Native app shell ===== */
body.native-app-page {
  background:
    linear-gradient(180deg, rgba(0, 7, 18, 0.16), rgba(0, 0, 0, 0.72)),
    url('../game/backgrounds/pulperia_bar_criollo.png') center top/cover fixed;
  color: #fff3c4;
  font-family: Georgia, "Times New Roman", serif;
}

body.native-app-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72), transparent 20%, transparent 80%, rgba(0,0,0,0.72)),
    linear-gradient(180deg, rgba(2, 10, 24, 0.56), rgba(8, 4, 2, 0.70));
  pointer-events: none;
}

.native-screen {
  position: relative;
  width: min(100%, 460px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 12px 10px 100px;
}

.native-app-topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0 8px;
}

.native-player-chip,
.native-currency,
.native-menu-coin {
  border: 2px solid rgba(249, 199, 88, 0.78);
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, rgba(83, 50, 22, 0.98), rgba(22, 12, 6, 0.98));
  box-shadow: 0 12px 24px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.native-player-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px 18px 18px 999px;
}

.native-avatar,
.native-profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #082043, #020713);
  border: 2px solid #f4c45c;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.46);
}

.native-avatar {
  width: 52px;
  height: 52px;
}

.native-avatar::after,
.native-profile-avatar::after {
  content: "";
  position: absolute;
  inset: -6px;
  background: url('../game/props/avatar_frame_ring.png') center/contain no-repeat;
  pointer-events: none;
}

.native-avatar img,
.native-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.native-avatar span,
.native-profile-avatar span {
  font-weight: 900;
  color: #ffe9a6;
  text-shadow: 0 2px 0 #2b1406;
}

.native-player-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.native-player-copy strong {
  overflow: hidden;
  color: #fff6d3;
  font-size: 1rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 #2b1406;
}

.native-level-row,
.native-profile-level {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}

.native-level-row em,
.native-profile-level span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 9px;
  color: #ffe9a6;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(180deg, #173a66, #06172c);
  border: 1px solid #f4c45c;
}

.native-level-row i,
.native-profile-level i {
  overflow: hidden;
  height: 13px;
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.88);
  border: 1px solid rgba(252, 211, 77, 0.48);
}

.native-level-row b,
.native-profile-level b {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #58d5ff, #1673c8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.native-currency-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.native-currency {
  display: grid;
  grid-template-columns: 28px auto 24px;
  align-items: center;
  gap: 5px;
  height: 42px;
  min-width: 118px;
  padding: 4px 5px 4px 8px;
  border-radius: 999px;
  color: #ffe9a6;
}

.native-currency span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, #fff5b8, transparent 30%),
    linear-gradient(145deg, #fbe07d, #a55d12);
  border: 1px solid #fff0a8;
  box-shadow: 0 4px 8px rgba(0,0,0,0.38);
}

.native-currency strong {
  font-size: 1rem;
  line-height: 1;
  text-align: right;
}

.native-currency i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #ffe9a6;
  font-style: normal;
  font-weight: 900;
  background: #0d3157;
  border: 1px solid #f4c45c;
}

.native-menu-coin {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    url('../game/props/red_menu_button.png') center/88% no-repeat,
    linear-gradient(180deg, #822017, #390805);
}

.native-logo-block {
  display: grid;
  place-items: center;
  margin: 0 auto -8px;
  pointer-events: none;
}

.native-logo-block img {
  width: min(285px, 82%);
  filter: drop-shadow(0 24px 24px rgba(0,0,0,0.68)) drop-shadow(0 0 18px rgba(255, 205, 82, 0.22));
}

.native-logo-block.small-logo img {
  width: 164px;
}

.native-featured-card,
.native-room-spotlight,
.native-shop-hero,
.native-profile-hero,
.native-profile-panel,
.native-inventory-section,
.native-side-promo,
.native-daily-strip {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(249, 199, 88, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(45, 27, 13, 0.94), rgba(10, 7, 5, 0.96));
  box-shadow: 0 18px 36px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.07);
}

.native-featured-card {
  min-height: 238px;
  display: grid;
  align-items: end;
  margin-top: -4px;
  padding: 16px;
}

.native-featured-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.native-featured-card::after,
.native-room-spotlight::after,
.native-shop-hero::after,
.native-profile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.40));
  pointer-events: none;
}

.native-featured-copy,
.native-featured-cards,
.native-play-button,
.native-room-spotlight-copy,
.native-create-room,
.native-shop-hero > *,
.native-profile-hero > * {
  position: relative;
  z-index: 2;
}

.ribbon {
  display: inline-flex;
  width: max-content;
  padding: 5px 12px;
  border-radius: 6px;
  color: #fff5bf;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(180deg, #a63124, #68120c);
  border: 1px solid #f4c45c;
  box-shadow: 0 8px 14px rgba(0,0,0,0.42);
}

.native-featured-copy h1,
.native-room-spotlight h1,
.native-title-plaque h1,
.native-profile-hero h1,
.native-section-title h2 {
  margin: 8px 0 4px;
  color: #ffe9a6;
  font-size: 2rem;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #351706, 0 0 14px rgba(255, 205, 82, 0.22);
}

.native-featured-copy p,
.native-section-title p,
.native-shop-copy p,
.native-profile-hero p,
.native-side-promo p,
.native-daily-strip p {
  margin: 0;
  color: #f4dca0;
  line-height: 1.25;
}

.native-prize-row {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.72);
  border: 1px solid rgba(252, 211, 77, 0.38);
}

.native-prize-row strong {
  color: #86efac;
}

.native-featured-cards {
  position: absolute;
  right: 24px;
  top: 48px;
  width: 138px;
  height: 100px;
}

.native-featured-cards img {
  position: absolute;
  width: 54px;
  border-radius: 8px;
  box-shadow: 0 12px 18px rgba(0,0,0,0.48);
}

.native-featured-cards img:nth-child(1) { left: 0; top: 10px; transform: rotate(-12deg); }
.native-featured-cards img:nth-child(2) { left: 42px; top: 0; transform: rotate(2deg); }
.native-featured-cards img:nth-child(3) { left: 84px; top: 12px; transform: rotate(14deg); }

.native-play-button,
.native-create-room button,
.native-room-list-item a,
.native-mini-room a,
.native-shop-card button,
.native-side-promo a,
.native-daily-strip a,
.native-profile-panel a,
.native-profile-edit button,
.native-inventory-card button {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border-radius: 10px;
  border: 2px solid rgba(249, 199, 88, 0.86);
  color: #fff5ce;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 36%),
    linear-gradient(180deg, #31a956, #0e5a2b);
  box-shadow: 0 12px 20px rgba(0,0,0,0.44), inset 0 0 0 1px rgba(255,255,255,0.10);
}

.native-play-button {
  justify-self: end;
  width: 190px;
  margin-top: 12px;
  font-size: 1.24rem;
}

.native-room-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.native-mini-room,
.native-action-tile,
.native-shop-card,
.native-inventory-card,
.native-room-list-item {
  border: 2px solid rgba(249, 199, 88, 0.64);
  background:
    radial-gradient(180px 80px at 50% 0%, rgba(255, 221, 128, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(41, 24, 11, 0.98), rgba(11, 8, 5, 0.98));
  box-shadow: 0 14px 24px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.native-mini-room {
  overflow: hidden;
  display: grid;
  gap: 4px;
  min-height: 178px;
  border-radius: 12px;
  padding: 6px;
}

.native-mini-room img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.native-mini-room span,
.native-mini-room small,
.native-mini-room a {
  text-align: center;
}

.native-mini-room span {
  min-height: 30px;
  color: #ffe9a6;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.05;
}

.native-mini-room small {
  color: #ffd978;
}

.native-mini-room a {
  min-height: 28px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.native-action-grid,
.native-shop-grid,
.native-inventory-grid,
.native-profile-panels {
  display: grid;
  gap: 10px;
}

.native-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.native-action-tile {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 112px;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.native-action-tile strong {
  color: #ffe9a6;
  font-size: 1rem;
  line-height: 1.06;
  text-transform: uppercase;
}

.native-action-tile.blue { background-color: rgba(15, 64, 118, 0.82); }
.native-action-tile.red { background-color: rgba(108, 24, 15, 0.82); }
.native-action-tile.green { background-color: rgba(22, 88, 42, 0.82); }
.native-action-tile.purple { background-color: rgba(67, 30, 105, 0.82); }
.native-action-tile.gold { background-color: rgba(103, 67, 12, 0.82); }
.native-action-tile.slate { background-color: rgba(26, 36, 54, 0.82); }

.tile-icon,
.nav-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
}

.tile-icon::before,
.nav-icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px solid #f6ce72;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

.tile-icon.cards::after,
.nav-icon.cards::after {
  content: "";
  position: absolute;
  inset: 9px 3px 3px 13px;
  border: 3px solid #f6ce72;
  border-radius: 5px;
  transform: rotate(14deg);
}

.tile-icon.trophy::before {
  border-radius: 50% 50% 8px 8px;
}

.tile-icon.basket::before,
.nav-icon.shop::before {
  border-top: 0;
  border-radius: 3px 3px 8px 8px;
}

.tile-icon.gear::before {
  border-radius: 50%;
}

.native-daily-strip {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(13, 59, 101, 0.98), rgba(5, 25, 49, 0.98));
}

.daily-calendar {
  display: grid;
  place-items: center;
  height: 58px;
  border-radius: 9px;
  color: #2b1606;
  background: linear-gradient(180deg, #fff3c4, #d69a3e);
  border: 2px solid #f6ce72;
}

.daily-calendar strong {
  font-size: 1.8rem;
  line-height: 0.9;
}

.daily-calendar span {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.native-daily-strip h2 {
  margin: 0;
  color: #ffe9a6;
  font-size: 1.18rem;
  text-transform: uppercase;
}

.daily-rewards {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.daily-rewards span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(252, 211, 77, 0.38);
  color: #ffe9a6;
  font-size: 0.78rem;
}

.native-bottom-nav {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 460px);
  transform: translateX(-50%);
  border: 2px solid rgba(249, 199, 88, 0.72);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(45, 28, 14, 0.98), rgba(13, 8, 4, 0.99));
  box-shadow: 0 -16px 28px rgba(0,0,0,0.62);
}

.native-bottom-nav a {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 76px;
  padding: 6px 2px;
  color: #f4c45c;
  border-left: 1px solid rgba(249, 199, 88, 0.30);
}

.native-bottom-nav a:first-child {
  border-left: 0;
}

.native-bottom-nav a.active {
  color: #ffe9a6;
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(65, 181, 255, 0.28), transparent 72%),
    linear-gradient(180deg, rgba(13, 66, 116, 0.88), rgba(5, 25, 49, 0.88));
  box-shadow: inset 0 0 0 1px rgba(80, 188, 255, 0.28);
}

.native-bottom-nav strong {
  font-size: 0.86rem;
  text-transform: uppercase;
}

.native-tabs,
.native-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin: 10px 0;
  border: 2px solid rgba(249, 199, 88, 0.68);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40, 24, 12, 0.96), rgba(9, 6, 4, 0.96));
}

.native-tabs a,
.native-tabs span,
.native-filter-row span {
  display: grid;
  place-items: center;
  min-height: 46px;
  color: #f4dca0;
  font-weight: 900;
  text-transform: uppercase;
  border-left: 1px solid rgba(249, 199, 88, 0.30);
}

.native-tabs a:first-child,
.native-tabs span:first-child,
.native-filter-row span:first-child {
  border-left: 0;
}

.native-tabs .active,
.native-filter-row .active {
  color: #ffe9a6;
  background: linear-gradient(180deg, #154d83, #082541);
}

.native-room-spotlight {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 12px;
  min-height: 236px;
  padding: 12px;
}

.native-room-spotlight > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(252, 211, 77, 0.38);
}

.native-room-spotlight-copy dl {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
}

.native-room-spotlight-copy div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(252, 211, 77, 0.24);
}

.native-room-spotlight-copy dt,
.native-room-spotlight-copy dd {
  margin: 0;
}

.native-room-spotlight-copy dt {
  color: #f4dca0;
}

.native-room-spotlight-copy dd {
  color: #ffe9a6;
  font-weight: 900;
}

.native-create-room {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 150px;
  gap: 8px;
  align-items: center;
}

.native-create-room label {
  color: #ffe9a6;
  font-weight: 900;
  text-transform: uppercase;
}

.native-create-room input,
.native-profile-edit input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(252, 211, 77, 0.38);
  border-radius: 9px;
  padding: 0 10px;
  color: #ffe9a6;
  background: rgba(0,0,0,0.42);
}

.native-filter-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.native-filter-row span {
  min-height: 38px;
  font-size: 0.82rem;
}

.native-room-list {
  display: grid;
  gap: 8px;
}

.native-room-list-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 8px;
  border-radius: 12px;
}

.native-room-list-item img {
  width: 86px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
}

.native-room-list-item h2 {
  margin: 0;
  color: #ffe9a6;
  font-size: 1.05rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.native-room-list-item p,
.native-room-list-item span {
  display: block;
  margin: 3px 0 0;
  color: #f4dca0;
  font-size: 0.84rem;
}

.native-empty-panel {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 2px dashed rgba(249, 199, 88, 0.40);
  border-radius: 12px;
  background: rgba(0,0,0,0.38);
}

.native-empty-panel strong {
  color: #ffe9a6;
}

.native-empty-panel span {
  color: #f4dca0;
}

.native-side-promo {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(101, 24, 16, 0.95), rgba(32, 9, 5, 0.98));
}

.native-side-promo h2 {
  margin: 0;
  color: #ffe9a6;
  font-size: 1.8rem;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #351706;
}

.native-title-plaque {
  display: grid;
  place-items: center;
  margin: 6px auto 0;
}

.native-title-plaque h1 {
  min-width: 270px;
  margin: 0;
  padding: 12px 26px;
  border: 2px solid rgba(249, 199, 88, 0.82);
  border-radius: 18px;
  color: #ffe9a6;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(180deg, #0f3b64, #06192d);
  box-shadow: 0 16px 28px rgba(0,0,0,0.54), inset 0 0 0 1px rgba(255,255,255,0.08);
  text-shadow: 0 3px 0 #351706;
}

.native-shop-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.native-shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
  min-height: 210px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.70), rgba(0,0,0,0.20)),
    url('../game/backgrounds/pulperia_bar_criollo.png') center/cover;
}

.native-shop-hero h2,
.native-shop-card h3,
.native-profile-panel h2,
.native-profile-panel h3,
.native-inventory-card h3 {
  margin: 6px 0;
  color: #ffe9a6;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #351706;
}

.native-shop-hero strong {
  display: inline-flex;
  margin-top: 10px;
  color: #ffd978;
}

.native-shop-section,
.native-inventory-section {
  margin-top: 12px;
}

.native-section-title {
  padding: 10px 4px 4px;
}

.native-section-title h2 {
  font-size: 1.55rem;
}

.native-shop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.native-shop-card {
  position: relative;
  display: grid;
  grid-template-rows: 126px auto auto;
  gap: 8px;
  min-height: 280px;
  padding: 8px;
  border-radius: 12px;
}

.native-shop-card.equipped::after,
.native-inventory-card.equipped::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #45c963, #0f6b31);
  border: 2px solid #f6ce72;
  box-shadow: 0 6px 10px rgba(0,0,0,0.42);
}

.native-shop-preview {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(8, 20, 38, 0.90), rgba(3, 7, 14, 0.94));
  border: 1px solid rgba(252, 211, 77, 0.26);
}

.native-shop-preview.room img {
  width: 100%;
  height: 100%;
  min-height: 124px;
  object-fit: cover;
}

.native-shop-preview.back {
  display: grid;
  place-items: center;
}

.native-shop-preview.back img {
  width: 72px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,0.48));
}

.native-shop-preview.deck {
  overflow: visible;
  display: grid;
  place-items: center;
}

.native-shop-preview.deck img {
  position: absolute;
  width: 66px;
  border-radius: 8px;
  filter: drop-shadow(0 14px 13px rgba(0,0,0,0.52));
}

.native-shop-preview.deck img:nth-child(1) { left: 18px; transform: rotate(-13deg); z-index: 1; }
.native-shop-preview.deck img:nth-child(2) { left: 48px; transform: rotate(-3deg); z-index: 2; }
.native-shop-preview.deck img:nth-child(3) { left: 78px; transform: rotate(7deg); z-index: 3; }
.native-shop-preview.deck img:nth-child(4) { left: 108px; transform: rotate(16deg); z-index: 4; }

.native-shop-preview.hero-deck img {
  width: 82px;
}

.native-shop-copy span {
  color: #6ee7ff;
  font-size: 0.72rem;
  font-weight: 900;
}

.native-shop-copy h3 {
  font-size: 1.12rem;
}

.native-shop-copy p {
  min-height: 48px;
  font-size: 0.86rem;
}

.native-shop-card form,
.native-inventory-card form {
  align-self: end;
}

.native-shop-card button,
.native-inventory-card button {
  width: 100%;
  min-height: 38px;
}

.native-shop-card button:disabled,
.native-inventory-card button:disabled {
  cursor: default;
  background: linear-gradient(180deg, #1c6f39, #0a4320);
  opacity: 0.82;
}

.native-profile-hero {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 224px;
  padding: 18px 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.48)),
    url('../game/backgrounds/pulperia_bar_criollo.png') center/cover;
}

.native-profile-avatar {
  z-index: 2;
  width: 112px;
  height: 112px;
}

.native-profile-main {
  min-width: 0;
}

.native-profile-main h1 {
  overflow-wrap: anywhere;
  font-size: 2.2rem;
  text-transform: none;
}

.native-profile-level {
  grid-template-columns: 38px minmax(0, 1fr);
  margin-bottom: 8px;
}

.native-profile-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 6px;
}

.native-rank-shield {
  grid-column: 1 / -1;
  display: grid;
  justify-self: end;
  min-width: 158px;
  padding: 10px;
  border: 2px solid #f6ce72;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(8, 43, 81, 0.96), rgba(3, 15, 31, 0.96));
}

.native-rank-shield strong {
  color: #ffe9a6;
  text-transform: uppercase;
}

.native-rank-shield span {
  color: #ffd978;
}

.native-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  border: 2px solid rgba(249, 199, 88, 0.64);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(4, 31, 56, 0.96), rgba(2, 12, 24, 0.98));
}

.native-profile-stats article {
  display: grid;
  gap: 6px;
  min-height: 84px;
  place-items: center;
  padding: 8px 4px;
  text-align: center;
  border-left: 1px solid rgba(249, 199, 88, 0.28);
}

.native-profile-stats article:first-child {
  border-left: 0;
}

.native-profile-stats span {
  color: #f4dca0;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.native-profile-stats strong {
  color: #ffe9a6;
  font-size: 1.25rem;
}

.native-profile-panels {
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.native-profile-panel {
  min-height: 240px;
  padding: 10px;
}

.native-profile-panel img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}

.native-profile-panel ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.native-profile-panel li {
  display: grid;
  gap: 2px;
}

.native-profile-panel li span {
  color: #f4dca0;
  font-size: 0.78rem;
}

.native-profile-panel li strong {
  color: #ffe9a6;
}

.native-inventory-section {
  padding: 8px;
}

.native-inventory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.native-inventory-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 214px;
  padding: 8px;
  border-radius: 12px;
}

.native-profile-item-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 92px;
  border-radius: 8px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(252, 211, 77, 0.28);
}

.native-profile-item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.native-profile-item-preview.card_back img {
  width: 58px;
  height: 86px;
  object-fit: contain;
}

.native-profile-item-preview.deck {
  position: relative;
}

.native-profile-item-preview.deck img {
  position: absolute;
  width: 56px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.46));
}

.native-profile-item-preview.deck img:first-child {
  transform: rotate(-12deg) translateX(-16px);
}

.native-profile-item-preview.deck img:last-child {
  transform: rotate(12deg) translateX(16px);
}

.native-inventory-card h3 {
  min-height: 38px;
  font-size: 1rem;
}

.native-clickable {
  position: relative;
  overflow: hidden;
  transform-origin: center;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.native-clickable.native-pressed {
  animation: nativePress 0.26s cubic-bezier(.2,.8,.2,1);
  filter: brightness(1.16) saturate(1.12);
}

.native-ripple {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 243, 196, 0.72), rgba(255, 201, 80, 0.24) 42%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: nativeRipple 0.52s ease-out forwards;
}

.native-bottom-nav a:active,
.native-action-tile:active,
.native-play-button:active,
.native-shop-card button:active,
.native-room-list-item a:active {
  transform: translateY(2px) scale(0.98);
}

@keyframes nativePress {
  0% { transform: scale(1); }
  42% { transform: scale(0.965); }
  100% { transform: scale(1); }
}

@keyframes nativeRipple {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(13); }
}

@media (max-width: 390px) {
  .native-currency {
    min-width: 96px;
    grid-template-columns: 22px auto 22px;
  }

  .native-currency strong {
    font-size: 0.88rem;
  }

  .native-room-row,
  .native-action-grid {
    gap: 6px;
  }

  .native-featured-copy h1,
  .native-room-spotlight h1 {
    font-size: 1.72rem;
  }

  .native-shop-grid,
  .native-profile-panels,
  .native-inventory-grid {
    grid-template-columns: 1fr;
  }

  .native-shop-card {
    grid-template-rows: 150px auto auto;
  }
}

/* ===== Premium assets v2: loading, HUD and live controls ===== */
.app-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff1bd;
  background: #020204;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.app-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loader-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(0,0,0,0.12), rgba(0,0,0,0.76) 66%, #020204),
    url('../auth_ui/TRUCOYA_AUTH_LOADING_UI_KIT/assets/backgrounds/loading_cantina_blue.jpg') center/cover;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.02);
}

.app-loader-spark {
  position: absolute;
  width: 130px;
  aspect-ratio: 1;
  background: url('../auth_ui/TRUCOYA_AUTH_LOADING_UI_KIT/assets/effects/spark_star_gold.png') center/contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(255, 203, 79, 0.9));
  animation: tyPulse 2.8s ease-in-out infinite;
}

.app-loader-spark.one { left: 13%; top: 24%; }
.app-loader-spark.two { right: 15%; bottom: 23%; width: 86px; animation-delay: 1s; }

.app-loader-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 560px);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 24px;
  border: 2px solid rgba(245, 200, 102, 0.86);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(11, 28, 55, 0.94), rgba(5, 7, 12, 0.95));
  box-shadow: 0 28px 74px rgba(0,0,0,0.62), inset 0 0 0 1px rgba(255,255,255,0.10);
}

.app-loader-logo {
  width: min(430px, 84vw);
  filter: drop-shadow(0 22px 24px rgba(0,0,0,0.66)) drop-shadow(0 0 28px rgba(255, 198, 76, 0.26));
  animation: tyFloat 4s ease-in-out infinite;
}

.app-loader-card h2 {
  margin: 0;
  color: #ffd978;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #3b1905;
}

.app-loader-card p {
  margin: 0;
  color: #f5ddb0;
  font-weight: 800;
  text-transform: uppercase;
}

.app-loader-progress {
  width: min(100%, 440px);
  height: 22px;
  overflow: hidden;
  padding: 4px;
  border: 1px solid rgba(245, 200, 102, 0.72);
  border-radius: 999px;
  background: rgba(0,0,0,0.56);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.app-loader-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a95f14, #ffd66e, #fff0a6, #d9891e);
  box-shadow: 0 0 22px rgba(255, 202, 82, 0.68);
  transition: width 0.18s ease;
}

.native-toast {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: 94px;
  width: min(420px, calc(100vw - 28px));
  padding: 13px 16px;
  transform: translate(-50%, 16px);
  border: 2px solid rgba(249, 199, 88, 0.82);
  border-radius: 15px;
  color: #fff1bd;
  text-align: center;
  font-family: Georgia, serif;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(12, 26, 48, 0.96), rgba(4, 8, 15, 0.98));
  box-shadow: 0 18px 38px rgba(0,0,0,0.54);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.native-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.native-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background:
    linear-gradient(180deg, rgba(45, 28, 14, 0.78), rgba(13, 8, 4, 0.96)),
    url('../game/premium_v2/nav/bottom_nav_5_slots_generated_2x.png') center/100% 100% no-repeat;
}

.nav-icon::before,
.nav-icon::after,
.tile-icon::before,
.tile-icon::after {
  display: none;
}

.nav-icon,
.tile-icon {
  background: center/contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.48));
}

.nav-icon.home,
.tile-icon.home { background-image: url('../game/premium_v2/nav/icons/icon_casa_gold_generated_2x.png'); }
.nav-icon.cards,
.tile-icon.cards { background-image: url('../game/premium_v2/nav/icons/icon_cartas_gold_generated_2x.png'); }
.nav-icon.shop,
.tile-icon.basket { background-image: url('../game/premium_v2/nav/icons/icon_carrito_gold_generated_2x.png'); }
.nav-icon.user { background-image: url('../game/premium_v2/nav/icons/icon_usuario_gold_generated_2x.png'); }
.nav-icon.more { background-image: url('../game/premium_v2/nav/icons/icon_mas_reference_2x.png'); }
.tile-icon.table { background-image: url('../game/premium_v2/nav/icons/icon_mesa_gold_generated_2x.png'); }
.tile-icon.trophy { background-image: url('../game/premium_v2/nav/icons/icon_trofeo_gold_generated_2x.png'); }
.tile-icon.scroll { background-image: url('../game/premium_v2/nav/icons/icon_pergamino_gold_generated_2x.png'); }
.tile-icon.gear { background-image: url('../game/premium_v2/nav/icons/icon_info_gold_generated_2x.png'); }

.native-currency {
  border: 0;
  background: url('../game/premium_v2/hud/currency_bar_coin_normal_2x.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-currency span,
.native-currency i {
  opacity: 0;
}

.native-menu-coin {
  border: 0;
  background: url('../game/premium_v2/nav/menu_red_normal_2x.png') center/contain no-repeat;
  box-shadow: none;
}

.native-player-chip {
  border: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.24)),
    url('../game/premium_v2/hud/name_plate_player_reference_2x.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-play-button,
.native-create-room button,
.native-room-list-item a,
.native-mini-room a,
.native-shop-card button,
.native-inventory-card button {
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.05)),
    url('../game/premium_v2/buttons/green_small_jugar_normal_2x.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-play-button,
.native-create-room button {
  background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.05)), url('../game/premium_v2/buttons/green_large_jugar_ahora_normal_2x.png');
}

.native-shop-card button[name="purchase"] {
  background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.05)), url('../game/premium_v2/buttons/green_small_comprar_normal_2x.png');
}

.native-tabs a,
.native-tabs span,
.native-filter-row button {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 0;
  border-left: 1px solid rgba(249, 199, 88, 0.30);
  color: #f4dca0;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
}

.native-tabs a:first-child,
.native-tabs span:first-child,
.native-filter-row button:first-child {
  border-left: 0;
}

.native-filter-row button.active {
  color: #ffe9a6;
  background: linear-gradient(180deg, #154d83, #082541);
}

.native-party-panel {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 16px;
  border: 2px solid rgba(249, 199, 88, 0.74);
  border-radius: 16px;
  background:
    radial-gradient(260px 140px at 70% 0%, rgba(255, 217, 120, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(17, 38, 67, 0.96), rgba(6, 10, 18, 0.98));
  box-shadow: 0 18px 34px rgba(0,0,0,0.50);
}

.native-party-panel h2 {
  margin: 0;
  color: #ffe9a6;
  font-size: 1.8rem;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #351706;
}

.native-party-panel p {
  margin: 0;
  color: #f4dca0;
}

.native-party-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.native-party-slots span,
.native-party-slots button,
.native-party-panel > button {
  min-height: 48px;
  border: 2px solid rgba(249, 199, 88, 0.70);
  border-radius: 12px;
  color: #ffe9a6;
  font: inherit;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(39, 64, 94, 0.94), rgba(9, 20, 35, 0.96));
}

.native-party-slots span {
  display: grid;
  place-items: center;
}

.native-party-cta {
  color: #ffe9a6;
}

.native-party-cta span,
.native-party-cta strong {
  align-self: center;
}

.native-table-stage .virtual-table {
  background:
    radial-gradient(280px 160px at 50% 44%, rgba(255,255,255,0.08), transparent 62%),
    url('../game/premium_v2/cards/table_zone_cloth_green_2x.png') center/100% 100% no-repeat,
    rgba(5, 34, 24, 0.80);
  border-color: rgba(90, 50, 22, 0.78);
}

.turn-clock {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.28)),
    url('../game/premium_v2/badges/clock_60s_normal_2x.png') center/100% 100% no-repeat;
  border-color: transparent;
}

.turn-clock.warning {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.28)),
    url('../game/premium_v2/badges/clock_60s_alert_yellow_2x.png') center/100% 100% no-repeat;
}

.turn-clock.danger {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.28)),
    url('../game/premium_v2/badges/clock_60s_alert_red_2x.png') center/100% 100% no-repeat;
}

.login-native-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.login-native-actions details {
  border: 1px solid rgba(245, 200, 102, 0.42);
  border-radius: 18px;
  padding: 12px;
  background: rgba(0,0,0,0.24);
}

.login-native-actions summary {
  cursor: pointer;
  color: #f9d988;
  font-weight: 900;
  text-transform: uppercase;
}

.login-native-actions details .ty-form {
  margin-top: 12px;
}

.ty-btn-guest {
  width: 100%;
  background: linear-gradient(180deg,#6a1d17,#2b0806 60%,#160303);
}

@media (max-width: 390px) {
  .native-bottom-nav strong {
    font-size: 0.74rem;
  }

  .native-bottom-nav a {
    min-height: 70px;
  }
}

/* ===== Missing UI kit: native transparent shapes ===== */
.native-app-page .native-screen {
  width: min(100%, 480px);
  padding: 8px 8px calc(90px + env(safe-area-inset-bottom));
}

.native-app-topbar {
  gap: 5px;
  padding: 5px 0 7px;
}

.native-player-chip {
  height: 62px;
  padding: 6px 20px 6px 7px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/hud/top_player_hud_empty.png') center/100% 100% no-repeat;
}

.native-avatar {
  width: 50px;
  height: 50px;
  border: 0;
  overflow: visible;
  background: radial-gradient(circle at 50% 34%, #17436f, #05101f 70%);
}

.native-avatar::after {
  inset: -8px;
  background-image: url('../game/missing_ui/hud/avatar_frame_empty_gold_blue.png');
}

.native-player-copy strong {
  max-width: 150px;
  font-size: clamp(0.86rem, 3.5vw, 1.08rem);
}

.native-level-row {
  grid-template-columns: 30px minmax(64px, 1fr);
}

.native-level-row em,
.native-profile-level span {
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/hud/level_shield_empty.png') center/contain no-repeat;
}

.native-level-row i,
.native-profile-level i {
  height: 14px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/hud/xp_bar_frame_empty.png') center/100% 100% no-repeat;
}

.native-level-row b,
.native-profile-level b {
  background: url('../game/missing_ui/hud/xp_bar_fill_blue.png') left center/100% 100% no-repeat;
}

.native-currency {
  min-width: 130px;
  height: 42px;
  padding: 3px 11px 3px 35px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/hud/currency_coin_bar_empty.png') center/100% 100% no-repeat;
}

.native-currency strong {
  text-align: center;
  text-shadow: 0 3px 0 #2a1205;
}

.native-currency i {
  opacity: 1;
  color: transparent;
  background: url('../game/missing_ui/hud/plus_button_round_gold.png') center/contain no-repeat;
  border: 0;
}

.native-menu-coin {
  width: 46px;
  height: 46px;
  border: 0;
  background: url('../game/missing_ui/hud/menu_button_round_red_empty.png') center/contain no-repeat;
}

.native-logo-block {
  margin-top: -2px;
  margin-bottom: -10px;
}

.native-logo-block img {
  width: min(330px, 88%);
}

.native-logo-block.small-logo img {
  width: min(190px, 50vw);
}

.native-title-plaque {
  border: 0;
  background: url('../game/missing_ui/shop/shop_title_plaque_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-title-plaque h1 {
  padding: 7px 0 13px;
  font-size: clamp(2rem, 11vw, 3.25rem);
}

.native-tabs,
.native-filter-row {
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.native-tabs a,
.native-tabs span,
.native-filter-row button {
  min-height: 47px;
  border: 0;
  background: url('../game/missing_ui/salas/tab_segment_inactive_wood_empty.png') center/100% 100% no-repeat;
  text-shadow: 0 3px 0 #2a1205;
}

.native-tabs a.active,
.native-tabs .active,
.native-filter-row button.active {
  background-image: url('../game/missing_ui/salas/tab_segment_active_blue_empty.png');
}

.native-shop-tabs a {
  background-image: url('../game/missing_ui/shop/shop_category_tab_empty_blue.png');
}

.native-shop-tabs a.active {
  background-image: url('../game/missing_ui/shop/shop_category_tab_active_red.png');
}

.native-filter-row button {
  min-height: 42px;
  background-image: url('../game/missing_ui/salas/filter_button_empty.png');
}

.native-room-spotlight {
  overflow: visible;
  min-height: 250px;
  padding: 18px 18px 20px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(14, 8, 4, 0.30), rgba(8, 4, 2, 0.62)),
    url('../game/missing_ui/lobby/hero_room_frame_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-room-spotlight::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  background: url('../game/missing_ui/lobby/hero_room_inner_shadow.png') center/100% 100% no-repeat;
  pointer-events: none;
}

.native-room-spotlight > img,
.native-room-spotlight-copy,
.native-create-room,
.native-party-cta {
  position: relative;
  z-index: 2;
}

.native-room-spotlight > img {
  height: 150px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 22px rgba(0,0,0,0.52);
}

.native-room-spotlight .ribbon,
.native-shop-hero .ribbon {
  display: inline-grid;
  place-items: center;
  min-width: 150px;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  color: #fff7c4;
  background: url('../game/missing_ui/lobby/ribbon_featured_empty_red.png') center/100% 100% no-repeat;
}

.native-room-list-item {
  min-height: 98px;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/salas/room_list_row_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-room-list-item img {
  border: 0;
  border-radius: 9px;
}

.native-daily-strip,
.native-side-promo {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(8, 24, 46, 0.88), rgba(8, 13, 22, 0.72)),
    url('../game/missing_ui/lobby/daily_reward_banner_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.daily-calendar {
  border: 0;
  background: url('../game/missing_ui/lobby/calendar_day_badge_empty.png') center/contain no-repeat;
}

.native-shop-hero {
  overflow: visible;
  min-height: 230px;
  padding: 22px 18px 20px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(7, 5, 3, 0.70), rgba(7, 5, 3, 0.18)),
    url('../game/missing_ui/shop/featured_item_panel_empty.png') center/100% 100% no-repeat,
    url('../game/premium_v2/backgrounds/16x9/pulperia_del_abasto_sin_mesa_16x9.png') center/cover;
  box-shadow: none;
}

.native-shop-card {
  overflow: visible;
  min-height: 318px;
  padding: 20px 16px 16px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(20, 12, 7, 0.78), rgba(6, 4, 3, 0.88)),
    url('../game/missing_ui/shop/product_card_frame_common.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-shop-card.rarity-epic {
  background-image:
    linear-gradient(180deg, rgba(25, 10, 27, 0.76), rgba(7, 4, 8, 0.88)),
    url('../game/missing_ui/shop/product_card_frame_epic.png');
}

.native-shop-card.rarity-legendary {
  background-image:
    linear-gradient(180deg, rgba(35, 23, 5, 0.72), rgba(8, 5, 1, 0.90)),
    url('../game/missing_ui/shop/product_card_frame_legendary.png');
}

.native-shop-card.equipped::after,
.native-inventory-card.equipped::after {
  top: 11px;
  right: 11px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/shop/check_badge_green.png') center/contain no-repeat;
}

.native-shop-preview {
  border: 0;
  background:
    radial-gradient(90px 60px at 50% 58%, rgba(255, 221, 127, 0.20), transparent 70%),
    rgba(3, 8, 15, 0.42);
}

.native-shop-card button,
.native-inventory-card button {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/action_button_gold_empty.png') center/100% 100% no-repeat;
}

.native-shop-card button[name="purchase"] {
  background-image: url('../game/missing_ui/game_table/action_button_blue_empty.png');
}

.native-shop-card button:disabled,
.native-inventory-card button:disabled {
  background-image: url('../game/missing_ui/shop/equipped_ribbon_green_empty.png');
  background-color: transparent;
  opacity: 1;
}

.native-profile-hero {
  overflow: visible;
  min-height: 250px;
  padding: 28px 20px 24px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 26, 0.72), rgba(3, 12, 26, 0.24)),
    url('../game/missing_ui/perfil/profile_header_frame_empty.png') center/100% 100% no-repeat,
    url('../game/premium_v2/backgrounds/16x9/club_social_sin_mesa_16x9.png') center/cover;
  box-shadow: none;
}

.native-profile-avatar {
  border: 0;
  overflow: visible;
}

.native-profile-avatar::after {
  inset: -18px;
  background-image: url('../game/missing_ui/perfil/large_avatar_frame_empty.png');
}

.native-rank-shield {
  min-height: 142px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/perfil/rank_shield_empty.png') center/100% 100% no-repeat;
}

.native-profile-stats {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/perfil/stats_strip_empty.png') center/100% 100% no-repeat;
}

.native-profile-panel,
.native-inventory-section {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(5, 18, 34, 0.74), rgba(3, 7, 14, 0.92)),
    url('../game/missing_ui/modals/modal_panel_large_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-bottom-nav {
  bottom: env(safe-area-inset-bottom);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 480px);
  min-height: 70px;
  overflow: hidden;
  border: 1px solid rgba(252, 211, 77, 0.52);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(180deg, rgba(75, 45, 20, 0.98), rgba(20, 12, 6, 0.99));
}

.native-bottom-nav a {
  grid-template-rows: 28px 17px;
  align-content: center;
  gap: 4px;
  min-height: 66px;
  padding: 4px 2px 5px;
  color: #f9d681;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
}

.native-bottom-nav a.active {
  background:
    radial-gradient(120px 70px at 50% 0%, rgba(66, 184, 255, 0.32), transparent 72%),
    linear-gradient(180deg, rgba(14, 73, 125, 0.95), rgba(4, 31, 64, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(120, 210, 255, 0.40),
    inset 0 0 26px rgba(33, 150, 243, 0.28),
    0 0 18px rgba(58, 181, 255, 0.20);
  animation: selectedBlueGlow 2.4s ease-in-out infinite;
}

.native-bottom-nav strong {
  font-size: clamp(0.70rem, 2.8vw, 0.84rem);
  line-height: 1;
}

.native-bottom-nav a.active::after,
.native-currency::after,
.native-shop-card button::after,
.native-create-room button::after,
.native-room-list-item a::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -55%;
  width: 44%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 196, 0.52), transparent);
  opacity: 0;
  pointer-events: none;
  animation: premiumShine 3.4s ease-in-out infinite;
}

.native-bottom-nav a.active::after {
  animation-delay: 0.25s;
}

.nav-icon.home,
.tile-icon.home { background-image: url('../game/missing_ui/icons/icon_home_gold.png'); }
.nav-icon.cards,
.tile-icon.cards { background-image: url('../game/missing_ui/icons/icon_rooms_gold.png'); }
.nav-icon.shop,
.tile-icon.basket { background-image: url('../game/missing_ui/icons/icon_shop_gold.png'); }
.nav-icon.user { background-image: url('../game/missing_ui/icons/icon_profile_gold.png'); }
.nav-icon.more { background-image: url('../game/missing_ui/icons/icon_more_gold.png'); }
.tile-icon.table { background-image: url('../game/missing_ui/icons/icon_table_gold.png'); }
.tile-icon.trophy { background-image: url('../game/missing_ui/icons/icon_trophy_gold.png'); }
.tile-icon.scroll { background-image: url('../game/missing_ui/icons/icon_missions_scroll_gold.png'); }
.tile-icon.gear { background-image: url('../game/missing_ui/icons/icon_info_gold.png'); }

.nav-icon {
  width: 27px;
  height: 27px;
  filter:
    drop-shadow(0 3px 3px rgba(0,0,0,0.52))
    drop-shadow(0 0 7px rgba(255, 211, 106, 0.28));
}

.native-bottom-nav a.active .nav-icon {
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,0.58))
    drop-shadow(0 0 13px rgba(255, 222, 118, 0.58));
}

.native-currency,
.native-shop-card button,
.native-create-room button,
.native-room-list-item a {
  position: relative;
  overflow: hidden;
}

.native-currency {
  animation: coinBarPulse 2.8s ease-in-out infinite;
}

.native-currency strong::before,
.native-room-spotlight-copy dd::before,
.native-shop-card button[name="purchase"]::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: -2px;
  background: url('../game/premium_v2/hud/coin_icon_reference_2x.png') center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 215, 96, 0.48));
  animation: tinyCoinGlow 2s ease-in-out infinite;
}

.native-shop-card button[name="purchase"]::before {
  width: 17px;
  height: 17px;
}

.native-shop-card.equipped {
  filter:
    drop-shadow(0 0 10px rgba(70, 255, 142, 0.26))
    drop-shadow(0 18px 20px rgba(0,0,0,0.42));
}

.native-shop-card.equipped::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border-radius: 14px;
  background:
    radial-gradient(160px 70px at 70% 0%, rgba(87, 255, 153, 0.18), transparent 72%),
    radial-gradient(120px 80px at 18% 12%, rgba(255, 225, 120, 0.14), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
  animation: equippedAura 2.2s ease-in-out infinite;
}

.native-shop-card > * {
  position: relative;
  z-index: 1;
}

.native-shop-card.equipped::after {
  z-index: 2;
}

.native-shop-card.rarity-epic {
  filter: drop-shadow(0 0 9px rgba(168, 85, 247, 0.18));
}

.native-shop-card.rarity-legendary {
  filter: drop-shadow(0 0 12px rgba(255, 205, 88, 0.24));
}

.native-shop-card.rarity-epic .native-shop-copy span,
.native-shop-card.rarity-legendary .native-shop-copy span {
  text-shadow:
    0 2px 0 #1a0904,
    0 0 9px rgba(255, 225, 125, 0.45);
}

.native-table-stage .score-orb {
  display: grid;
  place-items: center;
  width: 112px;
  min-height: 112px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/score_orb_nosotros_empty_blue.png') center/contain no-repeat;
  box-shadow: none;
}

.native-table-stage .score-orb.red {
  background-image: url('../game/missing_ui/game_table/score_orb_ellos_empty_red.png');
}

.native-table-stage .score-orb span {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-table-stage .turn-clock,
.turn-clock {
  width: 112px;
  min-width: 112px;
  min-height: 112px;
  padding: 26px 10px 12px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/turn_clock_ring_empty.png') center/contain no-repeat;
  box-shadow: none;
}

.native-table-stage .turn-clock.warning,
.native-table-stage .turn-clock.danger,
.turn-clock.warning,
.turn-clock.danger {
  background-image: url('../game/missing_ui/game_table/turn_clock_warning_ring.png');
}

.native-table-stage .seat-label {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/player_name_plate_blue_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-table-stage .rival-seat .seat-label {
  background-image: url('../game/missing_ui/game_table/player_name_plate_red_empty.png');
}

.native-table-stage .action-dock {
  bottom: 6px;
  min-height: 118px;
  padding: 20px 18px 14px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/action_tray_panel_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-table-stage .actions button {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/game_table/action_button_blue_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

.native-table-stage .actions button.warn {
  background-image: url('../game/missing_ui/game_table/action_button_red_empty.png');
}

.native-table-stage .actions button.primary {
  background-image: url('../game/missing_ui/game_table/action_button_gold_empty.png');
}

.native-table-stage .cardc img,
.native-table-stage .mesa-card img {
  box-shadow:
    0 22px 22px rgba(0,0,0,0.54),
    0 0 0 2px rgba(255, 246, 209, 0.32),
    0 0 30px rgba(255, 201, 80, 0.10);
}

.native-table-stage .cardc.playable::after {
  content: "";
  position: absolute;
  inset: -18px -20px;
  z-index: -1;
  background: url('../game/missing_ui/effects/glow_under_card.png') center/contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
}

.call-burst::before {
  content: "";
  position: absolute;
  inset: 20% 10%;
  background: url('../game/missing_ui/effects/red_call_burst.png') center/contain no-repeat;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.call-burst.show::before {
  opacity: 0.76;
  transform: scale(1);
}

.call-burst-art {
  width: min(390px, 90vw);
  filter: drop-shadow(0 26px 18px rgba(0,0,0,0.72));
}

.native-ripple {
  width: 74px;
  height: 74px;
  border-radius: 0;
  background: url('../game/missing_ui/effects/click_ring_spritesheet.png') 0 0/400% 100% no-repeat;
  animation: nativeSpriteRipple 0.44s steps(4) forwards;
}

.native-toast {
  border: 0;
  border-radius: 0;
  background: url('../game/missing_ui/modals/toast_panel_empty.png') center/100% 100% no-repeat;
  box-shadow: none;
}

@keyframes nativeSpriteRipple {
  from {
    opacity: 1;
    background-position: 0 0;
    transform: translate(-50%, -50%) scale(0.54);
  }
  to {
    opacity: 0;
    background-position: 100% 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
}

@keyframes cardDenied {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-7px) rotate(-2deg); }
  50% { transform: translateX(7px) rotate(2deg); }
  75% { transform: translateX(-4px) rotate(-1deg); }
}

/* Ajuste visual compacto: conserva el look premium pero evita textos gigantes en mobile. */
.native-screen,
.native-table-stage,
.ty-screen {
  font-size: 14px;
}

.native-featured-copy h1,
.native-room-spotlight h1,
.native-shop-copy h2,
.native-profile-main h1 {
  font-size: clamp(1.42rem, 5.4vw, 2.05rem);
  line-height: 0.98;
}

.native-shop-copy h3,
.native-room-list-copy h3,
.native-profile-panel h2,
.native-inventory-card h3 {
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
  line-height: 1.06;
}

.native-featured-copy p,
.native-shop-copy p,
.native-room-list-copy p,
.native-profile-panel li span,
.native-profile-stats span,
.native-table-stage .action-caption {
  font-size: clamp(0.70rem, 2.9vw, 0.82rem);
  line-height: 1.18;
}

.native-table-stage .score-orb {
  width: 94px;
  min-height: 94px;
}

.native-table-stage .score-orb strong {
  font-size: 1.78rem;
}

.native-table-stage .score-orb span,
.native-table-stage .score-orb small {
  font-size: 0.55rem;
}

.turn-clock {
  top: 196px;
  min-width: 106px;
  padding: 7px 10px;
}

.turn-clock strong {
  font-size: 1.22rem;
}

.turn-clock span,
.turn-clock small {
  font-size: 0.55rem;
}

.native-table-stage .actions button {
  min-height: 36px;
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  padding: 6px 10px;
}

@media (max-width: 430px) {
  .native-table-stage .score-orbs {
    grid-template-columns: 98px 1fr 98px;
    padding-top: 112px;
  }

  .native-game-logo {
    top: 34px;
    width: min(132px, 35vw);
  }

  .native-table-stage .table-perspective {
    padding-top: 152px;
    padding-bottom: 116px;
  }
}

@media (max-width: 430px) {
  .native-player-chip {
    height: 58px;
    padding-right: 14px;
  }

  .native-currency {
    min-width: 106px;
    padding-left: 30px;
  }

  .native-currency strong {
    font-size: 0.86rem;
  }

  .native-room-spotlight {
    grid-template-columns: 40% minmax(0, 1fr);
    padding: 16px 15px 18px;
  }

  .native-shop-grid {
    gap: 8px;
  }

  .native-shop-card {
    padding: 18px 13px 14px;
  }
}

@media (max-width: 370px) {
  .native-app-page .native-screen {
    padding-left: 6px;
    padding-right: 6px;
  }

  .native-shop-grid {
    grid-template-columns: 1fr;
  }

  .native-room-spotlight {
    grid-template-columns: 1fr;
  }

  .native-room-spotlight > img {
    height: 138px;
  }

  .native-bottom-nav a {
    min-height: 62px;
  }
}

@keyframes premiumShine {
  0%, 48% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  56% { opacity: 0.65; }
  74% { opacity: 0; transform: translateX(360%) skewX(-18deg); }
  100% { opacity: 0; transform: translateX(360%) skewX(-18deg); }
}

@keyframes selectedBlueGlow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.18) saturate(1.18); }
}

@keyframes coinBarPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 211, 106, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 211, 106, 0.30)); }
}

@keyframes tinyCoinGlow {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(255, 215, 96, 0.34)); }
  50% { transform: scale(1.08) rotate(-5deg); filter: drop-shadow(0 0 9px rgba(255, 232, 122, 0.68)); }
}

@keyframes equippedAura {
  0%, 100% { opacity: 0.60; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1); }
}

.native-screen,
.native-table-stage,
.ty-screen {
  --native-parallax-x: 0px;
  --native-parallax-y: 0px;
  --native-tilt-x: 0deg;
  --native-tilt-y: 0deg;
}

.table-3d-stage,
.native-table-stage {
  background-position:
    calc(50% + var(--native-parallax-x, 0px))
    calc(100% + var(--native-parallax-y, 0px));
}

.native-table-stage {
  background-position:
    calc(50% + var(--native-parallax-x, 0px))
    calc(0% + var(--native-parallax-y, 0px));
}

.native-table-stage .ambient-glow {
  transform:
    translate(
      calc(-50% + var(--native-parallax-x, 0px)),
      calc(-50% + var(--native-parallax-y, 0px))
    );
}

.native-table-stage .virtual-table {
  transform:
    rotateX(57deg)
    translateY(8%)
    rotateZ(var(--native-tilt-x, 0deg));
}

/* Mesa jugable: las capas decorativas nunca deben comerse el tap de las cartas. */
.native-table-stage .center-play-zone,
.native-table-stage .status-banner,
.native-table-stage .call-stack,
.native-table-stage .mesa-cards {
  pointer-events: none;
}

.native-table-stage .your-seat,
.native-table-stage .cards-player .cardc {
  position: relative;
  z-index: 26;
  pointer-events: auto;
}

.native-table-stage .cards-player {
  position: relative;
  z-index: 26;
  pointer-events: none;
}

.native-table-stage .cards-player .cardc,
.native-table-stage .cards-player .cardc img {
  pointer-events: auto;
}

.native-table-stage .cards-player .cardc.playable {
  cursor: pointer;
  touch-action: manipulation;
}

.app-loader-percent {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #1c0d04;
  background: linear-gradient(180deg, #fff2b4, #d99520);
  box-shadow: 0 10px 22px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.44);
  font-weight: 950;
}

.native-install-prompt {
  position: fixed;
  z-index: 90;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(94px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 14px 8px 9px;
  color: #fff3c4;
  background:
    linear-gradient(180deg, rgba(14, 80, 41, 0.96), rgba(4, 39, 24, 0.98)),
    #064b2d;
  border: 1px solid rgba(255, 218, 116, 0.92);
  border-radius: 999px;
  box-shadow:
    0 16px 34px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 22px rgba(247, 202, 72, 0.26);
  font-family: Georgia, serif;
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,0.58);
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.native-install-prompt[hidden] {
  display: none;
}

.native-install-prompt.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.native-install-prompt:hover,
.native-install-prompt:focus-visible {
  filter: brightness(1.14);
}

.native-install-prompt img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.38);
}

.table-share-toggle img,
.table-chat-toggle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.55));
}

.native-icon-btn.table-share-toggle {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #0d6a43, #073520);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 18px rgba(53, 255, 149, 0.16);
}

@media (max-width: 430px) {
  .native-top-icons {
    top: 8px;
    right: 8px;
    max-width: 112px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }

  .native-top-icons .native-icon-btn {
    width: 34px;
    height: 34px;
    border-width: 1px;
  }

  .native-top-icons .table-share-toggle img,
  .native-top-icons .table-chat-toggle img {
    width: 20px;
    height: 20px;
  }
}

.table-chat-drawer {
  position: absolute;
  z-index: 62;
  top: 66px;
  right: 10px;
  width: min(360px, calc(100% - 20px));
  max-height: min(520px, 62svh);
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  gap: 10px;
  padding: 14px;
  color: #fff1bd;
  background:
    linear-gradient(180deg, rgba(2, 6, 14, 0.70), rgba(2, 6, 14, 0.92)),
    url('../game/missing_ui/modals/modal_panel_large_empty.png') center/100% 100% no-repeat;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,0.56));
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.table-chat-drawer.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.table-chat-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.table-chat-drawer header strong {
  color: #ffe6a2;
  font-family: Georgia, serif;
  font-size: 1.08rem;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #2a1205;
}

.table-chat-drawer .native-icon-btn {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.table-chat-drawer .chat-messages {
  min-height: 120px;
  max-height: 330px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.34);
}

.table-chat-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.table-chat-form .input {
  min-width: 0;
}

.hand-celebration {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}

.hand-celebration.show {
  opacity: 1;
}

.hand-celebration-card {
  display: grid;
  gap: 2px;
  min-width: min(280px, 80vw);
  padding: 18px 24px;
  text-align: center;
  color: #fff0b3;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 229, 124, 0.30), transparent 55%),
    linear-gradient(180deg, rgba(98, 17, 14, 0.96), rgba(32, 5, 7, 0.97));
  border: 2px solid rgba(252, 211, 77, 0.90);
  border-radius: 22px;
  box-shadow: 0 0 38px rgba(255, 202, 80, 0.36), 0 26px 70px rgba(0,0,0,0.64);
  animation: celebrationCard 1.55s cubic-bezier(.18,.9,.2,1) both;
}

.hand-celebration-card strong {
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 7vw, 2.5rem);
  text-transform: uppercase;
  text-shadow: 0 3px 0 #3b1604;
}

.hand-celebration-card span {
  color: #9ff3c2;
  font-size: 1.35rem;
  font-weight: 950;
}

.hand-celebration i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-style: normal;
  font-size: clamp(1.6rem, 8vw, 3rem);
  text-shadow: 0 8px 14px rgba(0,0,0,0.46);
  animation: celebrationEmoji 1.45s ease-out both;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes celebrationCard {
  0% { opacity: 0; transform: translateY(22px) scale(0.74); }
  22% { opacity: 1; transform: translateY(-6px) scale(1.06); }
  70% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.92); }
}

@keyframes celebrationEmoji {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  16% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + (var(--i) - 2) * 54px),
        calc(-50% - 150px - var(--i) * 8px)
      )
      rotate(calc((var(--i) - 2) * 20deg))
      scale(1.15);
  }
}

/* ===== Mesa production polish: fixes mobile card clipping and final visual spacing. ===== */
.native-table-stage {
  --table-safe-bottom: max(112px, calc(96px + env(safe-area-inset-bottom)));
}

.native-table-stage .native-top-icons {
  top: max(10px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  gap: 6px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(2, 7, 15, 0.22);
  backdrop-filter: blur(5px);
}

.native-table-stage .native-icon-btn {
  width: 39px;
  height: 39px;
  border-width: 2px;
  box-shadow:
    0 9px 18px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -4px 10px rgba(0,0,0,0.24);
}

.native-table-stage .native-game-logo {
  top: max(38px, calc(env(safe-area-inset-top) + 30px));
  width: min(136px, 34vw);
}

.native-table-stage .score-orbs {
  padding-top: 106px;
  grid-template-columns: minmax(88px, 96px) 1fr minmax(88px, 96px);
  align-items: start;
}

.native-table-stage .score-orb {
  width: 92px;
  min-height: 92px;
}

.native-table-stage .stage-chip {
  align-self: start;
  max-width: 138px;
  min-height: 38px;
  padding: 8px 14px;
  transform: translateY(48px);
  font-size: 0.72rem;
  white-space: nowrap;
}

.native-table-stage .turn-clock {
  top: 178px;
  width: 104px;
  min-width: 104px;
  min-height: 104px;
  padding: 25px 9px 9px;
  z-index: 30;
}

.native-table-stage .table-perspective {
  padding: 188px 0 var(--table-safe-bottom);
  place-items: end center;
  overflow: visible;
}

.native-table-stage .virtual-table {
  width: min(94vw, 420px);
  height: clamp(332px, 43svh, 450px);
  min-height: 332px;
  transform:
    rotateX(54deg)
    translateY(3%)
    rotateZ(var(--native-tilt-x, 0deg));
  overflow: visible;
  border-width: 7px;
}

.native-table-stage .player-seat {
  width: min(390px, 94%);
  gap: 4px;
  overflow: visible;
  transform: translateX(-50%) translateZ(126px) rotateX(-54deg);
}

.native-table-stage .rival-seat {
  top: -36px;
  z-index: 12;
}

.native-table-stage .your-seat {
  bottom: 8px;
  z-index: 36;
  transform: translateX(-50%) translateZ(210px) rotateX(-54deg);
}

.native-table-stage .cards {
  min-height: 0;
  overflow: visible;
}

.native-table-stage .cards-player {
  width: min(390px, 96vw);
  min-height: 184px;
  align-items: flex-start;
  padding: 4px 10px 20px;
  background: url('../game/missing_ui/game_table/card_holder_own_empty.png') center 8px/100% 82% no-repeat;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,0.48));
}

.native-table-stage .cards-rival {
  min-height: 126px;
  padding: 2px 18px 8px;
  background: url('../game/missing_ui/game_table/card_holder_rival_empty.png') center/92% 88% no-repeat;
}

.native-table-stage .cardc,
.native-table-stage .mesa-card {
  width: clamp(76px, 22.2vw, 102px);
  height: calc(clamp(76px, 22.2vw, 102px) * 1.52);
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 12px;
}

.native-table-stage .cardc img,
.native-table-stage .mesa-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
}

.native-table-stage .cards-player .cardc:nth-child(1) { transform: rotate(-8deg) translateY(14px) translateZ(34px); }
.native-table-stage .cards-player .cardc:nth-child(2) { transform: translateY(-6px) translateZ(42px); }
.native-table-stage .cards-player .cardc:nth-child(3) { transform: rotate(8deg) translateY(14px) translateZ(34px); }
.native-table-stage .cards-rival .cardc:nth-child(1) { transform: rotate(7deg) translateY(0) scale(0.78); }
.native-table-stage .cards-rival .cardc:nth-child(2) { transform: translateY(6px) scale(0.78); }
.native-table-stage .cards-rival .cardc:nth-child(3) { transform: rotate(-7deg) translateY(0) scale(0.78); }

.native-table-stage .cardc.playable:hover,
.native-table-stage .cardc.playable:focus-visible {
  transform: translateY(-22px) scale(1.04) rotate(0deg) translateZ(72px) !important;
}

.native-table-stage .center-play-zone {
  inset: 25% 4% 36%;
  z-index: 10;
}

.native-table-stage .status-banner {
  width: min(350px, 90vw);
  padding: 9px 14px;
  font-size: 0.76rem;
}

.native-table-stage .mesa-cards {
  min-height: 112px;
}

.native-table-stage .mesa-card {
  width: clamp(62px, 17vw, 86px);
  height: calc(clamp(62px, 17vw, 86px) * 1.52);
}

.native-table-stage .action-dock {
  bottom: max(6px, env(safe-area-inset-bottom));
  width: min(386px, calc(100% - 28px));
  min-height: 104px;
  padding: 18px 16px 12px;
  z-index: 32;
  filter: drop-shadow(0 -18px 22px rgba(0,0,0,0.42));
}

.native-table-stage .actions {
  gap: 7px;
}

.native-table-stage .actions button {
  min-width: 92px;
  min-height: 35px;
  padding: 5px 10px;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,0.62);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.native-table-stage .actions button:active {
  transform: translateY(2px) scale(0.98);
}

.native-table-stage .action-caption {
  margin-bottom: 2px;
  color: #f7ead0;
  text-shadow: 0 2px 0 rgba(0,0,0,0.68);
}

body.game3d-page .native-install-prompt {
  display: none;
}

.native-tabs a,
.native-filter-row button,
.native-create-room button,
.native-room-list-item a,
.native-shop-card button,
.native-profile-panel a,
.native-inventory-card button,
.ty-btn {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
}

.native-tabs a,
.native-filter-row button {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}

.native-create-room button,
.native-room-list-item a,
.native-shop-card button,
.native-profile-panel a,
.native-inventory-card button {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.native-create-room button:active,
.native-room-list-item a:active,
.native-shop-card button:active,
.native-profile-panel a:active,
.native-inventory-card button:active {
  transform: translateY(2px) scale(0.985);
}

.native-room-list-item,
.native-shop-card,
.native-profile-panel,
.native-inventory-card {
  backface-visibility: hidden;
}

.native-empty-panel,
.native-side-promo,
.native-party-panel {
  border-color: rgba(252, 211, 77, 0.42);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.native-bottom-nav {
  box-shadow:
    0 -18px 38px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

.native-bottom-nav a,
.native-tabs a {
  overflow: hidden;
}

.native-bottom-nav a:focus-visible,
.native-tabs a:focus-visible,
.native-filter-row button:focus-visible,
.native-create-room button:focus-visible,
.native-room-list-item a:focus-visible,
.native-shop-card button:focus-visible,
.ty-btn:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.92);
  outline-offset: -2px;
}

@media (max-width: 430px) {
  .native-tabs a,
  .native-filter-row button {
    min-height: 38px;
    font-size: 0.76rem;
  }

  .native-create-room button,
  .native-room-list-item a,
  .native-shop-card button,
  .native-profile-panel a,
  .native-inventory-card button,
  .ty-btn {
    min-height: 40px;
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .native-table-stage .native-game-logo {
    width: min(118px, 32vw);
  }

  .native-table-stage .score-orbs {
    grid-template-columns: 84px 1fr 84px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .native-table-stage .score-orb {
    width: 82px;
    min-height: 82px;
  }

  .native-table-stage .stage-chip {
    max-width: 112px;
    padding: 7px 10px;
    font-size: 0.64rem;
  }

  .native-table-stage .turn-clock {
    top: 170px;
    transform: translateX(-50%) scale(0.9);
  }

  .native-table-stage .table-perspective {
    padding-top: 178px;
  }

  .native-table-stage .cardc {
    width: clamp(68px, 21vw, 86px);
    height: calc(clamp(68px, 21vw, 86px) * 1.52);
  }

  .native-table-stage .actions button {
    min-width: 78px;
    font-size: 0.66rem;
  }
}

/* ===== Production visual close: native game spacing, hierarchy and tap states. ===== */
body.native-app-page,
body.ty-auth {
  overflow-x: hidden;
  letter-spacing: 0;
}

body.native-app-page {
  background:
    linear-gradient(180deg, rgba(0, 5, 14, 0.08), rgba(0, 0, 0, 0.70)),
    url('../game/premium_v2/backgrounds/9x16/pulperia_del_abasto_mesa_vacia_9x16.png') center top/cover fixed;
}

body.native-app-page::before {
  z-index: 0;
  background:
    radial-gradient(520px 360px at 50% 8%, rgba(18, 76, 132, 0.28), transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,0.74), transparent 18%, transparent 82%, rgba(0,0,0,0.74)),
    linear-gradient(180deg, rgba(4, 12, 24, 0.22), rgba(7, 3, 2, 0.78));
}

.native-app-page .native-screen {
  z-index: 1;
  width: min(100%, 480px);
  padding: max(6px, env(safe-area-inset-top)) 8px calc(92px + env(safe-area-inset-bottom));
}

.native-app-page .native-screen > section,
.native-app-page .native-screen > nav,
.native-app-page .native-screen > .flash {
  margin-left: auto;
  margin-right: auto;
}

.native-app-topbar {
  top: max(0px, env(safe-area-inset-top));
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 56px;
  padding: 4px 0 6px;
  backdrop-filter: blur(8px);
}

.native-player-chip {
  max-width: min(252px, 58vw);
  height: 56px;
  padding: 5px 13px 5px 6px;
}

.native-avatar {
  width: 46px;
  height: 46px;
}

.native-player-copy {
  gap: 3px;
}

.native-player-copy strong {
  max-width: 132px;
  font-size: clamp(0.78rem, 3vw, 0.94rem);
}

.native-level-row {
  grid-template-columns: 28px minmax(46px, 1fr);
  gap: 3px;
}

.native-level-row em {
  width: 27px;
  height: 24px;
  font-size: 0.74rem;
}

.native-level-row i {
  height: 12px;
}

.native-currency-row {
  gap: 3px;
}

.native-currency {
  min-width: clamp(92px, 28vw, 124px);
  height: 38px;
  padding: 2px 8px 2px 31px;
}

.native-currency strong {
  overflow: hidden;
  font-size: clamp(0.72rem, 3vw, 0.88rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-currency i {
  width: 21px;
  height: 21px;
}

.native-menu-coin {
  width: 40px;
  height: 40px;
}

.native-logo-block {
  margin-top: -8px;
  margin-bottom: -14px;
}

.native-logo-block img {
  width: min(300px, 78vw);
}

.native-logo-block.home-logo img {
  width: min(330px, 86vw);
}

.native-logo-block.small-logo img {
  width: min(166px, 42vw);
}

.native-featured-card,
.native-room-spotlight,
.native-shop-hero,
.native-profile-hero,
.native-daily-strip,
.native-side-promo,
.native-party-panel,
.native-inventory-section,
.native-profile-panel {
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.42));
}

.native-featured-card {
  min-height: clamp(250px, 44svh, 338px);
  padding: 18px 18px 16px;
  align-items: end;
  border-radius: 18px;
  isolation: isolate;
}

.native-featured-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  border: 1px solid rgba(255, 219, 112, 0.38);
  border-radius: 14px;
  pointer-events: none;
}

.native-featured-card > img {
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.02);
}

.native-featured-copy h1,
.native-room-spotlight h1,
.native-shop-hero h2,
.native-profile-main h1,
.native-section-title h2,
.native-side-promo h2 {
  font-size: clamp(1.28rem, 5.2vw, 1.9rem);
  line-height: 0.98;
}

.native-title-plaque h1 {
  min-width: min(300px, 82vw);
  font-size: clamp(1.85rem, 9.5vw, 2.8rem);
}

.native-featured-copy p,
.native-room-spotlight-copy p,
.native-shop-copy p,
.native-profile-hero p,
.native-party-panel p,
.native-daily-strip p,
.native-side-promo p {
  font-size: clamp(0.72rem, 3vw, 0.86rem);
}

.native-featured-cards {
  right: 16px;
  top: 72px;
  width: min(150px, 38vw);
}

.native-featured-cards img {
  width: clamp(44px, 12vw, 58px);
  height: auto;
  object-fit: contain;
}

.native-play-button {
  width: min(218px, 58%);
  min-height: 54px;
  margin-top: 10px;
  font-size: clamp(0.95rem, 4vw, 1.24rem);
  justify-self: end;
}

.native-room-row {
  gap: 7px;
}

.native-mini-room {
  min-height: 162px;
  padding: 6px 5px;
}

.native-mini-room img {
  height: 66px;
}

.native-mini-room span {
  min-height: 28px;
  font-size: clamp(0.62rem, 2.45vw, 0.74rem);
}

.native-mini-room small {
  font-size: 0.67rem;
}

.native-mini-room a {
  min-height: 27px;
  font-size: 0.68rem;
}

.native-action-grid {
  gap: 8px;
}

.native-action-tile {
  min-height: 92px;
  padding: 8px 5px;
  background-position: center;
  background-size: 100% 100%;
}

.native-action-tile strong {
  font-size: clamp(0.70rem, 3vw, 0.88rem);
}

.tile-icon {
  width: 30px;
  height: 30px;
}

.native-tabs,
.native-filter-row {
  margin: 8px 0;
}

.native-tabs a,
.native-filter-row button {
  min-height: 42px;
  font-size: clamp(0.68rem, 2.75vw, 0.82rem);
}

.native-tabs a.active,
.native-filter-row button.active {
  filter: drop-shadow(0 0 9px rgba(70, 180, 255, 0.26));
}

.native-room-spotlight {
  grid-template-columns: minmax(112px, 39%) minmax(0, 1fr);
  gap: 10px;
  min-height: 226px;
  padding: 16px 14px 18px;
}

.native-room-spotlight > img {
  height: 136px;
  object-fit: cover;
}

.native-room-spotlight .ribbon,
.native-shop-hero .ribbon,
.ribbon {
  min-width: 0;
  min-height: 32px;
  padding: 0 13px;
  font-size: clamp(0.66rem, 2.8vw, 0.82rem);
  white-space: nowrap;
}

.native-room-spotlight-copy dl {
  gap: 5px;
  margin-top: 7px;
}

.native-room-spotlight-copy dt,
.native-room-spotlight-copy dd {
  font-size: 0.76rem;
}

.native-create-room {
  grid-template-columns: auto minmax(0, 1fr) minmax(112px, 38%);
  gap: 6px;
}

.native-create-room label {
  font-size: 0.76rem;
}

.native-create-room input,
.native-profile-edit input {
  height: 38px;
  font-size: 0.86rem;
}

.native-create-room button {
  min-height: 43px;
  font-size: clamp(0.70rem, 2.9vw, 0.88rem);
}

.native-room-list {
  gap: 6px;
}

.native-room-list-item {
  grid-template-columns: 74px minmax(0, 1fr) 78px;
  gap: 8px;
  min-height: 82px;
  padding: 10px 12px;
}

.native-room-list-item img {
  width: 74px;
  height: 54px;
}

.native-room-list-item h2 {
  font-size: clamp(0.82rem, 3.3vw, 0.98rem);
}

.native-room-list-item p,
.native-room-list-item span {
  font-size: 0.72rem;
}

.native-room-list-item a {
  min-height: 36px;
  font-size: 0.72rem;
}

.native-shop-hero {
  grid-template-columns: minmax(0, 1fr) minmax(130px, 38%);
  min-height: 206px;
  padding: 18px 14px 16px;
}

.native-shop-preview {
  min-height: 116px;
}

.native-shop-grid,
.native-inventory-grid {
  gap: 8px;
}

.native-shop-card {
  grid-template-rows: 116px auto auto;
  min-height: 292px;
  padding: 17px 12px 14px;
}

.native-shop-preview.room img {
  min-height: 112px;
}

.native-shop-preview.deck img {
  width: clamp(50px, 14vw, 64px);
  object-fit: contain;
}

.native-shop-preview.deck img:nth-child(1) { left: 10px; }
.native-shop-preview.deck img:nth-child(2) { left: 36px; }
.native-shop-preview.deck img:nth-child(3) { left: 64px; }
.native-shop-preview.deck img:nth-child(4) { left: 90px; }

.native-shop-preview.hero-deck img {
  width: clamp(62px, 18vw, 84px);
}

.native-shop-copy h3,
.native-profile-panel h2,
.native-profile-panel h3,
.native-inventory-card h3 {
  font-size: clamp(0.84rem, 3.2vw, 1.02rem);
}

.native-shop-copy span {
  font-size: 0.64rem;
}

.native-shop-copy p {
  min-height: 42px;
  font-size: clamp(0.68rem, 2.8vw, 0.80rem);
}

.native-shop-card button,
.native-inventory-card button,
.native-profile-panel a {
  min-height: 40px;
  font-size: clamp(0.70rem, 2.8vw, 0.82rem);
}

.native-profile-hero {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  min-height: 218px;
  padding: 24px 16px 18px;
}

.native-profile-avatar {
  width: 96px;
  height: 96px;
}

.native-profile-level {
  grid-template-columns: 34px minmax(0, 1fr);
}

.native-profile-edit {
  grid-template-columns: minmax(0, 1fr) 66px;
}

.native-profile-edit button {
  min-height: 38px;
  font-size: 0.72rem;
}

.native-rank-shield {
  min-width: 138px;
  min-height: 112px;
  padding: 18px 12px 12px;
}

.native-profile-stats article {
  min-height: 70px;
  padding: 7px 2px;
}

.native-profile-stats span {
  font-size: clamp(0.58rem, 2.4vw, 0.70rem);
}

.native-profile-stats strong {
  font-size: clamp(0.95rem, 4vw, 1.18rem);
}

.native-profile-panels {
  gap: 8px;
}

.native-profile-panel {
  min-height: 214px;
  padding: 10px 9px;
}

.native-profile-panel img {
  height: 82px;
}

.native-inventory-section {
  padding: 8px 7px;
}

.native-inventory-card {
  min-height: 194px;
  padding: 8px 7px;
}

.native-profile-item-preview {
  height: 84px;
}

.native-daily-strip {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 88px;
  padding: 9px 10px;
}

.daily-calendar {
  height: 52px;
}

.daily-calendar strong {
  font-size: 1.45rem;
}

.native-daily-strip h2 {
  font-size: clamp(0.92rem, 3.5vw, 1.12rem);
}

.daily-rewards {
  display: none;
}

.native-daily-strip a,
.native-side-promo a {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.74rem;
}

.native-bottom-nav {
  width: min(100%, 480px);
  min-height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, rgba(28, 17, 9, 0.28), rgba(6, 4, 2, 0.72)),
    url('../game/premium_v2/nav/bottom_nav_5_slots_generated_2x.png') center/100% 100% no-repeat;
}

.native-bottom-nav a {
  min-height: 70px;
  padding: 5px 1px 6px;
}

.native-bottom-nav strong {
  font-size: clamp(0.62rem, 2.6vw, 0.78rem);
}

.nav-icon {
  width: 26px;
  height: 26px;
}

.native-clickable:not(:disabled):hover {
  filter: brightness(1.08) saturate(1.08);
}

.native-clickable.native-pressed {
  transform: translateY(1px) scale(0.985);
}

.native-table-stage {
  --table-safe-bottom: max(122px, calc(106px + env(safe-area-inset-bottom)));
}

.native-table-stage .native-top-icons {
  top: max(5px, env(safe-area-inset-top));
  right: max(5px, env(safe-area-inset-right));
  gap: 4px;
}

.native-table-stage .native-icon-btn {
  width: 36px;
  height: 36px;
}

.native-table-stage .native-game-logo {
  top: max(30px, calc(env(safe-area-inset-top) + 24px));
  width: min(124px, 31vw);
}

.native-table-stage .score-orbs {
  grid-template-columns: 88px minmax(82px, 1fr) 88px;
  padding: 100px 7px 0;
}

.native-table-stage .score-orb {
  width: 86px;
  min-height: 86px;
}

.native-table-stage .score-orb span {
  max-width: 66px;
  font-size: 0.48rem;
}

.native-table-stage .score-orb strong {
  font-size: 1.62rem;
}

.native-table-stage .score-orb small {
  font-size: 0.50rem;
}

.native-table-stage .stage-chip {
  max-width: 126px;
  min-height: 35px;
  padding: 7px 11px;
  transform: translateY(48px);
  font-size: 0.64rem;
}

.native-table-stage .turn-clock {
  top: 162px;
  width: 94px;
  min-width: 94px;
  min-height: 94px;
  padding: 23px 8px 8px;
}

.native-table-stage .turn-clock span,
.native-table-stage .turn-clock small {
  font-size: 0.48rem;
}

.native-table-stage .turn-clock strong {
  font-size: 1.18rem;
}

.native-table-stage .table-perspective {
  padding: 172px 0 var(--table-safe-bottom);
}

.native-table-stage .virtual-table {
  width: min(94vw, 414px);
  height: clamp(334px, 44svh, 446px);
  transform: rotateX(54deg) translateY(1%) rotateZ(var(--native-tilt-x, 0deg));
}

.native-table-stage .center-play-zone {
  inset: 22% 5% 42%;
}

.native-table-stage .rival-seat {
  top: -28px;
}

.native-table-stage .your-seat {
  bottom: 22px;
  z-index: 44;
}

.native-table-stage .seat-label {
  min-height: 46px;
  padding: 8px 18px;
}

.native-table-stage .seat-label strong {
  font-size: clamp(0.76rem, 3vw, 0.92rem);
}

.native-table-stage .seat-label span {
  min-height: 26px;
  font-size: 0.70rem;
}

.native-table-stage .cards-player {
  width: min(382px, 94vw);
  min-height: 202px;
  padding: 2px 12px 18px;
  transform: translateY(-10px);
  background-size: 100% 82%;
}

.native-table-stage .cards-rival {
  min-height: 116px;
}

.native-table-stage .cardc {
  width: clamp(70px, 20.8vw, 96px);
  height: calc(clamp(70px, 20.8vw, 96px) * 1.52);
}

.native-table-stage .cardc img,
.native-table-stage .mesa-card img {
  object-fit: contain;
  object-position: center;
}

.native-table-stage .cards-player .cardc:nth-child(1) { transform: rotate(-8deg) translateY(18px) translateZ(36px); }
.native-table-stage .cards-player .cardc:nth-child(2) { transform: translateY(-2px) translateZ(48px); }
.native-table-stage .cards-player .cardc:nth-child(3) { transform: rotate(8deg) translateY(18px) translateZ(36px); }

.native-table-stage .cardc.playable {
  cursor: pointer;
}

.native-table-stage .cardc.playable:active {
  transform: translateY(-30px) scale(1.05) translateZ(90px) !important;
}

.native-table-stage .status-banner {
  width: min(342px, 88vw);
  padding: 8px 12px;
  font-size: 0.72rem;
}

.native-table-stage .action-dock {
  bottom: max(4px, env(safe-area-inset-bottom));
  width: min(382px, calc(100% - 24px));
  min-height: 108px;
  padding: 17px 16px 12px;
}

.native-table-stage .action-caption {
  margin-bottom: 2px;
  font-size: clamp(0.72rem, 3vw, 0.84rem);
}

.native-table-stage .actions {
  gap: 6px;
}

.native-table-stage .actions button {
  min-width: 82px;
  min-height: 34px;
  padding: 4px 8px;
  font-size: clamp(0.62rem, 2.7vw, 0.72rem);
}

.app-loader {
  transform: translateZ(0);
}

.app-loader-card {
  width: min(90vw, 470px);
  gap: 10px;
  padding: 22px 20px;
}

.app-loader-logo {
  width: min(330px, 78vw);
}

.app-loader-card h2 {
  font-size: clamp(1.35rem, 7vw, 2.45rem);
}

.app-loader-card p {
  font-size: clamp(0.70rem, 3vw, 0.88rem);
}

@media (max-width: 430px) {
  .native-app-page .native-screen {
    padding-left: 7px;
    padding-right: 7px;
  }

  .native-room-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .native-mini-room {
    min-height: 142px;
  }

  .native-mini-room img {
    height: 62px;
  }

  .native-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .native-room-spotlight {
    grid-template-columns: 1fr;
  }

  .native-room-spotlight > img {
    height: 142px;
  }

  .native-create-room {
    grid-template-columns: 1fr;
  }

  .native-shop-grid,
  .native-inventory-grid,
  .native-profile-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .native-shop-hero {
    grid-template-columns: 1fr;
  }

  .native-shop-hero .hero-deck {
    min-height: 132px;
  }

  .native-profile-hero {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .native-profile-avatar {
    width: 86px;
    height: 86px;
  }
}

@media (max-width: 370px) {
  .native-player-chip {
    max-width: 55vw;
  }

  .native-player-copy strong {
    max-width: 96px;
  }

  .native-currency {
    min-width: 86px;
    padding-left: 26px;
  }

  .native-menu-coin {
    width: 36px;
    height: 36px;
  }

  .native-shop-grid,
  .native-inventory-grid,
  .native-profile-panels {
    grid-template-columns: 1fr;
  }

  .native-table-stage .score-orbs {
    grid-template-columns: 80px minmax(68px, 1fr) 80px;
  }

  .native-table-stage .score-orb {
    width: 78px;
    min-height: 78px;
  }

  .native-table-stage .turn-clock {
    top: 154px;
    transform: translateX(-50%) scale(0.88);
  }

  .native-table-stage .table-perspective {
    padding-top: 162px;
  }

  .native-table-stage .action-dock {
    width: calc(100% - 18px);
  }
}

/* ===== Final production fit: no clipped shop CTAs, no horizontal bleed, install prompt above nav. ===== */
html,
body.native-app-page {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.native-app-page .native-screen {
  max-width: 480px;
  overflow-x: clip;
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.native-shop-page .native-screen {
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.native-shop-page .native-title-plaque,
.native-shop-page .native-tabs,
.native-shop-page .native-shop-hero,
.native-shop-page .native-shop-section,
.native-shop-page .native-daily-strip {
  width: 100%;
  max-width: calc(100vw - 14px);
}

.native-shop-page .native-shop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.native-shop-page .native-shop-card {
  grid-template-rows: 112px minmax(104px, 1fr) 48px;
  gap: 8px;
  min-width: 0;
  min-height: 342px;
  padding: 17px 12px 18px;
  overflow: hidden;
  contain: layout paint;
}

.native-shop-page .native-shop-preview {
  min-height: 108px;
  overflow: hidden;
}

.native-shop-page .native-shop-preview.deck {
  overflow: visible;
}

.native-shop-page .native-shop-preview.room img {
  min-height: 108px;
}

.native-shop-page .native-shop-preview.back img {
  width: min(74px, 45%);
  height: auto;
  max-height: 104px;
}

.native-shop-page .native-shop-preview.deck img {
  width: clamp(43px, 11.8vw, 58px);
  top: 12px;
}

.native-shop-page .native-shop-preview.deck img:nth-child(1) { left: clamp(4px, 2vw, 10px); }
.native-shop-page .native-shop-preview.deck img:nth-child(2) { left: clamp(26px, 8vw, 34px); }
.native-shop-page .native-shop-preview.deck img:nth-child(3) { left: clamp(50px, 14vw, 58px); }
.native-shop-page .native-shop-preview.deck img:nth-child(4) { left: clamp(73px, 20vw, 82px); }

.native-shop-page .native-shop-copy {
  display: grid;
  grid-template-rows: auto auto minmax(44px, 1fr);
  align-content: start;
  min-width: 0;
}

.native-shop-page .native-shop-copy h3 {
  margin: 4px 0;
  overflow-wrap: anywhere;
  font-size: clamp(0.78rem, 3vw, 0.94rem);
}

.native-shop-page .native-shop-copy p {
  min-height: 48px;
  margin-bottom: 0;
  overflow: hidden;
  font-size: clamp(0.64rem, 2.55vw, 0.76rem);
  line-height: 1.18;
}

.native-shop-page .native-shop-card form {
  display: grid;
  align-items: end;
  min-height: 48px;
  margin: 0;
}

.native-shop-page .native-shop-card button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px 9px;
  line-height: 1;
  white-space: normal;
  text-align: center;
}

.native-shop-page .native-shop-card.equipped::after {
  top: 9px;
  right: 9px;
  width: 34px;
  height: 34px;
}

.native-bottom-nav {
  left: 50%;
  width: min(100vw, 480px);
  max-width: 100vw;
  transform: translateX(-50%);
}

.native-install-prompt {
  right: max(9px, env(safe-area-inset-right));
  bottom: calc(86px + env(safe-area-inset-bottom));
  max-width: min(236px, calc(100vw - 18px));
  min-height: 42px;
  padding: 7px 12px 7px 8px;
  font-size: 0.74rem;
}

.native-install-prompt img {
  width: 26px;
  height: 26px;
}

body.native-app-page .native-install-prompt {
  display: none !important;
}

body.ty-auth .native-install-prompt {
  display: inline-flex;
}

.native-table-stage .cardc {
  width: clamp(66px, 19.6vw, 90px);
  height: calc(clamp(66px, 19.6vw, 90px) * 1.52);
}

.native-table-stage .cards-player {
  min-height: 212px;
  padding-top: 10px;
}

@media (max-width: 430px) {
  .native-shop-page .native-shop-grid {
    gap: 7px;
  }

  .native-shop-page .native-shop-card {
    min-height: 334px;
    padding: 16px 10px 17px;
  }

  .native-shop-page .native-shop-preview.deck img:nth-child(4) {
    left: clamp(66px, 19vw, 76px);
  }

  .native-shop-page .native-shop-copy p {
    font-size: clamp(0.62rem, 2.7vw, 0.72rem);
  }
}

@media (max-width: 370px) {
  .native-shop-page .native-shop-grid {
    grid-template-columns: 1fr;
  }

  .native-shop-page .native-shop-card {
    grid-template-rows: 126px auto 48px;
    min-height: 320px;
  }
}

/* ===== RC2 product pass: stronger screen hierarchy and final mobile breathing room. ===== */
body.ty-auth .native-install-prompt {
  top: calc(10px + env(safe-area-inset-top));
  right: max(9px, env(safe-area-inset-right));
  bottom: auto;
  min-height: 34px;
  max-width: 156px;
  padding: 5px 10px 5px 6px;
  font-size: 0.62rem;
  transform: translateY(-8px) scale(0.94);
}

body.ty-auth .native-install-prompt[hidden] {
  display: none !important;
}

body.ty-auth .native-install-prompt.show {
  transform: translateY(0) scale(1);
}

body.ty-auth .native-install-prompt img {
  width: 22px;
  height: 22px;
}

.ty-auth-grid {
  width: min(100%, 480px);
  padding-inline: 10px;
}

.login-native-panel {
  max-width: 430px;
  margin-inline: auto;
}

.login-native-actions {
  position: relative;
  z-index: 2;
}

.native-home-page .native-screen,
.native-lobby-page .native-screen,
.native-shop-page .native-screen,
.native-profile-page .native-screen {
  animation: nativeScreenEnter 0.32s ease-out both;
}

.native-home-page .native-logo-block.home-logo {
  margin-top: -14px;
  margin-bottom: -20px;
}

.native-home-page .native-logo-block.home-logo img {
  width: min(318px, 82vw);
}

.native-home-page .native-featured-card {
  min-height: clamp(286px, 43svh, 348px);
  padding: 18px 16px 18px;
  margin-top: 0;
}

.native-home-page .native-featured-card::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.80), rgba(0,0,0,0.42) 48%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.54)),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.72));
}

.native-home-page .native-featured-copy {
  max-width: min(268px, 64%);
  padding-top: 34px;
}

.native-home-page .native-featured-copy h1 {
  max-width: 250px;
  overflow-wrap: anywhere;
  font-size: clamp(1.58rem, 7vw, 2.18rem);
  line-height: 0.94;
}

.native-home-page .native-featured-copy p {
  max-width: 245px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.native-home-page .native-featured-cards {
  top: 92px;
  right: 12px;
  width: 132px;
  transform: rotate(3deg);
}

.native-home-page .native-featured-cards img {
  width: clamp(45px, 11.6vw, 58px);
}

.native-home-page .native-play-button {
  width: min(196px, 52vw);
  min-height: 49px;
  margin-top: 12px;
  justify-self: end;
  font-size: clamp(0.86rem, 3.7vw, 1.12rem);
}

.native-home-page .native-room-row {
  align-items: stretch;
  gap: 8px;
}

.native-home-page .native-mini-room {
  grid-template-rows: 68px minmax(34px, auto) 18px 30px;
  min-height: 166px;
  padding: 7px 6px 8px;
}

.native-home-page .native-mini-room span {
  display: grid;
  place-items: center;
  min-height: 34px;
  overflow: hidden;
  font-size: clamp(0.60rem, 2.35vw, 0.72rem);
  line-height: 1.03;
}

.native-home-page .native-mini-room small {
  font-size: 0.66rem;
}

.native-home-page .native-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.native-home-page .native-action-tile {
  min-height: 88px;
}

.native-home-page .native-daily-strip {
  margin-bottom: 12px;
}

.native-tabs {
  gap: 7px;
  overflow: visible;
}

.native-tabs a,
.native-filter-row button {
  position: relative;
  overflow: hidden;
  padding-inline: 8px;
  white-space: nowrap;
  text-align: center;
}

.native-tabs a,
.native-shop-tabs a,
.native-filter-row button {
  min-height: 42px;
  color: #ffe9a6;
  border: 1px solid rgba(255, 216, 112, 0.62);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(57, 34, 14, 0.86), rgba(14, 9, 5, 0.94)),
    url('../game/missing_ui/game_table/action_button_gold_empty.png') center/100% 100% no-repeat;
  box-shadow:
    0 9px 14px rgba(0,0,0,0.36),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.native-tabs a.active,
.native-shop-tabs a.active,
.native-filter-row button.active {
  color: #fff6ca;
  background:
    radial-gradient(80px 44px at 50% 0%, rgba(72, 190, 255, 0.28), transparent 72%),
    linear-gradient(180deg, rgba(11, 87, 151, 0.92), rgba(5, 34, 74, 0.96)),
    url('../game/missing_ui/game_table/action_button_blue_empty.png') center/100% 100% no-repeat;
}

.native-tabs a.active {
  outline: 1px solid rgba(255, 230, 139, 0.36);
  outline-offset: -3px;
}

.native-lobby-page .native-room-spotlight {
  grid-template-columns: minmax(116px, 38%) minmax(0, 1fr);
  min-height: 224px;
  padding: 15px 13px 16px;
}

.native-lobby-page .native-room-spotlight > img {
  align-self: center;
  height: 122px;
}

.native-lobby-page .native-room-spotlight-copy h1 {
  font-size: clamp(1.30rem, 6vw, 1.86rem);
}

.native-lobby-page .native-create-room {
  grid-column: 1 / -1;
  grid-template-columns: 70px minmax(0, 1fr) minmax(126px, 38%);
  margin-top: 4px;
}

.native-lobby-page .native-room-list-item {
  grid-template-columns: 86px minmax(0, 1fr) 78px;
  padding: 8px 10px;
}

.native-lobby-page .native-room-list-item h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-shop-page .native-shop-card {
  grid-template-rows: 110px minmax(100px, 1fr) 76px;
  min-height: 354px;
}

.native-price-pill {
  display: inline-grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  place-items: center;
  min-height: 30px;
  width: 100%;
  margin: 0 0 5px;
  padding: 4px 10px;
  color: #ffefb9;
  font-family: Georgia, serif;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,0.72);
  background:
    linear-gradient(180deg, rgba(44, 24, 9, 0.92), rgba(12, 7, 4, 0.95));
  border: 1px solid rgba(255, 216, 113, 0.58);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 8px 12px rgba(0,0,0,0.32);
}

.native-price-pill::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: -3px;
  background: url('../game/premium_v2/hud/coin_icon_reference_2x.png') center/contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 222, 103, 0.50));
}

.native-shop-page .native-shop-card button[name="purchase"]::before {
  display: none;
}

.native-profile-page .native-profile-hero {
  grid-template-columns: 98px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  min-height: 238px;
  padding: 22px 16px 18px;
}

.native-profile-page .native-profile-avatar {
  grid-row: 1 / span 2;
}

.native-profile-page .native-profile-main {
  min-width: 0;
  padding-right: 0;
}

.native-profile-page .native-profile-main h1 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-profile-page .native-rank-shield {
  position: relative;
  right: auto;
  bottom: auto;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: -2px;
  transform: scale(0.70);
  transform-origin: right top;
}

.native-profile-page .native-profile-edit {
  grid-template-columns: minmax(0, 1fr) 74px;
}

.native-profile-page .native-profile-edit button {
  padding-inline: 8px;
  font-size: 0.66rem;
}

.native-profile-page .native-profile-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.native-profile-page .native-profile-panel {
  min-height: 210px;
}

.native-profile-page .native-inventory-section {
  margin-bottom: 18px;
}

.native-profile-page .native-inventory-card {
  grid-template-rows: 108px minmax(42px, auto) 48px;
  min-height: 238px;
  padding-bottom: 17px;
  overflow: hidden;
}

.native-profile-page .native-inventory-card form {
  display: grid;
  align-items: end;
  min-height: 48px;
}

.native-table-stage .seat-label {
  max-width: min(264px, 72vw);
}

.native-table-stage .cards-player {
  width: min(374px, 92vw);
}

@media (max-width: 430px) {
  .native-home-page .native-featured-copy {
    max-width: 63%;
  }

  .native-home-page .native-room-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .native-home-page .native-mini-room {
    min-height: 158px;
  }

  .native-lobby-page .native-room-spotlight {
    grid-template-columns: minmax(106px, 37%) minmax(0, 1fr);
  }

  .native-lobby-page .native-create-room {
    grid-template-columns: 64px minmax(0, 1fr) minmax(116px, 36%);
  }

  .native-shop-page .native-shop-card {
    min-height: 346px;
  }

  .native-profile-page .native-profile-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 232px;
    padding: 20px 13px 16px;
  }

  .native-profile-page .native-profile-avatar {
    width: 86px;
    height: 86px;
  }

  .native-profile-page .native-profile-main {
    padding-right: 0;
  }

  .native-profile-page .native-rank-shield {
    transform: scale(0.62);
  }

  .native-profile-page .native-profile-edit {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-profile-page .native-profile-edit button {
    min-height: 34px;
  }
}

@media (max-width: 390px) {
  .native-home-page .native-room-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .native-home-page .native-mini-room {
    grid-template-rows: 78px auto 18px 30px;
    min-height: 178px;
  }
}

@keyframes nativeScreenEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Mesa final jugable: mano completa, tap confiable y dock separado. ===== */
.game3d-page .native-table-stage {
  --final-card-w: clamp(64px, 18.2vw, 88px);
  --final-card-h: calc(var(--final-card-w) * 1.52);
  --final-dock-h: 122px;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.game3d-page .native-table-stage .table-perspective {
  padding-top: clamp(158px, 20svh, 188px);
  padding-bottom: calc(var(--final-dock-h) + 24px + env(safe-area-inset-bottom));
  overflow: visible;
}

.game3d-page .native-table-stage .virtual-table {
  width: min(92vw, 404px);
  height: clamp(318px, 39svh, 420px);
  min-height: 318px;
  transform:
    rotateX(52deg)
    translateY(-1%)
    rotateZ(var(--native-tilt-x, 0deg));
  overflow: visible;
}

.game3d-page .native-table-stage .virtual-table::before,
.game3d-page .native-table-stage .virtual-table::after {
  z-index: 1;
}

.game3d-page .native-table-stage .center-play-zone {
  z-index: 20;
  inset: 21% 5% 43%;
}

.game3d-page .native-table-stage .rival-seat {
  z-index: 24;
}

.game3d-page .native-table-stage .your-seat {
  bottom: 44px;
  z-index: 72;
  transform: translateX(-50%) translateZ(260px) rotateX(-52deg);
}

.game3d-page .native-table-stage .cards-player {
  width: min(360px, 90vw);
  min-height: calc(var(--final-card-h) + 54px);
  padding: 6px 10px 28px;
  transform: translateY(-2px);
  overflow: visible;
  pointer-events: none;
}

.game3d-page .native-table-stage .cards-player .cardc {
  position: relative;
  z-index: 76;
  width: var(--final-card-w);
  height: var(--final-card-h);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.game3d-page .native-table-stage .cards-player .cardc::before {
  content: "";
  position: absolute;
  inset: -18px -14px -24px;
  z-index: -1;
  border-radius: 18px;
  pointer-events: auto;
}

.game3d-page .native-table-stage .cards-player .cardc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,0.55));
}

.game3d-page .native-table-stage .cards-player .cardc:nth-child(1) {
  transform: rotate(-8deg) translate(10px, 18px) translateZ(50px);
}

.game3d-page .native-table-stage .cards-player .cardc:nth-child(2) {
  transform: translateY(-8px) translateZ(68px);
}

.game3d-page .native-table-stage .cards-player .cardc:nth-child(3) {
  transform: rotate(8deg) translate(-10px, 18px) translateZ(50px);
}

.game3d-page .native-table-stage .cards-player .cardc.playable {
  animation: playablePulse 1.35s ease-in-out infinite;
}

.game3d-page .native-table-stage .cards-player .cardc.playable:hover,
.game3d-page .native-table-stage .cards-player .cardc.playable:focus-visible {
  transform: translateY(-26px) scale(1.05) rotate(0deg) translateZ(96px) !important;
  filter: drop-shadow(0 22px 20px rgba(0,0,0,0.58)) drop-shadow(0 0 13px rgba(255,218,112,0.34));
}

.game3d-page .native-table-stage .cards-player .cardc.selected,
.game3d-page .native-table-stage .cards-player .cardc:active {
  transform: translateY(-32px) scale(1.06) rotate(0deg) translateZ(110px) !important;
}

.game3d-page .native-table-stage .cardc.throwing {
  opacity: 0.38;
  filter: saturate(0.8) blur(0.5px);
}

.game3d-page .native-table-stage .mesa-card {
  width: clamp(58px, 15.5vw, 78px);
  height: calc(clamp(58px, 15.5vw, 78px) * 1.52);
  z-index: 22;
}

.game3d-page .native-table-stage .action-dock {
  bottom: max(6px, env(safe-area-inset-bottom));
  width: min(374px, calc(100% - 24px));
  min-height: var(--final-dock-h);
  z-index: 58;
  padding: 18px 14px 12px;
}

.game3d-page .native-table-stage .actions button {
  min-width: 78px;
  max-width: 150px;
  min-height: 34px;
  padding-inline: 9px;
  font-size: clamp(0.60rem, 2.55vw, 0.70rem);
}

.game3d-page .native-table-stage .status-banner {
  max-width: min(336px, calc(100vw - 48px));
  font-size: clamp(0.68rem, 2.7vw, 0.78rem);
}

.game3d-page .native-table-stage .seat-label {
  max-width: min(250px, 68vw);
  min-height: 40px;
  padding: 7px 13px;
}

.game3d-page .native-table-stage .seat-label strong {
  font-size: clamp(0.70rem, 2.8vw, 0.86rem);
}

.game3d-page .native-table-stage .mini-chip {
  min-height: 23px;
  padding: 4px 9px;
  font-size: 0.64rem;
}

@media (max-width: 380px) {
  .game3d-page .native-table-stage {
    --final-card-w: clamp(58px, 17.5vw, 72px);
    --final-dock-h: 116px;
  }

  .game3d-page .native-table-stage .your-seat {
    bottom: 38px;
  }

  .game3d-page .native-table-stage .cards-player {
    width: min(330px, 89vw);
  }
}

/* ===== Mesa native zones: rival arriba, jugadas al centro, mano propia abajo. ===== */
.game3d-page .native-table-stage.seats-detached {
  --opponent-card-w: clamp(54px, 15vw, 70px);
  --own-hand-bottom: calc(var(--final-dock-h) + 12px + env(safe-area-inset-bottom));
  --rival-hand-top: clamp(214px, 25svh, 258px);
}

.game3d-page .native-table-stage.seats-detached .table-perspective {
  padding-top: clamp(300px, 36svh, 344px);
  padding-bottom: calc(var(--final-dock-h) + 178px + env(safe-area-inset-bottom));
}

.game3d-page .native-table-stage.seats-detached .virtual-table {
  width: min(92vw, 396px);
  height: clamp(248px, 31svh, 330px);
  min-height: 248px;
  transform: rotateX(50deg) translateY(0) rotateZ(var(--native-tilt-x, 0deg));
}

.game3d-page .native-table-stage.seats-detached > .player-seat {
  position: absolute;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(370px, 92vw);
  transform: translateX(-50%);
  transform-style: flat;
  pointer-events: auto;
}

.game3d-page .native-table-stage.seats-detached > .rival-seat {
  top: var(--rival-hand-top);
  z-index: 54;
}

.game3d-page .native-table-stage.seats-detached > .your-seat {
  bottom: var(--own-hand-bottom);
  z-index: 82;
}

.game3d-page .native-table-stage.seats-detached .rival-seat .seat-label {
  min-height: 34px;
  padding: 6px 12px;
  transform: scale(0.90);
  transform-origin: center bottom;
}

.game3d-page .native-table-stage.seats-detached .your-seat .seat-label {
  min-height: 38px;
  padding: 7px 14px;
}

.game3d-page .native-table-stage.seats-detached .cards-rival {
  width: min(310px, 80vw);
  min-height: calc(var(--opponent-card-w) * 1.52 + 20px);
  padding: 3px 18px 12px;
  gap: 0;
  background: url('../game/missing_ui/game_table/card_holder_rival_empty.png') center/100% 100% no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.46));
  overflow: visible;
}

.game3d-page .native-table-stage.seats-detached .cards-rival .cardc {
  width: var(--opponent-card-w);
  height: calc(var(--opponent-card-w) * 1.52);
  margin-inline: -3px;
}

.game3d-page .native-table-stage.seats-detached .cards-rival .cardc:nth-child(1) {
  transform: rotate(-7deg) translateY(7px);
}

.game3d-page .native-table-stage.seats-detached .cards-rival .cardc:nth-child(2) {
  transform: translateY(-4px);
}

.game3d-page .native-table-stage.seats-detached .cards-rival .cardc:nth-child(3) {
  transform: rotate(7deg) translateY(7px);
}

.game3d-page .native-table-stage.seats-detached .cards-player {
  width: min(366px, 91vw);
  min-height: calc(var(--final-card-h) + 52px);
  padding: 6px 12px 26px;
  gap: 0;
  background: url('../game/missing_ui/game_table/card_holder_own_empty.png') center bottom/100% 86% no-repeat;
}

.game3d-page .native-table-stage.seats-detached .cards-player .cardc {
  margin-inline: -2px;
}

.game3d-page .native-table-stage.seats-detached .center-play-zone {
  inset: 16% 5% 36%;
  z-index: 28;
}

.game3d-page .native-table-stage.seats-detached .mesa-cards {
  min-height: 104px;
  gap: 8px;
}

.game3d-page .native-table-stage.seats-detached .status-banner {
  transform: translateY(-10px);
}

.game3d-page .native-table-stage.seats-detached .action-dock {
  z-index: 76;
}

@media (max-width: 380px) {
  .game3d-page .native-table-stage.seats-detached {
    --rival-hand-top: clamp(204px, 24svh, 236px);
    --own-hand-bottom: calc(var(--final-dock-h) + 8px + env(safe-area-inset-bottom));
  }

  .game3d-page .native-table-stage.seats-detached .table-perspective {
    padding-top: clamp(286px, 34svh, 320px);
  }

  .game3d-page .native-table-stage.seats-detached .cards-player {
    width: min(336px, 90vw);
  }
}

/* ===== Cuenta invitada, retos y estadisticas del lobby. ===== */
.native-player-chip.is-guest {
  box-shadow: 0 0 0 1px rgba(255, 215, 114, 0.34), 0 18px 28px rgba(0,0,0,0.36);
}

.native-player-chip.is-guest .native-avatar {
  filter: saturate(0.9) brightness(1.08);
}

.native-player-copy small {
  display: block;
  margin-top: 2px;
  color: #78f1c3;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.native-social-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.native-social-hub article {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(241, 185, 76, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(9, 30, 51, 0.94), rgba(45, 23, 10, 0.94)),
    url('../game/missing_ui/salas/friends_panel_empty.png') center/100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 166, 0.12), 0 18px 34px rgba(0,0,0,0.42);
}

.native-social-hub article::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 218, 106, 0.20), transparent 62%);
  pointer-events: none;
}

.native-social-hub span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231, 178, 74, 0.78);
  background: rgba(5, 12, 22, 0.76);
  color: #ffd875;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.native-social-hub h2 {
  position: relative;
  z-index: 1;
  margin: 12px 0 6px;
  color: #ffe7a2;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.12rem, 4.4vw, 1.72rem);
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 3px 2px rgba(0,0,0,0.62);
}

.native-social-hub p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 245, 218, 0.86);
  font-size: 0.82rem;
  line-height: 1.35;
}

.native-social-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.native-social-actions a,
.native-social-actions button,
.native-create-room a,
.native-party-slots a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 223, 132, 0.74);
  border-radius: 8px;
  background: linear-gradient(180deg, #198342, #075924);
  color: #fff4c0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,0.58);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.16), 0 8px 16px rgba(0,0,0,0.36);
  cursor: pointer;
}

.native-social-actions button {
  appearance: none;
}

.native-social-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.native-social-stats div {
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(223, 164, 65, 0.42);
  border-radius: 8px;
  background: rgba(0,0,0,0.28);
  text-align: center;
}

.native-social-stats dt {
  color: rgba(255, 235, 173, 0.76);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.native-social-stats dd {
  margin: 2px 0 0;
  color: #fff2bb;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.18rem;
  font-weight: 900;
}

.native-social-hub.is-guest article:first-child {
  background:
    linear-gradient(135deg, rgba(66, 20, 11, 0.94), rgba(8, 26, 43, 0.93)),
    url('../game/missing_ui/salas/friends_panel_empty.png') center/100% 100% no-repeat;
}

@media (max-width: 720px) {
  .native-social-hub {
    grid-template-columns: 1fr;
  }

  .native-social-hub article {
    min-height: 0;
    padding: 15px;
  }
}