@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@600;800&display=swap');

:root{
  --ink:#3E2F28;
  --grass:#AEDBB4;
  --grass-dark:#93C99B;
  --sun:#FFE29A;
  --coral:#FF9E8A;
  --card:#FFF6EC;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  font-family:'Nunito', sans-serif;
  color:var(--ink);
  -webkit-user-select:none; user-select:none;
  background:var(--grass);
}

#viewport{
  position:relative;
  width:100vw; height:100vh;
  overflow:hidden;
}

#world{
  position:absolute; top:0; left:0;
  background:
    radial-gradient(circle at 30% 20%, var(--grass) 0%, var(--grass) 45%, var(--grass-dark) 100%);
  will-change: transform;
}
#world::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 3px, transparent 3px);
  background-size: 60px 60px;
  pointer-events:none;
}

.deco{ position:absolute; pointer-events:none; z-index:2; }
.deco img{ display:block; }
.hub-sign{ transform:translate(-50%,-92%) scale(1.1); z-index:3; }

.station{
  position:absolute;
  width:150px;
  transform:translate(-50%,-100%);
  text-align:center;
  z-index:5;
  cursor:pointer;
}
.station .icon-wrap{
  width:92px; height:92px;
  margin:0 auto;
  border-radius:50%;
  border:3.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(35,35,35,0.18);
  transition: transform 0.15s ease;
}
.station .icon-wrap img{ width:56px; height:56px; object-fit:contain; }
.station .icon-wrap.photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.station:hover .icon-wrap{ transform: translateY(-3px) scale(1.04); }
.station.in-range .icon-wrap{ animation: bounce 0.7s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

.station-label{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:18px;
  margin-top:6px;
  color:#fff;
  -webkit-text-stroke: 1.8px var(--ink);
  paint-order: stroke fill;
}
.prompt-bubble{
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  background:var(--coral); color:#fff;
  border:2.5px solid var(--ink); border-radius:16px;
  padding:4px 12px;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:15px;
  white-space:nowrap;
  opacity:0; transition:opacity 0.2s ease;
}
.station.in-range .prompt-bubble{ opacity:1; }

#character{
  position:absolute;
  width:52px; height:84px;
  transform:translate(-50%,-88%);
  z-index:10;
  pointer-events:none;
}
#character img{ width:100%; height:100%; display:block; object-fit:contain; }
#character.walking{ animation: bob 0.35s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translate(-50%,-88%); }
  50%{ transform:translate(-50%,-92%); }
}
#character.flip img{ transform:scaleX(-1); }

#hud{
  position:fixed; top:16px; left:16px; z-index:100;
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:24px;
  padding:14px 20px;
  max-width:280px;
  box-shadow: 0 4px 12px rgba(35,35,35,0.15);
}
#hud h1{ font-family:'Fredoka', sans-serif; font-size:22px; margin:0 0 4px; color:var(--coral); }
#hud p{ margin:0; font-size:14px; line-height:1.35; font-weight:600; }
#hud .key{
  display:inline-block; border:2px solid var(--ink); border-radius:8px;
  padding:0 6px; font-family:'Fredoka',sans-serif; font-weight:700; background:#fff;
}

#touchpad{
  position:fixed; bottom:20px; right:20px; display:none;
  grid-template-columns:58px 58px 58px; grid-template-rows:58px 58px 58px;
  gap:6px; z-index:100;
}
@media (pointer:coarse){ #touchpad{ display:grid; } }
#touchpad button{
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:20px;
  border:2.5px solid var(--ink); border-radius:16px; background:var(--card);
  box-shadow: 0 3px 8px rgba(35,35,35,0.18);
}
#tp-up{grid-column:2; grid-row:1;}
#tp-left{grid-column:1; grid-row:2;}
#tp-act{grid-column:2; grid-row:2; background:var(--sun);}
#tp-right{grid-column:3; grid-row:2;}
#tp-down{grid-column:2; grid-row:3;}

#overlay{
  position:fixed; inset:0; background:rgba(62,47,40,0.45);
  display:none; align-items:center; justify-content:center; z-index:200;
}
#overlay.open{ display:flex; }
#modal{
  width:min(480px, 88vw);
  background:var(--card);
  border:4px solid var(--ink);
  border-radius:28px;
  padding:28px 30px 26px;
  position:relative;
  box-shadow: 0 8px 20px rgba(35,35,35,0.2);
}
#modalBadge{
  position:absolute; top:-30px; left:30px;
  width:64px; height:64px; border-radius:50%;
  border:3.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
#modalBadge img{ width:36px; height:36px; object-fit:contain; }
#modalBadge.photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
#modal h2{ font-family:'Fredoka', sans-serif; font-size:30px; margin:16px 0 4px; color:var(--coral); }
.status-badge{
  display:inline-block; font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:0.3px; text-transform:uppercase;
  border:2px solid var(--ink); border-radius:20px;
  padding:3px 11px; background:var(--sun);
}
#modal .tags{ margin:8px 0 14px; }
#modal .tag{
  display:inline-block; font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:13px; border:2px solid var(--ink); border-radius:20px;
  padding:2px 12px; margin:2px 4px 0 0; background:#fff;
}
#modal p.desc{ font-size:16px; line-height:1.5; font-weight:600; margin:0 0 20px; }
#modal a.view-btn{
  font-family:'Fredoka', cursive; font-weight:700; font-size:17px;
  text-decoration:none; color:var(--ink);
  border:2.5px solid var(--ink); border-radius:14px;
  padding:8px 18px; background:var(--sun);
  box-shadow: 0 3px 8px rgba(35,35,35,0.18);
  display:inline-block;
}
#modal a.view-btn.disabled{ opacity:0.5; pointer-events:none; }
#modal a.plain-link{
  font-family:'Fredoka', cursive; font-weight:700; font-size:17px;
  text-decoration:underline; color:var(--ink);
  border:none; border-radius:0; padding:0; background:none;
  box-shadow:none; display:inline-block;
}
#modal a.plain-link.disabled{ opacity:0.5; pointer-events:none; }
#closeBtn{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; border-radius:50%;
  border:2.5px solid var(--ink); background:#fff;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; line-height:1;
  cursor:pointer;
}

/* paper grain overlay, ties everything together */
#paperGrain{
  position:fixed; inset:0; z-index:50;
  pointer-events:none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGZpbHRlciBpZD0iZ3JhaW4iPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODUiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwLjUgMC41IDAuNSAwIDAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsdGVyPSJ1cmwoI2dyYWluKSIvPgo8L3N2Zz4K");
  background-size: 300px 300px;
  opacity:0.06;
  mix-blend-mode: multiply;
}