/* ============================================
   あつ森タイプ診断アプリ CSS
   あつ森風デザイン強化版 + 一斉制御対応
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

/* ===== リセット・基本 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* あつ森カラーパレット */
  --acnh-green:      #5fa832;
  --acnh-green-dark: #3d7520;
  --acnh-green-lt:   #d4edaa;
  --acnh-sky:        #87ceeb;
  --acnh-sky-lt:     #d6f0ff;
  --acnh-brown:      #8b5e3c;
  --acnh-brown-lt:   #f5deb3;
  --acnh-yellow:     #ffd84d;
  --acnh-cream:      #fdf8ec;
  --acnh-white:      #ffffff;
  --acnh-sand:       #f5e6c8;

  /* タイプカラー */
  --mitsukeru: #5fa832;
  --tsukuru:   #9c5fc7;
  --tsunagaru: #e87430;
  --tobidasu:  #2e8bc0;
  --yariko:    #c94040;

  /* テキスト */
  --text-dark: #3a2710;
  --text-mid:  #6b4c2a;
  --text-soft: #9a7a5a;

  /* UI */
  --radius:    18px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --shadow:    0 4px 20px rgba(63,47,20,0.12);
  --shadow-lg: 0 8px 40px rgba(63,47,20,0.18);
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  background: var(--acnh-sky-lt);
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ===== 背景シーン ===== */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-sky {
  position: absolute;
  inset: 0 0 35% 0;
  background: linear-gradient(180deg, #b8e4f7 0%, #d6f0ff 50%, #e8f8ff 100%);
}

.bg-ground {
  position: absolute;
  inset: 65% 0 0 0;
  background: linear-gradient(180deg, #8fcc52 0%, #6aab38 40%, #5a9428 100%);
}

/* 木 */
.bg-tree {
  position: absolute;
  bottom: 28%;
  font-size: 4rem;
  opacity: 0.7;
  animation: treeSway 6s ease-in-out infinite;
}
.tree1 { left: 2%;   font-size: 4.5rem; animation-delay: 0s; }
.tree2 { left: 8%;   font-size: 3.5rem; animation-delay: 1s; }
.tree3 { right: 3%;  font-size: 4rem;   animation-delay: 0.5s; }
.tree4 { right: 9%;  font-size: 3rem;   animation-delay: 2s; }
.tree5 { left: 50%;  font-size: 3.8rem; animation-delay: 1.5s; opacity: 0.3; }

@keyframes treeSway {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30%       { transform: rotate(2deg) scale(1.02); }
  70%       { transform: rotate(-1.5deg) scale(0.99); }
}

/* 雲 */
.bg-cloud {
  position: absolute;
  font-size: 3rem;
  opacity: 0.7;
  animation: cloudDrift 20s linear infinite;
}
.cloud1 { top: 6%;  left: -5%;  animation-delay: 0s;   font-size: 3.5rem; }
.cloud2 { top: 14%; right: -5%; animation-delay: -10s; font-size: 2.5rem; animation-direction: reverse; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(110vw); }
}

/* 蝶 */
.bg-butterfly {
  position: absolute;
  font-size: 1.8rem;
  top: 30%;
  left: 15%;
  opacity: 0.6;
  animation: butterflyFly 12s ease-in-out infinite;
}
@keyframes butterflyFly {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%     { transform: translate(40px,-30px) rotate(10deg); }
  50%     { transform: translate(80px,10px) rotate(-5deg); }
  75%     { transform: translate(30px,20px) rotate(8deg); }
}

/* 鳥 */
.bg-bird {
  position: absolute;
  font-size: 1.4rem;
  top: 20%;
  right: 20%;
  opacity: 0.5;
  animation: birdFly 15s linear infinite;
}
@keyframes birdFly {
  from { transform: translate(0,0); opacity: 0.5; }
  50%  { transform: translate(-80px, -20px); opacity: 0.7; }
  to   { transform: translate(-160px, 0); opacity: 0; }
}

/* ===== アプリラッパー ===== */
.app-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
}

/* ===== 画面管理 ===== */
.screen {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  animation: screenFadeUp 0.4s ease;
}
.screen.active { display: flex; }

@keyframes screenFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== あつ森カード（メインUI部品） ===== */
.acnh-card {
  background: var(--acnh-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.8);
  padding: 32px 28px 28px;
  width: 100%;
  border: 3px solid var(--acnh-brown-lt);
  position: relative;
  overflow: hidden;
}

/* カードの上部装飾ライン */
.acnh-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--acnh-green), var(--acnh-yellow), var(--acnh-green));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* ===== 島ヘッダー ===== */
.island-header {
  position: relative;
  text-align: center;
  margin-bottom: 12px;
}

.island-icon {
  font-size: 4rem;
  display: block;
  animation: islandBob 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}
@keyframes islandBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.nook-leaf {
  position: absolute;
  top: -8px;
  right: 20px;
  font-size: 1.6rem;
  animation: leafFloat 4s ease-in-out infinite;
}
@keyframes leafFloat {
  0%,100% { transform: rotate(-10deg) translateY(0); }
  50%      { transform: rotate(10deg) translateY(-6px); }
}

/* ===== タイトル ===== */
.title-acnh {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.7);
}
.title-acnh.green {
  color: var(--acnh-green-dark);
  margin-bottom: 10px;
}

.title-sub {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 24px;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 8px;
  margin-top: 8px;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ===== タイプチップ ===== */
.type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.type-chip {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  border: 2.5px solid;
}
.type-chip.green  { background: #e8f5da; color: var(--mitsukeru); border-color: #b8dfaa; }
.type-chip.purple { background: #f0e8f8; color: var(--tsukuru);   border-color: #d4b8e8; }
.type-chip.orange { background: #fef3ea; color: var(--tsunagaru); border-color: #f5c8a0; }
.type-chip.blue   { background: #e4f2fc; color: var(--tobidasu);  border-color: #aad4f0; }
.type-chip.red    { background: #fceaea; color: var(--yariko);    border-color: #f0aaa0; }

/* ===== モード選択ボタン ===== */
.mode-card { text-align: center; }

.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.btn-mode {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 3px solid;
  background: var(--acnh-white);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.2s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
}
.btn-mode:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
}
.btn-mode:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }

.btn-host   { border-color: #c8a050; background: linear-gradient(135deg,#fffbe8,#fff3cc); }
.btn-solo   { border-color: #80c040; background: linear-gradient(135deg,#f0fae0,#e4f5c8); }
.btn-join   { border-color: #70b8e0; background: linear-gradient(135deg,#e8f5fd,#d4ecf8); }

.btn-mode-icon { font-size: 2rem; flex-shrink: 0; }
.btn-mode-text { display: flex; flex-direction: column; gap: 2px; }
.btn-mode-text strong { font-size: 1rem; font-weight: 700; color: var(--text-dark); }
.btn-mode-text small  { font-size: 0.8rem; color: var(--text-soft); }

/* ===== 共通ボタン ===== */
.btn-primary {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #72c040, #4a9a20);
  color: white;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 0 #2e7010, 0 6px 20px rgba(72,150,30,0.3);
  transition: all 0.15s ease;
  margin-top: 8px;
  letter-spacing: 0.03em;
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 #2e7010, 0 10px 24px rgba(72,150,30,0.35); }
.btn-primary:active { transform: translateY(2px);  box-shadow: 0 2px 0 #2e7010; }
.btn-primary:disabled {
  background: linear-gradient(135deg, #ccc, #aaa);
  box-shadow: 0 4px 0 #888;
  cursor: not-allowed;
}

.btn-back {
  background: none;
  border: 2px solid var(--acnh-brown-lt);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  margin-bottom: 16px;
  display: block;
  transition: all 0.15s;
}
.btn-back:hover { background: var(--acnh-brown-lt); color: var(--text-dark); }

.btn-retry {
  display: block;
  width: 100%;
  background: transparent;
  border: 2.5px solid var(--acnh-green);
  color: var(--acnh-green-dark);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.2s ease;
}
.btn-retry:hover { background: var(--acnh-green-lt); transform: translateY(-2px); }

/* ===== フォーム ===== */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}

.acnh-input {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--acnh-white);
  border: 2.5px solid #d4b88a;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s;
}
.acnh-input:focus { border-color: var(--acnh-green); box-shadow: 0 0 0 3px rgba(95,168,50,0.15); }

.code-input {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.4em;
  font-weight: 700;
}

/* ===== セッションコード表示 ===== */
.session-code-display {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--acnh-green-dark);
  background: var(--acnh-green-lt);
  border: 3px dashed var(--acnh-green);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin: 16px 0;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}

.qr-hint {
  font-size: 0.83rem;
  color: var(--text-soft);
  text-align: center;
  background: #f5f0e8;
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.qr-hint-icon { margin-right: 4px; }

.participant-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-mid);
  text-align: center;
  margin-bottom: 12px;
}
.count-icon { margin-right: 4px; }

.lobby-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 32px;
  margin-bottom: 16px;
}

.participant-tag {
  background: var(--acnh-white);
  border: 2px solid #b8dfaa;
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acnh-green-dark);
  animation: tagPop 0.3s ease;
}
@keyframes tagPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.hint-sm { font-size: 0.8rem; color: var(--text-soft); text-align: center; margin-top: 8px; }

/* ===== 待機画面 ===== */
.waiting-card { text-align: center; }

.waiting-animation { margin-bottom: 16px; }
.waiting-char { font-size: 4rem; margin-bottom: 8px; animation: islandBob 2s ease-in-out infinite; }

.waiting-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 2rem;
  color: var(--acnh-green);
}
.waiting-dots span { animation: dotBlink 1.4s ease-in-out infinite; }
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBlink {
  0%,80%,100% { opacity: 0.2; transform: translateY(0); }
  40%          { opacity: 1;   transform: translateY(-6px); }
}

.waiting-name {
  font-size: 0.88rem;
  color: var(--text-soft);
  background: var(--acnh-green-lt);
  padding: 8px 20px;
  border-radius: 50px;
  display: inline-block;
  margin-top: 16px;
}

/* ===== 進捗バー ===== */
.progress-area {
  width: 100%;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-label-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}
.progress-q-num {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--acnh-green-dark);
}
.progress-frac {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.progress-bar-bg {
  flex: 1;
  height: 20px;
  background: rgba(255,255,255,0.7);
  border-radius: 50px;
  overflow: visible;
  border: 2.5px solid #c0d8a0;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #9ada60, #60b820, #4a9a10);
  border-radius: 50px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-leaf {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  pointer-events: none;
  line-height: 1;
}

/* ===== 質問カード ===== */
.question-card {
  padding: 28px 24px 24px !important;
}

.q-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.65;
  margin-bottom: 20px;
  text-align: center;
  background: var(--acnh-white);
  border-radius: var(--radius);
  padding: 16px 20px;
  border: 2px solid #e8dfc8;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

/* ===== 選択肢 ===== */
.choices-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--acnh-white);
  border: 2.5px solid #d8c8a8;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-dark);
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

.choice-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(95,168,50,0.08), rgba(95,168,50,0.04));
  opacity: 0;
  transition: opacity 0.18s;
  border-radius: var(--radius);
}

.choice-btn:hover {
  border-color: var(--acnh-green);
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(95,168,50,0.2), 0 2px 0 rgba(0,0,0,0.06);
}
.choice-btn:hover::after { opacity: 1; }

.choice-btn:active { transform: scale(0.98); }

.choice-btn.selected {
  background: linear-gradient(135deg, #f0fae4, #e4f5c8);
  border-color: var(--acnh-green);
  box-shadow: 0 0 0 3px rgba(95,168,50,0.2);
  transform: translateX(0);
}

.choice-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.choice-text { line-height: 1.4; position: relative; z-index: 1; }

/* 参加者待機メッセージ */
.waiting-next {
  background: rgba(255,255,255,0.8);
  border: 2px solid #d8c8a8;
  border-radius: var(--radius);
  padding: 14px 20px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-top: 12px;
  animation: pulse 2s ease-in-out infinite;
}
.wait-icon { margin-right: 4px; }
@keyframes pulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ===== 進行役コントロール ===== */
.host-control-card { padding: 24px 20px 20px !important; }

.host-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.host-badge {
  background: var(--acnh-yellow);
  color: var(--text-dark);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  border: 2px solid #e0b820;
}
.host-progress-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-mid);
}

.host-progress-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 50px;
  overflow: hidden;
  border: 2px solid #c0d8a0;
  margin-bottom: 18px;
}
.host-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9ada60, #60b820);
  border-radius: 50px;
  width: 0%;
  transition: width 0.5s ease;
}

.host-question-display {
  background: var(--acnh-white);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 2px solid #e8dfc8;
}
.q-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.host-q-text {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.5;
}

.answer-stats { margin-bottom: 16px; }
.stats-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.stats-bar-wrap { display: flex; flex-direction: column; gap: 6px; }

.stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-type-name {
  font-size: 0.78rem;
  font-weight: 700;
  width: 80px;
  flex-shrink: 0;
  color: var(--text-mid);
}
.stats-bar-bg {
  flex: 1;
  height: 12px;
  background: rgba(0,0,0,0.06);
  border-radius: 50px;
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  border-radius: 50px;
  transition: width 0.5s ease;
  min-width: 4px;
}
.stats-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  width: 24px;
  text-align: right;
}

.host-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.btn-host-next {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--acnh-yellow), #f0a020);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 0 #c07010;
  transition: all 0.15s;
}
.btn-host-next:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 #c07010; }
.btn-host-next:active { transform: translateY(2px);  box-shadow: 0 2px 0 #c07010; }

.btn-host-finish {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #f05060, #c03040);
  color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 0 #902030;
  transition: all 0.15s;
}
.btn-host-finish:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 #902030; }
.btn-host-finish:active { transform: translateY(2px);  box-shadow: 0 2px 0 #902030; }

.answered-indicator {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-soft);
  background: #f0f8e8;
  padding: 8px;
  border-radius: 50px;
  border: 1.5px solid #c8e0a8;
}

/* ===== 進行役：集計結果 ===== */
.host-result-card { text-align: center; }

.host-result-header { margin-bottom: 12px; }
.trophy-icon { font-size: 3rem; margin-bottom: 8px; }

.total-count-badge {
  display: inline-block;
  background: var(--acnh-yellow);
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 50px;
  border: 2px solid #e0b820;
  margin-bottom: 20px;
}

.result-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--acnh-white);
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid #e8dfc8;
}
.chart-type-icon { font-size: 1.6rem; flex-shrink: 0; }
.chart-type-info { flex: 1; text-align: left; }
.chart-type-name { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); }
.chart-bar-bg {
  width: 100%;
  height: 14px;
  background: rgba(0,0,0,0.06);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 4px;
}
.chart-bar-fill {
  height: 100%;
  border-radius: 50px;
  transition: width 1s ease;
}
.chart-count {
  font-size: 1.4rem;
  font-weight: 900;
  min-width: 32px;
  text-align: center;
}
.chart-pct {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-align: center;
  min-width: 40px;
}

.result-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

/* ===== 個人結果 ===== */
.result-card {
  text-align: center;
  padding: 36px 28px 28px !important;
  position: relative;
  overflow: hidden;
}

.result-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0, currentColor 2px,
    transparent 0, transparent 50%
  );
  background-size: 20px 20px;
  pointer-events: none;
}

.result-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.result-big-icon {
  font-size: 5rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  animation: resultPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes resultPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.result-sparkle {
  font-size: 1.8rem;
  animation: sparkleTwinkle 2s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
  0%,100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}

.result-label {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.result-type-name {
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.5);
}

.result-catch-bubble {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 50px;
  margin-bottom: 18px;
  position: relative;
}

.result-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.result-desc-box {
  font-size: 0.93rem;
  color: var(--text-dark);
  line-height: 1.8;
  text-align: left;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 2px solid rgba(0,0,0,0.06);
  white-space: pre-line;
}

.result-acnh-box {
  font-size: 0.85rem;
  line-height: 1.7;
  text-align: left;
  border-radius: var(--radius);
  padding: 12px 16px;
  border: 2px dashed;
  white-space: pre-line;
}

.result-second-type {
  font-size: 0.83rem;
  color: var(--text-soft);
  margin-bottom: 8px;
  min-height: 18px;
}

.result-footer-deco {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 1.2rem;
  opacity: 0.6;
  margin-bottom: 8px;
}

/* ===== タイプ別テーマ ===== */
/* みつける人 */
.type-mitsukeru .result-type-name  { color: var(--mitsukeru); }
.type-mitsukeru .result-catch-bubble { background: #e8f5da; color: var(--mitsukeru); border: 2px solid #b8dfaa; }
.type-mitsukeru .result-acnh-box   { background: #f0fae4; color: #3d7020; border-color: #b8dfaa; }
.type-mitsukeru .acnh-card::before { background: linear-gradient(90deg,#72c040,#c8e888,#72c040); }

/* つくる人 */
.type-tsukuru .result-type-name  { color: var(--tsukuru); }
.type-tsukuru .result-catch-bubble { background: #f0e8f8; color: var(--tsukuru); border: 2px solid #d4b8e8; }
.type-tsukuru .result-acnh-box   { background: #f5eefa; color: #6a3090; border-color: #d4b8e8; }
.type-tsukuru .acnh-card::before { background: linear-gradient(90deg,#9c5fc7,#e0b8f8,#9c5fc7); }

/* つながる人 */
.type-tsunagaru .result-type-name  { color: var(--tsunagaru); }
.type-tsunagaru .result-catch-bubble { background: #fef3ea; color: var(--tsunagaru); border: 2px solid #f5c8a0; }
.type-tsunagaru .result-acnh-box   { background: #fff5ee; color: #a04010; border-color: #f5c8a0; }
.type-tsunagaru .acnh-card::before { background: linear-gradient(90deg,#e87430,#ffd0a0,#e87430); }

/* とびだす人 */
.type-tobidasu .result-type-name  { color: var(--tobidasu); }
.type-tobidasu .result-catch-bubble { background: #e4f2fc; color: var(--tobidasu); border: 2px solid #aad4f0; }
.type-tobidasu .result-acnh-box   { background: #eef7fd; color: #1a6090; border-color: #aad4f0; }
.type-tobidasu .acnh-card::before { background: linear-gradient(90deg,#2e8bc0,#a0d8f8,#2e8bc0); }

/* やりこむ人 */
.type-yariko .result-type-name  { color: var(--yariko); }
.type-yariko .result-catch-bubble { background: #fceaea; color: var(--yariko); border: 2px solid #f0aaa0; }
.type-yariko .result-acnh-box   { background: #fdf0ee; color: #902020; border-color: #f0aaa0; }
.type-yariko .acnh-card::before { background: linear-gradient(90deg,#c94040,#f8a0a0,#c94040); }

/* ===== 参加者名タグ（集計画面） ===== */
.name-tag {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  border: 2px solid;
  color: white;
}
.name-tag.mitsukeru { background: var(--mitsukeru); border-color: var(--acnh-green-dark); }
.name-tag.tsukuru   { background: var(--tsukuru);   border-color: #7a3090; }
.name-tag.tsunagaru { background: var(--tsunagaru); border-color: #b05010; }
.name-tag.tobidasu  { background: var(--tobidasu);  border-color: #1a6090; }
.name-tag.yariko    { background: var(--yariko);    border-color: #902020; }

/* 進行役セットアップ画像 */
.setup-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 12px;
}

/* ===== QRコードエリア ===== */
.qr-area {
  background: var(--acnh-white);
  border: 2.5px solid #c0d8a0;
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin: 12px 0;
}

.qr-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.qr-code-box {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.qr-code-box img,
.qr-code-box canvas {
  border-radius: 8px;
  border: 3px solid var(--acnh-green-lt);
}

.qr-url {
  font-size: 0.7rem;
  color: var(--text-soft);
  word-break: break-all;
  background: var(--acnh-green-lt);
  padding: 4px 10px;
  border-radius: 8px;
  margin-top: 4px;
}

/* ===== 進行役：選択肢リスト ===== */
.host-choices-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.host-choice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--acnh-green-lt);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.83rem;
  color: var(--text-dark);
  border: 1.5px solid #c0d8a0;
}

.host-choice-num {
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--acnh-green);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.host-choice-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.host-choice-text {
  line-height: 1.35;
  flex: 1;
}

/* ===== 選択肢別バー（設問中） ===== */
.stats-choice-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

/* ===== BGMボタン（画面右下固定） ===== */
.bgm-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.88);
  border: 2.5px solid #c0d8a0;
  border-radius: 50px;
  padding: 8px 16px 8px 12px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.bgm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  border-color: var(--acnh-green);
}

.bgm-btn.bgm-on {
  background: rgba(232, 245, 218, 0.95);
  border-color: var(--acnh-green);
  color: var(--acnh-green-dark);
  animation: bgmPulse 2.5s ease-in-out infinite;
}

#bgm-icon {
  font-size: 1.1rem;
  line-height: 1;
}

@keyframes bgmPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(95,168,50,0.2); }
  50%       { box-shadow: 0 4px 20px rgba(95,168,50,0.45); }
}

/* ===== レスポンシブ ===== */
@media (min-width: 600px) {
  .acnh-card { padding: 36px 36px 32px; }
  .q-text { font-size: 1.35rem; }
  .choice-btn { font-size: 1.02rem; padding: 16px 20px; }
  .title-acnh { font-size: 2.1rem; }
}

@media (max-width: 440px) {
  .title-acnh { font-size: 1.6rem; }
  .q-text { font-size: 1.1rem; }
  .choice-btn { font-size: 0.9rem; padding: 12px 14px; }
  .result-type-name { font-size: 1.6rem; }
  .session-code-display { font-size: 3rem; }
}