@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

:root{
  --pitch:#0a1628; --pitch-mid:#0f2040; --pitch-light:#162d55;
  --neon:#39ff85; --gold:#f5c518; --red:#e74c3c; --blue:#4a9eff;
  --white:#f0f4ff; --grey:#7a8fb0; --card-bg:#111f3a;
  --border-dim:rgba(255,255,255,0.08); --radius:16px; --radius-sm:10px;
  --shadow:0 4px 24px rgba(0,0,0,0.5); --glow:0 0 20px rgba(57,255,133,0.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-tap-highlight-color:transparent;}
body{background:var(--pitch);color:var(--white);font-family:'Nunito',sans-serif;min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--pitch-light);border-radius:2px;}

.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}

#loadingOverlay{position:fixed;inset:0;background:rgba(10,22,40,0.95);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.spinner{width:48px;height:48px;border:4px solid var(--pitch-light);border-top-color:var(--neon);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

#loginScreen{background:linear-gradient(160deg,#0a1628,#0d2244 60%,#071018);align-items:center;}
.login-hero{width:100%;text-align:center;padding:32px 20px 24px;border-bottom:1px solid var(--border-dim);}
.login-hero .trophy{font-size:56px;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(245,197,24,0.7));}
.login-hero h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,7vw,44px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;}
.login-hero h1 span{color:var(--neon);}
.login-hero p{font-size:13px;color:var(--grey);margin-top:6px;letter-spacing:.06em;text-transform:uppercase;}

.profile-section{width:100%;padding:20px 16px 8px;}
.profile-section-label{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:center;margin-bottom:14px;}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px;margin:0 auto;}
.profile-card{background:var(--card-bg);border:2px solid var(--border-dim);border-radius:var(--radius);padding:14px 8px 12px;text-align:center;cursor:pointer;transition:all .18s;user-select:none;}
.profile-card:active{transform:scale(.96);}
.profile-card.selected,.profile-card:hover{border-color:var(--neon);box-shadow:var(--glow);}
.profile-avatar{width:54px;height:54px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:26px;border:2px solid var(--border-dim);}
.profile-name{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.profile-role{font-size:10px;color:var(--grey);margin-top:2px;}

.pin-panel{width:100%;max-width:300px;margin:0 auto;padding:0 16px 32px;}
.pin-panel h3{font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);text-align:center;margin-bottom:14px;}
.pin-dots{display:flex;justify-content:center;gap:16px;margin-bottom:20px;}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--grey);transition:all .15s;}
.pin-dot.filled{background:var(--neon);border-color:var(--neon);box-shadow:0 0 10px rgba(57,255,133,.6);}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pin-key{background:var(--card-bg);border:2px solid var(--border-dim);border-radius:12px;padding:18px 8px;font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--white);cursor:pointer;text-align:center;transition:all .12s;user-select:none;}
.pin-key:active,.pin-key:hover{background:var(--pitch-light);border-color:var(--neon);color:var(--neon);transform:scale(.97);}
.pin-key.del{font-size:18px;color:var(--grey);}
.pin-error{text-align:center;color:var(--red);font-size:12px;margin-top:10px;min-height:18px;font-weight:700;}
.db-notice{margin:16px;padding:16px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.4);border-radius:var(--radius);display:none;}
.db-notice-title{font-family:'Oswald',sans-serif;font-size:14px;color:#ff8080;margin-bottom:8px;}

.app-header{background:var(--pitch-mid);border-bottom:1px solid var(--border-dim);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:10px;}
.app-header-title{font-family:'Oswald',sans-serif;font-size:17px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neon);flex:1;}
.header-user{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;}
.header-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid var(--neon);}
.btn-logout{background:transparent;border:1px solid var(--border-dim);color:var(--grey);padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;}
.btn-logout:hover{border-color:var(--red);color:var(--red);}

.tab-nav{background:var(--pitch-mid);border-bottom:1px solid var(--border-dim);display:flex;overflow-x:auto;scrollbar-width:none;position:sticky;top:59px;z-index:99;}
.tab-nav::-webkit-scrollbar{display:none;}
.tab-btn{flex:0 0 auto;padding:13px 14px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--grey);background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;}
.tab-btn:hover{color:var(--white);}
.tab-btn.active{color:var(--neon);border-bottom-color:var(--neon);}

.tab-content{display:none;flex:1;overflow-y:auto;}
.tab-content.active{display:block;padding:16px;}
.admin-tab{display:none;}
.is-admin .admin-tab{display:flex;align-items:center;}

/* Force the admin panel to strictly follow the active tab state */
#adminTab { display: none !important; }
.is-admin #adminTab.active { display: block !important; }
@media(min-width:768px){.tab-content.active{padding:20px 24px;}}

.section-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.section-title .icon{color:var(--neon);}
.prize-hint{font-size:12px;color:var(--grey);text-transform:none;font-weight:600;margin-left:auto;}

.card{background:var(--card-bg);border:1px solid var(--border-dim);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.badge-neon{background:rgba(57,255,133,.15);color:var(--neon);border:1px solid rgba(57,255,133,.3);}

.match-card{background:var(--card-bg);border:1px solid var(--border-dim);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
.match-card.locked-card{border-color:rgba(231,76,60,.15);}
.match-card-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border-dim);font-size:11px;color:var(--grey);font-weight:700;letter-spacing:.04em;text-transform:uppercase;gap:8px;}
.match-teams{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 12px 12px;}
.team-block{flex:1;text-align:center;}
.team-flag{font-size:34px;display:block;margin-bottom:5px;line-height:1;}
.team-name{font-family:'Oswald',sans-serif;font-size:clamp(13px,3.5vw,17px);font-weight:700;letter-spacing:.03em;line-height:1.2;}
.vs-badge{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--grey);background:var(--pitch);border:1px solid var(--border-dim);border-radius:8px;padding:4px 9px;flex-shrink:0;}
.match-card-body{padding:0 14px 14px;}

.countdown-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(57,255,133,.05);border-radius:var(--radius-sm);margin-bottom:12px;border:1px solid rgba(57,255,133,.1);}
.countdown-text{font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--neon);}
.countdown-text.warning{color:var(--gold);}
.countdown-text.locked{color:var(--red);}

.score-picker{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;}
.score-team-label{font-size:11px;font-weight:800;color:var(--grey);text-transform:uppercase;text-align:center;width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.score-stepper{display:flex;flex-direction:column;align-items:center;gap:5px;}
.stepper-val{font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;min-width:50px;text-align:center;background:var(--pitch);border:2px solid var(--border-dim);border-radius:12px;padding:5px 8px;line-height:1;}
.stepper-val.active{border-color:var(--neon);color:var(--neon);}
.stepper-btn{width:42px;height:42px;background:var(--pitch-light);border:1.5px solid var(--border-dim);border-radius:10px;color:var(--white);font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;user-select:none;}
.stepper-btn:active,.stepper-btn:hover{background:var(--neon);color:var(--pitch);border-color:var(--neon);transform:scale(.96);}
.score-dash{font-family:'Oswald',sans-serif;font-size:26px;color:var(--grey);}
.winner-indicator{text-align:center;font-size:12px;font-weight:800;color:var(--grey);margin-bottom:10px;min-height:18px;}
.winner-indicator.has-winner{color:var(--neon);}

.btn-save{width:100%;background:var(--neon);color:var(--pitch);border:none;border-radius:12px;padding:13px 20px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.btn-save:hover{background:#55ffaa;box-shadow:var(--glow);}
.saved-indicator{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--neon);font-weight:800;justify-content:center;margin-top:6px;}
.locked-pick{display:flex;align-items:center;justify-content:space-between;background:var(--pitch);border:1px solid var(--border-dim);border-radius:10px;padding:10px 14px;margin-bottom:10px;}
.locked-pick-score{font-family:'Oswald',sans-serif;font-size:17px;font-weight:700;}
.locked-pick-label{font-size:11px;color:var(--grey);font-weight:700;text-transform:uppercase;}

/* THIN PREDICTION BARS */
.pred-bars-thin{margin-top:10px;padding:8px 10px;background:rgba(255,255,255,.025);border-radius:var(--radius-sm);}
.tbar-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.tbar-row:last-child{margin-bottom:0;}
.tbar-lbl{font-size:10px;font-weight:800;color:var(--grey);text-transform:uppercase;letter-spacing:.03em;width:56px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tbar-track{flex:1;height:5px;background:var(--pitch);border-radius:3px;overflow:hidden;}
.tbar-fill{height:100%;border-radius:3px;transition:width .4s ease;min-width:2px;}
.tbar-fill.fa{background:var(--blue);}
.tbar-fill.fd{background:var(--grey);}
.tbar-fill.fb{background:#ff6b4a;}
.tbar-pct{font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;width:30px;text-align:right;flex-shrink:0;color:var(--white);}
.pred-bars-empty{font-size:11px;color:var(--grey);text-align:center;padding:6px 0;font-style:italic;}
.pred-bars-caption{font-size:10px;color:var(--grey);text-align:center;margin-top:6px;font-weight:600;}

/* AWARDS / TROPHY CARDS */
.award-card{background:var(--card-bg);border:1px solid var(--border-dim);border-radius:var(--radius);padding:14px;margin-bottom:10px;position:relative;overflow:hidden;}
.award-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--gold);}
.award-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.award-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;}
.award-prize{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--gold);text-align:right;white-space:nowrap;}

/* LEADERBOARD */
.prize-banner{background:linear-gradient(135deg,rgba(57,255,133,.1),rgba(245,197,24,.08));border:1px solid rgba(57,255,133,.25);border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:14px;}
.prize-total{font-family:'Oswald',sans-serif;font-size:38px;font-weight:700;color:var(--neon);}
.prize-label{font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-weight:700;}
.standings-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border-dim);}
.standings-table{width:100%;border-collapse:collapse;font-size:13px;min-width:420px;}
.standings-table thead{background:var(--pitch-mid);}
.standings-table th{padding:10px 6px;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;text-align:center;}
.standings-table th:nth-child(3){text-align:left;}
.standings-table td{padding:11px 6px;text-align:center;border-top:1px solid var(--border-dim);font-weight:700;}
.standings-table tr.is-me{background:rgba(57,255,133,.06);}
.st-pos{font-family:'Oswald',sans-serif;font-size:16px;}
.st-arrow{font-size:11px;font-weight:700;}
.pos-up{color:var(--neon);} .pos-down{color:var(--red);} .pos-same{color:var(--grey);}
.st-player{text-align:left!important;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.02em;white-space:nowrap;}
.st-emoji{margin-right:5px;}
.st-qar{color:var(--neon);font-family:'Oswald',sans-serif;font-size:15px;}
.standings-key{font-size:11px;color:var(--grey);margin-top:12px;line-height:1.7;text-align:center;}
.standings-key b{color:var(--white);}

/* HISTORY */
.history-accordion{border:1px solid var(--border-dim);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--card-bg);cursor:pointer;transition:background .15s;gap:10px;user-select:none;}
.history-header:active{background:var(--pitch-light);}
.history-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;}
.history-meta{font-size:11px;color:var(--grey);margin-top:3px;font-weight:600;}
.history-chevron{color:var(--grey);font-size:13px;transition:transform .2s;flex-shrink:0;}
.history-accordion.open .history-chevron{transform:rotate(180deg);}
.history-body{display:none;padding:12px 14px;border-top:1px solid var(--border-dim);background:rgba(255,255,255,.02);}
.history-accordion.open .history-body{display:block;}
.predictions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.prediction-cell{background:var(--pitch);border:1px solid var(--border-dim);border-radius:var(--radius-sm);padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.cell-user{font-size:11px;font-weight:800;color:var(--grey);}
.cell-pred{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;}
.cell-pred.correct{color:var(--neon);} .cell-pred.wrong{color:var(--red);}
@media(min-width:480px){.predictions-grid{grid-template-columns:repeat(3,1fr);}}

/* RULES */
.rules-h{font-family:'Oswald',sans-serif;font-size:15px;font-weight:700;color:var(--neon);margin-bottom:10px;letter-spacing:.03em;}
.rules-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border-dim);font-size:13px;}
.rules-row:last-of-type{border-bottom:none;}
.rules-row b{color:var(--gold);white-space:nowrap;font-family:'Oswald',sans-serif;}
.rules-note{font-size:11px;color:var(--grey);margin-top:8px;line-height:1.6;font-style:italic;}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.form-label{font-size:12px;font-weight:800;color:var(--grey);letter-spacing:.05em;text-transform:uppercase;}
.form-input,.form-select{background:var(--pitch);border:2px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--white);font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;padding:12px 14px;outline:none;transition:border-color .15s;width:100%;}
.form-input:focus,.form-select:focus{border-color:var(--neon);}
.form-select option{background:var(--pitch-mid);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn-primary{width:100%;background:var(--neon);color:var(--pitch);border:none;border-radius:12px;padding:14px 20px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.btn-primary:hover{background:#55ffaa;box-shadow:var(--glow);}
.btn-secondary{background:transparent;color:var(--white);border:2px solid var(--border-dim);border-radius:10px;padding:10px 16px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.btn-secondary:hover{border-color:var(--neon);color:var(--neon);}
.btn-danger{background:rgba(231,76,60,.15);color:var(--red);border:1.5px solid rgba(231,76,60,.3);border-radius:8px;padding:8px 14px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
.btn-danger:hover{background:rgba(231,76,60,.25);}
.divider{height:1px;background:var(--border-dim);margin:20px 0;}
.result-card{background:var(--card-bg);border:1px solid rgba(57,255,133,.2);border-radius:var(--radius);padding:14px;margin-bottom:10px;}
.result-score-row{display:flex;align-items:center;gap:12px;}
.score-input{width:60px;height:54px;background:var(--pitch);border:2px solid var(--border-dim);border-radius:10px;color:var(--white);font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;text-align:center;outline:none;-moz-appearance:textfield;}
.score-input::-webkit-inner-spin-button{display:none;}
.score-input:focus{border-color:var(--neon);}
.tbd-edit-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(74,158,255,.06);border-radius:var(--radius-sm);margin-bottom:10px;border:1px dashed rgba(74,158,255,.3);}
.tbd-label{font-size:11px;color:var(--blue);font-weight:800;text-transform:uppercase;flex-shrink:0;}

/* ADMIN SUB-NAV */
.admin-sub-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding-bottom:4px;}
.admin-sub-nav::-webkit-scrollbar{display:none;}
.admin-sub-btn{flex:0 0 auto;padding:8px 14px;background:var(--card-bg);border:1px solid var(--border-dim);border-radius:20px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--grey);cursor:pointer;transition:all .15s;white-space:nowrap;}
.admin-sub-btn:hover{color:var(--white);}
.admin-sub-btn.active{background:rgba(57,255,133,.12);border-color:var(--neon);color:var(--neon);}
.admin-sub-section{display:none;}
.admin-sub-section.active{display:block;}
.admin-hint{font-size:12px;color:var(--grey);margin-bottom:14px;line-height:1.5;font-style:italic;}

.empty-state{text-align:center;padding:40px 20px;color:var(--grey);}
.empty-state .icon{font-size:44px;margin-bottom:12px;opacity:.6;display:block;}
.empty-state h3{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--white);margin-bottom:6px;}
.empty-state p{font-size:13px;font-weight:600;}

.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9998;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:90%;max-width:340px;}
.toast{background:var(--pitch-light);border:1px solid rgba(57,255,133,.2);border-radius:12px;padding:12px 18px;font-size:13px;font-weight:700;box-shadow:var(--shadow);animation:toastIn .25s ease,toastOut .25s ease 2.8s forwards;}
.toast.error{border-color:rgba(231,76,60,.4);color:#ff8888;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes toastOut{to{opacity:0;transform:translateY(-5px);}}