/* Coin Tray site — the app's own palette: bright cyan-to-blue screen,
   cream panels with dark teal ink, gold accent. */
:root {
  --bg-top: #5be0ec;
  --bg-mid: #2fb8de;
  --bg-bottom: #1e90c9;
  --panel: #fff8ea;
  --panel-edge: #e0c8a0;
  --text: #1b3a44;
  --text-dim: #6b8792;
  --gold: #c8891a;
  --felt: #0c2e26;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: light; }
body {
  background: linear-gradient(180deg, var(--bg-top), var(--bg-mid) 45%, var(--bg-bottom));
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 48px 20px 64px;
}
main { max-width: 640px; margin: 0 auto; }
header { text-align: center; margin-bottom: 40px; }
header img { width: 84px; height: 84px; }
header h1 {
  font-size: 30px;
  font-weight: 750;
  margin-top: 14px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(6, 32, 45, 0.45);
}
header p.tagline {
  color: #fff;
  opacity: 0.95;
  margin-top: 6px;
  text-shadow: 0 1px 4px rgba(6, 32, 45, 0.4);
}
nav {
  margin-top: 16px;
  font-size: 14px;
  display: inline-block;
  background: rgba(6, 32, 45, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 7px 16px;
}
nav a { margin: 0 8px; color: #ffe07a; text-decoration: none; }
nav a:hover { text-decoration: underline; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
section {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(6, 32, 45, 0.18);
}
h2 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
section p + p, section ul { margin-top: 10px; }
ul { padding-left: 22px; }
li { margin-top: 6px; }
p.muted { color: var(--text-dim); }
footer {
  text-align: center;
  font-size: 13px;
  margin-top: 36px;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(6, 32, 45, 0.4);
}
footer a { color: #ffe07a; text-decoration: underline; }

.challenge-page { max-width: 560px; }
.challenge-card { text-align: center; }
.challenge-card h2 { font-size: 24px; }
.challenge-button {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #ffd76a, #c8891a);
  box-shadow: 0 4px 0 #8b5a0b;
  color: #3f2a06;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.challenge-button:hover { text-decoration: none; filter: brightness(1.03); }
.challenge-button.secondary {
  background: var(--felt);
  box-shadow: 0 4px 0 #061a15;
  color: #fff8ea;
}
.challenge-code-wrap {
  margin-top: 24px;
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 16px;
  background: rgba(224, 200, 160, 0.16);
}
.challenge-label {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.challenge-code-wrap code {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--text);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: all;
}
.copy-button {
  margin-top: 12px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 8px 14px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.challenge-help { margin-top: 20px; }

@media (max-width: 480px) {
  body { padding: 28px 14px 44px; }
  section { padding: 20px 18px; }
}