/* =====================================================================
   鳴かせろ！ホトトギス ── 浮世絵・和紙の木版画調
   - 線は墨（濃紺の黒）、色は少なく平ら。影ではなく「ずれた版」で立体感を出す
   - 文字：説明は丸ゴシック、演出・数字・掛け声は明朝の極太（墨＋和紙のふち＋朱の見当ずれ）
   - 色の役割：世界＝藍と夕焼け / 主役＝ホトトギス（藍鼠・怒ると紅）/ 信長＝朱・秀吉＝山吹・家康＝萌黄 /
              操作・落款＝朱 / 逆襲・危険＝濃紅と黒
   ===================================================================== */
:root {
  --paper: #f3e9d2; --paper-2: #e6d8b8; --ink: #1d1b26; --indigo: #2b4a7e; --shu: #d6402b; --kurenai: #a02226;
  --yamabuki: #e8a830; --moegi: #6f9c3a; --asagi: #5aa7b5;
  --font-ui: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", serif;
  /* 舞台の色（本能寺の変では .hon で燃える色に変わる） */
  --sky-a: #34568f; --sky-b: #e8a089; --sky-c: #f2c88e; --sky-d: #f3e0b0; --moon: #f6ecd0;
  --mt-far: #7a88ad; --mt-near: #46598a; --mist: #f3e9d2; --wave-bg: #2b4a7e; --wave-ln: #86a4d2;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1d2a4a; overflow: hidden; overscroll-behavior: none; font-family: var(--font-ui); }
body { user-select: none; -webkit-user-select: none; touch-action: manipulation; color: var(--ink); }
#app {
  position: relative; display: flex; flex-direction: column; height: 100dvh; max-width: 520px; margin: 0 auto;
  background: var(--paper); box-shadow: 0 0 0 100vmax #1d2a4a; padding-top: env(safe-area-inset-top, 0px);
}
#stage { container-type: inline-size; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#stage.hon {
  --sky-a: #1a1020; --sky-b: #7a1a2a; --sky-c: #d6402b; --sky-d: #f0a02a; --moon: #f2c9a0;
  --mt-far: #5a2a3c; --mt-near: #2e1a2c; --mist: #f0a02a; --wave-bg: #5a1a2a; --wave-ln: #e8765a;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#flames { transition: opacity 0.6s; }
#stage.hon #flames { opacity: 1; animation: flame 0.5s steps(2) infinite; }
@keyframes flame { 50% { transform: translateY(-5px); } }
#paper { position: absolute; inset: 0; pointer-events: none; background-image: var(--paper-img, none); mix-blend-mode: multiply; opacity: 0.55; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(29, 27, 38, 0.38) 100%); }
#stage.hon #vignette { background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(160, 34, 38, 0.6) 100%); }

/* ---- ホトトギス ---- */
#bird .f { display: none; }
#bird[data-face="neutral"] .f-neutral, #bird[data-face="angry"] .f-angry, #bird[data-face="hungry"] .f-hungry, #bird[data-face="sleepy"] .f-sleepy, #bird[data-face="strike"] .f-strike { display: inline; }
#bird { --bird-body: #5f7fa6; --bird-dk: #46628a; }
#bird[data-face="angry"] { --bird-body: #b94a32; --bird-dk: #8a3222; }
#bird[data-face="sleepy"] { --bird-body: #536f9c; --bird-dk: #3f5a86; }
#bird[data-face="strike"] { --bird-body: #8a1f2a; --bird-dk: #5c141d; }
#petals path { animation: petal 9s linear infinite; transform-box: fill-box; }
#petals path:nth-child(2) { animation-delay: -2s; } #petals path:nth-child(3) { animation-delay: -4s; } #petals path:nth-child(4) { animation-delay: -6s; } #petals path:nth-child(5) { animation-delay: -1s; } #petals path:nth-child(6) { animation-delay: -7s; }
@keyframes petal { from { transform: translate(0, -40px) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(60px, 520px) rotate(300deg); opacity: 0.2; } }

/* ---- 文字：明朝の極太。墨＋和紙のふち＋朱のずれ ---- */
.brush {
  font-family: var(--mincho); font-weight: 900; color: var(--ink); white-space: nowrap; letter-spacing: 0.02em;
  -webkit-text-stroke: 0.14em var(--paper); paint-order: stroke fill; text-shadow: 0.07em 0.07em 0 var(--shu);
}
.brush.shu { color: var(--shu); text-shadow: 0.07em 0.07em 0 var(--ink); }
.brush.kuro { color: var(--kurenai); text-shadow: 0.07em 0.07em 0 var(--ink); }
.hanko { /* 朱印。判定や「本能寺の変」に使う */
  display: inline-block; font-family: var(--mincho); font-weight: 900; color: var(--paper); background: var(--shu); padding: 0.12em 0.34em 0.16em;
  outline: 0.07em solid var(--shu); outline-offset: 0.08em; transform: rotate(-4deg); letter-spacing: 0.06em; white-space: nowrap;
  box-shadow: 0.09em 0.09em 0 var(--ink);
}
.hanko.ink { background: var(--ink); outline-color: var(--ink); color: var(--paper); box-shadow: 0.09em 0.09em 0 var(--shu); }
.hanko.gold { background: var(--yamabuki); color: var(--ink); outline-color: var(--yamabuki); }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0 0 auto 0; padding: 12px 14px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; z-index: 2; }
#hud[hidden] { display: none; }
#score-wrap small { display: block; font: 900 11px var(--mincho); color: var(--paper); letter-spacing: 0.4em; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
#score { font-size: clamp(26px, 8.6cqw, 36px); line-height: 1.05; }
#morale { display: flex; align-items: center; gap: 6px; width: min(58%, 250px); }
#morale span { font: 900 12px var(--mincho); color: var(--paper); text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
#morale .bar { flex: 1; height: 14px; border: 3px solid var(--ink); background: rgba(243, 233, 210, 0.85); border-radius: 3px; overflow: hidden; }
#morale i { display: block; height: 100%; width: 70%; background: linear-gradient(90deg, var(--shu), var(--yamabuki)); transition: width 0.2s; }
#morale.low .bar { animation: throb 0.5s ease-in-out infinite; }
@keyframes throb { 50% { border-color: var(--shu); } }
#combo { position: absolute; right: 14px; top: 58px; font-size: clamp(18px, 5.6cqw, 26px); }
#vol {
  position: absolute; right: 10px; top: 12px; z-index: 5; font: 800 13px var(--font-ui); color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 4px; padding: 5px 11px; box-shadow: 0 3px 0 var(--ink);
}

/* ---- 譜面（1小節＝8コマ） ---- */
#strip { position: absolute; left: 12px; right: 12px; top: 100px; z-index: 2; pointer-events: none; background: rgba(243, 233, 210, 0.93); border: 3px solid var(--ink); border-radius: 4px; padding: 3px 8px 6px; box-shadow: 0 4px 0 rgba(29, 27, 38, 0.5); }
#strip[hidden] { display: none; }
#strip-label { display: flex; align-items: center; gap: 8px; font: 800 11px var(--font-ui); height: 18px; }
#strip-kind { font: 900 12px var(--mincho); background: var(--ink); color: var(--paper); padding: 1px 8px; letter-spacing: 0.15em; }
#strip.resp #strip-kind { background: var(--shu); }
#strip-sub { color: var(--kurenai); font-weight: 900; }
#track { position: relative; height: 36px; margin-top: 2px; }
#ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
#ticks i { border-left: 2px solid rgba(29, 27, 38, 0.25); }
#ticks i:nth-child(odd) { border-left-color: var(--ink); border-left-width: 3px; }
#notes { position: absolute; inset: 0; }
#playhead { position: absolute; top: -2px; bottom: -2px; left: 0; width: 4px; margin-left: -2px; background: var(--shu); box-shadow: 0 0 0 1px var(--paper); will-change: transform; }
.nt { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; transform: scale(0); transition: transform 0.12s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.2s, filter 0.2s; }
.nt.show { transform: scale(1); }
.nt.ghost { opacity: 0.6; }
.nt.next { opacity: 1; transform: scale(1.18); }
.nt.ok::after { content: ""; position: absolute; inset: -4px; border: 3px solid var(--moegi); border-radius: 50%; }
.nt.bad { filter: grayscale(1) brightness(0.7); }
.nt.bad::after { content: "×"; position: absolute; color: var(--shu); font: 900 30px var(--mincho); line-height: 1; -webkit-text-stroke: 2px var(--paper); paint-order: stroke fill; }

/* 音の印（怒・腹・眠・襲） */
.kb { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); font: 900 16px/1 var(--mincho); color: var(--paper); flex: none; }
.nt .kb { width: 30px; height: 30px; }
.k-angry { background: var(--shu); } .k-hungry { background: var(--yamabuki); color: var(--ink); } .k-sleepy { background: var(--moegi); } .k-strike { background: var(--ink); color: #f0a02a; border-color: var(--kurenai); }

/* ---- 3人のボタン（木札） ---- */
#controls { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ink); border-top: 4px solid var(--shu); }
.pick {
  position: relative; height: clamp(104px, 19dvh, 156px); display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; padding: 18px 4px 6px;
  border: 4px solid var(--ink); border-radius: 8px; outline: 2px solid var(--paper-2); outline-offset: -8px; color: var(--ink); touch-action: manipulation;
  background-color: var(--paper); background-image: linear-gradient(180deg, var(--band) 0 24%, transparent 24%); box-shadow: 0 5px 0 #000;
}
#b-nobunaga { --band: var(--shu); } #b-hideyoshi { --band: var(--yamabuki); } #b-ieyasu { --band: var(--moegi); }
.pick .kb { position: absolute; left: 6px; top: 5px; width: 30px; height: 30px; font-size: 17px; }
.pick svg { width: 100%; max-width: 70px; height: 100%; min-height: 0; }
.pick b { font: 900 clamp(18px, 5.6vw, 24px)/1 var(--mincho); letter-spacing: 0.1em; }
.pick small { font: 900 clamp(12px, 3.4vw, 14px)/1.2 var(--mincho); color: var(--kurenai); }
.pick:disabled { filter: grayscale(0.6) brightness(0.85); }
.pick:not(:disabled):active, .pick.on { transform: translateY(4px); box-shadow: 0 1px 0 #000; filter: brightness(1.08); }

/* ---- 人物の登場・判定の文字・斬撃 ---- */
#cameo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.cameo { position: absolute; bottom: -4%; width: 30cqw; aspect-ratio: 1; padding: 3px; background: var(--paper); border: 4px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--shu); animation: cameoUp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; will-change: transform, opacity; }
.cameo svg { width: 100%; height: 100%; display: block; }
@keyframes cameoUp { 0% { transform: translateY(80%) rotate(-3deg); opacity: 0; } 30% { transform: translateY(0) rotate(-2deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-12%) rotate(-2deg); opacity: 0; } }
#fxlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pop { position: absolute; left: 50%; transform: translate(-50%, 0); animation: popUp 0.85s ease-out forwards; will-change: transform, opacity; }
@keyframes popUp { 0% { transform: translate(-50%, 14px) scale(0.5); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1.12); opacity: 1; } 26% { transform: translate(-50%, 0) scale(1); } 72% { transform: translate(-50%, -8px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -22px) scale(1); opacity: 0; } }
.pop:not(.stamp) { font-size: clamp(24px, 8cqw, 40px); }
.pop.small { font-size: clamp(20px, 6cqw, 30px); }
.pop.stamp { font-size: clamp(34px, 11cqw, 66px); }
.pop.tall { writing-mode: vertical-rl; font-size: clamp(28px, 8.4cqw, 46px); animation-duration: 1.6s; }
.flash { position: absolute; inset: 0; opacity: 0; animation: flash 0.28s ease-out; }
@keyframes flash { 0% { opacity: 0.45; } 100% { opacity: 0; } }
.shake { animation: shake 0.3s; }
@keyframes shake { 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
#slash { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
#slash i { position: absolute; left: -20%; top: 38%; width: 140%; height: 10px; background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 14px 4px rgba(255, 255, 255, 0.9), 0 3px 0 var(--ink); transform: rotate(-24deg) scaleX(0); transform-origin: 0 50%; animation: slashGo 0.38s ease-out forwards; }
@keyframes slashGo { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 40% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }

/* ---- 画面：タイトル・ごほうび・結果 ---- */
.card-screen {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px clamp(14px, 5vw, 28px); text-align: center; background: rgba(29, 42, 74, 0.66); overflow: clip;
}
.card-screen[hidden] { display: none; }
#result, #bonus { background: rgba(29, 27, 38, 0.96); }

/* タイトルロゴ：縦書きの明朝。短冊（信長・秀吉・家康）・朱の落款 */
#logo { position: relative; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: clamp(6px, 2cqw, 14px); margin: 0 0 4px; padding: 0; transform: rotate(-2deg); animation: logoin 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes logoin { from { transform: rotate(-8deg) scale(0.7); opacity: 0; } }
#logo span { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 900; line-height: 1.04; }
.lg-main { font-size: clamp(40px, min(14cqw, 7dvh), 76px); color: var(--ink); -webkit-text-stroke: 0.12em var(--paper); paint-order: stroke fill; text-shadow: 0.06em 0.06em 0 var(--shu); letter-spacing: 0.02em; }
.lg-sub { font-size: clamp(22px, min(7.6cqw, 3.8dvh), 40px); margin-top: 0.9em; color: var(--paper); -webkit-text-stroke: 0.2em var(--indigo); paint-order: stroke fill; letter-spacing: 0.04em; text-shadow: 0.08em 0.08em 0 var(--ink); }
.lg-tan { font-size: clamp(13px, 3.8cqw, 18px); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); padding: 0.5em 0.3em; letter-spacing: 0.18em; margin-top: 0.3em; box-shadow: 3px 3px 0 var(--shu); }
#logo .lg-seal { position: absolute; left: -6px; bottom: -14px; font-size: clamp(18px, 5.6cqw, 26px); color: var(--paper); background: var(--shu); padding: 0.14em 0.1em; outline: 2px solid var(--shu); outline-offset: 2px; transform: rotate(6deg); box-shadow: 2px 2px 0 var(--ink); writing-mode: horizontal-tb; }

.how { position: relative; z-index: 2; width: 100%; max-width: 380px; background: var(--paper); border: 4px solid var(--ink); border-radius: 4px; padding: 8px 12px 10px; margin: 8px 0; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); }
.how::before, .how::after { content: ""; position: absolute; left: -8px; right: -8px; height: 10px; background: #6b4a38; border: 3px solid var(--ink); border-radius: 6px; }
.how::before { top: -12px; } .how::after { bottom: -12px; }
.how-head { margin: 0 0 6px; font: 900 clamp(12px, 3.6vw, 15px) var(--mincho); color: var(--kurenai); }
.how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.how li { display: grid; grid-template-columns: 32px 4.6em 36px 1fr; gap: 8px; align-items: center; text-align: left; }
.how li.strike { grid-template-columns: 32px 4.6em 1fr; }
.how .kb { width: 30px; height: 30px; }
.how .hw { font: 900 clamp(16px, 5vw, 21px) var(--mincho); }
.how .face-ic { width: 34px; height: 34px; }
.how b { font: 900 clamp(14px, 4vw, 17px) var(--mincho); }
.how .how-note { font: 800 clamp(11px, 3.2vw, 13px) var(--font-ui); }
.big-btn { position: relative; z-index: 2; font: 900 clamp(24px, 7.6vw, 34px) var(--mincho); letter-spacing: 0.12em; color: var(--paper); background: var(--shu); border: 4px solid var(--ink); border-radius: 4px; padding: 10px 30px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1deg); }
.big-btn:active { transform: translate(4px, 4px) rotate(-1deg); box-shadow: 2px 2px 0 var(--ink); }
#retry { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06) rotate(-1deg); } }
.best { position: relative; z-index: 2; margin: 0; color: var(--paper); font-weight: 800; font-size: clamp(13px, 3.8vw, 15px); text-shadow: 0 2px 0 var(--ink); }
.best.small { font-size: 12px; opacity: 0.85; }

.bonus-title { margin: 0; font-size: clamp(26px, 8cqw, 40px); }
.bcard { width: clamp(150px, 46cqw, 210px); aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; background: var(--paper); border: 5px solid var(--ink); border-radius: 6px; box-shadow: 7px 7px 0 var(--shu); }
.bcard svg { width: 54%; height: 54%; }
.bcard.nudge { animation: shake 0.3s; }
.bcard.ok { background: #cfe4a0; } .bcard.bad { background: #f1b3a8; }
#btext { font-size: clamp(22px, 7cqw, 32px); }
#btimer { width: min(60%, 240px); height: 12px; border: 3px solid var(--ink); border-radius: 3px; background: rgba(243, 233, 210, 0.7); overflow: hidden; }
#btimer i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--yamabuki), var(--shu)); }
#bdots { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
#bdots li { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: rgba(243, 233, 210, 0.4); }
#bdots li.ok { background: var(--moegi); } #bdots li.bad { background: var(--shu); }
.bonus-note { margin: 0; color: var(--paper); font-weight: 800; font-size: 13px; text-shadow: 0 2px 0 var(--ink); }

.seal-rank { writing-mode: vertical-rl; font: 900 clamp(28px, 8.4cqw, 44px)/1.05 var(--mincho); color: var(--paper); background: var(--shu); padding: 0.2em 0.16em; outline: 4px solid var(--shu); outline-offset: 4px; box-shadow: 6px 6px 0 var(--ink); letter-spacing: 0.08em; transform: rotate(-4deg); animation: stampIn 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes stampIn { from { transform: scale(3) rotate(-14deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
.r-top { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4cqw, 22px); max-width: 100%; }
.r-num { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.r-label { margin: 0; color: var(--paper); font: 900 12px var(--mincho); letter-spacing: 0.4em; text-shadow: 0 2px 0 var(--ink); }
#r-fake { font-size: clamp(28px, 8.6cqw, 48px); line-height: 1.05; max-width: 100%; }
.r-score { margin: 0; color: var(--paper); font: 800 clamp(14px, 4vw, 18px) var(--font-ui); text-shadow: 0 2px 0 var(--ink); }
.stats { list-style: none; margin: 0; padding: 8px 14px; width: 100%; max-width: 340px; background: var(--paper); border: 4px solid var(--ink); border-radius: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: clamp(13px, 3.8vw, 15px); text-align: left; }
.stats b { float: right; }
.hint { margin: 0; max-width: 340px; padding: 7px 12px; background: #f7e2a0; border: 3px solid var(--ink); border-radius: 4px; font-size: clamp(13px, 3.8vw, 15px); font-weight: 700; }
.hint::before { content: "ヒント "; font-weight: 900; color: var(--kurenai); }

@media (max-height: 700px) {
  .card-screen { gap: 5px; padding-block: 8px; }
  .how { padding: 5px 10px 7px; margin: 6px 0; } .how ul { gap: 2px; } .how-head { margin-bottom: 3px; }
  .how .face-ic { width: 26px; height: 26px; } .how .kb { width: 26px; height: 26px; font-size: 14px; }
  .big-btn { padding: 6px 24px; font-size: 22px; }
  .stats { padding: 5px 12px; font-size: 12px; }
  .hint { font-size: 12px; padding: 5px 10px; }
  .seal-rank { font-size: 26px; }
  #r-fake { font-size: 26px; }
  .pick { height: clamp(86px, 17dvh, 118px); }
  #strip { top: 92px; }
}

@media (max-height: 620px) {
  .lg-main { font-size: clamp(30px, min(11cqw, 6dvh), 48px); } .lg-sub { font-size: clamp(16px, min(5.6cqw, 3dvh), 26px); } .lg-tan { font-size: 11px; }
  #logo { margin-bottom: 0; }
  .how { margin: 4px 0; padding: 4px 8px 6px; } .how-head { font-size: 11px; margin-bottom: 2px; }
  .how .face-ic { width: 22px; height: 22px; } .how .kb { width: 22px; height: 22px; font-size: 12px; border-width: 2px; } .how .hw { font-size: 14px; }
  .how li { grid-template-columns: 24px 4.2em 26px 1fr; gap: 6px; } .how li.strike { grid-template-columns: 24px 4.2em 1fr; }
  .best.small { display: none; }
  .big-btn { font-size: 20px; padding: 4px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #petals path, #stage.hon #flames { animation: none !important; }
  #logo, .cameo, .pop, #slash i { animation: none !important; transform: none; opacity: 1; }
  .pop { transform: translate(-50%, 0); }
  #slash i { transform: rotate(-24deg) scaleX(1); }
  .flash, .shake, #retry, .seal-rank, .bcard.nudge, #morale.low .bar { animation: none !important; }
  .nt { transition: none; }
}