/* ============================================================
   RETRO.IL — Main Styles
   © N.S TechDesign
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #090909;
  --brand1:    #bf00ff;
  --brand2:    #ff00cc;
  --gold:      #ffd700;
  --arcade:    #ff8c00;
  --text:      #eeeeee;
  --muted:     #555;
  --border:    #1c1c1c;
  --radius:    8px;
  --font-px:   'Press Start 2P', monospace;
  --font-tech: 'Orbitron', sans-serif;
  --font-au:   'Audiowide', sans-serif;
}

html, body { height: 100%; overflow: hidden; }

body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 37px,
      rgba(0,0,0,0.55) 37px, rgba(0,0,0,0.55) 40px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 77px,
      rgba(0,0,0,0.35) 77px, rgba(0,0,0,0.35) 80px);
  color: var(--text);
  font-family: var(--font-au);
}

.site { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

/* LEFT PANEL */
.panel-left {
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.panel-left::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--brand1), transparent);
  opacity: 0.3;
}

/* BRAND HEADER */
.brand-header {
  text-align: center;
  padding: 22px 16px 8px;
  z-index: 10;
  width: 100%;
}

.tagline {
  font-family: var(--font-px);
  font-size: clamp(7px, 1.1vw, 14px);
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(255,215,0,.7), 0 0 24px rgba(255,215,0,.3);
  margin-bottom: 10px;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-tech);
  font-weight: 900;
  font-size: clamp(30px, 5.5vw, 80px);
  letter-spacing: -2px;
  background: linear-gradient(90deg, var(--brand1) 0%, var(--brand2) 50%, var(--brand1) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(191,0,255,.55));
  animation: shimmer 4s linear infinite, glitch 9s ease-in-out infinite;
  position: relative;
  display: inline-block;
}

.brand-name > span:first-child {
  background: linear-gradient(90deg,#fff,#ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-cursor {
  -webkit-text-fill-color: var(--brand1) !important;
  animation: blink 1.1s step-end infinite;
  font-size: 0.7em;
  vertical-align: middle;
}

@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes glitch  {
  0%,88%,100% { transform:translate(0);          filter:drop-shadow(0 0 16px rgba(191,0,255,.55)); }
  90%         { transform:translate(-3px,1px);   filter:drop-shadow(-3px 0 4px magenta) drop-shadow(3px 0 4px cyan); }
  92%         { transform:translate(3px,-1px);   filter:drop-shadow(3px 0 4px cyan)    drop-shadow(-3px 0 4px magenta); }
  94%         { transform:translate(-1px,0); }
}

/* CABINET */
.cabinet-zone {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px;
}

.cabinet-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 0 50px rgba(191,0,255,.18)) drop-shadow(0 20px 40px rgba(0,0,0,.9));
  transition: filter 0.3s;
}
.cabinet-img:hover {
  filter: drop-shadow(0 0 70px rgba(191,0,255,.35)) drop-shadow(0 20px 40px rgba(0,0,0,.9));
}

/* RIGHT PANEL */
.panel-right {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 32px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  box-shadow: inset 4px 0 30px rgba(191,0,255,.06);
}
.panel-right::-webkit-scrollbar { width: 3px; }
.panel-right::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:2px; }

/* CONSOLE NAV */
.console-nav { display:flex; flex-direction:column; gap:4px; }

.con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 16px;
  min-height: 56px;
  border-radius: var(--radius);
  position: relative;
  transition: background .2s, transform .18s;
  overflow: hidden;
}

.con::before {
  content: '';
  position: absolute;
  left:0; top:10%; bottom:10%;
  width: 3px;
  background: var(--brand1);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity .2s;
}
.con:hover { background: rgba(191,0,255,.06); transform: translateX(-5px); }
.con:hover::before { opacity: 1; }
.con-featured { min-height: 80px; }

/* Logo styles */
.tg-logo  { font-family:var(--font-tech); font-size:clamp(13px,1.8vw,21px); font-weight:700; }
.tg-t,.tg-g { color:#ff9500; }
.tg-16    { background:#ff9500; color:#000; font-family:var(--font-tech); font-size:.55em; font-weight:900; padding:1px 5px; border-radius:3px; vertical-align:super; }
.sat-logo { font-family:var(--font-tech); font-size:clamp(12px,1.7vw,20px); font-weight:700; color:#fff; letter-spacing:1px; }
.sat-ring { color:#0099ff; font-size:1.3em; margin-right:6px; }
.tdo-logo { font-family:var(--font-au); font-size:clamp(14px,2vw,22px); color:#eee; letter-spacing:3px; }
.dot-r { color:#f33; font-size:.7em; } .dot-y { color:#fc0; font-size:.7em; } .dot-g { color:#3c3; font-size:.7em; }
.ps-logo  { font-family:var(--font-au); font-size:clamp(14px,2.2vw,24px); color:#fff; }
.ps-sym   { font-family:var(--font-tech); font-size:1.3em; font-weight:900; background:linear-gradient(180deg,#003791 33%,#d00 33%,#d00 66%,#f0a500 66%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-right:6px; }
.arc-logo { font-family:var(--font-px); font-size:clamp(16px,2.8vw,34px); color:var(--arcade); text-shadow:0 0 12px rgba(255,140,0,.85),0 0 35px rgba(255,140,0,.35); letter-spacing:4px; }
.gen-logo { font-family:var(--font-tech); font-size:clamp(12px,1.7vw,19px); font-weight:900; color:#fff; letter-spacing:3px; border:2px solid #fff; padding:6px 18px; border-radius:4px; transition:color .2s,border-color .2s,text-shadow .2s; }
[data-id="genesis"]:hover .gen-logo { color:#0af; border-color:#0af; text-shadow:0 0 10px rgba(0,170,255,.6); }
.nes-logo  { font-family:var(--font-au); font-size:clamp(14px,2vw,22px); font-weight:700; color:#e4000f; }
.snes-logo { font-family:var(--font-au); font-size:clamp(13px,1.9vw,22px); font-weight:700; color:#e4000f; letter-spacing:1px; }
.con-sub   { font-size:clamp(8px,.9vw,11px); color:var(--muted); letter-spacing:1px; margin-top:2px; display:block; }
.n64-logo { display:flex; align-items:center; gap:8px; }
.n64-n    { font-family:var(--font-tech); font-size:clamp(26px,3.5vw,44px); font-weight:900; background:linear-gradient(135deg,#e4000f 25%,#009ac7 50%,#e89228 75%,#009b48 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.n64-text { font-family:var(--font-tech); font-size:clamp(14px,2vw,22px); font-weight:900; background:linear-gradient(90deg,#e4000f,#009ac7,#e89228,#009b48); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gba-logo { font-family:var(--font-au); font-size:clamp(13px,1.8vw,21px); color:#8b00ff; }

/* RESPONSIVE */
@media (max-width:820px) {
  html,body { overflow:auto; }
  .site { flex-direction:column; height:auto; }
  .panel-left { flex:0 0 auto; min-height:50vh; }
  .panel-right { flex:1; border-left:none; border-top:1px solid var(--border); padding:20px 24px; justify-content:flex-start; }
}