/* DRIFTFAN race-night public portal. Loaded last on every standalone portal page. */
:root {
    --deg-lime: #baff00;
    --apex-lime: #baff00;
    --apex-purple: #9146ff;
    --apex-black: #070a0f;
    --apex-panel: #0d1219;
    --apex-line: rgba(255,255,255,.11);
    --apex-muted: #8d95a3;
}

body.deg-standalone-body {
    background:
        radial-gradient(circle at 20% 10%, rgba(39,49,63,.2), transparent 32%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0, rgba(255,255,255,.014) 1px, transparent 1px, transparent 5px),
        var(--apex-black);
    color: #f4f5f2;
}

.deg-portal-header {
    min-height: 68px;
    background: rgba(7,10,15,.92);
    border-bottom: 1px solid var(--apex-line);
    backdrop-filter: blur(18px);
}

.deg-portal-wrap { min-height: 68px; width: min(calc(100% - 48px), 1160px); }
.deg-portal-logo { font: italic 950 20px/1 Impact, "Arial Narrow", sans-serif; transform: skew(-4deg); }
.deg-portal-logo span,.deg-portal-footer strong span { color: #baff00 !important; }
.deg-hub,.deg-app { --lime: #baff00 !important; }
.deg-portal-header nav { gap: 30px; }
.deg-portal-header nav a { color: #b6bbc4 !important; font-size: 11px; letter-spacing: .08em; }
.deg-portal-header nav a:hover { color: var(--apex-lime) !important; }
.deg-portal-header .deg-portal-nav-auth {
    border-radius: 0;
    background: var(--apex-purple) !important;
    color: #fff !important;
    padding: 15px 19px !important;
    box-shadow: 0 0 28px rgba(145,70,255,.18);
}

/* 1.8.86: teine, Google-brändiga nupp Twitchi nupu kõrval (vt deg_portal_header()
   includes/portal-v1.php's) -- valge taust, tume tekst, nagu Google'i enda
   sisselogimisnupu juhistes. (Eemaldati samal ajal standalone.css'ist üks vana
   kitsa-ekraani ":after{content:'TWITCH'}" reegel, mis oli juba varem katki --
   theme-look.css laadib hiljem ja kirjutab sama reegli font-size:0 üle, nii et
   päris nupu tekst ja "TWITCH"-i näidistekst kuvati mõlemad korraga dubleeritult;
   sama reegel oleks selle uue Google nupuga näidanud "SISSEGOOGLE".) */
.deg-portal-header .deg-portal-nav-auth-google {
    background: #fff !important;
    color: #3c4043 !important;
    box-shadow: none;
    margin-left: 8px;
}
.deg-portal-header .deg-portal-nav-auth-google:hover { background: #f1f3f4 !important; }

/* 1.8.87: "Seo oma Google konto" -- tavaline, tagasihoidlik nav-link (mitte
   täidetud nupp nagu logi sisse/välja), kuna see on abistav lisatoiming,
   mitte peamine tegevus. */
.deg-portal-header .deg-portal-nav-link-google {
    text-decoration: underline dotted !important;
    text-underline-offset: 3px;
}

/* 1.8.88: "Muuda hüüdnime" -- natiivne <details>/<summary> dropdown otse
   navigatsioonis (vt deg_portal_header() includes/portal-v1.php's), ei vaja
   JS-i. Vorm ise on absoluutpositsioneeritud paneel, mis avaneb allapoole. */
.deg-portal-header .deg-nickname-editor {
    position: relative;
}
.deg-portal-header .deg-nickname-editor > summary {
    list-style: none;
    cursor: pointer;
    color: #b6bbc4;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.deg-portal-header .deg-nickname-editor > summary::-webkit-details-marker { display: none; }
.deg-portal-header .deg-nickname-editor[open] > summary { color: var(--apex-lime); }
.deg-portal-header .deg-nickname-editor .deg-nickname-form {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: var(--apex-panel);
    border: 1px solid var(--apex-line);
    padding: 16px;
    min-width: 240px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.deg-portal-header .deg-nickname-form input[type=text] {
    background: var(--apex-black);
    border: 1px solid var(--apex-line);
    color: #fff;
    padding: 8px 10px;
    font-size: 13px;
}
.deg-portal-header .deg-nickname-form button {
    background: var(--apex-lime);
    color: #080b0f;
    border: 0;
    padding: 8px 10px;
    font-weight: 900;
    cursor: pointer;
}
.deg-portal-header .deg-nickname-form .description {
    color: var(--apex-muted);
    font-size: 10px;
    margin: 0;
    line-height: 1.4;
}
@media (max-width: 800px) {
    .deg-portal-header .deg-nickname-editor .deg-nickname-form {
        position: static;
        margin-top: 8px;
    }
}

.deg-hub { background: transparent !important; }

/* 1.8.93: enne kui assets/portal.js addFeaturedEvent() jõuab käivituda ja
   .deg-hub-head sisu (kicker/h1/p) featured-etapi info vastu vahetada, näitas
   leht korraks üldist tagavaratekste ilma pildi/loenduri/nuppudeta -- see
   nägi külastajale välja nagu vale/katkine leht laaditakse (vt bigbossi
   tagasisidet, "lehe sisu laetakse"). Server lisab .deg-hero-loading klassi
   (vt includes/unified-hub.php) AINULT siis, kui deg_portal_next_event()
   juba teab, et JS kohe midagi asendama hakkab -- kui etappi pole, jääb
   üldine tekst kohe algusest peale nähtavale, ilma laadimisekraanita.
   portal.js eemaldab selle klassi finally-plokis, seega ka JS-vea korral
   ei jää sisu igaveseks peidetuks. */
.deg-hub-head.deg-hero-loading > *:not(.deg-hero-loading-screen) { visibility: hidden; }
.deg-hero-loading-screen { display: none; }
.deg-hub-head.deg-hero-loading .deg-hero-loading-screen {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deg-hero-loading-logo {
    display: block;
    width: min(384px, 74vw);
    overflow: hidden;
    background: #000;
    animation: deg-hero-loading-pulse 1.4s ease-in-out infinite;
}
.deg-hero-loading-logo img { display: block; width: 100%; height: auto; }
@keyframes deg-hero-loading-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.deg-hub-head.deg-featured-event {
    width: 100%;
    min-height: 626px !important;
    padding: 68px max(24px, calc((100vw - 1160px)/2)) 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: transparent !important;
}

.deg-hub-head.deg-featured-event::before {
    width: 52%;
    height: 100%;
    right: 0;
    top: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(186,255,0,.08), transparent 42%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 6px),
        #0a0f14;
    border-left: 1px solid rgba(255,255,255,.06);
}

/* 1.8.79: sakiriba kahe (või enama) ajaliselt kattuva sündmuse vahel
   valimiseks (nt Drift Masters + kohalik "Summer Bash" samadel kuupäevadel --
   kasutaja valis selgelt "Näita mõlemat hero's korraga"). Renderdatakse
   assets/portal.js addFeaturedEvent()'is AINULT siis, kui events.length > 1,
   seega tavajuhul (üks featured sündmus) seda plokki DOM-is ei teki.
   1.8.95/96: kaks eelmist katset (riba grid'i eraldi reana ÜLEVAL üle mõlema
   veeru; seejärel riba AINULT pildi-veeru sees) osutusid bigbossile ikka
   valeks -- soovitud tulemus (vt kolmandat tagasisidet, joonisega): riba
   peab ulatuma TÄISLAIUSES (tekstiveeru algusest pildi lõpuni, nagu
   algselt), aga PEAB olema täpselt SAMAL KÕRGUSEL mis pildi ülemine serv,
   ilma et ta kumbagi veergu allapoole lükkaks. See saavutatakse riba
   grid'ist väljavõtmisega (position:absolute, mitte grid-row/column) --
   nii ei reserveeri riba grid'is enda rida, tekstiveerg ja pilt jäävad
   täpselt sinna, kuhu nad ilma ribata jääksidki (mõlemad rea 1 algusesse),
   ning riba lihtsalt "hõljub" nende PEAL, samal joonel, servast servani.
   Kontrollitud otse driftfan.com's (Chrome'i JS-i kaudu mõõdetud rects):
   riba ja pildi top on täpselt sama väärtus. Mobiilis (900px breakpoint,
   kus grid muutub üheveeruliseks) taastatakse tavaline voo-sisene
   täislaiuses riba, vt allpool olevat meediapäringut. */
.deg-featured-tabs {
    position: absolute;
    top: 83px; /* 1.8.98: 68px (pildi/teksti ülemine serv) + 15px allapoole, bigbossi soovil */
    left: max(24px, calc((100vw - 1160px)/2));
    right: max(24px, calc((100vw - 1160px)/2));
    grid-column: unset;
    align-self: unset;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}
.deg-featured-tab { border: 1px solid var(--apex-line); border-radius: 999px; background: rgba(255,255,255,.03); color: #9aa2ae; font: 900 10px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.deg-featured-tab:hover { border-color: var(--apex-lime); color: #d7dee6; }
.deg-featured-tab.is-active { background: var(--apex-lime); border-color: var(--apex-lime); color: #080b0f; }

.deg-featured-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 558px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px clamp(30px, 5vw, 76px) 54px 0;
}

.deg-live-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--apex-lime);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .15em;
}
.deg-live-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #ff3154; box-shadow: 0 0 18px #ff3154; }
.deg-featured-copy h1 { margin: 28px 0 22px !important; font: 950 clamp(33px, 3.8vw, 56px)/.74 Impact, "Arial Narrow", sans-serif !important; letter-spacing: -.045em !important; }
.deg-featured-copy h1 span,.deg-featured-copy h1 em { display: block; }
.deg-featured-copy h1 em { color: var(--apex-lime) !important; font-style: italic !important; -webkit-text-stroke: 0 !important; }
.deg-featured-lead { max-width: 510px !important; margin: 0 !important; color: #a8aeb8 !important; font-size: 15px !important; line-height: 1.7 !important; }
.deg-featured-classes { margin: 18px 0 0; gap: 6px; }
.deg-featured-classes b { border: 1px solid #2b333e; border-radius: 0; padding: 6px 8px; color: #9ba3af; font-size: 9px; background: rgba(255,255,255,.02); }
.deg-featured-actions { display: flex; align-items: center; gap: 25px; margin-top: 25px; }
.deg-featured-cta { margin: 0; min-width: 185px; justify-content: space-between; border-radius: 0; padding: 17px 23px; background: var(--apex-lime); color: #080b0f !important; }
.deg-featured-secondary { color: #b6bbc4 !important; text-decoration: none !important; font-size: 10px; font-weight: 950; letter-spacing: .06em; }
.deg-featured-secondary:hover { color: var(--apex-lime) !important; }
/* 1.8.92: "VAATA ÜLEKANNET" -- eraldi "Otseülekande link" (vt event.stream_url,
   assets/portal.js), sama tekstistiil mis .deg-featured-secondary kõrval, aga
   oma klassiga, et see oleks CSS-i poolelt selgelt eraldi asi (nt kui
   tulevikus soovitakse erinevat värvi/ikooni). */
.deg-featured-stream { color: #b6bbc4 !important; text-decoration: none !important; font-size: 10px; font-weight: 950; letter-spacing: .06em; }
.deg-featured-stream:hover { color: var(--apex-lime) !important; }
.deg-featured-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-top: 46px; max-width: 500px; }
.deg-featured-meta div { display: flex; flex-direction: column; gap: 5px; }
.deg-featured-meta small { color: #656e7b; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
/* 1.8.101: sama Impact-fallback loetavuse probleem (vt 1.8.100 kommentaar
   allpool "KALENDER JA TULEMUSED" juures) mõjutas ka "Järgmine etapp" plokki
   avalehe hero all -- etapi nimi ("DRIFT MASTERS - ROUND 6"), kuupäev ja
   auhind olid kõik moonutatud. Sama Anton-fiks. */
.deg-featured-meta strong { color: #fff; font: 900 19px/1.1 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
.deg-featured-meta span { color: #7f8793; font-size: 10px; }
.deg-lock-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 2px; padding: 5px 11px; border-radius: 999px; font-size: 11px !important; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.deg-lock-pill i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.deg-featured-meta .deg-lock-pill.is-locked { background: rgba(255,62,85,.16); color: #ff5468 !important; }
.deg-featured-meta .deg-lock-pill.is-locked i { background: #ff5468; box-shadow: 0 0 8px rgba(255,84,104,.7); }
.deg-featured-meta .deg-lock-pill.is-open { background: rgba(186,255,0,.14); color: var(--apex-lime) !important; }
.deg-featured-meta .deg-lock-pill.is-open i { background: var(--apex-lime); }
.deg-featured-source { margin: 14px 0 0; align-self: flex-start; }

/* 1.8.58: etapi ajakava (deg_portal_next_event_schedule_html(), vt portal-v1.php)
   -- kuvatakse suure hero'i TOIMUMISAEG ploki all, samas veerus. Baasstiil
   tuleb game.css-ist (.deg-event-schedule), siin ainult värvid/laius
   täpsustatud, et see sobiks selle konteksti apex-paletiga. */
.deg-featured-copy > .deg-event-schedule { max-width: 500px; margin-top: 26px; border-top-color: var(--apex-line); }
.deg-featured-copy > .deg-event-schedule summary::after { color: var(--apex-lime); }
.deg-featured-copy > .deg-event-schedule .deg-schedule-row { background: var(--apex-panel); border-left-color: var(--apex-line); }
@media (max-width: 760px) { .deg-featured-copy > .deg-event-schedule { max-width: none; } }

.deg-featured-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 558px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(218,230,239,.3), transparent 58%),
        linear-gradient(145deg, rgba(186,255,0,.08), transparent 46%);
}
.deg-featured-round { position: absolute; z-index: 3; right: 24px; top: 26px; display: flex; align-items: flex-end; gap: 10px; writing-mode: vertical-rl; color: #707986; text-transform: uppercase; }
.deg-featured-round span { font-size: 9px; letter-spacing: .25em; }
.deg-featured-round strong { color: #9aa2ae; font-size: 10px; letter-spacing: .12em; }
.deg-hero-three { position: absolute; right: -35px; top: -75px; color: rgba(186,255,0,.08); font: italic 900 510px/.9 Impact, sans-serif; transform: rotate(-3deg); }
.deg-hero-car { position: absolute; left: 12%; right: -6%; bottom: 86px; height: 170px; transform: skewX(-13deg); filter: drop-shadow(0 24px 20px rgba(0,0,0,.65)); }
.deg-hero-car::before { content: ""; position: absolute; inset: 42px 8% 25px 4%; background: linear-gradient(150deg, var(--apex-lime) 0 15%, #26303a 15% 64%, #10151c 64%); clip-path: polygon(0 65%, 24% 15%, 65% 0, 86% 20%, 100% 72%, 88% 90%, 14% 100%); }
.deg-hero-car::after { content: ""; position: absolute; left: 33%; top: 38px; width: 38%; height: 56px; background: #111820; clip-path: polygon(20% 0, 100% 16%, 82% 100%, 0 100%); border-top: 3px solid rgba(186,255,0,.7); }
.deg-hero-car i,.deg-hero-car b { position: absolute; z-index: 3; bottom: 0; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, #222a33 0 25%, #080b0f 26% 58%, #303945 59% 64%, #090c10 65%); }
.deg-hero-car i { left: 17%; }.deg-hero-car b { right: 14%; }
.deg-hero-car span { position: absolute; z-index: 4; left: -10%; right: -10%; bottom: -55px; height: 105px; background: radial-gradient(ellipse, rgba(211,221,229,.5), transparent 66%); filter: blur(11px); }

/* Real event photo (from the "Vali oma TOP 3" pildivalija), shown instead of the
   placeholder car+3 illustration whenever the admin has attached one. */
.deg-featured-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; cursor: zoom-in; }
.deg-featured-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,15,0) 32%, rgba(7,10,15,.58) 74%, rgba(7,10,15,.94) 100%), linear-gradient(100deg, rgba(7,10,15,.3), transparent 42%); }
/* 1.8.91: "suumi" ikoon, mis annab märku, et pilti saab klõpsates suurelt
   avada (vt portal.js openPhotoLightbox()) -- vasakus ülanurgas, sest
   parem ülanurk on juba .deg-featured-round pöördtekstile reserveeritud. */
.deg-featured-photo::before { content: '⤢'; position: absolute; z-index: 2; top: 14px; left: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(6,9,13,.6); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 16px; line-height: 1; opacity: .85; transition: opacity .15s, background .15s; }
.deg-featured-photo:hover::before,.deg-featured-photo:focus-visible::before { background: rgba(6,9,13,.85); opacity: 1; }

/* 1.8.91: bigboss'ile ei meeldinud tühi ala pildiploki kohal/kõrval, kui
   avalehele on reaalne etapifoto valitud -- see tühimik oli
   .deg-hub-head.deg-featured-event::before dekoratiivne taustapaneel
   (mõeldud allpool oleva auto+3 PLACEHOLDER-illustratsiooni taustaks),
   mis ulatub ÜLE KOGU päise kõrguse (sh "sakiriba" 48px rea, kuhu
   .deg-featured-visual/.deg-featured-photo ise ei ulatu, sest need on ainult
   2. reas) -- nähtavale jäi tühi tekstuurne paneeliriba täpselt pildi kohale.
   Kui portal.js on tuvastanud päris pildi (event.image) ja lisanud
   .has-event-photo klassi, peidame selle taustapaneeli täielikult, sest foto
   ise katab juba kogu visuaali -- paneeli polegi enam vaja. Illustratsiooni-
   režiimis (pilti pole valitud) jääb paneel muutumatult alles. */
.deg-hub-head.deg-featured-event.has-event-photo::before { display: none; }

/* 1.8.91: pildi lightbox (avaneb .deg-featured-photo klõpsul, vt portal.js) --
   lihtne täisekraani overlay, suletakse kas X-nupust, tausta klõpsust või
   Escape'iga (vt document keydown kuular). */
.deg-photo-lightbox { position: fixed; z-index: 100000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(5,7,11,.94); cursor: zoom-out; }
.deg-photo-lightbox img { max-width: 100%; max-height: 92vh; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(255,255,255,.12); cursor: default; }
.deg-photo-lightbox-close { position: absolute; top: 18px; right: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.deg-photo-lightbox-close:hover { background: rgba(255,255,255,.16); }
@media (max-width: 600px) { .deg-photo-lightbox { padding: 12vh 4vw; } }

/* 1.12.25: timer viidi plakati VASAKUSSE serva (kasutaja soov) -- varem
   venis "left: 28px; right: 28px" üle kogu plakati laiuse, mis nägi välja
   nagu paremale/keskele kiilutud riba. left+width (right jäetakse "auto")
   paneb browseri CSS 10.3.7 reegli järgi loenduri kindlalt plakati
   vasakusse serva, ilma et peaks iga breakpointi eraldi üle kirjutama. */
.deg-featured-timer { position: absolute; z-index: 5; left: 28px; right: auto; width: min(320px, calc(100% - 56px)); bottom: 24px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 0; background: rgba(6,9,13,.7); backdrop-filter: blur(12px); }
.deg-featured-timer > .deg-kicker { display: none; }
.deg-timer-grid { grid-template-columns: repeat(4, 1fr); margin: 0; border: 0; }
.deg-timer-grid div { min-height: 50px; padding: 7px 12px; border: 0; border-right: 1px solid rgba(255,255,255,.09); }
.deg-timer-grid div:last-child { border-right: 0; }
.deg-timer-grid strong { font: 900 27px/1 Impact, sans-serif; color: #fff; }
.deg-timer-grid small { margin-top: 5px; color: #68717d; font-size: 7px; letter-spacing: .14em; }

/* 1.12.25: riba kandis varem oma eraldi ".deg-strip-kicker" + kompaktset
   loendurit paralleelselt plakati loenduriga -- kasutaja jaoks "topelt
   timer". See loendur on portal.js's-st eemaldatud, riba HTML on nüüd
   lihtsalt <span class="deg-strip-status"> (lukustusseis) + <span
   class="deg-strip-name"> (etapi nimi), seega flex asendab varasema
   5-veerulise (loendur/täpp/silt/täpp/nimi) grid'i. */
.deg-live-strip { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px max(24px, calc((100vw - 1160px)/2)); background: var(--apex-lime); color: #080b0f; font: 900 clamp(12px,.82vw,15px)/1.25 Arial,sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.deg-live-strip .deg-strip-status { display: flex; align-items: center; gap: 10px; }
.deg-live-strip .deg-strip-name { text-align: right; }
.deg-live-strip i { width: 4px; height: 4px; border-radius: 50%; background: #080b0f; flex: 0 0 auto; }
.deg-live-strip .deg-lock-pill { margin: 0 auto; padding: 4px 12px; border-radius: 999px; font-size: 12px !important; }
.deg-live-strip .deg-lock-pill.is-locked { background: #080b0f; color: #ff5468 !important; }
.deg-live-strip .deg-lock-pill.is-locked i { width: 6px; height: 6px; background: #ff5468; box-shadow: 0 0 6px rgba(255,84,104,.8); }
/* 1.8.84: kasutaja ei tahtnud "QUALI VÕITJA AVATUD" ümber seda tumedat
   ümmargust silti/täppi -- soovis, et see näeks välja täpselt sama (lihtne,
   ilma taustata) font, mis nt "DRIFT MASTERS - ROUND 6" samas ribas. LUKUS
   ("is-locked" ülal) jääb endiselt selgelt esiletõstetuks (must taust +
   punane), sest see on hoiatuslikku laadi info -- ainult AVATUD (rahulik/
   tavaline seis) muudeti lihtsaks tekstiks, ilma sildi-taustata ja täpita. */
.deg-live-strip .deg-lock-pill.is-open { background: transparent; padding: 0; border-radius: 0; color: #080b0f; }
.deg-live-strip .deg-lock-pill.is-open i { display: none; }

/* 1.8.79: mitme-sakilises hero's ei ole teiste (mitte-laetud) sakkide
   ennustuse lukustusseis teada -- vt isFormLoadedFor() assets/portal.js's.
   Nende jaoks näidatakse seda neutraalset, ilma lukusildita riba-varianti,
   mitte eksitavat "AVATUD"/"LUKUS" silti. */
.deg-live-strip.deg-live-strip-neutral { background: #0d1219; color: #d7dee6; }
.deg-live-strip.deg-live-strip-neutral i { background: #d7dee6; }

/* The main hero already carries the event identity; take users straight to the picks. */
.deg-selected-game > .deg-app > .deg-hero { display: none !important; }
/* ...EXCEPT the meistrivõistluse-sildi koondvaade (nt "Eesti Karikavõistlused
   STREET"), mis avaneb portaalis läbi ?voistlus= lingi (vt deg_hub_series_url()
   failis includes/unified-hub.php). Selle enda hero on ISE identiteet -- ülemine
   featured hero portaali tipus näitab hoopis midagi MUUD (jooksvat/järgmist
   featured etappi), mistõttu ülal olev kommentaar ("main hero already carries
   the event identity") ei kehti siin: kui see hero peidetakse, kaob lehelt
   ainsana pealkiri/kirjeldus, mis ütleks külastajale, MILLIST meistrivõistlust
   ta üldse vaatab, ning hooaja punktiseis ja etapikalender ilmuksid ilma igasuguse
   kontekstita. */
.deg-selected-game > .deg-app.deg-championship-page > .deg-hero { display: grid !important; }
.deg-selected-game { scroll-margin-top: 68px; border-top: 0; }
.deg-selected-game .deg-game { position: relative; padding-top: 70px; padding-bottom: 84px; background: transparent; }
.deg-app .deg-pick,.deg-league-card,.deg-app .deg-match,.deg-round-result,.deg-global-table,.dmg-standings,.deg-event-archive { border-radius: 0 !important; }
.deg-app .deg-pick { background: linear-gradient(145deg,#111720,#0c1016) !important; }
.deg-app .deg-pick:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.deg-submit { border-radius: 0 !important; min-width: 210px; }

.deg-prize-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,1fr); gap: 72px; align-items: center; padding: 92px max(24px,calc((100vw - 1160px)/2)); background: var(--apex-lime); color: #080b0f; }
.deg-prize-feature .deg-kicker { color: #26300b !important; }
/* 1.12.41: sama 1.8.100 Impact-fallback loetavuse probleem (vt allpool
   "KALENDER JA TULEMUSED" juures olevat pikemat kommentaari) mõjutas ka
   Auhindade plokki -- "AUHINNAD, MIS VÄÄRIVAD RISKI." pealkiri ja
   auhinnakaartide tekst olid moonutatud/topelt-nägemuse-efektiga, kuna
   Impact on süsteemifont, mida enamikel seadmetel pole, ja brauser lisas
   sellele veel omalt poolt (vale) kaldkirja. Sama Anton-fiks. */
.deg-prize-copy h2 { margin: 14px 0 24px; color: #080b0f; font: 900 clamp(34px,4.2vw,55px)/.88 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; letter-spacing: -.025em; text-transform: uppercase; }
.deg-prize-copy p { max-width: 520px; margin: 0; color: #20270e; font-size: 15px; line-height: 1.7; }
.deg-prize-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: stretch; }
.deg-prize-cards article { min-height: 238px; display: flex; flex-direction: column; padding: 28px; background: #090d12; color: #fff; border: 1px solid rgba(9,13,18,.9); }
.deg-prize-cards b { color: var(--apex-lime); font: 900 62px/.9 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; }
.deg-prize-cards strong { margin-top: auto; color: #fff; font: 900 clamp(22px,2.4vw,34px)/1 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; overflow-wrap: anywhere; text-transform: uppercase; }
.deg-prize-cards small { margin-top: 10px; color: #828a96; font-size: 11px; line-height: 1.45; }
.deg-portal-footer { display: flex; align-items: center; gap: 34px; }
.deg-portal-disclaimer { max-width: 560px; margin: 0 auto; color: #747d89; font-size: 11px; line-height: 1.5; text-align: center; }

/* 1.8.89: "Sa võitsid, sisesta kontaktandmed" teavitus (vt
   deg_render_prize_contact_notice() includes/prize-winners.php's) --
   ilmub AINULT sisse logitud mängijale, kellel on ootel auhinnavõit, otse
   portaali esilehe päisel. Kasutab sama silmatorkavat lime-tausta stiili
   mis .deg-prize-feature ülal, et see kunagi ei jääks tähelepanuta. */
.deg-prize-contact-notice { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,420px); gap: 40px; align-items: start; padding: 48px max(24px,calc((100vw - 1160px)/2)); background: var(--apex-lime,#c8ff18); color: #080b0f; }
.deg-prize-contact-notice + .deg-prize-contact-notice { margin-top: 4px; }
.deg-prize-contact-copy h2 { margin: 10px 0 14px; color: #080b0f; font: 900 clamp(24px,3vw,38px)/.95 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; letter-spacing: -.02em; text-transform: uppercase; }
.deg-prize-contact-copy .deg-kicker { color: #26300b !important; }
.deg-prize-contact-copy p { max-width: 480px; margin: 0; color: #20270e; font-size: 14px; line-height: 1.6; }
.deg-prize-contact-form { display: flex; flex-direction: column; gap: 10px; background: #090d12; padding: 22px; border: 1px solid rgba(9,13,18,.9); }
.deg-prize-contact-form label { display: flex; flex-direction: column; gap: 6px; color: #b7bec9; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.deg-prize-contact-form input { padding: 12px 14px; background: #12161d; border: 1px solid #2c313b; color: #f7f7f2; font-size: 14px; font-weight: normal; text-transform: none; letter-spacing: normal; }
.deg-prize-contact-form input:focus { outline: none; border-color: var(--apex-lime,#c8ff18); }
.deg-prize-contact-form button { margin-top: 6px; padding: 14px; background: var(--apex-lime,#c8ff18); color: #080b0f; border: 0; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.deg-prize-contact-form button:hover { filter: brightness(1.08); }
@media(max-width:800px) { .deg-prize-contact-notice { grid-template-columns: 1fr; padding: 34px 20px; gap: 24px; } }

.deg-league-groups { padding-top: 78px; background: rgba(4,7,11,.35); }
.deg-league-groups::before { content: "KALENDER JA TULEMUSED"; display: block; margin-bottom: 28px; color: #fff; font: 900 clamp(34px,5vw,62px)/1 Impact,"Arial Narrow",sans-serif; letter-spacing: -.02em; }
.deg-event-choice { padding: 0 0 28px; background: transparent; border: 0; border-bottom: 1px solid var(--apex-line); }
/* 1.8.100: "Impact" (italic) polnud raskesti loetav mitte lihtsalt kaldkirja
   pärast -- see on süsteemifont, mida iOS/Android/Linuxis üldjuhul ei ole,
   nii et brauser asendas selle mõne muu fondiga ja lisas siis ISE
   (moonutatud/"vale") kaldkirja peale, tekitades bigbossi kirjeldatud
   "raske lugeda" kogemuse. "Anton" (Google Fonts, laetud allpool
   includes/portal-v1.php's) on samaväärselt paks/löökiv pealkirjafont, aga
   PÄRIS font (mitte süsteemseasendus) ja ilma kaldkirjata, seega loetav
   kõikjal ühtemoodi. Valitud kolme visuaalse variandi vahelt (vt bigbossi
   kinnitust). Impact jääb tagavarafondiks nende harvade juhtude jaoks, kui
   Google Fonts ei laadi (nt võrguprobleem). */
.deg-event-choice-head h2,.deg-league-group > h2 { font-family: 'Anton', Impact, "Arial Narrow", sans-serif !important; font-style: normal; text-transform: uppercase; }
.deg-league-card { background: #0c1118 !important; border: 1px solid var(--apex-line) !important; border-top: 3px solid #222a34 !important; }
.deg-league-card:hover,.deg-league-card.is-active { border-top-color: var(--apex-lime) !important; transform: translateY(-4px); }
.deg-calendar-stage-group { margin: 0 0 88px; }
.deg-calendar-stage-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 28px; margin: 0 0 34px; padding: 0 0 18px; border-bottom: 1px solid var(--apex-line); }
.deg-calendar-stage-head .deg-kicker { grid-column: 1/-1; color: var(--apex-lime); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
/* 1.12.41: sama 1.8.100 Impact-fallback loetavuse probleem -- see mõjutas ka
   Kalender lehe etapigruppide pealkirju ("TULEVASED ETAPID" / "TOIMUNUD
   ETAPID"), mida kasutaja otseselt "pekkis"/loetamatuks nimetas. Sama
   Anton-fiks mis 1.8.100/1.8.101-s. */
.deg-calendar-stage-head h2 { margin: 0; color: #fff; font: 900 clamp(21px,2.8vw,35px)/1 'Anton', Impact, "Arial Narrow", sans-serif; font-style: normal; letter-spacing: .01em; text-transform: uppercase; }
.deg-calendar-stage-head p { margin: 0 0 4px; color: var(--apex-muted); font-size: 13px; }
.deg-calendar-stage-group.is-past { padding-top: 12px; }
.deg-calendar-stage-group.is-past .deg-event-choice { opacity: .82; transition: opacity .2s ease; }
.deg-calendar-stage-group.is-past .deg-event-choice:hover { opacity: 1; }
.deg-calendar-stage-group.is-past .deg-league-card { background: #080c11 !important; }
body.deg-theme-light .deg-calendar-stage-head h2 { color: #101318; }
body.deg-theme-light .deg-calendar-stage-head .deg-kicker { color: #101318; text-shadow: 3px 3px 0 rgba(186,255,0,.48); }

body.deg-theme-light .deg-hub-head.deg-featured-event,
body.deg-theme-light .deg-featured-visual { background-color: #eef1ea !important; }
body.deg-theme-light .deg-hub-head.deg-featured-event::before { background: linear-gradient(135deg,rgba(151,205,0,.2),transparent 48%),#e7ebe2; }
body.deg-theme-light .deg-featured-copy h1 span,
body.deg-theme-light .deg-featured-meta strong { color: #101318 !important; }
body.deg-theme-light .deg-featured-copy h1 em { color: #537400 !important; }
body.deg-theme-light .deg-featured-lead { color: #525a65 !important; }
body.deg-theme-light .deg-featured-timer { background: rgba(255,255,255,.78); }
body.deg-theme-light .deg-timer-grid strong { color: #101318; }

@media (max-width: 900px) {
    .deg-portal-header nav { gap: 14px; }
    .deg-hub-head.deg-featured-event { grid-template-columns: 1fr; padding-top: 68px !important; }
    .deg-hub-head.deg-featured-event::before { width: 100%; height: 44%; top: auto; bottom: 0; }
    /* 1.8.96: desktopis on sakiriba position:absolute üleval-hõljuv riba (vt
       ülal), aga ühe-veerulises mobiilivaates pole enam kahte veergu, mille
       kohal ta "hõljuda" saaks -- taastame tavalise voo-sisese täislaiuses
       riba, ENNE teksti ja pilti (DOM-järjekord on riba -> tekst -> pilt). */
    .deg-featured-tabs { position: static; grid-column: 1; margin-bottom: 0; margin-top: 10px; padding-bottom: 18px; }
    .deg-featured-copy { min-height: 520px; padding-right: 0; }
    .deg-featured-visual { min-height: 430px; margin-inline: -24px; }
    .deg-featured-meta { max-width: none; }
    .deg-live-strip { flex-wrap: wrap; gap: 8px 18px; }
    .deg-live-strip i { display: none; }
    .deg-live-strip .deg-strip-name { flex: 1 0 100%; text-align: left; }
    .deg-prize-feature { grid-template-columns: 1fr; gap: 42px; }
    /* 1.8.64: kui teame juba serveris, et featured hero tuleb kohe JS-iga
       (portal.js addFeaturedEvent()) täidetud, reserveerime tühjale
       .deg-hub-head'ile ette ligikaudu sama kõrguse, mis tal pärast JS-i
       käivitumist niikuinii on (.deg-featured-copy + .deg-featured-visual
       virnastatuna). Ilma selleta "hüppab" leht CLS-i tekitades, kui hero
       DOMContentLoaded järel äkki 500px+ kõrgemaks muutub. */
    body.deg-has-next-event .deg-hub-head:not(.deg-featured-event) { min-height: 1010px; }
}

@media (max-width: 600px) {
    .deg-portal-wrap { width: calc(100% - 28px); }
    .deg-hub-head.deg-featured-event { min-height: 0 !important; padding-inline: 16px !important; }
    .deg-featured-copy { min-height: 520px; padding: 42px 0; }
    .deg-featured-copy h1 { font-size: clamp(31px,9.5vw,39px) !important; }
    .deg-featured-actions { width: 100%; max-width: 100%; align-items: stretch; flex-direction: column; gap: 15px; }
    .deg-featured-cta { width: 100%; max-width: 100%; }.deg-featured-secondary,.deg-featured-stream { padding: 8px 0; }
    .deg-featured-meta { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
    .deg-featured-visual { min-height: 350px; }.deg-hero-three { font-size: 380px; right: -45px; }
    .deg-hero-car { left: 0; right: -18%; bottom: 80px; transform: scale(.82) skewX(-13deg); }
    .deg-featured-timer { left: 14px; right: 14px; bottom: 14px; }
    .deg-timer-grid div { padding-inline: 6px; }.deg-timer-grid strong { font-size: 23px; }
    .deg-live-strip { min-height: 64px; padding: 14px 16px; font-size: 11px; line-height: 1.35; }
    .deg-selected-game .deg-game { padding-top: 62px; }
    .deg-calendar-stage-group { margin-bottom: 64px; }
    .deg-calendar-stage-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; }
    .deg-calendar-stage-head p { margin: 0; }
    .deg-prize-feature { padding: 68px 20px; }
    .deg-prize-cards { grid-template-columns: 1fr; }
    .deg-prize-cards article { min-height: 200px; }
    .deg-portal-footer { align-items: flex-start; flex-direction: column; }
    .deg-portal-disclaimer { margin: 0; text-align: left; }
    /* 1.8.64: vt kommentaari 900px bloki juures -- sama CLS-vältimise reserv,
       kitsama ekraani väärtustega. */
    body.deg-has-next-event .deg-hub-head:not(.deg-featured-event) { min-height: 880px; }
}

/* 1.8.30: ennustusmängu enda plokid (Top 3, QUALI VÕITJA, tandemipuu, hooaja
   kalender, punktiseisud, LIVE QUAL jne) said kunagi ammu oma külgmise ruumi
   game.css failist ühe lihtsa "6vw/7vw" valemiga, mis LIHTSALT SKALEERUB
   akna laiusega, ilma ülemise piirita. Portaal ise on vahepeal (assets/
   theme-look.css ja käesolev fail) liikunud kindla 1160px sisujoone peale,
   mis on keskele joondatud ja mida päis (.deg-portal-wrap), hero
   (.deg-hub-head.deg-featured-event) ja live-riba juba kasutavad. Neid kahte
   valemit ei uuendatud kunagi kokku, mistõttu laial ekraanil nägid hero/
   päis/live-riba ühel joonel välja, aga mängu enda plokid hoopis palju
   kitsama külgmise ruumiga (nö "täislaiuses") teisel. See fail laetakse
   portaalis KÕIGE VIIMASENA (vt includes/portal-v1.php wp_enqueue_style
   ahel), seega need reeglid võidavad ilma !important'ita. Muid, juba
   1160px joonele üle viidud plokke (.deg-hub-head, .deg-league-groups,
   .deg-pred-global, .deg-portal-footer, .deg-info-page, .deg-hub-prompt) SIIN
   EI PUUDUTATA, sest need saavad oma õige joonduse juba assets/theme-look.css
   --deg-max muutujast (parandatud 1180px->1160px) -- lisareegel siin looks
   need vaid kahekordselt nihutaks. Kehtib ainult laiematel ekraanidel
   (>900px) -- mobiilivaate juba eraldi häälestatud külgmised vahed (game.css
   enda meediapäringud) jäävad täiesti puutumata. */
@media (min-width: 901px) {
    /* .deg-standings ja .deg-nations on TEADLIKULT siin nimekirjas VÄLJAS --
       need kaks renderduvad ALATI .deg-official-data kaardi ("DRIFT MASTERSI
       AMETLIK HOOAJA SEIS") sees, mitte kunagi omaette täislaiuses plokina
       (vt drifti-ennustusmang.php deg_shortcode() ja includes/
       driftmasters-dmgp-import.php). Kaart ise saab oma 1160px joonduse
       allpool margin'i kaudu; kui paneksime SAMA 700px padding'u ka kaardi
       SEES olevatele lastele, nihkuks sisu topelt (kaardi enda serva VÕRRA
       + veel kord 700px selle sees), mis oligi täpselt see viga, mille
       kasutaja tagasi teatas. */
    .deg-hero, .deg-game, .deg-bracket,
    .deg-season,
    .deg-live,
    .deg-live-quali,
    .deg-pred-standings,
    .deg-round-history,
    .deg-event-archives,
    .deg-local-live-quals,
    .deg-fl,
    .deg-qual-pick,
    .deg-championship-events,
    /* 1.8.75: need neli said kunagi ainult game.css oma vana "6vw" valemi
       (nägid avaral ekraanil liiga laiad/valel joonel välja, kasutaja
       raporteeris "MINA VS SÕBRAD", "DRIFTFAN VIIMASED UUDISED", "Lisaennustus
       QUALI VÕITJA" ja "LIVE kvalifikatsiooni tulemused" ning "Practice
       ülekande" plokke). Kõik neli renderduvad omaette täislaiuses plokkidena
       (mitte kellegi teise juba joondatud sisu SEES), seega on turvaline neid
       siia nimekirja lisada täpselt sama moodi nagu ülejäänud read. */
    .deg-practice-live-head,
    .deg-auto-live-head,
    .deg-fl-teaser,
    .deg-news-teaser,
    .deg-qual-pick-wrap > summary,
    .deg-live-quali-wrap > summary {
        padding-left: max(24px, calc((100vw - 1160px) / 2));
        padding-right: max(24px, calc((100vw - 1160px) / 2));
    }
    /* "DRIFT MASTERSI AMETLIK HOOAJA SEIS" kaart elab nüüd .deg-season
       (hooaja kalender) SEES, kohe pärast etappide tulemusi -- .deg-season
       on juba ülal nimekirjas ja saab oma 1160px joonduse padding'u kaudu,
       nii et kaart ise ei tohi enam SAMA joondust veelkord margin'iga
       lisada (täpselt sama topelt-nihke viga, mis kunagi .deg-standings/
       .deg-nations'iga juhtus, aga nüüd üks tase kõrgemal). Kaardi enda
       külgmine margin nullitakse, kaart täidab lihtsalt vanema juba õige
       padding'u vahele jääva ruumi; assets/public-controls.css annab
       endiselt 40px üleval/all vahe. */
    .deg-official-data {
        margin-left: 0;
        margin-right: 0;
    }
    .deg-official-data .deg-standings,
    .deg-official-data .deg-nations {
        padding-left: 26px;
        padding-right: 26px;
    }
}