/* FoxFit TV — "Foxy's Playground" skin. 10-foot UI: huge type, glow focus,
   generated art backgrounds per screen. All text lives in code, not images. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Fredoka', 'Segoe UI', sans-serif;
  background: #171533;
  color: #fff;
  user-select: none;
  cursor: default;
}
.hidden { display: none !important; }
#app { position: fixed; inset: 0; }

/* Each screen paints its own generated background. */
.screen { position: absolute; inset: 0; background-size: cover; background-position: center; }
#scr-connect  { background-image: url(assets/bg_connect.webp); }
#scr-home     { background-image: url(assets/bg_home.webp); }
#scr-library.dance  { background-image: url(assets/bg_dance.webp); }
#scr-library.warmup { background-image: url(assets/bg_warmup.webp); }
#scr-programs { background-image: url(assets/bg_exercise.webp); }
#scr-trail    { background-image: url(assets/bg_trail.webp); }
#scr-paired, #scr-complete { background-image: url(assets/bg_home.webp); }
#scr-player   { background: #000; }

/* subtle darkening so cards/text always win over the art */
#scr-home::before, #scr-library::before, #scr-programs::before, #scr-trail::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(12,10,30,.42), rgba(12,10,30,.66));
  pointer-events: none;
}
.screen > * { position: relative; z-index: 1; }

/* ── chrome ── */
#chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2.2vh 3.2vw 0;
}
.logo-img { height: 6.4vh; filter: drop-shadow(0 .4vh 1.2vh rgba(0,0,0,.45)); }
.status {
  font-size: 1.9vh; font-weight: 600; color: #8CE99A;
  background: rgba(20,18,40,.55); border: 1px solid rgba(140,233,154,.35);
  padding: .8vh 1.6vw; border-radius: 3vh; backdrop-filter: blur(4px);
}

/* ── focus ── */
.focusable { transition: transform .15s ease, box-shadow .15s ease, outline-color .15s; outline: 0 solid transparent; }
.focusable.focus {
  outline: .55vh solid #fff;
  box-shadow: 0 0 0 1.2vh rgba(255,138,80,.55), 0 1.6vh 4vh rgba(0,0,0,.55);
  transform: scale(1.06);
  z-index: 3;
}

/* ── connect ── */
.connect-wrap { display: flex; height: 100%; align-items: center; justify-content: space-evenly; }
.connect-left { text-align: center; }
.connect-fox { height: 42vh; filter: drop-shadow(0 1.5vh 3vh rgba(0,0,0,.5)); }
.connect-title { font-size: 6.2vh; font-weight: 700; margin-top: -1vh; text-shadow: 0 3px 12px rgba(0,0,0,.55); }
.connect-sub { font-size: 2.6vh; color: #cfd3ee; margin-top: .6vh; }
.qr-card {
  background: #FFF8F0; color: #1F2440; border-radius: 3.2vh;
  padding: 3.2vh 3.4vw; text-align: center; box-shadow: 0 2vh 6vh rgba(0,0,0,.45);
}
.qr-box { width: 26vh; height: 26vh; margin: 0 auto; background: #fff; border-radius: 1.4vh; padding: 1.2vh;
          display: flex; align-items: center; justify-content: center; }
.qr-box svg { width: 100%; height: 100%; }
.qr-wait { color: #8a8fa3; font-size: 2vh; font-weight: 600; }
.pair-code { font-size: 4.6vh; font-weight: 700; letter-spacing: .5vh; margin-top: 1.2vh; }
.steps { text-align: left; margin: 1.4vh 0 0 2.4vh; font-size: 2vh; color: #555a75; line-height: 1.6; }
.steps li::marker { color: #FF6B35; font-weight: 700; }
.skip-pair {
  margin-top: 2vh; display: inline-block; font-size: 2.1vh; font-weight: 700; color: #2E86C1;
  padding: 1vh 2vw; border-radius: 2vh; background: rgba(46,134,193,.1);
}

/* paired splash */
#scr-paired { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.paired-art { height: 52vh; filter: drop-shadow(0 1.5vh 3vh rgba(0,0,0,.5)); }
.paired-text { font-size: 5vh; font-weight: 700; text-shadow: 0 3px 12px rgba(0,0,0,.6); }

/* ── home ── */
.host-row { display: flex; align-items: flex-end; gap: 1.5vw; padding: 9vh 4vw 0; }
.host-fox { height: 21vh; filter: drop-shadow(0 1vh 2vh rgba(0,0,0,.5)); }
.bubble {
  background: #fff; color: #1F2440; font-size: 2.9vh; font-weight: 600;
  padding: 1.6vh 2.2vw; border-radius: 3vh; border-bottom-left-radius: .6vh;
  box-shadow: 0 1vh 3vh rgba(0,0,0,.35); margin-bottom: 3vh;
}
/* Foxy's suggestion pill — first focus on Home, one OK from action. */
.fox-pick {
  margin: 1.6vh auto 0; width: fit-content; max-width: 70vw;
  background: linear-gradient(120deg, #FF8A50, #FF6B35);
  color: #fff; font-size: 2.5vh; font-weight: 700;
  padding: 1.3vh 2.6vw; border-radius: 3vh;
  box-shadow: 0 .8vh 2.4vh rgba(255,107,53,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.portals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.4vh;
  padding: 2.2vh 6vw 0;
}
.portal {
  position: relative; height: 22vh; border-radius: 3.4vh; overflow: visible;
  box-shadow: 0 1.2vh 3.2vh rgba(0,0,0,.45);
}
.portal[data-tint="dance"]  { background: linear-gradient(115deg, #FF3CAC, #784BA0); }
.portal[data-tint="warmup"] { background: linear-gradient(115deg, #FF8A50, #F0592A); }
.portal[data-tint="exer"]   { background: linear-gradient(115deg, #00A8E8, #26C485); }
.portal[data-tint="month"]  { background: linear-gradient(115deg, #F6AD55, #E8863C); }
.portal { border-radius: 3.4vh; }
.portal-art {
  position: absolute; right: -1vw; bottom: -.5vh; height: 24vh;
  filter: drop-shadow(0 .8vh 1.6vh rgba(0,0,0,.4));
}
.portal-txt { position: absolute; left: 2.2vw; top: 50%; transform: translateY(-50%); }
.portal-txt .big { font-size: 3.6vh; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.portal-txt .sm  { font-size: 2vh; font-weight: 600; opacity: .95; margin-top: .4vh; }

/* ── close ✕ (for remotes without a Back key) ── */
.close-x {
  position: absolute; top: 9vh; right: 3vw; z-index: 4;
  width: 6vh; height: 6vh; border-radius: 50%;
  background: rgba(255,255,255,.14); border: .3vh solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8vh; font-weight: 700; color: #fff;
}
.player-x { top: auto; position: static; margin-left: 1.5vw; cursor: pointer; }

/* ── library (posters) ── */
.lib-title { font-size: 4.4vh; font-weight: 700; padding: 8.5vh 4vw 0; text-shadow: 0 0 3vh rgba(255,60,172,.7), 0 2px 8px rgba(0,0,0,.5); }
.lib-grid { display: flex; flex-wrap: wrap; gap: 2.4vh; padding: 2.6vh 4vw 0; }
.pcard { position: relative; width: 15.5vw; border-radius: 2.4vh; }
.pcard .ph { border-radius: 2.4vh; overflow: hidden; border: .5vh solid rgba(255,255,255,.16);
             box-shadow: 0 1.2vh 3vh rgba(0,0,0,.5); position: relative; }
.pcard img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #2B2B3A; }
.pcard .nm { position: absolute; left: 0; right: 0; bottom: 0; font-weight: 600; font-size: 1.9vh;
             padding: 2.4vh 1vw .9vh; text-align: center;
             background: linear-gradient(transparent, rgba(15,8,26,.92)); }
.pcard .dur { position: absolute; top: 1vh; right: 1vh; background: rgba(15,8,26,.75);
              font-size: 1.6vh; font-weight: 600; padding: .3vh 1vh; border-radius: 1.2vh; }
.pcard .newb { position: absolute; top: -1.2vh; left: -1vh; z-index: 2;
               background: linear-gradient(120deg, #FFD54F, #FF8A50); color: #4a2800;
               font-size: 1.6vh; font-weight: 700; padding: .5vh 1.4vh; border-radius: 1.6vh;
               transform: rotate(-8deg); box-shadow: 0 .5vh 1.4vh rgba(0,0,0,.4); }

/* ── programs ── */
.prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6vh; padding: 2.6vh 4vw 0; }
.prog {
  position: relative; border-radius: 3vh; padding: 2vh; height: 27vh;
  box-shadow: 0 1.2vh 3vh rgba(0,0,0,.45); overflow: hidden;
}
.prog .coach { position: absolute; right: -.5vw; bottom: -1vh; height: 21vh;
               filter: drop-shadow(0 .6vh 1.2vh rgba(0,0,0,.35)); }
.prog .nm { font-size: 2.7vh; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.3); max-width: 62%; }
.prog .meta { font-size: 1.8vh; font-weight: 600; opacity: .95; margin-top: .5vh; }
.prog .beads { display: flex; gap: .6vh; margin-top: 1.2vh; }
.prog .beads i { width: 1.6vh; height: 1.6vh; border-radius: 50%; background: rgba(255,255,255,.4); }
.prog .lock { position: absolute; left: 1.6vh; bottom: 1.4vh; background: rgba(0,0,0,.4);
              border-radius: 1.4vh; padding: .5vh 1.2vh; font-size: 2.2vh; }
.prog.c0 { background: linear-gradient(140deg, #7B6CF6, #B06AB3); }
.prog.c1 { background: linear-gradient(140deg, #38B2AC, #4FD1C5); }
.prog.c2 { background: linear-gradient(140deg, #FF8A50, #F5576C); }
.prog.c3 { background: linear-gradient(140deg, #F6AD55, #F6D365); }
.prog.c4 { background: linear-gradient(140deg, #2E86C1, #00B4DB); }
.prog.c5 { background: linear-gradient(140deg, #F5576C, #C850C0); }
.prog.c6 { background: linear-gradient(140deg, #43A047, #7CB342); }

/* ── trail ── */
.trail { position: relative; height: 62vh; margin: 1.5vh 4vw 0; }
.stone {
  position: absolute; width: 7.4vh; height: 7.4vh; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 2.4vh; transform: translate(-50%, -50%);
  box-shadow: 0 .8vh 1.8vh rgba(0,0,0,.4);
}
.stone.done { background: linear-gradient(140deg, #43D97B, #2EA85C); }
.stone.cur  { background: linear-gradient(140deg, #FF8A50, #FF6B35); width: 9.4vh; height: 9.4vh; font-size: 3vh; }
.stone.up   { background: rgba(38,34,80,.88); color: #9298c2; }
.stone .foxmark { position: absolute; bottom: 88%; left: 50%; transform: translateX(-50%);
                  height: 11vh; filter: drop-shadow(0 .8vh 1.6vh rgba(0,0,0,.5)); pointer-events: none; }
.stone .trophymark { position: absolute; bottom: 92%; left: 50%; transform: translateX(-50%);
                     height: 8vh; pointer-events: none; }
.trail svg.tpath { position: absolute; inset: 0; width: 100%; height: 100%; }
.dayinfo {
  position: absolute; left: 4vw; right: 4vw; bottom: 3vh; z-index: 2;
  display: flex; align-items: center; gap: 1.6vw;
  background: rgba(20,18,44,.72); border: 1px solid rgba(255,255,255,.16);
  border-radius: 2.6vh; padding: 1.4vh 2vw; backdrop-filter: blur(6px);
}
.dayinfo img { height: 9vh; }
.dayinfo .a { font-size: 2.8vh; font-weight: 700; }
.dayinfo .b { font-size: 1.9vh; color: #c9cde8; font-weight: 600; }
.dayinfo .go { margin-left: auto; background: linear-gradient(120deg, #FF8A50, #FF6B35);
               font-weight: 700; font-size: 2.4vh; padding: 1.3vh 2.6vw; border-radius: 2vh;
               box-shadow: 0 .8vh 2vh rgba(255,107,53,.5); }

/* ── player ── */
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2.4vh 3vw; background: linear-gradient(rgba(0,0,0,.68), transparent);
}
.player-title { font-size: 3.4vh; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.player-badge { background: #FF6B35; font-weight: 700; font-size: 2.2vh; padding: .8vh 1.8vw; border-radius: 2vh; }
.overlay {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6vh;
  background: rgba(16,13,36,.82); backdrop-filter: blur(6px); text-align: center;
}
.overlay img { height: 30vh; filter: drop-shadow(0 1vh 2vh rgba(0,0,0,.5)); }
.overlay-big { font-size: 5.4vh; font-weight: 700; }
.overlay-small { font-size: 3vh; color: #ffce9e; font-weight: 600; }
.overlay-btns { display: flex; gap: 2vw; margin-top: 2vh; }
.obtn { font-size: 2.8vh; font-weight: 700; padding: 1.4vh 3.4vw; border-radius: 2.2vh;
        background: linear-gradient(120deg, #FF8A50, #FF6B35); }
.obtn-exit { background: rgba(255,255,255,.14); border: .3vh solid rgba(255,255,255,.3); }

/* ── session HUD: big numbers beside the portrait clip ── */
.hud {
  position: absolute; right: 4vw; top: 50%; transform: translateY(-50%);
  z-index: 2; text-align: center; max-width: 26vw;
}
.hud-big {
  font-size: 17vh; font-weight: 700; line-height: 1;
  text-shadow: 0 0 4vh rgba(255,138,80,.75), 0 .6vh 2vh rgba(0,0,0,.7);
}
.hud-label { font-size: 3.2vh; font-weight: 600; color: #ffd9b8; margin-top: 1vh;
             text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.hud-next { font-size: 2.6vh; font-weight: 600; color: #fff; margin-top: 2.4vh;
            background: rgba(20,18,44,.72); border-radius: 2vh; padding: 1.2vh 1.6vw;
            text-shadow: none; }
.progress-wrap {
  position: absolute; left: 3vw; right: 3vw; bottom: 7vh; height: 1.6vh; z-index: 2;
  background: rgba(255,255,255,.25); border-radius: 1vh; overflow: hidden;
}
#progressFill { height: 100%; width: 0%; background: #FF6B35; border-radius: 1vh; transition: width .25s linear; }
.player-hint { z-index: 2; }

/* Preparing screen — full media preload before any play */
.prep {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(160deg, #232948, #1A1E38 55%, #171a30);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6vh; text-align: center;
}
.prep img { height: 26vh; filter: drop-shadow(0 1vh 2vh rgba(0,0,0,.5)); }
.prep-title { font-size: 3.2vh; font-weight: 700; color: #fff; }
.prep-pct { font-size: 7vh; font-weight: 700; color: #FF8A50;
            text-shadow: 0 0 3vh rgba(255,138,80,.6); }
.prep-slow { font-size: 2.2vh; font-weight: 600; color: #B9BFE0; }

/* GO! stamp — marks the preview→exercise switch with a pop */
.go-stamp {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%, -50%) scale(.3) rotate(-8deg);
  font-size: 22vh; font-weight: 700; color: #fff; pointer-events: none;
  text-shadow: 0 0 6vh rgba(255,107,53,.95), 0 1vh 3vh rgba(0,0,0,.7);
  -webkit-text-stroke: .5vh #FF6B35;
  opacity: 0;
}
.go-stamp.pop { animation: gopop .9s ease-out forwards; }
@keyframes gopop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(3deg); }
  45%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
/* last-3-seconds anticipation: the big number pulses orange */
.hud-big.finalpulse { color: #FF8A50; animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.14); } }

/* complete */
#scr-complete { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.celebrate-art { height: 52vh; filter: drop-shadow(0 1.5vh 3vh rgba(0,0,0,.5)); }
.celebrate-text { font-size: 5.6vh; font-weight: 700; text-shadow: 0 3px 12px rgba(0,0,0,.6); }
#confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#confetti i {
  position: absolute; top: -4vh; width: 1.6vh; height: 2.4vh; border-radius: .4vh;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* lock dialog */
.lock-dialog { position: fixed; inset: 0; z-index: 9; background: rgba(10,8,24,.7);
               display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lock-card { background: #FFF8F0; color: #1F2440; border-radius: 3vh; padding: 4vh 4vw; text-align: center;
             box-shadow: 0 2vh 6vh rgba(0,0,0,.5); max-width: 46vw; }
.lock-emoji { font-size: 7vh; }
.lock-text { font-size: 2.8vh; font-weight: 600; margin-top: 1.2vh; line-height: 1.45; }
.lock-ok { display: inline-block; margin-top: 2.4vh; background: linear-gradient(120deg, #FF8A50, #FF6B35);
           color: #fff; font-weight: 700; font-size: 2.4vh; padding: 1.2vh 3vw; border-radius: 2vh; }

/* hint bars */
.hintbar { position: absolute; bottom: 1.6vh; left: 0; right: 0; text-align: center;
           color: rgba(255,255,255,.55); font-size: 1.9vh; font-weight: 600; z-index: 2;
           text-shadow: 0 1px 4px rgba(0,0,0,.6); }