/* Simon for GameOS - styles (prefix si-).
   Pairs with js/newgames/simon.html + simon.js */

.window-simon { width: auto; min-width: unset; }

.si-body { padding: 10px; background: var(--win-bg); text-align: center; }
.si-stats { font-size: 11px; margin-bottom: 8px; }
.si-status { font-size: 11px; margin-top: 8px; min-height: 14px; }
.si-help { font-size: 10px; color: var(--win-dark); margin-top: 4px; }

/* Retro plastic console: dark round case, four quadrant pads, center hub */
.si-console {
    position: relative;
    width: 240px; height: 240px;
    margin: 0 auto;
    background: #181818;
    border-radius: 50%;
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.18),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        2px 3px 8px rgba(0, 0, 0, 0.45);
}

.si-pad {
    position: absolute;
    width: 102px; height: 102px;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
    transition: background 0.06s, box-shadow 0.06s;
}
.si-pad-green  { top: 12px;  left: 12px;  background: #00700c; border-radius: 102px 0 0 0; }
.si-pad-red    { top: 12px;  left: 126px; background: #8e0000; border-radius: 0 102px 0 0; }
.si-pad-yellow { top: 126px; left: 12px;  background: #8e8e00; border-radius: 0 0 0 102px; }
.si-pad-blue   { top: 126px; left: 126px; background: #000090; border-radius: 0 0 102px 0; }

.si-pad-green.si-lit  { background: #33ff44; box-shadow: 0 0 14px #33ff44, inset 0 0 8px rgba(255,255,255,0.6); }
.si-pad-red.si-lit    { background: #ff3838; box-shadow: 0 0 14px #ff3838, inset 0 0 8px rgba(255,255,255,0.6); }
.si-pad-yellow.si-lit { background: #ffff44; box-shadow: 0 0 14px #ffff44, inset 0 0 8px rgba(255,255,255,0.6); }
.si-pad-blue.si-lit   { background: #4466ff; box-shadow: 0 0 14px #4466ff, inset 0 0 8px rgba(255,255,255,0.6); }

.si-hub {
    position: absolute;
    top: 76px; left: 76px;
    width: 88px; height: 88px;
    background: #202020;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #181818, inset 0 2px 4px rgba(255, 255, 255, 0.15);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    z-index: 1;
}
.si-hub-label {
    color: #d8d8d8;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 #000;
}
.si-start-btn {
    font-size: 10px;
    font-family: inherit;
    padding: 2px 8px;
    background: var(--win-btn-face);
    color: var(--win-text);
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-right: 2px solid var(--win-darker);
    border-bottom: 2px solid var(--win-darker);
    cursor: pointer;
}
.si-start-btn:active {
    border-top: 2px solid var(--win-darker);
    border-left: 2px solid var(--win-darker);
    border-right: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-white);
}

/* 16px Simon icon: four colored quadrants around a dark hub */
.icon-simon-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
}
.icon-simon-sm::before {
    content: '';
    position: absolute; top: 1px; left: 1px;
    width: 6px; height: 6px; background: #00a800;
    box-shadow: 7px 0 0 #d40000, 0 7px 0 #d8c800, 7px 7px 0 #2020d4;
}
.icon-simon-sm::after {
    content: '';
    position: absolute; top: 5px; left: 5px;
    width: 4px; height: 4px;
    background: #181818;
    border-radius: 50%;
    border: 1px solid #000;
}