:root {
  color-scheme: light;
  --ink: #645449;
  --muted: #8b7969;
  --paper: #fffaf2;
  --pink: #f3a5ae;
  --mint: #acdace;
  --yellow: #f7d980;
  --purple: #c7b0e2;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: var(--paper); color: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; }
button, a { touch-action: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
button, a { -webkit-touch-callout: none; }
button:focus-visible, a:focus-visible { outline: 4px solid #7870b1; outline-offset: 5px; }
h1, h2, p { margin: 0; }
.app { height: 100vh; height: 100dvh; max-width: 1200px; margin: auto; padding: max(14px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; }
.topbar { flex: 0 0 94px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 19px; letter-spacing: .05em; }
.utility-button { flex: 0 0 94px; width: 94px; height: 94px; border-radius: 28px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; background: #fff; border: 2px solid #eee4d6; box-shadow: 0 4px 0 #eee4d6; font-size: 14px; transition: transform .18s, background .18s; }
.utility-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #eee4d6; }
.sound-button[aria-pressed="true"] { background: #f2efeb; }
.menu-main { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(130px, .55fr) minmax(300px, 1.5fr); gap: 20px; }
.welcome { position: relative; display: grid; place-items: center; }
.title-art { position: absolute; width: min(100%, 870px); height: 100%; max-height: 235px; inset: 0; margin: auto; }
.welcome-copy { position: relative; text-align: center; padding: 18px 0; }
.welcome-copy > p:first-child { font-size: 19px; color: #aa7864; margin-bottom: 12px; letter-spacing: .12em; }
.welcome h1 { font-size: clamp(30px, 3.5vw, 44px); letter-spacing: .08em; font-weight: 800; }
.welcome-note { font-size: 16px; color: var(--muted); margin-top: 17px; letter-spacing: .04em; }
.game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 7px; }
.game-card { min-height: 90px; min-width: 0; display: flex; flex-direction: row; align-items: center; border: 3px solid #fff; border-radius: 32px; position: relative; box-shadow: 0 7px 0 var(--card-shadow); transition: transform .2s; }
.game-card:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--card-shadow); }
.balloon-card { background: #fbe3e5; --card-shadow: #eed0d0; }
.animal-card { background: #e1f1e7; --card-shadow: #cbded2; }
.color-card { background: #fff0cc; --card-shadow: #ebdcb8; }
.kana-card { background: #eee6f8; --card-shadow: #dcd0eb; }
.card-picture { flex: 0 0 45%; height: 100%; min-height: 0; padding: 8px 12px; display: grid; place-items: center; }
.card-picture img { width: 100%; height: 100%; max-height: 265px; }
.card-copy { flex: 1; min-width: 0; padding: 10px 14px 36px 0; position: relative; }
.card-copy h2 { font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: .015em; }
.card-copy p { margin-top: 8px; color: #887266; font-size: 14px; }
.play-arrow { position: absolute; right: 16px; bottom: -6px; width: 36px; height: 36px; background: #ffffffa6; border-radius: 50%; display: grid; place-items: center; font: 32px/1 sans-serif; color: #9f8876; }
.page-footer { flex: 0 0 35px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; color: var(--muted); letter-spacing: .06em; }
.game-heading { text-align: center; min-width: 0; }
.game-heading h1 { font-size: 30px; letter-spacing: .06em; }
.game-heading p { font-size: 15px; color: var(--muted); margin-top: 9px; }
.game-stage { flex: 1; min-height: 0; border-radius: 36px; border: 3px solid #fff; box-shadow: 0 5px 0 #ede6dc; position: relative; isolation: isolate; }
.balloon-stage { background: #eaf5f3; overflow: hidden; }
.sky-cloud { position: absolute; width: 160px; height: 50px; border-radius: 100px; background: #ffffffa6; pointer-events: none; }
.sky-cloud::before, .sky-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; width: 70px; height: 70px; top: -27px; left: 25px; }
.sky-cloud::after { width: 85px; height: 85px; left: 63px; top: -38px; }
.cloud-one { top: 17%; left: 7%; }
.cloud-two { top: 37%; right: 7%; transform: scale(.7); opacity: .65; }
.balloon-floor { position: absolute; bottom: 0; width: 100%; height: 54px; background: #d5e9d8; border-radius: 50% 60% 0 0; display: flex; justify-content: space-around; align-items: center; pointer-events: none; }
.balloon-floor img { width: 29px; height: 29px; opacity: .7; }
.balloons { position: absolute; inset: 0; }
.balloon { position: absolute; top: 0; left: 0; width: 128px; height: 176px; background: transparent; padding: 0; will-change: transform; }
.balloon img { width: 100%; height: 100%; filter: drop-shadow(0 5px 1px #4961530c); }
.balloon:active img { scale: .95; }
.effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; border-radius: inherit; }
.sparkle { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); animation: sparkle .7s ease-out forwards; }
@keyframes sparkle { from { opacity: 1; transform: translate(-50%, -50%) scale(.5) rotate(0deg); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(65deg); } }
.animal-stage { background: #edf4e9; display: flex; flex-direction: column; align-items: center; padding: 20px 32px 28px; gap: 10px; }
.animal-question { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; width: 100%; }
.animal-halo { min-height: 0; width: 270px; max-width: 75%; aspect-ratio: 1; border-radius: 50%; background: #ffffff8f; display: grid; place-items: center; }
.animal-halo img { width: 96%; height: 96%; min-height: 0; }
.animal-question h2, .fruit-question h2 { font-size: 27px; flex-shrink: 0; letter-spacing: .08em; }
.round-message { flex: 0 0 32px; min-height: 32px; font-size: 16px; line-height: 32px; color: #8b7766; text-align: center; }
.round-message.is-happy { color: #aa7351; font-size: 22px; }
.animal-choices { width: min(100%, 720px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; flex: 0 0 auto; }
.animal-choice { min-width: 90px; height: 160px; padding: 8px; background: #fffdf8; border: 3px solid #fff; border-radius: 27px; box-shadow: 0 5px 0 #d5e1ce; }
.animal-choice img { width: 100%; height: 100%; }
.animal-choice.is-correct { background: #fef0c8; box-shadow: 0 5px 0 #e7d8ad; }
.wiggle { animation: wiggle .38s ease-in-out; }
@keyframes wiggle { 0%, 100% { translate: 0; } 25% { translate: -6px 0; rotate: -3deg; } 65% { translate: 6px 0; rotate: 3deg; } }
.happy { animation: happy .5s ease-out; }
@keyframes happy { 0%, 100% { scale: 1; } 45% { scale: 1.07; } }
.color-stage { background: #fcf1df; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 24px 28px; }
.fruit-question { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fruit-slot { width: 190px; height: 190px; max-height: calc(100% - 40px); min-height: 90px; border: 2px dashed #ddc9a8; background: #fffaf2a6; border-radius: 50%; display: grid; place-items: center; }
.fruit { width: 170px; height: 170px; min-width: 90px; min-height: 90px; max-height: 100%; max-width: 100%; padding: 7px; border-radius: 50%; background: transparent; position: relative; z-index: 12; cursor: grab; transition: transform .3s ease, opacity .2s; }
.fruit img { height: 100%; width: 100%; }
.fruit[aria-pressed="true"] { background: #ffffffb3; outline: 3px solid #bfa3d8; outline-offset: 3px; }
.fruit.is-dragging { cursor: grabbing; transition: none; }
.fruit.is-delivered { opacity: .1; }
.baskets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(100%, 890px); flex: 0 0 auto; }
.basket { min-width: 90px; height: 172px; background: #ffffff85; padding: 7px 8px 9px; border: 3px solid #fffdf7; border-radius: 27px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 5px 0 #e8dcc6; transition: background .2s; }
.basket img { width: 100%; height: calc(100% - 32px); }
.basket span { font-size: 20px; line-height: 32px; }
.basket.is-over { outline: 4px solid #b49bc7; outline-offset: 3px; background: #fff; }
.basket.is-correct { background: #fff; }
.kana-stage { background: #f0eaf7; display: flex; flex-direction: column; align-items: center; padding: 18px 24px; gap: 12px; }
.kana-modes { width: min(100%, 460px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 0 0 90px; }
.kana-mode { height: 90px; border-radius: 24px; border: 3px solid #fff; background: #ffffff70; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; }
.kana-mode[aria-pressed="true"] { background: #fff5d9; border-color: #e5c46d; box-shadow: 0 3px 0 #dfd0a4; }
.kana-panel { flex: 1; min-height: 0; width: min(100%, 760px); display: flex; flex-direction: column; gap: 12px; }
.kana-panel[hidden] { display: none; }
.kana-look-card { flex: 1; min-height: 0; width: 100%; background: #fffdf8; border: 3px solid #fff; border-radius: 30px; padding: 12px 24px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 38px; column-gap: 20px; align-items: center; justify-items: center; }
.kana-letter { font-size: 180px; line-height: 1.2; font-weight: 700; color: #81669f; }
.kana-look-card .kana-letter { grid-row: 1 / 3; }
.kana-picture { width: 100%; height: 100%; min-height: 0; max-width: 240px; }
.kana-word { font-size: 30px; line-height: 38px; letter-spacing: .08em; }
.kana-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 94px; }
.kana-arrow { width: 94px; height: 94px; flex: 0 0 94px; border-radius: 26px; border: 3px solid #fff; background: #fffaf2; box-shadow: 0 4px 0 #dcd0eb; display: grid; place-items: center; }
.kana-arrow span { font: 74px/.9 sans-serif; padding-bottom: 8px; }
.kana-family { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 24px; color: #93829d; }
.kana-family .is-current { color: #735b50; border-bottom: 3px solid #c7b0e2; }
.kana-question { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fffdf8; border: 3px solid #fff; border-radius: 30px; padding: 8px; }
.kana-listen { font-size: 15px; color: var(--muted); }
.kana-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: 0 0 124px; }
.kana-choice { min-width: 90px; height: 124px; background: #fffdf8; border: 3px solid #fff; border-radius: 26px; box-shadow: 0 5px 0 #dcd0eb; font-size: 72px; line-height: 1.2; padding: 0; }
.kana-choice.is-correct { background: #fff0c8; box-shadow: 0 5px 0 #e7d8ad; }
.kana-arrow:active, .kana-mode:active { transform: translateY(3px); }
.kana-look-card:active { background: #fff5e8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) {
  .game-card:hover { transform: translateY(-4px); }
  .utility-button:hover, .animal-choice:hover, .basket:hover { background-color: #fff; }
}
@media (max-width: 650px) {
  .app { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 14px; }
  .topbar { flex-basis: 94px; gap: 8px; }
  .brand { font-size: 16px; gap: 8px; letter-spacing: 0; }
  .brand img { width: 33px; height: 33px; }
  .utility-button { border-radius: 25px; }
  .menu-main { grid-template-rows: minmax(115px, .45fr) minmax(320px, 1.65fr); gap: 12px; }
  .title-art { width: 100%; }
  .welcome-copy { padding: 0; }
  .welcome-copy > p:first-child { font-size: 15px; margin-bottom: 7px; }
  .welcome h1 { font-size: 28px; letter-spacing: .03em; }
  .welcome-note { font-size: 13px; margin-top: 10px; }
  .game-cards { gap: 14px; }
  .game-card { flex-direction: column; border-radius: 25px; }
  .card-picture { flex: 1; width: 100%; height: auto; padding: 6px 8px 0; }
  .card-picture img { height: 100%; }
  .card-copy { flex: 0 0 78px; width: 100%; padding: 8px 5px 22px; text-align: center; }
  .card-copy h2 { font-size: 18px; letter-spacing: -.04em; white-space: nowrap; }
  .card-copy p { font-size: 11px; margin-top: 5px; }
  .play-arrow { right: 8px; bottom: 5px; width: 22px; height: 22px; font-size: 22px; }
  .page-footer { flex-basis: 28px; font-size: 12px; }
  .game-heading h1 { font-size: 20px; letter-spacing: -.025em; }
  .game-heading p { font-size: 11px; line-height: 1.6; margin-top: 6px; }
  .game-stage { border-radius: 30px; }
  .balloon { width: 110px; height: 154px; }
  .cloud-one { left: -20px; }
  .cloud-two { right: -32px; }
  .animal-stage { padding: 20px 12px 25px; gap: 15px; }
  .animal-halo { width: 255px; }
  .animal-question h2, .fruit-question h2 { font-size: 26px; }
  .animal-choices { gap: 10px; }
  .animal-choice { height: 124px; border-radius: 23px; padding: 3px; }
  .round-message { font-size: 14px; }
  .color-stage { padding: 14px 16px 20px; gap: 10px; }
  .fruit-slot { width: 170px; height: 170px; }
  .fruit { width: 150px; height: 150px; }
  .baskets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .basket { height: 127px; padding: 3px 8px 5px; border-radius: 23px; }
  .basket span { font-size: 17px; line-height: 27px; }
  .basket img { height: calc(100% - 27px); }
  .kana-stage { padding: 14px 12px; gap: 12px; }
  .kana-mode { gap: 8px; font-size: 20px; }
  .kana-look-card { padding: 6px 12px; grid-template-columns: 1fr; grid-template-rows: minmax(110px, .85fr) minmax(110px, 1fr) 32px; column-gap: 0; }
  .kana-look-card .kana-letter { grid-row: auto; font-size: 112px; line-height: 1.15; }
  .kana-picture { max-width: 180px; }
  .kana-word { font-size: 27px; line-height: 32px; }
  .kana-family { gap: 5px; font-size: 19px; }
  .kana-choices { gap: 10px; }
  .kana-choice { font-size: 64px; border-radius: 23px; }
  .kana-question .kana-letter { font-size: 150px; }
  .kana-listen { font-size: 13px; }
}
@media (max-height: 720px) {
  .app { gap: 10px; }
  .menu-main { gap: 10px; }
  .welcome-note { margin-top: 7px; }
  .animal-halo { width: 200px; }
  .animal-stage, .color-stage { padding-top: 12px; padding-bottom: 18px; gap: 8px; }
  .fruit-slot { width: 145px; height: 145px; }
  .fruit { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .1s !important; transition-duration: .1s !important; }
  .game-card:hover { transform: none; }
  .sparkle { animation-name: sparkle-still; }
  @keyframes sparkle-still { to { opacity: 0; } }
}