/* 最強の鍋ドラフト — 色はすべてCSS変数 */
:root {
  --accent: #c2462a; --accent-ink: #ffffff; --accent-soft: #fbe3da;
  --stage: #f6e6d2; --stage-2: #ecd2b4; --ic-bg: #f4ead9;
  --up: #2b8a5e; --down: #c0452e; --rare: #d4a017; --rare-ink: #3a2a00;
  --t-koku: #f2d7c4; --t-sappari: #d6eef0; --t-umami: #f4e3b5; --t-hot: #f7cfc6; --t-amai: #f9dde8; --t-kaori: #dcefd2; --t-shokkan: #e3defa; --t-ink: #3a2a20;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff8a66; --accent-ink: #2a120b; --accent-soft: #3d1f17;
    --stage: #2a1f1a; --stage-2: #3a2a20; --ic-bg: #3a2e26; --up: #5fd39a; --down: #ff8a70;
  }
}
:root[data-theme="dark"] {
  --accent: #ff8a66; --accent-ink: #2a120b; --accent-soft: #3d1f17;
  --stage: #2a1f1a; --stage-2: #3a2a20; --ic-bg: #3a2e26; --up: #5fd39a; --down: #ff8a70;
}

/* 絵 */
.nd-hero { background: radial-gradient(ellipse at 50% 60%, var(--stage-2), var(--stage) 70%); border-radius: 18px; padding: 10px 6px 4px; text-align: center; }
.nd-pot { display: block; width: 100%; height: auto; }
.nd-pot-big { max-width: 440px; margin: 0 auto; }
.nd-pot-box { background: radial-gradient(ellipse at 50% 70%, var(--stage-2), var(--stage) 72%); border-radius: 16px; padding: 4px 6px 0; }
.nd-pot-box .nd-pot { max-width: 360px; margin: 0 auto; }
.nd-steam path { animation: nd-steam 2.8s ease-in-out infinite; opacity: .0; }
.nd-steam path:nth-child(2) { animation-delay: .9s; } .nd-steam path:nth-child(3) { animation-delay: 1.8s; }
@keyframes nd-steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } }
.nd-bub circle { animation: nd-bub 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nd-bub circle:nth-child(2) { animation-delay: .5s; } .nd-bub circle:nth-child(3) { animation-delay: 1s; }
@keyframes nd-bub { 0%, 100% { transform: scale(.4); opacity: 0; } 50% { transform: scale(1.4); opacity: .9; } }
.nd-fire { animation: nd-fire .8s linear infinite; }
@keyframes nd-fire { to { stroke-dashoffset: 12; } }
.nd-drop { animation: nd-drop .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes nd-drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.nd-boil .nd-piece { animation: nd-wobble .5s ease-in-out infinite alternate; }
.nd-boil .nd-piece:nth-child(odd) { animation-delay: .25s; }
@keyframes nd-wobble { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
.nd-rare { box-shadow: 0 0 0 3px var(--rare), 0 0 28px var(--rare); }

/* プレイ */
.nd-play > * + * { margin-top: 10px; }
.nd-head { display: flex; align-items: baseline; gap: 8px; }
.nd-round { font-size: 18px; }
.nd-count { margin-left: auto; }
.nd-body > * + * { margin-top: 10px; }
.nd-q { font-weight: 800; font-size: 17px; margin: 0; }
.nd-opts { display: grid; gap: 10px; }
.nd-opt { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; width: 100%; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; min-height: 68px; touch-action: manipulation; }
.nd-opt:hover { border-color: var(--accent); }
.nd-opt-ic { grid-row: 1 / 3; width: 52px; height: 52px; color: var(--text); }
.nd-ic { width: 52px; height: 52px; display: block; }
.nd-ic-bg { fill: var(--ic-bg); }
.nd-opt-n { font-weight: 800; font-size: 17px; line-height: 1.35; }
.nd-opt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.nd-tagchip { font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 99px; color: var(--t-ink); background: var(--t-umami); }
.nd-t-koku { background: var(--t-koku); } .nd-t-sappari { background: var(--t-sappari); } .nd-t-umami { background: var(--t-umami); } .nd-t-hot { background: var(--t-hot); }
.nd-t-amai { background: var(--t-amai); } .nd-t-kaori { background: var(--t-kaori); } .nd-t-shokkan { background: var(--t-shokkan); }
.nd-opt.nd-picked { border-color: var(--accent); background: var(--accent-soft); }
.nd-opt.nd-faded { opacity: .4; }
.nd-opt:disabled { cursor: default; }
.nd-res { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.nd-res p { margin: 0 0 4px; }
.nd-gains { list-style: none; padding: 0; margin: 4px 0 0; }
.nd-gains li { margin: 2px 0; font-weight: 700; }
.nd-up { color: var(--up); } .nd-down { color: var(--down); }
.nd-simmer { text-align: center; background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 20px 16px; display: grid; gap: 2px; }
.nd-simmer b { font-size: 28px; } .nd-simmer .mn-small { color: var(--accent-ink); opacity: .85; }

/* 結果 */
.nd-name { font-size: clamp(24px, 7vw, 34px); font-weight: 900; line-height: 1.3; margin: 2px 0 6px; }
.nd-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.nd-score small { font-weight: 800; color: var(--text-sub); }
.nd-type { font-size: 22px; font-weight: 900; color: var(--accent); margin: 2px 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.nd-rare-badge { font-size: 13px; background: var(--rare); color: var(--rare-ink); border-radius: 6px; padding: 0 8px; }
.nd-pct { font-weight: 800; margin: 4px 0; }
.nd-emo { font-size: 24px; letter-spacing: 2px; margin: 4px 0 8px; }
.nd-bestline { font-weight: 700; margin: 4px 0; }
.nd-zukan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* 生成画像 */
.nd-hero-photo { padding: 0; margin: 0 -16px; background: none; }
.nd-title-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 0 18px 18px; }
@media (min-width: 600px) { .nd-hero-photo { margin: 0; } .nd-title-img { border-radius: 18px; } }
.nd-portrait { max-width: 360px; margin: 0 auto; }
.nd-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
.mn-daily-num { white-space: nowrap; }
.ai-note { margin: 4px 0 8px; text-align: right; }