/* ===== 猫と部屋（cat-svg.js の SVG） ===== */
/* このファイルの並び：猫と部屋の動き → ログイン・プライバシーの画面と共通のフッター → アプリの画面（app.html）。 */

.cat-scene {
  display: block;
  width: 100%;
  height: auto;
}

/* 勉強中は、猫ぜんたいが足もとを支点に、ゆっくり小さく揺れる（猫は画像 1 枚なので、部分だけは動かせない） */
.cat.is-studying [data-part="body"] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cat-sway 6s ease-in-out infinite alternate;
}

@keyframes cat-sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}

/* 動きを減らす設定の人には、アニメーションをすべて止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

/* ===== ログイン画面・プライバシーの画面・共通のフッター（index.html / privacy.html） ===== */
/*
  デザインの芯：「夜ふけの勉強部屋」。ランプの色（琥珀）だけを主役にして、あとは静かに紫がかった夜の暗がりに。
  ・色   ベース = 夜の暗がり（--bg / --surface / --panel）。メイン = ランプの琥珀（--lamp）。差し色 = 猫の部屋の壁の薄紫（--wall、数字や小さな印、枠だけ）。
  ・文字 見出し = Zen Maru Gothic（やわらかい本のような丸み）、本文 = Zen Maru Gothic（うたストックと同じ）。どちらも HTML の <link> で読む。
  ・余白 8px の倍数（8 / 16 / 24 / 32 / 48 / 64）。
  ・形   角丸は --radius（16px）。線は 1px。ログインの箱は、アプリの .panel と同じ半透明の暗い紫。ボタンの枠は薄紫で、琥珀で塗るのは主役のボタンだけ。
         影は、猫の部屋のまわりのあかりだけ。
  ・動き 猫の部屋が下からふわっと出るのが1か所。ほかは色が変わるだけ。
  ・暗い配色だけにしている（夜に開く人が多いのと、猫の部屋の窓が主役になるように）。
  メイン画面（app.html）も、この色と、ご意見・SNS・リンクの部品（.feedback-btn / .snsBox / .footer-links）を使う。
  app.html では、それらは「設定」の中に入っている。ここの .site-footer（上のふちの線つきの帯）を使うのは、ログイン画面とプライバシーの画面だけ。
*/

:root {
  color-scheme: dark;

  /* 色の名前（設計書 2026-10-12 の「2. 見た目」。見本：docs/superpowers/specs/2026-10-12-lofi-cat-soft-home-mock.html） */
  --night: #231f38; /* 画面の地（夜の部屋に合う、暗い紫） */
  --cream: rgba(247, 241, 233, 0.95); /* パネル */
  --glass: rgba(247, 241, 233, 0.42); /* 半透明の枠（集中タイマーのカード・曲カード） */
  --ink: #2f2d48; /* パネルの上の文字（濃い紺） */
  --accent: #7d84c4; /* 主役の色（再生ボタン・送るボタン・ついているハート） */
  --accent-strong: #5f66b3; /* 文字の入るボタン・パネルの上の強調（白い文字・クリーム色の地のどちらでも読める濃さ） */
  --chip: #e9e2d9; /* パネルの上の、丸いボタンや入力欄の地 */
  --coin: #f2b36d; /* コインの印 */

  --bg: var(--night);
  --surface: #2a2444;
  --panel: var(--cream);
  --panel-solid: #f7f1e9;
  --line: #4a4368;
  --fg: #f1eaf5;
  --muted: #b3abc6;
  --lamp: #b9bdf0; /* 暗い地の上の強調（リンク・フォーカスの枠）。パネルの中では --accent-strong に切りかわる */
  --lamp-ink: #fbf6ef;
  --wall: #cdbfe6;
  --active: rgba(205, 191, 230, 0.16);
  --btn-line: var(--btn-line); /* 枠だけのボタンの枠。パネルの中では紺に切りかわる */

  /* 共通パーツ（開発者SNSボタン）の CSS が使う名前。--pink は強調の色 */
  --pink: var(--lamp);

  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  --radius: 18px;
  --radius-panel: 26px;
  --gutter: 16px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  overflow-wrap: break-word;
  background-color: var(--bg);
}

img, svg { max-width: 100%; }

a { color: var(--lamp); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lamp);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.4; }
p { margin: 0; }

.page {
  width: min(100% - 2 * var(--gutter), 68rem);
  margin-inline: auto;
  padding-bottom: 48px;
}

/* --- 上の帯 --- */
.site-header {
  width: min(100% - 2 * var(--gutter), 68rem);
  margin-inline: auto;
  padding: 16px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-decoration: none;
}

/* 小さなランプ。記号ではなく CSS の丸で描く */
.brand::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 12px 2px rgba(125, 132, 196, 0.55);
}

/* --- ログイン画面の最初のひとまとまり --- */
/* スマホでは「絵 → 見出し → ログイン」の順に縦に積む。広い画面では、左に文章とログイン、右に絵。 */
.hero {
  display: grid;
  gap: 24px;
  padding-top: 8px;
}

.hero-scene {
  aspect-ratio: 3 / 2; /* 絵が入る前から場所を取っておく（ガタつかせない）。スマホでは下を少し切って、ログインのボタンを上げる */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 64px -28px rgba(125, 132, 196, 0.35);
  animation: scene-in 0.7s ease-out both;
}

.hero-scene .cat-scene { height: auto; }

@keyframes scene-in {
  from { opacity: 0; transform: translateY(8px); }
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--lamp);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hero h1 {
  font-size: clamp(2rem, 8.5vw, 3.5rem);
  line-height: 1.3;
  text-wrap: balance;
}

.hero h1 .lamp { color: var(--lamp); }

/* 短い文は、対応しているブラウザで、日本語を文節で折り返す（言葉の途中で切れない） */
.hero h1, .lead, .fine, .feature-list p { word-break: auto-phrase; }

.lead {
  margin-top: 16px;
  max-width: 34rem;
  color: var(--muted);
}

/* --- ログインの箱 --- */
.login-panel {
  padding: 24px 20px;
}

.panel-title { font-size: 1.25rem; }

/* Google のボタンが入る場所。ボタンが出るまでは、準備中の一言を置く */
.gsi-slot {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
}

.gsi-slot .waiting { color: var(--muted); font-size: 0.9375rem; }

.login-msg {
  margin-top: 8px;
  color: var(--lamp);
  font-size: 0.9375rem;
}

.fine {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* --- できること --- */
.features {
  display: grid;
  gap: 16px;
  margin-top: 64px;
}

.section-title { font-size: 1.5rem; }

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.feature-num {
  color: var(--wall);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.2;
}

.feature-list h3 { font-size: 1.125rem; }

.feature-list p {
  margin-top: 8px;
  color: var(--muted);
}

/* --- 共通のフッター（ご意見ボタン・開発者のSNSボタン・リンク）。全部の画面に入れる --- */
.site-footer {
  width: min(100% - 2 * var(--gutter), 68rem);
  margin: 0 auto;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 8px 24px;
  border: 1px solid var(--btn-line); /* アプリの .btn-quiet と同じ枠 */
  border-radius: 999px;
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}

.feedback-btn:hover { background: var(--active); }

/* 開発者SNSボタンの部品（共通パーツ/開発者SNSボタン/開発者SNSボタン.md）。ほかのサイトと同じ見た目にするため、規則はそのまま。猫の下に、細い文字。 */
.snsBox { text-align:center; margin:28px 0 0; line-height:1.4; }
.snsCat { display:inline-block; }
.snsCat img { display:block; height:auto; }
.snsLink { font-weight:500; font-size:.875rem; color:var(--fg); text-decoration:none; }
.snsLink:hover { text-decoration:underline; }
.snsCat:focus-visible, .snsLink:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }
/* 上の部品への足し算：文字リンクの押せる範囲を、見た目は変えずに指で押せる大きさ（44px）まで広げる */
.snsLink { position: relative; }
.snsLink::after { content: ""; position: absolute; inset: -14px -16px; }

.footer-links { margin-top: 16px; font-size: 0.875rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }

/* --- プライバシーポリシー --- */
/* 上の帯と左をそろえて、読む幅だけを細くする */
.legal {
  width: min(100% - 2 * var(--gutter), 68rem);
  margin-inline: auto;
  padding: 24px 0 64px;
}

.legal > * { max-width: 42rem; }

.legal h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }

.legal .date { margin-top: 8px; color: var(--muted); font-size: 0.875rem; }

.legal .intro { margin-top: 24px; }

.legal h2 {
  margin-top: 40px;
  padding-left: 12px;
  border-left: 4px solid var(--lamp);
  font-size: 1.125rem;
}

.legal p, .legal ul { margin-top: 8px; }
.legal ul { padding-left: 1.4em; }
.legal li + li { margin-top: 4px; }

.legal .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 40px; }

/* --- 広い画面 --- */
@media (min-width: 56rem) {
  .site-header { padding-top: 24px; }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "copy scene"
      "panel scene";
    align-content: center;
    column-gap: 64px;
    row-gap: 32px;
    padding-top: 32px;
  }

  .hero-copy { grid-area: copy; align-self: end; }
  .hero-scene { grid-area: scene; align-self: center; aspect-ratio: 4 / 3; }
  .hero-scene .cat-scene { height: 100%; }
  .login-panel { grid-area: panel; align-self: start; }

  .features {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 64px;
    margin-top: 96px;
  }

  .features .section-title { padding-top: 24px; }
}

/* 動きを減らす設定の人には、色の変化もなくす（animation は上の共通の指定が止める） */
@media (prefers-reduced-motion: reduce) {
  .feedback-btn { transition: none; }
}

/* ===== アプリの画面（app.html）：メニュー・ホーム・作業モード・カスタマイズ・ショップ・設定 ===== */
/*
  デザインの芯は、上の「夜ふけの勉強部屋」を、紫がかった夜に寄せたもの（色・文字・8pxの余白は同じ）。ここで足した決めごと：
  ・主役は、大きな猫の部屋。操作は、そのまわりの半透明のパネル（.panel）にまとめる。
  ・琥珀（--lamp）で塗るのは、主役のボタン（BGMを流す・買う・保存する）だけ。ほかのボタンは薄紫の細い枠にして、目立たせない。
    選んでいるメニューは、薄紫の明るい面（--active）で示す。
  ・幅 900px を境に、並びが変わる。広いと、左にたてのメニュー（幅 88px）。せまいと、下に固定のタブ（高さ 64px）。
  ・部屋は、いつも 4:3（切り取らない）。広い画面では、画面の高さに収まる大きさにして、まん中に置く。
  ・BGMを流しているあいだは、部屋のまわりのあかりが少し強くなる（色が変わるだけで、動かさない）。
  ・ふきだしは、しっぽ側の角だけ 4px（猫の返事は左、自分の言葉は右に分けるため）。色の丸（毛や目の色）だけは、形が色そのものなので丸にする。
  ・動きは、画面が切り替わるときのふわっと（色の濃さだけ）と、吹き出しが出るときの1か所ずつだけ（上の scene-in を使い回す）。「動きを減らす」設定の人には止まる。
*/

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- パネル：クリーム色の丸い箱。文字は濃い紺 --- */
/* 中では、文字・線・強調の色の名前を付けかえる：中の部品（ボタン・入力欄・小さな文字）が、書きかえなしで、クリーム色の上で読める色になる */
.login-panel, .panel {
  --fg: var(--ink);
  --muted: #6f6a82;
  --line: rgba(47, 45, 72, 0.16);
  --active: rgba(47, 45, 72, 0.08);
  --lamp: var(--accent-strong);
  --btn-line: rgba(47, 45, 72, 0.32);
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--cream);
  box-shadow: 0 18px 40px -24px rgba(10, 8, 24, 0.7);
  color: var(--fg);
}

/* 半透明の枠（集中タイマーのカード・曲カード）：クリーム色を 4 割ほどの濃さで敷き、うしろをぼかす。細い白っぽい縁。文字は濃い紺のまま。
   小さい文字は、うすい色にしない（うしろが暗い所で読みにくくなるため）＝ --muted も、いちばん濃い紺にする */
.glass {
  --fg: var(--ink);
  --muted: #6f6a82;
  --line: rgba(47, 45, 72, 0.16);
  --active: rgba(47, 45, 72, 0.08);
  --lamp: var(--accent-strong);
  --btn-line: rgba(47, 45, 72, 0.32);
  --muted: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-panel);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
  color: var(--fg);
}

/* ぼかせないブラウザでは、濃くして読めるようにする */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(247, 241, 233, 0.7); }
}

/* 線の絵（メニュー・音量）。色は、まわりの文字の色に合わせる */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 中身の入れ物 --- */
/* 左右の余白は、画面（.screen）ごとに取る：ホームだけは、部屋の絵を列の幅いっぱいに敷くため */
.app { padding: 0 0 24px; }
.top-msg, .boot { padding-inline: var(--gutter); }

.top-msg { color: var(--lamp); font-size: 0.9375rem; }
.top-msg:not(:empty) { margin-bottom: 16px; }

/* --- ボタン・入力欄 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  max-width: 100%;
  padding: 8px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn:hover { background: var(--active); }

/* 枠だけのボタン。枠は、地に合わせた色（暗い地では薄紫、パネルの中では紺） */
.btn-quiet { border-color: var(--btn-line); }

.btn-primary { border-color: var(--accent-strong); background: var(--accent-strong); box-shadow: 0 10px 20px -12px rgba(80, 86, 160, 0.9); color: var(--lamp-ink); }
.btn-primary:hover { background: #6d74c1; }
.btn-primary:disabled { box-shadow: none; }

.btn-small { min-height: 44px; padding: 8px 16px; }

/* 押せないボタン：点線の枠と、うすい文字（透かさないので、文字は読める） */
.btn:disabled {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

.field {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font: inherit;
}

.field::placeholder { color: #6f6a82; opacity: 1; }
.field:focus-visible, input[type="range"]:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }

.coin-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--coin);
}

.unit { margin-left: 2px; font-size: 0.875em; }

/* --- 読み込み中・画面の切り替え --- */
.boot {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 64px 0;
  color: var(--muted);
  text-align: center;
}

/* 画面が切り替わるときは、色の濃さだけがふわっと変わる（位置は動かさない：押す場所がずれないように） */
@keyframes screen-in {
  from { opacity: 0; }
}

.screen { display: none; max-width: 68rem; margin-inline: auto; padding: 16px var(--gutter) 0; }
#screen-main { max-width: 30rem; padding: 0; }
.screen.is-active { display: block; animation: screen-in 0.4s ease-out both; }

.screen-title { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.3; text-wrap: balance; }
.screen-title:focus, .cat-name:focus, .shop-title:focus { outline: none; }

/* 設定は、読む幅だけを細くして、まん中に置く */
.narrow { max-width: 36rem; margin-inline: auto; padding-top: 8px; }
.narrow .lead { margin-top: 8px; }

.create-grid, .shop-grid { display: grid; gap: 24px; padding-top: 8px; }

/* 1列のあいだは、列の幅を「中身の最小の幅」に任せず、画面の幅におさえる（minmax(0, 1fr)）。
   overflow-wrap: anywhere を知らない古い Safari（15.3 まで）でも、長い並びが列を押し広げず、body の overflow-wrap: break-word で折り返される。
   広い画面の2列・3列は、下の @media が上書きする。 */
.chat-log, .create-grid, .shop-grid { grid-template-columns: minmax(0, 1fr); }

/* --- 猫の部屋 --- */
/* 枠は、線（border）ではなく影で描く：箱の内側がちょうど 4:3 になり、中の絵（4:3 の SVG）とのあいだに、半端なすきまができない。
   絵が入る前から場所を取っておく（aspect-ratio）ので、読み込みでガタつかない。 */
.room {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 24px 64px -28px rgba(125, 132, 196, 0.35);
  transition: box-shadow 0.4s;
}

.room.is-playing { box-shadow: 0 0 0 1px var(--line), 0 24px 72px -16px rgba(125, 132, 196, 0.6); }
.room .cat-scene { height: auto; }
.room-small { max-width: 18rem; margin-inline: auto; }

/* --- ホーム：1 本の縦の列。部屋の絵を、列のいちばん上から全体に敷き、その上に、集中タイマーのカード → 曲カード が重なる --- */
/* 見本：docs/superpowers/specs/2026-10-14-lofi-cat-room-home-mock.png の「A：マットの上」（カードの色・大きさ・角の丸みは、2026-10-12 の見本の値のまま）。
   列は、スマホでは画面の幅いっぱい、広い画面では 30rem までで、まん中（#screen-main の max-width）。 */
.home {
  --home-ground: #1d1a30; /* 絵の下に続く、列の地の色（js/cat-svg.js の地の色と同じ） */
  position: relative;
  isolation: isolate; /* 絵（z-index: -1）を、この列の中だけで、いちばん奥に置くため */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 16px;
  overflow: hidden;
  overflow: clip;
  background: var(--home-ground);
}

/* 部屋と猫：絵の全体（1080:1456。昼・夕方・夜の 3 枚とも同じ形）を、列の左上から、幅いっぱいに敷く。カードは、この上に重なる。
   絵は .stage より長く、下へはみ出す（そこに、タイマーや曲のカードが半透明で重なる）。枠の線・影・角の丸みは付けない。 */
.stage { position: relative; aspect-ratio: 390 / 518; } /* 日付やボタンを重ねる箱。この下はしに、タイマーのカードが少し重なって、猫（マットの上）の足もとのすぐ下から始まる */
.home .room { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; aspect-ratio: 1080 / 1456; border-radius: 0; background: var(--home-ground); box-shadow: none; transition: none; }
.home .room.is-playing { box-shadow: none; }
.home .room .cat-scene { width: 100%; height: 100%; }
/* 絵の下はしを、列の地の色へなじませる（絵より下にカードが続いても、色が急に変わらない） */
.home .room::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 22%; background: linear-gradient(rgba(29, 26, 48, 0), var(--home-ground)); pointer-events: none; }

/* 部屋の左上：日付・時計・コイン・今日の作業時間。猫の耳にかからない幅におさめる */
.home-hud { position: absolute; z-index: 1; top: 14px; left: 18px; display: grid; justify-items: start; color: #fbf6ef; text-shadow: 0 1px 8px rgba(20, 16, 40, 0.55); }
.clock-date { font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0.04em; opacity: 0.92; }
.clock-time { font-size: 2.5rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; }
.hud-stats { display: grid; justify-items: start; margin-top: 6px; padding: 3px 12px; border-radius: 14px; background: rgba(35, 31, 56, 0.6); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; text-shadow: none; }
.hud-stat { display: inline-flex; align-items: center; white-space: nowrap; }
.hud-stat .coin-dot { margin-right: 6px; }
.hud-label { margin-right: 6px; }
/* 猫の上に重ねた、すきとおったボタン（押すとチャット）。場所は、.stage（390:518）に対する、猫の画像の枠（js/cat-svg.js：x 340・y 800・幅 400・高さ 410。絵は 1080 幅）。
   340 / 1080 = 31.5%、800 / 1080 * 390 / 518 = 55.8%、400 / 1080 = 37.0%、410 / 1080 * 390 / 518 = 28.6% */
.cat-tap { position: absolute; z-index: 1; top: 55.8%; left: 31.5%; width: 37%; height: 28.6%; padding: 0; border: 0; border-radius: 40%; background: transparent; cursor: pointer; }
.cat-tap:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }

/* 猫の吹き出し（猫の右上）。ないちゃんの手描きの形（assets/bubble.png：線は濃く、中はクリーム色の半透明。元は 素材/bubble-src.jpg を左右反転）を、文字の大きさに合わせて伸ばして敷く。
   しっぽは左下（絵の幅の約 30% の所）で、猫の頭の右へ向く。下はしの約 12% はしっぽなので、下の余白を多めにとる。
   場所は .stage（390:518）に対して：しっぽの先が、猫の頭の右上あたりに来るように置く。
   右はしは、右上のボタンの列（右から 14 + 46px）にかからない幅にとどめる（せまい画面でボタンが押せなくなるのを防ぐ。ボタンの列も吹き出しより手前）。
   消えているとき（.is-gone）は、見えず、押せない（文字は残す） */
.cat-bubble { position: absolute; z-index: 2; bottom: 36%; left: 42%; max-width: calc(58% - 66px); margin: 0; padding: 16px 22px 30px; background: url("assets/bubble.png") center / 100% 100% no-repeat; color: var(--ink); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; word-break: auto-phrase; cursor: pointer; transition: opacity 0.2s, visibility 0.2s; }
.cat-bubble.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.cat-bubble:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cat-bubble { transition: none; }
}

/* チャットのボタン（右上の列のいちばん上）。むらさきで、ほかのボタンと見分ける */
.round-btn-chat { background: #7d84c4; }
.round-btn-chat:hover { background: #959bd4; }

/* 猫の名前と成長段階（コインの下）。名前が長いときは … で切る */
.hud-who { display: flex; align-items: center; gap: 6px; max-width: 11rem; min-width: 0; margin-top: 6px; }

/* 部屋の右上：カスタマイズ・ショップ・設定の丸いボタン（たてに 3 つ） */
.home-actions { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; gap: 10px; }
.round-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 16px; background: rgba(52, 47, 78, 0.82); color: #fbf6ef; cursor: pointer; }
.round-btn:hover { background: rgba(74, 68, 108, 0.9); }
.round-btn:disabled { cursor: progress; }

/* パネルの上の、小さな丸いボタン（調整・前へ・次へ・ハート・曲リスト・とじる） */
.chip-btn { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: var(--ink); cursor: pointer; }
.chip-btn:hover { background: rgba(255, 255, 255, 0.78); }
.chip-btn:disabled { opacity: 0.45; cursor: default; }
/* 付いているハート（お気に入り）：むらさきで塗りつぶす */
.chip-btn[aria-pressed="true"] { color: var(--accent-strong); }
.chip-btn[aria-pressed="true"] .icon { fill: currentColor; }
/* 線の絵の中の、塗りつぶす所（三角・点） */
.icon .fill { fill: currentColor; stroke: none; }

/* --- 集中タイマーのカード --- */
/* 小さめの丸いカード。部屋の下はしに 34px 重ねる。幅は列より左右 44px ずつ狭いが、せまい画面（320px）でも、数字と調整ボタンが重ならない幅（17rem）は保つ */
.timer { position: relative; z-index: 1; display: grid; justify-items: center; width: max(calc(100% - 88px), min(100% - 32px, 17rem)); margin: -34px auto 0; padding: 12px 18px 14px; border-radius: 40px; text-align: center; }
.timer-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
.timer-label .icon { width: 17px; height: 17px; }
.timer-main { position: relative; width: 100%; margin-bottom: 6px; }
/* 数字の幅がそろっていない文字でも、1 秒ごとに全体が左右に揺れないように：決まった幅の箱（「25:00」とほぼ同じ）をまん中に置いて、文字は箱の左から並べる */
.timer-time { display: inline-block; width: 2.75em; font-size: 2.875rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: 0.02em; text-align: left; white-space: nowrap; }
.timer-main .chip-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.transport { display: flex; align-items: center; justify-content: center; gap: 22px; }

/* 再生ボタン：むらさきの丸。印は、文字ではなく CSS で描く（止まっているときは三角、動いているときは 2 本の棒） */
.play-round { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 20px -10px rgba(80, 86, 160, 0.9); color: #fbf6ef; cursor: pointer; }
.play-round:hover { background: #8a91cf; }
/* BGM を始めている途中は、押せない（js/app.js の refreshPlayButton）。一瞬なので、見た目は変えず、矢印の形だけ */
.play-round:disabled { cursor: progress; }
.play-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent currentColor; }
.play-round.is-running .play-icon { width: 18px; height: 20px; margin-left: 0; border-width: 0 6px; border-color: currentColor; }

/* --- 曲カード --- */
/* 左に曲の小さな絵、右に 曲名とボタン 2 つ／気分の名前／進みバーと経過時間 */
.track { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; width: calc(100% - 32px); margin: 14px auto 0; padding: 12px 14px; }
.player-art { width: 64px; height: 64px; }
.track-body { min-width: 0; }
.track-top { display: flex; align-items: center; gap: 8px; }
/* 曲名と気分の名前は、どちらも 1 行。はみ出す分は … で切る */
.track-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 1.125rem; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.player-title { overflow: hidden; font-size: 0.875rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.track-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 0.8125rem; }
.track-elapsed { flex: none; font-variant-numeric: tabular-nums; }
/* 進みバー：曲に終わりが無いので、長さは決めない。短い印が、ゆっくり左右に往復するだけ（鳴っている間） */
.track-bar { position: relative; flex: 1 1 auto; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(47, 45, 72, 0.22); }
.track-bar-dot { position: absolute; top: 0; left: 0; width: 24%; height: 100%; border-radius: 4px; background: var(--ink); animation: track-bar-move 5s ease-in-out infinite alternate; }
.track:not(.is-playing) .track-bar-dot { animation-play-state: paused; opacity: 0.4; }
@keyframes track-bar-move { to { left: 76%; } }
@media (prefers-reduced-motion: reduce) {
  .track-bar-dot { left: 38%; animation: none; }
}
/* 幅 360px 未満では、曲の絵を小さくして、曲名の場所を空ける */
@media (max-width: 359.98px) {
  .track { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .player-art { width: 48px; height: 48px; }
}

/* 音の知らせ・通信の知らせ（曲カードの下。言うことが無いあいだは、場所も取らない） */
.note { margin: 10px 16px 0; color: var(--lamp); font-size: 0.9375rem; }
.note:empty { display: none; }

/* --- 猫のひと言 --- */
/* 左に猫の顔の丸い絵、右に 名前と成長段階／吹き出し／（聞き直すときだけ）気分ボタン */
.say { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: end; gap: 10px; margin: 14px 16px 0; }
.cat-face { width: 68px; height: 68px; overflow: hidden; border: 3px solid #fbf6ef; border-radius: 50%; background: var(--surface); }
.cat-face .cat-scene { width: 100%; height: 100%; }
.say-body { display: grid; justify-items: start; gap: 4px; min-width: 0; }
/* 名前は、長くても1行。はみ出す分は … で切る */
.cat-name { min-width: 0; overflow: hidden; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.stage-chip { flex: none; padding: 0 8px; border: 1px solid rgba(233, 226, 242, 0.6); border-radius: 999px; font-size: 0.75rem; line-height: 1.5; }
/* 吹き出し：クリーム色（透けない）。左下に、猫のほうを向いた小さな三角 */
.bubble { position: relative; max-width: 100%; padding: 10px 16px; border-radius: 20px; background: var(--cream); color: var(--ink); line-height: 1.6; word-break: auto-phrase; }
.bubble::before { content: ""; position: absolute; bottom: 14px; left: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--cream); transform: rotate(45deg); }
.bubble:empty { display: none; }

/* 区切りのない長い並び（「草」を何十個も、長い URL、ふつうの文字を切れ目なしに）が、箱やページの横幅を押し広げないように、どこでも折り返す。
   吹き出しの中の猫の名前（12文字まで。W を12個など）や、ショップのひとことにも同じ。 */
.bubble, .item-name, .shop-msg, .note, .top-msg { overflow-wrap: anywhere; }

.mood-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mood-choices .btn { min-height: 44px; padding: 8px 16px; background: var(--cream); color: var(--ink); border-color: transparent; }
.mood-choices .btn:hover { background: #fffaf3; }

/* --- 入力欄：丸い 1 本の帯（左に猫の絵、まん中に入力欄、右に送るボタン） --- */
.inputbar { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); }
.inputbar-cat { display: inline-flex; flex: none; }
.inputbar-cat .icon { width: 28px; height: 28px; }
.inputbar-field { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--chip); color: var(--ink); font: inherit; }
.inputbar-field::placeholder { color: #6f6a82; opacity: 1; }
.inputbar-field:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.send-btn { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--accent); cursor: pointer; }
.send-btn:hover { background: rgba(125, 132, 196, 0.16); }
.send-btn .icon { width: 28px; height: 28px; }

/* --- チャットのシート：見出し（顔・名前・段階・とじる）／会話の並び／気分のボタン／入力欄 --- */
/* シートの列は、画面の幅に合わせて縮む（中身の長さで広がらない：名前の見出しは … で切る） */
.chat-sheet { grid-template-columns: minmax(0, 1fr); }
.chat-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; }
.chat-sheet .cat-face { width: 52px; height: 52px; border-width: 2px; }
.chat-sheet .sheet-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sheet .stage-chip { border-color: rgba(47, 45, 72, 0.35); color: var(--ink); }
.chat-log { display: grid; align-content: start; gap: 8px; max-height: min(30vh, 14rem); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.chat-line { justify-self: start; max-width: 84%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; word-break: auto-phrase; }
.chat-line.is-you { justify-self: end; border-radius: 16px 16px 4px 16px; background: #7d84c4; color: #fff; font-weight: 700; }
.mood-lead { margin: 0; color: #5f5a78; font-size: 0.8125rem; font-weight: 700; }
.chat-sheet .mood-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.chat-sheet .mood-choices .btn { min-width: 0; min-height: 44px; padding: 6px 8px; border-radius: 14px; background: #e9e1f4; color: var(--ink); font-size: 0.8125rem; line-height: 1.3; }
.chat-sheet .mood-choices .btn:hover { background: #ddd2ef; }
.chat-sheet .inputbar { margin: 0; background: #ece4d9; }
.chat-sheet .inputbar-field { background: #f7f1e9; }

/* --- シート（下から出る小さな画面：調整・曲リスト） --- */
/* 列と同じ幅で、画面の下に出る。うしろは暗くして、操作できなくする（js/app.js の showSheet） */
.sheet-scrim { position: fixed; z-index: 29; inset: 0; background: rgba(8, 6, 16, 0.6); }
.sheet { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; gap: 16px; width: min(100%, 30rem); max-height: min(80vh, 36rem); margin-inline: auto; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: #f7f1e9; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title { font-size: 1.125rem; }
.sheet .chip-btn { background: var(--chip); }

/* 時間えらび（15分・25分・50分・タイマーなし）：2 列 */
.timer-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.timer-choice { padding: 8px 4px; }
.timer-choice[aria-checked="true"] { border-color: var(--lamp); background: rgba(125, 132, 196, 0.18); }
/* 動いている間は選び直せない（押せない）。選んである時間だけは、実線の枠のまま残す（何分のタイマーなのかが、分かるように） */
.timer-choice[aria-checked="true"]:disabled { border-style: solid; border-color: var(--lamp); background: rgba(125, 132, 196, 0.18); color: var(--fg); }

.volume { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.volume-label { display: inline-flex; color: var(--muted); }
.volume input { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--accent-strong); cursor: pointer; }

/* 曲リストの中：見出しと、行（左に 曲名と気分の名前のボタン、右にハート） */
.list-empty { color: var(--muted); }
.list-group { display: grid; gap: 4px; }
.list-heading { color: var(--muted); font-size: 0.875rem; font-weight: 700; }
.track-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.track-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.list-play { display: grid; min-width: 0; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 14px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.list-play:hover { background: var(--active); }
.list-name { overflow: hidden; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.list-mood { overflow: hidden; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

/* 画面の題と「もどる」（設定） */
.screen-head { display: flex; align-items: center; gap: 16px; }

/* --- きろく（設定の中）：今日の作業時間と、次の成長 --- */
.stats { width: 100%; margin: 0; }

.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.stat:first-child { border-top: 0; }
.stat dt { flex: none; color: var(--muted); font-size: 0.875rem; }
.stat dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; text-align: right; }
.stat-next dd { font-family: var(--font-body); font-size: 1rem; word-break: auto-phrase; }

/* --- 設定 --- */
.settings-group { display: grid; justify-items: start; gap: 12px; margin-top: 24px; padding: 20px; }
.group-title { font-size: 1.125rem; }
.settings-group .fine { margin-top: 0; }

/* ご意見・開発者のSNS・プライバシーポリシーは、ほかのページのフッターと同じ部品。ここでも、まん中にそろえる */
.settings-about { justify-items: center; text-align: center; }
.settings-about .group-title { justify-self: start; }
.settings-about .snsBox { margin-top: 12px; }
.settings-about .footer-links { margin-top: 0; }

/* --- キャラメイク（カスタマイズ） --- */
.create-col .lead { margin-top: 8px; }
.create-form { margin-top: 24px; }

.block { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.block-label { display: block; margin-bottom: 8px; padding: 0; font-weight: 700; }
.block .fine { margin-top: 8px; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch { position: relative; display: inline-flex; width: 48px; height: 48px; cursor: pointer; }

.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.swatch-dot {
  width: 100%;
  height: 100%;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px var(--bg);
}

.swatch input:checked + .swatch-dot {
  border-color: var(--lamp);
  box-shadow: inset 0 0 0 2px var(--bg), 0 0 14px rgba(125, 132, 196, 0.5);
}

.swatch input:focus-visible + .swatch-dot { outline: 3px solid var(--lamp); outline-offset: 3px; }

/* 毛色えらび：その毛色の猫の小さな絵と名前のカードを、3 列 x 2 段に並べる。選んでいるものは、色の丸と同じ色の枠 */
.swatches-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.swatch-cat { display: block; width: auto; height: auto; }

.swatch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 4px 6px;
  border: 2px solid var(--line);
  border-radius: 16px;
}

.swatch-card img { display: block; width: 64px; max-width: 100%; height: auto; aspect-ratio: 160 / 164; }

.swatch-name { font-size: 0.75rem; font-weight: 700; line-height: 1.3; text-align: center; }

.swatch input:checked + .swatch-card {
  border-color: var(--lamp);
  box-shadow: 0 0 14px rgba(125, 132, 196, 0.5);
}

.swatch input:focus-visible + .swatch-card { outline: 3px solid var(--lamp); outline-offset: 3px; }

.form-error { margin-bottom: 16px; color: var(--lamp); font-weight: 700; }
.form-error:empty { display: none; }

.form-actions { display: grid; gap: 8px; }
.form-actions .btn { width: 100%; }

/* 模様・目の形・服・背景・道具の選択肢。持っているものは選べて、持っていないものは点線の枠と鍵（CSS で描く）で押せない */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }

.choice { position: relative; display: inline-flex; min-height: 44px; cursor: pointer; }

.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.choice-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--btn-line);
  border-radius: var(--radius);
  line-height: 1.4;
}

.choice-name { font-weight: 700; }

.choice input:checked + .choice-body { border-color: var(--lamp); background: rgba(125, 132, 196, 0.12); }
.choice input:focus-visible + .choice-body { outline: 3px solid var(--lamp); outline-offset: 3px; }

.choice.is-locked, .choice.is-locked input { cursor: not-allowed; }
.choice.is-locked .choice-body { border-style: dashed; border-color: var(--line); color: var(--muted); }

.lock-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8125rem; }

/* 鍵：四角い本体と、その上の半円の輪 */
.lock {
  position: relative;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 7px;
  margin-top: 5px;
  border-radius: 2px;
  background: currentColor;
}

.lock::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 6px;
  height: 5px;
  margin-left: -3.5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.create-form .btn-primary { width: 100%; }

/* --- ショップ --- */
/* 「もどる」「ショップ」「コイン」。せまい幅では、コインが次の行に回る（題が縦に割れないように） */
.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 8px;
}

.shop-title { flex: 1 1 auto; font-size: 1.5rem; white-space: nowrap; }

.shop-coins {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--lamp);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.shop-grid { margin-top: 16px; }

.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }

.tab {
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { border-bottom-color: var(--lamp); color: var(--fg); }

/* 買い物のあとのひとこと。タブとリストのあいだ（リストの上）に置く：商品のボタンを覆わない。
   いつもの案内文と同じ場所に重ねて、箱の高さを決めておく：出ても消えても、リストは動かない（押した場所がずれて、次を押し間違えないように）。
   押すと消える。数秒でも消える。 */
.shop-notice { display: grid; align-items: center; min-height: 4.25rem; margin-top: 16px; }
.shop-notice > * { grid-area: 1 / 1; }
.shop-hint { margin: 0; }

.shop-msg {
  padding: 8px 16px;
  border: 1px solid var(--lamp);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.6;
  cursor: pointer;
}

.shop-msg:empty { visibility: hidden; }

.shop-list { margin: 0; padding: 0; list-style: none; }

.shop-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.shop-item:first-child { border-top: 0; }

.thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.thumb svg { display: block; width: 100%; height: 100%; }

.item-name { font-weight: 700; line-height: 1.4; }

.item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.875rem;
}

.price { display: inline-flex; align-items: center; }

.tag { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; line-height: 1.6; }
.tag-on { border-color: var(--lamp); color: var(--lamp); }

.shop-item .btn { min-width: 6.5rem; }

.shop-empty { padding: 24px 0; color: var(--muted); }

/* 1列のあいだは、部屋が大きくなりすぎないように（横向きのスマホで、部屋が画面の高さを超えないように）幅をおさえて、まんなかに置く */
.room-col { width: min(100%, 30rem); margin-inline: auto; }

/* --- タブレット以上：カスタマイズとショップは、左に猫の部屋、右に選ぶもの --- */
@media (min-width: 48rem) {
  .create-grid, .shop-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }

  .room-col { position: sticky; top: 24px; width: auto; margin-inline: 0; }
  .room-small { max-width: none; margin-inline: 0; }
  .shop-grid { margin-top: 24px; }
}

/* 動きを減らす設定の人には、色の変化もなくす（animation は上の共通の指定が止める） */
@media (prefers-reduced-motion: reduce) {
  .btn, .room { transition: none; }
}