:root {
--correct-color: #6aaa64;
--present-color: #c9b458;
--diacritic-color: #9c27b0;
--absent-color: #787c7e;
--bg-color: #ffffff;
--text-color: #1a1a1b;
}
body {
font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-color); color: var(--text-color);
display: flex; flex-direction: column; align-items: center;
margin: 0; padding: 10px; height: 100vh; box-sizing: border-box;
}
header {
width: 100%; max-width: 500px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #d3d6da; padding-bottom: 10px; margin-bottom: 10px;
}
h1 { margin: 0 0 10px 0; font-size: 24px; }
.mode-selector { display: flex; gap: 10px; }
.btn {
background-color: #e3e3e1; border: none; padding: 8px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; color: var(--text-color); font-size: 14px;
}
.mode-btn.active { background-color: var(--correct-color); color: white; }
.ad-space {
width: 100%; max-width: 320px; height: 50px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #999; margin: 10px 0; border: 1px dashed #ccc;
}
main {
display: flex; flex-direction: column; align-items: center; flex-grow: 1; width: 100%; max-width: 500px;
}
#game-board {
display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; margin-bottom: 20px;
}
.board-row {
display: grid; grid-template-columns: repeat(var(--row-length, 4), 1fr); gap: 5px;
}
.tile {
width: 12vw; height: 12vw; max-width: 60px; max-height: 60px;
border: 2px solid #d3d6da; display: flex; justify-content: center; align-items: center;
font-size: 24px; font-weight: bold; text-transform: uppercase; box-sizing: border-box;
}
.tile.correct { background-color: var(--correct-color); color: white; border-color: var(--correct-color); }
.tile.present { background-color: var(--present-color); color: white; border-color: var(--present-color); }
.tile.diacritic { background-color: var(--diacritic-color); color: white; border-color: var(--diacritic-color); }
.tile.absent { background-color: var(--absent-color); color: white; border-color: var(--absent-color); }
#keyboard {
width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.keyboard-title {
width: 100%; text-align: left; font-size: 12px; color: #666; margin-top: 5px; border-bottom: 1px solid #eee; padding-bottom: 2px;
}
.keyboard-section {
display: flex; gap: 4px; justify-content: center; width: 100%; margin-bottom: 5px;
}
.key-col {
display: flex; flex-direction: column; gap: 4px;
}
.key {
background-color: #d3d6da; border: none; border-radius: 4px;
font-weight: bold; font-size: 14px; cursor: pointer;
display: flex; justify-content: center; align-items: center;
width: 8vw; max-width: 35px; height: 35px; padding: 0; margin: 0;
}
.key.dummy { visibility: hidden; pointer-events: none; }
.key.correct { background-color: var(--correct-color) !important; color: white !important; }
.key.present { background-color: var(--present-color) !important; color: white !important; }
.key.diacritic { background-color: var(--diacritic-color) !important; color: white !important; }
.key.absent { background-color: var(--absent-color) !important; color: white !important; }
#message-box {
position: absolute; top: 20%; background-color: rgba(0,0,0,0.8); color: white; padding: 10px 20px; border-radius: 4px; font-weight: bold; z-index: 100;
}
#info-board { margin-bottom: 10px; font-weight: bold; color: #333; }
#correct-popup {
position: absolute; top: 30%; background-color: var(--correct-color); color: white; padding: 20px 40px; border-radius: 8px; font-size: 24px; font-weight: bold; z-index: 150; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.hidden { display: none !important; }
.modal-content {
  position: relative;
  background-color: var(--bg-color);
  
  /* 【工夫】元の色を活かしつつ、135度の角度でほんのり光と影のグラデーションを重ねて深みを出します */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.06) 100%);
  
  color: var(--text-color);
  border: 3px solid var(--correct-color);
  
  /* 【工夫】外側への強い影に加え、inset（内側）にうっすら光の縁取りを入れて高級感を出します */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.15);
  
  /* 駅の案内板や記念切符のイメージに合わせて、角の丸みを「12px」に少し優しくします */
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  width: 95%;
  max-width: 350px;
}
.wiki-link {
display: inline-block; padding: 5px 15px; background-color: #eee; border-radius: 20px; text-decoration: none; color: #333; font-size: 12px;
}
.wiki-link:hover { background-color: #ddd; }

/*テーマカラー*/
body.theme-dark{--bg-color:#121212;--text-color:#ffffff;}
body.theme-sakura{--bg-color:#fff0f5;--text-color:#5d4037;}
body.theme-ocean{--bg-color:#e0f7fa;--text-color:#004d40;}
body.theme-blue{--bg-color:#e3f2fd;--text-color:#0d47a1;}
body.theme-dark .tile{border-color:#555;}
body.theme-dark .key{background-color:#444;color:#fff;}
body.theme-sakura .key{background-color:#ffcdd2;color:#5d4037;}
body.theme-ocean .key{background-color:#b2ebf2;color:#004d40;}
body.theme-dark header{border-bottom-color:#333;}
body.theme-dark .modal-content{background-color:#222;color:#fff;}
body.theme-green{--bg-color:#e8f5e9;--text-color:#1b5e20;}
body.theme-orange{--bg-color:#fff3e0;--text-color:#e65100;}
body.theme-red{--bg-color:#ffebee;--text-color:#b71c1c;}
body.theme-purple{--bg-color:#f3e5f5;--text-color:#4a148c;}
body.theme-green .key{background-color:#c8e6c9;color:#1b5e20;}
body.theme-orange .key{background-color:#ffe0b2;color:#e65100;}
body.theme-red .key{background-color:#ffcdd2;color:#b71c1c;}
body.theme-blue .key{background-color:#bbdefb;color:#0d47a1;}
body.theme-purple .key{background-color:#e1bee7;color:#4a148c;}

/*行事日エフェクト*/
#event-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;}
.particle{position:absolute;top:-20px;animation:fall linear 1 forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);}}

/* 直接背景色を変えるのではなく、テーマ変数を上書きすることでダイアログとも色を連動させます */
/* エイプリルフールのタイトル反転演出 */
body.event-aprilfool h1{transform:rotate(180deg);transition:transform 0.5s;}
/* ハロウィンのテーマカラー */
body.event-halloween{
  --bg-color:#2c1b18;
  --text-color:#ff9800;
}
body.event-halloween .tile{
  border-color:#ff9800;
}
body.event-halloween .key { 
  background-color: #3d2721; 
  color: #ff9800; 
}
/* バレンタインのテーマカラー */
body.event-valentine{
  --bg-color:#3e2723;
  --text-color:#ffcdd2;
}
body.event-valentine .tile{
  border-color:#ffcdd2;
}
body.event-valentine .key { 
  background-color: #5d4037; 
  color: #ffcdd2; 
}
/* クリスマスのテーマカラー */
body.event-christmas{
  --bg-color:#0f3024;
  --text-color:#e8f5e9;
}
body.event-christmas .tile{
  border-color:#d32f2f;
}
body.event-christmas .key { 
  background-color: #1b4d3e; 
  color: #e8f5e9; 
}
/* ひなまつりのテーマカラー */
body.event-hinamatsuri{
  --bg-color:#fff0f5;
  --text-color:#c2185b;
}
body.event-hinamatsuri .tile{
  border-color:#f48fb1;
}
body.event-hinamatsuri .key { 
  background-color: #f8bbd0; 
  color: #c2185b; 
}
/* 子どもの日のテーマカラー */
body.event-kodomo{
  --bg-color:#f1f8e9;
  --text-color:#33691e;
}
body.event-kodomo .tile{
  border-color:#aed581;
}
body.event-kodomo .key { 
  background-color: #dcedc8; 
  color: #33691e; 
}
/* 七夕のテーマカラー */
body.event-tanabata{
  --bg-color:#0d1b2a;
  --text-color:#fff9c4;
}
body.event-tanabata .tile{
  border-color:#415a77;
}
body.event-tanabata .key{
  background-color:#1b263b;
  color:#e0e1dd;
}

/* 元旦・お正月用のテーマカラー */
body.event-newyear {
  --bg-color: #fffaf0; /* ほんのり温かみのある白 */
  --text-color: #b71c1c; /* おめでたい深い赤 */
}
body.event-newyear .tile {
  border-color: #e53935;
}
body.event-newyear .key {
  background-color: #ffcdd2;
  color: #b71c1c;
}

/* 大晦日用の特別なプレミアムテーマカラー */
body.event-nye {
  --bg-color: #161219;
  --text-color: #d1c7bd;
}
body.event-nye .tile {
  border-color: #36303d;
}
body.event-nye .key {
  background-color: #25202b;
  color: #d1c7bd;
}

/* ==========================================
結果ウィンドウのスクロールバーはみ出し対策
========================================== */
/* スクロールバー全体の横幅を少し細くしてスタイリッシュにします */
.modal-content::-webkit-scrollbar {
  width: 6px;
}

/* スクロールバーが走るレーン（トラック）の設定 */
.modal-content::-webkit-scrollbar-track {
  background: transparent;
  /* 【ここがポイント】上下に12pxの余白を作ることで、丸角のカーブ部分にバーが進入するのを防ぎます */
  margin: 12px 0;
}

/* スクロールバーの動くつまみ（ハンドル）の設定 */
.modal-content::-webkit-scrollbar-thumb {
  /* 現在のボタン色（緑など）をうっすら透かせた色にして画面に馴染ませます */
  background-color: var(--correct-color);
  opacity: 0.5;
  /* つまみ自体の角も丸めることで、枠線との干渉を完全に無くします */
  border-radius: 10px;
}


/* ==========================================
結果ウィンドウのスクロールバーはみ出し対策
========================================== */
/* 画面全体を覆うクリーンな背景 */
#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: #f4f7f6; /* 少しグレーがかった目に優しい白 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s;
}

/* 非表示にする時のクラス */
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  width: 80%;
  max-width: 400px;
  text-align: center;
}

.loading-title {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

/* 線路（背景のバー） */
.track-container {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* 伸びる進捗バー */
#progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%; /* JSでパーセンテージを操作します */
  background-color: #3498db;
  border-radius: 4px;
  transition: width 0.4s ease-out; /* なめらかに伸びるアニメーション */
}

/* 走る電車のアイコン */
/* 走る電車のアイコン（アニメーション追加版） */
#train-icon {
  position: absolute;
  top: -28px;
  left: 0%;
  font-size: 24px;
  transition: left 0.4s ease-out; /* 前に進むなめらかな動き */
  animation: gatagoto 0.4s infinite; /* 常にガタゴト揺れるアニメーションを実行 */
}

/* ガタゴト動くアニメーションの設計図（上下の揺れとわずかな傾き） */
@keyframes gatagoto {
  0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  25% { transform: translateX(-50%) translateY(-1px) rotate(1deg); }
  50% { transform: translateX(-50%) translateY(0.5px) rotate(-0.5deg); }
  75% { transform: translateX(-50%) translateY(-0.5px) rotate(-1deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}

/* 状況を知らせるテキスト */
#loading-text {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
  font-weight: bold;
}