/* ==========================================================================
   Golden Whiskers Rules & Roster — trading-card roster grid
   ==========================================================================
   Stylesheet for the "Official Team Roster" section of golden-whiskers-rules.html.
   Kept as its own file (not merged into css/main.css) and every selector is
   scoped under the "gwd-" prefix so it can never collide with any class the
   rest of the site already uses, even though it shares the same custom-
   property tokens (colors/fonts/radii) for visual consistency.

   (This started life as the isolated stylesheet for a draft/preview page —
   golden-whiskers-rules-draft.html and css/gw-roster-draft.css still exist
   side by side with this file as that original draft/test copy; this file
   is the promoted, live version. class names are unchanged from the draft
   on purpose, so this file is a straight copy plus documentation updates.)

   Card structure:
     .gwd-card              the whole trading card (grid item)
       .gwd-card-art           the big image "art window" (prominent, not a thumb)
       .gwd-card-name           title-bar with the team name
       .gwd-card-body           roster list + (if present) weigh-in stat table
       .gwd-card-total          team-total callout, only on the 3 teams with data

   Layout:
     .gwd-grid uses grid-template-columns:repeat(auto-fill,minmax(...)) so the
     column count adapts on its own at every width (desktop multi-column,
     tablet fewer, mobile a single column) without hand-written breakpoints.

   Hover enlarge (desktop/mouse only, see js/gw-roster-cards.js for the
   actual one-card-at-a-time state machine):
     - Gated behind @media (hover:hover) and (pointer:fine) so touch devices
       never load this behavior at all — cards just sit at their normal size.
     - Pure `transform:scale()` only (no width/height change), so the grid
       track sizing never reflows — confirmed via CDP during testing.
     - `overflow:visible` is set on every ancestor in the chain up through
       the roster <section> so a scaled-up card isn't clipped by a parent.
       (Note: css/main.css sets `overflow-x:hidden` on <body> site-wide —
       shared and off-limits to edit here, which is exactly why the JS
       dynamically adjusts each card's transform-origin toward whichever
       side has room, so a card never actually needs to paint past the
       viewport edge in the first place.)
     - z-index is controlled by JS (not CSS), so it can be held elevated
       through the entire shrink-back animation and only released once the
       shrink's transitionend actually fires. */

.gwd-roster-note{
  font-size:.85rem;
  color:var(--steel-dim);
  margin-bottom:1.5rem;
  max-width:70ch;
}

.gwd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:1.75rem;
  overflow:visible; /* so an enlarged card can paint over its row-mates */
}

.gwd-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:2px solid rgba(255,102,0,.35);
  border-radius:20px;
  overflow:hidden; /* clips this card's OWN contents to its rounded corners — safe at any scale, since transform scales the clip box along with the element; it's ancestor overflow that would clip the enlarged card, and those are all overflow:visible */
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  transform-origin:50% 50%; /* JS overrides per-card right before it grows, based on available screen room */
}

/* -- Art window: the team image is the dominant visual on the card, not a
   corner badge — fixed aspect-ratio + object-fit so all 24 cards read as a
   consistent, uniform set.
   Box ratio is 3/2 to match the final artwork package exactly (every
   TeamCards/*.jpg is 1536x1024 = 3:2, confirmed across all 24 — the
   package itself already pads any source art to that canvas with a
   blurred fill, per the README in that folder), so the photo fills the
   window edge-to-edge with no empty letterbox bars. object-fit stays
   `contain` rather than `cover` as a safety net (a future image that
   isn't exactly 3:2 will letterbox instead of crop), but with a matching
   box ratio it behaves identically to `cover` for every current image. */
.gwd-card-art{
  position:relative;
  aspect-ratio:3/2;
  flex-shrink:0;
  background:radial-gradient(circle at 50% 35%, rgba(255,102,0,.16), rgba(0,0,0,0) 70%), var(--void);
}
.gwd-card-art img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.gwd-card-art::before, .gwd-card-art::after{
  content:''; position:absolute; width:20px; height:20px;
  border:2px solid rgba(255,180,110,.65); z-index:1; pointer-events:none;
}
.gwd-card-art::before{ top:10px; left:10px; border-right:none; border-bottom:none; }
.gwd-card-art::after{ bottom:10px; right:10px; border-left:none; border-top:none; }

/* Placeholder art (teams with no dedicated TeamCards image yet) gets a
   plain crest treatment instead of a stretched full-bleed photo, so it
   doesn't look like a broken/missing image. */
.gwd-card-art.gwd-card-art-placeholder{
  display:flex; align-items:center; justify-content:center;
}
.gwd-card-art-placeholder img{
  width:56%; height:56%;
  object-fit:contain;
  border-radius:50%;
  background:var(--void);
  border:2px solid rgba(255,102,0,.4);
  padding:8px;
}

.gwd-card-name{
  padding:.8rem 1rem .7rem;
  /* Solid var(--charcoal) UNDER the orange tint gradient — without an
     opaque layer here, this was just a ~4-20% translucent tint over
     whatever's behind it, so when a card pops out over its row-mates on
     hover, their art was visibly showing through the name plate and
     roster area. Same fix applied to .gwd-card-body and .gw-team-total
     below. */
  background:linear-gradient(135deg, rgba(255,102,0,.2), rgba(255,102,0,.04)), var(--charcoal);
  border-top:1px solid rgba(255,102,0,.35);
  border-bottom:1px solid var(--line);
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:1.05rem;
  line-height:1.15;
  color:var(--bone);
  text-align:center;
}
.gwd-card-tag{
  display:block;
  margin:0 auto .5rem;
  width:fit-content;
}

.gwd-card-body{
  padding:1rem 1.1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  flex:1;
  background:var(--charcoal); /* opaque — see note on .gwd-card-name above */
}

.gwd-card-roster{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-family:var(--f-mono);
  font-size:.82rem;
  color:var(--steel);
  list-style:none;
  padding:0;
  margin:0;
}
.gwd-card-roster li{ display:flex; align-items:baseline; gap:.55rem; }
.gwd-card-roster li::before{ content:'\25CF'; color:var(--orange); font-size:.5rem; line-height:1; position:relative; top:-.1em; }

/* Reuses the site's existing .weight-table / .weight-table-wrap / .gw-team-total
   classes from main.css for the 3 teams that already have weigh-in data, so
   those stay visually on-brand with minimal extra CSS here — this override
   only adds margin-top:auto (pins it to the card's bottom edge) and repeats
   its background as an opaque layer, since main.css's own version is just a
   translucent tint (same reasoning as .gwd-card-name/.gwd-card-body above). */
.gwd-card .gw-team-total{
  margin-top:auto;
  background:linear-gradient(135deg, rgba(255,102,0,.14), rgba(255,102,0,.02)), var(--charcoal);
}

.gwd-card-empty-note{
  font-size:.72rem;
  font-family:var(--f-mono);
  color:var(--steel-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* -- Hover enlarge — real hover devices only. -- */
@media (hover:hover) and (pointer:fine){
  .gwd-card{
    transition:
      transform 1.5s cubic-bezier(.22,.61,.36,1),
      box-shadow 1.5s cubic-bezier(.22,.61,.36,1),
      border-color 1.5s cubic-bezier(.22,.61,.36,1);
  }
  .gwd-card.is-active{
    transform:scale(1.75);
    box-shadow:0 45px 100px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,102,0,.45);
    border-color:rgba(255,150,60,.85);
  }
}

@media (prefers-reduced-motion: reduce){
  .gwd-card{ transition-duration:.01s !important; }
}

@media (max-width:520px){
  .gwd-grid{ grid-template-columns:1fr; }
}

/* -- Leading team / leading angler callout — see the matching IIFE at the
   bottom of gw-roster-cards.js (runs unconditionally, unlike the
   hover-enlarge code above, so this shows on touch devices too). The
   #gwd-leader-strip card itself reuses the site's existing .stat-strip
   class as-is; only the badge/row-highlight it adds to the winning card
   and row are new. */
.gwd-leader-badge{
  display:inline-block;
  margin-left:.5rem;
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--void);
  background:var(--orange);
  padding:.2rem .55rem;
  border-radius:999px;
  vertical-align:middle;
  white-space:nowrap;
}
.gwd-leader-row{
  background:rgba(255,102,0,.12);
}
.gwd-leader-row td:first-child{
  color:var(--orange);
  font-weight:700;
}

/* -- Top-3 standings card (#gwd-leader-strip) — two-column leaderboard,
   filled in by the matching IIFE in gw-roster-cards.js. Deliberately not
   using .stat-strip here (that's built for 2-4 big single numbers, not a
   ranked list) — rank badges + dashed row dividers read more like a real
   standings table. The league crest watermark is the shared placeholder
   logo (img/gw-team/gwlogo.png), faded in the corner behind the columns —
   `.gwd-standings-col` gets an explicit z-index so real content always
   paints above it. */
.gwd-standings{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:1.6rem 1.8rem;
  margin-bottom:1.8rem;
  /* Same orange-tinted frame + lift as .gwd-card below, instead of the
     plain gray .card border — on its own (esp. stacked to one column on
     mobile) this card had nothing tying it to the trading-card roster's
     look, so it read as a generic stat block rather than part of the same
     "trophy case" page. */
  border-color:rgba(255,102,0,.35);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
}
/* Medal-colored top strip, echoing the gold/silver/bronze rank badges
   below — a small flourish that reads as "standings" at a glance even
   before the list loads. */
.gwd-standings::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#ffe27a,#ff6600,#e3a06b);
  pointer-events:none;
}
.gwd-standings::after{
  content:'';
  position:absolute;
  top:-15%; right:-8%;
  width:220px; height:220px;
  background:url('../img/gw-team/gwlogo.png') no-repeat center / contain;
  opacity:.07;
  transform:rotate(-8deg);
  pointer-events:none;
}
.gwd-standings-col{
  position:relative;
  z-index:1;
}
@media (max-width:640px){
  .gwd-standings{ grid-template-columns:1fr; gap:0; }
  /* Corner-pinned watermark got chopped down to an unreadable sliver once
     the card narrowed to one column — centered and toned down instead so
     it reads as a deliberate crest, not a rendering accident. */
  .gwd-standings::after{
    top:50%; right:50%; left:auto; bottom:auto;
    width:190px; height:190px;
    transform:translate(50%,-50%) rotate(-8deg);
    opacity:.05;
  }
  .gwd-standings-col:first-child{
    padding-bottom:1.2rem;
    margin-bottom:1.2rem;
    border-bottom:1px solid rgba(255,102,0,.18);
  }
}
.gwd-standings-head{
  font-family:var(--f-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--orange);
  margin-bottom:.9rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,102,0,.2);
}
.gwd-leaderboard{
  list-style:none;
  margin:0;
  padding:0;
}
.gwd-leaderboard-row{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.55rem 0;
  border-bottom:1px dashed var(--line);
}
.gwd-leaderboard-row:last-child{ border-bottom:none; }
.gwd-rank-badge{
  flex-shrink:0;
  width:1.6rem; height:1.6rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display);
  font-size:.8rem;
  color:var(--void);
  background:var(--steel-dim);
}
/* Gold / silver / bronze — the one spot in this whole system that
   intentionally breaks from the orange brand palette, since medal
   colors read instantly as "1st/2nd/3rd" in a way a same-color badge
   wouldn't. */
.gwd-rank-badge.rank-1{ background:linear-gradient(150deg,#ffe27a,#c99a2e); box-shadow:0 0 0 2px rgba(255,210,90,.22); }
.gwd-rank-badge.rank-2{ background:linear-gradient(150deg,#eef1f4,#9aa3ab); }
.gwd-rank-badge.rank-3{ background:linear-gradient(150deg,#e3a06b,#9c5b2e); }
.gwd-leaderboard-name{ flex:1; min-width:0; }
.gwd-leaderboard-name b{
  display:block;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.88rem;
  color:var(--bone);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gwd-leaderboard-name span{
  display:block;
  font-family:var(--f-mono);
  font-size:.66rem;
  color:var(--steel-dim);
  margin-top:.1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gwd-leaderboard-total{
  flex-shrink:0;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:.85rem;
  color:var(--orange);
}

/* ---- Crest watermarks on the two other roster-page cards ----
   Same technique as .gwd-standings::after above: a faded gwlogo.png behind
   the real content, with the content's own direct children lifted onto
   their own stacking context via z-index so paint order stays correct
   regardless of DOM order. Different corner/rotation on each card so the
   page doesn't read as one rule copy-pasted three times. */
.gwd-rules-intro{
  position:relative;
  overflow:hidden;
}
.gwd-rules-intro::after{
  content:'';
  position:absolute;
  bottom:-14%; right:-5%;
  width:210px; height:210px;
  background:url('../img/gw-team/gwlogo.png') no-repeat center / contain;
  opacity:.06;
  transform:rotate(7deg);
  pointer-events:none;
}
.gwd-rules-intro > *{ position:relative; z-index:1; }
@media (max-width:640px){
  .gwd-rules-intro::after{ width:140px; height:140px; }
}

.gwd-stat-strip{
  position:relative;
  overflow:hidden;
}
.gwd-stat-strip::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:180px; height:180px;
  transform:translate(-50%,-50%) rotate(-9deg);
  background:url('../img/gw-team/gwlogo.png') no-repeat center / contain;
  opacity:.05;
  pointer-events:none;
}
.gwd-stat-strip > div{ position:relative; z-index:1; }