/* Operator showcase (templates/site/_showcase.html) after the user's Arknights reference. Off-white halftone paper on 25-degree diagonals; white, silver, black and red only.
   Game thumbnails are 512px, so the sharp band stays at or under 560px wide; the large duotone copy is blurred on purpose. */

.sc { --paper: #ecebe8; --ink: #0a0a0b; --red: #c8111b; --serif: var(--ax-font-body); position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-height: 620px; max-height: 820px; margin-top: 20px; overflow: hidden; background: repeating-linear-gradient(-65deg, transparent 0 159px, rgba(10, 10, 12, .08) 159px 160px), var(--paper); color: var(--ink); }
.sc::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(rgba(10, 10, 12, .11) 1px, transparent 1.6px) 0 0 / 7px 7px; -webkit-mask: linear-gradient(115deg, transparent 30%, #000 55%, transparent 80%); mask: linear-gradient(115deg, transparent 30%, #000 55%, transparent 80%); pointer-events: none; }

/* Decoration layer */
.sc-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-rings { position: absolute; left: 30%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 26px, rgba(10, 10, 12, .07) 26px 27px); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); animation: sc-turn 60s linear infinite; }
.sc-duo { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; background: var(--red); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 4% 88%, 1% 80%, 6% 70%, 3% 60%, 8% 50%, 5% 41%, 10% 30%, 8% 20%, 13% 10%); -webkit-mask: linear-gradient(180deg, #000 50%, transparent 86%); mask: linear-gradient(180deg, #000 50%, transparent 86%); }
.sc-duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) blur(2px); mix-blend-mode: multiply; }
.sc-wedge-edge, .sc-wedge { position: absolute; inset: 0; }
.sc-wedge-edge { background: var(--red); clip-path: polygon(0 0, 37% 0, 33.6% 4.8%, 29.8% 9.6%, 26.3% 14.4%, 22.4% 19.2%, 19% 24%, 15% 28.8%, 11.6% 33.6%, 7.7% 38.4%, 4.2% 43.2%, 0 48%); animation: sc-pulse 3.2s ease-in-out infinite; }
.sc-wedge { background: var(--ink); clip-path: polygon(0 0, 34% 0, 0 44%); }
.sc-chev { position: absolute; left: 1.4%; top: 49%; width: 22px; height: 82px; fill: none; stroke: var(--red); stroke-width: 3; }
.sc-streak { position: absolute; left: 6%; top: 29%; width: 62%; height: 36%; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(10, 10, 12, .16) 7px 9px, transparent 9px 15px, rgba(200, 17, 27, .24) 15px 16px); filter: blur(1.2px); -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 60%, transparent); animation: sc-streak 3.6s linear infinite; }
.sc-bar { position: absolute; left: 0; bottom: 5.5%; width: 64%; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(236, 235, 232, .9) 31px 34px) 0 0 / 100% 3px no-repeat, repeating-linear-gradient(90deg, transparent 0 47px, rgba(236, 235, 232, .9) 47px 49px) 0 100% / 100% 3px no-repeat, var(--red); clip-path: polygon(0 0, 92% 0, 94% 30%, 97% 10%, 100% 55%, 95% 70%, 98% 100%, 0 100%); }

/* Centre art band */
.sc-band { position: absolute; z-index: 2; left: 21%; top: 10%; width: min(40%, 560px); aspect-ratio: 600 / 340; background: var(--ink); clip-path: polygon(14% 0, 100% 0, 97% 9%, 100% 14%, 86% 100%, 0 100%, 3% 90%, 0 86%); animation: sc-float 6s ease-in-out infinite; }
.sc-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.sc-fallback .sc-band img { object-fit: contain; padding: 6% 20%; }
.sc-shards { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-shards .ink { fill: var(--ink); }
.sc-shards .slash { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: square; animation: sc-pulse 2.4s ease-in-out infinite; }

/* Corner marks */
.sc-marks { position: absolute; z-index: 3; left: 3.2%; top: 5%; display: flex; align-items: center; gap: 14px; margin: 0; }
.sc-marks img { width: auto; filter: grayscale(1) brightness(2.4); }
.sc-marks img:first-child { height: 34px; }
.sc-marks img:nth-child(2) { height: 24px; }
.sc-glyph { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; }
.sc-label { position: absolute; z-index: 3; right: 3%; top: 5%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; background: var(--ink); color: #fff; font: 800 15px/1 var(--display); letter-spacing: .14em; }
.sc-label i { width: 10px; height: 10px; background: var(--red); }

/* Title block, bottom-left */
.sc-title { position: absolute; z-index: 3; left: 4.5%; bottom: 12%; width: min(54%, 700px); display: grid; gap: 10px; justify-items: start; }
.sc-title::before { content: ""; position: absolute; z-index: -1; left: 30%; top: 10%; width: 80%; height: clamp(14px, 1.6vw, 26px); background: linear-gradient(90deg, transparent, rgba(200, 17, 27, .55) 30%, transparent); filter: blur(3px); transform: skewX(-25deg); animation: sc-smear 2.8s ease-in-out infinite; }
.sc-name { display: -webkit-box; max-width: 100%; margin: 0; overflow: hidden; color: var(--red); font: italic 900 clamp(48px, 5.4vw, 88px)/.92 var(--slab); letter-spacing: -.02em; text-transform: uppercase; text-shadow: 10px 0 0 rgba(200, 17, 27, .18), 22px 0 0 rgba(200, 17, 27, .08); overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-name.is-long { font-size: clamp(34px, 3.4vw, 56px); -webkit-line-clamp: 3; }
.sc-sub { margin: 0; font: 900 clamp(20px, 1.9vw, 30px)/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.sc-pill { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 0; }
.sc-pill svg { width: 12px; height: 20px; fill: none; stroke: var(--red); stroke-width: 2.4; }
.sc-pill span { padding: 9px 20px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.sc-quote { max-width: 460px; color: #3a3a3e; font: italic 500 18px/1.35 var(--serif); }

/* Info cluster, bottom-right */
.sc-info { position: absolute; z-index: 3; right: 4%; bottom: 12%; width: min(30%, 360px); display: grid; gap: 12px; justify-items: start; }
.sc-tiles { display: flex; align-items: center; gap: 8px; margin: 0; }
.sc-tiles > span:not(.sc-status) { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); }
.sc-tiles > span:nth-child(2) { background: var(--red); }
.sc-tiles svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; }
.sc-tiles > span:first-child svg { stroke: var(--red); }
.sc-status { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
/* HOT stays at .93 of the ONLINE height. */
.sc-status .mark-online { height: 30px; }
.sc-status .mark-hot { height: 27.9px; }
.sc-status .mark-offline { color: var(--ink); font-size: 13px; }
.sc-serif { display: -webkit-box; max-width: 100%; margin: 0; overflow: hidden; font: 600 clamp(28px, 2.5vw, 40px)/1.02 var(--serif); overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 800 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.sc-tag { padding: 6px 10px; background: var(--red); color: #fff; }
.sc-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.sc-stats dt { color: #6a6a70; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.sc-stats dd { margin: 5px 0 0; font: 900 20px/1 var(--display); }
.sc-stats div:last-child dd { font-size: 15px; line-height: 20px; }
.sc-thumbs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-thumbs li { width: 54px; height: 54px; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
.sc-thumbs a { display: block; height: 100%; }
.sc-thumbs img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.24) contrast(1.6); }
.sc-thumbs .is-current { border-color: var(--red); }
.sc-thumbs .is-current img { filter: none; }
.sc-foot { justify-self: end; margin: 0; color: #6a6a70; font: 600 12px/1 var(--display); letter-spacing: .14em; }

@keyframes sc-streak { from { transform: translateX(-30px); opacity: .5; } 50% { opacity: 1; } to { transform: translateX(30px); opacity: .5; } }
@keyframes sc-smear { 50% { transform: skewX(-25deg) translateX(24px); opacity: .55; } }
@keyframes sc-pulse { 50% { opacity: .6; } }
@keyframes sc-float { 50% { transform: translateY(-6px); } }
@keyframes sc-turn { to { transform: rotate(360deg); } }

/* Mid widths: the info cluster drops under the title so neither crowds the band. */
@media (max-width: 1200px) {
  .sc { aspect-ratio: auto; min-height: 720px; max-height: none; }
  .sc-band { top: 9%; width: min(44%, 480px); }
  .sc-title { bottom: auto; top: 58%; width: 54%; }
  .sc-info { width: 34%; }
}

/* Phones and tablets: art band, then the title block, then the info cluster. */
@media (max-width: 960px) {
  .sc { display: grid; gap: 24px; min-height: 0; padding: 88px 20px 56px; }
  .sc-wedge { clip-path: polygon(0 0, 100% 0, 100% 40px, 0 150px); }
  .sc-wedge-edge { clip-path: polygon(0 0, 100% 0, 100% 50px, 75% 77px, 50% 105px, 25% 133px, 0 162px); }
  .sc-duo { top: 90px; bottom: auto; width: 70%; height: 300px; }
  .sc-chev { display: none; }
  .sc-streak { left: 0; top: 130px; width: 100%; height: 170px; }
  .sc-bar { bottom: 18px; width: 82%; height: 12px; }
  .sc-band { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; justify-self: center; }
  .sc-marks { left: 18px; top: 16px; gap: 10px; }
  .sc-marks img:first-child { height: 26px; }
  .sc-marks img:nth-child(2) { height: 18px; }
  .sc-glyph { width: 20px; height: 20px; }
  .sc-label { right: 14px; top: 14px; padding: 7px 12px; font-size: 12px; }
  .sc-title, .sc-info { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .sc-name { font-size: clamp(40px, 9vw, 72px); }
  .sc-name.is-long { font-size: clamp(30px, 7vw, 52px); -webkit-line-clamp: 4; }
  .sc-quote { font-size: 17px; }
  .sc-pill { gap: 8px; }
  .sc-pill span { padding: 8px 14px; font-size: 12px; letter-spacing: .07em; white-space: nowrap; }
  .sc-info { padding-top: 18px; border-top: 1px solid rgba(10, 10, 12, .16); }
  .sc-foot { justify-self: start; }
}