:root {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #081426;
  color: #e8eef7;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
}

/* -----------------------------
   Cards: premium depth + glass
----------------------------- */

.card {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 14px;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: radial-gradient(
    120% 85% at 18% 0%,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 60%
  );

  opacity: 0.8;
}

.card:active {
  transform: scale(0.992);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#tideCard.card {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


.hours-mode-card {
  padding: 10px 12px;
  cursor: pointer;
}

.hours-mode-card:active {
  transform: scale(0.992);
}

.hours-mode-card .pill {
  white-space: nowrap;
}

/* -----------------------------
   Layout utilities
----------------------------- */

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.spacer {
  height: 12px;
}

.small {
  font-size: 12px;
}

.muted {
  color: rgba(232, 238, 247, 0.72);
}

.muted.small {
  color: rgba(232, 238, 247, 0.66);
}

.big {
  font-size: 34px;
  font-weight: 800;
}

h1, h2, h3 {
  margin: 0;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; }

/* -----------------------------
   Lists + tiles
----------------------------- */

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tilegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tile {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.035)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* -----------------------------
   Pills
----------------------------- */

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.pill.excellent {
  background: rgba(0, 200, 120, 0.20);
  border: 1px solid rgba(0, 200, 120, 0.35);
}

.pill.good {
  background: rgba(80, 140, 255, 0.20);
  border: 1px solid rgba(80, 140, 255, 0.35);
}

.pill.ok {
  background: rgba(255, 170, 0, 0.18);
  border: 1px solid rgba(255, 170, 0, 0.35);
}

.pill.poor {
  background: rgba(255, 80, 80, 0.18);
  border: 1px solid rgba(255, 80, 80, 0.35);
}

.pill.avoid {
  background: rgba(140, 140, 140, 0.20);
  border: 1px solid rgba(140, 140, 140, 0.35);
}

/* -----------------------------
   Footer bar
----------------------------- */

.footerbar {
  position: sticky;
  bottom: 0;
  background: rgba(8, 20, 38, 0.90);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
}

.footerbar .row {
  max-width: 420px;
  margin: 0 auto;
}

/* -----------------------------
   Buttons
----------------------------- */

.btn {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 10px 12px;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.btn:active {
  transform: scale(0.992);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* -----------------------------
   Splash screen
----------------------------- */

.splash {
  position: fixed;
  inset: 0;
  background: #081426;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.splash-logo {
  width: 200px;
  max-width: 70%;
  height: auto;
  opacity: 0;
  animation: splashFadeIn 260ms ease forwards;
}

@keyframes splashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-hide {
  opacity: 0;
  transition: opacity 280ms ease;
}

/* -----------------------------
   Branding
----------------------------- */

.logo-horz {
  height: 30px;
  max-width: 220px;
  width: auto;
  display: block;
  margin-bottom: 6px;
}

@media (min-width: 480px) {
  .logo-horz { height: 36px; }
}

.topbar-spacer { height: 56px; }

.topbar {
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -----------------------------
   Location bar
----------------------------- */

.location-bar {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;

  color: rgba(232, 238, 247, 0.95);
  font-size: 14px;
  font-weight: 700;

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  cursor: pointer;

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.location-bar:active { transform: scale(0.992); }

.location-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.location-label {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-pin {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.9;
  color: rgba(232, 238, 247, 0.85);
  display: block;
  transform: translateY(0.5px);
}

/* -----------------------------
   Settings segmented controls
----------------------------- */

.segmented { display: flex; gap: 8px; }

.segbtn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(232, 238, 247, 0.9);
}

.segbtn.active {
  background: rgba(80, 140, 255, 0.22);
  border: 1px solid rgba(80, 140, 255, 0.45);
}

/* -----------------------------
   Hourly columns (mini-card look)
----------------------------- */

/* -----------------------------
   Hourly mini-cards (no header)
----------------------------- */

.hourly-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

.hourly-row {
  display: grid;
  grid-template-columns: 56px 1fr 68px;
  gap: 10px;
  align-items: start;
}

.hourly-time b {
  font-size: 20px;
  letter-spacing: 0.2px;
}

/* Middle block */
.hourly-mid {
  min-width: 0;
}

.hourly-line1,
.hourly-line2 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hourly-line2 {
  margin-top: 8px;
}

/* Metric rows */
.hourly-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hourly-metric .val {
  font-weight: 800;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.bracket {
  font-size: 0.85em;
  opacity: 0.7;
  font-weight: 600;
}

/* SVG sizing fixes */
.hourly-metric svg {
  width: 16px;
  height: 16px;
}

/* Score badge */
.hourly-score {
  text-align: right;
}

.hourly-score-badge {
  display: inline-flex !important;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  padding: 0 !important;
}



/* -----------------------------
   Score-toned cards
----------------------------- */

.card.tone-excellent {
  background: linear-gradient(180deg, rgba(0, 200, 120, 0.22), rgba(0, 200, 120, 0.14));
  border: 1px solid rgba(0, 200, 120, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(0, 200, 120, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.card.tone-good {
  background: linear-gradient(180deg, rgba(80, 140, 255, 0.22), rgba(80, 140, 255, 0.14));
  border: 1px solid rgba(80, 140, 255, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(80, 140, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.card.tone-ok {
  background: linear-gradient(180deg, rgba(255, 170, 0, 0.20), rgba(255, 170, 0, 0.12));
  border: 1px solid rgba(255, 170, 0, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 170, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.card.tone-poor {
  background: linear-gradient(180deg, rgba(255, 80, 80, 0.20), rgba(255, 80, 80, 0.12));
  border: 1px solid rgba(255, 80, 80, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 80, 80, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.card.tone-avoid {
  background: linear-gradient(180deg, rgba(140, 140, 140, 0.20), rgba(140, 140, 140, 0.12));
  border: 1px solid rgba(140, 140, 140, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(140, 140, 140, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* -----------------------------
   Today + Best card UI
----------------------------- */

/* Title: big, mixed case, not bold */
.today-title{
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: rgba(232,238,247,0.95);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  margin-bottom: 6px;

  /* prevent title from running under the badge */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* IMPORTANT: prevent grid overlap on mobile by allowing left column to shrink */

.today-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px; /* was 120px (or 1fr 120px) */
  gap: 14px;
  align-items: stretch;
}

.today-left,
.best-left{
  min-width: 0; /* critical to prevent text overlapping the badge column */
}

.today-spacer-tight{ height: 8px; }

.today-headline{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: rgba(232,238,247,0.98);
}

.today-headline-strong{
  font-weight: 800;
  color: rgba(232, 238, 247, 1);
}

.today-section-title{
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(232,238,247,0.70);
}

.today-footer{
  font-size: 11px;
  color: rgba(232, 238, 247, 0.60);
  line-height: 1.25;
}

/* 2x2 chips */
.today-chips{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Rounder, slightly more opaque chips + centered content */
.today-chip{
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 10px 10px;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.today-chip-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
  text-align: center;

  color: rgba(232, 238, 247, 0.70);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.today-chip-top svg{
  width: 14px;
  height: 14px;
  opacity: 0.95;
}

.today-chip-value{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.1;

  min-height: 18px;
}

.today-chip-main{
  font-size: 12px;
  font-weight: 800;
  color: rgba(232, 238, 247, 0.96);
}

.today-chip-sub{
  font-size: 12px;
  font-weight: 700;
  color: rgba(232, 238, 247, 0.78);
}

.today-chip-feels{
  font-size: 11px;
  font-weight: 700;
  color: rgba(232, 238, 247, 0.72);
  white-space: nowrap;
}

/* Condition chip: icon + words, centered */
.today-chip--cond{
  display: flex;
  align-items: center;
  justify-content: center;
}

.today-chip-cond{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 12px;
  font-weight: 800;
  color: rgba(232, 238, 247, 0.96);
  text-transform: lowercase;
  line-height: 1.1;
  text-align: center;
}

.today-chip-cond svg{
  width: 18px;
  height: 18px;
  opacity: 0.95;
}

/* Right column */
.today-score-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.today-score-stack{
  width: 120px;
  max-width: 120px;
  text-align: center;

  /* IMPORTANT: no global vertical shift (it caused Best card overlap) */
  transform: none;
}

/* If you want the badge lifted ONLY on the Today card, scope it here */
#tideCard .today-score-stack{
  transform: translateY(-40px);
}

.today-score-label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(232,238,247,0.70);
}

.today-score-word{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(232,238,247,0.94);
  line-height: 1.1;
}

/* 3D number circle */
.today-score-circle{
  width: 84px;
  height: 84px;
  margin: 10px auto 0 auto;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.42),
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -10px 18px rgba(0,0,0,0.22);

  position: relative;
}

.today-score-circle::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    70% 60% at 30% 25%,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
  opacity: 0.95;
}

.today-score-circle::after{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0.55;
  filter: blur(6px);
  background: radial-gradient(
    60% 60% at 50% 40%,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0) 70%
  );
}

.today-score-num{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(232,238,247,1);
  transform: translateY(1px);
}

/* Circle tone backgrounds */
.today-score-circle.tone-excellent{ background: rgba(0,200,120,0.70); border-color: rgba(0,200,120,0.44); }
.today-score-circle.tone-good{      background: rgba(80,140,255,0.70); border-color: rgba(80,140,255,0.44); }
.today-score-circle.tone-ok{        background: rgba(255,170,0,0.70); border-color: rgba(255,170,0,0.44); }
.today-score-circle.tone-poor{      background: rgba(255,80,80,0.70); border-color: rgba(255,80,80,0.44); }
.today-score-circle.tone-avoid{     background: rgba(140,140,140,0.72); border-color: rgba(140,140,140,0.44); }

/* -----------------------------
   Best day this week card
----------------------------- */

.best-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px; /* match today */
  gap: 14px;
  align-items: stretch;
}


.best-dayline{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(232,238,247,0.98);
  line-height: 1.2;

  overflow-wrap: anywhere;
}

.best-subtle{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(232,238,247,0.66);
}

.best-week-message{
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: rgba(232,238,247,0.95);
  line-height: 1.25;
  padding: 8px 2px;
  text-align: center;
}

.time-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
}

.window-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.window-row .pill {
  font-weight: 700;
}


.tone-poor {
  background: linear-gradient(180deg, rgba(255, 80, 80, 0.20), rgba(255, 80, 80, 0.12));
  border: 1px solid rgba(255, 80, 80, 0.38);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 80, 80, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


/* -----------------------------
   Mobile guardrails (prevents overlap on very small screens)
----------------------------- */


@media (max-width: 420px){
  .today-grid,
  .best-grid{
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
  }

  .today-score-stack{
    width: 96px;
    max-width: 96px;
  }

  .today-score-circle{
    width: 68px;
    height: 68px;
  }

  .today-score-num{
    font-size: 28px;
  }

  /* keep Today badge lift, but reduce it slightly on phones */
  #tideCard .today-score-stack{
    transform: translateY(-75px);
  }
  
  #bestCard .today-score-stack{
    transform: translateY(-20px);
  }
}

}