/* =====================================================================
   PRECISION SHOT — booth styles (independent from the other games)
   Everything inside #stage is in design px (1920x1080) and scaled by Stage.js.
   Colors are CSS variables set from the game's admin.
   ===================================================================== */
:root {
    --bg: #111111;
    --panel: #1a1a1a;
    --accent: #39ff14;
    --target: #39ff14;
    --text: #ffffff;
    --turf: #2e8b2e;
    --glow: 1;
    --miss: #ff5a5a;             /* theme color of MISS */
    --s: 1;                       /* screen scale, set by Stage.js */
    --font: "Segoe UI", "Arial Narrow", Arial, sans-serif;
    --font-display: "Bahnschrift", "Segoe UI", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; width: 100%; height: 100%; overflow: hidden;
    background: var(--bg); color: var(--text); font-family: var(--font);
    touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
body.hide-cursor:not(.mouse), body.hide-cursor:not(.mouse) * { cursor: none !important; }   /* a mouse that moves always shows it */

#viewport { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#stage {
    position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
    transform-origin: 0 0; overflow: hidden; background: var(--bg);
}

/* ---------------------------------------------------------------- media */
[data-media] img, [data-media] video { width: 100%; height: 100%; object-fit: contain; display: block; }
.bg-media { position: absolute; inset: 0; }
.bg-media img, .bg-media video { object-fit: cover; }
.bg-media:not(:empty) + .back-wall { opacity: 0.55; }
/* -------------------------------------------------------------- back wall */
.back-wall {
    position: absolute; left: 330px; top: 170px; width: 1260px; height: 650px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, #fff) 0%, var(--panel) 40%, color-mix(in srgb, var(--panel) 70%, #000) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------- lights */
.lights .lamp {
    position: absolute; top: 172px; width: 90px; height: 18px; border-radius: 4px;
    background: linear-gradient(#f4f4f4, #bdbdbd); box-shadow: 0 0 22px 6px rgba(255, 255, 255, 0.55);
}
.lights .lamp::after {           /* light cone */
    content: ""; position: absolute; left: -110px; top: 16px; width: 310px; height: 340px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 70%);
    pointer-events: none;
}
.lights .l1 { left: 120px; top: 150px; transform: rotate(-8deg); }
.lights .l2 { left: 330px; top: 196px; transform: rotate(-4deg); }
.lights .l3 { left: 1500px; top: 196px; transform: rotate(4deg); }
.lights .l4 { left: 1710px; top: 150px; transform: rotate(8deg); }

/* --------------------------------------------------------- side walls (3D) */
.walls { position: absolute; inset: 0; pointer-events: none; }
.wall {
    position: absolute; top: 172px; width: 330px; height: 618px;   /* screen edge -> back wall, ends at the turf */
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, #fff) 0%, var(--panel) 30%, color-mix(in srgb, var(--panel) 70%, #000) 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
    transform-style: preserve-3d;
}
/* Each wall pivots on the edge touching the back wall: angled like the reference, never off-screen. */
.wall-left { left: 0; transform-origin: 100% 50%; transform: perspective(900px) rotateY(30deg); }
.wall-right { left: 1590px; transform-origin: 0% 50%; transform: perspective(900px) rotateY(-30deg); }
.wall::after {                    /* dark dotted lower wall, like the reference booth */
    content: ""; position: absolute; left: 0; right: 0; top: 58%; bottom: 0;
    background: radial-gradient(rgba(255, 255, 255, 0.09) 1.6px, transparent 2.2px) 0 0 / 16px 16px, linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------ advertising banners */
/* Position/size are set by SceneView.applyAds (safe areas). Everything optional:
   a banner with no image and no text is not drawn at all. */
.ads { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ad { position: absolute; display: none; overflow: hidden; }
.ad.on { display: block; }
.ad.bg-panel {
    background: linear-gradient(180deg, #121212, #050505);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ad.bg-color { background: var(--ad-bg); }
.ad.border { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: 0 0 calc(22px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent); }
.ad-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 14px; }
.ad.pos-below .ad-inner { flex-direction: column-reverse; }
.ad.pos-left .ad-inner { flex-direction: row; }
.ad.pos-right .ad-inner { flex-direction: row-reverse; }
.ad-img { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
.ad-img img, .ad-img video {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: var(--ad-fit, contain); object-position: var(--ad-ipos, 50% 50%);
    transform: scale(var(--ad-zoom, 1)); transform-origin: var(--ad-ipos, 50% 50%);   /* zoom inside the banner */
}
.ad-text {
    flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 0;
    font-family: var(--font-display); font-weight: 800; font-style: italic; line-height: 1.02;
    color: var(--ad-color, var(--text)); text-transform: uppercase; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}
.ad-text > div { white-space: nowrap; padding: 0 0.08em; }
.ad-text .accent-line { color: var(--accent); text-shadow: 0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent); }
.ad.pos-left .ad-text, .ad.pos-right .ad-text { max-width: 62%; }
.ad.pos-overlay .ad-text { position: absolute; inset: 0; z-index: 1; }
.ad:not(.has-img) .ad-img, .ad:not(.has-text) .ad-text { display: none; }
.ad:not(.has-img) .ad-text { flex: 1 1 auto; max-width: none; }
.ad:not(.has-img).pos-above .ad-text { justify-content: flex-start; }
.ad:not(.has-img).pos-below .ad-text { justify-content: flex-end; }
.ad-safe { position: absolute; border: 4px dashed color-mix(in srgb, var(--accent) 75%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); z-index: 3; }

/* ---------------------------------------------------------------- turf */
.turf {
    position: absolute; left: 0; right: 0; top: 790px; bottom: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 120px, rgba(0, 0, 0, 0.05) 120px 240px),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--turf) 75%, #000) 0%, var(--turf) 45%, color-mix(in srgb, var(--turf) 85%, #000) 100%);
}
.turf::after {                   /* grass grain */
    content: ""; position: absolute; inset: 0; opacity: 0.35;
    background-image: radial-gradient(rgba(0, 0, 0, 0.35) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.5px);
    background-size: 7px 9px, 11px 7px; background-position: 0 0, 3px 4px;
}
.turf-line { position: absolute; left: 0; right: 0; bottom: 36px; height: 8px; background: rgba(255, 255, 255, 0.88); z-index: 1; }
/* No green turf: dark booth floor (admin "Piso verde" OFF) */
body.no-floor .turf {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 60%, #000), #050505);
}
body.no-floor .turf::after, body.no-floor .turf-line { display: none; }
body.no-floor .ext-bottom { background: #050505; }
body.no-floor .ext-left, body.no-floor .ext-right {
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, #fff) 0%, var(--panel) 35%, #050505 100%);
}
.goal-shadow {
    position: absolute; left: 470px; top: 770px; width: 980px; height: 60px;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.55), transparent 70%);
}

#goal-canvas, #fx-canvas, #debug-canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#fx-canvas { z-index: 6; }
#debug-canvas { z-index: 7; display: none; }
body.debug #debug-canvas { display: block; }

/* --------------------------------------------------------------- target */
.target {
    position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%;
    border: 7px solid var(--target);
    box-shadow:
        0 0 calc(18px * var(--glow)) calc(4px * var(--glow)) color-mix(in srgb, var(--target) 75%, transparent),
        0 0 calc(55px * var(--glow)) calc(10px * var(--glow)) color-mix(in srgb, var(--target) 35%, transparent),
        inset 0 0 calc(22px * var(--glow)) calc(4px * var(--glow)) color-mix(in srgb, var(--target) 55%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--target) 10%, transparent) 0 55%, color-mix(in srgb, var(--target) 22%, transparent) 100%);
    z-index: 5; pointer-events: none;
    transition: opacity 0.28s ease-out, transform 0.28s ease-out;
    transform: scale(1); opacity: 1;
}
.target-core { position: absolute; inset: 0; border-radius: 50%; animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe {             /* glow only — the ring never moves while waiting */
    0%, 100% { box-shadow: 0 0 calc(10px * var(--glow)) 0 color-mix(in srgb, var(--target) 30%, transparent); }
    50% { box-shadow: 0 0 calc(34px * var(--glow)) calc(6px * var(--glow)) color-mix(in srgb, var(--target) 45%, transparent); }
}
.target.hidden { opacity: 0; transform: scale(0.8); }
/* Client image inside the ring (admin → Aros). 'image' style = only the image, no ring. */
.target-img { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: var(--target-bg, #fff); display: none; }
.target.has-img .target-img { display: block; }
.target-img img { width: 100%; height: 100%; object-fit: var(--target-fit, cover); display: block; }
.target.style-image.has-img { border-color: transparent; background: none; }
.target.style-image.has-img .target-img { inset: -7px; }
.target-tag {
    position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--target);
    text-shadow: 0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--target) 70%, transparent), 0 3px 0 rgba(0, 0, 0, 0.6);
}
.target-tag:empty { display: none; }
/* Empty text = element not shown (no placeholder). */
.is-empty { display: none !important; }
.hud-item.off, .btn.off, .corner-menu.off { display: none !important; }
/* Label OFF or empty: invisible, but still there to hold 3 s for the admin. */
.challenge.off, #challenge.is-empty { display: block !important; opacity: 0; min-width: 220px; min-height: 130px; }
.instruction {
    position: absolute; left: 0; right: 0; text-align: center; z-index: 9; pointer-events: none;
    font-family: var(--font-display); font-weight: 800; font-size: 54px; letter-spacing: 2px; color: var(--text);
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.85), 0 4px 0 rgba(0, 0, 0, 0.4); transition: opacity 0.3s;
}
body:not(.state-ready) .instruction { opacity: 0; }
.game-logo {
    position: absolute; z-index: 8; height: calc(var(--logo-h, 110px) * var(--s)); width: calc(var(--logo-h, 110px) * 3 * var(--s));
    opacity: var(--logo-o, 0.9); pointer-events: none; display: none;
}
body.logo-on.has-logo .game-logo { display: block; }
.game-logo img { object-fit: contain; }
.game-logo.pos-bottom-right { right: calc(36px * var(--s)); bottom: calc(26px * var(--s)); }
.game-logo.pos-bottom-right img { object-position: 100% 100%; }
.game-logo.pos-top-center { left: 50%; top: calc(24px * var(--s)); transform: translateX(-50%); }
.target.hit { transform: scale(1.2); border-color: #fff; transition: transform 0.18s ease-out; }
.target.hit .target-core { background: color-mix(in srgb, var(--target) 45%, transparent); }
.target.miss { animation: miss-shake 0.32s ease-in-out; opacity: 0.55; }
@keyframes miss-shake { 0%, 100% { translate: 0; } 25% { translate: -6px; } 75% { translate: 6px; } }

/* ------------------------------------------------------------------ ball */
.ball {
    position: absolute; left: 905px; top: 935px; width: 110px; height: 110px; border-radius: 50%; z-index: 4;
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9), transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23f2f2f2'/%3E%3Cpolygon points='50,33 66,45 60,64 40,64 34,45' fill='%23111'/%3E%3Cpolygon points='50,0 62,8 58,20 42,20 38,8' fill='%23111'/%3E%3Cpolygon points='92,38 100,50 96,64 84,58 84,42' fill='%23111'/%3E%3Cpolygon points='8,38 16,42 16,58 4,64 0,50' fill='%23111'/%3E%3Cpolygon points='24,86 36,80 46,90 40,100 28,98' fill='%23111'/%3E%3Cpolygon points='76,86 72,98 60,100 54,90 64,80' fill='%23111'/%3E%3C/svg%3E") center / cover;
    box-shadow: inset -14px -16px 26px rgba(0, 0, 0, 0.45), 0 18px 18px -6px rgba(0, 0, 0, 0.55);
}
.no-ball .ball { display: none; }
.bottom-banner { position: absolute; left: 520px; right: 520px; bottom: 0; height: 36px; z-index: 3; display: none; }
.has-bannerBottom .bottom-banner { display: block; }

/* ------------------------------------------- scene extension (fill mode) */
.stage-ext { position: absolute; display: none; pointer-events: none; }
.ext-top {                        /* ceiling: continues the dark booth upwards */
    background: linear-gradient(0deg, color-mix(in srgb, var(--panel) 55%, #000), #070707);
}
.ext-bottom {                     /* turf continues down to the screen edge */
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 calc(120px * var(--s)), rgba(0, 0, 0, 0.05) calc(120px * var(--s)) calc(240px * var(--s))),
        linear-gradient(180deg, color-mix(in srgb, var(--turf) 85%, #000), color-mix(in srgb, var(--turf) 70%, #000));
}
.ext-left, .ext-right {            /* side walls continue outwards */
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, #fff) 0%, var(--panel) 35%, color-mix(in srgb, var(--turf) 70%, #000) 72%, color-mix(in srgb, var(--turf) 70%, #000) 100%);
}

/* ------------------------------------------------ screen-anchored UI layer */
#ui-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#ui-layer > * { pointer-events: auto; }
#ui-layer .hud { pointer-events: none; }

/* ------------------------------------------------------ challenge label */
.challenge {
    position: absolute; left: calc(40px * var(--s)); top: calc(28px * var(--s)); z-index: 8;
    transform: scale(var(--s)); transform-origin: 0 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.challenge.holding { outline: 3px solid var(--accent); outline-offset: 8px; border-radius: 8px; }
.challenge-kicker { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 2px; color: var(--accent); }
.challenge-title { font-family: var(--font-display); font-weight: 800; font-size: 76px; line-height: 1; letter-spacing: 1px; }
.challenge-tagline { font-size: 28px; opacity: 0.9; margin-top: 6px; }

/* ------------------------------------------------------------------- HUD */
.hud {
    position: absolute; right: calc(36px * var(--s)); top: calc(30px * var(--s)); display: flex; gap: 14px; z-index: 8;
    transform: scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 100% 0;
}
.hud-item {
    min-width: 138px; padding: 10px 18px 12px; text-align: center; border-radius: 10px;
    background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--accent); display: flex; flex-direction: column;
}
.hud-label { font-size: 17px; font-weight: 800; letter-spacing: 3px; color: var(--accent); }
.hud-value { font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.state-results .hud { opacity: 0; }
body.state-results .challenge { opacity: 0.25; }

/* -------------------------------------------------------------- messages */
.message {
    position: absolute; left: 0; right: 0; top: 540px; translate: 0 -50%; line-height: 1.05; white-space: nowrap; text-align: center; z-index: 9; pointer-events: none;
    font-family: var(--font-display); font-weight: 900; font-size: 150px; letter-spacing: 4px; color: var(--text);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 6px 0 rgba(0, 0, 0, 0.4);
    opacity: 0; transform: scale(1.3); transition: opacity 0.18s, transform 0.25s cubic-bezier(.2, 1.4, .4, 1);
}
.message.show { opacity: 1; transform: scale(1); }
.message.accent { color: var(--accent); text-shadow: 0 0 calc(40px * var(--glow)) color-mix(in srgb, var(--accent) 70%, transparent), 0 6px 0 rgba(0, 0, 0, 0.5); }
.message.small { font-size: 96px; }
.float-label {
    position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, -50%);
    font-family: var(--font-display); font-weight: 900; font-size: 84px; color: var(--accent); white-space: nowrap;
    text-shadow: 0 0 calc(30px * var(--glow)) color-mix(in srgb, var(--accent) 70%, transparent), 0 5px 0 rgba(0, 0, 0, 0.5);
    opacity: 0;
}
.float-label.show { animation: float-up 1s ease-out forwards; }
.float-label.miss { color: #ff5a5a; text-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); }
@keyframes float-up {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
    75% { opacity: 1; transform: translate(-50%, -85%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}
.flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: var(--target); opacity: 0; }
.flash.go { animation: flash 0.35s ease-out; }
@keyframes flash { from { opacity: 0.28; } to { opacity: 0; } }

/* --------------------------------------------------------------- results */
.results {
    position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85));
    transition: opacity 0.3s;
}
.results.hidden { opacity: 0; pointer-events: none; }
.results-panel {
    width: 820px; padding: 46px 60px 40px; text-align: center; border-radius: 22px;
    background: linear-gradient(180deg, #161616, #0b0b0b); border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.results-title { font-family: var(--font-display); font-weight: 900; font-size: 80px; letter-spacing: 4px; color: var(--accent); text-shadow: 0 0 calc(30px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent); }
.results-score-label { margin-top: 10px; font-size: 24px; font-weight: 800; letter-spacing: 6px; opacity: 0.75; }
.results-score { font-family: var(--font-display); font-weight: 900; font-size: 150px; line-height: 1; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 26px; }
.results-grid div { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.results-grid span { font-size: 20px; font-weight: 800; letter-spacing: 4px; color: var(--accent); }
.results-grid b { font-family: var(--font-display); font-size: 58px; }
.restart-track { height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; margin: 0 60px 10px; visibility: hidden; }
.restart-track.on { visibility: visible; }
#restart-fill { height: 100%; width: 0; background: var(--accent); }
.restart-text { font-size: 24px; opacity: 0.8; min-height: 32px; margin-bottom: 18px; }
.results-buttons { display: flex; gap: 20px; justify-content: center; }
.btn {
    font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: 2px;
    border-radius: 14px; padding: 18px 44px; cursor: pointer; border: 2px solid transparent;
}
.btn-accent { background: var(--accent); color: #0a0a0a; box-shadow: 0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--accent) 50%, transparent); }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.35); }
.btn:active { transform: scale(0.97); }

.corner-menu {
    position: absolute; left: calc(36px * var(--s)); bottom: calc(30px * var(--s)); z-index: 11; display: none;
    transform: scale(var(--s)); transform-origin: 0 100%;
    font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: 2px; color: var(--text);
    background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; padding: 12px 30px; cursor: pointer;
}
body.state-ready .corner-menu, body.state-gameover .corner-menu { display: block; }

/* =====================================================================
   SOCCER 1 VS 1 (?mode=duel) — same booth; players' scoreboard, turns,
   one target per player. Nothing here applies to Precision Shot.
   ===================================================================== */
.duel-board, .duel-results { display: none; }
body.duel .duel-board { display: block; }
body.duel .duel-results { display: block; }
body.duel .hud, body.duel .results-score-label, body.duel .results-score, body.duel .results-grid { display: none !important; }

.duel-player {
    position: absolute; top: calc(24px * var(--s)); width: 400px; padding: 14px 22px 16px; border-radius: 14px;
    background: rgba(0, 0, 0, 0.7); border: 2px solid rgba(255, 255, 255, 0.12); border-top: 6px solid var(--player);
    transform: scale(calc(var(--s) * var(--hud-k, 1))); transition: box-shadow 0.25s, opacity 0.25s; z-index: 8; pointer-events: none;
}
.duel-player[data-p="0"] { left: calc(30px * var(--s)); transform-origin: 0 0; }
.duel-player[data-p="1"] { right: calc(30px * var(--s)); transform-origin: 100% 0; }
.duel-player.active { box-shadow: 0 0 0 3px var(--player), 0 0 calc(34px * var(--glow)) color-mix(in srgb, var(--player) 70%, transparent); }
body.state-play .duel-player:not(.active) { opacity: 0.55; }
.dp-name { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: 1px; color: var(--player); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.dp-stats div { display: flex; flex-direction: column; }
.dp-stats span { font-size: 18px; font-weight: 800; letter-spacing: 3px; color: rgba(255, 255, 255, 0.75); }
.dp-stats b { font-family: var(--font-display); font-size: 58px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duel-turn {
    position: absolute; left: 50%; top: calc(34px * var(--s)); transform: translateX(-50%) scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 50% 0;
    padding: 12px 34px; border-radius: 40px; background: var(--player); color: #fff; white-space: nowrap; z-index: 8; pointer-events: none;
    font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 calc(30px * var(--glow)) color-mix(in srgb, var(--player) 70%, transparent);
}
body:not(.state-play) .duel-turn { opacity: 0; }
.duel-player.off, .duel-turn.off { display: none; }

/* Results */
.duel-results { margin: 14px 0 22px; }
.dr-title { font-size: 24px; font-weight: 800; letter-spacing: 6px; opacity: 0.75; }
.dr-players { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.dr-player { border-radius: 14px; padding: 16px; background: rgba(255, 255, 255, 0.05); border-top: 6px solid var(--player); }
.dr-player.win { box-shadow: 0 0 0 3px var(--player), 0 0 30px color-mix(in srgb, var(--player) 55%, transparent); }
.dr-name { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--player); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-hits { font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: 1; }
.dr-label { font-size: 18px; font-weight: 800; letter-spacing: 4px; opacity: 0.7; }
.dr-winner { font-family: var(--font-display); font-weight: 900; line-height: 1.05; }

/* One target per player: type ring / ball / graphic / image, in the player's color */
.target.duel-t .target-tag { color: var(--target); font-size: 30px; bottom: -44px; }
.target.duel-t.inactive:not(.hidden) { opacity: 0.32; filter: saturate(0.6); }
.target.duel-t.inactive .target-core { animation: none; }
.target.type-ball, .target.type-graphic, .target.type-image { border-color: transparent; }
.target.type-ball {
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9), transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23f2f2f2'/%3E%3Cpolygon points='50,33 66,45 60,64 40,64 34,45' fill='%23111'/%3E%3Cpolygon points='50,0 62,8 58,20 42,20 38,8' fill='%23111'/%3E%3Cpolygon points='92,38 100,50 96,64 84,58 84,42' fill='%23111'/%3E%3Cpolygon points='8,38 16,42 16,58 4,64 0,50' fill='%23111'/%3E%3Cpolygon points='24,86 36,80 46,90 40,100 28,98' fill='%23111'/%3E%3Cpolygon points='76,86 72,98 60,100 54,90 64,80' fill='%23111'/%3E%3C/svg%3E") center / cover;
    box-shadow: 0 0 0 6px var(--target), 0 0 calc(34px * var(--glow)) calc(8px * var(--glow)) color-mix(in srgb, var(--target) 60%, transparent);
}
.target.type-graphic {
    background: radial-gradient(circle, var(--target) 0 16%, #fff 16% 34%, var(--target) 34% 52%, #fff 52% 70%, var(--target) 70% 100%);
    box-shadow: 0 0 calc(34px * var(--glow)) calc(8px * var(--glow)) color-mix(in srgb, var(--target) 60%, transparent);
}
/* Custom image: shown WHOLE (keeps its proportion), no circle crop */
.target.type-image { background: none; box-shadow: none; }
.target.type-image .target-core { display: none; }
.target.type-image .target-img { display: block; inset: 0; border-radius: 0; overflow: visible; background: none; filter: drop-shadow(0 0 calc(14px * var(--glow)) var(--target)); }
.target.type-image .target-img img { object-fit: contain; }

/* Turn timer (SOCCER 1 VS 1) */
.dt-time:empty { display: none; }
.dt-time { display: inline-block; min-width: 1.6em; margin-left: 10px; padding: 0 12px; border-radius: 20px; background: rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.dt-time.low { background: #fff; color: #d40000; text-shadow: none; }
.duel-turn.waiting-next { opacity: 1 !important; }

/* ON/OFF from the admin (Jugadores → Control del turno) */
body.duel.no-turn-banner .duel-turn { display: none; }
body.duel.no-target-names .target.duel-t .target-tag { display: none; }

/* =====================================================================
   PENALTY KICK (?mode=penalty) — 3D canvas instead of the 2D booth.
   Banners, HUD, messages and results of the module stay on top.
   ===================================================================== */
#penalty-canvas, .swipe-hint { display: none; }
body.penalty #penalty-canvas { display: block; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; touch-action: none; }
body.penalty .back-wall, body.penalty .walls, body.penalty .lights, body.penalty .turf, body.penalty .goal-shadow,
body.penalty #goal-canvas, body.penalty .target, body.penalty .ball, body.penalty .bg-media { display: none !important; }
body.penalty .swipe-hint {
    display: block; position: absolute; left: 0; right: 0; text-align: center; z-index: 8; pointer-events: none; white-space: nowrap;
    translate: 0 -50%; font-weight: 900; letter-spacing: 2px; opacity: 0; transition: opacity 0.3s;
}
body.penalty .swipe-hint.show { opacity: 1; animation: swipe-pulse 1.6s ease-in-out infinite; }
@keyframes swipe-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
body.penalty .ext-top { background: var(--bg); }
body.penalty .ext-bottom { background: color-mix(in srgb, var(--turf) 80%, #000); }
body.penalty .ext-left, body.penalty .ext-right { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 45%, color-mix(in srgb, var(--turf) 80%, #000) 62%, color-mix(in srgb, var(--turf) 80%, #000) 100%); }
body.penalty .flash { background: #fff; }

/* PENALTY KICK — PHOTO mode: the real stadium photo under the transparent 3D canvas */
.penalty-plate { display: none; }
body.penalty.penalty-photo .penalty-plate {
    display: block; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 0;
    background: url("../assets/penalty-stadium-plate.webp") center / 100% 100% no-repeat;
}
body.penalty.penalty-photo .ext-top { background: #0c1a3c; }
body.penalty.penalty-photo .ext-bottom { background: #2c7d1d; }
body.penalty.penalty-photo .ext-left, body.penalty.penalty-photo .ext-right { background: linear-gradient(180deg, #0c1a3c 0%, #14306b 40%, #1f55b8 46%, #2c7d1d 49%, #2c7d1d 100%); }

.penalty-plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }   /* photo + ads on its boards */

/* PENALTY KICK wall view: the zoomed photo leaves the top edge dark like the stadium roof */
body.penalty.penalty-wall .penalty-plate { background: #0c1a3c; overflow: hidden; }
body.penalty.penalty-wall .ext-bottom { background: #101418; }   /* floor below the goal on non-16:9 screens */


/* =====================================================================
   BASKETBALL (?mode=basket) — 3D arena canvas, split screen in 2 players.
   Nothing here applies to the other games.
   ===================================================================== */
#basket-canvas, .bk-divider, .bk-flash, .bk-float, .bk-hint, .bk-modes, .bk-results, .bk-panel, .bk-timer, .bk-only { display: none; }
body.basket #basket-canvas { display: block; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; touch-action: none; }
body.basket .back-wall, body.basket .walls, body.basket .lights, body.basket .turf, body.basket .goal-shadow,
body.basket #goal-canvas, body.basket .target, body.basket .ball, body.basket .bg-media, body.basket .penalty-plate { display: none !important; }
body.basket .ext-top { background: #05070d; }
body.basket .ext-bottom { background: linear-gradient(180deg, #1a1b20, #08090b); }
body.basket .ext-left, body.basket .ext-right { background: linear-gradient(180deg, #05070d 0%, #0b0d14 70%, #111216 100%); }
body.basket .flash { display: none; }

/* Split screen: glowing divider in both players' colors */
body.basket.bk-two .bk-divider {
    display: block; position: absolute; left: 957px; top: 0; width: 6px; height: 1080px; z-index: 6; pointer-events: none;
    background: linear-gradient(180deg, var(--p1, #f33), #fff 50%, var(--p2, #18f));
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.35), 0 0 40px rgba(0, 0, 0, 0.9);
}
.bk-flash { position: absolute; top: 0; height: 1080px; z-index: 7; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--player, #fff) 55%, transparent), transparent 70%); }
body.basket .bk-flash { display: block; left: 0; width: 1920px; }
body.basket.bk-two .bk-flash { width: 960px; }
body.basket.bk-two .bk-flash[data-p="1"] { left: 960px; }
.bk-flash.go { animation: bk-flash 0.5s ease-out; }
@keyframes bk-flash { from { opacity: 0.55; } to { opacity: 0; } }

/* Feedback above each hoop */
body.basket .bk-float {
    display: block; position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, -50%); opacity: 0;
    text-align: center; white-space: nowrap; line-height: 1.02; font-family: var(--font-display); font-weight: 900;
}
.bk-float.show { animation: bk-pop 1.15s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.bk-float .bk-bonus { font-size: 60px; letter-spacing: 6px; }
@keyframes bk-pop {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); }
    14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    24% { transform: translate(-50%, -50%) scale(1); }
    78% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -80%) scale(0.96); }
}
body.basket .bk-hint {
    display: block; position: absolute; z-index: 8; pointer-events: none; transform: translate(-50%, 0); opacity: 0;
    font-family: var(--font-display); font-weight: 900; font-style: italic; letter-spacing: 1px; white-space: nowrap; transition: opacity 0.3s;
    color: var(--player, #fff); text-shadow: 0 0 18px var(--player, #fff), 0 0 40px var(--player, #fff), 0 3px 0 rgba(0, 0, 0, 0.6) !important;
}
/* Hand + arrow ("swipe up") in the player's color, beside the ball */
body.basket .bk-hint::before {
    content: ""; position: absolute; left: calc(50% + 70px); top: -150px; width: 78px; height: 110px;
    background: currentColor; filter: drop-shadow(0 0 12px currentColor);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cpath d='M38 4l14 16h-9v18h-10v-18h-9z'/%3E%3Cpath d='M30 44c0-4 6-4 6 0v22l3-10c1-4 7-3 6 1l-1 6c1-4 7-3 6 1l-1 5c1-4 7-3 6 1l-3 16c-2 8-7 12-15 12h-6c-6 0-10-3-13-8l-9-15c-2-4 3-7 6-4l7 8z' /%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cpath d='M38 4l14 16h-9v18h-10v-18h-9z'/%3E%3Cpath d='M30 44c0-4 6-4 6 0v22l3-10c1-4 7-3 6 1l-1 6c1-4 7-3 6 1l-1 5c1-4 7-3 6 1l-3 16c-2 8-7 12-15 12h-6c-6 0-10-3-13-8l-9-15c-2-4 3-7 6-4l7 8z' /%3E%3C/svg%3E") center / contain no-repeat;
    animation: bk-hand 1.4s ease-in-out infinite;
}
@keyframes bk-hand { 0%, 100% { translate: 0 10px; } 50% { translate: 0 -12px; } }
.bk-hint.show { opacity: 1 !important; }

/* SELECCIONA MODO */
body.basket .bk-modes {
    display: flex; position: absolute; inset: 0; z-index: 12; flex-direction: column; align-items: center; justify-content: center; gap: 46px;
    background: radial-gradient(ellipse at center, rgba(5, 8, 16, 0.55), rgba(5, 8, 16, 0.92)); opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
body.basket .bk-modes.show { opacity: 1; pointer-events: auto; }
.bk-modes-title { font-family: var(--font-display); font-weight: 900; letter-spacing: 6px; }
.bk-modes-row { display: flex; gap: 60px; }
.bk-mode-btn {
    width: 460px; height: 300px; border-radius: 28px; cursor: pointer; color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    font-family: var(--font-display); font-weight: 900; font-size: 54px; letter-spacing: 3px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    border: 3px solid color-mix(in srgb, var(--accent) 80%, #fff);
    box-shadow: 0 0 calc(40px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 40px rgba(255, 255, 255, 0.06);
    transition: transform 0.15s;
}
.bk-mode-btn:active { transform: scale(0.96); }
.bk-mode-btn.off { display: none; }
.bk-mode-icon { font-size: 90px; line-height: 1; }

/* Scoreboards like a street-ball arcade: PLAYER 1 (left) · TIME (center) · PLAYER 2 (right), at the top center */
body.basket .hud { display: none !important; }
body.basket .challenge { opacity: 0 !important; }             /* the scoreboards use the top; hold 3 s there still opens the admin */
body.basket.bk-one .bk-panel[data-p="0"] { right: calc(50% + 6px * var(--s)); }
body.basket.bk-one .bk-timer { left: calc(50% + 6px * var(--s)); transform: scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 0 0; }
body.basket .bk-panel[data-p="0"], body.basket.bk-two .bk-panel { display: block; }
body.basket .bk-timer { display: block; }
.bk-panel {
    position: absolute; top: 0; width: 436px; height: 150px; padding: 6px 26px 0; z-index: 8; pointer-events: none;
    transform: scale(calc(var(--s) * var(--hud-k, 1)));
    background:
        radial-gradient(circle at 78% 45%, transparent 0 58px, rgba(0, 0, 0, 0.35) 59px 63px, transparent 64px 92px, rgba(0, 0, 0, 0.3) 93px 96px, transparent 97px),
        linear-gradient(115deg, color-mix(in srgb, var(--player) 55%, #000) 0%, var(--player) 45%, color-mix(in srgb, var(--player) 70%, #000) 100%);
    border: 3px solid color-mix(in srgb, var(--player) 60%, #fff);
    box-shadow: 0 0 calc(30px * var(--glow)) color-mix(in srgb, var(--player) 70%, transparent), inset 0 0 40px rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.bk-panel[data-p="0"] { right: calc(50% + 170px * var(--s)); transform-origin: 100% 0; border-radius: 0 0 0 18px; }
.bk-panel[data-p="1"] { left: calc(50% + 170px * var(--s)); transform-origin: 0 0; border-radius: 0 0 18px 0; text-align: right; }
.bk-name { font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; font-size: 54px; line-height: 1.05; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.bk-box { margin: 2px 30px 0; height: 84px; border-radius: 10px; background: rgba(0, 0, 0, 0.5); text-align: center; padding-top: 2px; }
.bk-label { font-family: Impact, var(--font-display); font-style: italic; font-size: 28px; line-height: 1; color: #fff; letter-spacing: 1px; }
.bk-score { font-family: Impact, var(--font-display); font-weight: 900; font-size: 66px; line-height: 0.95; color: #fff; font-variant-numeric: tabular-nums; }
.bk-sub { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 6px #000; }
.bk-sub:empty { display: none; }
.bk-panel.pop .bk-score { animation: bk-score 0.45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bk-score { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.bk-timer {
    position: absolute; left: 50%; top: calc(8px * var(--s)); width: 316px; height: 140px; z-index: 8; pointer-events: none; text-align: center;
    transform: translateX(-50%) scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 50% 0;
    background: linear-gradient(180deg, #1b1c21, #050507);
    border: 4px solid #d9d9dd; box-shadow: 0 0 22px rgba(255, 255, 255, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.8);
    clip-path: polygon(8% 0, 92% 0, 100% 16%, 100% 84%, 92% 100%, 8% 100%, 0 84%, 0 16%);
}
.bk-tlabel { font-family: Impact, var(--font-display); font-style: italic; font-size: 32px; color: #fff; margin-top: 10px; line-height: 1; }
.bk-tval { font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; font-size: 92px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.bk-timer.off, body.basket:not(.state-play):not(.state-ready) .bk-timer { display: none; }
.bk-timer.low .bk-tval { color: #ff3040; animation: bk-low 0.5s ease-in-out infinite alternate; }
@keyframes bk-low { to { transform: scale(1.12); } }
body.basket .hud-item.bk-notime { display: none; }

/* Results */
body.basket.bk-two .bk-results { display: block; margin: 12px 0 20px; }
body.basket.bk-two .results-score-label, body.basket.bk-two .results-score, body.basket.bk-two .results-grid { display: none !important; }
body.basket .bk-only { display: inline-block; }
body.basket .bk-only.off { display: none; }
.bk-res-players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 16px 0; }
.bk-vs { font-family: var(--font-display); font-weight: 900; font-size: 44px; opacity: 0.6; }
body.basket .results-panel { width: 900px; }
body.basket .btn { font-size: 30px; padding: 16px 34px; }


/* BASKETBALL — interactive wall HUD: white clock with a red number at the top; at the bottom (on the
   concrete) each team's jersey outline "Player N" + a rounded score pill in the player's color */
.bk-jersey { display: none; }
body.basket.bk-view-wall .bk-panel {
    top: auto; bottom: calc(40px * var(--s)); width: 520px; height: 130px; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none;
    display: flex; align-items: center; gap: 36px;
}
body.basket.bk-view-wall .bk-panel[data-p="0"] { left: calc(50% - 900px * var(--s)); right: auto; transform-origin: 0 100%; }
body.basket.bk-view-wall .bk-panel[data-p="1"] { left: auto; right: calc(50% - 900px * var(--s)); transform-origin: 100% 100%; flex-direction: row-reverse; text-align: left; }
body.basket.bk-view-wall.bk-one .bk-panel[data-p="0"] { left: calc(50% - 900px * var(--s)); right: auto; }
body.basket.bk-view-wall .bk-name, body.basket.bk-view-wall .bk-label, body.basket.bk-view-wall .bk-sub { display: none; }
body.basket.bk-view-wall .bk-jersey {
    display: flex; align-items: center; justify-content: center; flex-direction: column; width: 118px; height: 130px; flex: none; position: relative;
    color: var(--player);
}
body.basket.bk-view-wall .bk-jersey::before {           /* jersey outline + light fill */
    content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--player) 22%, #ffffff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath d='M22 0h14c2 10 26 10 28 0h14l-2 26c0 8 8 10 14 10v76H10V36c6 0 14-2 14-10z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath d='M22 0h14c2 10 26 10 28 0h14l-2 26c0 8 8 10 14 10v76H10V36c6 0 14-2 14-10z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 0 var(--player));
    box-shadow: inset 0 0 0 6px var(--player);
}
body.basket.bk-view-wall .bk-jersey::after {            /* colored outline */
    content: ""; position: absolute; inset: 0; background: var(--player);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath fill='none' stroke='black' stroke-width='6' d='M22 3h12c3 11 29 11 32 0h12l-2 23c0 8 8 11 14 11v72H12V37c6 0 14-3 14-11z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath fill='none' stroke='black' stroke-width='6' d='M22 3h12c3 11 29 11 32 0h12l-2 23c0 8 8 11 14 11v72H12V37c6 0 14-3 14-11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.basket.bk-view-wall .bk-jname {
    position: relative; z-index: 1; color: var(--player); font-family: "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: 22px;
    margin-top: 34px; max-width: 86px; text-align: center; line-height: 1.1; overflow: hidden;
}
body.basket.bk-view-wall .bk-box {
    margin: 0; width: 260px; height: 92px; border-radius: 22px; padding: 0; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--player) 88%, #ffffff); border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
body.basket.bk-view-wall .bk-score { font-family: Impact, "Arial Black", sans-serif; font-weight: 900; font-style: italic; font-size: 76px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
body.basket.bk-view-wall .bk-timer {
    top: calc(36px * var(--s)); width: 250px; height: 104px; border: 0; border-radius: 28px; clip-path: none;
    background: #ffffff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
    left: 50%; transform: translateX(-50%) scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 50% 0;
}
body.basket.bk-view-wall .bk-tlabel { display: none; }
body.basket.bk-view-wall .bk-tval { font-family: Impact, "Arial Black", sans-serif; font-weight: 900; font-style: italic; font-size: 82px; line-height: 104px; color: #d61f2c; letter-spacing: 1px; }
body.basket.bk-view-wall.bk-two .bk-divider { background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
body.basket.bk-view-wall .ext-top, body.basket.bk-view-wall .ext-left, body.basket.bk-view-wall .ext-right { background: #e9eaec; }
body.basket.bk-view-wall .ext-bottom { background: #9d9fa2; }

/* 1 player: only his scoreboard, centered at the bottom */
body.basket.bk-one .bk-panel[data-p="1"] { display: none !important; }
body.basket.bk-view-wall.bk-one .bk-panel[data-p="0"] { left: calc(50% - 250px * var(--s)); right: auto; }


/* =====================================================================
   CORNHOLE (?mode=cornhole) — 3D lane, arcade scoreboards, start screen.
   Nothing here applies to the other games.
   ===================================================================== */
#cornhole-canvas, .ch-flash, .ch-float, .ch-hint, .ch-start, .ch-panel, .ch-center { display: none; }
body.cornhole #cornhole-canvas { display: block; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; touch-action: none; }
body.cornhole .back-wall, body.cornhole .walls, body.cornhole .lights, body.cornhole .turf, body.cornhole .goal-shadow,
body.cornhole #goal-canvas, body.cornhole .target, body.cornhole .ball, body.cornhole .bg-media, body.cornhole .penalty-plate, body.cornhole .hud { display: none !important; }
body.cornhole .flash { display: none; }
body.cornhole .challenge { opacity: 0 !important; }                /* hold 3 s at the top-left still opens the admin */
body.cornhole .ext-top { background: #0a0d1e; }
body.cornhole .ext-bottom { background: #2f5d22; }
body.cornhole .ext-left, body.cornhole .ext-right { background: linear-gradient(180deg, #0a0d1e 0%, #1b1640 40%, #2f5d22 60%, #2f5d22 100%); }
body.cornhole .ch-flash { display: block; position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--player, #fff) 50%, transparent), transparent 65%); }
.ch-flash.go { animation: bk-flash 0.5s ease-out; }

/* Feedback above the hole: +3 / IN THE HOLE! */
body.cornhole .ch-float { display: block; position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; text-align: center; white-space: nowrap; line-height: 1; font-weight: 900; }
.ch-float.show { animation: bk-pop 1.2s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.ch-float .ch-pts { font-size: 1.25em; }

/* Swipe hint under the bag: hand + arrow in the thrower's color */
body.cornhole .ch-hint {
    display: block; position: absolute; z-index: 8; pointer-events: none; transform: translate(-50%, 0); opacity: 0; transition: opacity 0.3s;
    font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; white-space: nowrap;
    color: var(--player, #fff); text-shadow: 0 0 18px var(--player, #fff), 0 3px 0 rgba(0, 0, 0, 0.6) !important;
}
body.cornhole .ch-hint::before {
    content: ""; position: absolute; left: 50%; top: -150px; width: 84px; height: 118px; margin-left: -42px;
    background: #fff; filter: drop-shadow(0 0 10px var(--player, #fff));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cpath d='M38 4l14 16h-9v18h-10v-18h-9z'/%3E%3Cpath d='M30 44c0-4 6-4 6 0v22l3-10c1-4 7-3 6 1l-1 6c1-4 7-3 6 1l-1 5c1-4 7-3 6 1l-3 16c-2 8-7 12-15 12h-6c-6 0-10-3-13-8l-9-15c-2-4 3-7 6-4l7 8z' /%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cpath d='M38 4l14 16h-9v18h-10v-18h-9z'/%3E%3Cpath d='M30 44c0-4 6-4 6 0v22l3-10c1-4 7-3 6 1l-1 6c1-4 7-3 6 1l-1 5c1-4 7-3 6 1l-3 16c-2 8-7 12-15 12h-6c-6 0-10-3-13-8l-9-15c-2-4 3-7 6-4l7 8z' /%3E%3C/svg%3E") center / contain no-repeat;
    animation: bk-hand 1.4s ease-in-out infinite;
}
.ch-hint.show { opacity: 1 !important; }

/* Start screen */
body.cornhole .ch-start {
    display: flex; position: absolute; inset: 0; z-index: 12; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(ellipse at center, rgba(8, 10, 26, 0.45), rgba(8, 10, 26, 0.88)); opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
body.cornhole .ch-start.show { opacity: 1; pointer-events: auto; }
.ch-title { font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; letter-spacing: 4px; line-height: 0.95; }
.ch-sub { font-family: Impact, var(--font-display); font-style: italic; font-size: 70px; letter-spacing: 12px; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.ch-starthint { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: 4px; color: var(--accent); margin: 12px 0 18px; }
.ch-select { font-family: var(--font-display); font-weight: 900; letter-spacing: 5px; margin-bottom: 8px; }
.ch-select.off, .ch-btn.off { display: none; }
.ch-row { display: flex; gap: 50px; }
.ch-btn {
    min-width: 380px; padding: 30px 50px; border-radius: 24px; cursor: pointer; color: #111;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; font-size: 58px; letter-spacing: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); border: 0;
    box-shadow: 0 10px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 0 calc(40px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent);
    transition: transform 0.12s;
}
.ch-btn:active { transform: translateY(6px); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.ch-ic { font-size: 50px; font-style: normal; }

/* Broadcast-style scoreboard (compact: the board is the star).
   1 player: one bar top-center · 2 players by turns: P1 | bags | P2 · split screen: one bar per half */
body.cornhole .ch-panel[data-p="0"], body.cornhole.ch-two .ch-panel, body.cornhole .ch-center { display: flex; }
body.cornhole.ch-one .ch-panel[data-p="1"], body.cornhole.ch-one .ch-center, body.cornhole.ch-split .ch-center { display: none; }
body.cornhole:not(.ch-one):not(.ch-two) .ch-panel, body.cornhole:not(.ch-one):not(.ch-two) .ch-center { display: none; }
.ch-panel {
    position: absolute; top: calc(14px * var(--s)); width: 330px; height: 86px; z-index: 8; pointer-events: none;
    align-items: stretch; transform-origin: 50% 0;
    transform: scale(calc(var(--s) * var(--hud-k, 1)));
    background: linear-gradient(180deg, rgba(20, 22, 30, 0.78), rgba(6, 7, 12, 0.78));
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: box-shadow 0.25s, opacity 0.25s;
}
.ch-panel::before { content: ""; flex: 0 0 10px; background: var(--player); }
.ch-panel .ch-id { display: none; }
.ch-panel > .ch-name, .ch-panel > .ch-team, .ch-panel > .ch-bags { position: absolute; left: 24px; right: 104px; }
.ch-name { top: 8px; font-family: Impact, var(--font-display); font-weight: 900; font-style: italic; font-size: 30px; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }
.ch-team { top: 40px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 3px; color: color-mix(in srgb, var(--player) 45%, #fff); white-space: nowrap; overflow: hidden; }
.ch-team:empty { display: none; }
.ch-box { margin-left: auto; width: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--player), color-mix(in srgb, var(--player) 65%, #000)); }
.ch-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.85); line-height: 1; }
.ch-score { font-family: Impact, var(--font-display); font-weight: 900; font-size: 54px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.ch-panel.pop .ch-score { animation: bk-score 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.ch-bags { bottom: 10px; display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.ch-bags span { flex: 0 0 auto; width: 18px; height: 16px; border-radius: 4px; background: var(--bag, var(--player)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.55); }
.ch-bags span.used { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }
/* positions */
body.cornhole.ch-one .ch-panel[data-p="0"] { left: 50%; margin-left: -165px; }
body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="0"] { right: calc(50% + 82px * var(--s)); transform-origin: 100% 0; }
body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="1"] { left: calc(50% + 82px * var(--s)); transform-origin: 0 0; flex-direction: row-reverse; }
body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="1"] .ch-box { margin-left: 0; margin-right: auto; }
body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="1"] > .ch-name, body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="1"] > .ch-team,
body.cornhole.ch-two:not(.ch-split) .ch-panel[data-p="1"] > .ch-bags { left: 104px; right: 24px; text-align: right; justify-content: flex-end; }
body.cornhole.ch-split .ch-panel[data-p="0"] { left: 25%; margin-left: -165px; }
body.cornhole.ch-split .ch-panel[data-p="1"] { left: 75%; margin-left: -165px; }
body.cornhole.ch-two:not(.ch-split).state-play .ch-panel:not(.active) { opacity: 0.7; }
.ch-panel.active { box-shadow: 0 0 0 3px #fff, 0 0 calc(26px * var(--glow)) var(--player), 0 6px 18px rgba(0, 0, 0, 0.45); }
.ch-center {
    position: absolute; left: 50%; top: calc(14px * var(--s)); width: 150px; height: 86px; z-index: 8; pointer-events: none;
    flex-direction: column; align-items: center; justify-content: center;
    transform: translateX(-50%) scale(calc(var(--s) * var(--hud-k, 1))); transform-origin: 50% 0;
    background: linear-gradient(180deg, rgba(20, 22, 30, 0.85), rgba(6, 7, 12, 0.85)); border-radius: 8px;
    border-bottom: 4px solid var(--player, #fff); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ch-clabel { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.8); line-height: 1; }
.ch-cval { font-family: Impact, var(--font-display); font-weight: 900; font-size: 46px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
/* Split screen divider */
.ch-divider { display: none; }
body.cornhole.ch-split .ch-divider.show {
    display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: var(--div-w, 6px); transform: translateX(-50%); z-index: 8; pointer-events: none;
    background: var(--div-color, #fff); box-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
}

/* Results (reuses the basketball results block) */
body.cornhole.ch-two .bk-results { display: block; margin: 12px 0 20px; }
body.cornhole.ch-two .results-score-label, body.cornhole.ch-two .results-score, body.cornhole.ch-two .results-grid { display: none !important; }
body.cornhole .bk-only { display: inline-block; }
body.cornhole .bk-only.off { display: none; }
body.cornhole .results-panel { width: 900px; }
body.cornhole .btn { font-size: 30px; padding: 16px 34px; }

/* ONE switch for the scoreboard of every game of this module (admin → General → Marcador en pantalla).
   Timers stay: only names, points and shot counters go away. */
body.hud-off .hud, body.hud-off .duel-board, body.hud-off .bk-panel, body.hud-off .ch-panel, body.hud-off .ch-center,
body.hud-off .bb-hud, body.hud-off .bb-vbar, body.hud-off .bb-ballsbar, body.hud-off .ar-pcard, body.hud-off .ar-center,
body.hud-off .nr-hud, body.hud-off .bw-hud, body.hud-off .bw-board, body.hud-off .pk-hud, body.hud-off .fb-hud { display: none !important; }

/* results without buttons (Configuración global → Sistema): the same game restarts by itself; M = main menu */
body.no-result-btns .results-buttons { display: none !important; }
/* …and only the final score is shown (2 players: names, scores and the winner): no stats, records or countdown text */
body.no-result-btns .results-grid, body.no-result-btns .restart-text, body.no-result-btns .dr-label,
body.no-result-btns .bw-stats, body.no-result-btns .bw-high, body.no-result-btns .pk-high, body.no-result-btns .nr-high,
body.no-result-btns .ar-newhigh, body.no-result-btns .nr-stars, body.no-result-btns .nr-stat:not(.hot) { display: none !important; }
body.no-result-btns .nr-stat.hot { zoom: 2.2; }        /* the only box left: big */

/* no player names in the scoreboards, 1 or 2 players (admin → General → Marcador en pantalla): color and side tell them apart */
body.hud-noname .pk-name, body.hud-noname .bw-pname, body.hud-noname .nr-pname, body.hud-noname .ar-pname,
body.hud-noname .bb-pname, body.hud-noname .bb-vname, body.hud-noname .bk-name, body.hud-noname .bk-jname,
body.hud-noname .ch-name, body.hud-noname .dp-name, body.hud-noname .fb-name { display: none !important; }

/* no points on screen while playing (admin → General → Marcador en pantalla): the score only shows on the final screen.
   Time, balls, arrows, rounds and NEXT stay. */
body.score-off .pk-card, body.score-off .nr-card.player, body.score-off .ar-pcard, body.score-off .bb-pbox, body.score-off .bb-vscore,
body.score-off .bk-box, body.score-off .ch-box, body.score-off .duel-player,
body.score-off .hud-item[data-hud="score"], body.score-off .hud-item[data-hud="hits"], body.score-off .fb-score { display: none !important; }