/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Typing Pyon-chan Jump
 * BUILD_ID: YR-2025-0927-K14                 // ← 公開用の可視ビルド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 Pyon-chan Jump - style.css
======================================================== */

/* =========================
   Variables
========================= */
:root{
  --brand:#38b48a;
  --brand-deep:#2a8e6c;

  --bg:#ffe0f4;
  --panel:#71c265;
  --panel-2:#e7f7e5;
  --ink:#2b2b2b;

  --frame:#f0a94a;
  --border:#111;

  /* HUD（上段ステータス）の高さ調整用 */
  --hud-pad: 6px;
  --hud-cell-minh: 48px;     /* 例：48px まで下げる */
  --hud-cell-pad-y: 4px;     /* 例：4px まで下げる */
  --hud-gap: 6px;            /* 例：6px まで下げる */
  --hud-cell-pad-x: 8px;

}

/* =========================
   Reset / Base
========================= */
*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  background: var(--cg-edge, var(--bg));
  color:var(--ink);
}

/* =========================
   Header
========================= */
.header{
  background:#f9a9b5;
  border-bottom:4px solid #e58ea0;
  position:sticky;
  top:0;
  z-index:5;
}

.header .inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:12px;
}

.title{
  font-size:22px;
  font-weight:800;
}

.controls{
  margin-left:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

button{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  background:#0e6f83;
  color:#fff;
  cursor:pointer;
}
button.secondary{ background:#555; }
button.warn{ background:#e05a5a; }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================
   Main layout (2/3 + 1/3)
========================= */
.wrapper{
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 33vw, 520px);
  gap:16px;

  flex:1;       /* body:flex 前提で残り高を使用 */
  min-height:0; /* 子要素の overflow を正しく効かせる */
}

/* =========================
   Left: Game panel
========================= */
.game-panel{
  background: transparent;   /* ← 緑の地を消す */
  border-radius:18px;
  border:4px solid var(--frame);
  padding:0;                 /* ← 余白を消してゲーム領域を最大化 */
  position:relative;         /* ← HUD等のabsolute基準 */
  overflow:hidden;           /* ← 角丸からはみ出さない */

  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}


/* ===== HUD (compact) ===== */
/* =========================
   HUD (compact)
========================= */
.game-panel{ position: relative; } /* comboHud の absolute 基準にもなる */

.hud{
  position:absolute;     /* ← 高さを取らず、ゲーム画面に重ねる */
  top:10px;
  left:10px;
  right:10px;
  z-index:30;

  display:grid;
  grid-template-columns: 1.1fr 1.35fr 1fr 1.15fr 0.9fr;
  gap: 8px;

  padding:0;
  margin:0;

  pointer-events:none;   /* ← キャンバス操作を邪魔しない */
}

/* HUDセルは「透明寄り」にして、文字は白＋影で可読化 */
.hud .cell{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px);

  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);

  border-radius: 16px;
  padding: 8px 10px;
  min-height: 46px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  overflow:hidden;
}
.hud .cell *{ text-shadow: inherit; }


.hud-title{
  font-weight: 800;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.05;
  opacity: .95;
}

.hud-em{
  font-weight: 900;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.05;
}

.hud-em2{
  font-weight: 900;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.05;
}

.hud-sub{
  font-weight: 900;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.05;
  opacity: .98;
}

/* ステージ：1行固定 */
.cell-stage{
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* 標高＋月まで：2行、行間を詰める */
.cell-alt .row{
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.05;
}
.cell-alt .row + .row{ margin-top: 2px; }

/* 経過＋累計：1行固定（自動縮小） */
.cell-time .timeRow{
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.05;
}
.cell-time .sep{ opacity:.9; }

/* 数字の途中改行防止（既にあるならそのままでOK） */
.km{
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  white-space: nowrap;
}


.hud .cell .label{
  font-weight:800;
  font-size: clamp(11px, 0.95vw, 13px); /* 以前より小さめ */
  line-height:1.05;
  opacity:.95;
}

.hud .cell .value{
  margin-top:3px;
  font-size: clamp(12px, 1.05vw, 16px); /* 以前より小さめ */
  font-weight:900;
  line-height:1.05;
}

.hud .cell .big{
  margin-top:4px;
  font-size: clamp(20px, 1.9vw, 34px); /* 以前より小さめ */
  font-weight:1000;
  letter-spacing:.4px;
  line-height:1.0;
}

/* 右端ハート */
.hud .hearts{
  font-size: clamp(16px, 1.6vw, 22px);
  line-height:1.0;
  letter-spacing:2px;
}

/* 長文セルは省略（ステージは改行OK） */
.hud .cell:not(.stageCell) .label,
.hud .cell:not(.stageCell) .value{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.hud .stageCell .label,
.hud .stageCell .value{
  white-space:normal;
}

/* --- Moon distance typography --- */
.hud .cell small{
  display:block;
  margin-top:4px;
  font-weight:800;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height:1.15;
  letter-spacing:.02em;
}
#hudMoonDist{
  font-weight:900;
  font-size: clamp(16px, 1.8vw, 26px);
  white-space:nowrap;
  letter-spacing:.02em;
}

.km{
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ===== Canvas layout (take remaining height) ===== */
.gamePane{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
/* ===== Canvas: 余白ゼロ運用 ===== */
.canvasWrap{
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--cg-edge, var(--bg));
}


/* canvas を「親いっぱい」に伸ばす（緑の余りを消す） */
#game{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;

  border:none;                 /* 外枠は game-panel 側に任せる */
  border-radius:0;
  touch-action:none;
}

/* 下部オーバーレイ（高さを取らない） */
.canvasOverlayBottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  padding: 0 10px;
}

/* 文字が背景に埋もれない最低限の可読性 */
.canvasOverlayBottom .keyguide,
.canvasOverlayBottom .bgm-credit{
  font-weight: 800;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}


/* =========================
   Right: Side panel
========================= */
.side{
  background:#f6f6f6;
  border:6px solid #eca645;
  border-radius:16px;
  padding:12px;

  display:flex;
  flex-direction:column;
  gap:10px;

  min-width:0;
  overflow:hidden;
}

.log{
  background:var(--panel-2);
  min-height:64px;
  border-radius:10px;
  padding:8px;
}

.rank{
  background:var(--panel-2);
  border-radius:10px;
  padding:8px;

  display:flex;
  flex-direction:column;
  gap:8px;
}

.rank .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.input-row{ display:flex; gap:8px; }

.rank .tableWrap{
  overflow-x:auto; /* 横が厳しい端末向け */
}

/* ===== Ranking table (single source of truth) ===== */
.rank table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size: clamp(10px, 0.95vw, 12px);
  line-height:1.15;
}
.rank th, .rank td{
  border-bottom:1px solid #ccc;
  padding:3px 3px;
  text-align:left;
  white-space:nowrap;
}
.rank td:nth-child(1),
.rank td:nth-child(3),
.rank td:nth-child(4),
.rank td:nth-child(5),
.rank td:nth-child(6),
.rank td:nth-child(7){
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum";
  font-size:0.92em;
}
.rank td:nth-child(2){
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 列幅の目安（ヘッダ側） */
.rank th:nth-child(1){ width: 5ch; }
.rank th:nth-child(2){ width: 22%; }
.rank th:nth-child(3){ width: 16%; }
.rank th:nth-child(4){ width: 16%; }
.rank th:nth-child(5){ width: 6ch; }
.rank th:nth-child(6){ width: 12%; }
.rank th:nth-child(7){ width: 22%; }

/* =========================
   How-to (accordion)
========================= */
.howto{
  background:#fff;
  border:2px dashed #999;
  border-radius:10px;
  padding:10px 12px;
}
.howto summary{
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.howto[open] summary{ margin-bottom:6px; }
.howto ul{ margin:0; padding-left:1.2em; }
.howto li{ margin:4px 0; line-height:1.6; }

.badge-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.badge{
  border:2px dashed #999;
  padding:6px 10px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  font-size:clamp(12px, 1.4vw, 16px);
  line-height:1.2;
}

.footer-note{
  text-align:center;
  font-size:12px;
  color:#666;
}

/* =========================
   Modal
========================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.modal .window{
  width:min(640px, 92vw);
  background:#fff;
  border-radius:14px;
  padding:18px;
  line-height:1.7;
}
.modal .window h3{ margin-top:0; }
.modal .window .close{ float:right; }

/* =========================
   Hearts
========================= */
.heart{ color:#e84057; font-size:18px; }

/* --- Hearts: 5×2 のグリッド配置（採用版） --- */
#hudHearts{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px 1px;
  justify-items:center;
  align-content:center;
  line-height:1;
  width:auto;
  white-space:normal;
}
#hudHearts .h{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
#hudHearts .h.lost{ opacity:.25; }

/* 2段表示：#hudHearts を5文字幅にして折り返す */
/*
#hudHearts{
  display:inline-block;
  width:5ch;
  white-space:normal;
  word-break:break-all;
  overflow-wrap:anywhere;
  line-height:1.1;
  text-align:center;
}
*/

/* =========================
   Fullscreen
========================= */
body.fullscreen{ overflow:hidden; }

body.fullscreen .header{ display:none; }

body.fullscreen .wrapper{
  position:fixed;
  inset:0;
  max-width:none;
  margin:0;
  height:100vh;
  padding:10px;
}

body.fullscreen .game-panel,
body.fullscreen .side{
  height:100%;
  overflow:auto;
}

body.fullscreen #game{
  min-height:320px;
}

/* =========================
   Combo HUD (右上固定)
========================= */
#comboHud{
  position:absolute;
  top:70px;
  right:12px;
  left:auto;
  transform:none;
  text-align:right;
  pointer-events:none;
  z-index:4;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25))
          drop-shadow(0 6px 14px rgba(0,0,0,.18));
  display:none;
}

#comboHud .num{
  font-weight:900;
  font-size:clamp(40px, 8vw, 110px);
  line-height:0.9;
  letter-spacing:1px;
  background:linear-gradient(180deg,#e7e6ff 0%,#bff7f1 50%,#fff1ce 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:3px rgba(0,0,0,.28);
}

#comboHud .label{
  font-weight:900;
  font-size:clamp(18px, 3.5vw, 46px);
  letter-spacing:3px;
  margin-top:-6px;
  background:linear-gradient(180deg,#ffffff 0%,#fff5d6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:2px rgba(0,0,0,.28);
}

#comboHud.bump{ animation:comboBumpTR .35s ease; }
@keyframes comboBumpTR{
  0%   { transform:scale(1); }
  25%  { transform:scale(1.12); }
  100% { transform:scale(1); }
}

/* =========================
   Jump toasts (右上)
========================= */
#jumpToastHost{
  position:fixed;
  top:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:9999;
  pointer-events:none;
}

.jump-toast{
  min-width:260px;
  max-width:420px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transform:translateY(-8px);
  opacity:0;
  transition: transform .24s ease, opacity .24s ease;
}
.jump-toast.show{ transform:translateY(0); opacity:1; }
.jump-toast.hide{ transform:translateY(-8px); opacity:0; }

.jump-toast.jt-mega{
  background:linear-gradient(135deg,#fff 0%,#ffe8bb 40%,#ffd14d 100%);
  color:#5a3b00;
  border:2px solid rgba(140,100,0,.25);
}
.jump-toast.jt-super{
  background:linear-gradient(135deg,#e6f7ff,#c7ebff);
  color:#084c61;
  border:2px solid rgba(8,76,97,.2);
}
.jump-toast.jt-hyper{
  background:linear-gradient(135deg,#f0e6ff,#dcc7ff);
  color:#3f007d;
  border:2px solid rgba(63,0,125,.2);
}
.jump-toast.jt-ultra{
  background:linear-gradient(135deg,#ffe6ec,#ffc7d5);
  color:#7d0026;
  border:2px solid rgba(125,0,38,.2);
}

#comboSubMsg.combo-submsg{
  margin-top:6px;
  font-weight:800;
  font-size:14px;
  padding:4px 10px;
  border-radius:12px;
  color:#ff3d8e;
  background:linear-gradient(90deg,#fff5fa,#ffe3f1);
  border:1px solid #ffc1da;
  text-shadow:0 0 4px rgba(255,64,160,.2);
  opacity:0;
  transition: opacity .35s ease;
}
#comboSubMsg[data-kind="super"]{ color:#ff6aa4; }
#comboSubMsg[data-kind="hyper"]{ color:#ff4f94; }
#comboSubMsg[data-kind="ultra"]{ color:#ff2e88; }

/* =========================
   Themes
========================= */
body.theme-dark{
  --bg:#0e0f12;
  --panel:#2b3140;
  --panel-2:#171a1f;
  --ink:#e8eef7;
}
body.theme-dark .header{ background:#171a1f; border-bottom:4px solid #0f131a; }
body.theme-dark .game-panel,
body.theme-dark .side{
  background:#11151d;
  border-color:#2c3340;
}
body.theme-dark #game{ background:#0b1220; border-color:#24344a; }

/* ▼ あそびかた(How-to) をダークテーマ用に可読化 */
body.theme-dark .howto{
  background:var(--panel-2);
  border-color:#3c475a;
  color:var(--ink);
}
body.theme-dark .howto summary{ color:var(--ink); }
body.theme-dark .howto strong{ color:#fff; }

body.theme-gold{
  --bg:#fff6d8;
  --panel:#f3c74a;
  --panel-2:#fff1c2;
  --ink:#3b2d00;
}
body.theme-gold .header{ background:#f7c948; border-bottom:4px solid #d4a72a; }
body.theme-gold .game-panel,
body.theme-gold .side{
  background:#fff8e0;
  border-color:#e6b84a;
}
body.theme-gold #game{ background:#fff3c4; border-color:#d9aa34; }

/* === Dark theme: modal readability fix === */
body.theme-dark .modal{ background:rgba(0,0,0,.7); }
body.theme-dark .modal .window{
  background:var(--panel-2);
  color:var(--ink);
  border:2px solid #3c475a;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
body.theme-dark .modal .window h1,
body.theme-dark .modal .window h2,
body.theme-dark .modal .window h3,
body.theme-dark .modal .window p,
body.theme-dark .modal .window div,
body.theme-dark .modal .window strong,
body.theme-dark .modal .window b,
body.theme-dark .modal .window th,
body.theme-dark .modal .window td{
  color:var(--ink);
}
body.theme-dark .modal .window .close{
  color:var(--ink);
  opacity:.9;
}

/* =========================
   BGM credit
========================= */
.canvasFooter{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  z-index:20;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;

  pointer-events:none;
}
.key-guide{
  font-size: clamp(12px, 1.2vw, 15px);
}
.key-guide,
.bgm-credit{
  margin:0;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.60);
  font-weight:800;
  text-align:center;
  font-size: clamp(11px, 1.0vw, 14px);
  opacity:.9;
}

/* =========================
   Time cell (stacked)
========================= */
.cell-time{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cell-time .label{
  font-weight:800;
  font-size:clamp(12px, 1.2vw, 14px);
  line-height:1.15;
  margin-bottom:3px;
  text-align:center;
}
.cell-time .value{
  font-weight:900;
  font-size:clamp(12px, 1.2vw, 16px);
  line-height:1.12;
  text-align:center;
}
.cell-time .sublabel{
  margin-top:5px;
  font-weight:800;
  font-size:clamp(11px, 1.0vw, 13px);
  opacity:.95;
  text-align:center;
}
.cell-time .subvalue{
  font-weight:900;
  font-size:clamp(11px, 1.0vw, 15px);
  line-height:1.12;
  text-align:center;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1180px) and (min-width: 981px){
  .wrapper{
    grid-template-columns: minmax(0, 1fr) clamp(340px, 35vw, 520px);
  }
}

@media (max-width: 980px){
  .wrapper{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    min-height: calc(100vh - 80px);
  }
  #game{ min-height:420px; }
}

/* =========================
   END of style.css
========================= */