/* FormyDog Theme v193 — cache-busted unified theme layer. */
/* v192 compact HUD override — appended to the already-linked layout file. */
html,body{height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;overscroll-behavior:none!important}
body{display:block!important;touch-action:pan-y!important}
html body main.app{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;width:min(100%,480px)!important;max-width:480px!important;min-width:0!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;margin:0 auto!important;padding:4px 6px max(4px,env(safe-area-inset-bottom))!important;overflow:hidden!important;box-sizing:border-box!important}
html body main.app *{box-sizing:border-box}
html body main.app button:focus-visible{outline:2px solid #1677c9!important;outline-offset:1px!important}

/* 01 — Brand, level, utilities in one compact line; resources in a small strip. */
html body main.app>.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:29px 23px!important;grid-template-areas:"brand level tools" "resources resources resources"!important;align-items:center!important;gap:3px 5px!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:4px!important;border-radius:11px!important;overflow:visible!important}
html body main.app>.topbar .brand{grid-area:brand!important;display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;width:auto!important;padding:0!important;overflow:visible!important}
html body main.app>.topbar .brand-avatar{flex:0 0 25px!important;width:25px!important;height:25px!important;min-width:25px!important;border-radius:7px!important;overflow:hidden!important}
html body main.app>.topbar .brand-avatar img{width:23px!important;height:23px!important;object-fit:contain!important}
html body main.app>.topbar .brand h1{margin:0!important;font-size:clamp(11px,3vw,15px)!important;line-height:1!important;letter-spacing:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body main.app>.topbar .brand h1::before{content:"01 · "!important;font-size:.66em!important;color:#6c8799!important}
html body main.app>.topbar .brand p{display:none!important}
html body main.app>.topbar #fdLevelChip{grid-area:level!important;display:flex!important;align-items:center!important;justify-self:end!important;gap:3px!important;min-width:0!important;width:auto!important;height:25px!important;min-height:25px!important;margin:0!important;padding:2px 5px!important;border-radius:7px!important;box-shadow:none!important}
html body main.app>.topbar #fdLevelChip b{font-size:12px!important;line-height:1!important}
html body main.app>.topbar #fdLevelChip span,html body main.app>.topbar #fdLevelChip small{font-size:5px!important;line-height:1!important}
html body main.app>.topbar .fd-header-tools{grid-area:tools!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:center!important;gap:3px!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important}
html body main.app>.topbar .fd-header-tools button{display:inline-flex!important;flex:0 0 25px!important;align-items:center!important;justify-content:center!important;width:25px!important;min-width:25px!important;max-width:25px!important;height:25px!important;min-height:25px!important;max-height:25px!important;margin:0!important;padding:0!important;gap:0!important;border-radius:7px!important;box-shadow:none!important;font-size:0!important;line-height:0!important;overflow:hidden!important}
html body main.app>.topbar .fd-header-tools button::before{display:block!important;flex:0 0 auto!important;width:auto!important;height:auto!important;margin:0!important;background:none!important;mask:none!important;-webkit-mask:none!important;font-family:Arial,sans-serif!important;font-size:15px!important;line-height:1!important;color:currentColor!important}
html body main.app>.topbar #fdHeaderProfile::before{content:"♙"!important}
html body main.app>.topbar #fdHeaderCare::before{content:"♥"!important}
html body main.app>.topbar #fdHeaderEmergency::before{content:"＋"!important}
html body main.app>.topbar .resources{grid-area:resources!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;width:100%!important;min-width:0!important;height:23px!important;margin:0!important;padding:0!important}
html body main.app>.topbar .resource{display:grid!important;grid-template-columns:15px minmax(0,1fr)!important;grid-template-rows:1fr!important;grid-template-areas:"icon value"!important;align-items:center!important;justify-items:center!important;gap:2px!important;width:100%!important;min-width:0!important;min-height:0!important;height:23px!important;margin:0!important;padding:1px 3px!important;border-radius:7px!important;white-space:nowrap!important;overflow:hidden!important}
html body main.app>.topbar .resource img{grid-area:icon!important;width:14px!important;height:14px!important;max-width:14px!important;object-fit:contain!important}
html body main.app>.topbar .resource b{grid-area:value!important;justify-self:start!important;min-width:0!important;font-size:11px!important;line-height:1!important}
html body main.app>.topbar .resource span{display:none!important}

/* 02 — Tight objective strip. */
html body main.app>.game-layout{gap:3px!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important}
html body main.app>.game-layout>.goals,html body main.app>.game-layout>.center,html body main.app>.game-layout>.boosters{position:relative!important;inset:auto!important;float:none!important;transform:none!important;align-self:stretch!important;justify-self:stretch!important;flex:0 0 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;box-sizing:border-box!important}
html body main.app>.game-layout>.goals{order:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"title moves" "goal progress"!important;align-items:center!important;gap:2px 5px!important;padding:4px 6px!important;border-radius:8px!important;overflow:hidden!important}
html body main.app>.game-layout>.goals .side-title{grid-area:title!important;display:flex!important;align-items:center!important;gap:4px!important;margin:0!important;padding:0!important;border:0!important;font-size:8px!important;line-height:1!important;min-width:0!important}
html body main.app>.game-layout>.goals .side-title span::before{content:"02 · "!important}
html body main.app>.game-layout>.goals .side-title small{display:none!important}
html body main.app>.game-layout>.goals .goal-box{grid-area:goal!important;display:flex!important;align-items:center!important;gap:3px!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
html body main.app>.game-layout>.goals .goal-box img{flex:0 0 15px!important;width:15px!important;height:15px!important;object-fit:contain!important}
html body main.app>.game-layout>.goals .goal-box strong{font-size:12px!important;line-height:1!important}
html body main.app>.game-layout>.goals .goal-box span{display:none!important}
html body main.app>.game-layout>.goals .moves-box{grid-area:moves!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;min-height:20px!important;height:20px!important;margin:0!important;padding:2px 5px!important;border-radius:6px!important;box-shadow:none!important;font-size:7px!important}
html body main.app>.game-layout>.goals .moves-box span{font-size:6px!important}
html body main.app>.game-layout>.goals .moves-box strong{font-size:12px!important;line-height:1!important}
html body main.app>.game-layout>.goals .progress-row{grid-area:progress!important;min-width:0!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
html body main.app>.game-layout>.goals .progress-copy{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:3px!important;font-size:7px!important;line-height:1!important}
html body main.app>.game-layout>.goals .progress-copy span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body main.app>.game-layout>.goals .progress-track{height:3px!important;margin-top:2px!important}
html body main.app>.game-layout>.goals .how,html body main.app>.game-layout>.goals>.fd-level-stage-v92{display:none!important}

/* 03 — Viewport-aware square board keeps the lower toolbar in view. */
html body main.app>.game-layout>.center{order:2!important;display:flex!important;flex:1 1 auto!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-height:0!important;padding:0!important;overflow:visible!important}
html body main.app>.game-layout>.center::before{content:"03 · TABLERO"!important;display:block!important;align-self:flex-start!important;flex:0 0 auto!important;width:100%!important;margin:0!important;padding:0 2px!important;color:#e6f5ff!important;font-size:8px!important;font-weight:900!important;line-height:9px!important;letter-spacing:.06em!important;order:0!important}
html body main.app>.game-layout>.center .board-shell{position:relative!important;inset:auto!important;transform:none!important;display:block!important;flex:0 1 auto!important;width:min(100%,460px,calc(100vw - 12px),max(144px,calc(100dvh - 300px)))!important;max-width:460px!important;min-width:0!important;height:auto!important;max-height:calc(100dvh - 300px)!important;aspect-ratio:1/1!important;margin:0 auto!important;padding:3px!important;border-radius:11px!important;box-sizing:border-box!important;overflow:hidden!important}
html body main.app>.game-layout>.center .board-mount{position:absolute!important;inset:3px!important;z-index:1!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:8px!important;box-sizing:border-box!important;overflow:hidden!important}
html body main.app>.game-layout>.center .board-mount canvas{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important;object-fit:contain!important;touch-action:none!important}
html body main.app>.game-layout>.center .status{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:0 0 auto!important;width:100%!important;max-width:460px!important;min-width:0!important;min-height:18px!important;height:auto!important;margin:1px auto 0!important;padding:2px 4px!important;border-radius:6px!important;font-size:7px!important;line-height:1.15!important;text-align:center!important;overflow-wrap:anywhere!important;box-sizing:border-box!important}

/* 04 — Seven controls, exactly one row. */
html body main.app>.game-layout>.boosters{order:3!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-auto-flow:row!important;align-items:stretch!important;justify-content:stretch!important;gap:2px!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;margin:0!important;padding:3px!important;border-radius:8px!important;overflow:visible!important}
html body main.app>.game-layout>.boosters::before,html body main.app>.game-layout>.boosters::after{display:none!important;content:none!important}
html body main.app>.game-layout>.boosters>.side-title{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;min-width:0!important;margin:0!important;padding:0 2px 1px!important;border:0!important;font-size:8px!important;line-height:9px!important}
html body main.app>.game-layout>.boosters>.side-title span::before{content:"04 · "!important}
html body main.app>.game-layout>.boosters>.side-title small{font-size:6px!important;white-space:nowrap!important}
html body main.app>.game-layout>.boosters .booster{position:relative!important;display:flex!important;flex:initial!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;grid-column:auto!important;min-width:0!important;width:100%!important;max-width:none!important;min-height:29px!important;height:29px!important;max-height:29px!important;margin:0!important;padding:1px!important;border-radius:6px!important;box-shadow:none!important;overflow:visible!important}
html body main.app>.game-layout>.boosters .booster img{display:block!important;flex:0 0 22px!important;width:22px!important;height:22px!important;max-width:100%!important;max-height:22px!important;object-fit:contain!important;margin:0 auto!important}
html body main.app>.game-layout>.boosters .booster>span{display:none!important}
html body main.app>.game-layout>.boosters .booster em{position:absolute!important;top:-2px!important;right:-1px!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:11px!important;height:11px!important;margin:0!important;padding:0 2px!important;border:1px solid #fff!important;border-radius:99px!important;font-size:7px!important;line-height:1!important;font-style:normal!important}
html body main.app>.game-layout>.boosters .booster em i{font-size:7px!important;line-height:1!important;font-style:normal!important}
html body main.app>.game-layout>.boosters .mini-btn{position:relative!important;display:flex!important;flex:initial!important;align-items:center!important;justify-content:center!important;grid-column:auto!important;min-width:0!important;width:100%!important;max-width:none!important;min-height:27px!important;height:27px!important;max-height:27px!important;margin:0!important;padding:0!important;border-radius:6px!important;box-shadow:none!important;font-size:0!important;line-height:0!important;overflow:hidden!important}
html body main.app>.game-layout>.boosters .mini-btn::before{display:block!important;position:static!important;flex:0 0 auto!important;width:auto!important;height:auto!important;margin:0!important;background:none!important;mask:none!important;-webkit-mask:none!important;font-family:Arial,sans-serif!important;font-size:14px!important;line-height:1!important;color:currentColor!important}
html body main.app>.game-layout>.boosters #soundBtn::before{content:"♫"!important}
html body main.app>.game-layout>.boosters #storeBtn::before{content:"▣"!important}
html body main.app>.game-layout>.boosters #fdMenuBtn::before{content:"≡"!important}
html body main.app>.game-layout>.boosters #fdNotifyBtn::before{content:"♢"!important}
html body main.app>.game-layout>.boosters .fd-mini-icon,html body main.app>.game-layout>.boosters .fd-mini-label{display:none!important}

/* 05 — Footer actions are a single compact icon toolbar, including late-injected actions. */
html body main.app>footer#fdFooter{order:3!important;position:relative!important;inset:auto!important;display:flex!important;flex:0 0 auto!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:3px!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:70px!important;margin:0!important;padding:2px 1px!important;border-radius:7px!important;overflow:visible!important}
html body main.app>footer#fdFooter::before{content:"05 · MÁS ACCIONES"!important;display:block!important;flex:0 0 100%!important;width:100%!important;padding:0 3px!important;color:#e6f5ff!important;font-size:8px!important;font-weight:900!important;line-height:9px!important;letter-spacing:.06em!important}
html body main.app>footer#fdFooter :is(#fdFooterPrimary,.fd-game-share,.fd-pet-tools,#fdFooterRewards,#fdFooterCloud,#fd132Toolbar,#fdPetCloudBar){display:contents!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;gap:0!important;border:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}
html body main.app>footer#fdFooter button,html body main.app>footer#fdFooter button[id],html body main.app>footer#fdFooter #fdPetCloudBar button[id]{display:inline-flex!important;flex:0 0 28px!important;align-items:center!important;justify-content:center!important;width:28px!important;min-width:28px!important;max-width:28px!important;height:28px!important;min-height:28px!important;max-height:28px!important;margin:0!important;padding:0!important;gap:0!important;border-radius:6px!important;box-shadow:none!important;font-size:0!important;line-height:0!important;overflow:hidden!important}
html body main.app>footer#fdFooter button::before{display:block!important;flex:0 0 auto!important;width:auto!important;height:auto!important;margin:0!important;background:none!important;mask:none!important;-webkit-mask:none!important;font-family:Arial,sans-serif!important;font-size:15px!important;line-height:1!important;color:currentColor!important}
html body main.app>footer#fdFooter #fdShareQr::before{content:"▦"!important}
html body main.app>footer#fdFooter #fdCopyLink::before{content:"⧉"!important}
html body main.app>footer#fdFooter #fdShareGame::before{content:"↗"!important}
html body main.app>footer#fdFooter #fdOpenProfile::before{content:"♙"!important}
html body main.app>footer#fdFooter #fdOpenCare::before{content:"♥"!important}
html body main.app>footer#fdFooter #fdPetFind::before{content:"⌕"!important}
html body main.app>footer#fdFooter #fdPetSave::before{content:"✓"!important}
html body main.app>footer#fdFooter #fd132Collection::before{content:"▤"!important}
html body main.app>footer#fdFooter #fd132Daily::before{content:"✦"!important}
html body main.app>footer#fdFooter #fd132ModeInfo::before{content:"?"!important}
html body main.app>footer#fdFooter #fdShareStatus,html body main.app>footer#fdFooter :is(#fdPetCloudStatus,.fd-game-share-status){display:none!important}
html body main.app>footer#fdFooter #fdFooterRewards:empty,html body main.app>footer#fdFooter #fdFooterCloud:empty{display:none!important}

/* Only very short viewports keep a scroll fallback; regular phone/desktop screens fit. */
@media(max-height:590px){html,body{height:auto!important;min-height:100%!important;max-height:none!important;overflow-y:auto!important}html body main.app{height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important}html body main.app>.game-layout{flex:0 0 auto!important}html body main.app>.game-layout>.center .board-shell{width:min(100%,460px,calc(100vw - 12px),max(144px,calc(100dvh - 300px)))!important;flex:0 0 auto!important}}
@media(max-width:360px){html body main.app{padding:3px 4px max(3px,env(safe-area-inset-bottom))!important;gap:2px!important}html body main.app>.topbar{gap:2px!important;padding:3px!important}html body main.app>.topbar .fd-header-tools{gap:2px!important}html body main.app>.topbar .fd-header-tools button{width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important;flex-basis:22px!important}html body main.app>.topbar #fdLevelChip{padding:2px 3px!important}html body main.app>.game-layout>.boosters{gap:1px!important;padding:2px!important}html body main.app>.game-layout>.boosters .booster{height:26px!important;min-height:26px!important;max-height:26px!important}html body main.app>.game-layout>.boosters .booster img{width:20px!important;height:20px!important;flex-basis:20px!important}html body main.app>.game-layout>.boosters .mini-btn{height:25px!important;min-height:25px!important;max-height:25px!important}}
@media(prefers-reduced-motion:reduce){html body main.app *{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* FormyDog Theme v193 — shared visual system for all overlays and injected modules.
   Match the compact main HUD: sky blue, white cards, navy text, tidy fields and consistent actions. */
:root{
  --fd-theme-navy:#062746;
  --fd-theme-blue:#0b5fb4;
  --fd-theme-blue2:#2d91dc;
  --fd-theme-sky:#eaf8fd;
  --fd-theme-ink:#173b57;
  --fd-theme-muted:#6c8799;
  --fd-theme-line:#c8e2f0;
  --fd-theme-soft:#f6fbff;
  --fd-theme-radius:16px;
  --fd-theme-shadow:0 18px 48px rgba(6,39,70,.22);
}
html body .fd-modal,
html body .fd-qr-overlay,
html body .fd-support-modal,
html body .fd77-reservation-modal,
html body .fd-companion-modal,
html body .fd132-modal,
html body .fd-notice-modal,
html body .fd72-image-viewer,
html body .fd-emergency-modal,
html body .fd-pet-viewer{
  color:var(--fd-theme-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
  overscroll-behavior:contain;
}
html body .fd-modal:not([hidden]),
html body .fd-qr-overlay:not([hidden]),
html body .fd-support-modal:not([hidden]),
html body .fd77-reservation-modal:not([hidden]),
html body .fd-companion-modal:not([hidden]),
html body .fd132-modal:not([hidden]),
html body .fd-notice-modal:not([hidden]),
html body .fd-emergency-modal:not([hidden]){
  backdrop-filter:blur(7px);
}
html body .fd-modal,
html body .fd-support-modal,
html body .fd77-reservation-modal,
html body .fd-companion-modal,
html body .fd132-modal,
html body .fd-notice-modal,
html body .fd-emergency-modal{
  background:rgba(3,21,42,.76);
}
html body .fd-modal .fd-card,
html body .fd-qr-overlay .fd-qr-pet-card,
html body .fd-support-modal .fd-support-dialog,
html body .fd77-reservation-modal .fd77-reservation-dialog,
html body .fd-companion-modal .fd-companion-card,
html body .fd132-modal .fd132-card,
html body .fd-notice-modal .fd-notice-card,
html body .fd-emergency-modal .fd-emergency-card,
html body .fd-coins-card,
html body #fdProfile .fd-card,
html body #fdCareCenter .fd-card,
html body .fd-pet-viewer-card,
html body .fd-scan-modal{
  box-sizing:border-box;
  border:1px solid var(--fd-theme-line);
  border-radius:var(--fd-theme-radius);
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  color:var(--fd-theme-ink);
  box-shadow:var(--fd-theme-shadow);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
  scrollbar-color:#a8cee3 #eef7fc;
  scrollbar-width:thin;
}
html body .fd-modal .fd-card,
html body .fd-support-modal .fd-support-dialog,
html body .fd77-reservation-modal .fd77-reservation-dialog,
html body .fd-companion-modal .fd-companion-card,
html body .fd132-modal .fd132-card,
html body .fd-notice-modal .fd-notice-card,
html body .fd-emergency-modal .fd-emergency-card{
  max-height:min(88dvh,900px);
  overflow:auto;
  overscroll-behavior:contain;
}
html body .fd-modal .fd-card h2,
html body .fd-modal .fd-card h3,
html body .fd132-card h2,
html body .fd-companion-card h2,
html body .fd-support-dialog h3,
html body .fd77-reservation-dialog h2,
html body #fdCareCenter .fd-card h2,
html body #fdProfile .fd-card>h2,
html body .fd-coins-card h2{
  color:#15528e;
  font-family:inherit;
  font-weight:900;
  letter-spacing:-.015em;
}
html body .fd-modal .fd-card p,
html body .fd-companion-card p,
html body .fd-support-dialog p,
html body .fd77-reservation-dialog p,
html body .fd132-card p,
html body #fdProfile .fd-card p{
  color:#57758a;
}
html body .fd-modal .fd-close,
html body .fd-companion-close,
html body .fd-qr-close,
html body .fd-notice-close,
html body .fd77-reservation-close,
html body .fd-support-dialog .close,
html body .fd-pet-viewer-close,
html body .fd132-card .fd132-close,
html body #fdCareCenter .fd-care-close{
  display:inline-grid;
  place-items:center;
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  border:1px solid #c9e2f0;
  border-radius:10px;
  background:#edf7fd;
  color:#15528e;
  box-shadow:none;
  font:900 20px/1 system-ui,sans-serif;
  cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
html body .fd-modal .fd-close:hover,
html body .fd-companion-close:hover,
html body .fd-qr-close:hover,
html body .fd-notice-close:hover,
html body .fd77-reservation-close:hover,
html body .fd-support-dialog .close:hover,
html body .fd-pet-viewer-close:hover,
html body .fd132-card .fd132-close:hover{
  background:#dff2fd;
  border-color:#9fcfe8;
  transform:translateY(-1px);
}
html body .fd-modal button,
html body .fd-qr-overlay button,
html body .fd-support-modal button,
html body .fd77-reservation-modal button,
html body .fd-companion-modal button,
html body .fd132-modal button,
html body .fd-notice-modal button,
html body .fd-emergency-modal button{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
  letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
}
html body .fd-modal button:focus-visible,
html body .fd-qr-overlay button:focus-visible,
html body .fd-support-modal button:focus-visible,
html body .fd77-reservation-modal button:focus-visible,
html body .fd-companion-modal button:focus-visible,
html body .fd132-modal button:focus-visible,
html body .fd-notice-modal button:focus-visible,
html body .fd-emergency-modal button:focus-visible{
  outline:2px solid #2d91dc;
  outline-offset:2px;
}
html body .fd-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body .fd-modal textarea,
html body .fd-modal select,
html body .fd-qr-overlay input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body .fd-qr-overlay textarea,
html body .fd-qr-overlay select,
html body .fd-support-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body .fd-support-modal textarea,
html body .fd-support-modal select,
html body .fd77-reservation-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body .fd77-reservation-modal textarea,
html body .fd77-reservation-modal select,
html body .fd-companion-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body .fd-companion-modal textarea,
html body .fd-companion-modal select{
  width:100%;
  min-width:0;
  min-height:38px;
  box-sizing:border-box;
  padding:9px 11px;
  border:1px solid #bdd9e9;
  border-radius:10px;
  background:#fff;
  color:#173b57;
  box-shadow:inset 0 1px 2px rgba(6,39,70,.035);
  font:500 13px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
  accent-color:#1678c6;
}
html body .fd-modal textarea,
html body .fd-qr-overlay textarea,
html body .fd-support-modal textarea,
html body .fd77-reservation-modal textarea,
html body .fd-companion-modal textarea{
  min-height:76px;
  resize:vertical;
}
html body .fd-modal input:focus,
html body .fd-modal textarea:focus,
html body .fd-modal select:focus,
html body .fd-qr-overlay input:focus,
html body .fd-qr-overlay textarea:focus,
html body .fd-qr-overlay select:focus,
html body .fd-support-modal input:focus,
html body .fd-support-modal textarea:focus,
html body .fd-support-modal select:focus,
html body .fd77-reservation-modal input:focus,
html body .fd77-reservation-modal textarea:focus,
html body .fd77-reservation-modal select:focus,
html body .fd-companion-modal input:focus,
html body .fd-companion-modal textarea:focus,
html body .fd-companion-modal select:focus{
  border-color:#48a4dc;
  outline:none;
  box-shadow:0 0 0 3px rgba(45,145,220,.14);
}
html body .fd-modal input::placeholder,
html body .fd-modal textarea::placeholder,
html body .fd-qr-overlay input::placeholder,
html body .fd-qr-overlay textarea::placeholder,
html body .fd-support-modal input::placeholder,
html body .fd-support-modal textarea::placeholder,
html body .fd77-reservation-modal input::placeholder,
html body .fd77-reservation-modal textarea::placeholder,
html body .fd-companion-modal input::placeholder,
html body .fd-companion-modal textarea::placeholder{
  color:#8aa1b1;
  opacity:1;
}
html body .fd-modal input[type=checkbox],
html body .fd-modal input[type=radio],
html body .fd-qr-overlay input[type=checkbox],
html body .fd-support-modal input[type=checkbox],
html body .fd77-reservation-modal input[type=checkbox],
html body .fd-companion-modal input[type=checkbox]{
  width:17px;
  min-width:17px;
  height:17px;
  min-height:17px;
  padding:0;
  accent-color:#1781c9;
}
html body .fd-modal input[type=file],
html body .fd-qr-overlay input[type=file],
html body .fd-support-modal input[type=file],
html body .fd-companion-modal input[type=file]{
  width:100%;
  max-width:100%;
  min-height:36px;
  padding:5px;
  border:1px dashed #b7d7e8;
  border-radius:10px;
  background:#f5fbff;
  color:#496c82;
  font:600 11px/1.35 system-ui,sans-serif;
}
html body .fd-modal label,
html body .fd-qr-overlay label,
html body .fd-support-modal label,
html body .fd77-reservation-modal label,
html body .fd-companion-modal label{
  color:#58788d;
  font-family:inherit;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
}
html body .fd-modal .fd-field,
html body .fd-modal .fd-history-field,
html body .fd-qr-overlay .fd-field,
html body .fd-support-modal .fd-support-form label,
html body .fd77-reservation-modal .fd77-reservation-grid label,
html body .fd-companion-modal .fd-registry-grid label{
  min-width:0;
}
html body .fd-modal .fd-wallet,
html body .fd-modal .fd-steps,
html body .fd-modal .fd-step,
html body .fd-modal .fd-product,
html body .fd-modal .fd-friend,
html body .fd-modal .fd-profile,
html body .fd-companion-modal .fd-companion-section,
html body .fd-companion-modal .fd-care-item,
html body .fd-companion-modal .fd-registry-banner,
html body .fd-companion-modal .fd-goal,
html body .fd132-card .fd132-pet,
html body .fd132-card .fd132-result,
html body .fd-coins-card .fd-coin-row,
html body #fdCareCenter .fd-care-dashboard article,
html body #fdCareCenter .fd-care-checklist label,
html body #fdCareCenter .fd-care-upcoming article,
html body .fd-support-modal .fd-support-provider,
html body .fd77-reservation-modal .fd77-reservation-note{
  border-radius:12px;
}
html body .fd-modal .fd-wallet,
html body .fd-modal .fd-step,
html body .fd-modal .fd-friend,
html body .fd-companion-modal .fd-companion-section,
html body .fd-companion-modal .fd-registry-banner,
html body .fd132-card .fd132-pet,
html body .fd-coins-card .fd-coin-row,
html body #fdCareCenter .fd-care-dashboard article,
html body .fd-support-modal .fd-support-provider{
  border-color:#d4e7f2;
}
html body .fd-modal .fd-primary,
html body .fd-modal .fd-buy,
html body .fd-modal .fd-save,
html body .fd-modal .fd-care-primary,
html body .fd-support-modal .fd-support-submit,
html body .fd77-reservation-modal .fd77-reservation-submit,
html body .fd-companion-modal .fd-inline-btn,
html body .fd-companion-modal .fd-registry-actions button:first-child,
html body .fd132-card .fd132-recover{
  border-radius:10px;
  font-weight:900;
}
html body .fd-modal .fd-secondary,
html body .fd-modal .fd-care-secondary,
html body .fd-support-modal .fd-support-actions button,
html body .fd77-reservation-modal .fd77-reservation-close,
html body .fd-companion-modal .fd-record-actions button,
html body .fd-companion-modal .fd-registry-actions button{
  border-radius:10px;
}
html body .fd-support-modal .fd-support-form,
html body .fd77-reservation-modal .fd77-reservation-form,
html body .fd-companion-modal .fd-registry-grid,
html body #fdProfile .fd-profile,
html body #fdCareCenter .fd-care-grid2{
  min-width:0;
}
html body .fd-modal .fd-history,
html body .fd-modal .fd-history-list,
html body .fd-modal .fd-coins-ledger,
html body .fd-support-modal .fd-support-list,
html body .fd77-reservation-modal #fd77ReservationBody,
html body .fd-companion-modal .fd-companion-section{
  scrollbar-width:thin;
  scrollbar-color:#a8cee3 #eef7fc;
}
html body .fd-modal .fd-history-item,
html body .fd-modal .fd-history-empty,
html body .fd-modal .fd-qr-privacy,
html body .fd-support-modal .fd-support-note,
html body .fd77-reservation-modal .fd77-reservation-note,
html body .fd-companion-modal .fd-registry-status{
  border-radius:10px;
}
html body .fd132-toolbar button{
  min-height:28px;
  border-radius:9px;
  border-color:#c8e2f0;
  background:#fff;
  color:#15528e;
  box-shadow:0 3px 8px rgba(6,39,70,.07);
  font-size:10px;
  font-weight:900;
}
html body .fd132-toolbar button:focus-visible{
  outline:2px solid #2d91dc;
  outline-offset:2px;
}
html body .fd-pet-voice{
  border-color:#c8e2f0;
  border-radius:16px;
  box-shadow:0 16px 38px rgba(6,39,70,.2);
}
html body .fd-community-card,
html body #fdCommunityModal .fd-community-card{
  border:1px solid #c8e2f0;
  border-radius:18px;
  box-shadow:var(--fd-theme-shadow);
}
html body .fd-community-tabs button,
html body .fd-community-close{
  border-radius:10px;
  font-weight:850;
}
html body .fd-notice-card .fd-notice-tab,
html body .fd-notice-card .fd-notice-permission,
html body .fd-notice-card .fd-notice-close{
  border-radius:9px;
}
html body .fd-notice-card .fd-notice-tab[aria-selected=true]{
  box-shadow:0 3px 9px rgba(11,95,180,.16);
}
html body .fd77-reservation-modal .fd77-reservation-error,
html body .fd-support-modal .fd-support-error{
  border-radius:10px;
}
html body .fd77-reservation-modal .fd77-reservation-success,
html body .fd-support-modal .fd-support-question-success{
  border-radius:14px;
}
@media(max-width:520px){
  html body .fd-modal .fd-card,
  html body .fd-qr-overlay .fd-qr-pet-card,
  html body .fd-support-modal .fd-support-dialog,
  html body .fd77-reservation-modal .fd77-reservation-dialog,
  html body .fd-companion-modal .fd-companion-card,
  html body .fd132-modal .fd132-card,
  html body .fd-notice-modal .fd-notice-card{
    border-radius:16px;
  }
  html body .fd-modal .fd-card,
  html body .fd-companion-modal .fd-companion-card,
  html body .fd132-modal .fd132-card{
    padding:14px;
  }
}


/* v194 — Restyle only the upper HUD. Keep the board and bottom toolbar untouched. */
html body main.app>.topbar{
  grid-template-columns:minmax(0,1fr) auto auto!important;
  grid-template-rows:34px 32px!important;
  grid-template-areas:"brand level tools" "resources resources resources"!important;
  align-items:center!important;gap:4px 6px!important;
  padding:6px 7px!important;border:1px solid #b9dff2!important;border-radius:14px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f4fbff 65%,#e5f6ff 100%)!important;
  box-shadow:0 5px 15px #0b5d8d18!important;overflow:hidden!important;
}
html body main.app>.topbar .brand{min-width:0!important;gap:6px!important}
html body main.app>.topbar .brand-avatar{flex:0 0 29px!important;width:29px!important;height:29px!important;min-width:29px!important;border-radius:10px!important;background:linear-gradient(145deg,#dff5ff,#fff)!important;box-shadow:0 2px 7px #0b5d8d1c!important}
html body main.app>.topbar .brand-avatar img{width:27px!important;height:27px!important;object-fit:contain!important}
html body main.app>.topbar .brand h1{font-size:clamp(11px,3.5vw,15px)!important;line-height:1.05!important;font-weight:950!important;letter-spacing:.015em!important;color:#0a467b!important}
html body main.app>.topbar .brand h1::before{font-size:.7em!important;color:#6d8da4!important}
html body main.app>.topbar .brand p{display:none!important}
html body main.app>.topbar #fdLevelChip{
  display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;
  grid-template-areas:"lab num" "record record"!important;align-content:center!important;justify-content:center!important;
  justify-self:end!important;gap:1px 4px!important;width:66px!important;min-width:66px!important;
  height:32px!important;min-height:32px!important;margin:0!important;padding:3px 5px!important;
  border:1px solid #c6e8f6!important;border-radius:10px!important;
  background:linear-gradient(150deg,#ffffff,#e7f7ff)!important;color:#164e78!important;box-shadow:none!important;
}
html body main.app>.topbar #fdLevelChip span{grid-area:lab!important;font-size:7px!important;line-height:1!important;color:#66849a!important;font-weight:900!important}
html body main.app>.topbar #fdLevelChip b{grid-area:num!important;font-size:13px!important;line-height:1!important;color:#075eb1!important}
html body main.app>.topbar #fdLevelChip small{grid-area:record!important;font-size:6px!important;line-height:1.05!important;text-align:center!important;color:#6d8da4!important;white-space:nowrap!important}
html body main.app>.topbar .fd-header-tools{gap:4px!important;width:auto!important;justify-content:flex-end!important}
html body main.app>.topbar .fd-header-tools button{
  flex:0 0 26px!important;width:26px!important;min-width:26px!important;max-width:26px!important;
  height:26px!important;min-height:26px!important;max-height:26px!important;border:1px solid #b9dff2!important;
  border-radius:9px!important;background:linear-gradient(145deg,#fff,#e8f7ff)!important;
  color:#1768a9!important;box-shadow:0 2px 5px #0b5d8d12!important;
}
html body main.app>.topbar .fd-header-tools button::before{font-size:15px!important;color:#1768a9!important}
html body main.app>.topbar #fdHeaderCare::before{color:#df6380!important}
html body main.app>.topbar #fdHeaderEmergency::before{color:#287db5!important}
html body main.app>.topbar .resources{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;width:100%!important;
  height:auto!important;min-height:32px!important;margin:0!important;padding:0!important;
}
html body main.app>.topbar .resource{
  display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;grid-template-areas:"icon value" "label label"!important;
  align-items:center!important;justify-items:center!important;gap:2px 3px!important;
  min-width:0!important;min-height:31px!important;height:auto!important;margin:0!important;
  padding:3px 4px 2px!important;border:1px solid #cbe7f4!important;border-radius:9px!important;
  background:linear-gradient(160deg,#fff,#f1faff)!important;color:#194e72!important;
  box-shadow:0 2px 6px #0b5d8d0d!important;white-space:normal!important;
}
html body main.app>.topbar .resource img{grid-area:icon!important;width:16px!important;height:16px!important;max-width:16px!important}
html body main.app>.topbar .resource b{grid-area:value!important;justify-self:start!important;font-size:12px!important;line-height:1.05!important;font-weight:950!important;color:#064f8c!important}
html body main.app>.topbar .resource span{grid-area:label!important;display:block!important;width:100%!important;font-size:6.5px!important;font-weight:850!important;line-height:1.1!important;text-align:center!important;letter-spacing:.035em!important;color:#6a879b!important;overflow-wrap:anywhere!important}

/* 02 — Objective, moves and progress read as one deliberate card. */
html body main.app>.game-layout>.goals{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;grid-template-areas:"title moves" "goal progress"!important;
  align-items:center!important;gap:5px 8px!important;padding:7px 9px!important;
  border:1px solid #b9dff2!important;border-radius:13px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f5fbff 72%,#e8f8ff 100%)!important;
  box-shadow:0 5px 13px #0b5d8d12!important;overflow:visible!important;
}
html body main.app>.game-layout>.goals .side-title{
  grid-area:title!important;display:flex!important;align-items:center!important;gap:5px!important;
  margin:0!important;padding:0!important;border:0!important;font-size:10px!important;line-height:1.15!important;
  font-weight:950!important;letter-spacing:.045em!important;color:#175a8c!important;
}
html body main.app>.game-layout>.goals .side-title span::before{content:"02 · "!important;color:#7092a9!important}
html body main.app>.game-layout>.goals .side-title small{display:none!important}
html body main.app>.game-layout>.goals .goal-box{
  grid-area:goal!important;display:flex!important;align-items:center!important;gap:6px!important;
  min-width:0!important;min-height:33px!important;margin:0!important;padding:4px 8px!important;
  border:1px solid #cfeaf6!important;border-radius:10px!important;
  background:linear-gradient(135deg,#eaf8ff,#fff)!important;box-shadow:none!important;
}
html body main.app>.game-layout>.goals .goal-box img{flex:0 0 20px!important;width:20px!important;height:20px!important;object-fit:contain!important}
html body main.app>.game-layout>.goals .goal-box strong{font-size:19px!important;line-height:1!important;font-weight:950!important;color:#075eb1!important}
html body main.app>.game-layout>.goals .goal-box span{display:block!important;min-width:0!important;font-size:8px!important;line-height:1.15!important;font-weight:750!important;color:#55778d!important;white-space:normal!important}
html body main.app>.game-layout>.goals .moves-box{
  grid-area:moves!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;min-width:82px!important;min-height:30px!important;height:30px!important;margin:0!important;
  padding:4px 9px!important;border:1px solid #0b5fb4!important;border-radius:9px!important;
  background:linear-gradient(140deg,#2d91dc,#075eb1)!important;color:#fff!important;
  box-shadow:0 4px 9px #075eb126!important;font-size:8px!important;font-weight:900!important;
}
html body main.app>.game-layout>.goals .moves-box span{font-size:7px!important;line-height:1!important;color:#e8f7ff!important}
html body main.app>.game-layout>.goals .moves-box strong{font-size:18px!important;line-height:1!important;color:#fff!important}
html body main.app>.game-layout>.goals .progress-row{grid-area:progress!important;min-width:0!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
html body main.app>.game-layout>.goals .progress-copy{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;font-size:8px!important;line-height:1.15!important;font-weight:800!important;color:#53758b!important}
html body main.app>.game-layout>.goals .progress-copy span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body main.app>.game-layout>.goals .progress-copy b{flex:0 0 auto!important;color:#0769b5!important}
html body main.app>.game-layout>.goals .progress-track{height:5px!important;margin-top:4px!important;border-radius:99px!important;overflow:hidden!important}
html body main.app>.game-layout>.goals .how,html body main.app>.game-layout>.goals>.fd-level-stage-v92{display:none!important}
@media(max-width:360px){
  html body main.app>.topbar{grid-template-rows:32px 30px!important;gap:3px 4px!important;padding:5px!important}
  html body main.app>.topbar .brand-avatar{flex-basis:25px!important;width:25px!important;height:25px!important;min-width:25px!important}
  html body main.app>.topbar .brand-avatar img{width:23px!important;height:23px!important}
  html body main.app>.topbar .brand h1{font-size:11px!important}
  html body main.app>.topbar #fdLevelChip{width:58px!important;min-width:58px!important;padding:3px!important}
  html body main.app>.topbar .fd-header-tools{gap:2px!important}
  html body main.app>.topbar .fd-header-tools button{flex-basis:23px!important;width:23px!important;min-width:23px!important;max-width:23px!important;height:23px!important;min-height:23px!important;max-height:23px!important}
  html body main.app>.topbar .resources{gap:3px!important}
  html body main.app>.topbar .resource{padding:3px 2px 2px!important}
  html body main.app>.topbar .resource span{font-size:5.8px!important}
  html body main.app>.game-layout>.goals{gap:4px 5px!important;padding:6px!important}
  html body main.app>.game-layout>.goals .goal-box{gap:4px!important;padding:4px 5px!important}
  html body main.app>.game-layout>.goals .goal-box strong{font-size:17px!important}
  html body main.app>.game-layout>.goals .goal-box span{font-size:7px!important}
  html body main.app>.game-layout>.goals .moves-box{min-width:75px!important;padding:4px 6px!important}
}


/* v195 — Rebuild only the top HUD layout. Keep the board and lower toolbar untouched. */
/* 01: one aligned brand/level/actions row and three resource cards beneath it. */
html body main.app>.topbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  grid-template-rows:34px auto!important;
  grid-template-areas:"brand level tools" "resources resources resources"!important;
  align-items:center!important;
  gap:5px 7px!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:6px 7px!important;
  border:1px solid #a9d8ee!important;border-radius:14px!important;
  background:linear-gradient(145deg,#fff 0%,#f6fcff 60%,#e5f6ff 100%)!important;
  box-shadow:0 5px 14px #0a558b17!important;overflow:visible!important;
}
html body main.app>.topbar .brand{
  grid-area:brand!important;display:flex!important;align-items:center!important;
  gap:6px!important;width:auto!important;min-width:0!important;padding:0!important;overflow:hidden!important;
}
html body main.app>.topbar .brand-avatar{
  display:grid!important;place-items:center!important;flex:0 0 29px!important;
  width:29px!important;height:29px!important;min-width:29px!important;
  border:1px solid #c5e8f7!important;border-radius:10px!important;
  background:linear-gradient(145deg,#e0f6ff,#fff)!important;box-shadow:0 2px 6px #0a558b12!important;overflow:hidden!important;
}
html body main.app>.topbar .brand-avatar img{display:block!important;width:26px!important;height:26px!important;object-fit:contain!important}
html body main.app>.topbar .brand h1{
  margin:0!important;min-width:0!important;max-width:100%!important;
  font-size:clamp(11px,3.5vw,15px)!important;line-height:1.05!important;
  font-weight:950!important;letter-spacing:.01em!important;color:#0b4778!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
html body main.app>.topbar .brand h1::before{content:"01 · "!important;font-size:.68em!important;color:#7190a5!important}
html body main.app>.topbar .brand p{display:none!important}
html body main.app>.topbar #fdLevelChip{
  grid-area:level!important;display:grid!important;
  grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;
  grid-template-areas:"lab num" "record record"!important;
  align-content:center!important;justify-content:center!important;justify-self:end!important;align-self:center!important;
  gap:1px 4px!important;width:64px!important;min-width:64px!important;max-width:64px!important;
  height:32px!important;min-height:32px!important;margin:0!important;padding:3px 5px!important;
  border:1px solid #bde4f3!important;border-radius:10px!important;
  background:linear-gradient(150deg,#fff,#eaf8ff)!important;color:#164e78!important;box-shadow:none!important;
}
html body main.app>.topbar #fdLevelChip span{grid-area:lab!important;font-size:7px!important;line-height:1!important;font-weight:900!important;color:#66849a!important}
html body main.app>.topbar #fdLevelChip b{grid-area:num!important;font-size:13px!important;line-height:1!important;color:#075eb1!important;font-weight:950!important}
html body main.app>.topbar #fdLevelChip small{grid-area:record!important;font-size:6px!important;line-height:1.05!important;text-align:center!important;color:#6d8da4!important;white-space:nowrap!important}
html body main.app>.topbar .fd-header-tools{
  grid-area:tools!important;display:flex!important;flex-flow:row nowrap!important;
  align-items:center!important;justify-content:flex-end!important;gap:3px!important;
  width:auto!important;min-width:0!important;margin:0!important;padding:0!important;
}
html body main.app>.topbar .fd-header-tools button{
  display:inline-flex!important;flex:0 0 24px!important;align-items:center!important;justify-content:center!important;
  width:24px!important;min-width:24px!important;max-width:24px!important;
  height:24px!important;min-height:24px!important;max-height:24px!important;
  margin:0!important;padding:0!important;border:1px solid #b8dff0!important;border-radius:8px!important;
  background:linear-gradient(145deg,#fff,#e7f7ff)!important;color:#1768a9!important;
  box-shadow:0 2px 5px #0b5d8d10!important;font-size:0!important;line-height:0!important;overflow:hidden!important;
}
html body main.app>.topbar .fd-header-tools button::before{
  display:block!important;flex:0 0 auto!important;width:auto!important;height:auto!important;
  margin:0!important;background:none!important;mask:none!important;-webkit-mask:none!important;
  font-family:Arial,sans-serif!important;font-size:15px!important;line-height:1!important;color:#1768a9!important;
}
html body main.app>.topbar #fdHeaderInstructions::before{content:"?"!important}
html body main.app>.topbar #fdHeaderProfile::before{content:"♙"!important}
html body main.app>.topbar #fdHeaderCare::before{content:"♥"!important;color:#df6380!important}
html body main.app>.topbar #fdHeaderEmergency::before{content:"＋"!important;color:#287db5!important}
html body main.app>.topbar .resources{
  grid-area:resources!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;gap:4px!important;width:100%!important;min-width:0!important;
  height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
}
html body main.app>.topbar .resource{
  display:grid!important;grid-template-columns:17px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;grid-template-areas:"icon value" "label label"!important;
  align-items:center!important;justify-items:center!important;gap:2px 3px!important;
  width:100%!important;min-width:0!important;min-height:33px!important;height:auto!important;
  margin:0!important;padding:3px 4px 2px!important;border:1px solid #c7e6f3!important;border-radius:9px!important;
  background:linear-gradient(160deg,#fff,#f0faff)!important;color:#194e72!important;
  box-shadow:0 2px 6px #0b5d8d0a!important;white-space:normal!important;overflow:hidden!important;
}
html body main.app>.topbar .resource img{grid-area:icon!important;width:16px!important;height:16px!important;max-width:16px!important;object-fit:contain!important}
html body main.app>.topbar .resource b{grid-area:value!important;justify-self:start!important;min-width:0!important;font-size:12px!important;line-height:1.05!important;font-weight:950!important;color:#064f8c!important;white-space:nowrap!important}
html body main.app>.topbar .resource span{
  grid-area:label!important;display:block!important;width:100%!important;font-size:6.5px!important;
  font-weight:850!important;line-height:1.1!important;text-align:center!important;letter-spacing:.025em!important;
  color:#6a879b!important;overflow-wrap:anywhere!important;
}

/* 02: title/moves on top; goal/progress form a balanced pair. Remove the unrelated milestone card from this HUD. */
html body main.app>.game-layout>.goals{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  grid-template-areas:"title moves" "goal progress"!important;
  align-items:center!important;justify-items:stretch!important;
  gap:6px 8px!important;width:100%!important;min-width:0!important;height:auto!important;
  margin:0!important;padding:8px 9px!important;border:1px solid #a9d8ee!important;
  border-radius:13px!important;background:linear-gradient(145deg,#fff 0%,#f5fbff 70%,#e8f8ff 100%)!important;
  box-shadow:0 5px 13px #0b5d8d10!important;overflow:visible!important;
}
html body main.app>.game-layout>.goals .side-title{
  grid-area:title!important;display:flex!important;align-items:center!important;gap:5px!important;
  min-width:0!important;margin:0!important;padding:0!important;border:0!important;
  font-size:10px!important;line-height:1.15!important;font-weight:950!important;
  letter-spacing:.045em!important;color:#175a8c!important;
}
html body main.app>.game-layout>.goals .side-title span::before{content:"02 · "!important;color:#7191a6!important}
html body main.app>.game-layout>.goals .side-title small{display:none!important}
html body main.app>.game-layout>.goals .goal-box{
  grid-area:goal!important;display:flex!important;align-items:center!important;gap:6px!important;
  width:100%!important;min-width:0!important;min-height:40px!important;height:auto!important;
  margin:0!important;padding:5px 7px!important;border:1px solid #c8e7f5!important;border-radius:10px!important;
  background:linear-gradient(145deg,#eaf8ff,#fff)!important;box-shadow:none!important;overflow:hidden!important;
}
html body main.app>.game-layout>.goals .goal-box>img{
  display:block!important;flex:0 0 22px!important;width:22px!important;height:22px!important;
  min-width:22px!important;object-fit:contain!important;
}
html body main.app>.game-layout>.goals .goal-box>.fd-goal-copy{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;
  gap:5px!important;width:100%!important;min-width:0!important;margin:0!important;
}
html body main.app>.game-layout>.goals .fd-goal-main{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;
  align-content:center!important;gap:2px!important;min-width:0!important;margin:0!important;
}
html body main.app>.game-layout>.goals .fd-goal-main>strong{
  display:block!important;margin:0!important;font-size:18px!important;line-height:1!important;
  font-weight:950!important;color:#075eb1!important;
}
html body main.app>.game-layout>.goals .fd-goal-main>span{
  display:block!important;min-width:0!important;margin:0!important;font-size:7px!important;line-height:1.1!important;
  font-weight:800!important;color:#57788d!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
html body main.app>.game-layout>.goals .fd-ice-goal{
  display:flex!important;align-items:center!important;gap:3px!important;min-width:48px!important;
  margin:0!important;padding:3px 4px!important;border:1px solid #b9e8ff!important;border-radius:9px!important;
  background:#eefaff!important;color:#17628e!important;white-space:nowrap!important;
}
html body main.app>.game-layout>.goals .fd-ice-goal[hidden]{display:none!important}
html body main.app>.game-layout>.goals .fd-ice-goal img{width:18px!important;height:18px!important;min-width:18px!important;object-fit:contain!important}
html body main.app>.game-layout>.goals .fd-ice-goal b{display:block!important;font-size:10px!important;line-height:1!important;color:#0b6fb2!important}
html body main.app>.game-layout>.goals .fd-ice-goal small{display:block!important;font-size:5px!important;font-weight:900!important;letter-spacing:.02em!important;color:#6a879c!important}
html body main.app>.game-layout>.goals .moves-box{
  grid-area:moves!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;min-width:0!important;width:100%!important;min-height:30px!important;height:30px!important;
  margin:0!important;padding:4px 7px!important;border:1px solid #0b5fb4!important;border-radius:9px!important;
  background:linear-gradient(140deg,#2d91dc,#075eb1)!important;color:#fff!important;
  box-shadow:0 3px 8px #075eb11a!important;font-size:8px!important;font-weight:950!important;overflow:hidden!important;
}
html body main.app>.game-layout>.goals .moves-box>span{font-size:7px!important;line-height:1!important;color:#e8f7ff!important;white-space:nowrap!important}
html body main.app>.game-layout>.goals .moves-box>strong{font-size:17px!important;line-height:1!important;color:#fff!important}
html body main.app>.game-layout>.goals .moves-box>.fd-move-actions{display:none!important}
html body main.app>.game-layout>.goals .progress-row{
  grid-area:progress!important;display:block!important;align-self:center!important;min-width:0!important;width:100%!important;
  height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
html body main.app>.game-layout>.goals .progress-copy{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;
  min-width:0!important;margin:0!important;font-size:8px!important;line-height:1.1!important;
  font-weight:850!important;color:#53758b!important;
}
html body main.app>.game-layout>.goals .progress-copy span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body main.app>.game-layout>.goals .progress-copy b{flex:0 0 auto!important;color:#0769b5!important;font-size:8px!important}
html body main.app>.game-layout>.goals .progress-track{height:5px!important;margin-top:4px!important;border-radius:99px!important;overflow:hidden!important}
html body main.app>.game-layout>.goals .how,
html body main.app>.game-layout>.goals>.fd-level-stage-v92,
html body main.app>.game-layout>.goals>#fdMilestoneV143{display:none!important}

/* Very narrow screens: put the four actions on their own row instead of squeezing the title. */
@media(max-width:360px){
  html body main.app>.topbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:32px 25px auto!important;
    grid-template-areas:"brand level" "tools tools" "resources resources"!important;
    gap:4px!important;padding:5px!important;
  }
  html body main.app>.topbar .brand-avatar{flex-basis:25px!important;width:25px!important;height:25px!important;min-width:25px!important}
  html body main.app>.topbar .brand-avatar img{width:23px!important;height:23px!important}
  html body main.app>.topbar .brand h1{font-size:11px!important}
  html body main.app>.topbar #fdLevelChip{width:58px!important;min-width:58px!important;max-width:58px!important;padding:3px!important}
  html body main.app>.topbar .fd-header-tools{justify-self:center!important;justify-content:center!important;width:100%!important;gap:8px!important}
  html body main.app>.topbar .fd-header-tools button{flex-basis:25px!important;width:25px!important;min-width:25px!important;max-width:25px!important;height:25px!important;min-height:25px!important;max-height:25px!important}
  html body main.app>.topbar .resources{gap:3px!important}
  html body main.app>.topbar .resource{padding:3px 2px 2px!important}
  html body main.app>.topbar .resource span{font-size:5.8px!important}
  html body main.app>.game-layout>.goals{gap:5px!important;padding:6px!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}
  html body main.app>.game-layout>.goals .goal-box{gap:4px!important;padding:4px 5px!important}
  html body main.app>.game-layout>.goals .goal-box>img{flex-basis:19px!important;width:19px!important;height:19px!important;min-width:19px!important}
  html body main.app>.game-layout>.goals .fd-goal-main>strong{font-size:17px!important}
  html body main.app>.game-layout>.goals .fd-goal-main>span{font-size:6.5px!important}
  html body main.app>.game-layout>.goals .moves-box{padding:4px 5px!important}
}


/* v196 — Font Awesome 5 local icons for header (01), powers (04) and quick actions (05).
   The font and stylesheet are served by this repository; no third-party CDN is required. */
html body main.app>.topbar .fd-header-tools button::before{
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  font-style:normal!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  font-size:14px!important;
  line-height:1!important;
}
html body main.app>.topbar #fdHeaderInstructions::before{content:"\f059"!important}
html body main.app>.topbar #fdHeaderProfile::before{content:"\f2bd"!important}
html body main.app>.topbar #fdHeaderCare::before{content:"\f21e"!important}
html body main.app>.topbar #fdHeaderEmergency::before{content:"\f479"!important}
html body main.app>.topbar #fdHeaderInstructions{color:#1768a9!important}
html body main.app>.topbar #fdHeaderProfile{color:#1768a9!important}
html body main.app>.topbar #fdHeaderCare{color:#d74d7b!important}
html body main.app>.topbar #fdHeaderEmergency{color:#c44742!important}

/* 04 — All four utility icons use the same FA glyph family. */
html body main.app>.game-layout>.boosters .mini-btn::before{
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  font-style:normal!important;
  font-size:14px!important;
  line-height:1!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:antialiased!important;
}
html body main.app>.game-layout>.boosters #soundBtn::before{content:"\f028"!important;color:#1768a9!important}
html body main.app>.game-layout>.boosters #storeBtn::before{content:"\f54e"!important;color:#21875d!important}
html body main.app>.game-layout>.boosters #fdMenuBtn::before{content:"\f0c9"!important;color:#315b78!important}
html body main.app>.game-layout>.boosters #fdNotifyBtn{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  border:1px solid #f0d38a!important;
  background:linear-gradient(145deg,#fffdf4,#fff0c9)!important;
  color:#a36b06!important;
  z-index:2!important;
}
html body main.app>.game-layout>.boosters #fdNotifyBtn::before{
  content:"\f0f3"!important;
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#a36b06!important;
}
html body main.app>.game-layout>.boosters #fdNotifyBtn #fdCommunityBadge{
  position:absolute!important;
  top:-5px!important;
  right:-5px!important;
  z-index:5!important;
  display:inline-grid!important;
  place-items:center!important;
  min-width:14px!important;
  width:auto!important;
  height:14px!important;
  margin:0!important;
  padding:0 3px!important;
  border:1.5px solid #fff!important;
  border-radius:999px!important;
  background:#e44755!important;
  color:#fff!important;
  font:900 8px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  box-shadow:0 2px 4px #102b472e!important;
  pointer-events:none!important;
}
html body main.app>.game-layout>.boosters #fdNotifyBtn #fdCommunityBadge[hidden]{
  display:none!important;
}

/* 05 — Compact footer icon buttons: consistent visual weight and no emoji glyphs. */
html body main.app>footer#fdFooter button::before{
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  font-style:normal!important;
  font-size:15px!important;
  line-height:1!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}
html body main.app>footer#fdFooter #fdShareQr::before{content:"\f029"!important}
html body main.app>footer#fdFooter #fdCopyLink::before{content:"\f0c5"!important}
html body main.app>footer#fdFooter #fdShareGame::before{content:"\f1e0"!important}
html body main.app>footer#fdFooter #fdOpenProfile::before{content:"\f2bd"!important}
html body main.app>footer#fdFooter #fdOpenCare::before{content:"\f21e"!important}
html body main.app>footer#fdFooter #fdPetFind::before{content:"\f002"!important}
html body main.app>footer#fdFooter #fdPetSave::before{content:"\f0c7"!important}
html body main.app>footer#fdFooter #fd132Collection::before{content:"\f1b0"!important}
html body main.app>footer#fdFooter #fd132Daily::before{content:"\f06b"!important}
html body main.app>footer#fdFooter #fd132ModeInfo::before{content:"\f140"!important}

/* Sharper, uniform button surfaces while keeping each action's familiar meaning. */
html body main.app>footer#fdFooter button,
html body main.app>footer#fdFooter #fdPetCloudBar button[id]{
  border:1px solid #b8dff0!important;
  background:linear-gradient(145deg,#fff,#eaf7ff)!important;
  color:#1768a9!important;
  box-shadow:0 2px 5px #0b5d8d10!important;
}
html body main.app>footer#fdFooter #fdOpenCare{color:#d74d7b!important}
html body main.app>footer#fdFooter #fdPetFind{color:#1768a9!important}
html body main.app>footer#fdFooter #fdPetSave{color:#21875d!important}
html body main.app>footer#fdFooter #fd132Daily{color:#bf7807!important}
html body main.app>footer#fdFooter button:hover{
  filter:brightness(1.03)!important;
  box-shadow:0 3px 8px #0b5d8d18!important;
}
@media(max-width:360px){
  html body main.app>.topbar .fd-header-tools button::before{font-size:13px!important}
  html body main.app>.game-layout>.boosters #fdNotifyBtn #fdCommunityBadge{top:-4px!important;right:-4px!important}
  html body main.app>footer#fdFooter button::before{font-size:14px!important}
}


/* 05 icon repair — force the five left-most action glyphs to render above inherited button styles. */
html body main.app>footer#fdFooter #fd132Collection,
html body main.app>footer#fdFooter #fd132Daily,
html body main.app>footer#fdFooter #fd132ModeInfo,
html body main.app>footer#fdFooter #fdPetFind,
html body main.app>footer#fdFooter #fdPetSave{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body main.app>footer#fdFooter #fd132Collection::before{content:"\f1b0"!important}
html body main.app>footer#fdFooter #fd132Daily::before{content:"\f06b"!important}
html body main.app>footer#fdFooter #fd132ModeInfo::before{content:"\f140"!important}
html body main.app>footer#fdFooter #fdPetFind::before{content:"\f002"!important}
html body main.app>footer#fdFooter #fdPetSave::before{content:"\f0c7"!important}
html body main.app>footer#fdFooter #fd132Collection::before,
html body main.app>footer#fdFooter #fd132Daily::before,
html body main.app>footer#fdFooter #fd132ModeInfo::before,
html body main.app>footer#fdFooter #fdPetFind::before,
html body main.app>footer#fdFooter #fdPetSave::before{
  display:inline-block!important;
  flex:0 0 auto!important;
  visibility:visible!important;
  opacity:1!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  font-style:normal!important;
  font-size:15px!important;
  line-height:1!important;
  text-indent:0!important;
  speak:none!important;
  -webkit-font-smoothing:antialiased!important;
}


/* Section 05: use native Unicode symbols, no icon font or CDN dependency. */
html body main.app>footer#fdFooter button::before{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  font-style:normal!important;
  font-size:18px!important;
  line-height:1!important;
  display:inline-block!important;
  visibility:visible!important;
  opacity:1!important;
  text-indent:0!important;
  -webkit-font-smoothing:antialiased!important;
}
html body main.app>footer#fdFooter #fdShareQr::before{content:"▦"!important}
html body main.app>footer#fdFooter #fdCopyLink::before{content:"▣"!important}
html body main.app>footer#fdFooter #fdShareGame::before{content:"↗"!important}
html body main.app>footer#fdFooter #fdOpenProfile::before{content:"♙"!important}
html body main.app>footer#fdFooter #fdOpenCare::before{content:"✚"!important}
html body main.app>footer#fdFooter #fd132Collection::before{content:"♣"!important}
html body main.app>footer#fdFooter #fd132Daily::before{content:"★"!important}
html body main.app>footer#fdFooter #fd132ModeInfo::before{content:"ⓘ"!important}
html body main.app>footer#fdFooter #fdPetFind::before{content:"⌕"!important}
html body main.app>footer#fdFooter #fdPetSave::before{content:"✓"!important}


/* FormyDog footer polish v201: brighter controls, stable native icons, clear focus. */
html body main.app>footer#fdFooter{
  gap:12px!important;
}
html body main.app>footer#fdFooter .fd-game-share,
html body main.app>footer#fdFooter .fd-pet-tools{
  gap:9px!important;
}
html body main.app>footer#fdFooter button{
  position:relative!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 13px!important;
  border:1px solid rgba(25,127,211,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff 0%,#f1f8ff 100%)!important;
  color:#17456d!important;
  box-shadow:0 3px 0 rgba(25,127,211,.08),0 6px 15px rgba(20,71,111,.07)!important;
  font-weight:800!important;
  letter-spacing:.015em!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important;
}
html body main.app>footer#fdFooter button::before{
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:rgba(25,127,211,.10)!important;
  color:#197fd3!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
}
html body main.app>footer#fdFooter #fd132Collection::before{content:"♣"!important;color:#20875b!important;background:#e4f8ed!important}
html body main.app>footer#fdFooter #fd132Daily::before{content:"★"!important;color:#ad7000!important;background:#fff2c9!important}
html body main.app>footer#fdFooter #fd132ModeInfo::before{content:"ⓘ"!important;color:#197fd3!important;background:#e4f2ff!important}
html body main.app>footer#fdFooter #fdPetFind::before{content:"⌕"!important;color:#7c4dcc!important;background:#f0e8ff!important}
html body main.app>footer#fdFooter #fdPetSave::before{content:"✓"!important;color:#21875d!important;background:#e4f8ed!important}
html body main.app>footer#fdFooter #fdShareQr::before{content:"▦"!important}
html body main.app>footer#fdFooter #fdCopyLink::before{content:"▣"!important}
html body main.app>footer#fdFooter #fdShareGame::before{content:"↗"!important}
html body main.app>footer#fdFooter #fdOpenProfile::before{content:"♙"!important}
html body main.app>footer#fdFooter #fdOpenCare::before{content:"✚"!important}
html body main.app>footer#fdFooter button:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(25,127,211,.45)!important;
  box-shadow:0 4px 0 rgba(25,127,211,.08),0 10px 20px rgba(20,71,111,.13)!important;
  filter:saturate(1.08)!important;
}
html body main.app>footer#fdFooter button:active{
  transform:translateY(1px) scale(.985)!important;
  box-shadow:0 1px 0 rgba(25,127,211,.08)!important;
}
html body main.app>footer#fdFooter button:focus-visible{
  outline:3px solid #ffca28!important;
  outline-offset:3px!important;
}
html body main.app>footer#fdFooter #fdOpenCare{border-color:#f1c4d4!important;background:linear-gradient(180deg,#fff 0%,#fff2f6 100%)!important}
html body main.app>footer#fdFooter #fdOpenCare::before{color:#d74d7b!important;background:#ffe2ec!important}
html body main.app>footer#fdFooter #fdPetFind{border-color:#d9caf5!important}
html body main.app>footer#fdFooter #fdPetSave{border-color:#bfe8d1!important}
@media(max-width:480px){
  html body main.app>footer#fdFooter button{min-height:40px!important;padding:8px 10px!important;border-radius:12px!important;gap:6px!important;font-size:11px!important}
  html body main.app>footer#fdFooter button::before{flex-basis:22px!important;width:22px!important;height:22px!important;font-size:17px!important}
}
@media(prefers-reduced-motion:reduce){
  html body main.app>footer#fdFooter button{transition:none!important}
  html body main.app>footer#fdFooter button:hover,html body main.app>footer#fdFooter button:active{transform:none!important}
}


/* FormyDog section 05 v202: remove added padding and keep every action on one row. */
html body main.app>footer#fdFooter{
  flex-wrap:nowrap!important;
  justify-content:center!important;
  gap:3px!important;
  padding:0!important;
  max-height:42px!important;
  overflow:visible!important;
}
html body main.app>footer#fdFooter::before{
  flex:0 0 auto!important;
  width:auto!important;
  padding:0!important;
  white-space:nowrap!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:0!important;
}
html body main.app>footer#fdFooter button,
html body main.app>footer#fdFooter button[id],
html body main.app>footer#fdFooter #fdPetCloudBar button[id]{
  flex:0 0 27px!important;
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  border-radius:7px!important;
}
html body main.app>footer#fdFooter button::before{
  flex:0 0 auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:16px!important;
}
@media(max-width:390px){
  html body main.app>footer#fdFooter{gap:2px!important}
  html body main.app>footer#fdFooter::before{font-size:6px!important}
  html body main.app>footer#fdFooter button,
  html body main.app>footer#fdFooter button[id],
  html body main.app>footer#fdFooter #fdPetCloudBar button[id]{
    flex-basis:25px!important;width:25px!important;min-width:25px!important;max-width:25px!important;
    height:25px!important;min-height:25px!important;max-height:25px!important;
  }
}


/* FormyDog section 05 v203: title on its own line, action buttons below. */
html body main.app>footer#fdFooter{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-content:flex-start!important;
  row-gap:3px!important;
  column-gap:3px!important;
  padding:0!important;
  max-height:none!important;
}
html body main.app>footer#fdFooter::before{
  display:block!important;
  flex:0 0 100%!important;
  width:100%!important;
  text-align:left!important;
  padding:0 3px!important;
  white-space:normal!important;
  line-height:10px!important;
}
html body main.app>footer#fdFooter button,
html body main.app>footer#fdFooter button[id],
html body main.app>footer#fdFooter #fdPetCloudBar button[id]{
  flex:0 0 27px!important;
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  padding:0!important;
  margin:0!important;
}
@media(max-width:390px){
  html body main.app>footer#fdFooter{row-gap:2px!important;column-gap:2px!important}
  html body main.app>footer#fdFooter button,
  html body main.app>footer#fdFooter button[id],
  html body main.app>footer#fdFooter #fdPetCloudBar button[id]{
    flex-basis:25px!important;width:25px!important;min-width:25px!important;max-width:25px!important;
    height:25px!important;min-height:25px!important;max-height:25px!important;
  }
}


/* Section 04 FormyDog — controles más compactos */
html body main.app>.game-layout>.boosters .booster{
  min-height:25px!important;
  height:25px!important;
  max-height:25px!important;
  padding:1px!important;
  border-radius:5px!important;
}
html body main.app>.game-layout>.boosters .booster img{
  width:19px!important;
  height:19px!important;
  max-height:19px!important;
  flex-basis:19px!important;
}
html body main.app>.game-layout>.boosters .booster em{
  top:-2px!important;
  right:-2px!important;
  min-width:10px!important;
  height:10px!important;
  padding:0 2px!important;
  font-size:6px!important;
}
html body main.app>.game-layout>.boosters .booster em i{font-size:6px!important}
html body main.app>.game-layout>.boosters .mini-btn{
  min-height:23px!important;
  height:23px!important;
  max-height:23px!important;
  border-radius:5px!important;
}
html body main.app>.game-layout>.boosters .mini-btn::before{font-size:12px!important}
@media(max-width:360px){
  html body main.app>.game-layout>.boosters .booster{
    min-height:24px!important;height:24px!important;max-height:24px!important;
  }
  html body main.app>.game-layout>.boosters .booster img{
    width:18px!important;height:18px!important;max-height:18px!important;flex-basis:18px!important;
  }
  html body main.app>.game-layout>.boosters .mini-btn{
    min-height:22px!important;height:22px!important;max-height:22px!important;
  }
}


/* Hotfix v198: restaurar scroll real y evitar que el HUD corte el contenido.
   v197 fijaba el documento y el contenedor a 100dvh con overflow:hidden,
   contradiciendo el layout v191 y ocultando contenido en móviles. */
html,body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
}
html body main.app{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow:visible!important;
}


/* 2026-11-01 · premium match-board finish */
html body main.app>.game-layout>.center .board-shell{
  isolation:isolate;
  border:1px solid rgba(174,225,250,.72)!important;
  border-radius:clamp(14px,3vw,22px)!important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.95),rgba(224,245,255,.84) 58%,rgba(188,225,246,.9))!important;
  box-shadow:0 12px 28px rgba(2,28,55,.24),inset 0 1px 0 rgba(255,255,255,.9)!important;
  overflow:hidden!important;
}
html body main.app #gameMount{
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.18),transparent 68%),
    linear-gradient(145deg,rgba(17,91,148,.08),rgba(31,145,191,.04));
}
html body main.app #gameMount canvas{
  filter:drop-shadow(0 2px 1px rgba(9,48,78,.08));
}
html body main.app>.game-layout>.center .status{
  width:min(100%,460px)!important;
  min-height:26px!important;
  padding:5px 10px!important;
  border:1px solid rgba(181,222,243,.78)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(236,248,255,.92))!important;
  box-shadow:0 4px 12px rgba(4,42,73,.1)!important;
  color:#17496f!important;
  font-size:clamp(9px,2.3vw,11px)!important;
  font-weight:750!important;
  letter-spacing:.005em!important;
}
html body main.app>.game-layout>.boosters .booster{
  border:1px solid rgba(178,220,242,.86)!important;
  background:linear-gradient(135deg,#fff 0%,#f0f9ff 100%)!important;
  box-shadow:0 3px 9px rgba(5,47,78,.1)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
html body main.app>.game-layout>.boosters .booster:active{
  transform:translateY(1px) scale(.985)!important;
}
html body main.app>.game-layout>.boosters .booster.active{
  border-color:#f3b93d!important;
  background:linear-gradient(135deg,#fff8dc,#fff 72%)!important;
  box-shadow:0 0 0 2px rgba(255,198,63,.2),0 5px 14px rgba(5,47,78,.12)!important;
}
html body main.app #result:not([hidden]){
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:22px!important;
  background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(232,247,255,.97))!important;
  box-shadow:0 22px 60px rgba(2,25,49,.35)!important;
  color:#123d60!important;
  backdrop-filter:blur(12px);
}
html body main.app #result h2{
  color:#125a96!important;
  letter-spacing:-.035em!important;
  text-shadow:0 1px 0 #fff!important;
}
html body main.app #result button{
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0876c9,#20a5d7)!important;
  box-shadow:0 8px 18px rgba(7,104,177,.25)!important;
  color:#fff!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
@media(prefers-reduced-motion:reduce){
 html body main.app>.game-layout>.boosters .booster{transition:none!important}
}


/* v198 — retention entry points, refined board feedback and preloader polish. */
html body main.app>.game-layout>.center .fd-account-bar{
  order:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;gap:5px!important;width:100%!important;max-width:460px!important;
  min-width:0!important;margin:2px auto 4px!important;padding:5px 6px!important;
  border:1px solid rgba(122,211,255,.24)!important;border-radius:10px!important;
  background:linear-gradient(110deg,rgba(10,32,55,.94),rgba(18,67,91,.82))!important;
  box-shadow:0 5px 18px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.06)!important;
}
.fd-account-bar>span{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:#d9eef8!important;font-size:clamp(8px,2.4vw,10px)!important;font-weight:700!important;line-height:1.2!important}
.fd-account-bar>span i{color:#8bd4ff!important}
.fd-account-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;min-height:29px!important;padding:5px 8px!important;border-radius:7px!important;text-decoration:none!important;font-size:clamp(8px,2.4vw,10px)!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important}
.fd-account-btn:active{transform:scale(.96)!important}
.fd-account-login{color:#e8f7ff!important;border:1px solid rgba(144,218,255,.5)!important;background:linear-gradient(135deg,#155b83,#16456b)!important}
.fd-account-register{color:#183047!important;border:1px solid #a8f0cf!important;background:linear-gradient(135deg,#b4f7d4,#72dfb0)!important;box-shadow:0 2px 8px rgba(82,218,160,.18)!important}
html body main.app>.game-layout>.center .board-shell{isolation:isolate!important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 9px 24px rgba(0,0,0,.24)!important;transition:box-shadow .22s ease,transform .22s ease!important}
html body main.app>.game-layout>.center .board-shell:focus-within{box-shadow:0 0 0 2px rgba(125,224,255,.7),0 10px 28px rgba(0,0,0,.28)!important}
html body main.app>.game-layout>.center .board-mount canvas{filter:drop-shadow(0 2px 2px rgba(7,30,48,.15))!important}
#preloader{background:radial-gradient(ellipse at 50% 35%,#1d5f87 0%,#102c49 45%,#071321 100%)!important;isolation:isolate!important}
#preloader::before,#preloader::after{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important}
#preloader::before{background:radial-gradient(circle at 20% 25%,rgba(117,230,255,.16),transparent 26%),radial-gradient(circle at 82% 70%,rgba(137,255,195,.12),transparent 30%)!important;animation:fdLoadAura 3.4s ease-in-out infinite alternate!important}
#preloader::after{inset:-35% -20%!important;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.055) 48%,transparent 58%)!important;transform:translateX(-45%)!important;animation:fdLoadShimmer 2.6s ease-in-out infinite!important}
#preloader .load-card{position:relative!important;z-index:1!important;border:1px solid rgba(180,235,255,.22)!important;background:linear-gradient(155deg,rgba(20,48,72,.94),rgba(8,23,40,.96))!important;box-shadow:0 20px 70px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08)!important;animation:fdLoadCardIn .48s cubic-bezier(.2,.8,.2,1) both!important}
#preloader .load-dog{animation:fdLoadDogFloat 1.8s ease-in-out infinite!important;filter:drop-shadow(0 8px 15px rgba(0,0,0,.24))!important}
#preloader .load-track{overflow:hidden!important;background:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)!important}
#preloader .load-track i{position:relative!important;background:linear-gradient(90deg,#6be6ff,#a7f4cb,#ffe28a)!important;box-shadow:0 0 14px rgba(103,225,255,.34)!important;transition:width .18s ease!important}
#preloader .load-track i::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent)!important;animation:fdLoadBarShine 1.1s linear infinite!important}
#preloader .load-pct{font-variant-numeric:tabular-nums!important;letter-spacing:.06em!important}
@keyframes fdLoadAura{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
@keyframes fdLoadShimmer{to{transform:translateX(45%)}}
@keyframes fdLoadCardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fdLoadDogFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes fdLoadBarShine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@media(max-width:360px){
 .fd-account-bar{grid-template-columns:minmax(0,1fr) auto!important;gap:4px!important}
 .fd-account-bar>span{grid-column:1/-1!important}
 .fd-account-btn{min-height:27px!important;padding:5px 6px!important}
}
@media(prefers-reduced-motion:reduce){
 #preloader::before,#preloader::after,#preloader .load-card,#preloader .load-dog,#preloader .load-track i::after{animation:none!important}
 html body main.app>.game-layout>.center .board-shell,.fd-account-btn{transition:none!important}
}

html body main.app>.game-layout>.center .board-shell{order:2!important}
html body main.app>.game-layout>.center .status{order:3!important}

/* Keep only the top designed resource HUD; remove duplicated goal/move strip. */
html body main.app>.game-layout>.goals{display:none!important}
html body main.app>.game-layout>.center .fd-account-bar{display:none!important}
html body main.app>.game-layout>.center .board-shell{width:min(100%,460px,calc(100vw - 12px),max(144px,calc(100dvh - 248px)))!important;max-height:calc(100dvh - 248px)!important}


/* 2026-11-01 · limpiar texto auxiliar bajo 03 TABLERO y compactar separación */
html body main.app>.game-layout>.center .status{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;}
html body main.app>.game-layout{gap:2px!important;}
html body main.app>.game-layout>.center{gap:0!important;justify-content:flex-start!important;}
html body main.app>.game-layout>.center::before{margin:0!important;padding:0 2px!important;line-height:9px!important;}
html body main.app>.game-layout>.center .board-shell{margin:0 auto!important;}
html body main.app>.game-layout>.boosters{margin-top:0!important;}


/* FormyDog compact layout: restore the objective and moves strip, but make it a single slim row. */
html body main.app>.game-layout>.goals{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-areas:"title moves" "goal progress"!important;
 gap:2px 5px!important;
 padding:3px 5px!important;
 margin:0!important;
}
html body main.app>.game-layout>.goals .side-title{font-size:7px!important;line-height:8px!important;}
html body main.app>.game-layout>.goals .goal-box img{width:12px!important;height:12px!important;}
html body main.app>.game-layout>.goals .goal-box strong{font-size:10px!important;}
html body main.app>.game-layout>.goals .moves-box{min-height:16px!important;height:16px!important;padding:1px 4px!important;gap:3px!important;}
html body main.app>.game-layout>.goals .moves-box strong{font-size:10px!important;}
html body main.app>.game-layout>.goals .progress-copy{font-size:6px!important;}
html body main.app>.game-layout>.goals .progress-track{height:2px!important;margin-top:1px!important;}
/* Keep the 03 title and board close; hide only the extra status sentence, not game controls. */
html body main.app>.game-layout>.center .status{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;}
html body main.app>.game-layout{gap:2px!important;}
html body main.app>.game-layout>.center{gap:0!important;justify-content:flex-start!important;}
html body main.app>.game-layout>.center::before{margin:0!important;padding:0 2px!important;line-height:9px!important;}
html body main.app>.game-layout>.center .board-shell{margin:0 auto!important;width:min(100%,460px,calc(100vw - 12px),max(144px,calc(100dvh - 278px)))!important;max-height:calc(100dvh - 278px)!important;}
html body main.app>.game-layout>.boosters{margin-top:0!important;}