/* ==========================================================
   EOS Adaptive Display Engine v1.0
   ========================================================== */

/* Default (Desktop) */
:root{
  --density:1;
  --pad:18px;
  --gap:16px;
  --radius:22px;
  --title:28px;
  --text:15px;
  --card-min-height:120px;
}

/* iPad / Tablet */
@media (min-width:768px) and (max-width:1194px){

:root{
  --density:.82;
  --pad:8px;
  --gap:8px;
  --radius:14px;
  --title:20px;
  --text:12px;
  --card-min-height:72px;
}

.frame{
    padding:var(--pad)!important;
}

.layer{
    padding:10px!important;
}

.arrow{
    font-size:14px!important;
    margin:2px 0!important;
}

.slots,
.docks{
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
}

.slot,
.dock{
    padding:6px!important;
    font-size:11px!important;
}

}

/* iPhone */

@media (max-width:767px){

:root{
  --density:.70;
  --pad:6px;
  --gap:6px;
  --radius:12px;
  --title:18px;
  --text:11px;
  --card-min-height:60px;
}

.slots,
.docks{
 grid-template-columns:repeat(2,1fr)!important;
}

}

/* UltraWide */

@media (min-width:1800px){

:root{
 --density:1.35;
 --pad:28px;
 --gap:22px;
 --title:34px;
 --text:17px;
}

}

/* Presentation */

.presentation-mode{

 --density:1.55;
 --pad:32px;
 --gap:26px;
 --title:42px;
 --text:22px;

}

/* Reserved */

.xr-mode{}
.holographic-mode{}