:root{--bg: #0b0d12;--bg-2: #10131a;--panel: #161a24;--panel-2: #1c2130;--border: #262c3b;--border-2: #343b4e;--text: #e8eaf0;--muted: #8d95a8;--faint: #5c6478;--accent: #8b5cf6;--accent-2: #22d3ee;--danger: #f87171;--ok: #34d399;--rating-S: #fbbf24;--rating-A: #34d399;--rating-B: #60a5fa;--rating-C: #fb923c;--rating-D: #f87171;--rating-none: #4b5365;--radius: 14px;--radius-sm: 9px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--display: "Outfit", var(--font);--accent-hover: color-mix(in srgb, var(--accent) 88%, #000);--on-accent: #fff;--on-rating: #0b0d12;--border-strong: color-mix(in srgb, var(--border-2) 70%, var(--muted));--nav-bg: color-mix(in srgb, var(--bg) 78%, transparent);--backdrop: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 55%), var(--bg);color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:var(--backdrop);background-attachment:fixed;color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}img{display:block;max-width:100%}h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0}h1{font-size:30px;font-weight:800}h2{font-size:20px;font-weight:700}h3{font-size:16px;font-weight:700}p{margin:0}.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.grow{flex:1}.stack{display:flex;flex-direction:column;gap:10px}.shell{max-width:1240px;margin:0 auto;padding:0 16px 80px}.nav{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--border)}.nav-inner{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:8px}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;margin-right:8px}.brand-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:15px}.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}.nav-link{padding:7px 12px;border-radius:10px;color:var(--muted);font-weight:500;white-space:nowrap}.nav-link:hover{color:var(--text);background:var(--panel)}.nav-link.active{color:var(--text);background:var(--panel-2)}.nav-spacer{flex:1}.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--panel);cursor:pointer;font-weight:600;font-size:14px;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}.btn:hover{background:var(--panel-2);border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn.primary:hover{background:var(--accent-hover)}.btn.danger{color:var(--danger)}.btn.danger:hover{background:#f871711a;border-color:var(--danger)}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--text);background:var(--panel)}.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}.btn.icon{padding:8px}.input,.select,.textarea{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--text);outline:none;transition:border-color .15s}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent)}.textarea{min-height:80px;resize:vertical}.field{display:flex;flex-direction:column;gap:6px}.field>label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.form-grid .span-2{grid-column:span 2}@media(max-width:520px){.form-grid .span-2{grid-column:span 1}}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 11px;border-radius:999px;border:1px solid var(--border-2);background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);transition:all .12s}.chip:hover{color:var(--text);border-color:var(--border-strong)}.chip.active{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.chip.rating{min-width:38px;justify-content:center;display:inline-flex}.chip.rating.active{background:var(--rc);border-color:var(--rc);color:var(--on-rating)}.segmented{display:inline-flex;align-self:flex-start;width:max-content;border:1px solid var(--border-2);border-radius:10px;overflow:hidden}.segmented button{padding:8px 14px;background:transparent;border:0;cursor:pointer;color:var(--muted);font-weight:600}.segmented button.active{background:var(--panel-2);color:var(--text)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:28px 0 18px}.page-head .sub{color:var(--muted);margin-top:4px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}@media(max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}}.grid.compact{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}.game-card{display:flex;flex-direction:column;gap:8px;position:relative}.game-card .cover-wrap{position:relative;border-radius:var(--radius-sm);overflow:hidden;transition:transform .18s,box-shadow .18s;box-shadow:0 6px 18px #00000059}.game-card:hover .cover-wrap{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px #00000080}.game-card .title{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.game-card .meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}.cover{aspect-ratio:3 / 4;width:100%;object-fit:cover;background:var(--panel-2)}.cover.placeholder{display:grid;place-items:center;padding:8%;text-align:center;font-family:var(--display);font-weight:800;color:#ffffffe6;text-shadow:0 2px 10px rgba(0,0,0,.4);container-type:inline-size}.cover.placeholder span{font-size:clamp(8px,12cqi,26px);line-height:1.1;overflow-wrap:anywhere}.cover.placeholder small{font-size:clamp(6px,7cqi,11px);opacity:.8;font-weight:600;margin-top:4%;display:block}.badge-rating{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--on-rating);background:var(--rc);box-shadow:0 4px 10px #0006}.badge-rating.none{color:var(--text);background:color-mix(in srgb,var(--bg) 85%,transparent);font-size:12px}.badge-corner{position:absolute;top:8px;right:8px;padding:3px 7px;border-radius:7px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--bg) 85%,transparent)}.badge-corner.est{color:var(--muted);border:1px dashed rgba(141,149,168,.6);background:color-mix(in srgb,var(--bg) 70%,transparent)}.hltb{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.hltb .cell{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.hltb .cell .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.hltb .cell .v{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2}.spinner{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent-2);animation:spin .8s linear infinite;vertical-align:-2px;margin-right:4px}@keyframes spin{to{transform:rotate(360deg)}}.hltb-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px}.hltb-hint .chip{cursor:pointer}.hltb-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);cursor:pointer;text-align:left;width:100%;align-items:center}.hltb-item:hover{border-color:var(--accent)}.hltb-item.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.hltb-item .name{font-weight:600;font-size:13.5px}.hltb-item .sub{font-size:11.5px;color:var(--muted);margin-top:2px}.hltb-item .h{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}.platform-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--pc) 18%,transparent);color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);white-space:nowrap}.platform-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--pc)}.rating-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;font-weight:700;background:color-mix(in srgb,var(--rc) 16%,transparent);color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 40%,transparent)}.rating-pill b{font-family:var(--display);font-size:20px}.year-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.year-tabs::-webkit-scrollbar{display:none}.year-tab{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);cursor:pointer;font-family:var(--display);font-weight:700;font-size:15px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:0;min-width:72px}.year-tab small{font-size:11px;font-weight:600;color:var(--faint)}.year-tab.active{color:var(--text);border-color:var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,transparent),var(--panel))}.year-tab.active small{color:var(--accent-2)}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 24px}.toolbar .search{max-width:260px}.month-section{margin-bottom:34px}.month-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;position:relative}.month-head .count{color:var(--muted);font-size:13px}.month-head:after{content:"";flex:1;height:1px;background:var(--border)}.empty{padding:50px 20px;text-align:center;color:var(--muted);border:1px dashed var(--border-2);border-radius:var(--radius)}.detail{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:24px}@media(max-width:760px){.detail{grid-template-columns:1fr}.detail .cover-col{max-width:220px}}.detail .cover-col .cover-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.kv .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.kv .v{font-weight:600;font-size:15px;margin-top:2px}.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.screens img{border-radius:10px;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in}.summary{color:color-mix(in srgb,var(--text) 75%,var(--muted));line-height:1.6}.igdb-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}.igdb-item{display:flex;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);cursor:pointer;text-align:left;align-items:center}.igdb-item:hover{border-color:var(--accent)}.igdb-item.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.igdb-item img,.igdb-item .cover{width:46px;height:62px;object-fit:cover;border-radius:6px;flex:none}.igdb-item .name{font-weight:600;font-size:13.5px;line-height:1.25}.igdb-item .plats{font-size:11px;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notice{padding:12px 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--muted);font-size:13.5px}.notice code{background:var(--panel-2);padding:1px 6px;border-radius:5px;font-size:12.5px}.notice.warn{border-color:#fbbf2466;color:#fcd34d;background:#fbbf240f}.notice.error{border-color:#f8717166;color:var(--danger);background:#f871710f}.hero{border-radius:20px;padding:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,var(--accent-2) 12%,transparent) 60%,var(--panel));border:1px solid var(--border-2);position:relative;overflow:hidden}.hero h1{font-size:clamp(30px,5vw,48px)}.hero .big-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}.big-stat .n{font-family:var(--display);font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1}.big-stat .l{color:var(--muted);font-size:13px;margin-top:4px}.big-stat .d{font-size:12px;margin-top:3px;font-weight:600}.up{color:var(--ok)}.down{color:var(--danger)}.recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:16px}.bars{display:flex;flex-direction:column;gap:8px}.bar-row{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:10px;font-size:13px}.bar-row .label{color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:10px;background:var(--bg-2);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:var(--c, var(--accent));transition:width .5s ease}.bar-row .n{text-align:right;font-weight:700}.rating-dist{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--bg-2);margin:8px 0 12px}.rating-dist>div{height:100%}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}.legend .sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}.month-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:130px;margin-top:10px}.month-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}.month-bar .b{width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));min-height:2px}.month-bar .m{font-size:10px;color:var(--muted);text-transform:capitalize}.month-bar .n{font-size:11px;font-weight:700}.spot{display:flex;gap:14px;align-items:center}.spot .cover-wrap{width:64px;flex:none;border-radius:8px;overflow:hidden}.spot .t{font-weight:700}.spot .s{color:var(--muted);font-size:13px}.retro-head{display:flex;align-items:center;gap:10px;margin:26px 0 12px}.retro-head .n{color:var(--muted);font-size:13px}.wish-card{position:relative}.wish-card .actions{position:absolute;inset:auto 0 0 0;display:flex;gap:4px;justify-content:center;padding:6px;opacity:0;transition:opacity .15s;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}.wish-card:hover .actions,.wish-card:focus-within .actions{opacity:1}@media(hover:none){.wish-card .actions{opacity:1}}.wish-card .price{position:absolute;top:8px;right:8px;padding:3px 7px;border-radius:7px;font-size:11px;font-weight:800;background:#fbbf24eb;color:var(--on-rating)}.wish-card.bought .cover-wrap{opacity:.55}.wish-card .uncertain{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--bg) 85%,transparent);display:grid;place-items:center;font-weight:800;color:var(--muted)}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:50;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--border-2);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:grid;place-items:center;z-index:60;cursor:zoom-out;padding:16px}.lightbox img{max-width:100%;max-height:100%;border-radius:10px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--panel-2);border:1px solid var(--border-2);padding:10px 16px;border-radius:12px;z-index:70;box-shadow:var(--shadow);font-weight:600}.toast.error{border-color:var(--danger);color:var(--danger)}.fab{position:fixed;right:20px;bottom:20px;z-index:30;width:54px;height:54px;border-radius:16px;background:var(--accent);color:var(--on-accent);border:0;font-size:26px;cursor:pointer;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 45%,transparent);display:grid;place-items:center}.fab:hover{background:var(--accent-hover)}@media(min-width:900px){.fab{display:none}}.skeleton{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.login{min-height:100vh;display:grid;place-items:center;padding:16px}.login-card{width:100%;max-width:360px;padding:28px}.logout{flex:none}@media(max-width:899px){.logout-label{display:none}}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0}.shell,.login{position:relative;z-index:1}.brand-logo svg{display:block}.theme-banner{display:block;text-align:center;font-size:13px;font-weight:600;padding:6px 16px;color:var(--accent);border-top:1px solid var(--border);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}.login-card .theme-banner{border:0;border-radius:var(--radius-sm);margin-top:4px}.theme-picker{position:relative;flex:none}.theme-menu{position:absolute;right:0;top:calc(100% + 8px);width:290px;max-height:70vh;overflow-y:auto;padding:6px;background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius);box-shadow:var(--shadow);z-index:40}.theme-group{padding:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.theme-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;text-align:left;cursor:pointer}.theme-option:hover{background:var(--panel-2)}.theme-option.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.theme-option .ti{font-size:18px;width:24px;text-align:center}.theme-option .tn{display:block;font-weight:600}.theme-option .td{display:block;font-size:12px;color:var(--muted)}
