/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: sweets
 * BUILD_ID: YR-2025-0826-K6                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/*==================================================================
  style.css — タイピングスイーツ「あ～ん」 用スタイル（最終版）
==================================================================*/
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "M PLUS Rounded 1c", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  color: #3a2d2d;
  background: radial-gradient(50% 50% at 50% 0%, #fff6f8 0%, #ffeaf2 60%, #ffe0ff 100%);
}
/* ===== Playfield Background (差し替え用) ===== */
:root{
  --playfield-bg: url("img/vacation_lounge_bg_960x720.jpg");  /* 通常 */
  --bonus-bg:     url("img/bonus_bg_960x720.jpg");           /* ボーナス */

  /* ▼ 白幕（背景の白い膜） */
  --veilA: .10;        /* 通常時の白幕の濃さ */
  --veilStrongA: .72;  /* 強め白幕（古いbonus-mode定義用） */
}

/* ▼ 白幕OFF（ボタンで切替） */
body.veil-off{
  --veilA: 0;
  --veilStrongA: 0;
}



.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(90deg, #ffb3d1, #ffd3a3);
  color: #633; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.app-header h1 { margin: 0; font-size: 20px; letter-spacing: .12em; }
.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar button, .toolbar a {
  appearance: none; border: 0; text-decoration: none;
  padding: 8px 12px; border-radius: 12px; font-weight: 700;
  background: #fff; color: #574;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* 白幕トグルの見た目（状態が分かるように少し色を変える） */
#btnVeil[aria-pressed="true"]{ background: #ffedf6; }
#btnVeil[aria-pressed="false"]{ background: #fff; opacity: .92; }

.layout{
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px;

  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    "game rank"
    "kbd  kbd";
  gap: 12px;
}

/* 各ペインの割り当て */
.game-pane{ grid-area: game; }
.rank-pane{ grid-area: rank; }
#softkbdDock{ grid-area: kbd; }

/* スマホ/タブレット縦：ゲーム → キーボード → rank-pane の順にする */
@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "game"
      "kbd"
      "rank";
  }

  /* toolbar見切れ対策：小さい幅だけ左寄せ（横スクロールしても欠けにくい） */
  .toolbar{
    justify-content: flex-start;
  }
}

.game-pane, .rank-pane {
  background: #ffffffaa; border-radius: 18px; padding: 12px;
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.15);
}

.canvas-wrap{
  position: relative; /* ← 追加：overlay(絶対配置)の基準をキャンバス枠にする */

background-image:
  linear-gradient(180deg, rgba(255,255,255,var(--veilA)), rgba(255,240,248,var(--veilA))),
  var(--playfield-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px; overflow: hidden; border: 3px solid #ffdef1;
}

#game { width: 100%; height: 100%; display: block; }
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,248,.92));
}
.diff-buttons{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.diff-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff-group-title{
  margin-top: 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  color: #8a2c57;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.diff-buttons button[data-mode="sweetwords"]{
  border-color: #ff7db3;
  box-shadow: 0 6px 18px rgba(255,125,179,.18);
}

.diff-buttons button {
  padding: 10px 14px; border-radius: 14px;
  background: #fff; border: 2px solid #ffa9cf; font-weight: 800;
}
.diff-buttons button{
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;                 /* ←常に白 */
  border: 2px solid #ffa9cf;
  font-weight: 800;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* ←追加：ホバー時だけピンク */
.diff-buttons button:hover,
.diff-buttons button:focus-visible{
  background: #ffedf6;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,105,180,.18);
}

/* 難易度ボタン：2行目（説明文） */
.diff-buttons button .diff-sub{
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
}

.overlay .note { font-size: 12px; color: #775; }
.hud {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px;
}
.hud > div { background: #fff; border-radius: 12px; padding: 8px; text-align: center; font-weight: 800; }
.rank-controls { display: grid; gap: 8px; }
.rank-controls input { padding: 6px 8px; border-radius: 10px; border: 2px solid #ffd1ea; width: 100%; }
.rank-controls .row { display: flex; gap: 8px; }
.rank-controls button, .modal-actions button {
  padding: 8px 12px; border-radius: 12px; border: 0; font-weight: 800; background: #ffeaf5;
}
.rank-controls .danger { background: #ffe1e1; }
.rank-list { margin: 12px 0 0; padding: 0 0 0 20px; max-height: 420px; overflow: auto; }
.rank-list li { margin: 6px 0; padding: 6px 8px; background: #fff; border-radius: 10px; list-style: decimal; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } .rank-list { max-height: 240px; } }


/* --- sprinkle choco overlay (add-on) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32; /* 全体の濃さ。もっと濃くしたい時は .45 などへ */
  /* 細い棒（3x12px）をいろんな色と角度で散らす */
  background-image:
    /* 既存20本（文法を 色 0, 色 100% に修正） */
    linear-gradient(25deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-30deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(45deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-45deg, #caffbf 0, #caffbf 100%),
    linear-gradient(70deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-70deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(15deg,  #7db0ff 0, #7db0ff 100%),
    linear-gradient(-20deg, #ffec99 0, #ffec99 100%),
    linear-gradient(35deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-35deg, #c7a0ff 0, #c7a0ff 100%),
    linear-gradient(55deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-60deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(25deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-10deg, #caffbf 0, #caffbf 100%),
    linear-gradient(80deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-80deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(5deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-25deg, #ffec99 0, #ffec99 100%),
    linear-gradient(40deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-40deg, #c7a0ff 0, #c7a0ff 100%),
    /* 追加20本（密度アップ） */
    linear-gradient(18deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-22deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(52deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-52deg, #caffbf 0, #caffbf 100%),
    linear-gradient(65deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-65deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(8deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-28deg, #ffec99 0, #ffec99 100%),
    linear-gradient(30deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-30deg, #c7a0ff 0, #c7a0ff 100%),
    linear-gradient(12deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-12deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(38deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-38deg, #caffbf 0, #caffbf 100%),
    linear-gradient(72deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-72deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(2deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-18deg, #ffec99 0, #ffec99 100%),
    linear-gradient(48deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-48deg, #c7a0ff 0, #c7a0ff 100%);
  background-size:
    /* 2x10px を40回 */
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px;
  background-repeat: no-repeat;
  /* ランダム風に配置（％指定でレスポンシブに） */
  background-position:
    /* 既存20点 */
    5% 10%, 15% 35%, 25% 18%, 35% 8%, 45% 28%,
    55% 12%, 65% 22%, 75% 6%,  85% 26%, 95% 14%,
    12% 60%, 22% 72%, 32% 54%, 42% 66%, 52% 58%,
    62% 74%, 72% 62%, 82% 70%, 92% 56%, 50% 44%,
    /* 追加20点（密度アップ） */
    2% 8%, 8% 18%, 18% 10%, 28% 22%, 38% 12%,
    48% 20%, 58% 8%, 68% 18%, 78% 10%, 88% 22%,
    7% 68%, 17% 78%, 27% 62%, 37% 74%, 47% 66%,
    57% 76%, 67% 64%, 77% 72%, 87% 60%, 97% 68%;
  /* ほんのり立体感（なくてもOK） */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  z-index: 0; /* UIより奥に置く。前面に置きたい時は 1 に */
}

/* ====== Card Collection ====== */
.card-collection { margin-top: 14px; }
.card-collection h2 { margin: 0 0 8px; font-size: 18px; }

/* ====== Card Collection : 16 cards (4 x 4) ====== */
#cardGrid.card-grid{
  display: grid;
  width: min(400px, 100%);
  height: 340px;            /* ★ 4行分見える高さに（目安） */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);  /* ★ 3 → 4 */
  gap: 8px;
}

/* 重要：既存の aspect-ratio: 3/4 を無効化して、枠内に収める */
#cardGrid.card-grid .slot{
  aspect-ratio: auto;       /* これで「3段目が見えない」を防げます */
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px dashed #ffd1ea;
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) inset;
}

/* 「？」を少し小さく */
#cardGrid.card-grid .slot::after{
  content: "？";
  font-weight: 900;
  font-size: 22px;
  color: #d8b0c9;
}

/* 右上の個数バッジを小さめ（任意） */
#cardGrid .slot .card-badge{
  top: 4px; right: 4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 22px;
}




/* ====== Bonus Overlay ====== */
.bonus-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.2);
  z-index: 9999;
}
.bonus-box {
  background: #fff;
  border: 4px solid #ffa9cf;
  border-radius: 16px;
  padding: 18px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(255,105,180,.25);
}
.bonus-title {
  font-weight: 900; font-size: 22px; letter-spacing: .1em;
  margin-bottom: 8px;
}
.bonus-count {
  font-weight: 900; font-size: 64px; line-height: 1; margin: 4px 0;
  text-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.bonus-note { margin: 0; font-size: 14px; color: #775; }

/* fix: ensure hidden attribute wins for bonus overlay */
.bonus-overlay[hidden]{display:none !important;}

/* ====== Bonus Mode Background ====== */
.canvas-wrap.bonus-mode {
/* 画像は残したまま、ボーナス色をオーバーレイ */
  background-image:
    linear-gradient(180deg, rgba(230,180,34,.40), rgba(230,180,34,.40)),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,240,248,.72)),
    var(--playfield-bg) !important;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==== Bonus Mode: 背景画像をボーナス専用に差し替え ==== */
body.bonus-mode .canvas-wrap{
  background-image:
    /* ボーナス感の色味（薄く重ねる） */
    linear-gradient(180deg, rgba(255, 215, 0, .22), rgba(255, 105, 180, .14)),
    /* 全体の白い膜（読みやすさ確保。濃さは好みで） */
    linear-gradient(180deg, rgba(255,255,255,var(--veilA)), rgba(255,240,248,var(--veilA))),

    /* ボーナス背景画像 */
    var(--bonus-bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image .25s ease, filter .25s ease;
}


/* --- Card count badge --- */
#cardGrid .slot { position: relative; }
#cardGrid .slot .card-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  font-weight: 700; font-size: 12px; line-height: 26px;
  text-align: center;
  background: rgba(0,0,0,0.75);
  color: #fff;
  backdrop-filter: blur(2px);
  user-select: none; pointer-events: none;
}
#cardGrid .slot .card-badge.is-zero { opacity: .35; }


/* --- Collection header & reset button --- */
.card-collection .collection-header { display:flex; align-items:center; gap:12px; }
.card-collection #resetCardsBtn {
  appearance:none; border:0; padding:6px 10px; border-radius:10px;
  font-weight:700; font-size:12px; cursor:pointer;
  background:#fff; color:#444; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.card-collection #resetCardsBtn:hover { transform: translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* ==== Card Roulette Overlay ==== */
.roulette-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 10000;
}
.roulette-overlay[hidden]{ display:none !important; }
.roulette-box{
  background:#fff;
  border:4px solid #ffa9cf;
  border-radius:16px;
  padding:18px 22px;
  text-align:center;
  box-shadow:0 10px 30px rgba(255,105,180,.25);
}
.roulette-image{
  width:min(42vmin, 340px);
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.roulette-label{
  margin-top:8px;
  font-weight:900;
  font-size:18px;
  letter-spacing:.1em;
  color:#755;
}

.bg-pick{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:8px;

  /* ★欠け防止：高さを確保 */
  padding:10px 12px;
  min-height:44px;
  line-height:1.4;
  white-space:nowrap;

  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}

.bg-pick .bg-label{
  display:inline-flex;
  align-items:center;
  line-height:1.2;
}

.bg-pick .file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:2px solid #ffa9cf;
  background:#fff;
  font-weight:800;
  line-height:1;
}

.bg-pick .file-name{
  font-size:12px;
  font-weight:800;
  color:#775;
  max-width: 14em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ネイティブの file UI を見えなくする（クリックは label 経由で通る） */
.bg-pick input[type="file"]{
  position:absolute;
  inset:auto auto 0 0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}


.overlay  {
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,240,248,.10)); /* 画面上に薄いグラデを重ねる */
}

/* 難易度オーバーレイ：canvas-wrap を基準に全面表示＆中央揃えを強制 */
.canvas-wrap > .overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ボタン群（箱）の幅を内容に合わせ、中央で崩れないようにする */
.overlay .diff-box{
  width: max-content;
  margin: 0 auto;
}

/* ====== Card click -> Detail Modal ====== */
#cardGrid .slot.filled{
  cursor: pointer;
  border-style: solid;
  border-color: #ffa9cf;
}
#cardGrid .slot.filled:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* dialog */
.card-detail{
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: transparent;
}
.card-detail::backdrop{
  background: rgba(0,0,0,.35);
}
.card-detail-box{
  background: #fff;
  border: 4px solid #ffa9cf;
  border-radius: 16px;
  padding: 14px 14px 12px;
  width: min(520px, 92vw);

  /* ▼追加：縦を必ず収める */
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;

  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.card-detail-img{
  width: 100%;
  /* ▼ここが重要：画像の最大高さを画面に合わせる */
  max-height: 52vh;

  /* ▼切り抜かずに全体表示（縦が長い画像でもOK） */
  object-fit: contain;

  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.card-detail-meta{
  overflow: auto;
}

.card-detail-title{
  margin: 10px 2px 4px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #633;
}
.card-detail-desc{
  margin: 0 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #664;
}
.card-detail-actions{
  display: flex;
  justify-content: flex-end;
}
.card-detail-actions button{
  padding: 8px 12px;
  border-radius: 12px;
  border: 0;
  font-weight: 800;
  background: #ffeaf5;
}

#cardLangToggle{
  margin-right: 10px;
  background: #eef6ff;
}
#cardLangToggle:hover{
  filter: brightness(0.98);
}

/* ===== Seasonal FX layer (snow / sakura) ===== */
#game {
  position: relative;
  z-index: 2;   /* ← ボンボンを前面へ */
}

.fx-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;   /* ← 雪/桜を背面へ（背景よりは手前） */
}

/* 既存 overlay は前面に */
.canvas-wrap > .overlay{ z-index: 10; }

/* ツールバーの見た目（bg-pickと雰囲気を揃える） */
.fx-pick{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}
.fx-pick select{
  border: 0;
  background: transparent;
  font-weight: 800;
}
.fx-color{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}
.fx-color input[type="color"]{
  width: 34px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* =========================================================
   Difficulty Overlay Centering (チャレンジ3つでも中央維持)
   - Row1: やさしい / ふつう / むずかしい
   - Row2: チャレンジ スイーツ / チャレンジ くだもの / チャレンジ みもの
========================================================= */
/* =========================================================
   Base Difficulty (やさしい/ふつう/むずかしい) を中央の主役に
   - 1: やさしい = 緑
   - 2: ふつう   = 青
   - 3: むずかしい = 濃いピンク
========================================================= */

/* 3ボタンの行を“中央の箱”として目立たせる（※diff-baseに変更） */
#difficulty .diff-base{
  margin: 12px 0 12px;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* 3ボタン自体を大きめ＆強めに */
#difficulty .diff-base > button{
  min-width: 190px;
  padding: 12px 16px;
  border-width: 3px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* やさしい（緑） */
#difficulty .diff-base > button:nth-child(1){
  border-color: #35c96a;
  background: linear-gradient(180deg, rgba(53,201,106,.18), rgba(255,255,255,.94));
}

/* ふつう（青） */
#difficulty .diff-base > button:nth-child(2){
  border-color: #2f86ff;
  background: linear-gradient(180deg, rgba(47,134,255,.18), rgba(255,255,255,.94));
}

/* むずかしい（濃いピンク） */
#difficulty .diff-base > button:nth-child(3){
  border-color: #ff2d8f;
  background: linear-gradient(180deg, rgba(255,45,143,.18), rgba(255,255,255,.94));
}

/* 3ボタンは“色を保ったまま”ホバーで強調（既存のピンクホバーを上書き） */
#difficulty .diff-base > button:hover,
#difficulty .diff-base > button:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

#difficulty .diff-base > button:nth-child(1):hover,
#difficulty .diff-base > button:nth-child(1):focus-visible{
  background: linear-gradient(180deg, rgba(53,201,106,.28), rgba(255,255,255,.96));
}
#difficulty .diff-base > button:nth-child(2):hover,
#difficulty .diff-base > button:nth-child(2):focus-visible{
  background: linear-gradient(180deg, rgba(47,134,255,.28), rgba(255,255,255,.96));
}
#difficulty .diff-base > button:nth-child(3):hover,
#difficulty .diff-base > button:nth-child(3):focus-visible{
  background: linear-gradient(180deg, rgba(255,45,143,.28), rgba(255,255,255,.96));
}

/* =========================================================
   Overall Centering of Difficulty Overlay
   - 全体を flexbox で中央揃えに変更
========================================================= */
#difficulty.overlay{
  display: flex;              /* grid → flex */
  flex-direction: column;
  justify-content: center;    /* 縦方向の中央 */
  align-items: center;        /* 横方向の中央 */
  gap: 14px;                  /* まとまり感 */
  padding: 18px 16px;         /* 端末差の吸収 */
}

/* 見出しの余白を固定（ブラウザ既定marginの影響を除去） */
#difficulty.overlay > h2{
  margin: 0;
  line-height: 1.1;
}

/* ボタン群は2段構成のまま、中央に */
#difficulty .diff-buttons{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 0;                 /* 余計なズレ防止 */
}

#difficulty .diff-buttons .diff-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0;
}

/* 注釈もmarginを固定（下に押し下げられるのを抑制） */
#difficulty .note{
  margin: 0;
  text-align: center;
}

/* =========================================================
   Result Modal (score breakdown)
========================================================= */
#modal{
  border: 0;
  border-radius: 18px;
  padding: 14px 16px 12px;
  width: min(520px, 92vw);
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
#modal::backdrop{
  background: rgba(0,0,0,.35);
}
#modal h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #633;
}

#modalBody .result-kpi{ display: grid; gap: 8px; }
#modalBody .result-total{
  font-size: 18px;
  font-weight: 900;
  color: #633;
}
#modalBody .result-sub,
#modalBody .result-sub2{
  font-size: 13px;
  font-weight: 800;
  color: #665;
}
#modalBody .num{
  font-variant-numeric: tabular-nums;
}

#modalBody .score-breakdown{
  border: 2px solid #ffd1ea;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
#modalBody .score-breakdown .row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-weight: 900;
}
#modalBody .score-breakdown .row + .row{
  border-top: 1px dashed #ffd1ea;
}
#modalBody .score-breakdown .label{ color:#664; }
#modalBody .score-breakdown .val{ color:#633; }
#modalBody .score-breakdown .row.total{
  background: #ffedf6;
}

/* =========================================================
   THANKS modal (LP色味 / テーブル配置)
========================================================= */
.thanks-modal{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 18px;
}
.thanks-modal::backdrop{
  background: rgba(0,0,0,.35);
}
.thanks-box{
  width: min(980px, 92vw);
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 16px 16px 14px;

  background:
    radial-gradient(900px 420px at 16% 0%, rgba(255,118,182,.18), rgba(255,255,255,0) 60%),
    radial-gradient(820px 360px at 88% 18%, rgba(185,243,228,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,240,248,.94));

  border: 4px solid #ffa9cf;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.thanks-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,118,182,.18);
  backdrop-filter: blur(6px);
}

.thanks-title{
  font-weight: 1000;
  letter-spacing: .16em;
  font-size: 16px;
  color: #633;
}
.thanks-sub{
  margin-top: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
  font-size: 14px;
  color: #744;
}

.thanks-close{
  appearance: none;
  border: 2px solid rgba(255,118,182,.35);
  background: rgba(255,255,255,.86);
  color: #633;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.thanks-close:hover{ transform: translateY(-1px); }

.thanks-lead{
  margin: 10px 6px 14px;
  font-weight: 800;
  color: rgba(58,45,45,.80);
  line-height: 1.65;
}
.thanks-lead__en{
  display: block;
  margin-top: 8px;
  font-weight: 800;
  color: rgba(58,45,45,.66);
}

.thanks-tableWrap{ margin: 0 6px; }
.thanks-table{
  width: 100%;
  border-collapse: collapse;
}
.thanks-table thead th{
  text-align: left;
  font-weight: 1000;
  letter-spacing: .10em;
  font-size: 13px;
  color: #633;
  padding: 12px 10px;
  border-bottom: 2px solid rgba(255,118,182,.22);
}
.thanks-table tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,118,182,.16);
  font-weight: 800;
  color: rgba(58,45,45,.84);
}
.thanks-table a{
  color: #ff4aa0;
  text-decoration: none;
  font-weight: 1000;
}
.thanks-table a:hover{ text-decoration: underline; }

.thanks-sub2{
  margin: 16px 6px 8px;
  font-weight: 1000;
  letter-spacing: .14em;
  color: #633;
}
.thanks-sfx__text{
  margin: 0 6px;
  font-weight: 900;
  color: rgba(58,45,45,.80);
}
.thanks-sfx__note{ color: rgba(58,45,45,.62); font-weight: 800; }

.thanks-foot{
  margin: 14px 6px 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(58,45,45,.62);
}

@media (max-width: 640px){
  .thanks-box{ padding: 14px 12px 12px; }
  .thanks-close{ padding: 9px 12px; }
  .thanks-title{ letter-spacing: .12em; }
}

/* =========================================================
   Responsive Toolbar Fix (PC / iPhone / iPad)
   - タイトルは必ず表示
   - toolbar は折り返さず、溢れたら toolbar のみ横スクロール
   - ボタン文字/余白は自動縮小して “欠け” を防ぐ
========================================================= */

/* 基本：狭い幅では「タイトル行」＋「ボタン行」に分けて、絶対に押し出されないようにする */
.app-header{
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: flex-start;
}

.app-header h1{
  flex: 1 1 100%;            /* ← タイトルを必ず1行確保（消えない） */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 4.2vw, 20px);
}

/* toolbar は “折り返さない”。溢れたら toolbar だけスクロール */
.toolbar{
  flex: 1 1 100%;            /* ← タイトルの下に回す（狭い時の安定策） */
  min-width: 0;
  max-width: 100%;

  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 2px;       /* iOSでスクロールしやすく */
  justify-content: flex-start;
}

.toolbar > *{
  flex: 0 0 auto;
}

/* ボタン類の “自動縮小” */
.toolbar button,
.toolbar a,
.toolbar label.bg-pick,
.toolbar select{
  font-size: clamp(11px, 2.6vw, 14px);
  padding: clamp(6px, 1.6vw, 8px) clamp(8px, 2.2vw, 12px);
  border-radius: clamp(10px, 2.2vw, 12px);
  white-space: nowrap;
}

/* 幅が十分あるPCでは、従来どおり「タイトル左／ボタン右」に戻す */
@media (min-width: 980px){
  .app-header{
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .app-header h1{
    flex: 0 1 auto;
  }
  .toolbar{
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}

/* ボタン/リンクは少し小さく（横欠け対策） */
.toolbar button,
.toolbar a{
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1.1;
  font-size: clamp(10px, 2.8vw, 14px);

  /* ★ここが効く：ボタンの厚みを自動縮小 */
  padding: clamp(6px, 1.6vw, 8px) clamp(8px, 2.2vw, 12px);
  border-radius: clamp(10px, 2.4vw, 12px);
}

/* label は文字サイズだけ同期（bg-pick/fx-pick 側のpaddingを上書きしない） */
.toolbar label{
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1.1;
  font-size: clamp(10px, 2.8vw, 14px);
}

/* iOSで select が勝手に大きくならないように */
.toolbar select,
.toolbar input[type="color"]{
  font-size: inherit;
}

/* file input を確実に “見えなくする”（iOS対策の隠し方） */
.bg-pick input[type="file"]{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* 画面が狭い時は「タイトル→toolbar」の縦積み */
@media (max-width: 560px){
  .app-header{
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
  }

  .toolbar{
    gap: 6px;
    justify-content: flex-start; /* ★左起点に固定 */
    margin-left: 0;
    align-self: stretch;
  }



  /* BGの “NONE” はスマホでは非表示（幅優先） */
  .bg-pick .file-name{
    display: none;
  }

  /* 色ラベルも削って横幅を確保（必要なら消してOK） */
  .fx-color .fx-label{
    display: none;
  }

  /* iOSのcolorがでかい端末向け */
  .fx-color input[type="color"]{
    width: 30px;
    height: 22px;
  }
}

/* =========================================================
   Difficulty Buttons Responsive (チャレンジ等の選択ボタン)
   - iPhoneでボタン文字が大きすぎるのを防ぐ（自動縮小）
   - 余白も端末幅に追従
========================================================= */
#difficulty .diff-buttons button{
  /* 文字サイズを画面幅で自動縮小（PCでは従来に近い） */
  font-size: clamp(12px, 3.2vw, 16px);

  /* 余白も縮む（ボタンが巨大化しない） */
  padding: clamp(8px, 2.2vw, 12px) clamp(10px, 2.6vw, 16px);

  line-height: 1.15;
}

/* 2行目（スイーツ/くだもの等）の説明も縮む */
#difficulty .diff-buttons button .diff-sub{
  font-size: clamp(10px, 2.8vw, 12px);
  margin-top: 3px;
  line-height: 1.1;
}

/* “中央の3ボタン（やさしい/ふつう/むずかしい）”もスマホで過大にならないように */
#difficulty .diff-base > button{
  min-width: clamp(140px, 34vw, 190px);
  padding: clamp(10px, 2.4vw, 12px) clamp(12px, 2.8vw, 16px);
}

/* さらに狭い端末の最終安全策（iPhone SE級） */
@media (max-width: 380px){
  #difficulty .diff-buttons button{
    font-size: 12px;
  }
  #difficulty .diff-buttons button .diff-sub{
    font-size: 10px;
  }
}

/* =========================================================
   iPhoneで「難易度選択（11ボタン）」が切れないようにする
   - canvas枠の中に閉じ込めず、画面全体に出す（fixed）
   - 余白/文字/間隔を少し詰めて “全部見える” を優先
========================================================= */

/* 念のため：オーバーレイ内で縦方向が溢れたらスクロールできる */
#difficulty.overlay{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* iPhone幅：難易度オーバーレイを全画面に */
/* =========================================================
   iPhoneで「難易度選択（11ボタン）」が切れないようにする（改）
   - 全画面fixedは使わない（canvas枠の中に収める）
   - どうしても縦が足りない時だけ、overlay内でスクロール
========================================================= */

/* 難易度オーバーレイは“読みやすい白幕”に固定（薄すぎ問題の回避） */
#difficulty.overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,248,.92));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* iPhone幅：overlayは canvas-wrap 内に収める（absoluteのまま） */
@media (max-width: 560px){
  #difficulty.overlay{
    position: absolute;   /* ★ fixed をやめる */
    inset: 0;
    z-index: 10;          /* canvas内で最前面 */
    display: flex;
    flex-direction: column;

    /* “上から詰める” → はみ出し/欠けを防ぐ */
    justify-content: flex-start;
    align-items: center;

    padding: 12px 10px;
    gap: 8px;
  }

  #difficulty.overlay > h2{
    margin: 0;
    font-size: clamp(18px, 5.2vw, 21px);
    line-height: 1.1;
  }

  #difficulty .diff-buttons{
    gap: 6px;
  }
  #difficulty .diff-row{
    gap: 6px;
  }
  #difficulty .diff-group-title{
    margin-top: 4px;
    font-size: 11px;
  }

  /* 11ボタン（チャレンジ/あ～ん/あまいことば） */
  #difficulty .diff-buttons button{
    font-size: clamp(11px, 3.0vw, 14px);
    padding: 8px 10px;
    border-radius: 12px;
    line-height: 1.12;
  }
  #difficulty .diff-buttons button .diff-sub{
    font-size: clamp(9px, 2.6vw, 11px);
    margin-top: 2px;
    line-height: 1.05;
  }

  /* 中央3ボタン（やさしい/ふつう/むずかしい）を少し縮める */
  #difficulty .diff-base{
    margin: 6px 0;
    padding: 8px;
    border-radius: 16px;
  }
  #difficulty .diff-base > button{
    min-width: 104px;
    padding: 10px 10px;
  }

  #difficulty .note{
    margin: 0;
    font-size: 11px;
    text-align: center;
  }
}

/* ==================================================================
   Soft Keyboard Dock（画面下ドック / PC・スマホ統一）
   - キーボードが canvas を隠さないように、ON時はレイアウト側を縮める
================================================================== */
:root{
  --app-header-h: 56px; /* JSで実測して上書き */
  --softkbd-h: 0px;     /* JSで実測して上書き */

  /* ▼見た目チューニング（ここだけで調整できます） */
  --kbd-max: 100%;                      /* ★ドックの内側いっぱいに使う */
  --kbd-key: clamp(22px, 6.4vw, 52px);  /* 1uキー：高さ（従来どおり） */
  --kbd-gap: clamp(3px, 0.7vw, 8px);    /* キー間隔 */
}

/* PCなど横が広い時は、従来どおり“広がりすぎ”を抑える */
@media (min-width: 1100px){
  :root{ --kbd-max: 980px; }
}


/* ツールバーのON表示 */
#btnKeyboard.is-softkbd-on{
  background: #ffedf6;
  box-shadow: 0 2px 10px rgba(255,105,180,.22);
  outline: 2px solid rgba(255,169,207,.9);
}

/* キーボードON時：上を無理に潰さず、Gridの2行目にドックさせる（入替のため） */
body.is-softkbd-on .layout{
  /* height は固定しない（＝rank-pane を下へ送れる） */
  height: auto;
  min-height: calc(100vh - var(--app-header-h));
  grid-template-rows: 1fr auto; /* 2行目（kbd）を下へ */
}

/* 以前の「内部スクロール強制」は解除（ページスクロールに任せる） */
body.is-softkbd-on .game-pane,
body.is-softkbd-on .rank-pane{
  overflow: visible;
}


/* game-pane 内：キーボードON時も canvas 比率(4:3)を維持して縦に伸ばさない */
body.is-softkbd-on .game-pane{
  display: flex;
  flex-direction: column;
}

/* 960x720（4:3）を固定：余った高さで縦長に伸びない */
body.is-softkbd-on .canvas-wrap{
  width: 100%;
  aspect-ratio: 4 / 3;  /* 960x720 */
  flex: 0 0 auto;       /* ← ここが重要（伸びない） */
  min-height: 240px;
}

/* Dock本体 */
.softkbd-dock{
  position: sticky;
  bottom: 0;
  z-index: 50;

  margin-top: 12px;

  /* 余白（安全領域も考慮） */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));

  /* 背景：ピンク基調の“反対色”寄り（ミント/シアン）で透けを抑える */
  background: linear-gradient(180deg,
    rgba(220, 249, 255, 0.92),
    rgba(220, 255, 238, 0.90)
  );

  border: 2px solid rgba(95, 205, 190, 0.30);
  border-radius: 18px;

  /* うっすらガラス感（効かない環境でもOK） */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.55) inset;
}


.softkbd-dock[hidden]{ display:none !important; }

.softkbd-slot{ display:none !important; }

/* ----------------------------------------------------------
   キーボードON時：rank-pane を「キーボードの下」に追い出すスペーサ
   ※ 2カラム(PC)を壊さないため、1カラムになる幅(<=980px)だけ有効化
---------------------------------------------------------- */
.softkbd-slot{ display: none; }

@media (max-width: 980px){
  body.is-softkbd-on .softkbd-slot{
    display: block;
    height: var(--softkbd-h);
  }
}

@media (max-width: 980px){
  body.is-softkbd-on .rank-pane{ display:none; }
}
/* ----------------------------------------------------------
   キーボード本体
/* 上段（タイトル＋閉じる）とキー部を「最大幅で中央寄せ」 */
.softkbd-keys{
  width: min(var(--kbd-max), 100%);
  margin: 0 auto;
}

/* softkbd.top を撤去（表示しない） */
.softkbd-top {
  display: none !important;
}

/* 上が余る分を詰める（高さを削る） */
.softkbd-dock {
  padding-top: 6px !important;   /* 元が10px前後なら縮む */
  margin-top: 8px !important;    /* 元が12px前後なら縮む */
}

.softkbd-title{
  font-weight: 900;
  color: #7b3458;
  letter-spacing: .12em;
  font-size: 12px;
}
.softkbd-actions{
  display: flex;
  gap: 8px;
  align-items: center;
}
.softkbd-mini{
  appearance: none;
  border: 0;
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 900;
  background: #fff;
  color: #574;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ▼ここが本体：14u グリッドで「キーボードらしい比率」を作る */
.softkbd-keys{
  display: grid;
  gap: var(--kbd-gap);
}

.softkbd-row{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(14, minmax(0, 1fr)); /* ★14分割で横に広げる */
  gap: var(--kbd-gap);
}


/* 1uキー（ほぼ正方形） */
.softkbd-key{
  appearance: none;
  border: 2px solid #ffa9cf;
  background: #fff;
  color: #3a2d2d;
  font-weight: 900;
  border-radius: 14px;
  padding: 0;

  height: var(--kbd-key);
  width: 100%;
  display: grid;
  place-items: center;

  font-size: clamp(11px, 2.2vw, 16px);
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  touch-action: manipulation;
  user-select: none;
}

/* 幅ユニット（u2/u3/u4/u6 を使う） */
.softkbd-key.u2{ grid-column: span 2; }
.softkbd-key.u3{ grid-column: span 3; }
.softkbd-key.u4{ grid-column: span 4; }
.softkbd-key.u6{ grid-column: span 6; }

/* 機能キー */
.softkbd-key.is-fn{
  background: #eef6ff;
  border-color: #b9d6ff;
}

/* 見た目だけのキー（Tab/Caps/Shift/Space など） */
.softkbd-key.is-deco{
  background: rgba(255,255,255,.70);
  border-color: rgba(255,169,207,.55);
  color: #8a5a74;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* PointerDown演出（JSの is-active にも対応） */
.softkbd-key:active,
.softkbd-key.is-active{
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.98);
}

/* ============================================================
   Soft Keyboard: 下ドック固定でも canvas に被らせない
   （キーボードの“高さ分の席”を layout 側で確保する）
   ============================================================ */

:root{
  --softkbd-h: 0px;          /* JSが実測して入れる */
  --softkbd-gap: 14px;       /* ちょい余白（好みでOK） */
}

/* body のクラス名は環境差が出やすいので両対応しておく */
body.is-softkbd-on .layout,
body.is-softkb-on  .layout{
  padding-bottom: calc(var(--softkbd-h) + var(--softkbd-gap) + env(safe-area-inset-bottom, 0px));
}

/* （もし下ドックが fixed の場合）安全のため最前面に */
.softkbd-dock,
#softKeyboard,
#softkbdDock{
  z-index: 9999;
}

/* PCで“canvasがデカすぎて席を食い切る”場合に、iPad寄りの見栄えに寄せる保険
   ※ 4:3（960×720）想定。必要なければ消してOK */
@media (min-width: 981px){
  body.is-softkbd-on .canvas-wrap,
  body.is-softkb-on  .canvas-wrap{
    width: min(100%, calc((100vh - var(--softkbd-h) - 160px) * (4 / 3)));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Soft keyboard: 「いま打つべきキー」ハイライト（UIのみ）
   ============================================================ */
.softkb2-key.is-target,
.softkbd-key.is-target,
.softkbd button.is-target,
#softKeyboardDock button.is-target,
#softKeyboard button.is-target{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,235,245,0.98));
  border-color: rgba(255, 90, 165, 0.95) !important;
  box-shadow:
    0 0 0 3px rgba(255, 90, 165, 0.22),
    0 10px 20px rgba(255, 90, 165, 0.18);
  transform: translateY(-1px);
}

/* =========================================================
   PC/タブレット + ソフトキーボードON中：
   難易度オーバーレイ（11ボタン）を“1画面に収める”コンパクト版（改）
   - ボタンの padding/文字を縮める
   - チャレンジ5つを 3列グリッドにして“行数”を減らす
   - body class の揺れ（is-softkbd-on / is-softkb-on）両対応
========================================================= */
@media (min-width: 561px){
  body.is-softkbd-on #difficulty.overlay,
  body.is-softkb-on  #difficulty.overlay{
    justify-content: flex-start; /* 上詰め（見切れ回避） */
    gap: 5px;
    padding: 9px 9px;
  }

  body.is-softkbd-on #difficulty.overlay > h2,
  body.is-softkb-on  #difficulty.overlay > h2{
    margin: 0;
    font-size: 18px;
    line-height: 1.05;
  }

  body.is-softkbd-on #difficulty .diff-group-title,
  body.is-softkb-on  #difficulty .diff-group-title{
    margin-top: 2px;
    font-size: 10px;
  }

  /* チャレンジ等（5ボタン）を“中央に揃えたまま” 3+2 で折り返す（iPad mini対策） */
  body.is-softkbd-on #difficulty .diff-buttons .diff-row,
  body.is-softkb-on  #difficulty .diff-buttons .diff-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* ← 2段目(2個)も中央へ */
    align-items: stretch;
    gap: 6px;

    width: min(640px, 100%);
    margin: 0 auto;
  }

  /* grid用に入っている width:100% を“この行だけ”打ち消して、均等幅で並べる */
  body.is-softkbd-on #difficulty .diff-buttons .diff-row > button,
  body.is-softkb-on  #difficulty .diff-buttons .diff-row > button{
    width: auto;
    flex: 0 1 calc((100% - 12px) / 3); /* 3列（gap 6px×2） */
    min-width: 160px;                 /* 狭い時は自然に2列へ落ちる */
  }


  body.is-softkbd-on #difficulty .diff-buttons button .diff-sub,
  body.is-softkb-on  #difficulty .diff-buttons button .diff-sub{
    font-size: 10px;
    margin-top: 1px;
    line-height: 1.05;
  }

  /* 中央3ボタンも “3列グリッド” にして幅を揃えつつ高さを抑える */
  body.is-softkbd-on #difficulty .diff-base,
  body.is-softkb-on  #difficulty .diff-base{
    margin: 4px auto;
    padding: 6px;
    border-radius: 14px;

    width: min(640px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.is-softkbd-on #difficulty .diff-base > button,
  body.is-softkb-on  #difficulty .diff-base > button{
    min-width: 0;
    width: 100%;
    padding: 8px 8px;
    border-radius: 12px;
    font-size: 13px;
  }

  body.is-softkbd-on #difficulty .note,
  body.is-softkb-on  #difficulty .note{
    margin: 0;
    font-size: 10px;
    text-align: center;
  }
}

@media (min-width: 561px) and (max-width: 760px){
  body.is-softkbd-on #difficulty .diff-buttons .diff-row > button,
  body.is-softkb-on  #difficulty .diff-buttons .diff-row > button{
    flex-basis: calc((100% - 6px) / 2); /* 2列（gap 6px×1） */
  }
}

/* 縦が短いPC（ノート/小窓）だけ、さらに一段だけ縮める保険 */
@media (min-width: 561px) and (max-height: 760px){
  body.is-softkbd-on #difficulty.overlay > h2,
  body.is-softkb-on  #difficulty.overlay > h2{
    font-size: 16px;
  }

  body.is-softkbd-on #difficulty .diff-buttons button,
  body.is-softkb-on  #difficulty .diff-buttons button{
    font-size: 11px;
    padding: 6px 7px;
  }

  body.is-softkbd-on #difficulty .diff-base > button,
  body.is-softkb-on  #difficulty .diff-base > button{
    font-size: 12px;
    padding: 7px 7px;
  }
}

/* Soft keyboard highlight (target / active) */
/* --- 強発光＋点滅（targetはゆっくり、activeは素早く） --- */

@keyframes softkbdPulseTarget {
  0% {
    box-shadow:
      0 0 0 3px rgba(255,105,180,.55),
      0 0 18px rgba(255,105,180,.55);
    filter: brightness(1.05);
    transform: translateZ(0) scale(1.00);
  }
  100% {
    box-shadow:
      0 0 0 5px rgba(255,105,180,.95),
      0 0 34px rgba(255,105,180,.95),
      0 0 60px rgba(255,105,180,.55);
    filter: brightness(1.20);
    transform: translateZ(0) scale(1.03);
  }
}

@keyframes softkbdFlashActive {
  0% {
    box-shadow:
      0 0 0 4px rgba(120,200,255,.65),
      0 0 18px rgba(120,200,255,.65);
    filter: brightness(1.06);
    transform: translateZ(0) scale(1.00);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(120,200,255,.98),
      0 0 38px rgba(120,200,255,.98),
      0 0 70px rgba(120,200,255,.55);
    filter: brightness(1.22);
    transform: translateZ(0) scale(1.04);
  }
}

/* target: 次に打つべきキー（常時） */
#softkbdDock .is-target,
.softkbd-dock .is-target,
#softKeyboardDock .is-target,
#softKeyboard .is-target{
  animation: softkbdPulseTarget 0.75s ease-in-out infinite alternate;
  will-change: box-shadow, filter, transform;
}

/* active: 押した瞬間のキー（短くパカッと） */
#softkbdDock .is-active,
.softkbd-dock .is-active,
#softKeyboardDock .is-active,
#softKeyboard .is-active{
  animation: softkbdFlashActive 0.12s ease-out 2 alternate;
  will-change: box-shadow, filter, transform;
}

/* 動きが苦手な環境は点滅を止める */
@media (prefers-reduced-motion: reduce){
  #softkbdDock .is-target,
  .softkbd-dock .is-target,
  #softKeyboardDock .is-target,
  #softKeyboard .is-target,
  #softkbdDock .is-active,
  .softkbd-dock .is-active,
  #softKeyboardDock .is-active,
  #softKeyboard .is-active{
    animation: none;
  }
}

/* ============================================================
   iPad/Safari対策：softkbd表示中に canvas が切れないよう
   “見えている高さ(visualViewport)”基準でフィットさせる
   ※ game.js が --vvh-px を更新している前提
   ============================================================ */

@media (min-width: 561px) and (max-width: 980px) {
  /* キーボードON中：canvas-wrap を “残り高さ”に合わせて縮める */
  body.is-softkbd-on .canvas-wrap,
  body.is-softkb-on .canvas-wrap {
    /* 見えている高さ - ヘッダ - ソフトキーボード - 余白(調整用) */
    height: min(
      calc(
        calc(var(--vvh-px, 1vh) * 100)
        - var(--app-header-h)
        - var(--softkbd-h)
        - 170px
      ),
      72svh
    );
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* iPad mini系：softkbd自体も少しだけ薄く（タップ性は維持） */
@media (max-width: 820px) {
  body.is-softkbd-on,
  body.is-softkb-on {
    --kbd-key: clamp(18px, 5.2vw, 42px);
    --kbd-gap: clamp(2px, 0.5vw, 6px);
  }
}