@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--bg:#101116;--panel:#171920;--line:#2b2f39;--ink:#f3f0f7;--muted:#b4b5c5;--accent:#adeddc;--violet:#c4baff;--sans:Geist,'Noto Sans Thai',system-ui,sans-serif}
body{background:radial-gradient(ellipse at 80% 0,#202027 0,transparent 52%),var(--bg);font-size:15px;line-height:1.55}
.shell{grid-template-columns:220px minmax(0,1fr)}
.shell>aside{background:#121319;border-color:#242630}
aside .brand{padding:23px 18px 19px;border-color:#242630;font-size:12px;white-space:nowrap}
aside .brand b,.user-dot{background:#252e31;border-color:#3b5352}
aside nav.menu h6{color:#9498ab}
aside nav.menu a{min-height:39px;padding:8px 9px;border-radius:8px}
aside nav.menu a:hover,aside nav.menu a.active{background:#232931}
aside nav.menu a.active{border-left-color:var(--accent)}
.userbar{background:#15161e;border-color:#262934}
.shell>main{padding:clamp(20px,3.3vw,54px);max-width:1570px}
.panel,.card,table{background:var(--panel)}
.card,.panel{border-radius:17px;padding:clamp(15px,2vw,25px)}
.card,.panel,.table{border-color:var(--line)}
.page{margin-bottom:25px}
.page h1,.reference-banner h1,.character-heading h1{font-size:clamp(37px,4.8vw,70px);font-weight:750;letter-spacing:-.06em;margin:0 0 12px;line-height:1.05}
.page p{margin:0;max-width:720px}
h2{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.03em}
h3{line-height:1.3}
button,.button{min-height:40px;border-radius:9px;background:#242730}
button:hover,.button:hover{background:#303541}
.primary,button.selected{background:var(--accent);border-color:var(--accent);color:#152523}
.primary:hover,button.selected:hover{background:#cbf9ed}
input,select,textarea{background:#13151d;border-color:#353944;border-radius:8px}
.link:hover{text-decoration:underline}
.section-title{margin:28px 0 15px}
.section-title p{margin:3px 0 0}
.panel>.section-title:first-child,.build-preview>.section-title:first-child{margin-top:0}
.grid{gap:15px}
.avatar{object-fit:cover;background:#292d39;border-color:#515469}
.home-hero{border-color:#3e3445;border-radius:24px;min-height:clamp(360px,44vw,520px);padding:clamp(26px,5vw,70px);background:radial-gradient(ellipse at 71% 39%,#704c69 0,#342a41 47%,#1b1b23 85%)}
.home-hero img:not(.avatar){width:72%;height:151%;top:-25%;right:-11%;object-fit:contain}
.home-hero:after{background:linear-gradient(90deg,#16161ff5 9%,#201b2bcf 35%,#1b142551 64%,transparent 92%)}
.home-hero h1{font-size:clamp(59px,8.4vw,124px);letter-spacing:-.092em;line-height:.83;margin:22px 0}
.home-hero p{max-width:305px;color:#f0e9f5}
.home-hero .eyebrow{letter-spacing:.12em;color:#e4c5e1}
.home-hero .eyebrow b{border:1px solid #b68eaa88;border-radius:20px;padding:2px 8px;margin-left:4px;color:#f9e0ed}
.hero-guide{display:flex;align-items:center;gap:11px;position:absolute;right:20px;bottom:20px;z-index:2;background:#171820e8;border:1px solid #ffffff33;border-radius:13px;padding:8px 13px 8px 8px}
.hero-guide .avatar{position:static;filter:none;width:48px;height:48px}
.hero-guide small{display:block;color:var(--accent)}
.home-section{margin-top:36px}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.news-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:15px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;align-items:center}
.news-tile small{grid-column:1/-1;color:var(--muted)}
.news-tile span{color:var(--accent)}
.news-tile:hover{border-color:var(--accent)}
.tier-method{margin:0 0 15px;padding:12px 16px}
.tier-scroll{border-radius:16px;scrollbar-width:thin}
.tier-row{min-width:730px;background:#181a22;border-color:#343540}
.tier-head{background:#20232c}
.tier-cell{gap:8px;align-content:start;padding:10px}
.rank-label{border-right-color:#353848}
.unit-card{width:72px;min-width:0;background:#1f222c;border:1px solid #323644;padding:4px;border-radius:9px;display:flex;flex-direction:column}
.unit-card:hover{border-color:var(--accent);background:#293038}
.unit-portrait{position:relative;width:100%}
.unit-card .avatar{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:6px}
.unit-card span{font-size:10px;line-height:1.24;margin:4px 0;overflow-wrap:anywhere}
.new-badge,.movement{position:absolute;top:3px;left:2px;background:#fae8ad;color:#2a2130;padding:1px 4px;border-radius:4px;font-size:9px;line-height:15px}
.movement{left:auto;right:2px;font-size:13px}
.movement.rise{background:#afedd3;color:#18332a}
.movement.fall{background:#f2aebb;color:#401827}
.character-banner{border-radius:22px;background:radial-gradient(ellipse at 74% 28%,#4d3a55,#242230 70%);border-color:#423749}
.character-heading .avatar{width:94px;height:94px;object-fit:cover;border-radius:16px}
.character-tabs{border-radius:13px;scrollbar-width:thin;background:#191a22}
.character-tabs a.active{color:var(--accent);background:#253134}
.character-rating{flex-wrap:wrap}
.character-rating span{display:inline-flex;align-items:center;gap:7px}
.rank-next{color:var(--accent);min-width:27px;min-height:27px;display:grid;place-items:center;border-radius:6px;background:#273437}
.directory-card{background:#1b1d25;border-color:#333542}
.directory-card .avatar{object-fit:cover}
.kit-section{margin-bottom:20px}
.skill-grid,.trace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.skill-card{padding:18px;border:1px solid var(--line);background:linear-gradient(150deg,#21222d,#181920 63%);border-radius:15px}
.skill-head{display:flex;align-items:start;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.skill-head small{color:var(--accent);font-weight:700}
.skill-head h3{margin:2px 0 0;font-size:clamp(16px,1.65vw,22px)}
.skill-level{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)}
.skill-level select{min-width:53px;padding:4px}
.skill-desc{white-space:pre-line}
.skill-note,.trace-card p{color:var(--muted)}
.skill-params{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.skill-params div{border:1px solid #3e3d4d;border-radius:8px;padding:5px 8px}
.skill-params dt{font-size:11px;color:var(--muted)}
.skill-params dd{margin:0;color:var(--accent);font-weight:700}
.item-art{width:57px;height:57px;object-fit:contain;flex:none;vertical-align:middle}
.item-name{display:flex;gap:10px;align-items:center}
.guide-equipment>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 12px}
.guide-equipment img{grid-row:span 2}
.guide-equipment dd{grid-column:2}
.warp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.warp-card{border:1px solid var(--line);border-top-color:var(--warp);border-radius:16px;overflow:hidden;background:var(--panel);min-width:0}
.warp-art{height:clamp(105px,13vw,202px);background:radial-gradient(ellipse,color-mix(in srgb,var(--warp),#21212b 68%),#181921)}
.warp-image{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.warp-info{padding:15px 16px}
.warp-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.warp-status{border-radius:20px;padding:3px 8px;font-size:11px;background:#263942;color:#bbf3ff}
.warp-status.live{background:#253e36;color:#b5efd9}
.warp-status.estimate{background:#392f44;color:#e1c5fb}
.warp-status.ended{background:#2a2c37;color:#c2c5d3}
.warp-info h3{font-size:20px;margin:7px 0 3px}
.warp-info p{margin:6px 0 12px;font-size:13px;color:var(--muted)}
.warp-units{display:flex;gap:8px;flex-wrap:wrap}
.warp-units a{display:flex;align-items:center;gap:5px;font-size:12px;flex:1 0 100%}
.warp-units .avatar{width:30px;height:30px}
.warp-units a:hover{color:var(--accent)}
.warp-cones a{color:#e1d3ff}
.calendar-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.calendar-controls>div:first-child{margin-right:auto}
.calendar-controls select{min-width:145px}
.calendar-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px}
.calendar{min-width:600px}
.day-grid,.calendar-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.day-grid span{padding:5px 9px;border-right:1px solid var(--line)}
.day-grid span:last-child{border-right:0}
.day-labels{background:#22242d;color:var(--muted);text-align:center}
.calendar-week{border-top:1px solid var(--line);min-height:72px}
.calendar-week .outside{color:#7e8192}
.calendar-week .today{color:var(--accent);background:#2b3c3c;font-weight:800}
.calendar-bars{gap:3px 0;padding-bottom:5px}
.calendar-bars button{font-size:12px;text-align:left;min-height:0;padding:3px 7px;color:#18171c;background:var(--warp);border-color:transparent;border-radius:5px;margin:0 3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calendar-bars button:hover{filter:brightness(1.18)}
.calendar-bars button.estimate{background:#252330;color:var(--warp);border:1px dashed var(--warp)}
#warpSelection{margin-top:15px}
#warpSelection .warp-art{display:none}
.build-heading{margin-bottom:18px}
.build-lookup{display:flex;align-items:center;justify-content:space-between;gap:10px 25px;flex-wrap:wrap}
.build-lookup h2{font-size:21px}
.build-lookup p{margin:3px 0 0}
.lookup-status{flex-basis:100%}
.lookup-status:empty,.compare-status:empty,#cardStatus:empty{display:none}
.build-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.build-form .field{margin:0}
.build-form input{min-width:147px}
.build-empty{margin-top:20px;display:flex;gap:24px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(120deg,#202630,#181a21)}
.build-empty img{width:86px;height:86px;border-radius:12px}
.build-roster{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;margin:17px 0}
.build-roster a{display:flex;align-items:center;gap:8px;background:#181a22;border:1px solid var(--line);border-radius:9px;font-size:13px}
.build-roster a.active{background:#283438;border-color:#72ab9d;color:#cbfaee}
.build-roster .avatar{width:33px;height:33px}
.build-layout{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:13px;align-items:start}
.build-preview{min-width:0}
.build-preview .section-title{flex-wrap:wrap}
.format-toggle{display:flex;padding:3px;gap:4px;background:#111318;border-radius:10px}
.format-toggle button{background:transparent;border:0;min-height:31px;padding:3px 8px;color:var(--muted)}
.format-toggle button[aria-pressed='true']{background:#303742;color:#fff}
.canvas-stage{background:#0d0f15;border:1px solid #33343d;border-radius:12px;overflow:hidden;text-align:center}
#buildCard{display:block;width:100%;height:auto;margin:auto}
.canvas-stage[data-format='portrait'] canvas{max-width:510px}
.share-actions{display:flex;align-items:center;gap:8px;margin-top:13px;flex-wrap:wrap}
.grade-panel{display:grid;justify-items:start;gap:7px}
.grade-panel small,.grade-panel p{color:var(--muted);margin:0}
.grade-panel strong{font-size:clamp(40px,5vw,73px);line-height:.98;letter-spacing:-.055em}
.grade-panel b{font-size:20px}
.grade-panel .link{font-size:13px}
.build-section{margin-top:16px}
.build-section h2{margin-bottom:12px}
.upgrade-list{display:grid;gap:10px;padding-left:26px;margin:8px 0 0}
.upgrade-list li{padding:8px 11px;background:#21232b;border-radius:9px}
.upgrade-list li::marker{color:var(--accent);font-weight:700}
.upgrade-list p,.fit-item p{margin:3px 0;color:var(--muted)}
.fit-grid,.relic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fit-item{display:flex;align-items:start;gap:12px;padding:12px;border-radius:10px;background:#21232b;min-width:0}
.fit-item h3{margin:0 0 5px}
.fit-item small{display:block;margin-top:5px}
.relic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.relic-tile{border:1px solid var(--line);border-radius:11px;padding:10px;background:#1e2029;min-width:0}
.relic-tile h3,.relic-tile p{margin:1px 0 5px}
.relic-tile p,.relic-tile small,.relic-tile dt{color:var(--muted)}
.relic-top{display:flex;align-items:center;gap:5px}
.relic-top .item-art{width:43px;height:43px}
.relic-top>b{margin-left:auto;font-size:25px}
.relic-score,.relic-tile dl div{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap}
.relic-score{border-bottom:1px solid var(--line);font-size:12px;color:var(--accent);padding:5px 0}
.relic-tile dl{font-size:12px;margin:5px 0 0}
.relic-tile dd{margin:0;font-variant-numeric:tabular-nums}
.weights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px}
.weights>div{display:grid;grid-template-columns:105px minmax(30px,1fr) 36px;gap:8px;align-items:center;font-size:13px}
.weights meter{width:100%;accent-color:var(--accent)}
.weights meter::-webkit-meter-optimum-value{background:#8ed2bf}
.method-list{padding-left:20px;color:var(--muted)}
.grade-scale,.comparison-result{display:flex;flex-wrap:wrap;gap:8px}
.grade-scale span,.comparison-result>div{border:1px solid var(--line);padding:8px;border-radius:7px;background:#21232b}
.comparison-result>div{display:grid;flex:1;min-width:135px;gap:3px}
.comparison-result small{color:var(--muted)}
@media(max-width:1100px){.shell{grid-template-columns:185px minmax(0,1fr)}.shell>main{padding:24px}.warp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.build-layout{grid-template-columns:minmax(0,1fr)}.grade-panel{grid-template-columns:auto auto 1fr;align-items:center}.grade-panel strong{grid-row:2}.grade-panel b{grid-row:2}.grade-panel p{grid-row:2}.grade-panel .link{grid-row:3}}
@media(max-width:820px){.shell{grid-template-columns:155px minmax(0,1fr)}aside .brand{padding:12px 9px;font-size:10px}.shell>main{padding:17px}.grid,.relic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fit-grid,.skill-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.shell{display:block}.shell>aside{position:sticky;z-index:8;top:0;height:auto;border:0;border-bottom:1px solid var(--line)}aside .brand{padding:8px 12px}aside .surface{display:none}aside nav.menu{padding:3px 7px}aside nav.menu a{flex:none;padding:5px 9px;min-height:34px}.home-hero{min-height:410px;align-items:start;padding:25px}.home-hero img:not(.avatar){top:-1%;right:-23%;width:112%;height:118%;opacity:.73}.home-hero:after{background:linear-gradient(90deg,#171723ee,#17172358)}.hero-guide{bottom:10px;right:10px}.warp-grid,.news-grid,.weights{grid-template-columns:minmax(0,1fr)}.warp-art{height:155px}.character-heading .avatar{width:66px;height:66px}.grade-panel{gap:7px}.build-lookup{display:grid}.build-empty{padding:14px;gap:12px}.build-empty img{width:63px;height:63px}.skill-card{padding:14px}.trace-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:370px){.relic-grid,.grid{grid-template-columns:minmax(0,1fr)}.grade-panel{grid-template-columns:auto 1fr}.grade-panel p{grid-row:3}.grade-panel .link{grid-row:4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.mobile-quick{display:none}
@media(max-width:650px){
  .mobile-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 7px 6px;gap:3px}
  .mobile-quick a,.mobile-quick button{display:grid;place-items:center;text-align:center;padding:4px;min-height:33px;font-size:12px}
  .shell>aside{overflow:visible}
  aside nav.menu{display:none}
  aside:has(#mobileMenu[aria-expanded='true']) nav.menu{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;max-height:65vh;padding:8px;background:#171820;border-bottom:1px solid var(--line);box-shadow:0 18px 30px #0008}
  aside nav.menu h6{display:block}
  .grade-panel{grid-row:1}
}