/* Navigation is a selection, not a primary call-to-action. Keep states paired. */
html body .site-shell .site-shell-primary{gap:5px}
html body .site-shell .site-shell-primary a{position:relative;min-height:44px;border:1px solid transparent;border-radius:12px;font-weight:600;padding:0 17px;background:transparent!important;color:var(--site-muted)!important}
html body .site-shell .site-shell-primary a[aria-current=page]{background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)}
html body .site-shell .site-shell-primary a[aria-current=page]:after{content:"";position:absolute;bottom:5px;left:calc(50% - 9px);width:18px;height:2px;background:var(--site-accent);border-radius:2px}
html body .site-shell .site-shell-primary a:is(:hover,:focus-visible){background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)}
html body .site-shell .site-shell-primary a:focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
html body .forecast-shell .forecast-tabs a[aria-current=page],html body .home-game-filters button[aria-pressed=true],html body .arcade-filter-bar button[aria-pressed=true]{background:var(--site-soft)!important;color:var(--site-ink)!important;box-shadow:inset 0 -2px var(--site-accent);border-color:var(--site-border)}
html body .site-mobile-dock a[aria-current=page]{background:var(--site-soft)!important;color:var(--site-ink)!important;box-shadow:inset 0 -2px var(--site-accent)}
/* Companion page surfaces and content always switch together. Fish art stays unchanged. */
html body.buddy-page :is(.personality-section,.privacy-section){background:var(--site-bg);color:var(--site-ink)}
html body.buddy-page .personality-grid article{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border);box-shadow:0 5px 18px #102e380a}
html body.buddy-page :is(.personality-grid h3,.living-section h2,.launch-section h2,.privacy-section h2,.personality-section h2){color:var(--site-ink)!important}
html body.buddy-page :is(.personality-grid p,.personality-section header>span,.living-section li,.privacy-section>p,.launch-section>span){color:var(--site-muted)!important}
html body.buddy-page :is(.personality-grid small,.personality-section header>p,.living-section>div>p,.privacy-section>div>p,.launch-section>p){color:var(--site-accent)!important}
html body.buddy-page :is(.living-section,.launch-section){background:var(--site-soft);color:var(--site-ink);border-block:1px solid var(--site-border)}
html body.buddy-page .living-section li{border-color:var(--site-border)}
html body.buddy-page .living-section li:before{color:var(--site-accent)}
html body.buddy-page .living-section aside{background:var(--site-surface);color:var(--site-ink);border:1px solid var(--site-border)}
html body.buddy-page .living-section aside>strong{color:var(--site-ink)!important}
html body.buddy-page .living-section aside>span{color:var(--site-accent)}
html body.buddy-page .living-section aside>p{color:var(--site-muted)}
html body.buddy-page .living-section aside>i{background:var(--site-border)}
html body.buddy-page .living-section aside>i b{background:var(--site-accent)}
html body.buddy-page .reef-art{color:var(--site-accent)}
html body.buddy-page .reef-art em{color:var(--site-muted)}
html body.buddy-page .reef-art b{color:var(--site-ink)}
html body.buddy-page .store-soon{background:var(--site-soft);color:var(--site-muted);border:1px solid var(--site-border);font-weight:600;box-shadow:none;cursor:default}
html body.buddy-page .launch-section .store-soon{background:var(--site-surface)}
html body.buddy-page .trust-list li:before{color:var(--site-accent)}
html body.buddy-page :is(.buddy-actions a,.privacy-section>a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--site-border);border-radius:13px;background:var(--site-surface);color:var(--site-ink)!important;text-decoration:none}
html body.buddy-page :is(.buddy-actions a,.privacy-section>a):hover{background:var(--site-accent);color:var(--site-on-accent)!important;border-color:var(--site-accent)}
html body.buddy-page a:focus-visible{outline:3px solid var(--site-accent);outline-offset:4px}
html body.buddy-page footer{background:var(--site-bg);color:var(--site-muted);border-top:1px solid var(--site-border)}
html body.buddy-page footer a{color:var(--site-ink)}
html body.buddy-page footer a:hover{text-decoration:underline;text-underline-offset:4px}
html body.buddy-page .privacy-section{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px 40px}
html body.buddy-page .privacy-section>a{grid-column:2;justify-self:start}
html.theme-night body.buddy-page footer img{content:url('/assets/images/bitelah-coastal-wordmark-night.svg?v=1');background:transparent}
@media(max-width:960px){html body.buddy-page .privacy-section{grid-template-columns:minmax(0,1fr);gap:18px}html body.buddy-page .privacy-section>a{justify-self:start}html body.buddy-page .personality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){html body.buddy-page .privacy-section>a{grid-column:1}}
@media(max-width:520px){html body.buddy-page .personality-grid{grid-template-columns:minmax(0,1fr)}}
/* Shared page chrome. Keep game scenes, score states and Sudoku palettes local. */
:root{
  --site-bg:#faf6ed;--site-surface:#fffdf8;--site-ink:#173e47;
  --site-muted:#526c70;--site-accent:#147d80;--site-border:#cbdcd4;
  --site-soft:#e6efe6;
  --site-on-accent:#ffffff;
  --brand-sand:var(--site-bg);--brand-ink:var(--site-ink);
  --brand-teal:var(--site-accent);--brand-line:var(--site-border);
  --site-shell-paper:var(--site-bg);--site-shell-ink:var(--site-ink);
  --guide-paper:var(--site-bg);--guide-ink:var(--site-ink);
}
html.theme-night{
  color-scheme:dark;
  --site-bg:#102e38;--site-surface:#173e47;--site-ink:#edf5e9;
  --site-muted:#bfd5cf;--site-accent:#82d6cd;--site-border:#35565d;
  --site-soft:#204952;
  --site-on-accent:#102e38;
}
html:not(.theme-night){color-scheme:light}
/* Same mark and proportions in both modes; no cream sticker on dark headers.
   CSS responds immediately, including headers inserted after page load. */
html.theme-night img.brand-wordmark{content:url('/assets/images/bitelah-coastal-wordmark-night.svg?v=1')}
html body{background:var(--site-bg);color:var(--site-ink)}
html body :is(.site-shell,.topbar,.game-site-header,.guide-topbar,.buddy-topbar,.location-topbar,.hub-topbar,
  .simple-footer,.game-site-footer,.guide-footer,.location-footer){
  background:var(--site-bg)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important;
}
html body :is(.site-shell-primary a,.topbar nav a,.game-site-back,.game-site-play,.site-game-title,
  .site-shell-saved,.site-shell-more-button,.guide-footer a,.location-footer a,.game-site-footer a,.simple-footer a){color:var(--site-ink)!important}
html body :is(.site-shell-primary a:hover,.site-shell-primary a:focus-visible){background:var(--site-soft)!important;color:var(--site-ink)!important}
html body :is(.site-shell-primary a[aria-current=page],.topbar nav a[aria-current=page]){background:var(--site-accent)!important;color:var(--site-bg)!important}
html body :is(.site-shell-saved,.site-shell-more-button){border-color:var(--site-border);background:var(--site-surface)}
html body :is(.hub-hero,.guide-hero,.location-hero,.scale-hero,.puff-hero,.flap-hero,.cast-hero,.boat-hero,.beach-hero,.tank-hero,.buddy-hero){
  background:var(--site-bg)!important;color:var(--site-ink)!important;border-bottom:1px solid var(--site-border);
}
html body :is(.hub-hero,.guide-hero,.location-hero,.scale-hero,.puff-hero,.flap-hero,.cast-hero,.boat-hero,.beach-hero,.tank-hero) :is(h1,h2){color:var(--site-ink)!important}
html body :is(.hub-hero,.guide-hero,.location-hero,.scale-hero,.puff-hero,.flap-hero,.cast-hero,.boat-hero,.beach-hero,.tank-hero) :is(p,.subhead,.eyebrow),
html body .buddy-copy :is(.lede,.trust-list){color:var(--site-muted)!important}
html body :is(.hub-hero,.guide-hero,.location-hero,.scale-hero,.puff-hero,.flap-hero,.cast-hero,.boat-hero,.beach-hero,.tank-hero,.buddy-copy) h1 em,
html body :is(.guide-kicker,.location-kicker,.buddy-copy .eyebrow){color:var(--site-accent)!important}
html body :is(.guide-meta,.location-meta) span{color:var(--site-muted);border-color:var(--site-border)}
html body :is(.guide-hero,.location-hero)::after{border-color:var(--site-border);box-shadow:none;pointer-events:none}
html body .buddy-actions a{color:var(--site-ink);border-color:var(--site-border)}
html body .hub-hero{padding-block:clamp(32px,5vw,64px)}
html body .hub-hero h1{line-height:1.08;margin:16px 0 22px;font-size:clamp(38px,5.5vw,68px)}
html body .hub-hero>p:last-child{font-size:16px;line-height:1.55;text-transform:none;letter-spacing:0;font-weight:400;max-width:620px;margin:0}
html body .game-hero{background:var(--site-bg)!important;color:var(--site-ink)!important}
html body .game-hero :is(h1,p){color:var(--site-ink)!important}
html body .game-hero h1 em{color:var(--site-accent)!important}
html body :is(.arcade-player-profile,.arcade-passport,.hub-extras,.location-live,.location-article,.guide-article,.guide-index-card){background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html body :is(.multiplayer-lane,.fish-buddy-promo){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html body :is(.multiplayer-lane,.fish-buddy-promo) :is(small,p,strong,h2){color:var(--site-ink)}
html body :is(.multiplayer-lane>a,.fish-buddy-promo>a,.arcade-filter-bar button[aria-pressed=true]){background:var(--site-accent);color:var(--site-bg);border-color:var(--site-accent)}
html body .arcade-filter-bar button{border-color:var(--site-border)}
html body .site-mobile-dock{background:var(--site-surface);border-color:var(--site-border);box-shadow:0 8px 28px #173e4720}
html body .site-mobile-dock :is(a,button){color:var(--site-muted)}
html body .site-mobile-dock [aria-current=page]{background:var(--site-soft);color:var(--site-ink)}
html body .site-mobile-dock .site-mobile-play span{background:var(--site-accent);color:var(--site-bg);box-shadow:none}
html body .site-shell-more :is(aside,nav a,.site-shell-more-close){background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html body .site-shell-more :is(small,footer a){color:var(--site-muted)!important}
html body :is(.site-shell,.site-mobile-dock,.site-shell-more) :focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
/* Night surfaces are scoped: never invert artwork, canvas or puzzle cells. */
html.theme-night body{background:var(--site-bg)!important;color:var(--site-ink)}
html.theme-night body :is(.arcade-player-profile>a,.arcade-profile-compact,.arcade-profile-stat){background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html.theme-night body :is(.arcade-player-profile,.arcade-profile-compact) :is(small,span){color:var(--site-muted)}
[data-site-theme-toggle]{min-height:44px;margin-top:16px;padding:10px 18px;border:1px solid var(--site-border);border-radius:999px;background:var(--site-soft);color:var(--site-ink);cursor:pointer}
html.theme-night body :is(.forecast-shell,.coastal-home .hero,.home-arcade-strip,.home-arcade-rail,.rules-section){background:var(--site-bg)!important;color:var(--site-ink)}
html.theme-night body :is(.home-location-picker,.home-location-picker .location-card,.daily-brief,.forecast-tabs,.score-card,.hourly-card,.tide-card,.week-card,.moon-panel,.more-panel,.more-disclosure,
  .guide-article,.guide-index-card,.guide-callout,.guide-example div,.guide-byline,.guide-principles,.guide-principles li,
  .location-live,.location-article,.location-related,.location-metric,.location-hour,.location-day,
  .arcade-passport,.passport-stat,.passport-game,.passport-badge,.hub-extras,.sudoku-extra,
  .scale-board-card,.daily-leaderboard,.game-seo-copy,.game-guide){background:var(--site-surface)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html.theme-night body :is(.guide-article,.guide-index-card,.guide-principles,.guide-byline,.location-article,.location-related,.location-live,.location-metric,.location-hour,.location-day,.arcade-passport,.sudoku-extra,.scale-board-card) :is(h2,h3,h4,strong,b){color:var(--site-ink)}
html.theme-night body :is(.guide-article,.guide-index-card,.guide-principles,.guide-byline,.location-article,.location-related,.location-live,.location-metric,.location-hour,.location-day,.arcade-passport,.sudoku-extra,.scale-board-card) :is(p,li,small,span){color:var(--site-muted)}
html.theme-night body :is(.guide-article,.guide-index-card,.location-article,.location-related) a{color:var(--site-accent)}
html.theme-night body :is(.guide-lead,.guide-callout strong,.guide-example strong){color:var(--site-ink)!important}
html.theme-night body :is(.home-location-picker>summary small,.home-location-picker label,.home-location-picker select,.home-location-picker option,.section-heading p,.home-game-filter-status,.arcade-filter-status,.passport-foot,.hub-heading p,.hub-extras-heading p){color:var(--site-muted)!important}
html.theme-night body .home-location-picker select{background:var(--site-surface)}
html.theme-night body .home-location-picker>summary b{background:var(--site-soft);color:var(--site-ink)}
html.theme-night body :is(.arcade-filter-bar button,.home-game-filters button,.forecast-tabs a){background:var(--site-surface);color:var(--site-muted);border-color:var(--site-border)}
html.theme-night body :is(.arcade-filter-bar button[aria-pressed=true],.home-game-filters button[aria-pressed=true],.forecast-tabs a[aria-current=page]){background:var(--site-soft)!important;color:var(--site-ink)!important}
html.theme-night body .coastal-home .hero-paths .forecast-path{border-color:var(--site-accent)}
html.theme-night body .coastal-home .hero-paths .games-path{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html.theme-night body :is(.location-status,.location-note,.location-best){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html.theme-night body :is(input,select,textarea){color-scheme:dark}

/* Interaction contract: change foreground and surface together. This final
   state layer wins over legacy single-property hover rules on shared controls. */
html body :is(.site-shell-saved,.site-shell-more-button,.game-site-back,.game-site-play,
  .calendar-btn,.tour-quick,.theme-quick,.topbar .sg-clock,
  .arcade-filter-bar button,.home-game-filters button,.forecast-tabs a,
  .room-actions>button,.join-room button,.connected-room button,.race-presets button,
  [data-site-theme-toggle]):is(:hover,:focus-visible){
  background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-accent)!important;
}
html body :is(.site-shell-primary a,.topbar nav a,.arcade-filter-bar button,.home-game-filters button,.forecast-tabs a):is([aria-current=page],[aria-pressed=true]){
  background:var(--site-soft)!important;color:var(--site-ink)!important;
}
html body :is(.daily-item[href],.phase-item):is(:hover,:focus-visible){background:var(--site-soft)!important;color:var(--site-ink)!important}
html body .daily-brief .daily-item[href]:is(:hover,:focus-visible) :is(strong,small,span){color:var(--site-ink)!important}
html body .phase-item:is(:hover,:focus-visible) :is(strong,small,span){color:var(--site-ink)!important}
html body :is(.site-shell-more nav a,.guide-index-card,.home-location-grid a):is(:hover,:focus-visible){background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-accent)!important}
html body :is(.site-shell-more nav a,.guide-index-card,.home-location-grid a):is(:hover,:focus-visible) :is(strong,small,span,p,h2){color:var(--site-ink)!important}
/* Area cards also contain em descriptions and b calls-to-action. The featured
   card's pale/lime child colors must not survive its light hover surface. */
html body .home-location-grid a:is(:hover,:focus-visible) :is(em,b){color:var(--site-ink)!important}
html.theme-night body .home-location-links :is(header>a,header small,.home-location-grid span){color:var(--site-accent)}
html body .home-location-grid a:focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
html body :is(.location-related a,.guide-article a,.guide-footer a,.location-footer a,.simple-footer a,.game-site-footer a):is(:hover,:focus-visible){color:var(--site-accent)!important;text-decoration:underline;text-underline-offset:4px}
html body :is(.game-site-play,.game-site-back,.calendar-btn,.tour-quick,.theme-quick,.sg-clock,
  .arcade-filter-bar button,.home-game-filters button,.forecast-tabs a,.daily-item[href],
  .room-actions>button,.join-room button,.connected-room button,.race-presets button,[data-site-theme-toggle]):focus-visible{
  outline:3px solid var(--site-accent)!important;outline-offset:3px;
}
html body .daily-item[href]:focus-visible{outline-offset:-4px}
html body :is(button,input,select,textarea):disabled{cursor:not-allowed}

/* Calm interface, lively illustrations: content never waits for an entrance. */
html body :is(.hub-hero>p,.hub-hero h1,.hub-hero h1 em,.hub-heading,.game-tile,.sudoku-preview){animation:none!important}
html body :is(.site-shell-more aside,.more-panel,.saved-panel,.trip-mode-panel){transition-duration:220ms}
html body :is(.site-shell a,.site-shell button,.game-site-back,.game-site-play){transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}
html[data-motion=reduced]{scroll-behavior:auto!important}
html[data-motion=reduced] :is(.hero-art,.buddy-demo,.game-tile,.home-game-card,.hero-tank,.hero-puffer,.hero-scale-fish,.hero-boat,.flap-hero-fish,.game-tutorial,.fish-buddy) *,
html[data-motion=reduced] :is(.hero-art,.buddy-demo,.game-tile,.home-game-card,.sudoku-preview,.winner-burst,.race-countdown,.fish-buddy){animation:none!important;transition:none!important}
html[data-motion=reduced] :is(.site-shell-more aside,.more-panel,.saved-panel,.trip-mode-panel){transition:none!important}

/* Tide panel: calm surface motion, with the numeric chart kept still. */
html body .tide-card{background:var(--site-surface)!important;color:var(--site-ink);border:1px solid var(--site-border);padding:clamp(20px,3vw,30px)}
html body .tide-card::after{display:none}
html body .tide-head{gap:16px;flex-wrap:wrap}
html body .tide-head h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:8px 0}
html body .tide-head :is(.eyebrow,p),html body .tide-legend{color:var(--site-muted)}
html body .tide-card .model-pill{color:var(--site-accent);border-color:var(--site-border);background:var(--site-soft)}
html body .tide-summary{gap:12px;margin:18px 0 8px}
html body .tide-summary>div{background:var(--site-soft);border-color:var(--site-border);padding:16px;border-radius:16px}
html body .tide-summary strong{font-size:clamp(18px,2vw,23px);line-height:1.3;color:var(--site-ink)}
html body .tide-summary :is(small,span){color:var(--site-muted);line-height:1.5}
html body .tide-water-motion{height:88px;margin-top:20px;border:1px solid var(--site-border);border-radius:16px;background:linear-gradient(180deg,#123a49,#164c5d);isolation:isolate}
html body .tide-water-motion::before,html body .tide-water-fill::after{display:none}
html body .tide-water-fill{animation:none!important;box-shadow:none;background:linear-gradient(180deg,#51b9cbb0,#227a9380);transition:height 600ms ease}
html body .tide-water-fill i{top:-12px;left:-240px;width:calc(100% + 480px);height:30px;filter:none!important;background-size:240px 30px;animation:tide-calm-front 12s linear infinite!important;opacity:.7!important}
html body .tide-water-fill i+i{top:-9px;background-size:320px 28px;opacity:.25!important;animation:tide-calm-back 18s linear infinite!important}
html body .tide-water-motion>span{animation:none!important;box-shadow:none;background:#123a49;color:#d2f5f2;border-color:#72bbc7;top:12px;right:12px}
@keyframes tide-calm-front{to{transform:translateX(240px)}}
@keyframes tide-calm-back{to{transform:translateX(-320px)}}
html body .tide-scroll{padding:24px 4px 10px;scrollbar-color:var(--site-muted) transparent}
html body .tide-chart{height:206px;min-width:1392px;grid-template-columns:repeat(24,minmax(58px,1fr));border-color:var(--site-border)}
html body .tide-hour{gap:8px;padding-inline:4px;border-radius:8px;color:var(--site-ink)}
html body .tide-hour :is(b,small){color:var(--site-muted);font-size:11px;min-height:16px;line-height:16px;flex-shrink:0}
html body .tide-bar{width:24px;border-radius:7px 7px 2px 2px;background:#238b9f}
html body .tide-hour.falling .tide-bar{background:#718caf}
html body .tide-hour.turning .tide-bar{background:#d8aa49;box-shadow:none}
html body .tide-hour.now .tide-bar{outline:2px solid var(--site-ink);outline-offset:3px}
html body .tide-hour:is(:hover,:focus-visible){background:var(--site-soft);outline:2px solid var(--site-accent);outline-offset:-2px}
html body .tide-legend{gap:12px 18px;flex-wrap:wrap;font-size:11px;line-height:1.5}
html body .tide-legend .rising{background:#238b9f}html body .tide-legend .falling{background:#718caf}html body .tide-legend .turning{background:#d8aa49}
html[data-motion=reduced] body .tide-water-fill,html[data-motion=reduced] body .tide-water-fill i{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){html body .tide-water-fill,html body .tide-water-fill i{animation:none!important;transition:none!important}}
@media(max-width:420px){html body .tide-summary{grid-template-columns:1fr}html body .tide-card.freshwater .tide-summary>div:last-child{display:none}}

/* Hourly outlook: consistent day/night surfaces and stable, readable chart. */
html body .hourly-card{padding:clamp(18px,3vw,30px);background:var(--site-surface);border-color:var(--site-border);color:var(--site-ink)}
html body .hourly-head{align-items:start;flex-wrap:wrap;gap:14px}
html body .hourly-head h3{color:var(--site-ink)!important;font-size:clamp(22px,3vw,28px);line-height:1.2}
html body .hourly-intro p{color:var(--site-muted);font-size:13px;line-height:1.5;max-width:38ch}
html body #jumpNow{min-height:44px;padding:10px 16px;background:var(--site-soft);color:var(--site-accent);border:1px solid var(--site-border);border-radius:24px}
html body .day-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
html body .day-part{min-width:0;min-height:140px;padding:16px;border-radius:16px;background:var(--site-soft)!important;border-color:var(--site-border)!important;color:var(--site-ink)!important;transition:background-color .18s,border-color .18s}
html body .day-part.great{border-top:3px solid #d8aa49!important}
html body .day-part.fair{border-top:3px solid #238b9f!important}
html body .day-part.low{border-top:3px solid #718caf!important}
html body .day-part small{font-size:11px;color:var(--site-muted)!important;letter-spacing:1px}
html body .day-part strong{font-size:23px;line-height:1.2;margin:8px 0;color:var(--site-ink)!important}
html body .day-part span{font-size:12px;font-weight:600;color:var(--site-accent)!important}
html body .day-part p{font-size:12px;line-height:1.45;margin-top:8px;color:var(--site-muted)!important}
html body :is(.day-part,#jumpNow):is(:hover,:focus-visible){background:var(--site-surface)!important;outline:2px solid var(--site-accent);outline-offset:2px}
html body .hourly-scroll{padding:24px 3px 10px;scrollbar-color:var(--site-border) transparent}
html body .hourly-chart{height:220px;min-width:1392px;grid-template-columns:repeat(24,minmax(58px,1fr));border-color:var(--site-border)}
html body .hour{gap:8px;padding:5px 3px;border-radius:8px;color:var(--site-ink)!important}
html body .hour :is(b,small){font-size:11px;line-height:16px;min-height:16px;flex-shrink:0;color:var(--site-muted)!important}
html body .hour-bar{width:26px;flex-shrink:0;animation:hourly-reveal .45s ease-out both;border-radius:7px 7px 2px 2px}
html body .hour.now .hour-bar{animation:hourly-reveal .45s ease-out both}
html body :is(.hour-bar,.hourly-legend i).great{background:#d8aa49}
html body :is(.hour-bar,.hourly-legend i).fair{background:#238b9f}
html body :is(.hour-bar,.hourly-legend i).low{background:#718caf}
html body .hour:is(:hover,:focus-visible,.selected){background:var(--site-soft);outline:2px solid var(--site-accent);outline-offset:-2px}
html body .hour:is(:hover,.selected,.now) .hour-bar{outline:2px solid var(--site-ink);outline-offset:3px}
html body .hourly-legend{flex-wrap:wrap;gap:10px 18px;font-size:12px;color:var(--site-muted);line-height:1.5}
html body .hour-detail{background:var(--site-soft);color:var(--site-ink);border:1px solid var(--site-border);padding:20px;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;align-items:start}
html body .detail-lead{grid-column:1/-1}
html body .detail-lead strong{font-size:24px;line-height:1.3;color:var(--site-ink)}
html body :is(.detail-lead,.detail-stat) small{font-size:10px;line-height:1.5;color:var(--site-muted)}
html body .detail-lead span{font-size:12px;color:var(--site-accent)}
html body .detail-stat{min-width:0;border:0;border-top:1px solid var(--site-border);padding:12px 0 0}
html body .detail-stat strong{font-size:15px;line-height:1.4;color:var(--site-ink)}
html body .detail-stat span{font-size:11px;line-height:1.5;color:var(--site-muted)}
html body .detail-cue{border-color:var(--site-border);font-size:12px;line-height:1.6;color:var(--site-muted)}
html body .detail-cue b{color:var(--site-accent)}
@keyframes hourly-reveal{from{transform:scaleY(.9);opacity:.4}to{transform:scaleY(1);opacity:1}}
@media(max-width:600px){html body .day-parts{grid-template-columns:repeat(2,minmax(0,1fr))}html body .day-part{padding:13px}html body .hour-detail{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:14px}}
html[data-motion=reduced] body .hour-bar{animation:none!important}
@media(prefers-reduced-motion:reduce){html body .hour-bar{animation:none!important}}

/* Shared chart finish. Dedicated plot rows keep labels clear at maximum scores. */
html body .hourly-chart{height:230px}
html body .tide-chart{height:220px}
html body :is(.hourly-chart,.tide-chart){background-image:repeating-linear-gradient(to top,transparent 0,transparent 39px,var(--site-border) 40px,transparent 41px);background-size:100% 164px;background-position:left bottom 34px;background-repeat:no-repeat}
html body .tide-chart{background-size:100% 144px;background-position:left bottom 37px}
html body .hour{display:grid;grid-template-rows:20px 164px 20px;gap:8px;justify-items:center;align-content:end;padding:5px 3px}
html body .tide-hour{display:grid;grid-template-rows:20px 144px 24px;gap:8px;justify-items:center;align-content:end;padding:5px 3px}
html body :is(.hour,.tide-hour)>b{align-self:end;font-weight:600}
html body :is(.hour,.tide-hour)>small{align-self:start}
html body :is(.hour-bar,.tide-bar){--bar-top:#63bdc5;--bar-bottom:#238b9f;position:relative;align-self:end;display:block;width:28px;max-height:100%;min-height:4px;border-radius:10px 10px 5px 5px;background:linear-gradient(180deg,var(--bar-top),var(--bar-bottom))!important;box-shadow:inset 1px 0 0 #ffffff35,inset -1px 0 0 #173e4715,0 2px 3px #173e4712;transition:filter 160ms ease,box-shadow 160ms ease}
html body .hour-bar.great,html body .tide-hour.turning .tide-bar{--bar-top:#efd38b;--bar-bottom:#c59a3d}
html body .hour-bar.low,html body .tide-hour.falling .tide-bar{--bar-top:#a2b7d1;--bar-bottom:#718caf}
html body :is(.hour-bar,.tide-bar)::after{content:"";position:absolute;left:5px;right:5px;top:4px;height:2px;border-radius:2px;background:#ffffff70}
html body .hour:is(:hover,.selected,.now) .hour-bar,html body .tide-hour.now .tide-bar{outline:none;box-shadow:inset 0 0 0 2px var(--site-accent),0 0 0 2px var(--site-surface),0 0 0 3px var(--site-accent)}
html body :is(.hour,.tide-hour):is(:hover,:focus-visible) :is(.hour-bar,.tide-bar){filter:brightness(1.08)}
html body .hour.selected,html body .tide-hour.now{background:var(--site-soft);border-radius:12px;outline:none;box-shadow:inset 0 -3px var(--site-accent)}
html body :is(.hour,.tide-hour):focus-visible{outline:2px solid var(--site-accent);outline-offset:-2px}
html body :is(.hour.selected,.tide-hour.now)>b{color:var(--site-accent)!important}
html[data-motion=reduced] body :is(.hour-bar,.tide-bar){animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){html body :is(.hour-bar,.tide-bar){animation:none!important;transition:none!important}}

/* Supporting forecast cards use the same quiet surfaces as the charts. */
/* Expanded logbook: explicit earned/locked states in both themes. */
html body .passport-disclosure .arcade-passport{background:var(--site-surface)!important;color:var(--site-ink);padding:22px;display:grid;grid-template-columns:1fr;grid-template-areas:"head" "stats" "games" "badges" "foot";gap:20px;box-shadow:none}
html body .arcade-passport:before,html body .arcade-passport:after{display:none}
html body .passport-head{flex-wrap:wrap;align-items:center}
html body .passport-head h2{color:var(--site-ink)!important;font-size:24px;line-height:1.25;font-weight:650;letter-spacing:-.4px}
html body .passport-head p{color:var(--site-accent)!important;font-size:10px;font-weight:600}
html body .passport-private{background:var(--site-soft);border-color:var(--site-border);color:var(--site-muted)!important;font-size:11px;font-weight:400;max-width:none;white-space:normal}
/* Compact section rhythm. Do not resize gameplay canvases or modal safe areas. */
html body :is(.room-strip,.round-bar,.control-card,.angler-card){background:var(--site-surface)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body .angler-board,html body .catch-readout{background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body :is(.room-strip,.round-bar,.control-card,.angler-card,.catch-readout) :is(h2,strong,b){color:var(--site-ink)!important}
html body :is(.room-strip,.round-bar,.control-card,.angler-card,.catch-readout) :is(p,small,label){color:var(--site-muted)!important}
html body .cast-action{background:var(--site-accent)!important;color:var(--site-on-accent)!important}
html body .cast-action :is(b,small){color:var(--site-on-accent)!important}
html body .angler-card.leading{border-color:var(--site-accent)!important}
html body .room-strip :is(input,select,.cast-options label){background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body .room-strip button{background:var(--site-accent)!important;color:var(--site-on-accent)!important;border-color:var(--site-border)!important}
html body .room-strip input::placeholder{color:var(--site-muted)!important;opacity:1}
html body :is(.flap-scores,.beach-scores,.puff-scores) li{background:var(--site-soft)!important}
html body :is(.flap-options,.beach-options,.puff-options,.flap-scores,.beach-scores,.puff-scores,.puff-achievements){background:var(--site-surface)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body :is(.flap-options,.beach-options,.puff-options) button{background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body :is(.flap-options,.beach-options,.puff-options) button[aria-pressed=true]{border-color:var(--site-accent)!important}
html body :is(.flap-options,.beach-options,.puff-options) button:hover{background:var(--site-accent)!important;color:var(--site-on-accent)!important}
html body :is(.flap-scores,.beach-scores,.puff-scores,.puff-achievements) :is(h2,strong,b,li){color:var(--site-ink)!important}
html body :is(.flap-scores,.beach-scores,.puff-scores,.puff-achievements) :is(p,small){color:var(--site-muted)!important}
html body .game-modal>section{background:var(--site-surface)!important;color:var(--site-ink)!important;border-color:var(--site-border)}
html body .game-modal :is(h2,.podium span,.podium b){color:var(--site-ink)!important}
html body .game-modal p{color:var(--site-muted)!important}
html body .game-modal .cast-kicker{color:var(--site-accent)!important}
html body .game-modal .podium>div{background:var(--site-surface);border-color:var(--site-border)}
html body .game-modal .podium>div:first-child{background:var(--site-soft);border-color:var(--site-accent)}
html body .game-modal .result-actions :is(button,a){background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-border)}
html body .game-modal .result-actions button{background:var(--site-accent)!important;color:var(--site-on-accent)!important}
html body .arcade-result-card{background:var(--site-surface)!important;color:var(--site-ink)!important;border-color:var(--site-border)!important}
html body .arcade-result-card>div{background:var(--site-soft)!important;color:var(--site-ink)!important}
html body .arcade-result-card :is(b,strong){color:var(--site-ink)!important}
html body .arcade-result-card small{color:var(--site-muted)!important}
html body .hub-hero{padding-block:32px!important;min-height:0}
html body .hub-shell{padding-top:24px;margin-bottom:24px!important}
html body .hub-extras{margin-bottom:28px}
html body .fish-buddy-promo{margin-block:24px}
html body .guide-hero{padding-block:40px}
html body .guide-hero h1{font-size:clamp(36px,4.4vw,58px);line-height:1.08}
html body .guide-index{padding-top:28px;padding-bottom:40px}
html body .location-hero{padding-block:32px}
html body .location-live :is(p,small){color:var(--site-muted)!important}
html body .location-live-head>div>p{color:var(--site-accent)!important}
html body .location-status{color:var(--site-accent)!important;border-color:var(--site-border);background:var(--site-soft)}
html body .location-best{background:var(--site-soft);color:var(--site-ink);border:1px solid var(--site-border)}
html body :is(.location-metric,.location-hour,.location-day){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html body :is(.location-metric,.location-hour,.location-day) :is(span,small,em){color:var(--site-muted)!important}
html body .location-score small{color:#c5ddd6!important}
html body .buddy-hero{padding-block:40px;min-height:0}
html body :is(.personality-section,.living-section,.privacy-section){padding-block:40px}
html body .launch-section{padding-block:44px}
html body.coastal-home .hero{padding-top:32px;padding-bottom:28px}
html body.coastal-home .home-arcade-rail{margin-bottom:28px}
html body.coastal-home .forecast-shell{padding-top:28px}
@media(max-width:600px){html body :is(.hub-hero,.guide-hero,.location-hero,.buddy-hero){padding-block:24px}html body :is(.personality-section,.living-section,.privacy-section,.launch-section){padding-block:28px}html body .guide-index{padding-top:24px;padding-bottom:28px}}
/* Moon lookout: separate sky, water and time so decorative fish never cross labels. */
html body.coastal-home .hero-art{height:400px;min-height:400px;border-radius:28px;background:radial-gradient(ellipse at 50% 12%,#2a6266 0,transparent 58%),linear-gradient(160deg,#194b53,#153944);border:1px solid #38656a;isolation:isolate}
html body.coastal-home .hero-art .precise-hero-moon{width:116px!important;height:116px!important;top:22px!important;right:calc(50% - 58px)!important;background:none!important;box-shadow:0 0 40px #82d6cd18;animation:none!important;filter:none;overflow:hidden}
html body.coastal-home .precise-hero-moon:before,html body.coastal-home .precise-hero-moon:after{display:none!important}
html body.coastal-home .precise-hero-moon svg{display:block;width:100%;height:100%}
html body.coastal-home .hero-art .hero-moon-readout{top:150px;left:24px;right:24px;text-decoration:none;color:#edf5e9;z-index:3;border-radius:12px;min-height:92px;gap:2px}
html body.coastal-home .hero-art .hero-moon-readout strong{font-size:21px;font-weight:600;color:#edf5e9}
html body.coastal-home .hero-art .hero-moon-readout small{color:#a9d8cf;font-size:10px;font-weight:500;letter-spacing:1.5px}
html body.coastal-home .hero-art .hero-moon-readout span{color:#c5ddd6;font-size:12px}
html body.coastal-home .hero-art .hero-moon-readout .hero-moon-link{color:#9de0d4;font-size:11px;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
html body.coastal-home .hero-art .hero-moon-readout:hover{background:#ffffff09}
html body.coastal-home .hero-art .water-line{left:-10%;right:auto;width:120%;height:20px;border:0;border-top:1px solid #82d6cd40;border-radius:50%;animation:lookout-water 9s ease-in-out infinite;pointer-events:none}
html body.coastal-home .hero-art .line-one{top:253px;background:linear-gradient(#82d6cd09,transparent)}
html body.coastal-home .hero-art .line-two{top:276px;background:none;animation-delay:-3s;opacity:.6}
html body.coastal-home .hero-art .line-three{top:302px;background:none;animation-delay:-6s;opacity:.4}
html body.coastal-home .hero-art .hero-fishkit{pointer-events:none;animation:lookout-swim 12s ease-in-out infinite;opacity:.85}
html body.coastal-home .hero-art .hero-fishkit.fish-one{top:250px;right:21%;width:92px}
html body.coastal-home .hero-art .hero-fishkit.fish-two{top:269px;right:61%;width:66px;animation-delay:-4s;opacity:.65}
html body.coastal-home .hero-art .hero-fishkit.fish-three{top:280px;right:6%;width:48px;animation-delay:-8s;opacity:.55}
html body.coastal-home .hero-art .art-caption{bottom:12px!important;left:18px;right:18px!important;min-height:66px;padding:10px!important;border-radius:16px;border:1px solid #82d6cd26;background:#102e3866;z-index:3;color:#edf5e9;cursor:pointer}
html body.coastal-home .hero-art .art-caption:hover{background:#204952;color:#edf5e9}
html body.coastal-home .hero-art .hero-time-copy strong{font-size:26px!important;font-weight:600;font-variant-numeric:tabular-nums;color:#edf5e9}
@keyframes lookout-water{50%{transform:translateX(3%) translateY(3px)}}
@keyframes lookout-swim{50%{transform:translate(-12px,3px)}}
@media(prefers-reduced-motion:reduce){html body.coastal-home .hero-art :is(.water-line,.hero-fishkit){animation:none!important}}
html body .player-cloud{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border);box-shadow:none}
html body .player-cloud-head h2{font-size:22px;color:var(--site-ink)}
html body .player-cloud-head p{color:var(--site-accent)}
html body .player-cloud :is(.player-cloud-head span,.analytics-choice small),html body .player-cloud>p:last-child{color:var(--site-muted);font-size:12px}
html body .player-cloud-head>b,html body .player-cloud .analytics-choice{background:var(--site-soft);color:var(--site-ink)}
html body .player-cloud-actions input{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html body .player-cloud-actions input::placeholder{color:var(--site-muted);opacity:1}
html body .player-cloud button{background:var(--site-accent);color:var(--site-on-accent);border-color:var(--site-accent)}
html body .player-cloud button.quiet{background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html body .player-cloud button:hover:not(:disabled){filter:brightness(.94)}
html body .player-cloud :is(button,input):focus-visible{outline:2px solid var(--site-accent);outline-offset:3px}
html body .player-cloud .analytics-choice input{accent-color:var(--site-accent)}
html body .player-cloud>p[data-tone="ok"]{color:var(--site-accent)}
html body .player-cloud>p[data-tone="warn"]{color:#856015}
html body .player-cloud>p[data-tone="error"]{color:#ae4035}
html.theme-night body .player-cloud>p[data-tone="warn"]{color:#efd38b}
html.theme-night body .player-cloud>p[data-tone="error"]{color:#ffb0a5}
html body .passport-stats{gap:10px}
html body .passport-stat{padding:16px;background:var(--site-soft);border-color:var(--site-border)}
html body .passport-stat strong{font-size:26px;font-weight:650;color:var(--site-ink)!important}
html body .passport-stat span{font-size:11px;line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none;color:var(--site-muted)!important}
html body .passport-games{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body .passport-game{min-height:82px;padding:38px 10px 12px;border-radius:14px;border:1px dashed var(--site-border);background:var(--site-surface);color:var(--site-muted)!important;font-size:12px;font-weight:500;line-height:1.3}
html body .passport-game:before{top:12px;width:20px;height:20px;border-color:var(--site-muted);background:transparent;box-shadow:none}
html body .passport-game.played{background:var(--site-soft);border:1px solid var(--site-accent);color:var(--site-ink)!important}
html body .passport-game.played:before{content:'✓';display:grid;place-items:center;background:var(--site-accent);color:var(--site-on-accent);border-color:var(--site-accent);font-size:13px;box-shadow:none}
html body .passport-badges{gap:8px;justify-content:flex-start}
html body .passport-badge{min-height:36px;padding:8px 12px;white-space:normal;font-size:12px;line-height:1.4;font-weight:500;background:var(--site-soft);color:var(--site-muted)!important;border-color:var(--site-border)}
html body .passport-badge.unlocked{background:var(--site-soft);color:var(--site-ink)!important;border-color:var(--site-accent)}
html body .passport-badge:is(.empty,.locked-summary){background:transparent;color:var(--site-muted)!important;border-style:dashed}
@media(max-width:600px){html body .passport-disclosure .arcade-passport{padding:16px;gap:16px}html body .passport-games{grid-template-columns:repeat(2,minmax(0,1fr))}html body .passport-stat{padding:12px 9px}html body .passport-stat strong{font-size:23px}html body .passport-head h2{font-size:22px}}
/* Games hub: compact resume cards and theme-aware progress surfaces. */
html body .continue-playing{width:min(1180px,calc(100% - 40px));padding:22px;margin:22px auto;background:var(--site-surface);color:var(--site-ink);border:1px solid var(--site-border);border-radius:20px}
html body .continue-playing>div:first-child{display:block;margin-bottom:16px}
html body .continue-playing p{font-size:10px;color:var(--site-muted);font-weight:600;letter-spacing:1.2px;margin-bottom:6px}
html body .continue-playing h2{font-size:24px;line-height:1.25;color:var(--site-ink)}
html body .continue-playing-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
html body .continue-playing a{position:relative;grid-template-columns:1fr auto;align-content:center;min-height:100px;padding:16px 20px;background:var(--site-soft);color:var(--site-ink);border:1px solid var(--site-border);border-radius:14px;transition:background-color 150ms,border-color 150ms}
html body .continue-playing a:after{content:'→';grid-column:2;grid-row:1/4;align-self:center;font-size:24px;color:var(--site-accent);margin-left:16px}
html body .continue-playing a small{color:var(--site-accent);font-size:10px;font-weight:600}
html body .continue-playing a b{font-size:18px;line-height:1.4}
html body .continue-playing a span{font-size:12px;line-height:1.5;color:var(--site-muted)}
html body .continue-playing a:is(:hover,:focus-visible){background:var(--site-surface);border-color:var(--site-accent);outline:2px solid var(--site-accent);outline-offset:2px;color:var(--site-ink)}
html body :is(.passport-disclosure,.arcade-player-profile,.passport-stat,.passport-game,.passport-badge){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html body .passport-disclosure>summary{color:var(--site-ink);font-size:15px;min-height:60px}
html body .passport-disclosure>summary :is(strong,b){color:var(--site-ink)}
html body .passport-disclosure>summary small{color:var(--site-accent)}
html body .arcade-player-profile :is(b,strong){color:var(--site-ink)}
html body .arcade-player-profile :is(small,span){color:var(--site-muted)}
html body .arcade-player-profile>a{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html body .arcade-profile-level{background:var(--site-surface);color:var(--site-accent)}
html body .arcade-profile-copy>i{background:var(--site-border)}
html body .arcade-profile-copy>i>em{background:var(--site-accent)}
html body .hub-extra-card.sudoku-extra{background:var(--site-soft);border-color:var(--site-border)}
html body .sudoku-extra .hub-extra-copy :is(strong,b){color:var(--site-ink)}
html body .sudoku-extra .hub-extra-copy span{color:var(--site-muted)}
html body .sudoku-extra .hub-extra-copy small{color:var(--site-accent)}
html body .arcade-mission{background:var(--site-surface);border-color:var(--site-border);color:var(--site-ink);box-shadow:none}
html body .arcade-mission-copy h2,html body .arcade-mission-progress b{color:var(--site-ink)}
html body .arcade-mission-copy p,html body .arcade-mission-progress a{color:var(--site-accent)}
html body .arcade-mission-copy span{color:var(--site-muted)}
html body .arcade-mission-mark{background:var(--site-soft);color:var(--site-accent)}
html body .arcade-mission.complete{background:var(--site-soft);border-color:var(--site-accent)}
html body :is(.passport-disclosure>summary,.arcade-mission-progress a):focus-visible{outline:2px solid var(--site-accent);outline-offset:-3px}
@media(max-width:600px){html body .continue-playing{width:calc(100% - 24px);padding:16px;margin:16px auto}html body .continue-playing h2{font-size:22px}html body .continue-playing a{padding:14px;min-height:96px}}
html body .dashboard-grid :is(.score-card,.window-card,.conditions-card,.moon-panel){background:var(--site-surface)!important;border:1px solid var(--site-border);border-radius:22px;color:var(--site-ink);padding:22px;min-width:0}
html body .score-card{gap:18px;align-items:center}
html body .dashboard-grid :is(.score-card,.moon-panel){height:auto!important;align-self:start;align-content:start}
html body .score-copy :is(h3,p),html body .window-card h3{color:var(--site-ink)!important}
html body .score-copy h3{font-size:24px;line-height:1.25}
html body .score-copy #scoreBrief{font-size:14px;line-height:1.55;color:var(--site-muted)!important}
html body .score-explanation{grid-column:1/-1;width:100%;border-top:1px solid var(--site-border)}
html body .score-explanation summary{cursor:pointer;padding:14px 0;min-height:44px;font-size:13px;font-weight:600;color:var(--site-accent)}
html body .score-explanation>p{font-size:13px;line-height:1.6;color:var(--site-muted);margin:0 0 16px}
html body .model-readout{border-color:var(--site-border);gap:14px}
html body .model-readout :is(small,span){color:var(--site-muted);line-height:1.5}
html body .model-readout strong{color:var(--site-ink)}
html body .score-ring{background:conic-gradient(var(--site-accent) 0 calc(var(--score)*1%),var(--site-border) calc(var(--score)*1%));box-shadow:none}
html body .score-ring:after{background:var(--site-surface)}
html body .window-card h3{font-size:clamp(23px,2.5vw,30px);line-height:1.3;margin:18px 0 10px}
html body .window-card>p{font-size:13px;line-height:1.5;color:var(--site-muted)}
html body .window-card .window-track-label{font-size:11px;margin:18px 0 6px;color:var(--site-accent)}
html body .window-card .timeline{padding:0;margin:0;gap:10px;color:var(--site-muted);font-size:11px}
html body .timeline>div{height:14px;background:var(--site-soft);border:1px solid var(--site-border);border-radius:7px}
html body .timeline i{height:100%;top:0;background:#d8aa49;border-radius:6px}
html body .timeline b{top:50%;width:10px;height:10px;transform:translate(-50%,-50%);background:var(--site-accent);border:2px solid var(--site-surface);border-radius:50%}
html body .daylight-times{display:flex;justify-content:space-between;gap:10px;margin:10px 0 18px;color:var(--site-muted);font-size:12px}
html body .calendar-btn{min-height:44px;background:var(--site-soft);color:var(--site-accent);border-color:var(--site-border)}
html body .conditions-card{display:flex!important;flex-direction:column;gap:0!important}
html body .conditions-card .condition{background:transparent!important;border:0;border-bottom:1px solid var(--site-border);border-radius:0;padding:16px 0;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;min-height:88px}
html body .conditions-card .condition:last-child{border-bottom:0}
html body .condition-icon{width:36px;height:36px;background:var(--site-soft);color:var(--site-accent)}
html body .condition strong{font-size:16px;line-height:1.4;color:var(--site-ink)!important}
html body .condition :is(small,p){color:var(--site-muted)!important;font-size:12px;line-height:1.5}
html body .condition>b{position:static;font-size:10px;align-self:center;color:var(--site-accent)!important}
html body .dashboard-moon{grid-template-columns:90px minmax(0,1fr)!important;gap:18px!important;min-height:0!important}
html body .dashboard-moon .moon-visual{width:90px;height:90px;justify-self:start}
html body .dashboard-moon .phase-disc{width:68px;height:68px}
html body .precise-moon{background:none!important;box-shadow:none!important;animation:none!important}
html body .precise-moon:before,html body .precise-moon:after{display:none!important}
html body .precise-moon svg{display:block;width:100%;height:100%}
html body .moon-copy h3{font-size:11px;color:var(--site-muted)!important}
html body .moon-copy h4{font-size:23px;color:var(--site-ink)!important}
html body .moon-copy p{font-size:12px;color:var(--site-muted)!important}
html body .dashboard-moon .phase-list{grid-column:1/-1;gap:8px}
html body .phase-item{padding:12px 6px;background:var(--site-soft);border:1px solid var(--site-border);border-radius:12px}
html body .phase-item b{font-size:11px;color:var(--site-ink)}
html body .phase-item small{font-size:10px;color:var(--site-muted)!important}
html body .next-change{background:var(--site-soft);border:1px solid var(--site-border);box-shadow:none;padding:18px;gap:18px}
html body .next-change strong{color:var(--site-ink);font-size:14px;line-height:1.5}
html body .next-change small{color:var(--site-muted);font-size:10px}
html body .next-change>span{background:var(--site-surface);color:var(--site-accent)}
html body .safety-reminder{display:none}
html body .safety-banner{grid-template-columns:auto 1fr;background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border)}
html body .update-banner{grid-template-columns:minmax(0,1fr) auto auto!important;padding:10px 12px;gap:8px;background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border);box-shadow:0 6px 22px #173e4724}
html body .update-banner>div{grid-row:auto!important}
html body .update-banner span{display:none}
html body .update-banner button{grid-row:auto!important;grid-column:auto!important;min-height:44px;color:var(--site-accent);border-color:var(--site-border)}
html body .update-banner #applyUpdate{background:var(--site-accent);color:var(--site-on-accent);border-color:var(--site-accent)}
/* Component surfaces must change with their foregrounds, including nested panels. */
html body .forecast-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 24px}
html body .forecast-journey :is(a,button){display:grid;gap:5px;min-width:0;min-height:100px;padding:16px;border:1px solid var(--site-border);border-radius:16px;background:var(--site-surface);color:var(--site-ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
html body .forecast-journey small{color:var(--site-accent);font-size:12px;font-weight:600}
html body .forecast-journey strong{font-size:16px;font-weight:600;overflow-wrap:anywhere}
html body .forecast-journey span{font-size:12px;color:var(--site-muted)}
html body .forecast-journey :is(a,button):is(:hover,:focus-visible){background:var(--site-soft);outline:2px solid var(--site-accent);outline-offset:2px}
html body .arcade-progress-drawer{margin-block:24px}
html body .arcade-progress-drawer>summary:after{content:'+';font-size:24px;color:var(--site-accent)}
html body .arcade-progress-drawer[open]>summary:after{content:'−'}
html body .arcade-progress-drawer>.arcade-mission{margin:12px;width:calc(100% - 24px)}
html body .arcade-progress-drawer>[data-arcade-profile]{margin:12px;width:calc(100% - 24px);border-radius:16px}
html body .arcade-grid .game-tile>h3{font-size:clamp(25px,3vw,36px);line-height:1.16;max-width:70%;margin-top:16px}
html body .arcade-grid .game-tile>strong{font-size:13px;font-weight:500;line-height:1.5;max-width:66%}
html body .arcade-grid .game-tile>p{display:none}
html body .arcade-grid .game-tile>.tile-number{font-size:10px;line-height:1.4;letter-spacing:.3px;background:transparent;color:#edf5e9}
html body .arcade-grid .puff-tile>.tile-number{color:#173e47}
html body .game-first-action{display:flex;align-items:center;gap:12px;width:min(1080px,calc(100% - 28px));margin:16px auto;padding:14px 16px;border:1px solid var(--site-border);border-radius:16px;background:var(--site-soft);color:var(--site-ink)}
html body .game-first-action p{flex:1;margin:0;font-size:14px;line-height:1.5;color:var(--site-ink)}
html body .game-first-action button{min-height:44px;padding:8px 14px;border:1px solid var(--site-border);border-radius:12px;background:var(--site-surface);color:var(--site-ink);cursor:pointer}
html body .game-pause-menu{overflow:auto;max-height:100%;color:var(--site-ink);background:var(--site-surface)}
html body .game-pause-menu :is(h2,p){color:var(--site-ink)}
html body .game-pause-menu button{min-height:48px;padding:12px 18px;border:1px solid var(--site-border);border-radius:12px;background:var(--site-soft);color:var(--site-ink);font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer}
html body .game-pause-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
html body .game-toggle-pause{position:absolute;inset:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
html body .game-toggle-pause[hidden],html body .game-action-confirm[hidden]{display:none!important}
html body .game-action-confirm{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:#071f2fc9}
html body .game-action-confirm section{width:min(420px,100%);max-height:calc(100dvh - 36px);overflow:auto;box-sizing:border-box;padding:24px;border:1px solid var(--site-border);border-radius:20px;background:var(--site-surface);color:var(--site-ink)}
html body .game-action-confirm h2{color:var(--site-ink);font-size:24px;margin:0 0 12px}
html body .game-action-confirm p{color:var(--site-muted);font-size:14px;line-height:1.5}
html body .game-action-confirm section>div{display:flex;gap:10px;margin-top:20px}
html body .game-action-confirm button{flex:1;min-height:48px;border:1px solid var(--site-border);border-radius:12px;background:var(--site-soft);color:var(--site-ink);cursor:pointer}
html body .game-action-confirm [data-confirm]{background:var(--site-accent);color:var(--site-on-accent)}
html body :is(.game-first-action,.game-pause-menu,.game-action-confirm) button:focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
@media(max-width:600px){html body .forecast-journey{grid-template-columns:1fr}html body .forecast-journey :is(a,button){min-height:76px;padding:12px 16px}html body .game-first-action{flex-wrap:wrap}html body .game-first-action p{flex-basis:100%}html body .game-first-action button{flex:1}html body .arcade-grid .game-tile>h3{max-width:72%}}
html body .game-site-header .game-site-play{background:var(--site-accent)!important;color:var(--site-on-accent)!important;border-color:var(--site-accent)}
html body .mobile-dock a.active{background:var(--site-soft)!important;color:var(--site-ink)!important;box-shadow:inset 0 -2px var(--site-accent)}
html body .mobile-dock a.active span{color:var(--site-ink)!important}
html body :is(.arcade-mission-progress,.trust-card,.trust-side,.local-results){background:var(--site-surface)!important;color:var(--site-ink);border-color:var(--site-border)}
html body.trust-page .trust-hero>.brand{display:none}
html body.trust-page :is(.trust-hero,.trust-footer){background:var(--site-bg);color:var(--site-ink)}
html body.trust-page :is(.trust-card,.trust-side) :is(h2,h3,strong,b){color:var(--site-ink)}
html body.trust-page :is(.trust-card,.trust-side) :is(p,li,small){color:var(--site-muted)}
html body.trust-page .trust-side a{color:var(--site-accent)}
html body .hub-extra-card.makan-extra{background:var(--site-soft);border-color:var(--site-border)}
html body .makan-extra .hub-extra-copy :is(strong,b){color:var(--site-ink)}
html body .makan-extra .hub-extra-copy span{color:var(--site-muted)}
html body .makan-extra .hub-extra-copy small{color:var(--site-accent)}
html body .arcade-more[hidden]{display:none!important}
html body .continue-older{display:contents}
html body .continue-older>summary{display:none}
html body .continue-older:not([open])>a{display:grid}
@media(max-width:600px){html body .continue-older{display:block}html body .continue-older>summary{display:block;cursor:pointer;min-height:44px;padding:12px;color:var(--site-accent)}html body .continue-older:not([open])>a{display:none}html body .continue-older>a{margin-top:8px}}
html body .arcade-more{background:var(--site-soft);color:var(--site-ink);border-color:var(--site-border);margin-bottom:16px}
html body .arcade-more:is(:hover,:focus-visible){background:var(--site-surface);color:var(--site-ink);outline:2px solid var(--site-accent);outline-offset:2px}
html body .game-tile:has(.weekly-pick)>.tile-number{right:16px;top:16px}
html body .game-tile .weekly-pick{top:auto;bottom:44px;right:16px;background:var(--site-soft);color:var(--site-ink)}
html.theme-night body :is(.beach-toolbar,.boat-toolbar,.tank-toolbar,.flap-toolbar,.puff-toolbar,.scale-stats,.score-strip,.leaderboard-card,.tank-fishbook,.tank-shop,.tank-decor){background:var(--site-surface)!important;color:var(--site-ink);border-color:var(--site-border)}
html.theme-night body :is(.beach-toolbar,.boat-toolbar,.tank-toolbar,.flap-toolbar,.puff-toolbar,.scale-stats,.score-strip) :is(strong,b){color:var(--site-ink)}
html.theme-night body :is(.beach-toolbar,.boat-toolbar,.tank-toolbar,.flap-toolbar,.puff-toolbar,.scale-stats,.score-strip)>span{color:var(--site-muted)}
html.theme-night body .tank-controls button{background:var(--site-surface);color:var(--site-ink);border-color:var(--site-border)}
html.theme-night body .tank-controls button :is(strong,b){color:var(--site-ink)}
html.theme-night body .tank-controls button small{color:var(--site-muted)}
html.theme-night body .tank-controls button:is(:hover,:focus-visible){background:var(--site-soft);outline:2px solid var(--site-accent)}
/* Sudoku deliberately retains a light play surface, including Coral cage colours. */
html.theme-night body .game-shell:has(.sudoku-grid){--ink:#173e47;--muted:#526c70;--line:#9bbab6;color:#173e47;background:#fffdf8;color-scheme:light}
html.theme-night body .game-shell:has(.sudoku-grid) :is(h2,h3,.stats b,.number-pad button,.toolbar button,.toolbar select,.erase){color:#173e47}
html.theme-night body .game-shell:has(.sudoku-grid) :is(.game-head p,.stats small,.toolbar label,aside>p){color:#526c70}
html.theme-night body .sudoku-grid .cell{color:#075e6a}
html.theme-night body .sudoku-grid .cell.given{color:#173e47}
html.theme-night body .sudoku-grid .cell:is(.wrong,.conflict){color:#8f2f24!important}
@media(max-width:600px){html body .dashboard-grid :is(.score-card,.window-card,.conditions-card,.moon-panel){padding:18px}html body .condition>b{font-size:9px}html body .dashboard-moon .phase-list{grid-template-columns:repeat(2,minmax(0,1fr))}html body .phase-item{display:grid;grid-template-columns:24px 1fr;text-align:left;gap:3px 8px;align-items:center}html body .phase-item .mini-moon{width:24px;height:24px;margin:0;grid-row:1/3}html body .update-banner strong{font-size:12px}html body .update-banner{bottom:calc(env(safe-area-inset-bottom) + 82px)}}
:where([data-related-play]){display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:72rem;margin:1rem auto;padding:1rem;color:var(--site-ink,#173e47)}
:where([data-related-play]) a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .8rem;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none}
:where([data-related-play]) a:hover,:where([data-related-play]) a:focus-visible{text-decoration:underline;outline-offset:3px}
.location-retry{min-height:44px;padding:.6rem 1rem;margin:1rem;border:1px solid currentColor;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
/* Shared tutorial controls must not inherit a game's dark footer or legend ink. */
html body .game-tutorial footer{background:transparent!important;color:var(--site-ink)!important;border:0;padding:0}
html body .game-tutorial footer button{background:var(--site-soft)!important;color:var(--site-ink)!important;border:1px solid var(--site-border)!important;min-height:44px}
html body .game-tutorial footer .game-tutorial-next{background:var(--site-accent)!important;color:var(--site-on-accent)!important}
html body .game-tutorial .tutorial-puff-key>span{display:flex!important;flex-direction:column;align-items:center;background:var(--site-surface)!important;color:var(--site-ink)!important;gap:2px;border:1px solid var(--site-border);min-width:88px!important}
html body .game-tutorial .tutorial-puff-key b{color:inherit!important}
html body .game-tutorial-demo:is([data-visual='puff-happy'],[data-visual='puff-angry']){height:146px;min-height:146px}
html body .game-tutorial .tutorial-puff-key canvas{position:static!important;transform:none!important;width:76px!important;height:53px!important;flex:none;display:block}
html body .puff-key .puff-legend-fish{display:block;width:72px;height:50px;margin:0 auto 4px}
html body .game-ux-pause{font-size:0!important;line-height:0!important;width:44px;min-width:44px;padding:0!important}
html body .game-ux-pause:before{content:none!important}
html body .game-ux-pause:after{content:'Ⅱ'!important;font:600 18px/1 system-ui;display:grid;place-items:center}
html body .game-ux-pause[aria-label='Resume game']:after{content:'▶'!important}
html body .daily-board-unavailable{padding:12px 18px;min-height:0}
html body .daily-board-unavailable :is(.daily-leaderboard-head,[data-daily-board],[data-daily-entry]){display:none!important}
html body .daily-board-unavailable .daily-board-status{margin:0;color:var(--site-muted)}
html body .scale-board-card.is-local-only>div:first-child,html body .scale-board-card.is-local-only #scaleLeaderboard{display:none}
html body .scale-board-card.is-local-only .scale-local{margin-top:12px;padding-top:12px}
/* Main-page details use the same semantic palette in both colour modes. */
html body.trust-page .trust-hero>p{color:var(--site-muted)!important}
html body :is(.simple-footer,.game-site-footer,.guide-footer,.location-footer) :is(small,.data-credit){color:var(--site-muted)!important}
html body :is(.simple-footer,.game-site-footer) nav a{color:var(--site-ink)!important}
html body :is(.simple-footer,.game-site-footer) nav a:is(:hover,:focus-visible){color:var(--site-accent)!important;text-decoration:underline;text-underline-offset:4px}
html body .hub-heading p{color:var(--site-accent)!important}
html body .location-planning>summary{color:var(--site-ink)!important;min-height:44px}
html body .location-planning>summary:after{background:var(--site-soft);color:var(--site-accent)}
html body .location-skip{background:var(--site-accent);color:var(--site-on-accent)}
html body .water-toggle button.active,html.theme-night body .water-toggle button.active{background:var(--site-accent)!important;color:var(--site-on-accent)!important}
html body .saved-alerts>:is(p,small){color:var(--site-muted)!important}
html body .trip-mode-head button{background:var(--site-soft)!important;color:var(--site-ink)!important;min-width:44px;min-height:44px}
html body.buddy-page .personality-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* A quiet freshness indicator, not a neon notification beacon. */
html body .daily-live:before{background:var(--site-accent);box-shadow:none;animation:none}
/* Non-gameplay accents: one paired palette, without legacy lime or glow. */
html body :is(.location-row button,.save-current,.guide-skip,.guide-side .guide-forecast-cta,.fan-button,.setup-panel .primary-btn){background:var(--site-accent)!important;color:var(--site-on-accent)!important;border-color:var(--site-accent)!important;box-shadow:none}
html body .saved-btn b{background:var(--site-soft)!important;color:var(--site-ink)!important}
html body .home-game-card>em{color:#bde7da!important}
html body .home-game-card>em span{color:inherit!important}
html body .home-game-card.boat-tile>em{color:#173e47!important}
html body .game-site-back span{color:var(--site-accent)!important}
html body .buddy-demo>small b{color:#bde7da!important}
html body .guide-side a:is(:hover,:focus-visible,[aria-current=page]){color:var(--site-accent)!important;text-decoration:underline;text-underline-offset:4px}
html body .guide-side .guide-forecast-cta:is(:hover,:focus-visible){color:var(--site-on-accent)!important}
html body :is(.beach-overlay,.flap-overlay,.boat-overlay,.puff-overlay,.scale-overlay,.game-overlay,.tank-overlay)>button{background:var(--site-accent)!important;color:var(--site-on-accent)!important;border-color:var(--site-accent)!important;box-shadow:none}
html body :is(.difficulty-picker,.boat-difficulty,.scale-difficulty) button.active{background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-accent)!important;box-shadow:inset 0 -2px var(--site-accent)}
html body .boat-difficulty button.active :is(small,b){color:inherit!important}
html body .boat-race-mode{color:var(--site-accent)!important}
html body .tile-number.live-multi{border-color:var(--site-border)!important}
html body :is(.location-row button,.save-current,.guide-skip,.guide-forecast-cta,.fan-button,.game-site-back):focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
html body :is(.setup-actions .primary-btn,.skip-link){background:var(--site-accent)!important;color:var(--site-on-accent)!important;border-color:var(--site-accent)!important}
html body .scale-modes button.active{background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-accent)!important}
html body .live-pill{background:var(--site-soft)!important;color:var(--site-ink)!important;box-shadow:none}
/* Keep tutorial navigation outside the scrolling instructions. */
html body .game-tutorial>section{display:flex!important;flex-direction:column;max-height:calc(100dvh - 24px)!important;overflow:hidden!important}
html body .game-tutorial-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:8px}
html body .game-tutorial>section>footer,html body .game-tutorial-progress{flex-shrink:0}
html body .game-tutorial>section>footer{padding-top:10px!important}
html body .game-tutorial-close{z-index:3}
@media(max-height:450px){html body .game-tutorial-card-copy h2{font-size:21px;margin:6px 0}html body .game-tutorial-card-copy{padding-top:10px}}
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
 html body.cast-round-active .game-panel{position:fixed!important;inset:54px 0 0;z-index:30;height:calc(100dvh - 54px);margin:0!important;border-radius:0;display:grid!important;grid-template-rows:auto minmax(60px,1fr) auto;overflow:hidden!important;background:var(--site-surface)}
 html body.cast-round-active .round-bar{position:static!important;padding:8px 12px}
 html body.cast-round-active .fishing-water{height:100%!important;min-height:0!important;overflow:hidden}
 html body.cast-round-active .angler-board{display:none!important}
 html body.cast-round-active .control-card{padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:1fr;gap:5px;background:var(--site-surface);min-height:0}
 html body.cast-round-active .control-copy,html body.cast-round-active .catch-readout{display:none!important}
 html body.cast-round-active .cast-action{min-height:64px!important;margin:0!important;padding:8px 14px!important}
 html body.cast-round-active .reel-panel{margin:0;padding:4px 8px}
 html body.cast-round-active .meter{height:10px}
 html body.cast-round-active .keeper-rule{display:none}
}
@media(max-width:380px){html body .game-shell:has(.sudoku-grid){width:calc(100% - 8px)!important;padding:6px!important}html body .sudoku-grid{width:100%!important}html body .number-pad{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}html body .number-pad button{min-height:44px!important;aspect-ratio:auto!important}}
html body .sudoku-grid .cell.selected{outline:3px solid #147d80;outline-offset:-3px;box-shadow:inset 0 0 0 1px #fffdf8!important}