:root{--gold:#ffd400;--bg:#000;--maxw:420px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family:Inter,Arial,Helvetica,sans-serif;color:#fff}
.frame{width:100%;max-width:420px;margin:0 auto;position:relative;padding-bottom:100px}
.img{display:block;width:100%;height:auto;border-radius:6px;user-select:none}
.top,.bottom{margin:0}
.middle-wrap{display:flex;justify-content:center;margin:18px 10px}
.gold-frame{position:relative;padding:10px;border-radius:12px;background:linear-gradient(180deg,rgba(0,0,0,0.15),transparent);overflow:visible}
.gold-frame::before{content:'';position:absolute;inset:-8px;border-radius:14px;background:linear-gradient(90deg,#ffd400,#ffb200,#ffd400);filter:blur(8px);opacity:0.25;z-index:-2}
.middle{max-width:360px;border-radius:10px;display:block;position:relative;z-index:2}
.runner{position:absolute;inset:-10px;border-radius:14px;pointer-events:none;z-index:3;background:linear-gradient(90deg,rgba(255,212,64,0) 0%, rgba(255,212,64,0.95) 45%, rgba(255,212,64,0) 70%);transform:translateX(-140%);height:calc(100% + 20px)}
.gold-frame.runner-on .runner{animation:runLight 1.2s linear infinite;opacity:0.98}
@keyframes runLight{0%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.gold-frame.floaty{animation:floaty 2.6s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(-5px)}50%{transform:translateY(5px)}100%{transform:translateY(-5px)}}
.gold-frame.shake{animation:shake 1.1s ease-in-out infinite}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;background:var(--gold);color:#000;border:0;padding:14px 22px;border-radius:12px;font-weight:800;z-index:999;width:92%;max-width:420px;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
@media (max-width:420px){.middle{max-width:92vw}.frame{padding-bottom:120px}}