/* Water Revolution — mobile fixes for the entry page index.html (Android + iOS)
   Load AFTER the page's own <style>:  <link rel="stylesheet" href="mobile-entry.css">  */

:root{color-scheme:only light;}
@media (prefers-color-scheme:dark){:root{color-scheme:only light;}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* Phones (portrait) and short landscape screens: the page must be scrollable.
   Previously body was overflow:hidden with a 100vh centred box, so on phones the
   logo was pushed above the screen and the second choice was unreachable (iOS). */
@media (max-width:820px), (max-height:760px){
  html,body{height:auto;min-height:100%;}
  body{overflow-x:hidden;overflow-y:auto;}
  body > .wrap{height:auto;min-height:100vh;min-height:100svh;justify-content:flex-start;
               padding:40px 20px 48px;}
  .brandtop{margin-bottom:22px;}
  .choices{gap:30px;}
  .langwrap{top:14px;right:14px;}
}

@media (max-width:820px){
  .choice .hexwrap{transform:scale(.72);transform-origin:center top;margin-bottom:-74px;}
  .choice .desc{max-width:280px;margin-left:auto;margin-right:auto;}
  .choice .enter{display:inline-block;padding:12px 8px;}   /* bigger tap target */
  .modal-card{max-height:calc(100svh - 48px);overflow-y:auto;}
}