/* Homepage warp showcase. Effects stay local and stop for reduced motion. */
.sc-warps { margin: 64px auto 72px; max-width: 960px; scroll-margin-top: 28px; }
.sc-warps *, .sc-warp-dialog * { box-sizing: border-box; }
.sc-warps-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.sc-warps-kicker { display: block; color: #ffac73; font: 700 11px/1.5 var(--sc-mono, monospace); letter-spacing: .19em; text-transform: uppercase; }
.sc-warps .sc-warps-heading h2 { margin: 9px 0 12px; color: #fff8ef; font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -.045em; font-weight: 850; }
.sc-warps-heading h2 span { color: #ff9458; }
.sc-warps-heading p { max-width: 590px; margin: 0; color: #bec0c6; font-size: 15px; line-height: 1.7; }
.sc-warps-count { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #705041; border-radius: 6px; color: #f9ccb0; font: 700 10px/1.5 var(--sc-mono, monospace); letter-spacing: .12em; text-transform: uppercase; }
.sc-warp-carousel { --warp-rgb: 255, 116, 58; border: 1px solid rgba(var(--warp-rgb), .65); border-radius: 14px; background: #101317; box-shadow: 0 12px 36px #0006, 0 0 30px rgba(var(--warp-rgb), .2); transition: border-color .2s, box-shadow .2s; }
.sc-warps-track { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 13px 13px 0 0; }
.sc-warps-track::-webkit-scrollbar { display: none; }
.sc-warps-track:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sc-warp-card { --warp-rgb: 255, 116, 58; position: relative; min-width: 0; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #101317; }
.sc-warp-desert { --warp-rgb: 245, 198, 91; }
.sc-warp-plains { --warp-rgb: 159, 213, 105; }
.sc-warp-hills { --warp-rgb: 159, 182, 220; }
.sc-warp-swamp { --warp-rgb: 90, 205, 158; }
.sc-warp-ice { --warp-rgb: 121, 206, 255; }
.sc-warp-image-link { position: relative; display: block; overflow: hidden; border-radius: 13px 13px 0 0; aspect-ratio: 16 / 9; background: #191c21; }
.sc-warp-image-link img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); user-select: none; -webkit-user-drag: none; }
.sc-warp-image-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff26 47%, transparent 64%); transform: translateX(-110%); pointer-events: none; }
.sc-warp-index { position: absolute; top: 12px; left: 12px; color: #fff; background: #080c12d9; padding: 5px 8px; border: 1px solid #ffffff3d; border-radius: 5px; font: 700 10px/1.4 var(--sc-mono, monospace); letter-spacing: .1em; }
.sc-warp-expand { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; color: #fff; background: #080c12e6; border: 1px solid #ffffff4d; border-radius: 20px; padding: 7px 10px; font-size: 11px; font-weight: 700; }
.sc-warp-expand svg, .sc-warp-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sc-warp-body { position: relative; padding: 24px; border-top: 2px solid rgba(var(--warp-rgb), .8); background: linear-gradient(130deg, rgba(var(--warp-rgb), .07), transparent 65%); }
.sc-warp-tag { color: rgb(var(--warp-rgb)); font: 700 10px/1.4 var(--sc-mono, monospace); letter-spacing: .15em; text-transform: uppercase; }
.sc-warps .sc-warp-body h3 { margin: 7px 0 9px; color: #fff7ef; font-size: 30px; font-weight: 850; line-height: 1.12; letter-spacing: -.035em; }
.sc-warp-body p { margin: 0 0 19px; color: #c1c4cd; font-size: 14px; line-height: 1.65; min-height: 0; }
.sc-warp-body .sc-warp-copy, .sc-warp-body .sc-warp-manual { max-width: 330px; }
.sc-warp-carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid rgba(var(--warp-rgb), .25); }
.sc-warp-carousel-nav[hidden], .sc-warp-dots[hidden] { display: none; }
.sc-warp-arrow { flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--warp-rgb), .5); border-radius: 50%; background: #1b2028; color: rgb(var(--warp-rgb)); font-size: 26px; line-height: 1; cursor: pointer; }
.sc-warp-arrow:hover { border-color: rgb(var(--warp-rgb)); background: rgba(var(--warp-rgb), .15); }
.sc-warp-carousel-position { color: #fff4e9; font-size: 14px; font-weight: 750; text-align: center; }
.sc-warp-carousel-position small { display: block; margin-top: 5px; color: #acb3bf; font-size: 11px; font-weight: 400; }
.sc-warp-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0 12px 10px; }
.sc-warp-dot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-warp-dot::after { content: ''; width: 7px; height: 7px; border-radius: 8px; background: #737b87; transition: width .2s, background .2s; }
.sc-warp-dot[aria-current="true"]::after { width: 24px; background: rgb(var(--warp-rgb)); box-shadow: 0 0 12px rgba(var(--warp-rgb), .4); }
.sc-warp-swipe-note { padding: 12px 20px; color: #d2d7df; }
.sc-warp-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; color: #f7eee6; border: 1px solid rgba(var(--warp-rgb), .35); border-radius: 7px; background: #080b10; font: inherit; cursor: pointer; text-align: left; }
.sc-warp-copy code { color: rgb(var(--warp-rgb)); font: 700 13px/1.3 var(--sc-mono, monospace); }
.sc-warp-copy > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.sc-warp-copy:hover { background: rgba(var(--warp-rgb), .1); border-color: rgb(var(--warp-rgb)); }
.sc-warp-copy[hidden] { display: none; }
.sc-warp-manual { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px; color: #fff; background: #080b10; border: 1px solid #ffb785; border-radius: 5px; font: 13px monospace; }
.sc-warp-manual[hidden] { display: none; }
.sc-warp-nojs { color: #bfc5d0; font: 12px/1.5 var(--sc-mono, monospace); }
.sc-warps-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; padding: 19px 22px; border: 1px solid #71503c; border-radius: 10px; background: linear-gradient(110deg, #a9411d1f, #111317); }
.sc-warps-footer p { margin: 0; color: #c1c4cd; font-size: 13px; line-height: 1.65; }
.sc-warps-footer strong { display: block; color: #fff4e9; font-size: 17px; }
.sc-warps .sc-warps-play { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 46px; padding: 12px 20px; border-radius: 7px; background: linear-gradient(110deg, #ffb66c, #ff7636); color: #231008; font-weight: 800; box-shadow: 0 4px 20px #fa702326; }
.sc-warps .sc-warps-play:hover { background: #ffbe7d; color: #140b07; }
.sc-warps-status { min-height: 22px; margin: 12px 0 0; color: #ffd4ac; font-size: 13px; line-height: 1.6; }
.sc-warps a:focus-visible, .sc-warps button:focus-visible, .sc-warp-dialog button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.sc-warps-track .sc-warp-image-link:focus-visible { outline-offset: -5px; }
.sc-warp-dialog { padding: 0; width: min(1280px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto; color: #fff8ef; background: #101317; border: 1px solid #fa9c62; border-radius: 14px; box-shadow: 0 0 65px #fa682326; overflow: auto; }
.sc-warp-dialog:not([open]) { display: none; }
.sc-warp-dialog::backdrop { background: #05070beb; }
.sc-warp-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; }
.sc-warp-dialog-top h2 { margin: 0; color: #fff8ef; font-size: 24px; line-height: 1.2; }
.sc-warp-dialog-counter { display: block; margin-bottom: 4px; color: #f6b783; font: 10px/1.4 var(--sc-mono, monospace); letter-spacing: .13em; text-transform: uppercase; }
.sc-warp-dialog button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 46px; min-height: 46px; padding: 10px 14px; background: #252a33; color: #fff4e9; border: 1px solid #5e6674; border-radius: 7px; font: 700 14px/1.3 var(--sc-font, sans-serif); cursor: pointer; }
.sc-warp-dialog button:hover { border-color: #ffc089; background: #39302b; }
.sc-warp-dialog-image { display: block; width: 100%; height: auto; max-height: calc(100vh - 245px); max-height: calc(100dvh - 245px); min-height: 0; aspect-ratio: 16 / 9; object-fit: contain; background: #07090d; }
.sc-warp-dialog-bottom { padding: 16px 18px 18px; }
.sc-warp-dialog-caption { margin: 0 0 14px; color: #c6cbd4; font-size: 14px; line-height: 1.55; }
.sc-warp-dialog-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sc-warp-dialog-command { color: #ffba86; font: 700 13px/1.4 var(--sc-mono, monospace); }
@media (hover: hover) and (pointer: fine) {
  .sc-warp-image-link:hover img { transform: scale(1.035); }
  .sc-warp-image-link:hover::after { transform: translateX(110%); transition: transform .8s ease; }
}
@media (max-width: 600px) {
  .sc-warps { margin: 42px 0 48px; }
  .sc-warps-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 25px; }
  .sc-warps-heading p { font-size: 14px; }
  .sc-warp-body { padding: 20px 18px; }
  .sc-warp-body p { min-height: 69px; }
  .sc-warp-carousel-nav { padding: 12px; gap: 8px; }
  .sc-warps-footer { flex-direction: column; align-items: stretch; padding: 18px; }
  .sc-warp-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .sc-warp-dialog-top, .sc-warp-dialog-bottom { padding: 13px; }
  .sc-warp-dialog button { padding: 9px 10px; font-size: 12px; }
  .sc-warp-dialog-command { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-warp-carousel, .sc-warp-dot::after, .sc-warp-card, .sc-warp-image-link img, .sc-warp-image-link::after { transition: none !important; transform: none !important; }
  .sc-warps-track { scroll-behavior: auto; }
}

.sc-warp-outpost { --warp-rgb: 255, 181, 99; }
.sc-warp-koth { --warp-rgb: 255, 139, 117; }
.sc-warp-boss { --warp-rgb: 241, 112, 87; }
.sc-warp-nether { --warp-rgb: 255, 103, 39; }
.sc-warp-end { --warp-rgb: 174, 144, 255; }
.sc-warp-body p small { display: block; margin-top: 5px; color: #a3a9b4; font-size: 11px; }