:root{--bg-base:#0a0e17;--bg-surface:#111726;--bg-card:#131b2c;--bg-input:#0b111e;--bg-elevated:#1a243b;--border-subtle:#1e293b;--border-strong:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#38bdf8;--accent-hover:#0ea5e9;--status-online:#38bdf8;--status-ingame:#84cc16;--status-away:#f59e0b;--status-offline:#64748b;--danger:#ef4444;--success:#22c55e;--radius-xl:12px;--radius-lg:10px;--radius-md:6px;--radius-sm:4px;--shadow-card:0 8px 24px #00000073}*{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:clip}body{background-color:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;padding:2rem 1rem 3rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.container{width:100%;max-width:860px;margin:0 auto}.hero{text-align:center;margin-bottom:1.5rem}.hero-badge{display:inline-flex;color:var(--accent);background:#0f1c2e;border:1px solid #1e385b;border-radius:999px;align-items: center;gap:.5rem;margin-bottom:.75rem;padding:.3rem .85rem;font-size:.78rem;font-weight:600}.hero h1{letter-spacing:-.025em;color:#fff;margin-bottom:.35rem;font-size:1.95rem;font-weight:800}.hero p{color:var(--text-secondary);max-width:560px;margin:0 auto;font-size:.92rem}.search-wrapper{width:100%;margin-bottom:1.25rem}.search-form{display:flex;align-items:stretch;gap:.5rem;width:100%}.search-input-group{position:relative;display:flex;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex:1;align-items: center;min-width:0;height:42px;transition:border-color .15s}.search-input-group:focus-within{border-color:var(--accent)}.search-icon{position:absolute;color:var(--text-muted);pointer-events:none;z-index:2;width:16px;height:16px;left:.85rem}.search-input-group input{color:var(--text-primary);outline:none;background:0 0;border:none;width:100%;height:100%;padding:0 2.2rem 0 2.4rem;font-size:.9rem}.clear-input-btn{position:absolute;color:var(--text-muted);cursor:pointer;display:flex;z-index:2;background:0 0;border:none;border-radius:4px;justify-content:center;align-items: center;padding:.25rem;right:.65rem}.clear-input-btn:hover{color:var(--text-primary);background:#1e293b}.btn-lookup{color:#fff;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;background:#0284c7;border:none;flex-shrink:0;align-items: center;gap:.45rem;height:42px;padding:0 1.25rem;transition:background-color .15s;font-size:.88rem;font-weight:600}.btn-lookup:hover{background:#0369a1}.btn-lookup:active{transform:translateY(1px)}.history-dropdown{display:none;position:absolute;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);z-index:2000;overflow-y:auto;max-height:280px;top:calc(100% + 5px);left:0;right:0;box-shadow:0 16px 36px #000000bf}.history-dropdown.open{display:block}.history-dropdown-header{display:flex;border-bottom:1px solid var(--border-subtle);color:var(--text-muted);text-transform:uppercase;justify-content:space-between;align-items: center;padding:.55rem .85rem;font-size:.72rem;font-weight:700}.clear-all-history-btn{color:var(--text-muted);cursor:pointer;text-decoration:underline;background:0 0;border:none;font-size:.72rem}.clear-all-history-btn:hover{color:var(--danger)}.history-item{display:flex;cursor:pointer;border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items: center;padding:.55rem .85rem}.history-item:last-child{border-bottom:none}.history-item:hover{background:var(--bg-elevated)}.history-item-left{display:flex;align-items: center;gap:.6rem;min-width:0}.history-item-left img{border-radius:50%;flex-shrink:0;width:22px;height:22px}.history-item-text{display:flex;flex-direction:column;min-width:0}.history-item-name{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;font-weight:600}.history-item-id{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem}.history-delete-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.2rem .4rem;font-size:.85rem}.history-delete-btn:hover{color:var(--danger)}.alert{display:none;border-radius:var(--radius-md);color:#fca5a5;background:#2a1215;border:1px solid #5c1d24;align-items: center;gap:.6rem;margin-bottom:1rem;padding:.8rem 1rem;font-size:.85rem}.alert.error{display:flex}.results-wrapper{display:none;width:100%}.results-wrapper.visible{display:block}.profile-table-card{position:relative;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);width:100%}.profile-top-bar{position:sticky;z-index:40;display:flex;border-bottom:1px solid var(--border-subtle);border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);background:#111a28;justify-content:space-between;align-items: center;padding:.9rem 1.25rem;top:0;box-shadow:0 4px 16px #0006}.profile-identity{display:flex;align-items: center;gap:.9rem;min-width:0}.avatar-wrap{position:relative;flex-shrink:0;width:54px;height:54px}.avatar-base-img{position:relative;object-fit:cover;border:1px solid var(--border-subtle);background:var(--bg-input);z-index:1;border-radius:0;width:54px;height:54px}.avatar-frame-overlay{position:absolute;pointer-events:none;z-index:2;object-fit:contain;width:124%;height:124%;top:-12%;left:-12%}.profile-title-group{display:flex;flex-direction:column;gap:.1rem;min-width:0}.profile-name{color:#fff;letter-spacing:-.01em;word-break:break-word;overflow-wrap:anywhere;font-size:1.22rem;font-weight:500}.profile-sub{color:var(--text-secondary);word-break:break-word;overflow-wrap:anywhere;font-size:.78rem}.embed-section{border-bottom:1px solid var(--border-subtle);background:#101726;width:100%;padding:1.15rem 1.25rem}.embed-header{margin-bottom:.85rem}.embed-title-group h3{color:var(--text-primary);font-size:.9rem;font-weight:700}.embed-subtitle{color:var(--text-muted);font-size:.72rem}.embed-preview-wrapper{display:flex;border:1px solid var(--border-subtle);border-radius:var(--radius-md);position:relative;overflow:hidden;background:#0a0e17;justify-content:center;align-items: center;width:100%;min-height:148px;margin-bottom:.85rem;padding:.9rem}.embed-preview-image{width:100%;min-width:0;max-width:440px;height:auto;transition:opacity .25s;box-shadow:0 4px 20px #0006}.badge-skeleton{display:flex;box-sizing:border-box;background:#0d131f;border:1px solid #1e293b;align-items: center;gap:1.25rem;width:100%;min-width:0;max-width:440px;height:128px;padding:1rem}.skeleton-avatar{animation:1.5s ease-in-out infinite shimmer;background:#162033;flex-shrink:0;width:88px;height:88px}.skeleton-content{display:flex;flex-direction:column;flex:1;gap:.6rem;min-width:0}.skeleton-line{animation:1.5s ease-in-out infinite shimmer;background:#162033;border-radius:4px}.line-title{width:55%;height:16px}.line-sub{width:35%;height:12px}.skeleton-box{animation:1.5s ease-in-out infinite shimmer;background:#141c2c;border-radius:4px;width:100%;height:48px}@keyframes shimmer{0%{opacity:.4}50%{opacity:.85}to{opacity:.4}}.embed-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}.embed-input-box{display:flex;flex-direction:column;gap:.35rem;min-width:0}.embed-input-label{color:var(--text-muted);font-size:.72rem;font-weight:600}.table-responsive{overflow:visible;width:100%}.steam-data-table{border-collapse:collapse;text-align:left;width:100%}.steam-data-table thead th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-subtle);background:#0f1624;padding:.5rem 1rem;font-size:.68rem;font-weight:700}.steam-data-table tbody tr{position:relative;border-bottom:1px solid var(--border-subtle)}.steam-data-table tbody tr:hover,.steam-data-table tbody tr:focus-within{z-index:10;background:#ffffff04}.steam-data-table tr.section-divider td{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;background:#0d1420;padding:.45rem 1rem;font-size:.68rem;font-weight:700}.steam-data-table th.row-label{color:var(--text-primary);vertical-align:middle;padding:.45rem 1rem;font-size:.82rem;font-weight:600}.label-wrapper{display:flex;position:relative;flex-wrap:wrap;align-items: center;gap:.4rem}.label-title{white-space:nowrap}.usage-badge{color:var(--accent);background:#112840;border-radius:999px;padding:.08rem .42rem;font-size:.62rem;font-weight:600}.tooltip-container{position:relative;display:inline-flex;align-items: center}.info-btn{display:inline-flex;color:var(--text-muted);cursor:pointer;position:relative;z-index:1;background:#1e293b;border:1px solid #334155;border-radius:50%;justify-content:center;align-items: center;width:17px;height:17px;transition:all .15s}.info-btn:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.tooltip-content{position:absolute;border-radius:var(--radius-md);color:var(--text-secondary);display:none;z-index:99999;background:#0f172a;border:1px solid #38bdf8;width:260px;padding:.75rem .85rem;font-size:.75rem;line-height:1.45;bottom:calc(100% + 8px);left:0;box-shadow:0 16px 36px #000000d9}.tooltip-content:after{content:"";position:absolute;border:5px solid #0000;border-top-color:#38bdf8;top:100%;left:7px}.tooltip-container:hover .tooltip-content,.tooltip-container:focus-within .tooltip-content{display:block;animation:.15s forwards tooltipFade}@keyframes tooltipFade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tooltip-header{display:flex;border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items: center;gap:.4rem;margin-bottom:.35rem;padding-bottom:.3rem}.tooltip-title{color:#fff;margin:0;font-size:.78rem;font-weight:700}.tooltip-badge{text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:#1e3a5f;border-radius:999px;padding:.08rem .4rem;font-size:.62rem;font-weight:700}.tooltip-body{color:var(--text-secondary);margin-bottom:.45rem}.tooltip-example{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#090d16;padding:.35rem .45rem;font-size:.7rem}.tooltip-example .example-label{display:block;color:var(--text-muted);text-transform:uppercase;margin-bottom:.1rem;font-size:.62rem;font-weight:600}.tooltip-example code{color:#bae6fd;font-family:ui-monospace,SFMono-Regular,monospace}.row-value-cell{vertical-align:middle;padding:.32rem 1rem .32rem .4rem}.field-box{display:flex;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;align-items:stretch;width:100%;height:33px}.field-box:focus-within{border-color:var(--accent)}.field-input{color:var(--accent);outline:none;cursor:text;background:0 0;border:none;flex:1;min-width:0;padding:.35rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.84rem;font-weight:600}.field-input.font-regular{color:var(--text-primary);font-family:inherit;font-weight:500}.field-action-link{display:inline-flex;border-left:1px solid var(--border-subtle);color:var(--accent);text-decoration:none;background:#162238;flex-shrink:0;align-items: center;gap:.3rem;padding:0 .75rem;font-size:.74rem;font-weight:600}.field-action-link:hover{color:#fff;background:#1e3355}.field-copy-btn{display:inline-flex;background:var(--bg-elevated);border:none;border-left:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;flex-shrink:0;justify-content:center;align-items: center;width:34px}.field-copy-btn .icon-check{display:none;color:var(--success)}.field-copy-btn:hover{color:var(--accent);background:#223252}.field-copy-btn.copied{color:var(--success);background:#143521}.field-copy-btn.copied .icon-copy{display:none}.field-copy-btn.copied .icon-check{display:inline-block}.games-section{border-top:1px solid var(--border-subtle);border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);background:#0d1422;width:100%;padding:1.15rem 1.25rem}.games-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:.6rem;margin-bottom:.9rem}.games-title-group{display:flex;flex-direction:column;gap:.15rem}.games-header h3{color:var(--text-primary);font-size:.9rem;font-weight:700}.games-subtitle{color:var(--text-muted);font-size:.72rem}.games-stats-bar{display:flex;align-items: center;gap:.45rem}.stat-pill{color:var(--accent);border:1px solid var(--border-subtle);background:#142033;border-radius:999px;padding:.18rem .55rem;font-size:.7rem;font-weight:600}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.65rem;width:100%}.game-card{display:flex;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;width:100%;transition:transform .12s,border-color .12s}.game-card:hover{border-color:var(--accent);transform:translateY(-2px)}.game-card img{object-fit:cover;background:var(--bg-input);flex-shrink:0;width:95px;height:56px}.game-card-info{display:flex;flex-direction:column;flex:1;justify-content:center;gap:.12rem;min-width:0;padding:.35rem .65rem}.game-card-title{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem;font-weight:600}.game-card-meta{display:flex;color:var(--text-muted);flex-direction:column;gap:.05rem;font-size:.68rem}.game-card-meta .last-played{color:var(--accent)}.game-card-meta .total-hours{color:var(--text-secondary)}.site-footer{text-align:center;border-top:1px solid var(--border-subtle);width:100%;margin-top:2.5rem;padding-top:1.25rem}.site-footer p{color:var(--text-muted);font-size:.76rem;line-height:1.5}.toast{position:fixed;border:1px solid var(--accent);color:var(--text-primary);border-radius:var(--radius-md);opacity:0;pointer-events:none;z-index:20000;display:inline-flex;background:#0f172a;align-items: center;gap:.5rem;padding:.65rem 1rem;transition:all .2s;font-size:.82rem;font-weight:600;bottom:1.5rem;right:1.5rem;transform:translateY(12px);box-shadow:0 12px 30px #000000bf}.toast svg{color:var(--success)}.toast.show{opacity:1;transform:translateY(0)}@media (max-width:640px){body{padding:1.25rem .75rem 2.5rem}.hero h1{font-size:1.6rem}.search-form{flex-direction:column;gap:.5rem}.search-input-group{flex:none;width:100%;height:42px}.btn-lookup{flex:none;justify-content:center;width:100%;height:42px}.profile-top-bar{padding:.75rem .9rem}.avatar-wrap,.avatar-base-img{width:48px;height:48px}.profile-name{font-size:1.1rem}.steam-data-table thead{display:none}.steam-data-table,.steam-data-table tbody,.steam-data-table tr,.steam-data-table td,.steam-data-table th{display:block;width:100%}.steam-data-table tbody tr{padding:.45rem .85rem}.steam-data-table th.row-label{padding:.1rem 0 .25rem}.steam-data-table td.row-value-cell{padding:0}.tooltip-content{width:min(260px,100vw - 48px);max-width:calc(100vw - 48px);left:0}.embed-inputs-grid,.games-grid{grid-template-columns:1fr}}@media (max-width:440px){.badge-skeleton{gap:.75rem;padding:.75rem}.skeleton-avatar{width:64px;height:64px}}