/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: typingowl
 * BUILD_ID: YR-2025-0904-K12                 // ← 公開用の可視ビルド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 — 記号で木こり2100
==================================================================*/

/* -------------------------------------------------------------
 * タイピングふくろう - スタイル（1280×900想定）
 * -----------------------------------------------------------*/
:root {
  --bg: #e9f5ec;           /* 森のひだまり */
  --ink: #0b2b1e;          /* 文字色 */
  --panel: #ffffff;        /* パネル */
  --forest: #b8e3c0;       /* 森のアクセント */
  --accent: #22c55e;       /* 成功系（緑） */
  --warn: #ef4444;         /* ミス系（赤） */
  --muted: #567;           /* 補助 */
  --gold: #f59e0b;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --grid: 32;              /* 横32 縦16（A1〜AF16） */
}

/* -------------------------------------------------------------
 * リセット / ベース
 * -----------------------------------------------------------*/
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
}

h1,
h2,
h3 {
  margin: 0;
}

/* -------------------------------------------------------------
 * 上部バー
 * -----------------------------------------------------------*/
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(#dff6e6, #c7ecd2);
  border-bottom: 1px solid #cfe7d7;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar .center {
  font-size: 22px;
  letter-spacing: 0.08em;
}

#stageLabel {
  font-weight: 700;
}
/* 左上ラベルが長くなっても中央タイトルを潰しにくくする */
.topbar .left{ min-width: 0; }

/* 長いときは省略表示（…）にする */
#stageLabel{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#hearts {
  display: inline-flex;
  gap: 6px;
  margin-right: 12px;
}

#hearts .heart {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff8aa8);
  box-shadow: 0 0 0 2px #b94260 inset;
}

#hearts .off {
  filter: grayscale(0.9) brightness(0.8);
  box-shadow: 0 0 0 2px #888 inset;
}

#elapsed {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
 * 操作ボタン
 * -----------------------------------------------------------*/
.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
}

.controls button,
.controls a.ghost {
  background: #fff;
  border: 1px solid #cfe7d7;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
}

/* 速度表示（学習TOPの右隣） */
.controls .speedBox{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid #cfe7d7;
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

.controls .mini{
  padding: 8px 10px;
  min-width: 38px;
}

.controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.controls .ghost {
  background: transparent;
}

/* -------------------------------------------------------------
 * 2カラム（ゲーム: 2/3、右パネル: 1/3）
 * ※重要：flex内の「縮めない問題」を防ぐため min-width:0 を入れる
 * -----------------------------------------------------------*/
.layout {
  display: flex;
  flex-direction: row-reverse; /* ← 左右を反転 */
  gap: 16px;
  padding: 16px;
  max-width: 1400px; /* 1280→1400（ゲームを気持ち広く） */
  margin: 0 auto;
}

/* ★ ここが “比率が逆戻りする” の対策（必須） */
.layout > * {
  min-width: 0; /* grid等のmin-content幅で横幅が膨らむのを抑制 */
}

/* ここが比率の本体：ゲーム 2/3、パネル 1/3
 * flex-basis:0 を入れて “内容の最小幅” に負けないようにする
 */
.panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game {
  flex: 2 1 0;
  background: var(--panel);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

/* -------------------------------------------------------------
 * 日本地図（タイル 47 セル）/ ランキング
 * -----------------------------------------------------------*/
.mapCard,
.rankCard {
  background: var(--panel);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.mapHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#btnWhite {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
}

.note {
  color: #456;
  opacity: 0.8;
  font-size: 12px;
}

/* -----------------------------
 * あそびかた（折りたたみ）
 * ---------------------------*/
.howto{
  margin-top: 10px;
  border: 1px solid #d8eadc;
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow);
  padding: 8px 10px;
}

.howto > summary{
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  outline: none;
  list-style: none;          /* 既定マーカーを消す（ブラウザ差を抑える） */
}

.howto > summary::-webkit-details-marker{
  display: none;             /* Safari/Chrome */
}

.howto > summary::before{
  content: "＋ ";
  font-weight: 900;
}

.howto[open] > summary::before{
  content: "－ ";
}

.howtoList{
  margin: 10px 0 6px 18px;
  padding: 0;
  color: #234;
  font-size: 13px;
  line-height: 1.6;
}

.howto .note{
  margin: 6px 0 0;
}

/* 日本地図：グリッド本体 */
.jp-grid {
  --w: 12;
  display: grid;
  grid-template-columns: repeat(var(--w), minmax(0, 1fr));

  /* ★ 行高：セル高と揃える（余白行を作らない） */
  grid-auto-rows: 32px;

  /* ★ 県同士の間隔を詰める */
  gap: 1px;

  margin-top: 10px;
  background: #f6fbf7;

  /* ★ 余白を詰める */
  padding: 2px;

  border-radius: 12px;
  border: 1px solid #d8eadc;
  border-width: 1px; /* 2px → 1px */
}

/* ★ #japanMap に直接 shape が付いた場合でも形配置を効かせる保険 */
#japanMap.shape {
  --w: 16;
  display: grid;
  grid-template-columns: repeat(var(--w), minmax(0, 1fr));

  /* ★ 行高：セル高と揃える（ここがズレると“空行”が発生） */
  grid-auto-rows: 32px;

  /* ★ 県同士の間隔を詰める */
  column-gap: 1px;
  row-gap: 1px;
}

/* -------------------------------------------------------------
 * 県セル（.jp-cell は重複していたため 1つに統合）
 * -----------------------------------------------------------*/
.jp-cell {
  display: flex;
  align-items: center;
  justify-content: center;

  /* ★ セル高（グリッド行高と揃える） */
  height: 32px;
  padding: 1px;

  /* 県境の見え方（枠線） */
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 10px;

  /* 背景：文字の可読性UP */
  background: rgba(255, 255, 255, 0.85);

  position: relative;
  min-width: 0;

  /* ★ まれに一部セルだけ横に太る原因（span指定）を強制的に無効化 */
  grid-column-end: span 1;
  grid-row-end: span 1;

    /* 追記：テキスト扱い(I字)をやめて矢印に戻す */
  cursor: pointer;              /* ←「矢印」を強制（手マークにしたいなら pointer） */
  user-select: none;            /* ←ドラッグ選択を無効化 */
  -webkit-user-select: none;
  
}

/* 県セルはクリックできるので hand（pointer）で統一 */
.jp-cell{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 子要素（縦書き文字など）も親のカーソルを継承 */
.jp-cell *{
  cursor: inherit;
  user-select: none;
  -webkit-user-select: none;
}

.jp-cell.colored {
  background: #b6e8c1;
  border-color: #93d7a3;
  border-width: 1px;
}


/* 県セル右下の略号など（必要なら） */
.jp-cell .abbr {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  color: #567;
}

/* ================================
   目的地（次の県）点灯ハイライト
================================ */
.jp-cell.target{
  position: relative;
}

/* 既存の colored/gold の box-shadow と競合しないように ::after で光らせる */
.jp-cell.target::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  pointer-events: none;

  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 16px rgba(59,130,246,0.85);

  animation: prefTargetPulse 1.1s ease-in-out infinite;
}

@keyframes prefTargetPulse{
  0%,100%{ opacity: 0.55; transform: scale(0.98); }
  50%     { opacity: 1.00; transform: scale(1.03); }
}

/* ================================
   周回カラー（1周目=グリーン、2周目以降=ゴールド点滅）
================================ */

/* 1周目（従来どおり） */
.jp-cell.colored.lap-1{
  background: #b6e8c1;
  border-color: #93d7a3;
}

/* 2周目以降：ゴールドベース（Typing Skill Metrix 風の“輝き”） */
.jp-cell.colored.gold{
  background: radial-gradient(circle at 30% 30%, #fff7d6, #f7c64f 55%, #d18a0b 100%);
  border-color: rgba(245, 158, 11, 0.85);
  position: relative;
  overflow: hidden;
}

/* キラッと走るハイライト（疑似要素） */
.jp-cell.colored.gold::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 18%,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-60%);
  animation: goldShine 1.6s linear infinite;
  pointer-events:none;
}

/* 周回が増えるほど “発光” を増す（lap-2 以降） */
.jp-cell.colored.gold.lap-2{ box-shadow: 0 0 10px rgba(245,158,11,0.40), 0 0 18px rgba(245,158,11,0.25) inset; }
.jp-cell.colored.gold.lap-3{ box-shadow: 0 0 14px rgba(245,158,11,0.55), 0 0 26px rgba(245,158,11,0.35) inset; }
.jp-cell.colored.gold.lap-4{ box-shadow: 0 0 18px rgba(245,158,11,0.70), 0 0 34px rgba(245,158,11,0.45) inset; }
.jp-cell.colored.gold.lap-5{ box-shadow: 0 0 22px rgba(245,158,11,0.85), 0 0 44px rgba(245,158,11,0.55) inset; }

/* 6周目以降は lap-5 を使い回す（上限） */
.jp-cell.colored.gold.lap-6,
.jp-cell.colored.gold.lap-7,
.jp-cell.colored.gold.lap-8,
.jp-cell.colored.gold.lap-9,
.jp-cell.colored.gold.lap-10{ box-shadow: 0 0 22px rgba(245,158,11,0.85), 0 0 44px rgba(245,158,11,0.55) inset; }

@keyframes goldShine{
  0%   { transform: translateX(-60%) rotate(0deg); opacity: 0.55; }
  50%  { opacity: 0.95; }
  100% { transform: translateX(60%) rotate(0deg);  opacity: 0.55; }
}

/* 文字がハイライトに負けないよう前面へ */
.jp-cell .jp-name{ position: relative; z-index: 1; }

/* -------------------------------------------------------------
 * 都道府県名（縦書き）
 * 二重枠の原因：.jp-cell と .jp-name の両方に border があるため
 * → 枠線は .jp-cell 側に集約し、.jp-name は“文字だけ”にする
 * -----------------------------------------------------------*/
.jp-cell .jp-name {
  display: inline-block;

  /* 縦書き：列折り返しを禁止（北海道・和歌山などの崩れ対策） */
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;

  /* 見た目の詰まり調整 */
  line-height: 1;
  letter-spacing: 0;

  /* 二重枠の解消（.jp-cell側に枠線を集約） */
  border: none;
  background: transparent;
  padding: 0;

  /* 可読性（必要なら残す／不要なら削除OK） */
  text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff,
    -1px  1px 0 #fff,
     0    1px 0 #fff,
     1px  1px 0 #fff;
}

/* 文字数に応じて “jp-name” 側だけを縮小（セル高さは変えない） */
.jp-cell[data-len="2"] .jp-name { font-size: 11px; }
.jp-cell[data-len="3"] .jp-name { font-size: 10px; } /* 北海道 / 和歌山 など */
.jp-cell[data-len="4"] .jp-name { font-size: 9px;  }
.jp-cell[data-len="5"] .jp-name { font-size: 8px;  }

/* 追記：押せる感（任意） */
.jp-cell:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.jp-cell:active{
  transform: translateY(0px);
}

/* 追記：キーボード操作も気持ちよく（任意） */
.jp-cell:focus-visible{
  outline: 3px solid rgba(76, 170, 120, .45);
  outline-offset: 2px;
}
/* -------------------------------------------------------------
 * ランキング
 * -----------------------------------------------------------*/
.ranklist {
  margin: 8px 0 0 18px;
  padding: 0;
  max-height: 260px;
  overflow: auto;
}

.ranklist li {
  padding: 4px 2px;
}

.register {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.register input {
  padding: 6px 8px;
  border: 1px solid #d0e5d6;
  border-radius: 8px;
  width: 160px;
}

.shareRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.danger {
  background: #ffe8ea;
  border-color: #f5abb3;
}

/* -------------------------------------------------------------
 * ゲーム HUD
 * -----------------------------------------------------------*/
.hud {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hud .combo {
  font-weight: 700;
  color: #0b2b1e;
}

/* -------------------------------------------------------------
 * キャンバス（背景：明るい森の中）
 * -----------------------------------------------------------*/
#game {
  width: 100%;
  height: auto;
  background: linear-gradient(
    #e8f7ef,
    #d6f0e2 45%,
    #bfe2c9 45%,
    #9ed1af 100%
  );
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: block;
}

/* -------------------------------------------------------------
 * モーダル
 * -----------------------------------------------------------*/
dialog {
  border: none;
  border-radius: 16px;
  padding: 16px 20px;
  width: min(400px, 92vw);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

.summary {
  margin: 6px 0 10px 16px;
  color: #334;
}

menu {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* =========================================================
   Fullscreen Layout (game left + right side panel fixed)
========================================================= */

/* 画面全体を 1画面に固定（スクロールは右パネル内に閉じ込める） */
body { overflow: hidden; }

/* 2カラムをビューポートいっぱいに */
.layout{
  height: 100vh;
  width: 100vw;
  max-width: none;     /* ★ これが重要（全幅化） */
  margin: 0;           /* ★ 中央寄せ解除 */
  padding: 12px;
  gap: 12px;
  overflow: hidden;
}

/* 右サイド（日本列島＋ランキング）は中でスクロール */
.panel{
  overflow: auto;
}

/* ゲーム枠は“高さ100%”を使えるように */
.game{
  padding: 0;          /* ★ 余白をなくしてキャンバスを最大化 */
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* ゲームの中で absolute overlay を成立させる土台 */
.gameStage{
  position: relative;
  height: 100%;
  min-height: 0;
}

/* Canvas をゲーム枠いっぱいに（アスペクトは保持して収める） */
#game{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* ★ 比率維持でフィット */
  border-radius: 16px;
  display: block;
}

/* ===== オーバーレイ（上） ===== */
.overlayTop{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  pointer-events: none; /* 背面クリック阻害を避ける */
}
.overlayTop > *{ pointer-events: auto; }

/* ====== 上部ヘッダー：左(ステータス) / 中央(タイトル) / 右(ハート&時間) を安定配置 ====== */
.topbar.inGame{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}

/* 左は縮められるようにし、はみ出しは“重なり”ではなく“内側で収める” */
.topbar.inGame .left{
  min-width: 0;
  overflow: hidden;
}

/* 中央タイトルは常に中央固定 */
.topbar.inGame .center{
  justify-self: center;
  white-space: nowrap;
}

/* 右は右寄せ固定 */
.topbar.inGame .right{
  justify-self: end;
  white-space: nowrap;
}

/* ラベルは折り返し禁止（縮小はJSでやる） */
#stageLabel{
  display: block;
  white-space: nowrap;
  line-height: 1.15;
}



/* 右端に「現在のスピード＋▼▲」を寄せる */
.controls.inGame .controlsRight{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== オーバーレイ（下） ===== */
.overlayBottom{
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 30;
  pointer-events: none;
}
.overlayBottom > *{ pointer-events: auto; }

/* HUD を “ゲーム内用” に */
.hud.inGame{
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
}

html { scrollbar-gutter: stable both-edges; }


/* -------------------------------------------------------------
 * 日本地図コンプ モーダル（文字が小さい対策）
 * -----------------------------------------------------------*/
#mapClearModal{
  width: min(860px, 94vw);
  padding: 28px 32px;
}
#mapClearModal h3{
  font-size: 28px;
  margin: 0 0 10px;
}
#mapClearModal p{
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}
#mapClearModal menu button{
  font-size: 16px;
  padding: 10px 14px;
}

/* -------------------------------------------------------------
 * ステージ開始：現在飛行中の都道府県（中央フェード）
 * -----------------------------------------------------------*/
.stageStartFx{
  position: absolute;  
  inset: 0;
  display: flex;                 /* 透明のフレックスボックス */
  align-items: center;  
  justify-content: center;
  pointer-events: none;          /* ゲーム操作を邪魔しない */
  z-index: 40;                   /* overlayTop(30)より前面 */
  opacity: 0;
    /* ★追加：ほんの少し上にずらす */
  transform: translateY(-24px);
}

.stageStartFx .stageStartFxText{
  color: rgba(255,255,255,0.98); /* 白い文字 */
  font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif; /* ゴシック系 */
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 75px); /* ≒45pt 目安 */
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow:                   /* ドロップシャドウ */
    0 3px 10px rgba(0,0,0,0.65),
    0 0 22px rgba(0,0,0,0.25);
  position: relative;
  top: -100px; /* ★ここを -16〜-100px くらいで調整 */
}

.stageStartFx.show{
  animation: stageStartFade 4.5s ease-out both; /* 数秒表示→フェードアウト */
}

@keyframes stageStartFade{
  0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
  12%  { opacity: 1; transform: translateY(0)    scale(1.00); }
  75%  { opacity: 1; transform: translateY(0)    scale(1.00); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.02); }
}

/* =========================================================
   Prefecture Modal (stylish / card-like)
   - JS生成DOM（pref-card / pref-kv / pref-k / pref-v ...）に合わせる
========================================================= */

.pref-modal{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;              /* 中央寄せで“ちゃんとしてる感” */
  justify-content: center;
  padding: clamp(12px, 2.6vw, 24px);

  /* 閉じている時は触れない */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.pref-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

/* ===== Prefecture Modal backdrop：フクロウ壁紙＋ぷに感 ===== */

/* どこに画像を置いたかで、ここだけパスを変えればOK */
:root{
  --prefModalBg: url("./img/owl_modal_bg_1920x1080.jpg");
  --prefBullet:  url("./img/select.png"); /* ★追加：行頭記号 */
}

.pref-modal__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;

  /* 既存の「背面ぼかし」は維持（背後のゲーム画面が少し滲む） */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* ここは “単色塗り” をやめて、疑似要素で絵を敷く */
  background: transparent;

  opacity: 0;
  transition: opacity 180ms ease;
}

.pref-modal.is-open .pref-modal__backdrop{
  opacity: 1;
}

/* 壁紙（フクロウ） */
.pref-modal__backdrop::before{
  content: "";
  position: absolute;

  /* 端のぼかしで白フチが出るのを防ぐため少しはみ出す */
  inset: -28px;

  background-image: var(--prefModalBg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* “シールっぽい”柔らかさ：少しだけぼかし＋彩度 */
  filter: blur(2px) saturate(1.08);

  /* ぼかし分のはみ出し対策 */
  transform: scale(1.03);

  /* 強すぎると本文が読みにくいので抑える */
  opacity: 0.95;
}

/* 上から薄い色ベール＋ほんのり光（ぷに感） */
.pref-modal__backdrop::after{
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), rgba(255,255,255,0.00) 55%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.25), rgba(255,255,255,0.00) 55%),
    rgba(184, 227, 192, 0.42); /* 現在の世界観グリーンを薄く */

  /* ふわっとしたガラス感 */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}


.pref-modal.is-open .pref-modal__backdrop{
  opacity: 1;
}

.pref-modal__dialog{
  width: min(760px, 92vw);   /* ★横幅を狭める */
  max-height: calc(100vh - 40px);
  overflow: hidden;          /* ★スクロールさせない */

  border-radius: 22px;
  border: 1px solid rgba(60, 150, 105, 0.22);
background: rgba(255,255,255,0.38);  /* 0.72 → 0.38 */
  box-shadow: 0 22px 70px rgba(0,0,0,0.16);

  /* ★追加：可愛いフォント＋字間を詰める */
  font-family: "M PLUS Rounded 1c","Hiragino Sans","Yu Gothic","Segoe UI",system-ui,sans-serif;
  letter-spacing: 0.01em;

  transform: translateY(10px) scale(0.99);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;

    /* ガラスっぽく“馴染ませる” */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}


.pref-modal.is-open .pref-modal__dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ===== Header（×ボタンを右上固定しつつ、タイトルが長くても崩れない） ===== */
.pref-modal__header{
  position: sticky;
  top: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* タイトルは縮めて、×は死守 */
  gap: 12px;
  align-items: start;

  padding: 16px 18px;

  /* “料金表カード”っぽいヘッダー感 */
  background:
    linear-gradient(180deg,
      rgba(223, 246, 230, 0.70) 0%,
      rgba(255,255,255,0.58) 100%
    );
  border-bottom: 1px solid rgba(60, 150, 105, 0.16);
}

.pref-modal__titlewrap{
  min-width: 0;
}

.pref-modal__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(18px, 2.0vw, 24px);
  line-height: 1.25;
  color: #0b2b1e;
  word-break: keep-all;
}

.pref-modal__subtitle{
  margin: 8px 0 0;
  display: inline-flex;  /* これで“チップ”に見せる */
  align-items: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 800;
  color: rgba(11, 43, 30, 0.78);

  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(60, 150, 105, 0.18);
}

.pref-modal__close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(60, 150, 105, 0.22);
  background: rgba(255,255,255,0.92);
  color: rgba(11, 43, 30, 0.88);

  display: grid;
  place-items: center;

  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.pref-modal__close:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.pref-modal__close:active{
  transform: translateY(0);
}

.pref-modal__body{
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Content Cards（料金表カード風の“区切り”） ===== */
.pref-card{
  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(60, 150, 105, 0.16);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  /* ここも“ガラス感”を足すと一体感が出ます（任意） */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 14px 14px 14px;
}

/* 上部に細いグリーン帯（それっぽさ） */
.pref-card::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(34,197,94,0.85), rgba(184,227,192,0.95));
}

/* ===== Key-Value block（JSの pref-k / pref-v が交互に来る想定） ===== */
.pref-kv{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr); /* ★左列を固定幅に */
  gap: 10px 14px;
  padding-top: 6px;
}

@media (max-width: 560px){
  .pref-kv{ grid-template-columns: 1fr; }
}

/* ラベル側 */
.pref-k{
  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 900;
  color: rgba(11, 43, 30, 0.86);

  padding-top: 4px;
}

/* ★修正：行頭記号（select.png） */
.pref-k::before{
  content:"";
  display: inline-block;     /* ← 念のため明示（効きが安定） */

  width: 34px;               /* ← 好きな大きさに */
  height: 22px;

  flex: 0 0 34px;            /* ← ここが重要：width と揃える */
  /* もしくは flex: none; でもOK（= 0 0 auto） */

  background-image: var(--prefBullet);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transform: translateY(1px);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}


.pref-k .pref-k-text{
  display: grid;
  grid-template-columns: 1fr auto; /* 左：見出し / 右：コロン */
  align-items: center;
  width: 100%;
}

.pref-k .pref-k-label{
  white-space: nowrap;
  letter-spacing: 0.02em; /* 詰めて“かっこよく” */
}

.pref-k .pref-k-colon{
  opacity: 0.85;
  padding-left: 8px;
}
/* 値側 */
.pref-v{
  font-weight: 800;
  color: rgba(11, 43, 30, 0.92);
  line-height: 1.65;
}

/* keyラベル（scenic等）もチップをやめる（任意） */
.code{
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-weight: 800;
  color: rgba(11, 43, 30, 0.75);
}


/* セクション見出し */
.pref-section-title{
  margin: 0;
  padding-top: 10px; /* 上の帯との距離 */
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 16px;
  font-weight: 900;
  color: rgba(11, 43, 30, 0.92);
}

/* pills → 角丸四角形をやめて、テキスト列にする */
.pref-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0;              /* ここで“チップ間の空き”を消す */
  margin-top: 10px;
  line-height: 1.8;
}

.pref-pill{
  padding: 0;          /* 余白撤去 */
  border: none;        /* 枠線撤去 */
  border-radius: 0;    /* 角丸撤去 */
  background: transparent; /* 背景撤去 */

  font-weight: 800;
  color: rgba(11, 43, 30, 0.92);
}

/* 区切り（好きに変更OK： " / " や "・" など） */
.pref-pill:not(:last-child)::after{
  content: "、";
  margin-right: 0.2em;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .pref-modal,
  .pref-modal__backdrop,
  .pref-modal__dialog{
    transition: none !important;
  }
}

/* 「日本語：英語キー」の区切り */
.pref-k-sep{
  margin: 0 6px 0 2px;
  opacity: 0.75;
}


/* CANARY_ZW */
/* BUILD_ID: YR-2025-0904-K12 */
/* END_OF_FILE */