/* v0.11.2: replaces the old shield grids; no board or HUD width changes. */
body.playing #hud-left{max-height:calc(100dvh - 315px);min-height:0}
body.playing #hud-synergies{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}
body.playing #hud-left .synergy-entry{display:flex;width:100%;height:auto;min-height:0;position:relative;align-items:center;gap:6px;padding:7px 6px;text-align:left;border-radius:8px;opacity:1;box-sizing:border-box}
body.playing #hud-left .synergy-entry::before,body.playing #hud-left .synergy-entry::after{content:none}
body.playing .synergy-active-list,body.playing .synergy-inactive-list{display:flex;flex-direction:column;gap:5px}
body.playing .synergy-inactive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px;gap:6px 4px}
body.playing #hud-left .synergy-entry.active{border:1px solid var(--badge-color);border-left-width:3px;background:linear-gradient(105deg,color-mix(in srgb,var(--badge-color) 25%,#182741),#15213a 65%);box-shadow:inset 0 1px #ffffff24,0 2px 3px #0006}
body.playing #hud-left .synergy-entry.tier-2{background:linear-gradient(105deg,color-mix(in srgb,var(--badge-color) 36%,#182741),#192b46 80%);box-shadow:inset 0 1px #ffffff50,0 0 0 1px #ffffff14}
body.playing #hud-left .synergy-entry.tier-3{background:linear-gradient(105deg,color-mix(in srgb,var(--badge-color) 48%,#182741),#20334e);box-shadow:inset 0 1px #fff7,0 0 0 1px var(--badge-color)}
body.playing #hud-left .synergy-entry.inactive{padding:4px 5px;border:1px solid #7183a052;background:#142239eb;box-shadow:none;color:#bac6d8}
body.playing #hud-left .synergy-entry .type-symbol,body.playing #hud-left .synergy-entry .role-symbol{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;font-size:17px}
body.playing #hud-left .synergy-entry.inactive .type-symbol,body.playing #hud-left .synergy-entry.inactive .role-symbol{flex-basis:18px;width:18px;height:18px;font-size:13px}
body.playing #hud-left .synergy-entry .type-symbol svg{width:75%;height:75%}
body.playing #hud-left .syn-data{display:block;min-width:0;width:100%}
body.playing #hud-left .syn-top{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:3px;width:100%;line-height:1.25}
body.playing #hud-left .syn-top strong{font-size:12px;white-space:normal}
body.playing #hud-left .syn-top b{font-size:10px;white-space:nowrap;color:#fff2c7}
body.playing #hud-left .syn-effect{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:10px;line-height:1.35;color:#f5f6ff;overflow-wrap:anywhere}
body.playing #hud-left .syn-status{display:flex;align-items:center;justify-content:space-between;gap:2px;margin-top:3px;font-size:9px;color:#c6d3e5;line-height:1.3}
body.playing #hud-left .inactive .syn-top strong,body.playing #hud-left .inactive .syn-top b{font-size:10px}
body.playing #hud-left .inactive .syn-status{font-size:8px;margin-top:1px;color:#aebed3}
body.playing #hud-left .synergy-entry.inactive{min-height:32px;gap:4px}
body.playing #hud-left .inactive .syn-top{justify-content:flex-end}
body.playing #hud-left .inactive .syn-top strong,body.playing #hud-left .inactive .syn-status>span{display:none}
body.playing #hud-left .inactive .syn-status{position:absolute;right:1px;top:-5px;margin:0}
.syn-near{font-style:normal;border:1px solid #efc461;border-radius:4px;color:#ffe7a0;background:#745519;padding:0 3px;font-size:9px;flex-shrink:0}
body.playing #hud-left .synergy-entry.changed{animation:synergy-activate .42s ease-out 1}
@keyframes synergy-activate{0%{filter:brightness(1.5);transform:translateX(-3px)}100%{filter:brightness(1);transform:none}}
body.playing #hud-right{max-height:calc(100dvh - 295px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}
body.playing #hud-right>*{flex-shrink:0}
#hud-trait-description{border:1px solid #778eb64a;border-radius:5px;color:#c6d5e9;background:#16223cde;padding:4px 6px;font-size:10px}
#hud-trait-description summary{cursor:pointer}#hud-trait-description p{margin:5px 0;line-height:1.5}
.synergy-overview{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.synergy-overview button{display:grid;grid-template-columns:23px 1fr auto;gap:5px;align-items:center;text-align:left;padding:7px;background:#182a46;border:1px solid #61739375;border-radius:7px;font-size:12px;color:#dce8f7}
.synergy-overview button.lit{border-color:#edcc81;background:#293f58}.synergy-overview small{grid-column:1/-1;font-size:10px;line-height:1.4;color:#bacbe1}
.synergy-overview .type-symbol{width:21px;height:21px}.synergy-overview b{color:#f5d58b;font-size:11px}
@media(max-width:1000px),(max-height:650px){
 body.playing #hud-left{max-height:calc(100dvh - 174px)}
 body.playing #hud-right{max-height:calc(100dvh - 174px);gap:3px}
 body.playing #hud-left .synergy-entry{gap:3px;padding:4px 3px;border-radius:5px}
 body.playing #hud-left .synergy-entry .type-symbol,body.playing #hud-left .synergy-entry .role-symbol{width:18px;height:18px;flex-basis:18px;font-size:13px}
 body.playing #hud-left .synergy-entry.inactive .type-symbol,body.playing #hud-left .synergy-entry.inactive .role-symbol{width:14px;height:14px;flex-basis:14px;font-size:10px}
 body.playing #hud-left .syn-top strong{font-size:9px}
 body.playing #hud-left .syn-top b{font-size:8px}
 body.playing #hud-left .syn-effect{font-size:8px;margin-top:2px;line-height:1.35}
 body.playing #hud-left .syn-status{font-size:7px;margin-top:2px}
 body.playing #hud-left .inactive .syn-top strong,body.playing #hud-left .inactive .syn-top b{font-size:8px}
 body.playing #hud-left .inactive .syn-status{font-size:7px}
 body.playing #hud-left .synergy-entry.inactive{min-height:27px;padding:4px 3px;gap:2px}
 body.playing .synergy-active-list{gap:4px}body.playing .synergy-inactive-list{gap:3px}
 #hud-trait-description{font-size:8px;padding:3px}
 .syn-near{font-size:8px;padding:0 2px}
}
@media(prefers-reduced-motion:reduce){body.playing #hud-left .synergy-entry.changed{animation:none}}

/* Icon-only normalization. Card geometry, counters and type colors remain unchanged. */
.type-symbol.original-type{padding:0;overflow:hidden;box-sizing:border-box}
.type-symbol.original-type img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.synergy-vector,.synergy-portrait{display:inline-flex;position:relative;align-items:center;justify-content:center;width:24px;height:24px;vertical-align:middle;flex-shrink:0;box-sizing:border-box;border:1px solid #8da4c4;border-radius:5px;background:linear-gradient(#243752,#0c192c);box-shadow:inset 0 1px #ffffff30;overflow:hidden}
.synergy-vector{color:var(--role-color,#dce7f7);border-color:color-mix(in srgb,var(--role-color,#dce7f7) 60%,#243752)}
.synergy-vector svg{display:block;width:86%;height:86%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.synergy-portrait img{position:absolute;display:block;max-width:none!important;width:155%;height:155%;object-fit:contain;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
.synergy-portrait.portrait-133 img{width:270%;height:270%;left:-87%;top:-52%}
.synergy-overview .role-symbol{width:21px;height:21px}
#detail-popover h2 .role-symbol,#detail-popover h2 .type-symbol{vertical-align:middle}

/* v0.11.3: only synergy panels use a pinned header and contained scroll area. */
#detail-popover.synergy-panel{position:fixed;left:auto;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));bottom:auto;width:400px;max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;font-size:12px}
#detail-popover.synergy-panel.hidden{display:none}
.synergy-panel-head{display:flex;align-items:center;gap:5px;flex-shrink:0;padding:5px 7px;background:#1b2b48;border-bottom:1px solid #7389ae66}
#detail-popover .synergy-panel-head h2{flex:1;min-width:0;font-size:14px;line-height:1.4;margin:0;padding:0;overflow-wrap:anywhere}
#detail-popover .synergy-panel-head .detail-close{position:static;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;border-radius:6px;font-size:19px}
.synergy-back{flex:0 0 48px;min-height:44px;background:#263d5f;border:1px solid #768dae;border-radius:6px;color:#e5eefb;font-size:12px}
.synergy-panel-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:10px;scrollbar-width:thin}
.synergy-panel-scroll>.detail-note:first-child{margin-top:0}
#detail-popover .synergy-group h3{font-size:12px;color:#c7d9ed;margin:9px 0 6px}
.synergy-panel .synergy-overview{gap:6px}
.synergy-panel .synergy-overview button{min-width:0;grid-template-columns:22px 1fr auto;gap:4px;padding:7px 5px;font-size:11px}
.synergy-panel .synergy-overview strong{min-width:0;overflow-wrap:anywhere}
.synergy-all-toggle{width:100%;min-height:44px;margin-top:10px;background:#283c5b;border:1px solid #8197b7;border-radius:6px;color:#e9f1ff;font-size:12px}
.synergy-empty{color:#bbcce0;line-height:1.6}
#detail-popover.synergy-panel .member-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#detail-popover.synergy-panel .member-grid small{text-align:center;overflow-wrap:anywhere}
body.playing #hud-left .synergy-entry.inactive{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 4px;min-height:42px}
body.playing #hud-left .inactive .syn-data,body.playing #hud-left .inactive .syn-top{display:contents}
body.playing #hud-left .inactive .syn-top strong{display:block;grid-column:2;grid-row:1;font-size:10px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
body.playing #hud-left .inactive .syn-top b{display:block;grid-column:2;grid-row:2;font-size:10px;line-height:1.2}
body.playing #hud-left .inactive .type-symbol,body.playing #hud-left .inactive .role-symbol{grid-column:1;grid-row:1 / 3;align-self:center}
body.playing #hud-left .inactive .syn-status>span{display:none}
@media(max-width:1000px),(max-height:650px){
 #detail-popover.synergy-panel{width:40vw;font-size:12px}
 .synergy-panel .synergy-overview{grid-template-columns:1fr}
 .synergy-panel .synergy-overview button{font-size:12px;padding:8px}
 body.playing .synergy-inactive-list{grid-template-columns:1fr}
 body.playing #hud-left .synergy-entry.inactive{grid-template-columns:16px minmax(0,1fr);min-height:39px;padding:4px 5px;gap:1px 4px}
 body.playing #hud-left .inactive .syn-top strong,body.playing #hud-left .inactive .syn-top b{font-size:10px}
}

#hud-synergy-toggle,#detail-popover.synergy-panel button{ -webkit-tap-highlight-color:transparent}

body:has(#detail-popover.synergy-panel:not(.hidden)) #hud-inspector{visibility:hidden;pointer-events:none}