body.dp {
  --dpc: 5px; --dps: 3px;
  --dpClip: polygon(var(--dpc) 0, calc(100% - var(--dpc)) 0, 100% var(--dpc), 100% calc(100% - var(--dpc)),
                    calc(100% - var(--dpc)) 100%, var(--dpc) 100%, 0 calc(100% - var(--dpc)), 0 var(--dpc));
  --dpClip3: polygon(var(--dps) 0, calc(100% - var(--dps)) 0, 100% var(--dps), 100% calc(100% - var(--dps)),
                     calc(100% - var(--dps)) 100%, var(--dps) 100%, 0 calc(100% - var(--dps)), 0 var(--dps));
  --dpEdge: url("/v6/deai/play/art/cut-edge.svg"); --dpRim: url("/v6/deai/play/art/cut-rim.svg");
  --dpGold: url("/v6/deai/play/art/cut-gold.svg"); --dpRed: url("/v6/deai/play/art/cut-red.svg");
  --dpRune: url("/v6/deai/play/art/cut-rune.svg");
}

 
body.dp :is(.endTurn, .menuBtn, .fsBtn, .ribbon, .fightLine, .sh, .opt, .x, .info, .mPanel, .mTile, .mFoot .menuHome, .mFoot .mConcede,
            .vbChip, .apTag)::after,
body.dp :is(.callout, .vbIco)::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 3;
  border: 8px solid transparent; border-image: var(--dpEdge) 8 / 8px / 0 stretch; }
body.dp :is(.ribbon, .sh, .opt, .info, .mTile, .mFoot .menuHome, .callout)::after,
body.dp .callout::before { border-image-source: var(--dpRim); }
body.dp .callout.held::after { content: none; }

 
body.dp :is(.endTurn, .ribbon, .fightLine, .sh, .opt, .x, .info, .mPanel, .mTile, .mFoot .menuHome, .mFoot .mConcede, .callout,
            .vbChip, .vbIco, .apTag) {
  border-radius: 0; border-color: transparent; clip-path: var(--dpClip); }
body.dp :is(.ribbon, .sh, .opt, .mTile, .mFoot .menuHome, .mFoot .mConcede, .vbIco, .apTag) { position: relative; }




body.dp :is(.endTurn, .ribbon, .opt, .x, .mTile, .mFoot .menuHome, .mFoot .mConcede, .vbChip, .apTag):focus-visible {
  outline: 2px solid var(--pick); outline-offset: -5px; }
body.dp .endTurn:not(.passMode):focus-visible { outline-color: #080d0f; }
 

 
 
body.dp .colL, body.dp .colR { background: none !important; border-color: transparent; }
body.dp.bfOn :is(.colL, .colR) :is(.ldName, .turnTag, .chip small, .gemBox) { text-shadow: 0 1px 2px #000, 0 0 4px #000c; }




 
body.dp.bfOn .leader .chip small { background: #080d0fe6; border-radius: 0; clip-path: var(--dpClip3);
  padding-top: 2px; padding-bottom: 2px; margin-top: -2px; }


body.dp.bfOn .turnTag { width: fit-content; margin-left: auto; margin-right: auto; background: #080d0fe6;
  padding-left: calc(3 * var(--u)); padding-right: calc(3 * var(--u)); }
 
body.dp.bfOn .leader .miniGems span:not(.gem) { background: #080d0fe6; box-shadow: 0 0 0 2px #080d0fe6; }


body.dp.bfOn .leader .ldName { width: fit-content; max-width: 100%; box-sizing: border-box; background: #080d0fe6;
  padding: 0 calc(3 * var(--u)); margin-left: calc(-3 * var(--u)); }


body.dp.bfOn .leader .chip.dim { opacity: 1; }
body.dp.bfOn .leader .chip.dim > svg, body.dp.bfOn .leader .chip.dim::before, body.dp.bfOn .leader .chip.dim::after { opacity: .55; }
body.dp.bfOn .leader.foe .chip.dim > svg, body.dp.bfOn .leader.foe .chip.dim::before, body.dp.bfOn .leader.foe .chip.dim::after { opacity: .88; }

 
body.dp :is(.menuBtn, .fsBtn) { border-radius: 0; background: none; border-color: transparent; }
body.dp :is(.menuBtn, .fsBtn)::before { content: ""; position: absolute; inset: max(5px, calc(6 * var(--u))); pointer-events: none; z-index: 0;
  background: #131a1d; clip-path: var(--dpClip); }
body.dp :is(.menuBtn, .fsBtn)::after { inset: max(5px, calc(6 * var(--u))); }
body.dp :is(.menuBtn, .fsBtn) > svg { position: relative; z-index: 1; }
body.dp .menuBtn .menuGear, body.dp .fsBtn svg { width: max(18px, calc(18 * var(--u))); height: max(18px, calc(18 * var(--u))); }


body.dp .fsBtn > .fsPi { position: relative; z-index: 1; width: max(18px, calc(18 * var(--u))); height: max(18px, calc(18 * var(--u))); }




body.dp .menuBtn > .menuGear { display: none; }
body.dp .menuBtn > .menuPi { display: block; position: relative; z-index: 1; width: max(18px, calc(18 * var(--u))); height: max(18px, calc(18 * var(--u)));
  object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
body.dp :is(.menuBtn, .fsBtn):hover::after { border-image-source: var(--dpRim); }

 
body.dp .endTurn { background: #f0b54c; border-color: transparent;
  box-shadow: inset 0 0 0 1px #ffe1a3, inset 0 calc(-3 * var(--u)) 0 #c98a2a, inset 0 0 calc(16 * var(--u)) rgba(255,236,190,.45); }
body.dp .endTurn::after { border-image-source: url("/v6/deai/play/art/cut-et.svg"); }
body.dp .endTurn.off { box-shadow: inset 0 0 0 1px #ffe1a3; }
 
body.dp .endTurn.passMode { background: #1a2327; box-shadow: none; }
body.dp .endTurn.passMode::after { border-image-source: var(--dpRune); }
 
body.dp .apTag { --dpc: var(--dps); background: #0c1a20; }
body.dp .apTag::after { border-image: var(--dpRune) 6 / 6px / 0 stretch; border-width: 6px; }

 
body.dp .leader .chip { border-radius: 0; border-color: transparent; background: none; box-shadow: none; isolation: isolate; }
body.dp .leader .chip::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; pointer-events: none;
  background: var(--tileBg); clip-path: var(--dpClip); }
body.dp .leader .chip::after { content: ""; position: absolute; inset: -1.5px; pointer-events: none;
  border: 8px solid transparent; border-image: var(--dpRim) 8 / 8px / 0 stretch; }
body.dp .leader .chip.crown::before { background: var(--crownbg); }
body.dp .leader .chip.crown::after { border-image-source: url("/v6/deai/play/art/cut-gold.svg"); }
body.dp .leader .chip.dim { border-style: solid; }
body.dp .leader .chip.dim::after { border-image-source: url("/v6/deai/play/art/cut-rim-dash.svg"); }
body.dp .chip small { border-radius: 0; }

 
body.dp .hpNum { border-radius: 0; clip-path: var(--dpClip3); }
body.dp .hpBar { border-radius: 0; }
 
body.dp .botTag { border-radius: 0; clip-path: var(--dpClip3); }
body.dp .botTag svg { display: none; }

 
body.dp .oppCount { border-radius: 0; clip-path: var(--dpClip3); }

 
body.dp .ribbon.crown { box-shadow: none; }
body.dp .ribbon.crown::after, body.dp .callout.crown::before { border-image-source: url("/v6/deai/play/art/cut-gold.svg"); }
body.dp .callout { box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) #000c; }
body.dp .callout.crown { box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) #000c; }
body.dp .fightLine { padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); }
body.dp .tile { border-radius: 0; clip-path: var(--dpClip3); }
body.dp .tile.crown { box-shadow: none; }

 
body.dp .sh { box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) #000; }
body.dp .sh.react::after { border-image-source: var(--dpRune); }
body.dp .sh .fight .fn { border-radius: 0; clip-path: var(--dpClip3); }
body.dp .opt.pri { box-shadow: inset 0 0 calc(14 * var(--u)) var(--actGlow); }
body.dp .opt.pri::after { border-image-source: url("/v6/deai/play/art/cut-gold.svg"); }
body.dp .opt.spur::after { border-image-source: url("/v6/deai/play/art/cut-gold.svg"); }






body.dp #inspect .setBox { width: min(calc(460 * var(--u)), 92vw); }
body.dp #inspect .setBox > h2 { order: -3; min-height: 40px; display: flex; align-items: center; margin: 0; }
body.dp #inspect .setBox > .tgl.snd { order: -2; }
body.dp #inspect .setBox > .tgl.mus { order: -1; }
body.dp #inspect .setBox > .dpActs { order: 1; }
body.dp #inspect .setBox > .x { right: calc(6 * var(--u)); top: calc(6 * var(--u)); }
 
body.dp #inspect .setBox .tgl.sw { min-height: 46px; padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u));
  border-style: solid; border-color: transparent; border-image: var(--dpEdge) 8 / 8px / 0 stretch; }
body.dp #inspect .setBox .tgl.sw:has(input:checked) { border-image-source: url("/v6/deai/play/art/cut-bronze.svg"); }
body.dp #inspect .setBox .tgl.sw .tTxt { padding-left: calc(4 * var(--u)); }
 
body.dp #inspect .tgl.sw input[type="checkbox"] { border-radius: 0; clip-path: var(--dpClip3); }
body.dp #inspect .tgl.sw input[type="checkbox"]::before { border-radius: 0; box-shadow: none;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
body.dp #inspect .tgl.sw input[type="checkbox"]:focus-visible { outline: none; border-color: var(--goldHi); }
 
body.dp .dpActs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(8 * var(--u));
  border-top: 1px solid var(--edge2); padding-top: calc(10 * var(--u)); margin-top: calc(2 * var(--u)); }
body.dp .dpActs > .dpAct { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 0; margin: 0; padding: 0 calc(6 * var(--u)); box-sizing: border-box; clip-path: var(--dpClip);
  border: 1px solid transparent; border-image: var(--dpRim) 8 / 8px / 0 stretch; background: var(--tileBg); color: var(--ink);
  font: 700 max(12px, calc(13 * var(--u)))/1.1 var(--ui); text-decoration: none; text-align: center; white-space: normal; cursor: pointer; }
body.dp .dpActs > .dpAct[hidden] { display: none; }
body.dp .dpActs > .dpAct:is(:hover, :focus-visible) { border-image-source: var(--dpGold); outline: none; background: var(--pane2); }
body.dp .dpActs > .dpAct > span:not(.dpSock) { line-height: 1.1; }
body.dp .dpActs > .dpAct .dpSock { width: 20px; height: 20px; }






body.dp #inspect .setBox > .dpActs { position: sticky; bottom: calc(-14 * var(--u)); z-index: 2;
  margin-bottom: calc(-14 * var(--u)); padding-bottom: calc(14 * var(--u)); background: var(--pane); }
body.dp #inspect .setBox > .dpActs.dpMore::before { content: ""; position: absolute; left: 0; right: 0;
  top: calc(-22 * var(--u) - 1px); height: calc(22 * var(--u)); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--pane)); }
 





@media (max-height: 430px) {
  body.dp #inspect .setBox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense;
    align-content: start; column-gap: calc(8 * var(--u)); width: min(calc(760 * var(--u)), 92vw); }
  body.dp #inspect .setBox > :is(h2, .dpActs, .tgl.mus) { grid-column: 1 / -1; }
}
 
body.dp .dpActs > .dpConcede { background: #2a0f0d; color: #ffb3a8; border-image-source: var(--dpRed); }
body.dp .dpActs > .dpConcede:is(:hover, :focus-visible) { background: #3a1512; color: #ffd2cb; border-image-source: var(--dpRed); }
 
body.dp .mFoot .mConcede::after { border-image-source: var(--dpRed); }
 


body.dp :is(#inspect .setBox, .mPanel) > .x { width: 44px; height: 44px; }

 
body.dp .dpSock { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
body.dp .dpSock > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }

 
body.dp .info { box-shadow: 0 calc(12 * var(--u)) calc(36 * var(--u)) #000d; }
body.dp .tgl.sw { border-radius: 0; clip-path: var(--dpClip); }
body.dp .tgl.sw .tIco { display: none; }
body.dp .rTile { border-radius: 0; clip-path: var(--dpClip); }



body.dp #result .vbActs .opt.pri { box-shadow: inset 0 0 calc(18 * var(--u)) var(--actGlow), inset 0 0 0 1px #ffbf4766; }
body.dp #result .vbActs .opt.pri::after { border-image: url("/v6/deai/play/art/cut-gold.svg") 8 / 8px / 0 stretch; }
body.dp .vbIco::before { border-image-source: var(--dpEdge); }
body.dp .vbIco:hover::before, body.dp .vbIco:focus-visible::before { border-image-source: var(--dpRim); }
body.dp .vbIco > svg { display: none; }
body.dp .vbIco .dpSock { width: max(24px, calc(26 * var(--u))); height: max(24px, calc(26 * var(--u))); }
body.dp .vbMode { border-radius: 0; gap: 0; clip-path: var(--dpClip3); }
body.dp .vbMode svg { display: none; }
 
body.dp .vbChip { flex-direction: row; flex-wrap: wrap; align-content: flex-end; align-items: center; justify-content: center; column-gap: calc(3 * var(--u)); }
body.dp .vbChipSw { border-radius: 0; border: 0; background: url("/v6/art/icons/deck-96.webp") center / 100% no-repeat; filter: drop-shadow(0 1px 2px #000);
  width: max(14px, calc(14 * var(--u))); height: max(14px, calc(14 * var(--u))); }
body.dp .vbChipSw svg { display: none; }
body.dp .vbChip::after { z-index: 1; }
body.dp .vbChip:hover::after { border-image-source: var(--dpGold); }





body.dp #result .vbActs { --dpActW: max(92px, calc(100 * var(--u))); --dpActH: max(60px, calc(62 * var(--u)));
  gap: max(10px, calc(12 * var(--u))); }
body.dp #result .vbActs > .vbGap { display: none; }
body.dp #result .vbActs > .vbPlay { display: contents; }
body.dp #result .vbActs :is(.vbChip, .opt, .vbIco) { flex: none; box-sizing: border-box; margin: 0;
  width: var(--dpActW); min-width: 0; max-width: none; height: var(--dpActH); min-height: 0; }
body.dp #result .vbActs .opt.pri { padding: calc(4 * var(--u)) calc(6 * var(--u)); justify-content: center; white-space: normal; text-align: center; }
body.dp #result .vbActs .opt.pri.vbAgain { padding: calc(4 * var(--u)) calc(4 * var(--u)); }






body.dp #result .vbActs .opt { min-width: min-content; }





body.dp #result .vb.k-campaign .vbActs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
body.dp #result .vb.k-campaign .vbActs :is(.opt, .vbIco) { width: auto; min-width: var(--dpActW); justify-self: stretch; }





body.dp .endTurn.passMode:not(.off) { animation: dpPassNudge 1.8s ease-in-out 3s infinite; }
@keyframes dpPassNudge {
  0%, 100% { box-shadow: inset 0 0 0 1px #cfe3ea66, inset 0 0 calc(4 * var(--u)) #cfe3ea22; }
  50% { box-shadow: inset 0 0 0 2px #cfe3ea, inset 0 0 calc(14 * var(--u)) #cfe3ea77; }
}


@media (prefers-reduced-motion: reduce) {
  body.dp .endTurn.passMode:not(.off) { animation: dpPassStill 1ms linear 3s forwards !important; }
}
@keyframes dpPassStill { from, to { box-shadow: inset 0 0 0 2px #cfe3ea, inset 0 0 calc(8 * var(--u)) #cfe3ea55; } }

 
body.dp .mFoot .menuHome:has(> .dpSock) > svg { display: none; }