/* Deck builder. */
#builder { background: none !important; z-index: 1; overflow-y: auto; }
.bld { max-width: 1400px; margin: 0 auto; padding: 14px 16px 40px; }
.bld-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 12px; }
.bld-top h2 { font-family: var(--font-title); font-weight: 400; color: var(--gold); text-align: center; font-size: clamp(26px, 4vw, 38px); margin: 0; text-shadow: 0 0 20px rgba(255, 170, 60, .5), 0 3px 0 #3a1d02; }
.bld-h3 { font-family: var(--font-card); color: var(--gold); font-size: 22px; margin: 26px 0 10px; }
.bld-note { color: var(--ink-dim); font-size: 16px; text-align: center; }
.bld-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.bld-gal.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.bld-tile { cursor: pointer; border-radius: 16px; padding: 10px; text-align: center; display: grid; gap: 4px; justify-items: center; transition: transform .15s, box-shadow .2s;
  background: linear-gradient(rgba(30, 16, 6, .85), rgba(18, 9, 3, .92)); border: 2px solid #8a6328; box-shadow: 0 8px 18px rgba(0, 0, 0, .55); }
.bld-tile:hover { transform: translateY(-4px); border-color: #f0c96a; box-shadow: 0 0 22px rgba(255, 200, 90, .45), 0 12px 24px #000; }
.bld-tile .face { width: 100%; aspect-ratio: 1; border-radius: 12px; background-size: 170%; background-position: 50% 24%; box-shadow: inset 0 0 20px rgba(0, 0, 0, .7); }
.bld-tile b { font-family: var(--font-card); font-size: 18px; color: #ffe9a8; }
.bld-tile small { color: var(--ink-dim); font-size: 14px; }
.bld-tile.new { border-style: dashed; border-color: #c8a058; }
.bld-tile.new .plus { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 80px; color: #f0c96a; border-radius: 12px; background: radial-gradient(circle, rgba(255, 210, 120, .15), transparent 70%); }
.bld-leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.bld-leader { cursor: pointer; text-align: center; display: grid; gap: 4px; justify-items: center; font-family: var(--font-card); color: #ffe9a8; font-size: 18px; transition: transform .2s; }
.bld-leader .face { width: 140px; height: 140px; border-radius: 50%; background-size: 240%; background-position: 50% 24%; box-shadow: 0 0 0 3px #2a1604, 0 0 0 6px #8a6328, 0 10px 20px #000; transition: box-shadow .2s; }
.bld-leader:hover { transform: translateY(-6px); }
.bld-leader:hover .face { box-shadow: 0 0 0 3px #2a1604, 0 0 0 6px #ffe08a, 0 0 30px rgba(255, 210, 100, .9); }
.bld-leader small { font-family: var(--font-ui); color: #ff9a8a; font-size: 16px; }
.bld-title { display: flex; gap: 10px; align-items: center; justify-content: center; }
.bld-title .face { width: 54px; height: 54px; flex: none; border-radius: 50%; background-size: 240%; background-position: 50% 24%; box-shadow: 0 0 0 2px #2a1604, 0 0 0 4px #c8a058; }
.bld-title input { font-family: var(--font-card); font-size: 24px; color: #ffe9a8; background: rgba(0, 0, 0, .35); border: 1px solid #6b4b25; border-radius: 10px; padding: 6px 12px; min-width: 0; width: min(420px, 100%); }
.bld-count { font-family: var(--font-title); font-size: 36px; color: #ff9a6a; text-align: right; line-height: 1; }
.bld-count small { font-family: var(--font-ui); font-size: 16px; color: var(--ink-dim); margin-left: 4px; }
.bld-count.ok { color: #7dff8a; }
.bld-tabs { display: none; gap: 8px; justify-content: center; margin-bottom: 10px; }
.bld-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.bld-filters { display: grid; gap: 8px; margin-bottom: 10px; position: sticky; top: 0; z-index: 3; padding: 8px; border-radius: 12px; background: rgba(14, 8, 3, .92); }
.bld-filters input, .bld-filters select { font: inherit; font-size: 16px; background: #1d130b; color: var(--ink); border: 1px solid #6b4b25; border-radius: 8px; padding: 7px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid #5a3f22; border-radius: 20px; padding: 5px 12px; }
.chip.cost { width: 38px; padding: 5px 0; border-radius: 50%; font-family: var(--font-title); }
.chip.on { background: radial-gradient(ellipse at 50% 30%, #fff2c0, #e3b23c 60%, #a8740e); color: #2a1800; border-color: #fff0b0; }
.bld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bcard2 { position: relative; cursor: pointer; border-radius: 9px; transition: transform .15s; }
.bcard2 img { width: 100%; display: block; border-radius: 9px; box-shadow: 0 6px 14px #000; }
.bcard2:hover { transform: scale(1.08); z-index: 2; }
.bcard2.in img { box-shadow: 0 0 0 3px #49e07a, 0 0 16px rgba(73, 224, 122, .6); }
.bcard2.full img { box-shadow: 0 0 0 3px #e8c46a, 0 0 16px rgba(232, 196, 106, .7); }
.bcard2 .cnt { position: absolute; top: 6px; left: 6px; background: #1a0e06; color: #7dff8a; border: 1.5px solid #49e07a; font-weight: 700; border-radius: 12px; padding: 1px 8px; font-size: 15px; }
.bcard2.full .cnt { color: #ffe08a; border-color: #e8c46a; }
.bcard2 .minus { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; font-weight: 700; cursor: pointer; color: #fff; background: #8f2b20; border: 2px solid #ffb0a0; box-shadow: 0 2px 6px #000; line-height: 1; }
.bld-deck { position: sticky; top: 10px; display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: linear-gradient(rgba(22, 12, 5, .92), rgba(14, 8, 3, .95)); border: 1.5px solid #8a6328; max-height: calc(100vh - 120px); overflow: auto; }
.bld-curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 96px; align-items: end; padding-top: 18px; }
.bld-curve .cc { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.bld-curve .bar { align-self: end; background: linear-gradient(#ffe08a, #b98a2e); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bld-curve .bar span { position: absolute; top: -18px; left: 0; right: 0; font-size: 13px; color: #ffe08a; }
.bld-curve i { font-style: normal; font-size: 13px; color: var(--ink-dim); font-family: var(--font-title); }
.bld-types { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--ink-dim); }
.bld-list { display: grid; gap: 4px; }
.bld-row { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 8px; cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, rgba(20, 10, 4, .95) 45%, rgba(20, 10, 4, .35)), var(--art) right 40% / 160px auto no-repeat; border: 1px solid #4a3218; }
.bld-row:hover { border-color: #ff8a6a; }
.bld-row .cost { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-size: 14px; color: #2a1800; background: radial-gradient(circle at 35% 30%, #fff1b0, #d9a51f 60%, #7a5208); }
.bld-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.bld-row .x { font-weight: 700; color: #ffe08a; text-shadow: 0 1px 2px #000; }
.bld-actions { display: grid; gap: 8px; }
.hs-medal.newdeck .m { display: grid; place-items: center; font-size: 48px; color: #f0c96a; background: radial-gradient(circle, #4a2f18, #1a0e06); border: 2px dashed #c8a058; box-shadow: 0 8px 16px #000; }
@media (max-width: 860px) {
  .bld-tabs { display: flex; }
  .bld-body { grid-template-columns: 1fr; }
  .bld.editor.tab-cards .bld-deck { display: none; }
  .bld.editor.tab-deck .bld-pool { display: none; }
  .bld-deck { position: static; max-height: none; }
  .bld-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .bld-title input { font-size: 18px; }
  .bld-count { font-size: 28px; }
}