/* うちの町の畑 (/game/ の 4 面だけが読む)。試作 2 r6 (proto2p/style.css) の形を P0 の規約へ移し、PR-8 で畑と友人の畑を「盤」(方向 2 紙のクラフト) にした物。
   字 = 体系の 5 トークン (28 h1 / 20 h2 / 16 値と町の名前 / 14 本文 / 12 ラベル)・字の色 = サイトの変数だけ (良い = --cold の藍 / いまいち = --hot の朱)。
   盤 (.g-board) = 舞台 (絵は SVG・16 色のまま) + クラフト紙の台の上の紙のタグ (.g-sheet)。紙の地と影は下の --g-* の変数 1 か所 (ダークはサイトの暗い面の色)・
   飾り (テープ / ミシン目 / 袋の口 / 暦 / 紙の目 / 手の結果の動き) は build が書き出す /assets/game-board-*.svg を url() で読む。盤の外は白地 + 罫 + 押せる物だけ 2 px の外形と 2 px の側面。
   余白は 4 / 8 / 12 / 16 / 24 の尺 (盤の外の古い部品の 10 / 20 は PR-7 のまま)。両脇の板は JS が html に印を付けた時だけ出す (@media で決めない) */
.g-app {
  --g4: 4px; --g8: 8px; --g10: 10px; --g12: 12px; --g16: 16px; --g20: 20px; --g24: 24px;
  --g-sb: var(--g16); --g-lift: 2px; --g-in: 6px; --g-side: 0 var(--g-lift) 0 var(--text);
  /* 紙の地 (タグ / 内側のカード / 台紙の 2 枚目)・絵の色 (番号の丸の墨と日の色と選択中の橙)・紙の影 (下の端の陰の帯 / 落ちる影)・罫の紙の罫と余白の線・クラフト紙の台の色 */
  --g-paper: #fffcf5; --g-paper-2: #f5f0e6; --g-paper-under: #e3d8c4; --g-ink: #33291f; --g-sun: #e9cc7e; --g-sel: #d4893a;
  --g-edge: rgba(51, 41, 31, 0.06); --g-drop: 1px 3px 5px rgba(51, 41, 31, 0.28); --g-drop-s: 1px 2px 3px rgba(51, 41, 31, 0.24);
  --g-rule: rgba(51, 41, 31, 0.14); --g-margin: rgba(217, 121, 106, 0.35); --g-kraft: #d2b185; --g-kraft-dim: transparent;
  display: flex; flex-direction: column; gap: var(--g-sb); line-break: strict; overflow-wrap: anywhere; line-height: 1.6;
}
/* ダークの盤: 紙はサイトの暗い面の色・クラフト紙の台は地の色を 62 % 重ねて沈める (舞台の絵は 16 色のまま) */
[data-theme="dark"] .g-app {
  --g-paper: #232c36; --g-paper-2: #1c242e; --g-paper-under: #33404e;
  --g-edge: rgba(0, 0, 0, 0.18); --g-drop: 1px 3px 6px rgba(0, 0, 0, 0.5); --g-drop-s: 1px 2px 4px rgba(0, 0, 0, 0.45);
  --g-rule: var(--border); --g-margin: rgba(224, 133, 120, 0.35); --g-kraft: #5e5344; --g-kraft-dim: rgba(17, 20, 24, 0.62);
}
.g-app h1 { margin: 0; }
.g-app p { margin: 0; }
.g-app b, .g-app dd, .g-app td { font-variant-numeric: tabular-nums; }
.g-face, .g-col, .g-farm { display: flex; flex-direction: column; gap: var(--g-sb); min-width: 0; }
.g-app [hidden] { display: none !important; } /* 部品の display より hidden を先に (hidden × display の罠) */
.g-good { color: var(--cold); }
.g-bad { color: var(--hot); }
/* 符号の色 (気温の平年差は + 朱 / − 藍・資金 / 品質 / 成長 / 売上の増減は + 藍 / − 朱・10-21 ユーザー「+は青系、−は赤系。気温は逆」) */
.g-warm, .g-down { color: var(--hot); }
.g-cool, .g-up { color: var(--cold); }
.g-goal { font-weight: 700; padding-left: var(--g12); border-left: 4px solid var(--hot); text-wrap: balance; } /* 1 文 2 行の見出しの型 (2 行目が 1〜2 字だけにならない・本文の文節改行はしない) */
.g-line { font-size: var(--fs-body); }
.g-fine { font-size: var(--fs-fine); }
.g-cap { font-size: var(--fs-fine); font-weight: 700; } /* 入力欄のラベル (図鑑の引き継ぎ) */
.g-note { font-weight: 700; }

/* 箱 (縁 1 px の罫・中の部品は 16 ずつ・見出しはサイトの h2 の大きさで罫と朱の線を外す)。
   見出しは .g-app の中で選ぶ (サイトの「節の見出しの上は 24」(section > h2:first-child・詳細度 0,1,2) に勝ち、罫から字までを padding の 16 だけに) */
.g-box {
  background: var(--bg); border: 1px solid var(--border); border-top: 2px solid var(--rule-ink); border-radius: 2px;
  padding: var(--g16); display: flex; flex-direction: column; gap: var(--g16); min-width: 0;
}
.g-app .g-box > h2 { margin: 0; padding: 0; border: 0; line-height: 1.35; }
.g-box > h2::after { content: none; }
/* 状態なしの 1 行の箱 (4 面の末尾・.g-app の直の子で .g-face の外) はフッターの二重線と、積みの間隔と同じ --g-sb を空ける (10-29 ユーザー指摘) */
#g-nostate { margin-bottom: var(--g-sb); }
/* 共有の列を末尾に持たない 4 面 (アプリ / 図鑑 / 別の端末で続ける / 友人) は、最後の箱とフッターの二重線の間を 24 (入口 / 畑 / 報告は共有の列の padding 24)。状態なしの箱の下の余りはこの 24 に含める */
.g-app:is([data-g-face="app"], [data-g-face="book"], [data-g-face="transfer"], [data-g-face="friends"]) { padding-bottom: var(--g24); }
.g-app:is([data-g-face="app"], [data-g-face="book"], [data-g-face="transfer"], [data-g-face="friends"]) #g-nostate { margin-bottom: 0; }
.g-row { display: flex; align-items: center; gap: var(--g8); }
.g-row > :first-child { flex: 1; min-width: 0; }

/* 押せる物の共通の形 (2 px の外形 + 2 px の側面・押すと沈む・押せない時は側面なしの破線) */
.g-btn, .g-tab, .g-card {
  font-family: inherit; font-size: var(--fs-body); font-weight: inherit; line-height: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--text); border-radius: 8px; box-shadow: var(--g-side); margin: 0 0 var(--g-lift); cursor: pointer; transition: transform 0.06s;
}
.g-btn:active:not(:disabled), .g-tab:active, .g-card:active {
  transform: translateY(var(--g-lift)); box-shadow: none;
}
.g-btn:disabled {
  box-shadow: none; border-style: dashed; border-color: var(--border-interactive); cursor: not-allowed; transform: translateY(var(--g-lift));
}
.g-btn {
  min-height: var(--tap-min); padding: 0 var(--g12); font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; text-align: center;
}
.g-btn[aria-pressed="false"] { border-style: dashed; box-shadow: none; }
.g-btn-main { min-height: 48px; width: 100%; border-color: var(--accent); box-shadow: 0 var(--g-lift) 0 var(--accent); }
.g-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g8); }
.g-btns .g-btn { padding: 0 var(--g4); }
.g-btns.g-btns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#g-inv > p:empty { position: absolute; } /* 空の文の行は高さも列の間隔も取らず、木には残す (role="status" の行は変化の前から木に居る) */
.g-btns .g-btn[aria-pressed="true"], .g-tab[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 var(--g-lift) 0 var(--accent); color: var(--accent); }

/* 入口 (町を選ぶ・遊び方) */
.g-key-art { margin: 0; border: 1px solid var(--border); }
.g-key-art img, .g-howto-list img { display: block; width: 100%; height: auto; }
.g-cards { display: grid; gap: var(--g12); }
.g-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--g8) var(--g12); align-items: center; padding: var(--g8); text-align: left; }
.g-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 var(--g-lift) 0 var(--accent); }
.g-card svg { display: block; width: 112px; height: 72px; border: 1px solid var(--border); }
.g-card-body { display: flex; flex-direction: column; gap: var(--g4); min-width: 0; }
.g-card-name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; }
.g-card-pref { font-size: var(--fs-fine); font-weight: 700; border: 1px solid var(--text); border-radius: 2px; padding: 0 var(--g4); margin-left: var(--g8); }
.g-card-line { font-size: var(--fs-body); line-height: 1.4; }
.g-card-norm { font-size: var(--fs-fine); line-height: 1.4; }
.g-howto-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--g16); }
.g-howto-list li { display: grid; gap: var(--g8); }
.g-howto-list figure { margin: 0; border: 1px solid var(--border); }
.g-howto-list figcaption { padding: var(--g8) var(--g12) var(--g12); } /* 絵は額いっぱいのまま・説明の字だけ縁から離す */

/* 盤 (畑と友人の畑): 舞台 (背面の絵 + 区画のボタン + HUD のカード) と、クラフト紙の台の上の紙。舞台の絵の高さは feed を待つ間も最終の高さ。
   盤の中の字は Hiragino Sans を先にして本文 500 (10-22 ユーザー「書体の順を変えて 500 が良さそう」)・器 1 つの継承で (子孫に当てると親から継いだ 700 を潰す)。盤の外はサイトの書体のまま */
.g-board {
  display: flex; flex-direction: column; min-width: 0; border-radius: 4px; overflow: hidden;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, system-ui, sans-serif; font-weight: 500;
}
.g-board b, .g-board strong { font-weight: 700; } /* 器が 500 でも b / strong は 700 に固定 */
.g-stage { position: relative; overflow: hidden; }
.g-stage-art { aspect-ratio: 960 / 540; }
.g-stage-art svg { display: block; width: 100%; height: 100%; }
.g-plots, .g-stage-hud { position: absolute; inset: 0; pointer-events: none; }
.g-board-low {
  display: grid; gap: var(--g24) var(--g16); padding: var(--g24) var(--g16); align-items: start;
  background: linear-gradient(var(--g-kraft-dim), var(--g-kraft-dim)), url(/assets/game-board-kraft.959d2a71.svg) repeat 0 0 / 480px 480px;
  background-color: var(--g-kraft);
}
.g-board-col { display: flex; flex-direction: column; gap: var(--g24); min-width: 0; }

/* 紙のタグ (角を丸めた紙 + 下の端の陰の帯 + 落ちる影 + 紙の目・上の縁の真ん中にマスキングテープ 1 本) */
.g-sheet, .g-hc, .g-tag, .g-badge, .g-snd, .g-act, .g-today > div, .g-spec, .g-medal-tag {
  background: var(--g-paper) url(/assets/game-board-grain.6a1a2019.svg) repeat 0 0 / 128px 128px; color: var(--text);
}
.g-sheet {
  position: relative; display: flex; flex-direction: column; gap: var(--g12); min-width: 0; padding: var(--g16);
  border-radius: 4px; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop);
}
.g-sheet::before, .g-care::after, .g-hc::before, .g-badge::before {
  content: ''; position: absolute; pointer-events: none; background: url(/assets/game-board-tape.c075af33.svg) no-repeat center / 100% 100%;
}
.g-sheet::before { top: -7px; left: 50%; width: 56px; height: 14px; margin-left: -28px; transform: rotate(-4deg); }
/* 紙の見出し: 盤の中で選ぶのは、サイトの「節の見出しの上は 24」(section > h2:first-child・詳細度 0,1,2) に勝つため (4 面の紙の上の余白は 16 だけ) */
.g-board .g-sheet-head { margin: 0; padding: 0; border: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; }
.g-sheet-head::after { content: none; }
.g-sheet-sub { font-size: var(--fs-fine); font-weight: 700; }
.g-sheet.g-note { padding: var(--g12) var(--g16); }
.g-sheet.g-aim { gap: var(--g8); padding: var(--g12) var(--g16); } /* めあての紙 (行 2 つ・見出しなし) */
.g-aim > .g-li { margin: 0; }
/* はじめての畑の 1 行 (めあての紙の位置・字と「6 区画の畑に広げる」を横に・入らなければ折る) */
.g-sheet.g-easy-line { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--g8) var(--g12); margin: 0; padding: var(--g12) var(--g16); }

/* 手入れの台紙 (2 枚重ね + 角のテープ 2 本・見出しは番号の丸 + 区画 + 状態の印・計器の右に主の手・ミシン目の下に残りの手) */
.g-care { box-shadow: inset 0 -3px 0 var(--g-edge), 3px 4px 0 var(--g-paper-under), var(--g-drop); }
.g-care::before { top: -4px; left: -6px; width: 64px; height: 15px; margin-left: 0; transform: rotate(-30deg); }
.g-care::after { top: -4px; right: -6px; width: 64px; height: 15px; transform: rotate(30deg); }
.g-care-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; }
.g-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--g-sel); color: var(--g-ink); font-size: var(--fs-body); font-weight: 700; line-height: 1;
}
.g-pn-sub { display: flex; flex-direction: column; gap: var(--g8); font-size: var(--fs-body); }
.g-care-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g12) var(--g24); }
.g-care-top > :first-child { flex: 1 1 240px; min-width: 0; }
.g-meters { display: grid; grid-template-columns: auto 120px auto; justify-content: start; align-items: center; gap: var(--g4) var(--g12); }
.g-meter { display: block; width: 120px; height: 12px; }
.g-mt-k { font-size: var(--fs-fine); font-weight: 700; }
.g-meters b { font-size: var(--fs-body); text-align: right; }
/* ミシン目 (破線 + 両端の半円の切り欠き = 台の色) */
.g-perf { position: relative; height: 4px; margin: 0 calc(-1 * var(--g16)); background: url(/assets/game-board-perf.0926adba.svg) repeat-x 0 0 / 8px 4px; background-clip: content-box; padding: 0 var(--g16); }
.g-perf::before, .g-perf::after { content: ''; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--g-kraft); }
.g-perf::before { left: -6px; }
.g-perf::after { right: -6px; }

/* 紙のボタン (地の紙 + 下に厚み 3 の紙・押すと沈む・押せない時は厚みなしの破線)。主の手は青い紙 (字は白) */
.g-act {
  font-family: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1.3; position: relative; margin: 0 0 3px;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; justify-items: start; gap: 0 var(--g8); min-height: 52px;
  padding: var(--g8) var(--g12); text-align: left; border: 0; border-radius: 7px; cursor: pointer;
  box-shadow: 0 3px 0 var(--g-paper-under), var(--g-drop-s); transition: transform 0.06s;
}
.g-act > .g-ic { grid-row: 1 / span 2; }
.g-act .g-hint { grid-column: 2; font-size: var(--fs-fine); font-weight: 500; }
.g-act .g-hint .g-nw { white-space: normal; } /* 手のボタンの中は句の中でも折り返す (390 の 2 列で en の「Guards against frost and heat」が画面の外へ出ていた・数と単位は glue が結ぶ) */
/* 「A / B」の補足は部分ごとに折らない (折る所は「 / 」の後だけ) */
.g-nw { white-space: nowrap; }
/* 盤の中の文は最後の行に 1 字だけ落とさない (対応しないブラウザーでは今のまま折る) */
.g-board .g-pk-note, .g-board .g-pn-sub, .g-board .g-line, .g-board .g-fine, .g-board .g-sheet-sub { text-wrap: pretty; }
.g-act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--g-paper-under), var(--g-drop-s); }
.g-act:disabled { cursor: not-allowed; box-shadow: none; outline: 1px dashed var(--border-interactive); outline-offset: -1px; transform: translateY(3px); }
.g-act:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-act.g-act-main {
  flex: 0 1 auto; min-width: 200px; min-height: 56px; background: var(--accent); color: var(--accent-text); font-size: var(--fs-h3);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000), var(--g-drop-s);
}
.g-act.g-act-main .g-hint { font-size: var(--fs-body); font-weight: 700; }
.g-act.g-act-main:active:not(:disabled) { box-shadow: 0 0 0 color-mix(in srgb, var(--accent) 60%, #000), var(--g-drop-s); }
.g-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--g12); }
/* 生きた株の抜く (2 段) は他の手と離す (上に余白と破線 1 本)・1 回目の後 (aria-pressed) は買う面の 2 段目と同じ縁の色 */
.g-act.g-act-pull { margin-top: var(--g12); border-top: 1px dashed var(--border-interactive); }
.g-act.g-act-pull[aria-pressed="true"] { box-shadow: 0 3px 0 var(--g-sel), var(--g-drop-s); outline: 2px solid var(--g-sel); outline-offset: -2px; }
/* 全部の区画の 1 押し (#g-acts-all・face-farm-all.mjs): 紙のボタン 2 つを横に (PC は右の列で縦に詰める) */
.g-acts-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g12); }
/* 盤の中の面のリンク 2 つ (友人の畑 / 図鑑と称号) も紙のボタン (濃い青は手入れの主の手 1 つだけ) */
.g-board .g-nav { gap: var(--g12); }
.g-board .g-nav .button {
  margin: 0 0 3px; border-radius: 7px; background: var(--g-paper) url(/assets/game-board-grain.6a1a2019.svg) repeat 0 0 / 128px 128px; color: var(--text);
  box-shadow: 0 3px 0 var(--g-paper-under), var(--g-drop-s); transition: transform 0.06s;
}
.g-board .g-nav .button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--g-paper-under), var(--g-drop-s); }
/* 植える選択肢 = 種の袋 (口のぎざぎざは作物の色・絵の枠に作物の実・高さは中身で決める・袋の間 16) */
.g-acts.g-acts-plant { grid-auto-rows: auto; align-items: start; gap: var(--g16); }
.g-act.g-act-plant {
  grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--g4) var(--g8); align-items: start;
  padding: var(--g16) var(--g8) var(--g12); border-radius: 4px; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s); margin: 0;
}
.g-act-plant::before, .g-spec:not(.g-spec-off)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 11px; border-radius: 4px 4px 0 0; background: var(--g-crimp, var(--g-sun));
  -webkit-mask: url(/assets/game-board-crimp.a383e1ca.svg) repeat-x 0 0 / 6px 11px; mask: url(/assets/game-board-crimp.a383e1ca.svg) repeat-x 0 0 / 6px 11px;
}
.g-pk-radish { --g-crimp: #d9796a; } .g-pk-komatsuna { --g-crimp: #9cc487; } .g-pk-potato { --g-crimp: #c49a72; }
.g-pk-tomato { --g-crimp: #b3352b; } .g-pk-daikon { --g-crimp: #c9e2ee; } .g-pk-hakusai { --g-crimp: #e9cc7e; }
.g-pk-edamame { --g-crimp: #5c8c52; } .g-pk-spinach { --g-crimp: #a9bccb; } .g-pk-pumpkin { --g-crimp: #d4893a; } /* 解放する 3 (絵の 16 色の deep / mist / sel) */
.g-act-plant:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 -3px 0 var(--g-edge); }
.g-pk-win { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: url(/assets/game-board-window.702a9300.svg) center / 100% 100%; }
.g-pk-win .g-ic { width: 36px; height: 36px; }
[data-theme="dark"] .g-pk-win .g-ic { background: none; }
.g-act-plant .g-act-name { align-self: end; font-size: var(--fs-h3); line-height: 1.3; }
.g-act-plant .g-act-cost { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g4) var(--g8); font-size: var(--fs-body); }
.g-pk-free { font-size: var(--fs-fine); color: var(--cold); padding: 0 var(--g8); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cold); line-height: 20px; }
.g-act-plant .g-act-line, .g-act-plant .g-band, .g-act-plant .g-chips, .g-act-plant .g-pk-note { grid-column: 1 / -1; }
.g-act-line, .g-act-plant .g-pk-note { font-size: var(--fs-fine); font-weight: 500; }
.g-act-plant .g-band { width: 120px; height: 20px; }
.g-act:disabled.g-act-plant { box-shadow: none; transform: none; }

/* 舞台の上の HUD のカード (紙のタグ + 短いテープ・行の位置は JS が STAGE_GEO の % で入れる・右の端は音の錠) */
.g-hud-l { position: absolute; inset: 0; }
.g-hud-row { position: absolute; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8) var(--g12); }
.g-hud-e { position: absolute; }
.g-hc {
  position: relative; display: flex; align-items: center; gap: var(--g8); min-height: 46px; margin: 0; padding: var(--g4) var(--g12) var(--g4) var(--g8);
  border-radius: 4px; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s); pointer-events: auto;
}
.g-hc::before { top: -5px; left: 50%; width: 40px; height: 11px; margin-left: -20px; transform: rotate(-4deg); }
.g-hc-t { display: flex; flex-direction: column; line-height: 1.25; }
.g-hc-k { font-size: var(--fs-fine); font-weight: 700; }
.g-hc-v { font-size: var(--fs-h3); font-weight: 700; white-space: nowrap; }
.g-hc-cal { flex: none; width: 24px; height: 24px; background: url(/assets/game-board-cal.4da6792e.svg) center / 100% 100%; }
.g-hc-sep { align-self: stretch; width: 1px; margin: var(--g4) var(--g4); background: var(--g-rule); }
/* HUD の「買う」(紙のカードのボタン・右肩に買える数の丸 = 藍・0 なら出さない) */
.g-hc.g-hc-shop { justify-content: center; min-width: 44px; min-height: 44px; border: 0; font-family: inherit; cursor: pointer; } /* 見える尺も 44 × 44 (UI / UX 監査 第 5 回・行の他のカードは高さのまま中央に揃える) */
.g-hc-shop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-hc-shop[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--g-sel), var(--g-drop-s); }
/* 「買う」の押せる範囲は 44 × 44 px 以上 (見た目は変えず、透明の面を真ん中から広げる・600 px 未満の 28 × 40 では左右 8 と上下 2 で、隣のカードとの間 8 の中に収まる) */
.g-hc-shop::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.g-shop-n {
  position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 var(--g4); border-radius: 12px;
  background: var(--g-paper); box-shadow: inset 0 0 0 2px var(--cold); color: var(--cold); font-size: var(--fs-fine); font-weight: 700; line-height: 24px; text-align: center;
}
/* 効果音の段の丸 (丸い紙・印 + 段の語「中」・オフは印が sound-off で縁が破線) */
.g-snd {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s); pointer-events: auto;
  font-family: inherit; font-size: var(--fs-fine); font-weight: 700; line-height: 1.1; cursor: pointer;
}
.g-snd[data-level="off"] { outline: 1px dashed var(--border-interactive); outline-offset: -3px; }
.g-snd:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-snd .g-ic { width: 20px; height: 20px; }

/* 区画のボタン (透明・位置は JS が箱の % で入れる・番号と名前のラベルは前の板の左・状態のラベルは前の板の右上の縁に吊るす・選択中は絵の橙のステッチの台紙と番号の丸) */
.g-plot {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--fs-body); pointer-events: auto; cursor: pointer;
}
.g-plot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-plot.g-view { cursor: default; }
.g-tag, .g-badge {
  position: absolute; display: inline-flex; align-items: center; gap: var(--g4); height: 24px; padding: 0 var(--g8) 0 var(--g4); border-radius: 3px;
  box-shadow: var(--g-drop-s); font-weight: 700; line-height: 1; white-space: nowrap;
}
.g-tag { transform: translateY(-50%); font-size: var(--fs-body); }
.g-tag-n {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--g-sun); color: var(--g-ink); font-size: var(--fs-fine);
}
.g-plot[aria-pressed="true"] .g-tag-n { background: var(--g-sel); }
.g-badge { transform: translateY(calc(-100% - 2px)); font-size: var(--fs-fine); }
.g-badge::before { top: -4px; right: -6px; width: 18px; height: 8px; transform: rotate(34deg); }
.g-badge .g-ic { width: 16px; height: 16px; }
.g-badge.g-good { color: var(--cold); }
.g-badge.g-bad { color: var(--hot); }
.g-bubble {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); pointer-events: none; z-index: 2;
  font-size: var(--fs-fine); font-weight: 700; background: var(--g-paper); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--cold), var(--g-drop-s); color: var(--cold);
  padding: 0 var(--g8); white-space: nowrap; opacity: 0; animation: g-pop 1.7s ease forwards;
}
@keyframes g-pop { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 手の結果の動き (水やりの滴 / 刈り取りの光 / 霜の結晶・JS が class を付け、1 秒の animation が終われば外す) */
.g-fx-water::after, .g-fx-shine::after, .g-fx-frost::after {
  content: ''; position: absolute; left: 50%; top: 28%; width: 120px; height: 80px; margin-left: -60px; pointer-events: none;
  background: no-repeat center / 100% 100%; animation: g-fx 1s ease-out both;
}
.g-fx-water::after { background-image: url(/assets/game-board-fx-water.ee7a6d96.svg); }
.g-fx-shine::after { background-image: url(/assets/game-board-fx-shine.4663f95c.svg); }
.g-fx-frost::after { background-image: url(/assets/game-board-fx-frost.5fa74f90.svg); }
@keyframes g-fx { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1.1); } }
/* 環境の動き (舞台の SVG の雲の層が横へ流れる = 1 周で W だけ動く・蝶の羽が揺れる)。1 周の秒は風の 5 段 (0〜2 / 2〜5 / 5〜8 / 8〜12 / 12 m/s 以上・390 の g-drift-n も同じ) */
.g-stage-svg .g-drift, .g-diary-sky .g-drift { animation: g-drift 55s linear infinite; }
.g-stage-svg .g-drift-n { animation-name: g-drift-n; }
.g-drift.g-drift-w0 { animation-duration: 120s; }
.g-drift.g-drift-w1 { animation-duration: 80s; }
.g-drift.g-drift-w2 { animation-duration: 55s; }
.g-drift.g-drift-w3 { animation-duration: 35s; }
.g-drift.g-drift-w4 { animation-duration: 22s; }
@keyframes g-drift { from { transform: translateX(0); } to { transform: translateX(960px); } }
@keyframes g-drift-n { from { transform: translateX(0); } to { transform: translateX(390px); } }
.g-stage-svg .g-sway { transform-box: fill-box; transform-origin: center; animation: g-sway 1.6s ease-in-out infinite alternate; }
@keyframes g-sway { from { transform: scaleX(1); } to { transform: scaleX(0.55); } }
/* 降り物の動き (雨 2 層と雪 2 層は高さ 160 の柄を 1 周で 1 つ分落ちる・風の層は雲より速く W だけ流れる・猛暑の揺らぎは上下)。どれも g-mv で、減らす設定では止める */
.g-stage-svg .g-rain-a, .g-diary-sky .g-rain-a { animation: g-rain 0.5s linear infinite; }
.g-stage-svg .g-rain-b, .g-diary-sky .g-rain-b { animation: g-rain 0.9s linear infinite; }
.g-stage-svg .g-snow-a, .g-diary-sky .g-snow-a { animation: g-snow 7s linear infinite; }
.g-stage-svg .g-snow-b, .g-diary-sky .g-snow-b { animation: g-snow 11s linear infinite; }
.g-stage-svg .g-blow, .g-diary-sky .g-blow { animation: g-drift 8s linear infinite; }
.g-stage-svg .g-blow-n { animation-name: g-drift-n; }
.g-stage-svg .g-heat, .g-diary-sky .g-heat { animation: g-heat 2.4s ease-in-out infinite alternate; }
@keyframes g-rain { from { transform: translateY(0); } to { transform: translateY(160px); } }
@keyframes g-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(8px, 80px); } 100% { transform: translate(0, 160px); } }
@keyframes g-heat { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* 雷の光 (雲の中が 23 / 29 / 37 秒に 1 回またたく・開いて 1 秒ほどで最初の 1 回) */
.g-stage-svg .g-bolt-a, .g-diary-sky .g-bolt-a { animation: g-bolt 23s linear infinite; }
.g-stage-svg .g-bolt-b, .g-diary-sky .g-bolt-b { animation: g-bolt 29s linear infinite; }
.g-stage-svg .g-bolt-c, .g-diary-sky .g-bolt-c { animation: g-bolt 37s linear infinite; }
@keyframes g-bolt { 0% { opacity: 0; } 3% { opacity: 0.9; } 3.6% { opacity: 0.25; } 4.4% { opacity: 0.8; } 6%, 100% { opacity: 0; } }
/* 夏の夜の蛍 (光が 3.2 / 4.1 / 5.3 秒で明滅・g-mv なので減らす設定では止まって明るいまま) */
.g-stage-svg .g-ffly-a { animation: g-ffly 3.2s ease-in-out infinite; }
.g-stage-svg .g-ffly-b { animation: g-ffly 4.1s ease-in-out infinite; }
.g-stage-svg .g-ffly-c { animation: g-ffly 5.3s ease-in-out infinite; }
@keyframes g-ffly { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* きのうの実測 5 枚 (内側のカード・ラベルの左に印・値は 16 の太字・平年差だけ符号の色) */
.g-today { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g8); margin: 0; }
.g-today > div {
  grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: var(--g4); padding: var(--g8) var(--g4);
  border-radius: 4px; background-color: var(--g-paper-2); box-shadow: inset 0 -2px 0 var(--g-edge); min-width: 0;
}
.g-today > div:nth-child(n+4) { grid-column: span 3; }
.g-today dt { display: flex; align-items: center; gap: var(--g4); font-size: var(--fs-fine); font-weight: 700; line-height: 24px; }
.g-today dd { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 22px; white-space: nowrap; }

/* 罫の紙の表 (ink の淡い罫・1 列目の右に余白の線・中央揃え) */
.g-rtbl { width: 100%; border-collapse: collapse; text-align: center; font-feature-settings: "palt"; }
.g-rtbl th { font-size: var(--fs-fine); font-weight: 700; border-bottom: 1px solid var(--g-rule); padding: 0 var(--g4) var(--g8); line-height: 1.35; }
.g-rtbl td { padding: var(--g8) var(--g4); border-bottom: 1px solid var(--g-rule); white-space: nowrap; }
.g-rtbl tr > :first-child { border-right: 1px solid var(--g-margin); }
.g-rtbl tbody tr:last-child td { border-bottom: 0; }
.g-rtbl td.g-wrap { white-space: normal; text-align: left; }
.g-rtbl tbody th { padding: var(--g8) var(--g4); font-size: var(--fs-body); text-align: left; border-bottom: 1px solid var(--g-rule); }
.g-rtbl tbody tr:last-child th { border-bottom: 0; }
/* build が表を包む横スクロールの器 (.table-scroll) の端の覆いはサイトの地色 (--bg) なので、紙の上では紙の色に (暗い面で両端に帯が出ていた) */
.g-sheet .table-scroll { --bg: var(--g-paper); }
/* 行の見出しがある表 (この町の記録) は列の見出しも左に揃える */
.g-rec-tbl > thead th:first-child { text-align: left; }

/* 朝の報告の盤 (1 列・紙の間 16)。見出し「畑の出来事」は台の上の紙のラベル・「畑へ」は青い紙のボタン・友人の畑へは紙のボタン 1 つ */
.g-board-low.g-board-one, .g-board-one > .g-board-col { gap: var(--g16); }
.g-diaries { display: flex; flex-direction: column; gap: var(--g16); min-width: 0; }
.g-board .g-board-label {
  align-self: flex-start; padding: var(--g4) var(--g12); border-radius: 4px; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s);
  background: var(--g-paper) url(/assets/game-board-grain.6a1a2019.svg) repeat 0 0 / 128px 128px;
}
.g-board .g-nav.g-nav-1 { grid-template-columns: auto; justify-content: start; }
.g-go { margin: 0; }
.g-board .g-btn-main {
  margin: 0 0 3px; border: 0; border-radius: 7px; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000), var(--g-drop-s); transition: transform 0.06s;
}
.g-board .g-btn-main:active { transform: translateY(3px); box-shadow: 0 0 0 color-mix(in srgb, var(--accent) 60%, #000), var(--g-drop-s); }
/* 日記の 1 枚 (罫の紙 + 上の縁にテープ 1 本)。頭 = 天気と町の帯の絵 (幅いっぱい 8 : 1・600 px 未満は 5 : 1 で真ん中を切り出す) の上に
   左上の日付と右下の天気のラベル (HUD のカードと同じ紙 + 1 px の罫 + 700)・行 = 印は余白の線の左・文は右・行ごとに罫 */
.g-diary.g-sheet { padding: 0 0 var(--g16); gap: var(--g16); }
/* 頭の高さは幅 / 8 (600 px 未満 / 5) で、ラベル 2 段 + 端と間の 8 × 3 より低くはしない (88 = 8 + 32 + 8 + 32 + 8・600 px 未満 72 = 8 + 24 + 8 + 24 + 8・帯は slice なので切り出しが狭まるだけ) */
.g-diary-head { position: relative; aspect-ratio: 8 / 1; min-height: 88px; overflow: hidden; border-radius: 4px 4px 0 0; }
.g-diary-head > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.g-diary-head .g-tag {
  transform: none; height: 32px; gap: var(--g4); padding: 0 var(--g16) 0 var(--g8); border-radius: 4px; font-size: var(--fs-h3);
  box-shadow: inset 0 0 0 1px var(--g-rule), var(--g-drop-s);
}
/* 字が先のラベル (日付・まとめの天気) は左右の余白を同じに (印が先のラベルは印の側だけ狭い) */
.g-diary-head .g-day-head, .g-diary-head .g-tag-tx { padding-left: var(--g16); }
.g-diary-head .g-day-head { top: var(--g8); left: var(--g8); margin: 0; letter-spacing: 0; }
.g-diary-wx { right: var(--g8); bottom: var(--g8); }
.g-diary-wx > span + svg { margin-left: var(--g4); }
.g-diary-head .g-ic { width: 24px; height: 24px; }
.g-diary > .g-lines { position: relative; gap: 0; padding: 0 var(--g16); }
.g-diary > .g-lines::before { content: ''; position: absolute; top: 0; bottom: 0; left: 52px; width: 1px; background: var(--g-margin); }
.g-diary .g-li { gap: var(--g24); padding: var(--g4) 0; border-bottom: 1px solid var(--g-rule); }

.g-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g10); }

/* 表と一覧 (罫は 1 px・中央揃え・行頭の点は字の色) */
.g-tbl { width: 100%; border-collapse: collapse; text-align: center; font-feature-settings: "palt"; }
.g-tbl th { font-size: var(--fs-fine); font-weight: 700; border-bottom: 1px solid var(--rule-ink); padding: 0 var(--g4) var(--g8); line-height: 1.35; }
.g-tbl td { padding: var(--g8) var(--g4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.g-tbl td.g-wrap { white-space: normal; text-align: left; }
.g-tbl tbody th { border-bottom: 1px solid var(--border); }
.g-tbl tbody tr:last-child td, .g-tbl tbody tr:last-child th { border-bottom: 0; }
/* 実測の表の日の列 (日の左に天気の印 20 px) と町の記録の列 (名の左に記録の印 20 px) */
.g-day, .g-rec { display: inline-flex; align-items: center; gap: var(--g4); vertical-align: middle; }
.g-day .g-ic, .g-rec .g-ic { width: 20px; height: 20px; flex: none; }
.g-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--g8); }
/* 一覧の 1 行は行頭にピクトグラム (点の箇条書きは置かない・10-21 ユーザー)。印は 24 px で 1 行目の行の高さ 24 px に揃える */
.g-li { display: flex; align-items: flex-start; gap: var(--g8); line-height: 24px; }
.g-li > span:last-child { min-width: 0; }
.g-ic-wrap { flex: none; display: flex; }
.g-ic { display: block; width: 24px; height: 24px; flex: none; }
/* ダークの面では墨の線が地に沈むので、印の下に字の色の板を敷く (絵の色は変えない) */
[data-theme="dark"] .g-ic { background: var(--text); border-radius: 4px; }
/* 作物の性質 / 状態のラベル (印 + 字だけ・枠と角丸なし = 艦隊のピル全廃の規約・横に並ぶ 2 つ以上は「 / 」で区切って折り返す) */
.g-chips { display: flex; flex-wrap: wrap; gap: var(--g4) var(--g8); }
.g-chip { display: inline-flex; align-items: center; gap: var(--g4); font-size: var(--fs-fine); font-weight: 700; line-height: 1.5; }
.g-chips > .g-chip:not(:last-child)::after { content: '/'; margin-left: var(--g4); font-weight: 500; color: var(--text); } /* 区切りは前の字の後ろ (折り返した行の頭に「/」を出さない) */
.g-care-head .g-chip { font-size: var(--fs-body); } /* 手入れの見出しの状態と格は見出しの字に並べて本文の大きさ */
.g-chip .g-ic { width: 18px; height: 18px; }
/* 温度の帯 (0〜40 ℃・数字は帯の下に HTML で) と平年の今ごろの表 (作物の列に印と名前と性質のラベル・390 で横スクロール 0) */
.g-band { display: block; width: 120px; height: 20px; flex: none; }
.g-temp { display: flex; flex-direction: column; align-items: center; gap: var(--g4); }
.g-crop-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g4) var(--g8); }
.g-crop-cell > .g-fine { flex-basis: 100%; }
.g-crop { display: flex; align-items: center; gap: var(--g8); font-weight: 700; }
.g-season-tbl td { vertical-align: top; }
.g-day-head { font-size: var(--fs-h3); font-weight: 700; }

/* 1 文字ずつ (遅れは JS が span の animationDelay に入れる・叩くと全部・動きを減らす設定では最初から全部) */
.g-type .g-ch { animation: g-type-in 0.01s steps(1, end) backwards; }
.g-type.g-type-done .g-ch { animation: none; }
/* 紙ごとの打ち始め: 見えるのを待つ紙 (g-wait・2 枚目から) の字は隠したまま。g-wait を外した時に animation が付き、遅れはその時から数える */
.g-type:not(.g-type-done) .g-wait .g-ch { visibility: hidden; animation: none; }
/* 字の素の形は見える形。隠すのは遅れの間 (backwards) だけで、終わった後の値を forwards に頼らない (forwards では opacity でも visibility でも
   Chromium で出ないままの字が残った・10-20 / 10-21 の実測) */
@keyframes g-type-in { from, to { visibility: hidden; } }

/* 友人の畑・図鑑・引き継ぎ */
.g-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g10); }
.g-tab { min-height: 48px; padding: var(--g4) var(--g8); font-weight: 700; }
/* 別の端末で続ける / 町を変える の専用の面 (/game/transfer/・1 列・箱と箱は 16) */
.g-transfer-page { display: flex; flex-direction: column; gap: var(--g16); }
.g-inv-out, .g-tr-out { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); }
.g-inv-out code, .g-tr-out code {
  flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-fine); border: 1px solid var(--border); border-radius: 2px; padding: var(--g4) var(--g8);
}
.g-tr-in { font-family: inherit; font-size: var(--fs-h3); line-height: inherit; width: 100%; min-height: var(--tap-min); padding: 0 var(--g8); border: 1px solid var(--border-interactive); border-radius: 2px; color: var(--text); background: var(--bg); }

/* 図鑑の盤 (PR-10・クラフト紙の台の上に見出しの紙のラベルと標本カードと紋章を直に並べる)。ラベルは見出しと目盛の棒を 1 行に */
.g-bk-sec { display: flex; flex-direction: column; gap: var(--g16); min-width: 0; }
/* 目盛の棒は span (#g-bk-cmeter / #g-bk-tmeter) の中の svg なので、幅を決めるのは span (120 から 48 まで縮む) で svg はその幅いっぱい。
   見出しは折らない・48 でも入らない幅 (320 の件数 2 桁) は目盛の棒だけが見出しの下の行へ回る */
.g-board .g-bk-head { flex-wrap: wrap; gap: var(--g8) var(--g16); padding: var(--g8) var(--g16); }
.g-board .g-bk-head > h2 { flex: none; }
.g-board .g-bk-head > span { flex: 1 1 48px; max-width: 120px; }
.g-bk-head .g-meter { width: 100%; }
/* 標本カード (種の袋を大きくした型・口のぎざぎざは作物の色・絵の枠の下に名前と取った日)。700 px 以上 6 列・未満 3 列・カードの間 8 (行の間 16)・町の間 24・
   字と縁は左右 8 / 下 16 (まだの枠の破線は内側 8 で、「まだ」は破線から 8)。まだの枠は白紙にミシン目 (破線の縁) と「まだ」だけ (作物の名は読み上げだけ) */
.g-bk-towns { display: flex; flex-direction: column; gap: var(--g24); min-width: 0; }
.g-bk-town { display: flex; flex-direction: column; gap: var(--g16); min-width: 0; }
.g-board .g-bk-town > h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.35; letter-spacing: normal; }
.g-specs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g16) var(--g8); }
.g-spec {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--g4); min-width: 0; padding: var(--g16) var(--g8);
  text-align: center; line-height: 1.35; border-radius: 4px; box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s);
}
.g-spec-art { display: block; width: 100%; height: auto; border-radius: 4px; }
.g-spec-name, .g-spec-date { font-size: var(--fs-fine); }
.g-spec-name { font-weight: 600; } /* 作物名と記録の名 (最高 / 最低 / 雨 / 風 / 雪) は項目名の 600 (値と日の 700 に負けない) */
.g-spec-date { margin-top: auto; font-weight: 700; } /* 日と「まだ」はカードの下の端に揃える */
.g-spec.g-spec-off { box-shadow: none; outline: 1px dashed var(--g-rule); outline-offset: -8px; }
.g-spec-off .g-spec-date { font-weight: 500; }
/* 初めての収穫の標本カード (作物 9・1000 px 以上は 9 枚が 1 行で列の間 4 (1280 の盤でカードの中 78 px に「ラディッシュ」12 px が 1 行)・700〜999 は 6 + 3・700 未満は 3 × 3) */
@media (min-width: 1000px) { .g-specs:not(.g-specs-rec) { grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--g4); } }
/* 町の記録のカード (700 px 以上は 5 枚が 1 行・値は 1 段大きく 700・単位と日は細字) */
.g-specs.g-specs-rec { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-spec-val { font-size: var(--fs-h3); font-weight: 700; }
.g-spec-unit { font-size: var(--fs-fine); font-weight: 500; }
.g-spec-rec .g-spec-date { font-weight: 500; }
/* 称号の紋章の壁 (600 px 以上 4 列・未満 3 列・列の間 16・行の間 24)。1 つ = 紋章 64 の下に名前と取った日の紙のラベル (ラベルは枠の幅いっぱいで同じ行は同じ高さ・字と縁は上下 8 / 左右 12 (390 px 未満は左右 8)・取った名前は 700)・
   隠し称号の取る前は紋章の真ん中に「？」(紋章の紙の上の字なので両方の面で絵の墨の色) */
.g-medals { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g24) var(--g16); }
.g-medal-cell { display: flex; flex-direction: column; align-items: center; gap: var(--g4); min-width: 0; text-align: center; }
.g-medal-art { position: relative; display: block; width: 64px; height: 64px; }
.g-medal { display: block; flex: none; }
.g-medal-q { position: absolute; left: 0; right: 0; top: 14px; font-size: var(--fs-h2); font-weight: 700; line-height: 26px; color: var(--g-ink); }
.g-medal-tag {
  align-self: stretch; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: var(--g8) var(--g12); border-radius: 4px; line-height: 1.35;
  box-shadow: inset 0 -3px 0 var(--g-edge), var(--g-drop-s);
}
/* 名前は区切りの境 (<wbr>) だけで折る (keep-all = 字の間では折らない・区切りの中の空白は U+00A0・overflow-wrap: anywhere は .g-app から継いだ非常用) */
.g-medal-name { font-size: var(--fs-body); text-wrap: balance; word-break: keep-all; }
.g-got .g-medal-name { font-weight: 700; }
/* 390 px 未満はラベルの左右を 8 に (375 / 360 で「品質 100 % で」などの区切りが 1 行に入る・3 列のまま・390 以上は 12) */
@media (max-width: 389px) { .g-medal-tag { padding-left: var(--g8); padding-right: var(--g8); } }
/* 390 未満 (375 / 360) の HUD: 1 行目 (日付 + 資金 + 買う) は折り返さない (折り返すと 2 行目のカードの下に「買う」が潜る)・場所を空けるため日付のカードの暦の印は出さない。
   2 行目 (天気 + 種 + 堆肥) は折り返してよい (3 段目は区画の上の空に収まる・積雪の日の 390 も同じ) */
@media (max-width: 389px) { .g-hc-cal { display: none; } .g-hud-row:first-child { flex-wrap: nowrap; } }

/* 広告の器と両脇の板 (JS が html に data-g-rail を付けた時だけ)。高さは ins 自身に最終の大きさで予約し (hidden の間は
   [hidden] の規則で出ない)、埋まらなかった枠 (data-ad-status="unfilled") は ins ごと消す。器と置き場は display: contents (列の隙間を ins だけが持つ = 閉じた枠に空白を残さない) */
[id^="g-ad-spot-"], .g-ad:not(.g-ad-preview) { display: contents; }
.g-ad > ins { display: block; min-height: 280px; margin-top: var(--g4); }
.g-rail > ins { display: block; min-height: 600px; }
.g-ad > ins.adsbygoogle[data-ad-status="unfilled"], .g-rail > ins.adsbygoogle[data-ad-status="unfilled"] { display: none; }
.g-ad-preview { border: 2px dashed var(--accent); display: flex; align-items: center; justify-content: center; }
.g-ad.g-ad-preview { min-height: 280px; margin-top: var(--g4); }
/* 友だちの面の評価欄 (面の一番下) は真上が広告の器なので、器との間を 150 px 以上あける (24 × 6 = 144 + 評価欄の上の余白) */
.g-app #g-fr-main:not([hidden]) + .fb { margin-top: calc(var(--g24) * 6); }
:root { --g-rail-from: 1280; } /* 両脇の板を出す描画の幅 (スクロールバーを除いた幅・JS が読む) */
.g-rail { display: none; position: absolute; width: 160px; min-height: 600px; }
html[data-g-rail] .g-rail { display: block; }
html[data-g-rail] .g-rail-l { left: 10px; }
html[data-g-rail] .g-rail-r { right: 10px; }
html[data-g-rail] .g-app { max-width: min(960px, 100vw - 2 * 184px); margin-inline: auto; } /* 両脇の板 160 + 端 10 + 隙間 14 = 184 */

/* 共有の列 (畑と報告の末尾・site.css の .share と他の面の共有は変えない): 上の罫からボタンまで 24 px・ボタンの下からフッターの罫まで 24 px
   (10-21 ユーザー「『共有:』のボタンが下の線に密着している」)。「共有:」の字は本文の色 (薄い灰の字を置かない) */
.g-app .share { margin-top: 0; padding-top: var(--g24); padding-bottom: var(--g24); } /* 上の部品との間は .g-app の gap だけ (site.css の 28 は他の面のまま) */
.g-app .share-label { color: var(--text); }

/* 手引き (止めて光らせて押すまで待つ・スクロールは塞がない) */
.g-coach {
  position: fixed; left: 50%; bottom: calc(var(--g12) + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 2 * var(--g12)));
  z-index: 70; background: var(--bg); border: 2px solid var(--accent); border-radius: 8px; padding: var(--g12) var(--g16); font-weight: 700;
}
.g-glow { position: relative; z-index: 60; outline: 4px solid var(--accent); outline-offset: 2px; animation: g-glow 1.2s ease-in-out infinite; }
/* 区画のボタンは光らせても舞台の上の % の位置のまま (relative にしない) */
.g-plot.g-glow { position: absolute; }
@keyframes g-glow { 50% { outline-color: var(--cold); } }

/* 舞台の下の縁の器は 1024 px 以上だけ (face-care-dlg.mjs が中身を移す・1023 以下は空で出さない) */
.g-stage-foot { display: none; }

/* 買う面 (設計書 §14-16): <dialog> の showModal で画面の上に出す。600 px 以上は画面の中央に 3 列 × 2 行のカード・600 px 未満は下から出る全幅に 2 列 × 3 行・
   ページも面の中もスクロールなし (画面より高い時だけ中をスクロール)・背面は紙の色の薄い幕。区画の格の行 (.g-shop-row) は手入れの紙の中 */
.g-board-low, .g-board-col { position: relative; }
.g-shop { position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 760px; border: 0; padding: var(--g16); z-index: 20;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; } /* 画面より高い時 (横向きのスマホ・PC の拡大) だけ中をスクロール (dvh の無い環境は vh) */
.g-shop:not([open]), .g-care-dlg:not([open]) { display: none; } /* 手入れの紙のポップアップも閉じている間は出さない */
.g-shop::before { display: none; }
.g-shop::backdrop { background: color-mix(in srgb, var(--g-paper-under) 60%, transparent); }
.g-shop-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8) var(--g12); }
.g-shop-cash { margin-right: auto; }
.g-shop-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g12); overflow: visible; }
.g-shop-card { display: flex; flex-direction: column; gap: var(--g8); min-width: 0; padding: var(--g12); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--g-rule); }
.g-shop-card .g-shop-name { align-items: center; flex-wrap: nowrap; }
.g-shop-card .g-shop-tail { margin-top: auto; align-items: flex-start; text-align: left; }
.g-shop-card .g-shop-buy { width: 100%; }
.g-shop-card .g-chips { flex-direction: column; align-items: flex-start; gap: var(--g8); }
.g-shop-card .g-chips > .g-chip::after { content: none; }
.g-shop-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--g8) var(--g12); padding: var(--g8) 0; border-top: 1px solid var(--g-rule); }
.g-shop-main, .g-shop-tail { display: flex; flex-direction: column; gap: var(--g4); min-width: 0; }
.g-shop-tail { align-items: flex-end; text-align: right; }
.g-shop-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g8); }
/* 2 段目の「N 円で買う」(3 秒で 1 段目に戻すのは face-shop.mjs の Web Animations の終わり) */
.g-shop-arm { border-color: var(--g-sel); box-shadow: 0 var(--g-lift) 0 var(--g-sel); }
/* 手入れの紙のポップアップ (全部の幅・2 巡目 §9-5・600 px 以上は紙の幅 560・画面の中央・599 px 以下は下の @media で画面の下の板・画面に入る時は中のスクロールなし・入らない時 (植えるカード 9 枚・拡大) だけ中を送る・幕は 35 %)。
   器は透明で、紙 (#g-panel) の見た目はそのまま (器の余白 = 角のテープ (上端 約 −19) と影を切らない)・「閉じる」は見出しの右で、中を送っても右上に残る (sticky) */
.g-app .g-care-dlg {
  position: fixed; inset: 0; margin: auto; width: min(576px, calc(100% - 32px)); height: fit-content;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto;
  padding: var(--g20) var(--g8) var(--g8); border: 0; background: none; box-shadow: none; z-index: 20;
}
.g-app .g-care-dlg:focus { outline: none; } /* 開いた時の focus は器 (枠は出さない・中のボタンは各自の枠) */
/* 手引きの吹き出しは紙の下段 (植えるカード) に掛けない = 上・左右は dialog の幅に合わせ、右は「閉じる」(右から 20〜88) を覆わない 100 (吹き出しは fixed なので % は画面の幅) */
.g-app .g-care-dlg > .g-coach {
  top: var(--g12); bottom: auto; transform: none; width: auto; max-width: none;
  left: calc((100% - min(576px, 100% - 32px)) / 2 + var(--g12)); right: calc((100% - min(576px, 100% - 32px)) / 2 + 100px);
}
.g-app .g-care-dlg::before { display: none; }
.g-app .g-care-dlg::backdrop { background: color-mix(in srgb, var(--g-paper-under) 35%, transparent); }
/* 「閉じる」は紙より前の sticky (高さ 44 を負の下の余白で打ち消して紙に重ねる・右 12・上 8 内側 = 見出しの 1 行目の中心に揃える・器の flex の gap 12 を含めて上 20 と負の下 20 + 44 で紙の位置は不変・float は紙の flex の箱を狭めるので使わない・器は .g-sheet の flex の列なので縮めない) */
.g-app .g-care-dlg > .g-dlg-close { position: sticky; top: var(--g12); z-index: 2; display: flex; flex: none; width: fit-content; height: 44px; min-height: 0; margin: var(--g20) var(--g12) calc(-44px - var(--g20)) auto; }
.g-app .g-care-dlg #g-pn-title { padding-right: 88px; }
.g-app .g-care-dlg .g-act-plant .g-act-name { font-size: var(--fs-body); } /* 3 列の袋 (幅 165) に「ラディッシュ」を 1 行で (600 px 未満の 2 列と同じ大きさ) */
/* 599 px 以下は画面の下の板 (買う面 .g-shop と同じ形・ページは動かさない・本体のスクロールの錠は付けない)・吹き出しは左 12 と「閉じる」を覆わない右 100 */
@media (max-width: 599px) {
  .g-app .g-care-dlg { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: var(--g20) var(--g8) var(--g8); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  .g-app .g-care-dlg > .g-coach { left: var(--g12); right: 100px; }
}
/* 手入れの紙の区画の格の行 (見出しの直下・格 3 と区画なしは空なので出さない) */
.g-grade:empty { display: none; }
/* 600 px 未満と低い画面 (横向きのスマホ) は、カードの余白を詰める (設計書 §14-16 の決め 3) */
@media (max-width: 599px), (max-height: 560px) {
  .g-shop-list { gap: var(--g8); }
  .g-shop-card { gap: var(--g4); padding: var(--g8); }
}
@media (max-width: 599px) {
  .g-shop { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: var(--g12); border-radius: 8px 8px 0 0; }
  .g-shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .g-type .g-ch { animation: none; }
  .g-type:not(.g-type-done) .g-wait .g-ch { visibility: visible; }
  .g-glow, .g-bubble { animation: none; }
  .g-bubble { opacity: 1; }
  .g-stage-svg .g-drift, .g-stage-svg .g-sway { animation: none; }
  .g-diary-sky .g-drift { animation: none; }
  .g-stage-svg .g-mv, .g-diary-sky .g-mv { animation: none; }
  .g-fx-water::after, .g-fx-shine::after, .g-fx-frost::after { animation: none; display: none; }
}
/* 標本カードは 700 px 未満で 3 列 (町の記録の 5 枚は 3 + 2・600〜699 px の 6 列では 1 枚 90 px 前後で「ラディッシュ」が字と縁 8 で 1 行に入らない)・
   紋章の名前も 700 px 未満は 1 段小さく (600〜699 px の 4 列はラベルの中 98 px で、14 px の「品質 100 % で」などの区切りが 1 行に入らない) */
@media (max-width: 699px) { .g-specs, .g-specs.g-specs-rec { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-medal-name { font-size: var(--fs-fine); } }
/* 紋章の壁は 600 px 未満で 3 列 */
@media (max-width: 599px) { .g-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 平年の今ごろの表の帯は 600 px 未満で 96 × 16 (3 列を 390 の箱に入れる) */
@media (max-width: 599px) { .g-season-tbl .g-band { width: 96px; height: 16px; } }
/* 900 px 未満の盤: 下の紙は 1 列で 手入れ → きのうの実測 → 7 日の表 → 平年の今ごろ の順 (列の箱を外して台の格子に並べる)・
   区画のラベルは 1 段小さく、状態のラベルは前の板の上の縁から 4 px 上に吊るす (600 〜 899 px の 3 列は前の板が幅 136 〜 210 px で、2 つのラベルが上下に並ぶ) */
@media (max-width: 899px) {
  .g-board-col { display: contents; }
  .g-tag { height: 20px; font-size: var(--fs-fine); }
  .g-badge { height: 20px; transform: translateY(calc(-100% - 4px)); }
}
/* 600 px 未満の平年の表: 1 行目に作物と性質のラベル (横に並べる)・2 行目に帯と育ちやすい気温と収穫までの日数 (列の見出しも同じ 2 行の形) */
@media (max-width: 599px) {
  .g-season-tbl, .g-season-tbl thead, .g-season-tbl tbody { display: block; }
  .g-season-tbl tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g4) var(--g12);
    padding: var(--g8) var(--g4); border-bottom: 1px solid var(--g-rule);
  }
  .g-season-tbl tbody tr:last-child { border-bottom: 0; }
  .g-season-tbl th, .g-season-tbl td { padding: 0; border: 0; }
  .g-season-tbl tr > :first-child { grid-column: 1 / -1; border-right: 0; text-align: left; }
  .g-season-tbl tr > :nth-child(2) { text-align: left; }
  .g-season-tbl th br { display: none; }
  .g-season-tbl .g-temp { flex-direction: row; gap: var(--g8); }
}
/* 600 px 未満の盤: 舞台は画面の端から端まで (面の余白 16 を打ち消す)・舞台の絵は 390 × 640・HUD の値は 1 段小さく・種の袋は 2 列・実測のカードは 3 + 2 */
@media (max-width: 599px) {
  .g-board { margin-inline: calc(-1 * var(--g16)); border-radius: 0; }
  .g-stage-art { aspect-ratio: 390 / 640; }
  .g-board-low { padding: var(--g24) var(--g12); }
  .g-hc { min-height: 40px; gap: var(--g4); padding: var(--g4) var(--g8) var(--g4) var(--g4); }
  .g-hc-v { font-size: var(--fs-body); }
  .g-hc .g-ic, .g-hc-cal { width: 20px; height: 20px; }
  /* HUD の 2 行は 600 px 未満では間 8・余白 4 で詰め、「買う」は印と買える数だけ・堆肥は印と数だけ (語と「/ 6」は読み上げだけ)。390 の 1 行目 312 px に 日付 + 資金 + 買う、2 行目 370 px に 天気 + 種 + 堆肥 */
  .g-hud-row { column-gap: var(--g8); }
  .g-hud-row > .g-hc { padding: var(--g4); }
  .g-hc-shop > .g-hc-v, .g-hc-compost .g-hc-k, .g-hc-of { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g-act-plant .g-act-name { font-size: var(--fs-body); }
  .g-diary-head { aspect-ratio: 5 / 1; min-height: 72px; }
  .g-diary-head .g-tag { height: 24px; padding: 0 var(--g8) 0 var(--g4); font-size: var(--fs-body); }
  .g-diary-head .g-day-head, .g-diary-head .g-tag-tx { padding-left: var(--g8); }
  /* 天気のラベルの「最高」「最低」は 600 px 未満では読み上げだけ (390 の頭 366 に積雪の日のラベルが入らない)・積雪の日は寒暖計も隠す (320 の頭 296 に入れる) */
  .g-diary-wx .g-hc-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g-diary-wx.g-wx-sd svg ~ svg { display: none; }
  .g-diary-head .g-ic { width: 20px; height: 20px; }
}
@media (min-width: 600px) {
  .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-howto-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3 コマを 1 行に (2 列だと 3 コマ目だけが 2 行目に残る) */
  .g-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-acts.g-acts-plant { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-today { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .g-today > div, .g-today > div:nth-child(n+4) { grid-column: auto; }
  .g-btns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .g-ad > ins, .g-ad.g-ad-preview { min-height: 250px; }
}
/* 900 px 以上の盤: 手入れ (左) と きのうの実測 (右 296) を 2 列・その下に 7 日の表と平年の今ごろを全幅・右の列の実測のカードは 2 列 (5 枚目の平年差は全幅) */
@media (min-width: 900px) {
  .g-app { --g-sb: var(--g24); }
  .g-board-low { grid-template-columns: minmax(0, 1fr) 296px; }
  .g-board-low > .g-sheet { grid-column: 1 / -1; }
  .g-board-low.g-board-one { grid-template-columns: minmax(0, 1fr); }
  .g-board-col + .g-board-col .g-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-board-col + .g-board-col .g-today > div:nth-child(5) { grid-column: 1 / -1; }
  .g-cards, .g-howto-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #g-regions, #g-prefs, #g-easy .g-btns { grid-template-columns: repeat(9, minmax(0, 1fr)); } /* 地方の 9 つを 1 行・県は 1 行の左詰め */
}
/* 1024 px 以上の畑の面 (設計書 §14-17 裁定 16:10): 板 (クラフト紙の台 1 枚) を 1 画面に = 舞台 (左・幅は高さの予算 (100dvh − 板より上 214 − 台の上下の余白 48) × 16 / 9 と列の幅の小さい方) |
   右の細い列 232 (朝の報告 → きのうの実測 → 友人の手伝い (友人に入れるの行 + 手伝いの 1 行目) → 面のリンク 1 行 → 町を変える・1280 × 650 の予算 388)。行は 4 (表示しない物の行に隙間を積まないよう、行の間は 0 で物の下に 8)。
   町のデータが無い日の文 / 届いていない日の文 / 買った文 / 町を変えるの確かめは、face-care-dlg.mjs が舞台の下の縁の器 #g-stage-foot へ移す (§14-17 追補 2・縦に並べて間 8)。
   手入れの紙は <dialog id="g-care"> の中 (face-care-dlg.mjs が移す)・実測の表 / 平年の今ごろ / 遊び方 / 共有 / 板の下の広告の器は出さない。HUD は 1 行のカードを左上から流す (音は末尾)。
   選択子は .g-app #g-farm を前に (盤の規則と ≥ 900 px の規則に勝つ・朝の報告などの他の盤は変えない) */
@media (min-width: 1024px) {
  .g-app #g-farm {
    display: grid; grid-template-columns: minmax(0, 1fr) 232px; grid-template-rows: auto auto auto 1fr; gap: 0 var(--g12); align-items: start;
    padding: var(--g24) var(--g16); border-radius: 4px;
    background: linear-gradient(var(--g-kraft-dim), var(--g-kraft-dim)), url(/assets/game-board-kraft.959d2a71.svg) repeat 0 0 / 480px 480px; background-color: var(--g-kraft);
  }
  .g-app #g-farm > .g-board, .g-app #g-farm .g-board-col { display: contents; }
  .g-app #g-farm #g-stage {
    grid-column: 1; grid-row: 1 / -1; justify-self: center; border-radius: 4px;
    width: min(100%, calc((100vh - 262px) * 16 / 9)); width: min(100%, calc((100dvh - 262px) * 16 / 9));
  }
  /* 舞台の下の縁の器 (下と左右 12 内側・縦に並べて間 8・中の文だけの紙は下の区画を押せる・リンクだけは押せる) */
  .g-app #g-farm .g-stage-foot:not([hidden]) { position: absolute; left: var(--g12); right: var(--g12); bottom: var(--g12); z-index: 3; display: flex; flex-direction: column; gap: var(--g8); pointer-events: none; }
  .g-app #g-farm .g-stage-foot > * { margin: 0; }
  .g-app #g-farm .g-stage-foot > :not(.g-sheet) { padding: var(--g8) var(--g12); border-radius: 4px; background: var(--g-paper); box-shadow: var(--g-drop); }
  .g-app #g-farm .g-stage-foot > #g-lost a { pointer-events: auto; }
  .g-app #g-farm > #g-unread, .g-app #g-farm > #g-week { grid-column: 2; grid-row: 2; min-height: 36px; margin: 0 0 var(--g8); font-size: var(--fs-body); } /* 入らない時の順 ① 朝の報告のボタンを 36 */
  .g-app #g-farm .g-board-low { position: static; grid-column: 2; grid-row: 3; display: flex; flex-direction: column; align-items: stretch; gap: var(--g8); margin: 0 0 var(--g8); padding: 0; background: none; }
  .g-app #g-farm > #g-aux-farm { grid-column: 2; grid-row: 4; margin: 0; } /* 町を変える / 別の端末で続ける の専用の面へのリンク 1 本 (右の列の末尾) */
  .g-app #g-farm > #g-aux-farm > a { white-space: normal; } /* 右の列 (232) の中で折り返す (en の「Change town / Continue on another device」が板の右へ出ていた) */
  .g-app #g-farm #g-yday { order: 1; gap: var(--g4); padding: var(--g4) var(--g12); } /* 高さ 180 以下 (見出しは h2 の大きさのまま・字の体系のガード type-scale-guard に合わせ、縦の余白 4 で吸収) */
  .g-app #g-farm #g-yday .g-sheet-sub { display: none; } /* 町と日付は HUD にある (右の列の高さを手伝いの箱に回す) */
  .g-app #g-farm #g-aim { order: 2; gap: var(--g4); padding: var(--g4) var(--g12); } /* めあての紙は #g-yday の次 (#g-help と同じ詰めた形) */
  .g-app #g-farm #g-aim .g-li { line-height: 20px; } /* 字は隠さない (行数で切らない・en の 1366 × 650 は行の字を短くして右の列を画面に収める) */
  .g-app #g-farm #g-easy-line { order: 2; gap: var(--g4) var(--g8); padding: var(--g8) var(--g12); } /* めあての紙と同じ場所 (はじめての畑の間はめあての紙を隠す) */
  /* 全部の区画の行はめあての紙の次 (DOM の順で #g-aim の後)。右の列の高さ (en の 1366 × 650) に入るよう、面のリンクと同じ文字のリンクの形で 1〜2 行 (印は隠す・不足額は字の後ろ) */
  .g-app #g-farm #g-acts-all { order: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g4) var(--g12); }
  .g-app #g-farm #g-acts-all .g-act {
    display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; color: var(--text);
    font-size: var(--fs-body); font-weight: 700; line-height: 20px; text-align: left; text-decoration: underline; text-underline-offset: 3px;
  }
  .g-app #g-farm #g-acts-all .g-act > .g-ic { display: none; }
  .g-app #g-farm #g-acts-all .g-act .g-hint { margin-left: var(--g8); font-size: var(--fs-body); font-weight: 700; }
  .g-app #g-farm #g-acts-all .g-act:disabled { outline: 0; text-decoration: none; }
  .g-app #g-farm #g-help { order: 3; gap: var(--g4); padding: var(--g8) var(--g12); }
  .g-app #g-farm #g-help .g-li { line-height: 20px; } /* 並びは face-help.mjs (友人に入れるの行 → 手伝いの 1 行目・件数は見出しに「(N 件)」)・手伝いの文は 2 行まで */
  .g-app #g-farm #g-help .g-li:not(.g-li-add) > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* 入らない時の順 ② 面のリンク 2 と専用の面へのリンクを文字のリンクの形に (面のリンクは「友人の畑 / 図鑑と称号」の 1 行・高さ 28) */
  .g-app #g-farm .g-board-low .g-nav { order: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
  /* 区切りの「/」は流れの外 (absolute) に置いて下線を伝えない・ボタンの左の余白 1.4em が居場所 */
  .g-app #g-farm .g-board-low .g-nav .button + .button { position: relative; margin-left: 1.4em; }
  .g-app #g-farm .g-board-low .g-nav .button + .button::before { content: '/'; content: '/' / ''; position: absolute; right: 100%; width: 1.4em; text-align: center; }
  .g-app #g-farm .g-board-low .g-nav .button, .g-app #g-farm #g-aux-farm a, .g-app #g-farm #g-help .g-btn {
    min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text);
    font-size: var(--fs-body); font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px;
  }
  .g-app #g-farm .g-board-low .g-nav .button, .g-app #g-farm #g-help .g-btn { line-height: 28px; text-align: left; }
  .g-app #g-farm .g-board-low > .g-board-col > #g-panel, .g-app #g-farm #g-days, .g-app #g-farm #g-season, .g-app #g-farm > #g-howto-mini, .g-app #g-farm > #g-ad-spot-farm, .g-app #g-farm > #g-card { display: none; } /* 結果カードの紙は共有の行と同じく 1023 以下だけ (畑は 1 画面) */
  .g-app #g-farm:not([hidden]) ~ .share { display: none; } /* 畑を出している時だけ (入口の面の共有は残す) */
  .g-app #g-farm #g-yday .g-today { display: flex; flex-direction: column; gap: 0; }
  .g-app #g-farm #g-yday .g-today > div { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--g8); padding: 0; background: none; box-shadow: none; }
  .g-app #g-farm #g-yday .g-today dt { line-height: 20px; }
  .g-app #g-farm #g-yday .g-today dd { font-size: var(--fs-body); line-height: 20px; }
  .g-app #g-farm #g-yday .g-today dt .g-ic, .g-app #g-farm #g-yday .g-today dt svg { width: 16px; height: 16px; }
  /* HUD: 1 行のカード (ラベルと値を横に・高さ 30・印 16)。行の箱を外して (JS の top / left は箱が無いので効かない) 左上から流して折り返す */
  .g-app #g-farm .g-stage-hud { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px; padding: var(--g8); }
  .g-app #g-farm #g-hud-l, .g-app #g-farm .g-hud-row, .g-app #g-farm #g-hud-e { display: contents; }
  .g-app #g-farm .g-stage-hud .g-hc { min-height: 30px; gap: var(--g4); padding: 2px var(--g8); }
  .g-app #g-farm .g-stage-hud .g-hc-t { flex-direction: row; align-items: baseline; gap: var(--g4); }
  .g-app #g-farm .g-stage-hud .g-hc-v { font-size: var(--fs-body); }
  .g-app #g-farm .g-stage-hud .g-hc > .g-ic, .g-app #g-farm .g-stage-hud .g-hc > svg, .g-app #g-farm .g-stage-hud .g-hc-cal, .g-app #g-farm .g-snd .g-ic { width: 16px; height: 16px; }
  .g-app #g-farm .g-stage-hud .g-hc-shop { margin-right: var(--g24); } /* 買える数の丸はカードの右上の外側 (字に掛けない)・隣の音に重ねない */
  .g-app #g-farm .g-stage-hud .g-shop-n { right: auto; left: calc(100% - 4px); }
  .g-app #g-farm .g-stage-hud .g-hc-shop { min-height: 44px; } /* 押せる物は見える尺も 44 (UI / UX 監査 第 5 回・字のカードは 30 のまま行の中央) */
  .g-app #g-farm .g-snd { flex-direction: row; gap: var(--g4); width: auto; min-width: 44px; height: 44px; padding: 0 var(--g8); border-radius: 22px; }
}

/* アプリとしてホーム画面に追加 (ゲーム専用の登録、専用の面 /ja/game/app/ = pages/game-app.ejs、配線 = assets/game-app.js、正 = _shared/audits/fleet-game-pwa-install-2026-10-26/DESIGN.md §4 / §5)。
   入口 = 入口の面の補助の行と図鑑の面の「自分の畑へ」の行に文字のリンク 1 本 (本文の大きさ、リンクの色)。区切りの字は置かず、狭い幅では要素の間で折る
   (行の間 8、横 16、各リンクは字の途中で折らない)。ホーム画面のアイコンから開いている時は隠す (JS 0、入口の面は行ごと、図鑑の面はリンクだけ) */
.g-aux { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8) var(--g16); }
.g-aux > a { white-space: nowrap; }
.g-aux > :where(a:not(.button)) { display: inline-flex; align-items: center; min-height: 44px; } /* :where = .g-aux-app の display: none (下の media) に勝たない強さ */
@media (display-mode: standalone) { .g-aux-app { display: none; } }
/* 結果カードの紙 (#g-card・face-card.mjs): ボタン 3 は折り返す 1 列 (押せる物は .g-btn の 44)・状態の 1 行は空なら置かない */
.g-card-btns { display: flex; flex-wrap: wrap; gap: var(--g8); margin: 0; }
#g-card-state:empty { display: none; }
/* 専用の面: クラフト紙の台の上の紙 1 枚の 1 列 (390 も 1280 も本文の列の幅)。字は本文の色と良い色とリンクの色だけ、隙間は 4 / 8 / 16 / 24、押せる物は 44 以上 */
.g-add-sheet { gap: var(--g16); }
.g-add-msg { display: flex; align-items: center; gap: var(--g8); font-weight: 700; }
.g-add-check, .g-add-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-add-check { width: 24px; height: 24px; }
.g-add-ask, .g-add-steps { display: flex; flex-direction: column; gap: var(--g8); }
.g-add-list { display: grid; gap: var(--g8); margin: var(--g8) 0 0; padding-left: var(--g24); } /* 端末の小見出しは紙の見出しと同じ class、間の 8 は列の上に */
.g-add-list .g-add-ic { width: 20px; height: 20px; margin-right: var(--g4); vertical-align: -4px; }
.g-add-other > summary { display: flex; align-items: center; gap: var(--g8); min-height: 44px; cursor: pointer; font-weight: 700; list-style: none; }
.g-add-other > summary::-webkit-details-marker { display: none; }
.g-add-other > summary::before { content: ''; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.g-add-other[open] > summary::before { transform: rotate(90deg); }
.g-add-other .g-add-plat { margin: var(--g8) 0 0; padding: var(--g16) 0 0; border-top: 1px solid var(--g-rule); }
.g-add-links { display: flex; flex-direction: column; align-items: flex-start; }
.g-add-links > a { display: inline-flex; align-items: center; min-height: 44px; }
/* en の面だけ: 面のリンク 2 つ (Friends' farms / Field guide and titles) が長いので、390 は 1 列・1024 以上の右の列は 1 行に 1 つ (ja の面には当てない) */
@media (max-width: 599px) {
  html[lang="en"] .g-board .g-nav:not(.g-nav-1) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  html[lang="en"] .g-app #g-farm .g-board-low .g-nav { flex-direction: column; align-items: flex-start; }
  html[lang="en"] .g-app #g-farm .g-board-low .g-nav .button + .button { margin-left: 0; }
  html[lang="en"] .g-app #g-farm .g-board-low .g-nav .button + .button::before { content: none; }
}