/* Sistema de diseño basado en los tokens de shadcn/ui (paleta zinc). */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --ring: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --success: 142 71% 40%;
  --warning: 38 92% 50%;
  --board: 240 4.8% 95.9%;
  --tile: 0 0% 100%;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 5.5%;
    --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
    --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%;
    --destructive: 0 72% 51%; --board: 240 6% 9%; --tile: 240 5% 13%;
    --shadow-sm: none; --shadow: 0 1px 3px 0 rgb(0 0 0 / .5); --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 5.5%;
  --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
  --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%;
  --destructive: 0 72% 51%; --board: 240 6% 9%; --tile: 240 5% 13%;
  --shadow-sm: none; --shadow: 0 1px 3px 0 rgb(0 0 0 / .5); --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / .6);
  color-scheme: dark;
}



* { box-sizing: border-box; border-color: hsl(var(--border)); -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.015em; }
.i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.fl { display: inline-block; width: 1.33em; height: 1em; border-radius: 3px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); flex: none; vertical-align: -.15em; }

/* ---------- componentes base (shadcn) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 40px; padding: 0 16px; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 500; font-size: 14px;
  cursor: pointer; transition: transform .1s, background-color .15s, opacity .15s; touch-action: manipulation;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn:focus-visible, .input:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.secondary { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.btn.outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); box-shadow: var(--shadow-sm); }
.btn.outline:hover, .btn.ghost:hover { background: hsl(var(--muted)); opacity: 1; }
.btn.ghost { background: transparent; color: hsl(var(--foreground)); }
.btn.destructive { background: hsl(var(--destructive)); color: #fff; }
.btn.success { background: hsl(var(--success)); color: #fff; }
.btn.lg { height: 46px; font-size: 15px; width: 100%; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.icon { width: 38px; height: 38px; padding: 0; }
.btn .i { width: 16px; height: 16px; }
.input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); outline: none; box-shadow: var(--shadow-sm);
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input.code { text-transform: uppercase; letter-spacing: .35em; font-weight: 600; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
select.input { padding-right: 8px; height: 34px; width: auto; }
.label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-h { padding: 16px 16px 0; display: flex; align-items: center; gap: 8px; }
.card-h h3 { font-size: 15px; font-weight: 600; }
.card-h .i { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
.card-c { padding: 14px 16px 16px; }
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 1px 8px; font-size: 11.5px; font-weight: 500; background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid transparent; white-space: nowrap; }
.badge .i { width: 12px; height: 12px; }
.badge.outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.badge.red { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.sep { display: flex; align-items: center; gap: 10px; color: hsl(var(--muted-foreground)); font-size: 12px; margin: 4px 0; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; box-shadow: 0 0 0 2px hsl(var(--background)); }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: hsl(var(--input)); border-radius: 99px; transition: background .2s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--background)); box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.3, 1.5, .6, 1); }
.switch input:checked + i { background: hsl(var(--primary)); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:disabled + i { opacity: .5; cursor: default; }

/* ---------- inicio ---------- */
.screen { min-height: 100%; }
.screen.enter > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.screen.enter > *:nth-child(2) { animation-delay: .05s; } .screen.enter > *:nth-child(3) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.corner-btn { position: fixed; top: 12px; right: 12px; z-index: 2; display: flex; gap: 4px; }
.home-box { max-width: 400px; margin: 0 auto; padding: 56px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.home-box > * { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.home-box > *:nth-child(2) { animation-delay: .06s; } .home-box > *:nth-child(3) { animation-delay: .12s; } .home-box > *:nth-child(4) { animation-delay: .18s; }
.logo { text-align: center; margin-bottom: 6px; }
.logo-mark { width: 56px; height: 56px; border-radius: 16px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: var(--shadow-lg); animation: wobble 2.6s ease-in-out 1 .6s; }
.logo-mark .i { width: 30px; height: 30px; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.05); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
.logo h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.logo p { margin: 4px 0 0; color: hsl(var(--muted-foreground)); }
.form { display: flex; flex-direction: column; gap: 12px; }
.join-row { display: flex; gap: 8px; }
.join-row .input { flex: 1; }
.room-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid hsl(var(--border)); }
.room-item:first-child { border-top: 0; padding-top: 0; }
.room-item .grow { flex: 1; min-width: 0; }
.howto summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; }
.howto summary::after { content: "+"; margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 18px; transition: transform .2s; }
.howto[open] summary::after { transform: rotate(45deg); }
.howto ol { margin: 0; padding: 0 16px 16px 34px; color: hsl(var(--muted-foreground)); display: grid; gap: 6px; }
.resume-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.resume-box span { flex: 1; }

/* ---------- lobby ---------- */
.topbar, .game-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.code-pill { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .15em; background: hsl(var(--muted)); border-radius: 8px; padding: 4px 10px; cursor: pointer; border: 0; }
.grow { flex: 1; min-width: 0; }
.lobby-grid { display: grid; gap: 12px; padding: 0 12px 12px; max-width: 1120px; margin: 0 auto; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; animation: rise .35s both; }
.pl-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 3px transparent; transition: transform .15s, box-shadow .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.sel { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px var(--c); }
.swatch:disabled { opacity: .18; cursor: not-allowed; transform: none; }
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.map-opt { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 10px 8px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; display: flex; flex-direction: column; gap: 6px; }
.map-opt:active { transform: scale(.98); }
.map-opt.sel { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.map-opt b { font-size: 13px; font-weight: 600; }
.map-opt span { font-size: 11px; color: hsl(var(--muted-foreground)); line-height: 1.3; }
.map-opt:disabled { cursor: default; }
.mini-board { width: 100%; aspect-ratio: 1; max-width: 54px; border-radius: 6px; border: 1.5px solid hsl(var(--border)); position: relative; background: hsl(var(--muted)); }
.mini-board::before { content: ""; position: absolute; inset: var(--in); border-radius: 3px; background: hsl(var(--background)); border: 1.5px solid hsl(var(--border)); }
.flags-row { display: flex; gap: 3px; flex-wrap: wrap; font-size: 9px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid hsl(var(--border)); }
.set-row > label:first-child, .set-row > .lbl { flex: 1; font-weight: 500; }
.set-row small { display: block; color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 400; }
.lobby-foot { position: sticky; bottom: 0; padding: 12px 12px calc(12px + var(--safe-b)); background: linear-gradient(transparent, hsl(var(--background)) 30%); max-width: 520px; margin: 0 auto; text-align: center; }
.lobby-foot p { margin: 6px 0 0; }
.chat-card { display: flex; flex-direction: column; min-height: 220px; }
.chat-list { flex: 1; overflow-y: auto; max-height: 260px; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.msg { display: flex; gap: 8px; align-items: flex-start; animation: rise .25s both; }
.msg div { min-width: 0; word-wrap: break-word; }
.msg b { font-weight: 600; font-size: 12.5px; display: block; }
.chat-form { display: flex; gap: 6px; margin-top: 10px; }

/* ---------- partida ---------- */
.game-grid { display: flex; flex-direction: column; height: 100dvh; }
.players-pane { flex: none; display: flex; flex-direction: column; }
.game-top { padding: 8px 10px 6px; }
/* Móvil: todos los jugadores a la vista en una cuadrícula, con el dinero bien grande. */
#players { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 6px; padding: 2px 10px 8px; }
.tokav { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); }
.tokav .i { width: 56%; height: 56%; }
.tokav.sm { width: 22px; height: 22px; }
.tokav.lg { width: 40px; height: 40px; }
.pcard { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 6px 8px 6px 6px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); position: relative; cursor: pointer; transition: box-shadow .25s, border-color .25s, background .25s, opacity .3s; }
.pcard.turn { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc); background: color-mix(in srgb, var(--pc) 13%, hsl(var(--card))); }
.pcard.turn .tokav { animation: pulse 1.4s ease-out 3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--pc); } 100% { box-shadow: 0 0 0 9px transparent; } }
.pcard.out { opacity: .45; filter: grayscale(1); }
.pcard .nm { font-size: 12.5px; font-weight: 500; min-width: 0; line-height: 1.25; display: flex; align-items: center; gap: 4px; color: hsl(var(--muted-foreground)); }
.pcard .nm .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .nm .you { flex: none; font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 99px; background: var(--pc); color: #fff; line-height: 15px; }
.pcard .nm .i { flex: none; width: 12px; height: 12px; }
.pcard .money { font-size: 16px; font-weight: 700; line-height: 1.2; color: hsl(var(--foreground)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#players.many { gap: 5px; }
#players.many .pcard { grid-template-columns: minmax(0, 1fr); padding: 5px 6px; row-gap: 1px; }
#players.many .tokav { display: none; }
#players.many .pcard { border-left: 4px solid var(--pc); }
#players.many .nm { font-size: 11.5px; }
#players.many .nm .i { display: none; }
#players.many .nm .you { font-size: 9px; padding: 0 4px; line-height: 13px; }
#players.many .money { font-size: 14px; }
.pcard .meta, .pcard .sets { display: none; }
.pcard .tokav { grid-row: span 2; }
.pop { position: absolute; right: 8px; top: -8px; font-size: 11.5px; font-weight: 700; pointer-events: none; animation: popUp 1.2s cubic-bezier(.2, .8, .2, 1) forwards; padding: 1px 7px; border-radius: 99px; color: #fff; z-index: 2; }
.pop.plus { background: hsl(var(--success)); } .pop.minus { background: hsl(var(--destructive)); }
@keyframes popUp { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.room-info { display: none; }

.board-wrap { flex: none; padding: 0 6px; overflow: auto; }
.board-wrap.zoom #board { width: 175%; max-width: none; }
#board {
  --tw: 30px;
  position: relative; display: grid; gap: 2px; width: 100%; max-width: calc(100dvh - 24px); aspect-ratio: 1; margin: 0 auto;
  background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 2px; overflow: hidden;
  font-size: clamp(6.5px, calc(var(--tw) * .19), 11px); contain: layout;
}
/* Casilla: la cara se maqueta siempre en vertical y se gira según el lado, como en un tablero real. */
.tile { position: relative; background: hsl(var(--tile)); cursor: pointer; min-width: 0; min-height: 0; container-type: size; border-radius: 3px; }
.tile:hover { z-index: 2; box-shadow: 0 0 0 2px hsl(var(--ring)); }
.face { position: absolute; left: 50%; top: 50%; width: 100cqw; height: 100cqh; transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; }
.s-1 .face { width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(90deg); }
.s-3 .face { width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(-90deg); }
.s-2 .face { flex-direction: column-reverse; }
.band { flex: none; height: 19%; background: var(--gc); position: relative; display: flex; align-items: center; justify-content: center; gap: 1px; }
.body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; padding: 0 2px; text-align: center; }
.body .fl { font-size: calc(var(--tw) * .3); }
.body .tic { width: calc(var(--tw) * .44); height: calc(var(--tw) * .44); color: hsl(var(--muted-foreground)); }
.body .tic.chance { color: #db2777; } .body .tic.chest { color: #d97706; } .body .tic.tax { color: hsl(var(--destructive)); }
.body .nm { line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; max-width: 100%; font-weight: 500; letter-spacing: -.01em; }
.price { flex: none; height: 21%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; transition: background .3s, color .3s; white-space: nowrap; overflow: hidden; }
.price:empty { display: none; }
/* Comprada: la casilla entera se tiñe del color del dueño y su ficha sustituye al precio. */
.tile.owned { background: color-mix(in srgb, var(--oc) 24%, hsl(var(--tile))); box-shadow: inset 0 0 0 1.5px var(--oc); }
.tile.owned .price { background: var(--oc); color: #fff; }
.tile.owned .price .i { width: auto; height: 82%; }
.tile.owned.s-1 .price .i { transform: rotate(-90deg); } .tile.owned.s-3 .price .i { transform: rotate(90deg); }
.tile.mort .body { opacity: .3; }
.tile.mort .price { background: repeating-linear-gradient(-45deg, var(--oc) 0 4px, color-mix(in srgb, var(--oc) 55%, transparent) 4px 7px); text-decoration: line-through; }
/* Construcciones: icono blanco con el número (×1…×4) o el hotel. */
.pc { flex: none; fill: currentColor; }
.bld { display: inline-flex; align-items: center; gap: .2em; font-weight: 700; line-height: 1; }
.band .bld { color: #fff; font-size: calc(var(--tw) * .2); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .4)); }
.band .pc { width: 1.15em; height: 1.15em; }
.band.grow .bld { animation: drop .45s cubic-bezier(.3, 1.6, .5, 1); }
.badge.pieces { padding: 1px 7px; }
.badge.pieces .pc { width: 12px; height: 12px; }
/* Móvil: la franja crece un poco al construir para que el número se lea. */
#board.compact .band:not([data-h="0"]):not(:empty) { height: 25%; }
#board.compact .price { height: 17%; }
#board.compact .band .bld { font-size: calc(var(--tw) * .27); }
#board.compact .band .bld.h b { display: none; }
@keyframes drop { from { transform: translateY(-160%) scale(1.4); opacity: 0; } }
.tile.corner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center; container-type: normal; }
.tile.corner .ic { width: calc(var(--tw) * .8); height: calc(var(--tw) * .8); border-radius: 28%; display: flex; align-items: center; justify-content: center; background: var(--cc); color: #fff; }
.tile.corner .ic .i { width: 56%; height: 56%; }
.tile.corner .nm { font-weight: 600; line-height: 1.1; }
/* Nombre corto: solo en las casillas pequeñas (móvil), donde el completo no cabe. */
.body .sn { font-size: calc(var(--tw) * .25); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; max-width: 100%; overflow: hidden; display: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; hyphens: manual; }
#board.compact .body .nm, #board.labels-off .body .nm, #board.compact .tile.corner .nm, #board.labels-off .tile.corner .nm { display: none; }
#board.compact .body .sn { display: -webkit-box; }
#board.labels-off .body .sn { display: none; }
#board.labels-on .tile.corner .nm { display: -webkit-box; }
#board.compact .body { gap: 1px; padding: 0 1px; }
#board.compact .body .fl { font-size: calc(var(--tw) * .3); }
#board.compact .body .tic { width: calc(var(--tw) * .5); height: calc(var(--tw) * .5); }
.tile.bought { animation: stamp .6s cubic-bezier(.3, 1.5, .5, 1); z-index: 3; }
@keyframes stamp { 0% { transform: scale(1); } 35% { transform: scale(1.3); box-shadow: 0 0 0 3px var(--oc), var(--shadow-lg); } 100% { transform: scale(1); } }
.burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: hsl(var(--success)); animation: burst 1.2s ease-out forwards; pointer-events: none; font-size: 1.3em; z-index: 4; text-shadow: 0 1px 0 hsl(var(--background)); }
@keyframes burst { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: translateY(-60%) scale(1); } }

/* Panel central de control */
.center { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; background: hsl(var(--background)); border-radius: 3px; }
.hud { width: 100%; max-width: 330px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.hud-top { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; }
.brand { font-weight: 700; font-size: 11px; letter-spacing: .32em; color: hsl(var(--muted-foreground)); }
.turn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 99px; background: hsl(var(--muted)); font-weight: 600; font-size: 13px; }
.turn-chip.swap { animation: pop .35s both; }
.dice-row { display: flex; align-items: center; gap: 12px; }
.dice { display: flex; gap: 10px; }
.die { width: 42px; height: 42px; background: #fff; border-radius: 10px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 7px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 3px 0 #d4d4d8, 0 6px 14px rgb(0 0 0 / .12); }
.die span { border-radius: 50%; margin: 1.5px; }
.die span.on { background: #18181b; }
.die.rolling { animation: tumble calc(.8s * var(--spd, 1)) cubic-bezier(.2, .7, .3, 1); }
.die.rolling + .die.rolling { animation-name: tumble2; }
@keyframes tumble { 0% { transform: translate(-30px, -40px) rotate(-200deg) scale(.7); } 45% { transform: translate(4px, 6px) rotate(20deg) scale(1.08); } 65% { transform: translate(0, -6px) rotate(-6deg); } 100% { transform: none; } }
@keyframes tumble2 { 0% { transform: translate(30px, -40px) rotate(220deg) scale(.7); } 45% { transform: translate(-4px, 6px) rotate(-20deg) scale(1.08); } 65% { transform: translate(0, -6px) rotate(6deg); } 100% { transform: none; } }
.die.double { box-shadow: 0 0 0 2px hsl(var(--warning)), 0 3px 0 #d4d4d8, 0 6px 14px rgb(0 0 0 / .12); }
.total { font-size: 22px; font-weight: 700; min-width: 28px; letter-spacing: -.02em; }
.total:empty { display: none; }
#status { font-size: 13.5px; font-weight: 500; color: hsl(var(--muted-foreground)); min-height: 20px; }
#status b { color: hsl(var(--foreground)); }
#status.swap { animation: rise .35s both; }
#offer { width: 100%; }
#offer:empty { display: none; }
.offer { width: 100%; border: 1px solid hsl(var(--border)); border-radius: 10px; overflow: hidden; text-align: left; animation: flipIn .45s cubic-bezier(.2, .9, .3, 1); background: hsl(var(--card)); }
.offer .ohead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #fff; font-weight: 600; background: var(--gc); }
.offer .ohead .fl { font-size: 18px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }
.offer .ohead .i { width: 18px; height: 18px; }
.offer .ohead .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer .orow { display: flex; justify-content: space-between; padding: 5px 10px; font-size: 12.5px; border-top: 1px solid hsl(var(--border)); }
.offer .orow b { font-variant-numeric: tabular-nums; }
.offer .high { font-size: 24px; font-weight: 700; text-align: center; padding: 6px; letter-spacing: -.02em; }
.offer .high.bump { animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.offer .lead { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--pc) 16%, transparent); border-left: 4px solid var(--pc); transition: background .3s; }
.offer .lead.none { --pc: hsl(var(--border)); }
.offer .lead .grow { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.offer .lead span { font-size: 12px; color: hsl(var(--muted-foreground)); }
.offer .lead b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer .lead .high { padding: 0; font-size: 26px; }
.offer .bids { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; font-size: 12px; border-top: 1px solid hsl(var(--border)); }
.offer .bid { display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--muted-foreground)); }
.offer .bid i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
@keyframes bump { 40% { transform: scale(1.2); color: hsl(var(--success)); } }
#actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
#actions:empty { display: none; }
#actions .btn { flex: 1 1 110px; animation: pop .3s cubic-bezier(.3, 1.4, .5, 1) both; }
#actions .btn:nth-child(2) { animation-delay: .04s; } #actions .btn:nth-child(3) { animation-delay: .08s; } #actions .btn:nth-child(4) { animation-delay: .12s; }
#actions .btn.main { flex-basis: 100%; height: 44px; font-size: 15px; }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(6px); } }
.timer { width: 100%; height: 3px; background: hsl(var(--muted)); border-radius: 99px; overflow: hidden; }
.timer i { display: block; height: 100%; background: hsl(var(--primary)); transform-origin: left; transform: scaleX(0); }
.lastev { font-size: 12px; color: hsl(var(--muted-foreground)); display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.lastev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lastev .i { width: 13px; height: 13px; }
#pot { font-size: 12px; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 5px; }
#pot:empty { display: none; }
/* Tablero pequeño (móvil): panel central compacto para que todo quepa sin desbordar. */
#board.compact .hud { gap: 6px; padding: 4px 8px; }
#board.compact .brand { display: none; }
#board.compact .hud-top { min-height: 0; }
#board.compact .turn-chip { font-size: 12px; padding: 2px 8px 2px 2px; }
#board.compact .die { width: 34px; height: 34px; padding: 5px; border-radius: 8px; }
#board.compact .total { font-size: 18px; }
#board.compact #status { font-size: 12.5px; min-height: 0; line-height: 1.3; }
#board.compact #actions .btn { height: 36px; font-size: 13.5px; padding: 0 10px; flex: 1 1 auto; }
#board.compact #actions .btn.main { flex-basis: auto; }
#board.compact .offer .ohead { padding: 6px 8px; }
#board.compact .offer .orow { padding: 3px 8px; font-size: 12px; }
#board.compact .offer .high { font-size: 20px; padding: 3px; }
#board.compact .offer .lead { padding: 5px 8px; gap: 8px; }
#board.compact .offer .lead .tokav { width: 28px; height: 28px; }
#board.compact .offer .lead b { font-size: 14px; }
#board.compact .offer .lead .high { font-size: 20px; }
#board.compact .offer .bids { padding: 4px 8px; font-size: 11px; }
#board.compact .lastev, #board.compact #pot { display: none; }

#tokens { position: absolute; inset: 0; pointer-events: none; }
.tok { position: absolute; left: 0; top: 0; width: var(--ts); height: var(--ts); margin: calc(var(--ts) / -2) 0 0 calc(var(--ts) / -2); transition: transform calc(.17s * var(--spd, 1)) cubic-bezier(.3, .7, .4, 1); will-change: transform; z-index: 5; }
.tok.jump { transition: transform calc(.6s * var(--spd, 1)) cubic-bezier(.5, -.4, .3, 1.4); }
.tok-b { width: 100%; height: 100%; border-radius: 50%; background: var(--pc); border: 2px solid #fff; box-shadow: 0 2px 5px rgb(0 0 0 / .35); display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
.tok-b > .i { width: 62%; height: 62%; }
.tok-b.hop { animation: hop calc(.17s * var(--spd, 1)) ease-out; }
@keyframes hop { 50% { transform: translateY(-55%) scale(1.12, .92); } 100% { transform: none; } }
.tok-b.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-25%); } 40%, 80% { transform: translateX(25%); } }
.tok.active { z-index: 6; }
.tok.active .tok-b { box-shadow: 0 0 0 2px var(--pc), 0 3px 8px rgb(0 0 0 / .4); }
.jailed { position: absolute; right: -30%; bottom: -30%; width: 60%; height: 60%; border-radius: 50%; background: #18181b; color: #fff; display: flex; align-items: center; justify-content: center; }
.jailed .i { width: 70%; height: 70%; }

/* Controles de personalización */
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 14px; }
.icon-opt { aspect-ratio: 1; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); display: flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--muted-foreground)); transition: transform .12s, border-color .15s, background .15s, color .15s; padding: 0; }
.icon-opt .i { width: 20px; height: 20px; }
.icon-opt:hover { transform: translateY(-1px); }
.icon-opt.sel { background: var(--pc); border-color: var(--pc); color: #fff; }
.icon-opt:disabled { opacity: .25; cursor: not-allowed; transform: none; }
.me-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: hsl(var(--muted)); margin-bottom: 14px; }
.me-card .input { background: hsl(var(--background)); }

.empty { text-align: center; padding: 24px 8px; color: hsl(var(--muted-foreground)); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.empty .i { width: 28px; height: 28px; opacity: .5; }

@keyframes flipIn { from { transform: perspective(600px) rotateX(-40deg) translateY(10px); opacity: 0; } }
.cardpop { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; pointer-events: none; perspective: 900px; }
.cardpop .gcard { width: min(280px, 80vw); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 18px; overflow: hidden; text-align: center; box-shadow: var(--shadow-lg), 0 30px 60px -20px rgb(0 0 0 / .4); animation: cardIn .6s cubic-bezier(.2, .9, .3, 1.1) both; }
.cardpop.out .gcard { animation: cardOut .35s ease-in forwards; }
.gcard .top { padding: 18px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .2em; font-size: 12px; }
.gcard .top .i { width: 34px; height: 34px; }
.gcard p { margin: 0; padding: 16px 18px 6px; font-size: 15px; font-weight: 500; }
.gcard .who { padding: 0 0 16px; font-size: 12px; color: hsl(var(--muted-foreground)); }
@keyframes cardIn { 0% { transform: translateY(60px) rotateY(180deg) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes cardOut { to { transform: translateY(-40px) scale(.85); opacity: 0; } }
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(380px, 92vw); pointer-events: none; }
.toast { background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px; box-shadow: var(--shadow-lg); animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.2); display: flex; gap: 10px; align-items: center; font-weight: 500; }
.toast .i { width: 16px; height: 16px; }
.toast.err .i { color: hsl(var(--destructive)); }
.toast.leaving { animation: toastOut .25s ease-in forwards; }
@keyframes toastIn { from { transform: translateY(-16px) scale(.96); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }
.conn { position: fixed; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); background: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 500; padding: 8px 16px; border-radius: 99px; z-index: 40; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.conn .i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 50% { transform: translateY(-12px) scale(1.06); } }
.confetti { position: fixed; top: -12px; width: 8px; height: 12px; border-radius: 2px; z-index: 25; pointer-events: none; animation: fall var(--d) cubic-bezier(.3, .6, .6, 1) forwards; }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: .8; } }
.rank { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.rank div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: hsl(var(--muted)); animation: rise .35s both; }

/* ---------- escritorio ---------- */
@media (min-width: 760px) {
  .lobby-grid { grid-template-columns: 1fr 1.2fr; }
  .chat-card { grid-column: 1 / -1; }
  .die { width: 52px; height: 52px; }
  #toasts { top: auto; bottom: 16px; left: auto; right: 16px; transform: none; }
}
@media (min-width: 1000px) {
  .lobby-grid { grid-template-columns: 1fr 1.3fr 1fr; }
  .chat-card { grid-column: auto; }
  .game-grid { flex-direction: row; }
  .players-pane { width: 280px; overflow-y: auto; border-right: 1px solid hsl(var(--border)); }
  #players { display: flex; flex-direction: column; padding: 4px 12px 12px; gap: 8px; }
  #players.many .pcard { grid-template-columns: auto 1fr auto; padding: 10px 12px; border-left-width: 1px; }
  #players.many .tokav { display: inline-flex; }
  #players.many .nm .i { display: inline-flex; }
  .pcard { border-radius: var(--radius); padding: 10px 12px; grid-template-columns: auto 1fr auto; row-gap: 4px; }
  .pcard .tokav { width: 36px; height: 36px; grid-row: span 2; }
  .pcard .nm { max-width: 130px; font-size: 13.5px; }
  .pcard .money, #players.many .money { grid-column: 3; grid-row: 1; font-size: 15px; text-align: right; }
  .pcard .nm, #players.many .nm { font-size: 13.5px; color: hsl(var(--foreground)); font-weight: 600; }
  .pcard .meta { display: block; grid-column: 2 / 4; font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.3; }
  .pcard .sets { display: flex; gap: 3px; grid-column: 1 / -1; flex-wrap: wrap; margin-top: 4px; }
  .pcard .sets:empty { display: none; }
  .pcard .sets i { width: 16px; height: 6px; border-radius: 2px; opacity: .28; }
  .pcard .sets i.full { opacity: 1; }
  .room-info { display: block; margin: auto 12px 12px; padding: 12px 14px; font-size: 12.5px; }
  .room-info div { display: flex; justify-content: space-between; padding: 3px 0; color: hsl(var(--muted-foreground)); }
  .room-info b { color: hsl(var(--foreground)); font-weight: 500; }
  .die { width: 50px; height: 50px; }
  .board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; min-width: 0; }
  #board { width: min(100%, calc(100dvh - 24px)); }
}

/* ---------- ahorro de batería ---------- */
body.saver *, body.saver *::before, body.saver *::after { animation: none !important; transition: none !important; }
body.saver .center::before { display: none; }

/* ================= Estilo de juego ================= */
/* Botones gruesos con relieve: se hunden al pulsarlos, como en un juego. */
#game .btn { font-weight: 700; border-radius: 12px; box-shadow: 0 3px 0 rgb(0 0 0 / .22); transition: transform .08s, box-shadow .08s, opacity .15s; }
#game .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(0 0 0 / .22); }
#game .btn.ghost { box-shadow: none; }
#game .btn.outline { box-shadow: 0 3px 0 hsl(var(--border)); }
.btn.success { box-shadow: 0 3px 0 #15803d; }
.btn.destructive, .btn.danger { background: #dc2626; color: #fff; }
#game .btn.destructive, #game .btn.danger { box-shadow: 0 3px 0 #991b1b; }
#actions .btn.main, #panel .btn.main { height: 50px; font-size: 16px; background: linear-gradient(180deg, #7c5cff, #5b3df5); color: #fff; box-shadow: 0 4px 0 #3b25b3, 0 8px 18px rgb(91 61 245 / .3); letter-spacing: .01em; }
#actions .btn.main.danger { background: linear-gradient(180deg, #ef4444, #dc2626); box-shadow: 0 4px 0 #991b1b, 0 8px 18px rgb(220 38 38 / .3); }
#actions .btn.main .i { width: 20px; height: 20px; }
#board.compact #actions .btn.main { height: 42px; font-size: 14.5px; }

/* Números rojos */
.neg { color: #dc2626 !important; }
.redbox { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px; border-radius: 12px; background: rgb(220 38 38 / .12); border: 1px solid rgb(220 38 38 / .4); color: hsl(var(--foreground)); animation: pop .35s both; }
.redbox > .i { width: 22px; height: 22px; color: #dc2626; flex: none; }
.redbox .grow { display: flex; flex-direction: column; line-height: 1.25; }
.redbox .grow span { font-size: 12px; color: hsl(var(--muted-foreground)); font-weight: 400; }
.redbox .num { font-size: 20px; color: #dc2626; }
#board.compact .redbox { padding: 5px 8px; gap: 6px; }
#board.compact .redbox .num { font-size: 16px; }
#board.compact .redbox .grow span { display: none; }



/* Fichas: más grandes y la tuya siempre localizable */
.tok-b { border-width: 2.5px; }
.tok.me { z-index: 7; }
.tok.me .tok-b { border-width: 3px; box-shadow: 0 0 0 2px var(--pc), 0 3px 8px rgb(0 0 0 / .45); }
.tok.me::before { content: "TÚ"; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -2px); font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; background: #fff; color: #18181b; box-shadow: 0 1px 3px rgb(0 0 0 / .3); pointer-events: none; }
.tok.me.active .tok-b::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pc); animation: halo 1.6s ease-out infinite; pointer-events: none; }
@keyframes halo { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.tok.found .tok-b { animation: found 1.2s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes found { 0%, 100% { transform: none; } 20% { transform: scale(1.9); } 45% { transform: scale(1.3); } 65% { transform: scale(1.7); } }
body.saver .tok.me.active .tok-b::after { display: none; }
.tok.me.low::before { bottom: auto; top: 100%; transform: translate(-50%, 2px); }
#game .btn.outline.quit { color: #dc2626; border-color: rgb(220 38 38 / .5); }

/* ================= Partida: una sola pantalla, sin pestañas ================= */
/* Móvil: jugadores arriba, tablero, actividad en el hueco que sobre y la barra con lo tuyo abajo. */
.game-grid { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.game-top { padding: 6px 10px 4px; }
.board-wrap { flex: 0 1 calc(100vw - 8px); min-height: 150px; container-type: size; display: flex; align-items: center; justify-content: center; padding: 0 4px; overflow: visible; }
#board { width: min(100cqw, 100cqh); max-width: none; margin: 0; }
.feed-pane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.feed-h { display: none; }
.feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 6px 14px 6px; cursor: pointer; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%); mask-image: linear-gradient(to bottom, transparent, #000 50%); }
.feed .empty { padding: 8px; font-size: 12px; flex-direction: row; justify-content: center; }
.feed .empty .i { width: 16px; height: 16px; }

/* Líneas de actividad y mensajes */
.fi { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); flex: none; animation: feedIn .4s cubic-bezier(.2, .9, .3, 1.25) both; }
.fi:last-child { color: hsl(var(--foreground)); }
.fic { flex: none; width: 20px; height: 20px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--kc); background: color-mix(in srgb, var(--kc) 17%, transparent); }
.fic .i { width: 12px; height: 12px; }
.ft { min-width: 0; padding-top: 1px; }
.pn { color: var(--pc); font-weight: 700; }
.fi.chat { align-items: flex-end; }
.tokav.xs { width: 20px; height: 20px; }
.fi.chat .bub { background: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 5px 10px 6px; border-radius: 14px 14px 14px 4px; max-width: 82%; overflow-wrap: anywhere; }
.fi.chat .bub b { display: block; font-size: 11px; color: var(--pc); }
.fi.chat.mine { flex-direction: row-reverse; }
.fi.chat.mine .bub { background: color-mix(in srgb, var(--pc) 22%, hsl(var(--muted))); border-radius: 14px 14px 4px 14px; }
@keyframes feedIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }

@keyframes wiggle { 15% { transform: rotate(-16deg) scale(1.12); } 35% { transform: rotate(12deg) scale(1.12); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(4deg); } }

/* Avisos: abajo, cerca del pulgar y de la actividad */
#toasts { top: auto; bottom: calc(58px + var(--safe-b)); }

/* Ordenador: jugadores y lo tuyo a la izquierda, tablero en el centro, actividad y chat a la derecha */
@media (min-width: 1000px) {
  .game-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "players board feed"; }
  .players-pane { grid-area: players; width: auto; min-height: 0; overflow-y: auto; border-right: 1px solid hsl(var(--border)); }
  .board-wrap { grid-area: board; flex: none; padding: 14px; min-height: 0; height: auto; }
  .feed-pane { grid-area: feed; border-left: 1px solid hsl(var(--border)); padding: 12px; min-height: 0; }
  .feed-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 2px 4px 10px; }
  .feed-h .i { width: 16px; height: 16px; }
  .feed { overflow-y: auto; justify-content: flex-start; -webkit-mask-image: none; mask-image: none; cursor: default; padding: 4px; gap: 7px; }
  .fi { font-size: 13px; }
  #feed-chat { display: flex; }
  #toasts { top: 16px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
}

/* ================= Efectos ================= */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.coin { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe0, #facc15 45%, #ca8a04 100%); box-shadow: 0 0 0 2px #a16207, 0 0 14px 3px rgb(250 204 21 / .55), 0 3px 6px rgb(0 0 0 / .35); }
.coin::after { content: "$"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 13px/1 Inter, system-ui, sans-serif; color: #854d0e; }
.spark { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.splash { position: absolute; left: 50%; top: 50%; z-index: 15; pointer-events: none; transform: translate(-50%, -50%); animation: splash 1.25s cubic-bezier(.2, .9, .3, 1) forwards; white-space: nowrap; }
.splash span { display: block; font-weight: 900; font-size: clamp(22px, 8vw, 46px); color: #fff; padding: 6px 20px 8px; border-radius: 18px; background: var(--sc); box-shadow: 0 6px 0 color-mix(in srgb, var(--sc) 55%, #000), 0 16px 34px rgb(0 0 0 / .4); letter-spacing: -.02em; transform: rotate(-4deg); text-shadow: 0 2px 0 rgb(0 0 0 / .2); }
.splash.small span { font-size: clamp(16px, 5.4vw, 30px); padding: 5px 14px 6px; }
.splash.big span { font-size: clamp(26px, 10vw, 58px); }
@keyframes splash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-14deg); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(3deg); } 28% { transform: translate(-50%, -50%) scale(.94) rotate(-1deg); } 38%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -85%) scale(.9); } }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 44; box-shadow: inset 0 0 100px 14px var(--fc); animation: flashFade .8s ease-out forwards; }
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }
.say { position: absolute; left: 6px; right: 6px; top: calc(100% + 8px); z-index: 25; background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 6px 10px; border-radius: 12px; box-shadow: var(--shadow-lg); pointer-events: none; animation: sayIn .45s cubic-bezier(.3, 1.7, .5, 1) both; overflow-wrap: anywhere; }
.say::before { content: ""; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.say.out { animation: sayOut .3s ease-in forwards; }
@keyframes sayIn { from { opacity: 0; transform: translateY(-8px) scale(.5); } }
@keyframes sayOut { to { opacity: 0; transform: translateY(-6px) scale(.9); } }
.pcard.crumble { animation: crumble 1s ease-in both; }
@keyframes crumble { 0% { transform: none; } 12% { transform: rotate(-4deg) scale(1.05); } 26% { transform: rotate(4deg); } 40% { transform: rotate(-2deg); } 100% { transform: scale(.94); filter: grayscale(1); opacity: .45; } }
.money.up, #dock-money.up { animation: moneyUp .8s ease-out; }
.money.down, #dock-money.down { animation: moneyDown .8s ease-out; }
@keyframes moneyUp { 0% { color: #16a34a; transform: scale(1.18); } 100% { transform: none; } }
@keyframes moneyDown { 0% { color: #dc2626; transform: scale(.92); } 100% { transform: none; } }
.money { display: inline-block; transform-origin: left center; }
#lobby-settings.flash-in { animation: flashIn .6s ease-out; }
@keyframes flashIn { 0% { background: color-mix(in srgb, #7c5cff 18%, transparent); } }

/* Cada toque se nota */
.tile { transition: transform .08s; }
.tile:active { transform: scale(.92); }
.pcard:active { transform: scale(.97); }
.tav:active, .tchip:active, .chip:active, .rule:active, .swatch:active, .icon-opt:active, .map-opt:active, .code-pill:active { transform: scale(.9); }
.logo-mark { cursor: pointer; }
.logo-mark.spin { animation: logoSpin .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes logoSpin { 50% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg); } }
.tokav.boing { animation: boing .55s cubic-bezier(.3, 1.9, .5, 1); }
@keyframes boing { 0% { transform: scale(.5) rotate(-20deg); } }

/* ================= Sala de espera ================= */
.mini-board { display: block; width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; border-radius: 8px; border: 0; background: hsl(var(--muted)); padding: 3px; color: hsl(var(--muted-foreground)); }
.map-opt .mini-board { max-width: 56px; }

/* Sala de espera más compacta */
.me-card { padding: 10px; margin-bottom: 10px; }
.lobby-grid .chat-card { min-height: 0; }
.lobby-grid .chat-list { max-height: 200px; min-height: 40px; }

/* ================= Escritorio y tableros medianos ================= */
/* Nombres cortos cuando la casilla es mediana (los completos se partirían a mitad de palabra). */
#board.short-names .body .nm { display: none; }
#board.short-names .body .sn { display: -webkit-box; font-size: inherit; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
#board.labels-off .body .sn { display: none; }
/* El centro del tablero crece con el tablero en pantallas grandes. */
#board:not(.compact) .hud { zoom: var(--hz, 1); }
/* Botón principal con estilo de juego también en portada y sala de espera. */
.btn.main { background: linear-gradient(180deg, #7c5cff, #5b3df5); color: #fff; font-weight: 700; border-radius: 12px; box-shadow: 0 4px 0 #3b25b3, 0 8px 18px rgb(91 61 245 / .28); transition: transform .08s, box-shadow .08s, opacity .15s; }
.btn.main:active { transform: translateY(2px); box-shadow: 0 2px 0 #3b25b3; }
.btn.main:disabled { opacity: .45; }
/* Aviso del atajo de teclado (solo con ratón). */
#actions .btn.main[data-key]::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  #actions .btn.main[data-key]::after { content: attr(data-key); display: inline-block; margin-left: 10px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; background: rgb(255 255 255 / .2); }
  .pcard:hover { border-color: hsl(var(--ring) / .5); }
}
@media (min-width: 1000px) {
  /* Columnas laterales que se adaptan: el tablero no se queda pequeño en portátiles de 1024 px. */
  .game-grid { grid-template-columns: clamp(232px, 21vw, 300px) minmax(0, 1fr) clamp(256px, 24vw, 380px); }
  .lobby-grid { align-items: start; }
  .home-box { padding-top: 72px; }
}
@media (min-width: 1000px) {
  /* Sala de espera: jugadores y chat a la izquierda, tu ficha en el centro y la partida a la derecha, sin huecos. */
  .lobby-grid { grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "players token game" "chat token game"; }
  .lobby-grid > :nth-child(1) { grid-area: players; }
  .lobby-grid > #my-token { grid-area: token; }
  .lobby-grid > :nth-child(3) { grid-area: game; }
  .lobby-grid > .chat-card { grid-area: chat; grid-column: auto; }
}

/* ================= Cero pestañas: todo pasa en el tablero ================= */
/* Interruptores siempre a la vista: sonido, tema y ahorro de batería. */
.tgl.on { color: #16a34a; background: rgb(22 163 74 / .12); }
.game-top { gap: 4px; }
.game-top .btn.icon { width: 36px; height: 36px; }
#btn-exit.armed { width: auto; padding: 0 12px; gap: 6px; background: #dc2626; color: #fff; font-weight: 700; font-size: 12.5px; animation: pop .25s both; }
#btn-exit.armed .i { width: 16px; height: 16px; }

/* Tarjetas de jugador: la tuya siempre marcada; la que miras, resaltada. */
.pcard.me { border-color: color-mix(in srgb, var(--pc) 60%, hsl(var(--border))); }
.pcard.spot { box-shadow: 0 0 0 2px var(--pc), 0 6px 16px color-mix(in srgb, var(--pc) 30%, transparent); }

/* El centro del tablero cambia según lo que pase. */
.hud { max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.hud::-webkit-scrollbar { display: none; }
#board:not(.compact) .hud { max-height: calc(100% / var(--hz, 1)); }
.tv { display: contents; }
#panel { width: 100%; }
#panel:empty { display: none; }
.hud[data-mode="trade"] .tv, .hud[data-mode="deal"] .tv, .hud[data-mode="win"] .tv, .hud[data-mode="inspect"] .tv, .hud[data-mode="spot"] .tv,
.hud[data-mode="trade"] .hud-top, .hud[data-mode="deal"] .hud-top, .hud[data-mode="win"] .hud-top, .hud[data-mode="inspect"] .hud-top, .hud[data-mode="spot"] .hud-top,
.hud[data-mode="trade"] .hud-trades, .hud[data-mode="deal"] .hud-trades, .hud[data-mode="win"] .hud-trades, .hud[data-mode="inspect"] .hud-trades, .hud[data-mode="spot"] .hud-trades,
.hud[data-mode="trade"] #actions, .hud[data-mode="deal"] #actions, .hud[data-mode="win"] #actions, .hud[data-mode="win"] .timer,
.hud[data-mode="trade"] #pot, .hud[data-mode="deal"] #pot, .hud[data-mode="win"] #pot, .hud[data-mode="inspect"] #pot, .hud[data-mode="spot"] #pot { display: none; }
.hud[data-mode="inspect"] #actions .btn:not(.main), .hud[data-mode="spot"] #actions .btn:not(.main) { display: none; }
.hud.swap > *:not(.tv), .hud.swap .tv > * { animation: stageIn .32s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes stageIn { from { opacity: 0; transform: scale(.94) translateY(6px); } }
#panel > div { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
#panel > div.flip { animation: flipIn .35s cubic-bezier(.2, .9, .3, 1); }
.ph { display: flex; align-items: center; gap: 7px; width: 100%; font-size: 13px; min-width: 0; }
.ph > .i { width: 16px; height: 16px; flex: none; color: #3b82f6; }
.ph b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pclose { margin-left: auto; flex: none; min-width: 30px; height: 30px; border-radius: 10px; border: 0; background: hsl(var(--muted)); color: hsl(var(--foreground)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; font-weight: 700; font-size: 12px; padding: 0 9px; }
.pclose .i { width: 15px; height: 15px; }
.pclose:active { transform: scale(.9); }
.hint { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); }
.hint .i { width: 15px; height: 15px; color: #16a34a; flex: none; }
.plus-ic { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff; align-items: center; justify-content: center; vertical-align: -4px; }
.plus-ic .i { width: 12px; height: 12px; stroke-width: 3; }

/* Ficha de propiedad */
.pp { border-radius: 14px; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); gap: 0 !important; }
.pph { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--gc); color: #fff; font-weight: 700; font-size: 14px; }
.pph .fl { font-size: 17px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }
.pph > .i { width: 17px; height: 17px; }
.pph .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pph .pclose { background: rgb(0 0 0 / .2); color: #fff; }
.ppo { display: flex; align-items: center; gap: 6px; padding: 8px 12px 2px; font-size: 13px; flex-wrap: wrap; }
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px 10px; }
.rgrid div { display: flex; flex-direction: column; align-items: center; padding: 3px 2px 4px; border-radius: 8px; background: hsl(var(--muted)); line-height: 1.15; min-width: 0; }
.rgrid span { font-size: 10.5px; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rgrid .pc { width: 10px; height: 10px; }
.rgrid b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rgrid .cur { background: color-mix(in srgb, var(--gc) 24%, hsl(var(--muted))); box-shadow: inset 0 0 0 1.5px var(--gc); }
.rgrid .cur span { color: hsl(var(--foreground)); }
.ppf { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px 8px; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.ppa { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.ppa .btn { flex: 1 1 auto; height: 34px; font-size: 12.5px; padding: 0 10px; }
.ip { padding: 10px; border-radius: 14px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.ipi { width: 26px; height: 26px; border-radius: 8px; background: var(--cc); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ipi .i { width: 15px; height: 15px; }
.ip p { margin: 0; font-size: 12.5px; color: hsl(var(--muted-foreground)); }

/* Lo de un jugador */
.spp { padding: 10px; border-radius: 14px; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 10%, hsl(var(--card))); }
.spm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.spm div { display: flex; flex-direction: column; align-items: center; background: hsl(var(--background)); border-radius: 10px; padding: 4px 2px; min-width: 0; }
.spm span { font-size: 10.5px; color: hsl(var(--muted-foreground)); }
.spm b { font-size: 14px; white-space: nowrap; }
.spsets { display: flex; flex-wrap: wrap; gap: 4px; }
.spsets span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 4px; border-radius: 7px; background: hsl(var(--background)); font-size: 11px; font-weight: 700; border-left: 4px solid var(--gc); }
.spsets span .i { width: 12px; height: 12px; }
.spsets span.full { background: color-mix(in srgb, var(--gc) 26%, hsl(var(--background))); }
.spsets span.full .i:last-child { color: #f59e0b; }
.spsets .fl { font-size: 11px; }

/* Tratos: preparar, recibir y ver */
.tpick { display: flex; gap: 3px; flex-wrap: wrap; }
.tav { border: 0; padding: 2px; border-radius: 50%; background: transparent; cursor: pointer; opacity: .45; transition: opacity .15s, transform .15s, box-shadow .15s; display: inline-flex; }
.tav.on { opacity: 1; box-shadow: 0 0 0 2px var(--pc); transform: scale(1.06); }
.tsides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; align-items: stretch; }
.tside { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 10%, hsl(var(--card))); border: 2px solid color-mix(in srgb, var(--pc) 35%, transparent); transition: border-color .2s; }
.tside.has { border-color: var(--pc); }
.tsh { display: flex; align-items: center; gap: 5px; font-size: 11.5px; min-width: 0; }
.tsh b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tswap { display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); }
.tswap .i { width: 15px; height: 15px; }
.tmoney { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 3px; align-items: center; }
.tstep { height: 30px; border-radius: 9px; border: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 0 hsl(var(--border)); touch-action: none; user-select: none; -webkit-user-select: none; padding: 0; }
.tstep .i { width: 15px; height: 15px; stroke-width: 2.6; }
.tstep:active { transform: translateY(1px); box-shadow: none; }
.tamt-w { position: relative; display: flex; align-items: center; height: 30px; border-radius: 9px; background: hsl(var(--background)); padding: 0 4px; min-width: 0; margin: 0; }
.tamt-w span { font-weight: 800; color: #16a34a; font-size: 13px; }
.tamt { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; text-align: center; font-weight: 800; font-size: 14px; padding: 0; outline: none; color: hsl(var(--foreground)); }
.tchips { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.tside .tchips { min-height: 22px; }
.tchip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; height: 22px; padding: 0 6px 0 4px; border-radius: 7px; border: 0; border-left: 3px solid var(--gc, hsl(var(--border))); background: hsl(var(--background)); font: inherit; font-size: 10.5px; font-weight: 700; color: hsl(var(--foreground)); cursor: pointer; animation: pop .25s both; white-space: nowrap; line-height: 1; }
.tchip > span { overflow: hidden; text-overflow: ellipsis; }
.tchip .i { width: 11px; height: 11px; flex: none; }
.tchip .fl { font-size: 10px; }
.tchip.money { --gc: #16a34a; color: #16a34a; }
.tchip.none { color: hsl(var(--muted-foreground)); font-weight: 500; }
.tchip.card { border-left-color: #f59e0b; opacity: .6; }
.tchip.card.on { opacity: 1; background: rgb(245 158 11 / .16); }
span.tchip { cursor: default; }
.tbal { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; }
.tbal i { flex: 1 1 0; background: var(--pc); transition: flex-grow .35s cubic-bezier(.3, 1.4, .5, 1); min-width: 4px; }
.tbal.empty i { opacity: .25; }
.thint { margin: 0; font-size: 11.5px; color: hsl(var(--muted-foreground)); text-align: center; }
.thint b { color: hsl(var(--foreground)); }
#panel .btn.main { width: 100%; height: 42px; font-size: 14.5px; }
#panel .btn.main .i { width: 18px; height: 18px; }
.dbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dbtns .btn { height: 40px; }
.dp .btn.ghost, .dp .btn.outline.sm { align-self: center; }
.dstat { margin: 0; text-align: center; font-weight: 700; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.dstat.st-done { color: #16a34a; }
.dstat.st-rejected { color: #dc2626; }
.hud-trades { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hud-trades:empty { display: none; }
.htr { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 3px; border-radius: 99px; border: 1.5px solid var(--pc); background: color-mix(in srgb, var(--pc) 14%, hsl(var(--background))); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: hsl(var(--foreground)); animation: pop .3s both; }
.htr.in { animation: pop .3s both, wiggle .65s .35s 2; }
.htr:active { transform: scale(.92); }

/* Final de la partida, en el centro */
.wp { align-items: center; text-align: center !important; }
.wp .trophy { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: hsl(var(--warning) / .15); color: hsl(var(--warning)); animation: bounce .9s cubic-bezier(.3, 1.6, .5, 1) 3; }
.wp .trophy .i { width: 30px; height: 30px; }
.wt { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.wp .rank { width: 100%; margin: 0; gap: 4px; }
.wp .rank div { padding: 5px 8px; font-size: 12.5px; }

/* Casillas según el modo: lo que puedes tocar brilla y el resto se apaga. */
.tile { transition: transform .08s, opacity .2s; }
#board.dimming .tile:not(.pick):not(.picked):not(.can):not(.spot):not(.sel) { opacity: .28; }
.tile.pick { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 75%, transparent); }
.tile.pick.other { opacity: .62; }
.tile.picked { z-index: 4; box-shadow: 0 0 0 2.5px var(--mc), 0 4px 12px rgb(0 0 0 / .35); transform: scale(1.06); }
.tile.can { z-index: 3; box-shadow: 0 0 0 2px var(--mc); }
.tile.spot { z-index: 3; box-shadow: 0 0 0 2px var(--mc), 0 0 14px 2px color-mix(in srgb, var(--mc) 55%, transparent); }
.tile.sel { z-index: 4; box-shadow: 0 0 0 2.5px hsl(var(--foreground)), var(--shadow-lg); }
.tb { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); min-width: 20px; height: 20px; padding: 0 4px; border-radius: 99px; background: var(--mc); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgb(0 0 0 / .35); pointer-events: none; animation: tbIn .35s cubic-bezier(.3, 1.7, .5, 1) both; white-space: nowrap; letter-spacing: -.02em; }
.tb .i { width: 13px; height: 13px; stroke-width: 3; }
.tile.can .tb { animation: tbIn .35s cubic-bezier(.3, 1.7, .5, 1) both, tbBob 1.2s .4s ease-in-out 3; }
@keyframes tbIn { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes tbBob { 50% { transform: translate(-50%, -62%) scale(1.08); } }
#board.compact .tb { min-width: 18px; height: 18px; font-size: 9px; padding: 0 3px; }

/* Actividad con el chat siempre a mano */
.feed { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; cursor: default; padding: 6px 12px; gap: 4px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.feed > :first-child { margin-top: auto; }
#feed-chat { display: flex; flex: none; padding: 4px 10px calc(6px + var(--safe-b)); margin: 0; }
#feed-chat .input { height: 38px; }
#feed-chat .btn.icon { width: 38px; height: 38px; flex: none; }
.fi.ftr { flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 8px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); cursor: pointer; transition: transform .1s; }
.fi.ftr:active { transform: scale(.98); }
.ftr-h { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.ftr-h > .i { width: 14px; height: 14px; color: #3b82f6; flex: none; }
.ftr-h .ft { min-width: 0; padding: 0; }
.ftr-st { flex: none; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.st-open .ftr-st { background: rgb(245 158 11 / .16); color: #d97706; }
.fi.st-done { border-color: rgb(22 163 74 / .45); }
.st-done .ftr-st { background: rgb(22 163 74 / .15); color: #16a34a; }
.st-rejected .ftr-st { background: rgb(220 38 38 / .13); color: #dc2626; }
.fi.st-withdrawn, .fi.st-void, .fi.st-countered { opacity: .62; }
.ftr-b { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; align-items: center; }
.ftr-s { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.ftr .tchip { background: hsl(var(--muted)); animation: none; }

/* Sala de espera: los ajustes a la vista, sin hojas aparte */
.map-desc { margin: 2px 0 6px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.srow { display: flex; flex-direction: column; gap: 7px; padding: 11px 0 2px; border-top: 1px solid hsl(var(--border)); margin-top: 10px; }
.slbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.slbl .i { width: 14px; height: 14px; }
.chips, .rules { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 99px; border: 1.5px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
.chip.on { background: linear-gradient(180deg, #7c5cff, #5b3df5); border-color: transparent; color: #fff; box-shadow: 0 3px 0 #3b25b3; }
.chip:disabled { cursor: default; }
.chip:disabled:not(.on) { opacity: .35; }
.rule { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border-radius: 99px; border: 1.5px dashed hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .1s, background .15s; }
.rule .i { width: 13px; height: 13px; }
.rule.on { border-style: solid; border-color: rgb(22 163 74 / .5); background: rgb(22 163 74 / .12); color: hsl(var(--foreground)); }
.rule.on .i { color: #16a34a; }
.rule:disabled { cursor: default; }
#lobby-settings.ro .chip:not(.on), #lobby-settings.ro .rule:not(.on), #lobby-settings.ro .map-opt:not(.sel) { display: none; }
#lobby-settings.ro .maps { grid-template-columns: minmax(0, 200px); }
#lobby-settings .flags-row { margin-bottom: 2px; }
/* Invitados: solo lo elegido, en filas compactas. */
#lobby-settings.ro .srow { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; margin-top: 8px; }
#lobby-settings.ro .srow:last-of-type { flex-direction: column; align-items: flex-start; }
#lobby-settings.ro .chip { height: 28px; font-size: 12.5px; }
.spp .btn.outline { height: 38px; }

/* Efectos nuevos */
.ripple { position: absolute; border-radius: 50%; border: 3px solid var(--rc); pointer-events: none; }
#actions .btn.main.nudge { animation: nudge .7s cubic-bezier(.3, 1.5, .5, 1) 2; }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-5px) scale(1.04); } 60% { transform: translateY(1px) scale(.99); } }
#actions .btn.armed { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; box-shadow: 0 3px 0 #991b1b !important; animation: wiggle .5s; }
.timer.hurry i { background: #dc2626; }
.timer.hurry { animation: hurry .5s ease-in-out 20 alternate; }
@keyframes hurry { to { opacity: .4; } }
.turn-chip { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc, transparent) 60%, transparent); }

/* Ordenador */
@media (min-width: 1000px) {
  .feed { -webkit-mask-image: none; mask-image: none; padding: 4px; gap: 7px; }
  .feed > :first-child { margin-top: 0; }
  #feed-chat { padding: 8px 0 0; }
  .game-top .btn.icon { width: 32px; height: 32px; }
  .game-top .code-pill { padding: 4px 8px; letter-spacing: .1em; }
  .rgrid b { font-size: 14px; }
}

/* ================= Sensaciones: más rebote, más vida ================= */
/* Todo lo que se pulsa se hunde rápido y vuelve con un pequeño rebote, como un botón de verdad. */
#game .btn, .btn.main, .chip, .rule, .htr, .tchip, .tav, .pclose, .tstep, .tgl, .swatch, .icon-opt, .map-opt, .code-pill {
  transition: transform .34s cubic-bezier(.3, 1.8, .5, 1), box-shadow .12s, opacity .15s, background-color .15s, border-color .15s;
}
.tile { transition: transform .34s cubic-bezier(.3, 1.8, .5, 1), opacity .2s; }
.pcard { transition: transform .34s cubic-bezier(.3, 1.8, .5, 1), box-shadow .25s, border-color .25s, background .25s, opacity .3s; }
#game .btn:active, .btn.main:active, .chip:active, .rule:active, .htr:active, .tchip:active, .tav:active, .pclose:active, .tstep:active, .tgl:active,
.swatch:active, .icon-opt:active, .map-opt:active, .code-pill:active, .tile:active, .pcard:active { transition-duration: .05s; }
@media (hover: hover) and (pointer: fine) {
  #game .btn:not(:disabled):hover, .chip:not(:disabled):hover, .rule:not(:disabled):hover, .htr:hover { transform: translateY(-1px); }
  .tile:not(.picked):hover { transform: scale(1.04); }
}
/* Ficha: se agacha antes de saltar, se estira en el aire y se aplasta al caer. */
@keyframes hop { 0% { transform: translateY(0) scale(1.14, .84); } 40% { transform: translateY(-62%) scale(.9, 1.12); } 75% { transform: translateY(-14%) scale(1.02, .98); } 100% { transform: none; } }
.tok-b.land { animation: tokLand .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes tokLand { 0% { transform: scale(1.32, .7); } 35% { transform: scale(.88, 1.15); } 65% { transform: scale(1.06, .95); } 100% { transform: none; } }
.tok.me.active .tok-b::after { animation-iteration-count: 6; }
/* Dados: al pararse, rebotan. */
.die.settle { animation: settle .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes settle { 0% { transform: translateY(-5px) rotate(-4deg); } 30% { transform: scale(1.16, .86); } 60% { transform: scale(.95, 1.05); } 100% { transform: none; } }
/* Comprar: la casilla salta como un sello de goma. */
.tile.bought { animation: stamp .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes stamp { 0% { transform: none; } 22% { transform: scale(1.34) rotate(-4deg); box-shadow: 0 0 0 3px var(--oc), var(--shadow-lg); } 45% { transform: scale(.92) rotate(2deg); } 68% { transform: scale(1.06) rotate(-1deg); } 100% { transform: none; } }
/* La casa cae del cielo y se aplasta un poco al llegar. */
.band.grow .bld { animation: drop .55s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes drop { 0% { transform: translateY(-180%) scale(1.3); opacity: 0; } 55% { transform: none; opacity: 1; } 70% { transform: scale(1.25, .75); } 85% { transform: scale(.92, 1.1); } 100% { transform: none; } }
/* El botón del turno brilla al aparecer. */
#actions .btn.main.ready { animation: pop .3s cubic-bezier(.3, 1.4, .5, 1) both, ready 1.3s .3s ease-in-out 3; }
@keyframes ready { 50% { box-shadow: 0 4px 0 #3b25b3, 0 0 0 6px rgb(124 92 255 / .3), 0 10px 28px rgb(91 61 245 / .55); } }
/* Reacciones con emoji sobre las tarjetas de jugador. */
.emote { position: absolute; left: calc(50% + var(--ex, 0px)); top: -6px; z-index: 6; font-size: 24px; line-height: 1; pointer-events: none; transform: translate(-50%, 0); animation: emote 1.5s cubic-bezier(.2, .8, .3, 1) forwards; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
@keyframes emote { 0% { transform: translate(-50%, 10px) scale(0) rotate(-20deg); opacity: 0; } 18% { transform: translate(-50%, -6px) scale(1.35) rotate(8deg); opacity: 1; } 32% { transform: translate(-50%, -2px) scale(1) rotate(-4deg); } 75% { opacity: 1; } 100% { transform: translate(-50%, -26px) scale(.9); opacity: 0; } }