/* Unbleached paper, one indigo ink, thin wax lines. No dark theme: the page
   is a sheet of paper in every colour scheme. */

:root {
  color-scheme: only light;
  --ground: #ebe3d0;
  --paper: #f4eedf;
  --ink: #163e6e;
  --ink-deep: #0d2748;
  --text: #2b2620;
  --muted: #655c4f;
  --hair: rgba(52, 44, 36, 0.22);
  --accent: #b5482f;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", Roboto,
    "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", Georgia, serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.page {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

p,
ol,
ul,
h1,
h2 {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* ---- header ---- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 8px;
}

.brand {
  font: 600 1.375rem/1.2 var(--serif);
  letter-spacing: 0.14em;
  color: var(--ink-deep);
}

.brand-ja {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.sheet-id {
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.sheet-id #sheet-no {
  color: var(--text);
  font-weight: 600;
}

.past {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- par and the five tries ---- */

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 8px;
}

.par {
  font: 400 1rem/1 var(--serif);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.par strong {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink-deep);
  margin-left: 2px;
}

.dots {
  display: flex;
  gap: 8px;
}

.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}

.dots i.used {
  background: var(--ink);
}

.dots i.hit {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- the sheet ---- */

.sheet {
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(52, 44, 36, 0.18),
    0 8px 24px -12px rgba(52, 44, 36, 0.35);
  line-height: 0;
}

#board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 3px;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

#board:focus {
  outline: none;
}

#board:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.hint {
  min-height: 1.5em;
  margin: 8px 2px 0;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

/* ---- controls ---- */

.controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

button {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.toggle {
  flex: none;
  min-width: 4.5rem;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  cursor: pointer;
}

.toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.release {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1.0625rem/1 var(--serif);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.release:disabled {
  background: transparent;
  color: var(--muted);
  border-color: var(--hair);
  cursor: default;
}

.release:not(:disabled):active,
.toggle:active {
  transform: translateY(1px);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.slots {
  display: flex;
  gap: 5px;
}

.slots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.55;
}

.slots i.on {
  background: currentColor;
  opacity: 1;
}

.slots.full-nudge {
  animation: nudge 0.24s ease;
}

@keyframes nudge {
  30% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
}

/* ---- result ---- */

.result {
  margin-top: 18px;
  text-align: center;
}

.score {
  font: 400 1rem/1.1 var(--serif);
  color: var(--muted);
}

.score strong {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-deep);
  margin-right: 6px;
}

.fine {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Above the sheet: this page's rules are not the server's for today. */
.notice {
  margin: 0 2px 8px;
}

/* ---- one row of bars per try ---- */

.tries {
  margin-top: 10px;
}

.tries li + li {
  border-top: 1px solid var(--hair);
}

.try {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto 2.75rem;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.try .no {
  font-size: 0.8125rem;
  color: var(--muted);
}

.try .wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  overflow: hidden;
}

.try .wave i {
  flex: 0 1 8px;
  min-width: 3px;
  background: var(--ink);
  border-radius: 1px 1px 0 0;
  opacity: 0;
  transition: opacity 0.12s linear;
}

.try .wave i.on {
  opacity: 0.85;
}

.try .ticks {
  font: 600 1.125rem/1 var(--serif);
  color: var(--ink-deep);
  text-align: right;
}

.try .delta {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
}

.try .delta.hit {
  color: var(--accent);
  font-weight: 600;
}

.try[aria-current="true"] .no {
  color: var(--ink);
  font-weight: 700;
}

/* ---- layers under the result ---- */

.layer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}

.layer h2 {
  font: 600 1rem/1.4 var(--serif);
  color: var(--ink-deep);
}

.layer .big {
  margin-top: 6px;
  font: 600 1.5rem/1.2 var(--serif);
  color: var(--ink-deep);
}

.layer .line {
  margin-top: 6px;
  font-size: 0.875rem;
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 14px 0 10px;
}

.chart .col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--muted);
}

.chart .marks {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 2px;
  min-height: 18px;
  margin-bottom: 2px;
}

.chart .marks b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.chart .count {
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.chart .well {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 96px;
  margin: 2px 0 4px;
  border-bottom: 1px solid var(--hair);
}

.chart .bar {
  width: 100%;
  min-height: 0;
  background: var(--ink);
  opacity: 0.8;
  border-radius: 2px 2px 0 0;
}

.chart .col.mine .bar {
  opacity: 1;
  background: var(--ink-deep);
}

.chart .col.mine .axis {
  color: var(--accent);
  font-weight: 700;
}

.people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
}

.people i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.actions {
  display: grid;
  gap: 10px;
  text-align: center;
}

.share-text {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  font: 0.875rem/1.4 var(--sans);
  resize: none;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.stores .fine {
  flex-basis: 100%;
}

.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* ---- how to play, footer ---- */

.help {
  margin-top: 26px;
  border-top: 1px solid var(--hair);
  font-size: 0.875rem;
}

.help summary {
  padding: 12px 2px;
  color: var(--muted);
  cursor: pointer;
}

.help ol {
  padding: 0 2px 8px 1.4em;
  list-style: decimal;
}

.help li {
  margin-bottom: 6px;
}

.foot {
  margin-top: 10px;
  padding: 12px 2px 0;
  border-top: 1px solid var(--hair);
  font-size: 0.8125rem;
  text-align: right;
}

.noscript {
  max-width: 30rem;
  margin: 0 auto;
  padding: 12px;
  text-align: center;
}

/* ---- a phone on its side ---- */

/* In one column the sheet would be taller than the window and "release"
   below the fold. The sheet takes the left side at the height of the window
   instead, and everything up to the tries sits beside it. */
@media (max-height: 600px) and (min-aspect-ratio: 7/4) {
  .page:not(.doc) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Up to seven blocks beside the sheet; the last row takes up the slack. */
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 16px;
    max-width: 60rem;
  }

  .page:not(.doc) > * {
    grid-column: 2;
  }

  .page:not(.doc) > .sheet {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: min(28.5rem, calc(100vh - 24px));
    width: min(
      28.5rem,
      calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))
    );
  }

  .page:not(.doc) > #layers,
  .page:not(.doc) > .help,
  .page:not(.doc) > .foot {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
  }
}

/* ---- privacy page ---- */

.doc {
  font-size: 0.9375rem;
  line-height: 1.75;
}

.doc .brand a {
  color: inherit;
  text-decoration: none;
}

.doc h1 {
  margin: 18px 0 10px;
}

.doc h2 {
  margin: 28px 0 8px;
  font: 600 1.0625rem/1.4 var(--serif);
  color: var(--ink-deep);
}

.doc p,
.doc ul {
  margin: 0 0 10px;
}

.doc ul {
  padding-left: 1.3em;
  list-style: disc;
}

.doc section + section {
  margin-top: 36px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
}

@media (prefers-reduced-motion: reduce) {
  .slots.full-nudge {
    animation: none;
  }
  .try .wave i {
    transition: none;
  }
}