/* =========================================================
   Jamie’s Pixel Town — stylesheet (v4)
   Replace your entire style.css with this file.
   ========================================================= */

/* --------- Theme tokens --------- */
:root{
  --ink:#523a67;
  --text:#3b3054;
  --bg:#f7f3f8;
  --bubble:#fff7fe;
  --shadow:rgba(0,0,0,.16);
}

/* --------- Base / reset --------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display:grid;
  place-items:center;
  padding:18px;
}

/* --------- Map canvas --------- */
.map-wrap{
  position:relative;
  width:min(1100px,95vw);
  aspect-ratio:3/2;
}
.map{
  width:100%;
  height:100%;
  display:block;
  border-radius:12px;
  image-rendering:pixelated;
  box-shadow:0 10px 30px var(--shadow);
}

/* --------- Building anchors --------- */
.building{
  position:absolute;
  left:calc(var(--x)*1%);
  top:calc(var(--y)*1%);
  width:calc(var(--w)*1%);
  height:auto;
  display:block;
  outline:none;
  z-index:2;

  /* TEMP: keep hit boxes rectangular (prevents clip-path artifacts) */
  clip-path:none !important;
  cursor:pointer;
}
.building img{
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
  pointer-events:none;          /* keep hover on the link */
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

/* Tooltip bubble */
.building::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,-10px);
  background:var(--bubble);
  color:#4a3b63;
  font:700 14px/1 ui-sans-serif,system-ui;
  padding:8px 10px;
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:0 6px 16px var(--shadow);
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
}
.building::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,2px);
  border:8px solid transparent;
  border-top-color:var(--ink);
  opacity:0;
  transition:opacity .15s ease;
}
.building:hover::after,
.building:focus-visible::after,
.building:hover::before,
.building:focus-visible::before{
  opacity:1;
}

/* Hover lift */
@media (hover:hover){
  .building{
    transition:transform .12s ease;
  }
  .building:hover{ transform:translateY(-2px); }
}

/* Keyboard focus ring */
.building:focus-visible{
  outline:3px dashed rgba(82,58,103,.6);
  outline-offset:4px;
}

/* Mobile: widen hit area slightly */
@media (max-width:700px){
  .building{
    transform:translate(-1.5%,-1.5%);
    width:calc(var(--w)*1% + 3%);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .building,
  .building:hover{ transition:none !important; transform:none !important; }
  .building::after, .building::before{ transition:none !important; }
}

/* ---------- Simple inner-page (“coming soon”) styles ---------- */
.page-wrap{
  max-width:900px;
  margin:24px auto;
  padding:0 12px;
  display:grid;
  gap:18px;
}
.page-header{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.back-btn{
  display:inline-block;
  background:var(--bubble);
  color:#4a3b63;
  text-decoration:none;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.back-btn:active{ transform:translateY(1px); box-shadow:0 3px 0 rgba(0,0,0,.08); }

.page-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:12px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  background-image:repeating-linear-gradient(0deg,#f9f4ff 0,#f9f4ff 6px,#fff 6px,#fff 12px);
}
.page-hero img{
  max-width:min(60vw,340px);
  height:auto;
  image-rendering:pixelated;
}
.pixel-card{
  background:#fff;
  border:2px solid var(--ink);
  border-radius:12px;
  padding:16px;
}
.pixel-card h2{ margin:.1rem 0 .6rem 0; }
.soon{
  display:inline-block;
  background:#fff7fe;
  border:2px dashed var(--ink);
  border-radius:10px;
  padding:6px 10px;
  font-weight:800;
}
.meta{ opacity:.7; font-size:.95rem; }
ul.check{ list-style:square; padding-left:1.2rem; margin:.4rem 0; }

/* ---------- Optional debug helper (turn on by adding class 'debug' to <body>) ---------- */
.debug .building{ outline:1px dashed rgba(82,58,103,.35); }
.debug .building:hover{ outline-color:#523a67; }
/* hotspot mode: anchors with explicit height/width */
.building{
  width:calc(var(--w)*1%);
  height:calc(var(--h)*1%);
  clip-path:none !important; /* prevents artifact triangles */
  cursor:pointer;
}
.building img{display:none;} /* no inner sprite needed now */