#route5-tutorial[hidden] { display:none; }
#route5-tutorial { position:fixed; inset:0; z-index:10000; color:#f0f8ff; font-family:Inter,system-ui,sans-serif; touch-action:none; }
body.tutorial-active .ui, body.tutorial-active #hud3d, body.tutorial-active #classic-board { visibility:hidden !important; pointer-events:none !important; }
body.tutorial-active #world3d { display:block !important; visibility:visible !important; }
.tutorial-heading { position:absolute; top:max(16px,env(safe-area-inset-top)); left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.15em; }
#route5-tutorial button { font:700 12px/1.2 Inter,system-ui,sans-serif; color:#eaf6ff; background:#081a26ee; border:1px solid #5d8a9e; border-radius:8px; min-height:44px; padding:10px 18px; cursor:pointer; }
#route5-tutorial button:hover:not(:disabled), #route5-tutorial button:focus-visible { outline:2px solid #a1e8ff; outline-offset:3px; background:#163b4d; }
#route5-tutorial button:disabled { opacity:.35; cursor:default; }
.tutorial-card { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(620px,calc(100% - 32px)); padding:20px 24px; background:linear-gradient(130deg,#0f2936f5,#040e19f5); border:1px solid #5d8a9e; border-top:2px solid var(--tutorial-color); border-radius:16px; box-shadow:0 8px 36px #000a; }
.tutorial-step { color:#9fc1d1; font-size:10px; letter-spacing:.18em; }
.tutorial-card h1 { font-size:24px; letter-spacing:.045em; margin:7px 0 9px; outline:none; }
.tutorial-card p { margin:7px 0; font-size:15px; line-height:1.45; }
.tutorial-card .tutorial-secondary { font-size:13px; color:#b9d1dd; }
.tutorial-card .tutorial-feedback { min-height:20px; font-size:12px; color:#b9f0eb; }
.tutorial-card nav { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
#route5-tutorial [data-tutorial="next"] { border-color:#b0e4f3; }
#route5-tutorial .tutorial-node { position:absolute; z-index:2; width:30px; height:30px; min-height:30px; padding:0; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #f4ffff; background:#06222bbb; color:white; font-size:20px; box-shadow:0 0 0 4px color-mix(in srgb,var(--tutorial-color) 50%,transparent),0 0 16px #e0ffff77; }
.tutorial-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tutorial-lines path { fill:none; stroke:#f6e7af; stroke-width:3; stroke-dasharray:5 5; }
.tutorial-blocked .tutorial-lines path { stroke:#ffb8b8; }
.tutorial-result { position:absolute; top:100px; left:24px; padding:12px 24px; border:1px solid var(--tutorial-color); border-radius:8px; background:#03131ee8; color:#f4fcff; font-size:clamp(18px,2vw,26px); font-weight:800; letter-spacing:.12em; white-space:nowrap; pointer-events:none; }
.tutorial-finish { display:flex; flex-wrap:wrap; gap:10px; padding-top:12px; border-top:1px solid #547181; margin-top:12px; }
.tutorial-finish[hidden], .tutorial-result[hidden] { display:none; }
.tutorial-finish strong { width:100%; font-size:18px; }
@media(max-width:699px) { .tutorial-heading { left:16px; right:16px; font-size:9px; letter-spacing:.06em; } #route5-tutorial .tutorial-heading button { padding:8px 10px; font-size:10px; } .tutorial-card { padding:13px 16px; bottom:max(10px,env(safe-area-inset-bottom)); } .tutorial-card h1 { font-size:19px; } .tutorial-card p { font-size:13px; } .tutorial-card .tutorial-secondary { font-size:12px; } .tutorial-card nav { margin-top:9px; } #route5-tutorial .tutorial-node { width:26px; height:26px; min-height:26px; font-size:17px; } }
@media(max-height:540px) and (min-width:700px) { .tutorial-card { left:auto; right:14px; transform:none; width:330px; padding:12px; } .tutorial-card h1{font-size:18px;} }

@media(max-width:699px) { .tutorial-result { top:76px; left:50%; transform:translateX(-50%); font-size:18px; padding:8px 16px; } }

#route5-tutorial .tutorial-node.is-preview { background:#185767; outline:3px solid #fff; font-size:11px; }
.tutorial-card nav[hidden] { display:none; }