/* ============================================================
   NBA REVOLUTION - SEKMADIENIO TELELOTO
   Stilius suderintas su temos/mexico_style/style.css kintamaisiais
   (--color-primary, --color-gold, --color-surface ir t.t.).
   Visi kintamieji turi fallback reiksmes, jei tema nepakrauta.
   ============================================================ */

.tl-wrap {
    --tl-primary: var(--color-primary, #4f0007);
    --tl-premium: var(--color-premium, #701C32);
    --tl-gold: var(--color-gold, #C9A24A);
    --tl-surface: var(--color-surface, #ececec);
    --tl-surface-alt: var(--color-surface-alt, #e5e5e5);
    --tl-border: var(--color-border, #dddddd);
    --tl-text: var(--color-text, #000000);
    --tl-muted: var(--color-text-muted, #343434);
    --tl-white: var(--color-white, #ffffff);
    --tl-danger: var(--color-danger, #f73e3e);
    --tl-success: var(--color-success, #088a08);
    --tl-radius: var(--radius-md, 6px);

    width: 100%;
    max-width: 1050px;
    margin: 0 auto 24px auto;
    box-sizing: border-box;
    padding: 0 6px;
    color: var(--tl-text);
    font-size: 12px;
}

.tl-wrap * { box-sizing: border-box; }

/* ---------------- HERO ---------------- */
.tl-hero {
    margin: 10px 0 14px 0;
    padding: 18px 14px;
    text-align: center;
    border-radius: var(--tl-radius);
    background: linear-gradient(180deg, var(--tl-primary) 0%, #2b0004 100%);
    border: 2px solid var(--tl-gold);
    box-shadow: var(--shadow-md, 0 2px 6px rgba(0,0,0,.35));
}
.tl-hero-logo {
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 6px;
    color: var(--tl-gold);
    text-shadow: 0 2px 0 #000, 0 0 18px rgba(201, 162, 74, .55);
}
.tl-hero-sub { margin-top: 6px; color: #f3e7c8; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.tl-hero-admin { background: linear-gradient(180deg, #23252b 0%, #101114 100%); }

/* ---------------- KORTELES ---------------- */
.tl-card {
    background: var(--tl-surface);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.tl-card-head {
    padding: 9px 12px;
    background: var(--tl-primary);
    color: var(--tl-white);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.tl-card-body { padding: 12px; }
.tl-grid2 { display: flex; flex-wrap: wrap; gap: 12px; }
.tl-grid2 > * { flex: 1 1 320px; min-width: 0; }

.tl-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px dashed var(--tl-border);
}
.tl-row:last-child { border-bottom: 0; }
.tl-row span { color: var(--tl-muted); }
.tl-row.tl-gold b { color: #8a6b12; font-size: 15px; }

.tl-subhead { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 6px 0; color: var(--tl-primary); }
.tl-hint { color: var(--tl-muted); font-size: 11px; margin-top: 6px; }
.tl-mono { font-family: "Courier New", monospace; letter-spacing: 1px; }
.tl-num { text-align: right; white-space: nowrap; }
.tl-win { color: var(--tl-success); font-weight: 700; }
.tl-empty { padding: 18px; text-align: center; }

.tl-status { padding: 1px 7px; border-radius: 3px; color: #fff; font-size: 11px; }
.tl-status-OPEN { background: var(--tl-success); }
.tl-status-LOCKED { background: #7a6a00; }
.tl-status-DRAWING { background: var(--tl-danger); }
.tl-status-FINISHED { background: #444; }
.tl-status-DRAFT { background: #888; }
.tl-status-CANCELLED { background: #222; }

/* ---------------- MYGTUKAI / ZINUTES ---------------- */
.tl-btn {
    display: inline-block; padding: 8px 16px; border: 1px solid var(--tl-border);
    background: var(--tl-surface-alt); color: var(--tl-text); font-weight: 700; font-size: 12px;
    border-radius: 4px; cursor: pointer; text-decoration: none;
}
.tl-btn:hover { filter: brightness(1.06); }
.tl-btn-gold { background: var(--tl-gold); border-color: #a5802f; color: #1a1200; }
.tl-btn-danger { background: var(--tl-danger); border-color: #a51818; color: #fff; }
.tl-btn-sm { padding: 3px 8px; font-size: 11px; }
.tl-btn[disabled] { opacity: .55; cursor: default; }

.tl-msg { margin: 8px 0; padding: 0; font-weight: 700; }
.tl-msg-ok { padding: 8px 12px; background: #e3f4e3; border: 1px solid var(--tl-success); color: #0a5a0a; border-radius: 4px; }
.tl-msg-err { padding: 8px 12px; background: #fde6e6; border: 1px solid var(--tl-danger); color: #8d1111; border-radius: 4px; }
.tl-warn { padding: 8px 12px; background: #fff6e0; border: 1px solid var(--tl-gold); border-radius: 4px; }

.tl-buy-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.tl-countdown-box { margin-top: 10px; text-align: center; }
.tl-countdown {
    font-family: "Courier New", monospace; font-size: 26px; font-weight: 700;
    color: var(--tl-primary); letter-spacing: 3px;
}

/* ---------------- BILIETU NUORODOS ---------------- */
.tl-ticket-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-ticket-link {
    display: inline-block; padding: 7px 12px; background: var(--tl-white);
    border: 1px dashed var(--tl-primary); border-radius: 4px;
    font-family: "Courier New", monospace; font-weight: 700; color: var(--tl-primary);
    text-decoration: none;
}
.tl-ticket-link:hover { background: var(--tl-gold); color: #1a1200; }

/* ---------------- ZAIDIMO SCENA ---------------- */
.tl-game .tl-card-body { background: radial-gradient(circle at 50% 0%, #3a0208 0%, #170003 70%); color: #fff; }
.tl-stage { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; padding: 10px 0 4px 0; }

.tl-drum { width: 210px; }
.tl-drum-glass {
    position: relative; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.05) 45%, rgba(0,0,0,.4) 100%);
    border: 6px solid var(--tl-gold); overflow: hidden;
    box-shadow: 0 0 22px rgba(201,162,74,.45), inset 0 0 30px rgba(0,0,0,.6);
}
.tl-drum-balls { position: absolute; width: 100%; height: 100%; animation: tl-spin 7s linear infinite; }
.tl-drum.tl-spinning .tl-drum-balls { animation-duration: 1.6s; }
.tl-drum-base {
    width: 120px; height: 14px; margin: 6px auto 0 auto; border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, #6b5216, #2c2109);
}
.tl-mini-ball {
    position: absolute; width: 26px; height: 26px; border-radius: 50%;
    font: 700 11px/26px Arial, sans-serif; text-align: center; color: #fff;
    box-shadow: inset -3px -4px 6px rgba(0,0,0,.45), inset 3px 3px 6px rgba(255,255,255,.35);
}
@keyframes tl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.tl-current { text-align: center; min-width: 220px; }
.tl-current-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tl-gold); margin-bottom: 8px; }
.tl-current-pos { margin-top: 8px; font-size: 12px; color: #e9d9b5; }

.tl-ball {
    display: inline-block; width: 46px; height: 46px; border-radius: 50%;
    font: 700 18px/46px Arial, sans-serif; text-align: center; color: #fff;
    box-shadow: inset -4px -5px 8px rgba(0,0,0,.45), inset 4px 4px 8px rgba(255,255,255,.35);
}
.tl-ball-big { width: 108px; height: 108px; font-size: 44px; line-height: 108px; background: #555; }
.tl-ball-big.tl-drop { animation: tl-drop .75s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tl-drop {
    0% { transform: translateY(-120px) scale(.55); opacity: 0; }
    55% { transform: translateY(14px) scale(1.06); opacity: 1; }
    75% { transform: translateY(-10px) scale(.98); }
    100% { transform: translateY(0) scale(1); }
}

/* Kamuoliuku spalvos pagal intervalus */
.tl-c-m { background: #1e4fd8; }               /* 1-15   melyni  */
.tl-c-j { background: #1b1b1b; }               /* 16-30  juodi   */
.tl-c-r { background: #c81f1f; }               /* 31-45  raudoni */
.tl-c-g { background: #e2b306; color: #1a1200; }/* 46-60 geltoni */
.tl-c-z { background: #12832f; }               /* 61-75  zali    */

.tl-golden-banner {
    display: none; margin-top: 10px; padding: 6px 10px; border-radius: 4px;
    background: linear-gradient(90deg, #6b5216, var(--tl-gold), #6b5216);
    color: #1a1200; font-weight: 900; letter-spacing: 2px;
    animation: tl-pulse 1.1s ease-in-out infinite;
}
.tl-golden-banner.tl-on { display: block; }
@keyframes tl-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.tl-ball-big.tl-golden { background: radial-gradient(circle at 35% 30%, #fff3cf, var(--tl-gold) 60%, #8a6b12); color: #1a1200; box-shadow: 0 0 26px rgba(201,162,74,.85); }

.tl-drawn-wrap { margin-top: 14px; }
.tl-drawn-wrap .tl-subhead { color: var(--tl-gold); }
.tl-drawn { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-drawn .tl-ball { width: 34px; height: 34px; font-size: 14px; line-height: 34px; }
.tl-drawn .tl-ball.tl-new { animation: tl-pop .5s ease-out; }
@keyframes tl-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------------- BILIETAS (senas Teleloto stilius) ---------------- */
.tl-ticket {
    background: #fffdf3; color: #1a1200; border: 2px solid var(--tl-primary);
    border-radius: 6px; padding: 10px; max-width: 320px; margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.tl-ticket-head { text-align: center; border-bottom: 2px solid var(--tl-primary); padding-bottom: 6px; margin-bottom: 8px; }
.tl-ticket-title { font-weight: 900; letter-spacing: 5px; font-size: 20px; color: var(--tl-primary); }
.tl-ticket-meta { font-size: 11px; color: #5a4a2a; }
.tl-ticket-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; }
.tl-ticket-cols span { text-align: center; font-weight: 900; color: var(--tl-primary); }
.tl-ticket-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.tl-cell {
    position: relative; background: #fff; border: 1px solid #c9b98d; border-radius: 3px;
    text-align: center; padding: 7px 0; font-weight: 700; font-size: 14px;
}
.tl-cell.tl-hit { background: var(--tl-gold); color: #1a1200; }
.tl-cell.tl-hit:after {
    content: ""; position: absolute; left: 8%; right: 8%; top: 46%; height: 2px;
    background: var(--tl-primary); transform: rotate(-12deg);
}
.tl-ticket-foot { margin-top: 8px; text-align: center; border-top: 2px solid var(--tl-primary); padding-top: 6px; }
.tl-ticket-foot .tl-label { font-size: 10px; letter-spacing: 2px; color: #5a4a2a; }
.tl-ticket-number { font-family: "Courier New", monospace; font-size: 24px; font-weight: 900; letter-spacing: 6px; color: var(--tl-primary); }

.tl-live-tickets { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.tl-live-tickets .tl-ticket { max-width: 280px; }

/* ---------------- NUMERIO TRAUKIMAS (užima būgno vietą) ---------------- */
.tl-drum-zone { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.tl-stage.tl-numbers-on .tl-drum-zone { display: none; }

.tl-number-draw { display: none; width: 100%; text-align: center; padding: 6px 0 4px 0; }
.tl-stage.tl-numbers-on .tl-number-draw { display: block; animation: tl-fade .6s ease-out; }
@keyframes tl-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tl-number-title {
    font-size: 15px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
    color: var(--tl-gold); margin-bottom: 12px; text-shadow: 0 1px 0 #000;
}
.tl-digits { display: flex; gap: 8px; justify-content: center; }
.tl-digits span {
    width: 58px; height: 78px; border-radius: 6px;
    background: #fffdf3; color: var(--tl-primary); border: 3px solid var(--tl-gold);
    font: 900 42px/78px "Courier New", monospace;
    box-shadow: 0 0 18px rgba(201,162,74,.45);
}
.tl-digits span.tl-rolling { animation: tl-roll .12s linear infinite; }
.tl-digits span.tl-star { color: #8a6b12; }
@keyframes tl-roll { 0% { transform: translateY(-5px); } 50% { transform: translateY(5px); } 100% { transform: translateY(-5px); } }
.tl-number-winner { margin-top: 14px; color: #f6efdd; font-size: 14px; font-weight: 700; line-height: 1.6; }
.tl-number-winner b { color: var(--tl-gold); }
.tl-number-log { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tl-number-log-item {
    background: rgba(255,255,255,.08); border: 1px solid rgba(201,162,74,.45);
    border-radius: 5px; padding: 6px 12px; color: #f6efdd; max-width: 560px; width: 100%;
    animation: tl-fade .4s ease-out;
}
.tl-number-log-item .tl-mono { color: var(--tl-gold); font-weight: 900; font-size: 15px; }

.tl-results { margin-top: 16px; }
.tl-result-block {
    background: rgba(255,255,255,.07); border: 1px solid rgba(201,162,74,.5);
    border-radius: 5px; padding: 8px 10px; margin-bottom: 8px;
}
.tl-result-block h4 { margin: 0 0 4px 0; color: var(--tl-gold); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.tl-result-block div { color: #f6efdd; }

/* ---------------- LENTELES ---------------- */
.tl-table { width: 100%; border-collapse: collapse; background: var(--tl-white); }
.tl-table th { background: var(--tl-primary); color: var(--tl-white); padding: 6px 8px; text-align: left; font-size: 11px; text-transform: uppercase; }
.tl-table td { padding: 5px 8px; border-bottom: 1px solid var(--tl-border); font-size: 12px; }
.tl-table tr:hover td { background: var(--tl-surface-alt); }
.tl-table-scroll { overflow-x: auto; }

.tl-pattern-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-pattern { background: var(--tl-white); border: 1px solid var(--tl-border); border-radius: 4px; padding: 6px 10px; }
.tl-pattern-code { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: 2px; margin-right: 8px; color: var(--tl-primary); }

/* ---------------- ADMIN ---------------- */
.tl-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tl-form-grid label { display: flex; flex-direction: column; font-size: 11px; color: var(--tl-muted); gap: 3px; }
.tl-form-grid input { padding: 6px; border: 1px solid var(--tl-border); border-radius: 3px; font-size: 12px; }
.tl-inline-forms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-inline-forms input { padding: 6px; border: 1px solid var(--tl-border); border-radius: 3px; font-size: 12px; }
.tl-draw-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-pill { padding: 5px 10px; border: 1px solid var(--tl-border); border-radius: 12px; background: var(--tl-white); text-decoration: none; color: var(--tl-text); font-size: 11px; }
.tl-pill-active { background: var(--tl-primary); color: var(--tl-white); border-color: var(--tl-primary); }
.tl-totals { margin-bottom: 8px; }
.tl-seq { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-seq-item { padding: 3px 7px; border-radius: 3px; color: #fff; font-size: 11px; }
.tl-seq-hidden { opacity: .35; }
.tl-add-pattern { margin-top: 8px; }

/* ---------------- MODALAS ---------------- */
.tl-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; right: 0; bottom: 0; }
.tl-modal.tl-on { display: block; }
.tl-modal-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.75); }
.tl-modal-box {
    position: relative; max-width: 380px; margin: 6vh auto; background: var(--tl-surface);
    border: 2px solid var(--tl-gold); border-radius: 8px; padding: 14px;
    max-height: 88vh; overflow-y: auto;
}
.tl-modal-close {
    position: absolute; right: 8px; top: 6px; border: 0; background: none;
    font-size: 24px; line-height: 1; cursor: pointer; color: var(--tl-primary);
}
.tl-modal-wins { margin-top: 10px; }
.tl-modal-wins div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--tl-border); padding: 3px 0; }

/* ---------------- MOBILUS ---------------- */
@media (max-width: 760px) {
    .tl-hero-logo { font-size: 28px; letter-spacing: 4px; }
    .tl-drum-glass { width: 150px; height: 150px; }
    .tl-drum { width: 160px; }
    .tl-ball-big { width: 86px; height: 86px; font-size: 34px; line-height: 86px; }
    .tl-digits span { width: 38px; height: 54px; font-size: 26px; line-height: 54px; }
    .tl-number-title { font-size: 12px; letter-spacing: 2px; }
    .tl-buy-line { flex-direction: column; align-items: stretch; }
    .tl-buy-line .tl-btn { width: 100%; }
    .tl-modal-box { margin: 4vh 8px; max-width: none; }
    .tl-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .tl-form-grid { grid-template-columns: 1fr; }
    .tl-cell { padding: 6px 0; font-size: 13px; }
}