/* =========================================================
   SNS3.0 base.css — テーマ：おもちゃ王国
   色・形・文字はすべてここの CSS変数で一元管理する
   ========================================================= */


:root {
  /* 色 */
  --pink: #E8336F;
  --pink-soft: #FBD3E0;
  --pink-deep: #C21E57;
  --yellow: #E8B820;
  --yellow-soft: #FBEBB5;
  --blue: #2E4FC9;
  --blue-soft: #D5DDF7;
  --red: #C8243F;      /* YouTubeの部屋（ピンク〜赤系。背景のピンクと見分けるため赤より）*/
  --red-soft: #F9D0D6;
  --cream: #F6E7D6;
  --ink: #2B1B24;
  --ink-soft: #5A4652;
  --white: #FFFDF9;
  --danger: #B3261E;
  --success: #2E7D4F;

  /* 部屋ごとの色（[data-room] で切りかえ） */
  --room: var(--pink);
  --room-soft: var(--pink-soft);
  --room-ink: var(--white);   /* 部屋の色の上に置く文字色 */

  /* 形 */
  --radius-card: 24px;
  --radius-btn: 999px;
  --radius-input: 16px;
  --shadow-block: 0 6px 0 rgba(43, 27, 36, 0.18), 0 12px 24px rgba(43, 27, 36, 0.12);
  --shadow-press: 0 2px 0 rgba(43, 27, 36, 0.18), 0 4px 10px rgba(43, 27, 36, 0.10);

  /* 質感：編み目の模様（画像は使わない） */
  --knit: repeating-linear-gradient(60deg, rgba(255,255,255,.10) 0 2px, transparent 2px 9px),
          repeating-linear-gradient(-60deg, rgba(43,27,36,.05) 0 2px, transparent 2px 9px);
  --knit-light: repeating-linear-gradient(60deg, rgba(255,255,255,.35) 0 1.5px, transparent 1.5px 8px),
                repeating-linear-gradient(-60deg, rgba(43,27,36,.035) 0 1.5px, transparent 1.5px 8px);

  /* 文字 */
  --font-head: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;

  /* 動き */
  --ease-poyon: cubic-bezier(.34, 1.56, .64, 1);
}

[data-room="coconala"] { --room: var(--yellow); --room-soft: var(--yellow-soft); --room-ink: var(--ink); }
[data-room="youtube"]  { --room: var(--red);    --room-soft: var(--red-soft);    --room-ink: var(--white); }
[data-room="ai"]       { --room: var(--blue);   --room-soft: var(--blue-soft);   --room-ink: var(--white); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--pink);
  background-image: var(--knit);
  animation: page-in .35s ease-out both;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ---------- 見出し ---------- */
h1, h2, h3, .title {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 .6em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

/* ピンクの背景の上に置く大見出し */
.title-on-pink {
  color: var(--white);
  text-shadow: 0 3px 0 rgba(43, 27, 36, .25);
}

/* 縫い目の下線がついた見出し */
.title-stitch {
  display: inline-block;
  padding-bottom: .2em;
  border-bottom: 3px dashed currentColor;
}

/* ---------- カード ---------- */
.card {
  position: relative;
  background-color: var(--cream);
  background-image: var(--knit-light);
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  padding: 24px 20px;
}
.card + .card { margin-top: 20px; }
.grid > .card + .card { margin-top: 0; }

/* 縫い目のような点線の飾り枠 */
.card.stitched::after,
.stitched::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(43, 27, 36, .28);
  border-radius: calc(var(--radius-card) - 8px);
  pointer-events: none;
}

/* 部屋の色のカード */
.card-room {
  background-color: var(--room);
  color: var(--room-ink);
}
.card-room.stitched::after { border-color: color-mix(in srgb, var(--room-ink) 45%, transparent); }

.card-white { background-color: var(--white); }

/* ---------- ボタン ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 52px;
  min-width: 48px;
  padding: 10px 28px;
  border: none;
  border-radius: var(--radius-btn);
  background-color: var(--btn-bg);
  background-image: var(--knit);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-block);
  transition: transform .25s var(--ease-poyon), box-shadow .25s var(--ease-poyon), filter .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { filter: brightness(1.06); }
/* 押すと、ぽよんと少し沈む */
.btn:active, .btn.is-pressed {
  transform: translateY(4px) scale(.97);
  box-shadow: var(--shadow-press);
  transition-duration: .08s;
}
.btn.is-poyon { animation: poyon .45s var(--ease-poyon); }

.btn-pink   { --btn-bg: var(--pink-deep); --btn-fg: var(--white); }
.btn-yellow { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
.btn-blue   { --btn-bg: var(--blue); --btn-fg: var(--white); }
.btn-room   { --btn-bg: var(--room); --btn-fg: var(--room-ink); }
.btn-ghost  {
  --btn-bg: var(--white); --btn-fg: var(--ink);
  background-image: none;
  border: 3px dashed rgba(43, 27, 36, .35);
}
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 48px; padding: 8px 20px; font-size: .95rem; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-press);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 入力欄 ---------- */
.field { display: block; margin-bottom: 20px; }
.field-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-weight: 700;
}
.field-help { display: block; margin-top: 4px; font-size: .9rem; color: var(--ink-soft); }

.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 3px solid rgba(43, 27, 36, .2);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* スマホで勝手に拡大されないように 16px 以上 */
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.field-error { display: block; margin-top: 4px; color: var(--danger); font-weight: 700; font-size: .95rem; }

/* ---------- お知らせ枠・注意枠・ポイント枠 ---------- */
.notice {
  position: relative;
  padding: 16px 18px 16px 56px;
  border-radius: 20px;
  background: var(--white);
  border: 3px dashed var(--yellow);
  color: var(--ink);
}
.notice + .notice { margin-top: 12px; }
.notice::before {
  content: "";
  position: absolute;
  left: 16px; top: 18px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background-color: var(--yellow); background-image: var(--knit);
}
.notice-title { display: block; font-family: var(--font-head); font-weight: 700; margin-bottom: 2px; }
.notice-date { display: block; font-size: .875rem; color: var(--ink-soft); }

.notice-point   { border-color: var(--blue); }
.notice-point::before { background-color: var(--blue); }
.notice-caution { border-color: var(--pink-deep); background: #FFF4F7; }
.notice-caution::before { background-color: var(--pink-deep); }

/* ---------- 「いまどこ」表示 と 「次にやること」 ---------- */
.where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 16px;
  padding: 6px 16px;
  list-style: none;
  border-radius: var(--radius-btn);
  background: rgba(255, 253, 249, .92);
  font-size: .95rem;
  width: fit-content;
  max-width: 100%;
}
.where li + li::before { content: "›"; margin-right: 8px; color: var(--ink-soft); }
.where [aria-current="page"] { font-weight: 700; }

.next-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 20px;
  background-color: var(--yellow); background-image: var(--knit);
  color: var(--ink);
  font-weight: 700;
}
.next-step::before {
  content: "つぎ";
  flex: none;
  padding: 2px 12px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--white);
  font-size: .875rem;
}

/* ---------- 小さな札（バッジ） ---------- */
.badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: var(--radius-btn);
  background: var(--room);
  color: var(--room-ink);
  font-size: .875rem;
  font-weight: 700;
}
.card-room .badge { background: var(--white); color: var(--ink); }
.badge-done { background: var(--success); color: var(--white); }

/* ---------- 読み込み中・空っぽ・エラー ---------- */
.state {
  padding: 32px 20px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink);
}
.state-error { border: 3px dashed var(--danger); }
.loader {
  display: inline-block;
  width: 44px; height: 44px;
  border-radius: 12px;
  background-color: var(--yellow); background-image: var(--knit);
  box-shadow: var(--shadow-press);
  animation: block-bounce .9s ease-in-out infinite;
}

/* ---------- 毛糸の案内役 ---------- */
.guide-char { display: inline-block; width: 120px; }
.guide-talk {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.guide-talk .bubble {
  position: relative;
  flex: 1;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-press);
}
.guide-talk .bubble::before {
  content: "";
  position: absolute;
  left: -10px; bottom: 18px;
  border: 10px solid transparent;
  border-right-color: var(--white);
  border-left: 0;
}

/* ---------- 便利な部品 ---------- */
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 2.3rem; }
  .container { padding: 40px 24px 80px; }
  .card { padding: 32px 28px; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 動き ---------- */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes poyon {
  0% { transform: scale(1); }
  30% { transform: translateY(4px) scale(1.06, .92); }
  60% { transform: translateY(-2px) scale(.97, 1.04); }
  100% { transform: none; }
}
@keyframes block-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

/* 動きを減らす設定の人には動きを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 鍵のかかった扉（結果画面・マイページで使う） ---------- */
.locked-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.locked-door {
  position: relative;
  min-height: 120px;
  padding: 36px 12px 14px;
  border: none;
  border-radius: 80px 80px 20px 20px;
  background-color: var(--room);
  background-image: var(--knit);
  color: var(--room-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  filter: grayscale(.55) brightness(.92);
  box-shadow: var(--shadow-press);
}
.locked-door .lock {
  display: block;
  width: 28px; height: 22px;
  margin: 0 auto 6px;
  border-radius: 6px;
  background: var(--ink);
  position: relative;
}
.locked-door .lock::before {
  content: "";
  position: absolute;
  left: 5px; top: -14px;
  width: 18px; height: 18px;
  border: 4px solid var(--ink);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.locked-door.is-shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px) rotate(-2deg); }
  75% { transform: translateX(6px) rotate(2deg); }
}
.lock-message:empty { display: none; }
.lock-message { margin-top: 14px; }

/* ---------- 押しやすさ（フェーズ6の見直し）：押せる部分は高さ48px以上 ---------- */
.where a { display: inline-flex; align-items: center; min-height: 48px; }