@font-face{font-family:'DVCinzel';src:url('/fonts/cinzel-variable.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'DVInter';src:url('/fonts/inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  color-scheme: dark;
  --bg:#06090b; --felt:#0b1013; --pane:#131a1d; --pane2:#1a2327; --edge:#26312f; --edge2:#3b4a4d;
  --youGround:#0c1613; --foeGround:#180f0e;
  --ink:#e8ede9; --dim:#93a29d; --dimmer:#66756f; --parch:#e6d5a8; --num:#f4efe2;
  --gold:#dcb46e; --goldHi:#f1d79c; --blood:#c05044; --hurt:#ff6b5a; --heal:#8fd0a5; --sig:#edc65c;
  --act:#ffbf47; --actInk:#ffd27a; --actGlow:rgba(255,191,71,.42);
  --sword:#c9655a; --ironGem:#8fa3b5; --fire:#e0a24c; --tide:#3aa6a0;
  --rune:#cfe3ea; --runebg:#0c1a20; --tileBg:#080d0f; --rim:#46565a; --rim2:#5d6f73; --crownbg:#241d08;
  --ready1:#8fd0a5cc; --ready2:#6fbf8f55; --bulwark:#7ec2f0; --pick:#7ec2f0;
  --strike:#e8654f;    
  --title:'DVCinzel','Cinzel',Georgia,serif;
  --ui:'DVInter','Source Sans 3','Inter',system-ui,sans-serif;
   
  --u: min(100vh / 412, 100vw / 915);
  --tu: var(--u);
}
@supports (height:100dvh){ :root{ --u: min(100dvh / 412, 100vw / 915); } }





:root{--handLift:0px}
@media (min-height:501px) and (max-aspect-ratio:21/10){
  :root{--handLift:clamp(0px, (100vh - 412 * var(--u)) * .7, 70 * var(--u))}
  @supports (height:100dvh){ :root{--handLift:clamp(0px, (100dvh - 412 * var(--u)) * .7, 70 * var(--u))} }
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);overflow:hidden;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg.defs{position:absolute;width:0;height:0}
:focus-visible{outline:2px solid var(--pick);outline-offset:2px}

 
.stage{position:fixed;inset:0;display:grid;
  grid-template-columns: calc(128 * var(--u)) minmax(0,1fr) calc(111 * var(--u));
  grid-template-rows: minmax(calc(30 * var(--u)), 1fr) calc(118 * var(--u)) calc(12 * var(--u)) calc(118 * var(--u)) minmax(calc(62 * var(--u)), 2.2fr) calc(72 * var(--u) + var(--handLift, 0px));
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  background:
    radial-gradient(120% 60% at 50% 0%, #1a0f0d 0%, transparent 55%),
    radial-gradient(120% 60% at 50% 100%, #0d1a15 0%, transparent 55%),
    linear-gradient(180deg, var(--foeGround) 0%, var(--felt) 38%, var(--felt) 62%, var(--youGround) 100%);}




@media (min-height: 380px){
  .stage{grid-template-rows: minmax(calc(30 * var(--u)), 1fr) calc(118 * var(--u)) calc(22 * var(--u)) calc(118 * var(--u)) minmax(calc(52 * var(--u)), 2.2fr) calc(72 * var(--u) + var(--handLift, 0px))}
}
.colL{grid-column:1;grid-row:1/7;position:relative;border-right:1px solid #ffffff0a;background:linear-gradient(90deg,#0004,#0000)}
.colC{grid-column:2;grid-row:1/7;position:relative}
.colR{grid-column:3;grid-row:1/7;position:relative;border-left:1px solid #ffffff0a;background:linear-gradient(270deg,#0004,#0000)}

 
.row{grid-column:2;display:flex;align-items:center;justify-content:center;--k:1;--tu:calc(var(--u) * var(--k));
  column-gap:calc(8 * var(--tu));position:relative;z-index:2;min-width:0;padding:0 calc(6 * var(--u))}
.row.foe{grid-row:2}
.row.you{grid-row:4}
.divider{grid-column:2;grid-row:3;position:relative;z-index:3}
 
.divider::before{content:"";position:absolute;left:3%;right:3%;top:calc(50% - 2px);height:4px;
  background:linear-gradient(180deg,#5a5f63 0%,#2a2e31 45%,#121416 100%);box-shadow:0 1px 0 #000a, 0 -1px 0 #ffffff14;
  clip-path:polygon(0 50%, 6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%)}
.divider::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#c08a4a,#6b4524);box-shadow:0 0 0 2px #121416, 0 1px 3px #000c;pointer-events:none}

 
.tok{position:relative;width:calc(88 * var(--tu));height:calc(118 * var(--tu));flex:0 0 auto;border-radius:calc(10 * var(--tu));
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, opacity .3s ease}
.tok .frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden;border:1px solid var(--edge2);
  background:linear-gradient(#1b2427,#10171a);box-shadow:0 calc(5 * var(--tu)) calc(14 * var(--tu)) #0008}
.tok .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000a 100%)}
.tok .nm{position:absolute;left:calc(5 * var(--tu));right:calc(5 * var(--tu));top:calc(30 * var(--tu));text-align:center;z-index:1;
  font:700 max(11px, calc(10.5 * var(--tu)))/1.12 var(--title);color:var(--parch);letter-spacing:.02em;overflow-wrap:anywhere}



.tok .frame img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tok .frame.has-art .nm{display:none}
.tok.ready{transform:translateY(calc(-3 * var(--tu)))}
.tok.ready .frame{box-shadow:0 0 0 2px var(--ready1),0 0 calc(14 * var(--tu)) var(--ready2),0 calc(5 * var(--tu)) calc(14 * var(--tu)) #0008}





.tok.pickable::before,.tok.aiming::before,.tok.hit::before,.tok.starSrc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3}
.tok.pickable::before{box-shadow:0 0 0 calc(3 * var(--tu)) var(--pick),0 0 calc(18 * var(--tu)) #7ec2f066}
.tok.aiming{transform:translateY(calc(-8 * var(--tu)))}
.tok.aiming::before{box-shadow:0 0 0 calc(3 * var(--tu)) var(--act),0 0 calc(18 * var(--tu)) var(--actGlow)}
.tok.hit::before{box-shadow:0 0 0 calc(3 * var(--tu)) var(--blood),0 0 calc(16 * var(--tu)) #c0504488}


.tok.starSrc{transform:translateY(calc(-8 * var(--tu)));z-index:2}
.tok.starSrc::before{box-shadow:0 0 0 calc(3 * var(--tu)) var(--sig),0 0 calc(22 * var(--tu)) #edc65c88}
.tok.starSrc.pickable::before{box-shadow:0 0 0 calc(3 * var(--tu)) var(--sig),0 0 0 calc(6 * var(--tu)) var(--pick),0 0 calc(22 * var(--tu)) #edc65c88}
.tok.starSrc .mk.star{background:#4a3a0c;box-shadow:0 0 calc(10 * var(--tu)) #edc65caa}
.tok.fresh{animation:tokIn .45s ease-out}
.tok.dying{opacity:.3;filter:grayscale(1)}
@keyframes tokIn{from{opacity:0;transform:translateY(calc(10 * var(--tu))) scale(.9)}to{opacity:1;transform:none}}
.tok:active{transform:scale(.97)}
.tok .crk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}



.tok .chains{position:absolute;inset:4% 2%;width:96%;height:92%;pointer-events:none;z-index:3;
  filter:drop-shadow(0 1px 1px #000c);opacity:.92}
.tok .chains.held{opacity:1;filter:drop-shadow(0 0 2px #e0763a66) drop-shadow(0 1px 1px #000c)}
.mk.holds{background:#101416e6;border:1px solid #9aa4a2b3;color:#c9d2cf}
.tok .chn.held{border-color:#e0763a99}
.tok .shd{position:absolute;left:50%;top:calc(-10 * var(--tu));transform:translateX(-50%);width:calc(28 * var(--tu));height:calc(32 * var(--tu));z-index:5;filter:drop-shadow(0 2px 3px #000c)}
.tok .shd.temp{opacity:.8}
 
#rowYou .tok .shd{top:calc(3 * var(--tu))}
.tok .marks{position:absolute;right:calc(3 * var(--tu));top:calc(3 * var(--tu));z-index:4;display:flex;flex-direction:column;gap:2px}
.mk{width:max(14px, calc(16 * var(--tu)));height:max(14px, calc(16 * var(--tu)));border-radius:3px;display:grid;place-items:center}
.mk svg{width:70%;height:70%;display:block}
.mk.rune{background:var(--runebg);border:1px solid #cfe3ea99;color:var(--rune)}
.mk.star{background:#241d08e6;border:1px solid #edc65c99;color:var(--sig)}
.mk.star.fired{animation:starFire 1.6s ease-in-out 3;background:#4a3a0c}
 
.mk.knell{background:#2a0e0ce6;border:1px solid #e8654fb3;color:#f08a76}


.mk.kp{position:relative}
.mk.kp.ebb{background:#081a1ce6;border:1px solid #3aa6a0cc;color:#7fd3cd}
.mk.kp.flow{background:#2a1a06e6;border:1px solid #ffbf47b3;color:var(--actInk)}
.mk.kp .kpShd{position:absolute;right:-3px;bottom:-3px;width:55%;height:55%;color:var(--parch);filter:drop-shadow(0 0 1px #000)}
@keyframes starFire{0%,100%{box-shadow:0 0 0 0 #edc65c00}50%{box-shadow:0 0 0 calc(3 * var(--tu)) #edc65c88}}
.tok .hgl{position:absolute;left:calc(4 * var(--tu));top:calc(4 * var(--tu));z-index:4;width:calc(17 * var(--tu));height:calc(17 * var(--tu));border-radius:50%;
  background:#000c;display:grid;place-items:center;color:#c9d2cf}
.tok .hgl svg{width:72%;height:72%}
.tok .chn{position:absolute;left:calc(4 * var(--tu));top:calc(24 * var(--tu));z-index:4;display:flex;align-items:center;gap:2px;
  background:#000c;border:1px solid #93a29d88;border-radius:4px;padding:1px 3px;font:800 max(11px, calc(9 * var(--tu)))/1 var(--ui)}
.tok .chn svg{width:calc(12 * var(--tu));height:calc(12 * var(--tu))}
.tok .kwl{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(22 * var(--tu));z-index:4;white-space:nowrap;
  font:800 max(11px, calc(9 * var(--tu)))/1 var(--ui);letter-spacing:.06em;padding:2px calc(4 * var(--tu));border-radius:4px;
  background:#0d1720e6;border:1px solid #5b5330;color:var(--gold)}
.tok .die{position:absolute;left:calc(-3 * var(--tu));bottom:calc(-4 * var(--tu));z-index:4;min-width:calc(40 * var(--tu));height:max(18px, calc(22 * var(--tu)));
  padding:0 calc(5 * var(--tu));border-radius:calc(7 * var(--tu));background:#080d0fe6;border:1px solid #55666a;display:flex;align-items:center;justify-content:center;gap:2px;
  font:800 max(12px, calc(15 * var(--tu)))/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--num);white-space:nowrap}
.tok .die .dg{display:inline-block;width:calc(8 * var(--tu));height:calc(8 * var(--tu));margin-right:2px;border:1.5px solid currentColor;border-radius:2px;opacity:.7;position:relative}
.tok .die .dg::after{content:"";position:absolute;inset:28%;border-radius:50%;background:currentColor}
.rn{display:inline-grid;place-items:center;color:var(--rune)}
.rn svg{width:max(8px, calc(9 * var(--tu)));height:max(8px, calc(9 * var(--tu)));display:block}
.tok .die .rm{font-size:max(11px, .7em);color:var(--heal);margin-left:1px}
.tok .die .rm.neg{color:var(--hurt)}



.tok .die:has(.rm){padding:0 calc(2 * var(--tu));gap:1px}
.tok .die:has(.rm) .dg{display:none}
.tok.ready .die{border-color:#8fd0a5aa;background:#0a1510f0}
.tok .hp{position:absolute;right:calc(-4 * var(--tu));bottom:calc(-4 * var(--tu));z-index:4;width:max(22px, calc(30 * var(--tu)));height:max(22px, calc(30 * var(--tu)));border-radius:50%;
  background:#080d0f;border:2px solid var(--ink);display:grid;place-items:center;font:800 max(13px, calc(18 * var(--tu)))/1 var(--ui);font-variant-numeric:tabular-nums;color:#fff}
.tok.bloodied .hp{color:var(--hurt);border-color:var(--blood)}
 
.tok.structure{border-radius:calc(4 * var(--tu))}
.tok.structure .frame{border-radius:calc(4 * var(--tu));border-color:#6d6a5e;background:repeating-linear-gradient(0deg,#22251f 0 calc(14 * var(--tu)),#1a1d18 calc(14 * var(--tu)) calc(15 * var(--tu))),#1d201b;box-shadow:0 calc(5 * var(--tu)) calc(14 * var(--tu)) #0008}
.tok.structure .plinth{position:absolute;left:-1px;right:-1px;bottom:0;height:calc(16 * var(--tu));background:linear-gradient(#4a473c,#2a2822);border-top:1px solid #8a8573}
.tok .kwl.st{color:#d9d3bd;border-color:#8a8573;background:#24221ce6}


.tok .stkEdge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--edge2);background:#11171a;
  box-shadow:calc(4 * var(--tu)) calc(-4 * var(--tu)) 0 -1px #11171a,calc(4 * var(--tu)) calc(-4 * var(--tu)) 0 0 var(--edge2);
  transform:translate(calc(4 * var(--tu)),calc(-4 * var(--tu)))}
.tok .stk{position:absolute;left:calc(-8 * var(--tu));top:calc(42 * var(--tu));z-index:6;
  min-width:max(28px, calc(34 * var(--tu)));height:max(28px, calc(28 * var(--tu)));padding:0 4px;border-radius:999px;
  border:2px solid var(--ink);background:#080d0f;color:#fff;font:800 max(13px, calc(16 * var(--tu)))/1 var(--ui);
  font-variant-numeric:tabular-nums;display:grid;place-items:center;cursor:pointer}
.tok .stk:focus-visible{outline:2px solid var(--pick);outline-offset:2px}

 
.dpop{position:absolute;left:50%;top:calc(-30 * var(--tu));transform:translateX(-50%);z-index:8;pointer-events:none;
  animation:popIn var(--popDur, .25s) ease-out var(--popDelay, 0ms) both}    
.ct{--s:max(30px, calc(36 * var(--tu)));width:var(--s);height:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  border-radius:calc(var(--s) * .19);background:var(--tileBg);border:2px solid var(--rim);color:var(--num);font:800 calc(var(--s) * .5)/1 var(--ui);font-variant-numeric:tabular-nums;
  box-shadow:0 4px 10px #000c}
.ct.rune{border-color:var(--rune);background:var(--runebg);color:var(--rune)}
.ct.rune svg{width:calc(var(--s) * .26);height:calc(var(--s) * .26);display:block}
.ct s{position:absolute;right:calc(var(--s) * .07);top:calc(var(--s) * .05);font:700 calc(var(--s) * .24)/1 var(--ui);color:var(--dim)}
.ct.down b{color:var(--hurt)} .ct.up b{color:var(--heal)}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}

 
.leader{position:absolute;left:calc(12 * var(--u));width:calc(112 * var(--u))}
.leader.foe{top:calc(6 * var(--u))}
.leader.you{bottom:calc(8 * var(--u))}
.ldTop{display:flex;align-items:center;gap:calc(6 * var(--u))}
.portrait{width:calc(60 * var(--u));height:calc(60 * var(--u));border-radius:50%;flex:none;border:2px solid #7c2f28;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%, #2b3438, #0b1013 75%);font:700 max(16px, calc(22 * var(--u)))/1 var(--title);color:var(--dim);
  box-shadow:0 0 0 1px #000,0 calc(4 * var(--u)) calc(12 * var(--u)) #000a}
.leader.you .portrait{border-color:#2d6b46}
.portrait.pickable{box-shadow:0 0 0 calc(3 * var(--u)) var(--pick),0 0 calc(18 * var(--u)) #7ec2f066}
 
.chip{width:max(36px, calc(42 * var(--u)));height:max(36px, calc(42 * var(--u)));flex:none;border-radius:calc(9 * var(--u));position:relative;display:grid;place-items:center;
  background:var(--tileBg);border:1.5px solid var(--rim2);color:var(--parch);box-shadow:0 calc(3 * var(--u)) calc(8 * var(--u)) #000a}
.chip svg{width:70%;height:70%;display:block}
.chip.crown{background:var(--crownbg);border-color:var(--sig);color:var(--sig);box-shadow:0 0 calc(16 * var(--u)) #edc65c55}
.chip.dim{opacity:.55;border-style:dashed;color:var(--dim)}
.chip small{position:absolute;top:calc(100% + 3 * var(--u));left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 max(11px, calc(8.5 * var(--u)))/1 var(--ui);letter-spacing:.05em;color:var(--dim)}
.leader.foe .chip{opacity:.88}
.hpPlate{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:max(15px, calc(16 * var(--u)));width:calc(108 * var(--u))}
.hpNum{min-width:calc(38 * var(--u));text-align:center;padding:1px calc(4 * var(--u));border-radius:6px;background:#080d0fe6;border:1px solid #55666a;
  font:800 max(14px, calc(18 * var(--u)))/1.1 var(--ui);font-variant-numeric:tabular-nums}
.hpBar{flex:1;height:7px;border-radius:4px;background:#0a0f11;border:1px solid #2a3437;overflow:hidden}
.hpBar i{display:block;height:100%;background:linear-gradient(90deg,#7c2f28,#c9584b)}
.leader.you .hpBar i{background:linear-gradient(90deg,#2d6b46,#69b385)}
.ldName{font:700 max(11px, calc(11 * var(--u)))/1.1 var(--title);letter-spacing:.02em;color:var(--dim);margin-top:calc(3 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader.you .ldName{margin:0 0 calc(5 * var(--u))}
 
.miniGems{display:flex;flex-wrap:wrap;gap:2px;margin-top:calc(5 * var(--u));align-items:center;max-width:calc(112 * var(--u))}
.miniGems .gem{width:max(11px, calc(10 * var(--u)));height:max(11px, calc(10 * var(--u)))}
.miniGems span{font:700 max(11px, calc(10 * var(--u)))/1 var(--ui);margin-left:3px}


.miniGems span:not(.gem){color:var(--dim)}

 
.menuBtn{position:absolute;right:calc(8 * var(--u));top:calc(6 * var(--u));width:max(44px, calc(44 * var(--u)));height:max(44px, calc(44 * var(--u)));
  border-radius:10px;background:#131a1dcc;border:1px solid var(--edge2);font:800 18px/1 var(--ui);color:var(--dim);z-index:6}
 
.menuBtn{display:flex;align-items:center;justify-content:center;padding:0}
.menuBtn .menuGear{width:max(22px, calc(22 * var(--u)));height:max(22px, calc(22 * var(--u)));pointer-events:none}
 
.menuBtn > .menuPi{display:none}
.etWrap{grid-column:3;grid-row:2/5;align-self:center;justify-self:end;margin-right:calc(7 * var(--u));z-index:6;position:relative;display:flex;flex-direction:column;align-items:center}
.endTurn{position:relative;width:calc(92 * var(--u));min-width:80px;height:max(44px, calc(44 * var(--u)));border-radius:10px;
  background:linear-gradient(180deg,#ffcf6e,#ffbf47 45%,#d8952a);color:#2a1700;border:1px solid #ffe1a3;
  font:800 max(12px, calc(13 * var(--u)))/1 var(--title);letter-spacing:.06em;box-shadow:0 0 calc(18 * var(--u)) var(--actGlow),0 calc(4 * var(--u)) calc(10 * var(--u)) #000a}
.endTurn.off{filter:saturate(.25) brightness(.6);box-shadow:none;cursor:default}
.endTurn:not(.off):active{transform:translateY(1px)}
.turnTag{margin-top:calc(8 * var(--u));text-align:center;line-height:1.3;max-width:calc(104 * var(--u));
  font:800 max(11px, calc(10 * var(--u)))/1.3 var(--ui);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.turnTag b{color:var(--actInk)}
.turnTag .wt{display:block;font-style:normal;text-transform:none;letter-spacing:0;font-weight:700;color:var(--parch);margin-top:2px}
.gemBox{position:absolute;right:calc(19 * var(--u));bottom:calc(6 * var(--u));display:flex;flex-direction:column;align-items:center;z-index:5}
.gemLbl{font:800 max(11px, calc(11 * var(--u)))/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:calc(5 * var(--u));text-align:center}
.gemLbl small{display:block;font-weight:600;color:var(--dim);font-size:max(11px, .8em);margin-top:2px;white-space:nowrap}
.gems{display:grid;grid-template-columns:repeat(2, calc(18 * var(--u)));grid-auto-rows:calc(17 * var(--u));column-gap:calc(4 * var(--u));justify-items:center;align-items:center}
.gem{width:calc(15 * var(--u));height:calc(15 * var(--u));position:relative;display:block}
.gem svg{width:100%;height:100%;display:block;overflow:visible}
.gem.lit svg{filter:drop-shadow(0 0 1.5px currentColor)}
.gem.dim{opacity:.3;filter:saturate(.25)}
.gem.bonus{color:var(--parch)}
.gem.next{color:var(--dimmer)}
.gem.empty{width:calc(4 * var(--u));height:calc(4 * var(--u));border-radius:50%;background:#2a3437}
.g-sword{color:var(--sword)} .g-iron{color:var(--ironGem)} .g-fire{color:var(--fire)} .g-tide{color:var(--tide)}

 
.oppHand{position:absolute;left:50%;top:0;z-index:1;width:0;height:0}
.back{position:absolute;width:calc(52 * var(--u));height:calc(72 * var(--u));border-radius:calc(6 * var(--u));top:calc(-50 * var(--u));transform-origin:50% -300%;
  background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border:1px solid var(--bkFoeEdge, #6b3a31);box-shadow:0 2px 6px #000a}
.oppCount{position:absolute;top:calc(4 * var(--u));font:800 max(11px, calc(10 * var(--u)))/1 var(--ui);color:var(--dim);
  background:#080d0fd0;border:1px solid var(--edge2);border-radius:999px;padding:calc(2 * var(--u)) calc(6 * var(--u));white-space:nowrap}

 
.ribbonRow{grid-column:2;grid-row:5;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(12 * var(--u));position:relative;z-index:4;min-width:0}
.ribbon{display:flex;align-items:center;gap:calc(7 * var(--u));max-width:96%;padding:calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));border-radius:calc(16 * var(--u));
  background:linear-gradient(180deg,#172024,#0c1114);border:1px solid var(--rim);font:600 max(11px, calc(12 * var(--u)))/1.2 var(--ui);color:#d6ddd9;text-align:left}
.ribbon .rt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



.ribbon .rt{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.ribbon b{font:700 max(11px, calc(12.5 * var(--u)))/1 var(--title);color:var(--parch);letter-spacing:.04em}
.ribbon .tail{color:var(--dim)}
.ribbon .who{font:800 max(11px, calc(8.5 * var(--u)))/1 var(--ui);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;padding-left:calc(5 * var(--u));white-space:nowrap}
.ribbon.crown{background:linear-gradient(180deg,#2a2109,#171204);border-color:#edc65c88;box-shadow:0 0 calc(14 * var(--u)) #edc65c33;color:#f6e7bf}
.ribbon.crown b{color:var(--goldHi)}
.tile{--s:var(--ts,max(20px, calc(22 * var(--u))));width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;
  border-radius:calc(var(--s) * .2);background:var(--tileBg);border:1px solid var(--rim);color:var(--parch)}
.tile svg{width:72%;height:72%;display:block}
.tile.crown{background:var(--crownbg);border-color:var(--sig);color:var(--sig);box-shadow:0 0 calc(var(--s) * .4) #edc65c55}
.fightLine{position:absolute;left:50%;top:calc(162 * var(--u));transform:translate(-50%,-50%);z-index:7;width:max-content;max-width:calc(560 * var(--u));text-align:center;
  font:700 max(11px, calc(11 * var(--u)))/1.2 var(--ui);color:#d6ddd9;background:#080d0fee;border:1px solid var(--edge2);border-radius:calc(12 * var(--u));
  padding:calc(4 * var(--u)) calc(10 * var(--u));pointer-events:none;display:flex;align-items:center;gap:6px}


.fightLine .kw{pointer-events:auto}
.fightLine .pz{width:10px;height:10px;border-radius:50%;border:2px solid var(--parch);border-right-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.callout{position:fixed;left:50%;top:calc(170 * var(--u));transform:translate(-50%,-50%);z-index:40;width:min(calc(460 * var(--u)), 92vw);
  display:grid;grid-template-columns:auto 1fr;gap:calc(14 * var(--u));align-items:center;padding:calc(14 * var(--u)) calc(18 * var(--u));border-radius:calc(14 * var(--u));
  background:linear-gradient(180deg,#1a2327f5,#0d1316f5);border:1px solid var(--rim2);box-shadow:0 calc(12 * var(--u)) calc(34 * var(--u)) #000c;cursor:pointer;color:var(--ink);
  animation:callIn .18s cubic-bezier(.2,.8,.2,1)}
@keyframes callIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.callout > .tile{--ts:max(48px, calc(62 * var(--u)))}
.callout .cb{min-width:0}
.callout .eb{font:800 max(11px, calc(9.5 * var(--u)))/1 var(--ui);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.callout .cn{display:flex;align-items:center;gap:calc(8 * var(--u));font:700 max(17px, calc(23 * var(--u)))/1.08 var(--title);color:var(--parch);letter-spacing:.04em;margin-top:calc(5 * var(--u));flex-wrap:wrap}
.callout .ln{font:600 max(13px, calc(15 * var(--u)))/1.3 var(--ui);color:#d6ddd9;margin-top:calc(5 * var(--u))}
.callout .ins{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(6 * var(--u));font:700 max(12px, calc(13 * var(--u)))/1.2 var(--ui);color:var(--parch)}
.callout .ins .tile{--ts:max(18px, calc(20 * var(--u)))}
.echo{display:inline-flex;gap:3px}
.echo svg{width:max(14px, calc(18 * var(--u)));height:max(14px, calc(18 * var(--u)));color:var(--parch)}
.callout.crown{border-color:var(--sig);background:linear-gradient(180deg,#2a2109f5,#141003f5);box-shadow:0 0 calc(30 * var(--u)) #edc65c44,0 calc(12 * var(--u)) calc(34 * var(--u)) #000c}
.callout.crown .eb{color:var(--sig)}
.callout.crown .cn{color:var(--goldHi)}
.callout.held{outline:2px solid var(--rim2);outline-offset:3px}
.callout.held::after{content:'HELD \00B7  TAP TO CLOSE';grid-column:1 / -1;justify-self:end;font:800 max(11px, calc(8.5 * var(--u)))/1 var(--ui);letter-spacing:.12em;color:var(--dim)}
.callout.held.crown{outline-color:var(--sig)}




.starCall{position:fixed;left:0;top:0;z-index:39;width:max-content;max-width:min(calc(420 * var(--u)), 46vw);
  padding:calc(7 * var(--u)) calc(11 * var(--u));border-radius:calc(10 * var(--u));cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,#1a2327,#0e1417) #0e1417;border:1px solid var(--sig);
  box-shadow:0 0 calc(22 * var(--u)) #edc65c44,0 calc(8 * var(--u)) calc(24 * var(--u)) #000c;animation:starIn .16s ease-out}
.starCall[hidden]{display:none}
 
@keyframes starIn{from{transform:scale(.85)}to{transform:none}}
.starCall .sr{display:flex;align-items:flex-start;gap:calc(6 * var(--u));font:600 max(12px, calc(13.5 * var(--u)))/1.28 var(--ui);color:#e4e1d6}
.starCall .sr + .sr{margin-top:calc(6 * var(--u));padding-top:calc(6 * var(--u));border-top:1px solid var(--edge2)}
.starCall .sr b{font:700 max(12px, calc(13.5 * var(--u)))/1.28 var(--title);color:var(--goldHi);letter-spacing:.03em}
.starCall .st{flex:none;width:max(12px, calc(14 * var(--u)));height:max(12px, calc(14 * var(--u)));margin-top:.1em;color:var(--sig)}
.starCall::before{content:"";position:absolute;width:calc(10 * var(--u));height:calc(10 * var(--u));background:#151d20;border:1px solid var(--sig);transform:rotate(45deg)}
.starCall[data-side="r"]::before{left:calc(-6 * var(--u));top:calc(50% - 5 * var(--u));border-top:0;border-right:0}
.starCall[data-side="l"]::before{right:calc(-6 * var(--u));top:calc(50% - 5 * var(--u));border-bottom:0;border-left:0}
.starCall[data-side="t"]::before{bottom:calc(-6 * var(--u));left:calc(50% - 5 * var(--u));border-top:0;border-left:0}
.starCall[data-side="b"]::before{top:calc(-6 * var(--u));left:calc(50% - 5 * var(--u));border-bottom:0;border-right:0}
.starCall.held{outline:2px solid var(--sig);outline-offset:3px}


.starCall.lines{border-color:var(--rim2);box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) #000c}
.starCall.lines::before{border-color:var(--rim2)}
.starCall.lines.held{outline-color:var(--rim2)}
.starCall .sr.ln b{color:var(--parch)}
@media (prefers-reduced-motion: reduce){.starCall{animation:none}}

 
.hand{grid-column:2;grid-row:6;position:relative;z-index:20}
.handIn{position:absolute;left:50%;bottom:0;width:0;height:0}
#hand .hcard{bottom:calc(-57 * var(--u) + var(--handLift, 0px))}
.hcard{--cw:calc(92 * var(--u));--ch:calc(129 * var(--u));position:absolute;width:var(--cw);height:var(--ch);left:calc(var(--cw) / -2);bottom:calc(-57 * var(--u));
  transform-origin:50% 260%;transform:translateX(calc(var(--x) + var(--push, 0px))) rotate(var(--r));border-radius:calc(9 * var(--u));overflow:hidden;cursor:pointer;
  background:linear-gradient(#1b2427,#10171a);border:1px solid var(--edge2);box-shadow:0 calc(-2 * var(--u)) calc(12 * var(--u)) #000c;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s}
.hcard.playable{border-color:#ffbf47aa;box-shadow:0 0 0 1px #ffbf4766,0 0 calc(12 * var(--u)) var(--actGlow),0 calc(-2 * var(--u)) calc(12 * var(--u)) #000c}





.hcard{display:flex;flex-direction:column}
.hcard .band{flex:0 0 auto;position:relative;z-index:2;padding:calc(3 * var(--u)) max(3px, calc(4 * var(--u))) calc(3 * var(--u));
  background:linear-gradient(180deg,#141d20,#0f171a);border-bottom:1px solid #ffffff14;display:flex;align-items:center;line-height:0}
.pips{display:flex;gap:2px;align-items:center;flex-wrap:wrap}





.pips.cost{position:absolute;left:max(2px, calc(2.5 * var(--u)));top:max(2px, calc(2.5 * var(--u)));z-index:3;display:inline-flex;flex-wrap:nowrap;gap:1px;
  padding:1px;border-radius:999px;background:#080d0fd9;box-shadow:0 0 0 1px #00000080,0 1px 4px #000c;pointer-events:none;line-height:0}
.zArt .pips.cost,.rdArt .pips.cost{left:max(3px, calc(4 * var(--u)));top:max(3px, calc(4 * var(--u)));gap:2px;padding:2px}
.zArt .pips.cost .pip,.rdArt .pips.cost .pip{width:max(15px, calc(17 * var(--u)));height:max(15px, calc(17 * var(--u)))}
.zArt .pips.cost .pip.any,.rdArt .pips.cost .pip.any{font-size:max(12px, calc(12 * var(--u)))}



.hcard .nm{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;font:700 max(11px, calc(10.5 * var(--u)))/1.1 var(--title);letter-spacing:-.01em;color:var(--goldHi);text-shadow:0 1px 2px #0009;overflow-wrap:anywhere}
.hcard .nm.wrapName,.rdTop .zName.wrapName,.zFace .zName.wrapName{white-space:normal}
.hcard .band.wrapBand{display:block}
.hcard .band.wrapBand .nm{display:inline}
.hcard .win{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:linear-gradient(180deg,#141c1f,#0d1417)}
.hcard img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;pointer-events:none}
.hcard .foot{flex:0 0 auto;position:relative;z-index:2;height:max(20px, calc(22 * var(--u)));display:flex;align-items:center;justify-content:space-between;gap:2px;
  padding:0 calc(4 * var(--u));background:linear-gradient(180deg,#0f171a,#0b1114);border-top:1px solid #ffffff10}


.hcard .foot:has(.hcDie){padding:0 calc(1.5 * var(--u));gap:1px}
.hcard .foot .hcDie{padding-left:max(2px, calc(2.5 * var(--u)));padding-right:max(2px, calc(2.5 * var(--u)));gap:1px;letter-spacing:-.03em}
 
.hcard .foot .hcHp{width:max(16px, calc(18 * var(--u)));height:max(16px, calc(18 * var(--u)))}
.hcard .hcType{flex:1 1 auto;text-align:center;font:800 max(10px, calc(8 * var(--u)))/1 var(--ui);letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.hcard.reaction .hcType{color:var(--rune)}


.hcard .foot.sfoot{height:auto;min-height:max(20px, calc(22 * var(--u)));padding:max(2px, calc(2 * var(--u))) calc(3 * var(--u))}
.hcShort{flex:1 1 auto;min-width:0;text-align:center;font:800 max(9px, calc(9.5 * var(--u)))/1.12 var(--ui);color:var(--parch);letter-spacing:.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.hcShort .si{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;fill:currentColor;color:var(--goldHi)}
.hcard.reaction .hcShort,.rdStrip.reaction .hcShort,.zFace.reaction .hcShort{color:var(--rune)}



.hcKind{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:max(3px, calc(4 * var(--u)))}
.hcard .hcKind .hcType,.zFace .zStrip .hcKind .hcType,.rdStrip .hcKind .hcType{flex:0 0 auto}


.hcard .foot.sfoot{padding-left:max(1px, calc(1.5 * var(--u)));padding-right:max(1px, calc(1.5 * var(--u)))}
.hcard .hcKind{gap:max(2px, calc(3 * var(--u)))}
.hcard .hcKind .hcType{letter-spacing:.04em}
.km{flex:0 0 auto;width:max(12px, calc(13 * var(--u)));height:max(12px, calc(13 * var(--u)));color:var(--goldHi)}
.km.reaction{color:var(--rune)}
.zFace .zStrip .km{width:max(15px, calc(16 * var(--u)));height:max(15px, calc(16 * var(--u)))}


.zFace.reaction .zStrip .hcType,.rdStrip.reaction .hcType{color:var(--rune)}
.info .type .km{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.35em}
.hcard .hcHp,.hcard .hcDie{font:800 max(10px, calc(10 * var(--u)))/1 var(--ui);background:#080d0fe6;
  border:1px solid #55666a;border-radius:5px;padding:calc(2 * var(--u)) calc(4 * var(--u));display:flex;align-items:center;gap:2px;white-space:nowrap}
.hcard .hcHp{margin-left:auto;border-radius:50%;flex:0 0 auto;width:max(18px, calc(18 * var(--u)));height:max(18px, calc(18 * var(--u)));justify-content:center;padding:0;border:1.5px solid var(--ink)}



.hcard.lifted{z-index:30 !important;transform-origin:50% 100%;transform:translateX(var(--liftX, var(--x))) translateY(var(--liftY, calc(-63 * var(--u)))) scale(var(--liftS, 1.5)) rotate(0deg);
  box-shadow:0 0 0 1px #ffbf47aa,0 0 calc(18 * var(--u)) var(--actGlow),0 calc(10 * var(--u)) calc(30 * var(--u)) #000}
.hint{position:fixed;left:50%;bottom:calc(84 * var(--u));transform:translateX(-50%);z-index:31;pointer-events:none;
  font:700 max(11px, calc(10 * var(--u)))/1 var(--ui);color:var(--actInk);background:#080d0fe6;border:1px solid #ffbf4755;border-radius:999px;
  padding:calc(4 * var(--u)) calc(9 * var(--u));white-space:nowrap;opacity:0;transition:opacity .2s}
.hint.on{opacity:1}
.pip{display:inline-grid;place-items:center;width:max(13px, calc(14 * var(--u)));height:max(13px, calc(14 * var(--u)));border-radius:50%;background:#080d0f;border:1px solid #ffffff22}
.pip svg{width:78%;height:78%}
.pip.any{font:800 max(11px, calc(10 * var(--u)))/1 var(--ui);color:#cfd6d2;border-color:#7d8a86;background:#20292c}

 
.sheetWrap{position:fixed;left:50%;bottom:calc(8 * var(--u));transform:translateX(-50%);z-index:42;display:none;width:min(calc(560 * var(--u)), 70vw)}
.sheetWrap.on{display:block}
.sheetWrap.center{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.sheetWrap.center::before{content:"";position:fixed;inset:-100vh -100vw;background:#020405a6;z-index:-1}
.sh{background:linear-gradient(180deg,#1a2327f8,#10171af8);border:1px solid var(--rim2);border-radius:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) #000;color:var(--ink)}
.sh.react{border-color:var(--rune)}
.sh .eb{font:800 max(11px, calc(9.5 * var(--u)))/1 var(--ui);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.sh h3{font:700 max(16px, calc(19 * var(--u)))/1.1 var(--title);color:var(--parch);letter-spacing:.04em;margin-top:calc(4 * var(--u))}
.sh .ln{font:600 max(12px, calc(13 * var(--u)))/1.3 var(--ui);color:#d6ddd9;margin-top:calc(4 * var(--u))}
.sh .fight{display:flex;gap:calc(10 * var(--u));margin-top:calc(6 * var(--u))}
.sh .fight .fn{font:700 max(12px, calc(12 * var(--u)))/1 var(--ui);color:var(--dim);background:#080d0f;border:1px solid var(--edge2);border-radius:6px;padding:4px 8px}
.sh .fight b{font-size:1.3em;color:var(--num)}
.opts{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));margin-top:calc(10 * var(--u))}
.opt{min-height:44px;min-width:44px;padding:6px 14px;border-radius:10px;border:1px solid var(--rim2);background:var(--pane);color:var(--ink);
  font:700 max(13px, calc(14 * var(--u)))/1.1 var(--ui);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.opt small{font:600 max(11px, calc(10 * var(--u)))/1 var(--ui);color:var(--dim)}
.opt.pri{border-color:var(--act);color:var(--actInk);box-shadow:0 0 12px var(--actGlow)}
.opt.spur{border-color:var(--sig);color:var(--goldHi)}
.opt.pass{border-color:var(--rim2);color:var(--ink)}
.opt.cancel{color:var(--dim)}
.opt.col{flex-direction:row;gap:8px}
.opt.col svg{width:20px;height:20px}
.opt.tog.on{border-color:var(--hurt);color:var(--hurt)}
.btn{min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--rim2);background:var(--pane);color:var(--ink);font:700 max(13px, calc(14 * var(--u)))/1.1 var(--ui);
  display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.btn small{font:600 11px/1 var(--ui);color:var(--dim)}
.btn.pri{border-color:var(--act);color:var(--actInk);box-shadow:0 0 12px var(--actGlow)}

 
.scrim{position:fixed;inset:0;z-index:50;background:#020405d9;display:none;align-items:center;justify-content:center;padding:calc(12 * var(--u))}
.scrim.on{display:flex}
.inspect{display:flex;gap:calc(16 * var(--u));align-items:stretch;max-width:96vw;max-height:94vh}
.bigCard{position:relative;width:calc(220 * var(--u));height:calc(308 * var(--u));flex:0 0 auto;border-radius:calc(14 * var(--u));overflow:visible;
  border:1px solid var(--edge2);background:linear-gradient(#1b2427,#10171a);box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) #000}
.bigCard.structure{border-radius:calc(5 * var(--u));border-color:#8a8573;background:repeating-linear-gradient(0deg,#22251f 0 22px,#1a1d18 22px 23px)}
.bigCard .band{padding:calc(10 * var(--u)) calc(12 * var(--u))}
.bigCard img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;pointer-events:none}
.bigCard.has-art .band{position:relative;border-radius:calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background:linear-gradient(180deg,#05080af2 0%,#05080acc 70%,#0000);padding-bottom:calc(18 * var(--u))}
.bigCard.structure.has-art .band{border-radius:calc(5 * var(--u)) calc(5 * var(--u)) 0 0}
.bigCard .nm{font:700 max(15px, calc(18 * var(--u)))/1.05 var(--title);color:var(--goldHi);letter-spacing:.04em}
.bigCard .pips{margin-top:calc(6 * var(--u))}


.bigCard > .pips.cost{position:relative;left:auto;top:auto;width:max-content;display:flex;margin:calc(2 * var(--u)) 0 0 max(2px, calc(3.5 * var(--u)));gap:2px;padding:2px}
.bigCard > .pips.cost .pip{width:max(15px, calc(17 * var(--u)));height:max(15px, calc(17 * var(--u)))}
.bigCard > .pips.cost .pip.any{font-size:max(12px, calc(12 * var(--u)))}
.bigCard .hp{position:absolute;width:calc(46 * var(--u));height:calc(46 * var(--u));right:calc(8 * var(--u));bottom:calc(8 * var(--u));border-radius:50%;background:#080d0f;border:2px solid var(--ink);
  display:grid;place-items:center;font:800 max(20px, calc(26 * var(--u)))/1 var(--ui)}
.bigCard .hp.hurt{color:var(--hurt);border-color:var(--blood)}
.bigCard .shd{position:absolute;width:calc(40 * var(--u));height:calc(46 * var(--u));bottom:calc(8 * var(--u));left:calc(8 * var(--u))}
.info{width:min(calc(330 * var(--u)), 60vw);background:linear-gradient(180deg,var(--pane2),var(--pane));border:1px solid var(--edge2);border-radius:calc(12 * var(--u));
  padding:calc(14 * var(--u)) calc(16 * var(--u));display:flex;flex-direction:column;gap:calc(9 * var(--u));position:relative;max-height:calc(392 * var(--u));overflow:auto}
.info.narrow{width:min(calc(380 * var(--u)), 80vw)}
.info h2{font:700 max(16px, calc(20 * var(--u)))/1.05 var(--title);color:var(--goldHi);letter-spacing:.04em;padding-right:calc(40 * var(--u))}
.info .type{font:700 max(11px, calc(10 * var(--u)))/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.info .lbl{font:800 max(11px, calc(9 * var(--u)))/1 var(--ui);letter-spacing:.14em;color:var(--dimmer);text-transform:uppercase;margin-bottom:calc(4 * var(--u))}
.info .ctiles{display:flex;gap:calc(5 * var(--u));flex-wrap:wrap}
.info .ctiles .ct{--s:max(30px, calc(38 * var(--u)))}
.info p{font:600 max(13px, calc(14 * var(--u)))/1.35 var(--ui);color:var(--ink)}
.info .state{font:600 max(12px, calc(12 * var(--u)))/1.35 var(--ui);color:var(--dim);border-top:1px solid var(--edge);padding-top:calc(8 * var(--u))}
.info .state b{color:var(--ink)}
.info .acts,.res .opts{display:flex;gap:10px;flex-wrap:wrap}
.kw{color:var(--goldHi);font-weight:800}
.kw.k-rune{color:var(--rune)}
.kw.k-crown{color:var(--sig)}



[data-kw]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (pointer:fine){ [data-kw]{cursor:help} }
[data-kw][tabindex]{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);border-radius:2px}
[data-kw][tabindex]:focus{outline:none}
[data-kw][tabindex]:focus-visible{outline:2px solid var(--goldHi);outline-offset:1px}
.kwTip{position:fixed;left:0;top:0;z-index:300;display:none;box-sizing:border-box;max-width:min(280px, calc(100vw - 16px));
  padding:7px 10px;border:1px solid var(--edge2);border-radius:7px;background:#0b1114;color:var(--ink);
  font:600 13px/1.35 var(--ui);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  box-shadow:0 6px 18px #000c;pointer-events:none}
.kwTip.on{display:block}
.x{position:absolute;right:calc(8 * var(--u));top:calc(8 * var(--u));width:max(40px, calc(36 * var(--u)));height:max(40px, calc(36 * var(--u)));border-radius:8px;
  border:1px solid var(--edge2);background:#080d0f;color:var(--dim);font:700 16px/1 var(--ui)}
.tgl{display:flex;gap:10px;align-items:flex-start;font:600 14px/1.35 var(--ui);min-height:44px;cursor:pointer}
.tgl input{width:22px;height:22px;margin-top:2px;accent-color:var(--act)}
.tgl small{color:var(--dim)}
 
.tgl.mus{align-items:center;cursor:default}
.tgl.mus label{display:flex;gap:10px;align-items:center;flex:none;cursor:pointer;min-height:44px}
.tgl.mus input[type="range"]{flex:1;min-width:0;width:auto;height:44px;margin:0;accent-color:var(--act);cursor:pointer}
.tgl.mus input[type="range"]:disabled{opacity:.45;cursor:default}
 
.slist{position:fixed;left:calc(118 * var(--u));top:50%;transform:translateY(-50%);width:min(calc(400 * var(--u)), 70vw);z-index:45;max-height:94vh;overflow:auto;
  background:linear-gradient(180deg,#1a2327,#131a1d);border:1px solid var(--rim2);border-radius:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) #000}
.slist h4{font:700 max(13px, calc(13 * var(--u)))/1.15 var(--title);color:var(--parch);letter-spacing:.05em;padding-right:44px}
.slist h4 small{display:block;font:800 max(11px, calc(8.5 * var(--u)))/1 var(--ui);letter-spacing:.12em;color:var(--dim);margin-top:3px}
.slist ol{list-style:none;margin-top:calc(7 * var(--u));display:flex;flex-direction:column;gap:3px}
.slist li{display:grid;grid-template-columns:max(24px, calc(28 * var(--u))) 1fr;gap:calc(8 * var(--u));align-items:center;padding:3px 5px;border-radius:6px;
  font:600 max(12px, calc(11.5 * var(--u)))/1.25 var(--ui);color:#d6ddd9}
.slist li .tile{--ts:max(24px, calc(28 * var(--u)))}
.slist li b{color:var(--ink);font-weight:800}
.slist li.crown{background:#edc65c14}
.slist li.crown b{color:var(--sig)}
.slist li.rolled{background:#ffbf4716;outline:1px solid #ffbf4766}
.slist .tg{margin-left:5px;font:800 max(11px, calc(8 * var(--u)))/1 var(--ui);letter-spacing:.1em;color:var(--actInk);font-style:normal}
.slist .off{color:var(--dim);font-style:normal}



.menu{position:fixed;inset:0;z-index:46;background:#020405b8;display:none;align-items:center;justify-content:center;padding:calc(12 * var(--u))}
.menu.on{display:flex}
.mPanel{position:relative;width:min(calc(460 * var(--u)), 92vw);max-height:100%;overflow-y:auto;box-sizing:border-box;
  background:linear-gradient(180deg,var(--pane2),var(--pane));border:1px solid var(--edge2);border-radius:calc(14 * var(--u));
  padding:calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));box-shadow:0 calc(12 * var(--u)) calc(36 * var(--u)) #000d;
  display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.mPanel > .x{top:calc(6 * var(--u));right:calc(6 * var(--u))}
.mGrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));gap:calc(8 * var(--u));margin-right:max(46px, calc(42 * var(--u)))}
.mGrid .mTile[hidden]{display:none}
.mTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--u));min-height:max(76px, calc(84 * var(--u)));
  padding:calc(8 * var(--u)) calc(4 * var(--u));border-radius:calc(10 * var(--u));border:1px solid var(--rim);background:var(--tileBg);
  color:var(--ink);font:700 max(12px, calc(12.5 * var(--u)))/1.15 var(--ui);text-align:center}
.mTile svg{width:max(26px, calc(28 * var(--u)));height:max(26px, calc(28 * var(--u)));color:var(--gold)}
.mTile:hover{border-color:var(--gold);background:var(--pane2)}
.mFoot{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));border-top:1px solid var(--edge2);padding-top:calc(12 * var(--u))}


.mFoot .menuHome,.mFoot .mConcede{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:max(120px, calc(120 * var(--u)));
  padding:0 calc(14 * var(--u));border-radius:10px;font:700 max(13px, calc(14 * var(--u)))/1 var(--ui);text-decoration:none}
.mFoot svg{width:20px;height:20px;flex:none}
.mFoot .menuHome{border:1px solid var(--rim2);background:var(--pane);color:var(--ink)}
.mFoot .menuHome:hover{border-color:var(--gold)}
.mFoot .menuHome[hidden]{display:none}
.mFoot .mConcede{margin-left:auto;border:1px solid #c0504499;background:linear-gradient(180deg,#3a1512,#2a0f0d);color:#ffb3a8}
.mFoot .mConcede:hover{border-color:var(--hurt);color:#ffd2cb}
 
.btn.danger{border-color:#c0504499;background:linear-gradient(180deg,#3a1512,#2a0f0d);color:#ffb3a8}
.btn.danger:hover{border-color:var(--hurt);color:#ffd2cb}
.info.concedeBox{text-align:center}
.info.concedeBox h2{padding:0}
.info.concedeBox .acts{justify-content:center}
.info.concedeBox .acts .btn{min-height:48px;min-width:max(140px, calc(140 * var(--u)))}


.info.startBox h2{padding-right:max(84px, calc(84 * var(--u)))}
.info .startHome{position:absolute;right:calc(8 * var(--u));top:calc(8 * var(--u));min-height:44px;min-width:56px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--edge2);background:#080d0f;
  color:var(--ink);font:700 max(13px, calc(14 * var(--u)))/1 var(--ui);text-decoration:none}
.info .startHome:hover{border-color:var(--rim2)}
.info .startHome[hidden]{display:none}
.toast{position:fixed;left:50%;top:calc(70 * var(--u));transform:translateX(-50%);z-index:60;background:#080d0ff0;border:1px solid var(--edge2);border-radius:999px;
  padding:8px 14px;font:600 13px/1 var(--ui);color:var(--dim);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}
 
.toast.lift{z-index:71;top:auto;bottom:max(6px, calc(8 * var(--u)))}
.overlay{position:fixed;inset:0;z-index:70;background:#020405e6;display:flex;align-items:center;justify-content:center}
.res{text-align:center;background:linear-gradient(180deg,var(--pane2),var(--pane));border:1px solid var(--edge2);border-radius:14px;padding:22px 28px;min-width:280px}
.res h1{font:700 max(26px, calc(34 * var(--u)))/1.1 var(--title);letter-spacing:.08em;color:var(--parch);margin:6px 0}
.res.won h1{color:var(--goldHi)}
.res.lost h1{color:var(--hurt)}
.res p{color:var(--dim);font:600 14px/1.4 var(--ui)}
.res .eb{font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.res .opts{justify-content:center;margin-top:14px}
 
.res .opt.home{min-height:48px;min-width:48px;text-decoration:none}


.res .opt[data-next]{display:inline-grid;place-items:center;text-decoration:none}



.rkRes{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0}
.rkRes .rkName{font:700 15px/1 var(--title);letter-spacing:.12em;color:var(--parch);white-space:nowrap}
.rkRes .rkBar{position:relative;width:120px;height:6px;border-radius:3px;background:var(--edge);overflow:hidden}
.rkRes .rkBar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--to,0));background:linear-gradient(90deg,var(--gold),var(--goldHi));
  animation:rkSlide .9s ease-out .35s backwards}
@keyframes rkSlide{from{transform:scaleX(var(--from,0))}}


.rkRes .rkBadge{display:inline-block;flex:0 0 auto;width:30px;height:30px;background:center/contain no-repeat}
.rkRes .rkBadge.stamp{animation:rkStamp .5s cubic-bezier(.3,1.4,.5,1) .3s backwards}
@keyframes rkStamp{from{transform:scale(1.8);opacity:0}}
.rkBadge.t-none{background-image:url("/v6/art/icons/rank-placing-96.webp")}
.rkBadge.t-mire{background-image:url("/v6/art/icons/rank-mire-96.webp")}
.rkBadge.t-reed{background-image:url("/v6/art/icons/rank-reed-96.webp")}
.rkBadge.t-bog_iron{background-image:url("/v6/art/icons/rank-bog-iron-96.webp")}
.rkBadge.t-wrought{background-image:url("/v6/art/icons/rank-wrought-96.webp")}
.rkBadge.t-cold_iron{background-image:url("/v6/art/icons/rank-cold-iron-96.webp")}
.rkBadge.t-fen_crown{background-image:url("/v6/art/icons/rank-fen-crown-96.webp")}
@media (prefers-reduced-motion:reduce){.rkRes .rkBar i,.rkRes .rkBadge.stamp{animation:none}}

 
.rotate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.rotate .panel{max-width:320px;text-align:center;border:1px solid var(--edge2);border-radius:14px;padding:28px 22px;background:linear-gradient(180deg,var(--pane2),var(--pane))}
.rotate svg{width:72px;height:72px;margin-bottom:14px}
.rotate h1{font:700 22px/1.15 var(--title);color:var(--goldHi);letter-spacing:.05em;margin-bottom:8px}
.rotate p{font:600 15px/1.4 var(--ui);color:var(--dim)}
@media (orientation:portrait){ .rotate{display:flex} .stage{visibility:hidden} }

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

 
.sh.target,.sh.colour,.sh.attack{padding:calc(7 * var(--u)) calc(10 * var(--u))}
.sh.target h3,.sh.colour h3,.sh.attack h3{display:inline;font-size:max(14px, calc(15 * var(--u)));margin-left:6px}
.sh.target .ln,.sh.colour .ln{display:inline;margin-left:8px;font-size:max(11px, calc(11 * var(--u)));color:var(--dim)}
.sh.target .opts{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;margin-top:calc(6 * var(--u));padding-bottom:2px}
.sh.target .opt{flex:0 0 auto;padding:4px 12px}
.sh.colour .opts,.sh.attack .opts{margin-top:calc(6 * var(--u))}
 
.sh .shHead{display:flex;align-items:center;gap:calc(8 * var(--u))}
.sh .shTitle{flex:1 1 auto;min-width:0}
.sh .shHead .opt.cancel{flex:0 0 auto;min-height:44px;padding:4px 12px}
.sh .optsWrap{position:relative}
 
.sheetWrap.slim{width:auto;max-width:min(calc(560 * var(--u)), 70vw)}


.sheetWrap.slim.mid{top:var(--tgTop, 50%);bottom:auto}
.sheetWrap.slim.mid.tight .sh.target{padding-top:2px;padding-bottom:2px}
.sheetWrap.slim.mid.tight2 .sh.target .eb{display:inline;margin-right:6px}
.sheetWrap.slim.mid.tight2 .sh.target h3{margin-left:0}
body.tgMid .ribbonRow{visibility:hidden}
.sh .more{position:absolute;right:0;top:calc(6 * var(--u));bottom:2px;min-width:64px;min-height:44px;padding:0 10px 0 22px;border-radius:0 10px 10px 0;
  display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(90deg,#10171a00,#10171af2 30%,#10171a);
  font:800 max(12px, calc(12 * var(--u)))/1 var(--ui);color:var(--actInk);white-space:nowrap}

 
.leader .chip small{left:auto;right:0;transform:none;top:calc(50% + 30 * var(--u) + 2px)}    


.leader .chip small.sdn{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% + 76 * var(--u))}
.leader .chip small.sdn.long{font-weight:700;letter-spacing:0}
 
.ct s{font-size:max(11px, calc(var(--s) * .3))}
 
.res.void h1{color:var(--dim)}


.ldName{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal}

 
 
.hcard.redrawable{border-color:#cfe3ea88}
.hcard.sendBack{border-color:var(--hurt);box-shadow:0 0 0 1px #ff6b5a99,0 0 calc(12 * var(--u)) #ff6b5a55;filter:saturate(.55) brightness(.8)}
.hcard .backTag{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-12deg);z-index:3;padding:3px 8px;border-radius:6px;
  border:2px solid var(--hurt);background:#180c0bee;color:var(--hurt);font:800 max(11px, calc(12 * var(--u)))/1 var(--ui);letter-spacing:.14em}
 
.hcard .tallyTag{position:absolute;right:4%;top:30%;z-index:3;padding:2px 6px;border-radius:6px;border:1px solid var(--gold);
  background:#140d07ee;color:var(--gold);font:800 max(11px, calc(12 * var(--u)))/1 var(--ui)}
 
.dpop.num b{display:block;min-width:max(26px, calc(30 * var(--tu)));padding:3px 6px;border-radius:8px;text-align:center;
  font:800 max(14px, calc(18 * var(--tu)))/1 var(--ui);font-variant-numeric:tabular-nums;background:#080d0f;box-shadow:0 4px 10px #000c}
.dpop.num.dmg b{color:var(--hurt);border:2px solid var(--blood)}
.dpop.num.heal b{color:var(--heal);border:2px solid #4f8d63}
 
.apTag{margin-top:calc(6 * var(--u));min-height:max(32px, calc(26 * var(--u)));padding:2px 10px;border-radius:999px;border:1px solid var(--rune);
  background:#0c1a20cc;color:var(--rune);font:800 max(11px, calc(9 * var(--u)))/1 var(--ui);letter-spacing:.12em;cursor:pointer}
.menu button.on{color:var(--rune)}
 
.info.logBox{display:flex;flex-direction:column;max-height:calc(100vh - 24 * var(--u));width:min(calc(520 * var(--u)), 86vw)}
.logList{list-style:none;overflow-y:auto;overscroll-behavior:contain;margin-top:calc(8 * var(--u));padding-right:4px;min-height:0;flex:1 1 auto}
.logList li{font:600 max(12px, calc(12 * var(--u)))/1.35 var(--ui);color:#d6ddd9;padding:3px 0 3px 10px;border-left:2px solid transparent}
.logList li.you{border-left-color:var(--act)}
.logList li.foe{border-left-color:var(--blood)}
.logList li.lh{padding-left:0;margin-top:calc(8 * var(--u));font:800 max(11px, calc(10 * var(--u)))/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.logList li.t-turn,.logList li.t-game_over{color:var(--parch);font-weight:800}
.logList li.t-star{color:var(--goldHi)}
.logList li.t-fight,.logList li.t-leader_damage,.logList li.t-death{color:var(--ink)}
.logList li.t-shard_spend,.logList li.t-shard_gain,.logList li.t-draw,.logList li.t-redraw{color:var(--dim)}




.logList li.ll{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(3 * var(--u)) 0 calc(3 * var(--u)) calc(8 * var(--u))}
.logList .lgPic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:max(26px, calc(28 * var(--u)));height:max(26px, calc(28 * var(--u)));
  border-radius:calc(6 * var(--u));overflow:hidden;background:linear-gradient(160deg,#1d2629,#0d1316);box-shadow:0 0 0 1px #ffbf4766}
.logList li.foe .lgPic{box-shadow:0 0 0 1px #c0524f88}
.logList .lgArt{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.logList .lgArt.lgLead{object-position:50% 20%}
.logList li.ll:has(.lgLead) .lgPic{border-radius:50%}
.logList .lgMark{width:62%;height:62%;color:var(--dim)}
.logList li.t-turn .lgMark,.logList li.t-game_over .lgMark,.logList li.t-star .lgMark{color:var(--goldHi)}
.logList li.t-heal .lgMark,.logList li.t-leader_heal .lgMark{color:var(--heal)}
.logList li.t-damage .lgMark,.logList li.t-leader_damage .lgMark,.logList li.t-death .lgMark{color:#e0726c}
.logList li.t-shard_spend .lgMark,.logList li.t-shard_gain .lgMark,.logList li.t-colour .lgMark{color:var(--rune)}
.logList .lgT{flex:1 1 auto;min-width:0}
.logList .lgN{flex:0 0 auto;min-width:max(30px, calc(30 * var(--u)));padding:2px 7px;border-radius:999px;text-align:center;
  font:800 max(12px, calc(12 * var(--u)))/1.2 var(--ui);font-variant-numeric:tabular-nums}
.logList .lgN.dmg{color:#ffd9d6;background:#7a201d;box-shadow:0 0 0 1px #c0524f}
.logList .lgN.heal{color:#dcf5e3;background:#1f5233;box-shadow:0 0 0 1px #4f8d63}
.logList li.lh{display:flex;align-items:center;gap:10px}
.logList li.lh::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,#ffffff24,transparent)}



.logList .lgDice{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px 4px;vertical-align:middle;margin-left:2px}
.logList .lgDie{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1px;
  min-width:max(20px, calc(20 * var(--u)));height:max(20px, calc(20 * var(--u)));padding:0 3px;
  font:800 max(12px, calc(12 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink);background:#0b0f12;
  box-shadow:inset 0 0 0 1px var(--edge2);clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.logList .lgDie svg{width:.7em;height:.7em;color:var(--rune)}
.logList .lgDie.rune{color:var(--rune);box-shadow:inset 0 0 0 1px var(--rune)}
.logList .lgDie.out{opacity:.45;text-decoration:line-through}
.logList .lgKw,.logList .lgMod{font:800 max(10px, calc(10 * var(--u)))/1 var(--ui);font-style:normal;letter-spacing:.06em;white-space:nowrap}
.logList .lgKw{color:var(--goldHi)}
.logList .lgMod.up{color:var(--heal)}
.logList .lgMod.dn{color:#e0726c}
.logList .lgTot{font:800 max(12px, calc(12 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--parch);white-space:nowrap}

 
 
.hcard,.tok,.portrait,.chip,.rdCard,[data-zk]{touch-action:none;-webkit-touch-callout:none}

 
.zoom{position:fixed;left:0;top:0;z-index:49;pointer-events:none;display:none}
.zoom.on{display:block}
.zCard{display:flex;gap:calc(10 * var(--u));align-items:flex-start;width:calc(360 * var(--u));padding:calc(10 * var(--u));
  border-radius:calc(12 * var(--u));background:linear-gradient(180deg,#1d272bfa,#121a1dfa);border:1px solid var(--rim2);
  box-shadow:0 calc(12 * var(--u)) calc(36 * var(--u)) #000e,0 0 0 1px #000;color:var(--ink)}
.zCard.zLeader{width:calc(330 * var(--u))}


@media (max-height:380px){ .zCard{width:calc(440 * var(--u))} .zArt{flex-basis:calc(108 * var(--u));height:calc(151 * var(--u))} }
.zArt{position:relative;flex:0 0 calc(128 * var(--u));height:calc(179 * var(--u));border-radius:calc(8 * var(--u));overflow:hidden;
  background:linear-gradient(#1b2427,#10171a);border:1px solid var(--edge2)}
.zArt.structure{border-radius:calc(3 * var(--u));border-color:#8a8573;background:repeating-linear-gradient(0deg,#22251f 0 14px,#1a1d18 14px 15px)}
.zArt img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;pointer-events:none}
.zArtName{position:absolute;left:6px;right:6px;top:38%;text-align:center;font:700 max(12px, calc(12 * var(--u)))/1.15 var(--title);color:var(--parch);overflow-wrap:anywhere}
.zArt.has-art .zArtName{display:none}
.zHp{position:absolute;right:calc(5 * var(--u));bottom:calc(5 * var(--u));min-width:max(26px, calc(30 * var(--u)));height:max(26px, calc(30 * var(--u)));border-radius:50%;
  background:#080d0f;border:2px solid var(--ink);display:grid;place-items:center;font:800 max(14px, calc(17 * var(--u)))/1 var(--ui);color:#fff;z-index:2}
.zHp.hurt{color:var(--hurt);border-color:var(--blood)}
 
.zTypeB{display:flex;align-items:center;gap:calc(6 * var(--u))}
.zBadges{display:flex;align-items:center;gap:calc(4 * var(--u));margin-left:auto;flex:0 0 auto}
.zBadges .zHp{position:static;min-width:18px;height:18px;padding:0 2px;border-width:1.5px;font-size:12px}
.zBadges .shd{flex:0 0 auto;width:16px;height:18px}
.zBody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.zHead{display:flex;align-items:center;gap:calc(6 * var(--u));flex-wrap:wrap}
.zName{font:700 max(15px, calc(17 * var(--u)))/1.1 var(--title);color:var(--goldHi);letter-spacing:.03em;overflow-wrap:anywhere}
.zMarks{display:flex;gap:3px;margin-left:auto}
.zType{font:800 max(11px, calc(10 * var(--u)))/1.25 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.zCard .lbl{font:800 max(11px, calc(9 * var(--u)))/1 var(--ui);letter-spacing:.12em;color:var(--dimmer);text-transform:uppercase}
 
.zCard .ctiles{display:flex;gap:calc(3 * var(--u));flex-wrap:nowrap}
.zCard .ctiles .ct{--s:max(22px, calc(24 * var(--u)));border-width:1.5px;box-shadow:none}
.zText p{font:600 max(11px, calc(12.5 * var(--u)))/1.35 var(--ui);color:var(--ink);overflow:visible;white-space:normal;text-overflow:clip}
.zText p + p{margin-top:calc(4 * var(--u))}
.zKw{display:flex;flex-wrap:wrap;gap:4px}
.zKw .kw{font:800 max(11px, calc(9.5 * var(--u)))/1 var(--ui);letter-spacing:.08em;padding:3px 6px;border-radius:4px;border:1px solid #5b5330;background:#0d1720}
.zState{font:600 max(11px, calc(11 * var(--u)))/1.35 var(--ui);color:var(--dim);border-top:1px solid var(--edge);padding-top:calc(5 * var(--u))}
.zState b{color:var(--ink)}





.zCard.zFace{display:flex;flex-direction:column;gap:0;align-items:stretch;width:calc(184 * var(--u));min-width:170px;padding:0;overflow:hidden;
  border-radius:calc(14 * var(--u));border:1.5px solid var(--edge2);background:linear-gradient(#1b2427,#10171a)}
.zCard.zFace.structure{border-radius:calc(5 * var(--u));border-color:#8a8573}
.zFace .zHead{flex:0 0 auto;flex-wrap:nowrap;gap:calc(4 * var(--u));padding:calc(5 * var(--u)) calc(7 * var(--u));background:linear-gradient(180deg,#141d20,#0f171a);border-bottom:1px solid #ffffff14}
.zFace .zHead .zCost{flex:0 0 auto;flex-wrap:nowrap}
.zFace .zName{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:max(13px, calc(15 * var(--u)));letter-spacing:0}
.zFace .zMarks{flex:0 0 auto;margin-left:0}
.zCard.zFace .zArt{flex:0 0 auto;width:auto;height:calc(150 * var(--u));border-radius:0;border:0}
.zFace .zStrip{flex:0 0 auto;display:flex;align-items:center;gap:calc(4 * var(--u));min-height:max(26px, calc(28 * var(--u)));padding:calc(3 * var(--u)) calc(7 * var(--u));
  background:linear-gradient(180deg,#0f171a,#0b1114);border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10}
.zFace .zStrip .hcDie,.zFace .zStrip .hcHp{font:800 max(12px, calc(13 * var(--u)))/1 var(--ui);background:#080d0fe6;color:var(--num);
  border:1px solid #55666a;border-radius:6px;padding:calc(3 * var(--u)) calc(6 * var(--u));display:flex;align-items:center;gap:2px;white-space:nowrap}
.zFace .zStrip .hcDie svg{width:.8em;height:.8em}
.zFace .zStrip .hcRv{display:inline-flex;align-items:center;margin-left:2px;color:var(--rune);font:inherit}
.zFace .zStrip .hcRv svg{width:.75em;height:.75em}
.zFace .zStrip .hcRv .rv{font-size:inherit;margin:0}
.zFace .zStrip .hcHp{margin-left:auto;border-radius:50%;flex:0 0 auto;min-width:max(22px, calc(24 * var(--u)));height:max(22px, calc(24 * var(--u)));justify-content:center;padding:0 2px;border:1.5px solid var(--ink)}
.zFace .zStrip .shd{flex:0 0 auto;margin-left:auto;width:max(16px, calc(17 * var(--u)));height:max(18px, calc(19 * var(--u)))}
.zFace .zStrip .shd + .hcHp{margin-left:0}
.zFace .zStrip .hcHp.hurt{color:var(--hurt);border-color:var(--blood)}


.zFace .zStrip .hcHp.frac{border-radius:999px;padding:0 calc(6 * var(--u));gap:1px}
.hpMax{font-size:max(11px, .62em);font-weight:700;color:var(--dim);letter-spacing:0}
.hpMax.up{color:#8fd19e}
.hpMax.down{color:#e8907f}
.bigCard .hp.frac{width:auto;min-width:calc(46 * var(--u));padding:0 calc(8 * var(--u));border-radius:999px;display:flex;align-items:center;justify-content:center;gap:1px}
.zFace .zStrip .hcShort{font-size:max(12px, calc(13 * var(--u)));-webkit-line-clamp:3}
.zFace .zStrip .hcType{flex:1 1 auto;text-align:center;font:800 max(11px, calc(10 * var(--u)))/1 var(--ui);letter-spacing:.12em;color:var(--dim)}
.zFace .zBody{flex:0 0 auto;gap:calc(4 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u))}
 
.zCard.zFace.zLeader{width:calc(232 * var(--u))}
 
.zLeader .zPlayer{flex:0 0 auto;padding:calc(3 * var(--u)) calc(7 * var(--u));background:#0f171a;border-bottom:1px solid #ffffff14;
  font:700 max(12px, calc(13 * var(--u)))/1.15 var(--ui);color:var(--num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zLeader .zPlayer small{font-size:.82em;font-weight:600;color:var(--dim);margin-left:1px}
.zCard.zFace .zArt.zPort{height:calc(104 * var(--u))}
.zPort img.art{object-position:50% 22%}
.zPort .zArtName{inset:0;display:grid;place-items:center;font-size:max(22px, calc(30 * var(--u)))}
.zPort.has-art .zArtName{display:none}




#hand .hcard.risen{opacity:0}
#hand .hcard.shoveL:not(.lifted){transform:translateX(calc(var(--x) + var(--push, 0px) - 14 * var(--u))) rotate(var(--r))}
#hand .hcard.shoveR:not(.lifted){transform:translateX(calc(var(--x) + var(--push, 0px) + 14 * var(--u))) rotate(var(--r))}
.zoom.rise .zCard{box-shadow:0 0 0 1px #000,0 0 calc(18 * var(--u)) #ffbf4733,0 calc(14 * var(--u)) calc(40 * var(--u)) #000}
.zoomSink{position:fixed;left:0;top:0;z-index:48;pointer-events:none;transform-origin:0 0}
.zSides{list-style:none;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.zSides li{display:grid;grid-template-columns:max(22px, calc(24 * var(--u))) 1fr;gap:calc(7 * var(--u));align-items:center;padding:2px 4px;border-radius:6px;
  font:600 max(12px, calc(11.5 * var(--u)))/1.25 var(--ui);color:#d6ddd9}
.zSides li .tile{--ts:max(22px, calc(24 * var(--u)))}
.zSides li b{color:var(--ink);font-weight:800}
.zSides li.crown{background:#edc65c14}
.zSides li.crown b{color:var(--sig)}
.zSides li.rolled{background:#ffbf4716;outline:1px solid #ffbf4766}
.zSides .tg{margin-left:5px;font:800 max(11px, calc(8 * var(--u)))/1 var(--ui);letter-spacing:.1em;color:var(--actInk);font-style:normal}
.zSides .off{color:var(--dim);font-style:normal}

 
.sheetWrap.redraw{left:0;top:0;right:0;bottom:0;width:auto;transform:none;background:#020405e0;align-items:center;justify-content:center;padding:8px 12px}
.sheetWrap.redraw.on{display:flex}
.sh.redraw{width:min(100%, calc(1060 * var(--u)));max-height:100%;display:flex;flex-direction:column;padding:calc(8 * var(--u)) calc(12 * var(--u))}
.rdHead{display:flex;align-items:center;gap:calc(12 * var(--u))}
.rdTitle{flex:1 1 auto;min-width:0}
.rdTitle .eb{display:inline;margin-right:4px}
.rdTitle h3{display:inline;margin:0 6px 0 0}
.rdTitle .ln{display:inline;font-size:max(12px, calc(12 * var(--u)));margin:0}
.rdHead .opt{flex:0 0 auto;min-width:max(120px, calc(130 * var(--u)))}


.rdCoin{position:relative;flex:0 0 auto;width:max(44px, calc(58 * var(--u)));aspect-ratio:1;cursor:help}
.rdCoinArt{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:2px solid var(--sig);
  background:radial-gradient(circle at 40% 35%,#4a3a0c,#1a1406);box-shadow:0 0 0 1px #0009,0 0 calc(10 * var(--u)) #edc65c55}
.rdCoinArt img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;pointer-events:none}
.rdCoin .rdLock{position:absolute;right:-3px;bottom:-3px;width:max(16px, calc(19 * var(--u)));height:max(16px, calc(19 * var(--u)));
  padding:3px;box-sizing:border-box;border-radius:50%;background:#000d;border:1px solid var(--sig);color:var(--parch)}
.rdCoin .rdCoinN{position:absolute;left:-3px;top:-3px;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;border-radius:8px;
  background:#000d;border:1px solid var(--sig);color:var(--parch);font:800 11px/14px var(--ui);text-align:center}



.rdCards{display:flex;gap:calc(8 * var(--u));margin-top:calc(7 * var(--u));justify-content:center;min-height:0;align-items:flex-start}
.rdCard{position:relative;flex:1 1 0;min-width:0;max-width:calc(200 * var(--u));aspect-ratio:5 / 7.4;display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  border:2px solid var(--edge2);border-radius:calc(10 * var(--u));background:linear-gradient(#141d20,#0d1417);cursor:pointer;color:var(--ink)}
.rdCard.structure{border-radius:calc(4 * var(--u))}
.rdTop{flex:0 0 auto;flex-wrap:nowrap;gap:calc(4 * var(--u));padding:calc(4 * var(--u)) calc(6 * var(--u));background:linear-gradient(180deg,#141d20,#0f171a);border-bottom:1px solid #ffffff14}
.rdTop .zCost{flex:0 0 auto;flex-wrap:nowrap}
.rdTop .zName{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:max(12px, calc(12 * var(--u)));line-height:1.05;letter-spacing:0}
.rdArt{position:relative;display:block;flex:0 0 47%;min-height:0;background:#10171a;overflow:hidden}
.rdArt img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;pointer-events:none}
 
.rdDie .zHp{position:static;flex:0 0 auto;margin-left:auto;min-width:max(16px, calc(16 * var(--u)));height:max(16px, calc(16 * var(--u)));padding:0 2px;border-width:1.5px;font-size:11px}
 
.rdStrip{flex:0 0 auto;display:flex;align-items:center;min-height:max(16px, calc(16 * var(--u)))}
.rdStrip .hcShort{text-align:left;font-size:max(10px, calc(11 * var(--u)))}
.rdStrip .hcType{font:800 max(10px, calc(10 * var(--u)))/1 var(--ui);letter-spacing:.1em;color:var(--dim)}
.rdBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(3 * var(--u));padding:calc(4 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u));border-top:1px solid #ffffff0e}
.rdBody .zType{flex:0 0 auto;font-size:11px;line-height:1.1;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.rdDie{flex:0 0 auto;display:flex;gap:2px;align-items:center;flex-wrap:nowrap;min-width:0}
.rdDie .rng{flex:0 0 auto;display:inline-flex;align-items:center;gap:1px;margin-right:2px;font:800 max(11px, calc(11 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--num);white-space:nowrap}
.rdDie .sd{position:relative;flex:1 1 0;min-width:12px;max-width:max(15px, calc(16 * var(--u)));height:max(15px, calc(16 * var(--u)));display:grid;place-items:center;border-radius:3px;
  background:var(--tileBg);border:1px solid var(--rim);font:800 10px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--num)}
.rdDie .sd.rune{border-color:var(--rune);background:var(--runebg);color:var(--rune)}
.rdDie .sd.rune::after{content:"";position:absolute;right:1px;top:1px;width:3px;height:3px;background:var(--rune);transform:rotate(45deg)}
.rdBody .zText{display:block;flex:1 1 auto;min-height:0;overflow:hidden;font:600 max(10px, calc(10 * var(--u)))/1.25 var(--ui);color:#dfe5e1}
.rdBody .zText.clip{display:-webkit-box;-webkit-box-orient:vertical}
.rdBody .zText .p{display:inline}
.rdCard.on{border-color:var(--hurt);box-shadow:0 0 0 1px #ff6b5a99,0 0 calc(12 * var(--u)) #ff6b5a55}
.rdCard.on .rdTop,.rdCard.on .rdArt,.rdCard.on .rdBody{opacity:.62}
.rdCard .backTag{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) rotate(-10deg);z-index:3;padding:3px 8px;border-radius:6px;
  border:2px solid var(--hurt);background:#180c0bee;color:var(--hurt);font:800 max(12px, calc(13 * var(--u)))/1 var(--ui);letter-spacing:.14em}




.playBtn{position:absolute;z-index:31;bottom:calc(78 * var(--u) + var(--handLift, 0px));left:calc(var(--x) + 77 * var(--u));min-height:max(44px, calc(46 * var(--u)));
  min-width:max(88px, calc(100 * var(--u)));padding:0 calc(14 * var(--u));border-radius:10px;border:1px solid var(--act);background:#131a1df2;color:var(--actInk);
  font:800 max(13px, calc(15 * var(--u)))/1 var(--title);letter-spacing:.1em;box-shadow:0 0 14px var(--actGlow),0 4px 12px #000c;white-space:nowrap}
.playBtn:active{transform:translateY(1px)}

 
.hcard.dragSrc{opacity:.28}
.colC.dropOn::after{content:"";position:absolute;left:3%;right:3%;top:calc(30 * var(--u));bottom:calc(72 * var(--u) + var(--handLift, 0px));border-radius:calc(14 * var(--u));
  border:2px dashed #ffbf4766;background:#ffbf470a;pointer-events:none;z-index:1}
.ghost{position:fixed;left:0;top:0;z-index:55;pointer-events:none;filter:drop-shadow(0 10px 18px #000c)}
.ghost .hcard{position:relative;left:auto;bottom:auto;transform:rotate(-4deg) scale(1.08) !important;transition:none}
.ghost .tok{transform:scale(.9) !important;transition:none;opacity:.92}
.ghost *{pointer-events:none !important}

 
 
.fsBtn{position:absolute;right:calc(8 * var(--u) + max(44px, calc(44 * var(--u))) + 6px);top:calc(6 * var(--u));width:max(44px, calc(44 * var(--u)));height:max(44px, calc(44 * var(--u)));
  border-radius:10px;background:#131a1dcc;border:1px solid var(--edge2);color:var(--dim);z-index:6;display:grid;place-items:center}
.fsBtn svg{width:22px;height:22px;display:block}
.fsBtn .fsOut{display:none}
.fsBtn.on .fsIn{display:none}
.fsBtn.on .fsOut{display:inline}
.fsBtn.on{color:var(--parch);border-color:var(--rim2)}
.fsBtn.na{opacity:.55}




.v6Fs[data-fs] > svg{display:none}
.v6Fs > .fsPi.fsOut{display:none}
.v6Fs.on > .fsPi.fsIn{display:none}
.v6Fs.on > .fsPi.fsOut{display:inline}



@media (max-height: 375.98px), (max-width: 835px) {
  .fsBtn{right:calc(8 * var(--u));top:calc(6 * var(--u) + max(44px, calc(44 * var(--u))) + 6px)}
  

  .etWrap{top:max(0px, calc(138px - 148 * var(--u)))}
}
 
.leader{--beat:750ms}
.portrait{position:relative}
.ldPop{position:absolute;left:50%;top:38%;z-index:6;pointer-events:none;display:flex;align-items:center;gap:2px;transform:translate(-50%,-50%);
  animation:ldRise var(--beat) cubic-bezier(.2,.8,.2,1) var(--land, 0ms) both}
.ldPop b{display:block;min-width:max(30px, calc(34 * var(--u)));padding:3px 7px;border-radius:9px;text-align:center;background:#080d0f;box-shadow:0 4px 12px #000c;
  font:800 max(16px, calc(22 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums}
.ldPop.dmg b{color:var(--hurt);border:2px solid var(--blood)}
.ldPop.prevent b{color:var(--bulwark);border:2px solid var(--bulwark)}
.ldPop.prevent svg{width:max(18px, calc(20 * var(--u)));height:max(20px, calc(23 * var(--u)))}
@keyframes ldRise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}
  35%{transform:translate(-50%,-70%) scale(1)}100%{opacity:1;transform:translate(-50%,-95%) scale(1)}}
.hpPlate.shake{animation:plateShake min(420ms, var(--beat)) ease-in-out var(--land, 0ms) both}
@keyframes plateShake{0%,100%{transform:none}15%{transform:translateX(-4px)}35%{transform:translateX(4px)}55%{transform:translateX(-3px)}75%{transform:translateX(2px)}}



.hpNum.hpPulse{color:var(--hurt);border-color:var(--blood);animation:hpPulse min(700ms, var(--beat, 700ms)) ease-out var(--land, 0ms) both}
@keyframes hpPulse{0%{transform:scale(1)}30%{transform:scale(1.35);box-shadow:0 0 0 2px var(--blood)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .hpNum.hpPulse{animation:none} }
.hpBar i.drain{animation:hpDrain calc(var(--beat) * .7) ease-out var(--land, 0ms) both}
@keyframes hpDrain{from{width:var(--from)}}
 
.dpop.num.prevent{display:flex;align-items:center;gap:2px}
.dpop.num.prevent svg{width:max(16px, calc(18 * var(--tu)));height:max(18px, calc(21 * var(--tu)))}
.dpop.num.prevent b{color:var(--bulwark);border:2px solid var(--bulwark)}



.gem.newShard svg{filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor)}
.gem.newShard{animation:newShard 600ms ease-out both}
@keyframes newShard{0%{transform:scale(.6)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
 
.rv{font-size:.82em;color:var(--rune);margin-left:1px}





.mk.rune.val{width:auto;height:auto;min-width:max(14px, calc(16 * var(--tu)));padding:2px 2px 1px;gap:1px;display:flex;flex-direction:column;align-items:center;
  font:800 max(11px, calc(10 * var(--tu)))/1 var(--ui);font-variant-numeric:tabular-nums}
.mk.rune.val svg{width:max(8px, calc(9 * var(--tu)));height:max(8px, calc(9 * var(--tu)));flex:none}
.mk.rune.val .rv{font-size:inherit;margin:0}
.hcard .hcRv{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:0;margin-left:1px;padding:0;color:var(--rune);
  font:800 max(10px, calc(10 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums}
.hcard .hcRv svg{width:max(8px, calc(9 * var(--u)));height:max(8px, calc(9 * var(--u)));flex:none}
.hcard .hcRv .rv{font-size:inherit;margin:0}







.fx{position:fixed;inset:0;z-index:32;pointer-events:none;overflow:hidden}
.fxArrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fxLayer{position:absolute;inset:0}


.fxShards{position:fixed;inset:0;z-index:44;pointer-events:none;overflow:hidden}
.fxShard{position:absolute;left:0;top:0;display:block;transform-origin:50% 50%;will-change:transform}
.fxShard svg{width:100%;height:100%;display:block;overflow:visible;filter:brightness(1.35) drop-shadow(0 0 2px #fff8) drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor)}
.fxShard.bonus{color:var(--parch)}
.arw path{fill:none;stroke-linecap:round}
.arw .head{transform-box:fill-box;transform-origin:center}
.arw.strike path{stroke:var(--strike);filter:drop-shadow(0 0 6px #e8654faa)}
.arw.strike .head{fill:var(--strike);filter:drop-shadow(0 0 8px #e8654f)}
.arw.power path{stroke:var(--sig);filter:drop-shadow(0 0 6px #edc65caa)}
.arw.power .head{fill:var(--sig);filter:drop-shadow(0 0 8px #edc65c)}
.arw .flow{stroke-dasharray:10 8;animation:arrowFlow .7s linear infinite}
@keyframes arrowFlow{to{stroke-dashoffset:-18}}
.fxDie{position:absolute;left:0;top:0}
.fxDie .ct,.fxDieFly .ct{--s:inherit}
.fxDie .ct.rolling{border-color:var(--rim2);color:#c9d2ce}




.fxDie .ct.aside{position:absolute;left:100%;top:0;margin-left:4px}
.fxDie.landed .ct.aside{opacity:.55;filter:grayscale(.6)}
.fxDie.landed .ct.aside::after{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:max(2px, calc(var(--s) * .08));
  background:var(--hurt);border-radius:2px;transform:rotate(-38deg);box-shadow:0 0 0 1px #000a}
.fxDie.pair .ct:not(.aside){box-shadow:0 0 0 2px var(--sig),0 0 calc(var(--s) * .4) #edc65c66}
.fxDie .keepTag{position:absolute;left:0;top:calc(100% + 3px);min-width:var(--s);box-sizing:border-box;text-align:center;white-space:nowrap;
  font:800 max(11px, calc(var(--s) * .3))/1 var(--ui);letter-spacing:.06em;padding:2px 4px;border-radius:4px;
  background:#0d1720ee;border:1px solid #5b5330;color:var(--goldHi);opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s}
.fxDie.landed .keepTag{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .fxDie .keepTag{transition:none} }
.fxFly{position:absolute;left:0;top:0;will-change:transform}
.fxFly .ct{box-shadow:0 0 14px #e8654fcc,0 4px 10px #000c;border-color:var(--strike)}



.fxSumChip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform;white-space:nowrap;
  font:800 max(12px, calc(15 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;padding:max(3px, calc(3 * var(--u))) max(5px, calc(6 * var(--u)));
  border-radius:999px;background:#0f1a16f2;border:1.5px solid var(--heal);color:var(--heal);box-shadow:0 0 10px #8fd0a588,0 3px 8px #000c}
.fxSumChip.down{border-color:var(--hurt);color:var(--hurt);box-shadow:0 0 10px #ff6b5a88,0 3px 8px #000c}
.fxDie .ct.boosted.sumUp,.fxDieFly .ct.boosted.sumUp{border-color:var(--heal)}
.fxDie .ct.boosted.sumDown,.fxDieFly .ct.boosted.sumDown{border-color:var(--hurt)}
.fxDie .ct.sumUp b,.fxDieFly .ct.sumUp b{color:var(--heal)}
.fxDie .ct.sumDown b,.fxDieFly .ct.sumDown b{color:var(--hurt)}
.fxSumEq{position:absolute;left:calc(var(--s) / 2);top:calc(var(--s) + 3px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:700 max(11px, calc(12 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--num);
  padding:2px 5px;border-radius:6px;background:#0b1210e6}
.fxOrb{display:block;width:max(12px, calc(16 * var(--u)));height:max(12px, calc(16 * var(--u)));border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#f6e2a4 35%,#edc65c 60%,#edc65c00 72%);box-shadow:0 0 18px 6px #edc65c88}
.fxFlash{position:absolute;border-radius:calc(10 * var(--u));opacity:0;background:radial-gradient(circle at 50% 50%,#fff6 0%,#ff6b5acc 45%,#c0504400 80%)}
.fxFlash.gold{background:radial-gradient(circle at 50% 50%,#fff8 0%,#edc65ccc 40%,#ff6b5a88 65%,#c0504400 85%)}
.fxFlash.round{border-radius:50%}
.chip.tumbling{border-color:var(--rim2)}







.portrait .pimg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 40%;display:block;pointer-events:none;z-index:0}
.portrait .mono{position:relative;z-index:1}
.portrait.has-art .mono{display:none}
.portrait.has-art{background:#0b1013}
img.artFill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border-radius:inherit;
  filter:blur(max(6px, calc(10 * var(--u)))) brightness(.4) saturate(.45)}
img.art[data-fit="contain"]{object-fit:contain}





.fxTurn{position:absolute;left:50%;top:44%;display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--u));
  padding:calc(8 * var(--u)) calc(34 * var(--u));border-radius:calc(6 * var(--u));white-space:nowrap;
  background:linear-gradient(90deg,#06090b00,#06090be6 18%,#06090be6 82%,#06090b00);transform:translate(-50%,-50%)}
.fxTurn b{font:700 max(20px, calc(28 * var(--u)))/1 var(--title);letter-spacing:.06em;color:var(--parch);text-shadow:0 2px 10px #000}
.fxTurn.you b{color:var(--sig);text-shadow:0 0 14px #edc65c66,0 2px 10px #000}
.tok.fxGhost{position:absolute;left:0;top:0;margin:0;transform-origin:50% 50%;will-change:transform,opacity,filter}
.fxAsh{position:absolute;width:max(3px, calc(4 * var(--u)));height:max(3px, calc(4 * var(--u)));border-radius:50%;
  background:#c9c2b0;box-shadow:0 0 6px #ffb37a88;opacity:0}
.fxLand{position:absolute;border-radius:calc(10 * var(--u));border:2px solid var(--sig);box-shadow:0 0 14px #edc65c88;opacity:0}
.fxCard{position:absolute;left:0;top:0;width:calc(40 * var(--u));height:calc(56 * var(--u));border-radius:calc(5 * var(--u));
  background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border:1px solid var(--bkFoeEdge, #6b3a31);box-shadow:0 4px 12px #000c;will-change:transform}
 
.fxCard.you{background:var(--bkYou, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border-color:var(--bkYouEdge, #6b3a31)}
 
.fxCard.face{background-color:#10171a;background-size:cover;background-position:50% 30%;border-color:var(--edge2)}






.tok.dragDim,.portrait.dragDim{opacity:.38;filter:saturate(.35) brightness(.8)}
.tok.areaHit::after{content:"";position:absolute;inset:calc(-4 * var(--tu));border-radius:calc(12 * var(--tu));pointer-events:none;z-index:3;
  outline:2px dashed var(--goldHi);outline-offset:0;box-shadow:0 0 calc(14 * var(--tu)) #f1d79c55;animation:areaPulse 1.1s ease-in-out infinite alternate}
.portrait.areaHit{outline:2px dashed var(--goldHi);outline-offset:3px}
@keyframes areaPulse{from{opacity:.65}to{opacity:1}}
.tok.pickable.dropHot{transform:scale(1.08);z-index:4}
.portrait.pickable.dropHot{transform:scale(1.08)}
.dropGap{position:fixed;z-index:54;width:6px;margin-left:-3px;border-radius:3px;pointer-events:none;
  background:var(--pick);box-shadow:0 0 0 2px #7ec2f055,0 0 14px #7ec2f0aa}





.row .slot{flex:0 0 auto;position:relative;width:max(28px, calc(30 * var(--tu)));height:calc(118 * var(--tu));min-height:44px;
  border-radius:calc(8 * var(--tu));display:flex;align-items:center;justify-content:center;
  background:#7ec2f014;border:2px dashed var(--pick);cursor:pointer;animation:slotIn .25s ease-out}
.row .slot .sl{display:block;width:3px;height:56%;border-radius:2px;background:var(--pick);opacity:.85}
.row .slot.dflt{background:#7ec2f026}
.row .slot:hover,.row .slot:focus-visible{background:#7ec2f040}
.row .slot:active{transform:scale(.96)}
@keyframes slotIn{from{opacity:0}to{opacity:1}}
 
.info.rulesBox{display:flex;flex-direction:column;max-height:calc(100vh - 24 * var(--u));width:min(calc(520 * var(--u)), 86vw)}


@supports (height:100dvh){ .info.logBox,.info.rulesBox{max-height:calc(100dvh - 24 * var(--u))} }
.rulesList{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding-right:4px;display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.rulesList .rh{display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.rulesList h3{font:800 max(11px, calc(10 * var(--u)))/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--goldHi)}





.coachLayer{position:fixed;inset:0;z-index:43;pointer-events:none}
.coachLayer svg{position:absolute;inset:0;overflow:visible}
.coachLayer .cArrow{stroke:var(--act);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px #000)}
.coachLayer .cHead{fill:var(--act)}
.coach{position:fixed;z-index:44;pointer-events:none;box-sizing:border-box;max-width:calc(100vw - 16px);
  padding:calc(7 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));border-radius:calc(10 * var(--u));
  background:linear-gradient(180deg,#1a2327f7,#0d1316f7);border:1px solid var(--rim2);border-left:3px solid var(--act);
  box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) #000c;color:var(--ink)}
.coach .cEb{font:800 max(11px, calc(9.5 * var(--u)))/1.1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--actInk);margin-bottom:calc(3 * var(--u))}
.coach .cLn{font:600 max(13px, calc(14.5 * var(--u)))/1.3 var(--ui);color:var(--ink)}
.coach .cLn.last{color:var(--actInk);font-weight:700}
.coach.pulse .cLn.last{animation:coachNudge .45s ease-in-out 2}
.coach .cNudge{margin-top:calc(4 * var(--u));font:700 max(13px, calc(14 * var(--u)))/1.3 var(--ui);color:var(--goldHi)}
.coach .cActs{margin-top:calc(6 * var(--u));display:flex;justify-content:flex-end;pointer-events:auto}
@keyframes coachNudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
 
.coachGlow{outline:3px solid var(--act);outline-offset:3px;animation:coachGlow 1.4s ease-in-out infinite}
.hcard.coachGlow{outline-offset:1px}
.pips.cost.coachGlow,.tok .hp.coachGlow,.hpNum.coachGlow{outline-width:2px;outline-offset:2px}
@keyframes coachGlow{0%,100%{outline-color:var(--act)}50%{outline-color:#ffbf4744}}
#gemBox.coachPulse{animation:coachShards .5s ease-in-out 3}
@keyframes coachShards{0%,100%{transform:none}50%{transform:scale(1.12)}}
 
.coachFinger{position:fixed;z-index:45;width:44px;height:44px;margin:-4px 0 0 -14px;pointer-events:none;animation:coachTap 1s ease-in-out infinite;filter:drop-shadow(0 2px 4px #000c)}
.coachFinger svg{width:100%;height:100%;display:block}
@keyframes coachTap{0%,100%{transform:translate(0,6px)}50%{transform:translate(0,0)}}
 
.coachFinger.onScreen{z-index:71}
 
.readyCard{display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u));padding:calc(18 * var(--u)) calc(28 * var(--u));text-align:center}
.readyCard h2{margin:0}
.readyCard .endActs{display:flex;justify-content:center}
 
.coachSkip{position:fixed;z-index:46;left:calc(env(safe-area-inset-left) + 136 * var(--u));top:calc(6 * var(--u));min-height:44px;min-width:64px;padding:0 14px;border-radius:10px;
  background:#131a1dcc;border:1px solid var(--edge2);font:800 max(12px, calc(12 * var(--u)))/1 var(--ui);letter-spacing:.1em;color:var(--dim)}



.coachAsk{position:fixed;inset:0;z-index:103;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:16px;background:#020405e6}
.coachAsk[hidden]{display:none}
.caBox{--c:12px;position:relative;box-sizing:border-box;width:min(540px, 100%);max-height:100%;overflow:hidden;padding:max(16px, calc(20 * var(--u))) max(18px, calc(24 * var(--u)));text-align:center;background:#a07c3c;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.caBox::before{content:"";position:absolute;inset:2px;--c2:11px;background:#161d20;
  clip-path:polygon(var(--c2) 0,calc(100% - var(--c2)) 0,100% var(--c2),100% calc(100% - var(--c2)),calc(100% - var(--c2)) 100%,var(--c2) 100%,0 calc(100% - var(--c2)),0 var(--c2))}
.caBox > *{position:relative}
.caBox h2{margin:0;padding:0;font:700 max(20px, calc(24 * var(--u)))/1.15 var(--title);letter-spacing:.04em;color:#f1d79c}
.caBox .caLine{margin:max(8px, calc(10 * var(--u))) 0 0;font:600 max(15px, calc(16 * var(--u)))/1.3 var(--ui);color:#e8dfcc}
.caActs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:max(14px, calc(18 * var(--u)))}
.caActs .dvPlate{min-width:0;height:48px;padding:0 34px;font-size:15px;letter-spacing:.14em}
.coachAsk .opt.caSkip{--c:6px;min-height:48px;padding:0 18px;border:0;border-radius:0;background:#2a3336;box-shadow:none;color:#e8dfcc;font:800 14px/1 var(--ui);letter-spacing:.1em;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.coachAsk button:focus-visible{outline:2px solid #f1d79c;outline-offset:-5px}
.coachAsk button:disabled{cursor:progress;opacity:.55}
 
.coachToast{position:fixed;left:50%;top:calc(60 * var(--u));transform:translateX(-50%);z-index:61;max-width:min(calc(600 * var(--u)), 90vw);
  background:#080d0ff2;border:1px solid var(--goldHi);border-radius:12px;padding:8px 16px;font:700 max(13px, calc(14 * var(--u)))/1.3 var(--ui);color:var(--parch);text-align:center;
  pointer-events:none}
 
.coachScreen .res h1{font-size:max(20px, calc(26 * var(--u)))}





.howTo{max-height:calc(100vh - 12px);display:flex;flex-direction:column;gap:calc(6 * var(--u));padding:calc(10 * var(--u)) calc(16 * var(--u))}
@supports (height:100dvh){ .howTo{max-height:calc(100dvh - 12px)} }
.howTo .htList{margin:0;padding:0;list-style:none;overflow:auto;min-height:0;column-gap:calc(22 * var(--u))}
.howTo .htList li{position:relative;padding-left:.95em;break-inside:avoid;margin-bottom:calc(4 * var(--u));font:600 max(13px, calc(13.5 * var(--u)))/1.3 var(--ui);color:var(--ink)}
.howTo .htList li::before{content:"";position:absolute;left:.1em;top:.5em;width:.36em;height:.36em;border-radius:50%;background:var(--goldHi)}
.howTo .lbl{margin:0}
 
.howTo .x ~ h2{min-height:max(40px, calc(36 * var(--u)));display:flex;align-items:center;margin-top:calc(-4 * var(--u))}
.howTo .endActs{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));flex-wrap:wrap;margin-top:calc(2 * var(--u))}
.howTo .endNote{font:600 max(12px, calc(13 * var(--u)))/1.3 var(--ui);color:var(--dim)}
.howTo .endActs .opt{flex:0 0 auto;margin-left:auto}
@media (min-width:700px){ .info.howTo{width:min(calc(900 * var(--u)), 94vw)} .howTo .htList{columns:2} }





.info.howTo.htPager{width:min(calc(860 * var(--u)), calc(100vw - 24px));max-height:min(94vh, calc(100vh - 16px));
  padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));gap:calc(8 * var(--u));touch-action:pan-y}
@supports (height:100dvh){ .info.howTo.htPager{max-height:min(94dvh, calc(100dvh - 16px))} }
.htPages{position:relative;min-height:0}
.htPage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;column-gap:calc(24 * var(--u))}
.htTxt{display:flex;flex-direction:column;gap:calc(6 * var(--u));min-width:0}
 
.htMenu .htTxt{padding-right:max(48px, calc(48 * var(--u)))}
.htMenu > .x{width:max(44px, calc(40 * var(--u)));height:max(44px, calc(40 * var(--u)));z-index:3}


.htNav .opt{white-space:nowrap;flex-direction:row;gap:.35em}
.htPager .htReady{font:700 max(18px, calc(24 * var(--u)))/1.3 var(--title);color:var(--parch);letter-spacing:.06em;padding:0;margin-bottom:calc(4 * var(--u))}
.htPager .htNum{font:700 max(11px, calc(11 * var(--u)))/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.htPager .htTitle{font:700 max(20px, calc(30 * var(--u)))/1.05 var(--title);letter-spacing:.08em;text-transform:uppercase;color:var(--goldHi);
  text-shadow:0 0 calc(18 * var(--u)) var(--actGlow);margin-bottom:calc(2 * var(--u))}
.htPager .htLn{font:600 max(13px, calc(16 * var(--u)))/1.35 var(--ui);color:var(--ink);max-width:30em}
.htPager .htFoot,.htPager .endNote{font:600 max(12px, calc(13 * var(--u)))/1.3 var(--ui);color:var(--dim);margin-top:calc(2 * var(--u))}
.htNav{display:flex;align-items:center;gap:calc(10 * var(--u))}
.htDots{display:flex;gap:calc(7 * var(--u));margin-right:auto}
.htDots i{display:block;width:max(7px, calc(9 * var(--u)));height:max(7px, calc(9 * var(--u)));border-radius:50%;background:var(--edge2)}
.htDots i.on{background:var(--goldHi);box-shadow:0 0 calc(8 * var(--u)) var(--actGlow)}
.htNav .opt{flex:0 0 auto}
.htNav .htSkip{border-color:transparent;background:none;color:var(--dim);letter-spacing:.12em}
.htNav .htNext,.htNav .htClose{min-width:max(96px, calc(110 * var(--u)))}
 
.htArt{position:relative;display:grid;place-items:center;min-width:0;height:calc(200 * var(--u))}
.htStage{position:relative;width:calc(340 * var(--u));height:calc(200 * var(--u))}
.htStage > *{position:absolute}
.htStage .g{display:block;width:100%;height:100%}
.htStage .mc{width:calc(84 * var(--u));height:calc(114 * var(--u));border-radius:calc(9 * var(--u));border:calc(2 * var(--u)) solid var(--rim2);
  background:linear-gradient(180deg,#2a3a3a 0,#18221f 55%,#10171a 100%);box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) #000a}
.htStage .mc::before{content:"";position:absolute;inset:calc(7 * var(--u)) calc(7 * var(--u)) calc(38 * var(--u));border-radius:calc(5 * var(--u));
  background:radial-gradient(circle at 50% 40%,#4d5f55,#1f2a26)}
.htStage .mc .mDie,.htStage .mc .mHp{position:absolute;bottom:calc(7 * var(--u));width:calc(26 * var(--u));height:calc(26 * var(--u));display:grid;place-items:center}
.htStage .mc .mDie{left:calc(7 * var(--u));border-radius:calc(6 * var(--u));background:var(--num);color:#141a1c;font:800 calc(16 * var(--u))/1 var(--ui)}
.htStage .mc .mHp{right:calc(7 * var(--u));border-radius:50%;background:#5a1f1a;border:1px solid var(--hurt);color:var(--num);font:800 calc(14 * var(--u))/1 var(--ui)}
.htStage .mc.ready{border-color:var(--heal);box-shadow:0 0 calc(18 * var(--u)) var(--ready2),0 calc(8 * var(--u)) calc(20 * var(--u)) #000a}
.htStage .mc.foe{border-color:#7a3b34}
.htStage .mc.glow{border-color:var(--act);box-shadow:0 0 calc(16 * var(--u)) var(--actGlow),0 calc(8 * var(--u)) calc(20 * var(--u)) #000a}
.htStage .mc.dull{opacity:.5}
.htStage .mc.wait{border-style:dashed;background:#0b1013cc;box-shadow:none}
.htStage .mc.wait::before{display:none}
.htStage .mc.wait .hg{position:absolute;left:50%;top:50%;width:calc(34 * var(--u));height:calc(34 * var(--u));transform:translate(-50%,-50%);color:var(--dim)}
.htStage .arrow{height:calc(4 * var(--u));background:linear-gradient(90deg,transparent,var(--goldHi));border-radius:2px;transform-origin:left center}
.htStage .arrow::after{content:"";position:absolute;right:calc(-6 * var(--u));top:calc(-6 * var(--u));border:calc(8 * var(--u)) solid transparent;border-left-color:var(--goldHi)}
.htStage .hit{font:800 calc(30 * var(--u))/1 var(--title);color:var(--hurt);text-shadow:0 0 calc(10 * var(--u)) #000}
 
.htStage .ld{left:calc(24 * var(--u));top:calc(14 * var(--u));width:calc(120 * var(--u));height:calc(120 * var(--u));border-radius:50%;
  border:calc(3 * var(--u)) solid #7a3b34;background:radial-gradient(circle at 40% 35%,#3a2420,#120b0a 75%)}
.htStage .ld .life{position:absolute;right:calc(-4 * var(--u));bottom:calc(2 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;
  background:#5a1f1a;border:calc(2 * var(--u)) solid var(--hurt);color:var(--num);display:grid;place-items:center;font:800 calc(22 * var(--u))/1 var(--ui)}
.htStage .w1{left:calc(222 * var(--u));top:calc(24 * var(--u))}
.htStage .gemRow{left:calc(22 * var(--u));top:calc(152 * var(--u));display:flex;gap:calc(6 * var(--u));color:var(--tide)}
.htStage .gemRow .g{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.htStage .gemRow .nx{color:var(--dimmer)}
 
.htStage .p1{left:calc(70 * var(--u));top:calc(62 * var(--u));transform:rotate(4deg);z-index:2}
.htStage .p2{left:calc(14 * var(--u));top:calc(80 * var(--u));transform:rotate(-10deg)}
.htStage .p3{left:calc(160 * var(--u));top:calc(92 * var(--u));width:calc(70 * var(--u));transform:rotate(-34deg);z-index:3}
.htStage .p4{left:calc(236 * var(--u));top:calc(14 * var(--u))}
 
.htStage .a1,.htStage .s1{left:calc(26 * var(--u));top:calc(72 * var(--u))}
.htStage .a2,.htStage .s3{left:calc(118 * var(--u));top:calc(120 * var(--u));width:calc(84 * var(--u));transform:rotate(-22deg)}
.htStage .a3{left:calc(222 * var(--u));top:calc(26 * var(--u))}
.htStage .a4{left:calc(254 * var(--u));top:0}
 
.htStage .s2{left:calc(78 * var(--u));top:calc(46 * var(--u));display:inline-flex;align-items:center;gap:calc(3 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u));
  border-radius:999px;border:1px solid var(--sig);background:var(--crownbg);color:var(--goldHi);font:800 calc(16 * var(--u))/1 var(--ui);z-index:2}
.htStage .s2 .g{width:calc(18 * var(--u));height:calc(18 * var(--u));color:var(--tide)}
.htStage .s4{left:calc(222 * var(--u));top:calc(42 * var(--u))}
.htStage .s5{left:calc(244 * var(--u));top:calc(4 * var(--u));width:calc(40 * var(--u));height:calc(46 * var(--u));z-index:2}
 
.htStage .gemCol{left:calc(26 * var(--u));top:calc(80 * var(--u));display:flex;gap:calc(8 * var(--u));color:var(--tide)}
.htStage .gemCol .g{width:calc(38 * var(--u));height:calc(38 * var(--u))}
.htStage .h2{left:calc(126 * var(--u));top:calc(100 * var(--u));width:calc(76 * var(--u))}
.htStage .h3{left:calc(226 * var(--u));top:calc(46 * var(--u))}
.htStage .mc .mCost{position:absolute;left:calc(-12 * var(--u));top:calc(-12 * var(--u));width:calc(36 * var(--u));height:calc(36 * var(--u));
  display:grid;place-items:center;color:var(--tide)}
.htStage .mc .mCost .g{position:absolute;inset:0}
.htStage .mc .mCost.gemM{--gW:calc(30 * var(--u));--gH:calc(40 * var(--u));--gF:calc(21 * var(--u))}
.htStage .mc .mCost i{position:relative;font:800 calc(16 * var(--u))/1 var(--ui);font-style:normal;color:var(--num);text-shadow:0 1px 2px #000}
 
.htStage .rays{inset:0;background:radial-gradient(circle at 38% 50%,#f1d79c40 0,transparent 55%)}
.htStage .bdie{left:calc(70 * var(--u));top:calc(36 * var(--u));width:calc(120 * var(--u));height:calc(120 * var(--u));border-radius:calc(22 * var(--u));
  background:linear-gradient(160deg,#f6e3ae,#c99a4a);color:#3a2508;display:grid;place-items:center;box-shadow:0 0 calc(40 * var(--u)) var(--actGlow);transform:rotate(-8deg)}
.htStage .bdie .g{width:calc(66 * var(--u));height:calc(66 * var(--u))}
.htStage .runeTile{left:calc(226 * var(--u));top:calc(104 * var(--u));width:calc(70 * var(--u));height:calc(70 * var(--u));border-radius:calc(12 * var(--u));
  background:var(--runebg);border:calc(2 * var(--u)) solid var(--rune);color:var(--rune);display:flex;align-items:center;justify-content:center;gap:calc(4 * var(--u))}
.htStage .runeTile .g{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.htStage .runeTile b{font:800 calc(26 * var(--u))/1 var(--ui);color:var(--num)}
 
.btn.pre{outline:2px solid var(--goldHi);outline-offset:3px}
 
body.hide-card_text #zoom .zText,body.hide-card_text #zoom .zKw,body.hide-card_text #inspect .itext{display:none !important}
body.hide-spur [data-attack="spur"]{display:none !important}
body.hide-enemy_banner_die .chip[data-sides="enemy"],
body.hide-enemy_banner_die .bossDie[data-sides="enemy"]{visibility:hidden !important}
body.hide-enemy_banner_die #zoom .zLeader[data-zfor="l:enemy"] .zBody{display:none !important}
body.hide-auto_pass #apTag,body.hide-auto_pass #inspect .tgl.ap{display:none !important}


body.lesson #menu [data-menu="settings"]{display:none !important}














#hand .hcard{--rise:calc((57 + var(--drop, 0)) * var(--u) - var(--handLift, 0px))}
body.shardPick #hand .hcard:not(.lifted){translate:0 calc(-1 * var(--rise));
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .18s, translate .18s cubic-bezier(.2,.8,.2,1), opacity .18s, filter .18s, border-color .18s}
body.shardRise #hand .hcard:not(.lifted){animation:shardRise .26s cubic-bezier(.2,.8,.2,1) var(--shardDelay, 0ms)}
body.shardDrop #hand .hcard:not(.lifted){animation:shardDrop .22s cubic-bezier(.2,.8,.2,1) var(--shardDelay, 0ms)}
@keyframes shardRise{from{translate:var(--gx, 0px) 0}}
@keyframes shardDrop{from{translate:var(--gx, 0px) calc(-1 * var(--rise))}}
 
body.shardPick #ribbon{visibility:hidden}









.sheetWrap.pick{left:auto;right:calc(117 * var(--u) + env(safe-area-inset-right, 0px));bottom:calc(6 * var(--u));transform:none;width:auto}
.sh.colour{display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));padding:calc(4 * var(--u));border-radius:calc(14 * var(--u));
  background:#080d0fcc;border:1px solid var(--rim);box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) #000a}
.sh.colour .eb{font:800 max(11px, calc(9.5 * var(--u)))/1.15 var(--ui);letter-spacing:.12em;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:max(200px, calc(240 * var(--u)));padding-top:calc(2 * var(--u))}
.sh.colour .opts{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:calc(6 * var(--u));margin:0}
.sh.colour .sym{position:relative;min-width:max(48px, calc(52 * var(--u)));min-height:max(44px, calc(46 * var(--u)));padding:0;border-radius:calc(11 * var(--u));
  display:grid;place-items:center;background:linear-gradient(180deg,#1a2327,#10171a);border:1.5px solid var(--rim2);box-shadow:none;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;
  transition:transform .12s, border-color .12s, box-shadow .12s}
.sh.colour .sym.g-sword{color:var(--sword)} .sh.colour .sym.g-iron{color:var(--ironGem)}
.sh.colour .sym.g-fire{color:var(--fire)} .sh.colour .sym.g-tide{color:var(--tide)}
.sh.colour .sym .gemIco{width:max(28px, calc(30 * var(--u)));height:max(28px, calc(30 * var(--u)));display:block;overflow:visible;pointer-events:none}


.sh.colour .sym .symN{position:absolute;right:max(3px, calc(4 * var(--u)));top:max(3px, calc(4 * var(--u)));min-width:max(16px, calc(17 * var(--u)));
  height:max(16px, calc(17 * var(--u)));padding:0 3px;border-radius:999px;display:grid;place-items:center;pointer-events:none;
  font:800 max(11px, calc(11 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums;background:currentColor;-webkit-text-fill-color:#0b1013}
.sh.colour .sym .symN.zero{background:#2a3437;-webkit-text-fill-color:var(--dim);color:var(--dim)}
.sh.colour .sym.on{border-color:currentColor;box-shadow:0 0 0 1px currentColor,0 0 14px currentColor;transform:translateY(-2px)}
.sh.colour .sym:focus-visible{outline:2px solid var(--pick);outline-offset:2px}
.sh.colour.many .opts{gap:calc(5 * var(--u))}
.sh.colour.many .sym{min-height:max(44px, calc(44 * var(--u)))}

 
#hand[data-pv="sword"]{--mc:var(--sword)} #hand[data-pv="iron"]{--mc:var(--ironGem)}
#hand[data-pv="fire"]{--mc:var(--fire)} #hand[data-pv="tide"]{--mc:var(--tide)}
body.shardPreview.shardPick #hand .hcard.pvDim:not(.risen){opacity:.42;filter:saturate(.35) brightness(.8)}
body.shardPreview.shardPick #hand .hcard.pvMatch:not(.lifted){border-color:var(--mc);
  box-shadow:0 0 0 1px var(--mc),0 0 calc(14 * var(--u)) var(--mc),0 calc(-2 * var(--u)) calc(12 * var(--u)) #000c;
  translate:0 calc(-1 * var(--rise) - 6 * var(--u))}
body.shardPreview.shardPick #hand .hcard.pvMatch .pips.cost{padding:2px;gap:2px}
body.shardPreview.shardPick #hand .hcard.pvMatch .pip.pipHit{transform:scale(1.35);box-shadow:0 0 0 1.5px var(--mc),0 0 8px var(--mc);transition:transform .18s, box-shadow .18s}
body.shardPreview.shardPick #hand .hcard.pvMatch .plG.pipHit{transform:scale(1.2);filter:drop-shadow(0 0 2px var(--mc)) drop-shadow(0 0 6px var(--mc));transition:transform .18s, filter .18s}
@media (prefers-reduced-motion:reduce){
  body.shardRise #hand .hcard,body.shardDrop #hand .hcard{animation:none !important}
  .sh.colour .sym.on{transform:none}
}








.row{--trW:max(32px, calc(34 * var(--u)));--trH:max(45px, calc(48 * var(--u)))}
.row.hasTraps{padding-left:calc(var(--tn, 1) * var(--trW) + ((var(--tn, 1) - 1) * 4 + 14) * var(--u))}
.traps{position:absolute;left:calc(6 * var(--u));top:50%;transform:translateY(-50%);display:flex;gap:calc(4 * var(--u));z-index:3;align-items:center}






.traps{--trapRim:#7d8d93;--trapRimIn:#05080a;--trapMark:var(--gold);--trapMed:#0b1013f0}
.traps > .trap{position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;width:var(--trW);height:var(--trH);
  border-radius:calc(5 * var(--u));box-shadow:inset 0 0 0 1px var(--trapRimIn),0 2px 6px #000a;padding:0}
.traps > .trap.bk{background:radial-gradient(circle at 50% 50%,#06090bd9 0 calc(9 * var(--u)),#06090b59 calc(15 * var(--u)),transparent calc(22 * var(--u))),
  var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border:max(2px, calc(2 * var(--u))) solid var(--trapRim);cursor:pointer}
.traps > .trap.face{background:linear-gradient(#1b2427,#10171a);border:max(2px, calc(2 * var(--u))) solid var(--trapRim);cursor:pointer}
.traps > .trap .trGl{position:absolute;z-index:2;display:grid;place-items:center;border-radius:50%;background:var(--trapMed);
  border:1px solid var(--trapMark);color:var(--trapMark);box-shadow:0 1px 3px #000c;pointer-events:none}
.traps > .trap .trGl.mid{width:max(18px, calc(22 * var(--u)));height:max(18px, calc(22 * var(--u)));left:50%;top:50%;transform:translate(-50%,-50%)}
.traps > .trap .trGl.corner{width:max(14px, calc(15 * var(--u)));height:max(14px, calc(15 * var(--u)));right:calc(1 * var(--u));bottom:calc(1 * var(--u))}
.traps > .trap .trGl svg{width:72%;height:72%}


.zArt.zTrapArt,.bigCard.trapBig{background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px))}
.zTrapArt .trBack,.trapBig .trBack{position:absolute;inset:0;display:block;background:radial-gradient(circle at 50% 45%,#06090be6 0 18%,#06090b66 32%,transparent 48%)}
.zTrapArt .trGl,.trapBig .trGl{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:#0b1013f0;border:2px solid var(--gold);color:var(--gold);box-shadow:0 2px 8px #000c}
.zTrapArt .trGl svg,.trapBig .trGl svg{width:70%;height:70%}
.bigCard.trapBig{border:calc(3 * var(--u)) solid #7d8d93}
.bigCard.trapBig .band{position:absolute;left:0;right:0;bottom:0}
.traps > .trap.face img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.traps .km.trapMk{width:calc(18 * var(--u));height:calc(18 * var(--u));color:var(--parch)}
.km.trapMk{color:var(--parch)}
.traps > .trap.pickable{cursor:pointer;box-shadow:0 0 0 calc(3 * var(--u)) var(--pick),0 0 calc(14 * var(--u)) #7ec2f066}
.traps > .trap.fresh,.traps > .trap.sprung{animation:tokIn .45s ease-out}
.traps > .trap.sprung{box-shadow:0 0 0 calc(2 * var(--u)) var(--blood),0 0 calc(12 * var(--u)) #c0504488}



.tok .shd.open{opacity:.35;filter:grayscale(.8) drop-shadow(0 2px 3px #000c)}
.tok .kw.opn{position:absolute;left:50%;top:calc(12 * var(--tu));transform:translateX(-50%);z-index:6;white-space:nowrap;
  font:800 max(11px, calc(8.5 * var(--tu)))/1 var(--ui);letter-spacing:.06em;padding:2px calc(4 * var(--tu));border-radius:4px;
  background:#0d1720f0;border:1px solid #5b5330;color:var(--goldHi);cursor:help}
 
.opt.trapBack .tb{display:block;width:14px;height:20px;border-radius:3px;background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border:1px solid var(--bkFoeEdge, #6b3a31)}
.opt.side{max-width:calc(300 * var(--u));text-align:left}
.opt.side small{white-space:normal}
.opt.side.crown{border-color:var(--sig)}
.sh.trap,.sh.call,.sh.banner{padding:calc(7 * var(--u)) calc(10 * var(--u))}
.sh.trap h3,.sh.call h3,.sh.banner h3{display:inline;font-size:max(14px, calc(15 * var(--u)));margin-left:6px}
.sh.trap .opts,.sh.call .opts,.sh.banner .opts{margin-top:calc(6 * var(--u))}


.sh.call .opts{flex-wrap:nowrap}
.opt.callHalf{flex:1 1 0;min-width:0;gap:calc(5 * var(--u));padding:calc(6 * var(--u)) calc(10 * var(--u))}
.opt.callHalf > span{letter-spacing:.08em}
.opt.callHalf .callFaces{gap:calc(3 * var(--u));background:none}
.opt.callHalf .callFaces > i{flex:0 0 auto;width:max(22px, calc(24 * var(--u)));height:max(22px, calc(24 * var(--u)));border-radius:5px;
  background:var(--bone);color:var(--boneInk);font-size:max(13px, calc(14 * var(--u)));box-shadow:inset 0 0 0 1px #00000040}
.opt.callHalf .callFaces > i + i{box-shadow:inset 0 0 0 1px #00000040}
.sh .callPay{display:inline-block;margin-left:calc(10 * var(--u));font:700 max(12px, calc(13 * var(--u)))/1 var(--ui);color:var(--dim)}
.sh .callPay b{font-size:1.25em;color:var(--actInk)}
.sh .callPay b.cpW{color:var(--hurt)}







.vb{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100%}


.vbHang{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;max-width:100%}
.vbPole{position:relative;z-index:2;flex:none;align-self:stretch;min-width:calc(250 * var(--u));margin:0 calc(-20 * var(--u));height:calc(10 * var(--u));border-radius:99px;
  background:linear-gradient(180deg,#5d6f73,#2a3436);box-shadow:0 2px 4px #000a}
.vbPole::before,.vbPole::after{content:"";position:absolute;top:50%;width:calc(16 * var(--u));height:calc(16 * var(--u));border-radius:50%;
  background:var(--rim2);transform:translateY(-50%)}
.vbPole::before{left:calc(-8 * var(--u))}
.vbPole::after{right:calc(-8 * var(--u))}
.vbBan{position:relative;flex:none;box-sizing:border-box;min-width:calc(210 * var(--u));max-width:min(calc(460 * var(--u)), 86vw);
  min-height:calc(218 * var(--u));margin-top:calc(-2 * var(--u));padding:calc(24 * var(--u)) calc(22 * var(--u)) calc(44 * var(--u));
  transform-origin:top center;animation:vbUnfurl 900ms 100ms both cubic-bezier(.2,.8,.3,1)}
.vbCloth{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) #000c)}
.vbIn{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--u))}
.vbGlyph{flex:none;width:calc(64 * var(--u));height:calc(64 * var(--u));color:var(--goldHi);display:block;object-fit:contain;filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) #000a)}
.vb h1{margin:0;font:700 max(20px, calc(26 * var(--u)))/1.1 var(--title);letter-spacing:.16em;color:var(--parch);text-align:center;overflow-wrap:anywhere}
.vb.lost .vbBan{min-height:calc(232 * var(--u));transform:rotate(-1.5deg);animation-name:vbSag;animation-timing-function:cubic-bezier(.3,.7,.4,1)}
.vb.lost h1{color:#c9b8a6}
.vb.lost .vbGlyph{color:#8a7a6c}
.vb.still h1{color:var(--dim)}
.vb.still .vbGlyph{color:var(--rim2)}
.vb.settled .vbBan,.vb.settled .vbPips i.new{animation:none}
@keyframes vbUnfurl{0%{transform:scaleY(.04);opacity:.4}70%{transform:scaleY(1.03)}100%{transform:scaleY(1);opacity:1}}
@keyframes vbSag{0%{transform:scaleY(.04);opacity:.4}100%{transform:scaleY(1) rotate(-1.5deg);opacity:1}}
 
.vbPips{display:flex;align-items:center;gap:calc(4 * var(--u));margin-top:calc(2 * var(--u))}
.vbPips i{flex:none;width:max(10px, calc(13 * var(--u)));height:max(10px, calc(13 * var(--u)));border-radius:999px;border:1px solid var(--rim2);background:#0008}
.vbPips i.w{background:var(--gold);border-color:var(--goldHi)}
.vbPips i.l{background:var(--blood);border-color:var(--hurt)}
.vbPips.path i.at{outline:2px solid var(--parch);outline-offset:2px}
.vbPips i.new{animation:vbPop 700ms 600ms both cubic-bezier(.3,1.6,.5,1)}
.vbPips .sep{flex:none;width:calc(8 * var(--u))}
.vbPips b{font:700 max(15px, calc(20 * var(--u)))/1 var(--title);color:var(--num);margin-left:calc(8 * var(--u));letter-spacing:.04em}
@keyframes vbPop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
 
.vbFoe{position:relative;flex:none;width:max(44px, calc(58 * var(--u)));height:max(44px, calc(58 * var(--u)));border-radius:50%;overflow:hidden;
  display:grid;place-items:center;border:2px solid var(--rim);background:radial-gradient(circle at 40% 35%, #2b3438, #0b1013 75%)}
.vbFoe img{width:100%;height:100%;object-fit:cover;display:block}
.vbFoe b{font:700 max(18px, calc(24 * var(--u)))/1 var(--title);color:var(--dim)}
.vbFoe.beaten{filter:grayscale(1) brightness(.55)}
.vbFoe.beaten::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 47%,rgba(0,0,0,.9) 48%,rgba(255,107,90,.35) 49.5%,transparent 51%)}
.vbFoe.victor{border-color:var(--blood)}
.vbFoe.even{filter:saturate(.4) brightness(.8)}
 
.vbWho{display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--u));max-width:100%}
.vbName{font:700 max(12px, calc(13 * var(--u)))/1.15 var(--ui);color:var(--num);max-width:min(100%, calc(220 * var(--u)));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000c}
.vbName small{font-size:.82em;font-weight:600;color:var(--dim);margin-left:1px}



.vbPrize{position:relative;flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:max(132px, calc(150 * var(--u)));min-height:max(44px, calc(54 * var(--u)));padding:calc(4 * var(--u)) calc(14 * var(--u));
  border:1px dashed var(--rim2);border-radius:calc(10 * var(--u));background:#0006;color:var(--parch);cursor:pointer;font:inherit}
.vbPrize.done{border-style:solid;border-color:transparent;background:transparent;cursor:default}
.vbPrize:focus-visible{outline:2px solid var(--goldHi);outline-offset:2px}
.vbPzRow{display:flex;align-items:center;gap:calc(8 * var(--u));min-height:max(36px, calc(44 * var(--u)))}
.vbPz{flex:none;display:inline-flex;align-items:center;gap:calc(3 * var(--u));font:700 max(13px, calc(15 * var(--u)))/1 var(--ui);color:var(--num, var(--parch))}
.vbPz svg{width:max(16px, calc(18 * var(--u)));height:max(16px, calc(18 * var(--u)))}
.vbPz.dust svg{color:#9fc6d6}
.vbPz.gold svg{color:var(--gold)}
.vbPz.pack{width:max(30px, calc(34 * var(--u)));height:max(40px, calc(46 * var(--u)));justify-content:center;border-radius:calc(4 * var(--u));
  border:1px solid var(--gold);background:#151a1c;box-shadow:0 calc(3 * var(--u)) calc(8 * var(--u)) #000c;overflow:hidden;color:var(--gold)}
.vbPz.pack img{width:100%;height:100%;object-fit:cover;display:block}
.vbPz.new{animation:vbPop 420ms both cubic-bezier(.3,1.6,.5,1)}
.vbPz.pack.new{animation:vbPackHang 620ms both cubic-bezier(.25,.9,.3,1.1);transform-origin:50% -40%}
@keyframes vbPackHang{0%{opacity:0;transform:translateY(-70%) rotate(-5deg)}55%{opacity:1;transform:translateY(3%) rotate(2.2deg)}78%{transform:translateY(0) rotate(-.9deg)}100%{transform:none}}
.vbHeld{position:absolute;top:calc(-8 * var(--u));right:calc(-8 * var(--u));min-width:max(18px, calc(20 * var(--u)));height:max(18px, calc(20 * var(--u)));
  padding:0 calc(5 * var(--u));box-sizing:border-box;border-radius:999px;display:grid;place-items:center;
  font:800 max(11px, calc(12 * var(--u)))/1 var(--ui);color:#1a1206;background:var(--act);box-shadow:0 0 0 2px #000}
@media (prefers-reduced-motion:reduce){ .vbPz.new,.vbPz.pack.new{animation:none} }



.vbFirst{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:6px;margin-top:6px;padding:3px 14px;max-width:calc(100vw - 32px);
  white-space:nowrap;font:700 15px/22px var(--title);letter-spacing:.04em;color:#f4e3b5;background:#121619;border:1px solid #9a7a44;text-shadow:0 1px 0 #000;
  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)}
.vbFirst img{flex:none;width:20px;height:20px;display:block}
.vbFirst b{font-weight:700}
.vbFirst i{font-style:normal;color:#a89a7c;margin:0 2px}
.vbFirst + .vbActs{margin-top:max(6px, calc(18 * var(--u) - 6px))}


@media (max-height:600px){
  .vb:has(.rkRes) > .vbFirst{margin-top:2px;padding:2px 10px;font-size:13px;line-height:18px}
  .vb:has(.rkRes) > .vbFirst img{width:18px;height:18px}
  .vb:has(.rkRes) > .vbFirst + .vbActs{margin-top:max(4px, calc(18 * var(--u) - 14px))}
}
 
.vbEarn{flex:none;display:flex;justify-content:center;align-items:center;min-height:max(32px, calc(40 * var(--u)))}



@media (max-height:600px){
  .vbIn:has(> .rkRes + .vbEarn){display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;
    column-gap:calc(16 * var(--u));row-gap:calc(10 * var(--u))}
  .vbIn:has(> .rkRes + .vbEarn) > :not(.rkRes):not(.vbEarn){grid-column:1 / -1;justify-self:center}
  .vbIn:has(> .rkRes + .vbEarn) > .rkRes{margin:0}
}



.vbQs{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(6 * var(--u)) calc(8 * var(--u));max-width:calc(300 * var(--u))}
.vbQ{position:relative;flex:none;display:inline-flex;align-items:center;gap:calc(5 * var(--u));box-sizing:border-box;
  padding:calc(4 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u));background:linear-gradient(180deg,#232a2d,#13181a);color:var(--num, var(--parch));
  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);
  box-shadow:inset 0 0 0 1px var(--rim2);font:700 max(13px, calc(15 * var(--u)))/1 var(--ui);letter-spacing:.02em;white-space:nowrap}
.vbQ.done{background:linear-gradient(180deg,#3a2c12,#1d160a);box-shadow:inset 0 0 0 1px var(--gold);color:var(--goldHi)}
.vbQi{flex:none;width:max(18px, calc(20 * var(--u)));height:max(18px, calc(20 * var(--u)));display:block;object-fit:contain;color:var(--gold)}
.vbQi svg{width:100%;height:100%}
.vbQn i{font-style:normal;margin:0 .2em;color:var(--dim)}
.vbQg{display:inline-flex;align-items:center;gap:calc(2 * var(--u));margin-left:calc(2 * var(--u));color:var(--goldHi)}
.vbQg svg{width:max(14px, calc(16 * var(--u)));height:max(14px, calc(16 * var(--u)));color:var(--gold)}
.vbQbar{position:absolute;left:calc(9 * var(--u));right:calc(9 * var(--u));bottom:calc(3 * var(--u));height:2px;background:#0009}
.vbQbar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--to) * 100%);background:var(--gold);animation:vbQfill 900ms 700ms both cubic-bezier(.2,.8,.3,1)}
@keyframes vbQfill{0%{width:calc(var(--from) * 100%)}100%{width:calc(var(--to) * 100%)}}
.vb.settled .vbQbar i{animation:none}
@media (prefers-reduced-motion:reduce){ .vbQbar i{animation:none} }
@media (max-height:600px){ .vbQs{max-width:calc(380 * var(--u))} }
 
.vbActs{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));margin-top:calc(18 * var(--u))}
.vbActs .opt.pri{flex-direction:row;gap:calc(8 * var(--u));text-decoration:none;white-space:nowrap}
#result .vbActs .opt.pri,.coachScreen .vbActs .opt.pri,.coachScreen .opt.pri[data-coach="play"]{min-height:max(44px, calc(46 * var(--u)));padding:0 calc(28 * var(--u));font:700 max(14px, calc(16 * var(--u)))/1 var(--ui);
  letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(180deg,#1b2124,#101517)}
.vbGo{flex:none;width:max(12px, calc(14 * var(--u)));height:max(12px, calc(14 * var(--u)))}
.vbGap{flex:none;width:calc(14 * var(--u))}
 
.vbIco{flex:none;box-sizing:border-box;width:max(48px, calc(48 * var(--u)));height:max(48px, calc(48 * var(--u)));padding:0;border-radius:calc(10 * var(--u));
  display:grid;place-items:center;background:rgba(19,26,29,.85);border:1px solid var(--edge2);color:var(--dim);cursor:pointer;text-decoration:none}
.vbIco:hover,.vbIco:focus-visible{color:var(--ink);border-color:var(--rim2)}
.vbIco svg{width:max(18px, calc(20 * var(--u)));height:max(18px, calc(20 * var(--u)))}


.vbIco[data-cap]{grid-template-rows:auto auto;align-content:center;row-gap:max(2px, calc(2 * var(--u)))}
.vbIco[data-cap]::after{content:attr(data-cap);font:700 max(11px, calc(10 * var(--u)))/1 var(--ui);letter-spacing:.06em;white-space:nowrap}
 
.coachScreen .vb h1{font-size:max(17px, calc(20 * var(--u)));letter-spacing:.06em}
 
.coachScreen .vbActs .opt:not(.pri){min-height:max(44px, calc(46 * var(--u)));color:var(--dim);border-color:var(--edge2);background:rgba(19,26,29,.85)}




 
.arw.hold path{stroke:var(--strike);filter:drop-shadow(0 0 6px #e8654faa)}
.arw.hold .head{fill:var(--strike);filter:drop-shadow(0 0 8px #e8654f)}
 
.fxHoldNum{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.fxHoldNum .dpop{top:calc(-34 * var(--u))}
 
.dpop.held{animation:none;opacity:1}
 
body.strikeReact #hand .hcard:not(.playable):not(.lifted){filter:brightness(.5) saturate(.7)}


.endTurn.passMode{background:#1a2327;color:var(--ink);border-color:var(--rim2);letter-spacing:.08em;overflow:hidden;
  box-shadow:0 0 0 1px #cfe3ea33,0 calc(4 * var(--u)) calc(10 * var(--u)) #000a}
.passBar{position:absolute;left:0;bottom:0;width:100%;height:max(3px, calc(3 * var(--u)));background:var(--rune);
  transform-origin:0 50%;transform:scaleX(var(--from, 1));animation:passDrain var(--left, 0ms) linear forwards;pointer-events:none}
@keyframes passDrain{from{transform:scaleX(var(--from, 1))}to{transform:scaleX(0)}}
 
.strikeCard{position:fixed;left:50%;top:calc(6 * var(--u));transform:translateX(-50%);z-index:33}
.strikeCard[hidden]{display:none}
.strikeCard .hcard{position:relative;left:auto;bottom:auto;transform:none;--cw:calc(84 * var(--u));--ch:calc(118 * var(--u));
  border-color:var(--strike);box-shadow:0 0 0 1px #e8654f88,0 0 calc(16 * var(--u)) #e8654f66,0 calc(6 * var(--u)) calc(16 * var(--u)) #000c}







.tideMark{position:absolute;right:calc(-3 * var(--u));top:calc(8 * var(--u));bottom:calc(8 * var(--u));width:max(5px, calc(6 * var(--u)));
  border-radius:calc(3 * var(--u));background:#0a1517;box-shadow:inset 0 0 0 1px #3aa6a040,0 0 0 1px #000;z-index:3;pointer-events:none}
.tideMark .water{position:absolute;left:0;right:0;bottom:0;border-radius:inherit;transform-origin:50% 100%;
  background:linear-gradient(180deg,#9bece5 0%,#3aa6a0 22%,#1d5f62 100%);box-shadow:0 0 calc(8 * var(--u)) #3aa6a088;
  transition:height .6s cubic-bezier(.2,.8,.2,1)}
.tideMark .water::before{content:"";position:absolute;left:calc(-3 * var(--u));right:calc(-3 * var(--u));top:-1px;height:2px;border-radius:1px;
  background:#c8faf5;box-shadow:0 0 calc(6 * var(--u)) #7fe3dc}
.tideMark s{position:absolute;left:1px;right:1px;height:1px;background:#ffffff30;text-decoration:none}
.tideMark b{position:absolute;left:calc(-4 * var(--u));right:calc(-4 * var(--u));height:max(3px, calc(3 * var(--u)));margin-bottom:calc(-1.5 * var(--u));
  border-radius:2px;background:#16302f;border:1px solid #5fd6cf80}
.tideMark b.fired{background:#5fd6cf;border-color:#c8faf5;box-shadow:0 0 calc(8 * var(--u)) #5fd6cf}
.tideMark.flood .water{animation:tideSwell 2.4s ease-in-out infinite alternate}
@keyframes tideSwell{to{filter:brightness(1.4) saturate(1.2)}}
.fxWave{position:absolute;left:0;right:0;bottom:0;height:36%;opacity:0;pointer-events:none;
  background:linear-gradient(0deg,#3aa6a070 0%,#3aa6a026 55%,#3aa6a000 100%);border-top:2px solid #7fe3dc66}

.objMark{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(4 * var(--u));row-gap:calc(3 * var(--u));margin-bottom:calc(7 * var(--u));max-width:calc(112 * var(--u))}


.objMark[data-tip],.bossDie[data-tip]{cursor:help}
.tideMark[data-tip]{pointer-events:auto;cursor:help}



.tideMark[data-tip] > *{pointer-events:none}
.leader.foe .objMark{margin:calc(6 * var(--u)) 0 0}
.objMark .oi{width:max(16px, calc(18 * var(--u)));height:max(16px, calc(18 * var(--u)));flex:none;color:var(--parch);filter:drop-shadow(0 1px 2px #000)}
.objMark .oi svg{width:100%;height:100%;display:block}
.objMark .ops{display:flex;flex-wrap:wrap;align-items:center;gap:calc(2 * var(--u));max-width:calc(90 * var(--u))}
.objMark .ops i{display:block;width:calc(7 * var(--u));height:calc(10 * var(--u));border-radius:2px;border:1.5px solid #5d6f73;background:#080d0f}
.objMark.k-board .ops i{width:calc(10 * var(--u));height:calc(13 * var(--u));border-radius:calc(2.5 * var(--u));border-style:dashed}
.objMark.k-board .ops i.on{border-style:solid;border-color:var(--goldHi);background:linear-gradient(#dcb46e,#8a6a34)}
.objMark.k-torch .ops i{width:max(3px, calc(3.5 * var(--u)));height:calc(13 * var(--u));border-radius:1px;border-width:1px}
.objMark.k-torch .ops i.on{border-color:#ffd27a;background:linear-gradient(#ffd27a,#e0a24c);box-shadow:0 0 calc(5 * var(--u)) #ffbf4799}
.objMark.k-shards .ops i{width:calc(7 * var(--u));height:calc(10 * var(--u));border:0;background:#2a3437;
  clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%)}
.objMark.k-shards .ops i.on{background:var(--gold)}
.objMark.k-shards .ops i:last-child{background:#4a3c1c}
.objMark.k-shards .ops i:last-child.on{background:var(--goldHi)}
.objMark.met .ops i.on{background:var(--goldHi);box-shadow:0 0 calc(6 * var(--u)) #edc65c}
.objMark .oby{flex-basis:100%;display:flex;gap:calc(2 * var(--u));padding-left:calc(22 * var(--u))}
.objMark .oby i{display:block;width:calc(7 * var(--u));height:2px;border-radius:1px;background:#93a29d}
.objMark .oby i.gone{background:#2a3437}


 
.objMark.hasCnt{position:relative;z-index:5}
.objMark .ocnt{position:absolute;left:calc(100% + 6px);top:-1px;padding:0 6px;font:700 max(13px, calc(15 * var(--u)))/1.4 var(--ui);color:#f4e3b5;
  background:#121619;border:1px solid #9a7a44;text-shadow:0 1px 0 #000;white-space:nowrap;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}



.objMark.inLane{position:absolute;z-index:4;margin:0;padding:calc(2 * var(--u)) calc(5 * var(--u));box-sizing:content-box}
.objMark.inLane::before{content:"";position:absolute;inset:0;z-index:-1;background:#0b1013e6;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}

.bossDie{display:flex;gap:calc(2 * var(--u));margin-top:calc(6 * var(--u));padding:calc(2 * var(--u)) calc(3 * var(--u));border-radius:calc(5 * var(--u));
  --mat:var(--rim2);--matBg:#0b1013;border:1.5px solid var(--mat);background:linear-gradient(180deg,var(--matBg),#080d0f);box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) #000a}
.bossDie .bf{width:calc(14 * var(--u));height:calc(14 * var(--u));display:grid;place-items:center;border-radius:calc(3 * var(--u));background:#080d0fcc;color:var(--parch)}
.bossDie .bf svg{width:80%;height:80%;display:block}
.bossDie .bf.crown{color:var(--sig);background:var(--crownbg);box-shadow:inset 0 0 0 1px #edc65c88}
.bossDie .bf.rolled{box-shadow:inset 0 0 0 1.5px #f4efe2,0 0 calc(6 * var(--u)) #f4efe266}
.bossDie.m-choir{--mat:#b89a5a;--matBg:#2a2212}
.bossDie.m-fen{--mat:#6f6040;--matBg:#1a1a0f}
.bossDie.m-cantor{--mat:#c08a44;--matBg:#2a1c0c}
.bossDie.m-oath{--mat:#8a9aa6;--matBg:#141a1e}


.ghostDie{display:inline-grid;place-items:center;width:calc(18 * var(--u));height:calc(18 * var(--u));margin-top:calc(6 * var(--u));
  border-radius:calc(4 * var(--u));border:1.5px dashed #c9d6e0aa;background:#c9d6e01a;color:#dfe9f0;opacity:.85;cursor:help;
  box-shadow:0 0 calc(8 * var(--u)) #9fc3dd55}
.ghostDie svg{width:78%;height:78%;display:block}
.ghostDie.crown{color:var(--sig);border-color:#edc65caa}
.houseStones{display:flex;flex-wrap:wrap;align-items:center;gap:calc(2 * var(--u));max-width:calc(112 * var(--u));margin-bottom:calc(6 * var(--u));cursor:help}
.houseStones i{width:calc(9 * var(--u));height:calc(7 * var(--u));border-radius:50% 46% 52% 44%;background:radial-gradient(circle at 35% 30%,#b7b1a3,#5e5a52 70%);
  box-shadow:0 1px 2px #000c}
.houseStones b{font:700 max(11px,calc(10 * var(--u)))/1 var(--ui);color:var(--parch)}

.hpBar{position:relative}
.hpBar .p2at{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff8a5a;box-shadow:0 0 4px #ff6b3a}
.leader.p2 .portrait{border-color:#ff6b3a;box-shadow:0 0 0 2px #ff6b3a99,0 0 calc(16 * var(--u)) #ff6b3a77,0 calc(4 * var(--u)) calc(12 * var(--u)) #000a}
.fxPulse{position:absolute;inset:0;opacity:0;pointer-events:none}
.fxPulse.p2{background:radial-gradient(120% 90% at 50% 50%,#0000 42%,#ff6b3a55 74%,#c05044b0 100%)}
.fxBust{position:absolute;left:50%;top:44%;width:calc(150 * var(--u));height:calc(150 * var(--u));border-radius:50%;padding:calc(3 * var(--u));
  background:radial-gradient(circle,#ff8a5a,#7c2f28);box-shadow:0 0 calc(40 * var(--u)) #ff6b3a88,0 calc(6 * var(--u)) calc(20 * var(--u)) #000c;transform:translate(-50%,-50%)}
.fxBust .bz{display:block;width:100%;height:100%;border-radius:50%;background-color:#0b1013;background-repeat:no-repeat}





.showcase{position:fixed;left:0;top:0;z-index:43;pointer-events:none;display:none;--uS:var(--u);
  width:calc(150 * var(--u));height:calc(210 * var(--u))}
.showcase.on{display:block}
.showcase .scCard,.scFly .scCard{--u:calc(var(--uS) * 1.63);position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%;transform:none;transition:none;cursor:default;
  border-color:#c05044aa;box-shadow:0 0 0 1px #c0504466,0 calc(10 * var(--uS)) calc(28 * var(--uS)) #000d,0 0 calc(22 * var(--uS)) #c0504433}
.showcase .scCard{animation:scRise .22s cubic-bezier(.2,.8,.2,1) both}



.showcase .scRule{position:absolute;left:calc(-10 * var(--uS));right:calc(-10 * var(--uS));top:calc(100% + 6 * var(--uS));box-sizing:border-box;
  padding:calc(6 * var(--uS)) calc(8 * var(--uS));border-radius:calc(8 * var(--uS));background:#080d0ff2;border:1px solid #c0504488;
  box-shadow:0 calc(6 * var(--uS)) calc(18 * var(--uS)) #000c;font:600 max(12px, calc(11 * var(--uS)))/1.3 var(--ui);color:#e4e9e6;text-align:left;
  animation:scRise .22s cubic-bezier(.2,.8,.2,1) both}
.showcase .scRule p{margin:0}
.showcase .scRule p + p{margin-top:calc(4 * var(--uS))}
.scFly .scRule{display:none}
.scCard.scBack{border-radius:calc(9 * var(--uS) * 1.63);background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 5px,#1d100e 5px 11px));border:1px solid var(--bkFoeEdge, #6b3a31)}
@keyframes scRise{from{opacity:0;transform:translateY(-34%) scale(.45)}to{opacity:1;transform:none}}
 
.scFly{position:fixed;left:0;top:0;z-index:43;pointer-events:none;transform-origin:0 0;--uS:var(--u)}
 
.sheetWrap.center.staged{left:var(--stCx, 50%);width:var(--stW, min(calc(560 * var(--u)), 70vw))}




.pileRow{--pW:calc(28 * var(--u));--pH:calc(40 * var(--u));display:flex;align-items:flex-end;gap:calc(14 * var(--u));margin-top:calc(7 * var(--u))}
.leader.you .pileRow{margin:0 0 calc(7 * var(--u))}
.pile{position:relative;flex:none;width:var(--pW);height:var(--pH);padding:0;border:0;background:none;color:inherit;pointer-events:none}
.pile i{position:absolute;inset:0;border-radius:calc(4 * var(--u));pointer-events:none;
  background:var(--bkFoe, repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px));border:1px solid var(--bkFoeEdge, #6b3a31);box-shadow:0 1px 3px #000a}
.pile i:nth-child(1){transform:translate(calc(-4 * var(--u)),calc(3 * var(--u))) rotate(-7deg)}
.pile i:nth-child(2){transform:translate(calc(-2 * var(--u)),calc(1.5 * var(--u))) rotate(-3deg)}
.pile.you i{background:var(--bkYou, repeating-linear-gradient(45deg,#14261b 0 3px,#0d1a12 3px 7px));border-color:var(--bkYouEdge, #2d6b46)}
.pile.empty i{opacity:.4;border-style:dashed}
.pile.empty i:nth-child(1),.pile.empty i:nth-child(2){display:none}
.pileN,.deckN{position:absolute;right:calc(-9 * var(--u));bottom:calc(-6 * var(--u));min-width:max(18px, calc(18 * var(--u)));height:max(18px, calc(18 * var(--u)));z-index:1;
  padding:0 3px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;pointer-events:none;background:#080d0fe6;border:1px solid var(--edge2);
  font:800 max(11px, calc(11 * var(--u)))/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.pile.empty .deckN,.fallen.empty .pileN{color:var(--dim)}
.fallen{position:relative;flex:none;width:var(--pW);height:var(--pH);padding:0;border:0;background:none;cursor:pointer;color:inherit}
.fallen::before{content:"";position:absolute;left:50%;top:50%;width:max(44px, 100%);height:max(44px, 100%);transform:translate(-50%,-50%)}
.fallen .fFace{position:absolute;inset:0;border-radius:calc(4 * var(--u));overflow:hidden;pointer-events:none;
  background:linear-gradient(#1b2427,#10171a);border:1px solid #ffffff59;box-shadow:0 2px 6px #000b}
.fallen .fFace img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:grayscale(.55) brightness(.8)}
.fallen .fName{position:absolute;inset:0;display:grid;place-items:center;text-align:center;overflow:hidden;
  font:700 max(13px, calc(16 * var(--u)))/1 var(--title);color:var(--parch)}
.fallen.empty .fFace{opacity:.4;border-style:dashed;box-shadow:none}
.fallen .fLab{position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;font:700 max(11px, calc(7.6 * var(--u)))/1.45 var(--ui);font-style:normal;letter-spacing:.03em;white-space:nowrap;overflow:hidden;
  color:#dde3e0;background:#000000b3;text-align:center;border-radius:calc(4 * var(--u)) calc(4 * var(--u)) 0 0}
.fallen.pulse{animation:pilePulse .45s ease-out}
@keyframes pilePulse{0%{transform:scale(1)}35%{transform:scale(1.25);filter:brightness(1.5)}100%{transform:scale(1)}}
.fallen:focus-visible{outline:2px solid var(--pick);outline-offset:3px}
 
@media (max-height:500px){.fallen .fLab{display:none}}



@media (max-height:360px){.pileRow{margin-top:calc(3 * var(--u))}.leader.you .pileRow{margin:0 0 calc(5 * var(--u))}}






@media (max-height:360px){.leader.foe{top:calc(4 * var(--u))}.leader.foe .pileRow{margin-top:calc(2 * var(--u))}
  .leader.foe .pileN,.leader.foe .deckN{bottom:calc(-2 * var(--u))}.leader.you .ldName{margin-bottom:calc(3 * var(--u))}
  .leader.foe .miniGems{margin-top:calc(3 * var(--u))}}






@media (max-height:500px){.miniGems .gem,.miniGems span:not(.gem){margin-left:0}}


@media (max-height:400px){body:has(.leader.foe .miniGems > :nth-child(14)) .pileRow{--pW:calc(21 * var(--u));--pH:calc(30 * var(--u))}}


@media (min-height:501px) and (max-aspect-ratio:21/10){.pileRow{--pW:calc(37 * var(--u));--pH:calc(52 * var(--u))}}
 
.info.graveBox{width:min(calc(700 * var(--u)), 92vw);max-height:calc(100vh - 24 * var(--u));display:flex;flex-direction:column;--uS:var(--u)}
.gCols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(14 * var(--u));min-height:0}
.gSide{min-width:0;display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.gSide + .gSide{border-left:1px solid var(--edge);padding-left:calc(14 * var(--u))}
.gMark{display:block;width:calc(26 * var(--u));height:calc(4 * var(--u));border-radius:2px;background:#c05044}
.gSide.you .gMark{background:#69b385}
.gStrip{display:flex;gap:calc(8 * var(--u));overflow-x:auto;overflow-y:hidden;min-height:calc(104 * var(--u));padding-bottom:4px;scrollbar-width:thin}
.gThumb{flex:0 0 auto;position:relative;width:calc(74 * var(--u));height:calc(104 * var(--u));cursor:pointer;border-radius:calc(7 * var(--u))}
.gThumb .gCard{--u:calc(var(--uS) * .8043);position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%;transform:none;transition:none}
.gThumb.used .gCard{opacity:.5;filter:saturate(.45) brightness(.85)}
.gThumb:focus-visible{outline:2px solid var(--pick);outline-offset:2px}
.gNone{flex:0 0 auto;width:calc(74 * var(--u));height:calc(104 * var(--u));border:1px dashed #ffffff1f;border-radius:calc(7 * var(--u))}
@media (prefers-reduced-motion:reduce){
  .showcase .scCard,.showcase .scRule,.fallen.pulse{animation:none}
}






.hcard.cf .foot{height:max(18px, calc(18 * var(--u)))}
.hcard.cf .foot.sfoot{height:max(18px, calc(18 * var(--u)));min-height:0}
.hcard.cf .foot .hcHp,.hcard.cf .foot .hcDie{font-size:max(10px, calc(8.5 * var(--u)))}
.hcard.cf .foot .hcHp{width:max(16px, calc(15 * var(--u)));height:max(16px, calc(15 * var(--u)))}
.hcard.cf .foot .hcDie{padding-top:calc(1.5 * var(--u));padding-bottom:calc(1.5 * var(--u))}
.hcard.cf .pips.cost .pip{width:max(12px, calc(12 * var(--u)));height:max(12px, calc(12 * var(--u)))}
.hcard.cf .pips.cost .pip.any{font-size:max(10px, calc(8.5 * var(--u)))}
.hcard.cf .km{width:max(11px, calc(11 * var(--u)));height:max(11px, calc(11 * var(--u)))}























@property --tu{syntax:'<length>';inherits:true;initial-value:1px}
.rMark{--tu:var(--u);flex:1 1 0;min-width:0;align-self:stretch;container:rmark / inline-size;position:relative;box-sizing:border-box;
  margin:0;padding:0 2px;display:flex;align-items:center;justify-content:center;line-height:0;pointer-events:none}
.rMark .rPi{flex:0 1 auto;width:max(9px, calc(9 * var(--tu)));min-width:9px;height:auto;aspect-ratio:1;display:block;overflow:visible}
@container rmark (width < 9px){
  .rMark .rPi{position:absolute;left:50%;top:0;transform:translate(-50%, -80%)}
  .rMark .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
  .rMark.k-legendary .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #ffbf47cc)}
}
.hcard .foot .rMark ~ .hcHp{margin-left:0}






.hcard .foot > .rMark{padding:0;margin:0 -0.5px}
@container rmark (width < 12px){
  .hcard .foot > .rMark .rPi{position:absolute;left:50%;top:0;transform:translate(-50%, -80%)}
  .hcard .foot > .rMark .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
  .hcard .foot > .rMark.k-legendary .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #ffbf47cc)}
}
.zFace .zStrip .rMark{--tu:calc(1.3 * var(--u))}
.zFace .zStrip .rMark ~ .shd,.zFace .zStrip .rMark ~ .hcHp{margin-left:0}


.zFace .zStrip .rMark.bw{padding-left:calc(2px + max(16px, calc(17 * var(--u))) + calc(4 * var(--u)))}




.hcKind.wm{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;align-self:stretch;column-gap:0;
  --kg:max(3px, calc(4 * var(--u)))}
.hcard .hcKind.wm{--kg:max(2px, calc(3 * var(--u)))}
.dbGrid.sz-s .hcard .hcKind.wm{--kg:2px}



.hcKind.wm > .km{justify-self:end;margin-right:var(--kg)}
.hcKind.wm > .hcType{grid-column:2}
.hcKind.wm > .rMark{grid-column:3;justify-self:stretch;margin:0;padding:0 max(0px, calc(2px - max(1px, calc(1.5 * var(--u))))) 0 var(--kg);
  justify-content:flex-start}
 
@container rmark (width < 9px){
  .hcKind.wm > .rMark .rPi{left:auto;right:100%;top:auto;bottom:100%;transform:none}
  .hcKind.wm > .rMark .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
  .hcKind.wm > .rMark.k-legendary .rPi{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #ffbf47cc)}
}


.dbGrid.sz-s .hcard .hcKind{gap:2px}


.dbGrid.sz-s .hcard .hcKind .hcType{letter-spacing:0}
.rMark.k-common{color:#aab5b1}
.rMark.k-uncommon{color:#7ccf6a}   
.rMark.k-rare{color:#7fb2e5}
.rMark.k-epic{color:#b37fe5}
.rMark.k-legendary{color:#ffbf47}
.rMark.k-legendary .rPi{filter:drop-shadow(0 0 1.5px #ffbf47cc)}






.rMark .rPi{background-position:center;background-repeat:no-repeat;background-size:80% auto;background-image:var(--rpS)}
.rMark.k-common{--rpS:image-set(url("/v6/art/rarity/common-20.webp") 1x,url("/v6/art/rarity/common-40.webp") 2x,url("/v6/art/rarity/common-60.webp") 3x);
  --rpL:image-set(url("/v6/art/rarity/common-40.webp") 1x,url("/v6/art/rarity/common-80.webp") 2x,url("/v6/art/rarity/common-120.webp") 3x)}
.rMark.k-uncommon{--rpS:image-set(url("/v6/art/rarity/uncommon-20.webp") 1x,url("/v6/art/rarity/uncommon-40.webp") 2x,url("/v6/art/rarity/uncommon-60.webp") 3x);
  --rpL:image-set(url("/v6/art/rarity/uncommon-40.webp") 1x,url("/v6/art/rarity/uncommon-80.webp") 2x,url("/v6/art/rarity/uncommon-120.webp") 3x)}
.rMark.k-rare{--rpS:image-set(url("/v6/art/rarity/rare-20.webp") 1x,url("/v6/art/rarity/rare-40.webp") 2x,url("/v6/art/rarity/rare-60.webp") 3x);
  --rpL:image-set(url("/v6/art/rarity/rare-40.webp") 1x,url("/v6/art/rarity/rare-80.webp") 2x,url("/v6/art/rarity/rare-120.webp") 3x)}
.rMark.k-epic{--rpS:image-set(url("/v6/art/rarity/epic-20.webp") 1x,url("/v6/art/rarity/epic-40.webp") 2x,url("/v6/art/rarity/epic-60.webp") 3x);
  --rpL:image-set(url("/v6/art/rarity/epic-40.webp") 1x,url("/v6/art/rarity/epic-80.webp") 2x,url("/v6/art/rarity/epic-120.webp") 3x)}
.rMark.k-legendary{--rpS:image-set(url("/v6/art/rarity/legendary-20.webp") 1x,url("/v6/art/rarity/legendary-40.webp") 2x,url("/v6/art/rarity/legendary-60.webp") 3x);
  --rpL:image-set(url("/v6/art/rarity/legendary-40.webp") 1x,url("/v6/art/rarity/legendary-80.webp") 2x,url("/v6/art/rarity/legendary-120.webp") 3x)}
.bigCard .rMark.onArt .rPi,.zArt > .rMark.onArt .rPi{background-image:var(--rpL)}
@media (min-width:1100px){.rMark .rPi{background-image:var(--rpL)}}
.bigCard .rMark.onArt{--tu:calc(2 * var(--u));container-type:normal;position:absolute;z-index:3;left:50%;bottom:calc(31 * var(--u));transform:translate(-50%, 50%);
  margin:0;padding:calc(5 * var(--u));border-radius:50%;background:#080d0fd9;border:1px solid #ffffff22}
 
#hand .hcard:not(.lifted) .rMark{display:none}









:root{
  --cbSealBronze:url("/v6/art/backs/founders-seal-300x420.webp") 50% 50%/cover no-repeat,#1a110a;
  --cbSealGold:url("/v6/art/backs/founders-seal-gilded-300x420.webp") 50% 50%/cover no-repeat,#17120a;
}




:root{
  --cbIron:url("/v6/art/backs/iron-ward-300x420.webp") 50% 50%/cover no-repeat,#1a1f21;
  --cbWeaveFoe:repeating-linear-gradient(45deg,#2a1714 0 3px,#1d100e 3px 7px);
  --cbWeaveYou:repeating-linear-gradient(45deg,#14261b 0 3px,#0d1a12 3px 7px);
  --bkFoe:var(--cbIron);--bkYou:var(--cbIron);
}
body[data-bk-foe="iron_ward"]{--bkFoe:var(--cbIron)}
body[data-bk-you="iron_ward"]{--bkYou:var(--cbIron)}
body[data-bk-foe="weave"]{--bkFoe:var(--cbWeaveFoe)}
body[data-bk-you="weave"]{--bkYou:var(--cbWeaveYou)}
body[data-bk-foe="seal_bronze"]{--bkFoe:var(--cbSealBronze);--bkFoeEdge:#b07a3c}
body[data-bk-you="seal_bronze"]{--bkYou:var(--cbSealBronze);--bkYouEdge:#b07a3c}
body[data-bk-foe="seal_gold"]{--bkFoe:var(--cbSealGold);--bkFoeEdge:#f1d79c}
body[data-bk-you="seal_gold"]{--bkYou:var(--cbSealGold);--bkYouEdge:#f1d79c}
body[data-bk-foe="painting"]{--bkFoe:linear-gradient(#0000 45%,#000b),var(--bkFoeArt, none) 50% 22%/cover no-repeat,#16110c;--bkFoeEdge:#8a6a33}
body[data-bk-you="painting"]{--bkYou:linear-gradient(#0000 45%,#000b),var(--bkYouArt, none) 50% 22%/cover no-repeat,#16110c;--bkYouEdge:#8a6a33}




:root{
  --cbFord:radial-gradient(circle closest-side at 50% 50%,#0000 0 66%,#9a6f3a 67% 71%,#0000 72%),
    radial-gradient(ellipse 13% 8% at 38% 64%,#5d6461 0 60%,#0000 64%),radial-gradient(ellipse 12% 7% at 52% 50%,#69706c 0 60%,#0000 64%),
    radial-gradient(ellipse 11% 7% at 63% 36%,#5d6461 0 60%,#0000 64%),
    repeating-linear-gradient(170deg,#0000 0 9px,#9fc0c414 9px 10px),linear-gradient(#123033,#0a1b1d 70%,#071214);
  --cbLantern:repeating-linear-gradient(97deg,#0000 0 5px,#0b0806d9 5px 7px,#0000 7px 12px),
    repeating-linear-gradient(84deg,#0000 0 9px,#0d0a07e6 9px 10px,#0000 10px 17px),
    radial-gradient(ellipse 46% 38% at 50% 78%,#d9772b99,#7a3a1433 55%,#0000 72%),linear-gradient(#141210,#1d1712 70%,#2a1b10);
}
body[data-bk-foe="ford"]{--bkFoe:var(--cbFord);--bkFoeEdge:#9a6f3a}
body[data-bk-you="ford"]{--bkYou:var(--cbFord);--bkYouEdge:#9a6f3a}
body[data-bk-foe="lantern"]{--bkFoe:var(--cbLantern);--bkFoeEdge:#8a5a2c}
body[data-bk-you="lantern"]{--bkYou:var(--cbLantern);--bkYouEdge:#8a5a2c}




:root{
  --cbFoilWeave:linear-gradient(118deg,#0000 34%,#e9f1f31a 46%,#0000 58%),
    repeating-linear-gradient(45deg,#b9c6ca4d 0 2px,#0000 2px 6px),repeating-linear-gradient(-45deg,#b9c6ca33 0 2px,#0000 2px 6px),
    linear-gradient(160deg,#2b383d,#151d20 60%,#212d31);
}
body[data-bk-foe="image"]{--bkFoe:var(--bkFoeArt, none) 50% 50%/cover no-repeat,#16110c;--bkFoeEdge:#c9a052}
body[data-bk-you="image"]{--bkYou:var(--bkYouArt, none) 50% 50%/cover no-repeat,#16110c;--bkYouEdge:#c9a052}
body[data-bk-foe="foil_weave"]{--bkFoe:var(--cbFoilWeave);--bkFoeEdge:#a9b8bd}
body[data-bk-you="foil_weave"]{--bkYou:var(--cbFoilWeave);--bkYouEdge:#a9b8bd}









body[data-ds-you="bog_iron"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]),
body[data-ds-foe="bog_iron"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"], #strikeCard){
  --bone:radial-gradient(circle at 18% 70%,#8a4b2333 0 9%,#0000 10%),radial-gradient(circle at 71% 38%,#8a4b2329 0 7%,#0000 8%),
    linear-gradient(#4a4f4f,#34393a 55%,#2a2e2f);--boneInk:#efe6d2;--boneRx:#bfe0ea}
body[data-ds-you="ember_glass"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]),
body[data-ds-foe="ember_glass"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"], #strikeCard){
  --bone:radial-gradient(ellipse 70% 120% at 50% 110%,#ff9a4a 0,#0000 60%),linear-gradient(#9b2f12,#6e1d0a 60%,#4e1406);
  --boneInk:#fff4e2;--boneRx:#cfe9f1}
 
body[data-ds-you="bog_iron"] :is(#rowYou, #hand) .fz.bone > i + i,body[data-ds-foe="bog_iron"] #rowFoe .fz.bone > i + i,
body[data-ds-you="ember_glass"] :is(#rowYou, #hand) .fz.bone > i + i,body[data-ds-foe="ember_glass"] #rowFoe .fz.bone > i + i{box-shadow:inset 1px 0 0 #ffffff1f}
body[data-ds-you="ember_glass"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]) .fz.bone > i,
body[data-ds-foe="ember_glass"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"]) .fz.bone > i{text-shadow:0 0 4px #ffb36b99}



body[data-ds-you="pewter"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]),
body[data-ds-foe="pewter"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"], #strikeCard){
  --bone:linear-gradient(#a9b0b2,#8c9497 55%,#737b7e);--boneInk:#121617;--boneRx:#16384a}
body[data-ds-you="bloodstone"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]),
body[data-ds-foe="bloodstone"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"], #strikeCard){
  --bone:radial-gradient(circle at 12% 78%,#a3261f 0 5%,#0000 6%),radial-gradient(circle at 88% 22%,#a3261f 0 4%,#0000 5%),
    radial-gradient(circle at 92% 84%,#8a1d18 0 3%,#0000 4%),linear-gradient(#24443a,#17302a 55%,#0f221d);
  --boneInk:#efe6d2;--boneRx:#bfe0ea}
body[data-ds-you="last_ember"] :is(#rowYou, #hand, #showcase[data-seat="you"], #zoom[data-seat="you"]),
body[data-ds-foe="last_ember"] :is(#rowFoe, #showcase[data-seat="foe"], #zoom[data-seat="foe"], #strikeCard){
  --bone:radial-gradient(ellipse 60% 90% at 50% 125%,#c8662299 0,#0000 62%),linear-gradient(#2b2623,#1d1917 60%,#151210);
  --boneInk:#fff1dc;--boneRx:#cfe9f1}
body[data-ds-you="bloodstone"] :is(#rowYou, #hand) .fz.bone > i + i,body[data-ds-foe="bloodstone"] #rowFoe .fz.bone > i + i,
body[data-ds-you="last_ember"] :is(#rowYou, #hand) .fz.bone > i + i,body[data-ds-foe="last_ember"] #rowFoe .fz.bone > i + i{box-shadow:inset 1px 0 0 #ffffff1f}


body[data-ds-you] .bone.sfoot,body[data-ds-foe] .bone.sfoot{--bone:#e9dfc6;--boneInk:#2a2219;--boneRx:#1f4250}






:root{--foilEdge:#ff8a3d;--foilShine:linear-gradient(115deg,#0000 30%,#ffd9a83d 45%,#fff2d655 50%,#ffd9a83d 55%,#0000 70%)}
.tok.foil .frame,.hcard.foil,.bigCard.foil,.scCard.foil{box-shadow:0 0 0 1px var(--foilEdge),0 0 calc(7 * var(--u, 1px)) #ff7a2a88}
.tok.foil .frame::after,.hcard.foil .win::after,.scCard.foil .win::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--foilShine) 0 0/250% 100% no-repeat,radial-gradient(circle at 22% 80%,#ffb36b55 0 1.5%,#0000 2.5%),
    radial-gradient(circle at 78% 30%,#ffb36b44 0 1.2%,#0000 2.2%);mix-blend-mode:screen;animation:foilSweep 6s ease-in-out infinite}
@keyframes foilSweep{0%{background-position:120% 0,0 0,0 0}55%,100%{background-position:-120% 0,0 0,0 0}}
@media (prefers-reduced-motion: reduce){.tok.foil .frame::after,.hcard.foil .win::after,.scCard.foil .win::after{animation:none;background-position:50% 0,0 0,0 0}}






.leaf{--lx:.5;--ly:.4;--lt:0}
.zCard.foil.leaf{box-shadow:0 0 0 1px var(--foilEdge),0 0 calc(9 * var(--u, 1px)) #ff7a2a88}
.hcard.foil.leaf .win::after,.zCard.foil.leaf .zArt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(calc(96deg + var(--lt) * 20deg),#0000 30%,#8a6a2e55 42%,#ffcf8ecc 50%,#e8863a66 58%,#0000 70%) calc((1.2 - var(--lx)) / 1.4 * 100%) 0/240% 100% no-repeat,
    radial-gradient(60% 45% at calc(var(--lx) * 100%) calc(var(--ly) * 100%),#ffffff2e,#fff0 60%);
  mix-blend-mode:screen;opacity:.72;filter:saturate(1.1);animation:none}





body.aimDrag .fx{z-index:56}


.ghost.aimCast .hcard{transform:scale(var(--gs, .6)) !important;transform-origin:50% 50%;transition:transform .2s ease-out !important}
.ghost.aimShrink .hcard{transform:scale(var(--gs, .6)) !important;transform-origin:50% 50%;transition:transform .16s ease-out !important}


.ghost.aimCast .hcard .band,.ghost.aimCast .hcard .pips,.ghost.aimCast .hcard .foot,
.ghost.aimShrink .hcard .band,.ghost.aimShrink .hcard .pips,.ghost.aimShrink .hcard .foot{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .ghost.aimCast .hcard,.ghost.aimShrink .hcard{transition:none !important}
}





.tclock{position:fixed;z-index:45;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:conic-gradient(var(--gold) calc(var(--frac,1) * 360deg), #3a3324 0);
  box-shadow:0 0 0 2px #000, 0 2px 8px #000a}
.tclock::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0b0f11}
.tclock b{position:relative;font:700 1em/1 var(--ui);color:var(--goldHi);letter-spacing:0}
.tclock.paused{opacity:.7}
.tclock.fuse{background:conic-gradient(var(--hurt) calc(var(--frac,1) * 360deg), #3a1a14 0);
  box-shadow:0 0 0 2px #000, 0 0 calc(12 * var(--u)) var(--hurt);animation:tcFuse .5s ease-in-out infinite alternate}
.tclock.fuse b{color:#ffd9cf}
@keyframes tcFuse{to{box-shadow:0 0 0 2px #000, 0 0 calc(20 * var(--u)) var(--hurt)}}
.portrait.away{opacity:.45;filter:grayscale(.55)}
.awayBanner{position:fixed;z-index:44;left:50%;top:calc(8 * var(--u));transform:translateX(-50%);pointer-events:none;
  padding:calc(6 * var(--u)) calc(16 * var(--u));border-radius:calc(8 * var(--u));border:1px solid #b58a3c;
  background:rgba(20,16,10,.92);color:var(--goldHi);font:600 calc(12 * var(--u))/1.2 var(--ui);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tclock.fuse{animation:none}}


.tbank{position:fixed;z-index:45;pointer-events:none;display:flex;align-items:center;gap:.22em;
  padding:.12em .42em .12em .32em;border-radius:1em;border:1px solid var(--rim);background:rgba(11,15,17,.88);
  color:var(--dim);opacity:.6;font-variant-numeric:tabular-nums;transition:opacity .25s,color .25s,border-color .25s}
.tbank svg{width:.95em;height:.95em;flex:none}
.tbank b{font:600 1em/1 var(--ui);letter-spacing:0}
.tbank.on{opacity:1;color:var(--goldHi);border-color:var(--gold)}








.bf{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none;
  background:
    radial-gradient(120% 60% at 50% 0%, #1a0f0d 0%, transparent 55%),
    radial-gradient(120% 60% at 50% 100%, #0d1a15 0%, transparent 55%),
    linear-gradient(180deg, var(--foeGround) 0%, var(--felt) 38%, var(--felt) 62%, var(--youGround) 100%)}
body.bfOn .bf{display:block}
body.bfOn .stage{background:transparent}
.bf img{position:absolute;left:0;width:100%;height:50%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.bf img:not([src]){display:none}
.bf img.on{opacity:1}
.bf img[data-shore="foe"]{top:0;object-position:50% 30%;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.bf img[data-shore="you"]{top:50%;object-position:50% 48%;-webkit-mask-image:linear-gradient(transparent,#000 20%);mask-image:linear-gradient(transparent,#000 20%)}



.bfShade{position:absolute;inset:0}
.bfShade::before,.bfShade::after{content:"";position:absolute;left:0;right:0;height:50%;display:none}
.bfShade::before{top:0;background:linear-gradient(rgba(8,10,12,.3),rgba(8,10,12,.45) 70%,rgba(8,10,12,.82) 96%,rgba(8,10,12,.82))}
.bfShade::after{top:50%;background:linear-gradient(rgba(8,10,12,.82),rgba(8,10,12,.82) 4%,rgba(8,10,12,.45) 30%,rgba(8,10,12,.3))}
body.bfFoe .bfShade::before,body.bfYou .bfShade::after{display:block}



body.bfFoe.bfYou .colL,body.bfFoe.bfYou .colR{background:rgba(6,8,10,.66)}
body.bfFoe:not(.bfYou) .colL{background:linear-gradient(rgba(6,8,10,.66),rgba(6,8,10,.66)) top/100% 50% repeat-x,linear-gradient(90deg,#0004,#0000) bottom/100% 50% repeat-x}
body.bfFoe:not(.bfYou) .colR{background:linear-gradient(rgba(6,8,10,.66),rgba(6,8,10,.66)) top/100% 50% repeat-x,linear-gradient(270deg,#0004,#0000) bottom/100% 50% repeat-x}
body.bfYou:not(.bfFoe) .colL{background:linear-gradient(rgba(6,8,10,.66),rgba(6,8,10,.66)) bottom/100% 50% repeat-x,linear-gradient(90deg,#0004,#0000) top/100% 50% repeat-x}
body.bfYou:not(.bfFoe) .colR{background:linear-gradient(rgba(6,8,10,.66),rgba(6,8,10,.66)) bottom/100% 50% repeat-x,linear-gradient(270deg,#0004,#0000) top/100% 50% repeat-x}



body.bfFoe .leader.foe .chip small,body.bfYou .leader.you .chip small{background:#080d0fd9;padding:0 calc(3 * var(--u));border-radius:3px}
@media (orientation:portrait){.bf{display:none !important}}
 



.qArw{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:31;pointer-events:none;overflow:visible;opacity:.62}
.qArw .qLine{fill:none;stroke:var(--strike);stroke-linecap:round;stroke-dasharray:7 8;animation:arrowFlow 1.4s linear infinite}
.qArw .qHead{fill:var(--strike)}
.qArw .qX{fill:none;stroke:#d9d2c3;stroke-linecap:round}
.qArw.qDrop{animation:qDropFade .9s ease-in forwards}
.qArw.qDrop .qLine{stroke:#8a857c;animation:none}
.qArw.qDrop .qHead{fill:#8a857c}
@keyframes qDropFade{0%{opacity:.9}55%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.qArw .qLine{animation:none}.qArw.qDrop{animation:none;opacity:.9}}



.botTag{display:inline-flex;align-items:center;gap:calc(3 * var(--u));margin-left:calc(5 * var(--u));padding:calc(2 * var(--u)) calc(5 * var(--u));
  border-radius:4px;border:1px solid #5d6f7a;background:#1a2530;color:#b9c8d2;font:700 max(9.5px, calc(9.5 * var(--u)))/1 var(--ui);
  letter-spacing:.14em;vertical-align:middle;white-space:nowrap}
.botTag svg{width:max(10px, calc(10 * var(--u)));height:max(10px, calc(10 * var(--u)))}
#start.pkbHost{display:block;background:var(--bg,#06090b)}
.vbPlay{display:inline-flex;align-items:stretch;gap:calc(10 * var(--u))}
.vbChip{position:relative;overflow:hidden;isolation:isolate;flex:none;width:max(64px, calc(78 * var(--u)));min-height:max(44px, calc(46 * var(--u)));
  border-radius:calc(10 * var(--u));border:1px solid var(--edge2);background:var(--pane,#131a1d);padding:0 calc(4 * var(--u)) calc(4 * var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(2 * var(--u));cursor:pointer;color:var(--parch,#e6d5a8)}
.vbChipArt{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:50% 14%;filter:saturate(.7) brightness(.6)}
.vbChipArt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,9,11,.92) 92%)}
.vbChipSw{display:grid;place-items:center;width:max(18px, calc(18 * var(--u)));height:max(18px, calc(18 * var(--u)));border-radius:50%;
  border:1px solid var(--edge2);background:rgba(6,9,11,.7);color:var(--gold,#dcb46e)}
.vbChipSw svg{width:70%;height:70%}
.vbChipNm{max-width:100%;font:700 max(10px, calc(10 * var(--u)))/1.1 var(--title);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbChip:hover,.vbChip:focus-visible{border-color:var(--gold,#dcb46e)}
#result .vbActs .opt.pri.vbAgain{position:relative;flex-direction:column;gap:calc(4 * var(--u));padding-top:calc(6 * var(--u));padding-bottom:calc(6 * var(--u))}
.vbAgainW{font:700 max(16px, calc(20 * var(--u)))/1 var(--title);letter-spacing:.16em}
.vbMode{display:inline-flex;align-items:center;gap:calc(4 * var(--u));padding:calc(2 * var(--u)) calc(7 * var(--u));border-radius:999px;
  border:1px solid var(--edge2);background:rgba(6,9,11,.78);color:var(--parch,#e6d5a8);font:700 max(9.5px, calc(9 * var(--u)))/1 var(--ui);letter-spacing:.16em}
.vbMode svg{width:max(10px, calc(11 * var(--u)));height:max(10px, calc(11 * var(--u)))}
.vbMode.players{border-color:color-mix(in srgb,var(--gold,#dcb46e) 60%,transparent);color:var(--goldHi,#f1d79c)}
.vbModes{display:grid}
.vbModes>.vbMode{grid-area:1/1;justify-self:center}
.vbModes.swap .was{animation:vbWas .5s ease-in .7s both}
.vbModes.swap .now{animation:vbNow .45s cubic-bezier(.3,1.4,.5,1) 1.05s both}
@keyframes vbWas{to{opacity:0;transform:translateX(calc(-14 * var(--u))) scale(.9)}}
@keyframes vbNow{from{opacity:0;transform:translateX(calc(14 * var(--u))) scale(.9)}}
.vbPipsFt{display:flex;gap:calc(4 * var(--u))}
.vbPipsFt i{width:calc(7 * var(--u));height:calc(7 * var(--u));transform:rotate(45deg);border:1.5px solid var(--gold,#dcb46e)}
.vbPipsFt i.f{background:var(--gold,#dcb46e)}
.vbAgain.ftPulse{animation:vbPulse 1.6s ease-in-out infinite}
@keyframes vbPulse{50%{box-shadow:0 0 0 1px var(--act),0 0 calc(30 * var(--u)) var(--actGlow)}}
.vbHand{position:absolute;right:calc(-10 * var(--u));bottom:calc(-22 * var(--u));width:max(34px, calc(40 * var(--u)));height:max(34px, calc(40 * var(--u)));
  pointer-events:none;animation:vbTap 1.6s ease-in-out infinite;filter:drop-shadow(0 3px 6px #000)}
.vbHand svg{display:block;width:100%;height:100%}
@keyframes vbTap{45%,55%{transform:translate(calc(-4 * var(--u)),calc(-8 * var(--u)))}}
@media (prefers-reduced-motion:reduce){.vbModes.swap .was{animation:none;opacity:0}.vbModes.swap .now,.vbAgain.ftPulse,.vbHand{animation:none}}





.setBox{gap:calc(8 * var(--u))}
.tgl.sw{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:max(52px, calc(52 * var(--u)));padding:calc(8 * var(--u)) calc(10 * var(--u));
  border:1px solid var(--edge2);border-radius:calc(10 * var(--u));background:var(--tileBg);cursor:pointer;box-sizing:border-box}
.tgl.sw:has(input:checked){border-color:#7a6238}
.tgl.sw .tIco{flex:none;display:grid;place-items:center;width:max(34px, calc(34 * var(--u)));height:max(34px, calc(34 * var(--u)));border-radius:50%;
  background:#0d1417;border:1px solid var(--rim);color:var(--gold)}
.tgl.sw .tIco svg{width:max(20px, calc(20 * var(--u)));height:max(20px, calc(20 * var(--u)))}
.tgl.sw .tTxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tgl.sw .tTxt b{font:700 max(14px, calc(14 * var(--u)))/1.2 var(--ui);color:var(--ink)}
.tgl.sw .tTxt small{font:600 max(12px, calc(12 * var(--u)))/1.35 var(--ui);color:var(--dim)}
.tgl.sw input[type="checkbox"]{-webkit-appearance:none;appearance:none;flex:none;position:relative;margin:0;width:46px;height:26px;border-radius:13px;
  background:#2a3336;border:1px solid var(--rim2);cursor:pointer;transition:background .15s,border-color .15s}
.tgl.sw input[type="checkbox"]::before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#93a29d;
  box-shadow:0 1px 3px #000a;transition:transform .15s,background .15s}
.tgl.sw input[type="checkbox"]:checked{background:linear-gradient(180deg,#e9c06a,#b88a3c);border-color:var(--goldHi)}
.tgl.sw input[type="checkbox"]:checked::before{transform:translateX(20px);background:#fff8e6}
.tgl.sw input[type="checkbox"]:focus-visible{outline:2px solid var(--goldHi);outline-offset:2px}
.tgl.sw.mus{cursor:default}
.tgl.sw.mus label{display:flex;align-items:center;gap:calc(10 * var(--u));flex:none;min-height:44px;cursor:pointer}
.tgl.sw.mus input[type="range"]{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--gold)}

 
.rTiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(132px, calc(132 * var(--u))), 1fr));gap:calc(8 * var(--u))}
.rTile{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:max(52px, calc(54 * var(--u)));padding:calc(8 * var(--u)) calc(10 * var(--u));
  border-radius:calc(10 * var(--u));border:1px solid var(--rim);background:var(--tileBg);color:var(--ink);text-align:left;
  font:700 max(13px, calc(13 * var(--u)))/1.2 var(--ui)}
.rTile:hover{border-color:var(--gold);background:var(--pane2)}
.rIco{flex:none;width:max(24px, calc(26 * var(--u)));height:max(24px, calc(26 * var(--u)));color:var(--gold)}
.rHead{display:flex;align-items:center;gap:calc(10 * var(--u))}
.rBack{flex:none;width:max(44px, calc(40 * var(--u)));height:max(44px, calc(40 * var(--u)));
  display:grid;place-items:center;border-radius:8px;border:1px solid var(--edge2);background:#080d0f;color:var(--goldHi)}
.rBack svg{width:20px;height:20px}
.rh h3{display:flex;align-items:center;gap:8px}
.rh h3 .rIco{width:22px;height:22px}

 
.zLeader .zLife{position:absolute;right:calc(8 * var(--u));bottom:calc(8 * var(--u));z-index:2;min-width:max(36px, calc(40 * var(--u)));height:max(36px, calc(40 * var(--u)));
  padding:0 6px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#5a1c17,#2a0c0a 75%);
  border:2px solid var(--blood);box-shadow:0 2px 8px #000c}
.zLeader .zLife b{font:800 max(16px, calc(19 * var(--u)))/1 var(--ui);color:var(--num)}
.slHead{display:flex;align-items:center;gap:calc(10 * var(--u));padding-right:calc(max(40px, calc(36 * var(--u))) + 2px)}
.slHead h4{flex:1 1 auto;min-width:0;padding-right:0}
.slPort{flex:none;width:max(40px, calc(44 * var(--u)));height:max(40px, calc(44 * var(--u)));border-radius:50%;overflow:hidden;border:2px solid var(--rim2);background:#0d1417}
.slPort img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.slLife{flex:none;min-width:max(34px, calc(36 * var(--u)));height:max(34px, calc(36 * var(--u)));padding:0 5px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#5a1c17,#2a0c0a 75%);border:2px solid var(--blood)}
.slLife b{font:800 max(15px, calc(16 * var(--u)))/1 var(--ui);color:var(--num)}



#gemBox .gem{border-radius:50%}
#gemBox .gem.lit,#gemBox .gem.dim,#gemBox .gem.bonus{background:radial-gradient(circle at 50% 45%,#ffffff12,#0000 72%)}
#gemBox .gem.empty{width:calc(13 * var(--u));height:calc(13 * var(--u));background:radial-gradient(circle at 50% 40%,#0b1114,#151d20);
  box-shadow:inset 0 0 0 1.5px #34424599,inset 0 1px 2px #000c}
#gemBox .gemLbl{font-size:max(13px, calc(14 * var(--u)))}

 
.sh.place.onBoard{padding:calc(7 * var(--u)) calc(10 * var(--u))}
.sh.place.onBoard h3{display:inline;font-size:max(14px, calc(15 * var(--u)));margin-left:6px}
.sheetWrap.slim.mid.tight .sh.place{padding-top:2px;padding-bottom:2px}
.sheetWrap.slim.mid.tight2 .sh.place .eb{display:inline;margin-right:6px}
.sheetWrap.slim.mid.tight2 .sh.place h3{margin-left:0}



 
.rdCard.rdLong .rdBody .zText{font-size:max(10px, calc(8.6 * var(--u)));line-height:1.2}


.rdCard.rdTight .rdBody{gap:2px}
.rdCard.rdTight .rdBody .zText{font-size:9px;line-height:1.14}
body.fmHand .sh.redraw .rdTitle .ln{display:none}





:root{--bone:#e9dfc6;--boneInk:#2a2219;--boneRx:#1f4250}
.fz{display:flex;align-items:stretch;flex-wrap:nowrap;font-variant-numeric:tabular-nums;line-height:1}
.fz > i{position:relative;flex:1 1 0;min-width:0;display:grid;place-items:center;font-style:normal}
.fz > i .rk{position:absolute;display:block;left:50%;top:1px;transform:translateX(-50%);width:4px;height:4px;color:var(--rune)}
.fz > i .rk svg{width:100%;height:100%;display:block}
.fz.bone{background:var(--bone);color:var(--boneInk);font-weight:800;font-family:var(--ui)}
.fz.bone > i + i{box-shadow:inset 1px 0 0 #2a221926}
.fz.bone > i.r{background:var(--runebg);color:var(--rune);box-shadow:inset 0 0 0 1px #cfe3ea88;border-radius:3px;margin:1px;padding-top:3px}
.fz.bone > i.r + i:not(.r){box-shadow:none}
.fz.bone > i.fm{flex:0 0 auto;padding:0 3px;color:#1f6b35;background:#d8e8cf}
.fz.bone > i.fm.neg{color:#8a1d12;background:#f1d2c8}




.fz.bone > i.dv::before{content:"";position:absolute;left:-1px;top:14%;bottom:14%;width:2px;border-radius:1px;
  background:var(--boneInk);opacity:.62;pointer-events:none}


.fz.bone > i.r.dv::before{left:1px;background:currentColor;opacity:.85}
.fz.bone.called > i.cOff{opacity:.34}
.fz.bone.called > i.cOn{background:linear-gradient(#ffe9a6,#f1c45c);color:#2a1a05}
.fz.bone > i.cLand{z-index:1;animation:cLand .9s ease-out both}
@keyframes cLand{0%{transform:scale(1.45);box-shadow:0 0 9px 3px #ffd76add,inset 0 0 0 2px #fff3c4}
  100%{transform:none;box-shadow:inset 0 0 0 2px #e0a92e}}
@media (prefers-reduced-motion: reduce){.fz.bone > i.cLand{animation:none;box-shadow:inset 0 0 0 2px #e0a92e}}
 
.hcard .foot.bone{padding:0;gap:0;background:var(--bone);border-top:1px solid #00000066;justify-content:stretch}
.hcard .foot.bone .fz{flex:1 1 auto;height:100%;font-size:max(12px, calc(12 * var(--u)))}
.hcard .foot.bone.sfoot{padding-left:max(1px, calc(1.5 * var(--u)));padding-right:max(1px, calc(1.5 * var(--u)))}
.foot.bone .hcType,.zStrip.bone .hcType,.rdStrip.bone .hcType{color:var(--boneInk)}
.foot.bone .km,.zStrip.bone .km,.rdStrip.bone .km{color:#7a4d12}
.hcard.reaction .foot.bone .hcType,.zFace.reaction .zStrip.bone .hcType,.rdStrip.bone.reaction .hcType,
.foot.bone .km.reaction,.zStrip.bone .km.reaction,.rdStrip.bone .km.reaction{color:var(--boneRx)}
.hcard.cf .foot.bone{height:max(18px, calc(18 * var(--u)))}
.hcard.cf .foot.bone .fz{font-size:max(11px, calc(10 * var(--u)))}
 
.artHp{position:absolute;right:max(2px, calc(3 * var(--u)));bottom:max(2px, calc(3 * var(--u)));z-index:3;display:flex;align-items:center;gap:2px;pointer-events:none}
.hcard .win .hcHp.onArt{margin:0;color:#fff;width:max(20px, calc(19 * var(--u)));height:max(20px, calc(19 * var(--u)));padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:#080d0fe6;border:1.5px solid var(--ink);font:800 max(12px, calc(11 * var(--u)))/1 var(--ui)}
.hcard .win .hcHp.onArt.hurt,.zArt .hcHp.onArt.hurt,.rdArt .hcHp.onArt.hurt{color:var(--hurt);border-color:var(--blood)}
.hcard.cf .win .hcHp.onArt{width:max(18px, calc(16 * var(--u)));height:max(18px, calc(16 * var(--u)));font-size:max(11px, calc(9.5 * var(--u)))}
 
.win > .rMark.onArt,.zArt > .rMark.onArt,.rdArt > .rMark.onArt{position:absolute;left:50%;bottom:max(2px, calc(3 * var(--u)));transform:translateX(-50%);z-index:3;
  flex:none;align-self:auto;container-type:normal;padding:2px;border-radius:50%;background:#080d0fd9}
.zArt > .rMark.onArt{bottom:calc(5 * var(--u));padding:3px}
.zArt > .rMark.onArt .rPi{width:max(12px, calc(14 * var(--u)))}
 
.zFace .zStrip.bone{padding:0;gap:0;background:var(--bone);min-height:max(26px, calc(28 * var(--u)));border-top:1px solid #00000066}
.zFace .zStrip.bone .fz{flex:1 1 auto;align-self:stretch;font-size:max(13px, calc(16 * var(--u)))}
.zFace .zStrip.bone .fz > i .rk{top:2px;width:6px;height:6px}
.zFace .zStrip.bone .fz > i.r{padding-top:5px}
.zFace .zStrip.bone.sfoot{padding:calc(3 * var(--u)) calc(7 * var(--u))}
.zArt .artHp{right:calc(5 * var(--u));bottom:calc(5 * var(--u));gap:3px}
.zArt .artHp .shd{width:max(16px, calc(17 * var(--u)));height:max(18px, calc(19 * var(--u)));filter:drop-shadow(0 0 2px #000)}
.zArt .hcHp.onArt{min-width:max(24px, calc(26 * var(--u)));height:max(24px, calc(26 * var(--u)));padding:0 2px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#080d0fe6;border:1.5px solid var(--ink);color:#fff;font:800 max(13px, calc(14 * var(--u)))/1 var(--ui);font-variant-numeric:tabular-nums}
.zArt .hcHp.onArt.frac{border-radius:999px;padding:0 calc(6 * var(--u));gap:1px}
 
.rdStrip.bone{background:var(--bone);border-radius:3px;min-height:max(18px, calc(18 * var(--u)));padding:0}
.rdStrip.bone .fz{flex:1 1 auto;align-self:stretch;font-size:max(12px, calc(12 * var(--u)))}
.rdStrip.bone.sfoot{padding:0 calc(3 * var(--u))}
.rdArt .artHp{right:max(3px, calc(4 * var(--u)));bottom:max(3px, calc(4 * var(--u)))}
.rdArt .hcHp.onArt{min-width:max(20px, calc(20 * var(--u)));height:max(20px, calc(20 * var(--u)));display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#080d0fe6;border:1.5px solid var(--ink);color:#fff;font:800 max(12px, calc(12 * var(--u)))/1 var(--ui)}
 
.tok .fz.bone.tokBand{position:absolute;left:1px;right:1px;bottom:1px;z-index:4;height:max(16px, calc(17 * var(--tu)));
  border-radius:0 0 calc(9 * var(--tu)) calc(9 * var(--tu));font-size:max(12px, calc(12.5 * var(--tu)));border-top:1px solid #00000066}
.tok .fz.bone.tokBand > i .rk{width:3px;height:3px}
.tok .fz.bone.tokBand > i.r{padding-top:2px}
.tok.ready .fz.bone.tokBand{box-shadow:0 0 0 1px #8fd0a5aa}
.tok:has(.tokBand) .hp{bottom:calc(max(16px, calc(17 * var(--tu))) + 2px);right:calc(2 * var(--tu));width:max(22px, calc(24 * var(--tu)));height:max(22px, calc(24 * var(--tu)));
  font-size:max(13px, calc(15 * var(--tu)))}
 
.tok:has(.tokBand) .kwl{bottom:calc(max(16px, calc(17 * var(--tu))) + max(22px, calc(24 * var(--tu))) + 4px)}
.tok.structure:has(.tokBand) .plinth{bottom:max(16px, calc(17 * var(--tu)))}


.fxDie .keepTag.k-luck.up{color:#9be08f;border-color:#3f6b38}
.fxDie .keepTag.k-luck.down{color:#ff8a76;border-color:#7a2d22}
.opt .coinIc{width:1.35em;height:1.35em;flex:none;color:var(--goldHi)}
 
.opt .copperIc{width:1.5em;height:1.5em;flex:none;margin-right:.5em}
 
html:not(#kA0):not(#kA1) body #sheet .opt:has(> .copperIc), .opt:has(> .copperIc){flex-direction:row;gap:0}
.coinBadge{position:absolute;z-index:5;display:flex;align-items:center;gap:1px;padding:1px 4px 1px 2px;border-radius:999px;background:#080d0fe6;border:1px solid #8a6a2a;
  color:var(--goldHi);font:800 max(11px, calc(10 * var(--u)))/1 var(--ui);pointer-events:auto}
.coinBadge svg{width:max(14px, calc(14 * var(--u)));height:max(14px, calc(14 * var(--u)))}
.ldName .coinBadge{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}



.tipLine{position:fixed;z-index:48;pointer-events:none;max-width:min(calc(320 * var(--u)), 60vw);padding:calc(6 * var(--u)) calc(12 * var(--u));
  background:#080d0ff2;border:1px solid var(--goldHi);border-radius:10px;font:700 max(13px, calc(14 * var(--u)))/1.25 var(--ui);color:var(--parch);
  text-align:center;box-shadow:0 2px 10px #000a;white-space:normal}
.tipHand{position:fixed;z-index:49;pointer-events:none;width:44px;height:44px;margin:-4px 0 0 -14px;filter:drop-shadow(0 2px 4px #000c)}
.tipHand svg{width:100%;height:100%;display:block}
.tipHand[data-gesture="tap"]{animation:coachTap 1s ease-in-out infinite}
.tipHand[data-gesture="hold"]{animation:tipHold 1.6s ease-in-out infinite}
.tipHand[data-gesture="drag"]{animation:tipDrag 1.6s ease-in-out infinite}
@keyframes tipHold{0%,100%{transform:translate(0,6px) scale(1)}30%,80%{transform:translate(0,0) scale(.92)}}
@keyframes tipDrag{0%,15%{transform:translate(0,0)}75%,100%{transform:translate(var(--dx, 0px), var(--dy, 0px))}}



.tipHand[data-dir="down"]{margin:-41px 0 0 -21px}
.tipHand[data-dir="down"] svg{transform:scaleY(-1)}
.tipHand[data-dir="down"][data-gesture="tap"]{animation:tipTapDown 1s ease-in-out infinite}
@keyframes tipTapDown{0%,100%{transform:translate(0,-6px)}50%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){ .tipHand{animation:none !important} }










.emoPanel{position:fixed;inset:0;z-index:60;pointer-events:none}
.emoPanel[hidden]{display:none}
.emoHoop{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.emoHoop path{fill:none;stroke:#2a2f31;stroke-width:calc(7 * var(--u))}
.emoHoop path.hi{stroke:#7d5a2c;stroke-width:1.2px}
.emoMed{position:absolute;display:block;border-radius:50%;overflow:hidden;background:#000;pointer-events:none;
  box-shadow:0 0 0 3px #2a2f31,0 0 0 4.5px #9c7a45,0 6px 14px #000;animation:emoMed .2s ease-out both}
.emoMed img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.emoOpt{--emC:calc(7 * var(--u));--emR:linear-gradient(180deg,#b88a46,#6d4c22);position:absolute;isolation:isolate;display:flex;align-items:center;
  justify-content:center;box-sizing:border-box;min-height:max(30px, calc(31 * var(--u)));margin:0;padding:0 max(13px, calc(16 * var(--u)));
  border:0;border-radius:0;pointer-events:auto;cursor:pointer;white-space:nowrap;
  font:700 max(11px, calc(12.5 * var(--u)))/1 var(--title);letter-spacing:.06em;text-transform:uppercase;color:#e6d5a8;text-shadow:0 1px 0 #000;
  background:var(--emR);
  clip-path:polygon(var(--emC) 0,calc(100% - var(--emC)) 0,100% 50%,calc(100% - var(--emC)) 100%,var(--emC) 100%,0 50%);
  animation:emoPl .16s ease-out both}
.emoOpt::before{content:"";position:absolute;inset:1.5px;z-index:-1;
  background:linear-gradient(180deg,#2c3639 0%,#182024 48%,#0e1416 52%,#141b1e 100%);
  clip-path:polygon(var(--emC) 0,calc(100% - var(--emC)) 0,100% 50%,calc(100% - var(--emC)) 100%,var(--emC) 100%,0 50%)}
.emoOpt::after{content:"";position:absolute;inset:1.5px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at calc(var(--emC) + 2px) 50%,#9c7a45 0 1.6px,#0000 2.2px),
             radial-gradient(circle at calc(100% - var(--emC) - 2px) 50%,#9c7a45 0 1.6px,#0000 2.2px)}
.emoOpt:hover:not([disabled]),.emoOpt:focus-visible{--emR:linear-gradient(180deg,#e9bd72,#9a6d34);color:#fff1cf;outline:none}
.emoOpt[disabled]{opacity:.45;cursor:default}
.emoMute{--emR:linear-gradient(180deg,#b9c2c0,#59625f);color:#dfe5e2}
.emoMute:hover,.emoMute:focus-visible{--emR:linear-gradient(180deg,#dfe7e4,#7c8784)}
body.emoOpen .portrait[data-leader="you"]{box-shadow:0 0 0 2px #c79a4a,0 0 14px 2px #e0a24c8c}
body.emoMuteOpen .portrait[data-leader="enemy"]{box-shadow:0 0 0 2px #9aa4a2}
body.emoOpen #ribbon{visibility:hidden}
 
body.emoOpen #zoom,body.emoMuteOpen #zoom{visibility:hidden}
@keyframes emoPl{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes emoMed{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.emoLayer{position:fixed;inset:0;z-index:55;pointer-events:none}
.emoBub{--emR:#c79a4a;--emC:calc(6 * var(--u));--ty:50%;position:fixed;display:flex;align-items:center;gap:7px;box-sizing:border-box;
  max-width:min(calc(230 * var(--u) + 40px),calc(100vw - 16px));padding:calc(8 * var(--u)) calc(14 * var(--u));
  border:0;border-radius:0;background:var(--emR);color:#efe3c4;text-shadow:0 1px 0 #000;
  font:700 max(12px, calc(13.5 * var(--u)))/1.25 var(--ui);animation:emoIn .2s ease-out;
  clip-path:polygon(var(--emC) 0,calc(100% - var(--emC)) 0,100% var(--emC),100% calc(100% - var(--emC)),calc(100% - var(--emC)) 100%,var(--emC) 100%,0 calc(100% - var(--emC)),0 var(--emC))}
.emoBub::before{content:"";position:absolute;inset:2px;background:linear-gradient(180deg,#222b2e,#10171a);
  clip-path:polygon(var(--emC) 0,calc(100% - var(--emC)) 0,100% var(--emC),100% calc(100% - var(--emC)),calc(100% - var(--emC)) 100%,var(--emC) 100%,0 calc(100% - var(--emC)),0 var(--emC))}
.emoBub > *{position:relative}
.emoBub.enemy{--emR:#9aa4a2}


.emoBub.byPortrait{padding-left:calc(14 * var(--u) + 9px);
  clip-path:polygon(calc(9px + var(--emC)) 0,calc(100% - var(--emC)) 0,100% var(--emC),100% calc(100% - var(--emC)),calc(100% - var(--emC)) 100%,
    calc(9px + var(--emC)) 100%,9px calc(100% - var(--emC)),9px calc(var(--ty) + 7px),0 var(--ty),9px calc(var(--ty) - 7px),9px var(--emC))}
.emoBub.byPortrait::before{
  clip-path:polygon(calc(7px + var(--emC)) 0,calc(100% - var(--emC)) 0,100% var(--emC),100% calc(100% - var(--emC)),calc(100% - var(--emC)) 100%,
    calc(7px + var(--emC)) 100%,7px calc(100% - var(--emC)),7px calc(var(--ty) + 3.5px),0 calc(var(--ty) - 2px),7px calc(var(--ty) - 7.5px),7px var(--emC))}
.emoPic{flex:0 0 34px;width:34px;height:34px;border-radius:0;overflow:hidden;display:grid;place-items:center;background:#000;color:var(--gold);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.emoPic img{width:100%;height:100%;object-fit:cover;display:block}
.emoLine{min-width:0}
@keyframes emoIn{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.emoBub,.emoOpt,.emoMed{animation:none}}
@media (orientation:portrait){.emoPanel,.emoLayer{display:none !important}}





.dpop.num.prevent.stamp{top:50%;transform:translate(-50%,-50%);animation-name:stampIn;isolation:isolate;
  display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:3px;row-gap:1px;
  padding:max(5px, calc(6 * var(--tu))) max(8px, calc(10 * var(--tu))) max(4px, calc(5 * var(--tu)));
  background:var(--bulwark);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  filter:drop-shadow(0 3px 6px #000e)}
.dpop.num.prevent.stamp::before{content:"";position:absolute;inset:2px;z-index:-1;background:linear-gradient(180deg,#1b2f40,#0a141d);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.dpop.num.prevent.stamp svg{width:max(18px, calc(22 * var(--tu)));height:max(20px, calc(25 * var(--tu)));color:var(--bulwark)}
.dpop.num.prevent.stamp b{border:0;background:none;box-shadow:none;padding:0;min-width:0;color:var(--bulwark);
  font:800 max(18px, calc(24 * var(--tu)))/1 var(--ui)}
.dpop.num.prevent.stamp i{grid-column:1 / -1;font:800 max(10px, calc(11 * var(--tu)))/1 var(--ui);font-style:normal;
  letter-spacing:.12em;color:#cfe3f5;text-align:center}
.dpop.num.prevent.stamp.faded{animation:none;opacity:.55}
@keyframes stampIn{from{opacity:0;transform:translate(-50%,-50%) scale(1.5)}60%{opacity:1;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
 
#hand .hcard .pips.cost.noShards, #gemBox.noShards{filter:drop-shadow(0 0 6px #ff6a55) drop-shadow(0 0 2px #ff6a55)}


body:has(.hint.on) #ribbon .rl{visibility:hidden}





.tok :is(.spurSock,.spurSign){position:absolute;z-index:6;left:0;bottom:calc(max(18px, calc(22 * var(--tu))) + 1px);
  width:max(44px, calc(30 * var(--tu)));height:max(44px, calc(30 * var(--tu)));padding:0;margin:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 1px 1.5px #000)}
.tok :is(.spurSock,.spurSign) .so{position:relative;display:block;width:max(24px, calc(26 * var(--tu)));height:max(24px, calc(26 * var(--tu)));
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);background:linear-gradient(160deg,#8a6a40,#2c2318 55%,#6a5030)}
.tok :is(.spurSock,.spurSign) .so::before{content:"";position:absolute;inset:max(2px, calc(2 * var(--tu)));
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);background:radial-gradient(circle at 50% 40%,#2a3338,#0b0f11 75%)}
.tok :is(.spurSock,.spurSign) .so svg{position:absolute;inset:22%;width:56%;height:56%;color:#8c969a;opacity:.6;filter:saturate(.15)}
.tok .spurSock.on{filter:drop-shadow(0 0 5px #ff8a1eaa) drop-shadow(0 1px 1px #000)}
.tok .spurSock.on .so{background:linear-gradient(160deg,#ffcf7a,#c26a1c 50%,#ffb24d)}
.tok .spurSock.on .so::before{background:radial-gradient(circle at 50% 45%,#6a300c,#1d0d05 80%)}
.tok .spurSock.on .so svg{color:#ffd79a;opacity:1;filter:drop-shadow(0 0 2px #ffb24d) drop-shadow(0 0 4px #ff9a3a)}
.tok .spurSock .spP{position:absolute;left:50%;bottom:calc(50% + max(12px, calc(13 * var(--tu))));transform:translateX(-50%);display:none;
  padding:calc(3 * var(--tu)) calc(5 * var(--tu)) calc(6 * var(--tu));font:800 max(11px, calc(11 * var(--tu)))/1 var(--ui);letter-spacing:.02em;
  color:#ffd79a;text-shadow:0 0 4px #ff8a1e,0 1px 0 #000;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,#3a230f,#140b05);clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),50% 100%,0 calc(100% - 5px))}
.tok .spurSock.on .spP{display:block}
.tok .spurSock:focus{outline:none}
.tok .spurSock:focus-visible{outline:2px solid var(--goldHi);outline-offset:-2px}
#gemBox .gem.spurSpent{opacity:.3;filter:saturate(.25)}
body.hide-spur .tok :is(.spurSock,.spurSign){display:none !important}




.tok:has(.kwl) :is(.spurSock,.spurSign){bottom:calc(22 * var(--tu) + max(11px, calc(9 * var(--tu))) + 6px + 2px - (max(44px, calc(30 * var(--tu))) - max(24px, calc(26 * var(--tu)))) / 2)}


.tok:has(.kwl) .spurSock .spP{left:calc(50% + max(12px, calc(13 * var(--tu))) + 1px);bottom:auto;top:50%;transform:translateY(-50%);
  padding:calc(3 * var(--tu)) calc(5 * var(--tu)) calc(3 * var(--tu)) calc(8 * var(--tu));clip-path:polygon(5px 0,100% 0,100% 100%,5px 100%,0 50%)}
.tok:has(.tokBand):has(.kwl) :is(.spurSock,.spurSign){bottom:calc(max(16px, calc(17 * var(--tu))) + max(22px, calc(24 * var(--tu))) + 4px + max(11px, calc(9 * var(--tu))) + 6px + 2px - (max(44px, calc(30 * var(--tu))) - max(24px, calc(26 * var(--tu)))) / 2)}






.tok :is(.spurSock,.spurSign){--spX:clamp(0px, calc(44px - 35.2 * var(--tu)), calc(8 * var(--tu)));left:calc(-1 * var(--spX))}
.tok :is(.spurSock,.spurSign) .so{left:var(--spX)}
.tok .spurSock .spP{left:calc(50% + var(--spX))}
.tok:has(.kwl) .spurSock .spP{left:calc(50% + max(12px, calc(13 * var(--tu))) + 1px + var(--spX))}






#rowYou .tok:has(.kwl):has(.shd) :is(.spurSock,.spurSign){--spS:clamp(0px, calc((max(44px, calc(30 * var(--tu))) + max(24px, calc(26 * var(--tu)))) / 2 - 30 * var(--tu) + 2px), calc((max(44px, calc(30 * var(--tu))) - max(24px, calc(26 * var(--tu)))) / 2))}
#rowYou .tok:has(.kwl):has(.shd) :is(.spurSock,.spurSign) .so{left:calc(var(--spX) - var(--spS))}
#rowYou .tok:has(.kwl):has(.shd) .spurSock{--spB:calc(22 * var(--tu) + max(11px, calc(9 * var(--tu))) + 6px + 2px - (max(44px, calc(30 * var(--tu))) - max(24px, calc(26 * var(--tu)))) / 2)}
#rowYou .tok:has(.tokBand):has(.kwl):has(.shd) .spurSock{--spB:calc(max(16px, calc(17 * var(--tu))) + max(22px, calc(24 * var(--tu))) + 4px + max(11px, calc(9 * var(--tu))) + 6px + 2px - (max(44px, calc(30 * var(--tu))) - max(24px, calc(26 * var(--tu)))) / 2)}


#rowYou .tok:has(.kwl):has(.shd) .spurSock .spP{left:calc(50% + var(--spX) - var(--spS));bottom:auto;
  top:max(calc(max(44px, calc(30 * var(--tu))) + var(--spB) - 118 * var(--tu)), calc(max(44px, calc(30 * var(--tu))) / 2 - max(12px, calc(13 * var(--tu))) - max(11px, calc(11 * var(--tu))) - 9 * var(--tu)));
  transform:translateX(-50%);padding:calc(3 * var(--tu)) calc(5 * var(--tu)) calc(6 * var(--tu));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),50% 100%,0 calc(100% - 5px))}





.tok .spurSign{pointer-events:none;cursor:default}
.tok .spurSign .so{transform:scale(.72);opacity:.62;filter:saturate(.5)}




.rotate .panel{--c:14px;position:relative;isolation:isolate;border:0;border-radius:0;background:#8a6a2e;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.rotate .panel::before{content:"";position:absolute;inset:2px;z-index:-1;--c2:13px;pointer-events:none;
  clip-path:polygon(var(--c2) 0,calc(100% - var(--c2)) 0,100% var(--c2),100% calc(100% - var(--c2)),calc(100% - var(--c2)) 100%,var(--c2) 100%,0 calc(100% - var(--c2)),0 var(--c2));
  background:repeating-linear-gradient(97deg,#ffffff05 0 2px,#0000 2px 5px),linear-gradient(180deg,#2a3236 0%,#1a2124 45%,#0f1416 100%)}