.drift-coach { position: fixed; left: 50%; bottom: 3.2vh; transform: translate(-50%, 2vh); width: min(92vw, 680px); z-index: 7;
  display: flex; flex-direction: column; gap: .55em; padding: 1.25em 1.35em 1.1em; color: #fff; font-family: "Arial Rounded MT Bold", "Arial Black", sans-serif;
  background: linear-gradient(160deg, #33235c 0%, #201741 58%, #171132 100%); border: 3px solid #fff; border-radius: 16px;
  box-shadow: 0 0 0 4px #1b1238, 8px 10px 0 #0a0718aa, inset 0 2px 0 #ffffff35; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.drift-coach.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: coach-in .22s ease-out; }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 2vh); } to { opacity: 1; transform: translate(-50%, 0); } }
.drift-coach.finish { background: linear-gradient(160deg, #173f2c, #123022); }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.dc-kicker { font-size: 11px; letter-spacing: .18em; color: #ffd64d; font-weight: 900; }
.dc-skip { border: 2px solid #ffffff85; background: #0006; color: #fff; border-radius: 99px; padding: .25em .8em; font: 900 11px/1.3 inherit; letter-spacing: .08em; cursor: pointer; }
.dc-skip:hover { background: #fff2; }
.dc-step { display: flex; align-items: center; gap: .65em; }
.dc-num { width: 1.7em; height: 1.7em; display: grid; place-items: center; flex: none; border-radius: 50%; background: #ffd64d; color: #241543; font: 900 15px/1 inherit; box-shadow: 0 3px 0 #8a5e00; }
.dc-title { font-size: clamp(17px, 2.6vh, 27px); letter-spacing: .04em; text-shadow: 0 2px 0 #000; }
.dc-body { margin: 0; font: 700 clamp(12px, 1.85vh, 17px)/1.45 "Trebuchet MS", sans-serif; color: #e9e2ff; max-width: 46em; }
.dc-dots { display: flex; gap: 6px; }
.dc-dots i { width: 22px; height: 5px; border-radius: 99px; background: #ffffff26; }
.dc-dots i.on { background: #ffd64d; }
.dc-key { display: flex; align-items: center; gap: .45em; margin-top: .15em; font: 900 11px/1 "Trebuchet MS", sans-serif; color: #bcb0da; }
.dc-key kbd { padding: .35em .55em; border-radius: 5px; background: #ffffff18; border: 2px solid #ffffff4d; color: #fff; font: 900 11px/1 inherit; }
.dc-key em { font-style: normal; letter-spacing: .1em; color: #ffd64d; margin-left: .2em; }
.boost-callout { position: fixed; left: 50%; top: 17%; transform: translate(-50%, -1vh) scale(.92); z-index: 4; text-align: center; pointer-events: none;
  opacity: 0; font-family: "Arial Rounded MT Bold", "Arial Black", sans-serif; }
.boost-callout.show { animation: boost-callout 1s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.boost-callout b { display: block; font-size: clamp(24px, 4.6vw, 58px); line-height: 1; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3px #1b1238; paint-order: stroke fill;
  text-shadow: 0 0 22px var(--bc, #fff), 5px 7px 0 #0a0718; }
.boost-callout span { display: inline-block; margin-top: .35em; padding: .25em .8em; border-radius: 99px; background: #1b1238dd; border: 2px solid var(--bc, #fff);
  color: var(--bc, #fff); font: 900 clamp(10px, 1.2vw, 14px)/1.2 inherit; letter-spacing: .16em; }
@keyframes boost-callout { 0% { opacity: 0; transform: translate(-50%, 1.5vh) scale(.85); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.03); } 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -.8vh) scale(.98); } }
@media (max-width: 700px), (max-height: 520px) { .drift-coach { bottom: 1.5vh; padding: .9em 1em; } .dc-body { font-size: 11px; } .dc-key { display: none; } }
@media (prefers-reduced-motion: reduce) { .boost-callout.show { animation-duration: .15s; } .drift-coach { transition: none; } }