/* New-player tutorial panel (roadmap item 31, src/tutorial-hud.js). Not modal: right side of the screen, under the quest
   tracker when that shows (the script sets `top`), clear of the minimap, the bottom bar, the joystick and the character frame.
   Green/gold parchment like the NPC card. Highlights (.tutorial-focus) only animate outline/box-shadow (no layout). */
.tutorial-panel{position:absolute;top:min(46%,330px);right:22px;width:226px;z-index:5;box-sizing:border-box;padding:6px 8px 8px;
 background:linear-gradient(180deg,#2f4a2ee6,#25381fe6);border:1.5px solid #d9bf78;border-radius:13px;color:#fff6dc;font-size:12px;line-height:1.35;
 box-shadow:0 3px 12px #0000004d,inset 0 0 0 1px #ffffff14;pointer-events:auto}
.tutorial-panel[hidden]{display:none}
/* Inside the bag window (top layer while it is open): bottom-left corner, header + the current step only, so the item
   details and the character stay clear. */
dialog .tutorial-panel{position:fixed;left:16px;right:auto;top:auto!important;bottom:16px;width:212px;transform:none}
dialog .tutorial-panel .tutorial-step:not(.current){display:none}
.tutorial-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:26px;padding:2px 4px;margin:0;border:0;border-radius:8px;background:none;color:#ffe9a6;font:inherit;font-weight:800;letter-spacing:.2px;text-align:left;cursor:pointer}
.tutorial-toggle:hover,.tutorial-toggle:focus-visible{background:#ffffff1a;outline:none}
.tutorial-title{flex:1;text-shadow:0 1px 2px #000a}
.tutorial-count{font-variant-numeric:tabular-nums;color:#fff3d7;font-weight:700}
.tutorial-chevron{width:7px;height:7px;border-right:2px solid #f2dc9f;border-bottom:2px solid #f2dc9f;transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s}
.tutorial-panel.collapsed .tutorial-chevron{transform:rotate(-45deg)}
.tutorial-panel.collapsed .tutorial-body{display:none}
.tutorial-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.tutorial-step{display:flex;align-items:center;gap:7px;padding:3px 6px;border:1px solid #d9bf7840;border-radius:8px;background:#1b2915a6}
.tutorial-step.current{border-color:#ffd65a;background:#4a4318b3;box-shadow:inset 3px 0 0 #ffd65a}
.tutorial-step.done{color:#c9e9b0}
.tutorial-step.done .tutorial-step-name{text-decoration:line-through;text-decoration-color:#c9e9b088}
.tutorial-step.unavailable{opacity:.55}
.tutorial-step small{margin-left:auto;font-size:10px;color:#eadfc0}
.tutorial-mark{flex:none;display:grid;place-items:center;width:16px;height:16px;border:1.5px solid #d9bf78;border-radius:50%;font-size:11px;font-weight:900;color:#20331a;background:#00000033}
.tutorial-step.done .tutorial-mark{background:#8fd46a;border-color:#c9e9b0}
.tutorial-hint{margin:6px 2px 0;padding:6px 7px;border-radius:8px;background:#00000033;color:#fff6dc;font-size:12px}
.tutorial-hint[hidden],.tutorial-done[hidden],.tutorial-confirm[hidden],.tutorial-skip[hidden]{display:none}
.tutorial-done{margin:6px 2px 0;padding:7px;border-radius:8px;background:#5d7a2e;color:#fff6dc;font-weight:800;text-align:center;animation:tutorial-pop .4s ease-out}
.tutorial-actions{display:flex;justify-content:flex-end;margin-top:6px}
.tutorial-skip,.tutorial-confirm button{min-height:28px;padding:3px 10px;border:1px solid #d9bf78;border-radius:999px;background:#00000040;color:#ffe9a6;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.tutorial-skip:hover,.tutorial-confirm button:hover{background:#ffffff22}
.tutorial-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:6px;border-radius:8px;background:#00000040}
.tutorial-confirm span{flex:1 1 100%;font-weight:700}
.tutorial-confirm .tutorial-confirm-yes{background:#7a2e22b3}
/* The HUD button the current step points at. */
.tutorial-focus{outline:2px solid #ffd65a!important;outline-offset:2px;animation:tutorial-glow 1.2s ease-in-out infinite;border-radius:10px}
@keyframes tutorial-glow{0%,100%{box-shadow:0 0 0 0 #ffd65a00}50%{box-shadow:0 0 0 6px #ffd65a99}}
@keyframes tutorial-pop{0%{transform:scale(.9);opacity:.3}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.tutorial-focus,.tutorial-done{animation:none}}
/* Phones and short landscape screens: header + the current step only. */
@media (max-width:600px),(max-height:500px){
 .tutorial-panel{width:186px;right:8px;top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));font-size:11px;padding:4px 6px 6px}
 .tutorial-step:not(.current){display:none}
 .tutorial-hint{font-size:11px;margin-top:4px}
}
/* Short landscape screens (phones turned sideways): a slim strip at the top centre under the menu icons, the step name in
   the header and the hint below it; the list stays hidden (the right side holds the minimap and the attack buttons). */
.tutorial-now{display:none;color:#fff6dc;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
@media (max-height:500px){
 .tutorial-panel{bottom:auto;top:62px;right:auto;left:50%;transform:translateX(-50%);width:min(330px,46vw)}
 .tutorial-panel .tutorial-steps{display:none}
 .tutorial-now{display:inline}
 .tutorial-hint{margin-top:2px;padding:4px 6px}
 .tutorial-actions{margin-top:3px}
 .tutorial-skip{min-height:24px;padding:2px 9px;font-size:10.5px}
}
.adventure-map-open #game>.tutorial-panel{display:none}