/* 🏠 FRONT PAGE, LIVE (Drew 2026-09-28: "lets try 1, 2 ... no countdown ... and lets make 4 look cool").
   1 the stream in the hero (Twitch's own player: live or your offline screen, the page never guesses)
   2 "Just caught": the latest real catches from chat as real cards
   4 the three places as big cards with their own little animated scene
   Loaded after review.css; everything here is scoped to the home page's own classes. Motion is 2D only. */

/* ── 1 · hero: logo left, the stream right ────────────────────────────── */
body[data-page=home] .public-hero.home-live{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:18px 0 10px}
/* ⭐ COMPACT ON PURPOSE (Drew 2026-09-28: the strip "takes over so much space over the main menus which you have to scroll down to get to"):
   the header and the season banner already use ~330px, so the hero stays short enough that the three places show on the first screen */
.hl-player{max-width:540px;justify-self:end;width:100%}
#home .home-guide{padding-top:22px}
#home .home-guide-lead{margin-bottom:18px}
.home-live .home-identity{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
/* the older hero rules pinned and sized the logo with !important; this hero sizes it to its own column */
#home .home-live .home-logo{width:min(250px,100%)!important;max-width:100%!important;height:auto!important;position:relative!important;inset:auto!important;left:auto!important;right:auto!important;margin:0!important;object-fit:contain}
.hl-tagline{margin:2px 0 10px;font:600 19px 'Crimson Pro',Georgia,serif;color:#e1cd9a;max-width:22em}
.hl-player{position:relative}
.hl-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b0e18;border:1px solid #9146ff66;
  box-shadow:0 0 0 1px #0008,0 24px 60px #000b,0 0 80px -20px #9146ff88}
.hl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hl-frame::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff14}
.hl-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:#b9bfcc;font:600 15px var(--nr-body,Arial);transition:opacity .5s}
.hl-wait img{width:120px;opacity:.5}
.hl-glow{position:absolute;inset:-18px;border-radius:26px;z-index:-1;background:conic-gradient(from var(--hl-a,0deg),#9146ff00,#9146ff55,#e8c46b44,#9146ff00 60%);filter:blur(18px);animation:hlTurn 8s linear infinite}
@property --hl-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hlTurn{to{--hl-a:360deg}}
.hl-under{display:flex;justify-content:flex-end;align-items:center;margin-top:8px;font-size:14px;color:#9fa7b8}
.hl-under span{display:none}
.hl-under a{color:#c9a8ff;font-weight:700;text-decoration:none}

/* ── 2 · just caught ──────────────────────────────────────────────────── */
.hl-catches{border-top:1px solid #a38a5155;padding:22px 0 18px;margin-top:26px}
.hl-catches[hidden]{display:none}
.hl-catches-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.hl-catches-head h2{margin:0;font:700 22px 'Cinzel',Georgia,serif;color:#f1e3bd}
.hl-catches-head p{margin:0;color:#b9bfcc;font-size:15px}
.hl-live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#8fe07a;margin-right:10px;vertical-align:3px;box-shadow:0 0 0 0 #8fe07a88;animation:hlDot 2s ease-out infinite}
@keyframes hlDot{70%{box-shadow:0 0 0 10px #8fe07a00}100%{box-shadow:0 0 0 0 #8fe07a00}}
.hl-caught{position:relative}
.hl-track-wrap{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;padding:14px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hl-track{display:flex;gap:18px;width:max-content}
.hl-track-wrap::-webkit-scrollbar{display:none}
.hl-track-wrap:active{cursor:grabbing}
.hl-track-wrap .hl-item,.hl-track-wrap img{-webkit-user-drag:none;user-select:none}
.hl-arrow{position:absolute;top:59px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #c9a35c88;background:#12161ee6;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 16px #000a;transition:background .2s,border-color .2s,scale .15s}
.hl-arrow[hidden]{display:none}
.hl-arrow::before{content:"";width:11px;height:11px;border:solid #f1e3bd;border-width:3px 3px 0 0;translate:-2px 0;rotate:45deg}
.hl-arrow.prev{left:-6px}.hl-arrow.prev::before{translate:2px 0;rotate:-135deg}
.hl-arrow.next{right:-6px}
.hl-arrow:hover{background:#1d2430;border-color:#e8c46a}
.hl-arrow:active{scale:.92}
.hl-arrow:focus-visible{outline:2px solid #e8c46a;outline-offset:2px}
.hl-track.still{margin:0 auto}
.hl-item{flex:none;width:96px;text-decoration:none;color:inherit;text-align:center;transition:translate .25s}
.hl-item:hover{translate:0 -8px}
.hl-card{position:relative;width:96px;height:134px;filter:drop-shadow(0 10px 14px #000a)}
.hl-card>.cc{position:absolute;top:0;left:0;transform-origin:top left;transform:scale(calc(96 / 452))}
.hl-item.prism .hl-card::before{content:"";position:absolute;inset:-5px;border-radius:12px;background:conic-gradient(from var(--hl-a,0deg),#ff6b9a,#ffd36b,#7dffb0,#6bd0ff,#b98bff,#ff6b9a);filter:blur(9px);animation:hlTurn 4s linear infinite}
.hl-who{margin-top:7px;font:700 13px var(--nr-body,Arial);color:#f1e3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-when{font-size:13px;color:#9fa7b8}
.hl-item.new .hl-when{color:#8fe07a;font-weight:700}

/* ── 4 · the three places ─────────────────────────────────────────────── */
.home-guide .home-guide-grid{gap:22px}
.home-guide .home-guide-grid::before{display:none}
.home-guide .hg{position:relative;background:linear-gradient(180deg,#131c26,#0e141c);border:1px solid #2a3442;border-radius:20px;overflow:hidden;padding:0 26px 26px;
  transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
/* the older column-divider rules gave each part its own side padding and a top gap; a card has one padding */
#home .home-guide .home-guide-grid>.hg{padding:0 26px 26px;border:1px solid #2a3442;margin:0}
#home .home-guide .home-guide-grid>.hg:hover{border-color:var(--hg-c)}
.home-guide .hg.realm{--hg-c:#8fe0b0}.home-guide .hg.fight{--hg-c:#ff8a6b}.home-guide .hg.token{--hg-c:#e8c46b}
.home-guide .hg:hover{translate:0 -8px;border-color:var(--hg-c);box-shadow:0 26px 50px #000a,0 0 60px -20px var(--hg-c)}
.hg-scene{position:relative;display:grid;place-items:center;align-self:stretch;height:220px;margin:0 -26px 22px;overflow:hidden;isolation:isolate}
.hg-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#131c26);pointer-events:none}
.home-guide .hg .hg-scene .hg-art{margin:0;width:auto;height:auto;border-radius:0;background:none;box-shadow:none}
.home-guide .hg .hg-scene .hg-art:hover{transform:none;box-shadow:none}
.hg-stars{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 12% 20%,#fff9,transparent),radial-gradient(1px 1px at 70% 14%,#fffa,transparent),radial-gradient(1.5px 1.5px at 84% 62%,#fff8,transparent),radial-gradient(1px 1px at 30% 76%,#fff7,transparent),radial-gradient(1px 1px at 52% 40%,#fff6,transparent),radial-gradient(1.5px 1.5px at 20% 52%,#fff8,transparent);animation:hgTwinkle 4s ease-in-out infinite alternate}
@keyframes hgTwinkle{to{opacity:.45}}

/* NovaRealm: the little galaxy (planet, ring, orbiting moons) scaled up as one piece; its moon path is in its own px */
.hg-scene.realm-scene{background:radial-gradient(circle at 50% 55%,#1f4a3f 0%,#0f2621 45%,#0a1418 80%)}
.hg-scene.realm-scene .hg-art.hg-galaxy{scale:1.85;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.hg.realm:hover .hg-scene.realm-scene .hg-art.hg-galaxy{scale:2}

/* Fish Fight: a fish squares up to the four jobs; every few seconds they rush it and it flashes */
.hg-scene.fight-scene{background:radial-gradient(circle at 36% 55%,#4a1f15 0%,#24110d 45%,#120b0c 80%)}
.hg-fight{position:relative;width:300px;height:200px}
.hg-fight .hg-fish{position:absolute;left:18px;top:34px;width:130px;height:130px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 10px 16px #000a);animation:hgFishBob 3s ease-in-out infinite,hgFishHit 4s ease-in-out infinite}
@keyframes hgFishBob{50%{translate:0 -8px}}
@keyframes hgFishHit{0%,58%,72%,100%{filter:drop-shadow(0 10px 16px #000a) brightness(1)}62%{filter:drop-shadow(0 0 22px #ffb08a) brightness(2.2)}}
.hg-fight .hg-job{position:absolute;width:58px;height:58px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 6px 10px #000a);animation:hgRush 4s cubic-bezier(.5,0,.3,1) infinite;animation-delay:var(--d)}
.hg-job.j1{left:196px;top:10px;--d:0s;--rx:-60px;--ry:30px}
.hg-job.j2{left:236px;top:70px;--d:.08s;--rx:-86px;--ry:0px}
.hg-job.j3{left:196px;top:130px;--d:.16s;--rx:-60px;--ry:-30px}
.hg-job.j4{left:150px;top:150px;--d:.24s;--rx:-30px;--ry:-44px}
@keyframes hgRush{0%,48%,100%{translate:0 0}60%{translate:var(--rx) var(--ry)}}
.hg-spark{position:absolute;left:112px;top:84px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffd08a 30%,#ff7a4a00 70%);opacity:0;animation:hgSpark 4s ease-out infinite}
@keyframes hgSpark{0%,58%{opacity:0;scale:.3}62%{opacity:1;scale:1.6}78%,100%{opacity:0;scale:2.4}}
.hg.fight:hover .hg-fight{scale:1.05;transition:scale .4s}

/* NovaTokens: the spinning coin, bigger, with a shower of small coins */
.hg-scene.token-scene{background:radial-gradient(circle at 50% 50%,#4a3a17 0%,#241c0e 45%,#110e0a 80%)}
.hg-scene.token-scene .hg-art .hg-coin{scale:1.9}
.hg-rain{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hg-rain i{position:absolute;top:-30px;width:22px;height:22px;background:url(/novatoken.png) center/contain no-repeat;opacity:.85;animation:hgRain var(--t) linear infinite;animation-delay:var(--d)}
@keyframes hgRain{to{translate:0 280px;rotate:360deg}}

/* 📡 around the channel: a fixed-height stage (nothing below it moves when the view changes) */
.hl-w-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.hl-w-head h2{margin:0;font:700 22px 'Cinzel',Georgia,serif;color:#f1e3bd}
.hl-w-tabs{display:flex;gap:6px;flex-wrap:wrap}
.hl-w-tabs button{position:relative;display:flex;align-items:center;gap:7px;background:#0d1a1fcc;border:1px solid #2a3442;color:#b9bfcc;border-radius:99px;padding:7px 14px 8px;font:700 14px var(--nr-body,Arial);cursor:pointer;overflow:hidden}
.hl-w-tabs button img{width:20px;height:20px;image-rendering:auto;margin:-3px 0}
.hl-w-tabs button[aria-selected=true]{color:#f1e3bd;border-color:#d9bf83}
.hl-tab-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:#d9bf83}
.hl-w-tabs button.run .hl-tab-bar{animation:hlTabBar 8s linear forwards}
.hl-widget.paused .hl-w-tabs button.run .hl-tab-bar{animation-play-state:paused}   /* must out-rank the .run rule above */
@keyframes hlTabBar{to{width:100%}}
.hl-w-stage{position:relative;height:230px}
.hl-view{position:absolute;inset:0;opacity:0;visibility:hidden;translate:0 10px;transition:opacity .45s,translate .45s,visibility 0s .45s}
.hl-view.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s,translate .45s,visibility 0s}
.hl-leaders{display:flex;justify-content:center;gap:12px;align-items:flex-end;height:100%;padding:8px 0}
.hl-leaders>.hl-leader{flex:0 1 200px;min-width:0}
.hl-leader{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border-radius:14px;background:#131c26;border:1px solid #2a3442;text-decoration:none;color:inherit;transition:translate .25s,border-color .25s}
a.hl-leader:hover{translate:0 -5px;border-color:#d9bf83}
.hl-leader.first{border-color:#e8c46b88;box-shadow:0 0 30px -12px #e8c46b;padding-top:22px}
.hl-rank{height:30px;display:grid;place-items:center;font:800 16px var(--nr-body,Arial);color:#9fa7b8}
.hl-rank img{width:30px;height:30px;image-rendering:auto}
.hl-av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#0d1a1f;border:2px solid #2a3442;display:grid;place-items:center}
.hl-leader.first .hl-av{width:76px;height:76px;border-color:#e8c46b}
.hl-av img{width:100%;height:100%;object-fit:cover}
.hl-name{font-size:15px;color:#f1e3bd;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-val{font-size:13px;color:#9fa7b8}
.hl-val strong{font-size:18px;color:#fff3cf}
@media (max-width:900px){
  body[data-page=home] .public-hero.home-live{grid-template-columns:1fr;gap:22px;padding-top:18px}
  .home-live .home-logo{max-width:260px}
  .hl-catches-head h2{font-size:20px}
  .hl-w-stage{height:240px}
  .hl-leaders{gap:8px}
  .hl-leader:nth-child(n+4){display:none}
  .hl-w-tabs button{font-size:13px;padding:6px 11px 7px}
  .hg-scene{height:190px}
  .hl-player{justify-self:stretch;max-width:none}
  .hg-fight{scale:.9}
}
@media (prefers-reduced-motion:reduce){
  .hg-fish,.hg-job,.hg-spark,.hg-rain i,.hl-glow,.hg-stars,.hl-item.prism .hl-card::before{animation:none!important}
}