@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');
/* World Avenue — estilos. Viaje por el mundo: azul noche de aeropuerto, tablero claro de papel con la paleta de cada
   ciudad, colores vivos de FizzPlays. Disposición: body.port (vertical) · body.land (horizontal) · body.desk (ordenador) ·
   body.short (horizontal bajo) · body.tiny (vertical bajo, p. ej. 390×664 con las barras de Safari). */
:root {
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  --bg: #0f2a4a; --bg2: #133559; --panel: #163d66; --panel2: #1d4c7e; --line: rgba(160, 210, 255, .2); --line2: rgba(255, 255, 255, .1);
  --text: #f4f9ff; --muted: #b8d0ea; --dim: #8aa6c4; --gold: #ffc93c; --gold2: #ffe08a; --gold3: #a8740f;
  --coral: #ff6b5a; --teal: #1fc7b6; --red: #ff5a4f; --green: #3ed58a; --sky: #4fb3ff; --ink: #1d2433;
  --r: 14px; --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --title: 'Fredoka', 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--ui); font-weight: 700; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(120% 80% at 50% 0%, #1f5a92 0%, #143d68 45%, #0f2a4a 100%) fixed; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#app { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
button { font: inherit; color: inherit; }
svg { display: block; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.clip-ok { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.howto-src, noscript .noscript { display: none; }
#loader { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity .4s; }
#loader.out { opacity: 0; pointer-events: none; }
.loader-mask { width: 64px; height: 64px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .15); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--gold); animation: spin .9s linear infinite; vertical-align: -3px; margin-right: 6px; }

/* ---------------- botones ---------------- */
.btn { --b1: #2d6aa8; --b2: #1f5088; --bt: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--b1), var(--b2)); color: var(--bt); font-weight: 800; font-size: 1rem; line-height: 1.1; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s, filter .15s; text-align: left; text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; filter: saturate(.4); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn span { display: flex; flex-direction: column; min-width: 0; }
.btn small { font-size: .76rem; font-weight: 700; opacity: .88; margin-top: 2px; }
.btn.gold { --b1: #ffd75a; --b2: #f4a52a; --bt: #3b2304; box-shadow: 0 4px 0 #9a5f0c, inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.sky { --b1: #5cc2ff; --b2: #2f86e0; }
.btn.red { --b1: #ff7268; --b2: #d93c33; }
.btn.mint { --b1: #5fe3b0; --b2: #1fa874; --bt: #062c1d; }
.btn.ghost { --b1: rgba(255, 255, 255, .1); --b2: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.btn.big { min-height: 56px; font-size: 1.1rem; padding: 10px 20px; }
.btn.small { min-height: 44px; font-size: .92rem; padding: 6px 12px; }
.ib { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); color: var(--text); cursor: pointer; }
.ib svg { width: 22px; height: 22px; }
.ib:active { transform: scale(.94); }
.row { display: flex; gap: 8px; align-items: center; }
.row > .btn { flex: 1; }
.col { display: flex; flex-direction: column; gap: 10px; }
.sub { color: var(--muted); font-weight: 700; margin: 4px 0; }
.sub.small { font-size: .85rem; }
.sub.big { font-size: 1.1rem; color: var(--text); }
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; } .ic svg { width: 100%; height: 100%; }
.tk { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px var(--ink), 0 2px 3px rgba(0, 0, 0, .35); vertical-align: middle; }
.tk svg { width: 66%; height: 66%; }
.tk.xs { width: 20px; height: 20px; } .tk.lg { width: 52px; height: 52px; }

/* ---------------- pantallas ---------------- */
#screens { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) calc(12px + var(--safe-b)) calc(14px + var(--safe-l)); pointer-events: auto; animation: fade .25s both; }
.screen.out { animation: fadeout .2s both; pointer-events: none; }
.screen.ov { background: rgba(6, 18, 36, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 2; }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
.card { position: relative; width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: var(--shadow), inset 0 0 0 2px var(--line); animation: pop .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.card h2 { margin: 0 0 12px; font-family: var(--title); font-weight: 700; font-size: 1.6rem; text-align: center; color: var(--gold2); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.card .col .btn, .card > .btn { width: 100%; }

/* portada */
.title-screen { justify-content: flex-start; gap: 8px; overflow: hidden; }
.title-bg { position: absolute; inset: -4%; background: center / cover; filter: blur(14px) saturate(1.2) brightness(.55); transform: scale(1.06); z-index: 0; transition: background-image .4s; }
.title-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 60, .25), rgba(10, 30, 60, .7)); z-index: 0; pointer-events: none; }
.tt-a { position: relative; z-index: 2; width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 44px; }
.logo { text-align: center; }
.logo-mark { width: 40px; height: 40px; margin: 0 auto -4px; color: var(--gold); filter: drop-shadow(0 3px 0 #7a4a08); }
.logo-mark svg { width: 100%; height: 100%; }
.logo .lg { margin: 0; font-family: var(--title); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; color: #fff; text-shadow: 0 3px 0 #1c4f86, 0 6px 22px rgba(0, 0, 0, .55); letter-spacing: .01em; }
.logo .lg::first-letter { color: var(--gold); }
.logo p { margin: 4px 0 0; color: #e3f0ff; font-size: .98rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.city-pick { width: 100%; padding: 8px; border-radius: 18px; background: rgba(8, 26, 50, .55); box-shadow: inset 0 0 0 1.5px var(--line); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 6px; font-size: .86rem; color: var(--muted); }
.cp-h b { color: #fff; font-size: 1.05rem; font-family: var(--title); font-weight: 600; }
.cp-motto { margin: 6px 4px 0; text-align: center; font-size: .9rem; color: var(--gold2); font-style: italic; min-height: 1.2em; }
.city-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.cg { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--cm); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); min-height: 44px; }
.cg-art { position: absolute; inset: 0; background: center / cover; transition: transform .25s; }
.cg-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 2px 3px; font-size: .68rem; line-height: 1.05; color: #fff; text-align: center; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8) 45%); overflow-wrap: normal; word-break: normal; hyphens: manual; }
.cg.on { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255, 201, 60, .6); }
.cg.on .cg-art { transform: scale(1.08); }
.cg:active { transform: scale(.96); }
.title-bottom { position: relative; z-index: 2; width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.title-bottom > .btn { width: 100%; }
.title-bottom .row.two > .btn { flex: 1 1 0; min-width: 0; }
.title-bottom .row.icons { justify-content: center; }
.join-row { display: flex; gap: 8px; }
.join-row .code { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 0; padding: 0 12px; font: 800 1.1rem var(--ui); letter-spacing: .3em; text-transform: uppercase; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.join-row .code::placeholder { color: rgba(255, 255, 255, .5); letter-spacing: .2em; }
.nick-chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; max-width: 170px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); cursor: pointer; }
.nick-chip svg { width: 18px; height: 18px; flex: none; }
.online-count { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }
.online-count:empty { display: none; }
.online-count .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 8px var(--green); }
.portal-link { position: absolute; z-index: 3; left: calc(10px + var(--safe-l)); top: calc(8px + var(--safe-t)); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 99px; background: rgba(8, 26, 50, .6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); color: var(--text); text-decoration: none; font-size: .9rem; }
.portal-link svg { width: 28px; height: 28px; }
body.land .title-screen { flex-direction: row; align-items: center; justify-content: center; gap: 3vw; }
body.land .tt-a { width: min(520px, 54%); margin-top: 0; }
body.land .title-bottom { width: min(400px, 42%); margin-top: 0; }
body.land.short .tt-a { gap: 4px; } body.land.short .logo-mark { display: none; } body.land.short .logo .lg { font-size: 1.9rem; } body.land.short .logo p { display: none; }
body.land.short .cg { aspect-ratio: 1.7; } body.land.short .cp-motto { display: none; } body.land.short .city-pick { padding: 6px; }
body.land.short .title-bottom { gap: 6px; } body.land.short .title-bottom .btn.big { min-height: 48px; padding: 6px 14px; } body.land.short .title-bottom .btn small { display: none; }
body.land.short .portal-link { top: auto; bottom: calc(6px + var(--safe-b)); }
body.desk .logo .lg { font-size: 3.6rem; }

/* hojas (ui.js): fijas a la ventana y siempre a la vista */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.sheet-wrap.modal { pointer-events: auto; background: rgba(4, 14, 30, .5); animation: fade .2s both; }
.sheet-wrap.out, .sheet-wrap.out .sheet { animation: fadeout .2s both; pointer-events: none; }
.sheet { pointer-events: auto; display: flex; flex-direction: column; width: min(500px, 100%); max-height: 90%; overflow: hidden; border-radius: 22px 22px 0 0; padding: 12px 14px max(calc(14px + var(--safe-b)), calc(var(--cookie-b, 0px) + 8px)); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45), inset 0 0 0 2px var(--line); animation: up .25s cubic-bezier(.2, .9, .3, 1.05) both; overscroll-behavior: contain; }
body.land .sheet-wrap { align-items: center; padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); }
body.land .sheet { border-radius: 22px; max-height: 100%; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet header { flex: none; position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; margin: -12px -14px 8px; padding: 12px 14px 0; background: var(--panel2); border-radius: 22px 22px 0 0; }
.sheet header h3 { flex: 1; min-width: 0; margin: 0; font-family: var(--title); font-weight: 600; font-size: 1.25rem; color: var(--gold2); overflow-wrap: anywhere; }
.sheet-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 2px; }
.sheet-body > .btn { align-self: stretch; }
.opts { display: grid; gap: 8px; }
.opts label, .og > label { display: block; font-size: .88rem; color: var(--muted); margin: 2px 0 4px; }
.og { display: flex; flex-direction: column; min-width: 0; } .og .lvd, .og .emd { margin: 4px 0 0; min-height: 2.5em; }   /* alto fijo de 2 líneas: cambiar de opción no mueve nada */
.opts .nick, .nick-form .nick, .setting .nick, .og .nick { height: 46px; border-radius: 12px; border: 0; padding: 0 12px; font: 800 1rem var(--ui); background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); min-width: 0; }
.nick-form { display: flex; gap: 8px; } .nick-form .nick { flex: 1; }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.seg button { flex: 1 1 0; min-width: 0; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; padding: 0 4px; font-size: .92rem; line-height: 1.05; }
.seg button.on { background: linear-gradient(180deg, #ffd75a, #f4a52a); color: #3b2304; }
.seg.ro button { cursor: default; }
.rules { display: flex; flex-direction: column; gap: 4px; }
.rl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.rl > span { display: flex; flex-direction: column; min-width: 0; font-size: .92rem; }
.rl small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.city-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 12px 6px 6px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--cm) 55%, #0b2240); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); cursor: pointer; text-align: left; }
.city-chip:disabled { cursor: default; }
.city-chip span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.city-chip small { color: #dbe9ff; font-size: .78rem; }
.city-chip > svg { width: 20px; height: 20px; flex: none; }
.cl-art { width: 58px; height: 44px; flex: none; border-radius: 10px; background: center / cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.city-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cl { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--cm) 45%, #0b2240); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); text-align: left; cursor: pointer; }
.cl span { display: flex; flex-direction: column; min-width: 0; font-size: .92rem; }
.cl small { font-size: .72rem; color: #dbe9ff; font-weight: 700; }
.cl.on { box-shadow: 0 0 0 3px var(--gold); }
body.land .city-sheet { width: min(760px, 100%); } body.land .city-list { grid-template-columns: repeat(3, 1fr); }
body.land .opts-sheet { width: min(760px, 100%); }
body.land .opts-sheet .opts { grid-template-columns: 1fr 1fr; gap: 8px 14px; } body.land .opts-sheet .og-city, body.land .opts-sheet .og-rules { grid-column: span 1; }

/* ajustes, pausa, cómo se juega */
.settings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.setting > span { flex: 1; min-width: 0; }
.setting select { height: 44px; border-radius: 12px; border: 0; padding: 0 10px; font: 800 1rem var(--ui); background: rgba(255, 255, 255, .14); color: #fff; }
.setting select option { color: #222; }
.setting .nick { width: 160px; }
.tog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 6px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); cursor: pointer; font-weight: 800; flex: none; }
.tog:disabled { cursor: default; opacity: .8; }
.tog i { width: 40px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .22); position: relative; transition: background .2s; }
.tog i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tog.on i { background: var(--green); } .tog.on i::after { transform: translateX(16px); }
.row.links { justify-content: center; flex-wrap: wrap; } .row.links .btn { flex: 0 1 auto; }
.howto-p .card { width: min(720px, 100%); }
.howto-body { font-weight: 600; line-height: 1.5; color: #e8f2ff; }
.howto-body .t1 { font-family: var(--title); font-weight: 600; color: var(--gold2); font-size: 1.3rem; margin: 0 0 8px; }
.howto-body h2 { font-size: 1.08rem; color: var(--gold2); margin: 16px 0 6px; }
.howto-body ul, .howto-body ol { padding-left: 1.2em; }
.howto-body li { margin: 3px 0; }
.howto-body strong { color: #fff; }
.howto-p .b-close { position: sticky; bottom: 0; width: 100%; margin-top: 10px; }
.menu-p .card { width: min(380px, 100%); }

/* sala de espera */
.lobby .card { width: min(480px, 100%); }
.lobby .card.lb { width: min(860px, 100%); display: grid; gap: 14px; }
body.land .lobby .card.lb { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c b"; align-items: start; } body.land .lb-a { grid-area: a; } body.land .lb-b { grid-area: b; } body.land .lb-c { grid-area: c; }
.code-big { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.code-big b { width: 46px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px var(--line); font: 700 1.8rem var(--title); color: var(--gold2); }
.lb-a .row { justify-content: center; } .lb-c .opts { margin-top: 4px; }
.seats { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seat { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 8px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.seat.me { box-shadow: inset 0 0 0 2px var(--gold); }
.seat.empty { opacity: .78; }
.st-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seat .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.seat em { font-style: normal; font-size: .74rem; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.seat em svg { width: 13px; height: 13px; }
.sdot { width: 16px; height: 16px; border-radius: 50%; background: var(--pc, #557); flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.addbot-level { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .addbot-level .seg { flex: 1; }
.countdown { text-align: center; font-size: 1.6rem; font-family: var(--title); color: var(--gold2); margin: 6px 0; }
.lobby .lb-b > .btn, .lobby .card > .btn { width: 100%; margin-top: 8px; }

/* final */
.end-p .card { width: min(600px, 100%); }
.final { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.final li { display: grid; grid-template-columns: 22px auto 1fr auto; grid-template-areas: "pos tk nm tot" "pos tk brk brk"; align-items: center; gap: 2px 8px; padding: 6px 10px; border-radius: 14px; background: rgba(0, 0, 0, .22); animation: slidein .4s both; }
.final li.first { background: linear-gradient(90deg, rgba(255, 210, 80, .28), rgba(0, 0, 0, .2)); box-shadow: inset 0 0 0 2px var(--gold); }
.final li.out { opacity: .65; }
.final li.me .nm { color: var(--gold2); }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } }
.final .pos { grid-area: pos; font-family: var(--title); font-size: 1.2rem; color: var(--gold2); text-align: center; }
.final .tk { grid-area: tk; width: 36px; height: 36px; }
.final .nm { grid-area: nm; font-size: 1.02rem; }
.final .brk { grid-area: brk; display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.final .brk span { display: inline-flex; align-items: center; gap: 3px; } .final .brk b { color: #e8f2ff; }
.final .brk svg, .legend svg { width: 15px; height: 15px; }
.final .brk em { font-style: normal; color: var(--coral); }
.final .tot { grid-area: tot; text-align: right; font: 700 1.3rem var(--title); color: var(--gold2); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: .78rem; color: var(--muted); margin: 4px 0 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }

/* avisos */
#toasts { position: absolute; left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(92vw, 460px); }
.toast { padding: 10px 16px; border-radius: 14px; background: rgba(10, 30, 58, .95); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); font-weight: 800; text-align: center; animation: up .25s both; }
.toast.out { animation: fadeout .3s both; }
.toast.red { box-shadow: var(--shadow), inset 0 0 0 2px var(--red); }
.toast.gold { box-shadow: var(--shadow), inset 0 0 0 2px var(--gold); color: var(--gold2); }
.toast.dim { opacity: .92; font-size: .9rem; }
.dev-ad { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 0, 0, .85); }
.dev-ad-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 20px; background: #16213a; box-shadow: inset 0 0 0 2px var(--line); }
.dev-ad-tag { font-size: .8rem; color: var(--muted); }
.dev-ad-art { width: 220px; height: 140px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #ff6b5a, #ffc93c, #1fc7b6); font: 700 2.4rem var(--title); color: #fff; }
.conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 80; animation: conf linear both; pointer-events: none; }
@keyframes conf { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
#fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }

/* ================================================================== mesa ================================================================== */
#table { position: absolute; inset: 0; z-index: 10; }
.tb { display: grid; padding: calc(4px + var(--safe-t)) calc(4px + var(--safe-r)) calc(4px + max(var(--safe-b), var(--cookie-b, 0px))) calc(4px + var(--safe-l)); gap: 4px; }
body.port .tb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "top" "hint" "board" "log" "dock"; }
body.land .tb { grid-template-columns: var(--colL, 200px) var(--W, 300px) var(--colR, 260px); grid-template-rows: minmax(0, 1fr); grid-template-areas: "left board right"; justify-content: center; column-gap: 10px; padding-top: calc(6px + var(--safe-t)); }
/* columnas laterales: en vertical no existen (sus hijos van a la rejilla); en horizontal, cada una apila lo suyo */
.t-left, .t-right { display: contents; }
body.land .t-left, body.land .t-right { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
body.land .t-left { grid-area: left; } body.land .t-right { grid-area: right; }
body.land .t-log { flex: 1 1 0; } body.land .t-dock { flex: 1 1 auto; min-height: 0; } body.land .t-top { flex: none; }
.t-top { grid-area: top; display: flex; gap: 4px; align-items: stretch; min-width: 0; }
.t-hint { grid-area: hint; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 2px 2px 2px 10px; border-radius: 12px; background: rgba(6, 22, 44, .55); box-shadow: inset 0 0 0 1.5px var(--line2); position: relative; overflow: hidden; min-width: 0; }
.t-hint.mine { box-shadow: inset 0 0 0 2px var(--gold); background: linear-gradient(90deg, rgba(255, 201, 60, .2), rgba(6, 22, 44, .55)); }
.t-hint.offline { box-shadow: inset 0 0 0 2px var(--red); }
.hdot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; box-shadow: 0 0 8px var(--teal); }
.t-hint.mine .hdot { background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: .6; } }
.ht { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.15; }
.t-hint .b-zoom, .t-hint .b-chat { width: 44px; height: 44px; flex: none; background: rgba(255, 255, 255, .08); }
.t-note { position: absolute; left: 22px; right: 52px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; }
.note { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; max-height: calc(2.3em + 8px); padding: 4px 10px; border-radius: 10px; font-size: .86rem; line-height: 1.15; background: #0d2848; box-shadow: 0 0 0 2px var(--teal), 0 4px 10px rgba(0, 0, 0, .4); animation: notein .3s cubic-bezier(.2, .9, .3, 1.3) both; overflow: hidden; overflow-wrap: break-word; }
.note.good { box-shadow: 0 0 0 2px var(--green), 0 4px 10px rgba(0, 0, 0, .4); background: #0c3326; }
.note.bad { box-shadow: 0 0 0 2px var(--coral), 0 4px 10px rgba(0, 0, 0, .4); background: #3a1a1c; }
.note.buy, .note.auction { box-shadow: 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .4); background: #3a2c08; }
.note.trade { box-shadow: 0 0 0 2px var(--sky), 0 4px 10px rgba(0, 0, 0, .4); }
.note.out { animation: fadeout .3s both; }
@keyframes notein { from { transform: translateY(8px) scale(.94); opacity: 0; } }
.pn { color: color-mix(in srgb, var(--pc) 70%, #fff); }
.mn { color: var(--gold2); white-space: nowrap; }
.sqn { color: #fff; border-bottom: 3px solid var(--gc); }
.b-menu { width: 44px; height: auto; min-height: 44px; }

/* tira de jugadores */
.t-players { flex: 1; min-width: 0; display: flex; gap: 4px; }
.pl { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 12px; background: rgba(6, 22, 44, .55); box-shadow: inset 0 0 0 1.5px var(--line2); cursor: pointer; text-align: left; color: var(--text); min-height: 52px; }
.pl.cur { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 30%, #0d2848), rgba(6, 22, 44, .6)); box-shadow: inset 0 0 0 2px var(--pc); }
.pl.me .pl-nm { color: var(--gold2); }
.pl.out { opacity: .45; filter: grayscale(.8); }
.pl-av { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.pl-av .tk { width: 28px; height: 28px; }
.pl-av .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke: transparent; stroke-width: 3.4; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * (1 - var(--p, 1))); stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s; }
.timed .ring circle { stroke: #3ed58a; } .warn .ring circle { stroke: #ff9d2e; } .hot .ring circle { stroke: #ff4a3d; }
.pl-jail, .pl-bot, .pl-away { position: absolute; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; }
.pl-jail { left: -2px; bottom: -2px; background: #fff; color: var(--ink); } .pl-jail svg { width: 12px; height: 12px; }
.pl-bot { right: -3px; top: -3px; background: #0d2848; color: #cfe3ff; } .pl-bot svg { width: 11px; height: 11px; }
.pl-away { right: -3px; bottom: -3px; background: var(--coral); color: #fff; }
.pl-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.08; }
.pl-nm { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cash { font-size: .98rem; color: #fff; white-space: nowrap; }
.pl-nw { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bub { position: absolute; z-index: 5; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; padding: 4px 10px; border-radius: 12px; background: #fff; color: var(--ink); font-size: .85rem; white-space: nowrap; box-shadow: var(--shadow); animation: pop .2s both; }
/* 5-6 jugadores en vertical: ficha arriba y textos debajo */
body.port .t-players[data-n="4"] .pl { flex-direction: column; gap: 1px; padding: 3px 2px; text-align: center; }
body.port .t-players[data-n="4"] .pl-tx { align-items: center; width: 100%; }
body.port .t-players[data-n="4"] .pl-av { width: 30px; height: 30px; }
body.port .t-players[data-n="4"] .pl-nm { max-width: 100%; }
/* 5 y 6 jugadores en vertical: dos filas de tres (cada ficha con su icono al lado y los textos legibles) */
body.port .t-players:is([data-n="5"], [data-n="6"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.port .t-players:is([data-n="5"], [data-n="6"]) .pl { flex-direction: row; gap: 4px; padding: 2px 4px 4px; min-height: 46px; }
body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-av { width: 30px; height: 30px; }
body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-av .tk { width: 24px; height: 24px; }
body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-tx { flex: 1; }
body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-nm { font-size: .7rem; } body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-cash { font-size: .84rem; } body.port .t-players:is([data-n="5"], [data-n="6"]) .pl-nw { font-size: .64rem; }
body.land .t-top { flex-direction: column; } body.land .b-menu { width: 100%; min-height: 44px; flex: none; }
body.land .t-players { flex-direction: column; flex: none; }
body.land .pl { flex: none; }

/* tablero */
.t-board { grid-area: board; justify-self: center; align-self: center; width: var(--W, 300px); height: var(--H, var(--W, 300px)); position: relative; }
.bd-view { overflow: hidden; touch-action: none; border-radius: 12px; }
.bd { position: absolute; left: 0; top: 0; transform-origin: 0 0; --fs: calc(var(--e) * .215); background: var(--main); border-radius: calc(var(--e) * .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--ink); font-family: var(--ui); }
.cells { position: absolute; inset: 0; }
.sq { position: absolute; display: flex; overflow: hidden; background: color-mix(in srgb, var(--ground) 92%, #fff); box-shadow: inset 0 0 0 .6px rgba(29, 36, 51, .35); font-size: var(--fs); cursor: pointer; transition: background .3s, filter .3s, opacity .3s; }
.sq.owned { background: color-mix(in srgb, var(--oc) 16%, var(--ground)); }
.sq.b { flex-direction: column; } .sq.t { flex-direction: column-reverse; } .sq.l { flex-direction: row-reverse; } .sq.r { flex-direction: row; }
.stripe { flex: none; display: flex; align-items: center; justify-content: center; gap: 1px; background: var(--gc); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); overflow: visible; }
.sq.b .stripe, .sq.t .stripe { height: calc(var(--e) * .3); width: 100%; }
.sq.l .stripe, .sq.r .stripe { width: calc(var(--e) * .3); height: 100%; }
.blds { display: flex; gap: 1px; align-items: center; justify-content: center; }
.sq.l .blds, .sq.r .blds { flex-direction: column; }
.blds .apt svg { width: calc(var(--e) * .22); height: calc(var(--e) * .22); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.blds .sky svg { width: calc(var(--e) * .24); height: calc(var(--e) * .4); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.sq.l .blds .sky svg, .sq.r .blds .sky svg { height: calc(var(--e) * .28); }
.blds i { display: block; animation: bldin .4s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes bldin { from { transform: scale(0) translateY(40%); } }
.tx { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1px; padding: calc(var(--e) * .07) calc(var(--e) * .04); text-align: center; }
.sq.l .tx, .sq.r .tx { padding: calc(var(--e) * .05) calc(var(--e) * .07); justify-content: center; }
.nm { display: block; flex: 0 0 auto; width: 100%; font-weight: 800; line-height: 1.1; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: -.01em; }
.nm.cut { overflow-wrap: anywhere; }
.pr { font-weight: 900; font-size: calc(var(--fs) * .92); color: #2b3a55; white-space: nowrap; }
.go-pay { color: #12804f; }
.sic { display: block; flex: none; width: calc(var(--e) * .44); height: calc(var(--e) * .44); color: #34507a; }
.sic svg { width: 100%; height: 100%; }
.sq.l .sic, .sq.r .sic { width: calc(var(--e) * .36); height: calc(var(--e) * .36); }
.sq.c { flex-direction: column; background: color-mix(in srgb, var(--ground) 80%, var(--accent)); }
.sq.c .tx { justify-content: center; gap: calc(var(--e) * .06); }
.sq.c .sic { width: calc(var(--e) * .72); height: calc(var(--e) * .72); color: var(--main); }
.sq.c .nm { font-size: calc(var(--fs) * 1.04); }
.k-gotojail .sic { color: #c62828 !important; }
.k-go .sic { color: #12804f !important; }
.k-jail { position: relative; }
.jl-cell { position: absolute; right: 0; top: 0; width: 68%; height: 68%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 35%, #fff); box-shadow: inset 1px -1px 0 rgba(29, 36, 51, .45); }
.jl-cell .sic { width: calc(var(--e) * .6); height: calc(var(--e) * .6); color: var(--ink) !important; opacity: .7; }
.jl-pass { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--e) * .06); text-align: center; }
.jl-pass .nm { font-size: calc(var(--fs) * .86); }
.own { position: absolute; z-index: 1; background: var(--oc); pointer-events: none; display: none; }
.sq.owned .own { display: block; }
.sq.b .own { left: 0; right: 0; bottom: 0; height: calc(var(--e) * .1); } .sq.t .own { left: 0; right: 0; top: 0; height: calc(var(--e) * .1); }
.sq.l .own { left: 0; top: 0; bottom: 0; width: calc(var(--e) * .1); } .sq.r .own { right: 0; top: 0; bottom: 0; width: calc(var(--e) * .1); }
.sq-mtg { position: absolute; z-index: 2; right: 2%; top: 2%; width: calc(var(--e) * .34); height: calc(var(--e) * .34); padding: 2px; border-radius: 50%; background: #c62828; color: #fff; display: none; }
.sq-mtg svg { width: 100%; height: 100%; }
.sq.mortgaged .sq-mtg { display: block; }
.sq.mortgaged { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ground) 90%, #888) 0 4px, color-mix(in srgb, var(--ground) 70%, #888) 4px 8px); }
.sq.mortgaged .tx, .sq.mortgaged .stripe { filter: grayscale(.75); opacity: .75; }
.sq.hl { box-shadow: inset 0 0 0 calc(var(--e) * .07) #ffc93c, 0 0 calc(var(--e) * .3) rgba(255, 201, 60, .9); z-index: 2; animation: hlp 1.2s ease-in-out infinite; }
@keyframes hlp { 50% { box-shadow: inset 0 0 0 calc(var(--e) * .1) #ffe08a, 0 0 calc(var(--e) * .45) rgba(255, 201, 60, 1); } }
.sq.dimmed { filter: saturate(.55) brightness(.92); }
.sq.trd { box-shadow: inset 0 0 0 calc(var(--e) * .07) var(--sky); z-index: 2; }
.sq.sel { box-shadow: inset 0 0 0 calc(var(--e) * .08) #fff, 0 0 0 calc(var(--e) * .05) var(--ink), 0 0 calc(var(--e) * .4) rgba(255, 255, 255, .9); z-index: 3; }
.sq.flash::after, .sq.built::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(255, 255, 255, .85); animation: flash .9s ease-out both; }
.sq.built::after { background: rgba(255, 220, 90, .9); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
/* centro: la ilustración de la ciudad, su nombre y lema, los mazos y la bandeja de dados */
.bd-ctr { position: absolute; left: calc(var(--cxp) + 2px); top: calc(var(--cyp) + 2px); width: calc(var(--e) * 9 - 4px); height: calc(var(--ey) * 9 - 4px); border-radius: calc(var(--e) * .2); overflow: hidden; background: var(--sky); }
.ctr-art { position: absolute; inset: 0; background: center / cover; }
.ctr-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 25, 50, .55) 0%, rgba(10, 25, 50, 0) 30%, rgba(10, 25, 50, 0) 70%, rgba(10, 25, 50, .35) 100%); }
.ctr-head { position: absolute; left: 0; right: 0; top: 15%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .65); padding: 0 8%; }
.ctr-city { font: 700 calc(var(--e) * .74) / 1 var(--title); letter-spacing: .01em; }
.ctr-motto { font-size: calc(var(--e) * .3); font-weight: 800; margin-top: calc(var(--e) * .08); opacity: .95; }
.ctr-pot { position: absolute; right: 4%; top: 30%; display: flex; align-items: center; gap: 4px; padding: calc(var(--e) * .08) calc(var(--e) * .16); border-radius: 99px; background: rgba(255, 255, 255, .9); font-size: calc(var(--e) * .3); font-weight: 900; color: var(--ink); }
.ctr-pot svg { width: calc(var(--e) * .45); height: calc(var(--e) * .45); }
.pile { position: absolute; bottom: 16%; width: calc(var(--e) * 1.9); height: calc(var(--e) * 1.25); }
.p-billete { left: 15%; transform: rotate(-6deg); } .p-postal { right: 15%; transform: rotate(6deg); }
.pc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: calc(var(--e) * .14); background: var(--dc); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--dc) 60%, #000), 0 4px 0 color-mix(in srgb, var(--dc) 75%, #000), 0 6px 10px rgba(0, 0, 0, .35); font-style: normal; }
.pc-back svg { width: calc(var(--e) * .62); height: calc(var(--e) * .62); color: #fff; }
.pc-back b { font-size: calc(var(--e) * .22); text-transform: uppercase; letter-spacing: .04em; }
.tray { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); display: none; gap: calc(var(--e) * .3); padding: calc(var(--e) * .26); border-radius: calc(var(--e) * .4); background: radial-gradient(circle at 50% 40%, #2d7a55, #1c5a3d); box-shadow: inset 0 0 0 calc(var(--e) * .08) #8a5a2c, inset 0 4px 12px rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .35); }
.tray.on { display: flex; }
.tray.dbl { box-shadow: inset 0 0 0 calc(var(--e) * .08) var(--gold), inset 0 4px 12px rgba(0, 0, 0, .45), 0 0 calc(var(--e) * .5) rgba(255, 201, 60, .8); }
.die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: calc(var(--e) * 1.15); height: calc(var(--e) * 1.15); padding: calc(var(--e) * .14); border-radius: 22%; background: linear-gradient(145deg, #fff, #e9eef6); box-shadow: 0 calc(var(--e) * .06) 0 #b9c3d4, 0 calc(var(--e) * .12) calc(var(--e) * .2) rgba(0, 0, 0, .45); transition: transform .08s; }
.die b { border-radius: 50%; margin: 14%; }
.die b.on { background: radial-gradient(circle at 40% 35%, #44506a, #141a28); }
.die[data-n="1"] b.on { background: radial-gradient(circle at 40% 35%, #ff6b5a, #b3261e); margin: 4%; }
.die.land { animation: dieland .35s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes dieland { from { transform: scale(1.35) rotate(18deg); } }
.card-fx { position: absolute; left: var(--cxp); top: var(--cyp); width: calc(var(--e) * 9); height: calc(var(--ey) * 9); display: none; place-items: center; perspective: calc(var(--e) * 30); z-index: 6; }
.card-fx.on { display: grid; }
.card3d { width: calc(var(--e) * 5.8); height: calc(var(--e) * 6.8); cursor: pointer; }
.cf-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .8, .3, 1.1); }
.card3d.flipped .cf-in { transform: rotateY(180deg); }
.cf { position: absolute; inset: 0; border-radius: calc(var(--e) * .3); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.cf.back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--dc) 70%, #fff), var(--dc)); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--e) * .14) rgba(255, 255, 255, .5); }
.cf.back svg { width: 45%; height: 45%; } .cf.back b { font: 700 calc(var(--e) * .5) var(--title); }
.cf.front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; gap: calc(var(--e) * .12); padding: calc(var(--e) * .3); background: #fffdf6; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--e) * .1) var(--dc); color: var(--ink); text-align: center; }
.cf.front header { display: flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--dc); color: #fff; font-size: calc(var(--e) * .26); text-transform: uppercase; letter-spacing: .04em; }
.cf.front header svg { width: calc(var(--e) * .34); height: calc(var(--e) * .34); }
.cfi { display: block; width: calc(var(--e) * 1.5); height: calc(var(--e) * 1.5); flex: none; }
.cfi svg { width: 100%; height: 100%; }
.cf.front h4 { margin: 0; font: 600 calc(var(--e) * .44) / 1.1 var(--title); }
.cf.front p { margin: 0; font-size: calc(var(--e) * .33); line-height: 1.25; font-weight: 700; color: #34405a; }
.cf.front small { margin-top: auto; font-size: calc(var(--e) * .26); color: #6a7891; }
/* fichas de viaje */
.toks { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tok { position: absolute; left: 0; top: 0; width: var(--T, 22px); height: var(--T, 22px); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc) 60%); box-shadow: 0 0 0 calc(var(--T, 22px) * .08) var(--ink), 0 calc(var(--T, 22px) * .12) calc(var(--T, 22px) * .14) rgba(0, 0, 0, .45); transition: transform .35s cubic-bezier(.3, .8, .3, 1.1); font-style: normal; }
.tok svg { width: 66%; height: 66%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.tok.out { display: none; }
.tok.cur { z-index: 2; }
.tok.cur::after { content: ''; position: absolute; inset: calc(var(--T, 22px) * -.22); border-radius: 50%; border: calc(var(--T, 22px) * .09) solid #fff; opacity: .9; animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.8); opacity: .95; } to { transform: scale(1.35); opacity: 0; } }
.tok.hop { z-index: 3; }
.tok.jailed::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(90deg, transparent 0 22%, rgba(29, 36, 51, .75) 22% 30%); }

/* registro */
.t-log { grid-area: log; display: block; width: 100%; min-height: 0; overflow: auto; padding: 2px 6px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 12px; mask-image: linear-gradient(180deg, transparent, #000 22px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px); }
.t-log ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.t-log li, .logl li { font-size: .8rem; line-height: 1.25; padding: 2px 0; color: #d8e7fa; font-weight: 700; }
.t-log li.round, .logl li.round { color: var(--gold2); margin-top: 4px; }
.t-log li.good, .logl li.good { color: #b9f5d6; } .t-log li.bad, .logl li.bad { color: #ffc4bc; }
.t-log li.chat, .logl li.chat { color: #fff; font-style: italic; }
.t-log svg, .logl svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
body.port .t-log { height: 44px; min-height: 44px; overflow: hidden; padding: 2px 8px; background: rgba(6, 22, 44, .4); mask-image: none; -webkit-mask-image: none; }
body.port .t-log ol { justify-content: flex-end; height: 100%; min-height: 0; overflow: hidden; }
body.port .t-log li { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; padding: 1px 0; }
.logl { list-style: none; margin: 0; padding: 0; }
.dbl { color: var(--gold); }

/* barra de acciones */
.t-dock { grid-area: dock; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.land .t-dock { overflow: auto; justify-content: flex-start; }
.dk-ctx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dk-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; }
body.land .dk-tools { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
.act { --b1: rgba(255, 255, 255, .12); --b2: rgba(255, 255, 255, .06); --bt: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 0; padding: 4px 8px; border: 0; border-radius: 12px; background: linear-gradient(180deg, var(--b1), var(--b2)); color: var(--bt); font-weight: 800; font-size: .86rem; line-height: 1.05; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1.5px rgba(255, 255, 255, .1); text-align: center; transition: transform .08s, filter .15s, opacity .2s; }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.act svg { width: 22px; height: 22px; flex: none; }
.act span { display: flex; flex-direction: column; min-width: 0; }
.act small { font-size: .72rem; opacity: .85; font-weight: 700; }
.act.dim { opacity: .42; filter: saturate(.3); }
.dk-tools .act { flex-direction: column; gap: 1px; padding: 3px 2px; font-size: .7rem; }
.dk-tools .act svg { width: 20px; height: 20px; }
.dk-tools .act span { flex-direction: row; gap: 3px; align-items: baseline; max-width: 100%; }
.dk-tools .act small { background: rgba(255, 255, 255, .18); border-radius: 99px; padding: 0 5px; }
body.land .dk-tools .act { flex-direction: row; font-size: .8rem; padding: 4px 6px; justify-content: flex-start; }
.act.gold { --b1: #ffd75a; --b2: #f4a52a; --bt: #3b2304; box-shadow: 0 4px 0 #9a5f0c, inset 0 1px 0 rgba(255, 255, 255, .5); }
.act.mint { --b1: #5fe3b0; --b2: #1fa874; --bt: #062c1d; box-shadow: 0 4px 0 #0f6b47, inset 0 1px 0 rgba(255, 255, 255, .4); }
.act.sky { --b1: #5cc2ff; --b2: #2f86e0; }
.act.red { --b1: #ff7268; --b2: #d93c33; }
.act.ghost { --b1: rgba(255, 255, 255, .08); --b2: rgba(255, 255, 255, .04); }
.act.gift { --b1: #2fbf8a; --b2: #178a62; }
.act.big { min-height: 52px; font-size: 1.02rem; padding: 6px 12px; }
.act.big svg { width: 26px; height: 26px; }
.act.sm { min-height: 44px; font-size: .78rem; padding: 2px 8px; }
.dk-ctx .row { flex-wrap: wrap; } .dk-ctx .row > .act { flex: 1 1 0; }
.dk-main .act.big { flex: 2 1 0; }
.dk-wait { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 10px; border-radius: 12px; background: rgba(6, 22, 44, .45); font-size: .92rem; }
.dk-wait .tk { width: 30px; height: 30px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.dk-auto { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: #3a1a1c; box-shadow: inset 0 0 0 2px var(--coral); font-size: .85rem; }
.dk-auto span { flex: 1; } .dk-auto .act { flex: none; }
.dk-out { padding: 10px; text-align: center; color: var(--muted); }
.mini-card { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px 0 0; border: 0; border-radius: 12px; background: #fffdf6; color: var(--ink); overflow: hidden; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.mc-band { align-self: stretch; width: 12px; flex: none; background: var(--gc); }
.mc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.mc-tx b { font-size: .95rem; line-height: 1.1; }
.mc-tx small { font-size: .74rem; color: #4a5872; line-height: 1.15; }
.mc-tx .mn { color: #8a5a0c; }
.mini-card > svg { width: 20px; height: 20px; flex: none; color: #4a5872; }
.dk-buy, .dk-debt, .dk-auction, .dk-trade { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(6, 22, 44, .55); box-shadow: inset 0 0 0 2px var(--gold); }
.dk-debt { box-shadow: inset 0 0 0 2px var(--coral); } .dk-debt p { margin: 0; font-size: .9rem; }
.dk-trade { box-shadow: inset 0 0 0 2px var(--sky); }
.dk-buy .sub, .dk-debt .sub, .dk-trade .sub { margin: 0; }
.au-head { display: flex; gap: 6px; align-items: center; } .au-head .mini-card { flex: 1; }
.au-clock { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.au-clock > svg:not(.ring) { width: 18px; height: 18px; opacity: .5; position: absolute; }
.au-clock b { position: relative; font-size: 1.15rem; font-family: var(--title); }
.au-clock .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.au-bid { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: .82rem; color: var(--muted); }
.au-bid .big { font-size: 1.35rem; } .au-cash { margin-left: auto; }
.au-st { margin: 0; text-align: center; font-size: .9rem; } .au-st.good { color: var(--green); }
.dk-ctx .row.bids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex-wrap: nowrap; }
.bids .act.bid span { align-items: center; } .bids .act.bid { --b1: #5cc2ff; --b2: #2f86e0; font-size: 1rem; }
.bids .b-pass { flex-direction: column; gap: 1px; font-size: .74rem; padding: 2px 4px; } .bids .b-pass svg { width: 18px; height: 18px; }
.tr-who { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .9rem; flex-wrap: wrap; } .tr-who .tr-clock { margin-left: auto; width: 40px; height: 40px; }
.tsum { display: flex; align-items: stretch; gap: 6px; }
.ts-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.ts-side > small { color: var(--muted); font-size: .74rem; }
.ts-items { display: flex; flex-wrap: wrap; gap: 3px; }
.ts-arrow { align-self: center; width: 22px; height: 22px; flex: none; color: var(--sky); } .ts-arrow svg { width: 100%; height: 100%; }
.chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px 2px 4px; border-radius: 8px; background: #fffdf6; color: var(--ink); font-size: .76rem; line-height: 1.15; }
.chip i { width: 6px; align-self: stretch; border-radius: 3px; background: var(--gc); flex: none; }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip.cash { background: #ffe9a8; } .chip.visa { background: #fff4d6; }

/* hojas de la mesa: no tapan el tablero en vertical (abajo, hasta el 58 %); en horizontal, a la derecha */
.tsheet { max-height: 58%; }
body.port .tsheet { max-height: min(60%, calc(100% - var(--W, 300px) * .55)); min-height: 30%; }
body.land .sheet-wrap:not(.modal) { justify-content: flex-end; align-items: stretch; }
body.land .tsheet { width: max(var(--colR, 260px), 380px); max-width: 48vw; max-height: 100%; }
body.land.short .tsheet { width: min(560px, 62vw); max-width: 62vw; }
.sq-band { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--gc); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); font-size: .9rem; }
.sq-ic { width: 26px; height: 26px; flex: none; color: #fff; } .sq-ic svg { width: 100%; height: 100%; }
.sq-own { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: .78rem; background: rgba(255, 255, 255, .14); }
.tag.free { background: var(--green); color: #062c1d; } .tag.mtg { background: #c62828; color: #fff; } .tag svg { width: 13px; height: 13px; }
.rent { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rent td { padding: 5px 8px; border-bottom: 1px solid var(--line2); }
.rent td:last-child { text-align: right; } .rent td small { display: block; font-size: .72rem; color: var(--muted); }
.rent tr.now td { background: rgba(255, 201, 60, .16); }
.rent svg.rk { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 1px; } .rent svg.rk.sky { height: 22px; vertical-align: -5px; }
.sq-facts { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--muted); }
.sq-facts span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sq-facts b { color: #fff; } .sq-facts svg { width: 18px; height: 18px; flex: none; }
.sq-desc { margin: 0; line-height: 1.4; font-weight: 700; }
.sq-acts .act { flex: 1 1 0; }
.here { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .here .tk { width: 22px; height: 22px; }
.pp-cash { margin: 0; font-size: .88rem; color: var(--muted); }
.pg { border-radius: 14px; background: rgba(0, 0, 0, .2); box-shadow: inset 4px 0 0 var(--gc, #9fb3c8); padding: 6px 6px 6px 10px; }
.pg header { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; position: static; background: none; padding: 0; }
.pg header small { color: var(--muted); font-size: .76rem; } .pg header .act { margin-left: auto; }
.pg ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }   /* rejilla: cada fila mide lo que ocupa aunque sus botones salten de línea */
.pp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 44px; }
.pp.other { opacity: .6; min-height: 30px; font-size: .84rem; } .pp.other .pp-nm { flex: 1; } .pp.other .pp-st { margin-left: auto; }
.pp.mtg .pp-nm { text-decoration: line-through; text-decoration-color: rgba(255, 90, 79, .7); }
.pp-nm { display: flex; align-items: center; gap: 6px; flex: 1 1 120px; min-width: 0; min-height: 44px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; padding: 0; font-weight: 800; font-size: .92rem; }
.pp-lv { display: flex; align-items: center; gap: 1px; }
.pp-lv .lv svg { width: 16px; height: 16px; } .pp-lv .lv.sky svg { width: 14px; height: 24px; }
.pp-b { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.gdot { width: 12px; height: 12px; border-radius: 4px; background: var(--gc); flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.pp .sic { width: 20px; height: 20px; color: #cfe3ff; }
.tabs { margin-bottom: 2px; }
/* trueque */
.rv-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 6px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font-weight: 800; }
.rv-pick.on { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255, 201, 60, .18); }
.rv-pick .tk { width: 26px; height: 26px; }
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.tcol h4 { margin: 0; font-size: .9rem; color: var(--gold2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchips { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; }
.tchip { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 2px 6px 2px 2px; border: 0; border-radius: 10px; background: rgba(255, 253, 246, .9); color: var(--ink); text-align: left; cursor: pointer; font-weight: 800; font-size: .76rem; line-height: 1.1; }
.tchip i { width: 8px; align-self: stretch; border-radius: 6px; background: var(--gc); flex: none; }
.tchip span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tchip small { font-size: .68rem; color: #5a6880; white-space: nowrap; } .tchip svg { width: 14px; height: 14px; flex: none; color: #c62828; }
.tchip.on { background: var(--gold); box-shadow: 0 0 0 2px #fff; }
.tchip.ro { cursor: pointer; }
.tcash { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .tcash b { min-width: 52px; text-align: center; color: var(--gold2); } .tcash small { color: var(--muted); font-size: .72rem; }
.tcash > span svg { width: 20px; height: 20px; }
.tvisa { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .76rem; } .tvisa svg { width: 20px; height: 20px; }
.vn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 900; cursor: pointer; } .vn.on { background: var(--gold); color: #3b2304; }
.tfoot { display: flex; flex-direction: column; gap: 6px; position: sticky; bottom: -2px; background: var(--panel); padding: 6px 0 4px; z-index: 2; }
.tprob { margin: 0; font-size: .82rem; text-align: center; } .tprob.bad { color: #ffb4aa; } .tprob.ok { color: var(--green); }
.pl-head { display: flex; align-items: center; gap: 10px; } .pl-head div { display: flex; flex-direction: column; } .pl-head small { color: var(--muted); display: flex; align-items: center; gap: 4px; } .pl-head small svg { width: 14px; height: 14px; }
.pl-stats { display: flex; gap: 6px; flex-wrap: wrap; } .pl-stats span { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); font-size: .76rem; color: var(--muted); } .pl-stats b { font-size: 1rem; color: #fff; } .pl-stats svg { width: 18px; height: 18px; }
.pl-props { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pl-props .tchip svg { width: 12px; height: 16px; }
.cq { display: flex; flex-wrap: wrap; gap: 4px; } .cqb { min-height: 44px; padding: 4px 10px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; cursor: pointer; } .cqb.em { font-size: 1.2rem; min-width: 44px; }

/* efectos */
.float { position: absolute; z-index: 60; font: 700 1.25rem var(--title); color: #fff; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .5); }
.float.good { color: #7dffbe; } .float.bad { color: #ff9b8f; }
.coin-fly { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c542 45%, #a8740f); box-shadow: 0 0 0 1.5px #8a5a0c; }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.stamp { position: absolute; z-index: 60; padding: .15em .5em; border-radius: .4em; border: .18em solid currentColor; font-family: var(--title); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .85); white-space: nowrap; }
.stamp.sold { color: #12804f; } .stamp.mtg { color: #c62828; }

/* horizontal bajo (844×340 con márgenes): todo más compacto */
body.short .pl { min-height: 44px; padding: 2px 6px; } body.short .pl-av { width: 30px; height: 30px; } body.short .pl-av .tk { width: 24px; height: 24px; }
body.short .pl-nw { display: none; } body.short .pl-cash { font-size: .86rem; }
body.short .t-hint { min-height: 46px; } body.short .ht { font-size: .8rem; }
body.short .act.big { min-height: 46px; font-size: .92rem; }
body.short .dk-tools .act { min-height: 44px; font-size: .74rem; }
body.short .t-log li { font-size: .72rem; }
body.desk .ht { font-size: 1rem; } body.desk .pl { min-height: 60px; } body.desk .pl-av { width: 42px; height: 42px; } body.desk .pl-av .tk { width: 34px; height: 34px; }
body.desk .pl-cash { font-size: 1.1rem; } body.desk .pl-nm { font-size: .88rem; } body.desk .pl-nw { font-size: .76rem; }
body.desk .t-log li { font-size: .86rem; }

body.short .mc-tx small { display: none; } body.short .mc-tx b { font-size: .86rem; } body.short .mini-card { min-height: 44px; }
body.short .au-bid { font-size: .74rem; } body.short .au-bid .big { font-size: 1.1rem; } body.short .au-clock { width: 40px; height: 40px; }
body.short .bids .act.bid { font-size: .86rem; padding: 2px; } body.short .bids .act.bid small { font-size: .64rem; }
.act small { white-space: nowrap; }
body.short .dk-buy, body.short .dk-debt, body.short .dk-auction, body.short .dk-trade { padding: 4px; gap: 4px; }

/* propiedades en miniatura en la ficha de cada jugador (horizontal y escritorio) */
.pl-own { display: none; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
body.land .pl-own { display: flex; }
.pl-own i { width: 9px; height: 9px; border-radius: 2px; background: var(--gc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.pl-own i.m { opacity: .4; } .pl-own i.b { box-shadow: 0 0 0 1.5px #fff; }
body.desk .pl-own i { width: 11px; height: 11px; }
body.short .pl-own { display: none; }
body.land .t-log ol { justify-content: flex-start; min-height: 0; }
body.land .t-log { mask-image: none; -webkit-mask-image: none; }
.t-log li.empty { color: var(--dim); }
.act .badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: #3b2304; font: 900 .7rem/18px var(--ui); font-style: normal; }
body.land .act .badge { right: auto; left: 22px; top: 2px; }
.sq-band.light { color: var(--ink); text-shadow: none; } .sq-band.light .sq-ic { color: var(--ink); }
.dk-ctx .row.tr-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-btns .act { flex-direction: column; gap: 1px; font-size: .86rem; padding: 4px 2px; } .tr-btns .act span { max-width: 100%; }
/* vertical bajo (390×664 con las barras de Safari): sin tira de registro (está en el menú) para que el tablero llene el ancho */
body.port.tiny .t-log { display: none; }
body.port.tiny .t-hint { min-height: 46px; } body.port.tiny .ht { font-size: .84rem; }
.dk-main .act { min-width: 96px; } .dk-main .act.big { min-width: 150px; }
body.short .tr-btns .act { font-size: .78rem; }
body.short .dk-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
body.short .dk-tools .act { flex-direction: column; justify-content: center; font-size: .68rem; padding: 2px; gap: 0; }
body.short .act .badge { left: auto; right: calc(50% - 22px); }
body.short .dk-ctx .row.tr-btns { grid-template-columns: 1fr 1fr; } body.short .tr-btns .b-counter { grid-column: span 2; flex-direction: row; }
body.short .ts-side > small { font-size: .68rem; } body.short .tr-who { font-size: .8rem; }
/* horizontal bajo: mientras hay que decidir algo (comprar, subasta, trueque, deuda) la barra de herramientas se aparta */
body.short .t-dock:is([data-k="buy"], [data-k="auction"], [data-k="trade"], [data-k="debt"]) .dk-tools { display: none; }
body.short .tfoot { position: static; }
/* portada en vertical: todo junto y centrado (sin un hueco grande entre la rejilla y los botones) */
@media (min-width: 700px) { body.port .tt-a, body.port .title-bottom { width: min(600px, 100%); } body.port .cg-nm { font-size: .82rem; } }
.t-note { right: 52px; } .t-hint:has(.b-chat) .t-note { right: 100px; }
/* trueque en vertical: más alto (el tablero importa menos mientras se negocia) y el pie fijo, compacto */
body.port .tsheet.trade-sheet { max-height: 80%; }
body.port .tfoot .tsum { display: none; }
.pn.me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
/* botón del menú: ronda (y objetivo en horizontal) */
.b-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2px; }
.b-menu svg { width: 20px; height: 20px; }
.mi-s { font-size: .62rem; line-height: 1; color: var(--muted); }
.mi-l { display: none; }
body.land .b-menu { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 4px 10px; }
body.land .mi-s { display: none; }
body.land .mi-l { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; min-width: 0; }
body.land .mi-l small { font-size: .74rem; color: var(--muted); white-space: nowrap; }
body.land .mi-l small:first-child { color: #fff; font-size: .8rem; }
/* progreso hacia el patrimonio objetivo en cada jugador */
.pl-bar { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pl-bar b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pc), #ffe08a); }
/* escritorio: botones de acción más grandes */
body.desk .act { min-height: 52px; font-size: .98rem; } body.desk .act svg { width: 24px; height: 24px; }
body.desk .dk-tools .act { font-size: .9rem; padding: 6px 10px; }
body.desk .act.big { min-height: 60px; font-size: 1.12rem; }
body.land .act .badge { left: 26px; top: -4px; }
/* horizontal bajo: jugadores en dos columnas a partir de 4; tarjetas (pausa, ajustes, final) compactas */
body.short .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
body.short .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) .pl { flex-direction: column; gap: 0; padding: 2px; text-align: center; min-width: 0; }
body.short .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) .pl-tx { align-items: center; width: 100%; }
body.short .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) .pl-nm { max-width: 100%; font-size: .66rem; }
body.short .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) .pl-cash { font-size: .76rem; }
body.short .card { padding: 10px 14px; } body.short .card h2 { font-size: 1.2rem; margin-bottom: 6px; }
body.short .menu-p .col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } body.short .menu-p .col .btn.big { grid-column: span 2; min-height: 48px; }
body.short .menu-p .col .btn { min-height: 44px; }
body.short .settings-p .card { width: min(760px, 100%); } body.short .settings { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 6px; }
body.short .settings .sub, body.short .settings .row.links { grid-column: span 2; margin: 0; } body.short .setting { min-height: 44px; }
body.short .end-p .card { width: min(780px, 100%); display: grid; grid-template-columns: 1.4fr 1fr; grid-template-areas: "h h" "s s" "f c" "f l"; gap: 0 14px; align-items: start; }
body.short .end-p .card > h2 { grid-area: h; } body.short .end-p .card > .sub { grid-area: s; } body.short .end-p .final { grid-area: f; margin: 2px 0; }
body.short .end-p .legend { grid-area: l; margin: 2px 0; } body.short .end-p .col { grid-area: c; align-self: center; }
body.short .final li { padding: 3px 8px; }
/* «Más juegos» siempre arriba a la izquierda; en horizontal la columna del logotipo deja su hueco */
body.land.short .portal-link { top: calc(6px + var(--safe-t)); bottom: auto; }
body.land .tt-a { padding-top: 40px; }
/* «Cómo se juega»: el botón de cerrar fijo abajo con un fundido que tapa el texto que pasa por detrás */
.howto-p .b-close { box-shadow: 0 -18px 16px 4px var(--panel), 0 4px 0 #9a5f0c; }
body.short .end-p .col .row { flex-direction: column; align-items: stretch; } body.short .end-p .col .row .btn { min-height: 44px; }
.dk-main .act.gift { min-width: 132px; }
/* el registro es un botón: su contenido no se centra (arriba en horizontal; las 2 últimas líneas en vertical) */
.t-log { display: flex; flex-direction: column; align-items: stretch; }
body.land .t-log { justify-content: flex-start; } body.port .t-log { justify-content: center; }
.t-log ol { width: 100%; }

/* fichas.py: ficha del juego bajo la pantalla de juego (visible al desplazarse; al jugar la página vuelve arriba y no se mueve) */
html, body { height: auto !important; min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; }
html:has(body.playing), body.playing { overflow: hidden !important; }
body:not(.playing) { touch-action: pan-y; }
body:not(.playing) #wrap, body:not(.playing) #app, body:not(.playing) #app canvas, body:not(.playing) #app .screen { touch-action: pan-y !important; }   /* fuera de la partida se puede bajar a la ficha deslizando sobre el juego */
#wrap, #app { position: relative !important; inset: auto !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; }
.game-info { max-width: 860px; margin: 0 auto; padding: 26px 18px 40px; font-family: Fredoka, ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #f4f0ff; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.game-info .crumbs { font-size: .92rem; color: #b9b0d8; margin-bottom: 10px; } .game-info .crumbs a { color: #b9b0d8; } .game-info .crumbs span { margin: 0 6px; opacity: .6; }
.game-info .howto-src { display: block; } .game-info .howto { background: none; color: inherit; padding: 0; border-radius: 0; box-shadow: none; border: 0; }
.game-info h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; color: #fff; }
.game-info h2 { font-size: 1.3rem; margin: 26px 0 8px; color: #ffd23f; }
.game-info p, .game-info li { color: #e8e2fa; } .game-info ul { padding-left: 1.2em; } .game-info a { color: #ffd23f; }
.game-info details { margin: 8px 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); }
.game-info summary { cursor: pointer; font-weight: 600; } .game-info details p { margin: 6px 0 0; }
.game-info .more { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.game-info .more a { display: block; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); text-decoration: none; color: #fff; }
.game-info .more img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; } .game-info .more b { display: block; padding: 8px 10px 0; } .game-info .more span { display: block; padding: 0 10px 10px; font-size: .88rem; color: #c9c0e6; }
.game-info .foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(190,160,255,.22); font-size: .92rem; } .game-info .foot a { color: #b9b0d8; }
.howto .t1 { font-size: 1.25rem; font-weight: 700; margin: .67em 0; }
/* ajustes: el apodo se adapta al ancho (la etiqueta nunca se corta) */
.setting .nick { width: auto; flex: 0 1 160px; min-width: 90px; }
.setting > span { min-width: min-content; }   /* la palabra más larga de la etiqueta nunca se parte: encoge el campo */
/* contador de propiedades: globo en la esquina del icono, separado del texto */
.act .badge { right: auto; left: calc(50% + 4px); top: 0; }
body.land .act .badge { left: 26px; top: -4px; }
/* fichas de jugador estrechas en vertical: icono arriba y textos debajo */
body.port .t-players.narrow .pl { flex-direction: column; gap: 1px; padding: 3px 2px 5px; text-align: center; }
body.port .t-players.narrow .pl-tx { align-items: center; width: 100%; }
body.port .t-players.narrow .pl-av { width: 28px; height: 28px; } body.port .t-players.narrow .pl-av .tk { width: 22px; height: 22px; }
body.port .t-players.narrow .pl-nm { max-width: 100%; font-size: .68rem; } body.port .t-players.narrow .pl-cash { font-size: .8rem; } body.port .t-players.narrow .pl-nw { font-size: .62rem; }
.t-hint.noting .ht { visibility: hidden; }
/* portada en pantallas muy estrechas (360 px con márgenes): la fila del apodo y los iconos salta de línea */
.title-bottom .row.icons { flex-wrap: wrap; }
.nick-chip { min-width: 0; }
/* ancho útil muy estrecho: la portada aparta las descripciones secundarias para que todo quepa */
body.narrow .title-bottom .row.two .btn small { display: none; }
body.narrow .nick-chip { max-width: 120px; }
body.narrow .tt-a { gap: 4px; } body.narrow .logo p { font-size: .84rem; }
 body.narrow .title-bottom { gap: 6px; }
body.narrow .title-bottom .btn.big { min-height: 50px; padding: 6px 12px; } body.narrow .cp-motto { margin-top: 4px; }
/* ===== vertical: franjas profundas =====
   Todos los nombres en horizontal. Arriba y abajo las casillas son estrechas (~30 px) y hondas (~21 % del alto): nombre
   y precio en varias líneas con una letra estrecha (Barlow Condensed) lo más grande posible; abreviaturas de callejero y,
   solo como último recurso, corte por sílaba. Los lados (15 %), anchos y bajos, en 1-2 líneas. */
.bd.deep .nm { font-family: 'Barlow Condensed', 'Arial Narrow', var(--ui); font-weight: 700; letter-spacing: 0; line-height: 1.04; }
.bd.deep .pr { font-family: 'Barlow Condensed', 'Arial Narrow', var(--ui); font-weight: 700; }
.bd.deep .sq.b .tx, .bd.deep .sq.t .tx { padding: calc(var(--ey) * .08) 1px; gap: 1px; }
.bd.deep .sq.b .sic, .bd.deep .sq.t .sic { width: calc(var(--e) * .56); height: calc(var(--e) * .56); }
.bd.deep .sq.l .tx, .bd.deep .sq.r .tx { gap: 0; padding: calc(var(--ey) * .06) calc(var(--e) * .1); }
.bd.deep .sq.l .sic, .bd.deep .sq.r .sic { width: calc(var(--ey) * .32); height: calc(var(--ey) * .32); }
.bd.deep .sq.c .sic { width: calc(var(--e) * 1.05); height: calc(var(--e) * 1.05); }
.bd.deep .ctr-city { font-size: calc(var(--e) * .82); } .bd.deep .ctr-motto { font-size: calc(var(--e) * .34); }
.bd.deep .ctr-head { top: 12%; }
.bd.deep .pile { width: calc(var(--e) * 1.8); height: calc(var(--e) * 1.2); bottom: 13%; } .bd.deep .p-billete { left: 13%; } .bd.deep .p-postal { right: 13%; }
.bd.deep .sq.l .stripe, .bd.deep .sq.r .stripe { width: calc(var(--e) * .34); }
.bd.deep .sq.b .stripe, .bd.deep .sq.t .stripe { height: calc(var(--e) * .34); }
/* ===== portada: diseño estable (no depende del alto real, que cambia con la barra de Safari) =====
   Arriba: «Más juegos» a la izquierda y ajustes, ayuda y sonido a la derecha. En vertical, 4 ciudades por fila y el código
   de sala y el apodo en la misma fila. Lo que depende del alto usa --h0 (alto al cargar; solo cambia si cambia el ancho)
   y de forma continua (clamp), nunca con un salto de clase. Todo va arriba: si el alto real crece, sobra abajo. */
.title-top { position: absolute; z-index: 3; top: calc(8px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; gap: 6px; }
.title-top .ib { background: rgba(8, 26, 50, .6); }
.cp-motto b { color: #fff; font-style: normal; font-family: var(--title); font-weight: 600; }
.join-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.join-f { display: flex; gap: 8px; flex: 1 1 200px; min-width: 0; }
.join-row .nick-chip { flex: 0 1 auto; max-width: 150px; }
body.port .title-screen { --gap: clamp(8px, calc(var(--h0, 740px) * .016), 16px); justify-content: flex-start; gap: var(--gap); padding-top: calc(58px + var(--safe-t)); }
body.port .tt-a { margin-top: 0; padding-top: 0; gap: var(--gap); }
body.port .logo-mark { display: block; width: 36px; height: 36px; margin: 0 auto -2px; }
body.port .logo .lg { font-size: 2.4rem; } body.port .logo p { font-size: .92rem; }
body.port .city-pick { padding: 6px; }
body.port .city-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.port .cg { aspect-ratio: auto; height: var(--cgh, 56px); }   /* la calcula ui.fitTitle con el alto de referencia */
body.port .title-bottom { margin-top: 0; gap: 8px; }
body.port .title-bottom .row.two .btn small { display: none; }
body.port .title-bottom .row.two .btn { min-height: 50px; }
body.port .cp-motto { margin: 6px 4px 0; }
/* página bloqueada fuera de la portada: sin desplazamiento ni rebote, y la ficha del portal fuera */
html:has(body.locked), body.locked { overflow: hidden !important; overscroll-behavior: none; }
body.locked .game-info { display: none !important; }
.card, .sheet-body, .t-log, .t-dock, .tchips { overscroll-behavior: contain; }
body.land .title-top { top: calc(6px + var(--safe-t)); }
/* vertical, lados con icono (transportes, servicios, impuestos, cartas): icono y precio en la primera línea y el nombre
   debajo a todo el ancho (así cabe en dos líneas con la misma letra que las calles) */
.bd.deep .sq.l .tx:has(.sic), .bd.deep .sq.r .tx:has(.sic) { display: grid; grid-template-columns: auto auto; grid-template-areas: "ic pr" "nm nm"; justify-content: center; align-content: center; align-items: center; gap: 1px 4px; }
.bd.deep .sq.l .tx:has(.sic) .sic, .bd.deep .sq.r .tx:has(.sic) .sic { grid-area: ic; }
.bd.deep .sq.l .tx:has(.sic) .pr, .bd.deep .sq.r .tx:has(.sic) .pr { grid-area: pr; }
.bd.deep .sq.l .tx:has(.sic) .nm, .bd.deep .sq.r .tx:has(.sic) .nm { grid-area: nm; }
.bd.deep .sq.l .tx:has(.sic):not(:has(.pr)), .bd.deep .sq.r .tx:has(.sic):not(:has(.pr)) { grid-template-columns: auto; grid-template-areas: "ic" "nm"; }
/* ancho útil muy estrecho (< 300 px): sin el lema bajo el logotipo; las miniaturas pueden ser más bajas */
body.port.narrow .logo p { display: none; }
body.port .cg { min-height: 0; }
/* descripciones de las opciones con alto reservado de 3 líneas: elegir otra opción no cambia el alto del panel */
.og .lvd, .og .emd { min-height: 3.75em; }
/* ancho útil muy estrecho: «Más juegos» solo con el logotipo (no se monta sobre los botones de arriba) */
body.narrow .portal-link span { display: none; } body.narrow .portal-link { padding: 6px 8px; }

/* vertical con el panel de abajo crecido (subasta, deuda, oferta): sin consigna para que el tablero siga a todo el ancho */
body.port .tb.cramp .t-hint, body.port .tb.cramp .t-log { display: none; }
/* interruptores: el texto ocupa siempre lo que la palabra más larga («Sí»/«No», «On»/«Off»…): cambiarlo no reparte de nuevo la línea */
.tog span[data-a] { display: inline-flex; flex-direction: column; }
.tog span[data-a]::before, .tog span[data-a]::after { content: attr(data-a); height: 0; overflow: hidden; visibility: hidden; }
.tog span[data-a]::after { content: attr(data-b); }

/* movimiento: la ficha salta de centro en centro de las casillas, por delante de las demás, con su sombra en el suelo,
   la casilla de cada paso iluminada y los pasos que faltan encima */
.tok.hop { z-index: 6; }
.tok-sh { position: absolute; left: 0; top: 0; width: var(--T, 22px); height: var(--T, 22px); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; z-index: 1; opacity: 0; }
.tok-n { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -12%); min-width: calc(var(--T, 22px) * .78); padding: 0 calc(var(--T, 22px) * .14); border-radius: 99px; background: #fff; color: var(--ink); font: 900 calc(var(--T, 22px) * .56)/1.35 var(--ui); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); font-style: normal; }
.tok-n:empty { display: none; }
.sq.step::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 236, 160, .85), rgba(255, 214, 90, .35)); animation: stepglow .42s ease-out both; }
@keyframes stepglow { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sq.step::before { animation: none; opacity: .5; } }
/* ---- sensación de juego: dados, compra, construcción, dinero y cartas ---- */
.tray { overflow: visible; }
.tray .die.fly { box-shadow: 0 calc(var(--e) * .3) calc(var(--e) * .3) rgba(0, 0, 0, .35); }
.tray.flash::after { content: ''; position: absolute; inset: calc(var(--e) * -.5); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 120, .9), rgba(255, 201, 60, 0)); pointer-events: none; animation: dblflash .9s ease-out both; }
@keyframes dblflash { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
.dice-sum { position: absolute; left: 50%; top: -55%; z-index: 4; pointer-events: none; font: 900 calc(var(--e) * 1.7)/1 var(--ui); color: #fff; -webkit-text-stroke: calc(var(--e) * .07) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--e) * .1) 0 rgba(0, 0, 0, .35); }
.dice-sum.dbl { color: #ffd34d; }
.tray.ready { cursor: pointer; animation: ready 1.3s ease-in-out infinite; }
.tray.ready::before { content: attr(data-hint); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: rgba(8, 26, 50, .82); color: #fff; font: 800 max(10px, calc(var(--e) * .32))/1.4 var(--ui); pointer-events: none; }
@keyframes ready { 0%, 100% { box-shadow: inset 0 0 0 calc(var(--e) * .08) #8a5a2c, inset 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 211, 77, .7); } 50% { box-shadow: inset 0 0 0 calc(var(--e) * .08) var(--gold), inset 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 calc(var(--e) * .22) rgba(255, 211, 77, .0); } }
.sq.claim::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle, var(--oc) 0 30%, transparent 70%); animation: claim .9s ease-out both; }
@keyframes claim { from { opacity: .95; transform: scale(.3); } 60% { opacity: .7; } to { opacity: 0; transform: scale(1.6); } }
.blds i { animation: none; }
.blds i.drop { animation: blddrop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes blddrop { 0% { transform: translateY(-260%) scale(.8); opacity: 0; } 55% { transform: translateY(0) scale(1.1, .85); opacity: 1; } 75% { transform: translateY(-18%) scale(.96, 1.06); } 100% { transform: none; } }
.pl-tx { position: relative; }
.pl-cash { transition: color .3s; } .pl-cash.up { color: #7dffb0; } .pl-cash.down { color: #ff9c8f; }
.cash-d { position: absolute; right: 0; top: -2px; font: 900 .72rem/1 var(--ui); font-style: normal; pointer-events: none; animation: cashd 1.3s ease-out both; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cash-d.good { color: #7dffb0; } .cash-d.bad { color: #ff9c8f; }
@keyframes cashd { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }
.float.fly { z-index: 80; }
.card3d { perspective: 900px; }
.cf-in { transition: transform .6s cubic-bezier(.2, .8, .25, 1.15); }
.card3d.flipped { animation: cardlift .6s ease-out; }
@keyframes cardlift { 0% { transform: none; } 45% { transform: translateY(-6%) scale(1.08) rotate(-2deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tray.ready, .card3d.flipped, .blds i.drop, .sq.claim::after, .tray.flash::after, .cash-d { animation: none; }
  .cf-in { transition: none; }
}
/* tablero ancho (horizontal): lados hondos a lo ancho, con el nombre en una o dos líneas y el precio al lado */
.bd.deep.wide .sq.l .tx, .bd.deep.wide .sq.r .tx, .bd.deep.wide .sq.l .tx:has(.sic), .bd.deep.wide .sq.r .tx:has(.sic) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic nm pr"; align-items: center; justify-content: stretch; align-content: center; gap: 0 3px; padding: 1px calc(var(--e) * .1); }
.bd.deep.wide .sq.l .tx:not(:has(.sic)), .bd.deep.wide .sq.r .tx:not(:has(.sic)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm pr"; }
.bd.deep.wide .sq.l .sic, .bd.deep.wide .sq.r .sic { grid-area: ic; width: calc(var(--ey) * .5); height: calc(var(--ey) * .5); }
.bd.deep.wide .sq.l .nm, .bd.deep.wide .sq.r .nm { grid-area: nm; text-align: left; }
.bd.deep.wide .sq.l .pr, .bd.deep.wide .sq.r .pr { grid-area: pr; }
.bd.deep.wide .sq.b .tx, .bd.deep.wide .sq.t .tx { padding: calc(var(--ey) * .06) 1px; }
.bd.deep.wide .sq.b .sic, .bd.deep.wide .sq.t .sic { width: calc(var(--ey) * .5); height: calc(var(--ey) * .5); }
.bd.deep.wide .ctr-city { font-size: calc(var(--ey) * .95); } .bd.deep.wide .ctr-motto { font-size: calc(var(--ey) * .4); }
.bd.deep.wide .pile { width: calc(var(--ey) * 1.9); height: calc(var(--ey) * 1.25); }
/* horizontal (móvil y tableta): columnas estrechas y sin huecos. Izquierda: jugadores y el registro en un panel que llena
   lo que queda; derecha: consigna, la acción principal (que crece hasta un tamaño razonable) y las 4 herramientas en 2×2 */
body.land:not(.deskw) .t-log { background: rgba(6, 22, 44, .4); box-shadow: inset 0 0 0 1.5px var(--line2); padding: 4px 8px; }
body.land:not(.deskw) .dk-tools, body.land.short .dk-tools { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
body.land:not(.deskw) .dk-tools .act { flex-direction: column; justify-content: center; gap: 0; padding: 2px; font-size: .7rem; min-height: 46px; }
body.land:not(.deskw) .dk-tools .act span { white-space: normal; line-height: 1.05; text-align: center; }
body.land:not(.deskw) .dk-tools .act .badge { left: auto; right: calc(50% - 24px); top: -4px; }
body.land:not(.deskw) .t-dock { overflow: hidden; justify-content: space-evenly; }
body.land:not(.deskw) .dk-ctx { flex: 1 1 auto; min-height: 0; justify-content: space-evenly; }
body.land:not(.deskw) .dk-ctx > :is(.dk-buy, .dk-debt, .dk-auction, .dk-trade, .dk-wait) { flex: 1 1 auto; justify-content: space-evenly; min-height: 0; }
body.land:not(.deskw) .dk-ctx .row.bids { grid-template-columns: 1fr 1fr; }
body.land:not(.deskw) .dk-main .act { min-width: 0; min-height: 50px; } body.land:not(.deskw) .dk-main .act.big { flex: 1 1 100%; min-width: 0; min-height: 56px; font-size: 1rem; }
body.land:not(.deskw) .dk-main .act.gift { flex: 1 1 100%; }
body.land:not(.deskw) .dk-ctx > .dk-wait { min-height: 64px; }
.bd.deep.wide .sq.c .sic { width: calc(var(--ey) * .78); height: calc(var(--ey) * .78); }
body.land:not(.deskw) .dk-debt .row { flex-direction: column; flex-wrap: nowrap; } body.land:not(.deskw) .dk-debt .row > .act { flex: 1 1 auto; min-width: 0; }
body.land:not(.deskw) .mc-tx b { white-space: normal; line-height: 1.1; }
body.land:not(.deskw) .au-head { position: relative; } body.land:not(.deskw) .au-head .au-clock { position: absolute; right: -6px; top: -12px; width: 34px; height: 34px; z-index: 2; } body.land:not(.deskw) .au-head .mini-card { padding-right: 22px; }
/* tableta en horizontal (columnas altas): acciones más grandes */
@media (min-height: 560px) { body.land:not(.deskw) .dk-main .act.big { min-height: 72px; font-size: 1.15rem; } body.land:not(.deskw) .dk-tools .act { min-height: 60px; font-size: .8rem; } body.land:not(.deskw) .dk-main .act { min-height: 60px; } }
/* tableta en horizontal: una columna (jugadores, consigna, acciones y registro) y el tablero */
body.land .tb.onecol { grid-template-columns: var(--colL, 240px) var(--W, 600px); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top board" "right board" "log board"; row-gap: 6px; }
body.land .tb.onecol .t-left { display: contents; }
body.land .tb.onecol .t-top { grid-area: top; } body.land .tb.onecol .t-log { grid-area: log; } body.land .tb.onecol .t-right { grid-area: right; }
body.land .tb.onecol .t-board { grid-row: 1 / -1; }
body.land .tb.onecol .t-dock { justify-content: flex-start; }
body.land .tb.onecol .dk-ctx { flex: none; }
body.land .tb.onecol .t-players:is([data-n="4"], [data-n="5"], [data-n="6"]) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
body.land:not(.deskw) .dk-ctx .row.tr-btns { grid-template-columns: 1fr 1fr; } body.land:not(.deskw) .tr-btns .b-counter { grid-column: span 2; flex-direction: row; }
body.land:not(.deskw) .dk-buy .row { flex-direction: column; flex-wrap: nowrap; } body.land:not(.deskw) .dk-buy .row > .act { flex: 1 1 auto; min-width: 0; }
body.land:not(.deskw) .dk-ctx > .dk-main { flex: 1 1 auto; max-height: 124px; align-items: stretch; }
body.land:not(.deskw) .note { font-size: .74rem; padding: 3px 8px; }
body.land:not(.deskw) .t-note { left: 4px; right: 4px; z-index: 3; justify-content: center; } body.land:not(.deskw) .note { max-width: 100%; text-align: center; }
body.land:not(.deskw) .mi-l small { font-size: .68rem; } body.land:not(.deskw) .mi-l small:first-child { font-size: .76rem; }