.health-wallet{position:relative;border-radius:6px}.health-wallet>span:last-of-type{min-width:70px}.health-meter{position:relative;display:block;height:4px;width:84px;max-width:100%;margin-top:4px;overflow:hidden;border-radius:3px;background:#0c3039}.health-meter>i{display:block;position:absolute;left:0;top:0;height:100%}.health-trail{background:#f5c888}.health-current{background:#a9e5bd}.health-wallet[data-health=low] .health-current{background:#f5d085}.health-wallet[data-health=critical] .health-current{background:#f5a17f}.health-loss-receipt{position:absolute;right:0;top:0;font-size:12px;line-height:1.3;padding:1px 4px;color:#ffe0bd;background:#6e3c36e8;border:1px solid #e6a18488;border-radius:4px;pointer-events:none;white-space:nowrap;z-index:2}.health-loss-receipt[hidden]{display:none!important}
@media(max-width:700px) and (orientation:portrait){.health-wallet>span:last-of-type{min-width:54px}.health-meter{width:65px;height:3px;margin-top:3px}.health-loss-receipt{font-size:10px;right:-3px;top:-8px}}
@media(max-height:550px) and (orientation:landscape){.health-meter{width:68px;height:3px;margin-top:2px}.health-wallet>span:last-of-type{min-width:60px}.health-loss-receipt{font-size:10px;top:-4px}}

/* The display dialog keeps all controls and the return button in reach on short screens. */
#play .battle-display-overlay .modal{width:100%;max-width:490px;padding:20px 24px;text-align:left}
#play .battle-display-overlay .modal h2{margin:0 0 4px;font-size:26px}
.battle-display-overlay .display-intro{margin:0 0 12px}
.display-presets{min-inline-size:0;margin:0 0 8px;padding:0;border:0}
.display-presets legend{padding:0 0 5px;color:#24504b;font-size:12px;font-weight:800}
.display-presets>div,.display-options{display:grid;gap:5px}
.display-presets>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.display-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.display-presets label,.display-options label{
 display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px;
 border:1px solid #a6b79b;border-radius:6px;background:#edf1e0;color:#214e46;
 font-size:12px;line-height:1.2;font-weight:750;cursor:pointer;
}
.display-presets label:has(input:checked){background:#246158;border-color:#246158;color:#fff8dc}
.display-presets input,.display-options input{width:16px;height:16px;flex:none;margin:0;accent-color:#246158}
.display-presets label:has(input:focus-visible),.display-options label:has(input:focus-visible){outline:2px solid #b57130;outline-offset:2px}
.battle-display-overlay .display-note{margin:7px 0 0;font-size:11px!important;line-height:1.3}
#play .battle-display-overlay #close-battle-display{margin:10px 0 0;width:100%}
@media(max-height:550px) and (orientation:landscape){
 #play .battle-display-overlay{padding:54px 12px 8px}
 #play .battle-display-overlay .modal{display:grid;grid-template-columns:1.2fr 1fr;gap:6px 10px;max-width:650px;padding:12px 16px}
 #play .battle-display-overlay .modal>:not(.display-presets):not(.display-options){grid-column:1/-1;margin:0}
 #play .battle-display-overlay .modal h2{font-size:22px}
 .display-presets{margin:0}
 .display-options{align-items:end}
 #play .battle-display-overlay #close-battle-display{margin:0;min-height:44px;padding:6px 12px}
}

/* Screen edges respond to actual combat events, including in map-only view. */
#combat-screen-feedback{
 position:absolute;
 inset:0;
 z-index:110;
 pointer-events:none;
 opacity:0;
}
#combat-screen-feedback[data-cue=kill]{
 box-shadow:inset 0 0 32px 4px #f8d583b0,inset 0 0 0 3px #ffe29b;
}
#combat-screen-feedback[data-cue=leak]{
 background:radial-gradient(ellipse 130px 100px at var(--leak-x) var(--leak-y),#ff643b6b,transparent);
 box-shadow:inset 0 0 52px 10px #e43d34bc,inset 0 0 0 4px #ff7860;
}

#combat-screen-feedback[data-cue=slam]{
 box-shadow:inset 0 0 42px 7px #d5773590,inset 0 0 0 4px #ffc17e;
}
#combat-screen-feedback[data-cue=interrupt]{
 box-shadow:inset 0 0 24px 3px #a1e9c686,inset 0 0 0 3px #c7ffe4;
}
#combat-screen-feedback[data-cue=skill]{
 box-shadow:inset 0 0 32px 3px #79dfcf72,inset 0 0 0 3px #c1f4cc;
}
#play[data-combat-effects=calm] #combat-screen-feedback{
 background:none;
 box-shadow:inset 0 0 0 3px #fbe1a6;
}
#play[data-combat-effects=calm] #combat-screen-feedback[data-cue=leak]{box-shadow:inset 0 0 0 4px #ff9279}
#play[data-combat-effects=calm] #health-danger-frame{animation:none}

#health-danger-frame{
 position:absolute;
 inset:0;
 z-index:107;
 pointer-events:none;
 box-shadow:inset 0 0 0 3px #eab36a,inset 0 0 32px 4px #d2863340;
}
#health-danger-frame[data-health=critical]{
 box-shadow:inset 0 0 0 4px #ff826d,inset 0 0 48px 8px #d33b3b80;
}
#health-danger-frame[hidden],#lighthouse-alert[hidden],#lighthouse-damage[hidden]{display:none!important}
#lighthouse-alert,#lighthouse-damage{
 position:absolute;
 z-index:108;
 pointer-events:none;
 box-sizing:border-box;
 border-radius:7px;
 text-align:center;
 font-variant-numeric:tabular-nums;
}
#lighthouse-alert{
 top:58px;
 right:8px;
 max-width:200px;
 padding:6px 9px;
 background:#694524f2;
 border:2px solid #eebd77;
 color:#fff0bd;
}
#lighthouse-alert strong,#lighthouse-alert span{display:block}
#lighthouse-alert strong{font-size:11px;line-height:1.25}
#lighthouse-alert span{font-size:20px;font-weight:850;line-height:1.25;margin-top:3px}
#lighthouse-alert[data-health=critical]{background:#6c252bf5;border-color:#ff9a89;color:#fff0da}
#lighthouse-damage{
 top:14%;
 left:50%;
 translate:-50% 0;
 width:min(240px,80%);
 padding:8px 14px;
 border:2px solid #ffad90;
 background:#4d2229f2;
 color:#ffe0be;
 box-shadow:0 4px 18px #112c3c66;
}
#lighthouse-damage strong,#lighthouse-damage b,#lighthouse-damage span{display:block}
#lighthouse-damage strong{font-size:12px;line-height:1.2;letter-spacing:.5px}
#lighthouse-damage b{font-size:32px;line-height:1.15;font-weight:900;margin:3px 0}
#lighthouse-damage span{font-size:12px;line-height:1.3}
#lighthouse-damage[data-health=critical]{border-color:#fff1c4;box-shadow:0 0 18px #e04f4266}
#play .health-wallet[data-health=low]{background:#694524;border:1px solid #eebd77}
#play .health-wallet[data-health=critical]{background:#742e32;border:1px solid #ff9a89;color:#ffdfcf}
#play .health-wallet:is([data-health=low],[data-health=critical]){padding:3px 5px}
#play .health-wallet:is([data-health=low],[data-health=critical]) #lives{color:#fff0d3;font-weight:900}
@media(max-height:550px) and (orientation:landscape){
 #lighthouse-damage{top:12%;width:min(198px,60%);padding:4px 7px;display:grid;grid-template-columns:1fr auto;gap:1px 7px;align-items:center;text-align:left}
 #lighthouse-damage strong{font-size:10px}
 #lighthouse-damage b{grid-column:2;grid-row:1/3;font-size:23px;margin:0}
 #lighthouse-damage span{font-size:10px}
 #play.landscape-stage.side-controls #lighthouse-alert{
  top:auto;
  right:auto;
  bottom:8px;
  left:6px;
  width:100px;
  padding:6px 3px;
 }
 #play.landscape-stage[data-interface-hidden=true] #lighthouse-alert{
  top:auto;
  right:auto;
  bottom:8px;
  left:6px;
  width:68px;
  padding:5px 3px;
 }
 #play.landscape-stage[data-interface-hidden=true] #lighthouse-alert strong{font-size:10px}
 #play.landscape-stage[data-interface-hidden=true] #lighthouse-alert span{font-size:17px}
}
@media(prefers-reduced-motion:no-preference){
 #health-danger-frame[data-health=critical]{animation:lighthouse-critical-breathe 2.4s ease-in-out infinite}
 #health-danger-frame[data-paused=true]{animation-play-state:paused}
}
@keyframes lighthouse-critical-breathe{0%,100%{opacity:.55}50%{opacity:1}}

#play.landscape-stage.side-controls #lighthouse-alert{display:none}
#play .health-wallet:is([data-health=low],[data-health=critical]) small{
 font-size:9px;
 white-space:normal;
 line-height:1.25;
}