@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light dark;
  --bg:#f4f5fa;--surface:#fff;--text:#1a1b26;--muted:#5a5f78;--line:#d9dbe8;
  --accent:#5b3fd6;--accent-strong:#4429b8;--on-accent:#fff;
  --ok:#15703a;--warn:#8a5a00;--warn-bg:#fff3d6;--error:#a31d2b;--error-bg:#fde8ea;--ok-bg:#e2f5e9;
  --focus:#0a5fd8;--winner:#c28a00;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1018;--surface:#1a1b28;--text:#e8e9f4;--muted:#a3a7c2;--line:#2e3048;
    --accent:#9b86ff;--accent-strong:#b9a9ff;--on-accent:#12101f;
    --ok:#5fd68a;--warn:#f0b84a;--warn-bg:#35290b;--error:#ff8a95;--error-bg:#3a1219;--ok-bg:#12301f;
    --focus:#7db4ff;--winner:#f0c24a;
  }
}
*{box-sizing:border-box}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:16px/1.5 "Inter",sans-serif}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a{color:var(--accent-strong)}
main{max-width:60rem;margin:0 auto;padding:1.5rem 1rem 4rem}
h1{font-size:1.75rem;margin:.5rem 0 1rem}
h2{font-size:1.2rem;margin:1.5rem 0 .5rem}
.top{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.15rem;color:var(--accent-strong);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center}
.top nav a{text-decoration:none;color:var(--text)}
.top nav a:hover{text-decoration:underline}
.inline{display:inline;margin:0}
.meta{color:var(--muted);margin:.25rem 0}
.empty{color:var(--muted)}
.notice{padding:.6rem .9rem;border-radius:.5rem;border:1px solid var(--line);margin:0 0 1rem}
.notice.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.notice.error{background:var(--error-bg);color:var(--error);border-color:var(--error)}
button,.button{font:inherit;padding:.45rem .9rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.button:hover{border-color:var(--accent)}
button:disabled{opacity:.6;cursor:not-allowed}
button.link{border:0;background:none;padding:0;color:var(--text)}
button.link:hover{text-decoration:underline}
button.primary,button.vote.voted{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
button.danger{color:var(--error);border-color:var(--error)}
.form{display:grid;gap:1rem;max-width:30rem;margin-bottom:1rem}
.form label{display:grid;gap:.25rem;font-weight:500}
.form label.check{display:flex;gap:.5rem;align-items:center}
input,textarea{font:inherit;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--text);width:100%}
input[type=checkbox]{width:auto}
.games{list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem}
.game{position:relative;display:grid;grid-template-columns:14rem 1fr;background:var(--surface);border:1px solid var(--line);border-radius:.75rem;overflow:hidden}
.game:hover{border-color:var(--accent)}
.stretch{color:inherit;text-decoration:none}
.stretch::after{content:"";position:absolute;inset:0}
.stretch:focus-visible{outline:none}
.game:has(.stretch:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.actions{position:relative;z-index:1}
.help{font-weight:400;color:var(--muted);font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0;padding:0}
.chip{font-size:.8rem;padding:.1rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.desc{margin:.4rem 0;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.detail .desc{display:block}
.hero{max-width:100%;height:auto;border-radius:.75rem;border:1px solid var(--line);margin:.5rem 0}
.facts{margin:1rem 0}
.badge{display:inline-block;margin:.25rem 0;padding:.1rem .6rem;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.85rem}
.loading::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-.1em}
.cover.placeholder.loading::before{display:none}
.cover.placeholder.loading{animation:pulse 1.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.loading::before,.cover.placeholder.loading{animation:none}}
.game.winner{border:2px solid var(--winner)}
.cover{width:100%;height:100%;min-height:7rem;object-fit:cover;background:var(--line)}
.body{padding:.75rem 1rem}
.game h2{margin:0}
.comment{margin:.5rem 0;white-space:pre-line}
.actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.count{color:var(--muted)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{text-align:left;padding:.5rem;border-bottom:1px solid var(--line);vertical-align:middle}
.row-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.row-actions input{width:11rem}
.system{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem}
.system dt{color:var(--muted)}.system dd{margin:0;word-break:break-all}
.status.ok,.status.unchanged{color:var(--ok)}.status.skipped{color:var(--warn)}.status.failed{color:var(--error)}
@media (max-width:40rem){.game{grid-template-columns:1fr}.cover{height:10rem}table{display:block;overflow-x:auto}}
.shuffle-icon{display:inline-block;animation:shuffle-wobble 1.2s ease-out 1}
@keyframes shuffle-wobble{0%{transform:rotate(-180deg) scale(.6)}60%{transform:rotate(15deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.shuffle-icon{animation:none}}
.section{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}
.lan{margin:.4rem 0;white-space:pre-line}
.inline-form{grid-template-columns:1fr auto;align-items:end;max-width:40rem}
.comments{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.75rem;max-width:40rem}
.comment-item{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;padding:.6rem .9rem}
.comment-item .comment{margin:.25rem 0}
.comments+.comments{margin-top:-.25rem}
button.small,.button.small{padding:.2rem .6rem;font-size:.85rem}
@media (max-width:40rem){.inline-form{grid-template-columns:1fr}}
