.tutorial-layer{position:absolute;inset:0;z-index:45;pointer-events:none}.tutorial-offer{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(5,7,13,.88);pointer-events:auto}.tutorial-offer.hidden,.tutorial-coach.hidden,.contextual-hint.hidden{display:none!important}.tutorial-offer-card{width:min(520px,100%);border:1px solid var(--sx-color-cyan);border-radius:var(--sx-radius-lg);background:var(--sx-color-surface-elevated);box-shadow:var(--sx-shadow-modal),var(--sx-glow-ui);padding:24px}.tutorial-kicker{color:var(--sx-color-cyan);font-size:11px;font-weight:850;text-transform:uppercase}.tutorial-offer h2{margin:7px 0;font-family:var(--sx-font-display);font-size:28px}.tutorial-offer p{color:var(--sx-color-text-secondary);line-height:1.55}.tutorial-offer-card>div{display:flex;gap:8px;flex-wrap:wrap}.tutorial-offer button,.tutorial-coach button{min-height:48px;border:1px solid var(--sx-color-border);border-radius:var(--sx-radius-sm);background:var(--sx-color-surface-interactive);padding:9px 14px;color:var(--sx-color-text);cursor:pointer}.tutorial-offer [data-tutorial-start]{border-color:var(--sx-color-cyan);background:var(--sx-color-cyan-soft)}.tutorial-coach{position:absolute;left:50%;top:clamp(70px,14%,120px);width:min(620px,calc(100% - 28px));transform:translateX(-50%);border:1px solid var(--sx-color-cyan);border-radius:var(--sx-radius-md);background:rgba(14,21,36,.96);box-shadow:var(--sx-shadow-panel),var(--sx-glow-ui);padding:12px 14px;pointer-events:auto}.tutorial-coach header{display:flex;justify-content:space-between;gap:12px}.tutorial-coach header b{color:var(--sx-color-warning);font-size:11px}.tutorial-coach h3{margin:6px 0 2px;font-size:17px}.tutorial-coach p{margin:0;color:var(--sx-color-text-secondary);line-height:1.4}.tutorial-coach>div{display:flex;gap:8px;justify-content:flex-end;margin-top:9px}.tutorial-coach button{min-height:42px;padding-block:6px}.tutorial-coach [data-tutorial-guide]{display:flex;align-items:center;gap:7px;border-color:var(--sx-color-cyan)}.contextual-hint{position:absolute;left:50%;bottom:82px;width:min(560px,calc(100% - 24px));transform:translateX(-50%);display:grid;grid-template-columns:auto minmax(0,1fr) 44px 44px;align-items:center;gap:8px;border:1px solid var(--sx-color-purple);border-radius:var(--sx-radius-md);background:rgba(21,31,51,.97);padding:9px;box-shadow:var(--sx-shadow-panel);pointer-events:auto}.contextual-hint>span{color:var(--sx-color-purple-highlight)}.contextual-hint small{color:var(--sx-color-purple-highlight);font-weight:800}.contextual-hint p{margin:2px 0 0;color:var(--sx-color-text-secondary);font-size:12px}.contextual-hint button{width:44px;height:44px;border:1px solid var(--sx-color-border);border-radius:var(--sx-radius-sm);background:var(--sx-color-surface-interactive);color:var(--sx-color-text);cursor:pointer}.tutorial-layer button:focus-visible{outline:2px solid var(--sx-color-cyan-highlight);outline-offset:2px}
@media(max-width:680px),(pointer:coarse){.tutorial-coach{top:18%;padding:10px;width:calc(100% - 16px)}.tutorial-coach h3{font-size:15px}.tutorial-coach p{font-size:12px}.tutorial-coach>div{justify-content:stretch}.tutorial-coach button{flex:1;min-width:0}.contextual-hint{bottom:86px;grid-template-columns:auto minmax(0,1fr) 44px 44px}.contextual-hint p{font-size:11px}.tutorial-offer-card{padding:18px}}
@media(max-height:500px) and (orientation:landscape){.tutorial-coach{top:10px;left:max(72px,calc(env(safe-area-inset-left) + 64px));right:max(72px,calc(env(safe-area-inset-right) + 64px));width:auto;transform:none;padding:7px 10px}.tutorial-coach h3{margin-top:3px}.tutorial-coach>div{position:absolute;right:8px;top:2px;margin:0}.tutorial-coach p{padding-right:190px}.contextual-hint{bottom:58px;max-width:480px}.tutorial-offer-card{max-height:calc(100dvh - 16px);overflow-y:auto;padding:12px}.tutorial-offer h2{font-size:22px}.tutorial-offer p{margin-block:6px}}
@media(prefers-reduced-motion:reduce){.tutorial-layer *{animation:none!important;transition:none!important}}.performance-low .tutorial-coach,.performance-low .tutorial-offer-card{box-shadow:none}

/* Training instructions pause the canonical engine. Objectives live in HUD flow, outside the playfield. */
.tutorial-coach.hidden,.tutorial-coach [hidden]{display:none!important}
.tutorial-coach{position:fixed;z-index:80;top:50%;left:50%;right:auto;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;transform:translate(-50%,-50%);padding:14px}
.tutorial-coach>div{position:static;display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.tutorial-coach p{padding-right:0}.tutorial-coach button{min-height:44px;flex:0 1 auto}
.tutorial-coach[data-phase="objective"]{position:static;transform:none;width:auto;max-height:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:5px;padding:4px 6px;box-shadow:none;font-size:11px}
.tutorial-coach[data-phase="objective"] header{flex:1;min-width:0}.tutorial-coach[data-phase="objective"] h3,.tutorial-coach[data-phase="objective"] p{display:none}
.tutorial-coach[data-phase="objective"]>div{margin:0}.tutorial-coach[data-phase="objective"] button{padding:3px 8px;font-size:11px}
@media(max-height:500px){.tutorial-coach h3{font-size:15px}.tutorial-coach p{font-size:12px}}