/* Dawn palette: pearl panels, sky blue, cyan light and gold accents. */
:root{--cream:#f4fbff;--ink:#244d72;--gold:#f4c969;--soft:#6589a6}
body{background:radial-gradient(ellipse at 65% 25%,#598ab83d,transparent 55%),radial-gradient(circle at 1px 1px,#9ec4e71a 1px,transparent 1.7px) 0 0/16px 16px,linear-gradient(130deg,#162e4c,#193d60 55%,#112b4a)}
.desktop-brand>span{color:#a9dfff}.desktop-brand h1{color:#ffdfa0}.desktop-brand>p{color:#e7f8ff}.desktop-brand>small{color:#9fc5e1}
.phone{box-shadow:0 0 0 2px #8fddff4d,0 0 90px #091c3f77;background:#eff8ff}
.player-hud{background:linear-gradient(115deg,#2369b4,#42b3da 80%,#7bdfef);border-bottom:2px solid #c4f6ff;box-shadow:0 2px 12px #2765a052;color:#fff}
.player-avatar{background:radial-gradient(#c5f7ff,#5285c5);border-color:#ffe4a0;box-shadow:0 0 0 2px #fff6,0 0 12px #84ddff}
.player-info>span,.player-info>span small{color:#d7f5ff}.player-info>em{background:linear-gradient(100deg,#ec8b46,#eaa34a80,transparent);border-radius:3px 0 20px 3px;padding:0 6px;color:#fff5b6;width:max-content;max-width:100%}
.wallet>span{background:#1b5d9780;border:1px solid #bdefff55}.wallet>span:nth-child(2){background:#3466b76e}.wallet .ico{color:#ffe28b}
.play-tools .button{background:linear-gradient(#549bc7,#246da5);border-color:#d5f8ff;color:#fff8d6;box-shadow:0 2px 0 #20578855}
.stage-hud{top:12%;width:64%;text-shadow:0 2px 3px #19415dc4}.stage-hud>small{color:#eefaff;margin-bottom:3px;letter-spacing:2px}.stage-hud>span{color:#fff7bd;font-size:13px;display:block}.stage-hud>b{font-size:9px;color:#fff}
.stage-nodes{display:flex;align-items:center;justify-content:center;gap:0;margin:10px 12px 6px;position:relative}.stage-nodes:before{content:'';position:absolute;left:5%;right:5%;top:calc(50% - 2px);height:4px;background:#2e5a7bb0;box-shadow:0 1px 0 #fff8}
.stage-nodes i{z-index:1;display:grid;place-items:center;flex:1;max-width:40px;height:11px;position:relative;font-style:normal}.stage-nodes i:after{content:'';width:9px;height:9px;background:#7db5cb;border:1px solid #d8f7ff;transform:rotate(45deg);box-shadow:0 1px 4px #326289}.stage-nodes i.cleared:after{background:#ffe18b;border-color:#fff1b5;box-shadow:0 0 7px #fff3b3}.stage-nodes .boss-node{color:#fff;font-size:14px;height:23px;max-width:23px;border-radius:50%;background:#d65c62;border:2px solid #ffe5c3}.stage-nodes .boss-node:after{display:none}
.party-arena.squad .party-unit{left:calc(37% - var(--column)*17%);bottom:calc(53% - var(--lane)*18%);width:25%;height:auto;aspect-ratio:1.13;z-index:calc(7 - var(--column) + var(--lane));transition:left .2s,bottom .2s}
.party-arena.solo .party-unit{left:5%;bottom:18%;width:43%;height:auto;aspect-ratio:1.13}.party-unit .sprite-rig{animation:hero-idle 3.5s ease-in-out infinite}.party-unit .unit-health{width:67px;top:-24px}.party-unit .unit-health>b{font-size:8px;display:flex;justify-content:center;align-items:center;gap:2px;line-height:1.4}.party-unit .unit-health .element-badge{font-size:8px;padding:0 2px;background:#fff8;border:0;box-shadow:none}.party-unit .unit-health .element-badge i{font-size:10px}
.party-arena.squad .enemy-unit{width:32%;height:auto;aspect-ratio:1;bottom:36%;right:0}.party-arena.squad .boss-unit{width:37%;right:-2%;bottom:32%}.party-unit.fallen{opacity:.36;filter:grayscale(.7)}.party-unit.fallen .sprite-rig{animation:none;rotate:9deg}.unit-health .element-badge{vertical-align:middle}
.control-deck{background:linear-gradient(#e6f8ff,#f7fcff);border-top:1px solid #d1f7ff;padding:0 10px 9px;box-shadow:0 -7px 20px #4b9eb32b}
.quest-ribbon{min-height:44px;background:linear-gradient(100deg,#2169a6,#2e8db9);border:1px solid #c9ecf6;border-radius:10px;box-shadow:0 3px 0 #397caf20;color:white;padding:6px 9px}.quest-ribbon small{color:#c6edf6}.quest-ribbon b{font-size:10px}.quest-ribbon em{color:#fff2af}.quest-medal{background:linear-gradient(#ffe694,#d99d42);border-color:#fff1b8;color:#fff}.quest-ribbon.completed small{color:#b9ffe8}
.party-strip{display:flex;gap:5px;margin:8px 0 5px;overflow-x:auto;scrollbar-width:thin;padding:1px 1px 4px;align-items:stretch}.party-portrait{position:relative;flex:0 0 49px;height:62px;min-height:62px;padding:0 2px 4px;border:1px solid #92bfd5;background:linear-gradient(#edfaff,#aecde8);border-radius:9px;overflow:hidden;box-shadow:inset 0 1px #fff}.party-portrait>span{display:block;position:relative;height:38px}.party-portrait .character-art{position:absolute;width:57px;height:48px;left:-6px;top:-5px}.party-portrait .element-badge{position:absolute;top:1px;left:0;padding:0 2px;font-size:8px;border:0;box-shadow:none}.party-portrait .element-badge i{font-size:10px}.party-portrait>b{display:block;font-size:8px;line-height:1.4;color:#204c77}.party-portrait>i{display:block;height:3px;margin:2px 3px 0;background:#61778e;border-radius:3px;overflow:hidden}.party-portrait>i>em{display:block;height:100%;background:#60dba1}.party-portrait.selected{border:2px solid #e6b55c;background:linear-gradient(#fff9e3,#d7e7ec);box-shadow:0 0 7px #f6cb6a88}.party-portrait.fallen{filter:grayscale(.85);opacity:.58}.party-add{flex:0 0 48px;border:1px dashed #7fb1cd;background:#e0f3ff;border-radius:9px;color:#3a80ab;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px}.party-add .ico{width:18px;height:18px}.party-add b{font-size:8px}.party-add small{font-size:9px}
.skill-row{margin-top:0;gap:6px;grid-template-columns:1.2fr 1fr 1fr}.skill-slot{height:67px;background:linear-gradient(#4ba9d7,#256fae);border:1px solid #a6dcf4;border-radius:10px;padding:5px 3px;box-shadow:inset 0 1px #e8faff,0 2px 0 #366c9b26;color:#fff}.skill-slot>span{height:27px;width:27px;margin-bottom:2px;background:radial-gradient(#aeeaff,#408ec0);border-color:#caeeff}.skill-slot>span>.ico{width:18px;height:18px}.skill-slot>small{color:#d0efff;font-size:7px}.skill-slot.signature{background:linear-gradient(#9f8ce2,#6176c0);border-color:#d0d5ff;box-shadow:inset 0 1px #f9efff}.skill-slot.signature>span{background:radial-gradient(#deeaff,#9c91d3);border-color:#f2ddff}.skill-slot.gear{background:linear-gradient(#78a4c5,#4a789b)}.skill-slot.gear>span{background:radial-gradient(#ffe4a1,#bc9d68)}
.bottom-nav{grid-template-columns:repeat(6,1fr);background:linear-gradient(#eaf8ff,#cae3f4);border-top:2px solid #fff;box-shadow:0 -3px 0 #81b7d070;gap:1px}.bottom-nav button{color:#4c7497;gap:3px}.bottom-nav .ico{filter:drop-shadow(0 1px 0 #fff);stroke-width:1.8;width:23px;height:23px}.bottom-nav span{font-size:9px;text-shadow:0 1px 0 #fff}.bottom-nav .active{color:#286daa;background:radial-gradient(ellipse,#96dbff99,transparent 75%)}.bottom-nav .active .ico{color:#bc8a27;filter:drop-shadow(0 0 3px #fff5c1)}.bottom-nav .active:after{background:#f5ce6d;box-shadow:0 0 9px #ffdf96;left:10%;right:10%}
.bottom-drawer{background:linear-gradient(#f9fdff,#e8f3fb);border-color:#fff;box-shadow:0 -4px 0 #7cbedf,0 -12px 35px #143b6855}.bottom-drawer>header{border-bottom:1px solid #c1dce9}.bottom-drawer h2{color:#2e6492}.bottom-drawer .icon-button{background:#dfedf8;border-color:#afcce1;color:#5283ac}.drawer-handle{background:#9fc7dd}.drawer-scroll{padding:12px}.drawer-guide{background:#e1f1ff;border-color:#a9d5eb}.panel-note{color:#63849f}.bottom-drawer.cast-drawer{max-height:82%}.cast-drawer .drawer-scroll{padding:0 11px 13px}.cast-drawer>header{min-height:49px}.cast-drawer>header h2{font-size:17px}
.cast-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:7px 0;gap:5px;position:sticky;top:0;background:#f1faffee;z-index:5}.cast-tabs button{height:39px;background:#e0ecf7;border:1px solid #b9d4e7;border-radius:8px;color:#5983a4;font-size:12px;font-weight:700}.cast-tabs [aria-selected=true]{background:linear-gradient(#52bbde,#2c89c1);color:white;border-color:#2183b4;box-shadow:inset 0 1px #b9f4ff}
.formation-summary{display:flex;align-items:center;justify-content:space-between;margin:5px 1px 8px;font-size:11px;color:#477a9e}.formation-summary>strong{font-size:13px;color:#b38327}.formation-summary .ico{width:15px;height:15px}
.formation-board{border:1px solid #72bfe0;border-radius:13px;padding:9px 9px 11px;background:radial-gradient(ellipse at 50% 45%,#b9f5ff99,transparent 70%),repeating-linear-gradient(0deg,transparent 0 31px,#a7deef30 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,#a7deef30 31px 32px),linear-gradient(140deg,#5585b2,#22517f);box-shadow:inset 0 0 15px #152d5b60}
.formation-row-labels{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;color:#e3faff;font-size:9px;padding:2px 0 7px;text-shadow:0 1px #174377}.formation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 9px}.formation-slot{height:69px;position:relative;border:1px solid #6ec9eb99;border-radius:10px;background:radial-gradient(ellipse at 50% 76%,#38d4ff50 0 34%,#24649b60 37%,#1a507a50 70%);color:#b9edff;overflow:hidden;box-shadow:inset 0 -2px #83cce966}.formation-slot>small{position:absolute;right:6px;top:4px;font-size:9px;color:#c8f2ff}.formation-slot>em{font-style:normal;font-size:23px;display:block;color:#b4edff66}.formation-slot .character-art{position:absolute;inset:-4px -5px auto;width:calc(100% + 10px);height:65px}.formation-slot>b{position:absolute;left:0;right:0;bottom:2px;font-size:8px;color:#fff;background:#154e83aa}.formation-slot.occupied{border-color:#b7ebff;background:radial-gradient(ellipse at 50% 76%,#9deaff70 0 34%,#3174a660 37%,#28659370 70%)}.formation-slot.available{outline:1px solid #bdfdfb;border-color:#fff;box-shadow:inset 0 0 17px #70f9ff60,0 0 5px #b9fcff}.formation-slot.chosen{border:2px solid #ffdf7c;box-shadow:inset 0 0 20px #f4cc8560}
.formation-instruction{font-size:10px;text-align:center;color:#6486a2;padding:8px 0 5px;min-height:29px}.formation-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:9px}.formation-actions .button{min-height:38px;font-size:11px;padding:7px 14px}.formation-actions .remove-unit{font-size:10px;color:#ad6572}
.element-badge{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:1px 4px;border-radius:5px;color:var(--element-color);background:#ffffffe6;border:1px solid #d5e3eb;font-size:9px;font-weight:700;white-space:nowrap;box-shadow:0 1px 2px #2c51771a}.element-badge i{font-size:13px;font-style:normal;line-height:1.2}
.element-filters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:8px 0}.element-filters button{height:43px;padding:3px 0;border:1px solid #c3dbe9;border-radius:8px;background:#faffff;color:#6487a1;font-size:9px}.element-filters i{display:block;font-size:17px;color:var(--element-color);font-style:normal;line-height:1.2}.element-filters span{display:block;font-size:8px}.element-filters [aria-pressed=true]{background:#d5f3ff;border:2px solid #66add0;color:#286d9d;box-shadow:0 1px 3px #3e92be33}
.cast-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}.cast-selects label{font-size:9px;color:#5e829f;display:flex;align-items:center;gap:5px}.cast-selects select{font:inherit;color:#345d80;padding:7px 4px;max-width:100%;min-width:0;flex:1;min-height:34px;border:1px solid #bcd5e5;border-radius:7px;background:white}
.companion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.companion-card{min-width:0;border:1px solid #a7c9df;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #5781a512}.companion-card.chosen{outline:2px solid #63aed5;outline-offset:1px}.companion-pick{width:100%;padding:0;background:transparent;text-align:left}.companion-art{display:block;height:112px;position:relative;background:radial-gradient(ellipse at 50% 50%,#fff7,transparent 70%),linear-gradient(135deg,#dceefa,#bed9ed);overflow:hidden}.companion-art>.character-art{height:120px;width:120%;position:absolute;left:-10%;top:-3px;filter:drop-shadow(0 6px 2px #37628b20)}.companion-art .element-badge{position:absolute;left:6px;top:6px}.assigned-mark{position:absolute;right:7px;bottom:8px;background:#4f9ec6d9;border:2px solid #fff;border-radius:50%;width:24px;height:24px;color:#fff;text-align:center;font:800 15px/20px system-ui}.companion-name{display:flex;align-items:center;justify-content:space-between;gap:3px;padding:7px 8px 2px;color:#285f89}.companion-name>b{font-size:12px}.companion-name small{font-size:8px;color:#7a98ad}.companion-detail{padding:0 8px 7px;color:#7291a8;font-size:9px}.companion-detail>span{color:#ca9637;font-weight:800;display:block}.companion-detail>small{font-size:8px;display:block;margin-top:1px}.companion-detail p{font-size:8px;margin-top:3px;color:#728ea6;min-height:12px}.card-action{display:block;width:calc(100% - 12px);margin:0 6px 6px;min-height:35px;border-radius:7px;background:linear-gradient(#78c8ed,#4e9dd0);border:1px solid #5599c1;color:#fff;font-size:10px;font-weight:700}.card-action.recruit{background:linear-gradient(#ffe49c,#efc76f);border-color:#d9b86c;color:#8a6026}.unowned .companion-art{filter:saturate(.55)}.empty-roster{grid-column:1/-1;font-size:12px;color:#7090a7;text-align:center;padding:25px}
.selected-description{margin-top:13px;padding:12px;background:#e2f2ff;border:1px solid #bed8e9;border-radius:10px}.selected-description>b{font-size:12px;display:block}.selected-description p{font-size:10px;color:#5f819e;line-height:1.8;margin-top:6px}.selected-description>small{font-size:9px;display:block;margin-top:6px;color:#3d759b}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:8px 0}.more-grid button{background:linear-gradient(#fff,#e0f1fd);border:1px solid #b8d6ea;border-radius:13px;min-height:105px;padding:12px 3px;color:#3b7ba5;display:flex;flex-direction:column;align-items:center;justify-content:center}.more-grid .ico{width:30px;height:30px;margin-bottom:8px}.more-grid b{font-size:11px}.more-grid small{font-size:8px;color:#7c99ad;margin-top:3px}
.element-table-scroll{overflow:auto}.element-table{width:100%;border-collapse:collapse;font-size:9px;text-align:center}.element-table caption{font-size:11px;padding-bottom:8px;color:#34668a}.element-table th,.element-table td{border:1px solid #c3daea;padding:8px 3px}.element-table th{background:#dceefa;font-size:9px}.element-table th:first-child{max-width:65px}.element-table td{background:#fff;color:#829bb1}.element-table .strong{background:#fff0cf;color:#ab7621;font-weight:800}.element-table .weak{background:#e6efff;color:#537aaf}
.party-impact,.party-custom-effect{position:absolute;z-index:14;transform:translate(-50%,-50%);width:108px;height:108px;pointer-events:none}.party-impact{border-radius:50%;border:5px solid transparent;border-top-color:#fff;border-right-color:var(--hero-color);filter:drop-shadow(0 0 8px var(--hero-color));animation:party-strike .45s both}.party-impact.burst{border:7px double var(--hero-color);background:radial-gradient(#fff8,transparent 60%);animation:party-burst .7s both}.party-impact.healing{border:3px solid #a6ffdb;box-shadow:inset 0 0 20px #8beeb5,0 0 20px #b7ffd7;animation:party-burst .7s both}.party-custom-effect{width:160px;height:160px}.party-projectile{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 12px 7px var(--hero-color);z-index:12}.healing-number{color:#a4ffd1;-webkit-text-stroke:1px #2b845f}.damage-number.effective{font-size:10px;margin-top:-30px;color:#ffe5a0;-webkit-text-stroke:0;text-shadow:0 1px 3px #69491a}
@keyframes party-strike{from{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-80deg)}25%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(70deg)}}
@keyframes party-burst{from{opacity:1;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.boot-screen{height:100%;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(0deg,#145485 0%,#286d9e33 55%,#c0eeff44),url('assets/courtyard.png') center/cover;color:white;padding:9vh 25px 8vh}
.boot-screen:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,#e8ffff66,transparent 45%);z-index:-1}.boot-mark{text-align:center;text-shadow:0 2px 15px #123f7299}.boot-mark>small{font:700 13px 'Cinzel',serif;letter-spacing:6px;color:#fff1ba}.boot-mark h1{font:700 clamp(27px,6vw,39px) 'Cinzel',serif;letter-spacing:2px;margin:10px 0}.boot-mark>p{font-size:15px;letter-spacing:6px;color:#fff2c7}
.boot-heroes{position:relative;width:100%;height:40vh;max-height:340px;flex:1;min-height:200px;max-width:390px}.boot-heroes .character-art{position:absolute;filter:drop-shadow(0 12px 8px #15487744)}.boot-heroes .left{width:77%;height:78%;left:-23%;bottom:6%;rotate:-9deg}.boot-heroes .right{width:77%;height:78%;right:-23%;bottom:6%;rotate:9deg}.boot-heroes .center{width:110%;height:100%;left:-5%;bottom:-7%}
.boot-bottom{width:100%;text-align:center;z-index:3;padding-top:22px}.boot-bottom>small{font:600 11px 'Cinzel',serif;letter-spacing:3px;color:#b8f5ff}.boot-bottom progress{display:block;appearance:none;width:100%;height:11px;margin:11px 0;border:1px solid #91e9ff;border-radius:20px;overflow:hidden;background:#173f71;box-shadow:0 0 0 3px #d1f8ff33,0 0 18px #9bdeff40}.boot-bottom progress::-webkit-progress-bar{background:#173f71}.boot-bottom progress::-webkit-progress-value{background:linear-gradient(90deg,#47cdf4,#c3fcff);transition:width .2s}.boot-bottom progress::-moz-progress-bar{background:linear-gradient(90deg,#47cdf4,#c3fcff)}.boot-bottom>p{font-size:11px;color:#d7f9ff;min-height:24px}.boot-bottom #boot-tip{font-size:10px;color:#b8e3f5;line-height:1.9;margin-top:20px}
.growth-art{background:radial-gradient(#a3d7ed,#4b83b8);border-color:#93bedc;box-shadow:inset 0 0 20px #34709b77}.stat-line{background:#e0effc;border-color:#bbd6e6}.stat-line span small{color:#7795ae}.xp-line{color:#678ba4}.gear-slots>span{background:#e5f1f9;border-color:#c0d7e5;color:#6a8aa1}.world-list>button{background:linear-gradient(100deg,#fff,#deeffb);border-color:#abcfe6;box-shadow:0 2px 0 #5e8fad10}.world-list small{color:#6d8da5}.hint-box{background:#e5f2fb;border-color:#bed9e9;color:#67859c}.entry-shade{background:linear-gradient(#4da4cf33,#255e9244 40%,#134978ee 85%)}.auth-box{background:linear-gradient(#fafffff7,#eaf7fff5);border-color:#c5edff}.auth-tabs .active{color:#307bae;border-color:#60b7da}.auth-box input{background:#fff;border-color:#c7dce9}.auth-box label{color:#5983a0}.auth-note{color:#7493a8}
@media(max-width:360px){.formation-slot{height:62px}.formation-slot .character-art{height:60px}.formation-row-labels{font-size:8px}.companion-name small{font-size:7px}.companion-art{height:103px}.companion-art>.character-art{height:112px}.bottom-nav span{font-size:8px}.bottom-nav .ico{width:22px;height:22px}.party-portrait{flex-basis:46px}.skill-slot>b{font-size:8px}.party-unit .unit-health{width:54px}.element-filters button{font-size:8px}.cast-selects label{font-size:8px}}
@media(max-height:760px){.party-strip{margin:5px 0 3px;padding-bottom:2px}.party-portrait{height:52px;min-height:52px;flex-basis:43px}.party-portrait>span{height:29px}.party-portrait .character-art{height:39px;width:49px;left:-5px}.party-portrait>b{font-size:7px}.party-add{flex-basis:43px}.skill-slot{height:59px}.skill-slot>span{height:23px;width:23px}.skill-slot>small{font-size:6px}.skill-slot>span>.ico{height:16px;width:16px}.control-deck{padding-bottom:7px}.quest-ribbon{min-height:40px}.quest-ribbon small{font-size:6px}.quest-ribbon b{font-size:9px}.stage-hud{top:14%}.formation-slot{height:59px}.formation-slot .character-art{height:58px}.bottom-drawer.cast-drawer{max-height:82%}.boot-screen{padding-top:7vh;padding-bottom:6vh}}
@media(prefers-reduced-motion:reduce){.party-impact{animation:none;opacity:.6}.party-projectile{display:none}.party-unit .sprite-rig{animation:none}}