/* Overs House 3.3.1 — authoritative enhancement presentation layer.
   Owns visual sizing/layout for Battle, Mortal Lock and Team-Up enhancement art.
   Logic/eligibility remain in application JS and Supabase. */

:root{
  --enh-inventory-w:82px;
  --enh-inventory-h:66px;
  --enh-teamup-inventory-w:84px;
  --enh-current-battle-w:146px;
  --enh-current-battle-h:90px;
  --enh-current-teamup-w:130px;
  --enh-current-mortal:90px;
  --enh-action-min-h:80px;
  --enh-action-icon-col:42%;
  --enh-action-gap:12px;
}

/* Inventory: three equal columns at every viewport width. */
.inventory{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.inventory>div>div{min-width:0}
@media(max-width:700px){
  .inventory{gap:8px}
  .inventory>div{
    flex-direction:column;
    justify-content:flex-start;
    gap:7px;
    padding:10px 5px;
    text-align:center;
    border-radius:15px;
  }
  .inventory strong{font-size:12px;line-height:1.2;min-height:2.4em;margin-bottom:5px}
  .inventory .quota-meter{flex-direction:column;flex-wrap:nowrap;gap:5px;font-size:12px}
  .inventory .charge-pips{gap:3px;justify-content:center}
  .inventory .charge{width:10px;height:7px;flex:none}
}
/* Inventory art */
.inventory .enhancement-icon{
  width:var(--enh-inventory-w);
  height:var(--enh-inventory-h);
  object-fit:contain;
}
.inventory .enhancement-icon[src*="teamup-soft-satin"]{
  width:var(--enh-teamup-inventory-w);
  height:auto;
  aspect-ratio:3/2;
  object-fit:contain;
  clip-path:none;
}

/* Current-pick corner art */
.card-enhancement .enhancement-icon{
  object-fit:contain;
}
.card-enhancement .pick-enhancement.battle .enhancement-icon,
.card-enhancement .battle .enhancement-icon{
  width:var(--enh-current-battle-w);
  height:var(--enh-current-battle-h);
}
.card-enhancement .pick-enhancement.teamup .enhancement-icon,
.card-enhancement .teamup .enhancement-icon{
  width:var(--enh-current-teamup-w);
  height:auto;
  aspect-ratio:3/2;
}
.card-enhancement .pick-enhancement.mortal .enhancement-icon,
.card-enhancement .mortal .enhancement-icon{
  width:var(--enh-current-mortal);
  height:var(--enh-current-mortal);
}

/* Current Picks — Battle / Team-Up actions.
   Matching geometry; identity comes from artwork and accent only. */
.current-pick .pick-join-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  max-width:530px;
  gap:var(--enh-action-gap);
  margin:16px auto 0;
  align-items:stretch;
  overflow:visible;
}
.current-pick .puffy-action{
  --accent:#f2e76b;
  --light:#fff8b0;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(72px,var(--enh-action-icon-col)) minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:var(--enh-action-min-h);
  padding:9px 11px;
  color:#090e20;
  appearance:none;
  text-align:left;
  cursor:pointer;
  border:2px solid #090e20;
  outline:2px solid #fffbee;
  outline-offset:-4px;
  border-radius:15px;
  overflow:visible;
  background:linear-gradient(155deg,#fffef8,#eae7dc);
  box-shadow:3px 4px #090e20,inset 0 2px 2px #fff,inset 0 -5px 7px #ada99d30;
  transition:transform .14s ease,filter .14s ease;
}
.current-pick .puffy-action.teamup-button{
  --accent:#68d5ed;
  --light:#cbfbff;
}
.current-pick .puffy-icon-stage{
  position:relative;
  inset:auto;
  z-index:1;
  display:flex;
  width:100%;
  min-width:0;
  height:68px;
  align-items:center;
  justify-content:center;
  transform:none;
  filter:none;
  pointer-events:none;
}
.current-pick .puffy-icon-stage img{
  display:block;
  width:100%;
  max-width:116px;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.current-pick .puffy-action.teamup-button .puffy-icon-stage{
  width:100%;
  top:auto;
  transform:none;
}
.current-pick .puffy-action-name{
  position:relative;
  inset:auto;
  z-index:2;
  display:block;
  min-width:0;
  padding:9px 8px 8px;
  background:linear-gradient(155deg,var(--light),var(--accent));
  border:2px solid #090e20;
  border-radius:10px;
  box-shadow:2px 2px #090e20,inset 0 2px 2px #ffffff9c;
  transform:rotate(-2deg);
  font:400 22px/1 BattleComic,Impact,sans-serif;
  letter-spacing:.35px;
  text-align:center;
  overflow-wrap:anywhere;
}
.current-pick .puffy-action.teamup-button .puffy-action-name{transform:rotate(2deg)}
.current-pick .puffy-action-name small{
  display:block;
  margin-top:3px;
  font:700 11px/1.25 var(--body);
  letter-spacing:0;
}
.current-pick .puffy-action:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.03)}
.current-pick .puffy-action:active:not(:disabled){transform:translateY(2px)}
.current-pick .puffy-action:disabled{opacity:.5;cursor:not-allowed}
.current-pick .puffy-action:focus-visible{outline:3px solid var(--mint,#68d5ed);outline-offset:4px}

/* Keep asset-specific filtering limited to the approved art. */
.card-enhancement .battle .enhancement-icon,
.card-enhancement .mortal .enhancement-icon{
  filter:drop-shadow(0 2px 2px #090e2025);
}
.card-enhancement .teamup .enhancement-icon{filter:none}

/* Responsive values from approved Soft Satin reference. */
@media(max-width:900px){
  :root{
    --enh-inventory-w:64px;
    --enh-inventory-h:58px;
    --enh-teamup-inventory-w:66px;
  }
}
@media(max-width:650px){
  :root{
    --enh-inventory-w:62px;
    --enh-inventory-h:48px;
    --enh-teamup-inventory-w:70px;
    --enh-current-teamup-w:108px;
    --enh-current-mortal:76px;
  }
}
@media(max-width:440px){
  .current-pick .pick-join-actions{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
  }
  .current-pick .puffy-action{
    grid-template-columns:96px minmax(0,1fr);
    min-height:78px;
  }
  .current-pick .puffy-icon-stage{height:62px}
  .current-pick .puffy-icon-stage img{max-width:104px}
  .current-pick .puffy-action-name{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .current-pick .puffy-action{transition:none}
}