/* Are We There Yet? shared styles for the home page and the newer games */
@import url('/fonts/fonts.css');

:root{
  --sky:#E4F4FF;
  --sky-deep:#BFE3FA;
  --sign:#08734F;       /* highway sign green */
  --sign-dark:#055A3D;
  --road:#30363F;
  --line:#FFC83D;       /* road marking yellow */
  --tomato:#FF5A4E;
  --ink:#16304A;
  --ink-soft:#4C6378;
  --paper:#FFFFFF;
  --amber:#FFA81F;
  --violet:#7A5CFA;
  --teal:#0FA0C4;
  --radius-big:22px;
  --radius-small:12px;
  --display:'Baloo 2','Nunito',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--line);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Top bar used inside the newer games */
.gamebar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--sign);color:#fff;
  box-shadow:inset 0 -3px 0 var(--sign-dark)}
.gamebar h1{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:0;line-height:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-btn{appearance:none;border:2px solid rgba(255,255,255,.75);background:transparent;color:#fff;font-weight:800;font-size:1rem;
  min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;touch-action:manipulation}
.gb-btn:active{background:rgba(255,255,255,.18)}
.gb-btn[disabled]{opacity:.4;cursor:default}
.gb-btn[hidden]{display:none}
.gb-btn.solid{background:var(--line);border-color:var(--line);color:var(--ink)}
.gb-btn .lbl{display:inline}
@media (max-width:520px){.gb-btn .lbl.hide-sm{display:none}}
@media (max-height:500px){.gamebar{padding:5px 10px}.gb-btn{min-height:38px}.gamebar h1{font-size:1.15rem}}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}