.h-button {
    display: inline-block;
    cursor: url(assets/game/hand-cursor.png) 16 16, auto;
}

.h-button.small {
    padding: 4px 8px;
    font-size: 18px;
    font-family: 'Rye', sans-serif;
    text-align: center;
    text-decoration: none;
    color: rgba(8, 20, 8, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    background-color: rgba(255, 191, 0, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL5 */
    border: 2px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.h-button.small:hover {
    background-color: rgba(255, 225, 102, 1);
    color: rgba(8, 20, 8, 1);
    border: 2px solid rgba(102, 77, 0, 1);
}

.h-button.small:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
}

.h-button.login {
    padding: 10px 20px;
    font-size: 24px;
    font-family: 'Rye', sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    background-color: rgba(24, 58, 24, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL5 */
    border: 2px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    border-radius: 10px;
    box-shadow: 5px 5px 0px rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    transition: all 0.3s ease;
}

.h-button.login:hover {
    background-color: rgba(48, 115, 48, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL4 */
    color: rgba(255, 255, 255, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL1 */
    border: 2px solid rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    box-shadow: 5px 5px 0px rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-button.login:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    box-shadow: none;
    transform: translateY(4px);
}

.h-button.register {
    padding: 10px 20px;
    font-size: 24px;
    font-family: 'Rye', sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    background-color: rgba(24, 58, 24, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL5 */
    border: 2px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    border-radius: 10px;
    box-shadow: 5px 5px 0px rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    transition: all 0.3s ease;
}

.h-button.register:hover {
    background-color: rgba(48, 115, 48, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL4 */
    color: rgba(255, 255, 255, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL1 */
    border: 2px solid rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    box-shadow: 5px 5px 0px rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-button.register:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    box-shadow: none;
    transform: translateY(4px);
}

.h-button.play {
    width: 140px;
    padding: 8px 8px;
    font-size: 28px;
    font-family: 'Rye', sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(8, 20, 8, 1);
    background-color: rgba(255, 191, 0, 1);
    border: 2px solid rgba(8, 20, 8, 1);
    border-radius: 12px;
    box-shadow: 6px 6px 0px rgba(8, 20, 8, 1);
    transition: all 0.3s ease;
    cursor: url(assets/game/hand-cursor.png) 16 16, auto;

}

.h-button.play:hover {
    background-color: rgba(255, 225, 102, 1);
    color: rgba(8, 20, 1, 1);
    border: 2px solid rgba(102, 77, 0, 1);
}

.h-button.play:active {
    background-color: rgba(255, 225, 102, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    box-shadow: none;
    transform: translateY(4px);
}

.h-button.buy-bonus {
    padding: 8px 8px;
    font-size: 24px;
    font-family: 'Rye', sans-serif;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 191, 0, 1);
    background-color: rgba(77, 51, 32, 1);
    border: 2px solid rgba(8, 20, 8, 1);
    border-radius: 16px;
    box-shadow: 6px 6px 0px rgba(8, 20, 8, 1);
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
}

.h-button.buy-bonus:hover {
    background-color: rgba(153, 102, 64, 1);
    color: rgba(255, 225, 102, 1);
    border: 2px solid rgba(58, 39, 24, 1);
}

.h-button.buy-bonus:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    box-shadow: none;
    transform: translateY(4px);
}

.h-button.bonus-shop {
    padding: 10px 24px;
    font-size: 24px;
    font-family: 'Rye', sans-serif;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 191, 0, 1);
    background-color: rgba(58, 39, 24, 1);
    border: 3px solid rgba(20, 13, 8, 1);
    border-radius: 16px;
    box-shadow: 6px 6px 0px rgba(20, 13, 8, 1);
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
}

.h-button.bonus-shop:hover {
    background-color: rgba(115, 77, 48, 1);
    color: rgba(255, 208, 51, 1);
    border: 3px solid rgba(20, 13, 8, 1);
    box-shadow: 6px 6px 0px rgba(20, 13, 8, 1);
}

.h-button.bonus-shop:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(20, 13, 8, 1);
    box-shadow: none;
    transform: translateY(4px);
}

.h-button.deckupgrade {
    padding: 10px 24px;
    font-size: 24px;
    font-family: 'Rye', sans-serif;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    background-color: rgba(24, 58, 24, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL5 */
    border: 3px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    border-radius: 16px;
    box-shadow: 6px 6px 0px rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
}

.h-button.deckupgrade:hover {
    background-color: rgba(48, 115, 48, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL4 */
    color: rgba(255, 255, 255, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL1 */
    border: 3px solid rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    box-shadow: 6px 6px 0px rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-button.deckupgrade:active {
    background-color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    color: rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
    box-shadow: none;
    transform: translateY(4px);
}

/* Disabled state for all h-button variants */
.h-button.disabled,
.h-button:disabled {
    opacity: 0.5;
    cursor: url(assets/game/ban-cursor.png) 16 16, auto !important;
    /* pointer-events: none; */
}

.h-toggle.attraction.switch {
    --input-focus: #2d8cf0;
    --font-color: #323232;
    --font-color-sub: #666;
    --bg-color: #fff;
    --bg-color-alt: #666;
    --main-color: #323232;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 50px;
    height: 20px;
}

.h-toggle.attraction.toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.h-toggle.attraction.slider {
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid var(--main-color);
    box-shadow: 4px 4px var(--main-color);
    position: absolute;
    cursor: url(assets/game/hand-cursor.png) 16 16, auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-colorcolor);
    transition: 0.3s;
}

.h-toggle.attraction.slider:before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    border: 2px solid var(--main-color);
    border-radius: 5px;
    left: -2px;
    bottom: 2px;
    background-color: var(--bg-color);
    box-shadow: 0 3px 0 var(--main-color);
    transition: 0.3s;
}

.h-toggle.attraction.toggle:checked+.h-toggle.attraction.slider {
    background-color: var(--input-focus);
}

.h-toggle.attraction.toggle:checked+.h-toggle.attraction.slider:before {
    transform: translateX(30px);
}

.h-toggle.attraction.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.h-toggle.attraction.label {
    font-family: 'Rye', sans-serif;
    font-size: 18px;
    /* font-weight: bold; */
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    text-align: center;
}

/* Disabled state for h-toggle */
.h-toggle.disabled,
.h-toggle .toggle:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.h-toggle.disabled .slider {
    cursor: not-allowed;
}

.h-container.top {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-bottom: 2px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
}

.h-value.top {
    font-family: 'Rye', sans-serif;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.h-value.top.container {
    width: 100px;
    height: 46px;
    /* border-left: 2px solid rgba(64, 153, 64, 1); 
    border-right: 2px solid rgba(64, 153, 64, 1);  */
    /* border-radius: 10px;
    padding: 8px;
    background: rgba(77, 51, 32, 1); */
}

.h-value.top.label {
    font-size: 16px;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    order: 1;
}

.h-value.top.value {
    font-size: 24px;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    order: 2;
}

.h-container.bottom {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-bottom: 2px solid rgba(8, 20, 8, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL8 */
}

.h-value.bottom {
    font-family: 'Rye', sans-serif;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.h-value.bottom.container {
    width: 200px;
    /* border-left: 2px solid rgba(64, 153, 64, 1); 
    border-right: 2px solid rgba(64, 153, 64, 1);  */
    /* width: 200px;
    height: 46px;
    border: 2px solid rgba(39, 26, 16, 1);
    border-radius: 10px;
    padding: 8px;
    background: rgba(77, 51, 32, 1); */
}

.h-value.bottom.label {
    font-size: 16px;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    order: 1;
}

.h-value.bottom.value {
    font-size: 24px;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    order: 2;
}

.h-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-bottom: 12px; */
    /* width: 400px;
    height: 300px; */

}

.h-info.container {
    border-radius: 10px;
    background: rgba(58, 39, 24, 1);
    /* COLOR_BACKGROUND_BROWN_LEVEL5 */
    border-radius: 10px;
    border-style: solid;
    border-color: rgba(39, 26, 16, 1)
        /* COLOR_BACKGROUND_BROWN_LEVEL8 */
    ;
    border-width: 2px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.h-info.handtype.container {
    width: 400px;
    height: 240px;
}

.h-info.handtype.description {
    display: block;
    width: 400px;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    box-sizing: border-box;
    font-family: 'Rye', sans-serif;
}

.h-info.handtype-stats.container {
    width: 400px;
    height: 320px;
}

.h-info.card-info.container {
    width: 400px;
    height: 280px;
}

.h-info.handtype-multiplier.container {
    width: 400px;
    height: 340px;
}

.h-info.playcard.container {
    width: 400px;
    height: 90px;
}

.h-info.playcard-extended.container {
    width: 400px;
    height: 210px;
}

.h-info.playcard-offer.container {
    width: 400px;
    height: 210px;
}

.h-info.bonus-offer.container {
    width: 400px;
    height: 160px;
    padding: 15px;
    box-sizing: border-box;
}

.h-info.round-rules.container {
    width: 400px;
    min-height: 120px;
    padding: 15px;
    box-sizing: border-box;
}

.h-info.gameprofile.container {
    width: 400px;
    height: 200px;
    padding: 15px;
    /* box-sizing: border-box; */
}

.h-info.gameprofile.head {
    font-family: 'Rye', sans-serif;
    font-size: 30px;
    color: rgba(217, 217, 217, 1);
    margin-bottom: 20px;
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
}

.h-info.round-rules.head {
    font-family: 'Rye', sans-serif;
    font-size: 28px;
    color: rgba(217, 217, 217, 1);
    margin-bottom: 15px;
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
}

.h-info.round-rules.description {
    font-size: 18px;
    font-family: 'Rye', sans-serif;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    line-height: 1.5;
}


.h-info.head {
    order: 1;
}

.h-info.handtype.head {
    font-family: 'Updock';
    font-size: 40px;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
}

.h-info.handtype-stats.head {
    font-family: 'Updock';
    font-size: 40px;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
}

.h-info.handtype-multiplier.head {
    font-family: 'Updock';
    font-size: 40px;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
}

.h-info.playcard.head {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.h-info.playcard.head1 {
    font-family: 'Rye', sans-serif;
    font-size: 30px;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
}

.h-info.playcard-extended.bottom {
    order: 2;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.h-info.playcard-extended.image {
    order: 1;
}

.h-info.playcard-extended.image-description {
    order: 2;
    font-size: 18px;
    font-family: 'Rye', sans-serif;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    text-align: left;
}

.h-info.playcard-offer.bottom {
    order: 2;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.h-info.playcard-offer.image {
    order: 1;
}

.h-info.playcard-offer.image-description {
    order: 2;
    font-size: 18px;
    font-family: 'Rye', sans-serif;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    text-align: left;
}

.h-info.description {
    order: 2;
    font-size: 20px;
    font-family: 'Rye', sans-serif;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
}

.h-info.cards-container {
    order: 3;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* justify-content: center; */
}

.h-info.handtype-stats.barchart-container {
    order: 3;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    /* justify-content: center; */
}

.h-info.handtype-multiplier.table-container {
    order: 2;
    margin-bottom: 10px;
    width: 100%;
    /* justify-content: center; */
}

/* Deck info popup styles */
.h-info.deck-info.container {
    width: 850px;
    height: auto;
    max-height: 500px;
    padding: 20px;
    box-sizing: border-box;
}

.h-info.deck-info.head {
    order: 1;
    font-family: 'Rye';
    font-size: 30px;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    margin-bottom: 10px;
}

.h-info.deck-info.description {
    order: 2;
    font-size: 18px;
    font-family: 'Rye', sans-serif;
    color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    margin-bottom: 15px;
}

.deck-info.suits-container {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deck-info.suit-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.deck-info.suit-label {
    font-family: 'Rye', sans-serif;
    font-size: 20px;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL3 */
    min-width: 80px;
    text-align: left;
    display: flex;
    align-items: center;
}

.deck-info.cards-row {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex-wrap: nowrap;
}

.deck-info.card-wrapper {
    position: relative;
}

.deck-info.card-wrapper.in-deck {
    opacity: 1;
}

.deck-info.card-wrapper.discarded .card {
    background-color: #888888;
}

/* HDialog styles */
.h-dialog.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.h-dialog.container {
    position: relative;
    background-color: rgba(77, 51, 32, 1);
    /* COLOR_BACKGROUND_BROWN_LEVEL5 */
    border: 3px solid rgba(39, 26, 16, 1);
    /* COLOR_BACKGROUND_BROWN_LEVEL7 */
    border-radius: 10px;
    padding: 30px;
    min-width: 450px;
    min-height: 560px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.h-dialog.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    font-weight: bold;
    color: rgba(255, 208, 51, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL5 */
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    transition: color 0.2s, transform 0.2s;
}

.h-dialog.close-button:hover {
    color: rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    transform: scale(1.1);
}

.h-dialog.close-button:active {
    transform: scale(0.95);
}

.h-dialog.content {
    color: rgba(255, 255, 255, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL1 */
}

.h-dialog.title {
    font-family: 'Rye', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    margin-bottom: 20px;
    text-align: center;
}

.h-dialog.error {
    display: none;
    font-family: 'Rye', sans-serif;
    font-size: 18px;
    color: rgba(255, 51, 51, 1);
    /* COLOR_FOREGROUND_RED_LEVEL4 */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(77, 51, 32, 0.5);
    border-radius: 4px;
    text-align: center;
}

.h-dialog.message {
    display: none;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(77, 51, 32, 0.5);
    border-radius: 4px;
    text-align: center;
    word-wrap: break-word;
}

.h-dialog label {
    display: block;
    font-family: 'Rye', sans-serif;
    font-size: 18px;
    color: rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    margin-top: 15px;
    margin-bottom: 5px;
}

.h-dialog input[type="text"],
.h-dialog input[type="password"],
.h-dialog input[type="email"],
.h-dialog textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid rgba(24, 58, 24, 1);
    /* COLOR_BACKGROUND_GREEN_LEVEL3 */
    border-radius: 5px;
    background-color: rgba(217, 217, 217, 1);
    /* COLOR_FOREGROUND_WHITE_LEVEL3 */
    box-sizing: border-box;
    outline: none;
}

.h-dialog.password-field {
    position: relative;
}

.h-dialog.password-field input {
    padding-right: 48px;
}

.h-dialog.password-toggle {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: rgba(24, 58, 24, 1);
    cursor: pointer;
}

.h-dialog.password-toggle:hover {
    background-color: rgba(24, 58, 24, 0.1);
}

.h-dialog.password-toggle:focus-visible {
    outline: 2px solid rgba(24, 58, 24, 1);
    outline-offset: -2px;
}

.password-toggle .password-eye-slash {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-eye-slash {
    display: block;
}

.h-dialog textarea {
    font-family: inherit;
    resize: vertical;
}

.h-dialog input[type="text"]:focus,
.h-dialog input[type="password"]:focus,
.h-dialog input[type="email"]:focus,
.h-dialog textarea:focus {
    border-color: rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-dialog button[type="submit"].h-button.play {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.h-dialog.oauth-separator {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 2px solid rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-dialog.oauth-header {
    font-family: 'Rye', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 191, 0, 1);
    /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
    text-align: center;
    margin-bottom: 12px;
    margin-top: 0;
}

.h-dialog.copy-password-button.h-button.play {
    display: block;
    width: 100%;
    margin-top: 15px;
}

.h-dialog.oauth-buttons {
    display: flex;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    justify-content: space-between;
}

.h-dialog.oauth-button.h-button.play {
    flex: 1;
    padding-left: 48px;
    background-color: rgba(217, 217, 217, 1);
    color: rgba(8, 20, 8, 1);
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 24px 24px;
}

.h-dialog.oauth-button.attraction-itch-button {
    box-sizing: border-box;
    width: max-content;
    min-width: 240px;
    white-space: nowrap;
}

.h-dialog.oauth-buttons-steam .oauth-button.steam {
    flex: 0 0 calc(50% - 5px);
}

.h-dialog.oauth-button.h-button.play:hover {
    background-color: rgba(160, 160, 160, 1);
    color: rgba(8, 20, 8, 1);
}

.h-dialog.oauth-button.github {
    border-color: #24292e;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%2324292e"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>');
}

.h-dialog.oauth-button.github:hover {
    border-color: #24292e;
}

.h-dialog.oauth-button.google {
    border-color: #4285f4;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="%2334A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="%23FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="%23EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>');
}

.h-dialog.oauth-button.google:hover {
    border-color: #4285f4;
}

.h-dialog.oauth-button.discord {
    border-color: #5865F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="%235865F2"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>');
}

.h-dialog.oauth-button.discord:hover {
    border-color: #5865F2;
}

.h-dialog.oauth-button.twitch {
    border-color: #9146FF;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2800" fill="%239146FF"><path d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600 V1300z M1700,550h200v600h-200V550z M1150,550h200v600h-200V550z"/></svg>');
}

.h-dialog.oauth-button.twitch:hover {
    border-color: #9146FF;
}

.h-dialog.oauth-button.itch {
    border-color: #FA5C5C;
    /* itch.io's official "textless" mark (https://static.itch.io/images/itchio-textless-black.svg), recolored to the brand red. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245.371 220.736" fill="%23FA5C5C"><path d="M31.99 1.365C21.287 7.72.2 31.945 0 38.298v10.516C0 62.144 12.46 73.86 23.773 73.86c13.584 0 24.902-11.258 24.903-24.62 0 13.362 10.93 24.62 24.515 24.62 13.586 0 24.165-11.258 24.165-24.62 0 13.362 11.622 24.62 25.207 24.62h.246c13.586 0 25.208-11.258 25.208-24.62 0 13.362 10.58 24.62 24.164 24.62 13.585 0 24.515-11.258 24.515-24.62 0 13.362 11.32 24.62 24.903 24.62 11.313 0 23.773-11.714 23.773-25.046V38.298c-.2-6.354-21.287-30.58-31.988-36.933C180.118.197 157.056-.005 122.685 0c-34.37.003-81.228.54-90.697 1.365zm65.194 66.217a28.025 28.025 0 0 1-4.78 6.155c-5.128 5.014-12.157 8.122-19.906 8.122a28.482 28.482 0 0 1-19.948-8.126c-1.858-1.82-3.27-3.766-4.563-6.032l-.006.004c-1.292 2.27-3.092 4.215-4.954 6.037a28.5 28.5 0 0 1-19.948 8.12c-.934 0-1.906-.258-2.692-.528-1.092 11.372-1.553 22.24-1.716 30.164l-.002.045c-.02 4.024-.04 7.333-.06 11.93.21 23.86-2.363 77.334 10.52 90.473 19.964 4.655 56.7 6.775 93.555 6.788h.006c36.854-.013 73.59-2.133 93.554-6.788 12.883-13.14 10.31-66.614 10.52-90.474-.022-4.596-.04-7.905-.06-11.93l-.003-.045c-.162-7.926-.623-18.793-1.715-30.165-.786.27-1.757.528-2.692.528a28.5 28.5 0 0 1-19.948-8.12c-1.862-1.822-3.662-3.766-4.955-6.037l-.006-.004c-1.294 2.266-2.705 4.213-4.563 6.032a28.48 28.48 0 0 1-19.947 8.125c-7.748 0-14.778-3.11-19.906-8.123a28.025 28.025 0 0 1-4.78-6.155 27.99 27.99 0 0 1-4.736 6.155 28.49 28.49 0 0 1-19.95 8.124c-.27 0-.54-.012-.81-.02h-.007c-.27.008-.54.02-.813.02a28.49 28.49 0 0 1-19.95-8.123 27.992 27.992 0 0 1-4.736-6.155zm-20.486 26.49l-.002.01h.015c8.113.017 15.32 0 24.25 9.746 7.028-.737 14.372-1.105 21.722-1.094h.006c7.35-.01 14.694.357 21.723 1.094 8.93-9.747 16.137-9.73 24.25-9.746h.014l-.002-.01c3.833 0 19.166 0 29.85 30.007L210 165.244c8.504 30.624-2.723 31.373-16.727 31.4-20.768-.773-32.267-15.855-32.267-30.935-11.496 1.884-24.907 2.826-38.318 2.827h-.006c-13.412 0-26.823-.943-38.318-2.827 0 15.08-11.5 30.162-32.267 30.935-14.004-.027-25.23-.775-16.726-31.4L46.85 124.08C57.534 94.073 72.867 94.073 76.7 94.073zm45.985 23.582v.006c-.02.02-21.863 20.08-25.79 27.215l14.304-.573v12.474c0 .584 5.74.346 11.486.08h.006c5.744.266 11.485.504 11.485-.08v-12.474l14.304.573c-3.928-7.135-25.79-27.215-25.79-27.215v-.006l-.003.002z"/></svg>');
}

.h-dialog.oauth-button.itch:hover {
    border-color: #FA5C5C;
}

.h-dialog.oauth-button.steam {
    border-color: #171a21;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23171a21"><path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.03 4.524 4.524 0 2.494-2.03 4.524-4.524 4.524h-.105l-4.076 2.911c0 .052.004.104.004.157 0 1.898-1.546 3.444-3.444 3.444-1.666 0-3.058-1.192-3.37-2.766L.645 15.47C2.00 20.48 6.57 24 11.979 24c6.627 0 12-5.373 12-12S18.606 0 11.979 0ZM7.54 18.21l-1.473-.61c.262.549.721.988 1.314 1.233 1.275.527 2.738-.077 3.264-1.353.253-.615.252-1.293-.003-1.907-.255-.615-.735-1.093-1.351-1.348-.62-.258-1.288-.249-1.878-.012l1.523.631c.939.39 1.395 1.481 1.005 2.419-.39.939-1.467 1.396-2.406 1.007Zm9.961-9.311c0-1.662-1.352-3.015-3.015-3.015-1.663 0-3.015 1.352-3.015 3.015s1.352 3.015 3.015 3.015c1.663 0 3.015-1.353 3.015-3.015Zm-5.278-.007c0-1.254 1.017-2.272 2.272-2.272 1.254 0 2.271 1.018 2.271 2.272 0 1.254-1.017 2.271-2.271 2.271-1.255 0-2.272-1.017-2.272-2.271Z"/></svg>');
}

.h-dialog.oauth-button.steam:hover {
    border-color: #171a21;
}

/* Player Info Dialog Styles */
.h-dialog.player-info {
    font-family: 'Rye', sans-serif;
    font-size: 17px;
}

.h-dialog.player-info-table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    font-family: 'Rye', sans-serif;
    font-size: 17px;
}

.h-dialog.player-info-table th,
.h-dialog.player-info-table td {
    padding: 8px;
    text-align: left;
}

.h-dialog.player-info-table th {
    font-size: 18px;
    color: rgba(255, 191, 0, 1); /* COLOR_FOREGROUND_YELLOW_LEVEL4 */
}

.h-dialog.player-info-table td {
    color: rgba(255, 255, 255, 0.9); /* COLOR_FOREGROUND_WHITE_LEVEL3 */
}