*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    background-color: #000;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

img {
    -webkit-user-drag: none;
}

.watermark {
    position: fixed;
    top: 20px;
    left: 20px;
    width: max(10vw, 150px);
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.scene{
    width:100vw;
    height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:20px;
}

#startScene{
    position:relative;
    background-image:url("../assets/KF_intro.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}

#startLogo{
    position:absolute;
    top:7%;
    left:50%;
    width:min(62vw, 520px);
    max-width:520px;
    transform:translateX(-50%);
    animation:logoFloat 2.6s ease-in-out infinite;
    filter:drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    pointer-events:none;
    user-select:none;
}

#startBtn{
    position:absolute;
    left:50%;
    bottom:11%;
    transform:translateX(-50%) scale(1);
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    transition:transform 180ms ease, filter 180ms ease;
    filter:drop-shadow(0 10px 0 rgba(0, 0, 0, 0.24));
}

#startBtn img{
    display:block;
    width:min(28vw, 240px);
    max-width:240px;
    height:auto;
    pointer-events:none;
    user-select:none;
}

#startBtn:hover{
    transform:translateX(-50%) translateY(-8px) scale(1.08) rotate(-2deg);
    filter:drop-shadow(0 16px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.22));
}

#startBtn:active{
    transform:translateX(-50%) translateY(2px) scale(0.98) rotate(1deg);
    filter:drop-shadow(0 6px 0 rgba(0, 0, 0, 0.22));
}

#startBtn:focus-visible{
    outline:3px solid #fff3a1;
    outline-offset:8px;
}

@keyframes logoFloat{
    0%, 100%{
        transform:translateX(-50%) translateY(0);
    }
    50%{
        transform:translateX(-50%) translateY(-14px);
    }
}

.hidden{
    display:none !important;
}

/* Cloth scene: table background and top-centered header */
#clothScene{
    position:relative;
    background-image:url("../assets/table_blank.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}

#clothHeader{
    position:absolute;
    top:6%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    z-index:10;
}

#clothHeader h1,
#clothScene h1,
#decorationScene h1,
#diyaScene h1,
#foodScene h1 {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 40px;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #ffd700; /* Golden text */
    background-color: #b3b3b3;
    background-image: 
        linear-gradient(145deg, rgba(224, 224, 224, 0.9), rgba(153, 153, 153, 0.9)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    border: 2px solid #b3b3b3;
    border-radius: 15px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6), inset 3px 3px 5px rgba(255, 255, 255, 0.8), inset -3px -3px 5px rgba(0, 0, 0, 0.3); /* 3D Stone Tablet Shadow */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9), -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: bold;
    z-index: 100;
    text-align: center;
    white-space: nowrap;
}

#resultScene h1 {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size:clamp(1.5rem, 3vw, 2.5rem);
    color:#e0e0e0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9), -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: bold;
    z-index: 10;
    white-space: nowrap;
}

#clothHeader #clothOptions{
    display:flex;
    gap:14px;
}

#resultScene{
    position:relative;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#resultLogo{
    position:absolute;
    top:25%;
    left:50%;
    width:min(60vw, 470px);
    max-width:520px;
    animation:resultLogoFloat 2.6s ease-in-out infinite;
    filter:drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    pointer-events:none;
    user-select:none;
}

#resultlayer{
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.2);
}

@keyframes resultLogoFloat{
    0%, 100%{
        transform:translate(-50%, -50%);
    }
    50%{
        transform:translate(-50%, calc(-50% - 14px));
    }
}

#decorationScene,
#diyaScene,
#foodScene {
    position:relative;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#dialogueBox{
    width:700px;
    max-width:90%;
    background:white;
    padding:20px;
    border-radius:15px;
    text-align:center;
}

#dialogueText{
    font-size:1.2rem;
    margin-bottom:15px;
}

#continueBtn{
    padding:10px 20px;
    cursor:pointer;
}

#clothOptions{
    display:flex;
    gap: 40px;
    justify-content:center;
    align-items:center;
}

.clothOption{
    padding:0;
    cursor:pointer;
    background:rgba(69, 68, 68, 0.4);
    border:3px solid transparent;
    border-radius:15px;
    width:250px;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.clothOption:hover{
    transform:scale(1.03);
    background:rgba(128, 128, 128, 0.3);
}

.clothOption img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none;
    user-select:none;
}

.clothOption.selected{
    border:3px solid #ffcc00; /* Replaced basic green with a nicer highlight matching the theme */
    transform:scale(1.05);
}

/*Decoration Grid*/
#decorationArea{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* table placeholder removed; background image supplies table visuals */

/*Flower Marker*/
.flowerMarker{
    position:absolute;
    width:140px;
    height:140px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    padding:0;
    appearance:none;
    background:transparent;
    transform:translate(-50%, -50%);
    transition:transform 160ms ease, filter 160ms ease;
    overflow:hidden;
}

.flowerMarker::before{
    content:"";
    position:absolute;
    inset:10%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 18%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 72%);
    opacity:1;
    pointer-events:none;
    transition:opacity 160ms ease, transform 160ms ease;
}

.flowerMarker:hover{
    transform:translate(-50%, -50%) scale(1.12);
    filter:brightness(1.05);
}

.flowerMarker:hover::before{
    opacity:1;
    transform:scale(1.08);
}

.flowerMarkerImage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    user-select:none;
    visibility:hidden;
    opacity:0;
    transition:visibility 160ms ease, opacity 160ms ease;
    transform:scale(0.78);
}

.flowerMarkerImage[aria-hidden="false"]{
    visibility:visible;
    opacity:1;
}

.flowerPlaced{
    background:transparent;
    cursor:default;
    pointer-events:none;
    transform:translate(-50%, -50%) !important;
}

.flowerPlaced::before{
    opacity:0 !important;
}

.flowerPlaced:hover{
    transform:translate(-50%, -50%) !important;
    filter:none !important;
}

.flowerPlaced:hover::before{
    opacity:0 !important;
    transform:none !important;
}

#markerContainer{
    position:relative;
    width:1100px;
    height:510px;
}

#flowerMarkers{
    position:absolute;
    width:100%;
    height:100%;
}


/*Diya Markers*/
#diyaContainer{
    position:relative;
    width:1100px;
    height:500px;
}

#diyaMarkers{
    position:absolute;
    width:100%;
    height:100%;
}

/* diya table placeholder removed; background image supplies table visuals */

.diyaMarker{
    position:absolute;
    width:167px;
    height:167px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    padding:0;
    appearance:none;
    background:transparent;
    transform:translate(-50%, -50%);
    transition:transform 160ms ease, filter 160ms ease;
    overflow:hidden;
}

.diyaMarker::before{
    content:"";
    position:absolute;
    inset:10%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 18%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 72%);
    opacity:1;
    pointer-events:none;
    transition:opacity 160ms ease, transform 160ms ease;
}

.diyaMarker:hover{
    transform:translate(-50%, -50%) scale(1.12);
    filter:brightness(1.05);
}

.diyaMarker:hover::before{
    opacity:1;
    transform:scale(1.08);
}

.diyaMarkerImage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    user-select:none;
    visibility:hidden;
    opacity:0;
    transition:visibility 160ms ease, opacity 160ms ease;
}

.diyaMarkerImage[aria-hidden="false"]{
    visibility:visible;
    opacity:1;
}

.diyaPlaced{
    background:transparent;
    cursor:default;
    pointer-events:none;
    transform:translate(-50%, -50%) !important;
}

.diyaPlaced::before{
    opacity:0 !important;
}

.diyaPlaced:hover{
    transform:translate(-50%, -50%) !important;
    filter:none !important;
}

.diyaPlaced:hover::before{
    opacity:0 !important;
    transform:none !important;
}


/*Food Selection*/
#foodTopBar{
    position: absolute;
    top: 3%;
    left: 0;
    width: 100%;
    display:flex;
    justify-content: center;
    align-items:center;
    z-index:10;
}

#foodTopBar h1{
    position: static;
    transform: none;
    margin: 0;
}

#foodMainArea {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.foodSelection{
    padding: 10px;
    background-color:#e0e0e0;
    display:flex;
    flex-direction:column;
    gap:20px;
    border-radius: 10px;
}

#foodSelectionLeft {
    margin-top: 2%;
    margin-left: 20px;
}

#foodSelectionRight {
    margin-top: 2%;    
    margin-right: 20px;
}

.foodItem{
    width: 60px;
    height: 60px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    border-radius: 15px;
    background:rgba(69, 68, 68, 0.8);
    border:3px solid transparent;
    overflow:hidden;
    transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.foodItem:hover{
    transform:scale(1.03);
    background:rgba(128, 128, 128, 0.3);
}

.foodItem.selected{
    border:3px solid #ffcc00;
    transform:scale(1.05);
}

.foodItem.disabled{
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
    cursor: default;
    background:rgba(30, 30, 30, 0.8);
}

.foodItem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

#foodContainer{
    position:relative;
    width: 90vw; /* Takes up 90% of the viewport width on smaller screens */
    max-width: 1080px; /* Prevents it from getting too large on big screens */
    aspect-ratio: 1080 / 510; /* Maintains your original grid proportions */
    border: 3px transparent;
    border-radius: 15px;
    margin-bottom: 40px;
    align-items: center;
}

/* food table placeholder removed; background image supplies table visuals */

#foodPlates{
    position:absolute;
    width:100%;
    height:100%;
}

.foodPlate{
    position:absolute;
    width: 10.18%; /* 110px divided by 1080px base width */
    height: auto;
    aspect-ratio: 1 / 1;
    background:transparent;
    border: 0px;
    padding:0;
    cursor:pointer;
    transform:translate(-50%, -50%);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
}

.foodPlateImage{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    pointer-events:none;
    user-select:none;
    transform:scale(1.1);
}

/* Navigation Buttons */
#clothNextBtn,
#decorationNextBtn,
#diyaNextBtn,
#foodNextBtn {
    position: absolute;
    bottom: 1%;
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    z-index: 10;
    transition: transform 0.2s ease, filter 0.2s ease;
}

#clothNextBtn img,
#decorationNextBtn img,
#diyaNextBtn img,
#foodNextBtn img {
    display: block;
    width: min(28vw, 240px);
    max-width: 240px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

#clothNextBtn:hover,
#decorationNextBtn:hover,
#diyaNextBtn:hover,
#foodNextBtn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}