/* Repaint: game styles. Colors and fonts come from ../shared/eg-theme.css */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.45;
}
[hidden] { display: none !important; }

.noscript { margin: 16px; padding: 16px; border: 2px solid var(--ink); border-radius: 12px; background: #FBF6EA; color: #1F3246; }

:focus-visible { outline: 4px solid var(--mid); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- extra colors used only by this game ---------- */
:root {
  --open: #FFFDF7;      /* an area that is not painted yet */
  --line: #7A6E58;      /* the thin lines between areas */
  --chk-a: #F4F4F4;     /* the light grey checks on areas of the picked color */
  --chk-b: #D3D3D3;
}
:root[data-contrast="high"] {
  --open: #FFFFFF;
  --line: #000000;
  --chk-a: #FFFFFF;
  --chk-b: #A8A8A8;
}

/* ---------- header and settings ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px 4px;
}
.name-block { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; }
.name { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.15; }
.kind { margin: 0; white-space: nowrap; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.kind::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot); border: 2px solid var(--ink); flex: none; }

.textlink {
  color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; white-space: nowrap;
}
.linkbtn { background: none; border: 0; cursor: pointer; }

.settings {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 16px 10px; border-bottom: 2px solid var(--rule);
}
.settings-label { font-size: 18px; margin-right: 2px; }

/* ---------- buttons ---------- */
.btn {
  min-height: 52px; padding: 8px 12px;
  font: inherit; font-weight: 700; font-size: 20px; line-height: 1.2;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 12px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn.small { min-height: 46px; font-size: 18px; padding: 6px 14px; }
.btn.primary { background: var(--ink); color: var(--card); }
.btn[aria-disabled="true"] { opacity: 0.5; border-style: dashed; cursor: default; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--card); }

/* ---------- layout ---------- */
main { padding: 8px 12px 40px; max-width: 1180px; margin: 0 auto; }
.h2 { margin: 4px 0; font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.15; }
.h3 { margin: 4px 0 8px; font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.15; }
.titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.progress { margin: 0; font-size: 18px; }
.note { margin: 12px 0 0; font-size: 18px; }
.panel { background: var(--card); border: 2px solid var(--rule); border-radius: 20px; padding: 4px 18px; margin: 0 0 16px; max-width: 760px; }

.msg {
  margin: 4px 0 8px; padding: 8px 12px;
  font-size: 19px; line-height: 1.35;
  background: var(--card); border: 2px solid var(--rule); border-radius: 12px;
}
.msg:empty { display: none; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* On a narrow screen the picture stays at the top while you scroll to the colors and buttons. */
.stagecol { position: sticky; top: 0; z-index: 10; background: var(--bg); padding: 4px 0 2px; }
/* With big text there is not room to keep the picture and colors fixed at the top. */
html[data-step="2"] .stagecol, html[data-step="3"] .stagecol { position: static; }
@media (min-width: 720px) and (orientation: landscape) {
  .layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .stagecol { position: static; padding: 0; }
}
@media (max-height: 520px) { .stagecol { position: static; } }

/* ---------- the picture ---------- */
.stage {
  position: relative; height: var(--stage-h, 420px);
  background: var(--iconbg); border: 3px solid var(--ink); border-radius: 16px; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.stage:active { cursor: grabbing; }
.stage svg { display: block; width: 100%; height: 100%; }
.status { margin: 6px 0 0; font-size: 19px; line-height: 1.4; min-height: 2.9em; } /* room for two lines, so the picture never moves */
html[data-step="2"] .status, html[data-step="3"] .status { min-height: 4.2em; }

.rg {
  fill: var(--open); stroke: var(--line); stroke-width: 1.2px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer;
}
.rg.hl { fill: var(--hlc) !important; stroke: #0B1B2B !important; stroke-width: 2.4px; }
.glow { display: none; fill: none; stroke: var(--hlc); stroke-width: 10px; stroke-opacity: 0.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.glow.on { display: inline; }
.look-gray .rg { vector-effect: none; stroke-width: 1.7px; }
.look-gray .rg.done { vector-effect: none; stroke-width: 1.1px; }   /* in picture units, so the edges of neighbouring patches overlap at every zoom and no seam shows */
.look-gray .rg.hl { vector-effect: non-scaling-stroke; stroke-width: 2.4px; }
:root[data-contrast="high"] .rg.hl { fill: #FFEE00 !important; stroke: #000 !important; stroke-width: 3px; }
:root[data-contrast="high"] .glow { stroke: #FFEE00; stroke-opacity: 0.55; }
.chk-a { fill: var(--chk-a); }
.chk-b { fill: var(--chk-b); }
.rg.done { stroke-width: 1.8px; }
:root[data-contrast="high"] .rg { stroke-width: 1.6px; }
.lb {
  font-family: var(--font-body); font-weight: 700; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: var(--open); stroke-width: 0.12em; stroke-linejoin: round;
}
.lb.hl { fill: #0B1B2B !important; stroke: #FFFFFF !important; stroke-width: 0.2em; }
.hintpath { fill: none; stroke: var(--dot); stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
:root[data-contrast="high"] .hintpath { stroke: #000; stroke-width: 8px; stroke-dasharray: 14 8; }

/* ---------- colors (each swatch is a family of close shades, shown as a gradient) ---------- */
.palette {
  position: relative; display: flex; gap: 8px; margin: 6px 0 2px; padding: 3px 3px 8px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.sw {
  flex: 0 0 96px; scroll-snap-align: center; min-height: 92px; padding: 6px 6px 4px; font: inherit; cursor: pointer; color: var(--ink); background: var(--card);
  border: 3px solid var(--ink); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sw .sw-band { display: block; width: 100%; height: 30px; border: 2px solid var(--ink); border-radius: 8px; }
.sw .sw-n { font-family: var(--font-head); font-weight: 800; font-size: 28px; line-height: 1.05; }
.sw .sw-t { font-size: 16px; line-height: 1.15; font-weight: 700; }
.sw.sel { outline: 5px solid var(--ink); outline-offset: 2px; background: var(--iconbg); }
.sw.finished { border-style: dashed; opacity: 0.6; }
.sw.sel .sw-t { text-decoration: underline; }

.controls { display: grid; gap: 8px; margin-top: 4px; }
.controls.three { grid-template-columns: repeat(3, 1fr); }
.controls.two { grid-template-columns: 1fr 1fr; }
.controls .btn { min-height: 56px; font-size: 19px; padding: 6px 4px; }
.confirm { margin-top: 8px; }
.confirm-text { margin: 0 0 4px; font-size: 19px; }

/* ---------- all painted ---------- */
.clear { margin-top: 8px; padding: 14px 18px 18px; }
.clear-title { margin: 6px 0; font-family: var(--font-head); font-weight: 800; font-size: 36px; line-height: 1.1; }
.clear p { margin: 0 0 12px; }
.clear-buttons { display: grid; gap: 8px; }
.clear-buttons .btn { min-height: 56px; }
.won #side .h3, .won #palette, .won #dock, .won #confirm { display: none; }

.linkbtn.inline { min-height: 44px; font-size: 18px; }

/* ---------- print: only the print sheet is shown ---------- */
.printsheet { display: none; }
@page { margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  #eg-root, noscript { display: none !important; }
  .printsheet { display: block; color: #000; font-family: var(--font-body); }
  .pr-page { break-after: page; page-break-after: always; }
  .pr-page:last-child { break-after: auto; page-break-after: auto; }
  .pr-title { margin: 0 0 2mm; font-family: var(--font-head); font-weight: 800; font-size: 22pt; line-height: 1.1; }
  .pr-h2 { margin: 5mm 0 1mm; font-family: var(--font-head); font-weight: 800; font-size: 14pt; }
  .pr-sub { margin: 0 0 3mm; font-size: 11pt; }
  .pr-svg { display: block; width: 100%; height: auto; border: 0.4mm solid #333; }
  .pr-key { display: flex; flex-wrap: wrap; gap: 3mm 5mm; }
  .pr-row { display: flex; gap: 1.5mm; }
  .pr-chip {
    width: 12mm; height: 12mm; border: 0.5mm solid #000; border-radius: 2mm;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 13pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-svg path { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

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

.stopbtn { display: block; width: 100%; min-height: 56px; margin: 6px 0 4px; }
.stopbtn[hidden] { display: none; }

/* picture picker */
.howto { margin: 10px 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ptile {
  width: 100%; height: 100%; min-height: 92px; padding: 12px 14px; box-sizing: border-box; text-align: left;
  font: inherit; color: var(--ink); text-decoration: none; background: var(--card);
  border: 3px solid var(--ink); border-radius: 20px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ptile .pthumb { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 6px; background: var(--rule); }
.ptile .pn { font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.1; }
.ptile .ps { font-size: 18px; }
.ptile .pt { font-size: 18px; min-height: 1.3em; }
.ptile.done .pt, .ptile.going .pt { font-weight: 700; color: var(--accent-text); }
#to-choose { font-size: 20px; }

/* challenging pictures (more than 1,000 areas): orange square beside the name */
.sq { display: inline-block; width: 0.55em; height: 0.55em; background: var(--dot); border: 2px solid var(--ink); margin-right: 0.4em; vertical-align: 0.05em; flex: none; }

/* "Save all pictures" panel on the picker */
.saveall { margin-top: 16px; padding-bottom: 14px; }
.saveall-title { margin: 12px 0 4px; font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.15; }
.saveall .controls { margin: 8px 0 0; }
.saveall .controls:has(#saveall-stop[hidden]) { grid-template-columns: 1fr; }
.saveall .note { margin-top: 10px; min-height: 1.3em; }