/* Finish line (Oct 29 2026): a steering wheel rolls along a lit path and drops into the Next "coin slot".
   Always in view: fixed to the bottom of the viewport, moves into the player while fullscreen. */
#dtxFinish{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  width:min(760px,calc(100vw - 20px));height:80px;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,28,60,.86),rgba(6,12,28,.92));
  border:1px solid rgba(72,148,255,.42);
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 0 1px rgba(5,10,24,.6),inset 0 1px 0 rgba(255,255,255,.07),0 0 26px rgba(30,100,240,.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:box-shadow .5s,border-color .5s}
#dtxFinish[hidden]{display:none!important}
#dtxFinish.ff-ready{border-color:rgba(70,200,255,.7);box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 34px rgba(46,200,255,.32)}
body.ff-on .shell{padding-bottom:122px}
#dtxFinish.ff-fs{position:absolute;bottom:auto;top:12px;z-index:30}
#dtxFinish .ff-svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#dtxFinish .ff-lit{filter:drop-shadow(0 0 4px rgba(70,200,255,.95)) drop-shadow(0 0 10px rgba(47,125,255,.8))}
#dtxFinish .ff-wheel-glow{filter:drop-shadow(0 0 6px rgba(70,200,255,.8))}
#dtxFinish .ff-pennant{transform-box:fill-box;transform-origin:0 50%;animation:ffWave 2.2s ease-in-out infinite}
@keyframes ffWave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-7deg) scaleX(.9)}}
#dtxFinish .ff-hint{position:absolute;z-index:2;top:9px;right:150px;font:600 11px/1 var(--font-ui,system-ui);letter-spacing:.04em;color:var(--cyan,#46c8ff);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
#dtxFinish .ff-hint.on{opacity:.95}
#dtxFinish .ff-slot{position:absolute;z-index:2;right:12px;top:20px;height:40px;min-width:118px;padding:0 16px 0 18px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;font:800 15px/1 var(--font-disp,var(--font-ui,system-ui));letter-spacing:.02em;color:#8ea6cc;
  background:linear-gradient(180deg,#14213f,#0a1226);border:1px solid rgba(110,150,230,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.45);cursor:pointer;transition:all .45s cubic-bezier(.2,.8,.2,1)}
#dtxFinish .ff-slot .ic{width:16px;height:16px;flex:none}
#dtxFinish .ff-slot .ff-lock{opacity:.8}
#dtxFinish .ff-slot .ff-chev{display:none}
#dtxFinish .ff-mouth{position:absolute;left:50%;top:-4px;width:38px;height:9px;transform:translateX(-50%);border-radius:9px;background:#01040b;
  box-shadow:inset 0 2px 3px #000,0 0 0 1.5px rgba(120,160,230,.4);transition:box-shadow .5s}
#dtxFinish .ff-flagpole{position:absolute;right:10px;top:-26px;width:2px;height:28px;background:linear-gradient(#e8f1ff,#8fa8d0);border-radius:2px;transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,1.5,.4,1) .15s}
#dtxFinish .ff-flagpole i{position:absolute;left:2px;top:1px;width:15px;height:10px;background:var(--green,#2ad17e);clip-path:polygon(0 0,100% 50%,0 100%);animation:ffWave 1.8s ease-in-out infinite;transform-origin:0 50%}
#dtxFinish.ff-ready .ff-flagpole{transform:scaleY(1)}
#dtxFinish.ff-ready .ff-slot{color:#fff;border-color:rgba(120,220,255,.85);background:linear-gradient(180deg,#2f7dff,#1455e8 58%,#0e3fb8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(70,200,255,.5),0 0 22px rgba(70,200,255,.65),0 6px 16px rgba(10,60,200,.5);animation:ffPulse 1.8s ease-in-out infinite}
#dtxFinish.ff-ready .ff-slot .ff-lock{display:none}
#dtxFinish.ff-ready .ff-slot .ff-chev{display:block}
#dtxFinish.ff-ready .ff-mouth{box-shadow:inset 0 2px 3px #000,0 0 0 1.5px #46c8ff,0 0 14px rgba(70,200,255,.9)}
#dtxFinish.ff-ready .ff-slot:hover{transform:translateY(-1px);filter:brightness(1.12)}
@keyframes ffPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(70,200,255,.5),0 0 18px rgba(70,200,255,.5),0 6px 16px rgba(10,60,200,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(120,230,255,.8),0 0 34px rgba(70,220,255,.95),0 6px 16px rgba(10,60,200,.5)}}
#dtxFinish .ff-slot.ff-ding::after{content:"";position:absolute;left:50%;top:-4px;width:38px;height:9px;border-radius:50%;border:2px solid #9cecff;transform:translateX(-50%);animation:ffDing .8s ease-out forwards;pointer-events:none}
@keyframes ffDing{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(4.2,3.2)}}
#dtxFinish .ff-slot:focus-visible{outline:2px solid #fff;outline-offset:3px}
#dtxFinish .ff-count{position:absolute;z-index:2;left:20px;bottom:8px;font:700 11.5px/1 var(--font-digit,var(--font-ui,system-ui));letter-spacing:.05em;color:var(--mut,#93a7c8);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
#dtxFinish .ff-count b{color:var(--cyan,#46c8ff);font-weight:700}
#dtxFinish.ff-ready .ff-count b{color:var(--green,#2ad17e)}
#dtxFinish .ff-slot.ff-no{animation:ffNo .55s cubic-bezier(.36,.07,.19,.97) both;border-color:rgba(255,107,124,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,107,124,.5),0 0 20px rgba(255,107,124,.55)}
@keyframes ffNo{0%,100%{transform:translateX(0)}12%{transform:translateX(-11px)}28%{transform:translateX(10px)}44%{transform:translateX(-8px)}60%{transform:translateX(6px)}76%{transform:translateX(-3px)}90%{transform:translateX(2px)}}
#dtxFinish .ff-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:560px){
  #dtxFinish{height:74px;border-radius:16px}
  #dtxFinish .ff-slot{top:17px;height:38px;min-width:92px;padding:0 12px 0 14px;font-size:14px;right:9px}
  #dtxFinish .ff-hint{right:116px;top:6px;font-size:10px}
  body.ff-on .shell{padding-bottom:116px}
}
@media (prefers-reduced-motion:reduce){
  #dtxFinish .ff-pennant,#dtxFinish .ff-flagpole i,#dtxFinish.ff-ready .ff-slot{animation:none}
  #dtxFinish .ff-slot.ff-no{animation-duration:.01s}
}

/* reviewer toolbar (draft copy only) sits at the bottom too: stack above it */
body.ff-rev #dtxFinish:not(.ff-fs){bottom:66px}
body.ff-rev.ff-on .shell{padding-bottom:190px}

/* landing glow (Oct 29): a bright back-glow that lingers about 3.5 s, then eases back to the steady pulse */
#dtxFinish .ff-halo{position:absolute;right:-34px;top:-12px;width:206px;height:104px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(130,235,255,.95),rgba(60,160,255,.5) 52%,rgba(47,125,255,0) 76%)}
#dtxFinish .ff-halo.ff-halo-on{animation:ffHalo 3.8s ease-out both}
@keyframes ffHalo{0%{opacity:0;transform:scale(.55)}10%{opacity:1;transform:scale(1.2)}45%{opacity:.9;transform:scale(1.08)}100%{opacity:0;transform:scale(1)}}
#dtxFinish.ff-ready .ff-slot.ff-ding{animation:ffBurst 3.6s ease-out 1,ffPulse 1.8s ease-in-out 3.6s infinite}
@keyframes ffBurst{
  0%{filter:brightness(1);box-shadow:0 0 0 0 rgba(150,240,255,0),0 0 0 0 rgba(70,220,255,0)}
  8%{filter:brightness(1.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 4px rgba(170,245,255,.95),0 0 60px 22px rgba(80,225,255,.95),0 0 130px 44px rgba(47,125,255,.75)}
  45%{filter:brightness(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 3px rgba(150,240,255,.8),0 0 50px 16px rgba(80,225,255,.8),0 0 100px 32px rgba(47,125,255,.55)}
  100%{filter:brightness(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(70,200,255,.5),0 0 18px rgba(70,200,255,.5),0 6px 16px rgba(10,60,200,.5)}}
@media (prefers-reduced-motion:reduce){#dtxFinish .ff-halo.ff-halo-on{animation:none;opacity:.6}#dtxFinish.ff-ready .ff-slot.ff-ding{animation:none}}

/* Oct 29 (v2): Next turns green when it opens. Landing = a happy shake, a bright green burst, a few flashes, then a steady glow. */
#dtxFinish.ff-ready{border-color:rgba(90,240,170,.75);box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 34px rgba(60,230,150,.34)}
#dtxFinish.ff-ready .ff-slot{border-color:rgba(160,255,205,.9);background:linear-gradient(180deg,#34dc8a,#19ad63 58%,#0f8a4f);color:#04210f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(110,255,180,.55),0 0 22px rgba(70,255,160,.65),0 6px 16px rgba(10,120,60,.5);animation:ffPulseG 1.8s ease-in-out infinite}
#dtxFinish.ff-ready .ff-mouth{box-shadow:inset 0 2px 3px #000,0 0 0 1.5px #7dffbf,0 0 14px rgba(90,255,170,.9)}
#dtxFinish.ff-ready .ff-slot .ic{color:#04210f}
#dtxFinish .ff-halo{background:radial-gradient(closest-side,rgba(150,255,205,.95),rgba(60,220,140,.5) 52%,rgba(40,200,120,0) 76%)}
#dtxFinish.ff-ready .ff-slot.ff-ding{animation:ffYes .55s ease-in-out 1,ffBurstG 3.6s ease-out 1,ffFlashG .55s ease-in-out 1.2s 4,ffPulseG 1.8s ease-in-out 3.6s infinite}
@keyframes ffYes{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-6px) rotate(-2deg)}35%{transform:translateX(6px) rotate(2deg)}55%{transform:translateX(-4px) rotate(-1.2deg)}75%{transform:translateX(3px) rotate(.8deg)}}
@keyframes ffBurstG{
  0%{filter:brightness(1)}
  8%{filter:brightness(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 4px rgba(190,255,220,.95),0 0 60px 22px rgba(80,255,160,.95),0 0 130px 44px rgba(40,200,120,.7)}
  45%{filter:brightness(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 3px rgba(160,255,205,.8),0 0 50px 16px rgba(80,255,160,.8),0 0 100px 32px rgba(40,200,120,.5)}
  100%{filter:brightness(1)}}
@keyframes ffFlashG{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 3px rgba(210,255,230,.95),0 0 46px 14px rgba(110,255,180,.95)}}
@keyframes ffPulseG{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(110,255,180,.55),0 0 18px rgba(70,255,160,.5),0 6px 16px rgba(10,120,60,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(170,255,210,.85),0 0 34px rgba(90,255,170,.95),0 6px 16px rgba(10,120,60,.5)}}
#dtxFinish .ff-slot.ff-ding::after{border-color:#b9ffd9}
@media (prefers-reduced-motion:reduce){#dtxFinish.ff-ready .ff-slot,#dtxFinish.ff-ready .ff-slot.ff-ding{animation:none}}

/* Nov 4 2026 (Juan): the wheel bar fades out after 3 s with no mouse, touch or key activity (slowly, about 4 s) and comes back in about
   0.2 s on any of them; while faded it takes no clicks. "Hide progress wheel" turns it off until the student turns it back on.
   The Next button (with its flag, mouth and landing glow) never fades or hides. The bar's panel moves to ::before so it can fade
   without taking Next with it. Reduced motion: no slow fade, it just hides and shows. */
#dtxFinish,#dtxFinish.ff-ready{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#dtxFinish::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,28,60,.86),rgba(6,12,28,.92));border:1px solid rgba(72,148,255,.42);
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 0 1px rgba(5,10,24,.6),inset 0 1px 0 rgba(255,255,255,.07),0 0 26px rgba(30,100,240,.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:opacity .2s ease-out,box-shadow .5s,border-color .5s}
#dtxFinish.ff-ready::before{border-color:rgba(90,240,170,.75);box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 34px rgba(60,230,150,.34)}
#dtxFinish .ff-svg,#dtxFinish .ff-count,#dtxFinish .ff-eye{transition:opacity .2s ease-out}
#dtxFinish.ff-idle::before,#dtxFinish.ff-idle .ff-svg,#dtxFinish.ff-idle .ff-count,#dtxFinish.ff-idle .ff-hint,#dtxFinish.ff-idle .ff-eye{opacity:0;transition:opacity 4s ease-in-out}
#dtxFinish.ff-off::before,#dtxFinish.ff-off .ff-svg,#dtxFinish.ff-off .ff-count,#dtxFinish.ff-off .ff-hint{opacity:0}
#dtxFinish.ff-idle,#dtxFinish.ff-off,#dtxFinish.ff-idle .ff-eye{pointer-events:none}
#dtxFinish .ff-slot,#dtxFinish:not(.ff-idle) .ff-eye{pointer-events:auto}
#dtxFinish .ff-slot{opacity:1}
#dtxFinish .ff-eye{position:absolute;z-index:4;left:14px;bottom:calc(100% + 5px);height:20px;display:flex;align-items:center;gap:5px;padding:0 9px 0 7px;border-radius:10px;
  font:600 10.5px/1 var(--font-ui,system-ui);letter-spacing:.02em;color:var(--mut,#93a7c8);background:rgba(6,12,28,.82);border:1px solid rgba(72,148,255,.32);
  cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#dtxFinish .ff-eye:hover{color:#eaf3ff;border-color:rgba(120,200,255,.6)}
#dtxFinish .ff-eye:focus-visible{outline:2px solid #fff;outline-offset:2px}
#dtxFinish .ff-eye .ic{width:13px;height:13px;flex:none}
#dtxFinish .ff-eye .ff-eye-show,#dtxFinish.ff-off .ff-eye .ff-eye-hide{display:none}
#dtxFinish.ff-off .ff-eye .ff-eye-show{display:block}
#dtxFinish.ff-fs .ff-eye{bottom:auto;top:calc(100% + 5px)}
@media (pointer:coarse){#dtxFinish .ff-eye{height:auto;border-radius:22px;padding:0 14px 0 11px;font-size:12px}#dtxFinish .ff-eye .ic{width:16px;height:16px}}
@media (prefers-reduced-motion:reduce){
  #dtxFinish::before,#dtxFinish .ff-svg,#dtxFinish .ff-count,#dtxFinish .ff-eye,
  #dtxFinish.ff-idle::before,#dtxFinish.ff-idle .ff-svg,#dtxFinish.ff-idle .ff-count,#dtxFinish.ff-idle .ff-hint,#dtxFinish.ff-idle .ff-eye{transition:none}
}