/* ================================================================
   Map page — 1920×1080 canvas, scaled to fit any screen
   PSD values used as-is (px), scaled via JS transform
   ================================================================ */

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/static/fonts/RobotoCondensed-Bold.woff2')    format('woff2'),
         url('/static/fonts/RobotoCondensed-Bold.ttf')      format('truetype');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('/static/fonts/RobotoCondensed-Regular.woff2') format('woff2'),
         url('/static/fonts/RobotoCondensed-Regular.ttf')   format('truetype');
    font-weight: 400; font-display: swap;
}

:root {
    --neon:         #00FF41;
    --neon-dim:     #00cc33;
    --neon-glow:    0 0 8px #00FF41, 0 0 20px #00FF4155;
    --bg:           #080c0a;
    --red:          #cc3344;
    --ticker-h:     34px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-family: 'Roboto Condensed', 'Segoe UI', sans-serif;
}

/* ── ЗАГОЛОВОК ───────────────────────────────────────────────── */
.map-title {
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    text-align: center;
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--neon);
    text-shadow: var(--neon-glow);
    text-transform: uppercase;
    z-index: 20;
    padding-top: 10px;
    pointer-events: none;
}

/* ── MAP WRAPPER ─────────────────────────────────────────────── */
.map-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    transform-origin: top left;
    /* размеры и transform задаются JS */
}

/* ── OVERLAY ЭЛЕМЕНТЫ (QR, реклама) — position:fixed через JS ── */
.overlay-el {
    position: fixed;
    z-index: 50;
    /* left/top/bottom/width/height задаются JS */
}

/* ── ПЕРСОНАЖ — всегда справа, полная высота страницы ───────── */
.character-fixed {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 200;
    pointer-events: none;
}
.character-fixed img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: right top;
}

/* ── QR блоки (внутри canvas-overlay) ───────────────────────── */
.qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}

.qr-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: contain;
    border-radius: 8px;
}
.qr-label {
    font-size: clamp(9px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--neon);
    text-shadow: 0 0 6px var(--neon);
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Рекламный блок */
#ad-block {
    border-radius: 28px;
    background: rgb(50, 50, 50);
    border: 2px solid #444;
}

.ad-block-style {
    border-radius: 28px;
    background-color: rgb(50, 50, 50);
    overflow: hidden;
}

.ad-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2vw, 22px);
    font-weight: 700;
    letter-spacing: 0.35em;
    color: #666;
    text-transform: uppercase;
    pointer-events: none;
}

/* ── ЛЕГЕНДА ─────────────────────────────────────────────────── */
.legend {
    position: fixed;
    bottom: calc(var(--ticker-h) + 8px);
    left: 0; width: 100%;
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 20;
}
.legend-item {
    display: flex; align-items: center; gap: 10px;
    color: #fff;
}
.legend-dot {
    width: 10px; height: 10px;
    border-radius: 3px; border: 1px solid;
    flex-shrink: 0;
}
.dot-free {
    background: #0a1a0d;
    border-color: var(--neon);
    box-shadow: 0 0 6px var(--neon);
    /* анимация убрана для TV performance */
}
.dot-busy { background: #2a1520; border-color: var(--red); }

@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 4px var(--neon); }
    50%       { box-shadow: 0 0 12px var(--neon), 0 0 24px #00FF4144; }
}

/* ── БЕГУЩАЯ СТРОКА ──────────────────────────────────────────── */
.ticker-wrap {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--ticker-h);
    background: #060d08;
    border-top: 1px solid #00FF4125;
    overflow: hidden;
    z-index: 100;
    display: flex; align-items: center;
}
.ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 80s linear infinite;
    font-size: 13px; font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ticker-zone {
    color: var(--neon);
    text-shadow: 0 0 5px var(--neon);
    font-weight: 700;
}
.ticker-text { color: #5a8a65; }
.ticker-sep  { color: var(--neon-dim); margin: 0 16px; font-size: 8px; }

/* ── CLUB SCHEME ─────────────────────────────────────────────── */
.club_scheme {
    --item-height: 44px; --item-width: 44px;
    --field-height: 640px; --field-width: 640px;
    --item-padding-vertical: 4px; --item-padding-horizontal: 4px;
    --default-border-radius: 5px;

    --dark-busy-bg-color:           #1c0a12;
    --dark-busy-text-color:         #cc3355;
    --dark-busy-border-color:       #aa2244;
    --dark-unselected-bg-color:     #0a1a0d;
    --dark-unselected-text-color:   #00FF41;
    --dark-unselected-border-color: #00FF4155;
    --dark-text-color:              #00FF41;
    --dark-block-color:             #00FF41;

    position: relative; overflow: hidden;
    width:  calc(var(--field-width)  * var(--map-scale, 1));
    height: calc(var(--field-height) * var(--map-scale, 1));
}

/* Scanlines */
.club_scheme::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        180deg, transparent, transparent 2px, #00000018 2px, #00000018 4px
    );
    pointer-events: none; z-index: 50;
}

.club_scheme .schema-seat-wrapper { z-index: 2; }

.club_scheme .schema-item-wrapper,
.club_scheme .schema-seat-wrapper {
    padding: calc(var(--item-padding-vertical)   * var(--map-scale, 1))
             calc(var(--item-padding-horizontal) * var(--map-scale, 1));
    position: absolute;
    width:  calc(var(--item-width)  * var(--width,  1) * var(--map-scale, 1));
    height: calc(var(--item-height) * var(--height, 1) * var(--map-scale, 1));
    top:  calc(var(--item-height) * var(--y, 0) * var(--map-scale, 1));
    left: calc(var(--item-width)  * var(--x, 0) * var(--map-scale, 1));
}

.club_scheme .schema-item {
    --color: transparent;
    width: 100%; height: 100%;
    border-radius: calc(var(--default-border-radius) * var(--map-scale, 1));
    position: relative;
}

.club_scheme .schema-item div {
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(var(--default-border-radius) * var(--map-scale, 1));
    border: calc(1px * var(--map-scale, 1)) solid;
    position: relative;
    top: calc(2px * var(--map-scale, 1));
    width: 100%; height: calc(100% - 2px * var(--map-scale, 1));
    font-weight: 700;
    font-size: calc(11px * var(--map-scale, 1));
    line-height: 1; text-align: center; overflow: hidden;
    pointer-events: none;
    transition: background-color .4s, border-color .4s, box-shadow .4s;
}

.club_scheme .schema-item.schema-item-free div {
    border-color: var(--dark-unselected-border-color);
    background-color: var(--dark-unselected-bg-color);
    color: var(--dark-unselected-text-color);
    /* анимация убрана — TV браузеры лагают при 100+ одновременных анимациях */
    box-shadow: 0 0 4px #00FF4155;
}
.club_scheme .schema-item.schema-item-busy div {
    border-color: var(--dark-busy-border-color);
    background-color: var(--dark-busy-bg-color);
    color: var(--dark-busy-text-color);
}
@keyframes seat-pulse {
    0%, 100% { box-shadow: 0 0 2px #00FF4133; }
    50%       { box-shadow: 0 0 7px #00FF4188, 0 0 14px #00FF4133; }
}
.club_scheme .schema-item.schema-item-no-color div { top: 0; height: 100%; }

.club_scheme .schema-block {
    background-color: var(--neon);
    box-shadow: 0 0 4px var(--neon);
    width: 100%; height: 100%;
}

.club_scheme .schema-text {
    top:  calc(var(--item-height) * var(--y, 0) * var(--map-scale, 1));
    left: calc(var(--item-width)  * var(--x, 0) * var(--map-scale, 1));
    display: block; position: absolute;
    white-space: pre-wrap; overflow: hidden; text-align: center;
    font-weight: 700;
    font-size: calc(var(--text-font-size, 15px) * 0.88 * var(--map-scale, 1));
    line-height: 1.25;
    color: var(--neon); text-shadow: 0 0 6px #00FF4188;
    padding: calc(var(--item-padding-vertical)   * var(--map-scale, 1))
             calc(var(--item-padding-horizontal) * var(--map-scale, 1));
    z-index: 3;
}

.club_scheme .schema-admin_panel {
    top:  calc(var(--item-height) * var(--y, 0) * var(--map-scale, 1));
    left: calc(var(--item-width)  * var(--x, 0) * var(--map-scale, 1));
    display: block; position: absolute; white-space: break-spaces;
    text-align: center; font-weight: 400;
    font-size: calc(13px * var(--map-scale, 1));
    line-height: calc(19px * var(--map-scale, 1));
    color: var(--neon);
    padding: calc(var(--item-padding-vertical)   * var(--map-scale, 1))
             calc(var(--item-padding-horizontal) * var(--map-scale, 1));
    padding-top: calc((39px + var(--item-padding-vertical)) * var(--map-scale, 1));
    z-index: 3;
}
.club_scheme .schema-admin_panel::before {
    content: '';
    position: absolute;
    top: calc(var(--item-padding-vertical) * var(--map-scale, 1));
    left: 50%;
    width: calc(24px * var(--map-scale, 1));
    height: calc(24px * var(--map-scale, 1));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300FF41' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E") no-repeat center/contain;
    transform: translateX(-50%);
}