/* ===========================
   HEADER SOFTDEV ONLINE
   =========================== */

#softdev-header {
    width: 100%;
    padding: 16px 14px 18px;
    text-align: center;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.softdev-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: #d6ebff;
    text-shadow: 0 0 10px #6fb7ff, 0 0 20px #2d6bb3;
}

/* Contenitore pulsanti header */
.header-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

/* Pulsanti header base */
.header-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid #a9d6ff;
    background: rgba(255,255,255,0.14);
    color: #e8f6ff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.25s ease;
    width: auto;
    text-align: center;
    display: inline-block;
    box-shadow: 0 0 8px rgba(0,0,0,0.45);
}

.header-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-2px) scale(1.03);
}

/* Pulsante Portale – Multiversal Stream */
.portal-btn {
    border-color: #7fd0ff;
    background: linear-gradient(135deg, rgba(140,210,255,0.35), rgba(0,0,0,0.65));
    color: #e7f7ff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 20px;
    white-space: normal;
    line-height: 1.25;
    text-shadow: 0 0 6px #aee6ff;
    box-shadow:
        0 0 10px #6dc4ffaa,
        0 0 20px #3697e0aa inset;
    border-width: 2px;
}

.portal-btn:hover {
    background: linear-gradient(135deg, rgba(170,240,255,0.55), rgba(0,0,0,0.65));
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 0 14px #b2ecffcc,
        0 0 26px #52b8ffcc inset,
        0 0 18px #84d4ffcc;
}

/* Pulsante Aggiorna */
.refresh-btn {
    border-color: #ffd27f;
    background: linear-gradient(135deg, rgba(255,210,140,0.22), rgba(0,0,0,0.55));
    color: #fff1d2;
    font-weight: 700;
    box-shadow: 0 0 10px #ffd27faa;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, rgba(255,220,160,0.35), rgba(0,0,0,0.55));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 16px #ffe2aacc;
}

/* Header responsive */
@media (min-width: 640px) {
    .header-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .softdev-title {
        font-size: 32px;
    }

    .portal-btn {
        font-size: 1rem;
        white-space: nowrap;
    }
}

/* ===========================
   BASE / GLOBAL
   =========================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: url('lagherta_main.jpg') center/cover no-repeat fixed;
    font-family: 'Cinzel', serif;
    color: #ffffff;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 20% 0, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
    z-index: -1;
}

#app {
    min-height: calc(100vh - 120px);
}

h1, h2, h3 {
    margin: 0;
    text-align: center;
    text-shadow: 0 0 6px #9ecaff;
}

p {
    margin: 0;
}

/* ===========================
   MENU PRINCIPALE
   =========================== */

.menu-container {
    backdrop-filter: blur(8px) brightness(0.97);
    background: rgba(0,0,0,0.45);
    padding: 24px 16px 32px;
    min-height: calc(100vh - 120px);
    max-width: 1080px;
    margin: 14px auto 22px;
    border-radius: 18px;
    box-shadow: 0 25px 45px rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f0f0f0;
}

.menu-header h1 {
    font-size: 34px;
    text-shadow: 0 0 12px #8ec8ff;
    margin-bottom: 18px;
}

.story-plot {
    font-size: 14px;
    opacity: 0.9;
    text-align: center;
    max-width: 900px;
    margin: auto;
    line-height: 1.4;
}

/* Griglia modalità */
.modes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.mode-card {
    background: radial-gradient(circle at 20% 0, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.18);
    padding: 20px 18px 18px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: 0.22s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.55);
}

.mode-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #9ed8ff;
    background: radial-gradient(circle at 25% -10%, rgba(174,222,255,0.35), rgba(255,255,255,0.08));
    box-shadow: 0 12px 26px rgba(0,0,0,0.65);
}

.mode-card p {
    font-size: 16px;
    margin-top: 8px;
}

.mode-description {
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.86;
}

/* ===========================
   PULSANTE "ENTRA" NELLE MODALITÀ
   =========================== */

/* Vale per qualunque <button> dentro la card
   e per eventuale classe .mode-enter se la usi nei renderer */
.mode-card button,
.mode-enter {
    margin-top: 14px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #7fd0ff;
    background: linear-gradient(135deg, #2f6fb0, #46a1dd);
    color: #eaf6ff;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 10px #5fbdf7aa;
    transition: 0.2s ease;
}

.mode-card button:hover,
.mode-enter:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 14px rgba(0,0,0,0.7),
        0 0 16px #8cd5ffcc;
    background: linear-gradient(135deg, #3c83c5, #55b5ee);
}

/* ===========================
   ICONS – SIGILLI RUNICI
   =========================== */

.icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    border: 2px solid #9ed8ff;
    box-shadow: 0 0 12px #9ed8ffaa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon::after {
    font-size: 40px;
    line-height: 1;
}

.icon-story::after { content: "ᛟ"; color: #e3f7ff; }
.icon-battle::after { content: "ᛏ"; color: #ffb2b2; }
.icon-tv-story::after { content: "ᚦ"; color: #fff8c2; }
.icon-series::after { content: "ᚱ"; color: #c6ffd0; }

/* ===========================
   CHAT / BATTLE LOG
   =========================== */

.chat-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.chat-bubble {
    background: rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 6px 10px;
    max-width: 80%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

.chat-name {
    font-size: 0.75rem;
    font-weight: bold;
    opacity: 0.85;
    margin-bottom: 2px;
}

.chat-text {
    font-size: 0.85rem;
    line-height: 1.45;
}

.battle-log {
    background: rgba(0,0,0,0.60);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.battle-log::-webkit-scrollbar {
    width: 6px;
}
.battle-log::-webkit-scrollbar-thumb {
    background: rgba(156,208,255,0.8);
    border-radius: 10px;
}

/* ===========================
   AVATAR SPEAKER
   =========================== */

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.4);
}

.chat-avatar::after {
    position: absolute;
    font-size: 20px;
    top: 6px;
    left: 9px;
}

.speaker-narrator { background: linear-gradient(135deg, #333, #555); }
.speaker-narrator::after { content: "᛫"; }

.speaker-lagertha { background: linear-gradient(135deg, #7ac7ff, #349fe3); }
.speaker-lagertha::after { content: "ᛟ"; }

.speaker-wolf { background: linear-gradient(135deg, #aaa, #777); }
.speaker-wolf::after { content: "🐺"; }

.speaker-raider { background: linear-gradient(135deg, #8c2e2e, #b43737); }
.speaker-raider::after { content: "ᚦ"; }

.speaker-berserker { background: linear-gradient(135deg, #e38a31, #c86a10); }
.speaker-berserker::after { content: "🔥"; }

.speaker-shadowKing { background: linear-gradient(135deg, #3e2c63, #1c0e33); }
.speaker-shadowKing::after { content: "☠️"; }

.speaker-valhalla { background: linear-gradient(135deg, #f5d97a, #d7b84e); }
.speaker-valhalla::after { content: "✨"; }

/* ===========================
   COMBATTIMENTO
   =========================== */

.battle-container {
    background: rgba(0,0,0,0.68);
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 26px rgba(0,0,0,0.6);
}

.battle-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.status-block {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.16);
}

.status-block h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.status-block p {
    font-size: 0.85rem;
}

.battle-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 768px) {
    .battle-controls {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Pulsante Sito Ufficiale */
.official-btn {
    border-color: #7fffda;
    background: linear-gradient(135deg, rgba(140,255,220,0.22), rgba(0,0,0,0.55));
    color: #e6fff7;
    font-weight: 700;
    box-shadow: 0 0 10px #7fffdaa0;
    text-shadow: 0 0 6px #afffe9;
}

.official-btn:hover {
    background: linear-gradient(135deg, rgba(160,255,230,0.35), rgba(0,0,0,0.55));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 0 16px #afffe9cc,
        0 0 26px #7fffdaad inset;
}