.how-to-play-page{padding:3rem 0 4rem;min-height:calc(100vh - 200px)}.how-to-play-container{max-width:900px;margin:0 auto;padding:0 20px}.how-to-play-header{text-align:center;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border-subtle)}.how-to-play-title{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--text-primary);letter-spacing:-.025em;margin-bottom:1rem}.how-to-play-subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:560px;margin:0 auto;line-height:1.6}.steps-list{list-style:none;padding:0;margin:0 0 2.5rem;display:flex;flex-direction:column;gap:12px}.step-item{display:flex;align-items:flex-start;gap:1.5rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem;transition:all var(--transition-base)}.step-item:hover{transform:translateX(6px);border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.step-number{flex-shrink:0;width:52px;height:52px;background:linear-gradient(135deg,var(--accent-cyan),#0098c0);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(0,212,255,.25)}.step-content{flex:1}.step-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text-primary);margin:0 0 .5rem}.step-description{color:var(--text-secondary);line-height:1.75;margin:0}.step-description strong{color:var(--accent-cyan);font-weight:600}.info-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:2rem;margin-bottom:16px}.info-card h2{font-family:var(--font-display);font-size:1.5rem;color:var(--accent-cyan);margin-top:0;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.info-card h3{font-family:var(--font-display);font-size:1.15rem;color:var(--text-primary);margin-top:1.5rem;margin-bottom:.5rem}.info-card p{color:var(--text-secondary);line-height:1.75;margin-bottom:1rem}.info-card ul{color:var(--text-secondary);line-height:1.75;margin-bottom:1rem;padding-left:1.5rem}.info-card li{margin-bottom:.5rem}.info-card li strong{color:var(--text-primary)}.info-card a{color:var(--accent-cyan);text-decoration:none;transition:color var(--transition-fast)}.info-card a:hover{color:var(--accent-gold);text-decoration:underline}.tips-box{background:var(--accent-cyan-dim);border-left:3px solid var(--accent-cyan);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.5rem;margin-bottom:16px}.tips-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--accent-cyan);margin:0 0 .75rem}.tips-list{list-style:none;padding:0;margin:0}.tips-list li{color:var(--text-secondary);line-height:1.75;padding-left:1.5rem;position:relative;margin-bottom:.5rem}.tips-list li:last-child{margin-bottom:0}.tips-list li::before{content:'→';position:absolute;left:0;color:var(--accent-cyan)}.tips-list li strong{color:var(--text-primary)}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:1.5rem 0}.control-item{background:rgba(0,0,0,.2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem;text-align:center}.control-icon{font-size:1.75rem;margin-bottom:.5rem}.control-label{font-weight:600;color:var(--text-primary);margin-bottom:.25rem;font-size:.9rem}.control-desc{font-size:.825rem;color:var(--text-muted)}.cta-section{text-align:center;padding:2.5rem 2rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);margin-top:2rem;position:relative;overflow:hidden}.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 100%,rgba(0,212,255,.06) 0%,transparent 60%);pointer-events:none}.cta-section h2{position:relative;font-family:var(--font-display);color:var(--text-primary);margin-bottom:.75rem;font-size:1.5rem}.cta-section p{position:relative;color:var(--text-secondary);margin-bottom:1.5rem}.play-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,var(--accent-cyan),#0098c0);color:#fff;padding:.875rem 2rem;border-radius:var(--radius-md);font-weight:700;text-transform:uppercase;letter-spacing:1px;text-decoration:none;transition:all var(--transition-base);font-size:.95rem;border:none;cursor:pointer}.play-btn:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,212,255,.3)}.play-btn svg{width:18px;height:18px;fill:currentColor}@media(max-width:768px){.how-to-play-page{padding:2rem 0 3rem}.how-to-play-title{font-size:2.2rem}.how-to-play-subtitle{font-size:.95rem}.step-item{flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1.25rem}.step-item:hover{transform:translateY(-3px)}.step-number{width:46px;height:46px;font-size:1.3rem}.step-title{font-size:1.15rem}.step-description{font-size:.9rem}.controls-grid{grid-template-columns:1fr 1fr}.info-card{padding:1.5rem}.info-card h2{font-size:1.3rem}.tips-box{padding:1.25rem}.cta-section{padding:2rem 1.25rem}.cta-section h2{font-size:1.3rem}.play-btn{width:100%;box-sizing:border-box}}@media(max-width:480px){.how-to-play-page{padding:1.5rem 0 2.5rem}.how-to-play-title{font-size:1.75rem}.how-to-play-header{margin-bottom:2rem;padding-bottom:1.5rem}.step-item{padding:1rem}.step-number{width:40px;height:40px;font-size:1.1rem}.step-title{font-size:1.05rem}.controls-grid{grid-template-columns:1fr}.info-card{padding:1.25rem}.play-btn{padding:.75rem 1.5rem;font-size:.875rem}}