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

/* -----------------------------------------------------
   Typing Animals – styles (responsive + sidebar)
----------------------------------------------------- */
:root{
  /* layout */
  --frame-max-w: 1200px;
  --sidebar-w: clamp(230px, 24vw, 320px);
  --lane-min: clamp(30px, 7.2vw, 64px);
  --lane-gap: clamp(6px, 1.2vw, 14px);
  /* drop size */
  --drop-size: clamp(64px, 8.5vw, 104px);
  --drop-font: clamp(32px, 5.2vw, 56px);
  /* controls spacing */
  --btn-pad-y: clamp(10px, 1.4vw, 14px);
  --btn-pad-x: clamp(16px, 2.2vw, 22px);
  --hud-gap: clamp(10px, 1.6vw, 20px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#333;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN","Yu Gothic", sans-serif;
  background:#000;
  overflow:hidden;
}

/* Background with gentle warp */
#bg{
  position:fixed; inset:-6vmax;
  background-image:url('bgimage.jpg');
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05) brightness(0.95);
  animation:bg-warp 18s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes bg-warp{
  0%{ transform:scale(1.05) translate3d(0,0,0); filter:hue-rotate(0deg) blur(0px); }
  50%{ transform:scale(1.11) translate3d(1%, -1%, 0) skewX(0.5deg); filter:hue-rotate(6deg) blur(.5px); }
  100%{ transform:scale(1.16) translate3d(-1.2%, 1%, 0) skewY(-0.5deg); filter:hue-rotate(-6deg) blur(1px); }
}

/* 2-column layout */
.frame{
  max-width:var(--frame-max-w);
  margin:0 auto;
  height:100dvh;
  display:grid;
  grid-template-columns: minmax(320px, 1fr) var(--sidebar-w);
  gap: clamp(10px, 2vw, 18px);
  padding: clamp(8px, 1.2vw, 14px);
}
.board{ position:relative; display:flex; flex-direction:column; min-width:0 }
.sidebar{ min-width:0 }

/* HUD */
.hud{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: var(--hud-gap);
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.45);
  margin-bottom: clamp(6px, 1vw, 12px);
}
.hud__left,.hud__center,.hud__right{ display:flex; align-items:center; gap: var(--hud-gap); flex-wrap:wrap }
.hud__left .hud__item, .hud__right .hud__item{ font-weight:700 }

.btn{
  appearance:none; border:none; background:#fff; color:#333;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  font-weight:800; cursor:pointer;
  font-size: clamp(12px, 1.6vw, 16px);
}
.btn.small{ font-size:12px; padding:6px 10px }
.btn:active{ transform:translateY(1px) }

.banner{
  align-self:center;
  margin: 4px 0 10px;
  padding: 8px 14px;
  background:rgba(255,255,255,.95);
  color:#333; font-weight:900; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  letter-spacing:.02em;
  font-size: clamp(12px, 2.0vw, 18px);
}

/* Stage area */
.stageWrap{ position:relative; flex:1; overflow:hidden; padding:0 6px 8px; border-radius:12px }
.lanes{
  position:absolute; inset:42px 8px 120px 8px; display:grid;
  grid-template-columns: repeat(9, minmax(var(--lane-min), 1fr));
  gap: var(--lane-gap);
}
.lane{
  position:relative; background:rgba(255,255,255,.95); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  overflow:visible;
  z-index:1;
}
.lane.disabled{ filter:grayscale(1) opacity(.45) }
.lane-label{
  position:absolute; top:-26px; left:0; right:0; text-align:center; font-size:12px; color:#fff; opacity:.9;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

/* Drop */
.drop{
  position:absolute; left:50%; transform:translateX(-50%);
  min-width: var(--drop-size); height: var(--drop-size);
  border-radius:18px;
  background:linear-gradient(#fff, #f7f7f7);
  border:2px solid rgba(0,0,0,.1);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size: var(--drop-font); color:#333;
  z-index:2;
}
.drop.good{ background:linear-gradient(#fff0fa,#ffe2f6); border-color:#ffc9ea }

/* Hands + mascots */
.hands{ position:absolute; left:8px; right:8px; bottom:56px; height:96px; display:grid; grid-template-columns:repeat(9,1fr); gap: var(--lane-gap); pointer-events:none; z-index:3; }
.pad{ position:relative; height:100% }
.finger{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.85);
  box-shadow:0 8px 16px rgba(0,0,0,.2); border:2px solid rgba(0,0,0,.1) }
.finger.thumb{ width:88px; height:50px; border-radius:25px }

.ground{ position:absolute; left:8px; right:8px; bottom:40px; height:6px; background:#222; border-radius:3px; box-shadow:0 4px 10px rgba(0,0,0,.4); z-index:1 }

/* Mascot sprite (animal.jpg 3x4) */
.sprite{ width:72px; height:72px; background-image:url('animal.jpg'); background-size:300% 400%; background-position:var(--bx,0%) var(--by,0%); border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.08) }
.mascot{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); pointer-events:none; z-index:4; } /* in front of drops */
.lifeWrap .sprite{ width:26px; height:26px; margin-left:2px; vertical-align:middle; display:inline-block }

/* Heart missile */
.heart{
  position:absolute; width:34px; height:34px; pointer-events:none;
  left:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 30% 30%, #fff 10%, #ff6aa8 12% 60%, #ff2d84 61%);
  clip-path: path('M17 30 C 2 16,6 8,12 8 C 15 8,17 11,17 11 C 17 11,19 8,22 8 C 28 8,32 16,17 30 Z');
  filter:drop-shadow(0 8px 14px rgba(255,45,132,.45));
  opacity:.98;
  z-index:5;
}

/* Sidebar ranking */
.rankBox{
  background:rgba(255,255,255,.92);
  border-radius:16px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.25);
  color:#333; height:100%; display:flex; flex-direction:column; gap:8px; min-height:0;
}
.rankHeader{ display:flex; align-items:center; justify-content:space-between; font-weight:900 }
.best{ color:#666 }
.rankCtrl{ display:flex; gap:8px; align-items:center }
.rankCtrl input{ flex:1; padding:8px 10px; border-radius:999px; border:1px solid #ddd; outline:none }
#rankList{ list-style:decimal; margin:0; padding:0 0 0 18px; overflow:auto; flex:1; }
#rankList li{ padding:2px 0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/* Modal */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:10 }
.overlay.hidden{ display:none }
.modal{ width:min(520px, 92vw); background:#fff; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.35); padding:20px }
.modal__title{ font-size:22px; font-weight:800; margin-bottom:10px }
.modal__body{ font-size:15px; color:#444 }
.modal__actions{ text-align:right; margin-top:14px }

/* Small screens: collapse into single column, sidebar below */
@media (max-width: 900px){
  .frame{ grid-template-columns: 1fr; height: 100dvh }
  .sidebar{ order: 2 }
  .board{ order: 1 }
  .rankBox{ height:auto; max-height:40vh }
}
/* Heart color variants */
.heart.ok{
  background:radial-gradient(circle at 30% 30%, #fff 10%, #ff6aa8 12% 60%, #ff2d84 61%);
  filter:drop-shadow(0 8px 14px rgba(255,45,132,.45));
}
.heart.miss{
  background:radial-gradient(circle at 30% 30%, #ddd 8%, #444 18% 60%, #111 61%);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
}