:root {
  --bg: #aae4ff;
  --ink: #0d183b;
  --ink-strong: rgba(13, 24, 59, 0.92);
  --ink-mid: rgba(13, 24, 59, 0.55);
  --ink-soft: rgba(13, 24, 59, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink-strong);
  font-family: "EB Garamond", "Times New Roman", serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
}

.app {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
}

.title {
  text-align: center;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
}

.title-regular {
  font-style: normal;
}

.title-italic {
  font-style: italic;
}

.status {
  margin: 0;
  min-height: 1.5em;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-mid);
  max-width: 20rem;
}

.compass-wrap {
  width: min(88vw, 20rem);
  aspect-ratio: 1;
  margin-top: 0.5rem;
}

.compass {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ring {
  stroke: var(--ink-strong);
  stroke-width: 1.25;
}

.tick-major {
  stroke: var(--ink-mid);
  stroke-width: 1;
}

.tick-minor {
  stroke: var(--ink-soft);
  stroke-width: 0.75;
}

.label {
  fill: var(--ink-strong);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.hub {
  stroke: var(--ink-strong);
  stroke-width: 1.25;
}

.needle {
  stroke: var(--ink-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}


.orient-btn {
  margin: 0;
  padding: 0.55rem 1.1rem;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  color: var(--ink-strong);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
}

.orient-btn:active {
  opacity: 0.85;
}