/* =====================================================================
   hc.css — the high-contrast interface.

   WHAT THIS IS
   ------------
   Not a restyle of the painted app. A SECOND interface, with its own screens,
   its own layout rules and no shared assets. The previous attempt tried to force
   the garden UI into high contrast by deleting its background images, which
   destroyed the content: the lobby's labels are painted into the picture, so
   removing the picture left unnamed rectangles. Colour correction cannot fix a
   screen whose information lives in an illustration. So this mode draws its own.

   WHY IT LOOKS LIKE THIS
   ----------------------
   Every decision below is aimed at one reader: someone in their late seventies
   with reduced contrast sensitivity, possibly early cataract, possibly a tremor.

     · Three colours, no more. Black on white is 21:1. The green is the ONLY
       accent and it means exactly one thing — "this is the action". Nothing is
       communicated by hue alone; every state also carries a word and a shape.
     · One column. A two-column grid asks the eye to choose a scan order; a list
       does not. This is why the game chooser is a list of rows, not a field of
       tiles — the same reason a bus timetable is not a mosaic.
     · Words, never icons alone. Each row has a label. The glyph is a landmark
       that helps a returning player find the row again, not the label itself.
     · Fluid layout, real scrolling. The painted app letterboxes a fixed 440x900
       stage; here the page simply flows, so enlarging the text enlarges the text
       instead of shrinking the world around it.
     · No shadows, no gradients, no depth. They are the first things to turn to
       mud for a low-contrast eye, and they carry no meaning here.
     · 3px borders. An edge has to survive being looked at through a cataract.

   The mode covers the lobby, today's session and the exercise chooser. Every
   other screen — calendar, life book, settings — falls through to the existing
   UI, and the minigames are untouched.
===================================================================== */

#hcRoot {
  --ink: #000000;
  --paper: #ffffff;
  /* 7.1:1 against white, so white text on it is legible and it is dark enough to
     read as "solid" rather than "bright" */
  --green: #00662e;
  --green-ink: #004a21;
  --tint: #e6f2ea;
  --hc-s: 1;                       /* text scale, set from js/a11y.js */

  position: fixed;
  inset: 0;
  z-index: 500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(17px * var(--hc-s));
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
#hcRoot[hidden] { display: none; }
#hcRoot * { box-sizing: border-box; }

/* ---------- the bar: back, and the read-aloud button when enabled ---------- */
.hc-bar {
  display: flex; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 2;
}
.hc-back {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 0 20px 0 14px;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 800; font-size: calc(16px * var(--hc-s));
  cursor: pointer;
}
.hc-back:active { background: var(--ink); color: var(--paper); }
.hc-back:active svg { stroke: var(--paper); }
.hc-back svg { width: 26px; height: 26px; flex: 0 0 auto; }
/* the lobby's bar has no back button, so it carries the app's name instead */
.hc-brand {
  margin: 0; padding: 6px 2px;
  font-size: calc(15px * var(--hc-s));
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-ink);
}

/* ---------- page ---------- */
.hc-page {
  width: 100%; max-width: 100%; min-width: 0;
  padding: 20px max(20px, env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-x: clip;
}
/* Titles answer "where am I", the question this audience asks most. Always
   present, always the largest thing on the screen. */
.hc-title {
  margin: 0 0 6px;
  font-size: calc(24px * var(--hc-s));
  font-weight: 800; line-height: 1.15;
}
.hc-sub {
  margin: 0 0 22px;
  font-size: calc(17px * var(--hc-s));
  font-weight: 600;
}

/* ---------- the single primary action ----------
   One per screen, unmistakable, always the widest and tallest thing on it. */
.hc-primary {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; min-height: calc(64px * var(--hc-s));
  margin: 0 0 26px; padding: 16px 20px;
  border: 3px solid var(--green-ink); border-radius: 14px;
  background: var(--green); color: var(--paper);
  font: inherit; font-weight: 800; font-size: calc(20px * var(--hc-s));
  text-align: center; cursor: pointer;
}
.hc-primary:active { background: var(--green-ink); }

/* ---------- rows: the whole navigation model ----------
   A destination is a full-width row with a glyph, a label and a chevron. Nothing
   is icon-only, nothing is smaller than a thumb, and the hit area is the row. */
.hc-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hc-row {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: calc(66px * var(--hc-s));
  padding: 14px 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.hc-row:active { background: var(--tint); }
.hc-row-ico { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; }
.hc-row-ico svg { width: 40px; height: 40px; }
.hc-row-body { flex: 1 1 auto; min-width: 0; }
.hc-row-name { display: block; font-size: calc(18px * var(--hc-s)); font-weight: 800; }
.hc-row-note { display: block; margin-top: 3px; font-size: calc(15px * var(--hc-s)); font-weight: 600; }
.hc-row-go { flex: 0 0 auto; width: 26px; height: 26px; }
.hc-row.is-locked { border-style: dashed; background: #f2f2f2; }
.hc-row.is-locked .hc-row-note {
  display: inline-block; width: max-content; margin-top: 7px; padding: 3px 8px;
  border: 2px solid var(--ink); border-radius: 999px;
  color: var(--ink); background: var(--paper); font-weight: 900;
}

/* ---------- exercise row in today's session ----------
   Carries a position, a name, a level and the progress through it. State is a
   word plus a shape, never a colour on its own. */
.hc-ex { align-items: flex-start; }
.hc-ex .hc-row-ico { margin-top: 2px; }
/* the one being played is thicker and tinted — but it also carries the word
   "Грати" in its state chip, so the emphasis is never colour alone */
.hc-ex.is-current { border-width: 5px; background: var(--tint); }

/* progress as counted marks: filled square = finished, hollow = still to do */
.hc-marks { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hc-marks i { width: 20px; height: 20px; border: 3px solid var(--ink); border-radius: 3px; }
.hc-marks i.on { background: var(--ink); }
.hc-marks span { margin-left: 4px; font-size: calc(15px * var(--hc-s)); font-weight: 700; }

.hc-state {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 6px 12px;
  border: 3px solid var(--ink); border-radius: 999px;
  font-size: calc(15px * var(--hc-s)); font-weight: 800;
}
.hc-state svg { width: 20px; height: 20px; }
.hc-state.done { background: var(--ink); color: var(--paper); }
.hc-state.done svg { stroke: var(--paper); }
.hc-state.now { background: var(--green); border-color: var(--green-ink); color: var(--paper); }
.hc-state.now svg { fill: var(--paper); stroke: none; }

/* ---------- a plain reassuring note ---------- */
.hc-note {
  margin: 24px 0 0; padding: 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  font-size: calc(16px * var(--hc-s)); font-weight: 600;
}

/* ---------- geometry of the glyphs ----------
   Drawn from scratch as strokes — no bitmaps, so they stay sharp at any size and
   carry no colour information. */
#hcRoot svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#hcRoot svg [fill="currentColor"] { fill: currentColor; stroke: none; }

/* ---------- other preferences must reach this UI too ----------
   The underline switch previously listed only the painted app's class names,
   which meant it silently did nothing on whole screens. Explicit here. */
html[data-underline="1"] #hcRoot .hc-row-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-underline="1"] #hcRoot .hc-primary { text-decoration: underline; text-underline-offset: 4px; }
html[data-bold="1"] #hcRoot { font-weight: 700; }
html[data-reduce-motion="1"] #hcRoot * { transition: none !important; animation: none !important; }

/* ---------- while the mode is on, the painted app steps aside ----------
   Except for the game screen: the minigames keep their own presentation, so the
   HC shell hands over to them and takes the screen back on the way out. */
/* Hide the painted app ONLY on the screens this mode actually owns.
   The first version hid it everywhere and then forced it back with
   `display:flex !important`, which out-specified the app's own `.hidden` class —
   floramenta.js deliberately hides the bottom nav on settings and the store
   (NAV_HIDDEN), and my rule overrode that decision, dropping the three stone
   pads on top of the settings list. A mode must never re-decide something the
   app already decided; it must only speak about what it owns. */
/* The SCREENS are hidden, not #app itself. #app also contains <dialog id="dialog">,
   and the app opens eleven different modal dialogs in it. Hiding the container
   left the dialog measuring 0x0 — invisible, yet still modal, so it made the
   whole document inert and every tap in the app died silently. */
html[data-hc="1"] body[data-screen="home"] #app > .screen,
html[data-hc="1"] body[data-screen="session"] #app > .screen,
html[data-hc="1"] body[data-screen="library"] #app > .screen,
html[data-hc="1"] body[data-screen="dev"] #app > .screen,
html[data-hc="1"] body[data-screen="home"] #bottomNav,
html[data-hc="1"] body[data-screen="session"] #bottomNav,
html[data-hc="1"] body[data-screen="library"] #bottomNav,
html[data-hc="1"] body[data-screen="dev"] #bottomNav { display: none !important; }

/* the read-aloud button docks into this bar the same way it docks into the
   painted app's header */
.hc-bar .speak-btn.in-bar { border-color: var(--ink); background: var(--ink); color: var(--paper); }


/* =====================================================================
   FORM CONTROLS
   ---------------------------------------------------------------------
   The high-contrast settings are a FACADE over the painted app's own controls:
   each row here reads and clicks the real element, so there is one
   implementation of "what this switch does" and the two interfaces cannot drift.
   These classes only describe how that facade looks.
===================================================================== */

/* a group heading — plain, so a section is findable without being decorated */
.hc-group {
  margin: 26px 0 10px;
  font-size: calc(15px * var(--hc-s));
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-ink);
}
.hc-group:first-child { margin-top: 0; }

/* ---- switch row ----
   The state is a WORD ("Увімкнено" / "Вимкнено") as well as a position, because
   a knob that has moved 30px is not a signal for a low-contrast eye. */
.hc-sw {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: calc(66px * var(--hc-s));
  padding: 14px 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.hc-sw-body { flex: 1 1 auto; min-width: 0; }
.hc-sw-name { display: block; font-size: calc(18px * var(--hc-s)); font-weight: 800; }
.hc-sw-note { display: block; margin-top: 3px; font-size: calc(15px * var(--hc-s)); font-weight: 600; }
.hc-sw-state { display: block; margin-top: 6px; font-size: calc(15px * var(--hc-s)); font-weight: 800; }
.hc-sw-box {
  flex: 0 0 auto; width: calc(64px * var(--hc-s)); height: calc(38px * var(--hc-s));
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); position: relative;
}
.hc-sw-box i {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  width: calc(24px * var(--hc-s)); height: calc(24px * var(--hc-s));
  border-radius: 50%; background: var(--ink);
  transition: left .15s;
}
.hc-sw.on { background: var(--tint); border-width: 5px; }
.hc-sw.on .hc-sw-box { background: var(--green); border-color: var(--green-ink); }
.hc-sw.on .hc-sw-box i { left: calc(100% - 4px - 26px * var(--hc-s)); background: var(--paper); }

/* ---- a choice: one option per row, ticked ---- */
.hc-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: calc(60px * var(--hc-s));
  padding: 12px 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 800; font-size: calc(18px * var(--hc-s));
  text-align: left; cursor: pointer;
}
.hc-opt-tick {
  flex: 0 0 auto; width: calc(24px * var(--hc-s)); height: calc(24px * var(--hc-s));
  border: 3px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center;
}
.hc-opt.on { background: var(--green); border-color: var(--green-ink); color: var(--paper); }
.hc-opt.on .hc-opt-tick { border-color: var(--paper); }
.hc-opt.on .hc-opt-tick svg { stroke: var(--paper); width: 70%; height: 70%; }
.hc-opt-sample { margin-left: auto; font-weight: 800; }

/* ---- a plain full-width action ---- */
.hc-btn {
  display: block; width: 100%; min-height: calc(60px * var(--hc-s));
  padding: 14px 18px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 800; font-size: calc(18px * var(--hc-s));
  text-align: center; cursor: pointer;
}
.hc-btn:active { background: var(--tint); }
.hc-btn.accent { background: var(--green); border-color: var(--green-ink); color: var(--paper); }

/* a line of read-only information */
.hc-info {
  margin: 0; padding: 14px 16px;
  border: 3px dashed var(--ink); border-radius: 14px;
  font-size: calc(16px * var(--hc-s)); font-weight: 700;
}

html[data-underline="1"] #hcRoot .hc-sw-name,
html[data-underline="1"] #hcRoot .hc-opt,
html[data-underline="1"] #hcRoot .hc-btn { text-decoration: underline; text-underline-offset: 3px; }
/* a group whose first element is read-only info needs the action spaced off it */
#hcRoot .hc-list.hc-gap { margin-top: 12px; }

/* =====================================================================
   THE DIARY / LIFE-BOOK SCREENS
===================================================================== */

/* Day navigation reads as two labelled buttons, not two bare arrows: "‹" and "›"
   next to a date are a puzzle, "Попередній день" is not. */
/* One per line, full width. Side by side they overflowed at 130% and 160% —
   "Попередній" is a single long word, so a flex item cannot shrink below it and
   the pair simply ran off the screen. Stacking also gives each one the full
   width to be hit, which this audience needs more than it needs compactness. */
.hc-daynav { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hc-daybtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: calc(16px * var(--hc-s));
}
.hc-daybtn svg { flex: 0 0 auto; width: 22px; height: 22px; }

/* the day being written, above the button that writes it */
.hc-date {
  margin: 0 0 12px; padding: 14px 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--tint);
  font-size: calc(20px * var(--hc-s)); font-weight: 800; text-align: center;
}

/* The field itself. A visible 3px frame matters more here than anywhere else:
   an empty text box with a soft border is invisible, and the player cannot tell
   whether there is somewhere to write. */
.hc-text {
  display: block; width: 100%;
  min-height: calc(150px * var(--hc-s));
  padding: 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: calc(18px * var(--hc-s)); line-height: 1.4;
  resize: vertical;
}
.hc-text::placeholder { color: #4a5a52; }
.hc-text:focus { outline: 4px solid var(--green); outline-offset: 2px; }

.hc-entries { display: flex; flex-direction: column; gap: 12px; }
.hc-entry {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink); font: inherit;
}
.hc-entry b {
  display: block; margin-bottom: 6px;
  font-size: calc(18px * var(--hc-s)); color: var(--green-ink);
}
.hc-entry p { margin: 0; font-size: calc(16px * var(--hc-s)); font-weight: 600; line-height: 1.4; }
.hc-entry-action {
  display: block; margin-top: 10px; color: var(--green-ink);
  font-size: calc(15px * var(--hc-s)); font-weight: 900;
  text-decoration: underline; text-underline-offset: 3px;
}

/* page navigation in the life book */
.hc-pagenav { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.hc-pagenav .hc-btn { font-size: calc(16px * var(--hc-s)); }

/* The life-book question is the whole screen's subject — it is set as large as
   the title, because everything below it is an answer to it. */
.hc-question {
  margin: 4px 0 16px;
  font-size: calc(21px * var(--hc-s)); font-weight: 800; line-height: 1.25;
}

/* The paywall is an overlay: it has to sit above #onboardingOverlay (190000).
   The painted slide stays in the DOM, unseen, so the facade can still click its
   real Subscribe button — a programmatic click works on a hidden element. */
#hcRoot.hc-over { z-index: 200001; }
#hcRoot.hc-onboarding{display:block;background:#fff;color:#111;overflow:auto}
#hcRoot.hc-onboarding .hc-onb-page{width:min(100%,440px);min-height:100%;margin:auto;padding:28px 22px 34px;display:flex;flex-direction:column;gap:16px}
#hcRoot.hc-onboarding .hc-kicker{margin:0;font-size:15px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#111}
#hcRoot.hc-onboarding .hc-title{margin:0;color:#000}
#hcRoot.hc-onboarding .hc-sub{margin:0;color:#222}
#hcRoot.hc-onboarding .hc-info{border:3px solid #000;background:#fff;color:#000;padding:18px;font-size:20px;font-weight:800}
#hcRoot.hc-onboarding .hc-row{border:3px solid #000;background:#fff;color:#000}
#hcRoot.hc-onboarding .hc-row.is-current{background:#e7f5eb;box-shadow:inset 8px 0 0 #087735}
#hcRoot.hc-onboarding .hc-primary{margin-top:auto;background:#087735;color:#fff;border:3px solid #000}
#hcRoot.hc-intro{z-index:200002;display:block;background:#fff;color:#000;overflow:auto}
#hcRoot.hc-intro .hc-intro-page{
  width:min(100%,440px);min-height:100%;margin:auto;padding:36px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:18px
}
#hcRoot.hc-intro .hc-brand{margin:0;font-size:18px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
#hcRoot.hc-intro .hc-title{font-size:calc(34px * var(--hc-s));line-height:1.12}
#hcRoot.hc-intro .hc-intro-progress{height:34px;border:3px solid #000;background:#fff}
#hcRoot.hc-intro .hc-intro-progress i{display:block;height:100%;background:#087735}
#hcRoot.hc-intro .hc-intro-value{margin:0;text-align:center;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
#hcRoot.hc-intro .hc-primary{margin-top:8px;background:#087735;color:#fff;border:3px solid #000}
html[data-hc="1"] #introOverlay { visibility: hidden; }
#hcRoot.hc-onboarding .hc-disclaimer-copy{margin:0;border:3px solid #000;padding:18px;font-size:19px;font-weight:700;line-height:1.55}
#hcRoot.hc-onboarding .hc-story-page{text-align:left;justify-content:center}
#hcRoot.hc-onboarding .hc-build-list{display:grid;gap:12px;margin:8px 0 0;padding:0;list-style:none}
#hcRoot.hc-onboarding .hc-build-list li{display:flex;align-items:center;gap:14px;border:3px solid #000;padding:15px;font-size:18px;font-weight:800}
#hcRoot.hc-onboarding .hc-build-list span{display:grid;place-items:center;flex:0 0 38px;height:38px;border:3px solid #000;font-size:22px}
#hcRoot.hc-onboarding .hc-build-list li.done{background:#e7f5eb}

.hc-volume{display:block;padding:15px 16px;border:3px solid var(--ink);border-radius:14px;background:var(--paper)}
.hc-volume>span{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:calc(17px * var(--hc-s))}
.hc-volume output{font-weight:900;color:var(--green-ink);font-variant-numeric:tabular-nums}
.hc-range{width:100%;height:34px;margin:0;accent-color:var(--green)}
.hc-range:focus-visible{outline:4px solid var(--green);outline-offset:3px}
.hc-primary.hc-cooldown{
  background:#fff;color:#000;border:4px solid #000;opacity:1;cursor:default;
  font-variant-numeric:tabular-nums
}
html[data-hc="1"] #onboardingOverlay:has(.onb-paywall.active) .onb-stage { visibility: hidden; }
html[data-hc="1"] #onboardingOverlay:not(:has(.onb-paywall.active)) .onb-stage { visibility:hidden; }

/* Legal small print stays small print — but 17px, not 11px, and in ink rather
   than grey, because "you will be charged" is not decoration. */
.hc-fine {
  margin: 0; font-size: calc(15px * var(--hc-s)); font-weight: 600; line-height: 1.45;
}

/* =====================================================================
   PAYWALL — the painted slide's own structure, in this mode's graphics
   ---------------------------------------------------------------------
   Measured from the painted screen on 390x844: hero 23-350, ribbon 350-392,
   offer 391-820. Those proportions ARE the design, so they are kept; the tints,
   the pink pill and the grey small print are what get replaced.
===================================================================== */
.hc-pw { display: flex; flex-direction: column; min-height: 100%; }

/* upper half: the bar, then the card of ticked benefits */
.hc-pw-top {
  flex: 0 0 auto; min-height: 39%;               /* 327/844 in the original */
  display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px 18px;
  border-bottom: 3px solid var(--ink);
}
.hc-pw-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hc-pw-bar .hc-linkbtn { margin-left: auto; }

.hc-bar .hc-close, .hc-pw-bar .hc-close {
  width: 60px; height: 60px; flex: 0 0 auto;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.hc-bar .hc-close svg, .hc-pw-bar .hc-close svg { stroke-width: 3; }
.hc-linkbtn {
  border: 0; background: none; color: var(--green-ink);
  font: inherit; font-weight: 800; font-size: calc(16px * var(--hc-s));
  text-decoration: underline; text-underline-offset: 3px;
  padding: 12px 6px; min-height: 48px; cursor: pointer;
}
.hc-bar .hc-linkbtn { margin-left: auto; }

/* the benefits sit in a card, as in the original — the frame is what makes it
   one object rather than three loose lines */
.hc-ticks {
  list-style: none; margin: 0; padding: 16px;
  border: 3px solid var(--ink); border-radius: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.hc-ticks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: calc(17px * var(--hc-s)); font-weight: 800; line-height: 1.3;
}
.hc-ticks svg { flex: 0 0 auto; margin-top: 1px; stroke: var(--green); stroke-width: 3.4; }

/* the ribbon straddles the seam between the halves, as it does in the original */
.hc-ribbon {
  flex: 0 0 auto; margin: 0; padding: 14px 16px;
  background: var(--green); color: var(--paper);
  border-bottom: 3px solid var(--green-ink);
  text-align: center;
  font-size: calc(16px * var(--hc-s)); font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
}

/* lower half: the offer, centred */
.hc-pw-offer {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
}
.hc-trial { margin: 0 0 8px; font-size: calc(24px * var(--hc-s)); font-weight: 900; line-height: 1.15; }
.hc-price { margin: 0 0 20px; font-size: calc(18px * var(--hc-s)); font-weight: 700; }
.hc-cta { margin-bottom: 16px; font-size: calc(19px * var(--hc-s)); }
.hc-cancel { margin: 0 0 12px; font-size: calc(16px * var(--hc-s)); font-weight: 700; }
.hc-links { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: center; margin-top: 8px; }

/* the film keeps its place at the top of the store, as a labelled control */
.hc-film { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hc-film svg { flex: 0 0 auto; fill: currentColor; stroke: none; }

/* =====================================================================
   THE DIARY FEED AND ITS WINDOW
===================================================================== */
.hc-add { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hc-add svg { flex: 0 0 auto; stroke-width: 3.2; }

/* The window. Fixed to the viewport rather than to the page, so it covers the
   feed completely — writing is one task and nothing else should be reachable. */
.hc-modal {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  overflow-y: auto;
}
.hc-modal-card {
  width: 100%; max-width: 560px;
  padding: 18px;
  border: 4px solid var(--ink); border-radius: 16px;
  background: var(--paper);
}
.hc-modal-date {
  margin: 0 0 14px;
  font-size: calc(19px * var(--hc-s)); font-weight: 800; text-align: center;
}

/* the paywall fills the screen rather than sitting in the page padding */
#hcRoot.hc-over { display: flex; flex-direction: column; }
#hcRoot.hc-over > .hc-pw { flex: 1 1 auto; }

/* mirrored app dialogs */
.hc-modal-title {
  margin: 0 0 12px;
  font-size: calc(21px * var(--hc-s)); font-weight: 900; line-height: 1.2; text-align: center;
}
.hc-modal-line {
  margin: 0 0 12px;
  font-size: calc(17px * var(--hc-s)); font-weight: 600; line-height: 1.4;
}
.hc-modal-line:last-of-type { margin-bottom: 4px; }


/* =====================================================================
   THE CLEAR MODE'S OWN DIALOG
   ---------------------------------------------------------------------
   A real <dialog> of this mode's own, opened with showModal() so it lives in the
   top layer. That matters for one hard reason: a modal dialog makes everything
   OUTSIDE the top layer inert, so a window drawn into an ordinary div cannot be
   touched at all — it looks right, it answers to `.click()`, and a finger does
   nothing. The first attempt failed exactly that way.

   The painted app's dialog is closed the moment one is asked for, and its
   buttons are pressed on the player's behalf, so every flow behind them is
   unchanged while none of its styling is inherited.
===================================================================== */
#hcDialog {
  --hc-s: 1;
  width: min(calc(100% - 24px), 560px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 4px solid #000000;
  border-radius: 16px;
  background: #ffffff;
  color: #000000;
  box-shadow: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#hcDialog::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: none; }
#hcDialog .hcd-body {
  padding: 22px 18px 18px;
  max-height: none;
  overflow: visible;
}
#hcDialog h2 {
  margin: 0 0 14px;
  font-size: calc(21px * var(--hc-s)); font-weight: 900; line-height: 1.2;
  text-align: center;
}
#hcDialog p {
  margin: 0 0 14px;
  font-size: calc(17px * var(--hc-s)); font-weight: 600; line-height: 1.4;
}
#hcDialog p:last-child { margin-bottom: 0; }
/* a figure the dialog exists to deliver — the recommended level, the day's tally */
#hcDialog .hcd-fact {
  margin: 0 0 12px; padding: 14px 16px;
  border: 3px solid #000000; border-radius: 12px;
}
#hcDialog .hcd-fact.key { background: #e6f2ea; border-color: #004a21; }
#hcDialog .hcd-fact b {
  display: block; margin-top: 4px;
  font-size: calc(21px * var(--hc-s)); font-weight: 900;
}
#hcDialog .hcd-fact span { font-size: calc(16px * var(--hc-s)); font-weight: 700; }
/* the actions are pinned, so a long dialog never hides its own way out */
#hcDialog .hcd-actions {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 3px solid #000000;
  background: #ffffff;
}
#hcDialog .hcd-actions button {
  display: block; width: 100%; min-height: calc(60px * var(--hc-s));
  padding: 14px 18px;
  border: 3px solid #000000; border-radius: 14px;
  background: #ffffff; color: #000000;
  font-family: inherit; font-weight: 800; font-size: calc(18px * var(--hc-s));
  cursor: pointer;
}
#hcDialog .hcd-actions button.accent {
  background: #00662e; border-color: #004a21; color: #ffffff;
}
html[data-underline="1"] #hcDialog .hcd-actions button { text-decoration: underline; text-underline-offset: 3px; }


/* ---- the separate "Large buttons" option reaches this UI too --------
   The baseline here is the ordinary 48px floor with a little margin. Anyone who
   needs more asks for it with that switch, exactly as in the painted app — the
   clear mode is about graphics, not about size. */
html[data-big-targets="1"] #hcRoot .hc-row,
html[data-big-targets="1"] #hcRoot .hc-sw,
html[data-big-targets="1"] #hcRoot .hc-opt,
html[data-big-targets="1"] #hcRoot .hc-btn,
html[data-big-targets="1"] #hcRoot .hc-back,
html[data-big-targets="1"] #hcDialog .hcd-actions button {
  min-height: calc(var(--a11y-tap, 64px) * var(--hc-s));
}
html[data-big-targets="1"] #hcRoot .hc-primary {
  min-height: calc(var(--a11y-tap, 64px) * 1.25 * var(--hc-s));
}

/* a developer control, marked so it is never mistaken for part of the app */
#hcRoot .hc-row.hc-dev {
  border-style: dashed;
  opacity: .75;
}
.hc-dev-clock{font-variant-numeric:tabular-nums}
#hcRoot .hc-btn.hc-danger{border-color:#000;border-style:dashed}
#hcRoot .hc-btn.hc-danger-all{border-color:#000;background:#000;color:#fff}

/* The game keeps its mechanics, while its shared shell follows this interface:
   written controls, hard edges, and no decorative depth. */
html[data-hc="1"] body[data-screen="game"] #game { background: #fff; color: #000; }
html[data-hc="1"] body[data-screen="game"] #game .gamebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  height: 200px !important; min-height: 200px; padding: 10px 12px !important;
  border-bottom: 3px solid #000; background: #fff !important; color: #000; box-shadow: none !important;
}
html[data-hc="1"] body[data-screen="game"] #game .gamebar b {
  flex: 1 1 130px; font-size: 20px; color: #000;
}
html[data-hc="1"] body[data-screen="game"] #game .gamebar .pill {
  position: static !important; order: -1; flex: 1 0 100%;
  transform: none !important; text-align: center;
  border: 2px solid #000 !important; background: #fff !important; color: #000 !important;
}
html[data-hc="1"] body[data-screen="game"] #game .gamebar button {
  flex: 1 1 calc(50% - 8px) !important; width: auto !important; height: 52px !important;
  min-width: 0; min-height: 52px; margin: 0 !important; padding: 8px 10px !important;
  border: 3px solid #000 !important; border-radius: 10px !important;
  background: #fff !important; color: #000 !important; box-shadow: none !important; font-size: 0 !important;
}
html[data-hc="1"] body[data-screen="game"] #game .gamebar button::after {
  content: attr(aria-label); font-size: 15px; font-weight: 900;
}
html[data-hc="1"] body[data-screen="game"] #game .gamebar button.hidden { display: none; }
html[data-hc="1"] body[data-screen="game"] #game #gameFrame {
  top: calc(200px + env(safe-area-inset-top)) !important;
  height: calc(100dvh - 200px - env(safe-area-inset-top)) !important;
}