:root {
  --blue-top: #0d4fa4;
  --blue-bottom: #5bcaff;
  --typewriter: "American Typewriter", "Courier Prime", "Courier New", monospace;
  --condensed: "Helvetica Neue", "Oswald", "Arial Narrow", sans-serif;
  --avenir: "Avenir", "Avenir Next", "Nunito", system-ui, sans-serif;
  --rounded: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(var(--blue-top), var(--blue-bottom)) fixed;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* The ground spans the whole window in-game; the stage itself is transparent
   so the page gradient fills the width beyond the play area. */
body.in-game::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: url(assets/ui/ground.png) left bottom / auto 50px repeat-x;
  pointer-events: none;
}

#stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  touch-action: none;
  opacity: 0;
  transition: opacity .3s;
}

body.ready #stage { opacity: 1; }

#stage > * { position: absolute; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

.rig { position: absolute; pointer-events: none; }
.rig canvas { position: absolute; }

/* Splash / game over */
.mode-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mode-btn:active img { transform: scale(.97); }
.splash-cat { object-fit: contain; pointer-events: none; }

.score-col { text-align: center; }
.score-label { font: 300 20px/25px var(--avenir); }
.score-value { font: 900 25px/25px var(--avenir); }

.mute-btn {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 5px;
  color: #fff;
  opacity: .85;
}
.mute-btn svg { display: block; width: 100%; height: 100%; }
.mute-btn[aria-pressed="true"] { opacity: .6; }
/* Menu and game: top left, where the in-game home button sits beside it. */
.mute-btn-left { top: 28px; right: auto; left: 44px; width: 29px; height: 29px; padding: 2px; }

/* Game */
.home-btn img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hud { pointer-events: none; }

.level-label {
  text-align: right;
  font: bold 20px/20px var(--typewriter);
  font-stretch: condensed;
  white-space: nowrap;
}

.cat-lives { opacity: .5; }
.cat-lives img { position: absolute; }

.score-label-game {
  text-align: center;
  font: bold 40px/40px var(--typewriter);
  font-stretch: condensed;
}

.spell-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 85px/1 var(--condensed);
  font-stretch: condensed;
  color: rgba(46, 46, 46, .5);
  white-space: nowrap;
  pointer-events: none;
}

.kana { pointer-events: none; }
.kana span {
  position: absolute;
  inset: 0 0 0 -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 65px/1 var(--mincho);
  letter-spacing: -20px;
  text-indent: -20px; /* balances the trailing letter-spacing */
  white-space: nowrap;
}
.kana-stroke { color: #fff; -webkit-text-stroke: 6.5px #fff; }
.kana-fill { color: #000; }

.bubble { z-index: 2; }

.timer-circle svg { display: block; overflow: visible; }
.timer-circle circle { opacity: .3; }

.flash-label {
  text-align: center;
  font: bold 40px/40px var(--typewriter);
  font-stretch: condensed;
  pointer-events: none;
  white-space: nowrap;
}

.tap-me {
  background: url(assets/ui/tapMeBG.png) center / contain no-repeat;
  pointer-events: none;
  z-index: 10;
}
.tap-me span {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  text-align: center;
  font: 800 20px/20px var(--rounded);
  color: var(--blue-top);
}

/* Row picker */
.picker {
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 16px 16px;
  font-family: var(--avenir);
}

.picker-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}
.picker-header .home-btn { position: absolute; left: -6px; top: 6px; width: 25px; height: 25px; }
.picker-title { margin: 0; font: 600 26px/1 var(--mincho); letter-spacing: .08em; }
/* Leaves room for the home and sound buttons on the left at phone width. */
.picker-title-long { font-size: 20px; letter-spacing: .02em; }

.pill {
  flex: none;
  height: 54px;
  border-radius: 27px;
  background: rgba(255, 255, 255, .22);
  font: 800 18px/1 var(--avenir);
  transition: background .15s, transform .1s, opacity .15s;
}
.pill:active { transform: scale(.98); }
.pill-primary { background: #fff; color: var(--blue-top); }
.pill-start:not(:disabled) { background: #fff; color: var(--blue-top); }
.pill-start:disabled { opacity: .45; cursor: default; }

.picker-hint { text-align: center; font: 300 15px/1.2 var(--avenir); opacity: .9; }

.picker-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  margin: 0 -16px;
  padding: 0 16px 8px;
  -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
}

.picker-group {
  display: block;
  margin: 14px 2px 8px;
  font: 800 13px/1 var(--avenir);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}
.picker-group:first-child { margin-top: 8px; }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.row-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 6px 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  transition: background .15s, color .15s, transform .1s;
}
.row-chip:active { transform: scale(.95); }
.row-chip[aria-pressed="true"] { background: #fff; color: var(--blue-top); }
.row-chip-kana { font: 600 26px/1 var(--mincho); white-space: nowrap; letter-spacing: -.04em; }
.row-chip-romaji {
  max-width: 100%;
  font: 700 9px/1.15 var(--avenir);
  opacity: .8;
  text-align: center;
  overflow-wrap: anywhere;
}