/*
 * 箱庭諸島 画面スタイル。
 * lib/Hako/Const.pm 「外見関係」(FONT COLOR / BGCOLOR) の設定を CSS クラスへ移植する。
 * 対応する Perl 側の変数名をコメントに残す。
 * 方針 (tmp/15-ng-words-and-mobile.md「スマートフォン対応 UI」): 見た目は Perl 版に揃え、
 * ボタン/input/select は既定スタイルのまま。追加するのはスマートフォンの幅で操作できる
 * ための最小限のみ (viewport, 地図の縮小, 表の横スクロール, 開発画面の縦積み, 16px 入力欄)。
 */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  /* Perl 版 $htmlBody = 'BGCOLOR="#EEFFFF"' */
  background-color: #eeffff;
  color: #000000;
  margin: 8px;
  /* 配布元 URL やコメント・ログ中の長い ASCII 文字列が折り返せず画面幅をはみ出すのを防ぐ
     (日本語の通常の折り返しには影響しない)。 */
  overflow-wrap: anywhere;
}

a {
  color: inherit;
}

hr {
  margin: 12px 0;
}

.distribution-link {
  font-size: 0.85em;
  margin: 4px 0;
}

.footer {
  font-size: 0.9em;
}

/* ==================== ナビゲーション ==================== */

/* リンク群を折り返し可能にするだけ (装飾なし)。 */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 4px 0;
}

/* サイトタイトル「箱庭諸島２」(Perl 版 $HtagTitle_ = FONT SIZE=7 COLOR="#8888ff")。
   ページ内の見出し重複を避けるため、サイト名はここ 1 箇所のみに表示する。 */
.nav-title {
  font-size: 1.6em;
  font-weight: bold;
  color: #8888ff;
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.nav-links form.nav-logout {
  display: inline;
  margin: 0;
}

/* ==================== テーブル ==================== */

/* テーブルは border 付き。 */
table {
  border-collapse: collapse;
  margin: 8px 0;
}

table th,
table td {
  border: 1px solid #333333;
  padding: 2px 6px;
}

/* 幅の広い表 (順位表、島情報、掲示板、管理画面の表) を横スクロール可能にする。 */
.table-scroll {
  overflow-x: auto;
}

/* 順位表における見出し (Perl 版 $HtagTH_ / $HbgTitleCell)。 */
th {
  background-color: #ccffcc;
  color: #c00000;
  font-weight: bold;
  white-space: nowrap;
}

/* 島の名前など (Perl 版 $HtagName_)。 */
.island-name {
  color: #a06040;
  font-weight: bold;
}

/* 放置島の薄くなった島の名前 (Perl 版 $HtagName2_)。 */
.island-name-faded {
  color: #808080;
  font-weight: bold;
}

/* 順位の番号 (Perl 版 $HtagNumber_ / $HbgNumberCell)。 */
.rank-cell {
  background-color: #ccffcc;
  color: #800000;
  font-weight: bold;
  text-align: center;
}

/* 開発計画の名前 (Perl 版 $HtagComName_)。 */
.command-name {
  color: #d08000;
  font-weight: bold;
}

/* 災害名 (Perl 版 $HtagDisaster_)。 */
.disaster {
  color: #ff0000;
  font-weight: bold;
}

/* ローカル掲示板、観光者の書いた文字 (Perl 版 $HtagLbbsSS_)。 */
.lbbs-visitor {
  color: #0000ff;
  font-weight: bold;
}

/* ローカル掲示板、島主の書いた文字 (Perl 版 $HtagLbbsOW_)。 */
.lbbs-owner {
  color: #ff0000;
  font-weight: bold;
}

/* 順位表: 島名/情報セル (Perl 版 $HbgNameCell / $HbgInfoCell)。 */
.rank-table td,
.info-table td {
  background-color: #ccffff;
}

/* 順位/コメント欄はセル背景を上書き (Perl 版 $HbgNumberCell / $HbgCommentCell)。 */
.rank-table td.rank-cell,
.info-table td.rank-cell {
  background-color: #ccffcc;
}

.comment-cell {
  background-color: #ccffcc;
}

/* 開発計画: フォーム/地図/計画一覧セル (Perl 版 $HbgInputCell / $HbgMapCell / $HbgCommandCell)。 */
td.input-cell,
td.map-cell,
td.command-cell {
  background-color: #ccffcc;
  vertical-align: top;
}

/* 大きい文字 (Perl 版 $HtagBig_)。 */
.big {
  font-size: 1.6em;
}

.notice {
  margin: 8px 0;
}

.error {
  color: #ff0000;
}

.backup-row {
  border: 1px solid #999999;
  padding: 8px;
  margin: 8px 0;
}

/* ==================== 地図 ==================== */

/* 地図: 画像を隙間なく並べる。480px 以下ではセルを縮小する。 */
.map {
  --cell: 32px;
  white-space: nowrap;
  line-height: 0;
  overflow-x: auto;
}

.map img {
  vertical-align: top;
  border: 0;
}

.map-row {
  white-space: nowrap;
  line-height: 0;
  font-size: 0;
}

.map img.cell {
  width: var(--cell);
  height: var(--cell);
}

.map img.space {
  width: calc(var(--cell) / 2);
  height: var(--cell);
}

.map img.xbar {
  width: calc(var(--cell) * 12.5);
  height: calc(var(--cell) / 2);
}

@media (max-width: 480px) {
  .map {
    --cell: 26px;
  }
}

/* 地図上の 1 ヘックス (owner モードのみ <a> でラップされる。owner.js が data-x/data-y を拾う)。 */
a.map-cell {
  display: inline-block;
  line-height: 0;
}

a.map-cell img {
  border: 0;
}

/* ==================== 開発画面 (計画フォーム / 地図 / 計画一覧) ==================== */

/* 900px 以上: Perl 版どおり横並び (フォーム / 地図 / 計画一覧)。
   900px 未満: 縦積み。地図 → 計画フォーム → 計画一覧の順に並べ替える。 */
.owner-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.owner-map-col,
.owner-form-col,
.owner-commands-col {
  /* flex item の自動最小幅 (内容の min-content) がビューポート幅を超えて
     ページ全体を横に広げるのを防ぐ。 */
  min-width: 0;
  max-width: 100%;
}

.owner-map-col {
  order: 1;
}

.owner-form-col {
  order: 2;
}

.owner-commands-col {
  order: 3;
}

@media (min-width: 900px) {
  .owner-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .owner-form-col {
    order: 1;
  }

  .owner-map-col {
    order: 2;
  }

  .owner-commands-col {
    order: 3;
    flex: 1;
  }
}

.command-number {
  color: #800000;
  font-weight: bold;
  text-decoration: none;
}

.log-list,
.history-list {
  line-height: 1.4;
}

.log-turn {
  font-weight: bold;
}

.log-secret {
  font-weight: bold;
}

/* ==================== フォーム ==================== */

/* size="80" 等の幅指定が画面幅を超えてページ全体を横に広げるのを防ぐ。
   size 属性自体は残したまま、表示上の最大幅だけを画面内に収める。 */
input[type="text"],
input[type="email"],
input[type="datetime-local"],
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}

form {
  max-width: 100%;
}

/* iOS の自動ズーム防止 (16px)。それ以外のサイズ・高さは触らない。 */
@media (max-width: 480px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}