:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --accent:#2b7a78;
  --muted:#6b7280;
  --green:#10b981;
  --danger:#ef4444;
}

*{ box-sizing:border-box; }

/* ✅ Page can scroll normally */
html, body{
  margin:0;
  height:auto;
  min-height:100%;
}

body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  overflow-y: auto;
  display: block;

  /* keep content from going under fixed header/footer bars */
  padding-top: calc(var(--bar-h, 0px) + 16px);
  padding-bottom: calc(var(--bar-h, 0px) + 16px);
}

/* ✅ Container: no forced viewport-height squeezing */
#app{
  width: min(720px, 100%);
  margin: 0 auto;
  position: relative;

  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(12,14,20,0.08);

  overflow: visible;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 12px;
}

/* ✅ Game area: keep it nice and big (square-ish), let page scroll instead of squashing */
canvas#game{
  display:block;
  width:100%;

  /* keep proportions pleasant */
  aspect-ratio: 1 / 1;

  /* limits so it doesn't become absurdly tall/short */
  max-height: 720px;
  min-height: 320px;

  height: auto;

  background: linear-gradient(180deg,#ffffff, #f1f5f9);
  touch-action:none;

  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(12,14,20,0.06);
}

/* HUD under the canvas (does not cover it) */
#hud{
  position: relative;
  left:auto;
  right:auto;
  bottom:auto;

  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(4px);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
}

#stats{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}
.stat{ font-size:13px; color:var(--muted); }
.stat span{ font-weight:700; color:var(--accent); margin-left:6px; }

#controls{ display:flex; flex-direction:column; gap:8px; }
button{
  font-size:15px;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:var(--panel);
  color:#0f1724;
  box-shadow:0 3px 8px rgba(12,14,20,0.06);
}
button:active{ transform:translateY(1px); }

.big{
  font-weight:700;
  background:linear-gradient(90deg,var(--accent),#0b998e);
  color:white;
  padding:14px;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(43,122,120,0.18);
}

.row{ display:flex; gap:8px; flex-wrap: wrap; }

/* Toasts float above the game area */
#toasts{
  position:absolute;
  left:12px;
  top: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:calc(100% - 24px);
  z-index: 30;
}

.toast{
  background:#111827;
  color:white;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  opacity:0.95;
}

@media (orientation:landscape){
  /* In landscape, allow a slightly smaller minimum so it fits */
  canvas#game{ min-height: 240px; }
}

/* Omega button styling */
.omega-btn{
  background: linear-gradient(90deg,#f97316,#ef4444);
  color:white;
  padding:10px 12px;
  border-radius:12px;
  box-shadow: 0 8px 24px rgba(239,68,68,0.2), 0 0 30px rgba(249,115,22,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  font-weight:800;
  letter-spacing:0.6px;
  transform-origin:center;
}
.omega-btn:hover{ transform: translateY(-3px) scale(1.02); transition: transform 160ms ease; }

/* Background-positioned My PC button variant */
.bg-omega{
  position: absolute;
  right: 18px;
  bottom: 120px;
  z-index: 6;
  opacity: 0.16;
  pointer-events: auto;
  font-size: 14px;
  padding: 12px 14px;
  transition: opacity 180ms ease, transform 140ms ease;
  backdrop-filter: blur(4px);
}
.bg-omega:hover{
  opacity: 1;
  transform: translateY(-4px) scale(1.02);
}

/* cutscene and final overlay styles */
#cutscene { background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.22)); z-index:40; }
#cutscene [class] { z-index:41; }
#finalOverlay { z-index:50; display:flex; background:rgba(0,0,0,0.4); }
#finalOverlay[aria-hidden="true"]{ display:none; }

/* Anti-autoclick overlay styling */
#anticlick{ display:none; }
#anticlick[data-visible="true"]{
  display:flex;
  background: #000;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: auto;
}

#anticlick > div{
  min-width: 100%;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #000;
  color: #fff;
  border-radius: 0;
  padding: 0;
}

/* Back to hub button */
.backBtn{
  position: fixed;
  left: 14px;
  top: calc(var(--bar-h, 0px) + 14px);
  z-index: 2147483647;

  background: rgba(0,0,0,.35);
  color: #fff;
  text-decoration: none;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);

  font-weight: 700;
  backdrop-filter: blur(8px);
}

.backBtn:hover{
  background: rgba(0,0,0,.50);
}