:root{--bg:#15100b;--panel:#221a12;--panel-2:#2f2417;--border:#4d3b27;--border-soft:#3a2c1d;--text:#f4ead6;--muted:#b39c7c;--accent:#f1c40f;--accent-dark:#b8860b;--blood:#c0392b;--danger:#e74c3c;--ok:#56c878;--sand:#d9a066;--radius:12px;--shadow:0 6px 18px #00000059;--font:"Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--title:"Cinzel", Georgia, serif;--display:"Bangers", "Fredoka", system-ui, sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1100px 520px at 50% -8%, #f1c40f1f, transparent 62%), radial-gradient(700px 380px at 12% 8%, #c0392b1a, transparent 60%), radial-gradient(700px 380px at 88% 8%, #2980b914, transparent 60%), repeating-linear-gradient(45deg, #ffffff04 0 2px, transparent 2px 6px), radial-gradient(900px 700px at 50% 0%, #2a1d10, var(--bg));color:var(--text);font-family:var(--font);background-attachment:fixed;min-height:100vh;margin:0;font-size:15px}a{color:var(--accent);text-decoration:none}.topnav{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);background:linear-gradient(#221a12eb,#15100bd1);justify-content:space-between;align-items:center;padding:10px 20px;display:flex;position:sticky;top:0;box-shadow:0 2px 14px #0000004d}.topnav-brand{font-family:var(--display);letter-spacing:2.5px;color:var(--text);text-transform:uppercase;align-items:center;gap:9px;font-size:26px;display:inline-flex}.topnav-brand .logo-mark{filter:drop-shadow(0 1px #0006);flex:none;width:26px;height:26px}.topnav-brand .logo-a{color:var(--text)}.topnav-brand .logo-b{color:var(--accent);text-shadow:0 1px 0 var(--blood)}.iconbtn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:9px;padding:6px 11px;font-size:16px;line-height:1;transition:border-color .12s,transform 60ms}.iconbtn:hover{border-color:var(--accent);transform:translateY(-1px)}.volume{align-items:center;gap:8px;display:inline-flex}.volume input[type=range]{width:88px;height:5px;accent-color:var(--accent);background:var(--panel-2);cursor:pointer;border-radius:3px}@media (width<=520px){.volume input[type=range]{display:none}}.app{max-width:980px;margin:0 auto;padding:24px 20px 64px}.page-fade{animation:.2s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.topbar{justify-content:space-between;align-items:center;gap:14px;margin-bottom:26px;display:flex}.brand{font-family:var(--display);letter-spacing:2px;color:var(--text);text-transform:uppercase;font-size:40px}.brand span{color:var(--accent)}.tagline{color:var(--muted);font-size:13px;font-style:italic}h1,h2{font-family:var(--title);letter-spacing:.5px;color:#fbeecb;text-shadow:0 2px #00000059,0 0 18px #f1c40f1f;margin:0 0 16px;font-weight:900}h1{font-size:27px}.btn{background:linear-gradient(180deg, #f7d046, var(--accent));color:#2a1c05;border:1px solid var(--accent-dark);cursor:pointer;box-shadow:0 3px 0 var(--accent-dark), var(--shadow);border-radius:10px;align-items:center;gap:8px;padding:10px 18px;font-size:15px;font-weight:800;transition:transform 60ms,filter .12s,box-shadow .12s;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:linear-gradient(#ffffff47,#fff0);border-radius:10px 10px 40% 40%;position:absolute;inset:0 0 55%}.btn.secondary:after,.btn.ghost:after,.btn.danger:after{opacity:.3}.btn:hover{filter:brightness(1.08);box-shadow:0 3px 0 var(--accent-dark), 0 0 14px #f1c40f59, var(--shadow)}.btn:active{box-shadow:0 1px 0 var(--accent-dark);transform:translateY(2px)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn.secondary{background:linear-gradient(180deg, var(--panel-2), #261d13);color:var(--text);border:1px solid var(--border);box-shadow:0 3px 0 #1a140d, var(--shadow)}.btn.secondary:active{box-shadow:0 1px #1a140d}.btn.ghost{color:var(--muted);border:1px solid var(--border);box-shadow:none;background:0 0}.btn.ghost:hover{color:var(--text);border-color:var(--accent)}.panel{background:linear-gradient(180deg, #271e15, var(--panel));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 0 0 1px #f1c40f0d;padding:20px;position:relative}.panel:before{content:"";border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,#0000,#f1c40f59,#0000);height:2px;position:absolute;inset:0 0 auto}.panel:after{content:"";border-radius:var(--radius) 0 0 0;pointer-events:none;background:linear-gradient(115deg,#ffecaa12,#fff0 65%);width:90px;height:44px;position:absolute;top:0;left:0}.fight-row{transition:transform .1s,box-shadow .12s,border-color .12s}.fight-row:hover{border-color:var(--accent-dark);transform:translateY(-1px);box-shadow:0 4px 12px #00000059,0 0 10px #f1c40f1f}.grid{gap:16px;display:grid}.grid.cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.card{background:linear-gradient(180deg, #271e15, var(--panel));border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:6px;padding:16px;transition:border-color .12s,transform 80ms,box-shadow .12s;display:flex}.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px #0006,0 0 0 1px #f1c40f33}.card .name{font-weight:800}.card .lvl{color:var(--muted);font-size:13px}.muted{color:var(--muted)}.center{text-align:center}.field{margin-bottom:16px}.field label{color:var(--muted);margin-bottom:6px;font-size:13px;display:block}.input{border:1px solid var(--border);width:100%;color:var(--text);font-size:15px;font-family:var(--font);background:#1b140d;border-radius:8px;padding:10px 12px}.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #f1c40f26}.suggest-row{text-align:left;border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font);cursor:pointer;background:#1b140d;border-radius:8px;align-items:center;gap:10px;padding:6px 10px;transition:border-color .12s,background .12s;display:flex}.suggest-row:hover:not(:disabled){border-color:var(--accent);background:#241a10}.suggest-row:disabled{opacity:.5;cursor:default}.suggest-name{font-weight:700}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid var(--border);cursor:pointer;border-radius:8px;width:30px;height:30px}.swatch.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--accent)}.toggle{border:1px solid var(--border);border-radius:8px;display:inline-flex;overflow:hidden}.toggle button{background:var(--panel-2);color:var(--muted);cursor:pointer;font-family:var(--font);border:none;padding:9px 16px;font-size:14px}.toggle button.active{background:var(--accent);color:#2a1c05;font-weight:800}.create-layout{grid-template-columns:1fr 220px;gap:24px;display:grid}@media (width<=640px){.create-layout{grid-template-columns:1fr}}.preview-box{border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(120% 80% at 50% 0,#3a2a18,#1c150e);justify-content:center;align-items:center;padding:16px;display:flex;box-shadow:inset 0 -16px 30px #00000059}.error{border:1px solid var(--blood);color:#ffd7d2;background:#c0392b2e;border-radius:8px;margin-bottom:14px;padding:10px 12px;font-size:14px}.statrow{grid-template-columns:108px 1fr 42px;align-items:center;gap:10px;margin-bottom:9px;display:grid}.statrow .label{color:var(--muted);align-items:center;gap:6px;font-size:14px;display:inline-flex}.bar{border:1px solid var(--border-soft);background:#1b140d;border-radius:7px;height:13px;overflow:hidden}.bar>span{border-radius:6px;height:100%;display:block;box-shadow:inset 0 1px #ffffff40}.statrow .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}.statbars.compact .statrow{grid-template-columns:20px 1fr 30px;gap:7px;margin-bottom:6px}.statbars.compact .bar{height:10px}.statbars.compact .statrow .val{font-size:13px}.attr-icons{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.attr-icon{border:1px solid var(--border-soft);background:#1b140d;border-radius:7px;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex;position:relative}.attr-icon .attr-lvl{background:var(--accent);color:#1b140d;border-radius:6px;padding:1px 3px;font-size:9px;font-weight:800;line-height:1;position:absolute;bottom:-4px;right:-4px}.brute-header{grid-template-columns:200px 1fr;align-items:center;gap:24px;display:grid}@media (width<=640px){.brute-header{grid-template-columns:1fr}}.pill{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:5px;margin-right:6px;padding:3px 10px;font-size:12px;display:inline-flex}.chip{border:1px solid var(--border);color:var(--text);background:linear-gradient(#2f2417,#261d13);border-radius:999px;align-items:center;gap:6px;padding:4px 11px 4px 7px;font-size:13px;display:inline-flex}.chip .ico{color:var(--sand)}.chip .lvl-tag{color:var(--accent);font-size:11px;font-weight:700}.ico{vertical-align:-.15em;flex:none;width:1.05em;height:1.05em;display:inline-block}.rank-badge{align-items:center;gap:6px;display:inline-flex}.rank-badge .ico{width:1.2em;height:1.2em}.section-title{text-transform:uppercase;letter-spacing:1px;color:var(--muted);align-items:center;gap:8px;margin:24px 0 10px;font-size:14px;display:flex}.section-title:before{content:"";background:linear-gradient(180deg, #f7d046, var(--accent-dark));border-radius:2px;width:7px;height:15px;transform:skew(-18deg);box-shadow:0 0 8px #f1c40f4d}.section-title:after{content:"";background:linear-gradient(90deg, var(--border-soft), transparent);flex:1;height:1px}.hero{text-align:center;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 0 0 1px #f1c40f12;background:radial-gradient(130% 130% at 50% -20%,#f1c40f29,#0000 60%),linear-gradient(#2d2116,#1e1710);margin-bottom:26px;padding:32px 20px 26px;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 9px);position:absolute;inset:0}.hero .brand{text-shadow:0 3px 0 var(--blood), 0 0 26px #f1c40f40;font-size:52px;position:relative}.divider{color:var(--accent);justify-content:center;align-items:center;gap:12px;margin:14px 0;font-size:15px;display:flex}.divider:before,.divider:after{content:"";background:linear-gradient(90deg, transparent, var(--accent-dark));border-radius:2px;width:90px;max-width:22vw;height:2px}.divider:after{transform:scaleX(-1)}.reserve-panel{border-color:var(--accent);box-shadow:var(--shadow), inset 0 0 0 1px #f1c40f29}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:100;background:#0a0704b8;justify-content:center;align-items:center;padding:20px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:linear-gradient(180deg, #2a2016, var(--panel));border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:460px;max-height:88vh;padding:22px;overflow:hidden auto;box-shadow:0 20px 60px #0000008c,inset 0 0 0 1px #f1c40f14}.talent-pick{cursor:pointer;font-family:var(--font)}.levelup-gate{z-index:200}.attacks-gate{z-index:260}.levelup-modal{text-align:center;border-color:var(--accent);overflow:hidden;box-shadow:0 20px 70px #0009,0 0 0 1px #f1c40f66,0 0 44px #f1c40f38}.lu-burst{font-size:46px;line-height:1;animation:1.1s ease-in-out infinite luPulse}@keyframes luPulse{0%,to{filter:drop-shadow(0 0 6px #f1c40f80);transform:scale(1)}50%{filter:drop-shadow(0 0 16px #f1c40fd9);transform:scale(1.18)}}.reroll-zone{flex-direction:column;align-items:center;margin-top:14px;display:flex}.reroll-btn{font-family:var(--font);color:var(--accent);cursor:pointer;background:linear-gradient(#2e2114,#1d1710);border:2px dashed #f1c40f8c;border-radius:12px;align-items:center;gap:10px;padding:11px 26px;font-size:15px;font-weight:700;transition:border-color .15s,box-shadow .15s,transform .15s;display:inline-flex;box-shadow:inset 0 0 18px #f1c40f14,0 4px 14px #00000059}.reroll-btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px);box-shadow:inset 0 0 22px #f1c40f24,0 0 22px #f1c40f47}.reroll-btn:hover:not(:disabled) .reroll-dice{animation:.5s ease-in-out infinite diceShake}.reroll-btn:disabled{opacity:.6;cursor:default}.reroll-dice{font-size:20px;line-height:1}@keyframes diceShake{0%,to{transform:rotate(0)}25%{transform:rotate(-18deg)translateY(-1px)}75%{transform:rotate(14deg)translateY(1px)}}.tip{position:relative}.tip .tip-box{z-index:60;border:1px solid var(--accent);text-align:left;pointer-events:none;white-space:normal;background:#1a130c;border-radius:8px;width:max-content;min-width:150px;max-width:240px;padding:8px 10px;display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 12px 32px #0009}.tip .tip-box:after{content:"";border:6px solid #0000;border-top-color:var(--accent);position:absolute;top:100%;left:50%;transform:translate(-50%)}.tip:hover .tip-box{display:block}.coll-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;display:grid}.coll-cell{text-align:center;border:1px solid var(--border);filter:grayscale();opacity:.42;cursor:default;background:#0000002e;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;transition:transform 80ms;display:flex}.coll-cell.owned{filter:none;opacity:1;border-color:var(--accent);background:linear-gradient(180deg, #2a2013, var(--panel))}.coll-cell:hover{transform:translateY(-2px)}.coll-cell.unlockable:not(.owned):hover{opacity:.85;filter:grayscale(.2);border-color:var(--accent)}.coll-minus{z-index:2;border:1px solid var(--border);width:18px;height:18px;color:var(--text);cursor:pointer;background:#2a1a12;border-radius:6px;padding:0;font-weight:800;line-height:1;position:absolute;top:2px;left:2px}.coll-minus:hover{color:#e06a5a;border-color:#e06a5a}.coll-ico{color:var(--text);line-height:0}.coll-ico svg{width:26px;height:26px}.coll-name{color:var(--muted);font-size:10.5px;line-height:1.15}.coll-cell.owned .coll-name{color:var(--text)}.coll-lvl{color:var(--accent);font-size:10px;font-weight:700}.winbar{margin:12px 0 4px}.winbar-track{background:var(--danger);border:1px solid var(--border);border-radius:6px;height:9px;overflow:hidden}.winbar-fill{background:linear-gradient(90deg,#3fae5a,#5fd67a);height:100%}.winbar-label{margin-top:5px;font-size:12.5px;display:inline-block}.fight-row{justify-content:space-between;align-items:center;gap:10px;width:100%}.fight-row-l{align-items:center;gap:8px;min-width:0;display:flex}.fight-row-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.style-pills{flex-wrap:wrap;gap:6px;display:flex}.style-pill{cursor:pointer}.style-pill.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--text)}.lb{flex-direction:column;display:flex}.lb-row{text-align:left;border:none;border-bottom:1px solid var(--border);cursor:pointer;width:100%;color:var(--text);font-family:var(--font);background:0 0;grid-template-columns:34px 34px 1fr auto auto auto;align-items:center;gap:10px;padding:8px 12px;font-size:14px;display:grid}.lb-row:last-child{border-bottom:none}.lb-row:hover{background:#ffffff0d}.lb-row.top{background:#f1c40f12}.lb-rank{text-align:center;font-size:15px;font-weight:700}.lb-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.lb-lvl,.lb-wr{color:var(--muted);white-space:nowrap;font-size:12px}.lb-score{color:var(--accent);text-align:right;min-width:46px;font-weight:800}@media (width<=560px){.lb-row{grid-template-columns:28px 30px 1fr auto auto;gap:8px}.lb-lvl{display:none}}.talent-pick.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.btn.danger{background:linear-gradient(180deg, #e0685a, var(--blood));color:#fff;box-shadow:0 3px 0 #7a2b22, var(--shadow);border-color:#7a2b22}.btn.danger:active{box-shadow:0 1px #7a2b22}.ribbon{font-family:var(--title);letter-spacing:1px;color:#2a1c05;background:linear-gradient(180deg, #f7d046, var(--accent));border:1px solid var(--accent-dark);box-shadow:0 3px 0 var(--accent-dark), var(--shadow);border-radius:6px;padding:6px 18px;font-weight:900;display:inline-block}