/* House of Eldeon - Village Map */

#village-page {
    background: #07130d;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.village-wrap {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.village-map {
    width: 100%;
    display: block;
}

/* Invisible Hotspots */

.building{
    position:absolute;
    display:block;
    cursor:pointer;
    border-radius:25px;
    transition:all .35s ease;
    z-index:10;
}

/* Magic Glow */

.building:hover{

    background:rgba(255,255,255,0.02);

    box-shadow:
        0 0 20px rgba(255,240,180,.45),
        0 0 40px rgba(255,220,120,.35),
        inset 0 0 18px rgba(255,255,255,.12);

}
.building::after{

    content:attr(data-title);

    position:absolute;

    left:50%;
    bottom:110%;

    transform:translateX(-50%) translateY(10px);

    opacity:0;

    padding:12px 18px;

    border-radius:18px;

    background:rgba(38,27,18,.94);

    color:#f8efc8;

    border:2px solid #9b7d47;

    font-family:Georgia,serif;

    font-size:18px;

    white-space:nowrap;

    pointer-events:none;

    transition:.3s;

    box-shadow:
        0 0 18px rgba(0,0,0,.45);

}
.building:hover::after{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

  

/* Hotspot positions - adjust later if needed */

.world-tree {
    left: 42%;
    top: 4%;
    width: 17%;
    height: 35%;
}

.hall-souls {
    left: 46%;
    top: 40%;
    width: 15%;
    height: 22%;
}

.nursery {
    left: 25%;
    top: 30%;
    width: 15%;
    height: 22%;
}

.market-path {
    left: 0%;
    top: 72%;
    width: 24%;
    height: 24%;
}

.adventure-path {
    right: 0%;
    top: 72%;
    width: 24%;
    height: 24%;
}
.archives {
    left: 10%;
    top: 13%;
    width: 16%;
    height: 18%;
}

.gift-grove {
    left: 75%;
    top: 10%;
    width: 16%;
    height: 18%;
}

.cottage {
    left: 05%;
    top: 44%;
    width: 18%;
    height: 18%;
}

.creator-workshop {
    left: 76%;
    top: 34%;
    width: 18%;
    height: 18%;
}

.curiosity-shop {
    left: 66%;
    top: 58%;
    width: 18%;
    height: 18%;
}
/* Building Pages */

.eldeon-building-page{
    min-height:100vh;
    background:
        radial-gradient(circle at center, rgba(255,230,150,.16), transparent 35%),
        linear-gradient(180deg, #07130d, #102017);
    color:#f8efc8;
    font-family:Georgia,serif;
    padding:70px 20px;
}

.building-scene{
    max-width:1100px;
    margin:0 auto;
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.building-panel{
    max-width:720px;
    text-align:center;
    padding:45px;
    border-radius:28px;
    background:rgba(12,24,16,.82);
    border:2px solid rgba(248,239,200,.35);
    box-shadow:0 0 45px rgba(0,0,0,.45);
}

.building-panel h1{
    font-size:48px;
    margin-bottom:10px;
}

.building-subtitle{
    font-size:20px;
    opacity:.9;
    margin-bottom:30px;
}

.world-tree-stats{
    display:grid;
    gap:18px;
    margin:30px 0;
}

.world-tree-stats strong{
    display:block;
    margin-top:6px;
    font-size:22px;
}

.npc-greeting{
    margin:25px 0;
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(248,239,200,.22);
}

.npc-greeting strong{
    color:#ffe9a6;
}

.npc-greeting p{
    margin:10px 0 0;
}

.soul-search-form{
    display:grid;
    gap:12px;
    margin:30px 0;
}

.soul-search-form label{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.8;
}

.soul-search-form input{
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(248,239,200,.35);
    background:rgba(0,0,0,.35);
    color:#f8efc8;
    font-size:18px;
}

.soul-search-form button{
    padding:14px 20px;
    border-radius:14px;
    border:none;
    background:#9b7d47;
    color:#fff8d8;
    font-size:18px;
    cursor:pointer;
}

.building-world-tree{
    background:
        radial-gradient(circle at center, rgba(130,255,170,.22), transparent 35%),
        linear-gradient(180deg, #06160d, #12351f);
}

.building-nursery{
    background:
        radial-gradient(circle at center, rgba(255,210,150,.25), transparent 35%),
        linear-gradient(180deg, #20130b, #3a2415);
}

.building-hall-of-souls{
    background:
        radial-gradient(circle at center, rgba(120,200,255,.24), transparent 35%),
        linear-gradient(180deg, #061022, #101b36);
}

.building-archives{
    background:
        radial-gradient(circle at center, rgba(255,210,120,.18), transparent 35%),
        linear-gradient(180deg, #1d1208, #2b1c10);
}

.building-gift-grove{
    background:
        radial-gradient(circle at center, rgba(255,170,220,.22), transparent 35%),
        linear-gradient(180deg, #1c0d1a, #321727);
}

.building-my-cottage{
    background:
        radial-gradient(circle at center, rgba(255,190,120,.24), transparent 35%),
        linear-gradient(180deg, #1b1008, #3a2113);
}

.building-creator-workshop{
    background:
        radial-gradient(circle at center, rgba(255,120,80,.20), transparent 35%),
        linear-gradient(180deg, #1c0d08, #37170f);
}

.building-curiosity-shop{
    background:
        radial-gradient(circle at center, rgba(180,120,255,.22), transparent 35%),
        linear-gradient(180deg, #150c25, #2b1640);
}

#world-tree-page{
    background:#06130d;
    min-height:100vh;
}

.world-tree-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.world-tree-interior-image{
    width:100%;
    display:block;
}
#world-tree-page{
    background:#06130d;
    min-height:100vh;
}

.world-tree-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.world-tree-interior-image{
    width:100%;
    display:block;
}

.tree-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:20px;
    z-index:20;
}

.tree-hotspot:hover{
    box-shadow:
        0 0 25px rgba(255,240,180,.65),
        0 0 55px rgba(255,220,120,.45);
}

/* Move these boxes until they sit over the right characters/items */

.keeper-hotspot{
    left:20%;
    top:35%;
    width:18%;
    height:42%;
}

.scroll-hotspot{
    left:40%;
    top:55%;
    width:16%;
    height:30%;
}

.librarian-hotspot{
    left:80%;
    top:55%;
    width:18%;
    height:35%;
}

.balcony-hotspot{
    left:45%;
    top:30%;
    width:20%;
    height:20%;
}

.tree-dialogue{
    position:absolute;
    left:50%;
    bottom:6%;
    transform:translateX(-50%);
    width:min(680px, 90%);
    padding:28px;
    background:rgba(28,18,10,.94);
    border:2px solid #b99852;
    border-radius:24px;
    color:#f8efc8;
    z-index:50;
    font-family:Georgia,serif;
    box-shadow:0 0 45px rgba(0,0,0,.65);
}

.tree-dialogue h2{
    margin:0 0 12px;
    font-size:30px;
    color:#ffe7a0;
}

.tree-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.5;
}

.tree-dialogue.hidden{
    display:none;
}

.dialogue-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#f8efc8;
    font-size:34px;
    cursor:pointer;
}
#nursery-page{
    background:#20180f;
    min-height:100vh;
}

.nursery-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.nursery-interior-image{
    width:100%;
    display:block;
}

.nursery-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:22px;
    z-index:20;
}

.nursery-hotspot:hover{
    box-shadow:
        0 0 25px rgba(255,245,180,.65),
        0 0 55px rgba(255,210,120,.45);
}

/* Move these while red boxes are visible */

.willow-hotspot{
    left:22%;
    top:23%;
    width:25%;
    height:52%;
}

.eggs-hotspot{
    left:1%;
    top:60%;
    width:10%;
    height:10%;
}

.baby-hotspot{
    left:52%;
    top:45%;
    width:20%;
    height:28%;
}

.care-hotspot{
    left:72%;
    top:30%;
    width:10%;
    height:18%;
}

.nursery-door-hotspot{
    left:82%;
    top:78%;
    width:15%;
    height:16%;
}

.nursery-dialogue{
    position:absolute;
    left:50%;
    bottom:6%;
    transform:translateX(-50%);
    width:min(680px, 90%);
    padding:28px;
    background:rgba(39,27,15,.94);
    border:2px solid #c9a85d;
    border-radius:24px;
    color:#fff4cf;
    z-index:50;
    font-family:Georgia,serif;
    box-shadow:0 0 45px rgba(0,0,0,.65);
}

.nursery-dialogue h2{
    margin:0 0 12px;
    font-size:30px;
    color:#ffe7a0;
}

.nursery-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.5;
}

.nursery-dialogue.hidden{
    display:none;
}

.nursery-dialogue-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff4cf;
    font-size:34px;
    cursor:pointer;
}
/* ------------------------------------------------ */
/* HALL OF SOULS */
/* ------------------------------------------------ */

#hall-of-souls-page{

background:#13081f;

min-height:100vh;

}

.hall-room{

position:relative;

max-width:1800px;

margin:0 auto;

}

.hall-image{

display:block;

width:100%;

}

.hall-hotspot{

position:absolute;

display:block;

cursor:pointer;

border:none;

background:transparent;

border-radius:22px;

z-index:20;

transition:.3s;

}

.hall-hotspot:hover{

background:rgba(255,255,255,.04);

box-shadow:

0 0 22px rgba(180,120,255,.7),

0 0 55px rgba(110,170,255,.5),

inset 0 0 18px rgba(255,255,255,.08);

}
/* ------------------------------------------------ */
/* ARCHIVES */
/* ------------------------------------------------ */

#archives-page{
    background:#120c07;
    min-height:100vh;
}

.archives-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.archives-image{
    display:block;
    width:100%;
}

.archives-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:22px;
    z-index:20;
    transition:.3s;
}

.archives-hotspot:hover{
    background:rgba(255,245,210,.05);
    box-shadow:
        0 0 22px rgba(255,220,150,.65),
        0 0 55px rgba(190,130,70,.45),
        inset 0 0 16px rgba(255,255,220,.10);
}

/* DEBUG POSITIONS - adjust these while red boxes show */

.aurelius-hotspot{
    left:8%;
    top:24%;
    width:23%;
    height:48%;
}

.scholars-hotspot{
    left:37%;
    top:44%;
    width:30%;
    height:30%;
}

.encyclopedia-hotspot{
    left:67%;
    top:61%;
    width:25%;
    height:30%;
}

.history-hotspot{
    left:76%;
    top:8%;
    width:21%;
    height:25%;
}

.research-hotspot{
    left:76%;
    top:35%;
    width:21%;
    height:21%;
}

.archives-door-hotspot{
    left:2%;
    top:82%;
    width:16%;
    height:14%;
}

/* Dialogue */

.archives-dialogue{
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:min(720px,90%);
    padding:30px;
    background:rgba(26,18,10,.96);
    border:2px solid #b88a45;
    border-radius:24px;
    color:#fff1cf;
    box-shadow:0 0 50px rgba(0,0,0,.7);
    font-family:Georgia,serif;
    z-index:50;
}

.archives-dialogue h2{
    margin:0 0 10px;
    color:#ffe0a0;
    font-size:30px;
}

.archives-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.6;
}

.archives-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff1cf;
    font-size:34px;
    cursor:pointer;
}

.hidden{
    display:none;
}

/* DEBUG POSITIONS */

.pip-hotspot{

left:40%;

top:60%;

width:15%;

height:15%;

}

.tree-hotspot{

left:45%;

top:10%;

width:18%;

height:18%;

}

.certificate-hotspot{

left:67%;

top:2%;

width:22%;

height:25%;

}

.registry-hotspot{

left:82%;

top:34%;

width:15%;

height:10%;

}

.adoption-hotspot{

left:65%;

top:38%;

width:15%;

height:15%;

}

.return-hotspot{

left:82%;

top:80%;

width:15%;

height:15%;

}

/* Dialogue */

.hall-dialogue{

position:absolute;

left:50%;

bottom:5%;

transform:translateX(-50%);

width:min(720px,90%);

padding:30px;

background:rgba(28,18,40,.96);

border:2px solid #a682ff;

border-radius:24px;

color:#f8f3ff;

box-shadow:0 0 50px rgba(0,0,0,.7);

font-family:Georgia,serif;

z-index:50;

}

.hall-dialogue h2{

margin:0 0 10px;

color:#e7d3ff;

font-size:30px;

}

.hall-dialogue p{

margin:0;

font-size:20px;

line-height:1.6;

}

.hall-close{

position:absolute;

right:14px;

top:10px;

background:none;

border:none;

color:white;

font-size:34px;

cursor:pointer;

}

.hidden{

display:none;

}
/* ------------------------------------------------ */
/* GIFT GROVE */
/* ------------------------------------------------ */

#gift-grove-page{
    background:#120d08;
    min-height:100vh;
}

.gift-grove-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.gift-grove-image{
    display:block;
    width:100%;
}

.gift-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:22px;
    z-index:20;
    transition:.3s;
}

.gift-hotspot:hover{
    background:rgba(255,245,210,.05);
    box-shadow:
        0 0 22px rgba(255,220,120,.65),
        0 0 55px rgba(255,170,80,.45),
        0 0 80px rgba(255,245,190,.18),
        inset 0 0 18px rgba(255,255,220,.10);
}

/* DEBUG POSITIONS - adjust while red boxes show */

.bramble-hotspot{
    left:10%;
    top:31%;
    width:15%;
    height:34%;
}

.exchange-hotspot{
    left:1%;
    top:54%;
    width:15%;
    height:24%;
}

.todays-gifts-hotspot{
    left:1%;
    top:16%;
    width:15%;
    height:18%;
}

.center-gifts-hotspot{
    left:36%;
    top:31%;
    width:35%;
    height:35%;
}

.ways-to-give-hotspot{
    left:80%;
    top:13%;
    width:18%;
    height:32%;
}

.gift-door-hotspot{
    left:39%;
    top:74%;
    width:22%;
    height:18%;
}

/* Dialogue */

.gift-dialogue{
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:min(720px,90%);
    padding:30px;
    background:rgba(34,22,10,.96);
    border:2px solid #d6a84e;
    border-radius:24px;
    color:#fff3cf;
    box-shadow:0 0 50px rgba(0,0,0,.7);
    font-family:Georgia,serif;
    z-index:50;
}

.gift-dialogue h2{
    margin:0 0 10px;
    color:#ffe39a;
    font-size:30px;
}

.gift-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.6;
}

.gift-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff3cf;
    font-size:34px;
    cursor:pointer;
}
/* MY COTTAGE */

#my-cottage-page{
    background:#160b05;
    min-height:100vh;
}

.cottage-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.cottage-image{
    display:block;
    width:100%;
}

.cottage-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:22px;
    z-index:20;
    transition:.3s;
}

.cottage-hotspot:hover{
    background:rgba(255,235,190,.06);
    box-shadow:
        0 0 22px rgba(255,190,100,.55),
        0 0 55px rgba(255,150,60,.35),
        inset 0 0 18px rgba(255,255,220,.10);
}

/* move these red boxes until they fit */

.cottage-door{
    left:2%;
    top:24%;
    width:13%;
    height:40%;
}

.cottage-walls{
    left:14%;
    top:10%;
    width:15%;
    height:20%;
}

.cottage-fireplace{
    left:43%;
    top:18%;
    width:22%;
    height:22%;
}

.cottage-windows{
    left:67%;
    top:16%;
    width:18%;
    height:12%;
}

.cottage-floor{
    left:18%;
    top:58%;
    width:20%;
    height:12%;
}

.cottage-space{
    left:42%;
    top:55%;
    width:15%;
    height:10%;
}

.cottage-dialogue{
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:min(720px,90%);
    padding:30px;
    background:rgba(30,17,8,.96);
    border:2px solid #c98b45;
    border-radius:24px;
    color:#fff0cf;
    box-shadow:0 0 50px rgba(0,0,0,.7);
    font-family:Georgia,serif;
    z-index:50;
}

.cottage-dialogue h2{
    margin:0 0 10px;
    color:#ffd99a;
    font-size:30px;
}

.cottage-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.6;
}

.cottage-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff0cf;
    font-size:34px;
    cursor:pointer;
}
/* CURIOSITY SHOP */

#curiosity-shop-page{
    background:#100b07;
    min-height:100vh;
}

.curiosity-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.curiosity-image{
    display:block;
    width:100%;
}
.curiosity-hotspot{

    position:absolute;
    display:block;
    cursor:pointer;

    border:none;
    background:transparent;

    border-radius:22px;

    z-index:20;

    transition:all .35s ease;

}


.curiosity-hotspot:hover{
    background:rgba(255,240,200,.05);
    box-shadow:
        0 0 20px rgba(255,190,110,.55),
        0 0 50px rgba(120,210,180,.32),
        inset 0 0 18px rgba(255,255,220,.10);
}

/* Move these red boxes until they line up */

.merri-hotspot{
    left:25%;
    top:20%;
    width:23%;
    height:45%;
}

.paint-studio-hotspot{
    left:75%;
    top:30%;
    width:20%;
    height:18%;
}

.knickknacks-hotspot{
    left:75%;
    top:58%;
    width:15%;
    height:18%;
}

.shelves-hotspot{
    left:55%;
    top:12%;
    width:18%;
    height:18%;
}

.furniture-hotspot{
    left:75%;
    top:8%;
    width:24%;
    height:20%;
}

.curiosity-door-hotspot{
    left:0%;
    top:20%;
    width:16%;
    height:35%;
}

/* Dialogue */

.curiosity-dialogue{
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:min(720px,90%);
    padding:30px;
    background:rgba(24,16,10,.96);
    border:2px solid #b8894d;
    border-radius:24px;
    color:#fff0cf;
    box-shadow:0 0 50px rgba(0,0,0,.7);
    font-family:Georgia,serif;
    z-index:50;
}

.curiosity-dialogue h2{
    margin:0 0 10px;
    color:#ffd99a;
    font-size:30px;
}

.curiosity-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.6;
}

.curiosity-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff0cf;
    font-size:34px;
    cursor:pointer;
}
/* CREATORS WORKSHOP */

#creators-workshop-page{
    background:#140f0a;
    min-height:100vh;
}

.creators-workshop-room{
    position:relative;
    max-width:1800px;
    margin:0 auto;
}

.creators-workshop-image{
    display:block;
    width:100%;
}

.workshop-hotspot{
    position:absolute;
    display:block;
    cursor:pointer;
    border:none;
    background:transparent;
    border-radius:22px;
    z-index:20;
    transition:.3s;
}

.workshop-hotspot:hover{
    background:rgba(255,245,220,.05);
    box-shadow:
        0 0 18px rgba(255,210,120,.55),
        0 0 36px rgba(255,110,80,.35),
        0 0 60px rgba(150,210,255,.22),
        inset 0 0 18px rgba(255,255,255,.10);
}

/* Move these red boxes until lined up */

.workbench-hotspot{
    left:48%;
    top:39%;
    width:18%;
    height:17%;
}

.paint-hotspot{
    left:3%;
    top:42%;
    width:16%;
    height:22%;
}

.fabric-hotspot{
    left:20%;
    top:25%;
    width:15%;
    height:18%;
}

.blueprint-hotspot{
    left:80%;
    top:13%;
    width:18%;
    height:33%;
}

.furniture-hotspot{
    left:63%;
    top:56%;
    width:25%;
    height:31%;
}

.workshop-door-hotspot{
    left:35%;
    top:24%;
    width:10%;
    height:24%;
}

/* Dialogue */

.workshop-dialogue{
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:min(720px,90%);
    padding:30px;
    background:rgba(29,20,12,.96);
    border:2px solid #c48b4a;
    border-radius:24px;
    color:#fff1cf;
    box-shadow:0 0 50px rgba(0,0,0,.7);
    font-family:Georgia,serif;
    z-index:50;
}

.workshop-dialogue h2{
    margin:0 0 10px;
    color:#ffd99a;
    font-size:30px;
}

.workshop-dialogue p{
    margin:0;
    font-size:20px;
    line-height:1.6;
}

.workshop-close{
    position:absolute;
    right:14px;
    top:10px;
    background:none;
    border:none;
    color:#fff1cf;
    font-size:34px;
    cursor:pointer;
}
.music-toggle{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:999;
    padding:12px 18px;
    border-radius:18px;
    border:2px solid #d8b86a;
    background:rgba(25,18,10,.85);
    color:#fff2c8;
    font-family:Georgia,serif;
    font-size:18px;
    cursor:pointer;
}