html { box-sizing: border-box; }
*, :after, :before { box-sizing: inherit; }

#app, body, html { height: 100%; overflow: hidden; }

/* colours at the very top and bottom of the screen: the browser bars and any overscroll use them,
   so they must match the picture there, otherwise you see an edge */
:root { --edge-top: #c9bca8; --edge-bottom: #baa98a; }
html {
  /* bottom half white: under the white leaderboard bar the browser shows white too */
  background: linear-gradient(to bottom, var(--edge-top) 0 50%, #fff 50% 100%) fixed;
}

body {
  margin: 0;
  background: transparent;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  position: relative;
  font-family: Nunito, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

/* blurred, slightly tilted room background; much bigger than the screen so its blurred edges never show */
body:before {
  content: "";
  position: fixed;
  top: -10%;
  bottom: -10%;
  left: -15%;
  right: -15%;
  z-index: -1;
  transform: rotate(-3deg);
  background-image: linear-gradient(
    to bottom,
    var(--edge-top) 0%, var(--edge-top) 9%, #d3cbc0 15%, #c4b9ad 22%, #b3a698 27%,
    #6f6258 29.5%, #9c8f84 31.5%, #c2b6aa 36%, #cdc3b6 48%, #c6b99f 60%,
    #cbbd9c 72%, #bfae8e 85%, var(--edge-bottom) 92%, var(--edge-bottom) 100%
  );
  filter: blur(6px);
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* header */
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100vw;
}

.title {
  width: min(300px, 50%);
  height: 4em;
  margin: 1em;
  flex-shrink: 0;
}
.title text {
  font-family: Nunito, sans-serif;
  font-weight: 900;
  font-size: 68px;
  fill: #fff;
  stroke: #000;
  stroke-width: 4px;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

.projects {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: row;
  align-items: flex-start;
  padding: .5em;
}
.projects.right { justify-content: flex-end; }

/* X / FOMO / CA buttons: square-ish, white with a hard black outline and shadow */
.project {
  min-width: 2.75rem;
  height: 2.75rem;
  margin: .3rem;
  padding: 0 .55rem;
  border-radius: .7rem;
  flex-shrink: 0;
  background: #fff;
  color: #000;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 .8rem/1 Nunito, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out, background-color .15s;
}
.project svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) { .project:hover { background: #ffe066; } }
.project:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
.project:focus-visible { outline: 3px solid #ffe066; outline-offset: 2px; }
/* phones: not enough room beside the title, so the buttons stack */
@media (max-width: 799px) {
  .projects { flex-direction: column; align-items: flex-start; }
}


@media (min-width: 800px) {
  .title { width: min(300px, 80%); height: 5em; }
  .projects { padding: .9em; }
}

/* cat */
.cat-img {
  height: 0;
  flex-grow: 1;
  width: 100%;
  max-width: 800px;
  position: relative;
  isolation: isolate;
  touch-action: manipulation;
  text-align: center;
  color: #fff;
  /* outline is painted behind the fill (so twice the visible width); avoids dark specks inside the digits */
  -webkit-text-stroke-width: 4px;
  paint-order: stroke fill;
  stroke-linejoin: round;
  -webkit-text-stroke-color: #000;
  font-weight: 900;
  font-size: 46px;
  word-wrap: break-word;
}
@media (min-width: 1000px) {
  .cat-img { font-size: 44px; -webkit-text-stroke-width: 4px; }
}

/* mouth closed / mouth open */
/* the cat picture sits in a layer behind the counter; on a pop it grows upwards like on popcat.click */
.cat-img::before {
  content: "";
  position: absolute;
  /* leave room above the hat for the counter, also when the cat grows on a pop */
  top: calc(1.5em + 9%);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
}
.p::before  { background-image: url(img/topcat-closed.png?v=39); }
.op::before { background-image: url(img/topcat-open.png?v=39); transform: scale(1.08); }

.counter { transition: transform 80ms ease-in-out; transform: scale(1); }
.counter.pop { transition: none; }
.counter.pop.rot-ll { transform: scale(1.2) rotate(-10deg); }
.counter.pop.rot-l  { transform: scale(1.2) rotate(-5deg); }
.counter.pop.rot-c  { transform: scale(1.3) rotate(0deg); }
.counter.pop.rot-r  { transform: scale(1.2) rotate(5deg); }
.counter.pop.rot-rr { transform: scale(1.2) rotate(10deg); }

/* bottom bar */
.leaderboard {
  width: 100%;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* white reaches the very bottom on iPhones */
  position: absolute;
  bottom: 0;
  max-width: 50rem;
  margin: 0 auto;
}
@media screen and (min-width: 50rem) {
  .leaderboard { border-radius: 1rem 1rem 0 0; }
}

.bar { display: flex; padding: 1rem 0; flex-direction: row; cursor: pointer; }
.bar > * { padding: 0 1rem; display: block; border-right: 1px solid #eee; cursor: pointer; }
.bar > *:last-child { border-right: none; }

.leaderboard h1 { padding: 0 1rem; margin: 0; font-size: 1rem; font-weight: 400; }

.show { background: none; border: none; color: #000; }
.show svg { width: 1rem; transition: transform .4s ease-in-out; }
.open .show svg { transform: rotate(-180deg); }

.preview { flex: 1; display: flex; align-items: center; flex-direction: column; }
.top-three { flex-grow: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.top-entry { display: flex; align-items: center; flex-direction: row; }
.top-entry.mine { font-size: 1rem; font-weight: 600; }

.count.punch { display: inline-block; transform: scale(1.1); }
.count { display: inline-block; transition: transform 50ms ease-in-out; }

.leaderboard main { max-height: 0; transition: max-height .4s; overflow: hidden; }
.open main { max-height: 70vh; }
.main-wrap { padding: 1rem; padding-top: 0; overflow-y: auto; max-height: 70vh; }

ol.list { padding: 0; list-style: none; max-width: 50rem; margin: 0 auto; }
.list li { padding: .5rem 0; display: flex; flex-direction: row; border-bottom: 1px solid #eee; align-items: center; }
.list li:last-child { border-bottom: none; padding-bottom: 0; }
.list li:first-child { padding-top: 0; }
.list li > * { font-size: 1rem; margin-right: .5rem; }
.list .position { min-width: 1.375rem; text-align: center; }
.list .count { margin-left: auto; min-width: 0; }
.list a { color: #000; font-weight: 600; }
.delta { color: green; font-weight: 700; font-size: .75rem; white-space: pre; }
.list .country { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li.mine .country { font-weight: 700; }
.list .count { white-space: nowrap; }
.delta { padding-right: .25rem; }
.leaderboard-key { padding-top: 1rem; text-align: center; }
.ellipsis { margin: 0 1rem; }
.top-entry .position { margin-right: .25rem; }
.top-entry .count { margin-left: .25rem; }
.top-entry.mine .count { margin-left: .5rem; }
.flag {
  border-radius: .2rem;
  box-shadow: 0 0 .2rem rgba(108, 117, 125, .5);
  flex-shrink: 0;
  height: 1em;
  width: 1.5em;
  object-fit: cover;
  background: #eee;
}