/* FormyDog base components */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:#041b42;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173f63}
body{overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}
button:focus-visible{outline:3px solid #72d8ff;outline-offset:2px}
[hidden]{display:none!important}

#preloader{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 15%,#55c4ff 0,#0d71cf 34%,#06285e 72%,#03142f 100%);transition:.2s ease}
#preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
.load-card{width:min(330px,90vw);padding:24px;border:1px solid #bcecff;border-radius:26px;background:#f8fdff;box-shadow:0 10px 0 #06448f,0 24px 60px rgba(0,17,48,.42);text-align:center}
.load-dog{width:92px;height:92px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #b7e8ff}
.load-dog img{width:78px;height:78px;object-fit:contain}.load-card h1{margin:10px 0 3px;font-size:23px;letter-spacing:.08em;color:#0755aa}.load-card p{margin:0 0 10px;font-size:10px;font-weight:800;color:#718aa4}.load-track{height:10px;padding:2px;border-radius:99px;background:#bfdff1;overflow:hidden}.load-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#0864c9,#38baff);transition:width .12s ease}.load-pct{display:block;margin-top:6px;font-size:12px;color:#075fc9}.load-play{width:100%;margin-top:12px;padding:12px 15px;border:0;border-radius:13px;background:linear-gradient(#1888f3,#0757b8);color:#fff;font-size:12px;font-weight:1000;letter-spacing:.07em;box-shadow:0 4px 0 #043a79;cursor:pointer}.load-help{display:block;margin-top:8px;font-size:8px;color:#718aa4}

.app{background:radial-gradient(circle at 50% 8%,#1a78c7 0,#0a386f 43%,#041a36 100%)}
.topbar,.side{border:1px solid #8ed9ff;background:linear-gradient(145deg,#fff 0%,#f4fbff 58%,#e3f6ff 100%)}
.brand{display:flex;align-items:center}.brand-avatar{display:grid;place-items:center;border:1px solid #9bdcff;background:#fff}.brand-avatar img{object-fit:contain}.brand h1{margin:0;color:#0753a4}.brand p{margin:3px 0 0;font-weight:900;color:#7991a8;text-transform:uppercase}.fd-level-chip{display:flex;align-items:center;gap:5px;border:1px solid #9edfff;background:#f7fcff;color:#0755aa;white-space:nowrap}.fd-level-chip span,.fd-level-chip small{font-size:6px;font-weight:1000}.fd-level-chip b{font-size:15px}.resources{display:flex}.resource{display:grid;grid-template-columns:27px 1fr;grid-template-rows:1fr 1fr;align-items:center;border:1px solid #a9e1ff;background:#fff;position:relative}.resource img{grid-row:1/3;object-fit:contain}.resource b{font-size:12px;color:#0755a8}.resource span{font-size:6px;font-weight:900;color:#738aa0}.fd-header-tools button{cursor:pointer}

.side-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:9px;font-weight:1000;letter-spacing:.06em;color:#0755a9}.side-title small{font-size:6px;color:#7993a9}.goal-box{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #c0eaff;border-radius:13px;background:#fff}.goal-box img{width:40px;height:40px;object-fit:contain}.goal-box strong{display:block;font-size:24px;line-height:1;color:#0861ba}.goal-box span{font-size:7px;color:#718ba3}.moves-box{margin-top:8px;padding:7px;text-align:center;border-radius:12px;background:linear-gradient(#0d74dc,#0752a8);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.35)}.moves-box span{display:block;font-size:6px;font-weight:1000;letter-spacing:.12em}.moves-box strong{font-size:25px;line-height:1}.progress-row{margin-top:8px}.progress-copy{display:flex;justify-content:space-between;font-size:6px;font-weight:900;color:#69849e}.progress-track{height:8px;margin-top:4px;border-radius:99px;background:#c9e8f8;overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0968ca,#37b8ff);transition:width .25s ease}.how{margin-top:8px;padding:6px;border-radius:10px;background:#edf9ff;color:#5f7891;font-size:7px;line-height:1.4;text-align:center}

.board-shell{position:relative;background:linear-gradient(145deg,#fff,#a9ddf5 55%,#4e9bd1)}
.board-mount{position:absolute;overflow:hidden;background:linear-gradient(180deg,#3ba9e8,#073778) url('./assets/backgrounds/pet-yard.png') center/cover no-repeat;touch-action:none;-webkit-user-select:none;user-select:none}
.board-mount canvas{display:block!important;width:100%!important;height:100%!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important}
.status{display:flex;align-items:center;justify-content:center;gap:6px;background:#062e66;color:#eaf9ff;text-align:center}.status-dot{width:7px;height:7px;border-radius:50%;background:#61d5ff;box-shadow:0 0 10px #61d5ff}
.result{position:absolute;inset:10%;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;border:2px solid #c8efff;border-radius:24px;background:rgba(247,253,255,.97);box-shadow:0 16px 55px rgba(0,21,47,.6)}.result img{width:min(128px,35%);height:auto}.result h2{margin:5px 0 3px;color:#075ab1;font-size:25px}.result p{margin:0 0 11px;color:#66829c;font-size:10px}.result button{border:0;border-radius:11px;padding:9px 14px;background:linear-gradient(#1685ef,#0758b4);color:#fff;font-size:9px;font-weight:1000;box-shadow:0 4px 0 #043b79;cursor:pointer}
.toast{position:fixed;left:50%;bottom:max(15px,env(safe-area-inset-bottom));z-index:25000;max-width:min(430px,92vw);padding:9px 14px;border:1px solid #84d8ff;border-radius:99px;background:rgba(5,43,97,.95);color:#fff;font-size:9px;font-weight:900;text-align:center;box-shadow:0 8px 25px rgba(0,21,47,.5);opacity:0;transform:translate(-50%,10px) scale(.96);pointer-events:none;transition:.18s ease}.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

.boosters{display:grid}.booster{width:100%;display:grid;align-items:center;gap:6px;border:1px solid #91d8ff;background:linear-gradient(#fff,#e3f5ff);color:#184c78;cursor:pointer}.booster:hover{transform:translateY(-1px)}.booster.active{background:linear-gradient(#dff7ff,#9edfff)}.booster:disabled{opacity:.45;cursor:not-allowed;transform:none}.booster img{object-fit:contain}.booster b{display:block;color:#0757aa}.booster small{display:block;color:#728da5}.booster em{font-style:normal;font-weight:1000;color:#0757aa}.mini-btn{width:100%;border:1px solid #8dd6fb;background:#eff9ff;color:#34688f;font-weight:1000;cursor:pointer}.store{background:linear-gradient(#1881e7,#0758b6);color:#fff}
.fd-game-share{align-items:center;justify-content:center;color:#0755aa}.fd-game-share button{border:1px solid #8ccff4;background:#fff;color:#0755aa;cursor:pointer}.fd-game-share .fd-share-copy{background:#075ab1;color:#fff;border-color:#075ab1}.fd-game-share #fdShareQr:before{content:'▦';font-size:16px}.fd-game-share #fdCopyLink:before{content:'⧉';font-size:16px}.fd-game-share #fdShareGame:before{content:'↗';font-size:16px}.fd-pet-tools button:first-child:before{content:'🐾'}.fd-pet-tools button:last-child:before{content:'♥'}
.fd-header-tools button:first-child:before{content:'🐾';font-size:15px}.fd-header-tools button:last-child:before{content:'♥';font-size:15px}
.fd-board-ad{display:grid;place-items:center;border:1px solid #91d8ff;background:rgba(248,253,255,.88);color:#66829c;font-weight:900;letter-spacing:.08em;pointer-events:none}

/* FormyDog UI v5 · layout profesional desktop + móvil */
:root{
  --fd-blue:#0b65c8;
  --fd-blue-2:#0a4f9f;
  --fd-cyan:#69d8ff;
  --fd-deep:#05254f;
  --fd-ink:#173f63;
  --fd-muted:#6a8297;
  --fd-card:#f8fcff;
  --fd-line:#9bdcff;
  --fd-shadow:0 14px 34px rgba(0,22,55,.22);
}

html body .app{width:100%!important;height:100dvh!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;gap:10px!important;padding:8px 12px 10px!important;overflow:hidden!important}
html body .app > .topbar{width:min(1500px,100%)!important;min-height:62px!important;margin:0 auto!important;padding:7px 10px!important;gap:9px!important;border:1px solid rgba(133,215,255,.95)!important;border-radius:18px!important;background:rgba(250,254,255,.97)!important;box-shadow:0 5px 0 #07509a,0 12px 32px rgba(0,22,55,.18)!important;display:flex!important;align-items:center!important}
html body .app > .topbar .brand{min-width:190px!important;gap:9px!important}html body .app > .topbar .brand-avatar{width:45px!important;height:45px!important;flex:0 0 45px!important;border-radius:13px!important;cursor:pointer!important}html body .app > .topbar .brand-avatar img{width:41px!important;height:41px!important}html body .app > .topbar .brand h1{font-size:17px!important;letter-spacing:.08em!important}html body .app > .topbar .brand p{font-size:6px!important;letter-spacing:.16em!important}
html body .app > .topbar .fd-level-chip{min-height:38px!important;padding:5px 9px!important;border-radius:11px!important;box-shadow:none!important}html body .app > .topbar .fd-header-tools{display:flex!important;gap:5px!important;margin-left:0!important}html body .app > .topbar .fd-header-tools button{width:auto!important;min-width:40px!important;height:36px!important;min-height:36px!important;padding:5px 10px!important;border:1px solid #9fdcff!important;border-radius:10px!important;background:#f7fcff!important;color:#0a5cb2!important;font-size:0!important;box-shadow:none!important;cursor:pointer!important}html body .app > .topbar .fd-header-tools button:last-child{border-color:#9eddbd!important;background:#f0fff7!important;color:#247557!important}html body .app > .topbar .resources{margin-left:auto!important;gap:6px!important}html body .app > .topbar .resource{min-width:86px!important;height:42px!important;padding:4px 7px!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}html body .app > .topbar .resource img{width:25px!important;height:25px!important}
html body .app > .game-layout{width:min(1240px,100%)!important;height:100%!important;min-height:0!important;margin:0 auto!important;display:grid!important;grid-template-columns:210px minmax(420px,720px) 220px!important;grid-template-rows:minmax(0,1fr) auto!important;align-items:center!important;justify-content:center!important;gap:10px 14px!important;overflow:visible!important}
html body .app > .game-layout > .side{width:100%!important;padding:11px!important;border:1px solid #8fd7ff!important;border-radius:18px!important;background:rgba(250,254,255,.97)!important;box-shadow:0 5px 0 #07509a,0 15px 30px rgba(0,24,58,.16)!important}html body .app > .game-layout > .goals{grid-column:1!important;grid-row:1!important}html body .app > .game-layout > .boosters{grid-column:3!important;grid-row:1!important;gap:7px!important}html body .app > .game-layout > .boosters .booster{min-height:58px!important;padding:6px 7px!important;grid-template-columns:42px 1fr auto!important;border-radius:13px!important;box-shadow:0 2px 0 #70b1d9!important}html body .app > .game-layout > .boosters .booster img{width:39px!important;height:39px!important}html body .app > .game-layout > .boosters .booster b{font-size:9px!important}html body .app > .game-layout > .boosters .booster small{font-size:6px!important;line-height:1.3!important}html body .app > .game-layout > .boosters .mini-btn{min-height:36px!important;border-radius:10px!important}
html body .app > .game-layout > .center{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;overflow:visible!important}html body .app > .game-layout > .center .board-shell{width:min(68dvh,100%,680px)!important;max-width:min(100%,680px)!important;height:auto!important;max-height:calc(100dvh - 190px)!important;aspect-ratio:1/1!important;margin:0 auto!important;padding:6px!important;border:2px solid #c8efff!important;border-radius:22px!important;box-shadow:0 7px 0 #06407d,0 18px 40px rgba(0,18,48,.30)!important}html body .app > .game-layout > .center .board-mount{inset:7px!important;border-radius:16px!important}html body .app > .game-layout > .center .status{width:min(100%,680px)!important;min-height:30px!important;border:1px solid #72cffa!important;border-radius:10px!important;font-size:8px!important;box-shadow:none!important}
html body .app > .game-layout > .center .fd-game-share{width:min(100%,520px)!important;min-height:40px!important;margin:0 auto!important;padding:5px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:5px!important;border:1px solid #a7def8!important;border-radius:12px!important;background:rgba(248,253,255,.97)!important;box-shadow:0 6px 18px rgba(0,28,65,.10)!important}html body .app > .game-layout > .center .fd-game-share button{min-height:29px!important;border-radius:8px!important;font-size:0!important}html body .app > .game-layout > .center .fd-game-share-status{grid-column:1/-1!important;min-height:0!important;font-size:7px!important;text-align:center!important}html body .app > .game-layout > .center .fd-pet-tools{width:min(100%,680px)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0!important}html body .app > .game-layout > .center .fd-pet-tools button{min-height:40px!important;border:1px solid #9ddcff!important;border-radius:11px!important;background:#f8fdff!important;color:#0a5caf!important;font-size:9px!important;font-weight:900!important;letter-spacing:.03em!important;cursor:pointer!important;box-shadow:0 2px 0 #76b9df!important}html body .app > .game-layout > .center .fd-pet-tools button:last-child{border-color:#98dfbc!important;background:#effff6!important;color:#277255!important;box-shadow:0 2px 0 #7fc3a2!important}html body .app > .game-layout > .center .fd-pet-tools button:before{display:inline!important;margin-right:7px!important;font-size:15px!important}html body .app > .game-layout > .fd-board-ad{grid-column:2!important;grid-row:2!important;order:initial!important;width:min(100%,360px)!important;min-height:22px!important;margin:0 auto!important;border-radius:8px!important;opacity:.72!important;font-size:7px!important}
@media (min-width:901px) and (max-width:1180px){html body .app > .game-layout{grid-template-columns:175px minmax(380px,1fr) 185px!important;gap:8px!important}html body .app > .game-layout > .center .board-shell{width:min(64dvh,100%,620px)!important}html body .app > .topbar .resource{min-width:72px!important}}
@media (max-width:900px){html,body{overflow:hidden!important}html body .app{height:100dvh!important;min-height:0!important;padding:4px 4px max(6px,env(safe-area-inset-bottom))!important;gap:5px!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important}html body .app > .topbar{width:100%!important;min-height:66px!important;padding:4px 5px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:36px 28px!important;align-items:center!important;gap:3px 4px!important;border-radius:14px!important;position:relative!important;z-index:10!important}html body .app > .topbar .brand{grid-column:1!important;grid-row:1!important;min-width:0!important;max-width:none!important;overflow:hidden!important}html body .app > .topbar .brand-avatar{width:34px!important;height:34px!important;flex-basis:34px!important}html body .app > .topbar .brand-avatar img{width:31px!important;height:31px!important}html body .app > .topbar .brand h1{font-size:12px!important;max-width:120px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}html body .app > .topbar .brand p{display:none!important}html body .app > .topbar .fd-level-chip{grid-column:2!important;grid-row:1!important;min-height:30px!important;height:30px!important;padding:2px 6px!important}html body .app > .topbar .fd-level-chip span,html body .app > .topbar .fd-level-chip small{display:none!important}html body .app > .topbar .resources{grid-column:3!important;grid-row:1!important;margin:0!important;gap:3px!important}html body .app > .topbar .resource{min-width:39px!important;width:39px!important;height:31px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important;place-items:center!important;padding:2px!important;border-radius:9px!important}html body .app > .topbar .resource img{grid-row:auto!important;width:20px!important;height:20px!important}html body .app > .topbar .resource b,html body .app > .topbar .resource span{display:none!important}html body .app > .topbar .resources .resource:nth-child(1){display:none!important}html body .app > .topbar .fd-header-tools{grid-column:1/-1!important;grid-row:2!important;width:100%!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important}html body .app > .topbar .fd-header-tools button{width:100%!important;min-width:0!important;height:27px!important;min-height:27px!important;padding:3px 8px!important;font-size:7px!important;letter-spacing:.05em!important;font-weight:1000!important}html body .app > .topbar .fd-header-tools button:first-child:before,html body .app > .topbar .fd-header-tools button:last-child:before{display:inline!important;margin-right:5px!important;font-size:12px!important}html body .app > .game-layout{width:100%!important;height:auto!important;min-height:0!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;overflow:visible!important}html body .app > .game-layout > .goals{order:1!important;width:100%!important;min-height:58px!important;padding:4px!important;display:grid!important;grid-template-columns:minmax(0,1.15fr) 84px minmax(0,1fr)!important;align-items:center!important;gap:4px!important;border-radius:12px!important}html body .app > .game-layout > .goals .side-title,html body .app > .game-layout > .goals .how{display:none!important}html body .app > .game-layout > .goals .goal-box{height:48px!important;min-height:48px!important;padding:3px 6px!important;border-radius:9px!important}html body .app > .game-layout > .goals .goal-box img{width:30px!important;height:30px!important}html body .app > .game-layout > .goals .goal-box strong{font-size:18px!important}html body .app > .game-layout > .goals .goal-box span{font-size:5px!important}html body .app > .game-layout > .goals .moves-box{height:48px!important;min-height:48px!important;margin:0!important;padding:4px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border-radius:9px!important}html body .app > .game-layout > .goals .moves-box strong{font-size:20px!important}html body .app > .game-layout > .goals .progress-row{margin:0!important;padding:2px!important;min-width:0!important}html body .app > .game-layout > .center{order:2!important;width:100%!important;height:auto!important;min-height:0!important;padding:0!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;overflow:visible!important}html body .app > .game-layout > .center .board-shell{width:min(calc(100vw - 8px),620px)!important;height:auto!important;max-width:100%!important;max-height:none!important;aspect-ratio:1/1!important;margin:0 auto!important;padding:4px!important;border-radius:18px!important;flex:0 0 auto!important}html body .app > .game-layout > .center .board-mount{inset:5px!important;border-radius:13px!important}html body .app > .game-layout > .center .status{display:none!important}html body .app > .game-layout > .center .fd-game-share{width:100%!important;min-height:38px!important;margin:0!important;padding:4px!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important;border-radius:10px!important}html body .app > .game-layout > .center .fd-game-share button{height:29px!important;min-height:29px!important}html body .app > .game-layout > .center .fd-game-share-status{display:none!important}html body .app > .game-layout > .center .fd-pet-tools{display:none!important}html body .app > .game-layout > .fd-board-ad{order:3!important;width:100%!important;min-height:20px!important;margin:0!important;padding:2px!important;font-size:6px!important}html body .app > .game-layout > .boosters{order:4!important;width:100%!important;height:46px!important;min-height:46px!important;padding:3px!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:40px!important;align-items:stretch!important;gap:3px!important;overflow:hidden!important;border-radius:12px!important}html body .app > .game-layout > .boosters .side-title{display:none!important}html body .app > .game-layout > .boosters .booster,html body .app > .game-layout > .boosters .mini-btn{width:100%!important;min-width:0!important;height:40px!important;min-height:40px!important;max-height:40px!important;margin:0!important;padding:2px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:9px!important;overflow:hidden!important}html body .app > .game-layout > .boosters .booster{grid-template-columns:1fr!important}html body .app > .game-layout > .boosters .booster img{width:30px!important;height:30px!important;max-width:90%!important}html body .app > .game-layout > .boosters .booster span,html body .app > .game-layout > .boosters .booster em{display:none!important}html body .app > .game-layout > .boosters .mini-btn{font-size:0!important}}
@media (max-width:430px){html body .app{padding-inline:3px!important}html body .app > .topbar .brand h1{max-width:96px!important;font-size:11px!important}html body .app > .topbar .resource{width:36px!important;min-width:36px!important}html body .app > .game-layout > .goals{grid-template-columns:minmax(0,1.1fr) 78px minmax(0,.95fr)!important}html body .app > .game-layout > .center .board-shell{width:calc(100vw - 6px)!important}html body .app > .game-layout > .boosters{gap:2px!important}}
@media (max-height:700px) and (max-width:900px){html body .app > .topbar{grid-template-rows:33px 25px!important;min-height:61px!important}html body .app > .topbar .fd-header-tools button{height:24px!important;min-height:24px!important}html body .app > .game-layout > .goals{min-height:50px!important}html body .app > .game-layout > .goals .goal-box,html body .app > .game-layout > .goals .moves-box{height:42px!important;min-height:42px!important}html body .app > .game-layout > .boosters{height:42px!important;min-height:42px!important;grid-template-rows:36px!important}html body .app > .game-layout > .boosters .booster,html body .app > .game-layout > .boosters .mini-btn{height:36px!important;min-height:36px!important;max-height:36px!important}}