/* 画面：縦持ちスマホ前提。高さはアドレスバーの状態に合わせて変わる dvh で合わせる */
:root{
  --bg:#121815; --panel:#1b231f; --panel2:#232e28; --line:#33453b;
  --fg:#eef2ea; --muted:#a3b5a6; --accent:#e6b84a; --good:#7fd36a; --bad:#ff6b5b;
  --energy:#5fc8ff; --gold:#ffd84a; --up:#ff5b4a; --down:#4ea8ff;
  --font:"DotGothic16","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
button{font-family:var(--font);color:var(--fg);background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;font-size:15px;padding:0 12px;min-height:44px;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.4;cursor:default}
button.go{background:var(--accent);color:#1d1606;border-color:var(--accent)}
button[aria-pressed="true"]{background:var(--accent);color:#1d1606;border-color:var(--accent)}
[hidden]{display:none!important}

/* ---- スタート画面（わざと画面より長くして、上スワイプでスクロールさせる） ---- */
#start{position:relative;min-height:calc(100dvh + 240px);padding:0 16px}
.start-inner{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;text-align:center;
  padding-top:max(10vh,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom))}
/* 背景：夕暮れの城と、行進してくる魔物（コードで描く動く絵） */
#title-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;z-index:0;pointer-events:none}
#start[hidden] #title-bg{display:none}
#start::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%)}
.logo{display:flex;flex-direction:column;align-items:center;gap:2px}
/* タイトルの文字：js/logo.js がドット絵で描く（黄色い手書き風・こげ茶のふち・i の点は炎）。光はCSSの影で */
.logo-title{margin:0;line-height:0}
#logo-cv{display:block;width:auto;height:min(43vw,184px,21vh);image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(255,130,40,.45)) drop-shadow(0 0 26px rgba(255,80,30,.3))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo-sub{margin:6px 0 0;font-size:13px;color:#e8c9a0;letter-spacing:.12em;padding:3px 12px;border-top:1px solid rgba(246,217,138,.45);border-bottom:1px solid rgba(246,217,138,.45);background:rgba(20,8,10,.35)}
#start .title-opt{background:rgba(18,12,16,.78);border-color:rgba(246,217,138,.45);backdrop-filter:blur(2px)}
#start .title-opt[aria-pressed="true"]{background:linear-gradient(#f2c55a,#d9952e);border-color:#ffe08a;box-shadow:0 0 16px rgba(255,170,60,.45)}
#start .meta-line{text-shadow:0 1px 2px #000;background:rgba(18,12,16,.7);border-radius:12px;padding:3px 12px}
#start .swipe p{text-shadow:0 1px 3px #000}
.eyebrow{margin:0;color:var(--accent);font-size:13px;letter-spacing:.1em}
h1{margin:0;font-weight:400;font-size:34px;line-height:1.2}
h1 span{font-size:18px;color:var(--muted)}
#title-art{width:308px;height:110px;image-rendering:pixelated}
.title-menu{display:flex;flex-direction:column;gap:8px;width:min(300px,100%)}
.title-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;min-height:56px}
.title-opt b{font-weight:400;font-size:17px}
.title-opt small{font-size:12px;color:var(--muted)}
.title-opt[aria-pressed="true"] small{color:#3a2c08}
.title-opt:disabled{opacity:.35}
.title-opt .warn{color:#7a1f14}
.menu-btn{flex:0 0 auto}
.swipe{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.swipe p{margin:0;font-size:18px}
.arrow{color:var(--accent);line-height:.9;font-size:20px;animation:up 1.2s ease-in-out infinite}
@keyframes up{0%,100%{transform:translateY(6px);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
.pc-only{display:none}
@media (hover:hover) and (pointer:fine){.pc-only{display:inline-block}}

/* ---- ゲーム画面 ---- */
.screen{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;touch-action:none;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-top:max(6px,env(safe-area-inset-top));
  padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px));
  max-width:520px;margin:0 auto;background:var(--bg)}
.hud,.runbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 10px 6px;font-size:15px;
  font-variant-numeric:tabular-nums}
.hud b{font-weight:400}
.hud-life{color:#ff7a7a}
.hud-gold{color:var(--gold)}
.hud-turn #h-phase{color:var(--accent)}
.hud-floor{color:var(--muted);font-size:11px;line-height:1.1}
.hud-stats{display:flex;flex-direction:column;line-height:1.15;font-size:14px;min-width:0}
.hud-turn{display:flex;flex-direction:column;align-items:center;line-height:1.15;font-size:14px;min-width:0;flex:1 1 auto}
.hud-turn-row{white-space:nowrap}
.nav-btns{display:flex;gap:4px;flex:0 0 auto}
.nav-btn{min-height:34px;padding:0 8px;font-size:13px;border-radius:7px;background:var(--panel)}
#world .nav-btn[data-nav=map]{display:none}
.runbar .rb-title{flex:1 1 auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-title{color:var(--accent)}
.hud-left{color:var(--fg);margin-left:4px}
#h-energy{display:flex;gap:6px;align-items:center}
.gem{width:13px;height:13px;transform:rotate(45deg);border:1px solid #4f8fae;background:#16303c}
.en-num{color:var(--energy);margin-left:4px;font-size:17px}
.gem.on{background:var(--energy);border-color:#b8ecff}

.stage{position:relative;flex:1 1 auto;min-height:120px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}   /* マップは上にそろえる（手札の枚数で動かさない） */
#map{display:block;image-rendering:pixelated;border-radius:6px;touch-action:none}
.banner{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:26px;pointer-events:none;
  text-shadow:0 2px 0 #000,0 0 12px #000;opacity:0;transition:opacity .25s}
.banner.show{opacity:1}
.banner.prep{color:var(--good)} .banner.attack{color:var(--bad)}
.bubble{position:absolute;z-index:5;transform:translateX(-50%);margin-top:6px;background:rgba(14,18,15,.95);border:1px solid var(--accent);
  border-radius:10px;padding:8px 10px;font-size:14px;line-height:1.5;min-width:150px;max-width:calc(100% - 16px)}
.bubble::before{content:"";position:absolute;top:-6px;left:var(--tip,50%);width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:inherit;border-left:1px solid var(--accent);border-top:1px solid var(--accent)}
.bubble .gate{display:block;margin-bottom:2px}
.bubble .row{display:flex;align-items:center;gap:4px;white-space:nowrap}
.bubble .sub{color:var(--muted);font-size:12px}
.toast{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(10,12,10,.88);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;font-size:14px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.toast.show{opacity:1}

.chip{display:inline-flex;align-items:center;gap:2px;color:var(--fg)}
.chip canvas{width:22px;height:18px;image-rendering:pixelated}
.gate{color:var(--accent)}

.actions{display:flex;gap:6px;align-items:center;padding:4px 8px 6px}
.actions{justify-content:flex-end}
.hand-bar{display:flex;align-items:center;justify-content:space-between;padding:2px 10px 6px}
.energy{display:flex;align-items:center;gap:8px}
.en-label{font-size:13px;color:var(--energy)}
.piles{display:flex;gap:6px;font-variant-numeric:tabular-nums}
.pile-btn{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 9px;font-size:13px;color:var(--muted);background:var(--panel)}
.pile-btn b{font-weight:400;color:var(--fg)}
.pile-ico{width:16px;height:16px;fill:var(--panel2);stroke:var(--accent);stroke-width:1.2}
.pile-btn.disc .pile-ico{stroke:var(--muted)}
.pile-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:4px}
.pile-list li{display:flex;align-items:center;gap:10px;background:var(--panel2);border-radius:8px;padding:4px 12px 4px 6px;font-size:15px}
.pile-list li canvas{width:24px;height:34px;image-rendering:pixelated}
.pile-list li b{margin-left:auto;font-weight:400;color:var(--accent);font-variant-numeric:tabular-nums}
.pile-list li.none{justify-content:center;color:var(--muted);padding:10px}
#btn-draw small{color:var(--gold);font-size:13px}
/* 速度：横にずらすと1〜4倍 */
.speed{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;max-width:160px;padding:0 4px;min-height:44px}
.speed span{min-width:26px;color:var(--accent);font-variant-numeric:tabular-nums;font-size:15px}
#speed{flex:1 1 auto;min-width:64px;height:44px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
#speed::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--panel2),var(--accent));border:1px solid var(--line)}
#speed::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid #16120f;margin-top:-10px}
#speed::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--panel2),var(--accent))}
#speed::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid #16120f}
#btn-go{min-width:100px}

/* 手札：4枚までは1段、5枚以上は4枚×2段。1枚の幅は約85pt */
/* 手札：4枚までは1段。5枚以上は4枚×2段で、1段目の上側（名前とコスト）だけ見えるように2段目を重ねる。
   --row2 は2段目で増える高さ。マップの大きさはこの分をいつも見込んで計算する（ui.js の fit） */
.hand{--card-h:76px;--peek:36px;--row2:var(--peek);
  display:grid;grid-template-columns:repeat(4,1fr);align-content:start;column-gap:6px;padding:8px 8px 0;
  min-height:calc(8px + var(--card-h) + var(--row2))}   /* 0枚でも1段でも2段でも、場所の高さを同じにする */
.card{position:relative;min-width:0;height:var(--card-h);border-radius:9px;border:2px solid #4a5a50;background:linear-gradient(#2b3a31,#1d2621);
  display:flex;flex-direction:column;align-items:center;padding:3px 3px 4px;gap:1px;
  transition:transform .12s, border-color .12s;touch-action:none;cursor:pointer;box-shadow:0 -3px 8px rgba(0,0,0,.35)}
.hand.two .card:nth-child(n+5){margin-top:calc(var(--peek) - var(--card-h))}
.card .top{display:flex;align-items:center;gap:3px;width:100%;min-height:22px}
.card .nm{font-size:11.5px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:clip;flex:1 1 auto;min-width:0;text-align:center;padding-right:4px}
.card canvas{image-rendering:pixelated;flex:1 1 auto;min-height:0;max-width:100%;object-fit:contain}
.card .cost{position:relative;flex:0 0 auto;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#08202c;z-index:0}
.card .cost::before{content:"";position:absolute;inset:3px;transform:rotate(45deg);background:var(--energy);border:1px solid #b8ecff;z-index:-1}
.card.sel{border-color:var(--accent);transform:translateY(-8px);z-index:3}
.card.poor{opacity:.45}
.card.empty{border-style:dashed;border-color:#2b3a31;background:none;cursor:default;box-shadow:none}
.ghost{position:fixed;z-index:30;pointer-events:none;opacity:.85;transform:translate(-50%,-90%) scale(1.05)}

.sheet{position:absolute;left:8px;right:8px;bottom:calc(max(22px,calc(env(safe-area-inset-bottom) + 10px)) + 4px);z-index:20;
  background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;box-shadow:0 -6px 20px rgba(0,0,0,.5)}
.sheet-head{font-size:17px} .sheet-head span{color:var(--accent);font-size:14px}
.sheet p{margin:6px 0 10px;font-size:14px;color:var(--muted);line-height:1.6}
.sheet-btns{display:flex;gap:8px}
.sheet #ts-up{flex:1 1 auto}
.target-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1.2;padding:4px 12px;min-width:118px}
.target-btn small{font-size:11px;color:var(--muted)}
.target-btn b{font-weight:400;font-size:15px}
.card-detail{margin:0;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.card-detail h3{margin:0;font-weight:400;font-size:17px}
.card-detail p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.card-detail dl{justify-content:start}
.card-detail.empty{color:var(--muted);font-size:14px}
/* 強さの表：左から 項目名｜今の値｜太い矢印（全行で1本、上に「強化後」）｜強化後の値。項目ごとに1行 */
.stat-table{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;column-gap:8px;row-gap:3px;
  margin:6px 0 10px;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-table.maxed{grid-template-columns:auto 1fr}
.stat-table .k{grid-column:1;color:var(--muted);font-size:13px}
.stat-table .v{grid-column:2}
.stat-table .mid{grid-column:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 2px}
.stat-table .mid small{font-size:11px;color:var(--up);letter-spacing:.05em}
.stat-table .mid svg{width:30px;height:18px;fill:var(--up)}
.stat-table .nx{grid-column:4}
.stat-table .max{color:var(--muted);font-size:12px}
.d-up,.d-down{font-weight:400}
/* ランクの札：上ほど明るい金色、下ほどくすんだ色。赤・青（アップ・ダウン）は使わない */
.rank{display:inline-block;font-style:normal;font-size:11px;line-height:1;min-width:16px;padding:2px 3px 1px;margin:0 1px 0 3px;
  border-radius:4px;text-align:center;vertical-align:1px;border:1px solid #5d6b62;color:#cfd8cf;background:#26302a}
.rank-sss,.rank-ss,.rank-s{color:#2a1c00;background:#ffd84a;border-color:#ffd84a}
.rank-a{color:#ffd84a;border-color:#b8942a}
.rank-b{color:#eef2ea;border-color:#8a9a8e}
.rank-f,.rank-g{color:#8b948d;background:#1a201c;border-color:#3a443e}
/* 強化でランクが変わる時（A以上に上がった時は金色のまま） */
.rank.rank-up{color:var(--up);border-color:var(--up);background:rgba(255,91,74,.12)}
.rank.rank-down{color:var(--down);border-color:var(--down);background:rgba(78,168,255,.12)}
.rk-arrow{margin-left:3px;margin-right:-2px}
.d-up{color:var(--up)} .d-down{color:var(--down)}
button.up{background:var(--up);color:#fff;border-color:var(--up);text-shadow:0 1px 0 rgba(0,0,0,.35)}

.modal{position:fixed;inset:0;z-index:40;background:rgba(5,8,6,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 16px;
  display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.modal-box h2{margin:0;font-weight:400;font-size:22px}
.modal-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.modal-box > button{width:100%}
#detail-art{width:102px;height:108px;image-rendering:pixelated}
dl{display:grid;grid-template-columns:auto auto;gap:2px 14px;margin:0;font-size:14px}
dt{color:var(--muted);text-align:right} dd{margin:0;text-align:left}

/* 横持ちの時（スマホだけ）は「縦にしてください」 */
#rotate{display:none}
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px){
  #rotate{display:flex;position:fixed;inset:0;z-index:99;background:var(--bg);align-items:center;justify-content:center;font-size:20px}
}

/* ---- カードの種類・珍しさ ---- */
.card.skill{background:linear-gradient(#352b45,#221c2d);border-color:#5d4f78}
.card.r-uncommon{border-color:#4f7fae}
.card.r-rare{border-color:#c79a2a}
.card.skill.r-uncommon{border-color:#6f8fd0}
.card.skill.r-rare{border-color:#d9a82a}
.card.sel{border-color:var(--accent)}
.card .tag{position:absolute;right:3px;bottom:3px;font-size:9px;line-height:1;padding:2px 3px;border-radius:3px;background:rgba(0,0,0,.55);color:#e6d6ff}

/* ---- ワールドマップ ---- */
.world-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
  background:radial-gradient(ellipse at 50% 30%,#1f2a24,#121815 70%)}
.world-map{position:relative;margin:0 auto}
#world-lines{position:absolute;left:0;top:0}
#world-lines line{stroke:#3a4a40;stroke-width:2;stroke-dasharray:4 5}
#world-lines line.open{stroke:var(--accent);stroke-dasharray:none;stroke-width:2.5}
#world-lines line.walked{stroke:#8a9a8e;stroke-dasharray:none;stroke-width:3}
.node{position:absolute;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#1e2822;border:2px solid #3a4a40;opacity:.55}
.node canvas{width:28px;height:28px;image-rendering:pixelated}
.node:disabled{cursor:default}
.node.t-boss{border-color:#8a3b3b;opacity:.8}
.node.t-boss canvas{width:40px;height:40px}
.node.visited{opacity:.35;border-color:#5a6a60}
.node.here{opacity:1;border-color:#e8e8e8;box-shadow:0 0 0 3px rgba(232,232,232,.25)}
.node.reach{opacity:1;border-color:var(--accent);animation:pulse 1.2s ease-in-out infinite}
.node.pick{background:var(--accent);animation:none;box-shadow:0 0 0 4px rgba(230,184,74,.35)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(230,184,74,.0)}50%{box-shadow:0 0 0 6px rgba(230,184,74,.35)}}
@media (prefers-reduced-motion:reduce){.node.reach,.arrow{animation:none}}
.world-foot{display:flex;align-items:center;gap:8px;padding:8px 10px 4px}
.world-hint{flex:1 1 auto;margin:0;font-size:13px;color:var(--fg);min-width:0}
.deck-btn{flex:0 0 auto}
.deck-btn b{font-weight:400;color:var(--accent)}

/* ---- パネル画面（報酬・イベント・商人・休憩） ---- */
.panel-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:8px 16px 12px;display:flex;flex-direction:column;gap:10px}
.panel-foot{display:flex;flex-direction:column;gap:8px;padding:8px 16px 4px}
.panel-foot button{width:100%}
.panel-title{margin:6px 0 0;font-weight:400;font-size:24px;text-wrap:balance}
.panel-title.win{color:var(--good)} .panel-title.lose{color:var(--bad)}
.panel-text{margin:0;font-size:15px;line-height:1.7;color:var(--fg)}
.panel-sub{margin:0;font-size:13px;color:var(--muted)}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;text-align:left;min-height:56px}
.choice b{font-weight:400;font-size:16px}
.choice small{font-size:13px;color:var(--muted)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cards-grid .card{height:104px}
.cards-grid .card canvas{max-height:56px}
.pk-text{margin:0;font-size:14px;line-height:1.6;color:var(--fg);min-height:3.2em}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.shop-item .card{width:100%}
.shop-item .card.sold{opacity:.3}
.price{font-size:14px;color:var(--gold)} .price.poor{color:var(--bad)}
.modal-box.wide{max-width:420px;max-height:calc(100dvh - 32px)}
/* カードを選ぶ画面は上の帯（マップ・デッキ・レリック）の下から出す：選んでいる間も上の帯を押せる */
#picker{padding-top:8px}
#picker .modal-box{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
/* 並べたカード（選ぶ画面・報酬・商人）は、カードの上から指でスクロールできるように（手札のカードはドラッグで使うのでそのまま） */
.cards-grid .card{touch-action:pan-y}
#pk-grid{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
#pk-grid{width:100%;max-height:44dvh;overflow-y:auto;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px}
#pk-grid .card{height:84px}
.pile-list{max-height:50dvh;overflow-y:auto}
.pile-list li{cursor:pointer}

/* ---- レリック ---- */
.relic-strip{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 6px;min-height:28px;align-items:center}
.relic-none{font-size:12px;color:var(--muted)}
.relic-chip{min-height:30px;padding:0 10px;font-size:13px;border-radius:15px;background:#2a2410;border-color:#8a7a3a;color:#f2e2a8}
.relic-chip.r-uncommon{border-color:#6f8fd0}
.relic-chip.r-rare{border-color:#ffd84a;color:#ffd84a}
.relic-get{border-color:#ffd84a}
.relic-get h3{color:#ffd84a}
.relic-buy{border-color:#8a7a3a}

/* ---- 鍛えたカード（＋）：名前を緑にして、ふちを光らせる ---- */
.card.plus .nm{color:#8ff07a}
.card.plus{box-shadow:inset 0 0 0 1px rgba(143,240,122,.45)}
.plus-note{color:#8ff07a}
.cards-grid .card.sold{opacity:.3;pointer-events:none}

/* ---- レアのカード（報酬・商人）は金色に光る ---- */
.cards-grid .card.r-rare{animation:rareGlow 1.6s ease-in-out infinite}
@keyframes rareGlow{0%,100%{box-shadow:0 0 0 1px #c79a2a,0 0 4px rgba(255,216,74,.25)}50%{box-shadow:0 0 0 1px #ffd84a,0 0 14px rgba(255,216,74,.7)}}
@media (prefers-reduced-motion: reduce){.cards-grid .card.r-rare{animation:none}}

/* ---- 指揮官を選ぶ ---- */
.choice.cmd{flex-direction:row;align-items:center;gap:12px}
.choice.cmd canvas{width:39px;height:51px;image-rendering:pixelated;flex:0 0 auto}
.choice.cmd.sel{outline:2px solid #ffd84a}
.cmd-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cmd-txt .cmd-deck{font-size:12px}
.cmd-txt .cmd-sub{font-size:12px;color:#b9c2a8}
.sound-row{display:flex;gap:8px}
.sound-row button{flex:1}
.sound-note{font-size:12px;color:var(--muted)}
#world-back{white-space:nowrap;flex:0 0 auto;padding:0 16px}
/* 重なり順：カードの詳細は一番上（一覧・カード選びの上に開くため）→ 一覧 → ほかの小窓 */
#pile{z-index:50}
#detail{z-index:60}
.ver{position:fixed;right:12px;bottom:max(10px,env(safe-area-inset-bottom));margin:0;font-size:11px;color:var(--muted)}
#tap-sound{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(22px,env(safe-area-inset-bottom)) + 70px);z-index:35;background:rgba(14,18,15,.92);border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:6px 14px;font-size:13px;pointer-events:none;white-space:nowrap}

/* ---- レア度の色（カード・レリック共通）：ノーマル＝銀、アンコモン＝緑、レア＝金 ---- */
:root{--r-common:#b9c2c8;--r-uncommon:#4fd1a5;--r-rare:#ffd84a}
.card.r-common{border-color:var(--r-common)}
.card.r-uncommon,.card.skill.r-uncommon{border-color:var(--r-uncommon)}
.card.r-rare,.card.skill.r-rare{border-color:var(--r-rare)}
.card.r-common::after,.card.r-uncommon::after,.card.r-rare::after{content:"";position:absolute;left:6px;right:6px;bottom:2px;height:3px;border-radius:2px;pointer-events:none}
.card.r-common::after{background:var(--r-common)}
.card.r-uncommon::after{background:var(--r-uncommon)}
.card.r-rare::after{background:var(--r-rare);box-shadow:0 0 6px var(--r-rare)}
.card.sel{border-color:var(--accent)}
.rar-label{display:inline-block;padding:0 8px;border-radius:9px;font-size:12px;line-height:20px;border:1px solid currentColor}
.rar-label.r-starter{color:var(--muted)}
.rar-label.r-common{color:var(--r-common)}
.rar-label.r-uncommon{color:var(--r-uncommon)}
.rar-label.r-rare{color:var(--r-rare)}

/* ---- レリック：アイコンだけを並べる（タップで説明） ---- */
.relic-strip{flex-wrap:wrap;gap:4px;min-height:32px;padding:2px 10px 4px}
.relic-strip::-webkit-scrollbar{display:none}
.relic-ico{position:relative;flex:0 0 auto;width:30px;height:30px;min-height:30px;padding:0;border-radius:8px;border:2px solid var(--r-common);background:#1a1f1b;display:flex;align-items:center;justify-content:center}
.relic-ico.r-uncommon{border-color:var(--r-uncommon)}
.relic-ico.r-rare{border-color:var(--r-rare);box-shadow:0 0 5px rgba(255,216,74,.5)}
.relic-ico canvas{width:20px;height:20px;image-rendering:pixelated}
.relic-n{position:absolute;right:-3px;bottom:-5px;font-size:10px;font-weight:400;background:#0b0d0a;color:var(--accent);border-radius:6px;padding:0 3px;line-height:14px}
.battle-relics{min-height:30px;padding:0 10px 2px;flex-wrap:nowrap;overflow-x:auto;touch-action:pan-x;scrollbar-width:none}
.battle-relics:empty{display:none}
.battle-relics .relic-ico{width:28px;height:28px;min-height:28px}
.battle-relics .relic-ico canvas{width:20px;height:20px}
.pile-list li.relic-big{justify-content:center;background:none}
.pile-list li.relic-big canvas{width:80px;height:80px;image-rendering:pixelated}
.meta-line{margin:8px 0 0;font-size:13px;color:var(--accent);text-align:center}
.xp-box h3{color:var(--accent)}
.xp-rows{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:14px}
.xp-rows dt{color:var(--muted)}.xp-rows dd{margin:0;font-variant-numeric:tabular-nums}
.xp-bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.xp-bar i{display:block;height:100%;background:var(--accent)}
.xp-new{color:var(--r-rare)!important}

/* ---- 遊び方 ---- */
#help{z-index:55}
.help-box{max-width:460px;height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:10px}
.help-box h2{margin:0;font-weight:400;font-size:20px;color:var(--accent)}
.help-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;text-align:left;font-size:14px;line-height:1.7;padding-right:4px}
.help-body h3{margin:16px 0 6px;font-weight:400;font-size:16px;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:2px}
.help-body h3:first-child{margin-top:0}
.help-body p{margin:4px 0}
.help-body ol,.help-body ul{margin:4px 0;padding-left:1.3em}
.help-body li{margin:3px 0}
.help-body b{font-weight:400;color:#fff3d0}
.help-body .ico{display:inline-block;vertical-align:-5px;margin:0 3px 0 0;image-rendering:pixelated}
.help-body .tip{background:var(--panel2);border-radius:8px;padding:6px 10px;margin:6px 0;color:var(--muted)}
.help-body .rr{display:inline-block;padding:0 6px;border-radius:6px;border:1px solid currentColor;font-size:12px;line-height:18px}
.title-help{min-height:40px;padding:0 16px;font-size:14px;background:rgba(18,12,16,.78);border-color:rgba(246,217,138,.6);color:#f6d98a}
.help-btn{min-width:34px;padding:0;font-size:16px}
.menu-nav{min-width:38px;padding:0;font-size:20px;line-height:1}
.help-box{height:auto;max-height:calc(100dvh - 32px)}
.help-body{font-size:15px}
.help-list{list-style:none;padding-left:0!important}
.help-list li{display:flex;align-items:center;gap:8px;margin:6px 0;line-height:1.45}
.help-list li .ico{flex:0 0 auto;margin:0}
.help-list li b{flex:0 0 auto}
.help-how{background:var(--panel2);border-radius:8px;padding:6px 10px;margin:8px 0 0!important;font-size:14px}
.c-life{color:#ff7a7a!important}.c-en{color:var(--energy)!important}.c-gold{color:var(--gold)!important}
.help-list li>span{flex:1 1 auto;min-width:0}
/* レリックのレア度：獲得・商人・イベントの表示（枠の色＝レア度） */
.relic-get.r-common,.relic-buy.r-common{border-color:var(--r-common)}
.relic-get.r-uncommon,.relic-buy.r-uncommon{border-color:var(--r-uncommon)}
.relic-get.r-rare,.relic-buy.r-rare{border-color:var(--r-rare);box-shadow:0 0 8px rgba(255,216,74,.35)}
.relic-get.r-common h3{color:var(--text,#f2f2f2)}
.relic-get.r-uncommon h3{color:var(--r-uncommon)}
.relic-line{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap}
.relic-line .relic-ico{width:30px;height:30px;min-height:30px}
.relic-line .relic-ico canvas{width:20px;height:20px}
.relic-line-name{flex:0 1 auto}
.relic-line .rar-label{font-weight:400}
.relic-buy .relic-line{margin-bottom:2px}
/* 鍛える前と後の比べ表 */
.cmp-head,.cmp-row{display:grid;grid-template-columns:5.6em 1fr 1.2em 1fr;align-items:center;gap:4px}
.cmp-head{font-size:12px;color:var(--muted);margin:4px 0 2px}
.cmp-head span:first-child{grid-column:2}
.cmp-head span:last-child{grid-column:4;color:var(--up,#ff6b5b)}
.cmp-row{padding:4px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px;color:var(--muted)}
.cmp-row .cmp-k{font-size:12px}
.cmp-row.ch{color:inherit}
.cmp-row.ch .cmp-k{color:inherit;font-weight:700}
.cmp-row.ch .cmp-b{color:var(--up,#ff6b5b);font-weight:700}
.cmp-row.ch .cmp-a{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.cmp-ar{text-align:center;color:var(--up,#ff6b5b)}
.cmp-text{margin-top:6px;font-size:13px;text-align:left}
.cmp-text p{margin:2px 0!important}
.cmp-t0{color:var(--muted)}

/* ワールドマップの背景（層ごとの景色・js/worldbg.js）と、上に重ねる動き（ホタル・雪・火の粉） */
.world-scroll{overflow-x:hidden}
.world-map canvas.world-bg{position:absolute;top:0;z-index:0;image-rendering:pixelated;pointer-events:none;filter:brightness(.78) saturate(.9)}
#world-lines{z-index:1}
.world-map .node{z-index:2}
.world-fx{position:fixed;z-index:3;pointer-events:none;image-rendering:pixelated}
#world[hidden] .world-fx{display:none}
#world-lines line{stroke:rgba(244,236,210,.85);stroke-width:2}
#world-lines line.under{stroke:rgba(8,10,8,.6);stroke-width:5;stroke-dasharray:none;stroke-linecap:round}
#world-lines line.walked{stroke:#d8d2bc}
/* マス：背景の景色に負けないよう、中をすけない濃い色・明るいふち・下に影。進めないマスはアイコンだけ少し暗く */
.world-map .node{opacity:1;background:#141b16;border-color:rgba(232,222,190,.7);box-shadow:0 2px 0 rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.35)}
.world-map .node canvas{opacity:.85}
.world-map .node.t-boss{border-color:#d0605a}
.world-map .node.visited{border-color:#6a7268}
.world-map .node.visited canvas{opacity:.35}
.world-map .node.here,.world-map .node.reach{box-shadow:0 0 0 3px rgba(232,232,232,.25)}
.world-map .node.here canvas,.world-map .node.reach canvas,.world-map .node.pick canvas{opacity:1}
.world-map .node.reach{border-color:var(--accent);animation:pulse 1.2s ease-in-out infinite}
.world-map .node.here{border-color:#ffffff}
.world-map .node.pick{background:var(--accent);animation:none}

/* イベントの場面の絵（js/eventart.js） */
.event-art{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:240/112;margin:0 auto 10px;image-rendering:pixelated;border-radius:10px;border:2px solid #4a3a26;box-shadow:0 3px 0 rgba(0,0,0,.45)}

/* 指揮官のレリック（最初から持っている）：オレンジの二重のふち */
.relic-ico.r-starter{border-color:#ff9a4a;box-shadow:0 0 0 1px #5a2a10 inset,0 0 5px rgba(255,154,74,.45)}
.rar-label.r-starter{color:#ff9a4a}
/* アセンション（難易度）を選ぶ */
.asc-pick{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.panel-foot .asc-pick .asc-arrow{width:auto;min-height:40px;min-width:56px;padding:0 12px;font-size:16px}
.asc-pick .asc-arrow:disabled{opacity:.3}
.asc-label{font-weight:400;font-size:16px;min-width:140px;text-align:center}
.asc-note{font-size:12px;color:var(--muted);margin:0;line-height:1.5;text-align:center}
.asc-note b{color:#ff8a6a;font-weight:400}
.cmd-relic{display:flex;align-items:center;gap:6px;margin-top:2px}
.cmd-relic .relic-ico{width:24px;height:24px;min-height:24px}
.cmd-relic .relic-ico canvas{width:18px;height:18px}

/* 画面に入った直後はタップを受け付けない間、ボタンを少し暗くして知らせる */
#panel.tap-lock .choice,#panel.tap-lock .panel-foot button{opacity:.55}

/* タイトルの右上メニュー・記録の案内・データの引き継ぎ */
.title-menu-btn{position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:3;min-height:40px;padding:0 14px;font-size:14px;background:rgba(18,12,16,.78);border-color:rgba(246,217,138,.6);color:#f6d98a}
#start[hidden] .title-menu-btn{display:none}
.title-save{min-height:34px;padding:0 14px;font-size:13px}
.title-save b{font-weight:700}
.help-link{width:100%;text-align:left;color:#f6d98a;border-color:rgba(246,217,138,.6)}
.data-box{max-height:calc(100dvh - 32px)}
.data-body{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;text-align:left;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.data-body h3{margin:8px 0 0;font-weight:400;font-size:16px;color:var(--accent)}
.data-body textarea{width:100%;background:#0f0c14;color:#e8e2f0;border:1px solid #5a4d70;border-radius:8px;padding:8px;font-size:16px;font-family:monospace;word-break:break-all;resize:none}
.data-body button{width:100%}
.data-msg{min-height:1.4em;font-size:13px}
.data-msg.bad{color:#ff8a6a}
/* 開いている間は、後ろの画面にスクロールが伝わらないようにする。入力欄は16px以上（iPhoneは小さいと入力時に画面を拡大する） */
.modal{overscroll-behavior:contain}
/* 音量バー */
.vol-row{display:flex;align-items:center;gap:10px;width:100%;font-size:14px;color:var(--muted)}
.vol-row span{flex:0 0 7.5em;text-align:left}
.vol-row input[type=range]{flex:1 1 auto;min-width:0;height:32px;accent-color:var(--accent)}
.sound-row button{white-space:nowrap;padding-left:8px;padding-right:8px}
/* ボスのマス：枠をなくして、そのボスの絵を大きく出す（後ろに赤い光） */
.world-map .node.boss-art{border:none;border-radius:50%;box-shadow:none;opacity:1;
  background:radial-gradient(ellipse at 50% 58%,rgba(200,40,28,.6),rgba(200,40,28,0) 70%)}
.world-map .node.boss-art canvas{width:auto;height:auto;opacity:1;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.85))}
.world-map .node.boss-art.reach{animation:bosspulse 1.2s ease-in-out infinite}
.world-map .node.boss-art.pick{background:radial-gradient(ellipse at 50% 58%,rgba(255,200,90,.7),rgba(255,200,90,0) 70%);animation:none}
@keyframes bosspulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.world-map .node.boss-art.reach{animation:none}}

/* デッキ・山札・捨て札の一覧：小さくしたカードを4列で並べる（2026-10-22） */
.pile-list.mini-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px}
.pile-list.mini-cards li{display:block;position:relative;min-width:0;padding:0;background:none;border-radius:0}
.pile-list.mini-cards li.none{grid-column:1/-1;background:var(--panel2);border-radius:8px;padding:10px;text-align:center}
.pile-list.mini-cards .card{height:84px;box-shadow:none;cursor:pointer;touch-action:pan-y}
.pile-list.mini-cards .card canvas{width:auto;height:auto}
.pile-list.mini-cards .mini-n{position:absolute;right:-2px;bottom:-4px;min-width:24px;padding:1px 5px;border-radius:9px;background:var(--accent);color:#1a1408;font-size:12px;font-weight:700;text-align:center;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.pile-list.mini-cards .card .nm{font-size:9.5px;letter-spacing:-.05em;padding-right:0}
.pile-list.mini-cards .card .cost{width:15px;height:15px;font-size:11px}

/* 終わりの画面（クリア・敗北）：記録を2列×3段のタイルで（2026-10-22） */
.end-lead{text-align:center}
.end-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:6px 0 10px}
.end-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:9px;background:var(--panel2);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.end-stat small{font-size:11px;color:var(--muted);letter-spacing:-.02em;white-space:nowrap}
.end-stat b{font-size:17px;font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums}
.panel-title.win{color:#ffd84a;text-shadow:0 2px 0 #6a3a10,0 0 14px rgba(255,190,60,.45)}
.panel-title.lose{color:#ff8a7a;text-shadow:0 2px 0 #3a0e0a}

/* ============================================================
   UIの見た目の底上げ（2026-10-22）：ドットの世界に合わせて、ボタンや選択肢を「石・木の板」のような立体に
   ・上のふち＝明るい線、下のふち＝暗い厚み（押すと1ドット沈む）
   ・画面の見出しは金色、下に飾り線（まん中にひし形）
   ============================================================ */
#panel{background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 44px),radial-gradient(120% 70% at 50% 0%,#1f2a24 0%,#141a17 60%,#0e1210 100%)}
button{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.28),0 2px 0 rgba(0,0,0,.35);transition:transform .06s,box-shadow .06s,filter .1s}
button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.35)}
button.go{background:linear-gradient(#f2cc66,#d9a63a);border-color:#f6d77a;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 #a87420,0 2px 0 rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(255,240,200,.5)}
button.go:disabled{filter:saturate(.5)}
.choice{background:linear-gradient(#27342d,#1e2823);border:2px solid #34463c;border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 0 rgba(0,0,0,.3),0 2px 0 rgba(0,0,0,.4)}
.choice b{color:#f6e7b8}
.choice:not(:disabled):hover{border-color:#4f6a5a}
.choice.cmd.sel,.choice.sel{outline:none;border-color:#ffd84a;box-shadow:0 0 0 1px #6a4a10,0 0 14px rgba(255,216,74,.35),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -3px 0 rgba(0,0,0,.3)}
.choice:disabled{background:#1a221e;border-color:#2a3630;box-shadow:none}
.panel-title{position:relative;color:#ffe08a;text-shadow:0 2px 0 #3a2a10;padding-bottom:10px}
.panel-title::after{content:"";position:absolute;left:0;bottom:0;width:min(220px,70%);height:2px;
  background:linear-gradient(90deg,#e6b84a,rgba(230,184,74,.5) 70%,transparent)}
.panel-title::before{content:"";position:absolute;left:-1px;bottom:-3px;width:6px;height:6px;background:#ffd84a;transform:rotate(45deg);box-shadow:0 0 6px rgba(255,216,74,.6)}
.panel-title.win::after,.panel-title.lose::after,.panel-title.win::before,.panel-title.lose::before{left:50%}
.panel-title.win::after,.panel-title.lose::after{transform:translateX(-50%);background:linear-gradient(90deg,transparent,#e6b84a 30%,#e6b84a 70%,transparent)}
.panel-title.win::before,.panel-title.lose::before{margin-left:-3px}
.panel-title.win,.panel-title.lose{text-align:center}
.nav-btn{background:linear-gradient(#26322c,#1c2521)}
.modal-box{border:2px solid #3e5246;box-shadow:0 0 0 1px #0a0e0c,0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.modal-box h2{color:#ffe08a;text-shadow:0 2px 0 #3a2a10}

/* たき火マスなどの背景の絵：画面いっぱいに敷き、文字やボタンはその上（2026-10-22） */
#panel .panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;image-rendering:pixelated;z-index:0;pointer-events:none}
#panel > :not(.panel-bg){position:relative;z-index:1}
#panel .rest-bg ~ .panel-body .choice{background:linear-gradient(rgba(39,52,45,.86),rgba(30,40,35,.86));backdrop-filter:blur(1px)}

/* ワールドマップの新デザイン（2026-10-22）：道すじは土の小道（暗いふち＋点線の足あと）、マスは石のメダル */
.world-map canvas.world-bg{filter:brightness(.86) saturate(.95)}
#world-lines line.under{stroke:rgba(20,14,8,.55);stroke-width:7;stroke-linecap:round}
#world-lines line{stroke:#d8c8a0;stroke-width:3;stroke-dasharray:1 6;stroke-linecap:round}
#world-lines line.open{stroke:#ffd84a;stroke-width:3.5;stroke-dasharray:6 5;animation:route-flow 1s linear infinite}
#world-lines line.walked{stroke:#efe4c4;stroke-width:3;stroke-dasharray:none}
@keyframes route-flow{to{stroke-dashoffset:-11}}
@media (prefers-reduced-motion:reduce){#world-lines line.open{animation:none}}
.world-map .node{background:radial-gradient(circle at 35% 30%,#3a4640 0%,#222c27 55%,#141a17 100%);border:2px solid #c9b98e;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.45),0 3px 0 rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.35)}
.world-map .node.visited{border-color:#6a7268;background:radial-gradient(circle at 35% 30%,#2a312d,#151a17)}
.world-map .node.reach{border-color:#ffd84a;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(0,0,0,.45),0 0 0 3px rgba(255,216,74,.35),0 0 14px rgba(255,216,74,.45)}
.world-map .node.here{border-color:#ffffff;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 0 0 3px rgba(255,255,255,.3),0 0 12px rgba(255,255,255,.35)}
.world-map .node.pick{background:radial-gradient(circle at 35% 30%,#ffe89a,#e6b84a 60%,#a87a20)}

/* 指揮官を選ぶ画面の新デザイン（2026-10-22）：全身の絵・名前とライフ・指揮官の印・デッキの小さなカード */
.choice.cmd{align-items:flex-start;gap:10px;padding:8px 10px 8px 6px;background:linear-gradient(rgba(39,52,45,.88),rgba(28,37,33,.9))}
.choice.cmd canvas.cmd-portrait{width:54px;height:72px;flex:0 0 auto;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));transition:transform .15s}
.choice.cmd.sel canvas.cmd-portrait{transform:translateY(-3px) scale(1.06)}
.cmd-list.has-sel .choice.cmd:not(.sel){opacity:.7}
.cmd-head{display:flex;align-items:baseline;gap:10px}
.cmd-name{font-size:19px;font-weight:400;color:#ffe08a;text-shadow:0 2px 0 #3a2a10}
.cmd-life{font-size:15px;color:#ff8a8a}
.cmd-deck-icons{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.cmd-dk{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;width:24px;height:28px}   /* 背景なし（絵だけ） */
.cmd-dk canvas{width:20px;height:auto;max-height:26px;image-rendering:pixelated}
.cmd-dk b{position:absolute;right:-4px;bottom:-4px;font-size:10px;font-weight:700;line-height:1;padding:1px 3px;border-radius:6px;background:var(--accent);color:#1a1408}
.cmd-txt .cmd-deck{font-size:10.5px;color:var(--muted);line-height:1.4}
.choice.cmd .cmd-dk canvas{width:20px;height:26px;object-fit:contain;object-position:50% 100%}
.choice.cmd .cmd-relic .relic-ico canvas{width:18px;height:18px}