#tic-first-steps{width:calc(100% - 24px);max-width:480px;max-height:calc(100dvh - 24px);overflow:auto;padding:18px;border-radius:26px;background:#fffaf1;color:#30274d;overscroll-behavior:contain}
#tic-first-steps::backdrop{background:#30274d66}
#tic-first-steps h2{font-size:clamp(22px,5vw,30px);margin:10px 0}
#tic-first-steps .first-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
#tic-first-steps .first-count{font-weight:800;color:#5d4b79}
#tic-first-steps button{min-height:48px;border:1px solid #d9cce9;border-radius:14px;background:white;font-weight:800;padding:8px 14px;touch-action:manipulation}
#tic-first-steps button:focus-visible{outline:3px solid #6635b5;outline-offset:2px}
#tic-first-steps .first-tray{position:relative;width:62px;height:62px;margin:8px auto 14px;padding:6px;border-radius:18px;background:#eee3ff}
#tic-first-steps .first-board{display:grid;gap:8px;padding:12px;margin:0 auto;background:#b7eadf;border-radius:24px;box-shadow:0 5px 0 #8dcab9;max-width:330px;grid-template-columns:repeat(3,minmax(0,1fr))}
#tic-first-steps .first-step-0{grid-template-columns:1fr;width:120px}
#tic-first-steps .first-cell{position:relative;min-width:0;min-height:48px;aspect-ratio:1;padding:8px;background:#fffefa;display:grid;place-items:center}
#tic-first-steps .token{display:block;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;pointer-events:none}
#tic-first-steps .first-status{font-size:16px;line-height:1.35;min-height:24px;margin:14px 0 8px}
#tic-first-steps .first-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#tic-first-steps .first-controls button{flex:1;white-space:nowrap}
#tic-first-steps .first-controls .primary-button{width:auto;background:#7750dc;color:white;border:0;font-size:17px;padding:10px 15px;box-shadow:none}
#tic-first-steps .first-effect{position:absolute;inset:2px;border:4px solid #2c896e;border-radius:12px;pointer-events:none;animation:first-glow 1.7s ease-in-out both}
#tic-first-steps .first-effect.conflict{border-color:#a84a23;background:#ffb86125;border-style:dashed}
#tic-first-steps .first-effect.blocked:after{content:'✓';position:absolute;right:1px;bottom:0;color:#205d4c;background:#fffef4;border-radius:50%;font-size:22px;line-height:1.2}
#tic-first-steps .first-cue{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);animation:first-drop 1.8s ease-in-out both}
@keyframes first-glow{0%,100%{opacity:0;transform:scale(.96)}20%,75%{opacity:1;transform:scale(1)}}
@keyframes first-drop{0%{opacity:0;transform:translateY(-55px) scale(.85)}30%,70%{opacity:.65;transform:translateY(0) scale(1)}100%{opacity:0}}
@media(max-height:600px){#tic-first-steps .first-tray{width:42px;height:42px;margin:3px auto 7px}#tic-first-steps .first-board{max-width:246px}#tic-first-steps h2{margin:4px 0}#tic-first-steps .first-status{margin:8px 0}#tic-first-steps .first-step-0{width:100px}}
@media(prefers-reduced-motion:reduce){#tic-first-steps .first-effect,#tic-first-steps .first-cue{animation:none;opacity:.65}}