/* ============================================================
   『穿月姫譚』style.css — v3.9でindex.htmlから分離
   3つの<style>ブロックを元の順序のまま結合（CSSは後勝ちのため順序が意味を持つ）
   ============================================================ */

/* ===== 元ブロック1 ===== */

  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background: #14101c;
    color: #e8e0d0;
    min-height: 100vh;
    overflow-x: hidden;
  }
  #app { max-width: 560px; margin: 0 auto; padding: 12px; }
  /* 揺れは小さく短く、戻りは減速（手ざわりの掟） */
  #app.shake { animation: shake .18s cubic-bezier(.2,.8,.3,1); }
  @keyframes shake {
    0% { transform: translate(0,0); }
    25% { transform: translate(-3px,2px); }
    50% { transform: translate(3px,-2px); }
    75% { transform: translate(-2px,1px); }
    100% { transform: translate(0,0); }
  }
  header {
    display:flex; justify-content:space-between; align-items:center;
    padding: 10px 14px; background:#1f1830; border:1px solid #3a2f55;
    border-radius:10px; margin-bottom:10px;
  }
  header .title { font-size:14px; color:#b8a8e0; }
  header .res { font-size:14px; text-align:right; }
  header .res b { color:#f0c860; font-size:16px; }
  #sndBtn { background:none; border:1px solid #3a2f55; border-radius:6px; color:#cfc4ea; padding:4px 8px; cursor:pointer; font-size:14px; }
  nav { display:flex; gap:6px; margin-bottom:10px; }
  nav button {
    flex:1; padding:10px 0; font-size:14px; border-radius:8px;
    border:1px solid #3a2f55; background:#221a38; color:#cfc4ea; cursor:pointer;
  }
  nav button.active { background:#4a3a78; color:#fff; border-color:#7a63c0; }
  section.tab { display:none; }
  section.tab.active { display:block; }
  .panel {
    background:#1f1830; border:1px solid #3a2f55; border-radius:10px;
    padding:14px; margin-bottom:10px;
  }
  h2 { font-size:15px; color:#b8a8e0; margin-bottom:10px; }
  h3 { font-size:13px; color:#9a8cc0; margin:10px 0 6px; }
  .challenge-btn {
    display:block; width:100%; padding:14px; margin-bottom:8px; border-radius:8px;
    border:1px solid #a06030; background:linear-gradient(180deg,#4a2c10,#3a2210);
    color:#ffd9a0; cursor:pointer; font-size:16px; font-weight:bold;
  }
  .challenge-btn small { display:block; font-weight:normal; font-size:12px; color:#d0a878; margin-top:3px; }
  .challenge-btn.boss { border-color:#c04060; background:linear-gradient(180deg,#4a1020,#380a18); color:#ffb0c0; }
  .farm-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .farm-row button.pm {
    width:40px; height:40px; font-size:18px; border-radius:8px; cursor:pointer;
    border:1px solid #4a3a78; background:#2a2044; color:#e8e0d0;
  }
  .farm-row .farm-floor { flex:1; text-align:center; font-size:16px; color:#fff; }
  .farm-go {
    display:block; width:100%; padding:11px; border-radius:8px; cursor:pointer;
    border:1px solid #4a3a78; background:#2a2044; color:#e8e0d0; font-size:14px;
  }
  .farm-info { font-size:12px; color:#9a8cc0; text-align:center; margin:6px 0; }
  .statline { font-size:13px; line-height:1.9; color:#cfc4ea; }
  .statline b { color:#fff; }
  .el { display:inline-block; padding:0 5px; border-radius:4px; font-size:11px; font-weight:bold; color:#14101c; margin:0 1px; }
  /* 戦闘画面 */
  #floorLabel { text-align:center; font-size:15px; color:#f0c860; margin-bottom:2px; }
  #stanceLabel { text-align:center; font-size:12px; color:#9a8cc0; margin-bottom:6px; }
  #waveBarWrap { margin-bottom:8px; }
  #waveBar { height:8px; }
  #waveBar > div { background:linear-gradient(90deg,#c03050,#ff7090); }
  #enemyArea {
    position:relative;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
    padding:14px 8px; border-radius:10px;
    background:#241028; border:1px solid #5a2a4a;
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
    transition: background .5s;
  }
  .cell {
    min-height:104px; border-radius:8px;
    background:rgba(255,255,255,.025); border:1px dashed #4a3a5544;
    position:relative;
  }
  .enemy {
    position:relative; width:100%; height:100%;
    text-align:center; padding:8px 2px; border-radius:8px;
    background:#2e1530; border:1px solid #6a3a5a; cursor:pointer;
    transition: transform .05s;
  }
  .enemy.hitflash { background:#6a2040; }
  .enemy.dead { opacity:0; transform:scale(1.6); transition: all .3s; pointer-events:none; }
  .enemy .face { font-size:34px; line-height:1.1; pointer-events:none; }
  .enemy.boss .face { font-size:48px; }
  .enemy .ename { font-size:11px; color:#e0a0b8; margin-top:2px; pointer-events:none; }
  .enemy .ehp { font-size:10px; color:#c0a8b8; pointer-events:none; }
  .enemy .bar { height:8px; margin-top:4px; pointer-events:none; }
  .enemy .role {
    position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    font-size:10px; padding:1px 8px; border-radius:8px; white-space:nowrap; pointer-events:none;
  }
  .enemy.heal { border-color:#40c080; } .enemy.heal .role { background:#0e4a2e; color:#80e0a0; }
  .enemy.guard { border-color:#4090e0; } .enemy.guard .role { background:#123a5e; color:#80c0f0; }
  .enemy.gold { border-color:#f0c860; box-shadow:0 0 12px #f0c86055; } .enemy.gold .role { background:#5a4310; color:#ffe090; }
  .enemy.boss { border-color:#ff5070; box-shadow:0 0 16px #ff507055; } .enemy.boss .role { background:#5a1020; color:#ffb0c0; }
  .enemy.poisoned .face::after { content:'☠'; font-size:14px; }
  .dmg {
    position:absolute; font-weight:bold; pointer-events:none; z-index:5;
    animation: dmgfloat .8s forwards; font-size:17px; color:#ffd0d8;
    text-shadow: 0 1px 3px #000;
  }
  .dmg.crit { font-size:26px; color:#ffd040; }
  .dmg.poison { color:#a0e080; font-size:13px; }
  .dmg.aoe { color:#ff9060; }
  .dmg.wave { color:#80c0f0; }
  .dmg.adv { color:#ffa040; }
  .dmg.chain { color:#c0ff80; font-size:18px; }
  .dmg.miss { color:#8a7ab0; font-size:13px; }
  .dmg.overkill { font-size:30px; color:#ff5040; }
  @keyframes dmgfloat {
    0% { transform: translateY(0) scale(.7); opacity:1; }
    20% { transform: translateY(-12px) scale(1.2); }
    100% { transform: translateY(-46px) scale(1); opacity:0; }
  }
  .enemy.burst { animation: burst .34s forwards; }
  @keyframes burst {
    0% { transform:scale(1); filter:brightness(1); opacity:1; }
    30% { transform:scale(1.25); filter:brightness(2.6); }
    100% { transform:scale(1.65); filter:brightness(3); opacity:0; }
  }
  .slashfx {
    position:absolute; left:8%; top:46%; width:84%; height:3px; z-index:6;
    background:linear-gradient(90deg,transparent,#fff,transparent);
    pointer-events:none;
    animation: slashfx .18s forwards;
  }
  @keyframes slashfx {
    0% { transform:rotate(-30deg) scaleX(0); opacity:1; }
    60% { transform:rotate(-30deg) scaleX(1.1); opacity:1; }
    100% { transform:rotate(-30deg) scaleX(1.15); opacity:0; }
  }
  .coinfly {
    position:absolute; font-size:16px; z-index:7; pointer-events:none;
    animation: coinfly .7s forwards;
  }
  @keyframes coinfly {
    0% { transform:translate(0,0) scale(1); opacity:1; }
    100% { transform:translate(var(--cx,0px), -70px) scale(.7); opacity:0; }
  }
  #banner {
    position:absolute; left:0; right:0; top:36%; text-align:center; z-index:8;
    font-size:30px; font-weight:bold; color:#ffd060; text-shadow:0 2px 8px #000;
    pointer-events:none; opacity:0;
  }
  #banner.show { animation: bannerpop .8s forwards; }
  @keyframes bannerpop {
    0% { opacity:0; transform:scale(.5); }
    20% { opacity:1; transform:scale(1.15); }
    45% { transform:scale(1); }
    80% { opacity:1; }
    100% { opacity:0; transform:scale(1.05); }
  }
  #chainLabel {
    position:absolute; top:4px; left:8px; font-size:16px; font-weight:bold;
    color:#c0ff80; text-shadow:0 1px 3px #000; pointer-events:none; z-index:6;
  }
  .bar { height:14px; border-radius:7px; background:#100a18; overflow:hidden; border:1px solid #000; }
  .bar > div { height:100%; transition:width .15s; }
  .ebar > div { background:linear-gradient(90deg,#c03050,#e06080); }
  #mpBar > div { background:linear-gradient(90deg,#3a60c0,#70a0f0); }
  #hissatsuWrap { display:flex; gap:8px; align-items:center; margin-top:10px; }
  #hissatsuBar { flex:1; height:16px; }
  #hissatsuBar > div { background:linear-gradient(90deg,#c07020,#ffcf60); }
  #hissatsuBtn {
    padding:9px 16px; font-size:14px; border-radius:8px; cursor:pointer;
    border:1px solid #7a5330; background:#3a2a1a; color:#f0d0a0; white-space:nowrap;
  }
  #hissatsuBtn.ready {
    background:linear-gradient(90deg,#a05010,#e0a030); color:#fff; border-color:#ffd070;
    animation: pulse 0.8s infinite alternate;
  }
  @keyframes pulse { from { box-shadow:0 0 4px #ffcf60; } to { box-shadow:0 0 16px #ffcf60; } }
  .hint { font-size:12px; color:#8a7ab0; text-align:center; margin-top:6px; }
  #mpBox { margin-top:10px; font-size:13px; }
  #log {
    margin-top:10px; font-size:12px; line-height:1.8; height:88px; overflow-y:auto;
    background:#171226; border-radius:8px; padding:8px 10px; color:#b0a8c8;
  }
  #log .drop { color:#f0c860; }
  #log .goku { color:#ff9060; font-weight:bold; }
  .btn {
    display:block; width:100%; padding:11px 0; margin-top:10px;
    font-size:14px; border-radius:8px; border:1px solid #7a5330;
    background:#3a2a1a; color:#f0d0a0; cursor:pointer;
  }
  /* オーバーレイ共通 */
  .overlay {
    position:fixed; inset:0; z-index:50; display:none;
    background:rgba(8,5,14,.82);
    align-items:center; justify-content:center;
  }
  .overlay.show { display:flex; }
  #dropCard {
    width:260px; text-align:center; padding:24px 18px; border-radius:14px;
    background:#251c3e; border:2px solid #7a63c0;
    animation: cardin .45s; cursor:pointer;
  }
  @keyframes cardin {
    0% { transform: scale(.3) rotate(-8deg); opacity:0; }
    60% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0); opacity:1; }
  }
  #dropCard.aura-r1 { border-color:#60d090; box-shadow:0 0 30px #40c08088; }
  #dropCard.aura-r2 { border-color:#60a8f0; box-shadow:0 0 40px #4090e0aa; }
  #dropCard.aura-r3 { border-color:#ffb060; box-shadow:0 0 60px #ff9040; animation: cardin .45s, gokuglow 1s infinite alternate; }
  @keyframes gokuglow { from { box-shadow:0 0 30px #ff9040; } to { box-shadow:0 0 70px #ffcf60; } }
  #dropCard .dface { font-size:52px; }
  #dropCard .drar { font-size:13px; margin:6px 0 2px; letter-spacing:2px; }
  #dropCard .dname { font-size:20px; font-weight:bold; color:#fff; margin-bottom:2px; }
  #dropCard .dline { font-size:13px; color:#d0b8e8; margin:8px 0; }
  #dropCard .deff { font-size:12px; color:#9a8cc0; line-height:1.7; }
  #dropCard .dcurse { font-size:12px; color:#ff6070; font-weight:bold; }
  #dropCard .dgoku { font-size:12px; color:#ff9060; font-weight:bold; margin-top:6px; }
  #dropCard .dtap { font-size:11px; color:#6a5a90; margin-top:10px; }
  /* リザルト */
  #resultBox {
    width:300px; text-align:center; padding:26px 20px; border-radius:14px;
    background:#251c3e; border:2px solid #f0c860; box-shadow:0 0 40px #f0c86044;
    animation: cardin .4s;
  }
  #resultBox h2 { font-size:20px; color:#ffd060; margin-bottom:2px; }
  #resultBox .zone { font-size:12px; color:#9a8cc0; margin-bottom:10px; }
  #resultBox .lead { font-size:13px; color:#d0b8e8; margin-bottom:6px; }
  #resultBox .rline { font-size:14px; line-height:2; color:#e8e0d0; }
  #resultBox .rcards { font-size:12px; color:#f0c860; line-height:1.8; margin:6px 0; }
  #resultBox button {
    display:block; width:100%; padding:11px; margin-top:8px; border-radius:8px; cursor:pointer;
    font-size:14px; border:1px solid #7a5330; background:#3a2a1a; color:#f0d0a0;
  }
  #resultBox button.primary { background:linear-gradient(180deg,#4a2c10,#3a2210); border-color:#a06030; color:#ffd9a0; font-weight:bold; }
  /* 式札 */
  .card-row {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding:9px 10px; margin-bottom:6px; border-radius:8px;
    background:#251c3e; border:1px solid #3a2f55; font-size:13px;
  }
  .card-row .info { flex:1; line-height:1.5; }
  .card-row .eff { font-size:11px; color:#9a8cc0; }
  .card-row .curse { font-size:11px; color:#ff6070; }
  .card-row button {
    padding:7px 12px; font-size:12px; border-radius:6px; cursor:pointer;
    border:1px solid #5a4a90; background:#332860; color:#dcd2f5; white-space:nowrap;
  }
  .card-row.equipped { border-color:#f0c860; }
  .rar { font-weight:bold; padding:1px 6px; border-radius:4px; font-size:11px; margin-right:4px; }
  .r0 { background:#3a3a3a; color:#c0c0c0; }
  .r1 { background:#1e4a2e; color:#80e0a0; }
  .r2 { background:#1e3a5e; color:#80c0f0; }
  .r3 { background:#5e2a1e; color:#ffb060; }
  .cursebadge { font-weight:bold; padding:1px 6px; border-radius:4px; font-size:11px; margin-right:4px; background:#4a1020; color:#ff6070; }
  /* 強化 */
  .up-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #2a2044; font-size:13px; }
  .up-row:last-child { border-bottom:none; }
  .up-row button { padding:8px 14px; border-radius:6px; border:1px solid #7a5330; background:#3a2a1a; color:#f0d0a0; cursor:pointer; font-size:12px; }
  .up-row button:disabled { opacity:.4; }
  /* 図鑑 */
  .zukan-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .zukan-cell {
    text-align:center; padding:10px 2px; border-radius:8px; font-size:12px;
    background:#251c3e; border:1px solid #3a2f55; color:#6a5a90;
  }
  .zukan-cell.got { color:#f0c860; border-color:#7a63c0; background:#2f2450; }
  .zukan-cell small { display:block; font-size:9px; margin-top:3px; }
  .zukan-cell .zface { font-size:22px; }
  details { margin-top:10px; font-size:12px; color:#9a8cc0; }
  details summary { cursor:pointer; color:#b8a8e0; }
  details p { margin:6px 0; line-height:1.7; }
  footer { text-align:center; font-size:11px; color:#5a4e78; padding:14px 0; }


/* ===== 元ブロック2 ===== */

/* ===== 和風化粧（v1.1）——墨・漆黒 × 朱 × 金 ===== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600;800&display=swap');
body {
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  background:
    radial-gradient(ellipse at 50% -10%, #241a26 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 12px),
    #0c0a0e;
  color:#e8e0cf;
  letter-spacing:.03em;
}
header {
  background: linear-gradient(180deg,#1c1618,#131013);
  border:1px solid #4a3c28; border-radius:4px;
  box-shadow: 0 2px 10px #000a;
  position:relative;
}
header::before {
  content:''; position:absolute; inset:3px;
  border:1px solid #c9a44d33; border-radius:2px; pointer-events:none;
}
header .title { font-weight:800; color:#e8dcc0; font-size:16px; line-height:1.3; }
header .title small { color:#8f7f5f; font-weight:600; font-size:11px; }
header .res { color:#c9bda4; }
header .res b { color:#e3b34c; }
#sndBtn { border-color:#4a3c28; color:#c9bda4; border-radius:3px; }
nav button {
  background:#151114; border:1px solid #3a3028; border-radius:3px;
  color:#b7a98e; font-family:inherit; font-weight:600; letter-spacing:.25em; text-indent:.25em;
}
nav button.active {
  background:linear-gradient(180deg,#48160e,#320f0a);
  color:#f5dda8; border-color:#a8442e;
  box-shadow: inset 0 -2px 0 #d4442e, 0 1px 6px #000a;
}
.panel {
  background: linear-gradient(180deg,#161215,#100d10);
  border:1px solid #3a3028; border-radius:4px;
  box-shadow: 0 2px 8px #0008;
}
h2 {
  color:#d8c48f; font-weight:800; letter-spacing:.15em;
  border-bottom:1px solid #c9a44d2e; padding-bottom:6px;
}
h3 { color:#a8946a; letter-spacing:.1em; }
.statline { color:#cfc4ae; }
.hint { color:#8f8272; }
details summary { color:#c9b68a; }
details { color:#9a8d78; }
.challenge-btn {
  border-radius:3px; border:1px solid #b8542e;
  background:linear-gradient(180deg,#7a2517,#521a0f);
  color:#ffe1b0; letter-spacing:.08em; font-family:inherit;
  box-shadow: inset 0 1px 0 #ff8c5a2e, 0 2px 8px #000a;
}
.challenge-btn small { color:#e8b088; }
.challenge-btn.boss {
  border-color:#d4442e;
  background:linear-gradient(180deg,#5a0f1d,#3a0a14);
  color:#ffc9b0;
}
.farm-row button.pm, .farm-go {
  background:#1c1720; border:1px solid #4a3c50; color:#d5c9ae; border-radius:3px; font-family:inherit;
}
.farm-info { color:#8f8272; }
.btn {
  background:linear-gradient(180deg,#2a2118,#1d1710);
  border:1px solid #6a5330; color:#e3cf9e; border-radius:3px; font-family:inherit; letter-spacing:.06em;
}
/* 盤面と木札の鬼 */
#enemyArea { border:1px solid #43364a; border-radius:4px; }
.cell {
  border:1px solid #ffffff09; background:rgba(0,0,0,.28); border-radius:3px;
}
.enemy {
  background: linear-gradient(180deg,#2c2126,#1f151d);
  border:1px solid #5a4552; border-radius:4px;
  box-shadow: 0 2px 6px #000a, inset 0 1px 0 #ffffff10;
}
.enemy::before {
  content:''; position:absolute; top:3px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:#0d0a10; box-shadow: inset 0 0 0 1px #6a5a70;
}
.enemy .face { filter: drop-shadow(0 3px 4px #000d); }
.enemy .ename { color:#dcc0c8; }
.enemy.boss { box-shadow: 0 0 18px #d4442e55, 0 2px 6px #000a; }
/* ゲージ類 */
.bar { border:1px solid #2a2230; border-radius:3px; background:#0a080c; }
#mpBar > div { background:linear-gradient(90deg,#274b8f,#5f93d6); }
#hissatsuBar > div { background:linear-gradient(90deg,#9a6a1a,#e3b34c); }
#hissatsuBtn {
  background:linear-gradient(180deg,#2a2118,#1d1710);
  border:1px solid #6a5330; color:#e3cf9e; border-radius:3px; font-family:inherit;
}
#hissatsuBtn.ready {
  background:linear-gradient(90deg,#8f4f10,#c98a24); color:#fff4d8; border-color:#e3b34c;
}
#floorLabel { color:#e3b34c; letter-spacing:.08em; }
#stanceLabel { color:#8f8272; }
#log { background:#0f0c10; border:1px solid #2a2228; border-radius:3px; color:#a89a86; }
#log .drop { color:#e3b34c; }
/* 掛け軸ドロップ */
#dropCard {
  background: linear-gradient(180deg,#201a24,#161119);
  border:1px solid #c9a44d55; border-radius:2px; position:relative;
}
#dropCard::before, #dropCard::after {
  content:''; position:absolute; left:-12px; right:-12px; height:11px;
  background:linear-gradient(180deg,#6a5030,#3a2a16);
  border-radius:6px; box-shadow:0 2px 5px #000b;
}
#dropCard::before { top:-7px; }
#dropCard::after { bottom:-7px; }
#dropCard .dname { font-weight:800; letter-spacing:.12em; }
#dropCard .dline { color:#cdb4d8; }
/* リザルト＝成績の書 */
#resultBox {
  background: linear-gradient(180deg,#201a24,#161119);
  border:1px solid #e3b34c; border-radius:2px;
}
#resultBox h2 { color:#e3b34c; border:none; letter-spacing:.1em; }
#resultBox button { font-family:inherit; border-radius:3px; }
#resultBox button.primary {
  background:linear-gradient(180deg,#7a2517,#521a0f);
  border-color:#b8542e; color:#ffe1b0;
}
/* 式札一覧 */
.card-row {
  background: linear-gradient(180deg,#191420,#141018);
  border:1px solid #3a3040; border-radius:3px;
}
.card-row.equipped { border-color:#c9a44d; box-shadow: inset 0 0 0 1px #c9a44d33; }
.card-row button {
  background:#241d2c; border:1px solid #55446a; color:#d8cdea; border-radius:3px; font-family:inherit;
}
.rar { border-radius:2px; }
/* 強化・図鑑 */
.up-row { border-bottom:1px solid #241f26; }
.up-row button {
  background:linear-gradient(180deg,#2a2118,#1d1710);
  border:1px solid #6a5330; color:#e3cf9e; border-radius:3px; font-family:inherit;
}
.zukan-cell { background:#161119; border:1px solid #302838; border-radius:3px; }
.zukan-cell.got { color:#e3b34c; border-color:#c9a44d88; background:#221a24; }
footer { color:#5f5548; letter-spacing:.15em; }


/* ===== 元ブロック3 ===== */

/* ===== v1.2 OTT型プレイ画面——一枚の野原 ===== */
#enemyArea {
  display:block; height:400px; padding:0; overflow:hidden;
  border:1px solid #3a3028; border-radius:6px;
  box-shadow: inset 0 0 60px 24px rgba(0,0,0,.75), inset 0 0 200px 60px rgba(0,0,0,.35);
}
#enemyArea::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:9;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px);
  border-radius:6px;
}
/* HUD */
#hudCoins {
  position:absolute; top:10px; left:12px; z-index:8;
  font-size:15px; color:#ffd97a; font-weight:800; text-shadow:0 1px 3px #000;
}
#hudCenter {
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:8;
  width:220px; text-align:center;
}
.hudlabel { font-size:10px; letter-spacing:.25em; color:#cfc4ae; text-shadow:0 1px 2px #000; margin-top:2px; }
.hudbar { height:9px; border:1px solid #000; box-shadow:0 1px 3px #0009; }
#hudFloor {
  position:absolute; top:8px; right:12px; z-index:8; text-align:right;
  font-size:17px; font-weight:800; color:#e8dcc0; letter-spacing:.12em; text-shadow:0 1px 3px #000;
}
#hudFloor small { display:block; font-size:11px; color:#c9b68a; letter-spacing:.2em; }
/* （戦場左下の立ち絵はユーザー判断で廃止） */
#dpsLabel {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:8;
  font-size:13px; letter-spacing:.3em; color:#8f8272; text-shadow:0 1px 2px #000;
}
/* 野に立つ鬼 */
.oni {
  position:absolute; transform:translate(-50%,-50%);
  width:80px; text-align:center; cursor:pointer; z-index:3;
  transition: transform .05s;
}
.oni .oface { font-size:32px; line-height:1.05; pointer-events:none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.boss .oface { font-size:62px; }
.oni .obar { height:5px; width:52px; margin:2px auto 0; border-radius:3px; background:#0a080c; border:1px solid #000; overflow:hidden; pointer-events:none; }
.oni .obar > div { height:100%; background:linear-gradient(90deg,#c03050,#e06080); }
.oni .oname { font-size:10px; color:#e8d8dc; text-shadow:0 1px 2px #000; pointer-events:none; margin-top:1px; }
.oni .role {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:10px; padding:0 7px; border-radius:8px; white-space:nowrap; pointer-events:none;
}
.oni.heal .role { background:#0e4a2e; color:#80e0a0; }
.oni.guard .role { background:#123a5e; color:#80c0f0; }
.oni.gold .role { background:#5a4310; color:#ffe090; }
.oni.gold .oface { filter: drop-shadow(0 0 10px #f0c860) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.boss .role { background:#5a1020; color:#ffb0c0; font-size:11px; }
.oni.hitflash .oface { filter: brightness(2.4) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.poisoned .oface::after { content:'☠'; font-size:13px; }
.oni.dead { opacity:0; transform:translate(-50%,-50%) scale(1.6); transition: all .3s; pointer-events:none; }
.oni.burst { animation: oniburst .34s forwards; }
@keyframes oniburst {
  0% { transform:translate(-50%,-50%) scale(1); filter:brightness(1); opacity:1; }
  30% { transform:translate(-50%,-50%) scale(1.3); filter:brightness(2.6); }
  100% { transform:translate(-50%,-50%) scale(1.7); filter:brightness(3); opacity:0; }
}
#stanceLabel { margin-top:8px; }
/* 正典絵ポートレート */
.portrait {
  width:38px; height:38px; border-radius:4px; object-fit:cover; object-position:top;
  border:1px solid #55446a; vertical-align:middle; margin-right:6px; background:#1a1420;
}
/* ふっかつのじゅもん（v4.3） */
#jumonOut, #jumonIn {
  width:100%; min-height:96px; margin:8px 0; padding:10px 12px;
  background:#14101a; color:#e0d4b8; border:1px solid #4a4034; border-radius:4px;
  font-family:inherit; font-size:15px; line-height:1.9; letter-spacing:.12em;
  word-break:break-all; resize:vertical;
}
#jumonOut:focus, #jumonIn:focus { outline:1px solid #c9a44d; }
/* 図鑑の札絵化（v4.8.1）：切り抜かず、札絵（2:3）を丸ごと見せる。
   第1段の「闇の札」も、それはそれで一枚の絵として成立する */
.zukan-cell .zimg {
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:3px; display:block; margin-bottom:4px; background:#0e0b10;
}
#zukanDetail .zdimg { background:#0e0b10; border-color:#6a5a40; }
/* 栞のすすめボタン（v4.1）：次にすべき行動へカーソルが合っている */
button.suggested {
  outline: 2px solid #ffd060; outline-offset: 2px;
  animation: suggestGlow 1.6s ease-in-out infinite;
}
@keyframes suggestGlow {
  0%, 100% { box-shadow: 0 0 6px #f0c86033; }
  50% { box-shadow: 0 0 20px #f0c860aa; }
}
button:focus-visible { outline: 2px solid #ffd060; outline-offset: 2px; }
/* 大祓カットイン（v4.0）：筆頭の御霊が朱の帯を裂いて現れる */
#cutinOv { position:fixed; inset:0; z-index:60; pointer-events:none; display:none; overflow:hidden; }
#cutinOv.show { display:block; }
#cutinOv .cutband {
  position:absolute; left:-10%; right:-10%; top:30%; height:40%;
  background:linear-gradient(90deg, transparent, rgba(110,18,18,.9) 12%, rgba(70,8,12,.94) 50%, rgba(110,18,18,.9) 88%, transparent);
  transform:skewY(-4deg);
  border-top:2px solid #e3b34c; border-bottom:2px solid #e3b34c;
  animation: cutband 1.3s ease-out forwards;
}
@keyframes cutband {
  0% { opacity:0; transform:skewY(-4deg) scaleX(.15); }
  12% { opacity:1; transform:skewY(-4deg) scaleX(1); }
  85% { opacity:1; }
  100% { opacity:0; }
}
#cutinOv .cutchar {
  position:absolute; top:50%; left:50%; height:66vh; max-width:80vw; object-fit:contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.75));
  animation: cutchar 1.3s cubic-bezier(.16,.84,.3,1) forwards;
}
@keyframes cutchar {
  0% { opacity:0; transform:translate(-72%,-50%) scale(.9); }
  15% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  80% { opacity:1; transform:translate(-48%,-50%) scale(1.03); }
  100% { opacity:0; transform:translate(-43%,-50%) scale(1.06); }
}
/* 札絵サムネ（v4.0）：式札一覧・装備欄は正典の札絵そのものを見せる（縦長カード比率） */
.fudathumb {
  width:56px; height:76px; border-radius:3px; object-fit:cover;
  border:1px solid #6a5a40; vertical-align:middle; margin-right:8px; background:#0e0b10;
  flex:none; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
#dropCard .dportrait {
  height:190px; max-width:100%; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
/* （旧・立ち絵時代の.zimg指定はv4.8.1で削除——札絵の2:3表示は「図鑑の札絵化」ブロック参照） */
/* OTT式・色分け強化ボタン */
.up-row { border:none; border-radius:4px; margin-bottom:7px; padding:9px 10px; }
.up-row.atkLv  { background:linear-gradient(90deg,#571512,#3a0e0c); border-left:4px solid #d4442e; }
.up-row.mpLv   { background:linear-gradient(90deg,#12365e,#0c2440); border-left:4px solid #4a90d6; }
.up-row.critLv { background:linear-gradient(90deg,#4a1252,#320c3a); border-left:4px solid #c050d0; }
.up-row.luckLv { background:linear-gradient(90deg,#524410,#38300c); border-left:4px solid #e3b34c; }
/* ===== v1.5 ブラウザ向けの大画面レイアウト＋表示かぶり修正 ===== */
#app { max-width: 880px; }
#enemyArea { height: 540px; }
#hudCenter { width: 300px; }
.hudlabel { font-size:11px; }
.hudbar { height:11px; }
#hudFloor { font-size:20px; }
#hudCoins { font-size:17px; }
.oni { width:96px; }
.oni .oface { font-size:42px; }
.oni.boss .oface { font-size:80px; }
.oni .obar { width:66px; height:6px; }
.oni .oname { font-size:11px; }
/* 連環ラベルはHUDの下の段へ（FLOOR表示と被らない） */
#chainLabel { top:64px; left:16px; font-size:19px; }
#dpsLabel { font-size:14px; }
.dmg { font-size:19px; }
.dmg.crit { font-size:30px; }
.dmg.overkill { font-size:34px; }
/* リザルトと掛け軸も大画面向けに */
#app { max-width: 1000px; }
#enemyArea { height: 600px; }
#resultBox { width:min(700px, 94vw); padding:42px 40px; max-height:92vh; overflow-y:auto; }
#resultBox h2 { font-size:36px; }
#resultBox .zone { font-size:16px; margin-bottom:14px; }
#resultBox .lead { font-size:18px; margin-bottom:10px; }
#resultBox .spare { font-size:18px; }
#resultBox .rline { font-size:20px; }
#resultBox .rcards { font-size:16px; line-height:2.1; }
#resultBox button { padding:17px; font-size:19px; }
#dropCard { width:min(460px, 92vw); padding:38px 32px; max-height:92vh; overflow-y:auto; }
#dropCard .dportrait { height:320px; }
#dropCard .dname { font-size:30px; }
#dropCard .dline { font-size:17px; }
#dropCard .deff { font-size:15px; line-height:1.9; }
#dropCard .drar { font-size:17px; }
#dropCard .dgoku { font-size:15px; }
#dropCard .dcurse { font-size:15px; }
.rar { font-size:13px; }
/* ===== v1.6 手ざわりパス ===== */
/* 沈む：全ボタン共通の掟（押すと2px沈み、離すと0.1秒で戻る） */
button { transition: transform .1s cubic-bezier(.2,.8,.3,1); }
button:active { transform: translateY(2px); filter: brightness(1.15); }
nav button:active, .mode-btn:active { transform: translateY(2px); }
/* 鬼も押した瞬間わずかに応える。移動はなめらかに */
.oni { transition: left .22s linear, top .22s linear, transform .06s; }
.oni:active { transform: translate(-50%,-50%) scale(.93); }
.oni.dead { transition: all .3s; }
/* ===== v1.9 攻撃ごとの固有エフェクト ===== */
.fx {
  position:absolute; left:50%; top:42%; pointer-events:none; z-index:6;
  transform:translate(-50%,-50%);
}
/* 爆裂：橙のリングが弾け広がる */
.fx-burst {
  width:74px; height:74px; border-radius:50%;
  border:3px solid #ff9040; box-shadow:0 0 20px #ff7020aa;
  animation: fxburst .45s ease-out forwards;
}
@keyframes fxburst {
  0% { transform:translate(-50%,-50%) scale(.2); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.7); opacity:0; }
}
/* 旋回：鎖鎌の回転弧 */
.fx-cleave {
  width:96px; height:96px; border-radius:50%;
  border:3px solid #ffd060; border-left-color:transparent; border-bottom-color:transparent;
  animation: fxspin .4s linear forwards;
}
@keyframes fxspin {
  0% { transform:translate(-50%,-50%) rotate(0deg) scale(.4); opacity:1; }
  100% { transform:translate(-50%,-50%) rotate(320deg) scale(1.35); opacity:0; }
}
/* 毒：緑の毒泡がぷくぷく */
.fx-poison {
  width:9px; height:9px; border-radius:50%;
  background:#80e060;
  box-shadow: -9px -8px 0 -2px #60c050, 9px -5px 0 -3px #a0e080;
  animation: fxpoison .6s ease-out forwards;
}
@keyframes fxpoison {
  0% { transform:translate(-50%,-50%) translateY(0); opacity:.9; }
  100% { transform:translate(-50%,-50%) translateY(-24px); opacity:0; }
}
/* 唄：音符が舞う */
.fx-note {
  font-size:17px; color:#80c0f0; text-shadow:0 1px 3px #000;
  animation: fxnote .6s ease-out forwards;
}
@keyframes fxnote {
  0% { transform:translate(-50%,-50%) translateY(0) rotate(0); opacity:1; }
  100% { transform:translate(-50%,-50%) translateY(-28px) rotate(18deg); opacity:0; }
}
/* 掃射：金のかすめ斬り */
.fx-graze {
  width:64px; height:2px;
  background:linear-gradient(90deg, transparent, #ffe090, transparent);
  animation: fxgraze .2s forwards;
}
@keyframes fxgraze {
  0% { transform:translate(-50%,-50%) rotate(18deg) scaleX(.2); opacity:1; }
  100% { transform:translate(-50%,-50%) rotate(18deg) scaleX(1.25); opacity:0; }
}
/* 野原全体のエフェクト */
.fx-field { position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:6px; }
.fx-tide {
  background:linear-gradient(90deg, transparent, rgba(96,160,255,.22), transparent);
  animation: fxtide .6s ease-out forwards;
}
@keyframes fxtide { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
.fx-flash { background:#fff; animation: fxflash .3s forwards; }
@keyframes fxflash { 0% { opacity:.5; } 100% { opacity:0; } }
/* ===== v2.0 ディアブロ風レア度色分け＋選択売却 ===== */
.txt-r0 { color:#c8c8c8; }
.txt-r1 { color:#8ae6aa; }
.txt-r2 { color:#8ac4f2; }
.txt-r3 { color:#ffb060; }
.card-row .eff.txt-r0 { color:#a8a8a8; }
.card-row .eff.txt-r1 { color:#79c996; }
.card-row .eff.txt-r2 { color:#79aed6; }
.card-row .eff.txt-r3 { color:#e0a058; }
.selRar, #sellSelBtn {
  padding:6px 12px; font-size:12px; border-radius:3px; cursor:pointer; font-family:inherit;
  border:1px solid #4a3c50; background:#1c1720; color:#d5c9ae;
}
.selRar.on { border-color:#e3b34c; color:#ffd97a; background:#2a2114; }
#sellSelBtn { border-color:#6a5330; background:#1d1710; color:#e3cf9e; }
#sellSelBtn:disabled { opacity:.4; cursor:default; }
.card-row.sel { border-color:#8ac4f2; box-shadow: inset 0 0 0 1px #8ac4f244; }
.selBox {
  width:17px; height:17px; accent-color:#c9a44d; cursor:pointer; flex:none;
}
.wpn { font-size:12px; margin-left:2px; }
/* カーソル位置に出す一閃（v2.4：攻撃はカーソル中心） */
.slashfx.at-point { width:130px; margin-left:-65px; margin-top:-2px; }
/* 湧き（v2.3）：地から染み出すように現れる */
.oni.spawn { animation: oniSpawn .4s ease-out; }
@keyframes oniSpawn { from { opacity:0; filter:brightness(2.5); } }
/* 攻撃範囲の視覚化（v2.2）：ホバーで「この鬼を狙うと届く範囲」を形で見せる */
.rangefx { position:absolute; pointer-events:none; z-index:4; transform:translate(-50%,-50%); }
.range-single { /* 実寸はJSが範囲+%から算出して指定する */
  border-radius:50%;
  border:2px dashed #e04a3aaa;
  box-shadow: 0 0 10px #e04a3a33, inset 0 0 10px #e04a3a22;
}
.range-circle { /* 実寸はJS指定 */
  border-radius:50%;
  border:2px dashed #b48ae688; background:rgba(180,138,230,.06);
}
.range-crossbar-h { width:100%; height:16%; left:50% !important; background:rgba(255,144,64,.10); border-top:1px dashed #ff904066; border-bottom:1px dashed #ff904066; }
.range-crossbar-v { width:20%; height:100%; top:50% !important; background:rgba(255,144,64,.10); border-left:1px dashed #ff904066; border-right:1px dashed #ff904066; }
.range-row { width:100%; height:16%; left:50% !important; background:rgba(255,217,96,.10); border-top:1px dashed #ffd06066; border-bottom:1px dashed #ffd06066; }
.oni.inRange { filter: brightness(1.6) drop-shadow(0 0 6px #ffffff66); }
/* 爆裂の十字帯（発動時） */
.fx-crossbar-h { width:640px; height:34px; background:linear-gradient(90deg,transparent,rgba(255,144,64,.35),transparent); animation: fxflashbar .4s forwards; }
.fx-crossbar-v { width:44px; height:520px; background:linear-gradient(180deg,transparent,rgba(255,144,64,.35),transparent); animation: fxflashbar .4s forwards; }
@keyframes fxflashbar { 0% { opacity:1; } 100% { opacity:0; } }
/* ===== v3.6 画面いっぱいパス：ブラウザの幅を使い切り、文字ももう一段大きく ===== */
#app { max-width: min(1520px, 96vw); }
#enemyArea { height: max(600px, 66vh); }  /* 野原も縦に伸ばす（正円判定はareaAspect()で追従） */
nav button { font-size:19px; padding:14px 0; }
h2 { font-size:20px; }
h3 { font-size:18px; }
.challenge-btn { font-size:21px; padding:18px; }
.challenge-btn small { font-size:16px; }
.card-row { font-size:17px; }
.card-row .eff { font-size:15.5px; }
.card-row .curse { font-size:15px; }
.card-row button { font-size:16px; padding:10px 16px; }
.rar, .cursebadge { font-size:15px; }
.el { font-size:14px; }
.up-row { font-size:18px; padding:12px 0; }
.up-row button { font-size:16px; padding:12px 20px; }
.hint { font-size:16px; }
.statline { font-size:17px; }
.farm-info { font-size:16px; }
#stanceLabel { font-size:16px; }
#mpBox { font-size:16px; }
#log { font-size:15px; height:120px; }
details { font-size:16px; }
details summary { font-size:17px; }
header .title { font-size:26px; }
header .title small { font-size:14px; }
header .res { font-size:17px; }
footer { font-size:14px; }
.hudlabel { font-size:13px; }
#hudFloor { font-size:26px; }
#hudFloor small { font-size:13px; }
#dpsLabel { font-size:16px; }
.oni .oname { font-size:13px; }
.mode-btn, #hissatsuBtn { font-size:16px; }
.zukan-cell { font-size:14px; padding:12px 2px; }
/* 栞の導き（v3.8）：道しるべの御霊が、必要なときにだけ語りかける */
#tutBox {
  display:flex; gap:20px; align-items:flex-start;
  width:min(680px, 94vw); max-height:90vh; overflow-y:auto;
  padding:30px 28px; border-radius:2px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,#221c26,#171219);
  border:1px solid #e3b34c; box-shadow:0 0 40px #f0c86044;
  animation: cardin .35s;
}
#tutBox .tface { font-size:76px; flex:none; line-height:1.2; filter:drop-shadow(0 4px 8px #000); }
/* 栞の円窓ポートレート（v4.0.1）：立ち絵もちび絵も無いが、正典シート右上の
   円形ポートレートをCSSで切り出して顔にする（ホットリンクなので素材の再配布にはあたらない） */
#tutBox .tportrait {
  width:110px; height:110px; border-radius:50%; overflow:hidden; position:relative; flex:none;
  border:2px solid #e3b34c; box-shadow:0 0 14px #f0c86055; background:#f5f2ea;
}
#tutBox .tportrait img { position:absolute; width:385px; max-width:none; left:-227px; top:-9px; }
#tutBox .tbody { flex:1; }
#tutBox .tname { font-size:16px; color:#c9b68a; letter-spacing:.25em; margin-bottom:8px; }
#tutBox .ttext { font-size:17.5px; line-height:2.1; color:#eee6d4; }
#tutBox .ttap { font-size:13px; color:#8f8272; margin-top:14px; text-align:right; }
/* 図鑑の詳細（v3.5）：御霊をクリックすると開く一枚 */
#zukanDetail {
  width:min(520px, 94vw); max-height:92vh; overflow-y:auto;
  text-align:center; padding:34px 30px; border-radius:2px;
  background:linear-gradient(180deg,#201a24,#161119);
  border:1px solid #e3b34c; box-shadow:0 0 40px #f0c86044;
  animation: cardin .4s; cursor:pointer;
}
#zukanDetail .zdimg { height:300px; max-width:100%; object-fit:contain; border:1px solid #6a5a40; border-radius:4px; background:#fff; }
#zukanDetail .zdface { font-size:96px; line-height:1.4; }
#zukanDetail .zdname { font-size:30px; font-weight:800; color:#ffd97a; margin-top:8px; letter-spacing:.1em; }
#zukanDetail .zdtag { font-size:15px; color:#c9b68a; margin:4px 0 10px; }
#zukanDetail .zdflavor { font-size:16px; color:#d0c4e0; line-height:1.8; }
#zukanDetail .zdline { font-size:17px; color:#e8d8b0; margin:10px 0; }
#zukanDetail .zdrow { font-size:15px; color:#cfc4ae; line-height:2; border-top:1px dashed #4a4034; margin-top:10px; padding-top:10px; text-align:left; }
#zukanDetail .zdgoku { font-size:15px; color:#ff9060; font-weight:bold; }
#zukanDetail .zdtap { font-size:13px; color:#8f8272; margin-top:12px; }
.zukan-cell { cursor:pointer; transition:transform .08s; }
.zukan-cell:hover { transform:translateY(-2px); }
/* ===== v3.5 可読性パス：小さすぎる文字を全体的に引き上げる =====
   基準：本文15px以上／補足13px以上／戦場内ラベル12px以上 */
h3 { font-size:15px; }
.card-row { font-size:15px; }
.card-row .eff { font-size:13.5px; line-height:1.6; }
.card-row .curse { font-size:13px; }
.card-row button { font-size:14px; }
.rar, .cursebadge { font-size:13px; }
.el { font-size:12.5px; padding:0 6px; }
.up-row { font-size:15px; }
.up-row button { font-size:14px; padding:10px 16px; }
.hint { font-size:14px; }
.statline { font-size:15px; line-height:2; }
.challenge-btn small { font-size:14px; }
.farm-info { font-size:14px; }
#stanceLabel { font-size:14px; }
#mpBox { font-size:14px; }
#log { font-size:13.5px; height:100px; }
details { font-size:14px; line-height:1.9; }
header .title small { font-size:13px; }
footer { font-size:13px; }
.hudlabel { font-size:12px; }
.oni .oname { font-size:12px; }
.oni .role { font-size:11px; }
.wpn { font-size:13px; }
/* 銘の引きの良さ（v4.5）：振れ幅の上澄み（★）だけ金色で目立たせる。下振れの薄色表示は廃止 */
.mei-high { color:#ffd75e !important; text-shadow:0 0 6px #ffb03366; font-weight:bold; }
/* 鬼の姿は五行ごとに統一（v2.7）：属性色のオーラをまとう */
.oni .oface { position:relative; }
/* 鬼の絵（v4.4）: img/oni/{五行}.png を置くと絵文字から自動で切り替わる */
.oni .oniimg { height:68px; width:auto; max-width:92px; object-fit:contain; vertical-align:bottom; display:none; }
.oni .oface.hasimg .oniimg { display:inline-block; }
.oni .oface.hasimg .oniemoji { display:none; }
.oni.boss .oniimg { height:120px; max-width:150px; }
.oni .rolemark {
  position:absolute; right:-2px; bottom:-2px; font-size:16px;
  filter: drop-shadow(0 1px 2px #000);
}
.oni.e-fire  .oface { filter: drop-shadow(0 0 7px #ff7060cc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.e-water .oface { filter: drop-shadow(0 0 7px #60a0ffcc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.e-wood  .oface { filter: drop-shadow(0 0 7px #60c080cc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.e-metal .oface { filter: drop-shadow(0 0 7px #ffd060cc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.e-earth .oface { filter: drop-shadow(0 0 7px #c09060cc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.e-none  .oface { filter: drop-shadow(0 0 7px #d8d8e8cc) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
/* 宝・被弾・射程内の演出は属性オーラより優先（状態が読めなくなるのを防ぐ） */
.oni.gold .oface,
.oni.hitflash .oface,
.oni.inRange .oface { filter: brightness(1.6) drop-shadow(0 0 10px #ffffff88) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.gold .oface { filter: drop-shadow(0 0 12px #f0c860) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.oni.hitflash .oface { filter: brightness(2.4) drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
/* 五行別ダメージカラー（v2.1・無属性含む） */
.dmg.el-fire  { color:#ff8570; }
.dmg.el-water { color:#7ab4ff; }
.dmg.el-wood  { color:#7ad494; }
.dmg.el-metal { color:#ffd970; }
.dmg.el-earth { color:#d4a674; }
.dmg.el-none  { color:#e8e8f2; }
/* 杖の範囲打：藤色の魔力の波紋（爆裂の橙リングとは別物） */
.dmg.staff { color:#c9a6f2; font-size:16px; }
.fx-staffring {
  width:58px; height:58px; border-radius:50%;
  border:2px solid #b48ae6;
  box-shadow: 0 0 12px #9a6ad688, inset 0 0 8px #b48ae644;
  animation: fxstaff .32s ease-out forwards;
}
@keyframes fxstaff {
  0% { transform:translate(-50%,-50%) scale(.3); opacity:.95; }
  100% { transform:translate(-50%,-50%) scale(1.25); opacity:0; }
}

/* ===== 図鑑詳細の横長レイアウト（v4.11）：絵姿を大きく、左絵・右情報 ===== */
#zukanDetail {
  width: min(960px, 94vw);
  display: flex; gap: 30px; align-items: flex-start;
  text-align: left; padding: 32px 34px;
  flex-wrap: wrap;  /* 画面が狭ければ縦積みに戻る */
}
#zukanDetail .zdleft { flex: none; width: min(320px, 80vw); margin: 0 auto; text-align: center; }
#zukanDetail .zdleft .zdimg {
  width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover;
  border: 1px solid #6a5a40; border-radius: 4px; background: #0e0b10;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
#zukanDetail .zdright { flex: 1; min-width: 280px; }
#zukanDetail .zdname { font-size: 34px; margin-top: 0; }
#zukanDetail .zdtag { font-size: 16px; margin: 6px 0 12px; }
#zukanDetail .zdflavor { font-size: 17px; }
#zukanDetail .zdline { font-size: 18px; }
#zukanDetail .zdrow { font-size: 15.5px; }
#zukanDetail .zdtap { text-align: right; }
#zukanDetail .zdface { font-size: 120px; }
#zukanDetail .zdunknown { width: 100%; text-align: center; }
#zukanDetail .zdunknown .zdface { font-size: 72px; }
#zukanDetail .zdunknown .zdtap { text-align: center; }

/* ===== 図鑑詳細：絵姿の段チップ（v4.20）——進めた段を見返せる ===== */
#zukanDetail .zdstages { display:flex; justify-content:center; gap:5px; margin-top:10px; flex-wrap:wrap; }
#zukanDetail .zdstage {
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  border-radius: 50%; font-size: 13px; user-select: none;
  border: 1px solid #4a3c50; color: #6a5a50; background: #16121a;
}
#zukanDetail .zdstage.zopen { border-color: #8a7d5e; color: #d5c9ae; cursor: pointer; }
#zukanDetail .zdstage.zopen:hover { border-color: #e3b34c; color: #ffd97a; }
#zukanDetail .zdstage.zcur { border-color: #e3b34c; color: #14101c; background: #e3b34c; font-weight: bold; }

/* ===== 必殺ゲージのHUD化（v5.0）：ゲージは巫力の下、ボタンは野原の下 ===== */
#hissatsuHud #hissatsuBar { height: 11px; flex: none; }
#hissatsuHud.full .hudlabel { color: #ffd97a; text-shadow: 0 0 8px #e3b34c88; }
#hissatsuHud.full #hissatsuBar { box-shadow: 0 0 10px #e3b34c88; }
#hissatsuWrap #hissatsuBtn { width: 100%; }

/* ===== 砲火の光帯（v5.1）：十文字（縦横）と交叉（斜めバツ） ===== */
.beamfx {
  position: absolute; pointer-events: none; z-index: 6;
  background: linear-gradient(90deg, transparent, #ffe9a855 12%, #ffffff88 50%, #ffe9a855 88%, transparent);
  animation: beamfx .5s ease-out forwards;
}
.beamfx.beam-vert {
  background: linear-gradient(180deg, transparent, #ffe9a855 12%, #ffffff88 50%, #ffe9a855 88%, transparent);
}
@keyframes beamfx {
  0% { opacity: 0; filter: brightness(2.2); }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== v5.2: クリック＝大祓の合図／画像ドラッグ禁止 ===== */
#hissatsuReady {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  z-index: 9; pointer-events: none; display: none; white-space: nowrap;
  font-size: 20px; font-weight: bold; color: #ffd97a; text-shadow: 0 2px 8px #000;
  background: #2a2114cc; border: 1px solid #e3b34c; border-radius: 6px; padding: 8px 18px;
}
#hissatsuReady.show { display: block; animation: hissready 1.1s ease-in-out infinite; }
@keyframes hissready {
  0%, 100% { opacity: .85; box-shadow: 0 0 8px #e3b34c66; }
  50% { opacity: 1; box-shadow: 0 0 22px #e3b34ccc; }
}
img { -webkit-user-drag: none; user-select: none; }

/* ===== 敗北時の獣の勝ち誇り（v5.4）：帯の獣が大きく現れてひとこと言う ===== */
#beastOv {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none;
  flex-direction: column; align-items: center; justify-content: center;
}
#beastOv.show { display: flex; animation: beastpop 2.6s ease forwards; }
#beastOv .beastimg {
  height: 54vh; max-width: 80vw; object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.85));
  animation: beastbounce .5s cubic-bezier(.2,.8,.3,1.4);
}
#beastOv .beastline {
  margin-top: 12px; font-size: 30px; font-weight: bold; color: #fff;
  text-shadow: 0 2px 10px #000; background: #000000aa;
  border: 1px solid #ffffff33; border-radius: 12px; padding: 10px 28px;
}
@keyframes beastpop { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes beastbounce {
  0% { transform: scale(.5) translateY(40px); }
  60% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ===== v5.4.3: 獣の勝ち誇りを栞式の対話枠に（旧・巨大表示の指定を上書き） ===== */
#beastOv {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center;
  background: #000000a8; pointer-events: auto; cursor: pointer;
}
#beastOv.show { display: flex; animation: none; opacity: 1; }
#beastBox {
  display: flex; gap: 20px; align-items: center;
  width: min(680px, 92vw);
  background: #1a1410; border: 1px solid #a06030; border-radius: 8px;
  padding: 24px 28px; box-shadow: 0 0 50px #000d;
  animation: beastboxin .28s cubic-bezier(.2,.8,.3,1.2);
}
#beastBox .bportrait { width: 150px; height: auto; flex: none; filter: drop-shadow(0 4px 12px #0009); }
#beastBox .bbody { flex: 1; min-width: 0; text-align: left; }
#beastBox .bname { font-size: 15px; letter-spacing: .18em; color: #e0a878; margin-bottom: 8px; }
#beastBox .btext { font-size: 21px; font-weight: bold; line-height: 1.8; color: #f0e8d8; }
#beastBox .btap { margin-top: 14px; text-align: right; font-size: 13px; color: #8f8272; }
@keyframes beastboxin {
  0% { opacity: 0; transform: translateY(16px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}