@font-face{font-family:"Press Start 2P";src:url(/assets/press-start-2p.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(/assets/vt323.woff2) format("woff2");font-display:swap}
:root{
  --bg:#0b0517; --bg2:#14062c; --panel:#1a0b33; --purple:#6b2fb3; --violet:#a77bdc;
  --silver:#d9d2e6; --gold:#c9a050; --gold-d:#7a5a24; --muted:#8b7a9e; --twitch:#9146ff; --yt:#ff3d3d;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--silver);font:20px/1.35 "VT323",ui-monospace,monospace;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:
  radial-gradient(1200px 500px at 50% -10%,rgba(107,47,179,.35),transparent 70%),
  linear-gradient(var(--bg),#06030d);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
img{display:block;max-width:100%;height:auto}
a{color:var(--violet)}

.top{border-bottom:3px solid var(--gold-d);box-shadow:0 3px 0 #000;
  background:linear-gradient(90deg,rgba(11,5,23,.92) 30%,rgba(11,5,23,.55)),url(assets/banner.jpg) center/cover}
.id{max-width:1400px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center}
.avatar{width:64px;height:64px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 0 3px #000,0 0 18px rgba(167,123,220,.5);background:#000;flex:none}
.id>div{min-width:0}
h1{font:400 20px/1.2 "Press Start 2P",monospace;color:var(--silver);letter-spacing:2px;
  text-shadow:2px 2px 0 var(--purple),4px 4px 0 #000}
.tag{color:var(--muted);margin-top:6px}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.btn{font:400 11px/1 "Press Start 2P",monospace;text-decoration:none;color:#fff;padding:10px 14px;
  background:var(--panel);border:2px solid var(--gold-d);box-shadow:3px 3px 0 #000;transition:transform .08s,border-color .08s}
.btn:hover,.btn:focus-visible{transform:translate(-1px,-1px);border-color:var(--gold);outline:none}
.btn.twitch{color:#cbb3ff}.btn.yt{color:#ffb3b3}

main{max-width:1400px;margin:20px auto 0;padding:0 16px;display:grid;gap:36px}
h2{font:400 13px/1 "Press Start 2P",monospace;color:var(--gold);letter-spacing:2px;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dot{width:10px;height:10px;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.frame{background:#000;border:3px solid var(--gold-d);box-shadow:0 0 0 3px #000,6px 6px 0 3px rgba(0,0,0,.6)}
.frame iframe{display:block;width:100%;height:100%;border:0}
.video{aspect-ratio:16/9}
.twitch-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:stretch}
.live .video iframe,#twitch-player iframe{width:100%;height:100%}
.chat{display:flex;flex-direction:column;min-height:0}
.chat summary{font:400 10px/1 "Press Start 2P",monospace;color:var(--gold);padding:10px 12px;cursor:pointer;background:var(--panel);list-style:none}
.chat summary::-webkit-details-marker{display:none}
.chat summary::before{content:"\25B8  "}.chat[open] summary::before{content:"\25BE  "}
.chat iframe{flex:1;min-height:0}
@media (min-width:901px){.chat summary{pointer-events:none}.chat summary::before{content:""}.chat{height:auto;max-height:100%}.twitch-grid>.chat{position:relative}.twitch-grid>.chat iframe{position:absolute;inset:34px 0 0 0;height:auto}}
.tabs{margin-left:auto;display:flex;gap:6px}
.tabs button{font:400 9px/1 "Press Start 2P",monospace;color:var(--muted);background:var(--panel);border:2px solid #2c1650;padding:7px 9px;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--silver);border-color:var(--gold-d)}

.games{text-align:center;padding:28px 0 4px;color:var(--muted)}
.games p{font:400 11px/1.6 "Press Start 2P",monospace;letter-spacing:2px}
.games span{color:#5e4f72}
.blink{animation:b 1s steps(1) infinite;color:var(--violet)!important}
@keyframes b{50%{opacity:0}}
footer{text-align:center;color:#4a3c5e;padding:40px 16px 32px;font-size:16px}

@media (max-width:900px){
  .twitch-grid{grid-template-columns:1fr}
  .chat[open] iframe{height:440px;flex:none}
}
@media (max-width:560px){
  html{font-size:18px}
  .id{flex-wrap:wrap;gap:10px 12px}
  .avatar{width:52px;height:52px}
  h1{font-size:15px}.tag{font-size:16px}
  .links{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.note{margin-top:8px;color:var(--muted);font-size:17px}