/* 右上ヘッダーボタン（index.html シャッター・＋・ハンバーガーと共通） */
.right-buttons {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 10.5px;
    margin-right: 0;
    flex-shrink: 0;
    --header-icon-stroke: 2.5px;
    --header-icon-size: 18px;
    --header-btn-size: 32px;
}

/* 枠なし・アイコン黒（＋とハンバーガーは線 2.5px で統一） */
.right-buttons .recholl-radio-btn:not(.click-to-movie-btn) {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: var(--header-btn-size);
    height: var(--header-btn-size);
    min-width: var(--header-btn-size);
    min-height: var(--header-btn-size);
    padding: 0;
}

.right-buttons .recholl-radio-btn:active:not(.is-muted):not(.click-to-movie-btn),
.right-buttons #uploadToggleBtn:active:not(.is-muted) {
    transform: none;
    background: transparent;
    box-shadow: none;
}

.right-buttons .camera-blind-toggle {
    font-size: 0;
    line-height: 0;
    color: transparent;
}

/* シャッター: 枠の中に短いスラット2本（ブラインド／カメラ覆い） */
.right-buttons .camera-blind-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 2.5px;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    padding: 0 2.5px;
    box-sizing: border-box;
    border: var(--header-icon-stroke) solid #000;
    background: transparent;
}

.right-buttons .camera-blind-icon__slat {
    display: block;
    flex: 0 0 var(--header-icon-stroke);
    height: var(--header-icon-stroke);
    width: 100%;
    background-color: #000;
}

.right-buttons .camera-blind-toggle[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
}

.right-buttons .camera-blind-toggle[aria-pressed="true"] .camera-blind-icon {
    border-color: var(--recholl-blue);
}

.right-buttons .camera-blind-toggle[aria-pressed="true"] .camera-blind-icon__slat {
    background-color: var(--recholl-blue);
}

.right-buttons .upload-toggle-icon::before {
    width: var(--header-icon-size);
    height: var(--header-icon-stroke);
    background-color: #000;
}

.right-buttons .upload-toggle-icon::after {
    width: var(--header-icon-stroke);
    height: var(--header-icon-size);
    background-color: #000;
}

.right-buttons .upload-toggle-icon::before,
.right-buttons .upload-toggle-icon::after {
    background-color: #000;
}

.right-buttons #uploadToggleBtn.active .upload-toggle-icon::before,
.right-buttons #uploadToggleBtn.active .upload-toggle-icon::after {
    background-color: var(--recholl-blue);
}

/* PLAY — シャッターの左。高さはシャッターと同じ 32px、間隔は gap 10.5px */
.right-buttons .recholl-radio-btn.click-to-movie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: var(--header-btn-size);
    max-width: none;
    height: var(--header-btn-size);
    min-height: var(--header-btn-size);
    padding: 0 13px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--recholl-blue) 0%, var(--recholl-blue-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 1px 4px rgba(0, 102, 255, 0.3);
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
}

.right-buttons .click-to-movie-btn:hover {
    color: #fff;
}

.right-buttons .hamburger.recholl-radio-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: var(--header-btn-size);
    height: var(--header-btn-size);
    min-width: var(--header-btn-size);
    min-height: var(--header-btn-size);
    padding: 7px;
    box-sizing: border-box;
    gap: 3.5px;
}

.right-buttons .hamburger span {
    display: block;
    position: relative;
    flex: 0 0 var(--header-icon-stroke);
    height: var(--header-icon-stroke);
    min-height: var(--header-icon-stroke);
    width: 100%;
    margin: 0;
    background-color: #000;
}

.right-buttons .hamburger.active span {
    background-color: var(--recholl-blue);
}

.right-buttons .hamburger.active span:nth-child(1),
.right-buttons .hamburger.active span:nth-child(3) {
    left: 7px;
    right: 7px;
    margin-top: calc(var(--header-icon-stroke) / -2);
}