/* ChaChess site (MyDeep's site.css). Built to be read at a distance: large type, high
   contrast, big targets. Everything you read or press in the system face for clarity. */
@font-face { font-family: 'Lato'; src: url('/client/fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --paper: #efe6d2; --card: #fbf6ea; --ink: #1d160e; --muted: #4d4231; --line: #b9a986;
  --accent: #7a2e1d; --accent-ink: #ffffff; --ok: #1f6a35; --warn: #8a4b00; --focus: #0b57d0;
  --head: -apple-system, 'Segoe UI', Lato, Arial, sans-serif;
  --body: -apple-system, 'Segoe UI', Lato, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #18140e; --card: #221c13; --ink: #f4ecdc; --muted: #d4c7ad; --line: #5b4e38;
  --accent: #e0875f; --accent-ink: #1a0f08; --ok: #86d79d; --warn: #f0b766; --focus: #8ab4ff; color-scheme: dark; } }
:root[data-theme="dark"] { --paper: #18140e; --card: #221c13; --ink: #f4ecdc; --muted: #d4c7ad; --line: #5b4e38;
  --accent: #e0875f; --accent-ink: #1a0f08; --ok: #86d79d; --warn: #f0b766; --focus: #8ab4ff; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 20px/1.45 var(--body); }
h1, h2 { font-family: var(--head); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 40px; } h2 { font-size: 28px; }
button, select, input { font: inherit; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px 20px;
  min-height: 52px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.quiet { background: transparent; color: var(--ink); border: 2px solid var(--line); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label, .fieldName { font-weight: 700; display: block; margin-bottom: 6px; }   /* .fieldName: the heading of a group of switches */
.help { color: var(--muted); font-size: 18px; margin-top: 4px; }
select, input[type=text], input[type=number], input[type=time] { width: 100%; min-height: 52px; padding: 8px 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px; }
/* Safari draws its own select at its own height and ignores ours (text came out squeezed and
   cut off): draw the select ourselves, the same height as the other fields, with its arrow */
select { -webkit-appearance: none; appearance: none; height: 52px; line-height: 1.3; padding-right: 44px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%23b8a98f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
input[type=text], input[type=number], input[type=time] { height: 52px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.error { color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* a tick box with its words beside it, big enough to see and hit */
.tick { display: flex; align-items: center; gap: 14px; font-weight: 700; margin-top: 18px; cursor: pointer; }
.tick input { width: 30px; height: 30px; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: var(--accent, #e0875f); }
/* the host's live feed on the game page: its own scrolling box, newest at the bottom */
.feedbox { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* the live feed sits flat in the panel: no card border or padding around it (they only took room) */
.feedcard { padding: 0; }
.feedcard h2 { margin-bottom: 2px; }
.feedrow { display: flex; gap: 10px; align-items: baseline; line-height: 1.35; }
.feedrow .dot { flex: 0 0 auto; transform: translateY(2px); }
.feedrow.feed-phase { font-weight: 700; margin-top: 6px; }
/* the host's live feed: country pills, as on the stream */
.feedrow { padding-left: 8px; }
.feedrow .feedtag { flex: 0 0 auto; min-width: 6.4em; text-align: center; font: 700 17px/1 Lato, sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 5px 6px; border-radius: 5px; }

/* MyStreamRunner's two addresses: name, then the address with its Copy button beside it */
.msrAddr { margin-top: 10px; }
.msrName { font-weight: 700; }
.msrRow { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.msrUrl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.msrCopy { flex: 0 0 auto; min-width: 6em; }

/* the kind of game, in front of its name in the games list */
.kindTag { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; font-size: 16px; font-weight: 700; vertical-align: 2px; }
.kindTag.stream { background: #8a2a1e; color: #fff; }
.kindTag.player { background: #2c5a3a; color: #fff; }

/* the side's pill: White in white, Black in black, each with an edge so it shows on either ground */
.sidetag { flex: 0 0 auto; min-width: 5.2em; text-align: center; font: 700 17px/1 Lato, sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 5px 6px; border-radius: 5px; border: 2px solid #8a8a8a; }
.sidetag.white { background: #f7f7f2; color: #111; }
.sidetag.black { background: #111; color: #f7f7f2; }