html {
    overscroll-behavior: none;
    font-family: "Jersey 20", sans-serif;
    font-weight: 200;
    font-size: 20px;
    font-style: normal;
}

body {
  background-image: url("../res/bg.png");
  background-color: black;
  background-repeat: no-repeat;
  /*background-size: 1450px 1450px*/
  background-size: 100vw 100vw;
  color: black;
  text-decoration: none;
  height: 100vw;
}

#message-box {
    height: 100%;           /* fill the .large-item */
    overflow-y: auto;       /* scroll inside the box */
    overflow-x: hidden;     
    padding: 0.5vw 1vw;
    box-sizing: border-box;
}

/* Hide scrollbar but still scrollable */
#message-box::-webkit-scrollbar {
    width: 0px;
}

.main-container {
    display: flex;
    position: absolute;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /*padding-bottom: 200px;
    padding-top: 150px;
    left: 150px;*/
    left: 10vw;
    top: 15vw;
}

/* Emoji container positioning */
.emoji-container {
    position: absolute;
    left: 60vw;
    top: 77vw;
}

/* Remove default button styles */
button {
    font-family: "Jersey 20";
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}
  
.hide-scrollbar::-webkit-scrollbar {
display: none;             /* Chrome, Safari, Opera */
}
  

/* Emoji button next to input */
#emoji-btn {
    width: 2.5vw;
    height: 2.5vw;
    background: #353536;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3vw;
}

#message-box-container {
    height: calc(100% - 9vw);  /* leave room for input */
    overflow-y: auto;
}

#message-box {
    padding: 0.5vw 1vw;
}

.emoji-cat.active {
    opacity: 1;
    border-bottom: 2px solid #5865f2;
}

/* Make grid wider for kaomoji */

.emoji-grid:has(.emoji:not(.kaomoji)) {
    grid-template-columns: repeat(6, 1fr);
}

/* Picker panel */
#emoji-picker {
    position: absolute;
    bottom: 3vw;           /* distance from emoji button */
    left: 0;               /* align with button or adjust */
    width: 18vw;
    max-height: 22vw;
    background: #4e4e4e;
    border-radius: 10px;
    padding: 0.8vw;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 10000;        /* ✅ high z-index to appear above messages */
    opacity: 1;
    transform: scale(1);
}

#emoji-picker::-webkit-scrollbar {
    width: 6px;
}

#emoji-picker::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

#emoji-picker::-webkit-scrollbar-track {
    background: transparent;
}

.large-item, .column-container {
    overflow: visible; /* ✅ ensures picker can appear outside */
    position: relative; /* ✅ ensures absolute positioning works correctly */
}

/* Category buttons */
.emoji-header {
    display: flex;
    gap: 0.6vw;
    padding-bottom: 0.6vw;
    border-bottom: 1px solid #1e1f22;
}

.emoji-cat {
    cursor: pointer;
    font-size: 1.2vw;
    opacity: 0.6;
}

.emoji-cat:hover,
.emoji-cat:focus {
    opacity: 1;
}

.emoji-grid {
    width: 100%;
    height: 280px; /* height for visible emoji rows */
    overflow-y: auto;
    position: relative;
}


/* Emoji buttons */

.emoji {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    border-radius: 4px;
}

/* Kaomoji buttons (auto-resize still works) */
.emoji.kaomoji {
    white-space: nowrap;      /* ✅ prevents breaking */
    overflow: hidden;         /* ✅ hide overflow */
    text-overflow: ellipsis;  /* optional, prevents spillover */
    font-size: 1vw;           /* starting font size */
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emoji:hover,
.emoji:focus {
    background: #3f4147;
}

/* Click feedback */
.emoji:active {
    background: #4f545c;
}

/* Hide picker */
.hidden {
    display: none !important;   /* ✅ forces it out of layout */
}

.banner-container {
    padding-bottom: 2vw;
    width: 50vw;
}

.banner-image {
    border-radius: 15px;
    width: 100%;
    height: 100%;
}

.row-container {
    display: flex;
    flex-direction: row;
    /*width: 1200px;*/
    width: 82vw;
    justify-content: center;
}

.column-container {
    /*width: 300px;
    height: 800px;*/
    width: 40vw;
    height: 55vw;
    flex-direction: column;
    display: flex;
    flex-wrap: nowrap; /* Allows items to wrap onto multiple lines */
}

.small-item {
    flex: 1 1;
    margin-right: .5vw;
    background-image: url("../res/small_item_bg_eaten.png");
    /*background-size: 275px 260px;*/
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 1.7vw;
    margin-top: .5vw;
    margin-bottom: .25vw;
    /*border: 2 solid #212121;*/
    padding-top: 2vw;
    text-align: center;
    font-size: 2vw;
    border-radius: 12px;
    color: black;
}

.medium-item {
    flex: 1 1;
    margin-right: .5vw;
    background-image: url("../res/medium_item_bg_eaten.png");
    /*background-size: 280px 390px;*/
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 1vw;
    margin-top: .5vw;
    margin-bottom: .5vw;
    /*border: 2 solid #212121;*/
    padding-top: 2vw;
    text-align: center;
    font-size: 2vw;
    border-radius: 12px;
    color: black;
}
  
.large-item {
    flex: 1 1;
    margin-right: .5vw;
    background-image: url("../res/large_item_bg_eaten.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 1vw;
    margin-top: .5vw;
    margin-bottom: .5vw;
    padding-top: 2vw;
    text-align: center;
    font-size: 2vw;
    border-radius: 12px;
    color: black;
    height: 50vw;

    position: relative;   /* ✅ needed for absolutely positioned children */
    overflow: visible;    /* ✅ let emoji picker float outside */
}

.basic-text {
    text-align: left;
    font-size: 1.5vw;
    margin: 0px;
    color: black;
    padding-left: 0vw;

    /* Add wrapping */
    word-wrap: break-word;      /* old standard, still widely supported */
    overflow-wrap: break-word;  /* modern standard */
    white-space: normal;        /* allow wrapping instead of one line */
}

.basic-link {
    text-decoration: underline;
    font-weight: 400;

    word-break: break-word;   /* ensures long URLs wrap */
}

.basic-link:hover {
    color: black;
    font-weight: 700;
    filter: brightness(80%);
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome, Safari, Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Standard syntax */
}

.input {
    font-family: "Jersey 20";
    color: black;
    background-color: grey;
    outline: none;
}

.input::placeholder {
    font-size: .8vw;
}