@import url('/builds/saved-build.css');
@import url('/fonts/be-vietnam-pro/font.css');
:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#233147;background:#f7f9fc;--muted:#8490a1;--line:#e7ebf1;--blue:#2866ed;--ink:#c94d4c;--tint:#fbe4e4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 13%,#fff0f26e,transparent 50%),radial-gradient(ellipse at 100% 5%,#e7f7ff8a,transparent 45%),#f7f9fc;min-height:100vh}a{color:var(--blue);text-decoration:none}button,input,select{font:inherit}button,a,input,select,summary{outline-offset:4px}button,.btn{border:1px solid var(--line);background:white;border-radius:9px;padding:10px 14px;color:#35445a;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}button:hover,.btn:hover{border-color:#b5c8ed;background:#f3f7ff}.primary{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}[hidden]{display:none!important}.site-header{height:68px;background:#ffffffec;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:48px;padding:0 max(24px,calc((100vw - 1320px)/2));white-space:nowrap}.brand{font-size:26px;letter-spacing:-1.4px;color:#17263d;font-weight:800;line-height:1}.brand span{display:block;font-size:8px;letter-spacing:1.5px;margin-top:5px;color:#78869a}.site-header nav{display:flex;gap:30px;height:100%;align-items:center;font-size:12px;font-weight:600}.site-header nav a{height:100%;display:flex;align-items:center;color:#637188;border-bottom:3px solid transparent}.site-header nav a.active{color:#2c64d8;border-bottom-color:#2c64d8}.local-badge{margin-left:auto;font-size:9px;color:#6c83a8;border:1px solid #dce7f6;padding:6px 9px;border-radius:7px;letter-spacing:1px}.page{max-width:1220px;margin:36px auto 64px;padding:0 24px}.back-link{display:inline-block;color:#7a879a;font-size:12px;margin:0 0 18px}.build-banner{border:1px solid #ffffff;background:linear-gradient(105deg,white 35%,var(--tint));border-radius:19px;padding:22px;box-shadow:0 6px 24px #30445c06;margin-bottom:20px}.banner-top{display:flex;align-items:center;gap:16px}.banner-top>img{width:63px;height:63px;background:white;border:3px solid var(--tint);border-radius:50%;object-fit:contain;padding:3px}.banner-title{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.banner-title h1{font-size:23px;line-height:1.4;margin:0;letter-spacing:-.6px}.cp-tag{background:#fff;border:1px solid var(--line);box-shadow:0 2px 4px #22334a09;border-radius:7px;padding:5px 10px;font-size:13px;white-space:nowrap}.cp-tag small{font-size:10px;color:#8894a4;margin-right:8px}.byline{font-size:11px;color:#8290a2;margin:7px 0 0}.byline b{color:#46556c;font-weight:500}.banner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.vote-count{font-size:12px;background:white;border:1px solid var(--line);border-radius:9px;padding:10px 14px;color:#64768f}.build-layout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.25fr);align-items:start;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 5px 14px #30445c05;padding:22px;min-width:0}.panel h2{font-size:17px;margin:0 0 20px;letter-spacing:-.5px}.panel h3{font-size:12px;margin:0 0 12px;font-weight:600}.creature-card{padding:0;overflow:hidden}.creature-header{padding:22px 22px 0;display:flex;align-items:start;justify-content:space-between;gap:10px}.creature-header h2{font-size:26px;margin:0 0 9px;letter-spacing:-1px}.tag-row{display:flex;gap:5px;flex-wrap:wrap}.tag{background:#f0f3f8;border-radius:6px;padding:5px 8px;font-size:10px;font-weight:600;display:inline-flex;gap:5px;align-items:center}.tag.element{background:var(--ink);color:#fff}.tag.role{background:#435063;color:white}.tag.form{color:var(--ink);background:var(--tint)}.level-ring{border:4px solid var(--ink);border-left-color:var(--tint);width:66px;height:66px;border-radius:50%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:none}.level-ring small{font-size:7px;color:#8895a5}.level-ring strong{font-size:23px}.personality{display:flex;gap:4px;align-items:center;font-size:10px;color:#8b94a4;margin-top:12px}.personality span{width:17px;height:17px;border-radius:50%;background:#68b0d1;color:white;display:grid;place-items:center;font-size:9px;font-weight:700}.personality span:last-of-type{background:#bd8dbe}.personality em{font-style:normal;margin-left:5px}.creature-art{height:310px;background:radial-gradient(ellipse at 75% 65%,var(--tint),transparent 65%);position:relative;display:flex;align-items:center;justify-content:center;margin-top:8px}.creature-art>img{width:94%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 12px #23304410)}.creature-art .form-label{position:absolute;bottom:7px;right:18px;font-size:10px;color:var(--ink);background:#ffffffb5;padding:5px 9px;border-radius:6px}.stats-summary{padding:18px 20px 0;border-top:1px solid #f1f3f7}.combat-power{display:flex;justify-content:space-between;align-items:center;color:#8490a1;font-size:11px}.combat-power strong{font-size:19px;color:#35435c}.radar{width:100%;height:255px;display:block}.radar text{font-family:inherit}.effect-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}.effect-chips span{font-size:10px;border-radius:5px;background:#f5f6fa;padding:6px 8px;color:#59687d}.stat-detail{font-size:11px;border-top:1px solid var(--line);padding:13px 0 18px}.stat-detail summary{color:#6a7b95;cursor:pointer}.right-column{display:grid;gap:18px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panel-title h2{margin:0}.budget{font-size:12px;background:#fff7e7;color:#a87a2b;padding:7px 10px;border-radius:7px}.potential-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.potential{text-align:center;min-width:0}.potential-ring{width:min(100%,78px);aspect-ratio:1;border-radius:50%;padding:4px;margin:0 auto 9px;background:conic-gradient(#77cce2 0 var(--innate),#f3dc71 var(--innate) var(--awaken),#b6a0d8 var(--awaken) var(--extra),#edf0f5 var(--extra) 100%);box-shadow:inset 0 0 0 1px #e7eaf0;display:flex}.potential-ring strong{border-radius:50%;width:100%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#b6bacb,#777f99);color:white;font-size:25px;border:3px solid white}.potential .stat-label{display:inline-block;background:#7b879c;color:white;border-radius:6px;padding:4px 6px;font-size:8px;white-space:nowrap}.potential small{display:block;margin-top:10px;color:#8996a7;font-size:8px}.innate-box{display:inline-block;margin-top:6px;border:1px solid #dce1e9;border-radius:6px;min-width:30px;padding:3px 6px;font-size:11px;font-weight:600}.potential .allocation{font-size:8px;line-height:1.8;color:#8996a7;margin-top:5px}.ring-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:9px;color:#8996a7;margin-top:18px}.ring-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.resource-block{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.resource{display:flex;align-items:center;gap:7px;background:#f6f8fb;border-radius:8px;padding:10px 8px;min-width:0}.resource img{width:27px;height:27px;object-fit:contain}.resource span{font-size:9px;line-height:1.6;color:#8290a3;flex:1;min-width:0}.resource b{font-size:10px;white-space:nowrap}.lower-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.resonance-stars{color:#ead375;font-size:23px;letter-spacing:3px;line-height:1.7;text-align:center;margin:12px 0 18px}.resonance-stars .off{color:#dfe4ed}.resonance-progress{height:7px;border-radius:4px;background:#edf0f6;overflow:hidden;margin-bottom:8px}.resonance-progress i{display:block;height:100%;background:linear-gradient(90deg,#82c9df,#aea4d7);border-radius:4px}.resonance-caption{display:flex;justify-content:space-between;font-size:10px;color:#8896aa;margin-bottom:22px}.stat-gains{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:15px 0}.stat-gains div{font-size:10px;color:#8996a8}.stat-gains strong{display:block;margin-top:4px;font-size:14px;color:#475975}.stat-gains div:last-child{grid-column:1/-1;background:#f4f6fc;border-radius:7px;padding:10px}.lower-panels .resources{grid-template-columns:1fr}.item-header{display:flex;align-items:center;gap:12px}.item-header img{width:59px;height:59px;object-fit:contain}.item-header small{color:#b09147;font-size:8px;letter-spacing:1.5px}.item-header h3{font-size:15px;line-height:1.6;margin:3px 0}.item-header span{font-size:10px;color:#8491a4}.item-level{display:flex;justify-content:space-between;font-size:10px;color:#8995a8;margin:20px 0 8px}.enhance-bar{display:flex;gap:3px}.enhance-bar i{height:12px;flex:1;background:#ecce7b;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.enhance-bar .off{background:#edf0f5}.item-stat{padding:15px 0;border-bottom:1px solid var(--line);font-size:11px;display:flex;justify-content:space-between;gap:10px}.item-stat b{color:#3c6ab3}.passive{font-size:11px;line-height:1.9;color:#6b7a90}.passive h3{font-size:11px;color:#34445a;margin:18px 0 7px}.snapshot-note{font-size:10px;color:#94a0b1;line-height:1.9;margin:18px 0}.extra-panel{margin-top:20px}.extra-panel>summary{cursor:pointer;font-size:13px;font-weight:600}.skills{display:grid;gap:8px;margin:20px 0}.skill{display:flex;align-items:center;gap:12px;background:#f7f9fc;border:1px solid #edf0f6;border-radius:9px;padding:12px}.skill img{width:40px;height:40px;object-fit:contain}.skill span{flex:1;font-size:12px}.skill small{display:block;color:#8b97aa;font-size:10px;margin-top:5px}.skill>b{font-size:11px;font-weight:500;color:#708299}.build-table{border-collapse:collapse;width:100%;font-size:10px;margin-top:15px}.build-table th,.build-table td{text-align:left;border-bottom:1px solid #eef1f6;padding:9px 4px}.build-table th{color:#95a0af;font-weight:500}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.source-note{font-size:10px;color:#94a0b1;line-height:1.9;margin-top:22px}.directory-title h1{font-size:34px;letter-spacing:-1.2px;margin:10px 0}.directory-title p{color:#8190a4;font-size:13px;line-height:1.9}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#91a0b5}.directory-counts{display:flex;gap:20px;font-size:12px;color:#8190a4;margin-top:20px}.directory-counts b{color:#364d72}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.toolbar input,.toolbar select{border:1px solid #e0e6f0;border-radius:9px;background:white;padding:12px;color:#526680;font-size:12px}.toolbar input{flex:1;min-width:200px}.muted{color:#8996a8;font-size:12px}.build-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.community-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;box-shadow:0 3px 12px #24364f04}.community-card>img{float:right;width:78px;height:78px;object-fit:contain;background:var(--tint);border-radius:12px;padding:3px}.community-card h2{font-size:20px;margin:8px 0 12px}.community-card .eyebrow{font-size:9px;color:var(--ink)}.community-card p{font-size:11px;line-height:1.9;color:#8491a4}.community-card .tag{font-size:8px;padding:4px 6px}.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.card-bottom small{font-size:10px;color:#8b98ab}.card-bottom .btn{font-size:11px;padding:8px 12px}.site-footer{max-width:1220px;margin:0 auto;padding:24px;border-top:1px solid #e5eaf2;display:flex;justify-content:space-between;gap:20px;color:#94a0b1;font-size:10px;line-height:1.8}.site-footer b{color:#6e8099}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#253b5a;color:white;border-radius:9px;padding:12px 18px;font-size:12px;z-index:9}#toast:empty{display:none}
@media(max-width:1000px){.site-header{gap:25px}.site-header nav{gap:18px}.build-layout{grid-template-columns:minmax(270px,.8fr) minmax(0,1fr)}.potential-grid{grid-template-columns:repeat(3,1fr);row-gap:20px}.lower-panels{grid-template-columns:1fr}.lower-panels .resources{grid-template-columns:repeat(3,1fr)}.potential-ring{width:75px}.resources{gap:5px}.resource{padding:8px 5px}.build-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.site-header{padding:12px 16px;height:auto;flex-wrap:wrap;gap:15px}.site-header nav{order:3;width:100%;height:30px;justify-content:space-between;gap:12px;font-size:10px}.page{padding:0 14px;margin-top:24px}.build-layout{grid-template-columns:1fr}.banner-title h1{font-size:19px}.banner-top>img{width:52px;height:52px}.build-banner{padding:16px}.creature-art{height:290px}.panel{padding:18px}.creature-card{padding:0}.potential-grid{grid-template-columns:repeat(6,1fr);gap:6px}.potential-ring strong{font-size:19px}.potential .stat-label{font-size:6px;padding:4px}.potential small,.potential .allocation{font-size:7px}.lower-panels{grid-template-columns:1fr 1fr}.lower-panels .resources{grid-template-columns:1fr}.build-grid{grid-template-columns:1fr}.site-footer{padding:20px 14px;flex-direction:column;gap:6px}.directory-title h1{font-size:29px}}@media(max-width:420px){.potential-grid{grid-template-columns:repeat(3,1fr)}.lower-panels{grid-template-columns:1fr}.resources{grid-template-columns:1fr}.resource span{font-size:10px}.banner-actions .btn{font-size:10px}}

.creature-art canvas{width:100%;height:100%;object-fit:contain}.animation-toggle{position:absolute;bottom:7px;left:18px;padding:5px 8px;font-size:9px;background:#ffffffb5;color:#8190a4;border:0}