/* Global variables */
:root {
    --size: 50px;
}

/* Prevent the main body from being covered by the top bar */
body {
    background-color: #202020;
    color: #fff;
    text-align: center;
    font-family: sans-serif;
}

section.module {
    background: #282828;
    border-radius: 10px;
    padding: 10px 20px;
    margin: 10px auto;
    width: fit-content;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: inline-block;    /* Make each section only wrap its own content */
    vertical-align: top;  /* Align multiple sections to the top instead of the baseline */
}

section.module h1,
section.module h2 {
    font-size: 24px;
    margin: 10px auto;
    color: #ffdd57;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Top bar style */
#top-bar {
    position: sticky;   /* Stay at the top without leaving the document flow */
    top: 0;
    width: 100%;
    height: 50px;
    background: #202020;
    color: #ffdd57;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 100;
    box-sizing: border-box;  /* Ensure padding is included in total width */
}

/* Left, middle, and right sections */
#top-title {
    font-size: 18px;
    font-weight: bold;
}

#top-buttons {
    display: flex;
    gap: 12px;
}

#top-buttons button {
    background: #ffdd57;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

#top-buttons button:hover {
    background: #ffe985;
}

#lang-select {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 6px;
}

.row {
    display: grid;
    grid-template-columns: repeat(10, var(--size));
    gap: 4px;
    justify-content: start;
}

.corner {
    width: var(--size);
    height: var(--size);
    background-color: transparent;
}

#tooltip {
    position: absolute;     /* Positioned relative to the page */
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 310px;
    display: none;
    text-align: left;
    white-space: pre-wrap;
    z-index: 10000;
    pointer-events: none;   /* Avoid blocking hover interactions */
}

.boon,
.god,
.category {
    width: var(--size);
    height: var(--size);
    position: relative;  /* Provide a reference point for absolutely positioned inner elements */
    cursor: pointer;  /* Show pointer cursor on hover */
    border-radius: 10px;  /* Rounded corners */
    overflow: visible;  /* Allow hover layers to appear outside the container */
}

.cell-image {
    display: block;
    width: 95%;
    height: 95%;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;  /* Include padding and borders in width and height */
}

.selected .cell-image {
    filter: none;
    outline: 2px solid #ffdd57;
    outline-offset: -2px;
    border-radius: 10px;
}  /* CSS image border rollover effect without resizing the image */

.unclickable {
    pointer-events: auto;  /* Hover and mouseenter events still work */
    cursor: not-allowed;   /* Show not-allowed cursor */
}

.busy {
    pointer-events: none;   /* Disable all mouse interactions (click, hover, drag, scroll, etc.) */
}

.boon {
    position: relative;
    overflow: hidden;
}

.boon::after {
    content: "";
    position: absolute;
    inset: 0; /* Equivalent to top:0; right:0; bottom:0; left:0; */
    background: rgba(255, 255, 255, 0.25); /* Semi-transparent white layer */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}

.boon:hover::after,
.boon.hover::after {
    opacity: 1; /* Show on hover */
}