/* NORA BEAT 見た目の決まり v4（2026-10-04）。
   Codex（gpt-6-astra）の デザイン所見（design/2026-10-04_伸ばす施策_デザイン相談/）を もとに、さわやか版（白・水色）の 上に 重ねる。
   ・色は 6 色：地 #F1F9FC／カード #FFFFFF／文字 #183747／補足 #536B78／選択 #087E98／主ボタン #F4A340（写真・ジャケット・ゲームの駒は べつ）
   ・ボタンは 1 つの形：高さ 56px・角丸 14px・平らな色（グラデーションと 立体の影を やめる）
   ・カードは 角丸 16px・1px の 枠・影なし
   ・和文は 端末の ゴシック（iPhone＝ヒラギノ／Android＝Noto Sans）、英数字は Outfit
   この 1 枚を index.html から 外せば 前の 見た目に もどる */
:root {
  --night: #f1f9fc;
  --ink: #183747;
  --ink-2: #536b78;
  --ink-3: #7b909b;
  --line: rgba(24, 55, 71, 0.16);
  --line-faint: rgba(24, 55, 71, 0.1);
  --sea: #087e98;
  --gold: #e8912a;
  --gold-hi: #c9771a;
  --v4-btn: #f4a340;
  --v4-btn-on: #ec9630;
  --card-shadow: none;
  --font-ui: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  --font-display: 'Outfit', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --radius: 16px;
}
body {
  background: #f1f9fc;
  color: var(--ink);
}
/* 操作する 画面では 背景の 光・泡（canvas）を 出さない。えんそう中と けっかだけ */
body:not([data-scr='play']):not([data-scr='result']) #stage {
  visibility: hidden;
}
/* えらんだ曲の ぼかした絵・社歌の 映像は、えんそう中と けっかだけ（曲えらび・むずかしさでは 字が 読みにくかった） */
body:not([data-scr='play']):not([data-scr='result']) #jacket-bg,
body:not([data-scr='play']):not([data-scr='result']) #backdrop {
  display: none;
}
#jacket-bg.on {
  opacity: 0.4;
}
.help,
.fineprint,
.hint,
.listen-line,
.complete-sum {
  color: var(--ink-2);
}

/* ---------- ボタン（1 つの形） ---------- */
.btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  font: 700 16px/1.2 var(--font-ui);
  letter-spacing: 0.02em;
}
.btn.big {
  min-height: 56px;
  font-size: 17px;
  letter-spacing: 0.04em;
}
.btn.primary {
  color: var(--ink);
  background: var(--v4-btn);
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(24, 55, 71, 0.14);
}
.btn.primary:active {
  transform: translateY(1px);
  background: var(--v4-btn-on);
  box-shadow: 0 1px 0 rgba(24, 55, 71, 0.14);
}
.btn.ghost {
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 rgba(24, 55, 71, 0.06);
}
.btn.ghost:active {
  background: #f1f7fa;
}
.btn.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
body.kids .btn {
  border-radius: 14px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-faint);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar {
  grid-template-columns: 44px 1fr 44px;
}
.topbar h2 {
  font: 700 19px/1.3 var(--font-ui);
  letter-spacing: 0.02em;
}
.linkish {
  color: var(--sea);
}

/* ---------- 最初の画面 ---------- */
#scr-title {
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  gap: 10px;
  justify-content: flex-start;
}
.home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}
.home .logo-word {
  margin: 0;
  font: 700 27px/1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  filter: none;
}
.home .logo-word em {
  display: inline;
  margin-left: 0.22em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sea);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.home-hero {
  margin: 8px 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: #dcecf2;
}
.home-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 358 / 196;
  object-fit: cover;
  object-position: center 42%;
}
.home-h {
  margin: 16px 0 0;
  font: 700 24px/1.35 var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.home-lead {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.home-song {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 14px 0 0;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-song .jacket {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  box-shadow: none;
}
.hs-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.hs-meta small {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sea);
}
.hs-meta b {
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-meta span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.hs-more {
  flex: none;
  padding: 5px 10px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
#btn-start {
  width: 100%;
  margin-top: 12px;
}
.home-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.home-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.home-sub .btn {
  width: 100%;
  padding: 0 8px;
  font-size: 15px;
}
.home-online {
  align-self: center;
  margin-top: 14px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 700 13px/1.4 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.credit {
  margin-top: auto;
  font: 600 10.5px/1.4 var(--font-display);
  letter-spacing: 0.1em;
}

/* ---------- あそぶ（曲えらび） ---------- */
#scr-select {
  gap: 10px;
}
/* ゲームの 切りかえ：高さ 44px の 2 つ並び */
.game-switch {
  gap: 0;
  margin: 0;
  padding: 3px;
  border-radius: 12px;
  background: #e2eff4;
}
.game-switch .gs {
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 9px;
  background: none;
  box-shadow: none;
  text-align: center;
  color: var(--ink-2);
}
.game-switch .gs b,
.game-switch .gs[data-game='beat'] b {
  display: inline;
  font: 700 14px/1.2 var(--font-ui);
  letter-spacing: 0.02em;
  color: inherit;
}
.game-switch .gs small {
  display: none;
}
.game-switch .gs.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(24, 55, 71, 0.12);
}
/* 気配と おしらせ：1 行に 2 つ（高さ 48px） */
.info-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
.info-row:not(:has(> :not([hidden]))) {
  display: none;
}
.info-row .kehai-card,
.info-row .news-card {
  min-height: 48px;
  margin: 0;
  padding: 6px 10px;
  gap: 8px;
  border-radius: 12px;
  box-shadow: none;
  animation: none;
}
.info-row .kehai-card .kh-mark {
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.info-row .news-card .ic {
  width: 30px;
  height: 30px;
}
.info-row .kehai-card .kh-txt b,
.info-row .news-card .t b {
  font-size: 12.5px;
}
.info-row .kehai-card .kh-txt small,
.info-row .news-card .t small {
  font-size: 10.5px;
}
.info-row .kehai-card .kh-streak {
  display: none;
}
.pack-tabs {
  gap: 18px;
}
.pack-tab {
  font: 700 15px/1 var(--font-ui);
  color: var(--ink-2);
}
.pack-tab small {
  font: 600 11px/1 var(--font-display);
}
.pack-tab[aria-selected='true'] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--sea);
}
/* 曲の 1 行：ジャケット 80px。白い カード・1px の 枠 */
.setlist {
  gap: 8px;
}
.song {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.song-main {
  gap: 12px;
  padding: 8px 12px 8px 8px;
  background: none;
  box-shadow: none;
}
.song-main:hover {
  background: none;
  box-shadow: none;
}
.jacket {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  box-shadow: none;
}
.jacket.md {
  width: 56px;
  height: 56px;
}
.song-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.song-artist {
  font-size: 13px;
  color: var(--ink-2);
}
.song-rank {
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 1.5px var(--sea);
  color: var(--sea);
  font: 700 15px/1 var(--font-display);
}
/* えらんだ曲：ジャケット 112px・曲名 20px・大きい ボタン */
.song.selected {
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--sea);
}
.song.selected .song-main {
  gap: 14px;
  align-items: flex-start;
}
.song.selected .jacket {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  box-shadow: none;
}
.song.selected .song-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}
.song-tools .btn.small {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 99px;
  font-size: 12.5px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.listen-btn {
  box-shadow: inset 0 0 0 1px var(--line);
}
.sdiff {
  min-height: 52px;
  border-radius: 10px;
  background: #f1f7fa;
  color: var(--ink-2);
  font: 700 11.5px/1.2 var(--font-ui);
}
.sdiff b {
  font: 700 16px/1 var(--font-display);
}
.sdiff[aria-checked='true'] {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--sea);
  color: var(--ink);
}
.song-play {
  min-height: 56px;
  font-size: 17px;
  letter-spacing: 0.04em;
}
.complete-sum {
  font-size: 12.5px;
  font-weight: 600;
}
.complete-mark {
  background: #e3f3f7;
  color: var(--sea);
}
.add-song {
  border: 1px dashed var(--line);
  background: none;
}
.add-song .plus {
  background: #e2eff4;
  color: var(--ink-2);
}

/* ---------- むずかしさ ---------- */
.mode {
  padding: 3px;
  border-radius: 12px;
  background: #e2eff4;
  box-shadow: none;
}
.mode button {
  min-height: 44px;
  border-radius: 9px;
  font-size: 15px;
}
.mode button[aria-checked='true'] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(24, 55, 71, 0.12);
}
.diff {
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.diff[aria-pressed='true'] {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--sea);
}
#btn-play {
  width: 100%;
}
.loading,
.net {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.meter {
  background: #e2eff4;
}
.meter > div {
  background: var(--sea);
}
.bounce i {
  background: var(--sea);
  opacity: 0.85;
}
.load-tip {
  display: grid;
  gap: 2px;
  margin: 18px 0 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f1f9fc;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.load-tip[hidden] {
  display: none;
}
.load-tip b {
  font-size: 11.5px;
  color: var(--sea);
}
.load-tip span {
  font-weight: 700;
}

/* ---------- けっか：主役は「あそんで ふえた もの」 ---------- */
.res-got {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
  text-align: center;
}
.res-got .rg-song {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  font-size: 13px;
  color: var(--ink-2);
}
.res-got .rg-song .jacket {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.res-got .rg-song b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-got .rg-h {
  margin: 0;
  font: 700 22px/1.35 var(--font-ui);
  color: var(--ink);
}
.rg-items {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.rg-item {
  display: grid;
  grid-template-columns: 44px auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  padding: 8px 16px 8px 8px;
  border-radius: 14px;
  background: #f1f9fc;
  text-align: left;
}
.rg-item i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
  color: var(--sea);
  font: 700 22px/1 var(--font-display);
  font-style: normal;
}
.rg-item i svg {
  width: 22px;
  height: 22px;
}
.rg-item b {
  font: 700 24px/1 var(--font-display);
  color: var(--ink);
}
.rg-item small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
}
.res-got .rg-use {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.res-head {
  display: none;
}
.result.two .res-head,
.result:not(:has(.res-got)) .res-head {
  display: flex;
}
.res-title {
  font: 700 18px/1.2 var(--font-ui);
}
.res-song,
.res-panel,
.res-panel.p1,
.res-panel.p2 {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.res-panel.p1 {
  box-shadow: inset 0 0 0 2px rgba(255, 122, 138, 0.6);
}
.res-panel.p2 {
  box-shadow: inset 0 0 0 2px rgba(92, 200, 255, 0.7);
}
.res-score {
  background: #f1f9fc;
}
.res-score .num {
  font: 700 30px/1 var(--font-display);
}
.res-counts,
.res-combo {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.res-counts dd,
.res-combo dd {
  font: 600 17px/1.35 var(--font-display);
}
.gbar .ga {
  background: var(--sea);
}
.gsoul.on {
  background: var(--v4-btn);
  color: var(--ink);
  box-shadow: none;
}
.res-verdict.ok {
  color: var(--sea);
  letter-spacing: 0.02em;
}
.rank-big,
.rank-big.r-S,
.rank-big.r-C,
.rank-big.r-D {
  font: 700 64px/1 var(--font-display);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--v4-btn);
  filter: none;
}
.rank-big.r-S {
  color: var(--sea);
}
.rank-big.r-C,
.rank-big.r-D {
  font-size: 44px;
  color: #9fb1bb;
}
.res-panel .res-id {
  min-height: 56px;
}
.res-id .chip {
  color: #fff;
}
#scr-result .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#scr-result .actions .btn {
  width: 100%;
  padding: 0 8px;
}
#scr-result .actions .btn.big,
#scr-result .actions .btn.wide {
  grid-column: 1 / -1;
}
#scr-result .actions .btn[hidden] {
  display: none;
}
.share-btn svg {
  width: 20px;
  height: 20px;
  color: #06c755;
}
.rank-line {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- 重ねる窓 ---------- */
.overlay {
  background: rgba(24, 55, 71, 0.32);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.panel {
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(24, 55, 71, 0.18);
}
.acct-input {
  border-radius: 12px;
  background: #f1f9fc;
}
.toast {
  border-radius: 12px;
  background: var(--ink);
}

/* ---------- 下のタブ：5 つ・高さ 64px ---------- */
.tabbar {
  gap: 0;
  padding: 0 6px env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--line-faint);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tabbar .tab {
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 8px 2px 6px;
  border-radius: 0;
  color: var(--ink-3);
  font: 600 12px/1.2 var(--font-ui);
}
.tabbar .tab[aria-current='true'] {
  background: none;
  color: var(--sea);
}
.tabbar .tab[aria-current='true'] svg {
  color: var(--sea);
}
@media (max-width: 420px) {
  .tabbar .tab {
    font-size: 11.5px;
  }
}
@media (min-width: 560px) {
  .tabbar {
    border: 1px solid var(--line-faint);
    box-shadow: none;
  }
}
body.has-tabbar .screen {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
}

/* ---------- ランキング・地図 ---------- */
.rk-song,
.place {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.rk-song .jacket,
.place .jacket {
  width: 56px;
  height: 56px;
}
.map-box {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}

/* ================= 2026-10-04 Codex 2 回めの 所見（最初の画面 8／曲えらび 7／けっか 6.5 → 直し） ================= */
/* ② 最初の画面の 下の 空き：写真の カード 1 枚 */
.home-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.home-card img {
  display: block;
  width: 112px;
  height: 104px;
  border-radius: 8px;
  object-fit: cover;
  object-position: 42% 60%;
}
.home-card b {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.home-card p {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* ③ 曲えらびの 上：気配・おしらせを 高さ 44px・段の 間 8px・分類の 字 13px。最初の ジャケットを 早く 見せる */
#scr-select {
  gap: 8px;
}
.info-row .kehai-card,
.info-row .news-card {
  min-height: 44px;
  padding: 4px 10px;
}
.pack-tabs {
  gap: 16px;
}
.pack-tab {
  min-height: 34px;
  font-size: 13.5px;
}
/* ④ えらんだ曲：縦に 長かったので つめる（ジャケット 80px・曲名 18px・むずかしさ 44px・プレイ 48px） */
.song.selected {
  padding: 12px;
}
.song.selected .song-main {
  gap: 12px;
}
.song.selected .jacket {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.song.selected .song-title {
  font-size: 18px;
}
.song.selected .song-go {
  gap: 8px;
  padding-top: 10px;
}
.song-tools {
  margin-top: 6px;
}
.sdiff {
  min-height: 44px;
  gap: 2px;
}
.song-play {
  min-height: 48px;
}
/* ⑤ むずかしさ：字を 濃く（名前 18px・説明 14px）。色は 図だけ。えらんだ ものに「選択中」 */
.diff b {
  font-size: 18px;
  color: #203f49;
}
.diff small {
  font-size: 14px;
  line-height: 1.45;
  color: #203f49;
}
.diff .diff-best {
  font: 600 13px/1.3 var(--font-ui);
  color: #637780;
}
.diff {
  position: relative;
}
.diff[aria-pressed='true']::after {
  content: '選択中';
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--sea);
  color: #fff;
  font: 700 11px/1.5 var(--font-ui);
}
.diff.locked b,
.diff.locked small {
  color: #7b909b;
}
.hint {
  font-size: 13.5px;
  color: var(--ink-2);
}
/* ⑥ 名前の 窓：見出し 20px・入力 48px・主ボタンは 1 つ（あとで は 白・引きつぎは 文字の リンク） */
#acct-form.first h2 {
  font-size: 20px;
}
.acct-input {
  min-height: 48px;
}
#acct-form.first #acct-alt {
  min-height: 44px;
  background: none;
  box-shadow: none;
  color: var(--sea);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ⑦ ランキング：ジャケット 64px・行 88px・曲名 16px。「未プレイ」は 13px */
.rk-song {
  min-height: 88px;
}
.rk-song .jacket,
.rk-jk {
  width: 64px;
  height: 64px;
  border-radius: 10px;
}
.rk-t b {
  font-size: 16px;
}
.rk-mine.none {
  font-size: 13px;
  color: #637780;
}
/* ⑧ おみせ：3 列・絵 56px・名前 13px・ねだん 14px。しょうごうの 面は 白、進みの 棒だけ オレンジ */
.sh-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sh-it {
  gap: 4px;
  padding: 10px 6px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.sh-it img,
.sh-it .g {
  width: 56px;
  height: 56px;
}
.sh-it .n {
  font: 700 13px/1.35 var(--font-ui);
}
.sh-it em {
  padding: 2px 10px;
  font: 700 14px/1.3 var(--font-display);
}
.sh-it em.two {
  font-size: 12px;
}
.sh-title {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.sh-title small {
  color: var(--ink-2);
}
.sh-title b {
  font-weight: 700;
  color: var(--ink);
}
.sh-title span {
  font-weight: 600;
  color: var(--ink-2);
}
.sh-bar {
  background: #e2eff4;
}
.sh-bar i {
  background: var(--v4-btn);
}
.sh-wallet .w,
.sh-real .card {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.sh-wallet .w em {
  color: var(--sea);
}
.sh-wallet .w small {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
}
#scr-shop h3 {
  font-weight: 700;
}
.sh-lead {
  font: 500 13px/1.6 var(--font-ui);
}
.sh-sub {
  font: 700 13px var(--font-ui);
}
.sh-btn {
  border-radius: 12px;
  background: var(--v4-btn);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(24, 55, 71, 0.14);
}
/* ① けっか：ごほうびの 数を 大きく（32px）・すぐ下に 次の 行動。評価の 字は 小さく、成績の カードは つめる */
.rg-item b {
  font-size: 32px;
}
.rg-item {
  grid-template-columns: 44px auto;
  padding: 8px 18px 8px 8px;
}
.res-got .rg-go {
  width: 100%;
  margin-top: 4px;
}
.res-panel {
  padding: 12px 12px 12px;
  gap: 8px;
}
.res-panel .res-id {
  min-height: 0;
  padding-right: 56px;
}
.rank-big,
.rank-big.r-S,
.rank-big.r-C,
.rank-big.r-D {
  font-size: 28px;
}
.rank-big.r-C,
.rank-big.r-D {
  font-size: 20px;
}
.res-stamp {
  top: 10px !important;
  right: 14px !important;
}
.res-score {
  padding: 8px;
}
.res-score .num {
  font-size: 26px;
}

/* ランキングの 一覧：ジャケットを 64px に したので 列の 幅も 合わせる */
.rk-song {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
}

.place {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}

/* ================= はたけ：絵（背景・子ども）は そのまま。上の 数・ふきだし・下の カードを 新しい 決まりに ================= */
#scr-farm .hf-place,
#scr-farm .hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.1);
  font: 700 12.5px var(--font-ui);
  color: var(--ink);
}
#scr-farm .hf-pill.water {
  color: var(--sea);
}
#scr-farm .hf-pill.notes {
  color: #c9771a;
}
#scr-farm .hf-q {
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.1);
}
#scr-farm .hf-say {
  padding: 12px;
  border-radius: 14px;
  font: 700 14px/21px var(--font-ui);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(24, 55, 71, 0.14);
}
#scr-farm .hf-info {
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#scr-farm .hf-info .nick {
  color: var(--ink);
}
#scr-farm .hf-info .nick .nm {
  font-size: 16px;
  font-weight: 700;
}
#scr-farm .hf-info .lv {
  background: var(--sea);
  font-weight: 700;
}
#scr-farm .hf-info .st,
#scr-farm .hf-info .req {
  font-weight: 600;
  color: var(--ink-2);
}
#scr-farm .hf-info .req {
  font-size: 12px;
}
#scr-farm .hf-info .req b,
#scr-farm .hf-info .nick i {
  color: #c9771a;
}
#scr-farm .hf-info .grow .bar {
  background: #e2eff4;
}
#scr-farm .hf-info .grow .bar i {
  background: var(--v4-btn);
}
#scr-farm .hf-info .grow small {
  color: var(--ink-2);
  font-weight: 600;
}
#scr-farm .hf-acts .act {
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.12);
  color: var(--ink);
}
#scr-farm .hf-acts .act small {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
}
#scr-farm .hf-acts .act.main {
  background: var(--v4-btn);
  box-shadow: 0 2px 0 rgba(24, 55, 71, 0.14);
  color: var(--ink);
}
#scr-farm .hf-acts .act.main b {
  font-weight: 700;
}
#scr-farm .hf-acts .act.main small {
  color: rgba(24, 55, 71, 0.82);
}
#scr-farm .hf-acts .act.main.warm {
  background: #8fd672;
  box-shadow: 0 2px 0 rgba(24, 55, 71, 0.14);
}
#scr-farm .hf-acts .act:active {
  transform: translateY(1px);
}
#scr-farm .hf-kids {
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.1);
}
#scr-farm .hf-kid {
  color: var(--ink-2);
}
#scr-farm .hf-kid .av {
  box-shadow: inset 0 0 0 1px rgba(24, 55, 71, 0.12);
}
#scr-farm .hf-kid .lb {
  font-size: 10px;
  font-weight: 700;
}
#scr-farm .hf-kid[aria-selected='true'] .av {
  box-shadow: 0 0 0 2.5px var(--v4-btn);
}
#scr-farm .hf-kid[aria-selected='true'] .lb {
  color: var(--ink);
}

/* --- 2026-10-04 Codex 3 回め：はたけの 下の 操作を 読みやすく --- */
#scr-farm .hf-acts .act {
  min-width: 48px;
  min-height: 52px;
}
#scr-farm .hf-acts .act small {
  font-size: 12px;
  color: #244650;
}
#scr-farm .hf-acts.many .act:not(.main) {
  width: 48px;
}
#scr-farm .hf-acts .act.main small {
  font-size: 11.5px;
}
#scr-farm .hf-kid {
  width: 60px;
}
#scr-farm .hf-kid .lb {
  max-width: 60px;
  font-size: 11px;
  color: #244650;
}