/* ==========================================================================
   Offscreen — overlay

   The picture carries the personality, so the card around it stays quiet and
   neutral. It has to sit under eight different illustration palettes without
   arguing with any of them, which rules out tinting it per reminder or per
   hour the way the earlier drawn version did.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Bundled faces. Chalkboard SE and Arial Rounded MT Bold are macOS-only, so a
   Windows build silently substituted Comic Sans and a generic rounded sans and
   looked nothing like what was signed off. These two ship with the app.
   Gaegu and Nunito, both SIL Open Font License, redistributable.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Offscreen Hand";
  src: url("../fonts/Gaegu-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Offscreen Round";
  src: url("../fonts/Nunito-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}

:root {
  --paper:  #fbf8f0;
  --ink:    #24282c;
  --muted:  #6c7378;
  --rule:   rgba(36, 40, 44, .10);
  --accent: #4f7449;

  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-head: "Offscreen Hand", "Chalkboard SE", "Segoe Print", cursive;

  --dim:      #14171a;
  --dim-ink:  #eceff2;
  --dim-soft: #9aa3ab;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.stage { position: fixed; inset: 0; }
.stage.corner { display: flex; justify-content: flex-end; align-items: flex-start; }
.stage.full {
  display: grid; place-items: center;
  background: var(--dim);
  animation: wash-in 700ms ease both;
}
@keyframes wash-in { from { opacity: 0 } to { opacity: 1 } }

/* --------------------------------------------------------------------------
   CORNER CARD
   -------------------------------------------------------------------------- */

.nudge {
  position: relative;
  /* fixed width, image fills it. Sizing to the image instead left a gutter
     beside the portrait pictures, since the caption is what set the width. */
  width: 300px;
  margin: 8px 14px 0 0;
  /* Slightly translucent, with a wide soft shadow instead of a tight dark
     one. A hard opaque panel reads as something dumped on top of your work;
     this sits in the desktop instead, which is the whole manner of the app. */
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(20, 23, 26, .10),
    0 18px 44px -12px rgba(20, 23, 26, .30);
  font-family: var(--f-body);
  color: var(--ink);
}

.plate {
  display: block; line-height: 0; position: relative;
  /* the edge fade lives on the artwork only. Masking the whole card would
     eat into "later" and "will do!", which have to stay solid. */
  /* Starts fading well inside the plate. The old 74% stop only softened the
     last few pixels, which read as a hard edge with a slight blur on it. */
  -webkit-mask-image: radial-gradient(105% 96% at 50% 46%, #000 40%, rgba(0,0,0,.55) 74%, transparent 97%);
          mask-image: radial-gradient(105% 96% at 50% 46%, #000 40%, rgba(0,0,0,.55) 74%, transparent 97%);
}

/* The sprout's flat pink field is by far the brightest thing in the pool and
   reads as glare on a dark desktop at 11pm. Take the saturation down a little
   and let the edges fall away into the card paper, so the colour never meets
   the border at full strength. Targeted at this one picture on purpose. */
.plate img[data-shot="water-sprout.jpg"] {
  filter: saturate(.72) brightness(.975);
}
.plate:has(img[data-shot="water-sprout.jpg"])::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 34px 16px var(--paper);
  pointer-events: none;
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
  /* The drawn plates were translucent and the photographs were not, so roughly
     half of all water nudges had no see-through at all and the app looked
     inconsistent. Photographs get less than the flat plates do, because detail
     goes muddy where flat colour just tints, but they no longer sit solid. */
  opacity: .93;
  /* no height cap and no cropping: several of these carry their message at
     the very bottom, so a tall card is the correct answer */
}

.caption {
  padding: 12px 16px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* A picture of his own, in a team build. It can arrive any shape, so it is
   cropped to one steady frame rather than left to set the card's height, and
   his words sit under it in the hand face the drawn plates use for yours. */
.plate.own-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 1;
}
.caption.own {
  padding: 8px 20px 0;
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Drawn plates — our own vectors, rotating alongside the photos
   -------------------------------------------------------------------------- */
.drawn {
  padding: 20px 20px 24px;
  text-align: center;
}
/* Alpha on the plate itself, not just the card. The card was translucent but
   every plate painted an opaque ground over it, so nothing showed through and
   only the masked edge was doing any work. Flat colour takes alpha well; the
   photographs are left opaque because a see-through photo goes muddy. */
.drawn[data-tone="sky"]    { background: rgba(233, 243, 252, .88); --pen: #16181d; --pen-2: #46596b; }
.drawn[data-tone="warm"]   { background: rgba(253, 244, 233, .88); --pen: #5a4634; --pen-2: #8d7a67; }
.drawn[data-tone="dusk"]   { background: rgba(231, 235, 241, .88); --pen: #3a424e; --pen-2: #67717e; }
.drawn[data-tone="cactus"] { background: rgba(239, 232, 235, .88); --pen: #4a3350; --pen-2: #7d6484; }
/* the second cast: one ground each, so no two characters share a colour */
.drawn[data-tone="mint"]   { background: rgba(226, 242, 235, .88); --pen: #26443a; --pen-2: #557567; }
.drawn[data-tone="sand"]   { background: rgba(246, 238, 221, .88); --pen: #4a4030; --pen-2: #7d705b; }
.drawn[data-tone="moss"]   { background: rgba(231, 238, 222, .88); --pen: #4a3f2c; --pen-2: #76705a; }
.drawn[data-tone="butter"] { background: rgba(250, 242, 212, .88); --pen: #4f3a22; --pen-2: #83694a; }
.drawn[data-tone="lilac"]  { background: rgba(235, 232, 245, .88); --pen: #3a3656; --pen-2: #6b6690; }
/* the moon is the one night scene, so its ground goes dark and the type light */
.drawn[data-tone="night"]  { background: rgba(43, 49, 74, .92);    --pen: #efe6c6; --pen-2: #b9bfd6; }

.drawn h2 {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pen);
  margin-bottom: 10px;
}
.drawn .figure { display: grid; place-items: center; }
.drawn .figure svg { display: block; width: 62%; height: auto; }
.drawn[data-tone="warm"] .figure svg { width: 100%; }
/* wide, low compositions need a little more width to hold the same weight */
.drawn[data-plate="tortoise"] .figure svg,
.drawn[data-plate="fish"] .figure svg { width: 70%; }

/* Your own words in place of the stock heading. Up to three wrapped lines;
   a touch larger than the stock heading because here it IS the message, and
   an unbroken long word wraps instead of pushing the card wide. */
.drawn.own h2 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.drawn .kick {
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
  /* Chalkboard runs tall; without this two lines collide */
  line-height: 1.3;
  letter-spacing: .5px;
  color: var(--pen);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Second retro plate: a classic system window. Hard-edged and striped, where
   the DAILY poster is soft and wobbly, so they never read as the same thing.
   -------------------------------------------------------------------------- */
.system { background: rgba(20, 22, 25, .92); padding: 0; }
.system .win {
  background: #1a1c1f;
  border: 1px solid #33363b;
  border-radius: 4px;
  overflow: hidden;
}
.system .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  background: #101214;
}
.system .bar span {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #fff;
}
.system .bar i {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 1.4px solid #9aa0a6; border-radius: 3px;
  display: grid; place-items: center; font-style: normal;
  color: #9aa0a6; font-size: 11px; line-height: 1;
}
.system .screen {
  background: #d8d3c2;
  display: grid; place-items: center;
  padding: 14px;
}
.system .win-body { padding: 12px 14px 16px; text-align: left; }
.system .win-body p {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; color: #cfd3d6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   The DAILY REMINDER plate — rebuilt, so it carries our copy and we own it
   -------------------------------------------------------------------------- */
.daily {
  position: relative;
  background: rgba(143, 174, 135, .90);
  padding: 24px 22px 28px;
  text-align: center;
  overflow: hidden;
}
.daily .grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none; stroke: #fff; stroke-width: 1;
  opacity: .17;
}
.daily .spark { position: absolute; fill: #f7f2e0; opacity: .92; }
.daily .spark.s1 { top: 13px; left: 15px; width: 21px; height: 21px; }
.daily .spark.s2 { bottom: 15px; right: 17px; width: 15px; height: 15px; }

.daily h1 {
  position: relative;
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #22301e;
  margin-bottom: 15px;
}

.daily .pane { position: relative; }
.daily .pane .edge {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: #f7f2e0; stroke: #5c7d57; stroke-width: 3;
}
.daily .pane p {
  position: relative;
  font-family: var(--f-head);
  font-size: 14.5px;
  line-height: 1.8;
  letter-spacing: .3px;
  color: #2b3a28;
  padding: 22px 16px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  border-radius: 0 0 18px 18px;
  /* The card is translucent so it sits in the desktop, but the controls have
     to stay readable over whatever is behind. Solid paper under the buttons,
     faded in at the top so there is no hard seam against the artwork. */
  background: linear-gradient(to bottom, transparent, var(--paper) 46%);
}
.actions .spacer { flex: 1 1 auto; }
.logo { color: var(--muted); opacity: .55; flex: 0 0 auto; }

.btn {
  font-family: var(--f-body);
  font-size: 13.5px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 20px;
  color: var(--muted);
}
.btn-ghost:hover { color: var(--ink); }
.btn-primary {
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 7px 16px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   FULL SCREEN
   The instruction is "stop looking at the screen", so the screen goes dark
   and the timer sits on the bottom edge to be felt, not watched.
   -------------------------------------------------------------------------- */

.is-full {
  width: 100vw; height: 100vh;
  max-width: none; margin: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: var(--dim-ink);
}
.is-full .plate img {
  max-width: min(46vw, 460px);
  max-height: 62vh;
  border-radius: 18px;
}

/* Our drawn plates carry fixed type sizes, so widening the container alone
   left tiny text marooned in a big dark void. zoom scales the whole
   composition, type included, so the break screen actually commands the
   screen the way it did before the card rewrite. */
.is-full .plate .drawn,
.is-full .plate .daily,
.is-full .plate .system {
  zoom: 1.95;
  border-radius: 10px;
  overflow: hidden;
}
.caption.big {
  font-family: var(--f-head);
  font-size: clamp(17px, 1.7vw, 24px);
  color: var(--dim-soft);
  text-align: center;
  max-width: 30ch;
  padding: 0;
}

.full-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 6vw 34px;
}
.secs {
  font-family: var(--f-head);
  font-size: 18px;
  color: var(--dim-soft); opacity: .5;
  font-variant-numeric: tabular-nums;
}
.is-full .btn-ghost { color: var(--dim-soft); opacity: .6; font-size: 15px; }

.progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(236, 239, 242, .10);
}
.progress i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: left center;
  animation: drain-bar var(--secs) linear both;
}
@keyframes drain-bar { to { transform: scaleX(0) } }

/* --------------------------------------------------------------------------
   CRAWL-IN
   -------------------------------------------------------------------------- */
@keyframes crawl-in {
  0%   { transform: translateY(-130%) rotate(-1.1deg); }
  72%  { transform: translateY(6px)   rotate(.3deg); }
  100% { transform: translateY(0)     rotate(0); }
}
@keyframes crawl-out {
  from { transform: translateY(0); opacity: 1 }
  to   { transform: translateY(-130%); opacity: .6 }
}
.crawl   { animation: crawl-in 520ms cubic-bezier(.16,.84,.36,1.02) both; }
.leaving { animation: crawl-out 340ms ease-in both; }

@media (prefers-reduced-motion: reduce) {
  .crawl, .leaving, .stage.full { animation: none; }
}