/* The new-player tutorial's coach (tutorial.js): a dark veil with holes over the buttons that matter, gold glowing
   rings around them, a bobbing hand, and the red coach ball talking in a game-style speech box. */
.coach{position:fixed;inset:0;z-index:60;pointer-events:none;padding-top:env(safe-area-inset-top)}
.coach[hidden]{display:none}
.coach-dim{position:absolute;inset:0;width:100%;height:100%;display:block}
.coach-dim .coach-shade{fill:#040818bd}
.coach-dim path{transition:d .25s}
.coach-rings i{position:absolute;display:block;border:4px solid #ffd54a;box-shadow:0 0 22px 6px #ffc828f2,0 0 46px 14px #ffaa1480,inset 0 0 18px #ffd23c8c;animation:coach-ring 1.4s ease-in-out infinite}
.coach-rings i[hidden]{display:none}
@keyframes coach-ring{50%{box-shadow:0 0 30px 10px #ffc828,0 0 64px 22px #ffaa1499,inset 0 0 24px #ffd23cb3;border-color:#fff1a8}}
.coach-hand{position:absolute;font-size:56px;line-height:1;transform:translate(-30%,-100%) rotate(-10deg);filter:drop-shadow(0 4px 6px #000a);animation:coach-hand-down .9s ease-in-out infinite}
.coach-hand.is-up{transform:translate(-30%,0) rotate(-10deg);animation-name:coach-hand-up}
.coach-hand[hidden]{display:none}
@keyframes coach-hand-down{50%{translate:0 -12px}}
@keyframes coach-hand-up{50%{translate:0 12px}}
.coach-bubble{pointer-events:auto;position:absolute;left:max(14px,calc(50% - 210px));right:max(14px,calc(50% - 210px));min-height:96px;padding:13px 16px 13px 102px;border-radius:20px;background:linear-gradient(#22397a,#142352);border:3px solid #f4c542;box-shadow:0 10px 30px #000b,inset 0 2px 0 #4f6fc0;color:#fff;transition:top .25s}
.coach-bubble.pop{animation:coach-pop .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes coach-pop{from{transform:scale(.85);opacity:0}}
.coach-bubble h3{margin:0 0 3px;font:400 23px/1.05 'Lilita One',sans-serif;color:#ffd54a;text-shadow:0 2px 0 #7a4b00}
.coach-bubble p{margin:0;font:600 15px/1.35 'Manrope',sans-serif;color:#eef2ff}
.coach-bubble p b{color:#fff;font-weight:800}
.coach-foot{margin-top:8px;display:flex;flex-wrap:wrap;row-gap:5px;justify-content:space-between;align-items:center;gap:8px;font:800 10.5px 'Manrope',sans-serif;letter-spacing:1.3px;color:#9fb3e6}
.coach-foot>span:first-child{white-space:nowrap}
.coach-dots{white-space:nowrap}
.coach-dots i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3d5596;margin-left:4px}
.coach-dots i.on{background:#ffd54a}
.coach-face{position:absolute;left:10px;top:50%;width:80px;height:80px;margin-top:-44px;border-radius:50%;background:url(/assets/avatars/red-wink.webp) center/cover;box-shadow:0 0 0 3px #f4c542,0 6px 14px #0008}
.coach-tag{position:absolute;left:8px;bottom:-11px;width:84px;text-align:center;font:13px 'Lilita One',sans-serif;letter-spacing:1px;color:#2a1600;background:linear-gradient(#ffe27a,#f2b51e);border-radius:9px;padding:2px 0;box-shadow:0 2px 0 #8a5a00}
.coach-bubble[hidden]{display:none}
/* The name card. */
.coach.is-name{pointer-events:auto;background:#040818bd}
.coach.is-name .coach-dim{display:none}
/* --name-mid: the middle of the visible part of the screen (tutorial.js fitName), which the keyboard can shrink. */
.coach-name{position:absolute;left:max(24px,calc(50% - 190px));right:max(24px,calc(50% - 190px));top:var(--name-mid,50%);transform:translateY(-58%);transition:top .2s;padding:60px 20px 22px;border-radius:24px;background:linear-gradient(#24407f,#152656);border:3px solid #f4c542;box-shadow:0 14px 40px #000c,inset 0 2px 0 #5577cc;text-align:center;color:#fff;animation:coach-pop .36s cubic-bezier(.2,1.5,.4,1)}
.coach-name[hidden]{display:none}
.coach-name .coach-face{left:50%;top:0;margin:-46px 0 0 -44px;width:88px;height:88px}
.coach-name h2{margin:0 0 4px;font:400 31px/1.05 'Lilita One',sans-serif;color:#ffd54a;text-shadow:0 3px 0 #7a4b00}
.coach-name p{margin:0 0 15px;font:600 14.5px 'Manrope',sans-serif;color:#d9e2ff}
.coach-name-field{position:relative}
.coach-name input{box-sizing:border-box;width:100%;height:56px;border-radius:14px;background:#0c1638;border:2px solid #4f6fc0;padding:0 56px 0 16px;font:400 24px 'Lilita One',sans-serif;color:#fff;letter-spacing:.5px;outline:none}
.coach-name input:focus{border-color:#ffd54a;box-shadow:0 0 0 3px #ffd54a40}
.coach-name input::placeholder{color:#5c6fa8}
.coach-dice{position:absolute;right:6px;top:6px;width:44px;height:44px;border-radius:11px;background:#1c2d63;font-size:23px;line-height:44px;padding:0}
.coach-name-hint{display:block;margin:8px 2px 16px;text-align:left;font:700 12px 'Manrope',sans-serif;color:#8fa3d6}
.coach-go{width:100%;height:60px;border-radius:18px;background:linear-gradient(#ffe066,#f5b70f);font:400 29px 'Lilita One',sans-serif;color:#5a3300;box-shadow:0 5px 0 #a86a00,0 0 0 4px #ffd54a,0 0 28px 10px #ffc828bf}
/* With the keyboard up on a phone: no face and no line under the title, so the whole card fits above the keys. */
.coach-name.is-tight{padding-top:16px;transform:translateY(-50%)}
.coach-name.is-tight>.coach-face,.coach-name.is-tight>p{display:none}
.coach-name.is-tight h2{margin-bottom:12px;font-size:27px}
.coach-name.is-tight .coach-name-hint{margin:6px 2px 12px}
.coach-name.is-tiny .coach-name-hint:not(.is-error){display:none}
.coach-name.is-tiny h2{margin-bottom:10px;font-size:24px}
.coach-name.is-tiny .coach-name-field{margin-bottom:12px}
.coach-go:disabled,.coach-go.is-short{filter:grayscale(.75) brightness(.8);box-shadow:0 5px 0 #6b5a3a}
.coach-name-hint.is-error{color:#ff5a5a;font-size:13px}
/* Skipping (owner's pick 2): a SKIP tag on the coach's speech box on every step, a link under LET'S GO! on the name
   card, and one question before the tutorial goes. The tag's tap area reaches past its edges. */
.coach-skip{position:absolute;top:-15px;right:14px;padding:4px 13px 5px;border-radius:9px;background:#0c1638;border:2px solid #5d76c2;color:#dfe7ff;font:400 14px 'Lilita One',sans-serif;letter-spacing:1px;box-shadow:0 2px 0 #050a1c}
.coach-skip::after{content:'';position:absolute;inset:-10px -8px}
.coach-name-skip{display:block;margin:14px auto 0;padding:4px 10px;background:none;border:0;color:#9fb3e6;font:800 13px 'Manrope',sans-serif;letter-spacing:1.2px;text-decoration:underline;text-underline-offset:3px}
.coach-name.is-tight .coach-name-skip{margin-top:8px}
.coach-veil{pointer-events:auto;position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#040818cc}
.coach-veil[hidden]{display:none}
.coach.is-asking :is(.coach-bubble,.coach-hand){visibility:hidden}
.coach-confirm{position:relative;width:min(340px,calc(100% - 48px));padding:56px 20px 20px;border-radius:24px;background:linear-gradient(#24407f,#152656);border:3px solid #f4c542;box-shadow:0 14px 40px #000c,inset 0 2px 0 #5577cc;text-align:center;color:#fff;animation:coach-pop .3s cubic-bezier(.2,1.5,.4,1)}
.coach-confirm .coach-face{left:50%;top:0;margin:-46px 0 0 -44px;width:88px;height:88px}
.coach-confirm h2{margin:0 0 6px;font:400 28px/1.05 'Lilita One',sans-serif;color:#ffd54a;text-shadow:0 3px 0 #7a4b00}
.coach-confirm p{margin:0 0 18px;font:600 14.5px/1.4 'Manrope',sans-serif;color:#d9e2ff}
.coach-confirm p b{color:#fff;font-weight:800}
.coach-keep{width:100%;height:56px;border-radius:18px;background:linear-gradient(#ffe066,#f5b70f);font:400 25px 'Lilita One',sans-serif;color:#5a3300;box-shadow:0 5px 0 #a86a00}
.coach-skip-yes{margin-top:14px;width:100%;height:46px;border-radius:14px;background:#0c1638;border:2px solid #4f6fc0;font:400 19px 'Lilita One',sans-serif;color:#dfe7ff;letter-spacing:.5px}
/* Short or narrow phones (360x640, 320x568): a smaller coach box, so it has room beside what it points at. */
@media (max-height:700px),(max-width:340px){.coach-bubble{min-height:76px;padding:9px 12px 10px 78px}.coach-bubble h3{font-size:19px;padding-right:62px}.coach-bubble p{font-size:13.5px;line-height:1.3}.coach-foot{margin-top:5px}.coach-bubble>.coach-face{left:8px;width:60px;height:60px;margin-top:-34px}.coach-bubble>.coach-tag{left:4px;width:68px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.coach-rings i,.coach-hand,.coach-bubble.pop,.coach-name,.coach-confirm{animation:none}}