:root{
  --bg1:#0b1020;
  --bg2:#070812;
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --radius:18px;
}

html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 12%, rgba(128,90,213,.22), transparent 60%),
    radial-gradient(1100px 650px at 85% 18%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* prevent Unity from escaping */
.shell{min-height:100%;display:flex;flex-direction:column;position:relative;isolation:isolate}
.topbar{position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.brand{display:flex;align-items:center;gap:12px}
.mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  font-weight:800;
  background:linear-gradient(180deg, rgba(128,90,213,.60), rgba(128,90,213,.18));
}
.title{font-weight:800}
.sub{font-size:12px;color:var(--muted)}

.actions{display:flex;gap:10px;align-items:center}
.pill{
  padding:8px 10px;border-radius:999px;font-size:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
.btn{
  padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  color:white;cursor:pointer;
}

.content{
  width:min(1320px,100%);
  margin:auto;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px;
  flex:1;
  position:relative;
  z-index:10;
}

.game-stage{
  position:relative;
  z-index:10;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Frame size is controlled by JS (real width/height, not transform) */
.game-frame{
  width:960px;
  height:600px;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
}

/* Keep Unity inside frame; don't mess with overlay positioning */
.game-frame #unity-container{
  width:100% !important;
  height:100% !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
}
.game-frame #unity-canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Ensure loading/warning/footer draw above canvas but still clipped by frame */
.game-frame #unity-loading-bar,
.game-frame #unity-warning,
.game-frame #unity-footer{
  z-index:5 !important;
}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:14px;position:relative;z-index:20}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px;
}
.card h2{margin:0 0 8px;font-size:14px}
.card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.card.small p{font-size:12px}

.footer{
  display:flex;justify-content:space-between;
  padding:10px 16px;
  border-top:1px solid var(--stroke);
  font-size:12px;
  background:rgba(0,0,0,.14);
  position:relative;
  z-index:50;
}
.muted{color:var(--muted)}

@media (max-width: 1200px){
  .content{grid-template-columns:1fr}
}