@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --sky: #B9A6F0;
  --sky-deep: #8B6FE0;
  --sun: #FFD966;
  --river: #8FE0C0;
  --asphalt: #4A3F3B;
  --cloud: #FFF8EC;
  --coral: #FFAAB8;
  --line: #F0E6D8;
  --ink: #454545;
  --chiikawa-blue: #6FC8E8;
  --radius: 26px;
}

*{box-sizing:border-box;}
html{
  background:
    radial-gradient(420px 420px at 100% 0%, rgba(255,217,102,0.30), transparent 70%),
    radial-gradient(460px 460px at -5% 25%, rgba(255,170,184,0.25), transparent 70%),
    radial-gradient(560px 560px at 100% 100%, rgba(185,166,240,0.30), transparent 70%),
    var(--cloud);
  min-height:100%;
}
body{
  margin:0;
  color:var(--asphalt);
  font-family:'Manrope',sans-serif;
  padding:18px 14px 100px;
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  -webkit-tap-highlight-color:transparent;
}

.error-text{
  text-align:center;
  padding:16px 4px 0;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--coral);
  min-height:0;
}
.error-text:empty{ display:none; }

.card-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.card-grid-small{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.station-card{
  background:#fff;
  border-radius:var(--radius);
  padding:16px;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  position:relative;
  cursor:pointer;
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.station-card:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.station-card:not(.featured){ padding:25px 16px; }
.station-card .site-name{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px; margin-bottom:5px; text-align:center; }
.station-card:not(.featured) .site-name{
  min-height:2.6em; line-height:1.3;
  display:flex; align-items:center; justify-content:center;
}
.station-card:not(.featured) .site-name span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.station-card .site-sub{ font-size:12px; color:#9A8C7E; margin-bottom:12px; text-align:center; }
.station-card .site-dist{ color:var(--sky-deep); font-weight:700; }

.station-card.featured{
  padding:48px 32px 32px;
  cursor:default;
  background:#fff;
  box-shadow:6px 6px 0 var(--ink);
}
.station-card.featured:active{ transform:none; box-shadow:6px 6px 0 var(--ink); }
.station-card.featured .site-name{ font-size:24px; }
.station-card.featured .site-sub{ font-size:17px; }

.compass-arrow{
  position:absolute;
  top:50%; left:50%;
  width:60px; height:90px;
  margin:-45px 0 0 -30px;
  transition:transform 0.15s ease-out;
  z-index:3;
}
.compass-arrow svg{ width:100%; height:100%; }
.compass-arrow path{ fill:var(--line); }
.compass-arrow.active path{ fill:var(--chiikawa-blue); }

.compass-modal-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(43,58,66,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:60;
}
.compass-modal{
  position:relative;
  background:#fff;
  border-radius:var(--radius);
  padding:36px 28px 28px;
  max-width:320px;
  width:100%;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
.compass-modal-title{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:1.7;
  text-align:center;
  margin-bottom:20px;
}
.compass-modal-body{
  font-size:15px;
  line-height:1.6;
  color:#6B5F55;
  text-align:center;
  margin-bottom:20px;
}
.compass-modal-actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
}
.compass-modal-btn{
  flex:1;
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.compass-modal-cancel{
  background:#fff;
  color:var(--asphalt);
}
.compass-modal-confirm{
  background:var(--chiikawa-blue);
  color:var(--asphalt);
}
.compass-modal-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.dial-wrap{ text-align:center; }
.dial{
  width:80px; height:80px;
  border-radius:50%;
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.dial .ring-svg{ position:absolute; top:0; left:0; width:80px; height:80px; z-index:5; }
.dial .ring-bg{ stroke:var(--line); }
.dial .ring-val{ transition:stroke-dashoffset 0.5s ease, stroke 0.3s ease; }
.dial .num{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:20px;
  position:relative;
  z-index:10;
}
.dial.large{ width:164.7059px; height:164.7059px; margin:100px auto; }
.dial.large .ring-svg{ width:164.7059px; height:164.7059px; }
.dial.large .ring-bg, .dial.large .ring-val{ stroke-width:9.7143; }
.dial.large .num{ font-size:40px; }
.station-card.featured .dial-wrap{
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
}
footer{
  text-align:center;
  padding:28px 0 0;
  font-size:11px;
  color:#8098A3;
  font-family:'JetBrains Mono',monospace;
}

.fab-stack{
  position:fixed;
  right:18px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:50;
}
.fab-btn{
  width:52px;
  height:52px;
  border-radius:50%;
  border:3px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  color:var(--asphalt);
  cursor:pointer;
  background:var(--sun);
  transition:transform 0.1s ease;
}
.fab-btn.fab-compass{
  background:var(--chiikawa-blue);
}
.fab-btn:active{ transform:scale(0.9); }
.fab-btn.active{ box-shadow:0 0 0 3px #fff; }

.pull-indicator{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top, 0px));
  left:50%;
  width:40px;
  height:40px;
  margin-left:-20px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--sky-deep);
  opacity:0;
  transform:translateY(-40px);
  transition:none;
  z-index:70;
  pointer-events:none;
}
.pull-indicator.ready{ color:var(--sun); }
.pull-indicator.spinning i{ animation:pull-spin 0.7s linear infinite; }
@keyframes pull-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }