/* ピクペット の見た目（design/redesign-spec.md と 見本 design/proto/ui-3.png に合わせる）
   ・地はクリーム色、カードは白っぽいクリーム、線はうすいベージュ、文字はこげ茶
   ・角丸は大きめ（カード 20px・ボタン 18px）、影はうすく
   ・ドット絵は整数倍でだけ拡大する（ボタンの絵は 1倍＝スマホでは 2〜3倍のドット） */
:root {
  --bg: #fbf6ea;
  --card: #fffdf7;
  --line: #eadfca;
  --line2: #f2eadb;          /* カードの中の区切り */
  --ink: #5b4130;
  --sub: #9a8571;
  --accent: #f4877a;         /* おもなボタン・選んだもの */
  --accent-dark: #e06f61;
  --onaka: #f4877a;
  --kigen: #f7c13c;
  --track: #efe6d6;
  --line-green: #06C755;
  --star: #ffb800;
  --x: #111111;
  --shadow: 0 2px 6px rgba(91, 65, 48, .08);
  --font: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  /* 飾りのドット絵（1マス＝1 の SVG。ハート 7×6・クローバー 7×7・芽 9×7・チェック 7×6・矢じるし 4×7。2倍で つかう） */
  --px-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f27a8d' d='M1 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%23ffd3db' d='M1 1h1v1h-1z'/%3E%3C/svg%3E"); /* 7x6 */
  --px-clover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%239ccb78' d='M1 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1z'/%3E%3Cpath fill='%23cfe9b0' d='M1 1h1v1h-1zM5 1h1v1h-1zM1 5h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%2376ad55' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); /* 7x7 */
  --px-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath fill='%235fae45' d='M1 0h1v1h-1zM2 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM8 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1z'/%3E%3Cpath fill='%23a6da76' d='M1 1h1v1h-1zM2 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM1 2h1v1h-1zM7 2h1v1h-1z'/%3E%3Cpath fill='%234b9436' d='M4 2h1v1h-1zM4 3h1v1h-1zM4 4h1v1h-1zM4 5h1v1h-1zM4 6h1v1h-1z'/%3E%3C/svg%3E"); /* 9x7 */
  --px-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M6 0h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1z'/%3E%3C/svg%3E"); /* 7x6 */
  --px-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%239a8571' d='M0 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM0 6h1v1h-1z'/%3E%3C/svg%3E"); /* 4x7 */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
  /* 日本語の折り返し：分かち書きの空白で折り、単語の途中では割らない */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 460px; margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ---------- ヘッダー（ロゴとドット） ---------- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; padding: 2px 0 10px;
  border-bottom: 2px solid var(--line);
}
.logo-link { display: block; line-height: 0; }
img.logo { display: block; height: 40px; width: auto; }
.coins {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
  padding: 3px 14px 3px 6px; box-shadow: var(--shadow);
}
.coins img { width: 25px; height: 25px; object-fit: contain; image-rendering: pixelated; display: block; }
.coins span { font-size: 18px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ---------- デモ版の しるし ----------
   worker が <html data-edition="demo"> を つけた ときだけ 見える（EDITION = "demo"。src/worker.js の fixHtml）。
   公開版（release）では .demo-only を ぜんぶ かくす（HTML は 1つの まま） */
html:not([data-edition="demo"]) .demo-only { display: none !important; }
/* ヘッダーの ロゴの となりの 丸い 札（ドットの 表示は 右はしの まま） */
header.top .ed-badge { margin: 0 auto 0 -4px; }
.ed-badge {
  flex: none; display: inline-block; vertical-align: 1px;
  font-size: 12px; font-weight: 900; line-height: 1.35; letter-spacing: .04em; white-space: nowrap;
  color: #c4573f; background: #ffe2d6; border: 2px solid #f5c6b1; border-radius: 999px; padding: 1px 9px;
}
.demo-note .ed-badge { margin-right: 4px; }

/* ---------- 名前の行（ホームとともだちページで共通） ---------- */
.petinfo { margin: 0 0 10px; }
.namebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0 0 10px; padding: 0 4px; min-width: 0;
}
.petinfo .namebar { margin: 0; }
.nm { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.nm-name { font-size: 26px; font-weight: 900; line-height: 1.25; white-space: nowrap; letter-spacing: .02em; }
.nm-name::after {
  content: ''; display: inline-block; width: 18px; height: 14px; margin-left: 6px; vertical-align: 1px;
  background: var(--px-sprout) center / contain no-repeat; image-rendering: pixelated;
}
/* とても はばの 広い 名前（API で つくった ZWJ の 絵文字の ならび・U+FDFD など）が 行から はみだす ときだけ「…」で きる（app.js・friend.js の fitAge が つける）。
   ふつうの 名前には overflow を つけない（絵文字の 上下が きれないように）。きる ときも 上下に 4px の よゆうを とる（margin で もどすので 高さは かわらない）。
   めばえの 絵は「…」の うしろに おけないので けす */
.nm-name.cut { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 4px 0; margin: -4px 0; }
.nm-name.cut::after { display: none; }
.nm-gen {
  font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--sub);
}
.nm-gen:empty { display: none; }
.age {
  display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 700; line-height: 1.4; color: #7a5a2e;
  background: #fff1c9; border: 2px solid #f1dc9c; border-radius: 999px; padding: 3px 12px;
}
.age:empty { display: none; }

/* ---------- 庭の画面 ---------- */
.scene {
  position: relative; overflow: hidden;
  border-radius: 20px; background: #cfe6ad;
  box-shadow: var(--shadow);
  -webkit-user-select: none; user-select: none;
  container-type: inline-size;
}
.scene canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  image-rendering: pixelated; touch-action: manipulation;
}
/* ペットの ひとこと（たての いちは app.js が ペットの あたまの うえに あわせて top を いれる。9% は さいしょだけ。
   よこは まんなか。ペットが はしに いて しっぽが とどかない ときだけ app.js が --dx で ずらす） */
.say {
  position: absolute; top: 9%; left: 56px; right: 56px; margin: 0 auto;
  width: fit-content; max-width: calc(100% - 112px);
  transform: translateX(var(--dx, 0px));
  background: var(--card); color: var(--ink);
  border: 2px solid #8d6d52; border-radius: 16px;
  padding: 5px 14px; font-size: 15px; font-weight: 700; line-height: 1.45; text-align: center;
  box-shadow: 0 2px 0 rgba(91, 65, 48, .18);
  pointer-events: none;
}
.say::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px;
  margin-left: -6px; background: var(--card);
  border-right: 2px solid #8d6d52; border-bottom: 2px solid #8d6d52;
  transform: rotate(45deg);
}
/* しっぽは ペットの うえへ（--px＝ペットの x を 0〜1 で、--dx＝ふきだしを ずらした px を app.js が いれる）。角まるに かからない はんいで。
   var() の ある 宣言は cqw を しらない ブラウザ（iOS 15 まで など）でも すてられず left が auto に なるので、@supports で わける（そこでは まんなかの まま） */
@supports (width: 1cqw) {
  .say::after { left: clamp(23px, calc(50% + (var(--px, .5) - .5) * 100cqw - var(--dx, 0px)), calc(100% - 22px)); }
}
.say:empty { display: none; }
/* せの たかい キャラで あたまの うえに ふつうの 大きさが はいらない とき（app.js が つける） */
.say.tight { font-size: 13px; padding: 4px 10px; }
/* 庭が せまいとき（320px の スマホ・低い画面）は ひとことを 小さく */
@container (max-width: 320px) {
  .say { font-size: 13px; padding: 4px 10px; left: 54px; right: 54px; max-width: calc(100% - 108px); }
}
/* ともだちの知らせ（ハートつき・タップで とじる） */
.bubble {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: #fff2f4; color: var(--ink);
  border: 2px solid #f4b3bf; border-radius: 14px;
  padding: 8px 12px; font-size: 14px; font-weight: 700; line-height: 1.45;
  box-shadow: 0 3px 8px rgba(91, 65, 48, .14);
  cursor: pointer; animation: pop .25s ease-out;
}
/* ハートは app.js が 入れる ドット絵（ic_heart・1倍） */
.bubble img { flex: none; display: block; width: 38px; height: 34px; image-rendering: pixelated; }
.scene:has(.cam:not([hidden])) .bubble { right: 60px; }
.scene:has(.bubble:not([hidden])) .say { visibility: hidden; }
/* 写真ボタン（右上） */
.cam {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 253, 247, .94); border: 2px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 4px rgba(91, 65, 48, .15); cursor: pointer;
}
.cam img { width: 28px; height: 24px; object-fit: contain; image-rendering: pixelated; display: block; }
.cam:active { transform: translateY(1px); }

/* ---------- メーター（おなか・ごきげん） ---------- */
.meters {
  margin-top: 12px; padding: 2px 16px;
  background: var(--card); border: 2px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow);
}
.meter {
  display: grid; grid-template-columns: 26px 4.4em minmax(40px, 1fr) auto;
  align-items: center; column-gap: 10px; padding: 9px 0;
}
.meter + .meter { border-top: 2px solid var(--line2); }
.meter img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; display: block; }
.meter .lbl { font-size: 15px; font-weight: 700; white-space: nowrap; }
.meter .val { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; min-width: 4.4em; font-variant-numeric: tabular-nums; }
/* 区切りのある横棒（たまった ところだけ 5つに 区切る。区切りは 棒の はばの 20・40・60・80%＝20cqw ごと） */
.bar {
  position: relative; height: 16px; border-radius: 999px;
  background: var(--track); overflow: hidden;
  container-type: inline-size;
}
.bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background-color: var(--onaka);
  /* cqw を しらない ブラウザ（iOS 15 まで など）: たまった ところの 20% ごと */
  background-image: linear-gradient(90deg, transparent calc(100% - 2px), rgba(255, 253, 247, .95) 0);
  background-size: 20% 100%; background-repeat: repeat-x;
  transition: width .4s;
}
/* 区切りは 20・40・60・80 の 4本だけ ひく（100 の ところには ひかない。まんたんでも 丸い 右はしの 内がわに 白い 線が でないように） */
@supports (width: 1cqw) {
  .bar i {
    background-image: linear-gradient(90deg,
      transparent calc(20cqw - 2px), rgba(255, 253, 247, .95) 0 20cqw,
      transparent 0 calc(40cqw - 2px), rgba(255, 253, 247, .95) 0 40cqw,
      transparent 0 calc(60cqw - 2px), rgba(255, 253, 247, .95) 0 60cqw,
      transparent 0 calc(80cqw - 2px), rgba(255, 253, 247, .95) 0 80cqw,
      transparent 0);
    background-size: 100cqw 100%; background-repeat: no-repeat;
  }
}
.meters .meter:nth-child(1) .bar i, .meter.onaka .bar i { background-color: var(--onaka); }
.meters .meter:nth-child(2) .bar i, .meter.kigen .bar i { background-color: var(--kigen); }
.bar i.low { animation: low 1.2s ease-in-out infinite; }

/* ---------- ともだち招待の帯 ---------- */
.invite {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin-top: 12px; padding: 8px 34px 8px 30px;
  background: #ebf5e0 var(--px-clover) 10px 50% / 14px no-repeat;
  border: 2px solid #d5e9c2; border-radius: 16px;
  color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left;
  cursor: pointer; box-shadow: var(--shadow);
}
.invite > span:not(.arr) { min-width: 0; }
.invite img { flex: none; width: 38px; height: auto; image-rendering: pixelated; display: block; }
.invite .arr {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--sub);
}
.invite:active { transform: translateY(1px); }

@media (max-width: 400px) {
  .invite { font-size: 13px; gap: 8px; padding-left: 26px; padding-right: 28px; }
  .invite .arr { right: 11px; }
}

/* ---------- つぎの目標・はじめての やること ---------- */
/* おしらせの さそい（app.js の showPushHint・2026-10-14） */
.pushhint { margin: 12px 0 0; padding: 10px 12px; background: var(--card, #fffdf7); border: 2px solid #f5c6b1; border-radius: 16px; box-shadow: var(--shadow); }
.pushhint p { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.pushhint-btns { display: flex; gap: 8px; }
.pushhint-btns .btn { flex: 1; min-height: 40px; font-size: 14px; }
.next { margin: 12px 0 0; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.5; }
.next:empty { display: none; }
.next .stars, .stars { color: var(--star); font-weight: 900; letter-spacing: 1px; white-space: nowrap; }
.todo { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.todo li {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  padding: 9px 30px 9px 12px; position: relative;
  font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer;
  box-shadow: 0 2px 0 var(--line);
}
.todo li::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 7px;
  background: #fff; border: 2px solid #dccbb0;
}
.todo li::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 11px; margin-top: -5px;
  background: var(--px-chev) center / contain no-repeat; image-rendering: pixelated;
}
.todo li .t { min-width: 0; }
.todo li .pt {
  margin-left: auto; flex: none; padding: 1px 8px; border-radius: 999px;
  background: #ffe8e2; color: var(--accent-dark); font-size: 12px; font-weight: 900; text-decoration: none;
}
.todo li:active { transform: translateY(1px); box-shadow: none; }
.todo li.done { opacity: .55; text-decoration: line-through; text-decoration-thickness: 2px; box-shadow: none; cursor: default; }
.todo li.done::before { background: #8cc56a var(--px-check) center / 12px no-repeat; border-color: #8cc56a; }
.todo li.done::after { display: none; }

/* ---------- ボタン ---------- */
.btn {
  appearance: none; -webkit-appearance: none; font: inherit; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 0 var(--line);
  padding: 8px 6px; font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; text-align: center; touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[aria-disabled="true"] { opacity: .45; }
.btn .ic { display: block; width: 40px; height: 40px; object-fit: none; image-rendering: pixelated; }
.btn .ic-menu {
  display: block; width: 28px; height: 4px; margin: 18px 6px; border-radius: 2px;
  background: var(--ink); box-shadow: 0 -9px 0 var(--ink), 0 9px 0 var(--ink);
}
.btn.badge { position: relative; }
.btn.badge::after {
  content: attr(data-badge); position: absolute; top: -8px; right: -6px;
  background: var(--accent); color: #fff; border: 2px solid var(--card); border-radius: 999px;
  font-size: 11px; font-weight: 900; line-height: 1.5; padding: 0 6px;
}

/* ホームの8つのボタン */
.buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.buttons .btn { min-height: 86px; padding: 10px 2px 8px; white-space: nowrap; }
/* いえで・たびだちの あとは ずかん・メニューの 2つだけ → 2れつで ならべる */
.buttons:has(> .btn[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buttons:has(> .btn[hidden]) .btn { flex-direction: row; min-height: 64px; gap: 8px; }
.buttons > .btn:nth-child(1), .btn[data-a="food"], .btn[data-a="feed"] { background: #ffe2d6; border-color: #f5c6b1; box-shadow: 0 2px 0 #f5c6b1; }
.buttons > .btn:nth-child(2), .btn[data-a="game"] { background: #fff1c9; border-color: #f0dc9e; box-shadow: 0 2px 0 #f0dc9e; }
.buttons > .btn:nth-child(3), .btn[data-a="clean"] { background: #e5f3da; border-color: #cbe4b8; box-shadow: 0 2px 0 #cbe4b8; }
.buttons > .btn:nth-child(4), .btn[data-a="medicine"] { background: #ebe4fb; border-color: #d5caf0; box-shadow: 0 2px 0 #d5caf0; }
.buttons > .btn:nth-child(5), .btn[data-a="pet"] { background: #ffe6ea; border-color: #f5c8d0; box-shadow: 0 2px 0 #f5c8d0; }
.buttons > .btn:nth-child(6), .btn[data-a="friend"] { background: #def0fb; border-color: #bddcf0; box-shadow: 0 2px 0 #bddcf0; }
.buttons > .btn:nth-child(7), .btn[data-a="zukan"] { background: #e4f4e2; border-color: #c6e3c2; box-shadow: 0 2px 0 #c6e3c2; }
.buttons > .btn:nth-child(8), .btn[data-a="menu"] { background: #f5eee2; border-color: #e3d6c0; box-shadow: 0 2px 0 #e3d6c0; }
.buttons .btn:active { box-shadow: none; }

/* 大きいボタン（シートやはじめて画面） */
.big {
  width: 100%; min-height: 50px; font-size: 16px; font-weight: 700; padding: 12px 14px;
  flex-direction: row; justify-content: center; gap: 8px; border-radius: 16px;
}
.big .egg { flex: none; display: block; width: 36px; height: 46px; margin: -12px 0 -10px; image-rendering: pixelated; }
.big .bic { flex: none; display: block; width: 38px; height: 38px; margin: -6px 0; object-fit: none; image-rendering: pixelated; }
.big.primary { background: var(--accent); color: #fff; border-color: var(--accent-dark); box-shadow: 0 3px 0 var(--accent-dark); font-weight: 900; }
.big.x { background: var(--x); color: #fff; border-color: #000; box-shadow: 0 3px 0 #000; }
.big.line { background: var(--line-green); color: #fff; border-color: #05a648; box-shadow: 0 3px 0 #05a648; }
.big.ig { background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af); color: #fff; border-color: #a0306f; box-shadow: 0 3px 0 #a0306f; }
.big:active { box-shadow: none; }
/* 引っ越しで どちらの ペットに するか えらぶ シート（app.js の chooseSheet）: どこの こ → 名前 → しゅるい */
.big.pick { flex-direction: column; gap: 0; line-height: 1.35; }
.big.pick small { font-size: 12px; font-weight: 700; color: var(--sub); }
.big.pick b { font-size: 20px; font-weight: 900; }
/* 引っ越しで まえの ばしょの こを つれてくるか きく シート（app.js の bringSheet）: 名前 → しゅるい */
.bring-pet { margin: 0; line-height: 1.4; }
.bring-pet b { font-size: 22px; font-weight: 900; }
.bring-pet small { font-size: 13px; font-weight: 700; color: var(--sub); }
.endbar { margin-top: 18px; }

/* ---------- できごと・ひとこと ---------- */
.events { list-style: none; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--sub); line-height: 1.6; }
.events:empty { display: none; }
.events li { position: relative; margin: 4px 0; padding-left: 14px; }
.events time { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.events li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--line); }
/* いちばん下の ひとこと（左に クローバーと ハート、右に クローバー。文が 2行に なっても 飾りは 両はし） */
.tagline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--sub); line-height: 1.6;
}
.tagline:empty { display: none; }
.tagline::before, .tagline::after { content: ''; flex: none; height: 14px; image-rendering: pixelated; }
.tagline::before { width: 38px; background: var(--px-clover) 0 50% / 14px no-repeat, var(--px-heart) 22px 50% / 16px no-repeat; }
.tagline::after { width: 14px; margin-left: 4px; background: var(--px-clover) center / 14px no-repeat; }

/* ---------- トースト ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: min(408px, calc(100vw - 32px));
  background: var(--ink); color: var(--card); padding: 10px 18px; border-radius: 16px;
  font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center;
  white-space: pre-line; /* あんないと はじめての +10 を 2ぎょうで だす ことが ある */
  box-shadow: 0 6px 16px rgba(91, 65, 48, .25);
  z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- シート（下から出る） ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(70, 50, 36, .45); z-index: 30; display: none; }
.sheet-bg.open { display: block; }
/* とじる うごきの あいだ（app.js の closeSheet が 450ms だけ つける）は すきとおった まくで タップを うけとめる */
.sheet-bg.closing:not(.open) { display: block; background: transparent; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-width: 460px; margin: 0 auto; max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 2px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0; box-shadow: 0 -6px 20px rgba(91, 65, 48, .15);
  transform: translateY(105%);
  /* とじている あいだは 見えない・さわれない（とじる動きが おわってから かくす） */
  visibility: hidden; transition: transform .22s ease-out, visibility 0s linear .22s;
}
.sheet::before {
  content: ''; flex: none; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--line);
}
.sheet.open { transform: none; visibility: visible; transition: transform .22s ease-out; }
#sheetBody {
  overflow: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 10px 16px calc(28px + env(safe-area-inset-bottom));
}
.sheet h2 { margin: 0 0 12px; padding-right: 44px; font-size: 20px; font-weight: 900; line-height: 1.4; }
/* ひらいた ときに app.js が フォーカスを おく 見出し（tabindex=-1。Tab では こないので 枠は ださない） */
#sheetBody h2:focus { outline: none; }
.sheet .close {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 50%; font: inherit; font-size: 24px; line-height: 1; color: var(--sub); cursor: pointer;
}
.sheet .close:active { background: var(--line2); }

/* ごはん */
.foods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.food { padding: 10px 4px 8px; }
.food img { display: block; width: 40px; height: 40px; object-fit: none; image-rendering: pixelated; }
.food small { color: var(--sub); font-size: 11px; font-weight: 700; }

/* ならび（あそぶ・メニュー など） */
.list { display: grid; gap: 10px; }
.row {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 2px 0 var(--line);
}
.row .t { font-size: 16px; font-weight: 900; }
.row .d { font-size: 12px; color: var(--sub); line-height: 1.6; }
.row.go { cursor: pointer; position: relative; padding-right: 34px; }
.row.go::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 6px; height: 11px; margin-top: -5px;
  background: var(--px-chev) center / contain no-repeat; image-rendering: pixelated;
}
.row.go:active { transform: translateY(1px); box-shadow: none; }

/* ずかん */
/* 見出しと せつめいは シートを スクロールしても 上に のこす（下の段を タップしても せつめいが 見える）。
   sticky の top は #sheetBody の 上の padding（10px）の 内がわから はかるので -10px。その すきまも 地の色で おおう。
   × ボタン（z-index: 1）は この 上に のる（見出しの 右は × の ぶん あけてある） */
.zhead { position: sticky; top: -10px; display: flow-root; margin-top: -10px; padding-top: 10px; background: var(--bg); }
/* キーボードで えらんだ マスが .zhead の 下に かくれないように（見出しと 3行の せつめいの ぶん） */
#sheetBody:has(.zhead) { scroll-padding-top: 136px; }
.zdesc { margin: 0 0 10px; min-height: 3.2em; line-height: 1.6; text-align: center; font-size: 14px; font-weight: 700; }
/* はばが 375px より せまいと 3行に なる せつめいが ある（ニンキモノ・スーパースター）。タップで マスが ずれないよう 3行ぶん とる */
@media (max-width: 374px) {
  .zdesc { min-height: 4.8em; }
}
.zukan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zcell {
  appearance: none; font: inherit; color: inherit; width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; cursor: pointer;
}
/* ずかんの絵は 104×88 の canvas（1倍）。せまい画面では はばに あわせて ちぢめる */
.zcell canvas { display: block; width: 100%; max-width: 104px; height: auto; image-rendering: pixelated; }
.zcell.unknown { color: var(--sub); }
.zcell.sel { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* ひきつぎの あいことば */
.phrase {
  margin: 4px 0; padding: 14px 12px 14px 16px;
  background: #fff; border: 2px dashed #d8c6a6; border-radius: 16px;
  font-size: 28px; font-weight: 900; letter-spacing: 4px; line-height: 1.5; text-align: center;
  font-variant-east-asian: full-width;
  -webkit-user-select: all; user-select: all;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.phrase span { display: block; white-space: nowrap; }
/* インスタの手順 */
.guide {
  margin: 4px 0; padding: 10px 14px 10px 34px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  font-size: 13px; font-weight: 700; line-height: 1.6;
}
.guide li { margin: 2px 0; }
.guide li::marker { color: var(--accent); font-weight: 900; }
/* おかえり */
.away-list {
  list-style: none; margin: 4px 0; padding: 4px 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  font-size: 14px; line-height: 1.5;
}
.away-list li { padding: 7px 0; }
.away-list li + li { border-top: 2px dashed var(--line2); }
/* カード画像 */
#cardBox:empty { display: none; }
/* カードは たてに ながいので、シェアの ボタンが とおく ならないよう 高さを おさえる（ながおしで ほぞん できる） */
.cardimg {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 52vh; max-height: 52svh; margin: 0 auto;
  border: 2px solid var(--line); border-radius: 16px; background: var(--card);
}
/* しゃしんシートは たてむきの ひくい 画面で 写真を ちいさく して、2つめの ボタン（LINE）まで さいしょに みせる
   （88svh から 写真の ほかの ぶん 約 226px を ひく。150px より ちいさく しない。よこむきは 写真が ちいさく なりすぎるので まえの まま） */
@media (orientation: portrait) {
  .photo .cardimg { max-height: min(52vh, max(150px, calc(88vh - 226px))); max-height: min(52svh, max(150px, calc(88svh - 226px))); }
}

/* ---------- はじめて画面・入力 ---------- */
.inapp {
  margin: 0 0 12px; padding: 10px 12px;
  background: #fff6d3; border: 2px solid #efd37b; border-radius: 14px;
  color: #6e5020; font-size: 13px; font-weight: 700; line-height: 1.6;
}
.inapp p { margin: 0 0 8px; }
.inapp .lr { margin-top: 4px; }
.inapp .btn { min-height: 44px; }
.inapp a:not(.btn) { color: #6e5020; font-weight: 900; }
input.txt {
  font: inherit; font-size: 18px; font-weight: 700; width: 100%; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink);
  outline: none; -webkit-appearance: none; appearance: none;
}
input.txt::placeholder { color: #c2b39f; font-weight: 500; }
input.txt:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 135, 122, .22); }
.note { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--sub); line-height: 1.6; }
.note a { color: var(--sub); }

/* ---------- ともだちページ ---------- */
.notice {
  margin: 0 0 10px; padding: 10px 12px; text-align: center;
  background: #fff1c9; border: 2px solid #f0d98f; border-radius: 14px;
  font-size: 14px; font-weight: 700; line-height: 1.5;
}
.goal {
  margin-top: 12px; padding: 12px 16px;
  background: var(--card); border: 2px solid var(--line); border-radius: 20px;
  font-size: 14px; font-weight: 700; line-height: 1.6; box-shadow: var(--shadow);
}
.goal p { margin: 0; }
.goal .g-main { font-size: 15px; }
.goal .g-sub { font-size: 13px; color: var(--sub); }
.goal .bar { margin: 8px 0; }
.goal .bar i { background-color: #f59aa8; }
.rank { color: var(--star); font-weight: 900; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(160, 110, 0, .25); }
.thanks {
  margin-top: 12px; padding: 14px; text-align: center;
  background: #ffe9ed; border: 2px solid #f6c3cd; border-radius: 18px;
  font-size: 15px; font-weight: 700; line-height: 1.6;
}
/* お世話の すぐあとの「じぶんも そだてる」は すこしの あいだ おせない（friend.js の holdCta が つける。見た目は かえない） */
.btn.hold { pointer-events: none; }

.start { margin-top: 16px; }
.hero { text-align: center; }
.hero h1 { margin: 0 0 6px; font-size: 22px; font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.hero p { margin: 0; color: var(--sub); font-size: 14px; font-weight: 700; line-height: 1.7; }
.hero .free {
  display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px;
  background: #ebf5e0; border: 2px solid #d5e9c2; color: #4f8f3d; font-size: 13px; font-weight: 900;
}
.lost, .retry { margin-top: 24px; }
.lead { margin: 0; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.6; }
.warn { margin: 0; color: #c0503f; font-size: 14px; font-weight: 700; line-height: 1.6; }
.result { margin: 14px 0; font-size: 18px; font-weight: 900; line-height: 1.5; }
.fmsg { margin: 12px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.fmsg:empty { display: none; }
.fcount { margin: 10px 0 0; font-size: 14px; font-weight: 700; line-height: 1.7; }
.stack > .fcount { margin: 0; }
.care { margin-top: 14px; }
.fail { margin-top: 24px; }

/* ---------- 規約のページ ---------- */
.doc { font-size: 14px; line-height: 1.85; }
.doc h1 { font-size: 22px; font-weight: 900; line-height: 1.4; margin: 8px 0 14px; }
.doc h2 { font-size: 17px; font-weight: 900; line-height: 1.4; margin: 24px 0 8px; padding-left: 10px; border-left: 4px solid var(--accent); }
.doc p { margin: 0 0 10px; }
.doc ul, .doc ol { margin: 0 0 10px; padding-left: 1.4em; }
.doc li { margin: 2px 0; }
.doc a { color: var(--accent-dark); font-weight: 700; }

/* ---------- ちいさな部品 ---------- */
.center { text-align: center; }
.muted { color: var(--sub); font-size: 13px; line-height: 1.75; }
.muted b { color: var(--ink); }
.stack { display: grid; gap: 10px; }
.stack > p { margin: 0; }

/* ---------- ミニゲーム ---------- */
.game { text-align: center; }
.game canvas {
  display: block; width: 100%; max-width: 360px; margin: 0 auto; height: auto;
  border: 2px solid var(--line); border-radius: 16px; background: #d9f0c8;
  image-rendering: pixelated; touch-action: none;
}
.game .info { display: flex; justify-content: space-between; margin: 6px 4px; font-size: 15px; font-weight: 700; }
.game .g-score { white-space: nowrap; }
/* おにぎりキャッチ: せまい画面で 文が 2行に なっても キャンバスが ずれないように 2行ぶん とる */
.game .info.two { min-height: 2.8em; align-items: center; gap: 8px; }
.game .info.two .g-msg { text-align: left; }
.game .g-msg .nw { white-space: nowrap; } /* かたまりの 中では 折り返さない（games.js の msg） */
.game .g-tap { margin-top: 12px; }
.lr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

footer.foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--sub); line-height: 1.8; }
footer.foot a { color: var(--sub); }

/* 文の なかの リンク（フッター・はじめての 画面と メニューの きやく・きやくの ページ）は、
   行の 高さを かえずに、すきとおった ::after で 押せる ところだけ 上下に ひろげる（44px ちかく） */
footer.foot a, .note a, #sheetBody .muted a, .doc a { position: relative; }
footer.foot a::after, .note a::after, #sheetBody .muted a::after, .doc a::after { content: ''; position: absolute; inset: -14px -4px; }
#sheetBody .muted a::after { inset: -13px -4px; }
.doc a::after { inset: -12px -6px; }
/* はじめての 画面の「きやく」は 上と 下の ボタンに かからない ところまで（すきまは 11px ずつ） */
.note a::after { inset: -11px -8px; }

/* ---------- 動き ---------- */
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes low { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- せまい画面（320px など） ---------- */
@media (max-width: 359px) {
  .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  img.logo { height: 36px; }
  .nm-name { font-size: 23px; }
  .say { font-size: 13px; padding: 4px 10px; }
  .meters { padding: 2px 12px; }
  .meter { column-gap: 8px; grid-template-columns: 24px 4.2em minmax(36px, 1fr) auto; }
  .meter img { width: 24px; height: 24px; }
  .meter .lbl, .meter .val { font-size: 14px; }
  .invite { font-size: 13px; padding-left: 28px; }
  .buttons { gap: 8px; }
  .buttons .btn { font-size: 13px; min-height: 80px; }
  .phrase { font-size: 24px; letter-spacing: 3px; }
  .big { font-size: 15px; padding-left: 10px; padding-right: 10px; }
  /* はじめての 画面の 見出しを 1行に（22px だと 320px で 2行に なり、320×568 で「たまごを もらう」が 画面の 下に はみだす） */
  .hero h1 { font-size: 21px; letter-spacing: 0; }
}

/* ---------- 広い画面（PC）：まわりに うすい ドット模様 ---------- */
@media (min-width: 700px) {
  body { background-image: radial-gradient(rgba(234, 223, 202, .7) 1.5px, transparent 1.6px); background-size: 22px 22px; }
}

/* ---------- 低い画面（高さ 760px まで。iPhone の Safari の 見える ところ など） ----------
   ホームの 8つの ボタンを さいしょの 画面に いれる（390×664・375×667）。
   庭を 小さく する 式は そのまま（はばが 390px なら 高さ 600px くらいより 低い ときだけ ちぢむ） */
@media (max-height: 760px) {
  header.top { margin: 0 0 6px; padding-bottom: 6px; }
  img.logo { height: 34px; }
  .petinfo { margin-bottom: 6px; }
  .nm-name { font-size: 20px; }
  .age { font-size: 12px; padding: 2px 10px; }
  /* 名前の行は 1行に（2行に なると ボタンが さがって はみだす）。.one は app.js・friend.js の fitAge が つけて、
     バッジを はいる ながさの 文に かえる（ちぢめて「…」には しない）。いちばん みじかくても はいらない ときは .one を はずして 2行に もどす */
  .namebar.one { flex-wrap: nowrap; }
  .namebar.one > * { flex: none; }
  /* 庭は 縦横比を変えずに 小さくする（絵が つぶれないように） */
  .scene {
    width: min(100%, calc((100vh - 360px) * 1.5));
    width: min(100%, calc((100svh - 360px) * 1.5));
    margin: 0 auto;
  }
  .meters { margin-top: 8px; }
  .meter { padding: 5px 0; }
  .invite { margin-top: 8px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .buttons { margin-top: 12px; gap: 8px; }
  .buttons .btn { min-height: 74px; padding-top: 6px; padding-bottom: 6px; }
}

[hidden] { display: none !important; }