/* Rotate Blocks: dark gear workshop — charcoal, ice cyan, red buttons */
.game.rotate-blocks { --g-bg: #2b2b2e; --g-ink: #f4f4f4; --g-muted: #c3c3c8; --g-accent: #8af5ec; --g-display: "Bungee", "Impact", sans-serif; --g-body: "Rubik", system-ui, sans-serif; --red: #d63a3a; --panel: #1f1f22; --cell: #6e6566; }
.rotate-blocks .game-hero { background: radial-gradient(circle at 85% 30%, #3a3a3e 0 180px, transparent 181px), radial-gradient(circle at 70% 90%, #333337 0 120px, transparent 121px), var(--panel); }
.rotate-blocks .game-hero-copy .game-icon { background: #fff; padding: 8px; }
.rotate-blocks .game-hero-copy h1 { letter-spacing: 0.01em; }
.rotate-blocks .game-hero-copy h1 span { color: var(--g-accent); }
.rotate-blocks .game-hero-copy .lede { color: var(--g-muted); }
.rotate-blocks .game-hero-media img { width: 44%; max-width: 240px; border-radius: 18px; border: 4px solid #4a4a4f; }
.rotate-blocks .game-hero-media img:first-child { transform: rotate(-5deg); }
.rotate-blocks .game-hero-media img:last-child { transform: rotate(4deg); margin-bottom: 32px; }
.rotate-blocks .blocks { background: var(--panel); }
.rotate-blocks .feature-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rotate-blocks .feature { background: #353539; border-radius: 16px; border: 2px solid #46464b; }
.rotate-blocks .feature h3 { font-size: 18px; color: #fff; }
.rotate-blocks .feature p { color: var(--g-muted); }
.rotate-blocks .block { width: 48px; height: 48px; border-radius: 10px; }
.rotate-blocks .block.moving { background: #43a836; border: 5px solid #7cd36e; }
.rotate-blocks .block.solid { background: #6f7377; border: 5px solid #b8bcc0; }
.rotate-blocks .block.phantom { border: 4px dashed #b8bcc0; }
.rotate-blocks .block.finish { background: var(--cell); border: 5px solid #43a836; box-shadow: inset 0 0 0 6px var(--cell), inset 0 0 0 11px #43a836; }
.rotate-blocks .block.ice { background: repeating-linear-gradient(135deg, #8af5ec 0 7px, #c9fbf6 7px 13px); border: 4px solid #3fc4b8; }
.rotate-blocks .block.slime { background: #9be35a; border: 4px solid #5fae2a; border-radius: 16px 16px 10px 10px; }
.rotate-blocks .tips li::before { background: var(--red); }
.rotate-blocks .cta-band { background: var(--red); text-align: center; }
.rotate-blocks .cta-band .container { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 56px; }
.rotate-blocks .cta-band h2 { margin: 0; }
.rotate-blocks .shots img { border-radius: 16px; }