*{box-sizing:border-box}
:root{--bg:#0b0a16;--panel:#121126;--panel2:#16152f;--line:#242443;--orange:#ff6a2a;--orange2:#ff9148;--cream:#fff1df;--muted:#817d9a;--purple:#29204e}
html{scroll-behavior:smooth}
body{margin:0;background:#0a0912;color:#f6f2ff;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.page{width:min(100%,500px);margin:0 auto;min-height:100vh;background:linear-gradient(180deg,#101024,#15142e 58%,#0d0c18);box-shadow:0 0 70px rgba(0,0,0,.35)}
.topbar{height:72px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:#121127;border-bottom:1px solid #292747}
.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:41px;height:41px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#ff9963,#ff5728);box-shadow:0 0 18px rgba(255,101,43,.28);font-size:17px}.brand-copy strong{display:block;font-size:18px}.brand-copy strong span{color:#ff6b2a}.brand-copy small{display:block;color:#77738f;font-size:8px;letter-spacing:2px;margin-top:2px}
.online{background:linear-gradient(90deg,#a43e11,#ff6f2b);border-radius:17px;padding:7px 11px;color:#fff1df;font-size:10px;font-weight:800;box-shadow:0 0 15px rgba(255,105,35,.24)}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffd3ae;margin-right:5px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);background:#1d1b55;border-bottom:1px solid #27265a}.metrics div{padding:9px 5px;text-align:center}.metrics span{font-size:12px;margin-right:4px}.metrics b{color:#ff974d;font-size:12px}.metrics small{display:block;color:#7d79a3;font-size:7px;letter-spacing:1px;margin-top:2px}
.hero{padding:24px 18px 20px;background:radial-gradient(circle at 50% 54%,rgba(255,92,27,.07),transparent 40%),#121126;border-bottom:1px solid #272644}
.hand-label{text-align:center;color:#7d79a4;letter-spacing:3px;font-size:9px;margin:0 0 10px}
.cards{display:flex;justify-content:center;gap:0;margin-bottom:18px}.card,.mystery{width:56px;height:82px;border-radius:6px;border:1px solid #d7c9b8;background:#fff8ea;color:#15121a;padding:6px;box-shadow:0 5px 12px rgba(0,0,0,.22)}.card b{font-size:12px}.card span{display:block;text-align:center;font-size:22px;margin-top:12px}.card.red{color:#d73e31}.mystery{display:grid;place-items:center;background:#262456;color:#e75f1a;border:2px solid #aa4118;font-size:28px}
.result{display:flex;align-items:center;justify-content:space-between;background:#242251;border-radius:7px;padding:12px 14px;margin-bottom:18px}.result strong{display:block;color:#ff8a46;font-size:14px}.result small{display:block;color:#8a86a6;font-size:9px;margin-top:3px}.score{font-size:22px;font-weight:900;color:#fff2df}.score span{font-size:10px;color:#85819d}
.hero-copy{text-align:center}.eyebrow{margin:0 0 7px;color:#7b77a0;letter-spacing:3px;font-size:8px}
h1{margin:0 auto 16px;font-size:34px;line-height:1.02;text-transform:uppercase;background:linear-gradient(90deg,#fff3e6 0 58%,#ff672b 58% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bonus{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#a83a10,#e5571e,#ff7d35);padding:12px 16px;border-radius:7px;box-shadow:0 0 20px rgba(255,99,34,.18)}.bonus span{font-size:9px;color:#ffd6be}.bonus b{font-size:18px}.hint{color:#76718f;font-size:9px;margin-top:11px}
.actions{padding:16px 18px;background:#19172f;border-bottom:1px solid #2a274a}.btn{position:relative;overflow:hidden;min-height:56px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:14px;font-weight:900;letter-spacing:1.2px}.btn:last-child{margin-bottom:0}.primary{background:linear-gradient(90deg,#a53d0f,#db501d,#ff7332,#b53f10);background-size:220% 100%;animation:gradientMove 4s linear infinite;box-shadow:0 0 20px rgba(255,103,39,.2)}.secondary{border:1px solid #2a2849;background:#17152c;color:#827e9d}
.shimmer::after{content:"";position:absolute;top:-50%;left:-40%;width:28%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:rotate(20deg);animation:shine 2.7s infinite}.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes shine{0%{left:-40%}55%,100%{left:130%}}@keyframes gradientMove{0%{background-position:0 0}100%{background-position:220% 0}}@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(255,103,39,0)}50%{box-shadow:0 0 18px rgba(255,103,39,.34)}}
.intro{padding:18px;background:#121126;border-bottom:1px solid #252342}.intro h2{margin:0 0 10px;color:#ff8b4a;font-size:14px;text-transform:uppercase}.intro p{margin:0;color:#8a86a1;line-height:1.55;font-size:12px}.year{text-align:right;color:#3c3957;font-size:9px;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:#171630;border-bottom:1px solid #252342}.stats div{padding:14px 6px;text-align:center;border-right:1px solid #252342}.stats div:last-child{border-right:0}.stats strong{display:block;color:#ff8d4d;font-size:19px}.stats span{display:block;color:#77738f;font-size:8px;letter-spacing:1.2px;margin-top:3px}
.details{padding:18px;background:#121126}.details h2{margin:0 0 10px;color:#6f6b88;font-size:9px;letter-spacing:2px}.row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #272541;color:#77738e;font-size:11px}.row b{color:#f4f1fb;text-align:right}
footer{padding:16px 18px 24px;background:#0d0c18;color:#4a465e;text-align:center;font-size:9px;line-height:1.45}
@media(max-width:420px){h1{font-size:29px}.cards{transform:scale(.94);transform-origin:50% 0}}