/* Shared interface dimensions use the established pixel values.
   Skins retain borders, ornaments, typography metrics and alignment fixes.
   Cartoon weapon labels retain ellipsis/flex to contain long names/mastery. */

.lobby-brand h1{margin:18px 0}
.lobby-menu{gap:10px}
.lobby-menu button{min-height:48px}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 .choice-screen .choices,.armory .choices{gap:8px}
 .choice{padding:9px 10px}
}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 html[data-graphics] #mechanicHint{padding:2px 5px}
 html[data-graphics] #tutorialHint{padding:6px 9px}
 html[data-graphics] .mobile-tools #mobileWeapon{width:72px;min-width:72px;max-width:72px;padding-inline:4px}
}

@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 html[data-graphics] #toast{padding:5px 9px}
}

/* Description cards have an explicit top edge instead of the native button's
   vertically centred anonymous content box. Keep action controls separate. */
#overlay :is(.choice-screen,.library-screen,.shop-screen){--description-icon-size:64px;--description-icon-width:64px}
/* Image dimensions are independent of reserved frames and shared by both
   skins on PC/mobile, including portrait and landscape layouts. */
#overlay :is(.choice-screen:not(.slot-picker):not(.armory),.shop-screen){--description-image-width:58px;--description-image-height:58px}
#overlay .choice-screen:not(.slot-picker) .choice,
#overlay .library-screen .library-skill,
#overlay .shop-screen .shop-card{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
 text-align:left;min-width:0;
}
#overlay .choice-screen:not(.slot-picker) .choice>i,
#overlay .library-screen .library-skill>i,
#overlay .shop-screen .shop-card>i{
 display:grid!important;place-items:center;float:none;
 flex:0 0 var(--description-icon-size);width:var(--description-icon-width,var(--description-icon-size));
 height:var(--description-icon-size);min-height:var(--description-icon-size);
 margin:0 0 10px;grid-column:auto;grid-row:auto;
}
#overlay .choice-screen:not(.slot-picker):not(.armory) .choice>i>.painted-icon,
#overlay .shop-screen .shop-card>i>.painted-icon{
 width:var(--description-image-width);height:var(--description-image-height);
 max-width:100%;max-height:100%;object-fit:contain;
}
#overlay .choice-screen:not(.slot-picker) .choice>p,
#overlay .library-screen .library-skill>p,
#overlay .shop-screen .shop-card>p{
 width:100%;clear:none;min-height:0;flex:0 0 auto;text-align:left;
}
#overlay .library-screen .library-skill>:is(b,small,em){max-width:100%;flex:0 0 auto}
#overlay .library-screen .library-skill>i>.painted-icon{width:44px;height:44px;max-width:100%;max-height:100%;object-fit:contain}

#overlay .armory .choice>i{--description-icon-size:58px;--description-icon-width:58px}
#overlay .armory .choice>i>.painted-icon{width:58px;height:58px;max-width:100%;max-height:100%;object-fit:contain}

/* Build relics/passives keep their side-by-side icon and copy arrangement.
   Their frames share the same height without changing the artwork crop. */
:is(.relic-vault-card,.passive-card){--description-icon-size:64px;align-items:flex-start;justify-content:flex-start}
:is(.relic-vault-card,.passive-card)>div{min-width:0;text-align:left}
:is(.relic-vault-card,.passive-card)>i,
#autoSkills .passive-card>i{
 display:grid;place-items:center;flex:0 0 var(--description-icon-size);
 width:var(--description-icon-width,var(--description-icon-size));height:var(--description-icon-size);
 min-height:var(--description-icon-size);margin:0;
}
:is(.relic-vault-card,.passive-card)>i>.painted-icon{
 max-width:100%;max-height:100%;object-fit:contain;
}

/* Preserve the compact reward layout on phones: fixed icon/header rows,
   then full-width description. Long descriptions never centre the header. */
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 #overlay :is(.choice-screen:not(.slot-picker):not(.armory),.shop-screen){--description-icon-size:58px;--description-icon-width:58px}
 #overlay .library-screen,
 :is(.relic-vault-card,.passive-card){--description-icon-size:58px;--description-icon-width:58px}
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice{
  display:grid;grid-template-columns:var(--description-icon-width) minmax(0,1fr);
  grid-template-rows:minmax(20px,auto) minmax(38px,auto) 1fr auto;
  column-gap:10px;row-gap:5px;align-content:start;align-items:start;
 }
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice>i{
  grid-column:1;grid-row:1 / 3;margin:0;
 }
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice>em{grid-column:2;grid-row:1;margin:0}
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice>b{grid-column:2;grid-row:2;margin:0}
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice>p{grid-column:1 / -1;grid-row:3;margin:7px 0 0}
 #overlay .choice-screen:not(.slot-picker):not(.armory) .choice>small{grid-column:1 / -1;grid-row:4;margin:0}
}