body.game { overflow-x: hidden; }
.modes { display: flex; gap: 10px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.seg { display: flex; padding: 4px; gap: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); }
.seg button { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 9px; }
.seg button.active { background: rgba(92,203,79,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(92,203,79,.4); }

.play { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; max-width: 1280px; margin: 0 auto; padding: 26px 24px 40px; }

/* ---------- Objetivo ---------- */
.target { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.target-slot {
  width: 88px; height: 88px; flex: none; display: grid; place-items: center; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(92,203,79,.18), transparent 70%), var(--panel);
  border: 1px solid var(--line-2);
}
.target-slot .ico { --s: 64px; }
.target-slot .q { font: 700 46px var(--pixel); color: var(--green); text-shadow: 0 0 20px rgba(92,203,79,.5); }
.target-label { font: 600 12px var(--pixel); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.target h1 { margin: 2px 0 8px; font: 700 30px/1.1 var(--pixel); }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line-2); color: #cfd5dc; }
.pill.gold { color: var(--gold); border-color: rgba(242,201,76,.35); background: rgba(242,201,76,.08); }
.pill.btn { cursor: pointer; }
.pill.btn:hover { border-color: rgba(92,203,79,.5); color: #fff; }

/* ---------- Mesa ---------- */
.table-wrap { display: grid; justify-items: center; gap: 14px; }
.gui.table { padding: 22px 26px; gap: 22px; }
.gui.table .g3 { grid-template-columns: repeat(3, 64px); }
.gui.table .slot { width: 64px; height: 64px; cursor: pointer; }
.gui.table .slot .ico { --s: 48px; }
.gui.table .slot:hover { background: #a5a5a5; }
.gui.table .slot.big { width: 78px; height: 78px; cursor: default; }
.gui.table .slot.big:hover { background: var(--slot); }
.gui.table .slot.big .ico { --s: 64px; }
.gui.table .slot.big.bad::after { content: "✕"; position: absolute; font: 700 34px var(--pixel); color: #b02e26; }
.gui.table .arrow, .gui.table .arrow svg { width: 56px; height: 38px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.pop { animation: pop .25s; }
@keyframes pop { 50% { transform: scale(1.12); } }

.actions { display: flex; gap: 10px; }
.primary-btn, .ghost-btn { height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 800; font-size: 15px; border: 1px solid transparent; }
.primary-btn { background: linear-gradient(180deg, #6fdc61, var(--green-d)); color: #0b1a08; box-shadow: 0 4px 0 #24661f, 0 10px 24px -10px rgba(92,203,79,.7); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #24661f; }
.primary-btn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.ghost-btn { background: var(--panel); border-color: var(--line-2); color: #dfe4ea; }
.ghost-btn:hover { border-color: rgba(255,255,255,.3); }
.msg { min-height: 22px; font-weight: 700; font-size: 14px; color: var(--muted); text-align: center; }
.msg.bad { color: #ff8a8a; }
.msg.ok { color: var(--green); }

/* ---------- Historial ---------- */
.history { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.attempt { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); animation: pop .3s; }
.attempt .mini { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; }
.cell { width: 34px; height: 34px; border-radius: 5px; display: grid; place-items: center; background: #23282f; }
.cell .ico { --s: 32px; }
.cell.g { background: #3f9b38; box-shadow: inset 0 0 0 2px #6fdc61; }
.cell.y { background: #a58a1f; box-shadow: inset 0 0 0 2px #f2c94c; }
.cell.x { background: #2a2e34; box-shadow: inset 0 0 0 2px #4a5059; }
.cell.x .ico { opacity: .45; filter: grayscale(.6); }
.attempt .made { display: grid; justify-items: center; gap: 3px; font-size: 11px; color: var(--muted); max-width: 70px; text-align: center; }
.attempt .made .ico { --s: 32px; }

/* ---------- Inventario ---------- */
.inventory { position: sticky; top: 92px; align-self: start; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inv-head h2 { margin: 0; font: 700 20px var(--pixel); }
.holding { font-size: 12.5px; color: var(--muted); text-align: right; }
.holding b { color: var(--green); }
.search.small { height: 40px; max-width: none; margin: 0 0 12px; }
.inventory h3 { margin: 6px 0 8px; font: 600 12px var(--pixel); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 4px; padding: 6px; border-radius: 8px; background: var(--gui); border: 3px solid; border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi); margin-bottom: 12px; }
.inv-grid.scroll { overflow: auto; min-height: 140px; flex: 1; align-content: start; margin-bottom: 0; }
.inv-grid .slot { width: 44px; height: 44px; cursor: pointer; }
.inv-grid .slot:hover { background: #a5a5a5; }
.inv-grid .slot.sel { background: #b8e9ae; box-shadow: 0 0 0 2px var(--green-d); }

.cursor-item { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.cursor-item .ico { --s: 48px; }

/* ---------- Ventanas ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5,7,9,.75); backdrop-filter: blur(4px); }
.modal-card { width: 100%; max-width: 440px; max-height: 92vh; overflow: auto; padding: 26px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2); text-align: center; animation: pop .3s; }
.modal-card.left { text-align: left; }
.modal-card h2 { margin: 6px 0 6px; font: 700 26px var(--pixel); }
.modal-card p { color: #c5ccd4; margin: 6px 0 14px; }
.modal-card ol { padding-left: 20px; color: #c5ccd4; display: grid; gap: 8px; }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.legend .c { width: 18px; height: 18px; border-radius: 4px; }
.c.g { background: #3f9b38; } .c.y { background: #a58a1f; } .c.x { background: #3a3f47; }
.end-icon { display: grid; place-items: center; }
.end-icon .ico { --s: 64px; }
.small-gui { margin: 6px auto 14px; display: inline-flex; padding: 12px; gap: 12px; }
.small-gui .g3 { grid-template-columns: repeat(3, 40px); }
.end-grid { font-size: 16px; line-height: 1.15; letter-spacing: 1px; margin-bottom: 16px; white-space: pre; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fine { font-size: 12.5px; color: var(--muted) !important; margin-top: 14px !important; }

@media (max-width: 980px) {
  .play { grid-template-columns: 1fr; padding: 16px; }
  .inventory { position: static; max-height: none; }
  .inv-grid.scroll { max-height: 300px; }
  .top { flex-wrap: wrap; }
  .modes { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .gui.table { padding: 14px; gap: 10px; }
  .gui.table .g3 { grid-template-columns: repeat(3, 54px); }
  .gui.table .slot { width: 54px; height: 54px; }
  .gui.table .slot .ico { --s: 40px; }
  .gui.table .arrow, .gui.table .arrow svg { width: 34px; height: 24px; }
  .gui.table .slot.big { width: 62px; height: 62px; }
  .gui.table .slot.big .ico { --s: 48px; }
  .target h1 { font-size: 23px; }
  .target-slot { width: 72px; height: 72px; }
  .target-slot .ico { --s: 48px; }
  .seg button { padding: 6px 10px; font-size: 12.5px; }
  .attempt .mini { grid-template-columns: repeat(3, 26px); }
  .cell { width: 26px; height: 26px; }
  .cell .ico { --s: 24px; }
}

/* ---------- Cabecera: pestañas y usuario ---------- */
.main-tabs { margin: 0 auto; }
.main-tabs a { padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; }
.main-tabs a:hover { color: #fff; }
.main-tabs a.active { background: rgba(92,203,79,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(92,203,79,.4); }
.top .right { display: flex; align-items: center; gap: 10px; }
.icon-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); font-size: 18px; }
.icon-link:hover { border-color: rgba(92,203,79,.5); }
.discord-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  background: #5865f2; color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 20px -8px rgba(88,101,242,.8);
}
.discord-btn:hover { background: #4752c4; }
.discord-btn svg { width: 22px; height: 22px; }
.discord-btn.big { height: 50px; padding: 0 24px; font-size: 16px; margin-top: 6px; }
.user-chip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 4px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; }
.user-chip img, .user-chip .av { width: 32px; height: 32px; border-radius: 50%; }
.user-chip .av, .ravatar.av { display: grid; place-items: center; background: #5865f2; color: #fff; font-weight: 800; }
.user-chip span:not(.av) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 15px; }
.user-chip button:hover { color: #ff8a8a; background: rgba(255,80,80,.1); }

.mini-seg { padding: 3px; border-radius: 99px; }
.mini-seg button { padding: 3px 11px; font-size: 12.5px; border-radius: 99px; }

/* ---------- Muro de login del campeonato ---------- */
.login-wall { max-width: 520px; margin: 10px auto; padding: 34px 28px; text-align: center; border-radius: 20px; background: radial-gradient(80% 60% at 50% 0%, rgba(88,101,242,.18), transparent 70%), var(--panel); border: 1px solid var(--line-2); }
.lw-icon { font-size: 54px; filter: drop-shadow(0 8px 20px rgba(242,201,76,.4)); }
.login-wall h2 { margin: 6px 0; font: 700 28px var(--pixel); }
.login-wall p { color: #c5ccd4; margin: 8px 0; }
.muted { color: var(--muted) !important; }
.dev { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.dev input { height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); }

/* ---------- Ya jugado hoy ---------- */
.done-box { display: grid; justify-items: center; gap: 6px; padding: 16px 20px; border-radius: 16px; background: rgba(242,201,76,.07); border: 1px solid rgba(242,201,76,.3); text-align: center; }
.done-box b { color: #fff; }
.done-box > span { color: #c5ccd4; font-size: 14px; }
.done-box .row { display: flex; gap: 8px; margin-top: 6px; }
.done-box .ghost-btn { height: 40px; display: inline-flex; align-items: center; font-size: 14px; }
#nextChamp { color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- Ranking ---------- */
.ranking { max-width: 860px; margin: 0 auto; padding: 30px 24px 50px; }
.rank-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.rank-head h1 { margin: 0; font: 700 34px var(--pixel); }
.rank-head p { margin: 4px 0 0; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; margin-bottom: 22px; }
.pod { display: grid; justify-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 16px 16px 8px 8px; background: var(--panel); border: 1px solid var(--line-2); text-align: center; min-width: 0; }
.pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod span { color: var(--gold); font-weight: 800; }
.pod .medal { font-size: 30px; }
.pod .ravatar { width: 54px; height: 54px; }
.pod.p1 { order: 2; padding-top: 26px; background: linear-gradient(180deg, rgba(242,201,76,.16), var(--panel)); border-color: rgba(242,201,76,.45); }
.pod.p1 .ravatar { width: 68px; height: 68px; box-shadow: 0 0 0 3px var(--gold); }
.pod.p2 { order: 1; }
.pod.p3 { order: 3; }
.pod.me, .rrow.me { box-shadow: inset 0 0 0 2px var(--green); }
.ravatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.rank-table { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.rrow { display: grid; grid-template-columns: 54px minmax(0, 1fr) 100px 110px 80px; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.rrow.head { border-top: 0; background: var(--panel-2); font: 600 11.5px var(--pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.rrow .pos { font-weight: 800; color: var(--muted); font-size: 16px; text-align: center; }
.rrow .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rrow .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .pts { font-weight: 800; color: var(--gold); text-align: right; }
.rrow > span:nth-child(3), .rrow > span:nth-child(4) { color: #c5ccd4; }
.r-empty { padding: 40px 20px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 14px; }
.primary-btn.inline { display: inline-flex; align-items: center; height: 44px; }

@media (max-width: 980px) {
  .main-tabs { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .main-tabs a { padding: 7px 10px; font-size: 13px; }
  .discord-btn { padding: 0 12px; font-size: 13px; }
  .user-chip span:not(.av) { max-width: 80px; }
  .rrow { grid-template-columns: 30px minmax(0, 1fr) 72px 52px; padding: 10px; font-size: 13.5px; }
  .rrow.head { font-size: 10px; letter-spacing: .5px; }
  .rrow > span:nth-child(4) { display: none; }
  .podium { gap: 6px; }
  .pod .ravatar { width: 40px; height: 40px; }
  .pod.p1 .ravatar { width: 50px; height: 50px; }
}

/* ---------- Selector crafteo / pociones ---------- */
.game-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.game-tabs button {
  flex: 1; max-width: 240px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel);
  color: var(--muted); font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.game-tabs button:hover { color: #fff; }
.game-tabs button.active { color: #fff; background: linear-gradient(180deg, rgba(92,203,79,.18), rgba(92,203,79,.06)); border-color: rgba(92,203,79,.5); }
.game-tabs button[data-game="potion"].active { background: linear-gradient(180deg, rgba(186,104,255,.22), rgba(186,104,255,.06)); border-color: rgba(186,104,255,.55); }

/* ---------- Soporte para pociones ---------- */
.gui.brew { flex-wrap: wrap; gap: 6px; padding: 20px 18px; row-gap: 14px; max-width: 100%; }
.bstep { display: grid; justify-items: center; gap: 4px; }
.bstep small { font: 600 11px var(--pixel); color: #4b4b4b; max-width: 92px; text-align: center; line-height: 1.15; }
.bstep .slot { width: 56px; height: 56px; }
.bstep .slot .ico { --s: 48px; }
.bstep .slot.step { cursor: pointer; }
.bstep .slot.step:hover { background: #a5a5a5; }
.bstep .slot.step:empty::after { content: "+"; font: 700 22px var(--pixel); color: #6d6d6d; }
.bstep .slot.badstep { background: #c9625b; box-shadow: 0 0 0 2px #8f2b23; }
.bstep.end .slot.big { width: 68px; height: 68px; }
.bstep.end .slot.big .ico { --s: 64px; }
.bstep.end .slot.big.bad::after { content: "✕"; position: absolute; font: 700 30px var(--pixel); color: #b02e26; }
.sarrow { font: 700 26px var(--pixel); color: #7b7b7b; align-self: center; margin-bottom: 18px; }
.gui.brew .arrow { align-self: center; margin-bottom: 18px; }

.inv-help { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.ing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; overflow-x: hidden; }
.ing {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; text-align: left;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 13px; font-weight: 600; color: #dfe4ea;
}
.ing:hover { border-color: rgba(186,104,255,.6); background: rgba(186,104,255,.08); }
.ing:active { transform: scale(.97); }
.ing .ico { --s: 32px; }
.ing span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brew-att .steps { display: flex; gap: 3px; }
.sol-brew { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sol-brew > .ico { --s: 32px; }
.sol-brew .sarrow { margin: 0; font-size: 20px; }
.sol-brew .arrow { margin: 0; }
.small-gui.brew-sol { padding: 12px 14px; }

.primary-btn.sm { height: 40px; font-size: 14px; padding: 0 16px; }
.pod small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.badges { white-space: nowrap; font-size: 13px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .game-tabs button { font-size: 13px; height: 40px; }
  .bstep .slot { width: 46px; height: 46px; }
  .bstep .slot .ico { --s: 32px; }
  .bstep small { font-size: 10px; max-width: 70px; }
  .bstep.end .slot.big { width: 56px; height: 56px; }
  .bstep.end .slot.big .ico { --s: 48px; }
  .sarrow { font-size: 20px; }
  .ing-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Campeonato agrupado ---------- */
.champ-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; padding: 10px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); }
.mode-seg button { padding: 7px 12px; }
.progress { display: flex; gap: 6px; margin: 0 auto; }
.pchip { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); font-size: 17px; font-weight: 800; color: #fff; }
.pchip.now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,201,76,.35); animation: pulseChip 1.6s infinite; }
@keyframes pulseChip { 50% { box-shadow: 0 0 0 5px rgba(242,201,76,.12); } }
.pchip.ok { background: #3f9b38; border-color: #6fdc61; }
.pchip.ko { background: #8f2b23; border-color: #d0574d; }
.timer { font: 700 18px var(--pixel); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.timer.run { color: var(--gold); }

.champ-intro, .champ-summary { max-width: 640px; margin: 0 auto; padding: 30px 28px; border-radius: 20px; background: radial-gradient(80% 60% at 50% 0%, rgba(242,201,76,.12), transparent 70%), var(--panel); border: 1px solid var(--line-2); text-align: center; }
.ci-icon { font-size: 52px; }
.champ-intro h2 { margin: 8px 0; font: 700 26px var(--pixel); }
.champ-intro p { color: #c5ccd4; margin: 8px 0 14px; }
.ci-rounds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 18px; }
.ci-rounds span { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 700; }
.ci-rounds b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3b2a00; font-size: 11.5px; }
.primary-btn.big { height: 54px; padding: 0 34px; font-size: 17px; margin-top: 6px; }

.cs-head { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: left; margin-bottom: 18px; }
.cs-big { font: 700 64px/1 var(--pixel); color: var(--gold); }
.cs-big small { font-size: 28px; color: var(--muted); }
.cs-head h2 { margin: 0 0 4px; font: 700 24px var(--pixel); }
.cs-head p { margin: 0; color: #c5ccd4; }
.cs-rounds { display: grid; gap: 8px; margin-bottom: 14px; text-align: left; }
.cs-round { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.cs-round:hover { border-color: rgba(255,255,255,.3); }
.cs-round.ok { box-shadow: inset 4px 0 0 #5ccb4f; }
.cs-round.ko { box-shadow: inset 4px 0 0 #d0574d; }
.cs-round .ico { --s: 32px; }
.cs-round { text-align: left; }
.cs-round span { display: grid; justify-items: start; min-width: 0; }
.cs-round b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-round small { color: var(--muted); font-size: 12.5px; }
.champ-summary .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.champ-summary .ghost-btn, .champ-summary .primary-btn { height: 42px; display: inline-flex; align-items: center; font-size: 14px; }
.champ-summary .nextChamp { color: var(--gold); font-variant-numeric: tabular-nums; }

.rank-ctrls { display: flex; gap: 8px; flex-wrap: wrap; }
.marks { display: flex; gap: 3px; }
.marks i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; }
.marks i.ok { background: rgba(92,203,79,.25); box-shadow: inset 0 0 0 1px #5ccb4f; }
.marks i.ko { background: rgba(208,87,77,.2); box-shadow: inset 0 0 0 1px #d0574d; filter: grayscale(.4); }
.rrow { grid-template-columns: 54px minmax(0, 1fr) 140px 110px 80px; }

@media (max-width: 600px) {
  .champ-bar { gap: 8px; padding: 8px; }
  .mode-seg { width: 100%; }
  .mode-seg button { flex: 1; font-size: 12.5px; padding: 6px 4px; }
  .progress { margin: 0; }
  .pchip { width: 32px; height: 32px; font-size: 14px; }
  .timer { margin-left: auto; font-size: 16px; }
  .cs-head { flex-direction: column; text-align: center; gap: 8px; }
  .rrow { grid-template-columns: 30px minmax(0, 1fr) 72px 52px; }
  .rrow > span:nth-child(3) { display: none; }
  .rrow > span:nth-child(4) { display: block; }
}

.wall-note { margin: 16px auto 0 !important; max-width: 440px; padding: 10px 14px; border-radius: 12px; background: rgba(242,201,76,.08); border: 1px solid rgba(242,201,76,.3); color: #f3dc8a !important; font-size: 14px; }
.wall-note.bad { background: rgba(255,84,112,.08); border-color: rgba(255,84,112,.3); color: #ffb3c0 !important; }

/* arrastrar para rellenar la mesa */
#grid { touch-action: none; user-select: none; -webkit-user-select: none; }

/* ---------- Cuenta: entrar / registrarse ---------- */
.auth-btns { display: flex; gap: 8px; }
.primary-btn.sm, .ghost-btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
a.primary-btn, a.ghost-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wall-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.wall-btns a { min-width: 150px; }
a.user-chip { color: inherit; text-decoration: none; padding-right: 14px; }
a.user-chip:hover { border-color: #5fd35f; }

.auth-page { display: grid; place-items: start center; padding: 30px 16px 60px; }
.auth-card { width: 100%; max-width: 420px; padding: 30px 28px; border-radius: 22px; background: radial-gradient(90% 50% at 50% 0%, rgba(92,203,79,.12), transparent 70%), var(--panel); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.auth-logo { display: grid; place-items: center; margin-bottom: 6px; }
.auth-logo .ico { --s: 48px; }
.auth-card h1 { margin: 4px 0 4px; text-align: center; font: 700 26px var(--pixel); }
.auth-card > section > .muted { text-align: center; margin: 0 0 20px; font-size: 14.5px; }
.aform { display: flex; flex-direction: column; gap: 12px; }
.aform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #c5ccd4; }
.aform input, .prow input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: inherit; font: 500 15px inherit; font-family: inherit; min-width: 0; }
.aform input:focus, .prow input:focus { outline: none; border-color: #5fd35f; box-shadow: 0 0 0 3px rgba(95,211,95,.15); }
.aform input::placeholder, .prow input::placeholder { color: #6c737c; }
.aform .primary-btn { width: 100%; margin-top: 4px; }
.code-input { letter-spacing: 3px; font-variant-numeric: tabular-nums; text-align: center; font-weight: 800 !important; }
.alink { font-size: 13px; color: #8fd88f; text-decoration: none; align-self: flex-end; margin-top: -4px; }
.alink:hover, .aswitch a:hover { text-decoration: underline; }
.aswitch { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.aswitch a { color: #8fd88f; font-weight: 700; text-decoration: none; }
.aerr, .aok { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.aerr { background: rgba(255,84,112,.08); border: 1px solid rgba(255,84,112,.3); color: #ffb3c0; }
.aok { background: rgba(95,211,95,.08); border: 1px solid rgba(95,211,95,.3); color: #b6f0b6; }
.aok small, .aerr small { opacity: .8; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.discord-part .discord-btn { width: 100%; justify-content: center; margin-top: 0; }

/* ---------- Perfil ---------- */
.profile-page { max-width: 640px; margin: 0 auto; padding: 26px 16px 60px; display: flex; flex-direction: column; gap: 14px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.profile-head h1 { margin: 0; font: 700 28px var(--pixel); word-break: break-all; }
.profile-head p { margin: 4px 0 0; }
.pav { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; }
.pav.av { display: grid; place-items: center; background: #3c9a3c; color: #fff; font: 800 28px var(--pixel); }
.dtag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #5865f2; color: #fff; font-size: 12px; font-weight: 800; margin-right: 4px; }
.pnotice { margin: 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.pnotice.ok { background: rgba(95,211,95,.1); border: 1px solid rgba(95,211,95,.35); color: #b6f0b6; }
.pnotice.bad { background: rgba(255,84,112,.08); border: 1px solid rgba(255,84,112,.3); color: #ffb3c0; }
.pcard { padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, box-shadow .3s; }
.pcard.flash { border-color: #f2c94c; box-shadow: 0 0 0 3px rgba(242,201,76,.2); }
.pcard h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcard > .muted { margin: 0; font-size: 14px; line-height: 1.5; }
.prow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.prow input { flex: 1; min-width: 180px; height: 42px; }
.prow input:disabled { opacity: .6; }
.prow .ghost-btn:not(.sm) { height: 42px; padding: 0 18px; font-size: 14px; }
.badge { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); }
.badge:empty { display: none; }
.badge.ok { background: rgba(95,211,95,.12); color: #8fe08f; }
.badge.warn { background: rgba(242,201,76,.12); color: #f3dc8a; }
.ghost-btn.danger { color: #ffb3c0; border-color: rgba(255,84,112,.35); }
.tfa-setup { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tfa-setup img { background: #fff; border-radius: 12px; padding: 6px; image-rendering: pixelated; }
.tfa-setup div { display: flex; flex-direction: column; gap: 6px; }
code.secret { font-size: 15px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-2); letter-spacing: 1px; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.backup-codes code { padding: 8px; text-align: center; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-2); font-size: 15px; letter-spacing: 1px; }
.danger-zone { flex-direction: row; justify-content: flex-end; background: transparent; border-style: dashed; }
@media (max-width: 620px) {
  .auth-btns .ghost-btn { display: none; }
  .auth-card { padding: 24px 18px; }
  .wall-btns { flex-direction: column; }
}

/* ---------- Solicitudes / chat / admin ---------- */
.opt { font-weight: 500; color: var(--muted); }
.aform textarea, .chat-form textarea { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: inherit; font: 500 14.5px/1.45 inherit; font-family: inherit; resize: vertical; min-height: 46px; }
.aform textarea:focus, .chat-form textarea:focus { outline: none; border-color: #5fd35f; box-shadow: 0 0 0 3px rgba(95,211,95,.15); }
.auth-card.wide { max-width: 620px; }
.center { text-align: center; }
.small { font-size: 12.5px; }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; min-height: 180px; overflow-y: auto; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2); margin: 6px 0 10px; }
.cmsg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 85%; }
.cmsg.mine { align-self: flex-end; align-items: flex-end; }
.cmsg .bubble { padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #232830; border: 1px solid var(--line-2); white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.45; }
.cmsg.mine .bubble { border-radius: 14px 14px 4px 14px; background: rgba(95,211,95,.14); border-color: rgba(95,211,95,.3); }
.cmsg small { font-size: 11.5px; color: var(--muted); }
.cmsg.sys { align-self: center; max-width: 95%; font-size: 12.5px; color: var(--muted); text-align: center; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.04); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-width: 0; }
.chat-form button { height: 46px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pgrid input { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: inherit; font: 500 14.5px inherit; font-family: inherit; min-width: 0; }
.pgrid input:focus { outline: none; border-color: #5fd35f; box-shadow: 0 0 0 3px rgba(95,211,95,.15); }
.pgrid button { grid-column: 1 / -1; justify-self: start; height: 42px; font-size: 14px; }
.pnotice.warn { background: rgba(242,201,76,.1); border: 1px solid rgba(242,201,76,.35); color: #f3dc8a; }
.help-list { display: flex; flex-direction: column; gap: 6px; }
.help-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); color: inherit; text-decoration: none; font-weight: 700; font-size: 14px; }
.help-item:hover { border-color: #5fd35f; }
.help-item span:first-child { flex: 1; }
.dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #ff5470; color: #fff; font-size: 11.5px; font-weight: 800; }
.adm-link { position: relative; text-decoration: none; }
.adm-link .dot, .user-chip .dot { position: absolute; top: -6px; right: -6px; }
.user-chip { position: relative; }

.admin-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-head h1 { margin: 0; font: 700 26px var(--pixel); }
.admin-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.adm-list { display: flex; flex-direction: column; gap: 8px; max-height: 75vh; overflow-y: auto; }
.adm-item { text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.adm-item:hover { border-color: var(--line-2); }
.adm-item.sel { border-color: #5fd35f; box-shadow: 0 0 0 2px rgba(95,211,95,.15); }
.adm-item.new { background: linear-gradient(90deg, rgba(255,84,112,.08), transparent 60%), var(--panel); }
.ai-top { display: flex; align-items: center; gap: 8px; }
.ai-top b:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ai-kind { font-size: 12.5px; color: #c5ccd4; }
.ai-last { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnc { color: #f3dc8a; }
.adm-chat { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); min-height: 300px; }
.adm-user { display: flex; align-items: center; gap: 12px; }
.adm-user img, .adm-user .av { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.adm-user .av { display: grid; place-items: center; background: #3c9a3c; color: #fff; font-weight: 800; }
.warnbox { padding: 10px 12px; border-radius: 12px; background: rgba(242,201,76,.08); border: 1px solid rgba(242,201,76,.3); color: #f3dc8a; font-size: 14px; }
.adm-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
@media (max-width: 800px) {
  .admin-grid { grid-template-columns: 1fr; }
  .adm-list { max-height: 40vh; }
  .pgrid { grid-template-columns: 1fr; }
}

/* ---------- Mensajes (admin): un chat por usuario ---------- */
.admin-head { align-items: flex-end; }
.admin-head p { margin: 0; flex-basis: 100%; font-size: 14px; }
.adm-side { display: flex; flex-direction: column; gap: 8px; }
.adm-search { height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: inherit; font: 500 14px inherit; font-family: inherit; }
.adm-search:focus { outline: none; border-color: #5fd35f; }
.adm-item { flex-direction: row; align-items: center; gap: 12px; position: relative; }
.adm-item.closed { opacity: .65; }
.adm-item .dot { position: static; }
.cav { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.cav.av { display: grid; place-items: center; background: #3c9a3c; color: #fff; font-weight: 800; font-size: 17px; }
.ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-top b { flex: 1; }
.adm-item.new .ai-last { color: #e8ecf0; font-weight: 600; }
.ai-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: #c5ccd4; }
.tag.pw { background: rgba(242,201,76,.12); color: #f3dc8a; }
.tag.done { background: rgba(95,211,95,.12); color: #8fe08f; }
.tag.warn { background: rgba(255,84,112,.1); color: #ffb3c0; }
.au-info { min-width: 0; }
.au-info b { font-size: 17px; }
.cdiv { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; margin: 4px 0; }
.cdiv::before, .cdiv::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.reply-to { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.reply-to button { border: 1px solid var(--line-2); background: var(--bg); color: #c5ccd4; border-radius: 99px; padding: 4px 10px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.reply-to button.on { border-color: #5fd35f; color: #b6f0b6; }
.adm-chat .chat { max-height: 55vh; }

/* ---------- Panel de control ---------- */
.adm-tabs { flex-wrap: wrap; }
.adm-tabs button { position: relative; }
.adm-tabs button.active { background: var(--panel-2); color: #fff; }
.adm-tabs .dot { position: absolute; top: -6px; right: -4px; }
.adm-help { margin: 0 0 12px; font-size: 14px; }
.ghost-btn.icon { width: 40px; padding: 0; margin-left: auto; }
.tag.disc { background: #5865f2; color: #fff; }
.ud-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.ud-sec h3 { margin: 0; font-size: 15px; }
.perm-list { display: flex; flex-direction: column; gap: 8px; }
.perm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); cursor: pointer; }
.perm:has(input:checked) { border-color: #5fd35f; background: rgba(95,211,95,.06); }
.perm input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); }
.perm span { display: flex; flex-direction: column; gap: 2px; }
.perm small { color: var(--muted); font-size: 12.5px; }
.bonus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bonus { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.bonus .ghost-btn.sm { height: 34px; padding: 0 12px; }
.dm { font-weight: 700; font-size: 13px; }
.day-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); }
.day-row .dm { min-width: 150px; }
.dres { font-size: 13.5px; color: #c5ccd4; flex: 1; }
.mini { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.mini input, input.num { width: 92px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: inherit; font: inherit; }
.mini .ghost-btn.sm { height: 36px; }
.add-rank { margin-bottom: 12px; }
.add-rank .prow input[name=nick] { flex: 1; }
.adm-rank-ctrls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-rank { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ar-head, .ar-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 80px 70px 150px; gap: 10px; align-items: center; }
.ar-head { font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 14px; }
.ar-row { padding: 8px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ar-row .pos { font: 700 18px var(--pixel); color: var(--muted); }
.ar-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-row .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-row .cav { width: 32px; height: 32px; font-size: 14px; }
.ar-row .pts { font-weight: 800; color: var(--gold); }
.ar-acts { display: flex; gap: 4px; justify-content: flex-end; }
.ar-acts .ghost-btn.sm { height: 34px; padding: 0 10px; }
.hid-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hid { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; }
.hid .ghost-btn.sm { height: 30px; font-size: 12.5px; border-radius: 99px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.theme-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line-2); color: inherit; text-align: left; cursor: pointer; }
.theme-grid button:hover { border-color: rgba(255,255,255,.3); }
.theme-grid button.on { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.theme-grid small { color: var(--muted); }
.tprev { width: 100%; height: 80px; border-radius: 12px; display: grid; place-items: center; font-size: 38px; margin-bottom: 6px; }
.t-normal { background: linear-gradient(135deg, #1f3a1c, #0e1013); }
.t-halloween { background: linear-gradient(135deg, #3a1d00, #2a0f3d); }
.t-navidad { background: linear-gradient(135deg, #4a0d12, #0d3a1d); }
.t-sanvalentin { background: linear-gradient(135deg, #4a0f2e, #2b0f1f); }
.sup-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sup-foot .aswitch { margin: 0; }
@media (max-width: 700px) {
  .ar-head { display: none; }
  .ar-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ar-row > span:nth-child(4) { display: none; }
  .ar-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .bonus-row { grid-template-columns: 1fr; }
}

/* ---------- Cumpleaños ---------- */
.bday-banner { position: relative; z-index: 3; max-width: 1180px; width: calc(100% - 32px); margin: 16px auto -4px; padding: 10px 16px; border-radius: 14px; text-align: center; font-weight: 700; background: linear-gradient(90deg, rgba(255,84,112,.18), rgba(255,213,79,.18), rgba(92,203,79,.18)); border: 1px solid rgba(255,213,79,.35); }
.bday-banner button { margin-left: 8px; border: 0; border-radius: 99px; padding: 4px 12px; background: #ffd54f; color: #2a1d00; font-weight: 800; cursor: pointer; }
.bday { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(40,20,50,.75), rgba(5,7,9,.92)); backdrop-filter: blur(3px); }
.bday-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bday-confetti i { position: absolute; top: -30px; animation: confall linear infinite; }
.bday-confetti i.piece { width: 9px; height: 14px; border-radius: 2px; }
@keyframes confall { to { transform: translateY(110vh) rotate(var(--spin)); } }
.bday-card { position: relative; max-width: 440px; width: 100%; padding: 30px 26px; border-radius: 24px; text-align: center; background: linear-gradient(180deg, #2a1f33, #161a1f); border: 2px solid #ffd54f; box-shadow: 0 0 60px rgba(255,213,79,.35); animation: bdpop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bdpop { from { transform: scale(.6); opacity: 0; } }
.bday-cake { display: grid; place-items: center; margin: -70px auto 6px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, #3a2a45, #1d1624); border: 2px solid #ffd54f; }
.bday-cake .ico { --s: 64px; animation: tbob2 1.4s ease-in-out infinite; }
@keyframes tbob2 { 50% { transform: translateY(-5px) scale(1.05); } }
.bday-card h2 { margin: 8px 0 10px; font: 700 28px/1.2 var(--pixel); color: #fff; }
.bday-card h2 span { background: linear-gradient(90deg, #ff5470, #ffd54f, #5ccb4f, #4fc3f7, #ba68ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 34px; }
.bday-card p { color: #d6dbe1; margin: 0 0 20px; line-height: 1.5; }
.bday-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bd-form { margin-bottom: 14px; }
.bd-grid { display: grid; grid-template-columns: 2fr 80px 1.3fr 1.5fr; gap: 8px; }
.bd-grid label, .bd-msg { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: #c5ccd4; }
.bd-grid input, .bd-grid select, .bd-msg textarea { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: inherit; font: 500 14.5px inherit; font-family: inherit; min-width: 0; }
.bd-msg textarea { height: auto; padding: 10px 12px; resize: vertical; }
.bd-list { display: flex; flex-direction: column; gap: 8px; }
.bd-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.bd-item.today { border-color: #ffd54f; background: linear-gradient(90deg, rgba(255,213,79,.12), var(--panel) 60%); }
.bd-item .ai-body { flex: 1; min-width: 0; }
.bd-when { font-weight: 800; font-size: 13px; color: var(--gold); white-space: nowrap; }
@media (max-width: 700px) { .bd-grid { grid-template-columns: 1fr 80px; } .bd-grid label:nth-child(3), .bd-grid .bd-label { grid-column: 1 / -1; } }

.old-server { position: relative; z-index: 200; padding: 12px 16px; text-align: center; font-weight: 700; background: #5a1a1a; color: #ffd6d6; border-bottom: 2px solid #ff5470; }

/* ---------- Amigos y duelos ---------- */
.main-tabs a { position: relative; }
.main-tabs .dot { position: absolute; top: -6px; right: -6px; }
.friends-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fr-head h1 { margin: 0; font: 700 28px var(--pixel); }
.fr-head p { margin: 4px 0 0; }
.elo-card { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; padding: 12px 18px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.elo-num { font: 700 34px var(--pixel); color: var(--gold); grid-row: 1 / 3; }
.elo-lbl { font-weight: 800; font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.elo-wl { font-size: 13px; color: #c5ccd4; }
.elo-wl .w { color: #8fe08f; } .elo-wl .l { color: #ff9aa9; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fr-col { display: flex; flex-direction: column; gap: 14px; }
.fr-col .pcard h2 { font-size: 16px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fr-row:first-of-type { border-top: 0; }
.fr-row .cav { width: 38px; height: 38px; font-size: 15px; }
.fr-row.me { background: color-mix(in srgb, var(--green) 8%, transparent); border-radius: 10px; padding-left: 8px; }
.fr-row .pos { width: 22px; text-align: center; font: 700 16px var(--pixel); color: var(--muted); }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-info small { color: var(--muted); font-size: 12.5px; }
.fr-info small b.up, .elo-change.up { color: #8fe08f; } .fr-info small b.down, .elo-change.down { color: #ff9aa9; }
.fr-row .primary-btn.sm, .fr-row .ghost-btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.fr-row .ghost-btn.icon { width: 34px; margin-left: 0; }
.elo-pill { font-weight: 800; color: var(--gold); }
.on-dot, .off-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.on-dot { background: #4cd964; box-shadow: 0 0 6px #4cd964; }
.off-dot { background: #5c636c; }
.duel-bar { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.duel-bar img { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin: 0 4px; }
.db-opp { color: var(--muted); font-size: 12.5px; }
.elo-change { font: 700 20px var(--pixel); margin: 6px 0 0 !important; }
@media (max-width: 800px) { .fr-grid { grid-template-columns: 1fr; } }

/* ---------- Conexión (panel) ---------- */
.pres-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pres-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.pres-grid small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.pres-grid b { font-size: 14px; }
.sess { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line-2); overflow: hidden; font-size: 13px; }
.sess > div { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); }
.sess > div:first-child { border-top: 0; }
.sess-h { background: var(--bg); font-weight: 800; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) { .pres-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Mantenimiento ---------- */
.maint { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); }
body.maint-on { overflow: hidden; }
.maint-card { max-width: 480px; text-align: center; padding: 34px 28px; border-radius: 24px; background: var(--panel); border: 2px solid color-mix(in srgb, var(--green) 50%, transparent); box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--green) 60%, transparent); }
.maint-icon { font-size: 64px; animation: tbob2 2s ease-in-out infinite; }
.maint-card h1 { font: 700 26px/1.2 var(--pixel); margin: 10px 0; color: color-mix(in srgb, var(--green) 70%, #fff); }
.maint-card p { color: #d6dbe1; margin: 8px 0; }
.maint-banner { position: relative; z-index: 200; padding: 9px 16px; text-align: center; font-size: 14px; background: #4a3a10; color: #ffe9a8; border-bottom: 2px solid #f2c94c; }
.maint-banner a { color: #fff; text-decoration: underline; margin-left: 6px; }
.maint-panel { margin-top: 16px; }

/* ---------- Buscar contrincante ---------- */
.match-card { align-items: center; text-align: center; padding: 26px 22px; background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--green) 14%, transparent), transparent 70%), var(--panel); }
.match-card h2 { font: 700 22px var(--pixel) !important; }
.match-card > p { max-width: 420px; }
.mc-swords { font-size: 46px; animation: tbob2 2.4s ease-in-out infinite; }
.match-card.searching .mc-swords { animation: clash .6s ease-in-out infinite alternate; }
@keyframes clash { to { transform: rotate(-12deg) scale(1.12); } }
.mc-search { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mc-radar { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--green) 60%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--green) 20%, transparent), transparent 70%); overflow: hidden; }
.mc-radar span { position: absolute; inset: 0; background: conic-gradient(from 0deg, color-mix(in srgb, var(--green) 60%, transparent), transparent 30%); animation: radar 1.6s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.mc-search b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- Avisos emergentes ---------- */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 160; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); animation: tin .35s cubic-bezier(.2, 1.4, .4, 1); }
.toast.out { opacity: 0; transform: translateX(30px); transition: .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.toast .t-ico { font-size: 26px; }
.toast > div:not(.t-btns) { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.toast small { color: var(--muted); }
.t-btns { display: flex; gap: 6px; margin-left: auto; }