/* ===== Self-hosted Geist (no third-party font requests) ===== */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Styling modeled on the real rostermania.com:
   pure-black canvas, Geist Sans, orange accent, flat gray shadcn-style cards,
   per-team brand color as a subtle hover glow. No glassmorphism, no neon.
   ========================================================================= */

/* Brand palette: Punch Red #e63946, Honeydew #f1faee, Frosted Blue #a8dadc,
   Cerulean #457b9d, Oxford Navy #1d3557. */
:root {
  color-scheme: dark;
  --bg:        #000000;   /* true black */
  --surface:   #121212;   /* card base            */
  --surface-2: #1a1a1a;   /* raised inner surface */
  --border:    #272727;
  --border-2:  #3a3a3a;   /* hover borders        */
  --text:      #f1faee;   /* Honeydew             */
  --muted:     #a1a1aa;
  --accent:    #e63946;   /* Punch Red            */
  --accent-2:  #cc2f3b;   /* darker red (hover)   */
  --ar:        #7fbfe0;   /* brightened Cerulean for dark bg */
  --smg:       #e63946;   /* Punch Red            */
  --tbd:       #71717a;
  --topbar:    #0a0a0a;
  --panda:     #f1faee;   /* light panda on dark so the eyes/detail read */
  --forge:     #e63946;   /* Punch Red "forge" */
  --badge-bg:  rgba(255,255,255,.06);
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 22px 48px -16px rgba(0,0,0,.65);
  --radius:    16px;
  --radius-sm: 10px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f4f5f7;   /* neutral off-white    */
  --surface:   #ffffff;
  --surface-2: #eef0f3;
  --border:    #e3e6ea;
  --border-2:  #cfd4dc;
  --text:      #1d3557;   /* Oxford Navy body text */
  --muted:     #64748b;
  --accent:    #e63946;   /* Punch Red            */
  --accent-2:  #cc2f3b;
  --ar:        #457b9d;   /* Cerulean             */
  --smg:       #e63946;
  --tbd:       #6b7280;
  --topbar:    #ffffff;
  --panda:     #10141a;   /* matches "roster" (near-black) on light */
  --forge:     #e63946;
  --badge-bg:  rgba(0,0,0,.05);
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 12px 28px -14px rgba(0,0,0,.18);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.10), 0 20px 44px -16px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* ===== Top bar ===== */
.topbar { position: sticky; top: 0; z-index: 60; background: var(--topbar); border-bottom: 1px solid var(--border); }
.topbar__inner { max-width: 1400px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: row; align-items: center; gap: 4px; font-weight: 800; }
.brand__logo { width: 64px; height: 64px; flex: none; background-color: var(--panda);
  -webkit-mask: url("logo.svg?v=2") center / contain no-repeat; mask: url("logo.svg?v=2") center / contain no-repeat; }
.brand__text { font-size: 26px; line-height: 1; letter-spacing: .035em; }
.brand__forge { color: var(--forge); }
/* "roster" reads near-black on the light theme (not navy-gray) */
:root[data-theme="light"] .brand__text { color: #10141a; }
.brand__dot { color: var(--accent); }

.toolbar { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.lbl-short { display: none; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: background .15s, border-color .15s, color .15s; font-family: inherit; }
.btn:hover { background: #ffffff0a; border-color: var(--border-2); }
.btn--x { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn--x:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn--icon { padding: 8px; }
.btn svg { width: 18px; height: 18px; display: block; }
/* sun shows in dark mode (tap to go light), moon shows in light mode.
   Selectors need >= specificity of ".btn svg" to win. */
.btn .icon-moon { display: none; }
:root[data-theme="light"] .btn .icon-sun { display: none; }
:root[data-theme="light"] .btn .icon-moon { display: block; }

/* ===== App layout ===== */
.app { max-width: 1400px; margin: 28px auto; padding: 0 24px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ===== Team card ===== */
.team { background: var(--surface); border: 1px solid var(--border); border-radius: 0; overflow: hidden; box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.team:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }

.team__header { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.team__logo { width: 40px; height: 40px; object-fit: contain; }
.team__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team__name { font-weight: 800; font-size: 16px; letter-spacing: -.02em; outline: none; }
/* champion team: pulsing gold glow ring on the card */
.team--champ { border-color: #f5b301; animation: champ-glow 3s ease-in-out infinite; }
.team--champ:hover { box-shadow: 0 0 0 1px #f7c948, 0 0 42px -6px rgba(245,179,1,.7); }
@keyframes champ-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,179,1,.5), 0 0 22px -8px rgba(245,179,1,.4); }
  50%      { box-shadow: 0 0 0 1px rgba(247,201,72,.9), 0 0 36px -6px rgba(245,179,1,.68); }
}

@keyframes champ-shine { to { background-position: -220% 0; } }

/* champion team name gets a shimmering gold treatment */
.team--champ .team__name {
  background: linear-gradient(110deg, #e0a000 0%, #ffe9a8 25%, #f5b301 50%, #ffe9a8 72%, #e0a000 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: champ-shine 3s linear infinite;
}
/* keep the name readable while editing it */
.team--champ .team__name:focus { -webkit-text-fill-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .team--champ, .champ, .champ::after, .champ svg, .team--champ .team__name { animation: none; }
}
.team__name:focus { color: var(--accent); }
.team__remove { background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.team__remove:hover { color: #f87171; background: #f8717118; }

/* players: single row, no divider lines */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.slot { border-radius: 0; aspect-ratio: 1 / 1; overflow: hidden; position: relative; transition: border-color .15s, background .15s; }
.slot--empty { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 16px 8px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; border: 1px dashed var(--border-2); cursor: pointer; }
.slot--empty:hover { border-color: var(--accent); color: var(--accent); background: rgba(249,115,22,.07); }
.slot--filled { background: var(--surface-2); border: 1px solid var(--border); }
.slot--filled:hover { border-color: var(--border-2); }

/* square photo fills the slot; name overlays the bottom */
.avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; background: var(--surface); }
.avatar--fallback { display: grid; place-items: center; font-weight: 800; font-size: 40px; color: var(--text); }
.slot__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; padding: 28px 10px 9px; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.45) 55%, transparent); }
.slot__name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.slot__name { cursor: pointer; transition: color .15s; }
a.slot__name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; cursor: pointer; user-select: none; border: 1px solid transparent; font-family: inherit; background: var(--badge-bg); color: var(--text); }
.badge--AR  { color: var(--ar);  border-color: rgba(59,130,246,.45); }
.badge--SMG { color: var(--smg); border-color: rgba(249,115,22,.45); }
.badge--TBD { color: var(--muted); border-color: var(--border-2); }

/* role badge overlaid on the photo corner */
/* corner role tag: no background chip, just readable text over the photo */
.slot__badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: transparent; padding: 2px 7px; font-size: 10px; gap: 0; text-shadow: none; }
.slot__badge::before { display: none; }   /* drop the status dot so it's a compact corner tag */

.slot__remove { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; opacity: 0; transition: opacity .15s; }
.slot--filled:hover .slot__remove { opacity: 1; }
.slot__remove:hover { color: #f87171; }

/* ===== Player pool drawer ===== */
.pool-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .22s ease; }
.pool-backdrop.is-open { opacity: 1; }

.pool { position: fixed; top: 0; right: 0; z-index: 100; height: 100dvh; width: 360px; max-width: 88vw; background: var(--bg); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); }
.pool.is-open { transform: translateX(0); }
.pool__inner { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 20px; }
.pool__head { display: flex; align-items: center; justify-content: space-between; }
.pool__title { margin: 0; font-size: 18px; font-weight: 700; }
.pool__close { background: transparent; border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; border-radius: 8px; font-size: 19px; line-height: 1; cursor: pointer; }
.pool__close:hover { border-color: #f87171; color: #f87171; }
.pool__hint { margin: 5px 0 14px; color: var(--text); font-size: 12px; }
.pool__assign { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 9px 12px; border-radius: 9px; background: rgba(249,115,22,.15); border: 1px solid var(--accent); color: var(--text); font-size: 13px; font-weight: 600; }
.pool__assign:not([hidden]) { display: flex; }
.pool__assign button { background: transparent; border: 1px solid var(--border-2); color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.pool__assign button:hover { border-color: var(--accent); color: var(--accent); }
.pool__search { width: 100%; padding: 10px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; margin-bottom: 12px; font-family: inherit; }
.pool__search:focus { outline: none; border-color: var(--accent); }

.filters { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 8px; }
.chip { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 7px 4px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; transition: background .15s, color .15s; font-family: inherit; white-space: nowrap; }
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--accent); color: #fff; }
.chip:disabled { opacity: .35; cursor: not-allowed; }

.pool__why { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 10px; padding: 0; background: none; border: 0; color: var(--ar); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.pool__why svg { width: 14px; height: 14px; }
.pool__why:hover { color: var(--ar); text-decoration: underline; text-underline-offset: 2px; }
#chal-modal .modal__box { width: 600px; max-width: 92vw; }
.modal__body.modal__body--text { display: block; padding: 22px 24px; overflow-y: auto; background: var(--surface); }
.modal__body--text p { color: var(--text); font-size: 14px; line-height: 1.65; margin: 0 0 14px; }
.modal__body--text p:last-child { margin: 0; }
.modal__body--text strong { color: var(--text); font-weight: 700; }
.pool__count { color: var(--muted); font-size: 11px; margin: 6px 0 10px; }
.pool__list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 4px; }

.pchip { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: border-color .15s, background .15s; }
.pchip:hover { border-color: var(--accent); background: var(--surface-2); }
.pchip:active { transform: scale(.99); }
.pchip__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.pchip__avatar--fallback { display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.pchip__name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool__empty { color: var(--muted); font-size: 13px; text-align: center; padding: 22px 0; }
.pool__add { width: 100%; margin-top: 12px; justify-content: center; }

/* scrollbar */
.pool__list::-webkit-scrollbar { width: 8px; }
.pool__list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }

/* ===== Image preview modal ===== */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.modal__box { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.modal__desc { margin: 3px 0 0; color: var(--muted); font-size: 12px; max-width: 46ch; }
.modal__body { padding: 14px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; }
/* constrain the image to the viewport so the WHOLE thing is always visible, no scroll */
.modal__body img { display: block; max-width: 86vw; max-height: 74vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; padding: 13px 16px; border-top: 1px solid var(--border); }
.modal__actions .btn { text-decoration: none; }

/* ===== Legal / content pages ===== */
.legal { max-width: 760px; margin: 34px auto; padding: 0 24px; }
.legal h1 { font-size: 27px; margin: 0 0 4px; letter-spacing: -.02em; }
.legal__updated { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.legal h2 { font-size: 17px; margin: 26px 0 8px; }
.legal p { color: var(--text); font-size: 14px; line-height: 1.7; margin: 0 0 12px; }
.legal a { color: var(--accent); }
.legal__back { display: inline-block; margin-top: 26px; color: var(--accent); font-weight: 600; }

/* ===== 404 ===== */
.notfound { max-width: 560px; margin: 12vh auto; padding: 0 24px; text-align: center; }
.notfound__code { font-size: 76px; font-weight: 900; letter-spacing: -.03em; color: var(--accent); margin: 0; line-height: 1; }
.notfound__title { font-size: 24px; margin: 6px 0 8px; }
.notfound__text { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.notfound .btn { text-decoration: none; }

/* ===== Footer ===== */
.footer__links { display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); font-size: 13px; font-weight: 600; }
.footer__links a:hover { color: var(--accent); }
.footer { max-width: 1400px; margin: 0 auto; padding: 28px 24px; text-align: center; border-top: 1px solid var(--border); }
.footer__copy { color: var(--muted); font-size: 12px; margin: 0 auto; max-width: 700px; line-height: 1.6; }
.footer__by { color: var(--text); font-size: 11px; font-weight: 700; margin: 26px 0 0; letter-spacing: .01em; }

/* ===== Export layout (applied only while generating the PNG) =====
   Teams stack 2 per row; each team shows its 4 players in a single row.
   Compact landscape image, complete regardless of the device it's saved from. */
.grid.is-exporting { width: 900px; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid.is-exporting .team { display: block; box-shadow: none; transform: none; }
.grid.is-exporting .team__remove { display: none; }
.grid.is-exporting .team__header { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); border-right: none; }
.grid.is-exporting .team__title { flex: 1; justify-content: flex-start; }
.grid.is-exporting .team__logo { width: 34px; height: 34px; }
.grid.is-exporting .team__name { font-size: 14px; text-align: left; }
.grid.is-exporting .roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; overflow: visible; }
.grid.is-exporting .slot { width: auto; height: auto; aspect-ratio: 1 / 1; }
.grid.is-exporting .slot__name { font-size: 11px; }
.grid.is-exporting .slot__info { padding: 15px 5px 6px; }
/* html2canvas can't render gradient-clipped text or box-shadow glow, so the
   champion team gets a solid gold name + gold border in the exported image. */
.grid.is-exporting .team--champ { border: 2px solid #f5b301; }
.grid.is-exporting .team--champ .team__name { background: none; -webkit-text-fill-color: #f5b301; color: #f5b301; animation: none; }
/* export watermark banner */
.export-brand { display: none; }
.grid.is-exporting .export-brand { display: block; grid-column: 1 / -1; text-align: center; font-weight: 600; font-size: 18px; color: var(--muted); padding: 2px 0 12px; }

/* ===== Responsive ===== */
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }          /* one team per row */
}
@media (max-width: 620px) {
  .topbar__inner { padding: 10px 14px; gap: 10px; }
  /* touch-friendly toolbar: text buttons + Players fill the row, icons stay compact */
  .toolbar { width: 100%; margin-left: 0; gap: 8px; }
  .toolbar .btn { min-height: 42px; font-size: 13px; padding: 8px 14px; }
  .btn--ghost:not(.btn--icon), .btn--x { flex: 1 1 auto; justify-content: center; }
  .btn--icon { flex: 0 0 auto; min-width: 42px; justify-content: center; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  .app { margin: 16px auto; padding: 0 12px; }
  .grid { gap: 12px; }
  .footer { padding: 22px 16px; }
  .team:hover { transform: none; box-shadow: var(--shadow); }   /* no hover lift on touch */

  /* players in a 2x2 grid filling the full-width team card */
  .roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
  .slot__name { font-size: 15px; }

  /* keep the whole preview image visible on small screens */
  .modal { padding: 12px; }
  .modal__desc { font-size: 11px; }
  .modal__body img { max-width: 90vw; max-height: 58vh; }
}