/* Palette lifted from the site logo: sky-blue/cream watercolor background,
   white-and-chestnut scissor-tailed flycatcher. */
:root {
  --ws-sky: #7fa3c4;
  --ws-sky-dark: #4f7699;
  --ws-cream: #f4efe0;
  --ws-coral: #d9765a;
  --ws-coral-dark: #b85a41;
  --ws-sage: #93ab86;
  --ws-ink: #333c3a;
  --ws-white: #ffffff;
  --ws-gold: #d4af37;
  --ws-silver: #a9adb0;
  --ws-bronze: #b3805a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ws-ink);
  min-height: 100vh;
  /* Soft watercolor-cloud pattern in the logo's palette, layered as blurred
     radial blobs rather than a flat fill. */
  background-color: var(--ws-cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(127,163,196,0.35) 0, rgba(127,163,196,0) 40%),
    radial-gradient(circle at 85% 15%, rgba(217,118,90,0.18) 0, rgba(217,118,90,0) 35%),
    radial-gradient(circle at 25% 60%, rgba(147,171,134,0.22) 0, rgba(147,171,134,0) 45%),
    radial-gradient(circle at 90% 80%, rgba(127,163,196,0.30) 0, rgba(127,163,196,0) 40%),
    radial-gradient(circle at 50% 95%, rgba(217,118,90,0.12) 0, rgba(217,118,90,0) 40%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1em 0.8em 3em;
}

h1, h2 { color: var(--ws-sky-dark); }
h1 { font-size: 1.3em; }
h2 { font-size: 1.1em; }

.hint { color: #6b7570; font-size: 0.85em; margin-top: -0.3em; }

.btn {
  display: inline-block;
  background: var(--ws-coral);
  color: var(--ws-white);
  border: none;
  padding: 0.7em 1.3em;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--ws-coral-dark); }

.btn-secondary { background: var(--ws-sage); }
.btn-secondary:hover { background: #7c9370; }

input[type=text], input[type=number] {
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.05em;
  width: 100%;
}

.card {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 1.1em;
  margin-bottom: 1.1em;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  backdrop-filter: blur(2px);
}

.game-list { list-style: none; padding: 0; margin: 0; }
.game-list-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.6em;
}
.game-list-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 0.9em 1em;
  background: var(--ws-white);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ws-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.game-list-link:hover { background: #fdfbf5; }
.game-name-sub { font-size: 0.8em; color: #888; margin-top: 0.2em; }
.btn-copy-link { flex: 0 0 auto; padding: 0.6em 1em; font-size: 0.9em; }

/* ---- score sheet ---- */

.sheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
}
.sheet-toolbar h2 { margin: 0; }

.sheet-scroll { overflow-x: auto; margin-top: 0.8em; }

/* Portrait: players are columns (self first), categories are rows with the total
   on top. Landscape swaps --r and --c on every cell, turning the same markup on
   its side — players become rows and categories columns. */
.sheet {
  display: grid;
  grid-template-columns: max-content repeat(var(--players), minmax(2.8em, 1fr));
  border-top: 1px solid #e6e2d6;
  border-left: 1px solid #e6e2d6;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ws-white);
  min-width: min-content;
}

.sheet-cell {
  grid-column: var(--c);
  grid-row: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35em;
  border-right: 1px solid #e6e2d6;
  border-bottom: 1px solid #e6e2d6;
  font-size: 0.95em;
  min-width: 0;
}

.sheet-head, .sheet-name { background: var(--ws-sky); color: var(--ws-white); font-weight: 600; }
.sheet-total-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.03em; }
.sheet-total { font-weight: 700; background: #f6f2e6; }
.sheet-corner { background: var(--ws-sky); }
.sheet-cell.me { background: #fbf6ea; }
.sheet-name.me, .sheet-head.me { background: var(--ws-sky-dark); }
.sheet-total.me { background: #f3e9cf; }

.sheet-name { flex-direction: column; gap: 0.2em; padding: 0.5em 0.25em; }
/* Rotated so a name reads bottom-to-top up its own column. */
.sheet-name-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 6.5em;
  font-size: 0.9em;
}

.rank-dot { font-size: 1em; line-height: 1; }
.rank-none { visibility: hidden; }
.medal-gold { color: var(--ws-gold); }
.medal-silver { color: var(--ws-silver); }
.medal-bronze { color: var(--ws-bronze); }

/* Every category reads as an icon of one fixed size, big enough to recognise on a
   phone; the end-of-round fields share one icon so they carry a round number. */
.cat-icon-wrap { position: relative; display: block; line-height: 0; }
.cat-icon { width: 3em; height: 3em; object-fit: contain; display: block; }
.cat-badge {
  position: absolute;
  right: -0.2em;
  bottom: -0.2em;
  min-width: 1.3em;
  padding: 0 0.2em;
  border-radius: 0.7em;
  background: var(--ws-ink);
  color: var(--ws-white);
  font-size: 0.65em;
  line-height: 1.3em;
  text-align: center;
}

.sheet-score { padding: 0; }
.sheet-score.just-saved { background: #dfeed6; transition: background 0.6s; }

input.cell-input {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  padding: 0.55em 0.2em;
  font-size: 1em;
  color: var(--ws-ink);
}
input.cell-input:focus { outline: 2px solid var(--ws-coral); outline-offset: -2px; background: var(--ws-white); }

@media (orientation: landscape) {
  .sheet {
    grid-template-columns: max-content repeat(var(--sheet-rows), minmax(2.8em, 1fr));
  }
  .sheet-cell { grid-column: var(--r); grid-row: var(--c); }
  .sheet-name { flex-direction: row; gap: 0.4em; justify-content: flex-start; padding: 0.4em 0.6em; }
  .sheet-name-text { writing-mode: horizontal-tb; transform: none; max-height: none; }
}

/* ---- step-through entry ---- */

body.wizard-open { overflow: hidden; }

/* Height (not bottom) so the JS can shrink it to visualViewport when the on-screen
   keyboard opens, keeping the running total visible above it. */
.wizard {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  /* Above the shared j-tools bar, which sticks to the top of the viewport at 1000 — this
     covers the whole screen, so nothing should show through it. */
  z-index: 1100;
  background: var(--ws-cream);
  display: flex;
}
.wizard[hidden] { display: none; }

.wizard-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.6em 1em 0.8em;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.wizard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6b7570;
  font-size: 0.9em;
}
.wizard-close {
  border: none;
  background: none;
  font-size: 1.8em;
  line-height: 1;
  cursor: pointer;
  color: #6b7570;
  padding: 0 0.2em;
}

.wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  text-align: center;
}

.wizard-title { font-size: 1.15em; font-weight: 600; color: var(--ws-sky-dark); }

.wizard-icon-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 2.5em;
  display: flex;
  align-items: center;
}
/* Grows into whatever vertical room is left (so the keyboard opening shrinks it
   rather than pushing the running total off screen), capped short of where the
   96px source art turns to mush. */
.wizard-icon { height: 100%; max-height: 160px; width: auto; max-width: 55vw; object-fit: contain; }
.wizard-badge {
  position: absolute;
  right: -0.3em;
  bottom: 0.2em;
  min-width: 1.6em;
  padding: 0.1em 0.3em;
  border-radius: 1em;
  background: var(--ws-ink);
  color: var(--ws-white);
  font-size: 1em;
  text-align: center;
}

input.wizard-input {
  width: 6em;
  text-align: center;
  font-size: 1.6em;
  padding: 0.25em;
}

.wizard-hint { margin: 0; max-width: 22em; }

.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid #ddd7c6;
}
.wizard-foot .btn { padding: 0.6em 1.1em; }
.wizard-foot .btn:disabled { opacity: 0.4; cursor: default; }
.wizard-running { font-size: 0.95em; color: #6b7570; }
.wizard-running strong { font-size: 1.3em; color: var(--ws-ink); }

/* ---- landing page ---- */

/* The logged-out front page swaps the app's single soft wash for a patch cut from
   the logo artwork's own sky-blue watercolour, tiled so it repeats the whole way
   down the page. */
body.landing {
  background-color: var(--ws-sky);
  background-image: url('/assets/bg-tile.jpg');
  background-size: 440px 440px;
  background-repeat: repeat;
  background-attachment: scroll;
}

.landing-hero { text-align: center; padding: 1.6em 0 1.2em; }
.landing-logo {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto 0.9em;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.landing-title {
  margin: 0;
  font-size: 2em;
  color: var(--ws-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.landing-tagline {
  margin: 0.4em 0 0;
  font-size: 1.05em;
  color: var(--ws-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.landing-steps { margin: 0.6em 0 0; padding-left: 1.2em; }
.landing-steps li { margin-bottom: 0.5em; }

.landing-cta { text-align: center; }
.landing-cta .hint { margin-top: 1em; }