/*!
 * © 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;

  /* モバイル/タブレットで「中央寄せ」にすると上が空きすぎるので、上から積む */
  min-height: 100svh;
  display: block;

  /* iPhone のノッチ/ホームバー対策 */
  padding:
    calc(env(safe-area-inset-top) + 12px)
    12px
    calc(env(safe-area-inset-bottom) + 12px);

  position: relative;
}


/* 言語切替（上部バー扱い：小画面でもはみ出さない） */
.lang-toggle {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 50;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 12px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lang-toggle button {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  height: 40px;
  padding: 0 14px;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.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;
}

/* 体感改善：
   - iOS/Androidでの遅延を減らす（touch-action）
   - 長押し時の選択/呼び出しを抑制
   - 押下中の見た目を即時反映（is-down）
*/
.keypad button {
  padding: 18px;
  font-size: 1.3rem;
  background: #444;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.keypad button:hover {
  background: #666;
}

/* pointerdown時に付けるクラス（JS側で付与） */
.keypad button.is-down {
  background: #6a6a6a;
  transform: translateY(1px);
}

/* 送信ボタン：通常でも少し大きく */
#submitBtn {
  width: 100%;
  margin-top: 14px;
  padding: 18px 24px;
  font-size: 1.35rem;
  border-radius: 14px;
}

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

  /* 出題/答えを "\n" で改行表示 */
  white-space: pre-line;
}




/* =======================
 * 1280pxベースの2カラム
 * ======================= */
.app {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 12px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px; /* 左可変 / 右サイドバー */
  gap: 24px;
  align-items: start;
}
.title { text-align: left; margin-bottom: 8px; white-space: nowrap; }

.left {
  min-width: 0;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.right { min-width: 0; }

.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-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;

  padding: 0 12px;
  height: 40px;
  line-height: 1;
  white-space: nowrap;
}


/* 画面エリアの表示調整 */
.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; }


/* =======================
 * Responsive: iPad / iPhone 最適化
 * ======================= */
@media (max-width: 1024px) {
  /* タブレット：右カラムを少し絞って左（プレイ面）を広げる */
  .app {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
  }
  .left { min-height: 520px; }
  .rank-list { max-height: 320px; }

  /* プレイ中だけ右サイドバーを自動収納（数字/テンキーを広く） */
  body.is-playing .app { grid-template-columns: 1fr; }
  body.is-playing .right { display: none; }
}

@media (max-width: 720px) {
  /* スマホ：1カラム化して「縦に積む」＝文字が縦割れしない */
  .app {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .title { text-align: center; }
  .left { min-height: 0; }
  .right .panel { margin-bottom: 12px; }
}

@media (max-width: 480px) {
  /* 小さいスマホ：UIを詰めすぎず、押しやすさ優先 */
  html, body { font-size: 16px; }

  .lang-toggle { justify-content: center; }
  .lang-toggle button { padding: 0 12px; }

  .right .wide { font-size: 1.1rem; padding: 12px 0; }
  .keypad button { padding: 14px; font-size: 1.2rem; }
  .input-display { font-size: 2rem; }
}

@media (max-width: 720px) {
  /* 固定ボタンに被らないように下に余白を作る */
  #screen-input {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* 親指位置：右下に固定 */
  #submitBtn {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(220px, 50vw);
    height: 74px;
    z-index: 20;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }

  .keypad {
    gap: 12px;
  }
  .keypad button {
    padding: 16px;
    font-size: 1.25rem;
  }
}