/* =====================================================================
   MARCADOR: propuestas (js/ui/marcador_estilos.js). body.tg-marc-pizarra | tg-marc-caja | tg-marc-pano | tg-marc-neon
   ===================================================================== */

/* ---- fósforos "de verdad" (todos los estilos; colores por estilo más abajo) ---- */
.fs-real { overflow: visible; }
.fs-real .fs-borde { stroke: #4a2c0c; stroke-width: 6.2; stroke-linecap: round; }
.fs-real .fs-palo  { stroke: #e8bf74; stroke-width: 4.2; stroke-linecap: round; }
.fs-real .fs-veta  { stroke: rgba(255, 245, 210, .55); stroke-width: 1.1; stroke-linecap: round; transform: translate(-.6px, -.6px); }
.fs-real .fs-cabeza { fill: #c8261b; stroke: #4a0e08; stroke-width: 1.2; }
.fs-real .fs-brillo { fill: rgba(255, 220, 200, .85); }
.fs-real .fs:nth-child(2) { transform: rotate(.6deg); transform-origin: 24px 8px; }
.fs-real .fs:nth-child(3) { transform: rotate(-.5deg); transform-origin: 40px 24px; }
.fs-real .fs:nth-child(4) { transform: rotate(.4deg); transform-origin: 24px 40px; }
.fs-real { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .55)); }

/* total en números */
.tg-marc-num { display: block; font-size: 1.35em; line-height: 1; margin-top: 2px; text-align: center; }

/* ======================= A) PIZARRA DE BAR ======================= */
body.tg-marc-pizarra #marcador-fosforos-lateral {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #24302a, #151d19);
    border: 9px solid #6b4423;
    border-image: linear-gradient(135deg, #8a5a2e, #4e2f14 40%, #7a4f27 60%, #3f250f) 1;
    border-radius: 6px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .7);
    backdrop-filter: none;
}
body.tg-marc-pizarra .header-anotador { border-bottom: 2px dashed rgba(240, 240, 230, .55); }
body.tg-marc-pizarra .titulo-anotador { color: #f2efe4; font-family: 'Comic Sans MS', 'Segoe Print', cursive; text-shadow: 0 0 2px rgba(255, 255, 255, .5); letter-spacing: .5px; text-align: center; }
body.tg-marc-pizarra .linea-divisoria-vertical { background: repeating-linear-gradient(180deg, rgba(240, 240, 230, .5) 0 8px, transparent 8px 13px); width: 2px; }
body.tg-marc-pizarra .linea-buenas-horizontal-completa { background: rgba(255, 230, 120, .85); box-shadow: 0 0 3px rgba(255, 230, 120, .6); height: 3px; border-radius: 2px; }
body.tg-marc-pizarra .limite-chico-30 { border-top: 2px dashed rgba(240, 240, 230, .35); color: #ffd9a8; font-family: 'Comic Sans MS', 'Segoe Print', cursive; }

/* ======================= B) CAJA DE FÓSFOROS ======================= */
body.tg-marc-caja #marcador-fosforos-lateral {
    background:
        linear-gradient(90deg, transparent 0 calc(100% - 14px), #6a3d1e calc(100% - 14px)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .25), transparent 60%),
        linear-gradient(180deg, #f3e3bd, #dcc08a);
    border: 3px solid #1a0a00;
    border-radius: 10px;
    box-shadow: inset 0 0 0 4px #c8261b, inset 0 0 0 7px #f3e3bd, inset 0 0 0 9px #e0a800, 0 8px 18px rgba(0, 0, 0, .7);
    backdrop-filter: none;
}
/* lija del costado (raspador) */
body.tg-marc-caja #marcador-fosforos-lateral::after {
    content: ''; position: absolute; right: 3px; top: 12px; bottom: 12px; width: 8px; border-radius: 3px;
    background: radial-gradient(circle, rgba(0, 0, 0, .35) 0.6px, transparent 1px) 0 0 / 3px 3px, #7a4a26;
}
body.tg-marc-caja .header-anotador {
    margin: 2px 8px 0 0; padding: 4px 2px 5px; border-radius: 6px; border-bottom: none;
    background: linear-gradient(180deg, #c8261b, #8f1810); box-shadow: inset 0 0 0 2px #e0a800; filter: none;
}
body.tg-marc-caja .titulo-anotador { color: #fff3c8; text-shadow: 1px 1px 0 #3a0a00; text-align: center; }
body.tg-marc-caja .tg-marc-num { color: #ffd23f; }
body.tg-marc-caja .cuerpo-anotador { margin-right: 10px; }
body.tg-marc-caja .linea-divisoria-vertical { background: rgba(90, 50, 20, .45); }
body.tg-marc-caja .linea-buenas-horizontal-completa { background: #c8261b; box-shadow: none; height: 3px; }
body.tg-marc-caja .limite-chico-30 { margin-right: 10px; border-top: 2px solid rgba(90, 50, 20, .35); color: #8f1810; }
body.tg-marc-caja .limite-chico-30 > div:first-child { color: #6a3d1e !important; }
body.tg-marc-caja #btn-opciones-marcador { color: #5a3518; }

/* ======================= C) PAÑO Y BRONCE ======================= */
body.tg-marc-pano #marcador-fosforos-lateral {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .08), transparent 65%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #1f5a37, #123b23);
    border: 4px solid #3a2410;
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 22px rgba(0, 0, 0, .65), 0 8px 20px rgba(0, 0, 0, .7);
    backdrop-filter: none;
}
body.tg-marc-pano .header-anotador { border-bottom: none; gap: 6px; filter: none; }
body.tg-marc-pano .titulo-anotador {
    flex: 1; text-align: center; padding: 3px 2px; border-radius: 5px; white-space: nowrap; font-size: .78rem;
    color: #2a1a06; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background: linear-gradient(180deg, #f6dc8c, #c9a24a 55%, #8f6a1e); box-shadow: inset 0 0 0 1px #5a3e10, 0 2px 0 rgba(0, 0, 0, .5);
}
body.tg-marc-pano .linea-divisoria-vertical { background: rgba(201, 162, 74, .45); }
body.tg-marc-pano .linea-buenas-horizontal-completa { background: linear-gradient(90deg, transparent, #f6dc8c 15%, #c9a24a 85%, transparent); height: 3px; box-shadow: 0 0 4px rgba(246, 220, 140, .5); }
body.tg-marc-pano .limite-chico-30 { border-top: 1px solid rgba(201, 162, 74, .45); color: #f6dc8c; }
body.tg-marc-pano .fs-real { filter: drop-shadow(2px 3px 1.5px rgba(0, 0, 0, .7)); }

/* ======================= D) NEÓN ======================= */
body.tg-marc-neon #marcador-fosforos-lateral {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px), linear-gradient(180deg, rgba(20, 12, 6, .92), rgba(8, 4, 2, .92));
    border: 3px solid #ffd23f; border-radius: 14px;
    box-shadow: inset 0 0 14px rgba(255, 190, 40, .35), 0 0 10px #ffb300, 0 0 24px rgba(255, 150, 0, .45), 0 8px 20px rgba(0, 0, 0, .7);
}
body.tg-marc-neon .header-anotador { border-bottom: 2px solid #4dff8a; box-shadow: 0 2px 8px -2px #17c45a; filter: none; }
body.tg-marc-neon .titulo-anotador { color: #fff6cc; text-align: center; text-shadow: 0 0 3px #fff, 0 0 8px #ffe066, 0 0 16px #ffb300; }
body.tg-marc-neon .linea-divisoria-vertical { background: #ff6a5a; box-shadow: 0 0 6px #ff2a1a; width: 2px; }
body.tg-marc-neon .linea-buenas-horizontal-completa { background: #4dff8a; box-shadow: 0 0 6px #17c45a, 0 0 14px #17c45a; height: 3px; }
body.tg-marc-neon .limite-chico-30 { border-top: 1px solid rgba(255, 210, 63, .4); color: #ffb3a8; text-shadow: 0 0 6px #ff2a1a; }
body.tg-marc-neon .fs-real { filter: drop-shadow(0 0 2px #ffb300) drop-shadow(0 0 5px rgba(255, 140, 0, .8)); }
body.tg-marc-neon .fs-real .fs-borde { stroke: transparent; }
body.tg-marc-neon .fs-real .fs-palo { stroke: #ffd77a; stroke-width: 3; }
body.tg-marc-neon .fs-real .fs-veta { stroke: #fffbe8; stroke-width: 1; transform: none; }
body.tg-marc-neon .fs-real .fs-cabeza { fill: #ff5040; stroke: #ffd6cf; stroke-width: 1; }
body.tg-marc-neon .fs-real .fs-brillo { fill: #fff; }

/* ======================= PIZARRA (elegida por el autor, 2026-11-04) ======================= */
/* pizarra translúcida (se ve el escenario detrás) con el marco de madera sólido; todo el marcador queda dentro del marco:
   fósforos, la serie y el chico (en tiza) y el botón de opciones */
body.tg-marc-pizarra #marcador-fosforos-lateral {
    height: auto;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, rgba(30, 42, 36, .62), rgba(17, 26, 21, .7));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
body.tg-marc-pizarra .cuerpo-anotador { flex: none; height: 262px; }
body.tg-marc-pizarra .limite-chico-30 {
    order: 3; margin-top: 4px; padding: 7px 0 2px;
    border-top: 2px dashed rgba(240, 240, 230, .4);
    color: #f2efe4; font-size: .78rem; letter-spacing: 1.5px;
    text-shadow: 0 0 2px rgba(255, 255, 255, .45);
}
body.tg-marc-pizarra .limite-chico-30 > div:first-child { color: #ffe9a8 !important; font-size: .74rem !important; letter-spacing: 1.5px !important; }
body.tg-marc-pizarra .tg-tiza-x { color: #ff9b8a; font-weight: bold; text-shadow: 0 0 2px rgba(255, 150, 130, .6); }
body.tg-marc-pizarra .contenedor-chico-opciones { order: 4; margin: 4px auto 0; }
body.tg-marc-pizarra #btn-opciones-marcador { color: #f2efe4; text-shadow: 0 0 2px rgba(255, 255, 255, .4); }

/* [2026-11-04] Pedido del autor: sin el marco de madera y más angosto, para que tape menos escenario */
body.tg-marc-pizarra #marcador-fosforos-lateral {
    width: 150px;
    padding: 8px 6px 6px;
    border: none;
    border-image: none;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(240, 240, 230, .12), 0 6px 16px rgba(0, 0, 0, .55);
}
body.tg-marc-pizarra .titulo-anotador { font-size: .74rem; letter-spacing: 0; white-space: nowrap; }
body.tg-marc-pizarra .caja-fosforo-slot { width: 36px; height: 36px; }
body.tg-marc-pizarra .caja-fosforo-svg { width: 32px; height: 32px; }
body.tg-marc-pizarra .cuerpo-anotador { height: 240px; }
body.tg-marc-pizarra .limite-chico-30 { font-size: .7rem; letter-spacing: 1px; }
body.tg-marc-pizarra .limite-chico-30 > div:first-child { font-size: .68rem !important; letter-spacing: 1px !important; }

/* [2026-11-07] ayuda memoria debajo del chico: PRIMERA NUESTRA / PRIMERA DE ELLOS (vacío hasta que se juega la primera) */
.tg-primera-ronda { min-height: 1.4em; margin-top: 4px; }
/* más notoria (pedido del autor): cartelito amarillo con letra oscura y negrita, que hace pop al aparecer */
.tg-primera-ronda:not(:empty) {
    display: inline-block; padding: 2px 8px 1px; border-radius: 5px;
    font-family: var(--tg-fuente-titulo, "Arial Black", sans-serif); font-size: .7rem; font-weight: normal; letter-spacing: .08em;
    color: #2a1404; background: linear-gradient(180deg, #ffe066, #f1b70f); text-shadow: none;
    border: 2px solid #2a1404; box-shadow: 0 2px 0 #2a1404, 0 0 10px rgba(255, 210, 63, .45);
}
.tg-primera-ronda.tg-pop { animation: tgPrimeraPop .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tgPrimeraPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }