@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --gold: #e9af15;
    --amber: #F5A623;
    --cream: #fff7e8;
    --muted: #b9a98e;
    --red: #ff3131
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: transparent;
    color: var(--cream);
    font-family: Arial, sans-serif
}

.kicker {
    margin: 0;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 20px;
    font-weight: 900
}

.lower-third-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 4px;
    box-sizing: border-box;
}

.lower-third {
    width: 100vw;
    box-sizing: border-box;
    max-height: 65px;
    height: 65px;
    display: grid;
    grid-template-columns: minmax(410px, 1.25fr) minmax(360px, 1fr) minmax(360px, 1fr) 230px;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
    border-top: 2px solid rgba(255, 192, 0, .55);
    border-bottom: 2px solid rgba(255, 192, 0, .55);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(5, 5, 5, .40), rgba(34, 22, 11, .40), rgba(5, 5, 5, .40));
    box-shadow: 0 10px 38px rgba(0, 0, 0, .44), inset 0 0 24px rgba(255, 192, 0, .06);
    overflow: hidden;
}

.lt-slot {
    min-width: 0;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 192, 0, .26);
    border-radius: 13px;
    background: rgba(0, 0, 0, .30);
    color: var(--cream);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-slot { justify-content: flex-start; }

.leader-slot span, .lt-rank-label {
    flex: 0 0 auto;
    color: var(--gold);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leader-slot strong {
    flex: 0 1 auto;
    min-width: 0;
    color: #fff;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 31px;
    line-height: 1;
    letter-spacing: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-slot em {
    flex: 0 0 auto;
    max-width: 230px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-rank { font-size: 24px; line-height: 1; }
.lt-rank .lt-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lt-rank .lt-rank-score { flex: 0 0 auto; color: var(--muted); font-size: 20px; }
.lt-timer { justify-content: center; text-align: center; }
.lt-timer strong, .full-timer strong, .small-timer {
    font-family: "Bebas Neue", Impact, sans-serif;
    color: var(--gold);
    font-size: 43px;
    line-height: 1;
    letter-spacing: 3px;
    font-weight: 400;
}

.podium-page,
.full-page,
.alert-page,
.timer-page {
    display: grid;
    place-items: center;
    padding: 60px
}

.podium-wrap,
.full-board {
    width: 1680px;
    min-height: 850px;
    padding: 42px;
    border: 3px solid rgba(255, 192, 0, .85);
    border-radius: 36px;
    background: radial-gradient(circle at top, rgba(255, 192, 0, .22), transparent 520px), linear-gradient(180deg, rgba(34, 22, 11, .96), rgba(5, 5, 5, .96));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .8)
}

.podium-header,
.full-board header {
    display: grid;
    grid-template-columns: 1fr 1500px;
    align-items: center;
    gap: 20px;
    margin-bottom: 34px
}

.podium-header h1,
.full-board h1 {
    margin: 8px 0 0;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 78px;
    line-height: .9;
    letter-spacing: 3px;
    text-transform: uppercase
}

h1 {
    text-align: center;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 70px;
    font-weight: 500;
}

.podium {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    align-items: end;
    gap: 24px
}

.podium-card {
    min-height: 410px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 34px;
    border-radius: 28px;
    border: 2px solid rgba(255, 192, 0, .5);
    background: rgba(0, 0, 0, .36)
}

.podium-card.first {
    min-height: 520px;
    background: linear-gradient(180deg, rgba(255, 192, 0, .2), rgba(0, 0, 0, .42));
    border-color: rgba(255, 192, 0, .9)
}

.medal {
    font-size: 78px;
    margin-bottom: 16px
}

.podium-card h2 {
    margin: 0;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 70px;
    letter-spacing: 3px
}

.podium-card p {
    margin: 12px 0 0;
    color: var(--gold);
    font-size: 28px;
    font-weight: 900
}

.podium-wrap footer,
.full-board footer {
    margin-top: 30px;
    text-align: center;
    color: var(--muted);
    font-size: 24px;
    font-weight: 900
}

.full-board .val-footer-logo {
    display: block;
    width: 300px;
    max-width: 45%;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    margin: 10px auto 0
}

.leader-alert {
    min-width: 840px;
    padding: 34px 70px;
    text-align: center;
    border: 5px solid white;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 192, 0, .98), rgba(245, 166, 35, .98), rgba(80, 8, 3, .98));
    color: #080808;
    box-shadow: 0 0 48px rgba(255, 192, 0, .9), 0 24px 80px rgba(0, 0, 0, .75);
    animation: alertPop .45s ease-out, alertGlow .8s infinite alternate
}

.leader-alert p,
.leader-alert span {
    margin: 0;
    font-size: 30px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 3px
}

.leader-alert h1 {
    margin: 12px 0 2px;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 98px;
    line-height: .9;
    letter-spacing: 4px
}

.leader-alert h2 {
    margin: 8px 0 16px;
    color: white;
    text-shadow: 0 4px 8px rgba(0, 0, 0, .75);
    font-size: 34px
}

.hidden {
    display: none
}

.full-board {
    width: 1640px
}

.full-board header {
    display: flex;
    justify-content: space-between
}

.full-timer { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:270px }
.full-timer span { display:block;margin-bottom:6px;color:var(--muted);font-size:18px;font-weight:900;letter-spacing:2px;text-transform:uppercase }

.challenge {
    padding: 18px 24px;
    border: 1px solid rgba(255, 192, 0, .3);
    border-radius: 20px;
    background: rgba(0, 0, 0, .3);
    margin-bottom: 22px
}

.challenge span {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900
}

.challenge strong {
    display: block;
    margin-top: 6px;
    font-size: 32px
}

.table {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 192, 0, .28);
    background: rgba(0, 0, 0, .28)
}

#rows { max-height:558px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable }
#rows::-webkit-scrollbar,#seasonRows::-webkit-scrollbar{width:10px}
#rows::-webkit-scrollbar-track,#seasonRows::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
#rows::-webkit-scrollbar-thumb,#seasonRows::-webkit-scrollbar-thumb{background:rgba(199,239,70,.7);border-radius:999px}

.head,
.full-row {
    display: grid;
    grid-template-columns: 150px 1.2fr .9fr .5fr;
    gap: 18px;
    align-items: center
}

.angler-cell,.suite-name{display:flex;align-items:center;min-width:0;gap:14px}
.angler-cell>span:last-child,.suite-name>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.angler-photo,.season-photo{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border:2px solid rgba(199,239,70,.82);border-radius:50%;overflow:hidden;background:#173b2c;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.profile-initials{position:relative;z-index:1;color:#fff;font-family:"Bebas Neue",Impact,sans-serif;font-size:18px;line-height:1;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.profile-avatar img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;background:#173b2c}
.season-photo{width:40px;height:40px}

.podium-photo-slot{display:grid;place-items:center;min-height:118px;margin:0 0 12px}
.podium-photo{position:relative;display:inline-grid;place-items:center;width:112px;height:112px;border:4px solid rgba(199,239,70,.88);border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#285b43,#101512);box-shadow:0 10px 28px rgba(0,0,0,.58),0 0 22px rgba(199,239,70,.2)}
.podium-card.first .podium-photo{width:136px;height:136px;border-color:rgba(220,174,73,.95);box-shadow:0 12px 34px rgba(0,0,0,.62),0 0 28px rgba(220,174,73,.28)}
.podium-photo .profile-initials{font-size:38px}
.podium-card.first .podium-photo .profile-initials{font-size:46px}

.lower-time-up{position:fixed;left:50%;top:50%;z-index:100;padding:28px 70px 20px;border:6px solid #fff;border-radius:24px;background:linear-gradient(135deg,#42dc56,#0fb83a);box-shadow:0 0 0 5px rgba(6,46,18,.9),0 18px 60px rgba(0,0,0,.7),0 0 50px rgba(66,220,86,.85);color:#fff;font-family:"Bebas Neue",Impact,sans-serif;font-size:112px;line-height:1;letter-spacing:7px;text-shadow:0 5px 5px rgba(0,0,0,.85);opacity:0;transform:translate(-50%,-50%) scale(.72);pointer-events:none}
.lower-time-up.visible{opacity:1;transform:translate(-50%,-50%) scale(1);animation:lowerTimeUpPop .45s ease-out,lowerTimeUpPulse .85s ease-in-out .45s infinite alternate}
.audio-arm{position:fixed;right:24px;top:24px;z-index:200;display:none;min-height:46px;padding:0 18px;border:2px solid #fff;border-radius:12px;background:#d44848;color:#fff;font-size:16px;font-weight:900;letter-spacing:1px;box-shadow:0 8px 28px rgba(0,0,0,.7);cursor:pointer}
.audio-arm.visible{display:block}
@keyframes lowerTimeUpPop{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes lowerTimeUpPulse{from{filter:brightness(1)}to{filter:brightness(1.22)}}

.head {
    padding: 16px 24px;
    color: var(--gold);
    background: rgba(255, 192, 0, .15);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900
}

.full-row {
    min-height: 62px;
    padding: 10px 24px;
    border-top: 1px solid rgba(255, 192, 0, .14);
    font-size: 27px
}

.full-row.leader {
    background: linear-gradient(90deg, rgba(255, 192, 0, .25), rgba(245, 166, 35, .06))
}

.full-row em {
    color: var(--gold);
    font-style: normal;
    text-align: right;
    font-weight: 900
}

.empty {
    padding: 80px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 34px;
    font-weight: 900
}

.timer-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 900px;
    min-height: 360px
}

.timer-stage #timer {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 100px;
    letter-spacing: 4px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .75), 0 0 14px rgba(245, 166, 35, .35)
}

#warning {
    position: absolute;
    top: 255px;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 34px;
    letter-spacing: 3px;
    color: var(--amber);
    opacity: 0
}

#timeup {
    position: absolute;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 112px;
    letter-spacing: 6px;
    color: white;
    background: linear-gradient(90deg, rgba(90, 12, 6, .98), rgba(245, 166, 35, .96), rgba(90, 12, 6, .98));
    border: 6px solid rgba(255, 255, 255, .88);
    border-radius: 20px;
    padding: 22px 56px 12px;
    opacity: 0
}

body.five-min #warning {
    opacity: 1;
    animation: goldPulse 1.2s infinite
}

body.final-min #timer {
    color: var(--red);
    animation: redPulse .7s infinite
}

body.time-up #timeup {
    opacity: 1;
    animation: redPulse .7s infinite
}

.five-min .lower-third,
.five-min .podium-wrap,
.five-min .full-board {
    border-color: var(--amber);
    animation: goldPulse 1.2s infinite
}

.final-min .lower-third,
.final-min .podium-wrap,
.final-min .full-board {
    border-color: var(--red);
    animation: redPulse .7s infinite
}

@keyframes goldPulse {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.22)
    }
}

@keyframes redPulse {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.38)
    }
}

@keyframes alertPop {
    from {
        transform: scale(.65);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes alertGlow {
    from {
        filter: brightness(1)
    }

    to {
        filter: brightness(1.28)
    }
}

/* Virtual Angler League visual theme — colors only. */
:root {
    --ink: #101512;
    --forest: #173b2c;
    --lime: #c7ef46;
    --gold: #c7ef46;
    --champion: #dcae49;
    --amber: #a8d52f;
    --cream: #f2ecdf;
    --silver: #d9dedb;
    --muted: #9eaaa1;
}
.lower-third {
    border-color: rgba(199,239,70,.55);
    background: linear-gradient(90deg,rgba(10,18,14,.62),rgba(23,59,44,.58),rgba(10,18,14,.62));
    box-shadow: 0 10px 38px rgba(0,0,0,.44),inset 0 0 24px rgba(199,239,70,.06);
}
.lt-slot{border-color:rgba(199,239,70,.26);background:rgba(7,15,11,.48)}
.podium-wrap,.full-board{
    border-color:rgba(199,239,70,.85);
    background:radial-gradient(circle at top,rgba(199,239,70,.16),transparent 520px),linear-gradient(180deg,rgba(23,59,44,.96),rgba(10,18,14,.98));
}
.podium-card{border-color:rgba(199,239,70,.5);background:rgba(7,15,11,.5)}
.podium-card.first{background:linear-gradient(180deg,rgba(220,174,73,.22),rgba(7,15,11,.54));border-color:rgba(220,174,73,.9)}
.podium-card.first p{color:var(--champion)}
.leader-alert{
    background:linear-gradient(135deg,rgba(199,239,70,.98),rgba(23,59,44,.98),rgba(10,18,14,.98));
    color:#fff;
    text-shadow:0 4px 8px rgba(0,0,0,.78);
    box-shadow:0 0 48px rgba(199,239,70,.72),0 24px 80px rgba(0,0,0,.75);
}
.leader-alert p,.leader-alert h1,.leader-alert h2,.leader-alert span{color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.82)}
.challenge{border-color:rgba(199,239,70,.3);background:rgba(7,15,11,.48)}
.table{border-color:rgba(199,239,70,.28);background:rgba(7,15,11,.46)}
.head{background:rgba(199,239,70,.15)}
.full-row{border-color:rgba(199,239,70,.14)}
.full-row.leader{background:linear-gradient(90deg,rgba(199,239,70,.22),rgba(23,59,44,.08))}
.timer-stage #timer{text-shadow:0 4px 10px rgba(0,0,0,.75),0 0 14px rgba(199,239,70,.35)}

/* Broadcast panels: visual treatment shared with the sidebar leaderboard. */
:root { --gold:#baff00; --amber:#baff00; --cream:#fff; --muted:#c4d1d3; }
.kicker { color:var(--gold); }
.lower-third {
  border-top:4px solid var(--gold); border-bottom:2px solid rgba(186,255,0,.45);
  background:linear-gradient(110deg,rgba(22,35,42,.96),rgba(6,15,20,.94) 65%,rgba(26,43,48,.94));
  box-shadow:0 12px 24px rgba(0,0,0,.65);
}
.lt-slot { border-radius:3px; border-color:rgba(186,255,0,.28); background:rgba(0,0,0,.28); }
.lt-slot, .leader-slot strong, .lt-rank-name { color:#fff; }
.leader-slot em, .lt-rank-score { color:#cbd8d9; }
.podium-wrap,.full-board {
  border:2px solid rgba(186,255,0,.5); border-top:5px solid var(--gold); border-radius:5px;
  background:linear-gradient(110deg,rgba(22,35,42,.96),rgba(6,15,20,.94) 65%,rgba(26,43,48,.94));
  box-shadow:0 18px 60px rgba(0,0,0,.72);
}
.podium-card { border-radius:4px; border-color:rgba(186,255,0,.32); background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(0,0,0,.2)); }
.podium-card.first { border-color:var(--gold); background:linear-gradient(180deg,rgba(186,255,0,.13),rgba(5,15,18,.85)); }
.podium-card p,.podium-card.first p { color:var(--gold); }
.podium-photo,.podium-card.first .podium-photo,.angler-photo,.season-photo { border-color:var(--gold); }
.challenge,.table { border-radius:4px; border-color:rgba(186,255,0,.27); background:rgba(0,0,0,.3); }
.challenge span,.full-timer span { color:#cbd8d9; }
.head { color:#cbd8d9; background:rgba(0,0,0,.35); border-bottom:1px solid rgba(186,255,0,.22); }
.full-row { border-color:rgba(192,223,228,.17); background:linear-gradient(90deg,rgba(255,255,255,.055),transparent 78%); }
.full-row:nth-child(even) { background:rgba(5,12,18,.38); }
.full-row.leader { background:linear-gradient(90deg,var(--gold),#a1f000 72%,#78d638); color:#08110e; }
.full-row.leader em { color:#08110e; }
.full-row.leader .angler-photo { border-color:#102417; }
.full-row em { color:var(--gold); }
.empty { color:#d5e1e2; }
.leader-alert {
  border:2px solid rgba(186,255,0,.6); border-top:6px solid var(--gold); border-radius:5px;
  background:linear-gradient(110deg,rgba(22,35,42,.98),rgba(6,15,20,.98) 65%,rgba(26,43,48,.98));
  color:#fff; box-shadow:0 0 38px rgba(186,255,0,.3),0 20px 55px rgba(0,0,0,.75);
}
.leader-alert p,.leader-alert span { color:var(--gold); text-shadow:0 3px 5px #000; }
.leader-alert h1,.leader-alert h2 { color:#fff; text-shadow:0 3px 6px #000; }
.timer-stage { min-width:800px; min-height:260px; border:2px solid rgba(186,255,0,.5); border-top:5px solid var(--gold); border-radius:5px; background:linear-gradient(110deg,rgba(22,35,42,.96),rgba(6,15,20,.94) 65%,rgba(26,43,48,.94)); box-shadow:0 16px 40px rgba(0,0,0,.7); }
#warning { top:190px; color:var(--gold); }
#timeup { border-color:var(--gold); border-radius:4px; background:linear-gradient(110deg,#16232a,#061016); color:#fff; text-shadow:0 3px 6px #000; }
.lower-time-up { border-color:var(--gold); border-radius:4px; background:linear-gradient(110deg,#16232a,#061016); color:#fff; text-shadow:0 3px 6px #000; }
body.five-min .timer-stage { border-color:var(--amber); }
body.final-min .timer-stage { border-color:var(--red); }