#cards-tutorial{width:min(980px,94vw);max-width:94vw;max-height:90dvh;padding:26px;border:1px solid #8975d066;border-radius:24px;background:linear-gradient(145deg,#1c243a,#101727);color:#f3f6ff;overflow:auto;font-family:Segoe UI,Arial,sans-serif}#cards-tutorial::backdrop{background:#030813cf;backdrop-filter:blur(6px)}.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.tutorial-heading span{font-size:10px;color:#04cef4;letter-spacing:2px}.tutorial-heading h2{font-size:26px;letter-spacing:-.6px;margin:9px 0 20px}.tutorial-close{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff25;background:#202c45;color:#fff;font-size:27px;flex-shrink:0}.tutorial-tabs{display:flex;gap:8px;margin-bottom:20px}#cards-tutorial button{cursor:pointer}.tutorial-tabs button,.tutorial-controls button{background:#1a2943;color:#d2dff5;border:1px solid #ffffff20;border-radius:10px;padding:12px 17px;font-weight:700}.tutorial-tabs [aria-selected=true]{background:#04cef421;color:#63e6ff;border-color:#04cef466}.tutorial-scene{position:relative;height:320px;background:radial-gradient(ellipse,#28395d,#112237);border:1px solid #84a6c030;border-radius:24px;overflow:hidden}.tutorial-top{position:absolute;left:22%;top:20px;display:flex;flex-direction:column;align-items:center;gap:10px}.tutorial-top>span,.tutorial-hand>span{font-size:10px;color:#99acc8;letter-spacing:1.5px;font-weight:700}.tutorial-top img{width:95px;height:138px;transform:rotate(8deg)}.tutorial-hand{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px}.tutorial-hand>div{display:flex;gap:12px}.tutorial-hand img{width:82px;height:119px;filter:drop-shadow(0 5px 8px #0007)}.tutorial-copy h3{font-size:22px;margin:22px 0 10px;color:#ffe4aa}.tutorial-copy p{font-size:15px;line-height:1.7;color:#b8c7e1;min-height:51px}.tutorial-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0}.tutorial-controls button:disabled{opacity:.3;cursor:default}#tutorial-play{background:#04cef4;color:#06172b}#tutorial-progress{font-size:12px;color:#8fa4c6;margin:0 8px}.tutorial-note{font-size:11px;color:#8298bb;line-height:1.7;display:block}.tutorial-gallery{display:flex;gap:12px;overflow:auto;padding:10px 0 20px}.tutorial-gallery img{width:100px;height:145px;flex-shrink:0}.tutorial-moving,.tutorial-drawing{position:absolute;width:82px;height:119px;z-index:2;pointer-events:none}.tutorial-moving{left:calc(50% - 41px);bottom:16px;animation:lesson-play 2.6s ease-in-out infinite}.tutorial-drawing{left:23%;top:40px;animation:lesson-draw 2.6s ease-in-out infinite}.tutorial-uno,.tutorial-win{position:absolute;right:9%;top:65px;font-style:italic;font-size:35px;color:#ffe5aa;text-shadow:3px 4px #d4147d;animation:lesson-pop 1.8s infinite}.tutorial-win{font-size:26px}.tutorial-blocked{filter:grayscale(.6)!important;outline:2px solid #ff5688;border-radius:9px}.tutorial-color{position:absolute;top:80px;left:110px;font-size:12px;color:#04cef4}@keyframes lesson-play{0%,15%{transform:translate(0,0) rotate(-8deg);opacity:0}30%{opacity:1}80%,100%{transform:translate(-170px,-130px) rotate(8deg);opacity:1}}@keyframes lesson-draw{0%,15%{transform:translate(0,0);opacity:0}30%{opacity:1}80%,100%{transform:translate(190px,130px) rotate(-8deg);opacity:1}}@keyframes lesson-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(-3deg)}}@media(max-width:600px){#cards-tutorial{padding:18px;border-radius:18px}.tutorial-heading h2{font-size:21px}.tutorial-tabs button{font-size:12px;padding:10px}.tutorial-scene{height:290px}.tutorial-top{left:12%}.tutorial-uno{right:5%;font-size:29px}.tutorial-win{font-size:19px;right:3%}.tutorial-copy h3{font-size:19px}.tutorial-copy p{font-size:13px}.tutorial-controls button{padding:10px 12px;font-size:12px}.tutorial-gallery img{width:88px;height:128px}.tutorial-moving{animation-name:lesson-play-small}.tutorial-drawing{animation-name:lesson-draw-small}}@keyframes lesson-play-small{0%,15%{transform:translate(0,0);opacity:0}30%{opacity:1}80%,100%{transform:translate(-70px,-105px) rotate(8deg);opacity:1}}@keyframes lesson-draw-small{0%,15%{transform:translate(0,0);opacity:0}30%{opacity:1}80%,100%{transform:translate(95px,110px);opacity:1}}@media(prefers-reduced-motion:reduce){.tutorial-moving,.tutorial-drawing{animation:none;display:none}.tutorial-uno,.tutorial-win{animation:none}}