:root{color-scheme:dark;--bg:var(--c0e823a7bc,#020711);--text:var(--cca9a18787,#eefcff);--muted:var(--c24511f4c4,#86a8bc);--cyan:var(--cea311be10,#74f0ff);--line:var(--c956809d06,rgba(116,240,255,.22))}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:18px;font:14px/1.45 "Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(ellipse at 15% 0,var(--c9ceaec6c8,rgba(28,135,203,.22)),transparent 40%),linear-gradient(155deg,var(--c0e823a7bc,#020711),var(--cc032784d7,#06182a) 56%,var(--c0e823a7bc,#020711))}
.shell{max-width:1480px;margin:auto;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--c6f5ce4a06,#030f1d);box-shadow:0 24px 80px var(--c4f66a5c7e,#0006)}
.masthead{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding:18px 28px;background:var(--cf3cb8ad0f,#00000b);border-bottom:1px solid var(--line)}
.masthead img{display:block;width:clamp(192px,24vw,283.2px);height:auto;border-radius:4px}
.mast-copy{padding-left:clamp(20px,3vw,36px);border-left:1px solid var(--line)}
h1{font-size:clamp(21px,2.25vw,34px);font-weight:950;line-height:1.08;letter-spacing:.02em;margin:0}
.masthead p{margin:5px 0 0;color:var(--c610b5cadc,#9bc4d8);font-size:13px}
.content{display:grid;gap:14px;padding:16px 18px 18px}
.map-frame{position:relative;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--c2077ef76a,#245c70);isolation:isolate}
#map{height:clamp(420px,68vh,760px);background:var(--caea270566,#246477);color:var(--c87b93930a,#153846);font-family:inherit;z-index:0}
.station-anchor{background:none;border:0}
.station-anchor::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border:2px solid var(--c528cef87d,white);border-radius:50%;background:var(--c7191e9083,#074e64);box-shadow:0 0 0 1px var(--c721a0abef,#1b6c81)}
.station-link{position:absolute;left:0;bottom:0;transform:translateX(-50%);height:44px;display:flex;align-items:center;white-space:nowrap;text-decoration:none}
.station-link span{display:flex;align-items:center;gap:5px;padding:3px 9px 4px;background:var(--cd14f90161,#fff);border:1px solid var(--c93d62b46b,#688f9f);border-radius:16px;font:700 13px/18px "Segoe UI",Arial,sans-serif;color:var(--cfe4db1269,#0b3045);box-shadow:0 2px 8px var(--cf2cfb2130,#002c4036)}
.station-link b{font:normal 16px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif;color:var(--cb3ab2cb81,#286276)}
.station-link:hover span,.station-link:focus-visible span{border-color:var(--c9d5d85fcd,#005976);box-shadow:0 0 0 2px var(--c46e5e926e,#1a7c95)}
.compass{position:absolute;left:20px;bottom:22px;display:grid;justify-items:center;gap:3px;color:var(--c88a1856e4,#d1e8dd);pointer-events:none}
.compass b{font:700 11px/1 "Segoe UI",Arial}
.compass i{display:block;width:18px;height:34px;background:linear-gradient(to right,var(--c7c6e9ca90,#a7cbd0) 50%,var(--c766fd9fab,#f5efe1) 50%);clip-path:polygon(50% 0,94% 100%,50% 73%,6% 100%)}
.notice{position:absolute;z-index:1;left:12px;bottom:25px;padding:8px 12px;border-radius:8px;background:var(--c602f704d3,#082538);color:var(--c528cef87d,white)}
.notice a{color:var(--cyan)}
@media(max-width:650px){body{padding:6px}.shell{border-radius:16px}.masthead{display:block;padding:14px 16px}.masthead img{width:165px;margin-bottom:10px}.mast-copy{padding:0;border:0}.masthead p{font-size:12px}.content{padding:8px;gap:8px}.map-frame{border-radius:10px}#map{height:clamp(360px,60svh,580px)}.compass{left:12px;bottom:20px}.geo-sea span{font-size:11px}}


.station-link{width:34px;justify-content:center}
.station-link span{padding:0;background:transparent;border:0;box-shadow:none}
.station-link b{font-size:24px;line-height:1;text-shadow:0 1px 3px var(--cc6155b46d,#001522),0 0 3px var(--c0f1384040,#fff9)}
.station-link:hover span,.station-link:focus-visible span{border:0;box-shadow:none}
.station-link:focus-visible{outline:2px solid var(--cea311be10,#74f0ff);outline-offset:2px;border-radius:5px}

/* v29: larger usable target without enlarging the visible forecast icon. */
.station-link { width:44px; height:48px; justify-content:center; }
.station-link span { padding:0; border:0; background:transparent; box-shadow:none; }
.station-weather-icon { display:block; width:34px; height:34px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 1px 2px var(--c34a6f1de1,#001c31a8)); }
.station-weather-icon[hidden], .station-icon-fallback[hidden] { display:none !important; }
.station-icon-fallback { font:normal 25px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif; text-shadow:0 1px 3px var(--cc6155b46d,#001522),0 0 3px var(--c0f1384040,#fff9); }
.station-link:hover .station-weather-icon, .station-link:focus-visible .station-weather-icon { filter:drop-shadow(0 0 4px var(--cea311be10,#74f0ff)); }

/* v30: reliable emoji fallback. Nearest-station click remains enabled. */
.station-weather-symbol { display:block; font:normal 26px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif; text-shadow:0 1px 3px var(--cc6155b46d,#001522),0 0 3px var(--c0f1384040,#fff9); pointer-events:none; }

.comparison{padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--cde1395fc6,#071c29)}
.comparison h2{margin:0;font-size:clamp(18px,2vw,23px)}
.comparison p{margin:6px 0;color:var(--c330b1ee59,#bed6e0)}
.rank-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:10px;list-style:none;margin:0;padding:0}
.rank-list li{background:var(--c844eaad8f,#0a2535);border-radius:8px;padding:12px}
.rank-list a{font-weight:700;color:var(--cyan)}
.rank-list strong{display:block;margin-top:4px}.comparison-red{color:var(--c31b974ec1,#ff9982)}.comparison-amber{color:var(--ca542f8aee,#edb965)}

.rank-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rank-columns h3{margin:8px 0}.rank-best{color:var(--cdd69dc140,#74dec1)}.rank-worst{color:var(--c74876d2a9,#ffa58e)}
.rank-columns .rank-list{grid-template-columns:1fr}
@media(max-width:700px){.rank-columns{grid-template-columns:1fr}}

.rank-columns>section{display:grid;grid-template-rows:auto 1fr;min-width:0}
.rank-columns .rank-list{grid-auto-rows:1fr}
.rank-list li{display:grid;align-content:start;gap:4px}
.rank-list li strong{margin:0}
@media(max-width:700px){.rank-columns{grid-auto-rows:1fr}}

.rank-columns h3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.rank-captain {
  flex: none;
  width: clamp(74px, 9vw, 122px);
  height: clamp(48px, 5vw, 70px);
  object-fit: contain;
  object-position: left center;
}

.region-directory{padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--cde1395fc6,#071c29)}
.region-directory summary{cursor:pointer;color:var(--cyan);font-weight:700}
.region-directory ul{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:4px 16px}
.region-directory a{display:block;padding:6px 0;color:var(--cyan)}