:root {
  color-scheme: dark;
  --bg: #06080d;
  --panel: #0c1018;
  --line: rgba(255, 255, 255, .10);
  --muted: #9399a8;
  --text: #f5f7fb;
  --violet: #7c5cff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 72% -12%, rgba(124, 92, 255, .16), transparent 34rem),
    linear-gradient(145deg, #090c13, var(--bg) 58%);
  color: var(--text);
}

button, a { font: inherit; }
button { color: inherit; }

.arcade-shell {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  grid-template-rows: 4.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 13, .82);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--violet);
  box-shadow: 0 0 1.5rem rgba(124, 92, 255, .45);
  color: white;
  letter-spacing: 0;
}

.library-count {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: #b5bac7;
  font-size: .875rem;
}

.library-count span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #61dfa0;
  box-shadow: 0 0 .8rem rgba(97, 223, 160, .7);
}

.game-library {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: .65rem;
  padding: 1.6rem 1rem 1rem;
  border-right: 1px solid var(--line);
  background: rgba(9, 12, 18, .72);
}

.library-heading { padding: 0 .45rem 1rem; }
.library-heading p, .stage-toolbar p {
  margin: 0 0 .35rem;
  color: var(--violet);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.library-heading span { color: var(--muted); font-size: .9rem; }

.game-card {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .75rem;
  border: 1px solid transparent;
  border-radius: .85rem;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.game-card:hover { background: rgba(255,255,255,.045); transform: translateX(.2rem); }
.game-card.is-active { border-color: rgba(124,92,255,.42); background: rgba(124,92,255,.11); }
.game-card:focus-visible { outline: 2px solid white; outline-offset: 2px; }

.game-icon {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border-radius: .75rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.icon-2048 { background: #f6c453; color: #30250d; font-size: .78rem; }
.icon-hop { background: #1a4e3b; color: #66e4a7; font-size: 1.35rem; }
.icon-arkanoid { background: #512532; color: #ff8190; font-size: 1.35rem; }
.icon-snake { background: #0d493f; color: #54f1c3; font-size: 1.75rem; }
.icon-drift { background: #182a5d; color: #8bc8ff; font-size: 1.35rem; }

.game-copy { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.game-copy strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.game-copy small { color: var(--muted); font-size: .78rem; }
.play-arrow { color: #777e90; font-size: 1.5rem; }
.game-card.is-active .play-arrow { color: white; }

.license-note {
  margin: auto .45rem 0;
  color: #737a8a;
  font-size: .75rem;
  line-height: 1.5;
}

.game-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(25rem, 1fr) auto;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.4rem;
}

.stage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stage-toolbar h1 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.1; }

.stage-actions { display: flex; gap: .55rem; }
.stage-actions button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.7rem;
  padding: 0 .9rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}
.stage-actions button:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.stage-actions button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.screen {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--game-accent) 30%, transparent);
  border-radius: 1rem;
  background: #11151e;
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.38);
  isolation: isolate;
}

.screen-glow {
  position: absolute;
  z-index: -1;
  inset: -30%;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--game-accent) 16%, transparent), transparent 48%);
  pointer-events: none;
}

#game-frame { width: 100%; height: 100%; min-height: 30rem; border: 0; background: #faf8ef; }

.controls-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: rgba(255,255,255,.025);
}
.controls-label { color: #b4a9ff; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.controls-bar p { margin: 0; color: #a9afbd; font-size: .85rem; line-height: 1.45; }

@media (max-width: 800px) {
  .arcade-shell { grid-template-columns: 1fr; grid-template-rows: 4rem auto minmax(0,1fr); }
  .topbar { padding: 0 1rem; }
  .game-library {
    flex-direction: row;
    overflow-x: auto;
    padding: .8rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .library-heading, .license-note { display: none; }
  .game-card { min-width: 12.5rem; grid-template-columns: 2.6rem 1fr; padding: .55rem; }
  .game-icon { width: 2.6rem; height: 2.6rem; }
  .play-arrow { display: none; }
  .game-stage { padding: 1rem; grid-template-rows: auto minmax(33rem, 1fr) auto; }
}

@media (max-width: 520px) {
  .library-count { font-size: .75rem; }
  .game-stage { grid-template-rows: auto minmax(30rem, 1fr) auto; }
  .stage-actions button span { display: none; }
  .stage-actions button { width: 2.7rem; justify-content: center; padding: 0; }
  #game-frame { min-height: 30rem; }
  .controls-bar { align-items: flex-start; flex-direction: column; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}