@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #f3ece2;
  --paper-light: #f9f5ee;
  --ink: #2c2b28;
  --ink-soft: #6f6a60;
  --line: #d6cdbb;
  --correct: #8ea676;
  --present: #e3b55e;
  --absent: #d9d1c1;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Tiles take what the screen can spare after title and keyboard (the art gets the rest). */
  --tile: clamp(34px, min(calc((100vw - 56px) / 5), calc((100dvh - 410px) / 6)), 62px);
  --key-h: clamp(42px, 6.6dvh, 56px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.app {
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) 0 max(10px, env(safe-area-inset-bottom));
}

/* ---------- Title and art ---------- */

.title { text-align: center; padding-top: 10px; flex: none; }
.title h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.6dvh, 2.6rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* balance the trailing letter-spacing */
  text-transform: uppercase;
  line-height: 1;
}
.title p {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: clamp(0.85rem, 2dvh, 1.05rem);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.art {
  position: relative;
  flex: 1 1 auto;
  min-height: 56px;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
}
.art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 42%; /* keep the torii and the path in view when the strip is short */
}

/* A light haze over the walk; script.js thins it as guesses are made. */
.mist {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 70% 35%, rgba(247, 243, 234, 0.95), transparent 70%),
    radial-gradient(ellipse 70% 45% at 25% 60%, rgba(247, 243, 234, 0.9), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(243, 236, 226, 0.85), transparent 75%);
  opacity: var(--mist, 0.4);
  transition: opacity 2.4s ease;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

.toast {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(44, 43, 40, 0.78);
  color: var(--paper-light);
  font-size: 0.9rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.toast.visible { opacity: 1; }

/* ---------- Board ---------- */

.lower { position: relative; flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; }

.board { display: grid; grid-template-rows: repeat(6, var(--tile)); gap: 6px; margin: 4px 0 12px; }
.row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: 6px; }

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 243, 234, 0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(var(--tile) * 0.5);
  text-transform: uppercase;
  color: var(--ink);
}
.tile.filled { border-color: #b5ab97; }
.tile.correct, .tile.present, .tile.absent { border-color: transparent; }
.tile.correct { background: var(--correct); }
.tile.present { background: var(--present); }
.tile.absent { background: var(--absent); color: var(--ink-soft); }
.tile.pop { animation: pop 0.14s ease-out; }
.tile.flip { animation: flip 0.6s ease-in-out; }
.tile.shake { animation: shake 0.5s ease-in-out; }
.tile.breathe { animation: breathe 2.4s ease-in-out; }

@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes flip { 50% { transform: rotateX(90deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes breathe { 50% { transform: scale(1.06); } }

/* ---------- Keyboard (same layout as the sibling games) ---------- */

.keyboard { width: 100%; padding: 0 6px; display: flex; flex-direction: column; gap: 7px; }
.key-row { display: flex; justify-content: center; gap: 5px; }
.key-spacer { flex: 0.5; }
.key {
  flex: 1;
  min-width: 0;
  height: var(--key-h);
  padding: 0;
  background: var(--paper-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(80, 70, 50, 0.12);
  font-family: var(--sans);
  font-size: 1.1rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.6s ease;
}
.key:active { background: var(--line); }
.key.wide { flex: 1.5; font-size: 0.78rem; letter-spacing: 0.04em; }
.key.correct { background: var(--correct); border-color: transparent; }
.key.present { background: var(--present); border-color: transparent; }
.key.absent { background: var(--absent); color: #9a9284; border-color: transparent; }

/* ---------- Panel ---------- */

.panel {
  position: absolute;
  inset: -4px 10px 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 18px;
  text-align: center;
  background: rgba(247, 243, 234, 0.94);
  border: 1px solid rgba(214, 205, 187, 0.8);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(80, 70, 50, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 1.2s ease, background 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
}
.panel.closed { opacity: 0; pointer-events: none; }

.panel > * { display: none; }
.panel[data-phase="begin"] .panel-begin,
.panel[data-phase="opening"] .caption,
.panel[data-phase="outcome"] .panel-word,
.panel[data-phase="outcome"] .caption,
.panel[data-phase="minute"] .caption,
.panel[data-phase="done"] .panel-word,
.panel[data-phase="done"] .panel-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.panel[data-phase="opening"] .skip-btn,
.panel[data-phase="outcome"] .skip-btn,
.panel[data-phase="minute"] .skip-btn { display: block; }

/* Begin sits low, over the keyboard, so the empty grid above says what kind of game this is. */
.panel[data-phase="begin"] { top: auto; gap: 10px; padding: 16px 18px; }
.panel[data-phase="begin"] .panel-begin { gap: 10px; }

/* During the minute the panel melts into the vista: just words on paper. */
.panel[data-phase="minute"] { justify-content: flex-end; padding-bottom: 9dvh; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.eyebrow { margin: 0; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.lead { margin: 0; font-family: var(--serif); font-size: 1.55rem; line-height: 1.2; }
.hint { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.hint:empty { display: none; }

.caption {
  min-height: 3.2em;
  margin: 0;
  max-width: 22ch;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.4dvh, 1.9rem);
  line-height: 1.3;
  transition: opacity 0.6s ease;
}
.caption.fading { opacity: 0; }

.skip-btn {
  position: absolute;
  right: 14px;
  bottom: 10px;
  padding: 6px 8px;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.skip-btn.shown { opacity: 1; pointer-events: auto; }

.answer-tiles { display: flex; gap: 6px; }
.answer-tiles .tile { width: 44px; height: 44px; font-size: 1.3rem; }

.panel-buttons { display: flex; flex-direction: column; gap: 10px; width: min(260px, 100%); }

.primary-btn, .secondary-btn {
  min-width: 180px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.primary-btn { background: var(--correct); color: #fff; border: 1px solid transparent; }
.secondary-btn { background: transparent; color: var(--ink); border: 1px solid #b5ab97; }
.primary-btn:active, .secondary-btn:active { transform: scale(0.98); }
.primary-btn:focus-visible, .secondary-btn:focus-visible { outline: 2px solid var(--present); outline-offset: 3px; }

.share-toast { min-height: 1.2em; }
.credits { margin: 2px 0 0; font-size: 0.72rem; color: var(--ink-soft); }
.credits a { color: inherit; }

/* ---------- Vista (the mindful minute) ---------- */

.vista {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(6dvh, env(safe-area-inset-top));
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  /* Two steps, so the game and the painting never show through each other: blank paper
     covers the game, then the painting appears on it. Leaving runs in reverse. */
  transition: opacity 1.2s ease 0.9s;
}
.vista.shown { opacity: 1; transition: opacity 1.2s ease; }
.vista img { opacity: 0; transition: opacity 0.9s ease; }
.vista.shown img { opacity: 1; transition: opacity 4s ease 1.2s; }
.vista picture { display: contents; }
/* Wide screens: the landscape painting across the top, words beneath it. */
.vista img {
  width: min(100%, 1100px);
  height: 62dvh;
  object-fit: cover;
  object-position: 62% 100%;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent);
}
.vista .mist { --mist: 0.85; transition: opacity 30s ease; }
.vista.shown .mist { --mist: 0; }

/* Portrait screens: the tall painting fills the screen and the words sit in its open sky. */
@media (orientation: portrait) {
  .vista { padding-top: 0; }
  .vista img {
    width: 100%;
    height: 100%;
    object-position: 50% 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .panel[data-phase="minute"] .caption {
    position: fixed;
    top: max(14dvh, calc(env(safe-area-inset-top) + 40px));
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mist { animation: none; }
  .tile.flip, .tile.pop, .tile.breathe { animation: none; }
}