/* Haunted Stack · extras del sitio: usan las mismas tarjetas y botones del juego (.panel, .card, .play, .ghost-btn) */
.hs-panel { z-index: 12; }
.hs-panel .card { gap: 12px; }
.hs-panel .card h1 { font-size: 36px; }
.hs-sub { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.hs-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hs-tabs::-webkit-scrollbar { display: none; }
.hs-tabs button { flex: none; font: 700 13px var(--body); color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hs-tabs button.on { background: var(--candy); color: var(--night); }
.hs-tabs img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; background: rgba(255, 255, 255, .1); }
.hs-list { width: 100%; text-align: left; }
.hs-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 0; }
.hs-winners { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-align: left; }
.hs-winners span { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 10px; background: rgba(255, 211, 107, .08); }
.hs-winners b { color: var(--candy); }
.hs-row { display: flex; gap: 8px; width: 100%; }
.hs-row > * { flex: 1; }
.hs-input { font: 700 22px var(--display); letter-spacing: .2em; text-align: center; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-edge); border-radius: 14px; padding: 10px; width: 100%; box-sizing: border-box; }
.hs-code { font: 800 34px var(--display); letter-spacing: .22em; color: var(--candy); }
.hs-players { width: 100%; display: flex; gap: 8px; }
.hs-player { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); font-weight: 700; font-size: 14px; }
.hs-player img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; background: rgba(255, 255, 255, .08); }
.hs-player small { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.hs-player.ready small { color: #9dff6b; }
.hs-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.hs-steps { margin: 0; padding-left: 20px; text-align: left; font-size: 13.5px; line-height: 1.5; }
.hs-chip { pointer-events: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 5px; max-width: 34ch; padding: 6px 12px; border-radius: 14px; text-align: center; font: 700 13px/1.35 var(--body); color: var(--ink); background: rgba(70, 18, 100, .82); border: 1px solid var(--candy); }
.hs-chip b { color: var(--candy); }
.hs-chip button { all: unset; cursor: pointer; margin-left: 4px; padding: 0 4px; color: var(--ink-soft); font-weight: 700; }
.hs-chip.event { border-color: #ff8ad8; }
#hsVs { position: fixed; z-index: 11; top: calc(env(safe-area-inset-top, 0px) + 64px); left: max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(24, 10, 40, .72); border: 1px solid var(--glass-edge); font: 700 13px var(--body); color: var(--ink); pointer-events: none; }
#hsVs img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; }
#hsVs b { font-family: var(--display); color: var(--candy); font-variant-numeric: tabular-nums; }
#hsVs.out { opacity: .7; }
#hsCount { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; font: 400 140px var(--spooky); color: var(--pumpkin); text-shadow: 0 0 40px rgba(255, 140, 40, .6); }
#hsFxLayer { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.hs-share { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hs-card-img { width: 100%; border-radius: 14px; border: 1px solid var(--glass-edge); }
@media (prefers-reduced-motion: reduce) { #hsFxLayer { display: none; } }
/* bienvenida y "saltar la historia" */
.hs-field { font: 600 16px var(--body); color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-edge); border-radius: 14px; padding: 11px 14px; width: 100%; box-sizing: border-box; text-align: center; }
.hs-link { all: unset; cursor: pointer; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.hs-skip { pointer-events: auto; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 3; background: rgba(24, 10, 40, .6); }
#letterBtn:not([hidden]) ~ .hs-skip-letter { display: none; }
.hs-skip-letter { font-size: 13px; padding: 8px 18px; }
.hs-share a { text-decoration: none; display: inline-flex; align-items: center; }
/* portada: 4 pestañas debajo de Play y la hoja "More" */
.hs-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hs-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; border-radius: 16px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .04); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.hs-tab:hover, .hs-tab:focus-visible { background: rgba(255, 211, 107, .1); border-color: var(--candy); outline: none; }
.hs-tab:active { transform: translateY(1px); }
.hs-tab svg { width: 21px; height: 21px; fill: none; stroke: var(--candy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-tab .dot { position: absolute; top: 6px; right: calc(50% - 19px); width: 9px; height: 9px; border-radius: 50%; background: var(--pumpkin); box-shadow: 0 0 0 2px rgba(24, 10, 40, .9); }
#hsMoreTab svg circle { fill: var(--candy); stroke: none; }
.hs-more-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hs-more-list .ghost-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 13px 18px; font-size: 15px; }
.hs-more-list .ghost-btn::after { content: '›'; color: var(--ink-soft); font-size: 20px; line-height: 1; }
.hs-ch { border-color: var(--candy); color: var(--candy); }
/* el reto de $100 */
.hs-chip.hs-contest { font: 700 13px/1.35 var(--body); cursor: pointer; border-color: #9dff6b; background: rgba(20, 60, 30, .85); box-shadow: 0 0 18px rgba(157, 255, 107, .25); }
.hs-chip.hs-contest b { color: #9dff6b; letter-spacing: .04em; }
.hs-panel .hs-count { margin: -4px 0 0; font: 800 22px var(--display); color: #9dff6b; font-variant-numeric: tabular-nums; }
.hs-panel .hs-win { margin: 0; font: 800 20px var(--display); color: #9dff6b; text-align: center; }
.hs-rules { margin: 0; padding-left: 18px; text-align: left; font-size: 13.5px; line-height: 1.45; display: grid; gap: 4px; }
.hs-prog { width: 100%; display: grid; gap: 8px; }
.hs-prog > div { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; text-align: left; }
.hs-prog b { color: var(--candy); text-align: right; font-variant-numeric: tabular-nums; }
.hs-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.hs-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: #9dff6b; border-radius: 999px; }