/* ==========================================================================
   TRUCACHO GD - Escenarios de campaña (js/sistemas/campania.js)
   - Capas del nivel 1 que no corresponden en niveles con otro arte
   - Escenario provisional dibujado por código (niveles sin ilustración)
   - Placa VS provisional, carteles de ambiente y seña del Ciruja en texto
   ========================================================================== */

/* Las capas históricas (ojos, boca, expresiones, rocola) están dibujadas para
   el arte del nivel 1: en los niveles con otro fondo se ocultan */
#mesa-juego-screen.tg-arte-ajeno #efecto-parpadeo-ciruja,
#mesa-juego-screen.tg-arte-ajeno #efecto-parpadeo-rival-izq,
#mesa-juego-screen.tg-arte-ajeno #efecto-parpadeo-rival-der,
#mesa-juego-screen.tg-arte-ajeno #capa-boca-ciruja,
#mesa-juego-screen.tg-arte-ajeno #capa-expresion-ciruja,
#mesa-juego-screen.tg-arte-ajeno #capa-senia-ciruja,
#mesa-juego-screen.tg-arte-ajeno #capa-ira-rivales,
#mesa-juego-screen.tg-arte-ajeno #capa-eructo-gordo,
#mesa-juego-screen.tg-arte-ajeno #capa-brillo-pelada,
#mesa-juego-screen.tg-arte-ajeno #parrillero-nivel3 {
    display: none !important;
}
/* Sin rocola dibujada: se muestra un botón chico de rocola */
#mesa-juego-screen.tg-arte-ajeno #zona-rocola-clic {
    top: auto; bottom: 3%; right: auto; left: 1.5%;
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffdd75, #c7881a 70%);
    border: 3px solid #1a1a1a; box-shadow: 0 4px 0 #000;
}
#mesa-juego-screen.tg-arte-ajeno #zona-rocola-clic::before {
    content: '🎵'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px;
}
#mesa-juego-screen.tg-sin-arte { animation: none; }

/* ---------------- Escenario provisional ---------------- */
#tg-escenario-provisional {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg, var(--tg-cielo) 0%, var(--tg-pared) 58%, #120c08 100%);
}
.tg-prov-pared {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 120px),
        radial-gradient(ellipse at 50% 0%, rgba(255,230,160,.25), transparent 55%);
}
.tg-prov-mesa {
    position: absolute; left: 6%; right: 6%; top: 50%; height: 80%;
    background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--tg-mesa) 85%, #fff 15%), var(--tg-mesa) 55%, #0a0a0a 100%);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    border-top: 10px solid #4a2c17; box-shadow: 0 -10px 40px rgba(0,0,0,.6);
}
.tg-prov-sello {
    position: absolute; top: 1.5%; left: 50%; transform: translateX(-50%) rotate(-1deg);
    background: var(--tg-acento); color: #111; font: 900 clamp(.55rem, 1.1cqw, .85rem) 'Arial Black', Impact, sans-serif;
    padding: .3em 1em; border: 2px solid #111; letter-spacing: .08em; white-space: nowrap; opacity: .92;
}
.tg-prov-elemento {
    position: absolute; top: 12%; padding: .4em .8em; max-width: 18%;
    background: rgba(0,0,0,.45); border: 2px dashed rgba(255,255,255,.35); color: #eee;
    font: bold clamp(.5rem, .95cqw, .8rem) Arial, sans-serif; text-align: center; transform: rotate(-2deg);
}
.tg-prov-el-0 { left: 22%; top: 9%; } .tg-prov-el-1 { right: 22%; top: 9%; transform: rotate(2deg); } .tg-prov-el-2 { right: 3%; top: 20%; }

.tg-prov-personaje { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .4cqh; z-index: 1; }
.tg-prov-izq { left: 15%; top: 30%; }
.tg-prov-der { right: 15%; top: 30%; }
.tg-prov-centro { left: 50%; top: 9%; transform: translateX(-50%); }
.tg-prov-silueta {
    position: relative; width: 13cqw; height: 21cqh; max-width: 190px;
    background:
        radial-gradient(circle at 50% 24%, #1c1c1c 0 19%, transparent 19.5%),
        radial-gradient(ellipse at 50% 100%, #1c1c1c 0 48%, transparent 48.5%);
    filter: drop-shadow(0 0 10px var(--tg-acento));
}
.tg-prov-silueta span {
    position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
    font: 900 4cqh 'Arial Black', Impact, sans-serif; color: var(--tg-acento);
}
.tg-prov-retrato {
    width: 15cqh; height: 15cqh; border-radius: 50%; overflow: hidden; background: #000;
    border: 5px solid var(--tg-acento); box-shadow: 0 6px 18px rgba(0,0,0,.7);
}
.tg-prov-retrato img { width: 140%; margin-left: -12%; margin-top: -6%; }
.tg-prov-cartel {
    display: flex; flex-direction: column; align-items: center; background: #111; color: #fff;
    border: 2px solid var(--tg-acento); padding: .2em .8em; border-radius: 6px;
    font: 900 clamp(.6rem, 1.1cqw, .95rem) 'Arial Black', Impact, sans-serif; text-transform: uppercase;
}
.tg-prov-cartel small { font: italic bold clamp(.5rem, .85cqw, .75rem) Georgia, serif; color: var(--tg-acento); text-transform: none; }

/* ---------------- Placa VS provisional ---------------- */
#tg-vs-provisional {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
    color: #fff; font-family: 'Arial Black', Impact, sans-serif; text-shadow: 4px 4px 0 #000;
    transform: translateY(-8cqh); animation: tgVsEntra .6s cubic-bezier(.2,1.4,.4,1);
}
.tg-vs-nivel { font-size: clamp(1rem, 2.4cqw, 2rem); color: #f1c40f; letter-spacing: .3em; }
.tg-vs-lugar { font-size: clamp(1.6rem, 4.5cqw, 4rem); text-transform: uppercase; }
.tg-vs-grande { font-size: clamp(5rem, 16cqw, 12rem); color: #ff3333; line-height: .9; -webkit-text-stroke: 4px #000; }
.tg-vs-sello { font-size: .8rem; background: #f1c40f; color: #111; padding: .2em .8em; text-shadow: none; letter-spacing: .1em; }
@keyframes tgVsEntra { from { transform: translateY(-8cqh) scale(2.2); opacity: 0; } to { transform: translateY(-8cqh) scale(1); opacity: 1; } }

/* ---------------- Carteles de ambiente ---------------- */
.tg-cartel-ambiente {
    position: absolute; top: 9%; left: 50%; transform: translateX(-50%);
    z-index: 70; pointer-events: none; max-width: 60%;
    background: #fff8dc; color: #111; border: 3px solid #111; border-radius: 10px;
    padding: .5em 1.1em; font: bold clamp(.75rem, 1.4cqw, 1.05rem) Georgia, serif; font-style: italic;
    box-shadow: 5px 5px 0 #000; animation: tgCartel 5.2s ease forwards;
}
@keyframes tgCartel {
    0% { opacity: 0; transform: translate(-50%, -20px) rotate(-3deg); }
    8%, 85% { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
    100% { opacity: 0; transform: translate(-50%, -10px) rotate(-1deg); }
}

/* ---------------- Panel de testeo (js/sistemas/herramientas_dev.js) ---------------- */
#tg-dev-panel {
    position: fixed; top: 10px; right: 10px; z-index: 2000000; width: 250px;
    display: none; flex-direction: column; gap: 6px; padding: 10px;
    background: rgba(12, 12, 12, .94); border: 2px solid #f1c40f; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.7); font-family: 'Arial Black', Impact, sans-serif; color: #fff;
}
#tg-dev-panel.visible { display: flex; }
#tg-dev-panel .tg-dev-cerrar { float: right; padding: 0 8px; background: #333; box-shadow: none; }
/* celular: la pantalla "hace de cuenta" que mide ~1850×900, el panel se agranda para poder tocarlo */
html.tg-tactil #tg-dev-panel { zoom: 2; max-height: calc((100dvh - 20px) / 2); overflow-y: auto; }
.tg-dev-titulo { color: #f1c40f; font-size: .9rem; letter-spacing: .08em; }
.tg-dev-titulo small { color: #888; font-family: monospace; font-size: .7rem; margin-left: 6px; }
.tg-dev-estado { font: bold .72rem monospace; color: #9fe6a0; }
.tg-dev-fila { display: flex; gap: 6px; }
.tg-dev-fila > * { flex: 1; }
#tg-dev-panel button, #tg-dev-panel select {
    font: 900 .72rem 'Arial Black', Impact, sans-serif; padding: 7px 6px; border-radius: 6px; cursor: pointer;
    border: 2px solid #111; background: linear-gradient(180deg, #2e8b57, #1e5e3a); color: #fff; box-shadow: 0 3px 0 #000;
}
#tg-dev-panel select { background: #222; flex: 2; }
#tg-dev-panel button.rojo { background: linear-gradient(180deg, #c0392b, #7b241c); }
#tg-dev-panel button.dorado { background: linear-gradient(180deg, #f7d23e, #c9930c); color: #111; }
#tg-dev-panel button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.tg-dev-aviso {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2000001;
    background: #111; color: #f1c40f; border: 2px solid #f1c40f; border-radius: 8px; padding: 8px 16px;
    font: 900 .9rem 'Arial Black', Impact, sans-serif;
}

/* ---------------- Seña del Ciruja en texto (niveles sin capas dibujadas) ---------------- */
.tg-senia-texto {
    position: absolute; top: 24%; left: 50%; transform: translateX(-50%);
    z-index: 72; pointer-events: none; display: flex; align-items: center; gap: .6em;
    background: #111; color: #f1c40f; border: 3px solid #f1c40f; border-radius: 12px;
    padding: .4em .9em; font: 900 clamp(.7rem, 1.3cqw, 1rem) 'Arial Black', Impact, sans-serif;
    box-shadow: 0 6px 16px rgba(0,0,0,.7); animation: tgSenia .5s ease;
}
.tg-senia-texto img { height: 7cqh; border-radius: 4px; border: 2px solid #fff; }
@keyframes tgSenia { from { opacity: 0; transform: translate(-50%, 10px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }