/* PixWords Scenes web app */
:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel2: #eceef2;
  --line: #d5d9e0;
  --text: #1b1e24;
  --dim: #656d7c;
  --accent: #e0940a;
  --accent2: #1466b8;
  --accenttext: #8a5a00;   /* accent as *text*: #e0940a is only 2.1:1 on --panel2 */
  --onaccent: #2b1c00;
  --onaccent2: #4a3000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #14161b;
    --panel: #1c1f26;
    --panel2: #232732;
    --line: #313746;
    --text: #e7e9ee;
    --dim: #99a0b0;
    --accent: #ffc247;
    --accent2: #47b4ff;
    --accenttext: #ffc247;
    --onaccent: #23262d;
    --onaccent2: #5b4a1c;
  }
}

:root[data-theme=light] { color-scheme: light; }

:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #14161b;
  --panel: #1c1f26;
  --panel2: #232732;
  --line: #313746;
  --text: #e7e9ee;
  --dim: #99a0b0;
  --accent: #ffc247;
  --accent2: #47b4ff;
  --accenttext: #ffc247;
  --onaccent: #23262d;
  --onaccent2: #5b4a1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0; }
.dim { color: var(--dim); font-weight: 400; font-size: 13px; }
main { max-width: 1400px; margin: 0 auto; padding: 18px 16px 60px; }

/* ------------------------------------------------------------- topbar -- */

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { color: var(--text); font-weight: 700; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 8px; }
.logomark { width: 26px; height: 26px; flex: none; }
.brand span { color: var(--accenttext); }
.mainnav { display: flex; gap: 4px; }
.mainnav a {
  color: var(--dim); padding: 6px 12px; border-radius: 7px;
}
.mainnav a:hover { background: var(--panel2); color: var(--text); text-decoration: none; }
.mainnav a.on { background: var(--panel2); color: var(--accenttext); }
.pickers { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.picker { display: flex; align-items: center; gap: 6px; }
.flag { width: 22px; height: auto; border-radius: 3px; display: block; }

select, input[type=text], input[type=number], button, .btnlink {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 10px; font: inherit;
}
button, .btnlink { cursor: pointer; }
button:hover, .btnlink:hover { border-color: var(--accent); text-decoration: none; }

/* ----------------------------------------------------------- pagehead -- */

.pagehead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead .sub { margin: 0; color: var(--dim); font-size: 14px; }
.levelnav { margin-inline-start: auto; display: flex; gap: 8px; }
.levelnav a { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; }

.notice {
  background: var(--panel); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; color: var(--dim);
}

/* -------------------------------------------------------------- grid --- */

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.grid a {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; color: var(--text);
}
.grid a:hover { border-color: var(--accent); text-decoration: none; }
.grid img { display: block; width: 100%; height: auto; background: var(--panel2); }
.grid .cap { display: flex; justify-content: space-between; padding: 6px 9px; font-size: 13px; }
.grid .cap i { color: var(--dim); font-style: normal; }

/* -------------------------------------------------- language hub (/) --- */

.root-langs-title { font-size: 17px; margin: 20px 0 12px; }
.root-langs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.root-langs a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text);
}
.root-langs a:hover { border-color: var(--accent); text-decoration: none; }
.root-langs img { width: 26px; height: auto; border-radius: 3px; flex: none; }
.root-langs b { display: block; font-weight: 600; font-size: 14px; }
.root-langs i { display: block; color: var(--dim); font-style: normal; font-size: 12px; }

/* no-JS fallback for the language picker: the same links, laid out flat */
.langlist { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 16px; font-size: 13px; }

/* ------------------------------------------------------------- pager --- */

.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0; }
.pager a, .pager span.on {
  padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel);
}
.pager span.on { background: var(--accent); color: var(--onaccent); border-color: var(--accent); font-weight: 600; }
.pager .dim { border: 0; background: none; margin-inline-start: 8px; }

/* ------------------------------------------------------------- level --- */

.level { display: grid; grid-template-columns: minmax(0, 800px) minmax(240px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .level { grid-template-columns: 1fr; } }

/* the box overlay is positioned from the picture's own left edge, so it never mirrors */
.scenewrap { direction: ltr; position: relative; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.scenewrap img { display: block; width: 100%; height: auto; }

.box {
  position: absolute;
  border: 2px solid rgba(255, 194, 71, .85);
  border-radius: 5px;
  background: rgba(255, 194, 71, .10);
  transition: background .12s, box-shadow .12s;
}
.box.dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 194, 71, .55); }
.box i {
  position: absolute; left: 0; top: -1.5em;
  font: 600 12px/1.4 inherit; font-style: normal;
  background: var(--accent); color: var(--onaccent);
  padding: 0 6px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.box.hi { background: rgba(255, 194, 71, .35); box-shadow: 0 0 0 3px rgba(255, 194, 71, .3); z-index: 2; }
.box.hi i { opacity: 1; }
.level.masked .box i { opacity: 0 !important; }

.answers { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.answershead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.toggle { font-size: 13px; padding: 4px 10px; }

.wordlist { list-style: none; margin: 0; padding: 0; }
.wordlist li {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; cursor: default; outline: none;
}
.wordlist li:hover, .wordlist li.hi, .wordlist li:focus-within { background: var(--panel2); }
.wordlist li.hi .w { color: var(--accent); }
.wordlist .w { font-weight: 600; letter-spacing: .5px; color: inherit; cursor: pointer; }
.wordlist .w:hover { color: var(--accenttext); }
.wordlist .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.wordlist li.unplaced .w { color: var(--dim); }
.level.masked .wordlist .w {
  color: transparent; background: var(--panel2); border-radius: 4px;
  user-select: none; text-shadow: none;
}

/* ------------------------------------------------------- words/search -- */

.lenchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.chiplabel { color: var(--dim); font-size: 14px; margin-inline-end: 4px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--text);
}
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }
.chip i { font-style: normal; font-size: 11px; color: var(--dim); }
.chip.on i { color: var(--onaccent2); }

.cols {
  list-style: none; margin: 0; padding: 0;
  columns: 220px; column-gap: 18px;
}
.cols li {
  break-inside: avoid; display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 8px; border-radius: 6px;
}
.cols li:hover { background: var(--panel); }
.cols .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }

.searchform { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.searchform .lenchips { margin-bottom: 14px; }
.boxes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cell {
  width: 42px; height: 48px; text-align: center;
  font-size: 20px; font-weight: 700; text-transform: uppercase;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 194, 71, .25); }
.results h2 { margin-bottom: 10px; }

.scenes { margin-top: 28px; }
.scenes h2 { margin-bottom: 4px; }
.scenes .sub { margin: 0 0 12px; font-size: 13px; }
.scenes .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* site footer — added with the privacy/identity block */
.sitefoot {
  max-width: 1400px; margin: 0 auto; padding: 22px 16px 40px;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: 13px; line-height: 1.55;
}
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.sitefoot p { margin: 0; max-width: 70ch; }

/* privacy/contact page prose */
.prose { max-width: 70ch; line-height: 1.65; }
/* links inside running text need more than colour to be identifiable (WCAG 1.4.1) —
   the global rule strips underlines, which is fine for nav but not for prose */
.prose p a, .prose li a, .contactform small a { text-decoration: underline; }
.prose h2 { margin: 26px 0 8px; font-size: 18px; }
.prose ul { margin: 8px 0; padding-inline-start: 22px; }
.prose li { margin: 4px 0; }

/* contact form */
.contactform { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; margin-top: 18px; }
.contactform label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.contactform small { font-weight: 400; color: var(--dim); font-size: 12px; }
.contactform input[type=text], .contactform input[type=email], .contactform textarea {
  font: inherit; font-weight: 400; padding: 9px 11px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel); color: inherit;
  width: 100%; box-sizing: border-box;
}
.contactform textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.contactform input:focus, .contactform textarea:focus {
  outline: 2px solid var(--accent2); outline-offset: 1px; border-color: transparent;
}
.contactform button {
  align-self: flex-start; font: inherit; font-weight: 600; cursor: pointer;
  padding: 9px 20px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); color: inherit;
}
.contactform button:hover { border-color: var(--accent); color: var(--accenttext); }
/* the bot trap: off-screen rather than display:none, which some bots skip */
.contactform .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }