/* Fantasmitas — Flash cemetery theme (not purple neo) */
@font-face { font-family: 'Adventure'; src: url('../assets/fonts/Adventure.woff2') format('woff2'), url('../assets/fonts/Adventure.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'AdventureSub'; src: url('../assets/fonts/AdventureSubtitles.woff2') format('woff2'), url('../assets/fonts/AdventureSubtitles.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Bendable'; src: url('../assets/fonts/bendable.woff2') format('woff2'), url('../assets/fonts/bendable.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SnapITC'; src: url('../assets/fonts/snapitc.ttf') format('truetype'); font-display: swap; }

.ft-wrap { width: 100%; max-width: 100%; }
.ft-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ft-stage { position: relative; width: 100%; aspect-ratio: 7 / 4; background: #000; 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) { .ft-stage { height: 0; padding-bottom: 57.142857%; } }
.ft-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ft-stage:fullscreen, .ft-stage:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; }

.ft-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.94); cursor: pointer; z-index: 3; }
.ft-start { background: radial-gradient(circle at 50% 40%, rgba(40,60,20,.55), rgba(0,0,0,.95)); }
.ft-ov-box { text-align: center; font-family: Adventure, Georgia, serif; color: #e8e0c8; text-shadow: 0 0 8px #3a5a20, 0 0 2px #000; }
.ft-ov-t { font-size: clamp(22px, 6vw, 48px); }
.ft-ov-s { font-size: clamp(14px, 3vw, 22px); color: #a8c060; margin-top: .4em; }
.ft-start.ft-ready .ft-ov-s { animation: ftlate 1.2s ease-in-out infinite alternate; }
@keyframes ftlate { from { opacity: .45 } to { opacity: 1 } }

.ft-msg { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 6; background: rgba(10,20,5,.92); color: #e8e0c8;
  border: 1px solid #6a8a30; border-radius: 4px; padding: 6px 12px; font: 13px Verdana, sans-serif; max-width: 90%; text-align: center; }

.ft-bar { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 4px; z-index: 5; opacity: .4; transition: opacity .2s; }
.ft-stage:hover .ft-bar, .ft-bar:focus-within { opacity: 1; }
@media (hover: none) { .ft-bar { opacity: .75; } }
.ft-b { width: 28px; height: 28px; padding: 0; border: 1px solid #5a7030; border-radius: 4px; background: rgba(0,0,0,.75); color: #c8d890;
  font: 11px/26px Verdana, sans-serif; cursor: pointer; }
.ft-b:hover { background: #1a2a0a; }
.ft-stage:fullscreen .ft-b { width: 42px; height: 42px; font-size: 16px; line-height: 40px; }

/* Columna derecha = zona Flash cargartop/RECORD ranking (x=500..700). Nunca tapa TIEMPO/ACIERTOS. */
.ft-side {
  position: absolute; z-index: 4;
  left: calc(100% * 500 / 700); width: calc(100% * 200 / 700);
  top: 0; bottom: 0;
  box-sizing: border-box; padding: 4px 5px 6px;
  background: linear-gradient(180deg, rgba(12,16,10,.92) 0%, rgba(0,0,0,.88) 100%);
  border-left: 1px solid #5a7030;
  font: 11px Verdana, 'DejaVu Sans', sans-serif; color: #c8d0a8;
  display: flex; flex-direction: column; overflow: hidden;
}
.ft-side[hidden] { display: none !important; }
.ft-side-h { font: 15px Adventure, Georgia, serif; color: #e8e0c8; text-align: center; letter-spacing: .5px;
  text-shadow: 0 0 4px #3a5a20; margin: 2px 0 4px; }
.ft-side-rec { font-size: 9px; color: #d4c060; text-align: center; margin-bottom: 4px; line-height: 1.2; }
.ft-side-tabs { display: flex; gap: 3px; margin-bottom: 4px; }
.ft-side-tabs button { flex: 1; font: 9px Verdana, sans-serif; color: #a8b070; background: #000;
  border: 1px solid #4a6020; border-radius: 3px; padding: 3px 2px; cursor: pointer; }
.ft-side-tabs button.on { background: #2a4010; color: #e8e0c8; border-color: #8ab040; }
.ft-side-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.ft-side-table td { padding: 2px 2px; border-bottom: 1px solid #1a2810; }
.ft-side-table td.pos { width: 16px; color: #8ab040; }
.ft-side-table td.pts { text-align: right; width: 28px; color: #d4c060; }
.ft-side-table tr.yo td { color: #f0e8c0; font-weight: bold; }
.ft-side-pag { text-align: center; margin-top: 4px; font-size: 10px; }
.ft-side-pag button { background: #000; color: #c8d090; border: 1px solid #5a7030; border-radius: 3px; padding: 1px 6px; cursor: pointer; }
.ft-side-vacio { text-align: center; color: #666; padding: 12px 4px; font-size: 10px; }

/* Numpad 1..15 — dígitos negros bien legibles sobre el cromado Flash */
.ft-side-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; align-content: center; padding: 10px 4px 6px; }
.ft-side-pad[hidden] { display: none !important; }
.ft-side-pad button {
  font-family: Verdana, 'DejaVu Sans', Geneva, sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: linear-gradient(180deg, #f5f5f5 0%, #b0b0b0 25%, #eaeaea 48%, #ffffff 60%, #b8b8b8 88%, #ddd 100%) !important;
  border: 1px solid #555 !important;
  border-radius: 9px;
  cursor: pointer;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px #000;
  min-height: 36px;
  padding: 6px 0;
}
.ft-side-pad button:active { filter: brightness(.9); color: #000 !important; -webkit-text-fill-color: #000 !important; }

/* Menú: centrado en playfield izquierdo (0..500), más arriba y más estrecho */
.ft-mainmenu {
  position: absolute; z-index: 4;
  /* centro horizontal del escenario de juego (x=250 de 700) */
  left: calc(100% * 250 / 700);
  top: calc(100% * 112 / 400);
  width: calc(100% * 168 / 700);
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 5px; align-items: stretch;
  pointer-events: auto;
  box-sizing: border-box;
}
.ft-mainmenu[hidden] { display: none !important; }
.ft-mbtn {
  font-family: Verdana, 'DejaVu Sans', Geneva, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(11px, 2.1cqw, 14px) !important;
  line-height: 1.05 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f5f5f5 0%, #b0b0b0 25%, #eaeaea 48%, #ffffff 60%, #b8b8b8 88%, #ddd 100%) !important;
  border: 1px solid #555 !important;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px #000;
  min-height: clamp(26px, 4.8cqw, 32px);
  padding: 4px 8px;
  box-sizing: border-box;
}
.ft-mbtn:hover { filter: brightness(1.06); }
.ft-mbtn:active { filter: brightness(.9); }
.ft-mbtn-record {
  min-height: clamp(40px, 7.5cqw, 52px);
  padding: 5px 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-transform: none;
  width: 100%;
}
.ft-mbtn-record .ft-mbtn-lab {
  font: 900 clamp(11px, 2.2cqw, 14px)/1 Verdana, sans-serif;
  color: #000; letter-spacing: .8px; text-transform: uppercase;
}
.ft-mbtn-record .ft-mbtn-sub {
  font: 700 clamp(9px, 1.7cqw, 11px)/1.15 Verdana, sans-serif;
  color: #222; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-mbtn-login { font-size: clamp(10px, 2cqw, 13px) !important; }

/* Flash-styled panels */
.ft-panel { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 3%; box-sizing: border-box; }
.ft-panel[hidden] { display: none !important; }
.ft-panel-box { position: relative; width: min(100%, 520px); max-height: 100%; overflow: auto; box-sizing: border-box;
  padding: 14px 16px 12px; background: linear-gradient(180deg, #1a2410 0%, #0a1005 100%);
  border: 2px solid #6a8a30; border-radius: 6px; box-shadow: 0 0 16px #000, inset 0 0 20px rgba(0,0,0,.6);
  font: 12px Verdana, sans-serif; color: #c8d0a8; }
.ft-panel-box h2 { margin: 0 0 8px; font: 22px Adventure, Georgia, serif; color: #e8e0c8; text-align: center;
  text-shadow: 0 0 6px #3a5a20; }
.ft-panel-body { line-height: 1.45; color: #b8c090; }
.ft-panel-x { position: absolute; right: 8px; top: 6px; width: 26px; height: 26px; border: 1px solid #5a7030;
  background: #000; color: #e8e0c8; border-radius: 4px; cursor: pointer; font-size: 16px; }
.ft-panel-back, .ft-again, .ft-tomenu { display: block; margin: 12px auto 0; font: 14px Adventure, Georgia, serif;
  color: #e8e0c8; background: #14200a; border: 1px solid #6a8a30; border-radius: 4px; padding: 6px 18px; cursor: pointer; }
.ft-fin-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.ft-fin-btns button { margin: 0; }
.ft-score { font: 20px Adventure, Georgia, serif; color: #d4c060; text-align: center; }
.ft-rec { color: #d4c060; text-align: center; }
.ft-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; justify-content: center; }
.ft-tabs button { font: 11px Verdana, sans-serif; color: #a8b070; background: #000; border: 1px solid #4a6020;
  border-radius: 3px; padding: 3px 8px; cursor: pointer; }
.ft-tabs button.on { background: #2a4010; color: #e8e0c8; border-color: #8ab040; }
.ft-table { width: 100%; border-collapse: collapse; }
.ft-table th { color: #d4c060; font: 13px Adventure, Georgia, serif; text-align: left; border-bottom: 1px solid #4a6020; padding: 3px 6px; }
.ft-table td { padding: 3px 6px; border-bottom: 1px solid #1a2810; }
.ft-table tr.yo td { color: #f0e8c0; font-weight: bold; }
.ft-pag { text-align: center; margin-top: 8px; }
.ft-pag button { background: #000; color: #c8d090; border: 1px solid #5a7030; border-radius: 3px; padding: 2px 10px; cursor: pointer; }
.ft-vacio { text-align: center; color: #777; padding: 16px; }

/* Admin — cemetery skin */
.ftadm { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.82); display: flex; align-items: stretch; justify-content: center;
  padding: 2%; box-sizing: border-box; cursor: default; -webkit-user-select: text; user-select: text; }
.ftadm-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%, #243018, #0a1005 70%); border: 2px solid #6a8a30; border-radius: 8px;
  box-shadow: 0 0 18px #1a3008, inset 0 0 12px #000; font: 11px Verdana, sans-serif; color: #b8c090; scrollbar-color: #6a8a30 #0a1005; }
.ftadm-cab { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #6a8a30; padding-bottom: 4px; }
.ftadm-t { font: 22px Adventure, Georgia, serif; color: #e8e0c8; letter-spacing: 1px; text-shadow: 0 0 6px #3a5a20; }
.ftadm-sub { color: #777; margin: 4px 0 6px; }
.ftadm-x { background: #000; color: #e8e0c8; border: 1px solid #5a7030; border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; }
.ftadm-x:hover { background: #1a2a0a; }
.ftadm fieldset { border: 1px solid #3a5020; border-radius: 6px; margin: 0 0 6px; padding: 4px 8px 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ftadm legend { color: #d4c060; font: 15px Adventure, Georgia, serif; padding: 0 4px; }
.ftadm-f { flex: 1 1 190px; min-width: 150px; }
.ftadm-f.ftadm-ancho { flex-basis: 100%; }
.ftadm-f label { display: block; color: #a8c060; margin-bottom: 1px; }
.ftadm input[type=number], .ftadm input[type=text], .ftadm textarea { width: 100%; box-sizing: border-box; background: #000; color: #e8e0c8;
  border: 1px solid #5a7030; border-radius: 4px; padding: 2px 5px; font: 12px Verdana, sans-serif; color-scheme: dark; }
.ftadm textarea { resize: vertical; min-height: 60px; }
.ftadm input:focus, .ftadm textarea:focus { outline: none; border-color: #a8c060; box-shadow: 0 0 4px #3a5a20; }
.ftadm input[type=checkbox] { accent-color: #6a8a30; width: 16px; height: 16px; }
.ftadm-vol { display: flex; align-items: center; gap: 6px; }
.ftadm-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ftadm-acciones button, .ftadm-ok { font: 12px Verdana, sans-serif; color: #e8e0c8; background: #1a2a0a; border: 1px solid #6a8a30;
  border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.ftadm-acciones button:hover { background: #2a4010; }
.ftadm-msg { margin-top: 6px; color: #d4c060; min-height: 1.2em; }


/* Feedback acierto/fallo centrado (V verde / X roja), como el Flash */
.ft-fx {
  position: absolute; left: 0; top: 0; width: calc(100% * 500 / 700); height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 6;
  font: 900 120px/1 Verdana, 'DejaVu Sans', sans-serif;
  opacity: 0; transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
  text-shadow: 0 0 12px #000, 0 4px 0 rgba(0,0,0,.45);
}
.ft-fx.ft-fx-on { opacity: 1; transform: scale(1); }
.ft-fx-ok { color: #44dd22; }
.ft-fx-bad { color: #ff2222; }


/* Celebración récord global — overlay a pantalla del stage */
.ft-vid-ov {
  position: absolute; inset: 0; z-index: 20;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.ft-vid-ov video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.ft-vid-ov[hidden] { display: none !important; }


/* HUD TIEMPO/ACIERTOS — HTML Adventure (Flash dyn text no pinta bien las letras) */
.ft-hud {
  position: absolute; z-index: 5;
  left: 0; top: 0;
  width: calc(100% * 500 / 700); height: 100%;
  pointer-events: none;
  font-family: Adventure, 'Adventure Normal', Georgia, serif;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 2px #000, 0 2px 0 #000;
  letter-spacing: .5px;
}
.ft-hud[hidden] { display: none !important; }
.ft-hud-t, .ft-hud-a {
  position: absolute;
  left: calc(100% * 8 / 500);
  top: calc(100% * 372 / 400);
  font-size: clamp(14px, 3.2cqw, 22px);
  line-height: 1.1;
  white-space: nowrap;
  font-weight: normal;
}
.ft-hud-a { left: calc(100% * 175 / 500); }