*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',sans-serif;background:#1a1a2e;color:#e0e0e0;min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:2rem}
header{text-align:center;margin-bottom:2rem}
header h1{font-size:2.5rem;color:#66c0f4}
header p{color:#aaa;margin-top:.5rem}
.search-box{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}
.search-box input{width:400px;padding:.75rem 1rem;background:#16213e;border:1px solid #0f3460;color:#fff;border-radius:8px;font-size:1rem}
.search-box button{padding:.75rem 1.5rem;background:#66c0f4;color:#1a1a2e;border:none;border-radius:8px;font-weight:bold;cursor:pointer;font-size:1rem;transition:background .2s}
.search-box button:hover{background:#4fa3d4}
.hint{text-align:center;color:#777;font-size:.85rem}
.hint a{color:#66c0f4}
#profile-bar{display:flex;align-items:center;gap:1rem;background:#16213e;border:1px solid #0f3460;border-radius:10px;padding:.75rem 1rem;margin-bottom:1rem;animation:fadeIn .3s ease}
#profile-avatar{width:48px;height:48px;border-radius:8px;flex-shrink:0;object-fit:cover}
#profile-name{font-weight:600;color:#e0e0e0;font-size:1rem}
#profile-steamid{font-size:.75rem;color:#555;margin-top:.15rem}
#privacy-banner{display:flex;align-items:center;gap:1rem;background:#2a2200;border:1px solid #665500;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.88rem;color:#ffd95e;animation:fadeIn .3s ease}
#privacy-banner span{flex:1;line-height:1.5}
#privacy-banner strong{color:#ffe680}
#privacy-banner.persistent{background:#3a1500;border-color:#cc4400;color:#ff9955}
#privacy-banner.persistent strong{color:#ffbb88}
#privacy-dismiss{background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;padding:0 .25rem;flex-shrink:0;opacity:.7}
#privacy-dismiss:hover{opacity:1}
#share-strip{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;font-size:.85rem;flex-wrap:wrap}
#share-strip span:first-child{color:#888;white-space:nowrap}
#share-url{color:#66c0f4;word-break:break-all;flex:1}
#copy-btn{padding:.35rem .85rem;background:#0f3460;border:1px solid #66c0f4;color:#66c0f4;border-radius:6px;cursor:pointer;font-size:.8rem;white-space:nowrap;transition:all .2s}
#copy-btn:hover{background:#66c0f4;color:#1a1a2e}
.view-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid #0f3460;padding-bottom:.75rem}
.tab-btn{padding:.5rem 1.2rem;background:transparent;border:1px solid #0f3460;color:#aaa;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}
.tab-btn.active{background:#0f3460;color:#66c0f4;border-color:#66c0f4;font-weight:bold}
.tab-btn:hover:not(.active){border-color:#66c0f4;color:#ddd}
.games-toolbar{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.games-toolbar input[type="text"]{flex:1;min-width:160px;padding:.65rem 1rem;background:#16213e;border:1px solid #0f3460;color:#fff;border-radius:8px;font-size:.9rem}
.sort-select{padding:.65rem 1rem;background:#16213e;border:1px solid #0f3460;color:#e0e0e0;border-radius:8px;font-size:.9rem;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2366c0f4' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.2rem}
.sort-select:focus{border-color:#66c0f4}
#games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.game-card{background:#16213e;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #0f3460}
.game-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(102,192,244,.2)}
.game-img-wrap{width:100%;height:85px;position:relative;background:linear-gradient(135deg,#0f3460,#16213e);overflow:hidden}
.game-img-wrap img{width:100%;height:100%;display:block;object-fit:cover}
.game-img-wrap.img-missing::after{content:'\1F3AE';font-size:2.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.2}
.game-card .info{padding:.6rem}
.game-card .name{font-size:.85rem;font-weight:600;color:#e0e0e0;line-height:1.3}
.game-card .hrs{font-size:.72rem;color:#66c0f4;margin-top:.2rem}
.game-card .pct-badge{font-size:.72rem;color:#aaa;margin-top:.25rem}
#leaderboard-list{display:flex;flex-direction:column;gap:.6rem}
.lb-row{display:flex;align-items:center;gap:1rem;background:#16213e;border-radius:10px;padding:.75rem 1rem;border:1px solid #0f3460;cursor:pointer;transition:transform .15s}
.lb-row:hover{transform:translateX(4px);border-color:#66c0f4}
.lb-rank{font-size:1.1rem;font-weight:bold;width:36px;text-align:center;flex-shrink:0}
.lb-rank.gold{color:#ffd700}.lb-rank.silver{color:#c0c0c0}.lb-rank.bronze{color:#cd7f32}
.lb-icon{width:40px;height:40px;border-radius:6px;flex-shrink:0;object-fit:cover}
.lb-info{flex:1;min-width:0}
.lb-name{font-weight:600;color:#e0e0e0;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stats{font-size:.78rem;color:#888;margin-top:.2rem}
.lb-bar-wrap{width:160px;flex-shrink:0}
.lb-bar-bg{background:#0f3460;border-radius:999px;height:8px;overflow:hidden}
.lb-bar-fill{height:100%;background:#66c0f4;border-radius:999px}
.lb-pct{font-size:.8rem;color:#66c0f4;text-align:right;margin-top:.25rem;font-weight:bold}
.lb-row.complete{border-color:#ffd700}
.lb-row.complete .lb-bar-fill{background:#ffd700}
.lb-row.complete .lb-pct{color:#ffd700}
#recent-list{display:flex;flex-direction:column;gap:.6rem}
.recent-row{display:flex;align-items:center;gap:1rem;background:#16213e;border-radius:10px;padding:.75rem 1rem;border:1px solid #0f3460}
.recent-game-icon{width:36px;height:36px;border-radius:4px;flex-shrink:0;object-fit:cover}
.recent-info{flex:1;min-width:0}
.recent-ach{font-weight:600;color:#e0e0e0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-game{font-size:.78rem;color:#888}
.recent-date{font-size:.78rem;color:#66c0f4;flex-shrink:0}
.progress-bar-container{background:#16213e;border-radius:999px;height:18px;overflow:hidden;margin:1rem 0 .5rem}
#progress-bar{height:100%;background:#66c0f4;transition:width .5s;border-radius:999px}
#progress-label{color:#aaa;font-size:.9rem;margin-bottom:1rem}
.ach-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.filters{display:flex;gap:.5rem}
.filter-btn{padding:.45rem 1rem;background:#16213e;border:1px solid #0f3460;color:#aaa;border-radius:6px;cursor:pointer;transition:all .2s}
.filter-btn.active{background:#66c0f4;color:#1a1a2e;border-color:#66c0f4;font-weight:bold}
#achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.achievement-card{background:#16213e;border-radius:10px;padding:1rem;display:flex;gap:1rem;align-items:flex-start;border:1px solid #0f3460}
.achievement-card.locked{opacity:.45}
.achievement-card img{width:64px;height:64px;border-radius:6px;flex-shrink:0;object-fit:cover}
.ach-name{font-weight:600;color:#e0e0e0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.ach-desc{font-size:.8rem;color:#888;margin-top:.25rem}
.ach-date{font-size:.75rem;color:#66c0f4;margin-top:.4rem}
.ach-rarity{display:inline-block;margin-top:.4rem;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:bold;letter-spacing:.02em}
.rarity-common{background:#2a2a3e;color:#aaa;border:1px solid #444}
.rarity-uncommon{background:#1a3a1a;color:#5cb85c;border:1px solid #5cb85c}
.rarity-rare{background:#1a2a3e;color:#66c0f4;border:1px solid #66c0f4}
.rarity-epic{background:#2a1a3e;color:#b07fe8;border:1px solid #b07fe8}
.rarity-legendary{background:#3e2a00;color:#ffd700;border:1px solid #ffd700}
.tab-loading{text-align:center;padding:3rem}
.spinner{width:36px;height:36px;margin:0 auto;border:3px solid #0f3460;border-top-color:#66c0f4;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#back-btn{padding:.65rem 1.25rem;background:#66c0f4;color:#1a1a2e;border:none;border-radius:8px;font-weight:bold;cursor:pointer;font-size:.95rem;margin-bottom:1.25rem;transition:background .2s}
#back-btn:hover{background:#4fa3d4}
footer{text-align:center;margin-top:4rem;padding-top:1.5rem;border-top:1px solid #0f3460;font-size:.8rem;color:#555}
footer a{color:#66c0f4;text-decoration:none}
footer a:hover{text-decoration:underline}
.hidden{display:none!important}
#loading{text-align:center;padding:3rem;font-size:1.2rem;color:#66c0f4}
#error-msg{text-align:center;padding:1.25rem 2rem;color:#ff6b6b;background:#2a1a1a;border-radius:8px;margin-top:1rem}
h2{margin-bottom:1rem;color:#66c0f4}
#game-count{font-size:1rem;color:#aaa;font-weight:normal}
@media(max-width:600px){
  header h1{font-size:1.75rem}
  .search-box{flex-direction:column;align-items:stretch}
  .search-box input{width:100%}
  .lb-bar-wrap{display:none}
  .ach-controls{flex-direction:column;align-items:flex-start}
  .view-tabs{flex-wrap:wrap}
}