/* ===== HOME ワールド版 ===== */
#screenHome {
  position: relative;
  overflow: hidden;
  background: #141e08;
  display: flex;
  flex-direction: column;
}
#screenHome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/meta/map/game/jobtribes/media/bg_home_m.png') center/cover no-repeat;
  z-index: 0;
}

/* HUD */
.home-hud {
  position: relative;
  z-index: 10;
  height: 36px;
  background: linear-gradient(180deg,rgba(2,3,7,.9) 0%,rgba(2,3,7,.4) 100%);
  border-bottom: 1px solid rgba(212,175,55,.12);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
}
.hud-left  { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.hud-day-badge { background:#00A896; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; letter-spacing:.05em; }

/* 📱 モバイル（PWA 含む）: ピルが画面端で見切れないよう内側へ寄せる */
@media (max-width: 899px) {
  .home-hud { padding: 0 48px; }          /* 12px → 48px */
  .hud-left { margin-left: 12px; }         /* さらに内側へ押し込み */
  .hud-right { margin-right: 12px; }
}
.hud-streak    { font-size:10px; color:rgba(200,210,150,.6); }
.hud-center    { flex:1; text-align:center; }
.hud-title-en  { font-size:8px; color:#D4AF37; letter-spacing:.2em; font-family:'DM Mono',monospace; opacity:.6; line-height:1; }
.hud-title-ja  { font-size:14px; font-weight:700; color:#e8e0c8; letter-spacing:.1em; line-height:1.2; }
.hud-right { flex-shrink:0; }
.hud-week-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.28); border-radius:7px; padding:3px 9px; font-size:10px; color:#D4AF37; font-weight:700; }

/* 完了バナー（右下） */
.home-done-banner {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  background: rgba(0,168,150,.12);
  border: 1px solid rgba(0,168,150,.32);
  border-radius: 14px;
  padding: 4px 14px;
  font-size: 10px;
  color: #00A896;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .04em;
  pointer-events: none;
}

/* ロゴ（HUD直下・中央） */
.home-logo {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
}
.home-logo img {
  height: 48px;
  width: auto;
  opacity: .92;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.7));
}

/* ===== 星空レイヤー ===== */
.home-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: star-twinkle var(--dur, 2s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes star-twinkle {
  0%,100% { opacity: var(--min-op, .1); transform: scale(1); }
  50%      { opacity: var(--max-op, .9); transform: scale(1.4); }
}

/* ワールドシーン */
.home-world {
  position: relative;
  z-index: 5;
  flex: 1;
}

/* オブジェクト共通 */
.world-obj {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.world-obj img {
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.7));
}

/* クリック可能 */
.clickable-obj {
  cursor: pointer;
  transition: transform .2s ease;
}
.clickable-obj:hover { transform: translateY(-5px) scale(1.04); }
.clickable-obj:hover .obj-tip { opacity: 1; }

/* ★ テーブルはtranslateX(-50%)センタリングを維持したままホバー */
.table-obj:hover { transform: translateX(-50%) translateY(-5px) scale(1.04); }

/* ツールチップ */
.obj-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4,6,10,.95);
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 10px;
  color: #D4AF37;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  z-index: 30;
  font-weight: 700;
}

/* ラベル */
.obj-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(230,220,180,.9);
  letter-spacing: .07em;
  margin-top: 3px;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1);
  white-space: nowrap;
}

/* ===== 国民の家 ===== */
/* 📱 モバイル基準 (KMV Adjust 2026-04-18) / PC は @media でオーバーライド */
.house-obj { left:8.75%; bottom:26.52%; right:auto; }
.house-obj img { height:148px; width:auto; }

/* ===== 神ニャンニャン（浮遊）===== */
/* 📱 モバイル基準 (KMV Adjust 2026-04-19) / PC は @media でオーバーライド */
.nyan-obj {
  left: 65.05%;
  bottom: 31.08%;
  right: auto;
  /* モーションはキャラ設定のCSSクラスで制御 */
}
/* 🎯 .nyan-obj 配下の全 img ではなく、ニャン本体の img のみにサイズ指定
   （子孫セレクタだと .nyan-float-cards 内の float-card img まで巨大化する） */
#homeNyanImg {
  height: 426.7px;
  width: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.65));
}
@keyframes nyan-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}
/* ===== キャラモーション（JSONのmotions_libraryに対応） ===== */
.motion-float {
  animation: motion-float-anim 4s ease-in-out infinite;
}
@keyframes motion-float-anim {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}
.motion-sway {
  animation: motion-sway-anim 3s ease-in-out infinite;
}
@keyframes motion-sway-anim {
  0%,100% { transform: translateX(0px) rotate(0deg); }
  25%      { transform: translateX(-8px) rotate(-2deg); }
  75%      { transform: translateX(8px) rotate(2deg); }
}
.motion-pulse {
  animation: motion-pulse-anim 2.5s ease-in-out infinite;
}
@keyframes motion-pulse-anim {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.motion-shake {
  animation: motion-shake-anim 0.4s ease-in-out infinite;
}
@keyframes motion-shake-anim {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ===== キャラエフェクト（JSONのeffects_libraryに対応） ===== */
/* 炎エフェクト */
.effect-flame.epos-behind::before,
.effect-flame.epos-outline::after,
.effect-flame.epos-feet::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.effect-flame.epos-behind {
  filter: drop-shadow(0 0 12px rgba(255,80,0,0.6)) drop-shadow(0 0 28px rgba(255,160,0,0.4));
  animation: effect-flame-anim 1.8s ease-in-out infinite;
}
.effect-flame.epos-outline {
  filter: drop-shadow(0 0 6px rgba(255,60,0,0.8)) drop-shadow(0 0 16px rgba(255,120,0,0.6));
  animation: effect-flame-anim 1.5s ease-in-out infinite;
}
.effect-flame.epos-feet {
  filter: drop-shadow(0 12px 20px rgba(255,80,0,0.7));
}
@keyframes effect-flame-anim {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,80,0,0.5)) drop-shadow(0 0 24px rgba(255,160,0,0.35)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,80,0,0.8)) drop-shadow(0 0 40px rgba(255,160,0,0.6)); }
}
/* 強さ調整 */
.effect-flame.estr-weak   { opacity:.7; }
.effect-flame.estr-normal { opacity:1; }
.effect-flame.estr-strong { opacity:1; animation-duration:1s; }

/* 雷エフェクト */
.effect-thunder.epos-behind {
  filter: drop-shadow(0 0 10px rgba(100,180,255,0.6)) drop-shadow(0 0 24px rgba(160,220,255,0.4));
  animation: effect-thunder-anim 1.2s ease-in-out infinite;
}
.effect-thunder.epos-outline {
  filter: drop-shadow(0 0 6px rgba(100,180,255,0.9)) drop-shadow(0 0 14px rgba(200,240,255,0.6));
  animation: effect-thunder-anim 0.9s ease-in-out infinite;
}
@keyframes effect-thunder-anim {
  0%,85%,100% { filter: drop-shadow(0 0 8px rgba(100,180,255,0.4)) drop-shadow(0 0 20px rgba(160,220,255,0.3)); }
  90%          { filter: drop-shadow(0 0 20px rgba(200,230,255,0.95)) drop-shadow(0 0 50px rgba(150,210,255,0.8)); }
}
.effect-thunder.estr-weak   { opacity:.65; }
.effect-thunder.estr-strong { animation-duration:.5s; }

/* 氷エフェクト */
.effect-ice.epos-behind {
  filter: drop-shadow(0 0 10px rgba(140,220,255,0.55)) drop-shadow(0 0 22px rgba(180,240,255,0.35));
  animation: effect-ice-anim 3s ease-in-out infinite;
}
.effect-ice.epos-outline {
  filter: drop-shadow(0 0 7px rgba(160,230,255,0.8));
  animation: effect-ice-anim 2.5s ease-in-out infinite;
}
@keyframes effect-ice-anim {
  0%,100% { filter: drop-shadow(0 0 8px rgba(140,220,255,0.4)) drop-shadow(0 0 18px rgba(180,240,255,0.25)); }
  50%      { filter: drop-shadow(0 0 16px rgba(140,220,255,0.7)) drop-shadow(0 0 36px rgba(180,240,255,0.5)); }
}
.effect-ice.estr-weak   { opacity:.6; }
.effect-ice.estr-strong { animation-duration:1.5s; }

/* 闇オーラ */
.effect-dark.epos-behind {
  filter: drop-shadow(0 0 12px rgba(120,0,180,0.6)) drop-shadow(0 0 28px rgba(60,0,100,0.4));
  animation: effect-dark-anim 2.5s ease-in-out infinite;
}
.effect-dark.epos-outline {
  filter: drop-shadow(0 0 7px rgba(140,0,200,0.8));
  animation: effect-dark-anim 2s ease-in-out infinite;
}
@keyframes effect-dark-anim {
  0%,100% { filter: drop-shadow(0 0 10px rgba(120,0,180,0.45)) drop-shadow(0 0 22px rgba(60,0,100,0.3)); }
  50%      { filter: drop-shadow(0 0 20px rgba(160,0,220,0.75)) drop-shadow(0 0 44px rgba(80,0,140,0.55)); }
}
.effect-dark.estr-weak   { opacity:.65; }
.effect-dark.estr-strong { animation-duration:1.2s; }

/* 聖光 */
.effect-holy.epos-behind {
  filter: drop-shadow(0 0 12px rgba(255,220,100,0.6)) drop-shadow(0 0 28px rgba(255,255,200,0.4));
  animation: effect-holy-anim 2s ease-in-out infinite;
}
.effect-holy.epos-outline {
  filter: drop-shadow(0 0 7px rgba(255,240,150,0.85));
  animation: effect-holy-anim 1.8s ease-in-out infinite;
}
@keyframes effect-holy-anim {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,220,100,0.5)) drop-shadow(0 0 24px rgba(255,255,200,0.3)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,240,140,0.85)) drop-shadow(0 0 48px rgba(255,255,220,0.6)); }
}
.effect-holy.estr-weak   { opacity:.65; }
.effect-holy.estr-strong { animation-duration:1s; }


/* 吹き出し */
.nyan-speech {
  position: absolute;
  bottom: calc(100% - 55px);
  left: 55%;
  background: #F5F2E8;
  border: 2px solid #282018;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #282018;
  white-space: nowrap;
  z-index: 25;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 2px 3px 0 rgba(0,0,0,.3);
  animation: speech-in .35s ease;
  pointer-events: none;
}
.nyan-speech::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: #282018;
}
.nyan-speech::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 17px;
  z-index: 1;
  border: 5px solid transparent;
  border-top-color: #F5F2E8;
}
@keyframes speech-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 試練テーブル ===== */
.table-obj {
  left: 50.35%;
  bottom: 6.59%;
  transform: translateX(-50%);
}
/* ★ table-innerで position:relative を持たせる（table-obj本体は触らない） */
.table-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* 🎯 table-obj 配下の全 img ではなく .table-inner 直下（テーブル本体画像）のみ
   （table-cards 内の table-card-item img まで巨大化するのを防ぐ） */
.table-obj .table-inner > img { height: 235.8px; width: auto; }
.table-obj.done img { filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) brightness(.45) saturate(.4); }
.table-obj.done { cursor:not-allowed; }
.table-obj.done:hover { transform:translateX(-50%) !important; }

/* ===== 燭台の炎（左右2つ）===== */
/* 位置調整はindex.htmlのインラインstyle（top/left）で行う */
.table-orb-left  { display:block; top:17%; left:11%; }
.table-orb-right { display:block; top:17%; left:74%; }

.table-orb-left,
.table-orb-right {
  position: absolute;
  /* 画面幅に追従（vwベース・最小10px最大20px） */
  width:  clamp(10px, 1.3vw, 20px) !important;
  height: clamp(10px, 1.3vw, 20px) !important;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,180,60, 0.85) 0%,
    rgba(255, 80, 0, 0.60) 38%,
    rgba(255,220,80, 0.25) 55%,
    rgba(255,240,100,0.10) 72%,
    transparent 85%
  );
  box-shadow: none;
  animation: orb-glow 2s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.table-orb-left  { animation-delay: 0s; }
.table-orb-right { animation-delay: 1.0s; }

@keyframes orb-glow {
  0%,100% {
    filter:
      drop-shadow(0 0 10px rgba(255,130, 10, 1.0))
      drop-shadow(0 0 24px rgba(230, 70,  0, 0.95))
      drop-shadow(0 0 42px rgba(180, 40,  0, 0.70));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(255,220, 50, 1.0))
      drop-shadow(0 0 36px rgba(255, 90,  0, 1.0))
      drop-shadow(0 0 65px rgba(200, 50,  0, 0.85));
  }
}
/* doneでも炎は表示 */

/* テーブル上カード */
.table-cards {
  /* 📱 モバイル基準 (テーブル拡大に合わせてオフセット) / PC は @media でオーバーライド */
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
  z-index: 2;
}
.table-card-item {
  /* 📱 モバイル基準 (ニャン拡大に比例) / PC は @media でオーバーライド */
  width: 58px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid rgba(212,175,55,.6);
  box-shadow: 0 4px 12px rgba(0,0,0,.7);
  background: #1a1a2e;
}
.table-card-item:nth-child(1) { transform: rotate(-7deg) translateY(4px); }
.table-card-item:nth-child(2) { transform: rotate(5deg) translateY(2px); }
.table-card-item img { width:100%; height:100%; object-fit:cover; display:block; }

/* ===== ランキング掲示板 ===== */
.board-obj { left:24.67%; bottom:16.29%; right:auto; }
.board-obj img { height:172.5px; width:auto; }

/* ===== 井戸 ===== */
.well-obj { left:81.15%; bottom:27.41%; right:auto; }
.well-obj img { height:120.6px; width:auto; opacity:.92; }

/* ===== 宝箱 ===== */
.treasure-obj,
#homeTreasure { left:88.53%; bottom:14.96%; right:auto; }
.treasure-obj img,
#homeTreasureImg { height:120.5px; width:auto; }
.treasure-obj.has-reward img { animation:chest-glow 2s ease-in-out infinite; }
@keyframes chest-glow {
  0%,100% { filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
  50%      { filter:drop-shadow(0 0 20px rgba(212,175,55,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
}

/* ===== ニャン周辺浮遊カード ===== */
.nyan-float-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.float-card {
  /* 📱 モバイル基準 (ニャン拡大に比例) / PC は @media でオーバーライド */
  position: absolute;
  width: 58px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid rgba(212,175,55,.5);
  box-shadow: 0 3px 10px rgba(0,0,0,.6);
  background: #1a1a2e;
  animation: card-float var(--fdur, 5s) ease-in-out var(--fdel, 0s) infinite;
}
.float-card img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes card-float {
  0%   { transform: rotate(var(--fr,0deg)) translateY(0px) scale(1); opacity:.85; }
  33%  { transform: rotate(calc(var(--fr,0deg) + 5deg)) translateY(-10px) scale(1.04); opacity:1; }
  66%  { transform: rotate(calc(var(--fr,0deg) - 3deg)) translateY(-5px) scale(.98); opacity:.9; }
  100% { transform: rotate(var(--fr,0deg)) translateY(0px) scale(1); opacity:.85; }
}

/* ===== RANKING ===== */
#screenRanking { background: var(--bg1); overflow-y: auto; }
.ranking-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; }
.ranking-week-card { background: var(--bg3); border: 1px solid rgba(212,175,55,.25); border-radius: 10px; padding: 16px; text-align: center; }
.ranking-week-label { font-size: 10px; color: var(--gold); letter-spacing: .12em; margin-bottom: 6px; }
.ranking-week-job { font-size: 18px; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.ranking-reset-note { font-size: 10px; color: var(--muted); }
.ranking-section-title { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .05em; }
.ranking-top3 { display: flex; flex-direction: column; gap: 10px; }
.ranking-row { display: flex; align-items: center; gap: 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.ranking-rank { font-size: 20px; font-weight: 900; font-family: 'DM Mono', monospace; width: 32px; text-align: center; }
.rank-1 { color: #FFD700; }
.rank-2 { color: #C0C0C0; }
.rank-3 { color: #CD7F32; }
.ranking-user-info { flex: 1; }
.ranking-username { font-size: 14px; font-weight: 700; color: var(--text); }
.ranking-user-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ranking-points { font-size: 18px; font-weight: 900; color: var(--teal); font-family: 'DM Mono', monospace; }
.ranking-coming-soon { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; line-height: 2; background: var(--bg3); border-radius: 10px; border: 1px solid var(--border); }

/* ===== PROFILE ===== */
#screenProfile { background: var(--bg1); overflow-y: auto; scrollbar-width: none; }
.profile-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.profile-card { display: flex; align-items: center; gap: 16px; background: var(--bg3); border: 1px solid rgba(212,175,55,.2); border-radius: 12px; padding: 16px; }
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; }
.btn-icon-change { font-size: 11px; padding: 3px 10px; background: var(--bg4); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); cursor: pointer; transition: all .15s; }
.btn-icon-change:hover { color: var(--text); border-color: var(--gold); }
.profile-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-username { font-size: 18px; font-weight: 700; color: var(--text); }
.profile-rank { font-size: 12px; color: var(--teal); font-weight: 700; }
.profile-section-title { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .05em; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-wide { grid-column: span 1; }

/* ===== 職業選択 ===== */
#screenIconSelect { background: var(--bg1); flex-direction:column; overflow-y:auto; scrollbar-width:none; }
.jobsel-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: unset;
  padding: 36px 20px 18px;
  gap: 18px;
  box-sizing: border-box;
  overflow: hidden;
}
.jobsel-head { text-align:center; flex-shrink:0; margin-top: 8px; }
.jobsel-title { font-size:17px; font-weight:900; color:var(--gold); margin-bottom:4px; line-height:1.4; }
.jobsel-sub   { font-size:11px; color:var(--muted); margin-bottom:4px; line-height:1.5; }
.jobsel-week  { font-size:11px; color:var(--teal); line-height:1.4; }
.jobsel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 100%;
  flex: 1;
  align-content: center;
}
.jobsel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  height: clamp(115px, 20vh, 160px);
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(30,20,60,0.85) 60%);
  border: 1.5px solid rgba(212,175,55,0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 0 8px rgba(212,175,55,0.15), inset 0 1px 0 rgba(255,220,80,0.1);
}
.jobsel-card:hover {
  border-color: rgba(212,175,55,0.9);
  box-shadow: 0 0 14px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,220,80,0.2);
  background: linear-gradient(135deg, rgba(212,175,55,0.18) 0%, rgba(30,20,60,0.9) 60%);
}
.jobsel-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(212,175,55,0.25) 0%, rgba(30,20,60,0.9) 60%);
  box-shadow: 0 0 18px rgba(212,175,55,0.6), inset 0 1px 0 rgba(255,220,80,0.3);
}
.jobsel-icon  { width:64px; height:64px; display:flex; align-items:center; justify-content:center; font-size:34px; }
.jobsel-icon img { width:64px; height:64px; object-fit:contain; }
.jobsel-name  { font-size:14px; font-weight:700; color:var(--text); text-align:center; line-height:1.25; }
.jobsel-count { font-size:12px; color:var(--muted); }
#btnJobConfirm { flex-shrink:0; width:100%; max-width:100%; margin:0; padding:10px; font-size:13px; }


/* ===== ランキング一覧 ===== */
.ranking-item { display:flex; align-items:center; gap:12px; padding:12px 16px; margin:6px 0; background:var(--bg3); border-radius:10px; border:1px solid rgba(255,255,255,.08); }
.rank-medal { font-size:24px; flex-shrink:0; }
.rank-info { flex:1; min-width:0; }
.rank-name { font-size:13px; font-weight:700; color:var(--text); }
.rank-genre { font-size:10px; color:var(--muted); margin-top:2px; }
.rank-pt { font-size:20px; font-weight:900; font-family:'DM Mono',monospace; color:var(--gold); }
.rank-pt span { font-size:11px; font-weight:400; color:var(--muted); margin-left:2px; }
.ranking-loading { color:var(--muted); font-size:12px; padding:16px; text-align:center; }

/* ===== ニャンニャンコメント ===== */
#nyanComment { display:none; margin:12px 0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px 16px; }
.nyan-comment-level { font-size:10px; font-weight:900; letter-spacing:.08em; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.nyan-bonus { background:rgba(232,89,60,.2); color:#E8593C; font-size:11px; padding:1px 6px; border-radius:4px; }
.nyan-comment-msg { font-size:13px; color:var(--text); line-height:1.6; font-style:italic; }
#resultBonusPt { font-size:10px; color:var(--teal); text-align:center; margin-top:4px; }

/* ===================================================================
   🖥️ PC プリセット (2026-04-18 KMV Adjust で調整)
   ------------------------------------------------------------------
   ビューポート幅 ≥ 900px で適用。モバイルは上記デフォルトを使用。
   =================================================================== */
@media (min-width: 900px) {
  /* ステータス看板 */
  .house-obj     { left: 8.07%;  bottom: 27.62%; right: auto; }
  .house-obj img { height: 163.3px; width: auto; }

  /* 神ニャンニャン */
  .nyan-obj      { left: 56.28%; bottom: 33.29%; right: auto; }
  #homeNyanImg   { height: 449.3px; width: auto; }

  /* 試練テーブル */
  .table-obj     { left: 50.57%; bottom: 7.17%; right: auto; }
  .table-obj .table-inner > img { height: 235.7px; width: auto; }

  /* ランキング看板 */
  .board-obj     { left: 25.85%; bottom: 17.56%; right: auto; }
  .board-obj img { height: 165.9px; width: auto; }

  /* 井戸（位置はそのまま、サイズのみ） */
  .well-obj img  { height: 123.2px; width: auto; }

  /* 宝箱 */
  .treasure-obj,
  #homeTreasure     { left: 88.02%; bottom: 12.69%; right: auto; }
  .treasure-obj img,
  #homeTreasureImg  { height: 117.3px; width: auto; }

  /* カード（ニャン 252→449.3 / × 1.78 比例） */
  .float-card,
  .table-card-item  { width: 61px; height: 84px; border-radius: 5px; }
  .table-cards      { top: -72px; gap: 8px; }
}

/* ===================================================================
   📱 モバイル調整 (2026-04-22)
   - 開催中カード（右上 seasonCountdownOverlay）をモバイルで縮小
   - 左上「シーズン●日目」バッジを safe-area で右に寄せ、見切れ防止
   - 試練祭は横向き強制のため、max-height で landscape phone も検出
   =================================================================== */
@media (max-width: 600px), (max-height: 500px) {
  /* 開催中カード — モバイルでは情報を圧縮 */
  #seasonCountdownOverlay {
    top: 6px !important;
    right: 6px !important;
    padding: 5px 9px !important;
    min-width: 120px !important;
    max-width: 165px !important;
    border-radius: 11px !important;
  }
  #seasonCountdownOverlay .kmv-orb { display: none !important; }
  #seasonCountdownOverlay .kmv-world-first { font-size: 9px !important; padding: 2px 8px !important; }
  #seasonCountdownOverlay .kmv-sub-label   { font-size: 8px !important; margin-top: 3px !important; }
  #seasonCountdownOverlay .kmv-main-title  { font-size: 11px !important; margin: 2px 0 1px !important; }
  #seasonCountdownTimerOverlay { font-size: 14px !important; margin: 2px 0 1px !important; }
  #seasonCountdownDateOverlay  { font-size: 8px !important; }

  /* 左上「シーズン●日目」を右に寄せ + safe-area-inset-left を考慮 */
  .top-header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: max(40px, env(safe-area-inset-left, 0px) + 36px) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px) + 12px) !important;
    min-height: 56px !important;
    align-items: center !important;
  }
  .top-header-left { padding-left: 8px !important; }
  .top-header-title { padding: 4px 8px !important; }
  .top-title-en { font-size: 10px !important; line-height: 1.3 !important; }
  .top-title-ja { font-size: 20px !important; line-height: 1.25 !important; }
  .top-day-badge,
  .hud-day-badge   { margin-left: 12px !important; padding: 3px 9px !important; line-height: 1.35 !important; }
  /* screenHome の HUD 日数ピル（top-day-badge とは別の絶対配置の場合に備え） */
  #screenHome .hud-day-badge { margin-left: 20px !important; }
}