@charset "UTF-8";
/* =========================================================
   ねこの ともだち  ―  スタイル
   ・高齢者向け：おおきい文字・おおきいボタン・たかいコントラスト
   ・タップ領域は すべて 48px 以上（じっさいは 80px 以上）
   ========================================================= */

:root {
  /* いろ（コントラストを たかく） */
  --c-text:        #1b1b1b;
  --c-bg:          #fff8ec;
  --c-header:      #2f5d3a;
  --c-header-text: #ffffff;
  --c-room-wall:   #ffe9c7;
  --c-room-floor:  #d9a15b;
  --c-pet:         #1f7a3d;   /* なでる：みどり */
  --c-feed:        #c65a00;   /* ごはん：オレンジ */
  --c-close:       #444c55;
  --c-choice:      #ffffff;
  --c-choice-line: #2f5d3a;
  --c-ok:          #1f7a3d;
  --c-ng:          #b3261e;

  /* もじの おおきさ（画面の幅に あわせて 自動で かわる） */
  --fs-message: clamp(22px, 5.2vw, 34px);
  --fs-button:  clamp(26px, 6.4vw, 40px);
  --fs-quiz:    clamp(24px, 5.8vw, 38px);

  /* へやの かざりの おおきさ（小物どうしの 大小は 画像側で つけてある） */
  --item-size:  clamp(64px, 18vw, 110px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  line-break: strict;          /* 「ャ」「ョ」などが 行あたまに こない ように */
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;            /* スワイプを させない（タップだけ） */
  overscroll-behavior: none;
  user-select: none;
}

/* ========== ヘッダー ========== */
.header {
  flex: 0 0 auto;
  background: var(--c-header);
  color: var(--c-header-text);
  padding: 14px 16px 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}

.status {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status__label { font-size: clamp(20px, 4.6vw, 28px); }

.status__value {
  font-size: clamp(38px, 9vw, 60px);
  line-height: 1;
  color: #ffe36e;
}

.status__level {
  font-size: clamp(20px, 4.6vw, 28px);
  background: #ffffff;
  color: var(--c-header);
  border-radius: 999px;
  padding: 4px 16px;
}

/* つぎの レベルまでの バー */
.gauge {
  margin: 8px auto 0;
  max-width: 560px;
  height: 14px;
  background: rgba(255,255,255,.35);
  border: 3px solid #ffffff;
  border-radius: 999px;
  overflow: hidden;
}

.gauge__bar {
  height: 100%;
  width: 0%;
  background: #ffe36e;
  transition: width .5s ease;
}

/* ========== おなかと あそびの ゲージ ========== */
.meters {
  display: flex;
  gap: 12px;
  margin: 10px auto 0;
  max-width: 560px;
}

.meter { flex: 1 1 0; }

.meter__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(15px, 3.8vw, 20px);
  white-space: nowrap;
}

.meter__icon { font-size: 1.15em; line-height: 1; }

.meter__state { font-size: .85em; }

/* ゲージは 10目盛。かずを 目で かぞえられる ように、1つずつ 区切る */
.meter__notches {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-top: 3px;
  padding: 2px;
  background: rgba(0, 0, 0, .25);
  border: 3px solid #ffffff;
  border-radius: 999px;
  overflow: hidden;
}

.meter__notch {
  flex: 1 1 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  transition: background-color .3s ease;
}

#meterFood .meter__notch.is-on { background: #ffc14d; }   /* おなか＝きいろ */
#meterPlay .meter__notch.is-on { background: #ff8fa3; }   /* あそび＝ピンク */

/* まんタン（まんぞくして おやすみ中）は ふちを めだたせる */
.meter.is-full .meter__notches { border-color: #ffe36e; }

.message {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-message);
  background: #ffffff;
  color: var(--c-text);
  border-radius: 18px;
  padding: 12px 14px;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== メインビュー（へや） ========== */
.room {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  overflow: hidden;
  /* かべと ゆか */
  background:
    linear-gradient(to bottom,
      var(--c-room-wall) 0%,
      var(--c-room-wall) 62%,
      var(--c-room-floor) 62%,
      var(--c-room-floor) 100%);
}

/* へやの 背景画像。よみこみに 成功した ときだけ main.js が この クラスを つける
   （よみこめない ときは 上の グラデーションの かべと ゆかの ままで あそべる）。
   まどが きれる のを ふせぐため、左下を きじゅんに あわせる。 */
.room--image {
  background-image: url("images/room.jpg");
  background-size: cover;
  background-position: left bottom;
}

/* へやの かざり */
.room-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-item {
  position: absolute;
  width: var(--item-size);
  height: var(--item-size);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pop-in .6s ease both;
}

/* display を してい すると hidden が きかなく なるので、あらためて けす */
.room-item[hidden] { display: none; }

/* 小物の 画像（images/items.png）は 3×3 の 9こが 1まいに なった スプライトシート。
   よみこみに 成功した ときだけ main.js が この クラスを つける
   （よみこめない ときは 絵文字の ままで あそべる）。 */
.room-items--image .room-item {
  background-image: url("images/items.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;        /* 9このうち 1こだけを みせる */
}

.room-items--image .room-item__emoji { display: none; }

.room-item__emoji {
  font-size: calc(var(--item-size) * .78);
  line-height: 1;
}

/* へやの なかの ボタン（ねこを かえる）。
   したの おおきな ボタン2つは そのまま のこす ため、かべの うえに おく。 */
.room-button {
  position: absolute;
  top: 10px;
  right: 10px;                       /* ねこの あたまと かさならない ように 右上へ */
  white-space: nowrap;               /* 2ぎょうに おりかえさない */
  z-index: 3;
  min-height: 56px;                  /* タップ領域は 48px 以上 */
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .94);
  color: var(--c-header);
  border: 4px solid var(--c-header);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(18px, 4.4vw, 24px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
  cursor: pointer;
  touch-action: manipulation;
}

.room-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.room-button:focus-visible { outline: 6px solid var(--c-feed); outline-offset: 3px; }

.room-button__icon { font-size: 1.15em; line-height: 1; }

/* ========== ねこ ========== */
.cat-stage {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(60vw, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat {
  position: relative;
  font-size: clamp(90px, 26vw, 170px);
  line-height: 1;
  animation: breathe 3.2s ease-in-out infinite;
}

/* ねこの 画像は 3×3 の 9ポーズが 1まいに なった スプライトシート。
   よみこみに 成功した ときだけ main.js が この クラスと --cat-image を つける
   （よみこめない ときは 絵文字の ままで あそべる）。
   がらは images/ の なかに 3しゅるい（茶白・キジトラ・くろねこ）。 */
.cat--image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: var(--cat-image, url("images/cat-kijitora.png"));
  background-repeat: no-repeat;
  background-size: 300% 300%;        /* 9マスのうち 1マスだけを みせる */
}

.cat--image .cat__emoji { display: none; }

/* 1まいめ（cat-*.png）の 9つの ポーズ ― おせわの ときの すがた */
.cat--image.is-pose-idle      { background-position:   0%   0%; }  /* おすわり */
.cat--image.is-pose-happy     { background-position:  50%   0%; }  /* よろこぶ */
.cat--image.is-pose-eating    { background-position: 100%   0%; }  /* たべる */
.cat--image.is-pose-morning   { background-position:   0%  50%; }  /* あくび（あさ） */
.cat--image.is-pose-noon      { background-position:  50%  50%; }  /* あそんで（ひる） */
.cat--image.is-pose-night     { background-position: 100%  50%; }  /* ねむる（よる） */
.cat--image.is-pose-welcome   { background-position:   0% 100%; }  /* おかえり */
.cat--image.is-pose-celebrate { background-position:  50% 100%; }  /* バンザイ */
.cat--image.is-pose-thinking  { background-position: 100% 100%; }  /* かんがえる */

/* 2まいめ（cat-*-relax.png）の 8つの ポーズ ― ひとりで いる ときの すがた。
   よみこめた ときだけ main.js が --cat-image-relax を つける。
   2まいめの ない がら（ちゃしろ）では この ポーズは つかわない。 */
.cat--image.is-pose-belly     { background-image: var(--cat-image-relax); background-position:  50%   0%; }  /* おなかを みせて かまって */
.cat--image.is-pose-groom     { background-image: var(--cat-image-relax); background-position: 100%   0%; }  /* けづくろい */
.cat--image.is-pose-tail      { background-image: var(--cat-image-relax); background-position:   0%  50%; }  /* しっぽを おいかける */
.cat--image.is-pose-loaf      { background-image: var(--cat-image-relax); background-position:  50%  50%; }  /* こうばこずわり */
.cat--image.is-pose-stretch   { background-image: var(--cat-image-relax); background-position: 100%  50%; }  /* のびて ねそべる */
.cat--image.is-pose-surprised { background-image: var(--cat-image-relax); background-position:   0% 100%; }  /* びっくり */
.cat--image.is-pose-lookup    { background-image: var(--cat-image-relax); background-position:  50% 100%; }  /* 見上げる */
.cat--image.is-pose-back      { background-image: var(--cat-image-relax); background-position: 100% 100%; }  /* うしろむき */

/* 画像の ねこは 足もとに よはくが あるので かげの いちを あわせる */
.cat--image ~ .cat__shadow { width: 50%; margin-top: -8%; }

.cat__emoji { display: block; }

.cat__shadow {
  width: 62%;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  filter: blur(2px);
}

/* うれしい ときの ねこ */
.cat.is-happy   { animation: hop .6s ease 2; }
/* ごはんを たべている ときの ねこ */
.cat.is-eating  { animation: munch .35s ease-in-out 5; }

/* ========== エフェクト（ハートや ごはん） ========== */
.effects {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  height: 0;
  z-index: 2;              /* ハートや ごはんが ねこの まえに でるように */
  pointer-events: none;
}

.effect {
  position: absolute;
  left: 50%;
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1;
  animation: float-up 1.8s ease-out forwards;
}

/* ========== したの おおきな ボタン ========== */
.actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border-top: 6px solid var(--c-header);
}

.btn {
  flex: 1 1 0;
  min-height: 104px;            /* 48px 以上を じゅうぶんに こえる おおきさ */
  padding: 10px 6px;
  border: 5px solid rgba(0,0,0,.28);
  border-radius: 24px;
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-button);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}

.btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.btn:focus-visible {
  outline: 6px solid #ffe36e;
  outline-offset: 3px;
}

.btn__icon { font-size: 1.1em; line-height: 1; }
.btn__sub  { font-size: .58em; }

.btn--pet   { background: var(--c-pet); }
.btn--feed  { background: var(--c-feed); }

/* ゲージが まんタンの あいだは、ボタンを やすみの いろに する
   （おしても おこられない。ねこが「いっぱいだニャ」と こたえる） */
.btn.is-resting {
  background: #7b8590;
  border-color: rgba(0, 0, 0, .2);
}
.btn--close {
  background: var(--c-close);
  width: 100%;
  min-height: 88px;
  font-size: clamp(26px, 6.4vw, 32px);   /* 画面が おおきい ときに のびすぎない ように */
}

/* ========== クイズの がめん ========== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 20;
}

.modal[hidden] { display: none; }

.modal__panel {
  width: 100%;
  max-width: 620px;
  max-height: 98dvh;
  overflow-y: auto;
  background: var(--c-bg);
  border: 6px solid var(--c-header);
  border-radius: 24px;
  padding: 16px;
  animation: pop-in .25s ease both;
}

.modal__title {
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(24px, 5.6vw, 30px);
  background: var(--c-header);
  color: #ffffff;
  border-radius: 14px;
  padding: 8px;
}

/* かげあての 絵。images/animals.png（3×3の どうぶつ9しゅるい）を つかう。
   画像が よみこめない ときは なかの 絵文字が そのまま でる。 */
.quiz__silhouette {
  width: clamp(104px, 30vw, 160px);
  height: clamp(104px, 30vw, 160px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz__silhouette[hidden] { display: none; }

.quiz__silhouette--image {
  background-image: url("images/animals.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;        /* 9このうち 1こだけを みせる */
}

.quiz__silhouette--image .quiz__silhouette-emoji { display: none; }

.quiz__silhouette-emoji {
  font-size: clamp(90px, 24vw, 150px);
  line-height: 1;
}

/* かげ（シルエット）に する。正解すると この クラスを はずして 色を みせる */
.quiz__silhouette.is-shadow {
  filter: brightness(0) saturate(0) drop-shadow(0 0 1px rgba(0,0,0,.4));
}

/* もんだいの しゅるい（ことわざ／かんようく／かげあて など） */
.quiz__kind {
  margin: 0 0 6px;
  text-align: center;
  font-size: clamp(16px, 4vw, 22px);
  color: var(--c-header);
}

.quiz__question {
  margin: 8px 0 14px;
  text-align: center;
  font-size: var(--fs-quiz);
  white-space: pre-line;   /* もんだい文の かいぎょうを そのまま いかす */
}

/* ことばの もんだいは みじかいので おおきく みせる */
.quiz__question--word {
  font-size: clamp(34px, 9vw, 56px);
  letter-spacing: .04em;
}

/* 難読漢字の もんだい（かんじを おおきく みせる） */
.quiz__kanji {
  display: block;
  font-size: clamp(76px, 22vw, 130px);
  line-height: 1.1;
}

.quiz__ask {
  display: block;
  margin-top: 4px;
  font-size: clamp(20px, 5vw, 28px);
}

/* あなの ばしょ */
.quiz__blank {
  display: inline-block;
  min-width: 1.3em;
  color: var(--c-feed);
  border-bottom: 6px solid var(--c-feed);
}

.quiz__blank.is-filled {
  color: var(--c-ok);
  border-bottom-color: var(--c-ok);
}

/* せんたくしは 2れつ。たて1れつだと 画面から あふれる ため。
   3つの ときは、さいごの 1つを よこいっぱいに ひろげる。 */
.quiz__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quiz__choices[hidden] { display: none; }

.quiz__choices .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* せいかいの あとに でる よみと いみ */
.quiz__answer {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #e7f4ea;
  border: 4px solid var(--c-ok);
  border-radius: 18px;
  text-align: center;
}

.quiz__answer[hidden] { display: none; }

.quiz__yomi {
  margin: 0;
  font-size: clamp(18px, 4.6vw, 26px);
  color: var(--c-header);
}

.quiz__imi {
  margin: 6px 0 0;
  font-size: clamp(17px, 4.2vw, 23px);
  line-height: 1.5;
}

.choice {
  min-height: 92px;
  padding: 10px 14px;
  background: var(--c-choice);
  color: var(--c-text);
  border: 5px solid var(--c-choice-line);
  border-radius: 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(26px, 6.2vw, 38px);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.2);
  touch-action: manipulation;
}

.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.choice:focus-visible { outline: 6px solid var(--c-feed); outline-offset: 3px; }

.choice.is-correct {
  background: var(--c-ok);
  color: #ffffff;
  border-color: #0d4a22;
}

.choice.is-wrong {
  background: #ffe4e2;
  border-color: var(--c-ng);
  color: var(--c-ng);
}

.quiz__result {
  margin: 14px 0 16px;
  text-align: center;
  font-size: clamp(24px, 5.6vw, 34px);
  min-height: 1.6em;
}

.quiz__result.is-ok { color: var(--c-ok); }
.quiz__result.is-ng { color: var(--c-ng); }

/* ========== ねこを えらぶ がめん ========== */
/* ねこが 4しゅるい あるので、たて1れつだと 画面から あふれる。
   2れつ×2だんに ならべて、スクロールなしで えらべるように する。 */
.cat-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cat-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 150px;
  padding: 10px 8px;
  background: #ffffff;
  color: var(--c-text);
  border: 5px solid var(--c-choice-line);
  border-radius: 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 30px);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .2);
  touch-action: manipulation;
}

.cat-choice:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.cat-choice:focus-visible { outline: 6px solid var(--c-feed); outline-offset: 3px; }

/* いま えらんでいる ねこ */
.cat-choice.is-current {
  background: #e7f4ea;
  border-color: var(--c-ok);
}

/* みほん（スプライトシートの 上段左＝おすわり を つかう） */
.cat-choice__face {
  flex: 0 0 auto;
  width: clamp(76px, 22vw, 110px);
  height: clamp(76px, 22vw, 110px);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 0% 0%;
}

.cat-choice__name { text-align: center; }

.cat-choice__mark {
  position: absolute;
  top: 2px;
  right: 10px;
  color: var(--c-ok);
  font-size: 1.2em;
}

/* ========== おおきな おしらせ（大正解！ など） ========== */
.bignews {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: none;
}

.bignews[hidden] { display: none; }

/* ねこの かおを かくさないよう、へやの かべの あたりに だす ときの いち */
.bignews.is-top {
  align-items: flex-start;
  padding-top: 30dvh;
}

.bignews__text {
  margin: 0;
  padding: 18px 28px;
  text-align: center;
  font-size: clamp(44px, 12vw, 96px);
  color: #ffffff;
  background: var(--c-ok);
  border: 8px solid #ffffff;
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(0,0,0,.3);
  animation: bignews-in .5s ease both;
}

/* ========== アニメーション ========== */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-22px) rotate(-5deg); }
  60%      { transform: translateY(0) rotate(5deg); }
}

@keyframes munch {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.06, .94); }
}

@keyframes float-up {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -190px) scale(1.25); opacity: 0; }
}

@keyframes pop-in {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

@keyframes bignews-in {
  0%   { transform: scale(.4) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* せの ひくい 画面（ちいさな スマートフォンや よこむき）では すこし つめて、
   したの おおきな ボタンが 画面から はみ出さない ように する */
@media (max-height: 700px) {
  .header { padding: 10px 14px 12px; }

  .meter__notches { height: 18px; }

  .message {
    margin-top: 8px;
    padding: 8px 12px;
    min-height: 2.2em;
  }

  .room { min-height: 160px; }

  /* クイズの がめんも つめる（スクロールなしで おさまる ように） */
  .modal__panel { padding: 12px; }
  .modal__title { padding: 6px; margin-bottom: 6px; }
  .quiz__kind { margin-bottom: 2px; }
  .quiz__kanji { font-size: clamp(54px, 16vw, 96px); }
  .quiz__question { margin: 4px 0 8px; }
  .quiz__silhouette { width: clamp(88px, 25vw, 150px); height: clamp(88px, 25vw, 150px); }
  .quiz__choices { gap: 10px; }
  .quiz__result { margin: 8px 0 10px; min-height: 1.3em; }
  .quiz__answer { padding: 8px 12px; }
  .choice { min-height: 74px; }
  .cat-choice { min-height: 132px; }
  .btn--close { min-height: 72px; }

  .actions { padding: 10px; gap: 10px; }

  .btn { min-height: 88px; }        /* 48px 以上は たもつ */
}

/* とても せの ひくい 画面では、ねこも すこし 小さくして おさめる */
@media (max-height: 620px) {
  .room { min-height: 130px; }

  .cat-stage { width: min(34vw, 180px); }

  .status__value { font-size: clamp(30px, 7vw, 44px); }

  .quiz__kanji { font-size: clamp(46px, 14vw, 80px); }
  .quiz__silhouette { width: clamp(76px, 22vw, 130px); height: clamp(76px, 22vw, 130px); }
  .choice { min-height: 66px; }
  .btn--close { min-height: 64px; }
  .cat-choice { min-height: 118px; }
  .cat-choice__face { width: clamp(56px, 16vw, 80px); height: clamp(56px, 16vw, 80px); }
}

/* よこむきに した ときなど、うんと せの ひくい 画面。
   したの おおきな ボタンが 画面の そとに 出ない ことを いちばんに する
   （タップ領域は 48px 以上を たもつ）。 */
@media (max-height: 480px) {
  :root {
    --fs-message: 18px;
    --fs-button:  22px;
    --item-size:  clamp(40px, 9vh, 56px);
  }

  .header { padding: 6px 12px 8px; }

  .status { gap: 8px; }
  .status__label, .status__level { font-size: 16px; }
  .status__value { font-size: 26px; }
  .status__level { padding: 2px 12px; }

  .gauge { display: none; }          /* レベルの バーは はぶく（数字は のこる） */

  .meters { margin-top: 6px; gap: 8px; }
  .meter__label { font-size: 13px; }
  .meter__notches { height: 14px; border-width: 2px; gap: 1px; }

  .message {
    margin-top: 6px;
    padding: 6px 10px;
    min-height: 1.6em;
    border-radius: 12px;
  }

  .room { min-height: 96px; }

  /* よこむきでは 画面の たかさが きめてなので vh で 大きさを きめる */
  .cat-stage { width: min(22vh, 150px); }

  .room-button {
    min-height: 48px;
    padding: 4px 14px;
    font-size: 16px;
  }

  .actions { padding: 8px; gap: 8px; border-top-width: 4px; }

  .btn {
    min-height: 64px;
    border-width: 4px;
    border-radius: 18px;
  }

  .btn__icon, .btn__sub { display: none; }

  /* クイズ・ねこえらびの がめんも よこむき用に つめる */
  .modal { padding: 6px; }
  .modal__panel { padding: 8px; border-width: 4px; border-radius: 16px; }
  .modal__title { font-size: 18px; padding: 4px; margin-bottom: 4px; }

  .quiz__kind { font-size: 13px; margin-bottom: 2px; }
  .quiz__question { font-size: 22px; margin: 4px 0 8px; }
  .quiz__question--word { font-size: 26px; }
  .quiz__kanji { font-size: 44px; }
  .quiz__ask { font-size: 15px; }
  .quiz__silhouette { width: 84px; height: 84px; }
  .quiz__choices { gap: 6px; }
  .choice { min-height: 52px; font-size: 18px; border-width: 3px; border-radius: 12px; }
  .quiz__answer { padding: 6px 10px; border-width: 3px; }
  .quiz__yomi { font-size: 15px; }
  .quiz__imi { font-size: 14px; margin-top: 2px; }
  .quiz__result { font-size: 18px; margin: 2px 0 4px; min-height: 1em; }

  .cat-choice { min-height: 84px; font-size: 16px; gap: 2px; }
  .cat-choice__face { width: 52px; height: 52px; }

  .btn--close { min-height: 48px; font-size: 18px; }
}

/* よこむきで よこに ひろい ときは、クイズを 左右2れつに して
   たての ながさを はんぶんに する（スクロールを させない ため）。 */
@media (max-height: 480px) and (min-width: 560px) {
  .quiz {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 14px;
    align-items: center;
  }

  .quiz__kind       { grid-column: 1; grid-row: 1; margin: 0; }
  .quiz__silhouette { grid-column: 1; grid-row: 2; width: 86px; height: 86px; }
  .quiz__question   { grid-column: 1; grid-row: 3; margin: 2px 0 0; }
  .quiz__choices    { grid-column: 2; grid-row: 1 / 4; align-content: center; }
  .quiz__answer     { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
  .quiz__result     { grid-column: 1 / -1; grid-row: 4; margin: 4px 0 6px; }

  .quiz__kanji { font-size: 52px; }

  /* ねこえらびも よこに ならべる */
  .cat-choices { grid-template-columns: repeat(4, 1fr); }
  .cat-choice { min-height: 96px; }
}

/* おおきい画面（たかさも ある とき）は ボタンに ゆとりを もたせる。
   よこむきの せの ひくい 画面には てきようしない。 */
@media (min-width: 700px) and (min-height: 620px) {
  .actions { padding: 18px 24px; gap: 20px; }
  .btn { min-height: 128px; }
}

/* アニメーションが にがてな ひとの ために */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}