/* Proportions mirror the original sheet: 535 × 710 card, 202px-wide chart,
   5 columns × 11 rows. Everything scales from --u (1 original pixel); on
   phones the chart gets bigger instead (see the end of the file). */
:root {
  --u: min(calc((100vw - 16px) / 535), calc((100dvh - 16px) / 710));

  --row-a: #ff0000;
  --row-ka: #ed7031;
  --row-sa: #ffff66;
  --row-ta: #00b050;
  --row-na: #92d050;
  --row-ha: #4a8fdb;
  --row-ma: #3fa8e2;
  --row-ya: #9966ff;
  --row-ra: #c39ae0;
  --row-wa: #ffa3ff;
  --row-n: #d9d9d9;

  /* katakana sheets use a stronger yellow, a darker blue and a cyan */
  --k-yellow: #ffff00;
  --k-blue: #0070c0;
  --k-cyan: #00b0f0;

  --ink: #111;
  --paper: #fbf3dc;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e6efdf 0%, #eef1e6 50%, #e7e9e0 100%);
  font-family: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.sheet {
  position: relative;
  width: calc(535 * var(--u));
  height: calc(710 * var(--u));
  /* washi paper */
  background: var(--paper) url("/img/washi.jpg") center / cover no-repeat;
  border: 1px solid #d8d2c0;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.title {
  position: absolute;
  top: calc(var(--title-top, 12) * var(--u));
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font: 400 calc(16.5 * var(--u)) / 1.2 "Noto Sans", sans-serif;
  letter-spacing: .01em;
}

/* ---------- chart ---------- */
/* --rows and --cols are set by app.js; a page can place the chart with
   --chart-left, --chart-top and --chart-w, the title with --title-top and
   size rows with --row-h (all in original pixels). */
.chart {
  position: absolute;
  left: calc(var(--chart-left, 173) * var(--u));
  top: calc(var(--chart-top, 42) * var(--u));
  width: calc(var(--chart-w, 202) * var(--u));
  height: calc(var(--rows, 11) * var(--row-h, 57.1) * var(--row-scale, 1) * var(--u));
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 11), minmax(0, 1fr));
  /* cells draw the right and bottom edges */
  border-top: 1px solid #222;
  border-left: 1px solid #222;
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(2 * var(--u));
  border: 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  background: var(--row);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: filter .15s;
}

/* Combination charts: kana at the top, romaji at the bottom of the cell. */
.chart--spaced .cell {
  justify-content: space-between;
  padding-bottom: calc(5 * var(--u));
}

.cell--empty { cursor: default; }
.cell--blank { background: transparent; cursor: default; }

.cell:not(.cell--empty):hover { filter: brightness(1.08); }
.cell:focus-visible { outline: 3px solid #111; outline-offset: -3px; z-index: 3; }

.kana {
  display: block;
  font: 400 calc(var(--kana-size, 27) * var(--u)) / 1.05 "Noto Sans JP", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.kana small { font-size: calc(var(--kana-size, 27) * 0.52 * var(--u)); }
.romaji {
  display: block;
  font: 400 calc(10.5 * var(--u)) / 1 "Noto Sans", sans-serif;
  pointer-events: none;
}

/* ---------- movement when a letter sounds: the whole square jumps ---------- */
.cell.is-speaking {
  z-index: 5;
  filter: none;
  animation: cell-jump .75s cubic-bezier(.3,1.5,.5,1) both;
}
.cell.is-speaking .romaji { animation: romaji-pop .75s ease-out both; }

@keyframes cell-jump {
  0%   { transform: translateY(0) scale(1) rotate(0); box-shadow: 0 0 0 1px #333; }
  25%  { transform: translateY(-18%) scale(1.4) rotate(-7deg); box-shadow: 0 0 0 1px #333, 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.35); }
  45%  { transform: translateY(0) scale(1.28) rotate(5deg); }
  65%  { transform: translateY(-6%) scale(1.15) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); box-shadow: 0 0 0 1px #333; }
}
@keyframes romaji-pop {
  0%, 100% { font-weight: 400; }
  30%      { font-weight: 700; }
}

/* ---------- signature ---------- */
.signature {
  position: absolute;
  left: calc(22 * var(--u));
  top: calc(528 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
}
.signature__name {
  writing-mode: vertical-rl;
  font: 500 calc(17 * var(--u)) / 1 "Noto Serif JP", serif;
  letter-spacing: .08em;
}
.signature__seal {
  display: block;
  width: calc(26 * var(--u));
  height: auto;
}

/* ---------- controls ---------- */
.controls {
  position: absolute;
  right: calc(46 * var(--u));
  bottom: calc(34 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.btn-play {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .15s;
}
.btn-play:hover { transform: scale(1.08); }
.btn-play:focus-visible { outline: 2px solid #4a8fdb; outline-offset: 4px; }

.btn-play svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); display: block; }
.spk { fill: #bcbcbc; }
.wave { fill: none; stroke: #bcbcbc; stroke-width: 5; stroke-linecap: round; }


.btn-play:hover .spk { fill: #9a9a9a; }
.btn-play:hover .wave { stroke: #9a9a9a; }

.btn-play:not(.is-playing) .w1 { animation: wave 2.4s ease-in-out infinite; }
.btn-play:not(.is-playing) .w2 { animation: wave 2.4s ease-in-out .3s infinite; }
@keyframes wave { 0%, 70%, 100% { opacity: 1; } 85% { opacity: .35; } }

/* ---------- phones ---------- */
/* Scaled down whole, the sheet left squares of about 27 × 38 px on a phone,
   too small to tap. Here the chart takes the width of the screen (up to
   360px), rows are a bit shorter, and the page scrolls; the title, signature
   and speaker sit above and below it. */
@media (max-width: 560px) {
  html, body { height: auto; }
  body {
    display: block;
    background: var(--paper) url("/img/washi.jpg") center / cover fixed;
  }
  .sheet {
    --u: calc(min(100vw - 32px, 360px) / var(--chart-w, 202));
    --row-scale: .8;
    display: grid;
    grid-template-areas: "title title" "chart chart" "sig controls";
    align-items: end;
    gap: 16px;
    width: auto;
    height: auto;
    min-height: 100vh;
    padding: 20px 16px 24px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .title { grid-area: title; position: static; font-size: 18px; }
  .chart { grid-area: chart; justify-self: center; position: relative; left: auto; top: auto; }
  .signature { grid-area: sig; justify-self: start; position: static; gap: 6px; }
  .signature__name { font-size: 15px; }
  .signature__seal { width: 22px; }
  /* the page scrolls, so the speaker floats at the bottom to stay in reach */
  .controls { grid-area: controls; justify-self: end; position: sticky; right: auto; bottom: 16px; z-index: 6; }
  .btn-play { padding: 6px; background: rgba(251, 243, 220, .92); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .btn-play svg { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.is-speaking, .cell.is-speaking .romaji,
  .btn-play .wave { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .cell.is-speaking { outline: 3px solid #111; outline-offset: -3px; }
}