/* WordScale - Mobile Overrides */

@media (max-width:640px){
  :root{--topGap:10px;--bottomGap:5px;}

  .header-title{font-size:18px;letter-spacing:.10em;}
  .header-left{font-size:13px;}

  #side-left{left:2%;top:34%;width:46%;}
  #side-right{right:2%;top:34%;width:46%;}
  .wordRow[data-side="left"] .wordRatio{left:calc(100% + 2px);}
  .wordRow[data-side="right"] .wordRatio{right:calc(100% + 2px);}

  .trayWrap{margin:-140px auto;}
  .trayHeader{grid-template-columns:1fr;justify-items:center;align-items:center;}
  .trayControlBlockReset,
  .trayControlBlockScratch,
  .trayControlBlockSort{justify-self:center;align-items:center;}
}

@media (max-width:420px){
  .slot{width:42px;height:42px;border-radius:10px;font-size:19px;}
  .tile{width:44px;height:44px;border-radius:12px;font-size:19px;}
  .scratchSlot{width:33px;height:33px;border-radius:8px;}
  .scratchSlot .cell .ch{font-size:16px;}
  .scratchSlot .cell .wt{font-size:10px;margin-top:2px;}

  .cell .ch{font-size:19px;}
  .cell .wt{font-size:11px;margin-top:3px;}

  .slots{gap:4.5px;}
  .tray{gap:7.5px;}

  .wordRatio,.sideTotalText{font-size:12px;}
}