/* Primo avvio 0.8: piazzale di prova e montaggio, sempre in un solo schermo. */
.tutorial-dialog { --t-paper:#f2eee5; --t-ink:#293b3f; --t-muted:#657573; --t-teal:#198c82; --t-amber:#efb74d; box-sizing:border-box; position:fixed; inset:0; width:100vw; width:100dvw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border:0; border-radius:0; background:var(--t-paper); color:var(--t-ink); font-family:inherit; overflow:hidden; overscroll-behavior:none; }
.tutorial-dialog:not([open]) { display:none; }
.tutorial-dialog[open] { display:grid; grid-template-rows:42px minmax(0,1fr) 48px; gap:8px; }
.tutorial-dialog::backdrop { background:#243a3ddd; }
.tutorial-dialog *, .tutorial-dialog *::before, .tutorial-dialog *::after { box-sizing:border-box; }
.tutorial-dialog [hidden] { display:none!important; }
.tutorial-dialog button { display:inline-flex; justify-content:center; align-items:center; gap:8px; margin:0; min-width:0; min-height:38px; padding:6px 12px; border:2px solid var(--t-ink); border-radius:12px; background:#fffcf4; color:var(--t-ink); font-family:inherit; font-size:13px; font-weight:700; line-height:1.1; letter-spacing:.02em; cursor:pointer; box-shadow:0 3px 0 #293b3f25; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.tutorial-dialog button:focus-visible { outline:3px solid #20bfa9; outline-offset:3px; }
.tutorial-dialog button:disabled { cursor:default; opacity:.53; box-shadow:none; }
.tutorial-dialog button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.tutorial-header { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #293b3f26; padding-bottom:7px; }
.tutorial-brand { display:flex; align-items:baseline; gap:12px; color:var(--t-ink); font-size:21px; font-weight:900; letter-spacing:.08em; }
.tutorial-brand small { color:var(--t-muted); font-size:10px; letter-spacing:.06em; }
#tutorial-count { margin-left:auto; color:var(--t-muted); font:800 12px/1 sans-serif; }
#tutorial-skip { min-height:32px; border-color:#293b3f66; background:transparent; padding:6px 14px; font-size:11px; }
.tutorial-main { display:grid; grid-template-columns:minmax(200px,29%) minmax(0,1fr); gap:14px; min-width:0; min-height:0; }
.tutorial-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:0; padding:5px 0; }
.tutorial-step-icon { width:39px; height:39px; flex:none; margin-bottom:5px; }
.tutorial-dialog svg { display:block; width:100%; height:100%; max-width:100%; max-height:100%; }
.tutorial-step-icon .menu-art-icon,.tutorial-large-icon .menu-art-icon { width:100%; height:100%; }
.tutorial-copy h2 { margin:0 0 7px; color:var(--t-ink); font-size:clamp(19px,2.65vw,30px); line-height:1.05; font-weight:900; letter-spacing:-.02em; }
.tutorial-copy p { margin:0; max-width:36ch; font-size:13px; line-height:1.36; color:var(--t-ink); }
.tutorial-copy .tutorial-progress { width:100%; margin-top:12px; padding:9px 10px; border:1px solid #198c8266; border-radius:10px; background:#d8eee5; color:#176c62; font-size:11px; line-height:1.15; font-weight:900; }
.tutorial-copy .tutorial-progress.is-complete { background:#bee8d3; border-color:#198c82; }
.tutorial-copy .tutorial-tip { margin-top:auto; padding-top:10px; color:var(--t-muted); font-size:10px; line-height:1.3; }
.tutorial-field { position:relative; display:grid; min-height:0; min-width:0; overflow:hidden; border:2px solid var(--t-ink); border-radius:16px; background:#354e50; box-shadow:0 4px 0 #293b3f1b; isolation:isolate; }
#tutorial-canvas { display:block; width:100%; height:100%; min-width:0; min-height:0; touch-action:none; outline:none; }
.tutorial-drive-label { position:absolute; bottom:10px; left:12px; z-index:2; padding:5px 8px; border:1px solid #bde0d877; border-radius:7px; background:#203b3de8; color:#e0fff2; font-size:9px; font-weight:800; pointer-events:none; }
.tutorial-field[data-controls="left"] .tutorial-drive-label { left:auto; right:12px; }
.tutorial-dash { position:absolute; right:13px; bottom:18px; z-index:3; flex-direction:column; gap:2px!important; width:77px; height:77px; padding:7px!important; border-color:#2a393b!important; border-radius:22px!important; background:var(--t-amber)!important; box-shadow:0 5px 0 #152c2d70!important; touch-action:none!important; }
.tutorial-dash svg { width:30px; height:30px; }
.tutorial-dash span { font-size:10px; }.tutorial-dash small { position:absolute; right:6px; top:4px; font-size:9px; }
.tutorial-field[data-controls="left"] .tutorial-dash { right:auto; left:13px; }
.tutorial-stick { position:absolute; z-index:4; left:54px; right:auto; top:auto; bottom:72px; width:70px; height:70px; margin:0; transform:translate(-50%,50%); border:2px solid #d2ffe6bf; border-radius:50%; background:#183c4070; opacity:.7; pointer-events:none; }
.tutorial-field[data-controls="left"] .tutorial-stick { left:auto; right:54px; transform:translate(50%,50%); }
.tutorial-stick[data-active="true"] { opacity:1; }
.tutorial-stick i { position:absolute; left:19px; top:19px; width:28px; height:28px; border:2px solid #e7fff3; border-radius:50%; background:#4ac8aecc; }
.tutorial-intro { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(110deg,#253d4133,#20353b88); pointer-events:none; }
.tutorial-intro-card { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:90%; padding:15px 18px; border:1px solid #e6f0dc60; border-radius:16px; background:#f2eee5ed; color:var(--t-ink); text-align:center; box-shadow:0 4px 0 #1c34384d; }
.tutorial-large-icon { display:block; width:66px; height:66px; }
.tutorial-intro-card strong { font-size:20px; font-weight:900; }
.tutorial-intro-card>span:not(.tutorial-large-icon) { font-size:12px; }
.tutorial-intro-card small { margin-top:3px; color:var(--t-teal); font-size:9px; font-weight:900; }
.tutorial-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; min-width:0; border-top:1px solid #293b3f26; padding-top:6px; }
.tutorial-dots { display:flex; gap:7px; flex:none; }
.tutorial-dots i { display:block; width:8px; height:8px; border-radius:50%; background:#bdc6bf; }
.tutorial-dots i.is-current { width:22px; border-radius:8px; background:var(--t-teal); }.tutorial-dots i.is-done { background:#60bba4; }
#tutorial-footer-note { margin-right:auto; color:var(--t-muted); font-size:10px; }
.tutorial-dialog .tutorial-next { min-width:180px; max-width:42%; min-height:38px; background:var(--t-amber); font-size:11px; }
.tutorial-next svg { width:21px; height:21px; flex:none; }
.tutorial-field[data-mode="build"] { grid-template-columns:minmax(0,1fr) minmax(165px,40%); }
.tutorial-build { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:0; gap:5px; padding:8px; background:#e3e5d9; border-left:2px solid var(--t-ink); }
#tutorial-armor { width:100%; min-height:42px; padding:3px 6px; border-color:#839b8c; gap:5px; border-radius:9px; background:#f7f3e7; }
#tutorial-armor[aria-pressed="true"] { border-color:var(--t-teal); background:#bfe4d5; }
.tutorial-armor-art { width:32px; height:32px; flex:none; }.tutorial-armor-art canvas { display:block; width:100%!important; height:100%!important; }
#tutorial-armor>span:last-child { display:flex; flex-direction:column; gap:3px; text-align:left; }#tutorial-armor strong { font-size:10px; }#tutorial-armor small { font-size:7px; color:var(--t-muted); }
.tutorial-grid-label { font-size:7px; line-height:1.1; color:#53675c; font-weight:900; }
.tutorial-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:3px; width:min(100%,172px); aspect-ratio:1; max-height:calc(100% - 80px); min-height:0; flex:0 1 172px; }
.tutorial-dialog .tutorial-cell { display:grid; place-items:center; min-width:0; min-height:0; padding:0; border:1px solid #aeb9a9; border-radius:5px; background:#c8d0c3; box-shadow:none; color:#809a88; font:700 17px/1 sans-serif; }
.tutorial-dialog .tutorial-cell:disabled { opacity:1; }.tutorial-cell.is-mounted { background:#3b5653; border-color:#536e67; }.tutorial-cell canvas { width:100%!important; height:100%!important; display:block; object-fit:contain; border-radius:3px; }
.tutorial-cell.can-place { border:2px solid var(--t-teal); background:#a4e2ca; color:#167e6e; }
#tutorial-build-note { font-size:8px; line-height:1.15; color:#315f51; font-weight:800; text-align:center; }
.tutorial-summary { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:center; padding:16px; background:#e3e5d9; }
.tutorial-summary article { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:11px 9px; border:1px solid #b4c1b1; border-radius:13px; background:#faf5e9; text-align:center; }
.tutorial-summary article svg { width:42px; height:42px; flex:none; }.tutorial-summary strong { font-size:10px; line-height:1.15; }.tutorial-summary article>span { color:#53675d; font-size:10px; line-height:1.35; }
.tutorial-paused { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:20px; background:#f2eee5ee; color:var(--t-ink); text-align:center; }.tutorial-paused strong { font-size:18px; }.tutorial-paused button { min-width:145px; background:var(--t-amber); }
@media (max-height:380px) { .tutorial-dialog[open] { grid-template-rows:34px minmax(0,1fr) 41px; gap:6px; }.tutorial-brand { font-size:18px; }.tutorial-header { padding-bottom:4px; }.tutorial-copy { padding:0; }.tutorial-step-icon { width:29px; height:29px; margin-bottom:3px; }.tutorial-copy h2 { font-size:20px; margin-bottom:6px; }.tutorial-copy p { font-size:11px; line-height:1.3; }.tutorial-copy .tutorial-progress { margin-top:8px; padding:7px 8px; font-size:9px; }.tutorial-copy .tutorial-tip { padding-top:6px; font-size:9px; }.tutorial-intro-card { padding:10px 15px; }.tutorial-large-icon { width:48px; height:48px; }.tutorial-intro-card strong { font-size:17px; }.tutorial-build { padding:5px; gap:4px; }.tutorial-grid { max-height:calc(100% - 73px); flex-basis:154px; width:min(100%,154px); }.tutorial-summary { padding:9px; gap:7px; }.tutorial-summary article { gap:6px; padding:9px 6px; }.tutorial-summary article>span { font-size:9px; }.tutorial-summary article svg { width:36px; height:36px; }.tutorial-dialog .tutorial-next { min-height:34px; }.tutorial-dash { width:67px; height:67px; bottom:14px; }.tutorial-dash svg { width:26px; height:26px; } }
@media (max-width:760px) { .tutorial-main { grid-template-columns:minmax(185px,29%) minmax(0,1fr); gap:10px; }.tutorial-brand small { font-size:8px; }.tutorial-field[data-mode="build"] { grid-template-columns:minmax(0,1fr) 166px; }.tutorial-summary strong { font-size:9px; }.tutorial-summary article { padding-inline:5px; } }
@media (orientation:portrait) { .tutorial-main { grid-template-columns:1fr; }.tutorial-copy { display:none; }.tutorial-brand small,#tutorial-footer-note { display:none; } }
@media (prefers-reduced-motion:no-preference) { .tutorial-progress.is-complete { animation:tutorial-done .25s ease-out; }.tutorial-cell.can-place { animation:tutorial-cell-pulse 1.5s ease-in-out infinite; }@keyframes tutorial-done { from { transform:scale(.96); }to { transform:scale(1); } }@keyframes tutorial-cell-pulse { 50% { background:#c5f7dc; } } }