/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Typingowl2
 * BUILD_ID: YR-2025-1121-K16                 // ← 公開用の可視ビルド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 OWL2 - UI Styles
 * =======================================================*/
/* Reset & base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0e0f12;
  color: #f5f7fb;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: #121622;
  border-bottom: 1px solid #0008;
}

.controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.controls .btn,
.controls button {
  background: #1f2945;
  color: #e9eeff;
  border: 1px solid #2d3862;
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.controls .btn {
  text-decoration: none;
  display: inline-block;
}

/* Layout */
.layout {
  display: grid;
  grid-template-rows: 4fr 1fr;
  min-height: calc(100vh - 56px);
}

.gamewrap {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: transparent;
}

 /* キャンバスを中央寄せ。横はできるだけいっぱいに使う */
 #gameCanvas{
   display:block;
   margin:0 auto;
   width:auto;          /* サイズはJSで制御 */
   height:auto;
   max-width:none;
   border-radius:16px;
   box-shadow:0 20px 60px #0008;
   outline:none;
 }

/* HUD ─ 画面上部の情報表示 */
.hud{
  position: absolute;
  top: 12px;

  /* ★画面中央寄せ */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  /* フォントまわり */
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  font-family: "Yu Gothic", "游ゴシック体", "Meiryo", "メイリオ", system-ui, sans-serif;

  color: #fff;
  text-shadow: 0 2px 6px #000c;
  -webkit-text-stroke: 1px #000;
  z-index: 20;
}


/* Ranking */
.rankwrap {
  padding: 0.6rem 1rem;
  background: #0b0d14;
  border-top: 1px solid #0008;
}

.rankcontrols {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ranking {
  display: grid;
  /* No / Name / Detail の3列 */
  grid-template-columns: 2.5ch minmax(6rem, 12rem) minmax(16rem, 1.8fr);
  gap: 0.2rem 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 960px;
}

.ranking li {
  display: contents;
}

.ranking .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 1件を1行に見せる用 */
.ranking .detail {
  white-space: nowrap;
  font-size: 0.9rem;
  opacity: 0.9;
}


html, body { overscroll-behavior: none; }

/* コンボ表示（ポップアップ式） */
.combo-hud {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 200;

  opacity: 0;
  transform: translate(-50%, -140%) scale(0.8);
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(.17,.67,.62,1.53);
}

/* アクティブ時のポップアニメ—ション */
.combo-hud.active {
  opacity: 1;
  transform: translate(-50%, -180%) scale(1.0);
  animation: comboFloat 1.5s ease-out forwards;
}

/* 数字の虹色グラデーション＋輝き */
.combo-hud .combo-num {
  font-size: clamp(58px, 7vw, 92px);
  font-weight: 900;
  letter-spacing: 0.08em;

  /* 虹色グラデーション */
  background: linear-gradient(
    90deg,
    #ff003c,
    #ff8a00,
    #faff00,
    #14ff00,
    #00c2ff,
    #4800ff,
    #ff00f2,
    #ff003c
  );
  background-size: 400%;
  -webkit-background-clip: text;
  color: transparent;

  /* 輝き */
  -webkit-text-stroke: 4px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.65));
  animation: rainbowFlow 2.5s linear infinite;
}

/* “COMBO”の文字も光らせる */
.combo-hud .combo-text {
  margin-top: -4px;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.28em;

  background: linear-gradient(0deg, #ffffff, #f0f8ff);
  -webkit-background-clip: text;
  color: transparent;

  -webkit-text-stroke: 2px rgba(255,255,255,0.6);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.45));
}

/* 上昇しながらフェードアウトするアニメーション */
@keyframes comboFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1.0);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.0);
  }
}

/* 虹色流動アニメーション */
@keyframes rainbowFlow {
  0% { background-position: 0% 50%;   }
  100% { background-position: 400% 50%; }
}


.app-footer {
  padding: 0.5rem 1rem;
  background: #05060a;
  border-top: 1px solid #0008;
  font-size: 0.78rem;
  color: #c5c9e0;
  text-align: center;
}

.app-footer small {
  opacity: 0.9;
}