/* ホーム画面（ダッシュボード型）。1画面に収める（スクロールさせない）。 */

body.tp .tp-screen[data-screen="home"] { grid-template-rows: minmax(0, 1fr); }

/* タイトル / メニュー / フッター の3段。タイトルは主張しすぎない高さに抑える。 */
body.tp .tp-home {
  min-height: 0;
  display: grid;
  /* タイトルは自然な高さだけ（＝以前の2/3以下）。余った縦はダッシュボードの上下に配り、
     メニューが画面の中心に来るようにする。 */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--tp-2);
  /* ホームはヘッダーに重ねる（.tp-screen の上余白が 0）ので、ヘッダーぶんはここで空ける。
     ホームは必ずスタックの底＝戻る行が出ないため、1段目（--tp-head-bar-h）だけを避ければよい。
     +6px は絵をバーからわずかに離すための余白。 */
  padding:
    calc(var(--tp-head-bar-h) + 6px + var(--tp-safe-t))
    max(var(--tp-4), var(--tp-safe-r))
    max(var(--tp-3), var(--tp-safe-b))
    max(var(--tp-4), var(--tp-safe-l));
}

/* ── タイトル（ヒーロー画像）───────────────────
   絵の左右と下端を背景へ溶かして、貼り付けた四角に見えないようにする。 */
body.tp .tp-home-title {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0 0 var(--tp-3);
  min-height: 0;
}

body.tp .tp-hero {
  display: block;
  /* 画面いっぱいに広げる（.tp-home の左右パディングを打ち消す） */
  width: calc(100% + 2 * max(var(--tp-4), var(--tp-safe-l)));
  margin: 0 calc(-1 * max(var(--tp-4), var(--tp-safe-l)));
  -webkit-mask-image:
    linear-gradient(to bottom, #000 58%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 58%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
  user-select: none;
}
body.tp .tp-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* HTML の width/height 属性と同じ比率をここでも宣言しておく二重の保険。
     属性が落ちた版（キャッシュ等）でも、読み込み前から高さが確定してレイアウトが飛ばない。 */
  aspect-ratio: 1100 / 440;
}

/* 画像に「ネクロデュエル」が入っているので、日本語では読みを重ねない。
   英語のときだけ、絵の下に惹句を出す。 */
body.tp .tp-logo-read { display: none; }
html[lang="en"] body.tp .tp-logo-read {
  display: block;
  position: relative;
  margin-top: calc(-1 * var(--tp-2));
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tp-accent);
  text-shadow: 0 1px 6px rgba(7, 4, 13, .9);
}

/* ── ダッシュボード ─────────────────────────── */
body.tp .tp-dash {
  align-self: center;
  display: flex;
  flex-direction: column;
  /* 画面が高いほど間隔を広げ、ダッシュボードが縦を使うようにする。
     単位は dvh。器（.tp-screen = position:fixed inset:0、#app = 100dvh）が
     アドレスバーの開閉で伸び縮みするのに、中身だけ静的な vh（＝lvh）で測ると
     バーが出た瞬間に中身だけが器からはみ出し、ホームが組み直されて跳ねる。 */
  gap: clamp(8px, 2.6dvh, 24px);
}

body.tp .tp-dash-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tp-2);
}

/* タイル。アイコンは箱に入れず、線画のまま置く。 */
body.tp .tp-tile {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-3);
  min-height: clamp(56px, 10.4dvh, 92px);
  padding: var(--tp-3) var(--tp-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  color: var(--tp-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .08s ease;
}
body.tp .tp-tile:hover { border-color: var(--tp-line-lit); background: rgba(255, 255, 255, .05); }
body.tp .tp-tile:active { transform: translateY(1px); }
body.tp .tp-tile:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }

body.tp .tp-tile-ico { display: grid; place-items: center; color: var(--tp-accent); }
body.tp .tp-tile-ico .tp-ico { width: 24px; height: 24px; stroke-width: 1.6; }
body.tp .tp-tile-body { min-width: 0; }
body.tp .tp-tile-title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: .03em; }
body.tp .tp-tile-sub {
  display: block; margin-top: 2px;
  font-size: 11.5px; line-height: 1.45; color: var(--tp-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.tp .tp-tile-go { color: var(--tp-text-mute); display: grid; place-items: center; }
body.tp .tp-tile-go .tp-ico { width: 18px; height: 18px; }

/* 主役。一段大きく、金で塗る。 */
body.tp .tp-tile-hero {
  min-height: clamp(70px, 13.6dvh, 118px);
  border-color: var(--tp-accent);
  background: linear-gradient(180deg, rgba(216, 178, 90, .22), rgba(216, 178, 90, .07));
  box-shadow: 0 6px 20px rgba(216, 178, 90, .12);
}
body.tp .tp-tile-hero:hover { background: linear-gradient(180deg, rgba(216, 178, 90, .3), rgba(216, 178, 90, .1)); }
body.tp .tp-tile-hero .tp-tile-title { font-size: 19px; }
body.tp .tp-tile-hero .tp-tile-sub { color: rgba(242, 236, 221, .72); font-size: 12px; }
body.tp .tp-tile-hero .tp-tile-ico .tp-ico { width: 30px; height: 30px; }
body.tp .tp-tile-hero .tp-tile-go { color: var(--tp-accent); }

/* まずはチュートリアル。呼びかけなので紫（世界観の色）で、脈打たせて気づかせる。 */
body.tp .tp-tile-start {
  border-color: var(--tp-focus);
  background: linear-gradient(180deg, rgba(177, 140, 255, .2), rgba(177, 140, 255, .06));
}
body.tp .tp-tile-start:hover { background: linear-gradient(180deg, rgba(177, 140, 255, .28), rgba(177, 140, 255, .1)); }
body.tp .tp-tile-start .tp-tile-ico { color: var(--tp-focus); }
body.tp .tp-tile-start .tp-tile-go { color: var(--tp-focus); }
body.tp .tp-tile-start .tp-tile-sub { color: rgba(242, 236, 221, .7); }

/* 横並びの2つ（ルールを確かめる用途）。縦積みで中央寄せ。 */
body.tp .tp-tile-half {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--tp-1);
  min-height: clamp(62px, 11.8dvh, 104px);
  padding: var(--tp-3) var(--tp-2);
  text-align: center;
}
body.tp .tp-tile-half .tp-tile-title { font-size: 13px; letter-spacing: .02em; }
body.tp .tp-tile-half .tp-tile-ico .tp-ico { width: 22px; height: 22px; }

/* ── フッター（フィードバック）───────────────────
   遊ぶ導線とは別種なので、塗らずに線だけの控えめな形にする。 */
body.tp .tp-home-foot {
  align-self: end;
  display: flex;
  justify-content: center;
  padding-top: var(--tp-2);
}

body.tp .tp-feedback-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: var(--tp-2);
  min-height: 38px;
  padding: 0 var(--tp-5);
  border: 1px dashed var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  background: transparent;
  color: var(--tp-text-dim);
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
body.tp .tp-feedback-btn:hover { color: var(--tp-accent); border-color: var(--tp-accent-deep); }
body.tp .tp-feedback-btn .tp-ico { width: 16px; height: 16px; }

/* ── ヘッダー右上のアカウント表示 ────────────────── */
body.tp .tp-account-chip {
  -webkit-appearance: none; appearance: none;
  height: 30px;
  max-width: 128px;
  padding: 0 var(--tp-3) 0 var(--tp-2);
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--tp-text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
body.tp .tp-account-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.tp .tp-account-chip .tp-ico { width: 15px; height: 15px; }
body.tp .tp-account-chip:hover { color: var(--tp-text); border-color: var(--tp-accent-deep); }

/* 縦に余裕がない時は、タイトルを削り、説明文を落として必ず1画面に収める。 */
@media (max-height: 700px) {
  body.tp .tp-home { gap: var(--tp-1); }
  body.tp .tp-home-title { padding: 0 0 var(--tp-2); }
  body.tp .tp-tile { min-height: 56px; }
  body.tp .tp-tile-hero { min-height: 68px; }
  body.tp .tp-tile-half { min-height: 60px; }
}
@media (max-height: 620px) {
  body.tp .tp-tile-sub { display: none; }
  body.tp .tp-tile { min-height: 50px; }
  body.tp .tp-tile-hero { min-height: 58px; }
}