main.css

@font-face {
    font-family: PiratesBay;
    src: url(assets/fonts/piratesbay.ttf);
}

@font-face {
    font-family: Dumbledor;
    src: url(assets/fonts/Dumbledor1.ttf);
}

@media screen and (orientation:portrait) {
    .body_background_image::before {transform: rotate(90deg); width: 100vh; height: 100vw; left: calc(50% - calc(100vh / 2)); top: calc(50% - calc(100vw / 2));}
    .background_select_scroll_item {width: 148px; height: 300px; margin: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
    .background_select_scroll_item_image {transform: rotate(90deg); width: 300px; height: 148px;}
}
@media screen and (orientation:landscape) {
    .body_background_image::before {transform: rotate(0deg); width: 100vw; height: 100vh; left: calc(50% - calc(100vw / 2)); top: calc(50% - calc(100vh / 2));}
    .background_select_scroll_item {width: 300px; height: 148px; margin: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
    .background_select_scroll_item_image {width: 300px; height: 148px;}
}

body {overflow: hidden;}
html, body {overscroll-behavior: none;}
img, p {user-select: none;}
svg {pointer-events: none; user-select: none;}

.background_image {background-position: center; background-repeat: no-repeat; background-size: contain;}

.body_background_image{background: transparent; overflow: hidden; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; pointer-events: none;}
.body_background_image::before {content: ""; z-index: -1; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: var(--BG-IMG); position: absolute;}

#body_actual[night="true"] #alignment_tokens {display: none;}

#visibility_toggle {background-image: url(assets/visibility_off.png); right: 10px; background-color: rgb(66, 66, 66); cursor: pointer;}
#body_actual[night="true"] #visibility_toggle {background-color: lightblue;}

.bottom_buttons {
    position: absolute; 
    bottom: 10px; 
    width: 100px; 
    height: 100px; 
    border-radius: 20px; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
}
.reminder {
    height: 75px; 
    width: 75px; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-size: cover; 
    pointer-events: all;
    cursor: move;
    font-weight: bold;
    
    object-fit: contain;
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center; /* Center text */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box; /* Include padding in width/height */
}
#body_actual[night="true"] .reminder {
    display: none;
}
.reminder_text {
    font-family: Dumbledor;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    line-height: 70%;
    color: black;
    pointer-events: none;
    width: 80%;
    /* Bounding box check */
    /* background-color: rgba(255, 0, 0, 0.2);
    border: 1px solid red; */
}
.reminder_delete {
    position: absolute;
    width: 80%; 
    height: 80%; 
    margin: 10%; 
    pointer-events: none; 
    display: none; 
    border-radius: 100%; 
    user-select: none;
    opacity: 75%;
}
.token_text {
    position: absolute;
    width: 100%; 
    top:150px; 
    height: 35px; 
    text-align: center; 
    font-size: 20pt; 
    font-family: PiratesBay; 
    pointer-events: none; 
    color: white;
}

/*new info*/
#info_box {position: absolute; left: 0px; bottom: 0px; width: 100%; height: 250px; background-image: url('assets/vines.png'); white-space: nowrap; overflow: visible;}
.info_tab {height: 250px; top: 0px; display: inline-block; color: white; text-align: center; left: 0px; position: relative; overflow: hidden;}
.info_tab_header {
    height: 250px; 
    cursor: pointer;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; */
}
.info_tab_img {
    width: 100%; 
    margin-top: 75px;
    align-items: center;
}

#info_desc {width: 250px; transition: width ease-in-out 0.2s;}
#info_desc:is([focus="true"]) {width: calc(100% - 315px);}
#info_desc:not([focus="true"]) #info_img {
    width: 200px; 
    height: 200px;
}
#info_img {
    width: 250px; 
    height: 250px; 
    position: absolute;
    left: 0px;
    overflow: hidden;
    border-radius: 100%;
    transition: width ease-in-out 0.5s, 
    height ease-in-out 0.5s,
    left ease-in-out 0.5s;
}
#info_desc:not([focus="true"]) #info_img {
    left: 25px;
}
#info_img_role {
    position: absolute;
    top: 0;
    /* Center horizontally with this one weird trick! */
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    height: 90%;
    object-fit: contain;
}
#info_visibility_shade {position: absolute; top: 0px; left: 0px; height: 250px; width: 250px; pointer-events: none; background-color: black; opacity: 0.5; border-radius: 100%; display: none; transition: width ease-in-out 0.5s, height ease-in-out 0.5s, left ease-in-out 0.5s;}
#info_visibility_img {position: absolute; top: 0px; left: 0px; height: 250px; width: 250px; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: 60%; display: none; border-radius: 100%; transition: width ease-in-out 0.5s, height ease-in-out 0.5s, left ease-in-out 0.5s, padding ease-in-out 0.5s;}
#info_desc:not([focus="true"]) #info_visibility_shade {width: 200px; height: 200px; left: 25px;}
#info_box:is([hidden="hide"]) #info_visibility_shade {display: inherit;}
#info_box:is([hidden="bluff"]) #info_visibility_shade {display: inherit;}
#info_desc:not([focus="true"]) #info_visibility_img {width: 200px; height: 200px; left: 25px;}
#info_box:is([hidden="hide"]) #info_visibility_img {display: inherit; background-image: url(assets/visibility_off_red.png);}
#info_box:is([hidden="bluff"]) #info_visibility_img {display: inherit; background-image: url(assets/visibility_off_yellow.png);}

#info_img_name {
    position: absolute;
    bottom: -30px;
    display: block; 
    color:rgb(192, 72, 72); 
    font-size: 20pt; 
    font-family: PiratesBay;
    width: 250px;
    text-align: center;
    transition: bottom ease-in-out 0.5s;
}
#info_desc:not([focus="true"]) #info_img_name {
    bottom: 20px;
}

#info_title_field {height: 100px; position: absolute; top: 0px; left: 0px; color:rgb(211, 211, 211); font-size: 50pt; font-family: PiratesBay;}
#info_name_field {position: absolute; top: 70px; left: 30px; color:rgb(192, 72, 72); font-size: 17pt; font-family: PiratesBay;}
#info_desc_field {position: absolute; width: calc(100vw - 600px); top: 95px; left: 15px; color:darkgrey; font-size: 24pt; font-family: PiratesBay; overflow-wrap: break-word; white-space: normal; text-align: left;}

#info_list {width: 100px; transition: width ease-in-out 0.2s;}
#info_list:is([focus="true"]) {width: calc(100% - 465px);}
#info_list_scroll {position: absolute; top: 0px; left: 100px; height: 100%; width: calc(100vw - 625px); text-align: center; overflow-wrap: break-word; white-space: normal; margin: 0px 30px 0px 30px; overflow-y: scroll; scrollbar-width: none;}
#info_list_scroll::-webkit-scrollbar {display: none;}
.info_list_scroll_option {width: calc(100% - 5px); height: 80px; background-size: 100% 100%; margin: 5px; cursor: pointer; color: white; font-family: PiratesBay; text-align: center; position: relative;}
.info_list_scroll_option span {font-size: 30pt; position: absolute; top: calc(50% - 20pt); left: 0px; width: 100%;}


#info_rmnd {
    width: 100px; 
    transition: width ease-in-out 0.2s;
}
#info_rmnd:is([focus="true"]) {
    width: calc(100% - 465px);
}
#info_token_landing {
    position: absolute; 
    top: 0px; 
    left: 100px; 
    height: 220; 
    width: calc(100vw - 595px); 
    text-align: left; 
    overflow-wrap: break-word; 
    white-space: normal; 
    margin: 15px;
}
#info_token_dragbox {
    position: absolute; 
    top: 0px; 
    left: 100px; 
    height: 220; 
    width: calc(100vw - 595px); 
    text-align: left; 
    overflow-wrap: break-word; 
    white-space: normal; 
    margin: 15px;
}
.info_tokens {
    display:inline-block; 
    width: 100px; 
    height: 100px; 
    background-position: left; 
    background-repeat: no-repeat; 
    background-size: contain; 
    margin: 5px; 
    border-radius: 5px;
    position: relative;
    text-align: center;
}
.info_tokens_drag {

    position: relative;
    top: 0;
    object-fit: contain;

    height: 100px; 
    width: 100px; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-size: cover; 
    border-radius: 100%;
            
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center; /* Center text */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box; /* Include padding in width/height */
}
.reminder_ghost_text {
    font-family: Dumbledor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    line-height: 70%;
    color: black;
    pointer-events: none;
    width: 80%;
    /* Bounding box check */
    /* background-color: rgba(255, 0, 0, 0.2);
    border: 1px solid red; */
}


#info_powr {width: 100px; transition: width ease-in-out 0.2s;}
#info_powr:is([focus="true"]) {width: calc(100% - 465px);}
#power_options_container {position: absolute; top: 0px; left: 100px; height: 190px; width: calc(100vw - 625px); text-align: center; overflow-wrap: break-word; white-space: normal; margin: 30px;}
.info_name_input {height: 40px; width: 100%; color:black; font-size: 20pt; background-color: #afafaf;}
.info_power_options {display:inline-block; width: 80px; height: 80px; background-position: left; background-repeat: no-repeat; background-size: contain; margin: 5px; border-radius: 5px;}
#info_box:is([hidden="show"]) #info_visibility_toggle {background-image: url('assets/bluff.png');}
#info_box:is([hidden="bluff"]) #info_visibility_toggle {background-image: url('assets/visibility_off.png');}
#info_box:is([hidden="hide"]) #info_visibility_toggle {background-image: url('assets/visibility.png');}

#night_wedge_container {width: 300px; height: 300px; position: absolute; top: -210px; left: calc(50% - 150px);}
#night_wedge_rotate {width: 100%; height: 100%; transition: all 1s cubic-bezier(0.5, -0.3, 0.5, 1.3);}
#night_wedge_circle {width: 300px;height: 300px;border-radius: 100%;overflow: hidden;position: absolute;top: 0px;left: calc(50% - 150px);background-color: #060f18;}
.night_wedge_circle_bg {width: 300px;height: 150px;position: absolute;background-position: center;background-repeat: no-repeat;background-size: cover;transform: translateY(40px);}
#night_wedge_circle_day {background-image: url(assets/sky.png); top: 0px; transform: rotate(180deg);}
#night_wedge_circle_night {background-image: url(assets/night.png); bottom: 0px;}
#night_wedge_circle_border {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; background-image: url(assets/border2.png); background-position: center; background-repeat: no-repeat; background-size: contain;}
.night_wedge_back_wrapper {filter: drop-shadow(0px 0px 4px rgb(0, 0, 0)); position: absolute;}
.night_wedge_back {width: 40px; height: 40px; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); background-image: url('assets/background-img2.webp'); position: absolute; cursor: pointer;}
#night_wedge_day_back    {left: calc(50% + 123px);top: 60px;transform: rotate(180deg);}
#night_wedge_night_back {right: calc(50% + 123px); bottom: 60px;}
.night_wedge_text {position: absolute; text-align: right; pointer-events: none; font-family: PiratesBay; text-shadow: 0px 0px 4px black;}
#night_wedge_day_text  {top: -10px; left: -20px; transform: rotate(180deg);}
#night_wedge_night_text {bottom: -10px; right: -20px;}
.night_wedge_text_pre {display: inline-block; font-size: 20pt; color: rgb(152, 152, 152);}
.night_wedge_text_num {display: inline-block; font-size: 35pt; color: rgb(225, 225, 225);}
.drag {touch-action: none;}

.trashcan {position: absolute; bottom: 5px; left: 5px; width: 70px; height: 70px; opacity: 0.4; transition: opacity linear 0.1s; cursor: pointer; border-radius: 10px; background-image: url("assets/delete.png"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.trashcan:hover {opacity: 0.7;}

/* Properties of draggable tokens on the screen. */
.role_token {
    height: 150px; 
    width: 150px; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-size: cover; 
    left: 0px; 
    border-radius: 100%; 
    background-image: url(assets/alive_token.png); 
    pointer-events: all; 
    cursor: move;
}

.token_image {
    top: 0px;
    left: 7.5px;
    position: absolute;
    width: 135px;
    height: 135px;
    pointer-events: none;
}
#body_actual[night="true"] .token_image {
    display: none;
}

.token_role_name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
#body_actual[night="true"] .token_role_name {
    display: none;
}

.role_token[viability*="dead"] {
    background-image: url(assets/dead_token.png);
}
#body_actual[night="true"] .role_token:not([visibility="show"]) {
    display: none;
}

.token_death {
    width: 50px; 
    pointer-events: none; 
    position: absolute; 
    left: 50px; 
    top: 7px; 
    display: none;
}
#body_actual[night="false"] .role_token[viability*="dead"] .token_death {
    display: inherit;
}

.token_vote {
    width: 100px; 
    pointer-events: none; 
    position: absolute; 
    left: 25px; 
    top: 25px; 
    display: none;
}
#body_actual[night="true"] .role_token[viability="dead_vote"] .token_vote {
    display: inherit;
}

.token_visibility_pip {
    width: 35%; 
    height: 35%; 
    position: absolute; 
    right: 25px; 
    bottom: 25px; 
    pointer-events: none; 
    display: none;
}
.role_token[visibility="hide"] .token_visibility_pip {
    display: inherit; 
    background-image: url(assets/visibility_off_red.png);
}
.role_token[visibility="bluff"] .token_visibility_pip {
    display: inherit; 
    background-image: url(assets/visibility_off_yellow.png);
}

.token_outsider_betray {
    width: 80%; 
    height: 80%; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    pointer-events: none; 
    display: none;
}
#body_actual[night="true"] .token_outsider_betray {
    display: inherit;
}

#nightorder_button_container {position: absolute; top: 0px; right: 0px; width: 400px; height: 45px; display: inline-block; display: flex;}
.night_select {width: 100px; display: block; height: 41px; text-align: center; font-family: PiratesBay; font-size: 28pt; border: black 2px solid; background-image: url("assets/vines.png"); color: #afafaf; cursor: pointer; user-select: none;}
#nightorder_button_container[nightOrder="fabled"] #fabled_toggle {color: rgb(244, 244, 244);}
#nightorder_button_container[nightOrder="jinx"] #jinx_toggle {color: rgb(244, 244, 244);}
#nightorder_button_container[nightOrder="firstnight"] #first_night {color: rgb(244, 244, 244);} 
#nightorder_button_container[nightOrder="othernight"] #other_night {color: rgb(244, 244, 244);}

#night_order_landing_container {position: absolute; width: 520px; right: 0px; top: 45px; word-wrap: normal; text-align: right; height: calc(100% - 160px); pointer-events: none; overflow-y: scroll; scrollbar-width: none;}
#night_order_landing_container::-webkit-scrollbar {display: none;}
#night_order_tab_landing {width: 90px; position: absolute; right: 0px; pointer-events: all; display: flex; flex-flow: column; pointer-events: all;}
.night_order_tab {width: 90px; height: 90px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; border-bottom: 2px solid black; cursor: pointer; position:static; transform: translateX(0px); transition: all ease-in-out 0.2s; text-align: left; min-height: 90px; overflow: hidden;}
/*#night_order_landing_container:has(.night_order_tab:hover) {pointer-events: all;}  implemented in JS because touch >:| */
.night_order_img {width: 90px; height: 90px; display: inline; pointer-events: none; position: absolute; left: 0px; top: 0px;}
.night_order_span {width: 399px; height: calc(max-content + 10px); display: inline-block; transform: translateX(81px); padding: 10px; font-size: 15pt; font-family: PiratesBay; color: white; pointer-events: none;}
.night_order_fabled_token_container {display: flex; flex-direction: row; height: max-content; left: 90px; position: relative; width: 400; flex-wrap: wrap;}
.night_order_fabled_token_perm {height: 80px; width: 80px; background-image: url("assets/yellow_swirls.webp"); margin-right: 10px; margin-bottom: 10px; background-position: center; background-size: contain;}

.mutate_menu_main {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000000b7; display: none;}
.mutate_menu_scroll_body {display: inline-block; height: 100%; width: 70%; pointer-events: all; background-color: #000000b7; border-radius: 100px; padding: 50px; overflow-y: scroll; scrollbar-width: none;}
.mutate_menu_scroll_body::-webkit-scrollbar {display: none;}
.mutate_menu_token {
    display: inline-block; 
    height: 120px; 
    width: 120px; 
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
}
#menu_settings_dropdown{height: 40px; overflow: hidden; border-radius: 20px; transition: height ease-in-out 0.2s; background-color: #ffffff2c;}
/*#menu_settings_dropdown:is([expand="true"]) {height: 535px;}*/
#menu_settings_dropdown_button {width: 100%; height: 40px; position: relative; text-align: center; border-radius: 40px; background-image: url(assets/steel_bg.png); cursor: pointer; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;}
#menu_settings_dropdown_button::before {content: ""; width: 100%; height: 100%; border-radius: 20px; position: absolute; left: 0px; top: 0px; transition: background-color ease-in-out 0.2s; background-color: #00000000;}
#menu_settings_dropdown:is([expand="true"]) #menu_settings_dropdown_button::before {background-color: #66666692;}
#menu_settings_dropdown_button:hover:before {background-color: #0000004f;}
#menu_settings_dropdown_img{height: 100%; pointer-events: none; transition: transform ease-in-out 0.2s; display: inline-block;}
#menu_settings_dropdown:is([expand="true"]) #menu_settings_dropdown_img{transform: rotate(180deg);}
.menu_settings_dropdown_trio {height: calc(100% - 10px); width: calc(calc(100% / 3) - 10px); margin: 5px; border-radius: 15px; background-size: 70%; cursor: pointer;}
#menu_settings_dropdown_body {width: 90%; margin: 5%; height: min-content; text-align: center;}
#player_count {font-size: 40px; width: 80px; text-align: center; display: inline-block; position: static;}
#player_count_wrapper {position:relative;}
.player_count_increment { width: 51px; height: 51px; display: inline-block; position: relative; top: -6px; line-height: 2; cursor: pointer; user-select: none;}
#player_count::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
#script_upload_label {color: white; background-color: rgb(45, 146, 75); padding: 10px; border-radius: 10px; cursor: pointer;}
#script_gen_html_label {color: white; background-color: rgb(45, 146, 75); padding: 10px; border-radius: 10px; cursor: pointer;}
#script_upload_feedback {font-size: 20pt; color: white; height: 30px; font-weight: bold; font-family: PiratesBay;}
#script_upload_feedback:is([used="upload"]) {color: rgb(0, 63, 5); text-shadow: 0 0 3px white;}
#script_upload_feedback:is([used="select"]) {color: rgb(0, 36, 199); text-shadow: 0 0 1px white;}
#script_upload_feedback:is([used="error"]) {color: rgb(131, 0, 0); text-shadow: 0 0 3px white;}
.menu_settings_duo {border-radius: 25px; background-size: contain; cursor: pointer; margin: 5px;}
#source_link {color: white;}
#source_link:visited {color: white;}

#script_select_menu_container {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-image: url('assets/background-img2.webp');}
#script_select_menu_main_flex {display: flex; }

#background_select_menu {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(assets/background-img2.webp); display: none; text-align: center;}
.background_select_scroll_body {display: inline-flex; width: 70%; height: calc(100% - 100px); pointer-events: all; padding: 50px; overflow-y: scroll; scrollbar-width: none; display: inline-flex; flex-flow: wrap; justify-content: center;}
.background_select_scroll_body::-webkit-scrollbar {display: none;}

#playerinfo_close {position: absolute; top: 5px; right: 5px; width: 85px; height: 85px; opacity: 0.4; transition: opacity linear 0.1s; cursor: pointer; background-image: url("assets/close.png");}
#playerinfo_close:hover {opacity: 0.6;}
#playerinfo_character_landing {text-align: center; width: 100%; pointer-events: all;}
.playerinfo_character {
    position: relative;
    margin: 10px; 
    width: 350px; 
    height: 300px; 
    background-color: #44444494; 
    border-radius: 25px; 
    display: inline-block; 
    cursor: pointer; 
    background-image: url(assets/person_add.png); 
    background-position: center; 
    background-size: auto 80%; 
    background-repeat: no-repeat;
}
#playerinfo_input {height: 70px; width: 65%; font-size: 40pt; text-align: center;}
#playerinfo_body {pointer-events: none;}

.alignment_token {position: static; display: inline-block; margin: 5px; width: 75px; height: 75px;}

#body_actual[night="true"] #night_order_landing_container {display: none;}

.toggle_menu       {position: absolute; top: 5px; left: 5px; width: 70px; height: 70px; opacity: 0.4; transition: opacity linear 0.1s; background-color: lightslategrey; cursor: pointer; border-radius: 10px; background-image: url("assets/menu_open.png"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.toggle_menu:hover {opacity: 0.6;}
.close_menu        {position: absolute; top: 5px; right: 5px; width: 55px; height: 55px; opacity: 0.4; transition: opacity linear 0.1s; cursor: pointer; background-image: url("assets/close.png"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.close_menu:hover  {opacity: 0.6;}
.menu_main         {position: absolute; top: 0px; left: 0px; height: 100%; width: 300px; background-image: url('assets/background-img2.webp');transition: transform ease-in-out 0.2s;}
.menu_left         {position: absolute; left: 0px; top: 0px; width: 299px; height: 100%; border-right: 1px solid white; overflow: hidden;}
.menu_toggle       {position: absolute; right: 0px; top: 0px; width: 30px; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; cursor: pointer;}
.menu_title        {position: fixed; width: 280px; height: 70px; opacity: 1; background-image: url('assets/botc_logo.png'); background-position: center; background-repeat: no-repeat; background-size: contain; margin: 10px;}
.menu_body         {position: fixed; width: 280px; height: calc(100% - 110px); padding: 10px; top: 90px; overflow-y: scroll; display: block; font-size: 25px; scrollbar-width: none;}
.menu_body::-webkit-scrollbar {display: none;}
.menu_list         {position: absolute; font-size: 20px; color: white; cursor: pointer;}
.menu_list_div     {position: relative; cursor: pointer; font-size: 20px; width: 100%; padding-top: 10px;}
.menu_token_count  {position: absolute; right: 10px; height: 20px; color: white;}
.menu_header       {width: 263px; text-align: center; font-size: 40pt; text-shadow: 0 0 3px rgb(255, 255, 255)}
.menu_ratio        {width: 100%; text-align: center; color: white; font-size: 15pt;}