/* できたねランド — ゲームひろば
 * デザインシステム「あそびばポップ」v3
 * クリームの昼の遊び場 × ビビッド5色 × スクワークル × ステッカー × マスコット
 */

:root {
  /* パレット */
  --cream: #fff6e9;
  --white-warm: #fffdf8;          /* あたたかい白（カード面） */
  --ink: #2b2350;                 /* ネイビー本文 */
  --ink-soft: #6b6488;
  --orange: #ff7a1a;
  --yellow: #ffd23f;
  --pink: #ff5da2;
  --teal: #00c2b8;
  --purple: #7b5bf2;
  /* ソフト面（ブロブ・チップ地） */
  --orange-soft: #ffe5d0;
  --yellow-soft: #fff1bf;
  --pink-soft: #ffdcec;
  --teal-soft: #c9f3f0;
  --purple-soft: #e6defc;
  --navy-soft: #ddd9ee;
  /* グラデ（はなまるオレンジ #ff8a3d → ビビッドオレンジ） */
  --grad-orange: linear-gradient(135deg, #ff8a3d, #ff7a1a);
  /* 影・角 */
  --shadow: 0 8px 22px rgba(43, 35, 80, .14);
  --shadow-sm: 0 4px 12px rgba(43, 35, 80, .10);
  --squircle: 26px 20px 28px 22px / 22px 28px 20px 26px;
  --squircle-b: 20px 28px 22px 26px / 28px 20px 26px 22px;
  --radius: 20px;
  --radius-sm: 16px;
}

/* カテゴリカラー（チップ・カードのブロブで共用） */
.cat-all       { --cat: #2b2350; --cat-soft: var(--navy-soft); }
.cat-hiragana  { --cat: var(--orange); --cat-soft: var(--orange-soft); }
.cat-kazu      { --cat: var(--teal);   --cat-soft: var(--teal-soft); }
.cat-irokatachi{ --cat: var(--pink);   --cat-soft: var(--pink-soft); }
.cat-doubutsu  { --cat: var(--yellow); --cat-soft: var(--yellow-soft); --cat-ink: #2b2350; }
.cat-tokei     { --cat: var(--purple); --cat-soft: var(--purple-soft); }
.cat-okane     { --cat: var(--orange); --cat-soft: var(--orange-soft); }
.cat-seikatsu  { --cat: var(--teal);   --cat-soft: var(--teal-soft); }
.cat-anzen     { --cat: var(--pink);   --cat-soft: var(--pink-soft); }
.cat-kioku     { --cat: var(--yellow); --cat-soft: var(--yellow-soft); --cat-ink: #2b2350; }
.cat-puzzle    { --cat: var(--purple); --cat-soft: var(--purple-soft); }
.cat-eigo      { --cat: var(--teal);   --cat-soft: var(--teal-soft); }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* hidden属性はdisplay指定(.modal-back等のflex)より必ず優先する */
[hidden] {
  display: none !important;
}

html, body {
  touch-action: manipulation; /* ダブルタップズーム防止 */
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

/* ───────── 背景の浮遊ブロブ ───────── */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  opacity: .55;
  animation: blobFloat 16s ease-in-out infinite alternate;
}

.blob-1 { width: 300px; height: 300px; background: var(--orange-soft); top: -90px;  left: -100px; }
.blob-2 { width: 250px; height: 250px; background: var(--teal-soft);   top: 28%;   right: -110px; animation-duration: 21s; }
.blob-3 { width: 280px; height: 280px; background: var(--pink-soft);   bottom: -100px; left: -70px; animation-duration: 18s; }
.blob-4 { width: 180px; height: 180px; background: var(--yellow-soft); bottom: 16%; right: 6%;   animation-duration: 13s; }
.blob-5 { width: 150px; height: 150px; background: var(--purple-soft); top: 13%;   left: 36%;   animation-duration: 24s; }

@keyframes blobFloat {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(26px, -30px) rotate(12deg); }
}

/* ───────── ヘッダー ───────── */
.topbar {
  position: relative;
  background: #fff;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 8px;
  max-width: 1040px;
  margin: 0 auto;
}

.wave {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: -1px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.logo-img {
  height: 66px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 5px 9px;
  box-shadow: var(--shadow-sm);
  margin-bottom: -24px;
  position: relative;
  z-index: 6;
  animation: sway 6s ease-in-out infinite;
  transform-origin: 50% 30%;
}

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(6deg); }
}

.logo-text {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--ink);
  transform: rotate(-1.5deg);
}

.logo-text-land {
  color: var(--orange);
}

/* マスコット: カックン（波のうえからちょこんとお出迎え） */
.header-mascot {
  position: absolute;
  right: 14px;
  top: 100%;
  margin-top: -6px;
  width: 44px;
  height: 44px;
  z-index: 5;
  animation: bob 3.2s ease-in-out infinite;
}

body.parent-mode .header-mascot { display: none; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* 「ほごしゃのかた」控えめボタン */
.parent-link {
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--navy-soft);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform .12s;
}

.parent-link:active { transform: scale(.95); }

/* ───────── 子供画面 ───────── */
.kids-screen {
  max-width: 1040px;
  margin: 0 auto;
  padding: 6px 16px 64px;
}

.shelf-title {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  margin: 12px 0 4px;
  color: var(--ink);
  letter-spacing: .04em;
  transform: rotate(-1.2deg);
}

.shelf-title-img {
  display: inline-block;
  width: min(420px, 88%);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(43, 35, 80, .12));
}

/* カテゴリチップ */
.chips {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar { display: none; }

/* PC・タブレット横: 横スクロールでなく折り返して全カテゴリを見せる */
@media (min-width: 860px) {
  .chips {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--cat, var(--orange));
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, background .15s, color .15s;
}

.chip:active { transform: scale(.93); }

.chip.active {
  background: var(--cat, var(--orange));
  border-color: var(--cat, var(--orange));
  color: var(--cat-ink, #fff);
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 0 0 3.5px #fff, 0 6px 16px rgba(43, 35, 80, .20);
}

/* チップ選択で「くるん」 */
.chip.spin {
  animation: kurun .55s ease;
}

@keyframes kurun {
  0%   { transform: scale(1.08) rotateX(0); }
  50%  { transform: scale(1.16) rotateX(180deg); }
  100% { transform: scale(1.08) rotateX(360deg) rotate(-2deg); }
}

.chip-emoji { font-size: 20px; }

/* ぜんぶチップに同居するマスコット: ぴょこ */
.chip .pyoko {
  width: 27px;
  height: 28px;
  flex: none;
}

/* ゲームカード棚 */
.shelf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 6px;
}

@media (min-width: 600px) {
  .shelf { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 900px) {
  .shelf { grid-template-columns: repeat(4, 1fr); }
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 12px 18px;
  background: #fffdf8;
  border-radius: var(--squircle);
  box-shadow: var(--shadow);
  text-align: center;
  min-height: 48px;
  transform: rotate(-1.5deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.game-card:nth-child(even) {
  transform: rotate(1.5deg);
  border-radius: var(--squircle-b);
}

@media (hover: hover) {
  .game-card:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 12px 28px rgba(43, 35, 80, .18);
  }
}

.game-card:active { transform: scale(.97); }

/* タップで「ぷにっ」 */
.game-card.punch {
  animation: puni .45s ease;
}

@keyframes puni {
  0%   { transform: scale(1); }
  35%  { transform: scale(.94); }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 絵文字が乗るカテゴリ色ブロブ */
.game-art {
  position: relative;
  width: 94px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.game-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cat-soft, var(--orange-soft));
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
}

.game-card:nth-child(even) .game-art::before {
  border-radius: 45% 55% 40% 60% / 55% 45% 55% 50%;
}

.game-emoji {
  position: relative;
  font-size: 50px;
  line-height: 1.2;
  filter: drop-shadow(0 4px 6px rgba(43, 35, 80, .18));
}

.game-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
}

.game-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* タップで散る星 */
.star-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  font-size: 18px;
  line-height: 1;
  color: var(--cat, var(--yellow));
  pointer-events: none;
  animation: starFly .5s ease-out forwards;
}

@keyframes starFly {
  from {
    transform: translate(-50%, -50%) scale(.4) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate(calc(-50% + var(--dx, 40px)), calc(-50% + var(--dy, -40px))) scale(1.2) rotate(160deg);
    opacity: 0;
  }
}

/* むりょうステッカー / 🔒 */
.badge-free {
  position: absolute;
  top: -7px;
  left: -6px;
  z-index: 2;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  transform: rotate(-8deg);
}

.badge-lock {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: #fff;
  border: 3px solid var(--navy-soft);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transform: rotate(8deg);
}

/* 🔒カード: ちょっとおやすみ（怖くないトーン） */
.game-card.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(43, 35, 80, .06);
  pointer-events: none;
}

.game-card.locked .game-emoji {
  filter: grayscale(.35) opacity(.85);
}

.game-card.locked .game-art::before {
  opacity: .6;
}

/* 空のたな（マスコットが登場） */
.shelf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 12px;
  font-weight: 800;
  color: var(--ink-soft);
}

.shelf-empty .pyoko {
  width: 84px;
  height: 88px;
  animation: bob 3s ease-in-out infinite;
}

/* ───────── モーダル共通 ───────── */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(43, 35, 80, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal {
  background: var(--cream);
  border-radius: 30px 24px 32px 26px / 26px 32px 24px 30px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}

.modal h2 {
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.5;
}

.modal p { margin-bottom: 14px; }

/* 🔒モーダル: まるりんがおはなしする */
.kids-modal-emoji {
  font-size: 46px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.mascot-say {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  text-align: left;
}

.mascot-marurin {
  width: 96px;
  height: 96px;
  flex: none;
  animation: bob 3s ease-in-out infinite;
}

.speech-bubble {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 20px 16px 20px 16px / 16px 20px 16px 20px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}

.speech-bubble h2 {
  font-size: 19px;
  margin: 0;
  line-height: 1.55;
}

/* 大きなボタン */
.btn-big {
  display: block;
  width: 100%;
  min-height: 56px;
  border-radius: 18px 14px 18px 14px / 14px 18px 14px 18px;
  font-size: 18px;
  font-weight: 900;
  padding: 14px 18px;
  margin-top: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s;
}

.btn-big:active { transform: scale(.96); }

.btn-primary {
  background: var(--grad-orange);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(255, 122, 26, .35);
}

.btn-secondary {
  background: var(--teal-soft);
  color: #007a73;
}

.tiny-link {
  display: inline-block;
  margin-top: 16px;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
}

/* かけ算ゲート（カラフルだが保護者向けの落ち着き） */
.gate-note { font-size: 13.5px; color: var(--ink-soft); }

.gate-q {
  font-size: 32px;
  font-weight: 900;
  color: var(--purple);
  margin-bottom: 4px;
}

.gate-answer {
  font-size: 26px;
  font-weight: 900;
  min-height: 40px;
  letter-spacing: .1em;
  color: var(--ink);
}

.gate-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}

.gate-key {
  min-height: 56px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 3px solid var(--navy-soft);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .1s;
}

.gate-key:nth-child(4n+1) { border-color: var(--orange-soft); }
.gate-key:nth-child(4n+2) { border-color: var(--teal-soft); }
.gate-key:nth-child(4n+3) { border-color: var(--pink-soft); }
.gate-key:nth-child(4n)   { border-color: var(--purple-soft); }

.gate-key:active { transform: scale(.94); }

.gate-key.gate-ok {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.gate-msg {
  min-height: 24px;
  font-size: 14px;
  color: var(--pink);
  font-weight: 800;
  margin-top: 10px;
}

/* ───────── 保護者ページ（あえて静かに・白×ネイビー） ───────── */
body.parent-mode {
  background: #fff;
}

body.parent-mode .bg-blobs { display: none; }
body.parent-mode .wave { visibility: hidden; }
body.parent-mode .topbar { border-bottom: 1.5px solid #edebf4; }

.parent-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 64px;
  color: var(--ink);
}

.parent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.btn-back {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--navy-soft);
  font-size: 14px;
  color: var(--ink);
}

.demo-badge {
  background: var(--pink-soft);
  color: #d23b80;
  border: 1.5px solid var(--pink);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.parent-title {
  font-size: 24px;
  font-weight: 800;
  margin: 12px 0 16px;
  color: var(--ink);
}

.card {
  background: #fff;
  border: 1.5px solid #e9e7f1;
  border-radius: var(--radius-sm);
  padding: 22px 20px;
  margin-bottom: 18px;
}

.card h2 {
  font-size: 17px;
  color: var(--ink);
  border-left: 4px solid var(--orange);
  padding-left: 10px;
  margin-bottom: 12px;
}

.card ul { padding-left: 22px; }

.policy-list {
  list-style: none;
  padding-left: 0 !important;
}

.policy-list li { margin-bottom: 6px; }

.small-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
}

.small-note a { color: var(--purple); }

/* プラン表（プレミアムだけイエロー縁＋ステッカー） */
.plan-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 460px) {
  .plan-table { grid-template-columns: 1fr; }
}

.plan-col {
  border: 1.5px solid #e9e7f1;
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}

.plan-col h3 { font-size: 15px; margin-bottom: 4px; color: var(--ink); }

.plan-col ul {
  padding-left: 18px;
  font-size: 13.5px;
}

.plan-col-premium {
  position: relative;
  border: 3px solid var(--yellow);
  background: #fffcf2;
}

.plan-sticker {
  position: absolute;
  top: -13px;
  right: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  transform: rotate(5deg);
}

.plan-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 6px;
}

/* アカウント欄 */
.account-status {
  background: #f4f8f4;
  border: 1.5px solid #dcead9;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14.5px;
}

.account-status strong { color: #3d9a33; }

.account-status.plan-premium strong { color: var(--orange); }

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-tab {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--navy-soft);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.auth-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.auth-form label {
  display: block;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  margin: 10px 0 4px;
}

.auth-form input {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid var(--navy-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--purple);
}

.auth-msg {
  min-height: 22px;
  font-size: 13.5px;
  font-weight: 700;
  color: #d23b80;
  margin-top: 8px;
}

.auth-msg.ok { color: #3d9a33; }

.fallback-note {
  background: var(--purple-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink);
}

/* ───────── prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}