/* Card games: the start screen and Septica on one phone against the computer.
   The cards are the only objects with edges; everything else is plain text on the table.
   Sizes are in rem, so the page grows with the text size chosen on the phone.
   Colour pairs are checked for WCAG AA contrast by tools/check_contrast.py. */

:root {
  --table: #e4ebf0;
  --ink: #10212e;
  --ink-soft: #3d5363;
  --face: #ffffff;
  --face-ink: #10212e;
  --red: #b0102a;
  --edge: #10212e;
  --button: #ffffff;
  --button-ink: #10212e;
  --primary: #0b5cad;
  --primary-ink: #ffffff;
  --focus: #0b5cad;
  --shadow: rgba(16, 33, 46, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --table: #0d1821;
    --ink: #e7eef3;
    --ink-soft: #a8b9c6;
    --face: #f3f5f7;
    --face-ink: #10212e;
    --red: #b0102a;
    --edge: #f3f5f7;
    --button: #1b2c3a;
    --button-ink: #e7eef3;
    --primary: #79b8f3;
    --primary-ink: #0d1821;
    --focus: #79b8f3;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --table: #0d1821;
  --ink: #e7eef3;
  --ink-soft: #a8b9c6;
  --face: #f3f5f7;
  --face-ink: #10212e;
  --red: #b0102a;
  --edge: #f3f5f7;
  --button: #1b2c3a;
  --button-ink: #e7eef3;
  --primary: #79b8f3;
  --primary-ink: #0d1821;
  --focus: #79b8f3;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Text size follows the phone setting (Dynamic Type on iPhone). */
html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) 2.5rem max(1rem, env(safe-area-inset-left, 0px));
}

/* The game screen fills the phone screen (decision 10): the status at the top, the hand and the
   actions at the bottom, and the table takes the space in between, so the hand and the buttons
   stay in the same place from one move to the next. When it does not fit (a small phone, larger
   text), the page simply scrolls, in the same order, with nothing fixed on top of anything. */
.play {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 1rem);
  min-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.play > .zone { margin-top: 0.5rem; flex: none; }
.play > .zone:first-child,
.play > .top-links + .zone { margin-top: 0; }

/* The two links at the top of a game page (decision 22): small text, but each one at least
   44 by 44 pixels to tap (WCAG 2.5.5), like the buttons. */
.top-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.9rem;
}
.top-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--ink);
  font-weight: 600;
}
.play > .zone-table { flex: 1 0 auto; }

/* Zone titles stay for the VoiceOver rotor but look like small labels. */
.zone { margin-top: 2rem; }
.zone h2 {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: var(--ink-soft);
}

p { margin: 0 0 0.5rem; }

/* The current announcement. Room for four lines is kept, so the rest does not move. */
.announcement {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  min-height: 5.6em;
}

.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Cards: a white face with a dark edge, the index in a book face, the suit below it. */
.card,
.mini-card {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: var(--face-ink);
  background: var(--face);
  border: 2px solid var(--face-ink);
  border-radius: 0.6rem;
  box-shadow: 0 0.15rem 0.4rem var(--shadow);
}

.hand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr));
  gap: 0.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 6rem;
  padding: 0.4rem 0.2rem 0.45rem;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.card .face-index {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.card .face-suit {
  font-size: 1.7rem;
  line-height: 1;
}
.card .face-name,
.card .face-hint {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  line-height: 1.15;
}
.card .face-hint {
  font-weight: 700;
}
.is-red .face-index,
.is-red .face-suit { color: var(--red); }

.card[aria-disabled="true"] {
  cursor: default;
  box-shadow: none;
}
.card[aria-disabled="true"]:not(.is-empty) > * { opacity: 0.55; }
.card.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-soft);
}

/* The table: what has been played in the current trick, in order. */
/* The table keeps room for one row of cards and two lines of text even when it is empty, so the
   hand does not move when cards come and go, also on phones where the screen is too short. */
.table-area { min-height: 8.2rem; }
.trick {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.3rem;
  padding: 0;
}
.trick:empty { display: none; }
.trick li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.trick .who {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-height: 3.8rem;
  padding: 0.2rem;
}
.mini-card .face-index {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}
.mini-card .face-suit {
  font-size: 1.15rem;
  line-height: 1.1;
}
.trick .holds .mini-card {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.table-line {
  margin: 0;
  font-weight: 600;
}

/* Buttons: large plain targets with a clear edge, four of them in two rows. */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.wide-button {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--button-ink);
  background: var(--button);
  border: 2px solid var(--edge);
  border-radius: 0.6rem;
  cursor: pointer;
  touch-action: manipulation;
}
.wide-button.primary {
  color: var(--primary-ink);
  background: var(--primary);
  border-color: var(--primary);
}
/* An action that cannot be used now, Let go or New game: same name, a dashed outline. */
.wide-button[aria-disabled="true"] {
  cursor: default;
  color: var(--ink-soft);
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-soft);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.log {
  margin: 0;
  padding-left: 1.6rem;
}
.log li { margin: 0 0 0.4rem; }

.setting { margin: 0 0 0.9rem; }
.setting label { display: block; margin-bottom: 0.3rem; }
.setting select {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  color: var(--button-ink);
  background: var(--button);
  border: 2px solid var(--edge);
  border-radius: 0.5rem;
}
.setting-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.setting-check label { margin: 0; }
.setting-check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.05rem 0 0;
  flex: none;
  accent-color: var(--primary);
}

/* The start screen (decision 20): a visible title, fields with their notes, links as buttons. */
.start-title {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0.75rem 0 0;
}
.field { margin: 0 0 0.75rem; }
.field label { display: block; margin-bottom: 0.3rem; }
.field input {
  display: block;
  width: 100%;
  font: inherit;
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  color: var(--button-ink);
  background: var(--button);
  border: 2px solid var(--edge);
  border-radius: 0.5rem;
}
/* A note under a field or a button: why it did not work, or what happens instead. */
.field-note {
  margin: 0.4rem 0 0;
  font-weight: 600;
}
.field-note:empty { display: none; }
a.wide-button { text-decoration: none; }

/* Giving up the match, at the end of the settings (decision 22), and the link back to the game. */
.abandon { margin-top: 1.5rem; }
.abandon-confirm { margin-top: 0.75rem; }
.page-link { margin: 1.25rem 0 0; }
.page-link a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}