/* Down for the Count skin: a comic-book fight card. Colours taken from the cards and the box. */
.g-dftc{
  --g-bg:#FFFCF4; --g-panel:#FFF0BF; --g-panel-hi:#FFF7DC; --g-face:#FFFFFF;
  --g-red:#245CE8;            /* the page accent slot: the box's royal blue */
  --g-gold:#FFCC28; --ft-red:#E8303F; --g-jade:#1C1530; --g-ink:#1C1530; --g-muted:#5A5170; --g-line:#E8DDC0;
  --ft-display:"Archivo","Arial Black",system-ui,sans-serif; --ft-navy:#101A3D;
}
@media (prefers-color-scheme: dark){
  .g-dftc{--g-bg:#101A3D; --g-panel:#17234F; --g-panel-hi:#1E2C60; --g-red:#7FA6FF; --g-jade:#0B1230;
    --g-ink:#FFFCF4; --g-muted:#B9C0DC; --g-line:#2A3870}
}
.g-dftc .g-hero h1{font-family:var(--ft-display);font-weight:900;font-style:italic;font-stretch:112%;letter-spacing:-.02em;line-height:.92;
  color:#FFFCF4;text-shadow:3px 3px 0 var(--ft-red),6px 6px 0 #1C1530;-webkit-text-stroke:2px #1C1530;paint-order:stroke fill;margin-bottom:8px}
.g-dftc .pill{background:#FFD630;color:#1C1530;border:2px solid #1C1530;font-weight:800}
.g-dftc h2,.g-dftc h3{font-family:var(--ft-display);font-weight:900;font-style:italic;font-stretch:110%;letter-spacing:-.01em}
.g-dftc .label{font-family:var(--ft-display);font-weight:800;letter-spacing:.1em;color:var(--g-red)}
.g-dftc.game .btn{border-width:3px;box-shadow:3px 3px 0 var(--g-ink);font-weight:800}
.g-dftc.game .btn.red{color:#FFFCF4;border-color:#1C1530}
@media (prefers-color-scheme: dark){.g-dftc.game .btn.red{color:#101A3D;border-color:#FFFCF4}}

/* hero: a still render with view buttons */
.g-dftc .viewer{background:#D9DEE8;border:3px solid #1C1530;box-shadow:6px 6px 0 #1C1530}
.g-dftc .viewer .stage{aspect-ratio:16/10}
.g-dftc .viewer .stage img.poster{object-fit:cover;transition:opacity .25s}
.g-dftc .viewer .bar{background:var(--g-panel);border-top:3px solid #1C1530}

/* the three ways a round ends */
.endings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.endings div{border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;background:var(--g-panel);border:3px solid #1C1530;box-shadow:4px 4px 0 #1C1530;color:var(--g-ink)}
.endings b{font-family:var(--ft-display);font-weight:900;font-style:italic;font-stretch:110%;font-size:22px;line-height:1;color:var(--g-red)}
.endings span{font-size:15px}
.endings .last{background:#245CE8;color:#FFFCF4}
.endings .last b{color:#FFD630}
@media (max-width:820px){.endings{grid-template-columns:1fr}}

/* the ten cards */
.ranks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,1.1vw,14px);margin-top:clamp(28px,4vw,44px)}
.ranks img{width:100%;height:auto;aspect-ratio:5/7;border-radius:8%/6%;box-shadow:3px 3px 0 #1C1530;transition:transform .2s;display:block}
.ranks img:hover{transform:translateY(-6px) rotate(-2deg)}
.ranks img:nth-child(even):hover{transform:translateY(-6px) rotate(2deg)}
@media (max-width:820px){.ranks{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ranks-note{margin-top:14px;font-size:15px;color:var(--g-muted);max-width:70ch}
.beat{display:flex;align-items:center;gap:clamp(16px,3vw,36px);margin-top:clamp(20px,3vw,32px);padding:18px 20px;border:3px solid #1C1530;border-radius:14px;background:var(--g-panel);box-shadow:4px 4px 0 #1C1530;flex-wrap:wrap}
.beat p{margin:0;font-size:16.5px;max-width:46ch;color:var(--g-ink)}
.beat .ladder{display:flex;align-items:center;gap:10px}
.beat .g{display:flex}
.beat .g img{width:58px;height:auto;aspect-ratio:5/7;border-radius:6px;border:2px solid #1C1530;display:block}
.beat .g img+img{margin-left:-36px}
.beat .ladder b{font:900 28px/1 var(--ft-display);color:var(--g-ink)}

.boxart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1.2fr);gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.boxart figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.boxart img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:5px 5px 0 #1C1530}
.boxart figcaption{font-size:14.5px;color:var(--g-muted)}
.boxart figcaption b{display:block;color:var(--g-ink);font-size:16px}
.boxart p{font-size:16.5px;color:var(--g-muted);max-width:44ch;margin:0}
.boxart p b{color:var(--g-ink)}
@media (max-width:900px){.boxart{grid-template-columns:1fr 1fr}.boxart > div{grid-column:1/-1}}

.g-dftc .renders img{aspect-ratio:16/10;border:3px solid #1C1530;box-shadow:4px 4px 0 #1C1530}
.g-dftc .play-frame{border:3px solid #1C1530;box-shadow:6px 6px 0 #1C1530;background:#101A3D}
.g-dftc .play-frame iframe{height:min(92vh,1040px)}
.g-dftc .mode{border-color:#1C1530}
.g-dftc .set{border-top-color:var(--g-red)}
.g-dftc .g-cta{background:#245CE8;border:3px solid #1C1530;box-shadow:6px 6px 0 #1C1530}
.g-dftc .g-cta .btn.light{color:#1C1530}
.g-dftc .preview img{border:3px solid #1C1530}

/* home page card */
.feature.g-dftc h3{font-family:var(--ft-display);font-weight:900;font-style:italic;font-stretch:112%;letter-spacing:-.01em}
.feature.g-dftc .feature-art{background:#D9DEE8;padding:0}
.feature.g-dftc .feature-art img{width:100%;height:100%;object-fit:cover}