/* =============================================================
   Minecraft 運営ポータル — Minecraft 世界観デザイン
   フォント: Press Start 2P (見出し/UI) + DotGothic16 (本文/日本語)
   ============================================================= */

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

:root {
  /* ヘッダー用: 薄いピンク & 白 */
  --pink:        #f3b6cf;
  --pink-light:  #f9d4e3;
  --pink-dark:   #d98bb0;
  --pink-deep:   #c06d96;
  --white:       #ffffff;

  /* 本文用: Minecraft アースカラー */
  --grass:       #5d9c3c;
  --grass-light: #7cb342;
  --grass-dark:  #3e6b28;
  --dirt:        #6b4a2f;
  --dirt-dark:   #4a3220;
  --stone:       #9a9a9a;
  --stone-dark:  #6e6e6e;
  --sand:        #e8dcb5;

  --bg:          #141b24;
  --panel:       #3a2d20;      /* 土/木パネル */
  --panel-light: #4d3c2a;
  --text:        #f4efe4;
  --muted:       #b2a68c;
  --danger:      #c0392b;
  --danger-bg:   #3a1f1a;
  --warn:        #d4a63c;
  --warn-bg:     #332a16;
  --ok:          #5d9c3c;
  --ok-bg:       #1e2e18;

  /* 地層グラデーション用 (空→地表→土→石→洞窟) */
  --layer-sky:   #4a8fd4;   /* Minecraft の空 */
  --layer-sky2:  #6ba8dd;
  --layer-dirt:  #4a3220;   /* 土の層 */
  --layer-stone: #3a3a3f;   /* 石の層 */
  --layer-cave:  #0d0d12;   /* 洞窟/深層 */

  --sky:         #2a3a4a;
  --sky-deep:    #16202c;

  --border-light: #5a4a36;
  --border-dark:  #1a1510;
}

body {
  /* Minecraft の昼の空 (上が濃く下が明るいグラデ) */
  background:
    linear-gradient(180deg, #6a9bf0 0%, #8bb6f5 45%, #a9cdf8 70%, #c3dcfa 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", sans-serif;
  min-height: 100vh;
  padding: 36px 16px 220px;   /* 下部の地面ぶんの余白 */
  line-height: 1.7;
  position: relative;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

/* 空に浮かぶ Minecraft 風の四角い雲 (固定) */
body::before {
  content: "";
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: -2;
  background-image:
    /* 雲1 */
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
    /* 雲2 */
    linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
    /* 雲3 */
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85));
  background-repeat: no-repeat;
  background-size: 140px 40px, 90px 28px, 110px 32px;
  background-position: 8% 10px, 62% 48px, 34% 70px;
}

/* 画面下部に固定された地面 (草ブロック + 土ブロック) */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  pointer-events: none;
  z-index: -1;
  background:
    /* 下にいくほど濃くなる暗がり (一番下が最も濃い) */
    linear-gradient(180deg,
      transparent 0,
      transparent 44px,
      rgba(0,0,0,0.05) 60px,
      rgba(0,0,0,0.35) 140px,
      rgba(0,0,0,0.6) 200px),
    /* 草ブロック上面の明暗ムラ (上から 40px) */
    repeating-linear-gradient(90deg,
      #6cb33f 0 16px, #63a438 16px 32px),
    /* 土ブロックの斑点テクスチャ */
    radial-gradient(rgba(0,0,0,0.18) 2px, transparent 2px),
    radial-gradient(rgba(120,80,45,0.5) 2px, transparent 2px),
    /* 草の緑帯(上) + 土の茶(下) のベース */
    linear-gradient(180deg,
      #5d9c3c 0,
      #5d9c3c 36px,
      #4a7a2e 36px 44px,     /* 草と土の境目の影 */
      #6b4a2f 44px 100%);
  background-size:
    100% 100%,     /* 暗がりグラデ */
    32px 36px,     /* 草の縦ストライプ */
    16px 16px,     /* 土の斑点1 */
    16px 16px,     /* 土の斑点2 */
    100% 100%;     /* ベース */
  background-position:
    0 0,
    0 0,
    0 44px,
    8px 52px,
    0 0;
  background-repeat: no-repeat, repeat-x, repeat, repeat, no-repeat;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.15);
}

/* 地面の上にかける、ぼかした暗がり (下ほど濃い) */
.ground-haze {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg,
    transparent 0,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.55) 100%);
  /* ソフトに滲ませる */
  filter: blur(10px);
  image-rendering: auto;
}

.container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- ピクセル枠パネル (Minecraft の GUI 風、擬似ベベル) ---- */
.panel {
  /* 土ブロック風の微細なドットテクスチャ + ベース色 */
  background-color: var(--panel);
  background-image:
    radial-gradient(rgba(0,0,0,0.14) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 var(--border-light),
    inset -2px -2px 0 var(--border-dark),
    0 6px 0 rgba(0, 0, 0, 0.35);
  padding: 20px;
  margin-bottom: 18px;
}

/* ---- ヘッダー ---- */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.brand-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  /* ピンク(上) + 白(下) のブロック風 */
  background:
    linear-gradient(var(--pink) 0 32%, var(--pink-dark) 32% 40%, var(--white) 40% 100%);
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.4),
    inset -2px -2px 0 rgba(0, 0, 0, 0.15);
}

.brand-title {
  font-family: "Press Start 2P", monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--border-dark);
  letter-spacing: 0;
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--pink);
  margin-top: 4px;
}

/* ---- カードタイトル ---- */
.card-title {
  font-family: "Press Start 2P", monospace;
  font-size: 0.6rem;
  color: var(--sand);
  text-shadow: 1px 1px 0 var(--border-dark);
  margin-bottom: 16px;
  letter-spacing: 0;
}

/* ---- サーバーステータス ---- */
.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
}

.dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--border-dark);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25);
}

.dot-online  { background: var(--grass-light); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), 0 0 8px var(--grass); }
.dot-offline { background: var(--danger); }
.dot-unknown { background: var(--warn); }

#mc-status-text { font-family: "Press Start 2P", monospace; font-size: 0.72rem; }

#mc-checked {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 12px;
}

/* ---- Discord ユーザー表示 (アバター) ---- */
.user-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 3px solid var(--border-dark);
  box-shadow: inset 2px 2px 0 var(--border-light);
  image-rendering: auto;        /* アバターは滑らかに */
  background: var(--panel-light);
  object-fit: cover;
}

.user-name {
  font-size: 1.05rem;
  color: var(--text);
}

.user-tag {
  font-size: 0.75rem;
  color: var(--grass-light);
  margin-top: 2px;
}

/* ---- バッジ ---- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.72rem;
  border: 2px solid var(--border-dark);
}

.badge-pending { background: var(--warn-bg);   color: var(--warn); }
.badge-applied { background: var(--ok-bg);     color: var(--grass-light); }
.badge-failed  { background: var(--danger-bg); color: var(--danger); }

/* ---- 入力 ---- */
label {
  display: block;
  font-size: 0.82rem;
  color: var(--sand);
  margin-bottom: 8px;
}

input[type="text"] {
  width: 100%;
  background: #15110d;
  border: 3px solid var(--border-dark);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
  padding: 12px 14px;
  color: var(--text);
  font-family: "DotGothic16", sans-serif;
  font-size: 0.95rem;
  outline: none;
}

input[type="text"]:focus {
  border-color: var(--grass);
}

/* ---- ボタン (Minecraft の石ボタン風) ---- */
button,
button,
.discord-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  font-family: "Press Start 2P", monospace;
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.08s, transform 0.08s;
}

button:active:not(:disabled),
.discord-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.2),
    inset -2px -2px 0 rgba(255, 255, 255, 0.2);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* プライマリ: Discord ログイン / 登録ボタン (草ブロック色) */
.discord-btn,
#register-btn {
  background: var(--grass);
  color: var(--text);
  text-shadow: 1px 1px 0 var(--grass-dark);
}

.discord-btn:hover,
#register-btn:hover:not(:disabled) {
  background: var(--grass-light);
}

/* セカンダリ: ログアウト (石ブロック色、控えめ) */
.btn-secondary {
  background: var(--stone);
  color: #1f1a14;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 0.58rem;
}

.btn-secondary:hover:not(:disabled) {
  background: #b0b0b0;
}

/* ---- メッセージ ---- */
.msg {
  margin-top: 12px;
  font-size: 0.85rem;
  min-height: 1.2em;
  line-height: 1.6;
}

.msg-error   { color: var(--danger); }
.msg-success { color: var(--grass-light); }

.helper {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 12px;
  line-height: 1.6;
}

/* ---- エラーバナー ---- */
.error-banner {
  display: none;
  background: var(--danger-bg);
  border: 3px solid var(--danger);
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #f0c0b8;
  font-size: 0.85rem;
  line-height: 1.7;
}

#section-portal { display: none; }

/* ---- メニューボタン (スマホ用三点) ---- */
.menu-btn {
  display: none;        /* デスクトップでは非表示 */
  width: auto;
  margin: 0;
  padding: 6px 14px;
  background: var(--panel-light);
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.15),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- タブナビ ---- */
.tabnav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.tab-btn {
  width: auto;
  margin: 0;
  flex: 1;
  padding: 12px;
  background: var(--panel);
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-family: "Press Start 2P", monospace;
  font-size: 0.56rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.08s, color 0.08s;
}

.tab-btn.active {
  background: var(--grass);
  color: var(--text);
  text-shadow: 1px 1px 0 var(--grass-dark);
}

.tab-btn:hover:not(.active) {
  color: var(--text);
}

/* ---- タブコンテンツ ---- */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- 接続方法 ---- */
.howto-text {
  font-size: 0.92rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

.connect-info {
  margin: 14px 0;
  border: 3px solid var(--border-dark);
  background: #15110d;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.connect-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
}

.connect-row + .connect-row {
  border-top: 2px solid var(--border-light);
}

.connect-label {
  font-size: 0.8rem;
  color: var(--sand);
}

.connect-value {
  font-family: "Press Start 2P", monospace;
  font-size: 0.72rem;
  color: var(--grass-light);
}

.inline-code {
  font-family: "Press Start 2P", monospace;
  font-size: 0.7rem;
  background: #15110d;
  border: 2px solid var(--border-dark);
  padding: 2px 7px;
  color: var(--grass-light);
}

/* ---- 説明用の画像 + キャプション ---- */
.howto-figure {
  margin: 18px 0;
}

.howto-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 var(--border-light),
    0 4px 0 rgba(0, 0, 0, 0.3);
  image-rendering: auto;   /* スクショは滑らかに */
}

.howto-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- レスポンシブ ---- */
@media (max-width: 560px) {
  .brand-title { font-size: 0.7rem; }
  .menu-btn { display: block; }
  /* スマホではタブナビを隠し、メニューで開閉 */
  .tabnav { display: none; }
  .tabnav.open { display: flex; flex-direction: column; }
  .tabnav.open .tab-btn { font-size: 0.6rem; }
}

/* ---- Google Fonts 読み込み中のちらつき軽減 ---- */
.pixel { font-family: "Press Start 2P", monospace; }