/* Word Chain on the web: the game's quiet poster (Ui.cs). Open sky, a house at the left edge, clouds in the corner, warm paper cards on
   soft shadows, words as pills (adjectives outlined, nouns filled), tracked Jura capitals for captions, Nunito for what is read. */

@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url(fonts/nunito-black.woff?v=5cdf074b7d95) format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url(fonts/nunito-bold.woff?v=4265f2b27481) format("woff"); }
@font-face { font-family: "Jura"; font-weight: 400; font-display: swap; src: url(fonts/jura-regular.woff?v=eb035eb40871) format("woff"); }
@font-face { font-family: "Jura"; font-weight: 600; font-display: swap; src: url(fonts/jura-semibold.woff?v=40ddd7e042d3) format("woff"); }

:root {
  --sky: #2a7396;
  --ink: #1f4257;
  --ink-soft: #5a7180;
  --paper: #f5eedc;
  --paper-deep: #ece2c9;
  --seafoam: #a8c4be;
  --terracotta: #b66855;
  --sign: #2b6885;
  --apricot: #f0b48c;
  --apricot-pale: #f6dccb;
  --paper-line: rgba(245, 238, 220, .78);
  --paper-faint: rgba(245, 238, 220, .42);
  --shadow: 0 0.875rem 1.875rem rgba(9, 34, 48, .26), 0 0.125rem 0.375rem rgba(9, 34, 48, .12);
  --round: 1.125rem;
  --ground: clamp(9.375rem, 40vw, 13.125rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.45, .45, 1);
  color-scheme: only light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Every size is in rem, so a big screen gets a bigger page: the root grows with the window's height, from 16px (a phone, a laptop) to
   30px (a tall monitor: 1440p at 100% gives about 23px). The layout is a column read top to bottom, so height is what it fills. */
@media (min-width: 700px) and (min-height: 720px) {
  html { font-size: clamp(16px, 1.8vh, 30px); }
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sky);
  color: var(--paper);
  font: 700 1rem/1.4 "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.noscript { padding: 2.5rem 1rem; text-align: center; }

/* ---------------------------------------------------------------- the scenery */

/* On a phone the house and the clouds stand on the ground below everything to read, the house's roof peeking up from the corner as
   on the game's screens; on a wide screen they keep to the edges of the window, beside the column. */
body { position: relative; }
.scenery { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground); pointer-events: none; z-index: 0; overflow: hidden; }
.house {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: clamp(2.875rem, 13vw, 5.75rem);
  background: url(house.webp?v=e335d3a3e369) left top / 100% auto no-repeat;
}
.clouds {
  position: absolute; right: 0; bottom: -0.25rem;
  width: min(62vw, 21.25rem); aspect-ratio: 733 / 425;
  background: url(clouds.webp?v=a196682f2e2a) right bottom / contain no-repeat;
}
@media (min-width: 900px) {
  .scenery { position: fixed; inset: 0; height: auto; }
  .house { top: auto; width: 6.5rem; aspect-ratio: 206 / 1007; background-size: contain; transform: translateY(16%); }
  .clouds { width: clamp(16.25rem, calc(50vw - 15.875rem), 38rem); }   /* clear of the column (28.75rem wide) */
}

/* ---------------------------------------------------------------- the column */

.app {
  position: relative; z-index: 1;
  width: min(100%, 28.75rem);
  margin: 0 auto;
  padding: max(0.625rem, env(safe-area-inset-top)) 1rem calc(var(--ground) + 0.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .app { padding-bottom: 5rem; } }
.caption {
  font: 600 0.6875rem/1.3 "Jura", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.quiet { color: var(--paper-line); }

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

/* Two rows in every language, both on the column's edges: the name and «?» above, the languages and the app below. */
.top {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand help" "langs app";
  align-items: center; column-gap: 0.75rem; row-gap: 0.375rem; padding-top: 0.375rem;
}
.brand { grid-area: brand; display: flex; align-items: baseline; gap: 0.625rem; white-space: nowrap; }
.brand .name { font: 400 0.9375rem/1 "Jura", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.brand .day { color: var(--paper-line); }
.langs { grid-area: langs; display: flex; align-items: center; gap: 0.375rem; }
.lang {
  display: inline-block; padding: 0.4375rem 0.25rem 0.375rem; text-decoration: none; color: var(--paper-faint);
  border-bottom: 0.125rem solid transparent;
}
.lang:first-child { margin-left: -0.25rem; }   /* its letters stand on the edge the name stands on */
.lang[aria-current="page"] { color: var(--paper); border-bottom-color: var(--terracotta); }
.lang:focus-visible, .applink:focus-visible { outline: 0.125rem solid var(--paper); outline-offset: 0.125rem; border-radius: 0.25rem; }
.applink {
  grid-area: app; justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 1rem 0.5625rem 0.8125rem; border-radius: 62.4375rem; white-space: nowrap;
  background: var(--apricot); color: var(--ink); text-decoration: none; box-shadow: 0 0.375rem 0.875rem rgba(9, 34, 48, .25);
  font: 600 0.75rem/1 "Jura", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .18s var(--ease), background .2s;
}
.applink:hover { background: #f5c3a1; }
.applink:active { transform: scale(.96); }
.applink svg { width: 0.75rem; height: 0.75rem; }

/* ---------------------------------------------------------------- the chain */

.board { margin: 0.375rem 0 0; }
.ends { display: flex; justify-content: space-between; margin: 0.875rem 0.125rem 0.25rem; }
.chain { display: flex; flex-direction: column; align-items: center; padding: 0.375rem 0 0.125rem; }
.row { position: relative; display: flex; justify-content: center; width: 100%; }
.pill .tag {
  position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%);
  white-space: nowrap; color: var(--paper-line);
}
.pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.625rem; max-width: 86%;
  padding: 0.4375rem 1.375rem 0.5rem;
  border-radius: 62.4375rem;
  font: 900 1.125rem/1.15 "Nunito", system-ui, sans-serif;
  overflow-wrap: anywhere; text-align: center;
}
.pill.noun { background: var(--paper); color: var(--ink); box-shadow: 0 0.375rem 0.875rem rgba(9, 34, 48, .18); }
.pill.adjective { border: 0.1562rem solid var(--paper); color: var(--paper); }
.pill.target { border: 0.1562rem solid var(--paper); color: var(--paper); background: rgba(245, 238, 220, .06); }
.pill.target::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 0.125rem rgba(245, 238, 220, .25); }
.pill.reached { background: var(--paper); color: var(--ink); }
.pill.slot {
  min-width: 7rem; justify-content: center;
  border: 0.125rem dashed var(--paper-faint); color: var(--paper-faint);
  font: 600 0.6875rem/1 "Jura", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.pill.slot.next { border-color: var(--paper-line); color: var(--paper-line); animation: breathe 2.4s ease-in-out infinite; }
.pill.target.next { box-shadow: 0 0 0 0.3125rem rgba(245, 238, 220, .14); }
@keyframes breathe { 50% { box-shadow: 0 0 0 0.375rem rgba(245, 238, 220, .10); } }

.link { position: relative; width: 100%; height: 2.875rem; }
.link .thread { position: absolute; left: 50%; top: 0; bottom: 0; width: 0.125rem; margin-left: -0.0625rem; background: var(--paper-line); transform-origin: top; }
.link.open .thread { background: none; border-left: 0.125rem dotted var(--paper-faint); width: 0; margin-left: -0.0625rem; }
.link .label {
  position: absolute; left: calc(50% + 0.875rem); top: 50%; transform: translateY(-50%);
  max-width: calc(50% - 1.125rem);
  font: 700 0.7812rem/1.25 "Nunito", system-ui, sans-serif; color: var(--paper);
}
.link .label small { display: block; font-weight: 700; color: var(--paper-line); font-size: 0.75rem; }
.link .label.hint { font: 600 0.6562rem/1.3 "Jura", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-line); }
.link.far { height: 4.5rem; }

/* ---------------------------------------------------------------- the card */

.card {
  position: relative;
  margin-top: 1rem;
  padding: 0.875rem 0.875rem 0.875rem 1.125rem;
  border-radius: var(--round);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.card .caption { color: var(--ink-soft); display: block; margin-bottom: 0.25rem; }
.card .caption b { color: var(--terracotta); font-weight: 600; }
.field { display: flex; align-items: center; gap: 0.625rem; }
.field input {
  flex: 1; min-width: 0;
  padding: 0.5rem 0 0.5625rem;
  border: 0; outline: 0; background: transparent;
  font: 900 1.3125rem/1.2 "Nunito", system-ui, sans-serif; color: var(--ink);
  caret-color: var(--terracotta);
}
.field input::placeholder { color: rgba(90, 113, 128, .62); font-weight: 700; font-size: .84em; }
/* The pair being typed, in the order the game reads it: the given word in grey beside the typed one, as on the app's card. The
   field grows with its word (a hidden copy of the text sets the width), so the two words stand together, not at the field's ends. */
.pair { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.grow { flex: 1 1 auto; min-width: 0; display: inline-grid; }
.grow::after {
  content: attr(data-value) " "; grid-area: 1 / 1; visibility: hidden; white-space: pre; overflow: hidden;
  padding: 0.5rem 0 0.5625rem; font: 900 1.3125rem/1.2 "Nunito", system-ui, sans-serif;
}
.grow input { grid-area: 1 / 1; width: 100%; }
.given {
  display: none; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.5rem 0 0.5625rem; font: 900 1.3125rem/1.2 "Nunito", system-ui, sans-serif; color: var(--ink); opacity: .4;
}
.pair.typed .grow { flex: 0 1 auto; }
.pair.typed .given:not(:empty) { display: block; }
.pair.typed .given:first-child { margin-right: 0.3em; }
.pair.typed .given:last-child { margin-left: 0.3em; }
.copybox {
  display: block; width: 100%; margin-top: 0.75rem; padding: 0.625rem 0.75rem; resize: none;
  border: 0.0938rem dashed rgba(31, 66, 87, .3); border-radius: 0.75rem; background: var(--paper-deep);
  font: 700 0.875rem/1.45 "Nunito", system-ui, sans-serif; color: var(--ink);
}
.send {
  flex: none; width: 3rem; height: 3rem; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sign); color: var(--paper);
  box-shadow: 0 0.375rem 0.875rem rgba(43, 104, 133, .35);
  transition: transform .18s var(--ease), background .2s;
}
.send:active { transform: scale(.92); }
.send:disabled { background: var(--seafoam); box-shadow: none; cursor: default; }
.send svg { width: 1.5rem; height: 1.5rem; }
.send.waiting svg { animation: sway 1.1s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg) translateY(0.0625rem); } 50% { transform: rotate(6deg) translateY(-0.125rem); } }
.say { margin-top: 0.25rem; font: 700 0.875rem/1.35 "Nunito", system-ui, sans-serif; color: var(--ink-soft); animation: rise .3s var(--ease) both; }
.say:empty { display: none; }
.say.calm { color: var(--ink-soft); }
.say.yes { color: var(--sign); }
.more { margin: 0.375rem 0 0; padding-top: 0.4375rem; border-top: 0.0938rem dashed rgba(31, 66, 87, .14); font: 700 0.875rem/1.4 "Nunito", system-ui, sans-serif; color: var(--ink); }
.field input.away { color: transparent; caret-color: transparent; }
.say.wait { color: var(--ink-soft); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; } }
.link.grow .thread { animation: grow .42s var(--ease) both; }
.link.grow .label { animation: rise .45s .16s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }

.under { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin: 0.75rem 0.125rem 0; min-height: 2.25rem; }
.undo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 1rem 0.5625rem 0.75rem; border: 0; border-radius: 62.4375rem;
  background: rgba(31, 66, 87, .28); color: var(--paper);
  transition: opacity .2s, background .2s;
}
.undo:hover { background: rgba(31, 66, 87, .4); }
.undo:disabled { opacity: .35; cursor: default; }
.undo svg { width: 1rem; height: 1rem; }
.rules { margin: 0.875rem 0.25rem 0; text-align: center; font: 700 0.8125rem/1.45 "Nunito", system-ui, sans-serif; color: var(--paper-line); }
.level { margin: 0.375rem 0.25rem 0; text-align: center; color: var(--paper); }

/* ---------------------------------------------------------------- the lesson of the first game and the «?» sheet */

.lesson { margin: 0.625rem 0.125rem 0.125rem; text-align: center; animation: rise .45s var(--ease) both; }
.lesson .rule { margin: 0; font: 700 0.9375rem/1.45 "Nunito", system-ui, sans-serif; color: var(--paper); }
.example { display: grid; justify-items: center; gap: 0.4375rem; margin: 0.75rem auto 0; }
.ex-caption { color: var(--paper-faint); }
.ex-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.1875rem; }
.ex-w {
  padding: 0.125rem 0.5625rem 0.1875rem; border: 0.125rem solid transparent; border-radius: 62.4375rem;
  font: 900 0.8125rem/1.15 "Nunito", system-ui, sans-serif; opacity: .45; transition: opacity .35s var(--ease);
}
.ex-w.lit { opacity: 1; }
.ex-dash { width: 0.5rem; height: 0.125rem; background: var(--paper-faint); }
.ex-said { min-height: 1.3em; font: 700 0.8125rem/1.3 "Nunito", system-ui, sans-serif; color: var(--paper-line); }
.lesson .ex-w.adjective { border: 0.125rem solid var(--paper); color: var(--paper); }
.lesson .ex-w.noun { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.help {
  grid-area: help; justify-self: end; width: 2.125rem; height: 2.125rem; margin: 0; padding: 0;
  border: 0.0938rem solid var(--paper-faint); border-radius: 50%; background: transparent; color: var(--paper);
  font: 600 1rem/1 "Jura", system-ui, sans-serif;
  transition: background .2s, border-color .2s;
}
.help:hover { background: rgba(245, 238, 220, .12); border-color: var(--paper-line); }
.help:focus-visible { outline: 0.125rem solid var(--paper); outline-offset: 0.125rem; }
.sheet-back {
  position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center;
  padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(14, 40, 56, .46);
  animation: fadein .25s ease both;
}
@keyframes fadein { from { opacity: 0; } }
.help-card {
  width: min(100%, 27.5rem); padding: 1.375rem 1.25rem 1.125rem; border-radius: 1.375rem;
  background: var(--paper); color: var(--ink); text-align: center; box-shadow: var(--shadow);
  animation: rise .4s var(--ease) both;
}
.help-card .caption { margin: 0; color: var(--ink-soft); }
.help-rule { margin: 0.625rem 0 0; font: 800 1.0625rem/1.4 "Nunito", system-ui, sans-serif; }
.help-card .ex-caption { color: var(--ink-soft); }
.help-card .ex-w.adjective { border: 0.125rem solid var(--ink); color: var(--ink); }
.help-card .ex-w.noun { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.help-card .ex-dash { background: rgba(31, 66, 87, .4); }
.help-card .ex-said { color: var(--ink-soft); }
.curious { margin: 1rem 0 1rem; color: var(--ink-soft); font: 700 0.8438rem/1.45 "Nunito", system-ui, sans-serif; }
.help-card .button { width: 100%; }
@media (min-width: 720px) { .sheet-back { align-items: center; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---------------------------------------------------------------- the result */

.result { margin-top: 0.875rem; animation: rise .5s var(--ease) both; }
.sheet {
  padding: 1.625rem 1.25rem 1.375rem; border-radius: 1.375rem;
  background: var(--paper); color: var(--ink); text-align: center;
  box-shadow: var(--shadow);
}
.stars { display: flex; justify-content: center; align-items: flex-end; gap: 0.625rem; margin-bottom: 0.625rem; }
.stars svg { width: 2.125rem; height: 2.125rem; color: var(--terracotta); }
.stars svg:nth-child(2) { width: 2.625rem; height: 2.625rem; }
.stars svg.off { color: rgba(182, 104, 85, .22); }
.sheet h1 { margin: 0; font: 400 1.5rem/1.2 "Jura", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.sheet .sum { margin-top: 0.375rem; color: var(--ink-soft); font-size: 0.9375rem; }
.print { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem 0.25rem; margin: 1.125rem 0 0.25rem; }
.print .w { padding: 0.375rem 0.875rem 0.4375rem; border-radius: 62.4375rem; font: 900 1.125rem/1.1 "Nunito", system-ui, sans-serif; }
.print .w.noun { background: var(--ink); color: var(--paper); }
.print .w.adjective { border: 0.125rem solid var(--ink); color: var(--ink); }
.print .w.goal { background: var(--terracotta); color: var(--paper); }
.print .dash { width: 0.75rem; height: 0.125rem; background: rgba(31, 66, 87, .45); }
.rare { margin: 1rem 0 0; padding: 0.75rem 0.625rem; border-top: 0.0938rem dashed rgba(31, 66, 87, .18); border-bottom: 0.0938rem dashed rgba(31, 66, 87, .18); font: 900 1.0625rem/1.35 "Nunito", system-ui, sans-serif; }
.rare em { font-style: normal; color: var(--terracotta); }
.streak { margin-top: 0.75rem; color: var(--ink-soft); }
.way { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.9375rem; }
.buttons { display: grid; gap: 0.625rem; margin-top: 1.25rem; }
.button {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0 1.25rem; border: 0; border-radius: 62.4375rem;
  font: 600 0.8125rem/1 "Jura", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .18s var(--ease), filter .2s;
}
.button:active { transform: scale(.97); }
.button.main { background: var(--sign); color: var(--paper); box-shadow: 0 0.5rem 1.125rem rgba(43, 104, 133, .32); }
.button.soft { background: var(--apricot-pale); color: var(--ink); }
.button svg { width: 1.125rem; height: 1.125rem; }
.next { margin-top: 1rem; color: var(--ink-soft); }
.next b { font: 700 0.9375rem/1 "Nunito", system-ui, sans-serif; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.app-card {
  display: grid; grid-template-columns: 4rem 1fr; gap: 0.375rem 0.875rem; align-items: center;
  margin-top: 1rem; padding: 1.125rem 1.125rem 1rem; border-radius: 1.375rem;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.app-card img { width: 4rem; height: 4rem; border-radius: 0.9375rem; grid-row: span 2; box-shadow: 0 0.25rem 0.625rem rgba(9, 34, 48, .2); }
.app-card h2 { margin: 0; font: 900 1.125rem/1.25 "Nunito", system-ui, sans-serif; }
.app-card p { margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.4; }
.app-card .button { grid-column: 1 / -1; margin-top: 0.625rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 5;
  padding: 0.625rem 1.125rem; border-radius: 62.4375rem; background: var(--ink); color: var(--paper);
  transform: translate(-50%, 1.25rem); opacity: 0; transition: opacity .25s, transform .3s var(--ease);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- motion */

.slip {
  position: fixed; z-index: 4; pointer-events: none; margin: 0;
  display: inline-flex; align-items: center; min-height: 2.625rem; padding: 0.4375rem 1.375rem 0.5rem; border-radius: 62.4375rem;
  font: 900 1.125rem/1.15 "Nunito", system-ui, sans-serif;
}
.slip.noun { background: var(--paper); color: var(--ink); box-shadow: 0 0.625rem 1.375rem rgba(9, 34, 48, .3); }
.slip.adjective { border: 0.1562rem solid var(--paper); color: var(--paper); background: rgba(42, 115, 150, .6); }
.scrap { position: fixed; z-index: 4; width: 0.5625rem; height: 0.8125rem; border-radius: 0.125rem; pointer-events: none; }
.fade-out { animation: fadeout .32s var(--ease) both; }
@keyframes fadeout { to { opacity: 0; transform: translateY(-0.375rem); } }

@media (min-width: 720px) {
  .app { padding-top: 1.375rem; }
  .pill { font-size: 1.1875rem; }
  .rules { font-size: 0.8438rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}