@charset "UTF-8";

/* =========================================
   変数の定義
   ========================================= */
:root {
  --primary-color: #2b4f80;
  --accent-color: #3ea0b5;
  --bg-color: #f5fafe;
  --text-main: #333333;
  --text-sub: #555555;
  --font-base: "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
}

* { box-sizing: border-box; 
    margin: 0; 
    padding: 0;
}

body, html {
    /* ★追加: 画面サイズを確実に確保 */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロール防止 */
}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--bg-color);
  color: var(--text-main);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 80px; /* フッター/タイマーバー用余白 */
}

input, textarea, select, button { font-family: inherit; font-size: 16px; }

h2 { margin: 15px 0 10px; color: #2b4f80; text-align: center; font-size: 20px; }
h3 { margin: 10px 0; color: #2b4f80; font-size: 16px; }
p { margin: 6px 0; line-height: 1.5; }

/* ============================================
   🌌 ヘッダー & 星空背景
============================================ */
#appHeader {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a237e, #4a148c);
  color: white; padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 100; min-height: 60px;
}

#starContainer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.star { 
  position: absolute; color: #FFD700; font-size: 12px; 
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
  animation: twinkle 3s infinite ease-in-out; 
}
@keyframes twinkle { 
  0%, 100% { opacity: 0.8; transform: scale(1); } 
  50% { opacity: 0.4; transform: scale(0.8); } 
}

#currentGradeBadge { 
  position: relative; z-index: 1; 
  background: rgba(255,255,255,0.2); 
  padding: 6px 14px; border-radius: 99px; 
  font-size: 14px; font-weight: bold; white-space: nowrap;
}

#headerSettings { position: relative; z-index: 10; }
#settingsBtn {
    background: transparent; border: none; font-size: 24px; color: white;
    cursor: pointer; padding: 4px; line-height: 1;
}

/* ヘッダー内タブ */
#headerTabs {
  display: flex; 
  gap: 8px; 
  width: 100%; 
  order: 3; 
  margin-top: 10px;
  /* スマホではスクロールさせず、折り返して全部見せる */
  flex-wrap: wrap; 
  justify-content: center;
}

#headerTabs .tab {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #e0e0ff; 
  padding: 8px 10px; /* 横幅を少し節約 */
  border-radius: 8px;
  font-size: 12px; /* 文字サイズ調整 */
  font-weight: 600; 
  cursor: pointer;
  backdrop-filter: blur(4px);
  /* スマホで押しやすいように広げる */
  flex: 1 1 30%; 
  text-align: center;
  min-width: 80px; 
}

#headerTabs .tab.active { 
  background: rgba(255, 255, 255, 0.95); 
  border-color: #fff; color: #1a237e; 
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* PC画面（768px以上）の設定 */
@media (min-width: 768px) {
    #appHeader { flex-wrap: nowrap; gap: 20px; }
    #headerTabs { 
        width: auto; 
        order: 0; 
        margin-top: 0; 
        flex: 1; 
        justify-content: center; 
        flex-wrap: nowrap; /* PCなら1行 */
    }
    #headerTabs .tab {
        flex: 0 0 auto; /* PCなら自動幅 */
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* ============================================
   📄 コンテンツエリア共通
============================================ */
.tab-content { display: none; padding: 20px 16px; background: white; min-height: 60vh; } 
.tab-content.active { display: block; }

.section-lead { text-align: center; font-size: 14px; color: #555; margin-bottom: 24px; }
.section-note { text-align: center; font-size: 12px; color: #888; margin-top: 20px; }

/* ============================================
   🎨 マイ教科 & 学びの準備
============================================ */
.custom-subject-wrapper { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.custom-card {
  background: #f7faff; border: 1px solid #d0d7ff; border-radius: 14px;
  padding: 16px; width: 100%; max-width: 320px; 
  box-shadow: 0 2px 5px rgba(180,200,230,0.25);
}
.custom-card label { display: flex; flex-direction: column; font-size: 14px; color: #2b4f80; margin-bottom: 12px; }

.subject-input { 
    width: 100%; padding: 10px; border: 2px solid #cfe0ff; border-radius: 8px; 
    font-size: 16px; box-sizing: border-box; 
}
.custom-select {
    padding: 10px; font-size: 16px;
    border: 2px solid #cfe0ff; border-radius: 8px;
    background: #fff; color: #2b4f80; cursor: pointer;
}
.select-sm { width: 100%; }
.select-lg { width: 100%; max-width: 400px; }

.subject-tabs { display: flex; justify-content: center; gap: 8px; margin: 10px 0 20px; flex-wrap: wrap; }
.subject-tab { 
    background: #f6f9ff; border: 1px solid #dbe7ff; color: #4a6fa5; 
    padding: 10px 0; border-radius: 8px; cursor: pointer; 
    width: 60px; text-align: center; font-weight: 600; font-size: 13px;
    flex-grow: 1; max-width: 80px;
}
.subject-tab.active { background: #dceaff; border-color: #aac7ff; color: #2b4f80; }

.curriculum-select-bar { display: flex; justify-content: center; width: 100%; margin: 10px 0 20px; }
.curriculum-select-bar label { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }

.subject-content { display: none; }
.subject-content.active { display: block; }
.subject-summary-card {
  background: #f7faff; border: 1px solid #d0d7ff; border-radius: 12px;
  padding: 16px; margin: 0 auto 20px; text-align: center;
}
.subject-total-input {
  border: none; background: transparent; font-size: 28px; font-weight: 700; 
  width: 80px; text-align: right; color: #2b4f80;
}
.remaining-box { display: flex; align-items: baseline; justify-content: center; gap: 6px; }

.units-list { max-width: 800px; margin: 0 auto; }
.unit-category { font-size: 18px; font-weight: bold; color: #1a237e; margin-top: 30px; border-bottom: 2px solid #1a237e; }
.unit-title { font-weight: bold; margin-top: 15px; background: #eef3ff; padding: 8px 12px; border-left: 5px solid #2c5dd8; border-radius: 4px; }
.unit-item { 
    padding: 12px 4px; border-bottom: 1px solid #eee; 
    display: flex; align-items: center; 
} 
.unit-item input[type="checkbox"] { width: 24px; height: 24px; margin-right: 12px; flex-shrink: 0; }
.unit-item label { font-size: 15px; line-height: 1.4; }

/* ============================================
   🗓 時間割テーブル
============================================ */
.table-scroll-wrapper {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-top: 10px;
}
table { 
    border-collapse: collapse; 
    width: 100%; min-width: 600px; table-layout: fixed; 
}
th, td { border: 1px solid #bbb; padding: 10px 4px; text-align: center; font-size: 13px; word-break: break-all; }
th { background: #e8f1ff; color: #2b4f80; font-weight: bold; }
#result table th:first-child, #result table td:first-child { 
    position: sticky; left: 0; z-index: 2;
    background: #f4f7ff; border-right: 2px solid #dfe7ff; width: 100px;
} 

.timetable-settings { 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 10px;
}
.setting-group {
    background: #f7faff; border: 1px solid #d0d7ff; border-radius: 10px; padding: 16px;
    min-width: 220px;
}
.setting-group h3 { margin-top: 0; font-size: 15px; }

.primary-btn {
  background: #2c5dd8; color: white; border: none; padding: 14px 24px;
  font-size: 16px; font-weight: bold; border-radius: 8px; cursor: pointer;
  width: 100%; max-width: 300px; display: block; margin: 20px auto 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ドラッグ＆ドロップ */
.dragging {
    opacity: 0.5; background: #fff9c4 !important;
    transform: scale(0.95); border: 2px dashed #ffb300 !important;
}
.drag-over {
    background: #e3f2fd !important; border: 2px solid #2196f3 !important;
    transform: scale(1.05); transition: all 0.2s;
}

/* 科目別カラー */
.subject-kokugo { background: #ffe5ef !important; } 
.subject-shakai { background: #fff4ce !important; }
.subject-math   { background: #e4f1ff !important; }
.subject-rika   { background: #e9ffe9 !important; }
.subject-eigo   { background: #f3e8ff !important; }
.custom-subject-1 { background: #FFE6CC !important; }
.custom-subject-2 { background: #E6FFCC !important; }
.custom-subject-3 { background: #CCE6FF !important; }

/* ============================================
   📝 スケジュール一覧 & タブ切り替え
============================================ */
.schedule-setup-card {
  max-width: 600px; margin: 0 auto 20px; padding: 20px; 
  background: #f7faff; border: 1px solid #d0d7ff; border-radius: 14px; text-align: center;
}
.schedule-setup-main { display: flex; flex-direction: column; gap: 15px; align-items: center; }

.month-tabs-container {
    display: flex; overflow-x: auto; gap: 8px; padding: 10px 4px; margin-bottom: 15px;
    border-bottom: 2px solid #e0e6ff; -webkit-overflow-scrolling: touch;
}
.month-tab-btn {
    background: #fff; border: 1px solid #ccc; color: #555;
    padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold;
    cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.month-tab-btn.active {
    background: #2c5dd8; color: white; border-color: #2c5dd8;
    box-shadow: 0 2px 6px rgba(44, 93, 216, 0.4);
}
.schedule-month-block { display: none; animation: fadeIn 0.3s ease; }
.schedule-month-block.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.week-day-block { 
  background: #fff; border: 1px solid #dceaff; border-radius: 12px; 
  padding: 10px; margin: 15px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ============================================================
   ✅ スケジュール行レイアウト（リスト表示）
============================================================ */
.sched-row { 
    display: block; position: relative;
    background: white; border: 1px solid #e0e6ff; border-radius: 8px; 
    padding: 10px; margin: 8px 0; padding-right: 6px; 
    min-height: 80px;
}
.sched-row.goal-reached-row {
    border: 2px solid #ffb300 !important; 
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.4); 
    z-index: 2;
}

.sched-content { padding-right: 80px; margin-bottom: 8px; }
.sched-time { font-weight: bold; font-size: 12px; color: #666; margin-right: 8px; }
.sched-subject { font-weight: bold; font-size: 16px; margin-right: 8px; }
.sched-topic { font-size: 13px; color: #444; }

.sched-actions { 
    width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;
    align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; 
    border-top: 1px dashed rgba(0,0,0,0.1); min-height: 40px;
}

.sched-thumb { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.sched-thumb-img { 
    width: 90px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.video-thumb-wrapper { position: relative; display: inline-block; margin-right: 6px; margin-bottom: 6px; line-height: 0; }
.video-duration-label {
    position: absolute; bottom: 6px; right: 4px;
    background: rgba(0, 0, 0, 0.75); color: #fff;
    font-size: 10px; font-weight: bold; padding: 1px 4px; border-radius: 4px;
    pointer-events: none; z-index: 5; line-height: 1.2;
}
.fav-ribbon {
  position: absolute; top: -4px; right: 6px; width: 20px; height: 24px;
  background: #ff3333; color: white; font-size: 12px; text-align: center;
  line-height: 18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 10; pointer-events: none;
}
.fav-ribbon::after { content: "★"; display: block; font-size: 10px; }

/* -------------------------------------------
   アクションボタン（授業スタート等）のデザイン
   ------------------------------------------- */
.sched-main-action {
    position: absolute; top: 10px; right: 10px;
    width: 80px; height: 50px; z-index: 10;
}
@media (max-width: 600px) {
    .sched-main-action { width: 70px; height: 45px; right: 6px; top: 8px; }
}

.study-action-btn {
    width: 100%; height: 100%; border: none; border-radius: 8px;
    font-weight: bold; font-size: 13px; cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.2s; line-height: 1.2; padding: 2px;
}

.study-action-btn { background: #2c5dd8; color: white; }
.study-action-btn:hover { background: #1a44a5; transform: translateY(-2px); }

.study-action-btn.is-running {
    background: #f0f0f0; border: 2px dashed #999; color: #666;
    box-shadow: none; cursor: default;
}

.study-action-btn.is-finished {
    background: white; border: 2px solid #ccc; color: #555; box-shadow: none;
}
.btn-stamp-icon { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.btn-time-val {
    font-size: 10px; font-weight: normal; color: #666; margin-top: 2px;
    font-family: monospace; background: rgba(255,255,255,0.6);
    padding: 0 4px; border-radius: 4px;
}

.study-action-btn.is-finished.stamp-perfect { border-color: #ff3333; color: #d32f2f; }
.study-action-btn.is-finished.stamp-good { border-color: #ff9933; color: #e65100; }
.study-action-btn.is-finished.stamp-hard { border-color: #6666ff; color: #1a237e; }

.study-action-btn.is-finished.goal-reached {
    background: linear-gradient(135deg, #fff9c4, #ffecb3);
    border-color: #ffb300;
    box-shadow: 0 0 8px rgba(255, 179, 0, 0.4);
}
.goal-reached .btn-time-val { color: #e65100; font-weight: bold; }


/* ============================================
   🗓 カレンダー詳細
============================================ */
.cal-table { width: 100%; min-width: 700px; }
.cal-cell { vertical-align: top; height: 110px; background: #fff; position: relative; }
.cal-weekend { background: #f9f9f9; }
.cal-date { font-weight: bold; margin-bottom: 4px; font-size: 14px; }

.cal-lesson { 
  min-height: 50px; font-size: 12px; padding: 6px; 
  padding-top: 6px; padding-right: 24px;
  border: 1px solid #ddd; border-radius: 6px; margin-bottom: 4px; 
  position: relative; background: #fff; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cal-lesson-content { padding-right: 2px; }
.cal-lesson-subj { font-weight: bold; line-height: 1.3; }
.cal-lesson-topic { font-size: 11px; color: #444; }

.cal-lesson-actions-top { position: absolute; top: 2px; right: 2px; z-index: 10; }
.cal-stamp-in-header { 
    display: inline-flex; align-items: center; justify-content: center; 
    width: 20px; height: 20px; font-size: 16px; line-height: 1; 
}
.cal-unlearned-in-header { 
    display: inline-flex; align-items: center; justify-content: center; 
    width: 20px; height: 20px; font-size: 16px; font-weight: bold; color: #ddd; 
}

/* ============================================
   📱 モーダル & ポップアップ
============================================ */
.grade-modal, .overlay, .popup-backdrop { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(30, 40, 60, 0.7); display: none; 
  align-items: center; justify-content: center; z-index: 10000; 
}

.grade-modal-content {
    background: #ffffff; border-radius: 16px; padding: 24px;
    width: 90%; max-width: 400px; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); text-align: center;
    position: relative;
}
.grade-buttons button {
    background: #f7faff; border: 2px solid #cfe0ff; border-radius: 12px;
    padding: 16px; font-size: 18px; font-weight: 700; color: #2b4f80;
    width: 100%; margin-bottom: 12px;
}

/* --- 📺 動画再生プレイヤー --- */
.floating-video-player {
    position: fixed;
    top: 100px; left: 100px;
    width: 480px; height: 360px;
    resize: both; overflow: hidden;
    min-width: 300px; min-height: 200px;
    max-width: 95vw; max-height: 95vh;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 1px solid #999;
    display: flex; flex-direction: column;
    z-index: 3000;
}
.player-header {
    background: #333; color: #fff; padding: 6px 10px;
    cursor: move; 
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; font-weight: bold; flex-shrink: 0;
    user-select: none;
}
.player-clock {
    color: #4fc3f7; font-family: monospace; font-size: 14px; letter-spacing: 1px;
}
.floating-video-player iframe {
    width: 100%; flex: 1; border: none; background: #000;
    pointer-events: auto;
}
.floating-video-player.is-dragging iframe { pointer-events: none; }
.floating-video-player .popup-buttons {
    background: #f9f9f9; padding: 8px;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #eee; flex-shrink: 0;
}

.popup-fav-btn {
  background: #fff; border: 2px solid #ff3333; color: #d32f2f;            
  padding: 8px 16px; border-radius: 4px; cursor: pointer;
  font-weight: bold; margin-right: 12px; transition: all 0.2s;
}
.popup-fav-btn.is-active {
  background: #ff3333; color: #fff; border-color: #ff3333;
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.6); 
}
.popup-fav-btn.hover { transform: translateY(-2px); }

/* 動画一覧ポップアップ */
.video-list-popup { 
  background: white; border-radius: 14px; width: 95%; max-width: 600px; 
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.video-grid { 
  overflow-y: auto; padding: 14px; 
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; 
  background: #f9f9f9;
} 
@media(max-width:400px){ .video-grid { grid-template-columns: 1fr; } }

.video-card { 
    background: #fff; padding: 8px; border-radius: 8px; border: 1px solid #ddd; 
    display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.video-thumb { width: 100%; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; }
.video-title { font-size: 12px; margin: 8px 0; flex:1; line-height: 1.4; max-height: 2.8em; overflow: hidden;}
.video-play-btn { width: 100%; padding: 8px; margin-top: 4px; font-weight: bold; background: #f0f0f0; border:1px solid #ccc; border-radius:4px; cursor:pointer;}
.video-play-btn:hover { background: #e0e0e0; }

/* style.css のソラ・ラウンジ関連のスタイル */

/* ============================================
   🛸 浮遊するRPG自習室 (★48px基準に変更)
============================================ */
.floating-study-room {
    position: fixed;
    /* 位置：右下 */
    top: auto; bottom: 100px; left: auto; right: 20px;
    
    /* ウィンドウ初期サイズ */
    width: 300px; height: 240px; 
    
    background: #222; border: 2px solid #fff; border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; z-index: 2900;
    font-family: "MS Gothic", monospace; user-select: none;
    
    /* リサイズ機能 */
    resize: both; 
    overflow: hidden; 
    min-width: 200px; min-height: 150px;
    max-width: 90vw; max-height: 90vh;
    
    transform: none;
}

/* ヘッダー内のズームボタンエリア */
.zoom-toggle-btns {
    display: flex; gap: 2px; background: #1a202c; padding: 2px; border-radius: 4px; border: 1px solid #4a5568; margin-left: 10px;
}
.zoom-btn {
    background: none; border: none; color: #718096; padding: 2px 8px; font-size: 10px; cursor: pointer; border-radius: 2px; font-weight: bold;
}
.zoom-btn.active { background: #4a5568; color: #fff; }

/* ドラッグハンドル */
.room-drag-header {
    background: #2d3748; color: #fff; padding: 0 10px; cursor: move; display: flex; justify-content: space-between; align-items: center; font-size: 12px; height: 36px; flex-shrink: 0;
}
.room-btn-close {
    background: #e53e3e; border: 2px solid #fff; color: white;
    cursor: pointer; padding: 2px 8px; font-weight: bold;
}

/* マップ表示窓 */
.rpg-room-bg {
    position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #333; cursor: grab;
}

/* ★マップ全体コンテナ (48px基準) */
.rpg-map-container {
    position: absolute; top: 0; left: 0;
    /* ★ 変更: 20マス x 48px = 960px, 15マス x 48px = 720px */
    width: 960px; height: 720px; 
    background-image: url('img/room_bg.png'); 
    background-size: 960px 720px; /* ★ 変更 */
    transform-origin: 0 0;
    transform: translate(0, 0) scale(1);
    transition: transform 0.1s ease-out;
}

/* --- キャラクター (★48px基準) --- */
.rpg-char {
    position: absolute; 
    /* ★ 変更: 32px -> 48px */
    width: 48px; height: 48px; 
    z-index: 10;
    transition: top 0.4s linear, left 0.4s linear;
}

/* キャラ画像表示エリア */
.rpg-char-inner {
    /* ★ 変更: 32px -> 48px */
    width: 48px; height: 48px;
    background-color: transparent; border: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* ★ 変更: 横144px(3コマ) x 縦192px(4方向) */
    background-size: 144px 192px; 
    image-rendering: pixelated; 
}
.rpg-char.is-me .rpg-char-inner {
    background-color: transparent; z-index: 20;
}

/* 向きの制御 (★48px単位) */
.rpg-char[data-dir="down"]  .rpg-char-inner { background-position-y: 0px; }
.rpg-char[data-dir="left"]  .rpg-char-inner { background-position-y: -48px; }
.rpg-char[data-dir="right"] .rpg-char-inner { background-position-y: -96px; }
.rpg-char[data-dir="up"]    .rpg-char-inner { background-position-y: -144px; }

/* 歩行アニメーション (★48px単位) */
.rpg-char.is-walking .rpg-char-inner {
    animation: walkAnim 0.6s steps(3) infinite;
}
@keyframes walkAnim {
    from { background-position-x: 0px; }
    /* ★ 変更: 3コマ分移動 */
    to   { background-position-x: -144px; } 
}

/* 吹き出し・名前プレート位置調整 (★微調整) */
.rpg-bubble {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.9); border: 2px solid #000; color: #000;
    padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold;
    white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity 0.3s, top 0.3s; z-index: 100;
}
.rpg-bubble.show { opacity: 1; top: -44px; } /* ★ 変更 */

.rpg-name-plate {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%); /* ★ 変更 */
    background: rgba(0, 0, 0, 0.6); color: #fff;
    font-size: 9px; padding: 1px 4px; border-radius: 3px;
    white-space: nowrap; pointer-events: none; z-index: 50;
    font-family: sans-serif; text-shadow: 0 1px 2px #000;
}
.rpg-char.is-me .rpg-name-plate {
    background: rgba(44, 93, 216, 0.8); border: 1px solid #88b1ff;
}
/*#############################################*/

/* スタンプ */
.stamp-options { display: flex; justify-content: space-around; margin: 20px 0; }
.stamp-btn {
  background: #fff; border: 2px solid #e0e6ff; color: #2b4f80;
  border-radius: 12px; padding: 12px; width: 30%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; transition: all 0.2s;
}
.stamp-btn:hover { background: #f0f6ff; transform: translateY(-2px); }
.stamp-btn.selected { 
    background: #eef5ff; border-color: #2c5dd8; 
    box-shadow: 0 0 10px rgba(44,93,216,0.3); transform: scale(1.05);
}
.stamp-icon { font-size: 32px; line-height: 1; display: block; }
.stamp-label { font-size: 12px; font-weight: bold; display: block; }

/* レポート画面 */
.report-section {
    margin-bottom: 20px; background: #f9f9f9; padding: 14px; border-radius: 8px; 
    border-left: 5px solid #4a148c; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-align: left;
}
.report-section h3 {
    margin: 0 0 10px 0; font-size: 16px; color: #4a148c; border-bottom: 1px dashed #ccc; padding-bottom: 6px;
}
.report-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.report-stat-item { background: #fff; padding: 10px 4px; border-radius: 6px; text-align: center; border: 1px solid #eee; }

/* ⏱️ タイマーバー */
#studyTimerBar {
    position: fixed; bottom: 0; left: 0; right: 0; 
    background: #2c5dd8; color: white;
    padding: 12px 20px; height: auto; min-height: 80px; 
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 2100; box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
.timer-text-container {
    display: flex; flex-direction: column; justify-content: center;
    flex: 1; min-width: 0; margin-right: 10px;
}
.timer-info-line { 
    font-size: 12px; width: 100%; white-space: nowrap; 
    overflow: hidden; text-overflow: ellipsis; text-align: left;
    color: rgba(255,255,255, 0.9);
}
.timer-display-main { font-family: monospace; font-size: 32px; font-weight: bold; }
.timer-stop-btn { height: 50px; padding: 0 24px; font-size: 18px; border-radius: 12px; border: 3px solid white; background: #ff5252; color: white; }

.timer-chime-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white; border-radius: 50px; padding: 8px 16px;
    margin-right: 12px; font-size: 14px; font-weight: bold;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; height: 40px;
}
.timer-chime-btn:hover { background: rgba(255, 255, 255, 0.3); }
.timer-chime-btn.is-off {
    background: rgba(0, 0, 0, 0.2); color: #ccc;
    border-color: rgba(255, 255, 255, 0.2); text-decoration: line-through;
}

.setting-menu-btn {
    display: block; width: 100%; padding: 14px; margin-bottom: 12px;
    border-radius: 10px; border: 1px solid transparent; 
    color: white; font-weight: bold; font-size: 15px; 
}

/* スマホ調整 */
@media (max-width: 600px) {
    #studyTimerBar { padding: 8px 10px; }
    .timer-display-main { font-size: 24px; }
    .timer-chime-btn { padding: 6px 10px; font-size: 12px; margin-right: 8px; }
    .timer-stop-btn { padding: 0 16px; height: 44px; font-size: 16px; }
    
    .floating-video-player {
        top: auto !important; left: 0 !important; bottom: 0 !important;
        width: 100% !important; height: auto !important;
        border-radius: 12px 12px 0 0; resize: none;
    }
    .player-header { cursor: default; }
    .floating-video-player iframe { aspect-ratio: 16/9; flex: none; }

    #timetable .table-scroll-wrapper, #scheduleCalendarTab .table-scroll-wrapper { overflow-x: visible; }
    .cal-table, #timetable table { min-width: auto; width: 100%; table-layout: fixed; }
    .cal-cell, #timetable th, #timetable td { height: auto; font-size: 9px; }
    .cal-lesson { padding: 2px; padding-top: 2px; padding-right: 14px; min-height: 36px; margin-bottom: 2px; }
    .cal-lesson-subj { font-size: 9px; }
    .cal-lesson-topic { font-size: 8px; margin-top: 1px; }
    .cal-lesson-actions-top { right: 0; top: 0; gap: 0; }
    .cal-stamp-in-header, .cal-unlearned-in-header { width: 12px; height: 12px; font-size: 10px; }
    
    .month-tabs-container { flex-wrap: wrap; overflow-x: visible; justify-content: center; height: auto; }
    .month-tab-btn { margin-bottom: 6px; font-size: 11px; padding: 6px 10px; }

    /* -------------------------------------------
       1. 動画プレイヤー (上段 30%)
       ------------------------------------------- */
    .floating-video-player {
        top: 60px !important;      /* ヘッダー(60px)の下から開始 */
        height: auto !important; /* ★変更: 中身に合わせて伸縮 */
        min-height: 30vh;        /* 最低限の高さは確保 */
        max-height: 50vh;        /* 半分以上は占有させない */
        left: 0 !important; 
        right: 0 !important;
        bottom: auto !important;   /* 下固定解除 */
        
        width: 100% !important;
        
        border-radius: 0;          /* 角丸なし */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 2950;
    }

    /* -------------------------------------------
       2. ソラ・ラウンジ (中段 残り全部)
       ------------------------------------------- */
    .floating-study-room {
        /* ★重要: CSSだけでは「動画の高さ」を知れないため、
           JSで制御するのが理想ですが、簡易的にフレックスボックスやGridを使う手もあります。
           今回は一番確実な「JSで高さを計算」は重いので、
           「動画プレイヤーの下端」を意識したCSSGridレイアウトにはせず、
           z-index制御と透過で「重なっても操作できる」ようにするか、
           あるいは「動画の下」を諦めて「下半分固定」にします。
           
           → 修正案: 動画プレイヤーの高さを固定しないなら、ラウンジは
             top: auto; bottom: 80px; height: 40vh; 
             のように「下側基準」で配置し、動画と被らないように祈る（または少し被ってもOKとする）のが現実的です。
        */
        top: auto !important;      /* 上固定をやめる */
        
        /* 下端: タイマーバーの上 (80px) */
        bottom: 80px !important;
        
        /* 左右いっぱい */
        left: 0 !important; 
        right: 0 !important;
        width: 100% !important;
        height: 40vh !important;   /* 画面の40%くらいを使う */
        max-width: none !important; /* 最大幅制限解除 */
        
        /* スタイル調整: 一体感を出す */
        border-radius: 0;
        border-left: none; 
        border-right: none;
        box-shadow: none;          /* 影なし（埋め込み風） */
        background: #222;
        
        /* PC用の変形・リサイズ無効化 */
        transform: none !important;
        resize: none !important;
        
        z-index: 2900;
    }

    /* マップ初期位置: 部屋の中央を表示 */
    .rpg-map-container {
        /* コンテナの中央を、画面の中央に合わせる */
        left: 50%; 
        top: 50%;
        transform: translate(-50%, -50%); 
    }

    /* -------------------------------------------
       3. タイマーバー (下段 固定)
       ------------------------------------------- */
    /* 既存のstyleで bottom: 0, height: auto (min 80px) となっているので
       基本そのままでOKですが、z-indexを一番上にしておきます */
    #studyTimerBar {
        z-index: 3000;
    }
}

/* スプラッシュ */
#splashScreen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #1b263b 0%, #0d1b2a 100%);
    z-index: 20000; display: flex; justify-content: center; align-items: center;
    transition: opacity 1.2s ease-out, visibility 1.2s; overflow: hidden;
}
#splashScreen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content {
    text-align: center; color: white; z-index: 10; 
    animation: floatUp 1.5s ease-out forwards;
}
.splash-logo {
    font-size: 70px; margin-bottom: 10px; display: inline-block;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    animation: spinSlow 20s infinite linear;
}
.splash-title {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 36px; margin: 0; letter-spacing: 6px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8); font-weight: normal;
}
.splash-subtitle {
    font-size: 13px; color: #a0c4ff; margin-top: 12px;
    letter-spacing: 3px; font-family: sans-serif; opacity: 0.8;
    text-transform: uppercase;
}
#starSky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.shooting-star {
    position: absolute; height: 2px;
    background: linear-gradient(-45deg, rgba(255,255,255,1), rgba(255,255,255,0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
    animation: shoot 2s ease-out forwards; opacity: 0;
}
.shooting-star::before {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff;
}
@keyframes floatUp { 0% { opacity: 0; transform: translateY(30px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spinSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes shoot { 
    0% { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; width: 0; }
    10% { width: 150px; }
    100% { transform: translateX(-400px) translateY(400px) rotate(-45deg); opacity: 0; width: 0; }
}

/* ラウンジ内の通知メッセージ */
.room-notification {
    position: absolute;
    top: 50px; left: 50%; transform: translateX(-50%);
    background: rgba(231, 76, 60, 0.9); color: white;
    padding: 8px 16px; border-radius: 20px;
    font-size: 12px; font-weight: bold;
    z-index: 1000; pointer-events: none; white-space: nowrap;
    opacity: 0; transition: opacity 0.5s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.room-notification.show { opacity: 1; }

/* ============================================
   📱 スマホ (横画面) : 動画没入モード
============================================ */
@media (max-width: 900px) and (orientation: landscape) {
    
    /* 1. ヘッダー・タイマーバー・ラウンジを隠す */
    /* 1. 邪魔なものを消す */
  /*  #appHeader,
    #studyTimerBar,
    .floating-study-room,
    .tab-content, 
    #currentGradeBadge,
    #headerSettings {
        display: none !important;
    }*/

    /* bodyのスクロールも止める（背景が見えないように） */
  /*  body {
        overflow: hidden !important;
        background: #000 !important; 
    }*/

    /* 2. 動画プレイヤーを全画面化 */
    .floating-video-player {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        
        width: 100vw !important;
        height: 100vh !important;
        
        /* 余白・枠線・角丸を完全排除 */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        z-index: 2147483647 !important; /* ブラウザ上の最大値付近 */
    }

    /* 中身（iframe）も最大化 */
    .floating-video-player iframe, 
    #popupPlayerFrame {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* ヘッダーバー（タイトル・時計）は少し控えめに表示（または隠す） */
    /* 今回は「動画だけ見たい」要望に合わせて、操作時以外は邪魔にならないようにします */
    .player-header {
        position: absolute;
        top: 0; left: 0; width: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
        padding: 10px;
        z-index: 10;
        pointer-events: none; /* 動画のクリックを邪魔しない */
    }

    .player-header * { pointer-events: auto; } /* ボタンだけ押せるように */
    /* 操作ボタン（お気に入り・閉じる）は右上にフロートさせるか、
       動画の邪魔なら隠して「閉じる」だけ残すなど検討が必要ですが、
       一旦「下部に半透明で表示」させます */
    .floating-video-player .popup-buttons {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        border: none;
        padding: 15px;
        z-index: 10;
        justify-content: flex-end; /* 右寄せ */
    }
}

/* ============================================
   👤 設定画面：アバタータブ & グリッド (New!)
============================================ */
/* アクティブなタブ */
.char-tab-btn.active {
    background: #2c5dd8; color: white;
    box-shadow: 0 2px 5px rgba(44, 93, 216, 0.3);
}
/* グリッドエリア */
.char-select-grid {
    display: grid;
    /* ★変更: 画面幅に関わらず「強制的に4列」にする設定 */
    grid-template-columns: repeat(4, 1fr); 
    
    /* ★変更: 隙間を狭くしてアイコンスペースを確保 (12px -> 6px) */
    gap: 6px; 
    
    /* ★変更: 外側の余白も少し詰める */
    padding: 8px; 
    
    background: #f9f9f9; 
    border-radius: 8px;
    
    /* 高さ設定 */
    height: 300px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}
/* 各選択肢のラッパー */
.char-option { 
    cursor: pointer; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    /* 横幅いっぱいに広げる */
    width: 100%;
}
.char-option input { display: none; } 

/* ① 設定画面のプレビュー (顔アイコン) */
.char-preview {
    /* ★変更: 固定pxではなく「枠いっぱい(100%)」にしつつ、
       正方形(aspect-ratio: 1)を維持させることで、
       スマホの狭い画面でも4列きれいに収まります */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    
    /* PCなどで巨大になりすぎないよう最大幅を制限（希望の64px近辺） */
    max-width: 70px; 
    
    border: 2px solid transparent; 
    border-radius: 8px;
    
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    background-color: #f0f4f8;
    transition: all 0.2s;
}

/* 選択時のエフェクト */
.char-option input:checked + .char-preview {
    border-color: #2c5dd8; 
    background-color: #e3f2fd;
    box-shadow: 0 0 8px rgba(44, 93, 216, 0.4); 
    transform: scale(0.95); /* 枠からはみ出さないよう逆に少し縮小して強調 */
}
/* 非アクティブなタブの中身は隠す */
.char-select-grid[style*="display:none"] { display: none !important; }

/* ============================================
   👤 設定画面：アバターグリッド (新レイアウト)
============================================ */

/* ★ 以前の .char-tabs, .char-tab-btn のスタイルは削除してください */

/* グリッドエリアのスタイル */
.char-select-grid {
    display: grid;
    /* 横に4列 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 8px; 
    padding: 8px; 
    background: #f0f6ff; 
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    
    /* 高さを3行分＋αに固定し、スクロール可能にする */
    height: 240px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* スマホでの慣性スクロール */
}

/* 各選択肢のラッパー */
.char-option { 
    cursor: pointer; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    width: 100%;
}
.char-option input { display: none; } 

/* キャラクタープレビュー画像 */
.char-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 70px; 
    border: 2px solid transparent; 
    border-radius: 8px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    background-color: #fff;
    transition: all 0.2s;
}

/* 選択時のエフェクト */
.char-option input:checked + .char-preview {
    border-color: #2c5dd8; 
    background-color: #e3f2fd;
    box-shadow: 0 0 8px rgba(44, 93, 216, 0.4); 
    transform: scale(0.95);
}

/* ★【新設】ロックされたキャラクターのスタイル */
.char-option.is-locked {
    cursor: not-allowed;
}
.char-preview-locked {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 70px; 
    border-radius: 8px;
    background-color: #e9ecef; /* グレー背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd; /* 鍵アイコンの色 */
}
/* ============================================
   👤 アバター画像定義 (顔と歩行の分離) (New!)
============================================ */

/* ① 設定画面のプレビュー (顔アイコン) */
.char-preview {
    /* ★変更: サイズを大きく (36px -> 64px) */
    width: 64px; 
    height: 64px;
    
    border: 2px solid transparent; 
    border-radius: 8px; /* 角丸も少しなだらかに */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    background-color: #f0f4f8;
    transition: all 0.2s;
}

/* ② RPG自習室のキャラ (歩行スプライト) */
.rpg-char[data-type^="b"] .rpg-char-inner,
.rpg-char[data-type^="g"] .rpg-char-inner {
    background-image: url('img/char_npc.png'); /* fallback */
}


/* ============================================
   👤 アバター画像定義 (全64種 完全版)
============================================ */

/* --- 男子 (b1 〜 b32) --- */

.char-preview.type-1 { background-image: url('img/face_1.png'); }
.rpg-char[data-type="1"] .rpg-char-inner { background-image: url('img/walk_1.png'); }

.char-preview.type-2 { background-image: url('img/face_2.png'); }
.rpg-char[data-type="2"] .rpg-char-inner { background-image: url('img/walk_2.png'); }

.char-preview.type-3 { background-image: url('img/face_3.png'); }
.rpg-char[data-type="3"] .rpg-char-inner { background-image: url('img/walk_3.png'); }

.char-preview.type-4 { background-image: url('img/face_4.png'); }
.rpg-char[data-type="4"] .rpg-char-inner { background-image: url('img/walk_4.png'); }

.char-preview.type-5 { background-image: url('img/face_5.png'); }
.rpg-char[data-type="5"] .rpg-char-inner { background-image: url('img/walk_5.png'); }

.char-preview.type-6 { background-image: url('img/face_6.png'); }
.rpg-char[data-type="6"] .rpg-char-inner { background-image: url('img/walk_6.png'); }

.char-preview.type-7 { background-image: url('img/face_7.png'); }
.rpg-char[data-type="7"] .rpg-char-inner { background-image: url('img/walk_7.png'); }

.char-preview.type-8 { background-image: url('img/face_8.png'); }
.rpg-char[data-type="8"] .rpg-char-inner { background-image: url('img/walk_8.png'); }

.char-preview.type-9 { background-image: url('img/face_9.png'); }
.rpg-char[data-type="9"] .rpg-char-inner { background-image: url('img/walk_9.png'); }

.char-preview.type-10 { background-image: url('img/face_10.png'); }
.rpg-char[data-type="10"] .rpg-char-inner { background-image: url('img/walk_10.png'); }

.char-preview.type-11 { background-image: url('img/face_11.png'); }
.rpg-char[data-type="11"] .rpg-char-inner { background-image: url('img/walk_11.png'); }

.char-preview.type-12 { background-image: url('img/face_12.png'); }
.rpg-char[data-type="12"] .rpg-char-inner { background-image: url('img/walk_12.png'); }

.char-preview.type-13 { background-image: url('img/face_13.png'); }
.rpg-char[data-type="13"] .rpg-char-inner { background-image: url('img/walk_13.png'); }

.char-preview.type-14 { background-image: url('img/face_14.png'); }
.rpg-char[data-type="14"] .rpg-char-inner { background-image: url('img/walk_14.png'); }

.char-preview.type-15 { background-image: url('img/face_15.png'); }
.rpg-char[data-type="15"] .rpg-char-inner { background-image: url('img/walk_15.png'); }

.char-preview.type-16 { background-image: url('img/face_16.png'); }
.rpg-char[data-type="16"] .rpg-char-inner { background-image: url('img/walk_16.png'); }

.char-preview.type-17 { background-image: url('img/face_17.png'); }
.rpg-char[data-type="17"] .rpg-char-inner { background-image: url('img/walk_17.png'); }

.char-preview.type-18 { background-image: url('img/face_18.png'); }
.rpg-char[data-type="18"] .rpg-char-inner { background-image: url('img/walk_18.png'); }

.char-preview.type-19 { background-image: url('img/face_19.png'); }
.rpg-char[data-type="19"] .rpg-char-inner { background-image: url('img/walk_19.png'); }

.char-preview.type-20 { background-image: url('img/face_20.png'); }
.rpg-char[data-type="20"] .rpg-char-inner { background-image: url('img/walk_20.png'); }

.char-preview.type-21 { background-image: url('img/face_21.png'); }
.rpg-char[data-type="21"] .rpg-char-inner { background-image: url('img/walk_21.png'); }

.char-preview.type-22 { background-image: url('img/face_22.png'); }
.rpg-char[data-type="22"] .rpg-char-inner { background-image: url('img/walk_22.png'); }

.char-preview.type-23 { background-image: url('img/face_23.png'); }
.rpg-char[data-type="23"] .rpg-char-inner { background-image: url('img/walk_23.png'); }

.char-preview.type-24 { background-image: url('img/face_24.png'); }
.rpg-char[data-type="24"] .rpg-char-inner { background-image: url('img/walk_24.png'); }

.char-preview.type-25 { background-image: url('img/face_25.png'); }
.rpg-char[data-type="25"] .rpg-char-inner { background-image: url('img/walk_25.png'); }

.char-preview.type-26 { background-image: url('img/face_26.png'); }
.rpg-char[data-type="26"] .rpg-char-inner { background-image: url('img/walk_26.png'); }

.char-preview.type-27 { background-image: url('img/face_27.png'); }
.rpg-char[data-type="27"] .rpg-char-inner { background-image: url('img/walk_27.png'); }

.char-preview.type-28 { background-image: url('img/face_28.png'); }
.rpg-char[data-type="28"] .rpg-char-inner { background-image: url('img/walk_28.png'); }

.char-preview.type-29 { background-image: url('img/face_29.png'); }
.rpg-char[data-type="29"] .rpg-char-inner { background-image: url('img/walk_29.png'); }

.char-preview.type-30 { background-image: url('img/face_30.png'); }
.rpg-char[data-type="30"] .rpg-char-inner { background-image: url('img/walk_30.png'); }

.char-preview.type-31 { background-image: url('img/face_31.png'); }
.rpg-char[data-type="31"] .rpg-char-inner { background-image: url('img/walk_31.png'); }

.char-preview.type-32 { background-image: url('img/face_32.png'); }
.rpg-char[data-type="32"] .rpg-char-inner { background-image: url('img/walk_32.png'); }

/* style.css の末尾 */

/* ============================================
   📱 スマホ (横画面) : 動画没入モード
   ★ video-mode クラスがある時だけ発動するように整理
============================================ */
@media (max-width: 900px) and (orientation: landscape) {
    
    /* 動画モード時のみ、他の要素を完全に隠す */
    body.video-mode #appHeader,
    body.video-mode #studyTimerBar,
    body.video-mode .floating-study-room,
    body.video-mode .tab-content,
    body.video-mode #currentGradeBadge,
    body.video-mode #headerSettings,
    body.video-mode #parentsMenuWrapper  {
        display: none !important;
    }

    /* 動画モード時のみ、背景を黒にしてスクロール禁止 */
    body.video-mode {
        overflow: hidden !important;
        background: #000 !important;
    }

    /* 動画プレイヤー本体の設定 */
    .floating-video-player {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        
        width: 100vw !important;
        height: 100vh !important;
        
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        /* 何があっても最前面に来るように */
        z-index: 2147483647 !important; 
    }

    /* 中身の動画エリアを画面いっぱいに */
    .floating-video-player iframe, 
    #popupPlayerFrame {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* ヘッダーバー（タイトル・時計）のオーバーレイ化 */
    .player-header {
        position: absolute;
        top: 0; left: 0; width: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
        padding: 10px;
        z-index: 10;
        pointer-events: none; /* 下の動画操作を邪魔しない */
    }
    .player-header * { pointer-events: auto; }

    /* 下部ボタン（お気に入り・閉じる）のオーバーレイ化 */
    .floating-video-player .popup-buttons {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        border: none;
        padding: 10px 20px;
        z-index: 10;
        justify-content: flex-end;
        pointer-events: auto; 
        gap: 15px;
    }

    /* アイコンボタンの装飾 */
    .popup-fav-btn, 
    .popup-close-btn {
        width: 44px; height: 44px;
        border-radius: 50% !important;
        font-size: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(4px);
    }
    .popup-fav-btn::before { content: "☆"; font-size: 24px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .popup-fav-btn.is-active::before { content: "★"; color: #ffeb3b; }
    .popup-close-btn::before { content: "✕"; font-size: 20px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}

/* ============================================
   🎉 レベルアップ通知モーダル
============================================ */
.level-up-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 35, 126, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
    animation: fadeInOverlay 0.5s ease-out;
}

.level-up-content {
    background: linear-gradient(145deg, #424f8a, #2c3e50);
    color: white;
    padding: 30px;
    border-radius: 20px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 5px 20px rgba(0,0,0,0.5);
    text-align: center;
    width: 90%;
    max-width: 380px;
    transform: scale(0.8);
    opacity: 0;
    animation: popInModal 0.5s 0.2s ease-out forwards;
}

.level-up-title {
    font-size: 48px;
    font-weight: bold;
    color: #ffeb3b;
    text-shadow: 0 0 10px #ffc107, 0 0 20px #ff9800, 0 2px 5px rgba(0,0,0,0.5);
    margin: 0 0 20px 0;
    animation: glowText 1.5s infinite alternate;
}

.level-up-animation {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
}
#levelUpNew {
    color: #ffeb3b;
    font-size: 32px;
    display: inline-block;
    transform: scale(1.2);
}

.level-up-reward p {
    font-size: 14px;
    margin-bottom: 10px;
}
.unlocked-char-display {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px;
    border-radius: 12px;
    display: inline-block;
}
.unlocked-char-display img {
    width: 80px;
    height: 80px;
    display: block;
}

@keyframes fadeInOverlay {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes popInModal {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes glowText {
    from { text-shadow: 0 0 10px #ffc107, 0 0 20px #ff9800; }
    to { text-shadow: 0 0 20px #ffd700, 0 0 40px #ffc107; }
}