@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
:root{--bg:#0b1730;--panel:#122445;--line:#30466a;--text:#f7f5ef;--muted:#aebcd3;--gold:#ddbd76;--orange:#ebcc85}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button{border:0;background:none}button:hover{filter:brightness(1.16)}[hidden]{display:none!important}.app-shell{max-width:1920px;margin:auto;display:flex;min-height:100vh}.sidebar{width:228px;flex-shrink:0;border-right:1px solid var(--line);padding:36px 22px 24px;display:flex;flex-direction:column;background:#081226}.brand{display:flex;gap:12px;align-items:center;font-family:'Cormorant Garamond',serif;font-size:29px;line-height:.92;letter-spacing:2px;color:#d4b784}.brand-mark{font-size:58px;font-weight:400}.brand small{display:block;font:7px sans-serif;letter-spacing:1.2px;margin-top:12px;color:#9b917b}.chapter{font:9px sans-serif;letter-spacing:1px;color:#b4a17d;margin:54px 10px 20px}.chapter span{display:block;font-size:8px;color:#666b60;margin-top:8px}nav{display:grid;gap:7px}.nav-item{text-align:left;display:flex;gap:12px;align-items:center;padding:14px 10px;font-size:12px;color:#a5b6d0;white-space:nowrap;border-left:2px solid transparent}.nav-item>span{font-size:21px;width:20px;text-align:center}.nav-item small{margin-left:auto;color:#707869;font:9px sans-serif}.nav-item.active{background:linear-gradient(90deg,#a0864526,transparent);color:#e6c58c;border-left-color:#c5a369}.sidebar-bottom{margin-top:auto;padding:80px 12px 0;color:#737b6f}.seal{font-size:52px;color:#595e4f}.sidebar-bottom p{font-size:13px;line-height:1.9;color:#aebcd2}.local-status{font:8px sans-serif;letter-spacing:.6px;display:block;margin-top:32px;color:#909b7b}.sidebar-bottom>small{display:block;font:8px sans-serif;margin-top:12px;color:#595f54;letter-spacing:1px}.main-shell{min-width:0;flex:1}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 42px}.breadcrumb{font:9px sans-serif;letter-spacing:1.6px;color:#7e8479;flex:1}.breadcrumb span{margin:0 14px;color:#4e554a}.breadcrumb b{font-weight:400;color:#bdbca9}.wallet{display:flex;align-items:center;gap:12px;padding:7px 8px 7px 15px;border:1px solid var(--line);background:#112441}.crystal{color:#e4ba76;font-size:20px}.wallet>span:nth-child(2){font:18px Georgia}.wallet small{color:#8b937f;font-size:11px}.wallet button{background:#233c62;color:#c9d0b5;font-size:20px;width:28px;height:28px;line-height:22px}.profile{height:33px;width:33px;border:1px solid #71775f;border-radius:50%;display:grid;place-items:center;color:#c5c7ae;font:14px Georgia}main{padding:32px 42px 20px;max-width:1540px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}.eyebrow{font:9px sans-serif;letter-spacing:2.7px;color:#c2aa7b;margin:0 0 9px}h1{font-size:29px;font-weight:500;line-height:1.4;margin:0 0 6px}p{line-height:1.8}.muted{color:var(--muted);font-size:12px;margin:0}.tag{display:inline-flex;gap:8px;align-items:center;color:#c2cde0;border:1px solid #3c4235;font-size:9px;padding:8px 10px;letter-spacing:.4px;white-space:nowrap}.tag i{width:5px;height:5px;background:#aebd86;border-radius:50%}.banner{position:relative;min-height:420px;border:1px solid #534b38;overflow:hidden;background:#13294a}.banner-art{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.banner:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#08152dee 0%,#08152dad 30%,transparent 63%),linear-gradient(0deg,#0a173080,transparent 35%);box-shadow:inset 0 0 90px #060e2050}.banner-copy{position:relative;z-index:1;padding:37px 40px;width:54%}.banner-kicker{font:8px sans-serif;letter-spacing:2.1px;color:#c9b78f;display:flex;align-items:center;gap:9px}.banner-kicker>span{height:1px;background:#bfa064;width:22px}.banner h2{font-size:44px;line-height:1.28;font-weight:500;margin:18px 0;color:#fff9ed;text-shadow:0 2px 22px #000}.banner h2>span{display:block;font:11px 'Cormorant Garamond',serif;letter-spacing:5px;margin-top:12px;color:#b2a48d}.banner-copy>p{font-size:12px;color:#becade;margin:15px 0 22px}.stars{color:#d4ad66;font-size:11px;letter-spacing:3px}.featured h3{font-weight:500;font-size:19px;margin:5px 0}.featured h3 span{font:11px Georgia;color:#e4bf7c;border:1px solid #967641;padding:2px 5px;margin-left:9px}.featured p{font:9px sans-serif;letter-spacing:1.2px;color:#a6aa97;margin:8px 0 15px}.featured p span{padding:0 8px}.text-button{padding:0;color:#d1ba91;font-size:11px;border-bottom:1px solid #74634555;padding-bottom:4px}.text-button span{padding-left:20px}.art-label{position:absolute;right:18px;top:18px;z-index:2;color:#a7a18b;font:7px sans-serif;letter-spacing:1.8px}.banner-number{position:absolute;z-index:1;bottom:25px;right:28px;font:56px 'Cormorant Garamond',serif;color:#cfb88988;text-align:right;line-height:1}.banner-number span{display:block;font:8px sans-serif;letter-spacing:2px;margin-top:8px}.ritual-panel{padding:22px 24px;border:1px solid var(--line);border-top:0;background:#10213f;display:flex;gap:30px;align-items:center}.pity-block{flex:1;min-width:190px}.pity-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c8c4ae}.pity-label strong{color:#dbbd84;font:12px Georgia}.progress-track{height:3px;background:#2a4063;margin-top:12px}.progress-track>span{display:block;height:100%;background:#c1a16b;transition:width .3s}.pity-block p{font-size:9px;color:#a7b6d0;margin:9px 0 0}.pity-block p b{font-weight:400;color:#c8be9d}.pity-block p button{font-size:9px;padding:0;float:right;color:#c1b08d}.summon-actions{display:flex;gap:12px;flex:1.25}.pull{border:1px solid #7b7156;padding:10px 20px;min-height:65px;min-width:132px;text-align:left}.pull>span{display:block;font-size:16px}.pull>small{display:block;font:10px sans-serif;margin-top:7px}.pull i{font-family:'IBM Plex Sans Thai';font-style:normal;font-size:9px;opacity:.75;margin-left:12px}.primary{background:linear-gradient(120deg,#c7a065,#e1c38d);color:#29261d;border:1px solid #e5c78a}.secondary{color:#d3c19d;background:#152a4d}.pull.primary{flex:1}.pull b{float:right;font-weight:400}.roster-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}.roster-heading h2{font-size:17px;font-weight:500;margin:0}.roster-heading h2 span{font-size:10px;color:#929b84;padding-left:12px}.roster-heading .eyebrow{font-size:8px;margin-bottom:6px}.preview-roster{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.character-card{padding:0;position:relative;text-align:left;border:1px solid #3d4437;background:#152b50;overflow:hidden;transition:transform .2s,border-color .2s;min-width:0}.character-card:hover{transform:translateY(-4px);border-color:#b29b68}.character-card img{width:100%;height:175px;object-fit:cover;display:block}.character-card .card-meta{padding:10px 12px;background:linear-gradient(#172e52,#0d1d39)}.card-meta strong{font-size:12px;display:block;font-weight:500}.card-meta small{font-size:9px;color:#adbed7}.rarity{position:absolute;top:10px;right:10px;font:10px Georgia;letter-spacing:1px;background:#141613bd;padding:4px 6px;border:1px solid currentColor;color:#aab6a1}.rarity.SSR{color:#e1b975}.rarity.SR{color:#bca5d5}.owned-tag{position:absolute;top:10px;left:9px;background:#101f3cdc;font-size:8px;color:#ccd6ba;padding:4px}.bottom-note{display:flex;justify-content:space-between;font-size:9px;color:#9aaccc;margin-top:18px}footer{display:flex;justify-content:space-between;border-top:1px solid #2b3128;padding:20px 42px;font:8px sans-serif;letter-spacing:1.4px;color:#63705b}footer>span:first-child{font-family:Georgia;color:#8f9a7d}.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.collection-grid .character-card img{height:240px}.filters{display:flex;gap:10px;margin:24px 0}.filters button{padding:8px 22px;border:1px solid #3c4435;color:#adb69e}.filters .selected{border-color:#c4aa71;color:#e6cb94;background:#c4aa7111}.history-row{display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--line);background:#122745}.history-row img{width:48px;height:60px;object-fit:cover}.history-row .history-name{flex:1}.history-row strong{display:block;font-weight:500}.history-row small{font-size:10px;color:#aabbcf}.history-row .history-rarity{color:#d9bc85;font:13px Georgia}.empty-state{padding:65px 20px;text-align:center;border:1px dashed #3c4633;color:#b7c7e0}.empty-state button{display:block;margin:20px auto 0;padding:12px 25px}.asset-intro{border:1px solid var(--line);padding:26px;background:#122442;margin:22px 0}.asset-intro>span{font:9px sans-serif;letter-spacing:2px;color:#cbb17c}.asset-intro h2{font-size:20px;font-weight:500}.asset-intro p{font-size:13px;color:#b6c5dd}.asset-table{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}td,th{border-bottom:1px solid #35402e;padding:18px 14px;font-size:12px}th{color:#c6b488;font-weight:500}td{color:#d6deec}td small{color:#85947b;font-size:10px}dialog{background:#10213f;color:var(--text);border:1px solid #8e7a50;padding:36px;max-width:min(1100px,94vw);max-height:90vh;box-shadow:0 30px 120px #0009}dialog::backdrop{background:#050d20d9;backdrop-filter:blur(7px)}.close-dialog{position:absolute;right:12px;top:8px;font-size:28px;color:#b9c3aa}.detail{display:grid;grid-template-columns:220px 1fr;gap:28px;max-width:650px}.detail img{width:220px;border:1px solid #5b6148}.detail h2{font-size:27px;font-weight:500}.detail p{font-size:13px;color:#bfcee4}.detail small{color:#cfb780}.detail .detail-label{font:11px Georgia;letter-spacing:3px}.rates-content{max-width:540px}.rates-content h2{font-size:24px;font-weight:500}.rates-content p,.rates-content li{font-size:13px;color:#bfcee4;line-height:1.9}.rate-row{display:flex;justify-content:space-between;padding:14px;border-bottom:1px solid #39432f;color:#ddc28b}.result-header{text-align:center;margin:8px 0 24px}.result-header h2{font-size:24px;font-weight:500}.result-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px}.result-grid.single{grid-template-columns:240px;justify-content:center}.result-grid.single img{height:290px}.result-grid .character-card{animation:reveal .5s both;animation-delay:var(--delay)}.result-grid img{height:180px}.continue-button{display:block;margin:25px auto 0;padding:12px 40px}.new-badge{color:#e4cb8b!important}.result-grid .card-meta small{display:block}#ritual-overlay{position:fixed;inset:0;z-index:10;background:radial-gradient(ellipse,#233e68,#07142c 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ead19a}.ritual-circle{width:240px;height:240px;border:1px solid #b89960;border-radius:50%;display:grid;place-items:center;font-size:140px;box-shadow:0 0 100px #cca45333,inset 0 0 80px #cca45333;animation:ritual 2s ease-in-out infinite}.ritual-circle:after{content:'';position:absolute;inset:12px;border:1px dashed #b8996066;border-radius:50%}#ritual-overlay p{margin-top:40px;letter-spacing:3px}#skip-ritual{position:absolute;bottom:40px;color:#ada789;font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#e1c99b;color:#26291f;padding:12px 25px;z-index:20;box-shadow:0 8px 30px #0007;opacity:0;pointer-events:none;transition:.2s;font-size:12px;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes ritual{50%{transform:rotate(90deg) scale(1.08);box-shadow:0 0 180px #cca45377}}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media(min-width:1600px){.banner{min-height:500px}.banner-copy{padding:50px}.banner h2{font-size:52px}.character-card img{height:210px}}@media(max-width:1150px){.sidebar{width:190px;padding:30px 12px}.brand{font-size:24px}.brand-mark{font-size:43px}.topbar{padding:0 25px}main{padding:28px 25px}.ritual-panel{gap:22px;flex-wrap:wrap}.summon-actions{flex:1;min-width:350px}.banner-copy{padding:30px;width:65%}.banner h2{font-size:38px}.preview-roster{gap:8px}.character-card img{height:145px}.card-meta{padding:8px!important}.collection-grid{grid-template-columns:repeat(3,1fr)}footer{padding:20px 25px}}@media(max-width:760px){.app-shell{display:block}.sidebar{width:100%;padding:15px 18px 0;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:22px}.brand-mark{font-size:36px}.brand small{display:none}.chapter,.sidebar-bottom{display:none}nav{display:flex;margin-top:15px;gap:2px;overflow-x:auto}.nav-item{font-size:11px;padding:10px 8px;gap:6px;border-left:0;border-bottom:2px solid transparent}.nav-item>span{font-size:16px;width:auto}.nav-item small{display:none}.nav-item.active{border-bottom-color:var(--gold)}.topbar{height:61px;padding:0 18px;gap:12px}.breadcrumb{font-size:7px;letter-spacing:1px}.breadcrumb>b{display:none}.breadcrumb>span{display:none}.wallet{gap:8px}.wallet small{font-size:9px}.profile{display:none}main{padding:23px 16px}.page-heading{align-items:flex-start}.page-heading h1{font-size:24px}.page-heading .tag{display:none}.eyebrow{font-size:8px}.banner{min-height:440px}.banner-art{object-position:60% center;opacity:.8}.banner:after{background:linear-gradient(90deg,#101712f2,#10171270 72%,#10171211)}.banner-copy{width:100%;padding:35px 23px}.banner h2{font-size:39px}.art-label{font-size:6px}.banner-number{font-size:40px;right:16px}.ritual-panel{padding:20px 15px;gap:22px}.pity-block{flex-basis:100%}.summon-actions{min-width:0;flex-basis:100%;gap:9px}.pull{padding:12px;min-width:105px}.pull>span{font-size:14px}.pull i{display:block;margin:6px 0 0;font-size:8px}.preview-roster{grid-template-columns:repeat(5,135px);overflow-x:auto;padding-bottom:8px}.roster-heading h2{font-size:15px}.roster-heading h2 span{display:none}.roster-heading .text-button{font-size:10px}.bottom-note{display:block;font-size:9px}.bottom-note span{display:block;margin-top:6px}footer{padding:18px;font-size:7px;gap:20px}footer>span:last-child{text-align:right;max-width:210px;font-size:7px}.collection-grid{grid-template-columns:repeat(2,1fr);gap:12px}.collection-grid .character-card img{height:200px}.filters button{padding:8px 16px}.detail{grid-template-columns:1fr;gap:10px}.detail img{width:160px;max-height:220px;object-fit:cover;margin:auto}.detail h2{font-size:23px}.detail p{font-size:12px}dialog{padding:26px 18px}.result-grid{grid-template-columns:repeat(2,minmax(105px,1fr));gap:10px}.result-grid img{height:160px}.result-header h2{font-size:20px}.history-row{padding:10px;gap:12px}.history-row time{max-width:85px;font-size:10px}.asset-intro{padding:20px}.asset-intro h2{font-size:18px}td,th{min-width:110px}td:first-child{min-width:220px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Navy, gold and ivory / daily free rewards */
.daily-reward{display:flex;align-items:center;gap:15px;padding:16px 24px;background:linear-gradient(110deg,#192e52,#10213f);border:1px solid #516087;border-top:0}.daily-icon{font-size:28px;color:#e8ca84}.daily-reward strong{font-size:13px;font-weight:500;color:#fff7e4}.daily-reward p{font-size:10px;color:#b4c6e1;margin:3px 0 0}.daily-reward #daily-status{margin-left:auto;color:#e8ce91;font-size:11px;white-space:nowrap}.brand,.stars,.text-button{color:#e5c786}.nav-item.active{color:#fff5dc;background:linear-gradient(90deg,#d5b46c22,transparent)}.muted{color:#b5c3da}.wallet{border-color:#56658b}.wallet small{color:#b7c7df}.tag{color:#d1dbea;border-color:#4b6087}.profile{border-color:#d4b875;color:#fff5df}.sidebar-bottom p{color:#aebdd6}.chapter span,.nav-item small{color:#94a6c6}.local-status{color:#b0c3e0}.card-meta small{color:#b9c9e1}.card-meta strong{color:#fffaf1}.ritual-panel,.character-card,footer{border-color:#354e75}.banner{border-color:#b79d64}.primary{background:linear-gradient(120deg,#d1b06e,#f1dca5);color:#17223a}.secondary{border-color:#a78f5c;color:#f4dfae}.tag i{background:#e6cb89}.asset-intro p,.rates-content p,.rates-content li{color:#bdcbe2}.bottom-note,footer{color:#a4b6d2}.banner:after{background:linear-gradient(90deg,#08152df5 0%,#08152db0 30%,transparent 63%),linear-gradient(0deg,#0a173080,transparent 35%)}@media(max-width:760px){.daily-reward{padding:15px;gap:10px;flex-wrap:wrap}.daily-reward #daily-status{margin-left:36px}.daily-reward p{font-size:9px}.banner:after{background:linear-gradient(90deg,#08152df2,#08152d80 72%,#08152d11)}}

.brand{font-size:27px;letter-spacing:1.3px;gap:9px}.brand-mark{font-size:44px}.brand small{font-size:8px;letter-spacing:1.2px}.asset-intro p{overflow-wrap:anywhere}@media(max-width:1150px) and (min-width:761px){.brand{font-size:23px;gap:6px}.brand-mark{font-size:32px}.brand small{font-size:7px}}

.account-button{border:1px solid #8f7c52;padding:9px 13px;color:#f0d89e;white-space:nowrap;font-size:11px}#account-dialog{width:460px}#account-dialog h2{font-size:25px;font-weight:500}#auth-form label{display:block;font-size:12px;color:#c1cfe3;margin:18px 0 7px}#auth-form input,#recovery-output{display:block;width:100%;background:#09172f;border:1px solid #496184;color:#fff7e5;padding:12px;font:14px 'IBM Plex Sans Thai',sans-serif}#auth-form input:focus{outline:1px solid #dcc081}#auth-submit,#save-recovery{width:100%;padding:13px;margin:16px 0}.auth-links{display:flex;justify-content:space-between;gap:10px;margin-bottom:18px}.auth-links button{font-size:11px;color:#dcc185}#auth-error{font-size:12px;color:#ffb7b7}#recovery-box{padding:15px;background:#23385a;margin-top:20px}#recovery-box p{font-size:12px}#recovery-output{height:80px;resize:none;word-break:break-all}#account-actions{display:flex;gap:15px;align-items:center;margin-top:20px}#export-save{padding:12px;font-size:11px}.local-status{line-height:1.8}@media(max-width:760px){.topbar{gap:7px}.breadcrumb{display:none}.wallet{margin-right:auto}.account-button{font-size:10px}}