/* An animated stage tour: real interface spotlights with short visual demonstrations. */
#gameTutorial{position:fixed;inset:0;margin:0;padding:0;width:100%;height:var(--game-window-height,100dvh);max-width:none;max-height:none;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:hidden;color:#f5f9ff}
#gameTutorial::backdrop{background:transparent}
.tour-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#tourOutlines{fill:none;stroke:#63e7ff;stroke-width:2;animation:tour-outline 1.8s ease-in-out infinite}
#tourPointer{fill:none;stroke:#ffe16b;stroke-width:3;stroke-dasharray:7 5;animation:tour-trail 1.2s linear infinite}
.tour-panel{position:absolute;width:370px;max-width:calc(100% - 24px);padding:22px;background:#102b4c;border-radius:14px;box-shadow:0 14px 42px #0007}
.tour-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#b4d5fa;font-weight:800}
.tour-topline button{background:transparent;border:0;color:#b4d5fa;min-height:44px;padding:0 4px;font:800 12px var(--body);cursor:pointer}
#tourTitle{font:400 28px/1.12 var(--display);color:#ffe16b;margin:4px 0 10px;outline:none}
#tourText{font:500 14px/1.6 var(--body);color:#e1eeff;margin:12px 0 18px}
.tour-demo{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;margin:16px 0 0;color:#63e7ff}
.tour-demo small{font:800 10px/1.3 var(--body);color:#b4d5fa}
.tour-arrows{display:flex;gap:8px;align-items:center}
.tour-arrows>span{display:grid;place-items:center;width:40px;height:38px;background:#1d466f;border-bottom:3px solid #081b32;border-radius:6px;font:900 25px/1 var(--body);animation:tour-key 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}
.tour-check{font-size:28px;animation:tour-pay 2.4s ease-out infinite}
.tour-dots{display:flex;align-items:center;gap:7px;font-size:12px}
.tour-dots i{width:17px;height:17px;border:2px solid #7c9bbc;border-radius:50%;animation:tour-dot 3.5s steps(1) infinite;animation-delay:calc(var(--i)*.22s)}
.tour-dots i:nth-child(n+6){animation:none}
.tour-reward{font:800 12px/1.4 var(--body);color:#ffe16b;animation:tour-pay 3.5s ease-out infinite}
.tour-scorecards{display:flex;gap:46px;text-align:center}
.tour-scorecards span{display:flex;flex-direction:column;gap:7px}
.tour-scorecards b{display:grid;place-items:center;background:#fff5d9;color:#102b4c;width:53px;height:44px;font:900 32px var(--body);transform-origin:50% 100%;animation:tour-card 2.2s ease-in-out infinite}
.tour-scorecards span:last-child b{animation-delay:.4s}
.tour-meters{display:flex;gap:20px;width:100%;justify-content:center}
.tour-meters>span{display:flex;flex-direction:column;align-items:center;gap:6px}
.tour-meters i{height:42px;width:52px;display:flex;align-items:end;background:#081b32;overflow:hidden;border-radius:4px}
.tour-meters b{background:#63e7ff;width:100%;height:100%;transform-origin:bottom;animation:tour-meter 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*.25s)}
.tour-actions{display:flex;gap:12px;align-items:center;justify-content:space-between}
.tour-actions button{min-height:44px;cursor:pointer;font:900 13px var(--body);border:0;border-radius:6px;padding:10px 18px}
#tourNext{background:#63e7ff;color:#082342}
#tourNext:hover{background:#b4f4ff}
#tourBack{background:#1d466f;color:#e1eeff}
#tourBack:disabled{opacity:.35;cursor:default}
#gameTutorial button:focus-visible{outline:3px solid #ffe16b;outline-offset:3px}
.tour-clock-note{display:block;font:500 10px/1.4 var(--body);color:#b4d5fa;margin-top:12px;text-align:center}
@keyframes tour-key{0%,35%,100%{transform:translateY(0);background:#1d466f;color:#63e7ff}15%,25%{transform:translateY(3px);background:#63e7ff;color:#082342}}
@keyframes tour-dot{0%,80%,100%{background:#1d466f}15%,75%{background:#63e7ff;border-color:#b4f4ff}}
@keyframes tour-pay{0%,40%,100%{opacity:.5;transform:translateY(3px)}55%,85%{opacity:1;transform:translateY(-2px)}}
@keyframes tour-card{0%,100%{transform:rotate(-5deg) translateY(3px)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes tour-meter{0%,100%{transform:scaleY(.4)}55%,75%{transform:scaleY(.95)}}
@keyframes tour-outline{50%{stroke-opacity:.5}}
@keyframes tour-trail{to{stroke-dashoffset:-24}}
@media(max-width:600px),(max-height:560px){
 .tour-panel{width:330px;padding:15px}
 #tourTitle{font-size:24px;margin-top:0}
 #tourText{font-size:13px;line-height:1.5;margin:10px 0 12px}
 .tour-demo{min-height:60px;margin-top:8px;gap:7px}
 .tour-clock-note{margin-top:8px}
}
@media(max-height:480px){.tour-panel{width:350px;padding:10px 16px}.tour-demo{min-height:40px;margin-top:4px}.tour-demo small{display:none}.tour-arrows>span{height:28px;width:32px;font-size:22px}.tour-scorecards b{height:30px;font-size:24px}.tour-meters i{height:26px}#tourTitle{font-size:22px}#tourText{font-size:12px;margin:8px 0}.tour-clock-note{display:none}}
@media(prefers-reduced-motion:reduce){#gameTutorial *,#gameTutorial *::before{animation:none!important;transition:none!important}.tour-dots i:nth-child(-n+5){background:#63e7ff}.tour-meters b{transform:scaleY(.85)}}

/* One synchronized example: correct string, miss, remembered replay, new step. */
.secret-example{width:100%;text-align:center}
.secret-example-inputs{display:flex;gap:6px;justify-content:center;margin:10px 0}
.secret-example-inputs span{display:grid;place-items:center;width:33px;height:33px;border-radius:5px;background:#1d466f;color:#8eafcc;font:900 23px/1 var(--body)}
.secret-example-inputs .correct{background:#63e7ff;color:#082342;animation:secret-press .25s ease-out}
.secret-example-inputs .miss{background:#ff9b8e;color:#3c1420;animation:secret-miss .32s ease-out}
.secret-example-dots{display:flex;justify-content:center;gap:4px;margin:12px 0}
.secret-example-dots i{width:12px;height:12px;border:1.5px solid #8eafcc;border-radius:50%;background:#102b4c;transition:background .15s,transform .15s}
.secret-example-dots i.filled{background:#63e7ff;border-color:#b4f4ff;transform:scale(1.08)}
.secret-example-result{min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.secret-example-result strong{font:800 12px/1.3 var(--body);color:#e1eeff}
.secret-example-result span{font:900 13px/1.3 var(--body);color:#ffe16b}
.secret-example.missed .secret-example-result strong{color:#ffb7ac}
@keyframes secret-press{from{transform:translateY(-4px)}to{transform:translateY(0)}}
@keyframes secret-miss{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-height:480px){.secret-example-inputs{margin:5px 0}.secret-example-inputs span{width:28px;height:25px;font-size:20px}.secret-example-dots{margin:7px 0}.secret-example-result{min-height:36px}.secret-example-result strong,.secret-example-result span{font-size:11px}}
@media(min-width:600px) and (max-height:480px){
 .tour-panel[data-demo=secret]{width:560px;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
 .tour-panel[data-demo=secret] .tour-topline,.tour-panel[data-demo=secret] #tourTitle,.tour-panel[data-demo=secret] .tour-actions{grid-column:1 / -1}
 .tour-panel[data-demo=secret] .tour-demo{margin:0;align-self:center}
 .tour-panel[data-demo=secret] #tourText{margin:4px 0 12px}
 .tour-panel[data-demo=secret] .secret-example>small{display:block;font-size:8px}
}
@media(max-width:350px){
 .tour-panel{padding:12px}
 #tourTitle{font-size:22px;margin-bottom:6px}
 #tourText{font-size:12px;line-height:1.45;margin:8px 0 10px}
 .tour-demo{min-height:50px;margin-top:5px;gap:5px}
 .tour-clock-note{margin-top:5px}
}