/* Brand colours from the icon (tools/make_icon.py), light and dark. */
:root {
  --purple: #5B3FA8;
  --purple-dark: #3A2775;
  --ivory: #FBFAF5;
  --primary: #5B3FA8;
  --on-primary: #FFFFFF;
  --background: #FBF8FF;
  --text: #1D1B20;
  --surface-variant: #EDE7F6;
  --on-surface-variant: #4A4458;
  --outline: #79747E;
  --error: #B3261E;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #D0BCFF;
    --on-primary: #381E72;
    --background: #141218;
    --text: #E6E0E9;
    --surface-variant: #2B2633;
    --on-surface-variant: #CAC4D0;
    --outline: #938F99;
    --error: #F2B8B5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

h1, h2, p { margin: 0; }

/* Purple band with the stone, the name and the version. */
.header {
  padding: calc(8px + env(safe-area-inset-top)) 20px 20px 8px;
  background: linear-gradient(var(--purple), var(--purple-dark));
  color: #FFFFFF;
}
/* On wide screens the header content lines up with the centred column below. */
.header-inner { display: flex; align-items: center; gap: 4px; max-width: 592px; margin: 0 auto; }
.header-icon { width: 84px; height: 84px; flex: none; }
.header h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.header-sub { opacity: 0.8; font-size: 14px; }

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}

.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.button span { overflow: hidden; text-overflow: ellipsis; }
.button svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}
.button.primary { height: 56px; background: var(--primary); color: var(--on-primary); border: none; }
.button.outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.button:active { opacity: 0.8; }
.button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.card { padding: 20px; border-radius: 20px; background: var(--surface-variant); }
h2 { font-size: 17px; font-weight: 700; }
.card h2 { margin-bottom: 14px; }

.tips { list-style: none; margin: 0; padding: 0; counter-reset: tip; display: flex; flex-direction: column; gap: 14px; }
.tips li { display: flex; align-items: center; gap: 14px; font-size: 16px; counter-increment: tip; }
.tips li::before {
  content: counter(tip);
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 700;
}

.loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 0; }
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--surface-variant); border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error { color: var(--error); }

#result { display: flex; flex-direction: column; gap: 16px; }

/* Total in the brand gradient. */
.total {
  padding: 20px 0; border-radius: 24px; text-align: center; color: #FFFFFF;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
}
.total-number { font-size: 64px; font-weight: 700; line-height: 1.1; }
.total-label { font-size: 17px; font-weight: 500; }
.total-stones { font-size: 14px; opacity: 0.8; }

#image { width: 100%; height: auto; border-radius: 20px; display: block; }

.stones { display: flex; flex-wrap: wrap; gap: 12px; }

/* One recognised stone drawn as a small domino: both halves and the sum. */
.stone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stone-number, .stone-note { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.tile {
  display: flex; align-items: center; height: 44px;
  border-radius: 10px; background: var(--ivory); border: 1px solid #D9D4E4;
  color: #2B2B2B; font-size: 20px; font-weight: 700;
}
.tile span { width: 39px; text-align: center; }
.tile span.wide { width: 80px; }
.tile i { width: 2px; height: 28px; background: #2B2B2B; }
.stone-sum { font-size: 14px; font-weight: 700; color: var(--primary); }

.privacy { font-size: 13px; color: var(--on-surface-variant); text-align: center; }