:root {
  color-scheme:light;
  --ink:#253e48;
  --muted:#6b7779;
  --paper:#fffdf7;
  --red:#bd493a;
  --line:#dcd4c5;
  --cell:30px;
  --inset:15px;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",Meiryo,sans-serif;
  color:var(--ink);
  background:#f2ede3;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
body {
  margin:0;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
button,a {
  touch-action:manipulation;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #b85d1c;
  outline-offset:3px;
}
button:active {
  transform:translateY(1px);
}
button {
  border:0;
  background:none;
}
button:disabled {
  cursor:default;
}
button:disabled:active {
  transform:none;
}
.app {
  max-width:420px;
  height:100dvh;
  max-height:1000px;
  min-height:580px;
  margin:auto;
  padding:18px 18px max(8px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
}
.heading {
  flex:none;
}
.heading {
  padding-left:var(--inset);
}
.masthead-top,.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.kicker {
  margin:0;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted);
}
.masthead {
  margin-top:2px;
}
h1 {
  margin:0;
  font-size:25px;
  font-weight:900;
  letter-spacing:.07em;
  white-space:nowrap;
}
nav {
  display:flex;
  align-items:center;
  gap:8px;
}
.text-button {
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  padding:9px 0;
}
.sound-button {
  font-size:10px;
  border:1px solid #bdb8aa;
  padding:8px 6px;
  border-radius:6px;
  min-width:48px;
  font-weight:700;
}
.rule {
  font-size:12px;
  letter-spacing:.01em;
  margin:9px 0 2px;
  white-space:nowrap;
}
.progress {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.ch {
  position:relative;
  border-radius:3px;
  transition:background .12s;
}
.ch.chosen {
  background:#fae0cf;
  color:#a43428;
  box-shadow:0 0 0 1px #bb6a4d;
}
.ch.chosen::after {
  content:attr(data-order);
  position:absolute;
  right:-3px;
  top:-5px;
  font:8px/1 sans-serif;
  color:#963728;
}
.dots {
  display:flex;
  gap:7px;
}
.dot {
  width:21px;
  height:5px;
  border-radius:2px;
  background:#d5cdbf;
}
.dot.done {
  background:var(--red);
}
.dot.current {
  background:var(--ink);
}
#main {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  flex:1;
}
.reader-tools {
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding-left:var(--inset);
}
.reader-tools .tool-group:last-child {
  margin-left:auto;
}
.tool-group {
  display:flex;
  align-items:center;
  gap:3px;
}
.tool-label {
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
}
.choice {
  min-height:36px;
  min-width:35px;
  border:1px solid #c6c0b3;
  border-radius:6px;
  padding:6px 9px;
  font-size:12px;
  background:#f8f4eb;
}
.choice[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  box-shadow:0 2px 0 #112a34;
}
.paper {
  flex:1;
  min-height:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px 4px 14px 4px;
  box-shadow:0 5px 16px #473c2710;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:13px 14px 10px;
}
.letter-top {
  flex:none;
  text-align:right;
  min-height:22px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.06em;
  border-bottom:1px solid #e5ddcd;
  padding-bottom:8px;
}
.sender {
  flex:none;
  margin:4px 0 0;
  text-align:right;
  font-size:11px;
  letter-spacing:.06em;
  color:#59615c;
}
.paper-stage {
  flex:1;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12px 0 8px;
  overflow:auto;
}
.letter-grid {
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),var(--cell));
  width:100%;
  max-width:330px;
  flex:none;
  --font:18px;
}
.letter-grid.small {
  --cell:23px;
  --font:15px;
}
.letter-grid.large {
  --cell:32px;
  --font:22px;
}
.letter-grid.vertical {
  width:calc(var(--cols) * 36px);
  max-width:100%;
}
.glyph {
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;
  font-size:var(--font);
  line-height:1;
  padding:0;
  min-width:0;
  border:1px solid #e2ddcf;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:2px;
  position:relative;
  background:#fffdf7;
  transition:background .12s,box-shadow .12s;
}
.glyph:hover {
  background:#eee8db;
}
.glyph.chosen {
  background:#fae0cf;
  color:#a43428;
  box-shadow:inset 0 0 0 1px #bb6a4d;
  border-radius:4px;
}
.glyph.chosen::after {
  content:attr(data-order);
  position:absolute;
  right:1px;
  top:1px;
  font:8px/1 sans-serif;
  color:#963728;
}
.glyph.punctuation {
  color:#687476;
}
.vertical .glyph.punctuation {
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top:1px;
}
.postscript {
  margin:3px 0 0;
  border-top:1px dashed #dcd4c5;
  padding-top:7px;
  font-size:11px;
  line-height:1.6;
  flex:none;
  color:#6a716b;
}
.reply-box {
  flex:none;
}
.answer-label {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-size:11px;
  letter-spacing:.1em;
  margin-bottom:7px;
}
.edits {
  display:flex;
  justify-content:flex-end;
  gap:14px;
}
.edits button {
  font-size:11px;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
  padding:4px 0;
}
.answer {
  display:flex;
  gap:5px;
  justify-content:center;
  min-height:43px;
  padding:4px 2px;
}
.answer-cell {
  flex:0 1 36px;
  min-width:0;
  height:36px;
  border:1px solid #bfb7a8;
  border-radius:4px;
  background:#fffaf0;
  font-family:"Yu Mincho","Noto Serif CJK JP",serif;
  font-size:20px;
  box-shadow:0 2px 0 #dfd7c7;
}
.answer-cell.filled {
  color:#a4372b;
  border-color:#c17b5b;
  background:#fae0cf;
}
.answer.long {
  gap:3px;
}
.answer.long .answer-cell {
  font-size:17px;
}
.answer-cell.empty {
  color:#c7c0b2;
  font:16px sans-serif;
}
.feedback {
  font-size:12px;
  line-height:1.5;
  min-height:36px;
  margin:5px 0 7px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:color .15s;
}
.feedback.bad {
  color:var(--red);
}
.submit,.next,.primary {
  display:block;
  width:100%;
  border-radius:7px;
  min-height:43px;
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  font-size:14px;
  box-shadow:0 3px 0 #152b35;
}
.next {
  background:var(--red);
  box-shadow:0 3px 0 #8c3329;
}
.accept-stamp {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:#fffdf780;
  z-index:3;
}
.accept-stamp span {
  font-family:"Yu Mincho","Noto Serif CJK JP",serif;
  color:var(--red);
  font-size:28px;
  letter-spacing:.14em;
  border:4px double var(--red);
  padding:13px;
  transform:rotate(-12deg);
  border-radius:5px;
  background:#fffdf7f0;
  animation:stamp .42s ease-out;
}
.accepted .glyph.chosen {
  background:#f5c9b0;
}
.accepted .feedback {
  color:var(--red);
  font-weight:700;
}
footer {
  flex:none;
  text-align:center;
  min-height:18px;
}
footer .sn-guide-link {
  font-size:10px;
  padding:0;
  color:#7c8079;
}
#toast {
  position:fixed;
  left:50%;
  top:max(67px,env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-8px);
  padding:9px 16px;
  background:var(--ink);
  color:white;
  font-size:12px;
  border-radius:6px;
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:.18s;
  max-width:calc(100vw - 24px);
  text-align:center;
}
#toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.result-scroll {
  overflow-y:auto;
  flex:1;
  min-height:0;
  padding:4px 1px 15px;
}
.result-card {
  text-align:center;
  padding:24px 18px 21px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 6px 20px #473c2710;
}
.result-mark {
  margin:0 auto 16px;
  border:3px double var(--red);
  color:var(--red);
  width:90px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Yu Mincho","Noto Serif CJK JP",serif;
  font-size:23px;
  line-height:1.2;
  transform:rotate(-9deg);
  border-radius:50%;
}
.result-card h2 {
  font-family:"Yu Mincho","Noto Serif CJK JP",serif;
  font-size:24px;
  margin:12px 0 18px;
}
.result-time {
  font-size:37px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  margin:0 0 12px;
}
.result-time small {
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  margin-bottom:5px;
  color:var(--muted);
}
.result-hint {
  margin:12px 0 0;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
}
.again.reply-again {
  display:block;
  margin:2px auto 0;
}
.result-stats {
  font-size:12px;
  color:var(--muted);
  margin:15px 0 20px;
  letter-spacing:.03em;
}
.result-stats:empty {
  display:none;
}
.result-stats p {
  margin:0;
}
.result-stats b {
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.result-secret {
  display:block;
  margin-top:5px;
  font-size:11px;
  color:var(--red);
  letter-spacing:.08em;
}
.result-card .primary {
  margin-top:12px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.again {
  margin-top:15px;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:12px;
  min-height:32px;
}
.sn-after {
  margin-top:18px;
  background:var(--paper);
  border-radius:6px;
  padding:12px;
}
.sn-after .sn-follow {
  display:none;
}
.shake {
  animation:shake .25s;
}
.letter-grid.refresh {
  animation:reflow .22s ease-out;
}
.accept-stamp.mutual span {
  border-radius:50%;
  width:132px;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.25;
  padding:0;
  font-size:25px;
  letter-spacing:.06em;
}
.result-letters {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:4px 0 0;
}
.env {
  width:36px;
  height:26px;
  fill:#fffaf0;
  stroke:#8d8f86;
  stroke-width:1.5;
  stroke-linejoin:round;
}
.env .heart {
  fill:var(--red);
  stroke:none;
}
.env.mutual {
  stroke:var(--red);
}
.result-mark.mutual {
  font-size:19px;
}
@keyframes stamp {
  0% {
    opacity:0;
    transform:rotate(-16deg) scale(1.8);
  }
  65% {
    opacity:1;
    transform:rotate(-12deg) scale(.97);
  }
  100% {
    transform:rotate(-12deg) scale(1);
  }
}
@keyframes shake {
  25% {
    transform:translateX(-3px);
  }
  75% {
    transform:translateX(3px);
  }
}
@keyframes reflow {
  from {
    opacity:.45;
    transform:translateY(3px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media(max-height:720px) {
  .app {
    padding-top:10px;
    gap:8px;
  }
  .rule {
    margin:6px 0 0;
  }
  :root {
    --inset:12px;
  }
  .heading h1 {
    font-size:23px;
  }
  #main {
    gap:8px;
  }
  .paper {
    padding:9px 11px;
  }
  .paper-stage {
    padding:4px 0;
  }
  .letter-grid {
    --cell:25px;
    --font:17px;
  }
  .letter-grid.small {
    --cell:21px;
    --font:14px;
  }
  .letter-grid.large {
    --cell:27px;
    --font:20px;
  }
  .postscript {
    font-size:10px;
    padding-top:4px;
    line-height:1.5;
  }
  .sender {
    font-size:10px;
    margin-top:2px;
  }
  .letter-top {
    font-size:9px;
    min-height:18px;
    padding-bottom:4px;
  }
  .answer-label {
    margin-bottom:2px;
  }
  .answer {
    min-height:35px;
    padding:2px;
  }
  .answer-cell {
    height:30px;
    flex-basis:32px;
    font-size:18px;
  }
  .feedback {
    min-height:30px;
    margin:2px 0 4px;
    font-size:11px;
  }
  .submit,.next {
    min-height:37px;
  }
  .choice {
    min-height:33px;
  }
  .result-card {
    padding-top:15px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

/* Reactions to a wrong answer: no words, one kind of motion per kind of guess (see react() in main.js). */
.answer.shake, .choice.shake, .edits button.shake {
  animation:shake .25s;
}
.answer-cell.empty.beckon {
  animation:beckon .9s ease-out;
}
@keyframes beckon {
  30% {
    background:#fae0cf;
    border-color:var(--red);
    color:var(--red);
  }
}
.ghost-stamp {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:3;
}
.ghost-stamp i {
  width:136px;
  height:72px;
  border:4px double var(--red);
  opacity:0;
  animation:ghost 1s ease-out forwards;
}
@keyframes ghost {
  0% {
    opacity:0;
    transform:rotate(-12deg) scale(1.5);
  }
  30% {
    opacity:.45;
    transform:rotate(-12deg) scale(1);
  }
  100% {
    opacity:0;
    transform:rotate(-12deg) scale(1);
  }
}
.glyph.chosen.slip-left {
  animation:slip-left .8s ease-in-out;
}
.glyph.chosen.slip-up {
  animation:slip-up .8s ease-in-out;
}
@keyframes slip-left {
  40% {
    transform:translateX(-55%);
  }
}
@keyframes slip-up {
  40% {
    transform:translateY(-55%);
  }
}
.glyph.glint, .sender.glint {
  animation:glint 1.4s ease-out;
}
@keyframes glint {
  25% {
    background:#fae0cf;
    color:#a43428;
  }
}
.answer-cell.filled.ripple {
  animation:ripple .45s ease-out both;
  animation-delay:calc(var(--r, 0) * 110ms);
}
@keyframes ripple {
  40% {
    transform:translateY(-7px);
  }
}
.dot.beckon {
  animation:dot-beckon 1.1s ease-out;
}
@keyframes dot-beckon {
  30% {
    background:var(--red);
    transform:scaleY(2.4);
  }
}
/* 2026-10-16: the counts (「あなたは◯人目のクリア」) are still sent and kept, but not shown. */
.result-stats { display:none; }