/* Page-specific styles extracted from the view for valid HTML and long-lived caching. */
.game-section { padding: 2rem 0 6rem; scroll-margin-top: calc(var(--nav-height) + 1rem); }
.game-wrapper { max-width: 850px; margin: 0 auto; position: relative; }
.game-screen { position: relative; }
.game-intro { text-align: center; padding: 2rem 0; }
.game-intro-visual { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; height: 80px; align-items: center; }
.intro-cube { width: 50px; height: 50px; border-radius: 8px; animation: introFloat 3s ease-in-out infinite; }
.intro-cube-red { background: #c0392b; animation-delay: 0s; }
.intro-cube-blue { background: #2980b9; animation-delay: 0.5s; }
.intro-cube-green { background: #27ae60; animation-delay: 1s; }
.intro-cube-glow { box-shadow: 0 0 20px rgba(39,174,96,0.6), 0 0 40px rgba(39,174,96,0.3); }
@keyframes introFloat { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-15px) rotate(5deg); } }
.game-intro-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 700; margin-bottom: 1rem; }
.game-intro-desc { color: rgba(255,255,255,0.6); font-size: 1rem; max-width: 520px; margin: 0 auto 2rem; line-height: 1.7; }
.game-rules { display: flex; flex-direction: column; gap: 0.6rem; max-width: 440px; margin: 0 auto 2rem; text-align: left; }
.game-rule { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; font-size: 0.92rem; }
.rule-num { font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.6); font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.game-a11y-note { max-width: 460px; margin: 0 auto 2rem; font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.5); text-align: center; }
#factory-canvas, #playground-canvas { width: 100%; height: auto; border-radius: 12px; display: block; cursor: grab; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.06); }
#metro-canvas, #concert-canvas { width: 100%; height: auto; border-radius: 12px; display: block; cursor: pointer; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.06); }
.factory-hud, .playground-hud { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; margin-top: 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; }
.hud-item { text-align: center; }
.hud-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.62); margin-bottom: 0.2rem; }
.hud-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; }
.hud-status .hud-label { font-size: 0.85rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.65); }
.transition-content { text-align: center; padding: 6rem 2rem; }
.glitch-box { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 2rem; }
.glitch-line { height: 3px; background: #2ecc71; border-radius: 2px; animation: glitchExpand 0.8s ease-out forwards; opacity: 0; }
.glitch-line:nth-child(1) { width: 60px; animation-delay: 0.2s; }
.glitch-line:nth-child(2) { width: 120px; animation-delay: 0.5s; }
.glitch-line:nth-child(3) { width: 200px; animation-delay: 0.8s; }
@keyframes glitchExpand { 0%{ width:0; opacity:0; } 100%{ opacity:1; } }
.transition-text { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: #2ecc71; letter-spacing: 0.15em; text-transform: uppercase; animation: fadeInTr 1s 1.2s forwards; opacity: 0; }
@keyframes fadeInTr { to { opacity: 1; } }
.ending-content { text-align: center; padding: 3rem 0; }
.ending-visual { margin-bottom: 2rem; }
.ending-colors { display: flex; justify-content: center; gap: 10px; }
.ending-colors span { width: 40px; height: 40px; border-radius: 8px; animation: introFloat 2.5s ease-in-out infinite; }
.ending-colors span:nth-child(1) { animation-delay: 0s; }
.ending-colors span:nth-child(2) { animation-delay: 0.3s; }
.ending-colors span:nth-child(3) { animation-delay: 0.6s; }
.ending-colors span:nth-child(4) { animation-delay: 0.9s; }
.ending-colors span:nth-child(5) { animation-delay: 1.2s; }
.ending-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; }
.ending-msg { color: rgba(255,255,255,0.5); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.ending-stats { display: flex; justify-content: center; gap: 3rem; margin-bottom: 2rem; }
.stat-item { text-align: center; }
.stat-num { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; }
.stat-text { font-size: 0.75rem; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.1em; }
.ending-about { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.ending-about p { font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.game-over-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Concert orb palette */
.concert-palette { display: flex; justify-content: center; gap: 0.9rem; margin-top: 1rem; }
.orb-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: var(--orb); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; padding: 0; }
.orb-btn:hover { transform: scale(1.12); }
.orb-btn.selected { border-color: #fff; box-shadow: 0 0 16px var(--orb); transform: scale(1.18); }
.glitch-line-blue { background: #3498db; }
.glitch-line-gold { background: #f1c40f; }
.transition-text-blue { color: #3498db; }
.transition-text-gold { color: #f1c40f; }
/* Scene progress tracker */
.game-progress { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 auto 1.5rem; max-width: 520px; }
.game-progress-step { display: flex; align-items: center; gap: 0.5rem; }
.gp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: all 0.4s ease; flex-shrink: 0; }
.gp-dot.active { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.6); transform: scale(1.3); }
.gp-dot.done { background: #2ecc71; }
.gp-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); transition: color 0.4s ease; }
.gp-label.active { color: rgba(255,255,255,0.9); }
.gp-line { width: 22px; height: 1px; background: rgba(255,255,255,0.12); }
/* Clock reveal punchline */
.clock-reveal-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.clock-reveal-text span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 3.5vw, 2rem); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgba(231,76,60,0.7); text-align: center; padding: 0 1rem; }
@media (max-width: 600px) {
    #factory-canvas, #playground-canvas, #metro-canvas, #concert-canvas { border-radius: 8px; }
    .factory-hud, .playground-hud { padding: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
    .gp-label { display: none; }
    .gp-line { width: 12px; }
}