:root {
  --bg-top: #031526;
  --bg-bottom: #0f355a;
  --glass: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --text: #f4f9ff;
  --text-muted: #bfd3e8;
  --success-bg: #d7f8e2;
  --success-text: #0f4b2c;
  --warning-bg: #ffecc7;
  --warning-text: #7a4a00;
  --error-bg: #ffd8d8;
  --error-text: #8e1313;
}

* {
  box-sizing: border-box;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  min-height: 100vh;
}

.container {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 0.65rem;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto repeat(4, minmax(62px, auto));
  gap: 0.55rem;
}

.header,
.currentPanel,
.tide {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.header {
  text-align: center;
  background: var(--glass);
  color: var(--text);
  padding: 0.65rem 0.75rem;
  backdrop-filter: blur(8px);
  min-height: 112px;
}

.titleLocation {
  margin: 0;
  font-size: clamp(1.2rem, 3.6vw, 1.8rem);
}

.titleDate {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: clamp(0.88rem, 2.8vw, 1.05rem);
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0 0.35rem;
}

.statusFooter {
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  display: inline-block;
  font-size: 0.82rem;
  min-height: 1.8rem;
}

.statusFooter.info { background: #e3f2fd; color: #0f2740; }
.statusFooter.success { background: var(--success-bg); color: var(--success-text); }
.statusFooter.warning { background: var(--warning-bg); color: var(--warning-text); }
.statusFooter.error { background: var(--error-bg); color: var(--error-text); }

.currentPanel {
  background: rgba(4, 31, 56, 0.54);
  padding: 0.6rem;
  text-align: center;
  min-height: 220px;
}

.currentLabel {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1rem, 3.5vw, 1.5rem);
}

.gaugeWrap {
  width: min(100%, 340px);
  margin: 0.3rem auto 0;
}

.bubbleRow {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
}

.infoBubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: clamp(0.82rem, 2.4vw, 0.95rem);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.infoBubblePrimary {
  color: #0f2740;
  background: linear-gradient(135deg, #e5f7ff, #c3ecff);
}

#canvasElement {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
}

.tide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
}

.t1 { background: linear-gradient(135deg, #005a85, #007eb8); }
.t2 { background: linear-gradient(135deg, #196d90, #2898c7); }
.t3 { background: linear-gradient(135deg, #1a7bc0, #24a7ec); }
.t4 { background: linear-gradient(135deg, #dfeff7, #f3f9ff); color: #112; }

.spanTime {
  font-size: clamp(0.92rem, 2.8vw, 1.08rem);
  font-weight: 600;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
  text-align: center;
}

.weatherBadge {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.92;
}

.tide.is-active {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: -2px;
  background: linear-gradient(135deg, #ffd07f, #ffaf4d);
  color: #12263a;
}

@media (max-width: 640px) {
  .container {
    padding: 0.55rem;
    gap: 0.45rem;
  }

  .header,
  .currentPanel,
  .tide {
    border-radius: 0.85rem;
  }

  .currentPanel {
    min-height: 200px;
  }
}