#session-overlay{position:fixed;inset:0;z-index:22;display:grid;place-items:center;padding:20px;background:var(--modal-backdrop);overflow:auto}
#session-overlay[hidden],#lesson-note[hidden],#lesson-goal[hidden]{display:none}
#session-overlay .result-card{width:min(410px,100%)}
#session-overlay .result-card,#result-overlay .result-card{max-height:calc(100dvh - 40px);overflow-y:auto}
#session-overlay h1{font-size:30px;letter-spacing:-1px}
#session-overlay p{font-size:14px;line-height:1.55;margin:16px 0 24px;color:var(--muted)}
#session-overlay .menu-logo{width:150px;height:auto;margin:0 auto 22px}
.session-actions{display:grid;gap:10px}
.session-actions button{min-height:50px;padding:12px 18px;border-radius:15px;border:1px solid var(--border);background:white;color:var(--ink);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
.session-actions button.primary{background:var(--ink);color:white;border-color:var(--ink)}
.session-actions button:disabled{background:var(--soft);color:var(--muted);cursor:default}
.session-actions button:focus-visible,#session-overlay select:focus-visible{outline:3px solid var(--green);outline-offset:3px}
#session-overlay label{display:block;text-align:left;margin:18px 0;color:var(--ink);font-size:14px}
#session-overlay select{width:100%;padding:12px;margin-top:8px;border:1px solid var(--border);border-radius:12px;background:white;color:var(--ink);font:inherit}
#session-overlay input{width:100%;margin-top:12px;accent-color:var(--green)}
#lesson-note{position:fixed;z-index:12;top:calc(175px * var(--ui-scale,1));left:50%;transform:translateX(-50%);max-width:min(420px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--border);border-radius:14px;background:#fffffff2;color:var(--ink);font-size:14px;line-height:1.4;text-align:center;pointer-events:none}
#lesson-goal{position:fixed;z-index:11;pointer-events:none;width:var(--goal-size,64px);height:var(--goal-size,64px);margin:calc(var(--goal-size,64px) / -2);color:#18181b;background:none;border:0;box-shadow:none}
#lesson-goal i{animation:goal-pulse 1.45s ease-in-out infinite;position:absolute;width:15px;height:4px;background:#efbd32;border-radius:4px;box-shadow:0 0 0 1.5px white}
#lesson-goal i:nth-child(1){left:calc(50% - 7.5px);top:0}
#lesson-goal i:nth-child(2){left:calc(50% - 7.5px);bottom:0}
#lesson-goal i:nth-child(3){left:0;top:calc(50% - 7.5px);width:4px;height:15px}
#lesson-goal i:nth-child(4){right:0;top:calc(50% - 7.5px);width:4px;height:15px}
#lesson-goal span{display:none}
#lesson-goal.offscreen{width:44px;height:44px;margin:-22px;background:#ffe57a;border:2px solid white;border-radius:50%;box-shadow:0 2px 10px #18181b20;font-size:27px}
#lesson-goal.offscreen i{display:none}
#lesson-goal.offscreen span{display:grid;place-items:center;width:100%;height:100%}
.lesson-highlight{outline:4px solid #efbd32!important;outline-offset:7px;animation:lesson-pulse 1.15s ease-in-out infinite}
:is(.action.lesson-highlight,.lesson-button-cue)::before{content:'';position:absolute;left:-57px;top:calc(50% - 21px);width:42px;height:42px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 17V5a3 3 0 0 1 6 0v10l2-1 3 1 3 1 3 4v5l-3 5H15L7 21a3 3 0 0 1 4-4l3 3' fill='white' stroke='%2318181b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transform:rotate(80deg);transform-origin:50% 75%;animation:lesson-tap 1.15s ease-in-out infinite;pointer-events:none}
:is(.action.lesson-highlight,.lesson-button-cue)::after{content:'››';position:absolute;left:-94px;top:50%;transform:translateY(-50%);font-size:40px;font-weight:750;line-height:1;color:#efbd32;text-shadow:0 0 2px white;animation:lesson-arrows 1.15s ease-in-out infinite;pointer-events:none}
body[data-game-mode=menu] #controls,body[data-game-mode=menu] #balance,body[data-game-mode=menu] #connection-status{display:none}
body[data-game-mode=tutorial] #connection-status,body[data-game-mode=training] #connection-status{display:none}
body[data-game-mode=tutorial] #control-hint{display:none}
@keyframes lesson-pulse{50%{outline-color:#ffe57a;outline-offset:11px;filter:brightness(1.08)}}
@keyframes lesson-tap{0%,100%{transform:translateX(-4px) rotate(73deg)}45%,65%{transform:translateX(9px) rotate(95deg)}}
@keyframes lesson-arrows{0%,100%{opacity:.6;transform:translate(-6px,-50%)}55%{opacity:1;transform:translate(4px,-50%)}}
@keyframes goal-pulse{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.25}}
#lesson-goal i:nth-child(1){translate:0 -3px}#lesson-goal i:nth-child(2){translate:0 3px}#lesson-goal i:nth-child(3){translate:-3px 0}#lesson-goal i:nth-child(4){translate:3px 0}
@keyframes exit-arrow-pulse{50%{opacity:.7;scale:1.1}}
#lesson-goal.offscreen span{animation:exit-arrow-pulse 1.45s ease-in-out infinite}
@media(max-height:520px){#lesson-note{top:12px;max-width:calc(100vw - 340px);font-size:12px;padding:8px 12px}#session-overlay{padding:12px}#session-overlay .result-card{padding:20px}#session-overlay p{margin:12px 0}}
@media(prefers-reduced-motion:reduce){.lesson-highlight,:is(.action.lesson-highlight,.lesson-button-cue)::before,:is(.action.lesson-highlight,.lesson-button-cue)::after,#lesson-goal i,#lesson-goal.offscreen span{animation:none}}
/* All dialogs share the viewport centre, including paused tutorial lessons. */
body[data-game-mode=tutorial] #session-overlay .result-card{width:min(340px,100%);padding:24px}
body[data-game-mode=tutorial] #session-overlay h1{font-size:26px}
@media(max-height:520px){body[data-game-mode=tutorial] #session-overlay .result-card{width:min(310px,100%);padding:18px}}

.action:disabled{filter:grayscale(1);opacity:.45;cursor:default}

#session-overlay .lesson-step{margin:0 0 10px;color:var(--ink);font-size:14px;line-height:1.3}
.lesson-step strong,#lesson-note strong{font-weight:750}
#lesson-note strong{display:inline-block;margin-right:8px;white-space:nowrap}

#lesson-spotlight{position:fixed;inset:0;z-index:10;pointer-events:none}
#lesson-spotlight>svg{position:absolute;inset:0;overflow:visible}
#lesson-spotlight>svg>rect{fill:var(--modal-backdrop)}
#lesson-cue{position:fixed;background:transparent;pointer-events:none}
body:has(#focus-note:not([hidden])) #lesson-spotlight{display:none}

.lesson-button-cue.lesson-stick-cue::before{left:calc(100% + 16px);rotate:180deg}
.lesson-button-cue.lesson-stick-cue::after{left:calc(100% + 64px);rotate:180deg}