.box-container {
    position: relative;
    width: 72vw;
    /* aspect-ratio will be set by JS */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

/* Background image now drawn directly onto the canvas; .box-bg removed */

.box-text {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-family: 'IsabellaBlack', serif;
    font-size: 2.8vw;
    color: #222;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #a67c00;
    overflow: hidden;
    padding: 0;
    background: none;
    box-sizing: border-box;
    line-height: 1.2;
    word-break: break-word;
    /* The following will be set by JS */
}

.box2 {
    max-width: 90%;
    margin: 40px 5%;
    padding: 40px;
    font-family: 'IsabellaBlack', serif;
    font-size: 48px;

    color: #222;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: rgba(147, 65, 69, 0.8);
}

button {
    background: white;
    border: 1px solid rgba(147, 65, 69, 1);
    border-radius: 4px;
    color: #222;
    cursor: pointer;
    padding: 7px;
    font-size: 18px;
    line-height: 22px;
}

.guild-controls {
    width: 72vw;           /* match .box-container width */
    margin: 12px auto 0;   /* centered under the box */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0px;
}
.gc-btn {
    background: #1f1f22;
    border: 1px solid #3a3a40;
    color: #ddd;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s ease-in;
}
.gc-btn:hover {
    background: #2a2a2e;
    color: #fff;
    border-color: #50505a;
}
.gc-btn:active {
    transform: translateY(1px);
}
.gc-fontsize {
    min-width: 48px;
    text-align: center;
    font-family: 'IsabellaBlack', serif;
    font-size: 20px;
    color: #c9c9c9;
    padding: 0 6px;
}

/* Responsive: keep controls aligned with box width adjustments */
@media (max-width: 900px) {
  .box-container,
  .guild-controls { width: 92vw; }
}