/* app.css: el armado de ESTA pantalla con los componentes de ui/components.css. Sin colores propios (tokens.css). */

/* barra de arriba: sobre el tapete, como el app-top de las páginas TYB */
.appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px 2px 12px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--white); font-size: 1.02rem; margin-right: auto; min-width: 0; }
.brand img { border-radius: 6px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px; }
/* en el celular: marca + Lab en el primer renglón, los números en el segundo */
@media (max-width: 767px) {
  .appbar #labbtn { order: 1; }
  .appbar .langslot { order: 1; }
  .appbar .stats { order: 2; width: 100%; }
}
.stats .pill b { margin-left: 4px; }
.langslot:empty { display: none; }

/* el tablero: una tarjeta de papel con el switch, la franja de la ronda y las pestañas */
.boardhead { display: flex; justify-content: center; margin-bottom: 12px; }
.switch.n3 { --n: 3; }
.strip { margin: 0 0 8px; }
.track { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--seg); box-shadow: var(--field); overflow: hidden; }
.zone { position: absolute; top: 0; bottom: 0; right: 0; background: var(--cell-urgent); opacity: 0.45; }
.cut { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.now { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--mat); }
.strip-text { display: flex; justify-content: space-between; gap: 4px 12px; color: var(--muted); font-size: 0.85rem; margin-top: 4px; flex-wrap: wrap; }
#notice { margin: 4px 0 8px; }
#fatal { margin: 4px 0 10px; }

/* Jugar: una columna en el celular (estado → mis TYB → grilla → lo mío), dos en la computadora */
.playlayout { display: grid; gap: 12px; }
.col { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 900px) { .playlayout { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); } }

/* la tarjeta de estado: una situación y una acción */
.statuscard { display: grid; gap: 10px; }
.st-head { display: flex; gap: 10px; align-items: flex-start; }
.st-head h2 { font-size: 1.15rem; }
.statuscard.calm .st-head .ico, .statuscard.watch .st-head .ico { opacity: 0.5; }
.statuscard.urgent { box-shadow: var(--row-sh), inset 0 0 0 2px var(--cell-urgent); }
.statuscard.calm .bounce, .statuscard.watch .bounce, .statuscard.ended .bounce { display: none; }
.bounce { display: grid; gap: 8px; }
.code { font-weight: 700; font-size: 1.35rem; letter-spacing: 0.06em; word-break: break-all; color: var(--ink); }
#bform { display: flex; gap: 6px; flex-wrap: wrap; }
#bform .field { flex: 1 1 140px; }
.capt { display: block; width: 100%; max-width: 480px; image-rendering: pixelated; border-radius: var(--r-sm); box-shadow: var(--field); background: var(--white); }
.simnote { margin: 0; }
.pending { margin: 0; padding: 10px 14px; border-radius: var(--r-list); background: var(--ok-bg); color: var(--ok); font-weight: 700; }

/* mis TYB, cada uno con su marca "cubierto / NO cubierto" */
.mine { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mine li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--soft); font-variant-numeric: tabular-nums; }
.mine li b { color: var(--ink); }
.mine li.bomb { background: var(--warn-bg); }
.mine li.urgent { background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.mine li.dead { opacity: 0.55; text-decoration: line-through; }

/* la grilla */
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--muted); font-size: 0.8rem; margin: 6px 0 8px; }
.grid { --cols: 40; }
@media (max-width: 760px) { .grid { --cols: 20; gap: 3px; } }

/* la pantalla de final */
.endcard { margin: 0 0 12px; display: grid; gap: 8px; }
.endcard h2 { font-size: 1.2rem; }

/* Actividad y Cómo se juega */
.act-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
#actq { width: 150px; }
.log.big { max-height: 70vh; margin-top: 8px; }
.howto { display: grid; gap: 8px; padding: 8px 2px; }
/* P4b, How to play: el interruptor Rápido/Detalle, los chips de escena y un tablero por parte. Las celdas usan los
   mismos colores que la grilla de Jugar (--cell-*), en grande (son 6 a 8 TYB) */
#howto-root { display: grid; gap: 12px; min-width: 0; }
.switch.n2 { --n: 2; }
.hmode { justify-self: start; min-width: min(320px, 100%); }
.hmode.is-detail { --i: 1; } /* el cerrojo del switch lee --i (components.css) */
.hbody { display: grid; gap: 12px; min-width: 0; }
.hchips { padding: 2px 0; }
.hscene { display: grid; gap: 10px; scroll-margin-top: 64px; }
.hscene h3, .hqcard h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.hnum { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 0.85rem; }
.hquick { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hqcard { display: grid; gap: 8px; align-content: start; }
.hqcard p { margin: 0; }
.hboard { display: grid; gap: 8px; min-width: 0; }
.hboard h4 { margin: 4px 0 0; font-size: 0.95rem; }
.hclock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.hgrid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.hboard.compact .hgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hcell { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-sm); background: var(--cell-alive); color: var(--ink);
  font-size: 0.78rem; line-height: 1.2; min-width: 0; transition: background-color var(--dur-sel) var(--ease), box-shadow var(--dur-sel) var(--ease); }
.hcell.b { background: var(--cell-bomb); }
.hcell.r { background: var(--cell-urgent); color: var(--white); }
.hcell.x { background: var(--cell-dead); color: var(--white); }
.hcell.g { background: var(--cell-gone); }
.hcell.hl { box-shadow: 0 0 0 3px var(--cell-mine); }
.hcell__id { font-weight: 800; }
.hcell__w, .hcell__st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcell.r .hcell__st, .hcell.x .hcell__st { color: inherit; opacity: 0.8; }
.hcell__usd { font-variant-numeric: tabular-nums; font-weight: 700; }
.hcell__bomb { display: flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hcell__bomb .ico { width: 1em; height: 1em; vertical-align: 0; }
.hcap { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--seg); font-weight: 600; min-height: 3.2em; }
.hcap.fresh { box-shadow: inset 3px 0 var(--cell-mine); }
.hlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.85rem; color: var(--muted); }
.hlog li.k-kill { color: var(--bad); font-weight: 600; }
.hlog li.k-hit { color: var(--warn); font-weight: 600; }
.hctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hbtn { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 18px; }
.hplay { min-width: 110px; }
@media (prefers-reduced-motion: reduce) { .hcell { transition: none; } }

/* la entrada del modo servidor */
.join { max-width: 560px; margin: 0 auto; display: grid; gap: 10px; }
.join h1 { font-size: 1.3rem; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.slots .ghost { width: 100%; text-align: left; font-variant-numeric: tabular-nums; }
#aform { display: flex; gap: 6px; flex-wrap: wrap; }
#aform .field { flex: 1 1 160px; }

/* P5: el disclaimer. Una .sheet (el modal del Wardrobe) con el pie fijo: el cuerpo hace scroll y las dos acciones
   quedan siempre a la vista. En el celular ocupa hasta el alto visible (100dvh, sólo < 768 px). Sin anillo de foco en
   la tarjeta (lessons-frontend-mobile): los botones conservan el suyo */
.disc { display: none; }
.disc[open] { display: flex; flex-direction: column; overflow: hidden; }
.disc:focus, .disc:focus-visible { outline: none; }
.disc .sheet__head { flex: none; flex-wrap: wrap; }
.disc .sheet__head h2 { margin: 0; font-size: 1.2rem; }
.disc__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.disc__prov { justify-self: start; white-space: normal; }
.disc__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.4; }
.disc__en { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--seg); }
.disc__prevails { margin: 0; font-weight: 700; }
.disc__foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px 16px 16px; }
.disc__foot button { min-height: 44px; }
@media (max-width: 767px) {
  .disc { max-height: 100dvh; }
  .disc__foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .disc__foot button { flex: 1 1 0; }
}
/* la tarjeta de la app local cuando se cancela el aviso del arranque */
.gate { max-width: 560px; margin: 0 auto 12px; display: grid; gap: 10px; justify-items: start; }

/* el Lab */
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.god { display: flex; gap: 6px; align-items: center; font-weight: 600; min-height: 44px; }
.god input { width: 20px; height: 20px; }
/* P3d, Simular: los números grandes de cada corrida lado a lado y la tabla por ronda con su propio scroll */
.simruns { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 8px; }
.simrun { padding: 10px 12px; border-radius: var(--r-md); background: var(--seg); }
.simrun h4 { margin: 0 0 6px; font-size: 0.95rem; }
.simbig { font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.simtable { overflow-x: auto; max-width: 100%; margin-top: 8px; border-radius: var(--r-sm); box-shadow: var(--field); }
.simtable table { border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.simtable th, .simtable td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.simtable th { color: var(--muted); font-weight: 600; }
.simtable caption { text-align: left; font-weight: 700; padding: 6px 8px 0; }
#simargs { width: 100%; }