@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;600;700;900&display=swap');

:root{
    --violet:#a42cff;
    --violet2:#e24cff;
    --text:#ffffff;
    --muted:#c7bcd6;
    --green:#63ff6b;
    --red:#ff365b;
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    background:transparent !important;
    color:var(--text);
    font-family:Inter, system-ui, sans-serif;
    overflow:hidden;
}

body.obs-ouija-page{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.obs-ouija-wrap{
    width:min(980px, 100vw);
    position:relative;
}

.obs-panel-wrap{
    width:min(1180px, 100vw);
    position:relative;
}

.obs-ouija-module{
    position:relative;
    width:100%;
}

.obs-module-title{
    margin:0 0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    pointer-events:none;
}

.obs-module-title span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid rgba(226,76,255,.42);
    color:#e6a6ff;
    background:rgba(164,44,255,.10);
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    box-shadow:0 0 18px rgba(164,44,255,.28);
}

.obs-module-title strong{
    color:#fff;
    font-size:16px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-shadow:0 0 16px rgba(164,44,255,.65);
}

.jp-ouija-board{
    position:relative;
    width:100%;
    aspect-ratio:1536 / 1024;
    overflow:hidden;
    border-radius:14px;
    background:url('../ouija/img/planche_jerlapive.png') no-repeat center center;
    background-size:contain;
    box-shadow:
        0 0 26px rgba(164,44,255,.28),
        inset 0 0 90px rgba(0,0,0,.45);
}

.jp-ouija-board::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.35) 100%),
        linear-gradient(180deg, rgba(164,44,255,.06), transparent 42%, rgba(0,0,0,.16));
}

.jp-ouija-planchette{
    position:absolute;
    left:13%;
    top:20%;
    z-index:5;
    width:25%;
    aspect-ratio:1/1;
    background:url('../ouija/img/planchette_transparente.png') no-repeat center center;
    background-size:contain;
    transform:translate(-50%, -50%);
    transition:top 1s ease, left 1s ease;
    pointer-events:none;
    filter:
        drop-shadow(0 0 10px rgba(0,0,0,.65))
        drop-shadow(0 0 16px rgba(164,44,255,.35));
}

.jp-ouija-result-wrap{
    position:absolute;
    z-index:4;
    top:61%;
    left:50%;
    width:72%;
    transform:translateX(-50%);
    pointer-events:none;
    text-align:center;
}

.jp-ouija-smoke{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(164,44,255,.32) 0%, rgba(30,15,45,.25) 50%, transparent 100%);
    opacity:0;
    transform:scale(.55);
    transition:opacity 1s ease, transform 1s ease;
    filter:blur(10px);
}

.jp-ouija-result{
    position:relative;
    z-index:2;
    min-height:42px;
    padding:9px 12px;
    color:#4b0058;
    font-family:'Bangers', cursive;
    font-size:clamp(22px, 3.2vw, 46px);
    line-height:1.08;
    letter-spacing:.03em;
    text-shadow:
        0 0 8px rgba(255,210,120,.8),
        0 0 16px rgba(164,44,255,.38);
    opacity:0;
    transform:scale(.84);
    transition:opacity 1s ease, transform 1s ease;
}

.jp-ouija-button{
    position:absolute;
    z-index:6;
    left:50%;
    bottom:9%;
    transform:translateX(-50%);
    padding:9px 19px;
    border-radius:999px;
    border:1px solid rgba(226,76,255,.52);
    color:#fff;
    background:linear-gradient(180deg, rgba(157,39,245,.92), rgba(94,13,168,.92));
    box-shadow:
        0 0 18px rgba(164,44,255,.42),
        inset 0 0 16px rgba(255,255,255,.08);
    font-weight:900;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:.22s;
}

.jp-ouija-button:hover{
    transform:translateX(-50%) translateY(-2px);
    box-shadow:0 0 28px rgba(164,44,255,.62);
}

.jp-ouija-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.jp-ouija-overlay{
    position:absolute;
    inset:0;
    z-index:7;
    pointer-events:none;
    background:rgba(0,0,0,.58);
    opacity:0;
    transition:opacity .5s ease;
}

.jp-malus-panel-module{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.jp-malus-toolbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.jp-malus-reset{
    border:1px solid rgba(226,76,255,.52);
    border-radius:999px;
    padding:10px 18px;
    color:#fff;
    background:linear-gradient(180deg, rgba(157,39,245,.92), rgba(94,13,168,.92));
    box-shadow:
        0 0 18px rgba(164,44,255,.36),
        inset 0 0 16px rgba(255,255,255,.08);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:.22s;
}

.jp-malus-reset:hover{
    transform:translateY(-2px);
    box-shadow:0 0 28px rgba(164,44,255,.58);
}

.jp-malus-counter{
    color:#15a5df;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(164,44,255,.45);
    opacity: 100%;
}

.jp-malus-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:9px;
    width:100%;
    max-height:calc(100vh - 110px);
    overflow:auto;
    padding:4px;
    scrollbar-width:thin;
    scrollbar-color:rgba(226,76,255,.75) rgba(255,255,255,.05);
}

.jp-malus-cell{
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:9px 8px;
    border-radius:10px;
    border:1px solid rgba(99,255,107,.36);
    color:#eaffee;
    background:linear-gradient(180deg, rgba(19,92,35), rgba(7,34,18));
    box-shadow:
        inset 0 0 18px rgba(99,255,107,.07),
        0 0 10px rgba(99,255,107,.14);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
    transition:.18s;
    user-select:none;
}

.jp-malus-cell:hover{
    transform:translateY(-2px);
    border-color:rgba(99,255,107,.72);
    box-shadow:0 0 16px rgba(99,255,107,.24);
}

.jp-malus-cell.is-selected{
    color:#fff;
    border-color:rgba(255,255,255,.86);
    background:linear-gradient(180deg, rgba(215,7,48,.94), rgba(95,8,25,.92));
    box-shadow:
        0 0 18px rgba(255,49,81,.42),
        inset 0 0 18px rgba(255,255,255,.10);
}

@media(max-width:900px){
    body.obs-ouija-page{
        padding:10px;
    }

    .obs-module-title{
        margin-bottom:10px;
    }

    .obs-module-title strong{
        font-size:13px;
    }

    .jp-malus-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media(max-width:560px){
    .jp-malus-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .jp-malus-toolbar{
        flex-direction:column;
        gap:10px;
    }
}


/* ============================================================
   OBS : rendu transparent, sans titre au-dessus des modules
============================================================ */

html,
body,
body.obs-ouija-page{
    background:transparent !important;
}

.obs-module-title{
    display:none !important;
}

body.obs-ouija-page{
    padding:0;
}

.obs-ouija-wrap,
.obs-panel-wrap{
    background:transparent !important;
}