/* ──────────────────────────────────────────────
   🎮 Classic Dragon Quest UI - 100% Authentic Style
   ────────────────────────────────────────────── */

:root {
  --dq-bg: #000000;
  --dq-frame-border: #ffffff;
  --dq-win-bg: #001464;
  --dq-win-bg-dark: #000a38;
  --dq-gold: #f8e040;
  --dq-green: #50e050;
  --dq-cyan: #38c0f8;
  --dq-red: #ff4444;
  --dq-text: #ffffff;
  --dq-muted: #b0c0e8;
  --dq-card-bg: #001868;
  --dq-card-hover: #002488;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation; /* スマホの勝手な拡大ズームを完全防止 */
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--dq-bg);
  color: var(--dq-text);
  font-family: 'DotGothic16', 'MS Gothic', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.game-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 4px 8px;
  gap: 4px;
  touch-action: manipulation;
}

/* ── Common DQ Window Box (白枠 ＋ 濃紺中身) ── */
.dq-window-frame {
  background: var(--dq-frame-border);
  padding: 2px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}

.dq-window-inner {
  background: var(--dq-win-bg);
  flex: 1;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 1. Retro RPG Split Top Bar ── */
.rpg-top-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex-shrink: 0;
  width: 100%;
}

.top-inner-adjust {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px !important;
  min-height: 48px;
}

.rpg-info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
}

.rpg-floor-txt {
  color: var(--dq-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.rpg-char-name {
  color: #ffffff;
}

.rpg-lv-label {
  color: var(--dq-gold);
  margin-left: 8px;
}

.rpg-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
}

.rpg-stat-lbl {
  font-size: 11px;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 1px;
}
.hp-lbl { color: #ffffff; background: var(--dq-red); }
.mp-lbl { color: #ffffff; background: var(--dq-cyan); }

.rpg-stat-val {
  color: #ffffff;
  min-width: 50px;
  font-family: 'DotGothic16', monospace;
}

.rpg-gold-txt {
  color: var(--dq-gold);
}

.btn-dq-menu-bag {
  background: #001868;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 0 1px #000000;
}

.btn-dq-menu-bag:hover {
  background: #002888;
  color: var(--dq-gold);
  border-color: var(--dq-gold);
}

/* どうぐメニューモーダル用スタイル */
.menu-bag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.menu-bag-item {
  text-align: left !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  width: 100%;
}

/* ── 2. 3D Dungeon Canvas ── */
.dungeon-window-outer {
  background: #ffffff;
  padding: 2px;
  border-radius: 2px;
  height: 180px;
  flex-shrink: 0;
}

.dungeon-canvas-wrap {
  width: 100%;
  height: 100%;
  background: #000000;
  overflow: hidden;
}

#dungeon-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 3. Classic 3-Split Battle Section (ドラクエ伝統 3分割) ── */
.classic-battle-section {
  display: grid;
  grid-template-columns: 5fr 3fr 5fr;
  gap: 4px;
  height: 140px;
  flex-shrink: 0;
}

/* 3.1 Message Window */
.msg-inner {
  position: relative;
  justify-content: flex-start;
  overflow-y: auto;
}

.msg-text {
  font-size: 13px;
  line-height: 1.5;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: 120px;
}

.msg-prompt {
  align-self: flex-end;
  color: var(--dq-gold);
  font-size: 12px;
  animation: blink 0.8s infinite;
  position: absolute;
  bottom: 4px;
  right: 6px;
}

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

/* 3.2 Commands Window */
.cmd-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px 6px;
  gap: 2px;
  overflow-y: auto;
}ustify-content: space-around;
  padding: 4px 6px;
}

.cmd-item {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
  border-radius: 2px;
}

.cmd-item:hover, .cmd-item.active {
  background: #002888;
  color: var(--dq-gold);
}

.cmd-item.active .cmd-cursor {
  color: var(--dq-gold);
}

.cmd-cursor {
  font-size: 12px;
  width: 14px;
}

/* 3.3 Status Window */
.status-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 8px;
}

.status-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #182878;
  padding-bottom: 2px;
}

.chappy-name {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
}

.chappy-lv {
  font-size: 12px;
  font-weight: bold;
  color: var(--dq-gold);
}

.status-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bar-name {
  font-size: 11px;
  font-weight: bold;
  min-width: 28px;
}

.hp-name { color: #ff6666; }
.mp-name { color: #38c0f8; }
.exp-name { color: var(--dq-gold); }

.mini-bar-bg {
  flex: 1;
  height: 6px;
  background: #000828;
  border: 1px solid #203888;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  transition: width 0.2s ease;
}

.hp-fill { background: #ff3344; }
.mp-fill { background: #0099ff; }
.exp-fill { background: #f8e040; }

.bar-num {
  font-size: 10px;
  font-weight: bold;
  min-width: 55px;
  text-align: right;
}

.mini-boss-line {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #200008;
  border: 1px solid #550018;
  padding: 2px 4px;
  border-radius: 2px;
}

.mini-boss-tag {
  font-size: 10px;
  color: #ff8888;
  font-weight: bold;
}

.mini-boss-name {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.mini-boss-bar-bg {
  flex: 1;
  height: 5px;
  background: #100000;
  border: 1px solid #440000;
  overflow: hidden;
}

.mini-boss-bar-fill {
  height: 100%;
  background: #ff2222;
  transition: width 0.3s ease;
}

/* ── 4. Main ToDo Quest Board (3 Columns) ── */
.todo-board-section {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 4px;
  min-height: 250px;
  overflow: hidden;
}

.todo-col-frame {
  height: 100%;
}

.todo-col-inner {
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 4px;
}

.col-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dq-win-bg-dark);
  padding: 4px 6px;
  border-bottom: 1px solid #203478;
}

.col-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--dq-gold);
}

.col-count-badge {
  font-size: 10px;
  background: #182868;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #283c88;
}

.col-input-form {
  background: var(--dq-win-bg-dark);
  padding: 4px;
  border: 1px solid #1c2c68;
  border-radius: 2px;
}

.input-line {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dq-input {
  background: #000820;
  border: 1px solid #283c88;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
  border-radius: 2px;
}

.dq-input:focus {
  border-color: var(--dq-gold);
}

.task-text-inp {
  flex: 1;
}

.task-due-inp {
  width: 80px;
}

.dq-btn-mini {
  background: #001868;
  border: 1px solid #384c98;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.dq-btn-mini:hover {
  background: #002888;
  border-color: var(--dq-gold);
}

.add-btn {
  color: var(--dq-green);
  border-color: var(--dq-green);
}

.task-scroll-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 2px;
}

/* Task Item Card */
.task-item-card {
  background: var(--dq-card-bg);
  border: 1px solid #1c2c68;
  border-radius: 2px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.1s ease;
}

.task-item-card:hover {
  background: var(--dq-card-hover);
  border-color: var(--dq-gold);
}

.task-item-card.done {
  opacity: 0.55;
  background: #000c28;
  border-color: #101c40;
}

.task-item-card.done .task-title {
  text-decoration: line-through;
  color: #8898b8;
}

.task-card-main {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.task-checkbox {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--dq-gold);
  width: 14px;
  height: 14px;
}

.task-title {
  flex: 1;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.task-card-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  padding-left: 20px;
}

.task-monster-tag {
  color: var(--dq-cyan);
}

.task-due-tag {
  color: #ffa040;
}

.task-del-btn {
  background: transparent;
  border: none;
  color: #8898b8;
  cursor: pointer;
  font-size: 11px;
}

.task-del-btn:hover {
  color: var(--dq-red);
}

/* ── 5. Mobile Navigation (Hidden on PC) ── */
.mobile-nav-bar {
  display: none;
  background: #080814;
  border-top: 1px solid #282838;
  padding: 4px;
  gap: 4px;
  flex-shrink: 0;
}

.m-nav-btn {
  flex: 1;
  background: #141828;
  border: 1px solid #283858;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 2px;
  border-radius: 2px;
  cursor: pointer;
}

.m-nav-btn.active {
  background: #001464;
  border-color: var(--dq-gold);
  color: var(--dq-gold);
}

/* ── 6. Modals (Classic DQ Style) ── */
.hidden {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-frame {
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
}

.modal-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 10px 12px;
}

.modal-header-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--dq-gold);
  text-align: center;
  border-bottom: 1px solid #283c88;
  padding-bottom: 4px;
}

.sound-top-ctrl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dq-btn-dialog {
  background: #001868;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.dq-btn-dialog:hover {
  background: #002888;
  border-color: var(--dq-gold);
}

.close-main-btn {
  background: #203060;
  padding: 6px 24px;
}

.vol-slider-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vol-lbl { font-size: 11px; color: var(--dq-muted); }

.auto-adapt-box {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(80, 224, 80, 0.1);
  padding: 6px 8px;
  border: 1px solid rgba(80, 224, 80, 0.4);
  border-radius: 2px;
  cursor: pointer;
}

.auto-adapt-text {
  font-size: 11px;
  font-weight: bold;
  color: var(--dq-green);
  line-height: 1.3;
}

.auto-adapt-text small {
  font-size: 9px;
  color: var(--dq-muted);
  font-weight: normal;
}

.dialog-sub-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--dq-muted);
}

.track-picker-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.track-item-row {
  background: #000c30;
  border: 1px solid #1c2c68;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.track-item-row:hover {
  background: #001868;
  border-color: var(--dq-gold);
}

.track-t-name { font-size: 11px; font-weight: bold; color: var(--dq-gold); }
.track-t-desc { font-size: 9px; color: var(--dq-muted); }

.se-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.se-btn {
  padding: 4px 6px;
  font-size: 10px;
}

.modal-close-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Shop Modal */
.uber-gold-status {
  font-size: 12px;
  font-weight: bold;
  color: var(--dq-gold);
  background: #000c30;
  padding: 4px 8px;
  border-radius: 2px;
}

.shop-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-row {
  background: #001868;
  border: 1px solid #283c88;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.shop-row-name { font-size: 12px; font-weight: bold; color: #ffffff; }
.shop-row-desc { font-size: 10px; color: var(--dq-muted); }

/* Calendar Modal */
.cal-frame { max-width: 350px; }
.cal-quick-bar { display: flex; gap: 3px; }
.cal-q-btn {
  flex: 1;
  background: #001868;
  border: 1px solid #283c88;
  color: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  padding: 4px;
  cursor: pointer;
}
.cal-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-nav-btn {
  background: #001868;
  border: 1px solid #283c88;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
}
.cal-month-txt { font-size: 12px; font-weight: bold; color: var(--dq-gold); }
.cal-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.cal-d-cell {
  padding: 5px 2px;
  font-size: 11px;
  background: #000c30;
  border: 1px solid #142050;
  cursor: pointer;
}
.cal-d-cell.head {
  background: transparent;
  border: none;
  font-weight: bold;
  color: var(--dq-gold);
  cursor: default;
}
.cal-d-cell.today { border-color: var(--dq-green); }
.cal-d-cell.selected { background: var(--dq-gold); color: #000000; font-weight: bold; }

/* Guide & Save Modal */
.guide-content { font-size: 11px; line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.save-desc { font-size: 11px; line-height: 1.5; color: var(--dq-muted); }
.save-btn-row { display: flex; flex-direction: column; gap: 6px; }

/* ── 7. Responsive Mobile Styles ── */
@media (max-width: 768px) {
  body { overflow-y: auto; }
  .game-container { height: auto; min-height: 100vh; padding-bottom: 75px; }
  .top-bar { flex-wrap: wrap; padding: 6px 8px; gap: 4px; }
  .top-actions { gap: 3px; flex-wrap: wrap; }
  .btn-dq { font-size: 11px; padding: 4px 6px; min-height: 28px; }
  .gold-badge { font-size: 11px; padding: 4px 6px; }
  .progress-wrap { display: none; }

  /* スマホ版HP/MP簡易ステータス */
  .mobile-status-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    background: #000c30;
    border: 1px solid #203888;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'DotGothic16', monospace;
  }
  .m-hp-val { color: #ff6666; }
  .m-mp-val { color: #38c0f8; }
  .m-lv-val { color: var(--dq-gold); }

  /* ⚔️ スマホ専用：7対3の横並びバトルウィンドウ (説明メッセージ 7 : コマンド 3) */
  .classic-battle-section {
    display: grid;
    grid-template-columns: 7.2fr 2.8fr;
    gap: 4px;
    height: 155px;
    transition: grid-template-columns 0.2s ease;
  }

  /* 🪄 魔法選択時はコマンド欄を 3.5対6.5 に広げ、押しやすく＆見やすくする */
  body.magic-active .classic-battle-section {
    grid-template-columns: 3.5fr 6.5fr;
  }

  .msg-frame {
    grid-column: 1 / 2;
    height: 100%;
  }

  .msg-text {
    font-size: 12px;
    line-height: 1.45;
  }

  .cmd-frame {
    grid-column: 2 / 3;
    height: 100%;
  }

  .cmd-item {
    font-size: 11px;
    padding: 3px 2px;
    min-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cmd-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cmd-cursor {
    font-size: 10px;
    width: 10px;
    flex-shrink: 0;
  }

  .status-frame {
    display: none;
  }

  .dungeon-window-outer { height: 180px; }
  .todo-board-section { grid-template-columns: 1fr; height: auto; gap: 8px; }
  
  /* スマホ専用の押しやすいタスク入力フォーム（2段構成） */
  .col-input-form {
    padding: 6px;
  }

  .input-line {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .dq-input {
    font-size: 15px; /* iOS Safariの自動ズーム防止 */
    padding: 8px 10px;
    min-height: 38px;
    width: 100%;
    box-sizing: border-box;
  }

  .form-bottom-row, .input-bottom-actions {
    display: flex;
    gap: 6px;
    width: 100%;
  }

  .dq-btn-mini {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 38px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .task-scroll-list { max-height: 280px; }
}

/* 💾 オートセーブ通知トースト */
.save-toast {
  position: fixed;
  top: 12px;
  right: 12px;
  background: #002888;
  border: 2px solid var(--dq-gold);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.save-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ⚙️ つよさ・そうび詳細モーダル用スタイル */
.status-detail-section {
  display: flex;
  gap: 12px;
  background: #000c30;
  border: 1.5px solid #283c88;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000;
  margin-bottom: 12px;
}

.status-detail-left {
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #182858;
  padding-right: 8px;
}

.status-detail-name {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  margin-top: 6px;
  text-align: center;
}

.status-detail-job {
  font-size: 9px;
  color: #8898b8;
  text-align: center;
  margin-top: 2px;
  line-height: 1.3;
}

.status-detail-right {
  width: 58%;
  display: flex;
  align-items: center;
}

.status-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.status-detail-table th {
  text-align: left;
  font-size: 11px;
  color: #8898b8;
  padding: 4px 2px;
  border-bottom: 1px solid #142048;
}

.status-detail-table td {
  text-align: right;
  font-size: 11px;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 2px;
  border-bottom: 1px solid #142048;
  font-family: 'DotGothic16', monospace;
}

/* 🗡️ 装備品セクション */
.equip-section {
  background: #000c30;
  border: 1.5px solid #283c88;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000;
}

.equip-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--dq-gold);
  margin-bottom: 6px;
  border-bottom: 1px solid #283c88;
  padding-bottom: 4px;
}

.equip-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.equip-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.eq-slot {
  color: #8898b8;
}

.eq-val {
  color: #ffffff;
  font-weight: bold;
}