.hub-back { font-family: var(--mono); font-size: 15.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); border: 1.5px solid rgba(242, 233, 214, .3); padding: 10px 14px 9px; cursor: pointer; transition: transform .25s var(--spring), border-color .2s; }
.hub-back:hover { border-color: var(--brass); color: var(--brass); transform: translateX(-3px); }
.mode-card { --c: 14px; --edge: rgba(242, 233, 214, .24); --fill: #121f27; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 14px 16px 13px 14px; color: var(--paper); cursor: pointer; border: 0;
  transition: transform .25s var(--spring), --edge .2s; animation: rise .5s var(--spring) both; }
.mode-card:nth-child(2) { animation-delay: .05s; } .mode-card:nth-child(3) { animation-delay: .1s; } .mode-card:nth-child(4) { animation-delay: .15s; }
.mode-card:hover { transform: translateX(6px) rotate(-.3deg); --edge: var(--brass); }
.mode-card.hero { --edge: var(--brass); --fill: #2a261c; padding: 20px 18px 19px 16px; grid-template-columns: 80px 1fr auto; }
.mc-d { font-size: 15.5px; line-height: 1.35; color: rgba(242, 233, 214, .68); }


/* ---------- Competitivo ---------- */
.nick { display: grid; gap: 4px; margin: 4px 0 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: rgba(242, 233, 214, .6); }
.nick input, .board-sel { font: 500 15px var(--sans); color: var(--paper); background: rgba(242, 233, 214, .07); border: 1.5px solid rgba(242, 233, 214, .28); padding: 10px 12px 9px; outline: none; width: 100%; } .nick input:focus, .board-sel:focus { border-color: var(--brass); }
.board-sel option { color: #111; }
.daily { --c: 12px; --edge: rgba(242, 233, 214, .3); --fill: #14212a; display: grid; gap: 6px; padding: 14px 16px; margin: 8px 0; } .daily b { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 800; font-size: 20px; } .daily i { font-style: normal; font-size: 15.5px; color: rgba(242, 233, 214, .65); }
.daily .tag { justify-self: start; background: var(--red); } .daily > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .daily .btn-ink { width: auto; }
.daily-done { font-family: var(--mono); font-size: 15.5px; } .daily-done b { font-size: 22px; }
.rk-camps { display: flex; flex-wrap: wrap; gap: 6px; } .rk-camps .btn-line { padding: 9px 12px 8px; font-size: 14px; }
.lb { margin-top: 8px; } .lb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lb li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 12px 7px; background: rgba(242, 233, 214, .06); font-family: var(--mono); font-size: 15.5px; }
.lb li.me { background: var(--brass); color: var(--ink); } .lb li:nth-child(-n+3) .lb-n { color: var(--red); font-weight: 700; } .lb li.me .lb-n { color: var(--ink); }
.lb-n { font-weight: 500; opacity: .8; } .lb b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lb-src, .lb-empty, .lb-load { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: rgba(242, 233, 214, .55); margin: 6px 0; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ach { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 9px 10px; background: rgba(242, 233, 214, .05); opacity: .5; filter: grayscale(1); }
.ach.got { opacity: 1; filter: none; background: rgba(248, 180, 73, .12); box-shadow: inset 0 0 0 1.5px var(--brass); }
.ach-i { grid-row: 1 / 3; font-size: 24px; text-align: center; } .ach b { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 800; font-size: 16px; line-height: 1.1; } .ach i { font-style: normal; font-size: 14px; line-height: 1.25; color: rgba(242, 233, 214, .62); }
.medal.gold { color: #ffd34e; } .medal.silver { color: #cfd6da; } .medal.bronze { color: #d08a4b; }
.ach-toast { position: absolute; z-index: 40; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 12px; color: var(--ink); background: var(--brass); box-shadow: inset 0 0 0 2.5px var(--ink), 0 10px 0 -2px rgba(0, 0, 0, .35); max-width: min(420px, calc(calc(100 * var(--vw)) - 24px)); }
.ach-toast.hidden { display: none; } .ach-toast.in { animation: ach-in .8s var(--spring) both; } @keyframes ach-in { from { transform: translate(-50%, -140%) rotate(-3deg); } }
.ach-ico { font-size: 34px; } .ach-t { display: grid; gap: 1px; } .ach-t em { font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; opacity: .7; } .ach-t b { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 900; font-size: 20px; line-height: 1.05; } .ach-t i { font-style: normal; font-size: 15.5px; }

/* ---------- Aventura: barra de estado y herramientas en partida ---------- */
.adv-bar { position: absolute; left: 14px; top: 76px; z-index: 5; display: grid; gap: 6px; max-width: 250px; padding: 9px 12px 10px; background: rgba(10, 26, 18, .82); color: var(--paper); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 6px 0 rgba(0, 0, 0, .35); }
.adv-bar.hidden, .tool-bar.hidden { display: none; }
.ab-top { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 15.5px; } .ab-act { white-space: nowrap; letter-spacing: .05em; text-transform: uppercase; font-size: 14px; opacity: .7; } .ab-coins { color: var(--brass); font-weight: 700; font-size: 18px; } @keyframes bump { 40% { transform: scale(1.4); } }
.ab-hearts i, .hearts i { font-style: normal; color: rgba(255, 255, 255, .2); margin-right: 1px; } .ab-hearts i.on, .hearts i.on { color: var(--red); }
.ab-perks { display: flex; gap: 4px; flex-wrap: wrap; } .ab-perk { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: 19px; cursor: help; } .ab-wind { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 15.5px; } .ab-wind svg { width: 26px; height: 26px; fill: var(--brass); }
.tool-bar { position: absolute; z-index: 6; left: 50%; bottom: 86px; transform: translateX(-50%); display: flex; gap: 8px; }
.tool { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-width: 138px; padding: 8px 12px 7px 10px; text-align: left; color: var(--paper); background: rgba(10, 26, 18, .9); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 6px 0 rgba(0, 0, 0, .35); cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s; }
.tool:hover:not(.off) { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--brass), 0 10px 0 rgba(0, 0, 0, .35); } .tool.on { background: var(--brass); color: var(--ink); animation: bump .4s var(--spring); }
.tool.off { opacity: .4; cursor: not-allowed; } .tl-ico { grid-row: 1 / 3; font-size: 26px; } .tool b { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .tl-pips { display: flex; gap: 3px; } .tl-pips i { width: 12px; height: 5px; background: rgba(255, 255, 255, .2); } .tl-pips i.on { background: var(--brass); } .tool.on .tl-pips i.on { background: var(--ink); }
.tool kbd { position: absolute; top: -8px; right: -6px; font-family: var(--mono); font-size: 14px; background: var(--red); color: var(--paper); padding: 1px 5px; }
#map.aiming, .aiming { cursor: crosshair; }
.adv-goal { font-family: var(--mono); font-size: 16px !important; letter-spacing: .06em; color: var(--brass) !important; } .adv-goal b { font-size: 22px; }
.adv-debuff { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 14px; background: rgba(254, 95, 85, .18); box-shadow: inset 0 0 0 2px var(--red); } .adv-debuff span { font-size: 34px; } .adv-debuff b { display: block; font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 900; font-size: 22px; } .adv-debuff i { font-style: normal; font-size: 15.5px; opacity: .85; } .adv-debuff em { display: block; font-style: normal; font-family: var(--mono); font-size: 15.5px; color: var(--brass); margin-top: 3px; }

/* ---------- ticket: extras de la Aventura y de la Enciclopedia ---------- */
.tk-perks { margin: 8px 0 0; display: grid; gap: 4px; } .tk-perks > div { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-size: 14px; animation: slide-l .4s cubic-bezier(.2, .9, .2, 1) 1s both; } .tk-perks span { font-size: 17px; } .tk-perks i { flex: 1; font-style: normal; letter-spacing: .04em; color: var(--ink-2); } .tk-perks b { color: var(--red); font-weight: 500; }
.tk-coins { font-family: var(--mono); font-weight: 700; font-size: 17px; color: #8a5a00; margin: -4px 0 8px; animation: rise .4s 1.2s both; }
.tk-cx { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 10px 5px; background: rgba(20, 35, 43, .1); font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.tk-cx i { display: flex; gap: 4px; flex: 1; } .tk-cx u { flex: 1; height: 7px; background: rgba(20, 35, 43, .2); text-decoration: none; transition: background .3s; }
/* cada casilla se enciende con su jackpot (--jd lo pone game.js al ritmo del sonido): destello dorado y se queda roja */
.tk-cx.l1 u:nth-child(-n+1), .tk-cx.l2 u:nth-child(-n+2), .tk-cx.l3 u { background: var(--red); animation: tkpip .5s var(--jd, 0s) both; }
@keyframes tkpip { 0% { background: rgba(20, 35, 43, .2); transform: none; } 1% { background: var(--brass-lt); transform: scaleY(2.6); } 100% { background: var(--red); transform: none; } }
.tk-cx b { min-width: 34px; text-align: right; color: var(--red-deep); transform-origin: right center; }
.tk-cx.l1 b, .tk-cx.l2 b, .tk-cx.l3 b { animation: tkwin .45s var(--jd, 0s) both; } @keyframes tkwin { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.3); } 100% { transform: none; } }

/* ---------- tienda / campamento ---------- */
.coins { font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--brass); }
.shop-flash { margin: 0; font-family: var(--mono); font-size: 15.5px; letter-spacing: .06em; color: var(--brass); } .shop-flash { color: var(--red); animation: rise .3s both; }
@keyframes nope { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ---------- efectos de clic ---------- */
.ping { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.ping i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--paper); opacity: 0; animation: ping-ring .7s cubic-bezier(.1, .8, .3, 1) both; }
.ping i:nth-child(2) { border-color: var(--red); animation-delay: .07s; } .ping i:nth-child(3) { border-color: var(--brass); animation-delay: .14s; border-width: 2px; }
.ping.probe i { border-color: var(--brass); } @keyframes ping-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(5.5); opacity: 0; } }
.ping u { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--brass); border-radius: 1px; text-decoration: none; animation: ping-spark .7s cubic-bezier(.1, .8, .3, 1) both; } .ping u:nth-of-type(3n) { background: var(--red); } .ping u:nth-of-type(3n+1) { background: var(--paper); }
@keyframes ping-spark { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.4); opacity: 0; } }
.coin-fly { position: absolute; z-index: 31; pointer-events: none; font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--brass); text-shadow: 0 3px 0 rgba(0, 0, 0, .5); animation: coin-fly .72s cubic-bezier(.5, -.2, .6, 1) both; }
@keyframes coin-fly { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { transform: translate(0, -30px) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.7); opacity: .9; } }

@media (max-width: 760px) {
  .decks, .ach-grid { grid-template-columns: 1fr; } .inv { grid-template-columns: 1fr; }
  .adv-bar { top: 118px; max-width: 200px; } .tool-bar { bottom: 96px; flex-wrap: wrap; justify-content: center; width: calc(calc(100 * var(--vw)) - 16px); } .tool { min-width: 112px; }
  .mode-card { grid-template-columns: 46px 1fr auto; }
}
html.reduce-motion .ping, html.reduce-motion .coin-fly { display: none; }
@media (max-width: 900px) { .adv-bar { top: 262px; max-width: 176px; padding: 7px 9px 8px; } .ab-perk { width: 24px; height: 24px; font-size: 16px; } }

/* ---------- iconos propios ---------- */
.ic { display: block; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .38)); }
i.uic { display: contents; } .uic .ic, .menu-gear .ic { width: 28px; height: 28px; } .menu-gear .ic { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.ic.cn { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.26em; margin-right: .28em; }
.ic.sm { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 7px; } .hub-back .ic.sm { margin: 0; } .hub-back { display: inline-flex; align-items: center; gap: 6px; }
.ic.big { width: 160px; height: 160px; }
.hp { display: inline-block; margin-right: 2px; } .hp .ic { width: 22px; height: 22px; } .hp:not(.on) .ic { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }   /* la provision perdida tiene su propio corazon vacio (heart_empty) */ .hearts .hp .ic { width: 30px; height: 30px; } .ab-hearts { display: flex; }
.ab-coins { display: inline-flex; align-items: center; } .ab-coins b { font-weight: 700; }
.ab-perk .ic { width: 26px; height: 26px; }
.tl-ico .ic { width: 38px; height: 38px; } .tool.on .ic { filter: none; }
.adv-debuff span .ic { width: 52px; height: 52px; }
.ach-i .ic { width: 34px; height: 34px; } .ach-ico .ic { width: 46px; height: 46px; }
.tk-perks span .ic { width: 20px; height: 20px; } .tk-coins .ic { width: 1.3em; height: 1.3em; }
.coin-fly .ic { width: 30px; height: 30px; } #factText .ic.sm { margin-right: 8px; }
.route i.boss .ic { width: 15px; height: 15px; filter: none; } .intro-num .ic.big { width: 150px; height: 150px; }

/* Jersey 15 es de cuerpo pequeno: se sube el texto de lectura en el aspecto Casino */
html[data-skin="casino"] .mc-d, html[data-skin="casino"] .camp-d, html[data-skin="casino"] .mode-d, html[data-skin="casino"] .deck i, html[data-skin="casino"] .ach i, html[data-skin="casino"] .daily i, html[data-skin="casino"] .tk-from, html[data-skin="casino"] .set-note { font-size: 17px; line-height: 1.25; }
html[data-skin="casino"] .lb li, html[data-skin="casino"] .nick input, html[data-skin="casino"] .board-sel { font-size: 18px; }
html[data-skin="casino"] #factText, html[data-skin="casino"] #lvlText { font-size: 19px; }
html[data-skin="casino"] .camp-t { font-size: 25px; }
html[data-skin="casino"] .ach b { font-size: 19px; } html[data-skin="casino"] .tk-perks > div { font-size: 15.5px; }

/* ---------- ilustraciones (js/art.js) ---------- */
.art { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .4)); }
.art.bare { filter: none; } .art.bare .art-b { display: none; }
.intro-in.adv { align-items: center; } .intro-art { flex: none; width: min(calc(42 * var(--vw)), 470px); transform: rotate(2deg); animation: rise .6s .5s var(--spring) both; }
.v-art { width: min(100%, 420px); margin-bottom: 14px; transform: rotate(-2deg); animation: rise .6s .4s var(--spring) both; }
.mode-card.hero { position: relative; overflow: hidden; }
.ic.gem { display: inline-block; width: 14px; height: 14px; margin-left: 1px; vertical-align: -2px; filter: none; }
.stamp b .ic.st { width: .95em; height: .95em; display: inline-block; vertical-align: -.1em; filter: none; }
.btn-ink .ar .ic, .btn-line .ar .ic { width: 22px; height: 22px; margin: 0; } kbd .ic.sm { width: 14px; height: 14px; margin: 0; vertical-align: -2px; filter: none; }
.ic.badge { width: 100%; height: 100%; } .ach:not(.got) .ic { filter: grayscale(1) brightness(.6); }
.cx-art .ic.q { position: absolute; right: 8%; bottom: 8%; width: 30%; height: auto; opacity: .95; filter: none; } .cx-card.locked .cx-ic { opacity: .35; }
.cx-lx .ic { width: 34px; height: 34px; } .tag .ic.sm { width: 16px; height: 16px; margin-right: 5px; }
@media (max-width: 760px) { .intro-in.adv { flex-direction: column; } .intro-art { width: min(calc(80 * var(--vw)), 330px); } }

/* ---------- ilustraciones generadas (encima de la version vectorial, si existen) ---------- */
.pic { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #123420; box-shadow: 0 0 0 4px #16241c, 0 10px 0 4px rgba(0, 0, 0, .4); aspect-ratio: 8 / 5; }
.pic .art { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; }
.pic-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; image-rendering: auto; } .pic-img.on { opacity: 1; }
.pic-frame { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 -18px 30px -18px rgba(0, 0, 0, .5); border-radius: inherit; }
.intro-art .pic { transform: none; } .v-art .pic { width: 100%; }

/* ==================== CASINO x GEOGRAFIA ==================== */
/* fieltro impreso como mapa: retícula de meridianos y paralelos */
.felt { background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 16px),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 16px),
  radial-gradient(ellipse at 50% 28%, #35a56a, #17553a 78%); }

/* cartas: indice de rango + palo geografico en dos esquinas */
.ix { position: absolute; display: grid; justify-items: center; gap: 1px; line-height: 1; font-family: var(--serif); z-index: 2; }
.ix b { font-weight: 900; font-size: 20px; color: #16241c; } .ix .ic { width: 15px; height: 15px; filter: none; }
.ix.tl { left: 9px; top: 8px; } .ix.br { right: 9px; bottom: 9px; transform: rotate(180deg); }
.pc[data-suit="red"] .ix b { color: #c2372e; }

/* oferta = carta de poker */
@keyframes holo { to { background-position: -250% 0; } }
/* etiqueta de precio: ficha colgando bajo la carta */

/* mano de herramientas: cartas en abanico abajo, como la mano de Balatro */
.tool-bar { gap: 0; bottom: 74px; align-items: flex-end; }
.tool.pc-hand { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; row-gap: 3px; width: 104px; min-width: 0; padding: 30px 8px 8px; margin: 0 -8px; text-align: center; color: #16241c;
  background: #f6efdc; border-radius: 12px; box-shadow: 0 0 0 3px #16241c, inset 0 0 0 4px #6c8cff, inset 0 0 0 5.5px #16241c, 0 8px 0 rgba(0, 0, 0, .4);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 130%; transition: transform .25s var(--spring); }
.tool.pc-hand:hover:not(.off), .tool.pc-hand.aim:not(.off) { transform: rotate(0deg) translateY(-22px) scale(1.06); z-index: 3; box-shadow: 0 0 0 3px #16241c, inset 0 0 0 4px #f8b449, inset 0 0 0 5.5px #16241c, 0 14px 0 rgba(0, 0, 0, .4); }
.tool.pc-hand.on { background: #ffe08a; transform: rotate(0deg) translateY(-26px) scale(1.08); z-index: 4; }
.tool.pc-hand .tl-ico { grid-column: 1; grid-row: auto; width: 100%; height: 58px; display: grid; place-items: center; border: 2.5px solid #16241c; border-radius: 8px; background-color: #17553a; }
.tool.pc-hand .tl-ico .ic { width: 42px; height: 42px; } .tool.pc-hand b { font-size: 15.5px; color: #16241c; letter-spacing: .06em; }
.tool.pc-hand .ix.tl { left: 8px; top: 7px; } .tool.pc-hand .ix b { font-size: 18px; } .tool.pc-hand .tl-pips i { background: rgba(22, 36, 28, .22); } .tool.pc-hand .tl-pips i.on { background: #c2372e; }
.tool.pc-hand kbd { top: -10px; right: -4px; } .tool.pc-hand.off { filter: grayscale(.9) brightness(.85); }
/* al pasar el raton la carta sube 22 px: su franja de abajo sigue siendo suya (antes un clic ahi caia en el mapa y respondia la pregunta) */
.tool.pc-hand:hover::after, .tool.pc-hand.aim::after, .tool.pc-hand.on::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; }
/* lo que han dicho las sondas de la pregunta, encima de las cartas (en la nota, esta crecia y las cartas subian bajo el raton) */
.tool-bar .tl-res { position: absolute; left: 50%; bottom: calc(100% + 34px); transform: translateX(-50%); white-space: nowrap; padding: 5px 11px 6px; font-family: var(--mono); font-size: 13px; font-style: normal; font-weight: 500; letter-spacing: .04em; color: #16241c; background: #f6efdc; border-radius: 6px; box-shadow: 0 0 0 2px #16241c, 0 6px 0 rgba(0, 0, 0, .35); pointer-events: none; }
/* pista de la herramienta activa (Sonar, Brujula) encima de su carta: en la nota de abajo, esta crecia y la carta saltaba bajo el raton */
.tool.pc-hand .tl-aim { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; padding: 5px 11px 6px; font-family: var(--mono); font-size: 13px; font-style: normal; font-weight: 500; letter-spacing: .04em; color: #f6efdc; background: #16241c; border-radius: 6px; box-shadow: 0 0 0 2px #f8b449, 0 6px 0 rgba(0, 0, 0, .35); pointer-events: none; }

/* ficha "ciega": cae y gira como una moneda al empezar una ronda */
.intro-num.blind { font-size: 0; -webkit-text-stroke: 0; color: transparent; } .intro-num.blind .blindchip { width: 190px; height: 190px; animation: chip-drop .9s cubic-bezier(.3, 1.3, .5, 1) .2s both; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .45)); }
@keyframes chip-drop { 0% { transform: translateY(-160px) rotateX(70deg) rotate(-120deg); opacity: 0; } 60% { transform: translateY(6px) rotateX(0) rotate(8deg); opacity: 1; } 100% { transform: none; } }

@keyframes chip-turn { to { transform: rotate(360deg); } }

/* tienda = mesa de fieltro con palos geograficos de fondo */
.tool-bar { bottom: 98px; } .tool.pc-hand { padding-top: 40px; width: 108px; } .tool.pc-hand .ix.tl { left: 9px; top: 8px; grid-auto-flow: column; align-items: center; gap: 4px; } .tool.pc-hand .ix .ic { width: 17px; height: 17px; }
.tool.pc-hand .ix b { font-size: 20px; line-height: 1; }

/* Campamento: suministros de la proxima ronda */
/* v0.19: EL LOGRO FALSO del crupier (js/profile.js, fakeToast): igual que uno de verdad hasta que le cae el sello "De broma"; luego se tuerce y se cae */
.ach-toast.ach-fake { z-index: 100005; }
.ach-stamp { position: absolute; right: -14px; top: 50%; padding: 2px 10px 0; border: 3px solid #d8352a; color: #d8352a; background: rgba(246, 239, 220, .9); font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.4); pointer-events: none; }
.ach-fake.fooled .ach-stamp { animation: ach-stamp .26s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes ach-stamp { to { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1); } }
.ach-fake.drop { animation: ach-drop .8s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes ach-drop { 0% { transform: translateX(-50%) rotate(0); } 22% { transform: translateX(-50%) rotate(-8deg); } 100% { transform: translate(-50%, 110vh) rotate(-26deg); } }
html.reduce-motion .ach-fake.drop { animation: ach-fade .5s forwards; } html.reduce-motion .ach-fake.fooled .ach-stamp { animation: none; opacity: 1; transform: translateY(-50%) rotate(-12deg); }
@keyframes ach-fade { to { opacity: 0; } }

/* ---- tanda 2, lucirse: tu reliquia salta en la barra cuando actua (fl0 aviso; fl1/fl2 premio con marco de oro a pasos de pixel) y suelta su
   etiqueta ("+3 s", "+1"...); en el veredicto, las lineas que pone una reliquia llevan su icono. Animaciones a saltos (steps), nada suave */
.ab-perk { position: relative; }
.ab-perk.fl0, .ab-perk.fl1, .ab-perk.fl2 { animation: abHop .36s steps(6, end); }
.ab-perk.fl1, .ab-perk.fl2 { box-shadow: 0 0 0 2px #ffd95a, 0 0 0 4px rgba(255, 217, 90, .3); animation: abHop .36s steps(6, end), abGold .6s steps(3, end) forwards; }
.ab-perk.fl2 { box-shadow: 0 0 0 2px #fff6c8, 0 0 0 4px #ffd95a, 0 0 0 6px rgba(255, 217, 90, .3); }
@keyframes abHop { 0%, 100% { translate: 0 0; } 33% { translate: 0 -6px; } 66% { translate: 0 -2px; } }
@keyframes abGold { 0%, 66% { box-shadow: 0 0 0 2px #ffd95a, 0 0 0 4px rgba(255, 217, 90, .3); } 100% { box-shadow: none; } }
.ab-perk .ab-lbl { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; z-index: 2; padding: 2px 5px 1px; border-radius: 4px; background: #16241c; box-shadow: inset 0 0 0 2px #ffd95a;
  font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: #ffe08a; white-space: nowrap; pointer-events: none; animation: abLbl 1.1s steps(11, end) forwards; }
@keyframes abLbl { 0% { opacity: 0; transform: translateY(4px); } 18% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-9px); } }
html.reduce-motion .ab-perk.fl0, html.reduce-motion .ab-perk.fl1, html.reduce-motion .ab-perk.fl2 { animation: abGold .6s steps(1, end) forwards; }
html.reduce-motion .ab-perk .ab-lbl { animation: abLblRm 1.1s steps(1, end) forwards; } @keyframes abLblRm { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
/* tanda 4: con la Mesa de minimos, el objetivo de siempre sale tachado junto al rebajado */
.adv-goal .of-was { opacity: .6; margin-right: 3px; text-decoration-thickness: 2px; }