/* Pixel — ファミコン風ピクセルアートのデザイントークンと部品（.btn / .input / .tile / .bento）。
   色・フォント・枠・影・余白の値はこのファイルにだけ書き、ほかの CSS は変数を使う。
   フォント（DotGothic16・Press Start 2P）は各ページの <head> で Google Fonts から読み込む。 */

:root {
  /* ── パレット：ファミコン（2C02）の6ビットパレットから選んだ7色。これ以外の色は使わない ── */
  --nes-black: #000000;  /* $0F */
  --nes-white: #FCFCFC;  /* $30 */
  --nes-gray: #BCBCBC;   /* $10 */
  --nes-teal: #004058;   /* $0C 背景の濃い色 */
  --nes-yellow: #F8B800; /* $28 アクセント1 */
  --nes-sky: #3CBCFC;    /* $21 アクセント2 */
  --nes-red: #A80020;    /* $05 アクセント3 */

  /* ── 役割ごとの色（コントラスト比はどの組み合わせも 4.5:1 以上） ── */
  --color-bg: var(--nes-teal);            /* 画面の背景 */
  --color-on-bg: var(--nes-white);        /* 背景の上の文字 */
  --color-on-bg-muted: var(--nes-gray);   /* 背景の上の補足の文字 */
  --color-tile: var(--nes-white);         /* タイル・入力欄の地 */
  --color-ink: var(--nes-black);          /* タイルの上の文字 */
  --color-ink-muted: var(--nes-teal);     /* タイルの上の補足の文字・プレースホルダー */
  --color-border: var(--nes-black);       /* 枠線 */
  --color-shadow: var(--nes-black);       /* 影 */
  --color-fill: var(--nes-gray);          /* 押せないボタン・空のゲージ・画像の読み込み前 */
  --color-accent: var(--nes-yellow);      /* いちばん大事なボタン・表示中のページ */
  --color-accent-2: var(--nes-sky);       /* 目立たせたいタイル・アイコンの地・ホバー */
  --color-danger: var(--nes-red);         /* エラーの文字 */
  --color-link: var(--nes-red);           /* タイルの上のリンク */

  /* ── 枠と影（角丸・ぼかしはなし） ── */
  --border-w: 4px;
  --border: var(--border-w) solid var(--color-border);
  --shadow: 4px 4px 0 var(--color-shadow);
  --press: translate(4px, 4px);           /* 押したとき、影の分だけずらす */

  /* ── 余白（8px の格子。すべて4か8の倍数） ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── ベントグリッド ── */
  --bento-row: 120px;                     /* 行の高さ。背の低い画面では下の @media で小さくする */
  --bento-gap: 12px;                      /* タイル同士の間隔 */
  --page-pad: 16px;                       /* 画面の左右の余白 */

  /* ── 大きさ ── */
  --tap: 44px;                            /* タップできる部分の最小の大きさ */
  --control-h: 48px;                      /* ボタン・入力欄の高さ */
  --icon: 24px;                           /* 12マスのアイコンの表示サイズ（1マス 2px） */
  --icon-lg: 36px;                        /* 同（1マス 3px） */
  --icon-sm: 12px;                        /* 同（1マス 1px） */

  /* ── フォント ── */
  --font-display: "Press Start 2P", "DotGothic16", monospace;  /* 英数字の見出し・数値 */
  --font-body: "DotGothic16", system-ui, sans-serif;           /* 日本語と本文 */
  --font-heading: var(--font-body);                            /* 日本語まじりの見出し */
  --text-sm: 14px;   --leading-sm: 20px;  /* ドットフォントが潰れない下限 */
  --text-md: 16px;   --leading-md: 24px;
  --text-lg: 20px;   --leading-lg: 28px;
  --text-xl: 24px;   --leading-xl: 32px;
  --display-sm: 10px; --display-leading-sm: 16px;  /* Press Start 2P の下限 */
  --display-md: 12px; --display-leading-md: 20px;
  --display-lg: 16px; --display-leading-lg: 24px;

  /* ── 動き（コマ送り） ── */
  --motion-slide: .24s steps(4);
  --motion-toggle: .12s steps(2);
  --motion-bob: 1.2s steps(2) infinite;

  /* ── ピクセルの模様（mask 用。色は background 側のトークンで付ける） ── */
  /* 市松模様（メニューの背面。半透明の代わりに1マスおきに抜く） */
  --px-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/svg%3E");
  /* ブロック型ゲージの1マス（12px のブロック＋4px のすき間） */
  --px-blocks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='3' height='4'/%3E%3C/svg%3E");
  /* 下向きの矢印（セレクト） */
  --px-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 3h3v2H1zM8 3h3v2H8zM2 5h3v2H2zM7 5h3v2H7zM3 7h6v2H3zM5 9h2v1H5z'/%3E%3C/svg%3E");
  /* ＋ と −（FAQ の開閉） */
  --px-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h2v10H5zM1 5h10v2H1z'/%3E%3C/svg%3E");
  --px-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 5h10v2H1z'/%3E%3C/svg%3E");
}
/* 背の低い画面では行を低くして、トップとホームがスクロールせずに収まるようにする
   （少しでもスクロールできると忍者AdMax のオーバーレイが画面上部に移るため） */
@media (max-height: 699px) { :root { --bento-row: 96px; } }
@media (max-height: 599px) { :root { --bento-row: 80px; } }

/* ── 土台 ── */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-on-bg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: 400;
  /* ドットフォントは太字がないので、ブラウザに太らせない。輪郭もなめらかにしない */
  font-synthesis: none;
  -webkit-font-smoothing: none;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 400; }
h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
h3 { font-size: var(--text-md); line-height: var(--leading-md); }
p { margin: 0 0 var(--space-3); }
b, strong { font-weight: 400; }
a { color: inherit; text-underline-offset: 4px; }
img { display: block; max-width: 100%; }
img, svg { image-rendering: pixelated; }
svg { display: block; flex: none; }
:focus { outline: none; }
:focus-visible { outline: var(--border-w) solid var(--color-accent); outline-offset: 0; }
::selection { background: var(--color-accent); color: var(--color-ink); }
::placeholder { color: var(--color-ink-muted); opacity: 1; }

/* ── タイル ── */
.tile {
  min-width: 0;
  padding: var(--space-3);
  border: var(--border);
  background: var(--color-tile);
  color: var(--color-ink);
  box-shadow: var(--shadow);
}
.tile a:not(.btn) { color: var(--color-link); }
.tile-accent { background: var(--color-accent-2); }

/* ── ベントグリッド（2列・行の高さは固定。タイルは 1×1 が基本） ── */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--bento-row);
  gap: var(--bento-gap);
}
ul.bento { margin: 0; padding: 0; list-style: none; }
.bento > .tile { overflow: hidden; }
.tile-hero { grid-column: span 2; grid-row: span 2; } /* 2列×2行 */
.tile-tall { grid-row: span 2; }                      /* 1列×2行 */

/* ── 英数字の飾りラベル（「TOOLS」「x3」など） ── */
.px-label { font-family: var(--font-display); font-size: var(--display-sm); line-height: var(--display-leading-sm); }
.px-num { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); }
/* 四角を並べたブロック型のゲージ（数や量を表す） */
.gauge { display: flex; gap: var(--space-1); }
.gauge > * { width: var(--space-3); height: var(--space-4); background: var(--color-ink); }

/* ── ボタン ── */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-3);
  border: var(--border);
  background: var(--color-tile);
  color: var(--color-ink);
  box-shadow: var(--shadow);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-sm); font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--color-accent); }
@media (hover: hover) {
  .btn:hover { background: var(--color-accent-2); }
}
.btn:active { transform: var(--press); box-shadow: none; }
/* 枠だけのボタン。置かれた場所の文字色を使う（背景の上では白、タイルの上では黒） */
.btn-ghost { border-color: currentColor; background: transparent; color: inherit; box-shadow: none; }
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--color-border); color: var(--color-ink); }
}
.btn-ghost:active { transform: none; }
/* 押せない状態（色を薄めず、グレーの地にして影を外す）。href のないリンクボタンも同じ */
.btn:disabled, a.btn:not([href]) {
  background: var(--color-fill);
  color: var(--color-ink);
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn-block { width: 100%; margin-top: var(--space-3); }

/* ── 入力欄 ── */
.field > label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); }
.input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-2);
  border: var(--border);
  background: var(--color-tile);
  color: var(--color-ink);
  caret-color: var(--color-ink);
  font: inherit;
  font-size: var(--text-md); /* 16px未満だとiOSでズームされる */
}
.input:focus-visible { outline-offset: 0; }
textarea.input { min-height: 96px; resize: vertical; }

/* ── マスクで描くピクセルアイコン（CSS から出すもの。色は currentColor） ── */
.px-mask {
  display: block;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}