/* Non-modal controls leave the center of the battlefield and joystick available. */
.ability-option{cursor:pointer;text-align:left}
.ability-option[aria-pressed=true]{border-color:#f2d495;background:#394535;box-shadow:inset 3px 0 #f2d495}
#upgrade-panel{position:fixed;right:180px;top:146px;width:300px;max-height:calc(100dvh - 188px);z-index:4;border:1px solid #c8a971;background:#101e25eF;box-shadow:0 8px 26px #0006;display:flex;flex-direction:column}
#upgrade-toggle,#stats-toggle{width:100%;border:0;background:#23373b;color:#f2d69d;text-align:left;font-size:11px;font-weight:700;padding:12px;flex-shrink:0;touch-action:manipulation}
#upgrade-content{overflow-y:auto;overscroll-behavior:contain;padding:0 9px 8px;touch-action:pan-y}
#upgrade-panel .upgrade-choices{display:grid;grid-template-columns:1fr;gap:7px;margin:8px 0}
#upgrade-panel .upgrade-card{min-height:0;padding:10px;gap:5px;border-color:#8a7852;background:linear-gradient(135deg,#2d443c,#15272e)}
#upgrade-panel .upgrade-card:hover{border-color:#ffe5a6;background:#3c5146}
#upgrade-panel .upgrade-card strong{font:600 14px Cinzel,Georgia;padding-right:23px}
#upgrade-panel .upgrade-card>span:not(.eyebrow){font-size:10px;line-height:1.4}
#upgrade-panel .upgrade-card small{font-size:9px;line-height:1.4}
#upgrade-panel .upgrade-card .eyebrow{font-size:8px;letter-spacing:1px;padding-right:25px}
#upgrade-panel .spell-icon{width:24px;height:24px;top:9px;right:9px}
#upgrade-panel .passive-symbol{font-size:22px;top:7px;right:9px}
.upgrade-help,#upgrade-panel .upgrade-note{font-size:9px!important;line-height:1.4;color:#c3d4c7;margin:8px 0}
#stats-overlay{position:fixed;left:24px;top:154px;width:320px;max-height:calc(100dvh - 530px);min-height:37px;display:flex;flex-direction:column;z-index:3;border:1px solid #a18a5a77;background:#101e25dE}
#stats-content{overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 8px;touch-action:pan-y}
#stats-content dl{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
#stats-content dl>div{display:flex;justify-content:space-between;gap:5px;padding:4px 0;border-bottom:1px solid #b4b89420;font-size:9px}
#stats-content dt{color:#c1ccc4}#stats-content dd{margin:0;color:#f1dcab;font-variant-numeric:tabular-nums;white-space:nowrap}
#stats-content small{color:#9bd5aa}#stats-content p{font-size:8px;line-height:1.5;color:#99aaa5;margin:7px 0 0}
.power-cooldown{color:#f0d393}.trinket,.ultimate{bottom:315px;min-height:54px}.trinket span{font-size:8px;letter-spacing:0}
@media(max-width:1000px){#upgrade-panel{right:170px;width:270px}#stats-overlay{width:300px}}
@media(max-width:700px){
  #upgrade-panel{right:12px;top:145px;width:min(275px,calc(100% - 24px));max-height:calc(100dvh - 560px);min-height:39px;z-index:5}
  #upgrade-toggle{font-size:10px;padding:12px 10px}
  #upgrade-panel .upgrade-card strong{font-size:13px}
  #stats-overlay{left:12px;top:113px;width:150px;max-height:245px;z-index:4}
  #stats-content dl{grid-template-columns:1fr}
  #stats-toggle{font-size:9px;padding:9px}#stats-content dl>div{font-size:9px;padding:4px 0}
  #stats-overlay:has(#stats-content:not([hidden])){z-index:6;background:#101e25fa}
  .trinket{bottom:320px}.ultimate{bottom:320px;right:132px}#joystick{bottom:320px}
  #outpost-status{top:180px} .feed{top:155px;width:100px}
}
@media(max-height:600px) and (orientation:landscape){
  #upgrade-panel{right:12px;top:82px;width:240px;max-height:calc(100dvh - 105px)}
  #stats-overlay{top:55px;left:12px;width:155px;max-height:155px}
  .trinket,.ultimate{bottom:140px}#joystick{bottom:25px}
  body:has(#upgrade-panel:not([hidden])) .player-hud{right:265px;width:310px}
}

.status-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.status-chip{padding:3px 5px;color:var(--status-color);background:#08131e;border:1px solid var(--status-color);font-size:9px;white-space:nowrap}.status-chip.control{font-weight:bold}.status-chip b{font-variant-numeric:tabular-nums}.status-extra{font-size:9px;color:#b9c9c4}.passive-status{display:block;color:#aab6af;font-size:9px;margin-top:5px}.passive-status.active{color:#f3df99}.status-chip.control{box-shadow:inset 3px 0 var(--status-color)}

.match-clock strong.preparing{color:#ffe7a2;text-shadow:0 0 14px #d9a33a99;font-size:clamp(25px,4vw,38px)}

/* Four abilities share a single bar. */
#powers{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}#powers .power-group{min-width:0}#powers h3{font:700 9px system-ui;letter-spacing:1px;color:#dfc48a;margin:4px 0 6px}#powers .power-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:none;border:0;padding:0}#powers .power-card{min-width:0;min-height:105px;padding:6px 3px;background:#18282de8;border:1px solid #75664166;font-size:9px;text-align:center;pointer-events:auto}#powers .power-card b{display:block;color:#e5cb8e;font-size:9px;margin-top:3px}#powers .spell-icon{width:28px;height:28px;margin:0 auto 3px}.player-hud{width:min(800px,calc(100% - 48px))}.trinket,.ultimate{bottom:340px}
@media(max-width:700px){.player-hud{width:calc(100% - 28px)}#powers{grid-template-columns:minmax(340px,1fr);overflow-x:auto;pointer-events:auto;touch-action:pan-x;scrollbar-width:thin}#powers .power-card{font-size:8px;min-height:108px}#powers .spell-icon{width:24px;height:24px}.trinket{bottom:320px}.ultimate{bottom:320px;right:132px}#joystick{bottom:320px}#stats-overlay{max-height:max(37px,calc(100dvh - 480px))}#upgrade-panel{max-height:calc(100dvh - 530px)}}
@media(max-height:600px) and (orientation:landscape){.player-hud{width:360px}#powers{overflow-x:auto;grid-template-columns:440px;pointer-events:auto}#powers .power-slots{grid-template-columns:repeat(4,minmax(0,1fr))}.trinket,.ultimate{bottom:140px}#joystick{bottom:25px}#powers .power-card{min-height:72px}#powers .spell-icon{display:block;width:24px;height:24px}}

.power-swipe-hint{display:none}@media(max-width:560px){.power-swipe-hint{display:inline}}

#powers h3{display:flex;align-items:center;justify-content:space-between;gap:8px}.pet-badge{display:inline-flex;align-items:center;gap:4px;color:#dcc19a;font-size:9px;letter-spacing:0}.pet-badge img{width:28px;height:20px;object-fit:contain;image-rendering:pixelated}

#enter-training{width:100%;margin-top:10px;min-height:48px}
#training-controls{position:fixed;top:145px;right:18px;width:280px;z-index:7;color:#e6dfc4;background:#102025ee;border:1px solid #ad915b;pointer-events:auto;font:12px system-ui}
#training-controls summary{padding:12px;cursor:pointer;color:#f4d592;font-weight:800;list-style:none}
#training-controls summary::after{content:' +';float:right}#training-controls details[open] summary::after{content:' -'}
#training-controls form{padding:0 12px 12px;max-height:calc(100dvh - 310px);overflow:auto;overscroll-behavior:contain}
#training-controls p{font-size:11px;color:#c5c9be;line-height:1.5}
#training-controls label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
#training-controls input[type=number],#training-controls select{width:85px;padding:5px;background:#20383b;color:#fff;border:1px solid #877851}
#training-controls select[name=targetHealth]{width:160px}#training-controls fieldset{border:1px solid #5c6352;margin:10px 0;padding:5px 9px}
#training-controls button{width:100%;margin-top:8px;min-height:36px;border:1px solid #ad915b;background:#30443b;color:#f5dfae;font-size:10px}
#training-controls output{display:block;padding:9px;border-top:1px solid #5c6352;font-size:11px;font-variant-numeric:tabular-nums;color:#bfe5be}
@media(max-width:700px){#training-controls{width:240px;right:10px;top:190px}#training-controls form{max-height:calc(100dvh - 420px)}}