/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Typing_Skill_Metrix
 * BUILD_ID: YR-2025-1203-K17                 // ← 公開用の可視ビルド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가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/* =========================================================
 * Typing_Skill_Metrix - UI Styles
 * =======================================================
 *  ベースレイアウト
 * ================================== */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 画面いっぱいに広げるキャンバス（背景として固定） */
#metrixCanvas {
  position: fixed;
  inset: 0;          /* top:0; right:0; bottom:0; left:0 と同じ */
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  z-index: 0;        /* 背景レイヤー */
}


/* ----------------------------------
 *  中央オーバーレイメッセージ
 *  ・必要なければ .overlay-message 自体を削除可
 * ---------------------------------- */
/* ----------------------------------
 *  中央オーバーレイメッセージ
 * ---------------------------------- */
.overlay-message {
  position: fixed;
  left: 50%;
  top: var(--overlay-top, 45%); /* ← JSが必要時だけ px で上書きする */
  transform: translate(-50%, -50%);

  display: inline-block;                 /* 中身の幅で箱が決まりやすくなる */
  width: fit-content;                    /* ★短文は細く、長文は広く */
  max-width: min(92vw, 1800px);          /* 画面からはみ出さない上限 */
  overflow: hidden;    /* ← 枠外にはみ出す発光（text-shadow等）も綺麗にクリップ */
  box-sizing: border-box;

  padding: 0.55em 1.2em;
  border: 1px solid #00ff66;
  color: #ccffcc;
  background: rgba(0, 0, 0, 0.85);

  /* ★変更：画面幅に応じてベース文字サイズを自動調整 */
  font-size: clamp(1.4rem, 3.6vw, 3.0rem);

  letter-spacing: 0.05em;
  line-height: 1.15;

  text-shadow: 0 0 6px #00ff66;
  box-shadow: 0 0 120px rgba(0, 255, 102, 0.5);
  pointer-events: none;
  display: none;
  z-index: 20;
  text-align: center;
}


/* 品詞＋意味（日本語）行 */
.overlay-line.overlay-meaning {
  /* ★変更：画面幅に追従して少し大きく（小画面でも潰れない） */
  font-size: clamp(0.95rem, 1.6vw, 1.45rem);

  /* ★追加：日本語が長い場合に備えて折り返し許可（はみ出し/欠け防止） */
  white-space: normal;
  line-height: 1.25;

  margin-bottom: 8px;
  color: #a0ffb0;
  text-align: center;
}

/* meaning_ja（日本語の意味）だけ、さらに一段だけ大きくする */
.overlay-meaning-ja {
  opacity: 0.95;
  font-size: 1.12em; /* ← 1.08〜1.20em で好み調整OK */
}


.overlay-pos-ja {
  margin-right: 0.75em;
  color: #66ff99;
}

.overlay-qno {
  /* ★ 出題番号（例: 1. / 1/98.） */
  display: inline-block;
  margin-right: 0.45em; /* ← ここが「1/98」と「励まし…」の間隔。0.30〜0.70emで好み調整 */

  color: #66ff99;
  text-shadow: 0 0 8px rgba(0, 255, 120, 0.55);
}



.overlay-meaning-ja {
  opacity: 0.95;
}


/* overlay 内の行レイアウト */
.overlay-line {
  display: block;   /* span 等でも「行」が幅を持つようにする */
  width: 100%;
  white-space: nowrap;
}


/* 入力中フィールドの行 */
.overlay-current {
  /* ★調整：短い単語でも「小さくなり過ぎない」ように、
     まずは親（.overlay-message）のサイズを基準に大きめ表示。
     はみ出す長文は JS の fitOverlayCurrentText() が自動で縮小します。 */
  font-size: 0.95em;

  /* 既存の雰囲気は維持（長文時は JS が一時的に詰めます） */
  letter-spacing: 0.18em;

  /* はみ出し計測・フィット用 */
  max-width: 100%;

  display: block;
  width: 100%;
  text-align: center;

}


/* 「Type the word: knock」などの行 */
.overlay-target {
  margin-top: 0.4em;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* 入力済みの文字（白く強調） */
.overlay-typed {
  color: #ffffff;
}

/* これから打つ文字（少し淡い緑） */
.overlay-remaining {
  color: #00ff99;
  opacity: 0.6;
}


/* 3,2,1,GO 用のカウントダウン表示 */
.countdown-overlay {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
  z-index: 40;
  pointer-events: none;
  display: none;
}

/* 一時停止中の「PAUSE」表示 */
.pause-overlay {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: 4.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #00ff99;
  text-shadow:
    0 0 12px #00ff99,
    0 0 32px #00ff99,
    0 0 60px #00ff99;
  z-index: 45;
  pointer-events: none;
  display: none;
}


/* ==================================
 *  仮想キーボードの 3D ステージ
 *  （ここで視点＝ヴァニッシングポイントを制御）
 * ================================== */

.keyboard-stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 25px;               /* 盤面を少し手前に出したいときはマイナスを増やす */
  top: 55%;                    /* キャンバスとキーボードの境界位置（高さ） */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;        /* 盤面以外はクリックを通す */
  z-index: 10;

  /* 一点透視図法の視点設定 */
  perspective: 900px;          /* 値を小さくするほど奥行きが強調される */
  perspective-origin: 50% 100%;/* 画面下中央に消失点があるイメージ */
}

/* ==================================
 *  仮想キーボード（画面下 1/3 目安）
 * ================================== */

/* 「鍵盤そのもの」の見た目＋3D 変形を担当 */
.keyboard {
  position: relative;
  width: 100%;
  max-width: 600px;                 /* 奥行きのある盤面の横幅 */
  padding: 12px 16px 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.75);
  border-top: 2px solid #003322;

  /* 一点透視図法っぽく、下から奥に寝かせる */
  transform-origin: 50% 100%;       /* 中央下を支点に回転 */
  transform: rotateX(45deg);        /* 角度は 50〜70deg くらいで調整 */
}


/* 各行のレイアウト（既存） */
.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 上の行ほど少し小さく・奥側へ */
.keyboard-row:nth-child(1) {
  transform: translateY(-8px) scale(0.80);
}
.keyboard-row:nth-child(2) {
  transform: translateY(-4px) scale(0.90);
}
.keyboard-row:nth-child(3) {
  transform: translateY(0px)  scale(1.00);
}

/* スペース行だけさらに手前＆大きめ */
.keyboard-row--space {
  margin-top: 10px;
  transform: translateY(6px) scale(1.10);
}


/* 個々のキー */
.key {
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #00aa55;
  background: rgba(0, 0, 0, 0.85);
  color: #ccffcc;
  font-size: 32px;
  text-align: center;
  box-shadow: 0 0 3px #003322;
  cursor: default;
  transition:
    background 0.05s ease-out,
    transform 0.05s ease-out,
    box-shadow 0.05s ease-out;
}

/* スペースキーは横長にする */
.key.key--space {
  flex: 1;
  text-align: center;
}

/* 今押してほしいキーのハイライト（炎っぽい光り方） */
.key.is-target {
  background:
    radial-gradient(circle at 30% 0%, #ffffaa 0, transparent 60%),
    radial-gradient(circle at 70% 0%, #ffdd66 0, transparent 60%),
    rgba(0, 0, 0, 0.9);
  border-color: #ffcc66;
  color: #fff5dd;
  box-shadow:
    0 0 14px rgba(255, 200, 0, 0.9),
    0 0 32px rgba(255, 140, 0, 0.8);
  animation: flameFlicker 0.14s infinite alternate;
}



/* ==================================
 *  中央ブラックフィールド（3つ目以降の候補表示帯）
 * ================================== */

.word-queue-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 60%;                          /* オーバーレイとキーボードの中間あたり */
  height: 25px;                      /* 帯の太さ。お好みで 60〜100px 程度に調整 */
  background: rgba(0, 0, 0, 0.65);   /* ほぼ真っ黒な帯 */
  border-top: 0.1px solid #00ff661e;
  border-bottom: 0.1px solid #00ff6634;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;              /* クリックをキャンバス側に通す */
  z-index: 15;                       /* キャンバスより前、オーバーレイより少し後ろでもOK */
}

.word-queue-inner {
  max-width: 40vw;                   /* 横幅を少し絞る */
  overflow: hidden;                  /* はみ出しは隠す（必要なら横スクロールにもできる） */
}

.word-queue-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.0rem;                       /* 単語間の間隔 */
  align-items: center;
}

/* ブラックフィールド上に並ぶ単語 */
.word-queue-item {
  color: #00ff99;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0.85;
}

/* 将来「次々候補を少し強調したい」ときのためのクラス（今は使わなくてもOK） */
.word-queue-item--emphasis {
  font-size: 1.2rem;
  text-shadow: 0 0 8px #00ff66;
}

/* ==================================
 *  上部 HUD（SCOREスコア／タイマー／sec/textなど）
 * ================================== */

.hud-bar {
  position: fixed;
  top: 0;
  left: 4px;
  right: 4px;
  z-index: 30;
  /* ここは flex にしない */
}

/* HUD 内の 1 行分（ボタン列／統計列） */
.hud-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 上段：START〜YUURAKU の高さと配置 */
.hud-row--buttons {
  margin-top: 8px;              /* ← ボタン列全体の「縦位置」 ※上に上げたければ小さくする */
  justify-content: flex-end;    /* ← ここを flex-end にすると右寄せになる */
  padding-right: 40px;          /* ← 右端からどれくらい内側に寄せるか。調整ポイント */
  gap: 12px;                     /* ← ボタン間の横間隔 */
}

/* 上段ボタン列だけ、横幅を詰めてコンパクトにする */
.hud-row--buttons {
  gap: 8px;            /* 12px → 8px：ボタン間隔を少し詰める */
  padding-right: 24px; /* 40px → 24px：右端の余白を少し詰める */
}

/* 上段ボタンの箱サイズだけ上書き（下段の統計行には影響しない） */
.hud-row--buttons .hud-item {
  min-width: 88px;     /* 120px → 88px：横幅を縮める */
  padding: 4px 8px;    /* 4 10 → 4 8：左右余白を少し縮める */
  font-size: 0.58rem;  /* 0.6 → 0.58：僅かに小さく（任意） */
  letter-spacing: 0.06em;
}

/* 追加ボタン（OVERVIEW）を少しだけ差別化したい場合（任意） */
#btnOverview {
  border-color: #00ffcc;
}


/* 下段：SCORE〜sec/text の高さ（お好みで調整） */
.hud-row--stats {
  /* 低解像度（縦が低い）ほど margin-top を自動で小さくして、中央ボックスとの干渉を防ぐ */
  margin-top: calc(env(safe-area-inset-top, 0px) + clamp(56px, 14vh, 150px));
}


/* 個々のボックスの共通見た目 */
.hud-item {
  min-width: 120px;
  padding: 4px 10px;           /* ← ここだけ変更。数字を小さくすると「詰まる」 */
  box-sizing: border-box;
  /* 少し透過させる（0.45 くらいが程よく背景が透けます） */
  background: rgba(0, 0, 0, 0.45);
  /* 中央フィールドと同じ蛍光グリーンの枠線 */
  border: 1px solid #00ff66;
  /* ※ ここでは box-shadow は付けない（光らせるのは別クラスで制御） */
  box-shadow: none;
  color: #00ffcc;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* ここでクリックを有効化 */
}

/* SCORE / TIME / MISS / COMBO / sec/text 用（落ち着いた見た目）
   スコア類は「底辺だけ光る」＋ box-shadow なし */
.hud-item--stat {
  flex: 0 0 120px;          /* ← 幅を固定。数字が増えても広がらない */
  border: 0px solid #00ff66;
  box-shadow: none;          /* ← 箱全体のグローは消す */
  position: relative;        /* ← 下の ::after 用の基準位置 */
}

/* ★ ボックス底辺だけ光らせる */
.hud-item--stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;  /* ← ボックスよりどれだけ下に出すか（0～-4px くらいで調整） */
  height: 7px;   /* ← 光の「厚み」。太くしたければ数値を増やす */

  /* 下が一番明るく、上にいくほど透明になるグラデーション */
  background: linear-gradient(
    to top,
    rgba(0, 255, 102, 0.8),  /* 一番下：強い緑 */
    rgba(0, 255, 102, 0.0)   /* 上に向かって透明へ */
  );

  pointer-events: none; /* クリックを邪魔しない */
}

/* sec/text 用に少し幅広に（★こちらも固定幅） */
.hud-item--wide {
  flex: 0 0 60px;      /* ← 必要なら 180〜210 くらいで調整 */
}

/* ボタン類だけ箱全体にグローを付けたいならこちら */
/* Consolidated HUD button styles. All properties are defined in a single rule below. */



/* ラベルと数値の色分け */
.hud-label {
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
  margin-left: 4px;
}

.hud-value {
  font-weight: 700;
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;

}

/* ボタン系（MENU/START/...） */
.hud-button {                    
  /* Box shadow for glowing effect */
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
  cursor: pointer;
  border: 0.1px solid #00ff66;

  /* 統計やタイトルの色と一致させる */
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;

  transition:
    background 0.1s ease-out,
    color 0.1s ease-out,
    box-shadow 0.1s ease-out,
    transform 0.05s ease-out;
}


.hud-button:hover {
  background: #00aa55;
  color: #001100;
  box-shadow: 0 0 12px #00ff66;
  transform: translateY(1px);
}

/* YUURAKU だけ少し目立たせる */
.hud-button--accent {
  border: 1px solid #00ff66;
}

/* ==================================
 *  MENU パネル（語彙セット／時間）
 * ================================== */

.menu-panel {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直ど真ん中 */
  padding: 20px 64px; /* 上下ちょい増 / 左右を少しだけ細く */
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #00ff66;
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.35);
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
  font-size: 0.9rem;
  z-index: 35;
  display: none;
}


.menu-panel.is-open {
  display: block;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px; /* 各行の間隔 もともと8pt*/
}

/* 1行目（VOCAB SET）はラベルと中身を「上揃え」にする */
.menu-row:first-child {
  align-items: flex-start;
}

/* ラベル右側のコンテナ：中身を縦方向に並べる */
.menu-control {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;              /* ← ここがカテゴリとSELECTの「行送り」 */
}

/* カテゴリボタンの並びをきれいに（折り返し＋余白） */
.menu-category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-row--footer {
  justify-content: space-between;
}

.menu-caption {
  min-width: 110px;
  text-align: right;
  font-weight: 600;
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
}

.menu-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #00ff66;
  background: transparent;
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}

.menu-chip:hover {
  background: #00ff66;
  color: #001100;
  box-shadow: 0 0 10px #00ff66;
}

.menu-chip.is-selected {
  background: #00aa55;
  color: #001100;
}

.menu-status {
  font-size: 0.8rem;
  opacity: 0.85;
}

.menu-close {
  padding: 5px 10px;
  border: 1px solid #444;
  background: #111;
  color: #eee;
  box-shadow: 0 0 20px #00ff66;
  color: #fefefe;
  text-shadow: 0 0 25px #00ff99;
  cursor: pointer;
   /* ★ RUN ボタンを少しだけ下げる */
  margin-top: 12px;   /* お好みで 6〜12px の範囲で調整してOK */
}

/* メニュー下部に BACK / RUN を横並びに配置するラッパー */
.menu-footer-buttons {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-left: auto;
}

/* BACK ボタンの見た目（RUN と同じサイズ感） */
.menu-back {
  padding: 6px 26px;          /* ← #menuClose と同じ余白 */
  border-radius: 999px;
  border: 1px solid #00aa55;
  background: transparent;
  color: #00ff99;
  text-shadow: 0 0 18px #00ff66;
  cursor: pointer;
  margin-top: 12px;           /* RUN と縦位置を揃える */
  font-size: 0.9rem;          /* ← RUN と同じくらいの文字サイズに調整 */
}


.menu-back:hover {
  color: #00ffcc;
  border-color: #00ffcc;
  text-shadow: 0 0 12px #00ffcc;
}


/* MUSIC ラベル */
.menu-label {
  min-width: 110px;
  text-align: right;
  font-weight: 600;
  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;
}

/* MUSIC セレクト本体 */
.menu-select {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #00ff66;
  background: rgba(0, 0, 0, 0.85);
  color: #00ffcc;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px #00ff66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);

  /* ブラウザ標準の白っぽいスタイルをできるだけ消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ドロップダウン展開時の各 option の見た目（対応ブラウザのみ） */
.menu-select option {
  background: #000810;
  color: #00ffcc;
}

/* =========================================
 * RUN ボタン専用：炎のような輝き
 * ========================================= */
/* RUN ボタンのベーススタイル（まだ準備が整っていない状態） */
#menuClose {
  padding: 6px 26px;
  border-radius: 999px;
  border: 1px solid #00ff66;
  background: #001a10;
  color: #e0ffe5;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
  text-shadow: 0 0 18px #00ff99;
  cursor: pointer;
  margin-top: 12px;  /* 位置調整用。お好みで */
}

/* セット＆制限時間が両方選ばれて「いつでも走れる」状態のときだけ炎エフェクト */
#menuClose.is-ready {
  border-color: #ffcc66;
  background:
    radial-gradient(circle at 30% 0%, #ffffaa 0, transparent 55%),
    radial-gradient(circle at 70% 0%, #ffdd66 0, transparent 55%),
    rgba(0, 0, 0, 0.9);
  color: #fff5dd;
  text-shadow:
    0 0 4px  #ffffaa,
    0 0 10px #ffdd66,
    0 0 22px #ff9500;
  box-shadow:
    0 0 14px rgba(255, 200, 0, 0.9),
    0 0 32px rgba(255, 140, 0, 0.8);
  animation: flameFlicker 0.12s infinite alternate;
}

/* 炎 READY 中だけ hover で少し押し込む */
#menuClose.is-ready:hover {
  transform: translateY(1px);
  box-shadow:
    0 0 16px rgba(255, 210, 0, 1),
    0 0 40px rgba(255, 160, 0, 0.95);


  /* 枠線は暖色系に */
  border: 1px solid #ffcc66;

  /* 鍵盤ターゲットと同じような炎グラデーション */
  background:
    radial-gradient(circle at 30% 0%, #ffffaa 0, transparent 55%),
    radial-gradient(circle at 70% 0%, #ffdd66 0, transparent 55%),
    rgba(0, 0, 0, 0.9);

  color: #fff5dd;
  text-shadow:
    0 0 4px  #ffffaa,
    0 0 10px #ffdd66,
    0 0 22px #ff9500;

  box-shadow:
    0 0 14px rgba(255, 200, 0, 0.9),
    0 0 32px rgba(255, 140, 0, 0.8);

  /* 炎のチラつきアニメーションを適用 */
  animation: flameFlicker 0.12s infinite alternate;
}

/* RUN ボタン hover 時の微調整（少しだけ押し込む感じ） */
#menuClose:hover {
  transform: translateY(1px);
  box-shadow:
    0 0 16px rgba(255, 210, 0, 1),
    0 0 40px rgba(255, 160, 0, 0.95);
}



/* =========================================
 * 画面中央の MENU ランチャー
 * ========================================= */
.center-menu-launcher {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;        /* ← これで上下方向を中央寄せ */
  justify-content: center;    /* ← 左右方向の中央寄せ */
  transform: translateY(-60px);   /* ★ ここを足す：上に 60px シフト */
  z-index: 1200;
  pointer-events: none; /* コンテナ自体はクリックを通さない */
}

/* 中央 MENU ランチャーのボタン（PAUSE 系デザイン） */
.center-menu-launcher .hud-button {
  min-width: 260px;                   /* 横幅 */
  padding: 50px 200px;                  /* 上下・左右の余白（ボックスの立幅） */
  font-size: 1.8rem;                  /* フォントサイズ */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: rgba(0, 0, 0, 0.70);
  border: 0px solid #00ff66;
  color: #00ffcc;
  text-shadow:
    0 0 10px #00ff66,
    0 0 30px #00ff66;
  box-shadow: 0 0 120px rgba(0, 255, 102, 0.5);
  /* ★ ここから追加：内部を縦方向に並べる */
  display: flex;
  flex-direction: column;   /* 上：タイトル / 下：CLICK START */
  align-items: center;      /* 横方向中央揃え */
  justify-content: center;  /* 縦方向中央揃え */

}
/* メインタイトルの下に炎エフェクト付き「CLICK START」を表示 */
.center-menu-launcher .hud-button::after {
  content: "CLICK START";
  margin-top: 2.0rem;        /* タイトルとの間隔 */
  padding: 0.35em 1.6em;     /* バッジの大きさ */
  font-size: 0.4em;          /* タイトルより小さく */
  letter-spacing: 0.30em;
  display: inline-block;
  border-radius: 999px;      /* カプセル形 */
  border: 1px solid #ffcc66;

  /* 炎っぽい背景＋色味（キーボードの is-target と同系統） */
  background:
    radial-gradient(circle at 30% 0%, #ffffaa 0, transparent 60%),
    radial-gradient(circle at 70% 0%, #ffdd66 0, transparent 60%),
    rgba(0, 0, 0, 0.2);
  color: #fff5dd;
  box-shadow:
    0 0 14px rgba(255, 200, 0, 0.9),
    0 0 32px rgba(255, 140, 0, 0.8);

  /* 既存の炎アニメーションを流用 */
  animation: flameFlicker 0.16s infinite alternate;
}


/* ゲーム開始後に非表示にする用 */
.center-menu-launcher.is-hidden {
  display: none;
}

/* 中央の MENU ボタンだけクリック可能にする */
.center-menu-launcher .hud-button {
  pointer-events: auto;
}

/* スペースキーを表す小さな光るボックス */
.overlay-space-hint {
  display: none;                 /* ★ JSから必要なときだけ display:block にする */
  width: 2.5rem;                 /* ボックスの横幅 */
  height: 1.0rem;                /* ボックスの高さ */
  margin-left: 0.6rem;           /* 単語との間隔 */
  border-radius: 2px;
  border: 0.05px dashed #ffffaa;    /* 点線枠で「空白」をイメージ */
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
  background: rgba(0, 0, 0, 0.7);
}

/* 「今すぐ SPACE を押して！」状態のとき、炎っぽくチカチカさせる */
.overlay-space-hint.is-hot {
  border-style: solid;
  background:
    radial-gradient(circle at 30% 0%, #ffffaa 0, transparent 55%),
    radial-gradient(circle at 70% 0%, #ffdd66 0, transparent 55%),
    rgba(0, 0, 0, 0.9);
  box-shadow:
    0 0 10px rgba(255, 180, 0, 0.9),
    0 0 25px rgba(255, 120, 0, 0.8);
  animation: flameFlicker 0.12s infinite alternate;
}

/* 炎のチラつきアニメーション（簡易版） */
@keyframes flameFlicker {
  from {
    transform: translateY(0px);
    box-shadow:
      0 0 10px rgba(255, 180, 0, 0.7),
      0 0 18px rgba(255, 120, 0, 0.6);
  }
  to {
    transform: translateY(-1px);
    box-shadow:
      0 0 14px rgba(255, 220, 0, 0.9),
      0 0 30px rgba(255, 140, 0, 0.9);
  }
}
/* 打鍵中の文字を光らせる効果 */
.typing-current-char {
  text-shadow:
    0 0 4px  #ffffaa,
    0 0 16px #ffd334,
    0 0 48px #ff9500;
  /* 必要なら色も */
  color: #ede8cd; 
}

/* 結果オーバーレイ全体（画面いっぱいを覆うレイヤー） */
.result-overlay {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; と同じ */
  display: flex;
  align-items: center;      /* 垂直方向センタリング */
  justify-content: center;  /* 水平方向センタリング */
  background: radial-gradient(circle at center,
                              rgba(0, 0, 0, 0.2),
                              rgba(0, 0, 0, 0.9));
  z-index: 9999;
}

/* 結果パネル本体（中央の黒い箱） */
.result-panel {
  width: min(60vw, 720px);   /* 画面幅に応じて自動調整（最大 720px） */

  margin: 0;
  padding: 24px 32px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.88);
  box-shadow: 0 0 32px rgba(0, 255, 153, 0.5);
  color: #e0ffe5;
  text-align: left;
}


/* タイトル FINISH 表示 */
.result-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: 0.15em;
  color: #00ff99;
  text-shadow: 0 0 10px #00ff99;
}

/* 「60秒モード TIME UP」など */
.result-subtitle {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* 結果の数値一覧 */
.result-stats {
  margin: 0 0 16px;
  padding: 0;
}

.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin: 4px 0;
}

.result-row dt {
  margin: 0;
  opacity: 0.8;
}

.result-row dd {
  margin: 0;
  font-weight: 600;
}

/* ボタンエリア */
.result-buttons {
  text-align: center;
  margin-top: 8px;
}

#resultBackButton {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #00ff99;
  background: #00281a;
  color: #e0ffe5;
  cursor: pointer;
  font-size: 0.95rem;
}

#resultBackButton:hover {
  background: #00ff99;
  color: #00281a;
}

/* FINISH画面：レベル進捗表示エリア */
.result-level-extra {
  margin: 6px 0 6px;
}

.result-level-progress {
  font-size: 0.85rem;
  color: #ccffcc;
  text-align: left;
}

.result-level-progress-nums {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 「LEVEL UP」炎文字 */
.result-levelup-label {
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  color: #fff5dd;
  text-shadow:
    0 0 4px  #ffffaa,
    0 0 10px #ffdd66,
    0 0 24px #ff9500,
    0 0 40px #ff6600;
  animation: flameFlicker 0.14s infinite alternate;
}

/* ==================================
 *  STATUS パネル（レベル／累計ステータス）
 * ================================== */

.status-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 520px;      /* ← 少し横長に */
  max-width: 760px;      /* ← フルHD想定で横幅を拡大 */
  max-height: 78vh;      /* ← 画面の 8割弱に抑える */
  padding: 18px 50px;    /* ← ほんの少しだけ縦の余白を詰める */
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #00ff66;
  box-shadow: 0 0 26px rgba(0, 255, 102, 0.45);
  color: #e0ffe5;
  /* Z-index を中央メニューよりも高く設定して、
     STATUS パネルがタイトルランチャーより前面に表示されるようにする。*/
  z-index: 2000;       /* MENU より前、リザルトよりは下でもOK */
  display: none;       /* JS 側の .is-open で開閉 */
  overflow-y: auto;      /* 念のため残しておく */
}


.status-panel.is-open {
  display: block;
}

/* Add positioning for Next Page and Close buttons within the status panel */
/*
 * Reset positioning rules for the STATUS panel and its control buttons.
 * Previously the #statusPanel selector was given `position: relative` and the
 * NEXT PAGE / CLOSE buttons were absolutely positioned within the panel.  That
 * override inadvertently trumped the `.status-panel` rule (which sets
 * `position: fixed` and centers the panel via a transform), causing the
 * STATUS overlay to appear anchored to the top of the page instead of
 * centered.  Removing these rules restores the default fixed centering.
 *
 * The NEXT PAGE and CLOSE buttons are contained within the `.status-footer`
 * element and will follow the normal flow of that container.  Do not
 * reposition them absolutely here; they already align naturally at the
 * footer’s right edge.
 */


/* ヘッダー行（タイトル＋閉じるボタン） */
.status-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.status-panel-title {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00ff99;
  text-shadow: 0 0 12px #00ff99;
}

/* 閉じるボタン（右上） */
.status-close,
#statusClose {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #00ff66;
  background: #001a10;
  color: #e0ffe5;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.status-close:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}


.status-close:hover,
#statusClose:hover {
  background: #00ff99;
  color: #001a10;
}

/* セクションごとのブロック */
.status-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 255, 102, 0.25);
}


/* セクション見出し */
.status-section-title {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #00ff99;
  opacity: 0.9;
}

/* レベル＆⭐行（上の目立つ部分） */
.status-main-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.status-level-next {
  margin-left: 0.6rem;
  font-size: 0.9rem;
  color: #ccffcc;
}

/* LEVEL のラベル */
.status-level-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* LEVEL 数値 */
.status-level-value,
#statusLevelValue {
  font-size: 2.0rem;
  font-weight: 700;
  color: #00ff99;
  text-shadow:
    0 0 8px #00ff99,
    0 0 24px #00ff99;
}

/* ⭐行 */
.status-stars-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.status-stars-value,
#statusStarsValue {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  color: #ffd966;
  text-shadow:
    0 0 6px #ffd966,
    0 0 18px #ffbf00;
  white-space: nowrap;
}

/* 累計ステータスのグリッド（左ラベル／右値） */
.status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  font-size: 0.8rem;
  margin-top: 4px;
}
.status-grid-label  { text-align: left;  opacity: 0.8; }
.status-grid-value  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 累計系の各値をまとめて少し強調 */
#statusTotalScore,
#statusTotalPlayTime,
#statusTotalWords,
#statusTotalCorrect,
#statusTotalMiss,
#statusAccuracy,
#statusSessions, 
#stLifetimeCpm {           /* ★ 追加 */
  font-weight: 600;
}

/* ==================================
 *  THANKS パネル（BGM クレジット）
 * ================================== */

.thanks-message {
  font-size: 0.85rem;
  margin-bottom: 8px;
  line-height: 1.6;
  opacity: 0.9;
}

.thanks-note {
  margin-top: 8px;
  font-size: 0.7rem;
  opacity: 0.7;
}

/* クレジット用テーブル */
.thanks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 4px;
}

.thanks-table th,
.thanks-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 255, 102, 0.18);
}

.thanks-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00ff99;
  opacity: 0.85;
}

.thanks-creator {
  white-space: nowrap;
  opacity: 0.9;
}

.thanks-title a {
  color: #00ffcc;
  text-decoration: none;
}

.thanks-title a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* -------------------------------------------------------------
 * STATUS パネル内レイアウト補助
 * ----------------------------------------------------------- */

/* 中段：累計ステータス＋ベストスコアを左右 2 カラムで配置 */
.status-body {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: 8px;
}

/* 左：LIFETIME TOTAL / 右：BEST SCORE の幅バランス */
.status-section--total {
  flex: 1.1;
}

.status-section--best {
  flex: 0.9;
}

/* 2ページ目：VOCAB / CONVERSATION を左右 2 カラムで表示 */
.status-dataset-columns {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 4px;
}

.status-dataset-column {
  flex: 1;
}

.status-dataset-column-title {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #00ff99;
  opacity: 0.85;
}

/* フッターの NEXT PAGE / CLOSE ボタン行 */
.status-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;

  /* パネルの下辺に張り付くようにする（縦スクロールしても常に下側に見える） */
  position: sticky;
  bottom: 0;

  /* ボタンの下にキーボードが透けて見えないように背景を敷く */
  background: rgba(0, 0, 0, 0.92);
  padding-top: 8px;
}

/* ミスキーランキングの3列表示
 *
 * renderStatusDetailPanel() では、上位 30 件のミスタイプを
 * 10 件ずつ最大 3 列に分けて表示します。各列は ol 要素で、
 * wrapper の .status-mistyped-columns で横並びにします。 */
.status-mistyped-columns {
  display: flex;
  gap: 24px;
  margin-top: 6px;
}

.status-mistyped-column {
  flex: 1;
  margin: 0;
  padding-left: 1.4em;
  list-style-position: outside;
}

/* モード別ベストスコア用のグリッド */
.status-best-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  font-size: 0.8rem;
  margin-top: 4px;
}
.status-best-label  { text-align: left;  opacity: 0.8; }
.status-best-value  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* BEST スコアの値だけまとめて指定 */
#statusBest60,
#statusBest180,
#statusBest300,
#statusBestAll,
#statusBestAllR {
  font-weight: 600;
}

/* =========================================
 * STATUS モード中のゲーム UI 表示制御
 *
 * #gameUiLayer 要素に .is-status-mode クラスが付与されたときに
 * 内部コンテンツのうち #statusPanel だけを表示し、それ以外の
 * 子要素（HUD やキーボード、オーバーレイ等）を非表示にします。
 * 中央メニュー (#centerMenuLauncher) などゲーム UI 外の要素は
 * JavaScript 側で必要に応じて制御します。
 */
#gameUiLayer.is-status-mode > *:not(#statusPanel) {
  display: none;
}

/* =====================================================================
 * STATUS モード補助
 *
 * 中央タイトルランチャーや各種オーバーレイは #gameUiLayer の外側に
 * 配置されているため、単純な子孫セレクタでは非表示にできません。
 * 以下の規則は一般兄弟セレクタを利用し、STATUS モードが有効な際に
 * これらの要素を隠します。STATUS 解除後に元に戻ります。
 */
#gameUiLayer.is-status-mode ~ #centerMenuLauncher,
#gameUiLayer.is-status-mode ~ #overlayMessage,
#gameUiLayer.is-status-mode ~ #pauseOverlay,
#gameUiLayer.is-status-mode ~ #countdownOverlay,
#gameUiLayer.is-status-mode ~ #resultOverlay {
  display: none;
}

/*
 * SCORE TREND Caption & Legend
 *
 * The explanatory text beneath the SCORE TREND chart and its axis labels
 * should be unobtrusive and compact.  Use a small font size (approx.
 * 6 pt) and consistent spacing to ensure the captions do not dominate
 * the panel.  The legend uses a flex layout so the “縦軸…” and
 * “横軸…” labels can spread evenly across the available width.
 */
.status-trend-caption {
  margin-top: 4px;
  font-size: 0.45rem;
  opacity: 0.7;
}

.status-trend-legend {
  margin-top: 2px;
  font-size: 0.45rem;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.status-trend-legend span {
  white-space: nowrap;
}

/* ★ 追加：VOCABカテゴリボタンの横並び調整 */
.menu-dataset-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.menu-dataset-group.is-selected {
  /* 既存 .menu-chip の is-selected と同じでもOK */
  box-shadow: 0 0 12px #0f0;
}

/* === MENUボタンを角丸ではなく四角に統一 ================== */
.menu-chip,
.menu-back,
#menuClose,
#menuClose.is-ready,
#menuClose.is-ready:hover,
.status-close,
#statusClose {
  border-radius: 0;   /* 角丸をやめて四角に */
}

/* =========================================
   Accessibility: Reduce Motion
   - OSの「視覚効果を減らす」がONのとき、点滅/ゆらぎを停止
========================================= */
@media (prefers-reduced-motion: reduce) {
  .key.is-target {
    animation: none !important;
  }
  .typing-current-char {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.35) !important;
  }
}

/* ==================================
 *  SAVE CODE MODAL（Backup/Restore）
 *  hidden属性をインラインdisplayより強く効かせる
 * ================================== */
/* ==================================
 *  SAVE CODE MODAL（Backup/Restore）
 *  - Typing Skill Metrix theme (neon green frame + translucent black)
 *  - hidden属性を display より強く効かせる
 * ================================== */

/* 背面オーバーレイ */
#saveCodeModal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;

  /* 既存UIに合わせた「黒 + 少し透過」 */
  background: rgba(0, 0, 0, 0.70);

  z-index: 99999;
}

/* hidden のときは必ず消す */
#saveCodeModal[hidden] {
  display: none !important;
}

/* モーダル本体（パネル） */
#saveCodeModal .tsm-savecode-panel {
  border-radius: 0;
  width: min(760px, 92vw);
  max-height: 86vh;
  overflow: auto;

  padding: 18px 20px 20px;
  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #00ff66;
  box-shadow: 0 0 26px rgba(0, 255, 102, 0.45);

  color: #e0ffe5;
}

/* ヘッダー（タイトル + CLOSE） */
#saveCodeModal .tsm-savecode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 102, 0.22);
}

#saveCodeModal .tsm-savecode-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #00ff99;
  text-shadow: 0 0 12px #00ff99;
}

/* 説明文 */
#saveCodeModal .tsm-savecode-info {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.92;
  white-space: pre-line; /* ← \n を改行として表示 */

}

/* 入力群 */
#saveCodeModal .tsm-savecode-body {
  white-space: pre-line; /* ← 追加：\n を改行として表示 */
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* input/textarea 共通 */
#saveCodePassphrase,
#saveCodeText {
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;

  padding: 12px 12px;
  border: 1px solid #00ff66;
  background: rgba(0, 0, 0, 0.85);

  color: #00ffcc;
  text-shadow: 0 0 10px #00ff66;

  outline: none;
}

/* textarea をコードっぽく */
#saveCodeText {
  resize: vertical;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* プレースホルダー */
#saveCodePassphrase::placeholder,
#saveCodeText::placeholder {
  color: rgba(0, 255, 153, 0.55);
  text-shadow: none;
}

/* フォーカス（キーボード操作用） */
#saveCodePassphrase:focus-visible,
#saveCodeText:focus-visible,
#saveCodeClose:focus-visible,
#saveCodeAction:focus-visible,
#saveCodeCopy:focus-visible {
  outline: 2px solid #00ffcc;
  outline-offset: 2px;
}


/* ボタン共通（CLOSE / GENERATE / RESTORE） */
#saveCodeClose,
#saveCodeAction,
#saveCodeCopy {
  border-radius: 0;
  padding: 10px 16px;
  border: 1px solid #00ff66;
  background: rgba(0, 0, 0, 0.65);

  color: #00ff99;
  text-shadow: 0 0 25px #00ff99;

  cursor: pointer;

  transition:
    background 0.1s ease-out,
    color 0.1s ease-out,
    box-shadow 0.1s ease-out,
    transform 0.05s ease-out;
}


/* GENERATE / RESTORE を横幅いっぱいに */
#saveCodeAction {
  width: 100%;
  font-weight: 800;
  letter-spacing: 0.10em;
}
#saveCodeCopy {
  width: 100%;
  font-weight: 700;
  letter-spacing: 0.10em;
}

/* hover（マウス操作） */
#saveCodeClose:hover,
#saveCodeAction:hover,
#saveCodeCopy:hover {
  background: #00aa55;
  color: #001100;
  box-shadow: 0 0 12px #00ff66;
  transform: translateY(1px);
}


/* 端末が hover 非対応（タッチ）なら hover を無効化 */
@media (hover: none) {
  #saveCodeClose:hover,
  #saveCodeAction:hover,
  #saveCodeCopy:hover {
    background: rgba(0, 0, 0, 0.65);
    color: #00ff99;
    box-shadow: none;
    transform: none;
  }
}