*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #1a1a2e;--secondary: #16213e;--accent: #0f3460;--highlight: #e94560;--text: #f1f1f1;--text-secondary: #a0a0a0;--border: #2a2a3e;--success: #4caf50;--error: #f44336}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--primary);color:var(--text);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem}header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--highlight),#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1rem}.demo-notice{background:var(--accent);border:2px solid var(--highlight);border-radius:8px;padding:1rem 1.5rem;margin-top:1.5rem;display:inline-flex;align-items:center;gap:.75rem;color:var(--text);font-size:.95rem}.demo-icon{font-size:1.5rem}.demo-notice strong{color:var(--highlight)}.card{background:var(--secondary);border-radius:12px;padding:1.5rem;margin-bottom:2rem;border:1px solid var(--border)}.card h2{margin-bottom:1rem;color:var(--text);font-size:1.5rem}.loading{color:var(--text-secondary);text-align:center;padding:2rem}.error{color:var(--error);text-align:center;padding:1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}.stat{background:var(--accent);padding:1rem;border-radius:8px;display:flex;flex-direction:column;gap:.5rem}.stat-label{color:var(--text-secondary);font-size:.9rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text)}.stat-value.positive{color:var(--success)}.stat-value.negative{color:var(--error)}.most-played{background:linear-gradient(135deg,var(--accent),var(--secondary));padding:1.5rem;border-radius:12px;margin-top:1rem;border:2px solid var(--highlight)}.most-played-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.trophy-icon{font-size:1.5rem}.most-played h3{font-size:1rem;color:var(--text-secondary);margin:0}.most-played-content{display:flex;justify-content:space-between;align-items:center}.most-played-game{font-size:1.25rem;font-weight:700;color:var(--text)}.most-played-time{font-size:1.5rem;font-weight:700;color:var(--highlight)}.tabs{display:flex;gap:.5rem;margin-bottom:1rem}.tab-btn{background:var(--accent);color:var(--text);border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s}.tab-btn:hover,.tab-btn.active{background:var(--highlight)}.games-list{display:flex;flex-direction:column;gap:.75rem}.game-item{display:flex;align-items:center;gap:1rem;background:var(--accent);padding:.75rem;border-radius:8px;transition:transform .2s}.game-item:hover{transform:translate(4px)}.rank{font-weight:700;color:var(--highlight);min-width:2rem;font-size:1.1rem}.game-icon{width:32px;height:32px;border-radius:4px;object-fit:cover}.game-info{display:flex;justify-content:space-between;align-items:center;flex:1;gap:1rem}.game-name{flex:1}.game-time{color:var(--text-secondary);font-weight:700}.trends-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.trend-item{display:grid;grid-template-columns:100px 1fr 80px;gap:1rem;align-items:center}.trend-date{font-size:.9rem;color:var(--text-secondary)}.trend-bar-container{background:var(--accent);height:24px;border-radius:4px;overflow:hidden}.trend-bar{background:linear-gradient(90deg,var(--highlight),#ff6b9d);height:100%;transition:width .3s}.trend-value{text-align:right;font-weight:700}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;background:var(--accent);padding:1rem;border-radius:8px}.stat-item{display:flex;flex-direction:column;gap:.25rem}.stat-item span{color:var(--text-secondary);font-size:.9rem}.trends-summary{background:var(--accent);padding:1.5rem;border-radius:8px}.trend-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem}.trend-period{text-align:center}.trend-period h3{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem;font-weight:400}.trend-value-large{font-size:2rem;font-weight:700;color:var(--text)}.streaks-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:1rem}.streak-stat{background:var(--accent);padding:1.5rem;border-radius:8px;text-align:center}.streak-label{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}.streak-value{font-size:2rem;font-weight:700;color:var(--text)}.streak-note{text-align:center;color:var(--text-secondary);font-size:.9rem;font-style:italic}.game-streaks-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.game-streak-item{background:linear-gradient(135deg,var(--accent),var(--secondary));padding:1.25rem;border-radius:10px;border:1px solid var(--border);transition:transform .2s,box-shadow .2s}.game-streak-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e9456033}.game-streak-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.streak-game-icon{width:40px;height:40px;border-radius:6px;object-fit:cover}.game-streak-name{font-weight:700;color:var(--text);font-size:1.05rem}.game-streak-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.streak-stat-item{display:flex;flex-direction:column;gap:.25rem}.streak-label{color:var(--text-secondary);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.streak-number{color:var(--highlight);font-size:1.25rem;font-weight:700}.pagination{display:flex;align-items:center;gap:1rem}.pagination-btn{background:var(--highlight);color:var(--text);border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s;font-weight:500}.pagination-btn:hover:not(:disabled){opacity:.8}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.pagination-info{color:var(--text-secondary);font-size:.9rem}.pagination-controls-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem;background:var(--accent);border-radius:8px;flex-wrap:wrap;gap:1rem}.per-page-selector{color:var(--text-secondary);font-size:.9rem;display:flex;align-items:center;gap:.5rem}.per-page-selector select{background:var(--secondary);color:var(--text);border:1px solid var(--border);padding:.5rem;border-radius:6px;cursor:pointer}.heatmap-controls{display:flex;justify-content:flex-end;margin-bottom:1rem}.heatmap-controls label{color:var(--text-secondary);font-size:.9rem}.heatmap-controls select{background:var(--accent);color:var(--text);border:1px solid var(--border);padding:.5rem;border-radius:6px;margin-left:.5rem;cursor:pointer}.heatmap-container{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1rem}.heatmap-month{background:var(--accent);padding:1rem;border-radius:8px}.heatmap-month-label{font-weight:700;color:var(--text);margin-bottom:.75rem;font-size:1rem}.heatmap-month-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}.heatmap-day{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;transition:transform .2s;border:1px solid rgba(0,0,0,.1)}.heatmap-day:hover{transform:scale(1.1);z-index:10}.heatmap-date{color:#333;font-weight:700;text-shadow:0 0 2px rgba(255,255,255,.5)}.heatmap-legend{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.legend-colors{display:flex;gap:4px}.legend-colors div{width:20px;height:20px;border-radius:3px}.search-container{margin-bottom:1rem}.search-input{width:100%;padding:.75rem;background:var(--accent);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem}.search-input:focus{outline:none;border-color:var(--highlight)}#search-results{display:flex;flex-direction:column;gap:.5rem}.search-result-item{display:flex;align-items:center;gap:1rem;background:var(--accent);padding:.75rem;border-radius:8px;cursor:pointer;transition:background .3s}.search-result-item:hover{background:var(--highlight)}.search-result-item img{width:32px;height:32px;border-radius:4px}.no-results{text-align:center;color:var(--text-secondary);padding:1rem}.game-actions-modal{max-width:400px}.game-actions{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.action-btn{background:var(--highlight);color:var(--text);border:none;padding:1rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:opacity .3s}.action-btn:hover{opacity:.8}.comparison-info{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem}.no-comparison{text-align:center;color:var(--text-secondary);padding:2rem;font-style:italic}.comparison-games-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.comparison-game-tag{background:var(--accent);padding:.5rem 1rem;border-radius:20px;display:flex;align-items:center;gap:.5rem}.comparison-game-tag .remove-btn{background:var(--highlight);border:none;color:var(--text);width:20px;height:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}.comparison-game-tag .remove-btn:hover{opacity:.8}.comparison-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.comparison-controls label{color:var(--text-secondary);font-size:.9rem;display:flex;align-items:center;gap:.5rem}.comparison-controls select{background:var(--accent);color:var(--text);border:1px solid var(--border);padding:.5rem;border-radius:6px;cursor:pointer}.compare-btn{background:var(--highlight);color:var(--text);border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:opacity .3s}.compare-btn:hover{opacity:.8}.comparison-results{margin-top:1rem}.comparison-results h3{margin-bottom:1rem;color:var(--text)}.comparison-date-row{margin-bottom:1.5rem;background:var(--accent);padding:1rem;border-radius:8px}.comparison-date{font-weight:700;margin-bottom:.75rem;color:var(--highlight)}.comparison-bars{display:flex;flex-direction:column;gap:.5rem}.comparison-bar-row{display:grid;grid-template-columns:150px 1fr 80px;gap:1rem;align-items:center}.comparison-game-label{font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comparison-bar-container{background:var(--secondary);height:24px;border-radius:4px;overflow:hidden}.comparison-bar{background:linear-gradient(90deg,var(--highlight),#ff6b9d);height:100%;transition:width .3s;min-width:2px}.comparison-value{text-align:right;font-weight:700;font-size:.9rem}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--secondary);border-radius:12px;padding:2rem;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text);font-size:2rem;cursor:pointer;line-height:1}.game-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.5rem 0}.game-history{display:flex;flex-direction:column;gap:.5rem}.history-item{display:flex;justify-content:space-between;background:var(--accent);padding:.5rem .75rem;border-radius:6px}footer{text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-secondary)}footer a{color:var(--highlight);text-decoration:none;margin-left:.5rem}footer a:hover{text-decoration:underline}@media (max-width: 768px){.container{padding:1rem}header h1{font-size:2rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.trend-item{grid-template-columns:80px 1fr 60px;gap:.5rem}.heatmap-month-grid{grid-template-columns:repeat(auto-fill,minmax(30px,1fr))}.pagination-controls-top{flex-direction:column;align-items:stretch}.pagination{flex-direction:column;gap:.5rem}.pagination-info{order:-1;text-align:center}}