body { font-family: "Zen Kaku Gothic New", sans-serif; background: #FFF8EC; color: #1D2B53; }

/* 空と丘の背景 */
.sky {
  background:
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(180deg, #3FA9F5 0%, #7CCBFF 45%, #CFEFFF 75%, #E9F8FF 100%);
  position: relative; overflow: hidden;
}
.sky::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -2px; height: 110px;
  background:
    radial-gradient(ellipse 40% 90% at 20% 100%, #4CAF3F 60%, transparent 61%),
    radial-gradient(ellipse 45% 100% at 70% 100%, #5DBE4A 60%, transparent 61%),
    radial-gradient(ellipse 35% 70% at 100% 100%, #46A63A 60%, transparent 61%);
}
.sky.noh::after { display: none; }
.sky.noh { background: linear-gradient(180deg, #3FA9F5 0%, #7CCBFF 50%, #CFEFFF 100%); }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .85; filter: blur(.5px); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 999px; }
.cloud::before { width: 55%; height: 140%; left: 15%; top: -60%; }
.cloud::after { width: 40%; height: 110%; right: 12%; top: -40%; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(40px); } }
.cloud { animation: drift 9s ease-in-out infinite alternate; }

/* 立体感のあるボタン */
.btn-sun { background: #FFC83D; color: #1D2B53; box-shadow: 0 4px 0 #D99A00; transition: transform .08s, box-shadow .08s; }
.btn-sun:active { transform: translateY(3px); box-shadow: 0 1px 0 #D99A00; }

.card { background: #fff; border-radius: 20px; box-shadow: 0 2px 0 rgba(29,43,83,.06), 0 10px 30px -12px rgba(29,43,83,.18); }

/* 進捗バーが伸びるアニメーション */
.bar > i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; } .bar > i { transition: none; }
}

/* ふわふわ浮くキャラクター */
@keyframes floaty { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-12px) rotate(2deg); } }
.float { animation: floaty 3s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* イラスト付きプルダウン：THはタイルで並べる */
.fsel [role=listbox].fgrid:not(.hidden) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; min-width: 15rem; }
.fsel .fgrid [role=option] { flex-direction: column; gap: .1rem; padding: .4rem .2rem; text-align: center; justify-content: center; }
.fsel .fgrid [role=option] img { width: 2.75rem; height: 2.75rem; }
.fsel .fgrid [role=option].noicon { grid-column: 1 / -1; flex-direction: row; padding: .55rem; }
/* エピック装備の枠 */
.epic { background: linear-gradient(160deg, #F3E8FF, #E9D5FF); box-shadow: 0 0 0 2px #A855F7; }

/* ---------- スマホの使いやすさ ---------- */
/* 押したときの青い四角を消し、ダブルタップの拡大で操作が遅れないようにする */
a, button, select, label, summary, [role=tab], [role=option] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* 日本語の見出しが変なところで折り返さないように（対応しているブラウザだけ） */
h1, h2, h3 { word-break: auto-phrase; }
@media (max-width: 767px) {
  /* iPhone は 16px より小さい入力欄を押すと画面が拡大されるので、スマホでは 16px にそろえる */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
}
@media (max-width: 639px) {
  /* ボタンが何段にも折り返す所は、スマホでは1列の横スクロールにする */
  .scroll-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: -0.75rem; padding-inline: 0.75rem; scroll-padding-inline: 0.75rem; }
  .scroll-row::-webkit-scrollbar { display: none; }
  .scroll-row > * { flex-shrink: 0; }
}
/* 下からのメニュー */
dialog#menu[open] { animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog#menu[open] { animation: none; } }
/* ページ内リンクで飛んだとき、上の固定ヘッダーに見出しが隠れないように */
html { scroll-padding-top: 5rem; }

/* ---------- ページ上の見出し帯（pageHero） ---------- */
/* 文字の白がどんな背景でも読めるように、紺のふちどり */
.hero-title { text-shadow: 0 3px 0 rgba(29,43,83,.45); -webkit-text-stroke: 1px rgba(29,43,83,.35); paint-order: stroke fill; }
/* 雲：右上の角に小さく（キャラクターの上・文字の外） */
.hero-cloud { width: 64px; height: 16px; top: 12px; right: 18px; opacity: .9; }
/* 丘：低くして、説明の文字にかぶらないように */
.sky.hero::after { height: 34px; }
@media (min-width: 768px) {
  .hero-cloud { width: 120px; height: 28px; top: 22px; right: 26%; }
  .sky.hero::after { height: 90px; }
}

/* ヘッダーの言語メニュー（閉じているときは「🌐 ES」だけ。ゲーム風の入力欄の色はつけない） */
#lang-sel, .game #lang-sel { width: 5.4rem; background: transparent !important; color: #fff; border-color: rgba(255,255,255,.35) !important; box-shadow: none; }
#lang-sel option { color: #1D2B53; background: #fff; }
@media (min-width: 640px) { #lang-sel, .game #lang-sel { width: 4.6rem; } }