/* ============================================
   1. 右下常駐アイコン（Floating Action Button）
   ============================================ */
#naana-fab{
  position:fixed;
  right:18px; top:50%;
  transform:translateY(-50%);
  width:60px; height:60px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2e4a4a, #0a1216 75%);
  border:2px solid #9C7A3C;
  box-shadow:0 2px 14px rgba(0,0,0,.5), 0 0 0 rgba(212,175,106,.5);
  color:#D4AF6A;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:200;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease;
  animation:fab-breathe 4s ease-in-out infinite;
  overflow:hidden;
  will-change:top;
}
#naana-fab.naana-fab-loading{
  animation:fab-breathe 0.7s ease-in-out infinite;
  box-shadow:0 0 0 4px rgba(212,175,106,.35), 0 2px 14px rgba(0,0,0,.5);
}
#naana-fab:active{box-shadow:0 2px 14px rgba(0,0,0,.5), 0 0 10px rgba(212,175,106,.6);}
#naana-fab .fab-mark{font-size:22px;letter-spacing:0;line-height:1;}
#naana-fab .fab-mark-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
#naana-fab .fab-label{
  position:absolute; right:70px; bottom:50%; transform:translateY(50%);
  font-size:11px; color:#D4AF6A; background:rgba(10,18,22,.9);
  border:1px solid #5a8080; border-left:3px solid #9C7A3C;
  padding:6px 10px; border-radius:3px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#naana-fab:hover .fab-label{opacity:1;}
@keyframes fab-breathe{
  0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.5), 0 0 0 rgba(212,175,106,.35);}
  50%{box-shadow:0 2px 18px rgba(0,0,0,.5), 0 0 10px rgba(212,175,106,.35);}
}
@media (prefers-reduced-motion:reduce){
  #naana-fab{animation:none;}
}

/* ============================================
   2. フルスクリーン展開（オーバーレイ）
   ============================================ */
#naana-overlay{
  position:fixed; inset:0; z-index:300;
  background:#0a1216;
  display:flex; flex-direction:column;
}
#naana-overlay[hidden]{display:none;}

#naana-close{
  position:absolute; top:10px; right:10px; z-index:310;
  width:36px; height:36px; border-radius:50%;
  background:rgba(10,18,22,.85); border:1px solid #9C7A3C;
  color:#D4AF6A; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#naana-close:active{background:rgba(80,120,120,.9);}

#game{position:relative;max-width:600px;width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;}
#video-area{flex:1;position:relative;overflow:hidden;background:#0a1216;}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55);}
#naana-video{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:100%;object-fit:contain;display:none;}
/* YouTube埋め込み版のループ動画（背景として全面表示・操作不可） */
#naana-video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .2s ease;}

/* PC・タブレットなど横幅に余裕がある画面では、動画エリアを16:9の自然な大きさで表示する。
   スマホ幅（700px未満）では今まで通り、画面いっぱいの縦長レイアウトのまま。 */
@media (min-width:700px){
  #game{max-width:900px;}
  #video-area{flex:none; aspect-ratio:16/9; max-height:70vh;}
  #naana-window{flex:1; min-height:0; max-height:none;}
}

#naana-window{flex-shrink:0;background:rgba(10,18,22,.95);border-top:2px solid #9C7A3C;padding:14px 16px 16px;min-height:200px;max-height:58vh;max-width:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;}
#naana-speaker{font-size:12px;color:#D4AF6A;letter-spacing:.15em;margin-bottom:8px;}
#naana-text{font-size:15px;line-height:1.85;color:#EDE8DC;margin-bottom:12px;white-space:pre-line;}
#naana-choices{display:flex;flex-direction:column;gap:8px;max-width:100%;}
.naana-choice{
  background:rgba(46,74,74,.9);border:1px solid #5a8080;border-left:3px solid #9C7A3C;
  color:#EDE8DC;font-family:inherit;font-size:14px;padding:10px 14px;text-align:left;
  cursor:pointer;border-radius:2px;-webkit-tap-highlight-color:transparent;
  width:100%;box-sizing:border-box;white-space:normal;word-break:break-word;overflow-wrap:break-word;
}
.naana-choice:active{background:rgba(80,120,120,.9);}

/* ジャンル別選択肢の色分け */
.naana-cat-guild{border-left:3px solid #D4AF6A; background:rgba(80,65,30,.85);}
.naana-cat-world{border-left:3px solid #6ABF8A; background:rgba(30,65,45,.85);}
.naana-cat-life{border-left:3px solid #A78BDB; background:rgba(55,40,75,.85);}
.naana-cat-char{border-left:3px solid #6AB8D4; background:rgba(30,55,70,.85);}
.naana-cat-waza{border-left:3px solid #D46A6A; background:rgba(75,30,30,.85);}
.naana-cat-person{border-left:3px solid #4A90D4; background:rgba(25,45,75,.85);}
.naana-cat-status{border-left:3px solid #8A8A8A; background:rgba(50,50,50,.85); font-size:12px;}

/* 自由入力欄（初回名前入力時のみ表示・それ以外は非表示） */
#naana-free-form{display:none;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed #3a4a4a;}
#naana-free-input{
  flex:1; min-width:0;
  background:rgba(10,18,22,.6); border:1px solid #5a8080; border-radius:2px;
  color:#EDE8DC; font-family:inherit; font-size:14px; padding:9px 10px;
}
#naana-free-input:focus{outline:none; border-color:#D4AF6A;}
#naana-free-input::placeholder{color:#6b7a7a;}
#naana-free-send{
  background:rgba(156,122,60,.85); border:1px solid #9C7A3C; border-radius:2px;
  color:#0a1216; font-family:inherit; font-size:13px; font-weight:bold; padding:0 16px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#naana-free-send:active{background:rgba(212,175,106,.95);}
#naana-free-send:disabled{opacity:.5;}

#naana-reset-link{
  margin-top:8px; text-align:right;
  font-size:10.5px; color:#5a6a6a; letter-spacing:.03em;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  -webkit-tap-highlight-color:transparent;
}
#naana-reset-link:active{color:#9C7A3C;}
#naana-thinking{display:none;} /* 旧仕様の名残。チャットログ内の考え中表示に置き換え済み */

/* 自由入力の会話ログ */
#naana-chatlog{
  display:flex; flex-direction:column; gap:8px;
  max-height:32vh; max-width:100%; overflow-y:auto; overflow-x:hidden;
  margin-top:10px; padding-top:10px; padding-right:6px; border-top:1px dashed #3a4a4a;
  scrollbar-width:thin; scrollbar-color:#9C7A3C rgba(10,18,22,.3);
}
#naana-chatlog::-webkit-scrollbar{width:5px;}
#naana-chatlog::-webkit-scrollbar-track{background:transparent;}
#naana-chatlog::-webkit-scrollbar-thumb{background-color:rgba(156,122,60,.55); border-radius:3px;}
#naana-chatlog::-webkit-scrollbar-thumb:hover{background-color:rgba(212,175,106,.75);}
/* 窓口全体のスクロールバーも同様に馴染ませる */
#naana-window{scrollbar-width:thin; scrollbar-color:#9C7A3C rgba(10,18,22,.3);}
#naana-window::-webkit-scrollbar{width:5px;}
#naana-window::-webkit-scrollbar-track{background:transparent;}
#naana-window::-webkit-scrollbar-thumb{background-color:rgba(156,122,60,.55); border-radius:3px;}
#naana-chatlog:empty{display:none; border-top:none; margin-top:0; padding-top:0;}
.naana-chat-bubble{
  max-width:82%; padding:8px 12px; border-radius:3px;
  font-size:13.5px; line-height:1.7; white-space:pre-line;
  box-sizing:border-box; word-break:break-word; overflow-wrap:break-word;
}
.naana-chat-user{
  align-self:flex-end;
  background:rgba(46,74,74,.7); border:1px solid #5a8080;
  color:#EDE8DC;
}
.naana-chat-naana{
  align-self:flex-start;
  background:rgba(10,18,22,.7); border:1px solid #9C7A3C; border-left:3px solid #9C7A3C;
  color:#D4AF6A;
}
.naana-chat-thinking{opacity:.6; letter-spacing:.2em;}