@charset "UTF-8"; :root {
    --ink: #18231c;
    --paper: #e9e7da;
    --muted: #73776c;
    --green: #c0ed75;
    --line: #c8cbbd;
    --dark: #19211d;
    --mono: 'Courier New',monospace;
    --body: 'PingFang SC','Microsoft YaHei',sans-serif
}

#main *,
#modal * {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 165px
}

body {
    margin: 0;
    background: var(--paper);
    /* color:var(--ink); */
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.65
}

button,input,select {
    font: inherit
}

button,a,input,select {
    -webkit-tap-highlight-color: transparent
}

button,a {
    touch-action: manipulation
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

button:disabled {
    opacity: .58;
    cursor: wait
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline: 3px solid #72a929;
    outline-offset: 4px
}

picture,img {
    display: block
}

img {
    width: 100%;
    height: auto
}

button {
    color: inherit
}

.wrap {
    width: min(1240px,calc(100% - 96px));
    margin-inline:auto}

.skip {
    position: fixed;
    top: -100px;
    z-index: 100;
    background: var(--green);
    padding: 12px
}

.skip:focus {
    top: 0
}

.header {
    height: 86px;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3.5% 0 0;
    background: #e9e7daf5;
    border-bottom: 1px solid #abb1a4;
    backdrop-filter: blur(12px)
}

.brand {
    width: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.2;
    white-space: nowrap
}

.brand-mark {
    font-family: Georgia,serif;
    font-style: italic;
    font-size: 37px;
    line-height: 40px;
    color: #e9e7da;
    background: var(--ink);
    width: 37px;
    text-align: center;
    transform: skew(-8deg)
}

.brand small {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 5px
}

.header nav {
    display: flex;
    gap: 30px;
    height: 100%;
    align-items: center
}

.header nav a {
    font-size: 14px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center
}

.header nav a:after {
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--ink);
    content: '';
    transition: width .2s
}

.header nav a.active {
    font-weight: 800
}

.header nav a.active:after {
    width: 100%
}

.text-button {
    border: 0;
    background: none;
    padding: 8px 0;
    font-weight: 600;
    text-align: left
}

.login {
    font-size: 13px
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 740px;
    background: #19211e;
    color: var(--paper)
}

.hero-art {
    position: absolute;
    inset: 0 0 0 31%;
    z-index: -3
}

.hero-art picture,.hero-art img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center
}

.hero-art:after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg,#19211e 0%,#19211ee8 12%,#19211e66 46%,#19211e05 75%),linear-gradient(0deg,#19211eb0,transparent 40%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .1;
    background-image: linear-gradient(#b1c4a5 1px,transparent 1px),linear-gradient(90deg,#b1c4a5 1px,transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(90deg,black,transparent 65%)
}

.hero-content {
    padding-top: 56px;
    padding-bottom: 62px
}

.eyebrow {
    font: 11px/1.5 var(--mono);
    letter-spacing: 2px;
    font-weight: bold;
    margin: 0 0 24px
}

.light {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 10px #c0ed7550
}

.hero .eyebrow {
    color: #bac5b0
}

.hero-pre {
    font-weight: 700;
    letter-spacing: 10px;
    font-size: 20px;
    margin: 30px 0 2px
}

.hero h1 {
    font-size: clamp(56px,6.7vw,96px);
    font-weight: 950;
    letter-spacing: -5px;
    line-height: 1.05;
    margin: 0;
    max-width: 600px;
    transform: skew(-5deg);
    text-shadow: 3px 3px 0 #18231c
}

.hero h1 span {
    color: var(--green)
}

.hero h1 em {
    display: block;
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 8px;
    margin: 14px 0 0 4px
}

.hero-line {
    font-size: 29px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: 2px;
    margin: 29px 0 16px
}

.hero-desc {
    font-size: 14px;
    color: #bcc4b7;
    line-height: 1.9;
    margin-bottom: 26px
}

.benefit {
    display: flex;
    align-items: center;
    gap: 21px;
    width: fit-content;
    border-block:1px solid #56624f;padding: 11px 0;
    margin-bottom: 23px
}

.benefit-label {
    font-size: 12px;
    line-height: 1.5;
    color: #c6cfbc
}

.benefit>strong {
    color: var(--green);
    font: 76px/.95 var(--mono);
    font-weight: bold;
    letter-spacing: -7px
}

.benefit>strong span {
    font: 26px var(--body);
    margin-left: 6px
}

.benefit>div {
    border-left: 1px solid #56624f;
    padding-left: 20px
}

.benefit b {
    font-size: 13px;
    font-weight: 500;
    display: block
}

.benefit small {
    color: #a1ad97;
    font-size: 12px
}

.hero-actions {
    display: flex;
    gap: 12px;
    max-width: 500px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-height: 52px;
    padding: 12px 23px;
    border: 1px solid var(--ink);
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    transition: background .2s,transform .2s
}

.button:hover {
    transform: translateY(-2px);
    background: #d5ddc4
}

.button span {
    margin-left: auto
}

.primary {
    background: var(--green);
    color: var(--ink);
    border-color: var(--green)
}

.primary:hover {
    background: #d2ff8e
}

.outline {
    border-color: #76836d;
    color: #e5e9da
}

.outline:hover {
    background: #35452d
}

.hero-rule {
    font-size: 12px;
    color: #ced5c4;
    margin: 15px 0 0
}

.hero-rule span {
    display: block;
    color: #95a28c;
    font-size: 11px;
    margin-top: 5px
}

.scene-caption {
    position: absolute;
    bottom: 27px;
    right: 35px;
    text-align: right;
    opacity: .8;
    font-size: 11px
}

.scene-caption b {
    display: block;
    font: 9px var(--mono);
    letter-spacing: 2px
}

.prototype-stamp {
    position: absolute;
    right: 34px;
    top: 25px;
    transform: rotate(5deg);
    padding: 7px 12px;
    border: 1px solid #d5dbb7;
    color: #e0e4c9;
    font: 11px/1.5 var(--mono);
    text-align: center;
    background: #19211e80
}

.link-strip {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line)
}

.bili-mark {
    font-family: var(--mono);
    font-size: 21px;
    font-weight: bold;
    border: 2px solid var(--ink);
    padding: 0 9px;
    transform: rotate(-3deg)
}

.link-strip strong {
    font-size: 15px
}

.link-strip p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #5e675b
}

.link-strip .button {
    margin-left: auto;
    flex-shrink: 0;
    min-height: 43px;
    background: #d8ddca;
    font-size: 13px
}

.section {
    padding-top: 85px;
    padding-bottom: 85px
}

.section-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px
}

.section-top .eyebrow {
    margin-bottom: 12px;
    color: #69745d
}

.section h2 {
    font-size: 34px;
    line-height: 1.4;
    margin: 0;
    font-weight: 800;
    letter-spacing: -1px
}

.section-note {
    font-size: 12px;
    line-height: 1.8;
    text-align: right;
    color: #6b7465;
    margin: 0
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.prize-card {
    border: 1px solid #b9c0ae;
    min-width: 0;
    position: relative;
    background: #e2e3d5;
    display: flex;
    flex-direction: column
}

.prize-card.featured {
    grid-column: span 2;
    background: #d5dcc9
}

.prize-top {
    display: flex;
    justify-content: space-between;
    padding: 15px 18px;
    font: 10px var(--mono);
    letter-spacing: 1px
}

.prize-tag {
    font-size: 11px;
    background: var(--ink);
    color: #e0e9d1;
    padding: 3px 8px;
    letter-spacing: 0
}

.prize-visual {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 20px;
    background: radial-gradient(ellipse,#b4c4a5aa,transparent 65%)
}

.featured .prize-visual {
    height: 190px
}

.prize-visual svg {
    width: 150px;
    height: 130px;
    stroke: #4a6042;
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 7px 0 #9aa88a30)
}

.featured .prize-visual svg {
    width: 240px;
    height: 165px
}

.prize-visual:after {
    content: '示意占位 / 正式图片待补充';
    position: absolute;
    bottom: 3px;
    font-size: 10px;
    color: #66765c
}

.prize-visual img {
    height: 100%;
    object-fit: contain
}

.prize-info {
    padding: 17px 20px 22px;
    border-top: 1px solid #b8c3aa;
    margin-top: 15px
}

.prize-info h3 {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px;
    min-height: 24px
}

.prize-info p {
    font-size: 11px;
    color: #67725d;
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.prize-info b {
    color: var(--ink);
    font-weight: 600
}

.draw-section {
    background: var(--dark);
    color: #e1e6d7;
    padding: 80px 0;
    position: relative;
    background-image: linear-gradient(90deg,#35433040 1px,transparent 1px),linear-gradient(#35433040 1px,transparent 1px);
    background-size: 48px 48px
}

.draw-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9%;
    align-items: center
}

.draw-copy .eyebrow {
    color: #91a67e
}

.draw-copy h2 {
    font-size: 48px;
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0 0 24px
}

.draw-copy>p:not(.eyebrow) {
    font-size: 14px;
    color: #9eae93;
    line-height: 2
}

.rule-pill {
    display: flex;
    align-items: center;
    gap: 21px;
    border-block:1px solid #4a5841;margin: 28px 0 18px;
    padding: 14px 0;
    max-width: 370px
}

.rule-pill>b {
    font: 65px/.9 var(--mono);
    color: var(--green)
}

.rule-pill span {
    font-size: 14px
}

.rule-pill small {
    font-size: 11px;
    color: #9daa91
}

.draw-copy .text-button {
    color: #c0ed75;
    font-size: 12px
}

.terminal {
    border: 1px solid #6c7a5e;
    padding: 12px;
    background: #343e32;
    box-shadow: 8px 8px 0 #0f1713;
    transform: rotate(1deg)
}

.terminal-top,.terminal-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 9px var(--mono);
    letter-spacing: 1px;
    padding: 4px 5px 13px;
    color: #b1bea3
}

.terminal-top>span:first-child {
    font: 11px var(--body)
}

.terminal-screen {
    padding: 25px 34px 18px;
    text-align: center;
    border: 3px solid #101910;
    background: #17251b;
    box-shadow: inset 0 0 45px #0006;
    color: #c5e6a7;
    position: relative
}

.terminal-screen>.eyebrow {
    font-size: 9px;
    margin: 0
}

.scanner {
    position: relative;
    width: 96px;
    height: 90px;
    margin: 18px auto 14px;
    border: 1px solid #799463;
    clip-path: polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%);
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(0deg,transparent,transparent 3px,#7399580d 4px)
}

.scanner span {
    font: 58px var(--mono);
    color: var(--green)
}

.scanner i {
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: 47%;
    background: #c0ed7570
}

.terminal h3 {
    font-size: 22px;
    margin: 0 0 8px
}

.terminal #draw-status {
    font-size: 12px;
    min-height: 40px;
    margin: 0;
    line-height: 1.8
}

.chance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    padding: 10px 0;
    border-block:1px dashed #536f43;font-size: 12px
}

.chance strong {
    font: 24px var(--mono)
}

.terminal .button {
    width: 100%
}

.record {
    color: #a9bc96;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 4px
}

.terminal-bottom {
    padding: 13px 5px 2px;
    font: 9px var(--body)
}

.muted {
    color: #69745d;
    font-size: 12px
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #aab59e
}

.rules-grid article {
    padding: 26px 24px 0 0
}

.rules-grid article+article {
    border-left: 1px solid var(--line);
    padding-left: 24px
}

.rules-grid article>span {
    font: 12px var(--mono);
    color: #7c896f
}

.rules-grid h3 {
    font-size: 15px;
    margin: 12px 0
}

.rules-grid p {
    font-size: 12px;
    line-height: 1.95;
    color: #63705b
}

.about {
    background: #dce0d0;
    border-top: 1px solid #c2cbb6
}

.genre {
    font-size: 11px;
    letter-spacing: 1px;
    color: #68755c
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8%;
    align-items: start
}

.about-layout h3 {
    font-size: 25px;
    line-height: 1.6;
    margin: 8px 0 20px
}

.about-layout p {
    color: #626e59;
    font-size: 13px;
    line-height: 2
}

.about-layout .credits {
    font: 11px/2 var(--mono);
    margin-top: 25px
}

.about .text-button {
    font-size: 12px;
    border-bottom: 1px solid #7a8d6a
}

.gallery-main {
    position: relative;
    display: block;
    padding: 0;
    border: 5px solid #bdc7ad;
    background: none;
    width: 100%;
    overflow: hidden
}

.gallery-main img {
    aspect-ratio: 16/9;
    object-fit: contain
}

.gallery-main>span {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #17231ddc;
    color: #d4e4bf;
    font-size: 10px;
    padding: 4px 10px
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.gallery-thumbs button {
    width: 25%;
    padding: 0;
    border: 2px solid transparent;
    background: none
}

.gallery-thumbs button:hover {
    border-color: #4e6841
}

.gallery-thumbs img {
    aspect-ratio: 16/9;
    object-fit: contain
}

footer {
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 145px
}

footer p {
    font-size: 10px;
    line-height: 1.9;
    color: #738067
}

footer .text-button {
    margin-left: auto;
    font-size: 12px
}

.demo-panel {
    border-top: 1px solid #bbc5ae;
    font-size: 11px;
    background: #d9ddcd;
    padding: 10px max(24px,calc((100vw - 1240px)/2))
}

.demo-panel summary {
    cursor: pointer;
    width: fit-content;
    color: #67775c
}

.demo-panel>div {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0
}

.demo-panel label {
    display: grid;
    gap: 5px
}

.demo-panel select,.demo-panel button {
    border: 1px solid #a4b294;
    background: #e9eddf;
    padding: 7px;
    font-size: 11px
}

.demo-panel p {
    width: 100%;
    margin: 0;
    color: #6f7e63
}

dialog {
    padding: 0;
    width: min(490px,calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    border: 1px solid #8c9e79;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 10px 10px 0 #101d1470;
    overflow: hidden;
    margin: auto
}

dialog::backdrop {
    background: #09150ed1;
    backdrop-filter: blur(5px)
}

.modal-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid #b7c1aa;
    background: #d7ddc9;
    padding-left: 24px;
    font: 9px var(--mono);
    letter-spacing: 2px
}

.modal-head button {
    width: 48px;
    height: 47px;
    border: 0;
    border-left: 1px solid #b7c1aa;
    background: none;
    font-size: 18px
}

.modal-head button:hover {
    background: #c0ed75
}

#modal-content {
    padding: 30px;
    overflow: auto;
    max-height: calc(100dvh - 82px);
    overscroll-behavior: contain
}

#modal-content h2 {
    font-size: 26px;
    line-height: 1.5;
    margin: 0 0 14px;
    letter-spacing: -.5px
}

#modal-content .eyebrow {
    color: #758168;
    font-size: 10px;
    margin-bottom: 12px
}

#modal-content p {
    font-size: 13px;
    color: #63705a;
    line-height: 1.9
}

#modal-content .button {
    width: 100%;
    margin-top: 12px
}

#modal-content label {
    font-size: 13px;
    font-weight: 600;
    display: grid;
    gap: 7px;
    margin-top: 22px
}
/* 
input {
    width: 100%;
    min-width: 0;
    border: 1px solid #a2b18e;
    border-radius: 0;
    background: #f4f3e9;
    padding: 13px;
    font-family: var(--mono);
    font-size: 16px;
    color: var(--ink)
} */

.callout {
    padding: 14px 17px;
    border: 1px dashed #9cad86;
    background: #dce3cd;
    font-size: 12px;
    line-height: 1.9
}

.callout strong {
    display: block
}

.form-error {
    font-size: 12px;
    color: #a33d23;
    min-height: 23px;
    margin-top: 8px
}

.demo-hint {
    font-size: 11px!important;
    padding-top: 12px;
    border-top: 1px solid #c6cfb8
}

.status-icon {
    font: 54px var(--mono);
    color: #5d8139;
    margin-bottom: 15px
}

.process {
    text-align: center;
    padding: 22px 0
}

.process .scanner {
    width: 120px;
    height: 110px;
    margin: 10px auto 28px
}

.process .scanner i {
    animation: scan 1s ease-in-out infinite
}

.process .scanner span {
    font-size: 35px
}

.process p {
    min-height: 50px
}

.share-poster {
    max-height: 50dvh;
    object-fit: contain;
    margin: 10px auto
}

.gallery-dialog {
    width: min(1000px,calc(100vw - 24px))
}

.gallery-dialog #modal-content {
    padding: 14px
}

.gallery-dialog #modal-content img {
    max-height: 70dvh;
    object-fit: contain
}

#toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translate(-50%,20px);
    z-index: 60;
    color: #e6edda;
    background: #17231d;
    padding: 10px 24px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    max-width: 90vw
}

#toast.visible {
    opacity: 1;
    transform: translate(-50%,0)
}

@keyframes scan {
    0%,100% {
        top: 15%;
        opacity: .3
    }

    50% {
        top: 85%;
        opacity: 1
    }
}

@media(min-width: 1600px) {
    .hero-art {
        left:36%
    }

    .hero {
        min-height: 790px
    }

    .hero-content {
        padding-top: 70px
    }
}

@media(max-width: 1050px) {
    .wrap {
        width:calc(100% - 56px)
    }

    .header nav {
        gap: 20px
    }

    .brand {
        font-size: 16px
    }

    .header {
        padding: 0 25px
    }

    .hero {
        min-height: 720px
    }

    .hero-art {
        left: 20%
    }

    .hero-art:after {
        background: linear-gradient(90deg,#19211e,#19211ee8 20%,#19211e30 85%)
    }

    .hero h1 {
        font-size: 78px
    }

    .draw-layout {
        gap: 6%
    }

    .draw-copy h2 {
        font-size: 40px
    }

    .terminal-screen {
        padding: 23px
    }

    .prize-grid {
        gap: 12px
    }

    .section h2 {
        font-size: 30px
    }

    .rules-grid {
        grid-template-columns: 1fr 1fr
    }

    .rules-grid article:nth-child(3) {
        border-left: 0;
        padding-left: 0
    }

    .about-layout {
        gap: 5%
    }

    .login {
        font-size: 11px
    }

    .header nav a {
        font-size: 12px
    }

    .scene-caption {
        right: 20px
    }

    .link-strip {
        gap: 15px
    }

    .link-strip p {
        max-width: 390px
    }

    .bili-mark {
        font-size: 17px
    }

    .link-strip .button {
        padding: 9px 14px;
        gap: 10px
    }
}

@media(max-width: 700px) {
    html {
        scroll-padding-top:140px
    }

    .wrap {
        width: calc(100% - 40px)
    }

    .header {
        height: 92px;
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 12px 20px 0;
        gap: 5px
    }

    .brand {
        font-size: 15px
    }

    .brand-mark {
        font-size: 27px;
        width: 29px;
        line-height: 31px
    }

    .brand small {
        font-size: 6px;
        margin-top: 3px
    }

    .header nav {
        grid-row: 2;
        grid-column: 1/3;
        justify-content: space-between;
        height: 35px;
        gap: 12px
    }

    .header nav a {
        font-size: 11px;
        white-space: nowrap
    }

    .header nav a:after {
        bottom: 0;
        height: 2px
    }

    .login {
        font-size: 11px
    }

    .hero {
        min-height: 0
    }

    .hero-content {
        padding-top: 29px;
        padding-bottom: 28px
    }

    .hero .eyebrow {
        font-size: 8px;
        letter-spacing: 1px
    }

    .hero-art {
        inset: 0 0 auto 0;
        height: 410px;
        opacity: .55
    }

    .hero-art img {
        object-position: 59% center
    }

    .hero-art:after {
        background: linear-gradient(0deg,#19211e 0%,#19211e75 55%,#19211e40),linear-gradient(90deg,#19211eaa,transparent)
    }

    .hero-pre {
        font-size: 16px;
        margin-top: 57px;
        letter-spacing: 7px
    }

    .hero h1 {
        font-size: clamp(48px,13vw,76px);
        letter-spacing: -3px
    }

    .hero h1 em {
        font-size: 10px;
        letter-spacing: 5px
    }

    .hero-line {
        font-size: 24px;
        line-height: 1.5;
        margin-top: 30px
    }

    .hero-desc {
        font-size: 12px;
        margin: 15px 0 23px
    }

    .benefit {
        gap: 15px;
        width: 100%;
        padding: 13px 0
    }

    .benefit-label {
        font-size: 11px
    }

    .benefit>strong {
        font-size: 66px
    }

    .benefit>div {
        padding-left: 15px
    }

    .benefit b {
        font-size: 11px
    }

    .benefit small {
        font-size: 11px
    }

    .hero-actions {
        gap: 9px
    }

    .hero-actions .button {
        font-size: 12px;
        padding: 11px 15px;
        gap: 10px;
        min-height: 48px
    }

    .hero-actions .primary {
        flex: 1
    }

    .hero-rule {
        font-size: 11px;
        margin-top: 13px
    }

    .hero-rule span {
        font-size: 10px;
        display: inline;
        margin-left: 8px
    }

    .scene-caption {
        display: none
    }

    .prototype-stamp {
        font-size: 9px;
        top: 25px;
        right: 20px
    }

    .link-strip {
        flex-wrap: wrap;
        gap: 10px;
        padding: 23px 0
    }

    .bili-mark {
        font-size: 15px;
        padding: 0 5px;
        align-self: flex-start
    }

    .link-strip>div {
        flex: 1
    }

    .link-strip strong {
        font-size: 13px
    }

    .link-strip p {
        font-size: 11px;
        line-height: 1.8
    }

    .link-strip .button {
        width: 100%;
        margin: 4px 0 0;
        font-size: 12px
    }

    .section {
        padding-block:50px}

    .section-top {
        display: block;
        margin-bottom: 24px
    }

    .section-top .eyebrow {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 10px
    }

    .section h2 {
        font-size: 26px;
        letter-spacing: -.8px
    }

    .section-note {
        text-align: left;
        font-size: 10px;
        margin-top: 12px
    }

    .section-note br {
        display: none
    }

    .prize-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .prize-card.featured {
        grid-column: span 2
    }

    .featured .prize-visual {
        height: 150px
    }

    .prize-visual {
        height: 105px;
        margin-inline:8px}

    .prize-visual svg {
        width: 110px;
        height: 95px
    }

    .prize-visual:after {
        font-size: 8px
    }

    .prize-info {
        padding: 12px;
        margin-top: 10px
    }

    .prize-info h3 {
        font-size: 12px
    }

    .prize-info p {
        display: block;
        font-size: 10px
    }

    .prize-info p b {
        display: block;
        margin-top: 3px
    }

    .prize-top {
        padding: 11px 12px;
        font-size: 8px
    }

    .prize-tag {
        font-size: 9px
    }

    .draw-section {
        padding: 48px 0
    }

    .draw-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .draw-copy h2 {
        font-size: 35px
    }

    .draw-copy>p:not(.eyebrow) {
        font-size: 12px
    }

    .draw-copy .eyebrow {
        font-size: 9px
    }

    .rule-pill {
        margin: 23px 0 8px;
        max-width: none
    }

    .rule-pill>b {
        font-size: 48px
    }

    .rule-pill span {
        font-size: 12px
    }

    .terminal {
        transform: none;
        padding: 9px;
        box-shadow: 5px 5px 0 #0f1713
    }

    .terminal-screen {
        padding: 22px
    }

    .terminal h3 {
        font-size: 20px
    }

    .terminal #draw-status {
        font-size: 11px
    }

    .terminal-bottom {
        font-size: 8px
    }

    .rules-grid {
        grid-template-columns: 1fr
    }

    .rules-grid article,.rules-grid article+article {
        border-left: 0;
        border-bottom: 1px solid var(--line);
        padding: 21px 0 14px
    }

    .rules-grid article>span {
        float: left;
        margin-right: 17px;
        margin-top: 3px
    }

    .rules-grid h3 {
        margin: 0 0 9px;
        font-size: 14px
    }

    .rules-grid p {
        font-size: 12px;
        margin: 0 0 7px 32px
    }

    .section-top .muted,.genre {
        display: block;
        margin-top: 12px;
        font-size: 10px
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .about-layout h3 {
        font-size: 23px
    }

    .about-layout p {
        font-size: 12px
    }

    .about-layout .credits {
        font-size: 10px
    }

    footer {
        gap: 20px;
        flex-wrap: wrap;
        padding-block:30px}

    footer p {
        order: 3;
        width: 100%;
        font-size: 9px;
        margin: 0
    }

    footer .text-button {
        font-size: 11px
    }

    .demo-panel {
        padding: 10px 20px
    }

    dialog {
        max-height: calc(100dvh - 20px)
    }

    #modal-content {
        padding: 23px;
        max-height: calc(100dvh - 70px)
    }

    #modal-content h2 {
        font-size: 23px
    }

    #modal-content p {
        font-size: 12px
    }

    .modal-head {
        height: 44px
    }

    .modal-head button {
        height: 43px
    }

    #modal-content .button {
        min-height: 46px;
        font-size: 13px
    }

    .process {
        padding-block:5px}
}

@media(max-height: 550px) {
    #modal-content {
        padding:18px 24px
    }

    #modal-content h2 {
        font-size: 21px
    }

    .process .scanner {
        height: 50px;
        margin: 0 auto 15px
    }

    .process {
        padding: 0
    }

    .status-icon {
        font-size: 32px;
        margin: 0
    }

    .share-poster {
        max-height: 33dvh
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*:before,*:after {
        animation: none!important;
        transition: none!important
    }

    .process .scanner i {
        top: 50%
    }
}

@media(min-width: 701px) and (max-height:800px) {
    .header {
        height:70px
    }

    .hero {
        min-height: 615px
    }

    .hero-content {
        padding-top: 30px;
        padding-bottom: 28px
    }

    .hero-pre {
        margin-top: 20px;
        font-size: 17px
    }

    .hero h1 {
        font-size: 76px
    }

    .hero h1 em {
        font-size: 13px;
        margin-top: 10px
    }

    .hero-line {
        font-size: 25px;
        margin: 22px 0 12px
    }

    .hero-desc {
        font-size: 12px;
        margin: 0 0 20px
    }

    .benefit {
        padding: 9px 0;
        margin-bottom: 18px
    }

    .benefit>strong {
        font-size: 65px
    }

    .hero .eyebrow {
        margin-bottom: 17px
    }

    .hero-actions .button {
        min-height: 46px
    }

    .hero-rule {
        margin-top: 12px
    }
}

/* Keep the binding action reachable while its explanatory content scrolls. */
#bind-form .button {
    position: sticky;
    bottom: 0;
    box-shadow: 0 8px 0 var(--paper),0 -6px 0 var(--paper)
}

@media(max-height: 550px) {
    #modal-content>p {
        margin-block:8px
    }

    #modal-content .eyebrow {
        margin-bottom: 6px
    }

    #modal-content .callout {
        padding: 10px 12px
    }

    #modal-content label {
        margin-top: 12px
    }

    .form-error {
        min-height: 18px;
        margin-top: 4px
    }

    #modal-content .demo-hint {
        font-size: 10px!important
    }
}

.binding-dialog #modal-content {
    max-height: calc(100dvh - 158px)
}

.modal-actions {
    padding: 12px 24px;
    border-top: 1px solid #b7c1aa;
    background: var(--paper)
}

.modal-actions .button {
    width: 100%;
    min-height: 46px;
    margin: 0
}

.prize-visual.has-image:after {
    display: none
}

@media(max-width: 700px) and (max-height:700px) {
    .hero-content {
        padding-top:22px;
        padding-bottom: 22px
    }

    .hero-pre {
        margin-top: 20px
    }

    .hero-line {
        font-size: 18px;
        line-height: 1.6;
        margin: 22px 0 20px;
        letter-spacing: 0
    }

    .hero-line br {
        display: none
    }

    .hero-desc {
        display: none
    }

    .benefit {
        margin-bottom: 18px
    }

    .hero-rule {
        font-size: 10px
    }

    .hero-rule span {
        display: block;
        margin-left: 0
    }
}

/* V2: official key art, original wordmark, and supplied prize photography. */
.hero {
    min-height: 710px;
    background: #18221f
}

.hero-art {
    inset: 0 0 0 23%
}

.hero-art img {
    object-position: 58% center
}

.hero-art:after {
    background: linear-gradient(90deg,#18221f 0%,#18221ff2 8%,#18221fa3 27%,#18221f0a 60%),linear-gradient(0deg,#18221f90,transparent 38%)
}

.hero-grid {
    opacity: .06
}

.hero-content {
    padding-top: 38px;
    padding-bottom: 35px
}

.hero h1.hero-logo {
    width: 212px;
    margin: 20px 0 0;
    transform: none;
    text-shadow: none;
    font-size: 0;
    line-height: 1;
    letter-spacing: 0;
    filter: drop-shadow(0 3px 14px #0005)
}

.hero-logo img {
    width: 100%;
    height: auto
}

.hero-game-name {
    font-size: 12px;
    color: #d5d2bc;
    letter-spacing: 3px;
    margin: 15px 0 0
}

.hero-game-name span {
    font: 10px var(--mono);
    letter-spacing: 2px;
    margin-left: 8px;
    color: #9fafa1
}

.hero-line {
    font-size: 24px;
    letter-spacing: 0;
    margin: 24px 0 25px;
    max-width: 480px
}

.hero-line br {
    display: none
}

.scene-caption {
    color: #ede6ce
}

.prize-card {
    background: #e3e5d8
}

.prize-card.featured {
    background: #d6ddcc
}

button.prize-visual {
    padding: 0;
    border: 0;
    width: calc(100% - 36px);
    margin-inline:18px;cursor: zoom-in
}

.prize-visual.has-image {
    height: 232px;
    background: #fff;
    overflow: hidden;
    position: relative
}

.featured .prize-visual.has-image {
    height: 280px
}

.prize-visual.has-image picture {
    height: 100%;
    width: 100%;
    display: block
}

.prize-visual.has-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: transform .35s
}

.prize-visual.has-image:hover img {
    transform: scale(1.025)
}

.prize-visual.prize-headset {
    background: #111
}

.prize-visual.prize-keyboard {
    background: #101018
}

.zoom-label {
    position: absolute;
    bottom: 7px;
    right: 7px;
    font-size: 9px;
    background: #17231de8;
    color: #e4edd7;
    padding: 3px 7px;
    opacity: .95
}

.prize-info p {
    flex-wrap: wrap
}

.prize-info p b {
    white-space: nowrap
}

.prize-visual:not(.has-image):after {
    content: '奖项示意 / 具体内容待确认'
}

.draw-copy {
    position: relative
}

.character-portrait {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 26px;
    border-bottom: 1px solid #61724e;
    padding-left: 4px
}

.character-portrait picture {
    width: 114px;
    flex-shrink: 0;
    height: 115px;
    overflow: hidden
}

.character-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    image-rendering: pixelated
}

.character-portrait span {
    font-size: 10px;
    letter-spacing: 1px;
    color: #a9ba97;
    padding-bottom: 10px
}

.draw-copy h2 {
    font-size: 43px
}

.draw-copy .eyebrow {
    margin-bottom: 18px
}

.gallery-dialog #modal-content picture {
    display: block;
    background: #121a16
}

.gallery-dialog #modal-content picture img {
    max-height: 66dvh;
    object-fit: contain
}

.gallery-dialog #modal-content>p {
    font-size: 11px;
    margin: 12px 0 0
}

@media(min-width: 1600px) {
    .hero {
        min-height:760px
    }

    .hero-content {
        padding-top: 48px
    }

    .hero h1.hero-logo {
        width: 238px;
        margin-top: 27px
    }
}

@media(min-width: 701px) and (max-height:800px) {
    .hero {
        min-height:615px
    }

    .hero-content {
        padding-top: 28px;
        padding-bottom: 28px
    }

    .hero h1.hero-logo {
        width: 174px;
        margin-top: 17px
    }

    .hero-game-name {
        margin-top: 10px;
        font-size: 11px
    }

    .hero-line {
        font-size: 21px;
        margin: 20px 0
    }

    .hero .eyebrow {
        margin-bottom: 0
    }

    .hero .benefit {
        margin-bottom: 19px
    }

    .hero-rule {
        margin-top: 14px
    }
}

@media(max-width: 1050px) and (min-width:701px) {
    .hero-art {
        left:14%
    }

    .hero-art img {
        object-position: 62% center
    }

    .hero-art:after {
        background: linear-gradient(90deg,#18221f,#18221fee 14%,#18221f60 60%,#18221f10)
    }

    .hero-line {
        font-size: 21px;
        max-width: 390px
    }

    .prize-visual.has-image {
        height: 195px
    }

    .featured .prize-visual.has-image {
        height: 250px
    }

    .draw-copy h2 {
        font-size: 37px
    }
}

@media(max-width: 700px) {
    .hero {
        min-height:0
    }

    .hero-art {
        inset: 0;
        height: 100%;
        opacity: 1
    }

    .hero-art img {
        object-position: 62% top;
        object-fit: cover
    }

    .hero-art:after {
        background: linear-gradient(90deg,#14201cdd,#14201c70 65%,#14201c40),linear-gradient(0deg,#14201c 0%,#14201ce8 25%,#14201c20 75%)
    }

    .hero-content {
        padding-top: 25px;
        padding-bottom: 25px
    }

    .hero .eyebrow {
        font-size: 8px;
        letter-spacing: .7px;
        margin-bottom: 0
    }

    .hero h1.hero-logo {
        width: 174px;
        margin: 25px 0 0
    }

    .hero-game-name {
        font-size: 10px;
        letter-spacing: 2px;
        margin-top: 14px
    }

    .hero-game-name span {
        font-size: 8px;
        letter-spacing: 1px;
        margin-left: 5px
    }

    .hero-line {
        font-size: 18px;
        margin: 22px 0;
        max-width: 320px;
        line-height: 1.6
    }

    .hero .benefit {
        margin-bottom: 19px
    }

    .hero .prototype-stamp {
        top: 62px;
        font-size: 8px;
        padding: 5px 9px
    }

    .hero-rule {
        margin-top: 14px
    }

    .hero-rule span {
        display: block;
        margin-left: 0
    }

    .prize-visual.has-image {
        height: 175px
    }

    .featured .prize-visual.has-image {
        height: 255px
    }

    .prize-info {
        padding: 14px
    }

    .prize-info p {
        display: flex;
        font-size: 10px
    }

    .prize-info p b {
        margin: 0
    }

    .prize-info h3 {
        font-size: 13px
    }

    .prize-card:not(.featured) button.prize-visual {
        width: calc(100% - 20px);
        margin-inline:10px}

    .prize-card:not(.featured) .prize-info {
        padding: 12px 10px
    }

    .character-portrait {
        margin-bottom: 23px
    }

    .character-portrait picture {
        height: 90px;
        width: 95px
    }

    .character-portrait span {
        font-size: 9px
    }

    .draw-copy h2 {
        font-size: 34px
    }

    .gallery-dialog #modal-content picture img {
        max-height: 62dvh
    }
}

@media(max-width: 700px) and (max-height:700px) {
    .hero-content {
        padding-top:20px;
        padding-bottom: 21px
    }

    .hero h1.hero-logo {
        width: 135px;
        margin-top: 19px
    }

    .hero-game-name {
        margin-top: 10px
    }

    .hero-line {
        font-size: 16px;
        margin: 19px 0 17px;
        line-height: 1.5
    }

    .hero .benefit {
        padding-block:10px;margin-bottom: 15px
    }

    .hero .benefit>strong {
        font-size: 58px
    }

    .hero-actions .button {
        min-height: 44px
    }

    .hero-rule {
        margin-top: 11px
    }

    .hero .prototype-stamp {
        top: 57px
    }
}

.prize-dialog {
    width: min(480px,calc(100vw - 24px))
}

.prize-dialog #modal-content picture {
    background: transparent;
    display: flex;
    justify-content: center
}

.prize-dialog #modal-content picture img {
    width: auto;
    max-width: 100%;
    max-height: 62dvh
}

.prize-dialog #modal-content h2 {
    max-width: 420px;
    line-height: 1.6
}

/* V3: specimen display trays, shared material and consistent product scale. */
.prize-card,.prize-card.featured {
    background: #e2e5d6;
    border-color: #aebba0
}

.prize-top {
    align-items: center;
    padding: 16px 19px 13px;
    color: #66765c
}

.prize-visual.has-image,.prize-visual.prize-headset,.prize-visual.prize-keyboard {
    background-color: #d4ddc7;
    background-image: linear-gradient(#768e5d16 1px,transparent 1px),linear-gradient(90deg,#768e5d16 1px,transparent 1px),radial-gradient(ellipse at 50% 40%,#f7f6e5c0,transparent 70%);
    background-size: 32px 32px,32px 32px,100% 100%;
    isolation: isolate;
    overflow: visible;
    border: 1px solid #adbe9b
}

.featured .prize-visual.has-image {
    height: 270px
}

.prize-visual.has-image {
    height: 205px
}

.prize-visual.has-image:before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    height: 14px;
    bottom: 22px;
    border-radius: 50%;
    background: #536e3930;
    filter: blur(10px);
    z-index: -1
}

.prize-visual.has-image picture {
    width: 100%;
    height: 100%;
    padding: 20px 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

.prize-visual.has-image img {
    object-fit: contain;
    filter: drop-shadow(0 12px 9px #273b2438);
    width: 100%;
    height: 100%;
    transform: none;
    transition: transform .28s ease
}

.prize-visual.prize-keyboard picture {
    padding: 35px 20px 35px
}

.prize-visual.prize-headset picture {
    padding: 17px 25px 27px
}

.prize-visual.has-image:hover img {
    transform: translateY(-4px)
}

.display-guide {
    position: absolute;
    inset: 9px;
    pointer-events: none;
    z-index: 2
}

.display-guide i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #6e8558;
    border-style: solid;
    border-width: 0
}

.display-guide i:nth-child(1) {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px
}

.display-guide i:nth-child(2) {
    top: 0;
    right: 0;
    border-top-width: 1px;
    border-right-width: 1px
}

.display-guide i:nth-child(3) {
    bottom: 0;
    left: 0;
    border-bottom-width: 1px;
    border-left-width: 1px
}

.display-guide i:nth-child(4) {
    bottom: 0;
    right: 0;
    border-bottom-width: 1px;
    border-right-width: 1px
}

.zoom-label {
    background: #d4ddc7e8;
    color: #526548;
    border: 1px solid #a5b695;
    padding: 2px 6px;
    bottom: 8px;
    right: 9px;
    font-size: 9px
}

.prize-info {
    border-top: 0;
    margin-top: 0;
    padding-top: 18px
}

.prize-info p {
    font-size: 11px;
    min-height: 18px
}

.prize-card:not(.featured) .prize-info h3 {
    font-size: 15px
}

.prize-visual:not(.has-image) {
    height: 205px;
    background: radial-gradient(ellipse,#c8d7b78c,transparent 70%);
    margin-top: 0;
    margin-bottom: 0
}

@media(max-width: 1050px) and (min-width:701px) {
    .featured .prize-visual.has-image {
        height:245px
    }

    .prize-visual.has-image,.prize-visual:not(.has-image) {
        height: 185px
    }

    .prize-visual.has-image picture {
        padding: 18px 15px 24px
    }
}

@media(max-width: 700px) {
    .featured .prize-visual.has-image {
        height:230px
    }

    .prize-visual.has-image,.prize-visual:not(.has-image) {
        height: 155px
    }

    .prize-visual.has-image picture {
        padding: 15px 11px 24px
    }

    .prize-visual.prize-keyboard picture {
        padding: 20px 14px 25px
    }

    .prize-visual.prize-headset picture {
        padding: 14px 24px 25px
    }

    .prize-info {
        padding-top: 15px
    }

    .prize-card:not(.featured) .prize-info h3 {
        font-size: 13px
    }

    .zoom-label {
        font-size: 8px;
        padding: 2px 4px;
        bottom: 5px;
        right: 6px
    }

    .display-guide {
        inset: 7px
    }
}

.prize-display-note {
    font-size: 12px;
    color: #65765a;
    margin: -15px 0 24px;
    letter-spacing: .4px
}

@media(max-width: 700px) {
    .prize-display-note {
        font-size:11px;
        margin: -10px 0 20px
    }
}

/* Official Phoenix Games wordmark: preserve original color and aspect ratio. */
.brand picture {
    display: flex;
    /* width: 164px; */
    flex-shrink: 0
}

.brand img {
    display: block;
    width: 100%;
    height: auto
}

@media(max-width: 1050px) and (min-width:701px) {
    .brand picture {
        width:145px
    }
}

@media(max-width: 700px) {
    .brand picture {
        width:126px
    }

    footer .brand picture {
        width: 145px
    }
}

.bili-mark {
    display: block;
    width: 94px;
    height: auto;
    border: 0;
    padding: 0;
    transform: none;
    flex-shrink: 0;
    align-self: center
}

@media(max-width: 700px) {
    .bili-mark {
        width:70px;
        align-self: flex-start;
        margin-top: 4px
    }
}

/* V4 motion system: brief entrances, one-shot reveals, restrained interaction. */
:root {
    --motion-fast: 160ms;
    --motion-step: 220ms;
    --motion-ease: cubic-bezier(.22,.68,.18,1)
}

.header {
    transition: box-shadow var(--motion-step),background-color var(--motion-step)
}

.header.is-scrolled {
    box-shadow: 0 3px 12px #15251b14
}

.header nav a:after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-step) var(--motion-ease)
}

.header nav a.active:after {
    transform: scaleX(1)
}

.button {
    transition: background-color var(--motion-fast),border-color var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease)
}

.button:hover {
    transform: none
}

.button:active:not(:disabled) {
    transform: scale(.985)
}

.prize-visual.has-image:hover img {
    transform: none
}

.prize-visual.has-image img {
    transition: transform 240ms var(--motion-ease)
}

.text-button,.modal-head button {
    transition: color var(--motion-fast),background-color var(--motion-fast)
}

.prize-card {
    transition: border-color var(--motion-step)
}

.zoom-label {
    transition: background-color var(--motion-fast),color var(--motion-fast)
}

.gallery-main img {
    transition: transform 320ms var(--motion-ease)
}

.gallery-thumbs button {
    transition: border-color var(--motion-fast),opacity var(--motion-fast)
}

@media(hover: hover) and (pointer:fine) {
    .button:hover:not(:disabled) {
        transform:translateY(-2px)
    }

    .button:active:not(:disabled) {
        transform: translateY(0) scale(.985)
    }

    .prize-card:hover {
        border-color: #788f62
    }

    .prize-visual.has-image:hover img {
        transform: translateY(-3px)
    }

    .prize-visual:hover .zoom-label {
        background: #23351f;
        color: #e9efdf
    }

    .gallery-main:hover img {
        transform: scale(1.012)
    }

    .gallery-thumbs button:hover {
        opacity: .85
    }
}

@supports (transition-behavior:allow-discrete) {
    dialog {
        opacity: 0;
        transform: translateY(8px) scale(.992);
        transition: opacity 180ms ease,transform 180ms var(--motion-ease),display 180ms allow-discrete,overlay 180ms allow-discrete
    }

    dialog[open] {
        opacity: 1;
        transform: none
    }

    dialog::backdrop {
        opacity: 0;
        transition: opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete
    }

    dialog[open]::backdrop {
        opacity: 1
    }

    @starting-style {
        dialog[open] {
            opacity: 0;
            transform: translateY(8px) scale(.992)
        }

        dialog[open]: :backdrop {
            opacity:0
        }
    }
}

.status-icon {
    animation: result-stamp 280ms var(--motion-ease) both;
    transform-origin: left center
}

.process .scanner {
    --scan-travel: 72px
}

.process .scanner i {
    top: 15%;
    animation: terminal-scan 1050ms ease-in-out 1 both;
    transform: translateY(0)
}

#toast {
    transition: opacity 180ms ease,transform 180ms var(--motion-ease)
}

@keyframes result-stamp {
    from {
        opacity: .2;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes terminal-scan {
    0%,12% {
        opacity: 0;
        transform: translateY(0)
    }

    20% {
        opacity: .8
    }

    80% {
        opacity: .8;
        transform: translateY(var(--scan-travel))
    }

    100% {
        opacity: 0;
        transform: translateY(var(--scan-travel))
    }
}

@media(max-height: 550px) {
    .process .scanner {
        --scan-travel:28px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*:before,*:after {
        animation: none!important;
        transition: none!important;
        scroll-behavior: auto!important
    }

    .button:hover,.button:active:not(:disabled),.prize-visual.has-image:hover img,.gallery-main:hover img {
        transform: none!important
    }

    dialog,dialog[open] {
        opacity: 1;
        transform: none
    }

    dialog::backdrop {
        opacity: 1
    }

    .process .scanner i {
        top: 50%;
        transform: none;
        opacity: .6
    }
}

/* V5 PC shop window: reveal the original artwork through a soft light. */
.hero-detail-light,.shop-sign,.inspection-hint {
    display: none
}

@media(min-width: 1024px) and (hover:hover) and (pointer:fine) {
    .hero-art {
        user-select:none
    }

    .hero-art:after {
        z-index: 1
    }

    .hero-detail-light {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 260ms ease;
        clip-path: inset(0 0 0 var(--safe-left,38%));
        -webkit-mask-image: radial-gradient(circle 250px at var(--lamp-x,65%) var(--lamp-y,45%),#000e 0%,#000b 32%,#0004 62%,transparent 100%);
        mask-image: radial-gradient(circle 250px at var(--lamp-x,65%) var(--lamp-y,45%),#000e 0%,#000b 32%,#0004 62%,transparent 100%)
    }

    .hero-detail-light picture {
        filter: brightness(1.12) saturate(1.05);
        -webkit-mask-image: linear-gradient(90deg,transparent var(--safe-left,38%),#000 calc(var(--safe-left,38%) + 85px));
        mask-image: linear-gradient(90deg,transparent var(--safe-left,38%),#000 calc(var(--safe-left,38%) + 85px))
    }

    .hero.is-inspecting .hero-detail-light {
        opacity: 1
    }

    .shop-sign {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: clamp(230px,20vw,330px);
        top: 28px;
        width: 128px;
        padding: 10px 8px;
        background: #17211fdb;
        border: 1px solid #b69b636e;
        box-shadow: 0 5px 18px #0004,inset 0 0 22px #e1b26908;
        transform: rotate(2deg);
        pointer-events: none;
        color: #d3b47a
    }

    .shop-sign:before,.shop-sign:after {
        content: '';
        position: absolute;
        top: -23px;
        width: 1px;
        height: 23px;
        background: #b69b6355
    }

    .shop-sign:before {
        left: 27px
    }

    .shop-sign:after {
        right: 27px
    }

    .shop-sign-status {
        font: 7px var(--mono);
        letter-spacing: 1.7px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #a5ac8e
    }

    .shop-sign-status i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #b7d894;
        box-shadow: 0 0 7px #b7d89450
    }

    .shop-sign strong {
        font: 31px/1.2 var(--mono);
        letter-spacing: 3px;
        color: #e5bd7c;
        text-shadow: 0 0 10px #e8aa6555,0 0 25px #e8aa6520;
        margin-top: 4px
    }

    .shop-sign-caption {
        font-size: 9px;
        letter-spacing: 4px;
        margin-left: 5px;
        color: #c5b293
    }

    .hero .prototype-stamp {
        transform: none;
        font-size: 9px;
        padding: 6px 10px;
        border-color: #bbc3ac50;
        right: 36px;
        top: 25px;
        color: #bbc6af;
        background: #15211c70
    }

    .hero.has-inspection .inspection-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        font-size: 11px;
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: #d9d6bb
    }

    .inspection-hint i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border: 1px solid #d4c69c;
        border-radius: 50%;
        position: relative
    }

    .inspection-hint i:after {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        width: 1px;
        height: 1px;
        background: #d4c69c
    }

    .scene-caption {
        z-index: 2
    }
}

@media(min-width: 1024px) and (max-width:1199px) and (hover:hover) and (pointer:fine) {
    .shop-sign {
        right:170px;
        top: 20px;
        width: 118px
    }

    .shop-sign strong {
        font-size: 29px
    }
}

@media(min-width: 1440px) and (hover:hover) and (pointer:fine) {
    .shop-sign {
        right:clamp(280px,22vw,420px);
        top: 28px;
        width: 140px
    }

    .shop-sign strong {
        font-size: 34px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-detail-light,.inspection-hint {
        display: none!important
    }

    .shop-sign strong {
        text-shadow: none
    }
}

/* V6 confirmed pricing: one edition, coupon price, suggested retail reference. */
.benefit-priced {
    gap: 22px;
    align-items: center;
    max-width: 500px
}

.benefit-priced>.price-main {
    border: 0;
    padding: 0;
    flex-shrink: 0
}

.benefit-priced .benefit-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 7px;
    color: #bcc9ac
}

.benefit-priced .price-line {
    display: flex;
    align-items: baseline;
    gap: 9px
}

.benefit-priced .price-type {
    font-size: 12px;
    color: #d6dfc9;
    white-space: nowrap
}

.benefit-priced .price-line strong {
    display: flex;
    align-items: baseline;
    font: 700 62px/1 var(--mono);
    letter-spacing: -3px;
    color: var(--green);
    font-variant-numeric: tabular-nums
}

.benefit-priced .price-line .currency {
    font: 600 28px var(--mono);
    letter-spacing: 0;
    margin-right: 4px
}

.benefit-priced>.price-meta {
    min-width: 0;
    padding-left: 21px;
    border-left: 1px solid #56624f
}

.benefit-priced .price-meta b {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap
}

.benefit-priced .price-meta small {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    color: #a6b39a
}

.benefit-priced .price-meta del {
    font: 12px var(--mono);
    color: #a6b39a;
    text-decoration-thickness: 1px
}

.checkout-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 15px 0 4px
}

.checkout-price>span {
    font-size: 12px
}

.checkout-price>b {
    font: 700 35px/1.2 var(--mono);
    letter-spacing: -1px
}

@media(min-width: 701px) and (max-height:800px) {
    .benefit-priced .price-line strong {
        font-size:55px
    }

    .benefit-priced .benefit-label {
        margin-bottom: 5px
    }
}

@media(max-width: 700px) {
    .benefit-priced {
        gap:14px;
        width: 100%;
        padding-block:12px}

    .benefit-priced .benefit-label {
        font-size: 9px;
        letter-spacing: .5px;
        margin-bottom: 5px
    }

    .benefit-priced .price-type {
        font-size: 11px
    }

    .benefit-priced .price-line {
        gap: 6px
    }

    .benefit-priced .price-line strong {
        font-size: 46px;
        letter-spacing: -2px
    }

    .benefit-priced .price-line .currency {
        font-size: 21px;
        margin-right: 3px
    }

    .benefit-priced>.price-meta {
        padding-left: 12px
    }

    .benefit-priced .price-meta b {
        font-size: 11px
    }

    .benefit-priced .price-meta small {
        font-size: 9px;
        margin-top: 3px
    }

    .benefit-priced .price-meta del {
        font-size: 11px
    }
}

/* Price hierarchy: prominent integer, quiet decimals, concise promotion badge. */
.price-value {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap
}

.price-value .price-decimal {
    font-size: .56em;
    letter-spacing: -.03em
}

.benefit-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px
}

.benefit-priced .benefit-heading .benefit-label {
    margin-bottom: 0
}

.price-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #9bbd6690;
    background: #c0ed7520;
    color: #d7f2ad;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 1px;
    white-space: nowrap
}

.checkout-price>b {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap
}

.checkout-price .currency {
    font-size: 20px;
    margin-right: 3px
}

.checkout-price>.price-badge {
    font-size: 10px;
    background: #c0ed7560;
    color: var(--ink);
    border-color: #8ea966
}

@media(max-width: 700px) {
    .benefit-heading {
        gap:7px;
        margin-bottom: 5px
    }

    .benefit-heading .price-badge {
        font-size: 9px;
        padding: 1px 5px;
        letter-spacing: .5px
    }
}

/* V8 mobile: restore the spacious purchase layout; adapt only its portrait background. */
@media(max-width: 700px) {
    .hero {
        background:#11211f
    }

    .hero-art {
        inset: 0;
        height: 100%;
        opacity: 1
    }

    .hero-art picture,.hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% top
    }

    .hero-art:after {
        background: linear-gradient(180deg,transparent 0%,transparent 48%,#11211f18 72%,#11211f66 100%)
    }

    .hero-grid {
        opacity: .035
    }

    .hero-content {
        display: block;
        padding-top: 18px;
        padding-bottom: 24px
    }

    .hero-content>.eyebrow {
        display: block
    }

    .hero h1.hero-logo {
        width: 150px;
        margin: 16px 0 0
    }

    .hero-game-name {
        font-size: 11px;
        letter-spacing: 2px;
        margin: 10px 0 0
    }

    .hero-game-name span {
        display: inline;
        margin-left: 5px;
        font-size: 8px;
        letter-spacing: 1px
    }

    .hero-line {
        font-size: 18px;
        line-height: 1.5;
        margin: 18px 0;
        max-width: none
    }

    .hero-line br {
        display: block
    }

    .hero-content>.benefit {
        margin-bottom: 14px
    }

    .hero-rule {
        font-size: 11px;
        line-height: 1.7;
        margin-top: 12px
    }

    .hero-rule span {
        font-size: 10px;
        margin-top: 4px
    }

    .hero .prototype-stamp {
        top: 18px;
        right: 14px;
        padding: 4px 7px;
        font-size: 7px;
        background: #11211fc0;
        transform: none
    }
}

@media(max-width: 360px) {
    .hero h1.hero-logo {
        width:140px
    }

    .hero-line {
        font-size: 17px
    }
}

@media(min-width: 361px) and (max-width:700px) and (min-height:740px) {
    .hero h1.hero-logo {
        width:170px
    }

    .hero-content {
        padding-top: 28px;
        padding-bottom: 30px
    }
}

/* Mobile price rules fade to the right; retain the original compact text grouping. */
@media(max-width: 700px) {
    .benefit-priced {
        border-block-color:transparent;
        background-image: linear-gradient(90deg,#829966a6 0%,#82996680 52%,#82996630 83%,transparent 100%),linear-gradient(90deg,#829966a6 0%,#82996680 52%,#82996630 83%,transparent 100%);
        background-size: 100% 1px;
        background-position: left top,left bottom;
        background-repeat: no-repeat;
        background-origin: border-box
    }
}

/* Light-dialog actions: muted olive tones, independent of the dark-page accent. */
#modal {
    --dialog-action: #b8c5a5;
    --dialog-action-border: #8b9d76;
    --dialog-action-hover: #adbd97;
    --dialog-action-active: #a0b38a
}

#modal .button.primary {
    background: var(--dialog-action);
    border-color: var(--dialog-action-border);
    color: #243320
}

#modal .button.primary:active:not(:disabled) {
    background: var(--dialog-action-active);
    border-color: #718760
}

#modal .button.primary:disabled {
    background: #d2dac6;
    border-color: #b3bea3;
    color: #6e7b61;
    opacity: 1
}

#modal :is(button,a,input,select,textarea):focus-visible {
    outline: 2px solid #657b51;
    outline-offset: 3px
}

#modal .modal-head button:hover {
    background: #cbd5bb;
    color: #243320
}

#modal .checkout-price>.price-badge {
    background: #d2ddc2;
    border-color: #9aaa87;
    color: #45563d
}

@media(hover: hover) and (pointer:fine) {
    #modal .button.primary:hover:not(:disabled) {
        background:var(--dialog-action-hover);
        border-color: #7c9167
    }

    #modal .button.primary:active:not(:disabled) {
        background: var(--dialog-action-active)
    }
}

/* Prize collection: paper receipt, muted olive actions, persistent footer. */
#modal.claim-dialog {
    width: min(660px,calc(100vw - 24px))
}

.claim-dialog #modal-content {
    max-height: calc(100dvh - 164px)
}

#modal .claim-actions {
    display: flex;
    gap: 12px
}

#modal .claim-actions .button {
    flex: 1;
    width: auto;
    margin: 0
}

.claim-prize {
    font-weight: 700;
    color: #3d513a;
    border-bottom: 1px solid #b7c1aa;
    padding-bottom: 16px;
    margin-bottom: 14px
}

.claim-caption {
    font-size: 13px;
    color: #62715a
}

.address-list {
    max-height: 255px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9ba78d transparent;
    padding: 2px
}

.address-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #c4cbb9;
    background: #f2f1e7;
    margin-bottom: 10px;
    padding: 13px 12px;
    transition: background .18s,border-color .18s
}

.address-row.selected {
    border-color: #7e946a;
    background: #dde4d0;
    box-shadow: inset 3px 0 #7e946a
}

.address-row label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer
}

.address-row input[type=radio] {
    width: 16px;
    height: 16px;
    accent-color: #5c7548;
    margin: 0;
    flex: none
}

.address-row label>span {
    min-width: 0;
    display: block
}

.address-row strong {
    font-size: 14px;
    display: block
}

.address-row small {
    font-weight: 400;
    margin-left: 6px;
    color: #64715c
}

.address-detail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    margin-top: 5px;
    color: #5c6954
}

.address-edit {
    border: 0;
    background: none;
    flex: none;
    color: #465f35;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 10px 4px;
    font-size: 13px;
    cursor: pointer
}

.claim-empty {
    text-align: center;
    padding: 40px 10px;
    color: #5b6b50;
    border: 1px dashed #a7b49a
}

.shipping-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 17px;
    font-size: 13px;
    font-weight: 600;
    color: #3b4e33
}

.region-fields {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px
}

#modal .shipping-field :is(select,input,textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #b1bda3;
    background: #f7f6ee;
    color: #263520;
    padding: 11px 10px;
    border-radius: 0;
    font: 14px/1.4 sans-serif;
    margin: 0
}

#modal .shipping-field textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 180px
}

.shipping-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.claim-receipt {
    padding: 22px;
    background: #dce3ce;
    border: 1px solid #a9b899
}

.claim-receipt strong {
    display: block;
    font-size: 16px
}

.claim-receipt p {
    margin-bottom: 0;
    overflow-wrap: anywhere
}

.receipt-stamp {
    display: inline-block;
    border: 1px solid #7f926e;
    padding: 2px 8px;
    color: #506742;
    font-size: 12px;
    margin-bottom: 18px
}

.activation-ticket {
    background: #182b23;
    color: #e8eadb;
    padding: 24px;
    border: 1px solid #687d5b;
    position: relative
}

.activation-ticket>span {
    display: block;
    font: 10px/1.5 monospace;
    letter-spacing: 2px;
    color: #adbba1;
    margin-bottom: 18px
}

.activation-ticket label {
    font-size: 12px;
    color: #bcc9ad
}

#modal .activation-ticket textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #627655;
    border-radius: 0;
    color: #d8e7bc;
    font: 19px/1.7 monospace;
    margin: 8px 0 14px;
    padding: 4px 0;
    letter-spacing: 1px
}

.code-tools {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.code-tools button {
    background: transparent;
    border: 0;
    color: #d2dfbf;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 4px
}

#copy-status {
    font-size: 13px;
    color: #486138;
    min-height: 20px;
    margin: 10px 0
}

@media(max-width: 600px) {
    .claim-dialog #modal-content {
        max-height:calc(100dvh - 150px);
        padding: 20px
    }

    .claim-dialog h2 {
        font-size: 24px
    }

    .claim-dialog .demo-hint {
        font-size: 11px
    }

    .claim-actions {
        padding: 10px 16px!important
    }

    .claim-actions .button {
        font-size: 13px;
        padding: 10px!important
    }

    .address-list {
        max-height: 220px
    }

    .address-row small {
        display: block;
        margin: 3px 0 0
    }

    .shipping-contact {
        grid-template-columns: 1fr;
        gap: 0
    }

    .region-fields {
        gap: 5px
    }

    #modal .region-fields select {
        font-size: 12px;
        padding: 10px 3px
    }

    .activation-ticket {
        padding: 18px
    }

    #modal .activation-ticket textarea {
        font-size: 16px
    }
}

@media(prefers-reduced-motion:reduce) {
    .address-row {
        transition: none
    }
}

#modal-content .address-row label {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 12px
}

#modal-content .address-row input[type=radio] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: none
}

#modal-content .shipping-field {
    display: flex;
    margin: 0 0 17px
}

#modal .activation-ticket textarea {
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.5;
    min-height: 60px
}

#modal.claim-dialog {
    max-width: min(660px,calc(100vw - 24px))
}

/* The winning item uses the same transparent artwork as the prize cabinet. */
#modal.result-dialog {
    width: min(560px,calc(100vw - 24px));
    max-width: calc(100vw - 24px)
}

.result-dialog #modal-content {
    max-height: calc(100dvh - 164px)
}

#modal .result-actions {
    display: flex;
    gap: 10px
}

#modal .result-actions .button {
    width: auto;
    margin: 0;
    flex: 1
}

#modal .result-actions .primary {
    flex: 2
}

.won-reward {
    margin: 20px 0 16px
}

.won-prize-stage {
    height: 190px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    border: 1px solid #adbe9b;
    background-color: #d4ddc7;
    background-image: linear-gradient(#768e5d16 1px,transparent 1px),linear-gradient(90deg,#768e5d16 1px,transparent 1px),radial-gradient(ellipse at 50% 40%,#f7f6e5c0,transparent 70%);
    background-size: 28px 28px,28px 28px,100% 100%
}

.won-prize-stage picture {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 18px 28px 28px;
    align-items: center;
    justify-content: center
}

#modal-content .won-prize-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 9px 7px #273b2430)
}

.won-prize-stage>span {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font: 8px/1.3 var(--mono);
    letter-spacing: 1.5px;
    color: #657957
}

.won-reward h3 {
    font-size: 18px;
    line-height: 1.5;
    margin: 16px 0 6px;
    color: #2f4429
}

#modal-content .won-reward p {
    font-size: 13px;
    color: #62715a;
    margin: 0
}

@media(max-width: 700px) {
    .result-dialog #modal-content {
        max-height:calc(100dvh - 150px);
        padding: 20px
    }

    .won-prize-stage {
        height: 155px
    }

    .won-reward h3 {
        font-size: 16px
    }

    .result-actions {
        padding: 10px 16px
    }

    .result-actions .button {
        gap: 6px;
        padding: 10px 12px
    }
}

@media(max-height: 550px) {
    .won-prize-stage {
        height:112px
    }

    .won-prize-stage picture {
        padding: 10px 18px 22px
    }

    .won-reward {
        margin: 12px 0
    }

    .won-reward h3 {
        margin-top: 10px
    }
}

/* V12 product albums: current large image only, independent thumbnail strip. */
#modal.prize-gallery-dialog {
    width: min(860px,calc(100vw - 24px));
    max-width: calc(100vw - 24px)
}

.prize-gallery-dialog #modal-content {
    padding: 22px 26px;
    max-height: calc(100dvh - 164px)
}

#modal-content .prize-gallery-heading h2 {
    font-size: 21px;
    line-height: 1.5;
    margin-bottom: 18px
}

#modal-content .prize-gallery-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 8px
}

.prize-gallery-stage {
    height: clamp(130px,calc(100dvh - 435px),410px);
    min-height: 130px;
    border: 1px solid #b6c3a9;
    position: relative;
    background-color: #dbe2cf;
    background-image: radial-gradient(ellipse at center,#f1f2e7aa,transparent 70%);
    touch-action: pan-y;
    overflow: hidden
}

#modal-content .prize-gallery-stage picture {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center
}

#modal-content .prize-gallery-stage img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain
}

.prize-gallery-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 8px 0
}

#modal-content #prize-gallery-caption {
    font-size: 13px;
    font-weight: 600;
    color: #42583a;
    margin: 0
}

#prize-gallery-message {
    font-size: 11px;
    color: #748266;
    text-align: right
}

#prize-gallery-message button {
    border: 0;
    background: transparent;
    text-decoration: underline;
    color: #42583a;
    font: inherit;
    padding: 0 4px
}

.prize-gallery-thumbs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 3px;
    scrollbar-width: thin;
    scrollbar-color: #99aa85 transparent
}

.prize-gallery-thumbs button {
    width: 84px;
    height: 65px;
    flex: none;
    padding: 4px;
    border: 1px solid #b5c1a7;
    background: #dce2d2;
    cursor: pointer
}

.prize-gallery-thumbs button.selected {
    border: 2px solid #698252;
    background: #cbd7bc
}

#modal-content .prize-gallery-thumbs picture {
    background: transparent;
    display: block;
    height: 100%
}

#modal-content .prize-gallery-thumbs img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain
}

#modal-content .prize-gallery-note {
    font-size: 10px;
    color: #748266;
    margin: 13px 0 0
}

#modal .prize-gallery-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px
}

#modal .prize-gallery-actions[hidden] {
    display: none
}

#modal .prize-gallery-actions .button {
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 8px 16px;
    gap: 15px;
    font-size: 13px
}

#modal .prize-gallery-actions .button span {
    margin: 0
}

#prize-gallery-count {
    font: 13px var(--mono);
    letter-spacing: 2px;
    color: #5a6b4e;
    white-space: nowrap
}

@media(max-width: 700px) {
    .prize-gallery-dialog #modal-content {
        padding:18px 16px;
        max-height: calc(100dvh - 150px)
    }

    #modal-content .prize-gallery-heading h2 {
        font-size: 17px;
        margin-bottom: 13px
    }

    .prize-gallery-stage {
        height: 36dvh
    }

    .prize-gallery-thumbs {
        gap: 7px
    }

    .prize-gallery-thumbs button {
        width: 65px;
        height: 52px
    }

    .prize-gallery-meta {
        display: block;
        min-height: 43px
    }

    #prize-gallery-message {
        display: block;
        font-size: 10px;
        margin-top: 3px
    }

    #modal .prize-gallery-actions {
        padding: 10px 16px
    }

    #modal .prize-gallery-actions .button {
        font-size: 12px;
        padding: 8px 12px;
        gap: 8px
    }
}

.prize-gallery-thumbs {
    position: relative
}

#modal .prize-gallery-actions .button:disabled {
    cursor: default;
    opacity: .45
}

/* V13 operations copy: top sharing action, lean prize cards, readable terminal line. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0
}

.header-actions .share {
    font-size: 13px;
    white-space: nowrap
}

.header-actions .login {
    white-space: nowrap;
}

.account-compact {
    display: none
}

.prize-info p {
    justify-content: flex-end
}

.terminal-bottom {
    align-items: flex-start;
    gap: 16px;
    line-height: 1.7
}

.terminal-bottom .terminal-motto {
    font-size: 11px;
    letter-spacing: 0;
    flex: 1
}

.terminal-bottom>span:last-child {
    font-size: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 3px
}

.prize-gallery-meta[hidden] {
    display: none
}

#modal-content #prize-gallery-caption:empty {
    display: none
}

@media(max-width: 1050px) and (min-width:701px) {
    .header-actions {
        gap:16px
    }

    .header-actions .share {
        font-size: 12px
    }
}

@media(max-width: 700px) {
    .header {
        height:96px
    }

    .header-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 14px
    }

    .header-actions .text-button {
        font-size: 11px;
        min-height: 44px;
        padding-block:8px}

    .account-full {
        display: none
    }

    .account-compact {
        display: inline
    }

    .terminal-bottom .terminal-motto {
        font-size: 10px
    }

    .terminal-bottom>span:last-child {
        font-size: 7px
    }
}

/* V15 digital prizes are static artwork, with no zoom affordance. */
.prize-visual.is-static {
    cursor: default
}

.prize-visual.is-static:hover img {
    transform: none
}

@media(max-width: 700px) {
    .prize-card:not(.featured) .prize-visual.is-static {
        width:calc(100% - 20px);
        margin-inline:10px}
}

.fhyx_footer {
    margin-top: 0 !important;
}