@font-face {
  font-family: 'Goode Rounded';
  src: url('/vendor/fonts/m-plus-rounded-1c-latin-500-normal.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Goode Rounded';
  src: url('/vendor/fonts/m-plus-rounded-1c-latin-700-normal.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Goode Rounded';
  src: url('/vendor/fonts/m-plus-rounded-1c-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Goode Rounded';
  src: url('/vendor/fonts/m-plus-rounded-1c-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --font: 'Goode Rounded', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif;
  --blue: #2bb3ea;
  --blue-deep: #0d8fd0;
  --blue-soft: #d9f1fc;
  --ink: #3b4049;
  --muted: #8b919a;
  --line: #d9dee4;
  --panel: #ffffff;
  --bg: #eef1f4;
  --p1: #2b9de8;
  --p2: #e8473f;
  --p3: #39b54f;
  --p4: #f0ad17;
  --radius: 22px;
  --shadow: 0 6px 18px rgba(40, 60, 90, 0.16), 0 1px 3px rgba(40, 60, 90, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
}

/* Thin horizontal lines, like the Wii menus */
.wii-lines {
  background-color: #f4f6f8;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0 2px, rgba(214, 221, 228, 0.45) 2px 3px, transparent 3px 5px);
}

/* Glossy rounded button */
.pill {
  appearance: none;
  border: 3px solid #cfd5dc;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #eef1f4 55%, #e6eaee 100%);
  box-shadow: 0 3px 0 rgba(150, 160, 175, 0.45), 0 6px 14px rgba(40, 60, 90, 0.12);
  padding: 0.7em 1.6em;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.15s, box-shadow 0.15s;
}
.pill:active,
.pill.pressed {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 rgba(150, 160, 175, 0.45), 0 3px 8px rgba(40, 60, 90, 0.12);
}
.pill.blue {
  color: #fff;
  border-color: #0f86c4;
  background: linear-gradient(180deg, #7fd6fb 0%, #36b6ec 48%, #18a2e0 52%, #1394d4 100%);
  text-shadow: 0 1px 1px rgba(0, 60, 110, 0.35);
}
.pill:disabled {
  opacity: 0.45;
  cursor: default;
}

.logo {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #6d737c;
  user-select: none;
}
.logo b {
  color: var(--blue);
  font-weight: 900;
}

.pcolor-1 { --pc: var(--p1); }
.pcolor-2 { --pc: var(--p2); }
.pcolor-3 { --pc: var(--p3); }
.pcolor-4 { --pc: var(--p4); }