:root {
  --vino: #7B1E2E;
  --vino-soft: rgba(123, 30, 46, .10);
  --marron: #8B5E3C;
  --marron-soft: #F4ECE4;
  --azul: #1B2A41;
  --ink: #2A201D;
  --muted: #8C817A;
  --line: #ECE5DF;
  --card: #FFFFFF;
  --bg: #F6F1EB;
  --on-bg: #2A201D;
  --on-bg-muted: #8C817A;
  --gold: #D6A13E;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(42, 32, 29, .05), 0 8px 24px rgba(42, 32, 29, .06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Outfit', -apple-system, system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
  transition: background-color .3s;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
#app { max-width: 480px; margin: 0 auto; min-height: 100%; padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bot) + 20px); }

/* ---------- marca ---------- */
.logo { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); letter-spacing: .5px; margin: 0; line-height: 1; }
.brand { text-align: center; padding: 34px 0 26px; }
.brand .logo { font-size: 46px; }
.brand .tag { margin: 10px 0 0; color: var(--on-bg-muted); font-size: 15px; }
.brand .bowl { display: block; margin: 0 auto 12px; width: 64px; height: 64px; }

/* ---------- tarjetas ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 12px; }
.card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.card .sub { color: var(--muted); font-size: 14px; margin: 0; }
.row { display: flex; gap: 12px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grid2 .card { margin: 0; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.spacer { flex: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 16px; font-weight: 600; font-size: 16px; background: var(--vino); color: #fff; transition: transform .1s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.ghost { background: var(--marron-soft); color: var(--marron); }
.btn.dark { background: var(--azul); }
.btn.line { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.tap { transition: transform .12s; }
.tap:active { transform: scale(.97); }

/* ---------- login ---------- */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.who .card { text-align: center; padding: 26px 12px 20px; margin: 0; }
.avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; font-family: 'Shrikhand', serif; font-size: 34px; color: #fff; }
.avatar.babi { background: var(--vino); }
.avatar.uri { background: var(--azul); }
.who .name { font-size: 21px; font-weight: 600; }
.who .levels { font-size: 15px; color: var(--muted); margin-top: 2px; }
.who .levels b { color: var(--ink); font-size: 26px; display: block; font-weight: 700; margin: 8px 0 0; }
.mini { display: flex; justify-content: center; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.login-foot { text-align: center; color: var(--on-bg-muted); font-size: 14px; margin-top: 22px; }

/* ---------- contadores ---------- */
.counters { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 7px 12px 7px 8px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow); }
.coin { width: 20px; height: 20px; flex: none; }
.choclo { font-size: 17px; line-height: 1; }

/* ---------- home ---------- */
.home-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.home-top .logo { font-size: 26px; }
.hello { color: var(--on-bg); font-size: 22px; font-weight: 600; margin: 4px 2px 14px; }
.hello small { display: block; color: var(--on-bg-muted); font-size: 14px; font-weight: 400; margin-top: 2px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 20px; height: 20px; }
.hero { background: var(--card); }
.hero .lvl { font-size: 13px; font-weight: 600; color: var(--vino); background: var(--vino-soft); padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 10px; }
.hero h3 { font-size: 24px; }
.hero .btn { margin-top: 16px; }
.small-card h3 { font-size: 17px; }
.small-card .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--marron-soft); color: var(--marron); margin-bottom: 12px; }
.small-card .ico svg { width: 20px; height: 20px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #CFC6BF; }
.dot.on { background: #3D9A5B; box-shadow: 0 0 0 3px rgba(61, 154, 91, .15); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.duo .btn { min-height: 56px; flex-direction: column; gap: 0; font-size: 15px; line-height: 1.15; }
.duo .btn small { font-weight: 400; font-size: 12px; opacity: .8; }
.progress { height: 8px; border-radius: 99px; background: var(--marron-soft); overflow: hidden; margin: 12px 0 4px; }
.progress i { display: block; height: 100%; background: var(--marron); border-radius: 99px; transition: width .4s; }
.rival { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; }
.rival .bar { flex: 1; height: 10px; border-radius: 99px; background: var(--line); position: relative; }
.rival .bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.rival .bar::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .5; }
.feed { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.feed li { padding: 7px 0; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }

/* ---------- juego ---------- */
.game { display: flex; flex-direction: column; min-height: calc(100dvh - var(--safe-top) - var(--safe-bot) - 34px); }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.topbar .gtitle { flex: 1; min-width: 0; color: var(--on-bg); }
.topbar .gtitle b { display: block; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .gtitle small { color: var(--on-bg-muted); font-size: 13px; }
.boardwrap { display: flex; justify-content: center; }
.board {
  position: relative; background: #fff; border-radius: 20px; box-shadow: var(--shadow);
  width: min(calc(100vw - 32px), 448px, calc((100dvh - var(--safe-top) - var(--safe-bot) - var(--reserve, 250px)) * .75));
  aspect-ratio: 9 / 12; padding: 8px; container-type: inline-size;
  touch-action: none;
}
.board .marks { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; overflow: visible; }
.board .cells { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(12, 1fr); width: 100%; height: 100%; }
.board .c { display: grid; place-items: center; font-weight: 600; font-size: 6.4cqw; color: var(--ink); line-height: 1; transition: color .2s; }
.board .c.cov { color: transparent; }
.board .c.cov::before { content: ''; width: 72%; height: 72%; border-radius: 30%; background: #F1EAE3; grid-area: 1 / 1; }
.board .c.cov::after { content: ''; width: 14%; height: 14%; border-radius: 50%; background: #D9CBBE; grid-area: 1 / 1; }
.board .c.cov.arm::before { background: var(--marron); animation: pulse .8s infinite alternate; }
.board .c.cov.arm::after { background: #fff; }
.board .c.fresh { animation: pop .5s; color: var(--vino); }
.board.lock { pointer-events: none; }
@keyframes pulse { from { transform: scale(.9); } to { transform: scale(1.02); } }
@keyframes pop { 0% { transform: scale(.3); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

@keyframes miss { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

.words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 14px 0 4px; }
.w { font-size: 15px; font-weight: 600; letter-spacing: .06em; padding: 6px 11px; border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); transition: all .3s; }
.w.done { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); box-shadow: none; background: rgba(255, 255, 255, .55); }
.w .by { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--on-bg-muted); font-size: 15px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: 16px; padding: 4px; box-shadow: var(--shadow); margin-bottom: 12px; }
.seg button { min-height: 44px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--azul); color: #fff; }
.infoline { display: flex; justify-content: space-between; font-size: 13px; color: var(--on-bg-muted); margin: 0 4px 10px; }

.score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 16px; margin-bottom: 12px; }
.score .p { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.score .p:last-child { justify-content: flex-end; }
.score .n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score .mid { font-size: 13px; color: var(--muted); text-align: center; }
.score .big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul); }
.score .big.warn { color: var(--vino); }

/* ---------- hojas y modales ---------- */
.veil { position: fixed; inset: 0; background: rgba(27, 20, 18, .38); display: flex; align-items: flex-end; justify-content: center; z-index: 50; animation: fade .2s; }
.veil.center { align-items: center; padding: 20px; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: #fff; width: 100%; max-width: 480px; border-radius: 26px 26px 0 0; padding: 12px 20px calc(var(--safe-bot) + 20px); animation: up .28s cubic-bezier(.2, .9, .3, 1); max-height: 88dvh; overflow: auto; }
@keyframes up { from { transform: translateY(100%); } }
.sheet h2 { margin: 0 0 4px; font-size: 22px; }
.sheet p.sub { color: var(--muted); margin: 0 0 16px; }
.modal { background: #fff; border-radius: 26px; padding: 26px 22px 20px; width: 100%; max-width: 380px; text-align: center; animation: popin .3s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes popin { from { transform: scale(.85); opacity: 0; } }
.modal h2 { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 30px; margin: 4px 0 8px; }
.modal p { color: var(--muted); margin: 0 0 8px; font-size: 16px; }
.modal .actions { display: grid; gap: 10px; margin-top: 18px; }
.reward { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.reward .pill { font-size: 20px; padding: 10px 16px 10px 12px; box-shadow: none; background: var(--marron-soft); color: var(--marron); }
.reward .coin { width: 26px; height: 26px; }
.big-emoji { font-size: 54px; line-height: 1; }

.dots { display: flex; justify-content: center; gap: 16px; margin: 18px 0 22px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); transition: all .15s; }
.dots i.on { background: var(--vino); border-color: var(--vino); }
.dots.bad { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; }
.keypad button { height: 64px; border-radius: 18px; background: var(--marron-soft); font-size: 26px; font-weight: 500; }
.keypad button:active { background: #EADCCD; }
.keypad button.nob { background: none; }
.err { color: var(--vino); text-align: center; min-height: 20px; font-size: 14px; margin: -10px 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 14px; border-radius: 999px; background: var(--marron-soft); color: var(--marron); font-weight: 600; font-size: 14px; }
.chip.on { background: var(--azul); color: #fff; }
.theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-list button { text-align: left; padding: 14px; border-radius: 16px; background: var(--marron-soft); font-weight: 600; min-height: 54px; }
.theme-list button:active { background: #EADCCD; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 10px 0 18px; }
.swatches button { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .08); position: relative; }
.swatches button.on::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2.5px solid var(--azul); }
.swatches label { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--muted); display: grid; place-items: center; font-size: 22px; color: var(--muted); position: relative; overflow: hidden; }
.swatches input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.label { font-weight: 600; margin: 14px 0 8px; font-size: 15px; }

.count { position: fixed; inset: 0; display: grid; place-items: center; z-index: 60; pointer-events: none; }
.count span { font-family: 'Shrikhand', serif; font-size: 120px; color: var(--vino); animation: countin 1s ease-out; text-shadow: 0 4px 30px rgba(255, 255, 255, .9); }
@keyframes countin { from { transform: scale(1.8); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .2; } }

#toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 12px); transform: translate(-50%, -200%); visibility: hidden; background: var(--azul); color: #fff; padding: 12px 18px; border-radius: 16px; font-weight: 600; font-size: 15px; z-index: 80; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
#toast.show { transform: translate(-50%, 0); visibility: visible; }
.float { position: fixed; pointer-events: none; font-weight: 700; color: var(--marron); font-size: 22px; animation: floatup 1.2s forwards; z-index: 70; }
@keyframes floatup { to { transform: translateY(-60px); opacity: 0; } }
.center-note { text-align: center; color: var(--on-bg-muted); font-size: 13px; margin-top: 8px; }
.linkbtn { color: var(--on-bg-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 10px; }

/* ================= v2: dificultades, efectos y directo ================= */
body.noscroll { overflow: hidden; }
.hap { position: fixed; left: -100px; top: -100px; opacity: 0; pointer-events: none; }
.coin.sm { width: 14px; height: 14px; vertical-align: -2px; }

/* entrada escalonada */
.rise { animation: rise .55s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* título con brillo */
.logo.shine { background: linear-gradient(100deg, var(--vino) 0 40%, #D98796 50%, var(--vino) 60% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s ease-in-out infinite; padding: 0 4px; }
@keyframes shine { 0%, 65% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.bowl .steam { animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.brand .bowl { animation: floaty 3.2s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-5px) rotate(-3deg); } }
.avatar { animation: floaty 4s ease-in-out infinite; }
.who .card:nth-child(2) .avatar { animation-delay: -2s; }
.wobble { display: inline-block; animation: wobble 2.8s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } }

/* hojas: asa grande para arrastrar */
.sheet { padding-top: 0; overscroll-behavior: contain; will-change: transform; }
.grab { position: sticky; top: 0; height: 30px; display: grid; place-items: center; margin: 0 -20px 6px; background: #fff; z-index: 2; touch-action: none; cursor: grab; }
.grab i { width: 44px; height: 5px; border-radius: 9px; background: #DCD3CB; }
.veil { transition: background-color .2s; }
.veil.out { animation: fadeout .23s forwards; }
.sheet.out { animation: down .23s forwards; }
.modal.out { animation: popout .2s forwards; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes down { to { transform: translateY(100%); } }
@keyframes popout { to { transform: scale(.9); opacity: 0; } }

/* selector de dificultad */
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 8px; }
.diffs button { border-radius: 14px; padding: 10px 6px; background: var(--marron-soft); color: var(--marron); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .2s, color .2s, transform .15s; }
.diffs button b { font-size: 15px; }
.diffs button span { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; opacity: .85; }
.diffs button.on { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(27, 42, 65, .25); }
.bump { animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.12); } }
.shake { animation: shake2 .35s; }
@keyframes shake2 { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* tablero: letras que entran, brillan y se destapan */
.board .c.in { animation: cellin .45s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d); }
@keyframes cellin { from { opacity: 0; transform: scale(.3) translateY(8px); } }
.board .c.hit { animation: hit .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--h); }
@keyframes hit { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--vino); text-shadow: 0 0 12px rgba(214, 161, 62, .8); } 100% { transform: scale(1); } }
.board .c.flip { animation: flip .6s ease-out both; color: var(--vino); }
@keyframes flip { 0% { transform: rotateY(90deg) scale(.6); } 60% { transform: rotateY(0) scale(1.3); } 100% { transform: scale(1); } }
.board .marks polyline { fill: none; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.board .marks polyline.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline .35s ease-out forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.board .marks polyline.miss { animation: miss .5s forwards; }
.boardwrap.swap .board { animation: swapin .6s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes swapin { from { transform: translateX(40%) rotate(4deg); opacity: 0; } }

/* checks de palabras ocultas */
.hidden-words { margin: 14px 0 4px; text-align: center; }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ck { width: 27px; height: 27px; border-radius: 50%; border: 2px dashed #D3C4B6; display: grid; place-items: center; color: #fff; transition: all .3s; }
.ck.on { border: 0; box-shadow: 0 3px 10px rgba(139, 94, 60, .3); }
.ck svg { width: 18px; height: 18px; }
.ck.pop { animation: ckpop .5s cubic-bezier(.3, 1.8, .5, 1); }
.ck.pop .tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .35s .15s forwards; }
@keyframes ckpop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes tick { to { stroke-dashoffset: 0; } }
.found-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--on-bg-muted); min-height: 18px; }
.w.pop { animation: wpop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wpop { 40% { transform: scale(1.18); background: #F2D08A; } }

/* capa de efectos */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.spark { position: absolute; margin: -5px 0 0 -5px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark .7s ease-out forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--r)); opacity: 0; } }
.ring { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid; animation: ring .7s ease-out forwards; }
@keyframes ring { to { transform: scale(4); opacity: 0; } }
.rain { position: absolute; top: -60px; animation: rain linear forwards; }
@keyframes rain { to { transform: translateY(calc(100vh + 120px)) rotate(360deg); } }
.flycoin { position: absolute; left: 0; top: 0; }
.flycoin .coin { width: 24px; height: 24px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.bigemoji { position: absolute; bottom: 80px; font-size: 84px; animation: emo 2.2s cubic-bezier(.2, .8, .3, 1) forwards; transform-origin: 50% 100%; }
.bigemoji.small { font-size: 44px; bottom: 90px; animation-duration: 1.4s; }
@keyframes emo { 0% { transform: translate(-50%, 60px) scale(.2); opacity: 0; } 15% { transform: translate(-50%, -40px) scale(1.3); opacity: 1; } 30% { transform: translate(-50%, -80px) scale(1) rotate(-8deg); } 50% { transform: translate(-50%, -140px) rotate(8deg); } 100% { transform: translate(-50%, -380px) scale(.9); opacity: 0; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
.banner { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 85; }
.banner span { font-family: 'Shrikhand', serif; font-size: 40px; color: #fff; background: var(--vino); padding: 12px 26px; border-radius: 22px; box-shadow: 0 16px 40px rgba(123, 30, 46, .35); animation: banner 1.5s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes banner { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 20% { transform: scale(1.05) rotate(2deg); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9) translateY(-30px); opacity: 0; } }

/* directo: carriles de progreso y reacciones */
.race { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.lane { display: grid; grid-template-columns: 50px 1fr 38px; align-items: center; gap: 8px; }
.lane .who { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 0; }
.sg { display: flex; justify-content: center; gap: 2px; padding: 5px 3px; border-radius: 10px; background: #F6F1EB; transition: background .3s; }
.sg.cur { background: var(--marron-soft); box-shadow: inset 0 0 0 1.5px #E4D5C6; }
.sg.full { background: #EFE3D6; }
.sg i { width: 6px; height: 6px; border-radius: 50%; background: #DCD1C7; transition: background .3s; }
.sg i.pop { animation: ckpop .45s cubic-bezier(.3, 1.8, .5, 1); }
.lane .letters { font-size: 10px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.lane .letters b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.split { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.split .dot { display: inline-block; }
#coop-clock { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-bg); }
#coop-clock.warn { color: var(--vino); animation: bump .5s infinite; }
.reacts { display: flex; justify-content: space-between; gap: 4px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 6px 8px; margin-top: 12px; }
.reacts button { font-size: 25px; width: 40px; height: 40px; border-radius: 12px; transition: transform .12s; }
.reacts button:active { transform: scale(1.3); background: var(--marron-soft); }

/* ================= v3: reto arriba, checks del mes ================= */
.ck.extra { opacity: .5; border-style: dotted; }
.invite-top { position: fixed; left: 50%; top: calc(var(--safe-top) + 10px); width: min(calc(100vw - 20px), 460px); transform: translateX(-50%); z-index: 99; background: #fff; border-radius: 24px; padding: 14px 14px 12px; box-shadow: 0 18px 50px rgba(27, 20, 18, .28), 0 0 0 2px var(--vino); animation: itin .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.invite-top.out { animation: itout .3s forwards; }
@keyframes itin { from { transform: translate(-50%, -140%); } }
@keyframes itout { to { transform: translate(-50%, -140%); opacity: 0; } }
.it-head { display: flex; align-items: center; gap: 10px; }
.it-emoji { font-size: 34px; animation: wobble 1.6s ease-in-out infinite; display: inline-block; }
.it-text b { display: block; font-size: 17px; }
.it-text small { color: var(--muted); font-size: 13px; }
.it-diff { display: flex; align-items: baseline; gap: 8px; margin: 12px 0; padding: 10px 14px; border-radius: 16px; background: var(--marron-soft); color: var(--marron); }
.it-diff span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.it-diff b { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 26px; line-height: 1; }
.it-diff small { margin-left: auto; font-size: 12px; font-weight: 600; opacity: .8; text-align: right; }
.it-diff.d-medio { background: #EDE3F0; color: #5B3A6B; }
.it-diff.d-dificil { background: var(--vino); color: #fff; }
.it-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.it-btns .btn { min-height: 48px; }

/* ================= v4: reloj en difícil, emojis, selección del otro ================= */
.countdown { min-width: 54px; height: 44px; padding: 0 10px; border-radius: 14px; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .3s; }
.countdown.warn { background: var(--vino); }
.timebar { height: 6px; border-radius: 9px; background: rgba(0, 0, 0, .06); overflow: hidden; margin: -4px 0 10px; }
.timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--vino), var(--marron)); border-radius: 9px; }
.diffs.four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.diffs.four button b { font-size: 13px; }
.diffs.four button span { font-size: 11px; }
.it-diff.d-serpiente { background: var(--azul); color: #fff; }

/* partida en directo: más compacta para que la sopa sea tan grande como en individual */
.game.match .topbar { margin-bottom: 8px; }
.game.match #coop-clock { font-size: 22px; }
.game.match .race { padding: 7px 10px; gap: 5px; margin-bottom: 8px; border-radius: 16px; }
.game.match .sg { padding: 4px 3px; }
.emo-btn { font-size: 22px; }
.emo-pop { position: relative; height: 0; z-index: 40; }
.emo-pop .reacts { position: absolute; right: 0; top: 0; width: min(100%, 340px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; margin: 0; border-radius: 20px; box-shadow: 0 16px 40px rgba(27, 20, 18, .22); transform-origin: top right; transform: scale(.6); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2, .9, .3, 1.3), opacity .15s; }
.emo-pop.open .reacts { transform: scale(1); opacity: 1; pointer-events: auto; }
.emo-pop .reacts button { width: auto; height: 46px; font-size: 27px; }

.board .marks polyline.ghost-line { stroke-width: .62; stroke-opacity: .38; stroke-dasharray: .08 .12; }
.board .marks polyline.ghost-miss { stroke-dasharray: none; stroke-opacity: .5; animation: ghostmiss .7s forwards; }
@keyframes ghostmiss { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
.board .marks .ghost-dot { animation: ghostpulse .8s ease-in-out infinite alternate; }
@keyframes ghostpulse { from { r: .16; } to { r: .28; } }

/* ajustes de sonido */
.snd-opts { display: grid; gap: 8px; }
.snd-opts button { display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--marron-soft); color: var(--marron); }
.snd-opts button b { font-size: 15px; min-width: 70px; }
.snd-opts button span { font-size: 13px; opacity: .85; }
.snd-opts button.on { background: var(--azul); color: #fff; }

/* ================= v6: colección de temas y modos nuevos ================= */
.seg.three { grid-template-columns: repeat(3, 1fr); }
.themes-head .progress { margin-top: 10px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.tcard { position: relative; text-align: left; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 92px; transition: transform .12s; }
.tcard:active { transform: scale(.97); }
.tcard b { font-size: 15px; line-height: 1.2; padding-right: 22px; }
.tcard small { font-size: 12px; color: var(--muted); margin-top: auto; }
.tcard.ok { background: linear-gradient(145deg, #fff 55%, #F7EBD6); box-shadow: var(--shadow), inset 0 0 0 2px #E9CF9A; }
.tcard.ok small { color: var(--marron); font-weight: 600; }
.tcard .medal { position: absolute; top: 8px; right: 8px; font-size: 22px; animation: wobble 3s ease-in-out infinite; }
.tdots { display: flex; gap: 5px; }
.tdots i { width: 12px; height: 12px; border-radius: 50%; background: #EDE4DB; box-shadow: inset 0 0 0 1.5px #DCCFC2; }
.tdots i.on { background: var(--vino); box-shadow: none; }
.tcard.ok .tdots i.on { background: #D6A13E; }
.theme-prog { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px auto 0; padding: 10px 14px; border-radius: 16px; background: var(--marron-soft); color: var(--marron); width: fit-content; }
.theme-prog b { font-size: 15px; }
.theme-prog em { font-style: normal; font-size: 13px; font-weight: 600; }
.theme-prog .tdots i { width: 16px; height: 16px; }
.theme-prog .tdots i.new { animation: ckpop .6s .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.theme-prog.done { background: #F7EBD6; box-shadow: inset 0 0 0 2px #E9CF9A; }
.theme-prog.done .tdots i.on { background: #D6A13E; }

/* serpiente rápida: la palabra a buscar, grande */
.target { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; }
.target span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--on-bg-muted); font-weight: 600; }
.target b { display: flex; gap: 2px; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 27px; color: var(--vino); }
.target b i { font-style: normal; display: inline-block; animation: tgt .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k) * 40ms); }
.target b.done i { color: #D6A13E; animation: hit .5s both; animation-delay: calc(var(--k) * 40ms); }
@keyframes tgt { from { transform: translateY(12px) scale(.4); opacity: 0; } }

/* sopa infinita */
.sboard .svp { position: absolute; inset: 8px; overflow: hidden; border-radius: 12px; -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.sboard .strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.sboard .strip .marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sboard .strip .cells { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; height: 100%; }
.fixed-words .w { font-size: 17px; padding: 8px 14px; }
.v-infinita .race .sg { padding: 5px 4px; }
.v-rapida .sg i { width: 9px; height: 9px; }

[hidden] { display: none !important; }

/* ================= v8: camino de niveles (plano, mismo estilo que el resto) ================= */
.c-vino { --lc: var(--vino); }
.c-azul { --lc: var(--azul); }
.c-marron { --lc: var(--marron); }
.lvl-num { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.who .levels b { font-size: 22px; }
.who .lv-name { display: block; font-size: 13px; margin-top: 2px; }
.tdots { display: flex; gap: 6px; align-items: center; }
.tdots i { width: 10px; height: 10px; border-radius: 50%; background: #E6DDD4; }
.tdots i.on { background: var(--marron); }

/* tarjeta del inicio */
.camino { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; padding: 18px; }
.camino-top { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.camino-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--lc); display: grid; place-items: center; font-size: 28px; flex: none; }
.camino-txt { flex: 1; min-width: 0; }
.camino-txt b { display: block; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--lc); margin: 2px 0; }
.camino-txt small { font-size: 13px; color: var(--muted); }
.camino-groups { display: flex; align-items: center; margin: 16px 0 0; }
.cg { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: none; background: #F1ECE7; position: relative; }
.cg.locked { filter: grayscale(1); opacity: .5; }
.cg.done { background: var(--marron-soft); box-shadow: inset 0 0 0 2px var(--marron); }
.cg.current { background: #fff; box-shadow: inset 0 0 0 2px var(--vino); }
.cg i { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; background: #3D9A5B; color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.cg.chest-mini { background: transparent; font-size: 20px; }
.cg-line { flex: 1; height: 2px; margin: 0 4px; background: #E6DDD4; min-width: 6px; }
.camino-now { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--marron-soft); }
.cn-icon { font-size: 26px; }
.cn-txt { flex: 1; min-width: 0; }
.cn-txt b { display: block; font-size: 16px; }
.cn-txt small { font-size: 12px; color: var(--muted); }
.camino .camino-play { width: 100%; margin-top: 14px; }

/* pantalla del camino */
.path-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; margin: calc(-1 * var(--safe-top) - 14px) -16px 0; padding: calc(var(--safe-top) + 12px) 16px 12px; background: var(--bg); }
.path-top .gtitle { flex: 1; min-width: 0; color: var(--on-bg); }
.path-top .gtitle b { display: block; font-size: 19px; }
.path-top .gtitle small { font-size: 12px; color: var(--on-bg-muted); }
.path-top .counters .pill:last-child { display: none; }
.path { padding: 12px 0 30px; }
.lvl { margin-bottom: 6px; }
.lvl-banner { position: sticky; top: calc(var(--safe-top) + 68px); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.lvl-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--lc); display: grid; place-items: center; font-size: 26px; flex: none; }
.lvl-banner > div { flex: 1; min-width: 0; }
.lvl-banner b { display: block; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--lc); }
.lvl-prog { font-size: 12px; font-weight: 600; color: var(--muted); }
.lvl.s-locked .lvl-icon { background: #E6DDD4; filter: grayscale(1); }
.lvl.s-locked .lvl-banner b { color: #B9ACA0; }
.lvl.s-current .lvl-banner { box-shadow: var(--shadow), inset 0 0 0 2px var(--lc); }
.lvl-track { position: relative; margin-top: 8px; }
.track { position: absolute; left: 50%; top: 0; margin-left: -150px; overflow: visible; pointer-events: none; }
.track-base { fill: none; stroke: #E2D8CE; stroke-width: 3; stroke-linecap: round; }
.track-done { fill: none; stroke: var(--marron); stroke-width: 3; stroke-linecap: round; }

/* nodos: todo medido desde el centro exacto (84 px de caja, 60 px de círculo) */
.node, .chest { position: absolute; width: 84px; height: 84px; margin-left: -42px; }
.node { display: block; }
.ring-svg { position: absolute; left: 0; top: 0; width: 84px; height: 84px; }
.node-core { position: absolute; left: 12px; top: 12px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); transition: transform .12s; }
.node:active .node-core { transform: scale(.94); }
.node-emoji { font-size: 29px; line-height: 1; }
.node.locked .node-core { background: #F1ECE7; box-shadow: none; }
.node.locked .node-emoji { filter: grayscale(1); opacity: .4; }
.node.done .node-core { background: var(--marron-soft); }
.node.current .node-core::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--vino); opacity: 0; animation: halo 2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.badge { position: absolute; left: 60px; top: 60px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; box-shadow: 0 0 0 3px var(--bg); }
.badge.ok { background: #3D9A5B; color: #fff; font-weight: 700; }
.badge.lock { background: #fff; font-size: 10px; }
.bubble { position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--vino); color: #fff; font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 999px; animation: bob 1.6s ease-in-out infinite; z-index: 2; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--vino); }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
.node-label { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--on-bg); max-width: 140px; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.node.locked .node-label { color: var(--on-bg-muted); }
.mate { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: 'Shrikhand', serif; font-size: 12px; box-shadow: 0 0 0 3px var(--bg); z-index: 3; }
.mate.babi { background: var(--vino); }
.mate.uri { background: var(--azul); }
.node.just .ring-svg .seg.last { animation: segfill 1s .3s ease-out both; }
@keyframes segfill { from { stroke: #ECE5DF; } }
.node.just .node-core { animation: justpop .6s .3s ease-out both; }
@keyframes justpop { 40% { transform: scale(1.12); } }
.node.unlocking .node-core { animation: unlock .7s ease-out both; }
@keyframes unlock { 0% { transform: scale(.7); opacity: .4; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }

.chest { display: grid; place-items: center; }
.chest-svg { width: 56px; height: 56px; }
.chest.locked .chest-svg { filter: grayscale(.9) opacity(.5); }
.chest.ready .chest-svg { animation: chestshake 1.6s ease-in-out infinite; }
@keyframes chestshake { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-9deg); } 72% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } 88% { transform: rotate(3deg); } }
.chest .node-label { top: 80px; color: var(--on-bg-muted); font-weight: 500; }
.chest.open .node-label { color: var(--marron); }

.lock-card { margin: 24px 0 10px; padding: 24px 20px 20px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); text-align: center; }
.lock-big { width: 64px; height: 64px; margin: 0 auto 8px; animation: lockwiggle 3.5s ease-in-out infinite; }
.lock-svg { width: 100%; height: 100%; }
@keyframes lockwiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-10deg); } 88% { transform: rotate(9deg); } 92% { transform: rotate(-5deg); } }
.lock-card b { font-size: 18px; }
.lock-card p { color: var(--muted); margin: 6px 0 16px; font-size: 14px; }
.ghosts { display: grid; gap: 8px; }
.ghost-lvl { padding: 12px 16px; border-radius: 16px; background: #F4EFEA; text-align: left; }
.ghost-lvl span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B9ACA0; }
.ghost-lvl b { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 18px; color: #CFC3B8; letter-spacing: .2em; }
.ghost-lvl:nth-child(2) { opacity: .7; } .ghost-lvl:nth-child(3) { opacity: .45; }

/* hoja de un grupo */
.gs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.gs-head h2 { margin: 2px 0 0; }
.gs-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--lc); flex: none; }
.gs-sopas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.gs-sopa { border-radius: 16px; padding: 12px 6px; text-align: center; background: #F4EFEA; color: var(--muted); }
.gs-sopa span { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 4px; border-radius: 50%; background: #E6DDD4; font-weight: 700; color: #fff; }
.gs-sopa small { font-size: 12px; font-weight: 600; }
.gs-sopa.ok { color: var(--marron); }
.gs-sopa.ok span { background: var(--marron); }
.gs-sopa.now { background: var(--vino-soft); color: var(--vino); }
.gs-sopa.now span { background: var(--vino); }
.gs-info { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-size: 14px; }
.gs-info li { display: flex; align-items: center; gap: 8px; }

/* sopa del camino y cofre */
.t-icon { font-size: 18px; }
.sopa-dots { display: flex; gap: 6px; padding: 0 4px; }
.sopa-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E6DDD4; }
.sopa-dots i.on { background: var(--marron); }
.sopa-dots i.now { background: var(--vino); }
.theme-prog { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px auto 0; padding: 12px 16px; border-radius: 16px; background: var(--marron-soft); color: var(--marron); width: fit-content; }
.theme-prog b { font-size: 15px; }
.theme-prog em { font-style: normal; font-size: 13px; font-weight: 600; }
.theme-prog .tdots i { width: 14px; height: 14px; }
.theme-prog .tdots i.new { animation: ckpop .6s .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.chest-modal { background: #fff; border-radius: 26px; padding: 26px 22px 22px; width: 100%; max-width: 360px; text-align: center; animation: popin .35s cubic-bezier(.2, .9, .3, 1.2); }
.chest-modal h2 { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 28px; margin: 6px 0 10px; }
.chest-big { width: 140px; height: 140px; margin: 4px auto; display: grid; place-items: center; }
.chest-big .chest-svg { width: 128px; height: 128px; animation: chestshake 1.2s ease-in-out infinite; }
.chest-big.opened .chest-svg { animation: chestopen .6s ease-out both; }
@keyframes chestopen { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.chest-modal p { color: var(--muted); margin: 6px 0 4px; }
.chest-modal .btn { margin-top: 14px; }

/* multijugador: 4 iconos en una fila */
.duo.icons { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.duo.icons .btn { min-height: 64px; padding: 0; font-size: 30px; border-radius: 18px; }

/* palabras del individual: sin fondo; en verde al encontrarlas */
.words.plain { gap: 4px 14px; margin: 14px 4px 4px; }
.words.plain .w { background: none; box-shadow: none; padding: 2px 0; font-size: 16px; letter-spacing: .08em; color: var(--on-bg); }
.words.plain .w.done { color: #2E8B57; text-decoration: none; }
.words.plain .w.done::before { content: '✓ '; }
.words.plain .w.pop { animation: plainpop .5s ease-out; }
@keyframes plainpop { 40% { transform: scale(1.2); } }

/* la sopa siempre de borde a borde */
.boardwrap { margin-left: -16px; margin-right: -16px; }
.board, .board.sboard { width: 100%; max-width: none; border-radius: 0; padding: 0; box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); }
.board .marks { inset: 0; width: 100%; height: 100%; }
.sboard .svp { inset: 0; border-radius: 0; }

/* ================= v10: sopa con aire, racha, combos y más efectos ================= */
/* el fondo blanco llega a los bordes; las letras, separadas de los lados */
.board, .board.sboard { padding: 12px 16px; aspect-ratio: auto; }
.board:not(.sboard) .cells { height: auto; aspect-ratio: 9 / 12; }
.board .marks { inset: 12px 16px; width: calc(100% - 32px); height: calc(100% - 24px); }
.board .c { font-size: 6cqw; }
.sboard { height: calc((min(100vw, 480px) - 32px) * 4 / 3 + 24px); }
.sboard .svp { inset: 12px 16px; -webkit-mask-image: none; mask-image: none; }
.sboard::before, .sboard::after { content: ''; position: absolute; left: 0; right: 0; height: 40px; z-index: 3; pointer-events: none; }
.sboard::before { top: 0; background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)); }
.sboard::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%); }
.sboard .strip { backface-visibility: hidden; transform: translate3d(0, 0, 0); }

/* botones de modo: marrón y cacao (ni vino de Babi ni azul de Uri) */
.btn.brown { background: var(--marron); }
.btn.cacao { background: #5A3E2B; }

/* franja de hoy: racha + objetivo diario */
.today { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; }
.streak-pill { display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 8px; border-radius: 999px; background: #F4EFEA; color: var(--muted); flex: none; }
.streak-pill .flame { font-size: 22px; filter: grayscale(1); opacity: .5; transition: all .3s; }
.streak-pill b { font-size: 20px; color: var(--ink); }
.streak-pill small { font-size: 12px; }
.streak-pill.on { background: #FFF1E3; color: #C0561E; }
.streak-pill.on .flame { filter: none; opacity: 1; animation: flame 1.2s ease-in-out infinite alternate; }
.streak-pill.on b { color: #C0561E; }
@keyframes flame { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.15) rotate(4deg); } }
.daily-goal { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.daily-goal svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dg-bg { fill: none; stroke: #ECE5DF; stroke-width: 4; }
.dg-fg { fill: none; stroke: var(--marron); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .6s; }
.daily-goal span { font-size: 17px; }
.today-txt { min-width: 0; }
.today-txt b { display: block; font-size: 14px; }
.today-txt small { font-size: 12px; color: var(--muted); }

/* sopa individual: pista, puntitos, palabra que vuela, combos */
.hint-btn { position: relative; font-size: 20px; }
.hint-btn span { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.game > .sopa-dots { justify-content: center; margin: -4px 0 10px; }
.board .c.hinted { color: var(--vino); animation: hinted 1s ease-in-out infinite; }
.board .c.hinted::before { content: ''; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; left: 5%; top: 5%; border: 2.5px solid var(--gold); animation: hintring 1s ease-out infinite; }
.board .c { position: relative; }
@keyframes hinted { 50% { transform: scale(1.35); } }
@keyframes hintring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.board.glow { animation: glow .6s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(214, 161, 62, .0); } 30% { box-shadow: 0 0 0 4px rgba(214, 161, 62, .55), 0 0 40px rgba(214, 161, 62, .35); } 100% { box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); } }
.board .c.wave { animation: wave .6s ease-in-out both; animation-delay: var(--w); }
@keyframes wave { 40% { transform: translateY(-10px) scale(1.25); color: var(--vino); } }
.flyword { position: absolute; left: 0; top: 0; font-family: 'Shrikhand', serif; font-size: 22px; color: var(--vino); letter-spacing: .05em; white-space: nowrap; text-shadow: 0 2px 12px rgba(255, 255, 255, .9); }
.poptext { position: fixed; left: 50%; top: 36%; transform: translate(-50%, -50%); font-family: 'Shrikhand', serif; font-size: 34px; color: var(--vino); white-space: nowrap; text-shadow: 0 3px 20px rgba(255, 255, 255, .95), 0 0 2px #fff; animation: poptext 1.2s cubic-bezier(.2, .9, .3, 1.3) forwards; pointer-events: none; }
.poptext b { font-weight: 400; color: var(--gold-d, #B5832A); font-size: 1.25em; }
.poptext.hot { color: #C0561E; font-size: 40px; }
.poptext.last { color: var(--azul); top: 30%; }
.poptext.clean { color: #2E8B57; font-size: 28px; top: 44%; }
@keyframes poptext { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 70% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -85%) scale(.95); opacity: 0; } }
.words.plain .w.last { color: var(--vino); animation: lastpulse 1s ease-in-out infinite; }
@keyframes lastpulse { 50% { transform: scale(1.12); } }
.extra-line { display: block; margin-top: 10px; font-size: 14px; color: var(--ink); }
.streak-line { color: #C0561E; }
.daily-line { color: var(--marron); }

/* ================= v12: nivel de cocinero, misiones, premio sorpresa, liga ================= */
.pill.xp { background: #FFF6DC; color: #B5832A; }

/* barra de experiencia (se rellena animada) */
.xpbar { display: block; height: 8px; border-radius: 99px; background: #EFE8E1; overflow: hidden; }
.xpbar.big { height: 10px; margin: 6px 0 4px; }
.xpbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #E8BD5E, #D6A13E); width: var(--to); animation: xpfill 1.2s .3s cubic-bezier(.3, .8, .3, 1) both; position: relative; }
.xpbar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); background-size: 250% 100%; animation: xpshine 2.4s 1.5s ease-in-out infinite; }
@keyframes xpfill { from { width: var(--from); } }
@keyframes xpshine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.xp-mini { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 14px 0 0; text-align: left; }
.xp-mini b { font-size: 13px; color: #B5832A; }
.xp-mini small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* tarjeta de jugador */
.player { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; }
.lvl-badge { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #F7DC9C, #D6A13E); color: #fff; position: relative; }
.lvl-badge::after { content: 'NIVEL'; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; letter-spacing: .1em; background: #B5832A; color: #fff; padding: 1px 5px; border-radius: 6px; }
.lvl-badge b { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 24px; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.player-txt { flex: 1; min-width: 0; }
.player-txt > b { font-size: 16px; }
.player-txt small { font-size: 12px; color: var(--muted); }
.x2 { flex: none; font-weight: 800; font-size: 12px; line-height: 1.1; text-align: center; color: #fff; background: #C0561E; border-radius: 12px; padding: 7px 8px; animation: bump 1.4s ease-in-out infinite; }

/* misiones */
.quests .quest { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.quests .quest:first-of-type { border-top: 0; margin-top: 6px; }
.q-icon { font-size: 22px; width: 30px; text-align: center; }
.q-body { flex: 1; min-width: 0; }
.q-body b { display: block; font-size: 14px; font-weight: 600; }
.q-bar { display: block; height: 6px; border-radius: 99px; background: #EFE8E1; overflow: hidden; margin-top: 6px; }
.q-bar i { display: block; height: 100%; background: var(--marron); border-radius: 99px; transition: width .6s; }
.q-rw { text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; align-items: flex-end; }
.q-rw small { font-size: 11px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.quest.done b { color: #2E8B57; }
.quest.done .q-bar i { background: #2E8B57; }
.quest.done .q-rw { color: #2E8B57; }
.q-chest { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--marron-soft); color: var(--marron); font-size: 13px; font-weight: 600; text-align: center; }
.q-chest.got { background: #E8F5EC; color: #2E8B57; }

/* liga semanal */
.league { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.lg-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.lg-bar { height: 10px; border-radius: 99px; background: #F1ECE7; overflow: hidden; }
.lg-bar i { display: block; height: 100%; border-radius: 99px; transition: width .8s; }

/* racha: hoja */
.streak-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.streak-head h2 { margin: 0 0 4px; }
.big-flame { font-size: 48px; filter: grayscale(1); opacity: .5; }
.big-flame.on { filter: none; opacity: 1; animation: flame 1.2s ease-in-out infinite alternate; }
.streak-next { padding: 12px 14px; border-radius: 14px; background: #FFF1E3; color: #C0561E; font-size: 14px; margin-bottom: 12px; }
.streak-next .q-bar i { background: #E4572E; }
.freeze { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #EAF3FA; margin-bottom: 14px; }
.fz-icon { font-size: 30px; }
.freeze b { display: block; font-size: 15px; }
.freeze small { font-size: 13px; color: var(--muted); }

/* premio sorpresa: ruleta */
.loot-modal, .lvlup-modal { background: #fff; border-radius: 26px; padding: 24px 20px 20px; width: 100%; max-width: 360px; text-align: center; animation: popin .35s cubic-bezier(.2, .9, .3, 1.2); }
.loot-modal h2, .lvlup-modal h2 { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 28px; margin: 4px 0 14px; }
.reel { position: relative; height: 84px; overflow: hidden; border-radius: 18px; background: #F6F1EB; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.reel::before, .reel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.reel::before { left: 0; background: linear-gradient(90deg, #F6F1EB, rgba(246, 241, 235, 0)); }
.reel::after { right: 0; background: linear-gradient(-90deg, #F6F1EB, rgba(246, 241, 235, 0)); }
.reel-strip { position: absolute; left: 0; top: 12px; display: flex; gap: 10px; padding-left: 10px; will-change: transform; }
.ri { width: 60px; height: 60px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: #fff; box-shadow: inset 0 0 0 3px var(--rc); }
.ri.win { animation: riwin .6s cubic-bezier(.3, 1.8, .5, 1) both; box-shadow: inset 0 0 0 3px var(--rc), 0 0 24px var(--rc); }
@keyframes riwin { 50% { transform: scale(1.25); } }
.reel-mark { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: var(--vino); border-radius: 3px; z-index: 3; box-shadow: 0 0 8px rgba(123, 30, 46, .4); }
.loot-modal p { color: var(--muted); margin: 12px 0 4px; min-height: 20px; }
.loot-modal .btn { margin-top: 12px; }

/* subida de nivel */
.lvlup-badge { width: 110px; height: 110px; margin: 4px auto 6px; border-radius: 30px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #F7DC9C, #D6A13E); animation: lvlbadge .9s cubic-bezier(.3, 1.6, .5, 1) both; box-shadow: 0 0 40px rgba(214, 161, 62, .5); }
.lvlup-badge span { font-family: 'Shrikhand', serif; font-size: 58px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
@keyframes lvlbadge { 0% { transform: scale(.2) rotate(-30deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1); } }
.lvlup-modal p { color: var(--muted); margin: 0 0 6px; }
.lvlup-modal .btn { margin-top: 14px; }

/* aviso de misión cumplida */
.quest-toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 12px); transform: translateX(-50%); z-index: 98; width: min(calc(100vw - 24px), 440px); display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(27, 20, 18, .2), inset 0 0 0 2px #2E8B57; animation: qtin .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.quest-toast.out { animation: qtout .35s forwards; }
.quest-toast > span { font-size: 26px; }
.quest-toast div { flex: 1; min-width: 0; }
.quest-toast b { display: block; color: #2E8B57; font-size: 14px; }
.quest-toast small { font-size: 13px; color: var(--ink); }
.quest-toast em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--marron); white-space: nowrap; display: flex; align-items: center; gap: 3px; }
@keyframes qtin { from { transform: translate(-50%, -140%); } }
@keyframes qtout { to { transform: translate(-50%, -140%); opacity: 0; } }

/* tablero de luces: cuadraditos que se encienden y se apagan */
.board.twinkle .cells { gap: 3px; }
.board.twinkle .c { border-radius: 7px; background: #F3EEE8; color: rgba(42, 32, 29, .22); transition: background .6s ease, color .6s ease, box-shadow .6s ease, transform .6s ease; }
.board.twinkle .c.on { background: #FFF1CF; color: var(--ink); box-shadow: 0 0 12px rgba(214, 161, 62, .45), inset 0 0 0 1px rgba(214, 161, 62, .35); }
.board.twinkle .c.lit { background: #F7D9DF; color: var(--vino); box-shadow: 0 0 14px rgba(123, 30, 46, .35); transform: scale(1.06); }
.board.twinkle .marks { z-index: 2; }

/* ================= v14: patata caliente, territorio, sabotaje y logros ================= */
.modes-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.modes-lbl + .duo { margin-top: 0; }

/* patata caliente */
.bomb-panel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 10px; }
.bp-side { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 12px; transition: background .3s; }
.bp-side.r { align-items: flex-end; }
.bp-side b { font-size: 13px; }
.bp-side.has { background: #FFE9DC; }
.hearts { display: flex; gap: 2px; font-size: 15px; }
.hearts i { font-style: normal; transition: transform .3s; }
.hearts i.lost { opacity: .5; transform: scale(.85); }
.bp-bomb { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.bp-icon { font-size: 40px; animation: bombwob .6s ease-in-out infinite alternate; }
.bomb-panel.mine .bp-icon { animation-duration: .25s; }
@keyframes bombwob { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }
.bp-s { position: absolute; right: -4px; bottom: -2px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; padding: 0 5px; }
.fuse { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #F1ECE7; overflow: hidden; }
.fuse i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #E4572E, #F2B33D); box-shadow: 0 0 10px rgba(228, 87, 46, .6); }
.bp-msg { grid-column: 1 / -1; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.bomb-panel.mine .bp-msg { color: #C0561E; }
body.hot::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; box-shadow: inset 0 0 90px rgba(228, 60, 30, .55); animation: hotpulse .5s ease-in-out infinite alternate; }
@keyframes hotpulse { from { opacity: .45; } to { opacity: 1; } }
.boom { position: fixed; inset: 0; z-index: 97; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(255, 220, 150, .85), rgba(255, 120, 40, .35) 40%, transparent 70%); animation: boombg 1.2s ease-out forwards; }
.boom span { font-size: 170px; animation: boomsp 1.2s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes boombg { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes boomsp { 0% { transform: scale(.2) rotate(-20deg); } 30% { transform: scale(1.4) rotate(8deg); } 100% { transform: scale(1.8); opacity: 0; } }
.poptext.hot { color: #E4572E; }

/* territorio */
.terr-panel { display: grid; gap: 8px; }
.tp-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.tp-row b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tp-mid { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.tp-row .dot { display: inline-block; }
.tug { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: #F1ECE7; gap: 2px; }
.tug i { display: block; height: 100%; transition: width .6s cubic-bezier(.3, .8, .3, 1); }
.board .c.own-babi { background: rgba(123, 30, 46, .16); border-radius: 6px; }
.board .c.own-uri { background: rgba(27, 42, 65, .16); border-radius: 6px; }
.board .c.stolen { animation: stolen .7s ease-out; }
@keyframes stolen { 30% { transform: scale(1.35) rotate(8deg); } }

/* sabotaje */
.powers { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.pw-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: 1; }
.pw { width: 76px; height: 56px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FFF3DE; box-shadow: inset 0 0 0 2px #E9CF9A; animation: pwin .4s cubic-bezier(.3, 1.8, .5, 1); }
.pw span { font-size: 24px; line-height: 1; }
.pw small { font-size: 11px; font-weight: 700; color: var(--marron); }
.pw.empty { background: #F4EFEA; box-shadow: none; color: #CFC3B8; font-weight: 700; font-size: 20px; animation: none; }
@keyframes pwin { from { transform: scale(.3); } }
.board { transition: transform .5s cubic-bezier(.3, .8, .3, 1), filter .5s; }
.board.pw-niebla .cells { filter: blur(3.5px); }
.board.pw-terremoto { animation: quake .12s linear infinite; }
@keyframes quake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-5px, 3px) rotate(-1deg); } 50% { transform: translate(4px, -3px) rotate(1deg); } 75% { transform: translate(-3px, -4px); } 100% { transform: translate(0, 0); } }
.board.pw-giro { transform: rotate(180deg); }
.board.pw-espejo { transform: scaleX(-1); }
.board.pw-giro.pw-espejo { transform: rotate(180deg) scaleX(-1); }
.board.pw-mini .cells .c { scale: var(--ms, .6); transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.ink { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ink i { position: absolute; aspect-ratio: 1; border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%; background: radial-gradient(circle at 40% 40%, #2A1A33, #120B17); opacity: .92; animation: inkin .4s cubic-bezier(.3, 1.6, .5, 1) both, inkout .6s 4.4s forwards; }
@keyframes inkin { from { transform: scale(.1); } }
@keyframes inkout { to { opacity: 0; transform: scale(.9); } }

/* logros */
.achv-toast { box-shadow: 0 14px 40px rgba(27, 20, 18, .2), inset 0 0 0 2px #D6A13E; }
.achv-toast b { color: #B5832A; }
.achv-chip { display: inline-block; font-size: 11px; font-weight: 700; color: #B5832A; background: #FFF6DC; border-radius: 999px; padding: 2px 7px; margin-left: 4px; vertical-align: 2px; }
.achv-list { display: grid; gap: 4px; }
.achv { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.achv:first-child { border-top: 0; }
.a-icon { font-size: 26px; width: 34px; text-align: center; filter: grayscale(1); opacity: .5; }
.achv.done .a-icon { filter: none; opacity: 1; }
.achv > div { flex: 1; min-width: 0; }
.achv b { display: block; font-size: 14px; }
.achv small { font-size: 12px; color: var(--muted); }
.achv em { font-style: normal; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; }
.achv.done em { color: #2E8B57; }
.achv em small { display: flex; align-items: center; gap: 2px; font-weight: 600; }

/* ================= v16: sabotajes por sorpresa ================= */
.offer { position: fixed; left: 50%; bottom: calc(var(--safe-bot) + 18px); transform: translateX(-50%); z-index: 96; width: min(calc(100vw - 32px), 360px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px 18px 12px; border-radius: 22px; background: #2A1A12; color: #fff; text-align: left; box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 3px #F2B33D, 0 0 30px rgba(242, 179, 61, .55); animation: offerin .45s cubic-bezier(.2, .9, .3, 1.4) both, offerglow .5s ease-in-out infinite alternate; }
.offer .of-icon { font-size: 40px; animation: bombwob .3s ease-in-out infinite alternate; }
.of-txt b { display: block; font-size: 19px; }
.of-txt small { font-size: 13px; color: #F2D08A; font-weight: 600; }
.of-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; margin-top: 6px; }
.of-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #E4572E, #F2B33D); animation: ofbar linear forwards; transform-origin: left; }
@keyframes ofbar { to { transform: scaleX(0); } }
@keyframes offerin { from { transform: translate(-50%, 160%) scale(.8) rotate(-4deg); } }
@keyframes offerglow { to { box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 3px #F2B33D, 0 0 44px rgba(242, 179, 61, .9); } }
.offer.out { animation: offerout .35s forwards; }
@keyframes offerout { to { transform: translate(-50%, 160%); opacity: 0; } }
.offer.fire { animation: offerfire .45s cubic-bezier(.5, 0, .8, .3) forwards; }
@keyframes offerfire { to { transform: translate(-50%, -110vh) scale(.5) rotate(20deg); opacity: .4; } }

.math-modal { background: #fff; border-radius: 26px; padding: 22px 20px 20px; width: 100%; max-width: 340px; text-align: center; animation: popin .3s cubic-bezier(.2, .9, .3, 1.3); box-shadow: 0 0 0 4px #F2B33D; }
.math-modal h2 { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 44px; color: var(--vino); margin: 6px 0 4px; }
.math-val { font-size: 36px; font-weight: 800; color: var(--ink); min-height: 48px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.math-modal .keypad button { height: 56px; }
.math-modal .keypad .ok { background: #2E8B57; color: #fff; }

.words.pw-borrosas, .hidden-words.pw-borrosas { filter: blur(5px); transition: filter .4s; }
#words { transition: filter .4s; }
.board.pw-colores .c { animation: rainbow .5s linear infinite; }
.board.pw-colores .c:nth-child(3n) { animation-delay: -.15s; }
.board.pw-colores .c:nth-child(3n+1) { animation-delay: -.3s; }
.board.pw-colores .c:nth-child(5n) { animation-duration: .35s; }
@keyframes rainbow { 0% { color: #E4572E; } 20% { color: #F2B33D; } 40% { color: #2E8B57; } 60% { color: #2E6FB5; } 80% { color: #7A3DB8; } 100% { color: #E4572E; } }

/* ================= v17: tienda de estilos, sopa dorada, palabra secreta, más animaciones ================= */
/* diseños de sopa (sirven para el tablero y para la vista previa de la tienda) */
.skin-papel { background: repeating-linear-gradient(0deg, rgba(139, 94, 60, .06) 0 1px, transparent 1px 22px), #F7EFD9 !important; }
.skin-papel .c { color: #5A3E2B; font-family: Georgia, 'Times New Roman', serif; }
.skin-madera { background: repeating-linear-gradient(92deg, #C99A6B 0 14px, #BE8D5D 14px 22px, #CFA374 22px 40px) !important; }
.skin-madera .c { color: #3E2616; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.skin-pizarra { background: radial-gradient(circle at 30% 20%, #3A4A42, #26312B) !important; }
.skin-pizarra .c { color: #F4F1E8; text-shadow: 0 0 2px rgba(255, 255, 255, .5); font-weight: 500; }
.skin-noche { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 80%, #FFE9A8, transparent), radial-gradient(1px 1px at 85% 15%, #fff, transparent), linear-gradient(160deg, #1B2A55, #0B1226) !important; background-size: 120px 120px, 90px 90px, 150px 150px, 110px 110px, auto !important; }
.skin-noche .c { color: #E8EEFF; text-shadow: 0 0 6px rgba(160, 190, 255, .5); }
.skin-neon { background: #0B0B14 !important; }
.skin-neon .c { color: #FF6EC7; text-shadow: 0 0 4px #FF6EC7, 0 0 10px rgba(255, 110, 199, .6); }
.skin-neon .c:nth-child(2n) { color: #5CF2FF; text-shadow: 0 0 4px #5CF2FF, 0 0 10px rgba(92, 242, 255, .6); }
.skin-tricolor { background: linear-gradient(#FFF1BD 0 50%, #D9E4F7 50% 75%, #F8D7D7 75%) !important; }
.skin-tricolor .c { color: #2A201D; }
.board.skin-noche .marks, .board.skin-neon .marks, .board.skin-pizarra .marks { filter: brightness(2.3) saturate(1.2); }

/* estelas del dedo */
.board .marks .live polyline { transition: stroke .2s; }
.trail-oro .marks .live polyline { stroke: rgba(214, 161, 62, .6) !important; }
.trail-hielo .marks .live polyline { stroke: rgba(110, 198, 240, .6) !important; }
.trail-amor .marks .live polyline { stroke: rgba(231, 84, 128, .55) !important; }
.trail-fuego .marks .live polyline { stroke: rgba(228, 87, 46, .6) !important; animation: flick .18s infinite alternate; }
.trail-arcoiris .marks .live polyline { animation: rainstroke 1s linear infinite; }
@keyframes flick { from { stroke-width: .74; } to { stroke-width: .9; } }
@keyframes rainstroke { 0% { stroke: rgba(228, 87, 46, .6); } 25% { stroke: rgba(242, 179, 61, .6); } 50% { stroke: rgba(46, 139, 87, .6); } 75% { stroke: rgba(46, 111, 181, .6); } 100% { stroke: rgba(228, 87, 46, .6); } }

/* modo fuego (combo x3 o más) */
.board.onfire { box-shadow: 0 0 0 3px #F28C28, 0 0 36px rgba(242, 140, 40, .6) !important; animation: firepulse .45s ease-in-out infinite alternate; }
.board.onfire .marks .live polyline { stroke: rgba(228, 87, 46, .65) !important; }
@keyframes firepulse { to { box-shadow: 0 0 0 4px #E4572E, 0 0 50px rgba(228, 87, 46, .75) !important; } }

/* sopa dorada */
.board.golden { background: linear-gradient(135deg, #FFF6DC, #FDE3A7 50%, #FFF6DC) !important; box-shadow: 0 0 0 3px #D6A13E, 0 0 34px rgba(214, 161, 62, .55) !important; }
.board.golden .c { color: #7A4E0E; }
.board.golden::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); background-size: 250% 100%; animation: goldshine 3s ease-in-out infinite; z-index: 1; }
@keyframes goldshine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
.gold-tag { color: #B5832A; }
.poptext.golden { color: #B5832A; font-size: 32px; text-align: center; }
.poptext.secret { color: #5A3E2B; font-size: 28px; text-align: center; }

/* palabra secreta */
.secret-note { display: inline-block; font-weight: 600; color: var(--marron); animation: whisper 2.4s ease-in-out infinite; }
.secret-note.got { color: #B5832A; animation: none; }
@keyframes whisper { 50% { opacity: .45; } }

/* contador de patacones que sube o baja */
.pill.up { animation: bump .4s ease-out 3; color: #2E8B57; }
.pill.down { color: var(--vino); }

/* ruleta del día */
.spin-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 12px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(120deg, #2A1A12, #5A3E2B); color: #fff; box-shadow: var(--shadow), 0 0 0 2px #F2B33D; animation: offerglow 1s ease-in-out infinite alternate; }
.sc-wheel { font-size: 36px; animation: spinw 3s linear infinite; }
@keyframes spinw { to { transform: rotate(360deg); } }
.sc-txt { flex: 1; }
.sc-txt b { display: block; font-size: 17px; }
.sc-txt small { font-size: 13px; color: #F2D08A; }
.sc-go { background: #F2B33D; color: #2A1A12; font-weight: 800; padding: 8px 14px; border-radius: 999px; animation: bump 1.2s infinite; }

/* tienda */
.shop-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.shc-icon { font-size: 30px; }
.shc-txt { flex: 1; min-width: 0; }
.shc-txt b { display: block; font-size: 16px; }
.shc-txt small { font-size: 12px; color: var(--muted); }
.shc-prev { display: flex; }
.shc-prev i { width: 22px; height: 22px; border-radius: 7px; margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.shop-h { margin: 18px 4px 8px; color: var(--on-bg-muted); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-item { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.shop-item.on { box-shadow: var(--shadow), inset 0 0 0 2px #2E8B57; }
.shop-item b { font-size: 14px; }
.shop-item .btn { min-height: 40px; font-size: 14px; padding: 0 10px; }
.mini-sopa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mini-sopa .c { font-weight: 700; font-size: 18px; padding: 4px 0; }
.mini-trail { width: auto !important; aspect-ratio: auto !important; height: 70px; padding: 8px !important; border-radius: 12px; background: #F6F1EB !important; box-shadow: none !important; }
.mini-trail svg { width: 100%; height: 100%; }
.mini-trail .tl { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke: rgba(139, 94, 60, .4); }
.mini-trail.trail-oro .tl { stroke: rgba(214, 161, 62, .75); }
.mini-trail.trail-hielo .tl { stroke: rgba(110, 198, 240, .8); }
.mini-trail.trail-amor .tl { stroke: rgba(231, 84, 128, .7); }
.mini-trail.trail-fuego .tl { stroke: rgba(228, 87, 46, .75); animation: flick2 .18s infinite alternate; }
.mini-trail.trail-arcoiris .tl { animation: rainstroke2 1.2s linear infinite; }
@keyframes flick2 { to { stroke-width: 11; } }
@keyframes rainstroke2 { 0% { stroke: #E4572E; } 25% { stroke: #F2B33D; } 50% { stroke: #2E8B57; } 75% { stroke: #2E6FB5; } 100% { stroke: #E4572E; } }

/* fondo animado del inicio */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; bottom: -60px; font-style: normal; opacity: .13; animation: drift linear infinite; }
@keyframes drift { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-55vh) translateX(20px) rotate(180deg); } 100% { transform: translateY(-115vh) rotate(360deg); } }
#app { position: relative; z-index: 1; }
.duo.icons { grid-template-columns: repeat(5, 1fr); gap: 7px; }
.duo.icons .btn { min-height: 58px; font-size: 27px; padding: 0; }

/* ===== v18: sin conexión, contrarreloj, serpiente individual, sabotajes suaves ===== */
#netpill { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); transform: translateX(-50%); z-index: 90; background: var(--azul); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(27, 42, 65, .25); animation: npin .35s cubic-bezier(.3, 1.5, .5, 1) both; pointer-events: none; white-space: nowrap; }
#netpill.out { animation: npout .35s forwards; }
@keyframes npin { from { transform: translate(-50%, -30px); opacity: 0; } }
@keyframes npout { to { transform: translate(-50%, -30px); opacity: 0; } }
.offline-card { display: flex; gap: 12px; align-items: flex-start; background: #EEF1F6; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: inset 0 0 0 1.5px rgba(27, 42, 65, .12); }
.offline-card > span { font-size: 26px; line-height: 1; }
.offline-card b { display: block; color: var(--azul); }
.offline-card small { color: #4F5B6E; font-size: 13px; line-height: 1.4; }
.off-line { color: #4F5B6E; font-size: 13px; }

/* modos individuales en el inicio */
.solo-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mode-tile { position: relative; overflow: hidden; text-align: left; border: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 12px; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.mode-tile .mt-icon { font-size: 30px; line-height: 1; margin-bottom: 6px; display: inline-block; animation: floaty 3.6s ease-in-out infinite; }
.mode-tile:nth-child(2) .mt-icon { animation-delay: -1.8s; }
.mode-tile b { font-size: 16px; font-weight: 700; }
.mode-tile small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-tile em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--marron); border-radius: 999px; padding: 3px 8px; }
.mode-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); animation: tileshine 5s 1s ease-in-out infinite; pointer-events: none; }
.mode-tile:nth-child(2)::after { animation-delay: 3.5s; }
@keyframes tileshine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* récords */
.eyebrow.center { text-align: center; margin-top: 10px; color: var(--on-bg-muted); }
.rec-duo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 14px; }
.rec-vs { font-family: 'Shrikhand', serif; color: var(--muted); font-size: 16px; }
.rec-p { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 18px 10px; min-width: 104px; }
.rec-p.lead { box-shadow: 0 10px 26px rgba(214, 161, 62, .28), inset 0 0 0 2px #D6A13E; }
.rec-p .crown { position: absolute; top: -16px; font-size: 22px; animation: crown 2.4s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateY(-3px) rotate(-8deg); } }
.rp-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: 'Shrikhand', serif; font-size: 17px; margin-bottom: 4px; }
.rp-av.babi { background: var(--vino); }
.rp-av.uri { background: var(--azul); }
.rec-p b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.rec-p small { font-size: 12px; color: var(--muted); font-weight: 600; }
.modal .rec-duo { margin: 14px 0 2px; }
.modal .rec-p { box-shadow: 0 2px 10px rgba(0, 0, 0, .06); padding: 10px 14px 8px; min-width: 92px; }
.rec-big { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 40px; color: var(--vino); line-height: 1; vertical-align: -6px; }
.rules-list { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 8px; }
.rules-list li { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 12px; font-size: 14px; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.rules-list li > span { width: 26px; text-align: center; font-size: 18px; flex: none; display: grid; place-items: center; }
.big-go { min-height: 56px; font-size: 18px; animation: gopulse 2s ease-in-out infinite; }
@keyframes gopulse { 50% { transform: scale(1.025); box-shadow: 0 10px 26px rgba(123, 30, 46, .3); } }
.rec-hero { display: grid; place-items: center; margin: 6px 0 4px; }
.rec-dial { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.rec-dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rec-dial circle { fill: none; stroke-width: 9; }
.rd-bg { stroke: rgba(0, 0, 0, .06); }
.rd-fg { stroke: var(--vino); stroke-linecap: round; stroke-dasharray: 327; animation: dial 6s linear infinite; }
@keyframes dial { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 327; } }
.rec-dial span { font-family: 'Shrikhand', serif; font-size: 40px; color: var(--vino); line-height: 1; margin-top: -8px; }
.rec-dial small { position: absolute; bottom: 36px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.snake-hero { display: flex; justify-content: center; gap: 2px; margin: 18px 0 6px; font-family: 'Shrikhand', serif; font-size: 30px; color: var(--vino); }
.snake-hero i { font-style: normal; display: inline-block; animation: snakewave 1.6s ease-in-out infinite; animation-delay: calc(var(--k) * -120ms); }
@keyframes snakewave { 50% { transform: translateY(-9px) rotate(-6deg); color: var(--marron); } }

/* partida de contrarreloj */
.rec-score { display: flex; flex-direction: column; align-items: center; min-width: 58px; background: var(--card); border-radius: 14px; padding: 4px 8px; box-shadow: var(--shadow); }
.rec-score b { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--vino); font-variant-numeric: tabular-nums; }
.rec-score small { font-size: 10px; color: var(--muted); font-weight: 600; }
.rec-timer { position: relative; display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; }
.rt-num { min-width: 78px; height: 46px; border-radius: 14px; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .3s; }
.rec-timer.warn .rt-num { background: var(--vino); animation: warnpulse .5s ease-in-out infinite alternate; }
@keyframes warnpulse { to { transform: scale(1.06); } }
.rt-bars { flex: 1; display: grid; gap: 6px; }
.rt-bars .timebar { margin: 0; height: 8px; }
.rec-timer.warn .timebar i { background: linear-gradient(90deg, #E4572E, var(--vino)); }
.fastbar { display: flex; align-items: center; gap: 6px; opacity: .35; transition: opacity .2s; }
.rec-timer.hotwin .fastbar { opacity: 1; }
.fastbar em { font-style: normal; font-size: 12px; }
.fastbar span { flex: 1; height: 5px; border-radius: 9px; background: rgba(0, 0, 0, .06); overflow: hidden; }
.fastbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F2B33D, #D6A13E); border-radius: 9px; }
.rec-plus { position: absolute; left: 14px; top: -6px; font-weight: 800; font-size: 20px; color: #2E8B57; pointer-events: none; animation: recplus 1s cubic-bezier(.2, .8, .3, 1) forwards; text-shadow: 0 2px 0 #fff; z-index: 3; }
.rec-plus.fast { color: #C98A12; font-size: 23px; }
@keyframes recplus { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 20% { transform: translateY(-10px) scale(1.15); opacity: 1; } 100% { transform: translateY(-38px) scale(1); opacity: 0; } }
.rec-game .board, .snake-game .board { animation: boardin .35s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes boardin { from { transform: translateX(26px) scale(.97); opacity: .3; } }
.countdown.up { background: var(--marron); min-width: 64px; }

/* sabotaje giro: solo giran las letras, cada una a su aire */
.board.pw-giro { transform: none; }
.board.pw-giro.pw-espejo { transform: scaleX(-1); }
.board .cells .c { transition: rotate .45s cubic-bezier(.3, 1.5, .5, 1); }
.board.pw-giro .cells .c { rotate: var(--rot, 180deg); }

/* ===== v19: camino nuevo (mundos), estrellas, sopa del mes, juguetes ===== */
.c-vino { --lcs: rgba(123, 30, 46, .06); --lcd: #5E1622; }
.c-azul { --lcs: rgba(27, 42, 65, .06); --lcd: #111C2D; }
.c-marron { --lcs: rgba(139, 94, 60, .08); --lcd: #6B452A; }
.path-top { box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.path2 { margin: 0 -16px; padding-bottom: 20px; }
.world { position: relative; }
.world-head { position: sticky; top: var(--pt, 64px); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--lc); color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.wh-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: 24px; flex: none; }
.wh-txt { flex: 1; min-width: 0; }
.wh-txt span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.wh-txt b { display: block; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 21px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.wh-side small { font-size: 11px; opacity: .8; }
.wh-stars { font-weight: 700; font-size: 15px; color: #FFD66B; }
.wh-stars small { color: #fff; opacity: .6; font-weight: 600; }
.wh-bar { width: 78px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.wh-bar i { display: block; height: 100%; background: #fff; border-radius: 9px; }
.world.s-locked .world-head { background: #B9ACA0; }
.world.s-locked .wh-icon { filter: grayscale(1); }
.world.s-done .world-head { background: var(--lcd); }
.world-body { position: relative; background: var(--lcs, rgba(0, 0, 0, .03)); overflow: hidden; }
.world.s-locked .world-body { background: rgba(0, 0, 0, .025); }
.world-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, rgba(0, 0, 0, .025)); pointer-events: none; }
.deco { position: absolute; opacity: .5; animation: decofloat 7s ease-in-out infinite; user-select: none; -webkit-user-select: none; z-index: 1; }
.world.s-locked .deco { filter: grayscale(1); opacity: .2; }
@keyframes decofloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
.deco.toyed { animation: toyspin .5s cubic-bezier(.3, 1.6, .5, 1); opacity: .9; }
.path2 .track { z-index: 2; }
.track-bed { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 16; stroke-linecap: round; }
.path2 .track-base { stroke: #E2D8CE; stroke-width: 6; stroke-dasharray: 2 12; }
.path2 .track-done { stroke: var(--lc, var(--marron)); stroke-width: 6; }
.path2 .node, .path2 .chest { z-index: 3; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.path2 .node:not(.seen), .path2 .chest:not(.seen) { opacity: 0; transform: scale(.4); }
.path2 .node-core { border: 3px solid #fff; }
.path2 .node.current .node-core { background: #fff; box-shadow: 0 6px 18px rgba(123, 30, 46, .25); animation: curbounce 2.4s ease-in-out infinite; }
@keyframes curbounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } 95% { transform: translateY(-2px); } }
.path2 .node.done .node-core { background: #fff; }
.path2 .node-label { background: rgba(255, 255, 255, .92); padding: 2px 9px 3px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); color: var(--ink); display: flex; flex-direction: column; align-items: center; overflow: visible; }
.path2 .node.locked .node-label { color: #A89A8E; background: rgba(255, 255, 255, .6); }
.nstars { display: flex; gap: 1px; font-size: 12px; line-height: 1; margin-top: 1px; }
.nstars i, .gs-stars i { font-style: normal; color: #E2D8CE; }
.nstars i.on, .gs-stars i.on { color: #F2B33D; text-shadow: 0 0 6px rgba(242, 179, 61, .5); }
.gs-stars { display: flex; justify-content: center; gap: 1px; font-size: 14px; margin-top: 2px; }
.path2 .bubble { background: var(--lc, var(--vino)); font-size: 13px; padding: 6px 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.path2 .bubble::after { border-top-color: var(--lc, var(--vino)); }
.path2 .chest.ready::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 179, 61, .45), transparent 70%); animation: chestglow 1.6s ease-in-out infinite alternate; }
@keyframes chestglow { to { transform: scale(1.25); opacity: .6; } }
.fog .world-head { position: relative; top: 0; }
.fog-body { text-align: center; padding: 30px 24px 40px; background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .025) 0 14px, transparent 14px 28px); }
.fog-body b { display: block; font-size: 18px; }
.fog-body p { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
.to-cur { position: fixed; left: 50%; bottom: calc(var(--safe-bot) + 18px); transform: translateX(-50%); z-index: 40; border: 0; background: var(--vino); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 24px rgba(123, 30, 46, .35); animation: npin .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.to-cur[hidden] { display: none; }

/* estrellas al terminar una sopa */
.win-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 2px; }
.win-stars i { font-style: normal; font-size: 46px; line-height: 1; color: #EFE7DF; transform: scale(0); }
.win-stars i:nth-child(2) { font-size: 58px; transform: scale(0) translateY(-8px); }
.win-stars i.in { animation: starin .5s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.win-stars i.on.in { color: #F2B33D; text-shadow: 0 4px 14px rgba(242, 179, 61, .55); }
.win-stars i:nth-child(2).in { animation-name: starin2; }
@keyframes starin { from { transform: scale(0) rotate(-120deg); } to { transform: scale(1) rotate(0); } }
@keyframes starin2 { from { transform: scale(0) translateY(-8px) rotate(-120deg); } to { transform: scale(1) translateY(-8px) rotate(0); } }
.win-stars-txt { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* sopa del mes */
.month-strip { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); margin-bottom: 12px; }
.ms-days { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--vino); color: #fff; flex: none; }
.ms-days b { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 22px; line-height: 1; }
.ms-days small { font-size: 10px; font-weight: 600; opacity: .85; }
.ms-txt { flex: 1; min-width: 0; }
.ms-txt b { display: block; font-size: 15px; }
.ms-txt small { font-size: 12px; color: var(--muted); line-height: 1.35; display: block; }
.ms-prize { display: flex; flex-direction: column; align-items: center; flex: none; }
.ms-prize > span { font-size: 30px; line-height: 1; animation: wob 2.6s ease-in-out infinite; }
.ms-prize small { font-size: 11px; font-weight: 700; color: var(--marron); white-space: nowrap; }
.ms-prize.got > span { filter: drop-shadow(0 0 8px rgba(242, 179, 61, .8)); }
@keyframes wob { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.08); } }
.mslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mslot { height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 2px dashed #D9CBBE; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #B9ACA0; overflow: hidden; }
.mslot i { font-style: normal; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 18px; animation: qbob 2.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
.mslot:nth-child(2) i { animation-delay: -.4s; } .mslot:nth-child(3) i { animation-delay: -.8s; } .mslot:nth-child(4) i { animation-delay: -1.2s; } .mslot:nth-child(5) i { animation-delay: -1.6s; } .mslot:nth-child(6) i { animation-delay: -2s; }
@keyframes qbob { 50% { transform: translateY(-3px); } }
.mslot.on { background: #2E8B57; border: 2px solid #2E8B57; color: #fff; letter-spacing: .03em; }
.mslot.on b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; }
.mslot.hide { background: rgba(255, 255, 255, .55); border: 2px dashed #D9CBBE; color: transparent; }
.mslot.pop { animation: slotpop .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes slotpop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.month-board .c.cov::before { background: linear-gradient(115deg, #F1EAE3 40%, #FFF8EE 50%, #F1EAE3 60%); background-size: 300% 100%; animation: covshine 4s linear infinite; animation-delay: calc(var(--d) * 3); }
@keyframes covshine { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.month-board .c.cov.wig { animation: wig .6s ease-in-out; }
@keyframes wig { 25% { transform: rotate(-12deg) scale(1.08); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
.month-board .c.cov.opening { animation: opening .5s ease-in-out infinite alternate; }
.month-board .c.cov.opening::before { background: #F2D08A; }
@keyframes opening { to { transform: scale(1.18) rotate(4deg); } }

/* letras que botan al tocarlas */
.board .c.poke { animation: poke .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes poke { 40% { transform: scale(1.35) translateY(-3px); color: var(--vino); } }

/* juguetes: cuanto más se toca, más se mueve */
.toyed { animation: toy .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes toy { 40% { transform: scale(calc(1.1 + var(--toy, 0) * .25)) rotate(calc(var(--toy, 0) * 14deg)); } }
@keyframes toyspin { 50% { transform: scale(1.6) rotate(25deg); } }
body.crazy #app { animation: crazy .12s linear 12; }
@keyframes crazy { 25% { transform: translate(-4px, 2px) rotate(-.6deg); } 75% { transform: translate(4px, -2px) rotate(.6deg); } }
.streak-pill .flame { display: inline-block; animation: flick 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(-3deg); } 30% { transform: scale(1.12, .95) rotate(3deg); } 60% { transform: scale(.95, 1.08) rotate(-2deg); } }
.btn:active { transform: scale(.97); }
.c-vino { --lcp: rgba(123, 30, 46, .09); } .c-azul { --lcp: rgba(27, 42, 65, .09); } .c-marron { --lcp: rgba(139, 94, 60, .11); }
.world-body { background-image: radial-gradient(var(--lcp, rgba(0, 0, 0, .05)) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.rt-bars .timebar { height: 14px; border-radius: 9px; }
.rt-bars .timebar i { transition: width .12s linear; }
.poptext small { display: block; font-size: .5em; font-weight: 700; margin-top: 4px; }

/* ===== v20: premio sorpresa nuevo ===== */
.reel { height: 92px; }
.reel-strip { top: 12px; gap: 8px; padding-left: 8px; }
.reel .ri { width: 66px; height: 68px; flex: none; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(42, 32, 29, .1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0; transition: opacity .4s, transform .3s; }
.ri b, .odds b { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1; }
.pz-coin { width: 24px; height: 24px; }
.pz-ic { font-size: 22px; line-height: 1; }
.ri.pz-c10, .ri.pz-c20 { background: linear-gradient(160deg, #FFF3D1, #F7D98B); }
.ri.pz-c20 b { color: #9A6512; }
.ri.pz-style { background: linear-gradient(160deg, #F3E8FF, #DCC6F7); }
.ri.pz-style b { font-size: 13px; color: #5B2E91; }
.ri.pz-choclo { background: linear-gradient(160deg, #F1FBD9, #CFEA8B); box-shadow: 0 0 0 2px #9BC53D, 0 2px 10px rgba(123, 180, 30, .35); }
.reel.spinning .reel-strip { filter: blur(.6px); }
.reel.done .ri:not(.win) { opacity: .3; transform: scale(.9); }
.ri.win { animation: winpulse .8s ease-in-out infinite; z-index: 2; position: relative; box-shadow: 0 0 0 3px #D6A13E, 0 8px 22px rgba(214, 161, 62, .5); }
@keyframes winpulse { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.2); } }
.loot-msg { color: var(--muted); margin: 12px 0 4px; min-height: 22px; font-size: 15px; }
.loot-msg b { color: var(--vino); font-size: 18px; }
.loot-msg small { font-size: 12px; }
.loot-prize { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 4px; animation: popin .4s cubic-bezier(.3, 1.6, .5, 1); }
.loot-prize .mini-sopa, .loot-prize .mini-trail, .loot-prize .mini-mark, .loot-prize .mini-try, .loot-prize .mini-title { width: 160px; }
.big-pill { font-size: 22px; padding: 10px 18px; animation: winpulse 1s ease-in-out infinite; }
.odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.odds > span { display: flex; align-items: center; gap: 3px; background: #F6F1EB; border-radius: 999px; padding: 3px 8px 3px 5px; font-size: 0; }
.odds b { font-size: 13px; }
.odds .pz-coin { width: 15px; height: 15px; }
.odds .pz-ic { font-size: 13px; }
.odds small { font-size: 10px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.odds .pz-choclo { background: #EAF6CC; }
.odds .pz-style { background: #EEE3FA; }

/* ===== v20: tienda grande, estilos nuevos, Ojo de halcón ===== */
/* inicio: tres modos individuales */
.solo-modes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-tile { padding: 12px 10px 10px; align-items: center; text-align: center; }
.mode-tile .mt-icon { font-size: 28px; margin-bottom: 4px; }
.mode-tile b { font-size: 14px; line-height: 1.15; }
.mode-tile small { font-size: 11px; white-space: normal; line-height: 1.25; }
.mode-tile em { display: none; }
.title-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #D6A13E, #B5832A); padding: 3px 9px; border-radius: 999px; vertical-align: 4px; box-shadow: 0 2px 6px rgba(181, 131, 42, .35); }
.card .title-tag { margin: 2px 0 6px; }

/* tienda */
.shop-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.deal-card, .mystery-card { position: relative; border: 0; font: inherit; color: var(--ink); background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; overflow: hidden; }
.deal-card { box-shadow: var(--shadow), inset 0 0 0 2px #E4572E; }
.dc-tag { font-size: 11px; font-weight: 800; color: #fff; background: #E4572E; border-radius: 999px; padding: 3px 9px; animation: bump 1.4s infinite; }
.deal-card b, .mystery-card b { font-size: 14px; }
.dc-price { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.dc-price s { color: var(--muted); font-weight: 600; font-size: 12px; }
.deal-card .mini-sopa, .deal-card .mini-trail, .deal-card .mini-mark, .deal-card .mini-try, .deal-card .mini-title { width: 100%; }
.mystery-card { background: linear-gradient(160deg, #3A2350, #1B2A41); color: #fff; }
.mystery-card small { font-size: 12px; opacity: .8; }
.mystery-card .dc-price { color: #F2D08A; }
.mystery-card[disabled] { opacity: .5; }
.mc-box { font-size: 46px; line-height: 1; animation: boxshake 2.2s ease-in-out infinite; margin: 6px 0 2px; filter: drop-shadow(0 4px 10px rgba(242, 208, 138, .45)); }
@keyframes boxshake { 0%, 60%, 100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-12deg) scale(1.08); } 74% { transform: rotate(10deg) scale(1.08); } 82% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }
.mystery-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%); transform: translateX(-120%); animation: tileshine 3.5s ease-in-out infinite; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: var(--bg); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); min-width: 62px; transition: background .2s, color .2s, transform .2s; }
.tabs button span { font-size: 20px; line-height: 1.1; }
.tabs button small { font-size: 10px; font-weight: 600; color: var(--muted); }
.tabs button.on { background: var(--vino); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(123, 30, 46, .3); }
.tabs button.on small { color: rgba(255, 255, 255, .75); }
.shop-item { position: relative; }
.shop-item.deal { box-shadow: var(--shadow), inset 0 0 0 2px #E4572E; }
.deal-tag { position: absolute; top: -6px; right: -4px; background: #E4572E; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 999px; z-index: 2; }
.mini-mark { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 800; letter-spacing: .25em; font-size: 15px; }
.mini-mark span { padding: 2px 4px 2px 8px; border-radius: 999px; }
.mini-mark em { font-style: normal; color: var(--muted); font-size: 13px; }
.mini-mark.mark-arcoiris span { animation: huespin 2s linear infinite; }
@keyframes huespin { to { filter: hue-rotate(360deg); } }
.mini-try { border: 0; font: inherit; border-radius: 12px; background: #F6F1EB; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.mini-try span { font-size: 32px; line-height: 1; animation: wob 2.6s ease-in-out infinite; }
.mini-try small { font-size: 10px; color: var(--muted); font-weight: 600; }
.mini-title { height: 70px; border-radius: 12px; background: #F6F1EB; display: grid; place-items: center; padding: 6px; }
.mini-title .title-tag { font-size: 12px; white-space: normal; }
.mystery-modal { background: #fff; border-radius: 26px; padding: 26px 22px 22px; width: 100%; max-width: 340px; text-align: center; animation: popin .35s cubic-bezier(.2, .9, .3, 1.2); }
.mm-box { font-size: 96px; line-height: 1; margin: 20px 0; transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
.mm-prize { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: popin .45s cubic-bezier(.3, 1.6, .5, 1); }
.mm-prize > div, .mm-prize > button.mini-try { width: 170px; }
.mm-prize h2 { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 26px; margin: 4px 0 0; }
.mm-prize p { color: var(--muted); margin: 0 0 6px; }

/* diseños de sopa nuevos */
.skin-playa { background: linear-gradient(180deg, #BFE8F5 0 38%, #F7E3B5 38%) !important; }
.skin-playa .c { color: #1E5A73; }
.skin-bosque { background: radial-gradient(circle at 20% 10%, #DCEFD6, #B9D9AE) !important; }
.skin-bosque .c { color: #2F5A27; }
.skin-algodon { background: linear-gradient(135deg, #FFD6EC, #D9E8FF 50%, #FFF3C9) !important; }
.skin-algodon .c { color: #8A3D78; }
.skin-chocolate { background: repeating-linear-gradient(0deg, #6B3F24 0 2px, transparent 2px 33%), repeating-linear-gradient(90deg, #6B3F24 0 2px, transparent 2px 33.3%), #7B4A2D !important; }
.skin-chocolate .c { color: #FBE7D0; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.skin-retro { background: #9BBC0F !important; }
.skin-retro .c { color: #0F380F; font-family: 'Courier New', monospace; font-weight: 800; }
.skin-sandia { background: linear-gradient(180deg, #F46B7C 0 86%, #F9F3E6 86% 92%, #3F9E4B 92%) !important; }
.skin-sandia .c { color: #fff; text-shadow: 0 1px 2px rgba(120, 0, 20, .4); }
.skin-galaxia { background: radial-gradient(1px 1px at 15% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 80% 20%, #FFE9A8, transparent), radial-gradient(circle at 30% 30%, #5B2E91, #1A0F3A 70%) !important; }
.skin-galaxia .c { color: #F3E8FF; text-shadow: 0 0 6px rgba(200, 160, 255, .7); }
.board.skin-galaxia .marks, .board.skin-chocolate .marks, .board.skin-sandia .marks { filter: brightness(2) saturate(1.2); }

/* estelas nuevas */
.trail-menta .marks .live polyline { stroke: rgba(60, 203, 154, .6) !important; }
.trail-oceano .marks .live polyline { stroke: rgba(30, 127, 194, .55) !important; }
.trail-veneno .marks .live polyline { stroke: rgba(123, 211, 33, .6) !important; }
.trail-purpurina .marks .live polyline { stroke: rgba(242, 179, 61, .6) !important; animation: huespin 1s linear infinite; }
.trail-galaxia .marks .live polyline { stroke: rgba(122, 61, 184, .6) !important; }
.mini-trail.trail-menta .tl { stroke: rgba(60, 203, 154, .8); }
.mini-trail.trail-oceano .tl { stroke: rgba(30, 127, 194, .75); }
.mini-trail.trail-veneno .tl { stroke: rgba(123, 211, 33, .8); }
.mini-trail.trail-purpurina .tl { stroke: rgba(242, 179, 61, .8); animation: huespin 1s linear infinite; }
.mini-trail.trail-galaxia .tl { stroke: rgba(122, 61, 184, .75); }
/* marcas: arcoíris animado */
.solo-board.mark-arcoiris .found { animation: huespin 3s linear infinite; }
/* discoteca */
body.disco::before { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; animation: disco .3s steps(1) infinite; mix-blend-mode: multiply; }
@keyframes disco { 0% { background: rgba(255, 110, 199, .25); } 25% { background: rgba(92, 242, 255, .25); } 50% { background: rgba(242, 179, 61, .25); } 75% { background: rgba(123, 211, 33, .25); } }

/* Ojo de halcón */
.hawk-hero { position: relative; height: 130px; display: grid; place-items: center; }
.hawk { font-size: 84px; animation: hawkfly 3s ease-in-out infinite; }
@keyframes hawkfly { 50% { transform: translateY(-10px) rotate(-5deg); } }
.hawk-hero .eye { position: absolute; font-size: 26px; animation: blink 3.2s infinite; }
.hawk-hero .e1 { left: 18%; top: 30%; } .hawk-hero .e2 { right: 18%; top: 45%; animation-delay: -1.6s; }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.mem-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 6px; }
.hearts { display: flex; gap: 2px; font-size: 20px; }
.hearts i { font-style: normal; display: inline-block; transition: transform .3s, opacity .3s, filter .3s; }
.hearts i.broke { transform: scale(.7) rotate(-20deg); opacity: .35; filter: grayscale(1); animation: heartbreak .5s; }
@keyframes heartbreak { 30% { transform: scale(1.5); } }
.mem-phase { flex: 1; text-align: right; font-weight: 700; font-size: 15px; color: var(--on-bg); }
.mem-phase.view { color: var(--azul); animation: bump 1s infinite; }
.mem-phase.recall { color: var(--vino); }
.mem-phase.ok { color: #2E8B57; }
.mem-phase.bad { color: #E4572E; }
.viewbar { height: 8px; border-radius: 9px; background: rgba(0, 0, 0, .06); overflow: hidden; margin-bottom: 10px; }
.viewbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--azul), #5B7BA8); border-radius: 9px; }
.mem-hidden .c.cov::before { background: linear-gradient(135deg, #EDE4DB, #F7F1EA); }
.mem-game .board { animation: none; }

/* ===== v21: estrellas de la ficha, retos de mundo ===== */
.gs-sopa .gs-stars { display: flex; width: auto; height: auto; margin: 4px 0 0; border-radius: 0; background: none; font-weight: 400; justify-content: center; gap: 1px; }
.gs-sopa .gs-stars i { font-size: 13px; }
.chnode { position: absolute; width: 84px; height: 84px; margin-left: -42px; border: 0; background: none; padding: 0; z-index: 3; }
.ch-core { position: absolute; left: 10px; top: 10px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; background: linear-gradient(150deg, #FFE7A8, #F2B33D); box-shadow: 0 6px 16px rgba(214, 161, 62, .45), inset 0 0 0 3px #fff; transform: rotate(-6deg); transition: transform .2s; }
.chnode::before { content: ""; position: absolute; inset: 2px; border-radius: 24px; border: 2px dashed #D6A13E; opacity: .7; animation: chspin 12s linear infinite; }
@keyframes chspin { to { transform: rotate(360deg); } }
.ch-tag { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: var(--vino); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; z-index: 2; }
.ch-tag.solo { position: static; transform: none; }
.chnode.open .ch-core, .chnode.current .ch-core { animation: chpulse 1.6s ease-in-out infinite; }
@keyframes chpulse { 50% { transform: rotate(6deg) scale(1.08); box-shadow: 0 10px 24px rgba(214, 161, 62, .6), inset 0 0 0 3px #fff; } }
.chnode.done .ch-core { background: linear-gradient(150deg, #FFF3D1, #E8C170); transform: rotate(0); }
.chnode.done::before { border-style: solid; border-color: #3D9A5B; animation: none; }
.chnode.locked .ch-core { background: #E9E2DA; box-shadow: none; filter: grayscale(1); font-size: 24px; }
.chnode.locked::before { border-color: #CFC3B8; animation: none; }
.chnode .badge { left: 62px; top: 62px; }
.chnode .node-label { top: 86px; }
.path2 .chnode:not(.seen) { opacity: 0; transform: scale(.4); }
.path2 .chnode { transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.cg.ch-mini { background: #FFE7A8; }
.cg.ch-mini.locked, .cg.ch-mini.open { filter: none; opacity: 1; }
.ch-ic { background: linear-gradient(150deg, #FFE7A8, #F2B33D) !important; }
.ch-desc { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.ch-intro { background: #fff; border-radius: 26px; padding: 26px 22px; width: 100%; max-width: 340px; text-align: center; animation: popin .35s cubic-bezier(.2, .9, .3, 1.2); }
.ch-big { font-size: 70px; line-height: 1; margin: 10px 0; animation: chpulse 1.2s ease-in-out infinite; }
.ch-intro h2 { font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 28px; margin: 0 0 6px; }
.ch-intro p { color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.ch-count { font-family: 'Shrikhand', serif; font-size: 48px; color: var(--marron); }
.gs-sopa.ok .gs-stars, .gs-sopa .gs-stars { background: none !important; width: auto !important; height: auto !important; }
.gs-sopa .gs-stars i { color: #E2D8CE; font-size: 15px; }
.gs-sopa .gs-stars i.on { color: #F2B33D; }
/* textos flotantes largos: en varias líneas, nunca cortados */
.poptext { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 40px); line-height: 1.12; overflow-wrap: anywhere; }
.poptext small { font-size: .52em; }
/* presentación del reto: el icono sin recuadro */
.ch-big { animation: chbig 1.2s ease-in-out infinite; box-shadow: none; }
@keyframes chbig { 50% { transform: scale(1.12) rotate(6deg); } }

/* ===== v22: crucigrama del mes ===== */
.cross-card .cc-mini { display: flex; gap: 2px; }
.cc-mini i { font-style: normal; width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; font-weight: 800; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--marron); color: var(--vino); animation: ccbob 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .15s); }
@keyframes ccbob { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
.cross-strip .cx-bar { display: block; height: 5px; border-radius: 9px; background: rgba(0, 0, 0, .06); margin-top: 6px; overflow: hidden; }
.cx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2E8B57, #8FD3A8); border-radius: 9px; transition: width .6s; }
.xgrid { display: grid; gap: 2px; margin: 0 -8px 18px; background: transparent; }
.xgrid i.xx { aspect-ratio: 1; }
.xc { position: relative; aspect-ratio: 1; background: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(42, 32, 29, .12), inset 0 0 0 1px #E6DDD4; display: grid; place-items: center; font-weight: 800; font-size: clamp(12px, 4vw, 17px); color: var(--ink); cursor: pointer; transition: background .25s, transform .15s; }
.xc small { position: absolute; left: 2px; top: 0; font-size: 8px; font-weight: 700; color: var(--muted); line-height: 1; }
.xc.ok { background: #E3F4E8; color: #1F6B3D; }
.xc.sel { background: #FFF1C4; box-shadow: 0 0 0 2px #D6A13E; z-index: 1; }
.xc.pop { animation: xpop .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: var(--d); }
@keyframes xpop { 0% { transform: scale(.6); background: #8FD3A8; } 100% { transform: scale(1); } }
.xclues { display: grid; gap: 6px; }
.xclues .eyebrow { margin: 10px 0 2px; color: var(--on-bg-muted); }
.xcl { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; font: inherit; background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); color: var(--ink); }
.xcl b { width: 26px; height: 26px; border-radius: 8px; background: var(--vino-soft); color: var(--vino); display: grid; place-items: center; font-size: 13px; flex: none; }
.xcl span { flex: 1; font-size: 14px; line-height: 1.3; }
.xcl em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.xcl.ok { opacity: .55; }
.xcl.ok b { background: #E3F4E8; color: #2E8B57; }
.xcl.ok em { color: #2E8B57; }
.xcl.sel { box-shadow: inset 0 0 0 2px #D6A13E; }
.veil.cp-veil { align-items: flex-start; padding-top: calc(var(--safe-top) + 12px); background: rgba(27, 20, 18, .25); }
.clue-pop { background: #fff; border-radius: 22px; padding: 14px 16px 12px; width: 100%; max-width: 420px; box-shadow: 0 18px 50px rgba(27, 20, 18, .25); animation: popin .3s cubic-bezier(.2, .9, .3, 1.2); }
.cp-head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cp-num { color: var(--vino); }
.cp-head > span:nth-child(2) { flex: 1; }
.cp-x { border: 0; background: #F4EFEA; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; color: var(--muted); }
.cp-clue { font-size: 19px; font-weight: 700; margin: 8px 0 12px; line-height: 1.3; }
.cp-boxes { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; cursor: text; }
.cp-boxes i { font-style: normal; width: 30px; height: 36px; border-radius: 8px; background: #F6F1EB; box-shadow: inset 0 -3px 0 #E2D8CE; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--ink); }
.cp-boxes i.fixd { background: #FFF1C4; color: #9A6512; box-shadow: inset 0 -3px 0 #E8C170; }
.cp-boxes i.cur { box-shadow: inset 0 -3px 0 var(--vino), 0 0 0 2px var(--vino-soft); animation: curblink 1s infinite; }
@keyframes curblink { 50% { box-shadow: inset 0 -3px 0 transparent; } }
.cp-boxes i.in { animation: boxin .25s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes boxin { from { transform: scale(.5); } }
.cp-boxes i.win { background: #2E8B57; color: #fff; box-shadow: none; animation: boxwin .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes boxwin { 40% { transform: translateY(-8px) scale(1.15); } }
.cp-input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; top: 40%; font-size: 16px; border: 0; padding: 0; }
.cp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-actions .btn { min-height: 40px; font-size: 13px; padding: 0 8px; }
.cp-done { text-align: center; color: #2E8B57; font-weight: 700; margin: 0 0 6px; }
.cp-nav { display: flex; justify-content: space-between; margin-top: 8px; }
.cp-nav button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--marron); font-size: 14px; padding: 6px 4px; }

/* ===== v23: invitados y multijugador ===== */
.guests-login { margin-top: 18px; }
.guests-login .eyebrow { text-align: center; color: var(--on-bg-muted); }
.gl-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gl-item { display: flex; align-items: center; gap: 8px; border: 0; font: inherit; background: var(--card); border-radius: 999px; padding: 6px 14px 6px 6px; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.gl-av, .g-chip i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: 'Shrikhand', serif; font-size: 14px; font-style: normal; flex: none; }
.gl-item b { display: block; font-size: 14px; }
.gl-item small { font-size: 11px; color: var(--muted); }
.mp-people { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 55%; }
.mp-people small { width: 100%; text-align: right; font-size: 11px; color: var(--muted); }
.mp-av { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: 'Shrikhand', serif; font-size: 12px; opacity: .55; }
.mp-av.on { opacity: 1; }
.mp-av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #3D9A5B; box-shadow: 0 0 0 2px #fff; }
.mp-go { margin: 12px 0 4px; min-height: 54px; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mp-go span { font-size: 22px; }
.mp-go em { font-style: normal; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .2); padding: 3px 8px; border-radius: 999px; }
.mode-list { display: grid; gap: 8px; }
.mode-row { display: flex; align-items: center; gap: 12px; border: 0; font: inherit; text-align: left; background: #F6F1EB; border-radius: 16px; padding: 10px 12px; color: var(--ink); }
.mode-row .mr-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--marron); flex: none; }
.mode-row.cacao .mr-ic { background: #5A3E2B; }
.mr-txt { flex: 1; min-width: 0; }
.mr-txt b { display: block; font-size: 16px; }
.mr-txt small { font-size: 12px; color: var(--muted); }
.mr-go { font-size: 24px; color: var(--muted); }
.rivals { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.rivals::-webkit-scrollbar { display: none; }
.rivals button { flex: none; border: 0; font: inherit; background: #F6F1EB; border-radius: 16px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; color: var(--ink); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, transform .2s; }
.rivals button.on { box-shadow: inset 0 0 0 2px var(--vino); background: #fff; transform: translateY(-2px); }
.rivals i { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-family: 'Shrikhand', serif; font-size: 15px; }
.rivals i em { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #3D9A5B; box-shadow: 0 0 0 2px #fff; }
.rivals b { font-size: 13px; }
.rivals small { font-size: 10px; color: var(--muted); }
.lg-row.me span:first-child { font-weight: 700; }
.gtag { font-size: 10px; color: var(--muted); font-weight: 600; }
.guests-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.g-chip { display: flex; align-items: center; gap: 6px; background: #F6F1EB; border-radius: 999px; padding: 4px 4px 4px 4px; font-size: 13px; font-weight: 600; }
.g-chip i { width: 24px; height: 24px; font-size: 11px; }
.g-chip button { border: 0; background: #E6DDD4; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; color: var(--muted); }
.text-in { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; }
.rec-duo.trio { gap: 6px; }
.rec-duo.trio .rec-p { min-width: 0; flex: 1; padding: 10px 6px 8px; }
.rec-duo.trio .rec-vs { display: none; }
.ri.pz-c25 { background: linear-gradient(160deg, #FFF3D1, #F7D98B); }
.ri.pz-c25 b { color: #9A6512; }

/* ===== v24: crucigrama de 9, invitados de 3 en 3 ===== */
.xgrid { gap: 3px; margin: 0 0 18px; }
.xc { font-size: clamp(15px, 5.2vw, 22px); border-radius: 7px; }
.xc .xi { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: .8em; color: var(--vino); opacity: .28; }
.xc.tap { animation: xtap .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes xtap { 40% { transform: scale(1.18); background: #FFF1C4; } }
.clue-pop { position: relative; padding-top: 18px; }
.cp-x { position: absolute; top: 8px; right: 8px; }
.cp-boxes { margin: 8px 26px 12px; }
.cp-boxes i { width: 32px; height: 40px; font-size: 22px; }
.cp-boxes.long i { width: 25px; height: 34px; font-size: 18px; }
.cp-clue { text-align: center; font-size: 19px; margin: 4px 0 4px; }
.cp-meta { text-align: center; font-size: 12px; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.cp-nav button { background: #F6F1EB; border-radius: 999px; padding: 8px 14px; }
.cp-nav button:active { transform: scale(.94); }
.gl-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gl-item { flex-direction: column; border-radius: 18px; padding: 10px 6px; text-align: center; gap: 4px; }
.gl-item .gl-av { width: 38px; height: 38px; font-size: 17px; }
.gl-item b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-chips { display: grid; grid-template-columns: repeat(3, 1fr); }
.g-chip { min-width: 0; }
.g-chip { overflow: hidden; white-space: nowrap; }
.g-add { margin-top: 10px; min-height: 44px; }
.r-add { flex: none; border: 2px dashed #D9CBBE !important; font: inherit; background: transparent !important; border-radius: 16px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; color: var(--marron); }
.r-add i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 700; background: #F4ECE4 !important; color: var(--marron); }
.r-add b { font-size: 13px; }
.r-add small { font-size: 10px; color: var(--muted); }

.cross-card { display: block; width: 100%; text-align: left; }

/* ===== v25: Cazapalabras, A oscuras, Català ===== */
.solo-modes { grid-template-columns: repeat(3, 1fr); }
.senyera { display: inline-block; width: 30px; height: 21px; border-radius: 3px; background: repeating-linear-gradient(180deg, #FCDD09 0 11.11%, #DA121A 11.11% 22.22%); background-size: 100% 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); vertical-align: middle; }
.senyera { background: linear-gradient(180deg, #FCDD09 0 11.1%, #DA121A 11.1% 22.2%, #FCDD09 22.2% 33.3%, #DA121A 33.3% 44.4%, #FCDD09 44.4% 55.5%, #DA121A 55.5% 66.6%, #FCDD09 66.6% 77.7%, #DA121A 77.7% 88.8%, #FCDD09 88.8%); }
.senyera.sm { width: 20px; height: 14px; vertical-align: -1px; margin-right: 2px; }
.senyera.big { width: 150px; height: 100px; border-radius: 8px; animation: flagwave 3s ease-in-out infinite; transform-origin: left center; box-shadow: 0 10px 26px rgba(218, 18, 26, .25); }
@keyframes flagwave { 0%, 100% { transform: perspective(300px) rotateY(0) skewY(0); } 50% { transform: perspective(300px) rotateY(-14deg) skewY(-2deg); } }
.mode-tile .mt-icon .senyera { width: 34px; height: 24px; }
.lobby-hero { display: grid; place-items: center; min-height: 130px; margin: 6px 0; }
.hunt-hero { position: relative; font-size: 70px; }
.hunt-hero span { position: absolute; font-size: 22px; font-weight: 800; color: var(--vino); animation: qbob 2s ease-in-out infinite; }
.hunt-hero span:nth-child(1) { left: -30px; top: 0; } .hunt-hero span:nth-child(2) { right: -34px; top: 18px; animation-delay: -.7s; } .hunt-hero span:nth-child(3) { left: 10px; bottom: -8px; animation-delay: -1.4s; }
.hunt-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.hunt-found span { background: var(--card); border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 13px; box-shadow: var(--shadow); animation: popin .3s cubic-bezier(.3, 1.6, .5, 1); }
.hunt-found em { font-style: normal; color: #B5832A; margin-left: 5px; font-size: 11px; }
.hunt-found .hf-empty { background: none; box-shadow: none; color: var(--on-bg-muted); font-weight: 500; }
.hunt-miss { font-size: 12px; color: var(--muted); }
.dark-hero { position: relative; width: 220px; height: 110px; border-radius: 20px; background: #15101C; overflow: hidden; display: grid; place-items: center; }
.dark-hero b { font-size: 40px; letter-spacing: .3em; color: #15101C; background: radial-gradient(circle at var(--bx, 30%) 50%, #fff 0 18%, #15101C 32%); -webkit-background-clip: text; background-clip: text; animation: beam 3s ease-in-out infinite alternate; }
@keyframes beam { from { --bx: 10%; } to { --bx: 90%; } }
@property --bx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
.darkveil { position: absolute; inset: 0; z-index: 4; pointer-events: none; --x: 50%; --y: 50%; background: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 34px, #120C18 58px); transition: opacity 1s; }
.darkveil.on { background: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 52px, #120C18 84px); }
.darkveil.lightsup { opacity: 0; }
.board.darkmode { position: relative; }
.dict-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.dc-ic { font-size: 30px; }
.dc-txt { flex: 1; }
.dc-txt b { display: block; }
.dc-txt small { font-size: 12px; color: var(--muted); }
.dc-n { font-family: 'Shrikhand', serif; font-size: 26px; color: #DA121A; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.cat-chip { position: relative; border: 0; font: inherit; background: var(--card); border-radius: 16px; padding: 8px 14px; box-shadow: var(--shadow), inset 0 -3px 0 #FCDD09; display: flex; flex-direction: column; align-items: center; color: var(--ink); min-width: 90px; }
.cat-chip b { font-size: 17px; }
.cat-chip small { font-size: 13px; color: #2E8B57; font-weight: 700; }
.cat-chip.ok { box-shadow: var(--shadow), inset 0 -3px 0 #2E8B57; background: #F0FAF3; }
.cat-chip em { position: absolute; top: -8px; right: -6px; background: #DA121A; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; animation: bump 1s infinite; }
.cat-chip.flip { animation: chipflip .5s ease; }
@keyframes chipflip { 50% { transform: rotateX(90deg); } }
.cat-count { font-weight: 700; }
.cat-sum { display: grid; gap: 4px; margin: 6px 0; text-align: left; }
.cat-sum span { background: #F6F1EB; border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.cat-sum em { font-style: normal; font-size: 10px; background: #DA121A; color: #fff; border-radius: 999px; padding: 1px 6px; font-weight: 800; }
.dict-search { margin-bottom: 12px; }
.dict-list { display: grid; gap: 6px; }
.dict-row { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); animation: popin .3s both; animation-delay: calc(var(--i) * 25ms); }
.dict-row b { flex: 1; font-size: 16px; color: #9A1016; }
.dict-row span { flex: 1; font-size: 15px; color: var(--ink); text-align: right; }
.dict-row em { font-style: normal; font-size: 11px; color: var(--muted); }

/* ===== v26: barra inferior y páginas deslizables ===== */
body.tabs-on { overflow: hidden; overscroll-behavior: none; }
body.tabs-on #app { padding: 0; max-width: none; }
.shell { position: fixed; inset: 0; overflow: hidden; }
.pager { display: flex; height: 100%; will-change: transform; }
.pg { flex: 0 0 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; }
.pg-in { max-width: 480px; margin: 0 auto; padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bot) + 104px); }
.pg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pg-head .gtitle { flex: 1; min-width: 0; color: var(--on-bg); }
.pg-head .gtitle b { display: block; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 26px; color: var(--vino); line-height: 1.15; }
.pg-head .gtitle small { color: var(--on-bg-muted); font-size: 13px; }
.pg-head .counters .pill:last-child { display: none; }
.tabbar { position: fixed; left: 50%; bottom: calc(var(--safe-bot) + 10px); transform: translateX(-50%) translateY(140%); width: min(calc(100% - 20px), 460px); height: 66px; z-index: 50; display: flex; align-items: stretch; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-radius: 24px; box-shadow: 0 10px 34px rgba(42, 32, 29, .18), inset 0 0 0 1px rgba(255, 255, 255, .6); padding: 6px; transition: transform .45s cubic-bezier(.2, .9, .3, 1.1); }
body.tabs-on .tabbar { transform: translateX(-50%) translateY(0); }
.tabbar button { position: relative; z-index: 1; flex: 1; border: 0; background: none; font: inherit; color: #9C8E82; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; -webkit-tap-highlight-color: transparent; padding: 0; transition: color .25s; }
.tabbar .tb-ic { width: 26px; height: 26px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tabbar .tb-ic svg { width: 24px; height: 24px; }
.tabbar small { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; transition: opacity .25s; }
.tabbar button.on { color: #fff; }
.tabbar button.on .tb-ic { transform: translateY(-2px) scale(1.12); }
.tabbar button.on .tb-ic svg { stroke-width: 2.3; }
.tb-ind { position: absolute; left: 6px; top: 6px; bottom: 6px; width: calc((100% - 12px) / 5); border-radius: 18px; background: linear-gradient(160deg, #93283A, var(--vino)); box-shadow: 0 6px 16px rgba(123, 30, 46, .35); transition: transform .42s cubic-bezier(.2, .85, .25, 1); z-index: 0; }
.tb-ic.boing { animation: tbboing .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tbboing { 0% { transform: scale(.7); } 60% { transform: translateY(-5px) scale(1.25); } 100% { transform: translateY(-2px) scale(1.12); } }
.tb-badge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #E4572E; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: none; place-items: center; box-shadow: 0 0 0 2px #fff; }
.tb-badge.show { display: grid; animation: popin .35s cubic-bezier(.3, 1.8, .5, 1); }
.tb-badge.green { background: #3D9A5B; }
.tb-badge.gold { background: #D6A13E; }
.tb-badge.hot { background: #E4572E; }
.mp-modes { margin-top: 10px; }
.prof-hero { text-align: center; padding-top: 22px; }
.prof-av { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; color: #fff; font-family: 'Shrikhand', serif; font-size: 36px; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); animation: floaty 4s ease-in-out infinite; }
.prof-hero h2 { margin: 0 0 4px; font-family: 'Shrikhand', serif; font-weight: 400; color: var(--vino); font-size: 28px; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.prof-stats span { background: #F6F1EB; border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; }
.prof-stats b { font-size: 20px; color: var(--ink); }
.prof-stats small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.pr-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pr-rec { background: #F6F1EB; border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pr-rec span { font-size: 20px; line-height: 1.2; }
.pr-rec b { font-size: 18px; }
.pr-rec small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.p-link { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.p-link span { font-size: 26px; }
.p-link b { flex: 1; font-size: 16px; }
.p-link small { color: var(--muted); font-size: 13px; }
.p-link em { font-style: normal; color: var(--muted); font-size: 22px; }
.prof-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.prof-actions .btn { min-height: 46px; font-size: 14px; }

/* ===== v27: barra pegada abajo, atlas, rosa ===== */
.tabbar { left: 0; right: 0; bottom: 0; width: auto; height: calc(62px + var(--safe-bot)); transform: translateY(110%); border-radius: 0; padding: 5px 6px calc(5px + var(--safe-bot)); align-items: flex-start; background: rgba(255, 255, 255, .94); box-shadow: 0 -1px 0 rgba(42, 32, 29, .08), 0 -10px 30px rgba(42, 32, 29, .07); }
body.tabs-on .tabbar { transform: translateY(0); }
.tabbar button { height: 52px; }
.tb-ind { top: 5px; bottom: auto; height: 52px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 16px; }
.pg-in { padding-bottom: calc(var(--safe-bot) + 84px); }
.pager { backface-visibility: hidden; }
.pg { contain: layout paint; }
.cat-hero { position: relative; display: grid; place-items: center; }
.cat-hero .rose { font-size: 84px; animation: rosesway 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.cat-hero .book { position: absolute; font-size: 40px; right: -34px; bottom: -4px; transform: rotate(10deg); }
@keyframes rosesway { 50% { transform: rotate(-8deg) scale(1.04); } }
.atlas-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.at-globe { font-size: 36px; animation: spinglobe 8s linear infinite; }
@keyframes spinglobe { 50% { transform: rotate(-12deg) scale(1.06); } }
.at-txt { flex: 1; min-width: 0; }
.at-txt b { display: block; font-size: 16px; }
.at-txt small { display: block; font-size: 12px; color: var(--muted); }
.at-bar { display: block; height: 6px; border-radius: 9px; background: rgba(0, 0, 0, .06); overflow: hidden; margin-top: 6px; }
.at-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2E6FB5, #2E8B57); border-radius: 9px; }
.at-bar.big { height: 9px; margin: 6px 0 4px; }
.atlas-card em { font-style: normal; color: var(--muted); font-size: 22px; }
.atlas-hero { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.ah-globe { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #BFE3FF, #2E6FB5); display: grid; place-items: center; font-size: 56px; box-shadow: inset -6px -8px 16px rgba(0, 0, 0, .18); flex: none; }
.ah-globe span { animation: spinglobe 6s ease-in-out infinite; }
.ah-txt { flex: 1; }
.ah-txt b { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 34px; color: #2E6FB5; line-height: 1; }
.ah-txt small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.atlas-conts { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px 4px; scrollbar-width: none; }
.atlas-conts::-webkit-scrollbar { display: none; }
.atlas-conts button { flex: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 12px; display: flex; gap: 6px; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.atlas-conts button small { font-size: 11px; color: var(--muted); }
.atlas-conts button.on { background: #2E6FB5; color: #fff; }
.atlas-conts button.on small { color: rgba(255, 255, 255, .8); }
.atlas-q { margin-bottom: 10px; }
.atlas-list { display: grid; gap: 6px; }
.atlas-h { margin: 10px 0 2px; color: var(--on-bg-muted); }
.atlas-row { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 9px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); animation: popin .3s both; animation-delay: calc(var(--i) * 18ms); }
.ar-flag { font-size: 26px; line-height: 1; text-align: center; }
.ar-name, .ar-cap { font-size: 14px; color: #B9ACA0; font-weight: 600; min-width: 0; }
.ar-cap { text-align: right; }
.ar-name.on, .ar-cap.on { color: var(--ink); font-weight: 800; }
.ar-name i, .ar-cap i { font-style: normal; color: #2E8B57; }
.atlas-row.s0 .ar-flag { filter: grayscale(.85); opacity: .6; }
.atlas-row.s2 { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), inset 3px 0 0 #2E8B57; }
.atlas-pop { position: fixed; left: 50%; top: calc(var(--safe-top) + 14px); transform: translateX(-50%); z-index: 95; width: min(calc(100% - 24px), 400px); display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 22px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(27, 20, 18, .28), inset 0 0 0 2px #2E6FB5; animation: atlasin .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.atlas-pop.out { animation: atlasout .35s forwards; }
@keyframes atlasin { from { transform: translate(-50%, -140%) rotate(-3deg); } }
@keyframes atlasout { to { transform: translate(-50%, -140%); opacity: 0; } }
.ap-flag { font-size: 52px; line-height: 1; animation: flagpop 1s cubic-bezier(.3, 1.8, .5, 1) .2s both; }
@keyframes flagpop { from { transform: scale(0) rotate(-30deg); } }
.ap-txt { flex: 1; min-width: 0; }
.ap-txt small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2E6FB5; }
.ap-txt b { display: block; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 24px; color: var(--ink); line-height: 1.2; }
.ap-parts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ap-parts i { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #F4EFEA; color: var(--muted); }
.ap-parts i.on { background: #E3F4E8; color: #1F6B3D; }
.ap-txt em { display: block; font-style: normal; font-weight: 800; color: #B5832A; margin-top: 4px; }
.tabbar { transform: translateY(calc(100% + 40px)); }
body.tabs-on .tabbar { transform: translateY(0); }
.ar-name, .ar-cap { color: #9C8E82; }

/* ===== v28: monedas y cazapalabras libre ===== */
.fcoin { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; will-change: transform; filter: drop-shadow(0 3px 4px rgba(120, 80, 20, .35)); }
.fcoin svg { width: 100%; height: 100%; }
.board.checking .live-line { animation: checkpulse .5s ease-in-out infinite alternate; }
@keyframes checkpulse { to { opacity: .4; } }
.hunt-found span.extra { background: #FFF6DC; box-shadow: var(--shadow), inset 0 0 0 1.5px #E8C170; }


/* ===== v31: estrellas al instante y ruleta con freno ===== */
.star-flash { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 92; display: flex; gap: 10px; pointer-events: none; }
.star-flash i { font-style: normal; font-size: 64px; line-height: 1; color: rgba(255, 255, 255, .7); text-shadow: 0 4px 18px rgba(0, 0, 0, .15); transform: scale(0); }
.star-flash i:nth-child(2) { font-size: 84px; transform: scale(0) translateY(-12px); }
.star-flash i.in { animation: starin .45s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.star-flash i:nth-child(2).in { animation-name: starin2; }
.star-flash i.on { color: #F2B33D; text-shadow: 0 6px 22px rgba(242, 179, 61, .7), 0 0 2px #fff; }
.star-flash.out { animation: sfout .6s forwards; }
@keyframes starin2 { from { transform: scale(0) translateY(-12px) rotate(-120deg); } to { transform: scale(1) translateY(-12px) rotate(0); } }
@keyframes sfout { to { opacity: 0; transform: translate(-50%, -80%) scale(.8); } }
.btn.brake { background: #E4572E; animation: bump .6s infinite; }



/* ===== paquete: economía ===== */
.streak-lost { background: #FFF1EC; border-radius: 16px; padding: 12px; margin: 12px 0; box-shadow: inset 0 0 0 2px #F3B7A3; }
.streak-lost b { display: block; color: #C0391E; }
.streak-lost small { display: block; font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.streak-road { display: flex; gap: 6px; overflow-x: auto; margin: 12px -4px; padding: 2px 4px 6px; scrollbar-width: none; }
.streak-road .sr { flex: none; min-width: 56px; background: #F6F1EB; border-radius: 12px; padding: 6px 8px; text-align: center; display: flex; flex-direction: column; }
.streak-road .sr b { font-size: 16px; }
.streak-road .sr small { font-size: 10px; color: var(--muted); font-weight: 700; }
.streak-road .sr.got { background: linear-gradient(160deg, #FFE0B8, #F2B33D); }
.streak-pill.lost { animation: bump 1s infinite; box-shadow: inset 0 0 0 2px #E4572E; }

/* ===== paquete: banderas ===== */
.flags-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 44px; }
.flags-hero span { animation: qbob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.35s); text-align: center; }
.flags-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 12px; }
.flags-seg button { border: 0; font: inherit; font-weight: 700; background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; }
.flags-seg button small { font-size: 11px; color: var(--muted); font-weight: 600; }
.flags-seg button.on { background: var(--vino); color: #fff; }
.flags-seg button.on small { color: rgba(255, 255, 255, .8); }
.flag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.flag-chip { border: 0; font: inherit; background: var(--card); border-radius: 16px; padding: 6px 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; min-width: 64px; justify-content: center; color: var(--ink); }
.flag-chip span { font-size: 30px; line-height: 1; }
.flag-chip small { font-size: 11px; color: var(--muted); font-weight: 700; }
.flag-chip b { font-size: 13px; }
.flag-chip.ok { background: #E3F4E8; box-shadow: var(--shadow), inset 0 0 0 2px #2E8B57; }
.flag-chip.pop { animation: slotpop .5s cubic-bezier(.3, 1.8, .5, 1); }

/* ===== paquete: retar más cómodo ===== */
.inv-desc { font-size: 13px; margin-bottom: 12px; }
.theme-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; font: inherit; background: #F6F1EB; border-radius: 14px; padding: 12px 14px; margin-top: 12px; color: var(--ink); font-size: 14px; }
.theme-toggle b { flex: 1; text-align: left; }
.theme-toggle span { font-size: 12px; color: var(--muted); font-weight: 700; }
.theme-chips { margin-top: 10px; }

/* ===== paquete: sabotajes ===== */
.board.pw-hielo { pointer-events: none; }
.board.pw-hielo::after { content: "❄️"; position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font-size: 70px; background: linear-gradient(135deg, rgba(190, 230, 255, .55), rgba(255, 255, 255, .35)); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); animation: icein .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes icein { from { opacity: 0; transform: scale(1.1); } }
.board.pw-baile .cells .c { animation: baile .5s ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }
@keyframes baile { from { translate: 0 0; rotate: -8deg; } to { translate: var(--bx, 3px) -6px; rotate: 8deg; } }
.pw-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.pw-layer.burbujas i { position: absolute; bottom: -30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(170, 215, 255, .85) 60%, rgba(120, 180, 240, .8)); box-shadow: inset -4px -6px 10px rgba(80, 140, 210, .35); animation: bubbleup linear infinite; }
@keyframes bubbleup { to { transform: translateY(-190%); } }
.pw-layer.lluvia { background: rgba(40, 60, 90, .18); }
.pw-layer.lluvia i { position: absolute; top: -10%; font-style: normal; font-size: 22px; animation: raindrop linear infinite; }
@keyframes raindrop { to { transform: translateY(120vh); } }
.pw-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.power-item small { font-size: 11px; color: var(--muted); min-height: 28px; }
.pw-prev { position: relative; height: 70px; border-radius: 12px; background: linear-gradient(160deg, #3A2350, #1B2A41); display: grid; place-items: center; }
.pw-prev span { font-size: 36px; }
.power-item:not(.own) .pw-prev span { filter: grayscale(.6); opacity: .6; }
.pw-lv { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.pw-lv b { width: 16px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.pw-lv b.on { background: #F2B33D; }

/* ===== paquete: Hundir la flota y El dado ===== */
.fl-bar { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--shadow); font-size: 12px; }
.fl-bar .fl-hint { flex: 1; text-align: center; color: var(--muted); font-weight: 600; }
.fl-bar b { font-size: 15px; color: var(--vino); }
.fl-target { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; background: linear-gradient(160deg, #1B3A5C, #0F2238); padding: 8px; border-radius: 0; }
.fl-target button { aspect-ratio: 1; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 18px; color: #fff; display: grid; place-items: center; padding: 0; }
.fl-target button:active { background: rgba(255, 255, 255, .25); }
.fl-target button.aim { background: #F2B33D; animation: bump .5s infinite; }
.fl-target button.shot.miss { background: rgba(120, 180, 255, .25); color: #9CC8FF; }
.fl-target button.shot.hit { background: #E4572E; }
.fl-target button.blast { animation: blast .6s ease-out; }
@keyframes blast { 0% { transform: scale(2.2); background: #FFE08A; } 100% { transform: scale(1); } }
.fl-fleet { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fl-fleet span { background: var(--card); border-radius: 999px; padding: 6px 10px; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); }
.fl-fleet span.hurt { background: #FFF1C4; animation: hurtblink .7s steps(2) infinite; }
.fl-fleet span.dead { background: #F4EFEA; color: #B9ACA0; text-decoration: line-through; }
@keyframes hurtblink { 50% { opacity: .45; } }
.dado-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.die { width: 64px; height: 64px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .15), inset 0 -4px 0 #E6DDD4; display: grid; place-items: center; font-family: 'Shrikhand', serif; font-size: 36px; color: var(--vino); flex: none; }
.die.rolling { animation: dieroll .22s linear infinite; }
@keyframes dieroll { 25% { transform: rotate(12deg) scale(1.05); } 75% { transform: rotate(-12deg) scale(.95); } }
.die.land { animation: dieland .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes dieland { from { transform: scale(1.5); } }
.dado-info { flex: 1; min-width: 0; }
.dado-info b { display: block; font-size: 18px; color: var(--on-bg); }
.dado-info small { display: block; font-size: 12px; color: var(--on-bg-muted); margin-bottom: 6px; }
.dado-info .timebar { margin: 0; }
.dd-nums { display: flex; gap: 5px; justify-content: center; margin-bottom: 10px; }
.dd-nums span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.dd-nums span.mine { box-shadow: inset 0 -3px 0 var(--vino); }
.dd-nums span.theirs { box-shadow: inset 0 -3px 0 #9C8E82; }
.dd-nums span.used { opacity: .4; }
.dd-nums span.now { background: var(--vino); color: #fff; transform: scale(1.15); }

/* ===== paquete: amigos, entrada y registro ===== */
.who.one { grid-template-columns: minmax(0, 220px); justify-content: center; }
.acc-wrap { position: relative; }
.acc-wrap .card { width: 100%; }
.acc-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: #B9ACA0; font-size: 13px; }
.acc-user { display: block; color: var(--muted); font-size: 12px; margin-top: -2px; }
.at-in { display: flex; align-items: center; gap: 0; position: relative; }
.at-in span { position: absolute; left: 14px; font-weight: 800; color: var(--muted); font-size: 17px; }
.at-in .text-in { padding-left: 32px; }
.reg-card { padding: 6px 18px 18px; }
.reg-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pin-in { letter-spacing: 8px; text-align: center; font-weight: 800; }
.reg-note { display: block; text-align: center; margin-top: 10px; font-size: 12px; }
.linkish { background: none; border: 0; color: var(--vino); font: inherit; font-weight: 700; text-decoration: underline; padding: 8px; }
.friends-box { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.fr-head { gap: 6px; margin-bottom: 8px; }
.fr-add { border: 0; background: #F4EFEA; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; color: var(--vino); }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-row, .fr-req, .fs-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #FBF8F5; }
.fr-req { background: #FFF6DF; margin-bottom: 8px; }
.fr-av { position: relative; width: 38px; height: 38px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.fr-av .dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #C9BFB5; border: 2px solid #fff; }
.fr-av .dot.on { background: #3CB371; }
.fr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-txt small { font-size: 12px; color: var(--muted); }
.fr-txt em.on { font-style: normal; color: #2E8B57; font-weight: 700; }
.fr-duel { border: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); width: 38px; height: 38px; border-radius: 12px; font-size: 18px; flex: none; }
.fr-no { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 6px; }
.btn.sm { padding: 8px 12px; font-size: 13px; min-height: 0; }
.fs-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; min-height: 10px; }
.fs-ok { font-size: 12px; font-weight: 700; color: var(--muted); }
.fs-me { text-align: center; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.fs-me b { font-size: 18px; margin-bottom: 6px; }
.link-in { font-size: 14px; color: var(--muted); }
.fp { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fp .prof-av { width: 72px; height: 72px; font-size: 32px; }
.fp h2 { margin: 6px 0 0; }
.fp-pres { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 5px; }
.fp .prof-stats { width: 100%; margin: 10px 0 4px; }
.fp-line { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 13px; color: var(--muted); font-weight: 600; margin: 6px 0; }
.fp .eyebrow { margin: 12px 0 6px; align-self: flex-start; }
.fp .pr-recs { width: 100%; }
.fp-achv { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 24px; }
.fp-actions { width: 100%; margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.friends-card .friends-box { margin-top: 0; border-top: 0; padding-top: 0; }
/* ===== novedades ===== */
.news h2 { margin: 2px 0 12px; }
.news-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.news-item { display: flex; gap: 12px; align-items: flex-start; background: #FBF8F5; border-radius: 14px; padding: 10px 12px; animation: rise .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.news-item .ni-ic { font-size: 24px; line-height: 1.2; flex: none; }
.news-item b { display: block; font-size: 15px; }
.news-item small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.fp-achv small { font-size: 13px; }

/* ===== paquete: grupos, memoria, infinita, tienda de colores, ajustes ===== */
.avatar.babi { background: #7B1E2E; }
.grp-av { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.grp-av span { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; }
.grp-av.big span { width: 52px; height: 52px; font-size: 20px; position: relative; margin-bottom: 16px; }
.grp-av.big small { position: absolute; top: 100%; margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.fr-tip { display: block; margin: -2px 0 8px; font-size: 12px; }
.fr-row { cursor: pointer; transition: background .15s, box-shadow .15s; }
.fr-row.sel { background: var(--vino-soft); box-shadow: inset 0 0 0 2px var(--vino); }
.fr-check { position: absolute; left: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--vino); color: #fff; font-size: 11px; font-style: normal; display: none; place-items: center; border: 2px solid #fff; }
.fr-row.sel .fr-check { display: grid; }
.fr-go { margin-top: 10px; text-align: center; }
.fr-go[hidden] { display: none; }
.lane.out { opacity: .45; }
.lane .letters em { font-style: normal; font-size: 11px; color: var(--vino); font-weight: 800; }
.speed { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 0 0 8px; }
.speed span { font-size: 12px; color: var(--on-bg-muted); font-weight: 700; margin-right: 2px; }
.speed button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 800; font-size: 13px; background: var(--card); color: var(--ink, #2A201D); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.speed button.on { background: var(--vino); color: #fff; }
.bomb-panel.many { display: flex; flex-direction: column; gap: 6px; }
.bp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.bp-pl { background: rgba(255, 255, 255, .6); border-radius: 12px; padding: 6px 8px; text-align: center; }
.bp-pl b { display: block; font-size: 13px; }
.bp-pl.has { background: #FFE3D6; box-shadow: inset 0 0 0 2px #E4572E; }
.bp-pl.out { opacity: .4; }
.bomb-panel.many .bp-s { text-align: center; font-weight: 800; }
.tp-many { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 13px; margin-bottom: 6px; }
.split { flex-wrap: wrap; gap: 4px 12px; }
.mm-score { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.mm-score span { display: flex; align-items: center; gap: 5px; background: var(--card); border-radius: 999px; padding: 4px 10px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-size: 13px; }
.mm-score span.out { opacity: .4; }
.mm-score i { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.mm-score em { font-style: normal; font-size: 12px; }
.mm-score small { color: var(--muted); font-weight: 700; }
.mm-read { background: var(--card); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); text-align: center; }
.mm-words { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.mm-words span { font-family: 'Shrikhand', serif; font-size: 30px; color: var(--vino); letter-spacing: 2px; animation: rise .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 120ms); }
.mm-read .timebar { margin: 0 0 14px; }
.mm-slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.mm-slots span { min-width: 60px; text-align: center; padding: 6px 12px; border-radius: 999px; background: var(--card); font-weight: 800; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.mm-slots .ok { background: #E3F4E8; color: #2E6B45; }
.mm-slots .hint { background: #FFF1C4; }
.mm-slots .q { color: #C9BFB5; }
.mm-help { text-align: center; margin-top: 10px; }
.mm-help small { color: var(--on-bg-muted); font-size: 12px; }
.mini-bg { height: 70px; border-radius: 12px; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; }
.mini-bg i { height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mini-bg i:nth-child(2) { width: 70%; } .mini-bg i:nth-child(3) { width: 45%; }
.mini-bg.perso { background: conic-gradient(from 0deg, #F9C6C6, #FBE7A1, #C6F1D6, #C6E2F9, #E3C6F9, #F9C6C6); }
.mini-acc { height: 70px; border-radius: 12px; background: #F6F1EB; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; }
.mini-acc span { background: var(--a); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 10px; }
.mini-acc em { font-family: 'Shrikhand', serif; font-style: normal; color: var(--a); font-size: 24px; }
.mini-acc i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--a); }
.pw-prev { position: relative; cursor: pointer; }
.pw-see { position: absolute; right: 6px; top: 6px; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .55); color: #fff; padding: 2px 6px; border-radius: 999px; }
.pvw h2 { margin-bottom: 2px; }
.pvw-box { margin-top: 10px; overflow: hidden; border-radius: 16px; }
.pvw .boardwrap { margin: 0; }
.pvw .words { margin-top: 8px; }
.set-card { background: #FBF8F5; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.set-card .eyebrow { margin: 0 0 6px; }
.set-card .label { margin: 10px 0 6px; font-size: 14px; }
.set-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.set-row .text-in { flex: 1; padding: 9px 12px; }
.set-card .linkish { display: block; padding: 8px 0 0; }
.swatches.acc button { border-radius: 12px; }
.swatches label.perso { background: conic-gradient(from 0deg, #F9C6C6, #FBE7A1, #C6F1D6, #C6E2F9, #E3C6F9, #F9C6C6); }
.set-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: #fff; border-radius: 12px; padding: 10px 12px; font: inherit; font-weight: 700; }
.set-toggle i { width: 44px; height: 26px; border-radius: 999px; background: #D9D1C9; position: relative; transition: background .2s; }
.set-toggle i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.set-toggle.on i { background: #3CB371; }
.set-toggle.on i::after { transform: translateX(18px); }
.set-actions { display: flex; gap: 8px; margin-top: 4px; }
.set-actions .btn { flex: 1; }
.fp-friends { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.fp-f { display: flex; align-items: center; gap: 10px; border: 0; background: #FBF8F5; border-radius: 12px; padding: 7px 10px; font: inherit; text-align: left; width: 100%; }
.fp-rank { width: 18px; font-weight: 800; color: var(--muted); font-size: 13px; }
.fp-f .fr-av { width: 32px; height: 32px; font-size: 14px; }
.fp-lvl { font-weight: 800; font-size: 13px; color: var(--vino); background: var(--vino-soft); padding: 3px 8px; border-radius: 999px; }
.fp-f .tag { font-style: normal; font-size: 10px; background: #E3F4E8; color: #2E6B45; padding: 1px 6px; border-radius: 999px; vertical-align: 2px; }

/* ===== paquete: flota nueva, dado, cartas, tragapalabras ===== */
.ring-clock { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.ring-clock svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-clock circle { fill: none; stroke-width: 3.5; }
.ring-clock .rc-bg { stroke: rgba(0, 0, 0, .08); fill: var(--card); }
.ring-clock .rc-fg { stroke: var(--vino); stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.ring-clock b { position: relative; font-size: 15px; font-weight: 800; color: var(--ink, #2A201D); }
.ring-clock.warn .rc-fg { stroke: #E4572E; }
.ring-clock.warn b { color: #E4572E; animation: lastpulse .5s infinite; }
.fl-status { background: var(--card); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); margin-bottom: 8px; }
.fl-st b { display: block; font-size: 16px; }
.fl-st small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
.fl-st.go b { color: var(--vino); }
.fl-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; font-weight: 700; }
.fl-counts span { display: flex; align-items: center; gap: 5px; }
.fl-counts i { width: 10px; height: 10px; border-radius: 50%; }
.fl-counts .rk b { font-size: 12px; margin-left: 1px; }
.fl-counts .rk.none { color: var(--muted); font-weight: 600; font-size: 12px; }
.fl-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; }
.fl-tabs button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 800; font-size: 13px; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.fl-tabs button.on { background: #1B3A5C; color: #fff; }
.fl-sea-lbl { margin: 0; font-size: 13px; color: var(--on-bg-muted); font-weight: 700; text-align: center; }
/* la sopa del rival: mar azul con sus letras */
.board.sea { background: linear-gradient(165deg, #21507E, #0F2C4C); box-shadow: 0 10px 30px rgba(15, 44, 76, .35); }
.board.sea .c { color: rgba(255, 255, 255, .92); position: relative; border-radius: 22%; }
.board.sea.armed .c:active { background: rgba(255, 255, 255, .22); }
.board.sea.armed { box-shadow: 0 0 0 3px #F2B33D, 0 10px 30px rgba(15, 44, 76, .35); }
.board.sea .c.sh-miss { color: rgba(255, 255, 255, .28); }
.board.sea .c.sh-miss::after { content: '💦'; position: absolute; font-size: 55%; right: 4%; top: 2%; }
.board.sea .c.sh-hit { background: #E4572E; color: #fff; }
.board.sea .c.sh-hit::after { content: '💥'; position: absolute; font-size: 60%; right: 0; top: -8%; }
.board.sea .c.sh-aim { background: #F2B33D; color: #1B2A41; animation: lastpulse .5s infinite; }
.board.sea .c.blast { animation: blast .6s ease-out; }
.missile { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; transition: transform .55s cubic-bezier(.35, 0, .75, .5); }
.missile span { display: block; font-size: 38px; transform: translate(-50%, -50%) rotate(-45deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.fl-mine { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.fl-mini { display: grid; grid-template-columns: repeat(9, 9px); grid-template-rows: repeat(12, 9px); gap: 2px; background: #0F2C4C; padding: 6px; border-radius: 10px; flex: none; }
.fl-mini i { border-radius: 3px; background: rgba(255, 255, 255, .1); position: relative; }
.fl-mini i.sh { background: #6FCF97; }
.fl-mini i.sh.hurt { background: #F2B33D; animation: hurtblink .7s steps(2) infinite; }
.fl-mini i.sh.dead { background: #7A2E22; }
.fl-mini i.in::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #fff; opacity: .8; }
.fl-mini i.in.boom::after, .fl-mini i.in.near::after { background: #E4572E; opacity: 1; }
.fl-mini i.flash { animation: blast .7s ease-out; }
.fl-ships { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.fl-ships .modes-lbl { width: 100%; margin: 0 0 2px; }
.fl-ships span { background: var(--card); border-radius: 999px; padding: 4px 9px; font-weight: 800; font-size: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.fl-ships span.hurt { background: #FFF1C4; animation: hurtblink .7s steps(2) infinite; }
.fl-ships span.dead { background: #F4EFEA; color: #B9ACA0; text-decoration: line-through; }
/* el dado */
.dd-dice { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
.dd-p { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; }
.dd-p b { font-size: 13px; color: var(--on-bg); }
.dd-p small { font-size: 12px; color: var(--on-bg-muted); font-weight: 700; }
.dd-p.done small { color: #2E8B57; }
.dd-p.out { opacity: .45; }
.die-box { width: 60px; height: 60px; border-radius: 16px; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .15), inset 0 -4px 0 #E6DDD4, 0 0 0 3px var(--c); display: grid; place-items: center; font-size: 30px; }
.dd-p.me .die-box { width: 72px; height: 72px; }
.die3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 68%; height: 68%; gap: 8%; }
.die3 i { border-radius: 50%; }
.die3 i.on { background: #2A201D; }
.die-box.rolling { animation: dieroll .18s linear infinite; }
.die-box.land { animation: dieland .5s cubic-bezier(.3, 1.8, .5, 1); }
.dd-time { margin: 0 0 6px; }
.dd-msg { text-align: center; font-size: 14px; color: var(--on-bg); margin-bottom: 8px; min-height: 20px; }
.dd-msg small { color: var(--on-bg-muted); }
.chip.done { background: #E3F4E8; color: #2E6B45; }
/* cartas */
.ct-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.ct-players span { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: box-shadow .2s, transform .2s; }
.ct-players span.turn { box-shadow: 0 0 0 2.5px var(--vino), 0 4px 12px rgba(0, 0, 0, .12); transform: scale(1.05); }
.ct-players span.out { opacity: .4; }
.ct-players i { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.ct-players em { font-style: normal; font-size: 12px; letter-spacing: 1px; }
.ct-msg { text-align: center; font-size: 13.5px; color: var(--on-bg); margin-bottom: 8px; min-height: 36px; line-height: 1.35; padding: 0 6px; }
.ct-msg.mine { color: var(--vino); }
.board .c.swp { color: #B7791F; }
.board .c.swp::after { content: '✨'; position: absolute; font-size: 38%; right: 6%; top: 2%; }
.ct-hand { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.card-l { width: calc((100% - 35px) / 8); max-width: 44px; aspect-ratio: 3 / 4; border: 0; border-radius: 9px; background: linear-gradient(170deg, #FFFDF8, #F3E9DC); box-shadow: 0 3px 0 #D9C8B4, 0 5px 10px rgba(0, 0, 0, .12); font: inherit; font-weight: 800; font-size: 20px; color: var(--ink, #2A201D); transition: transform .15s; }
.card-l.sel { transform: translateY(-10px) rotate(-3deg); background: linear-gradient(170deg, #FFF6D6, #F2D08A); box-shadow: 0 3px 0 #C99A2E, 0 10px 18px rgba(0, 0, 0, .2); }
.card-l:disabled { opacity: .55; }
.ct-actions { display: flex; justify-content: center; margin-top: 8px; }
.ct-actions .btn { min-height: 40px; }
.fly-card { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 38px; height: 50px; margin: -25px 0 0 -19px; border-radius: 9px; background: #F2D08A; display: grid; place-items: center; font-weight: 800; font-size: 20px; transition: transform .4s cubic-bezier(.3, .7, .4, 1); box-shadow: 0 8px 16px rgba(0, 0, 0, .25); }
/* tragapalabras */
.rd-hearts { font-size: 16px; letter-spacing: 1px; }
.rd-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.rd-players span { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.rd-players span.me { box-shadow: 0 0 0 2px var(--vino); }
.rd-players span.out { opacity: .4; }
.rd-players i { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.rd-players em { font-style: normal; font-weight: 800; color: var(--vino); }
.rd-players small { color: #E4572E; font-size: 11px; }
.rd-box { width: min(100%, 448px); margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 6px 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.rd-row { height: var(--cw, 40px); overflow: hidden; position: relative; }
.rd-row + .rd-row { border-top: 1px dashed #EFE7DF; }
.rd-strip { display: flex; height: 100%; will-change: transform; }
.rd-strip span { flex: none; width: var(--cw, 40px); display: grid; place-items: center; font-weight: 700; font-size: calc(var(--cw, 40px) * .5); color: var(--ink, #2A201D); border-radius: 10px; }
.rd-strip span.sel { background: var(--vino-soft); color: var(--vino); box-shadow: inset 0 0 0 2px var(--vino); }
.rd-strip span.good { background: #2E8B57; color: #fff; }
.rd-strip span.bad { background: #E4572E; color: #fff; }
.rd-box.stopped { box-shadow: 0 0 0 3px #F2B33D, var(--shadow); }
.rd-row.fresh .rd-strip { animation: rowin .5s ease-out; }
@keyframes rowin { from { opacity: 0; } }
.rd-pick { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .06); margin: 10px auto 0; width: min(100%, 448px); overflow: hidden; visibility: hidden; }
.rd-pick.on { visibility: visible; }
.rd-pick i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E4572E, #F2B33D); border-radius: 99px; }
.rd-stop { display: block; margin: 14px auto 0; width: min(100%, 320px); height: 64px; border: 0; border-radius: 22px; font: inherit; font-weight: 800; font-size: 22px; color: #fff; background: linear-gradient(180deg, #E4572E, #B8391A); box-shadow: 0 6px 0 #8A2A12, 0 12px 24px rgba(184, 57, 26, .35); letter-spacing: .5px; }
.rd-stop:active { transform: translateY(4px); box-shadow: 0 2px 0 #8A2A12, 0 6px 12px rgba(184, 57, 26, .3); }
.rd-stop:disabled { opacity: .45; }
.rd-help { margin-top: 10px; }
/* sabotaje: dos para elegir */
.offer.two { display: block; padding: 12px; width: min(calc(100vw - 24px), 380px); }
.offer.two .of-head { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; text-align: center; }
.of-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.of-opts button { border: 0; border-radius: 16px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.of-opts button:active, .of-opts button.pick { background: rgba(242, 179, 61, .45); }
.of-opts .of-icon { font-size: 34px; }
.of-opts b { font-size: 15px; }
.of-opts b em { font-style: normal; font-size: 10px; background: #F2B33D; color: #2A201D; border-radius: 99px; padding: 1px 5px; vertical-align: 2px; }
.of-opts small { font-size: 11px; color: #F2D08A; line-height: 1.25; }
/* sabotajes nuevos */
.pw-layer.emojis { inset: 8px; }
.pw-layer.emojis i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-size: 7.5cqw; animation: emojiblink ease-in-out infinite; }
@keyframes emojiblink { 0%, 100% { transform: translate(-50%, -50%) scale(0); } 25%, 75% { transform: translate(-50%, -50%) scale(1.1); } }
.board.pw-parpadeo .cells .c.pk { animation: blinky .9s steps(2) infinite; animation-delay: var(--pd, 0s); }
@keyframes blinky { 50% { opacity: 0; } }
.pw-layer.confeti i { position: absolute; top: -8%; border-radius: 2px; animation: confall linear infinite; }
@keyframes confall { to { transform: translateY(1200%) rotate(540deg); } }
/* banderas más grandes */
.flag-chips { gap: 10px; }
.flag-chip { flex-direction: column; gap: 2px; padding: 8px 10px 6px; min-width: 92px; border-radius: 18px; }
.flag-chip span { font-size: 54px; }
.flag-chip small, .flag-chip b { font-size: 12px; }
/* la sopa del rival se ajusta al alto para que quepa también tu flota */
.board.sea { width: min(100%, calc((100dvh - var(--safe-top) - var(--safe-bot) - 380px) * .75 + 32px)); border-radius: 18px; margin: 0 auto; }
.fl-mini { grid-template-columns: repeat(9, 8px); grid-template-rows: repeat(12, 8px); gap: 1.5px; padding: 5px; }
.fl-status { padding: 8px 12px; }
.fl-st b { font-size: 15px; }
.board.dim { opacity: .25; filter: blur(3px); transition: opacity .3s, filter .3s; }
.flag-chips { gap: 6px; flex-wrap: nowrap; }
.flag-chip { min-width: 0; flex: 1; max-width: 72px; padding: 6px 4px 5px; }
.flag-chip span { font-size: 46px; }
.flag-chip b { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ===== flota por tandas: el mar con olas y cuadraditos ===== */
.fl-stage { display: flex; justify-content: center; }
.sea2 { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, #2B6CA3, #174A7A 55%, #0E3257); box-shadow: 0 12px 30px rgba(14, 50, 87, .35); padding: 10px; box-sizing: border-box; }
.sea2 .waves { position: absolute; inset: 0; pointer-events: none; }
.sea2 .waves i { position: absolute; left: -50%; width: 200%; height: 40%; border-radius: 45%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%); animation: wave1 7s ease-in-out infinite alternate; }
.sea2 .waves i:nth-child(1) { top: -5%; }
.sea2 .waves i:nth-child(2) { top: 30%; animation-duration: 9s; animation-delay: -3s; }
.sea2 .waves i:nth-child(3) { top: 65%; animation-duration: 8s; animation-delay: -5s; }
@keyframes wave1 { from { transform: translateX(-8%) translateY(0) rotate(-2deg); } to { transform: translateX(8%) translateY(6px) rotate(2deg); } }
.sq-grid { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(12, 1fr); gap: 4px; width: 100%; height: 100%; }
.sq { border: 0; padding: 0; border-radius: 24%; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .12); display: grid; place-items: center; font: inherit; font-weight: 800; color: #fff; position: relative; animation: sqbob 3.2s ease-in-out infinite; transition: background .15s, transform .15s; }
@keyframes sqbob { 50% { transform: translateY(-2px); } }
.sq:nth-child(3n) { animation-delay: -1.1s; } .sq:nth-child(3n+1) { animation-delay: -2.2s; } .sq:nth-child(7n) { animation-duration: 3.8s; }
.sq span { font-size: 1.05em; }
.sea2.armed .sq:not(.miss):not(.hit):not(.sunk):active { background: rgba(255, 255, 255, .35); transform: scale(.92); }
.sq.aim { background: #F2B33D; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); animation: lastpulse .6s infinite; }
.sq.aim::after { content: '🎯'; position: absolute; font-size: 90%; }
.sq.aim.sent::after { content: '🚀'; }
.sq.miss { background: rgba(255, 255, 255, .05); box-shadow: none; animation: none; }
.sq.miss::after { content: '💦'; position: absolute; font-size: 80%; opacity: .85; }
.sq.hit { background: #E4572E; animation: none; }
.sq.hit::after { content: '💥'; position: absolute; font-size: 85%; }
.sq.sunk { background: #B83A1B; animation: none; box-shadow: inset 0 0 0 2px #FFB199; }
.sq.sunk::after { content: none; }
.sq.blast { animation: blast .6s ease-out; }
.missile.down span { transform: translate(-50%, -50%) rotate(135deg); }
.fl-ammo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.fl-rk { display: flex; gap: 6px; }
.fl-rk i { font-style: normal; font-size: 26px; transition: opacity .2s, transform .2s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.fl-rk i.used { opacity: .18; filter: grayscale(1); }
.fl-rk i.armed { transform: translateY(-6px) rotate(-10deg); }
.fl-ammo small { color: var(--on-bg-muted); font-weight: 700; font-size: 12.5px; }
.fl-ammo small b { color: var(--on-bg); }
/* tu flota mientras te disparan */
.board.my-fleet .c.in-water { color: #8FB8D8; }
.board.my-fleet .c.in-water::after { content: '💦'; position: absolute; font-size: 50%; right: 2%; top: 0; }
.board.my-fleet .c.in-boom { background: #E4572E; color: #fff; border-radius: 22%; }
.board.my-fleet .c.in-boom::after { content: '💥'; position: absolute; font-size: 55%; right: -2%; top: -8%; }
.board.my-fleet .c.in-near { background: #FFE3A3; border-radius: 22%; }
.board.my-fleet .c.in-near::after { content: '⚠️'; position: absolute; font-size: 45%; right: 0; top: -4%; }
/* ===== el dado en 3D ===== */
.dd-dice { gap: 16px; }
.dd-p { min-width: 84px; }
.die-3d { width: 64px; height: 64px; perspective: 400px; touch-action: none; cursor: grab; margin: 4px 0 6px; }
.dd-p:not(.me) .die-3d { cursor: default; }
.die-3d.grab { cursor: grabbing; }
.cube3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); }
.die-3d.idle .cube3d { animation: idlespin 5s linear infinite; }
.dd-p.me .die-3d.idle .cube3d { animation: idlewobble 1.4s ease-in-out infinite; }
@keyframes idlespin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
@keyframes idlewobble { 0%, 100% { transform: rotateX(-20deg) rotateY(20deg); } 50% { transform: rotateX(-30deg) rotateY(40deg) translateY(-4px); } }
.fc { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(145deg, #fff, #F1E8DE); box-shadow: inset 0 0 0 2px var(--c), inset 0 -4px 8px rgba(0, 0, 0, .06); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; gap: 6%; backface-visibility: hidden; }
.fc i { border-radius: 50%; }
.fc i.on { background: #2A201D; box-shadow: inset 0 2px 2px rgba(255, 255, 255, .25); }
.fc-f { transform: translateZ(32px); }
.fc-k { transform: rotateY(180deg) translateZ(32px); }
.fc-r { transform: rotateY(90deg) translateZ(32px); }
.fc-l { transform: rotateY(-90deg) translateZ(32px); }
.fc-t { transform: rotateX(90deg) translateZ(32px); }
.fc-b { transform: rotateX(-90deg) translateZ(32px); }
.dd-p.out .die-3d { opacity: .35; }
.dd-swipe { color: var(--vino); animation: lastpulse 1s infinite; display: inline-block; }
/* ===== sabotaje: 3 opciones pequeñas ===== */
.offer.two.three { padding: 8px; width: min(calc(100vw - 24px), 360px); }
.offer.three .of-opts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.offer.three .of-opts button { padding: 6px 4px; gap: 0; border-radius: 12px; position: relative; }
.offer.three .of-icon { font-size: 26px; animation: none; }
.offer.three .of-opts b { font-size: 12px; line-height: 1.2; }
.offer.three .of-opts em { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 9px; background: #F2B33D; color: #2A201D; border-radius: 99px; padding: 0 4px; }
.offer.three .of-bar { margin-top: 6px; height: 4px; }
/* ===== juegos en directo: de 2 en 2 ===== */
.mode-list { grid-template-columns: 1fr 1fr; }
.mode-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; min-height: 118px; }
.mode-row .mr-ic { width: 40px; height: 40px; font-size: 21px; border-radius: 12px; }
.mode-row .mr-txt b { font-size: 14.5px; line-height: 1.15; }
.mode-row .mr-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.3; }
.mode-row .mr-go { display: none; }

/* ===== misiles que caen y explosiones con calma ===== */
.missile.down { transition: transform .95s cubic-bezier(.55, 0, .9, .45); }
.missile.down span { font-size: 42px; }
.sq.incoming, .board .c.incoming { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 18px rgba(242, 179, 61, .9); animation: lastpulse .3s infinite; }
.sq.blast, .board .c.blast { animation: blast2 1.4s ease-out; }
@keyframes blast2 { 0% { transform: scale(1.9); filter: brightness(2); } 25% { transform: scale(1.3); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.fl-flash { position: fixed; z-index: 91; pointer-events: none; transform: translate(-50%, -50%); }
.fl-flash i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #FFE08A 30%, rgba(228, 87, 46, .7) 55%, rgba(228, 87, 46, 0) 70%); animation: flflash 1.2s ease-out forwards; }
.fl-flash:not(.big) i { background: radial-gradient(circle, #fff 0%, rgba(143, 211, 245, .8) 40%, rgba(143, 211, 245, 0) 70%); }
.fl-flash b { position: relative; display: block; font-size: 40px; animation: flemoji 1.4s ease-out forwards; }
.fl-flash.big b { font-size: 56px; }
@keyframes flflash { 0% { transform: scale(.2); opacity: 1; } 40% { transform: scale(5); opacity: .95; } 100% { transform: scale(7); opacity: 0; } }
@keyframes flemoji { 0% { transform: scale(.2); opacity: 0; } 20% { transform: scale(1.3); opacity: 1; } 70% { transform: scale(1) translateY(-8px); opacity: 1; } 100% { transform: scale(.9) translateY(-26px); opacity: 0; } }
/* ===== el dado, plano y sencillo ===== */
.dd-p .die-box, .dd-p.me .die-box { width: 62px; height: 62px; touch-action: none; }
.dd-p.me .die-box { cursor: pointer; }
.die-q { font-size: 30px; font-weight: 800; color: #B9ACA0; }
.dd-p.me .die-box.idle { animation: diewait 1.2s ease-in-out infinite; }
.dd-p.me .die-box.idle .die-q { color: var(--vino); }
@keyframes diewait { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.dd-p:not(.me) .die-box.idle { opacity: .7; }

/* ===== flota naval ===== */
.sq.hit { background: #F28C28; animation: none; box-shadow: inset 0 0 0 2px #FFD08A; }
.sq.hit::after { content: '🔥'; position: absolute; right: -4px; top: -6px; font-size: 55%; }
.sq.hit span { font-size: 1.15em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.fl-tabs button.gone { opacity: .45; }
.fl-fleet2 { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; margin-top: 8px; }
.fl-fleet2 small { color: var(--on-bg-muted); font-weight: 700; font-size: 12px; margin-right: 2px; }
.fl-fleet2 span { display: inline-flex; align-items: center; gap: 3px; background: var(--card); border-radius: 999px; padding: 3px 8px 3px 5px; font-size: 11px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.fl-fleet2 span b { font-weight: 800; letter-spacing: .3px; }
.fl-fleet2 span.hurt { background: #FFE3C2; }
.fl-fleet2 span.dead { background: #F4EFEA; color: #B9ACA0; text-decoration: line-through; }
.board.my-fleet .c.in-boom { background: #F28C28; }
.board.my-fleet .c.in-boom::after { content: '🔥'; }
/* ===== pistas ===== */
.ps-score { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.ps-score span { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ps-score span.me { box-shadow: 0 0 0 2px var(--vino); }
.ps-score i { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.ps-score em { font-style: normal; font-weight: 800; font-size: 16px; color: var(--vino); }
.ps-clue { background: var(--card); border-radius: 20px; padding: 12px 16px; box-shadow: var(--shadow); text-align: center; margin-bottom: 10px; min-height: 96px; }
.ps-clue.in { animation: rise .5s cubic-bezier(.2, .9, .3, 1.2); }
.ps-clue .ps-n { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ps-clue p { margin: 4px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink, #2A201D); }
.ps-clue p.ps-word { font-family: 'Shrikhand', serif; font-size: 28px; color: var(--vino); letter-spacing: 1px; }
.ps-len { display: flex; gap: 4px; justify-content: center; align-items: center; }
.ps-len i { width: 16px; height: 4px; border-radius: 2px; background: #E6DDD4; }
.ps-len small { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.ps-hint { font-size: 13px; color: #B7791F; margin-top: 6px; min-height: 0; }
.ps-hint.on { animation: rise .4s ease-out; }
/* ===== campeonato ===== */
.mode-row[data-m="campeonato"] { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; background: linear-gradient(120deg, #FFF3D1, #F7DFA0); box-shadow: inset 0 0 0 2px #E8C063; }
.mode-row[data-m="campeonato"] .mr-ic { background: linear-gradient(140deg, #F2B33D, #C98A1C); }
.mode-row.gold .mr-txt small { color: #8A6420; }
.ser-strip { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; background: linear-gradient(120deg, #FFF3D1, #F7DFA0); border-radius: 14px; padding: 5px 10px; margin: -4px 0 8px; font-size: 12px; box-shadow: inset 0 0 0 1.5px #E8C063; }
.ser-strip b { color: #8A6420; }
.ser-strip span { display: flex; align-items: center; gap: 2px; }
.ser-strip span em { font-style: normal; font-weight: 700; margin-right: 2px; }
.ser-strip span i, .ser-lives span i { font-style: normal; font-size: 12px; }
.ser-strip span.out { opacity: .4; }
.ser-break { text-align: center; }
.ser-break h2 { margin: 4px 0 12px; }
.ser-lives { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ser-lives div { display: flex; justify-content: space-between; align-items: center; background: #FBF8F5; border-radius: 12px; padding: 8px 12px; }
.ser-lives div.hurt { background: #FFE7E1; animation: shake2 .5s; }
.ser-lives div.hurt span i.lost:nth-last-child(1) { animation: heartbreak .8s ease-out; }
.ser-lives div.out { opacity: .5; }
.ser-lives span i { font-size: 18px; }
@keyframes heartbreak { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.ser-next { background: var(--vino-soft); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ser-next small { color: var(--muted); font-weight: 700; font-size: 12px; }
.ser-next b { font-size: 20px; }
.ser-next em { font-style: normal; font-size: 13px; color: var(--vino); font-weight: 800; }
.fr-streak { font-style: normal; font-size: 11px; font-weight: 800; color: #E4572E; background: #FFEDE5; border-radius: 99px; padding: 1px 6px; vertical-align: 1px; }
.ser-break { background: var(--card, #fff); border-radius: 24px; padding: 18px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); width: min(340px, calc(100vw - 40px)); animation: popin .35s cubic-bezier(.3, 1.5, .5, 1); }
#netpill { display: flex; align-items: center; gap: 6px; transition: left .4s cubic-bezier(.3, .8, .3, 1), transform .4s, padding .3s, top .4s; cursor: pointer; }
#netpill b { font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 300px; transition: max-width .4s, opacity .3s; }
#netpill.mini { left: auto; right: 8px; transform: none; padding: 5px 7px; top: calc(env(safe-area-inset-top, 0px) + 4px); opacity: .85; }
#netpill.mini b { max-width: 0; opacity: 0; }

/* ===== jugosidad: piropos, puntos, letras especiales ===== */
.praise { position: fixed; left: 50%; top: 30%; z-index: 95; pointer-events: none; transform: translate(-50%, -50%); text-align: center; }
.praise span { display: inline-block; font-family: 'Shrikhand', serif; font-size: 44px; line-height: 1.05; color: #FFD34D; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF3A8 0%, #FFC93C 45%, #F28C28 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #7B1E2E) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
  animation: praiseIn 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.praise span small { display: block; font-family: inherit; font-size: 16px; letter-spacing: 2px; -webkit-text-fill-color: #fff; color: #fff; filter: none; text-shadow: 0 2px 0 #7B1E2E; margin-top: 2px; }
.praise.lv2 span { font-size: 50px; }
.praise.lv3 span { font-size: 56px; background: linear-gradient(180deg, #FFE8F3 0%, #FF8CC6 45%, #C2185B 100%); -webkit-background-clip: text; background-clip: text; }
.praise.lv4 span { font-size: 60px; background: linear-gradient(180deg, #E8FFF9 0%, #5CF2D0 45%, #0E7C86 100%); -webkit-background-clip: text; background-clip: text; }
.praise.lv5 span { font-size: 54px; background: linear-gradient(90deg, #FF5E5E, #FFC93C, #6CE36C, #5CC8F0, #B37BFF); -webkit-background-clip: text; background-clip: text; animation: praiseIn 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards, praiseHue .4s linear infinite; }
@keyframes praiseIn { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 18% { transform: scale(1.25) rotate(4deg); opacity: 1; } 30% { transform: scale(.95) rotate(-2deg); } 40% { transform: scale(1.05) rotate(0); } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-40px); opacity: 0; } }
@keyframes praiseHue { to { filter: drop-shadow(0 3px 0 #7B1E2E) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 8px 14px rgba(0, 0, 0, .25)) hue-rotate(60deg); } }
.pts-float { position: fixed; z-index: 94; pointer-events: none; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #7B1E2E, 0 0 10px rgba(242, 179, 61, .8); animation: ptsUp 1.2s cubic-bezier(.2, .8, .3, 1) forwards; white-space: nowrap; }
.pts-float.hot { font-size: 28px; color: #FFE08A; }
.pts-float.gem { color: #B7F7FF; text-shadow: 0 2px 0 #1B3A6B, 0 0 12px rgba(92, 242, 255, .9); font-size: 24px; }
.pts-float.bulb { color: #FFF3A8; text-shadow: 0 2px 0 #8A6420; font-size: 18px; }
@keyframes ptsUp { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -260%) scale(1); opacity: 0; } }
.sopa-dots { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sopa-dots .sd-dots { display: flex; gap: 6px; }
.sopa-score { font-size: 12px; font-weight: 700; color: var(--on-bg-muted); background: var(--card); border-radius: 999px; padding: 2px 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); min-width: 64px; text-align: right; }
.sopa-score b { font-size: 15px; color: var(--vino); }
.perfect-pill { font-size: 12px; font-weight: 800; background: #E3F4E8; color: #2E6B45; border-radius: 999px; padding: 2px 9px; box-shadow: inset 0 0 0 1.5px #8FD3A8; transition: all .3s; }
.perfect-pill.broken { background: #F4EFEA; color: #B9ACA0; box-shadow: none; text-decoration: line-through; }
/* letras especiales: brillo, insignia y un latido */
.board .c.sp { border-radius: 26%; }
.board .c.sp::after { position: absolute; right: -2%; top: -6%; font-size: 42%; animation: spBob 1.6s ease-in-out infinite; }
.board .c.sp-gem { background: radial-gradient(circle at 35% 30%, #E8FEFF, #9BE7F5 55%, #5CC8F0); color: #0F3557; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(92, 200, 240, .8); animation: spGlow 1.8s ease-in-out infinite; }
.board .c.sp-gem::after { content: '💎'; }
.board .c.sp-bulb { background: radial-gradient(circle at 35% 30%, #FFFBE0, #FFE58A 55%, #F2B33D); color: #6B4A0F; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(242, 179, 61, .8); animation: spGlow 1.8s ease-in-out infinite .6s; }
.board .c.sp-bulb::after { content: '💡'; }
.board .c.sp-pop { animation: spPop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes spGlow { 50% { transform: scale(1.08); filter: brightness(1.12); } }
@keyframes spBob { 50% { transform: translateY(-3px) rotate(8deg); } }
@keyframes spPop { 0% { transform: scale(1.9); filter: brightness(2); } 100% { transform: scale(1); } }
.win-score { display: block; text-align: center; font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.win-score b { font-family: 'Shrikhand', serif; font-size: 30px; color: var(--vino); font-weight: 400; display: inline-block; }
.extra-line.perfect-line { background: #E3F4E8; color: #2E6B45; }
.perf-chip { background: linear-gradient(120deg, #E3F4E8, #C9EED6); color: #2E6B45; border-radius: 12px; padding: 7px 10px; font-size: 13px; font-weight: 600; text-align: center; margin: 4px 0 10px; box-shadow: inset 0 0 0 1.5px #8FD3A8; animation: perfPulse 2.4s ease-in-out infinite; }
@keyframes perfPulse { 50% { box-shadow: inset 0 0 0 1.5px #8FD3A8, 0 0 0 4px rgba(143, 211, 168, .25); } }
/* todo un poco más blandito al tocar */
.btn, .tap, .mode-tile, .mode-row, .card-l, .sq, .fr-row { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .15s, box-shadow .15s; }
.mode-tile:active, .mode-row:active, .fr-row:active { transform: scale(.95); }
.btn:active { transform: scale(.94); }
.praise span small { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; text-shadow: 0 2px 0 #7B1E2E, 0 0 6px rgba(0, 0, 0, .25); font-size: 15px; }
.pts-float { -webkit-text-stroke: 1.2px #7B1E2E; paint-order: stroke fill; }
.pts-float.gem { -webkit-text-stroke: 1.2px #1B3A6B; }
.pts-float.bulb { -webkit-text-stroke: 1px #8A6420; }
/* el botón de jugar del inicio, con un brillo que lo recorre */
.camino-play { position: relative; overflow: hidden; animation: playBreath 2.4s ease-in-out infinite; }
.camino-play::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: playShine 3.2s ease-in-out infinite; }
@keyframes playShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes playBreath { 50% { transform: scale(1.025); box-shadow: 0 8px 22px rgba(123, 30, 46, .35); } }

/* ---------- idiomas ---------- */
.fl { display: inline-block; width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.fl-es { background: linear-gradient(180deg, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75%); }
.fl-ca { background: repeating-linear-gradient(180deg, #FCDD09 0 11.11%, #DA121A 11.11% 22.22%); }
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 8px; }
.lang-pick button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; font: inherit; padding: 11px 8px; border-radius: 14px; background: var(--marron-soft); color: var(--marron); cursor: pointer; transition: transform .15s, background .2s; }
.lang-pick button b { font-size: 15px; }
.lang-pick button.on { background: #fff; border-color: var(--marron); box-shadow: 0 4px 12px rgba(91,58,36,.14); }
.lang-pick button:active { transform: scale(.96); }
.login-lang { max-width: 300px; margin: 14px auto 0; }
.login-lang .lang-pick button { background: rgba(255,255,255,.65); padding: 9px 8px; }
.login-lang .lang-pick button.on { background: #fff; }
.lang-tag { display: inline-block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; margin-left: 5px; border-radius: 6px; background: #FCDD09; color: #8A1B12; vertical-align: 2px; }
.mode-row.off { opacity: .45; filter: grayscale(.6); }
.mode-row.off small { color: var(--marron); font-weight: 600; }
.btn.dim { opacity: .5; }
.mix-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
body.lang-out #app { opacity: 0; transition: opacity .2s; }
html[lang=ca] .lvl-badge::after { content: 'NIVELL'; }
.cat-hero.fr .rose { animation: none; transform: rotate(-12deg); }
.cat-hero.fr .book { font-size: 46px; right: -40px; }
.mini-trail { align-self: stretch; min-width: 120px; }

/* ---------- que todo quepa (también en catalán, que es más largo) ---------- */
.btn { text-align: center; line-height: 1.15; text-wrap: balance; }
.btn:not(.sm) { padding-top: 6px; padding-bottom: 6px; }
.modal h2 { font-size: 27px; line-height: 1.12; text-wrap: balance; }
.modal h2.long { font-size: 23px; }
.modal h2.longer { font-size: 20px; }
.modal p { text-wrap: pretty; }
.modal .big-emoji .buy-prev { width: 170px; margin: 0 auto 4px; font-size: 16px; }
.modal .big-emoji .buy-prev > * { width: 100%; }
.sheet h2 { text-wrap: balance; line-height: 1.15; }
.mode-tile small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.mode-tile b { line-height: 1.15; text-wrap: balance; }
.poptext { white-space: normal; text-align: center; width: max-content; max-width: 92vw; font-size: clamp(24px, 8vw, 34px); line-height: 1.1; }
.topbar .gtitle b { font-size: clamp(16px, 4.8vw, 19px); }
.mr-txt small { text-wrap: pretty; }
.tabs button { white-space: nowrap; }
.diffs button b, .diffs button span { text-wrap: balance; }
.fl-fr { background: linear-gradient(90deg, #0055A4 0 33.3%, #fff 33.3% 66.6%, #EF4135 66.6%); }
.cat-hero.fr .book .fl { width: 46px; height: 31px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.15); }

/* ---------- 🟩 adivinar palabras (La palabra del día y La palabra secreta) ---------- */
.wordle-game, .sec-game { display: flex; flex-direction: column; min-height: 100dvh; }
.wp-board { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 8px 16px; }
.wp-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 300px); }
.wp-board.sm .wp-row { width: min(100%, 250px); gap: 5px; }
.wp-row .t { --tc: #fff; aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: clamp(20px, 7vw, 28px); border-radius: 10px; background: #fff; color: var(--ink); border: 2px solid #E6DCD3; text-transform: uppercase; }
.wp-board.sm .t { font-size: clamp(18px, 6vw, 24px); border-radius: 8px; }
.wp-row .t.typed { border-color: #A8968A; animation: tpop .12s ease-out; }
.wp-row .t.g { --tc: #4E9A51; }
.wp-row .t.y { --tc: #D9A62E; }
.wp-row .t.x { --tc: #8A7F78; }
.wp-row .t.g, .wp-row .t.y, .wp-row .t.x { background: var(--tc); border-color: var(--tc); color: #fff; }
.wp-row .t.flip { animation: tflip .56s ease both; animation-delay: var(--d, 0s); }
@keyframes tflip {
  0% { transform: rotateX(0); background: #fff; border-color: #A8968A; color: var(--ink); }
  49% { transform: rotateX(90deg); background: #fff; border-color: #A8968A; color: var(--ink); }
  50% { transform: rotateX(90deg); background: var(--tc); border-color: var(--tc); color: #fff; }
  100% { transform: rotateX(0); background: var(--tc); border-color: var(--tc); color: #fff; }
}
@keyframes tpop { from { transform: scale(1.12); } to { transform: scale(1); } }
.wp-row.cur .t:not(.typed) { border-color: #D8CCC2; }
.wp-msg { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 30; padding: 9px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.wp-msg.show { opacity: 1; animation: popin .2s; }
.wp-bottom { padding: 6px 6px calc(var(--safe-bot, 0px) + 10px); }
.kb { display: grid; gap: 7px; }
.kb-row { display: flex; gap: 5px; justify-content: center; }
.kb-k { flex: 1; max-width: 44px; height: 52px; border: 0; border-radius: 9px; font: inherit; font-weight: 800; font-size: 17px; background: #E9E1D9; color: var(--ink); cursor: pointer; padding: 0; transition: transform .1s, background .2s; }
.kb-k.wide { flex: 1.6; max-width: 72px; font-size: 18px; }
.kb-k.ok { background: var(--vino); color: #fff; font-size: 11.5px; letter-spacing: .02em; }
.kb-k.g { background: #4E9A51; color: #fff; }
.kb-k.y { background: #D9A62E; color: #fff; }
.kb-k.x { background: #B9AEA6; color: #fff; }
.kb-k:active { transform: scale(.92); }
.wp-end { background: var(--card); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); padding: 14px 16px 6px; margin: 0 -6px; }
.we-title { text-align: center; font-size: 19px; margin: 0 0 10px; }
.we-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.we-stats span { display: flex; flex-direction: column; align-items: center; background: var(--marron-soft); border-radius: 12px; padding: 7px 2px; }
.we-stats b { font-size: 18px; }
.we-stats small { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.1; }
.we-stats.big b { font-size: 24px; }
.we-friends { display: grid; gap: 6px; margin-bottom: 10px; max-height: 150px; overflow: auto; }
.wf { display: flex; align-items: center; gap: 8px; background: #FBF8F5; border-radius: 12px; padding: 6px 10px; }
.wf > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }
.wf b { flex: 1; font-size: 14px; }
.wf em { font-style: normal; font-weight: 800; font-size: 14px; margin-right: 4px; }
.mini-wp { display: inline-grid; gap: 2px; flex: none; }
.mini-wp span { display: flex; gap: 2px; min-height: 7px; }
.mini-wp i { width: 7px; height: 7px; border-radius: 2px; background: #E6DCD3; }
.mini-wp i.g { background: #4E9A51; }
.mini-wp i.y { background: #D9A62E; }
.mini-wp i.x { background: #8A7F78; }
.w-dist { display: grid; gap: 5px; }
.w-dist div { display: flex; align-items: center; gap: 8px; }
.w-dist span { width: 14px; font-weight: 700; color: var(--muted); }
.w-dist i { font-style: normal; color: #fff; font-weight: 700; font-size: 13px; text-align: right; padding: 3px 8px; border-radius: 6px; background: #8A7F78; min-width: 24px; }
.w-dist i.on { background: #4E9A51; }
/* tarjeta del inicio */
.word-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 12px; padding: 12px 14px; border: 0; font: inherit; color: var(--ink); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow), inset 0 0 0 2px rgba(78, 154, 81, .45); }
.wc-tiles { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; flex: none; }
.wc-tiles i { height: 22px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: #8A7F78; animation: wcbob 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .12s); }
.wc-tiles i.g { background: #4E9A51; }
.wc-tiles i.y { background: #D9A62E; }
.word-card.done .wc-tiles i { animation: none; }
@keyframes wcbob { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px) rotate(-4deg); } }
.wc-txt { flex: 1; min-width: 0; }
.wc-txt b { display: block; font-size: 16px; }
.wc-txt small { font-size: 12.5px; color: var(--muted); }
.wc-go { background: #4E9A51; color: #fff; font-weight: 800; padding: 8px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.word-card.done .wc-go { background: var(--marron-soft); }
/* la palabra secreta: los rivales arriba, solo con colores */
.sc-rivals { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 4px 12px 0; }
.scr { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 14px; padding: 6px 10px; box-shadow: var(--shadow); }
.scr > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 13px; }
.scr > span:not(.mini-wp) { display: flex; flex-direction: column; }
.scr > span > b { font-size: 13px; }
.scr > span > small { font-size: 11px; color: var(--muted); }
.scr.won { box-shadow: var(--shadow), 0 0 0 2px #4E9A51; }
.scr .mini-wp i { width: 8px; height: 8px; }

/* ---------- sabotajes nuevos ---------- */
/* 🔦 linterna: todo a oscuras menos un círculo de luz que se pasea */
.pw-layer.linterna i { position: absolute; width: 300%; height: 300%; left: -100%; top: -100%; background: radial-gradient(circle var(--lr, 70px) at 50% 50%, transparent 72%, rgba(16, 11, 8, .97) 100%); animation: lantern 5s ease-in-out infinite alternate; }
@keyframes lantern { 0% { transform: translate(-12%, -11%); } 25% { transform: translate(11%, -7%); } 50% { transform: translate(-7%, 12%); } 75% { transform: translate(12%, 9%); } 100% { transform: translate(-11%, 3%); } }
/* 🍮 gelatina */
.board.pw-gelatina .cells { animation: jelly 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1) skewX(0); } 20% { transform: scale(1.08, .9) skewX(6deg); } 40% { transform: scale(.94, 1.07) skewX(-7deg); } 60% { transform: scale(1.05, .95) skewX(4deg); } 80% { transform: scale(.98, 1.02) skewX(-3deg); } }
/* 🎭 telón */
.pw-layer.telon i { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #8E1B22 0 14px, #6F1219 14px 22px); box-shadow: 0 0 18px rgba(0, 0, 0, .35); animation: curtain var(--ct, 2.6s) ease-in-out infinite; }
.pw-layer.telon i.l { left: 0; transform-origin: left; }
.pw-layer.telon i.r { right: 0; transform-origin: right; }
@keyframes curtain { 0%, 100% { transform: scaleX(.1); } 45%, 62% { transform: scaleX(1); } }
/* 🐝 abejas */
.pw-layer.abejas i { position: absolute; left: -15%; top: var(--y); font-style: normal; font-size: 13cqw; animation: beefly var(--dur) linear infinite, beebob .3s ease-in-out infinite alternate; animation-delay: var(--dl), 0s; }
.pw-layer.abejas i.back { animation-direction: reverse, alternate; scale: -1 1; }
@keyframes beefly { to { left: 108%; } }
@keyframes beebob { to { translate: 0 -12px; } }
/* 🌬️ vendaval: cada fila se mueve con el viento */
.board.pw-viento .cells .c { animation: wind 1.3s ease-in-out infinite alternate; animation-delay: var(--wd, 0s); }
@keyframes wind { from { translate: calc(var(--wa, 12px) * -1) 0; } to { translate: var(--wa, 12px) 0; } }
/* 🧅 cebolla: te hace llorar */
.board.pw-cebolla .cells { animation: teary 2.2s ease-in-out infinite; }
@keyframes teary { 0%, 100% { filter: blur(.5px); } 40% { filter: blur(var(--tb, 3px)) saturate(.8); } 60% { filter: blur(calc(var(--tb, 3px) + 1px)); } }
.pw-layer.cebolla b { position: absolute; font-size: 24cqw; left: 50%; top: 50%; translate: -50% -50%; animation: onionpop .7s cubic-bezier(.3, 1.6, .5, 1) both, onionfade .5s 1.3s forwards; }
.pw-layer.cebolla i { position: absolute; top: -8%; font-style: normal; font-size: 6cqw; animation: tear linear infinite; }
@keyframes onionpop { from { scale: 0; rotate: -30deg; } to { scale: 1; rotate: 0deg; } }
@keyframes onionfade { to { opacity: 0; scale: 1.5; } }
@keyframes tear { to { top: 106%; } }
/* que el teclado quepa siempre (el #app tiene relleno arriba y abajo) */
.wordle-game, .sec-game { min-height: 0; height: calc(100dvh - 34px); }
.wp-board { min-height: 0; padding: 4px 12px; }
.wp-row { width: min(100%, 290px, 6.6dvh * 5); }
.wp-board.sm .wp-row { width: min(100%, 250px, 5.4dvh * 5); }
.wp-bottom { padding-bottom: 0; }
.kb-k { height: clamp(42px, 6.6dvh, 52px); }
.wc-tiles { grid-template-columns: repeat(5, 19px); }
.wc-tiles i { height: 19px; font-size: 11px; }