.site-root{height:100%;}
:root{
    /* Design tokens */
    --accent: #2B6CB0; /* primary accent */
    --bg: #F5F7FA;
    --surface: #FFFFFF;
    --muted: #D9DDE6;
    --text: #222222;
    --gap: 12px;
    --radius: 12px;
    --ease: cubic-bezier(.22,.9,.35,1);
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--bg);
    margin: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: var(--text);
}
.word-list {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: 2px solid rgba(0,0,0,0.12);
    background-color: var(--surface);
    padding: calc(var(--gap) / 2);
}
.word-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25%;
    border-bottom: 2px solid rgba(0,0,0,0.06);
    font-size: clamp(0.9rem, 2vh, 1.25rem);
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.word-item:hover{background: rgba(43,108,176,0.04);} 
.word-item:focus{outline: none; box-shadow: 0 0 0 3px rgba(43,108,176,0.12);}
.chamber-container {
    position: absolute;
    left: 20%;
    top: 0;
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chamber {
    position: relative;
    width: 92%; /* Reduced by 8% */
    /* enforce square aspect so border-radius:50% produces a perfect circle */
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 92vh; /* Reduced by 8% */
    max-height: 92vh; /* Reduced by 8% */
    border: 5px solid rgba(0,0,0,0.16);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--surface), #fbfbfb);
    transition: transform 0.5s var(--ease);
    z-index: 2;
    box-shadow: 0 18px 36px rgba(16,24,40,0.06), inset 0 -6px 14px rgba(16,24,40,0.02);
    will-change: transform;
}
.center-circle, .alternate-circle {
    position: absolute;
    width: 70%;
    /* enforce circle shape */
    aspect-ratio: 1 / 1;
    border: 3px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    background-color: var(--muted);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 2vh, 1.5rem);
    font-weight: 700;
    color: var(--text);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s var(--ease), opacity 0.25s linear;
    text-align: center;
    padding: 12px;
    backface-visibility: hidden;
}
.center-circle {
    z-index: 5;
}
.alternate-circle {
    z-index: 4;
}
.slot {
    position: absolute;
    width: 15%;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    background-color: #e9e9e9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.9rem, 1.5vh, 1.15rem);
    font-weight: 700;
    color: var(--text);
    transform-origin: center;
    z-index: 8;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.slot:hover{transform: scale(1.03); box-shadow: 0 8px 20px rgba(16,24,40,0.06);} 
.slot1 { top: 10%; left: 50%; transform: translate(-50%, -50%); }
.slot2 { top: 50%; left: 10%; transform: translate(-50%, -50%); }
.slot3 { bottom: 10%; left: 50%; transform: translate(-50%, 50%); }
.slot4 { top: 50%; right: 10%; transform: translate(50%, -50%); }

@media (max-width: 700px){
    /* Ensure chamber stays square and scales nicely */
    .chamber{ width: min(72vmin, 92%); height: auto; }
    .center-circle, .alternate-circle{ width: 64%; }
    .slot{ width: 18%; }
}