.deck-article {
  --s-hero: #c98500;
  --dk-card: color-mix(in srgb, var(--text) 9%, var(--bg));
  --dk-card-2: color-mix(in srgb, var(--text) 16%, var(--bg));
  --dk-line: color-mix(in srgb, var(--text) 28%, var(--bg));
}
:root[data-theme="light"] .deck-article {
  --s-hero: #eda100;
  --dk-card: color-mix(in srgb, var(--text) 5%, var(--bg));
  --dk-card-2: color-mix(in srgb, var(--text) 11%, var(--bg));
  --dk-line: color-mix(in srgb, var(--text) 22%, var(--bg));
}
.viz-host { width: 100%; min-width: 0; }
.viz-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.viz-title { margin-right: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.viz-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.viz-seg button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted);
}
.viz-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.viz-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-svg text { font-family: var(--font); fill: var(--muted); font-size: 11px; }
.viz-cap { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) { .viz-seg button { padding: 6px 9px; } }

.dm-piles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 6px 6px 0 0; }
.dm-pile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font); color: var(--muted);
}
.dm-stack { position: relative; width: min(100%, 76px); aspect-ratio: 3 / 4; }
.dm-stack i {
  position: absolute; inset: 0; border-radius: 9px; border: 1px solid var(--border); background: var(--dk-card);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s ease, background 0.15s ease;
}
.dm-stack i:nth-child(1) { transform: translate(6px, -6px); }
.dm-stack i:nth-child(2) { transform: translate(3px, -3px); }
.dm-stack i:nth-child(3) { background: var(--dk-card-2); }
.dm-stack i:nth-child(3)::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 30%; border-radius: 50%;
  border: 1.5px solid var(--dk-line);
}
.dm-pile b { font-size: 12px; font-weight: 650; line-height: 1.25; text-align: center; transition: color 0.15s ease; }
.dm-pile:hover .dm-stack i:nth-child(3), .dm-pile:focus-visible .dm-stack i:nth-child(3) { transform: translateY(-3px); }
.dm-pile:focus-visible { outline: none; }
.dm-pile:focus-visible b, .dm-pile:hover b { color: var(--text); }
.dm-pile[aria-pressed="true"] b { color: var(--text); }
.dm-pile[aria-pressed="true"] .dm-stack i:nth-child(3) { border-color: var(--s-hero); border-width: 2px; transform: translateY(-4px); }
.dm-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.dm-card {
  position: relative; aspect-ratio: 3 / 4; border-radius: 10px; border: 1px solid var(--border); background: var(--dk-card);
  overflow: hidden; will-change: transform, opacity;
}
.dm-card .art { position: absolute; left: 8%; right: 8%; top: 6%; height: 54%; border-radius: 6px; background: var(--dk-card-2); }
.dm-card .ln { position: absolute; left: 8%; height: 5px; border-radius: 3px; background: var(--dk-line); }
.dm-card .ln.a { top: 66%; width: 70%; }
.dm-card .ln.b { top: 74%; width: 48%; }
.dm-card .tag {
  position: absolute; left: 8%; bottom: 6%; max-width: 84%; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden;
}
.dm-card .tag i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--s-hero); }
@media (max-width: 560px) {
  .dm-piles { gap: 6px; }
  .dm-pile b { font-size: 11px; }
  .dm-hand { gap: 8px; }
  .dm-card .tag { font-size: 9px; }
}

.mo-svg .mo-box { fill: var(--dk-card); stroke: var(--border); stroke-width: 1; }
.mo-svg .mo-slot { fill: none; stroke: var(--dk-line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.mo-svg .mo-card { fill: var(--dk-card-2); stroke: var(--s-hero); stroke-width: 1.5; }
.mo-svg .mo-back { fill: var(--dk-card-2); stroke: var(--border); stroke-width: 1; }
.mo-svg .mo-face { fill: var(--bg); stroke: var(--s-hero); stroke-width: 1.5; }
.mo-svg .mo-ln { fill: var(--dk-line); }
.mo-svg .mo-deck { fill: var(--dk-card); stroke: var(--border); stroke-width: 1; }
.mo-svg .mo-axis { stroke: var(--dk-line); stroke-width: 1; }
.mo-svg .mo-cap { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 3; }
.mo-svg .mo-curve { fill: none; stroke: var(--dk-line); stroke-width: 2; }
.mo-svg .mo-done { fill: none; stroke: var(--s-hero); stroke-width: 2; stroke-linecap: round; }
.mo-svg .mo-dot { fill: var(--s-hero); }
.mo-svg .mo-head { stroke: var(--text); stroke-width: 1; opacity: 0.5; }
.mo-svg .val { fill: var(--text); font-weight: 600; }

.dl-src { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.dl-src code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text);
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
}
.dl-view { position: relative; width: 100%; transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dl-item {
  position: absolute; border: 1px solid var(--border); border-radius: 10px; background: var(--dk-card); overflow: hidden;
  transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.35s ease;
}
.dl-item.is-new { border-color: var(--s-hero); border-width: 1.5px; }
.dl-item > * { position: absolute; transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dl-item .art { left: 8%; top: 6%; width: 84%; height: 56%; border-radius: 6px; background: var(--dk-card-2); }
.dl-item .ln { height: 5px; border-radius: 3px; background: var(--dk-line); }
.dl-item .ln.a { left: 8%; top: 70%; width: 70%; }
.dl-item .ln.b { left: 8%; top: 80%; width: 46%; }
.dl-view.is-list .dl-item { border-radius: 8px; }
.dl-view.is-list .dl-item .art { left: 6px; top: 6px; width: 24px; height: calc(100% - 12px); border-radius: 4px; }
.dl-view.is-list .dl-item .ln.a { left: 42px; top: calc(50% - 6px); width: 46%; }
.dl-view.is-list .dl-item .ln.b { left: 42px; top: calc(50% + 2px); width: 26%; }
.dl-legend i { background: none; box-shadow: inset 0 0 0 1.5px var(--s-hero); }
@media (prefers-reduced-motion: reduce) {
  .dl-view, .dl-item, .dl-item > *, .dm-stack i { transition: none; }
}

.ds-pile.is-up .ds-top svg, .ds-pile:hover .ds-top svg { stroke: var(--text); }
@media (max-width: 640px) { .ds-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } }

.dh-svg .dh-deck { fill: var(--dk-card); stroke: var(--border); stroke-width: 1; }
.dh-svg .dh-face { fill: var(--dk-card); stroke: var(--dk-line); stroke-width: 1.2; }
.dh-svg .dh-art { fill: var(--dk-card-2); }
.dh-svg .dh-back { fill: var(--bg); stroke: var(--s-hero); stroke-width: 1.6; }
.dh-svg .dh-ln { fill: var(--dk-line); }
.dh-svg .dh-card { cursor: default; }

.tj-svg { outline: none; }
.tj-svg .tj-rail { fill: none; stroke: var(--dk-line); stroke-width: 2; }
.tj-svg .tj-hi { fill: none; stroke: var(--s-hero); stroke-width: 3.5; stroke-linecap: round; }
.tj-svg .tj-tick { stroke: var(--dk-line); stroke-width: 1; }
.tj-svg .tj-dot { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }
.tj-svg .is-open .tj-dot { fill: var(--text); stroke: var(--text); }
.tj-svg .is-lit .tj-dot { stroke: var(--s-hero); }
.tj-svg .tj-yr { fill: var(--dk-line); }
.tj-svg .tj-yr-open { fill: var(--muted); }
.tj-svg .tj-hit { fill: transparent; cursor: pointer; }
.tj-svg .tj-name { font-size: 11px; font-weight: 600; fill: var(--muted); }
.tj-svg .tj-bar { fill: var(--dk-line); transition: fill 0.15s ease; }
.tj-svg .tj-note { fill: var(--dk-card-2); }
.tj-svg .is-hot .tj-bar { fill: var(--s-hero); }
.tj-svg .is-hot .tj-name { fill: var(--text); }

.rd-stage { width: min(100%, 420px); margin: 0 auto; }
.rd-svg { color: var(--text); transform-origin: 50% 50%; will-change: transform; }
.rd-svg .rd-ring { fill: none; stroke: var(--dk-line); stroke-width: 1; opacity: 0.6; }
.rd-svg .rd-spoke { stroke: var(--dk-line); stroke-width: 1; transition: stroke 0.2s ease, opacity 0.2s ease; }
.rd-svg .rd-spoke.is-hot { stroke: var(--s-hero); stroke-width: 1.6; }
.rd-svg .rd-fill polygon { stroke: none; }
.rd-svg .rd-edge { stroke-width: 2; stroke-linecap: round; }
.rd-svg .rd-v { fill: currentColor; transition: fill 0.2s ease; }
.rd-svg .rd-v.is-hot { fill: var(--s-hero); fill-opacity: 1; }
.rd-svg .rd-lab { font-size: 12px; font-weight: 700; fill: var(--muted); transition: opacity 0.2s ease; }
.rd-svg.is-dim .rd-lab:not(.is-on), .rd-svg.is-dim .rd-spoke:not(.is-hot) { opacity: 0.3; }
.rd-svg .rd-lab.is-on { fill: var(--text); }
.rd-svg .rd-hit { fill: transparent; cursor: pointer; }
.rd-svg .rd-prev { opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.rd-svg .rd-prev.is-on { opacity: 1; }
.rd-svg .rd-pc { fill: var(--dk-card-2); stroke: var(--border); stroke-width: 1; }
.rd-svg .rd-pl { fill: var(--dk-line); }

.bb-svg { max-width: 460px; margin: 0 auto; }
.bb-svg .bb-core { fill: var(--dk-card-2); stroke: var(--dk-line); stroke-width: 1.5; }
.bb-svg .bb-body { fill: var(--dk-card-2); stroke: var(--dk-line); stroke-width: 1.2; transition: fill 0.2s ease, stroke 0.2s ease; }
.bb-svg .bb-b.is-hot .bb-body { fill: color-mix(in srgb, var(--text) 30%, var(--bg)); stroke: var(--s-hero); stroke-width: 1.6; }

.dn-svg { max-width: 460px; margin: 0 auto; }
.dn-svg .dn-hit { fill: transparent; }
.dn-svg .dn-arc { fill: none; transition: stroke 0.25s ease; }
.dn-svg .dn-arc.s1 { stroke: color-mix(in srgb, var(--text) 30%, var(--bg)); }
.dn-svg .dn-arc.s2 { stroke: color-mix(in srgb, var(--text) 52%, var(--bg)); }
.dn-svg .dn-arc.s3 { stroke: color-mix(in srgb, var(--text) 78%, var(--bg)); }
.dn-svg .dn-b.is-hot .dn-arc.s1 { stroke: var(--s-hero); }
.dn-svg .dn-disc { fill: var(--dk-card-2); }
.dn-svg .dn-disc-back { fill: var(--dk-card); }
.dn-svg .dn-num { fill: var(--text); }
.dn-svg .dn-ln { fill: var(--dk-line); }

.sl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sl-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; touch-action: none; user-select: none; -webkit-user-select: none; }
.sl-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.sl-clip svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sl-layer { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--r, 50%)) 0 0); visibility: hidden; pointer-events: none; }
.sl-layer.is-on { visibility: visible; }
.sl-clip .sl-bg { fill: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.sl-clip .sl-isl { fill: color-mix(in srgb, var(--text) 15%, var(--bg)); stroke: color-mix(in srgb, var(--text) 50%, var(--bg)); stroke-width: 1; }
.sl-clip .sl-grid line { stroke: color-mix(in srgb, var(--text) 38%, var(--bg)); stroke-width: 0.8; }
.sl-clip .sl-flat rect { fill: var(--text); }
.sl-clip .sl-tint rect { fill: var(--s-hero); }
.sl-line { position: absolute; top: 0; bottom: 0; left: var(--r, 50%); width: 2px; margin-left: -1px; z-index: 2; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.sl-handle { position: absolute; top: 50%; left: 1px; transform: translate(-50%, -50%); cursor: ew-resize; touch-action: none; outline: none; }
.sl-shut { display: inline-flex; align-items: center; gap: 4px; padding: 6px 7px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: opacity 0.14s ease; }
.sl-handle:focus-visible .sl-shut { outline: 2px solid var(--s-hero); outline-offset: 2px; }
.sl-arr { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sl-arr.l { border-right: 6px solid #111; }
.sl-arr.r { border-left: 6px solid #111; }
.sl-cur, .sl-sw .dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--dot, #bdbdbd); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.sl-open {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scaleY(0.3); opacity: 0; pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.14s ease;
}
.sl-handle.is-open .sl-open { transform: translate(-50%, -50%) scaleY(1); opacity: 1; pointer-events: auto; }
.sl-handle.is-open .sl-shut { opacity: 0; }
.sl-goo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 1px 0; }
.sl-goo i { flex: none; width: 30px; height: 30px; margin: -1px 0; border-radius: 50%; background: #fff; }
.sl-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px; }
.sl-sw button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.sl-sw button .dot { transition: transform 0.15s ease; }
.sl-sw button:hover .dot { transform: scale(1.25); }
.sl-sw button[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.sl-sw button:focus-visible { outline: 2px solid var(--s-hero); outline-offset: 2px; }

.au-svg { max-width: 640px; }
.au-svg .au-circle { fill: var(--text); }
.au-svg .au-ico, .au-svg .au-ico rect { fill: var(--bg); }
.au-svg .au-btn { cursor: pointer; }
.au-svg .au-bar { fill: var(--dk-line); }
.au-svg .au-bar.is-played { fill: var(--s-hero); }
.au-svg .au-time { font-size: 12px; font-variant-numeric: tabular-nums; }
.au-svg .au-hit { fill: transparent; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
}

.dh-svg .dh-foil { stroke: var(--text); stroke-width: 2; }
.dh-svg .dh-gem { fill: var(--text); }
.dh-svg .dh-dot { fill: var(--dk-line); }
.dh-svg .dh-dot-2 { fill: var(--s-hero); }
.dh-svg .dh-sealed { fill: var(--dk-card-2); stroke: var(--dk-line); stroke-dasharray: 4 3; }
.dh-svg .dh-seal { fill: none; stroke: var(--dk-line); stroke-width: 1.6; }
.dh-svg .dh-seal-arc { fill: none; stroke: var(--dk-line); stroke-width: 1.6; stroke-linecap: round; }
.tj-svg .tj-yr { font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; fill: var(--muted); }