/* 遠回り — 藍染 ground, 原稿用紙 signature, 朱 correction ink.
   One committed look: indigo cloth, undyed-cotton type, vermilion accent. */

:root {
  --ai-900: #0c1826;
  --ai-800: #11202f;
  --ai-700: #16324a;
  --ai-600: #1d3f5c;
  --ai-500: #2b5678;
  --ai-300: #6d97b8;
  --kinari: #ece4d2;
  --kinari-dim: #b9b3a4;
  --shu: #e2543c;
  --shu-soft: #f08b78;
  --wakaba: #86c48f;

  --cell: 2rem;
  --rule: 1px solid var(--ai-500);
  --pad: clamp(1rem, 4vw, 2.5rem);

  --mincho: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS Mincho', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ai-900);
  color: var(--kinari);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Faint indigo weave so the ground reads as cloth, not a void. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(109, 151, 184, .045) 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(109, 151, 184, .035) 3px 4px);
}

/* clip, not hidden: the seal overhangs its card, and no phone should be able
   to scroll sideways to chase it. `clip` leaves the vertical axis alone. */
#app { position: relative; max-width: 62rem; margin: 0 auto; padding: var(--pad); overflow-x: clip; }

.screen { display: none; }
.screen.is-active { display: block; animation: rise .32s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ─────────────────────────────── title ─────────────────────────────── */

.title-block { padding: clamp(1rem, 6vh, 4rem) 0 2rem; }

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ai-300);
}

/* The wordmark is set as four ruled cells — the first taste of 原稿用紙. */
.wordmark {
  display: flex;
  gap: 0;
  margin: 0 0 1.75rem;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 4.5rem);
  line-height: 1;
}
.wordmark span {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  border: var(--rule);
  margin-left: -1px;
}
.wordmark span:first-child { margin-left: 0; }
/* 回 takes the 朱: the turn is the whole idea of the name, and the middle
   of three cells is where the eye lands anyway. */
.wordmark span:nth-child(2) { color: var(--shu); }

.lede { max-width: 34rem; margin: 0 0 .5rem; font-size: 1.05rem; }
.lede em { font-style: normal; color: var(--shu-soft); border-bottom: 1px solid currentColor; }
.lede--en { color: var(--kinari-dim); font-size: .92rem; }

.mode-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 40rem) { .mode-grid { grid-template-columns: 1fr 1fr; } }

.mode {
  display: grid;
  gap: .35rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  font: inherit;
  background: var(--ai-800);
  border: var(--rule);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.mode:hover:not(:disabled) { background: var(--ai-700); transform: translateY(-2px); }
.mode:disabled { opacity: .45; cursor: not-allowed; }
.mode__kanji {
  font-family: var(--mincho);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--shu);
}
.mode__name { font-size: 1.25rem; font-weight: 700; }
.mode__en { color: var(--kinari-dim); font-size: .88rem; line-height: 1.5; }

/* Under the modes, not inside one: the clock is the same for both players
   and for the visitor who has already used up their day. */
.next-word {
  margin-top: 1.25rem;
  color: var(--kinari-dim);
  font-size: .82rem;
  text-align: center;
}
.mode__note { color: var(--ai-300); font-size: .78rem; letter-spacing: .05em; }

/* ────────────────────────────── setup screens ──────────────────────── */

.back {
  margin-bottom: 1.5rem;
  padding: .35rem 0;
  color: var(--ai-300);
  background: none;
  border: 0;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.back:hover { color: var(--kinari); }

.screen__title {
  margin: 0 0 .25rem;
  font-family: var(--mincho);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
}
.screen__sub { margin: 0 0 1.5rem; color: var(--kinari-dim); font-size: .92rem; }

.tier-grid { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
@media (min-width: 34rem) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

.tier, .role {
  display: grid;
  gap: .2rem;
  padding: 1rem 1.15rem;
  text-align: left;
  color: inherit;
  font: inherit;
  background: var(--ai-800);
  border: var(--rule);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.tier:hover, .role:hover { background: var(--ai-700); }
.tier.is-picked, .role.is-picked {
  border-color: var(--shu);
  background: var(--ai-700);
  box-shadow: inset 3px 0 0 var(--shu);
}
.tier__label, .role__name { font-family: var(--mincho); font-size: 1.15rem; font-weight: 700; }
.tier__sub { color: var(--ai-300); font-size: .8rem; font-family: var(--mono); }
.role__kanji { font-family: var(--mincho); font-size: 1.5rem; color: var(--shu); line-height: 1; }
.role__en { color: var(--kinari-dim); font-size: .82rem; line-height: 1.45; }
.role-grid { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 30rem) { .role-grid { grid-template-columns: 1fr 1fr; } }

.split { display: grid; gap: 2.5rem; }
@media (min-width: 46rem) { .split { grid-template-columns: 3fr 2fr; gap: 3rem; } }
.split__half { min-width: 0; }
.split__title {
  margin: 0 0 .25rem;
  font-family: var(--mincho);
  font-size: 1.3rem;
  padding-bottom: .5rem;
  border-bottom: var(--rule);
}

.btn {
  padding: .8rem 1.6rem;
  color: var(--ai-900);
  background: var(--kinari);
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn:hover:not(:disabled) { background: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--go { background: var(--shu); color: #fff; width: 100%; }
.btn--go:hover:not(:disabled) { background: #f0674f; }
.btn--quiet { background: transparent; color: var(--kinari-dim); border: var(--rule); }
.btn--quiet:hover:not(:disabled) { background: var(--ai-700); color: var(--kinari); }

.code-input {
  width: 100%;
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  color: var(--kinari);
  background: var(--ai-800);
  border: var(--rule);
  font-family: var(--mono);
  font-size: 2rem;
  letter-spacing: .5em;
  text-align: center;
  text-transform: uppercase;
}
.code-input::placeholder { color: var(--ai-600); letter-spacing: .2em; }

.notice { min-height: 1.5rem; margin: 1rem 0 0; color: var(--shu-soft); font-size: .9rem; }

/* ──────────────────────────────── game rail ────────────────────────── */

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  padding-bottom: .75rem;
  margin-bottom: 1.75rem;
  border-bottom: var(--rule);
}
.rail .back { margin: 0; }
.rail__mode { color: var(--kinari-dim); font-size: .85rem; }
.rail__code {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .3em;
  color: var(--shu);
}

.stats { display: flex; gap: 1.25rem; margin: 0 0 0 auto; }
.stats div { display: flex; align-items: baseline; gap: .35rem; }
.stats dt { color: var(--ai-300); font-size: .72rem; letter-spacing: .08em; }
.stats dd { margin: 0; font-family: var(--mono); font-size: .95rem; }

/* Only present from two in a row, so its arrival is itself the news. */
.streak {
  align-items: center;
  gap: .3rem;
  padding: .1rem .55rem .1rem .4rem;
  border: 1px solid rgba(134, 196, 143, .55);
  color: var(--wakaba);
  animation: chipin .5s .95s cubic-bezier(.2, 1.5, .4, 1) both;
}
.streak svg { display: block; flex: none; width: 13px; height: 13px; }
.streak dd { color: var(--wakaba); }
.streak span { font-size: .78rem; letter-spacing: .06em; }
@keyframes chipin {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}

/* ──────────────────────────── the word card ────────────────────────── */

.card {
  position: relative;
  padding: 1.75rem var(--pad);
  margin-bottom: 1.75rem;
  text-align: center;
  background: var(--ai-800);
  border: var(--rule);
}
.card--hidden { background: repeating-linear-gradient(135deg, var(--ai-800) 0 10px, var(--ai-700) 10px 20px); }
/* A win. The hairline thickens to a frame, the card warms, and it lands. */
.card--solved {
  border: 3px solid var(--wakaba);
  background: linear-gradient(180deg, rgba(134, 196, 143, .09), transparent 58%), var(--ai-800);
  animation: thud .5s .4s ease-out both, winflash 1.5s .4s ease-out both;
}
.card--solved::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(134, 196, 143, .26);
  pointer-events: none;
}
.card--solved .card__role { color: var(--wakaba); }

@keyframes thud {
  0%, 100% { transform: none; }
  28% { transform: translateY(3px) scale(.996); }
  62% { transform: translateY(-1px); }
}
@keyframes winflash {
  0% { box-shadow: 0 0 0 0 rgba(134, 196, 143, 0); }
  22% { box-shadow: 0 0 64px -6px rgba(134, 196, 143, .7); }
  100% { box-shadow: 0 0 34px -14px rgba(134, 196, 143, .34); }
}

/* The 正解 seal, pressed into the corner. #seal-ink lives in index.html and
   roughens the edges so it reads as ink rather than a drawn box. */
.seal {
  --tilt: -8deg;
  position: absolute;
  top: -30px;
  /* The overhang can only be as deep as the page has padding to spare, or the
     seal — halo and rotation included — pushes the page sideways on a phone. */
  right: calc(14px - var(--pad));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  color: var(--wakaba);
  animation: stamp .48s cubic-bezier(.22, 1.1, .36, 1) both;
}
.seal__ink {
  position: absolute;
  inset: 0;
  border: 7px solid currentColor;
  border-radius: 2px;
  filter: url(#seal-ink);
}
.seal__chars {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 45px;
  line-height: .96;
  filter: url(#seal-ink);
}
.seal__halo {
  position: absolute;
  inset: -6px;
  border-radius: 6px;
  box-shadow: 0 0 26px 2px rgba(134, 196, 143, .34);
}

@keyframes stamp {
  0% { opacity: 0; transform: rotate(-30deg) scale(2.7); }
  52% { opacity: 1; transform: rotate(calc(var(--tilt) + 3deg)) scale(.93); }
  74% { transform: rotate(calc(var(--tilt) - 2deg)) scale(1.05); }
  100% { opacity: .95; transform: rotate(var(--tilt)) scale(1); }
}

/* Narrow screens: a smaller seal, so it does not swallow the card. */
@media (max-width: 34rem) {
  .seal { width: 92px; height: 92px; top: -22px; }
  .seal__ink { border-width: 5px; }
  .seal__chars { font-size: 33px; }
}

/* Petals, rained over the page for one win and then removed. */
.fanfare {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.petal {
  position: absolute;
  top: 0;
  display: block;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.petal svg { display: block; width: 100%; height: auto; }

@keyframes fall {
  0% { transform: translate3d(0, -70px, 0) rotate(0deg); opacity: 0; }
  7% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--spin)); opacity: 0; }
}

.card__role { margin: 0 0 .75rem; color: var(--ai-300); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.card__kana { margin: 0; color: var(--shu-soft); font-size: 1rem; letter-spacing: .12em; }
.card__word {
  margin: .1rem 0 .35rem;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(2.75rem, 13vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: .06em;
}
.card__gloss { margin: 0; color: var(--kinari-dim); font-size: 1rem; }
.card__pos {
  display: inline-block;
  margin-top: .75rem;
  padding: .1rem .6rem;
  border: var(--rule);
  color: var(--ai-300);
  font-size: .72rem;
  letter-spacing: .1em;
}
.card__sentence {
  margin: 1.25rem auto 0;
  padding-top: 1.25rem;
  max-width: 30rem;
  border-top: var(--rule);
  font-family: var(--mincho);
  font-size: 1.05rem;
}
.card__sentence span { display: block; margin-top: .35rem; color: var(--kinari-dim); font-family: var(--gothic); font-size: .85rem; }
.card__mask { font-family: var(--mincho); font-size: clamp(2.75rem, 13vw, 4.25rem); color: var(--ai-500); letter-spacing: .3em; }
.card__wait { margin: .5rem 0 0; color: var(--ai-300); font-size: .9rem; }

/* ─────────────────────── 原稿用紙 — the signature ───────────────────── */

.genko { margin-bottom: 1rem; }
.genko__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  color: var(--ai-300);
  font-size: .78rem;
  letter-spacing: .12em;
}
.genko__count { font-family: var(--mono); }

/* Ruled cells, sized to the type so kana and kanji sit in their squares. */
.genko__paper {
  position: relative;
  background-color: var(--ai-800);
  background-image:
    linear-gradient(to right, var(--ai-600) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ai-600) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: 0 0;
  border: var(--rule);
}
.genko__paper textarea {
  display: block;
  width: 100%;
  height: calc(var(--cell) * 4);
  padding: 0;
  color: var(--kinari);
  background: transparent;
  border: 0;
  resize: none;
  font-family: var(--gothic);
  font-size: calc(var(--cell) * .78);
  line-height: var(--cell);
  letter-spacing: calc(var(--cell) * .22);
  text-indent: calc(var(--cell) * .11);
}
.genko__paper textarea:focus { outline: 2px solid var(--shu); outline-offset: 2px; }
.genko__paper textarea::placeholder { color: var(--ai-500); }
.genko__paper:has(textarea:disabled) { opacity: .5; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions .btn { flex: 1 1 auto; }

/* The round is already over, so moving on is a quiet act: one modest button,
   centred, instead of the full-width 朱 one that means "send this". */
.actions--done { justify-content: center; }
.btn--next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .5rem 1.1rem;
  color: var(--kinari-dim);
  background: transparent;
  border: var(--rule);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
}
.btn--next:hover { color: var(--kinari); background: var(--ai-700); }
.btn--next svg { display: block; width: 13px; height: 13px; }

/* ────────────────────────── clues and guesses ──────────────────────── */

.log { margin: 2rem 0 0; }
.log__title {
  margin: 0 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: var(--rule);
  color: var(--ai-300);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}
.log ol { margin: 0; padding: 0; list-style: none; }

.clue {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--ai-600);
  animation: rise .3s ease both;
}
.clue__n { color: var(--ai-500); font-family: var(--mono); font-size: .85rem; }
.clue__text { font-family: var(--mincho); font-size: 1.1rem; }

.guess {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--ai-600);
  animation: rise .3s ease both;
}
.guess__mark { font-size: 1.1rem; line-height: 1.5; }
.guess--miss .guess__mark { color: var(--shu); }
.guess--hit .guess__mark { color: var(--wakaba); }
.guess__word { font-family: var(--mincho); font-size: 1.25rem; }
.guess--hit .guess__word { color: var(--wakaba); }
.guess__reason { margin: .15rem 0 0; color: var(--kinari-dim); font-size: .88rem; }

.thinking { display: flex; align-items: center; gap: .6rem; padding: .9rem 0; color: var(--ai-300); }
.thinking i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--shu); animation: pulse 1.1s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ──────────────────────────── the verdict ─────────────────────────── */

.verdict {
  margin-top: 2rem;
  padding: 1.5rem var(--pad);
  background: var(--ai-800);
  border: var(--rule);
  border-left: 3px solid var(--shu);
}
.verdict__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
}
.verdict__label {
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--kinari-dim);
}
.verdict__guess {
  font-family: var(--mincho);
  font-size: 1.6rem;
  color: var(--kinari);
}
.verdict__miss { color: var(--shu); }

/* On a win the small word gives way to the one thing worth looking at. */
.verdict--win { border-left: 3px solid var(--wakaba); }
.verdict__dai {
  margin-left: auto;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--wakaba);
  text-shadow: 0 0 24px rgba(134, 196, 143, .5);
  animation: popin .46s .52s cubic-bezier(.2, 1.45, .4, 1) both;
}
@keyframes popin {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: none; }
}

/* The streak takes the slot the rank line vacates when you win. */
.verdict__streak {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: var(--rule);
}
.verdict__streak strong {
  font-family: var(--mono);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--wakaba);
}
.verdict__streak-en { margin-left: auto; color: var(--kinari-dim); font-size: .75rem; }

.hints {
  margin: 1.5rem 0;
  padding: 1rem var(--pad);
  border: var(--rule);
  border-left: 3px solid var(--ai-500);
  background: rgba(17, 32, 47, .45);
}
.hints__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.hints__title {
  margin: 0;
  font-family: var(--mincho);
  font-size: 1rem;
  font-weight: normal;
  color: var(--ai-300);
}
.hints__count {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--kinari-dim);
}
.hints__item {
  display: flex;
  gap: .9rem;
  margin: .85rem 0 0;
  align-items: baseline;
}
.hints__label {
  flex: none;
  width: 5.5rem;
  font-size: .75rem;
  color: var(--kinari-dim);
}
.hints__text { color: var(--kinari); }
.hints__done {
  margin: .85rem 0 0;
  font-size: .8rem;
  color: var(--kinari-dim);
}
.btn--hint {
  margin-top: .9rem;
  padding: .45rem 1rem;
  background: transparent;
  border: 1px solid var(--ai-500);
  color: var(--ai-300);
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.btn--hint:hover { border-color: var(--ai-300); color: var(--kinari); }

.verdict__hints {
  margin: .75rem 0 0;
  font-size: .8rem;
  color: var(--kinari-dim);
}

.verdict__reason {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: var(--rule);
  color: var(--ai-300);
  font-size: .95rem;
}

/* ---------------------------- the 講評 ---------------------------- */

.feedback {
  margin-top: 1.75rem;
  padding: 1.5rem var(--pad);
  background: var(--ai-800);
  border: var(--rule);
  border-left: 3px solid var(--shu);
}
.feedback h2 {
  margin: 1.75rem 0 .5rem;
  font-family: var(--mincho);
  font-size: 1.15rem;
  color: var(--shu-soft);
}
.feedback h2:first-child { margin-top: 0; }
.feedback p { margin: 0 0 .75rem; line-height: 1.75; }
.feedback ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.feedback li { margin-bottom: .35rem; line-height: 1.7; }
.feedback strong { color: #fff; }
.feedback code {
  padding: .1rem .35rem;
  background: var(--ai-700);
  font-family: var(--mono);
  font-size: .9em;
}

/* ────────────────────────────── waiting room ───────────────────────── */

.waiting { padding: 3rem 0; text-align: center; }
.waiting__code {
  margin: 1rem 0;
  font-family: var(--mono);
  font-size: clamp(3rem, 18vw, 5.5rem);
  letter-spacing: .25em;
  text-indent: .25em;
  color: var(--shu);
}
.waiting__hint { color: var(--kinari-dim); max-width: 26rem; margin: 0 auto; }
.waiting__url { font-family: var(--mono); color: var(--kinari); word-break: break-all; }

/* ────────────────────────────── accessibility ──────────────────────── */

:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── funding meter ──────────────────────────────────────────────────────
   A strip above everything, because the pool funds the whole site. It
   counts plays, not dollars: a play is the thing a visitor can act on. */

.meter {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem var(--pad);
  background: var(--ai-800);
  border-bottom: var(--rule);
  font-size: .85rem;
}

.meter__count { font-weight: 700; letter-spacing: .02em; }
.meter__en { color: var(--kinari-dim); font-size: .8rem; }

.meter__give {
  margin-left: auto;
  padding: .2rem .7rem;
  border: 1px solid var(--shu);
  border-radius: 999px;
  color: var(--shu-soft);
  text-decoration: none;
  white-space: nowrap;
}
.meter__give:hover { background: var(--shu); color: var(--ai-900); }

/* Empty reads as a state, not an error: the puzzle is still there to see. */
.meter.is-empty { background: #2a1512; border-bottom-color: var(--shu); }
.meter.is-empty .meter__count { color: var(--shu-soft); }

/* ── daily puzzle ───────────────────────────────────────────────────── */

.puzzle__head { display: flex; align-items: baseline; gap: 1rem; }
.puzzle__streak { margin-left: auto; color: var(--shu-soft); font-size: .85rem; }

/* ── share ──────────────────────────────────────────────────────────── */

.share { border-top: var(--rule); margin-top: 1.5rem; padding-top: 1.25rem; }
.share__text {
  font-family: var(--mono);
  background: var(--ai-800);
  border: var(--rule);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  margin: 0 0 .8rem;
  white-space: pre-wrap;
}
.share__next { color: var(--kinari-dim); font-size: .82rem; }

/* An out-of-funds tile is dimmed, but the reason is not: fading the one
   sentence a visitor needs to read defeats the point of showing it. */
.mode.is-locked { opacity: 1; border-color: var(--shu); background: #1d1211; }
.mode.is-locked .mode__kanji,
.mode.is-locked .mode__name { opacity: .45; }
.mode.is-locked .mode__note { color: var(--shu-soft); letter-spacing: 0; }