/* Live interface inspired by the Marineford reference; backgrounds remain separate. */
:root{--navy-panel:linear-gradient(145deg,#062b47f2,#041c32eb);--navy-line:#82b9d3;--navy-gold:#e7c575;--navy-text:#f2f7ff}
.map-auto-status{font-size:12px;font-weight:800;white-space:nowrap;color:#c3edff;padding:5px 7px;border:1px solid #749dbb;border-radius:5px;background:#0c2b42}
#prep-side{font-size:11px;padding:5px 7px;color:#ffe4a3;white-space:nowrap;border:1px solid #c5a263;border-radius:5px;background:#173548}
#app :is(.synergy-panel,.right-panel,.roundbar,.shop-controls,.bench),.arena-inventory{background:var(--navy-panel);border:1px solid var(--navy-gold);border-radius:12px;box-shadow:inset 0 0 0 3px #123e5966,0 4px 14px #00152766;color:var(--navy-text)}
#app .synergy-panel,#app .right-panel{padding:14px;scrollbar-width:thin;scrollbar-color:#63869c #062238}
#app .synergy-panel h2{color:#ffe38b;font-weight:900}
#app .synergy-row{margin:5px 0;padding:9px 7px;border:1px solid #6c9cb477;border-radius:8px;background:#0521379c;gap:8px}
#app .synergy-row.active{border-color:#e4bf65;background:linear-gradient(100deg,#445237b8,#092f49);box-shadow:inset 3px 0 #f9d26b}
#app .trait-name{font-size:14px}#app .trait-name small{font-size:12px}#app .trait-count{font-size:21px}
#app .roundbar{padding:7px 12px;min-height:48px;z-index:20}
#app .sidebar-tabs{gap:8px;margin-bottom:12px}#app .sidebar-tabs button{padding:9px;font-size:15px;font-weight:800;border-radius:6px;background:#103e66;color:#fff}
#app .sidebar-tabs button[aria-pressed=true]{border-color:#f3d67d;background:#6d704650;color:#ffe67d}
#app .combat-meter{color:#f1f7ff;font-size:13px}#app .player-row{padding:8px 5px;border-radius:5px}
#app .bench{padding:7px;gap:6px;box-sizing:border-box}
#app .bench-slot{background:#09273dba;border:1px solid #8bb3ca;border-radius:6px;overflow:hidden}
#app .bench-slot:hover,#app .bench-slot.selected{border-color:#ffe28d;background:#38617d88;box-shadow:inset 0 0 0 1px #ffdf8b}
#app .bench-slot .slot-number{top:7px;left:8px;color:#ecf4ff;font-weight:800;font-size:18px}
#app .bench-heading{color:#ffdf83;font-weight:900;z-index:16;padding-left:13px}
#app .shop-controls{padding:10px;box-sizing:border-box;gap:7px}
#app .economy-button{min-height:36px;padding:8px;border:1px solid #d8bf79;background:linear-gradient(#15476a,#092b46);font-size:13px;border-radius:5px}
#app .economy-button b{font-size:16px;color:#ffe48c}
#app .shop-card{border-radius:7px;overflow:hidden;border-color:#88b8ce;box-shadow:0 0 0 1px #052437,0 3px 9px #00122588}
#app .shop-card.cost-1{--cost-color:#93a8bc}
#app .shop-card.cost-2{--cost-color:#26c873}
#app .shop-card.cost-3{--cost-color:#3797f3}
#app .shop-card.cost-4{--cost-color:#bb68ed}
#app .shop-card.cost-5{--cost-color:#efbc46}
#app .shop-card{border:2px solid var(--cost-color);box-shadow:0 0 0 1px #052437,0 3px 9px #00122588,inset 0 -3px var(--cost-color)}
#app .shop-card .card-title{background:var(--cost-color);background:color-mix(in srgb,var(--cost-color) 58%,#081b2c);color:#fff;border-top:2px solid var(--cost-color)}
#app .shop-card:hover{border-color:var(--cost-color);box-shadow:0 0 0 1px var(--cost-color),0 0 12px color-mix(in srgb,var(--cost-color) 50%,transparent)}
#app .shop-card .card-traits{background:linear-gradient(transparent,rgba(3,20,35,.20) 40%,rgba(3,20,35,.46));padding-bottom:7px;color:#fff}#app .shop-card .card-traits>span{text-shadow:0 1px 2px #000,0 0 4px #000;font-weight:800}
#app .shop-card:hover{border-color:var(--cost-color);filter:brightness(1.08)}
#app .gold-info{padding:5px 10px;border:1px solid #d7c07b;border-radius:8px;background:#06243cee}
.arena-inventory{padding:9px;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr));width:184px;max-height:240px}
.arena-inventory>span{font-size:13px;color:#ffe49c;font-weight:800}.arena-inventory button{border-color:#91bed2;border-radius:5px;background:#0a2a40}.arena-inventory b{font-size:13px;padding:2px 5px;color:#fff0aa}
/* Encounter styling is independent of the original augment and anomaly windows. */
body .encounter-panel{background:linear-gradient(135deg,#082d49,#061b31);color:#f2f7ff;border:2px solid #dfc178;box-shadow:0 12px 55px #0009,inset 0 0 0 4px #16436577;text-shadow:none}
body .encounter-panel :is(h2,h3,h4,strong,b){color:#ffe3a0;text-shadow:none}

.encounter-panel{max-height:86vh;overflow:auto}.encounter-panel .encounter-effect{color:#f2f6ff;font-size:16px;line-height:1.7}.encounter-panel .encounter-detail{color:#d8e8f6;font-size:14px;min-height:3em}.encounter-panel .encounter-actions button{background:#154866;color:#fff;border:1px solid #d8be78;padding:13px;font-size:16px}.encounter-actions button b,.encounter-actions button small{display:block;margin-top:5px}.encounter-actions button small{font-size:15px;color:#d8f1ff}.encounter-actions button:disabled{opacity:.65}
.encounter-lab{border-top:1px solid #7899af;margin-top:18px;padding-top:14px}.encounter-lab>p{font-size:13px;color:#cddfea}.encounter-lab input{width:100%;padding:12px;background:#edf5fc;color:#102d43;border:1px solid #8db0c3;border-radius:6px;margin:10px 0}.encounter-lab-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:360px;overflow:auto}.encounter-lab-list button{padding:12px;text-align:left;background:#113854;border:1px solid #7899af;border-radius:7px;color:#edf6ff}.encounter-lab-list button span{display:block;margin:8px 0;line-height:1.6;font-size:13px}.encounter-lab-list [hidden]{display:none}
@media(min-width:1000px){
 #app .synergy-panel{left:.8%;top:8%;width:14%;bottom:auto;max-height:43%;box-sizing:border-box;z-index:15}
 #app .right-panel{right:.8%;top:8%;width:19%;height:auto;max-height:51%;box-sizing:border-box;z-index:15}
 #app .roundbar{left:24%;width:52%;top:7.6%;height:5.5%;box-sizing:border-box}
 #app .bench-heading{left:6.4%;top:65.7%;width:87%;height:2.4%;font-size:16px}
 #app .bench{left:6.3%;top:68%;width:87.4%;height:10%;border-top-left-radius:0;border-top-right-radius:0}
 #app .bench-heading{background:#08283fe8;border:1px solid #e7c575;border-bottom:0;border-radius:11px 11px 0 0;padding:4px 13px;box-sizing:border-box}
 #app .shop-area{left:.8%;right:.8%;bottom:.6%;height:20%;grid-template-columns:14.5% minmax(0,1fr);gap:.7%}
 #app .shop-content{grid-template-rows:30px minmax(0,1fr)}#app .shop-heading{position:static;height:30px}
 #app .shop-title{display:none}#app .gold-info{position:relative;bottom:0;padding:3px 8px}
 #app .arena-inventory{position:fixed;left:1%;bottom:36%;width:12.5%;min-width:155px;max-width:205px;max-height:12%;box-sizing:border-box}
 #app .top-actions{background:#05263dde;border:1px solid #6b8fa777;border-radius:7px;padding:7px;gap:9px;flex-wrap:wrap;justify-content:flex-end}
 #app .top-actions button{font-size:12px}
 #app .crew-level{margin-bottom:14px}#app .synergy-help{font-size:12px}
 body.practice-lab #app .practice-tools{left:16%;width:68%;bottom:.5%;height:20%;background:#082c48ed;border:1px solid #e7c575;border-radius:10px}
 body.arena-focused #app .bench-heading{top:86%}body.arena-focused #app .bench{top:89%;height:9%}
}
@media(max-width:999px){.encounter-lab-list{grid-template-columns:repeat(2,minmax(0,1fr))}#app .synergy-panel,#app .right-panel{padding:8px}.arena-inventory{width:150px}}
@media(max-height:700px){.encounter-lab-list{max-height:220px}}

#app .shop-controls #shop-odds{display:flex;gap:5px;justify-content:space-between;font-size:11px;font-weight:700;margin:3px 0}
#app .shop-controls{overflow:auto} .encounter-lab-list button:disabled{opacity:.55}

/* Keep the cards in the shop's only grid row; its balance bar floats above it. */
#app .shop-cards{grid-row:2;min-height:0}
#app .shop-content{position:relative;min-height:0}
#app .shop-heading{z-index:2}
#app .round-path i.round-won{background:#124b88;color:#a8d9ff;border:2px solid #52adff;box-shadow:0 0 9px #2196ff77}
#app .round-path i.round-lost{background:#771f32;color:#ffb4bf;border:2px solid #ff627c;box-shadow:0 0 9px #ff335566}
#app .round-path i.round-draw{background:#584a2c;color:#ffe0a1;border:2px solid #d6b66b}
@media(min-width:1000px){
 #app .arena-bottom{position:fixed;top:auto;bottom:35%;left:auto;right:6.4%;height:4%;max-height:38px;z-index:18;gap:8px}
 #app .arena-bottom #battle{height:100%;min-width:128px;padding:7px 15px;font-size:14px;border:1px solid #e7c575;border-radius:7px;background:linear-gradient(#225777,#102f47);color:#ffe6a5}
 #app .arena-bottom :is(#speed,#arena-focus){height:100%;background:#08283fe8;border:1px solid #7899af;border-radius:5px}
 #app .arena-note{top:13%;left:15%;width:70%;font-size:12px}
 #app .roundbar{gap:6px;flex-wrap:nowrap}
 #app .round-path{gap:3px;min-width:0}
 #app .round-path i{width:22px;height:22px;font-size:12px;flex-shrink:0}
 #app .round-path>span{width:5px}
 #app .arena-inventory{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow-y:auto;overscroll-behavior:contain}
 #app .bench-heading{top:65.3%;height:2.7%;line-height:1.2;min-height:0;font-size:clamp(11px,1.6vh,16px)}
 #app .shop-card{min-height:0}
 body.arena-focused #app .arena-bottom{top:auto;bottom:16px;right:16px}
}

#app .shop-heading{grid-row:1;min-height:0}#app .shop-heading .gold-info{margin-left:auto}

@media(min-width:1000px){
 #app .sell-drop{position:fixed;left:16%!important;bottom:35%!important;width:18%;height:4%;min-height:0;max-height:38px;padding:4px 8px;z-index:18;overflow:hidden}
 #app .sell-drop span{display:none}#app .sell-drop strong{font-size:12px}
 #app .top-actions{max-height:7vh;overflow:auto;align-content:flex-start;gap:6px}
}
@media(min-width:1000px) and (max-width:1300px){#app .edition,#app .top-divider{display:none}#app .top-actions button{font-size:11px}#app .roundbar{gap:4px;padding-left:8px;padding-right:8px}}

/* Sidebar tabs and portraits keep their own height instead of collapsing. */
#app .sidebar-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:40px;min-height:40px;flex:0 0 40px;gap:6px;margin:0 0 10px}
#app .sidebar-tabs button{display:flex;align-items:center;justify-content:center;min-width:0;height:40px;padding:0 6px;line-height:1.2;font-size:clamp(12px,1vw,15px);white-space:nowrap;box-sizing:border-box}
#app .right-panel .side-heading{flex:0 0 auto;margin:0 0 6px}
#app #players{flex:0 1 auto;min-height:0;max-height:14vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:3px}
#app .player-row{min-height:28px;flex-shrink:0}
#app .unit-inspector{display:flex;flex:1 1 auto;min-height:160px;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin-top:10px;padding:0 6px 8px;scrollbar-width:thin;background:#07253c}
#app .unit-inspector>*{flex-shrink:0}
#app .inspector-portrait{flex:0 0 clamp(96px,14vh,152px);height:clamp(96px,14vh,152px);min-height:96px;max-height:none;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#20527070,transparent 70%)}
#app .inspector-portrait :is(img,svg.unit-portrait){position:static;display:block;left:auto;top:auto;width:100%;height:100%;max-width:100%;max-height:100%;padding:5px 8px;margin:0;object-fit:contain;object-position:center;transform:none}
#app .unit-inspector h3{font-size:16px;padding:5px 3px;line-height:1.4}
#app .unit-inspector .inspector-traits{line-height:1.6;font-size:12px}
#app .player-row.opponent{border:1px solid #ffcc70;background:linear-gradient(90deg,#72522588,#153d56);box-shadow:inset 3px 0 #ffd475}
#app .player-name .player-opponent-badge{display:inline-block;margin-left:5px;padding:1px 4px;font-size:10px;line-height:1.3;color:#ffe19a;background:#654619;border:1px solid #d4a95b;border-radius:3px}
@media(min-width:1000px){
 #app .right-panel{height:51vh;max-height:51vh;overflow-y:auto;overflow-x:hidden;gap:0}
 #app .right-panel #combat-meter{flex:1 1 auto;min-height:0;overflow-y:auto}
 #app .arena-top{position:fixed;top:14%;bottom:auto;left:24%;right:auto;width:52%;z-index:17;display:flex;justify-content:center;align-items:center;font-size:clamp(13px,1.1vw,18px);white-space:normal;pointer-events:none}
 #app .arena-top #opponent{display:block;max-width:100%;padding:7px 16px;text-align:center;line-height:1.35;border:1px solid #d7bd74;border-radius:7px;background:linear-gradient(110deg,#07273ff5,#0c3952ef);color:#fff0c2;font-weight:900;overflow-wrap:anywhere;box-shadow:0 3px 12px #00172b88}
 #app .arena-top #opponent.opponent-fighting{border-color:#ffd47d;box-shadow:0 0 0 1px #aa824d77,0 4px 14px #00172b88}
 #app .arena-note{top:17%;font-size:11px}
}

@media(min-width:1000px){body.map-effect-visible #app .arena-top,#app:has(.encounter-banner:not([hidden])) .arena-top{display:none}}

/* Retain the original parchment, tier artwork, lavender chamber and layout. */
body .augment-dialog .augment-card>strong,body .augment-dialog .augment-catalog strong,body .augment-dialog .augment-history article>strong{color:#342b1e;font-size:21px;line-height:1.4;font-weight:800;letter-spacing:0;text-shadow:none}
body .augment-dialog .augment-card p,body .augment-dialog .augment-catalog p,body .augment-dialog .augment-history article>p{display:block;color:#352b20;font-size:15px;line-height:1.75;font-weight:600;white-space:pre-line;text-align:left;text-shadow:none;word-break:keep-all}
body .augment-dialog .augment-select{color:#493413;font-size:15px;font-weight:800;line-height:1.4}
body .augment-dialog .augment-card-kicker{color:#624314;font-size:12px;letter-spacing:1px;font-weight:800}
body .augment-dialog[data-tier="prismatic"] .augment-card :is(p,strong,.augment-card-kicker,.augment-select){color:#fff4ff;text-shadow:0 1px 2px #261e3c}
body .augment-dialog .augment-reroll{min-height:46px;padding:10px 12px;gap:8px;border:2px solid #88652d;color:#352710;font-size:15px;font-weight:800;line-height:1.3;flex-wrap:wrap;opacity:1}
body .augment-dialog .augment-reroll b{font:800 14px var(--font);padding:4px 8px;border:1px solid #a78343;background:#fff5d4;color:#382607;white-space:nowrap}
body .augment-dialog .augment-reroll:disabled{opacity:1;color:#6d665b;border-color:#b4a58b;filter:grayscale(.8);cursor:not-allowed}
body .augment-dialog .augment-reroll:disabled b{color:#665e51;background:#e9e0cf;border-color:#b4a58b}
body .augment-dialog :is(.augment-note,.augment-intro p,.augment-footer,.augment-rounds){color:#4c402e;font-size:13px;line-height:1.65}
body .augment-dialog #augment-clock{color:#82400d;font-size:17px;font-weight:900}
body .anomaly-dialog .anomaly-card h3{color:#3f294f;font-size:25px;line-height:1.4;font-weight:800}
body .anomaly-dialog .anomaly-card p{color:#302a38;font-size:16px;line-height:1.8;font-weight:600;text-shadow:none;word-break:keep-all}
body .anomaly-dialog :is(.anomaly-card small,.anomaly-note,.anomaly-timing,.anomaly-empty,.anomaly-orbit-label){color:#51425b;font-size:13px;font-weight:600;line-height:1.7}
body .anomaly-dialog #anomaly-clock{color:#683584;font-size:17px;font-weight:900}
body .anomaly-dialog .anomaly-actions button{min-height:46px;font-size:16px;line-height:1.4;font-weight:800;border-width:2px;color:#362817;opacity:1}
body .anomaly-dialog .anomaly-actions button b{color:#50330a;background:#fff3cd;padding:4px 8px;border:1px solid #a88c58;border-radius:4px;font-size:15px}
body .anomaly-dialog .anomaly-actions .anomaly-confirm{color:#fff8ff}
body .anomaly-dialog .anomaly-actions button:disabled{opacity:1;color:#82776d;border-color:#b7aa98;filter:grayscale(.8);cursor:not-allowed}
body .anomaly-dialog .anomaly-catalog button{color:#43334d;font-weight:700}
body .anomaly-dialog :is(.anomaly-catalog button.selected,.anomaly-unit-list button.selected){color:#452653;border-color:#8a569e;font-weight:800}
body .anomaly-dialog .anomaly-note b{color:#442b12;font-size:16px}
@media(max-height:700px){body .augment-dialog .augment-card p{font-size:14px;line-height:1.65}body .augment-dialog .augment-card>strong{font-size:19px}}

body .augment-dialog .augment-note{display:block}body .anomaly-dialog .anomaly-actions .anomaly-confirm:disabled{color:#fff8ef}body .anomaly-dialog .anomaly-unit-list button.selected :is(span,small){color:#452653}

/* Equipment identifies separate copies of the same evolution target. */
body .anomaly-dialog .anomaly-unit-list{max-height:190px;align-items:stretch}
body .anomaly-dialog .anomaly-unit-list button{flex-basis:100px;gap:3px}
body .anomaly-dialog .anomaly-unit-list .anomaly-unit-location{font-size:10px;color:#58462f;line-height:1.4;white-space:nowrap}
body .anomaly-dialog .anomaly-unit-items{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;min-height:24px;max-width:100%;overflow:visible;white-space:normal}
body .anomaly-dialog .anomaly-unit-items .equipped-item-icon{display:block;position:static;width:22px;height:22px;max-width:none;object-fit:contain;margin:0;border:1px solid #9b7540;border-radius:3px;background:#1b252c}
body .anomaly-dialog .anomaly-unit-items em{font-style:normal;font-size:10px;line-height:1.5;color:#6a5940}
body .anomaly-dialog .anomaly-selected-equipment{text-align:center;padding:6px 8px 9px;margin:0 auto 4px;border-bottom:1px solid #bba36d66}
body .anomaly-dialog .anomaly-selected-equipment>strong{display:block;color:#43324d;font-size:13px;line-height:1.5;margin-bottom:5px}
body .anomaly-dialog .anomaly-selected-equipment .equipped-item-icon{width:28px;height:28px}

/* Compact sale target and high-contrast encounter options. */
@media(min-width:1000px){#app .sell-drop{left:1%!important;bottom:35%!important;width:156px;height:auto;min-height:58px;max-height:none;padding:10px 12px;overflow:visible}#app .sell-drop span{display:block;font-size:13px}#app .sell-drop strong{font-size:11px}}
body .encounter-panel .encounter-choices>button{background:#f4e5c8;color:#152b3a;border:2px solid #b58c45;text-shadow:none;padding:16px;opacity:1}body .encounter-panel .encounter-choices>button :is(strong,b,small){color:#152b3a;text-shadow:none}body .encounter-panel .encounter-choices>button strong{font-size:18px}body .encounter-panel .encounter-choices>button small{font-size:14px;line-height:1.6}body .encounter-panel .encounter-choices>button:disabled{background:#b7b7b7;color:#303030}body .encounter-panel .encounter-item small{color:inherit}body[data-mode=practice] #arena-note,body[data-mode=practice] #arena-note *{animation:none!important;transition:none!important}
.selection-return{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:90;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:85vw}.selection-return[hidden]{display:none}.selection-return button{padding:15px 24px;border:2px solid #ffe19a;border-radius:9px;background:#102c40f2;color:#fff1c6;font-size:18px;font-weight:800;box-shadow:0 5px 20px #0009}

/* Keep the original parchment selection surface; avoid inherited navy text contrast. */
body #encounter-panel{top:6vh;bottom:auto;left:50%;right:auto;transform:translateX(-50%);margin:0;width:min(1000px,92vw);max-height:88vh;box-sizing:border-box;background:#f5e7c7;color:#283d45}
body #encounter-panel :is(p,small,label){color:#514631}body #encounter-panel :is(h2,h3,h4,strong,b){color:#203e4b}body #encounter-panel .encounter-lab-list button{background:#fff3d5;color:#203e4b;border:1px solid #ad8a4e}body #encounter-panel .encounter-lab-list button :is(span,strong,b){color:#203e4b}body #encounter-panel .encounter-actions button{background:#17475b;color:#fff6de}body #encounter-panel .encounter-actions button :is(small,b){color:#fff6de}body #encounter-panel [data-enc-clock]{color:#783d12;font-size:20px;font-weight:900}body #encounter-panel [data-enc-close]{background:#17475b;color:#fff6de;padding:10px 14px;border:1px solid #a7854c}
body[data-mode=practice] #app #arena-note{position:fixed;top:18%;left:25%;right:auto;width:50%;padding:7px 12px;border-radius:6px;background:#082a41ed;color:#fff6dc;text-shadow:none;z-index:21;box-sizing:border-box}body[data-mode=practice] #app .arena-top .arena-location{display:none}

/* Keep equipment beside the sidebar, and reserve the strip immediately above the bench for its controls. */
@media(min-width:1000px){
 #app .synergy-panel{bottom:calc(32% + 34px);height:auto;max-height:none;overflow-y:auto}
 #app .sell-drop{left:16%!important;height:58px;min-height:58px;max-height:58px;box-sizing:border-box;bottom:35%!important}
 #app .arena-inventory{left:16%;bottom:calc(35% + 70px);max-height:max(48px,calc(22vh - 80px));overflow-y:auto}
 #app .bench-heading{top:calc(68% - 28px);right:auto;width:max-content;max-width:calc(87% - 250px);height:28px;padding:4px 13px;white-space:nowrap;align-items:center}
 #app .bench-heading>span:last-child{display:none}
 #app .arena-bottom{top:calc(68% - 30px);bottom:auto;height:28px;max-height:28px}
 #app .arena-bottom #battle{padding:4px 13px;font-size:13px}
 body.arena-focused #app .bench-heading{top:calc(89% - 28px)}
 body.arena-focused #app .arena-bottom{top:calc(89% - 30px);bottom:auto;right:6.4%}
}