*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  border-radius: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button {
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}

svg {
  display: block;
  border: 0;
}

::selection {
  background: transparent;
}

::-webkit-scrollbar {
  display: none;
}

:root {
  --tile-size: clamp(64px, min(11vw, 16vh), 132px);
  --tile-gap: calc(var(--tile-size) * 0.22);
}

@keyframes quiz-breathe {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 0 rgba(217, 180, 106, 0);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 30px rgba(217, 180, 106, 0.15);
  }
}
@keyframes quiz-blink {
  0%, 55% {
    opacity: 1;
  }
  56%, 100% {
    opacity: 0;
  }
}
@keyframes quiz-stamp {
  0% {
    transform: scale(0.55);
    filter: brightness(2.2) blur(1px);
  }
  42% {
    transform: scale(1.24);
    filter: brightness(1.6);
  }
  70% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}
@keyframes quiz-shine {
  to {
    transform: translateX(160%);
  }
}
@keyframes quiz-shake {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-7px);
  }
  40%, 60% {
    transform: translateX(7px);
  }
}
@keyframes quiz-break {
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
    filter: blur(5px);
  }
}
@keyframes quiz-nudge {
  40% {
    transform: scale(0.965);
  }
}
@keyframes quiz-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(6px);
  }
  35% {
    opacity: 1;
    transform: scale(1.18);
  }
  55% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes quiz-dot {
  50% {
    box-shadow: 0 0 0 4px rgba(217, 180, 106, 0.18);
  }
}
@keyframes quiz-spin {
  to {
    transform: rotate(1turn);
  }
}
.KanjiQuiz {
  position: fixed;
  inset: 0;
  background: #06080c radial-gradient(130vmax 130vmax at 50% 40%, #11161f 0%, #0a0d13 44%, #06080c 100%);
  color: #ece7da;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", serif;
}
.KanjiQuiz-Layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.KanjiQuiz-Layer[data-layer=back] {
  z-index: 0;
}
.KanjiQuiz-Layer[data-layer=front] {
  z-index: 3;
}
.KanjiQuiz-Stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: grid;
  place-items: center;
  will-change: transform;
}
.KanjiQuiz-Stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46vmin 46vmin at 50% 50%, rgba(217, 180, 106, 0.05), transparent 70%);
}
.KanjiQuiz-Ring {
  grid-area: 1/1;
  place-self: center;
  width: min(68vmin, 580px);
  aspect-ratio: 1;
  opacity: 0.8;
  pointer-events: none;
  animation: quiz-spin 96s linear infinite;
}
.KanjiQuiz-Ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.KanjiQuiz-Vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.13s;
  box-shadow: inset 0 0 18vmax rgba(224, 74, 62, 0.34);
}
.KanjiQuiz-Vignette[data-shown] {
  opacity: 1;
}
.KanjiQuiz-Grain {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.KanjiQuiz-Ime {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  z-index: 1;
  opacity: 0.01;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
}

.QuizBoard {
  position: relative;
  grid-area: 1/1;
  place-self: center;
  display: grid;
  grid-template-columns: repeat(3, var(--tile-size));
  grid-template-rows: repeat(3, var(--tile-size));
  gap: var(--tile-gap);
  transform-style: preserve-3d;
  will-change: transform;
}
.QuizBoard-Line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  transition: opacity 0.35s;
}
.QuizBoard-Line[data-hidden] {
  opacity: 0;
}
.QuizBoard-Line line {
  stroke: rgba(236, 231, 218, 0.13);
  stroke-width: 1.3;
  stroke-linecap: round;
  transition: stroke 0.25s, filter 0.25s;
}
.QuizBoard-Line line[data-lit] {
  stroke: #e2c07a;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(226, 192, 122, 0.85));
}
.QuizBoard-Tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(236, 231, 218, 0.14);
  border-radius: calc(var(--tile-size) * 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translate(var(--enter-x, 0), var(--enter-y, 10px)) scale(0.92);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.9, 0.32, 1.25), border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.QuizBoard-Tile[data-phase=in] {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.QuizBoard-Tile[data-phase=out] {
  opacity: 0;
  transform: translate(0, -10px) scale(0.95);
  transition-duration: 0.3s, 0.35s;
}
.QuizBoard-Tile[data-side=north] {
  grid-area: 1/2;
  --enter-y: -18px;
}
.QuizBoard-Tile[data-side=west] {
  grid-area: 2/1;
  --enter-x: -18px;
  --enter-y: 0;
}
.QuizBoard-Tile[data-side=center] {
  grid-area: 2/2;
  --enter-x: 0;
  --enter-y: 0;
  overflow: hidden;
  border-color: rgba(217, 180, 106, 0.34);
  animation: quiz-breathe 2.7s ease-in-out infinite;
}
.QuizBoard-Tile[data-side=center]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 244, 214, 0.34) 50%, transparent 68%);
  transform: translateX(-160%);
}
.QuizBoard-Tile[data-side=center][data-stamp]::after {
  animation: quiz-shine 0.7s 0.06s ease forwards;
}
.QuizBoard-Tile[data-side=east] {
  grid-area: 2/3;
  --enter-x: 18px;
  --enter-y: 0;
}
.QuizBoard-Tile[data-side=south] {
  grid-area: 3/2;
  --enter-y: 18px;
}
.QuizBoard-Tile[data-lit] {
  border-color: rgba(217, 180, 106, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 24px rgba(217, 180, 106, 0.18);
}
.QuizBoard-Tile[data-locked] {
  animation: none;
}
.QuizBoard-Tile[data-nudge] {
  animation: quiz-breathe 2.7s ease-in-out infinite, quiz-nudge 0.32s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.QuizBoard-Tile[data-error] {
  animation: quiz-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: #e0453a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 26px rgba(224, 69, 62, 0.22);
}
.QuizBoard-Tile[data-stamp] {
  animation: none;
  border-color: rgba(217, 180, 106, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 44px rgba(217, 180, 106, 0.3), inset 0 0 26px rgba(217, 180, 106, 0.1);
}
.QuizBoard-Letter {
  color: #ece7da;
  font-size: calc(var(--tile-size) * 0.55);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  font-feature-settings: "palt";
  transition: color 0.3s, text-shadow 0.3s;
}
.QuizBoard-Tile[data-lit] .QuizBoard-Letter {
  color: #f2d9a0;
  text-shadow: 0 0 16px rgba(242, 217, 160, 0.4);
}
.QuizBoard-Entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 92%;
  overflow: hidden;
}
.QuizBoard-Input {
  font-size: calc(var(--tile-size) * 0.55);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.25s;
}
.QuizBoard-Input[data-composing] {
  opacity: 0.62;
  border-bottom: 2px dashed rgba(217, 180, 106, 0.6);
  padding-bottom: 2px;
}
.QuizBoard-Input[data-broken] {
  animation: quiz-break 0.34s ease-in forwards;
}
.QuizBoard-Input[data-revealed] {
  color: #8f8a7d;
}
.QuizBoard-Caret {
  width: 2px;
  height: calc(var(--tile-size) * 0.5);
  border-radius: 1px;
  background: #d9b46a;
  animation: quiz-blink 1.1s steps(1) infinite;
}
.QuizBoard-Tile[data-locked] .QuizBoard-Caret {
  display: none;
}
.QuizBoard-Tile[data-stamp] .QuizBoard-Input {
  color: #f2d9a0;
  text-shadow: 0 0 26px rgba(242, 217, 160, 0.55);
  animation: quiz-stamp 0.55s cubic-bezier(0.2, 1.5, 0.3, 1) both;
}
.QuizBoard-Tile[data-error] .QuizBoard-Input {
  color: #f0917f;
}
.QuizBoard-Corner {
  position: absolute;
  inset: 9%;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.35s;
  --corner-length: calc(var(--tile-size) * 0.13);
  --corner-width: 1.5px;
  --corner-color: rgba(217, 180, 106, 0.72);
  background: linear-gradient(var(--corner-color), var(--corner-color)) left top, linear-gradient(var(--corner-color), var(--corner-color)) left top, linear-gradient(var(--corner-color), var(--corner-color)) right top, linear-gradient(var(--corner-color), var(--corner-color)) right top, linear-gradient(var(--corner-color), var(--corner-color)) left bottom, linear-gradient(var(--corner-color), var(--corner-color)) left bottom, linear-gradient(var(--corner-color), var(--corner-color)) right bottom, linear-gradient(var(--corner-color), var(--corner-color)) right bottom;
  background-repeat: no-repeat;
  background-size: var(--corner-length) var(--corner-width), var(--corner-width) var(--corner-length), var(--corner-length) var(--corner-width), var(--corner-width) var(--corner-length), var(--corner-length) var(--corner-width), var(--corner-width) var(--corner-length), var(--corner-length) var(--corner-width), var(--corner-width) var(--corner-length);
}
.QuizBoard-Tile[data-locked] .QuizBoard-Corner {
  opacity: 0.22;
}
.QuizBoard-Reading {
  position: absolute;
  z-index: 2;
  font-size: clamp(10px, 1.9vmin, 13px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #d9b46a;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s, transform 0.45s;
}
.QuizBoard-Reading[data-shown] {
  opacity: 0.95;
  transform: translateY(0);
}
.QuizBoard-Reading[data-side=north] {
  top: -30px;
  left: 0;
  right: 0;
  text-align: center;
}
.QuizBoard-Reading[data-side=south] {
  bottom: -30px;
  left: 0;
  right: 0;
  text-align: center;
}
.QuizBoard-Reading[data-side=west] {
  top: calc(var(--tile-size) * 2 + var(--tile-gap) + 7px);
  left: 0;
  width: var(--tile-size);
  text-align: center;
}
.QuizBoard-Reading[data-side=east] {
  top: calc(var(--tile-size) * 2 + var(--tile-gap) + 7px);
  right: 0;
  width: var(--tile-size);
  text-align: center;
}
.QuizBoard-Combo {
  position: absolute;
  top: calc(var(--tile-size) * -0.78);
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: clamp(18px, 4vmin, 27px);
  letter-spacing: 0.08em;
  color: #f2d9a0;
  text-shadow: 0 0 18px rgba(242, 217, 160, 0.45);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.QuizBoard-Combo[data-shown] {
  animation: quiz-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.Logo {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
}
.Logo a {
  color: #ece7da;
  font-family: "Rubik Iso", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDGothic", meiryo, sans-serif;
  font-size: 22px;
  line-height: 2;
  text-decoration: none;
  transition: color 0.25s;
}
.Logo a:hover {
  color: #f2d9a0;
}

.QuizDots {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  pointer-events: none;
  transition: opacity 0.4s;
}
.QuizDots-Dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(236, 231, 218, 0.16);
  transition: background 0.3s, box-shadow 0.3s;
}
.QuizDots-Dot[data-state=current] {
  background: rgba(217, 180, 106, 0.7);
  animation: quiz-dot 1.6s ease-in-out infinite;
}
.QuizDots-Dot[data-state=correct] {
  background: #d9b46a;
}
.QuizDots-Dot[data-state=skipped] {
  background: rgba(216, 80, 60, 0.55);
}

.PanelControl {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  padding: 0 28px;
}
.PanelControl-Icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 44px;
  color: #8f8a7d;
  cursor: pointer;
  transition: color 0.25s, transform 0.15s;
}
.PanelControl-Icon:hover {
  color: #f2d9a0;
}
.PanelControl-Icon:active {
  transform: scale(0.94);
}
.PanelControl-Icon:focus-visible {
  outline: 2px solid #d9b46a;
  outline-offset: 2px;
}
.PanelControl-Icon[data-open] {
  color: #f2d9a0;
}
.PanelControl-Icon [data-icon=sound-off] {
  display: none;
}
.PanelControl-Icon[data-muted] [data-icon=sound-on] {
  display: none;
}
.PanelControl-Icon[data-muted] [data-icon=sound-off] {
  display: block;
}

.QuizIcon {
  width: 16px;
  height: 16px;
}

.Panel {
  position: fixed;
  right: 0;
  top: 56px;
  z-index: 28;
  width: 240px;
  padding: 20px 28px 24px;
  background: rgba(10, 13, 19, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateX(100%);
  transition: transform 0.24s ease-out;
}
.Panel[data-open] {
  transform: translateX(0);
}
.Panel-Title {
  margin-bottom: 12px;
  color: #f2d9a0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.Panel-Text {
  color: #8f8a7d;
  font-size: 13px;
  line-height: 1.9;
}
.Panel-Text + .Panel-Text {
  margin-top: 10px;
}

.KanjiQuiz[data-done] .QuizDots,
.KanjiQuiz[data-done] .PanelControl-Icon[data-action=skip] {
  opacity: 0;
  pointer-events: none;
}

.QuizResult {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
.QuizResult[data-shown] {
  opacity: 1;
  pointer-events: auto;
}
.QuizResult-Box {
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.QuizResult[data-shown] .QuizResult-Box {
  transform: translateY(0) scale(1);
}
.QuizResult-Score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}
.QuizResult-Solved {
  font-size: clamp(64px, 16vmin, 140px);
  color: #f2d9a0;
  text-shadow: 0 0 44px rgba(217, 180, 106, 0.28);
}
.QuizResult-Total {
  font-size: clamp(23px, 5.8vmin, 50px);
  color: #8f8a7d;
  margin-left: 0.1em;
}
.QuizResult-Stats {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  margin: 28px 0 36px;
  color: #8f8a7d;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.QuizResult-Stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.QuizResult-Stat .QuizIcon {
  width: 16px;
  height: 16px;
}
.QuizResult-Replay {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  color: #d9b46a;
  cursor: pointer;
  transition: color 0.25s, transform 0.15s;
}
.QuizResult-Replay:hover {
  color: #f2d9a0;
}
.QuizResult-Replay:active {
  transform: scale(0.94);
}
.QuizResult-Replay:focus-visible {
  outline: 2px solid #d9b46a;
  outline-offset: 2px;
}
.QuizResult-Replay .QuizIcon {
  width: 26px;
  height: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .KanjiQuiz-Ring {
    animation: none;
  }
  .QuizBoard-Tile[data-side=center] {
    animation: none;
  }
  .QuizBoard-Tile[data-nudge] {
    animation: none;
  }
}