/* =====================================================================
   Lightly-Salted — shared game-page shell.
   One template for every game domain (r22r, martin, pachinko, …) so they
   all frame the game the same way and match lightly-salted.com.
   Load: <link rel="stylesheet" href="https://assets.lightly-salted.com/game-shell.css">
   Structure: body.lsg > header.lsg-header + main.lsg-stage + footer.lsg-footer
   ===================================================================== */
@font-face { font-family:"IBM Plex Mono"; src:url("https://assets.lightly-salted.com/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("https://assets.lightly-salted.com/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("https://assets.lightly-salted.com/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"VT323"; src:url("https://assets.lightly-salted.com/fonts/VT323-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --lsg-bg:#0e0d11; --lsg-panel:#141216; --lsg-ink:#ece6db; --lsg-muted:#a59b8d;
  --lsg-line:#322f3b; --lsg-gold:#daa520; --lsg-gold-2:#e8bb45;
  --lsg-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lsg-term:"VT323",var(--lsg-mono);
}
*,*::before,*::after { box-sizing:border-box; }
html { height:100%; }
body.lsg {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--lsg-bg); color:var(--lsg-ink);
  font-family:var(--lsg-mono); -webkit-font-smoothing:antialiased;
}
body.lsg a { color:var(--lsg-gold-2); text-decoration:none; }
body.lsg a:hover { color:var(--lsg-ink); }
body.lsg :focus-visible { outline:2px solid var(--lsg-gold-2); outline-offset:3px; }

/* Header */
.lsg-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 1.1rem; background:color-mix(in srgb,var(--lsg-panel),transparent 4%);
  border-bottom:1px solid var(--lsg-line); position:sticky; top:0; z-index:5;
}
.lsg-brand { display:inline-flex; align-items:center; flex-shrink:0; }
.lsg-brand img { height:30px; width:auto; display:block; }
.lsg-title {
  flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--lsg-term); font-size:1.7rem; line-height:1; color:var(--lsg-gold); letter-spacing:.02em;
}
.lsg-back { flex-shrink:0; font-size:.82rem; letter-spacing:.02em; color:var(--lsg-muted); }
.lsg-back:hover { color:var(--lsg-gold); }

/* Stage — holds the game (canvas / emulator / iframe), centered */
.lsg-stage {
  flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; padding:1.2rem 1rem;
}
.lsg-stage canvas, .lsg-stage iframe { max-width:100%; }
.lsg-stage iframe { border:0; }
.lsg-stage #javatari-screen { box-shadow:0 12px 44px rgba(0,0,0,.6); }
.lsg-hint { color:var(--lsg-muted); font-size:.82rem; text-align:center; max-width:64ch; line-height:1.5; }
.lsg-btn {
  font-family:var(--lsg-mono); font-size:.82rem; color:#17130a; background:var(--lsg-gold);
  border:1px solid var(--lsg-gold); border-radius:999px; padding:.5em 1.1em; cursor:pointer;
  transition:background .2s,border-color .2s;
}
.lsg-btn:hover { background:var(--lsg-gold-2); border-color:var(--lsg-gold-2); }

/* Footer */
.lsg-footer {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem;
  padding:.7rem 1.1rem; border-top:1px solid var(--lsg-line); color:var(--lsg-muted); font-size:.76rem;
}

@media (max-width:560px) {
  .lsg-title { font-size:1.25rem; }
  .lsg-brand img { height:24px; }
  .lsg-back { font-size:.74rem; }
}