:root{color-scheme:dark;--gold:#e7c784;--cream:#f7ecd7;--ink:#172c27}*{box-sizing:border-box}body{margin:0;color:var(--cream);font:16px/1.5 system-ui,sans-serif;background:linear-gradient(#101e2470,#101e24a0),url('assets/background.jpg') center/cover fixed}main{max-width:1150px;margin:auto;padding:32px 24px}header{display:flex;align-items:center;gap:28px;padding:25px;background:linear-gradient(90deg,#162b28ee,#162b2880);border:1px solid #be9a58;border-radius:12px}header img{width:110px;height:150px;object-fit:cover;border-radius:5px}h1{font:clamp(36px,6vw,65px)/1.1 Georgia,serif;color:var(--gold);margin:8px 0}header p{font:22px Georgia,serif;margin:12px 0}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:700}a{color:var(--gold)}nav,.row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}button{font:inherit;cursor:pointer;border:1px solid #b89a62;color:var(--cream);background:#394436;padding:10px 16px;border-radius:6px;min-height:44px}button:hover:not(:disabled){background:#596244}button:focus-visible,a:focus-visible{outline:3px solid #ffde87;outline-offset:4px}button:disabled{opacity:.48;cursor:default}.panel{background:#172c27f2;border:1px solid #7e7351;border-radius:10px;padding:22px;margin:20px 0;box-shadow:0 10px 35px #0004}h2{font:26px Georgia,serif;margin:8px 0 14px;color:var(--gold)}.muted{font-size:14px;color:#d0d7c7}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;text-shadow:0 2px 5px #000;background:#142a22b8;padding:10px 16px;border-radius:6px}.section-heading h2{font-size:21px;margin:0}.section-heading span{font-size:13px}#pack{display:flex;gap:12px;flex-wrap:wrap;padding:18px 0;min-height:100px}.card{width:140px;height:196px;padding:0;overflow:hidden;background:#f4e9d0;color:#214842;border:3px solid #d2bd8b;box-shadow:0 6px 15px #0008;transition:transform .12s}.card:hover:not(:disabled){background:#fff5de;transform:translateY(-4px)}.card.selected{border:4px solid #ffcf4f;transform:translateY(-8px);box-shadow:0 0 0 2px #855315,0 9px 20px #0009}.card:disabled{opacity:.85}.card .rank{display:block;font:bold 27px Georgia;background:#234840;color:#fff;padding:7px}.card.red .rank{background:#8b4239}.card .symbol{display:block;font:45px Georgia;margin:9px}.card.red{color:#8b4239}.card small{display:block;font:12px/1.4 system-ui;padding:0 5px}#preview{font-size:20px;font-weight:700;color:var(--gold)}#message{border-top:1px solid #6b7255;padding-top:16px}footer{font-size:12px;text-align:center;background:#142820e8;border-radius:8px;padding:16px}.subtle{background:transparent;font-size:12px}dialog{max-width:800px;width:calc(100% - 32px);max-height:88vh;background:#172c27;color:var(--cream);border:1px solid var(--gold);border-radius:12px;padding:24px}dialog::backdrop{background:#000b}dialog pre{white-space:pre-wrap;font:15px/1.6 system-ui}.skill{border-top:1px solid #6e745b;padding:14px 0}.skill h3{margin:0;color:var(--gold)}.skill p{margin:5px 0 12px;font-size:14px}.close{margin-top:20px}label{display:block;margin:16px 0}input{width:20px;height:20px;vertical-align:middle}.badge{display:inline-block;padding:8px 14px;background:#334639;border-radius:6px;margin:4px 8px 4px 0}@media(max-width:600px){main{padding:12px}header{padding:16px;gap:15px}header img{width:65px;height:100px}header p{font-size:16px}.eyebrow{font-size:10px}header small{font-size:11px}.panel{padding:16px}.card{width:calc((100% - 24px)/3);height:174px}#pack{gap:12px}.card .rank{font-size:23px}.card .symbol{font-size:35px}.section-heading span{display:none}nav button{flex:1;font-size:13px;padding:8px}.row button{flex-grow:1}h2{font-size:23px}}