/* Aura Farm Defense (29 Oct, build step 1): the lobby, the board's stage and everything laid over it. */

/* ---- lobby ---- */
.td-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.td-grid { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.td-map, .td-team { border-radius: 20px; background: linear-gradient(180deg, var(--fill), var(--bg2)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.td-team { padding: 18px; }
.td-map-b { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.td-map-b h2 { font-size: 26px; font-weight: 900; font-style: italic; }
.td-map-b > p { margin: 0; color: var(--text2); }
.td-kicker { font: 800 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.td-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.td-facts b { color: var(--text); font-family: var(--display); }
.td-diff { align-self: flex-start; }
.td-rew { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--text2); }
.td-rew b { color: #e4d6ff; font-family: var(--display); }
.td-map-b .btn.big { align-self: stretch; margin-top: 6px; }
/* the world's picture (art/worlds/<id>.webp, rendered in Blender), over its colours */
.td-art { position: relative; height: 190px; overflow: hidden; background: linear-gradient(160deg, var(--a), var(--b)); }
.td-art img, .td-wart img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the world card in the lobby opens the world screen */
.td-artbtn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; font: inherit; text-align: left; }
.td-artbtn .td-art img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.td-artbtn:hover .td-art img { transform: scale(1.04); }
.td-artbtn:focus-visible { outline: 2px solid #7fc4ff; outline-offset: -2px; }
/* (29 Oct, "make the area here easier to tell you have to click to change worlds"; "make the change world gold like
   start and black text / icons"): the picture is a button and says so, with a gold Change world button on it that
   breathes, and on hover a gold edge lights round the picture */
.td-change { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 13px; border-radius: 999px;
  color: #160300; background: linear-gradient(180deg, #fff09a, #ffc21e 55%, #ff9a1a); box-shadow: 0 3px 0 #8a5000, inset 0 1px 0 rgba(255, 255, 255, .6);
  font: 800 13px/1 var(--display); transition: transform .2s, background .2s; animation: tdpick 2.4s ease-in-out infinite; }
.td-change svg { width: 16px; height: 16px; }
.td-change .td-chev { width: 14px; height: 14px; margin-left: -2px; }
.td-change small { padding: 3px 7px; border-radius: 999px; background: rgba(22, 3, 0, .12); color: rgba(22, 3, 0, .75); font: 700 11px/1 var(--display); }
@keyframes tdpick { 50% { box-shadow: 0 3px 0 #8a5000, 0 0 0 6px rgba(255, 194, 30, .3), inset 0 1px 0 rgba(255, 255, 255, .6); } }
.td-artbtn::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(127, 196, 255, 0); transition: box-shadow .25s; }
.td-artbtn:hover::after { box-shadow: inset 0 0 0 3px rgba(255, 210, 58, .9); }
.td-artbtn:hover .td-change { background: linear-gradient(180deg, #fff6c0, #ffd04a 55%, #ffab2e); transform: translateY(-1px); }

/* ---- the world screen (29 Oct): Anime Adventures hub style, cards in a row the wheel glides along ---- */
.tdw { position: fixed; inset: 0; z-index: 70; overflow: hidden; background: #0b0b0d; color: #fff; outline: none; --m: 24px; --bar: 60px; --info: 0px; --cw: 200px; --ch: 400px; --name: 20px; }
.tdw-back { position: absolute; inset: 0; background: linear-gradient(160deg, var(--a, #222), var(--b, #111)); opacity: .2; }
.tdw-back img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .35s; }
.tdw-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, .88), rgba(11, 11, 13, .45) 50%, rgba(11, 11, 13, .95)); }
.tdw-glow { position: absolute; left: -25%; right: -25%; bottom: -55%; height: 115%; background: radial-gradient(closest-side, rgba(90, 140, 255, .32), rgba(90, 140, 255, 0)); pointer-events: none; }
.tdw-edge { position: absolute; inset: 0; pointer-events: none; z-index: 6; border: 3px solid transparent;
  border-image: linear-gradient(120deg, #5aa8ff, #9a6aff 50%, #5aa8ff) 1; }
.tdw-bar { position: absolute; left: 0; right: 0; top: 3px; height: var(--bar); display: flex; align-items: center; gap: 16px; padding: 0 var(--m); z-index: 4; }
.tdw-title { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 36px; border-radius: 9px; background: rgba(20, 22, 30, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.tdw-title svg { width: 16px; height: 16px; color: #8fc0ff; }
.tdw-title b { font: 800 13px/1 var(--display); letter-spacing: .04em; }
.tdw-count { color: rgba(255, 255, 255, .55); font-size: 12px; }
.tdw-x { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: rgba(30, 32, 42, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.tdw-x:hover { background: rgba(60, 64, 84, .95); }
.tdw-x svg { width: 18px; height: 18px; }
.tdw-info { position: absolute; left: 0; right: 0; top: calc(3px + var(--bar)); height: var(--info); display: none; padding: 0 var(--m) 6px; z-index: 3; }
.tdw.wide .tdw-info { display: flex; align-items: flex-end; gap: 24px; }
.tdw-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tdw-eye { display: flex; align-items: center; gap: 10px; }
.tdw-eye span { font: 800 12px/1 var(--display); letter-spacing: .14em; color: #8fc0ff; }
.tdw-eye i, .tdw-tag { font: 800 10px/22px var(--display); letter-spacing: .1em; font-style: normal; padding: 0 10px; border-radius: 11px; background: rgba(18, 18, 22, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; }
.tdw-eye i.good, .tdw-tag.good { background: #2fbf6f; box-shadow: none; color: #04130a; }
.tdw-eye i.next, .tdw-tag.next { background: #5aa8ff; box-shadow: none; color: #06101e; }
.tdw-info h2 { margin: 0; font: 900 italic clamp(28px, 4.4vw, 58px)/1.02 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdw-info p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
.tdw-segs { display: flex; gap: 6px; }
.tdw-segs span { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 700; }
.tdw-segs i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.tdw-segs .on { color: #fff; } .tdw-segs .on i { background: #2fbf6f; box-shadow: 0 0 8px #2fbf6f; }
.tdw-r { position: relative; width: 230px; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.tdw-rank { position: absolute; right: 0; bottom: 48px; font: 800 100px/1 ui-monospace, "Geist Mono", monospace; color: rgba(255, 255, 255, .14); }
.tdw-pick { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(120deg, #5aa8ff, #9a6aff); color: #070a14; font: 800 13px/1 var(--display); white-space: nowrap; }
.tdw-pick svg { width: 15px; height: 15px; }
.tdw-pick:hover { filter: brightness(1.1); }
.tdw-pick.off { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.tdw-row { position: absolute; left: 0; right: 0; overflow: visible; touch-action: pan-y; cursor: grab; z-index: 2; }
.tdw-row:active { cursor: grabbing; }
.tdw-track { display: flex; align-items: center; height: 100%; width: max-content; will-change: transform; }
.tdw-card { flex: none; width: var(--cw); height: 100%; display: grid; place-items: center; }
.tdw-in { position: relative; width: var(--cw); height: var(--ch); border-radius: 16px; overflow: hidden; cursor: pointer; background: linear-gradient(160deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .45); will-change: transform; user-select: none; }
.tdw-card.on .tdw-in { box-shadow: inset 0 0 0 3px #5aa8ff, 0 0 60px rgba(90, 140, 255, .45), 0 18px 40px rgba(0, 0, 0, .45); }
.tdw-card:not(.on):hover .tdw-in { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 40px rgba(0, 0, 0, .45); }
.tdw-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tdw-card.locked .tdw-in img { filter: grayscale(.5) brightness(.55); }
.tdw-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, .96)); }
.tdw-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 3; }
.tdw-tag { position: absolute; left: 10px; top: 10px; z-index: 4; }
.tdw-n { position: absolute; right: 12px; top: 12px; z-index: 4; font: 700 13px/1 ui-monospace, "Geist Mono", monospace; color: rgba(255, 255, 255, .6); }
.tdw-ck { position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5aa8ff; color: #06101e; }
.tdw-ck svg { width: 15px; height: 15px; }
.tdw-stamp { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px 9px;
  border-radius: 9px; background: rgba(11, 11, 13, .85); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); white-space: nowrap; }
.tdw-stamp b { font: 800 12px/1 var(--display); letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.tdw-stamp small { font-size: 10px; color: rgba(255, 255, 255, .6); }
.tdw-txt { position: absolute; left: 8%; right: 8%; bottom: calc(var(--cw) * .08); z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.tdw-txt b { font: 900 italic var(--name)/1.05 var(--display); text-wrap: balance; }
.tdw-txt small { font-size: max(11px, calc(var(--name) * .5)); color: rgba(214, 214, 222, .95); }
.tdw-seg { display: flex; gap: 3px; height: 4px; }
.tdw-seg i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.tdw-seg i.on { background: #5aa8ff; }
.tdw-card .tdw-seg:has(i.on + i.on + i.on) i { background: #2fbf6f; }
.tdw-arrow { position: absolute; top: calc(3px + var(--bar) + var(--info) + (100% - 3px - var(--bar) - var(--info)) / 2); z-index: 5; display: grid; place-items: center; width: 42px; height: 42px;
  margin-top: -21px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(30, 32, 42, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: opacity .2s; }
.tdw-arrow.l { left: calc(var(--m) * .5); } .tdw-arrow.r { right: calc(var(--m) * .5); }
.tdw-arrow:hover { background: rgba(60, 64, 84, .95); }
.tdw-arrow.off { opacity: 0; pointer-events: none; }
.tdw-arrow svg { width: 20px; height: 20px; }
.tdw-cover { position: absolute; inset: 0; z-index: 8; background: #0b0b0d; pointer-events: none; transition: opacity .45s ease-out; }
.tdw.in .tdw-cover { opacity: 0; }
.tdw.leaving .tdw-track { transition: transform .38s cubic-bezier(.64, 0, .78, 0); transform: translate3d(-70vw, 0, 0) !important; }
.tdw.leaving .tdw-cover { opacity: 1; transition: opacity .26s ease-in-out .12s; }
@media (prefers-reduced-motion: reduce) { .tdw-cover, .tdw.leaving .tdw-track { transition: none; } }
.td-lockmsg { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--fill2); color: var(--text2); font-size: 14px; }
.td-lockmsg svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
@media (max-width: 1100px) { .td-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.td-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; margin: -100px 0 0 -150px;
  transform: rotateX(58deg) rotateZ(45deg); border-radius: 6px;
  background: repeating-conic-gradient(#3b4459 0 25%, #353d50 0 50%) 0 0 / 33.3px 33.3px; box-shadow: 0 0 0 8px #1a1d26, 0 30px 60px rgba(0,0,0,.6); }
.td-art-path { position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; margin: -100px 0 0 -150px; transform: rotateX(58deg) rotateZ(45deg); pointer-events: none;
  background:
    linear-gradient(#9a8a6a, #9a8a6a) 0 33px / 150px 17px no-repeat,
    linear-gradient(#9a8a6a, #9a8a6a) 133px 33px / 17px 117px no-repeat,
    linear-gradient(#9a8a6a, #9a8a6a) 133px 133px / 117px 17px no-repeat,
    linear-gradient(#9a8a6a, #9a8a6a) 233px 50px / 17px 100px no-repeat,
    linear-gradient(#9a8a6a, #9a8a6a) 233px 50px / 67px 17px no-repeat; }
.td-art-door { position: absolute; right: 22%; top: 30%; width: 16px; height: 30px; border-radius: 3px; background: #9fe8ff; box-shadow: 0 0 24px #9fe8ff; opacity: .8; }

.td-team-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.td-team-h h3 { margin: 0; }
.td-team-h .row { display: flex; gap: 8px; }
.td-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.td-pick { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.td-pick .ucard { width: 100%; }
.td-pick-c { position: relative; width: 100%; }
.td-pick.empty { align-items: center; justify-content: center; gap: 8px; min-height: 260px; border-radius: 16px; color: var(--muted);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), var(--bg2); box-shadow: inset 0 0 0 1px var(--line);
  font: 700 13px/1 var(--display); transition: color .15s, box-shadow .2s; }
.td-pick.empty:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line2); }
.td-pick.empty svg { width: 26px; height: 26px; }
.td-pick-x { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; z-index: 5; }
.td-pick-x svg { width: 14px; height: 14px; }
.td-pick-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.td-pick-s b { color: var(--text); font-family: var(--display); }
.td-pick-s .td-cost { margin-left: auto; color: #7dffa8; font: 800 12px/1 var(--display); }
.td-pick-s:has(.td-ps1) { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 5px; }
.td-ps1, .td-ps2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.td-ps1 { overflow: hidden; }
.td-ps1 .td-style { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* what a farm pays */
.td-farmpay { color: #ffd23a; white-space: nowrap; }
.td-farmpay b { color: #ffe27a !important; }
.td-farmrow dd { color: #ffe27a; }
.td-ps2 { justify-content: space-between; white-space: nowrap; }
.td-style { padding: 3px 7px; border-radius: 99px; font: 800 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #10131a; background: var(--sc); }
.pick-w { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---- the match ---- */
/* the stage is the haze the far ground fades into (board.js FOG), so the world has no visible end */
.td-stage { position: relative; height: calc(100vh - 170px); min-height: 540px; border-radius: 22px; overflow: hidden; user-select: none;
  background: #b4cfbc; box-shadow: inset 0 0 0 1px var(--line); }
.td-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 120px 30px rgba(10,14,12,.35); }
.td-gl, .td-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.td-hud { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.td-hud > * { pointer-events: auto; }
.td-hud-l, .td-hud-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-chip { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; background: rgba(12,13,16,.82); box-shadow: inset 0 0 0 1px var(--line2);
  backdrop-filter: blur(6px); }
.td-chip span { font: 800 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.td-chip b { font: 900 italic 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.td-chip.lives { color: #ff5a6a; }
.td-chip.lives svg { width: 18px; height: 18px; }
.td-chip.lives b { color: var(--text); }
.td-chip.cash span { font-size: 16px; color: #7dffa8; letter-spacing: 0; }
.td-chip.cash b { color: #7dffa8; }
.td-mapname { padding: 0 6px; font: 700 12px/1 var(--display); color: var(--muted); }
.td-hud-r .switch { height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(12,13,16,.82); box-shadow: inset 0 0 0 1px var(--line2); }
.td-hud-r .btn.sm { min-height: 38px; }
.td-hud-r .btn.ghost { background: rgba(12,13,16,.82); }
#tdSpeed { min-width: 48px; }
#tdNext { min-width: 170px; }

.td-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border-radius: 18px;
  background: rgba(12,13,16,.82); box-shadow: inset 0 0 0 1px var(--line2), 0 16px 40px -16px #000; backdrop-filter: blur(6px); }
.td-slot { --rc: var(--c-common); position: relative; display: grid; place-items: center; width: 82px; height: 96px; padding: 0; border-radius: 13px; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 22%, transparent), var(--fill) 70%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 55%, transparent);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
.td-slot:hover { transform: translateY(-4px); }
.td-slot.on { transform: translateY(-8px); box-shadow: inset 0 0 0 2px #fff, 0 0 26px -2px var(--rc); }
.td-slot .td-port { width: 72px; height: 81px; margin-top: -6px; pointer-events: none; }
.td-slot .td-cost { position: absolute; left: 0; right: 0; bottom: 6px; font: 900 italic 13px/1 var(--display); color: #7dffa8; text-shadow: 0 2px 0 #000; }
.td-slot.poor .td-cost { color: #ff7a7a; }
.td-slot.full { opacity: .5; }
.td-slot .td-n { position: absolute; top: 6px; right: 7px; font: 800 10px/1 var(--display); color: var(--text2); text-shadow: 0 1px 0 #000; }
.td-key { position: absolute; top: 5px; left: 6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font: 800 10px/1 var(--display); font-style: normal;
  color: var(--muted); background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px var(--line2); }
.td-slot.r-rare { --rc: var(--c-rare); } .td-slot.r-epic { --rc: var(--c-epic); } .td-slot.r-legendary { --rc: var(--c-legendary); }
.td-slot.r-mythic { --rc: var(--c-mythic); } .td-slot.r-secret { --rc: var(--c-secret); } .td-slot.r-divine { --rc: var(--c-divine); }
.td-slot.r-transcendent { --rc: #7dffcf; } .td-slot.r-primordial { --rc: #ff6a1a; } .td-slot.r-eternal { --rc: #ffffff; } .td-slot.r-absolute { --rc: #ffffff; }

.td-call { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); padding: 8px 14px; border-radius: 99px; font: 700 12px/1.2 var(--display);
  color: var(--text2); background: rgba(12,13,16,.85); box-shadow: inset 0 0 0 1px var(--line2); pointer-events: none; white-space: nowrap; }
.td-sel { position: absolute; right: 12px; top: 64px; width: 272px; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px;
  background: rgba(12,13,16,.9); box-shadow: inset 0 0 0 1px var(--line2), 0 20px 50px -20px #000; backdrop-filter: blur(8px); }
.td-sel-h { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.td-sel-h .td-port { width: 56px; height: 63px; border-radius: 10px; background: var(--fill); }
.td-sel-h b { display: block; font: 800 14px/1.2 var(--display); }
.td-sel-h small { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.td-sel-h .rtag { font-size: 9px; padding: 3px 7px; }
.td-sel-h .iconbtn { width: 32px; height: 32px; }
.td-sel-h .iconbtn svg { width: 14px; height: 14px; }
.td-st { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.td-st div { padding: 8px 10px; border-radius: 10px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.td-st dt { font: 800 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.td-st dd { margin: 5px 0 0; font: 800 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.td-st dd em { display: block; margin-top: 3px; font: 700 11px/1 var(--display); font-style: normal; color: #7dffa8; }
.td-st dd em::before { content: "next "; color: var(--muted); }
.td-pips { display: flex; align-items: center; gap: 6px; font: 800 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.td-pips span { margin-right: auto; }
.td-pips i { width: 22px; height: 6px; border-radius: 3px; background: var(--fill3); }
.td-pips i.on { background: linear-gradient(90deg, #ffd23a, #ff7a1a); box-shadow: 0 0 8px rgba(255,170,40,.6); }
.td-tgt { display: grid; grid-template-columns: repeat(3, 1fr); }
.td-tgt button { padding: 8px 4px; }
.td-tgt-n { padding: 9px 4px; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); text-align: center; font: 700 12px/1 var(--display); color: var(--muted); }
.td-sel-act { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.td-sel-act .btn { flex-direction: column; gap: 3px; padding: 9px 8px; }
.td-sel-act .btn small { font-size: 11px; opacity: .85; }
.td-sel-act .btn > * { pointer-events: none; } /* a click is on the button, whatever its text is doing */

.td-flash { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font: 900 italic 40px/1 var(--display); color: #fff; text-shadow: 0 4px 0 #000, 0 0 30px rgba(255,255,255,.35); animation: tdflash 1.7s cubic-bezier(.2,.9,.3,1) both; }
.td-flash.good { color: #7dffa8; font-size: 30px; }
.td-flash.cash { top: 34%; color: #7dffa8; font-size: 22px; }
.td-flash.boss { color: #ff5a6a; font-size: 48px; }
@keyframes tdflash { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 14% { opacity: 1; transform: translateX(-50%) scale(1.08); } 24% { transform: translateX(-50%) scale(1); }
  78% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
.td-pausednote { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 12px 22px; border-radius: 14px; pointer-events: none;
  font: 900 italic 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; background: rgba(12,13,16,.85); box-shadow: inset 0 0 0 1px var(--line2); }
.td-end { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,6,9,.62); backdrop-filter: blur(3px); animation: tdfade .4s both; }
@keyframes tdfade { from { opacity: 0; } }
.td-end-in { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 340px; padding: 28px 32px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, var(--fill2), var(--fill)); box-shadow: inset 0 0 0 1px var(--line2), 0 30px 80px -20px #000; animation: tdpop .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes tdpop { from { transform: scale(.7); opacity: 0; } }
.td-end-in h2 { font-size: 48px; font-weight: 900; font-style: italic; }
.td-end-in.won h2 { color: #ffd23a; text-shadow: 0 4px 0 #6a3a00, 0 0 40px rgba(255,200,60,.4); }
.td-end-in.lost h2 { color: #ff5a6a; text-shadow: 0 4px 0 #3a0008; }
.td-end-in p { margin: 0; color: var(--text2); }
.td-end-st { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.td-end-st b { display: block; font: 900 italic 20px/1.1 var(--display); color: var(--text); }
.td-end-rew { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(160,120,255,.12); box-shadow: inset 0 0 0 1px rgba(160,120,255,.35); }
.td-end-rew b { font: 900 italic 24px/1 var(--display); color: #e4d6ff; }
.td-end-rew span { font-size: 13px; color: var(--text2); }
.td-end-in .row { display: flex; gap: 10px; margin-top: 6px; }

/* (29 Oct, request: "this team thing should be a 3x2 grid not all 6, and it should be the same height as the dungeon card
   on the left"): beside the world card the team panel stretches to its height, two rows of three, and each card is
   sized by the height its row has (its width follows from the card's shape) */
@media (min-width: 1101px) {
  .td-grid { align-items: stretch; }
  .td-team { display: flex; flex-direction: column; min-height: 0; }
  .td-slots { flex: 1; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  /* the cell is a size container: the card is as big as fits above two lines of stats, and the stats are its width */
  .td-pick { container-type: size; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 0; }
  /* (29 Oct) only inside a team slot: the unit picker's stat lines share the class, and with no size container around
     them these units fell back to the window's size, 749px lines under 167px cards */
  .td-pick .td-pick-c, .td-pick .td-pick-s { width: min(100cqw, (100cqh - 50px) * 0.7273); flex: none; }
  .td-pick-c { aspect-ratio: 240 / 330; }
  .td-pick.empty { display: flex; min-height: 0; height: 100%; }
}
@media (max-width: 1100px) { .td-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .td-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-stage { height: calc(100vh - 210px); }
  .td-slot { width: 62px; height: 78px; } .td-slot .td-port { width: 56px; height: 63px; }
  .td-sel { left: 12px; right: 12px; width: auto; top: auto; bottom: 110px; }
  .td-hud-r .switch, .td-mapname { display: none; }
}

/* the old tile picture's pieces are gone */
.td-art::before { content: none; }

/* what a first clear opens */
.td-opens { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255,122,26,.08); box-shadow: inset 0 0 0 1px rgba(255,122,26,.3); }
.td-opens > span { font: 800 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.td-opens ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text2); }
.td-opens.done { background: rgba(63,208,127,.07); box-shadow: inset 0 0 0 1px rgba(63,208,127,.3); }
.td-opens.done > span { color: var(--good); }
.td-end-open { font-size: 13px; color: #7dffa8 !important; max-width: 380px; }

/* the ascension path's Defense steps */
.anode li.an-req { display: flex; align-items: center; gap: 5px; color: #ffb27a; font-weight: 700; }
.anode li.an-req svg { width: 13px; height: 13px; flex: none; }
.anode li.an-req.met { color: var(--good); }

/* the Defense pill (bottom left, while a match runs off its tab) */
.td-pill .pill-roll { border-radius: 50%; background: rgba(63,208,127,.15); box-shadow: inset 0 0 0 1.5px rgba(63,208,127,.5); }
.td-pill-ic { display: grid; place-items: center; color: #7dffa8; }
.td-pill-ic svg { width: 22px; height: 22px; }
.td-pill-st { padding: 5px 10px; border-radius: 99px; font: 800 11px/1 var(--display); white-space: nowrap; color: #0b1a10; background: #7dffa8; }
.td-pill.s-warn .pill-roll { background: rgba(255,210,58,.15); box-shadow: inset 0 0 0 1.5px rgba(255,210,58,.6); }
.td-pill.s-warn .td-pill-ic { color: #ffd23a; }
.td-pill.s-warn .td-pill-st { background: #ffd23a; color: #1a1400; }
.td-pill.s-bad { box-shadow: inset 0 0 0 1.5px rgba(255,90,90,.7), 0 0 30px -6px rgba(255,60,60,.8); }
.td-pill.s-bad .pill-roll { background: rgba(255,90,90,.2); box-shadow: inset 0 0 0 1.5px rgba(255,90,90,.7); animation: breathe .8s ease-in-out infinite; }
.td-pill.s-bad .td-pill-ic { color: #ff7a7a; }
.td-pill.s-bad .td-pill-st { background: #ff5a5a; color: #fff; }

/* ---- 29 Oct: the result (showResult in defense.js): the page darkened, a big word, a line, three numbers ---- */
.td-over { position: fixed; inset: 0; z-index: 70; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px; background: rgba(4,5,8,.86); animation: tdfade .3s both; }
.td-over.won { --sc: #ffd23a; }
.td-over.lost { --sc: #ff5a6a; }
.td-over h2 { margin: 0; padding: 0 .2em; font: italic clamp(76px, 14vw, 160px)/.9 var(--display); color: var(--sc); animation: tdover-in .6s cubic-bezier(.2,1.3,.4,1) both; }
.td-over.won h2 { text-shadow: 0 7px 0 #6a3a00, 0 0 70px rgba(255,200,60,.45); }
.td-over.lost h2 { text-shadow: 0 7px 0 #3a0008, 0 0 70px rgba(255,60,80,.35); }
.td-over-sep { display: block; width: min(600px, 86vw); height: 2px; background: linear-gradient(90deg, transparent, var(--sc) 30%, var(--sc) 70%, transparent); opacity: .8;
  animation: tdover-sep .5s .25s cubic-bezier(.2,.8,.3,1) both; }
.td-over-st { display: grid; grid-template-columns: repeat(3, 1fr); width: min(600px, 92vw); }
.td-over-st div { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: tdover-up .45s .4s both; }
.td-over-st div:nth-child(2) { animation-delay: .5s; }
.td-over-st div:nth-child(3) { animation-delay: .6s; }
.td-over-st b { display: flex; align-items: center; gap: 8px; font: italic 40px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.td-over-st .bad b { color: #ff5a6a; }
.td-over-st .shard-ic { display: grid; width: 28px; height: 28px; }
.td-over-st .shard-ic svg { width: 100%; height: 100%; }
.td-over-st span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.td-over-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); animation: tdfade .4s 1.1s both; }
@keyframes tdover-in { from { transform: scale(1.5); opacity: 0; } }
@keyframes tdover-sep { from { transform: scaleX(0); } }
@keyframes tdover-up { from { transform: translateY(14px); opacity: 0; } }
@media (max-width: 520px) { .td-over-st b { font-size: 28px; } .td-over-st span { font-size: 10px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .td-over, .td-over h2, .td-over-sep, .td-over-st div, .td-over-hint { animation: none; } }

/* ---- 29 Oct: the hover card over the team bar (slotCard in defense.js) ---- */
.td-hc { position: absolute; z-index: 30; width: 300px; padding: 14px 16px; border-radius: 16px; pointer-events: none; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(180deg, rgba(24,26,33,.97), rgba(13,14,18,.97)); box-shadow: inset 0 0 0 1px var(--line2), 0 18px 40px -12px #000; animation: tdhc .14s ease-out both; }
@keyframes tdhc { from { opacity: 0; transform: translateY(6px); } }
.td-hc-h { display: flex; flex-direction: column; gap: 5px; }
.td-hc-h b { font: italic 19px/1.05 var(--display); color: #fff; }
.td-hc-h small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-hc-tr { padding: 3px 7px; border-radius: 99px; font: 800 10px/1 var(--display); letter-spacing: .06em; color: #10131a; background: var(--tc); }
.td-hc-sh { padding: 3px 7px; border-radius: 99px; font: 800 10px/1 var(--display); letter-spacing: .06em; color: #10131a; background: linear-gradient(90deg, var(--rainbow)); }
.td-hc-atk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.td-hc-atk b { font: italic 15px/1.1 var(--display); color: #ffe08a; }
.td-hc-info { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text2); }
.td-hc-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.td-hc-st span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.td-hc-st b { font: italic 15px/1 var(--display); color: #fff; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.td-hc-c { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.td-hc-c li { position: relative; padding-left: 14px; font-size: 12px; color: #bfe8ff; }
.td-hc-c li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #7fd0ff; }
.td-hc-sig { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgba(255,200,80,.08); box-shadow: inset 0 0 0 1px rgba(255,200,80,.3); }
.td-hc-sig b { font: italic 13px/1 var(--display); color: #ffd23a; }
.td-hc-sig span { font-size: 11.5px; color: var(--text2); }
/* (30 Oct) a gate unit: its passive and its Release instead of a signature move */
.td-hc-pas { background: rgba(160,200,255,.07); box-shadow: inset 0 0 0 1px rgba(160,200,255,.25); }
.td-hc-pas b { color: #9fd0ff; }
.td-hc-rel { background: rgba(200,160,255,.09); box-shadow: inset 0 0 0 1px rgba(200,160,255,.35); }
.td-hc-rel b { color: #d8c0ff; }
.td-pas { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text2); }
.td-pas b { font: italic 12px/1 var(--display); color: #9fd0ff; margin-right: 4px; }
.td-relbtn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 10px 9px; border: 0; border-radius: 13px; cursor: pointer;
  color: #fff; background: #1a1424; box-shadow: inset 0 0 0 1px rgba(200,160,255,.35); font-family: var(--display); }
.td-relbtn > * { position: relative; pointer-events: none; }
.td-relbtn .td-relfill { position: absolute; inset: 0; width: calc(var(--k, 0) * 100%); background: linear-gradient(90deg, rgba(154,106,255,.35), rgba(200,160,255,.55)); transition: width .2s linear; }
.td-relbtn .td-rel-t { font: 16px/1 var(--display); letter-spacing: .02em; }
.td-relbtn .td-rel-c { font: italic 12px/1.25 var(--display); color: #e6d8ff; text-align: center; }
.td-relbtn .td-rel-s { font: 700 11px/1 var(--body); color: var(--muted); }
.td-relbtn.ready { background: linear-gradient(180deg, #8a5cff, #5a2acc); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 18px rgba(154,106,255,.6); animation: relready 1.2s ease-in-out infinite; }
.td-relbtn.ready .td-relfill { display: none; }
.td-relbtn.ready .td-rel-s { color: #fff; }
.td-relbtn.on { background: linear-gradient(180deg, #ffffff, #d8c8ff); color: #1a0a33; }
.td-relbtn.on .td-rel-c, .td-relbtn.on .td-rel-s { color: #3a2066; }
.td-relbtn.on .td-relfill { display: none; }
@keyframes relready { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 28px rgba(154,106,255,.9); } }
/* the command across the board as a unit releases */
.td-relcap { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap;
  animation: relcap 2.4s cubic-bezier(.2,.9,.3,1) both; }
.td-relcap small { font: 800 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--rc, #fff);
  text-shadow: 0 0 2px #000, 0 2px 0 rgba(0,0,0,.6); }
.td-relcap b { font: italic 40px/1.1 var(--display); color: #fff; text-shadow: 0 0 3px #000, 0 3px 0 rgba(0,0,0,.65), 0 0 30px var(--rc, #fff); }
@keyframes relcap { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.92); letter-spacing: .2em; } 14% { opacity: 1; transform: translate(-50%, 0) scale(1); letter-spacing: 0; }
  80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .td-relbtn.ready, .td-relcap { animation: none; } }
.td-hc-f { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.td-hc-f b { color: #7dffa8; }

/* ---- 29 Oct: Ground / Hybrid / Air tags (reachTag in defense.js) ---- */
.td-hc-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.td-reach { margin-left: 4px; }
.td-hc-tags .td-reach { margin-left: 0; }

/* (30 Oct) the Endless tower: the Worlds | Endless tower switch, its panel, and its result */
/* (30 Oct) the difficulty row: Normal | Hard | Nightmare, then Endless in the tower's violet */
.td-modes { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.td-endless { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 12px;
  font: 700 12px/1 var(--display); color: #cdb6ff; background: linear-gradient(180deg, rgba(167, 123, 255, .18), rgba(167, 123, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .35); transition: color .15s, box-shadow .2s, background .2s; }
.td-endless svg { width: 18px; height: 18px; flex: none; }
.td-endless:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .7); }
.td-endless:active { transform: translateY(1px); }
.td-endless.on { color: #fff; background: linear-gradient(180deg, #9a6cf5, #6b3fd4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 18px rgba(143, 99, 240, .4); cursor: default; }
.td-endless:focus-visible { outline: 2px solid #cdb6ff; outline-offset: 2px; }
.tw-art .td-art { min-height: 150px; }
.w3d .td-map .tw-art { flex: 0 1 280px; min-height: 140px; }
.w3d .td-map .tw-art .td-art { height: 100%; }
.tw-art { position: relative; }
.tw-badge { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 99px; font: 700 12px/1 var(--display); color: #fff;
  background: rgba(10, 8, 20, .62); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tw-badge b { color: #ffe9a8; font-weight: 400; }
.tw-twist { display: grid; gap: 3px; margin: 2px 0; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(167, 123, 255, .16), rgba(167, 123, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 255, .35); }
.tw-tk { font: 800 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #c9a8ff; }
.tw-twist b { font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; } /* (30 Oct) was the big display face */
.tw-twist > span:not(.tw-tk) { font-size: 13px; color: var(--text2); }
.tw-twist small { font-size: 11px; color: var(--muted); }
.tw-stl .stl-ic svg { width: 16px; height: 16px; color: #ffe9a8; }
.td-over.tower { --sc: #c9a8ff; }
.td-over.tower.won { --sc: #ffd23a; }
.td-over-k { font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #d8ccff; margin-bottom: 6px; animation: tdover-up .45s .1s both; }
.td-over.tower h2 { text-shadow: 0 7px 0 #22104a, 0 0 70px rgba(176, 138, 255, .45); }
.td-over.tower.won h2 { text-shadow: 0 7px 0 #6a3a00, 0 0 70px rgba(255, 200, 60, .45); }
.td-over-sub { margin: 4px 0 2px; font: 400 22px/1.1 var(--display); color: #fff; animation: tdover-up .45s .3s both; }
.td-over-st .stl-ic svg { width: 30px; height: 30px; color: #ffe9a8; }