:root { --bg:#120f1f; --panel:#1d1930; --panel2:#262040; --fg:#f6f3ff; --mute:#a9a2c8; --line:#352f52; --gold:#ffd166; --accent:#7c5cff; --pink:#ff6b9d; --good:#3ddc84; --bad:#ff6b6b;
  --f1a:#b5bacb; --f1b:#5d6275; --f2a:#7be3a5; --f2b:#2f8f62; --f3a:#7cc4ff; --f3b:#3466d6; --f4a:#d3a8ff; --f4b:#7a3cf0; --f5a:#ffe08a; --f5b:#e0a01c; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { overflow-x:hidden; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif; }
body { min-height:100svh; display:flex; flex-direction:column; align-items:center; padding:8px 16px 32px; overflow-x:hidden;
  background:radial-gradient(120% 60% at 50% -10%, #2c1f5c 0%, var(--bg) 60%) fixed; }
.wrap { width:100%; max-width:480px; display:flex; flex-direction:column; align-items:stretch; }
button { font-family:inherit; }
[hidden] { display:none !important; }

/* 上の帯 */
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.logo { background:none; border:0; color:var(--fg); font-weight:900; font-size:18px; padding:6px 0; cursor:pointer; }
.logo span { color:var(--gold); margin-left:2px; }
.topr { display:flex; gap:6px; }
.pill { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:999px; padding:8px 13px; font-size:14px; font-weight:800; cursor:pointer; }
.pill b { color:var(--gold); }
.q-pill { padding:8px 11px; }

.screen { display:none; flex-direction:column; align-items:stretch; }
.screen.on { display:flex; }

/* ボタン */
.btn { display:block; text-align:center; width:100%; padding:15px; border-radius:16px; border:0; font-size:17px; font-weight:900; cursor:pointer; margin-top:10px; touch-action:manipulation; color:var(--fg); }
.btn.primary { background:linear-gradient(135deg,#7c5cff,#ff6b9d); color:#fff; box-shadow:0 6px 20px rgba(124,92,255,.35); }
.btn.big { padding:20px; font-size:19px; }
.btn.ghost { background:var(--panel); border:1px solid var(--line); }
.btn.small { padding:10px; font-size:14px; margin-top:6px; }
.btn:active, .cmd:active, .qchip:active { transform:scale(.97); }
.btn:disabled { opacity:.4; }
.row { display:flex; gap:10px; }
.row .btn { flex:1; }
.row.two .btn { font-size:15px; padding:13px 6px; }
.link { background:none; border:0; color:var(--mute); font-weight:800; font-size:13px; cursor:pointer; padding:4px 0; }
.note { color:#7d779a; font-size:12px; line-height:1.7; text-align:center; margin-top:16px; }
.note.tight { margin:0 0 6px; }
.sec { color:var(--mute); font-size:12px; font-weight:800; margin:18px 0 0; text-align:center; letter-spacing:.1em; }
.lead { color:var(--mute); font-size:13px; text-align:center; margin:0 0 10px; }
.empty { color:var(--mute); text-align:center; margin:24px 0; line-height:1.7; }
.h2 { font-size:22px; margin:6px 0; text-align:center; }
.q { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:12px; font-weight:900; margin-left:5px; cursor:pointer; padding:0; vertical-align:middle; flex:none; }
.q::before { content:""; position:absolute; } /* 押しやすさは周りの余白で確保 */

/* ホーム */
.hero { font-size:30px; line-height:1.35; margin:14px 0 10px; text-align:center; font-weight:900; }
.hero span { background:linear-gradient(90deg,#ffd166,#ff6b9d,#a58bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.howto { list-style:none; display:flex; justify-content:center; align-items:center; gap:4px; margin:0 0 6px; padding:0; }
.howto li { display:flex; flex-direction:column; align-items:center; font-size:13px; font-weight:900; color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 12px; min-width:76px; }
.howto li i { font-style:normal; font-size:26px; line-height:1.2; }
.howto li.arw { background:none; border:0; min-width:0; padding:0; color:var(--gold); font-size:22px; }
.btn.shoot { margin-top:12px; padding:20px; font-size:20px; background:linear-gradient(135deg,#ffd166,#ff6b9d 55%,#7c5cff); color:#1a1030; box-shadow:0 8px 28px rgba(255,107,157,.45); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn.shoot span { font-size:26px; }
.prep { text-align:center; font-size:12px; color:var(--mute); margin:6px 0 0; font-weight:700; }
.mine { margin-top:16px; }
.sec-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.sec-h b { font-size:15px; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 8px; color:var(--fg); font-size:17px; font-weight:900; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tile span { font-size:32px; } .tile small { color:var(--mute); font-size:12px; font-weight:700; }
.prog { display:block; width:80%; height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:4px; }
.prog b { display:block; height:100%; width:0; background:linear-gradient(90deg,#3ddc84,#ffd166); border-radius:3px; transition:width .5s; }
.prog.big { width:100%; height:10px; border-radius:5px; margin:2px 0 12px; }
.qrow { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.qchip { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:800; cursor:pointer; text-decoration:none; }
.qchip b { display:inline-block; background:rgba(255,255,255,.18); border-radius:50%; width:17px; height:17px; line-height:17px; text-align:center; font-size:11px; margin-left:2px; }
.challenge { background:linear-gradient(135deg,#3a1d5c,#5c1d3a); border-radius:18px; padding:14px; margin:4px 0 6px; border:1px solid #ff6b9d55; }
.ch-title { margin:0 0 10px; font-weight:900; text-align:center; font-size:17px; }
.ch-card { display:flex; gap:12px; align-items:center; }
.ch-card .card.mini { width:96px; flex:none; cursor:pointer; }
.ch-info .nm { font-weight:900; font-size:16px; margin-bottom:4px; }
.ch-info .sub { font-size:13px; color:#e8e1ff; }

/* カード（表面） */
.card { --ty:#888; --fa:var(--f1a); --fb:var(--f1b); position:relative; border-radius:20px; padding:10px; color:var(--fg);
  border:4px solid transparent; background:linear-gradient(170deg, color-mix(in srgb, var(--ty) 34%, #1b1730), #16122a 62%) padding-box, linear-gradient(140deg,var(--fa),var(--fb)) border-box;
  box-shadow:0 10px 30px rgba(0,0,0,.45); overflow:hidden; user-select:none; }
.card.r2 { --fa:var(--f2a); --fb:var(--f2b); } .card.r3 { --fa:var(--f3a); --fb:var(--f3b); } .card.r4 { --fa:var(--f4a); --fb:var(--f4b); box-shadow:0 0 22px rgba(167,108,255,.5); }
.card.r5 { --fa:var(--f5a); --fb:var(--f5b); box-shadow:0 0 28px rgba(255,209,102,.55); }
.card.r6 { background:linear-gradient(170deg, color-mix(in srgb, var(--ty) 34%, #1b1730), #16122a 62%) padding-box, conic-gradient(from 0deg,#ff8ad8,#ffd166,#7cf3ff,#a58bff,#ff8ad8) border-box; box-shadow:0 0 36px rgba(255,138,216,.6); }
.card.r4::after, .card.r5::after, .card.r6::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 58%); animation:shine 3s infinite; pointer-events:none; }
.card.r6::after { background:linear-gradient(115deg,transparent 25%,rgba(255,138,216,.3) 38%,rgba(124,243,255,.3) 48%,transparent 60%); }
@keyframes shine { from { transform:translateX(-110%); } to { transform:translateX(110%); } }
.cf-head { min-width:0; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cf-ty { width:30px; height:30px; flex:none; border-radius:50%; background:var(--ty); display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); }
.cf-head .cf-name { flex:1; min-width:0; font-weight:900; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-lv { font-weight:900; font-size:18px; color:#fff; background:rgba(0,0,0,.35); border-radius:10px; padding:2px 8px; margin-left:auto; font-variant-numeric:tabular-nums; }
.cf-art { position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#0c0a16; }
.cf-art img { width:100%; height:100%; object-fit:cover; display:block; }
.mosaic { width:100%; height:100%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); }
.cf-stars { position:absolute; left:8px; bottom:6px; color:var(--gold); font-size:18px; letter-spacing:1px; text-shadow:0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); }
.cf-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:10px; }
.cf-stat { display:grid; grid-template-columns:20px 1fr 34px; align-items:center; gap:4px; font-size:13px; font-weight:900; }
.cf-stat .n { text-align:right; font-variant-numeric:tabular-nums; }
.cf-stat i, .srow i, .ls i { display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.cf-stat i b, .srow i b, .ls i b { display:block; height:100%; background:linear-gradient(90deg,var(--ty,#7c5cff),#fff); border-radius:4px; transition:width .6s ease-out; }
.card.mini { padding:6px; border-width:3px; border-radius:14px; }
.card.mini .cf-head { margin:0; position:absolute; top:9px; left:9px; right:9px; z-index:1; }
.card.mini .cf-ty { width:22px; height:22px; font-size:12px; }
.card.mini .cf-lv { font-size:12px; padding:1px 6px; border-radius:8px; }
.card.mini .cf-art { border-radius:10px; }
.card.mini .cf-stars { font-size:11px; left:5px; bottom:3px; }
.card.mini > .cf-name { display:block; font-size:11px; font-weight:800; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* スワイプ一覧 */
.car-wrap { position:relative; margin:0 -16px; }
.carousel { position:relative; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px calc(50% - 36%) 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; outline:none; }
.carousel::-webkit-scrollbar { display:none; }
/* 全カード同じ大きさ（名前の長さで幅が変わらないよう min-width:0・中身は幅いっぱい）。真ん中以外は少し暗くするだけ */
.slide { flex:0 0 100%; width:100%; min-width:0; max-width:100%; scroll-snap-align:center; scroll-snap-stop:always; transition:opacity .25s; opacity:.55; cursor:pointer; }
.slide > .card { width:100%; min-width:0; }
.slide.on { opacity:1; }
.car-nav { position:absolute; top:42%; width:36px; height:36px; border-radius:50%; border:0; background:rgba(0,0,0,.45); color:#fff; font-size:22px; font-weight:900; cursor:pointer; z-index:2; }
.car-nav.prev { left:6px; } .car-nav.next { right:6px; }
.car-nav:disabled { opacity:0; pointer-events:none; }
.car-foot { display:flex; justify-content:center; align-items:center; gap:10px; }
.dots { display:flex; gap:5px; }
.dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:all .2s; }
.dots i.on { background:var(--gold); width:16px; border-radius:3px; }
.car-count { font-size:12px; font-weight:800; color:var(--mute); font-variant-numeric:tabular-nums; }

/* 引く演出 */
.stage { position:relative; min-height:300px; display:flex; flex-direction:column; align-items:center; padding-top:6px; }
.stage > .card.big { width:min(100%,330px); cursor:pointer; }
.pack { width:min(100%,330px); aspect-ratio:3/4.3; border-radius:22px; border:4px solid #4a4170; cursor:pointer; color:#fff;
  background:radial-gradient(circle at 50% 40%, #3a2f66, #1a1530 70%), repeating-linear-gradient(45deg,#2a2440 0 14px,#231e36 14px 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; animation:shake .45s infinite; }
.pk-logo { font-size:72px; filter:drop-shadow(0 0 12px rgba(255,255,255,.4)); }
.pk-tap { font-size:13px; font-weight:800; color:var(--mute); }
.pack.g3 { box-shadow:0 0 40px #7cc4ff; border-color:#7cc4ff; }
.pack.g4 { box-shadow:0 0 50px #b07bff; border-color:#d3a8ff; animation:shake .3s infinite; }
.pack.g5 { box-shadow:0 0 70px var(--gold); border-color:var(--gold); animation:shake .22s infinite; }
.pack.g6 { box-shadow:0 0 90px #ff8ad8, 0 0 30px #fff; border-color:#fff; animation:shake .18s infinite, hue 1s linear infinite; }
@keyframes shake { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-2deg) scale(1.02); } 75% { transform:rotate(2deg) scale(1.02); } }
@keyframes hue { to { filter:hue-rotate(360deg); } }
.flip-in { animation:flip .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes flip { from { transform:perspective(800px) rotateY(90deg) scale(.7); opacity:0; } to { transform:perspective(800px) rotateY(0) scale(1); opacity:1; } }
.stage.fx.r5::before, .stage.fx.r6::before, .stage.fx.r4::before { content:""; position:absolute; left:50%; top:45%; width:620px; height:620px; margin:-310px 0 0 -310px; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,209,102,.22) 0 10deg, transparent 10deg 24deg); border-radius:50%; animation:spin 9s linear infinite; mask:radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask:radial-gradient(circle, #000 20%, transparent 68%); }
.stage.fx.r4::before { background:repeating-conic-gradient(from 0deg, rgba(180,120,255,.22) 0 10deg, transparent 10deg 24deg); }
.stage.fx.r6::before { background:repeating-conic-gradient(from 0deg, rgba(255,138,216,.28) 0 8deg, rgba(124,243,255,.22) 8deg 16deg, transparent 16deg 26deg); }
.stage { isolation:isolate; overflow:hidden; overflow:clip; margin:0 -16px; padding:24px 16px 20px; }
.burst { text-align:center; font-weight:900; font-size:30px; color:var(--gold); margin:0 0 8px; text-shadow:0 0 18px rgba(255,209,102,.8); animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.stage.r6 .burst { background:linear-gradient(90deg,#ff8ad8,#ffd166,#7cf3ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes burst { from { transform:scale(2.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.spark { position:absolute; width:10px; height:10px; pointer-events:none; background:radial-gradient(circle,#fff 0 30%,transparent 70%); border-radius:50%; animation:spark 1.4s ease-out forwards; }
@keyframes spark { 0% { transform:scale(0); opacity:1; } 60% { transform:scale(2.4); opacity:1; } 100% { transform:scale(0); opacity:0; } }
.tap-hint { text-align:center; color:var(--mute); font-size:12px; font-weight:800; margin:8px 0 0; }
.world { text-align:center; font-weight:900; font-size:15px; line-height:1.6; margin:10px 0 2px; }
.world b { display:block; }
.world small { display:block; font-size:11px; color:var(--mute); font-weight:700; margin:2px 0; }
.world p { margin:0; } .world em { font-style:normal; color:var(--gold); font-size:20px; }
.world .w2 { font-size:13px; color:#e8e1ff; }
.share { margin-top:6px; }

/* 図鑑 */
.z-head { display:flex; justify-content:space-between; align-items:flex-end; }
.z-head .h2 { margin:6px 0 4px; }
.z-prog { margin:0 0 6px; font-weight:900; text-align:right; }
.z-prog b { font-size:28px; color:var(--gold); } .z-prog span { font-size:14px; }
.z-prog small { display:block; font-size:11px; color:var(--mute); }
.cats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.cat { position:relative; aspect-ratio:1/1.18; border-radius:12px; border:2px dashed var(--line); background:var(--panel); padding:0; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--fg); }
.cat.got { border:2px solid #ffd16688; }
.cat.sel { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.cat img, .cat .mosaic { position:absolute; inset:0; width:100%; height:78%; object-fit:cover; }
.cat .sil { font-size:24px; filter:grayscale(1) brightness(.35); margin-bottom:12px; }
.cat small { position:absolute; bottom:2px; left:0; right:0; font-size:9px; font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; color:var(--mute); }
.cat.got small { color:var(--fg); }
.cat .cn { position:absolute; top:3px; right:3px; background:var(--gold); color:#1a1030; font-size:10px; font-weight:900; border-radius:8px; padding:0 5px; }
.z-tools { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:14px 0 6px; }
.filters { display:flex; gap:5px; flex-wrap:wrap; }
.fchip { border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:999px; padding:6px 10px; font-size:13px; font-weight:800; cursor:pointer; }
.fchip.on { background:var(--fg); color:#1a1030; }
.sortbar { display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:12px; color:var(--mute); font-weight:800; margin:0 0 6px; }
.sortbar select { font-size:14px; padding:6px 8px; border-radius:10px; background:var(--panel); color:var(--fg); border:1px solid var(--line); font-family:inherit; font-weight:800; }
.list { display:flex; flex-direction:column; gap:6px; }
.lrow { --ty:#888; display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center; width:100%; text-align:left; padding:7px; border-radius:14px; border:1px solid var(--line); border-left:4px solid var(--ty); background:var(--panel); color:var(--fg); cursor:pointer; }
.lrow.r4 { box-shadow:inset 0 0 0 1px #b07bff66; } .lrow.r5 { box-shadow:inset 0 0 0 1px #ffd16699; } .lrow.r6 { box-shadow:inset 0 0 0 1px #ff8ad8aa; }
.lthumb { width:56px; height:56px; border-radius:10px; overflow:hidden; background:#0c0a16; display:block; }
.lthumb img, .lthumb .mosaic { width:100%; height:100%; object-fit:cover; display:grid; }
.lbody { min-width:0; display:flex; flex-direction:column; gap:3px; }
.l1 { display:flex; align-items:center; gap:5px; min-width:0; }
.lty { font-size:14px; } .lnm { flex:1; min-width:0; font-weight:900; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.llv { font-weight:900; font-size:13px; background:rgba(0,0,0,.3); border-radius:8px; padding:0 6px; }
.l2 { display:flex; justify-content:space-between; font-size:11px; font-weight:800; }
.lst { color:var(--gold); } .lpw { color:var(--mute); }
.l3 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ls { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ls .lsn { font-size:11px; font-weight:900; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ls i { height:4px; }
.ls.hl .lsn { color:var(--gold); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cell { min-width:0; position:relative; padding:0; border:0; background:none; cursor:pointer; color:var(--fg); }
.mbadge { position:absolute; bottom:22px; right:6px; font-size:10px; font-weight:900; border-radius:8px; padding:1px 6px; z-index:2; }
.mbadge.good { background:var(--good); color:#06210f; } .mbadge.bad { background:var(--bad); color:#2a0606; }
.vsbox { display:flex; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px; margin-bottom:8px; }
.vsbox .card.mini { width:72px; flex:none; }
.vsbox div { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.vsbox .good { color:var(--good); font-weight:900; }

/* 対戦 */
.b-head { text-align:center; color:var(--mute); font-weight:800; margin:2px 0 6px; }
.arena { display:flex; flex-direction:column; gap:6px; }
.fighter { --ty:#888; position:relative; display:flex; gap:10px; align-items:center; background:linear-gradient(90deg, color-mix(in srgb, var(--ty) 22%, var(--panel)), var(--panel)); border:1px solid var(--line); border-radius:16px; padding:10px; }
.fighter.op { flex-direction:row-reverse; text-align:right; }
.fighter.full { box-shadow:0 0 0 2px var(--gold), 0 0 18px rgba(255,209,102,.4); }
.fighter.hit { animation:hit .3s; }
.fighter.guarding .pic { box-shadow:0 0 0 3px #7cc4ff, 0 0 16px #7cc4ff; }
@keyframes hit { 0%,100% { transform:translateX(0); } 30% { transform:translateX(-8px); } 60% { transform:translateX(8px); } }
.fighter .pic { position:relative; width:76px; height:76px; border-radius:14px; flex:none; overflow:hidden; padding:0; border:3px solid var(--f1a); background:#000; cursor:pointer; }
.fighter .pic.r2 { border-color:var(--f2a); } .fighter .pic.r3 { border-color:var(--f3a); } .fighter .pic.r4 { border-color:var(--f4a); } .fighter .pic.r5 { border-color:var(--f5a); } .fighter .pic.r6 { border-color:#ff8ad8; }
.fighter .pic img, .fighter .pic .mosaic { width:100%; height:100%; object-fit:cover; display:grid; }
.pty { position:absolute; left:2px; bottom:2px; width:22px; height:22px; border-radius:50%; background:var(--ty); font-size:12px; display:flex; align-items:center; justify-content:center; }
.fighter .info { flex:1; min-width:0; }
.fighter .nm { display:flex; gap:6px; align-items:baseline; font-weight:900; font-size:15px; min-width:0; }
.fighter.op .nm { flex-direction:row-reverse; }
.fighter .nm span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.fighter .nm small { color:var(--mute); flex:none; }
.hp { height:12px; background:#0c0a16; border-radius:6px; overflow:hidden; margin-top:5px; }
.hp b { display:block; height:100%; background:var(--good); transition:width .35s; }
.fighter.op .hp b { margin-left:auto; }
.hp b.low { background:var(--bad); }
.meta { display:flex; justify-content:space-between; font-size:11px; color:var(--mute); margin-top:3px; font-variant-numeric:tabular-nums; font-weight:700; }
.fighter.op .meta { flex-direction:row-reverse; }
.gauge { height:6px; border-radius:3px; background:#0c0a16; overflow:hidden; margin-top:3px; }
.gauge b { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffd166,#ff6b9d); transition:width .3s; }
.fighter.op .gauge b { margin-left:auto; }
.intent { position:absolute; left:10px; top:-12px; background:#fff; color:#1a1030; border-radius:12px; padding:2px 8px 2px 4px; display:flex; align-items:center; gap:3px; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.4); z-index:2; }
.intent:empty { display:none; }
.intent .ii { font-size:16px; } .intent small { font-size:11px; }
.intent.i-special { background:var(--gold); animation:pulse .8s infinite; }
@keyframes pulse { 50% { transform:scale(1.08); } }
.vsline { text-align:center; font-weight:900; font-size:13px; color:var(--mute); display:flex; justify-content:center; align-items:center; padding:2px 0; }
.vsline.good { color:var(--good); } .vsline.bad { color:var(--bad); }
.float { position:absolute; top:20%; left:50%; transform:translateX(-50%); font-weight:900; font-size:26px; color:#fff; text-shadow:0 2px 6px #000; pointer-events:none; animation:float .9s ease-out forwards; z-index:3; }
.float.big { font-size:36px; color:var(--gold); } .float.heal { color:var(--good); } .float.back { color:#7cc4ff; }
@keyframes float { from { opacity:1; transform:translate(-50%,0); } to { opacity:0; transform:translate(-50%,-40px); } }
.cmds { margin-top:10px; }
.turn { text-align:center; color:var(--mute); font-weight:800; font-size:12px; margin:0 0 6px; }
.cmd3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cmd { position:relative; overflow:hidden; border:0; border-radius:16px; padding:12px 4px 10px; min-height:92px; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; gap:2px; touch-action:manipulation; }
.cmd i { font-style:normal; font-size:28px; line-height:1.1; position:relative; z-index:1; } .cmd b { font-size:15px; position:relative; z-index:1; } .cmd small { font-size:11px; opacity:.9; font-weight:800; position:relative; z-index:1; }
.cmd.atk { background:linear-gradient(160deg,#ff7a45,#d6336c); }
.cmd.grd { background:linear-gradient(160deg,#4fa3ff,#3550c8); }
.cmd.sp { background:#2b2546; color:var(--mute); }
.cmd.sp .fillbar { position:absolute; left:0; bottom:0; height:100%; width:0; background:linear-gradient(0deg,#ffd16655,#ff6b9d33); transition:width .3s; }
.cmd.sp.ready { background:linear-gradient(160deg,#ffd166,#ff6b9d); color:#1a1030; animation:glow 1s infinite; }
@keyframes glow { 50% { box-shadow:0 0 0 3px #fff, 0 0 24px rgba(255,209,102,.9); } }
.cmd:disabled { cursor:default; }
.cmd.atk:disabled, .cmd.grd:disabled { opacity:.5; }
.hint { text-align:center; font-size:12px; font-weight:800; color:var(--gold); min-height:18px; margin:8px 0 0; }
.blog { list-style:none; padding:0; margin:8px 0 0; min-height:84px; font-size:13px; line-height:1.5; }
.blog li { padding:4px 8px; border-radius:8px; margin-bottom:3px; }
.blog li.a { background:rgba(124,92,255,.18); } .blog li.b { background:rgba(255,90,95,.14); } .blog li.sys { background:rgba(255,209,102,.15); }
.b-title { text-align:center; font-size:40px; font-weight:900; margin:8px 0 0; }
.b-title.win { color:var(--gold); text-shadow:0 0 20px rgba(255,209,102,.6); } .b-title.lose { color:#ff8a8a; }
.b-sub { text-align:center; color:var(--mute); margin:2px 0 8px; font-weight:700; }

/* レベルアップ */
.lvup { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:12px; position:relative; overflow:hidden; }
.lvup.up { border-color:var(--gold); }
.lvup.pop { animation:lvpop .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes lvpop { 40% { transform:scale(1.04); } }
.lv-head { display:flex; gap:12px; align-items:center; }
.lv-pic { width:60px; height:60px; border-radius:12px; overflow:hidden; flex:none; border:3px solid var(--f1a); }
.lv-pic img, .lv-pic .mosaic { width:100%; height:100%; object-fit:cover; display:grid; }
.lv-t { flex:1; display:flex; flex-direction:column; gap:4px; }
.lv-num { font-size:22px; } .lv-gain { font-size:12px; color:var(--good); font-weight:900; }
.expbar { display:block; height:10px; border-radius:5px; background:#0c0a16; overflow:hidden; }
.expbar b { display:block; height:100%; width:0; background:linear-gradient(90deg,#3ddc84,#a7ff83); border-radius:5px; transition:width .6s ease-out; }
.lv-burst { margin:8px 0 2px; text-align:center; font-size:30px; font-weight:900; letter-spacing:.06em; color:var(--gold); opacity:0; text-shadow:0 0 18px rgba(255,209,102,.8); }
.lv-burst.on { opacity:1; animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.lv-stats { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.srow { display:grid; grid-template-columns:118px 1fr 40px auto; align-items:center; gap:8px; font-size:13px; font-weight:800; }
.srow .sl { display:flex; align-items:center; white-space:nowrap; }
.srow .sn { text-align:right; font-variant-numeric:tabular-nums; font-weight:900; }
.plus { color:var(--good); font-weight:900; font-size:13px; min-width:28px; opacity:0; transform:translateY(6px); transition:all .3s; }
.plus.on { opacity:1; transform:none; }

/* カメラ */
.cam { position:fixed; inset:0; background:#000; z-index:60; display:flex; flex-direction:column; }
.cam video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.cam-frame { position:absolute; left:50%; top:50%; width:min(92vw,520px); aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.9); border-radius:24px; box-shadow:0 0 0 2000px rgba(0,0,0,.35); }
.cam-tip { position:absolute; top:calc(env(safe-area-inset-top) + 18px); left:0; right:0; text-align:center; color:#fff; font-weight:900; text-shadow:0 1px 6px #000; }
.cam-bar { position:absolute; bottom:calc(env(safe-area-inset-bottom) + 24px); left:0; right:0; display:flex; justify-content:space-around; align-items:center; }
.shutter { width:78px; height:78px; border-radius:50%; border:6px solid #fff; background:rgba(255,255,255,.35); cursor:pointer; }
.shutter:active { background:#fff; }
.cam-x { width:54px; height:54px; border-radius:50%; border:0; background:rgba(255,255,255,.2); color:#fff; font-size:22px; cursor:pointer; }

/* シート・説明 */
.modal { position:fixed; inset:0; background:rgba(8,6,16,.75); z-index:70; display:flex; align-items:flex-end; justify-content:center; }
.modal.center { align-items:center; padding:16px; z-index:80; }
.sheet { position:relative; background:#1d1930; border-radius:22px 22px 0 0; padding:18px 16px calc(env(safe-area-inset-bottom) + 18px); width:100%; max-width:480px; max-height:90svh; overflow-y:auto; animation:up .25s ease-out; }
@keyframes up { from { transform:translateY(40px); opacity:.4; } }
.sheet h2 { margin:0 0 10px; font-size:22px; text-align:center; }
.sheet-x { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:16px; cursor:pointer; z-index:2; }
.sh-top { display:flex; gap:12px; align-items:flex-start; padding-right:30px; }
.sh-pic { width:96px; height:96px; flex:none; border-radius:16px; overflow:hidden; border:4px solid var(--f1a); }
.sh-pic.r2 { border-color:var(--f2a); } .sh-pic.r3 { border-color:var(--f3a); } .sh-pic.r4 { border-color:var(--f4a); } .sh-pic.r5 { border-color:var(--f5a); } .sh-pic.r6 { border-color:#ff8ad8; }
.sh-pic img, .sh-pic .mosaic { width:100%; height:100%; object-fit:cover; display:grid; }
.sh-ttl { flex:1; min-width:0; }
.sh-name { display:flex; align-items:center; gap:6px; }
.sh-name h2 { margin:0; font-size:20px; text-align:left; line-height:1.3; word-break:break-all; }
.mini-btn { background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:10px; padding:5px 8px; font-size:13px; cursor:pointer; flex:none; }
.sh-rec { font-size:12px; color:var(--mute); margin:4px 0 6px; display:flex; align-items:center; font-weight:700; }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { display:inline-flex; align-items:center; font-size:12px; font-weight:900; border-radius:999px; padding:4px 4px 4px 10px; background:var(--panel2); }
.chip.ty { background:color-mix(in srgb, var(--ty) 35%, var(--panel2)); }
.chip.st { color:var(--gold); }
.sh-box { background:#151127; border-radius:14px; padding:10px 12px; margin-top:10px; }
.lvt { display:flex; align-items:center; gap:4px; margin-bottom:6px; font-size:13px; font-weight:800; }
.lvt b { font-size:20px; }
.lvt span { margin-left:auto; color:var(--mute); font-size:12px; }
.mu { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:13px; font-weight:900; }
.mu .good { color:var(--good); } .mu .bad { color:var(--bad); }
.mu .perk { grid-column:1/-1; margin:0; font-size:12px; color:#e8e1ff; font-weight:700; line-height:1.5; }
.stats { display:flex; flex-direction:column; gap:7px; }
.stats .srow { grid-template-columns:118px 1fr 40px; }
.mvh { display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--mute); font-weight:800; margin:12px 0 6px; }
.moves { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mv { display:flex; flex-direction:column; align-items:center; text-align:center; background:#151127; border-radius:14px; padding:8px 4px; gap:1px; }
.mv .mi { font-size:22px; } .mv b { font-size:13px; } .mv .mb { font-size:17px; font-weight:900; color:var(--gold); } .mv small { font-size:10px; color:var(--mute); line-height:1.4; font-weight:700; }
.serial { font-size:11px; color:var(--mute); text-align:center; font-family:ui-monospace,Menlo,monospace; margin:10px 0 0; }
.sh-act .btn { margin-top:8px; }
.rename { display:flex; gap:6px; flex:1; }
.rename input { flex:1; min-width:0; font-size:16px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#0f0d18; color:var(--fg); font-family:inherit; }
.rename button { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:0 12px; font-weight:800; cursor:pointer; }
.tipbox { background:#1d1930; border:1px solid var(--line); border-radius:20px; padding:16px; width:100%; max-width:400px; max-height:84svh; overflow-y:auto; animation:up .2s ease-out; }
.tipbox h3 { margin:0 0 8px; font-size:18px; }
.tipbox p { margin:0 0 6px; font-size:13px; line-height:1.65; color:#e8e1ff; }
.tt { width:100%; border-collapse:collapse; font-size:12px; margin:6px 0; }
.tt th, .tt td { border-bottom:1px solid var(--line); padding:5px 4px; text-align:left; }
.tt th { color:var(--mute); font-weight:800; }
.tt td:first-child { white-space:nowrap; }
.more { display:block; text-align:center; color:var(--mute); font-size:12px; font-weight:800; margin-top:10px; }

/* 遊び方 */
.steps3 { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.steps3 li { background:#151127; border-radius:16px; padding:12px 4px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.steps3 i { font-style:normal; font-size:34px; } .steps3 b { font-size:16px; } .steps3 span { font-size:11px; color:var(--mute); line-height:1.4; }
.loop { position:relative; width:220px; height:200px; margin:0 auto 4px; }
.loop svg { position:absolute; left:10px; top:6px; width:200px; height:170px; }
.lp { position:absolute; width:76px; text-align:center; font-size:30px; line-height:1.1; z-index:1; }
.lp b { display:block; font-size:12px; }
.lp.kachi { left:72px; top:0; } .lp.toge { left:0; top:120px; } .lp.fuwa { right:0; top:120px; }
.loop p { position:absolute; bottom:-6px; left:-30px; right:-30px; text-align:center; font-size:12px; color:var(--mute); font-weight:800; margin:0; }

.busy { position:fixed; inset:0; background:rgba(10,8,18,.8); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:90; }
.spinner { width:44px; height:44px; border-radius:50%; border:4px solid #fff3; border-top-color:#fff; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.busy p { text-align:center; line-height:1.7; } .busy small { color:var(--mute); }
footer { color:#6f6990; font-size:12px; text-align:center; margin-top:28px; line-height:1.7; }
footer a { color:var(--mute); }
.gs-small { background:#2a2640 !important; color:#fff !important; }
.gs-small.gs-line { background:#06c755 !important; }
.gs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#000;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.6;z-index:99}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* 挑戦状（金色のボタン・送るシート・QR） */
.btn.gold { background:linear-gradient(135deg,#ffe08a,#ffb347 60%,#ff6b9d); color:#1a1030; box-shadow:0 6px 20px rgba(255,179,71,.35); }
.tile.hot { border-color:transparent; color:#fff; }
.tile.hot small { color:rgba(255,255,255,.85); }
.tile.vs { background:linear-gradient(135deg,#3b82f6,#7c5cff 55%,#ff5a7a); box-shadow:0 6px 20px rgba(124,92,255,.35); }
.tile.ch { background:linear-gradient(135deg,#ffb347,#ff6b9d); color:#1a1030; box-shadow:0 6px 20px rgba(255,107,157,.3); }
.tile.ch small { color:rgba(26,16,48,.75); }
.ch-sheet { text-align:center; }
.chm-title { font-size:24px !important; letter-spacing:.04em; }
.chm-card { display:flex; gap:12px; align-items:center; justify-content:center; text-align:left; margin-bottom:12px; }
.chm-card .card.mini { width:96px; flex:none; }
.chm-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.chm-info b { font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chm-info span { color:var(--mute); font-size:13px; font-weight:700; }
.chm-qr { background:#fff; border-radius:20px; padding:12px 12px 8px; margin:0 auto 12px; width:min(100%,300px); box-shadow:0 0 0 4px rgba(255,209,102,.6), 0 10px 30px rgba(0,0,0,.45); }
.chm-qr canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
.chm-scan { margin:6px 0 0; color:#1a1030; font-size:13px; font-weight:900; }
.chm-btns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.chm-b { border:0; border-radius:14px; min-height:56px; font-size:16px; font-weight:900; cursor:pointer; color:#fff; touch-action:manipulation; font-family:inherit; }
.chm-b:active { transform:scale(.97); }
.chm-b.x { background:#000; box-shadow:inset 0 0 0 1px #555; font-size:20px; }
.chm-b.line { background:#06c755; }
.chm-b.copy { background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line); }
.chm-note { margin-top:10px !important; }

/* その場で対戦 */
.pbadge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px; padding:0 7px; border-radius:8px; font-size:13px; font-weight:900; color:#fff; flex:none; letter-spacing:.02em; }
.pbadge.p1 { background:#3b82f6; } .pbadge.p2 { background:#ff4d6d; }
.vs-body { display:flex; flex-direction:column; align-items:stretch; position:relative; }
.vs-ph { display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 8px; font-size:20px; font-weight:900; }
.vs-ph .pbadge { height:30px; font-size:16px; }
.vs-strip { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 10px; font-weight:800; font-size:14px; min-width:0; }
.vs-strip .vs-nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-strip .vs-ty { color:var(--mute); flex:none; }
.vs-shoot { margin-top:10px; }
.vs-or { margin:14px 0 8px; }
.ho-wrap { min-height:70svh; justify-content:center; }
.handover { text-align:center; border-radius:24px; padding:28px 18px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.handover.p1 { background:radial-gradient(120% 90% at 50% 0%, rgba(59,130,246,.45), var(--panel) 70%); border:2px solid #3b82f6; }
.handover.p2 { background:radial-gradient(120% 90% at 50% 0%, rgba(255,77,109,.45), var(--panel) 70%); border:2px solid #ff4d6d; }
.ho-ico { font-size:64px; animation:wob 1.2s ease-in-out infinite; }
@keyframes wob { 50% { transform:rotate(-12deg) translateX(-6px); } }
.handover .pbadge { height:34px; font-size:18px; min-width:48px; }
.ho-big { font-size:28px; font-weight:900; margin:4px 0 0; }
.ho-sub { color:var(--fg); font-weight:800; margin:0; font-size:14px; }
.ho-hide { color:var(--gold); font-weight:900; margin:6px 0 0; font-size:15px; }
.ho-go { margin-top:16px; padding:20px; font-size:20px; color:#fff; }
.handover.p1 .ho-go { background:linear-gradient(135deg,#60a5fa,#3b5bdb); }
.handover.p2 .ho-go { background:linear-gradient(135deg,#ff7a8a,#d6336c); }
.vs-face { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:8px 0 4px; }
.vs-side { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; position:relative; }
.vs-side .card.mini { width:100%; max-width:150px; }
.vs-side.p2 .card { box-shadow:0 0 0 3px #ff4d6d, 0 0 22px rgba(255,77,109,.45); }
.vs-side.p1 .card { box-shadow:0 0 0 3px #3b82f6, 0 0 22px rgba(59,130,246,.45); }
.vs-side .guest { position:absolute; top:34px; right:-2px; background:#fff; color:#1a1030; font-size:10px; font-weight:900; padding:1px 6px; border-radius:8px; z-index:3; }
.vs-bolt { font-size:30px; font-weight:900; font-style:italic; color:var(--gold); text-shadow:0 0 18px rgba(255,209,102,.8); animation:pulse 1s infinite; }
.vs-rule { text-align:center; color:var(--mute); font-weight:800; font-size:13px; margin:4px 0 0; }
.fighter.vsf .nm .pbadge { height:20px; min-width:28px; font-size:11px; padding:0 5px; }
.fighter.vsf.turnme { box-shadow:0 0 0 2px var(--gold), 0 0 20px rgba(255,209,102,.35); }
.fighter.vsf.op .info { text-align:right; }
.vs-cmd { margin-top:12px; }
.vs-cmd .cmd { min-height:104px; }
.rv-say { text-align:center; font-size:34px; font-weight:900; margin:4px 0 6px; color:var(--gold); text-shadow:0 0 22px rgba(255,209,102,.7); animation:burst .5s cubic-bezier(.2,1.8,.4,1); }
.rv-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; perspective:600px; }
.rv-chip { border-radius:18px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; animation:flip .6s cubic-bezier(.2,1.4,.4,1) both; }
.rv-chip.p2 { animation-delay:.12s; }
.rv-chip i { font-style:normal; font-size:42px; line-height:1.1; } .rv-chip b { font-size:17px; }
.rv-chip.k-attack { background:linear-gradient(160deg,#ff7a45,#d6336c); }
.rv-chip.k-guard { background:linear-gradient(160deg,#4fa3ff,#3550c8); }
.rv-chip.k-special { background:linear-gradient(160deg,#ffd166,#ff6b9d); color:#1a1030; box-shadow:0 0 24px rgba(255,209,102,.7); }
.rv-chip.p1 { outline:3px solid #3b82f6; } .rv-chip.p2 { outline:3px solid #ff4d6d; }
@keyframes flip { from { transform:rotateY(90deg) scale(.7); opacity:0; } to { transform:none; opacity:1; } }
.vs-log { min-height:60px; }
.vs-log li.a { background:rgba(59,130,246,.2); } .vs-log li.b { background:rgba(255,77,109,.18); }
.rv-next { margin-top:8px; }
.vs-over { text-align:center; overflow:hidden; padding-top:4px; }
.win-crown { font-size:44px; margin:0; animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.win-big { font-size:36px; font-weight:900; margin:0 0 8px; color:var(--gold); text-shadow:0 0 22px rgba(255,209,102,.6); display:flex; align-items:center; justify-content:center; gap:6px; }
.win-big .pbadge { height:40px; font-size:24px; min-width:56px; }
.win-card { width:min(56%,210px) !important; margin:0 auto; animation:flip .7s cubic-bezier(.2,1.4,.4,1) both; }
.vs-over.p1 .win-card { box-shadow:0 0 0 4px #3b82f6, 0 0 34px rgba(59,130,246,.6); }
.vs-over.p2 .win-card { box-shadow:0 0 0 4px #ff4d6d, 0 0 34px rgba(255,77,109,.6); }
.win-sub { color:var(--mute); font-weight:800; margin:10px 0 0; }
.win-exp { margin:6px auto 0; font-weight:900; color:var(--good); }
.win-exp.up { color:var(--gold); font-size:20px; animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.confetti i { position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; background:var(--gold); animation:fall 2.4s linear forwards; }
.confetti i:nth-child(3n) { background:#ff6b9d; } .confetti i:nth-child(3n+1) { background:#7cc4ff; } .confetti i:nth-child(4n) { width:10px; height:10px; border-radius:50%; background:#3ddc84; }
@keyframes fall { to { transform:translateY(110svh) rotate(540deg); opacity:.2; } }
.vs-over > *:not(.confetti) { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) { .ho-ico, .vs-bolt, .rv-chip, .win-card, .win-crown, .rv-say, .win-exp.up { animation:none; } }
.lvcap { display:block; margin-top:6px; color:var(--mute); font-size:12px; font-weight:800; }
.expbar.max b { background:linear-gradient(90deg,#ffd166,#ff6b9d); }

/* ---------- 戦う（ホーム） ---------- */
.sec-h2 { margin:18px 0 -4px; font-weight:900; font-size:15px; }
.tile { min-height:96px; }
.tile.net { background:linear-gradient(135deg,#00c2a8,#2e8bff 60%,#7c5cff); box-shadow:0 6px 20px rgba(46,139,255,.35); }
.zrow { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin-top:10px; padding:10px 14px; border-radius:14px; background:var(--panel); border:1px solid var(--line); color:var(--fg); font-weight:900; font-size:15px; cursor:pointer; font-family:inherit; }
.zrow .prog { flex:1; width:auto; margin:0; }
.zrow small { color:var(--mute); font-size:12px; font-weight:700; }

/* ---------- 1→2→3 ---------- */
.steps { display:flex; justify-content:center; gap:4px; list-style:none; padding:0; margin:4px 0 10px; }
.steps li { display:flex; align-items:center; gap:4px; color:var(--mute); font-size:12px; font-weight:800; }
.steps li + li::before { content:""; width:14px; height:2px; background:var(--line); margin-right:2px; }
.steps b { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel2); font-size:12px; }
.steps li.on { color:var(--fg); } .steps li.on b { background:linear-gradient(135deg,#7c5cff,#ff6b9d); color:#fff; box-shadow:0 0 12px rgba(255,107,157,.5); }
.steps li.done b { background:var(--good); color:#06210f; }
.pt-title { text-align:center; font-size:24px; margin:2px 0 0; }
.pt-q { text-align:center; font-size:18px; font-weight:900; margin:6px 0 10px; }
.pt-tip { text-align:center; color:var(--mute); font-weight:800; font-size:13px; margin:12px 0 0; }
.link.back { align-self:flex-start; min-height:44px; padding:0 4px; font-size:15px; }

/* ---------- 形式（3枚のタイル） ---------- */
.fmt { display:flex; flex-direction:column; gap:10px; }
.fmt-tile { position:relative; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; gap:0 10px; width:100%; min-height:88px; padding:12px 16px; border-radius:20px; border:2px solid var(--line); background:var(--panel); color:var(--fg); cursor:pointer; font-family:inherit; text-align:left; touch-action:manipulation; }
.fmt-tile:active { transform:scale(.98); }
.fmt-tile.def { border-color:#ff6b9d; background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(255,107,157,.25)); }
.fmt-tile.locked { opacity:.55; }
.fmt-art { grid-row:1 / span 2; grid-column:1; display:flex; align-items:center; gap:8px; min-width:0; }
.fmt-n { grid-column:2; font-size:28px; font-weight:900; letter-spacing:.02em; text-align:right; }
.fmt-tile small { grid-column:2; color:var(--mute); font-size:12px; font-weight:800; text-align:right; }
.stack { display:flex; }
.stack i { width:22px; height:30px; border-radius:5px; border:2px solid #fff; margin-left:-9px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.stack i:first-child { margin-left:0; }
.stack.me i { background:linear-gradient(160deg,#60a5fa,#3b5bdb); } .stack.op i { background:linear-gradient(160deg,#ff7a8a,#d6336c); }
.fmt-vs { font-weight:900; font-style:italic; color:var(--gold); font-size:14px; }

/* ---------- チームをつくる ---------- */
.party { display:flex; flex-direction:column; align-items:stretch; padding-bottom:84px; }
.pt-head { display:flex; justify-content:center; align-items:center; gap:8px; font-size:20px; font-weight:900; margin-bottom:8px; }
.pt-head .pbadge { height:28px; font-size:15px; }
.pt-cap { margin:4px 0; font-size:12px; font-weight:900; color:var(--mute); text-align:center; }
.slots { display:grid; gap:6px; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); }
.slots.n1 { --n:1; width:min(42%,150px); margin:0 auto; } .slots.n3 { --n:3; } .slots.n5 { --n:5; gap:4px; }
.slot { position:relative; min-width:0; padding:0; border:0; background:none; color:var(--fg); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:stretch; gap:2px; touch-action:manipulation; min-height:44px; }
.slot.empty { aspect-ratio:3/4; border:2px dashed #6c63a8; border-radius:14px; align-items:center; justify-content:center; background:rgba(255,255,255,.03); }
.slot.empty.next { border-color:var(--gold); background:rgba(255,209,102,.08); animation:pulse 1.2s infinite; }
.slot-plus { font-size:26px; color:#8f88c8; font-weight:900; }
.slot.empty.next .slot-plus { color:var(--gold); }
.slot.empty .slot-pos { position:absolute; bottom:6px; left:0; right:0; }
.slot-pos { text-align:center; font-size:12px; font-weight:900; color:var(--gold); }
.slots.n5 .slot-pos { font-size:10px; }
.slot.full .card.mini { width:100%; }
.slot-x { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:#000c; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:3; }
.slot.pop .card { animation:popin .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes popin { from { transform:scale(.4) translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.slots.op .card { opacity:.95; }
.pt-order { text-align:center; color:var(--mute); font-size:11px; font-weight:800; margin:4px 0 0; }
.pt-tools { display:flex; gap:8px; margin:10px 0; }
.pt-tools .btn { margin-top:0; flex:1; min-height:52px; }
.btn.auto { background:linear-gradient(135deg,#2fbf71,#00c2a8); color:#06210f; font-size:18px; box-shadow:0 6px 18px rgba(47,191,113,.3); }
.btn.shootsm { flex:0 0 34%; }
.cell.used .card { opacity:.35; }
.used-mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:900; color:var(--good); text-shadow:0 2px 8px #000; z-index:3; }
.mk { position:absolute; top:-5px; left:-5px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; z-index:4; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.mk.good { background:var(--good); color:#06210f; } .mk.bad { background:var(--bad); color:#2a0606; }
.pt-bar { position:fixed; left:0; right:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(0deg,var(--bg) 70%,transparent); z-index:20; display:flex; justify-content:center; }
.pt-bar .btn { max-width:448px; margin:0; }
.pt-go:disabled { opacity:1; background:var(--panel2); color:var(--mute); box-shadow:none; }

/* ---------- 対戦中の並び ---------- */
.lineup { display:flex; justify-content:center; gap:6px; margin:4px 0; }
.lineup:empty { display:none; }
.lu { position:relative; width:46px; display:flex; flex-direction:column; align-items:center; gap:1px; }
.lu img, .lu .mosaic { width:42px; height:42px; border-radius:10px; object-fit:cover; display:grid; border:2px solid var(--line); }
.lu small { font-size:9px; font-weight:900; color:var(--mute); }
.lu.cur img, .lu.cur .mosaic { border-color:var(--gold); box-shadow:0 0 10px rgba(255,209,102,.7); transform:scale(1.1); }
.lu.cur small { color:var(--gold); }
.lu.down img, .lu.down .mosaic { filter:grayscale(1) brightness(.45); }
.lu-x { position:absolute; top:4px; left:0; right:0; text-align:center; font-size:24px; color:var(--bad); text-shadow:0 1px 3px #000; }
.lineup.op .lu.cur img { border-color:#ff4d6d; } .lineup.me .lu.cur img { border-color:#3b82f6; }

/* ---------- 次は◯◯！ ---------- */
.bout-ov { position:fixed; inset:0; z-index:80; background:rgba(10,8,18,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:8px; animation:fadein .25s; }
@keyframes fadein { from { opacity:0; } }
.bo-res { font-size:16px; font-weight:900; color:var(--mute); margin:0; text-align:center; }
.bo-next { font-size:30px; font-weight:900; margin:4px 0; text-align:center; animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.bo-next b { color:var(--gold); }
.bo-vs { display:flex; align-items:center; gap:10px; width:100%; max-width:360px; }
.bo-side { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.bo-side .card.mini { width:100%; max-width:130px; }
.bo-side.new .card { animation:popin .5s cubic-bezier(.2,1.6,.4,1); }
.bo-side small { font-size:12px; font-weight:800; color:var(--mute); }
.bo-tag { font-size:13px; font-weight:900; }
.bo-x { font-size:24px; font-weight:900; font-style:italic; color:var(--gold); }
.bout-ov .btn { max-width:360px; }

/* ---------- MVP・オーダー表 ---------- */
.mvp { display:flex; align-items:center; gap:10px; justify-content:center; margin:10px auto 0; padding:8px 14px; border-radius:16px; background:linear-gradient(135deg,rgba(255,209,102,.25),rgba(255,107,157,.15)); border:1px solid #ffd16688; }
.mvp-pic { width:56px; height:56px; border-radius:12px; overflow:hidden; flex:none; border:3px solid var(--gold); }
.mvp-pic img, .mvp-pic .mosaic { width:100%; height:100%; object-fit:cover; display:grid; }
.mvp b { font-size:16px; } .mvp small { color:var(--gold); font-weight:900; }
.mvp-tag { font-weight:900; color:var(--gold); font-size:18px; margin:4px 0; }
.order-say { text-align:center; font-size:26px; font-weight:900; margin:6px 0 10px; color:var(--gold); animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.order { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.or-row { display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; gap:6px; }
.or-row.hd { justify-items:center; }
.or-c { position:relative; display:flex; justify-content:center; }
.or-c .card.mini { width:min(100%,104px); }
.or-pos { text-align:center; font-weight:900; color:var(--gold); font-size:13px; }
.or-row .mk { left:auto; right:6px; }

/* ---------- 挑戦状（チーム） ---------- */
.ch-fmt { margin:0 0 6px; font-weight:900; font-size:22px; color:var(--gold); text-align:center; width:100%; }
.ch-card { flex-wrap:wrap; justify-content:center; }
.ch-team { display:flex; gap:4px; justify-content:center; width:100%; }
.ch-team .card.mini { width:19%; max-width:72px; cursor:pointer; }
.chm-card.team { gap:4px; flex-wrap:nowrap; }
.chm-card.team .card.mini { width:19%; max-width:72px; }
.chm-near { background:var(--panel2); border-radius:14px; padding:12px; font-weight:800; font-size:14px; }
.chm-btns.four { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- ネットで対戦 ---------- */
.room { text-align:center; background:var(--panel); border:2px solid #2e8bff; border-radius:20px; padding:10px; margin:8px 0; display:flex; flex-direction:column; align-items:center; }
.room small { color:var(--mute); font-weight:800; font-size:12px; }
.room-code { font-size:40px; letter-spacing:.14em; font-family:ui-monospace,Menlo,monospace; color:#fff; }
.room-fmt { font-weight:900; color:var(--gold); }
.chm-qr.small { width:min(70%,220px); padding:10px 10px 6px; }
.waiting { display:flex; flex-direction:column; align-items:center; gap:2px; margin:14px 0 4px; }
.waiting p { margin:0; font-weight:900; font-size:17px; }
.dots3 { width:60px; height:16px; background:radial-gradient(circle,var(--gold) 6px,transparent 7px) 0 50%/20px 16px repeat-x; animation:dots 1s steps(3) infinite; }
@keyframes dots { from { clip-path:inset(0 66% 0 0); } to { clip-path:inset(0 -1% 0 0); } }
.net-st { text-align:center; font-size:12px; font-weight:800; color:var(--mute); margin:8px 0 0; }
.joined { text-align:center; font-size:20px; font-weight:900; color:var(--good); margin:0 0 6px; animation:burst .6s cubic-bezier(.2,1.8,.4,1); }
.ptimer { height:8px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin:10px 0 0; }
.ptimer b { display:block; height:100%; width:100%; background:linear-gradient(90deg,#3ddc84,#ffd166); transition:width 1s linear; }
.ptimer.hurry b { background:linear-gradient(90deg,#ff6b6b,#ffb347); }
.op-state { text-align:center; font-weight:900; font-size:14px; margin:8px 0 0; min-height:20px; }
.rv-chip.mine { margin:12px auto 0; width:min(60%,200px); }
.lost { position:fixed; left:50%; top:10px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); background:#5c1d1d; color:#fff; border:1px solid #ff6b6b; padding:10px 14px; border-radius:12px; font-weight:900; font-size:14px; z-index:95; }
.win-big.small { font-size:24px; }
@media (prefers-reduced-motion: reduce) { .slot.empty.next, .slot.pop .card, .bo-next, .bo-side.new .card, .order-say, .joined, .dots3 { animation:none; } }
@media (max-width:340px) { .fmt-n { font-size:24px; } .stack i { width:18px; height:25px; } .room-code { font-size:32px; } .cmd b { font-size:13px; } }

/* 5人の枠・5対5 の表は小さく（絵と★だけ） */
.slots.n5 .card.mini { padding:4px; border-width:2px; border-radius:10px; }
.slots.n5 .card.mini .cf-head { top:6px; left:6px; right:6px; }
.slots.n5 .card.mini .cf-lv, .slots.n5 .card.mini > .cf-name { display:none; }
.slots.n5 .card.mini .cf-ty { width:18px; height:18px; font-size:10px; }
.slots.n5 .card.mini .cf-stars { font-size:9px; }
.order.n5 .or-c .card.mini { width:min(100%,66px); }
.order.n5 .or-c .card.mini > .cf-name { display:none; }
.order.n5 { gap:4px; }
/* タップしやすさ（44px 以上） */
.pill, .logo { min-height:44px; }
.qchip { min-height:44px; }
.fchip { min-height:44px; min-width:44px; }
.sheet-x { width:44px !important; height:44px !important; }
.mini-btn { min-width:44px; min-height:44px; }
.q { position:relative; }
.q::after { content:""; position:absolute; inset:-12px; }
a.more { display:inline-block; padding:12px 0; }
@media (max-width:360px) {
  .logo { font-size:15px; white-space:nowrap; }
  .pill { padding:6px 9px; font-size:13px; white-space:nowrap; }
  .topr { gap:4px; }
}

/* 腕前の画面（skill-ui.js）: タイミング押し・連打 */
.skill-ov { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:rgba(10,8,20,.62); backdrop-filter:blur(2px); touch-action:none; user-select:none; -webkit-user-select:none; }
.skill-title { color:#fff; font-weight:900; font-size:22px; letter-spacing:.08em; }
.skill-bar { position:relative; width:min(84vw,380px); height:30px; border-radius:15px; background:#2a2440; box-shadow:inset 0 2px 6px rgba(0,0,0,.5); overflow:hidden; }
.skill-good { position:absolute; top:0; bottom:0; background:rgba(247,196,0,.35); }
.skill-just { position:absolute; top:0; bottom:0; background:#f7c400; }
.skill-mark { position:absolute; top:-4px; bottom:-4px; width:6px; margin-left:-3px; border-radius:3px; background:#fff; box-shadow:0 0 10px #fff; }
.skill-count { color:#fff; font-weight:900; font-size:72px; line-height:1; font-variant-numeric:tabular-nums; }
.skill-count.pop { animation:skpop .12s ease-out; }
@keyframes skpop { from { transform:scale(1.18); } to { transform:scale(1); } }
.skill-time { width:min(70vw,300px); height:8px; border-radius:4px; background:#2a2440; overflow:hidden; }
.skill-time b { display:block; height:100%; width:100%; background:#ff5a3c; }
.skill-fb { position:absolute; font-weight:900; font-size:40px; letter-spacing:.06em; animation:skfb .38s ease-out both; }
.skill-fb.just { color:#f7c400; text-shadow:0 0 18px rgba(247,196,0,.8); }
.skill-fb.nice { color:#fff; }
.skill-fb.miss { color:#8f9aa7; }
@keyframes skfb { from { transform:scale(1.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.skill-ov.done .skill-bar, .skill-ov.done .skill-title { opacity:.35; }
@media (prefers-reduced-motion: reduce) { .skill-fb, .skill-count.pop { animation:none; } }

/* ==================== C 金属のトレカ（2026-10-23 作り直し） ====================
   上の規則に上書きで重ねる。色は濃紺の地＋金の箔、パネルとボタンは角を切る。
   書体: 本文 Zen 700・見出し Zen 900・ロゴと数字 Dela（public/fonts のサブセット） */
@font-face { font-family:"Zen"; src:url(/fonts/zen-700.woff2) format("woff2"); font-weight:400 800; font-display:swap; }
@font-face { font-family:"Zen"; src:url(/fonts/zen-900.woff2) format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"Dela"; src:url(/fonts/dela.woff2) format("woff2"); font-display:swap; }
:root { --bg:#0d1322; --panel:#18213a; --panel2:#202b48; --fg:#f2f4fa; --mute:#9aa6c4; --line:#2b3758; --gold:#e9c46a; --accent:#4d7be0; --pink:#ff8fb1; --good:#38d39f; --bad:#ff6b5b;
  --foil:conic-gradient(from 200deg,#f7e2a1,#9fb4ff,#ffb3d9,#f7e2a1);
  --cut-s:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --cut-m:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --cut-l:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  --skew:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  --f1a:#b9c0d4; --f1b:#5e6782; --f2a:#8fe3bd; --f2b:#2c8a68; --f3a:#9fc0ff; --f3b:#3b5fc4; --f4a:#d2b6ff; --f4b:#6a46d6; --f5a:#f7e2a1; --f5b:#c99a2e; }
html,body { font-family:"Zen","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif; font-weight:700; }
body { background:radial-gradient(120% 50% at 50% -10%, #1c2a4f 0%, var(--bg) 62%) fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.05;
  background:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 7px); }
b, h1, h2, h3, .h2, .hero, .btn, .tile, .cmd b, .fighter .nm { font-weight:900; }

/* アイコンと印 */
.ic { width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none; }
.ico { display:inline-flex; align-items:center; justify-content:center; line-height:1; flex:none; }
.ico + *, .ico:not(:last-child) { margin-right:.3em; }
.seal { display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.5em; height:1.5em; font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:.8em; line-height:1; color:#fff;
  background:#5e6782; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); text-shadow:0 1px 0 rgba(0,0,0,.35); }
.s-kachi { background:#5b7fd0; } .s-toge { background:#e2553a; } .s-fuwa { background:#d878b1; }
.s-animal, .s-bird, .s-sea, .s-bug { background:linear-gradient(150deg,#c99a5b,#7a5527); }
.s-food, .s-plant, .s-kitchen { background:linear-gradient(150deg,#9cc7a0,#3f7a55); }
.s-vehicle, .s-electronic, .s-tool { background:linear-gradient(150deg,#b9c0d4,#5e6782); }
.s-furniture, .s-wear, .s-play, .s-place { background:linear-gradient(150deg,#d9b9e8,#7a4f9a); }
.s-mystery { background:linear-gradient(150deg,#f7e2a1,#c99a2e); color:#1a1408; text-shadow:none; }

/* 上の帯 */
.logo { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:20px; letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.logo span { color:var(--gold); }
.logo .logo-mk { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; background:#0d1322; color:#f2f4fa; font-size:16px;
  clip-path:var(--cut-s); box-shadow:inset 0 0 0 2px var(--gold); }
.pill { border:0; border-radius:0; clip-path:var(--skew); padding:8px 15px; font-weight:900; display:inline-flex; align-items:center; gap:6px; }
.pill .ic, .pill b { color:var(--gold); }

/* ボタン */
.btn { border-radius:0; clip-path:var(--cut-m); display:flex; align-items:center; justify-content:center; gap:8px; letter-spacing:.04em; }
.btn .ic { font-size:1.15em; }
.btn.primary, .btn.shoot { background:linear-gradient(160deg,#f7e2a1,#e9c46a 45%,#b8862b); color:#1a1408; box-shadow:none; }
.btn.shoot span, .btn.shoot .ico { font-size:24px; }
.btn.ghost { background:var(--panel); border:0; box-shadow:inset 0 0 0 1px var(--line); }
.btn.gold { background:linear-gradient(160deg,#f7e2a1,#e9c46a 50%,#c99a2e); color:#1a1408; box-shadow:none; }
.btn.auto { background:linear-gradient(160deg,#38d39f,#1f8a68); color:#04140d; box-shadow:none; }
.sec, .sec-h2, .mvh { font-weight:900; letter-spacing:.14em; color:var(--gold); }
.h2, .pt-title, .chm-title { font-weight:900; letter-spacing:.06em; }
.hero span { background:linear-gradient(90deg,#f7e2a1,#e9c46a 40%,#9fb4ff 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.howto li { border-radius:0; border:0; background:var(--panel); clip-path:var(--cut-s); }
.howto li i, .howto li .ico { font-size:24px; color:var(--gold); }
.howto li.arw { color:var(--gold); clip-path:none; background:none; }

/* 角を切ったパネル（箔の縁は ::before で描く） */
.tile, .fmt-tile, .challenge, .lvup, .sh-box, .vs-strip, .room, .zrow, .mvp, .chm-near, .fighter, .vsbox, .lrow, .handover, .mv, .steps3 li {
  border-radius:0 !important; border:0 !important; clip-path:var(--cut-m); }
.tile, .fmt-tile, .zrow, .vsbox, .lrow, .vs-strip, .mv, .steps3 li, .sh-box, .lvup { background:linear-gradient(160deg,#1c2744,#121a30); box-shadow:inset 0 0 0 1px var(--line); }
.tile span, .tile .ico { font-size:30px; color:var(--gold); }
.tile.hot, .tile.vs, .tile.ch, .tile.net { box-shadow:none; }
.tile.vs { background:linear-gradient(160deg,#4d7be0,#24357f); }
.tile.ch { background:linear-gradient(160deg,#f7e2a1,#c99a2e); color:#1a1408; } .tile.ch span, .tile.ch .ico { color:#1a1408; }
.tile.net { background:linear-gradient(160deg,#2a8f9a,#1c3f7a); }
.tile.vs span, .tile.vs .ico, .tile.net span, .tile.net .ico { color:#fff; }
.fmt-tile.def { background:linear-gradient(160deg,#2a3760,#1a2140); box-shadow:inset 0 0 0 2px var(--gold); }
.fmt-n, .room-code, .z-prog b, .cf-lv, .skill-count, .b-title, .win-big, .lv-num, .lvt b { font-family:"Dela","Zen",sans-serif; font-weight:400; }
.fmt-vs, .vs-bolt, .bo-x { font-family:"Dela","Zen",sans-serif; font-weight:400; font-style:normal; }
.challenge { background:linear-gradient(160deg,#2a2140,#3a1f2c); box-shadow:inset 0 0 0 1px #e9c46a55; }
.lrow { border-left:0 !important; box-shadow:inset 3px 0 0 var(--ty), inset 0 0 0 1px var(--line); }
.prog, .expbar, .hp, .gauge, .cf-stat i, .srow i, .ls i, .ptimer, .skill-time { border-radius:0 !important; transform:skewX(-20deg); background:#0a0f1c; }
.prog b, .expbar b, .hp b, .gauge b, .cf-stat i b, .srow i b, .ls i b, .ptimer b, .skill-time b { border-radius:0 !important; }
.hp b { background:linear-gradient(90deg,#38d39f,#a6f5c9); } .hp b.low { background:linear-gradient(90deg,#ff6b5b,#ffb08a); }
.gauge b, .expbar.max b { background:linear-gradient(90deg,#e9c46a,#ff8fb1); }
.expbar b, .prog b { background:linear-gradient(90deg,#38d39f,#e9c46a); }
.fchip, .qchip, .chip { border-radius:0; border:0; clip-path:var(--skew); padding-left:12px; padding-right:12px; display:inline-flex; align-items:center; gap:4px; }
.fchip { box-shadow:inset 0 0 0 1px var(--line); } .fchip.on { background:var(--gold); color:#1a1408; }
.steps b { border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); font-family:"Dela",sans-serif; font-weight:400; }
.steps li.on b { background:var(--gold); color:#1a1408; box-shadow:none; }
.pbadge { border-radius:0; clip-path:var(--skew); font-family:"Dela","Zen",sans-serif; font-weight:400; }
.pbadge.p1 { background:#4d7be0; } .pbadge.p2 { background:#e2553a; }

/* カード（表面）: 角を切り、縁は箔 */
.card { border-radius:0; border:0; padding:12px; clip-path:var(--cut-l);
  background:linear-gradient(165deg, color-mix(in srgb, var(--ty) 26%, #1c2744), #121a30 62%); box-shadow:none; }
.card::before { content:""; position:absolute; inset:0; padding:2px; z-index:2; pointer-events:none; clip-path:inherit;
  background:linear-gradient(140deg,var(--fa),var(--fb)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.card.r4::before, .card.r5::before { padding:2.5px; }
.card.r6 { background:linear-gradient(165deg, color-mix(in srgb, var(--ty) 26%, #1c2744), #121a30 62%); box-shadow:none; }
.card.r6::before { background:var(--foil); padding:3px; }
.card.r4, .card.r5 { box-shadow:none; }
.card.mini { padding:7px; border-radius:0; }
.cf-ty { width:30px; height:30px; border-radius:0; background:var(--ty); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:none; font-family:"Dela",sans-serif; font-size:14px; color:#fff; }
.cf-ty .seal { background:none; width:100%; height:100%; font-size:14px; clip-path:none; }
.card.mini .cf-ty { width:22px; height:22px; font-size:11px; }
.cf-head .cf-name { font-weight:900; letter-spacing:.02em; }
.cf-lv { background:rgba(10,15,28,.6); border-radius:0; clip-path:var(--skew); padding:2px 10px; font-size:16px; }
.cf-art, .card.mini .cf-art { border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.cf-stars { color:var(--gold); }
.st-ic { color:var(--mute); font-size:14px; display:inline-flex; }
.cf-stat i b { background:linear-gradient(90deg,var(--ty,#4d7be0),#f2f4fa); }
.mosaic { image-rendering:pixelated; }

/* 図鑑 */
.cat { border-radius:0; border:0; clip-path:var(--cut-s); box-shadow:inset 0 0 0 1px var(--line); background:#121a30; }
.cat.got { box-shadow:inset 0 0 0 1.5px #e9c46a99; }
.cat.sel { box-shadow:inset 0 0 0 2.5px var(--gold); }
.cat .sil { filter:none; opacity:.35; margin-bottom:12px; }
.cat .sil.seal { font-size:16px; }
.cat .cn { border-radius:0; clip-path:var(--skew); background:var(--gold); color:#1a1408; }
.lthumb, .lv-pic, .mvp-pic, .sh-pic { border-radius:0; clip-path:var(--cut-s); }
.lty .seal { font-size:12px; }
.sortbar select { border-radius:0; }

/* 対戦 */
.fighter { clip-path:none; background:linear-gradient(90deg, color-mix(in srgb, var(--ty) 20%, #1c2744), #121a30); box-shadow:inset 0 0 0 1px var(--line); overflow:visible; }
.fighter::after { content:""; position:absolute; right:-1px; bottom:-1px; width:20px; height:20px; background:var(--bg); clip-path:polygon(100% 0,100% 100%,0 100%); pointer-events:none; }
.fighter.full { box-shadow:inset 0 0 0 2px var(--gold); }
.fighter.vsf.turnme { box-shadow:inset 0 0 0 2px var(--gold); }
.fighter .pic { border-radius:0; border:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); box-shadow:inset 0 0 0 3px var(--f1a); }
.fighter.guarding .pic { box-shadow:inset 0 0 0 3px #9fc0ff; }
.pty { border-radius:0; width:22px; height:22px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.pty .seal, .seal.pty { width:22px; height:22px; font-size:11px; }
.intent { border-radius:0; clip-path:var(--skew); padding:3px 12px; background:#f2f4fa; color:#0d1322; box-shadow:none; }
.intent.i-special { background:var(--gold); }
.cmd { border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.cmd i, .cmd .ico { font-size:28px; }
.cmd b { font-weight:900; letter-spacing:.06em; }
.cmd.atk { background:linear-gradient(160deg,#e2553a,#9c2440); }
.cmd.grd { background:linear-gradient(160deg,#4d7be0,#24357f); }
.cmd.sp { background:#18213a; color:#5d6886; }
.cmd.sp.ready { background:linear-gradient(160deg,#f7e2a1,#e9c46a 50%,#c99a2e); color:#1a1408; }
@keyframes glow { 50% { filter:brightness(1.18) drop-shadow(0 0 10px rgba(233,196,106,.9)); } }
.turn, .b-head { letter-spacing:.2em; font-weight:900; }
.blog li { border-radius:0; background:#141c32 !important; border-left:3px solid #4d7be0; font-weight:700; display:flex; align-items:center; gap:6px; }
.blog li.b { border-left-color:#e2553a; } .blog li.sys { border-left-color:var(--gold); }
.vs-log li.a { border-left-color:#4d7be0; } .vs-log li.b { border-left-color:#e2553a; }
.b-title.win, .win-big, .rv-say, .order-say, .burst, .lv-burst { color:var(--gold); text-shadow:0 0 18px rgba(233,196,106,.55); }
.float { font-family:"Dela","Zen",sans-serif; font-weight:400; }
.float.big { color:var(--gold); }
.rv-chip { border-radius:0; clip-path:var(--cut-m); }
.rv-chip i, .rv-chip .ico { font-size:40px; }
.rv-chip.k-attack { background:linear-gradient(160deg,#e2553a,#9c2440); }
.rv-chip.k-guard { background:linear-gradient(160deg,#4d7be0,#24357f); }
.rv-chip.k-special { background:linear-gradient(160deg,#f7e2a1,#c99a2e); color:#1a1408; box-shadow:none; }
.rv-chip.p1, .rv-chip.p2 { outline:0; }
.handover.p1 { background:linear-gradient(160deg,#24357f,#121a30 70%); box-shadow:inset 0 0 0 2px #4d7be0; }
.handover.p2 { background:linear-gradient(160deg,#6a1f2c,#121a30 70%); box-shadow:inset 0 0 0 2px #e2553a; }
.ho-ico { font-size:60px; color:var(--gold); display:inline-flex; }
.handover.p1 .ho-go { background:linear-gradient(160deg,#6f97ea,#3550c8); } .handover.p2 .ho-go { background:linear-gradient(160deg,#ff7a65,#b02c3f); }
.win-crown { color:var(--gold); font-size:48px; display:flex; justify-content:center; }
.win-crown .ic { width:1em; height:1em; }
.win-crown.off { display:none; }
.vs-side.p1 .card, .vs-over.p1 .win-card { box-shadow:none; filter:drop-shadow(0 0 10px rgba(77,123,224,.7)); }
.vs-side.p2 .card, .vs-over.p2 .win-card { box-shadow:none; filter:drop-shadow(0 0 10px rgba(226,85,58,.7)); }
.confetti i { border-radius:0; background:var(--gold); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.confetti i:nth-child(3n) { background:#ff8fb1; } .confetti i:nth-child(3n+1) { background:#9fb4ff; } .confetti i:nth-child(4n) { background:#38d39f; border-radius:0; }

/* シート・説明 */
.sheet { background:#121a30; border-radius:0; clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%); box-shadow:inset 0 2px 0 var(--gold); }
.tipbox { background:#121a30; border:0; border-radius:0; clip-path:var(--cut-l); box-shadow:inset 0 0 0 1px var(--line); }
.sheet-x, .cam-x, .mini-btn { border-radius:0; clip-path:var(--cut-s); display:inline-flex; align-items:center; justify-content:center; }
.mv .mi { font-size:22px; color:var(--gold); display:inline-flex; }
.mv-attack .mi { color:#ff8f7a; } .mv-guard .mi { color:#9fc0ff; } .mv-special .mi { color:var(--gold); }
.mv .mb { font-family:"Dela","Zen",sans-serif; font-weight:400; color:var(--gold); }
.mu-ty { display:inline-flex; align-items:center; gap:4px; }
.chip.ty { background:color-mix(in srgb, var(--ty) 35%, var(--panel2)); }
.rename input, .rename button { border-radius:0; }
.chm-qr { border-radius:0; clip-path:var(--cut-m); box-shadow:none; }
.chm-b { border-radius:0; clip-path:var(--cut-s); display:flex; align-items:center; justify-content:center; gap:6px; }
.chm-note.live { color:var(--good); }
.steps3 i, .steps3 .ico { font-size:30px; color:var(--gold); }
.lp { font-size:26px; display:flex; flex-direction:column; align-items:center; }
.lp .seal { font-size:22px; }
.cam-frame { border-radius:0; border:0; box-shadow:0 0 0 2000px rgba(0,0,0,.35), inset 0 0 0 3px rgba(242,244,250,.9); clip-path:none; }
.shutter { box-shadow:0 0 0 3px var(--gold); }
.spinner { border-radius:0; border:0; width:40px; height:40px; background:var(--gold); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation:spin 1.1s cubic-bezier(.6,0,.4,1) infinite; }
.pack { border-radius:0; border:0; clip-path:var(--cut-l);
  background:linear-gradient(160deg,#1c2744,#0d1322 70%), repeating-linear-gradient(115deg,#18213a 0 12px,#121a30 12px 24px); box-shadow:inset 0 0 0 3px var(--gold); }
.pk-logo { color:var(--gold); font-size:72px; filter:drop-shadow(0 0 12px rgba(233,196,106,.45)); display:inline-flex; }
.pack.g3 { box-shadow:inset 0 0 0 3px #9fc0ff; filter:drop-shadow(0 0 20px #9fc0ff); }
.pack.g4 { box-shadow:inset 0 0 0 3px #d2b6ff; filter:drop-shadow(0 0 26px #a07cff); }
.pack.g5 { box-shadow:inset 0 0 0 3px var(--gold); filter:drop-shadow(0 0 34px var(--gold)); }
.pack.g6 { box-shadow:inset 0 0 0 3px #fff; filter:drop-shadow(0 0 40px #ffb3d9); }
.stage.fx.r5::before { background:repeating-conic-gradient(from 0deg, rgba(233,196,106,.22) 0 10deg, transparent 10deg 24deg); }
.gs-small { background:#18213a !important; }
.gs-toast { border-radius:0; clip-path:var(--cut-s); background:#0a0f1c; box-shadow:inset 0 0 0 1px var(--gold); }
.lost { border-radius:0; clip-path:var(--cut-s); }

/* 通信の丸・相手の状態 */
.dot { display:inline-block; width:8px; height:8px; margin-right:6px; vertical-align:middle; background:var(--mute); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.dot.ok { background:var(--good); } .dot.wait { background:var(--gold); animation:pulse 1s infinite; } .dot.bad { background:var(--bad); } .dot.off { background:#5d6886; }
.pvp-come { background:linear-gradient(90deg,#1f8a68,#18213a); color:#fff; font-weight:900; padding:8px 12px; clip-path:var(--skew); text-align:center; }
.op-state.done { color:var(--good); }

/* 団体戦 */
.slot.empty { border-radius:0; border:0; clip-path:var(--cut-s); box-shadow:inset 0 0 0 2px #3b4a72; }
.slot.empty.next { box-shadow:inset 0 0 0 2px var(--gold); }
.slot-x { border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.stack i { border-radius:0; clip-path:var(--cut-s); border:0; box-shadow:inset 0 0 0 2px #f2f4fa; }
.stack.me i { background:linear-gradient(160deg,#6f97ea,#3550c8); } .stack.op i { background:linear-gradient(160deg,#ff7a65,#b02c3f); }
.mk { border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.lu img, .lu .mosaic { border-radius:0; clip-path:var(--cut-s); }
.lu.cur img, .lu.cur .mosaic { box-shadow:inset 0 0 0 2px var(--gold); }
.pt-cap.op { color:#ff8f7a; } .pt-cap.me { color:#9fc0ff; }
.po-first, .po-last { color:var(--gold); font-weight:900; }
.po-last { margin-left:1em; }
.bo-res.tie { color:var(--gold); }
.bo-hp { color:var(--good); font-weight:900; }
.mvp-tag { display:inline-flex; align-items:center; gap:4px; }
.bout-ov { background:rgba(8,12,22,.97); }

/* 腕前の画面 */
.skill-ov { background:rgba(8,12,22,.72); }
.skill-title { font-family:"Zen",sans-serif; font-weight:900; letter-spacing:.2em; color:var(--gold); }
.skill-bar { border-radius:0; clip-path:var(--skew); background:#0a0f1c; box-shadow:inset 0 0 0 1px var(--line); }
.skill-good { background:rgba(233,196,106,.3); }
.skill-just { background:linear-gradient(90deg,#f7e2a1,#e9c46a); }
.skill-mark { border-radius:0; box-shadow:0 0 12px #fff; }
.skill-count { font-family:"Dela","Zen",sans-serif; font-weight:400; }
.skill-time b { background:linear-gradient(90deg,#e2553a,#ff8f7a); }
.skill-fb { font-family:"Dela","Zen",sans-serif; font-weight:400; }
.skill-fb.just { color:var(--gold); text-shadow:0 0 18px rgba(233,196,106,.8); }
.skill-fb.miss { color:#5d6886; }
.srow i b { background:linear-gradient(90deg,#c99a2e,#f7e2a1); }
.ls i b { background:linear-gradient(90deg,var(--ty,#c99a2e),#f2f4fa); }

/* ==================== 迷宮（dungeon-ui.js）・覚醒 ====================
   C の流儀: 角切り・金の箔・数字は Dela。絵文字は使わない（icons.js の stairs/chest/charm/core/shard/seed/rest） */
.dg-tile { display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:16px 16px; border:0; cursor:pointer; color:#fff; text-align:left;
  clip-path:var(--cut-m); background:linear-gradient(160deg,#3b2a14,#121a30 60%), repeating-linear-gradient(115deg,#1c2744 0 10px,#121a30 10px 20px); box-shadow:inset 0 0 0 2px var(--gold); }
.dg-tile:active { transform:scale(.98); }
.dg-ti { font-size:34px; color:var(--gold); display:inline-flex; }
.dg-tt { display:flex; flex-direction:column; flex:1; min-width:0; }
.dg-tt b { font-size:20px; letter-spacing:.08em; }
.dg-tt small { color:var(--mute); font-size:12px; }
.dg-tr { color:var(--gold); font-size:12px; font-weight:900; text-align:right; max-width:84px; }

.dg { display:flex; flex-direction:column; align-items:stretch; }
.dg-title { display:flex; align-items:center; gap:8px; font-size:24px; letter-spacing:.1em; margin:6px 0 2px; }
.dg-title .ico, .dg-title > .ic { color:var(--gold); font-size:28px; }
.dg-lead { color:var(--mute); font-size:13px; margin:0 0 10px; line-height:1.6; }
.dg-sm { color:var(--mute); font-size:13px; line-height:1.6; margin:4px 0; }

/* 持ち物の列 */
.dg-bag { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 12px; margin:6px 0; clip-path:var(--cut-s); background:#0a0f1c; box-shadow:inset 0 0 0 1px var(--line); }
.dg-bag-t { font-size:11px; font-weight:900; letter-spacing:.14em; color:var(--gold); width:100%; }
.dg-it { display:inline-flex; align-items:center; gap:4px; font-size:15px; color:var(--fg); }
.dg-it .ico, .dg-it > .ic { color:var(--gold); font-size:18px; }
.dg-it b { font-family:"Dela","Zen",sans-serif; font-weight:400; }
.dg-it.exp { font-weight:900; color:var(--good); }
.dg-bag.gain { box-shadow:inset 0 0 0 1px #38d39f88; }
.dg-bag.loot .dg-bag-t { color:var(--mute); }

/* 今日の迷宮・地区 */
.dg-daily, .dg-row { display:flex; align-items:center; gap:12px; width:100%; border:0; cursor:pointer; color:var(--fg); text-align:left; padding:14px; margin-top:8px; clip-path:var(--cut-m); min-height:64px; }
.dg-daily { background:linear-gradient(160deg,#4d7be0,#24357f); }
.dg-daily.done { background:linear-gradient(160deg,#2b3758,#18213a); }
.dg-dic { font-size:28px; color:#fff; display:inline-flex; }
.dg-rt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.dg-rt b { font-size:17px; letter-spacing:.04em; }
.dg-rt small { color:rgba(242,244,250,.75); font-size:12px; }
.dg-rec { display:flex; flex-direction:column; align-items:flex-end; }
.dg-rec b { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:24px; color:var(--gold); }
.dg-rec small { font-size:11px; color:rgba(242,244,250,.75); }
.dg-list { display:flex; flex-direction:column; margin:6px 0 4px; }
.dg-row { background:linear-gradient(160deg,#1c2744,#121a30); box-shadow:inset 0 0 0 1px var(--line); }
.dg-row.clear { box-shadow:inset 0 0 0 1.5px #e9c46a99; }
.dg-row.lock { opacity:.55; }
.dg-no { font-family:"Dela","Zen",sans-serif; font-size:30px; color:var(--gold); width:34px; text-align:center; }
.dg-row.lock .dg-no { color:var(--mute); }
.dg-cats { display:flex; gap:3px; margin-top:3px; font-size:13px; }
.dg-st { font-size:20px; color:var(--mute); display:inline-flex; align-items:center; gap:3px; }
.dg-st.ok { color:var(--gold); font-size:12px; font-weight:900; }
.dg-row:active, .dg-daily:active, .dg-seed:active { transform:scale(.98); }

/* 階の画面 */
.dg-head { display:flex; flex-direction:column; align-items:center; margin:4px 0 6px; }
.dg-head small { color:var(--gold); font-weight:900; letter-spacing:.2em; font-size:12px; }
.dg-floor { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:64px; line-height:1.05; letter-spacing:.02em;
  background:linear-gradient(180deg,#f7e2a1,#e9c46a 55%,#b8862b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dg-ev { display:flex; align-items:center; justify-content:center; gap:6px; font-weight:900; margin:4px 0; padding:8px 10px; clip-path:var(--skew); background:#18213a; font-size:14px; }
.dg-ev .ico, .dg-ev > .ic { color:var(--gold); }
.dg-ev.win { background:linear-gradient(90deg,#1f8a68,#18213a); }
.dg-ev.rest { background:linear-gradient(90deg,#24357f,#18213a); }
.dg-ev.core { color:var(--gold); }
.dg-team { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.dg-mem { display:flex; align-items:center; gap:10px; padding:8px 10px; clip-path:var(--cut-s); background:linear-gradient(90deg,#1c2744,#121a30); box-shadow:inset 0 0 0 1px var(--line); }
.dg-mem.down { opacity:.75; }
.dg-mem.down .dg-pic { filter:grayscale(1) brightness(.6); }
.dg-pic { width:46px; height:46px; flex:none; overflow:hidden; clip-path:var(--cut-s); }
.dg-pic img, .dg-pic canvas, .dg-pic .mosaic { width:100%; height:100%; object-fit:cover; display:block; }
.dg-mi { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.dg-mi b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg-mi .hp { height:8px; position:relative; overflow:hidden; }
.dg-mi .hp b { display:block; height:100%; }
.dg-mi small { color:var(--mute); font-size:12px; display:inline-flex; align-items:center; gap:3px; }
.dg-charm { width:auto; margin:0; padding:10px 12px; font-size:13px; min-height:44px; }
.dg-next { display:flex; flex-direction:column; gap:6px; padding:12px; margin:8px 0 2px; clip-path:var(--cut-m); background:linear-gradient(160deg,#2a1f3a,#121a30); box-shadow:inset 0 0 0 1px var(--line); }
.dg-next.boss { background:linear-gradient(160deg,#5a1f2c,#121a30 70%); box-shadow:inset 0 0 0 2px #e2553a; }
.dg-nt { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:16px; color:var(--gold); letter-spacing:.06em; }
.dg-next.boss .dg-nt { color:#ff8f7a; }
.dg-foes { display:flex; flex-wrap:wrap; gap:8px; }
.dg-foe { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:#0a0f1c; clip-path:var(--skew); font-size:13px; }

/* 宝箱 */
.dg-chest { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px; margin:10px 0; clip-path:var(--cut-l);
  background:radial-gradient(60% 50% at 50% 35%, rgba(233,196,106,.18), transparent 70%), linear-gradient(160deg,#1c2744,#0d1322); box-shadow:inset 0 0 0 2px var(--gold); }
.dg-chest > small { color:var(--mute); font-weight:900; letter-spacing:.14em; }
.dg-box { border:0; background:none; color:var(--gold); font-size:96px; cursor:pointer; padding:6px; display:inline-flex; filter:drop-shadow(0 0 14px rgba(233,196,106,.4)); animation:dgShake 1s ease-in-out infinite; }
.dg-chest.open .dg-box { animation:dgPop .45s ease-out both; filter:drop-shadow(0 0 30px rgba(233,196,106,.95)); }
.dg-ch-t { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:24px; margin:0; letter-spacing:.06em; }
.dg-bag.chest-in { justify-content:center; animation:dgIn .35s ease-out both; }
@keyframes dgShake { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-6deg); } 40% { transform:rotate(5deg); } 60% { transform:rotate(-3deg); } }
@keyframes dgPop { 0% { transform:scale(1); } 50% { transform:scale(1.25); } 100% { transform:scale(1.1); } }
@keyframes dgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* 終わり */
.dg-end { display:flex; flex-direction:column; align-items:center; padding:12px 0 4px; }
.dg-end > small { color:var(--mute); font-weight:900; letter-spacing:.14em; }
.dg-end .b-title { margin:4px 0 0; font-size:34px; }
.dg-end.down .dg-floor { background:linear-gradient(180deg,#ffb08a,#e2553a); -webkit-background-clip:text; background-clip:text; }
.dg-exp { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.dg-exl { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; background:#121a30; clip-path:var(--skew); font-size:14px; }
.dg-exl span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dg-exl b { font-family:"Dela","Zen",sans-serif; font-weight:400; color:var(--good); white-space:nowrap; }

/* 育てる */
.dg-face { display:flex; justify-content:center; margin:6px 0; }
.dg-face .card { width:min(300px,80vw); }
.dg-burst { text-align:center; font-family:"Dela","Zen",sans-serif; font-size:40px; margin:0; color:var(--gold); text-shadow:0 0 22px rgba(233,196,106,.8); animation:dgPop .6s ease-out both; }
.dg-sec { padding:12px; margin:8px 0; clip-path:var(--cut-m); background:linear-gradient(160deg,#1c2744,#121a30); box-shadow:inset 0 0 0 1px var(--line); }
.dg-sec h3 { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:17px; letter-spacing:.08em; }
.dg-sec h3 .ico, .dg-sec h3 > .ic { color:var(--gold); }
.dg-need { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.dg-req { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#0a0f1c; clip-path:var(--skew); font-size:13px; color:var(--mute); }
.dg-req > span:not(.seal):not(.ico) { flex:1; }
.dg-req.ok { color:var(--fg); }
.dg-req .dg-ok { color:var(--mute); }
.dg-req.ok .dg-ok { color:var(--good); }
.dg-lv { font-family:"Dela","Zen",sans-serif; font-style:normal; font-size:11px; color:var(--gold); width:1.5em; text-align:center; }
.dg-seeds { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.dg-seed { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:0; cursor:pointer; color:var(--fg); clip-path:var(--cut-s); background:#0a0f1c; box-shadow:inset 0 0 0 1px var(--line); min-height:64px; }
.dg-seed b { font-family:"Dela","Zen",sans-serif; font-weight:400; font-size:20px; }
.dg-seed small { color:var(--good); font-size:11px; font-weight:900; }
.dg-seed:disabled { opacity:.45; cursor:default; }
.dg-sn { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--mute); }
.dg-marks, .sh-marks { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--gold); font-size:13px; font-weight:900; margin:6px 0; }

/* 覚醒したカード: 縁が一段上の箔（1段目は金、2段目は虹の箔を太く） */
.card.evo1::before { background:linear-gradient(140deg,#f7e2a1,#c99a2e 45%,#f7e2a1 70%,#b8862b); padding:3px; }
.card.evo2::before { background:var(--foil); padding:4px; }
.card.evo2 { filter:drop-shadow(0 0 10px rgba(233,196,106,.45)); }
.card.awaken { animation:dgAwake 1.1s ease-out both; }
@keyframes dgAwake { 0% { filter:brightness(3) saturate(0); transform:scale(.92); } 40% { filter:brightness(1.8); transform:scale(1.04); } 100% { filter:none; transform:none; } }
@media (prefers-reduced-motion: reduce) { .dg-box, .dg-chest.open .dg-box, .card.awaken, .dg-burst, .dg-bag.chest-in { animation:none; } }

/* ---------- パーティ相性 ---------- */
.syn { margin:10px 0 0; padding:10px 12px; background:var(--panel); border:1px solid var(--line); clip-path:var(--cut-s); }
.syn-head { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:12px; color:var(--gold); letter-spacing:.08em; }
.syn-head .q { margin-left:auto; }
.syn-none { margin:0; font-size:12px; color:var(--mute); line-height:1.6; }
.syn-line { margin:4px 0 0; padding-left:10px; font-size:13px; line-height:1.5; border-left:3px solid var(--accent); }
.syn-line.trio { border-color:var(--gold); } .syn-line.mono { border-color:var(--bad); } .syn-line.kin { border-color:var(--good); } .syn-line.hue { border-color:var(--pink); }
.lineup { flex-wrap:wrap; }
.syn.short { flex-basis:100%; display:flex; justify-content:center; gap:4px; margin:2px 0 0; padding:0; background:none; border:0; clip-path:none; }
.syn-chip { font-size:10px; padding:2px 8px; background:var(--panel2); color:var(--fg); clip-path:var(--skew); }
.syn-chip.trio { color:var(--gold); } .syn-chip.mono { color:var(--bad); } .syn-chip.kin { color:var(--good); } .syn-chip.hue { color:var(--pink); }
.chip.tr { color:var(--good); }
.perk.tr { color:var(--good); }
/* 地区の印（迷宮をクリアしたカード）: 絵の右上にひし形の漢字。全地区で縁が藍と金に */
.cf-marks { position:absolute; right:6px; top:6px; display:flex; gap:3px; }
.dmark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; font-family:"Zen",sans-serif; font-weight:900; font-size:12px; line-height:1; color:#fff;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:#5e6782; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.card.mini .cf-marks { right:3px; top:3px; gap:1px; }
.card.mini .dmark { width:13px; height:13px; font-size:7px; }
.dm-kitchen { background:#c8733a; } .dm-forest { background:#3f9a5b; } .dm-sea { background:#2f86c9; } .dm-city { background:#7a6fd0; } .dm-night { background:#3b3f5c; box-shadow:inset 0 0 0 1px #e9c46a; }
.card.m-all::before { background:linear-gradient(140deg,#7cf3ff,#e9c46a 40%,#2f86c9 70%,#e9c46a); padding:3.5px; }


/* 技のボタン（2×2）とカード詳細の技一覧。--mt は技のタイプの色 */
.cmd4 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cmd.mv4 { min-height:78px; padding:9px 10px 8px; align-items:flex-start; text-align:left; gap:3px; }
.mv-top { display:flex; align-items:center; gap:5px; min-width:0; width:100%; position:relative; z-index:1; }
.mv-tag { flex:none; font-size:11px; font-weight:900; background:rgba(10,15,28,.45); padding:1px 6px; clip-path:var(--skew); }
.mv-seal.seal { flex:none; width:20px; height:20px; font-size:11px; }
.mv-name { font-size:14px; font-weight:900; line-height:1.25; min-width:0; overflow-wrap:anywhere; }
.cmd.mv4 .mv-num { font-size:12px; font-weight:900; opacity:1; }
.cmd.mv4 .mv-desc { font-size:10.5px; font-weight:700; opacity:.85; line-height:1.3; }
.cmd.k-attack { background:linear-gradient(160deg,#e2553a,#9c2440); color:#fff; }
.cmd.k-cover { background:linear-gradient(160deg,color-mix(in srgb,var(--mt) 75%,#e2553a),color-mix(in srgb,var(--mt) 45%,#3a1630)); color:#fff; }
.cmd.k-guard { background:linear-gradient(160deg,#4d7be0,#24357f); color:#fff; }
.cmd.k-special { background:#18213a; color:#7b86a4; }
.cmd.k-special.ready { background:linear-gradient(160deg,#f7e2a1,#e9c46a 50%,#c99a2e); color:#1a1408; animation:glow 1s infinite; }
.cmd.k-special .fillbar { position:absolute; left:0; bottom:0; height:5px; width:0; background:var(--gold); transition:width .3s; }
.cmd.k-special.ready .fillbar { display:none; }
.cmd.mv4:disabled { opacity:.55; } .cmd.k-special.ready:disabled { opacity:1; }
.vs-cmd.cmd4 .cmd { min-height:84px; }
.rv-chip.k-cover { background:linear-gradient(160deg,#c46a3a,#6a2440); }
.rv-chip b { text-align:center; overflow-wrap:anywhere; }
.moves4 { display:flex; flex-direction:column; gap:6px; }
.mv4row { background:#141c32; border-left:3px solid var(--mt); padding:8px 10px; }
.mv4row .mv-top .mv-name { flex:1; }
.mv4row .mv-num { flex:none; font-size:12px; font-weight:900; color:var(--gold); }
.mv4row .mv-desc { margin:4px 0 0; font-size:11.5px; color:var(--mute); line-height:1.5; font-weight:700; }
.mv4row.k-attack .mv-tag, .mv4row.k-cover .mv-tag { background:#9c2440; color:#fff; }
.mv4row.k-guard .mv-tag { background:#24357f; color:#fff; }
.mv4row.k-special .mv-tag { background:var(--gold); color:#1a1408; }
@media (max-width:340px) { .mv-name { font-size:12.5px; } .cmd.mv4 .mv-desc { display:none; } }

/* 撮った直後の見つけにくさ */
.find { display:flex; align-items:center; gap:6px; margin:12px 0 0; font-size:13px; font-weight:800; color:var(--mute); }
.find b { color:var(--fg); padding:2px 10px; background:#202b48; clip-path:var(--skew); }
.find.f1 b { background:#24357f; } .find.f2 b { background:linear-gradient(160deg,#c99a2e,#8a5a12); color:#1a1408; }

/* 共有ボタン（_shared/share.js の部品）を本体の形と書体に合わせる。部品の <style> は後から差し込まれるので body を付けて勝たせる。X は黒白・LINE は緑のまま（各社の決まり） */
body .gs-share { border-radius:0; clip-path:var(--cut-m); font-family:"Zen",sans-serif; font-weight:900; letter-spacing:.04em; }
body .gs-small:not(.gs-line) { background:var(--panel2); color:var(--fg); }
body .gs-x { box-shadow:none; }
body .gs-toast { border-radius:0; clip-path:var(--cut-m); background:var(--panel2); color:var(--fg); box-shadow:inset 0 0 0 1px var(--gold); font-family:"Zen",sans-serif; font-weight:700; }
body .gs-vet { border-radius:0; clip-path:var(--skew); background:var(--gold); color:#1a1408; }
.dg-rt .dg-left { display:block; color:var(--gold); font-weight:900; }

/* ==================== 多言語（2026-10-24） ====================
   同梱の Zen/Dela は日本語の字だけのサブセット。繁体字・韓国語は本文も見出しもその言語の書体にする。
   数字・英字の Dela は英数字だけの "DelaL"（unicode-range）で残し、漢字が日本語の字形で混ざらないようにする。印（.seal など）は Dela のまま */
@font-face { font-family:"DelaL"; src:url(/fonts/dela.woff2) format("woff2"); font-display:swap; unicode-range:U+0020-007E, U+00D7, U+2605; }
html:lang(zh-Hant) { --lf:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; }
html:lang(ko) { --lf:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; }
html:lang(zh-Hant) body, html:lang(ko) body, html:lang(zh-Hant) body *, html:lang(ko) body * { font-family:var(--lf); }
html:lang(zh-Hant) :is(.logo, .logo span, .fmt-n, .room-code, .z-prog b, .cf-lv, .skill-count, .b-title, .win-big, .lv-num, .lvt b, .fmt-vs, .vs-bolt, .bo-x, .steps b, .pbadge, .float, .mv .mb, .skill-fb, .dg-it b, .dg-rec b, .dg-no, .dg-floor, .dg-nt, .dg-ch-t, .dg-exl b, .dg-burst, .dg-lv, .dg-seed b),
html:lang(ko) :is(.logo, .logo span, .fmt-n, .room-code, .z-prog b, .cf-lv, .skill-count, .b-title, .win-big, .lv-num, .lvt b, .fmt-vs, .vs-bolt, .bo-x, .steps b, .pbadge, .float, .mv .mb, .skill-fb, .dg-it b, .dg-rec b, .dg-no, .dg-floor, .dg-nt, .dg-ch-t, .dg-exl b, .dg-burst, .dg-lv, .dg-seed b) { font-family:"DelaL",var(--lf); }
html:lang(zh-Hant) body :is(.seal, .cf-ty, .logo-mk, .dmark), html:lang(ko) body :is(.seal, .cf-ty, .logo-mk, .dmark) { font-family:"Dela","Zen",sans-serif; }
.set-lang:lang(zh-Hant) { font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif; }
.set-lang:lang(ko) { font-family:"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; }

/* 長い英語・韓国語の文言: 折り返し・省略を最小限 */
.btn, .tile b, .tile small, .dg-tt b, .dg-tt small, .dg-tr, .zrow small, .qchip, .fchip, .howto li, .steps3 b, .steps3 span, .sh-act .btn, .pt-q, .b-sub, .vsline, .turn, .hint { overflow-wrap:anywhere; }
.btn > span, .btn > b { min-width:0; }
.tile b { display:block; max-width:100%; line-height:1.2; text-align:center; }
.tile small { text-align:center; line-height:1.3; }
.zrow > span:first-child { white-space:nowrap; }
.zrow small { text-align:right; }
.dg-tr { max-width:96px; }
.cat small { text-overflow:ellipsis; padding:0 2px; }
.z-prog [data-i18n]:not(:lang(ja)) { margin-left:.3em; }
.logo { white-space:nowrap; } html:lang(en) .logo { font-size:17px; letter-spacing:0; }
@media (max-width:380px) { html:lang(en) .logo, html:lang(ko) .logo, html:lang(zh-Hant) .logo { font-size:14px; gap:6px; } .topr .pill { padding:6px 8px; } }

/* 設定 */
.set-sheet h2 { margin-bottom:4px; }
.set-h { display:flex; align-items:center; gap:6px; margin:16px 0 8px; font-size:14px; font-weight:900; letter-spacing:.08em; color:var(--gold); }
.set-langs, .set-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.set-lang, .set-opt { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:6px 8px; border:0; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); clip-path:var(--cut-s); color:var(--fg); font-size:15px; font-weight:900; cursor:pointer; touch-action:manipulation; overflow-wrap:anywhere; }
.set-lang.on, .set-opt.on { background:linear-gradient(160deg,#f7e2a1,#e9c46a 50%,#c99a2e); color:#1a1408; box-shadow:none; }
.set-lang:active, .set-opt:active, .set-link:active { transform:scale(.97); }
.set-note { margin:0 0 8px; font-size:12px; line-height:1.6; color:var(--mute); }
.set-links { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.set-link { display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:0 14px; border:0; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); clip-path:var(--cut-s); color:var(--fg); font-family:inherit; font-size:15px; font-weight:800; text-align:left; text-decoration:none; cursor:pointer; }
.set-link > .ico:first-child { color:var(--gold); }
.set-link .set-go { margin-left:auto; color:var(--mute); }

/* 上の帯: 右のボタン（図鑑・？・設定）は縮めず必ず画面内に。題字が長い言語（英語）や狭い端末では題字の側を折り返す */
.top { gap:8px; }
.topr { flex-shrink:0; }
.logo { min-width:0; white-space:nowrap; font-size:clamp(14px, 4.6vw, 20px); }
/* 英語の題字は長いので、狭い端末では「Battle」を省いて「Mono Zukan」だけにする */
@media (max-width:430px) { html[lang="en"] .logo > span:not(.logo-mk) { display:none; } }