/* ========================================
   try-play 头部样式（所有规则带 .try-play-header 前缀）
   ======================================== */

.try-play-header {
    position: relative;
    height: 56px;
    padding: 0 12px;
    /* background: url("../image/header-bg.png") no-repeat center / 100% 100%; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.try-play-header .header-bg {
    position: absolute;
    top: 0;
    left: -45%;
    width: auto;
    height: 100%;
    z-index: -1;
}

.try-play-header .header-logo .logo-text {
    height: auto;
}

/* Logo 区域 */
.try-play-header .header-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.try-play-header .header-logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.try-play-header .header-logo .logo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.try-play-header .header-logo .logo-text {
    color: #ffbd2b;
    font-size: 15px;
    font-weight: bold;
    font-family: system-ui;
}

/* 右侧整体 */
.try-play-header .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 用户信息：上下两行 */
.try-play-header .header-msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* 用户名行 */
.try-play-header .header-msg-info-user {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 12px;
}

.try-play-header .header-msg-info-user .username-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../image/nicheng.png") no-repeat center / contain;
    flex-shrink: 0;
}

/* 余额行 */
.try-play-header .header-msg-money {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px 8px 2px 20px;
    background: url("../image/money.png") no-repeat center / 100% 100%;
    min-width: 90px;
    height: 22px;
    color: #ffec6e;
    font-size: 12px;
    font-family: Impact, sans-serif;
    white-space: nowrap;
}

.try-play-header .header-msg-money .money-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("../image/jinbi.png") no-repeat center / contain;
}

/* 退出按钮 */
.try-play-header .exit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 4px;
    margin-right: 30px;
}

.try-play-header .exit-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/exit-icon.png") no-repeat center / contain;
    flex-shrink: 0;
}

.try-play-header .exit-text {
    font-size: 14px;
    color: rgba(243, 203, 151, 1);
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    .try-play-header .exit {
        margin-right: 0;
    }
}