/* Pack Legends：全部の画面を ドットに そろえる 最後の重ね（いちばん後に 読む）
   ・なめらかな角・グラデ・ぼかしの影は pxcss.js が CSS の規則を その場で 書きかえる（ここは 書きかえで足りない所だけ）
   ・SVG のアイコンは pxsvg.js が 小さなドットの絵にして 背景に貼る（.pxsvg）
   ・文字は DotGothic16（太字は 無いので 使わない）。ロゴ・ドットの数字は canvas のまま */

/* ---- 文字：全部 DotGothic16・太字なし ---- */
:root{--f-body:'DotGothic16',sans-serif;--f-deco:'DotGothic16',sans-serif;--px-notch2:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);--px-notch3:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px);--px-circle:polygon(25% 0,75% 0,75% 12.5%,87.5% 12.5%,87.5% 25%,100% 25%,100% 75%,87.5% 75%,87.5% 87.5%,75% 87.5%,75% 100%,25% 100%,25% 87.5%,12.5% 87.5%,12.5% 75%,0 75%,0 25%,12.5% 25%,12.5% 12.5%,25% 12.5%)}
html,body,button,input,textarea,select{font-family:'DotGothic16',sans-serif}
html{font-synthesis:none;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed}
*,*::before,*::after{font-weight:400!important;font-synthesis:none}

/* ---- SVG → ドットの絵 ---- */
svg.pxsvg{background-repeat:no-repeat;background-position:center;background-size:contain;image-rendering:pixelated;overflow:hidden}

/* ---- ★の玉（勝ち星）：どこでも 同じ ドットの★（shopui.js の --n-star*） ---- */
.pips i{background:var(--n-starOff) 50% 50%/100% 100% no-repeat;image-rendering:pixelated;filter:none!important}
.pips i svg{display:none}
.pips i.on{background-image:var(--n-starM);animation:pxPipIn .3s steps(3) both}
.pips[style*="ff6a8a"] i.on{background-image:var(--n-starO)}
@keyframes pxPipIn{0%{transform:scale(1.5)}100%{transform:none}}

/* ---- 角を 1段 落とす（札・吹き出し・小さな板）。中の物が 外へ はみ出さない部品だけ ---- */
.evChip,.tag3d,#toast,#openQ b,.kw,.kwl .pm,.adTag,#oppNet,.lgr,.dkN,.dkRiv,.dkMineT,.asTag,.sNew,.pairWhere,.evOpt .who,.evTime,.ohand,#intent .ic,.dvC .dvTag,.ttl,.thb,.card .thb,.sbNew,.elNo,.qb,.chips button,.gtabs button,.tg2,#turnT,.dkSub,.evOpt i,.lgIc,.ten,.limTag{clip-path:var(--px-notch2)}
#hint,.evOpt,.thview,.hlc,.asOpt{clip-path:var(--px-notch3)}
/* 丸 → 8×8 の ドットの丸 */
.elt,.card .elb,.bcard .bc-el,.mini i,.dc b,.sjCoin,.qpm,.card .chk{clip-path:var(--px-circle)}
.elt,.card .elb,.bcard .bc-el,.mini i{border-width:2px}

/* ---- まわる輪 → 8つの点が 順に光る ---- */
.spin{width:8px!important;height:8px!important;margin:18px auto!important;border:0!important;border-radius:0!important;background:transparent!important;animation:pxSpin .8s steps(1) infinite!important}
.spin.sm{display:inline-block;width:3px!important;height:3px!important;margin:0 9px!important;vertical-align:2px;animation-name:pxSpinS!important}
@keyframes pxSpin{0%{box-shadow:0px -16px 0 #ffe08a,11px -11px 0 #3a3260,16px 0px 0 #3a3260,11px 11px 0 #3a3260,0px 16px 0 #3a3260,-11px 11px 0 #3a3260,-16px 0px 0 #8a6ad8,-11px -11px 0 #8a6ad8}12.5%{box-shadow:0px -16px 0 #8a6ad8,11px -11px 0 #ffe08a,16px 0px 0 #3a3260,11px 11px 0 #3a3260,0px 16px 0 #3a3260,-11px 11px 0 #3a3260,-16px 0px 0 #3a3260,-11px -11px 0 #8a6ad8}25%{box-shadow:0px -16px 0 #8a6ad8,11px -11px 0 #8a6ad8,16px 0px 0 #ffe08a,11px 11px 0 #3a3260,0px 16px 0 #3a3260,-11px 11px 0 #3a3260,-16px 0px 0 #3a3260,-11px -11px 0 #3a3260}37.5%{box-shadow:0px -16px 0 #3a3260,11px -11px 0 #8a6ad8,16px 0px 0 #8a6ad8,11px 11px 0 #ffe08a,0px 16px 0 #3a3260,-11px 11px 0 #3a3260,-16px 0px 0 #3a3260,-11px -11px 0 #3a3260}50%{box-shadow:0px -16px 0 #3a3260,11px -11px 0 #3a3260,16px 0px 0 #8a6ad8,11px 11px 0 #8a6ad8,0px 16px 0 #ffe08a,-11px 11px 0 #3a3260,-16px 0px 0 #3a3260,-11px -11px 0 #3a3260}62.5%{box-shadow:0px -16px 0 #3a3260,11px -11px 0 #3a3260,16px 0px 0 #3a3260,11px 11px 0 #8a6ad8,0px 16px 0 #8a6ad8,-11px 11px 0 #ffe08a,-16px 0px 0 #3a3260,-11px -11px 0 #3a3260}75%{box-shadow:0px -16px 0 #3a3260,11px -11px 0 #3a3260,16px 0px 0 #3a3260,11px 11px 0 #3a3260,0px 16px 0 #8a6ad8,-11px 11px 0 #8a6ad8,-16px 0px 0 #ffe08a,-11px -11px 0 #3a3260}87.5%{box-shadow:0px -16px 0 #3a3260,11px -11px 0 #3a3260,16px 0px 0 #3a3260,11px 11px 0 #3a3260,0px 16px 0 #3a3260,-11px 11px 0 #8a6ad8,-16px 0px 0 #8a6ad8,-11px -11px 0 #ffe08a}}
@keyframes pxSpinS{0%{box-shadow:0px -6px 0 #ffe08a,4px -4px 0 #3a3260,6px 0px 0 #3a3260,4px 4px 0 #3a3260,0px 6px 0 #3a3260,-4px 4px 0 #3a3260,-6px 0px 0 #8a6ad8,-4px -4px 0 #8a6ad8}12.5%{box-shadow:0px -6px 0 #8a6ad8,4px -4px 0 #ffe08a,6px 0px 0 #3a3260,4px 4px 0 #3a3260,0px 6px 0 #3a3260,-4px 4px 0 #3a3260,-6px 0px 0 #3a3260,-4px -4px 0 #8a6ad8}25%{box-shadow:0px -6px 0 #8a6ad8,4px -4px 0 #8a6ad8,6px 0px 0 #ffe08a,4px 4px 0 #3a3260,0px 6px 0 #3a3260,-4px 4px 0 #3a3260,-6px 0px 0 #3a3260,-4px -4px 0 #3a3260}37.5%{box-shadow:0px -6px 0 #3a3260,4px -4px 0 #8a6ad8,6px 0px 0 #8a6ad8,4px 4px 0 #ffe08a,0px 6px 0 #3a3260,-4px 4px 0 #3a3260,-6px 0px 0 #3a3260,-4px -4px 0 #3a3260}50%{box-shadow:0px -6px 0 #3a3260,4px -4px 0 #3a3260,6px 0px 0 #8a6ad8,4px 4px 0 #8a6ad8,0px 6px 0 #ffe08a,-4px 4px 0 #3a3260,-6px 0px 0 #3a3260,-4px -4px 0 #3a3260}62.5%{box-shadow:0px -6px 0 #3a3260,4px -4px 0 #3a3260,6px 0px 0 #3a3260,4px 4px 0 #8a6ad8,0px 6px 0 #8a6ad8,-4px 4px 0 #ffe08a,-6px 0px 0 #3a3260,-4px -4px 0 #3a3260}75%{box-shadow:0px -6px 0 #3a3260,4px -4px 0 #3a3260,6px 0px 0 #3a3260,4px 4px 0 #3a3260,0px 6px 0 #8a6ad8,-4px 4px 0 #8a6ad8,-6px 0px 0 #ffe08a,-4px -4px 0 #3a3260}87.5%{box-shadow:0px -6px 0 #3a3260,4px -4px 0 #3a3260,6px 0px 0 #3a3260,4px 4px 0 #3a3260,0px 6px 0 #3a3260,-4px 4px 0 #8a6ad8,-6px 0px 0 #8a6ad8,-4px -4px 0 #ffe08a}}

/* ---- 降参ボタン：赤い金属板（はがねの枠のまま 中だけ 赤） ---- */
#giveupBtn{background:#b0283a!important;background-clip:padding-box!important;color:#fff6c8!important}

/* ---- スクロールバー：ドットの細い棒 ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#120e22}
::-webkit-scrollbar-thumb{background:#4a4070;border-radius:0;box-shadow:inset 0 2px 0 #6a5aa0}

/* ---- 幕（全面のオーバーレイ）：丸いグラデは 大きな楕円の帯になるので、平らな暗い幕＋市松の点 ---- */
#evPick,#intro{background:#06040fec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%231c1438'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%231c1438'/%3E%3C/svg%3E") 0 0/4px 4px!important;image-rendering:pixelated}
.sjField{background:#2a1e0c!important}
.fbox{background:#3a1a6a!important}
.stage{background:#2a1218!important}