/* Old West — piel del Flash original (madera, Stencil, Rockwell, pergamino del top). Paneles en marron tierra oliva. */
@font-face { font-family: 'OWStencil'; src: url('../assets/fonts/Stencil.woff2') format('woff2'), url('../assets/fonts/Stencil.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'OWRockwell'; src: url('../assets/fonts/RockwellExtraBold.woff2') format('woff2'), url('../assets/fonts/RockwellExtraBold.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'OWAnticlimax'; src: url('../assets/fonts/Anticlimax.woff2') format('woff2'), url('../assets/fonts/Anticlimax.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'OWHelldorado'; src: url('../assets/fonts/Helldorado.woff2') format('woff2'), url('../assets/fonts/Helldorado.ttf') format('truetype'); font-display: swap; }

.ow-wrap { width: 100%; max-width: 100%; }
.ow-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ow-stage { position: relative; width: 100%; aspect-ratio: 7 / 4; background: #633D03; overflow: hidden; outline: none; container-type: inline-size;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
@supports not (aspect-ratio: 1) { .ow-stage { height: 0; padding-bottom: 57.142857%; } }
.ow-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ow-stage:fullscreen, .ow-stage:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #1e150a; }
.ow-stage:fullscreen .ow-svg { inset: 0; }
/* Durante la partida: Mouse.hide() + mira "raton"; en tactil se evita el scroll */
.ow-stage.ow-apuntando, .ow-stage.ow-apuntando .ow-svg, .ow-stage.ow-apuntando * { cursor: none !important; }
.ow-stage.ow-apuntando { touch-action: none; }

/* Pantalla de inicio (desbloquea el audio) */
.ow-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9;
  background: radial-gradient(circle at 50% 40%, rgba(146,66,7,.85), rgba(40,15,0,.97)); }
.ow-ov-box { text-align: center; }
.ow-ov-s { font: clamp(12px, 2.2cqw, 16px) OWRockwell, Georgia, serif; color: #D7BC84; text-shadow: 1px 1px 2px #000; opacity: .8; }
.ow-overlay.ow-cargando { cursor: default; background: #633D03; }

.ow-msg { position: absolute; left: calc(100% * 250 / 700); bottom: 9%; transform: translateX(-50%); z-index: 8; max-width: 66%;
  background: rgba(30,12,0,.92); color: #FFCC66; border: 1px solid #924207; border-radius: 4px; padding: 6px 12px;
  font: 12px Verdana, 'DejaVu Sans', sans-serif; text-align: center; pointer-events: none; }
.ow-msg[hidden] { display: none !important; }

.ow-bar { position: absolute; right: calc(100% * 200 / 700 + 4px); bottom: 4px; display: flex; gap: 4px; z-index: 8; opacity: .55; transition: opacity .2s; }
.ow-stage:hover .ow-bar, .ow-bar:focus-within { opacity: 1; }
@media (hover: none) { .ow-bar { opacity: .85; } }
.ow-b { width: 26px; height: 26px; padding: 0; border: 1px solid #401500; border-radius: 4px; color: #FFCC66; cursor: pointer !important;
  background: linear-gradient(180deg, rgba(146,66,7,.95), rgba(64,21,0,.95)); font: 11px/24px Verdana, sans-serif; box-shadow: 1px 1px 2px #000; }
.ow-b:hover { filter: brightness(1.15); }
.ow-stage:fullscreen .ow-b { width: 40px; height: 40px; font-size: 16px; line-height: 38px; }
.ow-stage.ow-apuntando .ow-bar { opacity: .25; }

/* HUD: TIEMPO / MUERTES (texto HTML con Rockwell Extra Bold + Stencil como en el .fla) */
.ow-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ow-hud[hidden], .ow-rec[hidden], .ow-top[hidden] { display: none !important; }
.ow-hl, .ow-hn { position: absolute; white-space: nowrap; line-height: 1.05; }
.ow-hl { font-family: OWRockwell, 'Rockwell Extra Bold', Georgia, serif; text-shadow: 0 0 2px #401500, 0 0 3px #401500, 1.5px 1.5px 2px #000, 0 0 6px rgba(215,188,132,.55); }
.ow-hn { font-family: OWStencil, Stencil, OWRockwell, Impact, sans-serif; text-shadow: 0 0 2px #401500, 0 0 4px #401500, 2px 2px 3px #000, 0 0 7px rgba(215,188,132,.6); }

/* recordtext del fotograma 2: "RECORD: nombre N Muertes (d/m/a)" */
.ow-rec { position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: OWStencil, Stencil, OWRockwell, Impact, sans-serif; line-height: 1.15; }

/* Filas del top (txtNom1..10 / txtP1..10 de topoldwest.fla) */
.ow-top { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ow-tn, .ow-tp { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  font-family: OWAnticlimax, OWRockwell, Georgia, serif; }
.ow-tn.yo { color: #FFFFFF !important; }
.ow-tpag { position: absolute; font-family: Tahoma, 'DejaVu Sans', Verdana, sans-serif; line-height: 1.2; }
.ow-tvacio { position: absolute; text-align: center; color: #401500; font-family: OWRockwell, Georgia, serif; opacity: .8; }

/* Menu: botones de madera iguales (como JUGAR!/AYUDA! del Flash), centrados en la zona de juego (x=250) */
.ow-mainmenu { position: absolute; z-index: 5; left: calc(100% * 250 / 700); top: calc(100% * 82 / 400); width: calc(100% * 132 / 700);
  transform: translateX(-50%); display: flex; flex-direction: column; gap: calc(100cqw * 5 / 700); align-items: stretch; }
.ow-mainmenu[hidden] { display: none !important; }
.ow-mbtn { font-family: OWStencil, Stencil, Impact, sans-serif; font-size: calc(100cqw * 17 / 700); line-height: 1; letter-spacing: .5px;
  color: #D7BC84; text-transform: uppercase; cursor: pointer; padding: calc(100cqw * 6 / 700) 4px; min-height: calc(100cqw * 30 / 700);
  border: 1px solid #2b1000; border-radius: 3px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(120,60,20,.25), rgba(40,12,0,.45)), url('../assets/img/madera2.jpg') center / cover;
  text-shadow: 1px 1px 1px #000, 0 0 3px #401500, 0 0 5px #401500;
  box-shadow: 2px 2px 3px rgba(0,0,0,.85), inset 0 0 10px rgba(30,8,0,.75); }
.ow-mbtn:hover, .ow-mbtn:focus-visible { color: #FFCC66; filter: brightness(1.12); outline: none; text-shadow: 0 0 4px #FFCC66, 1px 1px 1px #000, 0 0 5px #401500; }
.ow-mbtn:active { transform: translateY(1px); filter: brightness(.92); }
.ow-mnote { font: calc(100cqw * 9.5 / 700)/1.25 OWRockwell, Georgia, serif; color: #FFCC66; text-align: center; text-shadow: 1px 1px 2px #000, 0 0 3px #000;
  background: rgba(64,21,0,.65); border-radius: 3px; padding: 4px 5px; }
.ow-mnote[hidden] { display: none; }

/* Paneles marron tierra oliva (Ayuda, Campeones, Premios, fin de partida), a juego con la madera y el desierto */
.ow-panel { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% * 500 / 700); z-index: 7; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: 2.5%; box-sizing: border-box; }
.ow-panel[hidden] { display: none !important; }
.ow-panel-box { position: relative; width: 100%; max-height: 100%; overflow: auto; box-sizing: border-box; padding: 12px 14px 10px;
  background: linear-gradient(180deg, #4b4426 0%, #241f10 100%); border: 2px solid #9a8a4c; border-radius: 6px;
  box-shadow: 0 0 16px #000, inset 0 0 20px rgba(0,0,0,.6); font: 12px Verdana, 'DejaVu Sans', sans-serif; color: #e6d6b0; scrollbar-color: #9a8a4c #241f10; }
.ow-panel-box h2 { margin: 0 0 8px; font: 20px OWRockwell, Georgia, serif; color: #e8e0c8; text-align: center; text-shadow: 0 0 6px #6b4f22, 1px 1px 2px #000; }
.ow-panel-body { line-height: 1.45; color: #dccb9e; }
.ow-panel-x { position: absolute; right: 8px; top: 6px; width: 26px; height: 26px; border: 1px solid #7d6638; background: #1e150a; color: #e8e0c8;
  border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 22px; padding: 0; }
.ow-panel-back { display: block; margin: 10px auto 0; font: 14px OWStencil, Stencil, Impact, sans-serif; letter-spacing: .5px; color: #e8e0c8;
  background: #3a2c16; border: 1px solid #9a8a4c; border-radius: 4px; padding: 5px 18px; cursor: pointer; }
.ow-panel-back:hover { background: #5a4524; }
.ow-ayuda-ic svg { display: block; width: 100%; max-width: 330px; margin: 6px auto 0; overflow: visible; }
.ow-ic-x { font: 15px OWStencil, Stencil, Impact, sans-serif; fill: #e8e0c8; }
.ow-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; justify-content: center; }
.ow-tabs button { font: 11px Verdana, sans-serif; color: #cdb684; background: #1e150a; border: 1px solid #6e5a30; border-radius: 3px; padding: 3px 8px; cursor: pointer; }
.ow-tabs button.on { background: #5a4524; color: #e8e0c8; border-color: #c9a253; }
.ow-table { width: 100%; border-collapse: collapse; }
.ow-table td { padding: 3px 6px; border-bottom: 1px solid #4a3b22; }
.ow-table td:last-child { text-align: right; color: #f0c868; }
.ow-pag { text-align: center; margin-top: 8px; }
.ow-pag button { background: #1e150a; color: #e3cf9c; border: 1px solid #7d6638; border-radius: 3px; padding: 2px 10px; cursor: pointer; }
.ow-vacio { text-align: center; color: #a89878; padding: 14px; }
.ow-rec2 { color: #f0c868; text-align: center; margin: 4px 0; }
.ow-err { color: #ff9070; text-align: center; }
.ow-fin { text-align: center; max-width: 360px; }
.ow-fin p { margin: 4px 0; }
.ow-score { font: 18px OWRockwell, Georgia, serif; color: #FFCC66; }
.ow-fin-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.ow-fin-btns .ow-mbtn { font-size: 16px; min-height: 30px; padding: 6px 16px; }

/* Celebracion record global */
.ow-vid-ov { position: absolute; inset: 0; z-index: 20; background: #1e150a; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ow-vid-ov video { width: 100%; height: 100%; object-fit: contain; background: #1e150a; }

/* Admin (Shift+F3) — misma piel marron tierra oliva */
.owadm { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.82); display: flex; align-items: stretch; justify-content: center;
  padding: 2%; box-sizing: border-box; cursor: default !important; -webkit-user-select: text; user-select: text; }
.owadm * { cursor: auto !important; }
.owadm button { cursor: pointer !important; }
.owadm-box { position: relative; width: 100%; max-width: 680px; overflow: auto; box-sizing: border-box; padding: 8px 12px 10px;
  background: radial-gradient(circle at 50% 0%, #4e4628, #241f10 70%); border: 2px solid #9a8a4c; border-radius: 8px;
  box-shadow: 0 0 18px #2c1f0c, inset 0 0 12px #000; font: 11px Verdana, sans-serif; color: #dccb9e; scrollbar-color: #9a8a4c #241f10; }
.owadm-cab { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #9a8a4c; padding-bottom: 4px; }
.owadm-t { font: 18px OWRockwell, Georgia, serif; color: #e8e0c8; letter-spacing: .5px; text-shadow: 0 0 6px #6b4f22; }
.owadm-sub { color: #ad9a72; margin: 4px 0 6px; }
.owadm-x { background: #1e150a; color: #e8e0c8; border: 1px solid #7d6638; border-radius: 5px; width: 26px; height: 26px; font-size: 14px; }
.owadm fieldset { border: 1px solid #6b5530; border-radius: 6px; margin: 0 0 6px; padding: 4px 8px 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.owadm legend { color: #f0c868; font: 14px OWStencil, Stencil, Impact, sans-serif; letter-spacing: .5px; padding: 0 4px; }
.owadm-f { flex: 1 1 190px; min-width: 150px; }
.owadm-f.owadm-ancho { flex-basis: 100%; }
.owadm-f label { display: block; color: #d4b26a; margin-bottom: 1px; }
.owadm input[type=number], .owadm input[type=text], .owadm textarea { width: 100%; box-sizing: border-box; background: #1e150a; color: #e8e0c8;
  border: 1px solid #7d6638; border-radius: 4px; padding: 2px 5px; font: 12px Verdana, sans-serif; color-scheme: dark; }
.owadm textarea { resize: vertical; min-height: 60px; }
.owadm input:focus, .owadm textarea:focus { outline: none; border-color: #d4b26a; box-shadow: 0 0 4px #6b4f22; }
.owadm-vol { display: flex; align-items: center; gap: 6px; }
.owadm-n { color: #97876a; font-size: 10px; }
.owadm-err { color: #ff8060; }
.owadm-mal input, .owadm-mal textarea { border-color: #c04020; }
.owadm-mod { color: #f0c868; }
.owadm-falta { color: #ff8060; }
.owadm-ok { color: #c8b85a; }
.owadm-ventana { flex-basis: 100%; color: #f0c868; }
.owadm-msg { margin-top: 6px; color: #f0c868; min-height: 1.2em; }
.owadm-msg.owadm-error { color: #ff8060; }
.owadm-bot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.owadm-bot button, .owadm-recarga { font: 12px Verdana, sans-serif; color: #e8e0c8; background: #3c2d17; border: 1px solid #9a8a4c; border-radius: 4px; padding: 4px 10px; }
.owadm-bot button:hover { background: #5a4524; }