@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Dela+Gothic+One&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#11131a;--panel:#191c25;--panel2:#20242f;--line:#303542;--text:#f3f0e9;--muted:#989cab;--gold:#d8b77a;--red:#c66f64;--teal:#83b8aa;--blue:#8ea5d8;--serif:'Noto Sans JP',sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% -15%,#34313a 0%,transparent 39%),var(--bg);color:var(--text);font:14px/1.65 var(--serif);min-height:100vh}button,input{font:inherit}button{cursor:pointer;color:inherit}.app-shell{max-width:1000px;min-height:100vh;margin:auto;padding:0 24px 100px}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:11px;align-items:center;color:inherit;text-decoration:none;letter-spacing:.06em}.brand-mark{width:37px;height:37px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:20px}.brand small{display:block;font:9px var(--mono);letter-spacing:.14em;color:var(--muted);margin-top:2px}.top-status{font:11px var(--mono);color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:8px;box-shadow:0 0 12px #83b8aa77}.page{padding:36px 0 44px}.eyebrow{font:10px var(--mono);letter-spacing:.18em;color:var(--gold);text-transform:uppercase}.hero{max-width:750px;margin:22px auto 30px;text-align:center}.hero h1{font-size:clamp(27px,5vw,47px);line-height:1.35;letter-spacing:.07em;margin:12px 0}.hero p{color:var(--muted);margin:8px auto;max-width:560px}.sigil{width:106px;height:106px;margin:24px auto 15px;border:1px solid #715c3b;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#3b3024 0,#1c1a1d 62%,transparent 64%);box-shadow:0 0 55px #c09a4220,inset 0 0 24px #d5a75018}.sigil:before,.sigil:after{content:"";position:absolute;inset:7px;border:1px solid #b3965a66;border-radius:50%}.sigil:after{inset:-6px;border-radius:8px;transform:rotate(45deg);border-color:#6e603d88}.sigil span{font-size:41px;color:#e2c887;text-shadow:0 0 24px #e1b75188}.summon-form{max-width:520px;margin:27px auto 0;display:flex;gap:9px}.summon-form input{flex:1;min-width:0;background:#171a22;border:1px solid #414553;border-radius:3px;padding:14px 15px;color:var(--text);outline:none}.summon-form input:focus{border-color:var(--gold);box-shadow:0 0 0 2px #d8b77a22}.summon-form input::placeholder{color:#777c8a}.button{border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:#191817;padding:12px 19px;font-weight:700;letter-spacing:.03em;transition:.2s}.button:hover{filter:brightness(1.12);transform:translateY(-1px)}.button.secondary{background:transparent;color:var(--gold)}.button.ghost{background:transparent;color:var(--muted);border-color:var(--line)}.button.danger{background:transparent;color:var(--red);border-color:#6b3836}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.hint{font-size:11px;color:var(--muted);margin-top:9px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:33px 0 14px}.section-head h2{font-size:17px;margin:0;letter-spacing:.05em}.section-head p{margin:0;color:var(--muted);font-size:11px}.divider{height:1px;background:var(--line);margin:28px 0}.panel{background:linear-gradient(140deg,#1b1e27,#171920);border:1px solid var(--line);border-radius:4px;padding:19px}.character-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#22232a,#171920 60%);border:1px solid #555043;padding:25px;margin:24px auto;max-width:700px}.character-card:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #d4b8791b;border-radius:50%;right:-60px;top:-90px;box-shadow:0 0 0 18px #d4b87908,0 0 0 38px #d4b87906;pointer-events:none}.char-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.char-title{font-size:clamp(22px,4vw,32px);margin:4px 0 1px;letter-spacing:.04em}.epithet{color:var(--gold);font-size:12px}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.tag{border:1px solid #414450;color:#b6bac5;padding:3px 8px;font:10px var(--mono);letter-spacing:.04em}.char-id{font:10px var(--mono);color:#767b88;text-align:right}.flavor{color:#b3b3b8;font-size:12px;max-width:520px;margin:17px 0}.stat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:19px 0}.stat{background:#101218a6;border:1px solid #30333c;padding:8px 5px;text-align:center}.stat label{display:block;color:var(--muted);font-size:10px}.stat b{font:17px var(--mono);color:#e8e1d5}.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.skill{border-left:2px solid var(--gold);background:#10121899;padding:10px 12px}.skill b{font-size:12px}.skill .meta{float:right;color:var(--gold);font:10px var(--mono)}.skill p{font-size:11px;color:var(--muted);margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:37px}.feature{border-top:1px solid var(--line);padding:12px 4px}.feature b{font-size:12px;font-weight:600}.feature p{color:var(--muted);font-size:11px;margin:4px 0}.list{display:grid;gap:10px}.roster-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:14px 16px}.roster-row:hover{border-color:#67604e}.roster-main{min-width:0}.roster-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roster-meta{font-size:11px;color:var(--muted)}.roster-rank{font:11px var(--mono);color:var(--gold);text-align:right}.empty{border:1px dashed #3c404b;color:var(--muted);text-align:center;padding:44px 15px}.empty .symbol{font-size:31px;color:#777160}.battle-head{display:grid;grid-template-columns:1fr 90px 1fr;gap:12px;align-items:center;margin:23px 0}.fighter{background:var(--panel);border:1px solid var(--line);padding:15px}.fighter.right{text-align:right}.fighter .name{font-weight:700;font-size:14px}.fighter .epithet{font-size:10px}.vs{text-align:center;color:var(--gold);font:12px var(--mono);letter-spacing:.14em}.hp-label{display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);margin-top:12px}.bar{height:5px;background:#373943;margin-top:4px}.bar i{display:block;height:100%;background:var(--teal);transition:width .5s}.right .bar i{margin-left:auto;background:var(--red)}.log{border:1px solid var(--line);background:#101218;max-height:390px;overflow:auto;padding:7px 16px}.log-line{padding:8px 3px;border-bottom:1px solid #292c35;font-size:12px}.log-line:last-child{border:0}.log-line.scene{color:#b5a77e;font-style:italic;font-size:11px}.log-line .round{font:10px var(--mono);color:#777c8a;margin-right:9px}.log-line.hit strong{color:#e3c17d}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.rank-badge{display:inline-block;font:10px var(--mono);border:1px solid #705f3f;color:var(--gold);padding:3px 7px}.toast{position:fixed;left:50%;bottom:83px;transform:translate(-50%,14px);opacity:0;transition:.2s;background:#e9dfcd;color:#17181c;padding:9px 15px;border-radius:3px;font-size:12px;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#13151ceF;border-top:1px solid var(--line);display:flex;justify-content:center;gap:min(12vw,90px);padding:8px 12px max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(12px);z-index:10}.bottom-nav button{background:none;border:0;color:#858a98;font-size:10px;min-width:64px}.bottom-nav button span{display:block;font-size:18px;line-height:1.35}.bottom-nav button.active{color:var(--gold)}
@media(max-width:650px){.app-shell{padding:0 16px 94px}.topbar{height:64px}.page{padding-top:25px}.hero{margin-top:14px}.hero p{font-size:12px}.summon-form{flex-direction:column}.summon-form .button{width:100%}.feature-row{grid-template-columns:1fr;gap:3px;margin-top:24px}.feature{padding:10px}.stat-grid{grid-template-columns:repeat(4,1fr)}.skill-grid{grid-template-columns:1fr}.character-card{padding:18px 15px}.char-id{font-size:8px}.battle-head{grid-template-columns:1fr 35px 1fr;gap:5px}.fighter{padding:10px 8px}.fighter .name{font-size:11px}.fighter .epithet{font-size:9px}.vs{font-size:9px}.roster-row{padding:12px}.actions .button{flex:1}.section-head{align-items:flex-start;flex-direction:column}}

/* Shared-scale summon stat bars and realistic species portrait atlas */
.portrait-art{display:block;width:100%;height:100%;background-size:400% 400%;background-repeat:no-repeat;background-color:#17191f}
.stat-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:16px 0 20px;max-width:650px}
.stat-bar{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(74px,max-content);gap:8px;align-items:center;min-width:0}
.stat-label{font-size:10px;color:var(--muted)}
.stat-bar>b{font:11px var(--mono);text-align:right;color:#e8e1d5}
.stat-bars:not(.compact) .stat-bar>b{display:flex;justify-content:flex-end;align-items:baseline;gap:4px;white-space:nowrap}
.stat-track{height:8px;position:relative;display:flex;background:#090b10;border:1px solid #34343a;overflow:hidden}
.stat-track:after{content:"";position:absolute;top:-2px;bottom:-2px;left:var(--baseline);width:1px;background:#d9c48d77;z-index:2}
.stat-track i{height:100%;display:block;flex:none;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.stat-track .base-value{background:linear-gradient(90deg,#806235,#d1ad62);box-shadow:0 0 8px #d6af5340}
.stat-track .growth-segment{background:linear-gradient(90deg,#54835c,#9acb8d)}
.stat-track .rank-segment{background:linear-gradient(90deg,#6875a8,#b5a0e2)}
.stat-bars.compact{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:8px 0 5px;max-width:none}
.stat-bars.compact .stat-bar{grid-template-columns:15px minmax(0,1fr) 20px;gap:3px}
.stat-bars.compact .stat-label{font-size:10px}
.stat-bars.compact .stat-bar>b{font-size:10px}
.stat-bars.compact .stat-track{height:4px}
.status-pill.status-effect-doubleReady{border-color:#65a6cf;background:#19384c;color:#b8e7ff}
.status-pill.status-effect-berserk,.status-pill.status-effect-commandSeal{border-color:#bb7848;background:#4a2b24;color:#ffd0aa}
@media(max-width:650px){.stat-bars.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 8px}.stat-bars:not(.compact){grid-template-columns:1fr;gap:7px}.stat-bars:not(.compact) .stat-bar{grid-template-columns:42px minmax(0,1fr) 38px}}

.stat-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 9px;color:#8c8b89;font-size:9px;text-align:right;margin-top:-2px}
.stat-legend>span:not(.legend-note){white-space:nowrap}
.stat-legend .legend-note{flex-basis:100%;text-align:right}
.stat-legend .legend-base:before,.stat-legend .legend-growth:before,.stat-legend .legend-rank:before{content:"";display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:-1px}
.stat-legend .legend-base:before{background:#c4a15f}.stat-legend .legend-growth:before{background:#82b579}.stat-legend .legend-rank:before{background:#a395d1}
@media(max-width:650px){.stat-bars:not(.compact) .stat-bar{grid-template-columns:42px minmax(0,1fr) minmax(74px,max-content)}.stat-legend .legend-note{text-align:right}}

/* Keep decisions and ability explanations readable without enlarging decorative labels. */
.character-quick-actions{margin:12px 0 0}
.character-quick-actions .button{min-height:42px}
.operator-announcement-backdrop{position:fixed;z-index:10001;inset:0;display:grid;place-items:center;overflow:auto;padding:20px;background:#05060bd9;backdrop-filter:blur(9px)}.operator-announcement-dialog{width:min(520px,100%);max-height:min(86vh,760px);overflow:auto;padding:clamp(22px,5vw,36px);border:1px solid #c5a45c66;border-radius:12px;background:radial-gradient(ellipse at 50% 0,#66512a2e,transparent 60%),#191b21;box-shadow:0 28px 100px #000a}.operator-announcement-dialog .eyebrow{color:#d6bd7c;font:10px var(--mono);letter-spacing:.18em}.operator-announcement-dialog h2{margin:12px 0 14px;color:#f0e5c9;font-family:Georgia,"Yu Mincho",serif;font-size:clamp(21px,5vw,28px);line-height:1.45;overflow-wrap:anywhere}.operator-announcement-body{margin:0 0 22px;color:#d0cabc;font-size:14px;line-height:1.9;white-space:normal;overflow-wrap:anywhere}.operator-announcement-dialog .button{min-height:44px;width:100%;border-radius:5px}.operator-announcement-dialog .button:disabled{opacity:.55;cursor:wait}
.stat-bars:not(.compact) .stat-label{font-size:12px}
.stat-legend{font-size:12px}
.skill p,.ultimate-card p,.ultimate-card small{font-size:12px;line-height:1.6}
.match-stat-row{font-size:11px}
.match-stat-row b{font-size:11px}
.match-stat-popover>b{font-size:12px}
.match-stat-skills span,.match-stat-ultimate{font-size:11px}
.match-stat-skills small{font-size:10px}
.ranking-challenge{margin-top:8px;min-height:40px}
.free-ranking-link{margin-top:10px;min-height:42px}
@media(max-width:650px){.stat-bars:not(.compact) .stat-label{font-size:13px}.stat-legend{font-size:12px}.skill p,.ultimate-card p,.ultimate-card small{font-size:13px}}
.log-line.type-miss{color:#a8a9b2}

.strategy-summary{display:grid;gap:3px;margin:14px 0 18px;padding:10px 12px;border-left:2px solid var(--gold);background:#11141aa6}.strategy-summary b{color:var(--gold);font-size:12px}.strategy-summary span{font-size:12px;color:var(--text)}.strategy-summary small{font-size:10px;color:var(--muted)}.fighter-strategy{display:block;margin-top:2px;color:var(--gold);font-size:10px;line-height:1.4}
