/* ============================================================
   CHEGG — Official Server
   Design tokens grounded in the game's own materials:
   the checkerboard, red/blue spawn zones, item frames, mana. */

:root{
  --void:      #0c0b0e;
  --panel:     #17151a;
  --panel-2:   #1e1b21;
  --board-a:   #111013;
  --board-b:   #1d1a20;
  --cream:     #e9e2d3;
  --cream-dim: #b8ae9c;
  --red:       #a9392a;
  --red-dim:   #6e2a20;
  --blue:      #48598c;
  --blue-dim:  #333f63;
  --amber:     #d9a441;
  --amber-hi:  #f2c369;
  --green:     #5c8a4c;
  --frame:     #5b4128;
  --frame-lo:  #2c1f14;
  --line:      rgba(233,226,211,0.10);
  --shadow:    0 20px 50px rgba(0,0,0,0.45);
  --radius:    10px;
  --font-pixel: "Press Start 2P", monospace;
  --font-head:  "Space Grotesk", sans-serif;
  --font-body:  "Inter", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .5em;font-weight:700;letter-spacing:-0.01em;}
p{margin:0 0 1em;color:var(--cream-dim);} 
.container{max-width:1120px;margin:0 auto;padding:0 24px;} 
.eyebrow{
  font-family:var(--font-pixel);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--amber);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  background:var(--amber);
  box-shadow:8px 0 0 var(--red), 16px 0 0 var(--blue);
}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- checkerboard texture ---------- */
.checker{
  background-image:
    repeating-conic-gradient(var(--board-b) 0% 25%, var(--board-a) 0% 50%);
  background-size: 44px 44px;
}
.checker-strip{
  height:14px;
  background-image: repeating-linear-gradient(90deg, var(--red) 0 22px, var(--red-dim) 22px 44px);
}
.checker-strip.blue{
  background-image: repeating-linear-gradient(90deg, var(--blue) 0 22px, var(--blue-dim) 22px 44px);
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,11,14,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-pixel); font-size:14px; color:var(--cream);
}
.brand-egg{
  width:18px;height:22px;border-radius:60% 60% 55% 55%;
  background-image: url('src/favicon.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.35);
}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:var(--font-head); font-size:14px; font-weight:600;
  color:var(--cream-dim); padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--cream); border-color:var(--amber);} 
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--cream); width:40px;height:40px;border-radius:8px; cursor:pointer;}

.ip-pill{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 14px;
}
.ip-pill .ip-value{font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.02em;}
.ip-pill .ip-label{font-size:10px; color:var(--cream-dim); font-family:var(--font-pixel); letter-spacing:.08em;}
.copy-btn{
  border:none; cursor:pointer; border-radius:999px;
  background:var(--amber); color:#241a08; font-weight:700; font-size:12px;
  padding:8px 14px; display:flex; align-items:center; gap:6px;
  transition:background .15s ease, transform .1s ease;
  font-family:var(--font-head);
}
.copy-btn:hover{background:var(--amber-hi);} 
.copy-btn:active{transform:scale(.96);} 
.copy-btn svg{width:14px;height:14px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:14px;
  padding:13px 22px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-2px);} 
.btn-primary{background:var(--amber); color:#241a08;} 
.btn-primary:hover{background:var(--amber-hi);} 
.btn-green{background:var(--green); color:#241a08;} 
.btn-green:hover{background:darken(var(--green), 10%);} 
.btn-ghost{background:transparent; border-color:var(--line); color:var(--cream);} 
.btn-ghost:hover{border-color:var(--cream-dim);} 
.btn-discord{background:#2b2f4a; color:#c9cdf5; border-color:#3b4070;} 
.btn-discord:hover{background:#343a5c;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 32px;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-conic-gradient(var(--board-b) 0% 25%, var(--board-a) 0% 50%);
  background-size: 52px 52px;
  opacity:.35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
}
.hero .container{position:relative;} 
.hero-title{
  font-family:var(--font-pixel);
  font-size:clamp(30px, 6vw, 58px);
  line-height:1.25;
  color:var(--cream);
  margin:0 0 22px;
  text-shadow: 4px 4px 0 var(--red-dim), 8px 8px 0 rgba(0,0,0,.4);
}
.hero-sub{font-size:19px; max-width:640px; color:var(--cream-dim);} 
.hero-note{font-size:14px; color:var(--cream-dim); max-width:600px;} 
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 8px;} 
.hero-ip{
  display:inline-flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:16px 20px; margin-bottom:28px;
}
.hero-ip .ip-value{font-family:var(--font-head); font-size:22px; font-weight:700;} 
.ip-secondary{
  font-size:11px;
  color:var(--cream-dim);
  margin-left:8px;
}
.ip-tertiary{
  font-size:11px;
  color:var(--amber);
  margin-left:8px;
} 

/* ---------- sections ---------- */
section{padding:76px 0;} 
.section-tight{padding:56px 0;} 
.section-head{max-width:680px; margin-bottom:44px;} 
.section-head h2{font-size:clamp(24px,3.4vw,36px);} 
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} 
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;} 
@media (max-width:860px){
  .grid-3{grid-template-columns:1fr;} 
  .grid-2{grid-template-columns:1fr;} 
}

/* ---------- item-frame card ---------- */
.frame-card{
  position:relative;
  background:var(--panel);
  border-radius:var(--radius);
  padding:22px;
  border:2px solid var(--frame);
  box-shadow: inset 0 0 0 2px var(--frame-lo), var(--shadow);
}
.frame-card h3{font-size:18px; margin-bottom:8px;} 
.frame-card p{margin-bottom:0; font-size:14px;} 
.frame-icon{
  width:44px;height:44px; border-radius:6px;
  background:var(--board-a);
  border:1px solid var(--frame-lo);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}

/* ---------- video ---------- */
.video-wrap{
  position:relative; border-radius:14px; overflow:hidden;
  border:2px solid var(--frame); box-shadow:var(--shadow);
  aspect-ratio:16/9; background:#000;
}
.video-wrap iframe{width:100%;height:100%;border:0;} 
.video-credit{margin-top:14px; font-size:13px; color:var(--cream-dim);} 

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:52px 0 40px;} 
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:36px;} 
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}} 
.footer-col h4{font-size:13px; color:var(--cream-dim); font-family:var(--font-pixel); letter-spacing:.06em; margin-bottom:16px;} 
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} 
.footer-col a{font-size:14px; color:var(--cream-dim);} 
.footer-col a:hover{color:var(--cream);} 
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--cream-dim);
}
.badge-official{
  display:inline-flex; align-items:center; gap:3px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12px; font-weight:700; color:var(--amber-hi);
  font-family:var(--font-head);
}
.badge-official svg{width:14px;height:14px;} 

/* ---------- doc / rules layout ---------- */
.doc-layout{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;} 
@media (max-width:860px){.doc-layout{grid-template-columns:1fr;}} 
.doc-toc{
  position:sticky; top:88px;
  border:1px solid var(--line); border-radius:10px; padding:18px;
  background:var(--panel);
}
.doc-toc h4{font-size:11px; font-family:var(--font-pixel); color:var(--cream-dim); letter-spacing:.08em; margin-bottom:12px;} 
.doc-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} 
.doc-toc a{font-size:13.5px; color:var(--cream-dim);} 
.doc-toc a:hover, .doc-toc a.active{color:var(--amber-hi);} 
.doc-section{margin-bottom:56px; scroll-margin-top:90px;} 
.doc-section h2{font-size:24px; display:flex; align-items:center; gap:12px;} 
.doc-section h2 .num{font-family:var(--font-pixel); font-size:12px; color:var(--amber); border:1px solid var(--frame); padding:4px 8px; border-radius:6px;} 
.callout{
  border-left:3px solid var(--amber); background:var(--panel);
  border-radius:0 8px 8px 0; padding:14px 18px; font-size:14px; color:var(--cream-dim);
  margin:18px 0;
}
.callout strong{color:var(--cream);} 
.doc-img{
  border-radius:10px; border:2px solid var(--frame); overflow:hidden;
  margin:18px 0; background:var(--board-a); box-shadow:var(--shadow);
}
.doc-img img{width:100%; display:block;} 
.doc-img .cap{padding:10px 14px; font-size:12.5px; color:var(--cream-dim); background:var(--panel-2);} 
table.rules-table{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0;} 
table.rules-table th, table.rules-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);} 
table.rules-table th{color:var(--cream-dim); font-family:var(--font-head); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;} 

/* ---------- minion cards & pattern grid ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;} 
.filter-chip{
  font-family:var(--font-head); font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream-dim); cursor:pointer;
}
.filter-chip.active, .filter-chip:hover{border-color:var(--amber); color:var(--cream);} 
.minion-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} 
@media (max-width:920px){.minion-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){.minion-grid{grid-template-columns:1fr;} }
.minion-card{
  background:var(--panel); border-radius:var(--radius); overflow:hidden;
  border:2px solid var(--frame); box-shadow: inset 0 0 0 2px var(--frame-lo);
  display:flex; flex-direction:column;
}
.minion-card .m-head{display:flex; align-items:center; gap:14px; padding:18px 18px 12px;} 
.minion-card .m-icon{
  width:52px; height:52px; border-radius:8px; background:var(--board-a);
  border:1px solid var(--frame-lo); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.minion-card .m-icon img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;} 
.minion-card .m-name{font-size:16px; font-weight:700; margin:0;} 
.minion-card .m-tag{
  display:inline-block; font-size:10.5px; font-family:var(--font-pixel);
  padding:3px 8px; border-radius:5px; margin-top:6px; letter-spacing:.04em;
}
.tag-offense{background:rgba(169,57,42,.25); color:#e79484;} 
.tag-support{background:rgba(92,138,76,.25); color:#a2d18d;} 
.tag-utility{background:rgba(72,89,140,.25); color:#a8b4e8;} 
.tag-defense{background:rgba(217,164,65,.18); color:var(--amber-hi);} 
.tag-king{background:rgba(233,226,211,.14); color:var(--cream);} 
.m-cost{
  margin-left:auto; font-family:var(--font-pixel); font-size:13px;
  color:#241a08; background:var(--amber); border-radius:6px; padding:6px 9px; flex-shrink:0;
}
.m-body{padding:0 18px 18px; display:flex; gap:16px; align-items:flex-start;} 
.m-desc{flex:1; font-size:13px;} 
.m-desc dl{margin:0;} 
.m-desc dt{font-size:10.5px; color:var(--amber); font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:10px;} 
.m-desc dt:first-child{margin-top:0;} 
.m-desc dd{margin:2px 0 0; color:var(--cream-dim); font-size:13px;} 
.m-limit{font-size:11.5px; color:var(--cream-dim); border-top:1px dashed var(--line); margin-top:12px; padding-top:10px;} 

.pattern-grid{
  display:grid; grid-template-columns:repeat(7,7px); grid-template-rows:repeat(7,7px);
  gap:1.5px; flex-shrink:0; background:var(--board-a); padding:5px; border-radius:6px;
  border:1px solid var(--frame-lo);
}
.pattern-grid .cell{width:7px;height:7px;background:var(--panel-2);} 
.pattern-grid .cell.move{background:var(--green);} 
.pattern-grid .cell.attack{background:var(--red);} 
.pattern-grid .cell.center{background:var(--amber);} 
.pattern-legend{display:flex; gap:14px; font-size:11px; color:var(--cream-dim); margin-top:10px;} 
.pattern-legend span{display:inline-flex; align-items:center; gap:5px;} 
.pattern-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;} 

/* ---------- gamemode compare ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px;} 
@media (max-width:760px){.compare{grid-template-columns:1fr;}} 
.compare .frame-card ul{margin:0; padding-left:18px; color:var(--cream-dim); font-size:14px;} 
.compare .frame-card li{margin-bottom:8px;} 
.status-pill{font-size:11px; font-family:var(--font-pixel); padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:14px;} 
.status-live{background:rgba(92,138,76,.22); color:#a2d18d;} 
.status-draft{background:rgba(217,164,65,.2); color:var(--amber-hi);} 

/* ---------- roadmap ---------- */
.roadmap-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;} 
.roadmap-list li{
  display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line);
}
.roadmap-list li:last-child{border-bottom:1px solid var(--line);} 
.roadmap-list .r-num{font-family:var(--font-pixel); font-size:11px; color:var(--amber); flex-shrink:0; width:24px; padding-top:2px;} 
.roadmap-list .r-title{font-weight:700; font-family:var(--font-head); margin-bottom:2px;} 
.roadmap-list .r-desc{font-size:13.5px; color:var(--cream-dim); margin:0;} 

@media (max-width:760px){
  .nav-links{display:none;} 
  .nav-toggle{display:block;} 
  .site-nav.open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0;
    background:var(--void); border-bottom:1px solid var(--line); padding:16px 24px; gap:16px;
  }
  .grid-3{grid-template-columns:1fr;} 
}