/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: fma
 * BUILD_ID: YR-2025-0826-K2                 // ← 公開用の可視ビルド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; margin:0; padding:0; }
html, body { height:100%; font-size:18px; }
body {
  font-family: sans-serif;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 言語切替 */
.lang-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
}
.lang-toggle button {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin-left: 8px;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
}

.lang-en .lang-ja { display: none; }
body:not(.lang-en) .lang-en { display: none; }

/* 画面共通 */
.screen {
  text-align: center;
  width: 100%;
  max-width: 360px;
}
.hidden { display: none; }

/* ホーム画面 */
.field {
  margin: 24px 0;
}
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.field select {
  width: 100%;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 4px;
  border: 2px solid #555;
  background: #222;
  color: #fff;
}
.description {
  margin-top: 12px;
  font-size: 1rem;
  color: #ccc;
}
.action-btn {
  margin-top: 20px;
  padding: 14px 28px;
  background: #28a;
  border: none;
  border-radius: 4px;
  font-size: 1.3rem;
  color: #fff;
  cursor: pointer;
}
.action-btn:hover {
  background: #17a;
}

/* カウントダウン画面 */
#screen-countdown {
  font-size: 6rem;
}

/* フラッシュ表示画面 */
#screen-flash {
  font-size: 8rem;
  font-weight: bold;
  line-height: 1;
}

/* 解答入力画面 */
.input-display {
  font-size: 2.2rem;
  height: 3em;
  line-height: 3em;
  margin-bottom: 16px;
  background: #222;
  border-radius: 4px;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.keypad button {
  padding: 18px;
  font-size: 1.3rem;
  background: #444;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.keypad button:hover {
  background: #666;
}
#submitBtn {
  width: 100%;
  margin-top: 16px;
}

/* 結果画面 */
.small-muted {
  color: #aaa;
  margin: 12px 0;
  font-size: 1rem;
}



/* =======================
 * 1280pxベースの2カラム
 * ======================= */
.app {
  width: 1280px;
  max-width: 100vw;
  margin: 64px auto 24px;
  display: grid;
  grid-template-columns: 1fr 420px; /* 左大きめ / 右サイドバー */
  gap: 24px;
  align-items: start;
}
.title { text-align: left; margin-bottom: 8px; }

.left {
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.right .panel {
  background: #151515;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.panel-label { display:block; margin-bottom:8px; }

/* 右上リンク */
.top-link {
  display:inline-block;
  border: 2px solid #fff;
  color:#fff;
  text-decoration:none;
  padding: 8px 12px;
  margin-left: 8px;
  height: 40px;
  line-height: 22px;
}

/* 画面エリアの表示調整 */
.left .screen { 
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
}
#screen-countdown { 
  display:flex; align-items:center; justify-content:center;
  font-size: clamp(120px, 18vw, 420px);
}

/* フラッシュ数字を巨大＆蛍光緑（縁取り） */
#screen-flash { 
  display:flex; align-items:center; justify-content:center;
}
#flashNumber {
  font-size: clamp(120px, 20vw, 640px); /* 1280px時に大きく表示（概ね80%相当） */
  font-weight: 900;
  color: #39ff14; /* 蛍光緑 */
  text-shadow:
    -3px 0 #003300, 0 3px #003300, 3px 0 #003300, 0 -3px #003300, /* 縁取り */
    0 0 16px rgba(57,255,20,0.8), 0 0 32px rgba(57,255,20,0.5); /* グロー */
  line-height: 1;
  letter-spacing: 2px;
}

/* 入力ボードやボタンの幅を右カラム用に最適化 */
.right select { width:100%; padding:10px; font-size:1.1rem; border-radius:6px; border:2px solid #333; background:#222; color:#fff; }
.right .wide { width:100%; font-size:1.2rem; padding:14px 0; }
.name-row { display:flex; gap:8px; align-items:center; margin: 10px 0 12px; }
.name-row input { flex:1; padding:8px 10px; background:#222; border:1px solid #333; border-radius:6px; color:#fff; }
.mini-btn { font-size:.9rem; padding:6px 10px; background:#444; border:none; border-radius:6px; color:#fff; cursor:pointer; }
.rank-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rank-list { list-style: decimal; padding-left: 1.25rem; max-height: 420px; overflow:auto; }
.rank-list li { padding: 6px 0; border-bottom: 1px dashed #333; font-variant-numeric: tabular-nums; }
.rank-list small { color:#aaa; }

/* 結果スコア表示 */
.score-text { font-size: 1.6rem; margin: 6px 0 4px; color:#fff; }
.enter-hint { font-size: .95rem; color:#aaa; margin: 8px 0 16px; }

/* 既存ボタンも少しだけ拡大 */
.action-btn { font-size: 1.2rem; border-radius:8px; }