/* Shared viewport constants: tablet 1024px, compact 768px, phone 480px.
   CSS custom properties cannot be used in media-query conditions. Keep the
   literal breakpoints in home.css and dojo/style.css aligned with these. */
:root {
  --page-gutter:32px;
  --card-padding:32px;
  --section-space:88px;
  --control-height:48px;
  --hand-tile-width:42px
}

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}

@media(max-width:1024px) {
  :root {
    --section-space:64px
  }
}

@media(max-width:768px) {
  :root {
    --page-gutter:20px;
    --card-padding:20px;
    --section-space:48px;
    --hand-tile-width:29px
  }
}

@media(max-width:480px) {
  :root {
    --page-gutter:16px;
    --card-padding:16px;
    --section-space:40px;
    --hand-tile-width:26px
  }
}