/* Scoped additions to the existing 1BITDRAGON site. */
.dragon-wrap { width: min(100% - 64px, 1216px); margin-inline: auto; }
.dragon-eyebrow { color: #ff9393; font-size: 11px; font-weight: 800; line-height: 1.6; letter-spacing: .14em; }
.dragon-hero { padding: 136px 0 58px; background: radial-gradient(ellipse at 20% 15%, #fa5c5c08, transparent 55%); }
.dragon-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
.dragon-hero h1 { margin: 18px 0 24px; font-size: clamp(40px, 4.1vw, 56px); font-weight: 800; line-height: 1.09; letter-spacing: -.045em; color: #fff; }
.dragon-hero h1 span { color: #ff8282; }
.dragon-lead { color: #e1e1e6; font-size: 18px; line-height: 1.65; max-width: 440px; }
.dragon-description { margin: 16px 0 26px; color: #aeb0ba; font-size: 15px; line-height: 1.7; max-width: 440px; }
.dragon-buy { display: flex; flex-wrap: wrap; gap: 12px; }
.dragon-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 20px; border-radius: 9px; font-size: 14px; line-height: 1.5; font-weight: 800; text-align: center; transition: background .15s; color: #fff; }
.dragon-button-brand { background: #cf3f45; }
.dragon-button-brand:hover { background: #b83238; }
.dragon-button-steam { background: #145285; }
.dragon-button-steam:hover { background: #17679f; }
.dragon-platforms { font-size: 11px; color: #a6a6ae; margin-top: 16px; line-height: 1.7; }
.dragon-platforms span { padding: 0 6px; }
.dragon-product { margin: 0; min-width: 0; }
.dragon-product-image { display: block; position: relative; padding: 8px; border: 1px solid #ffffff24; border-radius: 12px; background: #2d2d2d; box-shadow: 0 25px 65px #0005; }
.dragon-product-image img { display: block; width: 100%; height: auto; border-radius: 5px; }
.dragon-demo-link { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 8px 6px; color: #e6e6ec; font-size: 13px; font-weight: 600; }
.dragon-demo-link i { color: #ff8282; font-size: 19px; }
.dragon-product figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: #a6a6ae; font-size: 12px; }
.dragon-dot { width: 6px; height: 6px; border-radius: 50%; background: #fa5c5c; }
.dragon-discover { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 58px; padding-block: 23px; border-top: 1px solid #ffffff15; color: #cacbd1; font-size: 13px; }
.dragon-new { color: #ff9696; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.dragon-discover-link { font-weight: 600; color: #f4f4f5; }
.dragon-discover-link span { padding-left: 8px; color: #ff9393; }
.dragon-coming { padding: 75px 0 36px; background: #151515; border-block: 1px solid #ffffff0d; }
.dragon-section-heading { margin-bottom: 36px; }
.dragon-section-heading h2 { color: #fff; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.16; font-weight: 800; letter-spacing: -.035em; margin: 14px 0 17px; }
.dragon-section-heading h2 span { color: #b6b6be; }
.dragon-section-heading > p:last-child { color: #aeb0ba; font-size: 16px; line-height: 1.7; max-width: 760px; }
.dragon-releases { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dragon-release { min-width: 0; display: flex; flex-direction: column; background: #222; border: 1px solid #ffffff1a; border-radius: 12px; overflow: hidden; }
.dragon-release-pack { border-color: #fa5c5c4d; }
.dragon-release-art { width: 100%; height: auto; aspect-ratio: 1232 / 706; object-fit: contain; display: block; background: #111; }
.dragon-release-copy { padding: 26px; display: flex; flex: 1; flex-direction: column; }
.dragon-release-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 11px; line-height: 1.7; color: #b1b1ba; margin-bottom: 13px; }
.dragon-kind { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #ff9696; }
.dragon-release h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.2; color: #fff; font-weight: 800; letter-spacing: -.025em; }
.dragon-release-copy > p { color: #b9bac2; font-size: 14px; line-height: 1.75; }
.dragon-release-copy > .dragon-release-hook { color: #eee; font-size: 16px; font-weight: 600; margin: 12px 0 9px; }
.dragon-highlights { display: grid; gap: 9px; list-style: none; padding: 0; margin: 22px 0 27px; color: #e4e4e8; font-size: 13px; }
.dragon-highlights li { position: relative; padding-left: 18px; line-height: 1.6; }
.dragon-highlights li::before { content: ''; position: absolute; top: .6em; left: 0; width: 5px; height: 5px; background: #ff9393; border-radius: 1px; }
.dragon-release-actions { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.dragon-release-actions .dragon-button { width: 100%; }
.dragon-preview-button { display: flex; align-items: center; justify-content: center; gap: 10px; color: #d8d8df; font-size: 13px; font-weight: 600; min-height: 44px; border-radius: 6px; cursor: pointer; background: none; border: 0; }
.dragon-preview-button:hover { background: #ffffff0b; color: #fff; }
.dragon-preview-button i { font-size: 10px; color: #ff9393; }
.dragon-preview-button span { color: #a6a6ae; font-weight: 400; }
.dragon-release-copy > .dragon-requirement { margin-top: 14px; font-size: 11px; line-height: 1.7; color: #aaaab2; }
.dragon-return { color: #aeb0ba; font-size: 13px; line-height: 1.8; text-align: center; margin-top: 32px; }
.dragon-return a { color: #ff9393; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.dragon-nav-new { color: #ff9393; }
.dragon-mobile-nav { display: none; }
.dragon-dialog { width: min(940px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; margin: auto; border: 1px solid #ffffff30; border-radius: 14px; background: #222; color: #eee; box-shadow: 0 30px 120px #0009; }
.dragon-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.dragon-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.dragon-dialog h2 { font-size: clamp(18px, 3vw, 26px); font-weight: 800; line-height: 1.3; margin-top: 5px; }
.dragon-close { flex-shrink: 0; width: 44px; height: 44px; font-size: 28px; border-radius: 6px; background: #ffffff0d; cursor: pointer; }
.dragon-close:hover { background: #ffffff20; }
.dragon-dialog video { width: 100%; max-height: 55dvh; aspect-ratio: 16 / 9; display: block; background: #000; }
.dragon-dialog > p { margin: 18px 0; font-size: 13px; line-height: 1.6; color: #b9bac2; }
.dragon-dialog-open { overflow: hidden; }
.dragon-skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 20px; background: #fff; color: #171717; transform: translateY(-160%); border-radius: 5px; }
.dragon-skip:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible { outline: 3px solid #ffb5b5; outline-offset: 4px; }
@media (max-width: 1023px) { .dragon-hero-grid { gap: 30px; } .dragon-hero { padding-top: 110px; } .dragon-release-copy { padding: 22px; } .dragon-mobile-nav { display: flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; } .dragon-mobile-nav a { padding: 12px 8px; } }
@media (max-width: 767px) {
    .dragon-wrap { width: calc(100% - 40px); }
    .dragon-hero { padding-top: 104px; padding-bottom: 32px; }
    .dragon-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .dragon-hero h1 { font-size: clamp(40px, 8.5vw, 56px); margin-top: 14px; }
    .dragon-hero h1 br:last-child { display: none; }
    .dragon-lead { font-size: 17px; max-width: 100%; }
    .dragon-description { max-width: 100%; }
    .dragon-buy .dragon-button { flex: 1; padding-inline: 14px; }
    .dragon-eyebrow { font-size: 10px; }
    .dragon-discover { margin-top: 32px; text-align: center; gap: 9px; }
    .dragon-discover > span:nth-child(2) { width: 100%; }
    .dragon-coming { padding-top: 50px; }
    .dragon-releases { grid-template-columns: 1fr; gap: 24px; }
    .dragon-section-heading h2 { font-size: 32px; }
    .dragon-section-heading > p:last-child { font-size: 15px; }
    .dragon-desktop-break { display: none; }
    .dragon-release-copy { padding: 22px; }
    .dragon-release h3 { font-size: 25px; }
    .dragon-return a { display: block; white-space: normal; margin: 6px 0 0; }
    .dragon-mobile-nav { display: flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; }
    .dragon-mobile-nav a { padding: 12px 8px; }
    .dragon-dialog { padding: 16px; }
}
@media (max-width: 359px) { .dragon-buy { flex-direction: column; } .dragon-release h3 { font-size: 22px; } .dragon-wrap { width: calc(100% - 32px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .dragon-button { transition: none; } }