:root{
  --resin:#0B120C; --pitch:#13301D; --pitch-2:#0F2517;
  --icky:#8AE65C; --kief:#E8C25A; --paper:#EDE7D6; --ember:#E0653A;
  --c-gladue:#8AE65C; --c-morgan:#5CC8E6; --c-jorel:#E8C25A; --c-dylan:#E0653A;
  --c-bret:#C77DFF; --c-ray:#FF7DAD; --c-chris:#6BE6B8; --c-april:#F2E25C;
  --c-michael:#7D9DFF; --c-tommy:#E6A05C;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--resin);color:var(--paper);font-family:'Outfit',sans-serif;line-height:1.5;overflow-x:hidden;padding-top:34px}
img{display:block}

/* TICKER — fixed (sticky breaks on mobile with overflow-x:hidden) */
.ticker{position:fixed;top:0;left:0;right:0;height:34px;z-index:50;background:#070D08;border-bottom:1px solid rgba(138,230,92,.25);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-block;padding:9px 0;animation:scroll 38s linear infinite;font-family:'Space Mono',monospace;font-size:.78rem;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:7px;margin:0 22px;opacity:.92}
.tk b{color:var(--icky)} .tk .gold{color:var(--kief)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* EMBER */
.ember{position:relative;width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%, #FFD9A0 0%, var(--ember) 45%, #7A2D12 100%);
  box-shadow:0 0 8px 2px rgba(224,101,58,.8);animation:burn 1.6s ease-in-out infinite}
.ember::after{content:"";position:absolute;left:50%;bottom:120%;width:2px;height:14px;border-radius:2px;
  background:linear-gradient(to top, rgba(237,231,214,.45), transparent);filter:blur(1.5px);animation:wisp 2.6s ease-in-out infinite}
@keyframes burn{0%,100%{box-shadow:0 0 6px 1px rgba(224,101,58,.6)}50%{box-shadow:0 0 12px 4px rgba(224,101,58,.95)}}
@keyframes wisp{0%{transform:translateX(-50%);opacity:.7}50%{transform:translateX(-30%) translateY(-5px) rotate(8deg)}100%{transform:translateX(-60%) translateY(-10px) rotate(-6deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.ember,.ember::after{animation:none}}

/* HERO */
.hero{position:relative;text-align:center;padding:30px 20px 40px;
  background:repeating-linear-gradient(90deg, var(--pitch-2) 0 90px, #112A1A 90px 180px);
  border-bottom:2px solid rgba(138,230,92,.3)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%, rgba(138,230,92,.14), transparent 60%)}
.hero h1{position:relative;font-family:'Bungee',cursive;font-size:clamp(2.2rem,8vw,4.2rem);line-height:1;
  color:var(--paper);text-shadow:0 0 24px rgba(138,230,92,.45), 3px 3px 0 #0B120C}
.hero h1 span{color:var(--icky)}
.hero .sub{position:relative;margin-top:8px;font-size:clamp(.85rem,2.4vw,1.05rem);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(237,231,214,.85);font-weight:500}
.hero .sub small{display:block;margin-top:2px;font-size:.78em;color:var(--icky);letter-spacing:.22em}
.countdown{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:rgba(11,18,12,.75);border:1px solid var(--icky);border-radius:999px;
  padding:7px 18px;font-family:'Space Mono',monospace;font-size:.75rem;color:var(--icky)}
.leaf{width:15px;height:15px;flex:none}

/* LAYOUT + COLLAPSIBLE */
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
section, details.sec{margin:38px 0}
details.sec summary{list-style:none;cursor:pointer}
details.sec summary::-webkit-details-marker{display:none}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{font-family:'Bungee',cursive;font-size:clamp(1.15rem,4vw,1.6rem)}
.sec-head .tag{font-family:'Space Mono',monospace;font-size:.7rem;color:rgba(237,231,214,.55)}
.sec-head a.tag{color:var(--icky);text-decoration:none;border:1px solid rgba(138,230,92,.4);border-radius:4px;padding:2px 8px;margin-left:auto}
.sec-head a.tag:hover{background:rgba(138,230,92,.1)}
.chev{margin-left:auto;color:rgba(138,230,92,.7);font-size:.85rem;transition:transform .2s;flex:none}
.sec-head a.tag ~ .chev{margin-left:0}
details.sec[open] .chev{transform:rotate(180deg)}
.panel{background:var(--pitch);border:1px solid rgba(138,230,92,.18);border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.35)}

/* LIVE NOW carousel */
.live-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(138,230,92,.4) transparent}
.live-strip::-webkit-scrollbar{height:5px}
.live-strip::-webkit-scrollbar-thumb{background:rgba(138,230,92,.35);border-radius:99px}
.live-card{flex:0 0 min(86%, 420px);scroll-snap-align:start;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:var(--pitch);border:1px solid rgba(138,230,92,.18);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.live-card.is-live{background:linear-gradient(180deg, rgba(224,101,58,.08), transparent 55%), var(--pitch);border-color:rgba(224,101,58,.35)}
.matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.team{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.team img{width:48px;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.team .tn{font-weight:600;font-size:.95rem}
.mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.score{font-family:'Bungee',cursive;font-size:clamp(1.6rem,6vw,2.4rem);text-shadow:0 0 18px rgba(138,230,92,.4);white-space:nowrap}
.status{display:flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ember);text-align:center}
.status.next{color:var(--icky)}
.empty{padding:18px;font-family:'Space Mono',monospace;font-size:.78rem;color:rgba(237,231,214,.5)}

/* PLAYER PILL */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;text-align:center;
  font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;min-width:84px;
  color:#0B120C;border-radius:999px;padding:3px 11px;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* DRAFT BOARD */
.preflight{display:flex;align-items:center;gap:10px;padding:13px 16px;font-family:'Space Mono',monospace;font-size:.74rem;
  color:var(--kief);background:rgba(232,194,90,.07);border-bottom:1px solid rgba(232,194,90,.25)}
.preflight .leaf{width:14px;height:14px;flex:none}
.board{width:100%;border-collapse:collapse;font-size:.9rem}
.board th{font-family:'Space Mono',monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(237,231,214,.55);text-align:left;padding:12px;border-bottom:1px solid rgba(138,230,92,.2)}
.board td{padding:12px;border-bottom:1px solid rgba(237,231,214,.06)}
.board tr:last-child td{border-bottom:none}
.board tr:hover td{background:rgba(138,230,92,.05)}
.rank{font-family:'Bungee',cursive;font-size:.95rem;color:rgba(237,231,214,.7);width:48px}
.r1 .rank{color:var(--kief);text-shadow:0 0 12px rgba(232,194,90,.6)}
.r1 td{background:rgba(232,194,90,.05)}
.pname{display:flex;align-items:center;gap:8px;font-weight:600}
.country{display:flex;align-items:center;gap:8px;white-space:nowrap}
.country img{width:24px;border-radius:3px}
.tbd{color:rgba(237,231,214,.45);font-style:italic}
.pts{font-family:'Space Mono',monospace;font-weight:700;color:var(--icky)}
.goals{font-family:'Space Mono',monospace;color:rgba(237,231,214,.75)}
.round{font-size:.78rem;color:rgba(237,231,214,.65)}
.out td{opacity:.45}
.board-scroll{overflow-x:auto}

/* SCHEDULE */
.tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tab{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.05em;cursor:pointer;
  background:transparent;color:rgba(237,231,214,.6);border:1px solid rgba(237,231,214,.2);border-radius:999px;padding:6px 16px}
.tab.active{background:var(--icky);color:#0B120C;border-color:var(--icky);font-weight:700}
.done-toggle{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-family:'Space Mono',monospace;
  font-size:.72rem;color:rgba(237,231,214,.6);cursor:pointer;user-select:none;width:fit-content}
.switch{position:relative;width:34px;height:18px;background:rgba(237,231,214,.2);border-radius:99px;transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--paper);transition:transform .2s}
.done-toggle.on .switch{background:var(--icky)}
.done-toggle.on .switch::after{transform:translateX(16px);background:#0B120C}
.done-toggle.on{color:var(--icky)}
.sched{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.match{background:var(--pitch);border:1px solid rgba(138,230,92,.15);border-radius:12px;padding:13px 15px}
.match .when{font-family:'Space Mono',monospace;font-size:.66rem;color:var(--paper);margin-bottom:9px;
  text-transform:uppercase;letter-spacing:.06em;text-align:center}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mside{display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:500;font-size:.9rem;flex:1}
.mside .nm{display:flex;align-items:center;gap:7px}
.mside img{width:26px;border-radius:3px}
.vs{font-family:'Bungee',cursive;font-size:.68rem;color:rgba(138,230,92,.7);flex:none}
.fscore{font-family:'Bungee',cursive;font-size:1rem;flex:none}
.ft-tag{display:block;text-align:center;font-family:'Space Mono',monospace;font-size:.6rem;color:var(--kief);margin-top:8px;letter-spacing:.15em}
.view-more{display:block;margin:16px auto 0;background:transparent;border:1px solid rgba(138,230,92,.4);
  color:var(--icky);font-family:'Space Mono',monospace;font-size:.72rem;border-radius:999px;padding:8px 24px;cursor:pointer}
.view-more:hover{background:rgba(138,230,92,.08)}

/* BLUNT TALK */
.chat{display:flex;flex-direction:column;gap:12px;padding:18px;max-height:420px;overflow-y:auto}
.msg{display:flex;gap:10px;max-width:85%}
.msg .avatar{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:'Bungee',cursive;font-size:.72rem;color:#0B120C}
.bubble{background:rgba(11,18,12,.6);border:1px solid rgba(237,231,214,.1);border-radius:4px 14px 14px 14px;padding:9px 13px 7px;font-size:.9rem;overflow-wrap:anywhere}
.bubble .who{font-family:'Space Mono',monospace;font-size:.66rem;margin-bottom:3px;font-weight:700}
.bubble .who .you{color:rgba(237,231,214,.5);font-weight:400}
.bubble .stamp{font-family:'Space Mono',monospace;font-size:.58rem;color:rgba(237,231,214,.35);margin-top:5px}
.chat-input{display:flex;gap:8px;padding:13px 18px;border-top:1px solid rgba(138,230,92,.15);flex-wrap:wrap}
.chat-input select{background:rgba(11,18,12,.7);border:1px solid rgba(138,230,92,.35);border-radius:999px;
  padding:9px 14px;color:var(--icky);font-family:'Space Mono',monospace;font-size:.78rem}
.chat-input input{flex:1;min-width:160px;background:rgba(11,18,12,.7);border:1px solid rgba(237,231,214,.15);border-radius:999px;
  padding:9px 16px;color:var(--paper);font-family:'Outfit',sans-serif;font-size:.9rem}
.chat-input button{background:var(--icky);color:#0B120C;border:none;border-radius:999px;padding:9px 20px;
  font-family:'Bungee',cursive;font-size:.76rem;cursor:pointer}
.chat-note{padding:0 18px 14px;font-family:'Space Mono',monospace;font-size:.64rem;color:rgba(237,231,214,.4)}

/* RULES */
.rules{padding:20px}
.rules p{color:rgba(237,231,214,.85);margin-bottom:13px;font-size:.95rem}
.scoring{width:100%;border-collapse:collapse;font-size:.92rem;max-width:480px}
.scoring td{padding:8px 12px;border-bottom:1px dashed rgba(237,231,214,.15)}
.scoring tr:last-child td{border-bottom:none}
.scoring td:last-child{text-align:right;font-family:'Space Mono',monospace;font-weight:700;color:var(--icky)}
.scoring .big td:last-child{color:var(--kief)}
.tiebreak{margin-top:13px;font-family:'Space Mono',monospace;font-size:.78rem;color:rgba(237,231,214,.6)}

/* FOOTER + ADMIN */
footer{margin-top:64px;padding:28px 20px 24px;text-align:center;border-top:1px solid rgba(138,230,92,.12);
  font-family:'Space Mono',monospace;font-size:.7rem;color:rgba(237,231,214,.4)}
.admin-dots{display:inline-block;margin-top:16px;letter-spacing:5px;color:rgba(237,231,214,.14);
  cursor:default;user-select:none;font-size:.8rem;background:none;border:none;font-family:inherit;padding:4px 10px}
.admin-dots:hover{color:rgba(237,231,214,.3)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-bg.open{display:flex}
.modal{background:var(--pitch);border:1px solid rgba(138,230,92,.3);border-radius:14px;max-width:520px;width:100%;
  max-height:85vh;overflow-y:auto;padding:22px}
.modal h3{font-family:'Bungee',cursive;font-size:1.05rem;margin-bottom:14px}
.modal label{display:block;font-family:'Space Mono',monospace;font-size:.68rem;color:rgba(237,231,214,.6);margin:12px 0 5px;text-transform:uppercase;letter-spacing:.08em}
.modal input[type=password], .modal textarea{width:100%;background:rgba(11,18,12,.7);border:1px solid rgba(237,231,214,.2);
  border-radius:10px;padding:10px 13px;color:var(--paper);font-family:'Space Mono',monospace;font-size:.82rem}
.modal textarea{min-height:220px;resize:vertical}
.modal .btn{background:var(--icky);color:#0B120C;border:none;border-radius:999px;padding:9px 20px;
  font-family:'Bungee',cursive;font-size:.74rem;cursor:pointer;margin:14px 10px 0 0}
.modal .btn.warn{background:var(--ember);color:var(--paper)}
.modal .btn.ghost{background:transparent;border:1px solid rgba(237,231,214,.3);color:var(--paper)}
.modal .hint{font-family:'Space Mono',monospace;font-size:.66rem;color:rgba(237,231,214,.45);margin-top:8px}
.modal .ok{color:var(--icky)} .modal .err{color:var(--ember)}

/* DESKTOP LEAF SIDEBARS — fade to black toward the content column */
@media (min-width: 1200px){
  body::before, body::after{
    content:"";position:fixed;top:0;bottom:0;z-index:0;pointer-events:none;
    width:max(140px, calc((100vw - 1040px) / 2));
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='96' height='96'%3E%3Cpath fill='%231E4A2C' fill-opacity='.6' d='M14 4c.6 2.5.4 5-.4 7.2 1.5-1.8 3.6-3 6.1-3.4-1 2.3-2.7 4.1-4.8 5.2 2.2-.4 4.4 0 6.3 1.2-2.1 1.2-4.5 1.5-6.8 1 1.7 1 3 2.6 3.6 4.6-2.1-.5-3.9-1.7-5-3.4v6.6h-2v-6.6c-1.1 1.7-2.9 2.9-5 3.4.6-2 1.9-3.6 3.6-4.6-2.3.5-4.7.2-6.8-1 1.9-1.2 4.1-1.6 6.3-1.2C7 12 5.3 10.2 4.3 7.8c2.5.4 4.6 1.6 6.1 3.4C9.6 9 9.4 6.5 10 4c1 1.8 1.6 3.8 1.6 5.9h.8c0-2.1.6-4.1 1.6-5.9z'/%3E%3C/svg%3E");
    background-size:96px 96px;background-repeat:repeat;
  }
  body::before{left:0;
    -webkit-mask-image:linear-gradient(to right, black 0%, transparent 100%);
    mask-image:linear-gradient(to right, black 0%, transparent 100%)}
  body::after{right:0;
    -webkit-mask-image:linear-gradient(to left, black 0%, transparent 100%);
    mask-image:linear-gradient(to left, black 0%, transparent 100%)}
}