html {
    height: 100%;
}

/* Generic 30x30 logo badge for reuse (e.g., on board) */
.mobile-preboard{display:none}
.logo-badge-30{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f5f7fb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.28);line-height:0;vertical-align:middle}
.logo-badge-30 img{height:24px;width:auto;object-fit:contain;display:inline-block;opacity:0;transition:opacity .22s ease}
.logo-badge-30 img.fade-in{opacity:1}
.logo-badge-30.hidden{display:none}
body{
    height: 100%;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu, sans-serif;
    margin:0;padding:0;
    background:#0b1220;
    color:#e6e9ef;
    background-image:url('/images/ice.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/* Mobile: use lightweight SVG texture instead of large PNG */
@media (max-width: 640px){
    body{ background-image:url('/images/ice-texture.svg'); background-attachment:scroll; }
}
/* Utility */
.container{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}
.hidden{display:none}
header{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 16px;background:#111a2b;border-bottom:1px solid #1e2a44;box-shadow:0 2px 0 rgba(0,0,0,.2);max-height:140px;transition:max-height .35s ease, padding .35s ease, transform .35s ease, opacity .35s ease}
h1{font-size:28px;margin:0}
.brand{display:flex;align-items:center;gap:10px;justify-self:center;grid-column:2}
.timer{justify-self:end;grid-column:3}
/* Ownership gating: hide assign controls for non-owners on team view */
.team-view.not-owner .contract-assign { display: none !important; }
.team-view.not-owner .assigned-row { display: inline-flex; }
.brand-logo{display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));position:absolute;left:16px;top:50%;transform:translateY(-50%);height:64px}
.brand .danger{background:#b91c1c;color:#fff;border:1px solid #8b1111;padding:6px 10px;border-radius:8px;cursor:pointer}
.timer{display:flex;gap:8px;align-items:center}
.timer button{background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;padding:6px 10px;border-radius:6px;cursor:pointer}
.timer #timer-display{display:none}
.timer #btn-trades{
    position:relative;
    appearance:none;
    border:0;
    background:linear-gradient(135deg,#60a5fa 0%, #4f46e5 50%, #a78bfa 100%);
    color:#fff;
    padding:8px 14px;
    border-radius:10px;
    font-weight:900;
    letter-spacing:.25px;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.timer #btn-trades::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:12px;
    background:linear-gradient(135deg,#60a5fa 0%, #4f46e5 50%, #a78bfa 100%);
    filter:blur(10px);
    opacity:.22;
    z-index:-1;
}
.timer #btn-trades:hover,
.timer #btn-trades:focus-visible{
    transform:translateY(-1px);
    filter:brightness(1.03);
    box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.timer #btn-trades:active{transform:translateY(0)}
.hero{position:relative;padding:24px;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;min-height:calc(100vh - 80px);text-align:center;
    /* prepare for collapse animation on start */
    max-height:1000px;transition:max-height .9s ease, padding .9s ease, margin .9s ease;
}
.hero-logo{width:min(500px,90vw);max-width:500px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 24px rgba(0,0,0,.45));margin:3px 0;transition:opacity .8s ease, transform .8s ease}
.hero .controls{display:flex;gap:10px;align-items:center;justify-content:center}
.cta{margin-top:10px;display:flex;justify-content:center}
.cta-button{font-size:18px;line-height:1.1;padding:16px 28px;border-radius:14px;position:relative;isolation:isolate}
.cta-button.primary{background:#5b53ff;color:#fff;border:0;box-shadow:0 6px 20px rgba(91,83,255,.35), inset 0 1px 0 rgba(255,255,255,.25)}
.cta-button.accent{background:#16a34a;color:#071b0e;border:0;box-shadow:0 6px 20px rgba(34,197,94,.32), inset 0 1px 0 rgba(255,255,255,.25)}
.cta-button::before{content:'';position:absolute;inset:-3px;border-radius:16px;background:linear-gradient(135deg,#6ee7ff 0%,#8b5cf6 40%,#f472b6 100%);filter:blur(10px);opacity:.0;transition:opacity .3s ease, transform .3s ease;z-index:-1;transform:scale(.98)}
.cta-button.accent::before{background:linear-gradient(135deg,#34d399 0%, #22c55e 40%, #06b6d4 100%)}
.cta-button::after{content:'';position:absolute;inset:0;border-radius:14px;background:radial-gradient(120px 60px at 10% 10%,rgba(255,255,255,.25),transparent 60%), radial-gradient(120px 60px at 90% 80%,rgba(255,255,255,.15),transparent 60%);opacity:.4;pointer-events:none}
.cta-button:hover,.cta-button:focus-visible{transform:translateY(-1px) scale(1.02)}
.cta-button:hover::before,.cta-button:focus-visible::before{opacity:.8;transform:scale(1)}
.cta-button:active{transform:translateY(0) scale(0.995)}
.cta-button[disabled]{opacity:.6;cursor:not-allowed}
.hero label{opacity:.8}
.hero input[type=number]{width:96px;padding:8px 10px;border-radius:8px;border:1px solid #2a395c;background:#0f1626;color:#e6e9ef}
.hero .primary,.hero .accent{appearance:none;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700}
.hero .primary{background:#4f46e5;color:#fff}
.hero .accent{background:#16a34a;color:#0a0a0a}
.hero .danger{background:#b91c1c;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.hero .accent[disabled]{opacity:.45;cursor:not-allowed}
.reveal{display:grid;gap:8px;margin-top:6px;max-width:720px;width:100%;position:absolute;left:50%;transform:translateX(-50%);z-index:2}
.reveal .slot{display:flex;align-items:center;gap:8px;background:#0f1626;border:1px solid #1e2a44;border-radius:10px;padding:10px;transform:translateY(-8px);opacity:0;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.reveal .slot .rank{font-weight:900;font-variant-numeric:tabular-nums;color:#aab4c3;width:24px;text-align:right}
.reveal .slot .owner-badge{margin-left:8px}
.reveal .slot.show{animation:pop 700ms cubic-bezier(.2,1.05,.4,1) forwards}
/* On enter, the list itself slides in quickly */
body.reveal-mode .reveal{animation: revealSlide 520ms cubic-bezier(.2,1,.38,1) both}
@keyframes revealSlide{from{ opacity:0; transform: translate(-50%,-10px) } to { opacity:1; transform: translate(-50%,0) }}

/* Smooth exit when starting the draft */
.reveal.reveal-exit{
        animation: revealExit 700ms ease-in-out forwards;
}
@keyframes revealExit{ to { opacity: 0; transform: translate(-50%,-12px) scale(.985); filter: blur(.8px); } }

/* Start button subtle exit when clicked */
#btn-start-draft.start-exit{ animation: startExit 420ms ease forwards }
@keyframes startExit{ to { opacity: 0; transform: translateY(4px) scale(.98); filter: blur(.3px) } }

@media (prefers-reduced-motion: reduce){
    .reveal.reveal-exit, #btn-start-draft.start-exit{ animation: none !important }
}
@keyframes pop{0%{transform:translateY(12px) scale(.98);opacity:0}60%{transform:translateY(0) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1);opacity:1} }
.search{padding:12px 16px}
.search .search-row{display:grid;grid-template-columns:minmax(260px,520px) 1fr;gap:16px;align-items:start}
.search-left{position:relative}
.search input{width:100%;box-sizing:border-box;font-size:1.14em;padding:15px;border-radius:10px;border:1px solid #2a395c;background:#0f1626;color:#e6e9ef;box-shadow:0 4px 14px rgba(0,0,0,.18) inset}
.search .search-hint{margin-top:8px;color:#aab4c3;font-size:13px;opacity:.9;padding-left:8px}
.search.has-selection .search-hint{display:none}
@media (max-width: 768px){.search .search-hint{display:none}}
/* Desktop: keep the hint visible at all times to prevent layout shift */
@media (min-width: 769px){
    .search .search-hint{display:block !important}
    .search.has-selection .search-hint{display:block !important}
    .search:not(.has-selection) #player-results:not(:empty) + .search-hint{display:block !important}
}
.search ul{
    z-index:10;
    position:absolute;
    left:0;right:0;
    top:calc(100% + 6px);
    list-style:none;
    padding:8px 0;margin:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
/* Hide the results panel entirely when there are no items */
#player-results:empty{display:none}
.search:not(.has-selection) #player-results:not(:empty) + .search-hint{display:none}
.search ul{max-height:48vh;overflow:auto;border:1px solid #1e2a44;border-radius:12px;background:rgba(15,22,38,.96);backdrop-filter:saturate(120%) blur(2px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.search li{
    padding:12px 14px;border-top:1px solid rgba(30,42,68,.6);
    cursor:pointer;transition:background-color .12s ease, filter .12s ease;
    display:flex;align-items:center;gap:12px;justify-content:space-between;
    position:relative;overflow:hidden;z-index:0
}
.search li:first-child{border-top:0}
.search li:hover{background:rgba(34,52,84,.6)}
.search li:active{filter:brightness(1.04)}
.search li .res-text{display:inline-flex;align-items:baseline;gap:4px;min-width:0;position:relative;z-index:1}
.search li .res-name{font-weight:800;color:#e6e9ef}
.search li .res-team{color:#b9c3d4;opacity:.95}
.search li .result-logo{position:absolute;right:-16px;top:50%;transform:translateY(-50%);height:84px;width:auto;object-fit:contain;opacity:.16;filter:grayscale(40%) contrast(112%);pointer-events:none;z-index:0;transition:opacity .18s ease, filter .18s ease}
.search li:hover .result-logo,
.search li:focus-within .result-logo{opacity:.3;filter:grayscale(28%) contrast(116%)}
.search li .res-pos{color:#cbd5e1;opacity:.9;margin-left:6px;font-weight:800}

/* Mobile: remove result logos to speed up initial load */
@media (max-width: 768px){
    body:not([data-show-mobile-logos="1"]) .search li .result-logo{display:none !important}
}

/* Right side stats panel */
.search-right{min-width:280px;display:none}
.search.has-selection .search-right{display:block}
.search.has-selection #player-results{display:none}
/* Ensure hidden state always wins for stat blocks */
#skater-stats.hidden, #goalie-stats.hidden{display:none !important}
#player-stats.stats{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px 18px;border:1px solid #1e2a44;border-radius:14px;background:linear-gradient(180deg,#0f1626,#0c1424);box-shadow:0 8px 22px rgba(0,0,0,.28);position:relative;overflow:hidden}
.stats .stats-header,.stats .stats-body{position:relative;z-index:1}
/* Faded team watermark inside stats panel */
.stats .stats-watermark{position: absolute;
    right: -22px;
    top: 49%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .12;
    filter: grayscale(40%) contrast(110%);
    height: 165px;
    width: auto;
    object-fit: contain;
    transition: opacity .22s ease;
    z-index: 0;}
@media (max-width: 768px){ .stats .stats-watermark{opacity:.28} }
.stats-header{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline;font-weight:800;margin-bottom:4px;color:#e6e9ef}
.stats-header #ps-name{font-size:18px;font-weight:900;letter-spacing:.2px}
.stats-header #ps-pos,.stats-header #ps-team{opacity:.85}
.stats-header #ps-pos:not(:empty){
    display:inline-flex;align-items:center;gap:0;background:#122035;border:1px solid #1e2a44;border-radius:999px;padding:2px 8px;font-weight:800;font-size:18px;line-height:1;color:#cbd5e1
}
.stats-header #ps-pos:not(:empty)::before{content:'\00B7'; /* middot */ margin-right:10px;margin-left:2px;color:#9fb3c8;opacity:.75}
.stats-body{display:none;gap:8px;font-size:15px;line-height:1.55;color:#c8d0dc}
.stats.has-content .stats-body{display:grid}
.stats-body > div{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.stats-body > div.hidden{display:none !important}
.stats-body strong{color:#e6e9ef;font-weight:800;opacity:.95;min-width:64px;text-align:right}
.stats-body span{margin-left:6px;background:#0b1220;border:1px solid #1e2a44;border-radius:10px;padding:2px 8px;line-height:1.4}
.stats-body #skater-stats > div,
.stats-body #goalie-stats > div{margin:4px 0}
@media (min-width: 768px){
    .stats-body #skater-stats > div,
    .stats-body #goalie-stats > div{margin:0}
}
.stats-actions{display:flex;justify-content:flex-start}
.player-stats-header{display:flex;justify-content:flex-start;align-items:center;border-bottom:1px solid #1e2a44;padding-bottom: 10px;margin-bottom: 0;margin-right: 120px;gap:22px}
.player-stats-header .stats-actions{flex:0 0 auto}
.player-stats-header .stats-header{display:inline-flex;align-items:center;gap:10px;margin:0;white-space:nowrap}
.player-stats-header .stats-header span{display:inline-flex;align-items:center}
.player-stats-header .team-logo-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#aeb8c5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.28);border:0;line-height:0;vertical-align:middle;align-self:center}
.player-stats-header .team-logo-badge{margin:0 4px}
.player-stats-header .team-logo-badge.hidden{display:none}
.player-stats-header .team-logo{height:24px;width:auto;object-fit:contain;display:inline-block;vertical-align:middle;margin:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));opacity:0;transition:opacity .22s ease;transform:translateY(0)}
@media (min-resolution: 2dppx){
    .player-stats-header .team-logo{filter:drop-shadow(0 0.5px 1px rgba(0,0,0,.18))}
}
.player-stats-header .team-logo.fade-in{opacity:1}
.player-stats-header .team-logo.hidden{display:none}
#skater-stats div { align-items: center; }

#goalie-stats div {
    align-items: center;
}

/* Rookie badge styles */
.rookie-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;background:#0369a1;color:#e0f2fe;border:1px solid #0e7490;border-radius:6px;padding:1px 6px;font-size:12px;font-weight:900;letter-spacing:.2px}
.rookie-badge.sm{font-size:11px;padding:0 6px;border-radius:999px;background:#0ea5e9;color:#001826;border-color:#0284c7}
.pick-row[data-rookie="1"] .rookie-badge{background:#0ea5e9;color:#001826;border-color:#0284c7}
.search li .rookie-badge{margin-left:8px}

/* Team rookie requirement notice */
.notice.warning{background:#3b1d1d;border:1px solid #7f1d1d;color:#fecaca;border-radius:10px;padding:10px 12px;font-weight:800;margin:10px 0}

/* Themed Draft button */
#btn-draft-player{appearance:none;border:0;position:relative;isolation:isolate;color:#fff;background:#4f46e5;padding:12px 16px;border-radius:12px;font-weight:900;letter-spacing:.3px;cursor:pointer;transition:transform .15s ease, filter .2s ease}
#btn-draft-player::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 40%,#f472b6 100%);filter:blur(10px);opacity:.15;z-index:-1}
#btn-draft-player:hover,#btn-draft-player:focus-visible{transform:translateY(-1px)}
#btn-draft-player:active{transform:translateY(0)}
#btn-draft-player.hidden{display:none}

/* Danger style when disabled due to already drafted */
#btn-draft-player.danger[disabled]{
    background:#b91c1c;
    color:#fff;
    cursor:not-allowed;
    opacity:0.4;
    filter:none;
}
#btn-draft-player.danger[disabled]::before{display:none}
/* Icon spacing */
#btn-draft-player .fa-ban{margin-right:8px;opacity:.9}

/* Responsive: stack on small screens */
@media (max-width: 920px){
  .search .search-row{grid-template-columns:1fr;gap:10px}
    #player-stats.stats{padding:14px}
    .stats-header #ps-name{font-size:17px}
}
.board{padding:12px 16px;padding-top:0;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}

/* Draft Board Reveal (post-order -> board transition) */
.board.revealing .rounds-grid{ contain: layout paint; }
/* Round 1: slide from the left for drama */
.board.revealing .round-col:first-child{
    transform: translateX(-24px);
    opacity: 0;
    overflow: hidden;
    animation: colSlideLeft 950ms cubic-bezier(.2,1,.38,1) forwards;
    /* slight head start */
    animation-delay: 80ms;
}
@keyframes colSlideLeft{ 0%{ transform: translateX(-24px); opacity: 0 } 100%{ transform: translateX(0); opacity: 1 } }
/* Later rounds: subtle scale-up + lift */
.board.revealing .round-col:not(:first-child){
    transform: translateY(18px) scale(.975);
    opacity: 0;
    overflow: hidden;
    animation: colPop 920ms cubic-bezier(.2,1,.38,1) forwards;
    animation-delay: calc(var(--i, 0) * 140ms);
}
@keyframes colPop{ 0%{ transform: translateY(18px) scale(.975); opacity: 0 } 100%{ transform: translateY(0) scale(1); opacity: 1 } }
.board.revealing .round-col .round-header{
    transform: translateX(-18px);
    opacity: 0;
    animation: headerSlide 700ms ease-out forwards;
    animation-delay: calc(var(--i, 0) * 140ms + 80ms);
}
@keyframes headerSlide{ from{ transform: translateX(-18px); opacity:0 } to{ transform: translateX(0); opacity:1 } }
.board.revealing .round-col .round-body .pick-row{
    opacity: 0;
    animation: rowFade 600ms ease-out forwards;
    animation-delay: calc(var(--i, 0) * 140ms + 200ms);
}
@keyframes rowFade{ from{ opacity:0; transform: translateY(4px) } to{ opacity:1; transform: translateY(0) } }

/* Respect reduced motion: disable reveal animations */
@media (prefers-reduced-motion: reduce){
    .board.revealing .round-col,
    .board.revealing .round-col .round-header,
    .board.revealing .round-col .round-body .pick-row{ animation: none !important; transform:none !important; opacity:1 !important }
}

/* Soft crossfade between hero and board when starting draft */
/* Normally the board is hidden pre-draft; allow it during crossfade */
body.board-crossfade.pre-draft .board{ display:block }
/* Starting state: board hidden softly */
body.board-crossfade .board{ opacity:0; transform: translateY(8px); }
/* Fade hero out and board in once draft-active is toggled */
body.board-crossfade .hero{ transition: opacity .5s ease }
body.board-crossfade.draft-active .hero{ opacity:0 }
body.board-crossfade.draft-active .board{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease }

/* Mobile-only header and on-clock banner spacing/alignment tweaks */
@media (max-width: 768px){
    .board{padding-top: 0;}

    #player-query{margin-top: 10px;}

    /* Search-right: compact spacing */
    .search-right{margin-top:8px}

    /* Player stats header: tighter gaps and balance */
    .player-stats-header {margin-right: 0;gap: 10px;align-items:center;justify-content:space-between}
    .player-stats-header .stats-actions{display:none !important}
    .player-stats-header .assigned-chip{font-size:12px;padding:4px 10px}
    .player-stats-header .team-logo-badge{width:26px;height:26px}
    .player-stats-header .team-logo{height:20px}

    /* Header: honor safe area, add breathing room, center brand */
    header{padding:calc(env(safe-area-inset-top,0) + 10px) 14px 12px; min-height: calc(env(safe-area-inset-top, 0) + 76px)}
    header .brand{justify-self:center}
    /* Hide the site title text on mobile */
    header h1{display:none}
    .brand-logo{height:52px}
    /* Center the logo horizontally within the header */
    .brand-logo{left:50%;transform:translate(-50%,-50%)}

    /* On-clock banner: clearer spacing and stacking */
    .on-clock-banner .on-clock-inner{grid-template-columns:1fr;gap:10px;padding:12px 14px;justify-items:center;text-align:center;}
    .on-clock-banner .oc-left{gap:8px;justify-content:center;margin-top:10px;}
    .on-clock-banner .label{font-size:11px;letter-spacing:.4px;}
    .on-clock-banner .owner-badge{padding:6px 10px;border-radius:999px;margin:0 auto}
    .on-clock-banner .pick-meta{font-size:18px;margin-top:2px;justify-self:center}
    .on-clock-banner .roster-counters{flex-wrap:nowrap;gap:3px;justify-content:center;white-space:nowrap}
    .on-clock-banner .roster-counters .chip{padding:1px 5px;font-size:11px;gap:4px}
    .on-clock-banner .roster-counters .chip .count{padding:0 3px}

    /* Stats panel compact padding */
    #player-stats.stats{padding:12px 14px}
    .stats-header #ps-name{font-size:18px}
    .stats-body{font-size:13px}
    /* Two-column layout for stat rows */
    .stats.has-content .stats-body > div{display: inline-block !important;}
    .stats.has-content .stats-body > div > div{display: inline-block !important;}
    /* Keep labels visible and tighten spacing */
    #skater-stats > div,#goalie-stats > div{display:flex;align-items:center}
    .stats-body > div{gap:6px 8px;margin:2px 0}
    .stats-body strong{min-width:52px;font-size:13px}
    .stats-body span{padding:1px 6px;font-size:13px;border-radius:8px;margin-right: 15px;}
    /* Remove mobile bullets/icons before values */
    #skater-stats span[id]::before,#goalie-stats span[id]::before{content:none}
}
.cell{background:#0f1626;border:1px solid #1e2a44;border-radius:12px;padding:12px}
.cell .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pick-num{font-weight:800;font-variant-numeric:tabular-nums;background:#0b1220;border:1px solid #1e2a44;border-radius:8px;padding:2px 6px;color:#cbd5e1}
.owner-badge{padding:4px 8px;border-radius:8px;background:var(--obg,#2a395c);color:var(--ofg,#fff);font-weight:700;letter-spacing:.2px;display:inline-flex;align-items:center;gap:6px}
.on-clock .owner-badge::before{
    /* Double chevron right: `fa-angles-right` */
    content:"\f101";
    font: var(--fa-font-solid);
    font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Free","Font Awesome 5 Pro","Font Awesome Free";
    font-weight:900;
    display:inline-block;
    font-size:12px;
    line-height:1;
    color:currentColor;
    opacity:.9;
}
.round-pill{margin-left:auto;font-size:12px;padding:2px 6px;border-radius:999px;background:#122035;border:1px solid #1e2a44;color:#9fb3c8}
.cell .player{font-weight:650}
.cell .player .light{opacity:.7;font-weight:500}
.cell.picked{background:#101a2b}
.pick-form{display:flex;gap:6px}
.pick-form input, .pick-form button{padding:6px;border-radius:6px;border:1px solid #2a395c;background:#0b1220;color:#e6e9ef}
.stats{margin-top:0;padding:10px;border:1px solid #1e2a44;border-radius:12px;background:#101a2b}
.stats.hidden{display:none}
.stats-header{font-weight:800;font-size: 1.14em;}
.stats-body{gap:6px;font-size:14px;color:#c8d0dc}
.stats-body .stats-empty{margin-top:6px;padding:8px 0;border-radius:8px;color:#aab4c3;font-style:italic}
.stats-body .stats-empty .spark{opacity:.9;margin-right:6px}
.stats-actions #btn-draft-player.hidden{display:none}
#btn-generate-order {display: block; margin: 10px 15px;}

/* Ensure the start button is fully clickable above reveal list */
#btn-start-draft{position:relative;z-index:3;}
#btn-start-draft.cta-button{padding:16px 28px;border-radius:14px;font-size:18px;}

/* On the clock banner */
.on-clock-banner{position:sticky;top:0;z-index:20;background:rgba(17,26,43,.95);backdrop-filter:saturate(120%) blur(2px);border-bottom:1px solid #1e2a44}
.on-clock-banner .on-clock-inner{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 16px}
.on-clock-banner .oc-left{display:flex;align-items:center;gap:10px}
.on-clock-banner .clock-remaining{margin-left:8px;font-weight:900;font-variant-numeric:tabular-nums;background:#122035;border:1px solid #1e2a44;color:#e6e9ef;border-radius:8px;padding:4px 8px}
.on-clock-banner .label{opacity:.85;font-weight:900;letter-spacing:.35px;text-transform:uppercase;font-size:12px;color:#c8d0dc}
.on-clock-banner .pick-meta{color:#aab4c3;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left: 15px;font-size: 22px;}
.on-clock-banner.done{background:#101a2b}
/* Roster counters chips */
.on-clock-banner .roster-counters{display:flex;gap:6px;align-items:center;justify-content:flex-start;white-space:nowrap;flex-wrap: wrap;}
.on-clock-banner .roster-counters .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#122035;border:1px solid #1e2a44;color:#cbd5e1;font-weight:800;font-size:16px;}
.on-clock-banner .roster-counters .chip .abbr{opacity:.85}
.on-clock-banner .roster-counters .chip .abbr-short{display:none}
.on-clock-banner .roster-counters .chip .abbr-long{display:inline}
.on-clock-banner .roster-counters .chip .count{font-variant-numeric:tabular-nums;background:#0b1220;border:1px solid #1e2a44;border-radius:8px;padding:0 6px}
.on-clock-banner .roster-counters .chip.def{border-color:#86297f}
.on-clock-banner .roster-counters .chip.g{border-color:#4f46e5}
.on-clock-banner .roster-counters .chip.f{border-color:#0ea5e9}
.on-clock-banner .roster-counters .chip.b{border-color:#16a34a}
.on-clock-banner .roster-counters .chip.r{border-color:#0284c7}
@media (max-width: 720px){
    .on-clock-banner .on-clock-inner{grid-template-columns:1fr;gap:8px;}
    .on-clock-banner .roster-counters{margin-top: 15px;}
    .on-clock-banner .pick-meta{margin-top:15px;}
}
/* Toggle short vs long labels by viewport */
@media (max-width: 768px){
    .on-clock-banner .roster-counters .chip .abbr-short{display:inline}
    .on-clock-banner .roster-counters .chip .abbr-long{display:none}

    .abbr-short{font-size: 0.7em;}
}

/* Reveal mode: darken and fix background, focus on order */
body.reveal-mode{
    background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/images/ice.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    overflow:hidden;
}
/* Mobile reveal-mode: avoid fixed attachment and use SVG texture */
@media (max-width: 640px){
    body.reveal-mode{
        background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/images/ice-texture.svg');
        background-attachment: scroll;
        background-size: cover;
    }

    .on-clock-banner .roster-counters .chip{font-size:11px;}
}

/* Draft-active (board shown): darken background for readability */
body.draft-active{
    background-image: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.55)), url('/images/ice.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
@media (max-width: 640px){
    body.draft-active{
        background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/images/ice-texture.svg');
        background-attachment: scroll;
        background-size: cover;
    }
}
body.reveal-mode .hero-logo{opacity:.5}
body.reveal-mode header{background:rgba(17,26,43,.9);backdrop-filter:saturate(120%) blur(2px)}
body.reveal-mode .hero{min-height:100vh;padding-top:0}
body.reveal-mode .hero .controls,
body.reveal-mode #btn-generate-order{display:none !important}
body.reveal-mode .reveal{overflow:auto;padding-bottom:100px}
body.reveal-mode .reveal .slot{background:rgba(15,22,38,.92)}

/* Stats reveal animations */
@keyframes statsFade { from { opacity:0; transform:scale(.995) } to { opacity:1; transform:scale(1) } }
@keyframes statsFadeUp { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:translateY(0) } }
.stats.has-content{animation:statsFade 220ms ease-out}
.stats.has-content .stats-header{animation:statsFadeUp 180ms ease-out}
.stats.has-content .stats-body{animation:statsFadeUp 240ms ease-out 40ms both}
#skater-stats:not(.hidden),
#goalie-stats:not(.hidden){animation:statsFadeUp 200ms ease-out}

/* Round columns layout */
.rounds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.round-col{background:#0f1626;border:1px solid #1e2a44;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.round-header{background:#111a2b;color:#e6e9ef;text-align:center;font-weight:900;font-size:24px;letter-spacing:.5px;padding:6px 0;border-bottom:1px solid #1e2a44}
.round-body{display:flex;flex-direction:column}
.pick-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px dashed #1e2a44;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;position:relative;overflow:hidden}
.pick-row:last-child{border-bottom:0}
.pick-row{scroll-margin-top:86px}
.pick-row.on-clock{overflow: visible;}
/* Muted style for completed picks */
.pick-row.picked{opacity: 0.5;background:rgba(16,26,43,.6)}
.pick-row.picked .player{color:#c9d3e2}
.pick-row.picked .owner-badge{filter:saturate(.75) opacity(.95)}
/* Drafted rows: big background team logo at row level */
.pick-row .player{position:relative;display:flex;align-items:center;gap:8px;min-height:34px}
.pick-row .owner-badge{position:relative;z-index:1}
.pick-row .player span{position:relative;z-index:1}
.pick-row.picked .big-team-logo{position:absolute;right:-16px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.12;filter:grayscale(40%) contrast(110%);height:84px;width:auto;object-fit:contain;transition:opacity .25s ease;z-index:0}
.pick-row.picked.on-clock .big-team-logo{opacity:.16}
/* Mobile: make big team logo more visible on picked rows */
@media (max-width: 768px){
    .pick-row.picked .big-team-logo{opacity:.39}
    .pick-row.picked.on-clock .big-team-logo{opacity:.39}
}
/* Newly-picked subtle highlight (auto-fades) */
.pick-row.picked.just-picked{
    background: linear-gradient(0deg, rgba(79,70,229,.18), rgba(79,70,229,.08));
    box-shadow: 0 0 0 2px rgba(79,70,229,.45) inset;
    animation: jpFade 2.4s ease-out forwards;
}
@keyframes jpFade{
    0%   { box-shadow: 0 0 0 8px rgba(79,70,229,0.0) inset; }
    15%  { box-shadow: 0 0 0 2px rgba(79,70,229,.45) inset; }
    100% { box-shadow: 0 0 0 0 rgba(79,70,229,0) inset; }
}
/* On-clock highlight with subtle pulse */
.pick-row.on-clock{outline:2px solid #4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.25) inset;position:relative}
.pick-row.on-clock::before{content:"";position:absolute;inset:-2px;border-radius:10px;box-shadow:0 0 0 0 rgba(79,70,229,.45);animation:ocPulse 1.8s ease-out infinite;pointer-events:none}
.pick-row.on-clock::after{content:'ON THE CLOCK';position:absolute;top:-8px;right:10px;background:#4f46e5;color:#fff;font-size:10px;font-weight:900;padding:2px 6px;border-radius:999px;letter-spacing:.3px}

@keyframes ocPulse{0%{box-shadow:0 0 0 0 rgba(79,70,229,.45)}70%{box-shadow:0 0 0 9px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}

/* Initial state: hide search and board until draft order shown/started */
body.pre-draft .search,
body.pre-draft .board{display:none}

/* Pre-draft links: prominent, polished rules button */
.pre-draft-links{margin-top:8px;display:flex;justify-content:center}
.pre-draft-links a.ghost{
    position:relative;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    color:#dbe8ff;
    background:linear-gradient(180deg,#0f1626,#0c1424);
    border:1px solid #233154;
    border-radius:999px;
    padding:10px 16px;
    font-weight:900;letter-spacing:.2px;
    box-shadow:0 8px 22px rgba(0,0,0,.3);
    isolation:isolate;
}
.pre-draft-links a.ghost::before{
    content:"";position:absolute;inset:-2px;border-radius:999px;
    background:linear-gradient(135deg,rgba(96,165,250,.4),rgba(79,70,229,.4),rgba(167,139,250,.4));
    filter:blur(10px);opacity:.18;z-index:-1
}
.pre-draft-links a.ghost:hover,
.pre-draft-links a.ghost:focus-visible{filter:brightness(1.06);transform:translateY(-1px)}
.pre-draft-links a.ghost:active{transform:translateY(0)}
.pre-draft-links a.ghost i{font-size:14px;opacity:.95}

/* When draft is active, reduce hero height */
body.draft-active .hero-logo{opacity:0;transform:translateY(-10px) scale(.96)}
body.draft-active .hero{min-height:auto;max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;overflow:hidden}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
    .hero{transition:none}
    .hero-logo{transition:none}
    header{transition:none}
    .stats.has-content, .stats.has-content .stats-header, .stats.has-content .stats-body,
    #skater-stats:not(.hidden), #goalie-stats:not(.hidden){animation:none !important}
}

/* Collapsible header to maximize board space */
body.header-collapsed header{transform:translateY(-100%);opacity:0;max-height:0;padding-top:0;padding-bottom:0;border:0;box-shadow:none}

/* Fullscreen toggle button */
#fs-toggle{position:fixed;left:14px;bottom:12px;z-index:1000;padding:10px 12px;border-radius:10px;border:1px solid #2a395c;background:#0f1626;color:#e6e9ef;cursor:pointer;opacity:.85}
#fs-toggle:hover{opacity:1}
@media (max-width:560px){
    header{grid-template-columns:1fr;gap:10px}
    .brand{justify-self:center}
    .timer{justify-self:center}
    .brand-logo{height:56px}
    .hero .controls{flex-wrap:wrap}
}

/* Footer */
.site-footer{margin-top:20px;padding:16px;background:#111a2b;border-top:1px solid #1e2a44;color:#aab4c3;transition:opacity .3s ease}
.site-footer .footer-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.site-footer .sep{opacity:.6}
.site-footer a{color:#9fb3c8;text-decoration:underline;}
.site-footer a:hover{text-decoration:none;}

/* Hide footer during crossfade transition without affecting layout height */
body.board-crossfade .site-footer{opacity:0;visibility:hidden;pointer-events:none}

/* Toasts */
.toast-container{position:fixed;right:14px;bottom:14px;z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:rgba(15,22,38,.95);backdrop-filter:saturate(120%) blur(2px);border:1px solid #233154;color:#e6e9ef;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:10px 12px;display:flex;align-items:center;gap:10px;min-width:260px;max-width:420px;animation:toastIn .2s ease-out}
.toast .msg{flex:1}
.toast .action{appearance:none;background:#4f46e5;color:#fff;border:0;border-radius:8px;padding:6px 10px;font-weight:800;cursor:pointer}
.toast .close{appearance:none;background:transparent;color:#aab4c3;border:0;font-size:18px;line-height:1;cursor:pointer}
.toast input.toast-input{width:160px;padding:6px 8px;border-radius:8px;border:1px solid #2a395c;background:#0b1220;color:#e6e9ef}
.toast.success{border-color:#2d6a4f}
.toast.error{border-color:#7f1d1d}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Prominent style for drafted toast */
.toast.drafted{
        position:relative;
        border:1px solid transparent;
        background:
            linear-gradient(180deg, rgba(20,28,46,.98), rgba(14,22,38,.98)) padding-box,
            linear-gradient(135deg,#60a5fa, #4f46e5, #a78bfa) border-box;
        color:#eef2ff;
        box-shadow:0 14px 40px rgba(79,70,229,.35), 0 0 0 1px rgba(79,70,229,.15) inset;
    /* space for leading check icon */
    padding-left:44px;
}
.toast.drafted .msg{font-weight:900;letter-spacing:.2px}
.toast.drafted .action{background:#b91c1c}
.toast.drafted::before{
        content:"";
        position:absolute;inset:0;border-radius:12px;
        background:radial-gradient(120px 60px at 12% 0%, rgba(255,255,255,.08), transparent 60%), radial-gradient(120px 60px at 90% 120%, rgba(255,255,255,.06), transparent 60%);
        pointer-events:none;
    z-index:0;
}

/* Small check icon; set --toast-accent to team color if desired */
.toast.drafted::after{
    content:"\f00c"; /* check icon */
    position:absolute;
    left:12px;top:50%;transform:translateY(-50%);
    width:22px;height:22px;border-radius:50%;
    background:var(--toast-accent, #22c55e);
    color:#0b1220;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;
    font: var(--fa-font-solid);
    font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome Free";
    font-weight:900;
    box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.18) inset;
    z-index:1;
}


/* Modal */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:saturate(120%) blur(2px)}
.modal.hidden{display:none}
.modal .modal-dialog{width: min(1300px, 102vw);max-height: 94vh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border-radius:14px;border:1px solid #1e2a44;background:linear-gradient(180deg,#0f1626,#0c1424);box-shadow:0 20px 60px rgba(0,0,0,.5);font-size:15.5px}
.modal .modal-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #1e2a44;
    background:linear-gradient(180deg, color-mix(in oklab, var(--team-color,#4f46e5), #fff 8%) 0%, rgba(15,22,38,.92) 100%);
    color:var(--ofg,#fff);
    backdrop-filter:saturate(120%) blur(2px)}
.modal .modal-header h2{margin:0;font-size:23px;letter-spacing:.2px}
.modal .modal-close{appearance:none;border:0;background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;padding:6px 10px;border-radius:8px;cursor:pointer}
.modal .modal-body{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.modal .modal-footer{position:sticky;bottom:0;background:rgba(15,22,38,.98);backdrop-filter:saturate(120%) blur(2px);display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;border-top:1px solid #1e2a44}
.modal .tm-row{display:flex;gap:10px;align-items:center}
.modal label{min-width:110px;opacity:.9}
.modal select,.modal input{padding:6px 10px;border-radius:8px;border:1px solid #2a395c;background:#0f1626;color:#e6e9ef}
.modal button.primary{background:#4f46e5;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.modal button.ghost{background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;border-radius:10px;padding:10px 14px;cursor:pointer}
.modal .tm-columns{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:16px;align-items:start}
.modal .tm-col{display:flex;flex-direction:column;gap:12px}
.modal .tm-col:not(#tm-col-summary){background:rgba(15,22,38,.55);border:1px solid #1e2a44;border-radius:10px;padding:10px}
.modal #tm-col-summary{background:rgba(17,26,43,.65);border:1px solid #233154;border-radius:10px;padding:10px}
.modal .tm-summary-block{margin:4px 0 10px}
.modal .tm-summary-block{background:rgba(11,18,32,.55);border:1px solid #1e2a44;border-radius:10px;padding:8px 10px}
.modal .tm-summary-block strong{display:block;margin-bottom:6px;padding:6px 8px;border-left:3px solid #4f46e5;border-radius:8px;background:rgba(79,70,229,.08)}
.modal .tm-summary-block strong .owner-name{font-weight:900;letter-spacing:.2px}
.modal .tm-summary-block ul{list-style:none;margin:0;padding:0}
.modal .tm-summary-block ul li{position:relative;padding-left:14px;animation:tmFadeIn .18s ease-out}
.modal .tm-summary-block ul li::before{content:'•';position:absolute;left:0;top:0;color:#8b5cf6}
.modal .tm-section{display:flex;flex-direction:column;gap:6px}
.modal .tm-section .label-row{margin-top: 13px;display:flex;align-items:center;justify-content:space-between}
.modal .tm-section .label-row label{min-width:auto}
.modal .tm-section select[multiple]{min-height:160px}
.modal .tm-section select[multiple]{font-size:14.5px;line-height:1.35;padding:6px 8px}
.modal .tm-section .hint{font-size:12px;color:#aab4c3;opacity:.9}
.modal .tm-col h3{margin:6px 0 2px;font-size:16px;opacity:.9}
.modal .tm-col h3{font-weight:900;letter-spacing:.2px}
.modal .tm-col h3::after{content:'';display:block;height:1px;background:linear-gradient(90deg,#1e2a44,transparent);opacity:.7;margin-top:6px}
.modal .tm-section label{font-weight:700;opacity:.85}
.modal .tm-section .label-row label{font-weight:800}
.modal #tm-slot-offer{margin:0;padding-left:18px}
.modal #tm-offer-list{margin:0;padding-left:18px}
.modal .slot-transfer button{
    background:#4f46e5;
    color:#fff;
    border:0;
    border-radius:10px;
    padding:8px 12px;
    font-weight:700;
    cursor:pointer;
}
.modal .slot-transfer button:hover{filter:brightness(1.05)}
.modal select:focus,.modal input:focus,.modal button:focus{outline:2px solid rgba(99,102,241,.35);outline-offset:1px}
.modal .slot-transfer .qty{display:inline-flex;align-items:center;gap:6px;margin:0 6px}
.modal .slot-transfer .qty input{width:64px;text-align:center}
.modal .slot-transfer .qty button{background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;border-radius:8px;padding:6px 10px;cursor:pointer}
.modal .slot-error{color:#fca5a5;font-weight:700;margin-top:6px;min-height:18px}
.modal .slot-error:empty{display:none}
@media (max-width: 900px){
    .modal .tm-columns{grid-template-columns:1fr}
}

/* Contract Slots UI polish */
.modal .slot-transfer{display:flex;gap:8px;align-items:center;background:#0b1220;border:1px solid #1e2a44;border-radius:10px;padding:8px}
.modal .slot-transfer select{min-width:150px}
.modal .slot-transfer input[type=number]{width:72px;text-align:center}
.contract-slot-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.contract-slot-header .slot-season-switch select{background:#0b1220;border:1px solid #1e2a44;border-radius:8px;color:#e6e9ef;padding:4px 8px;font-size:.85rem;min-width:140px}
.slot-availability .season-label{background:rgba(79,70,229,.12);border-radius:999px;padding:2px 10px;font-weight:600}
.modal .slot-availability{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.modal .slot-chip{display:inline-flex;align-items:center;gap:6px;background:#122035;border:1px solid #1e2a44;color:#cbd5e1;border-radius:999px;padding:4px 8px;font-weight:800}
.modal .slot-chip strong{font-variant-numeric:tabular-nums;color:#e6e9ef}
.modal .slot-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.modal ul[id$="slot-offer"]{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.modal ul[id$="slot-offer"] li{display:inline-flex;align-items:center;gap:6px;background:rgba(96,165,250,.12);border:1px solid #2c4f83;color:#bcd6ff;border-radius:999px;padding:4px 10px;font-weight:800}
.modal ul[id$="slot-offer"] li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#60a5fa;}

/* Modal mini actions and disabled primary styles */
.modal .tm-section .tm-mini-actions{display:flex;gap:6px;justify-content:flex-end}
.modal .tm-section .tm-mini-actions .mini{padding:4px 8px;border-radius:8px;font-size:12px}
.modal .tm-section .tm-mini-actions .mini.ghost{background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;cursor:pointer}
.modal button.primary[disabled]{opacity:.5;cursor:not-allowed}

/* Count badges for selections */
.modal .count-badge{display:inline-block;min-width:18px;text-align:center;margin-left:6px;font-variant-numeric:tabular-nums;background:#122035;border:1px solid #1e2a44;color:#cbd5e1;border-radius:999px;padding:2px 6px;font-size:12px;font-weight:900}

/* Enlarge team selects for readability */
#tm-from,#tm-to{font-size:16px;padding:10px 12px;border-radius:10px}

/* Group subhead styles (if added later) */
.tm-subhead{opacity:.9;font-weight:900;margin:6px 0 4px;font-size:13px;color:#9fb3c8}
.tm-sublist{list-style:none;margin:0 0 6px 0;padding:0}
.tm-sublist li{padding-left:14px;position:relative}
.tm-sublist li::before{content:'•';position:absolute;left:0;top:0;color:#7dd3fc}

/* Lightweight tooltip for owner badges */
.nf-tooltip{position:fixed;z-index:1200;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-100%);
    background:rgba(15,22,38,.98);backdrop-filter:saturate(120%) blur(2px);border:1px solid #233154;color:#e6e9ef;
    border-radius:8px;padding:6px 8px;font-size:13px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.nf-tooltip::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
    width:10px;height:10px;background:rgba(15,22,38,.98);border-right:1px solid #233154;border-bottom:1px solid #233154;
    transform-origin:center;rotate:45deg;border-bottom-left-radius:2px}

.tm-section option, .tm-section select {
    padding: 5px 0;
    font-size: 1.20em;
}

/* Micro animations */
@keyframes tmFadeIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}

/* Divider between different seasons in future picks (via option styling) */
#tm-future-picks option.divider,#tm2-future-picks option.divider{
    border-top:1px solid #2a395c;
    border-bottom:1px solid #2a395c;
    background:rgba(34,52,84,.5);
    color:#dbe8ff;
    font-weight:800;
    font-size: 0;
    margin: 7px 0;
}

#tm-slot-count, #tm2-slot-count {
    padding-left: 10px;
    padding-right: 0px;
}

#tm-slot-term, #tm2-slot-term {
    font-size: 1.15em;
}

.mr-0 {
    margin-right: 0px;
}

.mr-1 {
    margin-right: 5px;
}

.mr-2 {
    margin-right: 10px;
}

.mr-3 {
    margin-right: 15px;
}

/* Team View */
body.team-view { background: #0b1220; color: #e6e9ef; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
.team-header { padding: calc(env(safe-area-inset-top, 0) + 10px) 16px 16px; background:
        linear-gradient(180deg, color-mix(in oklab, var(--obg,#2a395c), #000 6%) 0%, color-mix(in oklab, var(--obg2, #1b243a), #000 4%) 100%),
        var(--obg,#2a395c);
    color: var(--ofg,#fff); position: sticky; top: 0; z-index: 5; display:block; overflow: hidden; 
    background: url('/images/ice.png') slategray;
    background-blend-mode: multiply;
    background-size: cover;
    background-position-y: -450px;}
.team-header { position: sticky; top: 0; }
.team-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0)); pointer-events: none; }
.team-header::after { content: ""; position: absolute; right: 8px; bottom: 6px; width: 150px; height: 150px; background-image: var(--header-logo); background-size: contain; background-repeat: no-repeat; opacity: 0; filter: grayscale(100%) contrast(112%); pointer-events: none; transform: translateY(var(--wm-shift, 0px)); animation: wmFade .6s ease-out .1s forwards; }
.team-header .th-top { display:flex; align-items:center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.team-header .th-center { display: flex; align-items: center; justify-content: center; padding-top: 4px; }
.team-header h1.th-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .01em; text-align: center; }
.team-header .owner-name { font-weight: 700; font-size: 18px; }
.team-header .th-title .owner-name { position: relative; padding-bottom: 6px; }
.team-header .th-title .owner-name::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 48%; max-width: 220px; height: 3px; border-radius: 3px; background:
    linear-gradient(90deg, color-mix(in oklab, var(--team-color, var(--obg)), #fff 10%), color-mix(in oklab, var(--team-color, var(--obg)), #000 12%)); opacity: .85; box-shadow: 0 1px 0 rgba(0,0,0,.18) inset; }
.team-header .season-chip { font-size: 11px; opacity: .95; background: rgba(0,0,0,.18); padding: 4px 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,.25); }
.team-header .season-chip.sm { font-size: 11px; }
.back-link { color: var(--ofg,#fff); text-decoration: none; border: 1px solid rgba(255,255,255,.22); padding: 6px 10px; border-radius: 12px; background: transparent; display:inline-flex; align-items:center; gap:8px; font-weight: 600; font-size: 13px; line-height: 1; min-height: 32px; }
.back-link:hover { background: rgba(0,0,0,.25); }
.team-header .chev { font-size: 16px; }

@media (min-width: 640px){
    .team-header h1.th-title { font-size: 24px; }
    .team-header .owner-name { font-size: 24px; }
}
/* Mobile header: ensure the ice background is clearly visible */
@media (max-width: 640px){
    .team-header{
        background: url('/images/ice.png') slategray;
        background-size: auto;
        background-position: center;
        background-position-y: -590px;
    }
}

        /* Very small screens: hide season chip to reduce crowding */
                @media (max-width: 360px){
                        .team-header .season-chip.sm { display: none; }
                        .team-header::after { width: 120px; height: 120px; right: 4px; bottom: 4px; }
                }

/* Ensure owner name is always visible on mobile */
@media (max-width: 640px){
    .team-header .th-title .owner-name { display: inline !important; visibility: visible !important; opacity: 1 !important; }
}
/* Override global mobile header h1 hide for team view */
@media (max-width: 768px){
    .team-header h1.th-title { display: block !important; }
}

            @keyframes wmFade {
                from { opacity: 0; }
                to { opacity: .12; }
            }
.team-content { max-width: 1000px; margin: 18px auto; padding: 0 16px; }
.owner-access-alert{max-width:960px;margin:18px auto 0;padding:12px 16px;border-radius:12px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.12);color:#fde68a;font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:4px}
.owner-access-alert strong{color:#fff8dc;font-size:15px}
body.team-view[data-owner-mismatch="1"] .owner-access-alert{border-color:rgba(248,113,113,.4);background:rgba(239,68,68,.14);color:#fecaca}
body.team-view[data-owner-mismatch="1"] .owner-access-alert strong{color:#fee2e2}
.slot-summary { margin-bottom: 18px; }
/* Pill container for Contract Slots */
.slot-summary { background: linear-gradient(180deg, rgba(11,18,32,.75), rgba(15,22,38,.75)); border: 1px solid #1f2a44; border-radius: 16px; padding: 12px 12px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18) inset; }
.slot-summary h2 { margin: 0 0 8px 2px; text-align:center; font-size: 18px; letter-spacing: .02em; opacity: .95; }
@media (max-width: 640px){
    .slot-summary h2 { 
        color: #c7d2ff;
        font-size: 16px; 
    }
}
.slot-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.slot-chips .chip + .chip{ position:relative; }
.slot-chips .chip + .chip::before{ content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#1f2a44; opacity:.7; border-radius:1px; }
.slot-chips .chip { background: #0f172a; color: #e5e7eb; padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; border: 1px solid #1f2a44; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }
.slot-chips .chip .abbr { background: #1f2937; color: #f9fafb; border-radius: 999px; padding: 2px 8px; font-weight: 700; letter-spacing: .2px; }
.slot-chips .chip .avail { opacity: .88; font-size: 12px; font-weight: 800; color: #cfe1ff; }
.roster { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.roster-group { background: #0f172a; border: 1px solid #1f2a44; border-radius: 12px; overflow: hidden; }
.roster-group .rg-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: linear-gradient(180deg,#0b132b,#0a1227); border-bottom: 1px solid #1c2744; }
.roster-group .rg-header h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #c7d2fe; }
.roster-group .rg-header .target { font-size: 12px; color: #93c5fd; }
.rg-list { list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.rg-item { position:relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; background: radial-gradient(1200px 220px at right -200px center, rgba(59,130,246,.06), rgba(0,0,0,0)), #0b1220; padding: 10px 12px; border: 1px solid #1f2a44; border-radius: 10px; overflow:hidden }
.rg-item .abbr { width: 30px; height: 22px; display:inline-flex; align-items:center; justify-content:center; border-radius: 6px; font-weight: 700; color: #fff; font-size: 12px; }
.rg-item .abbr.f { background: #2563eb; }
.rg-item .abbr.d { background: #10b981; }
.rg-item .abbr.g { background: #f59e0b; color: #111827; }
.rg-item .abbr.bench { background: #6b7280; }
.rg-item .name { font-weight: 600; }
.rg-item .name { display: inline-flex; align-items: center; gap: 8px; position:relative; z-index:1 }
.rg-item .meta { position:relative; z-index:1 }
/* Large faint team watermark, similar to board picks */
.rg-item .rg-big-team-logo{position:absolute;right:-18px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.12;filter:grayscale(40%) contrast(110%);height:140px;width:auto;object-fit:contain;transition:opacity .25s ease;z-index:0}
@media (max-width: 768px){
    .rg-item .rg-big-team-logo{opacity:.28;height:160px;right:-22px}
}
.rg-item .meta { font-size: 12px; color: #9ca3af; }
.rg-list .empty { opacity: .75; font-style: italic; color: #aab3c5; padding: 8px 2px; }
.team-footer { max-width: 1000px; margin: 14px auto 22px; padding: 0 16px; display:flex; justify-content:center; }
.team-footer .button { background: #1f2a44; color: #e6e9ef; border: 1px solid #2a395c; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.team-footer .button:hover { background: #2a395c; }

/* Team contract assignment UI */
.contract-assign{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;grid-column:1 / -1;margin:8px 0 0 0;}
.contract-assign .term-select{background:#111827;color:#e5e7eb;border:1px solid #1f2a44;border-radius:8px;padding:6px 8px;font-size: 1.15em;}
.contract-assign .assign-btn{background:#4f46e5;color:#fff;border:0;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;font-size: 1.15em;}
.contract-assign .assign-btn:disabled{opacity:.6;cursor:not-allowed}
.contract-assign .slots-chip{background:#0f172a;color:#cbd5e1;border:1px solid #1f2a44;border-radius: 10px;padding: 8px 12px;font-size: 1.02em;font-weight: 800;}
.assigned-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.assigned-chip{display:inline-flex;align-items:center;gap:6px;background:#0f172a;border:1px solid #25324d;color:#cde1ff;border-radius:9999px;padding:4px 10px;font-size: 1.02em;font-weight:800}
.assigned-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--team-color,#60a5fa);box-shadow:0 0 0 2px color-mix(in oklab, var(--team-color,#60a5fa), transparent 82%)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .18s ease-out both}
.assign-summary .player-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.assign-summary .team-logo{width:42px;height:42px;object-fit:contain;border-radius:6px;background:#111827;border:1px solid #1e2a44}
.assign-summary .details .meta{opacity:.9;font-size:13px}
.assign-summary .term-row{margin-top:6px}

/* Sticky footer for mobile quick back */
.team-footer.sticky { position: sticky; bottom: 10px; }
@supports (position: fixed){
    @media (max-width: 640px){
        .team-footer.sticky { position: fixed; bottom: 16px; left: 0; right: 0; z-index: 10; }
        .team-footer.sticky .button { box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 14px 16px; border-radius: 14px; font-weight: 700; background: #1f2a44cc; backdrop-filter: blur(6px); border-color: #2a395c; }
        body.team-view { padding-bottom: 80px; }
    }
}

/* Clickable owner badges */
.owner-badge { cursor: pointer; }

/* Mobile: read-only mode — hide drafting controls */
@media (max-width: 768px){
    header .timer { display: none !important; }
    /* Hide desktop trades button on mobile unless we explicitly override via .force-show-trade */
    #btn-trades { display: none !important; }
    #btn-trades.force-show-trade { display:inline-flex !important; }
    #on-clock .clock-remaining { display: none !important; }
    #btn-draft-player { display: none !important; }
    #btn-hard-reset-draft { display: none !important; }
    #btn-generate-order { display: none !important; }
    #btn-start-draft { display: none !important; }
    #fs-toggle { display: none !important; }
    body.pre-draft .hero { display: none !important; }
}

/* Floating Trade Action (mobile) */
.fab-trade{position:fixed;right:14px;bottom:84px;z-index:1050;display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:18px;font-weight:900;letter-spacing:.3px;font-size:16px;cursor:pointer;border:0;color:#fff;background:linear-gradient(135deg,#60a5fa 0%, #4f46e5 50%, #a78bfa 100%);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.15) inset;backdrop-filter:saturate(160%) blur(6px);transition:transform .18s ease, filter .25s ease, box-shadow .25s ease}
.fab-trade .fab-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(11,18,32,.4);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;font-size:15px}
.fab-trade:hover,.fab-trade:focus-visible{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.2) inset}
.fab-trade:active{transform:translateY(0)}
@media (min-width: 769px){ .fab-trade{display:none} }
/* When header collapsed, float slightly higher to avoid overlapping fullscreen button */
body.header-collapsed .fab-trade{bottom:60px}
/* Respect safe area */
@supports(padding:max(0px)){ .fab-trade{ right: max(14px, env(safe-area-inset-right,14px)); bottom: calc(84px + env(safe-area-inset-bottom,0)); } }

/* Spacing utilities (scale: 0=0px,1=5px,2=10px,3=15px,4=20px) */
/* Existing .mr-0..3 already defined above; adding full set + shorthands */

/* Margin - single sides */
.mr-0 { margin-right: 0px !important; }
.mr-1 { margin-right: 5px !important; }
.mr-2 { margin-right: 10px !important; }
.mr-3 { margin-right: 15px !important; }
.mr-4 { margin-right: 20px !important; }

.ml-0 { margin-left: 0px !important; }
.ml-1 { margin-left: 5px !important; }
.ml-2 { margin-left: 10px !important; }
.ml-3 { margin-left: 15px !important; }
.ml-4 { margin-left: 20px !important; }

.mt-0 { margin-top: 0px !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }

.mb-0 { margin-bottom: 0px !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }

/* Margin - axis helpers */
.mx-0 { margin-left:0;  margin-right:0 !important; }
.mx-1 { margin-left:5px; margin-right:5px !important; }
.mx-2 { margin-left:10px; margin-right:10px !important; }
.mx-3 { margin-left:15px; margin-right:15px !important; }
.mx-4 { margin-left:20px; margin-right:20px !important; }

.my-0 { margin-top:0;  margin-bottom:0 !important; }
.my-1 { margin-top:5px; margin-bottom:5px !important; }
.my-2 { margin-top:10px; margin-bottom:10px !important; }
.my-3 { margin-top:15px; margin-bottom:15px !important; }
.my-4 { margin-top:20px; margin-bottom:20px !important; }

/* Margin - all sides */
.m-0 { margin:0 !important; }
.m-1 { margin:5px !important; }
.m-2 { margin:10px !important; }
.m-3 { margin:15px !important; }
.m-4 { margin:20px !important; }

/* Padding - single sides */
.pr-0 { padding-right:0 !important; }
.pr-1 { padding-right:5px !important; }
.pr-2 { padding-right:10px !important; }
.pr-3 { padding-right:15px !important; }
.pr-4 { padding-right:20px !important; }

.pl-0 { padding-left:0 !important; }
.pl-1 { padding-left:5px !important; }
.pl-2 { padding-left:10px !important; }
.pl-3 { padding-left:15px !important; }
.pl-4 { padding-left:20px !important; }

.pt-0 { padding-top:0 !important; }
.pt-1 { padding-top:5px !important; }
.pt-2 { padding-top:10px !important; }
.pt-3 { padding-top:15px !important; }
.pt-4 { padding-top:20px !important; }

.pb-0 { padding-bottom:0 !important; }
.pb-1 { padding-bottom:5px !important; }
.pb-2 { padding-bottom:10px !important; }
.pb-3 { padding-bottom:15px !important; }
.pb-4 { padding-bottom:20px !important; }

/* Padding - axis helpers */
.px-0 { padding-left:0;  padding-right:0 !important; }
.px-1 { padding-left:5px; padding-right:5px !important; }
.px-2 { padding-left:10px; padding-right:10px !important; }
.px-3 { padding-left:15px; padding-right:15px !important; }
.px-4 { padding-left:20px; padding-right:20px !important; }

.py-0 { padding-top:0;  padding-bottom:0 !important; }
.py-1 { padding-top:5px; padding-bottom:5px !important; }
.py-2 { padding-top:10px; padding-bottom:10px !important; }
.py-3 { padding-top:15px; padding-bottom:15px !important; }
.py-4 { padding-top:20px; padding-bottom:20px !important; }

/* Padding - all sides */
.p-0 { padding:0 !important; }
.p-1 { padding:5px !important; }
.p-2 { padding:10px !important; }
.p-3 { padding:15px !important; }
.p-4 { padding:20px !important; }



/* Mobile pre-board looping banner */
@media (max-width: 768px){
    /* Mobile pre-draft layout: center content, footer at bottom */
    body.pre-draft{display:flex;flex-direction:column;min-height:100svh;min-height:100vh}
    body.pre-draft header{flex:0 0 auto}
    body.pre-draft .mobile-preboard{flex:1 1 auto;display:grid;place-items:center;padding:20px 16px;position:relative}
    body.pre-draft .site-footer{flex:0 0 auto;margin-top:0}

    .mobile-preboard{display:none;position:relative;padding:20px 14px 8px;text-align:center;overflow:hidden}
    /* Darkened ice background for welcome screen */
    .mobile-preboard::before{content:"";position:absolute;inset:0;z-index:0;background:
        linear-gradient(180deg,rgba(5,8,16,.72),rgba(5,8,16,.78)),
        url('/images/ice.png');
        background-size:cover;background-position:center;opacity:.9;pointer-events:none}
    body.pre-draft .mobile-preboard{display:block}
    body.draft-active .mobile-preboard{display:none}
            .mobile-preboard .mpb-inner{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;
                                    /* Centered with auto margins; width accounts for safe areas to keep symmetric gutters on Safari */
                                    width: min(520px, calc(100% - (env(safe-area-inset-left, 0) + env(safe-area-inset-right, 0) + 32px)));
                                    max-width: 520px; box-sizing:border-box; margin: 0 auto;
                    padding:18px 18px;border-radius:16px;
                    background:
                        linear-gradient(180deg,rgba(15,22,38,.88),rgba(11,18,32,.9)) padding-box,
                        linear-gradient(135deg,rgba(96,165,250,.45),rgba(79,70,229,.45),rgba(167,139,250,.45)) border-box;
                    border:1px solid transparent;
                    box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset}

            /* Below-card rules link container (mobile only) */
            .mobile-preboard .mpb-below{display:flex;justify-content:center;margin-top:28px}
            .mobile-preboard .rules-link{
                    display:inline-flex;align-items:center;gap:10px;text-decoration:none;position:relative;isolation:isolate;
                    color:#dbe8ff;
                    background:linear-gradient(180deg,#0f1626,#0c1424);
                    border:1px solid #233154;
                    border-radius:999px;
                    padding:12px 16px;
                    font-weight:900;letter-spacing:.2px;
                    box-shadow:0 8px 22px rgba(0,0,0,.28);
            }
            .mobile-preboard .rules-link::before{content:"";position:absolute;inset:-2px;border-radius:999px;background:linear-gradient(135deg,rgba(96,165,250,.35),rgba(79,70,229,.35),rgba(167,139,250,.35));filter:blur(10px);opacity:.2;z-index:-1}
            .mobile-preboard .rules-link:hover,.mobile-preboard .rules-link:focus-visible{filter:brightness(1.06);transform:translateY(-1px)}
            .mobile-preboard .rules-link:active{transform:translateY(0)}
            .mobile-preboard .rules-link i{font-size:14px}
    .mobile-preboard .mpb-line{font-weight:900;font-size:22px;letter-spacing:.4px;opacity:0;animation:mpbFade 8000ms ease-in-out infinite;color:#e6e9ef;text-shadow:0 1px 0 rgba(0,0,0,.35)}
    .mobile-preboard .mpb-line + .mpb-line{font-weight:800;font-size:16px;letter-spacing:.25px;margin-top:2px;color:#9cc2ff;animation-delay:3000ms;opacity:.9}
    @keyframes mpbFade{
        0%{opacity:0;transform:translateY(6px)}
        10%{opacity:1;transform:translateY(0)}
        40%{opacity:1}
        55%{opacity:0;transform:translateY(-6px)}
        100%{opacity:0;transform:translateY(-6px)}
    }
}
@media (prefers-reduced-motion: reduce){
    .mobile-preboard .mpb-line{animation:none !important;opacity:1 !important}
}

/* Mobile pre-board actions and countdown */
@media (max-width: 768px){
    .mobile-preboard .mpb-countdown{margin-top:4px;font-variant-numeric:tabular-nums;color:#d2e5ff;opacity:.98;font-weight:900;letter-spacing:.2px}
    .mobile-preboard .mpb-actions{margin-top:12px}
    .mobile-preboard .mini-btn{display:inline-block; position:relative; overflow:hidden;
        background:linear-gradient(135deg,#60a5fa 0%, #4f46e5 50%, #a78bfa 100%);
        color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:900;text-decoration:none;
        box-shadow:0 8px 22px rgba(0,0,0,.35)}
    .mobile-preboard .mini-btn:before{content:""; position:absolute; inset:0; background:
        linear-gradient(120deg,transparent 0%, rgba(255,255,255,.25) 8%, rgba(255,255,255,.5) 12%, rgba(255,255,255,.25) 16%, transparent 24%);
        transform:translateX(-120%); filter: blur(0.5px);}
    .mobile-preboard .mini-btn:hover:before,
    .mobile-preboard .mini-btn:focus-visible:before{animation:btnSweep 2200ms ease-in-out infinite}
    @keyframes btnSweep{ 0%{ transform:translateX(-120%) } 60%{ transform:translateX(140%) } 100%{ transform:translateX(140%) } }
    .mobile-preboard .mini-btn:active{transform:translateY(1px)}
}

/* Small, semi-transparent league logo above title */
@media (max-width: 768px){
    .mobile-preboard .mpb-logo{height:252px;width:auto;object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)) grayscale(12%) contrast(108%); margin-bottom: 6px}
}

/* ===================== */
/* Rules Page            */
/* ===================== */
body.rules-page{background-image:linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.68)), url('/images/ice.png');background-size:cover;background-position:center;background-attachment:fixed}
@media (max-width: 640px){body.rules-page{background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65)), url('/images/ice-texture.svg'); background-attachment: scroll;}}
.rules-header{position:sticky;top:0;z-index:10;border-bottom:1px solid #1e2a44;
    background:linear-gradient(180deg, rgba(17,26,43,.96), rgba(17,26,43,.88));
    backdrop-filter:saturate(130%) blur(6px);
    box-shadow:0 8px 26px rgba(0,0,0,.35);
    grid-template-columns: auto;
    padding-bottom: 5px;
}
.rules-header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
    background:radial-gradient(800px 120px at 50% -40px, rgba(96,165,250,.4), transparent 60%)}
.rules-header .rules-inner{max-width:1100px;margin:0 auto;padding:16px 16px;align-items:center;gap:22px; display: grid;}
.rules-title{margin:0;font-size:26px;font-weight:1000;letter-spacing:.3px;color:#eef2ff;text-shadow:0 1px 0 rgba(0,0,0,.34)}
.rules-title{display:inline-flex;align-items:center;gap:10px}
.rules-logo{height:60px;width:auto;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.rules-logo-container{display:inline-flex;align-items:center;justify-content:center;position:relative}
.rules-inner .rules-back{justify-self:start}
.rules-inner .rules-title{grid-column:1 / 4; justify-self:center}
.rules-inner .rules-spacer{justify-self:end}
@media (min-width: 640px){ .rules-title{font-size:28px} }
.rules-container{max-width:1100px;margin:24px auto;padding:0 16px;min-height: 78vh;}
.rules-card{background:linear-gradient(180deg, rgba(15,22,38,.9), rgba(11,18,32,.9));border:1px solid #233154;border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;padding:18px 18px}
.rules-card input, .rules-card select, .rules-card button{font-family:inherit}
.rules-card table th, .rules-card table td{font-size:14.5px}
.rules-toc{display:flex;gap:10px;flex-wrap:nowrap;overflow:auto;margin:0 0 14px 0;padding:8px;scroll-snap-type:x proximity;background:rgba(11,18,32,.7);border:1px solid #1e2a44;border-radius:18px}
.rules-toc a{display:inline-flex;align-items:center;gap:8px;background:#0f1626;border:1px solid #2a395c;color:#dbe8ff;text-decoration:none;border-radius:999px;padding:10px 14px;font-weight:900;font-size:14px;white-space:nowrap;scroll-snap-align:start;position:relative}
.rules-toc a::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:linear-gradient(135deg,rgba(96,165,250,.35),rgba(79,70,229,.35),rgba(167,139,250,.35));filter:blur(10px);opacity:.0;z-index:-1;transition:opacity .2s ease}
.rules-toc a:hover,.rules-toc a:focus-visible{filter:brightness(1.06)}
.rules-toc a:hover::after,.rules-toc a:focus-visible::after{opacity:.65}
/* Extra leading space before the first pill */
.rules-toc > a:first-child{ margin-left: 8px; }
.rules-section{margin:14px 0 22px}
.rules-section h2{margin:0 0 10px 0;font-size:20px;letter-spacing:.02em;color:#e6e9ef}
.rules-section h2::after{content:"";display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,#1e2a44,transparent);opacity:.8;margin-top:6px}
.rules-section p{margin:10px 0 8px 0;color:#cbd5e1}
.rules-section ul{margin:8px 0 0 0;padding-left:18px}
.rules-section li{margin:6px 0;color:#c8d0dc}
.rules-section li strong{color:#e6e9ef}
.rules-meta{margin:8px 0 2px;color:#9fb3c8;font-size:13px}
.rules-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.rules-actions .ghost{background:#1e2a44;color:#e6e9ef;border:1px solid #2a395c;border-radius:10px;padding:10px 14px;cursor:pointer;text-decoration:none}
.rules-actions .ghost:hover{filter:brightness(1.05)}
/* Anchor offset for sticky header */
.rules-section{scroll-margin-top:86px}

/* Rules header back button */
.rules-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
        background:linear-gradient(180deg,#0f1626,#0c1424);color:#dbe8ff;border:1px solid #233154;border-radius:999px;
        padding:10px 14px;font-weight:900;letter-spacing:.2px;box-shadow:0 6px 18px rgba(0,0,0,.28);position:relative;isolation:isolate}
.rules-back::before{content:"";position:absolute;inset:-2px;border-radius:999px;background:linear-gradient(135deg,#34d399,#22c55e,#06b6d4);filter:blur(10px);opacity:.22;z-index:-1}
.rules-back:hover,.rules-back:focus-visible{filter:brightness(1.06);transform:translateY(-1px)}
.rules-back:active{transform:translateY(0)}
.rules-back i{font-size:14px}
@media (max-width: 640px){
    .rules-back{padding:12px 16px;font-size:16px}
    .rules-logo{height:36px}
    .rules-header .rules-inner{grid-template-columns:1fr auto 1fr}    
}
/* Center logo on mobile */
@media (max-width: 640px){
    .rules-inner .rules-title{justify-self:center}
}
/* Force rules header title/logo visible on mobile (override global header h1 hide) */
@media (max-width: 768px){
    .rules-header h1.rules-title{display:inline-flex !important}
    .rules-card a:first-of-type{margin-left: 15px;}
}
/* Desktop: stronger centering regardless of left control width */
@media (min-width: 1024px){
    .rules-header .rules-inner{grid-template-columns:max-content 1fr max-content}
    .rules-inner .rules-title{justify-self:center}
}

/* ===================== */
/* Admin Owners Page     */
/* ===================== */
body.admin-page .rules-header{position:sticky;top:0;z-index:10}
/* Ensure three-column layout across tablet/desktop; mobile overrides remain */
body.admin-page .rules-header .rules-inner{grid-template-columns:max-content 1fr max-content}
body.admin-page .rules-inner .rules-title{grid-column:2;justify-self:center}
body.admin-page .rules-inner .rules-back{justify-self:start}
body.admin-page .rules-inner .rules-back.right{justify-self:end}

/* Owners card/table polish */
body.admin-page .owners-card{padding-top:16px}
body.admin-page .owners-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
body.admin-page .owners-top .new-owner{background:linear-gradient(180deg,#0f1626,#0c1424)}
body.admin-page .table-wrap{overflow:auto}
body.admin-page table.owners-table{width:100%;border-collapse:collapse}
body.admin-page table.owners-table thead th{ text-align:left; padding:12px; border-bottom:1px solid #1e2a44; font-weight:900; color:#dbe8ff }
body.admin-page table.owners-table tbody td{ padding:12px; border-bottom:1px solid #1e2a44 }
body.admin-page table.owners-table tbody td.owner-name{ font-weight:800 }
body.admin-page table.owners-table tbody td.muted{ opacity:.9 }
body.admin-page table.owners-table tbody tr:hover{ background: rgba(16,26,43,.35) }
body.admin-page table.owners-table td.actions{ white-space:nowrap }
body.admin-page .rules-back.ghost{ background:#1e2a44; border-color:#2a395c }
body.admin-page .rules-back.danger{ background:#7f1d1d; border-color:#7f1d1d }

@media (max-width: 768px){
    body.admin-page .rules-header .rules-inner{ grid-template-columns:1fr auto 1fr }
    body.admin-page .rules-inner .rules-title{ grid-column:1 / -1; justify-self:center }
}

/* Admin owner form polish */
body.admin-page .owner-form-card{ max-width: 840px; margin: 0 auto }
body.admin-page form.owner-form{ display:grid; grid-template-columns:1fr; gap:14px }
body.admin-page .owner-form .form-row{ display:grid; gap:12px }
body.admin-page .owner-form .form-row.two{ grid-template-columns:1fr 1fr }
body.admin-page .owner-form .form-row.three{ grid-template-columns:1fr 1fr 1fr }
body.admin-page .owner-form .form-row.align-end{ align-items:end }
body.admin-page .owner-form input,
body.admin-page .owner-form select{ width:100%; box-sizing:border-box; font-size:1.05em; padding:10px; border-radius:10px; border:1px solid #2a395c; background:#0f1626; color:#e6e9ef }
body.admin-page .owner-form .form-actions{ display:flex; gap:10px; justify-content:flex-end }
@media (max-width: 720px){
    body.admin-page .owner-form .form-row.two{ grid-template-columns:1fr }
    body.admin-page .owner-form .form-row.three{ grid-template-columns:1fr }
}

    /* Shared Admin Breadcrumb & Pill Button Styles */
    .admin-breadcrumbs{background:linear-gradient(180deg,rgba(17,26,43,.96),rgba(17,26,43,.88));backdrop-filter:saturate(130%) blur(6px);border-bottom:1px solid #1e2a44;box-shadow:0 8px 26px rgba(0,0,0,.35)}
    .admin-breadcrumbs a.bc-root{font-weight:800}
    .admin-breadcrumbs .here{font-weight:900;color:#dbe8ff}
    .pill-btn{font-family:inherit}
    .pill-btn .txt{letter-spacing:.3px}
    .pill-btn.small .txt{font-size:12px}

    /* Unified Admin Header Bar */
    .owners-header-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 24px 12px}
    .owners-header-bar h1{font-size:20px;margin:0;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
    .owners-header-bar h1 i{font-size:18px;opacity:.9;color:#5fb5ff}
    .owners-header-bar .pill-btn{margin-left:10px}
    @media (max-width:760px){
        .owners-header-bar{flex-direction:column;align-items:flex-start;gap:8px;padding:8px 18px 12px}
        .owners-header-bar h1{font-size:19px}
        .admin-breadcrumbs{padding:12px 16px 0}
    }

    /* Admin actions container */
    .admin-actions{display:flex;gap:10px;flex-wrap:wrap}

    /* ===================================================================== */
    /* Enhanced Admin Area Styles (layout, tokens, components)               */
    /* ===================================================================== */
    /* Tokens */
    :root{
        --adm-bg:#0b131f;
        --adm-bg-alt:#0f1c2b;
        --adm-surface:#132536;
        --adm-surface-alt:#162d40;
        --adm-border:#1f3950;
        --adm-border-soft:#203c56cc;
        --adm-text:#dde9f3;
        --adm-text-soft:#9fb6c9;
        --adm-accent:#4f9efc;
        --adm-accent-grad:linear-gradient(135deg,#60a5fa 0%,#4f46e5 55%,#a78bfa 100%);
        --adm-success:#1d7c40;
        --adm-danger:#b91c1c;
        --adm-warning:#b45309;
        --adm-radius-xs:4px;
        --adm-radius-sm:6px;
        --adm-radius:10px;
        --adm-radius-lg:14px;
        --adm-shadow-sm:0 1px 2px rgba(0,0,0,.4);
        --adm-shadow:0 4px 14px rgba(0,0,0,.35);
        --adm-shadow-lg:0 12px 34px -6px rgba(0,0,0,.55);
        --adm-focus:0 0 0 2px rgba(96,165,250,.55);
        --adm-spacing-1:4px;--adm-spacing-2:8px;--adm-spacing-3:12px;--adm-spacing-4:16px;--adm-spacing-5:20px;--adm-spacing-6:28px;
        --adm-font-xs:12px;--adm-font-sm:13px;--adm-font:14.5px;--adm-font-lg:18px;--adm-line:1.45;
    }

    body.admin-page{background:linear-gradient(rgba(5,10,18,.82),rgba(5,10,18,.82)),url('/images/ice.png');background-size:cover;background-attachment:fixed;}
    @media (max-width:640px){body.admin-page{background:linear-gradient(rgba(5,10,18,.82),rgba(5,10,18,.86)),url('/images/ice-texture.svg');background-attachment:scroll}}

    /* Layout shells */
    .admin-shell{min-height:100dvh;display:flex;flex-direction:column}
    .admin-main{flex:1 1 auto;padding:var(--adm-spacing-5) 0}
    .admin-container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--adm-spacing-4);box-sizing:border-box}

    /* Cards */
    .admin-card{position:relative;background:linear-gradient(180deg,var(--adm-surface) 0%,var(--adm-surface-alt) 100%);border:1px solid var(--adm-border);border-radius:var(--adm-radius-lg);padding:24px 26px;color:var(--adm-text);box-shadow:var(--adm-shadow);backdrop-filter:saturate(130%) blur(4px)}
    .admin-card.dense{padding:16px 18px}
    .admin-card.outline{background:linear-gradient(180deg,var(--adm-bg-alt),var(--adm-bg));}
    .admin-card + .admin-card{margin-top:var(--adm-spacing-5)}

    /* Section header */
    .admin-section-head{display:flex;align-items:flex-end;gap:var(--adm-spacing-4);margin-bottom:var(--adm-spacing-3);flex-wrap:wrap}
    .admin-section-head h2{margin:0;font-size:22px;font-weight:650;letter-spacing:.5px;display:flex;align-items:center;gap:10px;color:#f0f7ff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .admin-section-head h2 .icon{font-size:20px;opacity:.85}
    .admin-section-head .sub{flex:1 1 auto;font-size:var(--adm-font-sm);color:var(--adm-text-soft);margin-left:auto}

    /* Unified table styles */
    .admin-table-wrap{overflow:auto;border:1px solid var(--adm-border);border-radius:var(--adm-radius-lg);background:rgba(19,37,54,.72);backdrop-filter:saturate(130%) blur(3px)}
    table.admin-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
    table.admin-table thead th{position:sticky;top:0;background:linear-gradient(180deg,#162a3b,#132536);color:#dbe8f3;padding:12px 14px;font-weight:700;font-size:13px;letter-spacing:.4px;text-align:left;border-bottom:1px solid var(--adm-border);box-shadow:0 1px 0 0 rgba(255,255,255,.04) inset;white-space:nowrap}
    table.admin-table tbody td{padding:11px 14px;border-bottom:1px dashed var(--adm-border-soft);vertical-align:top}
    table.admin-table tbody tr:last-child td{border-bottom:0}
    table.admin-table tbody tr:hover{background:linear-gradient(90deg,rgba(79,70,229,.06),rgba(96,165,250,.04))}
    table.admin-table tbody tr:focus-within{outline:2px solid #4f46e5;outline-offset:-2px}
    table.admin-table .muted{color:var(--adm-text-soft)}
    table.admin-table td.actions{white-space:nowrap}
    @media (max-width:700px){table.admin-table thead th,table.admin-table tbody td{padding:10px 10px;font-size:12.5px}}

    /* Forms */
    .admin-form{display:grid;gap:var(--adm-spacing-4)}
    .admin-form .form-grid.two{display:grid;gap:var(--adm-spacing-4);grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-form .form-grid.three{display:grid;gap:var(--adm-spacing-4);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
    @media (max-width:760px){.admin-form .form-grid.two,.admin-form .form-grid.three{grid-template-columns:1fr}}
    .admin-form label{font-size:13px;font-weight:600;letter-spacing:.3px;display:flex;flex-direction:column;gap:6px;color:#cfe2f1}
    .admin-form input,.admin-form select{font:inherit;padding:12px 14px;border-radius:var(--adm-radius);border:1px solid var(--adm-border);background:#0f1c2b;color:var(--adm-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
    .admin-form input:focus,.admin-form select:focus{outline:none;box-shadow:var(--adm-focus)}
    .admin-form .actions{display:flex;gap:var(--adm-spacing-3);justify-content:flex-end;flex-wrap:wrap;margin-top:4px}

    /* Buttons */
    .btn{--btn-bg:#1f3549;--btn-bg-hover:#284a63;--btn-color:#dbeeff;--btn-border:var(--adm-border);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-weight:600;letter-spacing:.3px;font-size:13px;border-radius:var(--adm-radius);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);text-decoration:none;cursor:pointer;position:relative;transition:.18s background-color,.18s color,.18s transform, .18s box-shadow}
    .btn:hover,.btn:focus-visible{background:var(--btn-bg-hover);color:#fff}
    .btn:active{transform:translateY(1px)}
    .btn.primary{--btn-bg:#28599c;--btn-bg-hover:#2f6bb9;--btn-color:#f2f8ff;border-color:#2f6bb9}
    .btn.gradient{background:var(--adm-accent-grad);border:0;box-shadow:0 6px 18px rgba(79,70,229,.4),0 0 0 1px rgba(255,255,255,.08) inset;color:#fff}
    .btn.gradient:hover{filter:brightness(1.06)}
    .btn.danger{--btn-bg:#7f1d1d;--btn-bg-hover:#a32222;--btn-color:#ffecec;border-color:#a12727}
    .btn.ghost{--btn-bg:#16293b;--btn-bg-hover:#1d384d;--btn-color:#d3e6f5}
    .btn.small{padding:6px 10px;font-size:12px;font-weight:600}
    .btn.full{display:flex;justify-content:center;width:100%}
    .btn:focus-visible{outline:none;box-shadow:var(--adm-focus)}
    .btn.disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}

    /* Badge */
    .adm-badge{display:inline-flex;align-items:center;font-weight:700;font-size:12px;padding:4px 8px;border-radius:999px;background:#173347;border:1px solid var(--adm-border);color:#b8d0e2;letter-spacing:.3px}

    /* Inline notice */
    .adm-notice{border:1px solid var(--adm-border);background:linear-gradient(180deg,#102131,#0d1b2a);padding:12px 14px;border-radius:var(--adm-radius);font-size:13px;color:var(--adm-text-soft);position:relative}
    .adm-notice.success{border-color:#2d6a4f;color:#d1fae5;background:linear-gradient(180deg,#0d3224,#0d1f18)}
    .adm-notice.danger{border-color:#7f1d1d;color:#fecaca;background:linear-gradient(180deg,#3b1d1d,#311414)}

    /* Spacer utilities (admin scope) */
    .gap-xs{gap:4px}.gap-sm{gap:8px}.gap{gap:14px}.gap-lg{gap:22px}
    .stack > * + *{margin-top:var(--adm-spacing-4)}

    /* Responsive two-column + side panel layout helper */
    .admin-split{display:grid;grid-template-columns:1fr 320px;gap:var(--adm-spacing-5);align-items:start}
    @media (max-width:1100px){.admin-split{grid-template-columns:1fr}}

    /* Refine existing pill-btn (legacy) to visually align with new .btn */
    .pill-btn{font-weight:600;border-radius:var(--adm-radius);padding:10px 16px;font-size:13px;background:#1f3549;border:1px solid var(--adm-border);color:#dbeeff;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;transition:.18s background-color,.18s color,.18s transform}
    .pill-btn:hover,.pill-btn:focus-visible{background:#284a63;color:#fff}
    .pill-btn.small{padding:6px 10px;font-size:12px}
    .pill-btn.danger{background:#7f1d1d;border-color:#a12727;color:#ffecec}
    .pill-btn.danger:hover{background:#a32222;color:#fff}

    /* Owner form preview alignment */
    .owner-form-card .owner-badge{margin-top:20px;display:inline-flex;border:1px solid rgba(255,255,255,.15)}

    /* Login page tweaks */
    body.admin-page.login-page .rules-card{padding:34px 34px 28px}
    body.admin-page.login-page .rules-card form label{font-size:13px;font-weight:600;letter-spacing:.4px;color:#caddea}

    /* Dashboard quick links list improvement */
    .admin-quick-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .admin-quick-links a{display:inline-flex;align-items:center;gap:8px;background:#162a3b;border:1px solid var(--adm-border);color:#dbe8f3;text-decoration:none;border-radius:999px;padding:10px 14px;font-weight:700;font-size:13px;position:relative}
    .admin-quick-links a:hover{background:#1d384d;color:#fff}

    /* Transition polish */
    .admin-card,table.admin-table tbody tr,.btn,.pill-btn,input,select{transition:background-color .18s ease, color .18s ease, border-color .2s ease, box-shadow .25s ease, transform .18s ease}

    /* Reduce duplication for existing owners table by mapping classes */
    body.admin-page table.owners-table{font-size:14px}
    body.admin-page table.owners-table thead th{background:linear-gradient(180deg,#162a3b,#132536);box-shadow:0 1px 0 0 rgba(255,255,255,.04) inset}
    body.admin-page table.owners-table tbody tr:hover{background:linear-gradient(90deg,rgba(79,70,229,.06),rgba(96,165,250,.04))}

    /* Footer subtle style alignment */
    footer.site-footer{background:#0d1b2a;border-top:1px solid #1f3950}
    footer.site-footer a{color:#9fb6c9}
    footer.site-footer a:hover{color:#d6e9f8}

    /* Scrollbar styling (WebKit) */
    body.admin-page ::-webkit-scrollbar{width:10px;height:10px}
    body.admin-page ::-webkit-scrollbar-track{background:#0b131f}
    body.admin-page ::-webkit-scrollbar-thumb{background:#1f3549;border:2px solid #0b131f;border-radius:20px}
    body.admin-page ::-webkit-scrollbar-thumb:hover{background:#284a63}


.adm-input {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.05em;
    padding: 10px;
    border-radius: var(--adm-radius);
    border: 1px solid var(--adm-border);
    background: #0f1c2b;
    color: var(--adm-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}