/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: ShootTypingADF1
 * BUILD_ID: YR-2025-0826-K7                 // ← 公開用の可視ビルド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 — ShootタイピングASDF1ゲーム 用スタイル（最終版）
==================================================================*/

/* =========================================================
   Global reset / 基本ボックス設定・余白リセット
   ========================================================= */
* {
  box-sizing: border-box; /* パディングやボーダーを幅/高さに含める */
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* =========================================================
   Base (Typography / Background)
   ========================================================= */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
    'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Arial, sans-serif; /* 読みやすい汎用フォント */
  color: #f2f4f8; /* 全体の基本テキスト色（薄い白） */
  background: radial-gradient(
    1200px 600px at 50% -10%,
    #0b1736 0%,
    #070d1f 40%,
    #050914 70%,
    #03060c 100%
  ); /* 宇宙っぽい放射グラデ背景 */
}

/* =========================================================
   App wrapper / ページ最大幅と左右中央寄せ
   ========================================================= */
.app-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px;
}

/* =========================================================
   Top bar / タイトルと操作ボタンの段組
   ========================================================= */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.brand {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.15); /* ほんのり発光 */
}
.controls > * {
  margin-left: 8px; /* ボタン間の余白 */
}

/* ボタン類（共通）：外観・ホバー・押下アニメ */
button,
a#btnTop {
  background: #1b274f;
  color: #e7ecff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
button:hover,
a#btnTop:hover {
  background: #223166;
}
button:active {
  transform: translateY(1px);
}

/* =========================================================
   Main layout / メイン2カラム（ゲーム領域4 : サイド1）
   ========================================================= */
.layout {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 12px;
  min-height: 580px;
}

/* ゲーム領域のパネル外観 */
.game-col {
  position: relative;
  background: linear-gradient(#040b1a, #0a1838);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

/* HUD（スコア等） */
.hud {
  margin-bottom: 6px;
  font-size: 14px;
}
.hud-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hud-item {
  opacity: 0.95;
}
.hud-item.small {
  font-size: 12px;
  opacity: 0.75;
}

/* キャンバス：角丸のみ、サイズは親幅に追随 */
#game {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: transparent;
}

/* =========================================================
   Side panel / 右側のランキングや入力欄
   ========================================================= */
.side-col .panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px;
  min-height: 540px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.35);
}
.panel h2 {
  margin: 4px 0 8px;
  font-size: 18px;
}
.name-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.name-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.share-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.small {
  font-size: 12px;
}
.danger {
  background: #5a1d1d; /* 危険操作ボタン（赤系） */
}

/* ランキングリスト */
#rankList {
  list-style: decimal inside;
  margin: 8px 0 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}
#rankList li {
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#rankList li .meta {
  opacity: 0.7;
  font-size: 12px;
}

/* =========================================================
   Modal / リザルト等のダイアログ
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.hidden {
  display: none;
}
.modal-dialog {
  width: min(560px, 92vw);
  background: #111a33;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.modal-dialog h3 {
  margin: 6px 0 10px;
}
.modal-dialog button {
  width: 100%;
  margin-top: 12px;
}

/* =========================================================
   Responsive / 1080px以下で1カラム
   ========================================================= */
@media (max-width: 1080px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .side-col .panel {
    min-height: auto;
  }
}

/* =========================================================
   Music credit / 画面下部のBGM表記（中央寄せ・小さめ）
   ========================================================= */
.music-credit {
  text-align: center;
  font-size: 14px;
  opacity: 0.75;
  margin-top: 6px;
}

/* =========================================================
   LIFEハート色 / ハートのみピンク（見やすいシャドウ）
   ========================================================= */
#life {
  color: #ff6bb5;                                  /* ピンク色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);      /* 視認性アップ */
  font-weight: 700;                                 /* ほんのり太字 */
}