/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: kikokiko
 * BUILD_ID: YR-2025-0902-K11                 // ← 公開用の可視ビルド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 — 記号で木こり2100
==================================================================*/

/* =========================================================
   グローバル（共通初期化）
   - 余白のリセットや文字色・背景色の初期設定
   ========================================================= */
* { /* すべての要素のボックスモデルを安定化 */
  box-sizing: border-box;
}

html,
body { /* 画面全体の初期化・基本フォントと配色 */
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, 'Noto Sans JP', sans-serif;
  color: #0f172a;          /* 文字色（濃紺） */
  background: #0b1020;     /* 背景（ダークブルー） */
}

h1,
h2,
h3 { /* 見出しのデフォルト余白を削除（独自余白に任せる） */
  margin: 0;
}


/* =========================================================
   トップバー（タイトル・操作ボタン）
   - stickyで常に上部に固定／3カラムのグリッド
   ========================================================= */
.topbar {
  position: sticky;                 /* スクロールしても上部に固定 */
  top: 0;
  z-index: 5;                       /* ほかの要素より前面へ */

  display: grid;                    /* 3カラム配置 */
  grid-template-columns: 1fr 1fr 1fr;

  align-items: center;
  gap: 12px;

  padding: 12px 16px;
  background: #0e7490;              /* ティール系のベース色 */
  color: #fff;
  border-bottom: 4px solid #0b5c72; /* 下線で区切り */
}

.topbar h1 { /* タイトルの視認性向上 */
  letter-spacing: .2em;
  font-weight: 800;
}

/* 右側の操作ボタン群のラッパー */
.controls {
  justify-self: end;                /* 右端に寄せる */
  display: flex;
  flex-wrap: wrap;                  /* 狭い時は折り返し */
  gap: 8px;
}

/* 汎用UIボタン */
.ui {
  background: #134e4a;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 0 #0b5c72;      /* 下方向の控えめな影 */
}

/* a要素など、リンクボタンの見た目調整 */
.ui.link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* 小さめのボタンバリエーション */
.mini {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #475569;
  color: #fff;
  border: none;
}


/* =========================================================
   HUD（スコア・コンボ・残機などの情報表示）
   ========================================================= */
.hud {
  justify-self: center;             /* 中央カラム想定の配置 */
  display: flex;
  gap: 10px;
  align-items: center;
}

/* HUD内の小さなボックス */
.hud .hud-box {
  background: #0b5c72;
  border-radius: 12px;
  padding: 6px 10px;

  display: flex;
  gap: 8px;
  align-items: baseline;            /* 数値とラベルのベースラインを揃える */

  box-shadow: inset 0 0 0 2px #083f4d; /* 内側の枠線 */
}

/* HUDのラベル表記（薄め） */
.hud .lbl {
  opacity: .8;
  font-size: 12px;
  letter-spacing: .1em;
}

/* ハート（残機）表示の並び */
.hearts #hearts {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  color: #ff6aa2;              /* ピンク */
}
/* 経過時間（TIME）表示の体裁 */
.hud .hud-box.time { 
  min-width: 94px; 
  justify-content: space-between;
}
#hudTime {
  font-variant-numeric: tabular-nums; /* 桁ズレ防止 */
  font-weight: 700;
  letter-spacing: .04em;
}

/* 各ハートの見た目（軽くドロップシャドウ） */
.hearts .heart {
  font-size: 16px;
  filter: drop-shadow(0 1px 0 #000);
}

/* 失ったハートは薄くする */
.heart.dead {
  opacity: 0.2;
  opacity: 0.35;               /* お好みで */
  color: #ffd1e1;              /* 薄ピンク（任意） */
}


/* =========================================================
   レイアウト（2カラム：左＝キャンバス／右＝情報欄）
   ========================================================= */
.layout {
  display: grid;
  grid-template-columns: 3fr 2fr;   /* 左右比率 3:2 */
  gap: 12px;
  padding: 12px;
  max-width: 1400px;                /* 中央寄せ & 最大幅 */
  margin: 0 auto;
}

.canvas-wrap{
  /* aspect-ratio は削除 */
  position:relative; width:100%;
  background:#111827; border-radius:12px; overflow:hidden; border:2px solid #0b5c72;
}
#game{
  width:100%;
  height:auto; /* ← これでキャンバスの実比率をそのまま表示 */
  display:block;
}

/* スタート時のカウントダウンオーバーレイ */
.countdown {
  position: absolute;
  inset: 0;                         /* 親要素いっぱいに広げる */
  display: grid;
  place-items: center;              /* 完全中央寄せ */

  font-weight: 900;
  font-size: 120px;
  color: #fff;

  text-shadow: 0 8px 0 #000;        /* 立体感のある影 */
  backdrop-filter: blur(2px);       /* 背景を軽くぼかす */
  background: rgba(0, 0, 0, .25);   /* 半透明の黒で被せる */
}

/* カウントダウンを隠す時 */
.countdown.hidden {
  display: none;
}


/* =========================================================
   遊び方（details/summary の開閉ボックス）
   ========================================================= */
.howto {
  margin-top: 10px;
  background: #0b1228;
  border-radius: 12px;
  border: 1px dashed #334155;       /* 点線枠でセクション化 */
  color: #e2e8f0;
}

.howto summary {
  padding: 10px 14px;
  cursor: pointer;                   /* クリックで開閉 */
  font-weight: 700;
}

.howto .howto-body {
  padding: 0 14px 14px;
}


/* =========================================================
   右カラム（家/ランキングなどのカード群）
   ========================================================= */
.right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 家カード & ランキングカードの共通外観 */
.house,
.ranking {
  background: #0b1228;
  color: #e2e8f0;
  border-radius: 12px;
  border: 2px solid #0b5c72;
  padding: 12px;
}

/* 家カードの1行（アイコンと数値などを左右に配置） */
.house-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

/* ランキングリスト本体 */
.rank {
  list-style: decimal inside;        /* 先頭に数字 */
  margin: 8px 0 0;
  padding: 0;
  max-height: 360px;                 /* スクロール領域 */
  overflow: auto;
}

/* 各ランキング行（名前とスコアを左右に分布） */
.rank li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #334155; /* 行の区切り */
  padding: 4px 0;
}

/* 名前入力行（名前欄＋送信ボタンなど） */
.nameRow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

/* ランキングの操作ボタン群 */
.rankBtns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}


/* =========================================================
   モーダル（オーバーレイのダイアログ）
   ========================================================= */
.modal {
  position: fixed;                   /* 画面全域に固定 */
  inset: 0;
  background: rgba(0, 0, 0, .55);    /* 半透明の黒背景 */
  display: grid;
  place-items: center;               /* 中央配置 */
}

/* モーダル非表示状態 */
.modal.hidden {
  display: none;
}

/* モーダル本体のカード */
.modal-card {
  width: min(520px, 90vw);           /* 画面に収まる最大幅 */
  background: #0b1228;
  color: #e2e8f0;
  border-radius: 14px;
  border: 3px solid #0b5c72;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6); /* 立体的な影 */
}

/* モーダルの本文 */
.modal-body {
  margin: 10px 0 6px;
  line-height: 1.8;
}

/* モーダル本文の行（左右に情報を分ける） */
.modal-body .row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #334155;
  padding: 4px 0;
}

.btn:disabled { opacity:.55; cursor:not-allowed; outline: none; }