:root {
  color-scheme: dark;
  --bg: #16181f; --panel: #21242e; --ink: #f2f0ea; --muted: #b4b6c4;
  --gold: #ffd23f; --attack: #ff7a59; --skill: #5ad1a9; --power: #c78bff;
  --hp: #e3524f; --block: #5aa9ff;
  font-family: "Meiryo", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; touch-action: manipulation; }
button, input { font: inherit; }
input, select, textarea { font-size: 16px; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: var(--muted); }
h1, h2, h3, h4, p { margin: 0; }
img { image-rendering: pixelated; }
.app { width: 100%; max-width: 430px; margin: auto; min-height: 100svh; }
.button { border: 1px solid transparent; border-radius: 10px; padding: 14px 12px; min-height: 48px; font-size: 14px; font-weight: 700; }
.primary { background: var(--gold); color: #302707; }
.secondary { background: #303440; color: var(--ink); border-color: #484c5a; }
.wide { width: 100%; margin-top: 12px; }
.text-button { background: transparent; border: 0; color: var(--muted); min-height: 44px; padding: 8px; }
.icon-button { border: 0; border-radius: 8px; background: transparent; min-width: 36px; min-height: 36px; font-size: 20px; color: var(--muted); }
.muted { color: var(--muted); font-size: 12px; line-height: 1.8; }
.rights-note { font-size: 10px; line-height: 1.8; color: #9ca0b1; margin-top: 18px; }
.hero { position: relative; height: 430px; overflow: hidden; background: #121722; }
.hero > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #16181fe0 64%, var(--bg)); }
.hero-copy { position: absolute; bottom: 22px; left: 20px; right: 20px; z-index: 1; text-align: center; }
.hero-copy h1 { font-family: inherit; font-size: 46px; color: var(--gold); letter-spacing: .25em; text-indent: .25em; line-height: 1.5; text-shadow: 0 2px 12px #000; }
.hero-copy > p:last-child { font-size: 13px; letter-spacing: .1em; }
.eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.title-content { padding: 0 18px 28px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { font-size: 17px; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.pack { position: relative; text-align: left; padding: 0; background: #1e222b; border: 2px solid #444958; border-radius: 10px; overflow: hidden; min-width: 0; }
.pack.on { border-color: var(--pk); box-shadow: 0 0 12px color-mix(in srgb, var(--pk) 12%, transparent); }
.pack > img { width: 100%; height: 94px; object-fit: cover; }
.pack-copy { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.pack-copy strong { color: var(--pk); font-size: 14px; }
.pack-copy small, .pack-count { color: var(--muted); font-size: 10px; }
.pack-check { position: absolute; top: 7px; right: 7px; border: 1px solid var(--pk); border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; color: var(--pk); background: #16181fe0; }
.starter-note { color: var(--gold); font-size: 11px; margin-top: 14px; }
.title-links { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 11px; }
.title-links a { padding: 12px 0; }
.battle-view { padding: max(4px, env(safe-area-inset-top)) 10px 0; }
.battle-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; height: 36px; font-size: 11px; font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 5px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: #494d5b; }
.pips .done { background: var(--skill); }
.pips .current { background: var(--gold); box-shadow: 0 0 8px #ffd23f60; }
.enemy-box { position: relative; border: 1px solid #494a55; border-radius: 12px; padding: 10px 12px; background-position: center 45%; background-size: cover; min-height: 210px; }
.enemy-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.enemy-heading h1 { font-size: 17px; letter-spacing: .12em; }
.enemy-kind { font-size: 10px; border: 1px solid #737184; border-radius: 4px; padding: 2px 5px; color: #d1ced9; }
.portrait-region { position: relative; height: 96px; margin: 2px -12px 0; overflow: hidden; }
#enemy-sprite { display: block; width: 96px; height: 96px; margin: 0 auto; object-fit: contain; }
.intent { text-align: center; color: var(--gold); font-size: 12px; line-height: 1.8; margin-bottom: 4px; }
.intent.attack { color: #ff9d83; }
.hp-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 10px; font-variant-numeric: tabular-nums; margin: 3px 0; }
.block-label { color: #8fc6ff; white-space: nowrap; }
.hpbar { height: 6px; border-radius: 4px; background: #0f121b; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: var(--hp); transition: width .2s; }
.player-box { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.energy { flex: 0 0 65px; width: 65px; height: 65px; border: 2px solid var(--gold); border-radius: 50%; background: #332d1b; text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative; }
#energy-value { font-size: 28px; font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.energy small { font-size: 8px; margin-top: 2px; }
.energy-preview { font-size: 8px; line-height: 1.3; color: #efdd9a; opacity: .8; }
.player-health { flex: 1; min-width: 0; }
.player-health > .hp-label:first-child { font-size: 12px; margin-bottom: 7px; }
#player-bar { background: var(--skill); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.tags:not(:empty) { margin-top: 4px; }
.status { font-size: 9px; padding: 2px 4px; border: 1px solid #667190; border-radius: 4px; background: #202632e0; }
.status.negative { border-color: #ff8c6b; color: #ffae95; }
.log { min-height: 24px; padding: 5px 0; font-size: 10px; line-height: 1.5; color: #d8d8e0; overflow-wrap: anywhere; }
.relics { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.relic-pill { padding: 3px 6px; min-height: 28px; font-size: 9px; border: 1px solid #8e773d; border-radius: 5px; color: #ffdc83; background: #2a251d; }
.empty-relics { font-size: 9px; color: #9599a8; }
.hand-heading { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; margin-top: 6px; }
.hand-heading small { font-size: 9px; color: var(--muted); }
.hand { display: flex; align-items: flex-start; gap: 14px; width: calc(100% + 20px); margin-left: -10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 25px 23px 25px; scrollbar-width: thin; scrollbar-color: #665636 #16181f; }
.hand-slot { flex: 0 0 96px; scroll-snap-align: center; position: relative; }
.hand-slot:has(.selected) { z-index: 2; }
.card { --accent: var(--gold); position: relative; display: flex; flex-direction: column; align-items: center; width: 96px; min-height: 200px; border: 1px solid var(--accent); border-radius: 6px; padding: 30px 8px 12px; background-color: #1a1e28; background-image: var(--frame); background-size: 100% 100%; box-shadow: 0 4px 12px #0007; text-align: center; color: var(--ink); gap: 4px; flex-shrink: 0; transition: transform .16s, opacity .16s, box-shadow .16s; }
.card.attack { --accent: var(--attack); }
.card.skill { --accent: var(--skill); }
.card.power { --accent: var(--power); }
.card.selected { transform: scale(1.25); z-index: 3; box-shadow: 0 0 15px color-mix(in srgb,var(--accent) 40%,transparent); }
.card.cant { opacity: .5; }
.card.cant.selected { opacity: .85; }
.card-cost { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; display: grid; place-items: center; background: #343028; color: #ffe69d; border: 1px solid #b29b64; border-radius: 50%; font-size: 13px; font-weight: 800; }
.pack-dot { position: absolute; top: 12px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--pk); }
.card-art { display: flex; align-items: center; justify-content: center; height: 64px; width: 100%; flex-shrink: 0; }
.word-art { width: 64px; height: 64px; object-fit: contain; }
.work-art { width: 100%; height: auto; max-height: 58px; object-fit: contain; }
.portrait { height: 65px; width: auto; max-width: 100%; object-fit: contain; }
.reading-symbol { color: var(--accent); font-size: 38px; line-height: 1; }
.card-name { display: block; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; width: 100%; }
.card-author { color: #c0c0cd; font-size: 8px; line-height: 1.2; }
.card-text { font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; width: 100%; }
.card-tier { margin-top: auto; padding: 2px 5px; line-height: 1.2; background: #1a1e28; border-radius: 3px; color: var(--accent); font-size: 8px; }
.battle-actions { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: #16181ff5; z-index: 4; }
.battle-actions .button:first-child { flex: 1; }
.battle-actions .button:last-child { flex: 2; }
dialog { width: min(100%,430px); max-width: 100%; max-height: 90svh; margin: auto auto 0; border: 1px solid #535463; border-radius: 16px 16px 0 0; padding: 0; background: var(--panel); color: var(--ink); overflow: hidden; }
dialog::backdrop { background: #080b13bf; }
.sheet { padding: 16px 14px max(22px, env(safe-area-inset-bottom)); max-height: 89svh; overflow-y: auto; overscroll-behavior: contain; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sheet-header h2 { font-size: 19px; line-height: 1.5; letter-spacing: .03em; }
.sheet h3 { font-size: 14px; margin: 18px 0 8px; }
.sheet h4 { font-size: 12px; color: var(--muted); margin: 14px 0 10px; }
.card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; justify-items: center; }
.card-grid .card { width: 100%; min-height: 226px; padding: 32px 12px 14px; }
.card-grid .card-name { font-size: 13px; }
.card-grid .card-text { font-size: 12px; }
.card-grid .card-author { font-size: 10px; }
.card-grid .card-tier { font-size: 10px; }
.card-grid .card-art { height: 70px; }
.card-grid .word-art { width: 64px; height: 64px; }
.card-grid .portrait { height: 80px; }
.card-grid .card:only-child { grid-column: 1 / -1; width: 160px; }
/* 報酬の3枚は横一列。カードは詳細を開くボタン（data-context="reward"）なので context で選ぶ。 */
.card-grid:has([data-context="reward"]) { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.card-grid [data-context="reward"] { padding: 30px 7px 12px; min-height: 220px; }
.card-grid [data-context="reward"] .card-name { font-size: 11px; }
.card-grid [data-context="reward"] .card-text { font-size: 10px; }
.card-grid [data-context="reward"] .card-author { font-size: 8px; }
.card-grid [data-context="reward"] .card-art { height: 64px; }
.card-grid [data-context="reward"] .word-art { width: 64px; height: 64px; }
/* 名言の絵の枠も他のカードと同じ高さにして、名前・本文の位置を人物カードと揃える。 */
.quote .card-name { color: var(--gold); }
.quote .card-text { line-height: 1.7; }
.rest-option { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 20px 14px; margin-top: 14px; text-align: left; background: #181c25; border: 1px solid #77663e; border-radius: 10px; }
.rest-option strong { color: var(--gold); }
.rest-option span { font-size: 12px; color: var(--muted); }
fieldset { border: 1px solid #555b6e; border-radius: 8px; padding: 12px; }
legend { font-size: 12px; color: var(--gold); }
.setting-options { display: flex; gap: 24px; margin: 6px 0; }
.setting-options label { display: flex; gap: 5px; align-items: center; min-height: 36px; }
input { accent-color: var(--gold); }
input[type="range"] { width: 100%; min-height: 44px; }
.volume-label { display: block; margin-top: 22px; }
.volume-label span { float: right; color: var(--gold); }
.storage-note { color: #ffae95; margin-top: 8px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 12px 0; }
.stats-table th, .stats-table td { text-align: right; padding: 10px 4px; border-bottom: 1px solid #444958; }
.stats-table th:first-child { text-align: left; }
.catalog-pack > h3 { font-size: 20px; }
.catalog-pack > h3 small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.help-list { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.9; }
.help-list li { margin-bottom: 10px; }
.result-stats { display: flex; justify-content: space-between; gap: 8px; padding: 18px 0; margin: 14px 0; border-top: 1px solid #444958; border-bottom: 1px solid #444958; }
.result-stats > span { font-size: 10px; color: var(--muted); }
.result-stats strong { display: block; font-size: 20px; color: var(--gold); margin-top: 6px; }
.top-cards { padding-left: 20px; font-size: 13px; line-height: 2; }
.top-cards b { float: right; color: var(--gold); }
details { margin-top: 18px; }
summary { padding: 12px 0; cursor: pointer; font-size: 13px; color: var(--muted); }
.cutin { position: absolute; top: 0; left: 8px; width: calc(100% - 16px); height: 100%; pointer-events: none; z-index: 8; display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow: hidden; background: linear-gradient(90deg,#33270aef,#8b6815e0,#33270a70); border-top: 1px solid #ffd23fa0; border-bottom: 1px solid #ffd23fa0; animation: cutin .9s ease-out forwards; }
.cutin-sprite { flex: 0 0 42px; height: calc(100% - 6px); width: 42px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.cutin > div { flex: 1; min-width: 0; }
.cutin strong { display: block; color: var(--gold); font-size: 22px; line-height: 1.5; overflow-wrap: anywhere; }
.cutin small { display: block; font-size: 10px; line-height: 1.2; color: #fff1c1; }
.cutin.small strong { font-size: 16px; line-height: 1.25; }
.cutin.small { background: linear-gradient(90deg,#33270acc,#8b681599,#33270a30); }
.damage-pop { position: absolute; left: 50%; top: 44%; color: #fff; font-size: 28px; font-weight: 900; text-shadow: 0 2px 4px #000; pointer-events: none; z-index: 9; animation: damage-rise .8s forwards; }
.damage-pop.blocked { color: #8fc6ff; font-size: 20px; }
.hit { animation: hit .3s; }
.defeated { animation: defeated .6s forwards; }
@keyframes cutin { 0% { transform: translateX(-6px); opacity: 0; } 15%,75% { transform: none; opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }
@keyframes damage-rise { from { transform: translate(-50%,0) scale(1.2); opacity: 1; } to { transform: translate(-50%,-40px); opacity: 0; } }
@keyframes hit { 25% { transform: translateX(-5px); filter: brightness(2); } 75% { transform: translateX(5px); filter: brightness(1.5); } }
@keyframes defeated { to { transform: scale(.2); opacity: 0; } }
@media (max-height: 680px) { .hero { height: 360px; } .enemy-box { min-height: 190px; } .energy { width: 58px; height: 58px; flex-basis: 58px; } .card { min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .defeated { opacity: 0; } }
.map-view { padding: 16px 12px 28px; }
.map-view h1 { font-size: 20px; margin: 0; }
.map-status { color: var(--gold); font-size: 14px; font-weight: bold; }
.journey-map { position: relative; width: 100%; height: 770px; margin: 18px 0; }
.journey-map > svg { position: absolute; width: 100%; height: 100%; }
/* 道は墨の点線。まだ通れない道は控えめに、通れる道は金で流れ、通った道は翠で示す。 */
.journey-map line { stroke: #8a8070; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; }
.journey-map line.available { stroke: var(--gold); stroke-width: 3.5; stroke-dasharray: 6 6; opacity: 1; filter: drop-shadow(0 0 3px #ffd23f99); animation: map-march 1s linear infinite; }
.journey-map line.visited { stroke: #8bc9b0; stroke-width: 3; stroke-dasharray: none; opacity: .9; }
@keyframes map-march { to { stroke-dashoffset: -12; } }
.map-nodes { position: relative; display: grid; height: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(7,110px); align-items: center; gap: 0 6px; }
.map-node { position: relative; min-width: 0; min-height: 72px; padding: 0 2px; border: 0; background: transparent; color: #d6d1dd; font-family: inherit; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* 地点は「丸い印＋名札」。印の縁の色で種類を見分けられるようにする。 */
.map-node-medal { --ring: #6d6577; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2c2f3d, #15171f); border: 2px solid var(--ring); box-shadow: 0 3px 8px #000a; transition: transform .2s; }
.map-node-icon { width: 27px; height: auto; }
.type-elite .map-node-medal { --ring: #c0584e; }
.type-event .map-node-medal { --ring: #9a7bd0; }
.type-camp .map-node-medal { --ring: #c98a3b; }
.type-boss .map-node-medal { --ring: var(--gold); width: 58px; height: 58px; box-shadow: 0 0 16px #e3524f80, 0 3px 8px #000a; }
.type-boss .map-node-icon { width: 34px; }
.map-node small, .map-node strong { display: block; max-width: 100%; padding: 0 5px; border-radius: 4px; background: #16181fcc; line-height: 1.45; }
.map-node small { font-size: 10px; color: #b9b3c4; }
.map-node .map-node-kind { margin-top: 3px; }
.map-node strong { font-size: 12px; color: #f2f0ea; }
.map-node:disabled { opacity: 1; }
.map-node.available { cursor: pointer; color: #fff3c7; }
.map-node.available .map-node-medal { border-color: var(--gold); box-shadow: 0 0 0 4px #ffd23f33, 0 0 16px #ffd23f80; animation: map-pulse 1.6s ease-in-out infinite; }
.map-node.available .map-node-kind { color: var(--gold); }
.map-node.visited .map-node-medal { filter: grayscale(.6) brightness(.75); border-color: #8bc9b0; }
.map-node.visited .map-node-kind { color: #8bc9b0; }
@keyframes map-pulse { 50% { transform: scale(1.08); } }
/* 「動きを減らす」設定では、マップの流れる道と脈打つ印を止める。全体の指定は
   アニメーションの時間を縮めるだけで、無限に繰り返す動きは止まらないため個別に切る。 */
@media (prefers-reduced-motion: reduce) {
  .journey-map line.available, .map-node.available .map-node-medal { animation: none; }
}
.shop-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 20px; }
.shop-cards article { min-width: 0; }
.shop-cards .card { width: 100%; }
.shop-cards .button { font-size: 11px; padding: 12px 3px; }
.boss-rule { margin: 3px 0; color: #ffdc86; font-size: 11px; }
.turn-phase { margin: 8px 0 2px; color: var(--gold); font-weight: 700; font-size: 13px; }
.block-help, .damage-preview { font-size: 12px; line-height: 1.6; margin: 4px 0; color: #d9d4e2; overflow-wrap: anywhere; }
.selected-card { margin: 4px 0 12px; padding: 12px; border: 1px solid #8e773d; border-radius: 8px; background: #24212b; overflow-wrap: anywhere; }
.selected-card p { font-size: 16px; line-height: 1.6; margin: 0 0 8px; }
.selected-card #selected-cost { color: #d9d4e2; }
.selected-card .button { font-size: 16px; min-height: 48px; }
.tutorial-hint { padding: 12px; border: 2px solid var(--gold); border-radius: 8px; background: #282434; margin-top: 8px; overflow-wrap: anywhere; }
.tutorial-hint h2 { font-size: 18px; margin: 5px 0; }
.tutorial-hint p { font-size: 16px; line-height: 1.6; margin: 5px 0; }
.tutorial-hint #tutorial-progress { font-size: 12px; color: #ffdc83; }
.tutorial-hint .text-button { min-height: 44px; font-size: 16px; }
.tutorial-entry { margin-top: 10px; }
.pips[hidden] { display: none; }
.hand .card:not(.cant) .card-cost { box-shadow: 0 0 0 2px #ffdc8355; }
.player-health .hp-label { flex-wrap: wrap; gap: 3px 8px; }
.map-node:not(:disabled) { cursor: pointer; }
.map-node.current { outline: 0; }
.map-node.current .map-node-medal { border-color: #8bc9b0; box-shadow: 0 0 0 4px #8bc9b055, 0 0 14px #8bc9b0aa; filter: none; }