/* HexHunting · Blue Steel · 27 oktober 2026
   Eén huisstijl. Spelkleuren, teamkleuren en Strava-identiteit blijven semantisch. */
:root {
    --bg: #050d24;
    --paneel: #0c1c3b;
    --paneel-rand: #304d75;
    --tekst: #f0f5ff;
    --tekst-zwak: #b4c5dd;
    --oranje: #75c9ff; /* historische naam: algemeen UI-accent, geen hexkleur */
    --blauw: #75c9ff;
    --merk-blauw: #1665e8;
    --merk-blauw-licht: #55dcff;
    --merk-donker: #050d24;
    --merk-rand: rgba(166, 198, 239, .29);
    --merk-zilver: #dce7f7;
    --merk-paneel: linear-gradient(145deg, #142e56 0%, #0b1b3a 60%, #09152f 100%);
    --merk-knop: linear-gradient(165deg, #3384fc 0%, #145cdb 46%, #0640ac 100%);
    --gloed: 0 16px 38px rgba(0, 3, 18, .24), inset 0 1px 0 rgba(233, 244, 255, .12);
    color-scheme: dark;
}
html { background: var(--bg); }
body {
    background: radial-gradient(ellipse at 75% 0, rgba(30, 100, 232, .20), transparent 40rem),
        radial-gradient(ellipse at 0 50%, rgba(20, 79, 154, .08), transparent 35rem), #050d24;
    background-attachment: fixed;
    color: var(--tekst);
    line-height: 1.5;
}
a { color: #89ceff; text-underline-offset: .18em; }
a:hover { color: #d2efff; }
:where(a, button, summary, input, textarea, select):focus-visible {
    outline: 3px solid #6ddcff; outline-offset: 3px;
}
h1 { color: #eef4ff; font-weight: 800; letter-spacing: -.035em; }
h2 { color: #dce7f7; letter-spacing: -.018em; }
:where(.klein-grijs, .tegel-label, .klassement-detail, .feed-tijd) { color: var(--tekst-zwak); }

/* Het schild en het woordmerk zijn echte beeldbestanden van het nieuwe logo. */
.kopbalk {
    gap: .6rem;
    background: linear-gradient(115deg, rgba(17, 40, 78, .97), rgba(5, 13, 36, .97));
    border-bottom: 1px solid var(--merk-rand);
    box-shadow: 0 8px 28px #00051a55, inset 0 1px 0 #cce4ff17;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.kopbalk-naam {
    display: inline-flex; align-items: center; gap: .45rem;
    flex: 0 0 auto; min-height: 44px; min-width: 0;
    background: none; color: #fff; -webkit-text-fill-color: currentColor;
    text-decoration: none;
}
.merk-embleem {
    display: inline-block; width: 44px; height: 47px; flex: 0 0 44px;
    border: 0; border-radius: 0; background-color: transparent;
    background-image: url('/assets/hexhunting-embleem-20261027.png');
    background-size: contain; background-position: center; background-repeat: no-repeat;
    filter: drop-shadow(0 3px 6px #000a); box-shadow: none;
}
.merk-woordbeeld { display: block; width: 158px; height: auto; filter: drop-shadow(0 0 2px rgba(117, 201, 255, .36)); }
.merk-woord { color: var(--merk-zilver); white-space: nowrap; font-weight: 800; letter-spacing: -.04em; }
.merk-woord span { color: #68c8ff; }
.kopbalk-titel { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4c5dd; }
.taalkiezer { flex: 0 0 auto; }
.taalknop { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
.taalknop.actief { background: #2c69bd30; }
.kopbalk-bel { color: #e4f0ff; border-color: var(--merk-rand); background: #13478c30; }

/* Blauwe staalpanelen; de zilveren rand geeft de vorm, zonder glimmende tekst. */
.kaart, .tegel, .dashboard-stat, .dashboard-mini, .dashboard-record,
.dashboard-blok, .dashboard-doel, .dashboard-cluster, .activiteit-oogst,
.persoonlijk-record, .sportrecord, .badge, .team-hero, .team-mijn, .team-start,
.team-kaart, .score-grid article, .score-grafiek-selectie {
    background: var(--merk-paneel); border-color: var(--merk-rand);
    box-shadow: var(--gloed);
}
.kaart { border-radius: 20px; }
:where(.tegel-getal, .dashboard-stat-getal, .klassement-waarde, .score-hoofdtotaal,
.score-formule-totaal strong, .score-grafiek-eindstand) { color: #9bddff; }
.dashboard-stat-accent, .dashboard-stat-rang {
    background: linear-gradient(150deg, #174fa0, #0d2857 75%); border-color: #71b2ff88;
}
.dashboard-kicker, .app-view-eyebrow, .dashboard-blok-kop, .dashboard-doel-kop { color: #b8d9ff; }
.dashboard-progress, .badge-voortgang { background-color: #050d24; }
.dashboard-progress > span { background: var(--merk-knop); }
.klassement-rij { border-bottom-color: #a6c6ef25; }
.klassement-rij.ik { background: #1c63cd28; border: 1px solid #70b6ff55; }
.klassement-positie { color: #adbfda; }
.klassement-rij:nth-child(1) .klassement-positie { color: #f6d982; }
.feed li { border-bottom-color: #a6c6ef25; }
.feed-icoon { background-color: #183e7455; }
.site-footer { border-color: #a6c6ef25; }

/* Bediening. Deze regels wijzigen geen in de kaart getekende hexkleuren. */
button, .knop, .tabs a.actief, .score-grafiek-tabs a.actief {
    background: var(--merk-knop); color: #fff;
    border: 1px solid #86c4ff66;
    box-shadow: inset 0 1px 0 #e8f5ff55, 0 7px 20px #0047c128;
}
button, .knop { min-height: 44px; border-radius: 12px; }
button:not(:disabled):hover, .knop:hover { filter: brightness(1.08); color: #fff; }
button:disabled, .knop[aria-disabled="true"] { opacity: .5; cursor: default; }
.knop-secundair, button.knop-secundair, .deelknop, .deelkaart-opslaan {
    background: linear-gradient(160deg, #1b3861, #0b1b36);
    color: #e4efff; border-color: var(--merk-rand);
    box-shadow: inset 0 1px 0 #eff7ff17;
}
.knop-gevaar, button.knop-gevaar { background: #a92742; border-color: #ff8b9e99; color: #fff; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]), select, textarea {
    background-color: #07132b; border-color: #46638c; color: #f0f5ff;
}
input::placeholder, textarea::placeholder { color: #93a8c5; opacity: 1; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: #3384fc; }
.tabs a, .score-grafiek-tabs a { border-color: var(--merk-rand); background: #0d2447; color: #c2d2e9; }
.tabs a.actief, .score-grafiek-tabs a.actief { background: var(--merk-knop); color: #fff; }
.melding-fout { color: #ffd5df; }.melding-succes { color: #b5f5dc; }

.bottomnav {
    background: linear-gradient(160deg, rgba(20, 43, 79, .97), rgba(5, 13, 36, .97));
    border-color: #a6c6ef4a;
    box-shadow: 0 12px 36px #00041980, inset 0 1px 0 #d9edff22;
}
.bottomnav a { color: #aebfd8; }
.bottomnav a.actief { color: #fff; background: linear-gradient(155deg, #216adb66, #10419366); }
.bottomnav a.actief .bottomnav-icoon { color: #7cdeff; filter: drop-shadow(0 0 5px #139efb44); }
.pwa-blad, .oogst-popup, .golden-popup { background: var(--merk-paneel); border-color: var(--merk-rand); }
.pwa-blad-icoon:has(.merk-embleem) { background: transparent; }
.pwa-blad-icoon .merk-embleem { width: 46px; height: 50px; border-radius: 0; border: 0; }

/* Een groot, volledig zichtbaar logo op de startpagina; geen afgesneden letters. */
.auth-paneel { margin-top: clamp(1rem, 5vh, 3rem); }
.auth-paneel.merk-start { max-width: 520px; text-align: center; margin-top: 0; }
.merk-hero {
    width: min(100%, 380px); height: auto; margin: 0 auto 1.4rem;
    border: 0; background: none; box-shadow: none; overflow: visible;
}
.merk-hero img { display: block; width: 100%; height: auto; transform: none; filter: drop-shadow(0 16px 25px #00051a66); }
.merk-slogan { max-width: 30rem; margin: 0 auto 1.3rem; font-size: clamp(1rem, 3.3vw, 1.2rem); line-height: 1.6; color: #cfddf1; }
.merk-hoofdknop { font-weight: 750; }
.merk-start .klein-grijs { color: #afc2df; }
.auth-merk { display: block; width: min(100%, 225px); height: auto; margin: 0 auto 1.8rem; }
.alleen-schermlezer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* De kaart houdt zijn rustige, leesbare ondergrond. Alleen de bediening krijgt staalblauw. */
.kaartpagina .kaart-chip, .kaartpagina .kaart-knop, .kaartpagina .kaart-legenda,
.kaartpagina .lagenkiezer, .kaartpagina .revanche-paneel {
    background: linear-gradient(150deg, rgba(19, 43, 83, .96), rgba(5, 13, 36, .95));
    border-color: #a6c6ef66; color: #e4efff;
    box-shadow: 0 8px 24px #00051a44, inset 0 1px 0 #d9edff22;
}
.kaartpagina .kaart-merk { width: 44px; height: 48px; flex-basis: 44px; min-height: 44px; background-size: contain; background-position: center; border: 0; border-radius: 0; box-shadow: none; }
.kaartpagina .laagknop.actief { background: var(--merk-knop); color: #fff; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #0c1c3b; color: #f0f5ff; }
.kaartpagina .leaflet-control-zoom a { background: #0c1c3b !important; color: #dce7f7 !important; }

/* De eigen kleuren van Strava en de betekenis van succes, fout en Golden Hex blijven intact. */
.strava-connect-submit, button.strava-connect-submit {
    width: max-content; min-height: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; filter: none;
}
.strava-connect-terugval { background: #fc4c02; color: #fff; }
@media (max-width: 600px) {
    .kopbalk { padding-inline: .7rem; gap: .4rem; }
    .kopbalk-titel { display: none; }
    .kopbalk-naam { margin-right: auto; gap: .35rem; }
    .merk-woordbeeld { width: 143px; }
    .merk-embleem { width: 39px; height: 43px; flex-basis: 39px; }
}
@media (max-width: 360px) {
    .kopbalk { padding-inline: .5rem; gap: .22rem; }
    .merk-woordbeeld { width: 119px; }
    .kopbalk-naam { gap: .2rem; }
    .merk-embleem { width: 35px; height: 39px; flex-basis: 35px; }
    .taalknop { padding-inline: .22rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .kaart-knop.bezig svg { animation: none; }
}
@media (prefers-contrast: more) {
    :root { --merk-rand: #8bb0dd; --tekst-zwak: #d5e1f2; }
    .knop, button { border-color: #b8deff; }
}

/* V2 — werkelijk metallic: geborsteld blauw staal, chroomranden en een harde
   lichtreflectie. Decoratie zit in de achtergrond; tekst en kaartdata blijven helder. */
:root {
    --merk-rand: #9cbbd8;
    --merk-chroom: linear-gradient(145deg, #effaff 0%, #a4c1dd 14%, #45688e 32%, #d9f4ff 48%, #2c5283 65%, #78daff 84%, #c1e9ff 100%);
    --merk-staal: linear-gradient(125deg, transparent 7%, rgba(194,228,255,.13) 24%, rgba(255,255,255,.025) 26%, transparent 43%), repeating-linear-gradient(0deg, rgba(206,232,255,.025) 0px, rgba(206,232,255,.025) 1px, transparent 1px, transparent 4px), linear-gradient(170deg, #244c7c 0%, #17385f 21%, #10294d 45%, #081b38 51%, #112e54 100%);
    --merk-knop: linear-gradient(180deg, #89ecff 0%, #319bf7 7%, #1462c9 39%, #082b68 49%, #0d3b86 53%, #1259b8 86%, #63d7ff 100%);
    --merk-zilvervlak: repeating-linear-gradient(0deg, #ffffff0c 0px, #ffffff0c 1px, #ffffff00 1px, #ffffff00 3px), linear-gradient(177deg, #f3faff 0%, #b9cfe2 29%, #7e9cba 49%, #c4dbea 52%, #e3f1fa 71%, #9bb7cf 100%);
    --merk-paneel: var(--merk-staal);
}
.kaart, .tegel, .dashboard-stat, .dashboard-mini, .dashboard-record,
.dashboard-blok, .dashboard-doel, .dashboard-cluster, .activiteit-oogst,
.persoonlijk-record, .sportrecord, .badge, .team-hero, .team-mijn, .team-start,
.team-kaart, .score-grid article, .score-grafiek-selectie {
    border: 1px solid transparent;
    background: var(--merk-staal) padding-box, var(--merk-chroom) border-box;
    box-shadow: inset 0 1px 0 #f0fbff66, inset 0 2px 1px #0d2c57,
        inset 0 -2px 0 #06132d, 0 2px 0 #000a, 0 12px 26px #00051745;
}
.dashboard-stat-accent {
    background: linear-gradient(125deg, transparent 10%, #d2f5ff26 28%, transparent 30%) padding-box,
        linear-gradient(165deg, #287bd5, #104a99 40%, #082c64 51%, #1350a0) padding-box,
        var(--merk-chroom) border-box;
}
/* Een zilveren rangtegel verwijst naar de zwaarden en maakt het materiaal direct zichtbaar. */
.dashboard-stat-rang {
    background: var(--merk-zilvervlak) padding-box, var(--merk-chroom) border-box;
    text-shadow: 0 1px 0 #fff9;
}
.dashboard-stat-rang .dashboard-stat-getal { color: #071d3e; }
.dashboard-stat-rang .dashboard-stat-label, .dashboard-stat-rang .dashboard-stat-sub { color: #193759; }
.kopbalk, .bottomnav {
    border-color: #c6e7ff8c;
    background: repeating-linear-gradient(0deg, #e3f5ff08 0px, #e3f5ff08 1px, transparent 1px, transparent 4px),
        linear-gradient(170deg, #315378 0%, #142d4f 25%, #0a1b36 50%, #102744 52%, #0a1830 100%);
    box-shadow: inset 0 1px 0 #f1fbff99, inset 0 2px 0 #7799b333,
        inset 0 -1px 0 #3b9cdb77, 0 8px 28px #000b;
}
button, .knop, .tabs a.actief, .score-grafiek-tabs a.actief, .bottomnav a.actief {
    background: var(--merk-knop);
    color: #fff; border-color: #a3e8ff;
    text-shadow: 0 1px 2px #00153c;
    box-shadow: inset 0 1px 0 #eeffffb3, inset 1px 0 0 #53d8ff88,
        inset -1px 0 0 #11326c, inset 0 -2px 1px #01153f, 0 3px 0 #020d22, 0 7px 14px #00102d66;
}
button:not(:disabled):active, .knop:active { box-shadow: inset 0 2px 5px #00132f99, 0 1px 0 #4c88b8; }
.knop-secundair, button.knop-secundair, .deelknop, .deelkaart-opslaan {
    background: var(--merk-zilvervlak); border-color: #e5f6ff;
    color: #091f3d; text-shadow: 0 1px 0 #fff8;
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #526d8a, 0 3px 0 #06142b, 0 6px 14px #0007;
}
.knop-secundair:hover, button.knop-secundair:hover, .deelknop:hover, .deelkaart-opslaan:hover { color: #071a33; }
.knop-gevaar, button.knop-gevaar { background: linear-gradient(180deg,#e59cad,#a92742 18%,#76132b 51%,#b93955); color:#fff; border-color:#ffb5c7; }
.kaartpagina .kaart-chip, .kaartpagina .kaart-knop, .kaartpagina .kaart-legenda,
.kaartpagina .lagenkiezer, .kaartpagina .revanche-paneel {
    background: var(--merk-staal); border: 1px solid #afcde7;
    box-shadow: inset 0 1px 0 #ecfaff80, inset 0 -2px 0 #041229, 0 6px 14px #0008;
}
.kaartpagina .kaart-merk { background-color: transparent; border: 0; box-shadow: none; }
.pwa-blad, .oogst-popup, .golden-popup { background: var(--merk-staal); border-color: #accce6; box-shadow: inset 0 1px 0 #f0fbff88, 0 24px 60px #0009; }
.klassement-rij.ik { background: linear-gradient(165deg,#2462ad66,#0b2b5f99); border:1px solid #92d9ff; box-shadow: inset 0 1px 0 #d4f5ff44; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]), select, textarea {
    box-shadow: inset 0 2px 6px #0008, 0 1px 0 #d2eaff33; border-color: #6b8bad;
}
@supports (-webkit-background-clip: text) {
    h1 { background: linear-gradient(180deg,#fff 10%,#c4d7e9 45%,#f1fbff 50%,#98b5d6 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
}
@media (prefers-contrast: more) {
    :root { --merk-staal: linear-gradient(#12345d,#071b37); --merk-knop:linear-gradient(#135dbb,#082b68); }
    h1 { background:none; -webkit-text-fill-color:currentColor; }
}
@media (forced-colors: active) {
    h1 { background:none; -webkit-text-fill-color:CanvasText; }
    .kaart, .tegel, .dashboard-stat, .knop, button { border:1px solid ButtonText; }
}
/* Officiële merkknop en semantische kaarttoestanden krijgen hun eigen kleuren. */
.strava-connect-submit, button.strava-connect-submit { background:transparent; border:0; box-shadow:none; text-shadow:none; }
.strava-connect-terugval { background:#fc4c02; color:#fff; text-shadow:none; }