@charset "UTF-8";

/* --- 変数定義 (:root) --- */
:root {
  --map-base: #fdfaf2;
  --ink: #3e2723;
  --accent-gold: #b8860b;
  --ocean-blue: #0a1118;
  --ripple-blue: rgba(0, 212, 255, 0.8);
  --graph-fill: rgba(184, 134, 11, 0.08);
  --soft-gold: rgba(184, 134, 11, 0.1);
  --shadow-black: rgba(0, 0, 0, 0.6);
  --vh: 1vh;
}

/* --- 全体レイアウト --- */
body, html {
  margin: 0; 
  padding: 0;
  font-family: 'Hiragino Mincho ProN', serif;
  background-color: var(--ocean-blue);
  color: var(--ink);
  height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
  overflow: hidden; 
  touch-action: none;
  transition: filter 1s ease; 
}

body.sepia-mode { 
  filter: sepia(0.6) contrast(0.9); 
}

/* --- 霧の演出 (Cloud Stage) --- */
#cloud-stage {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.5s ease;
}

#cloud-stage.finished { 
  opacity: 0; 
  display: none; 
}

#cloud-stage.re-fog {
    display: block !important;
    opacity: 0.3 !important;
    z-index: 800;
}

.cloud-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 60%;
  transition: transform 3.5s cubic-bezier(.65,0,.35,1), opacity 2.5s ease;
}

.cloud-body {
  width: 100%; 
  height: 100%; 
  opacity: 0.95;
  background:
    radial-gradient(circle at 30% 40%, #ffffff 0%, #fdfaf2 35%, transparent 70%),
    radial-gradient(circle at 70% 60%, #ffffff 0%, #fdfaf2 40%, transparent 75%),
    radial-gradient(circle at 40% 70%, #ffffff 0%, #fdfaf2 35%, transparent 70%);
  filter: blur(70px);
  animation: fogMove 8s ease-in-out infinite alternate;
}

.cloud-left { left: -10%; }
.cloud-right { right: -10%; }
.cloud-center { left: 50%; transform: translateX(-50%); width: 80%; }

#cloud-stage.active .cloud-left { transform: translateX(-130%); }
#cloud-stage.active .cloud-right { transform: translateX(130%); }
#cloud-stage.active .cloud-center { transform: translateX(-50%) scaleX(0); opacity: 0; }

@keyframes fogMove {
  from { transform: translate(-2%, -1) scale(1.02); }
  to { transform: translate(2%, 1%) scale(1.1); }
}

/* --- ゲーム選択画面風ボックス --- */
#scroll-hint {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11000;
  color: var(--ink);
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.5s ease, visibility 0.8s;
  font-family: 'DotGothic16', sans-serif;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid var(--accent-gold);
  border-radius: 15px;
  padding: 25px 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

body.fog-clearing #scroll-hint { 
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- ナビガイド --- */
#nav-guide {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, 0);
  z-index: 960;
  color: var(--ink);
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--accent-gold);
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#nav-guide.visible { 
  opacity: 1; 
  transform: translate(-50%, 15px);
  animation: guideBlink 2.5s infinite; 
}

@keyframes guideBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- 進捗バー・背景 --- */
#progress-container { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 6px; 
  background: rgba(0, 0, 0, 0.3); 
  z-index: 9999; 
}

#progress-bar { 
  width: 0%; 
  height: 100%; 
  background: linear-gradient(90deg, #d4af37, #f1c40f); 
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.8); 
  transition: width 0.2s ease-out; 
}

.ocean-bg { 
  position: fixed; 
  inset: 0; 
  background: linear-gradient(180deg, #0a1118 0%, #1a2a3a 100%); 
  z-index: -1; 
}

.fog-overlay { 
  position: fixed; 
  inset: 0; 
  background: linear-gradient(90deg, transparent 60%, rgba(253, 250, 242, 0.9) 100%); 
  pointer-events: none; 
  z-index: 800; 
  opacity: 0.7; 
}

/* --- 右側：サイドログパネル --- */
#side-log-panel {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(calc(-50% + 40px));
  width: 280px;
  max-height: 520px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--accent-gold);
  padding: 25px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 0 10px 10px 0;
  box-shadow: -10px 0 20px rgba(0,0,0,0.2);
}

#side-log-panel.visible { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: auto; 
  transform: translateY(-50%);
}

.log-header { 
  font-family: 'DotGothic16', sans-serif; 
  color: var(--accent-gold); 
  font-size: 14px; 
  letter-spacing: 0.2em; 
  margin-bottom: 15px; 
  border-bottom: 1px solid rgba(184, 134, 11, 0.3); 
  padding-bottom: 8px; 
}

#collection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
  min-height: 40px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.collected-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  display: inline-block;
}

.side-chart-container {
  width: 100%;
  height: 60px;
  margin-bottom: 5px;
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--accent-gold);
}

#miniChartSvg { width: 100%; height: 100%; }

#mini-trend-label {
  font-family: 'DotGothic16', sans-serif;
  font-size: 10px;
  color: var(--accent-gold);
  text-align: right;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.log-body-text, #log-dynamic-text, .log-entry { 
  font-size: 13px !important; 
  line-height: 1.8 !important; 
  color: var(--ink) !important; 
  opacity: 1 !important;            
  transition: all 0.5s ease; 
  flex: 1; 
}

.log-entry strong { 
  color: var(--accent-gold) !important; 
  display: flex; 
  flex-direction: row-reverse; 
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px; 
  margin-bottom: 4px; 
  font-weight: bold;
}

.log-footer { 
  margin-top: 15px; 
  border-top: 1px solid rgba(184, 134, 11, 0.2); 
  padding-top: 15px; 
}

.side-detail-btn { 
  width: 100%; 
  background: var(--accent-gold); 
  color: #fff; 
  border: none; 
  padding: 8px; 
  cursor: pointer; 
  font-weight: bold; 
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  transition: background 0.3s;
}

.side-detail-btn:hover { background: #d4af37; }

/* --- 【修正】船の top 位置を元の 55% に戻す --- */
#ship { 
  position: fixed; 
  left: 50%; 
  top: 55%; 
  margin-top: -24px; 
  transform: translate(-50%, -50%); 
  font-size: 55px; 
  z-index: 900; 
  pointer-events: auto; 
  cursor: pointer; 
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.3)); 
  animation: shipFloat 3s ease-in-out infinite; 
  transition: left 3s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; 
}

@keyframes shipFloat { 
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); } 
  50% { transform: translate(-50%, -60%) rotate(2deg); } 
}

.vibrating { animation: cuteVibrate 0.15s linear infinite !important; }
@keyframes cuteVibrate { 
  0% { transform: translate(-50%, -50%) rotate(0deg); } 
  25% { transform: translate(-50.8%, -49.2%) rotate(-1.5deg); } 
  50% { transform: translate(-50%, -52%) rotate(1deg); } 
  75% { transform: translate(-49.2%, -50.8%) rotate(1.5deg); } 
  100% { transform: translate(-50%, -50%) rotate(0deg); } 
}

/* --- 【復元】吹き出し基本設定 (bubblePopアニメを含む) --- */
#ship-bubble { 
  position: fixed; left: 50%; top: 48%; 
  background: #fff; border: 2px solid var(--ink); 
  padding: 12px 20px; border-radius: 30px; 
  font-size: 16px; font-weight: bold; opacity: 0; 
  pointer-events: none; z-index: 950; 
  white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
  transform: translate(-50%, -125%) scale(0);
}

#ship-bubble.active { 
  animation: bubblePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bubblePop {
  0% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; }
  60% { transform: translate(-50%, -140%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -125%) scale(1); opacity: 0.9; }
}

#ship-bubble::after { 
  content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); 
  border-width: 10px 10px 0; border-style: solid; border-color: #fff transparent transparent; 
}

/* --- カウンター basic --- */
#ship-year-counter { 
  position: fixed; left: 50%; top: 58.5%; transform: translateX(-50%); 
  font-family: 'Georgia', serif; font-weight: bold; pointer-events: none; z-index: 950; 
  opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; align-items: center; gap: 4px; 
}

#display-year { 
  color: var(--accent-gold); font-size: 22px; 
  text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff; 
}

#display-value { 
  font-size: 14px; color: #fff; background: var(--accent-gold); 
  padding: 4px 12px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); white-space: nowrap; 
}

/* --- メインラッパー --- */
.master-wrapper { 
  display: flex; 
  width: fit-content; 
  height: calc(var(--vh, 1vh) * 100);
  will-change: transform; 
  background-color: var(--map-base); 
  position: relative; 
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease; 
  box-sizing: border-box; 
  border-top: 8px solid var(--ink); 
  border-bottom: 8px solid var(--ink); 
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.5), 
    inset 0 100px 80px -40px var(--shadow-black), 
    inset 0 -100px 80px -40px var(--shadow-black);
  opacity: 0;
}

body.fog-clearing .master-wrapper { opacity: 1; }

.permanent-track { position: absolute; top: 55%; height: 2px; z-index: 4; pointer-events: none; border-top: 1px dashed rgba(62, 39, 35, 0.2); }
.voyage-line { position: absolute; top: 55%; height: 2px; z-index: 5; pointer-events: none; left: 100vw; right: 100vw; background: repeating-linear-gradient(to right, #ccc, #ccc 20px, transparent 20px, transparent 40px); opacity: 0.8; }

.year-tick { position: absolute; top: 55%; width: 1px; height: 8px; background: rgba(62, 39, 35, 0.2); transform: translateY(-50%); z-index: 4; }
.year-tick.five-year { height: 16px; background: rgba(62, 39, 35, 0.4); }

.graph-container { position: absolute; top: 0; left: 100vw; height: 100%; z-index: 1; pointer-events: none; }
.graph-svg { width: 100%; height: 100%; overflow: visible; display: block; stroke-linecap: round; }

.hero, .ending { 
  width: 100vw; 
  height: calc(var(--vh, 1vh) * 100); 
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: 0 20px; box-sizing: border-box; 
}

.hero { background: radial-gradient(circle at center, #1a2a3a, #0a1118); justify-content: flex-start; padding-top: 30vh; }
.ending { background: radial-gradient(circle at center, #0a1118, #000); justify-content: center; }

.back-btn { 
  padding: 15px 50px; background: transparent; color: var(--accent-gold); border: 2px solid var(--accent-gold); font-weight: bold; font-family: 'Hiragino Mincho ProN', serif; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s ease; letter-spacing: 0.15em; border-radius: 0; box-shadow: 0 0 10px rgba(184, 134, 11, 0.2); 
}
.back-btn::before { content: "⚓"; margin-right: 10px; display: inline-block; transition: transform 0.4s ease; }
.back-btn:hover { background: var(--accent-gold); color: #fff; box-shadow: 0 0 25px rgba(184, 134, 11, 0.6); }
.back-btn:hover::before { transform: rotate(360deg); }

.milestone { 
  flex-shrink: 0; 
  height: calc(var(--vh, 1vh) * 100); 
  position: relative; border-right: 1px solid rgba(62, 39, 35, 0.1); z-index: 10; 
}
.milestone.first-item .year-on-line { left: 0; transform: translateY(-50%); }

.reveal-item { opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-item.visible { opacity: 1; }

.year-on-line { 
  position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); 
  background: var(--ink); color: var(--map-base); border: 1px solid var(--accent-gold); 
  padding: 6px 16px; font-weight: bold; font-size: 18px; z-index: 110; white-space: nowrap; 
}

/* --- 【復元】マイルストーン詳細・称号専用バブル基本設定 --- */
.stat-box { 
  position: absolute; left: 50%; transform: translateX(-50%); top: 10vh; 
  display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 20px; 
  background: #fff; border: 1px solid var(--accent-gold); border-radius: 4px; white-space: nowrap; z-index: 120; 
}
.stat-box .stat-value { font-size: 26px; font-weight: 800; }

#ship-bubble.system-bubble {
  background: #fdfaf2;
  border: 3px double var(--accent-gold);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'DotGothic16', sans-serif;
  z-index: 20000;
  padding: 15px 25px;
  box-shadow: 0 0 0 4px #fdfaf2, 0 10px 30px rgba(0,0,0,0.3);
}

#ship-bubble.from-collection {
  transform: translate(-110%, -50%) scale(0);
}
#ship-bubble.from-collection.active {
  transform: translate(-105%, -50%) scale(1);
}

.peek-item { 
  position: absolute; font-size: 45px; bottom: 45px; left: 50%; 
  transform: translate(-50%, 20px); opacity: 0; 
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s; 
}
.peek-item.active { transform: translate(-50%, -15px); opacity: 1; }

/* --- アイコンパルス演出復元 --- */
.collected-icon.pulse {
    animation: iconPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), iconPulseLight 1.5s ease-out !important;
}
@keyframes iconPulseLight {
    0% { filter: brightness(1); transform: scale(1); }
    20% { filter: brightness(2); transform: scale(1.3); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* --- モーダル復元 --- */
.modal-overlay { 
  position: fixed; inset: 0; background: rgba(10, 17, 24, 0.95); 
  display: none; z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(10px); 
}
.modal-content { 
  background: #fdfaf2; 
  border: 2px solid var(--ink); 
  width: 95%; max-width: 600px; height: 85vh; display: flex; flex-direction: column; 
}
.modal-tabs { display: flex; background: rgba(62, 39, 35, 0.05); }
.tab-btn { flex: 1; padding: 15px; border: none; background: none; font-weight: bold; cursor: pointer; color: var(--ink); }
.tab-btn.active { background: #fdfaf2; border-bottom: 3px solid var(--accent-gold); }
.modal-body { 
  flex: 1; overflow-y: auto; padding: 20px; 
  color: var(--ink) !important; 
}
.modal-body strong { 
  color: var(--accent-gold) !important; 
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 1.1em;
}
.close-btn { padding: 15px; background: var(--ink); color: #fff; border: none; cursor: pointer; }

/* --- その他演出 --- */
#lightning-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2000; }
@keyframes flash-anim { 0% { opacity: 0; } 10% { opacity: 0.8; } 20% { opacity: 0.2; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
.lightning-active { animation: flash-anim 0.5s ease-out; }

.glimmer { 
  position: fixed; background: radial-gradient(circle, #ffffff 0%, #f1c40f 40%, rgba(212,175,55,0) 80%); 
  border-radius: 50%; pointer-events: none; z-index: 3000; will-change: opacity; box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.6);
}
@keyframes seaSparkle { 0%, 100% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } }

.ripple { 
  position: fixed; border-bottom: 3px solid var(--ripple-blue); border-radius: 50%; pointer-events: none; z-index: 400; filter: blur(1px); animation: rippleFlow 1.5s ease-out forwards; 
}
@keyframes rippleFlow { from { width: 10px; height: 5px; opacity: 1; transform: translate(-50%, -50%); } to { width: 300px; height: 100px; opacity: 0; transform: translate(-50%, -50%); } }

.reveal-final { opacity: 0; transform: translateY(20px); transition: all 1.5s ease; }
.reveal-final.active { opacity: 1; transform: translateY(0); }

/* --- パフォーマンス最適化 --- */
.master-wrapper, #ship, .cloud-body, .graph-svg, .item-get-popup-instance, .collected-icon {
    will-change: transform;
    backface-visibility: hidden;
}

/* --- 【追加】アイコン獲得時の「ぷよん」演出専用CSS --- */
.item-get-popup-instance {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 11000; /* 船より上 */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
}

.item-get-popup-instance.active {
    transform: translate(-50%, -80%) scale(1.2); /* 船の少し上 */
    opacity: 1;
}

.item-get-icon-wrap {
    font-size: 85px;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9));
}

.item-get-text-wrap {
    font-family: 'DotGothic16', sans-serif;
    color: var(--accent-gold);
    font-size: 22px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 16px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

@keyframes itemBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.item-bounce {
    animation: itemBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ------------------------------------------------- レスポンシブ設定 ----------------------------------------------- */

@media (min-width: 1024px) {
    .chart-group {
        position: relative;
        padding-top: 16px;
    }
    .chart-group::before {
        content: "粗鋼生産量推移 (万t)";
        position: absolute;
        top: 0; left: 0;
        font-family: 'DotGothic16', sans-serif;
        font-size: 10px;
        color: var(--accent-gold);
        font-weight: bold;
        z-index: 100;
        pointer-events: none;
    }
}

@media (max-width: 1023px) {
    #side-log-panel {
        right: 0; bottom: 0; top: auto;
        transform: translateY(100%);
        width: 100%; height: auto;
        padding: 8px 12px 6px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 2px solid var(--accent-gold);
        border-radius: 15px 15px 0 0;
        box-sizing: border-box;
        z-index: 850;
        transition: opacity 0.5s ease, visibility 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #side-log-panel.visible { 
      transform: translateY(0); 
      opacity: 1; 
      visibility: visible; 
    }
    .log-header, .log-body-text, #log-dynamic-text, #mini-trend-label { display: none !important; }
    .log-content-wrapper { display: flex; flex-direction: row; justify-content: space-between; gap: 8px; }
    .chart-group { flex: 0 0 70%; }
    .side-chart-container { height: 70px; background: rgba(255, 255, 255, 0.9); }
    .log-footer { flex: 0 0 25%; display: flex; align-items: stretch; }
    .side-detail-btn { width: 100%; font-size: 10px; padding: 10px 6px; }

    #ship { font-size: 38px; top: 48%; }
    #ship-bubble { top: 41%; font-size: 13px; }
    #ship-year-counter { top: 54%; }
    .year-on-line { font-size: 13px; padding: 4px 10px; }
}

@media (max-width: 768px) {
    .cloud-body { filter: blur(35px); }
    
    #side-log-panel {
        width: 92% !important; 
        height: auto !important; 
        min-height: 90px !important; 
        bottom: 10px !important; 
        left: 50% !important;
        transform: translate(-50%, 120px) !important;
        flex-direction: row !important;
        padding: 5px 12px 2px !important;
        color: var(--ink) !important;
        border-radius: 12px !important;
        border: 2px solid var(--accent-gold) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
        display: flex !important;
        background: rgba(253, 250, 242, 0.85) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
    }

    #side-log-panel.visible {
        transform: translate(-50%, 0) !important;
        opacity: 1 !important;
    }

    .chart-group {
        position: relative;
        padding-top: 14px !important; 
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .chart-group::before {
        content: "粗鋼生産量推移 (万t)";
        position: absolute;
        top: 0; left: 0;
        font-family: 'DotGothic16', sans-serif;
        font-size: 11px !important; 
        font-weight: 800 !important; 
        letter-spacing: 0.05em;
        color: var(--accent-gold);
        z-index: 100;
    }

    .side-chart-container { 
        height: 65px !important; 
        margin-bottom: 2px !important;
        background: transparent !important;
        position: relative;
        overflow: visible !important;
    }

    .log-footer {
        flex: 0 0 90px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
    .side-detail-btn { 
        height: 55px !important; 
        font-size: 11px !important; 
        border-radius: 6px;
    }

    #collection-container {
        position: fixed !important; 
        right: 12px !important; 
        top: 10% !important; 
        width: 44px !important; 
        max-height: 60vh !important;
        flex-direction: column !important; 
        align-items: center !important;
        background: rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 22px !important;
        padding: 8px 0 !important;
        display: flex !important;
        z-index: 1000 !important; 
        gap: 2px !important;
    }

    #scroll-hint { width: 85% !important; max-width: 320px; padding: 20px 10px !important; top: 42% !important; }
    #scroll-hint div { font-size: 16px !important; }
    .hero { padding-top: 15vh !important; }
    .collected-icon { font-size: 22px !important; margin: 1px 0 !important; }
    #ship { font-size: 60px !important; top: 50% !important; }
    #ship-bubble { top: 39% !important; font-size: 14px !important; max-width: 75vw !important; }
    #ship-year-counter { top: 58% !important; }
    .permanent-track, .voyage-line, .year-tick, .year-on-line { top: 50% !important; }

    .stat-box { 
        top: 6vh !important; 
        transform: translateX(-50%) scale(1.0) !important; 
        min-width: 180px !important; 
        padding: 6px 15px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 6px !important;
        flex-direction: column !important;
        gap: 2px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    .stat-box .stat-label { font-size: 10px !important; opacity: 0.8; }
    .stat-box .stat-value { font-size: 22px !important; line-height: 1.1 !important; }
    .stat-box .stat-period { font-size: 9px !important; opacity: 0.7; }

    #ship-bubble.system-bubble.from-collection {
        border: 1.5px solid var(--accent-gold) !important; 
        padding: 8px 15px !important;
        background: #fdfaf2 !important;
        border-radius: 4px !important; 
        right: 75px !important; 
    }
    #ship-bubble.system-bubble.from-collection.active {
      transform: translate(0, -50%) scale(1) !important;
      opacity: 1 !important;
    }
    #ship-bubble.system-bubble.from-collection::after {
        content: "▶" !important;
        position: absolute !important;
        right: -9px !important; 
        top: 50% !important;
        transform: translateY(-50%) scaleY(1.2) !important; 
        color: var(--accent-gold) !important;
        background: transparent !important;
        border: none !important; 
        font-size: 14px !important;
        text-shadow: 1px 0 0 #fdfaf2; 
    }
    #ship-bubble.system-bubble.from-collection::before {
      display: none !important;
    }

    #mini-tooltip {
      position: absolute;
      background: var(--accent-gold);
      color: #fff;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      pointer-events: none;
      transform: translate(-50%, -100%); 
      white-space: nowrap;
      z-index: 20;
      transition: left 0.1s linear, top 0.1s linear;
      opacity: 0;
    }
    #mini-tooltip.below {
      transform: translate(-50%, 0); 
    }
    #mini-tooltip::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 50%; transform: translateX(-50%);
      border-width: 4px 4px 0; border-style: solid;
      border-color: var(--accent-gold) transparent transparent;
    }
    #mini-tooltip.below::after {
      bottom: auto;
      top: -4px; 
      border-width: 0 4px 4px;
      border-color: transparent transparent var(--accent-gold);
    }

    .mobile-only-info {
      position: absolute;
      top: 2px; left: 6px;
      z-index: 100;
      pointer-events: none;
    }
    #mini-year-display {
      font-family: 'DotGothic16', sans-serif;
      font-size: 11px !important;
      color: var(--accent-gold);
      font-weight: bold;
      z-index: 20 !important;
      position: relative;
      text-shadow: 1px 1px 0 #fdfaf2, -1px -1px 0 #fdfaf2, 1px -1px 0 #fdfaf2, -1px 1px 0 #fdfaf2, 0 0 4px #fdfaf2;
      opacity: 0.9 !important;
    }

    #ship, .master-wrapper, .ocean-bg, .fog-overlay, .milestone, .stat-box {
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }
    
    .modal-body .log-media-box {
        width: 60% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .modal-body .log-entry-img {
        width: 100% !important; 
        height: auto !important;
        border-radius: 6px !important;
    }

    .modal-body .image-caption {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-top: 8px !important;
    }
}

/* 読取モード：背景を少し暗くし、セピア調にしてテキストを際立たせる */
.reading-focus {
    filter: sepia(0.5) brightness(0.7) contrast(1.1) !important;
    transition: filter 0.8s ease-in-out; /* ふわっと切り替える */
}

/* 通常時（移動中）のトランジションも設定しておく */
.master-wrapper {
    /* 既存のプロパティは維持 */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease, filter 0.8s ease-in-out;
}

@media (max-width: 1023px) {
    .story-phrase {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        border-width: 1px !important;
    }
}

/* --- 苦難の航海：不規則な震え --- */
@keyframes hardVoyageVibration {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  20% { transform: translate(-52%, -51%) rotate(-2deg); }
  40% { transform: translate(-48%, -49%) rotate(2deg); }
  60% { transform: translate(-51%, -52%) rotate(-1deg); }
  80% { transform: translate(-49%, -48%) rotate(1deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.hard-voyage {
  animation: hardVoyageVibration 0.2s linear infinite !important;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4)) !important; /* ほのかに赤く光る */
}

/* ミニチャートの点の色を変化させるためのクラス */
.point-warning { fill: #ff4444 !important; stroke: #ff0000 !important; }
.point-success { fill: #f1c40f !important; stroke: #b8860b !important; }

/* --- style.css の @media (max-width: 768px) 内にある #collection-container を修正 --- */

@media (max-width: 768px) {
    #collection-container {
        position: fixed !important; 
        right: 12px !important; 
        top: 10% !important; 
        width: 44px !important; 
        max-height: 60vh !important;
        flex-direction: column !important; 
        align-items: center !important;
        background: rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 22px !important;
        padding: 8px 0 !important;
        display: flex !important;
        z-index: 1000 !important; 
        gap: 2px !important;

        /* --- ここを追加：アニメーションの設定 --- */
        opacity: 0;
        visibility: hidden;
        transform: translateX(20px); /* 少し右に引っ込めておく */
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- ここを追加：表示時の状態 --- */
    #collection-container.visible {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
            .modal-body img {
                max-width: 50% !important; /* 横幅を50%に制限 */
                height: auto !important;    /* 比率は維持 */
                display: block;
                margin: 20px auto;          /* 中央寄せ */
            }
        }