/*
    !!
    NOTE: because host-context() is not supported, some things have been hacked in via properties in attackDeclaration.css
    
        --ranged-attack-display
        --physical-attack-display
        --declare-physical-attack-display
*/

*{
    box-sizing: border-box;
    /* v for demoing */
    /* cursor:none !important; */
}

:host{
    --option-size:50px;
    --highlight-color:#ece8b0;	
    --target-mod-bg-default:#505050;
    --alert-color:#cc8585;
    z-index:2;
}

/* 
    NOTE: Ideally these two would be :host-context(record-sheet.weaponsDeclared) 
    But :host-context is not supported in Safari
    Instead we're going to rely on the record-sheet setting these flags				
*/    

:host([weapons-declared]) .physical-only{
    display:none !important;
}

:host([physicals-declared]) .ranged-only{
    display:none !important;
}

:host{
    position: absolute;
    right:4px;
    top:30px;		

    max-height: calc(100vh - 60px);
    overflow: scroll;    
    /* font-family: inherit; */
}		

.calculator-panel{
    
    font-family:var(--normal-font);
    font-size: 12pt;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    user-select: none; /* supported by Chrome and Opera */
    box-sizing: border-box;
    cursor: default;
    width: 250px;
}

.calculator-panel .details{
    background-color:black;
    padding: 4px;

    outline:4px solid black;
    outline-offset:-4px;
}

.calculator-panel .declare-buttons{
    display: flex;
    flex-direction: column;
    margin-top: 2px;

    background-color:black;
    padding: 4px;

    outline:4px solid black;
    outline-offset:-4px;
}
/*  just disable the attack buttons instead of hiding them. */

.attack-button{
    text-transform: capitalize;
    background-color: #fcdb4e;
    color: black;

    font-family: var(--bold-font);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.01em;
    padding: 6px 0px 6px 0px;	 
    /* margin-top:6px; */
    display: none;
    cursor: pointer;
    letter-spacing: 0.08em;
}    

.blocker{
    pointer-events: none;
    display: block;
    background-color: var(--alert-color);
    color: #000000;
    letter-spacing: 0;
    
    text-align: center;
    font-size: 12px;
    padding: 6px 6px 6px 6px;
    margin-top: 6px;
    display: none;
    cursor: pointer;
    font-family: var(--bold-font);
    display:none;    
}

:host([target-in-movement]) #target-in-movement{
    display: block;
}
:host([target-in-weapons]) #target-in-weapons{
    display: block;
}
:host([air-water-boundary]) #air-water-boundary{
    display: block;
}
:host([bad-physical-combo]) #physical-blocker{
    display: block;
}
:host([bad-physical-water-combo]) #physical-water-blocker{
    display: block;
}
:host([bad-charge-target]) #bad-charge-target{
    display: block;
}
:host([target-cant-revert]) #target-cant-revert{
    display: block;
}

:host([results-locked]) #results-locked{
    margin-top:1px;
    display: block; 
}
:host([results-locked]) #target .modifier:not(#TARGET_UNIT),
:host([results-locked]) #range-category,
:host([results-locked]) #attack-direction,
:host([results-locked]) #elevation-difference,
:host([results-locked]) .attack-button,
:host([results-locked]) .blocker:not(#results-locked){
    display:none !important;
    /* pointer-events: none;
    cursor:not-allowed; */
}
:host([results-locked]) #TARGET_UNIT{
    background-color: var(--alert-color);
    pointer-events: none;
    cursor:not-allowed;
}

#discard-changes{
    margin-top: 2px;
    font-family: var(--normal-font);
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    margin-top: 4px;
}

#redeclare-attacks,
#discard-changes{
    display:var(--redeclare-attack-display);
}


:host(.incomplete-declaration) .attack-button{
    color:#fcdb4e;
    background-color: black;
    outline:1px solid #fcdb4e;
    outline-offset: -4px;
    pointer-events: none;
}

.attack-button:hover{
    background-color: var(--bright-warning);        
}
.attack-button:active{
    background-color: var(--hover-color);
    color:white;
}

/*
    These flags are in attackDeclaration.css :(
*/
#resolve-ranged-attack{
    display: var(--ranged-attack-display);
}
#resolve-physical-attack{
    display: var(--physical-attack-display);
}
#declare-physical-attack{
    display: var(--declare-physical-attack-display);
}

    /*

    modifiers

*/ 

/* active modifier */
.modifier{
    display:flex;
    align-items:center; 
    position: relative;
    background-color:var(--highlight-color);
    color:black;
    margin: 0px 0px 1px 0pt;
    min-width: 100%;
    justify-content: space-between;
    font-size: 10px;
}

#range-category .modifier{
    background-color: var(--target-mod-bg-default);
}


#attacker .modifier{
    background-color: #313131;
    color:#999;
} 


.modifier[data-value="0"],
.modifier:not([data-value]){
    display: none;
}		

.modifier[data-value="Infinity"],
.modifier[data-value="null"]{
    background-color: #313131 !important;
}

.modifier[data-value="Infinity"],
.modifier[data-value="null"],
.modifier[data-value="Infinity"] .mod-value,
.modifier[data-value="null"] .mod-value
{
    /* color:var(--warning-yellow) !important;         */
    color: black !important
}

#TARGET_BECAME_SUBMERGED,
#TARGET_PRONE{
    display: none;
}
#TARGET_BECAME_SUBMERGED.modifier[data-value="Infinity"],
    #TARGET_PRONE.modifier[data-value="Infinity"]{
    display: flex;
    background-color: var(--alert-color) !important;
    color:white !important;
}

#TARGET_BECAME_SUBMERGED.modifier[data-value="Infinity"] .mod-value::before,
    #TARGET_PRONE.modifier[data-value="Infinity"] .mod-value::before{
    content: "" !important;
}
#TARGET_BECAME_SUBMERGED.modifier[data-value="Infinity"] .mod-value::after,
    #TARGET_PRONE.modifier[data-value="Infinity"] .mod-value::after{
    display: inline-block;
    content:"×" !important;
    color: white !important;
    transform: scale(1.5);
    transform-origin: 50% 50%;    
}

#target .modifier[data-value="Infinity"]:not(#TARGET_MOVEMENT_MODIFIER):not(#TARGET_BECAME_SUBMERGED):not(#TARGET_PRONE),
#target .modifier[data-value="null"]:not(#TARGET_MOVEMENT_MODIFIER),
#range-category .modifier[data-value="null"]
{
    background-color:var(--warning-yellow) !important;        
    color:black;
    font-family: var(--bold-font);
    font-weight: normal; /* safari tries to extra bold the bold */
/*         letter-spacing: 0.05em !important; */
}


.mod-label{
    flex-grow: 1;
    text-align: right;
    margin-right:10px;
    margin-left:6px;
    font-family:var(--bold-font);
}

.mod-value{
    background-color: rgba(0,0,0,0.2);
    border-radius: 2px;
    padding:4px 4px 4px 4px;
    margin: 2px 2px 2px 2px;
    min-width: 30px;
    text-align: right;
    font-family:var(--bold-font);

}		
.mod-value::after{
    content: attr(data-value);
}
.mod-value::before{
    content: "+";
    margin-right: 3px;
}

.mod-value[data-value="Infinity"]::after,
.mod-value[data-value="null"]::after{
    content: "?";
}

#attacker .mod-value{
    background-color: black;
    color:whitesmoke;
    padding:2px 4px 2px 4px;
}

/*
    Toggle styles
*/

/* all the time */
.modifier.toggle{
    display: flex !important;
}

.modifier.toggle.forbidden{
    outline:none !important;
    pointer-events:none !important;
}

/* active + off */
.modifier.toggle:not([data-value]):not(.option-set){
    background-color:var(--target-mod-bg-default);
    color:var(--highlight-color);
}
.modifier.toggle:not([data-value]):not(.option-set) .mod-value{
    background-color: rgba(0,0,0,0.2);
}
.modifier.toggle:not([data-value]):not(.option-set) .mod-value::before{
    color:transparent;
}
.modifier.toggle:not([data-value]):not(.option-set) .mod-value::after{
    content:"—";
    color:black;
}

/* active + on */
.modifier.toggle[data-value]:not(.option-set){
    color:black;
    background-color:var(--highlight-color);			
}		

.modifier.toggle[data-value]:not(.option-set) .mod-value{
    color:black;
}

/* if the modifier can be derrived from the status of the target, treat as a normal modifier */
:host([target-status-available]) .modifier.status-derived{
    outline:none;
    pointer-events: none;
    position:relative;
    /* opacity: 0.7 !important; */
    background-color: #dfdfdf; /* distracting */
    /* color: #ccc;
    background-color: transparent; */
}

:host([target-status-available]) .modifier.status-derived .mod-label::before{
    content:"🔒";
    filter:saturate(0) invert(1);
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
}

/* :host([target-status-available]) .modifier.toggle.status-derived .mod-value{			 */
    /* color: white; */
/* } */
:host([target-status-available]) .modifier.toggle.status-derived:not([data-value]){
    display: none !important;
}

/*

    option buttons

*/

.option-set{
    display:flex;
    text-align: left;	
    padding:4px 0px 4px 4px;
    background-color:var(--target-mod-bg-default);
}

.option-set .description{
    display: flex;        
}

.option-set .mod-label{
    display: none;
}

.option-set .mod-value{
    margin: 0px 2px 0px 0px;
    color:white;
}

.option-set .option-buttons{
    letter-spacing: 0px;
    font-size: 0px;
    display: flex;    
    flex-grow:1;
}

.option-set .option{	
    width: 30px;
    height: 30px;
    font-size: 8px;        
    vertical-align: middle;
    color:#999;
    user-select: none;
    cursor: pointer;
    opacity:0.5;
}


#COVER .mod-label{
    align-self: center;
    display: initial;
    color:var(--highlight-color);
}
#COVER .option{
    outline:1px solid var(--target-mod-bg-default);
    outline-offset: -0.5px;
}


.option-set[data-value="null"] .option[data-val],
#range-category[data-value="null"] .category-label,
#attack-direction[data-value="null"] .category-label,
#elevation-difference[data-value="null"] .category-label
{
    opacity: 1 !important;
    color:black !important; /* sorry! */
    background-color: #fcdb4e !important; /* warning-yellow */
}	

#range-category .category-label,
#attack-direction .category-label,
#elevation-difference .category-label{
    border-bottom:1px dotted transparent;
    padding-bottom: 4px;
}

#range-category[data-value="null"] .category-label,
#attack-direction[data-value="null"] .category-label,
#elevation-difference[data-value="null"] .category-label{
    border-bottom:1px dotted black;
    padding-bottom: 4px;
}

.option-set[data-value="-4"] .option[data-val="-4"],		
.option-set[data-value="-3"] .option[data-val="-3"],
.option-set[data-value="-2"] .option[data-val="-2"],
.option-set[data-value="-1"] .option[data-val="-1"],
.option-set[data-value="0"] .option[data-val="0"],
.option-set[data-value="1"] .option[data-val="1"],
.option-set[data-value="2"] .option[data-val="2"],
.option-set[data-value="3"] .option[data-val="3"],
.option-set[data-value="4"] .option[data-val="4"],
.option-set[data-value="5"] .option[data-val="5"],
.option-set[data-value="6"] .option[data-val="6"],
.option-set.radio[data-value="Infinity"] .option[data-val="Infinity"]{
    background-color:var(--highlight-color);
/*         background-color:white; */
    opacity:1 !important; 
/*         filter: none; */
}

/* selected appearence */
.option-set.range .option{
    background-color:var(--highlight-color);
    /* filter:invert(0); */
    opacity:1;        
}

/* de-emph the options AFTER the selected on */
.option-set.range[data-value="0"]  .option[data-val="0"] ~ .option,
.option-set.range[data-value="1"]  .option[data-val="1"] ~ .option,
.option-set.range[data-value="2"]  .option[data-val="2"] ~ .option,
.option-set.range[data-value="3"]  .option[data-val="3"] ~ .option,
.option-set.range[data-value="4"]  .option[data-val="4"] ~ .option,
.option-set.range[data-value="5"]  .option[data-val="5"] ~ .option,
.option-set.range[data-value="6"]  .option[data-val="6"] ~ .option,
.option-set.range[data-value="-1"] .option[data-val="-1"] ~ .option,
.option-set.range[data-value="-2"] .option[data-val="-2"] ~ .option,
.option-set.range[data-value="-3"] .option[data-val="-3"] ~ .option,
.option-set.range[data-value="-4"] .option[data-val="-4"] ~ .option,
.option-set.range[data-value="-4"] .option[data-val="-4"] ~ .option{
    background-color:transparent !important;
/*         opacity:0.5; */        
    /* filter:invert(1); */
    
}

/*
    modifier groups . categories
*/

.category-label{
    text-transform: uppercase;
    font-family: var(--bold-font);
    letter-spacing: 0.1em;
    background-color:black;
    color:white; 
    font-size: 8px;
    padding: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    z-index: 1;        
    /*! margin-top:12px; */       
}

#attacker .category-label,
#range-category .category-label,
#attack-direction .category-label,
#elevation-difference .category-label
{        
    background-color: var(--target-mod-bg-default);    
    pointer-events: none;
}
#range-category,
#attack-direction{
    margin-bottom:1px;
}

#range-category .category-label,
#attack-direction .category-label,
#elevation-difference .category-label{
    padding-top: 8px;
}

#attacker .category-label
{
    background-color: black;
}

.touchable,.toggle{
    cursor: pointer;
}

.touchable:not(.selected){
    /*outline:1px solid grey;
    outline-offset: -3px;*/
/* 			opacity: 0.35; */
    color:var(--highlight-color)
}		

.touchable.selected,
#TARGET_IMMOBILE[data-value="-4"] + #AIM_AT,
#AIM_AT[data-value="3"]{
    color:black;
    background-color:var(--highlight-color);
    display: flex;
}				
#TARGET_IMMOBILE[data-value="-4"] + #AIM_AT .mod-value,
#AIM_AT[data-value="3"] .mod-value{
    color:black;
}

#TARGET_IMMOBILE[data-value="0"] .mod-value{
    visibility: hidden;
}

#base-to-hit{
    background-color:black;
    color:var(--highlight-color);
    font-size:24px;
    /* display: flex; */
    display: none;
    
/* 			padding: 5px 4px 5px 4px;  */
}
#base-to-hit .category-label{
    flex-grow: 1;
    text-align: right;
    margin-right: 12px;
    background-color:black;
    color:var(--highlight-color);
/* 		position: inline-block; */
    font-size: 9pt;
    padding: 10px 0px 12px 12px;
/*! min-width: 60%; */
}

/* #range-category .category-label{
    color:white;
} */

#base-to-hit-value{
    text-align: right;
    margin-right:4px; 
}
#base-to-hit-value::after{
    /* content:"+"; */
    margin-left:0.1em
}

#RANGE{
    text-align: right;
    padding: 6px 4px 6px 4px;			
    margin: 0px 0px 0px 0px;
}

:host([data-base-to-hit-overriden]) .modifier:not(#TARGET_PLAYER):not(#TARGET_UNIT):not(#AIM_AT):not(#PARTIAL){
    opacity: 0.1;
}

:host([data-base-to-hit-overriden]) #PARTIAL .mod-value{
    opacity: 0;
}

#attack-direction,
#elevation-difference{			
    background-color: black;		
    padding: 0px;
    flex-direction: column;
}
#attack-direction .option,
#elevation-difference .option{
    text-align: center;
    flex-grow:1;
    font-size: 7pt;
    padding:12px 6px 12px 6px !important;	
    color:var(--highlight-color);
    background-color: #313131;
    outline: 0px solid black;
    height: inherit;
    width: initial;
    opacity: 1;
    font-family: var(--bold-font);
}


#elevation-difference[data-value="-1"] 	[data-val="-1"],
#elevation-difference[data-value="0"] 	[data-val="0"],
#elevation-difference[data-value="1"] 	[data-val="1"],
#attack-direction[data-value="FRONT"] 	[data-val="FRONT"],
#attack-direction[data-value="REAR"] 	[data-val="REAR"],
#attack-direction[data-value="RIGHT"] 	[data-val="RIGHT"],
#attack-direction[data-value="LEFT"] 	[data-val="LEFT"]{
    background-color:var(--target-mod-bg-default);
    opacity:1;
    color: white;
}


#base-to-hit-value[data-value]::before{
    content:attr(data-value);
}

/*
    
    section styles

    */

#target .category-label{
    background-color: transparent;
    display: flex;
    width: 100%;
    padding: 0px;
    margin-top: 12px;
}
#target .category-label .tab{
    flex-grow:1;
    padding: 5px;
    background-color: black;
}
.tab sup{
    pointer-events: none;
    vertical-align:text-top;
}

:host(:not([physicals-declared="PUNCH"])) .tab.physical-only{
    display: none;
}

#target .category-label .tab[data-target-index]{
    color:var(--highlight-color);
    text-align: center;
}

#target .category-label .tab[data-undeclared-changes]{
    color:black;
    background-color: #fcdb4e;
    outline: 1px solid black;
    outline-offset: -1px;
}

/* 
    Ideally we'd use host-context, but that's not supported, so we need to pass down the target-index :(
*/
:host([data-target-index="0"]) #target .category-label .tab[data-target-index="0"],
:host([data-target-index="1"]) #target .category-label .tab[data-target-index="1"],
:host([data-target-index="2"]) #target .category-label .tab[data-target-index="2"],
:host([data-target-index="3"]) #target .category-label .tab[data-target-index="3"],
:host([data-target-index="4"]) #target .category-label .tab[data-target-index="4"]{
    background-color:var(--highlight-color);
    color:black;
    outline:0px;
}

/* FIXME: Results locked needs to be tab specific! */
:host([results-locked][data-target-index="0"]) #target .category-label .tab[data-target-index="0"],
:host([results-locked][data-target-index="1"]) #target .category-label .tab[data-target-index="1"],
:host([results-locked][data-target-index="2"]) #target .category-label .tab[data-target-index="2"],
:host([results-locked][data-target-index="3"]) #target .category-label .tab[data-target-index="3"],
:host([results-locked][data-target-index="4"]) #target .category-label .tab[data-target-index="4"]{
    background-color:var(--alert-color);
    color:black;
    outline:0px;
}

/*     :host(:not([data-target-count])) #target .category-label .tab[data-target-index="2"],
:host([data-target-count="0"]) #target .category-label .tab[data-target-index="2"],
:host([data-target-count="1"]) #target .category-label .tab[data-target-index="2"]{
    display: none;
} */

/* 
    category styles 
*/

/*#attacker */.modifier:not([data-value]),
#TARGET_SECONDARY:not([data-value]){
    display: none;
}

#COVER.option-set .option{
    background-image: url("./img/tree.svg");
    background-repeat: no-repeat;
    background-position: center; 
}

#COVER.option-set .option[data-val="0"]{
    background-image: none;
    background-color:transparent;
    outline:1px dashed var(--highlight-color);
    outline-offset: -1.5px;
    z-index:1;
}

#COVER.option-set[data-value="null"] .option[data-val="0"]{
    outline:1px dashed black;
    outline-offset: -0.5px;
}

#TARGET_MOVEMENT_DICE.option-set .option{
    background-position: center;
    background-repeat: no-repeat;
}
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(1){ background-image: url("./img/d6.svg") }
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(2){ background-image: url("./img/d1.svg") }
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(3){ background-image: url("./img/d2.svg") }
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(4){ background-image: url("./img/d3.svg") }
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(5){ background-image: url("./img/d4.svg") }
#TARGET_MOVEMENT_DICE.option-set .option:nth-child(6){ background-image: url("./img/d5.svg") }


/* #target .modifier[data-value]{
    opacity: 1;
    background-color: #fcdb4e;
}

#terrain .modifier[data-value]{
    opacity: 1;
    background-color: #fcdb4e;
} */

/* Just hiding the terrain category separator */
#terrain{
    border-top:0px;        
}

#terrain .category-label{
    display: none;
}


/* e.g. selectable */


/* target */
#TARGET_UNIT{
    padding:8px 0px 8px 5px;
    max-width: 80%;
    text-align: left;

    font-family: var(--bold-font);
    font-weight: normal; /* safari tries to extra bold the bold */

    font-size: 18px;
    color:black;
    background-color:var(--highlight-color);
    flex-direction: column;
    align-items: flex-start;
}

/* target pilot name comes after unit name */
#TARGET_UNIT .target-pilot-name{
    font-size:9px;
    margin-top:4px; 
}
#TARGET_UNIT .target-pilot-name:empty{
    display:none;
}


#TARGET_UNIT:active,
#AIM_AT:active{
    color:white !important;
    background-color: var(--hover-color) !important;
}

/* #TARGET_SECONDARY .mod-value{ */
/* 			outline: 4px solid #fcdb4e; */
/* } */

/* misc conditions */
/* :host(.base-to-hit-override) #attacker, */
:host(.base-to-hit-override) .modifier:not(#TARGET_UNIT):not(#PARTIAL){
    opacity: 0.2;
    /* text-decoration: line-through; */
    /* display: none; */
}

:host(.base-to-hit-override) #AIM_AT{
    display: block !important;
}

:host(.base-to-hit-override) .modifier:not(#TARGET_UNIT) .mod-value::after{
    content: "—";
}
:host(.base-to-hit-override) .modifier:not(#TARGET_UNIT) .mod-value::before{
    content: "";
}

/*

    specific modifier overrides

*/



/* always display these (even if value is 0) */
#ATTACKER_GUNNERY,
#ATTACKER_PILOTING,
#ATTACKER_MOVEMENT,
#TARGET_UNIT,
:host([target-status-available]) #TARGET_MOVEMENT_MODIFIER,
#TARGET_MOVEMENT_DICE,
#SECONDARY_TARGET[data-value="0"], /* This guy is normally +1 or +2, but can be 0 in the event of a secondary punch */
#COVER,
#PARTIAL,
:host(:not([target-status-available])[physicals-declared="DFA"]) #PILOTING_DIFFERENCE,
:host(:not([target-status-available])[physicals-declared="CHARGE"]) #PILOTING_DIFFERENCE
{
    display: flex;
}		

/* Don't allow user to set movement modifier if we're going to pull it from status */
:host([target-status-available]) #TARGET_MOVEMENT_DICE{
    display: none;
}

/* always show clearly */
#ATTACKER_MOVEMENT_MODIFIER,
#TARGET_MOVEMENT_MODIFIER,
#COVER{
    opacity: 1;
}

/*     #COVER[data-value="0"] .description, */
/* #TARGET_MOVEMENT_DICE[data-value="0"] .description, */
#TARGET_MOVEMENT_DICE:not([data-value]) .description{		
    display:none;
} 

#ATTACKER_GUNNERY .mod-value::before,
#ATTACKER_PILOTING .mod-value::before{
    content:"";
}

/* #TARGET_PRONE[data-value="-2"] .mod-value::before,
#TARGET_IMMOBILE[data-value="-4"] .mod-value::before{
    content:"–"
}
#TARGET_PRONE[data-value="-2"] .mod-value::after{
    content: "2";
}
#TARGET_IMMOBILE[data-value="-4"] .mod-value::after{
    content: "4"
} */
[data-value="-1"] .mod-value::before,
[data-value="-2"] .mod-value::before,
[data-value="-3"] .mod-value::before,
[data-value="-4"] .mod-value::before,
[data-value="-5"] .mod-value::before,
[data-value="-6"] .mod-value::before,
[data-value="-7"] .mod-value::before{
    content:"–" !important
}
[data-value="-1"] .mod-value::after{ content: "1" !important; }
[data-value="-2"] .mod-value::after{ content: "2" !important; }
[data-value="-3"] .mod-value::after{ content: "3" !important; }
[data-value="-4"] .mod-value::after{ content: "4" !important; }
[data-value="-5"] .mod-value::after{ content: "5" !important; }
[data-value="-6"] .mod-value::after{ content: "6" !important; }


/* todo: forbid kicks on lower prone units */
/* todo: forbid punches on lower prone units */
/* todo: forbid punches on prone same level units */
:host([target-prone-for-physicals][physicals-declared="KICK"]) #elevation-difference .option[data-val="-1"],
:host([target-prone-for-physicals][physicals-declared="PUNCH"]) #elevation-difference .option[data-val="0"],
:host([target-prone-for-physicals][physicals-declared="PUNCH"]) #elevation-difference .option[data-val="-1"],
:host([target-prone-for-physicals][physicals-declared="WEAPON"]) #elevation-difference .option[data-val="-1"],
:host([physicals-declared="PUNCH"]) #elevation-difference .option[data-val="-1"],
:host([physicals-declared="KICK"]) #elevation-difference  .option[data-val="1"],
:host([physicals-declared="PUSH"]) #elevation-difference,
:host([physicals-declared="PUSH"]) #attack-direction, /* need to make sure this isn't checked for incomplete-declaration */
:host([physicals-declared="PUSH"]) #attack-direction *, /* need to make sure this isn't checked for incomplete-declaration */
:host([physicals-declared="PUSH"]) #elevation-difference, /* need to make sure this isn't checked for incomplete-declaration */
:host([physicals-declared="PUSH"]) #elevation-difference *, /* need to make sure this isn't checked for incomplete-declaration */
:host([physicals-declared="CHARGE"]) #elevation-difference,
:host([physicals-declared="CHARGE"]) #elevation-difference *,
:host([physicals-declared="DFA"]) #elevation-difference,
:host([physicals-declared="DFA"]) #elevation-difference *,
/* when DFAing a prone unit, the non-rear options will be flagged forbidden */
.option.forbidden,
:host([physicals-declared="DFA"]) #COVER,
:host([physicals-declared="DFA"]) #COVER *
{
    /* display:none !important; */
/*     background-image:url("img/dark-stripes.png"); */
    background-color:#222 !important;
    color: #666 !important;
/*     opacity: 0.75; */
    pointer-events: none !important;
    cursor: initial !important;    
    outline: none !important;
/*     text-decoration:line-through; */   
}

:host([physicals-declared="DFA"]) #COVER .mod-label{
    display: flex;
    align-items: center;
}
:host([physicals-declared="DFA"]) #COVER .mod-label::after{
    content:"(Ignored)";
    margin-left: 0.5em;
}

:host([physicals-declared="DFA"]) #COVER .option{
    background-color: #333 !important;
    background-blend-mode: non;
    outline: 1px solid #222 !important;
    border: 0px solid transparent !important;
    outline-offset: 0px;
}


/* 
    In the event an illegal value is set. 
*/
:host([target-prone-for-physicals][physicals-declared="KICK"]) #elevation-difference[data-value="-1"] .option[data-val="-1"],
:host([target-prone-for-physicals][physicals-declared="PUNCH"]) #elevation-difference[data-value="0"] .option[data-val="0"],
:host([target-prone-for-physicals][physicals-declared="PUNCH"]) #elevation-difference[data-value="-1"] .option[data-val="-1"],
:host([target-prone-for-physicals][physicals-declared="WEAPON"]) #elevation-difference[data-value="-1"] .option[data-val="-1"],
:host([physicals-declared="PUNCH"]) #elevation-difference[data-value="-1"] .option[data-val="-1"],
:host([physicals-declared="KICK"]) #elevation-difference[data-value="1"]  .option[data-val="1"]{
    color:var(--destroyed-bright-red) !important;   
}

:host([target-missing]) .modifier-category .modifier:not(#TARGET_UNIT), 
:host([target-missing]) *:not(#target)>.category-label,
:host([target-missing]) .option-set .option{
    color:#666 !important;
    outline:1px solid black !important;
    background-color: #222 !important;
    /* opacity: 0.5 !important; */
    pointer-events: none !important;
}

:host([target-missing]) .modifier-category .mod-value::before,
:host([target-missing]) .modifier-category .mod-value::after{
    color:transparent !important;
}

 
:host([target-missing]) #TARGET_UNIT{
    background-color: var(--alert-color)
}

/* If inverted partial is on, don't show the partial cover toggle */
#INVERTED_PARTIAL[data-value="1"]~#PARTIAL{
    display: none !important;
}