@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url(vendor/fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url(vendor/fonts/chakra-petch-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(vendor/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }

:root { --bg: #0a0c11; --bg2: #141821; --bg3: #1e2330; --linea: #2d3442; --tx: #f0f2f6; --tx2: #a9b0bf; --tx3: #798194; --oro: #d6b35e; --mal: #ef5a45; --ven: #6EDC8C; --tit: 'Chakra Petch', sans-serif; --txt: 'IBM Plex Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font: 400 16px/1.4 var(--txt); overscroll-behavior: none; }
body[data-modo="celu"] { overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#app { height: 100dvh; }
h1, h2, h3 { font-family: var(--tit); font-weight: 700; margin: 0; line-height: 1.1; }
p { margin: 0; }
svg { width: 1.2em; height: 1.2em; display: block; }
button, input { font: inherit; color: inherit; }
button { background: var(--bg3); border: 1px solid var(--linea); border-radius: 10px; padding: .7em 1em; cursor: pointer; }
button:active { transform: scale(.97); }
button:disabled { opacity: .35; }
input { background: var(--bg); border: 1px solid var(--linea); border-radius: 10px; padding: .7em .9em; width: 100%; user-select: text; -webkit-user-select: text; }
.oculto { display: none !important; }
.ojo { font: 600 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.nota { color: var(--tx3); font-size: .85rem; }
.pri { background: var(--oro); color: #0c0e13; border: 0; font: 700 1rem var(--tit); }
.sec { background: transparent; }
.grande { font-size: 1.25rem; padding: .85em; width: 100%; }
.ancho { width: 100%; margin-top: .5rem; display: block; }
.link { background: none; border: 0; color: var(--tx2); text-decoration: underline; font-size: .9rem; }
.peligroso { background: transparent; color: var(--mal); border-color: var(--mal); }

.centrado { height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .9rem; padding: 1.2rem; text-align: center; overflow: auto; }
.centrado.arriba { justify-content: flex-start; padding-top: max(1.4rem, env(safe-area-inset-top)); }
.centrado h1 { font-size: 2.2rem; }
.asientos { display: grid; gap: .55rem; width: 100%; max-width: 26rem; }
.asiento { min-height: 5rem; background-size: cover; background-position: center 30%; border: 2px solid var(--c); text-align: left; display: flex; flex-direction: column; justify-content: center; }
.asiento b { font: 700 1.4rem var(--tit); color: var(--c); }
.asiento small { color: var(--tx2); }
.minombre { font: 700 1.7rem var(--tit); text-align: center; background: transparent; border-width: 0 0 2px; border-radius: 0; }
.colores { display: flex; gap: .55rem; }
.colores button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.colores button.si { border-color: #fff; }
.micmd { width: 100%; min-height: 7.5rem; background-size: cover; background-position: center 25%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.micmd.chico { min-height: 3.6rem; }
.micmd small { color: var(--tx2); } .micmd b { font: 700 1.15rem var(--tit); }

/* Juego */
.juego { height: 100dvh; display: flex; flex-direction: column; gap: 5px; padding: max(5px, env(safe-area-inset-top)) 5px max(5px, env(safe-area-inset-bottom)); }
.rivales { display: grid; gap: 5px; flex: none; }
.rivales.n1 { grid-template-columns: 1fr; } .rivales.n2 { grid-template-columns: 1fr 1fr; } .rivales.n3, .rivales.n4, .rivales.n5 { grid-template-columns: repeat(3, 1fr); }
.rival { position: relative; min-height: 5.6rem; padding: .3rem .4rem; background-size: cover; background-position: center 30%; border: 2px solid var(--linea); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.rival::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.rival.activo { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.rival.ko { filter: grayscale(1) brightness(.5); }
.r-nom { font: 600 .8rem var(--tit); color: var(--c); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-vida { font: 700 2rem/1 var(--tit); }
.r-marcas, .mis-marcas, .t-marcas { display: flex; gap: .3rem; justify-content: center; min-height: 1.1rem; }
.mc { display: inline-flex; align-items: center; gap: 1px; font: 700 .8rem var(--mono); font-style: normal; }
.mc svg { width: 1em; height: 1em; }
.mc.oro { color: var(--oro); } .mc.ini { color: #7ec8ff; } .mc.ven { color: var(--ven); } .mc.cmd { color: #ffb4a6; } .mc.cmd.alto { color: var(--mal); }
.centro { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center 25%; border: 2px solid var(--linea); }
.mi-turno .centro { border-color: var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
.afuera .centro { filter: grayscale(1) brightness(.55); }
.zona { position: absolute; left: 0; right: 0; height: 50%; display: flex; justify-content: center; padding: .6rem; font: 700 2rem var(--tit); color: rgba(255, 255, 255, .28); }
.zona:active { background: rgba(255, 255, 255, .07); }
.zona.mas { top: 0; align-items: flex-start; } .zona.menos { bottom: 0; align-items: flex-end; }
.mi-dato { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.mi-nom { font: 600 .95rem var(--tit); color: var(--c); text-shadow: 0 1px 4px #000; }
.mi-vida { font: 700 min(38vw, 30dvh)/1 var(--tit); text-shadow: 0 4px 22px rgba(0, 0, 0, .75); letter-spacing: -.02em; }
#delta { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font: 700 2.2rem var(--tit); pointer-events: none; text-shadow: 0 2px 8px #000; }
#delta.mas { color: var(--ven); } #delta.menos { color: #ff8b78; }
.peligro { flex: none; background: var(--mal); border: 0; color: #fff; font-weight: 600; }
.fichas { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fichas button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: .35rem .1rem; min-height: 3.5rem; font-size: .95rem; }
.fichas small { font-size: .66rem; color: var(--tx2); white-space: nowrap; }
.fichas button.on { color: var(--oro); border-color: var(--oro); } .fichas button.on-ven { color: var(--ven); border-color: var(--ven); }
.pasar, .espera { flex: none; min-height: 3.5rem; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; font: 700 1.2rem var(--tit); }
.pasar { background: var(--c); color: #0c0e13; border: 0; }
.espera { background: var(--bg2); border-left: 5px solid var(--c); font-size: 1rem; }
.espera b { color: var(--c); }
.pasar small, .espera small { font: 600 .9rem var(--mono); }

/* Hojas */
#hoja { position: fixed; inset: 0; z-index: 20; background: rgba(4, 5, 8, .62); display: flex; align-items: flex-end; }
.hoja-int { width: 100%; max-height: 86dvh; overflow: auto; background: var(--bg2); border-radius: 18px 18px 0 0; padding: .4rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); animation: subir .18s ease-out; }
@keyframes subir { from { transform: translateY(30px); opacity: .4; } }
.tirador { display: block; width: 3rem; height: 1.3rem; margin: 0 auto; background: none; border: 0; position: relative; padding: 0; }
.tirador::before { content: ''; position: absolute; left: 0; right: 0; top: .5rem; height: 4px; border-radius: 3px; background: var(--linea); }
.hoja-int h2 { font-size: 1.3rem; margin: .3rem 0 .4rem; }
.hoja-int h3 { font-size: .95rem; color: var(--tx2); margin: 1rem 0 .1rem; }
.fila-dano { padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.fila-dano small { color: var(--tx2); display: block; }
.fila-dano b { font: 700 2.2rem var(--tit); } .fila-dano b.letal { color: var(--mal); } .fila-dano em { font: 400 .9rem var(--txt); color: var(--tx3); }
.botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .35rem; }
.botones button { font: 700 1.25rem var(--tit); padding: .65em 0; }
.botones.anchos { grid-template-columns: repeat(3, 1fr); margin: .8rem 0; }
.carta { width: 62%; margin: .9rem auto 0; display: block; border-radius: 4.6%; }
.cont { display: grid; grid-template-columns: 1fr 3rem 3rem 3rem; align-items: center; gap: .3rem; padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.cont b { font: 700 1.3rem var(--tit); text-align: center; } .cont button { padding: .5em 0; font-size: 1.2rem; }
.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .7rem 0; }
.grilla button { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .82rem; padding: .6em .2em; }
.grilla button.si { color: var(--oro); border-color: var(--oro); }
.log p { padding: .3rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.log time { color: var(--tx3); font: 600 .75rem var(--mono); margin-right: .5em; }
details { border-bottom: 1px solid var(--linea); padding: .6rem 0; }
summary { font: 600 1rem var(--tit); cursor: pointer; }
details p { color: var(--tx2); margin-top: .35rem; font-size: .95rem; }
.check { display: flex; gap: .5rem; align-items: center; }
.check input { width: 1.3rem; height: 1.3rem; }
#busca { margin-bottom: .5rem; }
.resultado { width: 100%; display: flex; gap: .6rem; align-items: center; text-align: left; padding: .3rem; margin-bottom: .3rem; }
.resultado img { width: 4rem; height: 3rem; object-fit: cover; border-radius: 6px; }

/* Carteles */
#cartel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; text-align: center; padding: 1rem; }
#cartel > div { background: var(--bg3); border: 2px solid var(--oro); border-radius: 14px; padding: .8rem 1.2rem; font: 600 1.05rem var(--tit); max-width: 90vw; }
#cartel.te-toca { background: rgba(4, 5, 8, .35); }
#cartel.te-toca > div { font-size: 2.3rem; padding: 1rem 1.6rem; }
#cartel small { display: block; font: 600 .95rem var(--txt); color: var(--oro); margin-top: .2rem; }
#cartel.sorteo { background: rgba(4, 5, 8, .94); }
#cartel.sorteo > div { background: none; border: 0; font: 700 clamp(3rem, 15vw, 9rem) var(--tit); }
#cartel.sorteo small { font: 600 1.1rem var(--mono); color: var(--tx2); letter-spacing: .1em; text-transform: uppercase; }
#cartel.ko { background: rgba(60, 8, 4, .55); }
#cartel.ko > div { border-color: var(--mal); font-size: 1.5rem; }
#conexion { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--mal); color: #fff; text-align: center; font-size: .85rem; padding: .25rem; }

/* Fin */
.fin { height: 100dvh; overflow: auto; padding: 1.4rem 1rem 2rem; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
body[data-modo="celu"] .fin { touch-action: pan-y; }
.fin h1 { font-size: 2.6rem; } .fin h2 { font-size: 1.1rem; color: var(--tx2); margin-top: .5rem; }
.fin-cmd { color: var(--tx2); }
.grafico { width: 100%; height: auto; background: var(--bg2); border-radius: 12px; }
.leyenda { display: flex; gap: 1rem; font: 600 .85rem var(--tit); justify-content: center; flex-wrap: wrap; }
.premios { display: grid; gap: .4rem; }
.premios > div { background: var(--bg2); border-left: 4px solid var(--c); border-radius: 8px; padding: .5rem .8rem; display: grid; grid-template-columns: 1fr auto; }
.premios small { color: var(--oro); font: 600 .78rem var(--mono); text-transform: uppercase; grid-column: 1 / -1; }
.premios b { font: 700 1.1rem var(--tit); color: var(--c); } .premios span { color: var(--tx2); font-size: .85rem; text-align: right; }

/* Tablero */
body[data-modo="tele"] { font-size: clamp(14px, 1.15vw, 26px); }
.t-lobby { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 2rem 4vw; }
.t-lobby h1 { font-size: 2.2rem; margin: .3rem 0 1rem; }
.t-qr { text-align: center; }
#qr { width: min(44vh, 26rem); margin: 0 auto; background: #fff; border-radius: 14px; padding: .4rem; }
#qr svg { width: 100%; height: auto; }
.url { font: 600 1.35rem var(--mono); color: var(--oro); margin-top: .7rem; }
.t-fila { display: grid; grid-template-columns: auto 1fr 1.5fr auto auto auto; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--bg2); border-left: 5px solid var(--c); border-radius: 8px; margin-bottom: .4rem; }
.t-fila b { font: 700 1.2rem var(--tit); color: var(--c); } .t-fila span { color: var(--tx2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-fila button { padding: .25em .7em; }
.punto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--linea); } .punto.on { background: var(--ven); box-shadow: 0 0 8px var(--ven); }
.t-orden .grande { margin: .6rem 0; }
.tablero { height: calc(100dvh - 3.4rem); display: grid; gap: .6rem; padding: .6rem; }
.tablero.n2 { grid-template-columns: 1fr 1fr; } .tablero.n3 { grid-template-columns: repeat(3, 1fr); } .tablero.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .tablero.n5, .tablero.n6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.t-jug { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: .7rem 1rem; border: 3px solid var(--linea); border-radius: 18px; background-size: cover; background-position: center 25%; min-height: 0; transition: border-color .3s, box-shadow .3s; }
.t-jug.activo { border-color: var(--c); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 55%, transparent); }
.t-jug.ko { filter: grayscale(1) brightness(.45); }
.t-jug header, .t-jug footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.t-jug header b { font: 700 1.7rem var(--tit); color: var(--c); text-shadow: 0 1px 6px #000; }
.t-marcas .mc { font-size: 1.3rem; }
.t-vida { text-align: center; font: 700 min(11vw, 24vh)/1 var(--tit); text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }
.t-cmd { color: var(--tx2); text-shadow: 0 1px 4px #000; }
.t-dano { display: flex; gap: .6rem; } .t-dano i { display: inline-flex; gap: 2px; align-items: center; font: 700 1.2rem var(--mono); }
.t-pie { height: 3.4rem; display: flex; gap: 1.5rem; align-items: center; padding: 0 1.2rem; background: var(--bg2); font-family: var(--mono); color: var(--tx2); white-space: nowrap; overflow: hidden; }
.t-pie b { font: 700 1.4rem var(--tit); } .t-log { margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-family: var(--txt); }

/* Historial, maná y opciones */
.tn { margin-top: .6rem; background: var(--bg3); border-radius: 10px; padding: .4rem .6rem; }
.tn header { display: flex; gap: .5rem; align-items: baseline; font-family: var(--tit); padding-bottom: .2rem; border-bottom: 1px solid var(--linea); }
.tn header small { margin-left: auto; font: 600 .75rem var(--mono); color: var(--tx3); }
.ev { display: grid; grid-template-columns: auto 1fr auto auto; gap: .4rem; align-items: center; padding: .25rem 0; font-size: .88rem; }
.punto-j { width: .55rem; height: .55rem; border-radius: 50%; }
.pil { font: 600 .8rem var(--mono); padding: 0 .4em; border-radius: 5px; border: 1px solid; }
.p-mas { color: var(--ven); } .p-menos { color: #ff8b78; } .p-cmd { color: var(--oro); } .p-ven { color: #c9a4ff; }
.ev em { font: 600 .8rem var(--mono); color: var(--tx2); font-style: normal; }
.mana-f span { font-size: 1.5rem; } .mana-f:last-of-type span { font: 600 1rem var(--tit); color: var(--oro); }
.cont b.cero { color: var(--tx3); }
.recientes { margin-bottom: .6rem; }
.t-opc { display: grid; gap: .35rem; margin: .7rem 0; }
.t-opc > button { text-align: left; display: grid; }
.t-opc > button small { color: var(--tx3); }
.t-opc > button.si { border-color: var(--ven); } .t-opc > button.si b::before { content: '✓ '; color: var(--ven); }
.t-vidas { display: flex; gap: .3rem; align-items: center; } .t-vidas span { margin-right: auto; color: var(--tx2); }
.t-vidas button { padding: .3em .8em; } .t-vidas button.si { background: var(--oro); color: #0c0e13; border-color: var(--oro); }
.t-acc { flex: none; display: flex; gap: .5rem; align-items: center; font-family: var(--txt); }
.t-acc button, .t-acc a { padding: .4em .9em; border: 1px solid var(--linea); border-radius: 10px; background: var(--bg3); color: var(--tx); font-size: .95rem; text-decoration: none; }
.t-nom { width: 100%; min-width: 0; padding: .15em .35em; border: 1px dashed var(--linea); border-radius: 7px; background: transparent; color: var(--c); font: 700 1.2rem var(--tit); }
.t-nom:focus { outline: 2px solid var(--c); border-color: transparent; }

.t-nom-j { width: min(100%, 14rem); border-color: transparent; font-size: 1.5rem; text-shadow: 0 1px 6px #000; }
.t-nom-j:hover { border-color: var(--linea); }
.t-control { display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 1.5vw, 1.4rem); }
.t-control button { width: clamp(3rem, 6vw, 5rem); height: clamp(3rem, 6vw, 5rem); padding: 0; border-radius: 50%; background: rgba(10, 12, 17, .72); color: #fff; font: 700 clamp(1.6rem, 3vw, 2.4rem) var(--tit); }
.t-control button.chico { width: clamp(2.3rem, 4vw, 3.2rem); height: clamp(2.3rem, 4vw, 3.2rem); font-size: clamp(.85rem, 1.4vw, 1.05rem); }
.t-control button:hover { border-color: var(--c); }
.t-jug { min-width: 0; }
.t-control { min-width: 0; flex-wrap: wrap; }
.t-vida { min-width: 0; }
@media (max-width: 760px) {
  .tablero { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr); }
  .t-pie { flex-wrap: wrap; height: auto; padding: .4rem .7rem; gap: .5rem 1rem; }
  .t-log { display: none; }
}
@media (max-width: 760px) {
  .tablero { height: calc(100dvh - 6.2rem); }
}