/* ============================================================
   College Hoops: My Player — styles
   ============================================================ */
:root{
  --bg:#0c1018; --bg2:#11182400; --panel:#161d2b; --panel2:#1d2638;
  --ink:#eef2f8; --mut:#8a96ab; --line:#27324a;
  --acc:#ff8a1f; --acc2:#1b6ef3; --good:#37d67a; --bad:#ff5a5a;
  --team:#1b6ef3; --team2:#ffffff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:
  radial-gradient(1200px 600px at 50% -10%, #1a2336, #0c1018 60%) fixed; color:var(--ink);
  font-family:Inter,system-ui,sans-serif; }
#app{ max-width:1080px; margin:0 auto; padding:18px; min-height:100vh; }
button{ font-family:inherit; }
kbd{ background:#26314a; border:1px solid #3a496b; border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; font-size:11px; font-weight:600; }
.muted{ color:var(--mut); } .small{ font-size:12px; }

/* buttons */
.btn{ background:linear-gradient(180deg,#2b3854,#222d44); color:var(--ink); border:1px solid #3a496b;
  border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px; cursor:pointer;
  transition:.12s transform,.12s filter; }
.btn:hover{ filter:brightness(1.12); } .btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.big{ background:linear-gradient(180deg,#ff9a3d,#ef7a13); border-color:#ffae5e; color:#21160a;
  font-size:16px; padding:13px 24px; font-weight:800; box-shadow:0 6px 18px -8px #ff8a1f; }
.btn.ghost{ background:#19223380; }
.btn.sm{ padding:7px 12px; font-size:13px; border-radius:8px; }

/* ---------- TITLE ---------- */
.screen{ animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} }
.title{ text-align:center; padding-top:8vh; }
.title .ball{ font-size:54px; }
.title h1{ font-family:Oswald; font-size:64px; letter-spacing:2px; margin:6px 0 0; line-height:.9;
  background:linear-gradient(180deg,#fff,#9fb4d6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.title .sub{ font-family:Oswald; letter-spacing:10px; color:var(--acc); font-size:22px; margin-top:4px; font-weight:700; }
.title .tag{ color:var(--mut); margin:22px 0; font-size:16px; }
.title .menu{ display:flex; gap:12px; justify-content:center; }
.title .fine{ color:#5d6b85; font-size:12px; margin-top:30px; }

/* ---------- CREATE ---------- */
.create h2{ font-family:Oswald; font-size:30px; margin:6px 0 18px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fld{ display:block; margin-bottom:12px; }
.fld>span{ display:block; font-size:12px; color:var(--mut); margin-bottom:5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.fld input,.fld select{ width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:10px 12px; font-size:14px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lbl{ font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin:2px 0 8px; }
.arch-list{ display:flex; flex-direction:column; gap:8px; max-height:330px; overflow:auto; padding-right:4px; }
.arch{ display:block; cursor:pointer; }
.arch input{ display:none; }
.arch-body{ border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:10px 12px; transition:.12s; }
.arch.on .arch-body{ border-color:var(--acc); background:#2a2113; box-shadow:0 0 0 1px var(--acc) inset; }
.arch-name{ font-weight:800; }
.arch-desc{ font-size:12.5px; color:var(--mut); margin:2px 0; }
.arch-pos{ font-size:11px; color:var(--acc); font-weight:700; letter-spacing:.5px; }
.ratings{ margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; }
.school-preview .sp{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-left:5px solid var(--c); border-radius:9px; padding:9px 12px; font-size:13px; }
.sp-dot{ width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--c2); }
.actions{ display:flex; justify-content:space-between; margin-top:20px; }

/* bars */
.bar,.arow{ display:grid; grid-template-columns:96px 1fr 30px; align-items:center; gap:8px; margin:5px 0; }
.arow{ grid-template-columns:96px 1fr 30px 32px; }
.bl,.al{ font-size:12px; color:var(--mut); font-weight:600; }
.bt{ height:9px; background:#0e1422; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.bt.big{ height:13px; }
.bt i{ display:block; height:100%; background:linear-gradient(90deg,#ff8a1f,#ffd07a); border-radius:6px; }
.bv,.av{ font-size:12px; font-weight:700; text-align:right; }
.attr-up{ background:var(--acc); color:#231405; border:none; border-radius:7px; font-weight:900; cursor:pointer; height:26px; }
.attr-up:disabled{ background:#2a3450; color:#5d6b85; cursor:not-allowed; }
.ovr-pill{ margin-top:8px; text-align:right; font-size:13px; color:var(--mut); }
.ovr-pill b{ color:var(--acc); font-size:18px; }

/* ---------- HUB ---------- */
.hub-top{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
  background:linear-gradient(90deg,var(--team),transparent 80%); border:1px solid var(--line);
  border-left:6px solid var(--team2); border-radius:12px; margin-bottom:14px; }
.ident{ display:flex; align-items:center; gap:14px; }
.jersey{ width:50px; height:50px; border-radius:10px; background:#0009; display:grid; place-items:center;
  font-family:Oswald; font-size:26px; font-weight:700; border:2px solid var(--team2); }
.pname{ font-size:20px; font-weight:800; } .pname .pos{ color:var(--acc); font-size:14px; }
.pmeta{ font-size:13px; color:#cdd6e6; } .pmeta b{ color:#fff; }
.hub-actions{ display:flex; gap:8px; }
.hub-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.card-h{ font-family:Oswald; font-size:17px; font-weight:600; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.next{ grid-row:span 2; }
.match{ background:#0e1422; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
.match.po{ border-color:var(--acc); } .match.madness{ border-color:#ffd166; background:#1a1607; }
.vs{ font-size:20px; font-weight:800; } .opp{ border-bottom:3px solid var(--c); padding-bottom:1px; }
.tag2{ color:var(--mut); font-size:12.5px; margin-top:4px; }
.play-row{ display:flex; gap:8px; flex-wrap:wrap; }
.statline{ display:flex; gap:8px; flex-wrap:wrap; }
.mini-extra{ display:flex; gap:8px; margin-top:8px; }
.sb{ background:#0e1422; border:1px solid var(--line); border-radius:9px; padding:8px 12px; text-align:center; min-width:58px; flex:1; }
.sv{ font-family:Oswald; font-size:21px; font-weight:700; } .sl{ font-size:10.5px; color:var(--mut); letter-spacing:.5px; }
.sp-badge{ background:var(--acc); color:#231405; font-weight:800; font-size:12px; padding:2px 9px; border-radius:20px; }
.sp-badge.big{ font-size:15px; padding:5px 14px; }
.badge-row{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.badge-row.big{ margin:12px 0; }
.bp{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; border:1px solid; }
.bp.gold{ background:#332608; border-color:#ffce4d; color:#ffd97a; }
.bp.silver{ background:#2a2f38; border-color:#cfd6e0; color:#e6ebf2; }
.bp.bronze{ background:#2e2014; border-color:#c98a4f; color:#e0a877; }
.stand{ width:100%; border-collapse:collapse; font-size:13px; }
.stand th{ text-align:left; color:var(--mut); font-weight:600; font-size:11px; padding:4px 6px; border-bottom:1px solid var(--line); }
.stand td{ padding:5px 6px; border-bottom:1px solid #1b2335; }
.stand tr.me td{ color:var(--acc); font-weight:800; }
.sched-list{ max-height:230px; overflow:auto; }
.srow{ display:grid; grid-template-columns:28px 1fr 46px 90px; gap:6px; align-items:center; padding:5px 6px;
  border-bottom:1px solid #1b2335; font-size:13px; }
.srow.now{ background:#1d2740; border-radius:7px; }
.srow.won .sr .w{ color:var(--good); } .srow.lost .sr .l{ color:var(--bad); }
.si{ color:var(--mut); } .st{ font-size:10px; color:var(--mut); } .sr{ text-align:right; font-weight:700; }
.hub-foot{ text-align:center; margin-top:6px; }

/* ---------- DEV ---------- */
.dev-top,.dev-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dev-top h2{ font-family:Oswald; margin:0; font-size:26px; }
.dev-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:14px; }
.player-card{ display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.pc-jersey{ width:64px; height:64px; border-radius:12px; display:grid; place-items:center; font-family:Oswald; font-size:30px; font-weight:700; }
.pc-name{ font-size:22px; font-weight:800; } .pc-meta{ font-size:13px; color:var(--mut); }
.attr-list{ margin-top:6px; }
.dev-foot,.offseason-foot,.draft-foot{ text-align:center; margin-top:18px; display:flex; gap:10px; justify-content:center; }

/* ---------- COURT ---------- */
.court-screen{ text-align:center; }
.court-bar{ display:flex; justify-content:space-between; align-items:center; max-width:960px; margin:0 auto 8px; }
.court-bar .ct{ font-family:Oswald; font-size:22px; font-weight:700; padding:2px 12px; border-radius:8px;
  background:var(--c); color:#fff; }
.ctrls{ font-size:12px; color:var(--mut); }
#court{ background:#000; border-radius:12px; max-width:100%; border:1px solid var(--line); box-shadow:0 20px 60px -20px #000; }
.court-tip{ color:var(--mut); font-size:12.5px; margin-top:8px; }

/* ---------- POST GAME / OVERLAY ---------- */
.overlay{ position:fixed; inset:0; background:#0008; backdrop-filter:blur(4px); display:grid; place-items:center; z-index:50; animation:fade .2s; }
.modal{ background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:24px 28px; text-align:center; min-width:340px; box-shadow:0 30px 80px -20px #000; }
.post-h{ font-family:Oswald; font-size:34px; font-weight:700; }
.post.win .post-h{ color:var(--good); } .post.loss .post-h{ color:var(--bad); }
.post-h .score{ color:var(--ink); } .post-sub{ color:var(--mut); margin-bottom:14px; }
.boxline{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:16px; }
.buzzer{ color:#ffd166; font-weight:800; margin-bottom:14px; animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.5; } }

/* ---------- OFFSEASON ---------- */
.offseason h2{ font-family:Oswald; font-size:30px; }
.season-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:14px; text-align:center; }
.big-outcome{ font-family:Oswald; font-size:26px; font-weight:700; margin-bottom:6px; }
.big-outcome.champ{ color:#ffd166; }
.rec{ color:var(--mut); margin-bottom:12px; }
.season-card .statline{ justify-content:center; }
.awards{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.award{ background:#2a2113; border:1px solid #ffce4d55; color:#ffd97a; padding:5px 12px; border-radius:20px; font-size:13px; font-weight:700; }

/* ---------- DRAFT ---------- */
.draft{ text-align:center; }
.draft-stage{ background:linear-gradient(180deg,#16203a,#0e1422); border:1px solid var(--line); border-radius:16px; padding:30px; margin-bottom:16px; }
.draft-h{ font-family:Oswald; letter-spacing:6px; color:var(--mut); font-size:18px; }
.pick-num{ font-family:Oswald; font-size:60px; font-weight:700; color:var(--acc); line-height:1; margin:6px 0; }
.pick-num.undr{ color:var(--mut); font-size:42px; }
.pick-round{ color:#cdd6e6; font-weight:600; }
.draft-name{ font-size:26px; font-weight:800; margin-top:14px; }
.draft-school{ color:var(--mut); }
.career-sum .statline{ justify-content:center; }
.season-history,.season-history2{ margin-top:10px; }
.hrow{ display:grid; grid-template-columns:90px 80px 60px 1fr; gap:8px; padding:6px 4px; border-bottom:1px solid #1b2335; font-size:13px; text-align:left; }
.hy{ font-weight:700; } .hx{ color:var(--mut); }

/* ---------- toasts ---------- */
#toasts{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:#1d2740; border:1px solid var(--acc); color:#fff; padding:10px 18px; border-radius:30px;
  font-weight:700; font-size:14px; opacity:0; transform:translateY(10px); transition:.3s; box-shadow:0 10px 30px -10px #000; }
.toast.show{ opacity:1; transform:none; }

@media(max-width:820px){
  .form-grid,.hub-grid,.dev-grid{ grid-template-columns:1fr; }
  .next{ grid-row:auto; }
  .title h1{ font-size:46px; }
}