/* Acceso bajo la mochila: los buffs bajan una fila mientras dure el evento. */
#btn-bingo {
    position: fixed; top: calc(20px + 44px * var(--ui-scale)); left: 14px; z-index: 3488;
    transform: scale(var(--ui-scale)); transform-origin: top left;
    border-color: #ffcc00; background: linear-gradient(145deg, #603060, #24182c);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.28); font-size: 25px;
}
#btn-bingo[hidden] { display: none; }
#btn-bingo .bingo-button-label { position: absolute; bottom: 1px; font: 8px var(--font-display); letter-spacing: 1px; color: #ffe58a; }
body.bingo-disponible #buff-indicators { top: calc(26px + 88px * var(--ui-scale)); }
#bingo-panel {
    left: auto; right: 20px; top: 80px; width: 340px;
    max-width: calc(100vw - 28px); max-height: calc(100dvh - 100px);
    transform: none; z-index: 6001; box-sizing: border-box; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,204,0,0.4) transparent;
}
#bingo-panel .card-content { padding: 16px; }
.bingo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bingo-heading h2 { color: var(--accent-color); font-size: 21px; margin: 0; letter-spacing: 1px; }
#bingo-close { width: 32px; height: 30px; font: inherit; color: #ddd; }
.bingo-info { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.bingo-info-text { flex: 1; min-width: 0; }
#bingo-round { margin: 0 0 5px; color: #fff0b0; font-size: 15px; }
#bingo-clock { margin: 0; color: #bbb; font-size: 13px; }
#bingo-pattern { display: grid; grid-template-columns: repeat(5, 7px); gap: 2px; flex-shrink: 0; }
#bingo-pattern span { height: 7px; background: #36323b; border-radius: 1px; }
#bingo-pattern span.activo { background: var(--accent-color); }
.bingo-letters, #bingo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.bingo-letters { margin-bottom: 6px; color: var(--accent-color); text-align: center; font-size: 19px; }
.bingo-cell {
    position: relative; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
    background: rgba(255,255,255,0.06); color: #eee; font: 20px var(--font-display); cursor: pointer;
}
.bingo-cell:hover:not(:disabled), .bingo-cell:focus-visible { background: rgba(255,204,0,0.17); outline: 2px solid var(--accent-color); outline-offset: 1px; }
.bingo-cell.marcado { color: #211b00; background: #ffcc00; border-color: #ffe87e; }
.bingo-cell.marcado:not(.bingo-free)::after { content: '✓'; position: absolute; right: 3px; top: 1px; font-size: 10px; }
.bingo-cell.bingo-last { box-shadow: inset 0 0 0 2px #7ce6f7; }
.bingo-cell:disabled { cursor: default; }
.bingo-cell.bingo-free { font-size: 23px; background: #514219; color: #ffe87e; }
.bingo-call { display: flex; align-items: center; gap: 9px; margin: 12px 0 6px; color: #bbb; font-size: 13px; }
#bingo-last-number { min-width: 30px; text-align: center; color: #88edff; font-size: 24px; }
.bingo-help { color: #aaa; font-size: 12px; line-height: 1.4; margin: 0 0 10px; }
#bingo-claim { width: 100%; background: var(--accent-color); color: #17130a; font-family: inherit; font-size: 20px; padding: 9px; }
#bingo-claim:disabled { opacity: 0.45; cursor: default; transform: none; }
#bingo-status { color: #ff9999; font-size: 12px; margin: 8px 0 0; overflow-wrap: anywhere; }
#bingo-status:empty { display: none; }
.bingo-history-details { color: #bbb; font-size: 12px; margin-top: 12px; }
.bingo-history-details summary { cursor: pointer; padding: 3px 0; }
#bingo-history { margin-top: 8px; line-height: 1.6; max-height: 100px; overflow-y: auto; color: #eee; }
#bingo-winners { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; margin-top: 12px; font-size: 13px; color: #b6e8cb; overflow-wrap: anywhere; }
#bingo-prizes { font-size: 12px; color: #ffe58a; margin: 8px 0 0; }
#chat-messages .chat-bingo-host { color: #e7dcbd; }
#chat-messages .chat-bingo-host > span { color: var(--accent-color); }
#chat-messages .chat-bingo-claim { color: #85f0ff; font-size: 19px; text-shadow: 0 0 9px rgba(103,224,255,0.3); }
#chat-messages .chat-bingo-claim > span { color: #f4a8e1; }
.mobile-device #btn-bingo { top: 80px; transform: none; }
.mobile-device.bingo-disponible #buff-indicators { top: 70px; }
@media (max-width: 768px) {
    #bingo-panel { right: 14px; top: 80px; width: 300px; }
    #bingo-panel .card-content { padding: 12px; }
    .bingo-cell { height: 38px; }
    body.bingo-abierto #chat-container.activo { z-index: 6002; }
}