/**
 * npc-rpg / game-mode.css
 * ドラクエ風「話しかけると+αが返ってくる」モード。
 * トップページ(/)でのみ enqueue され、body.mode-game のときだけ表示される。
 *
 * 正典モック: partners/npc/hp-renewal-2026/mocks/top-game-mode-v1.html
 * 抽出範囲: モード切替UI ＋ ゲームモード（.game-stage / .scene / .shop-figure / .gw*）
 * ふつうモード側は既存の npc-rpg.css（front-page.php）が担うため、ここには入れない。
 */

/* --- 追加変数（ゲーム専用の暗部） --- */
:root{
  --stage:#14110c;
  --stage-ground:#0f0d0a;
  --window:#211c14;
  --lamp:#f0dc9a;
}

/* ============ モード切替（body.mode-game / mode-lp を切替） ============ */
/* デフォルト＝ふつうモード。#game は非表示。 */
#game{display:none}
body.mode-game #game{display:block}
body.mode-game .site-header,
body.mode-game #lp,
body.mode-game .site-footer{display:none}

/* モード切替ボタン（右上・fixed）
   ふつうモード時はヘッダーの下に、ゲームモード時はヘッダー非表示なので上詰め */
.mode-toggle{
  position:fixed;top:86px;right:14px;z-index:1000;
  display:flex;align-items:center;gap:0;
  border:2px solid var(--brass);border-radius:3px;
  background:var(--ivory);
  font-family:var(--font-dot);font-size:13px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(26,24,20,.18);
}
.mode-toggle button{
  padding:7px 12px;color:var(--gray);letter-spacing:.04em;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:inherit;
  transition:background-color 140ms var(--ease-soft),color 140ms var(--ease-soft);
}
.mode-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.mode-toggle button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
body.mode-game .mode-toggle{background:var(--window);border-color:var(--brass);box-shadow:0 2px 12px rgba(0,0,0,.5);top:14px}
body.mode-game .mode-toggle button{color:rgba(216,200,169,.72)}
body.mode-game .mode-toggle button[aria-pressed="true"]{background:var(--brass);color:var(--ivory)}

/* ============ ゲームモード本体 ============ */
.game-stage{
  min-height:100dvh;position:relative;
  color:var(--ivory);
  font-family:var(--font-dot);
  overflow:hidden;
  background:var(--stage);
  /* 店主レイヤーの色温度補正（時間帯連動） */
  --shop-filter:brightness(.86) saturate(.96) contrast(1.02);
}
.game-stage.t-morning{--shop-filter:brightness(1.05) saturate(1.02) sepia(.06)}
.game-stage.t-day{--shop-filter:none}

/* --- 絵レイヤー（背面固定・絶対に縮まない） --- */
.game-stage .scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.game-stage .scene-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 42%;
  opacity:0;transition:opacity .7s var(--ease-soft);
}
.game-stage .scene-bg.is-shown{opacity:1}
.game-stage .shop-figure{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  filter:var(--shop-filter);
  transition:filter .7s var(--ease-soft);
  transform-origin:50% 100%;
  animation:npcShopBreathe 7.5s var(--ease-soft) infinite;
  will-change:transform;
}
.game-stage .shopkeeper{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 42%;
}
.game-stage .shop-blink{opacity:0;transition:opacity 60ms linear}
.game-stage .shop-figure.is-blinking .shop-blink{opacity:1}
@keyframes npcShopBreathe{
  0%,100%{transform:translateY(0) rotate(0deg)}
  35%    {transform:translateY(-2.5px) rotate(.22deg)}
  65%    {transform:translateY(-1.2px) rotate(-.16deg)}
}
.game-stage .shop-figure.is-greeting{animation:npcShopGreet 900ms var(--ease-out) 1}
@keyframes npcShopGreet{
  0%  {transform:translateY(0) rotate(0deg) scale(1)}
  30% {transform:translateY(4px) rotate(2.4deg) scale(1.012)}
  55% {transform:translateY(6px) rotate(3deg) scale(1.01)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
.game-stage .vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(6,8,14,.42) 100%);
}

/* --- UIレイヤー：下ドック --- */
.gw-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,
    rgba(8,7,5,.90) 0%,
    rgba(10,8,6,.78) 42%,
    rgba(12,10,7,.42) 78%,
    transparent 100%);
  padding-top:64px;
  pointer-events:none;
}
.gw-area{
  position:relative;width:100%;max-width:700px;
  margin:0 auto;padding:0 14px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
  max-height:min(72vh,72dvh);overflow-y:auto;overflow-x:hidden;
  pointer-events:auto;
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent;
}
.gw-area::-webkit-scrollbar{width:6px}
.gw-area::-webkit-scrollbar-thumb{background:var(--brass);border-radius:3px}
.gw-area::-webkit-scrollbar-track{background:transparent}

/* ウィンドウ共通 */
.gw{
  display:none;background:var(--window);border:2px solid var(--brass);border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 2px rgba(216,200,169,.28),0 8px 28px rgba(0,0,0,.55);
  padding:16px 18px;font-size:16px;line-height:2;letter-spacing:.03em;
}
.gw.is-open{display:block;animation:npcGwIn var(--dur,240ms) var(--ease-out)}
@keyframes npcGwIn{from{opacity:0;transform:translateY(10px)}}
.gw-label{
  display:inline-block;margin:-26px 0 6px -6px;padding:1px 10px;
  background:var(--window);border:2px solid var(--brass);border-radius:2px;
  color:var(--sand);font-size:12px;letter-spacing:.14em;
}

.gw-prompt{
  align-self:center;font-family:var(--font-dot);font-size:17px;
  color:var(--ivory);padding:12px 26px;background:none;border:2px solid var(--brass);border-radius:3px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 2px rgba(216,200,169,.28),0 8px 28px rgba(0,0,0,.55);
  transition:transform 140ms var(--ease-out),box-shadow 140ms var(--ease-out);
}
.gw-prompt .cur{color:var(--sand);margin-right:.5em;animation:npcBlink 1.1s steps(2,start) infinite}
.gw-prompt:hover,.gw-prompt:focus-visible{transform:translateY(-1px);outline:none;box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 2px rgba(216,200,169,.28),0 10px 30px rgba(0,0,0,.6)}
@keyframes npcBlink{50%{opacity:0}}

.gw-dialog{min-height:96px;cursor:pointer}
.gw-dialog .adv{display:none;float:right;color:var(--sand);font-size:13px;margin-top:6px;animation:npcAdvBob 1s steps(2,start) infinite}
@keyframes npcAdvBob{50%{transform:translateY(3px)}}
.gw-dialog.done .adv{display:inline-block}

.gw-menu{margin-left:auto;min-width:min(280px,100%)}

/* ペアレイアウト（コマンドメニュー開時の会話+コマンド横並び） */
.gw-area.pair-mode{display:grid;grid-template-columns:1fr minmax(240px,300px);grid-template-areas:"talk menu";align-items:end;gap:14px}
.gw-area.pair-mode #w-talk{grid-area:talk;margin:0}
.gw-area.pair-mode #w-menu{grid-area:menu;margin-left:0;min-width:0;align-self:end}
.gw-area.pair-mode > .gw:not(#w-talk):not(#w-menu),
.gw-area.pair-mode > .gw-prompt{grid-column:1 / -1}

.gw-menu ul,.opts{list-style:none;padding:0;margin:0}
.copt{
  display:block;width:100%;text-align:left;
  padding:5px 12px 5px 32px;position:relative;background:none;border:none;cursor:pointer;
  font-family:var(--font-dot);font-size:16px;letter-spacing:.05em;
  color:var(--ivory);border-radius:2px;
  transition:background-color 120ms var(--ease-soft);
}
.copt::before{content:"▶";position:absolute;left:9px;top:5px;color:var(--sand);font-size:13px;opacity:0}
.copt.is-active{background:rgba(216,200,169,.09)}
.copt.is-active::before{opacity:1;animation:npcBlink 1.1s steps(2,start) infinite}
.copt:focus-visible{outline:1px dotted var(--sand);outline-offset:2px}

/* 詳細ウィンドウ */
.dpanel h2{font-family:var(--font-dot);font-size:19px;font-weight:400;color:var(--ivory);margin-bottom:10px;letter-spacing:.06em}
.dpanel .dtag{color:var(--sand);font-size:14px;margin-left:.8em}
.dpanel p{margin-bottom:10px;font-size:15.5px;color:var(--beige)}
.dprice{font-variant-numeric:tabular-nums;color:var(--ivory)}
.dprice strong{color:var(--sand);font-weight:400;font-size:18px}
.alpha-chip{
  display:inline-block;font-family:var(--font-dot);font-size:12px;
  border:1px solid var(--brass);color:var(--sand);border-radius:2px;
  padding:0 6px;margin-right:8px;vertical-align:1px;letter-spacing:.05em;
}
.dlist{list-style:none;margin:0 0 12px;padding:0}
.dlist li{padding:4px 0;font-size:15.5px;color:var(--beige);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dlist li .dprice{white-space:nowrap;margin:0}
.dlist .tool-name{color:var(--ivory)}
.dlist .tool-free{color:var(--sand);font-size:13px;margin-left:.6em}
.opts{margin-top:14px;border-top:1px solid rgba(216,200,169,.22);padding-top:10px}
.dsub[hidden]{display:none}

/* AIチャット */
.chatlog{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.chatlog::-webkit-scrollbar{width:6px}
.chatlog::-webkit-scrollbar-thumb{background:var(--brass);border-radius:3px}
.bubble{max-width:82%;padding:8px 12px;border-radius:3px;font-size:15px;line-height:1.8}
.bubble.me{align-self:flex-end;background:rgba(216,200,169,.14);color:var(--ivory)}
.bubble.npc{align-self:flex-start;background:rgba(139,105,20,.22);border:1px solid rgba(216,200,169,.3);color:var(--beige)}
.bubble.npc::before{content:"店主 ── ";color:var(--sand);font-size:12px}
.bubble.thinking{opacity:.72;font-style:italic}
.chatrow{display:flex;gap:8px;align-items:stretch;margin-bottom:2px}
.chatinput{flex:1;margin-bottom:0}
.chatsend{
  font-family:var(--font-dot);font-size:14px;color:var(--sand);background:none;cursor:pointer;
  border:1px solid var(--brass);border-radius:2px;padding:0 14px;white-space:nowrap;
  transition:background-color 120ms var(--ease-soft);
}
.chatsend:hover{background:rgba(216,200,169,.12)}
.chatsend:disabled{opacity:.55;cursor:not-allowed}
.chatsend:focus-visible{outline:1px dotted var(--sand);outline-offset:2px}
.cnote{font-size:12.5px;color:rgba(216,200,169,.62);margin-top:10px}

/* このお店のこと */
.storyh{margin-bottom:12px;font-size:18px}
#w-story p{margin-bottom:12px}
#w-story strong{color:var(--ivory);font-weight:400}
.storynote{color:rgba(216,200,169,.62);font-size:13.5px}

/* 対話式そうだんフォーム */
.cstep{display:none}
.cstep.is-on{display:block}
.cq{min-height:2em;margin-bottom:10px}
.cinput{
  width:100%;background:rgba(245,240,232,.04);
  border:1px solid rgba(216,200,169,.4);border-radius:2px;
  color:var(--ivory);font-family:var(--font-dot);font-size:16px;
  padding:9px 12px;margin-bottom:12px;letter-spacing:.04em;
}
.cinput:focus{outline:none;border-color:var(--sand)}
textarea.cinput{min-height:96px;resize:vertical;line-height:1.8}
.cnext{
  font-family:var(--font-dot);font-size:15px;color:var(--sand);background:none;border:none;cursor:pointer;
  padding:4px 10px 4px 4px;
}
.cnext::before{content:"▶ ";animation:npcBlink 1.1s steps(2,start) infinite}
.cnext:focus-visible{outline:1px dotted var(--sand);outline-offset:2px}

/* 時間帯デバッグ切替 */
.tod-debug{position:fixed;left:10px;bottom:10px;z-index:60;display:flex;gap:4px;opacity:.6}
body:not(.mode-game) .tod-debug{display:none}
.tod-debug button{
  font-family:var(--font-dot);font-size:11px;color:var(--ivory);background:rgba(26,24,20,.55);
  border:1px solid rgba(216,200,169,.4);border-radius:2px;padding:2px 8px;cursor:pointer;
}
.tod-debug button.on{background:var(--ink);border-color:var(--sand)}
.tod-debug button:focus-visible{outline:1px dotted var(--sand);outline-offset:1px}

/* ヒーロー内のゲームモード誘導リンク（ふつうモード側） */
.hero-game-link{
  display:inline-block;margin-top:20px;
  font-family:var(--font-dot);font-size:14px;color:var(--brass);
  text-decoration:none;border-bottom:1px solid var(--sand);
  padding-bottom:2px;letter-spacing:.05em;
  transition:border-color 140ms var(--ease-soft);
  background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;
}
.hero-game-link:hover{border-bottom-color:var(--brass);color:var(--brass-dark)}

@media (max-width:680px){
  .mode-toggle{top:76px;right:10px;font-size:12px}
  body.mode-game .mode-toggle{top:10px}
  .mode-toggle button{padding:6px 9px}
  .gw{font-size:15px;padding:14px 15px}
  .gw-menu{margin-left:0}
  .gw-area.pair-mode{grid-template-columns:1fr;grid-template-areas:"talk" "menu";gap:10px}
  .gw-area.pair-mode #w-menu{align-self:stretch}
  .game-stage .scene-bg,.game-stage .shopkeeper{object-position:58% 34%}
  .gw-area{max-height:min(64vh,64dvh)}
  .gw-dock{padding-top:52px}
}