@font-face {
  font-family: "DotGothic16";
  src: url("../fonts/DotGothic16-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-FF;
}
@font-face {
  font-family: "DotGothic16";
  src: url("../fonts/DotGothic16-japanese.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+100-10FFFF;
}
:root {
  --bg: #061006;
  --panel: #0a160a;
  --line: #1f471f;
  --ink: #86d986;
  --dim: #478247;
  --red: #6fbf6f;
  --green: #9fe89f;
  --gold: #d2ffd2;
  --r0: #478247;
  --r1: #86d986;
  --r2: #a8eca8;
  --r3: #c4f7c4;
  --r4: #e2ffe2;
  --r5: #f2fff2;
  --set: #b7f0b7;
  --font: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --crt-scan: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100dvh; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: var(--crt-scan), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2,12,2,.55) 100%); }

.top { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); font-size: 14px; background: linear-gradient(180deg, #0d1c0d 0%, var(--bg) 100%); }
.top .title { color: var(--gold); font-size: 17px; flex: 1; }
.top .stat { color: var(--dim); white-space: nowrap; }

.screen { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }
.depth { text-align: center; color: var(--dim); font-size: 13px; letter-spacing: .3em; margin: 4px 0 18px; }

.view.hidden { display: none !important; }
.bottom.hidden { display: none; }
.flavor { color: var(--dim); font-size: 13px; text-align: center; margin: 4px 0 18px; }
.ledger { position: relative; border: 3px double var(--dim); padding: 16px 14px 10px; margin: 0 0 18px; }
.ledger .legend { position: absolute; top: -11px; left: 12px; background: var(--bg); padding: 0 8px; color: var(--gold); font-size: 13px; }
.ledger .row { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 2.1; }
.ledger .row .k { color: var(--dim); white-space: nowrap; }
.ledger .row .lead { flex: 1; border-bottom: 1px dotted var(--line); align-self: center; }
.ledger .row .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu button { width: 100%; min-height: 48px; }
.menu button:disabled { opacity: .4; }

.pcard { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); outline: 1px solid rgba(120,220,120,.25); outline-offset: 3px; padding: 12px; margin: 0 0 12px; }
.pcard-av { flex: none; width: 64px; height: 64px; background: #071307; border: 1px solid var(--line); position: relative; overflow: hidden; }
.pcard-av::before { content: ""; position: absolute; left: 50%; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #1a3a1a; transform: translateX(-50%); }
.pcard-av::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 40px; height: 26px; background: #1a3a1a; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateX(-50%); }
.pcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcard-name { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-lv { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard-cls { font-size: 12px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-line { display: flex; align-items: center; gap: 8px; }
.pcard-line .pcard-k { font-size: 12px; color: var(--dim); width: 2.4em; flex: none; }
.pcard-line .bar { flex: 1; }
.pcard-line .pcard-v { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3.4em; text-align: right; }
.bar .fill.exp { background: var(--gold); }
#pc-hp-bar { background: var(--red); }
.cmd-row { display: flex; gap: 8px; margin: 0 0 12px; }
.cmd-row .cmd { flex: 1; min-height: 46px; font-size: 14px; }
.cmd-row .cmd.gold { border-color: var(--gold); color: var(--gold); }
.cmd-row .cmd:disabled { opacity: .4; }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.lg-grid .row.wide { grid-column: 1 / -1; }

#view-explore { background: radial-gradient(140% 70% at 50% 0%, transparent 62%, rgba(0,0,0,.28) 100%); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 18px; }
.vs .side { text-align: center; }
.vs .name { font-size: 14px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs .name.enemy { color: var(--red); }
.vs .vs-mark { color: var(--dim); font-size: 13px; padding-bottom: 22px; letter-spacing: .1em; }
.bar { height: 8px; background: #031003; border: 1px solid var(--line); }
.bar .fill { height: 100%; width: 100%; background: var(--green); transition: width .25s; }
.bar .fill.enemy { background: repeating-linear-gradient(45deg, #6fbf6f 0 2px, #163816 2px 4px); }
.hp { font-size: 12px; color: var(--dim); margin-top: 4px; }

.log { position: relative; font-size: 14px; line-height: 1.9; background: #030c03; border: 1px solid var(--line); box-shadow: inset 0 0 12px rgba(0,0,0,.6); padding: 12px; }
.log::before, .log::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--dim); pointer-events: none; }
.log::before { top: 2px; left: 2px; border-right: none; border-bottom: none; }
.log::after { bottom: 2px; right: 2px; border-left: none; border-top: none; }
.log .turn { color: var(--dim); margin-right: 4px; }
.log .en { color: var(--red); }
.log .en::before { content: "【"; }
.log .en::after { content: "】"; }
.log .dmg { color: var(--red); }
.log .dmg::before { content: "▼"; }
.log .gain { color: var(--green); }
.log .gain::before { content: "▲"; }
.log .r0 { color: var(--r0); }
.log .r1 { color: var(--r1); }
.log .r2 { color: var(--r2); }
.log .r3 { color: var(--r3); font-size: 15px; letter-spacing: .08em; }
.log .r4 { color: var(--bg); background: var(--ink); padding: 0 4px; font-size: 17px; letter-spacing: .18em; }
.log .r5 { color: var(--r5); font-size: 17px; letter-spacing: .14em; text-shadow: 0 0 8px rgba(159,232,159,.8); }
.log .set { color: var(--set); }
.log .lore { display: block; color: var(--dim); font-size: 13px; font-style: italic; line-height: 1.7; }
.log .lore-end { color: var(--ink); }
.log .drop-legend { text-align: center; margin: 8px 0; }
.log .flash { animation: flash .6s ease-out; }
@keyframes flash { from { background: rgba(140,240,140,.25); } to { background: transparent; } }

.bottom { display: flex; gap: 10px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
button { font-family: inherit; font-size: 15px; min-height: 48px; padding: 0 16px; background: #0f2410; color: var(--ink); border: 2px solid; border-color: #6fbf6f #143314 #143314 #6fbf6f; border-radius: 4px; box-shadow: 0 2px 0 #041004; transition: transform .05s, box-shadow .05s, border-color .05s; }
button:active { border-color: #143314 #6fbf6f #6fbf6f #143314; transform: translateY(1px); box-shadow: none; }
button.primary { flex: 1; background: #79cf79; color: #06240a; border-color: #d6ffd6 #2c5a2c #2c5a2c #d6ffd6; }
button.primary:active { border-color: #2c5a2c #d6ffd6 #d6ffd6 #2c5a2c; transform: translateY(1px); box-shadow: none; }
button.primary:disabled { opacity: .5; }

dialog { position: relative; width: min(100vw, 520px); max-height: 90dvh; overflow-y: auto; border: 1px solid var(--line); outline: 1px solid rgba(120,220,120,.25); outline-offset: 3px; background: var(--crt-scan), var(--panel); color: var(--ink); padding: 0; font-family: var(--font); }
dialog::backdrop { background: rgba(2,10,2,.78); }
dialog::before, dialog::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--dim); pointer-events: none; }
dialog::before { top: 2px; left: 2px; border-right: none; border-bottom: none; }
dialog::after { bottom: 2px; right: 2px; border-left: none; border-top: none; }
.inv-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.inv-head button { min-height: 44px; font-size: 22px; }
.inv-ash { color: var(--gold); font-size: 13px; margin-left: 6px; }
.equipped { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.eq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; }
.eq-row .eq-slot { color: var(--dim); flex: 0 0 auto; }
.eq-row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-row .st { color: var(--dim); font-size: 12px; flex: 0 0 100%; }
.eq-row button { min-height: 44px; font-size: 13px; padding: 0 10px; }
.eq-row button:first-of-type { margin-left: auto; }
.eq-bonus { padding: 4px 0; line-height: 1.6; }
.inv-list { max-height: 55dvh; overflow-y: auto; }
.item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .st { color: var(--dim); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.item-btns { display: flex; flex: 0 0 100%; gap: 8px; justify-content: flex-end; }
.item-btns button { flex: 0 0 auto; min-width: 44px; }
.item button { min-height: 44px; font-size: 13px; padding: 0 10px; }
.eq-row .r1, .item .r1 { color: var(--r1); } .eq-row .r2, .item .r2 { color: var(--r2); } .eq-row .r3, .item .r3 { color: var(--r3); } .eq-row .r4, .item .r4 { color: var(--r4); } .eq-row .r5, .item .r5 { color: var(--r5); }
.log .r2:first-child::before, .item .r2::before, .eq-row .r2::before { content: "◇ "; }
.log .r3:first-child::before, .item .r3::before, .eq-row .r3::before { content: "◆ "; }
.log .r4:first-child::before, .item .r4::before, .eq-row .r4::before { content: "★ "; }
.log .r5:first-child::before, .item .r5::before, .eq-row .r5::before { content: "✦ "; }

.create-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.create-body input { width: 100%; min-height: 48px; font-family: inherit; font-size: 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--dim); border-radius: 2px; padding: 0 12px; }
.log .skill { color: var(--gold); }

/* タイトル画面 */
#view-title { position: fixed; inset: 0; z-index: 50; flex: 1; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  background:
    radial-gradient(circle 90px at 72% 18%, rgba(159,232,159,.14), rgba(159,232,159,.05) 40%, transparent 70%),
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #0c1c0c 0%, #061006 45%, #040c04 100%); }
#view-title::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28dvh; background: #040c04; z-index: 1;
  clip-path: polygon(0% 100%, 0% 55%, 6% 58%, 9% 40%, 12% 58%, 18% 52%, 22% 62%, 28% 44%, 33% 60%, 40% 50%, 46% 64%, 52% 46%, 58% 60%, 64% 52%, 70% 62%, 76% 42%, 82% 58%, 88% 50%, 94% 60%, 100% 54%, 100% 100%); }
#view-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18dvh; background: #0a160a; z-index: 1;
  clip-path: polygon(0% 100%, 0% 70%, 10% 74%, 16% 64%, 24% 76%, 32% 66%, 42% 78%, 50% 68%, 58% 78%, 66% 66%, 74% 76%, 82% 66%, 90% 76%, 100% 68%, 100% 100%); }
.tv-ver { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 14px; color: var(--dim); font-size: 12px; z-index: 2; }
.tv-top { position: relative; z-index: 2; margin-top: 26vh; text-align: center; }
.tv-logo { margin: 0; font-family: var(--font); font-weight: 400; font-size: clamp(46px, 14vw, 72px); letter-spacing: .16em; color: #a8eca8; white-space: nowrap; text-shadow: 0 0 10px rgba(159,232,159,.35); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tv-logo { background: linear-gradient(180deg, #d2ffd2, #86d986 55%, #478247); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.tv-sub { color: var(--dim); font-size: 12px; letter-spacing: .4em; margin-top: 8px; }
.tv-spacer { flex: 1; }
.tv-tag { position: relative; z-index: 2; color: var(--dim); font-size: 12px; text-align: center; margin: 0 0 14px; padding: 0 20px; }
.tv-actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; width: min(88vw, 300px); margin-bottom: 22px; }
.tv-actions button { width: 100%; min-height: 48px; }
.tv-copy { position: relative; z-index: 2; color: var(--dim); font-size: 12px; margin-bottom: max(12px, env(safe-area-inset-bottom)); }
/* タイトル演出（霞・灰） */
.tv-mist { position: absolute; left: -20%; right: -20%; top: 18%; height: 44%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(159,232,159,.10), transparent 70%);
  filter: blur(24px); animation: tv-drift 60s ease-in-out infinite alternate; }
@keyframes tv-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.tv-ash { position: absolute; left: 0; top: 0; width: 2px; height: 2px; z-index: 1; pointer-events: none;
  border-radius: 50%; background: rgba(159,232,159,.5);
  box-shadow:
    30px 40px rgba(159,232,159,.35), 90px 120px rgba(159,232,159,.25), 150px 30px rgba(159,232,159,.30),
    210px 90px rgba(159,232,159,.20), 270px 160px rgba(159,232,159,.28), 330px 60px rgba(159,232,159,.22),
    60px 200px rgba(159,232,159,.24), 180px 240px rgba(159,232,159,.18), 300px 220px rgba(159,232,159,.26),
    120px 320px rgba(159,232,159,.20), 240px 360px rgba(159,232,159,.22), 20px 300px rgba(159,232,159,.18),
    350px 300px rgba(159,232,159,.20), 200px 440px rgba(159,232,159,.16), 80px 480px rgba(159,232,159,.18);
  animation: tv-fall 16s linear infinite; }
@keyframes tv-fall { from { transform: translateY(-40px); } to { transform: translateY(560px); } }
@media (prefers-reduced-motion: reduce) { .tv-mist, .tv-ash { animation: none; } }
.about-body { padding: 14px; font-size: 14px; line-height: 1.9; background: #030c03; border: 1px solid var(--line); box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.about-body p { margin: 0 0 8px; }
.about-body .dim { color: var(--dim); font-size: 13px; margin-top: 12px; }

/* 修練（スキルツリー） */
.tree-head-btns { display:flex; gap:8px; align-items:center; }
.tree-head-btns button { min-height:44px; font-size:13px; }
.tree-pt { color: var(--gold); font-size:13px; }
.tree-tabs { display:flex; gap:6px; padding:8px 14px; border-bottom:1px solid var(--line); }
.tree-tab { flex:1; min-height:44px; font-size:14px; }
.tree-tab.current { border-color: var(--gold); color: var(--gold); }
.tree-canvas { position:relative; height:48dvh; overflow:auto; }
.tree-canvas svg { position:absolute; top:0; left:0; }
.tree-canvas line { stroke: var(--line); stroke-width: 2; }
.tree-canvas line.on { stroke: var(--gold); }
.tree-node { position:absolute; width:56px; height:56px; border-radius:50%; background:#071307; border:2px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:20px; line-height:1; }
.tree-node .rk { font-size:12px; color:var(--dim); margin-top:2px; }
.tree-node.owned { border-color: var(--gold); }
.tree-node.buyable { border-color: var(--ink); }
.tree-node.locked { opacity:.45; }
.tree-node.current { border:3px double var(--gold); }
.tree-node.sel { outline:2px solid var(--r2); outline-offset:1px; }
.tree-label { position:absolute; font-size:12px; color:var(--dim); text-align:center; width:72px; pointer-events:none; }
.tree-sheet { border-top:1px solid var(--line); padding:12px 14px; min-height:112px; }
.tree-sheet .ts-title { color:var(--gold); font-size:15px; }
.tree-sheet .ts-k { color:var(--dim); font-size:12px; }
.tree-sheet .ts-desc { font-size:12px; color:var(--ink); margin:4px 0; line-height:1.6; }
.tree-sheet .ts-prog { font-size:13px; color:var(--gold); letter-spacing:.15em; }
.tree-sheet .ts-actions { display:flex; gap:8px; margin-top:8px; }
.tree-sheet .ts-actions button { min-height:44px; flex:1; }