:root{
  --canvas-width:440;
  --canvas-height:956;
  --canvas-scale:1;--frame-width:440px;--frame-height:956px;
  --visual-width:440px;
  --visual-height:956px;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#081334;
}
body{
  position:fixed;
  inset:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.viewport-shell{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#081334;
  isolation:isolate;
}
.ambient-backdrop{
  position:absolute;
  inset:-36px;
  z-index:-2;
  background:
    linear-gradient(rgba(4,10,31,.42),rgba(4,10,31,.62)),
    url("assets/temple-of-zeus-hero-v2.webp") center/cover no-repeat;
  filter:blur(24px) saturate(.9) brightness(.72);
  transform:scale(1.08);
}
.viewport-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,221,116,.12),transparent 38%),
    linear-gradient(90deg,rgba(2,7,24,.52),transparent 30% 70%,rgba(2,7,24,.52));
}
.canvas-mount{
  position:relative;
  width:var(--visual-width);
  height:var(--visual-height);
  flex:none;
  overflow:visible;
  filter:drop-shadow(0 0 22px rgba(0,0,0,.62));
}
.game-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--frame-width);
  height:var(--frame-height);
  margin:0;
  border:0;
  display:block;
  background:#101d49;
  transform:translate(-50%,-50%) scale(var(--canvas-scale));
  transform-origin:center center;
}
@media (prefers-reduced-motion:reduce){
  .ambient-backdrop{filter:blur(24px) saturate(.9) brightness(.72)}
}

:root[data-layout="phone"] .canvas-mount{filter:none}
:root[data-layout="phone"] .ambient-backdrop{display:none}