:root {
  --navy: #0b2545;
  --sea: #13a4a4;
  --sand: #f4efe6;
  --coral: #ff6b57;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  padding: 0 14px env(safe-area-inset-bottom) 14px;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--sand);
  color: var(--navy);
  max-width: 560px;
  margin-inline: auto;
}
header { padding: 14px 0 6px; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: .01em; }
h2 { margin: 0 0 6px; font-size: 1.4rem; }
.how { margin: 4px 0 0; font-size: .88rem; opacity: .75; }
#bar { margin: 10px 0 6px; font-size: .95rem; }
#scene {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  background: linear-gradient(180deg, #dff0ef, #bfe0e0);
  border: 2px solid var(--navy);
  border-radius: 12px;
  touch-action: manipulation;
}
#scene .boat { cursor: pointer; }
#scene text { text-anchor: middle; font-family: inherit; fill: var(--navy); }
#scene .lbl { font-size: 7px; font-weight: 700; }
#scene .sub { font-size: 3.6px; }
#scene .wind { font-size: 4px; fill: var(--sea); font-weight: 700; letter-spacing: .1em; }
#pick { display: flex; gap: 10px; margin: 10px 0; }
#pick .big { flex: 1; }
.big {
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
}
.big:active { background: var(--sea); }
#fb, #done { margin: 10px 0 20px; }
#fbv { margin: 0 0 4px; font-weight: 700; font-size: 1.1rem; }
#fbv.right { color: #0a7d55; }
#fbv.wrong { color: var(--coral); }
#fbr { margin: 0 0 12px; }
.grid { font-size: 1.6rem; letter-spacing: .12em; margin: 6px 0; }
#fallback { width: 100%; font: inherit; margin-top: 8px; }
footer { padding: 12px 0 22px; border-top: 1px solid rgba(11, 37, 69, .18); }
footer a { color: var(--sea); font-weight: 600; text-decoration: none; }