/* ========== Fonts ========== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Runic&display=swap');

/* ========== Rune Card ========== */
.rune-card {
    font-family: 'Noto Sans Runic', 'Times New Roman', serif;
    color: #333;
    padding: 24px;
    border-radius: 14px;
    max-width: 520px;
    margin: 20px auto;
    text-align: center;
    border: 3px solid #c9b79c;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 2px 6px rgba(0,0,0,0.1);
    transition: box-shadow .25s ease, transform .25s ease;
    box-sizing: border-box;
}

/* Wood theme — light, subtle grain for light backgrounds */
.rune-card.wood {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)) ,
        repeating-linear-gradient(90deg,
            #f8ecd6 0px, #f8ecd6 6px,
            #f3e3c6 6px, #f3e3c6 12px,
            #f7e8cf 12px, #f7e8cf 18px
        );
    border-color: #b49b7e;
}

/* Stone theme — pale limestone */
.rune-card.stone {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)),
        radial-gradient(120% 100% at 50% 0%, #f3f0ea 0%, #e9e4dc 70%, #e3ddd3 100%);
    border-color: #bfb6a6;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 2px 8px rgba(0,0,0,0.12);
}

/* Hover lift */
.rune-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 6px 18px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Rune content */
.rune-symbol {
    font-size: 4.2em;
    margin-bottom: 10px;
    color: #3e3e3e;
    line-height: 1.05;
}
.rune-name {
    font-size: 1.6em;
    font-family: 'Cinzel Decorative', serif;
    color: #5a4a3b;
    margin-bottom: 6px;
    line-height: 1.15;
}
.rune-meaning {
    font-size: 1em;
    font-style: italic;
    color: #6e6354;
    line-height: 1.3;
}

/* ========== Draw Button ========== */
#draw-rune-button {
    display: block;
    font-family: 'Cinzel Decorative', 'Georgia', serif;
    font-size: 1.1em;
    padding: 12px 24px;
    background: #eadcc5;
    color: #3e3e3e;
    border: 2px solid #b49b7e;
    border-radius: 10px;
    margin: 12px auto;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#draw-rune-button:hover {
    background: #dfcfb4;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Toggle link */
#rune-guide-toggle {
    text-align: center;
    margin-top: 10px;
}
#rune-guide-toggle a {
    text-decoration: underline;
    color: #5a4a3b;
    cursor: pointer;
    font-family: 'Cinzel Decorative', serif;
}

/* ========== Modal ========== */
#rune-guide-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#rune-guide-content {
    background: #fffaf2;
    border: 2px solid #b49b7e;
    padding: 20px 24px;
    border-radius: 14px;
    max-height: 82vh;
    overflow: auto;

    /* Option 3: widen modal so text doesn't crowd */
    max-width: 1100px;  /* was 900px */
    width: 95%;

    box-shadow: 0 5px 18px rgba(0,0,0,0.25);
    position: relative;
}
#rune-guide-content h2 {
    margin: 4px 0 14px;
    font-family: 'Cinzel Decorative', serif;
    text-align: center;
}
#close-rune-guide {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 26px;
    cursor: pointer;
    color: #8b8172;
    background: transparent;
    border: none;
}
#close-rune-guide:hover { color: #3e3e3e; }

/* ========== Rune Guide Grid ========== */
/* Option 1 & 2: Flexible grid with safe min width, then lock to 8 columns on wide screens */
#rune-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;

    /* Flexible columns with a safe min width to avoid overlap */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 18px;
}

/* On very wide screens, honor the 3×8 visual by locking to 8 columns */
@media (min-width: 1360px) {
    #rune-guide-list {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Each cell */
.rune-guide-item {
    background: #f7efe1;
    border: 1px solid #d4c3a5;
    border-radius: 10px;
    padding: 12px 12px;
    text-align: center;

    display: grid;
    grid-template-rows: auto auto 1fr;
    align-items: start;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    box-sizing: border-box; /* predictability */
}

/* Cell content */
.rune-guide-symbol {
    font-family: 'Noto Sans Runic', serif;
    font-size: 1.9em; /* slightly reduced to protect small tiles */
    color: #3b3b3b;
    line-height: 1.05;
}
.rune-guide-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.05em;
    color: #5a4a3b;
    margin-top: 6px;
    line-height: 1.15;
}
.rune-guide-meaning {
    margin-top: 6px;
    font-size: 0.95em;
    line-height: 1.25;
    color: #6e6354;

    /* Option 2: robust wrapping to prevent overlap */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* Option 4: tighten typography on narrow screens */
@media (max-width: 600px) {
    .rune-guide-symbol { font-size: 1.7em; }
    .rune-guide-name { font-size: 1em; }
    .rune-guide-meaning { font-size: 0.92em; }
}

/* ========== Fade-in Animation on Draw ========== */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeInUp 280ms ease-out;
}