:root{--bg:#0d0d10;--card:#17171c;--card2:#202027;--line:#2a2a33;--text:#f3f3f5;--muted:#9a9aa6;--gold:#e0b44c;--gold2:#f7d77c;--gold3:#a87a1e;--gold4:#6e4d0d}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:inherit}
.top{display:flex;justify-content:center;padding:18px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.14em;text-decoration:none;font-size:15px}
.brand .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold2),var(--gold3));box-shadow:0 0 14px rgba(224,180,76,.7)}
.wrap{max-width:780px;margin:0 auto;padding:0 16px 32px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.badge{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1305;font-weight:900;font-size:12px;letter-spacing:.12em;padding:6px 10px;border-radius:8px}
.mult{font-size:30px;font-weight:900;background:linear-gradient(180deg,#fff2c4,var(--gold) 60%,var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}
.game{color:var(--muted);font-weight:600}
.user{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;font-weight:600;margin-bottom:12px}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1a1305;font-weight:900;font-size:13px}
.amount{font-weight:800;color:var(--gold2);margin-bottom:12px}
.frame{position:relative;width:100%;aspect-ratio:16/10;background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:600px){.frame{aspect-ratio:9/14}.mult{font-size:26px}}
.replay-link{display:block;text-align:center;margin:12px 0 18px;color:var(--muted);font-size:14px;text-decoration:none}
.replay-link:hover{color:var(--text)}

/* 3D CTA button */
.cta{display:block;position:relative;text-decoration:none;border-radius:16px;background:linear-gradient(180deg,var(--gold3),var(--gold4));padding-bottom:7px;box-shadow:0 14px 28px rgba(224,180,76,.25),0 4px 0 rgba(0,0,0,.4);transition:transform .08s ease,box-shadow .08s ease;-webkit-tap-highlight-color:transparent}
.cta-face{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 16px;border-radius:16px;background:linear-gradient(180deg,var(--gold2) 0%,var(--gold) 55%,#c99a35 100%);color:#1d1606;font-weight:900;font-size:20px;letter-spacing:.06em;box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.18);text-shadow:0 1px 0 rgba(255,255,255,.45);transform:translateY(-4px);transition:transform .08s ease}
.cta-face::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 2.8s ease-in-out infinite}
.cta .arrow{transition:transform .2s}
.cta:hover .cta-face{transform:translateY(-6px)}
.cta:hover .arrow{transform:translateX(4px)}
.cta:active .cta-face{transform:translateY(0)}
.cta:active{box-shadow:0 6px 14px rgba(224,180,76,.2)}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.cta-face::after{animation:none}}

.h1{font-size:24px;font-weight:900;margin:8px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.tile-mult{font-size:26px;font-weight:900;color:var(--gold2)}
.tile-sub{color:var(--muted);font-size:14px}
.tile-play{margin-top:6px;font-weight:800;font-size:14px}
.muted{color:var(--muted)}
.empty{text-align:center}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:8px 16px 28px}