/* 救出ストーリーは切り抜かず全体を見せる。整備操作とHP表示は残す。 */
.title-story-art { display:block; width:100%; height:auto; margin:16px auto 0; border-radius:18px; box-shadow:0 8px 28px #0004; }
#screen-login .login-mascot { display:none; }
/* 起動時はイラストを主役にし、入力欄は静かな面にまとめる。ホームには適用しない。 */
#screen-login { background:radial-gradient(ellipse at 25% 20%,#173666 0%,#0a1227 48%,#070c19 100%); }
#screen-login .login-content { max-width:1100px; padding:32px 24px; gap:20px; }
#screen-login .login-logo-main { font-size:clamp(2.6rem,9vw,4.2rem); letter-spacing:.035em; }
#screen-login .title-story-art { margin:0; border-radius:18px; border:1px solid #a6d8ff26; box-shadow:0 18px 60px #0005; }
#screen-login .login-card { padding:22px; background:#101b30e8; border:1px solid #96bcdd26; border-radius:20px; box-shadow:0 16px 48px #0003; }
#screen-login .login-tabs { background:#080f20; border-radius:12px; margin-bottom:18px; }
#screen-login .login-tab { min-height:44px; }
#screen-login .login-tab.active { background:#243751; color:#e7fff6; }
#screen-login .form-group { margin-bottom:12px; }
#screen-login .form-label { color:#bdcce0; font-size:.8rem; }
#screen-login .form-input { background:#080f20; border-color:#34445d; border-radius:10px; }
#screen-login .form-input::placeholder { color:#8797ad; }
#screen-login .form-submit { border-radius:10px; text-align:center; }
#screen-login .guest-btn { color:#d7e5f5; border-color:#43546e; min-height:44px; text-align:center; }
#screen-login .form-error:empty { min-height:0; margin:0; }
#screen-login .login-legal-links { font-size:.7rem; line-height:1.8; text-align:center; }
@media (min-width:800px) {
  #screen-login .login-content { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:24px 36px; }
  #screen-login .login-logo { grid-column:1; grid-row:1; text-align:left; }
  #screen-login .title-story-art { grid-column:1; grid-row:2; }
  #screen-login .login-card { grid-column:2; grid-row:1 / 3; align-self:center; }
  #screen-login .login-legal-links { grid-column:1 / -1; }
}
@media (max-width:799px) {
  #screen-login .login-content { max-width:500px; padding:24px 18px; gap:16px; }
  #screen-login .login-card { padding:18px; }
}
/* コンボは選択肢の下、無線の上の一行に収める。 */
/* 2026-10-09 オーナー指摘「見えない」で案C: 画面の幅いっぱいの帯に白い大きな文字。帯が横に伸び、文字が
   ポンと大きくなり、光が1回横切る(「節目の文字の動き」OFFでは動かない)。高さはヘッダー直下の空き帯に収まる44px。 */
#milestone-overlay { inset:auto 0 auto; height:44px; }
#milestone-overlay .learning-milestone { position:relative; overflow:hidden; width:100%; padding:4px 0; border:0; border-block:2px solid var(--impact-color); border-radius:0; background:linear-gradient(90deg,transparent,rgba(8,12,32,.94) 12%,rgba(8,12,32,.94) 88%,transparent); box-shadow:inset 0 0 18px var(--impact-color); }
#milestone-overlay .learning-milestone strong { font-size:1.6rem; line-height:1.3; color:#fff; letter-spacing:.06em; text-shadow:0 0 4px var(--impact-color),0 0 12px var(--impact-color),0 0 24px var(--impact-color); }
#milestone-overlay .learning-milestone strong::before, #milestone-overlay .learning-milestone strong::after { content:'✦'; margin:0 .45em; font-size:.7em; vertical-align:.15em; }
#milestone-overlay .learning-milestone-label, #milestone-overlay .learning-milestone-caption { display:none; }
#milestone-overlay .milestone-text { animation:none; font-size:1rem; letter-spacing:.04em; }
body:not(.learning-fx-reduced) #milestone-overlay.active .learning-milestone { animation:msBand .28s ease-out both; }
body:not(.learning-fx-reduced) #milestone-overlay.active .learning-milestone strong { animation:msPop .45s cubic-bezier(.2,.9,.3,1.4) .1s both; }
body:not(.learning-fx-reduced) #milestone-overlay.active .learning-milestone::after { content:''; position:absolute; top:0; bottom:0; width:30%; left:-30%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:msShine .7s ease-in .3s both; }
@keyframes msBand { from { transform:scaleX(0); } to { transform:none; } }
@keyframes msPop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.18); opacity:1; } 100% { transform:none; } }
@keyframes msShine { to { left:110%; } }
/* 無線の名前タグは顔窓の真下。顔窓の下枠に重ねて、顔と名前の間を詰める(2026-09-25 ユーザー指摘)。 */
.radio-banner .radio-face { margin-bottom:16px; }
.radio-banner .radio-nametag, .radio-banner.radio-face-right .radio-nametag { top:100%; left:50%; right:auto; transform:translateX(-50%); max-width:100px; }
.mode-btn-section::before, .mode-btn-section::after { display:none; }
/* お世話の操作は下部にまとめ、ペットの移動領域を遮らない。 */
#screen-pet .pet-screen-wrap { background: linear-gradient(180deg,#f5eee2 0%,#eeece6 45%,#e1d2bd 100%); }
#screen-pet .pet-screen-title { font-family:inherit; color:#635141; }
#screen-pet .pet-room-window { position:absolute; top:18px; right:8%; width:86px; height:105px; border:7px solid #fffaf0; border-radius:32px 32px 4px 4px; background:linear-gradient(90deg,transparent 47%,#fffaf0 47%,#fffaf0 53%,transparent 53%),linear-gradient(#bbdce5,#e8f2eb); box-shadow:0 4px 18px #8b76551a; pointer-events:none; }
#screen-pet .pet-room-rug { position:absolute; top:30%; left:15%; width:70%; height:110px; border-radius:50%; background:#d9bd9233; border:8px double #d9bd9244; pointer-events:none; }
#screen-pet .pet-bottom-panel { left:12px; right:12px; max-width:520px; margin-inline:auto; padding:16px; border:1px solid #e5d8c6; border-radius:24px; background:#fffaf3f5; box-shadow:0 8px 30px #6f543b14; max-height:48svh; overflow-y:auto; }
#screen-pet .chara-name { color:#493b32; font-size:1.2rem; }
#screen-pet .chara-desc, #screen-pet .pet-gen { color:#796959; }
.pet-care-status { color:#526c54; font-size:.82rem; line-height:1.6; margin:4px 0; text-align:center; }
#screen-pet .pet-hunger-wrap { width:100%; max-width:340px; margin-top:10px; }
#screen-pet .pet-hunger-label, #screen-pet .pet-hunger-text, #screen-pet .pet-evo-text { font-size:.75rem; color:#685a4c; }
#screen-pet .pet-death-countdown { font-size:.7rem; color:#766352; }
.pet-care-actions { display:flex; width:100%; gap:10px; margin-top:12px; }
#screen-pet .feed-btn, .pet-touch-btn { flex:1; min-height:46px; margin:0; padding:10px; border-radius:14px; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; text-align:center; }
/* ごはんボタンを少し目立たせる(オーナー指摘、2026-09-29。3案からA: オレンジのグラデーション+影+少し大きい文字) */
#screen-pet .feed-btn { background:linear-gradient(135deg,#ff7a3d,#f5b400); color:#fff; box-shadow:0 3px 10px rgba(230,110,30,.45); font-size:.95rem; letter-spacing:.05em; }
.pet-touch-btn { background:#f1e6d6; color:#594736; border:1px solid #dcccba; }
.pet-care-hint { margin-top:4px; font-size:.7rem; color:#796959; }
#screen-pet .pet-bottom-panel { padding:10px 14px; max-height:32svh; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
#screen-pet .pet-care-status, #screen-pet .chara-bubble, #screen-pet .pet-danger, #screen-pet .pet-death-countdown, #screen-pet .pet-care-hint { grid-column:1 / -1; }
#screen-pet .chara-name { font-size:1rem; }
#screen-pet .chara-desc { display:none; }
#screen-pet .pet-hunger-wrap, #screen-pet .pet-care-actions { margin-top:3px; }
#screen-pet .pet-evo-bar-wrap { max-width:100%; }
#screen-pet .pet-care-actions { grid-column:1 / -1; }
/* 共通の可読性と操作性。ゲームの状態色・画面遷移・演出タイマーは変更しない。 */
:root { --muted: #aaaac8; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible { outline: 3px solid #89e3ff; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.screen { scroll-padding-block: 24px 96px; scrollbar-width: thin; scrollbar-color: #555579 transparent; }
.mode-desc, .settings-row-sub { font-size: .8rem; line-height: 1.6; }
.mode-name { line-height: 1.45; }
.mode-btn { min-height: 88px; }
.mode-btn-section { border-color: #8adfff; box-shadow: 0 4px 20px #49bbff18; }
.home-learning-hint { color: #c8d6ea; font-size: .8rem; line-height: 1.7; margin: 0 0 10px; }
.settings-row { min-height: 52px; gap: 12px; padding-block: 12px; }
.settings-row-label { min-width: 0; line-height: 1.5; }
.settings-row-arrow { flex-shrink: 0; }
.back-btn { min-width: 44px; min-height: 44px; }
input:not([type=range]):not([type=checkbox]):not([type=radio]), select { font-size: 16px; }
/* 透かしは残しつつ、長い意味でも読める余白を確保する。 */
.choice-btn { min-height: 58px; padding: 13px 14px; font-size: 1rem; line-height: 1.55; letter-spacing: .02em; overflow-wrap: break-word; word-break: break-word; }
.choice-btn:not(.correct):not(.wrong)::after { opacity: .13; }
/* 無線が選択肢の下に収まらない問題だけ、選択肢の文字と余白を段階的に縮める(オーナー決定
   2026-09-29、案A)。radio.js fitChoicesForRadio() が出題した瞬間に測って、グリッド
   (#choices-grid / #boss-choices / #starwolf-choices)に .choice-fit と --choice-scale
   (0.95〜0.8)を付ける。問題の表示中は変えない。基準値はすぐ上の .choice-btn と同じ値にそろえる
   (こちらを変えたら上も変える)。幅は変えないので2列の配置はそのまま。
   多義語の .sense-ml は font-size を持たずボタンから継承するので一緒に縮む。 */
.choices-grid.choice-fit .choice-btn {
  font-size: calc(1rem * var(--choice-scale, 1));
  padding: calc(13px * var(--choice-scale, 1)) calc(14px * var(--choice-scale, 1));
  min-height: calc(58px * var(--choice-scale, 1));
}
/* 測定中だけ付ける。.choice-btn の transition:all(style.css)が効いたままだと、倍率を変えた
   直後の実寸が「変化前」の値のままになり測定が狂う(実測で確認)うえ、文字が縮むアニメが見えて
   しまう。測り終えた時点で値は確定済みなので、外しても遷移は始まらない。 */
.choices-grid.choice-fitting .choice-btn { transition: none !important; }
.quiz-word { overflow-wrap: break-word; word-break: break-word; }
.result-score-area { max-width: 100%; }
@media (hover: hover) {
  .settings-row:not(:disabled):hover { background-color: #ffffff0c; }
  .choice-btn:not(:disabled):not(.correct):not(.wrong):hover { border-color: #89e3ff; }
}
@media (max-width: 480px) {
  .mode-grid { gap: 10px; }
  .mode-btn { padding: 14px 10px; }
  .settings-row { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-btn, .choice-btn, .result-score-area { animation: none !important; transition: none !important; }
}

/* ===== 最低バージョン(426)の案内(game.js showUpgradeRequired) ===== */
/* 他のどの画面・オーバーレイよりも上に出す(セーブが保存されない状態を必ず伝える)。 */
.upgrade-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(4, 6, 20, 0.82);
}
.upgrade-box {
  width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 24px 20px 18px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #1b2247 0%, #10142c 100%);
  border: 1px solid rgba(124, 247, 255, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  color: #fff; font-family: 'Noto Sans JP', sans-serif;
}
.upgrade-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.upgrade-title { font-size: 20px; font-weight: 900; margin-bottom: 10px; color: #7cf7ff; }
.upgrade-msg { font-size: 14px; line-height: 1.7; color: #d8def5; margin-bottom: 18px; }
.upgrade-actions { display: flex; flex-direction: column; gap: 10px; }
.upgrade-main-btn, .upgrade-later-btn {
  width: 100%; padding: 12px 16px; border-radius: 100px; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 16px;
}
.upgrade-main-btn { border: none; background: linear-gradient(90deg, #00e5b0, #36b8ff); color: #06122a; }
.upgrade-later-btn { border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #c9cfe6; font-size: 14px; }
/* ログイン画面はスマホでスクロールせずに1画面に収める(オーナー指摘、2026-09-27)。
   上のイラストの高さを「画面の高さ − イラスト以外の高さ」から決め、低い画面ほど小さく切り抜く。
   イラスト以外の高さは、新規登録(入力欄3つ)のときの値に合わせる(タブを切り替えても絵の大きさが変わらない)。
   幅800px以上はイラストと入力欄が横に並ぶ別レイアウトなので対象外。 */
@media (max-width:799px) {
  #screen-login .login-content { padding:18px 20px 14px; gap:12px; }
  #screen-login .title-story-art { width:100%; height:max(72px, min(240px, calc(100vh - 640px))); object-fit:cover; object-position:50% 22%; }
}
/* 低い画面(iPhone SE など)では、入力欄まわりの余白も詰める。 */
@media (max-width:799px) and (max-height:760px) {
  #screen-login .login-logo-main { font-size:2.3rem; }
  #screen-login .title-story-art { height:max(72px, min(240px, calc(100vh - 548px))); }
  #screen-login .login-card { padding:14px 16px; }
  #screen-login .login-tabs { margin-bottom:10px; }
  #screen-login .login-tab { min-height:38px; }
  #screen-login .form-group { margin-bottom:8px; }
  #screen-login .form-label { margin-bottom:3px; }
  #screen-login .form-input { padding:9px 14px; }
  #screen-login .form-submit { padding:11px; }
  #screen-login .guest-btn { margin-top:8px; min-height:40px; padding:8px; }
}
/* アドレスバーを除いた高さ(svh、iOS 15.4以降)が使えるときはそちらで計算する(上の vh の指定より後ろに置くこと)。 */
@supports (height:100svh) {
  @media (max-width:799px) { #screen-login .title-story-art { height:max(72px, min(240px, calc(100svh - 640px))); } }
  @media (max-width:799px) and (max-height:760px) { #screen-login .title-story-art { height:max(72px, min(240px, calc(100svh - 548px))); } }
}

/* ===== セクションごとのランキング(section_rank.js、2026-10-09) ===== */
.section-lb-btn { margin-top: 4px; width: 30px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, .45); background: rgba(255, 215, 0, .1); font-size: .85rem; line-height: 1; cursor: pointer; }
.srank-modal { width: min(94vw, 460px); max-height: 86vh; display: flex; flex-direction: column; gap: 8px; }
/* 重なり順(2026-10-11 オーナー指摘: ランキングから名前を押すとギルドカードが裏に出て見えない)。
   この窓は後から body の末尾に足すので、ギルドカード(#guildcard-overlay)と同じ 9700 だと上に来てしまう。
   名前から開く窓(ギルドカード・通報とブロック 9705、二つ名・カードの見た目 9710)より必ず下に置く。 */
.purchase-overlay.srank-overlay { z-index: 9690; }
.srank-head { display: flex; align-items: center; justify-content: space-between; font-weight: 900; font-size: 1rem; }
.srank-select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: #141a33; color: #fff; font-size: .9rem; }
.srank-tabs { margin: 0; }
.srank-note { font-size: .72rem; color: var(--muted); text-align: center; }
.srank-list { overflow-y: auto; min-height: 120px; }
.srank-me { text-align: center; font-weight: 700; font-size: .85rem; color: #ffd700; padding: 4px 0 2px; }
.result-section-rank { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 6px 0; }
.srank-result-ranks { font-size: .8rem; font-weight: 700; color: #ffd700; }
.srank-result-btn { font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 215, 0, .5); background: rgba(255, 215, 0, .12); color: #fff; cursor: pointer; }

/* 設定画面のいちばん下のアプリのバージョン(2026-10-19。index.html #app-version-label) */
.app-version-label { text-align: center; font-size: .75rem; color: var(--muted); opacity: .8; margin: 18px 0 8px; user-select: text; -webkit-user-select: text; }
/* 設定の「アップデートを確認」(2026-10-20。index.html #app-update-btn) */
.app-update-btn { display: block; margin: 0 auto 6px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: var(--text); font-size: .8rem; font-weight: 700; cursor: pointer; }
.app-update-btn:disabled { opacity: .5; }
.app-update-msg { text-align: center; font-size: .72rem; color: var(--muted); min-height: 1.2em; margin-bottom: 16px; padding: 0 16px; }
/* ニックネームの絵文字(2026-10-20。game.js fillNicknameEmojiPicker) */
.nick-emoji { margin-top: 6px; }
.nick-emoji-details summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--muted); padding: 4px 0; list-style: none; }
.nick-emoji-details summary::-webkit-details-marker { display: none; }
.nick-emoji-details[open] summary { color: var(--text); }
.nick-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; margin-top: 4px; }
.nick-emoji-btn { height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-size: 1.25rem; line-height: 1; cursor: pointer; }
/* わたしの目標(2026-10-20。index.html #my-goal-chip・game.js renderMyGoalChip) */
.my-goal-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 92%; margin: 4px auto 0; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255,212,0,.55); background: linear-gradient(135deg, rgba(255,212,0,.16), rgba(255,138,0,.10)); color: #fff; font-size: .82rem; font-weight: 900; cursor: pointer; }
.my-goal-chip.empty { border-style: dashed; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); color: var(--muted); font-weight: 700; }
.my-goal-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.my-goal-days { flex: none; color: #6ff1ff; font-variant-numeric: tabular-nums; }
.my-goal-clear { display: block; width: 100%; margin-top: 8px; }

/* ===== 運営からのお知らせ・期間限定イベント(remote_config.js。2026-10-20) ===== */
/* 箱・ボタンは最低バージョンの案内(.upgrade-*)と同じ。少し下に重ねる(必須の案内が上) */
#news-overlay { z-index: 99990; }
.news-head { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #ffd400; margin-bottom: 2px; }
.news-msg { white-space: pre-line; }
.news-until { font-size: 12px; color: #9aa3c7; margin: -10px 0 16px; }
.news-until:empty { display: none; }
/* けっか発表の「経験値×2」 */
.res-xp-boost {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font-size: 0.7em; font-weight: 900; color: #1a0f00; background: linear-gradient(90deg, #ffd400, #ff8a00);
}