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

/* ---------- 基本レイアウト ---------- */
:root{
  --maxw: 1280px;
  --brand: #ff9ec5;
  --belt: #c8c8c8;
  --beltLine: #a8a8a8;
  --table: #f7e8c3;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background:#fff9fd;
  color:#333;
}
.topbar{
  max-width:var(--maxw);
  margin:0 auto;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.topbar h1{
  margin:0;
  font-size: clamp(18px, 3vw, 28px);
  letter-spacing:.03em;
}
.controls button{
  margin-right:8px;
}
#app.v-columns{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-rows: auto auto;
  gap:10px;
  padding:0 12px 16px;
}
@media (max-height: 800px){
  #app.v-columns{ grid-template-rows: 4fr 1fr; }
}
.gamewrap{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  position:relative;
}
.hud{
  display:flex;
  gap:16px;
  align-items:center;
  font-size: clamp(12px, 2vw, 16px);
  margin: 4px 0 8px 2px;
}
.hearts{color:#e85267; letter-spacing:3px; font-weight:700;}
canvas#game{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  background: linear-gradient(#e6f6ff, #ffffff);
}

.rankingwrap{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow:auto;
}
.rank-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.rank-list{
  margin:10px 0 0;
  padding-left:22px;
  max-height: 200px;
  overflow:auto;
  line-height:1.7;
  font-size: clamp(12px, 1.8vw, 15px);
}
.name-row, .share-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
button{
  background: var(--brand);
  color:#222;
  border:none;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
button:hover{filter:brightness(1.05)}
button.mini{padding:5px 8px; font-size:12px;}
input[type="text"]{
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:10px;
  min-width: 160px;
}

.modal{
  max-width: 560px;
  border: none;
  border-radius: 14px;
  padding: 16px 16px 12px;
  box-shadow: 0 22px 44px rgba(0,0,0,.25);
}
.modal::backdrop{background: rgba(0,0,0,.2)}
.modal h3{margin: 0 0 8px}
.modal .hint{margin-left: 12px; color:#666; font-size:12px;}

.note{
  text-align:center;
  color:#777;
  padding: 10px 0 20px;
  font-size:12px;
}

/* ルビ（2行）描画用 Canvas 上でのフォントに合わせる目安 */
.ruby{
  font-size: 10pt; /* 最小7ptを下回らないよう留意（Canvas 側でも調整） */
}


/* depth tweaks for v2 */
.gamewrap,.rankingwrap{box-shadow: 0 10px 26px rgba(0,0,0,.08);}