/* ==========================================================
   3D 店内（アバター）
   ========================================================== */
.section-store { max-width: 1280px; }
/* PC：ヘッダーの下の線から「IN STORE」までを詰める（スマホはそのまま） */
@media (min-width: 641px) {
  .section-store { padding-top: 50px; padding-bottom: 40px; }
  /* ストアの下から「INFORMATION」までも詰める */
  .section-store + #info { padding-top: 56px; }
}

.world {
  position: relative;
  height: min(78vh, 720px);
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  background: #2a2430;
  box-shadow: 0 20px 50px rgba(30, 26, 45, .22);
  outline-offset: 4px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 全画面：ページ全体を全画面にして、店内を画面いっぱいに広げる（商品詳細・カートはこの上に出る） */
/*
 * 全画面：店内のほか（ヘッダー・見出し・ご案内・フッター）を隠して、ページを「店内だけ」にする。
 * 店内の高さは 100svh（アドレス欄・ツールバーが「出ているとき」の見える高さ）。いちばん狭いときの
 * 見える範囲に必ず収まり、ページがスクロールしないので、iPhone のアドレス欄・ツールバーも動かない。
 * （iPhone のブラウザは画面に固定する表示（position: fixed）の位置がずれやすいため、固定は使わない）
 */
html.fs-lock, html.fs-lock body { overflow: hidden; overscroll-behavior: none; }
body.world-fs .site-header, body.world-fs .site-footer, body.world-fs #info,
body.world-fs .section-store > :not(.world) { display: none !important; }
body.world-fs main, body.world-fs .section-store { margin: 0; padding: 0; max-width: none; }
body.world-fs .world {
  position: relative; z-index: 40;
  width: 100%; height: 100vh; height: 100svh; min-height: 0;
  margin: 0; border-radius: 0; box-shadow: none;
}
.world-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.world-canvas:active { cursor: grabbing; }
.world:not([data-ready]) .world-canvas { opacity: 0; }

/* スタンプ（名前は表示しない） */
.world-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.avatar-label {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  will-change: transform;
}
/* スタンプ（自分も他のお客さんも同じ）：ふだんは見えず、押したときだけ出て、自動で消える */
.avatar-label .al-emote {
  order: -1; font-size: 30px; line-height: 1; opacity: 0;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2));
}
.al-emote.show { animation: emotePop 2.6s ease forwards; }
@keyframes emotePop {
  0% { opacity: 0; transform: translateY(8px) scale(.4); }
  12% { opacity: 1; transform: translateY(0) scale(1.15); }
  20% { transform: scale(1); }
  85% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* HUD */
.hud { position: absolute; z-index: 2; }
.hud-top { top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.net-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .3em .9em; border-radius: 999px;
  background: rgba(20, 22, 40, .6); color: #fff; font-size: .82rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.net-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.net-status[data-state="online"]::before { background: #5ad48a; box-shadow: 0 0 0 3px rgba(90, 212, 138, .3); }
.net-status[data-state="connecting"]::before { background: #ffd76a; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.hud-actions { display: flex; gap: 6px; }
.hud-btn {
  padding: .35em .9em; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .9); color: var(--theme-ink, #3a3346); font-weight: 700; font-size: .82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.hud-btn:hover { background: #fff; }
.hud-cart { position: relative; }
.hud-cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--theme-btn, #d9729a); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px;
}
.hud-cart-count[hidden] { display: none; }
.hud-cart.bump { animation: bump .4s; }

.hud-prompt { left: 50%; bottom: 84px; transform: translateX(-50%); }
.hud-prompt[hidden] { display: none; }
.prompt-btn {
  display: flex; align-items: center; gap: 10px;
  padding: .6em 1.1em .6em 1.3em; border: 0; border-radius: 999px;
  background: #fff; color: #2e2729; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-size: .9rem; white-space: nowrap; max-width: calc(100vw - 48px);
  animation: promptIn .25s ease;
}
.prompt-btn b { color: var(--theme-btn, #8a6bd6); } /* 「この商品を見る」などはテーマの色 */
.prompt-btn { border: 2px solid color-mix(in srgb, var(--theme-accent, #b9a3ec) 55%, transparent); }
.prompt-btn span { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: color-mix(in srgb, var(--theme-ink, #6f6880) 70%, #fff); }
/* 商品の前では名前と値段だけ（文字は濃いめに） */
.prompt-btn > span:first-child { color: var(--theme-ink, #2e2729); font-weight: 700; }
/* 売り切れの商品の前：「SOLD OUT」をグレーで */
.prompt-btn.is-soldout { border-color: #cfc8cc; }
.prompt-btn.is-soldout b { color: #8c8388; letter-spacing: .08em; }
.prompt-btn.is-soldout span { color: #a39aa0; }
.prompt-btn kbd { font: inherit; font-size: .72rem; padding: .1em .5em; border-radius: 6px; background: color-mix(in srgb, var(--theme-accent, #b9a3ec) 22%, #fff); color: #6f6880; }
@keyframes promptIn { from { opacity: 0; transform: translateY(8px); } }

.hud-emotes { right: 12px; bottom: 12px; display: flex; gap: 6px; }
.emote-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); font-size: 20px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: transform .15s;
}
.emote-btn:hover { transform: scale(1.12); }
.emote-btn:active { transform: scale(.92); }

.hud-help {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; margin: 0;
  padding: .3em .9em; border-radius: 10px;
  background: rgba(20, 22, 40, .5); color: #fff; font-size: .74rem;
  pointer-events: none;
}

/* スマホ用スティック */
.joystick {
  position: absolute; left: 22px; bottom: 22px; z-index: 3;
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
  display: none; touch-action: none;
}
.joystick .knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
@media (pointer: coarse) {
  /* スマホ・タブレット：右手の親指で動かせるよう、移動のスティックを右下、スタンプを左下に */
  .joystick { display: block; left: auto; right: 22px; }
  .hud-emotes { right: auto; left: 12px; }
  .hud-help { display: none; }
  .hud-prompt { bottom: 150px; }
  /* 左のスタンプ（幅 約48px）と重ならないよう、左右に 64px ずつ空けて真ん中に */
  .prompt-btn { max-width: calc(100vw - 128px); }
  .hud-emotes { flex-direction: column; bottom: 22px; }
  .emote-btn { width: 36px; height: 36px; font-size: 17px; }
}

/* アバター選び */
.avatar-picker {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 16px;
  background: rgba(20, 22, 40, .55); backdrop-filter: blur(4px);
}
.avatar-picker[hidden] { display: none; }
.picker-card {
  width: min(520px, 100%); max-height: 100%; overflow: auto;
  padding: 24px; border-radius: 24px; background: var(--surface); color: var(--ink);
  display: grid; gap: 14px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.picker-card h3 { font-size: 1.2rem; }
.pick-chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick-char {
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 4px 6px; border-radius: 16px; border: 2px solid transparent;
  background: var(--card-bg, color-mix(in srgb, var(--c) 22%, var(--surface)));
  font-weight: 700; font-size: .85rem; color: #3a3346; /* 名前の色は入口のアバター選びと同じ */
}
.pick-char svg, .pick-char .char-img { width: 100%; max-width: 76px; height: auto; }
.pick-char[aria-pressed="true"] { border-color: var(--theme-accent, #9b80e0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #9b80e0) 35%, transparent); }
/* ボタンなどの色は、入口のアバター選びと同じ（設定されたテーマの色） */
.picker-card { color: #2e2729; }
.picker-card .pick-note { color: #6f6880; }
#pickGo { background: var(--theme-btn, var(--primary)); color: var(--theme-btn-ink, var(--primary-ink));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-btn, #6b5a8e) 28%, transparent); }
.pick-name { display: grid; gap: 6px; font-size: .85rem; color: var(--ink-soft); text-align: left; }
.pick-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-name select { font: inherit; color: var(--ink); padding: .35em .6em; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }
.pick-preview { font-weight: 800; color: var(--ink); font-size: 1rem; flex: 1; }
.pick-note { margin: 0; font-size: .78rem; color: var(--ink-soft); }

.world-fallback {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px;
  background: var(--surface-2); color: var(--ink); text-align: center;
}
.world-fallback[hidden] { display: none; }

.store-controls { display: flex; justify-content: flex-end; margin-top: 12px; }
.theme-switch { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); }
.theme-switch[hidden] { display: none; }
.theme-switch select { font: inherit; color: var(--ink); padding: .35em .8em; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }

@media (max-width: 640px) {
  .world { border-radius: 18px; margin: 0 -4px; height: 72vh; }
  .store-controls { justify-content: center; }
}

@media (max-width: 640px) {
  .hud-top { flex-wrap: wrap; }
  .hud-btn { font-size: .76rem; padding: .35em .75em; }
}

.hud-left { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hud-hours {
  padding: .3em .9em; border-radius: 999px; background: rgba(20, 22, 40, .6); color: #fff;
  font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px);
}

/* 案内（この商品を見る・カートを見るなど）はクリックで動作。矢印でクリックできることを示す */
.prompt-btn { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.prompt-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.prompt-go { font-style: normal; font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--theme-btn, #8a6bd6); margin-left: 2px; }

/* 全画面：iPhone の画面の丸い角・ホームバーに、ボタンやスティックがかからないように */
body.world-fs .hud-top { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
body.world-fs .hud-emotes { bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px)); }
body.world-fs .joystick { bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px)); }