/* Echo's Dance Floor: only the game screen. The robot picker, level map and cards come from number.css. */
.dfg{display:flex;flex-direction:column;gap:12px}
.dfg .top2{margin-top:-4px}
.dfg .dstage{position:relative;background:radial-gradient(120% 80% at 50% 0%,#2b1a5a,#1f1142 70%);border:3px solid var(--line);border-radius:22px;padding:34px 12px 12px;display:flex;flex-direction:column;gap:12px}
.dfg .floorwrap{width:100%;max-width:440px;margin:0 auto;padding-top:5%}
.dfg .floor{position:relative;width:100%;aspect-ratio:1/1;display:grid;gap:5px}
.dfg .tile{position:relative;border-radius:10px;background:#24145a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);display:grid;place-items:center;transition:background .25s,box-shadow .25s}
.dfg .tile.alt{background:#2a1866}
.dfg .tile.lit{background:#7a1f69;box-shadow:inset 0 0 0 2px var(--pink),0 0 16px rgba(255,62,165,.55)}
.dfg .tile.trail{box-shadow:inset 0 0 0 2px rgba(53,227,245,.6)}
.dfg .tile.start::after{content:"";position:absolute;inset:18%;border-radius:50%;border:3px dashed rgba(182,255,60,.55)}
.dfg .tile svg{width:72%;height:72%}
.dfg .tile.slide{background:linear-gradient(135deg,#2b7fa8 0%,#5fd8ff 38%,#2b7fa8 52%,#9cecff 70%,#2b7fa8 100%);box-shadow:inset 0 0 0 2px #9cecff}
.dfg .tile.pat{font-family:var(--display);font-size:clamp(1.1rem,6vw,1.9rem);color:#150a2e}
.dfg .tile.pat.done{opacity:.35}
.dfg .tile.p1{background:#ff3ea5}.dfg .tile.p2{background:#35e3f5}.dfg .tile.p3{background:#ffe34d}.dfg .tile.p4{background:#b6ff3c}
.dfg .tile.got svg{opacity:0;transition:opacity .3s}
/* Echo herself stands on the tile, feet on its lower edge. Her size and place are set by the game. */
.dfg .floor .echo{bottom:auto;aspect-ratio:auto;z-index:3;pointer-events:none;transition:left .38s cubic-bezier(.3,1.3,.5,1),top .38s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
/* Echo is seen from behind while she moves, so forward, back, left and right are the same for Echo, the screen and the child. She turns to face the child to cheer, shrug or think. */
.dfg .echo.back .e-back,.dfg .echo.bstep .e-bstep,.dfg .echo.bjump .e-bjump,.dfg .echo.bwide .e-bwide{visibility:visible}
.dfg .echo.flip img{transform:scaleX(-1)}
.dfg .floor .echo.slow{transition-duration:.26s;transition-timing-function:linear}
.dfg .floor .echo.bump{animation:df-bump .5s ease}
@keyframes df-bump{20%,60%{transform:translateX(-10%) rotate(-6deg)}40%,80%{transform:translateX(10%) rotate(6deg)}}
.dfg .floor .echo.big{animation:df-bounce .45s ease-out}
@keyframes df-bounce{45%{transform:translateY(-30%) scale(1.08)}}
.dfg .dsay{display:flex;align-items:center;gap:10px;background:var(--ink);color:#1b1038;border-radius:16px;padding:8px 12px;min-height:3.2em}
.dfg .dsay-text{font-family:var(--display);font-size:1.1rem;line-height:1.2;flex:1}
.dfg .dsay-text b{color:#d8197f;font-weight:400}
.dfg .dstat{font-weight:800;color:#6b3fd1;white-space:nowrap;font-variant-numeric:tabular-nums}
.dfg .hear{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#1b1038;color:var(--yellow);display:grid;place-items:center}
.dfg .plan h2{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 8px;color:var(--lime)}
.dfg .slots{display:flex;flex-wrap:wrap;gap:6px;min-height:52px}
.dfg .slot{width:46px;height:46px;border-radius:12px;border:2px dashed var(--line);display:grid;place-items:center;color:var(--muted)}
.dfg .slot.full{border:2px solid var(--cyan);background:#2b1a5a;color:var(--cyan)}
.dfg .slot.now{background:var(--pink);border-color:var(--pink);color:#150a2e;transform:scale(1.08)}
.dfg .slot.bad{background:#5a1030;border-color:#ff6b6b;color:#ffd0d0}
.dfg .slot svg{width:26px;height:26px}
.dfg .slot .beat{font-weight:800;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dfg .dpad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dfg .dpad button{min-height:68px;border-radius:16px;border:3px solid var(--cyan);background:#1f1142;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.dfg .dpad button svg{width:32px;height:32px;color:var(--cyan)}
.dfg .dpad button:active{transform:scale(.95)}
.dfg .drow{display:flex;gap:8px}
.dfg .dgo{flex:1 1 160px;min-height:60px;border-radius:18px;background:var(--lime);color:#14230a;font-family:var(--display);font-size:1.7rem;box-shadow:0 6px 0 #6aa514}
.dfg .dgo:active{transform:translateY(3px);box-shadow:0 3px 0 #6aa514}
.dfg .dsmall{flex:0 1 auto;min-height:60px;padding-inline:18px;border-radius:18px;border:2px solid var(--line);background:#1f1142;color:var(--ink);font-weight:800}
.dfg .newfloor{min-height:46px;align-self:center}
.dfg button:disabled{opacity:.45;cursor:default}
.dfg .pad-msg{margin:0}
@media (max-width:420px){ .dfg .slot{width:40px;height:40px} .dfg .slot svg{width:22px;height:22px} .dfg .dsay-text{font-size:1rem} }
@media (prefers-reduced-motion:reduce){ .dfg .floor .echo,.dfg .tile{transition:none} .dfg .floor .echo.bump,.dfg .floor .echo.big{animation:none} }