/* FormyDog v65 · unified semantic palette. Visual-only. */
:root{
  --fd-navy-950:#062746;
  --fd-navy-900:#082f57;
  --fd-navy-800:#0b4476;
  --fd-blue-700:#0b5fb4;
  --fd-blue-600:#1677c9;
  --fd-blue-500:#2d91dc;
  --fd-sky-300:#8ed9f4;
  --fd-sky-200:#c9edf9;
  --fd-sky-100:#eaf8fd;
  --fd-surface:#f9fdff;
  --fd-surface-soft:#f1f9fd;
  --fd-ink:#173b57;
  --fd-muted:#6c8799;
  --fd-green:#2b9b69;
  --fd-green-soft:#e9f8f0;
  --fd-red:#d95161;
  --fd-red-soft:#fff0f2;
  --fd-gold:#c9972c;
  --fd-gold-soft:#fff7e4;
  --fd-line:rgba(86,168,210,.30);
  --fd-shadow:0 10px 28px rgba(1,34,66,.15);
}

html,body{background:var(--fd-navy-950)!important;color:var(--fd-ink)!important}
html body::before,
html.fd46-bg-ready body::before,
html.fd47-bg-ready body::before{
  opacity:.17!important;
  filter:saturate(.90) brightness(.88) contrast(1.04)!important;
}
html body::after{
  background:
    radial-gradient(circle at 50% 38%,rgba(48,145,204,.26),transparent 36%),
    radial-gradient(circle at 16% 28%,rgba(55,166,219,.10),transparent 24%),
    linear-gradient(180deg,rgba(10,62,108,.82),rgba(7,43,79,.93) 58%,rgba(5,34,64,.98))!important;
}

/* Primary surfaces */
html body .topbar,
html body .goals,
html body .boosters{
  background:linear-gradient(180deg,rgba(252,254,255,.97),rgba(237,248,253,.96))!important;
  border-color:var(--fd-line)!important;
  color:var(--fd-ink)!important;
  box-shadow:var(--fd-shadow),inset 0 1px rgba(255,255,255,.96)!important;
}
html body .topbar::before{background:none!important}
html body .brand h1,
html body .side-title span{color:#15528e!important}
html body .brand p,
html body .side-title small{color:var(--fd-muted)!important}

/* Level + resource cards: same family, semantic accents only. */
html body .fd-level-chip{
  background:linear-gradient(180deg,#ffffff,#edf8fd)!important;
  border-color:rgba(83,169,211,.34)!important;
  color:var(--fd-ink)!important;
}
html body .fd-level-chip b{color:var(--fd-blue-700)!important}
html body .fd-level-chip span,
html body .fd-level-chip small{color:var(--fd-muted)!important}
html body .resource{
  background:var(--fd-surface)!important;
  border-color:rgba(92,174,215,.28)!important;
  color:var(--fd-ink)!important;
}
html body .resource:nth-child(1){background:linear-gradient(180deg,#fffdf8,#fff7e9)!important;border-color:rgba(211,170,83,.26)!important}
html body .resource:nth-child(2){background:linear-gradient(180deg,#fbfeff,#edf8ff)!important;border-color:rgba(68,157,215,.26)!important}
html body .resource:nth-child(3){background:linear-gradient(180deg,#fffafb,#fff0f2)!important;border-color:rgba(217,81,97,.22)!important}
html body .resource b{color:#145fa8!important}
html body .resource:nth-child(3) b{color:#b94352!important}
html body .resource span{color:var(--fd-muted)!important}

/* Header controls: one base language, semantic state by function. */
html body .fd-header-tools button{
  background:linear-gradient(180deg,#fff,#edf8fd)!important;
  border-color:rgba(76,163,207,.32)!important;
  color:#1b5f91!important;
  box-shadow:inset 0 1px #fff,0 4px 10px rgba(5,65,105,.08)!important;
}
html body #fdHeaderCare{background:linear-gradient(180deg,#f6fff9,var(--fd-green-soft))!important;border-color:rgba(43,155,105,.30)!important;color:#237e58!important}
html body #fdHeaderEmergency{background:linear-gradient(180deg,#fffafa,var(--fd-red-soft))!important;border-color:rgba(217,81,97,.34)!important;color:#b63d4d!important}
html body #fdHeaderInstructions,
html body #fdHeaderProfile{background:linear-gradient(180deg,#fff,#edf8fd)!important;color:#1769ad!important}

/* Goals */
html body .goal-box,
html body .progress-row{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(91,174,214,.24)!important;
  color:var(--fd-ink)!important;
}
html body .goal-box strong{color:#175da3!important}
html body .goal-box span{color:var(--fd-muted)!important}
html body .moves-box{
  background:linear-gradient(180deg,var(--fd-blue-600),var(--fd-blue-700))!important;
  border-color:#0a56a1!important;
  color:#fff!important;
}
html body .moves-box span,
html body .moves-box strong{color:#fff!important}
html body .progress-track{background:rgba(53,118,154,.14)!important}
html body .progress-track i{background:linear-gradient(90deg,#4bc2ea,#268bd4)!important}

/* Board: quiet frame so pieces remain the visual focus. */
html body .board-shell{
  border-color:rgba(151,216,240,.78)!important;
  background:linear-gradient(145deg,rgba(250,254,255,.95),rgba(215,240,250,.92))!important;
  box-shadow:0 5px 0 rgba(5,66,117,.72),0 15px 32px rgba(1,29,57,.22),inset 0 0 0 1px rgba(255,255,255,.80)!important;
}
html body .board-shell::after{border-color:rgba(92,181,220,.42)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.68)!important}
html body .board-mount{
  background:linear-gradient(180deg,#e9f8fd,#dceff7)!important;
  border-color:rgba(78,166,208,.32)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.66),inset 0 8px 22px rgba(62,148,191,.07)!important;
}
html body .status,
html body .fd-board-ad{
  background:rgba(246,252,255,.94)!important;
  border-color:rgba(88,171,211,.26)!important;
  color:#4b6f85!important;
}
html body .status-dot{background:#39b9e7!important;box-shadow:0 0 0 4px rgba(57,185,231,.12)!important}

/* Booster dock */
html body .booster,
html body .mini-btn{
  background:linear-gradient(180deg,#fff,#eef8fc)!important;
  border-color:rgba(91,174,214,.28)!important;
  color:#24526f!important;
}
html body .booster span b{color:#185b97!important}
html body .booster span small{color:#7890a0!important}
html body .booster em{background:linear-gradient(180deg,var(--fd-blue-500),var(--fd-blue-700))!important;border-color:#fff!important}
html body .booster.active{
  background:linear-gradient(180deg,#fbfeff,#e2f5fd)!important;
  border-color:rgba(45,145,220,.62)!important;
  box-shadow:0 0 0 2px rgba(45,145,220,.16),0 6px 16px rgba(5,80,137,.12)!important;
}
html body #soundBtn{background:linear-gradient(180deg,#fff,#f2f8fb)!important;color:#365d73!important}
html body #storeBtn{background:linear-gradient(180deg,#318fe0,#1264b6)!important;border-color:#0d57a3!important;color:#fff!important}
html body #fdMenuBtn{background:linear-gradient(180deg,#fff,#f0f7fa)!important;color:#255d83!important}
html body #fdNotifyBtn{background:linear-gradient(180deg,#fffdf7,var(--fd-gold-soft))!important;border-color:rgba(201,151,44,.40)!important;color:#8b6619!important}
html body .boosters[data-fd52-state="ready"]::before{background:#258f62!important;color:#fff!important}
html body .boosters[data-fd52-state="selected"]::before{background:var(--fd-blue-700)!important;color:#fff!important}
html body .boosters[data-fd52-state="busy"]::before{background:#bb8421!important;color:#fff!important}
html body .boosters[data-fd52-state="offline"]::before{background:#b84c58!important;color:#fff!important}

/* Secondary actions below board */
html body .fd-game-share,
html body .fd-pet-tools button{
  border-color:rgba(89,171,211,.28)!important;
}
html body .fd-pet-tools button{background:linear-gradient(180deg,#fff,#edf8fd)!important;color:#1a5e91!important}
html body #fdOpenCare{background:linear-gradient(180deg,#f6fff9,var(--fd-green-soft))!important;border-color:rgba(43,155,105,.30)!important;color:#237e58!important}

/* Instruction modal follows the same palette despite its inline legacy CSS. */
html body .fd-instructions-modal{background:rgba(3,24,46,.76)!important}
html body .fd-instructions-card{background:linear-gradient(180deg,#fff,#eef8fc)!important;border-color:rgba(109,194,231,.62)!important;color:var(--fd-ink)!important}
html body .fd-instruction{background:#f8fcfe!important;border-color:rgba(105,187,224,.24)!important}
html body .fd-instruction-icon{background:#e3f4fb!important}
html body .fd-instructions-continue{background:linear-gradient(180deg,#2d91dc,#0b5fb4)!important;box-shadow:0 5px 0 #084d91!important}
html body .fd-instructions-reload{background:var(--fd-gold-soft)!important;border-color:rgba(201,151,44,.36)!important;color:#7c5d1d!important}

/* Keep tile art saturated; UI stays restrained. */
html body .board-mount canvas{filter:saturate(1.03) contrast(1.01)!important}

@media(max-width:900px){
  html body::after{
    background:
      radial-gradient(circle at 50% 34%,rgba(49,146,203,.22),transparent 34%),
      linear-gradient(180deg,#0a3b69 0%,#082f57 58%,#062746 100%)!important;
  }
  html body .topbar,
  html body .goals,
  html body .boosters{box-shadow:0 5px 16px rgba(1,34,66,.13),inset 0 1px rgba(255,255,255,.95)!important}
}