/* Page-specific extensions of PixelatedSpace's existing Workbench components. */
.tools-page .page-header { padding: 150px 0 50px; text-align: center; }
.tools-intro { max-width: 650px; margin: 0 auto 1.5rem; font-size: 1.1rem; }
.tools-page .tools-section { padding: 2rem 0 4rem; }
.tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tools-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tools-artwork { display: block; width: 100%; height: 210px; object-fit: cover; }
.tools-card-content { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tools-card .item-header { flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.tools-card h2 { font-size: 1.25rem; margin: 0; line-height: 1.4; }
.tools-card .item-desc { flex: 1; font-size: 0.95rem; }
.tools-card[data-status="experimental"] .item-state { color: var(--accent-purple); }
.tools-destination { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; margin: 1.25rem 0 0.75rem; }
.tools-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-cyan); font-weight: 600; padding: 0.4rem 0; }
.tools-link:hover { color: #fff; }
.tools-link i { font-size: 0.75rem; }
.tools-page .dino-section { padding: 2rem 0 0; }
.dino-section .section-header { text-align: center; margin-bottom: 2rem; }
.dino-section h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.dino-section .section-header p { max-width: 650px; margin: 0 auto 0.5rem; }
.game-card { position: relative; max-width: 800px; margin: 0 auto; padding: 0; overflow: hidden; border-radius: var(--border-radius); }
.game-card:hover { transform: none; }
#game-canvas { display: block; width: 100%; height: auto; min-height: 210px; aspect-ratio: 2 / 1; background: var(--bg-primary); cursor: pointer; touch-action: manipulation; }
#game-canvas:focus-visible { outline-offset: -4px; }
.game-hud { position: absolute; top: 1rem; right: 1rem; z-index: 5; display: flex; gap: 1rem; pointer-events: none; color: var(--text-secondary); font: 0.875rem var(--font-mono); }
.game-hud strong { color: var(--accent-cyan); }
.game-overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; background: rgba(5, 7, 10, 0.8); backdrop-filter: blur(6px); }
.game-overlay[hidden] { display: none; }
.game-overlay p { margin: 0; }
.game-over-text { color: var(--accent-purple); font-size: 1.5rem; font-weight: 700; }
.game-help { text-align: center; font-size: 0.875rem; padding-top: 1rem; }
.tools-page .footer .social-links { align-items: center; flex-wrap: wrap; }
.tools-skip { position: fixed; top: -100px; left: 1rem; z-index: 2000; background: var(--bg-primary); padding: 0.75rem; color: var(--accent-cyan); }
.tools-skip:focus { top: 1rem; }
.tools-noscript li { margin-bottom: 1rem; list-style-position: inside; }
.tools-noscript a { color: var(--accent-cyan); }
@media (max-width: 768px) {
  .tools-page .page-header { padding: 110px 0 30px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-artwork { height: 200px; }
  .tools-intro { font-size: 1rem; }
}
@media (max-width: 480px) {
  .tools-page .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .game-hud { font-size: 0.75rem; gap: 0.75rem; top: 0.75rem; right: 0.75rem; }
  .game-overlay { gap: 0.5rem; }
  .game-over-text { font-size: 1.25rem; }
  .game-overlay .btn { font-size: 0.875rem; padding: 0.65rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-page *, .tools-page *::before, .tools-page *::after { animation: none !important; transition: none !important; }
  .tools-document { scroll-behavior: auto; }
  .tools-page .workbench-item:hover { transform: none; }
}