/* COTC POC — image-based navigation only (no real UI logic yet) */
:root{
  --bg:#060b10;
  --stage-max: 540px; /* scales nicely on phones & tablets */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(ellipse at center, #0b1620 0%, var(--bg) 60%, #020407 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
}

/* Maintain the same aspect as the provided screens (393x852) */
.stage{
  position:relative;
  width:min(92vw, var(--stage-max));
  aspect-ratio: 393 / 852;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
}

.screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain; /* keep full image visible */
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none; /* clicks go to hotspots */
}

/* Invisible clickable areas */
.hotspot{
  position:absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Optional: show outlines when you press and hold (debuggable) */
.hotspot:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 2px;
  border-radius: 10px;
}

/* --- Hotspot positions (percent-based for perfect scaling) --- */
/* Character card area (top card) */
.hotspot.card{
  left: 3%;
  top: 2%;
  width: 94%;
  height: 15%;
}

/* Bottom tabs */
.hotspot.tab{
  top: 89%;
  height: 8.5%;
  border-radius: 10px;
}
.hotspot.tab.play{ left: 6%; width: 27%; }
.hotspot.tab.inv{  left: 36.5%; width: 27%; }
.hotspot.tab.shop{ left: 67%; width: 27%; }

/* Small hint label (safe to remove later) */
.hint{
  position:absolute;
  left: 6%;
  right: 6%;
  bottom: 9.5%;
  transform: translateY(-120%);
  font-size: 12px;
  opacity: .0; /* off by default */
  text-align:center;
  letter-spacing:.2px;
}
@media (hover:hover) and (pointer:fine){
  .hint{ opacity:.18; }
}