/* ゲームコンテナ */
    #game-root{
      display:flex;flex-direction:column;align-items:center;
      padding:16px 16px 180px;
      min-height:100vh;
      /* PC/タブレットでは styles/viewport.css の --play-root-max-width に応じて広がる */
      max-width:var(--play-root-max-width, 420px);
    }
    h1.game-title{
      font-size:clamp(1.5rem,5vw,2.2rem);color:var(--orange);
      margin-bottom:4px;text-shadow:2px 2px 0 rgba(224,123,57,.15);
    }
    #moves-display{font-size:.95rem;color:#888;margin-bottom:10px;}
    /* 難易度 */
    #difficulty-select{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;justify-content:center;}
    .diff-btn{
      padding:5px 16px;border-radius:20px;border:2px solid var(--orange);
      background:#fff;color:var(--orange);font-family:inherit;font-size:.82rem;cursor:pointer;
      transition:background .15s,color .15s;
    }
    .diff-btn.active{background:var(--orange);color:#fff;}
    /* ═══ カードグリッド（画像対応） ═══ */
    /* #game-root は flex + align-items:center のため、子要素に幅指定がないと
       shrink-wrap（内容サイズに縮小）されてしまう。#inline-game-area に明示的な
       幅を与え、#card-grid の width:100% が正しい基準幅を参照できるようにする。 */
    #inline-game-area{
      width:100%;max-width:var(--play-area-max-width, 370px);
      display:flex;flex-direction:column;align-items:center;
    }
    /* JSモジュールゲーム（ぬりえ・パズル等）用コンテナにも同じ基準幅を適用する。
       #inline-game-area と同じ flex+align-items:center のパターンで
       子要素（#coloring-root 等）を常に中央配置する。
       max-width が #js-game-root の幅を超えても子要素が左寄りにならない。 */
    #js-game-root{
      max-width:var(--play-area-max-width, 370px);
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    /* grid-template-columns は renderGrid() が JS でセットするためここでは初期値のみ */
    #card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:var(--play-area-max-width, 370px);width:100%;}
    /* 空白セル：カードを置かない中央マス（クリック不可・見た目も空白） */
    .card-blank{aspect-ratio:1;pointer-events:none;}
    .card{
      aspect-ratio:1;display:flex;align-items:center;justify-content:center;
      font-size:clamp(1.5rem,6vw,2.2rem);border-radius:13px;cursor:pointer;
      transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s,box-shadow .15s;
      border:2.5px solid transparent;
      overflow:hidden;position:relative;
      min-width:0;
    }
    .card.back{
      background:linear-gradient(135deg,#aac4e0,#8aaec8);border-color:#7a9ec0;
      box-shadow:0 3px 8px rgba(122,158,192,.3);
    }
    .card.back:hover{transform:scale(1.07);}
    .card.back .card-back-face{display:flex;}
    .card.flipped{background:#fff;border-color:var(--yellow);transform:scale(1.06);box-shadow:0 4px 14px rgba(240,192,64,.4);}
    .card.matched{background:linear-gradient(135deg,#c8f7c5,#a8e8a0);border-color:#4caf50;opacity:.72;cursor:default;}
    .card.flipped .card-front,
    .card.matched .card-front{display:flex;}
    /* 基本は非表示。.card.back / .card.flipped・matched の状態でのみ片面を表示する */
    .card-back-face{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:clamp(1.5rem,6vw,2.2rem);}
    .card-front{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
    .card-front img{width:80%;height:80%;object-fit:contain;pointer-events:none;}
    .card-front .card-emoji{font-size:clamp(1.5rem,6vw,2.2rem);}
    /* ─── アクセサリ overlay ─── */
    .card-image-wrap{position:relative;display:inline-block;line-height:0;width:80%;height:80%;}
    .card-image-wrap img.card-base-image{display:block;width:100%;height:100%;object-fit:contain;}
    .card-accessory{position:absolute;pointer-events:none;}
    @keyframes accessoryPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-15deg);}70%{transform:translate(-50%,-50%) scale(1.1) rotate(3deg);}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
    .card-accessory.pop-in{animation:accessoryPop .35s cubic-bezier(.34,1.56,.64,1) both;}
    @keyframes accessoryRemove{0%{opacity:1;}100%{opacity:0;transform:translate(-50%,-80%) rotate(20deg) scale(.8);}}
    .card-accessory.removing{animation:accessoryRemove .35s ease-in forwards;}
    /* ボタン */
    .btn-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
    .btn{padding:11px 26px;font-size:.95rem;border:none;border-radius:28px;cursor:pointer;font-family:inherit;font-weight:bold;transition:transform .14s,box-shadow .14s;}
    .btn:active{transform:scale(.95);}
    .btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(224,123,57,.4);}
    .btn-secondary{background:#fff;color:var(--orange);border:2px solid var(--orange);}
    .btn-replay{background:#5b8dee;color:#fff;box-shadow:0 4px 12px rgba(91,141,238,.4);}

    /* ═══ キャラクター：自由配置ラッパー ═══ */
    /*  各キャラクターは position:fixed で自由に動き回る  */
    .char-actor{
      position:fixed;
      z-index:300;
      display:flex;
      align-items:flex-end;
      gap:6px;
      /* ドラッグ中はtransitionを無効化するのでデフォルトはなし */
      touch-action:none;  /* キャラドラッグのため: ブラウザスクロールと競合させない */
      cursor:grab;
    }
    .char-actor.left  { flex-direction:row; }
    .char-actor.right { flex-direction:row-reverse; }
    .char-actor.dragging { cursor:grabbing; }

    /* ─ キャラクター画像ラッパー ─ */
    .char-img-wrap{
      flex-shrink:0;
      width:calc(var(--char-h) * .78);
      height:var(--char-h);
      position:relative;
      transform-origin:bottom center;
      /* ドラッグ中のスプリング・傾きはここに適用 */
      transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    }
    .char-actor.dragging .char-img-wrap{
      transition:none; /* ドラッグ中はtransition切る */
    }

    /* ─ キャラクター画像本体 ─ */
    .char-img{
      width:100%;height:100%;
      object-fit:contain;
      filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));
      transform-origin:bottom center;
      /* idle / pop はここに付ける */
    }

    /* idle浮遊 */
    .char-img.idle{
      animation:charIdle 2.8s ease-in-out infinite;
    }
    @keyframes charIdle{
      0%,100%{ transform:translateY(0) rotate(0deg) scaleX(1) scaleY(1); }
      28%    { transform:translateY(-4px) rotate(1.2deg) scaleX(.98) scaleY(1.02); }
      72%    { transform:translateY(-2px) rotate(-1deg) scaleX(1.01) scaleY(.99); }
    }
    /* 上下にゆれる(translateY) + 少し首をかしげる(rotate) は charIdle が既にカバーしている。
       残る「まばたき」だけを、目パーツ（.cci-part-eye。
       platform/CommentatorCharacterRenderer.inline.jsがpartIdに"eye"を含むパーツに自動付与）
       に対して追加する。目パーツを持たないキャラ（ちゃーちゃん等）は対象要素が無いだけで、
       何も起きず安全（フォールバック不要）。 */
    .cci-part-eye{
      animation: cciEyeBlink 4.6s ease-in-out infinite;
    }
    @keyframes cciEyeBlink{
      0%,92%,100%{ opacity:1; }
      94%        { opacity:.1; }
      96%        { opacity:1; }
    }

    /* タップぽよっ — スクワッシュ＆ストレッチ */
    .char-img.poyoyon{
      animation:charPoyo .55s cubic-bezier(.36,1.56,.64,1);
    }
    @keyframes charPoyo{
      0%  { transform:scaleX(1)    scaleY(1)    translateY(0); }
      18% { transform:scaleX(1.22) scaleY(.72)  translateY(6px); }  /* つぶれ */
      40% { transform:scaleX(.88)  scaleY(1.28) translateY(-14px); } /* 跳ね上がり */
      62% { transform:scaleX(1.1)  scaleY(.88)  translateY(2px); }  /* 着地つぶれ */
      80% { transform:scaleX(.96)  scaleY(1.06) translateY(-4px); } /* 小反発 */
      100%{ transform:scaleX(1)    scaleY(1)    translateY(0); }
    }

    /* ════════════════════════════════════════════════════
       実況キャラクター 共通アニメーション API
       CommentatorAnimator.setAnimation(id, name) が
       .char-img-wrap に is-* クラスを付け替えることで制御する。

       対象は .char-img（画像キャラ）と .cci-render（福笑いキャラ）
       の両方。子要素へのアニメーション適用は descendant セレクタで
       行い、ラッパー自体の transform（ドラッグ・スプリング戻り）と
       干渉しないようにする。

       is-* が付いている間は .char-img.idle の浮遊を止める
       （ラッパー側アニメーションと二重に動かさないため）。
    ════════════════════════════════════════════════════ */

    /* is-* が付いている間、旧 .char-img.idle アニメを停止 */
    .char-img-wrap[class*="is-"] > .char-img.idle {
      animation: none;
    }

    /* ── is-idle：ふわふわ待機（charIdle 流用） ── */
    .char-img-wrap.is-idle > .char-img,
    .char-img-wrap.is-idle > .cci-peek-wrap {
      animation: charIdle 2.8s ease-in-out infinite;
    }

    /* ── is-talking：小刻みに跳ねる ── */
    .char-img-wrap.is-talking > .char-img,
    .char-img-wrap.is-talking > .cci-peek-wrap {
      animation: charTalk 0.45s ease-in-out infinite;
    }
    @keyframes charTalk {
      0%,100% { transform: translateY(0)   scaleX(1)    scaleY(1); }
      25%     { transform: translateY(-5px) scaleX(.97)  scaleY(1.04); }
      75%     { transform: translateY(-2px) scaleX(1.02) scaleY(.98); }
    }

    /* ── is-happy：ぴょんと跳ねる（1回再生） ── */
    .char-img-wrap.is-happy > .char-img,
    .char-img-wrap.is-happy > .cci-peek-wrap {
      animation: charHappy 0.65s cubic-bezier(.36,1.56,.64,1) 1 forwards;
    }
    @keyframes charHappy {
      0%  { transform: scaleX(1)    scaleY(1)    translateY(0); }
      15% { transform: scaleX(1.18) scaleY(.76)  translateY(5px); }   /* 溜め */
      40% { transform: scaleX(.84)  scaleY(1.32) translateY(-20px); } /* 跳躍 */
      62% { transform: scaleX(1.12) scaleY(.86)  translateY(3px); }   /* 着地 */
      80% { transform: scaleX(.96)  scaleY(1.06) translateY(-6px); }  /* 小反発 */
      100%{ transform: scaleX(1)    scaleY(1)    translateY(0); }
    }

    /* ── is-sad：しょんぼり下がる（1回再生） ── */
    .char-img-wrap.is-sad > .char-img,
    .char-img-wrap.is-sad > .cci-peek-wrap {
      animation: charSad 0.6s ease-out 1 forwards;
    }
    @keyframes charSad {
      0%  { transform: translateY(0)   scaleX(1)   scaleY(1)    rotate(0deg); }
      30% { transform: translateY(6px) scaleX(1.06) scaleY(.9)   rotate(-2deg); }
      60% { transform: translateY(4px) scaleX(1.03) scaleY(.94)  rotate(1deg); }
      100%{ transform: translateY(4px) scaleX(1)   scaleY(.96)   rotate(0deg); }
    }

    /* ── is-walking：体を左右に揺らしながら歩く ── */
    .char-img-wrap.is-walking > .char-img,
    .char-img-wrap.is-walking > .cci-peek-wrap {
      animation: charWalk 0.42s ease-in-out infinite;
    }
    @keyframes charWalk {
      0%,100% { transform: translateY(0)   rotate( 0deg)  scaleX(1);    }
      25%     { transform: translateY(-4px) rotate( 3.5deg) scaleX(.98); }
      50%     { transform: translateY(0)   rotate( 0deg)  scaleX(1);    }
      75%     { transform: translateY(-4px) rotate(-3.5deg) scaleX(.98); }
    }

    /* prefers-reduced-motion：アニメーションを静止に近い形に弱める */
    @media (prefers-reduced-motion: reduce) {
      .char-img-wrap.is-idle    > .char-img,
      .char-img-wrap.is-idle    > .cci-peek-wrap,
      .char-img-wrap.is-talking > .char-img,
      .char-img-wrap.is-talking > .cci-peek-wrap,
      .char-img-wrap.is-happy   > .char-img,
      .char-img-wrap.is-happy   > .cci-peek-wrap,
      .char-img-wrap.is-sad     > .char-img,
      .char-img-wrap.is-sad     > .cci-peek-wrap,
      .char-img-wrap.is-walking > .char-img,
      .char-img-wrap.is-walking > .cci-peek-wrap {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    /* ドラッグ中：引っ張られ変形（wrapperにかける） */
    .char-img-wrap.dragging-lean{
      /* JS側で動的に skew / scale を付与する */
    }

    /* スプリング戻りアニメ（ドラッグ解放後） */
    .char-img-wrap.spring-back{
      animation:springBack .6s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes springBack{
      0%  { /* JSが設定した変形を起点にする */ }
      60% { transform:rotate(0deg) skewX(0deg) scaleX(1.08) scaleY(.94); }
      80% { transform:rotate(0deg) skewX(0deg) scaleX(.97)  scaleY(1.03); }
      100%{ transform:rotate(0deg) skewX(0deg) scaleX(1)    scaleY(1); }
    }

    /* ─ 吹き出し：char-actor から完全独立した fixed 要素 ─ */
    .char-bubble-fixed {
      position: fixed;
      z-index: 310;
      pointer-events: none;
      /* 座標はJSが毎フレーム更新 */
    }
    .bubble{
      position:relative;
      padding:7px 12px;
      border-radius:16px;
      border:2.5px solid #f0c040;
      background:#fffbe6;
      font-size:clamp(.72rem,3vw,.88rem);
      line-height:1.45;
      color:#4a3f30;
      width:fit-content;
      min-width:120px;
      max-width:min(42vw, 300px);
      box-shadow:0 3px 14px rgba(0,0,0,.13);
      opacity:0;
      transform:translateY(6px) scale(.92);
      transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
      pointer-events:none;
      word-break:break-word;
      overflow-wrap:break-word;
      white-space:normal;
    }
    .bubble.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
    .bubble.hidden-drag{ opacity:0 !important; pointer-events:none !important; }

    /* 吹き出し尻尾 — .char-bubble-fixed に .tail-left / .tail-right クラスで切替 */
    .char-bubble-fixed.tail-left  .bubble::after{
      content:'';position:absolute;bottom:12px;left:-11px;
      border:9px solid transparent;
      border-right-color:inherit;border-left:0;border-right-width:11px;
    }
    .char-bubble-fixed.tail-right .bubble::after{
      content:'';position:absolute;bottom:12px;right:-11px;
      border:9px solid transparent;
      border-left-color:inherit;border-right:0;border-left-width:11px;
    }
    .bubble .char-name{ font-size:.68rem;font-weight:bold;margin-bottom:3px;opacity:.62; }

    /* ─ ドラッグ中の影エフェクト（浮いて見せる） ─ */
    .char-actor.dragging .char-img{
      filter:drop-shadow(0 10px 22px rgba(0,0,0,.32));
    }
    /* タイトル・結果画面はキャラを非表示。ゲーム選択画面は下のID指定ルールで
       ひだり側だけ個別に再表示する（ベースルールとしては引き続き非表示にしておく）。 */
    body.screen-title    .char-actor,
    body.screen-title    .char-bubble-fixed,
    body.screen-gameselect .char-actor,
    body.screen-gameselect .char-bubble-fixed,
    body.screen-result   .char-actor,
    body.screen-result   .char-bubble-fixed { opacity:0; pointer-events:none; transition:opacity .3s; }
    body.screen-play .char-actor,
    body.screen-play .char-bubble-fixed { opacity:1; pointer-events:auto; transition:opacity .3s .1s; }

    /* ─ ゲーム選択画面：ひだり側の実況キャラだけ再表示（プレイ中と同じ左下位置を再利用） ─
       要件: 設定／ずかん／あそんだきろくボタンやカード・カルーセル操作を絶対に妨げないこと。
       ID指定（上の.char-actor/.char-bubble-fixedクラス指定より優先される）でひだり側だけ
       opacityを戻す。pointer-eventsはnoneのままにし、ドラッグ／タップ判定を持たせない
       （見た目だけの実況。クリックは常に下のカード/ボタンへ通り抜ける）。 */
    body.screen-gameselect #char-actor-left,
    body.screen-gameselect #bubble-wrap-left {
      opacity: 1;
      pointer-events: none;
      transition: opacity .3s .1s;
    }

    /* ─ ゲーム選択画面：みぎ側（かーちゃん／role: ambient-life）も同様に再表示 ─
       ちゃーちゃん（ひだり）と同じ理由でpointer-eventsはnoneのまま。
       かーちゃんはゲーム案内をしない生活感担当のため、表示頻度はJS側
       （platform/CommentatorSelectUI.inline.js の自走タイマー）で制御する。 */
    body.screen-gameselect #char-actor-right,
    body.screen-gameselect #bubble-wrap-right {
      opacity: 1;
      pointer-events: none;
      transition: opacity .3s .1s;
    }

    /* ═══ シリーズセレクター ═══ */
    #series-select-wrap{
      display:flex;flex-direction:column;align-items:center;
      gap:6px;margin-bottom:12px;width:100%;max-width:420px;
    }
    #series-select-wrap label{
      font-size:.8rem;color:#888;align-self:flex-start;margin-left:2px;
    }
    #series-tabs{
      display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;
    }
    .series-tab{
      padding:5px 12px;border-radius:18px;
      border:2px solid #ddd;background:#fff;
      font-family:inherit;font-size:.78rem;cursor:pointer;
      transition:.15s;display:flex;align-items:center;gap:4px;
      color:#666;
    }
    .series-tab.active{border-color:var(--orange);background:var(--orange);color:#fff;}
    .series-tab.locked{
      opacity:.45;cursor:not-allowed;
      border-style:dashed;
    }
    .series-tab .lock-icon{font-size:.7rem;}

    /* ═══ キャラクターカタログ ═══ */
    #char-select-wrap{
      display:flex;flex-direction:column;align-items:center;
      gap:4px;margin-bottom:10px;width:100%;max-width:420px;
    }
    #char-select-wrap .char-select-row{
      display:flex;gap:8px;align-items:center;width:100%;
    }
    .char-select-label{font-size:.75rem;color:#888;min-width:54px;}
    #char-select-tabs-left, #char-select-tabs-right{
      display:flex;gap:5px;flex-wrap:wrap;
    }
    .char-tab{
      padding:4px 10px;border-radius:16px;
      border:2px solid #ddd;background:#fff;
      font-family:inherit;font-size:.76rem;cursor:pointer;
      transition:.15s;display:flex;align-items:center;gap:3px;color:#666;
    }
    .char-tab.active{border-color:#9fa8da;background:#9fa8da;color:#fff;}
    .char-tab.locked{opacity:.4;cursor:not-allowed;border-style:dashed;}

    /* ═══ カードグリッド（画像対応） ═══ */

/* ═══ クリア ═══ */
/* result-overlay → screen-result に移行 */
    #result-box{background:#fff;border-radius:26px;padding:36px 28px;text-align:center;max-width:280px;width:90%;animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
    #result-box .re{font-size:3.5rem;}
    #result-box h2{color:var(--orange);margin:8px 0 4px;font-size:1.6rem;}
    #result-box p{color:#666;margin:4px 0;}
  
    /* ════════════════════════════════════════════════
       指カーソル
    ════════════════════════════════════════════════ */
    #finger-cursor {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      width: 40px;
      height: 52px;
      transform: translate(-6px, -4px);
      will-change: transform;
      transition: opacity .1s;
    }
    #finger-cursor img {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(1px 3px 4px rgba(0,0,0,.28));
      transition: transform .06s cubic-bezier(.34,1.56,.64,1);
    }
    #finger-cursor.pressed img {
      transform: scale(.88) translateY(3px);
    }
    #finger-cursor.replay-mode { opacity: .72; }
    /* カーソルカタログ選択UI */
    #cursor-select-wrap {
      display:flex;flex-direction:column;align-items:center;
      gap:4px;margin-bottom:10px;width:100%;max-width:420px;
    }
    #cursor-select-wrap label {
      font-size:.8rem;color:#888;align-self:flex-start;margin-left:2px;
    }
    #cursor-tabs {
      display:flex;gap:5px;flex-wrap:wrap;
    }
    .cursor-tab {
      padding:4px 10px;border-radius:16px;
      border:2px solid #ddd;background:#fff;
      font-family:inherit;font-size:.78rem;cursor:pointer;
      transition:.15s;display:flex;align-items:center;gap:4px;color:#666;
    }
    .cursor-tab.active {border-color:var(--orange);background:var(--orange);color:#fff;}
    .cursor-tab.locked {opacity:.42;cursor:not-allowed;border-style:dashed;}

    /* ══════════════════════════════════════════════════════════
       共通ゲームUI — #screen-play 内
    ══════════════════════════════════════════════════════════ */

    /* ── 共通ヘッダー（戻るボタン + ゲームタイトル） ── */
    .screen-header {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;
      width: 100%;
      max-width: min(100%, var(--play-root-max-width, 420px));
    }
    .screen-header .btn-back {
      flex-shrink: 0;
      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;
      color: var(--orange);
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(224,123,57,.2);
      transition: background .15s, color .15s, transform .12s;
    }
    .screen-header .btn-back:hover { background: var(--orange); color: #fff; }
    .screen-header .btn-back:active { transform: scale(.95); }
    .screen-header h2 {
      margin: 0;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* ── 共通メッセージ欄 ── */
    #game-message {
      font-size: 1.15rem;
      font-weight: bold;
      color: var(--orange);
      text-align: center;
      min-height: 1.8em;
      padding: 4px 12px 2px;
      width: 100%;
      max-width: min(100%, var(--play-root-max-width, 420px));
      transition: opacity 0.25s;
    }

    /* ── 共通クリアUI ── */
    .game-clear-ui {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 6px 0 14px;
      width: 100%;
      max-width: min(100%, var(--play-root-max-width, 420px));
      animation: gcui-fadein 0.3s ease;
    }
    @keyframes gcui-fadein {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* カードモーション領域（将来のアニメーション差し込み口） */
    .game-clear-motion {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .game-clear-card-img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      border-radius: 14px;
      box-shadow: 0 3px 12px rgba(0,0,0,.18);
    }

    /* ── モーションアニメーション（motionType別） ──────────────
       data-motion-type は null 未指定時も常に "bounce" がセットされる。
       既存レイアウトに transform を使っていない .game-clear-card-img
       にだけ animation をかけるので、他のtransformとは競合しない。 */
    .game-clear-motion[data-motion-type="bounce"] .game-clear-card-img {
      animation: gcm-bounce 1.4s ease-in-out infinite;
      will-change: transform;
    }
    .game-clear-motion[data-motion-type="vehicle"] .game-clear-card-img {
      animation: gcm-vehicle 1.6s ease-in-out infinite;
      will-change: transform;
    }
    .game-clear-motion[data-motion-type="fruit"] .game-clear-card-img {
      animation: gcm-fruit 1.8s linear infinite;
      will-change: transform;
    }
    .game-clear-motion[data-motion-type="sea"] .game-clear-card-img {
      animation: gcm-sea 2.4s ease-in-out infinite;
      will-change: transform;
    }

    /* bounce: ぽよんと上下に跳ねる（汎用デフォルト） */
    @keyframes gcm-bounce {
      0%, 100% { transform: translateY(0); }
      25%      { transform: translateY(-14px); }
      50%      { transform: translateY(0); }
      75%      { transform: translateY(-6px); }
    }
    /* vehicle: 左右に少し走る + 軽く上下に揺れる（乗り物系） */
    @keyframes gcm-vehicle {
      0%, 100% { transform: translateX(-10px) translateY(0); }
      25%      { transform: translateX(0)     translateY(-3px); }
      50%      { transform: translateX(10px)  translateY(0); }
      75%      { transform: translateX(0)     translateY(-3px); }
    }
    /* fruit: 少し左右移動 + 回転して転がる（フルーツ系） */
    @keyframes gcm-fruit {
      0%   { transform: translateX(-12px) rotate(0deg); }
      50%  { transform: translateX(12px)  rotate(180deg); }
      100% { transform: translateX(-12px) rotate(360deg); }
    }
    /* sea: ゆらゆら左右移動 + 少し傾く（海の生き物系） */
    @keyframes gcm-sea {
      0%, 100% { transform: translateX(-8px) rotate(-6deg); }
      50%      { transform: translateX(8px)  rotate(6deg); }
    }

    /* 子ども・前庭感覚に配慮: reduced motion 環境ではアニメーションを無効化 */
    @media (prefers-reduced-motion: reduce) {
      .game-clear-motion[data-motion-type] .game-clear-card-img {
        animation: none !important;
      }
    }

    /* ボタン行 */
    .game-clear-btns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .game-clear-btn {
      padding: 10px 24px;
      border: none;
      border-radius: 26px;
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: bold;
      cursor: pointer;
      touch-action: manipulation;
      transition: transform 0.12s, box-shadow 0.12s;
    }
    .game-clear-btn:active { transform: scale(0.94); }
    .game-clear-btn--primary {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 4px 12px rgba(224,123,57,.38);
    }
    .game-clear-btn--secondary {
      background: #fff;
      color: var(--orange);
      border: 2px solid var(--orange);
    }