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

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #474747;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/*Outer wrapper */
.ludo {
    width: min(560px, 95vw, 95vh);
    aspect-ratio: 1 / 1;
    border: 2px solid #222;
    background-color: #FBFFFA;
}

.ludo-board {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 6fr 3fr 6fr;
    grid-template-rows:    6fr 3fr 6fr;
    grid-template-areas:
        "lbred     top-path   lbgreen"
        "left-path center     right-path"
        "lbblue    bot-path   lbyellow";
}

/*Home squares */
.lbred {
    grid-area: lbred;
    background: linear-gradient(to bottom, #DB292C, #A60A07);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lbgreen {
    grid-area: lbgreen;
    background: linear-gradient(to bottom, #8CD621, #15A754);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lbblue {
    grid-area: lbblue;
    background: linear-gradient(to bottom, #05A8C9, #0388B1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lbyellow {
    grid-area: lbyellow;
    background: linear-gradient(to bottom, #FDD60D, #EDA80F);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Inner diamond (home yard)*/
/*Rotated square diamond shape, holds 4 piece circles */
.lbred-inner,
.lbgreen-inner,
.lbblue-inner,
.lbyellow-inner {
    width: 65%;
    aspect-ratio: 1 / 1;
    background-color: #FBFFFA;
    transform: rotate(45deg);
    border-radius: 12%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 12%;
    gap: 8%;
}

/*Piece circles*/
.lbred-innertop, .lbred-innerleft,
.lbred-innerright, .lbred-innerbottom {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #AB0003;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
}

.lbblue-innertop, .lbblue-innerleft,
.lbblue-innerright, .lbblue-innerbottom {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #007BA8;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
}

.lbgreen-innertop, .lbgreen-innerleft,
.lbgreen-innerright, .lbgreen-innerbottom {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #10A855;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
}

.lbyellow-innertop, .lbyellow-innerleft,
.lbyellow-innerright, .lbyellow-innerbottom {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #E29A14;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
}

/*Pathways*/

/*Left pathway: red home-run runs horizontally through middle row*/
.red-pathway {
    grid-area: left-path;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/*Right pathway: green home-run runs horizontally through middle row*/
.green-pathway {
    grid-area: right-path;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/*Top pathway: yellow home-run runs vertically through middle column*/
.yellow-pathway {
    grid-area: top-path;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

/*Bottom pathway: blue home-run runs vertically through middle column*/
.blue-pathway {
    grid-area: bot-path;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

/*All pathway cells share base style*/
[class^="rp"], [class^="gp"],
[class^="yp"], [class^="bp"] {
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/*Red pathway cell colours (left path, middle row = rp7–rp12)*/
.rp2  { background-color: #DE1618; }   /* safe/start cell*/
.rp8, .rp9, .rp10, .rp11, .rp12 { background-color: #DE1618; } /* home run*/

/*Green pathway cell colours (right path, middle row = gp7–gp12)*/
.gp2  { background-color: #9DDA37; }
.gp8, .gp9, .gp10, .gp11, .gp12 { background-color: #9DDA37; }

/*Yellow pathway cell colours (top path, middle col = yp2,5,8,11,14,17)*/
.yp2, .yp5, .yp8, .yp11, .yp14, .yp17 { background-color: #FDD60D; }

/*Blue pathway cell colours (bottom path, middle col = bp2,5,8,11,14,17)*/
.bp2, .bp5, .bp8, .bp11, .bp14, .bp17 { background-color: #0EAEDE; }

/*Direction arrows*/
/*Red arrow: points right (into center) — in rp7 */
.innerrp7 {
    width: 0;
    height: 0;
    margin: auto;
    border-top:    30% solid transparent;
    border-bottom: 30% solid transparent;
    border-left:   50% solid #DE1618;
}

/*Green arrow: points left (into center) in gp7*/
.innergp7 {
    width: 0;
    height: 0;
    margin: auto;
    border-top:    30% solid transparent;
    border-bottom: 30% solid transparent;
    border-right:  50% solid #9DDA37;
}

/*Yellow arrow: points down (into center) in yp12*/
.inneryp12 {
    width: 0;
    height: 0;
    margin: auto;
    border-left:  30% solid transparent;
    border-right: 30% solid transparent;
    border-top:   50% solid #FDD60D;
}

/*Blue arrow: points up (into center) in bp12*/
.innerbp12 {
    width: 0;
    height: 0;
    margin: auto;
    border-left:   30% solid transparent;
    border-right:  30% solid transparent;
    border-bottom: 50% solid #0EAEDE;
}

/*Center Board*/
.center-board {
    grid-area: center;
    position: relative;
    border: 1.5px solid #000;
    overflow: hidden;
}

.triangle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/*Original clip-path triangles, meeting at centre*/
.red    {
    background: linear-gradient(to left, #ff433d 40%, #B11612);
    clip-path: polygon(50% 50%, 0% 0%, 0% 100%);
    box-shadow: 0 0 0 1.5px #000;
}
.green  {
    background: linear-gradient(to top, #87D333, #16A853);
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
.yellow {
    background: linear-gradient(to right, #ffe76d 40%, #EEAC0D);
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
}
.blue   {
    background: linear-gradient(to bottom, #4cc2e9 40%, #0084D6);
    clip-path: polygon(50% 50%, 100% 100%, 0% 100%);
}

.x-divider1 {
    position: absolute;
    top: 0; left: 50%;
    width: 0;
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.5);
    transform: skew(45deg);
    z-index: 2;
}
.x-divider2 {
    position: absolute;
    top: 0; left: 50%;
    width: 0;
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.5);
    transform: skew(-45deg);
    z-index: 2;
}

/* Responsive — smaller screens */
@media (max-width: 480px) {
    .ludo {
        width: min(98vw, 98vh);
    }
}