:root{--bg: #0f0f1a;--card-bg: #1e1e30;--card-hover: #2a2a42;--accent: #e4000f;--accent-gold: #d4a017;--text: #e8e8f0;--text-dim: #8888a0;--border: #333355;--radius: 10px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;min-height:100vh}.header{background:linear-gradient(180deg,#1a1a35 0%,var(--bg) 100%);border-bottom:2px solid var(--accent);padding:16px 40px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.header__logo{display:flex;align-items:center;gap:12px}.header__icon{width:40px;height:40px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:700}.header__title{font-size:22px;font-weight:700;letter-spacing:1px}.header__title span{color:var(--accent)}.header__count{font-size:13px;color:var(--text-dim);background:var(--card-bg);padding:6px 14px;border-radius:20px;border:1px solid var(--border)}.search-bar{max-width:1320px;margin:24px auto 0;padding:0 40px}.search-bar__wrapper{position:relative;display:inline-block}.search-bar__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:15px;pointer-events:none}.search-bar__input{width:360px;max-width:100%;padding:12px 20px 12px 42px;background:var(--card-bg);border:1px solid var(--border);border-radius:24px;color:var(--text);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}.search-bar__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e4000f26}.search-bar__input::placeholder{color:var(--text-dim)}.main{max-width:1320px;margin:0 auto;padding:28px 40px 60px}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.game-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px 12px 18px;cursor:pointer;text-align:center;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-gold));opacity:0;transition:opacity .2s}.game-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 30px #e4000f33;background:var(--card-hover)}.game-card:hover:before{opacity:1}.game-card__icon{width:50px;height:50px;margin:0 auto 12px;background:linear-gradient(135deg,#2a2a50,#1a1a38);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid var(--border)}.game-card__name{font-size:14px;font-weight:500;color:var(--text);line-height:1.3}.empty-state{display:none;text-align:center;padding:60px 20px;color:var(--text-dim)}.empty-state--visible{display:block}.empty-state__icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state__text{font-size:15px}.filter-tags{display:flex;gap:8px;align-items:center;margin-top:16px}.filter-tag{padding:6px 16px;font-size:13px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s;font-family:inherit}.filter-tag:hover{border-color:var(--accent);color:var(--text)}.filter-tag--active{background:var(--accent);border-color:var(--accent);color:#fff}.game-card__recent{display:inline-block;margin-top:6px;padding:2px 8px;font-size:10px;color:var(--accent-gold);background:#d4a0171a;border-radius:8px;border:1px solid rgba(212,160,23,.2)}@media (max-width: 768px){.header{padding:12px 16px}.header__title{font-size:18px}.search-bar{padding:0 16px}.search-bar__input{width:100%}.main{padding:20px 16px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}}.detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#050512bf;z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}.detail-backdrop--visible{opacity:1}.detail-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:480px;max-width:90vw;max-height:85vh;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;z-index:210;box-shadow:0 20px 60px #0009;display:flex;flex-direction:column;overflow:hidden;opacity:0;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}.detail-modal--visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.detail-modal__header{padding:32px 32px 0;text-align:center;position:relative}.detail-modal__close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}.detail-modal__close:hover{background:#ffffff14;color:var(--text)}.detail-modal__icon{width:80px;height:80px;margin:0 auto 16px;background:linear-gradient(135deg,#2a2a50,#1a1a38);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:40px;border:1px solid var(--border);box-shadow:0 4px 20px #0000004d}.detail-modal__title{font-size:22px;font-weight:700;margin-bottom:8px}.detail-modal__subtitle{font-size:13px;color:var(--text-dim)}.detail-modal__recent-tag{display:inline-block;margin-top:10px;padding:4px 14px;font-size:12px;color:var(--accent-gold);background:#d4a0171f;border:1px solid rgba(212,160,23,.25);border-radius:12px}.detail-modal__recent-time{font-size:12px;color:var(--text-dim);margin-top:4px}.detail-modal__controls{padding:24px 32px;flex:1;overflow-y:auto}.controls-title{font-size:13px;font-weight:600;color:var(--text-dim);letter-spacing:1px;margin-bottom:14px;display:flex;align-items:center;gap:8px;text-transform:uppercase}.controls-title:before{content:"";display:inline-block;width:3px;height:14px;background:var(--accent);border-radius:2px}.controls-table{display:grid;grid-template-columns:1fr 1fr;gap:8px}.control-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ffffff08;border-radius:8px;border:1px solid rgba(255,255,255,.04)}.control-row__label{font-size:14px;display:flex;align-items:center;gap:8px}.control-row__key{font-family:monospace;font-size:12px;color:var(--accent-gold);background:var(--bg);padding:4px 10px;border-radius:6px;border:1px solid var(--border);min-width:56px;text-align:center;white-space:nowrap}.detail-modal__footer{padding:20px 32px 28px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:12px}.btn-start{display:block;width:100%;padding:14px 24px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,var(--accent),#b0000d);color:#fff;box-shadow:0 4px 16px #e4000f4d;transition:transform .1s,box-shadow .2s}.btn-start:hover{box-shadow:0 6px 24px #e4000f66}.btn-start:active{transform:scale(.97)}.btn-start:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}.footer-hint{text-align:center;font-size:12px;color:var(--text-dim)}.footer-hint kbd{display:inline-block;padding:2px 6px;font-family:monospace;font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text-dim)}@media (max-width: 500px){.detail-modal{max-width:95vw;max-height:90vh}.detail-modal__header{padding:24px 20px 0}.detail-modal__controls{padding:16px 20px}.detail-modal__footer{padding:16px 20px 20px}.controls-table{grid-template-columns:1fr}}