/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies&family=Ubuntu+Mono:wght@400;700&display=swap');

/* @font-face kit by Fonts2u (https://fonts2u.com) */
/* From https://fonts2u.com/minecraft-regular.font */
@font-face {
    font-family: "Minecraft Regular";
    src: url("./assets/fonts/1_Minecraft-Regular.eot?") format("eot"),
         url("./assets/fonts/1_Minecraft-Regular.woff") format("woff"),
         url("./assets/fonts/1_Minecraft-Regular.ttf") format("truetype"),
         url("./assets/fonts/1_Minecraft-Regular.svg#Minecraft-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Variables */
:root {
    /* Text */
    --text: white;
    --secondary-text: #c4c4c4;
    --text-inverted: black;
    --link: rgb(137, 184, 255);

    /* Font */
    --font: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    --font-click: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    --font-button: Arial, Helvetica, sans-serif;
    --font-x: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    /* Button */
    --button-color:     white;
    --button-bg:        transparent;

    /* Backgrounds */
    --bg:               #242222;
    --bg-lighter:       #312e2e;
    --bg-popup:         #353535;
    --bg-darker:        #1f1d1d;
    --border-color:     #4b4747;
    /* --main-shop-hover:  #222020; */
    
    /* Semi-transparent */
    --classic-tooltip-bg:rgba(0, 0, 0, 0.8);
    --locked-bg:         rgba(0, 0, 0, 0.15);
    --backdrop-color:    rgba(0, 0, 0, 0.5);

    /* Tri-pane colors */
    --alt-bg:           #4e3f34;
    --alt-bg-darker:    #42362d;
    --alt-bg-darkest:   #352a22;
    --alt-bg-lighter:   #635145;

    /* Misc */
    --progress-light:   lightgreen;
    --progress-dark:    rgb(75, 192, 75);
    --gray:             gray;
    --color-cash:       goldenrod;
    --generic-blue:     #518ed4;
    --golden-carrot:    #fae100;
    --warning-red:      rgb(255, 65, 65);

    /* --one: #cd72da;
    --two: #fffd89;
    --three: white;
    --four: white; */
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 16px;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: var(--bg);
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--border-color);
    /* Fake margins from https://stackoverflow.com/a/45420691/11039898 */
    box-shadow: inset 0 0 10px 10px var(--border-color);
    border: 3px solid var(--bg);
}

/* Universal */
* {box-sizing: border-box;}
body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);

    margin: 0;
    padding: 0;
}

p {margin: 0;}
a {color: var(--link);}
a:hover {filter: brightness(120%);}
h2, h3 { margin: 0; }
h4 { margin: 10px 0 0 0; }
hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
}
img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: manipulation;
    image-rendering: pixelated;
    object-fit: cover;
}

/* Shorthand classes */
.flex {display: flex;}
.flex_1 {flex: 1;}
.justify_center {justify-content: center;}
.half_width {width: 50% !important;}
.full_width {width: 100% !important;}
.overflow_hidden {overflow: hidden !important;}
.center { text-align: center; }
.bold { font-weight: bold; }
.unbold { font-weight: unset; }
.underline { text-decoration: underline !important; }
.bright_200 { filter: brightness(200%); }
.no_border { border: none !important; }
.render_pixelated { image-rendering: pixelated !important; }
.opacity0 {opacity: 0 !important;}
.position_absolute { position: absolute !important; }
.position_unset { position: unset !important; }
.transition_none { transition: none !important; }
.pointer {cursor: pointer;}

.anchor_offset {
    display: block;
    position: relative;
    top: -96px;
    visibility: hidden;
}

/* Hide/unhide */
.hidden { visibility: hidden !important; }
.visible { visibility: visible !important; }
.remove {
    visibility: hidden !important;
    position: absolute !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
}
.remove:not(.unremove) .achieve_grid .achievement_item { opacity: 0; }
.unremove {
    visibility: inherit !important;
    position: unset !important;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: initial !important;
}

/* Show menus */
#overlay.show_dialog #dialog,
#overlay.show_theme #theme_menu,
#overlay.show_cosmetic #cosmetic_menu,
#overlay.show_prestige #prestige_menu,
/* #overlay.show_inventory #inventory_menu, */
#overlay.show_tips #tips_menu,
#overlay.show_keybinds #keybinds_menu,
#overlay.show_credits #credits
{ display: unset !important; }

/* Container */
#container {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 80px;
    min-height: 738px;
}

/* Input */
button {
    font-family: var(--font-button);
    background-color: var(--button-bg);
    color: var(--button-color);
    border: 2px solid var(--button-color);
    margin: 4px 0;

    font-weight: bold;
    font-size: 11pt;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;

    transition-property: transform, background-color, color;
    transition-duration: 0.25s;

    vertical-align: middle;
    outline: none;
}
button:hover,
button:focus-visible {
    color: var(--text-inverted);
    background-color: var(--button-color);

    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
button[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}
button[disabled]:hover,
button:focus-visible[disabled] {
    background-color: var(--button-bg);
    transform: none;
}
button:focus-visible[disabled] { outline: 1px solid -webkit-focus-ring-color; }

/* Button icon */
.button_icon {
    transform: translateY(2px);
    width: 15px;
    display: inline-block;
    image-rendering: unset;
}
button:hover:not(.tab) .button_icon:not(.invert),
button:focus-visible:not(.tab) .button_icon:not(.invert) { filter: invert() !important; }
button[disabled]:hover img { filter: none !important; }

/* Button colors */
.button_gold { --button-color: var(--golden-carrot); }
.button_red { --button-color: var(--warning-red); }
.button_orange { --button-color: orangered; }
.button_red:hover,
.button_red:focus-visible,
.button_orange:hover,
.button_orange:focus-visible { color: var(--text); }

/* Inputs */
input:not(input[type='checkbox']),
select {
    padding: 6px 10px;
    border-radius: 30px;
    border: none;
    font-size: 11pt;

    width: 100%;
    max-width: 240px;
}
select { cursor: pointer; }
textarea { border-radius: 4px; }

/* Fancy toggle */
/* fancy toggle goes here */
.link_styling {
    text-decoration: none;
    cursor: pointer;
}
.link_styling:hover {
    text-decoration: underline;
    color: var(--text);
}
.stat_collapse { margin-left: 22px; }
details[open] { margin-bottom: 12px; }
summary {
    cursor: pointer;
    padding: 4px;
    margin-left: -22px;
}
summary:hover { background-color: var(--border-color); }
.popup_box {
    background: var(--bg-popup);
    border: 1px solid var(--border-color);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);

    padding: 20px;
    border-radius: 12px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: none;
}

/* Text Colors */
.secondary_text { color: var(--secondary-text); }
.white {color: var(--text) !important;}
.golden {color: var(--golden-carrot) !important;}
.color_red {color: var(--warning-red) !important;}
.color_cash { color: var(--color-cash); }

/* Background Colors (Toasts Usually) */
.background_error { border-color: var(--warning-red) !important; }
.background_white {
    background: white !important;
    border: 4px solid rgb(92, 92, 92) !important;
    color: black;
}
.background_red   { background: var(--warning-red) !important; }
.background_orange{ background: rgb(184, 94, 20) !important;     }
.background_gold {
    background: rgb(197, 145, 15) !important;
    border: 2px solid var(--golden-carrot) !important;
}
.background_green { background: rgb(113, 153, 80) !important; }
.background_cyan  { background: rgb(64, 111, 114) !important; }
.background_blue  { background: rgb(53, 72, 136) !important; }
.background_purple{ background: rgb(87, 61, 117) !important; }
.background_brown, .background_dirt { background: rgb(78, 63, 52) !important; }
/* Special Backgrounds */
.background_dirt { background-image: url(./assets/Dirt-Background.jpg) !important; }
.background_rgb {
    background: black !important;
    background: linear-gradient(110deg, rgba(190,0,0,1) 0%, rgba(144,70,0,1) 15%, rgba(149,145,0,1) 30%, rgba(18,149,0,1) 45%, rgba(0,132,140,1) 60%, rgba(0,17,139,1) 75%, rgba(70,0,124,1) 87%, rgba(140,35,124,1) 100%) !important;
}
.background_red,
.background_orange,
.background_green,
.background_cyan,
.background_blue,
.background_purple { border: 2px solid white !important; }


/* Ads */
.center_ad {
    margin: 0 auto;
    width: min-content;
    margin-top: 6px;
}
ins.adsbygoogle {
    background-color: var(--bg-darker);
}


/* Always on top elements */
#bonusVisualArea,
#mouse_confetti {
    position: absolute;
    min-height: 100vh; width: 100%;
    top: 0; right: 0; left: 0;
    z-index: 300 !important;
    pointer-events: none !important;
    overflow: hidden;
}
.small_confetti {
    background-color: var(--text);
    position: absolute;
    transition: transform 200ms ease-out;
    pointer-events: none !important;
}
/* Animated tools */
/* #mouse_confetti img  {
    position: absolute;
    width: 45px;
    height: 45px;
    transition-property: transform, height, width;
    transition-duration: 0.5s;
    transition-timing-function: ease;
} */

/* Screenshake */
/* .screen_shake {
    animation: screen_shake 0.8s infinite ease;
    overflow-x: hidden;
}
.screen_shake .status_bar { transform: translateY(-80px); }
@keyframes screen_shake {
    0%   {transform: translate(0px, 0px);    }
    1%   {transform: translate(14px, 1px) ;  }
    10%  {transform: translate(-8px, -2px);  }
    20%  {transform: translate(9px, 4px);    }
    30%  {transform: translate(-4px, -5px) ; }
    40%  {transform: translate(6px, -2px);   }
    50%  {transform: translate(-6px, 1px);   }
    60%  {transform: translate(4px, 7px) ;   }
    70%  {transform: translate(-2px, -2px);  }
    80%  {transform: translate(3px, 4px);    }
    100% {transform: translate(0px, 0px);    }
} */


/* Dialog Popup */
#overlay {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    visibility: hidden;
    backdrop-filter: blur(30px) saturate(20%);
}
#backdrop {
    height: 100vh;
    width: 100%;
    background: var(--backdrop-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 190;
}
#dialog { width: 420px; }
/* .dialog_animate { animation: dialog 0.25s ease-out; }
@keyframes dialog { from {transform: translate(-50%, calc(-50% + 20px));} } */
#dialog button { width: 49%; }
#dialog h2, #dialog p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

/* Toasts */
#toast_container {
    margin-bottom: 0px;
    padding-top: 20px;
    padding-left: 2px;
    max-height: 100vh;

    position: fixed;
    z-index: 300;
    bottom: 0; right: 0;

    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
}
.toast, #toasts_clear {
    background: var(--bg-popup);
    border: 1px solid var(--gray);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);

    width: 100%;
    max-width: 300px;
    max-height: 400px;
    margin: 0 16px 8px auto;
    padding: 10px 16px;
    border-radius: 8px;

    position: relative;
    word-break: break-word;
    animation: toast 0.4s;
    pointer-events: initial;
}
#toasts_clear {
    cursor: pointer;
    padding: 6px 24px;
    width: 112px;
    margin-left: auto;
    border-radius: 100px;

    visibility: hidden;
    transition: filter 0.1s;
}
#toasts_clear:hover {
    filter: brightness(125%);
    text-decoration: underline;
}
.toast_out {
    animation: toast_out 0.25s forwards !important;
    pointer-events: none;
}
@keyframes toast { from {transform: translateY(20px); opacity: 0;} }
@keyframes toast_out { to {transform: translateY(-20px); opacity: 0;} }

/* Toast button */
.toast button { width: 100%; }
.main_bg_color { background-color: var(--bg); }
.toast_close {
    font-family: var(--font-x);
    padding: 10px;
    margin: 4px 4px 0 0;
    position: absolute;
    top: 0; right: 0;
    cursor: pointer;
    z-index: 10;
}
.toast_close:hover {
    color: var(--text);
    text-shadow: 0px 2px 5px rgba(255, 255, 255, 0.5);
}
.dialog_close {
    font-size: 24pt;
    position: static;
    margin: 0;
    padding: 0;
    width: 48px;
    padding-left: 14px;
    border-left: 1px solid var(--bg-darker);

}
.dialog_close:hover { filter: brightness(125%); }
.toast h3, .toast p {
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
}

/* Achievement toast */
.toast.achievement_item {
    width: 300px;
    padding: 0;
    padding-right: 24px; 
    border-color: goldenrod;
    border-radius: 10px !important;
    margin-bottom: 16px;
}
.toast.achievement_item h3 {
    font-size: 16pt !important;
    padding-top: 2px;
}
.toast.achievement_item .rewards_list { width: 100%; }
.toast.achievement_item .reward:not(:last-of-type) { border-bottom: 1px solid var(--alt-bg-darkest); }

/* Theme/cosmetic switcher tab bar */
.switcher_bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
.switcher_bar .tab {
    margin: 0;
    width: calc(50% - 24px);
    border-radius: 0;
    border: none;
    padding: 12px;
}
.switcher_bar .tab:hover {
    background-color: initial;
    color: var(--text);
    filter: brightness(125%);
}
.switcher_bar .tab:not(.activetab) {
    background-color: var(--bg);
    color: var(--gray);
}

/* Fancy Theme Switcher */
.fancy_switcher {
    width: 655px;
    max-width: 100%;
    height: 95%;
    overflow: hidden;

    padding: 0;
    padding-top: 48px;
    z-index: 200;
}
.fancy_list {
    overflow: auto;
    height: 100%;
    max-height: 77vh;
    padding: 8px 24px 24px;
}
h1.theme_menu_title {
    margin-top: 40px;
    margin-bottom: 10px;
    padding-left: 24px;
}
p.theme_menu_title {
    margin-bottom: 12px;
    padding-left: 24px;
}
.theme_preview {
    height: 80px;
    width: 80px;
    padding: 10px;
    image-rendering: pixelated;
}
.fancy_switcher h1 { margin: 4px 0 10px 0; }
.theme_item h3 {
    margin: 0;
    margin-top: 16px;
    padding-bottom: 4px;
}
.theme_item p { padding-bottom: 10px; }
.theme_menu p { margin: 0; }
.theme_item {
    border: 1px solid transparent;
    width: 100%;
    border-radius: 10px;
    background-color: var(--bg-darker);
    margin-bottom: 10px;
    padding-right: 84px; /* Leave room for checkbox */

    position: relative;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.theme_selected {
    outline: 2px solid var(--generic-blue);
    background-color: var(--bg);
}

/* Tooltips */
.tooltip_area:hover,
.tooltip_area:focus,
.tooltip_area:focus-visible,
.tooltip_area:focus-within { z-index: 3; }

.theme_item:hover,
.theme_item:focus,
.theme_item:focus-within,
.shop_item:hover,
.shop_item:focus,
.shop_item:focus-within,
.tooltip_area:hover .shop_item,
.tooltip_area:focus .shop_item,
.tooltip_area:focus-within .shop_item,
.shop_nav_item:hover,
.shop_nav_item:focus-visible {
    filter: brightness(110%);
    outline: 2px solid white;
    z-index: 3;
}
.theme_item:active, .tooltip_area:active .shop_item {
    filter: brightness(80%);
    outline: 2px solid white;
}

#themes_list .theme_preview { border-radius: 24px; }
.theme_checkbox {
    width: 60px;
    height: 60px;
    border: 2px solid var(--border-color);
    
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}
.theme_checkmark {
    width: 60px;
    height: 60px;
    padding: 10px;
}
body:not(.theme_light) .theme_checkmark { filter: invert(); }
#cosmetics_list { padding-bottom: 100px; }
#cosmetics_list details { box-shadow: inset 0 -4px 4px -4px var(--classic-tooltip-bg); }

/* Cosmetics Grid */
.cosmetics_grid {
    display: flex;
    flex-wrap: wrap;
}
/* dumb way to hide bundle checkmarks */
#bundle_cosmetics .theme_checkbox { visibility: hidden; }
.cosmetics_grid .theme_item {
    width: 80px;
    height: 80px;
    margin-right: 4px;
    display: unset;
    padding: 0; 
}
/* Checkbox */
.cosmetics_grid .theme_item .theme_checkbox {
    position: absolute;
    right: -8px;
    transform: translateY(-5px) scale(0.5, 0.5);
    background-color: var(--bg-darker);
}
.cosmetics_grid .theme_item.achievement_locked .theme_checkbox { visibility: hidden; }
/* Grid description */
.cosmetics_grid .theme_item .description {
    background-color: var(--classic-tooltip-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    opacity: 0;

    position: absolute;
    left: -3px;
    top: 105%;
    min-width: 280px;
    padding: 12px 16px;

    transition: opacity 0.2s;
    pointer-events: none;
    visibility: hidden;
}
.cosmetics_grid .theme_item.desc_fit .description { left: unset; right: -3px; }
.cosmetics_grid .theme_item .description h3 { margin-top: 0; margin-bottom: 2px; }

/* Hover */
.cosmetics_grid .theme_item:hover .description {
    visibility: visible;
    opacity: 1;
}


/* Keybinds */
#keybinds_menu {
    width: 800px;
    height: 95%;
    max-height: 800px;
    padding: 24px;
    overflow: auto;
}
#key_reset {
    position: absolute;
    top: 28px;
    right: 64px;
}
.generic_close {
    font-size: 24pt;
    top: 12px;
    right: 12px;
}
.key_column { margin-right: 16px; }
.key_column:last-of-type { margin-right: 0; }

/* Cosmetic category */
.fancy_switcher summary {
    transform: translateX(20px);
    padding-bottom: 8px;
    font-size: 14pt;
    font-weight: bolder;
}
.fancy_switcher details:not([open]) summary { color: var(--secondary-text); }

/* Number Popup */
.clickvisual {
    --text-outline: black;
    font-size: 24pt;
    font-family: var(--font-click);
    color: white;
    text-shadow: -1px -1px 0 var(--text-outline), 1px -1px 0 var(--text-outline), -1px 1px 0 var(--text-outline), 1px 1px 0 var(--text-outline);

    transform: translateX(-50%);
    position: absolute;
    z-index: 49;
    top: 0;
    left: 0;

    animation: clickBonus 1.25s linear forwards;
}
@keyframes clickBonus {
    0%   { transform: translateY(-20px) translateX(-60%); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-90px) translateX(-60%); }
}
.clickvisual_falling {
    font-size: 28pt;
    z-index: 100;
    animation: anim_falling_popup 1.25s linear, clickBonus 1.25s linear forwards;
    filter: drop-shadow(0px 0px 4px rgb(255, 234, 190)) drop-shadow(0px 0px 8px black);
}
.clickvisual_cash {
    font-size: 28pt;
    z-index: 101;
    color: var(--color-cash);
    filter: drop-shadow(0px 0px 8px black);
}
.clickvisual_boost {
    /* --text-outline: rgb(47, 15, 78); */
    font-size: 18pt;
    filter: drop-shadow(0px 0px 10px rgba(196, 185, 255, 0.8)) drop-shadow(0px 0px 8px black);
}
@keyframes anim_falling_popup {
    0% { color: rgb(255, 255, 255); }
    20% { color: rgb(120, 127, 141); }
    40% { color: rgb(255, 255, 255); }
    100% { color: rgb(120, 127, 141); }
}

/* Hardmode */
.clickvisual_negative {
    color: var(--warning-red) !important;
    animation: clickBonusNegative 1.25s linear forwards;
}
@keyframes clickBonusNegative {
    0% { transform: translateY(-20px) translateX(-60%); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translateY(30px) translateX(-60%); }
}

/* Falling carrots */
.falling_carrot {
    width: 64px;
    height: 64px;
    padding: 12px 10px;
    box-sizing: unset;

    position: absolute;
    top: -72px;
    z-index: 98;

    filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    animation: falling_carrot 2.5s ease-in forwards;
}
@keyframes falling_carrot { to {transform: translateY(790px)} }
.falling_carrot.mirror:not(.falling_boost) {
    animation: falling_carrot_mirror 2.5s ease-in forwards;
    filter: drop-shadow(-8px 8px 4px rgba(0, 0, 0, 0.5)) !important;
}
@keyframes falling_carrot_mirror {
    0% { transform: scaleX(-1); }
    100% { transform: scaleX(-1) translateY(790px); }
}
.falling_boost {
    animation: falling_carrot 6s cubic-bezier(0.7, 0.8, 0.1, 0.2) forwards;
}


/* Status Bar */
.status_bar {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99 !important;
    pointer-events: none;
}
.status_bar * { pointer-events: all; }
#main_icon {
    height: 32px;
    width: 32px;
    position: absolute;
    transform: translate(-38px, -6px);
}
.basic_info {
    background-color: var(--bg-lighter);
    border-bottom: 1px solid var(--border-color);

    width: 100%;
    padding: 8px 20px;
    padding-right: 50px;
    padding-left: 50px;

    position: relative;
    z-index: 99;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Game Nav */
body.hide_nav #game_nav { display: none; }
#game_nav {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;

    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);

    text-align: center;
    justify-content: center;
}
#game_nav > a { text-decoration: none; }
#game_nav > a > figure {
    min-width: 70px !important;
    padding: 1px 4px 5px;
    margin: 0;
    opacity: 0.7;
    cursor: pointer;
}
#game_nav > a > figure:hover { opacity: 1; background-color: var(--bg-lighter); }
#game_nav > a:not(a:last-of-type) > figure { border-right: 1px solid var(--border-color); }
#game_nav > a > figure > img {
    box-sizing: unset;
    width: 32px;
    height: 32px;
    padding: 8px 12px 2px;
}
#game_nav > a > figure > figcaption { margin-bottom: 4px; margin-top: -2px; color: var(--text); font-size: 10pt; }

/* Hover info */
.question_mark {
    color: var(--gray);
    font-weight: bolder;
    font-size: 10pt;
    cursor: help;
    padding: 6px;
    position: inherit;
}

/* Dropdown */
#info_dropdown {
    cursor: pointer;
    padding: 10px 12px 0 12px;
    height: 100%;
    border-left: 1px solid var(--border-color);

    position: absolute;
    top: 0;
    right: 0;
}
#info_dropdown:hover,
#info_dropdown:active,
#info_dropdown:focus { background-color: var(--border-color); }
#info_dropdown:focus { pointer-events: none; }
#info_dropdown svg { max-height: 36px; }
#info_dropdown .flex .menu_item { width: 119px; }
.hover_menu {
    position: absolute;
    z-index: -1;
    top: calc(100% - 1px);
    right: 0;

    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-top: none;

    min-width: 240px;

    transition-property: transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;

    pointer-events: none;
    transform: translateY(-20px);
    opacity: 0;
}
.hover_menu * { pointer-events: none; }
/*#info_dropdown:hover .hover_menu,
#info_dropdown:active .hover_menu,*/
#info_dropdown:focus .hover_menu,
.hover_menu:hover,
.hover_menu:active,
.hover_menu:focus,
.hover_menu:focus-within {
    pointer-events: all;
    transform: translateY(0px);
    opacity: 1;
}
#info_dropdown:focus .hover_menu *,
.hover_menu:hover *,
.hover_menu:active *,
.hover_menu:focus *,
.hover_menu:focus-within * {
    pointer-events: all;
}
.menu_item {
    padding: 8px 12px 8px 36px;
    position: relative;
    text-align: left;
}
.hover_menu { box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.2); }
.hover_menu a { text-decoration: none; }
.menu_item:hover {background-color: var(--border-color);}
.dropdown_img {
    image-rendering: unset;
    position: absolute;
    left: 9px;
    top: 9px;
    opacity: 0.6;
    width: 18px;
}
.menu_item:hover .dropdown_img { opacity: 1; }

.right_img {
    left: unset;
    right: 8px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
}
.invert {filter: invert();}
.invert_alt { filter: none; }

.status_progress_bar {
    width: 100%;
    max-width: 400px;

    background-color: var(--bg-lighter);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 10px 10px;

    margin: 0 auto;
    position: relative;
    z-index: 98;

    visibility: hidden;
}
.status_tidbit_in {
    visibility: visible !important;
    animation: main_progress_bar 0.25s forwards ease-out;
}
@keyframes main_progress_bar {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}
.main_progress_image {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 24px;
}
.status_progress {
    height: 10px;
    width: calc(100% - 24px);
    margin-left: auto;
    background-color: var(--bg-darker);
    border-radius: 10px;
    overflow: hidden;
}
#Tip { margin-left: auto; /* white-space: pre; */ }

/* Main */

/* Mini stats */
.mini_stats {
    color: var(--secondary-text);
    padding: 0 24px 12px;
    position: relative;
}
/* .mini_stats .row { justify-content: center; } */
.mini_stats p { text-align: center; }
.mini_stats .mini_item {
    width: 100%;
    min-height: 29px;
    padding: 4px 8px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 6px;

    background-color: var(--bg-lighter);
    box-shadow: 0px 4px 12px rgb(0 0 0 / 20%);
    transition-property: color, border-color;
    transition-duration: 0.1s;
}
.mini_stats .mini_item:hover {
    color: var(--text);
    border-color: var(--border-color);
}
.mini_stats .mini_item:not(:last-child) { margin-right: 6px; }
.mini_stats .mini_item img {
    opacity: 0.8;
    vertical-align: text-bottom;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}
.mini_stats .mini_item:hover img { opacity: 1; }
.mini_stats .mini_item .mini_number {
    color: var(--text);
    float: right;
}
.mini_stats .Carrot_Count {
    color: var(--text);
    font-size: 20pt;
    text-align: center;
}

/* Left section */
#game_section {
    max-width: 388px;
    margin-right: 20px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3) inset;
    border-radius: 24px;
    height: fit-content;

    position: relative;
    overflow: hidden;
    background-color: var(--bg-darker);
}
.flash_cash { animation: flash_cash 2s ease-in; }
@keyframes flash_cash {
    from {
        color: var(--color-cash);
        border-color: var(--color-cash);
        filter: drop-shadow(0 0 2px var(--color-cash));
    }
}
.flash_white { animation: flash_white 4s ease-in; }
@keyframes flash_white {
    from { 
        color: white;
        border-color: white;
        filter: drop-shadow(0 0 2px white);
    }
}

/* Carrot */
#main_carrot {
    margin: 15px;
    width: 358px;
    height: auto;
    padding: 20px;
    z-index: 0;

    cursor: pointer;
    filter: drop-shadow(12px 12px 5px rgba(0, 0, 0, 0.3));
    image-rendering: unset;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;

    /* Click animation */
    transition-property: transform, filter;
    transition-duration: 0.07s;
    transition-timing-function: linear;
}
#main_carrot:active {
    transform: scale(0.96,0.96);
    filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.3))
            brightness(85%)
            saturate(110%);
}

/* Lower game section */
/* .home_lower {
    position: relative;
}
.game_panel {
    position: absolute;
    inset: 9px;
    top: 0;
    z-index: 1;

    padding: 12px 24px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 17px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.35);

    animation: game_panel 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes game_panel {
    from {
        transform: translateY(16px);
        filter: brightness(50%) opacity(0);
    }
}
.game_panel .toast_close {
    font-weight: 900;
} */

/* Main buttons */
.main_buttons { justify-content: center; }
.main_button_item {
    width: 45px;
    height: 45px;
    padding: 0;
}
.main_button_item:not(:last-of-type) {
    margin-right: 8px;
}
.main_button_img {
    width: 26px;
    height: 26px;
    transform: translateY(1px);
    transition: filter 0.25s ;
}
.main_button_item:hover .main_button_img { filter: invert(); }

/* Glowing button */
.main_button_item.glowing {
    box-shadow: 0 0 8px rgba(255, 249, 169, 0.05);
    animation: glowing 3s infinite alternate linear;
}
.main_button_item.glowing img {
    animation: bobbing 2s infinite alternate ease-in;
}
@keyframes bobbing {
    from { transform: translateY(-1px); }
    to   { transform: translateY(2px); }
}
/* Prestige */
#prestige-section {
    padding-bottom: 20px;
    visibility: hidden;

    justify-content: center;
}
.characterbox.glowing {
    filter: drop-shadow(0 0 4px rgba(255, 229, 145, 0.6));
}


/* Right section */
.character_column p {
    max-width: 356px;
}

/* Characters */
.box {
    background: var(--bg-lighter);
    border: 3px solid var(--bg-lighter);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 10px;

    width: 362px;
    max-width: 100%;
    margin: 0px;
    margin-bottom: 8px;
    margin-right: 10px;

    position: relative;
    z-index: 10;

    outline: transparent;
    transition-property: box-shadow, border, background-color, outline;
    transition-duration: 0.15s;

    transform: perspective(800px);
}
.character_name { color: var(--text); }
.characterbox:hover .character_name { text-decoration: underline; }
.characterbox.char_anim:not(.show_info) { animation: char_unlock 0.5s ease; }
@keyframes char_unlock {
    from {
        opacity: 0;
        transform: translateY(-10px) rotateX(490deg);
    }
}
.bottom {
    padding-top: 2px;
    background: var(--bg);
    border-end-start-radius: 10px;
    border-end-end-radius: 10px;
}

/* Powers */
#powers_container {
    font-size: 12pt;
    user-select: none;
    -webkit-user-select: none;
}
#powers_container:hover {
    z-index: 11;
}
#boosts {
    flex-wrap: wrap;
}
.power_item {
    background-color: var(--bg);
    box-shadow: 0 0 12px rgb(0 0 0 / 30%) inset;
    text-align: center;
    width: max-content;

    padding: 4px 8px;
    border-radius: 8px;

    display: inline-block;
}
.power_item:hover,
.power_item:focus-visible {
    box-shadow: none;
    z-index: 1;
}
.power_item:not(#multibuy) { padding-left: 32px; }
.power_item:not(:last-of-type) { margin-right: 5px; }
.power_item img {
    width: 24px;
    height: 24px;
    position: absolute;
    transform: translate(-28px, -3px);

    cursor: pointer;
}
.power_item .shop_tooltip {
    width: max-content;
    text-align: left;
}
.power_item:hover img,
.power_item:focus-visible img {
    content: url('./assets/icons/close_x.png');
}
.boost_multiplier {
    padding-right: 7px;
    margin-right: 2px;
    border-right: 1px solid var(--border-color);
}
#multibuy { min-width: 54px; }
#powers_container .mb_vr {
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid var(--bg-darker);
}

/* Character bio */
.characterbox:hover,
.characterbox:focus-visible,
.characterbox.show_info {
    outline: 1px solid #4b4747;
    z-index: 11;
}
.characterbox.show_info {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-362px, -50%);
    z-index: 201;
}
.characterbox.show_info .shop_bottom:not(#charles_shop) {
    height: 560px;
    max-height: calc(100vh - 100px);
}
.characterbox .char_info {
    width: 100%;
    max-width: 362px;
    height: fit-content;
    min-height: 100%;
    
    padding: 12px 24px;
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 5px 5px 0;

    position: absolute;
    left: calc(100% + 0px);
    opacity: 1;
    transition: opacity 0.2s ease;
}
.characterbox:not(.show_info) .char_info {
    visibility: hidden;  opacity: 0;
    left: 0;             top: 0;
    width: 0;            height: 0;
}
.characterbox .char_info button {
    width: calc(100% - 48px);
    position: absolute;
    bottom: 12px;
}
.char_mini_button {
    width: 16px;
    filter: invert() opacity(80%);
    cursor: pointer;

    opacity: 0.5;

    position: absolute;
    transition: opacity 0.05s ease;
}
.char_custom_button {
    top: 4px;
    right: 30px;
}
.char_info_button {
    top: 4px;
    right: 8px;
    transform-origin: center;
    transition:  opacity, transform 0.15s ease;
}
.char_mini_button:hover,
.characterbox.show_info .char_mini_button {
    opacity: 1;
}
.characterbox:hover .char_mini_button,
.characterbox:focus-within .char_mini_button,
#game_section:hover .char_mini_button {
    opacity: 1;
}

/* Character info */
.characterdesc {
    color: var(--secondary-text);
    margin-left: 4px;
}
.characterimg {
    height: 64px;
    width: 64px;
    image-rendering: pixelated;
    border-top-left-radius: 9px;

    cursor: pointer;
}
/* Tools/upgrades */
.tool { position: relative; }
.tool .tool_count {
    position: absolute;
    bottom: 0; right: 0;
}

.levelupimg, .toolicon {
    transition-property: transform, filter;
    transition-duration: 0.25s;
    cursor: pointer;
    z-index: 1;
}
.levelupimg {
    margin-bottom: -6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.toolicon {
    height: 32px;
    width: auto;
}
.toolicon:hover:not(.no_craft),
.levelupimg:hover {
    transform: scale(1.2, 1.2);
    filter: brightness(150%);
}
.toolicon:active:not(.no_craft),
.levelupimg:active {
    transform: scale(0.9, 0.9);
    filter: brightness(70%);
}
.toolnumber {
    --tool-border: var(--text-inverted);

    color: var(--text);
    display: inline-block;
    position: absolute;
    z-index: 1;
    transform: translateX(17px) translateY(20px);

    font-size: 10pt;
    text-shadow: 0 0 4px var(--tool-border),
                 1px 1px 0 var(--tool-border),
                 -1px 1px 0 var(--tool-border),
                 1px -1px 0 var(--tool-border),
                 -1px -1px 0 var(--tool-border);
    pointer-events: none;
}
.toolnumber.toolfull {
    color: var(--secondary-text);
    opacity: 0.8;
}

/* Lock character */
.char_locked {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

/* body:not(.c_bill) .bill_related, */
body:not(.c_belle) .belle_related,
body:not(.c_greg) .greg_related,
body:not(.c_charles) .charles_related,
body:not(.c_carl) .carl_related,
body:not(.c_jared) .jared_related,
body:not(.t_mp3) .music_related/*,
body:not(.gp) #golden_carrot_count*/ {
    display: none;
}

/* Make cosmetics menu appear to be locked */
.cosmetic_padlock { opacity: 0.4; }
body:not(.c_carl) .cosmetic_related { color: var(--gray); border-color: var(--gray); background-color: var(--locked-bg); }
body:not(.c_carl) .cosmetic_related .dropdown_img:not(.cosmetic_padlock),
body:not(.c_carl) .cosmetic_related .button_icon:not(.cosmetic_padlock) { display: none; }
body:not(.c_carl) .cosmetic_related .new_indicator { display: none; }
body.c_carl .cosmetic_padlock { display: none; }
body:not(.c_carl) .char_custom_button {
    content: url(./assets/icons/padlock.svg);
    opacity: 0.5 !important;
}

/* Greg */
.Greg .toolicon {
    height: 48px;
    width: 48px;
    margin-bottom: 20px;
    margin-right: -1px;
}
.Greg .toolnumber {
    font-size: 13pt;
    transform: translateX(28px) translateY(26px);
}
#greg_crafting_info {
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    position: absolute;
    top: 105px;
    left: 3px;
    width: 44px;
    height: 26px;
}
#greg_crafting_info.inactive .greg_spinny {
    visibility: hidden;
}
#greg_crafting_info.inactive #greg_progress_image {
    transform: translateX(8px);
    filter: brightness(0%);
    opacity: 0.4;
}
#greg_progress_image {
    width: 20px;
    transform: translateX(-1px);
}
.greg_spinny {
    width: 16px;
    transform: translate(24px, 6px);
    image-rendering: unset;
    animation: inf_rotate 2.5s linear infinite;
}
@keyframes inf_rotate {
    0% { transform: translate(24px, 6px) rotate(0deg); }
    100% { transform: translate(24px, 6px) rotate(360deg); }
}
.Greg .tool_price {
    font-size: 0.9rem;
    position: absolute;
    transform: translateY(44px);
    width: 45px;
    text-align: center;
}
.Greg .levelupimg { margin-bottom: 25px; }
#Greg_Bar {
    width: 100%;
    height: 10px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.progress {
    transition-property: width;
    transition-duration: 100ms;
    transition-timing-function: linear;

    float: right;
    width: 100%;
    max-width: 100%;
    height: 10px;

    background-color: var(--bg-darker);
}
.pbar {
    background: var(--progress-light);
    background-repeat: repeat-x;
    background: repeating-linear-gradient(
        45deg,
        var(--progress-light),
        var(--progress-light) 24px,
        var(--progress-dark) 24px,
        var(--progress-dark) 48px
        );
    background-position: top;
    animation: progress_animate 12s infinite linear;
}
@keyframes progress_animate {
    to { background-position-x: 300px; }
}


/* Charles, Carl, Jared */
.Charles .shop_item {
    padding-bottom: 1px;
    padding-top: 1px;
    padding-left: 3px;
}
.Charles .shop_item .shop_value { top: 5px; }
.shop_bottom {
    padding: 5px;
    min-height: 58px;
    max-height: 220px;
    overflow-y: auto;
}
.Charles .shop_bottom {
    min-height: 220px;
}

/* Shop navigation */
.shop_nav {
    display: flex;
    margin-top: 8px;
}
.shop_nav_item {
    padding: 2px 16px;
    background-color: var(--bg-lighter);
    cursor: pointer;
    border-radius: 5px;
}
.shop_nav p {
    padding: 2px 8px 0;
}
.char_button {
    height: 32px;
    padding: 6px 0;
    margin-top: 6px;
}

/* Character shops */
.shop_item {
    padding: 5px;
    border-radius: 5px;
    background: var(--bg-lighter);
    margin-bottom: 8px;

    transition: background-color, filter 0.5s;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;

    position: relative;
    z-index: 1;
    display: flex;
}
.shop_item.shop_out {
    animation: shop_out 0.17s ease forwards;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
@keyframes shop_out {
    to {
        margin-top: -29px;
        margin-bottom: -29px;
        opacity: 0;
        transform: scale(0.8, 0.8);
    }
}
.shop_item .info { margin-top: 4px; }
.tooltip_area { position: relative; }
.shop_tooltip { visibility: hidden; top: 100%; }
*[data-tooltip]:not(.blackedout)::after { content: attr(data-tooltip); }
.shop_tooltip,
*[data-tooltip]::after {
    position: absolute;
    z-index: 5;
    left: 0;
    width: 100%;

    color: var(--text);
    background-color: var(--bg-lighter);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gray);
    border-radius: 4px;
    padding: 4px 6px;

    visibility: hidden;
    pointer-events: none;
}
*[data-tooltip]:hover::after { visibility: visible; }
.Greg *[data-tooltip]:after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}
.mini_item:after { margin-left: 24px; margin-top: 30px; width: 84% !important; }
button:after {
    font-weight: normal;
    top: 115%;
    left: 50% !important;
    transform: translateX(-50%);
    width: 120px !important;
}
.tooltip_area:hover .shop_tooltip,
.tooltip_area:focus .shop_tooltip,
.tooltip_area:focus-within .shop_tooltip,
.tooltip_area:focus-visible .shop_tooltip {
    visibility: visible;
}
.shop_tooltip b { color: var(--text); }

.shop_item:last-of-type { margin-bottom: 0; }
.shop_img {
    width: 48px;
    height: 48px;
    margin-right: 8px;
    object-fit: cover;
}
.shop_price {
    position: absolute;
    right: 8px;
    bottom: 8px;
}
.shop_value {
    position: absolute;
    right: 8px;
    top: 8px;
}

/* Can't afford */
.tooltip_area .shop_item.cant_afford,
.shop_item.cant_afford {
    filter: brightness(50%) contrast(90%);
    background-color: var(--bg-darker);
    cursor: default;
}
.shop_item.cant_afford img { filter: saturate(30%); }
/* Completed */
.shop_item.complete {
    filter: brightness(85%);
}
/* Shop segments */
.darker_bg_color {
    background-color: var(--bg-darker);
}
.segment_bar {
    display: flex;
    height: 10px;
    width: 180px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}
.segment {
    flex: 1;
    border-right: 1px solid var(--bg-lighter);
}
.segment:last-of-type { border: none; }
.segment.filled { background-color: var(--progress-dark); }

.new_indicator {
    font-size: 9pt;
    background-color: var(--text);
    color: var(--text-inverted);
    border-radius: 100px;
    padding: 2px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    width: fit-content;
    display: inline-block;

    animation: new_indicator_anim 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tab .new_indicator {
    margin-left: 8px;
    opacity: 0.8;
}
@keyframes new_indicator_anim {
    0% {
        /* width: 1px; */
        opacity: 0;
        transform: translateX(16px) scale(0.8, 0.8);
    }
    100% {
        /* width: unset; */
        opacity: 1;
    }
}
#more_chars_tooltip {
    width: 372px;
    max-width: 100%;
    margin-bottom: 12px;
}


/* Grayed out/Blacked out/Glowing effects */
.grayedout img, img.grayedout { filter: brightness(40%) saturate(50%); }
.blackedout img, img.blackedout { filter: contrast(0%) brightness(0%) opacity(30%); }

.grayedout .levelupimg,
.grayedout .toolicon,
.grayedout.levelupimg,
.grayedout.toolicon,
.blackedout .levelupimg,
.blackedout .toolicon,
.blackedout.levelupimg,
.blackedout.toolicon{ cursor: unset; }

.grayedout .levelupimg:hover,
.grayedout .toolicon:hover,
.grayedout.levelupimg:hover,
.grayedout.toolicon:hover,
.grayedout .levelupimg:active,
.grayedout .toolicon:active,
.grayedout.levelupimg:active,
.grayedout.toolicon:active {
    transform: none;
    filter: brightness(40%) saturate(50%);
}

.blackedout .levelupimg:hover,
.blackedout .toolicon:hover,
.blackedout.levelupimg:hover,
.blackedout.toolicon:hover,
.blackedout .levelupimg:active,
.blackedout .toolicon:active,
.blackedout.levelupimg:active,
.blackedout.toolicon:active {
    transform: none;
    filter: contrast(0%) brightness(20%);
}

.toolicon.glowing {
    animation: glowing 2s infinite alternate linear;
    cursor: pointer;
}
@keyframes glowing {
    from { filter: drop-shadow(0px 0px 5px rgb(255, 235, 120, 0.4)); }
    to { filter: drop-shadow(0px 0px 5px rgb(255, 255, 207)) brightness(115%); }
}
.toolicon.glowing:hover {
    transform: scale(1.2, 1.2);
    filter: brightness(150%);
}
.toolicon.glowing:active {
    transform: scale(0.9, 0.9);
    filter: brightness(70%);
}

.tool .tool_price { color: var(--text); }
.tool.grayedout .tool_price { color: var(--secondary-text); }
.tool.blackedout .tool_price { color: var(--gray); }



/* Notifications section */
#tripane {
    background-color: var(--alt-bg);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.3);
    border-radius: 16px 16px 0 0;
    
    width: 100%;
    min-width: 270px;
    max-width: 1150px;
    min-height: 85vh;
    padding: 0;
    margin: 24px auto 0;
    position: relative;
}
#tripane h1 { margin-bottom: 8px; }
#tripane hr { background-color: var(--alt-bg-darkest); }
#tripane #tab_bar {
    margin: 0 auto;
    background-color: var(--alt-bg);
    border-radius: 16px 16px 0 0;
    /* padding: 1px solid transparent; */

    position: sticky;
    z-index: 3;
    top: 36px;
}
#tripane #tab_bar .tab {
    width: 100%;
    height: 2.3em;
    cursor: pointer;
    background-color: var(--alt-bg-darkest);
    border: none;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;

    position: relative;
}
#tripane #tab_bar .tab:nth-of-type(2n) {
    border-left: 1px solid var(--alt-bg-darker);
    border-right: 1px solid var(--alt-bg-darker);
}
.tab:hover {
    transform: translateY(-2px);
    box-shadow: none;
    color: unset;
}
#tripane #tab_bar .activetab {
    background-color: var(--alt-bg);
    color: var(--text);
    border: none;
    border-bottom: none;
    z-index: 1;
}
.inactivetab:hover { filter: brightness(120%) }
#tripane #tab_bar .tab img {opacity: 0.6; transition: opacity 0.1s;}
#tripane #tab_bar .activetab img {opacity: 1;}
.tab:hover img {opacity: 1 !important;}

#tripane #tab_bar .tab:first-of-type { border-radius: 16px 0 0 0; }
#tripane #tab_bar .tab:nth-of-type(3) {  border-radius: 0 16px 0 0; }
.popup_box .tab:hover { transform: none; }

/* Info panel */
.panel {
    position: absolute;
    min-height: 85vh;
    height: min-content;
    width: 100%;
}
.panel, footer {
    padding: 0px 24px 64px;
}

/* Filter dropdown */
.panel_select {
    position: absolute;
    top: 64px; right: 24px;
    width: 200px;
}

.achievement_item {
    width: 100%;
    margin-bottom: 8px;
    box-shadow: /*0 2px 10px rgba(0, 0, 0, 0.3),*/ 0 0 16px rgba(0, 0, 0, 0.45) inset;
    background-color: var(--alt-bg-darkest);

    border-radius: 20px;
    position: relative;
}
.achievement_item:hover { z-index: 2; }
.achievement_item:target { animation: target_outline 10s ease-out; }
@keyframes target_outline {
    0% { outline: 4px solid var(--generic-blue); }
    80% { outline: 4px solid var(--generic-blue); }
    100% { outline: 4px solid transparent; }
}
.style_challenge {
    border: 2px solid rgb(177, 44, 44) !important;
    background-color: rgb(85, 43, 43) !important;
}
.style_endgame {
    border: 2px solid white !important;
    background: rgb(94, 94, 94);
    background: linear-gradient(
        110deg,
        rgb(94, 94, 94) 50%,
        rgba(189, 189, 189, 0.664) 53%,
        rgb(114, 114, 114) 56%,
        rgb(94, 94, 94) 60%
    );
    background-attachment: local;
    background-size: 120%;

    animation: shine 4s infinite;
}
.style_shine {
    background-attachment: local;
    background-size: 130% !important;
    background: linear-gradient(
        110deg,
        var(--alt-bg-darkest) 50%,
        #a39287 53%,
        var(--alt-bg) 56%,
        var(--alt-bg-darkest) 60%
    );
    animation: shine 4s infinite;
}
@keyframes shine {
    0%   { background-position-x: -800px; }
    50%  { background-position-x:  500px; }
    100% { background-position-x:  500px; }
}
.style_secret {
    border: 2px solid purple !important;
    background-color: rgb(61, 49, 61) !important;
}




/* Achievement details */
.achievement_item .achievement_img {
    height: 50px;
    width: 50px;

    margin-right: 16px;
    
    border-radius: 16px;

    transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-property: transform, margin, border-radius;
}
/* .compact:not(.achieve_grid) {
    display: flex;
    flex-wrap: wrap;
}
.compact:not(.achieve_grid) .achievement_item {
    width: calc(50% - 8px);
    margin-right: 8px;
} */
.compact:not(.achieve_grid) .achievement_item .achievement_img,
.toast.achievement_item .achievement_img {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    margin-right: 8px;
}
.compact:not(.achieve_grid) .achievement_item p.secondary_text,
.compact:not(.achieve_grid) .achievement_item .rewards_list {
    visibility: hidden;
    position: absolute;
}
.achievement_locked img {
    opacity: 0.7;
    filter: saturate(0%);
}
.achievement_item:not(.achievement_locked):not(.toast) .achievement_img:hover {
    transform: scale(2.2, 2.2) translateX(10px);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
    margin-right: 64px;
    border-radius: 4px;
}
.achievement_details {
    padding: 7px;
    border-radius: 16px;

    position: relative;
    z-index: 1;
}
.achievement_details.has_reward {border-radius: 16px 16px 0 0;}

.achievement_details h2 {
    margin: 6px 0 8px 0;
    font-size: 20pt;
}
.achievement_details h2,
.toast.achievement_item .achievement_details h2  {
    margin: 0;
    font-size: 18pt;
}
.compact:not(.achieve_grid) .achievement_details h2,
.toast.achievement_item .achievement_details h2  {
    margin: 0;
    font-size: 18pt;
}

.achieve_pages {
    position: absolute;
    float: right;
    top: 12px;
    right: 16px;
}
.achievement_item h4 { margin: 0; }
.rewards_list {
    background-color: var(--locked-bg);
    display: flex;
    border-radius: 0 0 16px 16px;
}
.reward {
    padding: 8px 10px;
    border-right: 1px solid var(--alt-bg-darkest);
    flex: 1;
}
.reward:last-of-type { border: none; }
.reward.rcash h4 { transform: translateY(8px); }
.achievement_item .reward_img {
    height: 36px;
    width: 36px;
    margin-right: 10px;
    border-radius: 4px;
}

/* Still locked */
.achievement_locked { filter: brightness(70%); }


/* Achievement GRID view */
.achieve_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.achieve_grid .achievement_item {
    width: 64px;
    height: 64px;
    margin-right: 4px;
}
.achieve_grid .achievement_item .reward {
    display: none;
}
.achieve_grid .achievement_img:hover {
    transform: none !important;
    margin-right: 16px !important;
}
.achieve_grid .achievement_item .achievement_details {
    position: absolute !important;
    width: max-content;
    max-width: 400px;
    padding: 5px;
    top: 0;
    background-color: var(--classic-tooltip-bg);
    border: 2px solid var(--gray);
    /* backdrop-filter: blur(4px); */
}
.achieve_grid .achievement_item .achievement_details h2 {
    padding-right: 72px;
}
.achieve_grid .achievement_item .achievement_details,
.achieve_grid .rewards_list,
.achieve_grid .reward {
    visibility: hidden !important;
    pointer-events: none;
}
.achieve_grid .achievement_item .achievement_details .achievement_img,
.achieve_grid .achievement_item .rewards_list {
    visibility: visible !important;
}
/* Unhide details */
.achieve_grid .achievement_item:hover .achievement_details {
    visibility: visible !important;
}

/* Description adjust */
.achieve_grid .achievement_item.desc_fit .achievement_details {
    right: -100%;
    margin-right: 64px;
    flex-direction: row-reverse;
}
.achieve_grid .achievement_item.desc_fit .achievement_details .achievement_img {
    margin-right: 0;
    margin-left: 16px;
}
.achieve_grid .achievement_item.desc_fit .achievement_details .achieve_pages {
    margin-right: 48px;
}







/* Statistics */
#statistics {
    width: 100%;
    max-width: 550px;
}
#statistics p,
#statistics summary {
    background-color: var(--alt-bg-darker);
    color: var(--secondary-text);
    margin-bottom: 1px;

    height: 24px;
    font-style: italic;
    padding-right: 8px;
    padding: 2px 10px;
    /* border-radius: 6px; */
}
#statistics summary:hover { filter: brightness(125%); }
#statistics b {
    color: var(--text);
    font-style: normal;
    float: right;
}
#statistics h3 {
    border-bottom: 1px solid var(--alt-bg-darkest);
    padding-bottom: 4px;
    padding-top: 24px;
    margin: 0;
}
#statistics .stats_icon {
    /* box-sizing: content-box;
    transform: scale(1.5, 1.5) translateY(1px);
    padding: 0 4px; */
    display: none;
}

/* Settings */
#options_container {
    width: 100%;
    max-width: 550px;
}
#options_container h6 {
    font-size: 15pt;
    margin: 16px 0 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--alt-bg-darkest);
}
#options_container section {
    margin: 6px 0;
}
#options_container .option {
    width: 100%;
    padding: 6px 12px;

    background-color: var(--alt-bg-darker);
    border: 1px solid var(--alt-bg-darker);
    border-bottom: 1px solid var(--alt-bg);
}
#options_container label:first-of-type .option {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#options_container label:last-of-type .option {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: none;
}

#options_container .option input[type="checkbox"],
#options_container .option[role="button"]:not(body:not(.c_carl) .cosmetic_related) { cursor: pointer; }
#options_container .option[role="button"]:not(body:not(.c_carl) .cosmetic_related):hover { box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.3); border-color: var(--alt-bg-darkest); }

#options_container .option img { vertical-align: text-top; object-fit: contain; margin-right: 6px; height: 18px; width: 18px; }
#options_container .option img.ra { opacity: 0.6; margin: 0 2px 0 0; }
#options_container .option:hover img.ra { opacity: 1; }
#options_container .option input[type="checkbox"] { width: 16px; height: 16px; }
#options_container .option input.discreet { transform: translateY(-10px) }
#options_container .option img.ra,
#options_container .option input[type="checkbox"],
#options_container .option input.discreet { float: right; }
#options_container .option input[type="range"] { margin: 6px 12px 0 26px; max-width: 100%; }
#options_container p { margin-left: 26px; }


input.discreet, input.discreet[disabled] {
    font-family: var(--font);
    font-size: 12pt;
    background-color: transparent;
    color: var(--text);
    opacity: 1;
    width: 100% !important;
    max-width: 36px !important;
    transition: 0.1s padding ease;
}
input.discreet:focus {
    padding-left: 4px !important;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* Character input */
.characterbox input.discreet {
    padding: 0;
    border-radius: 0 !important;
}
input.discreet:focus,
.characterbox input.discreet:not(input[disabled]):hover {
    background-color: var(--bg);
}

/* Tripane input */
#tripane input.discreet {
    background-color: var(--alt-bg-darkest);
    color: var(--secondary-text);
    margin-left: 6px;
    max-width: 72px !important;
}
#tripane input.discreet:hover {
    background-color: var(--alt-bg-darkest);
    color: var(--text);
}
#tripane input.discreet:focus {
    background-color: var(--text);
    color: var(--text-inverted);
}


/* HTML Slider */
.slider {
    /* -webkit-appearance: none;
    appearance: none; */
    /* width: 10%; */
    height: 2px;
    outline: none;
    -webkit-transition: .2s;
    transition: background-color .2s;

    margin-top: 6px;
}
.slider:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}
.slider::-webkit-slider-thumb {
    /* -webkit-appearance: none;
    appearance: none; */
    /* width: 4px;
    height: 4px; */
    /* transform: scale(2.3, 2.3); */
    border-radius: 50%;
    background: white;
    cursor: pointer;

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: white;
    cursor: pointer;
}

/* Keybinds Menu */
.key_header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2px;
    margin-bottom: 6px;
}
.keybind_item { padding-bottom: 12px; }
.edit_keybind {
    background-color: var(--border-color);
    border-color: var(--gray);
    width: 100%;
    text-align: left;
    transition-property: border-color, background-color, color;
}
.edit_keybind:hover {
    background-color: var(--border-color);
    color: unset;
    border-color: var(--text);
}
.edit_keybind:focus {
    background-color: var(--text);
    color: var(--text-inverted);
    border-color: var(--generic-blue);
}
.edit_keybind[disabled],
.edit_keybind[disabled]:hover,
.edit_keybind[disabled]:focus {
    border-color: var(--border-color);
    transform: none;
    color: var(--gray);
    cursor: not-allowed;
    box-shadow: none;
    filter: brightness(80%);
}

/* Fancy Prestige menu */
#prestige_menu,
#tips_menu {
    padding: 24px;
}
#prestige_menu {
    width: 100%;
    max-width: 480px;
    height: auto;
    max-height: 95%;
    overflow-y: auto;
}
.prestige_item {
    color: var(--secondary-text);

    padding: 6px;
    border-radius: 16px;
    margin-bottom: 8px;
}
.prestige_item img {
    width: 56px;
    height: 56px;
    margin-right: 4px;
}
.prestige_number {
    color: var(--text);
    font-weight: bolder;

    margin: 0 6px 0 0;
    /* padding-top: 4px; */
    font-size: 20pt;
}

/* Inventory menu */
/* #inventory_menu {
    padding: 24px;
    width: 100%;
    height: 750px;
    max-width: 985px;

    background-color: var(--bg-popup);
}
#inventory {
    display: flex;
    flex-wrap: wrap;
    height: 560px;
    width: 100%;
    overflow: auto;
    border-radius: 16px;
}
.inventory_slot {
    width: 96px;
    height: 96px;
    border-radius: 16px;

    position: relative;

    margin: 0 6px 6px 0;
    cursor: pointer;
}
.inventory_slot img {
    width: 100%;
    height: 100%;
    padding: 12px;
}
.inventory_number {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.inventory_slot:hover {
    filter: brightness(110%);
}

#inventory_preview {
    border-left: 1px solid var(--border-color);
    width: 430px;
    padding: 0 16px;
}
.item_preview {
    width: 260px;
    height: 260px;
    border-radius: 24px;
    cursor: unset;
}
.item_preview img {
    padding: 24px;
} */

/* Footer */
footer { text-align: center; }
.footer_carrot {
    width: 200px;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
    transition-property: transform;
    transition-duration: 0.05s;
}
.footer_carrot:active { transform: scale(0.95, 0.95); }
.footer_bottom {
    background-color: var(--alt-bg-darker);
    margin-top: 24px;
    display: flex;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    border-radius: 16px;
}
.footer_column {
    flex: 1;
    padding: 16px 24px;
}
footer .user_card div {
    /* background-color: var(--bg-lighter); */
    border-bottom: 1px solid var(--border-color);
    color: var(--text);

    padding: 8px 16px 8px 12px;
    margin-top: 4px;
    /* border-radius: 16px; */

    align-items: center;
    font-weight: bold;
}
footer .user_card:hover div { border-color: var(--text); }
footer .user_card img {
    width: 32px; height: 32px;
    border-radius: 50%;
    margin-right: 12px;
}
footer .user_card.footer_card div { width: 100%; max-width: 320px; margin: 0 auto; }
footer .footer_card img {
    border-radius: 0;
    width: 20px; height: 20px;
}
footer .user_card { text-decoration: none !important; }


/* Tips menu */
#tips_menu {
    width: 500px;
    height: 95%;
    max-height: 640px;
    overflow-y: auto;
}
#tips_list h3 {
    margin-bottom: 4px;
    padding-top: 24px;
}
#tips_list {
    margin-top: 12px;
}
.tip_item {
    border-bottom: 1px solid var(--bg-darker);
    border-radius: 6px;
    padding: 8px 0;
    padding-right: 24px;
    transition: padding 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tip_item.secondary_text .tip_number {
    color: var(--gray);
}
.tip_item.fun::before {
    content: "☻";
    font-size: 16pt;
    transform: translate(19px, -5px);
    float: right;
}
.tip_item.fun.secondary_text::before {
    opacity: 0.3;
}
.tip_number {
    font-weight: bold;
    padding-right: 10px;
    color: var(--text);
}

/* Credits */
#credits {
    width: 100%;
    height: 100vh;
    padding: 40vh 16px 120px;
    overflow-y: auto;

    z-index: 1000;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    white-space: pre-line;

    display: none;
}
#credits h1,
#credits h2,
#credits h3 {
    margin: 0;
}
#credits .credits_underline {
    border-bottom: 1px solid var(--border-color);
    max-width: 300px;
    padding-bottom: 12px;
    margin: 0 auto;
}
/* #credits.visible { opacity: 1; } */




/* Pinned Dev panel */
/* #devp .footer_bottom {
    position: fixed;
    z-index: 95;
    bottom: 0;
    left: 0;

    height: 400px;
    width: 410px;
    margin: 10px;
    overflow: auto;
    
    background-color: var(--bg-lighter);
    outline: 1px solid var(--alt-bg-lighter);
    box-shadow: 4px 4px 12px rgb(0,0,0,0.5);
    border-radius: 8px;
}
#devp.bottomright .footer_bottom {
    left: unset; right: 0;
} */




/* Media queries */
/* Minimum supported width: 362px */

/* 1300px - 2 character columns*/
@media only screen and (min-width: 1200px) {
    #character_section { display: flex; }
}

/* 848px - mobile layout*/
@media only screen and (max-width: 800px) {
    /* Overlays */
    .characterbox.show_info {
        top: 12px;
        transform: translateX(-50%);
        max-width: 100%;
    }
    .characterbox .char_info {
        max-width: 100%;
        max-height: 50vh;
        left: 0;
        bottom: 12px;
        top: 100%;
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 5px 5px;
    }
    .characterbox.show_info .shop_bottom:not(#charles_shop) {
        height: 40vh;
        max-height: 40vh;
    }

    /* Status bar */
    .basic_info {
        flex-direction: column;
        text-align: center;
        padding-right: 38px;
        padding-left: 38px;
    }
    #info_dropdown {
        padding-top: 18px;
        vertical-align: middle;
    }
    #Tip { margin-left: unset; }

    /* Left */
    #main_carrot { max-width: 100%; margin: auto; }
    #container {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }
    #game_section {
        /* width: 100%; */
        max-width: 100%;
        margin: 0 auto;
        box-shadow: none;
        border-radius: 0;
        background-color: transparent;
    }
    .mini_stats {
        padding-left: 6px; padding-right: 6px;
    }

    /* Right */
    #character_section { border: none; }

    /* Tripane */
    #tripane { margin-bottom: 80px; border-radius: 16px; }
    #tripane #tab_bar { top: 74px; }
    .rewards_list { display: block; }
    .reward {
        border-right: none;
        border-bottom: 1px solid var(--alt-bg-darkest);
    }
    .footer_bottom { flex-direction: column; }
}

/* 460px - mobile small*/
@media only screen and (max-width: 460px) {
    /* Overlay */
    #overlay { height: 100vh; }

    /* Tripane */
    #tripane .tab .button_icon { visibility: hidden; position: absolute; }
    .panel_select { width: 150px; }
    .achieve_grid .achievement_item .achievement_details {max-width: 55vw; }
    #keybinds_list { display: block; }
    .key_column { padding: 0; margin: 0; }
}

/* 400px - very small*/
@media only screen and (max-width: 400px) {
    #character_section { max-width: 100%; }
    .status_progress_bar { border-radius: 0; border-right: none; border-left: none; }
    #tripane .button_icon { visibility: hidden; position: absolute; }
}