/* Internet2.dev の配置。最初の画面 (本体のホームの骨格 = css/app-base.css + css/app-themes.css) をページの上に据え、
   その下に海 (css/deep.css) を続ける。本体の CSS はそのまま読むので、ここでは「本体にない物」と「サイトとしての置き方」だけを書く。 */
:root { --ppm: 4px; --site-sea: 190px; }   /* --ppm = 水深 1m あたりの px (海の札は 160m おき = 640px。札の高さより広く) */
html { scroll-behavior: smooth; }
html, body { margin: 0; height: auto; overflow: visible; }
body { background: #020712; color: #E8F7FF; font-family: "M PLUS Rounded 1c", "Yu Gothic UI", sans-serif; -webkit-font-smoothing: antialiased; }
html[data-theme] body { background: #020712; }
img { display: block; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 最初の画面 = 本体のホーム。.hm-root (画面全体に固定) の代わりに、ページの先頭の 1 画面分として置く ── */
.site-hero { position: relative; z-index: 3; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; background: var(--t-bg); color: var(--t-fg); }
.i2app { position: absolute; inset: 0; }
.i2app > div { position: absolute; inset: 0; }
.i2app button, .i2app a { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: none; }
.i2app button:disabled { cursor: not-allowed; }
.i2app h1, .i2app h2, .i2app p { margin: 0; }
.hd { overflow: hidden; }
/* 見出しの段: 本体の HOME より文が長いので、段を少し高くして見出しを少し小さくする (海が出ている時の本体の値は 26% / 56〜110px) */
html.i2Sea .hd { grid-template-rows: 72px minmax(262px, 33%) minmax(0, 1fr) auto 54px; }
html.i2Sea .hd-title { font-size: clamp(44px, 5.6vw, 88px); line-height: .95; }
.hd-hero-txt { overflow: hidden; gap: 8px !important; }
.hd-lead { font-size: 13px; line-height: 1.65; max-width: 46em; }
.hd-lead b { font-weight: 800; }
.hd-crumb { margin-top: 4px !important; }
/* 遊び方の札は、その分だけ詰める (説明は 1〜2 行なので下の余白は要らない) */
html.i2Sea .hd-body p { min-height: 0; }
html.i2Sea .hd-art { min-height: 70px; }
@media (max-height: 820px) { html.i2Sea .hd-lead { font-size: 12px; line-height: 1.55; } html.i2Sea .hd-title { font-size: clamp(40px, 5vw, 72px); } html.i2Sea .hd { grid-template-rows: 60px minmax(236px, 33%) minmax(0, 1fr) auto 48px; } }
/* 本体では釣りのボタンの置き場だった余白は要らない */
.cs-fish, .cs-fish.is-on { padding-bottom: 10px; }
.cs-fish-hud > span em { font-style: normal; }
.cs-fish-tip { margin: 8px 0 0; font: 11px/1.5 var(--t-font-body); color: var(--t-side-muted, var(--t-muted)); }
.cs-nav button:focus-visible, .hd button:focus-visible, .hd a:focus-visible { outline: 2px solid var(--t-action); outline-offset: 2px; }
/* 右上のコイン (本体の wallet.jsx の見た目) */
.i2w { margin-left: auto; }
.i2w-lv b { font-weight: 700; }
.i2w .i2w-plus { display: grid; }
/* 上の帯の右端が wallet で埋まるので、版の文字は左 */
.hd-ver { margin-right: 0 !important; }

/* ── 右の窓 = テーマを選ぶ (本体では起動画面の点群が入る窓) ── */
.tm-grid { position: absolute; inset: 44px 18px 32px; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: center; }
.tm-btn { display: flex !important; flex-direction: column; gap: 6px; padding: 8px 8px 7px !important; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--t-line) !important; border-radius: var(--t-radius); background: color-mix(in srgb, var(--t-bg) 55%, transparent) !important;
  font: 700 10px/1 var(--t-font-mono) !important; letter-spacing: .1em; color: var(--t-fg) !important; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tm-btn i { display: block; height: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--s0) 0 42%, var(--s1) 42% 72%, var(--s2) 72%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.tm-btn:hover { border-color: var(--t-accent) !important; transform: translateY(-2px); }
.tm-btn.is-on { border-color: var(--t-action) !important; box-shadow: 0 0 0 2px var(--t-action), var(--t-btn-glow, 0 0 0 transparent); }
.tm-btn.is-on::after { content: "●"; position: absolute; right: 8px; top: 7px; font-size: 8px; color: var(--t-action); }
.tm-btn { position: relative; }
[data-v-frame="bevel"] .tm-grid { inset: 50px 18px 34px; }

/* ── 釣り (js/fishing.js)。水面の帯は本体と同じ高さ (html.i2Sea の --i2-sea)。帯だけがクリックを受ける ── */
.site-fish { position: absolute; inset: 0; z-index: 9400; pointer-events: none; image-rendering: pixelated; }
.site-seahit { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--site-sea) - 28px); z-index: 9401; cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.site-seahit:focus-visible { outline: 2px dashed rgba(255,255,255,.7); outline-offset: -4px; }
.site-hint { position: absolute; left: 50%; bottom: calc(var(--site-sea) - 28px + 14px); z-index: 9402; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(2,7,18,.72); color: #E8F7FF; font: 700 12px/1 "M PLUS Rounded 1c", sans-serif; letter-spacing: .04em; pointer-events: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(63,245,255,.5), 0 6px 20px rgba(0,0,0,.4); animation: site-hint 2.4s ease-in-out infinite; transition: opacity .4s; }
.site-hint.is-off { opacity: 0; }
@keyframes site-hint { 50% { transform: translateX(-50%) translateY(-4px); } }
/* 釣れた魚の札 (本体の窓の形) */
.site-card { position: absolute; left: 50%; bottom: calc(var(--site-sea) + 28px); z-index: 9500; width: min(440px, 92vw); transform: translateX(-50%); font-family: var(--t-font-body); animation: site-card-in .25s cubic-bezier(.2,.9,.3,1.2); }
.site-card[hidden] { display: none; }
@keyframes site-card-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); } }
.site-card .th-winbar b { font-weight: 700; }
.fc-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px 18px 18px; }
.fc-body img { width: 96px; height: 96px; padding: 8px; box-sizing: border-box; object-fit: contain; image-rendering: pixelated; background: var(--t-art-bg, var(--t-pattern)); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-radius); }
.fc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-txt h2 { margin: 0; font: 800 24px/1.1 var(--t-font-body); }
.fc-txt em { font: 11px var(--t-font-mono); letter-spacing: .1em; color: var(--t-muted); font-style: normal; }
.fc-txt b { font: 700 18px var(--t-font-mono); font-variant-numeric: tabular-nums; }
.fc-txt p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--t-muted); }
.fc-rare { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font: 700 10px/1.4 var(--t-font-mono); letter-spacing: .14em; background: #64748b; color: #fff; }
.fc-rare.is-uncommon { background: #16a34a; } .fc-rare.is-rare { background: #2563eb; } .fc-rare.is-epic { background: #9333ea; }
.fc-again { margin-top: 10px; align-self: flex-start; padding: 8px 16px; font-weight: 700; cursor: pointer; }

/* ── 海 (ここから下は css/deep.css)。最初の画面の水面の帯の分だけ上に重ねる ── */
.sea { position: relative; z-index: 1; margin-top: calc(-1 * (var(--site-sea) - 28px)); }

/* ── スマホ幅: 左のメニューは畳み、ホームの格子を縦に流す ── */
@media (max-width: 860px) {
  .site-hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .i2app { position: relative; inset: auto; }
  .i2app > div { position: relative; inset: auto; }
  .has-side > div { left: 0 !important; }
  .cs { display: none; }
  .hd { display: flex; flex-direction: column; gap: 14px; min-height: 100vh; min-height: 100svh; padding-bottom: var(--site-sea) !important; }
  .hd-top { height: 56px; padding: 0 16px; gap: 12px; }
  .hd-ver { font-size: 9px !important; white-space: normal; }
  .i2w { gap: 10px; } .i2w-lv { padding: 4px 8px; } .i2w-lv i { width: 40px; }
  .hd-hero { grid-template-columns: 1fr; gap: 14px; padding: 0 16px 6px; }
  .hd-title { font-size: clamp(52px, 17vw, 84px); }
  .hd-lead { font-size: 13px; }
  .hd-win { min-height: 150px; }
  .tm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; inset: 38px 10px 24px; }
  .tm-btn { padding: 6px !important; font-size: 8px !important; letter-spacing: .04em; } .tm-btn i { height: 14px; }
  .hd-cards { grid-template-columns: 1fr; padding: 0 16px; gap: 10px; }
  .hd-card { flex-direction: row; } .hd-art { flex: 0 0 110px; min-height: 86px; } .hd-glyph { width: 70%; } .hd-body { flex: 1; padding: 10px 12px 12px; } .hd-body p { min-height: 0; }
  .hd-lobby { grid-template-columns: 1fr; padding: 0 16px 8px; gap: 10px; }
  .hd-lobby-cap { flex-direction: row; align-items: baseline; gap: 10px; }
  .hd-foot { height: 44px; padding: 0 16px; }
  .hd-foot-mid { display: none; }
  .site-hint { font-size: 11px; }
  .fc-body { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; } .fc-body img { width: 72px; height: 72px; } .fc-txt h2 { font-size: 20px; }
}