/* Wspólna, nieblokująca warstwa samouczków ekranów shell. */
.tutorial-icon-button { width:64px; height:64px; padding:0; border:0; color:transparent; background:transparent url("../image/ui/tutorial_button.png") var(--tutorial-button-x,0) 0 / 192px 64px no-repeat; box-shadow:none; font-size:0; transition:filter .15s ease,transform .12s ease; } .tutorial-icon-button:not(:disabled):hover,.tutorial-icon-button:not(:disabled):focus-visible { filter:brightness(1.28); transform:scale(1.07); } .tutorial-icon-button:not(:disabled):active { filter:brightness(.86); transform:translateY(2px) scale(.98); }
.tutorial-icon-button--close { --tutorial-button-x:0; } .tutorial-icon-button--confirm { --tutorial-button-x:-64px; } .tutorial-icon-button--help { --tutorial-button-x:-128px; }
.tutorial-icon-button--help { position:absolute; left:42px; top:39px; z-index:18; }
.tutorial-guide { position:absolute; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; pointer-events:none; } .tutorial-guide[hidden] { display:none; }
.tutorial-guide__shade { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 46%,rgba(20,15,10,.24),rgba(0,0,0,.72)); }
.tutorial-guide__panel { position:relative; width:650px; min-height:308px; padding:55px 74px 48px; border:0; background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.82) 12%,rgba(0,0,0,.96) 34%,rgba(0,0,0,.96) 66%,rgba(0,0,0,.82) 88%,transparent 100%); box-shadow:none; color:#cfbea0; text-align:center; } .tutorial-guide__panel--enter { animation:tutorial-guide-step-enter .26s ease-out both; } @keyframes tutorial-guide-step-enter { from { opacity:.3; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { .tutorial-guide__panel--enter { animation:none; } }
.tutorial-guide__kicker { display:block; margin-bottom:8px; color:#a98a57; font:800 14px/1 var(--font-title); letter-spacing:.2em; text-transform:uppercase; } .tutorial-guide h2 { margin:0 0 14px; color:#eed7a5; font:900 28px/1.15 var(--font-title); text-shadow:0 3px #000; }
.tutorial-guide__copy { color:#c9b99d; font:700 17px/1.42 var(--font-body); } .tutorial-guide__copy strong { color:#efd391; } .tutorial-guide__progress { min-height:28px; margin-top:10px; color:#d7b873; font:900 15px/1.35 var(--font-title); letter-spacing:.07em; text-transform:uppercase; }
.tutorial-guide__actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:13px; pointer-events:none; } .tutorial-guide__actions[hidden] { display:none; } .tutorial-guide__next,.tutorial-guide__close { position:relative; top:-3px; pointer-events:auto; } .tutorial-guide--mandatory .tutorial-guide__close { display:none; }
.tutorial-guide--reliquary-hub { align-items:flex-end; padding-bottom:176px; } .tutorial-guide--reliquary-hub .tutorial-guide__panel { width:560px; min-height:190px; padding:38px 56px 32px; }
.tutorial-guide--reliquary-equip { align-items:flex-start; justify-content:center; padding-top:42px; } .tutorial-guide--reliquary-equip .tutorial-guide__panel { width:640px; min-height:0; padding:27px 46px 22px; }
.tutorial-guide--campaign-next { align-items:flex-end; justify-content:flex-end; padding:0 48px 92px 0; } .tutorial-guide--campaign-next .tutorial-guide__panel { width:480px; min-height:0; padding:32px 42px; }
.tutorial-guide--run-cards { align-items:flex-end; padding-bottom:16px; } .tutorial-guide--run-cards .tutorial-guide__panel { width:1080px; min-height:0; padding:18px 44px; }
.tutorial-guide--run-cards h2 { font-size:24px; margin-bottom:8px; } .tutorial-guide--run-cards .tutorial-guide__copy { font-size:16px; } .tutorial-guide--run-cards .tutorial-guide__progress { min-height:0; margin-top:5px; }
.reward-card.is-tutorial-unavailable { opacity:.45; cursor:default; } .reward-card.is-tutorial-unavailable:hover { transform:none; }
.tutorial-guide--dice,.tutorial-guide--banner,.tutorial-guide--treasury { align-items:flex-end; justify-content:center; padding:0 300px 35px 0; } .tutorial-guide--dice .tutorial-guide__panel,.tutorial-guide--banner .tutorial-guide__panel,.tutorial-guide--treasury .tutorial-guide__panel { width:690px; min-height:252px; padding:37px 70px 34px; }
.tutorial-guide--dice-right,.tutorial-guide--banner-right,.tutorial-guide--treasury-right { align-items:center; justify-content:flex-end; padding:0 430px 20px 0; } .tutorial-guide--dice-left,.tutorial-guide--banner-left,.tutorial-guide--treasury-left { align-items:center; justify-content:flex-start; padding:0 0 20px 345px; } .dice-tutorial-target,.banner-tutorial-target,.treasury-tutorial-target { filter:brightness(1.2); }
body.reliquary-tutorial-locked #merge-back-btn,body.reliquary-tutorial-locked #merge-help-btn,body.reliquary-tutorial-locked #merge-toggle-level-btn,body.reliquary-tutorial-locked #merge-create-relic-btn { pointer-events:none!important; filter:brightness(.45) grayscale(.6); }
.reliquary-tutorial-target { filter:brightness(1.25) drop-shadow(0 0 18px rgba(230,190,100,.72)); animation:reliquary-tutorial-pulse 1.5s ease-in-out infinite; } @keyframes reliquary-tutorial-pulse { 50% { filter:brightness(1.55) drop-shadow(0 0 30px rgba(245,205,108,.95)); } }