/* ════════════════════════════════════════════════════════
       画面遷移システム
    ════════════════════════════════════════════════════════ */

    /* 全画面ラッパー */
    .screen {
      display:none;
      position:fixed;inset:0;
      flex-direction:column;
      align-items:center;
      overflow-y:auto;
      z-index:100;
    }
    .screen.active { display:flex; }

    /* アニメーション */
    @keyframes screenIn  { from { opacity:0; transform:scale(.96) translateY(10px); } to { opacity:1; transform:none; } }
    @keyframes screenOut { from { opacity:1; } to { opacity:0; } }
    .screen.entering { animation: screenIn  .32s cubic-bezier(.34,1.56,.64,1) forwards; }
    .screen.leaving  { animation: screenOut .2s ease forwards; }
    /* leaving終了後に opacity が残らないよう active時に明示的にリセット */
    .screen.active   { opacity: 1; }

    /* ─── タイトル画面 ─── */
    #screen-title {
      background: linear-gradient(160deg, #fff8e7 0%, #ffe0b2 100%);
      justify-content:center;
    }
    .title-inner {
      display:flex;flex-direction:column;align-items:center;
      gap:24px;padding:40px 24px;
      max-width:420px;width:100%;
    }
    .title-logo {
      font-size:clamp(2rem,10vw,3.2rem);
      font-weight:900;color:var(--orange);
      text-shadow:3px 4px 0 rgba(224,123,57,.18);
      line-height:1.2;text-align:center;
    }
    .title-logo .logo-icon { font-size:clamp(2.8rem,14vw,5rem); display:block; margin-bottom:4px; }
    .title-sub {
      font-size:clamp(.85rem,3.5vw,1.05rem);
      color:#888;letter-spacing:.06em;
    }
    .title-chars {
      display:flex;gap:20px;align-items:flex-end;
      min-height:90px;
    }
    .title-chars img {
      width:72px;height:88px;object-fit:contain;
      filter:drop-shadow(2px 4px 8px rgba(0,0,0,.15));
    }
    .title-tap-hint {
      font-size:.82rem;color:#bbb;
      animation: tapHint 1.6s ease-in-out infinite;
    }
    @keyframes tapHint { 0%,100%{opacity:.4} 50%{opacity:1} }

    /* ════════════════════════════════════════
       ゲーム選択画面 — Netflix Kids / YouTube Kids 風
    ════════════════════════════════════════ */
    /* タイトル画面・プレイ画面と同じ暖色系で世界観をつなぐ
       （旧: ダークネイビーの Netflix 風 → 子ども向けの明るいトーンへ） */
    #screen-gameselect {
      background: linear-gradient(160deg, #fff8e7 0%, #ffe9c4 55%, #ffddb0 100%);
      overflow: hidden;
    }

    /* ─── ヘッダー ─── */
    .gs-header {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      flex-shrink: 0;
    }
    .gs-title {
      font-size: clamp(1rem, 4vw, 1.25rem);
      font-weight: 900;
      color: #8a6a4a;
      letter-spacing: .04em;
    }
    .gs-title span { color: var(--orange); }
    /* 戻るボタン: プレイ画面の共通 .btn-back（styles/games.css）と同じ
       「白地＋オレンジ縁＋min-height:44px」ルールに統一する */
    .btn-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-height: 44px;
      padding: 8px 20px;
      border-radius: 24px;
      border: 2px solid var(--orange);
      background: #fff;
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      color: var(--orange);
      box-shadow: 0 2px 6px rgba(224,123,57,.2);
      transition: background .15s, color .15s, transform .12s;
    }
    .btn-back:hover { background: var(--orange); color: #fff; }
    .btn-back:active { transform: scale(.95); }

    /* ─── レーン構造（将来の複数カテゴリに対応） ─── */
    .gs-lanes {
      width: 100%;
      max-width: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-bottom: 200px;
    }
    .gs-lane {
      width: 100%;
      max-width: 100%;
      padding: 8px 0 4px;
    }
    .gs-lane-label {
      font-size: .78rem;
      font-weight: bold;
      color: rgba(138,106,74,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 0 20px;
      margin-bottom: 10px;
    }

    /* ─── カルーセルトラック ─── */
    .carousel-wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      /* 横方向のクリップは .gs-lanes の overflow-x:hidden に委ねる。
         active カードは内部に説明文を含み高さが可変になるため、
         ここで overflow:hidden にすると縦方向に見切れてしまう。 */
      touch-action: pan-y;    /* 縦スクロール許可・横はJS制御 */
    }
    .carousel-track {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 0 28px;
      /* 中央パディング: 先頭・末尾のカードも中央に来られるよう */
      will-change: transform;
      cursor: grab;
    }
    .carousel-track.grabbing { cursor: grabbing; }

    /* ─── ゲームカード（カルーセル版） ─── */
    .gc-card {
      flex-shrink: 0;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: transform .38s cubic-bezier(.34,1.38,.64,1),
                  opacity  .38s ease,
                  box-shadow .38s ease;
      /* デフォルト: 非選択（選択中との差をはっきりさせて「いま選ばれているのはこれ」を伝える） */
      transform: scale(.78);
      opacity: .45;
      filter: saturate(.7);
      box-shadow: 0 4px 16px rgba(138,106,74,.18);
      background: #fff;
    }
    .gc-card.active {
      transform: scale(1.08);
      opacity: 1;
      filter: none;
      z-index: 2;
      box-shadow: 0 12px 36px rgba(224,123,57,.35), 0 0 0 4px var(--orange), 0 0 0 9px rgba(224,123,57,.18);
    }
    .gc-card.coming-soon { cursor: default; }

    /* 誤タップ（準備中ゲームの開始操作）に対するフィードバック */
    @keyframes gcShake {
      0%, 100% { transform: translateX(0)    scale(1.05); }
      20%      { transform: translateX(-6px) scale(1.05); }
      40%      { transform: translateX(6px)  scale(1.05); }
      60%      { transform: translateX(-4px) scale(1.05); }
      80%      { transform: translateX(4px)  scale(1.05); }
    }
    .gc-card.gc-shake { animation: gcShake .35s ease; }

    /* サムネイル */
    .gc-thumb {
      width: 100%;
      aspect-ratio: 3/4;
      background: linear-gradient(135deg, #fff3d6, #ffe2b8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      position: relative;
      overflow: hidden;
    }
    .gc-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .gc-thumb .gc-emoji {
      font-size: clamp(3rem, 10vw, 5rem);
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
    }
    /* Coming Soon オーバーレイ */
    .gc-coming-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.55);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px;
    }
    .gc-coming-overlay .soon-icon { font-size: 2rem; }
    .gc-coming-overlay .soon-text {
      font-size: .72rem; color: #fff; font-weight: bold;
      background: rgba(255,255,255,.15);
      padding: 3px 10px; border-radius: 12px;
      letter-spacing: .04em;
    }
    /* カードタイトル帯 */
    .gc-label {
      background: #fff;
      padding: 8px 10px 10px;
    }
    .gc-label-title {
      font-size: clamp(.8rem,3.4vw,.98rem);
      font-weight: bold; color: #5a4632;
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ─── カード内詳細（選択中＝.gc-card.active のみ表示） ───
       下部の独立した情報パネルを廃止し、選択中カードに統合した部分。 */
    .gc-detail { display: none; }
    .gc-card.active .gc-detail {
      display: block;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(90,70,50,.1);
      white-space: normal;
    }

    /* ── 子ども向けメイン導線: ▶ あそぶ！ ──
       文字が読めなくても押せるよう「大きい・オレンジ・脈打つ」の3点で目立たせる。
       クリック処理は Carousel の既存タップ判定に委ねる（Carousel.inline.js 参照）。 */
    .gc-play-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 52px;
      border-radius: 26px;
      background: linear-gradient(135deg, var(--orange), #f0a060);
      color: #fff;
      font-size: 1.1rem;
      font-weight: 900;
      letter-spacing: .04em;
      box-shadow: 0 5px 16px rgba(224,123,57,.45);
      animation: gcPlayPulse 1.5s ease-in-out infinite;
    }
    .gc-play-btn .gc-play-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
      font-size: .85rem;
      padding-left: 2px; /* ▶ の光学中央合わせ */
    }
    @keyframes gcPlayPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .gc-play-btn { animation: none; }
    }

    /* ── 保護者向け補足情報（▶あそぶ！より下に小さく） ── */
    .gc-detail-grownup {
      margin-top: 8px;
      opacity: .75;
    }
    .gc-detail-desc {
      font-size: .7rem;
      color: #8a7a66;
      line-height: 1.5;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .gc-detail-meta {
      font-size: .66rem;
      color: #a08c74;
    }

    /* じゅんびちゅうゲーム用の案内（開始できないことを伝える） */
    .gc-detail-hint {
      display: inline-block;
      font-size: .78rem; font-weight: bold;
      padding: 8px 12px; border-radius: 14px;
    }
    .gc-detail-hint-soon {
      background: rgba(90,70,50,.08);
      color: #a08c74;
      width: 100%;
      text-align: center;
      box-sizing: border-box;
    }

    /* バッジ */
    .gc-badge-wrap {
      position: absolute; top: 8px; left: 8px;
      display: flex; gap: 4px; flex-wrap: wrap;
    }
    .gc-badge {
      font-size: .62rem; font-weight: bold;
      padding: 2px 7px; border-radius: 8px;
      backdrop-filter: blur(4px);
    }
    .gc-badge-new     { background: #ff4757; color: #fff; }
    .gc-badge-beta    { background: #747de8; color: #fff; }
    .gc-badge-soon    { background: rgba(90,70,50,.55); color: #fff; }
    .gc-badge-featured{ background: #ffa502; color: #fff; }

    /* ─── ナビゲーションボタン ─── */
    /* 子どもの指でも押せるよう 56px 以上を確保する */
    .carousel-btn {
      position: absolute; top: 50%; z-index: 5;
      transform: translateY(-50%);
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 3px solid var(--orange);
      background: #fff;
      color: var(--orange); font-size: 1.7rem; font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(224,123,57,.3);
      transition: background .15s, transform .15s;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    .carousel-btn:hover { background: #fff3e0; }
    .carousel-btn:active { transform: translateY(-50%) scale(.9); }
    .carousel-btn-prev { left: 8px; }
    .carousel-btn-next { right: 8px; }
    .carousel-btn.hidden { opacity: 0; pointer-events: none; }

    /* ─── ドットインジケーター ─── */
    .carousel-dots {
      display: flex; gap: 6px;
      justify-content: center;
      padding: 0 0 8px;
    }
    /* 見た目は 10px の丸、透明 border でタップ判定を約 26px に広げる */
    .carousel-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(138,106,74,.28);
      border: 8px solid transparent;
      background-clip: padding-box;
      box-sizing: content-box;
      cursor: pointer;
      transition: all .3s;
    }
    .carousel-dot.active {
      background: var(--orange);
      background-clip: padding-box;
      width: 24px; border-radius: 6px;
    }

    /* ─── メタタグ（年齢／所要時間／カテゴリ） ───
       旧・下部情報パネル用に定義されていたが、現在は選択中カード内の
       .gc-detail-meta から参照される（gs-info-panel 自体は廃止済み）。 */
    .gs-meta-tag {
      font-size: .7rem;
      padding: 3px 9px; border-radius: 12px;
      background: rgba(90,70,50,.08);
      color: #8a7a66;
    }
    .gs-meta-tag.age   { background: rgba(255,165,0,.15);  color: #cf8030; }
    .gs-meta-tag.time  { background: rgba(100,200,100,.15); color: #55a04a; }
    .gs-meta-tag.cat   { background: rgba(150,150,255,.15); color: #7880d8; }

    /* ─── 設定パネル（下からスライドアップ） ─── */
    #gs-settings-panel {
      flex-shrink: 0;
      padding: 0 16px 12px;
      display: none;
      flex-direction: column;
      gap: 8px;
    }
    #gs-settings-panel.show { display: flex; }
    .settings-section {
      background: rgba(255,255,255,.65);
      border-radius: 14px;
      border: 1px solid rgba(138,106,74,.18);
      padding: 12px 14px;
    }
    .settings-section h3 {
      font-size: .76rem; color: #9b8871;
      margin-bottom: 9px; letter-spacing: .05em;
    }
    .settings-row { display: flex; gap: 6px; flex-wrap: wrap; }

    /* 設定ボタン（歯車） */
    #gs-settings-toggle {
      display: flex; align-items: center; gap: 6px;
      margin: 0 16px 4px;
      padding: 10px 16px;
      min-height: 44px;
      box-sizing: border-box;
      background: rgba(255,255,255,.6);
      border: 1px solid rgba(138,106,74,.22);
      border-radius: 22px;
      color: #8a7a66;
      font-family: inherit; font-size: .8rem; cursor: pointer;
      transition: .15s; display: none;
    }
    #gs-settings-toggle.show { display: flex; }
    #gs-settings-toggle:hover { background: #fff; color: #5a4632; }
    #gs-settings-toggle .arrow { transition: transform .2s; }
    #gs-settings-toggle.open .arrow { transform: rotate(180deg); }

    /* diff-btn / series-tab / char-tab の明背景用スタイル調整 */
    .diff-btn, .series-tab, .char-tab, .cursor-tab {
      background: #fff !important;
      border-color: rgba(138,106,74,.3) !important;
      color: #8a7a66 !important;
    }
    .diff-btn.active, .series-tab.active, .char-tab.active, .cursor-tab.active {
      background: var(--orange) !important;
      border-color: var(--orange) !important;
      color: #fff !important;
    }

    /* ─── 結果画面（既存オーバーレイを置き換え） ─── */
    #screen-result {
      background:rgba(0,0,0,.55);
      justify-content:center;
      z-index:500;
    }
    #result-box {
      background:#fff;border-radius:28px;
      padding:32px 28px;max-width:340px;width:90%;
      display:flex;flex-direction:column;align-items:center;gap:10px;
      box-shadow:0 12px 40px rgba(0,0,0,.22);
    }
    .re { font-size:3.6rem;line-height:1; }
    #result-title { font-size:1.5rem;color:var(--orange); }
    #result-moves { font-size:.95rem;color:#888; }
    #result-actions {
      display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px;
    }
    .btn-result {
      width:100%;padding:13px;border:none;border-radius:24px;
      font-family:inherit;font-size:.95rem;font-weight:bold;cursor:pointer;transition:.14s;
    }
    .btn-result-primary { background:linear-gradient(135deg,var(--orange),#f0a060);color:#fff;box-shadow:0 4px 14px rgba(224,123,57,.35); }
    .btn-result-secondary { background:#f5f5f5;color:#666; }
    .btn-result:hover { transform:translateY(-1px); }

    /* ─── ゲームプレイ画面 ─── */
    #screen-play {
      background: var(--cream);
    }
    /* game-rootをscreen-play内に移動するため既存スタイルを調整 */
    #game-root {
      display:flex;flex-direction:column;align-items:center;
      padding:20px 16px 160px;
      min-height:100%;width:100%;
    }

    /* ─── サウンドせってい（フローティングボタン＋モーダル） ─── */
    #sound-settings-toggle {
      position: fixed; bottom: 14px; left: 12px; z-index: 600;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.5);
      color: #fff; font-size: 1.1rem; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      padding: 0;
    }
    body.screen-title #sound-settings-toggle,
    body.screen-gameselect #sound-settings-toggle {
      display: flex;
    }
    #sound-settings-toggle:active { transform: scale(.92); }

    /* ─── 全画面表示切り替えボタン（共通基盤 / FullscreenController） ───
       ゲームプレイ中のみ右上に表示。notch/safe-area を考慮し、既存の
       右上UI（ゲームタイトル等は左寄せのためここでは非衝突）と重ならないようにする。 */
    .fullscreen-toggle-btn {
      position: fixed;
      top:   calc(10px + env(safe-area-inset-top, 0px));
      right: calc(10px + env(safe-area-inset-right, 0px));
      z-index: 950;
      width: 40px; height: 40px; min-width: 40px; min-height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,.30); border: 1.5px solid rgba(255,255,255,.5);
      color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background .15s, transform .12s;
    }
    body.screen-play .fullscreen-toggle-btn,
    body.screen-title .fullscreen-toggle-btn,
    body.screen-gameselect .fullscreen-toggle-btn { display: flex; }
    .fullscreen-toggle-btn:active   { transform: scale(.9); }
    .fullscreen-toggle-btn.is-active { background: rgba(0,0,0,.45); }

    /* ─── 疑似全画面（Fullscreen API 非対応環境向けフォールバック） ───
       iPhone Safari など requestFullscreen が使えない環境で、可能な限り
       ゲーム領域を大きく表示するための代替手段。#screen-play は元々
       position:fixed;inset:0 だが、アドレスバー分の余白吸収や最前面化のため
       html/body 側にも同様の指定を重ねる。 */
    html.is-pseudo-fullscreen,
    html.is-pseudo-fullscreen body {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100dvh !important;
      margin: 0 !important;
      overflow: hidden !important;
      background: var(--cream, #fff8e7);
    }
    html.is-pseudo-fullscreen body {
      z-index: 2147483647;
    }

    #sound-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.62); z-index: 900;
      align-items: center; justify-content: center; padding: 16px;
    }
    #sound-modal.open { display: flex; }
    #sound-box {
      background: #fff; border-radius: 24px;
      padding: 22px 20px 18px; width: 100%; max-width: 360px;
      animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
    }
    #sound-box h2 { font-size: 1.15rem; color: var(--orange); margin-bottom: 16px; }
    .sound-row { margin-bottom: 18px; }
    .sound-row-label {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px; font-size: .92rem; color: #555; font-weight: bold;
    }
    .sound-enable-toggle {
      padding: 5px 16px; border-radius: 14px; border: none;
      font-family: inherit; font-size: .78rem; font-weight: bold; cursor: pointer;
      background: var(--orange); color: #fff; transition: .15s;
      min-width: 52px;
    }
    .sound-enable-toggle.off { background: #ddd; color: #888; }
    .sound-slider {
      width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
      background: #eee; border-radius: 4px; cursor: pointer; outline: none;
    }
    .sound-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 20px; height: 20px;
      background: var(--orange); border-radius: 50%; box-shadow: 0 2px 6px rgba(224,123,57,.5);
    }
    .sound-slider::-moz-range-thumb {
      width: 20px; height: 20px; border: none; border-radius: 50%;
      background: var(--orange); box-shadow: 0 2px 6px rgba(224,123,57,.5);
    }
    #sound-modal-close {
      width: 100%; margin-top: 6px; padding: 10px; background: #eee; color: #555;
      border: none; border-radius: 20px; font-family: inherit; font-size: .9rem;
      cursor: pointer; font-weight: bold;
    }

/* ══════════════════════════════════════════════════════════
   難易度フッター（platform/DifficultyUI.inline.js が描画）
══════════════════════════════════════════════════════════ */
#difficulty-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 6px 0 10px;
}
.difficulty-footer__inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.difficulty-btn {
  min-width: 92px;
  padding: 8px 14px;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: .9rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1.2;
  transition: transform .1s, background .15s;
}
.difficulty-btn:active { transform: scale(.95); }
.difficulty-btn.active {
  background: var(--game-theme, #F0C040);
  border-color: transparent;
  color: #fff;
}
.difficulty-btn.locked {
  background: #eee;
  color: #999;
  cursor: default;
  opacity: .85;
}
.difficulty-btn.locked:active { transform: none; }
.difficulty-btn__sub {
  display: block;
  font-size: .68rem;
  font-weight: normal;
  margin-top: 2px;
}

/* ── 難易度解放モーダル ── */
#difficulty-unlock-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 3000;
}
#difficulty-unlock-modal.show { display: flex; }
#difficulty-unlock-box {
  background: #fff;
  border-radius: 20px;
  padding: 26px 30px;
  max-width: 320px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  animation: difficulty-unlock-pop .3s ease-out;
}
@keyframes difficulty-unlock-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.difficulty-unlock-emoji { font-size: 3rem; }
#difficulty-unlock-box h2 { margin: 8px 0 4px; color: #444; }
#difficulty-unlock-text  { margin: 4px 0 16px; color: #666; }
#difficulty-unlock-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 24px;
  background: var(--game-theme, #F0C040);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
    .difficulty-unlock-emoji {
      font-size: 3rem;
      line-height: 1;
    }
    #difficulty-unlock-box h2 {
      font-size: 1.4rem;
      color: var(--orange, #E07B39);
      margin: 0;
    }
    #difficulty-unlock-text {
      font-size: 1rem;
      color: #555;
      margin: 0;
    }
    #difficulty-unlock-close {
      margin-top: 8px;
      padding: 11px 32px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(135deg, var(--orange, #E07B39), #f0a060);
      color: #fff;
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(224,123,57,.35);
      transition: transform .1s;
    }
    #difficulty-unlock-close:active {
      transform: scale(.94);
    }