/* ============================================================
   UNBLOCKED ARCADE — shared tokens & layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --void:        #0a0d12;
  --panel:       #131922;
  --panel-2:     #1a2230;
  --border:      #232d3d;
  --text:        #e8eef4;
  --text-dim:    #8a97a8;

  --amber:       #ffb000;
  --green:       #39ff14;
  --magenta:     #ff2e88;
  --cyan:        #3ecbff;

  --font-display: 'Press Start 2P', monospace;
  --font-body:    'Space Mono', monospace;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(62,203,255,0.06), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(255,46,136,0.06), transparent 40%);
}

a{ color: inherit; text-decoration: none; }

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--panel-2); color:var(--text); padding:.75rem 1rem;
  border:2px solid var(--cyan); z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- Marquee bulb-chase header ---------- */
.marquee-strip{
  height:10px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      var(--marquee-dot,#3a4557) 6px 9px
    );
  position:relative;
  overflow:hidden;
}
.marquee-strip::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg,
      transparent 0 6px,
      var(--amber) 6px 9px
    );
  animation: chase 1.2s steps(3) infinite;
  opacity:.9;
}
@keyframes chase{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(27px); }
}

header.site-header{
  padding: 2.5rem 1.5rem 2rem;
  text-align:center;
  border-bottom:1px solid var(--border);
}

.site-title{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  letter-spacing: .08em;
  margin: 1rem 0 .75rem;
  color: var(--text);
  text-shadow:
    0 0 6px var(--green),
    0 0 22px rgba(57,255,20,.35);
  animation: flicker 6s infinite;
}
.site-title .bracket{ color: var(--amber); text-shadow:0 0 8px var(--amber); }

@keyframes flicker{
  0%,19%,21%,23%,80%,100%{ opacity:1; }
  20%,22%{ opacity:.55; }
}

.site-tag{
  color: var(--text-dim);
  font-size: .85rem;
  letter-spacing:.04em;
}

nav.crumbs{
  font-size:.75rem;
  color: var(--text-dim);
  text-align:center;
  padding: 1rem 1.5rem 0;
}
nav.crumbs a{ color: var(--cyan); }
nav.crumbs a:hover{ text-decoration:underline; }

/* ---------- Cabinet grid ---------- */
main{ max-width:1080px; margin:0 auto; padding: 2rem 1.5rem 4rem; }

.section-label{
  font-family: var(--font-display);
  font-size:.7rem;
  color: var(--text-dim);
  letter-spacing:.15em;
  margin: 2rem 0 1rem;
}

.cabinet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 1.25rem;
}

.cabinet{
  --glow: var(--green);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  display:flex; flex-direction:column; gap:.75rem;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cabinet:hover, .cabinet:focus-within{
  transform: translateY(-4px);
  border-color: var(--glow);
  box-shadow: 0 8px 28px -8px var(--glow), 0 0 0 1px var(--glow) inset;
}

.cabinet .screen{
  aspect-ratio: 4/3;
  background: #060a0f;
  border-radius:6px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.cabinet .screen svg{ width:58%; height:58%; filter: drop-shadow(0 0 6px var(--glow)); }
.cabinet .screen::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none;
}

.cabinet h3{
  font-family: var(--font-display);
  font-size:.8rem;
  margin:.25rem 0 0;
  color: var(--glow);
}
.cabinet p{
  font-size:.78rem;
  color: var(--text-dim);
  margin:0;
  line-height:1.5;
}
.cabinet .play-btn{
  margin-top:.25rem;
  align-self:flex-start;
  font-family: var(--font-display);
  font-size:.65rem;
  padding:.6rem .9rem;
  border:1px solid var(--glow);
  border-radius:4px;
  color: var(--glow);
  background: transparent;
}
.cabinet .cover-link{
  position:absolute; inset:0; border-radius:10px;
  background:transparent; border:none; padding:0; margin:0; cursor:pointer;
}
.cabinet .play-btn{ pointer-events:none; }

/* ---------- Game player (iframe) ---------- */
.player-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.player-bar h2{
  font-family: var(--font-display);
  font-size:.85rem;
  color: var(--text);
  margin:0;
}
.player-frame-wrap{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#04070b;
}
.player-frame-wrap iframe{
  width:100%;
  height:min(80vh, 780px);
  border:0;
  display:block;
}

/* ---------- Footer ---------- */
footer{
  text-align:center;
  padding: 2rem 1.5rem 3rem;
  color: var(--text-dim);
  font-size:.75rem;
  border-top:1px solid var(--border);
}
footer .heart{ color: var(--magenta); }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}