/* R14 · Tutorial interactivo. Solo añade UI; no modifica tablero ni layout existente. */
.tutorial-overlay{position:absolute;inset:0;z-index:75;display:flex;align-items:flex-start;justify-content:center;padding:14px;pointer-events:none}
.tutorial-overlay.hidden{display:none!important}
.tutorial-card{position:relative;width:min(92%,430px);margin-top:9%;overflow:hidden;border:1px solid #37e9ff;background:linear-gradient(180deg,rgba(3,27,51,.97),rgba(2,11,27,.96));box-shadow:0 0 0 1px rgba(80,240,255,.12),0 0 26px rgba(0,214,255,.27),inset 0 0 22px rgba(0,104,178,.14);border-radius:16px;padding:16px 16px 13px;color:#f5fdff;pointer-events:auto;backdrop-filter:blur(8px)}
.tutorial-card:before{content:"";position:absolute;inset:4px;border:1px solid rgba(83,247,255,.18);border-radius:12px;pointer-events:none}
.tutorial-scan{position:absolute;left:8%;right:8%;top:0;height:1px;background:#55f7ff;box-shadow:0 0 10px #20e7ff;animation:tutorialScan 2.1s linear infinite;opacity:.8}
@keyframes tutorialScan{0%{transform:translateY(0);opacity:0}15%{opacity:.8}85%{opacity:.45}100%{transform:translateY(145px);opacity:0}}
.tutorial-tag{font-size:10px;line-height:1.2;font-weight:900;letter-spacing:.13em;color:#77efff;text-transform:uppercase;margin-bottom:6px}
.tutorial-card h2{margin:0 0 7px;font-size:clamp(19px,3.2vw,27px);line-height:1;color:#fff;text-shadow:0 0 16px rgba(38,235,255,.42)}
.tutorial-card p{margin:0;color:#c9dbea;font-size:12px;line-height:1.5}
.tutorial-cue{margin-top:10px;border-left:2px solid #42f4d0;background:rgba(26,255,198,.08);padding:7px 9px;color:#93ffe6;font-size:11px;font-weight:800;letter-spacing:.03em}
.tutorial-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.tutorial-actions button{min-height:34px;border-radius:9px;padding:7px 11px;font:800 10px/1 system-ui;border:1px solid rgba(78,227,255,.38);cursor:pointer}
.tutorial-skip{background:rgba(3,18,35,.72);color:#8cb2c5}
.tutorial-ok{background:linear-gradient(135deg,#21f0c2,#24baff);color:#002032;box-shadow:0 0 15px rgba(35,231,214,.25)}
.tutorial-action .tutorial-card{margin-top:4%;width:min(90%,390px);background:linear-gradient(180deg,rgba(3,25,48,.94),rgba(2,10,24,.92))}
.tutorial-action .tutorial-actions{justify-content:flex-start}
.tutorial-action .tutorial-skip{min-height:28px;padding:5px 8px;font-size:9px}
.tutorial-success{align-items:center}
.tutorial-success .tutorial-card{text-align:center;margin-top:0;border-color:#61ffd5;animation:tutorialDone .72s ease both}
@keyframes tutorialDone{0%{opacity:0;transform:scale(.84)}25%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:translateY(-20px) scale(.98)}}
@media(max-width:720px){.tutorial-overlay{padding:8px}.tutorial-card{margin-top:5%;width:min(96%,390px);padding:13px 13px 11px;border-radius:13px}.tutorial-card h2{font-size:19px}.tutorial-card p{font-size:11px}.tutorial-cue{font-size:10px}.tutorial-actions button{min-height:36px}.tutorial-action .tutorial-card{margin-top:2%;width:96%}}
@media(max-height:620px) and (orientation:landscape){.tutorial-card{margin-top:1%;width:min(72%,430px);padding:10px 12px}.tutorial-tag{font-size:8px}.tutorial-card h2{font-size:16px}.tutorial-card p{font-size:10px}.tutorial-cue{margin-top:6px;padding:5px 7px}.tutorial-actions{margin-top:7px}}

.tutorial-action .tutorial-card{pointer-events:none}
.tutorial-action .tutorial-skip{pointer-events:auto}