:root{--bg:#0f1411;--surface:#18201b;--surface-2:#233029;--border:#2f3d35;--text:#eef5f0;--muted:#8fa397;--accent:#86c49a;--accent-ink:#0f1411;--accent-deep:#3f7d57;--danger:#ff6b5e;--ok:#30d158;--star:#f5c84c;--steam-positive:#66c0f4;--steam-mixed:#b9a074;--steam-negative:#c35c2c;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font:16px/1.4 -apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,p{margin:0}h1{font-size:24px}h2{margin-bottom:8px;font-size:18px}a{color:var(--accent)}input,select,textarea,button{font:inherit;color:var(--text);font-size:16px}input,select,textarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:10px 12px}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}textarea{resize:vertical;min-height:100px}button{background:var(--surface-2);border-radius:var(--radius);cursor:pointer;border:none;padding:10px 14px}button:disabled{opacity:.5}button.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}button.danger{color:var(--danger)}.muted{color:var(--muted);font-size:14px}.error{color:var(--danger);font-size:14px}.stack{flex-direction:column;gap:12px;display:flex}.row{gap:8px;display:flex}.hidden-game{justify-content:space-between;align-items:center}.topbar{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#0f1411eb;align-items:center;gap:24px;padding:12px 16px;display:flex;position:sticky;top:0}.topbar a.brand{color:var(--text);font-size:17px;font-weight:700;transition:opacity .1s}.topbar a.brand:active{opacity:.6}.brand+a{margin-left:auto}.topbar a{color:var(--muted);font-weight:600;text-decoration:none}.topbar a.active{color:var(--accent)}.offline-banner{background:var(--surface-2);color:var(--muted);text-align:center;padding:8px 16px;font-size:14px}fieldset.edit{border:0;min-width:0;margin:0;padding:0}.page{max-width:900px;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));margin:0 auto;overflow-x:clip}.login{max-width:360px;padding-top:20vh}.login h1{text-align:center;margin-bottom:24px}.section{margin-top:24px}.collapsible>summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.collapsible>summary::-webkit-details-marker{display:none}.collapsible>summary:after{content:"›";color:var(--muted);margin-bottom:8px;font-size:22px;line-height:1;transition:transform .2s}.collapsible[open]>summary:after{transform:rotate(90deg)}.launch.dancing .dots span{animation:1.2s ease-in-out infinite dot-hop}.launch.dancing .dots span:nth-child(2){animation-delay:.15s}.launch.dancing .dots span:nth-child(3){animation-delay:.3s}@keyframes dot-hop{0%,40%,to{transform:none}20%{transform:translateY(-5px)}}.library-tools{top:var(--topbar-h,49px);z-index:9;background:var(--bg);flex-direction:column;gap:10px;margin:-16px -16px 0;padding:12px 16px 10px;transition:transform .22s ease-out;display:flex;position:sticky}.library-tools.hidden{transform:translateY(-100%)}.search-row{gap:8px;display:flex}.filter-btn{background:var(--surface);border:1px solid var(--border);width:44px;color:var(--muted);flex:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.filter-btn.active{border-color:var(--accent);color:var(--accent)}.filter-badge{background:var(--accent);min-width:18px;height:18px;color:var(--accent-ink);border-radius:999px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:-6px;right:-6px}.chips.filter-chips{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.filter-chips .chip{background:var(--accent-deep);flex:none}.filter-chips .chip button{color:var(--text)}.genre-suggest .chip{background:var(--surface-2);color:var(--text);gap:4px;padding:6px 12px}.library-bar-right{align-items:center;gap:8px;display:flex}.sort-btn{background:var(--surface);height:30px;color:var(--muted);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:0 12px;font-size:14px;font-weight:600;display:flex;position:relative}.sort-btn.active{color:var(--accent)}.sort-btn select{opacity:0;cursor:pointer;position:absolute;inset:0}.sheet-layer{z-index:100;position:fixed;inset:0}.sheet-backdrop{background:#0000008c;animation:.2s ease-out both fade-in;position:absolute;inset:0}.sheet{background:var(--surface);border-top:1px solid var(--border);border-radius:16px 16px 0 0;flex-direction:column;max-width:900px;max-height:80vh;margin:0 auto;animation:.24s cubic-bezier(.2,.8,.2,1) both sheet-in;display:flex;position:absolute;bottom:0;left:0;right:0}.sheet-layer.closing .sheet{animation:.18s ease-in both sheet-out}.sheet-layer.closing .sheet-backdrop{animation:.18s ease-in both fade-out}.sheet-head{border-bottom:1px solid var(--border);grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px;display:grid}.sheet-head h2{margin:0;font-size:17px}.sheet-head button:first-child{justify-self:start}.sheet-head button:last-child{justify-self:end}.sheet-body{padding:16px 16px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain;flex-direction:column;gap:20px;display:flex;overflow-y:auto}.sheet-body h3{text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:0 0 10px;font-size:13px;font-weight:600}.sheet-options{flex-wrap:wrap;gap:8px;display:flex}button.sheet-option{border-radius:999px;padding:6px 12px;font-size:14px;transition:background-color .15s}button.sheet-option.selected{background:var(--accent-deep)}button.sheet-option.empty{opacity:.45}.sheet-count{color:var(--muted);margin-left:2px;font-size:12px}.sheet-option.selected .sheet-count{color:var(--text)}@keyframes sheet-in{0%{transform:translateY(100%)}}@keyframes sheet-out{to{transform:translateY(100%)}}@keyframes fade-out{to{opacity:0}}.grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;display:grid}.grid-large .card-title{font-size:15px}.grid-single{width:100%;max-width:480px;margin:0 auto}.library-bar{justify-content:space-between;align-items:center;gap:8px;display:flex}.segmented{background:var(--surface);border-radius:999px;padding:2px;display:flex;position:relative}.segmented button{width:34px;height:26px;color:var(--muted);background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:color .2s;display:flex;position:relative}.segmented button.selected{color:#fff}.segmented-thumb{background:var(--accent-deep);width:34px;height:26px;transform:translateX(calc(var(--at,0) * 100%));border-radius:999px;transition:transform .2s ease-out;position:absolute;top:2px;left:2px}.card{color:var(--text);flex-direction:column;gap:4px;text-decoration:none;display:flex;position:relative}.score-badge{text-align:center;min-width:24px;color:var(--text);background:#000000bf;border-radius:6px;padding:1px 5px;font-size:11px;font-weight:600;line-height:16px;position:absolute;top:4px;right:4px}.steam-badge{background:#000000bf;border-radius:6px;padding:1px 5px;font-size:11px;font-weight:600;line-height:16px;position:absolute;top:4px;left:4px}.tone-positive{color:var(--steam-positive)}.tone-mixed{color:var(--steam-mixed)}.tone-negative{color:var(--steam-negative)}.card.off-drive{opacity:.4}.cover{aspect-ratio:3/4;object-fit:cover;background:var(--surface);border-radius:8px;width:100%}img.fade-in{opacity:0;transition:opacity .25s ease-out}img.fade-in.loaded{opacity:1}.cover.placeholder{text-align:center;color:var(--muted);word-break:break-word;justify-content:center;align-items:center;padding:8px;font-size:13px;display:flex;overflow:hidden}.card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.3;display:-webkit-box;overflow:hidden}.stars{color:var(--muted);gap:1px;font-size:12px;line-height:1;display:inline-flex}.stars .filled{color:var(--star)}.stars button{color:inherit;background:0 0;padding:4px 3px;font-size:30px;line-height:1}.stars .pop{animation:star-pop .28s ease-out calc(var(--n,0) * 50ms) both;display:inline-block}@keyframes star-pop{40%{transform:scale(1.35)}}.detail{isolation:isolate;animation:.2s ease-out backwards fade-in;position:relative}.backdrop{z-index:-1;filter:blur(28px)brightness(.45)saturate(1.2);pointer-events:none;background-position:50% 25%;background-size:cover;height:340px;position:absolute;top:-16px;left:-16px;right:-16px;-webkit-mask-image:linear-gradient(#000 40%,#0000);mask-image:linear-gradient(#000 40%,#0000)}.detail-nav{justify-content:space-between;align-items:center;gap:8px;display:flex}button.pill{border-radius:999px;padding:4px 14px;font-size:14px;font-weight:600}fieldset.edit-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:20px;padding:16px;animation:.2s ease-out both panel-in}.edit-panel h2{margin-bottom:0}.edit-panel h3{text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:0;font-size:13px;font-weight:600}@keyframes panel-in{0%{opacity:0;transform:translateY(-8px)}}.prev-next{align-items:center;gap:8px;margin-left:auto;font-size:14px;display:flex}.prev-next button{padding:6px 10px}.detail-header{grid-template-columns:120px 1fr;align-items:start;gap:16px;display:grid}.detail-header .stack{gap:6px}.detail-cover p{text-align:center;margin-top:6px}.detail-header h1{font-size:22px;line-height:1.2}.summary{line-height:1.5}.shimmer{background:var(--surface);border-radius:6px;position:relative;overflow:hidden}.shimmer:after{content:"";background:linear-gradient(90deg,#0000,#86c49a14,#0000);animation:1.2s ease-in-out infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes shimmer{to{transform:translate(100%)}}.shimmer.cover{border-radius:8px}.shimmer.bar{height:14px}.shimmer.bar.title{width:75%;height:26px}.shimmer.block{border-radius:var(--radius);height:180px}.detail.fill-in .detail-header>.stack>:not(h1),.detail.fill-in>.summary,.detail.fill-in>.section{animation:.25s ease-out backwards fade-in}a.button{background:var(--surface-2);border-radius:var(--radius);color:var(--text);align-self:flex-start;padding:10px 14px;text-decoration:none}.trailer{border-radius:var(--radius);background:var(--surface);max-width:480px;display:block;position:relative;overflow:hidden}.trailer img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.trailer .play{background:#000000a6;border-radius:50%;width:64px;height:64px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.trailer .play:after{content:"";border:12px solid #0000;border-left:20px solid #fff;border-right-width:0;position:absolute;top:50%;left:54%;transform:translate(-50%,-50%)}.badge{background:var(--surface-2);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:13px;display:inline-block}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--surface-2);border-radius:999px;align-items:center;gap:2px;padding:4px 4px 4px 12px;font-size:14px;display:inline-flex}.chip.static{padding:6px 12px}.chip button{color:var(--muted);background:0 0;padding:2px 8px;font-size:18px;line-height:1}button.chip-add{border:1px dashed var(--border);color:var(--muted);background:0 0;padding:4px 12px}form.chip-input{margin:0;padding:0 4px 0 12px}.chip-input input{background:0 0;border:none;width:9em;padding:4px 0}.chip-input input:focus{outline:none}.chip-input button:disabled{opacity:.3}.chip-in{animation:.2s ease-out both chip-in}.chip-out{animation:.18s ease-in both chip-out}@keyframes chip-in{0%{opacity:0;transform:scale(.6)}}@keyframes chip-out{to{opacity:0;transform:scale(.6)}}.match{text-align:left;background:var(--surface);align-items:center;gap:12px;display:flex}.match img,.match-placeholder{aspect-ratio:3/4;object-fit:cover;background:var(--surface-2);border-radius:4px;flex:none;width:48px}.facts{grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px;display:grid}.facts dt{color:var(--muted)}.facts dd{word-break:break-word;margin:0}button.notes-view{text-align:left;white-space:pre-wrap;word-break:break-word;background:0 0;width:100%;padding:0;line-height:1.5}p.notes{white-space:pre-wrap;word-break:break-word;line-height:1.5}button.notes-view.empty{color:var(--muted)}textarea.notes-box{resize:none;min-height:0;line-height:1.5;overflow:hidden}.notes-actions{justify-content:flex-end;animation:.2s ease-out both fade-in}@keyframes fade-in{0%{opacity:0}}.panel{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:8px;padding:12px;display:flex}label.checkbox{color:var(--muted);align-items:flex-start;font-size:14px}label.checkbox input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:0;padding:0}.progress{background:var(--surface-2);border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:var(--accent);transform-origin:0;height:100%;transition:transform .4s ease-out}button.link{color:var(--accent);background:0 0;align-self:flex-start;padding:0;font-size:14px}.grid-enter>.card{animation:card-in .3s ease-out calc(var(--i,0) * 25ms) both}.grid-enter-alt>.card{animation-name:card-in-alt}.grid-enter>.card:not([style*=--i]){animation:none}@keyframes card-in{0%{opacity:0;transform:translateY(8px)}}@keyframes card-in-alt{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){img.fade-in,.progress-fill,.segmented-thumb,.library-tools{transition:none}.grid-enter>.card,.sheet,.sheet-backdrop,.stars .pop,.chip-in,.chip-out,.launch.dancing .dots span,.notes-actions,.edit-panel,.detail,.detail.fill-in .detail-header>.stack>*,.detail.fill-in>.summary,.detail.fill-in>.section,.shimmer:after{animation:none}}
