/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Times-Tower
 * BUILD_ID: YR-2025-1007-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가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */


/* =========================================================
 * Times-Tower - UI Styles
 * 目的：
 *  - 見やすいインデント/段落
 *  - 意味が分かるコメントを付与
 *  - 右カラムのランキングは「キーボード行」から開始
 * =======================================================*/
/* --- Reset & Layout --- */
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(200px 120px at 20% -40%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    radial-gradient(240px 140px at 120% 10%, rgba(255,255,255,.15), rgba(255,255,255,0) 60%),
    #b88e62;
  background-image: 
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 48px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, rgba(0,0,0,0) 1px 48px),
    linear-gradient(#c39a73, #a97e52);
  font-family: 'Segoe UI', system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #222;
  display: grid;
  place-items: center;
}
.frame {
  width: min(414px, 100vw);
  height: min(868px, 100vh);
  box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.25) inset;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(#e5ccad, #e0bf9d);
}
footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 88px;
  padding: 8px 14px 8px 32px;
  background: linear-gradient(#f5e2c9, #edd3af);
  box-shadow: 0 -2px 0 #caa77d inset;
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}
header {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
  padding: 8px 14px 8px 32px;
  background: linear-gradient(#f5e2c9, #edd3af);
  box-shadow: 0 2px 0 #caa77d inset;
  border-top-left-radius: 18px; border-top-right-radius: 18px;
}
header .panel { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; width: 100%; padding-right: 16px; }
footer {
  bottom: 0;
  height: 96px;
  background: linear-gradient(#f5e2c9, #edd3af);
  box-shadow: 0 -2px 0 #caa77d inset;
  padding-left: 32px;
}
.panel { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
.badge {
  padding: 6px 10px; border-radius: 12px;
  background:#f6efe5; box-shadow: 0 2px 0 #c8b49b inset, 0 2px 4px rgba(0,0,0,.2);
  font-weight:700; display:flex; flex-direction:column; justify-content:center;
  white-space: nowrap; min-width: 72px; min-height: 46px; line-height:1.1;
}
.btn { cursor:pointer; padding:6px 10px; border-radius:10px; background:#fff6ea; box-shadow: 0 2px 0 #caa77d inset, 0 4px 10px rgba(0,0,0,.15); }
.btn:active { transform: translateY(1px); }
.badge b { display:block; font-size:19px; margin-top:2px; }
#game {
  position:absolute; top:72px; left:0; right:0; bottom:88px;
  width:100%; height: calc(100% - 160px); display:block;
}
.slotwrap { display:flex; gap:8px; }
.hint { font-size: 12px; opacity:.8; }
.panel#lifePanel { display:flex; align-items:center; gap:6px; }
.life { width:18px; height:18px; margin-left:2px; border-radius:50%; background:#b63a2b; box-shadow: 0 1px 0 #8d2b20 inset, 0 1px 2px rgba(0,0,0,.25); }

/* --- Modal --- */
.modal { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.45); z-index: 5; }
.modal.is-open { display:flex; }
.modal-inner { width: 86%; max-width: 360px; padding: 20px; border-radius: 16px;
  background: linear-gradient(#fff7ea, #f4e6d2); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align:center; }
.modal-inner .title { margin: 6px 0 16px; font-size: 26px; }
.menu { display:flex; flex-direction:column; gap:12px; }
.menu-btn { font-size: 18px; padding:12px; border-radius: 12px; border:none; cursor:pointer;
  background:#fff6ea; box-shadow: 0 2px 0 #caa77d inset, 0 4px 10px rgba(0,0,0,.15); }
.menu-btn:active { transform: translateY(1px); }
.note { font-size:12px; opacity:.75; margin-top:10px; }

/* Left progress bar overlay */
#sidebar { position:absolute; left:0; top:0; bottom:0; width:24px; height:100%; z-index:3; pointer-events:none; }

/* ゲームキャンバス上の指操作はブラウザスクロールに使わない */
#game, canvas#game { touch-action: none; }

/* ページのオーバースクロールを抑止（PWA的挙動／PTR無効化） */
html, body {
  overscroll-behavior: none;        /* Chrome/Edge 等 */
  overscroll-behavior-y: none;
}

/* ゲーム領域ではジェスチャーをアプリ側で処理 */
#game, canvas#game, #sidebar {
  touch-action: none;                /* スクロール/ズーム等の既定動作を抑止 */
  -webkit-user-select: none;         /* iOS/Safari: 長押し選択禁止 */
  user-select: none;                 /* 文字選択禁止 */
  -webkit-touch-callout: none;       /* 長押しメニュー禁止 */
}

/* iOSでのタップ時ハイライト除去（見栄え） */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }