:root {
  --outline: #46230a;
  --panel: #fff0cd;
  --panel-text: #6e370f;
  --gold: #ffc828;
  --orange: #f08c28;
  --green: #5ab446;
  --blue: #468cdc;
  --grey: #a0a0a0;
  --red: #dc463c;
  --font: ui-rounded, "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #7ec8f0;
  font-family: var(--font);
  font-weight: 800;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.outlined {
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--outline), 2px -2px 0 var(--outline),
    -2px 2px 0 var(--outline), 2px 2px 0 var(--outline),
    0 -3px 0 var(--outline), 0 3px 0 var(--outline),
    -3px 0 0 var(--outline), 3px 0 0 var(--outline);
}

/* Score, gold and the name / sound chips */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }

#score {
  position: absolute;
  top: 6vh;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(44px, 10vh, 96px);
  line-height: 1;
}

#gold {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 30px;
  text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline);
}
.coin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--outline);
}

#chips {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}
.chip {
  font: inherit;
  font-size: 15px;
  color: var(--panel-text);
  background: var(--panel);
  border: 3px solid var(--outline);
  border-radius: 999px;
  padding: 6px 14px;
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.pop { animation: pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { from { transform: scale(1.4); } to { transform: scale(1); } }

/* Start screen and game-over panel: taps pass through to the game except on buttons */
#ready, #gameOver {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  text-align: center;
  padding: 0 16px;
}
#ready h1 {
  margin: 20vh 0 0;
  font-size: clamp(44px, 12vmin, 110px);
  line-height: 1;
}
#ready .hint { margin: auto 0 0; }
#ready .buttons { margin: 3vh 0 max(6vh, env(safe-area-inset-bottom)); }

.hint { font-size: clamp(18px, 3.6vmin, 30px); }

.buttons { display: flex; gap: 14px; justify-content: center; }
.button {
  pointer-events: auto;
  font: inherit;
  font-size: clamp(18px, 3.4vmin, 26px);
  color: #fff;
  background: var(--orange);
  border: 3px solid var(--outline);
  border-radius: 16px;
  padding: 8px 22px;
  cursor: pointer;
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline);
}
.button:active { transform: translateY(2px); }
.button.green { background: var(--green); }
.button.blue { background: var(--blue); }
.button.grey { background: var(--grey); }
.button.red { background: var(--red); }

#gameOver { justify-content: center; gap: 18px; }
.panel {
  width: min(88vw, 420px);
  background: var(--panel);
  border: 4px solid var(--outline);
  border-radius: 26px;
  padding: 18px 20px 20px;
  color: var(--panel-text);
}
.panel h2 { margin: 0 0 8px; font-size: clamp(32px, 7vmin, 48px); }
.panel p { margin: 4px 0; font-size: clamp(22px, 4.6vmin, 30px); }
.panel #rankLine { font-size: clamp(16px, 3.2vmin, 20px); }
.panel #restartHint { margin-top: 12px; font-size: clamp(18px, 3.6vmin, 24px); }

/* Windows: name entry, skin shop, leaderboard */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(70, 35, 10, 0.35);
}
.window {
  width: min(100%, 760px);
  max-height: min(100%, 560px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 4px solid var(--outline);
  border-radius: 24px;
  padding: 16px;
  color: var(--panel-text);
}
.window.small { width: min(100%, 400px); }
.window header { display: flex; align-items: center; justify-content: center; position: relative; }
.window h2 { margin: 0 0 10px; font-size: clamp(26px, 5.5vmin, 38px); text-align: center; }
.window .close { position: absolute; right: 0; top: 0; padding: 4px 14px; }
.scroll { overflow-y: auto; touch-action: pan-y; min-height: 0; }
.message { min-height: 1.3em; margin: 8px 0 0; text-align: center; font-size: 17px; }

#nameForm { align-items: stretch; gap: 8px; text-align: center; }
#nameForm label { font-size: 20px; }
#nameInput {
  font: inherit;
  font-size: 24px;
  text-align: center;
  color: var(--panel-text);
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 14px;
  padding: 10px;
  user-select: text;
  -webkit-user-select: text;
}

#shopList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 4px;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 2px solid var(--outline);
  border-radius: 16px;
  padding: 8px;
}
.card canvas { width: 132px; height: 96px; }
.card .name { font-size: 18px; }
.card .button { font-size: 16px; padding: 6px 10px; width: 100%; }

#boardList { list-style: none; margin: 0; padding: 0; }
#boardList li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 20px;
}
#boardList li:nth-child(odd) { background: rgba(110, 55, 15, 0.08); }
#boardList li.me { background: var(--gold); }
#boardList .rank { width: 2em; text-align: right; }
#boardList .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }