:root {
  --ink: #244766;
  --sky: #aee7ff;
  --blue: #77c9f3;
  --yellow: #ffe27a;
  --green: #a7e7a4;
  --pink: #ffc1dc;
  --white: #fffefd;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(#8ddcff 0 63%, #b9ed9a 63% 100%);
}

body::before, body::after {
  position: fixed;
  z-index: -1;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(4rem, 12vw, 9rem);
  content: "☁";
}
body::before { top: 3%; left: 4%; }
body::after { top: 12%; right: 5%; transform: scaleX(-1); }

button {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.app-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(16px, 3vw, 34px);
}

.screen {
  width: min(100%, 1050px);
  min-height: min(690px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 4vw, 48px);
  border: 5px solid rgb(255 255 255 / 72%);
  border-radius: 40px;
  background: rgb(255 255 255 / 91%);
  box-shadow: 0 15px 0 rgb(52 125 151 / 15%);
  overflow: hidden;
}

.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { margin: 0; font-size: clamp(1.2rem, 2.8vw, 1.9rem); font-weight: 900; }
.mascot { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; filter: drop-shadow(0 4px 0 rgb(40 88 112 / 12%)); }

.home-main { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 60px); align-items: center; flex: 1; }
.home-copy h2 { margin: 0; font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: .04em; line-height: 1.1; }
.home-copy p { font-size: clamp(1.1rem, 2.5vw, 1.55rem); font-weight: 700; }
.helper { color: #517389; font-size: .98rem !important; }

.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(125px, 1fr)); gap: 14px; margin: 24px 0; }
.mode-button, .action-button {
  border-radius: 24px;
  font-weight: 900;
  transition: transform .14s ease, box-shadow .14s ease;
}
.mode-button { min-height: 105px; padding: 10px; background: var(--mode-color); box-shadow: 0 6px 0 rgb(44 85 104 / 15%); font-size: clamp(1.15rem, 3vw, 1.6rem); }
.mode-button[data-mode="hiragana"] { --mode-color: #aee7ff; }
.mode-button[data-mode="katakana"] { --mode-color: #ffc1dc; }
.mode-button[data-mode="alphabet"] { --mode-color: #a7e7a4; }
.mode-button[data-mode="numbers"] { --mode-color: #ffe27a; }
.mode-button .mode-icon { display: block; font-size: 2rem; }
.mode-play { display: block; margin-top: 4px; color: #39708f; font-size: .72em; }
.mode-button:hover, .action-button:hover { transform: translateY(-3px); }
.mode-button:focus-visible, .action-button:focus-visible { outline: 4px solid #174d70; outline-offset: 3px; }
.scene-card { display: grid; place-items: center; min-height: 300px; border-radius: 50% 45% 43% 48%; background: linear-gradient(145deg, #d7f7ff, #fef6be); font-size: clamp(7rem, 17vw, 12rem); }

.game-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pill { padding: 8px 15px; border-radius: 999px; background: var(--yellow); font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 900; }
.score { background: var(--pink); }
.game-main { display: flex; flex: 1; align-items: flex-start; justify-content: center; min-height: 0; overflow-y: auto; padding: clamp(12px, 2.5vh, 28px) 4px; text-align: center; }
.question-card { display: flex; width: min(100%, 720px); flex: 0 0 auto; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 18px); padding: clamp(22px, 4vw, 42px); border-radius: 36px; background: #f3fbff; box-shadow: inset 0 0 0 3px #d4effb; }
.question-label { margin: 0; color: #598098; font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 800; }
.question { margin: 0; font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif; font-size: clamp(8rem, 25vw, 14rem); line-height: .95; color: #216a96; text-shadow: 0 6px 0 #c8edff; }
.kana-context { display: grid; justify-items: center; gap: clamp(4px, 1vh, 10px); }
.word-emoji { font-size: clamp(5.5rem, 13vw, 8.5rem); line-height: 1; filter: drop-shadow(0 5px 0 rgb(36 71 102 / 12%)); }
.word { margin: 0; font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 900; letter-spacing: .08em; line-height: 1.1; color: #315f7e; }
.target-kana { display: inline-grid; place-items: center; min-width: 1em; padding: .04em .12em; border-radius: .22em; background: var(--yellow); color: #176b9a; box-shadow: 0 .08em 0 #dfab35; transform: scale(1.13); }
.question.zero-mark, .key.zero-mark { position: relative; font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; }
.question.zero-mark::after, .key.zero-mark::after { position: absolute; pointer-events: none; content: ""; background: #d56d89; transform: rotate(28deg); }
.question.zero-mark::after { top: 11%; left: 48%; width: .075em; height: 78%; border-radius: 999px; }
.prompt { min-height: 2.3em; margin: 0; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 900; }
.key-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.key { min-width: 58px; padding: 12px 16px; border-radius: 14px; background: white; box-shadow: 0 4px 0 #b2cbd8; font-family: ui-monospace, monospace; font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 900; }
.key.zero-mark::after { top: 13%; left: 48%; width: .09em; height: 74%; border-radius: 999px; }
.key.done { background: var(--green); box-shadow: 0 4px 0 #75b475; }
.key.next { background: var(--yellow); outline: 3px solid #e9aa35; animation: bob .8s ease-in-out infinite alternate; }
.status { min-height: 1.9em; margin: 0; color: #527389; font-size: 1.1rem; font-weight: 800; }
.status.success { color: #168643; font-size: 1.35rem; }
.status.mistake { color: #ce5b7f; }

.result-main { display: grid; flex: 1; place-items: center; text-align: center; }
.result-card { width: min(100%, 650px); padding: clamp(25px, 5vw, 55px); border-radius: 38px; background: linear-gradient(135deg, #fff9bf, #ffe0ef); }
.celebration { font-size: clamp(4rem, 10vw, 7rem); letter-spacing: .1em; }
.result-card h2 { margin: 8px 0; font-size: clamp(2.3rem, 6vw, 4.5rem); }
.result-card p { margin: 8px 0 24px; font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; }
.result-score { font-size: clamp(2.5rem, 7vw, 5rem); color: #2f8b55; font-weight: 900; }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.action-button { padding: 15px 24px; background: var(--blue); box-shadow: 0 6px 0 #4e9fc8; color: white; font-size: 1.25rem; }
.action-button.secondary { background: white; box-shadow: 0 6px 0 #c8dbe3; color: var(--ink); }

@keyframes bob { to { transform: translateY(-5px) rotate(2deg); } }

@media (max-width: 650px) {
  .screen { min-height: calc(100vh - 24px); border-radius: 28px; }
  .home-main { grid-template-columns: 1fr; text-align: center; }
  .scene-card { display: none; }
  .mode-button { min-height: 85px; }
}

@media (orientation: landscape) and (max-height: 850px) {
  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding: clamp(10px, 2vh, 18px) clamp(16px, 3vw, 30px);
  }

  .home-screen {
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 2.6vh, 28px) clamp(22px, 3.5vw, 38px);
  }

  .home-screen .masthead { min-height: 0; }
  .home-screen .mascot { font-size: clamp(2.2rem, 5vh, 3.5rem); }
  .home-main { min-height: 0; gap: clamp(18px, 3vw, 40px); }
  .home-copy h2 { font-size: clamp(2.3rem, 5vw, 4rem); white-space: nowrap; }
  .home-copy > p { margin: clamp(4px, 1vh, 8px) 0; }
  .mode-grid { gap: clamp(10px, 1.6vh, 14px); margin: clamp(12px, 2vh, 18px) 0; }
  .mode-button { min-height: clamp(78px, 14vh, 96px); }
  .scene-card { width: min(100%, 280px); min-height: 0; height: clamp(180px, 34vh, 260px); font-size: clamp(5rem, 12vh, 7.5rem); }
}