* { box-sizing: border-box; }

html, body, .screen { width: 100%; height: 100%; margin: 0; }

body {
    background: #0d101a;
    color: #f4f6fc;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.screen { position: relative; overflow: hidden; }
h1, h2, p { margin: 0; }

.pairing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    background: #141927;
    background: linear-gradient(145deg, #1e2843, #0d101a 74%);
}

.pairing-copy {
    max-width: 48%;
    margin-right: 8vw;
}

.pairing-brand { margin-bottom: 12px; color: #ffcf8a; font-size: 42px; font-weight: 600; }
.pairing-copy h1 { padding-top: 22px; border-top: 4px solid #ffcf8a; font-size: 66px; line-height: 1.18; }
.pairing-copy p { margin-top: 20px; color: #c2cae0; font-size: 21px; line-height: 1.65; }

.pairing-card {
    flex: 0 0 auto;
    width: 396px;
    padding: 24px;
    border: 1px solid #414d6b;
    border-radius: 24px;
    background: #222b41;
    text-align: center;
}

.qr-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 346px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
}

.qr-frame > div { width: 100%; }
.qr-frame canvas { display: block; width: 100% !important; height: auto !important; }
.qr-frame:empty { background: #2c3855; }

.pairing-status { margin-top: 18px; color: #e5e9f4; font-size: 20px; line-height: 1.45; }
.loading { padding: 48px; text-align: center; font-size: 26px; }

.board {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: 1920px;
    height: 1080px;
    padding: 46px 64px 38px;
    overflow: hidden;
    background: #141927;
    background: linear-gradient(145deg, #1b243a, #0f1321 72%);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.board.portrait { width: 1080px; height: 1920px; padding: 50px 48px 42px; }

.board-head, .hotel, .rate-column-head, .rate-row, .board-foot, .announcement {
    display: flex;
    align-items: center;
}

.board-head {
    flex: 0 0 auto;
    justify-content: space-between;
    min-height: 118px;
    margin-bottom: 28px;
    padding: 0 0 22px;
    border-bottom: 1px solid #39445e;
}

.hotel { min-width: 0; }
.hotel h1 {
    overflow: hidden;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotel-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-height: 96px;
    margin-right: 22px;
}

.board-time { display: flex; align-items: center; flex: 0 0 auto; margin-left: 26px; }
.hotel-qr { display: block; width: auto; height: auto; max-width: 106px; max-height: 106px; margin-right: 26px; }
.clock { flex: 0 0 auto; text-align: right; }
.clock-time {
    display: block;
    color: #ffcf8a;
    font-family: Roboto, Arial, sans-serif;
    font-size: 67px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    line-height: 1;
}

.clock-date { margin-top: 9px; color: #bec8df; font-size: 22px; white-space: nowrap; }
.portrait .hotel h1 { font-size: 48px; }
.portrait .clock-time { font-size: 60px; }
.portrait .clock-date { font-size: 21px; }

.board-body { display: flex; flex: 1 1 auto; min-height: 0; }
.portrait .board-body { flex-direction: column; }

.rate-panel {
    display: flex;
    flex: 5 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 30px 36px;
    border: 1px solid #39445f;
    border-radius: 26px;
    background: #20283c;
}

.rate-column-head {
    flex: 0 0 auto;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #4a5673;
    color: #bcc7df;
    font-size: 23px;
}

.rate-viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rate-list { margin: 0; padding: 0; list-style: none; }
.rate-track.is-scrolling {
    -webkit-animation: scroll-rates 1s linear infinite;
    animation: scroll-rates 1s linear infinite;
}

@-webkit-keyframes scroll-rates { to { -webkit-transform: translateY(-50%); } }
@keyframes scroll-rates { to { transform: translateY(-50%); } }

.rate-row {
    position: relative;
    justify-content: space-between;
    height: 80px;
    border-bottom: 1px solid #37425c;
}

.room-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding-right: 24px;
    font-size: 31px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rate-price, .room-price {
    flex: 0 0 26%;
    text-align: right;
}

.rate-column-head .room-name { font-size: inherit; font-weight: inherit; }

.room-price {
    color: #ffd596;
    font-family: Roboto, Arial, sans-serif;
    font-size: 44px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-amount { position: relative; display: inline-block; }
.room-price small { margin-right: 0.36em; font-size: 0.58em; }
.store-price { color: #c2cce3; font-size: 38px; }
.rate-empty { margin-top: 32px; color: #bec8df; font-size: 27px; }

.is-sold-out .room-name { opacity: 0.43; }
.is-sold-out .price-value { opacity: 0.26; }
.sold-out {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2px 9px 3px;
    border: 2px solid currentColor;
    color: #ff9187;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 1px 3px #141927;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%) rotate(-9deg);
    transform: translate(-50%, -50%) rotate(-9deg);
}

.carousel {
    position: relative;
    flex: 6 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin-left: 26px;
    border: 1px solid #343e57;
    border-radius: 26px;
    background: #0b0e18;
}

.carousel-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0e18;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-layer.is-active { z-index: 1; }

.portrait .carousel { flex: 0 0 565px; order: -1; margin: 0 0 26px; }
.portrait .rate-row { height: 83px; }

.carousel img, .carousel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel .video-cover-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.board-foot {
    flex: 0 0 auto;
    min-height: 54px;
    margin-top: 22px;
    padding: 11px 18px;
    border: 1px solid #39445f;
    border-radius: 12px;
    background: #20283c;
}

.announcement { flex: 1 1 auto; min-width: 0; }
.announcement-window { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.announcement-text {
    display: inline-block;
    padding-left: 100%;
    font-size: 52px;
    white-space: nowrap;
    -webkit-animation: ticker 22s linear infinite;
    animation: ticker 22s linear infinite;
}

@-webkit-keyframes ticker { to { -webkit-transform: translateX(-100%); } }
@keyframes ticker { to { transform: translateX(-100%); } }
.connection-status { flex: 0 0 auto; margin-left: auto; color: #ead9bc; font-size: 20px; white-space: nowrap; }
.announcement + .connection-status { margin-left: 18px; }

@media (max-height: 540px) {
    .pairing-card { width: 244px; padding: 12px; }
    .qr-frame { height: 218px; }
    .pairing-copy h1 { font-size: 42px; }
    .pairing-copy p, .pairing-status { font-size: 15px; }
}

@media (orientation: portrait) {
    .pairing { flex-direction: column; text-align: center; }
    .pairing-copy { max-width: none; margin: 0 0 28px; }
    .pairing-card { max-width: 100%; }
}

@media (max-width: 480px) and (orientation: portrait) {
    .pairing-card { width: 300px; padding: 14px; }
    .qr-frame { height: 270px; }
    .pairing-copy h1 { font-size: 42px; }
    .pairing-copy p, .pairing-status { font-size: 16px; }
}