/* ============================================================
   FORGE skin — scoped to .forge for the Rogue To Nationals section.
   Extracted/condensed from the Spike City Forge design system.
   All selectors are namespaced so they never leak into the
   studio/JOMP chrome.
   ============================================================ */

.forge {
  --bg:        #efe4cc;
  --bg-deep:   #e3d4b2;
  --panel:     #fbf5e6;
  --panel-2:   #f5ead3;
  --ink:       #1a2138;
  --ink-soft:  #5d6781;
  --ink-muted: #9aa3b7;
  --line-soft: #cdbf9e;
  --coral:     #e8643a;
  --coral-d:   #c44c25;
  --ocean:     #2e7da3;
  --ocean-d:   #1f5b7a;
  --sun:       #f0b94a;
  --grass:     #6aa84f;
  --plum:      #8b5a99;
  --pink:      #d96aa6;
  --court:     #e9d2a0;
  --court-line:#fbf5e6;
  --fp: 'Silkscreen', 'VT323', monospace;
  --fm: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-hard: 4px 4px 0 0 var(--ink);
  --shadow-soft: 2px 2px 0 0 var(--ink);
  --shadow-xl:   6px 6px 0 0 var(--ink);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--fm);
  position: relative;
}
/* dotted parchment texture */
.forge::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(26,33,56,0.07) 1px, transparent 1px);
  background-size: 8px 8px;
}
.forge .wrap { position: relative; z-index: 1; }
.forge svg.pixel { shape-rendering: crispEdges; }

.forge .kicker { color: var(--coral-d); }
.forge .kicker::before { background: var(--coral); }
.forge .game-index { color: var(--ink-muted); }

/* status pill */
.forge .rtn-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fp); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--ink); color: var(--sun); padding: 6px 11px;
}
.forge .rtn-status .dot { width: 8px; height: 8px; background: var(--sun); }

.forge .rtn-title {
  font-family: var(--fp); font-size: clamp(28px,4.2vw,52px); line-height: 1;
  letter-spacing: 1px; margin: 18px 0 8px;
}
.forge .rtn-title em { color: var(--coral); font-style: normal; }
.forge .rtn-sub { font-family: var(--fp); font-size: 11px; letter-spacing: 1px; color: var(--ink-soft); margin-bottom: 22px; }
.forge .rtn-lede { font-family: var(--fm); font-size: 15px; color: var(--ink-soft); max-width: 60ch; line-height: 1.6; }

.forge .rtn-layout { display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: start; margin-top: 40px; }

/* ---- buttons ---- */
.forge .btn {
  background: var(--coral); color: var(--panel); outline: 2px solid var(--ink); border: 0;
  padding: 13px 18px; font-family: var(--fp); font-size: 11px; letter-spacing: .5px;
  text-transform: uppercase; box-shadow: var(--shadow-soft);
  transition: transform 80ms, box-shadow 80ms, background 120ms; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
}
.forge .btn:hover { background: var(--coral-d); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 var(--ink); }
.forge .btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 0 var(--ink); }
.forge .btn.alt { background: var(--panel); color: var(--ink); }
.forge .btn.alt:hover { background: var(--panel-2); }
.forge .btn.ocean { background: var(--ocean); } .forge .btn.ocean:hover { background: var(--ocean-d); }
.forge .btn.sun { background: var(--sun); color: var(--ink); }
.forge .btn .pre { color: var(--sun); }
.forge .btn.alt .pre { color: var(--coral); }

/* ---- panels ---- */
.forge .panel {
  background: var(--panel); outline: 2px solid var(--ink); box-shadow: var(--shadow-hard);
  display: flex; flex-direction: column;
}
.forge .panel-head {
  background: var(--ink); color: var(--panel); padding: 9px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--fp); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}
.forge .panel-head .ph-dot { width: 8px; height: 8px; background: var(--sun); margin-right: 8px; display: inline-block; }
.forge .panel-head .ph-right { font-family: var(--fm); font-size: 10px; color: var(--ink-muted); letter-spacing: 1px; }
.forge .panel-body { padding: 14px; }
.forge .panel-body.tight { padding: 10px; }
.forge .panel-body.np { padding: 0; }

/* ---- feature splits ---- */
.forge .feat-list { display: grid; gap: 0; }
.forge .rtn-feat {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 16px 4px; border-bottom: 2px dashed var(--line-soft);
}
.forge .rtn-feat:last-child { border-bottom: 0; }
.forge .rtn-feat .fg {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--ink); color: var(--sun); font-family: var(--fp); font-size: 16px;
  outline: 2px solid var(--ink); box-shadow: var(--shadow-soft);
}
.forge .rtn-feat.c1 .fg { background: var(--coral); color: var(--panel); }
.forge .rtn-feat.c2 .fg { background: var(--ocean); color: var(--panel); }
.forge .rtn-feat.c3 .fg { background: var(--grass); color: var(--panel); }
.forge .rtn-feat.c4 .fg { background: var(--plum); color: var(--panel); }
.forge .rtn-feat .ft { font-family: var(--fp); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 7px; }
.forge .rtn-feat .fd { font-family: var(--fm); font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.forge .rtn-feat .fd b { color: var(--ink); }

/* ---- chips / tags ---- */
.forge .chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--ink); color: var(--panel);
  font-family: var(--fp); font-size: 9px; letter-spacing: 1px; padding: 5px 9px; text-transform: uppercase;
}
.forge .chip.coral { background: var(--coral); } .forge .chip.ocean { background: var(--ocean); }
.forge .chip.sun { background: var(--sun); color: var(--ink); } .forge .chip.grass { background: var(--grass); }
.forge .chip.cream { background: var(--panel); color: var(--ink); outline: 2px solid var(--ink); }
.forge .chip .dot { width: 6px; height: 6px; background: currentColor; display: inline-block; }

/* ---- scoreboard ---- */
.forge .scoreboard {
  background: var(--ink); outline: 2px solid var(--ink);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; box-shadow: var(--shadow-hard);
}
.forge .sb-team { display: grid; grid-template-columns: 12px 1fr; }
.forge .sb-team .stripe { width: 12px; }
.forge .sb-team.home .stripe { background: var(--coral); }
.forge .sb-team.away .stripe { background: var(--ocean); }
.forge .sb-team .body { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.forge .sb-team.away .body { text-align: right; }
.forge .sb-team .name { font-family: var(--fp); font-size: 10px; color: var(--panel); letter-spacing: 1px; }
.forge .sb-team .rec { font-family: var(--fm); font-size: 9px; color: var(--ink-muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.forge .sb-team .score { font-family: var(--fp); font-size: 34px; color: var(--panel); line-height: 1; margin-top: 6px; }
.forge .sb-mid {
  background: #2a324a; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 22px; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.forge .sb-mid .set { font-family: var(--fp); font-size: 10px; color: var(--sun); letter-spacing: 2px; }
.forge .sb-mid .sets { display: flex; gap: 4px; margin-top: 7px; }
.forge .sb-mid .pip { width: 10px; height: 10px; background: #1a2138; outline: 1px solid var(--ink-muted); }
.forge .sb-mid .pip.coral { background: var(--coral); outline-color: var(--coral); }
.forge .sb-mid .pip.ocean { background: var(--ocean); outline-color: var(--ocean); }

/* ---- court wrap ---- */
.forge .court-wrap { background: var(--bg-deep); outline: 2px solid var(--ink); box-shadow: var(--shadow-hard); padding: 10px; }

/* ---- roster rows ---- */
.forge .roster-row {
  display: grid; grid-template-columns: 26px 1fr 70px 34px; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px dashed var(--line-soft);
}
.forge .roster-row:last-child { border-bottom: 0; }
.forge .roster-row .num { font-family: var(--fp); font-size: 11px; background: var(--panel-2); text-align: center; padding: 3px 0; outline: 1px solid var(--line-soft); }
.forge .roster-row .who { display: flex; flex-direction: column; gap: 2px; }
.forge .roster-row .nm { font-family: var(--fm); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.forge .roster-row .role { font-family: var(--fp); font-size: 7px; color: var(--ink-soft); letter-spacing: .5px; }
.forge .roster-row .stam { height: 8px; background: var(--panel-2); outline: 2px solid var(--ink); position: relative; }
.forge .roster-row .stam i { position: absolute; left: 0; top: 0; bottom: 0; }
.forge .roster-row .ovr { font-family: var(--fp); font-size: 10px; background: var(--ink); color: var(--sun); text-align: center; padding: 3px 0; }
.forge .roster-row.star .nm { color: var(--coral); }
.forge .roster-row.serving { background: rgba(232,100,58,0.12); }

/* ---- stat boxes ---- */
.forge .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.forge .stat-box { background: var(--panel); outline: 2px solid var(--ink); padding: 10px 6px; text-align: center; box-shadow: var(--shadow-soft); }
.forge .stat-box .lbl { font-family: var(--fp); font-size: 8px; color: var(--ink-soft); letter-spacing: .5px; text-transform: uppercase; }
.forge .stat-box .v { font-family: var(--fp); font-size: 22px; margin-top: 6px; }
.forge .stat-box.coral .v { color: var(--coral); }
.forge .stat-box.ocean .v { color: var(--ocean); }
.forge .stat-box.sun .v { color: var(--sun); }
.forge .stat-box.grass .v { color: var(--grass); }

/* ---- season strip ---- */
.forge .season-strip { display: flex; gap: 4px; padding: 14px; background: var(--panel-2); outline: 2px solid var(--ink); flex-wrap: wrap; box-shadow: var(--shadow-soft); }
.forge .season-week { width: 26px; height: 32px; background: var(--panel); outline: 2px solid var(--ink); font-family: var(--fp); font-size: 9px; display: grid; place-items: center; color: var(--ink-soft); }
.forge .season-week.w { background: var(--grass); color: var(--panel); }
.forge .season-week.l { background: var(--ink-soft); color: var(--panel); }
.forge .season-week.now { outline: 3px solid var(--coral); background: var(--sun); color: var(--ink); }

/* ---- player card (deck) ---- */
.forge .deck { display: flex; gap: 12px; flex-wrap: wrap; }
.forge .card {
  width: 150px; background: var(--panel); outline: 2px solid var(--ink); box-shadow: var(--shadow-soft);
  display: grid; grid-template-rows: 22px 76px 1fr 28px; position: relative; transition: transform 80ms;
}
.forge .card:hover { transform: translateY(-4px); }
.forge .card .c-head { background: var(--ink); color: var(--panel); padding: 0 8px; display: flex; align-items: center; justify-content: space-between; font-family: var(--fp); font-size: 8px; letter-spacing: .5px; }
.forge .card .c-head .role { background: var(--panel); color: var(--ink); padding: 1px 4px; font-size: 7px; }
.forge .card .c-art { display: grid; place-items: center; background: var(--panel-2); border-bottom: 2px solid var(--ink); }
.forge .card .c-body { padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.forge .card .c-title { font-family: var(--fp); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.forge .card .c-desc { font-family: var(--fm); font-size: 10px; color: var(--ink-soft); line-height: 1.3; }
.forge .card .c-foot { background: var(--coral); color: var(--panel); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 8px; font-family: var(--fp); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.forge .card.ocean .c-foot { background: var(--ocean); }
.forge .card.sun .c-foot { background: var(--sun); color: var(--ink); }
.forge .card .cost { background: var(--panel); color: var(--ink); padding: 1px 5px; outline: 1px solid var(--ink); font-size: 9px; }

/* ---- wishlist row ---- */
.forge .wishlist-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.forge .platforms { display: flex; gap: 16px; margin-top: 22px; align-items: center; flex-wrap: wrap; }
.forge .platforms .pl { font-family: var(--fp); font-size: 9px; letter-spacing: 1px; color: var(--ink-soft); text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.forge .platforms .pl::before { content: ""; width: 9px; height: 9px; background: var(--ink); }

@media (max-width: 940px) {
  .forge .rtn-layout { grid-template-columns: 1fr; }
}