/* レイアウト: ホーム(ステージ選択)／デッキ編成／バトル盤面の3画面。盤面は上=CPU・下=自分、右に実況ログ */
:root{
  --ink:#0c0f1f; --panel:#151a33; --panel2:#1d2345; --line:#2e3568;
  --fg:#ebe7f7; --mute:#9b98bb; --gold:#e3b95a; --gold-d:#8a6a28;
  --red:#e65a5f; --heal:#5bd49b; --blue:#6ea9ff; --violet:#a77bff;
  --f-display:"Shippori Mincho B1","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-num:"Cinzel","Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* 背景画像は盤面いっぱいに敷く。高さを固定した下敷き（::before）に貼るので、盤面の中身の量で伸び縮みしない */
.arena{isolation:isolate}
/* 盤面はページの余白（左・上、1列表示のときは右も）まではみ出させ、背景画像で端まで埋める */
#v-battle .arena{margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));margin-top:-16px}
@media (max-width:900px){#v-battle .arena{margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)))}}
.arena::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:-1;pointer-events:none;
  background:url('arena_bg.webp') center 40%/cover no-repeat,#0b0e22}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#232a5a 0%,var(--ink) 60%) fixed,var(--ink);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.pc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,4vw,32px);letter-spacing:.06em;margin:0;
  background:linear-gradient(180deg,#fff3cf,var(--gold) 55%,#a87a2a);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font-family:var(--f-body);font-size:12px;letter-spacing:.2em;color:var(--mute);-webkit-text-fill-color:var(--mute);font-weight:500}
nav.tabs{display:flex;gap:6px}
.tab{background:transparent;border:1px solid var(--line);padding:6px 14px;border-radius:999px;color:var(--mute)}
.tab[aria-selected="true"]{background:var(--gold);color:#1a1405;border-color:var(--gold);font-weight:700}
.btn{background:linear-gradient(180deg,#f0cb72,#c8963a);color:#1d1503;border:0;border-radius:8px;padding:10px 18px;font-weight:700;letter-spacing:.05em;box-shadow:0 2px 0 #6e521b}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none;font-weight:500}
h2{font-family:var(--f-display);font-size:20px;margin:0;letter-spacing:.05em;text-wrap:balance}
.mute{color:var(--mute)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}

/* ===== ホーム ===== */
.home{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.home{grid-template-columns:1fr}}
.stages{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.stage{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);text-align:left;width:100%}
.stage:not(:disabled):hover{border-color:var(--gold)}
.stage:disabled{opacity:.45;cursor:not-allowed}
/* ステージの紋章：宝石の数＝ステージ番号（gem1〜5.webp） */
.crest{width:56px;height:56px;display:block}
.crest img{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px #0008)}
.stage b{font-family:var(--f-display);font-size:16px;display:block}
.stage .desc{font-size:12px;color:var(--mute)}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.badge.clear{border-color:var(--heal);color:var(--heal)}
.rules{font-size:13px;color:var(--mute);margin:8px 0 0;padding-left:18px}
.rules li{margin:2px 0}
.rpbar{display:flex;align-items:center;gap:6px;flex:1 1 200px;min-width:0}
.rpbar .chip{padding:3px 10px;font-size:12px}
.rpbar input[type=range]{flex:1;min-width:60px;accent-color:var(--gold)}
#replayList li{grid-template-columns:auto minmax(0,1fr) auto}
#replayList .btn{padding:3px 12px;font-size:12px}
.rw{color:var(--heal)}.rl{color:#ff9aa0}
.datapanel{display:flex;flex-direction:column;gap:8px;min-width:0}
.ledger{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:13px;font-variant-numeric:tabular-nums}
.ledger li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:5px 2px;border-top:1px solid var(--line)}
.ledger .when{color:var(--mute);font-size:12px}
.ledger .d{font-family:var(--f-num);font-weight:700;text-align:right}
.ledger .d.plus{color:var(--heal)}.ledger .d.minus{color:#ff9aa0}
.ledger .bal{color:var(--mute);font-size:12px;text-align:right;min-width:70px}
.databox{width:100%;font:12px/1.5 ui-monospace,Consolas,monospace;color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical;word-break:break-all}
.datamsg{margin:0;font-size:13px;min-height:1.5em}
.datamsg.ok{color:var(--heal)}.datamsg.ng{color:var(--red)}

/* ===== カード ===== */
.card{position:relative;width:84px;height:116px;border-radius:9px;padding:4px;flex:0 0 auto;
  background:linear-gradient(160deg,var(--fr1),var(--fr2));box-shadow:0 3px 8px #0008;user-select:none}
.card .in{position:absolute;inset:3px;border-radius:7px;background:linear-gradient(180deg,#232a52,#0f1330);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.card .art{font-size:34px;line-height:1;margin-top:18px;filter:drop-shadow(0 2px 3px #000a)}
/* 絵のあるカード：絵をカードいっぱいに敷き、名前とキーワードは下に重ねる */
.card .in.hasart{justify-content:flex-end}
.card .artimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0!important;filter:none}
.card.foe .art.artimg{transform:none}
.card .in.hasart{cursor:zoom-in}
.artview{position:fixed;inset:0;z-index:100;background:#03040ce6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out;animation:castIn .2s ease}
.artview figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;min-height:0}
.artview img{max-width:min(92vw,900px);max-height:76vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 40px #000,0 0 0 2px var(--gold-d)}
.artview figcaption{max-width:min(92vw,560px);text-align:center;font-size:13px;color:var(--mute);white-space:pre-line;line-height:1.5}
.artview figcaption b{display:block;font-family:var(--f-display);font-size:20px;color:var(--gold);margin-bottom:2px}
.artclose{margin:0;font-size:12px;color:var(--mute)} /* 絵のあるカードは相手側でもさかさまにしない */
.card .in.hasart::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,transparent,#05071aee 70%);pointer-events:none}
.card .in.hasart .nm{position:relative;z-index:1;margin:0 0 16px;text-shadow:0 1px 3px #000}
.card .in.hasart .kw{z-index:1}
.card .nm{font-size:10px;font-weight:700;text-align:center;padding:0 3px;margin-top:6px;line-height:1.25}
.card .cost,.card .atk,.card .hp{position:absolute;font-family:var(--f-num);font-weight:700;display:grid;place-items:center;font-size:14px;width:24px;height:24px;border-radius:50%;text-shadow:0 1px 2px #000}
.card .spd{position:absolute;top:-4px;right:-4px;width:20px;height:20px;display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:11px;
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);background:linear-gradient(180deg,#b8ff9a,#2f9a4c);color:#05210f}
.hand .card .spd{width:15px;height:15px;font-size:9px}
.playzone .card .spd{width:28px;height:28px;font-size:15px}
.tac{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--gold)}
.tac select{flex:1;min-width:0;font:inherit;font-size:12px;color:var(--fg);background:var(--ink);border:1px solid var(--gold-d);border-radius:5px;padding:2px 4px}
.result.choice{background:#05060fd9;z-index:35}
.chopts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px}
.chopts .btn{flex:1 1 200px;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px}
.chopts .btn small{font-size:12px;font-weight:500;opacity:.85;line-height:1.4}
.chtimer{width:min(420px,80vw);height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.chtimer i{display:block;height:100%;background:var(--gold);animation:chtime 10s linear forwards}
@keyframes chtime{from{width:100%}to{width:0}}
.hand .card.awake{box-shadow:0 0 0 2px #c9a6ff,0 0 14px #a77bff}
.rbtag{font-size:11px;font-weight:700;color:#c9a6ff}
.spdtag{font-family:var(--f-num);color:#9be89f;font-weight:700}
.card .cost{top:-5px;left:-5px;background:radial-gradient(circle at 35% 30%,#7fd0ff,#1e5fae);border:2px solid #cfe9ff}
.card .atk{bottom:-5px;left:-5px;background:radial-gradient(circle at 35% 30%,#7ea0ff,#29408f);border:2px solid #b9c8ff}
.card .hp{bottom:-5px;right:-5px;background:radial-gradient(circle at 35% 30%,#ff8b8f,#9c2430);border:2px solid #ffc6c8}
.card .kw{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:9px;color:var(--gold)}
.r1{--fr1:#a2724a;--fr2:#5a3a20}.r2{--fr1:#cfd6e6;--fr2:#6c7590}.r3{--fr1:#f3d27a;--fr2:#94701f}.r4{--fr1:#ffd9f7;--fr2:#7a54d6}
.sp{--fr1:#b89bff;--fr2:#4b2c9a}
.sm{--fr1:#7ff3e6;--fr2:#1b6f7c}
.card.sm .in{background:linear-gradient(180deg,#123c4a,#0b1630)}
.card.sm .cost{background:radial-gradient(circle at 35% 30%,#9ff7ea,#178a8a);border-color:#d6fff8}
.card .spd.life{clip-path:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,#c8963a);color:#2a1a00}
.slots{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.slots li{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}
.slots li.empty{display:block;color:var(--mute);text-align:center}
.slots .no{font-family:var(--f-num);color:var(--gold)}
.slots button{border:1px solid var(--line);background:transparent;border-radius:5px;padding:2px 8px;font-size:12px}
.slots button:disabled{opacity:.3}
.sptag{color:#7ff3e6;font-weight:700}
.card.sp .in{background:linear-gradient(180deg,#2c2160,#120d2b)}
.up{color:#9ff5c4}.down{color:#ffb0b0}

/* ===== デッキ編成 ===== */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:860px){.builder{grid-template-columns:1fr}}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:3px 12px;font-size:12px;color:var(--mute)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pc{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);text-align:left;width:100%}
.pc.has{border-color:var(--gold-d)}
.pc .t{display:flex;flex-direction:column;min-width:0}
.pc .t b{font-family:var(--f-display);font-size:14px}
.pcbtn{display:flex;gap:6px;margin-top:8px}
.pcbtn button{flex:1;border-radius:6px;padding:5px 0;font-size:12px;font-weight:700;border:1px solid var(--line);background:transparent}
.pcbtn .add:not(:disabled){background:linear-gradient(180deg,#f0cb72,#c8963a);color:#1d1503;border-color:transparent}
.pcbtn .sub:not(:disabled){border-color:var(--red);color:#ffb4b7}
.pcbtn button:disabled{opacity:.35;cursor:not-allowed}
.poolhint{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.poolhint.full{border-color:var(--gold);color:var(--gold)}
.pc .t p{margin:4px 0 0;font-size:12px;color:var(--mute);white-space:pre-line}
.pc .owned{font-size:11px;color:var(--gold)}
.decklist{position:sticky;top:12px}
.count{font-family:var(--f-num);font-size:22px}
.count.ok{color:var(--heal)}
.curve{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;align-items:end;height:70px;margin:10px 0 4px}
.curve div{background:linear-gradient(180deg,var(--gold),var(--gold-d));border-radius:3px 3px 0 0;min-height:2px}
.curvelab{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;font-size:11px;color:var(--mute);text-align:center;font-family:var(--f-num)}
.dl{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow:auto}
.dl button{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;text-align:left;font-size:13px}
.dl button:hover{border-color:var(--red)}
.dl .gem{font-family:var(--f-num);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#1e5fae;font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap}

/* ===== コイン・ガチャ ===== */
.coins{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:999px;border:1px solid var(--gold-d);font-family:var(--f-num);font-weight:700;color:var(--gold);margin-left:4px}
.coins i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,var(--gold) 50%,#8a6a28);box-shadow:inset 0 0 0 2px #b8902f}
/* ガチャはパネル1枚。開封動画と結果はパネルの上に重ねて出す */
.gacha{position:relative;max-width:560px;width:100%;margin:0 auto}
.gacha .gside{min-height:560px}
.gbtns{display:flex;flex-direction:column;gap:10px}
.gbtns .btn{display:flex;flex-direction:column;align-items:center;font-size:16px}
.gbtns .btn small{font-size:11px;font-weight:500;opacity:.8}
.gmsg{min-height:1.6em;margin:10px 0 0;font-size:13px;color:var(--red)}
.rates{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px;font-variant-numeric:tabular-nums}
.rates caption{text-align:left;font-weight:700;margin-bottom:4px}
.rates td{padding:4px 6px;border-top:1px solid var(--line)}
.rates td:last-child{text-align:right;font-family:var(--f-num)}
.tdot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:linear-gradient(160deg,var(--fr1),var(--fr2))}
.gstage{position:absolute;inset:0;z-index:5;border-radius:12px;border:1px solid var(--gold-d);overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#2c2f78 0%,#141838 60%,#0a0c1e 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 12px}
.pack{width:160px;height:224px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;text-align:center;
  background:linear-gradient(160deg,#5a3bc4,#22175e 55%,#120c33);border:3px solid var(--gold);box-shadow:0 10px 30px #000a,inset 0 0 30px #a77bff55;transition:opacity .3s,transform .3s}
.pk-title{font-family:var(--f-display);font-weight:800;font-size:34px;line-height:1.15;letter-spacing:.1em;color:#fff3cf;text-shadow:0 0 12px var(--gold)}
.pk-sub{font-family:var(--f-num);font-size:11px;letter-spacing:.25em;color:var(--gold)}
.pack.shake{animation:shake .12s linear infinite}
.pack.glow3{box-shadow:0 0 40px #f3d27a,0 0 90px #f3d27a88}
.pack.glow4{box-shadow:0 0 40px #ff9cf0,0 0 90px #8fd3ff,0 0 140px #ffe38a}
.pack.gone{opacity:0;transform:scale(1.4)}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-1.5deg)}50%{transform:translate(2px,-2px) rotate(1deg)}75%{transform:translate(3px,2px) rotate(1.5deg)}100%{transform:translate(0,0) rotate(0)}}
.gvid{flex:1 1 auto;min-height:0;max-width:100%;height:100%;aspect-ratio:9/16;object-fit:contain;border-radius:10px;background:#000}
.flash{position:absolute;inset:0;background:radial-gradient(circle,#fff 0%,#fff8 40%,transparent 70%);opacity:0;pointer-events:none}
.flash.on{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.gres{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;max-width:560px}
.gres:empty{display:none}
.gcard{width:84px;height:140px;perspective:700px;display:flex;flex-direction:column;align-items:center;gap:6px}
.gcard .inner{position:relative;width:84px;height:116px;transform-style:preserve-3d;transition:transform .5s ease}
.gcard.open .inner{transform:rotateY(180deg)}
.gcard .face{position:absolute;inset:0;backface-visibility:hidden}
.gcard .front{transform:rotateY(180deg)}
.gcard .back{border-radius:9px;border:2px solid var(--gold-d);background:repeating-linear-gradient(45deg,#3b2a77 0 6px,#2a1d58 6px 12px)}
.gcard.t3.open .card{box-shadow:0 0 16px #f3d27a,0 0 32px #f3d27a88}
.gcard.t4.open .card{animation:legend 1.6s linear infinite}
@keyframes legend{0%{box-shadow:0 0 18px #ff9cf0}33%{box-shadow:0 0 18px #8fd3ff}66%{box-shadow:0 0 18px #ffe38a}100%{box-shadow:0 0 18px #ff9cf0}}
.gtag{font-size:11px;font-weight:700;visibility:hidden;white-space:nowrap}
.gcard.open .gtag{visibility:visible}
.gtag.new{color:#7ef2b4}.gtag.conv{color:var(--gold)}.gtag.dup{color:var(--mute)}
.gafter{display:flex;gap:8px}
.tab{white-space:nowrap}
nav.tabs{flex-wrap:wrap;align-items:center}
@media (max-width:520px){.tab{padding:5px 11px;font-size:13px}.coins{padding:3px 10px 3px 5px}}
.gstage{overflow-y:auto;justify-content:safe center}
@media (max-width:520px){.gcard{width:62px;height:112px}.gcard .inner{width:62px;height:88px}.gres{gap:12px 8px}}
.pc.locked{opacity:.5}

/* ===== バトル ===== */
.battle{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px}
@media (max-width:900px){.battle{grid-template-columns:1fr}}
.arena{position:relative;overflow:hidden;
  /* 背景画像は ::before に敷く。ここは読みやすさ用の薄い暗幕だけ */
  background:linear-gradient(180deg,#05071aaa 0,#05071a44 220px,#05071a33 520px,#05071aaa 100%);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:620px}
.side{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap} /* 左（リーダー・情報）と右（手札）の上端をそろえる */
/* 自分の欄も1行のまま。手札が入りきらないときはカードを重ねて詰める（fitHand） */
#side0{flex-wrap:nowrap}
#side0 .stats{flex:0 0 auto;white-space:nowrap}
#side0 .hand{margin-top:4px;flex-wrap:nowrap;max-width:none;min-width:0;flex:0 1 auto;margin-left:auto;gap:0}
#side0 .hand .card{flex:0 0 auto;margin-left:4px}
#side0 .hand .card:first-child{margin-left:0}
.leader{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:40px;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#46509a,#151938);border:3px solid var(--gold)}
.leader .lhp{position:absolute;bottom:-8px;right:-8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:17px;background:radial-gradient(circle at 35% 30%,#ff8b8f,#9c2430);border:2px solid #ffc6c8}
.stats{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.stats .nm{font-family:var(--f-display);font-size:15px}
.pips{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.pip{width:10px;height:10px;border-radius:50%;border:1px solid #6ea9ff88;background:transparent}
.pip.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 6px var(--blue)}
.pip.ep{border-color:#e3b95a88}.pip.ep.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px var(--gold)}
.hand{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.hand .card{width:52px;height:72px;padding:2px}
.hand .card .art{font-size:20px;margin-top:10px}.hand .card .nm,.hand .card .kw{display:none}
.hand .card .cost{width:18px;height:18px;font-size:11px}
.hand .card .atk,.hand .card .hp{width:18px;height:18px;font-size:10px}
/* 相手の手札は常に右上。枚数が増えたら1枚ずつ縮めて1列に収める */
#side1{align-items:flex-start;flex-wrap:nowrap}
#side1 .stats{flex:1 1 auto;min-width:0}
#side1 .hand{flex-wrap:nowrap;min-width:0;flex:0 1 auto;max-width:none;margin-left:auto;gap:3px;justify-content:flex-end}
.back{flex:0 1 34px;min-width:10px;aspect-ratio:34/48;border-radius:5px;background:repeating-linear-gradient(45deg,#3b2a77 0 4px,#2a1d58 4px 8px);border:2px solid var(--gold-d)}
.field{flex:1;display:flex;justify-content:center;align-items:center;gap:10px;min-height:140px;flex-wrap:wrap;padding:6px}
.speedsel{font:inherit;font-size:12px;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 4px;margin-left:auto;cursor:pointer}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line)}
.arena.summoning .caster{opacity:.12}
.caster{transition:opacity .2s;margin:0 -10px;padding:10px 16px;text-align:center;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:linear-gradient(90deg,transparent,#05071add 12%,#05071add 88%,transparent);border-block:1px solid var(--gold-d)}
.nowrow{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;animation:castIn .25s ease}
.phase{font-size:13px;font-weight:700;padding:3px 12px;border-radius:999px;letter-spacing:.1em;white-space:nowrap;background:var(--gold);color:#1a1405}
.phase.me{background:var(--blue);color:#06122b}.phase.cpu{background:var(--red);color:#2b0507}
.caster .now{font-family:var(--f-display);font-weight:800;font-size:clamp(18px,2.8vw,28px);line-height:1.35;text-wrap:balance}
.caster .now.me{color:#b9d4ff}.caster .now.cpu{color:#ffb4b7}.caster .now.t{color:var(--gold)}
@keyframes castIn{from{transform:translateY(8px) scale(.96)}to{transform:none}}
/* 手番側を明るく、待機側を暗く */
.side,.field{transition:opacity .3s,filter .3s}
.side>*{transition:opacity .3s,filter .3s}
/* 手番でない側を暗くする表示はやめた（ユーザー指定）。手番は「行動中」の表示でわかる */
/* リーダーは手番に関係なく常に光らせる */
.leader{box-shadow:0 0 0 4px #e3b95a55,0 0 24px var(--gold)}
/* 紋章の画像を使うリーダー：画像自体に金の枠があるので、枠と背景は出さない */
.leader.gemmed{background:none;border:none;box-shadow:none}
/* 紋章は枠の中にきっちり収め、光は紋章の形に沿わせる */
.leader .licon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px #e3b95acc) drop-shadow(0 2px 3px #000a)}
.leader .lhp{z-index:1}
.acting-tag{font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;background:var(--gold);color:#1a1405;margin-left:6px;vertical-align:2px}
/* 攻撃の主役と標的 */
.attacker{box-shadow:0 0 0 3px var(--gold),0 0 22px var(--gold)!important}
.target{box-shadow:0 0 0 3px var(--red),0 0 22px var(--red)!important}
.target::before{content:"🎯";position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:18px;z-index:6}
.unit{transition:transform .25s ease,opacity .35s}
.unit.sick{filter:saturate(.7)}
.unit.ready{box-shadow:0 0 0 2px #7ef2b4aa,0 0 14px #7ef2b466}
.unit.ward::after{content:"";position:absolute;inset:-6px;border-radius:14px;border:2px solid #9fc4ff;box-shadow:0 0 10px #9fc4ff88;pointer-events:none}
.unit.evolved .in{background:linear-gradient(180deg,#4a3a18,#1a1430)}
.unit.dying{opacity:0;transform:scale(.7) rotate(-8deg)}
.lunge-up{transform:translateY(-38px) scale(1.08)!important;z-index:5}
.lunge-down{transform:translateY(38px) scale(1.08)!important;z-index:5}
.hit{animation:hit .35s}
@keyframes hit{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.float{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-family:var(--f-num);font-weight:700;font-size:24px;pointer-events:none;text-shadow:0 2px 4px #000;animation:float 1s forwards;z-index:9}
.float.dmg{color:#ff6b70}.float.heal{color:var(--heal)}.float.buf{color:var(--gold);font-size:18px}
@keyframes float{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-34px}}
.playzone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:40;isolation:isolate}
.playzone:not(:empty){background:radial-gradient(circle at 50% 50%,#05071a99 0%,#05071a66 45%,transparent 75%)}
.playzone .card{width:130px;height:180px;animation:summonIn .7s cubic-bezier(.2,.9,.3,1.2) both;transition:transform .28s ease-in,opacity .28s ease-in}
.playzone .card.leave-down{transform:translateY(160px) scale(.45);opacity:0}
.playzone .card.leave-up{transform:translateY(-160px) scale(.45);opacity:0}
@keyframes summonIn{0%{transform:scale(.15) rotate(-10deg);opacity:0;filter:brightness(3) blur(4px)}
  45%{transform:scale(1.15);opacity:1;filter:brightness(2)}100%{transform:scale(1);filter:none}}
/* 召喚の魔法陣 */
.ring{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
  border:2px dashed var(--rc);box-shadow:0 0 40px var(--rc),inset 0 0 50px var(--rc);
  background:radial-gradient(circle,transparent 40%,color-mix(in srgb,var(--rc) 30%,transparent) 62%,transparent 70%);
  animation:ringIn 1.1s ease-out both}
.ring::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid var(--rc);opacity:.7}
.ring.me{--rc:#7fb2ff}.ring.cpu{--rc:#ff7f86}.ring.spell{--rc:#c39bff}.ring.summon{--rc:#7ff3e6}
@keyframes ringIn{0%{transform:scale(.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.1) rotate(160deg);opacity:.15}}
/* 相手側カードは絵だけ反対向き */
.card.foe .art{transform:rotate(180deg)}
.playzone .card .art{font-size:58px;margin-top:30px}.playzone .card .nm{font-size:14px}
.playzone .card .cost,.playzone .card .atk,.playzone .card .hp{width:34px;height:34px;font-size:19px}
.playzone .cap{position:relative;margin-top:14px;background:#000c;padding:6px 12px;border-radius:6px;font-size:12px;max-width:min(320px,90%);text-align:left;text-align:center;white-space:pre-line}
@keyframes pop{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
.banner{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--f-display);font-size:28px;letter-spacing:.2em;pointer-events:none;z-index:15;
  background:linear-gradient(90deg,transparent,#000b 30%,#000b 70%,transparent);padding:10px 0;animation:bannerIn .2s ease-out}
/* ターン表示は位置を動かさず、その場でフェードインだけ */
@keyframes bannerIn{from{opacity:0}to{opacity:1}}
.result{position:absolute;inset:0;background:#05060fcc;display:grid;place-items:center;z-index:30}
.result .box{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.result h3{font-family:var(--f-display);font-size:48px;margin:0;letter-spacing:.2em}
.result h3.win{color:var(--gold)}.result h3.lose{color:#9aa}
.ctrl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ctrl .chip{font-family:var(--f-num)}
.log{list-style:none;margin:0;padding:0;font-size:12px;display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:560px}
.log li{padding:3px 6px;border-left:2px solid var(--line)}
.log li.t{border-color:var(--gold);color:var(--gold);font-weight:700;margin-top:6px}
.log li.me{border-color:var(--blue)}.log li.cpu{border-color:var(--red)}
.turninfo{font-family:var(--f-num);font-size:13px;color:var(--mute)}
@media (max-width:520px){
  .card{width:62px;height:88px}.card .art{font-size:24px;margin-top:12px}.card .nm{font-size:8.5px}
  .card .cost,.card .atk,.card .hp{width:20px;height:20px;font-size:12px}
  .leader{width:60px;height:60px;font-size:28px}.field{gap:6px;min-height:110px}
  .hand{max-width:100%;margin-left:0}.arena{min-height:540px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== レベル・自動冒険 ===== */
.lvchip{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;border:1px solid #2f9a4c;color:#9be89f;font-family:var(--f-num);font-weight:700;font-size:13px}
.adv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.adv{grid-template-columns:1fr}}
.advmain{display:flex;flex-direction:column;gap:12px}
.advscene{position:relative;height:140px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#05071a88,#05071a22 60%,#05071acc),url('arena_bg.webp') center 70%/cover no-repeat,#0b0e22;
  display:flex;align-items:flex-end;justify-content:center;gap:90px;padding-bottom:18px;font-size:44px}
.advscene .hero,.advscene .foe{filter:drop-shadow(0 4px 6px #000)}
.advscene .hero{animation:advWalk 1.2s ease-in-out infinite}
.advscene .foe{animation:advWalk 1.4s ease-in-out infinite reverse}
.advscene.fight .hero{animation:advHit .6s ease}
.advscene.fight .foe{animation:advHurt .6s ease}
.advhit{position:absolute;top:12px;left:0;right:0;text-align:center;font-family:var(--f-display);font-size:18px;color:var(--gold);text-shadow:0 2px 4px #000}
@keyframes advWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes advHit{0%{transform:translateX(0)}40%{transform:translateX(60px) rotate(8deg)}100%{transform:translateX(0)}}
@keyframes advHurt{0%,30%{transform:translateX(0);opacity:1}50%{transform:translateX(16px);opacity:.4}100%{transform:translateX(0);opacity:1}}
.lvbig{font-family:var(--f-num);font-size:26px;color:#9be89f}
.xpbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:4px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#2f9a4c,#9be89f);transition:width .4s}
.advpool{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:var(--panel2);border:1px solid var(--gold-d)}
.advpool b{display:block;font-family:var(--f-num);font-size:28px;color:var(--gold)}
.stage .reward{display:block;font-size:12px;color:#7ff3e6}
.stage .reward.got{color:var(--mute)}
.prize{display:flex;align-items:center;gap:14px;text-align:left;padding:10px 14px;border-radius:10px;background:#0b1630cc;border:1px solid #7ff3e6;font-size:14px}
/* 同時に出ている冒険（最大3つ） */
.parties{display:flex;flex-direction:column;gap:8px}
.party{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(90deg,#05071acc,#05071a55),url('arena_bg.webp') center 70%/cover no-repeat,#0b0e22}
.party.locked{grid-template-columns:auto 1fr;background:var(--panel2);opacity:.7}
.pno{font-family:var(--f-num);font-size:12px;color:var(--gold);white-space:nowrap}
.pscene{display:flex;justify-content:center;gap:48px;font-size:32px}
.pscene .hero,.pscene .foe{filter:drop-shadow(0 3px 4px #000)}
.pscene .hero{animation:advWalk 1.2s ease-in-out infinite}
.pscene .foe{animation:advWalk 1.4s ease-in-out infinite reverse}
.party.fight .hero{animation:advHit .6s ease}
.party.fight .foe{animation:advHurt .6s ease}
.parea{font-size:13px;text-align:right;white-space:nowrap}
.parea small{display:block;font-size:11px;color:#9be89f}
.adv .advhit{position:static;margin:0;min-height:1.4em}
@media (max-width:520px){.pscene{gap:24px;font-size:26px}.parea{white-space:normal}}
/* ホームの「冒険に出る（オートRPG）」パネル */
.homeadv{display:flex;flex-direction:column;gap:10px;min-width:0}
.hparties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.hparties li:not(.hscene){display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.hparties li.off{opacity:.6}
.hparties li:not(.hscene) small{margin-left:6px;color:#9be89f;font-size:11px}
.homeadv .advpool{flex-wrap:wrap}
.homeadv .advpool b{font-size:24px}
/* 放置探索：カードの絵どうしが向かい合って打ち合う */
.backbtn{padding:5px 14px;font-size:13px}
.party{grid-template-columns:auto minmax(0,1fr) auto}
.pscene{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.fighter{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.fighter img{width:56px;height:77px;object-fit:cover;border-radius:6px;border:2px solid var(--gold-d);box-shadow:0 3px 8px #000a;display:block}
.fighter.foe img{border-color:#c0505a}
.fighter figcaption{font-size:10px;color:var(--fg);text-shadow:0 1px 2px #000;white-space:nowrap}
.fighter .dmg{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-family:var(--f-num);font-size:18px;color:#ff6b70;text-shadow:0 2px 3px #000;opacity:0;pointer-events:none}
.vs{font-family:var(--f-num);font-size:12px;color:var(--gold);opacity:.8}
/* 1.6秒で：味方が踏み込んで斬る → 相手がひるむ → 相手が踏み込んで反撃 → 味方がひるむ */
.party .fighter.hero{animation:advWalk 1.2s ease-in-out infinite}
.party .fighter.foe{animation:advWalk 1.4s ease-in-out infinite reverse}
.party.fight .fighter.hero{animation:duelHero 1.6s ease}
.party.fight .fighter.foe{animation:duelFoe 1.6s ease}
.party.fight .fighter.foe .dmg{animation:duelDmg .6s ease .25s}
.party.fight .fighter.hero .dmg{animation:duelDmg .6s ease 1.05s}
@keyframes duelHero{0%{transform:none}15%{transform:translateX(34px) rotate(6deg)}30%{transform:none}55%{transform:none}62%{transform:translateX(-6px);filter:brightness(2.2)}70%{transform:translateX(4px)}80%,100%{transform:none;filter:none}}
@keyframes duelFoe{0%,15%{transform:none}22%{transform:translateX(6px);filter:brightness(2.2)}30%{transform:translateX(-4px)}40%{transform:none;filter:none}50%{transform:none}65%{transform:translateX(-34px) rotate(-6deg)}80%,100%{transform:none}}
@keyframes duelDmg{0%{opacity:0;margin-top:6px}20%{opacity:1}100%{opacity:0;margin-top:-22px}}
@media (prefers-reduced-motion:reduce){.party .fighter{animation:none!important}}
.pno small{display:block;font-size:10px;color:var(--mute);font-family:var(--f-body)}
.fighter .ficon{display:grid;place-items:center;width:56px;height:77px;font-size:34px;border-radius:6px;border:2px solid #c0505a;background:#141833}
/* 複数デッキ（デッキ1〜3）の切り替えと、探索枠のデッキ選択 */
.decktabs{display:flex;gap:6px;margin:6px 0 10px;flex-wrap:wrap}
.builder>.decktabs{grid-column:1/-1;margin:0}
.dtab{flex:1 1 80px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:700;font-size:13px}
.dtab small{font-size:10px;font-weight:500}
.dtab[aria-selected="true"]{border-color:var(--gold);color:var(--gold);background:#e3b95a14}
.decksel{display:block;margin-top:4px;font:inherit;font-size:11px;color:var(--fg);background:var(--ink);border:1px solid var(--gold-d);border-radius:5px;padding:1px 4px;max-width:150px}
.party.idle{grid-template-columns:auto 1fr auto;background:var(--panel2)}

/* 選んでいるデッキが10枚に足りないときの案内（ステージ一覧の上） */
.stagewarn{margin:10px 0 0;padding:10px 12px;border:1px solid var(--red);border-radius:10px;background:#e0575714;font-size:13px}
.stagewarn p{margin:0 0 8px}
.stagewarn .row{gap:8px}

/* カード一覧の絞り込みの右に置く「おまかせ編成」 */
.chip.autochip{border-color:var(--gold);color:var(--gold)}

/* たまったコインの数字の右の「コイン」 */
#hPool .unit,#advPool .unit{font-size:14px;margin-left:4px;font-weight:700}

/* ホームの探索枠：行の下に戦いの場面 */
.hparties li.hscene{margin:0 0 4px}
.hparties .party{gap:8px;padding:6px 10px}

/* ルール説明はステージ一覧の下 */
.homestage .rules{margin-top:14px}

/* ホームは左右2本の列。それぞれの列は欄を上から詰めて積む（片方が長くても、もう片方に空きができない） */
.home{align-items:start}
.hcol{display:flex;flex-direction:column;gap:16px;min-width:0}
/* スマホ幅（1列）：列の枠をなくして、放置探索 → あなたのデッキ → 挑戦するステージ → そのほか の順に並べる */
@media (max-width:820px){
  .home{display:flex;flex-direction:column;align-items:stretch} /* 1列のときは欄を横幅いっぱいに */
  .hcol{display:contents}
  .homeadv{order:0}.homedeck{order:1}.homestage{order:2}
  .home .datapanel{order:3}.home .homeledger{order:4}.home .homedata{order:5}
}

/* ホームの探索枠の行：デッキ名の右の「戦闘開始」 */
.fightbtn{margin-left:10px;padding:2px 10px;border-radius:999px;border:1px solid var(--gold);background:linear-gradient(180deg,#e3b95a,#b98a2e);color:#1a1405;font-weight:800;font-size:12px;cursor:pointer;vertical-align:middle}
.fightbtn:disabled{opacity:.45;cursor:not-allowed}
.fighting{margin-left:10px;padding:2px 10px;border-radius:999px;border:1px solid #9be89f;color:#9be89f;font-size:12px;font-weight:700}

/* 探索：敵を倒して次のカードに交代したときの登場 */
.party .fighter.hero.swapin{animation:heroSwap .9s ease!important}
@keyframes heroSwap{0%{transform:translateY(-14px) scale(.6);opacity:0;filter:brightness(2.2)}60%{transform:translateY(0) scale(1.08);opacity:1;filter:brightness(1.6) drop-shadow(0 0 10px var(--gold))}100%{transform:none;filter:none}}

/* 放置探索の場面の絵は押すと拡大 */
.fighter img[data-cid]{cursor:zoom-in}

/* ホームの放置探索：Lvの左の「放置RPG」 */
.advtitle{font-family:var(--f-display);font-size:20px;letter-spacing:.05em;margin-right:10px} /* 「挑戦するステージ」(h2)と同じ大きさ */

/* ホームの「スマホで遊ぶ」：QRコード */
.qrrow{display:flex;gap:14px;align-items:center;margin-top:8px}
.qrrow img{flex:none;border-radius:8px;background:#fff;image-rendering:pixelated}
@media (max-width:820px){.home .homeqr{order:6}}

/* スマホ幅：探索の場面は「デッキ名・選択欄」「カードの絵」「場所」を縦に並べ、絵を本来の大きさで出す */
@media (max-width:560px){
  .party:not(.locked):not(.idle){grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px}
  .party:not(.locked):not(.idle) .pno{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;white-space:normal}
  .party:not(.locked):not(.idle) .pno small{display:inline}
  .party:not(.locked):not(.idle) .pscene{gap:28px}
  .party:not(.locked):not(.idle) .fighter img,.party:not(.locked):not(.idle) .fighter .ficon{width:84px;height:116px}
  .party:not(.locked):not(.idle) .parea{text-align:center}
}
.fighting,.fightbtn{display:inline-block;white-space:nowrap}

/* レア度の札（カードの下の真ん中、攻撃と体力の間）：N・R・SR・SSR */
.card .rare{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);z-index:2;padding:0 7px;height:16px;line-height:14px;border-radius:8px;font-family:var(--f-num);font-weight:800;font-size:10px;letter-spacing:.04em;border:1px solid;box-shadow:0 1px 3px #000a;white-space:nowrap}
.card .rare.rt1{background:linear-gradient(180deg,#8a5a34,#4e2f17);border-color:#c99a6b;color:#ffe2c4}
.card .rare.rt2{background:linear-gradient(180deg,#dfe5f1,#8b94ad);border-color:#f4f7ff;color:#1d2438}
.card .rare.rt3{background:linear-gradient(180deg,#ffe48f,#c0902a);border-color:#fff2c2;color:#3a2700}
.card .rare.rt4{background:linear-gradient(90deg,#ff7ad9,#a77bff,#6ea9ff,#5bd49b);border-color:#fff;color:#fff;text-shadow:0 1px 2px #000}

/* ===== 四隅の数字：役割ごとに形と色を分けた宝石（金属の縁＋中の宝石＋黒縁の白い数字） =====
   コスト＝六角形の青い結晶、速さ＝矢じり形の緑、攻撃＝八角形の琥珀、体力＝盾形の赤。サモンのSPは青緑、寿命は金の丸 */
.card .cost,.card .atk,.card .hp,.card .spd{border:none!important;border-radius:0!important;isolation:isolate;color:#fff;font-weight:800;
  text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 2px 3px #000c;font-variant-numeric:tabular-nums;line-height:1}
.card .cost::before,.card .atk::before,.card .hp::before,.card .spd::before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit}
/* コスト：六角形の青い結晶 */
.card .cost{clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);background:linear-gradient(160deg,#f2fbff,#7fb8f0 40%,#1d3f86 75%,#a9d4ff)}
.card .cost::before{background:radial-gradient(circle at 50% 28%,#b9ecff 0,#3a9cf0 38%,#1350b4 70%,#0a2560)}
.card.sm .cost{background:linear-gradient(160deg,#f0fffb,#7fe6d6 40%,#0e5b5b 75%,#b5fff2)}
.card.sm .cost::before{background:radial-gradient(circle at 50% 28%,#d6fff7 0,#3fd6c2 38%,#138c86 70%,#073f42)}
/* 攻撃：八角形の琥珀 */
.card .atk{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(160deg,#fff6d8,#e7b45a 40%,#6b3a0c 75%,#ffd98a)}
.card .atk::before{background:radial-gradient(circle at 50% 28%,#ffe7a6 0,#f39a2a 40%,#b2520f 72%,#4d1c04)}
/* 体力：盾形の赤 */
.card .hp{clip-path:polygon(50% 0,96% 14%,92% 66%,50% 100%,8% 66%,4% 14%);background:linear-gradient(160deg,#fff0f0,#e88a8f 40%,#6b0f1a 75%,#ffb3b6)}
.card .hp::before{background:radial-gradient(circle at 50% 26%,#ffc0c3 0,#f0434f 40%,#a3101f 72%,#45040b)}
/* 速さ：矢じり形の緑 */
.card .spd{clip-path:polygon(50% 0,100% 40%,80% 100%,20% 100%,0 40%);background:linear-gradient(160deg,#f2fff0,#8fe39a 40%,#155c2b 75%,#c3ffc8)}
.card .spd::before{background:radial-gradient(circle at 50% 32%,#d7ffc9 0,#52cf6c 40%,#1b8a3d 72%,#07391a)}
/* サモンの寿命：金の丸 */
.card .spd.life{clip-path:circle(50%);color:#fff;background:linear-gradient(160deg,#fffbe6,#e8c46a 40%,#6b4a0c 75%,#ffe9a8)}
.card .spd.life::before{background:radial-gradient(circle at 50% 28%,#fff1b8 0,#e2ad3e 42%,#94620f 72%,#3e2603)}
/* 強化されたとき（緑）・ダメージを受けたとき（赤）の数字の色 */
.card .atk.up,.card .hp.up{color:#8dffb8}
.card .hp.down{color:#ffb4b4}
/* レア度の札：場に出すときの大きいカードでは大きく、手札の小さいカードでは小さく */
.playzone .card .rare{bottom:-8px;height:22px;line-height:20px;padding:0 10px;font-size:14px;border-radius:11px}
.hand .card .rare{bottom:-5px;height:13px;line-height:11px;padding:0 4px;font-size:8px}
@media (max-width:520px){.card .rare{bottom:-5px;height:13px;line-height:11px;padding:0 4px;font-size:8px}}

/* ===== 四隅の数字：宝石の絵（ui/gem_*.webp）を使う。サモンの寿命だけは金の丸のまま =====
   コスト＝青、攻撃＝琥珀、体力＝赤、速さとサモンのSP＝水色の花飾り */
.card .cost,.card .atk,.card .hp,.card .spd:not(.life){clip-path:none!important;background:none!important}
.card .cost::before,.card .atk::before,.card .hp::before,.card .spd:not(.life)::before{inset:-28% -22%;clip-path:none;background:center/contain no-repeat;filter:drop-shadow(0 2px 2px #000b)}
.card .cost::before{background-image:url(ui/gem_cost.webp)}
.card.sm .cost::before{background:url(ui/gem_spd.webp) center/contain no-repeat}
.card .atk::before{background-image:url(ui/gem_atk.webp)}
.card .hp::before{background-image:url(ui/gem_hp.webp)}
.card .spd:not(.life)::before{background-image:url(ui/gem_spd.webp)}
.card .cost,.card .atk,.card .hp{font-size:15px}.card .spd{font-size:12px}