:root {
  --ink: #07130f;
  --deep: #0b2119;
  --felt: #123a2a;
  --felt-light: #1b503b;
  --gold: #c7a55b;
  --gold-light: #e8d29d;
  --paper: #f6eedc;
  --paper-deep: #e8dbc1;
  --red: #a54635;
  --cream: #fff8e9;
  --muted: #a8b8ae;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --display: "Bodoni 72", Didot, "Times New Roman", serif;
  --body: "Avenir Next", Avenir, "Gill Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--cream); }
body { font-family: var(--body); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
[hidden] { display: none !important; }

.home-screen {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 46%, rgba(34, 104, 75, .26), transparent 31%),
    radial-gradient(circle at 18% 15%, rgba(199, 165, 91, .08), transparent 25%),
    linear-gradient(122deg, #07130f 0%, #0a1c15 52%, #06100d 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.home-grain, .felt-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.home-screen::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(199, 165, 91, .2);
  pointer-events: none;
}

.home-nav, .home-footer {
  width: min(1380px, calc(100% - 80px));
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.home-nav { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.mini-brand, .game-brand { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; }
.brand-coin { width: 34px; height: 34px; border: 1px solid var(--gold); display: grid; place-items: center; border-radius: 50%; color: var(--gold-light); font-family: var(--display); font-size: 17px; box-shadow: inset 0 0 0 3px rgba(199, 165, 91, .08); }
.nav-actions, .header-actions { display: flex; gap: 8px; }
.icon-button, .header-button {
  border: 1px solid rgba(231, 215, 178, .18);
  background: rgba(255, 255, 255, .035);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .25s ease;
}
.icon-button:hover, .header-button:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }
.icon-button svg, .header-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.hero {
  width: min(1280px, calc(100% - 100px));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(460px, .82fr) minmax(440px, 1.18fr);
  align-items: center;
  gap: 4vw;
  position: relative;
  z-index: 2;
  padding: 28px 0 54px;
}
.hero-copy { position: relative; z-index: 3; animation: reveal .75s both; }
.eyebrow { margin: 0 0 14px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .28em; font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 30px; height: 1px; background: var(--gold); }
.eyebrow.centered { justify-content: center; }
.hero h1 { font: 400 clamp(76px, 9.2vw, 142px)/.72 var(--display); letter-spacing: -.055em; margin: 0; color: var(--paper); text-shadow: 0 8px 40px rgba(0, 0, 0, .35); }
.hero-subtitle { margin: 13px 0 24px 7px; letter-spacing: .72em; font-size: 12px; color: var(--gold); font-weight: 700; }
.hero-description { margin: 0 0 28px 6px; max-width: 500px; color: #b9c8bf; font-family: "Iowan Old Style", Georgia, serif; font-size: 17px; line-height: 1.55; }

.setup-card { border-top: 1px solid rgba(199, 165, 91, .28); padding: 20px 0 0 6px; max-width: 560px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.setting-row.compact { justify-content: flex-start; gap: 32px; }
.optional-settings { padding-top: 2px; }
.setting-label, .setting-help { display: block; }
.setting-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.setting-help { margin-top: 3px; color: #70867a; font-size: 10px; }
.segmented { display: flex; padding: 3px; border: 1px solid rgba(199, 165, 91, .22); border-radius: 8px; background: rgba(0, 0, 0, .18); }
.segmented button { border: 0; background: none; padding: 8px 13px; border-radius: 5px; color: #82968b; cursor: pointer; font-size: 11px; transition: .2s ease; }
.segmented button.active { background: var(--paper); color: var(--deep); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.switch-label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 34px; height: 19px; padding: 2px; border-radius: 20px; background: #35483f; transition: .2s; flex: 0 0 auto; }
.switch::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #94a49b; transition: .2s; }
.switch-label input:checked + .switch { background: var(--gold); }
.switch-label input:checked + .switch::after { transform: translateX(15px); background: #fff9e9; }
.switch-label strong, .switch-label small { display: block; }
.switch-label strong { font-size: 11px; }
.switch-label small { color: #71857a; font-size: 9px; margin-top: 1px; }
.primary-button {
  border: 1px solid #ead59f;
  color: #12251c;
  background: linear-gradient(135deg, #ead59f, #bc9547);
  padding: 15px 20px;
  min-height: 52px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .5);
  transition: .25s ease;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 35px rgba(0, 0, 0, .38); }
.primary-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.primary-button.small { min-height: 42px; padding: 11px 18px; }
.setup-card .primary-button { width: 100%; margin-top: 5px; }
.online-button { width: 100%; min-height: 44px; margin-top: 9px; border: 1px solid rgba(232,210,157,.3); border-radius: 5px; background: rgba(255,255,255,.035); color: var(--gold-light); cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; transition: .2s; }.online-button:hover { border-color: var(--gold); background: rgba(199,165,91,.09); }.online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #5cc589; box-shadow: 0 0 9px #5cc589; }
.match-note { margin: 10px 0 0; text-align: center; color: #62776c; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }

.hero-cards { height: min(620px, 66vh); position: relative; animation: reveal 1s .16s both; perspective: 1300px; }
.hero-cards::before { content: ""; position: absolute; width: 70%; height: 70%; left: 18%; top: 17%; background: radial-gradient(circle, rgba(199, 165, 91, .18), transparent 66%); filter: blur(15px); }
.showcase-card { position: absolute; width: min(250px, 30vw); aspect-ratio: .635; border-radius: 15px; background: var(--paper); border: 1px solid #fff9e9; box-shadow: 0 44px 70px rgba(0, 0, 0, .48), inset 0 0 0 7px var(--paper), inset 0 0 0 9px #a98540; color: #13281e; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.showcase-card > span { position: absolute; left: 18px; top: 15px; font: 700 34px var(--display); }
.showcase-card > em { position: absolute; bottom: 19px; font: normal 700 9px var(--body); letter-spacing: .3em; }
.showcase-one { left: 28%; top: 13%; transform: rotate(8deg) translateZ(35px); z-index: 3; }
.showcase-two { left: 6%; top: 22%; transform: rotate(-12deg); z-index: 2; }
.card-back-showcase { left: 48%; top: 24%; transform: rotate(23deg) translateZ(-20px); background: repeating-linear-gradient(45deg, #173a2b 0 8px, #102d22 8px 16px); box-shadow: 0 35px 65px rgba(0, 0, 0, .45), inset 0 0 0 8px #dfc985, inset 0 0 0 11px #173a2b, inset 0 0 0 17px #dfc985; }
.card-back-showcase::after { content: "G"; width: 42%; aspect-ratio: 1; border: 2px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font: 52px var(--display); transform: rotate(-23deg); }
.suit-icon { width: 120px; height: 150px; display: block; position: relative; }
.suit-oros { border-radius: 50%; width: 125px; height: 125px; background: radial-gradient(circle, #f5dda0 0 25%, #b4872e 27% 48%, #ecd18f 50% 57%, #8f6926 59%); box-shadow: inset 0 0 0 3px #70501d, 0 8px 18px rgba(0,0,0,.2); }
.suit-espadas::before { content: ""; position: absolute; width: 18px; height: 135px; left: 52px; top: 0; background: linear-gradient(90deg, #73807d, #e6ece8 48%, #65716d); clip-path: polygon(50% 0, 100% 15%, 64% 77%, 64% 100%, 36% 100%, 36% 77%, 0 15%); }
.suit-espadas::after { content: ""; position: absolute; width: 82px; height: 13px; background: #ad863e; left: 20px; top: 104px; border-radius: 50%; }
.hero-orbit { position: absolute; border: 1px solid rgba(199,165,91,.13); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; left: -2%; top: 2%; }
.orbit-two { width: 420px; height: 420px; left: 8%; top: 10%; border-style: dashed; }
.gold-dust { position: absolute; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 16px var(--gold); }
.dust-a { width: 4px; height: 4px; left: 2%; top: 30%; }.dust-b { width: 3px; height: 3px; right: 14%; top: 23%; }.dust-c { width: 5px; height: 5px; right: 8%; bottom: 20%; }
.home-footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 28px; color: #52685c; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.home-footer a { color: inherit; text-decoration: none; transition: .2s; }.home-footer a:hover { color: var(--gold); }

@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Mesa de juego */
.game-screen { --hand-card-w: 92px; --played-card-w: 72px; --trump-card-w: 68px; min-height: 100svh; background: #07130f; display: grid; grid-template-rows: 66px minmax(0, 1fr); overflow: hidden; }
.game-screen[data-card-size="compacto"] { --hand-card-w: 76px; --played-card-w: 61px; --trump-card-w: 58px; }
.game-screen[data-card-size="grande"] { --hand-card-w: 108px; --played-card-w: 82px; --trump-card-w: 78px; }
.game-header { display: grid; grid-template-columns: 240px 1fr 240px; align-items: center; padding: 0 22px; border-bottom: 1px solid rgba(199,165,91,.2); background: #081510; position: relative; z-index: 20; }
.game-header > .header-button { display: none; }
.game-brand strong, .game-brand small { display: block; }.game-brand strong { font: 22px/.9 var(--display); letter-spacing: .08em; }.game-brand small { color: var(--gold); font-size: 7px; margin-top: 5px; letter-spacing: .28em; }
.scoreboard { justify-self: center; display: flex; align-items: center; gap: 23px; }
.team-score { min-width: 118px; }.team-score.ours { text-align: right; }.team-score span, .team-score strong, .team-score small { display: block; }.team-score span { color: #83988c; text-transform: uppercase; letter-spacing: .18em; font-size: 8px; }.team-score strong { font: 18px var(--display); color: var(--paper); margin: 2px 0; }.team-score small { color: var(--gold); font-size: 8px; }
.score-divider { height: 36px; min-width: 88px; padding: 0 14px; border-left: 1px solid rgba(199,165,91,.24); border-right: 1px solid rgba(199,165,91,.24); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #84978d; text-transform: uppercase; letter-spacing: .14em; font-size: 7px; }.score-divider b { color: var(--gold); height: 5px; line-height: 5px; }
.header-actions { justify-self: end; }.sound-off { display: none; }.sound-disabled .sound-on { display: none; }.sound-disabled .sound-off { display: block; }
.history-icon { font: 22px var(--display); }.header-button { position: relative; }.header-button small { position: absolute; right: -2px; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--ink); font-size: 8px; font-weight: 800; }

.table-shell { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 180px; background: #06110d; }
.table { position: relative; min-height: 480px; overflow: hidden; background-image: linear-gradient(rgba(5, 18, 13, .12), rgba(5, 18, 13, .12)), url("assets/casino-table.png"); background-size: 100% 100%; background-position: center; }
.felt-pattern { opacity: .11; }
.table::after { content: ""; position: absolute; inset: 10% 8%; border: 1px solid rgba(233, 210, 157, .08); border-radius: 38%; pointer-events: none; }
.player-seat { position: absolute; z-index: 6; }
.north { top: 4.2%; left: 50%; transform: translateX(-50%); }.west { left: 3.5%; top: 48%; transform: translateY(-50%); }.east { right: 3.5%; top: 48%; transform: translateY(-50%); }.south { bottom: 2.2%; left: 50%; transform: translateX(-50%); }
.player-meta { display: flex; align-items: center; gap: 9px; white-space: nowrap; }.west .player-meta { flex-direction: column; }.east .player-meta { flex-direction: column; }.player-meta strong, .player-meta small { display: block; }.player-meta strong { font-family: var(--display); font-size: 14px; font-weight: 500; }.player-meta small { color: #8fa399; font-size: 8px; text-transform: uppercase; letter-spacing: .13em; margin-top: 2px; }.west .player-meta div, .east .player-meta div { text-align: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 15px var(--display); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 5px 15px rgba(0,0,0,.35); }.partner-avatar, .human-avatar { background: #c8a758; color: #102219; }.rival-avatar { background: #753126; color: #f4dfca; }.rival-avatar.alt { background: #4b2530; }.human-avatar { width: 32px; height: 32px; font: 700 8px var(--body); }
.turn-light { position: absolute; width: 7px; height: 7px; background: #607269; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.03); opacity: 0; transition: .25s; }.north .turn-light { left: -15px; top: 15px; }.west .turn-light { top: -13px; left: 50%; }.east .turn-light { top: -13px; left: 50%; }.south .turn-light { right: -16px; top: 14px; }.player-seat.active .turn-light { opacity: 1; background: #f1cf72; box-shadow: 0 0 14px #efc660, 0 0 0 4px rgba(239,198,96,.13); }
.hidden-hand { position: absolute; display: flex; pointer-events: none; }.hidden-hand.horizontal { top: 40px; left: 50%; transform: translateX(-50%); }.hidden-hand.vertical { top: 103px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.mini-card-back { width: 31px; height: 45px; border-radius: 3px; margin-left: -19px; background: repeating-linear-gradient(45deg, #17392b 0 3px, #0c241a 3px 6px); border: 2px solid #b99b57; box-shadow: 0 2px 5px rgba(0,0,0,.35); }.mini-card-back:first-child { margin-left: 0; }.vertical .mini-card-back { margin-left: 0; margin-top: -32px; transform: rotate(90deg); }.vertical .mini-card-back:first-child { margin-top: 0; }
.south-meta { padding: 5px 12px; border-radius: 30px; background: rgba(5,15,11,.38); }

.table-status { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); z-index: 7; background: rgba(3,12,9,.48); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.09); padding: 6px 13px; border-radius: 20px; color: #becbc4; font-size: 9px; letter-spacing: .08em; display: flex; align-items: center; gap: 7px; transition: .2s; }.status-dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 8px var(--gold); }
.trick-area { position: absolute; left: 50%; top: 51%; width: 340px; height: 255px; transform: translate(-50%, -50%); z-index: 5; }
.played-card { position: absolute; perspective: 700px; }.played-card .playing-card { animation: cardIn .46s cubic-bezier(.18,.82,.2,1.08) both; transform-origin: center; }.played-card.player-0 { --fly-x: 0px; --fly-y: 170px; --fly-r: -9deg; left: 134px; bottom: 0; transform: rotate(2deg); }.played-card.player-1 { --fly-x: -180px; --fly-y: 0px; --fly-r: -14deg; left: 15px; top: 80px; transform: rotate(-87deg); }.played-card.player-2 { --fly-x: 0px; --fly-y: -170px; --fly-r: 12deg; left: 134px; top: 0; transform: rotate(178deg); }.played-card.player-3 { --fly-x: 180px; --fly-y: 0px; --fly-r: 14deg; right: 15px; top: 80px; transform: rotate(88deg); }
@keyframes cardIn { 0% { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-r)) scale(.76); } 72% { opacity: 1; transform: translate(0, -3px) rotate(-1deg) scale(1.02); } 100% { transform: translate(0) rotate(0) scale(1); } }
.stock-area { position: absolute; left: 68%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: 150px; height: 135px; }.stock-stack { position: absolute; z-index: 3; width: 74px; height: 105px; left: 0; top: 11px; border-radius: 6px; background: repeating-linear-gradient(45deg, #17392b 0 5px, #0c241a 5px 10px); border: 4px double var(--gold); box-shadow: 3px 3px 0 #e1d2ae, 6px 6px 0 #17392b, 0 12px 25px rgba(0,0,0,.35); display: grid; place-items: center; }.stock-stack span { background: rgba(5,15,11,.84); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 10px; color: var(--gold-light); }.trump-card-slot { position: absolute; left: 51px; top: 26px; transform: rotate(90deg); transform-origin: center; }.trump-label { position: absolute; left: 96px; top: 3px; color: var(--gold); font-size: 7px; text-transform: uppercase; letter-spacing: .18em; }

.hand-dock { min-height: 210px; position: relative; display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(#091710, #050d0a); border-top: 1px solid rgba(199,165,91,.18); padding-top: 10px; z-index: 10; }.hand-dock::before { content: ""; position: absolute; width: 44%; height: 1px; top: -1px; left: 28%; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.human-hand { height: 180px; min-width: 570px; display: flex; justify-content: center; align-items: flex-start; padding-top: 8px; }
.hand-reorder-hint { position: absolute; left: 22px; bottom: 13px; color: #667c71; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }.human-hand.is-reordering + .hand-reorder-hint { color: var(--gold-light); }
.playing-card {
  --card-w: var(--hand-card-w);
  width: var(--card-w);
  height: calc(var(--card-w) * 1.43);
  position: relative;
  flex: 0 0 auto;
  margin-left: -16px;
  border: 1px solid #b9aa8f;
  border-radius: 5px;
  background:
    radial-gradient(circle at 45% 38%, rgba(255,255,255,.72), transparent 40%),
    linear-gradient(145deg, #fffdf5, #eee3ce);
  color: #1c2b24;
  box-shadow: 0 7px 15px rgba(0,0,0,.3), inset 0 0 0 3px #fffaf0, inset 0 0 0 4px #31443b;
  transition: transform .22s ease, filter .2s ease, opacity .2s;
  user-select: none;
}
.human-hand .playing-card:first-child { margin-left: 0; }.human-hand button.playing-card { cursor: grab; padding: 0; touch-action: none; }.human-hand button.playing-card:hover:not(:disabled) { transform: translateY(-15px) rotate(var(--fan, 0deg)); z-index: 20 !important; }.human-hand button.playing-card:disabled { cursor: not-allowed; filter: brightness(.55) saturate(.65); }.human-hand button.playing-card.recommended { transform: translateY(-19px); box-shadow: 0 0 0 3px #efcc70, 0 0 26px rgba(239,204,112,.72); animation: recommendPulse 1.3s infinite; }
.human-hand.is-reordering .playing-card:not(.dragging) { transition: transform .16s ease, translate .16s ease, filter .2s ease, opacity .2s; }.human-hand .playing-card.dragging { cursor: grabbing !important; opacity: .82; z-index: 80 !important; transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) - 16px)) rotate(var(--fan, 0deg)) scale(1.04) !important; filter: brightness(1.08) saturate(1.08); box-shadow: 0 18px 34px rgba(0,0,0,.48), 0 0 0 2px var(--gold-light); }.human-hand .playing-card.drop-before { translate: 12px 0; }.human-hand .playing-card.drop-after { translate: -6px 0; }.human-hand .playing-card.drop-before::after, .human-hand .playing-card.drop-after::after { content: ""; position: absolute; z-index: 30; top: 10%; bottom: 10%; width: 3px; border-radius: 3px; background: var(--gold-light); box-shadow: 0 0 12px var(--gold); }.human-hand .playing-card.drop-before::after { left: -9px; }.human-hand .playing-card.drop-after::after { right: -9px; }.reordering-hand { cursor: grabbing !important; }
@keyframes recommendPulse { 50% { box-shadow: 0 0 0 4px #efcc70, 0 0 36px rgba(239,204,112,.9); } }
.card-oros { --suit-color: #c99619; --suit-dark: #754b10; }.card-copas { --suit-color: #c9412e; --suit-dark: #74251d; }.card-espadas { --suit-color: #477d99; --suit-dark: #264656; }.card-bastos { --suit-color: #69833d; --suit-dark: #3b4f23; }
.pinta { position: absolute; z-index: 3; left: 8px; right: 8px; height: 1px; background: var(--suit-dark); pointer-events: none; }.pinta-top { top: 4px; }.pinta-bottom { bottom: 4px; }
.card-copas .pinta { background: linear-gradient(90deg, var(--suit-dark) 0 44%, transparent 44% 56%, var(--suit-dark) 56%); }
.card-espadas .pinta { background: linear-gradient(90deg, var(--suit-dark) 0 28%, transparent 28% 34%, var(--suit-dark) 34% 66%, transparent 66% 72%, var(--suit-dark) 72%); }
.card-bastos .pinta { background: linear-gradient(90deg, var(--suit-dark) 0 20%, transparent 20% 26%, var(--suit-dark) 26% 47%, transparent 47% 53%, var(--suit-dark) 53% 74%, transparent 74% 80%, var(--suit-dark) 80%); }
.card-corner { position: absolute; top: 8px; left: 6px; display: flex; flex-direction: column; align-items: center; z-index: 4; text-shadow: 0 1px #fff; }.card-corner.bottom { inset: auto 6px 8px auto; transform: rotate(180deg); }.card-rank { font: 700 13px/.85 "Iowan Old Style", Georgia, serif; }.card-suit-mini { width: 10px; height: 12px; line-height: 1; margin-top: 2px; color: var(--suit-color); }.card-suit-mini .suit-svg { width: 100%; height: 100%; }
.card-center { position: absolute; inset: 20px 9px 18px; display: grid; place-items: center; overflow: hidden; }
.suit-svg { display: block; width: 18px; height: 22px; overflow: visible; }.suit-svg path, .suit-svg circle { fill: var(--suit-color); stroke: var(--suit-dark); stroke-width: 1.6; stroke-linejoin: round; }.suit-svg .suit-detail { fill: #f2c447; stroke: var(--suit-dark); }.suit-svg-oros .suit-detail { fill: #f7d35a; }.suit-svg-copas .suit-detail { fill: #f1b536; }.suit-svg-espadas .suit-detail { fill: #d69a35; }.suit-svg .suit-leaf { fill: #789341; }
.pip-grid { position: relative; width: 100%; height: 100%; }.pip { position: absolute; width: 18px; height: 22px; display: grid; place-items: center; transform: translate(-50%, -50%); }.pip .suit-svg { width: 100%; height: 100%; }
.pip-count-1 .pip { width: 40px; height: 48px; left: 50%; top: 50%; }
.pip-count-2 .pip-1, .pip-count-3 .pip-1 { left: 50%; top: 21%; }.pip-count-2 .pip-2 { left: 50%; top: 79%; }
.pip-count-3 .pip-2 { left: 50%; top: 50%; }.pip-count-3 .pip-3 { left: 50%; top: 79%; }
.pip-count-4 .pip-1, .pip-count-5 .pip-1, .pip-count-6 .pip-1, .pip-count-7 .pip-1 { left: 26%; top: 20%; }
.pip-count-4 .pip-2, .pip-count-5 .pip-2, .pip-count-6 .pip-2, .pip-count-7 .pip-2 { left: 74%; top: 20%; }
.pip-count-4 .pip-3, .pip-count-5 .pip-3, .pip-count-6 .pip-5, .pip-count-7 .pip-5 { left: 26%; top: 80%; }
.pip-count-4 .pip-4, .pip-count-5 .pip-4, .pip-count-6 .pip-6, .pip-count-7 .pip-6 { left: 74%; top: 80%; }
.pip-count-5 .pip-5, .pip-count-7 .pip-7 { left: 50%; top: 50%; }
.pip-count-6 .pip-3, .pip-count-7 .pip-3 { left: 26%; top: 50%; }.pip-count-6 .pip-4, .pip-count-7 .pip-4 { left: 74%; top: 50%; }
.figure-art { position: absolute; inset: -1px -5px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(225,198,130,.18), transparent 65%); }
.figure-oros { --figure-frame-ratio: .60883; }.figure-copas { --figure-frame-ratio: .59259; }.figure-espadas { --figure-frame-ratio: .61633; }.figure-bastos { --figure-frame-ratio: .66667; }
.figure-frame { position: absolute; top: 2%; left: 50%; height: 96%; width: auto; aspect-ratio: var(--figure-frame-ratio); overflow: hidden; transform: translateX(-50%); }
.figure-sprite { position: absolute; top: 0; left: 0; width: 300%; max-width: none; height: 100%; pointer-events: none; user-select: none; filter: saturate(.98) contrast(1.03); }
.figure-caballo .figure-sprite { left: -100%; }.figure-rey .figure-sprite { left: -200%; }
.played-card .playing-card, .trump-card-slot .playing-card { --card-w: var(--played-card-w); pointer-events: none; margin: 0; }.trump-card-slot .playing-card { --card-w: var(--trump-card-w); }
.game-actions { position: absolute; right: 22px; top: 17px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; max-width: 170px; }.secondary-button, .text-button, .danger-button { border: 1px solid rgba(199,165,91,.3); background: rgba(255,255,255,.04); color: #d8dedb; min-height: 36px; padding: 8px 13px; border-radius: 5px; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; transition: .2s; }.secondary-button:hover { background: rgba(199,165,91,.12); border-color: var(--gold); }.secondary-button:disabled { opacity: .35; cursor: not-allowed; }.spark { color: var(--gold); }.sing-actions { display: flex; flex-direction: column; gap: 6px; }.sing-actions button { color: #1a281f; background: var(--gold-light); border: 0; min-height: 35px; border-radius: 5px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; }

.toast-region { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }.toast { min-width: 260px; max-width: min(430px, calc(100vw - 30px)); background: rgba(8,22,16,.94); color: #e8eee9; border: 1px solid rgba(199,165,91,.38); box-shadow: var(--shadow); padding: 12px 16px; border-radius: 7px; font-size: 11px; line-height: 1.45; animation: toastIn .3s both; backdrop-filter: blur(12px); text-align: center; }.toast strong { color: var(--gold-light); }.toast.out { animation: toastOut .3s both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } } @keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

.ai-insight { position: absolute; z-index: 12; left: 50%; top: 27%; width: min(390px, calc(100% - 32px)); display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border-radius: 8px; border: 1px solid rgba(232,210,157,.28); background: rgba(5,18,13,.9); box-shadow: 0 14px 35px rgba(0,0,0,.35); backdrop-filter: blur(12px); opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s, transform .25s; pointer-events: none; }.ai-insight.visible { opacity: 1; transform: translate(-50%, 0); }.ai-insight-avatar { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font: 15px var(--display); }.ai-insight strong { color: var(--gold-light); font: 14px var(--display); }.ai-insight p { margin: 3px 0 0; color: #b8c8bf; font-size: 9px; line-height: 1.45; }

.modal { width: min(500px, calc(100% - 30px)); color: #183026; background: linear-gradient(145deg, #fff9eb, #eee1c7); border: 1px solid #d7bb7e; border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,.65); padding: 34px; }.modal::backdrop { background: rgba(2,10,7,.76); backdrop-filter: blur(5px); }.modal .eyebrow { color: #8a6b29; }.modal h2 { font: 42px/.95 var(--display); margin: 7px 0 14px; }.modal p { color: #5c6e65; line-height: 1.6; font-size: 13px; }.modal-close { position: absolute; right: 13px; top: 10px; border: 0; background: none; color: #746d5d; font: 26px var(--display); cursor: pointer; }.modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }.text-button { color: #496056; background: none; border-color: transparent; }.danger-button { background: #8e3d31; color: white; border-color: #8e3d31; }.tutorial-modal { min-height: 400px; }.tutorial-illustration { height: 120px; margin: 15px 0 20px; border: 1px solid #ccb176; border-radius: 6px; display: grid; place-items: center; background: #153c2d; color: #eddba9; font: 64px var(--display); overflow: hidden; }.tutorial-illustration.cards-demo { display: flex; justify-content: center; gap: 0; }.tutorial-mini-card { width: 58px; height: 82px; border-radius: 5px; background: #fff9e9; border: 2px solid #c5a55d; color: #263d32; display: grid; place-items: center; margin-left: -12px; font: 26px var(--display); transform: rotate(var(--r)); }.tutorial-progress { display: flex; gap: 5px; justify-content: center; margin-top: 22px; }.tutorial-progress span { width: 22px; height: 2px; background: #c9bda3; }.tutorial-progress span.active { background: #9a762d; }.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 24px 0; }.stats-grid div { border: 1px solid #d8c7a4; background: rgba(255,255,255,.35); padding: 17px; border-radius: 5px; }.stats-grid strong, .stats-grid span { display: block; }.stats-grid strong { font: 34px var(--display); color: #173c2c; }.stats-grid span { color: #78847e; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }.stats-modal .primary-button { width: 100%; }.result-modal { text-align: center; }.result-emblem { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: #173c2d; color: var(--gold-light); border: 5px double #c9a656; font-size: 28px; }.result-score { display: flex; justify-content: center; gap: 28px; margin: 20px 0; }.result-score div strong, .result-score div span { display: block; }.result-score strong { font: 28px var(--display); }.result-score span { font-size: 8px; color: #7a887f; text-transform: uppercase; letter-spacing: .14em; }.result-modal .primary-button { width: 100%; }.result-modal .text-button { margin-top: 8px; width: 100%; }.confirm-modal { width: min(420px, calc(100% - 30px)); }
.history-modal { width: min(620px, calc(100% - 30px)); max-height: min(720px, calc(100svh - 30px)); }.history-list { display: grid; gap: 10px; max-height: 500px; overflow: auto; padding-right: 4px; }.history-entry { border: 1px solid #d6c29b; border-radius: 7px; background: rgba(255,255,255,.34); padding: 12px 14px; }.history-entry header { display: flex; justify-content: space-between; align-items: center; }.history-entry header span, .history-entry header strong { display: block; }.history-entry header span { color: #8d806a; font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }.history-entry header strong { color: #173c2c; margin-top: 2px; font: 17px var(--display); }.history-entry header b { color: #8b6a25; font: 24px var(--display); }.history-cards { display: flex; gap: 12px; margin-top: 10px; }.history-play { display: grid; justify-items: center; gap: 4px; }.mini-history-card { width: 35px; height: 50px; border: 1px solid #b7a88b; border-radius: 3px; background: #fffaf0; box-shadow: inset 0 0 0 2px #f2ead9; color: #173126; padding: 4px; font: 700 12px var(--display); }.mini-history-card i { display: block; color: var(--suit-color); font: normal 7px var(--body); text-transform: uppercase; }.history-play small { color: #78847e; font-size: 7px; }.history-entry details { margin-top: 8px; border-top: 1px solid #ded1b8; padding-top: 7px; }.history-entry summary { cursor: pointer; color: #826a36; font-size: 9px; }.history-entry details p { margin: 7px 0 0; font-size: 10px; line-height: 1.35; }
.settings-modal { width: min(570px, calc(100% - 30px)); }.modal-setting-list { display: grid; gap: 4px; margin: 22px 0; }.modal-switch, .modal-size-setting { padding: 14px 0; border-bottom: 1px solid #d8c7a4; }.modal-switch strong, .modal-size-setting strong { color: #213b30; }.modal-switch small, .modal-size-setting small { color: #7e8c85; }.modal-size-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.modal-size-setting > span strong, .modal-size-setting > span small { display: block; }.modal-size-setting > span strong { font-size: 11px; }.modal-size-setting > span small { font-size: 9px; margin-top: 2px; }.segmented.light { background: #e5d9c1; border-color: #cbb991; }.segmented.light button { color: #766c59; }.segmented.light button.active { background: #173c2d; color: #fff8e9; }.settings-modal > .primary-button { width: 100%; }
.online-modal { width: min(520px, calc(100% - 30px)); }.online-modal .primary-button { width: 100%; }.online-field { display: grid; gap: 5px; margin: 20px 0 12px; }.online-field span { color: #766c59; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }.online-field input, .join-row input { width: 100%; min-height: 44px; border: 1px solid #ccb98e; border-radius: 5px; background: rgba(255,255,255,.55); color: #173c2d; padding: 9px 12px; outline: none; }.online-field input:focus, .join-row input:focus { border-color: #9a762d; box-shadow: 0 0 0 3px rgba(154,118,45,.12); }.online-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; color: #8b806b; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.online-divider::before, .online-divider::after { content: ""; height: 1px; flex: 1; background: #d4c5a7; }.join-row { display: grid; grid-template-columns: 1fr 95px; gap: 8px; }.join-row input { text-align: center; text-transform: uppercase; letter-spacing: .28em; font-weight: 800; }.join-row .secondary-button { min-height: 44px; background: #173c2d; color: #fff8e9; }.room-code { border: 0; border-bottom: 1px dashed #a67e2c; background: none; color: #9a762d; padding: 0 3px; cursor: pointer; font: inherit; letter-spacing: .06em; }.online-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 12px; }.online-seat { display: flex; align-items: center; gap: 9px; min-height: 50px; border: 1px solid #d6c49f; border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,.32); }.online-seat i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #173c2d; color: #ecd89f; font: normal 14px var(--display); }.online-seat strong, .online-seat small { display: block; }.online-seat strong { font-size: 11px; color: #263d32; }.online-seat small { color: #849087; font-size: 8px; margin-top: 2px; }.online-seat.empty { opacity: .55; }.online-seat.empty i { background: #bdb39e; color: white; }.online-status { text-align: center; min-height: 21px; color: #7d755f !important; font-size: 10px !important; }.online-status.error { color: #984638 !important; }

@media (max-width: 980px) {
  .home-nav, .home-footer { width: calc(100% - 44px); }.hero { width: calc(100% - 60px); grid-template-columns: minmax(390px, 1fr) .85fr; }.hero-cards { transform: scale(.82); transform-origin: center; }.hero h1 { font-size: clamp(72px, 12vw, 106px); }
  .game-header { grid-template-columns: 180px 1fr 180px; }.stock-area { left: 72%; }.game-actions { right: 12px; }
}

@media (min-width: 721px) {
  .table-shell { grid-template-rows: minmax(0, 1fr) 210px; }
  .card-corner { top: 9px; left: 7px; }.card-corner.bottom { inset: auto 7px 9px auto; }.card-rank { font-size: 15px; }.card-suit-mini { width: 12px; height: 14px; }.card-center { inset: 23px 10px 21px; }.pip { width: 21px; height: 26px; }.pip-count-1 .pip { width: 46px; height: 55px; }
}

@media (max-width: 720px) {
  .home-screen::after { inset: 9px; }.home-nav { height: 70px; }.hero { width: calc(100% - 36px); display: block; padding: 28px 0 45px; }.hero-copy { text-align: center; }.eyebrow { justify-content: center; }.hero h1 { font-size: clamp(66px, 22vw, 102px); }.hero-subtitle { margin-left: 0; font-size: 9px; }.hero-description { margin-inline: auto; font-size: 15px; }.hero-cards { position: absolute; width: 330px; height: 400px; right: -145px; top: 100px; opacity: .22; transform: rotate(10deg); pointer-events: none; }.setup-card { padding-left: 0; margin-inline: auto; backdrop-filter: blur(5px); }.setting-row { text-align: left; }.setting-row:first-child { display: block; }.segmented { margin-top: 10px; width: 100%; }.segmented button { flex: 1; }.setting-row.compact { justify-content: center; gap: 22px; }.home-footer span { display: none; }.home-footer { justify-content: center; }
  .game-screen { --hand-card-w: 63px; --played-card-w: 50px; --trump-card-w: 50px; grid-template-rows: 58px minmax(0,1fr); }.game-screen[data-card-size="compacto"] { --hand-card-w: 55px; --played-card-w: 45px; --trump-card-w: 45px; }.game-screen[data-card-size="grande"] { --hand-card-w: 72px; --played-card-w: 57px; --trump-card-w: 55px; }.game-header { grid-template-columns: 40px 1fr 136px; padding: 0 5px; }.game-header > .header-button { display: grid; }.game-brand { display: none; }.header-actions { gap: 2px; }.header-button { width: 31px; height: 31px; }.header-button svg { width: 16px; }.scoreboard { gap: 5px; justify-self: center; }.team-score { min-width: 67px; }.team-score strong { font-size: 12px; }.team-score span { font-size: 6px; }.team-score small { font-size: 6px; }.score-divider { min-width: 43px; padding: 0 4px; }.score-divider span { font-size: 5px; }
  .table-shell { grid-template-rows: minmax(0,1fr) 168px; }.table { min-height: 410px; background-size: cover; }.table::after { inset: 11% 3%; }.north { top: 3%; }.west { left: 2%; }.east { right: 2%; }.player-meta { gap: 5px; }.avatar { width: 30px; height: 30px; }.player-meta strong { font-size: 11px; }.player-meta small { font-size: 6px; }.hidden-hand.horizontal { top: 34px; }.hidden-hand.vertical { top: 85px; }.mini-card-back { width: 24px; height: 36px; margin-left: -16px; }.vertical .mini-card-back { margin-top: -27px; }.table-status { top: 18%; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ai-insight { top: 25%; }.trick-area { width: 225px; height: 180px; }.played-card.player-0 { left: 88px; }.played-card.player-2 { left: 88px; }.played-card.player-1 { left: 13px; top: 60px; }.played-card.player-3 { right: 13px; top: 60px; }.stock-area { left: 76%; top: 66%; transform: translate(-50%,-50%) scale(.75); }.south { bottom: 1%; }
  .human-hand { min-width: 0; width: calc(100% - 10px); height: 136px; padding-right: 70px; }.playing-card { margin-left: -20px; }.human-hand .playing-card:first-child { margin-left: 0; }.game-actions { top: 12px; right: 7px; width: 78px; }.secondary-button { padding: 7px 5px; font-size: 7px; }.sing-actions button { font-size: 7px; padding: 5px; }.hand-dock { min-height: 168px; }.hand-reorder-hint { display: none; }.toast-region { bottom: 180px; }.modal-size-setting { display: block; }.modal-size-setting .segmented { margin-top: 10px; }.history-cards { gap: 7px; }
}

@media (max-height: 700px) and (min-width: 721px) {
  .game-screen { --hand-card-w: 66px; --played-card-w: 58px; --trump-card-w: 56px; grid-template-rows: 56px minmax(0,1fr); }.game-screen[data-card-size="compacto"] { --hand-card-w: 58px; --played-card-w: 50px; --trump-card-w: 49px; }.game-screen[data-card-size="grande"] { --hand-card-w: 76px; --played-card-w: 64px; --trump-card-w: 62px; }.table-shell { grid-template-rows: minmax(0,1fr) 145px; }.table { min-height: 400px; }.hand-dock { min-height: 145px; }.human-hand { height: 132px; }.game-actions { top: 9px; }.hero { padding-top: 10px; }.hero-cards { height: 540px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}