/* Routine page + shared Player. Picture first: the video box follows the clip's shape. */
body[data-page="routine"] main{padding-top:12px}

/* Player: --ar is the clip shape (width / height), set by player.js. --cap is the tallest the video may be. */
.player-wrap{--ar:.564;--cap:70vh;--vw:min(100%,calc(var(--cap) * var(--ar)));width:max(min(100%,330px),var(--vw));margin:0 auto}
@supports (height:1svh){.player-wrap{--cap:70svh}}
.vid-stage{position:relative;width:var(--vw);aspect-ratio:var(--ar);margin:0 auto;isolation:isolate;border-radius:18px;overflow:hidden;background:#090706}
.vid-stage video{width:100%;height:100%;max-height:none;object-fit:contain;background:#090706;border-radius:0}
.vid-stage video.mirrored{transform:scaleX(-1)}
.vid-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 28px 7px #ffc24a;opacity:0}
.vid-stage.beat-glow::after{opacity:1}
.play-hit{position:absolute;inset:0;width:100%;height:100%;background:transparent;color:white;border-radius:0}
.play-hit:hover{transform:none;filter:none}
.play-glyph{background:#14100fc9;border-radius:50%;padding:12px 22px;font-size:32px}
.vid-stage.is-playing .play-glyph{display:none}
.count-number{position:absolute;right:12px;top:0;font-size:64px;line-height:1.1;font-weight:900;color:#ffc24a;text-shadow:0 2px 8px #000,0 0 2px #000;pointer-events:none}
.count-number.hot{color:#ff7257}
.mirror-chip{position:absolute;top:12px;left:10px;background:#14100fd9;padding:4px 10px;border-radius:12px;font-size:13px;pointer-events:none}
.player-bottom{margin-top:8px}
.count-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;text-align:center;font-weight:800}
.count-strip span{border-radius:8px;line-height:28px}
.count-strip .active{background:#ffc24a;color:#14100f}
.player-controls{display:flex;gap:6px;margin-top:6px}
.player-controls button{flex:1;padding:8px 4px;font-size:15px;min-height:48px;background:#30231f;color:#fff5e9;border:1px solid #49332b}
.silent-hint{text-align:center;font-size:15px}
.player-more{border:1px solid #624434;border-radius:22px;background:#221a18;color:#fff5e9;width:min(440px,calc(100% - 24px));max-height:85svh;padding:20px}
.player-more::backdrop{background:#000a}
.player-more button{min-height:48px;margin:5px}
.player-more input,.player-more select{min-height:48px}
.player-more label{display:block;margin-top:12px}

/* Routine page layout */
.routine-watch{display:grid;gap:18px}
.routine-title{font-size:26px;margin:4px 0 12px}
.steps-title{font-size:22px;margin:24px 0 12px}

/* Step cards: big portrait photo, label under it (icon, number, name). Tap or hover plays the loop. */
.move-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.move-card{min-width:0}
.clip-hit{display:block;position:relative;width:100%;aspect-ratio:360/638;padding:0;border-radius:14px;overflow:hidden;background:#090706;border:1px solid #49332b}
.clip-hit:hover{transform:none;filter:none}
.clip{display:block;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.clip-play{position:absolute;right:8px;bottom:8px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#14100fc9;color:#fff;font-size:16px}
.clip-hit[aria-pressed="true"] .clip-play{display:none}
.clip-count{position:absolute;top:2px;right:10px;font-size:38px;font-weight:900;line-height:1.1;color:#ffc24a;text-shadow:0 2px 6px #000,0 0 2px #000;display:none}
.clip-hit[aria-pressed="true"] .clip-count{display:block}
.move-label{display:flex;align-items:flex-start;gap:6px;min-height:48px;padding:6px 2px;color:#fff5e9;text-decoration:none;font-weight:700;font-size:16px;line-height:1.25}
.move-label .move-icon{font-size:19px;line-height:1.3}
.move-label .move-n{color:#ffc24a;font-weight:850}
.move-label .move-name{flex:1;min-width:0}
.move-label:hover .move-name{text-decoration:underline}

.routine-words{margin:24px 0}
.routine-words summary{min-height:48px;cursor:pointer}

/* Hands and feet panel */
.handfoot-panel{min-width:0}
.handfoot-panel img{width:100%;display:block}
.handfoot-panel p{font-size:15px;margin:6px 0}
.feet-desktop{display:none}
.hand-lines{padding:10px;background:#221a18;border-radius:12px}
.hands-circles{display:flex;gap:12px}
.hands-circles span{border:2px solid #ffc24a;border-radius:50%;padding:8px;font-size:13px}
.routine-feet{order:2}
.routine-watch .routine-feet{display:none}
[hidden]{display:none!important}
.mobile-hands{margin-top:4px}
.mobile-hands summary{min-height:48px;display:flex;align-items:center;color:#ffc24a;cursor:pointer}

@media(min-width:700px){
  .move-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
  .routine-watch{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .routine-watch .player-wrap{margin:0}
  .routine-watch .routine-feet{display:block}
  .mobile-hands{display:none}
  .feet-phone{display:none}
  .feet-desktop{display:block;position:relative;overflow:hidden}
  .handfoot-panel .feet-desktop img{width:150%;max-width:none}
  .feet-active{position:absolute;border:3px solid #ffc24a;border-radius:4px;pointer-events:none;width:25%;height:50%;left:0;top:0}
}
@media(min-width:1000px){.move-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:699px){
  body[data-page="routine"] main{padding:8px 12px 40px}
  .count-number{font-size:56px}
  .routine-watch .player-wrap{--cap:min(70vh,calc(100vh - 300px))}
  @supports (height:1svh){.routine-watch .player-wrap{--cap:min(70svh,calc(100svh - 300px))}}
  .move-label{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.vid-stage::after{display:none}}