.platinum-page { min-height:100vh; background:radial-gradient(circle at 76% 8%,rgba(91,79,255,.18),transparent 27%),var(--navy); }
.platinum-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:24px 0 28px; padding:34px; overflow:hidden; border:1px solid rgba(147,189,255,.28); border-radius:22px; color:#fff; background:linear-gradient(118deg,rgba(18,46,93,.95),rgba(17,20,62,.92) 58%,rgba(79,35,121,.85)); box-shadow:0 20px 45px rgba(0,0,0,.17); }.platinum-hero h1 { font-size:clamp(31px,5vw,48px); }.platinum-hero > div > p:not(.eyebrow) { max-width:600px; margin-top:10px; color:#c9d9f5; line-height:1.65; font-size:14px; }.platinum-hero-total { position:relative; display:flex; align-items:center; gap:12px; flex:none; min-width:205px; padding:14px 17px; overflow:hidden; border:1px solid rgba(219,235,255,.4); border-radius:15px; color:#fff; background:linear-gradient(135deg,rgba(5,14,43,.65),rgba(105,62,178,.22)); box-shadow:inset 0 0 24px rgba(140,193,255,.14),0 0 35px rgba(99,79,255,.16); }.platinum-hero-total::after { content:''; position:absolute; width:96px; height:96px; right:-41px; top:-45px; border-radius:50%; background:radial-gradient(circle,rgba(214,232,255,.22),transparent 67%); }.platinum-hero-icon { display:grid; place-items:center; position:relative; z-index:1; width:50px; height:50px; border:1px solid rgba(231,243,255,.47); border-radius:13px; color:#edf4ff; background:linear-gradient(145deg,rgba(180,214,255,.34),rgba(112,93,255,.24)); font-size:25px; text-shadow:0 0 16px rgba(204,229,255,.85); }.platinum-hero-number { position:relative; z-index:1; display:grid; gap:3px; }.platinum-hero-number strong { font:700 32px 'Space Grotesk'; line-height:1; }.platinum-hero-number small { color:#c8d9f5; font-size:10px; white-space:nowrap; }
.platinum-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:26px; }.platinum-search { display:flex; align-items:center; flex:1; min-width:210px; gap:9px; padding:0 13px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(14,30,56,.7); }.platinum-search input { width:100%; padding:11px 0; border:0; outline:0; color:var(--text); background:transparent; font:inherit; font-size:13px; }.platinum-search input::placeholder { color:var(--muted); }.platform-filters { display:flex; gap:6px; }.filter-button { min-height:39px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:rgba(14,30,56,.7); font-size:12px; font-weight:700; }.filter-button:hover,.filter-button.active { color:#061225; border-color:#dcecff; background:#dcecff; }.platinum-toolbar > p { min-width:130px; margin:0; color:var(--muted); text-align:right; font-size:12px; }
.platinum-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.platinum-game-card { position:relative; display:flex; min-width:0; gap:16px; padding:16px; overflow:hidden; border:1px solid var(--line); border-radius:16px; color:var(--text); background:linear-gradient(135deg,rgba(22,45,83,.88),rgba(12,24,47,.92)); text-align:left; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }.platinum-game-card::after { content:''; position:absolute; right:-44px; bottom:-68px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(104,148,255,.18),transparent 68%); pointer-events:none; }.platinum-game-card:hover { z-index:1; border-color:rgba(183,213,255,.65); box-shadow:0 16px 30px rgba(0,0,0,.26); transform:translateY(-5px); }.platinum-game-card:focus-visible { outline:3px solid #91c3ff; outline-offset:3px; }.platinum-game-card img { width:90px; height:90px; flex:none; border:1px solid rgba(215,232,255,.23); border-radius:13px; object-fit:cover; box-shadow:0 8px 18px rgba(0,0,0,.27); }.platinum-card-copy { min-width:0; padding-right:18px; }.platform-badges { display:flex; flex-wrap:wrap; gap:5px; min-height:19px; }.platform-badges span { padding:3px 7px; border-radius:5px; color:#dbeaff; background:#061024; font-size:9px; font-weight:800; letter-spacing:.04em; }.platinum-card-copy h2 { margin-top:5px; overflow:hidden; font-size:17px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.platinum-card-trophy { margin-top:5px; overflow:hidden; color:#b9caf0; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.platinum-card-date { margin-top:9px; color:var(--muted); font-size:10px; }.card-platinum-mark { position:absolute; right:14px; top:12px; color:#e3ecff; font-size:18px; text-shadow:0 0 14px rgba(165,204,255,.6); }
.platinum-dialog { width:min(600px,calc(100% - 28px)); padding:0; overflow:hidden; border:1px solid rgba(136,183,255,.48); border-radius:20px; color:var(--text); background:var(--panel); box-shadow:0 30px 90px rgba(0,0,0,.58); }.platinum-dialog::backdrop { background:rgba(2,8,20,.76); backdrop-filter:blur(5px); }.platinum-dialog-content { position:relative; padding:31px; }.platinum-dialog-icon { width:115px; height:115px; float:right; margin:0 0 20px 22px; border:1px solid rgba(216,231,255,.35); border-radius:17px; object-fit:cover; box-shadow:0 12px 26px rgba(0,0,0,.3); }.platinum-dialog h2 { max-width:calc(100% - 140px); font-size:28px; }.platinum-dialog-trophy { margin-top:8px; color:#9fc7ff; font:600 16px 'Space Grotesk'; }.platinum-dialog-description { clear:both; padding-top:18px; color:var(--muted); line-height:1.6; font-size:14px; }.platinum-dialog-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 17px; }.platinum-dialog-stats div { padding:11px; border:1px solid var(--line); border-radius:10px; background:rgba(6,16,36,.26); }.platinum-dialog-stats dt { color:var(--muted); font-size:10px; }.platinum-dialog-stats dd { margin:4px 0 0; font:700 13px 'Space Grotesk'; }.platinum-breakdown { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; }.platinum-breakdown div { display:grid; justify-items:center; gap:3px; padding:12px 5px; border-right:1px solid var(--line); }.platinum-breakdown div:last-child { border:0; }.platinum-breakdown span { font-size:16px; }.platinum-breakdown strong { font:700 16px 'Space Grotesk'; }.platinum-breakdown small { color:var(--muted); font-size:9px; }.platinum-breakdown .platinum span { color:#e6efff; }.platinum-breakdown .gold span { color:#ffcc4b; }.platinum-breakdown .silver span { color:#a9bfdc; }.platinum-breakdown .bronze span { color:#d68d67; }.hours-note { margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }.light-theme .platinum-page { background:radial-gradient(circle at 76% 8%,rgba(97,132,255,.13),transparent 28%),var(--navy); }.light-theme .platinum-search,.light-theme .filter-button,.light-theme .admin-link { background:#fff; }.light-theme .admin-link { color:#13223b; }.light-theme .platinum-game-card { background:linear-gradient(135deg,#fff,#edf4ff); }.light-theme .platinum-card-trophy { color:#55749f; }.light-theme .platform-badges span { color:#fff; background:#173d72; }.light-theme .platinum-dialog { background:#fff; }.light-theme .platinum-dialog-stats div { background:#f3f7ff; }
@media (max-width:720px) { .platinum-hero { align-items:flex-start; padding:25px; }.platinum-hero-total { min-width:0; padding:11px; }.platinum-hero-icon { width:43px; height:43px; font-size:22px; }.platinum-hero-number strong { font-size:27px; }.platinum-hero-number small { font-size:9px; }.platinum-toolbar { flex-wrap:wrap; }.platinum-search { flex-basis:100%; }.platinum-toolbar > p { margin-left:auto; }.platinum-grid { grid-template-columns:1fr; }.platinum-dialog-content { padding:24px; }.platinum-dialog h2 { font-size:24px; }.platinum-dialog-stats { grid-template-columns:1fr; }.platinum-dialog-icon { width:94px; height:94px; } }
@media (max-width:420px) { .platinum-hero { gap:14px; padding:21px; }.platinum-hero-total { gap:7px; padding:8px; }.platinum-hero-icon { width:36px; height:36px; border-radius:10px; font-size:19px; }.platinum-hero-number strong { font-size:23px; }.platinum-hero-number small { display:none; }.platform-filters { width:100%; }.filter-button { flex:1; }.platinum-toolbar > p { width:100%; text-align:left; }.platinum-game-card { gap:12px; padding:13px; }.platinum-game-card img { width:76px; height:76px; }.platinum-card-copy h2 { font-size:15px; }.platinum-dialog-icon { float:none; display:block; margin:0 0 18px; }.platinum-dialog h2 { max-width:none; }.platinum-dialog-stats { grid-template-columns:repeat(2,1fr); } }