/* INFIGHT DARTS MASTER - Phase 7.13 Professional Design */
:root {
    --bg:#080a0d; --panel:rgba(15,19,26,.96); --panel2:#0d1117;
    --border:#1f293d; --border2:#2b3548; --red:#ff073a; --green:#39ff14;
    --blue:#00bfff; --gold:#facc15; --text:#e2e8f0; --muted:#94a3b8;
    --cream:#f5efe6;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:'Rajdhani',Arial,sans-serif; color:var(--text);
    background-color:var(--bg);
    background-image:radial-gradient(circle at 50% 30%,rgba(18,24,32,.96) 0%,rgba(5,6,8,.99) 100%),url("assets/header_logo.jpg");
    background-repeat:no-repeat; background-position:center; background-size:cover;
    user-select:none; min-height:100vh; overflow-x:hidden;
}
.digital-font{font-family:'Orbitron',sans-serif}.graffiti-font{font-family:'Permanent Marker',cursive}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#090b0e}::-webkit-scrollbar-thumb{background:#2b3548;border-radius:3px}

/* Header aus der Turnier-HTML */
#header{
    position:fixed; top:0; left:0; right:0; height:60px; z-index:1000; overflow:hidden;
    background:var(--cream); border-bottom:1px solid var(--red);
    box-shadow:0 5px 15px rgba(255,7,58,.22);
}
.headerLogoFull{width:100%;height:100%;object-fit:contain;padding:4px 0;display:block;position:relative;z-index:20}
#headerFallback{position:absolute;inset:0;display:none;align-items:center;justify-content:space-between;padding:0 40px;background:linear-gradient(90deg,#0c1017,#141d26,#0c1017);z-index:10;border-bottom:2px solid var(--red)}
#headerFallback .graffiti-font{color:var(--red);font-size:22px} #headerFallback .digital-font{color:var(--green);font-size:18px;font-weight:900;letter-spacing:2px}
.headerFadeLeft,.headerFadeRight{position:absolute;top:0;bottom:0;width:130px;pointer-events:none;z-index:30}
.headerFadeLeft{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .headerFadeRight{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
#headerUser{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:40;color:#0d1117;background:rgba(245,239,230,.82);border:1px solid rgba(255,7,58,.4);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900}

/* Grundelemente */
.bg{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:80px 20px 20px;background-image:radial-gradient(circle at 50% 30%,rgba(18,24,32,.96) 0%,rgba(5,6,8,.99) 100%),url("assets/header_logo.jpg");background-size:cover;background-position:center}
.card{width:380px;padding:30px;background:rgba(15,19,26,.95);border:2px solid var(--border);border-radius:12px;text-align:center;box-shadow:0 0 28px rgba(57,255,20,.12),0 0 28px rgba(255,7,58,.18)}
.logo{width:180px;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(255,7,58,.18))}
h1,h2{font-family:'Orbitron',sans-serif;letter-spacing:1.5px;font-weight:900} h3{letter-spacing:1.2px;font-weight:900;color:var(--green)}
.sub{color:var(--muted);margin-bottom:20px;text-transform:uppercase;font-weight:700}
input,select,textarea{width:90%;padding:11px 12px;margin:8px 0;border:1px solid var(--border2);border-radius:6px;background:rgba(0,0,0,.58);color:white;outline:none;font-family:'Rajdhani',sans-serif;font-weight:700}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 12px rgba(57,255,20,.18)}
button{padding:9px 14px;margin-top:10px;background:var(--green);border:1px solid rgba(57,255,20,.55);border-radius:6px;color:black;font-weight:900;cursor:pointer;font-family:'Rajdhani',sans-serif;letter-spacing:.7px;text-transform:uppercase;transition:all .15s ease;box-shadow:0 0 10px rgba(57,255,20,.22)}
button:hover{transform:translateY(-1px);opacity:.92;box-shadow:0 0 16px rgba(57,255,20,.38)}
button.secondary{background:#161d26;color:var(--text);border-color:var(--border2);box-shadow:none}
button.danger{background:rgba(255,7,58,.86);color:white;border-color:rgba(255,7,58,.65);box-shadow:0 0 12px rgba(255,7,58,.22)}
button.done,button:disabled{background:#334155;color:#94a3b8;cursor:not-allowed;opacity:.7;border-color:#475569;box-shadow:none}
#error{color:var(--red);margin-top:10px;font-weight:800}

/* Layout */
.screen{padding:78px 18px 20px;min-height:100vh}.dashboard{max-width:1100px;margin:0 auto;text-align:center}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.tile{background:rgba(15,19,26,.95);padding:32px;border-radius:10px;cursor:pointer;border:2px solid var(--border);font-size:24px;font-weight:900;letter-spacing:1px;text-transform:uppercase;box-shadow:0 0 16px rgba(0,0,0,.35)}
.tile:hover{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.38),inset 0 0 10px rgba(57,255,20,.16);color:var(--green)}
.tile.disabled{opacity:.35;cursor:not-allowed}
.infoBox,.panel{margin-top:20px;padding:18px;background:rgba(15,19,26,.95);border:2px solid var(--border);border-radius:10px;box-shadow:0 0 20px rgba(57,255,20,.07)}
.pageTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}.pageTitle h2{color:var(--green);text-shadow:0 0 5px rgba(57,255,20,.4)}
.layoutTwo{display:grid;grid-template-columns:1fr 1fr;gap:20px}.singlePanel{max-width:900px;margin-left:auto;margin-right:auto}
label{display:block;margin-top:10px;color:#cbd5e1;font-weight:900;text-transform:uppercase;font-size:13px}

/* Listen/Karten */
.playerRow{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:10px;background:rgba(0,0,0,.35);border:1px solid var(--border2);border-radius:8px}
.playerRuleRow{align-items:flex-start}.playerButtons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.leftText{text-align:left}
.legend{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:15px;color:#bbb}.dot{display:inline-block;width:14px;height:14px;border-radius:50%}
.dot.open{background:#777}.dot.appointment{background:#facc15}.dot.confirmed{background:#38bdf8}.dot.running{background:#fb923c}.dot.resultpending{background:#a855f7}.dot.completed{background:#22c55e}
.matchCard{margin:10px 0;padding:14px;border-radius:10px;border:2px solid var(--border);background:rgba(13,17,23,.96)}
.status-OPEN{border-color:#777}.status-APPOINTMENT_PENDING{border-color:#facc15;box-shadow:0 0 14px rgba(250,204,21,.26)}.status-APPOINTMENT_CONFIRMED{border-color:var(--blue);box-shadow:0 0 15px rgba(0,191,255,.32)}.status-IN_PROGRESS{border-color:#fb923c;box-shadow:0 0 14px rgba(251,146,60,.28)}.status-RESULT_PENDING{border-color:#a855f7;box-shadow:0 0 14px rgba(168,85,247,.28)}.status-COMPLETED{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.30)}
.matchMain{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;text-align:center;font-size:20px}.playerName{font-weight:900}.playerName.right{text-align:right}.playerName.left{text-align:left}
.scoreRight,.scoreLeft{display:inline-block;min-width:34px;color:var(--green);font-size:26px;font-family:'Orbitron',sans-serif;text-shadow:0 0 5px rgba(57,255,20,.4)}
.scoreRight{margin-left:14px}.scoreLeft{margin-right:14px}.vsText{color:#64748b;font-weight:900;font-family:'Orbitron',sans-serif}
.small{margin-top:6px;color:#aab3c2;font-size:13px;text-align:center;font-weight:700}.warn{color:var(--gold)}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.actions button{font-size:12px;padding:7px 10px}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.80);z-index:2000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modalBox{background:var(--panel);border:2px solid var(--red);border-radius:12px;padding:24px;width:380px;box-shadow:0 0 30px rgba(255,7,58,.28)}
.modalBox.wide{width:720px;max-height:90vh;overflow-y:auto}.modalActions{display:flex;gap:10px;justify-content:center}
.resultTitle{text-align:center;font-weight:900;margin:15px 0}.resultInputs{display:flex;align-items:center;justify-content:center;gap:12px}.resultInputs input{width:80px;text-align:center;font-size:24px;font-weight:900}

/* Kalender */
.seasonCalendar{margin-top:12px}.calendarHint{color:#94a3b8;font-size:13px;margin:8px 0}.errorText{color:var(--red)}
.halfTimeBanner{margin:10px 0;padding:12px;border-radius:8px;background:var(--gold);color:black;font-weight:900;text-align:center;font-size:18px;box-shadow:0 0 18px rgba(250,204,21,.35)}
.calendarMonths{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.calendarMonth{min-width:230px;background:#090b0e;border:1px solid var(--border2);border-radius:10px;padding:10px}.calendarMonthTitle{text-align:center;font-weight:900;color:var(--green);margin-bottom:8px}
.calendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.headerCells span{color:#94a3b8;font-size:11px;font-weight:900}
.calendarDay{padding:6px 0;border-radius:6px;font-size:12px;background:#111827;color:white}.calendarDay.empty{background:transparent}.calendarDay.outsideSeason{opacity:.25}.calendarDay.insideSeason{border:1px solid var(--border)}
.calendarDay.halftimeDay{background:var(--gold);color:black;font-weight:900;transform:scale(1.12);box-shadow:0 0 12px rgba(250,204,21,.8)}.calendarDay.selectedDay{background:var(--green);color:black;font-weight:900}

/* Tabellen & Meldungen */
.dataTable{width:100%;border-collapse:collapse;margin-top:10px}.dataTable th,.dataTable td{padding:10px;border-bottom:1px solid var(--border);text-align:center}.dataTable th{color:var(--green);background:#090b0e;text-transform:uppercase;letter-spacing:.8px}
.notificationCard{margin:10px 0;padding:14px;border-radius:10px;border:1px solid var(--border2);background:rgba(13,17,23,.95)}.notificationCard.read{opacity:.45}

/* Match-Center */
.matchCenter{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:20px}.matchCenterV2{grid-template-columns:1fr 1.6fr 1fr}
.mcPlayer,.mcMiddle{background:rgba(13,17,23,.95);border:2px solid var(--border);border-radius:12px;padding:18px;text-align:center}
.mcPlayer.active{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.38),inset 0 0 10px rgba(57,255,20,.16)}
.mcScore{font-size:72px;font-weight:900;color:var(--green);margin:12px 0;font-family:'Orbitron',sans-serif;line-height:1;text-shadow:0 0 5px rgba(57,255,20,.4)}
.lastTurnBox{margin:10px auto;padding:8px 10px;border:1px solid var(--border2);border-radius:8px;background:#090b0e;color:var(--gold);font-weight:900;max-width:190px}.lastTurnBox strong{color:var(--green);font-size:24px;font-family:'Orbitron',sans-serif}
.turnDisplay{margin-bottom:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#090b0e}.dartSlots{display:flex;justify-content:center;gap:10px;margin:10px 0}
.dartSlot{width:58px;height:42px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border2);border-radius:50%;background:#111827;color:#94a3b8;font-weight:900;font-family:'Orbitron',sans-serif}
.dartSlot.filled{color:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(57,255,20,.25)}.dartSlot.bust{color:var(--red);border-color:var(--red)}
.turnTotal{color:var(--gold);font-weight:900;font-size:20px;background:rgba(250,204,21,.08);border-radius:8px;padding:8px;font-family:'Orbitron',sans-serif}
.dartKeypad{max-width:640px;margin:0 auto}.keypadNumbers{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.keypadBottom{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:5px;margin-top:5px}
.numKey{min-height:58px;margin:0;border-radius:3px;background:#f5efe6;color:#111827;font-size:24px;font-weight:900;border:1px solid #cbd5e1;box-shadow:none}
.numKey.double{background:#f97316;color:white;font-size:16px}.numKey.triple{background:#ea580c;color:white;font-size:16px}.numKey.undo{background:var(--red);color:white;font-size:16px}
.numKey.double.armed,.numKey.triple.armed{background:#2563eb!important;color:white;box-shadow:0 0 14px rgba(0,191,255,.75);border:2px solid #93c5fd}
.mcActions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.historyRow{padding:10px;border-bottom:1px solid var(--border)}
.shareTextArea{width:100%;min-height:160px;margin:12px 0;padding:12px;border:1px solid var(--border2);border-radius:10px;background:#090b0e;color:#e2e8f0;font-family:'Rajdhani',sans-serif;resize:vertical}

@media(max-width:900px){
    .grid,.layoutTwo,.matchCenter,.matchCenterV2{grid-template-columns:1fr}.screen{padding-left:10px;padding-right:10px}.tile{padding:22px;font-size:20px}.mcScore{font-size:54px}.keypadNumbers{grid-template-columns:repeat(5,1fr)}.keypadBottom{grid-template-columns:1fr 1fr}#headerUser{display:none}
}


.permCheckbox {
    width: 22px;
    height: 22px;
    accent-color: var(--green);
    cursor: pointer;
}

#permissionsList {
    overflow-x: auto;
}

#permissionsList select {
    width: 100px;
    margin: 0;
    padding: 6px;
}


.topNav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
    min-height: 38px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 10px;
    background: rgba(13, 17, 23, 0.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.topNav button {
    margin: 0;
    padding: 6px 11px;
    font-size: 12px;
    background: #161d26;
    color: #cbd5e1;
    border: 1px solid var(--border2);
    box-shadow: none;
}

.topNav button:hover {
    color: black;
    background: var(--green);
    box-shadow: 0 0 10px rgba(57,255,20,0.3);
}

.screen {
    padding-top: 118px;
}

.bg {
    padding-top: 118px;
}

@media(max-width:900px) {
    .topNav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .topNav button {
        white-space: nowrap;
    }
}

.selectList{max-height:280px;overflow-y:auto;border:1px solid var(--border2);border-radius:10px;background:rgba(0,0,0,.35);padding:10px;margin-top:8px}.checkRow{display:flex;align-items:center;gap:10px;padding:7px;border-bottom:1px solid rgba(255,255,255,.05);margin:0}.checkRow input{width:20px;height:20px;margin:0;accent-color:var(--green)}.tournamentCard{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;margin:10px 0;border:2px solid var(--border);border-radius:10px;background:rgba(13,17,23,.96)}.bracket{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px}.bracketRound{min-width:300px;border:1px solid var(--border2);border-radius:12px;background:rgba(0,0,0,.22);padding:12px}.tournamentMatch{min-height:120px}


.tournamentWinner {
    margin-bottom: 14px;
    padding: 14px;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background: rgba(250,204,21,0.12);
    color: var(--gold);
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 0 18px rgba(250,204,21,0.25);
}

.winnerName {
    color: var(--green);
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}


.eventInfo {
    margin: 10px 0 14px 0;
}

.eventChooser {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--border2);
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
}

.eventChooser button {
    margin: 0;
}


.groupsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.groupBox {
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: rgba(0,0,0,0.22);
    padding: 12px;
}

.smallTable {
    font-size: 12px;
    margin-bottom: 12px;
}

@media(max-width:900px) {
    .groupsGrid {
        grid-template-columns: 1fr;
    }
}


.syncStatus {
    position: absolute;
    right: 170px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    border: 1px solid var(--border2);
}

.syncStatus.online {
    color: #000;
    background: var(--green);
    border-color: var(--green);
}

.syncStatus.offline {
    color: #000;
    background: var(--gold);
    border-color: var(--gold);
}

.syncStatus.local {
    color: #fff;
    background: #334155;
    border-color: #475569;
}

@media(max-width:900px) {
    .syncStatus {
        right: 12px;
        top: 72px;
        transform: none;
        font-size: 10px;
    }
}


.licenseStatus {
    position: absolute;
    right: 245px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid var(--border2);
    background: #334155;
    color: white;
}

.licenseStatus.ok { background: var(--green); color: black; border-color: var(--green); }
.licenseStatus.bad { background: var(--red); color: white; border-color: var(--red); }
.licenseStatus.offline { background: var(--gold); color: black; border-color: var(--gold); }

@media(max-width:900px) {
    .licenseStatus { display:none; }
}


/* Phase 15.0 Dashboard 2.0 */
.dashboardV2{
  max-width:1220px;
  text-align:left;
  padding-bottom:40px;
}
.dashHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding:30px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 10%,rgba(255,7,58,.18),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.dashEyebrow{
  margin:0 0 8px;
  color:var(--red);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
}
.dashHero h2{
  margin:0;
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1;
}
.dashHero p:last-child{
  margin:12px 0 0;
  color:rgba(255,255,255,.62);
}
.dashHeroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.secondaryButton{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#fff!important;
}
.dangerButton{
  background:rgba(255,7,58,.1)!important;
  border-color:rgba(255,7,58,.35)!important;
  color:#ff667d!important;
}
.dashStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:14px;
}
.dashStats article{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(15,19,26,.82);
}
.dashStats small,.dashPanel small{
  display:block;
  color:rgba(255,255,255,.46);
  margin-bottom:5px;
}
.dashStats strong{
  display:block;
  font-size:1.05rem;
}
.dashIcon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,7,58,.18),rgba(57,255,20,.08));
  border:1px solid rgba(255,255,255,.08);
  font-size:1.25rem;
}
.dashMainGrid,.dashBottomGrid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
  margin-bottom:14px;
}
.dashBottomGrid{
  grid-template-columns:1fr .72fr;
}
.dashPanel{
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(15,19,26,.82);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
}
.dashPanel h3{
  margin:4px 0 0;
  font-size:1.25rem;
}
.dashPanelHead{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.dashBadge{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,174,0,.12);
  color:#ffc55b;
  border:1px solid rgba(255,197,91,.2);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}
.dashBadge.online{
  background:rgba(57,255,20,.09);
  color:var(--green);
  border-color:rgba(57,255,20,.2);
}
.dashBadge.offline{
  background:rgba(255,7,58,.1);
  color:#ff667d;
  border-color:rgba(255,7,58,.24);
}
.nextMatchDetails{
  margin:26px 0;
  padding:20px;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);
  font-size:1.05rem;
}
.seasonProgressTrack{
  height:10px;
  margin:28px 0 14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.seasonProgressTrack i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--red),var(--green));
  transition:width .5s ease;
}
.seasonPanel p{
  color:rgba(255,255,255,.52);
  margin-bottom:0;
}
.quickActions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:20px;
}
.quickActions button{
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:7px;
  padding:18px;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
}
.quickActions button:hover{
  transform:translateY(-2px);
  border-color:rgba(255,7,58,.38);
}
.quickActions span{font-size:1.5rem}
.quickActions b{font-size:1rem}
.quickActions small{
  color:rgba(255,255,255,.48);
  line-height:1.45;
}
.activityList{
  margin-top:18px;
  display:grid;
  gap:9px;
}
.activityItem{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  padding:14px 16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
}
.activityItem span{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.activityItem small{
  margin:0;
}
.activityItem strong{
  font-size:1.2rem;
}
.emptyState{
  padding:18px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.45);
}
.platformStatus{
  display:grid;
  gap:0;
  margin-top:16px;
}
.platformStatus>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.platformStatus span{
  color:rgba(255,255,255,.48);
}
.dashboardFooterActions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
@media(max-width:980px){
  .dashStats{grid-template-columns:1fr 1fr}
  .dashMainGrid,.dashBottomGrid{grid-template-columns:1fr}
  .quickActions{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .dashHero{align-items:flex-start;flex-direction:column;padding:22px}
  .dashStats,.quickActions{grid-template-columns:1fr}
  .dashHeroActions{width:100%}
  .dashHeroActions button{flex:1}
  .dashPanel{padding:18px}
}


/* Phase 16.0 App Shell & Sidebar */
:root{
  --sidebar-width:270px;
  --header-height:76px;
}
body.appAuthenticated{
  padding-left:var(--sidebar-width);
}
body.appAuthenticated #header{
  left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
}
body.appAuthenticated .screen{
  min-height:calc(100vh - var(--header-height));
}
.topNav{
  position:fixed;
  inset:0 auto 0 0;
  z-index:1100;
  width:var(--sidebar-width);
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:18px 14px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 0 0,rgba(255,7,58,.12),transparent 28%),
    #090c12;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:18px 0 50px rgba(0,0,0,.28);
}
.topNav.hidden{display:none!important}
.sidebarBrand{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebarBrandMark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:14px;
  background:linear-gradient(135deg,var(--red),#7d061c);
  box-shadow:0 10px 30px rgba(255,7,58,.24);
}
.sidebarBrand strong,.sidebarBrand small{
  display:block;
}
.sidebarBrand strong{
  font-family:Orbitron,sans-serif;
  font-size:.9rem;
  letter-spacing:.05em;
}
.sidebarBrand small{
  margin-top:3px;
  color:rgba(255,255,255,.38);
  font-size:.6rem;
  letter-spacing:.15em;
}
.sidebarClose{
  display:none;
  margin-left:auto;
  padding:5px 9px;
  background:transparent!important;
  border:0!important;
  color:#fff!important;
  font-size:1.6rem;
}
.sidebarUser{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 4px;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.sidebarUser>span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:12px;
  background:rgba(255,7,58,.13);
  color:#ff5c74;
  font-weight:900;
}
.sidebarUser strong,.sidebarUser small{
  display:block;
}
.sidebarUser small{
  margin-top:3px;
  color:rgba(255,255,255,.42);
}
.sidebarSectionLabel{
  margin:8px 10px 9px;
  color:rgba(255,255,255,.3);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.16em;
}
.sidebarItems{
  display:grid;
  gap:5px;
}
.sidebarItems button{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:rgba(255,255,255,.64);
  text-align:left;
  box-shadow:none;
}
.sidebarItems button:hover{
  background:rgba(255,255,255,.035);
  color:#fff;
  transform:none;
}
.sidebarItems button.active{
  color:#fff;
  border-color:rgba(255,7,58,.2);
  background:linear-gradient(90deg,rgba(255,7,58,.16),rgba(255,7,58,.03));
  box-shadow:inset 3px 0 0 var(--red);
}
.sidebarItems button span{
  width:24px;
  text-align:center;
  font-size:1rem;
}
.sidebarItems button b{
  font-size:.9rem;
}
.sidebarFooter{
  margin-top:auto;
  padding:16px 5px 2px;
  border-top:1px solid rgba(255,255,255,.07);
}
.sidebarConnection{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px 12px;
  color:rgba(255,255,255,.45);
  font-size:.78rem;
}
.sidebarConnection i{
  width:8px;
  height:8px;
  border-radius:50%;
}
.sidebarConnection i.online{
  background:var(--green);
  box-shadow:0 0 12px rgba(57,255,20,.6);
}
.sidebarConnection i.offline{
  background:var(--red);
}
.sidebarLogout{
  width:100%;
  background:rgba(255,7,58,.07)!important;
  border-color:rgba(255,7,58,.18)!important;
  color:#ff6980!important;
}
.sidebarToggle{
  position:absolute;
  left:14px;
  top:50%;
  width:42px;
  height:42px;
  display:none;
  place-items:center;
  padding:10px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:none!important;
}
.sidebarToggle span{
  display:block;
  width:18px;
  height:2px;
  margin:2px 0;
  border-radius:10px;
  background:#fff;
}
.sidebarBackdrop{
  position:fixed;
  inset:0;
  z-index:1090;
  display:none;
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(4px);
}
@media(max-width:1050px){
  body.appAuthenticated{
    padding-left:0;
  }
  body.appAuthenticated #header{
    left:0;
    width:100%;
  }
  .topNav{
    transform:translateX(-105%);
    transition:transform .24s ease;
  }
  body.sidebarOpen .topNav{
    transform:translateX(0);
  }
  body.sidebarOpen .sidebarBackdrop{
    display:block;
  }
  .sidebarClose{
    display:block;
  }
  .sidebarToggle:not(.hidden){
    display:grid;
  }
  body.appAuthenticated #header .headerLogoFull,
  body.appAuthenticated #header #headerFallback{
    margin-left:54px;
  }
}
@media(max-width:560px){
  :root{--sidebar-width:min(88vw,310px)}
  .topNav{width:var(--sidebar-width)}
}

/* Phase 16.1 Challenges */
.challengePage{max-width:1220px;margin:0 auto;padding:28px 20px 50px;text-align:left}
.challengeHero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:30px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:radial-gradient(circle at 88% 10%,rgba(255,7,58,.2),transparent 30%),rgba(15,19,26,.88)}
.challengeHero h2{margin:7px 0 12px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.02}.challengeHero p:last-child{max-width:760px;color:rgba(255,255,255,.62);line-height:1.65}
.challengeEyebrow{margin:0;color:var(--red);font-size:.76rem;font-weight:900;letter-spacing:.16em}
.challengeReadyBadge{min-width:190px;display:flex;align-items:center;gap:12px;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(0,0,0,.18)}
.challengeReadyBadge i{width:12px;height:12px;border-radius:50%;background:#6b7280}.challengeReadyBadge.active i{background:var(--green);box-shadow:0 0 16px rgba(57,255,20,.7)}
.challengeReadyBadge small,.challengeReadyBadge strong{display:block}.challengeReadyBadge small{color:rgba(255,255,255,.42);margin-bottom:4px}
.challengeStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.challengeStats article{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(15,19,26,.82)}
.challengeStats small{display:block;color:rgba(255,255,255,.43);margin-bottom:8px}.challengeStats strong{font-size:1.25rem}
.challengeGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:14px}.challengeGrid.bottom{grid-template-columns:1fr 1fr}
.challengePanel{padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(15,19,26,.84);box-shadow:0 18px 50px rgba(0,0,0,.15);margin-bottom:14px}
.challengeGrid>.challengePanel{margin-bottom:0}
.challengePanelHead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}.challengePanelHead small{display:block;color:rgba(255,255,255,.43);margin-bottom:5px}.challengePanelHead h3{margin:0}.challengePanelHead>span{color:#ff7185;font-size:.7rem;font-weight:900;letter-spacing:.08em}
.challengeFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.challengeFormGrid label,.challengeComposer>label{display:grid;gap:7px;color:rgba(255,255,255,.55);font-size:.82rem;font-weight:800}
.challengeFormGrid select,.challengeFormGrid input,.challengeComposer textarea{width:100%;margin:0}.challengeComposer textarea{min-height:100px;resize:vertical}
.challengeCheckbox{display:flex!important;align-items:center;grid-template-columns:auto 1fr!important;align-self:end;min-height:46px}.challengeCheckbox input{width:auto}
.challengeActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.challengePrivacy{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.45);font-size:.78rem;line-height:1.55}
.nearbyPlayersList{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nearbyPlayerCard{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.022);transition:transform .2s,border-color .2s}
.nearbyPlayerCard:hover{transform:translateY(-3px);border-color:rgba(255,7,58,.4)}
.nearbyPlayerTop{display:flex;align-items:center;gap:11px}.nearbyPlayerTop h4,.challengeLocationCard h4,.incomingChallengeCard h4{margin:0 0 4px}.nearbyPlayerTop p,.challengeLocationCard p,.incomingChallengeCard p{margin:0;color:rgba(255,255,255,.48)}
.challengeAvatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,7,58,.14);color:#ff637a;font-weight:900}.readyDot{margin-left:auto;color:var(--green);font-size:.62rem;font-weight:900}
.nearbyPlayerStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0}.nearbyPlayerStats div{padding:10px;border-radius:11px;background:rgba(255,255,255,.025)}.nearbyPlayerStats small,.nearbyPlayerStats strong{display:block}.nearbyPlayerStats small{color:rgba(255,255,255,.38);font-size:.67rem;margin-bottom:4px}
.nearbyPlayerFooter{display:flex;justify-content:space-between;align-items:center;gap:10px}.nearbyPlayerFooter>span{color:rgba(255,255,255,.45);font-size:.74rem}.nearbyPlayerFooter button{padding:9px 11px}
.challengeEmpty{grid-column:1/-1;display:grid;place-items:center;text-align:center;padding:42px;border:1px dashed rgba(255,255,255,.12);border-radius:17px;color:rgba(255,255,255,.48)}.challengeEmpty span{font-size:2rem}.challengeEmpty b{margin-top:10px;color:#fff}.challengeEmpty p{margin:7px 0 0}.challengeEmpty.compact{padding:24px}
.challengeRankingList,.challengeLocationsList,.incomingChallengesList{display:grid;gap:8px}
.challengeRankingRow{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:9px;padding:11px;border-radius:11px;background:rgba(255,255,255,.025)}.challengeRankingRow>strong{color:#ff637a}.challengeRankingRow small{color:rgba(255,255,255,.42)}.challengeRankingRow b{color:var(--green)}
.challengeLocationCard,.incomingChallengeCard{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02)}.challengeLocationCard small,.incomingChallengeCard small{color:#ff7185}.locationMeta{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.locationMeta span,.incomingChallengeCard>div>span{padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:.68rem}
.incomingChallengeCard>div:last-child{display:flex;gap:7px}.incomingChallengeCard button{padding:8px 10px}.challengeMuted{color:rgba(255,255,255,.45)}
@media(max-width:1050px){.nearbyPlayersList{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.challengeHero{align-items:flex-start;flex-direction:column}.challengeStats{grid-template-columns:1fr 1fr}.challengeGrid,.challengeGrid.bottom{grid-template-columns:1fr}}
@media(max-width:580px){.challengePage{padding:18px 12px 40px}.challengeHero,.challengePanel{padding:18px}.challengeStats,.challengeFormGrid,.nearbyPlayersList{grid-template-columns:1fr}.challengeRankingRow{grid-template-columns:36px 1fr auto}.challengeRankingRow small{display:none}.challengeLocationCard,.incomingChallengeCard{align-items:flex-start;flex-direction:column}.locationMeta{justify-content:flex-start}}


/* Phase 16.3 Dynamic User Rights */
.permissionsInfo{
  margin-bottom:16px;
  padding:14px 16px;
  border:1px solid rgba(57,255,20,.16);
  border-radius:14px;
  background:rgba(57,255,20,.04);
  color:rgba(255,255,255,.62);
  line-height:1.55;
}
.permissionsTableWrap{
  overflow-x:auto;
  border-radius:16px;
}
.permissionUserMeta{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.38);
}
.permissionActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.permissionActions button{
  padding:8px 10px;
  white-space:nowrap;
}
.dashboardFooterActions{
  gap:10px;
  flex-wrap:wrap;
}


/* Phase 16.4 Match formats & safe reactions */
.modeRecommendation{
  margin:0 0 18px;
  padding:17px 18px;
  border:1px solid rgba(57,255,20,.16);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(57,255,20,.055),rgba(255,255,255,.018));
}
.modeRecommendation span,
.modeRecommendation strong{
  display:block;
}
.modeRecommendation span{
  margin-bottom:7px;
  color:var(--green);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.07em;
}
.modeRecommendation strong{
  font-size:1rem;
}
.modeRecommendation p{
  margin:7px 0 0;
  color:rgba(255,255,255,.54);
  line-height:1.55;
}
.challengeNoFreeText{
  margin:16px 0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.48);
  font-size:.8rem;
  line-height:1.55;
}
.challengeReactionBlock{
  width:100%;
  margin-top:13px;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.challengeReactionBlock label{
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:800;
}
.challengeReactionBlock select{
  width:100%;
  margin:0;
}
.receivedReaction{
  margin:0 0 10px!important;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(57,255,20,.05);
  color:rgba(255,255,255,.72)!important;
}


/* Phase 16.5 Professional player statistics */
.profileStatTabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.profileStatTabs button{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  box-shadow:none;
}
.profileStatTabs button.active{
  color:#fff;
  background:rgba(255,7,58,.14);
  border-color:rgba(255,7,58,.3);
}
.playerStatView{
  margin-top:18px;
}
.professionalStatGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
}
.professionalStatGrid.prominent{
  grid-template-columns:repeat(4,1fr);
}
.professionalStatGrid article{
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.022);
}
.professionalStatGrid small{
  color:rgba(255,255,255,.43);
  line-height:1.35;
}
.professionalStatGrid strong{
  margin-top:8px;
  font-size:1.4rem;
}
.professionalStatsSplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.professionalSubPanel{
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.018);
}
.professionalSubPanel>small{
  display:block;
  margin-bottom:10px;
  color:#ff7185;
  font-weight:900;
  letter-spacing:.07em;
}
.professionalSubPanel>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.professionalSubPanel>div:last-child{
  border-bottom:0;
}
.professionalSubPanel span{
  color:rgba(255,255,255,.5);
}
.challengeHistorySection{
  margin-top:20px;
}
.professionalChallengeHistory{
  display:grid;
  gap:9px;
}
.professionalHistoryRow{
  display:grid;
  grid-template-columns:42px minmax(180px,1fr) auto auto;
  gap:13px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.018);
}
.historyResultBadge{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  font-weight:900;
}
.professionalHistoryRow.won .historyResultBadge{
  color:var(--green);
  background:rgba(57,255,20,.08);
}
.professionalHistoryRow.lost .historyResultBadge{
  color:#ff7185;
  background:rgba(255,7,58,.09);
}
.historyMain strong,.historyMain small,.historyMain span{
  display:block;
}
.historyMain small,.historyMain span{
  margin-top:4px;
  color:rgba(255,255,255,.42);
}
.historyStats{
  text-align:right;
}
.historyStats b,.historyStats small{
  display:block;
}
.historyStats small{
  margin-top:4px;
  color:rgba(255,255,255,.42);
}
.historyDate{
  color:rgba(255,255,255,.42);
  font-size:.8rem;
}
.historyReaction{
  grid-column:2/-1;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(57,255,20,.04);
  color:rgba(255,255,255,.66);
}
.rewardProgressTrack{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.rewardProgressTrack i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--red),var(--green));
  transition:width .5s ease;
}
.challengeRewardsList{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  margin-top:15px;
}
.rewardMilestone{
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.018);
  opacity:.68;
}
.rewardMilestone.unlocked{
  opacity:1;
  border-color:rgba(57,255,20,.2);
  background:rgba(57,255,20,.035);
}
.rewardMilestone>span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(255,255,255,.04);
  font-weight:900;
}
.rewardMilestone.unlocked>span{
  color:var(--green);
  background:rgba(57,255,20,.08);
}
.rewardMilestone small,.rewardMilestone strong{
  display:block;
}
.rewardMilestone small{
  margin-bottom:5px;
  color:rgba(255,255,255,.42);
}
@media(max-width:980px){
  .professionalStatGrid,
  .professionalStatGrid.prominent{
    grid-template-columns:repeat(2,1fr);
  }
  .challengeRewardsList{
    grid-template-columns:1fr;
  }
}
@media(max-width:680px){
  .professionalStatsSplit{
    grid-template-columns:1fr;
  }
  .professionalHistoryRow{
    grid-template-columns:38px 1fr auto;
  }
  .historyDate{
    display:none;
  }
}
@media(max-width:500px){
  .professionalStatGrid,
  .professionalStatGrid.prominent{
    grid-template-columns:1fr;
  }
  .professionalHistoryRow{
    grid-template-columns:36px 1fr;
  }
  .historyStats{
    grid-column:2;
    text-align:left;
  }
}


/* Phase 16.6 Ranking, admin rules & hotspot analytics */
.challengeAdminTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.challengeAdminTabs button{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.56);
  box-shadow:none;
}
.challengeAdminTabs button.active{
  color:#fff;
  background:rgba(255,7,58,.14);
  border-color:rgba(255,7,58,.28);
}
.challengeAdminView{
  margin-top:10px;
}
.adminRulesGrid{
  grid-template-columns:repeat(3,1fr);
}
.underdogRules{
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.018);
}
.underdogRuleGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.underdogRuleGrid label{
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.52);
  font-size:.78rem;
  font-weight:800;
}
.challengeAnalyticsGrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin-bottom:12px;
}
.challengeAnalyticsGrid article{
  min-height:95px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.challengeAnalyticsGrid small{
  color:rgba(255,255,255,.42);
}
.challengeAnalyticsGrid strong{
  margin-top:7px;
  font-size:1.35rem;
}
.challengeAnalyticsSplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.analyticsList{
  display:grid;
  gap:0;
}
.analyticsRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.analyticsRow:last-child{
  border-bottom:0;
}
.analyticsRow span{
  color:rgba(255,255,255,.56);
}
.analyticsRow b{
  text-align:right;
}
.adminLocationGrid{
  grid-template-columns:repeat(2,1fr);
}
.adminLocationAddress,
.adminLocationNotes{
  grid-column:1/-1;
}
.adminLocationNotes textarea{
  min-height:90px;
  resize:vertical;
}
@media(max-width:1050px){
  .challengeAnalyticsGrid{
    grid-template-columns:repeat(3,1fr);
  }
  .adminRulesGrid,
  .underdogRuleGrid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:700px){
  .challengeAnalyticsSplit{
    grid-template-columns:1fr;
  }
  .challengeAnalyticsGrid,
  .adminRulesGrid,
  .underdogRuleGrid,
  .adminLocationGrid{
    grid-template-columns:1fr;
  }
  .adminLocationAddress,
  .adminLocationNotes{
    grid-column:auto;
  }
}


/* Phase 16.7 Community map & public profiles */
.challengeMap{
  width:100%;
  height:480px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:#0d1118;
}
.challengeMapLegend{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.5);
  font-size:.75rem;
}
.challengeMapLegend span{
  display:flex;
  align-items:center;
  gap:6px;
}
.challengeMapLegend i{
  width:10px;
  height:10px;
  border-radius:50%;
}
.playerMarkerLegend{
  background:#39ff14;
  box-shadow:0 0 10px rgba(57,255,20,.5);
}
.locationMarkerLegend{
  background:#ff3150;
}
.mapPrivacy{
  margin-top:14px;
}
.mapPopup,.mapTooltip{
  display:grid;
  gap:4px;
  min-width:150px;
}
.mapPopup small{
  color:#ff3150;
}
.mapPopup strong,.mapTooltip strong{
  font-size:.95rem;
}
.mapPopup span,.mapTooltip span{
  color:#444;
  font-size:.8rem;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background:#fff;
}
.leaflet-tooltip{
  border:0;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.nearbyPlayerButtons{
  display:flex;
  gap:7px;
}
.challengeProfileModal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}
.challengeProfileModal.hidden{
  display:none;
}
.challengeProfileDialog{
  position:relative;
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  padding:28px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 5%,rgba(255,7,58,.18),transparent 30%),
    #11151d;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.challengeProfileClose{
  position:absolute;
  right:14px;
  top:14px;
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:1.45rem;
}
.challengeProfileHeader{
  display:flex;
  align-items:center;
  gap:16px;
  padding-right:46px;
}
.challengeProfileHeader small{
  color:rgba(255,255,255,.42);
}
.challengeProfileHeader h3{
  margin:5px 0 4px;
  font-size:1.6rem;
}
.challengeProfileHeader p{
  margin:0;
  color:rgba(255,255,255,.5);
}
.challengeProfileAvatar{
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  flex:0 0 auto;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,7,58,.28),rgba(57,255,20,.1));
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  font-size:1.8rem;
  font-weight:900;
}
.challengeProfileRank{
  margin-left:auto;
  color:#ff7185;
  font-size:1.15rem;
  font-weight:900;
}
.challengePublicStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:22px 0 12px;
}
.challengePublicStats article{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}
.challengePublicStats small{
  color:rgba(255,255,255,.42);
}
.challengePublicStats strong{
  margin-top:6px;
  font-size:1.22rem;
}
.challengeProfileDetails{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.challengeProfileDetails>div{
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.018);
}
.challengeProfileDetails small,
.challengeProfileDetails strong{
  display:block;
}
.challengeProfileDetails small{
  margin-bottom:6px;
  color:rgba(255,255,255,.42);
}
.challengeProfileActions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:22px;
}
@media(max-width:720px){
  .challengeMap{
    height:390px;
  }
  .challengePublicStats{
    grid-template-columns:repeat(2,1fr);
  }
  .challengeProfileDetails{
    grid-template-columns:1fr;
  }
}
@media(max-width:480px){
  .challengeProfileDialog{
    padding:20px;
  }
  .challengePublicStats{
    grid-template-columns:1fr;
  }
  .challengeProfileHeader{
    align-items:flex-start;
  }
}


/* Phase 16.8 Reward claims & merchandise fulfillment */
.rewardMilestone{
  position:relative;
}
.rewardMilestoneContent{
  flex:1;
}
.rewardMilestone button{
  margin-left:auto;
  white-space:nowrap;
}
.rewardClaimStatus{
  display:inline-block;
  margin-top:7px;
  padding:5px 8px;
  border-radius:999px;
  font-size:.68rem;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em;
}
.status-requested{
  color:#ffc55b;
  background:rgba(255,197,91,.1);
  border:1px solid rgba(255,197,91,.18);
}
.status-processing{
  color:#76b7ff;
  background:rgba(60,145,255,.1);
  border:1px solid rgba(60,145,255,.18);
}
.status-fulfilled{
  color:var(--green);
  background:rgba(57,255,20,.08);
  border:1px solid rgba(57,255,20,.18);
}
.status-rejected{
  color:#ff7185;
  background:rgba(255,7,58,.09);
  border:1px solid rgba(255,7,58,.18);
}
.rewardClaimModal{
  position:fixed;
  inset:0;
  z-index:4100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(8px);
}
.rewardClaimModal.hidden{
  display:none;
}
.rewardClaimDialog{
  position:relative;
  width:min(680px,100%);
  padding:28px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 5%,rgba(57,255,20,.09),transparent 28%),
    #11151d;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.rewardClaimDialog h3{
  margin:8px 0 9px;
  font-size:1.7rem;
}
.rewardClaimInfo{
  margin:0 0 20px;
  color:rgba(255,255,255,.55);
  line-height:1.55;
}
.rewardAddressField{
  grid-column:1/-1;
}
.rewardClaimActions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:20px;
}
.adminRewardClaimsList{
  display:grid;
  gap:12px;
}
.adminRewardClaimCard{
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.adminRewardClaimHeader{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.adminRewardClaimHeader small{
  color:#ff7185;
}
.adminRewardClaimHeader h4{
  margin:5px 0 4px;
}
.adminRewardClaimHeader p{
  margin:0;
  color:rgba(255,255,255,.48);
}
.adminRewardShipping{
  display:grid;
  gap:3px;
  margin:15px 0;
  padding:13px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.adminRewardShipping span{
  color:rgba(255,255,255,.52);
}
.adminRewardClaimCard label{
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.48);
  font-size:.78rem;
  font-weight:800;
}
.adminRewardClaimCard textarea{
  min-height:80px;
  resize:vertical;
}
.adminRewardActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
@media(max-width:620px){
  .rewardClaimDialog{
    padding:20px;
  }
  .rewardAddressField{
    grid-column:auto;
  }
  .rewardClaimActions{
    flex-direction:column;
  }
  .rewardClaimActions button{
    width:100%;
  }
  .rewardMilestone{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .rewardMilestone button{
    width:100%;
    margin-left:0;
  }
}


/* Phase 16.9 Safety, anti-spam & challenge lifecycle */
.challengeSafetyGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
}
.challengeSafetyGrid article{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.02);
}
.challengeSafetyGrid span{
  margin-bottom:auto;
  font-size:1.4rem;
}
.challengeSafetyGrid b{
  margin:12px 0 7px;
}
.challengeSafetyGrid p{
  margin:0;
  color:rgba(255,255,255,.5);
  line-height:1.5;
}
.challengeSafetyActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
@media(max-width:900px){
  .challengeSafetyGrid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:520px){
  .challengeSafetyGrid{
    grid-template-columns:1fr;
  }
}


/* Phase 17.0 Challenge Hub */
.challengeHubSummary{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:14px 0;
}
.challengeHubSummary article{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(15,19,26,.84);
}
.challengeHubSummary small{
  color:rgba(255,255,255,.42);
}
.challengeHubSummary strong{
  margin-top:7px;
  font-size:1.45rem;
}
.challengeHubTabs{
  display:flex;
  gap:7px;
}
.challengeHubTabs button{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.56);
  box-shadow:none;
}
.challengeHubTabs button.active{
  color:#fff;
  background:rgba(255,7,58,.14);
  border-color:rgba(255,7,58,.28);
}
.challengeGuide{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:challenge-step;
}
.challengeGuide li{
  position:relative;
  padding:13px 13px 13px 52px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.02);
  counter-increment:challenge-step;
}
.challengeGuide li::before{
  content:counter(challenge-step);
  position:absolute;
  left:13px;
  top:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border-radius:9px;
  background:rgba(255,7,58,.13);
  color:#ff7185;
  font-weight:900;
}
.challengeGuide b,.challengeGuide span{
  display:block;
}
.challengeGuide span{
  margin-top:4px;
  color:rgba(255,255,255,.46);
}
@media(max-width:850px){
  .challengeHubSummary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .challengeHubSummary{grid-template-columns:1fr}
}


/* Phase 17.1 PWA */
.pwaInstallBanner{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:3500;
  width:min(680px,calc(100% - 24px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(9,12,18,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
}
.pwaInstallBanner.hidden{display:none}
.pwaInstallBanner>div{flex:1}
.pwaInstallBanner strong,.pwaInstallBanner span{display:block}
.pwaInstallBanner span{margin-top:4px;color:rgba(255,255,255,.48)}
@media(max-width:620px){
  .pwaInstallBanner{
    align-items:stretch;
    flex-direction:column;
  }
  .pwaInstallBanner button{width:100%}
}


/* Phase 17.2 Release hardening */
.systemDiagnosticsPanel{
  margin-top:14px;
}
.systemDiagnosticsGrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin-top:18px;
}
.systemDiagnosticsGrid article{
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.systemDiagnosticsGrid small{
  color:rgba(255,255,255,.42);
}
.systemDiagnosticsGrid strong{
  margin-top:7px;
  font-size:1.15rem;
}
.systemDiagnosticsTimestamp{
  margin:14px 0 0;
  color:rgba(255,255,255,.4);
  font-size:.8rem;
}
@media(max-width:980px){
  .systemDiagnosticsGrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .systemDiagnosticsGrid{grid-template-columns:1fr 1fr}
}


/* Phase 17.3 QR Check-in */
.qrDialog{
  width:min(520px,100%);
  text-align:center;
}
.qrDialog canvas{
  display:block;
  margin:20px auto;
  padding:10px;
  border-radius:16px;
  background:#fff;
}
.challengeQrStatus{
  margin:14px 0;
  padding:12px;
  border-radius:12px;
  background:rgba(57,255,20,.05);
  color:rgba(255,255,255,.72);
  font-weight:900;
}


/* Phase 17.4 Ranking archive */
.rankingArchiveForm{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:10px;
  margin-bottom:16px;
}
.rankingArchivesList{
  display:grid;
  gap:8px;
}
.rankingArchiveRow{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  padding:14px;
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.07);
}
.rankingArchiveRow span b,.rankingArchiveRow span small{
  display:block;
}
.rankingArchiveRow span small{
  margin-top:4px;
  color:rgba(255,255,255,.42);
}
@media(max-width:750px){
  .rankingArchiveForm{grid-template-columns:1fr}
}


/* Phase 17.5 Exports */
.challengeExportActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:560px){
  .challengeExportActions button{width:100%}
}


/* Phase 17.6 Capacitor/mobile safe areas */
body{
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.topNav{
  padding-top:calc(18px + env(safe-area-inset-top));
}
.pwaInstallBanner{
  bottom:calc(18px + env(safe-area-inset-bottom));
}


/* Phase 17.7 Challenge notifications */
.challengeNotificationsList{
  display:grid;
  gap:8px;
}
.challengeNotificationItem{
  width:100%;
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  text-align:left;
  padding:13px;
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.07);
}
.challengeNotificationItem.unread{
  border-color:rgba(255,7,58,.28);
  background:rgba(255,7,58,.045);
}
.challengeNotificationItem>span{
  color:#ff7185;
}
.challengeNotificationItem strong,
.challengeNotificationItem p,
.challengeNotificationItem small{
  display:block;
}
.challengeNotificationItem p{
  margin:4px 0;
  color:rgba(255,255,255,.58);
}
.challengeNotificationItem small{
  color:rgba(255,255,255,.38);
}


/* Phase 17.8 Public live board */
.publicLiveBody{
  min-height:100vh;
  display:grid;
  place-items:center;
  margin:0;
  padding:24px;
  background:radial-gradient(circle at 50% 0,rgba(255,7,58,.17),transparent 35%),#080b10;
}
.publicLiveBoard{
  width:min(900px,100%);
  text-align:center;
}
.publicLiveBoard h1{font-size:clamp(1.5rem,4vw,3rem)}
.publicLiveScore{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin:30px 0;
}
.publicLiveScore article{
  padding:28px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:rgba(255,255,255,.025);
}
.publicLiveScore small,.publicLiveScore strong{display:block}
.publicLiveScore small{font-size:1.15rem}
.publicLiveScore strong{margin-top:16px;font-size:clamp(4rem,12vw,9rem)}
.publicLiveScore>span{font-weight:900;color:#ff7185}
.publicLiveMeta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.publicLiveMeta span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.04)}


/* Phase 17.9 Achievements */
.challengeAchievementsList{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}
.challengeAchievement{
  min-height:145px;
  display:flex;
  gap:13px;
  padding:17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.018);
  opacity:.48;
}
.challengeAchievement.unlocked{
  opacity:1;
  border-color:rgba(57,255,20,.18);
  background:rgba(57,255,20,.03);
}
.challengeAchievement>span{font-size:1.6rem}
.challengeAchievement strong,.challengeAchievement p,.challengeAchievement small{display:block}
.challengeAchievement p{margin:7px 0;color:rgba(255,255,255,.5)}
.challengeAchievement small{color:rgba(255,255,255,.38)}
.challengeAchievement.unlocked small{color:var(--green)}
@media(max-width:900px){.challengeAchievementsList{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.challengeAchievementsList{grid-template-columns:1fr}}


/* Phase 18.0 onboarding & privacy center */
.onboardingDialog{width:min(820px,100%)}
.onboardingSteps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0;
}
.onboardingSteps article{
  position:relative;
  min-height:135px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.onboardingSteps span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:rgba(255,7,58,.13);
  color:#ff7185;
  font-weight:900;
}
.onboardingSteps b,.onboardingSteps p{display:block}
.onboardingSteps b{margin-top:14px}
.onboardingSteps p{margin:6px 0 0;color:rgba(255,255,255,.5)}
@media(max-width:620px){.onboardingSteps{grid-template-columns:1fr}}


/* Phase 18.1 Result entry */
.resultDialog{width:min(900px,100%)}
.resultDialog .challengeFormGrid{grid-template-columns:repeat(2,1fr)}
@media(max-width:650px){.resultDialog .challengeFormGrid{grid-template-columns:1fr}}


/* Phase 18.2 Location administration */
.adminLocationActions{display:flex;gap:9px;margin:14px 0}
.adminLocationsManageList{display:grid;gap:8px;margin-top:18px}
.adminLocationManageRow{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:13px;border:1px solid rgba(255,255,255,.07);
  border-radius:13px;background:rgba(255,255,255,.02)
}
.adminLocationManageRow strong,.adminLocationManageRow span{display:block}
.adminLocationManageRow span{margin-top:4px;color:rgba(255,255,255,.44)}
.adminLocationManageRow>div:last-child{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:650px){.adminLocationManageRow{align-items:flex-start;flex-direction:column}}


/* ==========================================================
   INFIGHT DARTS UX 1.1
   Navigation & Information Architecture
   ========================================================== */

:root{
  --ux-bg:#0B0B0D;
  --ux-surface:#17181C;
  --ux-surface-raised:#1d1f24;
  --ux-border:rgba(255,255,255,.08);
  --ux-text:#FFFFFF;
  --ux-muted:rgba(255,255,255,.58);
  --ux-red:#E53935;
  --ux-radius-m:14px;
  --ux-radius-l:18px;
  --ux-nav-height:72px;
}

body.appAuthenticated{
  padding-left:0!important;
  padding-top:var(--ux-nav-height);
  background:var(--ux-bg);
}

body.appAuthenticated #header{
  display:none;
}

.topNav{
  position:fixed!important;
  inset:0 0 auto 0!important;
  z-index:2200!important;
  width:100%!important;
  height:var(--ux-nav-height)!important;
  display:grid!important;
  grid-template-columns:minmax(210px,1fr) auto minmax(150px,1fr)!important;
  align-items:center!important;
  gap:24px!important;
  padding:0 48px!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid var(--ux-border)!important;
  background:rgba(11,11,13,.96)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px);
  transform:none!important;
}

.topNav.hidden{display:none!important}

.uxNavBrand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  min-width:0;
}

.uxNavBrandMark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(229,57,53,.45);
  border-radius:10px;
  color:#fff;
  background:#111216;
  font-family:Arial,sans-serif;
  font-weight:900;
}

.uxNavBrand span:last-child,
.uxNavBrand strong,
.uxNavBrand small{
  display:block;
}

.uxNavBrand strong{
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  letter-spacing:.045em;
}

.uxNavBrand small{
  margin-top:3px;
  color:rgba(255,255,255,.38);
  font-family:Inter,Arial,sans-serif;
  font-size:10px;
  letter-spacing:.12em;
}

.uxNavItems{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:100%;
}

.uxNavItems button{
  position:relative;
  min-width:104px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:0;
  border-radius:0;
  color:rgba(255,255,255,.56);
  background:transparent!important;
  box-shadow:none!important;
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  text-transform:none;
}

.uxNavItems button::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:var(--ux-red);
  transform:scaleX(0);
  transition:transform 220ms ease-out;
}

.uxNavItems button:hover{
  color:#fff;
}

.uxNavItems button.active{
  color:#fff!important;
  background:transparent!important;
}

.uxNavItems button.active::after{
  transform:scaleX(1);
}

.uxNavItems button span{
  font-size:15px;
  line-height:1;
}

.uxNavItems button b{
  font-weight:600;
}

.uxNavAccount{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.uxNotificationButton,
.uxAccountButton{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid var(--ux-border)!important;
  border-radius:10px!important;
  color:#fff!important;
  background:var(--ux-surface)!important;
  box-shadow:none!important;
}

.uxAccountButton{
  border-color:rgba(229,57,53,.32)!important;
}

.sidebarBackdrop,
.sidebarToggle{
  display:none!important;
}

.screen{
  min-height:calc(100vh - var(--ux-nav-height));
}

.uxModuleScreen{
  background:
    linear-gradient(180deg,rgba(229,57,53,.035),transparent 260px),
    var(--ux-bg);
}

.uxModulePage{
  width:min(1440px,calc(100% - 96px));
  margin:0 auto;
  padding:64px 0 96px;
}

.uxModuleHero{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  min-height:220px;
  padding:48px;
  overflow:hidden;
  border-radius:24px;
  background:
    linear-gradient(100deg,rgba(229,57,53,.12),transparent 46%),
    var(--ux-surface);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.uxModuleHero::before{
  content:"";
  position:absolute;
  left:48px;
  top:0;
  width:96px;
  height:2px;
  background:var(--ux-red);
}

.uxModuleHero>div,
.uxModuleHero>button{
  position:relative;
  z-index:1;
}

.uxEyebrow{
  margin:0 0 12px;
  color:var(--ux-red);
  font-family:Inter,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}

.uxModuleHero h1{
  max-width:760px;
  margin:0;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(32px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.uxModuleHero p:not(.uxEyebrow){
  max-width:680px;
  margin:18px 0 0;
  color:var(--ux-muted);
  font-family:Inter,Arial,sans-serif;
  font-size:18px;
  line-height:1.55;
}

.uxPrimaryAction{
  flex:0 0 auto;
  min-height:48px;
  padding:0 24px!important;
  border-radius:14px!important;
  color:#fff!important;
  background:var(--ux-red)!important;
  box-shadow:none!important;
  font-family:Inter,Arial,sans-serif;
  text-transform:none;
}

.uxModuleGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:32px;
}

.uxModuleCard{
  position:relative;
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:32px!important;
  overflow:hidden;
  border:0!important;
  border-radius:18px!important;
  color:#fff!important;
  text-align:left;
  background:var(--ux-surface)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.12)!important;
  text-transform:none!important;
  transition:transform 220ms ease-out,background 220ms ease-out!important;
}

.uxModuleCard::before{
  content:"";
  position:absolute;
  left:32px;
  top:0;
  width:56px;
  height:2px;
  background:rgba(255,255,255,.16);
}

.uxModuleCardFeatured::before{
  background:var(--ux-red);
}

.uxModuleCard:hover{
  transform:translateY(-3px);
  background:var(--ux-surface-raised)!important;
}

.uxModuleIcon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:auto;
  border:1px solid var(--ux-border);
  border-radius:14px;
  color:#fff;
  background:#111216;
  font-size:20px;
}

.uxModuleCard small{
  margin-top:32px;
  color:var(--ux-red);
  font-family:Inter,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

.uxModuleCard strong{
  margin-top:9px;
  font-family:Inter,Arial,sans-serif;
  font-size:24px;
  letter-spacing:-.02em;
}

.uxModuleCard p{
  margin:10px 0 24px;
  color:var(--ux-muted);
  font-family:Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
}

.uxModuleCard i{
  margin-top:auto;
  color:rgba(255,255,255,.72);
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  font-style:normal;
}

.uxContextPanel{
  margin-top:32px;
  padding:32px;
  border-radius:18px;
  background:var(--ux-surface);
}

.uxContextHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.uxContextHead small{
  color:var(--ux-red);
  font-family:Inter,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

.uxContextHead h2{
  margin:8px 0 0;
  font-family:Inter,Arial,sans-serif;
  font-size:24px;
}

.uxContextHead>span{
  color:rgba(255,255,255,.38);
  font-size:13px;
}

.uxActionRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.uxActionRow button{
  min-height:44px;
  padding:0 18px!important;
  border:1px solid var(--ux-border)!important;
  border-radius:10px!important;
  color:#fff!important;
  background:transparent!important;
  box-shadow:none!important;
  text-transform:none!important;
}

.uxProfileHero{
  align-items:center;
}

.uxProfileIdentity{
  display:flex;
  align-items:center;
  gap:24px;
}

.uxProfileAvatar{
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  flex:0 0 auto;
  border:1px solid rgba(229,57,53,.35);
  border-radius:18px;
  background:#111216;
  font-family:Inter,Arial,sans-serif;
  font-size:32px;
  font-weight:700;
}

/* Preserve the five-area hierarchy while existing screens are open. */
body[data-active-nav="competition"] .screen:not(.hidden),
body[data-active-nav="challenge"] .screen:not(.hidden),
body[data-active-nav="community"] .screen:not(.hidden),
body[data-active-nav="profile"] .screen:not(.hidden){
  animation:uxReveal 220ms ease-out both;
}

@keyframes uxReveal{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

@media(max-width:1100px){
  .topNav{
    grid-template-columns:auto 1fr auto!important;
    padding:0 24px!important;
  }
  .uxNavBrand small{display:none}
  .uxNavItems button{
    min-width:86px;
    padding:0 8px;
  }
  .uxModulePage{
    width:min(100% - 48px,1440px);
  }
}

@media(max-width:760px){
  :root{--ux-nav-height:72px}

  body.appAuthenticated{
    padding-top:0;
    padding-bottom:calc(var(--ux-nav-height) + env(safe-area-inset-bottom));
  }

  .topNav{
    inset:auto 0 0 0!important;
    grid-template-columns:1fr!important;
    height:calc(var(--ux-nav-height) + env(safe-area-inset-bottom))!important;
    padding:0 8px env(safe-area-inset-bottom)!important;
    border-top:1px solid var(--ux-border)!important;
    border-bottom:0!important;
  }

  .uxNavBrand,
  .uxNavAccount{
    display:none;
  }

  .uxNavItems{
    width:100%;
    justify-content:space-around;
    gap:0;
  }

  .uxNavItems button{
    min-width:0;
    width:20%;
    height:72px;
    flex-direction:column;
    gap:5px;
    padding:7px 2px 5px;
    font-size:11px;
  }

  .uxNavItems button::after{
    left:28%;
    right:28%;
    top:0;
    bottom:auto;
  }

  .uxNavItems button span{
    font-size:18px;
  }

  .screen{
    min-height:100vh;
  }

  .uxModulePage{
    width:calc(100% - 40px);
    padding:32px 0 48px;
  }

  .uxModuleHero{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding:32px 24px;
  }

  .uxModuleHero::before{
    left:24px;
  }

  .uxModuleHero p:not(.uxEyebrow){
    font-size:16px;
  }

  .uxPrimaryAction{
    width:100%;
  }

  .uxModuleGrid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
  }

  .uxModuleCard{
    min-height:230px;
    padding:24px!important;
  }

  .uxModuleCard::before{
    left:24px;
  }

  .uxContextPanel{
    margin-top:16px;
    padding:24px;
  }

  .uxContextHead{
    align-items:flex-start;
    flex-direction:column;
  }

  .uxActionRow{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .uxActionRow button{
    width:100%;
  }

  .uxProfileIdentity{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:430px){
  .uxModulePage{width:calc(100% - 32px)}
  .uxActionRow{grid-template-columns:1fr}
  .uxNavItems button b{font-size:10px}
}


/* UX 1.2 – unified product design */
:root{
  --brand-black:#0B0B0D;--brand-graphite:#17181C;--brand-slate:#262A31;
  --brand-white:#FFFFFF;--brand-red:#E53935;--brand-success:#2ECC71;
}
body,button,input,select,textarea{font-family:Inter,Arial,sans-serif!important}
body{background:var(--brand-black)!important;background-image:none!important;color:#fff}
h1,h2,h3,h4,.digital-font,.graffiti-font{font-family:Inter,Arial,sans-serif!important;letter-spacing:-.02em!important;text-transform:none!important}
h3{color:#fff!important}
button{min-height:44px;margin-top:0;padding:0 18px;border:1px solid transparent;border-radius:14px;color:#fff;background:var(--brand-red);box-shadow:none;font-size:14px;font-weight:700;text-transform:none;letter-spacing:0}
button:hover{transform:translateY(-1px);box-shadow:none}
button.secondary,button.secondaryButton{background:transparent;border-color:rgba(255,255,255,.12);color:#fff}
input,select,textarea{width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#101216;color:#fff;font-size:14px;box-shadow:none}
input:focus,select:focus,textarea:focus{border-color:rgba(229,57,53,.7);box-shadow:0 0 0 3px rgba(229,57,53,.12)}
.card,.panel,.dashPanel,.challengePanel,.tournamentCard,.leagueCard,.matchCard,.statCard,.modalContent,.challengeProfileDialog,.rewardClaimDialog{border:0!important;border-radius:18px!important;background:var(--brand-graphite)!important;box-shadow:0 12px 34px rgba(0,0,0,.18)!important}
.modal,.challengeProfileModal,.rewardClaimModal{background:rgba(0,0,0,.78)!important;backdrop-filter:blur(10px)}
.screen:not(#dashboardScreen):not(.uxModuleScreen){background:linear-gradient(180deg,rgba(229,57,53,.025),transparent 220px),var(--brand-black)!important}
.screen:not(#dashboardScreen):not(.uxModuleScreen)>*:first-child{width:min(1440px,calc(100% - 96px));margin-left:auto;margin-right:auto}
td strong,td b,.statValue,.score,.average,.checkout,.timer{font-family:"JetBrains Mono",monospace!important}

/* Login */
.uxLoginScreen{min-height:100vh;display:grid!important;place-items:center;padding:48px;background:radial-gradient(circle at 15% 20%,rgba(229,57,53,.12),transparent 32%),linear-gradient(135deg,#0B0B0D,#111216)!important}
.uxLoginStage{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:64px;align-items:center}
.uxLoginBrand{max-width:680px}.uxLoginLogo{width:180px;max-height:80px;margin-bottom:48px;object-fit:contain;object-position:left center}
.uxLoginBrand h1{margin:0;font-size:clamp(44px,7vw,72px);line-height:.98;letter-spacing:-.055em!important}
.uxLoginBrand>p:not(.uxEyebrow){max-width:620px;margin:24px 0 0;color:rgba(255,255,255,.58);font-size:18px;line-height:1.65}
.uxLoginFeatureRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}.uxLoginFeatureRow span{padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(255,255,255,.65);font-size:12px}
.uxLoginCard{display:grid;gap:20px;padding:40px;border-radius:24px;background:var(--brand-graphite);box-shadow:0 30px 90px rgba(0,0,0,.32)}
.uxLoginCard h2{margin:8px 0;font-size:32px}.uxLoginCard>div>p:last-child{margin:0;color:rgba(255,255,255,.5)}
.uxLoginCard label{display:grid;gap:8px;color:rgba(255,255,255,.7);font-size:13px;font-weight:600}.uxLoginSubmit{width:100%;min-height:52px}.uxLoginError{min-height:20px;margin:0;color:#ff7777;font-size:13px}

/* Dashboard cockpit */
.uxDashboard{width:min(1440px,calc(100% - 96px));margin:0 auto;padding:48px 0 96px}
.uxDashboardHero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;min-height:230px;padding:48px;overflow:hidden;border-radius:24px;background:linear-gradient(105deg,rgba(229,57,53,.12),transparent 48%),var(--brand-graphite)}
.uxDashboardHero::before{content:"";position:absolute;left:48px;top:0;width:96px;height:2px;background:var(--brand-red)}
.uxDashboardIdentity{display:flex;align-items:center;gap:24px}.uxDashboardAvatar{display:grid;place-items:center;width:80px;height:80px;flex:0 0 auto;border:1px solid rgba(229,57,53,.36);border-radius:18px;background:#111216;font-size:32px;font-weight:700}
.uxDashboardIdentity h1{margin:0;font-size:clamp(32px,4vw,48px);line-height:1.05}.uxDashboardIdentity p:last-child{margin:12px 0 0;color:rgba(255,255,255,.55);font-size:17px}
.uxDashboardHeroStats{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px}.uxDashboardHeroStats article{min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.018)}
.uxDashboardHeroStats small{color:rgba(255,255,255,.42);font-size:12px}.uxDashboardHeroStats strong{margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:20px}
.uxDashboardQuickStart{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.uxDashboardQuickStart button{min-height:104px;display:flex;align-items:center;gap:16px;padding:20px;text-align:left;background:var(--brand-graphite);border:0;border-radius:18px}
.uxDashboardQuickStart span{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:14px;background:#111216;font-size:19px}.uxDashboardQuickStart strong,.uxDashboardQuickStart small{display:block}.uxDashboardQuickStart small{margin-top:5px;color:rgba(255,255,255,.46)!important}
.uxDashboardGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:24px}.uxDashboardPanel{grid-column:span 6;min-height:260px;padding:32px;border-radius:18px;background:var(--brand-graphite)}.uxDashboardNext{grid-column:span 7}.uxDashboardGrid>.uxDashboardPanel:nth-child(2){grid-column:span 5}
.uxPanelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.uxPanelHead small{color:var(--brand-red)!important;font-size:11px;font-weight:700;letter-spacing:.12em}.uxPanelHead h2{margin:8px 0 0;font-size:24px}
.uxStatusBadge{padding:6px 9px;border-radius:999px;background:rgba(229,57,53,.14);font-size:11px;font-weight:700}.uxStatusBadge.success{color:var(--brand-success);background:rgba(46,204,113,.09)}
.uxDashboardPanel>p{margin:32px 0;color:rgba(255,255,255,.55);line-height:1.65}.uxTextAction,.uxIconAction,.uxDangerText{min-height:44px;padding:0;color:rgba(255,255,255,.72);background:transparent;border:0}.uxIconAction{width:44px;border:1px solid rgba(255,255,255,.1);border-radius:10px}.uxDangerText{color:#ff7777}
.uxMetricGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:36px}.uxMetricGrid div{min-height:104px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;border-radius:14px;background:#111317}.uxMetricGrid strong{font-family:"JetBrains Mono",monospace;font-size:25px}.uxMetricGrid span{margin-top:6px;color:rgba(255,255,255,.42);font-size:12px}
.uxRecentForm{display:flex;gap:10px;margin-top:32px}.uxRecentForm>span{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font-family:"JetBrains Mono",monospace;font-weight:700}.uxRecentForm .win{color:var(--brand-success);background:rgba(46,204,113,.09)}.uxRecentForm .loss{color:#ff7777;background:rgba(229,57,53,.1)}.uxRecentForm .neutral,.uxRecentForm .empty{width:auto;padding:0 12px;color:rgba(255,255,255,.45);background:#111317}
.uxProgressTrack{height:10px;overflow:hidden;margin-top:40px;border-radius:999px;background:#101216}.uxProgressTrack i{display:block;width:0;height:100%;border-radius:inherit;background:var(--brand-red);transition:width 260ms ease-out}.uxMono{font-family:"JetBrains Mono",monospace}
.uxStatusRows{display:grid;margin-top:28px}.uxStatusRows div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}.uxStatusRows span{color:rgba(255,255,255,.48)}
.uxDashboardFooter{display:flex;justify-content:flex-end;gap:20px;margin-top:32px;padding:24px 0}

@media(max-width:1100px){.uxDashboard,.screen:not(#dashboardScreen):not(.uxModuleScreen)>*:first-child{width:min(100% - 48px,1440px)}.uxDashboardHero{grid-template-columns:1fr}.uxDashboardQuickStart{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.uxLoginScreen{padding:24px}.uxLoginStage{grid-template-columns:1fr;gap:32px}.uxLoginBrand{display:none}.uxLoginCard{padding:28px 24px}.uxDashboard{width:calc(100% - 40px);padding:32px 0 48px}.uxDashboardHero{padding:32px 24px}.uxDashboardHero::before{left:24px}.uxDashboardIdentity{align-items:flex-start;flex-direction:column}.uxDashboardHeroStats{grid-template-columns:1fr}.uxDashboardQuickStart{grid-template-columns:1fr}.uxDashboardGrid{grid-template-columns:1fr;gap:12px}.uxDashboardPanel,.uxDashboardNext,.uxDashboardGrid>.uxDashboardPanel:nth-child(2){grid-column:auto;min-height:auto;padding:24px}.screen:not(#dashboardScreen):not(.uxModuleScreen)>*:first-child{width:calc(100% - 40px)}}
@media(max-width:480px){.uxMetricGrid{grid-template-columns:1fr}.uxDashboardFooter{align-items:flex-end;flex-direction:column}}


/* ==========================================================
   INFIGHT DARTS UX 1.3
   Challenge Experience, authentication boundary, account menu
   ========================================================== */

/* Login is a completely isolated entry screen. */
body.loginOnly{
  padding:0!important;
  overflow:auto;
}

body.loginOnly #header,
body.loginOnly #topNav,
body.loginOnly #sidebarBackdrop,
body.loginOnly .screen:not(#loginScreen),
body.loginOnly .pwaInstallBanner{
  display:none!important;
}

body.loginOnly #loginScreen{
  display:grid!important;
  position:relative;
  z-index:5000;
}

/* Discoverable account and logout menu */
.uxAccountMenu{
  position:fixed;
  right:48px;
  top:64px;
  z-index:2600;
  width:230px;
  display:grid;
  gap:4px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#17181C;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}

.uxAccountMenu.hidden{display:none}

.uxAccountMenu button{
  width:100%;
  min-height:42px;
  justify-content:flex-start;
  padding:0 12px;
  text-align:left;
  background:transparent;
  border:0;
  color:rgba(255,255,255,.72);
}

.uxAccountMenu button:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.uxAccountMenu hr{
  width:100%;
  margin:4px 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
}

.uxAccountMenu .logout{color:#ff7777}

.uxProfileHeroActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Challenge becomes a guided workspace instead of one long page. */
.uxChallengeScreen{
  padding-top:0;
  background:var(--brand-black)!important;
}

.uxChallengeNav{
  position:sticky;
  top:var(--ux-nav-height);
  z-index:1200;
  width:min(1440px,calc(100% - 96px));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  margin:0 auto;
  padding:16px 0;
  background:rgba(11,11,13,.94);
  backdrop-filter:blur(16px);
}

.uxChallengeNav button{
  position:relative;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 12px;
  color:rgba(255,255,255,.48);
  background:transparent;
  border:0;
  border-radius:12px;
}

.uxChallengeNav button span{
  font-family:"JetBrains Mono",monospace;
  color:rgba(255,255,255,.28);
  font-size:11px;
}

.uxChallengeNav button b{
  font-size:13px;
}

.uxChallengeNav button.active{
  color:#fff;
  background:#17181C;
}

.uxChallengeNav button.active::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:2px;
  background:var(--brand-red);
}

.uxChallengeNav button.active span{color:var(--brand-red)}

.uxChallengeSectionHidden{
  display:none!important;
}

.uxChallengeAuxiliary{
  display:none!important;
}

#challengesScreen .challengesPage,
#challengesScreen .challengePage,
#challengesScreen>.challengeContainer,
#challengesScreen>.challengeMain{
  padding-top:24px;
}

#challengesScreen .uxChallengeViewSection{
  animation:uxChallengeReveal 220ms ease-out both;
}

@keyframes uxChallengeReveal{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

#challengesScreen .challengeHero{
  min-height:210px;
  margin-top:16px;
  padding:40px;
  border-radius:24px;
  background:
    linear-gradient(110deg,rgba(229,57,53,.13),transparent 52%),
    #17181C;
}

#challengesScreen .challengePanel{
  border-radius:18px!important;
  background:#17181C!important;
}

#challengesScreen .challengeGrid,
#challengesScreen .challengeGrid.bottom{
  gap:16px;
}

#challengeComposer:not(.hidden){
  display:block!important;
}

#challengeComposer:not(.hidden).uxChallengeSectionHidden{
  display:block!important;
}

/* The website and app use the same red-led palette. */
@media(max-width:760px){
  .uxAccountMenu{
    right:12px;
    top:auto;
    bottom:calc(78px + env(safe-area-inset-bottom));
  }

  .uxChallengeNav{
    top:0;
    width:100%;
    overflow-x:auto;
    grid-template-columns:repeat(5,minmax(118px,1fr));
    padding:8px 12px;
  }

  .uxChallengeNav button{
    min-height:56px;
    flex-direction:column;
    gap:3px;
  }

  .uxChallengeNav button.active::after{
    left:20%;
    right:20%;
  }

  .uxProfileHeroActions{
    width:100%;
  }

  .uxProfileHeroActions button{
    flex:1;
  }
}


/* ==========================================================
   INFIGHT-DARTS UX 1.4
   Strict guest/authenticated shell separation
   ========================================================== */

.authBootCover{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#0B0B0D;
}

.authBootCover.hidden{
  display:none!important;
}

.authBootMark{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(229,57,53,.45);
  border-radius:15px;
  color:#fff;
  background:#111216;
  font-size:22px;
  font-weight:800;
}

/* No UI is shown while the saved session is being checked. */
body.authPending #loginScreen,
body.authPending #topNav,
body.authPending #header,
body.authPending .screen,
body.authPending .pwaInstallBanner{
  display:none!important;
}

/* Guest mode: exactly one surface exists. */
body.loginOnly #loginScreen{
  display:grid!important;
}

body.loginOnly #dashboardScreen,
body.loginOnly #competitionHubScreen,
body.loginOnly #communityHubScreen,
body.loginOnly #profileHubScreen,
body.loginOnly #challengesScreen,
body.loginOnly #ligaHomeScreen,
body.loginOnly #rulesScreen,
body.loginOnly #playersScreen,
body.loginOnly #permissionsScreen,
body.loginOnly #tournamentsScreen,
body.loginOnly #tournamentDetailScreen,
body.loginOnly #scheduleScreen,
body.loginOnly #tableScreen,
body.loginOnly #notificationsScreen,
body.loginOnly #statisticsScreen,
body.loginOnly #matchCenterScreen,
body.loginOnly #topNav,
body.loginOnly #header,
body.loginOnly #uxAccountMenu,
body.loginOnly .pwaInstallBanner{
  display:none!important;
}

/* Authenticated mode: login marketing is physically removed from layout. */
body.appAuthenticated #loginScreen,
body.appAuthenticated .uxLoginScreen,
#loginScreen.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body.appAuthenticated #topNav:not(.hidden){
  display:grid!important;
}

/* The authenticated app always starts below its own navigation. */
body.appAuthenticated{
  min-height:100vh;
  background:#0B0B0D!important;
}

/* Mobile authenticated shell also excludes every login element. */
@media(max-width:760px){
  body.appAuthenticated #loginScreen{
    display:none!important;
  }
}


/* UX 1.5 – Match Center Experience */
.uxMatchCenterScreen{background:#0B0B0D!important}
.uxMatchCenterPage{width:min(1560px,calc(100% - 64px));margin:0 auto;padding:40px 0 96px}
.uxMatchCenterHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.uxMatchCenterHeader h1{margin:0;font-size:clamp(32px,4vw,48px)}
.uxMatchCenterHeader p:last-child{margin:12px 0 0;color:rgba(255,255,255,.5)}
.uxMatchCenterHeaderActions{display:flex;gap:8px}
.uxMatchLauncher,.uxMatchLauncherEmpty{padding:32px;border-radius:24px;background:#17181C}
.uxMatchLauncherHead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.uxMatchLauncherHead small,.uxLegHistory small{color:#E53935;font-size:11px;font-weight:700;letter-spacing:.12em}
.uxMatchLauncherHead h2,.uxLegHistory h2{margin:8px 0 0}
.uxMatchLauncherHead>span{color:rgba(255,255,255,.4)}
.uxMatchLauncherList{display:grid;gap:10px}
.uxMatchLauncherCard{width:100%;min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px;text-align:left;border:1px solid rgba(255,255,255,.07);background:#111317}
.uxMatchLauncherCard:hover{border-color:rgba(229,57,53,.35);background:#1b1d22}
.uxMatchLauncherCard small,.uxMatchLauncherCard strong,.uxMatchLauncherCard span{display:block}
.uxMatchLauncherCard small{color:rgba(255,255,255,.38)}
.uxMatchLauncherCard strong{margin:7px 0;font-size:20px}
.uxMatchLauncherCard strong i{color:#E53935;font-style:normal}
.uxMatchLauncherCard span{color:rgba(255,255,255,.5)}
.uxMatchLauncherCard>b{color:rgba(255,255,255,.7);white-space:nowrap}
.uxMatchLauncherEmpty{min-height:420px;display:grid;place-items:center;align-content:center;text-align:center}
.uxMatchLauncherEmpty>span{font-size:42px}.uxMatchLauncherEmpty h2{margin:18px 0 8px}
.uxMatchLauncherEmpty p{max-width:520px;margin:0 0 22px;color:rgba(255,255,255,.5)}
.uxMatchLauncherEmpty>div{display:flex;gap:8px}
.uxLiveMatch{display:grid;gap:16px}
.uxLiveMatchTop{min-height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 20px;border-radius:16px;background:#17181C}
.uxLiveMatchTop>div{text-align:center}.uxLiveMatchTop small,.uxLiveMatchTop strong{display:block}
.uxLiveMatchTop small{color:#E53935;font-size:10px;letter-spacing:.12em}
.uxLiveMatchTop strong{margin-top:4px;font-family:"JetBrains Mono",monospace}
.uxBackAction,.uxDangerOutline{justify-self:start;background:transparent;border-color:rgba(255,255,255,.1)}
.uxDangerOutline{justify-self:end;color:#ff7777;border-color:rgba(229,57,53,.22)}
.uxLiveScoreboard{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(440px,1.45fr) minmax(240px,.72fr);gap:16px;align-items:stretch}
.uxLivePlayer,.uxLiveThrow,.uxLegHistory{border-radius:20px;background:#17181C}
.uxLivePlayer{min-height:570px;display:flex;flex-direction:column;padding:28px;opacity:.66;border:1px solid transparent}
.uxLivePlayer.active{opacity:1;border-color:rgba(229,57,53,.34)}
.uxLivePlayerHead{display:flex;align-items:center;gap:14px}
.uxLivePlayerHead>span{display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:#101216;font-weight:800}
.uxLivePlayerHead small{color:#E53935;font-size:10px;letter-spacing:.1em}
.uxLivePlayerHead h2{margin:5px 0 0;font-size:20px}
.uxLiveScore{margin:auto 0;text-align:center;font-family:"JetBrains Mono",monospace;font-size:clamp(72px,9vw,132px);line-height:1;letter-spacing:-.08em}
.uxLivePlayerMetrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uxLivePlayerMetrics div{min-height:76px;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border-radius:12px;background:#111317}
.uxLivePlayerMetrics b{font-family:"JetBrains Mono",monospace;font-size:18px}
.uxLivePlayerMetrics span{margin-top:5px;color:rgba(255,255,255,.38);font-size:11px}
.uxLivePlayer>p{margin:16px 0 0;color:rgba(255,255,255,.38);text-align:center;font-size:11px}
.uxLiveThrow{padding:24px}
.uxLiveTurnHead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.uxLiveTurnHead small{color:#E53935;font-size:10px;letter-spacing:.12em}.uxLiveTurnHead h2{margin:6px 0 0}
.uxLiveTurnHead>strong{font-family:"JetBrains Mono",monospace;font-size:42px}
.uxLiveDarts{min-height:86px;display:flex;align-items:center;justify-content:center;margin:18px 0;padding:12px;border-radius:14px;background:#101216}
.uxMultiplierSwitch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.uxMultiplierSwitch button{background:#111317;border-color:rgba(255,255,255,.07)}
.uxMultiplierSwitch button.active{background:#E53935;border-color:#E53935}
.uxDartKeypad .keypadNumbers{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:6px!important}
.uxDartKeypad .keypadBottom{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;margin-top:6px}
.uxDartKeypad .numKey{min-width:0!important;min-height:52px!important;padding:0!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:10px!important;color:#fff!important;background:#111317!important;box-shadow:none!important}
.uxDartKeypad .numKey:hover{background:#202228!important}
.uxDartKeypad .double.armed,.uxDartKeypad .triple.armed{background:#E53935!important}
.uxDartKeypad .undo{color:#ff9999!important}
.uxLiveActions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;margin-top:14px}
.uxLegHistory{padding:28px}.uxLegHistory>div:first-child{margin-bottom:18px}
@media(max-width:1180px){.uxMatchCenterPage{width:min(100% - 40px,1560px)}.uxLiveScoreboard{grid-template-columns:1fr 1.3fr}.uxLivePlayer:last-child{grid-column:1/-1;min-height:320px}}
@media(max-width:820px){.uxMatchCenterHeader{align-items:flex-start;flex-direction:column}.uxMatchCenterHeaderActions{width:100%}.uxMatchCenterHeaderActions button{flex:1}.uxLiveMatchTop{grid-template-columns:1fr;padding:14px}.uxBackAction,.uxDangerOutline{width:100%;justify-self:stretch}.uxLiveScoreboard{grid-template-columns:1fr}.uxLivePlayer,.uxLivePlayer:last-child{grid-column:auto;min-height:340px}.uxLiveThrow{order:-1}.uxDartKeypad .keypadNumbers{grid-template-columns:repeat(5,1fr)!important}.uxLiveActions{grid-template-columns:1fr}}
@media(max-width:520px){.uxMatchCenterPage{width:calc(100% - 24px);padding-top:20px}.uxMatchLauncherCard{align-items:flex-start;flex-direction:column}.uxMatchLauncherEmpty>div{width:100%;flex-direction:column}.uxLivePlayer{padding:20px}.uxLiveThrow{padding:16px}.uxDartKeypad .keypadNumbers{grid-template-columns:repeat(4,1fr)!important}.uxDartKeypad .keypadBottom{grid-template-columns:1fr 1fr!important}}


/* ==========================================================
   INFIGHT-DARTS UX 1.6
   Event Experience & complete product design propagation
   ========================================================== */

.uxLegacyProductScreen{
  background:
    linear-gradient(180deg,rgba(229,57,53,.035),transparent 260px),
    #0B0B0D!important;
}

.uxProductPage{
  width:min(1440px,calc(100% - 96px));
  margin:0 auto;
  padding:48px 0 96px;
}

.uxProductHero{
  position:relative;
  min-height:210px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:40px 48px;
  overflow:hidden;
  border-radius:24px;
  background:
    linear-gradient(105deg,rgba(229,57,53,.12),transparent 48%),
    #17181C;
}

.uxProductHero::before{
  content:"";
  position:absolute;
  left:48px;
  top:0;
  width:96px;
  height:2px;
  background:#E53935;
}

.uxProductHero h1{
  margin:0;
  font-size:clamp(32px,4vw,48px);
}

.uxProductHero p:last-child{
  max-width:720px;
  margin:14px 0 0;
  color:rgba(255,255,255,.52);
  font-size:16px;
  line-height:1.6;
}

.uxProductPanel{
  margin-top:20px;
  padding:28px;
  border:0;
  border-radius:18px;
  background:#17181C;
  box-shadow:0 14px 38px rgba(0,0,0,.16);
}

.uxEventManagerGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.uxEventSelector,
.uxScheduleFilters,
.uxRulesGrid,
.uxInviteForm{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.uxEventSelector label,
.uxScheduleFilters label,
.uxRulesGrid label,
.uxInviteForm label{
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
}

.uxRuleRecommendation{
  display:grid;
  gap:5px;
  margin:16px 0;
  padding:14px;
  border-left:2px solid #E53935;
  border-radius:0 12px 12px 0;
  background:#111317;
}

.uxRuleRecommendation span{
  color:rgba(255,255,255,.48);
  line-height:1.5;
}

.uxPlayerRulesList,
.uxParticipantList,
.uxInvitationList,
.uxUnifiedSchedule{
  display:grid;
  gap:8px;
}

.uxPlayerRuleRow{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto minmax(160px,.7fr) minmax(150px,.7fr);
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#111317;
}

.uxPlayerRuleRow strong,
.uxPlayerRuleRow small{
  display:block;
}

.uxPlayerRuleRow small{
  margin-top:4px;
  color:rgba(255,255,255,.4);
}

.uxInlineCheck,
.uxInviteChannels label{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.62);
  font-size:12px;
}

.uxInlineCheck input,
.uxInviteChannels input{
  width:18px;
  min-height:18px;
}

.uxParticipantRow,
.uxInvitationRow,
.uxScheduleRow{
  display:grid;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#111317;
}

.uxParticipantRow{
  grid-template-columns:42px 1fr auto;
}

.uxParticipantRow>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#1c1e23;
  font-weight:800;
}

.uxParticipantRow strong,
.uxParticipantRow small,
.uxInvitationRow strong,
.uxInvitationRow span{
  display:block;
}

.uxParticipantRow small,
.uxInvitationRow span{
  margin-top:4px;
  color:rgba(255,255,255,.4);
}

.uxInviteChannels{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:16px 0;
}

.uxDeliveryResult{
  display:grid;
  gap:7px;
  margin-top:14px;
}

.uxDeliveryResult>div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  background:#111317;
}

.uxDeliveryResult span{
  color:rgba(255,255,255,.48);
}

.uxDeliveryResult a{
  margin-left:auto;
  color:#fff;
}

.uxInvitationRow{
  grid-template-columns:1fr auto auto;
}

.uxInvitationRow>small{
  color:rgba(255,255,255,.4);
}

.uxInvitationRow .status-accepted{color:#2ECC71}
.uxInvitationRow .status-declined{color:#ff7777}
.uxInvitationRow .status-pending{color:#F5A623}

.uxScheduleRow{
  grid-template-columns:minmax(140px,.55fr) minmax(260px,1.4fr) auto;
  min-height:92px;
}

.uxScheduleEventTag small,
.uxScheduleEventTag b{
  display:block;
}

.uxScheduleEventTag small{
  color:#E53935;
  font-size:10px;
  letter-spacing:.12em;
}

.uxScheduleEventTag b{
  margin-top:5px;
}

.uxScheduleRow>div:nth-child(2) strong,
.uxScheduleRow>div:nth-child(2) span{
  display:block;
}

.uxScheduleRow i{
  color:#E53935;
  font-style:normal;
}

.uxScheduleRow>div:nth-child(2) span{
  margin-top:7px;
  color:rgba(255,255,255,.46);
}

.uxStatisticsGroup{
  padding:22px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:#111317;
}

.uxStatisticsGroup+ .uxStatisticsGroup{
  margin-top:12px;
}

.uxStatisticsGroup small{
  color:#E53935!important;
  font-size:10px;
  letter-spacing:.12em;
}

.uxStatisticsGroup h2{
  margin:7px 0 18px;
}

.uxStatisticsMetrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.uxStatisticsMetrics div{
  min-height:98px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:13px;
  border-radius:12px;
  background:#17181C;
}

.uxStatisticsMetrics b{
  font-family:"JetBrains Mono",monospace;
  font-size:22px;
}

.uxStatisticsMetrics span{
  margin-top:6px;
  color:rgba(255,255,255,.4);
  font-size:11px;
}

.uxEventSubnav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:20px;
  padding:10px;
  border-radius:14px;
  background:#17181C;
}

.uxEventSubnav button{
  background:transparent;
  border-color:rgba(255,255,255,.08);
}

/* Legacy cards, tables and forms now match the homepage/product shell. */
#ligaHomeScreen .panel,
#tableScreen .panel,
#notificationsScreen .panel,
#permissionsScreen .panel,
#tournamentsScreen .panel,
#tournamentDetailScreen .panel,
#rulesScreen .panel,
#playersScreen .panel,
#scheduleScreen .panel,
#statisticsScreen .panel{
  border:0!important;
  border-radius:18px!important;
  background:#17181C!important;
  box-shadow:0 14px 38px rgba(0,0,0,.16)!important;
}

#tournamentsScreen .tournamentCard,
#tournamentDetailScreen .groupBox,
#tournamentDetailScreen .bracketRound,
#tournamentDetailScreen .tournamentMatch{
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:14px!important;
  background:#111317!important;
  box-shadow:none!important;
}

#tournamentsScreen .winnerName,
#tournamentDetailScreen .winnerName{
  color:#fff!important;
  text-shadow:none!important;
}

#tournamentDetailScreen .tournamentWinner{
  border-color:rgba(229,57,53,.28)!important;
  color:#fff!important;
  background:rgba(229,57,53,.08)!important;
  box-shadow:none!important;
}

@media(max-width:900px){
  .uxProductPage{width:min(100% - 40px,1440px)}
  .uxEventManagerGrid{grid-template-columns:1fr}
  .uxStatisticsMetrics{grid-template-columns:1fr 1fr}
  .uxPlayerRuleRow{grid-template-columns:1fr 1fr}
  .uxScheduleRow{grid-template-columns:1fr auto}
  .uxScheduleEventTag{grid-column:1/-1}
}

@media(max-width:620px){
  .uxProductHero{align-items:flex-start;flex-direction:column;padding:32px 24px}
  .uxProductHero::before{left:24px}
  .uxEventSelector,.uxScheduleFilters,.uxRulesGrid,.uxInviteForm{grid-template-columns:1fr}
  .uxPlayerRuleRow{grid-template-columns:1fr}
  .uxInvitationRow{grid-template-columns:1fr}
  .uxScheduleRow{grid-template-columns:1fr}
  .uxStatisticsMetrics{grid-template-columns:1fr 1fr}
  .uxScheduleRow button{width:100%}
}

@media(max-width:420px){
  .uxProductPage{width:calc(100% - 24px)}
  .uxProductPanel{padding:20px}
  .uxStatisticsMetrics{grid-template-columns:1fr}
}

/* Phase 18.5 – Einzelmatch */
.uxSingleStatsToggle{display:flex;align-items:center;gap:10px;margin:18px 0;color:rgba(255,255,255,.68);font-size:13px}.uxSingleStatsToggle input{width:18px;min-height:18px}.uxModuleGridPrimary{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1100px){.uxModuleGridPrimary{grid-template-columns:1fr 1fr}}@media(max-width:620px){.uxModuleGridPrimary{grid-template-columns:1fr}}


/* Phase 18.5.1 – Tournament setup and company motto */
.uxTournamentRuleGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:14px 0 18px;
  padding:16px;
  border-radius:14px;
  background:#111317;
}
.uxTournamentRuleGrid label{
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
}
.uxTournamentRuleGrid.modeOptionsDisabled{
  opacity:.52;
}
@media(max-width:1050px){.uxTournamentRuleGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.uxTournamentRuleGrid{grid-template-columns:1fr}}