/* 表示切替 */
.hidden {
  display: none !important;
}

body{
    margin:0;
    min-height:100vh;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}


/*タイトル画面*/
#title-screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:10;
}

.title-button {
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s;
}

.title-button:hover {
  transform: scale(1.05);
}

.title-button:active {
  transform: scale(0.97);
}

.title-button img {
  display: block;
}

#btn-start {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#btn-start img {
  animation: btnGlow 2s ease-in-out infinite;
  border-bottom: 1px solid rgba(175, 148, 237, 0.5);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

#btn-start .btn-caption {
  margin-top: 2px;
  animation: btnGlow 2s ease-in-out infinite;
  font-size: 13px;
}

#top-buttons {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

#top-buttons .btn-caption {
  font-size: 10px;
}

.btn-caption {
  color: #af94ed;
  display: block;
  letter-spacing: 0.05em;
}

@keyframes btnGlow {
  0% { filter: brightness(0.78); opacity: 0.7; }
  50% { filter: brightness(1.15); opacity: 1; }
  100% { filter: brightness(0.78); opacity: 0.7; }
}



@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: var(--p-opacity);
  }
  45% {
    opacity: var(--p-opacity);
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translateY(-80vh) translateX(var(--p-drift));
    opacity: 0;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(230, 225, 215, 0.8);
  box-shadow: 0 0 2px rgba(200, 195, 185, 0.15);
  width: var(--p-size);
  height: var(--p-size);
  left: var(--p-x);
  bottom: -10px;
  animation: particle-float var(--p-duration) var(--p-delay) linear infinite;
  pointer-events: none;
  z-index: 1;
}


/*背景*/
#title-screen {
    background-image: url("images/title/mile stone/pc-milestonetitle.png");
    background-size: cover;
    background-position: center;
}

#title-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {

    #title-screen{
        background-image:url("images/title/mile stone/media-milestonetitle.png");
        background-size:cover;
        background-position:center;
    }

    #btn-start {
      bottom: 80px;
    }

    #btn-start img {
      width: 280px;
      max-width: 70vw;
    }

    #btn-start .btn-caption {
      font-size: 11px;
    }

    #top-buttons {
      top: 10px;
      left: 10px;
    }

    #top-buttons .btn-caption {
      font-size: 9px;
    }

}



/* ログイン必須ゲート（未ログイン時に全画面表示・閉じる手段なし） */
.login-gate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #1b1035 0%, #0e0a1f 60%, #1a0f30 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.login-gate.hidden {
  display: none;
}

.login-gate-box {
  width: 90%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}

.login-gate-title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 6px;
}

.login-gate-sub {
  font-size: 14px;
  color: #ffd7f5;
  margin-bottom: 12px;
}

.login-gate-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

.login-gate-box .external-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.login-gate-box .external-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ログイン / 新規登録のタブ切替 */
.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-tab-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.auth-tab-btn.active {
  background: linear-gradient(135deg, #6d5bb8, #8b7fd4);
  color: #fff;
  border-color: transparent;
}

/* OAuth ボタン（Google / X）: 無料枠で追加 */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #3c4043;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}

.oauth-btn:hover { filter: brightness(0.97); }
.oauth-btn:active { transform: scale(0.99); }

.oauth-google {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
}

.oauth-twitter {
  background: #000;
  color: #fff;
  border-color: #000;
}

.oauth-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}

.oauth-google .oauth-icon {
  background: #4285f4;
  color: #fff;
}

.oauth-twitter .oauth-icon {
  background: #fff;
  color: #000;
  font-size: 12px;
}

.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.35);
  font-size: 12px;
}

.oauth-divider::before,
.oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.login-gate-box .oauth-divider {
  color: rgba(255, 255, 255, 0.55);
}

.login-gate-box .oauth-divider::before,
.login-gate-box .oauth-divider::after {
  background: rgba(255, 255, 255, 0.18);
}

.login-gate-box .oauth-btn {
  border-width: 1px;
}

/* 紐付け（ログイン中のアカウントに Google/X を追加） */
.link-providers {
  margin: 12px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.link-providers-head {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.link-providers-note {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
}

.link-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
}

.link-provider-row:last-child {
  border-bottom: none;
}

.link-badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #eee;
  color: #666;
}

.link-badge.linked {
  background: #e6f4ea;
  color: #1a7f37;
}

.link-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #8b7fd4;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.link-btn:hover {
  background: #f5f2ff;
}

.link-unlink-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
}

.link-unlink-btn:hover {
  background: #fbe9e7;
  border-color: #e57373;
  color: #c62828;
}

.oauth-icon.small {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

/* SVGアイコン（絵文字置換） */
.tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pc-icon {
  width: 32px;
  height: 32px;
  stroke: #6b6b7a;
}

.pc-app-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-icon {
  width: 20px;
  height: 20px;
  vertical-align: -3px;
  margin-right: 6px;
}

.inline-icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
}

.eye-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.close-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 4px;
}

.pass-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tab-btn .tab-icon {
  margin-bottom: 1px;
}

.popup-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* パスワード入力 + 表示切替ボタン */
.password-field {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}

.password-field .external-input {
  flex: 1;
  margin: 0;
}

.pass-toggle-btn {
  flex-shrink: 0;
  width: 38px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.login-gate-box .pass-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* パスワードをお忘れですか？リンク */
.password-reset-link {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: #8b7fd4;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.login-gate-box .password-reset-link {
  color: rgba(255, 255, 255, 0.75);
}

/* パスワード再設定ダイアログ（ログインゲートより前面） */
.password-reset-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

.password-reset-dialog.hidden {
  display: none;
}

.password-reset-box {
  position: relative;
  width: 90%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.password-reset-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

.password-reset-title {
  font-size: 17px;
  font-weight: bold;
  color: #4a3f78;
  margin-bottom: 6px;
}

.password-reset-sub {
  font-size: 12px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 14px;
}

.password-reset-box .external-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.password-reset-box .external-auth-btn {
  width: 100%;
}

.password-reset-box .external-auth-msg {
  color: #c46a6a;
}

/* ⭕ 修正版：画面全体を暗くする背景（初期状態は非表示） */
.pwa-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 背景を少し暗く */
  display: none; /* 👈 最初は完全に非表示にする */
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* ⭕ 修正版：JavaScriptで .show クラスがついたら表示する設定 */
.pwa-overlay.show {
  display: flex !important;
}

/* 中央のポップアップ本体（ここは最初からそのままでOK） */
.pwa-banner {
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-out;
}

/* ボタンやテキストの基本スタイル */
#pwa-banner-text { font-size: 16px; line-height: 1.5; color: #333; margin: 0 0 20px 0; }
.pwa-banner-buttons { display: flex; justify-content: flex-end; gap: 12px; }
.btn-primary { background: #007aff; color: #fff; border: none; padding: 10px 20px; font-size: 14px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.btn-secondary { background: #f2f2f7; color: #555; border: none; padding: 10px 20px; font-size: 14px; border-radius: 8px; cursor: pointer; }

/* ============================================================
   ROOM_TEMP: プレイヤーの部屋
   壁・床は仮CSSです。後で背景画像に差し替えてください。
   ============================================================ */
#home-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #2c1810;
}

.room-container {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.room-section {
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

/* ROOM_TEMP: 壁の仮色 */
.room-wall {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e8dcc8 0%, #ddd0b8 65%, transparent 65%);
  z-index: 0;
}

/* ROOM_TEMP: 床の仮色 */
.room-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, #c4a882 0%, #b8956e 100%);
  z-index: 0;
}

.room-floor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #a07850;
}

.room-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  letter-spacing: 0.15em;
  z-index: 5;
  white-space: nowrap;
}

.furniture-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10%;
}

/* ========== コレクション棚 ========== */
.shelf-frame {
  position: relative;
  width: min(55%, 320px);
  height: min(52%, 360px);
  background: #8B6914;
  border-radius: 4px 4px 0 0;
  border: 3px solid #6b4f0e;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
  box-sizing: border-box;
}

.shelf-row {
  flex: 1;
  display: flex;
  gap: 6px;
}

.shelf-slot {
  flex: 1;
  border: 2px dashed rgba(0,0,0,0.15);
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.shelf-slot.filled {
  border-style: solid;
  border-color: rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.35);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.08);
}

.shelf-board {
  height: 6px;
  background: #6b4f0e;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ========== ショップ（Milli Pro オンラインショップ） ========== */
.shop-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6f57b8, #8b7fd4 60%, #a78fe0);
  color: #fff;
  box-shadow: 0 8px 24px rgba(107, 87, 184, 0.35);
  margin-bottom: 14px;
}

.shop-hero img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  background: #fff;
  object-fit: contain;
}

.shop-hero-text {
  flex: 1;
  min-width: 0;
}

.shop-hero-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.shop-hero-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 3px;
}

.shop-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ede7fa;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.05);
  margin-bottom: 6px;
}

.shop-wallet-label {
  font-size: 12px;
  font-weight: bold;
  color: #8b7fd4;
}

.shop-wallet-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.shop-cat-title {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin: 18px 2px 10px;
  padding-left: 8px;
  border-left: 3px solid #af94ed;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(80, 60, 140, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(80, 60, 140, 0.14);
}

.shop-card-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  font-size: 42px;
}

.shop-card-owned {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: bold;
  color: #8b7fd4;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 2px 8px;
}

.shop-card-info {
  padding: 10px 12px 0;
}

.shop-card-name {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.shop-card-desc {
  font-size: 10.5px;
  color: #999;
  margin-top: 3px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 31px;
}

.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 12px;
  margin-top: auto;
}

.shop-card-price {
  font-size: 14px;
  font-weight: bold;
  color: #c98a2e;
}

.shop-card-buy {
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.shop-card-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(139, 127, 212, 0.45);
}

.shop-card-buy.disabled {
  background: #eee;
  color: #bbb;
  cursor: not-allowed;
  box-shadow: none;
}

.shop-note {
  text-align: center;
  font-size: 11px;
  color: #b3a8d8;
  margin: 16px 0 4px;
}

/* ========== 痛バッグ制作 ========== */
.itabag-menu {
  text-align: center;
  padding: 8px 0;
}

.itabag-menu-emoji {
  font-size: 52px;
}

.itabag-menu-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 8px 0 4px;
}

.itabag-menu-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.itabag-menu-rule {
  font-size: 12px;
  color: #888;
  line-height: 1.9;
  text-align: left;
  display: inline-block;
  margin: 0 auto 10px;
}

.itabag-menu-reward {
  font-size: 12px;
  font-weight: bold;
  color: #8b7fd4;
  margin-bottom: 8px;
}

.itabag-menu-stats {
  font-size: 12px;
  color: #666;
  margin-bottom: 14px;
}

.itabag-start-btn {
  padding: 12px 36px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.itabag-start-btn:hover {
  opacity: 0.9;
}

.itabag-game {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.itabag-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.itabag-timer {
  color: #8b7fd4;
  font-size: 18px;
}

.itabag-timer.danger {
  color: #e74c3c;
  animation: itabagPulse 0.6s infinite alternate;
}

@keyframes itabagPulse {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

.itabag-order-label,
.itabag-bag-label,
.itabag-palette-label {
  font-size: 12px;
  font-weight: bold;
  color: #8b7fd4;
}

.itabag-order {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

.itabag-order-slot {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px dashed #c9b8ee;
  background: #faf7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.itabag-bag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  background: linear-gradient(180deg, #6b4f0e, #8B6914);
  border-radius: 14px;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}

.itabag-slot {
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 2px dashed rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.1s;
  user-select: none;
}

.itabag-slot:active {
  transform: scale(0.94);
}

.itabag-slot.filled {
  border-style: solid;
  border-color: #ffe9b3;
  background: rgba(255,255,255,0.25);
}

/* ドラッグ&ドロップ（PC: drag / スマホ: タッチドラッグ） */
.itabag-palette-btn.dragging {
  opacity: 0.45;
}

.itabag-slot.drop-target {
  background: rgba(255,255,255,0.5);
  border-color: #fff;
  transform: scale(1.08);
}

.itabag-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,0.94);
  border: 2px solid #af94ed;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(80, 60, 140, 0.35);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.itabag-palette {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.itabag-palette-btn {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 2px solid #e8e0f8;
  border-radius: 12px;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.itabag-palette-btn span {
  font-size: 9px;
  color: #888;
}

.itabag-palette-btn.selected {
  border-color: #af94ed;
  background: #f2ecff;
}

.itabag-actions {
  display: flex;
  gap: 8px;
}

/* 幅が広い環境では、注文+バッグ（左）とパレット+操作（右）の2カラムに */
@media (min-width: 560px) {
  .itabag-game {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    align-items: start;
  }
  .itabag-top {
    grid-column: 1 / 3;
  }
  .itabag-order-label {
    grid-column: 1;
    grid-row: 2;
  }
  .itabag-order {
    grid-column: 1;
    grid-row: 3;
  }
  .itabag-bag-label {
    grid-column: 1;
    grid-row: 4;
  }
  .itabag-bag {
    grid-column: 1;
    grid-row: 5;
  }
  .itabag-palette-label {
    grid-column: 2;
    grid-row: 2;
  }
  .itabag-palette {
    grid-column: 2;
    grid-row: 3 / 6;
    align-content: start;
  }
  .itabag-actions {
    grid-column: 2;
    grid-row: 6;
  }
}

.itabag-done-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff8fb3, #ff5f8f);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.itabag-done-btn:hover {
  opacity: 0.9;
}

.itabag-clear-btn {
  padding: 12px 18px;
  border: 1px solid #d5c8f2;
  border-radius: 12px;
  background: #fff;
  color: #8b7fd4;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.itabag-fail-msg {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #e74c3c;
}

.itabag-result {
  text-align: center;
  padding: 16px 0;
}

.itabag-result-stars {
  font-size: 36px;
  color: #ffb400;
  margin-bottom: 8px;
  letter-spacing: 4px;
}

.itabag-result p {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
}

.itabag-result-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.itabag-result-reward {
  font-weight: bold;
  color: #8b7fd4;
}

.itabag-next-btn {
  display: block;
  margin: 4px auto;
  padding: 11px 32px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.itabag-back-btn {
  display: block;
  margin: 8px auto 0;
  padding: 8px 20px;
  border: 1px solid #d5c8f2;
  border-radius: 999px;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* ========== ジョブ（§20） ========== */
.jobs-title {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin-bottom: 10px;
}

.jobs-title b {
  color: #8b7fd4;
}

.jobs-note {
  font-size: 11px;
  color: #888;
  background: #faf7ff;
  border: 1px solid #ece4fa;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.jobs-note b {
  color: #8b7fd4;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-card {
  padding: 10px;
  border-radius: 12px;
  background: #faf7ff;
  border: 1px solid #ece4fa;
}

.job-card.locked {
  background: #f7f7f9;
  border-color: #e3e3ea;
  opacity: 0.92;
}

.job-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.job-card-emoji {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.job-card-info {
  flex: 1;
  min-width: 0;
}

.job-card-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.job-card-status {
  font-size: 12px;
  color: #8b7fd4;
  font-weight: bold;
  margin-top: 1px;
}

.job-card.locked .job-card-status {
  color: #999;
}

.job-card-buff {
  font-size: 10px;
  color: #e67e22;
  background: #fff3e0;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
}

.job-card-req {
  font-size: 11px;
  color: #888;
  margin: 8px 0;
}

.job-unlock-btn,
.job-level-btn {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.job-unlock-btn:hover,
.job-level-btn:hover {
  opacity: 0.9;
}

.job-unlock-btn.disabled,
.job-level-btn.disabled {
  background: #e8e8ee;
  color: #999;
  cursor: not-allowed;
}

.jobs-hint {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 12px;
}

.jobs-open-btn {
  width: 100%;
  padding: 9px;
  border: 2px dashed #d5c8f2;
  border-radius: 12px;
  background: #faf7ff;
  color: #8b7fd4;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
  transition: background 0.15s;
}

.jobs-open-btn:hover {
  background: #f2ecff;
}

.office-upgrade-discount {
  font-size: 10px;
  color: #e67e22;
  background: #fff3e0;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
}

/* ========== ギャラリー（§22） ========== */
/* Canvas */
#canvas-body {
  display: flex;
  flex-direction: column;
}

.canvas-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.canvas-menu-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #d5c8f2;
  border-radius: 10px;
  background: #fff;
  color: #8b7fd4;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.canvas-status {
  flex: 1;
  font-size: 12px;
  font-weight: bold;
  color: #8b7fd4;
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-top-tools {
  display: flex;
  gap: 6px;
}

.canvas-quick {
  width: 38px;
  height: 38px;
  border: 1px solid #e3ddf5;
  border-radius: 10px;
  background: #fff;
  font-size: 17px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.canvas-quick.active {
  background: #8b7fd4;
  border-color: #8b7fd4;
}

.canvas-quick-danger {
  font-size: 15px;
}

/* ハンバーガーメニュー（ドロップダウン） */
.canvas-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 250px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e6deff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(80, 60, 140, 0.18);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.canvas-menu-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.canvas-menu-title {
  font-size: 11px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.06em;
}

.canvas-menu-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.canvas-menu-tool {
  flex: 1;
  min-width: 90px;
  padding: 8px 4px;
  border: 1px solid #e3ddf5;
  border-radius: 10px;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.canvas-menu-tool.active {
  background: #8b7fd4;
  color: #fff;
  border-color: #8b7fd4;
}

.canvas-menu-size {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 66px;
  height: 34px;
  border: 1px solid #e3ddf5;
  border-radius: 10px;
  background: #fff;
  color: #555;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.canvas-menu-size[data-active="1"] {
  background: #8b7fd4;
  color: #fff;
  border-color: #8b7fd4;
}

.canvas-size-dot {
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
  max-width: 14px;
  max-height: 14px;
}

.canvas-menu-action {
  flex: 1;
  min-width: 72px;
  padding: 8px 4px;
  border: 1px solid #e3ddf5;
  border-radius: 10px;
  background: #fff;
  color: #8b7fd4;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.canvas-menu-action.canvas-post-btn {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  border: none;
}

/* 色パレット（常時表示） */
.canvas-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  justify-content: center;
}

.canvas-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ddd;
  cursor: pointer;
  padding: 0;
}

.canvas-color[data-active="1"] {
  box-shadow: 0 0 0 2px #8b7fd4;
  transform: scale(1.15);
}

/* キャンバス（残りスペースに収まる正方形） */
.canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-wrap canvas {
  display: block;
  max-width: min(100%, 640px);
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  touch-action: none;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.12);
  cursor: crosshair;
}

/* ギャラリー側の共通ボタン（お絵かきを開く / 画像を選ぶ） */
.canvas-upload-btn,
.canvas-open-btn {
  flex: 1;
  padding: 9px 4px;
  border: 1px solid #d5c8f2;
  border-radius: 10px;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

/* ギャラリー共通 */
.gallery-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.gallery-tab {
  flex: 1;
  padding: 9px 4px;
  border: 1px solid #e3e3ea;
  border-radius: 10px;
  background: #fff;
  color: #888;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.gallery-tab.active {
  background: #8b7fd4;
  color: #fff;
  border-color: #8b7fd4;
}

.gallery-section-title {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin: 16px 2px 10px;
  padding-left: 8px;
  border-left: 3px solid #af94ed;
}

.gallery-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #faf7ff;
  border: 1px solid #ece4fa;
}

.gallery-card-img {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #eee;
}

.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-card-info {
  flex: 1;
  min-width: 0;
}

.gallery-card-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.gallery-card-mode {
  font-size: 11px;
  color: #8b7fd4;
  margin: 2px 0 4px;
}

.gallery-card-desc {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.gallery-card-author {
  font-size: 11px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.gallery-author-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

.gallery-author-emoji {
  background: #ece4fa;
  text-align: center;
  line-height: 18px;
  font-size: 10px;
}

.gallery-card-edit {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.gallery-mode-select,
.gallery-price-input {
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 11px;
  padding: 5px;
  font-family: inherit;
  color: #555;
  background: #fff;
}

.gallery-mode-select {
  width: 76px;
}

.gallery-price-input {
  width: 76px;
}

.gallery-card-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gallery-update-btn,
.gallery-wall-btn,
.gallery-delete-btn,
.gallery-react-btn,
.gallery-buy-btn,
.gallery-save-btn {
  padding: 6px 10px;
  border: 1px solid #d5c8f2;
  border-radius: 999px;
  background: #fff;
  color: #8b7fd4;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.gallery-delete-btn {
  color: #e07b7b;
  border-color: #f0d5d5;
}

.gallery-buy-btn {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  border: none;
}

.gallery-react-btn.reacted {
  background: #fdf3f3;
  color: #e08585;
  border-color: #f0d5d5;
}

.gallery-own-tag,
.gallery-sold-tag {
  font-size: 11px;
  color: #aaa;
  background: #f3f3f5;
  border-radius: 999px;
  padding: 4px 10px;
}

.gallery-empty,
.gallery-loading {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 30px 10px;
  line-height: 1.8;
}

/* 投稿タブ */
.gallery-upload-empty {
  text-align: center;
  padding: 20px 10px;
}

.gallery-upload-icon {
  font-size: 44px;
  margin-bottom: 8px;
}

.gallery-upload-empty p {
  font-size: 12px;
  color: #888;
  margin-bottom: 14px;
  line-height: 1.8;
}

.gallery-upload-empty .canvas-open-btn {
  display: inline-block;
  margin: 0 4px 8px;
  padding: 9px 18px;
}

.gallery-upload-empty .canvas-upload-btn {
  display: inline-block;
  margin: 0 4px 8px;
  padding: 9px 18px;
}

.gallery-upload-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-upload-preview {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #ece4fa;
}

.gallery-upload-preview img {
  width: 100%;
  display: block;
}

.gallery-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  color: #333;
}

.gallery-mode-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  font-size: 12px;
  color: #555;
}

.gallery-mode-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.gallery-price-row {
  background: #faf7ff;
  border: 1px solid #ece4fa;
  border-radius: 10px;
  padding: 10px;
}

.gallery-price-label {
  display: block;
  font-size: 11px;
  color: #8b7fd4;
  font-weight: bold;
  margin-bottom: 6px;
}

.gallery-price-note {
  font-size: 10px;
  color: #aaa;
  margin-top: 6px;
}

.gallery-author-note {
  text-align: center;
  font-size: 11px;
  color: #999;
}

.gallery-submit-btn {
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.gallery-cancel-btn {
  padding: 9px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* 壁に飾った絵 */
.wall-artwork {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  border: 6px solid #8a6d3b;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  background: #fff;
  z-index: 3;
}

.wall-artwork img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* ========== パソコンデスク ========== */
.desk-top {
  position: absolute;
  bottom: min(12%, 70px);
  width: min(70%, 420px);
  height: 18px;
  background: linear-gradient(180deg, #a0522d, #8B4513);
  border-radius: 4px;
  z-index: 2;
}

.desk-leg {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: min(12%, 70px);
  background: linear-gradient(180deg, #8B4513, #6b3410);
  border-radius: 2px;
}

.desk-leg.left { left: min(15%, 80px); }
.desk-leg.right { right: min(15%, 80px); }

.monitor {
  position: absolute;
  bottom: min(calc(12% + 20px), 90px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  transition: transform 0.15s;
}

.monitor:active {
  transform: scale(0.96);
}

.monitor-screen {
  width: min(48vw, 300px);
  height: min(30vh, 200px);
  background: #1a1a2e;
  border-radius: 8px 8px 4px 4px;
  border: 4px solid #333;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.monitor-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(175,148,237,0.08), transparent);
  pointer-events: none;
}

.monitor-screen span {
  color: rgba(175,148,237,0.6);
  font-size: 13px;
  letter-spacing: 0.1em;
  animation: monitorGlow 2s ease-in-out infinite;
}

@keyframes monitorGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.monitor-base {
  width: 60%;
  height: 8px;
  background: #333;
  border-radius: 0 0 4px 4px;
}

.keyboard {
  position: absolute;
  bottom: min(10%, 58px);
  width: min(40%, 240px);
  height: 8px;
  background: #444;
  border-radius: 3px;
  z-index: 2;
}

.mouse {
  position: absolute;
  bottom: min(10%, 58px);
  right: min(18%, 100px);
  width: 14px;
  height: 20px;
  background: #555;
  border-radius: 7px 7px 4px 4px;
  z-index: 2;
}

/* ========== スマホ（台付き） ========== */
.smartphone {
  position: absolute;
  bottom: min(calc(12% + 10px), 75px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  transition: transform 0.15s;
}

.smartphone:active {
  transform: scale(0.95);
}

.phone-body {
  width: 130px;
  height: 230px;
  background: #222;
  border-radius: 18px;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
  box-shadow:
    inset 0 0 0 2px #333,
    0 4px 12px rgba(0,0,0,0.3);
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: #333;
  border-radius: 3px;
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.phone-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(175,148,237,0.08), transparent);
  pointer-events: none;
}

.phone-screen span {
  color: rgba(175,148,237,0.6);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.3;
  padding: 0 8px;
  animation: monitorGlow 2s ease-in-out infinite;
}

.phone-home-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: #444;
  border-radius: 2px;
  z-index: 2;
}

.phone-stand {
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 18px solid #888;
  margin-top: -2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* ========== スマホ / モニタ 出し分け ========== */
@media (max-width: 767px) {
  .monitor { display: none; }
  .smartphone { display: flex; }
}

@media (min-width: 768px) {
  .monitor { display: flex; }
  .smartphone { display: none; }
}

/* ========== 本棚（図鑑） ========== */
.bookshelf-frame {
  position: relative;
  width: min(50%, 300px);
  height: min(55%, 380px);
  background: #6b4f0e;
  border-radius: 4px 4px 0 0;
  border: 3px solid #5a4210;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  box-sizing: border-box;
}

.bookshelf-row {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 2px;
}

.book {
  width: 14px;
  height: var(--book-h, 75%);
  background: var(--book-c, #aaa);
  border-radius: 2px 2px 0 0;
  flex-shrink: 0;
  position: relative;
}

.book::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

/* ========== PC デスクトップ ========== */
#pc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.pc-desktop {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: linear-gradient(180deg, #0f0f23, #1a1a3e);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease-out;
}

.pc-desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.pc-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.pc-user:hover {
  background: rgba(255,255,255,0.05);
}

.pc-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
  overflow: hidden;
}

.pc-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pc-user-name {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.pc-user-id {
  color: #888;
  font-size: 10px;
}

.pc-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.pc-close-btn:hover {
  background: rgba(255,80,80,0.3);
  color: #ff6b6b;
}

.pc-desktop-body {
  padding: 20px 16px;
  overflow-y: auto;
  flex: 1;
}

.pc-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pc-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 10px 6px;
  border-radius: 12px;
  transition: background 0.15s;
  user-select: none;
}

.pc-app:hover {
  background: rgba(255,255,255,0.06);
}

.pc-app:active {
  transform: scale(0.95);
}

.pc-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
}

.pc-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-app-emoji {
  font-size: 28px;
  background: rgba(175,148,237,0.1);
}

.pc-app-label {
  color: #ccc;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
}

.pc-divider {
  text-align: center;
  color: #555;
  font-size: 12px;
  letter-spacing: 0.2em;
  margin: 8px 0 16px;
}

/* ========== PC表示のレスポンシブ ========== */
@media (min-width: 1024px) {
  .room-section {
    flex: 0 0 640px;
  }
  .room-container {
    justify-content: center;
  }
  .monitor-screen {
    width: 360px;
    height: 240px;
  }
}

@media (min-width: 1920px) {
  .room-container {
    overflow-x: hidden;
  }
}

/* モバイル時のタッチターゲット拡大 */
@media (max-width: 767px) {
  .pc-app {
    padding: 12px 8px;
  }
  .pc-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
}

/* ========== プレイヤーステータスバー ========== */
.player-status-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  max-width: calc(100vw - 24px);
}

.status-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.96);
  border: 2px solid #af94ed;
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  cursor: pointer;
  font-family: inherit;
}

.status-trigger:hover {
  box-shadow: 0 4px 18px rgba(175,148,237,0.45);
}

.status-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.status-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.status-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-lv {
  font-size: 12px;
  color: #8b7fd4;
  font-weight: bold;
}

.status-currency {
  font-size: 14px;
  font-weight: bold;
  color: #b8860b;
  white-space: nowrap;
}

.status-exp {
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: #eee;
  overflow: hidden;
  flex-shrink: 0;
}

.status-exp-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #af94ed, #8b7fd4);
  transition: width 0.4s ease;
}

.status-exp-label {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
}

/* ========== プレイヤーカード ========== */
.player-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.player-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.status-avatar img,
.pc-user-avatar img,
.player-card-avatar img,
.icon-editor-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== アイコンエディタ ========== */
.profile-edit-btn {
  width: 100%;
  padding: 10px;
  border: 2px dashed #d5c8f2;
  border-radius: 12px;
  background: #faf7ff;
  color: #8b7fd4;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.profile-edit-btn:hover {
  background: #f2ecff;
}

/* ========== 推し設定 ========== */
.oshi-section-title {
  font-size: 14px;
  font-weight: bold;
  color: #8b7fd4;
  margin: 14px 0 8px;
}

.oshi-count {
  font-size: 12px;
  color: #aaa;
  font-weight: normal;
}

.oshi-ult-grid,
.oshi-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.oshi-ult-card,
.oshi-fav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 2px solid #e8e0f8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}

.oshi-ult-card img,
.oshi-fav-card img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
}

.oshi-ult-card span,
.oshi-fav-card span {
  font-size: 11px;
  color: #555;
  line-height: 1.3;
}

.oshi-ult-card.selected {
  border-color: #f472b6;
  background: #fdf2f8;
  box-shadow: 0 0 0 1px #f472b6;
}

.oshi-ult-card.selected span {
  color: #be185d;
  font-weight: bold;
}

.oshi-fav-card.selected {
  border-color: #8b7fd4;
  background: #f3efff;
  box-shadow: 0 0 0 1px #8b7fd4;
}

.oshi-fav-card.selected span {
  color: #6d5bb8;
  font-weight: bold;
}

.oshi-save-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d5bb8, #8b7fd4);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.oshi-msg {
  font-size: 11px;
  color: #4caf50;
  margin-top: 8px;
  text-align: center;
}

.icon-editor {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #faf7ff;
  border: 1px solid #e8e0f8;
}

.icon-editor-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 34px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  overflow: hidden;
}

.icon-editor-label {
  font-size: 12px;
  font-weight: bold;
  color: #8b7fd4;
  margin: 8px 0 6px;
}

.icon-editor-emojis {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

.icon-emoji-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s;
}

.icon-emoji-btn:hover {
  background: #efe7ff;
  transform: scale(1.1);
}

.icon-emoji-btn:active {
  transform: scale(0.95);
}

.icon-upload-btn {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.icon-upload-btn:hover {
  opacity: 0.9;
}

.icon-editor-hint {
  font-size: 10px;
  color: #aaa;
  margin: 6px 0 0;
}

.icon-editor-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.icon-action-btn {
  flex: 1;
  padding: 8px 4px;
  border: 1px solid #d5c8f2;
  border-radius: 10px;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.icon-action-btn:hover {
  background: #f2ecff;
}

.icon-action-btn.primary {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  border: none;
  color: #fff;
}

.icon-action-btn.primary:hover {
  opacity: 0.9;
}

.player-card-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.player-card-title {
  font-size: 13px;
  color: #8b7fd4;
  font-weight: bold;
  margin-top: 2px;
}

.player-card-id {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  word-break: break-all;
}

.player-card-section-title {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin: 18px 2px 8px;
  padding-left: 8px;
  border-left: 3px solid #af94ed;
}

.player-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #555;
}

.player-card-row:last-child {
  border-bottom: none;
}

.exp-bar {
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 8px;
}

.exp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #af94ed, #8b7fd4);
  transition: width 0.4s ease;
}

.exp-label {
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

.player-card-pts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pt-chip {
  background: #f8f6ff;
  border: 1px solid #e4dcf7;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}

.player-card-note {
  font-size: 12px;
  color: #999;
  padding: 6px 0;
}

/* ========== PCデスクトップ ========== */
.pc-user-name {
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

@media (max-width: 767px) {
  .status-exp {
    width: 60px;
  }
  .status-exp-label {
    display: none;
  }
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.popup-overlay {
  position: fixed;
  inset: 0;
  background: #f5f2fa;
  display: flex;
  flex-direction: column;
  z-index: 500;
  padding-bottom: 60px;
  box-sizing: border-box;
}

.popup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f5f2fa;
  width: 100%;
  max-width: none;
  animation: fadeIn 0.18s ease-out;
}

.popup-header {
  position: relative;
  flex-shrink: 0;
  padding: 14px 54px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.popup-back-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.popup-back-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

.popup-header-icon {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  margin-right: 6px;
  border-radius: 5px;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  color: #444;
  font-size: 14px;
  line-height: 1.6;
  background: linear-gradient(180deg, #f7f4fc, #efeafb);
}

.popup-card {
  padding: 15px 16px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ede7fa;
  border-left: 3px solid #af94ed;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
}

.popup-card-title {
  font-weight: bold;
  color: #af94ed;
  font-size: 14px;
}

.popup-card-desc {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.popup-footer {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  background: #fff;
  border-top: 1px solid #ece7f7;
}

.popup-close-btn {
  width: 100%;
  padding: 11px;
  border: none;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 12px;
  transition: opacity 0.2s;
}

.popup-close-btn:hover {
  opacity: 0.85;
}

/* ========== ボトムタブバー ========== */
#tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  background: #ffffff;
  border-top: 1px solid #e6e2f2;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 600;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.15s;
}

.tab-btn span {
  font-size: 9px;
  color: #999;
  transition: color 0.15s;
}

.tab-btn img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.15s;
}

.tab-btn.active img {
  transform: scale(1.1);
}

.tab-btn.active {
  color: #8b7fd4;
}

.tab-btn.active span {
  color: #8b7fd4;
  font-weight: bold;
}

#home-screen {
  padding-bottom: 60px;
  box-sizing: border-box;
}

/* ========== 事務所（Office） ========== */
.popup-content-wide {
  max-width: none;
}

.office-visual {
  text-align: center;
  padding: 8px 0 4px;
}

.office-building {
  font-size: 72px;
  line-height: 1.1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.2));
  animation: officeFloat 3.5s ease-in-out infinite;
}

@keyframes officeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.office-stage-name {
  font-size: 18px;
  font-weight: bold;
  color: #6d5bb8;
  margin-top: 6px;
}

.office-stage-note {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.office-section-title {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin: 18px 2px 10px;
  padding-left: 8px;
  border-left: 3px solid #af94ed;
  border-bottom: none;
  padding-bottom: 0;
}

.office-cheer {
  font-size: 26px;
  font-weight: 900;
  color: #ff9f1c;
  text-align: center;
  padding: 4px 0;
}

.office-facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.office-facility {
  background: #f8f6ff;
  border: 1px solid #e6deff;
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.office-facility.locked {
  background: #f5f5f5;
  border-color: #e0e0e0;
  opacity: 0.75;
}

.office-facility-emoji {
  font-size: 26px;
}

.office-facility-name {
  font-size: 11px;
  font-weight: bold;
  color: #555;
}

.office-facility-lock {
  font-size: 9px;
  color: #aaa;
}

.office-upgrade {
  margin-top: 14px;
  background: linear-gradient(135deg, #6d5bb8, #8b7fd4);
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  text-align: center;
}

.office-upgrade.max {
  background: linear-gradient(135deg, #ff9f1c, #ffc94d);
}

.office-upgrade-head {
  font-size: 15px;
  font-weight: bold;
}

.office-upgrade-unlocks {
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.office-unlock-chip {
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
}

.office-upgrade-cost {
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
}

.office-upgrade-progress {
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  margin: 10px 0 4px;
  overflow: hidden;
}

.office-upgrade-fill {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  transition: width 0.3s;
}

.office-upgrade-have {
  font-size: 11px;
  opacity: 0.9;
}

.office-upgrade-btn {
  margin-top: 10px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: #6d5bb8;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.office-upgrade-btn:hover:not(.disabled) {
  opacity: 0.9;
  transform: scale(0.99);
}

.office-upgrade-btn.disabled {
  background: rgba(255,255,255,0.5);
  color: #999;
  cursor: not-allowed;
}

.office-members {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.office-member {
  flex: 1;
  max-width: 130px;
  background: #f8f6ff;
  border: 1px solid #e6deff;
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.office-member-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c9bcf5;
}

.office-member-name {
  font-size: 11px;
  font-weight: bold;
  color: #555;
}

.office-member-state {
  font-size: 10px;
  color: #6d5bb8;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #555;
}

.setting-bar {
  width: 120px;
  height: 8px;
  background: #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  touch-action: none;
}

.setting-bar::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.setting-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #af94ed, #8b7fd4);
  border-radius: 3px;
}

.setting-toggle {
  width: 42px;
  height: 24px;
  background: #ddd;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.setting-toggle.on {
  background: #af94ed;
}

.setting-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.setting-toggle.on::after {
  transform: translateX(18px);
}

.setting-cursor {
  flex-direction: column;
  align-items: stretch;
}

.cursor-setting {
  width: 100%;
  margin-top: 8px;
}

.cursor-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cursor-option {
  flex: 1 1 30%;
  min-width: 90px;
  padding: 8px 6px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.cursor-option.active {
  border-color: #8b7fd4;
  background: #f5f2ff;
  color: #6d5bb8;
}

.cursor-option small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #999;
  margin-top: 2px;
}

.cursor-preview {
  margin-top: 8px;
  padding: 8px;
  background: #faf8ff;
  border: 1px dashed #ddd;
  border-radius: 8px;
  font-size: 11px;
  color: #888;
  text-align: center;
}

.setting-placeholder {
  text-align: center;
  color: #bbb;
  font-size: 12px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #f0f0f0;
}

#transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  z-index: 200;
  pointer-events: none;
  transition: opacity 1.2s ease-in, background 0.3s ease;
}

#transition-overlay.dark {
  background: black;
  opacity: 1;
}

#loading {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 201;
  color: #999;
  font-size: 14px;
  font-family: sans-serif;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #444;
  border-top-color: #bbb;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* 強制表示（アプリ内ブラウザ用） */
/* 閉じるボタンは強制時も表示する（ゲームがロックされるのを防ぐ） */
.pwa-overlay.forced {
  cursor: default;
}
.pwa-overlay.forced #pwa-action-btn,
.pwa-overlay.forced #pwa-install-btn {
  display: none !important;
}

/* ========== クエスト（日替わり・週替わり） ========== */
.quest-section-title {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin: 16px 2px 10px;
  padding-left: 8px;
  border-left: 3px solid #af94ed;
  border-bottom: none;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quest-reset {
  font-size: 10px;
  font-weight: normal;
  color: #bbb;
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quest-card {
  background: #f8f6ff;
  border: 1px solid #e6deff;
  border-radius: 12px;
  padding: 10px 12px;
}

.quest-card.done {
  border-color: #c9f0c9;
  background: #f3fbf3;
}

.quest-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.quest-name {
  font-size: 13px;
  font-weight: bold;
  color: #444;
}

.quest-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

.quest-progress {
  margin-top: 8px;
  height: 8px;
  background: #eee;
  border-radius: 99px;
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6d5bb8, #9a8be0);
  border-radius: 99px;
  transition: width 0.3s;
}

.quest-card.done .quest-progress-fill {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.quest-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
}

.quest-count {
  color: #6d5bb8;
  font-weight: bold;
}

.quest-reward {
  color: #ff9f1c;
  font-weight: bold;
}

.quest-claim-btn {
  background: linear-gradient(135deg, #ff9f1c, #ffc94d);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.quest-claim-btn:hover {
  opacity: 0.85;
}

.quest-status.claimed {
  font-size: 11px;
  font-weight: bold;
  color: #4caf50;
  white-space: nowrap;
}

.quest-summary {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  color: #bbb;
}

/* ========== 外部連携（Unishare / Games） ========== */
.external-notice {
  text-align: center;
  padding: 24px 12px;
}

.external-notice-icon {
  font-size: 44px;
  margin-bottom: 10px;
}

.external-notice p {
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.external-notice-sub {
  font-size: 11px !important;
  font-weight: normal !important;
  color: #999;
  line-height: 1.7;
  margin-top: 6px;
}

.external-status {
  background: #f8f6ff;
  border: 1px solid #e6deff;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.external-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  color: #777;
}

.external-status-row b {
  color: #6d5bb8;
}

.external-sync-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #6d5bb8, #8b7fd4);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.external-sync-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.external-result {
  margin-bottom: 12px;
}

.external-syncing {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 8px 0;
}

.external-ok {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #4caf50;
  padding: 8px 0 2px;
}

.external-ok-detail {
  text-align: center;
  font-size: 12px;
  color: #6d5bb8;
  padding: 2px 0;
}

/* アカウント連携（共通ログイン） */
.external-account {
  background: #f8f6ff;
  border: 1px solid #e6deff;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.external-account-head {
  font-size: 13px;
  font-weight: bold;
  color: #6d5bb8;
  margin-bottom: 6px;
}

.external-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  color: #777;
}

.external-account-row b {
  color: #444;
  word-break: break-all;
}

.external-account-note {
  font-size: 10.5px;
  color: #999;
  line-height: 1.6;
  margin: 6px 0;
}

.external-copy-btn {
  background: #fff;
  border: 1px solid #cdc0f0;
  color: #6d5bb8;
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
  white-space: nowrap;
}

.external-copy-btn:hover {
  background: #efe9ff;
}

.external-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 13px;
  background: #fff;
}

.external-input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.external-auth-btn {
  flex: 1;
  background: linear-gradient(135deg, #6d5bb8, #8b7fd4);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.external-auth-btn.secondary {
  background: #fff;
  color: #6d5bb8;
  border: 1px solid #cdc0f0;
}

.external-auth-msg {
  font-size: 11px;
  color: #4caf50;
  margin-top: 6px;
}

.external-logout-btn {
  background: #fff;
  color: #c46a6a;
  border: 1px solid #e2b6b6;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}

.external-logout-btn:hover {
  background: #fdeeee;
}

/* ========== プレイヤー設定画面 ========== */
#setup-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0e8fa;
  z-index: 100;
  color: #444;
}

.setup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.setup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(107,70,193,0.06);
  flex-shrink: 0;
}

.setup-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(107,70,193,0.12);
  border-radius: 2px;
  overflow: hidden;
}

.setup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #af94ed, #8b7fd4);
  border-radius: 2px;
  transition: width 0.35s ease;
}

.setup-step {
  font-size: 13px;
  color: #8b5cf6;
  font-weight: bold;
  flex-shrink: 0;
}

.setup-pages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.setup-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 20px 120px;
  box-sizing: border-box;
}

.setup-page-inner {
  flex: 1;
}

.setup-title {
  font-size: 22px;
  color: #af94ed;
  text-align: center;
  margin: 0 0 8px;
}

.setup-desc {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin: 0 0 16px;
}

.setup-field {
  margin-top: 24px;
}

.setup-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #d4c5f0;
  border-radius: 12px;
  background: #fff;
  color: #333;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.setup-input:focus {
  border-color: #8b5cf6;
}

.setup-input::placeholder {
  color: #bbb;
}

.setup-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #d4c5f0;
  border-radius: 12px;
  background: #fff;
  color: #333;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  resize: none;
}

.setup-textarea:focus {
  border-color: #8b5cf6;
}

.setup-textarea::placeholder {
  color: #bbb;
}

.setup-field-hint {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
}

.setup-field-error {
  font-size: 13px;
  color: #e74c3c;
  margin: 6px 0 0;
}

/* Footer / Navigation */
.setup-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, #f0e8fa 25%);
  z-index: 1;
}

.setup-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.setup-btn:active {
  opacity: 0.7;
}

.setup-btn-back {
  background: #e8dff0;
  color: #6b46c1;
  max-width: 100px;
}

.setup-btn-next,
.setup-btn-confirm {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
}

.setup-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Talent Cards */
.talent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.talent-card-portrait {
  width: 64px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  opacity: 0.25;
  filter: grayscale(80%) brightness(0.5);
}

.talent-card.selected .talent-card-portrait {
  opacity: 1;
  filter: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 16px rgba(139,92,246,0.45);
}

.talent-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.talent-card-logo {
  width: 56px;
  height: auto;
  transition: all 0.25s ease;
}

.talent-card-logo img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.talent-card-name {
  font-size: 10px;
  color: #999;
  text-align: center;
  transition: color 0.25s;
}

.talent-card.selected .talent-card-name {
  color: #6b46c1;
}

/* Carousel (最推し) */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  margin-top: 8px;
}

.carousel-arrow {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #8b5cf6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(107,70,193,0.12);
  transition: all 0.15s;
  flex-shrink: 0;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.carousel-arrow:active {
  transform: scale(0.88);
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(107,70,193,0.10);
  width: 100%;
  max-width: 280px;
}

.carousel-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.22, 0.1, 0.22, 1);
}

.carousel-card {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 18px;
  box-sizing: border-box;
}

.carousel-card-portrait {
  width: 150px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.carousel-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-card-logo {
  width: 120px;
  height: auto;
  margin-bottom: 6px;
}

.carousel-card-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-card-name {
  font-size: 14px;
  color: #6b46c1;
  font-weight: bold;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  background: #d4c5f0;
  transform: rotate(45deg);
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
}

.carousel-dot.active {
  background: #8b5cf6;
}

/* Grid (推し) */
.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 12px 0;
}

/* Group buttons */
.setup-group-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.group-btn {
  padding: 8px 18px;
  border: 1.5px solid rgba(175,148,237,0.3);
  border-radius: 20px;
  background: transparent;
  color: #af94ed;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.group-btn.active {
  background: #af94ed;
  color: #fff;
  border-color: #af94ed;
}

.group-btn:active {
  transform: scale(0.95);
}

/* Favorites count */
.setup-count {
  text-align: center;
  font-size: 13px;
  color: #af94ed;
  margin: 12px 0 0;
}

/* Confirmation */
.setup-confirm {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 12px rgba(107,70,193,0.08);
}

.confirm-row {
  padding: 14px 0;
  border-bottom: 1px solid #ede4f5;
}

.confirm-row:last-child {
  border-bottom: none;
}

.confirm-label {
  display: block;
  font-size: 11px;
  color: #8b5cf6;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.confirm-value {
  font-size: 15px;
  color: #444;
}

/* Confirm scroll card */
.confirm-hscroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  padding-bottom: 4px;
}

.confirm-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #f5f0ff;
  border-radius: 10px;
}

.confirm-card-portrait {
  width: 48px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
}

.confirm-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.confirm-card-logo {
  width: 48px;
  height: auto;
}

.confirm-card-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.setup-confirm-note {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 16px;
}

/* Success */
.setup-success {
  text-align: center;
  padding: 48px 20px;
}

.setup-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
  color: #fff;
}

.setup-success h2 {
  color: #6b46c1;
  margin: 0 0 8px;
  font-size: 20px;
}

.setup-success p {
  color: #888;
  margin: 0;
  font-size: 15px;
}

.setup-success-sub {
  color: #bbb !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

/* PC */
@media (min-width: 768px) {
  #setup-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(80,50,120,0.35);
  }

  .setup-container {
    width: 520px;
    max-height: 80vh;
    border-radius: 20px;
    overflow: hidden;
    background: #f0e8fa;
    box-shadow: 0 20px 60px rgba(80,50,120,0.2);
  }

  .setup-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .carousel-viewport {
    max-width: 320px;
  }

  .carousel-card-portrait {
    width: 170px;
    height: 220px;
  }

  .carousel-card-logo {
    width: 140px;
  }
}

/* ========== 報酬ダイアログ（自作ポップアップ） ========== */
.game-dialog {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(20, 12, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.game-dialog-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 18px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.2s ease-out;
}

.game-dialog-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.game-dialog-title {
  font-size: 17px;
  font-weight: bold;
  color: #8b7fd4;
  margin-bottom: 12px;
}

.game-dialog-body {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  max-height: 60vh;
  overflow-y: auto;
}

.game-dialog-reward {
  background: #f8f6ff;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  font-weight: bold;
  color: #6a5bbd;
}

.game-dialog-reward.levelup {
  background: #fff3e0;
  color: #e08a1e;
}

.game-dialog-ok {
  margin-top: 18px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.game-dialog-ok:hover {
  opacity: 0.85;
}

/* ========== 高級感ポリッシュ（後勝ちオーバーライド） ========== */

/* ヘッダーに繊細なハイライト */
.popup-header {
  background: linear-gradient(135deg, #6f57b8, #8b7fd4 55%, #a78fe0);
  box-shadow: 0 2px 14px rgba(107, 87, 184, 0.28);
}

.popup-close-btn {
  box-shadow: 0 4px 12px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s;
}

.popup-close-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 127, 212, 0.45);
}

/* ---- クエスト ---- */
.quest-card {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quest-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 60, 140, 0.12);
}

.quest-card.done {
  background: linear-gradient(180deg, #ffffff, #f4fcec);
  border-color: #d9efc8;
}

.quest-progress {
  background: #eeeaf6;
  border-radius: 999px;
  overflow: hidden;
}

.quest-progress-fill {
  background: linear-gradient(90deg, #af94ed, #8b7fd4);
  border-radius: 999px;
}

.quest-card.done .quest-progress-fill {
  background: linear-gradient(90deg, #9dd15c, #6fae3a);
}

.quest-reward {
  background: linear-gradient(135deg, #fff3da, #ffe9bc);
  color: #b07a1d;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: bold;
}

.quest-claim-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.quest-claim-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(139, 127, 212, 0.45);
}

.quest-claim-btn:disabled {
  background: #eee;
  color: #bbb;
  box-shadow: none;
  cursor: default;
}

/* ---- 事務所 ---- */
.office-visual {
  padding: 14px 0 10px;
}

.office-building {
  font-size: 64px;
  filter: drop-shadow(0 8px 14px rgba(80, 60, 140, 0.25));
  animation: floaty 3.5s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.office-cheer {
  background: linear-gradient(135deg, #f6efff, #ece2ff);
  border: 1px solid #e6dcfa;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
}

.office-facility {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(80, 60, 140, 0.05);
}

.office-facility.locked {
  background: #faf9fb;
  border-color: #eeeaf2;
  box-shadow: none;
}

.office-upgrade {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(80, 60, 140, 0.08);
}

.office-upgrade-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.office-upgrade-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(139, 127, 212, 0.45);
}

.office-upgrade-btn.disabled {
  background: #eee;
  color: #bbb;
  box-shadow: none;
}

.office-member {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(80, 60, 140, 0.05);
}

/* ---- プレイヤーカード ---- */
.player-card-head {
  background: linear-gradient(135deg, #6f57b8, #8b7fd4);
  border-radius: 16px;
  padding: 18px 16px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(107, 87, 184, 0.3);
}

.player-card-avatar {
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: #fff;
  color: #8b7fd4;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.player-card-name {
  color: #fff;
}

.player-card-title {
  color: #ffe9b8;
}

.player-card-id {
  color: rgba(255, 255, 255, 0.75);
}

.player-card-row {
  background: #fff;
  border: 1px solid #f0ebfa;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 6px rgba(80, 60, 140, 0.04);
}

.pt-chip {
  background: #fff;
  border: 1px solid #ece5fa;
  border-radius: 999px;
  color: #6d5bb8;
  box-shadow: 0 1px 5px rgba(80, 60, 140, 0.05);
}

/* ---- ジョブ ---- */
.job-card {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.job-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 60, 140, 0.12);
}

.job-card-emoji {
  background: linear-gradient(135deg, #f3ecff, #e6d9ff);
  border-radius: 12px;
}

.job-level-btn,
.job-unlock-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.job-level-btn:hover,
.job-unlock-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(139, 127, 212, 0.45);
}

.jobs-open-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
}

/* ---- ギャラリー ---- */
.gallery-tabs {
  gap: 8px;
}

.gallery-tab {
  border: 1px solid #e6e0f4;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(80, 60, 140, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
}

.gallery-tab.active {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  border-color: #8b7fd4;
  box-shadow: 0 3px 10px rgba(139, 127, 212, 0.35);
}

.gallery-card {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
}

.gallery-card-img {
  border: 1px solid #f0ebf8;
  box-shadow: 0 2px 8px rgba(80, 60, 140, 0.1);
}

.gallery-card-btns .gallery-buy-btn {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  border: none;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
}

.gallery-card-btns .gallery-update-btn,
.gallery-card-btns .gallery-wall-btn,
.gallery-card-btns .gallery-react-btn,
.gallery-card-btns .gallery-save-btn {
  background: #fff;
  box-shadow: 0 1px 5px rgba(80, 60, 140, 0.06);
}

/* ---- Canvas ---- */
.canvas-open-btn,
.canvas-post-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
}

/* ---- 痛バッグメニュー ---- */
.itabag-menu {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 4px 16px rgba(80, 60, 140, 0.08);
}

.itabag-menu-emoji {
  background: linear-gradient(135deg, #f3ecff, #e6d9ff);
  border-radius: 16px;
}

.itabag-start-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(139, 127, 212, 0.4);
}

/* ---- 外部連携 ---- */
.external-sync-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
}

.external-account {
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
}

/* ========== 図鑑（Zukan） ========== */
.zukan-overview {
  text-align: center;
}

.zukan-overview-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.zukan-overview-sub {
  font-size: 12px;
  color: #8b7fd4;
  margin-top: 4px;
  font-weight: bold;
}

.zukan-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
}

.zukan-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid #e6deff;
  border-radius: 12px;
  background: #fff;
  color: #8b7fd4;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(80, 60, 140, 0.06);
}

.zukan-tab.active {
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  border-color: transparent;
}

.zukan-tab-count {
  font-size: 10px;
  opacity: 0.85;
}

.zukan-cat-desc {
  font-size: 12px;
  font-weight: bold;
  color: #9a8cc9;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.zukan-complete-banner {
  padding: 10px 12px;
  background: linear-gradient(135deg, #fff6df, #ffe6ae);
  border: 1px solid #f2d689;
  border-radius: 12px;
  color: #a97c2e;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(160, 120, 40, 0.15);
}

.zukan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zukan-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ede7fa;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(80, 60, 140, 0.06);
}

.zukan-entry-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  padding-top: 2px;
}

.zukan-entry-info {
  flex: 1;
  min-width: 0;
}

.zukan-entry-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.zukan-entry-text {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
  line-height: 1.6;
}

.zukan-entry-how {
  font-size: 11px;
  color: #af94ed;
  margin-top: 6px;
}

.zukan-done-chip {
  font-size: 10px;
  color: #3aa757;
  background: #e7f7ec;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: bold;
  vertical-align: middle;
}

.zukan-unknown {
  opacity: 0.65;
  background: #f8f6ff;
}

.zukan-unknown .zukan-entry-title {
  color: #999;
  letter-spacing: 0.2em;
}

.zukan-decode-btn {
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #af94ed, #8b7fd4);
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(139, 127, 212, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.zukan-decode-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(139, 127, 212, 0.45);
}

.zukan-note {
  font-size: 11px;
  color: #b8aad8;
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

/* ========== 記憶の庭（Garden） ========== */
.garden-overview {
  text-align: center;
}

.garden-overview-title {
  font-size: 15px;
  font-weight: bold;
  color: #2e6b4f;
}

.garden-overview-sub {
  font-size: 12px;
  color: #3a9b6e;
  margin-top: 4px;
  font-weight: bold;
}

.garden-overview-shards {
  font-size: 11px;
  color: #7c9a8b;
  margin-top: 4px;
}

.garden-shards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.garden-shard {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f4f3;
  border: 1px solid #e0e6e2;
  color: #9aa8a0;
}

.garden-shard.own {
  background: linear-gradient(135deg, #d7f2e4, #b8e6cd);
  border-color: #a8d9be;
  color: #226b46;
  font-weight: bold;
}

.garden-areas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.garden-area {
  background: #fff;
  border: 1px solid #e4efe8;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(60, 120, 90, 0.06);
}

.garden-area-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.garden-area-emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  padding-top: 2px;
}

.garden-area-info {
  flex: 1;
  min-width: 0;
}

.garden-area-name {
  font-size: 13px;
  font-weight: bold;
  color: #2e6b4f;
}

.garden-area-desc {
  font-size: 12px;
  color: #7c9a8b;
  margin-top: 3px;
  line-height: 1.5;
}

.garden-locked {
  opacity: 0.65;
  background: #f6f8f7;
}

.garden-future {
  opacity: 0.7;
  border-style: dashed;
  background: #fbfbfa;
}

.garden-cultivate-btn {
  margin-top: 10px;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #6fcf97, #3a9b6e);
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(58, 155, 110, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.garden-cultivate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(58, 155, 110, 0.45);
}

.garden-open {
  border-color: #cdebd9;
}

.garden-cultivated-chip {
  font-size: 10px;
  color: #3a9b6e;
  background: #e7f7ec;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: bold;
  vertical-align: middle;
}

.garden-memory {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fbfdfc;
  border: 1px solid #e8f1ec;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
}

.garden-memory-plantable {
  border-style: dashed;
  background: #fdfcf8;
}

.garden-memory-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 34px;
  text-align: center;
  padding-top: 2px;
}

.garden-memory-info {
  flex: 1;
  min-width: 0;
}

.garden-memory-title {
  font-size: 12.5px;
  font-weight: bold;
  color: #333;
}

.garden-memory-text {
  font-size: 11.5px;
  color: #777;
  margin-top: 3px;
  line-height: 1.6;
}

.garden-memory-need {
  font-size: 11px;
  color: #b09a6e;
  margin-top: 6px;
}

.garden-plant-btn {
  margin-top: 7px;
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
  background: linear-gradient(135deg, #f2a3c3, #e885ac);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(232, 133, 172, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.garden-plant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(232, 133, 172, 0.45);
}

.garden-complete-banner {
  margin-top: 10px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #fff0f6, #ffe0ec);
  border: 1px solid #f2c2d6;
  border-radius: 12px;
  color: #c4557f;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.garden-note {
  font-size: 11px;
  color: #9bb3a7;
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

/* ========== モバイル最適化 ========== */

/* ダブルタップ拡大を無効化（ピンチズームは維持。描画キャンバス等の touch-action 指定は優先される） */
html,
body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iPhone ホームインジケータ回避 */
#tab-bar {
  height: auto;
  min-height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-btn {
  padding: 6px 0 8px;
}

.popup-overlay,
#home-screen {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

/* 狭幅（スマホ）のショップカード: 価格と購入ボタンを縦積みにして全幅ボタン化 */
@media (max-width: 400px) {
  .shop-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .shop-card-price {
    text-align: left;
  }
  .shop-card-buy {
    width: 100%;
    padding: 9px 12px;
  }
}