/* ===== TOKENS ===== */
:root{
  --crimson:#A50044;
  --blue:#004D98;
  --gold:#FFED02;
  --cream:#F5F1E3;
  --ink:#1A1A1A;
  --paper-shadow: 4px 4px 0 var(--ink);
}

@font-face{
  font-family:'PixelHead';
  src: local('Arial Black');
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    repeating-linear-gradient(45deg, #eee6d0 0 2px, #F5F1E3 2px 40px),
    var(--cream);
  color:var(--ink);
  font-family:'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size:16px;
}

a{color:var(--blue); text-decoration:none;}

/* ===== TICKER ===== */
.ticker-wrap{
  background:var(--ink);
  color:var(--gold);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:3px solid var(--gold);
  font-family:'Courier New', monospace;
  font-weight:bold;
  letter-spacing:1px;
}
.ticker{
  display:inline-block;
  padding:6px 0;
  animation: scroll-left 22s linear infinite;
}
@keyframes scroll-left{
  0%{ transform:translateX(100vw); }
  100%{ transform:translateX(-100%); }
}

/* ===== FRAME ===== */
.page-frame{
  max-width:960px;
  margin:0 auto;
  padding:0 14px;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  margin-top:18px;
  padding:40px 20px 30px;
  background:linear-gradient(160deg, var(--crimson) 0%, var(--crimson) 55%, var(--blue) 55%, var(--blue) 100%);
  border:4px solid var(--ink);
  box-shadow: var(--paper-shadow);
  overflow:hidden;
  text-align:center;
}
.stars-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, var(--gold) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  opacity:.25;
  animation: twinkle 3s steps(2) infinite;
}
@keyframes twinkle{ 50%{opacity:.08;} }

.hero-inner{position:relative; z-index:1;}

.badge-spin{
  width:90px; margin:0 auto 10px;
  animation: spin3d 6s linear infinite;
}
.crest-svg{width:100%; display:block; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));}
.crest-num{font:800 34px 'Arial Black', sans-serif; fill:var(--gold);}
@keyframes spin3d{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}

.hero-title{
  margin:6px 0 4px;
  font-family:'Arial Black','Impact',sans-serif;
  font-size:clamp(2.4rem, 8vw, 4.2rem);
  line-height:1;
  color:var(--gold);
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 rgba(0,0,0,.25);
  letter-spacing:2px;
}
.wobble{
  display:inline-block;
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{ transform:rotate(-2deg); }
  50%{ transform:rotate(2deg); }
}
.hero-nine{
  display:inline-block;
  color:var(--cream);
  -webkit-text-stroke:2px var(--ink);
}
.hero-sub{
  display:block;
  font-family:'Courier New', monospace;
  font-size:.9rem;
  letter-spacing:3px;
  color:var(--cream);
  text-shadow:none;
  margin-top:6px;
}
.hero-tag{
  color:var(--gold);
  font-family:'Courier New', monospace;
  font-weight:bold;
  letter-spacing:1px;
  margin:14px 0 10px;
}
.hero-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.pixel-badge{
  font-family:'Courier New', monospace;
  font-weight:bold;
  font-size:.75rem;
  padding:4px 10px;
  border:2px solid var(--ink);
  color:var(--ink);
  animation: blink-badge 1.1s steps(1) infinite;
}
.pixel-badge.new{background:var(--gold);}
.pixel-badge.hot{background:#ff8a3d;}
.pixel-badge.best{background:var(--cream);}
@keyframes blink-badge{ 50%{ opacity:.35; } }

/* ===== NAV ===== */
.navbar{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-top:14px;
  background:var(--ink);
  border:4px solid var(--ink);
  border-top:none;
}
.navbar a{
  flex:1;
  text-align:center;
  padding:10px 6px;
  background:var(--blue);
  color:var(--cream);
  font-weight:bold;
  font-family:'Courier New', monospace;
  font-size:.85rem;
  letter-spacing:1px;
  border-right:2px solid var(--ink);
}
.navbar a:last-child{border-right:none;}
.navbar a:hover{background:var(--gold); color:var(--ink);}

/* ===== PANELS ===== */
.content{margin-top:22px; display:flex; flex-direction:column; gap:26px; padding-bottom:20px;}
.panel{
  background:#fff;
  border:3px solid var(--ink);
  box-shadow: var(--paper-shadow);
  padding:0 0 20px;
}
.panel-title{
  margin:0 0 16px;
  padding:10px 16px;
  background:repeating-linear-gradient(90deg, var(--crimson) 0 14px, var(--blue) 14px 28px);
  color:var(--gold);
  font-family:'Arial Black', sans-serif;
  font-size:1.2rem;
  letter-spacing:1px;
  text-shadow:2px 2px 0 var(--ink);
  border-bottom:3px solid var(--ink);
}
.panel-body{padding:0 20px;}
.two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:center;}
@media (max-width:640px){ .two-col{grid-template-columns:1fr;} }

.blink{animation: blink-badge 1s steps(1) infinite; color:var(--crimson); font-weight:bold;}

.jersey-box{display:flex; justify-content:center;}
.jersey-svg{width:160px;}
.jersey-number{font:900 40px 'Arial Black', sans-serif; fill:var(--gold); stroke:var(--ink); stroke-width:1px;}
.jersey-name{font:700 8px 'Courier New', monospace; fill:var(--gold);}

/* ===== TERMINAL ===== */
.terminal{margin:0 20px 0; border:3px solid var(--ink); box-shadow:var(--paper-shadow);}
.terminal-bar{
  background:#c8c8c8;
  border-bottom:2px solid var(--ink);
  padding:6px 10px;
  font-family:'Courier New', monospace;
  font-size:.75rem;
  display:flex; align-items:center; gap:6px;
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid var(--ink);}
.dot.red{background:#ff5f56;} .dot.yellow{background:#ffbd2e;} .dot.green{background:#27c93f;}
.terminal-body{
  background:#0d1a0d;
  color:#4dff4d;
  font-family:'Courier New', monospace;
  font-size:.85rem;
  line-height:1.6;
  padding:16px;
  margin:0;
  overflow-x:auto;
}
.cursor{animation: blink-badge 0.8s steps(1) infinite;}

/* ===== TRADING CARD ===== */
.card-wrap{display:flex; flex-direction:column; align-items:center; padding:0 20px;}
.trading-card{
  width:230px;
  background:linear-gradient(180deg, var(--gold), #fff9d6);
  border:4px solid var(--ink);
  box-shadow: var(--paper-shadow);
  padding:8px;
  transition: transform .3s;
}
.trading-card:hover{ transform: rotate(-2deg) scale(1.03); }
.card-header{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Courier New', monospace; font-weight:bold; font-size:.7rem;
  color:var(--crimson); padding:2px 4px;
}
.card-num{
  background:var(--crimson); color:var(--gold);
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Arial Black'; font-size:.8rem;
}
.card-art{
  border:2px solid var(--ink);
  aspect-ratio:1;
  overflow:hidden;
}
.card-name{
  text-align:center; font-family:'Arial Black', sans-serif;
  font-size:.9rem; margin:8px 0 6px; color:var(--ink);
}
.card-stats{display:flex; flex-direction:column; gap:5px;}
.card-stats div{display:grid; grid-template-columns:70px 1fr; align-items:center; gap:6px;}
.card-stats span{font-family:'Courier New', monospace; font-size:.65rem; font-weight:bold;}
.bar{background:#ddd; border:1px solid var(--ink); height:8px;}
.bar i{display:block; height:100%; background:var(--crimson);}
.card-caption{
  font-family:'Courier New', monospace; font-size:.75rem;
  color:#555; margin-top:12px;
}

/* ===== TV / HIGHLIGHTS ===== */
.tv-frame{
  margin:0 20px;
  background:#333;
  border:4px solid var(--ink);
  border-radius:14px;
  padding:16px;
  box-shadow: var(--paper-shadow);
}
.tv-screen{
  position:relative;
  background:#0a2a0a;
  aspect-ratio:16/9;
  border:3px solid #000;
  border-radius:6px;
  overflow:hidden;
}
.scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px);
  pointer-events:none;
}
.pitch{position:absolute; inset:0; background:
  linear-gradient(90deg, #1c5c1c 0 10%, #226b22 10% 20%, #1c5c1c 20% 30%, #226b22 30% 40%,
  #1c5c1c 40% 50%, #226b22 50% 60%, #1c5c1c 60% 70%, #226b22 70% 80%, #1c5c1c 80% 90%, #226b22 90% 100%);
}
.pixel-ball{
  position:absolute; width:14px; height:14px; background:#fff;
  border:2px solid #000; border-radius:50%;
  top:60%; left:10%;
  animation: ball-fly 3s ease-in infinite;
}
@keyframes ball-fly{
  0%{ left:10%; top:65%; }
  70%{ left:80%; top:35%; }
  100%{ left:88%; top:30%; }
}
.pixel-player{
  position:absolute; width:16px; height:26px; background:var(--crimson);
  border:2px solid #000; left:6%; top:48%;
  animation: player-run 3s ease-in infinite;
}
@keyframes player-run{
  0%{ left:6%; }
  70%{ left:74%; }
  100%{ left:78%; }
}
.pixel-goal{
  position:absolute; right:6%; top:20%;
  width:30px; height:40px;
  border:3px solid #fff;
  border-left:none;
}
.tv-caption{
  position:absolute; bottom:6px; left:8px;
  color:#9dff9d; font-family:'Courier New', monospace; font-size:.7rem;
  background:rgba(0,0,0,.5); padding:2px 6px;
}
.tv-controls{
  display:flex; align-items:center; gap:14px; justify-content:center;
  margin-top:12px;
}
.tv-btn{
  color:var(--gold); font-size:1.2rem; cursor:default;
  border:2px solid var(--gold); border-radius:4px; padding:2px 10px;
}
.tv-btn.play{ animation: blink-badge 1.4s steps(1) infinite; }
.tv-led{width:10px; height:10px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 6px #ff3b3b;}
.note{
  padding:0 20px; margin-top:10px;
  font-family:'Courier New', monospace; font-size:.75rem; color:#777;
}

/* ===== WEBRING / LINKS ===== */
.webring{display:flex; gap:8px; padding:0 20px; flex-wrap:wrap;}
.link-btn{
  flex:1; min-width:140px; text-align:center;
  background:var(--blue); color:var(--gold);
  border:2px solid var(--ink); padding:10px;
  font-family:'Courier New', monospace; font-weight:bold; font-size:.75rem;
}
.link-btn.center{background:var(--crimson);}
.button-row{display:flex; gap:8px; flex-wrap:wrap; padding:14px 20px 0;}
.mini-btn{
  background:var(--gold); border:2px solid var(--ink);
  padding:6px 10px; font-family:'Courier New', monospace;
  font-size:.7rem; font-weight:bold; box-shadow:2px 2px 0 var(--ink);
}

/* ===== GUESTBOOK ===== */
.guestbook{padding:0 20px; display:flex; flex-direction:column; gap:12px;}
.entry{
  background:var(--cream);
  border:2px dashed var(--ink);
  padding:10px 12px;
  font-size:.9rem;
}
.entry strong{color:var(--crimson);}
.date{font-family:'Courier New', monospace; font-size:.7rem; color:#777;}
.entry p{margin:4px 0 0;}
.gb-form{
  display:flex; flex-direction:column; gap:8px;
  border:2px solid var(--ink); padding:14px; background:#fdfcf6;
}
.gb-form input, .gb-form textarea{
  font-family:'Courier New', monospace;
  border:2px solid var(--ink);
  padding:8px;
  resize:vertical;
}
.gb-form button{
  align-self:flex-start;
  background:var(--crimson);
  color:var(--gold);
  font-weight:bold;
  border:2px solid var(--ink);
  padding:8px 18px;
  font-family:'Courier New', monospace;
  cursor:pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.gb-form button:hover{ background:var(--blue); }

/* ===== FOOTER ===== */
.site-footer{
  text-align:center;
  padding:20px 10px 40px;
  font-family:'Courier New', monospace;
  font-size:.75rem;
  color:#555;
}
.counter{
  background:#000; color:#0f0;
  display:inline-block; padding:2px 8px;
  letter-spacing:2px;
  border:1px solid #333;
}
.small{opacity:.7; margin-top:6px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}