/* fridgle. — a daily fridge of word magnets */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  /* the surface of a fridge: off-white powder coat with a fine speckle
     (the noise is a tiny inline svg, no image files) and a soft sheen */
  background-color: #f4f3ee;
  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(210, 206, 195, 0.18) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #33302a;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

main {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 26px 18px 40px;
  /* the page fills the screen so the footer can sit at the bottom edge —
     until the tiles grow tall enough to push it further down */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

h1 {
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
  letter-spacing: 0.02em;
}

/* the wordmark is itself a big magnet, sitting slightly crooked */
.wordmark-tile {
  display: inline-block;
  background: #fffffe;
  border: 1px solid #c8c5b8;
  padding: 0.14em 0.5em 0.2em;
  transform: rotate(-1.3deg);
  box-shadow:
    0 1px 2px rgba(72, 60, 38, 0.18),
    0 2px 6px rgba(72, 60, 38, 0.08);
}


.corner { display: flex; align-items: baseline; gap: 0.9em; }

#day-label { color: #8f8a7d; font-size: 0.85rem; }

/* quiet text buttons: clear, copy, edit, hard mode */
.quiet {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: #8f8a7d;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.quiet:hover:not(:disabled) { color: #33302a; }
.quiet:disabled { opacity: 0.45; cursor: default; }

/* "off" and "on" are different widths — a hidden copy of the longer
   label holds the button's width steady so the header never shifts */
#hard-toggle { text-align: left; }
#hard-toggle::after {
  content: "hard mode: off";
  display: block;
  height: 0;
  visibility: hidden;
}

/* ---------- the sentence line ---------- */

#line {
  /* a single writing line: magnets sit on it, and the area grows
     upward-wrapping as the sentence gets long */
  border-bottom: 1px solid #cfccc0;
  min-height: 3.1em;
  padding: 0.3em 0.2em 0.6em;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  row-gap: 0.7em;
  position: relative;
}

#line.empty::after {
  content: "drag tiles here";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9c5b8;
  font-style: italic;
  pointer-events: none;
}

/* ---------- magnets ---------- */

.tile {
  display: inline-block;
  background: #fffffe;
  border: 1px solid #c8c5b8;
  padding: 0.24em 0.53em 0.3em;
  font-size: 1.06rem;
  line-height: 1.3;
  white-space: pre;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  /* every magnet sits a little crooked, like a real fridge */
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px));
  box-shadow:
    0 1px 2px rgba(72, 60, 38, 0.18),
    0 2px 6px rgba(72, 60, 38, 0.08);
}

.tile.punct, .tile.affix {
  color: #6d675a;
  min-width: 1.9em;
  text-align: center;
}

/* the wear overlay: wiped-off patches that sit over the print */
.tile .wear {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* words with other forms are a little stack: the right edges of the
   magnets underneath stick out from beneath the top one, full height,
   flush with the tile. tapping that strip opens the menu. */
.tile { position: relative; }

/* words with other forms are a pile: whole darker tiles sit underneath
   the top one, offset a little right, so their edges show. they're drawn
   as sharp box-shadows (a fill + a 1px ring as the border each), which
   naturally paint behind the tile. two forms underneath at most. */
.tile.stacked {
  transition: box-shadow 0.15s ease;
  box-shadow:
    0 1px 2px rgba(72, 60, 38, 0.18),
    0 2px 6px rgba(72, 60, 38, 0.08),
    18px 2px 0 0 #f1eee4,
    18px 2px 0 1px #c9c6b7;
}

/* pointing at the pile pulls it out a little — it wants to be opened */
.tile.stacked:has(.stack:hover) {
  box-shadow:
    0 1px 2px rgba(72, 60, 38, 0.18),
    0 2px 6px rgba(72, 60, 38, 0.08),
    21px 2px 0 0 #f1eee4,
    21px 2px 0 1px #c9c6b7;
}

/* the menu scrolls behind a thin, fridge-toned scrollbar */
#menu { scrollbar-width: thin; scrollbar-color: #cfccc0 transparent; }
#menu::-webkit-scrollbar { width: 7px; }
#menu::-webkit-scrollbar-track { background: transparent; }
#menu::-webkit-scrollbar-thumb { background: #cfccc0; }

/* strip over the protruding pile: the tap target for the menu. the V
   chevron says "there's more in here" even before you touch it */
.tile .stack {
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -2em;
  width: 2.1em; /* wider than the visible edges — easier to tap on a phone */
  cursor: pointer;
  touch-action: none;
}
.tile .stack::before {
  /* an open V chevron, drawn from two borders — sits on the pile's
     protruding edges */
  content: "";
  position: absolute;
  left: 0.34em;
  top: 50%;
  width: 0.34em;
  height: 0.34em;
  border-right: 1px solid #99947f;
  border-bottom: 1px solid #99947f;
  transform: translateY(-72%) rotate(45deg);
  pointer-events: none;
}
.tile.stacked:has(.stack:hover) .stack::before {
  border-color: #6d675a;
  transform: translateY(-56%) rotate(45deg); /* a little dip, like it's opening */
}

/* the pool and the line both leave room for the pile and its chevron */
#pool .tile.stacked, #line .tile.stacked { margin-right: 1.05em; }

/* spacing between magnets on the line: normal word gap by default,
   snug when something glues (punctuation, suffixes, dashes) */
#line .tile { margin-left: 0.55em; }
#line .tile.first { margin-left: 0; }
#line .tile.tight { margin-left: 2px; }

/* the one being dragged: the original stays as a faint ghost */
.tile.ghost { opacity: 0.25; cursor: grabbing; }

/* the copy that follows your finger */
.tile.clone {
  position: fixed;
  z-index: 40;
  margin: 0;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg)) scale(1.07);
  box-shadow:
    0 5px 12px rgba(72, 60, 38, 0.28),
    0 12px 28px rgba(72, 60, 38, 0.14);
}

/* thin marker showing where the magnet will land */
.caret {
  width: 2px;
  height: 1.7em;
  border-radius: 1px;
  background: #b5ae9d;
  margin-left: 3px;
  align-self: center;
}

/* the magnets themselves, seated in the card under the print:
   centered rows, wrapping like the line, piles left behind */
#poem-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.3em;
  margin-top: 0.6em;
  cursor: default;
  font-size: 1.33rem; /* scales the row spacing along with the tiles */
}
/* the poem's magnets show a bit bigger (the base .tile size is in
   rem, so it has to be overridden here, not inherited) */
#poem-tiles .tile { font-size: 1.33rem; }

/* one strip of flush magnets, tilted as a unit — strips flow side by
   side and only wrap when they run out of room */
.magnet-row { display: inline-flex; align-items: center; }
#poem-tiles, .history-tiles { column-gap: 0.55em; }

/* history shows each day's actual magnets, small */
.history-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.25em;
  margin-top: 0.55em;
  cursor: default;
}
#poem-tiles .tile { cursor: default; }

/* the morning deal: magnets drop onto the fridge one after another */
.tile.arrive {
  animation: arrive 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes arrive {
  0% { opacity: 0; translate: 0 -16px; scale: 1.1; }
  70% { opacity: 1; translate: 0 1px; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* small "no" shake, e.g. tapping a magnet that has no other forms */
.tile.wiggle { animation: wiggle 0.22s ease-in-out; }
@keyframes wiggle {
  25% { transform: rotate(calc(var(--rot, 0deg) - 2.5deg)) translateY(var(--dy, 0px)); }
  75% { transform: rotate(calc(var(--rot, 0deg) + 2.5deg)) translateY(var(--dy, 0px)); }
}

/* ---------- under the line: hard mode info + buttons ---------- */

#meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  min-height: 2em;
}

#hard-info { color: #8f8a7d; font-size: 0.85rem; }
#hard-info.over { color: #a8574a; }
/* hard mode counter: reddish until the word count is exactly right */
#hard-info.bad { color: #a8574a; }
#hard-info.good { color: #6f8a55; }

#actions { margin-left: auto; display: flex; align-items: center; gap: 1.2em; }

/* proper buttons, but nothing like the magnets: plain rectangles a
   shade darker than the fridge, no border */
.btn {
  font: inherit;
  font-size: 0.95rem;
  color: #4a453a;
  background: #e7e4d8;
  border: none;
  padding: 0.4em 1.15em 0.45em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(72, 60, 38, 0.14);
}
.btn:hover:not(:disabled) { background: #dedacb; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- the poem card (after finalize) ---------- */

#poem {
  position: fixed;
  z-index: 70;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(37rem, 92vw);
  background: #fefdf9;
  border: 1px solid #c8c5b8;
  padding: 1.6em 1.6em 1.4em;
  text-align: center;
  box-shadow:
    0 8px 20px rgba(72, 60, 38, 0.18),
    0 24px 60px rgba(72, 60, 38, 0.14);
  animation: poem-in 0.35s ease-out;
}

@keyframes poem-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #poem { animation: none; }
}

/* the card's header: small wordmark magnet and day number, centered */
#poem-label {
  font-size: 0.9rem;
  color: #33302a;
  letter-spacing: 0.02em;
  margin-bottom: 0.7em;
}
#poem-label .wordmark-tile { transform: rotate(1.1deg); }
.poem-meta { margin-left: 0.75em; color: #a09a8b; font-size: 0.85rem; }


.poem-row {
  margin-top: 1.4em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.2em;
}



/* the note floats beside the share button without nudging it */
.poem-row { position: relative; }
#copy-note {
  color: #8f8a7d;
  font-size: 0.85rem;
  font-style: italic;
  position: absolute;
  left: 50%;
  top: calc(100% + 0.2em);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ---------- the pool of unused magnets ---------- */

#pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em 0.5em;
  margin-top: 28px;
  padding: 2px;
}

/* once finalized, the fridge is done for today */
body.done .tile { cursor: default; }
body.done #pool .tile { opacity: 0.45; }

/* while the poem card is up, everything behind it fades right back —
   except the footer credit, which stays */
main > * { transition: opacity 0.35s ease; }
body.poem-open main > :not(footer):not(#poem):not(#history),
body.history-open main > :not(footer):not(#poem):not(#history) {
  opacity: 0.12;
}

/* ---------- footer ---------- */

footer {
  margin-top: auto; /* pushed to the bottom of screen or content */
  padding-top: 4em;
  text-align: center;
}

/* ---------- history panel: your finalized prose ---------- */

#history {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(28rem, 88vw);
  max-height: 62vh;
  overflow-y: auto;
  background: #fefdf9;
  border: 1px solid #dcdad1;
  border-radius: 8px;
  padding: 16px 20px 18px;
  box-shadow:
    0 6px 16px rgba(72, 60, 38, 0.16),
    0 18px 40px rgba(72, 60, 38, 0.12);
}

#history h2 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: normal;
  font-style: italic;
  color: #6d675a;
}

.history-entry { margin-top: 14px; }
.history-share { margin-left: 0.9em; }
.history-day { color: #8f8a7d; font-size: 0.8rem; }
.history-sentence { margin-top: 2px; color: #3a362e; }
.history-empty { color: #8f8a7d; font-style: italic; margin: 12px 0 4px; }

/* ---------- tap-a-word menu of other forms ---------- */

/* the menu is just more magnets, on a clean patch of fridge so the
   pool behind can't bleed through */
#menu {
  position: fixed;
  z-index: 50;
  padding: 9px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #f4f3ee;
  border: 1px solid #d5d2c5;
  box-shadow:
    0 6px 16px rgba(72, 60, 38, 0.14),
    0 14px 34px rgba(72, 60, 38, 0.1);
}

.menu-item {
  display: inline-block;
  text-align: left;
  background: #fffffe;
  border: 1px solid #c8c5b8;
  font: inherit;
  font-size: 1.06rem;
  color: #33302a;
  padding: 0.24em 0.53em 0.3em;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(72, 60, 38, 0.18),
    0 2px 6px rgba(72, 60, 38, 0.08);
}
.menu-item:nth-child(odd) { transform: rotate(-1.2deg); }
.menu-item:nth-child(even) { transform: rotate(1.1deg); }
.menu-item:hover {
  transform: rotate(0deg);
  border-color: #b5ae9d;
  box-shadow:
    0 2px 4px rgba(72, 60, 38, 0.22),
    0 4px 10px rgba(72, 60, 38, 0.1);
}

/* the form you're already using sits pressed into the fridge */
.menu-item.now {
  background: #f3efe2;
  box-shadow: inset 0 1px 2px rgba(72, 60, 38, 0.18);
}

@media (max-width: 480px) {
  main { padding-top: 18px; }
  .tile { font-size: 1rem; }
}