:root {
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: #33302d;
  background: #fff7df;
  font-synthesis: none;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #fff7df; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 85% 10%, #ffd87a 0 8px, transparent 9px),
    linear-gradient(160deg, #fffaf0, #ffedbd);
}

button, input, select { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; min-height: 100dvh; }
.games-back-link { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); padding: 9px 13px; border: 2px solid #c8b99e; border-radius: 99px; color: #5f5146; background: rgba(255,255,255,.9); font-size: .8rem; font-weight: 900; text-decoration: none; }
.games-back-link:focus-visible { outline: 5px solid #246bce; outline-offset: 3px; }
.screen {
  width: min(100%, 920px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(28px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}
.home-screen, .result-screen { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.corner-voice { position: absolute; top: 12px; right: 16px; display: flex; align-items: center; gap: 5px; color: #86796b; font-size: .68rem; opacity: .72; }
.corner-voice select { max-width: 132px; min-height: 34px; padding: 3px 5px; border: 1px solid #cbbda5; border-radius: 8px; color: #655a50; background: rgba(255,255,255,.7); font-size: 16px; }
.corner-voice:focus-within, .corner-voice:hover { opacity: 1; }
.brand-mark {
  position: relative;
  width: 116px;
  height: 124px;
  margin-top: 10px;
  border: 5px solid #812d21;
  border-radius: 54px 54px 22px 22px;
  background: #e84e36;
  box-shadow: 0 8px 0 #bd3526;
}
.brand-mark::after { content: ""; position: absolute; inset: auto 19px 15px; height: 34px; border-radius: 8px; background: #fff4d2; }
.post-slot { position: absolute; top: 32px; left: 19px; width: 68px; height: 11px; border-radius: 9px; background: #64291f; }
.post-label { position: absolute; z-index: 1; inset: auto 0 19px; color: #e84e36; font-size: 1.5rem; font-weight: 900; }
.eyebrow { margin: 24px 0 4px; color: #9a4c14; font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; }
h1, h2 { margin: 0; color: #47352c; line-height: 1.2; }
h1 { font-size: clamp(2.55rem, 10vw, 5rem); letter-spacing: .03em; }
.home-copy { margin: 14px 0 22px; font-size: clamp(1.05rem, 3.8vw, 1.35rem); font-weight: 700; line-height: 1.75; }

.row-picker { width: 100%; margin: 0 0 24px; padding: 0; border: 0; }
.row-picker legend { margin: 0 auto 10px; font-weight: 800; }
.row-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.row-button { min-height: 52px; min-width: 0; border: 3px solid #d7c8a7; border-radius: 15px; color: #51443b; background: rgba(255,255,255,.78); font-weight: 900; cursor: pointer; }
.row-button.selected { border-color: #347ac8; color: #174f8d; background: #e8f3ff; box-shadow: 0 4px 0 #a8ccef; transform: translateY(-2px); }

.level-picker { width: 100%; margin: 0 0 24px; padding: 0; border: 0; }
.level-picker legend { margin: 0 auto 12px; font-weight: 800; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.level-card { position: relative; display: grid; place-items: center; gap: 2px; min-height: 132px; padding: 13px 7px; border: 3px solid #d7c8a7; border-radius: 22px; background: rgba(255,255,255,.8); cursor: pointer; font-size: 1.05rem; font-weight: 900; }
.level-card.selected-level { border-color: #e84e36; background: #fff; box-shadow: 0 5px 0 #f5b09f; transform: translateY(-3px); }
.level-card input { position: absolute; opacity: 0; }
.level-card:focus-within { outline: 5px solid #246bce; outline-offset: 3px; }
.level-icon { font-size: 2.4rem; }
.level-card small { color: #6d6257; font-size: .76rem; }

.primary-button { min-width: 220px; min-height: 67px; padding: 12px 34px; border: 4px solid #812d21; border-radius: 999px; color: white; background: #e84e36; box-shadow: 0 7px 0 #bd3526; font-size: 1.35rem; font-weight: 900; cursor: pointer; }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #bd3526; }
.parent-note { margin: 22px 0 0; color: #71665b; font-size: .8rem; }

.game-header { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 16px; }
.icon-button { width: 56px; height: 56px; border: 3px solid #b6a78c; border-radius: 50%; background: white; color: #55483e; font-size: 1.8rem; cursor: pointer; }
.progress-wrap p { margin: 0 0 5px; font-weight: 900; }
.progress-track { height: 15px; overflow: hidden; border: 2px solid #9b8a70; border-radius: 99px; background: white; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #f2bd3e; transition: width .3s ease; }
.level-badge { padding: 9px 12px; border-radius: 99px; background: white; font-weight: 900; }
.prompt-area { margin: clamp(38px, 8vh, 80px) auto 30px; text-align: center; }
.instruction { margin: 0 0 16px; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; }
.word-picture { display: grid; grid-template-columns: 116px auto; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 17px; }
.word-picture > span { display: grid; place-items: center; width: 116px; height: 116px; border: 4px solid #d7c8a7; border-radius: 25px; background: white; font-size: 4.8rem; }
.word-picture figcaption { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 900; }
.sound-button { display: inline-flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 24px; border: 4px solid #22599b; border-radius: 20px; color: white; background: #347ac8; box-shadow: 0 6px 0 #22599b; font-weight: 900; cursor: pointer; }
.sound-button span:first-child { font-size: 2rem; }
.model-kana { margin: 24px auto -7px; width: 104px; height: 104px; border: 4px dashed #e84e36; border-radius: 22px; background: white; color: #44342d; font-size: 4.5rem; font-weight: 800; line-height: 96px; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 3vw, 22px); width: 100%; }
.letter-card { width: clamp(88px, 17vw, 128px); height: clamp(100px, 20vw, 142px); border: 4px solid #ac9778; border-radius: 22px; color: #40342d; background: white; box-shadow: 0 7px 0 #d8c29c; font-size: clamp(3.3rem, 8vw, 5.7rem); font-weight: 700; cursor: pointer; }
.letter-card:not(:disabled):hover { border-color: #e84e36; transform: translateY(-3px); }
.letter-card.correct { border-color: #268c61; background: #dff6e8; box-shadow: 0 7px 0 #83caa5; }
.letter-card.try-again { opacity: .36; box-shadow: none; transform: translateY(7px); }
.delivery-zone { display: grid; justify-items: center; margin: 32px auto 0; }
.delivery-zone p { margin: 7px 0 0; color: #79513f; font-size: .86rem; font-weight: 800; }
.game-post { position: relative; width: 104px; height: 112px; border: 4px solid #812d21; border-radius: 45px 45px 18px 18px; background: #e84e36; box-shadow: 0 7px 0 #bd3526; transform-origin: bottom center; }
.game-post-slot { position: absolute; top: 28px; left: 17px; width: 62px; height: 10px; border-radius: 9px; background: #64291f; }
.game-post-mark { position: absolute; inset: auto 0 18px; color: #fff3d0; font-size: 1.8rem; font-weight: 900; text-align: center; }
.post-count { position: absolute; top: -13px; right: -15px; display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid #6d5310; border-radius: 50%; color: #5d4609; background: #ffd55f; font-weight: 900; }
.post-bump { animation: post-bump .28s ease; }
.flying-letter { position: fixed; z-index: 50; display: grid; place-items: center; width: 68px; height: 50px; border: 3px solid #a8875d; border-radius: 7px; color: #43362e; background: #fffdf5; box-shadow: 0 4px 8px rgba(76,50,31,.18); font-size: 2.2rem; font-weight: 900; pointer-events: none; }
.flying-letter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 49%, #dbc7a6 50% 52%, transparent 53%); opacity: .7; }
.feedback { min-height: 2em; margin: 25px 0 0; text-align: center; color: #704211; font-size: 1.25rem; font-weight: 900; }

@keyframes post-bump {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-3deg) scale(1.06); }
  70% { transform: rotate(3deg) scale(.98); }
}

.result-screen { justify-content: center; }
.result-icon { font-size: 6rem; }
.result-screen h2 { font-size: clamp(2.3rem, 8vw, 4.5rem); }
.result-message { margin: 20px 0 12px; font-size: 1.25rem; font-weight: 800; }
.result-stamps { display: flex; gap: 10px; margin: 8px 0 32px; }
.stamp { display: grid; place-items: center; width: 48px; height: 48px; border: 3px dashed #c8b99e; border-radius: 50%; color: #c8b99e; font-weight: 900; }
.stamp.earned { border-style: solid; border-color: #e84e36; color: #e84e36; background: white; }
.text-button { margin-top: 23px; padding: 12px; border: 0; color: #5f5146; background: transparent; font-weight: 800; text-decoration: underline; cursor: pointer; }

button:focus-visible { outline: 5px solid #246bce; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 620px) {
  .screen {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(26px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .brand-mark { width: 92px; height: 99px; margin-top: 32px; border-width: 4px; border-radius: 44px 44px 18px 18px; }
  .brand-mark::after { inset: auto 15px 12px; height: 28px; }
  .post-slot { top: 25px; left: 15px; width: 55px; height: 9px; }
  .post-label { inset-block-end: 14px; font-size: 1.25rem; }
  .eyebrow { margin-top: 17px; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .home-copy { margin-block: 10px 17px; line-height: 1.55; }
  .row-picker { margin-bottom: 19px; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .level-card { min-height: 114px; }
  .row-grid { grid-template-columns: repeat(2, 1fr); }
  .row-button { min-height: 50px; }
  .game-header { grid-template-columns: 54px 1fr; }
  .level-badge { grid-column: 1 / -1; justify-self: center; }
  .prompt-area { margin-top: 28px; }
  .word-picture { grid-template-columns: 94px auto; }
  .word-picture > span { width: 94px; height: 94px; font-size: 4rem; }
  .sound-button { min-height: 60px; padding: 9px 18px; }
  .letter-card { flex: 0 1 calc(33.333% - 12px); min-width: 84px; max-width: 112px; height: clamp(96px, 28vw, 122px); font-size: clamp(3.2rem, 15vw, 4.8rem); }
  .delivery-zone { margin-top: 25px; }
  .game-post { width: 90px; height: 98px; }
  .game-post-slot { top: 24px; left: 14px; width: 55px; }
  .feedback { margin-top: 20px; }
}

@media (min-width: 621px) and (max-width: 1024px) {
  .screen { width: min(100%, 860px); }
  .row-grid { grid-template-columns: repeat(5, minmax(92px, 1fr)); }
  .level-card { min-height: 124px; }
}

@media (min-width: 900px) and (min-height: 720px) {
  .game-screen { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(440px, 1.2fr); grid-template-areas: "header header" "prompt choices" "prompt delivery" "feedback feedback"; column-gap: 44px; align-content: start; }
  .game-header { grid-area: header; }
  .prompt-area { grid-area: prompt; position: sticky; top: 30px; margin-top: 70px; }
  .choices { grid-area: choices; align-self: end; margin-top: 75px; }
  .delivery-zone { grid-area: delivery; margin-top: 35px; }
  .feedback { grid-area: feedback; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .home-screen { padding-top: max(12px, env(safe-area-inset-top)); }
  .brand-mark { display: none; }
  .eyebrow { margin-top: 4px; }
  h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
  .home-copy { margin-block: 6px 12px; line-height: 1.35; }
  .row-picker, .level-picker { margin-bottom: 13px; }
  .row-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .row-button { min-height: 42px; border-width: 2px; }
  .level-card { min-height: 78px; grid-template-columns: auto 1fr; gap: 4px 7px; padding: 7px; }
  .level-icon { grid-row: 1 / 3; font-size: 2rem; }
  .level-card small { grid-column: 2; }
  .game-screen { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(390px, 1.3fr); grid-template-areas: "header header" "prompt choices" "prompt delivery" "feedback feedback"; gap: 10px 24px; align-content: start; }
  .game-header { grid-area: header; }
  .prompt-area { grid-area: prompt; margin: 15px 0 0; }
  .instruction { margin-bottom: 8px; font-size: 1.25rem; }
  .word-picture { grid-template-columns: 76px auto; margin-bottom: 8px; }
  .word-picture > span { width: 76px; height: 76px; font-size: 3.2rem; }
  .sound-button { min-height: 50px; padding: 6px 12px; }
  .model-kana { width: 72px; height: 72px; margin-top: 10px; font-size: 3rem; line-height: 66px; }
  .choices { grid-area: choices; align-self: end; margin-top: 15px; gap: 9px; }
  .letter-card { width: 82px; height: 88px; font-size: 3.4rem; }
  .delivery-zone { grid-area: delivery; margin: 8px 0 0; }
  .delivery-zone p { display: none; }
  .game-post { width: 72px; height: 76px; border-radius: 31px 31px 13px 13px; }
  .game-post-slot { top: 18px; left: 12px; width: 43px; height: 8px; }
  .game-post-mark { inset-block-end: 10px; font-size: 1.3rem; }
  .feedback { grid-area: feedback; margin-top: 3px; }
}

@media (hover: none) and (pointer: coarse) {
  .letter-card:not(:disabled):hover { border-color: #ac9778; transform: none; }
  .corner-voice { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}