/* ============================================================================
 * presentation.css — design system della pagina /presentation di ImperiaWorld
 *
 * Foglio di stile AUTONOMO: la pagina e' un documento HTML intero servito da
 * `resources/views/components/frontend/pages/presentation.blade.php` tramite
 * il layout `layouts.standalone`, quindi qui non arrivano ne' Tailwind ne'
 * `app.scss`. Tutto cio' che serve alla pagina sta in questo file.
 *
 * Prefisso unico `iwp-` (ImperiaWorld Presentation): nessuna regola puo'
 * sfuggire su altre pagine del sito.
 *
 * Dipendenze esterne (caricate dalla Blade): Font Awesome 6.4 (icone) e i
 * font Cinzel + Onest da Google Fonts.
 *
 * NON e' compilato da Vite: si serve statico da public/, come iw2-theme.css.
 * Modifiche -> ricordarsi `php artisan view:clear` + reload php-fpm sul server
 * (opcache ha validate_timestamps=Off).
 * ========================================================================== */

/* --- Palette ------------------------------------------------------------- */
:root {
    --iwp-text-gold:    #6cc9f0;   /* accenti, titoli, parole in risalto      */
    --iwp-text-warm:    #d8ecff;   /* titoli di sezione                       */
    --iwp-text-light:   #b4c0d4;   /* testo secondario                        */
    --iwp-text-primary: #8ea0bc;   /* corpo del testo                         */
    --iwp-text-muted:   #707e98;   /* etichette, note                         */
    --iwp-text-dim:     #7e8aa0;   /* testo disattivato                       */
    --iwp-border-light: #5f88c4;
    --iwp-bg-darker:    #101724;
    --iwp-accent-green: #6abf7a;   /* bonus positivi (tabella biologo)        */
}

/* --- Base del documento -------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    background: #080c14;
    color: var(--iwp-text-primary);
    font-family: Onest, "Segoe UI", system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

body.iwp-no-scroll {
    overflow: hidden;
}

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

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

.iwp-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* --- Particelle di sfondo ------------------------------------------------ */
.iwp-particles {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.iwp-particle {
    animation: linear infinite iwpParticleFloat;
    background: #8fd0ff8f;
    border-radius: 50%;
    box-shadow: 0 0 7px #8fd0ff61;
    opacity: 0;
    position: absolute;
}

@keyframes iwpParticleFloat {
    0%   { opacity: 0; transform: translateY(100vh) scale(0); }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}

body > main,
body > nav,
body > aside {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .iwp-particles { display: none; }
    html { scroll-behavior: auto; }
}

/* --- Componenti ---------------------------------------------------------- */
.iwp-navbar {
    z-index:50;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    background:#0a0f1ae0;
    border-bottom:1px solid #4aa3ff59;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    height:64px;
    padding:0 18px;
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    box-shadow:0 6px 24px #00000073;
}

.iwp-nav-left {
    align-items:center;
    gap:14px;
    min-width:0;
    display:flex;
}

.iwp-nav-logo img {
    width:auto;
    height:44px;
    display:block;
}

.iwp-nav-divider {
    background:#4aa3ff66;
    width:1px;
    height:30px;
}

.iwp-nav-links {
    align-items:center;
    gap:4px;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
}

.iwp-nav-btn {
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--iwp-text-light);
    white-space:nowrap;
    border-radius:4px;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    transition:color .18s,background .18s;
    display:inline-flex;
}

.iwp-nav-btn i {
    color:var(--iwp-text-gold);
    font-size:11px;
}

.iwp-nav-btn:hover {
    color:var(--iwp-text-warm);
    background:#4aa3ff24;
}

.iwp-nav-cta {
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#081018;
    white-space:nowrap;
    background:linear-gradient(135deg,#8fe0ff,#4aa3ff 55%,#2f7ad9);
    border-radius:5px;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    font-size:12px;
    font-weight:800;
    transition:filter .18s,transform .18s;
    display:inline-flex;
    box-shadow:0 0 0 1px #ffffff26 inset,0 4px 16px #2f7ad966;
    animation:iwp-cta-pulse 2.6s ease-in-out infinite;
}

.iwp-nav-cta i {
    color:#081018;
    font-size:11px;
}

.iwp-nav-cta:hover {
    filter:brightness(1.08);
    transform:translateY(-1px);
}

@keyframes iwp-cta-pulse {
    0%, 100% { box-shadow:0 0 0 1px #ffffff26 inset,0 4px 16px #2f7ad966; }
    50%      { box-shadow:0 0 0 1px #ffffff26 inset,0 4px 26px #6cc9f0b3; }
}

@media (prefers-reduced-motion:reduce) {
    .iwp-nav-cta { animation:none; }
}

.iwp-nav-count {
    align-items:center;
    gap:6px;
    display:flex;
}

.iwp-nav-count-item {
    background:#10172499;
    border:1px solid #4aa3ff66;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    min-width:44px;
    padding:4px 6px;
    display:flex;
}

.iwp-nav-count-num {
    font-variant-numeric:tabular-nums;
    background:linear-gradient(#f3dd9e,#c9a24a 60%,#9a7630);
    color:#0000;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:16px;
    font-weight:800;
    line-height:1.15;
}

.iwp-nav-count-lbl {
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--iwp-text-muted);
    font-size:8px;
}

.iwp-nav-count-colon {
    color:var(--iwp-text-gold);
    opacity:.7;
    font-weight:800;
}

.iwp-nav-live {
    letter-spacing:.14em;
    text-transform:uppercase;
    background:linear-gradient(#f3dd9e,#c9a24a 60%,#9a7630);
    color:#0000;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:13px;
    font-weight:800;
}

.iwp-nav-right {
    align-items:center;
    gap:8px;
    display:flex;
}

.iwp-dropdown {
    position:relative;
}

.iwp-dropdown-btn {
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--iwp-text-light);
    cursor:pointer;
    background:#1017248c;
    border:1px solid #4aa3ff66;
    border-radius:4px;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    transition:color .18s,border-color .18s;
    display:inline-flex;
}

.iwp-dropdown-btn:hover {
    color:var(--iwp-text-warm);
    border-color:var(--iwp-border-light);
}

.iwp-dropdown-btn .iwp-arrow {
    font-size:9px;
    transition:transform .18s;
}

.iwp-dropdown.open .iwp-arrow {
    transform:rotate(180deg);
}

.iwp-dropdown-content {
    z-index:60;
    background:#0c1420f7;
    border:1px solid #4aa3ff66;
    border-radius:6px;
    flex-direction:column;
    min-width:170px;
    padding:6px;
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    box-shadow:0 14px 34px #0000008c;
}

.iwp-dropdown.open .iwp-dropdown-content {
    display:flex;
}

.iwp-dropdown-content a,
.iwp-dropdown-content button {
    color:var(--iwp-text-light);
    cursor:pointer;
    text-align:left;
    background:0 0;
    border:0;
    border-radius:4px;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    font-size:12.5px;
    font-weight:600;
    display:flex;
}

.iwp-dropdown-content a:hover,
.iwp-dropdown-content button:hover {
    color:var(--iwp-text-warm);
    background:#4aa3ff29;
}

.iwp-dropdown-content i {
    text-align:center;
    width:16px;
    color:var(--iwp-text-gold);
}

.iwp-dropdown-content--scroll {
    scrollbar-width:thin;
    scrollbar-color:#4aa3ff73 transparent;
    max-height:320px;
    overflow-y:auto;
}

.iwp-lang-dd-flag {
    object-fit:cover;
    border-radius:2px;
    width:20px;
    height:14px;
    box-shadow:0 1px 4px #00000080;
}

.iwp-sidebar {
    z-index:40;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    scrollbar-width:thin;
    scrollbar-color:#4aa3ff73 transparent;
    background:#0b111ddb;
    border-left:1px solid #4aa3ff4d;
    width:256px;
    padding:18px 12px 28px;
    position:fixed;
    top:64px;
    bottom:0;
    right:0;
    overflow-y:auto;
}

.iwp-sidebar-title {
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    margin:18px 8px 8px;
    font-size:10.5px;
    font-weight:800;
}

.iwp-sidebar-title:first-child {
    margin-top:2px;
}

.iwp-sidebar ul {
    flex-direction:column;
    gap:2px;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
}

.iwp-sidebar-link {
    color:var(--iwp-text-dim);
    cursor:pointer;
    border-right:2px solid #0000;
    border-radius:4px;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    font-size:12.5px;
    font-weight:600;
    transition:color .15s,background .15s,border-color .15s;
    display:flex;
}

.iwp-sidebar-link i {
    text-align:center;
    width:16px;
    color:var(--iwp-text-muted);
    font-size:12px;
    transition:color .15s;
}

.iwp-sidebar-link:hover {
    color:var(--iwp-text-light);
    background:#4aa3ff1a;
}

.iwp-sidebar-link.active {
    color:var(--iwp-text-warm);
    border-right-color:var(--iwp-text-gold);
    background:#4aa3ff29;
}

.iwp-sidebar-link.active i {
    color:var(--iwp-text-gold);
}

.iwp-main {
    z-index:1;
    padding-top:64px;
    position:relative;
}

@media (min-width:1100px) {
    .iwp-main {
        margin-right:256px;
    }
}

@media (max-width:1099.98px) {
    .iwp-sidebar {
        display:none;
    }
}

.iwp-section {
    justify-content:center;
    align-items:center;
    min-height:82vh;
    padding:56px 20px;
    scroll-margin-top:76px;
    display:flex;
}

.iwp-section--bg {
    background-position:50%;
    background-size:cover;
    background-attachment:scroll;
    position:relative;
}

.iwp-card {
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    background:linear-gradient(165deg,#141d2ceb,#101724f0);
    border:1px solid #4aa3ff61;
    border-radius:6px;
    width:100%;
    max-width:1000px;
    padding:52px 34px 38px;
    position:relative;
    box-shadow:0 22px 60px #00000080,inset 0 0 90px #6cc9f00a;
}

.iwp-card--narrow {
    max-width:760px;
}

/* Solo due spigoli diagonali (alto-sx/basso-dx), arrotondati: lo stesso
   motivo di .iw2-panel nel resto del sito, non le 4 staffe squadrate. */
.iwp-corner {
    pointer-events:none;
    border:0 solid #6cc9f099;
    width:16px;
    height:16px;
    position:absolute;
}

.iwp-corner.tr,
.iwp-corner.bl {
    display:none;
}

.iwp-corner.tl {
    border-width:1.5px 0 0 1.5px;
    border-radius:6px 0 0 0;
    top:-1px;
    left:-1px;
}

.iwp-corner.br {
    border-width:0 1.5px 1.5px 0;
    border-radius:0 0 6px 0;
    bottom:-1px;
    right:-1px;
}

.iwp-card-icon {
    background:linear-gradient(#1a2436,#0c1420);
    border:1px solid #6cc9f08c;
    border-radius:6px;
    justify-content:center;
    align-items:center;
    width:52px;
    height:52px;
    display:flex;
    position:absolute;
    top:-26px;
    left:50%;
    transform:translate(-50%);
    box-shadow:0 8px 22px #0000008c,0 0 18px #6cc9f029;
}

.iwp-card-icon i {
    color:var(--iwp-text-gold);
    filter:drop-shadow(0 0 8px #6cc9f066);
    font-size:20px;
}

.iwp-title {
    text-align:center;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--iwp-text-warm);
    text-shadow:0 2px 14px #6cc9f040;
    margin:0;
    font-size:clamp(18px,3.2vw,26px);
    font-weight:800;
}

.iwp-title-divider {
    background:linear-gradient(90deg,#0000,#6cc9f0,#0000);
    width:150px;
    height:2px;
    margin:14px auto 26px;
}

.iwp-text p {
    color:var(--iwp-text-primary);
    margin:0 0 14px;
    font-size:13.5px;
    line-height:1.75;
}

.iwp-text p:last-child {
    margin-bottom:0;
}

.iwp-gold {
    color:var(--iwp-text-gold);
    font-weight:700;
}

.iwp-text--center {
    text-align:center;
}

.iwp-body {
    align-items:center;
    gap:26px;
    display:flex;
}

.iwp-body--stack {
    flex-direction:column;
}

@media (max-width:860px) {
    .iwp-body {
        flex-direction:column;
    }
}

.iwp-body .iwp-text {
    flex:1;
    min-width:0;
}

.iwp-media {
    aspect-ratio:16/10;
    background:radial-gradient(circle at 50% 40%,#6cc9f012,#0000 65%),linear-gradient(#101724e6,#0a0f1ae6);
    border:1px solid #4aa3ff66;
    border-radius:4px;
    flex-direction:column;
    flex:1;
    justify-content:center;
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    display:flex;
    position:relative;
    overflow:hidden;
}

.iwp-media--vertical {
    aspect-ratio:9/14;
    align-self:center;
    max-width:320px;
}

.iwp-media--image {
    aspect-ratio:auto;
}

.iwp-media--image img,
.iwp-media--image video {
    width:100%;
    height:auto;
    display:block;
}

.iwp-media-icon {
    color:#6cc9f080;
    filter:drop-shadow(0 0 14px #6cc9f040);
    font-size:34px;
}

.iwp-media-label {
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--iwp-text-muted);
    font-size:10.5px;
    font-weight:700;
}

/* Spigoli opposti rispetto a .iwp-corner (alto-dx/basso-sx): le cornici dei
   riquadri media non ripetono lo stesso disegno della card che le contiene. */
.iwp-inner-corner {
    border:0 solid #6cc9f08c;
    width:12px;
    height:12px;
    position:absolute;
}

.iwp-inner-corner.tl,
.iwp-inner-corner.br {
    display:none;
}

.iwp-inner-corner.tr {
    border-width:1.5px 1.5px 0 0;
    border-radius:0 5px 0 0;
    top:-1px;
    right:-1px;
}

.iwp-inner-corner.bl {
    border-width:0 0 1.5px 1.5px;
    border-radius:0 0 0 5px;
    bottom:-1px;
    left:-1px;
}

.iwp-lang-grid {
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    margin-top:30px;
    display:grid;
}

@media (max-width:900px) {
    .iwp-lang-grid {
        grid-template-columns:repeat(4,1fr);
    }
}

@media (max-width:560px) {
    .iwp-lang-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

.iwp-lang-item {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:14px 8px 12px;
    transition:border-color .18s,box-shadow .18s,transform .18s;
    display:flex;
}

.iwp-lang-item:hover {
    border-color:#6cc9f099;
    transform:translateY(-2px);
    box-shadow:0 0 14px #6cc9f029;
}

.iwp-lang-flag {
    object-fit:cover;
    border-radius:2px;
    width:28px;
    height:20px;
    box-shadow:0 2px 8px #00000080;
}

.iwp-lang-name {
    letter-spacing:.04em;
    color:var(--iwp-text-light);
    text-align:center;
    font-size:11px;
    font-weight:600;
}

.iwp-start {
    margin-top:30px;
}

.iwp-start-title {
    text-align:center;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    margin:0 0 14px;
    font-size:13px;
    font-weight:800;
}

.iwp-start-grid {
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    display:grid;
}

@media (max-width:760px) {
    .iwp-start-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .iwp-start-grid>:first-child {
        grid-column:1/-1;
    }
}

.iwp-start-item {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:16px 10px 12px;
    transition:border-color .18s,box-shadow .18s,transform .18s;
    display:flex;
}

.iwp-start-item:hover {
    border-color:#6cc9f099;
    transform:translateY(-2px);
    box-shadow:0 0 14px #6cc9f029;
}

.iwp-start-icon {
    background:#0a0f1a99;
    border:1px solid #4aa3ff59;
    border-radius:4px;
    justify-content:center;
    align-items:center;
    width:52px;
    height:52px;
    display:flex;
    position:relative;
}

.iwp-start-icon img {
    object-fit:contain;
    filter:drop-shadow(0 0 8px #6cc9f04d);
    width:auto;
    max-width:40px;
    height:auto;
    max-height:44px;
}

.iwp-start-count {
    color:var(--iwp-text-warm);
    background:#0a0f1af2;
    border:1px solid #6cc9f080;
    border-radius:999px;
    padding:1px 5px;
    font-size:9.5px;
    font-weight:800;
    position:absolute;
    bottom:-6px;
    right:-6px;
}

.iwp-start-name {
    letter-spacing:.03em;
    text-align:center;
    color:var(--iwp-text-light);
    font-size:11px;
    font-weight:600;
}

.iwp-npc {
    margin-top:30px;
}

.iwp-npc-grid {
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    display:grid;
}

@media (max-width:640px) {
    .iwp-npc-grid {
        grid-template-columns:1fr;
    }
}

.iwp-npc-card {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:18px 14px 16px;
    transition:border-color .18s,box-shadow .18s;
    display:flex;
}

.iwp-npc-card:hover,
.iwp-npc-card.open {
    border-color:#6cc9f099;
    box-shadow:0 0 16px #6cc9f024;
}

.iwp-npc-portrait {
    background:radial-gradient(at 50% 88%,#6cc9f024,#0000 62%),#0a0f1a99;
    border:1px solid #4aa3ff61;
    border-radius:4px;
    justify-content:center;
    align-items:flex-end;
    width:124px;
    height:232px;
    padding:10px 8px 6px;
    display:flex;
    overflow:hidden;
}

.iwp-npc-portrait img {
    object-fit:contain;
    filter:drop-shadow(0 6px 14px #0009);
    width:auto;
    max-width:100%;
    height:auto;
    max-height:100%;
}

.iwp-npc-fallback {
    color:#6cc9f073;
    filter:drop-shadow(0 0 12px #6cc9f040);
    font-size:42px;
}

.iwp-npc-name {
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--iwp-text-warm);
    text-align:center;
    font-size:13px;
    font-weight:700;
}

.iwp-npc-btn {
    color:#f2f8ff;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    background:linear-gradient(#3a82ea 0%,#4aa3ff 55%,#143c82 100%);
    border:1px solid #0f2d61;
    border-radius:4px;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    font-size:11.5px;
    font-weight:800;
    transition:transform .18s,filter .18s;
    display:inline-flex;
    box-shadow:0 3px 10px #00000073,inset 0 1px #8fd0ff59;
}

.iwp-npc-btn:hover {
    filter:brightness(1.1);
    transform:translateY(-1px);
}

.iwp-npc-btn:active {
    filter:brightness(.95);
    transform:translateY(0);
}

.iwp-npc-panel {
    background:#0a0f1a8c;
    border:1px solid #6cc9f059;
    border-radius:4px;
    margin-top:14px;
    padding:18px 16px;
}

.iwp-npc-panel-title {
    text-align:center;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    margin:0 0 14px;
    font-size:12px;
    font-weight:800;
}

.iwp-npc-items {
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
    gap:10px;
    display:grid;
}

.iwp-npc-item {
    background:#141d2c99;
    border:1px solid #4aa3ff4d;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:12px 6px 10px;
    transition:border-color .18s;
    display:flex;
}

.iwp-npc-item:hover {
    border-color:#6cc9f08c;
}

.iwp-npc-item-icon {
    background:#0a0f1a99;
    border:1px solid #4aa3ff59;
    border-radius:4px;
    justify-content:center;
    align-items:center;
    width:46px;
    height:46px;
    display:flex;
    position:relative;
}

.iwp-npc-item-icon img {
    object-fit:contain;
    width:auto;
    max-width:36px;
    height:auto;
    max-height:40px;
}

.iwp-npc-item-count {
    color:var(--iwp-text-warm);
    background:#0a0f1af2;
    border:1px solid #6cc9f080;
    border-radius:999px;
    padding:1px 5px;
    font-size:9px;
    font-weight:800;
    position:absolute;
    bottom:-6px;
    right:-6px;
}

.iwp-npc-item-name {
    text-align:center;
    color:var(--iwp-text-light);
    font-size:10.5px;
    font-weight:600;
}

.iwp-npc-empty {
    text-align:center;
    color:var(--iwp-text-muted);
    margin:0;
    padding:18px 8px;
    font-size:12.5px;
}

.iwp-npc-empty i {
    color:var(--iwp-text-gold);
    margin-right:6px;
}

.iwp-bio-table {
    flex-direction:column;
    gap:6px;
    margin-top:30px;
    display:flex;
}

.iwp-bio-row {
    background:linear-gradient(#141d2cb8,#101724d1);
    border:1px solid #4aa3ff4d;
    border-radius:4px;
    grid-template-columns:70px 44px 1fr 1fr 92px;
    align-items:center;
    gap:12px;
    padding:7px 12px;
    transition:border-color .18s,box-shadow .18s;
    display:grid;
}

.iwp-bio-row:hover {
    border-color:#6cc9f08c;
    box-shadow:0 0 12px #6cc9f01f;
}

.iwp-bio-level {
    letter-spacing:.04em;
    color:var(--iwp-text-warm);
    white-space:nowrap;
    font-size:12px;
    font-style:italic;
    font-weight:800;
}

.iwp-bio-icon {
    background:#0a0f1a99;
    border:1px solid #4aa3ff59;
    border-radius:4px;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    display:flex;
}

.iwp-bio-icon img {
    object-fit:contain;
    filter:drop-shadow(0 0 6px #6cc9f040);
    width:32px;
    height:32px;
}

.iwp-bio-name {
    color:var(--iwp-text-light);
    font-size:12.5px;
    font-weight:600;
}

.iwp-bio-count {
    color:var(--iwp-text-gold);
    font-weight:700;
}

.iwp-bio-bonus {
    color:var(--iwp-accent-green);
    font-size:12px;
    font-weight:600;
}

.iwp-bio-duration {
    text-align:right;
    color:var(--iwp-text-primary);
    white-space:nowrap;
    font-size:11.5px;
    font-style:italic;
    font-weight:700;
}

.iwp-bio-duration--soon {
    color:var(--iwp-text-muted);
}

@media (max-width:700px) {
    .iwp-bio-row {
        grid-template-columns:54px 40px 1fr 80px;
    }
    .iwp-bio-bonus {
        grid-area:2/3/auto/5;
    }
}

.iwp-sep {
    z-index:10;
    justify-content:center;
    align-items:center;
    width:100%;
    height:64px;
    margin-top:-32px;
    margin-bottom:-32px;
    padding:0;
    display:flex;
    position:relative;
}

.iwp-sep:before {
    content:"";
    filter:drop-shadow(0 2px 3px #000000f2);
    z-index:1;
    background:linear-gradient(90deg,#7896c833 0%,#7896c840 20%,#7896c866 35%,#8fd0ff 45.5%,#0000 46% 54%,#8fd0ff 54.5%,#7896c866 65%,#7896c840 80%,#7896c833 100%);
    height:1px;
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-50%);
    -webkit-mask-image:linear-gradient(90deg,#000 0% 45.5%,#0000 46% 54%,#000 54.5% 100%);
    mask-image:linear-gradient(90deg,#000 0% 45.5%,#0000 46% 54%,#000 54.5% 100%);
}

.iwp-sep img {
    z-index:2;
    object-fit:contain;
    filter:drop-shadow(0 0 16px #8fd0ff59)drop-shadow(0 4px 10px #000000e6);
    width:auto;
    height:52px;
    transition:filter .3s,transform .3s;
    position:relative;
    transform:translateY(-1px);
}

.iwp-sep img:hover {
    transform:translateY(-2px)scale(1.02);
}

.iwp-hero {
    min-height:100vh;
    padding-top:110px;
    position:relative;
    overflow:hidden;
}

.iwp-hero-video {
    object-fit:cover;
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}

.iwp-hero-overlay {
    background:radial-gradient(at 50% 30%,#00000040,#080c14d9 90%),linear-gradient(#0a0f1a8c,#0a0f1ab8);
    position:absolute;
    inset:0;
}

.iwp-hero-content {
    z-index:1;
    flex-direction:column;
    align-items:center;
    gap:8px;
    display:flex;
    position:relative;
}

.iwp-hero-logo {
    filter:drop-shadow(0 14px 45px #000000d9);
    width:min(300px,62vw);
    height:auto;
}

.iwp-hero-subtitle {
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--iwp-text-light);
    text-shadow:0 2px 12px #000c;
    margin:0 0 6px;
    font-size:13px;
    font-weight:700;
}

.iwp-hero-cta-row {
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:10px;
    display:flex;
}

.iwp-hero-cta {
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    border-radius:8px;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    font-size:15px;
    font-weight:800;
    transition:filter .18s,transform .18s,box-shadow .18s;
    display:inline-flex;
}

.iwp-hero-cta--primary {
    color:#081018;
    background:linear-gradient(135deg,#8fe0ff,#4aa3ff 55%,#2f7ad9);
    box-shadow:0 0 0 1px #ffffff26 inset,0 8px 30px #2f7ad980;
    animation:iwp-cta-pulse-lg 2.6s ease-in-out infinite;
}

.iwp-hero-cta--primary i {
    font-size:16px;
}

.iwp-hero-cta--primary:hover {
    filter:brightness(1.08);
    transform:translateY(-2px);
}

.iwp-hero-cta--secondary {
    color:var(--iwp-text-warm);
    background:#101724b3;
    border:1px solid var(--iwp-border-light);
}

.iwp-hero-cta--secondary:hover {
    color:#fff;
    background:#101724e6;
    border-color:#8fe0ff;
    transform:translateY(-2px);
}

@keyframes iwp-cta-pulse-lg {
    0%, 100% { box-shadow:0 0 0 1px #ffffff26 inset,0 8px 30px #2f7ad980; }
    50%      { box-shadow:0 0 0 1px #ffffff26 inset,0 8px 44px #6cc9f0d9; }
}

@media (prefers-reduced-motion:reduce) {
    .iwp-hero-video {
        display:none;
    }
    .iwp-hero-cta--primary {
        animation:none;
    }
}

.iwp-info {
    text-align:left;
    flex-direction:column;
    gap:14px;
    margin-top:30px;
    display:flex;
}

.iwp-info-launch {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #6cc9f073;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:22px 18px;
    display:flex;
    box-shadow:inset 0 0 34px #6cc9f012;
}

.iwp-info-launch-label {
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    font-size:11px;
    font-weight:800;
}

.iwp-info-launch-row {
    align-items:center;
    gap:12px;
    display:flex;
}

.iwp-info-launch-row i {
    color:var(--iwp-text-gold);
    filter:drop-shadow(0 0 10px #6cc9f059);
    font-size:20px;
}

.iwp-info-launch-date {
    letter-spacing:.04em;
    color:var(--iwp-text-warm);
    text-shadow:0 0 18px #d8ecff40;
    font-size:22px;
    font-weight:800;
}

.iwp-info-discord {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    display:flex;
}

@media (max-width:640px) {
    .iwp-info-discord {
        text-align:center;
        flex-direction:column;
    }
}

.iwp-info-discord-icon {
    color:#5865f2;
    filter:drop-shadow(0 0 12px #5865f259);
    font-size:30px;
}

.iwp-info-discord-text {
    flex-direction:column;
    flex:1;
    gap:4px;
    display:flex;
}

.iwp-info-discord-title {
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--iwp-text-light);
    font-size:13px;
    font-weight:800;
}

.iwp-info-discord-desc {
    color:var(--iwp-text-dim);
    font-size:13px;
    line-height:1.55;
}

.iwp-info-discord-btn {
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--iwp-bg-darker);
    white-space:nowrap;
    background:linear-gradient(#f3dd9e,#c9a24a 60%,#9a7630);
    border-radius:4px;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    font-size:12px;
    font-weight:800;
    transition:filter .18s,transform .18s;
    display:inline-flex;
}

.iwp-info-discord-btn:hover {
    filter:brightness(1.08);
    transform:translateY(-1px);
}

.iwp-info-socials-title {
    text-align:center;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    margin:10px 0 0;
    font-size:13px;
    font-weight:800;
}

.iwp-info-socials {
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    display:grid;
}

@media (max-width:640px) {
    .iwp-info-socials {
        grid-template-columns:1fr;
    }
}

.iwp-info-social {
    letter-spacing:.04em;
    color:var(--iwp-text-light);
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:18px 10px 14px;
    font-size:12px;
    font-weight:600;
    transition:border-color .18s,box-shadow .18s,transform .18s;
    display:flex;
}

.iwp-info-social:hover {
    border-color:#6cc9f099;
    transform:translateY(-2px);
    box-shadow:0 0 14px #6cc9f029;
}

.iwp-info-social-icon {
    font-size:26px;
}

.iwp-info-social--whatsapp .iwp-info-social-icon {
    color:#25d366;
}

.iwp-info-social--instagram .iwp-info-social-icon {
    color:#e1306c;
}

.iwp-info-social--facebook .iwp-info-social-icon {
    color:#1877f2;
}

.iwp-basics {
    text-align:left;
    flex-direction:column;
    gap:12px;
    margin-top:30px;
    display:flex;
}

.iwp-basics-item {
    background:linear-gradient(#141d2cbf,#101724d9);
    border:1px solid #4aa3ff52;
    border-radius:4px;
    padding:16px 18px;
    transition:border-color .18s,box-shadow .18s;
}

.iwp-basics-item:hover {
    border-color:#6cc9f080;
    box-shadow:0 0 14px #6cc9f01f;
}

.iwp-basics-q {
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--iwp-text-gold);
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    font-size:13.5px;
    font-weight:800;
    display:flex;
}

.iwp-basics-q i {
    opacity:.85;
    font-size:15px;
}

.iwp-basics-a {
    color:var(--iwp-text-primary);
    margin:0;
    font-size:13.5px;
    line-height:1.65;
}

.iwp-basics-a p {
    color:var(--iwp-text-primary);
    margin:0;
    font-size:13.5px;
    line-height:1.65;
}

.iwp-basics-body--media {
    align-items:center;
    gap:18px;
    display:flex;
}

.iwp-basics-body--media .iwp-basics-a {
    flex:1;
}

.iwp-basics-media {
    background:#0a0f1a99;
    border:1px solid #4aa3ff59;
    border-radius:4px;
    flex:0 0 320px;
    max-width:320px;
    overflow:hidden;
}

.iwp-basics-media video {
    width:100%;
    height:auto;
    display:block;
}

@media (max-width:760px) {
    .iwp-basics-body--media {
        flex-direction:column;
    }
    .iwp-basics-media {
        flex-basis:auto;
        width:100%;
        max-width:380px;
        margin:0 auto;
    }
}

.iwp-gallery {
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:12px;
    margin-top:24px;
    display:grid;
}

@media (max-width:760px) {
    .iwp-gallery {
        grid-template-columns:1fr;
    }
}

.iwp-gallery-item {
    cursor:pointer;
    background:#0a0f1a99;
    border:1px solid #4aa3ff59;
    border-radius:4px;
    padding:0;
    transition:border-color .18s,box-shadow .18s,transform .18s;
    display:block;
    position:relative;
    overflow:hidden;
}

.iwp-gallery-item:hover {
    border-color:#6cc9f099;
    transform:translateY(-2px);
    box-shadow:0 0 14px #6cc9f029;
}

.iwp-gallery-item img {
    width:100%;
    height:auto;
    display:block;
}

.iwp-gallery-zoom {
    width:30px;
    height:30px;
    color:var(--iwp-text-gold);
    opacity:0;
    background:#0a0f1ad9;
    border:1px solid #6cc9f080;
    border-radius:4px;
    justify-content:center;
    align-items:center;
    font-size:13px;
    transition:opacity .18s;
    display:flex;
    position:absolute;
    bottom:8px;
    right:8px;
}

.iwp-gallery-item:hover .iwp-gallery-zoom {
    opacity:1;
}

.iwp-lightbox {
    z-index:100;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    background:#080c14eb;
    justify-content:center;
    align-items:center;
    padding:28px;
    animation:.18s ease-out iwpLightboxIn;
    display:flex;
    position:fixed;
    inset:0;
}

@keyframes iwpLightboxIn {
    0% {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.iwp-lightbox img {
    border:1px solid #6cc9f080;
    border-radius:6px;
    width:auto;
    max-width:min(1400px,94vw);
    height:auto;
    max-height:88vh;
    box-shadow:0 30px 80px #000000b3,0 0 40px #6cc9f01f;
}

.iwp-lightbox-close {
    width:40px;
    height:40px;
    color:var(--iwp-text-light);
    cursor:pointer;
    background:#101724d9;
    border:1px solid #4aa3ff80;
    border-radius:4px;
    justify-content:center;
    align-items:center;
    font-size:17px;
    transition:color .18s,border-color .18s;
    display:flex;
    position:absolute;
    top:18px;
    right:18px;
}

.iwp-lightbox-close:hover {
    color:var(--iwp-text-warm);
    border-color:var(--iwp-border-light);
}

@media (prefers-reduced-motion:reduce) {
    .iwp-lightbox {
        animation:none;
    }
}

/* ============================================================================
 * Adattamenti ImperiaWorld
 * Piccole differenze rispetto all'impianto originale, tenute separate per
 * essere riconoscibili a colpo d'occhio.
 * ========================================================================== */

/* Le lingue supportate sono 8, non 7. */
.iwp-lang-grid {
    grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 900px) {
    .iwp-lang-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
    .iwp-lang-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Il logo nella barra superiore ha proporzioni diverse da quello originale. */
.iwp-nav-logo img {
    height: 40px;
    width: auto;
}

/* I banchi NPC sono 15, non 3: la griglia si adatta invece di stare fissa. */
.iwp-npc-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Senza ritratti dei mob (nel repo non esistono immagini per gli NPC) la
   scheda usa il segnaposto Font Awesome, come fa l'originale quando il
   ritratto non si carica. */
.iwp-npc-portrait .iwp-npc-fallback {
    font-size: 34px;
}

/* `hidden` deve vincere sul display:flex della barra: il contatore online
   compare solo quando la chiamata all'API riesce. */
.iwp-nav-count[hidden] {
    display: none;
}

/* Senza ritratto vero la cornice non deve restare mezza vuota. */
.iwp-npc-portrait {
    aspect-ratio: 1;
    max-height: 108px;
}

/* Descrizione dell'oggetto sotto il nome, dove il client ne ha una.
   Troncata a tre righe: il testo completo resta nel tooltip (title). */
.iwp-npc-item-desc {
    color: var(--iwp-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 10px;
    line-height: 1.35;
    overflow: hidden;
    text-align: center;
}

/* Con la descrizione le celle vanno allargate, altrimenti sono illeggibili. */
.iwp-npc-items {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

/* Dove il ritratto dell'NPC c'e' davvero, la cornice torna verticale come nel
   disegno originale: i modelli sono figure intere, non icone quadrate. */
.iwp-npc-portrait--real {
    aspect-ratio: 3 / 4;
    max-height: none;
}

.iwp-npc-portrait--real img {
    height: 100%;
    object-fit: contain;
    width: auto;
}

/* Banchi senza ritratto: l'icona dell'oggetto va ingrandita, altrimenti resta
   un francobollo in mezzo alla cornice. */
.iwp-npc-portrait:not(.iwp-npc-portrait--real) img {
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    object-fit: contain;
    width: 58%;
}