===== FILE: public/press-start/coin.css =====
/* PRESS START coin — 48px flipping gold coin, top-centre of the front-page header (inside .solid-world-wrap). */
.ps-hcoin{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;z-index:3;display:block;perspective:400px;border-radius:50%;-webkit-tap-highlight-color:transparent;text-decoration:none;filter:drop-shadow(0 0 8px rgba(255,190,40,.55))}
.ps-hcoin span{position:absolute;inset:0;transform-style:preserve-3d;animation:ps-hflip 3.2s ease-in-out infinite}
.ps-hcoin i{position:absolute;inset:0;border-radius:50%;background:center/contain no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ps-hcoin i.f{background-image:url(/img/press-start/coin-front.webp)}
.ps-hcoin i.b{background-image:url(/img/press-start/coin-back.webp);transform:rotateY(180deg)}
.ps-hcoin:focus-visible{outline:3px solid #ffd76a;outline-offset:3px}
.ps-hcoin:active span{animation-play-state:paused}
@keyframes ps-hflip{0%,30%{transform:rotateY(0)}50%,80%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.ps-hcoin span{animation:none}}
/* phones: the header is 3D-projected (translateZ) so only the lower ~29px of the 52px strip shows; on the front page
give the strip room for the 48px coin and sit the coin at its bottom, clear of the "solid's block" tag. */
@media (max-width:600px){
.site-header .solid-world-wrap:has(.ps-hcoin){height:80px !important}
.ps-hcoin{top:auto;bottom:3px;margin:0 0 0 -24px}
}
===== FILE: public/press-start/index.html =====
PRESS START — Solid City