@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap";:root{--c-mist:#dedede;--c-lilac:#aba6c5;--c-slate:#777696;--c-blue:#2958ae;--c-navy:#143161;--a-gold:#febb1d;--a-orange:#f36803;--a-red:#be1e00;--a-blue:#025fb2;--bg:#0e1a33;--bg-panel:#182a4d;--bg-card:#1f3660;--border:#aba6c540;--text-hi:#f4f2ef;--text-mid:#c9c8dc;--text-lo:#8b89a8;--radius:10px}*{box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(1200px 500px at 15% -10%, #2558ae59, transparent 60%), radial-gradient(900px 500px at 100% 0%, #febb1d1a, transparent 55%), var(--bg);color:var(--text-hi);margin:0;font-family:"Source Sans 3",sans-serif}h1,h2,h3,.display{letter-spacing:.02em;margin:0;font-family:Cinzel,serif}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:var(--a-gold);font-family:Cinzel,serif;font-size:11px}a{color:inherit}.btn{cursor:pointer;border:none;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-family:"Source Sans 3";font-size:14px;font-weight:700;transition:transform .1s,box-shadow .15s;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(155deg, var(--a-gold), var(--a-orange));color:#241000}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #f3680366}.btn-ghost{border:1px solid var(--border);color:var(--text-mid);background:0 0}.btn-ghost:hover:not(:disabled){border-color:var(--c-blue);color:var(--text-hi)}.btn-danger{color:#ff8a6a;background:0 0;border:1px solid #be1e0066}.btn-danger:hover:not(:disabled){background:#be1e0026}.field{text-align:left;margin-bottom:16px}.field label{color:var(--text-mid);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.field input,.field select{border:1px solid var(--border);width:100%;color:var(--text-hi);background:#0f1e3c;border-radius:7px;padding:11px 13px;font-family:"Source Sans 3";font-size:14px}.field input:focus,.field select:focus{outline:2px solid var(--a-gold);outline-offset:1px;border-color:#0000}.hex{--s:44px;width:var(--s);height:calc(var(--s) * .92);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:linear-gradient(155deg, var(--a-gold), var(--a-orange) 70%, var(--a-red));color:#241000;flex-shrink:0;justify-content:center;align-items:center;font-family:Cinzel,serif;font-size:15px;font-weight:700;display:flex;box-shadow:0 0 0 1px #00000040,0 4px 10px #00000059}.cost-badge{color:#241000;background:linear-gradient(155deg, var(--a-gold), var(--a-orange));clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);flex-shrink:0;justify-content:center;align-items:center;width:26px;height:24px;font-family:Cinzel,serif;font-size:11px;font-weight:700;display:flex}.tag-type{letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border-radius:5px;padding:3px 8px;font-size:9.5px;font-weight:700}.tag-titan{color:#9fc0ff;background:#2558ae47}.tag-god{color:#febb1d;background:#febb1d38}.tag-monster{color:#6fcf9b;background:#1b4a3a8c}.tag-hero{color:#c9c8dc;background:#77769652}.tag-troop{color:#e0a875;background:#78482666}.tag-myth{color:var(--text-mid);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:#aba6c52e;border-radius:5px;padding:3px 8px;font-size:9.5px;font-weight:700}.browser-toolbar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.search{border:1px solid var(--border);min-width:180px;color:var(--text-hi);background:#0f1e3c;border-radius:7px;flex:1;padding:10px 14px;font-size:13px}.filter-chip{border:1px solid var(--border);color:var(--text-mid);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:7px 13px;font-size:12px}.filter-chip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}.view-toggle{border:1px solid var(--border);border-radius:7px;display:flex;overflow:hidden}.view-toggle button{color:var(--text-lo);cursor:pointer;background:0 0;border:none;padding:8px 12px;font-size:13px}.view-toggle button.on{background:var(--c-blue);color:#fff}.unit-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.unit-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:transform .12s,border-color .12s;overflow:hidden}.unit-card:hover{border-color:var(--a-gold);transform:translateY(-3px)}.unit-card.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.6)}.unit-card.disabled:hover{border-color:var(--border);transform:none}.unit-img{color:#ffffffd9;background-position:50%;background-size:cover;justify-content:center;align-items:center;height:110px;font-family:Cinzel;font-size:28px;font-weight:700;display:flex}.unit-body{padding:10px 12px 12px}.unit-name{margin-bottom:6px;font-size:13.5px;font-weight:700}.unit-meta{justify-content:space-between;align-items:center;display:flex}.unit-list{flex-direction:column;gap:6px;display:flex}.unit-row{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:9px 14px;display:flex}.unit-row:hover{border-color:var(--a-gold)}.unit-row.disabled{opacity:.35;cursor:not-allowed}.unit-row .unit-name{flex:1;margin-bottom:0}.unit-row .own-toggle{margin-left:auto}.section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--a-gold);border-bottom:1px solid var(--border);margin:0 0 10px;padding-bottom:6px;font-family:Cinzel;font-size:11px}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:40;background:#0e1a33b3;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand .hex{--s:32px;font-size:11px}.brand h2{font-size:18px}.pills{gap:8px;display:flex}.pill{border:1px solid var(--border);color:var(--text-mid);cursor:pointer;background:0 0;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;text-decoration:none}.pill.active{background:var(--c-blue);border-color:var(--c-blue);color:#fff}.page{max-width:1080px;margin:0 auto;padding:32px 20px 80px}.spinner-wrap{color:var(--text-lo);justify-content:center;align-items:center;padding:60px;display:flex}.error-banner{color:#ff8a6a;background:#be1e0026;border:1px solid #be1e0066;border-radius:8px;margin-bottom:16px;padding:12px 16px;font-size:13px}.empty-state{text-align:center;color:var(--text-lo);padding:40px 20px;font-size:13.5px}.login-wrap{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);text-align:center;width:100%;max-width:400px;padding:40px 36px}.login-card .hex{margin:0 auto 18px}.login-card h1{font-size:26px}.login-card .sub{color:var(--text-lo);letter-spacing:.04em;margin:8px 0 30px;font-size:13px}.login-note{color:var(--text-lo);margin-top:18px;font-size:11.5px;line-height:1.5}.modal-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:100;background:#060c1ab8;justify-content:center;align-items:center;padding:24px 16px;display:flex;position:fixed;inset:0}.unit-modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;width:100%;max-width:760px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px #0000008c,0 0 0 1px #febb1d14}.unit-modal-head{border-bottom:1px solid var(--border);background:linear-gradient(#febb1d0f,#0000);justify-content:space-between;align-items:flex-start;padding:20px 24px;display:flex;position:sticky;top:0}.unit-modal-head .tags{gap:8px;margin-bottom:8px;display:flex}.unit-modal-head h2{font-size:24px}.activation-row{align-items:center;gap:14px;margin-top:6px;display:flex}.activation-row .stars{color:var(--a-gold);letter-spacing:1px;font-size:13px}.activation-row .aow-gain{color:var(--text-mid);border:1px solid var(--border);background:#aba6c51f;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700}.close-x{border:1px solid var(--border);width:32px;height:32px;color:var(--text-lo);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;font-size:16px}.close-x:hover{color:var(--text-hi);border-color:var(--a-red)}.unit-modal-body{grid-template-columns:220px 1fr;display:grid}.unit-portrait{color:#ffffffd9;cursor:zoom-in;background:linear-gradient(155deg,#444,#1a1a1a);justify-content:center;align-items:center;min-height:260px;font-family:Cinzel;font-size:56px;font-weight:700;display:flex;position:relative}.unit-portrait img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.unit-portrait.expanded{cursor:zoom-out}.full-card-img{color:#fff9;text-align:center;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;font-family:"Source Sans 3";font-size:12px;display:flex;position:relative}.cost-badge-lg{z-index:2;--s:52px;width:var(--s);height:calc(var(--s) * .92);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:linear-gradient(155deg, var(--a-gold), var(--a-orange) 70%, var(--a-red));color:#241000;flex-direction:column;justify-content:center;align-items:center;font-family:Cinzel;font-weight:700;display:flex;position:absolute;top:14px;left:14px;box-shadow:0 4px 12px #0006}.cost-badge-lg .num{font-size:19px;line-height:1}.cost-badge-lg .lbl{letter-spacing:.05em;font-size:7px}.unit-portrait .class-icons{z-index:2;gap:6px;font-size:16px;display:flex;position:absolute;bottom:12px;left:14px}.unit-portrait .expand-hint{z-index:2;color:#ffffffbf;background:#0006;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:600;position:absolute;bottom:12px;right:14px}.unit-modal-main{padding:20px 24px}.stat-row{gap:8px;margin-bottom:20px;display:flex}.stat-hex{border:1px solid var(--border);text-align:center;background:#0f1e3c;border-radius:8px;flex:1;padding:9px 4px}.stat-hex .v{color:var(--text-hi);font-family:Cinzel;font-size:18px;font-weight:700}.stat-hex .k{color:var(--text-lo);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;font-size:9.5px}.power{gap:12px;margin-bottom:14px;display:flex}.power-icon{color:#9fc0ff;background:#2558ae40;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;display:flex}.power-name{font-size:13.5px;font-weight:700}.power-name .cost{color:var(--a-gold);margin-left:6px;font-size:11.5px;font-weight:600}.power-desc{color:var(--text-mid);margin-top:3px;font-size:12.5px;line-height:1.5}.talent-chips{flex-wrap:wrap;gap:7px;margin-bottom:4px;display:flex}.talent-chip{border:1px solid var(--border);color:var(--text-mid);cursor:help;background:#aba6c51f;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:600}.situational-note{color:var(--a-gold);background:#febb1d14;border:1px solid #febb1d40;border-radius:8px;margin-top:16px;padding:10px 12px;font-size:12px;line-height:1.5}.unit-modal-foot{border-top:1px solid var(--border);background:#00000026;justify-content:flex-end;gap:10px;padding:16px 24px;display:flex;position:sticky;bottom:0}@media (width<=560px){.unit-modal-body{grid-template-columns:1fr}.unit-portrait{min-height:160px}}.collection-hint{color:var(--text-lo);margin:-4px 0 18px;font-size:12.5px;line-height:1.5}.myth-group{margin-bottom:20px}.myth-group-title{color:var(--text-mid);margin-bottom:8px;font-size:13px;font-weight:700}.box-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;display:grid}.box-toggle{background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;transition:border-color .12s;display:flex}.box-toggle:hover{border-color:var(--c-blue)}.box-toggle.owned{border-color:var(--a-gold);background:#febb1d0f}.box-toggle input{accent-color:var(--a-gold);flex-shrink:0;width:16px;height:16px}.box-toggle .box-name{flex:1;font-size:13px}.box-toggle .box-code{color:var(--text-lo);letter-spacing:.05em;font-size:10px}.myth-select{border:1px solid var(--border);color:var(--text-hi);background:#0f1e3c;border-radius:7px;padding:10px 13px;font-family:"Source Sans 3";font-size:13px}