@import url('game-ui.css');

.portal-container {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.welcome-section h1 {
    color: var(--heading-color, Goldenrod);
    margin: 0 0 0.35rem;
}

.welcome-section p {
    line-height: 1.5;
    margin-bottom: 1rem;
}

.server-status {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 0.85rem 1rem;
    background: rgba(18, 24, 32, 0.92);
    border: 1px solid rgba(218, 165, 32, 0.28);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.status-label {
    color: rgba(255, 255, 255, 0.65);
    margin-right: 0.35rem;
}

.status-value {
    font-weight: 700;
    color: #f5e6b8;
}

.daily-reward-notice {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(218, 165, 32, 0.35);
    background: rgba(18, 24, 32, 0.88);
}

.daily-reward-notice__label {
    margin: 0 0 0.35rem;
    color: #f5e6b8;
    font-weight: 700;
}

.daily-reward-notice__flavor {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
}

.daily-reward-notice .button {
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #daa520, #b8860b);
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
}

.town-daily-reward,
.adventure-daily-reward {
    border-left: 4px solid #8fd694;
}

.game-news,
.events-container,
.guild-highlights {
    margin: 1.25rem 0;
    padding: 1rem;
    background: rgba(18, 24, 32, 0.88);
    border: 1px solid rgba(218, 165, 32, 0.22);
    border-radius: 0.75rem;
}

.game-news h3,
.events-container h3,
.guild-highlights h3 {
    color: Goldenrod;
    margin: 0 0 0.65rem;
}

.news-item,
.guild-item {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.portal-links .button.portal-link {
    display: block;
    text-align: center;
    padding: 0.85rem 0.75rem;
    border-radius: 0.85rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
    color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(0, 0, 0, 0.24);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.portal-links .button.portal-link:hover {
    transform: translateY(-2px);
    opacity: 0.98;
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 14px 28px rgba(0, 0, 0, 0.3);
}

.portal-link--adventure { background: linear-gradient(180deg, #3d8f5a, #2d6b44); color: #fff; }
.portal-link--explore { background: linear-gradient(180deg, #3d6b5c, #2a4a3f); color: #fff; }
.portal-link--fishing { background: linear-gradient(180deg, #3d8fd9, #1e6aa8); color: #fff; }
.portal-link--quests { background: linear-gradient(180deg, #8b5a2b, #6b4423); color: #fff; }
.portal-link--farm { background: linear-gradient(180deg, #52796f, #3d5a50); color: #fff; }
.portal-link--crafting { background: linear-gradient(180deg, #7a6b55, #5c4f3f); color: #fff; }
.portal-link--daily { background: linear-gradient(180deg, #daa520, #b8860b); color: #1a1a1a; }
.portal-link--expeditions { background: linear-gradient(180deg, #6a5acd, #483d8b); color: #fff; }
.portal-link--horoscope { background: linear-gradient(180deg, #9966cc, #7744aa); color: #fff; }
.portal-link--stratagems { background: linear-gradient(180deg, #c4a574, #a08050); color: #1a1a1a; }
.portal-link--guide { background: linear-gradient(180deg, #2e8b9a, #1f6670); color: #fff; }
.portal-link--story { background: linear-gradient(180deg, #0066cc, #004499); color: #fff; }
.portal-link--character { background: linear-gradient(180deg, #8c1aff, #6a00cc); color: #fff; }
.portal-link--wardrobe { background: linear-gradient(180deg, #daa520, #b8860b); color: #1a1a1a; }
.portal-link--inventory { background: linear-gradient(180deg, #556b8a, #3d5068); color: #fff; }
.portal-link--trade { background: linear-gradient(180deg, #b8860b, #8b6914); color: #fff; }
.portal-link--market { background: linear-gradient(180deg, #4a7c59, #355a40); color: #fff; }
.portal-link--action { background: linear-gradient(180deg, #c0392b, #922b21); color: #fff; }

.cta-section {
    text-align: center;
    margin: 2.5rem 0;
    padding: 2rem 1rem;
    background: rgba(18, 24, 32, 0.92);
    border-radius: 0.75rem;
    border: 1px solid rgba(218, 165, 32, 0.28);
}

.cta-section h2 {
    color: Goldenrod;
    margin-bottom: 0.75rem;
}

.cta-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button.primary {
    background: linear-gradient(180deg, #daa520, #b8860b);
    color: #1a1a1a;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.cta-button.secondary {
    border: 1px solid rgba(218, 165, 32, 0.55);
    color: #f5e6b8;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
}

.newsletter-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(18, 24, 32, 0.88);
    border-radius: 0.75rem;
}

.newsletter-container h2 {
    color: Goldenrod;
}

#thank-you-message {
    display: none;
    margin-top: 0.75rem;
    color: #b8f0b0;
}

#thank-you-message.is-visible {
    display: block;
}