:root {
  --bg:#08090b;
  --panel:#0c0b12;
  --ink:#f1f2f1;
  --muted:#77747f;
  --line:rgba(255,255,255,.12);
  --purple:#ae8cff;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
  margin:0;
  color:var(--ink);
  background:radial-gradient(circle at 72% -10%,rgba(123,79,205,.16),transparent 28rem),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.topbar {
  height:68px;
  padding:0 clamp(18px,4vw,56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}

.back {
  color:#aaa6b1;
  text-decoration:none;
  font:800 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;
  transition:color .2s ease;
}
.back:hover, .back:focus-visible { color:var(--ink); outline:none; }

.identity { display:flex; align-items:baseline; gap:13px; }
.identity span {
  color:#777280;
  font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.15em;
}
.identity strong { font-size:13px; letter-spacing:.08em; }

main { width:min(1440px,100%); margin:0 auto; padding:clamp(18px,3vw,42px); }
.game-stage {
  position:relative;
  width:100%;
  height:min(78vh,860px);
  min-height:520px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#050509;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
}

.game-tools {
  position:absolute;
  z-index:4;
  top:auto;
  bottom:14px;
  right:14px;
  left:14px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  pointer-events:none;
}
.game-tools > span {
  color:rgba(255,255,255,.46);
  font:750 8px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.15em;
  text-shadow:0 1px 6px #000;
}

button {
  min-height:38px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:var(--ink);
  background:rgba(10,9,15,.82);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
  cursor:pointer;
  pointer-events:auto;
  font:800 9px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
button:hover, button:focus-visible {
  outline:none;
  transform:translateY(-1px);
  border-color:rgba(174,140,255,.75);
  background:rgba(35,27,52,.9);
}
.expand-icon { color:var(--purple); font-size:16px; line-height:1; }

iframe {
  position:absolute;
  top:-9px;
  right:0;
  bottom:auto;
  left:0;
  width:100%;
  height:calc(100% + 18px);
  border:0;
  background:#050509;
}
.loading {
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:14px;
  color:#8d8894;
  background:var(--panel);
  transition:opacity .45s ease,visibility .45s ease;
  pointer-events:none;
}
.loading.is-hidden { opacity:0; visibility:hidden; }
.loading p {
  margin:0;
  font:750 9px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
}
.pulse {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 24px rgba(174,140,255,.8);
  animation:pulse 1.3s ease-in-out infinite;
}

.credit {
  margin:13px 3px 0;
  color:#625e69;
  font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
}

.game-stage:fullscreen {
  width:100vw;
  height:100vh;
  min-height:0;
  border:0;
  border-radius:0;
  background:#000;
}
.game-stage:fullscreen .game-tools { top:auto; right:16px; bottom:16px; left:16px; }
.game-stage:fullscreen iframe { top:0; height:100%; }

@keyframes pulse { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.12); } }

@media (max-width:700px) {
  .topbar { height:60px; }
  .identity span { display:none; }
  main { padding:12px; }
  .game-stage { height:calc(100dvh - 100px); min-height:440px; border-radius:13px; }
  .game-tools > span { display:none; }
  .button-label { display:none; }
  button { min-width:42px; justify-content:center; padding:0 11px; }
  .credit { line-height:1.5; }
}

@media (prefers-reduced-motion:reduce) {
  .pulse { animation:none; }
  .loading, button { transition:none; }
}