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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.container {
    display: grid;
    grid-template-areas: 
        "title instruction instruction instruction"
        "table rules generated-text generated-text"
        "table open-cards open-cards deck";
    grid-template-columns: 3.2fr 2fr 1fr 1fr;
    gap: 10px;
    width: 100vw;
    height: 80vh;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #333;
}

.title {
    grid-area: title;
    padding: 20px;
    background-color: #ddd;
    text-align: center;
}

.instruction {
    grid-area: instruction;
    padding: 20px;
    background-color: #ddd;
    text-align: center;
}

.rules {
    grid-area: rules;
    padding: 20px;
    background-color: #eee;
    text-align: center;
}

.deck {
    grid-area: deck;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #eee;
    text-align: center;
}

.deck-title {
    margin-bottom: 10px;
}

.card {
    width: 50px;
    height: 75px;
    background-color: #333;
    margin: 5px;
}

.open-cards {
    grid-area: open-cards;
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #ddd;
}

.open-cards-title {
    margin-left: 10px;
}

.generated-text {
    grid-area: generated-text;
    padding: 20px;
    background-color: #ddd;
    text-align: center;
}

.table {
    grid-area: table;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
}


/* Circle Styles for Table Area */
.circle {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.outer {
    width: 90%;
    height: 90%;
}

.first-middle {
    width: 70%;
    height: 70%;
}

.second-middle {
    width: 50%;
    height: 50%;
}

.inner {
    width: 30%;
    height: 30%;
}

.sector {
    position: absolute;
    width: 40px;
    height: 60px; /* Adjust height to look more like a card */
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #333;
}

/* Outer Circle (12 Sectors) with counter-rotation */
.outer .sector:nth-child(1) { transform: rotate(0deg) translate(220px) rotate(0deg); }
.outer .sector:nth-child(2) { transform: rotate(30deg) translate(220px) rotate(-30deg); }
.outer .sector:nth-child(3) { transform: rotate(60deg) translate(220px) rotate(-60deg); }
.outer .sector:nth-child(4) { transform: rotate(90deg) translate(230px) rotate(-90deg); }
.outer .sector:nth-child(5) { transform: rotate(120deg) translate(220px) rotate(-120deg); }
.outer .sector:nth-child(6) { transform: rotate(150deg) translate(220px) rotate(-150deg); }
.outer .sector:nth-child(7) { transform: rotate(180deg) translate(220px) rotate(-180deg); }
.outer .sector:nth-child(8) { transform: rotate(210deg) translate(220px) rotate(-210deg); }
.outer .sector:nth-child(9) { transform: rotate(240deg) translate(220px) rotate(-240deg); }
.outer .sector:nth-child(10) { transform: rotate(270deg) translate(230px) rotate(-270deg); }
.outer .sector:nth-child(11) { transform: rotate(300deg) translate(220px) rotate(-300deg); }
.outer .sector:nth-child(12) { transform: rotate(330deg) translate(220px) rotate(-330deg); }

/* First Middle Circle (8 Sectors) with counter-rotation */
.first-middle .sector:nth-child(1) { transform: rotate(0deg) translate(170px) rotate(0deg); }
.first-middle .sector:nth-child(2) { transform: rotate(45deg) translate(170px) rotate(-45deg); }
.first-middle .sector:nth-child(3) { transform: rotate(90deg) translate(160px) rotate(-90deg); }
.first-middle .sector:nth-child(4) { transform: rotate(135deg) translate(170px) rotate(-135deg); }
.first-middle .sector:nth-child(5) { transform: rotate(180deg) translate(170px) rotate(-180deg); }
.first-middle .sector:nth-child(6) { transform: rotate(225deg) translate(170px) rotate(-225deg); }
.first-middle .sector:nth-child(7) { transform: rotate(270deg) translate(160px) rotate(-270deg); }
.first-middle .sector:nth-child(8) { transform: rotate(315deg) translate(170px) rotate(-315deg); }

/* Second Middle Circle (6 Sectors) with counter-rotation */
.second-middle .sector:nth-child(1) { transform: rotate(0deg) translate(110px) rotate(0deg); }
.second-middle .sector:nth-child(2) { transform: rotate(60deg) translate(110px) rotate(-60deg); }
.second-middle .sector:nth-child(3) { transform: rotate(120deg) translate(110px) rotate(-120deg); }
.second-middle .sector:nth-child(4) { transform: rotate(180deg) translate(110px) rotate(-180deg); }
.second-middle .sector:nth-child(5) { transform: rotate(240deg) translate(110px) rotate(-240deg); }
.second-middle .sector:nth-child(6) { transform: rotate(300deg) translate(110px) rotate(-300deg); }

/* Inner Circle (1 Sector) without rotation */
.inner .sector { transform: translate(0); }