/* THE PRISON · la barra y el pie comunes de la web y de la guía (r645-web, 24-10-2026).
 * El HTML lo pinta server/webBarra.js (el mismo en las dos). Los nombres llevan «tpw-» para no pisar
 * nada de la guía ni de las páginas. Letras del juego (public/fonts, OFL). */
@font-face { font-family: 'TPW Rotulo'; src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'TPW Rotulo'; src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.tpw-barra { position: sticky; top: 0; z-index: 46; background: rgba(8,10,12,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); padding-top: env(safe-area-inset-top, 0px); }
.tpw-in { max-width: 1280px; margin: 0 auto; padding-inline: 32px; box-sizing: border-box; }
.tpw-barra .tpw-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.tpw-logo { display: flex; align-items: center; flex: none; color: #eceef1; text-decoration: none; }
.tpw-logo img { height: 34px; width: auto; display: block; }
.tpw-logo b, .tpw-pie-marca { font: 700 21px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.tpw-nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.tpw-nav a { font: 600 15px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #b5bcc6; padding: 10px 12px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.tpw-nav a:hover { color: #eceef1; background: rgba(255,255,255,.05); }
.tpw-nav a.on { color: #eceef1; background: rgba(255,255,255,.05); box-shadow: inset 0 -2px 0 #f29a2e; }
.tpw-jugar { flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: 12px 22px; min-height: 44px; box-sizing: border-box; border-radius: 4px; white-space: nowrap; text-decoration: none; background: linear-gradient(180deg, #ffb85c, #f29a2e); color: #1b1004; box-shadow: 0 6px 24px rgba(242,154,46,.35); transition: transform .12s, box-shadow .12s; }
.tpw-jugar:hover { color: #1b1004; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(242,154,46,.45); }
.tpw-jugar:focus-visible, .tpw-nav a:focus-visible, .tpw-logo:focus-visible { outline: 2px solid #ffb85c; outline-offset: 2px; }
.tpw-corto { display: none; }
.tpw-pie { margin-top: 70px; border-top: 1px solid rgba(255,255,255,.08); padding: 34px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: #8b939e; font-size: 14px; }
.tpw-pie .tpw-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.tpw-pie img { height: 30px; width: auto; margin-bottom: 10px; opacity: .85; display: block; }
.tpw-pie p { margin: 0 0 14px; }
.tpw-pie b { display: block; font: 700 14px/1.2 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #b5bcc6; margin-bottom: 8px; }
.tpw-pie .tpw-pie-uno b.tpw-pie-marca { color: #eceef1; font-size: 21px; margin-bottom: 10px; }
.tpw-pie div > a:not(.tpw-jugar) { display: block; padding: 3px 0; color: #8b939e; text-decoration: none; }
.tpw-pie div > a:not(.tpw-jugar):hover { color: #eceef1; }
@media (max-width: 1100px) { .tpw-pie .tpw-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .tpw-in { padding-inline: 16px; }
  .tpw-barra .tpw-in { gap: 8px; height: 54px; }
  .tpw-logo img { height: 26px; }
  .tpw-logo b { font-size: 17px; }
  .tpw-nav { gap: 0; }
  .tpw-nav a { padding: 12px 7px; font-size: 13.5px; letter-spacing: .05em; }
  .tpw-largo { display: none; } .tpw-corto { display: inline; }
  .tpw-barra .tpw-jugar { padding: 8px 14px; min-height: 40px; font-size: 15px; }
  .tpw-pie .tpw-in > :first-child { grid-column: 1 / -1; }
  .tpw-pie div > a:not(.tpw-jugar) { padding: 10px 0; }
}
@media (max-width: 359px) { .tpw-nav a { padding-inline: 4px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .tpw-jugar { transition: none; } }