/* ============================================================
   LonePortal TCG - cards, cases and the table
   ------------------------------------------------------------
   Shared by every TCG page. Cards are laid out at their printed
   size, 200 x 280, and shrunk with a transform, so every size
   below is just a box and a scale.

   Upload to: public_html/assets/css/lp_tcg.css
   ============================================================ */

/* ---- Boxes and scales ------------------------------------- */

.tcw { position:relative; display:inline-block; vertical-align:top; -webkit-flex:0 0 auto; flex:0 0 auto; }
.tcw-t { position:absolute; left:0; top:0; right:0; bottom:0; }
.tcw-in { position:absolute; left:0; top:0; width:200px; height:280px;
  -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; }
.tcw-slab .tcw-in { width:236px; height:368px; }
.tcw-info { display:none; }
.tcw-peek { display:none; position:absolute; left:0; top:0; right:0; bottom:0; z-index:6; pointer-events:none; }

.tcw.s30  { width:60px;  height:84px;  } .tcw.s30  .tcw-in { -webkit-transform:scale(.30); -ms-transform:scale(.30); transform:scale(.30); }
.tcw.s36  { width:72px;  height:101px; } .tcw.s36  .tcw-in { -webkit-transform:scale(.36); -ms-transform:scale(.36); transform:scale(.36); }
.tcw.s44  { width:88px;  height:123px; } .tcw.s44  .tcw-in { -webkit-transform:scale(.44); -ms-transform:scale(.44); transform:scale(.44); }
.tcw.s48  { width:96px;  height:134px; } .tcw.s48  .tcw-in { -webkit-transform:scale(.48); -ms-transform:scale(.48); transform:scale(.48); }
.tcw.s56  { width:112px; height:157px; } .tcw.s56  .tcw-in { -webkit-transform:scale(.56); -ms-transform:scale(.56); transform:scale(.56); }
.tcw.s62  { width:124px; height:174px; } .tcw.s62  .tcw-in { -webkit-transform:scale(.62); -ms-transform:scale(.62); transform:scale(.62); }
.tcw.s72  { width:144px; height:202px; } .tcw.s72  .tcw-in { -webkit-transform:scale(.72); -ms-transform:scale(.72); transform:scale(.72); }
.tcw.s100 { width:200px; height:280px; } .tcw.s100 .tcw-in { -webkit-transform:none; -ms-transform:none; transform:none; }
.tcw.s120 { width:240px; height:336px; } .tcw.s120 .tcw-in { -webkit-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); }
.tcw.s130 { width:260px; height:364px; } .tcw.s130 .tcw-in { -webkit-transform:scale(1.3); -ms-transform:scale(1.3); transform:scale(1.3); }

.tcw-slab.s36  { width:85px;  height:132px; }
.tcw-slab.s44  { width:104px; height:162px; }
.tcw-slab.s48  { width:113px; height:177px; }
.tcw-slab.s56  { width:132px; height:206px; }
.tcw-slab.s62  { width:146px; height:228px; }
.tcw-slab.s72  { width:170px; height:265px; }
.tcw-slab.s100 { width:236px; height:368px; }
.tcw-slab.s120 { width:283px; height:442px; }
.tcw-slab.s130 { width:307px; height:478px; }

/* ---- The card face ---------------------------------------- */

.tcf { position:relative; width:200px; height:280px; border-radius:10px; overflow:hidden; background:#16120d;
  box-shadow:0 0 0 1px rgba(0,0,0,.6); font-family:Verdana, Tahoma, Arial, sans-serif; color:#20160c;
  text-align:left; line-height:1.2; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
.tcf div, .tcf span, .tcf p { box-sizing:border-box; }

.tcf-frame { position:absolute; left:5px; top:5px; right:5px; bottom:5px; border-radius:6px; }
.tcf-frame:after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:6px;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 0 2px rgba(0,0,0,.22); }
.tcf.r-epic .tcf-frame      { box-shadow:inset 0 0 0 2px #d9e1ee; }
.tcf.r-legendary .tcf-frame { box-shadow:inset 0 0 0 2px #f0c24a, inset 0 0 6px rgba(255,210,90,.6); }
.tcf.r-mythic .tcf-frame    { box-shadow:inset 0 0 0 2px #ff7ad9, inset 0 0 0 3px #7ff6ff, inset 0 0 8px rgba(255,122,217,.6); }

/* Eggs are elementless, so they get an eggshell frame. */
.tcf-egg .tcf-frame:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:6px;
  background-image:radial-gradient(rgba(120,90,40,.35) 1px, rgba(0,0,0,0) 1.6px), radial-gradient(rgba(120,90,40,.25) .8px, rgba(0,0,0,0) 1.4px);
  background-size:11px 13px, 7px 9px; background-position:0 0, 4px 6px; }

.tcf-gem { position:absolute; left:6px; top:5px; width:31px; height:31px; border-radius:50%; z-index:4;
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  color:#fff; border:2px solid #0b1f3f; text-shadow:0 1px 1px #000, 0 0 3px rgba(0,0,0,.6);
  box-shadow:0 2px 3px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.45); }
.tcf-gem b { font-family:Tahoma, Verdana, sans-serif; font-size:15px; line-height:1; }
.tcf-gem i { font-style:normal; font-size:6px; font-weight:bold; line-height:1; letter-spacing:.05em; margin-top:1px; }
.g-cost { background:radial-gradient(circle at 35% 30%, #b5dcff 0%, #3a86e6 45%, #143f86 100%); }
.g-hp   { background:radial-gradient(circle at 35% 30%, #ffb8b0 0%, #e0413a 45%, #7a1010 100%); border-color:#3f0b0b; }
.tcf-egg .g-cost { background:radial-gradient(circle at 35% 30%, #ffe8b0 0%, #e0a83a 45%, #7a4f0c 100%); border-color:#3f2a05; }

.tcf-name { position:absolute; left:40px; right:36px; top:8px; height:25px; z-index:4; overflow:hidden;
  border-radius:4px; background:linear-gradient(#fbf4df, #e6d7b0); border:1px solid rgba(40,25,10,.7);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.35);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center; padding:0 4px; }
.tcf-name span { font-weight:bold; font-size:11px; line-height:11px; text-align:center; color:#20160c; }
.tcf-name.n-s span  { font-size:10px; line-height:10px; }
.tcf-name.n-xs span { font-size:8.5px; line-height:9px; }
.v-shiny .tcf-name span, .v-foil .tcf-name span, .v-animated .tcf-name span { color:#6b4400; }
@supports (-webkit-background-clip:text) {
  .v-shiny .tcf-name span, .v-foil .tcf-name span, .v-animated .tcf-name span {
    background-image:linear-gradient(90deg, #7a4a00, #c98f10, #6b3c00, #d7a21f, #7a4a00);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}

.tcf-el { position:absolute; right:8px; top:8px; width:25px; height:25px; border-radius:50%; z-index:4;
  border:2px solid #000; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.3); }
.tcf-el svg { width:15px; height:15px; }
.tcf-el b { color:#fff; font-size:12px; text-shadow:0 1px 1px #000; }

.tcf-art { position:absolute; left:11px; right:11px; top:36px; height:106px; z-index:2; overflow:hidden;
  border:2px solid #000; border-radius:2px; background-color:#555;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 3px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.3); }
.tcf-art img { position:absolute; left:5px; top:4px; width:164px; height:94px; object-fit:contain;
  image-rendering:-moz-crisp-edges; image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor; }
.tcf-noart { position:absolute; left:0; right:0; top:42px; text-align:center; color:rgba(0,0,0,.4);
  font-weight:bold; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }

.tcf-type { position:absolute; left:11px; right:11px; top:145px; height:15px; z-index:4; border-radius:2px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:0 5px;
  color:#fff; font-size:7.6px; font-weight:bold; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  background:linear-gradient(#5a4631, #2e2216); box-shadow:0 1px 0 rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.22); }
.tcf-type.t-attack  { background:linear-gradient(#a3321f, #5c150a); }
.tcf-type.t-defense { background:linear-gradient(#6a3f9a, #321a52); }
.tcf-type.t-skill   { background:linear-gradient(#2d8a86, #12433f); }
.tcf-type.t-egg     { background:linear-gradient(#b0852f, #5e4211); }
.tcf-te { margin-left:5px; opacity:.78; font-weight:normal; }
.tcf-rar { width:10px; height:10px; margin-left:auto; }

.tcf-stats { position:absolute; left:11px; right:11px; top:163px; height:22px; z-index:4; overflow:hidden;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; }
.tcp { display:inline-block; height:17px; line-height:17px; padding:0 6px; margin-right:4px; border-radius:9px;
  font-size:7.4px; font-weight:bold; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; color:#fff;
  background:#333; text-shadow:0 1px 1px rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.45); }
.tcp b { font-size:11.5px; vertical-align:-1px; margin-right:1px; }
.p-mana  { background:linear-gradient(#3f86e0, #16438c); }
.p-dead  { background:linear-gradient(#72727e, #34343c); }
.p-dmg   { background:linear-gradient(#e0503a, #8a1a0c); }
.p-trap  { background:linear-gradient(#8a5bc4, #472478); }
.p-skill { background:linear-gradient(#3cb3ac, #16615b); }
.p-hatch { background:linear-gradient(#e0a83a, #8a5a0c); }
.p-ehp   { background:linear-gradient(#d24c6a, #7c1a31); }
.p-tag   { background:rgba(0,0,0,.5); }

.tcf-text { position:absolute; left:11px; right:11px; top:188px; bottom:21px; z-index:4; overflow:hidden;
  border-radius:3px; padding:4px 6px 3px; background:linear-gradient(#fcf7e8, #efe4c6);
  border:1px solid rgba(50,32,14,.55); box-shadow:inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.3);
  font-family:Tahoma, Verdana, Arial, sans-serif; font-size:8.3px; line-height:1.28; color:#241808; }
.tcf-text p { margin:0 0 2px; padding:0; }
.tcf-text b { color:#120b03; }
.tcf-text.t-s  { font-size:7.6px; }
.tcf-text.t-xs { font-size:6.9px; }
.tcf-text .tcf-flavor { font-style:italic; color:#5a4630; border-top:1px solid rgba(90,70,48,.3); padding-top:2px; margin-top:3px; }
.tcf-dim { color:#7a6a58; }

.tcf-foot { position:absolute; left:13px; right:13px; bottom:6px; height:11px; z-index:4;
  display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between;
  -webkit-align-items:center; align-items:center; font-size:6.4px; font-weight:bold; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.88); text-shadow:0 1px 1px rgba(0,0,0,.75); }
.tcf-egg .tcf-foot { color:#4a3410; text-shadow:0 1px 0 rgba(255,255,255,.5); }

.tcf-stamp { position:absolute; right:15px; top:127px; z-index:4; font-size:6.6px; font-weight:bold;
  letter-spacing:.08em; padding:1px 4px; border-radius:2px; color:#241a04;
  background:linear-gradient(#ffe38a, #c8961a); box-shadow:0 1px 2px rgba(0,0,0,.55); }
.tcf-stamp.s-foil     { background:linear-gradient(90deg, #ff9ad5, #ffe98a, #9affd9, #9ad0ff); color:#1b1030; }
.tcf-stamp.s-animated { background:linear-gradient(#ff7b7b, #a32d2d); color:#fff; }

/* ---- Variants ----------------------------------------------- */

.tcf-holo { position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(115deg, rgba(255,90,200,0) 0%, rgba(255,90,200,.5) 20%, rgba(255,230,90,.5) 35%,
    rgba(90,255,190,.5) 50%, rgba(90,170,255,.5) 65%, rgba(190,90,255,.5) 80%, rgba(255,90,200,0) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 5px, rgba(255,255,255,.28) 6px, rgba(255,255,255,0) 8px);
  background-size:300% 100%, 100% 100%; mix-blend-mode:color-dodge;
  -webkit-animation:tcHolo 6s ease-in-out infinite alternate; animation:tcHolo 6s ease-in-out infinite alternate; }
.tcf-spark { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.tcf-spark path { opacity:0; -webkit-animation:tcTwinkle 3.2s ease-in-out infinite; animation:tcTwinkle 3.2s ease-in-out infinite; }

.tcf-foil { position:absolute; left:0; top:0; right:0; bottom:0; z-index:3; pointer-events:none;
  background-image:linear-gradient(120deg, rgba(255,0,153,0) 8%, rgba(255,0,153,.38) 24%, rgba(255,221,0,.38) 37%,
    rgba(0,255,170,.38) 50%, rgba(0,170,255,.38) 63%, rgba(187,0,255,.38) 76%, rgba(187,0,255,0) 92%),
    radial-gradient(rgba(255,255,255,.6) .7px, rgba(255,255,255,0) 1.3px);
  background-size:260% 100%, 7px 7px; mix-blend-mode:color-dodge;
  -webkit-animation:tcFoil 8s ease-in-out infinite alternate; animation:tcFoil 8s ease-in-out infinite alternate; }
.v-animated .tcf-foil { background-image:linear-gradient(120deg, rgba(255,60,60,0) 8%, rgba(255,60,60,.4) 26%,
    rgba(255,200,0,.4) 42%, rgba(255,90,200,.4) 58%, rgba(120,120,255,.4) 74%, rgba(120,120,255,0) 92%),
    radial-gradient(rgba(255,255,255,.6) .7px, rgba(255,255,255,0) 1.3px); }
.tcf.v-animated { box-shadow:0 0 0 1px #000, 0 0 7px 1px rgba(255,90,90,.55); }

@-webkit-keyframes tcHolo    { from { background-position:0% 0, 0 0; } to { background-position:100% 0, 0 0; } }
@keyframes         tcHolo    { from { background-position:0% 0, 0 0; } to { background-position:100% 0, 0 0; } }
@-webkit-keyframes tcFoil    { from { background-position:0% 0, 0 0; } to { background-position:100% 0, 3px 5px; } }
@keyframes         tcFoil    { from { background-position:0% 0, 0 0; } to { background-position:100% 0, 3px 5px; } }
@-webkit-keyframes tcTwinkle { 0%, 100% { opacity:0; } 45% { opacity:.95; } 60% { opacity:.1; } }
@keyframes         tcTwinkle { 0%, 100% { opacity:0; } 45% { opacity:.95; } 60% { opacity:.1; } }

@media (prefers-reduced-motion: reduce) {
  .tcf-holo, .tcf-foil, .tcf-spark path { -webkit-animation:none; animation:none; }
  .tcf-spark path { opacity:.7; }
}

/* ---- Wear ----------------------------------------------------- */

.tcf-age { position:absolute; left:0; top:0; right:0; bottom:0; z-index:5; pointer-events:none;
  background:linear-gradient(135deg, #e6c888, #b3844a); mix-blend-mode:multiply; }
.tcf-grime { position:absolute; left:0; top:0; right:0; bottom:0; z-index:5; pointer-events:none;
  background-image:radial-gradient(rgba(70,45,20,.6) .6px, rgba(0,0,0,0) 1.1px), radial-gradient(rgba(70,45,20,.4) .5px, rgba(0,0,0,0) 1px);
  background-size:9px 11px, 13px 7px; mix-blend-mode:multiply; }
.tcf-wear { position:absolute; left:0; top:0; width:200px; height:280px; z-index:6; pointer-events:none; }
.tcf-wart { position:absolute; z-index:6; pointer-events:none; max-width:none; }
.tcf-sleeve { position:absolute; left:0; top:0; right:0; bottom:0; z-index:7; pointer-events:none; border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22), inset 0 0 0 3px rgba(0,0,0,.15);
  background:linear-gradient(125deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 64%,
    rgba(255,255,255,.10) 80%, rgba(255,255,255,0) 92%); }

/* ---- Backs -------------------------------------------------- */

.tcb { position:relative; width:200px; height:280px; border-radius:10px; overflow:hidden; background:#16120d;
  box-shadow:0 0 0 1px rgba(0,0,0,.6); }
.tcb img { position:absolute; left:0; top:0; width:100%; height:100%;
  image-rendering:-moz-crisp-edges; image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor; }
.tcb-plain { background:
  radial-gradient(circle at 50% 50%, rgba(170,255,68,.28) 0, rgba(170,255,68,0) 42%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 12px),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 12px),
  linear-gradient(160deg, #1f4d14, #0a1f06);
  box-shadow:inset 0 0 0 7px #16120d, inset 0 0 0 9px #c8961a, inset 0 0 0 11px #16120d; }
.tcb-plain:before { content:''; position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px;
  -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);
  border:3px solid #c8961a; background:radial-gradient(#2f6e1c, #0d2a08);
  box-shadow:0 0 0 4px #16120d, 0 0 22px rgba(170,255,68,.35); }
.tcb-emb { position:absolute; left:0; right:0; top:50%; margin-top:-17px; text-align:center; color:#ffe38a;
  font-family:Verdana, Tahoma, sans-serif; text-shadow:0 1px 2px #000; }
.tcb-emb span { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.tcb-emb b { display:block; font-size:19px; letter-spacing:.12em; }
.tcb-lab { position:absolute; left:8px; right:8px; bottom:12px; padding:3px 0; text-align:center; border-radius:3px;
  background:rgba(0,0,0,.72); color:#fff; font:bold 15px Verdana, sans-serif; letter-spacing:.04em; }

/* ---- The graded case ---------------------------------------- */

.tcs { position:relative; width:236px; height:368px; border-radius:12px; box-sizing:border-box;
  background:linear-gradient(135deg, rgba(235,242,250,.55), rgba(200,214,230,.2) 40%, rgba(235,242,250,.45));
  border:2px solid rgba(225,235,245,.9);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.14), inset 0 0 14px rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.55); }
.tcs-label { position:absolute; left:9px; right:9px; top:8px; height:54px; box-sizing:border-box; overflow:hidden;
  border-radius:4px; padding:5px 48px 3px 7px; color:#1c1406; font-family:Verdana, Tahoma, sans-serif;
  background:linear-gradient(#fffdf6, #eee6cd); border:2px solid #b8932f;
  box-shadow:inset 0 0 0 1px #fff, 0 1px 2px rgba(0,0,0,.35); }
.tcs-l1 { display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between;
  font-size:6.3px; font-weight:bold; letter-spacing:.05em; color:#7a5a12; text-transform:uppercase; white-space:nowrap; }
.tcs-l1 span + span { margin-left:6px; }
.tcs-l2 { margin-top:4px; font-size:10px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcs-var { font-size:6.5px; margin-left:4px; padding:0 3px; background:#1c1406; color:#ffe38a; border-radius:2px; vertical-align:2px; }
.tcs-l3 { margin-top:4px; display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between;
  font-size:6.8px; font-weight:bold; white-space:nowrap; }
.tcs-cert { color:#6a5a3a; font-weight:normal; margin-left:6px; }
.tcs-num { position:absolute; right:0; top:0; bottom:0; width:44px; border-left:1px solid rgba(184,147,47,.6);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center; font:bold 28px/1 Verdana, sans-serif; color:#1c1406; }
.tcs.g-gem .tcs-num { color:#a81d1d; }
.tcs-window { position:absolute; left:16px; top:72px; width:200px; height:280px; border-radius:10px;
  box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 0 0 5px rgba(0,0,0,.22); }
.tcs-glare { position:absolute; left:0; top:0; right:0; bottom:0; border-radius:10px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 70%,
    rgba(255,255,255,.12) 84%, rgba(255,255,255,0) 95%); }

/* ---- Tags under a card -------------------------------------- */

.tcc { font-size:10px; line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#cfe8b8; }
.tcc-cond { font-weight:bold; }
.c-mint      { color:#7dffb0; }
.c-near_mint { color:#b9f28a; }
.c-light     { color:#f2e27a; }
.c-moderate  { color:#f2b35a; }
.c-heavy     { color:#f27a5a; }
.c-damaged   { color:#ff6a78; }
.tcc-var { margin-left:3px; padding:0 4px; border-radius:2px; font-size:9px; background:#3d3410; color:#ffe38a; }
.tcc-var.v-foil     { background:linear-gradient(90deg, #6a2a58, #5a5a14, #1a5a4a, #1a3a6a); color:#fff; }
.tcc-var.v-animated { background:#6a1a1a; color:#ffd0d0; }
.tcc-grade { display:inline-block; min-width:14px; padding:0 2px; text-align:center; background:#c8a23f; color:#1c1406; border-radius:2px; }

.tcm { height:4px; background:#081204; border:1px solid #17400c; margin-top:2px; overflow:hidden; }
.tcm span { display:block; height:100%; background:#3dbb4a; }
.tcm.t1 span { background:#9ad23a; }
.tcm.t2 span { background:#e0c83a; }
.tcm.t3 span { background:#e8962f; }
.tcm.t4 span { background:#e0602f; }
.tcm.t5 span { background:#d23a4a; }
.tcm-sealed span { width:100%; background:repeating-linear-gradient(45deg, #c8a23f 0, #c8a23f 3px, #8a6a1a 3px, #8a6a1a 6px); }

.tci { width:100%; border-collapse:collapse; font-size:11px; }
.tci th { text-align:left; color:#8fc76a; font-weight:normal; padding:2px 8px 2px 0; vertical-align:top; white-space:nowrap; width:1%; }
.tci td { color:#eaffd8; padding:2px 0; }
.tci a { color:#aaff44; }
.tci .tcm { display:inline-block; width:74px; vertical-align:middle; margin:0 4px 0 0; }
.tci-dim { color:#8fc76a; font-size:10px; }

/* Where a copy has been. Sits under the detail table in the card window. */
.tch { margin-top:8px; border-top:1px solid rgba(143,199,106,0.35); padding-top:6px; }
.tch-h { color:#8fc76a; font-size:10px; text-transform:uppercase; letter-spacing:0.06em; margin:6px 0 2px; }
.tch-h:first-child { margin-top:0; }
.tch ol, .tch ul { margin:0; padding:0 0 0 14px; font-size:11px; color:#eaffd8; }
.tch li { margin:1px 0; line-height:1.35; }
.tch li i { color:#8fc76a; font-style:normal; font-size:10px; }
.tch li span { color:#8fc76a; font-size:10px; }
.tch-log { list-style:none; padding-left:0; }
.tch-log li:before { content:"\00b7"; color:#8fc76a; margin-right:5px; }
.tch-who { list-style:none; padding-left:0; }
.tch-chain .tch-gap { color:#8fc76a; }

/* ---- Card window (binder and grading) ------------------------ */

.tcx-veil { position:fixed; left:0; top:0; right:0; bottom:0; z-index:9000; background:rgba(0,0,0,.72); display:none; }
.tcx-veil.on { display:block; }
.tcx { position:fixed; left:50%; top:50%; z-index:9001; width:640px; max-width:96%; max-height:94%; overflow:auto;
  -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);
  background:#0a1a06; border:1px solid #3d8b2a; box-shadow:0 10px 40px rgba(0,0,0,.8); color:#cfe8b8; display:none; }
.tcx.on { display:block; }
.tcx-head { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  background:linear-gradient(180deg, #1a5a0a, #0d2a06); padding:6px 9px; border-bottom:1px solid #3d8b2a; }
.tcx-head h4 { margin:0; font-size:13px; color:#eaffd8; -webkit-flex:1; flex:1; }
.tcx-x { background:#5a1a0a; border:1px solid #8b2a2a; color:#ffd2d2; font-size:12px; font-weight:bold; width:24px; height:22px; cursor:pointer; }
.tcx-body { display:-webkit-flex; display:flex; gap:14px; padding:12px; -webkit-align-items:flex-start; align-items:flex-start; }
.tcx-card { -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-perspective:700px; perspective:700px; }
.tcx-side { -webkit-flex:1; flex:1; min-width:0; }
.tcx-flavor { font-style:italic; color:#bfe89a; border-left:3px solid #3d8b2a; padding:3px 8px; margin:8px 0; font-size:11px; }
.tcx-act { border-top:1px solid #17400c; margin-top:9px; padding-top:8px; }
.tcx-act h5 { margin:0 0 4px; font-size:11px; color:#aaff44; }
.tcx-act p { margin:0 0 6px; font-size:10px; color:#8fc76a; line-height:1.45; }
.tcx-act form { margin:0; display:-webkit-flex; display:flex; gap:5px; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; }
.tcx-act input[type=number] { width:96px; background:#0d2408; border:1px solid #1a5a0a; color:#cfe8b8; font-size:12px; padding:4px; }
.tcx-btn { background:#1a5a0a; border:1px solid #3d8b2a; color:#eaffd8; font-size:11px; padding:5px 11px; cursor:pointer; }
.tcx-btn:hover { background:#237a0e; }
.tcx-btn.gold { background:#6a4f0e; border-color:#c8961a; color:#ffe8b0; }
.tcx-btn.warn { background:#5a1a0a; border-color:#8b2a2a; color:#ffd2d2; }
.tcx-btn:disabled { background:#2a2a2a; border-color:#444; color:#777; cursor:default; }
.tcx-no { font-size:10px; color:#ffb0a0; background:#2a0e08; border:1px solid #5a1a0a; padding:4px 7px; }
.tcx-hint { font-size:10px; color:#7fb45a; margin-top:4px; }
@media (max-width:600px) {
  .tcx-body { -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:center; align-items:center; }
}

/* ============================================================
   THE TABLE
   ============================================================ */

.bt-game { display:-webkit-flex; display:flex; gap:12px; -webkit-align-items:flex-start; align-items:flex-start; }
.bt-main { -webkit-flex:1; flex:1; min-width:0; }
.bt-aside { -webkit-flex:0 0 262px; flex:0 0 262px; width:262px; position:-webkit-sticky; position:sticky; top:8px; }

/* The mat. Felt, a stitched edge, zones printed on it. */
.bt-mat { position:relative; border-radius:18px; padding:14px 14px 12px; color:#cfe8b8;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(90,170,60,.22), rgba(0,0,0,0) 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    linear-gradient(180deg, #0f2e0c, #0b230a 50%, #0f2e0c);
  box-shadow:inset 0 0 0 3px #07140a, inset 0 0 50px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.7);
  border:1px solid #1d4a14; }
.bt-mat:before { content:''; position:absolute; left:7px; top:7px; right:7px; bottom:7px; border-radius:13px;
  border:2px dashed rgba(170,255,68,.14); pointer-events:none; }

.bt-half { position:relative; z-index:1; }
.bt-row { display:-webkit-flex; display:flex; gap:10px; -webkit-align-items:stretch; align-items:stretch; margin:6px 0; }
.bt-foe .bt-row.front { margin-bottom:10px; }
.bt-me  .bt-row.front { margin-top:10px; }

.bt-zone { position:relative; border:2px solid rgba(170,255,68,.16); border-radius:9px; padding:8px 7px 28px;
  background:rgba(0,0,0,.12); box-shadow:inset 0 0 12px rgba(0,0,0,.35); min-height:150px; }
.bt-zone > .bt-zl { position:absolute; left:0; right:0; bottom:3px; text-align:center; font-size:8.5px; font-weight:bold;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(170,255,68,.4); pointer-events:none; white-space:nowrap; }
.bt-zone.pile { -webkit-flex:0 0 112px; flex:0 0 112px; width:112px; text-align:center; }
.bt-zone.grow { -webkit-flex:1; flex:1; min-width:0; }
.bt-cards { display:-webkit-flex; display:flex; gap:8px; -webkit-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-align-items:flex-start; align-items:flex-start; -webkit-justify-content:center; justify-content:center; }
.bt-cards.tight .bt-unit + .bt-unit { margin-left:-26px; }
.bt-empty { color:rgba(170,255,68,.22); font-size:10px; text-align:center; padding-top:55px; width:100%; }

/* A card on the table, with its tokens. */
.bt-unit { position:relative; display:inline-block; vertical-align:top; }
.bt-unit .tcw { cursor:pointer; }
.bt-unit .tcw-t { -webkit-transition:-webkit-transform .15s; transition:transform .15s; }
.bt-unit .tcw-in { -webkit-filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)); filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.bt-unit:hover { z-index:20; }
.bt-slot { width:96px; height:134px; border:2px dashed rgba(170,255,68,.14); border-radius:8px; box-sizing:border-box;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  color:rgba(170,255,68,.25); font-size:8px; letter-spacing:.12em; text-transform:uppercase; text-align:center; }

.bt-tok { position:absolute; z-index:8; font:bold 11px/1 Verdana, sans-serif; color:#fff; white-space:nowrap;
  text-shadow:0 1px 1px #000; border-radius:9px; padding:3px 6px; box-shadow:0 1px 3px rgba(0,0,0,.7); pointer-events:none; }
.bt-hp { left:50%; bottom:-9px; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
  background:linear-gradient(#e0413a, #7a1010); border:1px solid #2a0505; }
.bt-hp.ok   { background:linear-gradient(#3fae45, #1a5a1e); border-color:#06240a; }
.bt-hp.low  { background:linear-gradient(#e0a03a, #7a4a10); border-color:#2a1805; }
.bt-hp small { font-size:8px; opacity:.8; }
.bt-mana { right:-7px; top:24px; width:22px; height:22px; padding:0; border-radius:50%; line-height:22px; text-align:center;
  background:radial-gradient(circle at 35% 30%, #b5dcff, #3a86e6 45%, #143f86); border:1px solid #0b1f3f; }
.bt-dmg { left:-7px; top:24px; background:linear-gradient(#ff5a4a, #a01a0a); border:1px solid #300; padding:3px 5px; }
.bt-kw { left:50%; top:-8px; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
  font-size:8px; letter-spacing:.1em; padding:2px 5px; border-radius:2px; background:#c8961a; color:#241a04; text-shadow:none; }
.bt-kw.lure { background:#e06aa0; color:#2a0418; }
.bt-kw.shield { background:#6ab0e0; color:#04202a; }
.bt-energy { left:4px; right:4px; bottom:-9px; height:16px; padding:0; border-radius:8px; background:#2a1c04;
  border:1px solid #000; overflow:hidden; }
.bt-energy span { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(#ffd26a, #c8861a); }
.bt-energy b { position:relative; display:block; text-align:center; line-height:14px; font-size:9px; }
.bt-down { left:50%; top:50%; -webkit-transform:translate(-50%, -50%) rotate(-12deg); -ms-transform:translate(-50%, -50%) rotate(-12deg);
  transform:translate(-50%, -50%) rotate(-12deg); background:rgba(40,0,0,.82); border:1px solid #a33; color:#ffb0b0;
  font-size:9px; letter-spacing:.14em; border-radius:2px; }

/* Your own face down cards turn over while you hover them. Nobody else's do,
   because nobody else's face is on the page at all. */
.bt-unit.fd.mine .tcw:hover .tcw-peek { display:block; }
.bt-unit.fd.mine .tcw:hover .tcw-peek .tcw-in { -webkit-filter:drop-shadow(0 6px 10px rgba(0,0,0,.8)); filter:drop-shadow(0 6px 10px rgba(0,0,0,.8)); }
.bt-unit.fd.mine .tcw:after { content:'Only you can see this'; position:absolute; left:-10px; right:-10px; top:-14px;
  text-align:center; font:bold 8px Verdana, sans-serif; color:#ffe38a; letter-spacing:.06em; display:none; z-index:9; }
.bt-unit.fd.mine .tcw:hover:after { display:block; }

/* Piles. A stack a few cards thick, with a count on top. */
.bt-pile { position:relative; display:inline-block; cursor:pointer; margin:2px auto 0; }
.bt-pile .bt-stack { position:absolute; left:0; top:0; width:96px; height:134px; border-radius:6px; background:#16120d;
  box-shadow:0 0 0 1px rgba(0,0,0,.6); }
.bt-count { position:absolute; right:-6px; top:-6px; z-index:9; min-width:22px; padding:3px 5px; border-radius:11px;
  background:#0a1a06; border:1px solid #3d8b2a; color:#aaff44; font:bold 11px/1 Verdana, sans-serif; text-align:center; }
.bt-pile.empty { cursor:default; }
.bt-pile.empty .bt-slot { margin:0; }

/* Hands. */
.bt-hand-foe { display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; height:62px;
  margin:0 0 -18px; position:relative; z-index:2; overflow:hidden; }
.bt-hand-foe .tcw { margin:0 -12px; }
.bt-hand { display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center;
  -webkit-align-items:flex-end; align-items:flex-end; padding:24px 10px 6px; min-height:190px; position:relative; }
.bt-hc { position:relative; margin:0 -16px; -webkit-transition:-webkit-transform .15s; transition:transform .15s; }
.bt-hc .tcw { cursor:pointer; }
.bt-hc:hover { z-index:30; -webkit-transform:translateY(-16px) !important; -ms-transform:translateY(-16px) !important; transform:translateY(-16px) !important; }
.bt-hc.sel { z-index:31; -webkit-transform:translateY(-28px) !important; -ms-transform:translateY(-28px) !important; transform:translateY(-28px) !important; }
.bt-hc.sel .tcw-in { -webkit-filter:drop-shadow(0 0 6px #aaff44) drop-shadow(0 0 2px #aaff44); filter:drop-shadow(0 0 6px #aaff44) drop-shadow(0 0 2px #aaff44); }
.bt-hc.cant .tcw-in { -webkit-filter:grayscale(.6); filter:grayscale(.6); }
.bt-hc.cant .tcw-t:after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:6px; background:rgba(0,0,0,.42); }
.bt-hc .bt-why { position:absolute; left:4px; right:4px; bottom:6px; z-index:9; background:rgba(40,8,4,.9); color:#ffc0b0;
  border:1px solid #6a1a0a; font-size:8.5px; line-height:1.25; padding:2px 3px; text-align:center; border-radius:2px; display:none; }
.bt-hc.cant:hover .bt-why { display:block; }
.bt-hc .bt-cost { position:absolute; left:-4px; top:-6px; z-index:9; }

/* The play tray under a picked card. Without scripting these are simply
   always showing, which keeps the board playable either way. */
.bt-tray { position:absolute; left:50%; top:100%; z-index:40; width:188px; margin-left:-94px; margin-top:6px;
  background:#0a1a06; border:1px solid #3d8b2a; padding:6px; box-shadow:0 4px 14px rgba(0,0,0,.8); font-size:10px; }
.bt-tray form { margin:0; display:-webkit-flex; display:flex; gap:4px; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
/* The picker gets a row to itself. Target names run long ("Watch your
   Crimson Crawler (28 of 28 HP)") and sharing a row with the button
   squeezed them down to two or three letters. */
.bt-tray select { -webkit-flex:1 1 100%; flex:1 1 100%; width:100%; min-width:0; font-size:10px; margin-bottom:4px; }
.bt-tray button { -webkit-flex:1; flex:1; }
.bt-tray .bt-tip { width:100%; color:#8fc76a; margin-bottom:3px; }
.lp-js .bt-tray { display:none; }
.lp-js .sel > .bt-tray { display:block; }
.lp-nojs .bt-hand { -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.lp-nojs .bt-hc { margin:0 4px 90px; }

/* Targets light up once an attack or a skill is picked. */
.bt-unit.tgt .tcw-t { -webkit-animation:btPulse 1.1s ease-in-out infinite; animation:btPulse 1.1s ease-in-out infinite; }
.bt-unit.tgt .tcw { cursor:crosshair; }
.bt-unit.tgt:after { content:'Target'; position:absolute; left:50%; top:-15px; -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%); transform:translateX(-50%); z-index:10; background:#aaff44; color:#0a1a06;
  font:bold 9px Verdana, sans-serif; padding:1px 5px; border-radius:2px; letter-spacing:.1em; text-transform:uppercase; }
.bt-unit.has-kw.tgt:after { top:-27px; }
@-webkit-keyframes btPulse { 0%, 100% { -webkit-filter:drop-shadow(0 0 2px #aaff44); } 50% { -webkit-filter:drop-shadow(0 0 9px #aaff44); } }
@keyframes btPulse { 0%, 100% { filter:drop-shadow(0 0 2px #aaff44); } 50% { filter:drop-shadow(0 0 9px #aaff44); } }

/* Egg feeding, under your own eggs. */
.bt-feed { position:absolute; left:50%; top:100%; margin-left:-60px; margin-top:12px; width:120px; z-index:40;
  background:#0a1a06; border:1px solid #c8961a; padding:5px; font-size:10px; display:none; box-shadow:0 4px 14px rgba(0,0,0,.8); }
.bt-feed form { margin:0; display:-webkit-flex; display:flex; gap:3px; }
.bt-feed input { width:44px; font-size:10px; }
.lp-nojs .bt-feed, .bt-unit.feeding .bt-feed { display:block; }

/* The line across the middle. */
.bt-center { position:relative; z-index:2; margin:4px -6px; padding:6px 8px; border-radius:6px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); border:1px solid rgba(170,255,68,.2);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:10px; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.bt-phase { font:bold 12px Verdana, sans-serif; color:#eaffd8; white-space:nowrap; }
.bt-steps { display:-webkit-flex; display:flex; gap:3px; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.bt-step { font-size:9.5px; padding:3px 7px; border-radius:10px; background:#0d2408; border:1px solid #17400c; color:#6a9a4a; white-space:nowrap; }
.bt-step.done { color:#3f6a2a; text-decoration:line-through; }
.bt-step.now  { background:#aaff44; border-color:#d8ffb0; color:#0a1a06; font-weight:bold; }
.bt-over { font-size:10px; color:#ffe8b0; letter-spacing:.08em; text-transform:uppercase; }
.bt-flags { margin-left:auto; display:-webkit-flex; display:flex; gap:4px; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.bt-flag { font-size:9.5px; padding:2px 6px; border-radius:2px; background:#3a2a0a; border:1px solid #8b6a2a; color:#ffe8b0; }
.bt-next { -webkit-flex-basis:100%; flex-basis:100%; font-size:10px; color:#8fc76a; }
.bt-next b { color:#d8ffb0; }

/* What an attack would do to each target, shown while one is picked. */
.bt-hit { position:absolute; right:-7px; top:-9px; z-index:8; pointer-events:none;
  min-width:20px; padding:1px 5px; border-radius:11px; text-align:center; white-space:nowrap;
  font:bold 11px Verdana, sans-serif; background:#7a1010; border:1px solid #ffb0a0; color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.6); }
.bt-hit.kill { background:#c01010; border-color:#fff; }
.bt-hit i { font-style:normal; font-size:9px; display:block; line-height:1.1; }
.bt-hit.up   i { color:#ffe38a; }
.bt-hit.down i { color:#9ad0ff; }

/* Tidying the table. */
.bt-tools { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:9px; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:10px 0 0; font-size:11px; }
.bt-tools button, .bt-guidebtn { background:#1a5a0a; border:1px solid #3d8b2a; color:#d8ffb0;
  font-size:11px; padding:4px 11px; cursor:pointer; font-family:inherit; }
.bt-tools button:hover, .bt-guidebtn:hover { background:#2a7a12; color:#fff; }
.bt-tools a { color:#8fc76a; }
.bt-toolnote { color:#6a9a4a; font-size:10.5px; -webkit-flex:1; flex:1; min-width:190px; }
/* Your own cards can be turned straight. Sideways cursor, because sideways is
   the direction that does anything: a card never leaves its slot. */
/* What a card refuses to be played without. */
.tcf-req { color:#8a2a2a; }

/* Everything sitting on a monster: poison, burn, a shield, a countdown. */
.bt-fx { position:absolute; left:-4px; top:-7px; z-index:8; display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column; gap:2px; pointer-events:none; }
.bt-fxc { font:bold 9px Verdana, sans-serif; letter-spacing:.02em; padding:1px 4px; border-radius:2px;
  white-space:nowrap; background:#5a1010; border:1px solid #ffb0a0; color:#ffe4e4;
  box-shadow:0 1px 2px rgba(0,0,0,.6); pointer-events:auto; cursor:help; }
.bt-fxc.good { background:#14400a; border-color:#aaff44; color:#eaffd8; }

/* Which monster a watching defense is guarding. Owner only. */
.bt-tok.bt-watch { background:#1a3a5a; border-color:#8fc2e8; color:#d8ecff; max-width:98px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bt-turn { cursor:ew-resize; }
.bt-turn.bt-turning { z-index:40; }
.bt-turn.bt-turning .tcw-t { -webkit-filter:brightness(1.12); filter:brightness(1.12); }

/* The quick guide. */
.bt-guide { margin:10px 0 0; padding:11px 13px; background:#0a1a06; border:1px solid #1a5a0a; }
.bt-guide h4 { margin:0 0 5px; font-size:12px; color:#aaff44; }
.bt-guide p { margin:0 0 9px; font-size:11.5px; color:#8fc76a; line-height:1.6; }
.bt-guide dl { margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px 16px; }
.bt-guide dt { color:#aaff44; font-size:11.5px; font-weight:bold; }
.bt-guide dd { margin:0; font-size:11px; line-height:1.55; color:#cfe8b8; }
.bt-guide dl > div { border-left:2px solid #1a5a0a; padding-left:8px; }

/* A term anywhere on the board that the quick guide has a line about. */
.bt-kwx { border-bottom:1px dotted #8fc76a; cursor:help; }

/* Player strips above and below the mat. */
.bt-player { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px;
  -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:6px 10px; margin:0 6px; background:#0a1a06; border:1px solid #1a5a0a; font-size:11px; }
.bt-player.foe { border-bottom:none; border-radius:10px 10px 0 0; }
.bt-player.me  { border-top:none; border-radius:0 0 10px 10px; }
.bt-pname { font-weight:bold; font-size:13px; color:#eaffd8; }
.bt-pname small { font-weight:normal; color:#6a9a4a; font-size:10px; margin-left:4px; }
.bt-gems { display:-webkit-inline-flex; display:inline-flex; gap:2px; vertical-align:middle; -webkit-flex-wrap:wrap; flex-wrap:wrap; max-width:180px; }
.bt-gem { width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #b5dcff, #3a86e6 45%, #143f86);
  border:1px solid #0b1f3f; box-shadow:0 0 3px rgba(80,160,255,.6); }
.bt-gem.spent { background:#0d1a2a; box-shadow:none; border-color:#1e3a5f; }
.bt-gem.extra { background:radial-gradient(circle at 35% 30%, #fff1b0, #e0b03a 45%, #7a5a10); border-color:#3f2a05; }
.bt-mananum { color:#8fc2e8; margin-left:4px; }
.bt-mananum b { color:#d8ecff; font-size:13px; }
.bt-els { display:-webkit-inline-flex; display:inline-flex; gap:3px; vertical-align:middle; }
.bt-els i { display:inline-block; width:15px; height:15px; border-radius:50%; border:1px solid #000; text-align:center;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4); }
.bt-els i svg { width:10px; height:10px; margin-top:2px; }
.bt-els i b { color:#fff; font-size:8px; line-height:13px; font-style:normal; }
.bt-stat { color:#8fc76a; white-space:nowrap; }
.bt-stat b { color:#aaff44; }
.bt-turnflag { margin-left:auto; font-weight:bold; padding:3px 9px; border-radius:2px; }
.bt-turnflag.yours { background:#aaff44; color:#0a1a06; }
.bt-turnflag.theirs { background:#3a2a0a; color:#ffe8b0; border:1px solid #8b6a2a; }

/* Controls under your side. */
.bt-dock { display:-webkit-flex; display:flex; gap:10px; -webkit-align-items:flex-end; align-items:flex-end;
  -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:8px 10px; margin-top:8px; background:#0a1a06; border:1px solid #1a5a0a; }
.bt-dock form { margin:0; }
.bt-dock label { font-size:10px; display:block; color:#8fc76a; margin-bottom:2px; }
.bt-end { margin-left:auto; font:bold 14px Verdana, sans-serif !important; padding:10px 22px !important; letter-spacing:.04em;
  background:linear-gradient(#c8961a, #6a4f0e) !important; border:1px solid #ffe38a !important; color:#fff !important;
  text-shadow:0 1px 1px #000; box-shadow:0 0 12px rgba(255,210,90,.35); cursor:pointer; }
.bt-end:hover { background:linear-gradient(#e0ab24, #7a5a12) !important; }
.bt-note { width:100%; font-size:10px; color:#6a9a4a; margin:2px 0 0; }

/* The inspector. */
.bt-insp { background:#0a1a06; border:1px solid #1a5a0a; padding:10px; text-align:center; }
.bt-insp h4 { margin:0 0 6px; font-size:12px; color:#aaff44; text-align:left; }
.bt-insp .tcw { margin:0 auto; }
.bt-insp-card { min-height:336px; -webkit-perspective:700px; perspective:700px; }
.bt-insp-empty { width:240px; height:336px; margin:0 auto; border:2px dashed #17400c; border-radius:12px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  color:#3f6a2a; font-size:11px; padding:20px; box-sizing:border-box; }
.bt-insp-info { text-align:left; margin-top:8px; font-size:11px; }
.bt-insp-info .bt-fdnote { background:#3a2a0a; border:1px solid #8b6a2a; color:#ffe8b0; padding:4px 6px; margin-bottom:5px; font-size:10px; }
.bt-insp-close { display:none; }

.bt-log { background:#081204; border:1px solid #17400c; padding:6px 8px; max-height:260px; overflow-y:auto; font-size:10.5px; margin-top:10px; text-align:left; }
.bt-log div { padding:2px 0; color:#7fb45a; border-bottom:1px solid #0e2408; }
.bt-log .me { color:#d8ffb0; }
.bt-log .ph { color:#4f7a34; }

/* Pile lists. */
.bt-pilelist { display:none; }
.tcx .bt-pilegrid { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:6px; padding:10px;
  -webkit-justify-content:center; justify-content:center; }
.tcx.wide { width:806px; }

/* End of match. */
.bt-result { text-align:center; padding:14px; margin-bottom:10px; border:1px solid #3d8b2a; background:linear-gradient(#12330a, #0a1a06); }
.bt-result h2 { margin:0 0 4px; font:bold 22px Verdana, sans-serif; color:#aaff44; letter-spacing:.06em; }
.bt-result.lost h2 { color:#ffb0a0; }
.bt-prize { background:linear-gradient(#2a1c04,#12330a); border:1px solid #c8961a; padding:10px; margin-bottom:10px; font-size:12px; }
.bt-prize h3 { margin:0 0 4px; font-size:13px; color:#ffe38a; }
.bt-prize p { margin:0; }
.bt-prize-links { margin-top:5px !important; font-size:11px; }
.bt-prize-links a { color:#ffe38a; }
.bt-wear { background:#0a1a06; border:1px solid #1a5a0a; padding:10px; margin-bottom:10px; font-size:11px; }
.bt-wear h3 { margin:0 0 6px; font-size:12px; color:#aaff44; }
.bt-wear ul { margin:4px 0 0 16px; padding:0; }

/* Narrow screens. The inspector becomes a sheet that opens on a tap. */
@media (max-width:1180px) {
  .bt-aside { position:static; width:auto; -webkit-flex:none; flex:none; }
  .bt-game { -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:stretch; align-items:stretch; }
  .bt-insp { position:fixed; left:50%; top:50%; z-index:9001; width:290px; margin-left:-145px;
    -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);
    box-shadow:0 10px 40px rgba(0,0,0,.85); display:none; max-height:94%; overflow:auto; }
  .bt-insp.on { display:block; }
  .bt-insp-close { display:block; position:absolute; right:6px; top:6px; }
}
@media (max-width:760px) {
  .bt-mat { padding:8px 6px; border-radius:10px; }
  .bt-row { gap:5px; }
  .bt-zone { padding:5px 4px 24px; min-height:0; }
  .bt-cards .bt-slot { display:none; }
  .bt-zone.pile { -webkit-flex:0 0 66px; flex:0 0 66px; width:66px; }
  .bt-cards { gap:4px; }
  .bt-unit .tcw.s48, .bt-pile .tcw.s48 { width:58px; height:81px; }
  .bt-unit .tcw.s48 .tcw-in, .bt-pile .tcw.s48 .tcw-in { -webkit-transform:scale(.29); -ms-transform:scale(.29); transform:scale(.29); }
  .bt-pile .bt-stack { width:58px; height:81px; }
  .bt-slot { width:58px; height:81px; font-size:7px; }
  .bt-empty { padding-top:28px; }
  .bt-tok { font-size:9px; padding:2px 4px; }
  .bt-mana { width:17px; height:17px; line-height:17px; top:12px; }
  .bt-dmg { top:12px; }
  .bt-hand { padding-top:18px; min-height:130px; }
  .bt-hc { margin:0 -14px; }
  .bt-hc .tcw.s62 { width:80px; height:112px; }
  .bt-hc .tcw.s62 .tcw-in { -webkit-transform:scale(.4); -ms-transform:scale(.4); transform:scale(.4); }
  .bt-steps { display:none; }
  .bt-end { width:100%; margin-left:0; }
}