/* Isolated, unranked first-play exercises. Safe-area layout keeps Skip visible. */
#nexus-tutorial{box-sizing:border-box;width:min(720px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - 20px);margin:auto;padding:0;border:1px solid #777092;border-radius:22px;background:#101927;color:#edf1fb;box-shadow:0 24px 100px #0009;overflow:hidden;font-family:Inter,system-ui,sans-serif}
#nexus-tutorial::backdrop{background:#030912da;backdrop-filter:blur(7px)}
#nexus-tutorial *{box-sizing:border-box}
.tutorial-shell{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.tutorial-header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #344359;background:#111b2c}
.tutorial-eyebrow{display:block;color:#86d8d0;letter-spacing:.14em;font-size:10px;font-weight:800;margin-bottom:4px}
.tutorial-header h2{margin:0;font-size:clamp(17px,3.5vw,25px);letter-spacing:-.035em;line-height:1.15}
.tutorial-skip{flex:none;min-height:44px;padding:8px 13px;border:1px solid #53617b;border-radius:11px;background:#182536;color:#edf1fb;font:700 12px system-ui;cursor:pointer}
.tutorial-body{padding:15px 20px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.tutorial-goal{margin:0 0 12px;font-size:14px;line-height:1.45;color:#cbd6e8}
.tutorial-stage{position:relative;width:100%;min-height:120px;border-radius:16px;background:#0a1320;overflow:hidden;border:1px solid #34465d}
.tutorial-stage canvas{display:block;width:100%;max-width:100%;height:auto;margin:auto;touch-action:none;border-radius:14px;outline-offset:-4px}
.tutorial-status{min-height:22px;margin:11px 0 7px;color:#9febd8;font-size:13px;font-weight:700;line-height:1.4}
.tutorial-hint{margin:7px 0 0;font-size:12px;color:#a1b0c7;line-height:1.45}
.tutorial-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.tutorial-controls button,.tutorial-button{min-height:46px;min-width:46px;border:1px solid #586685;border-radius:11px;padding:9px 13px;background:#233248;color:#f3f0ff;font:750 13px system-ui;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.tutorial-controls button:active,.tutorial-controls button[aria-pressed=true]{background:#aa94ed;color:#141525}
.tutorial-controls button:disabled{opacity:.42;cursor:default}
.tutorial-footer{display:flex;flex:none;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid #344359;padding:12px 20px max(12px,env(safe-area-inset-bottom));background:#111b2c}
.tutorial-footer small{color:#9aaac1;font-size:11px;line-height:1.4;max-width:280px}
.tutorial-play{min-height:44px;border:0;border-radius:11px;padding:10px 16px;background:#aa94ed;color:#131322;font:800 13px system-ui;cursor:pointer}
#nexus-tutorial [hidden]{display:none!important}
#nexus-tutorial :focus-visible{outline:3px solid #78dfd9;outline-offset:3px}
.tutorial-aim-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;font-size:11px;color:#c7d4e6}
.tutorial-aim-controls label{display:flex;flex-direction:column;gap:8px}
.tutorial-aim-controls input{width:100%;min-height:30px;accent-color:#aa94ed;touch-action:pan-x}
.tutorial-joystick{width:82px;height:82px;flex:none;border-radius:50%;background:#182d40;border:1px solid #77d7cc;position:relative;touch-action:none;display:grid;place-items:center}
.tutorial-joystick span{width:34px;height:34px;background:#7cdfd0;border:3px solid #c0fff0;box-shadow:0 0 0 5px #77d7cc17;border-radius:50%;pointer-events:none}
.tutorial-board{display:grid;gap:7px;padding:12px}
.tutorial-board button{min-height:48px;min-width:0;border:1px solid #64768d;background:#203148;color:#efeafd;border-radius:9px;font:800 20px system-ui}
.tutorial-board button:disabled{opacity:.85}
.tutorial-choice{background:#26374d;color:#eef1ff;border:1px solid #596a86;border-radius:10px;padding:11px;font:700 13px system-ui;min-height:45px;cursor:pointer}
.tutorial-stage form{padding:12px}
.tutorial-stage input{width:100%;border:1px solid #52667d;background:#17263a;color:#eff6ff;border-radius:8px;padding:10px;font:16px system-ui;min-height:43px}
@media(max-width:400px){.tutorial-header{padding:12px}.tutorial-body{padding:12px}.tutorial-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:7px}.tutorial-goal{font-size:13px}.tutorial-skip{padding:8px 9px;font-size:11px}.tutorial-controls{gap:6px}.tutorial-controls button{padding:9px 10px}.tutorial-footer small{font-size:10px;max-width:150px}.tutorial-play{padding:10px 12px}.tutorial-aim-controls{gap:8px}}
@media(orientation:landscape) and (max-height:550px){#nexus-tutorial{width:min(940px,calc(100vw - 16px));max-height:calc(100dvh - 12px);border-radius:15px}.tutorial-shell{max-height:calc(100dvh - 16px)}.tutorial-header{padding:8px 14px}.tutorial-header h2{font-size:17px}.tutorial-eyebrow{font-size:9px;margin-bottom:2px}.tutorial-body{padding:10px 14px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr);gap:7px 14px;align-items:start}.tutorial-goal{grid-column:1/-1;margin:0;font-size:12px}.tutorial-stage{grid-row:2/6;min-height:100px}.tutorial-stage canvas{max-height:calc(100dvh - 165px);width:auto;max-width:100%;object-fit:contain}.tutorial-status{margin:0;font-size:12px}.tutorial-controls{align-content:start}.tutorial-hint{margin:0;font-size:10px}.tutorial-footer{padding:7px 14px max(7px,env(safe-area-inset-bottom));min-height:44px}.tutorial-footer small{max-width:400px}.tutorial-play{min-height:39px}.tutorial-skip{min-height:39px}.tutorial-controls button{min-height:42px;padding:7px 10px}.tutorial-joystick{width:65px;height:65px}.tutorial-aim-controls label{gap:2px}.tutorial-aim-controls input{min-height:23px}}
@media(prefers-reduced-motion:reduce){#nexus-tutorial *{animation:none!important;transition:none!important}}