:root{--bg: #0b0d10;--panel: #14181d;--panel2: #1b2027;--line: #2a313a;--text: #e8e3d6;--muted: #8d949c;--gold: #d8b45a;--gold2: #f3d98b;--win: #5fbf55;--loss: #d4483b;--display: Metamorphous, serif;--u: min(1vw, 1.78vh)}*{box-sizing:border-box}html,body{margin:0;height:100%;color:var(--text);font-family:Noto Sans,sans-serif;overflow:hidden;font-size:calc(var(--u) * 1.04)}body{background:radial-gradient(ellipse at top,#1d1a14 0%,var(--bg) 60%) var(--bg)}h1,h2,h3{font-family:var(--display);letter-spacing:.04em;margin:0}.win{color:var(--win)}.loss{color:var(--loss)}.muted{color:var(--muted)}#app{position:absolute;inset:0 0 calc(var(--u) * 1.6) 0;padding:calc(var(--u) * 1.1);display:flex;flex-direction:column;gap:calc(var(--u) * .9)}.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:calc(var(--u) * .5);padding:calc(var(--u) * .9) calc(var(--u) * 1)}.panel h2{font-size:calc(var(--u) * 1.5);font-weight:800;letter-spacing:.08em;color:var(--gold2);margin-bottom:calc(var(--u) * .6);padding-bottom:calc(var(--u) * .3);text-transform:uppercase;text-shadow:0 0 calc(var(--u) * .5) rgba(216,180,90,.35);border-bottom:1px solid;border-image:linear-gradient(90deg,var(--gold),transparent 70%) 1}img.hero{border-radius:calc(var(--u) * .25);object-fit:cover;background:#222;vertical-align:middle;aspect-ratio:16 / 9}img.icon{width:calc(var(--u) * 1.5);height:calc(var(--u) * 1.5);vertical-align:middle}.noimg{display:inline-grid;place-items:center;background:#222;border-radius:calc(var(--u) * .25);font-size:.55em;color:var(--muted);text-align:center;vertical-align:middle;aspect-ratio:16 / 9;overflow:hidden}.best{color:var(--gold2);font-weight:800;text-shadow:0 0 calc(var(--u) * .6) rgba(216,180,90,.55)}.footer{position:fixed;left:0;right:0;bottom:calc(var(--u) * .35);text-align:center;font-size:calc(var(--u) * .7);color:#6a717a}.footer .stale{color:var(--loss);font-weight:800}.hdr{display:flex;align-items:center;gap:calc(var(--u) * 2)}.hdr .title{font-size:calc(var(--u) * 2.8);font-weight:800;letter-spacing:.1em;line-height:1;background:linear-gradient(180deg,#fff3cf 0%,var(--gold2) 35%,var(--gold) 70%,#9a7a2c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 calc(var(--u) * .6) rgba(216,180,90,.45))}.hdr .rec{font-family:var(--display);font-size:calc(var(--u) * 3.3);font-weight:800;line-height:1}.hdr .sub{font-size:calc(var(--u) * 1.2)}.streak{font-size:calc(var(--u) * 1.35);padding:calc(var(--u) * .2) calc(var(--u) * .8);border-radius:99px;border:1px solid currentColor}.main{display:grid;grid-template-columns:3.35fr 1fr;gap:calc(var(--u) * 1);flex:1;min-height:0}.left{display:flex;flex-direction:column;gap:calc(var(--u) * 1);min-height:0}.right{display:flex;flex-direction:column;gap:calc(var(--u) * 1);min-height:0;padding-right:calc(var(--u) * .4)}table.pt{width:100%;border-collapse:collapse;font-size:calc(var(--u) * 1.3)}table.pt th{font-size:.58em;color:var(--muted);text-transform:uppercase;font-weight:600;text-align:right;padding:0 .675em .3em}table.pt td{text-align:right;padding:.22em .675em;border-top:1px solid var(--line);white-space:nowrap}table.pt td:first-child,table.pt th:first-child{text-align:left}table.pt .name{font-weight:800}table.pt .pick{font-size:.75em}.cards{display:grid;gap:calc(var(--u) * .7)}.award{display:flex;align-items:center;gap:calc(var(--u) * .8)}.award .lbl{font-family:var(--display);color:var(--gold);font-size:calc(var(--u) * .9);text-transform:uppercase}.award .who{font-weight:800;font-size:calc(var(--u) * 1.3)}.award .why{color:var(--muted);font-size:calc(var(--u) * .9)}.award .next{display:flex;flex-wrap:wrap;gap:0 1.2em;margin-top:.15em;font-size:calc(var(--u) * .85);color:var(--muted);opacity:.7}.award .next i{font-style:normal;opacity:.8}.award .badge{width:calc(var(--u) * 3.8);flex:none;display:grid;place-items:center;font-size:calc(var(--u) * 1.5);aspect-ratio:16 / 9}.award.soft .who{color:var(--muted);font-style:italic;font-weight:600}.rec-row{font-size:calc(var(--u) * 1)}.rec-row .lbl{font-family:var(--display);color:var(--gold);font-size:.85em;text-transform:uppercase;margin-right:.4em}.rec-row .who{font-weight:800}.rec-row .why{color:var(--muted);font-size:.9em}.game{display:flex;align-items:center;gap:calc(var(--u) * .7);padding:calc(var(--u) * .35) 0;border-top:1px solid var(--line);font-size:calc(var(--u) * 1.05)}.game .res{font-family:var(--display);font-weight:800;width:1.6em;font-size:1.3em}.game .when{width:6.8em;line-height:1.25}.game .p{display:flex;flex-direction:column;align-items:center;font-size:.8em;color:var(--muted);flex:1}.empty{color:var(--muted);font-style:italic;padding:calc(var(--u) * .6) 0;font-size:calc(var(--u) * 1.2)}.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold) var(--panel)}.scroll::-webkit-scrollbar{width:calc(var(--u) * .5)}.scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}.scroll::-webkit-scrollbar-track{background:var(--panel)}.fatal{margin:auto;max-width:60ch;text-align:center;font-size:calc(var(--u) * 1.3)}.fatal h1{color:var(--loss);margin-bottom:.5em}