/* Scoped PLAYHOUR retro hero; readable source, no external dependencies. */

    .ph-retro-chassis { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 12px 12px #0006); }
    .ph-retro-crt-screen { position: absolute; left: 16%; top: 16.551724%; width: 68%; height: 55.172414%; overflow: hidden; border-radius: 0; clip-path: polygon(3% 0,97% 0,97% 3%,100% 3%,100% 97%,97% 97%,97% 100%,3% 100%,3% 97%,0 97%,0 3%,3% 3%); background: #020507; box-shadow: inset 0 0 18px #000; container-type: inline-size; }
    .ph-retro-crt-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, #102d44 0, #071b2a 48%, #030e19 100%); opacity: 0; transition: opacity .7s ease; }
    .ph-retro-crt-screen::after { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, #0000 0 3px, #0002 3px 4px), radial-gradient(ellipse at center, transparent 45%, #0008 100%); box-shadow: inset 0 0 25px #0009, inset 0 1px 2px #a2daff12; opacity: .75; }
    .ph-retro-crt-screen.ph-retro-is-powered::before { opacity: 1; }
    .ph-retro-glass { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, #c3dcff0b, #ffffff03 26%, transparent 46%); }
    .ph-retro-power-sweep { position: absolute; z-index: 1; inset: 49.7% 12%; opacity: 0; background: #c4edff; box-shadow: 0 0 12px #5bb9ff; }
    .ph-retro-is-powered .ph-retro-power-sweep { animation: power-on .65s ease-out both; }
    @keyframes power-on { 0% { opacity: 0; transform: scaleX(.12); } 25% { opacity: .8; transform: scaleX(.8); } 60% { opacity: .3; transform: scaleY(30); } 100% { opacity: 0; transform: scaleY(70); } }
    .ph-retro-screen-title { position: absolute; z-index: 3; left: 6%; right: 6%; top: 20%; margin: 0; color: #e2f5ff; text-align: center; font-family: monospace; font-size: 5cqw; line-height: 1.65; font-weight: 700; }
    .ph-retro-title-line { display: block; opacity: 0; transform: translateY(-200%); }
    .ph-retro-title-line + .ph-retro-title-line { margin-top: 8%; }
    .ph-retro-title-line svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px #88caff60); }
    .ph-retro-title-line.ph-retro-is-visible { animation: word-drop .52s cubic-bezier(.2,.7,.28,1) both; }
    @keyframes word-drop { 0% { opacity: 0; transform: translateY(-220%); } 24% { opacity: 1; } 76% { transform: translateY(8%); } 100% { opacity: 1; transform: translateY(0); } }
    .ph-retro-screen-actions { position: absolute; z-index: 8; left: 8%; bottom: 16%; width: 84%; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
    .ph-retro-catalog-button { position: relative; width: 100%; min-height: max(30px, 8cqw); padding: 2cqw 2.2cqw; border: 0; color: #eef8ff; background: #6575ff; box-shadow: inset 0 3px #9aa5ff, inset 0 -4px #3c48b0, 0 4px #020b17; clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 5px 4px); opacity: 0; transform: translateY(8px); visibility: hidden; cursor: pointer; transition: opacity .5s ease, transform .25s ease, background .2s ease, filter .2s ease; }
    .ph-retro-catalog-button svg { display: block; width: 100%; height: auto; }
    .ph-retro-catalog-button.ph-retro-is-visible { opacity: 1; transform: none; visibility: visible; }
    .ph-retro-catalog-button:hover { background: #7886ff; filter: drop-shadow(0 0 6px #429bff55); transform: translateY(-2px); }
    .ph-retro-secondary-button { background: #182333; box-shadow: inset 0 3px #3a4a62, inset 0 -4px #0b111d, inset 3px 0 #2a303c, inset -3px 0 #2a303c, 0 4px #020b17; }
    .ph-retro-secondary-button:hover { background: #24324a; }
    .ph-retro-catalog-button:active, .ph-retro-catalog-button.ph-retro-is-pressed { transform: translateY(2px); }
    .ph-retro-catalog-button:focus-visible { outline: 3px solid #d2efff; outline-offset: -6px; }
    .ph-retro-runner-track { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
    .ph-retro-runner { position: absolute; width: 12%; left: 5%; top: 31%; opacity: 0; image-rendering: pixelated; }
    .ph-retro-runner svg { display: block; width: 100%; height: auto; overflow: visible; }
    .ph-retro-runner.ph-retro-is-running { animation: run-across 1.1s linear both; }
    .ph-retro-is-running .ph-retro-feet-a { animation: stride-a .16s steps(1) 7; }
    .ph-retro-is-running .ph-retro-feet-b { animation: stride-b .16s steps(1) 7; }
    .ph-retro-feet-b { opacity: 0; }
    @keyframes stride-a { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    @keyframes stride-b { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    @keyframes run-across { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 100% { opacity: 1; transform: translateX(320%); } }
    .ph-retro-runner.ph-retro-is-hit { left: 43.4%; opacity: 1; transform-origin: 50% 100%; animation: pixel-squash .4s ease-in forwards; }
    @keyframes pixel-squash { 0% { transform: scale(1); opacity: 1; } 28% { transform: translateY(12%) scale(1.25,.55); opacity: 1; } 65% { transform: translateY(26%) scale(1.1,.4); opacity: .8; } 100% { transform: translateY(34%) scale(1.2,.2); opacity: 0; } }
    .ph-retro-ready .ph-retro-runner { display: none; }
    .ph-retro-reduced .ph-retro-title-line, .ph-retro-reduced .ph-retro-catalog-button { animation: none; transition: none; transform: none; opacity: 1; visibility: visible; }
    .ph-retro-reduced .ph-retro-power-sweep, .ph-retro-reduced .ph-retro-runner { display: none; }
    .ph-retro-reduced.ph-retro-crt-screen::before { transition: none; }
    @media (max-width: 480px) {
      .ph-retro-crt-screen::after { background: repeating-linear-gradient(0deg, #0000 0 2px, #0002 2px 3px), radial-gradient(ellipse at center, transparent 45%, #0008 100%); opacity: .55; }

    }
    @container (max-width: 350px) {
      .ph-retro-screen-title { top: 12%; }
      .ph-retro-screen-actions { left: 12%; width: 76%; bottom: 8%; grid-template-columns: 1fr; gap: 2cqw; }
      .ph-retro-catalog-button { min-height: 28px; padding: 2.1cqw 3.2cqw; }
    }
    @media (prefers-reduced-motion: reduce) { .ph-retro-computer, .ph-retro-computer *, .ph-retro-computer *::before, .ph-retro-computer *::after { animation: none !important; transition: none !important; } .ph-retro-catalog-button:hover { transform: none; } }
  
    .hero .hero-main.retro-computer-host { position:relative; background:transparent; border-color:transparent; overflow:visible; }
    .retro-computer-host > #hero-heading, .retro-computer-host > .hero-text { opacity:0; pointer-events:none; }
    .retro-computer-host > .hero-buttons { visibility:hidden; pointer-events:none; }
    .ph-retro-computer { position:absolute; inset:0; width:100%; height:100%; isolation:isolate; }
    .ph-retro-computer, .ph-retro-computer * { box-sizing:border-box; }
    .ph-retro-computer .ph-retro-chassis { filter:none; }
    .ph-retro-computer .ph-retro-crt-screen { container-type:size; }
    .ph-retro-computer .ph-retro-screen-title { left:50%; right:auto; top:16%; width:min(88%,180cqh); transform:translateX(-50%); }
    .ph-retro-computer .ph-retro-screen-actions { left:50%; width:min(84%,210cqh); transform:translateX(-50%); margin:0; }
    .ph-retro-computer .ph-retro-catalog-button { font:inherit; -webkit-tap-highlight-color:transparent; }
    .ph-retro-computer .ph-retro-retro-button-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .ph-retro-computer .ph-retro-retro-button-pixels { display:block; }
    @container (min-width:351px) { .ph-retro-computer .ph-retro-catalog-button { min-height:30px; padding:1.6cqw 2.2cqw; } }
    @container (max-width:350px) { .ph-retro-computer .ph-retro-screen-title { top:12%; } .ph-retro-computer .ph-retro-screen-actions { width:76%; } }
    @media (max-width:768px) { .ph-retro-computer { transform:scale(.9); transform-origin:50% 50%; } .ph-retro-computer .ph-retro-catalog-button { min-height:36px; } }

    @media (max-width:768px) {
      .hero.site-shell { padding-top:12px; }
      .hero .hero-grid { gap:8px; }
      .hero .hero-main.retro-computer-host { height:clamp(275px,calc((100vw - 32px) * .96),330px); min-height:0 !important; padding:0; gap:0; }
      .retro-computer-host > #hero-heading, .retro-computer-host > .hero-text, .retro-computer-host > .hero-buttons { position:absolute; }
      .ph-retro-computer { transform:none; }
      .ph-retro-computer .ph-retro-screen-title { top:9%; width:min(94%,190cqh); }
    }