/* Lia ensina numa camada demonstrativa, sem mover a ilha ou disparar comandos. */
#tutorial-dialog{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;overflow:hidden;color:#4a3421;box-shadow:none}
#tutorial-dialog::backdrop{background:transparent}
.tutorial-shade{position:absolute;inset:0;background:#163c365c;pointer-events:none}
.tutorial-top{position:absolute;z-index:3;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.tutorial-top strong{padding:8px 12px;border:1px solid #d7b76e;border-radius:7px;background:#fff1cc;color:#624222;font-size:12px;letter-spacing:.5px}.tutorial-top button{pointer-events:auto;min-height:48px;padding:8px 14px;border:1px solid #bda16a;border-radius:7px;background:#fff4d9;color:#674a2b;font-size:12px;font-weight:700}
.tutorial-spotlight{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;border:3px solid #f0c363;border-radius:10px;box-shadow:0 0 0 200vmax #153a346e;pointer-events:none;animation:tutorial-glow 1.8s ease-in-out infinite}.tutorial-spotlight>img{width:28px;height:28px;object-fit:contain;padding:2px;border:1px solid #c69835;border-radius:6px;background:#fff4d7;box-sizing:content-box}.tutorial-spotlight>span:first-of-type{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:4px 8px;border:1px solid #cba050;border-radius:5px;background:#fff2ce;color:#604324;white-space:nowrap;font-size:11px;font-weight:750}.tutorial-pointer{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:13px;line-height:1;color:#e4aa40}
.tutorial-guide{position:absolute;z-index:2;display:flex;flex-direction:column;overflow:hidden;min-height:110px;border:4px solid #98613a;border-radius:12px;background:#fff1d1;box-shadow:0 0 0 1px #523623,0 5px 20px #16352e44}
.tutorial-content{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:12px;scrollbar-color:#b38952 #f8e5bb}
.tutorial-dialogue{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start}.tutorial-portrait{display:flex;align-items:flex-end;justify-content:center;width:64px;height:88px;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse at 50% 85%,#80694533 0 21%,transparent 23%)}.tutorial-portrait img{display:block;flex:none;width:128px;height:160px;object-fit:contain;image-rendering:pixelated}.tutorial-copy{min-width:0}.tutorial-copy small{display:block;font-size:10px;letter-spacing:1px;color:#84633c;font-weight:800}.tutorial-dialog .tutorial-copy h2{font-size:19px;line-height:1.2;margin:4px 0 7px;color:#315338;font-weight:800}.tutorial-dialog .tutorial-copy p{font-size:14px;line-height:1.5;margin:0;color:#624a31}
.tutorial-preview{margin-top:10px}.tutorial-note{font-size:11px!important;line-height:1.4!important;color:#80623b;margin:5px 0 0!important;text-align:center}.tutorial-sequence{display:flex;align-items:stretch;gap:6px;justify-content:center}.tutorial-tile{display:flex;align-items:center;justify-content:center;flex:1;gap:5px;min-height:44px;padding:5px;border:1px solid #d1b278;border-radius:6px;background:#fff9e8;font-size:11px;line-height:1.25;text-align:center;color:#6b4f2e}.tutorial-tile img{width:24px;height:24px;object-fit:contain;flex:none}.tutorial-tile span{overflow-wrap:anywhere;min-width:0}
.tutorial-mini-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 9px;padding:7px 9px;border:2px solid #a8a174;border-radius:7px;background:#fffae5;overflow:hidden}.tutorial-bento{width:48px;height:60px;object-fit:contain;image-rendering:pixelated}.tutorial-mini-info{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.35;justify-content:center}.tutorial-mini-info strong{font-size:13px;color:#4d5032}.tutorial-demo-button{grid-column:1/-1;min-height:48px;width:100%;padding:7px 9px;border:1px solid #40683c;border-bottom-width:3px;border-radius:6px;background:#2c633b;color:#fff1ce;font-size:12px;font-weight:750;opacity:1!important;cursor:default!important}
.tutorial-market-example{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:8px 4px;font-size:13px;color:#5d482d}.tutorial-market-example img{width:26px;height:26px;object-fit:contain}
.tutorial-controls{display:grid;grid-template-columns:64px minmax(60px,1fr) minmax(116px,auto);align-items:center;gap:6px;flex:none;padding:7px 10px;border-top:1px solid #d2b57e;background:#f4dfb5}.tutorial-controls button{min-height:48px;border:1px solid #b98a4f;border-bottom-width:3px;border-radius:6px;background:#fff2cf;color:#68482b;padding:7px 9px;font-size:12px;font-weight:750}.tutorial-controls button:disabled{opacity:.45}.tutorial-controls #tutorial-next{background:#2b663b;color:#fff2d0;border-color:#214b2e}.tutorial-controls span{text-align:center;font-size:11px;color:#785c38;font-variant-numeric:tabular-nums}
.tutorial-overview{position:absolute;top:66px;right:8px;z-index:3;min-height:48px;padding:8px 12px;border:1px solid #c2a263;border-radius:7px;background:#fff3d2;color:#604b2f;font-size:12px;font-weight:750}
.tutorial-dialog button:focus-visible{outline:3px solid #e0b74f;outline-offset:2px}
@keyframes tutorial-glow{50%{border-color:#fff1a0}}
@media(max-width:520px){.tutorial-content{padding:10px}.tutorial-dialog .tutorial-copy h2{font-size:17px}.tutorial-dialog .tutorial-copy p{font-size:13px;line-height:1.45}.tutorial-controls{padding:6px 8px}.tutorial-tile{flex-direction:column;gap:3px;font-size:10px}.tutorial-top button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.tutorial-spotlight{animation:none}}
.tutorial-top{left:0;right:0;top:0;padding:7px 8px;background:#203f33}.tutorial-top strong{font-size:11px;padding:5px 10px}.tutorial-top strong span{display:block;font-size:10px;font-weight:600;letter-spacing:0;margin-top:3px}
.tutorial-target{width:100%;height:100%;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;pointer-events:auto;border:0;border-radius:6px;padding:4px;background:#fff3d5;color:#5a4027;cursor:pointer;touch-action:manipulation}.tutorial-target img{width:28px;height:28px;object-fit:contain}.tutorial-target:disabled{opacity:1;cursor:wait;background:#f0e3c4}.tutorial-spotlight:has(.tutorial-target:disabled){animation:none}
.tutorial-task{font-size:13px;line-height:1.45;text-align:center;color:#315c37;font-weight:750;margin:6px 0}.tutorial-reward{position:absolute;z-index:4;display:flex;align-items:center;gap:5px;pointer-events:none;color:#fff4ce;font:800 22px 'Segoe UI',sans-serif;text-shadow:0 2px 2px #493222,-1px -1px #493222;animation:tutorial-received 1.1s ease-out both}.tutorial-reward img{width:25px;height:25px;object-fit:contain}
@keyframes tutorial-received{from{transform:translateY(0);opacity:1}75%{opacity:1}to{transform:translateY(-32px);opacity:0}}
@media(prefers-reduced-motion:reduce){.tutorial-reward{animation:none}}