/* Pack Legends：UIのドット部品（ui.js が --ui-* の画像を作る）。全部 3倍のドット・角は1ドット欠き・影は青紫のかたい影
   見た目：夜のマーケット×ダークファンタジー（黒に近い紫・墨色の金属板・真ちゅうの縁・くすんだネオン＋強調は 深い紫・冷たいシアン・暗い血の赤を少し）。和柄・漆・提灯・御札は使わない */
:root{
  --f-deco:'DotGothic16','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
  --f-body:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
  --ink:#1c0a1e;
  --ol1:1px 0 #1c0a1e,-1px 0 #1c0a1e,0 1px #1c0a1e,0 -1px #1c0a1e,1px 1px #1c0a1e,-1px 1px #1c0a1e,1px -1px #1c0a1e,-1px -1px #1c0a1e;
  --ol2:2px 0 #1c0a1e,-2px 0 #1c0a1e,0 2px #1c0a1e,0 -2px #1c0a1e,2px 2px #1c0a1e,-2px 2px #1c0a1e,2px -2px #1c0a1e,-2px -2px #1c0a1e,0 4px #1c0a1e;
}
/* ---- 部品 ---- */
.uw,.us,.uf,.uy,.ua,.mbtn.up,.ui,.ug{border:12px solid transparent;border-radius:0!important;background-clip:padding-box!important;image-rendering:pixelated;box-shadow:none}
.uw{border-image:var(--ui-wood) 4 / 12px;background-image:var(--ui-woodBg);background-size:72px 36px;background-color:#171329}
.us{border-image:var(--ui-shu) 4 / 12px;background-image:var(--ui-shuBg);background-size:24px 24px;background-color:#9a2466}
.uf{border-image:var(--ui-fuda) 4 / 12px;background-image:var(--ui-fudaBg);background-size:48px 48px;background-color:#0e2a40}
.uy{border-image:var(--ui-yami) 4 / 12px;background-image:var(--ui-yamiBg);background-size:48px 48px;background-color:#110d1e}
.ua{border-image:var(--ui-ai) 4 / 12px;background-image:var(--ui-aiBg);background-size:24px 24px;background-color:#22285a}
.mbtn.up{border-image:var(--ui-pk) 4 / 12px;background-image:var(--ui-pkBg);background-size:24px 24px;background-color:#a82a6a}
.ui{border-image:var(--ui-inset) 4 / 12px;background-image:var(--ui-insetBg);background-size:12px 12px;background-color:#0c0916}
.ug{border-image:var(--ui-sel) 4 / 12px}
.s2{border-width:8px!important;border-image-width:8px!important}
.pxi{display:block;image-rendering:pixelated;flex:none;pointer-events:none;-webkit-user-drag:none}
.hide{display:none!important}

/* ---- ボタン（マゼンタの金属板／はがねの板） ---- */
.btn{min-height:52px;padding:0 14px;border:12px solid transparent;border-radius:0;border-image:var(--ui-shu) 4 / 12px;background:var(--ui-shuBg) 0 0/24px 24px #9a2466;background-clip:padding-box;image-rendering:pixelated;
  font-family:var(--f-deco);font-weight:400;font-size:20px;color:#fff6c8;text-shadow:var(--ol1),0 2px #1c0a1e;box-shadow:none;filter:drop-shadow(0 4px 0 #1c0a1e);letter-spacing:.02em}
.btn:active{transform:translateY(3px);box-shadow:none;filter:drop-shadow(0 1px 0 #1c0a1e)}
.btn.sub{border-image-source:var(--ui-ai);background:var(--ui-aiBg) 0 0/24px 24px #22285a;background-clip:padding-box;color:#e8ecff}
.btn:disabled{filter:grayscale(1) brightness(.6) drop-shadow(0 4px 0 #1c0a1e)}
#readyBtn.glow{animation:uiGlow 1s steps(2) infinite}
@keyframes uiGlow{50%{filter:drop-shadow(0 4px 0 #1c0a1e) drop-shadow(0 0 0 #ffe080) brightness(1.25)}}

/* ---- 窓（紺の金属板）と見出し（金属＋真ちゅうの縁） ---- */
.mpanel,#settings .panel,.bmp{border:12px solid transparent;border-radius:0;border-image:var(--ui-yami) 4 / 12px;background:var(--ui-yamiBg) 0 0/48px 48px #110d1e;background-clip:padding-box;image-rendering:pixelated;box-shadow:none;filter:drop-shadow(0 6px 0 #0a0614)}
#rankp .mpanel{border-color:transparent}
.mpanel h2,#settings h3,.bmp h3{display:table;margin:-30px auto 12px;padding:4px 18px 3px;border:12px solid transparent;border-image:var(--ui-wood) 4 / 12px;background:var(--ui-woodBg) 0 0/72px 36px #171329;background-clip:padding-box;image-rendering:pixelated;
  font-family:var(--f-deco);font-weight:400;font-size:24px;line-height:1.1;color:#ffe080;text-shadow:var(--ol1),0 2px #1c0a1e;white-space:nowrap}
.mpanel,#settings .panel{padding-top:26px;margin-top:22px}
.mpanel label,#settings .row label{font-family:var(--f-deco);font-weight:400;font-size:15px;color:#e8d8b8}
input{border:8px solid transparent;border-radius:0;border-image:var(--ui-inset) 4 / 8px;background:#0c0916;background-clip:padding-box;image-rendering:pixelated;padding:6px 8px;color:#f4ead0}
.rkh{font-family:var(--f-deco);font-weight:400;font-size:15px;color:#ffd040;border-bottom:3px solid #7a4a14;padding-bottom:2px;text-shadow:0 2px #1c0a1e}
#rkMe,.soRow,.ttr,.skc,.gaBox,.uinfo,.kwleg,#elHelp .box{border:8px solid transparent!important;border-radius:0!important;border-image:var(--ui-inset) 4 / 8px!important;background:#0c0916!important;background-clip:padding-box!important;image-rendering:pixelated;box-shadow:none!important}
.ttr.on,.skc.on{border-image-source:var(--ui-sel)!important;background:#2a2050!important;background-clip:padding-box!important}
.gaBox{border-image-source:var(--ui-wood)!important;background:var(--ui-woodBg) 0 0/72px 36px #171329!important;background-clip:padding-box!important}
.gaBox b,#rkMe .rt,.rkr b,.rkr .no,.qn,.pot b,#money,#tNum{font-family:var(--f-deco);font-weight:400}
#rkMe .rt{font-size:30px;color:#ffe080;text-shadow:var(--ol1),0 3px #1c0a1e}
.gaBox b{font-size:24px;text-shadow:var(--ol1)}
.rkr.me{background:#2c2848;border-radius:0}
.soRow .no{border-radius:0;font-family:var(--f-deco);font-weight:400;box-shadow:0 0 0 2px #1c0a1e;background:#9a2466;color:#fff6c8;text-shadow:var(--ol1)}
.soRow b,.ttr b{font-family:var(--f-deco);font-weight:400}
.skc{font-family:var(--f-deco);font-weight:400;font-size:12px;padding:4px 0!important}
/* 設定のつまみ */
.sld::before{border-radius:0;height:10px;top:17px;background:#0c0916;border:2px solid #1c0a1e;box-shadow:0 2px 0 #2c2848}
.sld i{border-radius:0;height:6px;top:19px;background:#d8a030;box-shadow:inset 0 2px 0 #ffe080}
.sld b{border-radius:0;width:22px;height:26px;margin-left:-11px;top:9px;border:3px solid #1c0a1e;background:#9a2466;box-shadow:inset 0 3px 0 #ff7ab0,inset 0 -3px 0 #5a0e3a,0 3px 0 #1c0a1e}
#settings .test{border-top:3px dashed #2c2848;color:#b8a88c}
#settings .test button{border-radius:0;border:8px solid transparent;border-image:var(--ui-wood) 4 / 8px;background:var(--ui-woodBg) 0 0/72px 36px #171329;background-clip:padding-box;image-rendering:pixelated;font-family:var(--f-deco);font-weight:400;color:#f4ead0;text-shadow:var(--ol1)}
.ttl{border-radius:0;background:#0e2a40;color:#c8f6ff;box-shadow:0 0 0 1px #1c0a1e,inset 0 1px 0 #3ad8ff;font-family:var(--f-deco);font-weight:400}

/* ---- タイトル ---- */
#title .logo{top:max(8%,calc(env(safe-area-inset-top) + 40px));display:flex;flex-direction:column;align-items:center}
.ttlSign{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 14px 10px;transform-origin:50% -60px;animation:uiSway 4.6s ease-in-out infinite}
.ttlSign{border-image-source:var(--ui-neonP)!important;filter:drop-shadow(0 4px 0 #07060f)}
.ttlSign::before,.ttlSign::after{content:"";position:absolute;bottom:100%;width:3px;height:200px;margin-bottom:12px;background:repeating-linear-gradient(#3c3660 0 6px,#07060f 6px 9px);box-shadow:0 0 0 3px #07060f}
.ttlSign::before{left:18%}.ttlSign::after{right:18%}
@keyframes uiSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
.ttlSign canvas{display:block;image-rendering:pixelated}
.ttlSub{margin-top:6px;padding:2px 10px;background:#1c0a1e;font-family:var(--f-deco);font-weight:400;font-size:16px;letter-spacing:.12em;color:#9fe8ff;text-shadow:0 2px 0 #0a3a4a}
#title .sub{margin-top:14px;padding:0 8px;font-family:var(--f-deco);font-weight:400;font-size:14px;color:#c8f6ff;line-height:1.3}
#title .tap{bottom:14%;animation:none}
#title .tap span{display:inline-block;padding:6px 16px;background:rgba(14,8,26,.82);box-shadow:0 0 0 3px #1c0a1e,0 0 0 6px #8a1020,0 0 0 9px #3a060e;font-family:var(--f-deco);font-weight:400;font-size:20px;color:#ffe080;text-shadow:var(--ol1),0 2px #1c0a1e;animation:uiBlink 1.4s steps(1) infinite}
@keyframes uiBlink{70%{opacity:.35}}
#uiFx{position:fixed;left:0;top:0;z-index:31;pointer-events:none;image-rendering:pixelated}
#title{z-index:32}

/* ---- ホーム（夜市の入口） ---- */
#menu.home{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(rgba(10,6,24,.12) 0 70%,rgba(10,6,24,.45) 70% 74%,rgba(10,6,24,.7) 74% 78%,rgba(10,6,24,.86) 78%);z-index:33}
.hmTop{position:relative;display:flex;align-items:center;gap:8px;padding:2px 4px;flex:none;filter:drop-shadow(0 4px 0 #1c0a1e)}
.hmFace{width:60px;height:60px;flex:none;overflow:hidden;position:relative;padding:0}
.hmFace img{position:absolute;left:50%;top:-12px;width:76px;transform:translateX(-50%);image-rendering:pixelated}
.hmWho{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.hmWho b{max-width:100%;font-family:var(--f-deco);font-weight:400;font-size:20px;line-height:1.1;color:#fff6c8;text-shadow:var(--ol1),0 2px #1c0a1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmTtl{border-width:6px!important;border-image-width:6px!important;padding:0 4px;font-family:var(--f-deco);font-size:12px;line-height:14px;color:#c8f6ff;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hmStat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.hmRank,.hmPts{display:flex;align-items:center;gap:4px;padding:1px 6px 1px 3px;background:#1c0a1e;font-family:var(--f-deco);font-weight:400;white-space:nowrap}
.hmRank svg{width:20px;height:20px}.hmRank b{font-size:14px;color:#f4ead0}
.hmPts b{font-size:18px;color:#ffe080;text-shadow:0 2px #7a4a14}.hmPts small{font-size:12px;color:#d8a030}
.hmStage{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.hmHero{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.hmHero img{display:block;image-rendering:pixelated;animation:uiBob 1.2s steps(1) infinite;-webkit-user-drag:none}
.hmHero::after{content:"";display:block;width:144px;height:15px;margin-top:-10px;background:var(--ui-shadow) center/100% 100%;image-rendering:pixelated;opacity:.8}
@keyframes uiBob{50%{transform:translateY(-3px)}}
.hmHeroTag{position:absolute;right:-18px;top:14%;border-width:8px!important;border-image-width:8px!important;padding:0 4px;font-family:var(--f-deco);font-size:13px;line-height:1.3;color:#c8f6ff;white-space:nowrap;animation:uiBob 1.6s steps(1) infinite}
.hmBtns{display:flex;flex-direction:column;gap:8px;flex:none}
.hmRow{display:flex;gap:8px}
#menu .mbtn{margin:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 4px 0 #1c0a1e);color:#fff6c8;text-shadow:var(--ol1),0 2px #1c0a1e;padding:0 10px;gap:10px;min-width:0}
#menu .mbtn:active{transform:translateY(3px);filter:drop-shadow(0 1px 0 #1c0a1e)}
#menu .mbtn b{font-family:var(--f-deco);font-weight:400;font-size:20px;line-height:1.15;white-space:nowrap}
#menu .mbtn small{display:block;font-size:11px;line-height:1.25;color:#f4ead0;white-space:nowrap}
#menu .mbtn.us{background-color:#9a2466}
.hmMain{min-height:88px;justify-content:center}
.hmMain b{font-size:32px!important;letter-spacing:.04em}
.hmMain small{font-size:12px!important;color:#ffe8b8!important}
.hmMain .pxi{animation:uiBob 1s steps(1) infinite}
.hmMid,.hmSm{position:relative}
.hmMid{flex:1;min-height:68px;justify-content:center;padding-left:22px!important}
.hmMid .pxi{position:absolute;left:-10px;top:-14px;filter:drop-shadow(0 2px 0 #1c0a1e)}
.hmMid span{text-align:center}
.hmMid small{color:#e8d8b8!important}
.hmSm{flex:1;min-height:52px;justify-content:center;gap:6px!important;border-image-source:var(--ui-neonC)!important;background:var(--ui-woodBg) 0 0/72px 36px #0c0a16!important;background-clip:padding-box!important}
.hmSm b{font-size:18px!important;color:#c8f6ff}
.hmSm small{color:#9fb8d8!important}
#mResume{min-height:60px;justify-content:center}
@media (max-height:700px){
  .hmMain{min-height:76px}.hmMain b{font-size:28px!important}
  .hmMid{min-height:60px}.hmSm{min-height:46px}
  .hmBtns{gap:6px}
}
.hmSm .pxi{width:24px!important;height:24px!important}
.btn{white-space:nowrap}
#rkBack,#rkGo,#lbBack,#lbGo,#siBack,#siGo,#cfNo,#cfYes{padding:0 6px;font-size:18px}
.mpanel{margin-top:14px}
.skc{font-size:11px;white-space:nowrap;letter-spacing:-.03em;overflow:hidden}
/* ---- 闇市のHUD（上のバー・タブ・デッキ帯）も 板の縁にそろえる ---- */
.pill{border:6px solid transparent;border-radius:0;border-image:var(--ui-plate) 2 / 6px;background:rgba(20,14,34,.9);background-clip:padding-box;image-rendering:pixelated;box-shadow:none;filter:drop-shadow(0 3px 0 #1c0a1e)}
#money{font-size:28px;padding:0 10px 0 4px;text-shadow:var(--ol1),0 3px #7a4a14}
#oppBar{border-color:transparent}
.gear{border-radius:0;border:6px solid transparent;border-image:var(--ui-plate) 2 / 6px;background:#110d1e;background-clip:padding-box;filter:drop-shadow(0 3px 0 #1c0a1e)}
#tabs button{border-radius:0;border:6px solid transparent;border-bottom-width:0;border-image:var(--ui-plate) 2 / 6px 6px 0 6px;background:#221a36;background-clip:padding-box;image-rendering:pixelated;font-family:var(--f-deco);font-weight:400;font-size:13px;color:#c8b8a0}
#tabs button.on{background:var(--sc);background-clip:padding-box;border-image-source:var(--ui-plateG);color:#fff6c8;text-shadow:var(--ol1)}
#panel{border-radius:0;box-shadow:0 -3px 0 #1c0a1e}
#hand2{border-top:3px solid #1c0a1e;box-shadow:0 -3px 0 #d8a030}
#hand2 .lbl,#dStat{font-family:var(--f-deco);font-weight:400}
.mini,.mini.empty{border-radius:0}
#scoreBar,#wxBar{font-family:var(--f-deco);font-weight:400}
.gaBox span{white-space:nowrap}.gaBox .btn{font-size:15px;padding:0 8px}
#rankp .mpanel{max-height:calc(100vh - 40px);overflow:hidden}
#rkMe{padding:4px 10px!important;margin:2px 0 6px!important}
#rkMsg{margin:6px 0 6px;min-height:0}
#rkTop{min-height:56px}
.gaBox span{font-size:12px}.gaBox b{font-size:22px}
.gaBox .btn{white-space:normal;line-height:1.1;max-width:50%;flex:0 1 auto;min-height:48px}

/* ---- 術カード：8角形（ui.js が 枠から --ui-octN を作る）。コストの丸は 枠の外に出たまま 欠けない ---- */
.card.magic{border-image-slice:16;border-image-width:calc(var(--cw,92px)*.13);background-clip:padding-box;box-shadow:none!important;filter:drop-shadow(0 calc(var(--cw,92px)*.04) 0 rgba(0,0,0,.55))}
.card.magic.r0{border-image-source:var(--ui-oct0)}.card.magic.r1{border-image-source:var(--ui-oct1)}.card.magic.r2{border-image-source:var(--ui-oct2)}.card.magic.r3{border-image-source:var(--ui-oct3)}
.card.magic.r4{border-image-source:var(--ui-oct4)}.card.magic.r5{border-image-source:var(--ui-oct5)}.card.magic.r6{border-image-source:var(--ui-oct6)}
.card.magic .art{clip-path:polygon(9% 0,91% 0,100% 6%,100% 94%,91% 100%,9% 100%,0 94%,0 6%)}
.card.magic .tp{right:13%}
.card.magic .nm{right:9%}
/* 術のミニ札（手札の帯・一覧）：角を 落とした 8角形＋斜めの縁 */
.mini.spa{clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mini.spa::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:var(--rc,#888);image-rendering:pixelated;
  -webkit-mask:var(--ui-octTL) 0 0/8px 8px no-repeat,var(--ui-octTR) 100% 0/8px 8px no-repeat,var(--ui-octBL) 0 100%/8px 8px no-repeat,var(--ui-octBR) 100% 100%/8px 8px no-repeat;mask:var(--ui-octTL) 0 0/8px 8px no-repeat,var(--ui-octTR) 100% 0/8px 8px no-repeat,var(--ui-octBL) 0 100%/8px 8px no-repeat,var(--ui-octBR) 100% 100%/8px 8px no-repeat}
.mini.spa i{left:3px;top:3px}

/* ---- 結果画面（#pvres）：ドットの板・★・札 ---- */
#pvres{background:var(--ui-yamiBg) 0 0/72px 36px #0b0818;image-rendering:pixelated}
#pvres h2{margin:0 0 6px}
.prBan{border-radius:0!important;border:12px solid transparent;background-clip:padding-box!important;image-rendering:pixelated;box-shadow:none!important;padding:2px 26px 6px;font-family:var(--f-deco);font-weight:400;font-size:44px;letter-spacing:.04em;
  filter:drop-shadow(0 6px 0 #07060f);animation:prIn .35s steps(5) both}
.prBan small{font-family:var(--f-deco);font-size:15px;letter-spacing:.2em;opacity:1;margin-bottom:0}
.prBan.win{border-image:var(--ui-banW) 4 / 12px;background:var(--ui-banWBg) 0 0/24px 24px #d8a030;color:#3a1a00;text-shadow:0 3px 0 #fff6c8}
.prBan.win small{color:#7a4a14;text-shadow:0 1px 0 #ffe080}
.prBan.lose{border-image:var(--ui-banL) 4 / 12px;background:var(--ui-banLBg) 0 0/24px 24px #221c3a;color:#e8e0ff;text-shadow:var(--ol2)}
.prBan.lose small{color:#a898d8}
.prBan.win::before,.prBan.win::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;background:#38c8e8;box-shadow:0 0 0 3px #0b0818}
.prBan{position:relative}.prBan.win::before{left:-30px}.prBan.win::after{right:-30px;background:#c02030}
.prTrack{border-radius:0!important;border:8px solid transparent!important;border-image:var(--ui-yami) 4 / 8px!important;background:var(--ui-yamiBg) 0 0/48px 48px #110d1e!important;background-clip:padding-box!important;image-rendering:pixelated;margin:10px 0 12px;padding:6px 12px}
.prNm{font-family:var(--f-deco);font-weight:400;text-shadow:var(--ol1)}
.prStars{display:flex;gap:4px}
.prStars i{width:27px;height:30px;font-size:0!important;margin:0!important;background:var(--ui-starOff) 0 0/100% 100% no-repeat;image-rendering:pixelated}
.prRow.me .prStars i.on{background-image:var(--ui-starC)}.prRow.op .prStars i.on{background-image:var(--ui-starP)}
.prGoal{font-family:var(--f-deco);font-weight:400;color:#a898d8}
.prGoal:empty{display:none}
.prTile{border-radius:0!important;border:8px solid transparent!important;border-image:var(--ui-yami) 4 / 8px!important;background:var(--ui-yamiBg) 0 0/48px 48px #110d1e!important;background-clip:padding-box!important;image-rendering:pixelated;padding:4px 4px 6px;filter:drop-shadow(0 4px 0 #07060f)}
.prTile b{font-family:var(--f-deco);font-weight:400;text-shadow:var(--ol1),0 2px #0b0818}
.prTile.gold,.prTile.pts{border-image-source:var(--ui-selG)!important}
.prTile.lose{border-image-source:var(--ui-neonP)!important}
.prTile.inc{border-image-source:var(--ui-neonC)!important}
#prBtns{margin-top:14px}
#prBtns .btn{min-width:220px}