.scdev-scramble {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin: 20px auto;
    padding: 22px 24px 24px;
    border: 1px solid rgba(47, 55, 66, 0.12);
    border-radius: 20px;
   /* background: linear-gradient(135deg, #ffffff, #f8fafc); */
    color: #738bac;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.scdev-scramble, .scdev-scramble * { box-sizing: border-box; }
.scdev-scramble button,
.scdev-scramble input,
.scdev-scramble textarea,
.scdev-scramble select {
    font: inherit;
}
.scdev-scramble-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.scdev-scramble-head > div { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scdev-scramble-kicker { color:#1f7a63; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.scdev-scramble h3 { margin:0; font-size:28px; line-height:1.1; color:#778599; }
.scdev-scramble h4 { margin:0 0 8px; font-size:15px; color:#1f7a63; }
.scdev-scramble-members-btn, .scdev-scramble-send-btn {
    border:1px solid rgba(31, 122, 99, .35);
    border-radius:999px;
    padding:6px 12px;
    background:transparent;
    color:#6c84a5;
    cursor:pointer;
    font-weight:700;
}
.scdev-scramble-members-btn:hover, .scdev-scramble-send-btn:hover { background:#f3f7f5; }
.scdev-scramble-word {
    margin:16px 0;
    padding:20px;
    border:1px solid rgba(184, 140, 0, .25);
    border-radius:16px;
   /* background:#fffdf2; */
    color:#75a8c5;
    text-align:center;
    font-size:clamp(32px, 7vw, 58px);
    line-height:1.1;
    font-weight:900;
    letter-spacing:.18em;
    text-shadow:none;
}
.scdev-scramble-form { margin-bottom:14px; }
.scdev-scramble-guess-row {
    display:flex;
    gap:10px;
    align-items:center;
    width:100%;
    padding:4px 6px;
    border:1px solid rgba(118, 133, 155, 0.15);
    border-radius:12px;
    color:#6c84a5;
    background: rgba(53, 54, 54, 0.05);
}
.scdev-scramble-guess {
    flex:1;
    min-width:0;
    border:0;
    border-radius:12px;
    padding:6px 12px;
    background: rgba(53, 54, 54, 0.05);
    color:#778aa3;
}
.scdev-scramble-guess::-webkit-input-placeholder {
    color: rgba(47, 55, 66, 0.68) !important;
    opacity: 1 !important;
}
.scdev-scramble-guess::-moz-placeholder {
    color: rgba(47, 55, 66, 0.68) !important;
    opacity: 1 !important;
}
.scdev-scramble-guess:-ms-input-placeholder {
    color: rgba(47, 55, 66, 0.68) !important;
    opacity: 1 !important;
}
.scdev-scramble-guess::-ms-input-placeholder {
    color: rgba(47, 55, 66, 0.68) !important;
    opacity: 1 !important;
}
.scdev-scramble-guess::placeholder {
    color: rgba(47, 55, 66, 0.68) !important;
    opacity: 1 !important; /* Override browser default opacity */
}
.scdev-scramble-message, .scdev-scramble-status { min-height:22px; color:#6b7280; font-size:14px; }
.scdev-scramble-message.is-good { color:#1f7a63; font-weight:700; }
.scdev-scramble-timer { min-height:22px; margin:8px 0 4px; color:#409a83; font-size:14px; font-weight:700; }
.scdev-scramble-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px; }
.scdev-scramble-grid > div {
    border:1px solid rgba(47, 55, 66, 0.10);
    border-radius:16px;
    padding:6px 12px;
 /*   background:#ffffff; */
}
.scdev-scramble-scores ol, .scdev-scramble-members ul { margin:0; padding-left:20px; }
.scdev-scramble-scores li, .scdev-scramble-members li { margin:5px 0; }

.scdev-scramble-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 18, 24, 0.48);
}

.scdev-scramble-modal.is-open {
    display: flex !important;
}

.scdev-scramble-modal-card {
    width: min(520px, 100%);
    max-height: min(70vh, 560px);
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 18px;
    border: 1px solid rgba(47, 55, 66, 0.14);
    background: #ffffff;
    color: #61728b;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    overflow: hidden;
}

.scdev-scramble-modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 12px;
    border-bottom:1px solid rgba(47, 55, 66, 0.10);
}

.scdev-scramble-modal-head h4 {
    margin:0;
    font-size:15px;
    color:#1f7a63;
}

.scdev-scramble-modal-close {
    appearance:none;
    border:1px solid rgba(47, 55, 66, 0.14);
    background:#fff;
    color:#56677f;
    border-radius:999px;
    width:34px;
    height:34px;
    line-height:1;
    font-size:22px;
    cursor:pointer;
}

.scdev-scramble-modal-body {
    overflow-y:auto;
    padding:6px 12px 12px;
}

.scdev-scramble-members-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
}

.scdev-scramble-member-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 12px;
    border:1px solid rgba(47, 55, 66, 0.10);
    border-radius:12px;
    background:#f8fafc;
}

.scdev-scramble-member-meta {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.scdev-scramble-member-avatar {
    width:28px;
    height:28px;
    border-radius:50%;
    flex:0 0 28px;
    object-fit:cover;
    border:1px solid rgba(31, 122, 99, .22);
    background:#fff;
}

.scdev-scramble-member-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#2f3742;
    font-size:12px;
    font-weight:700;
}

.scdev-scramble-member-row strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.scdev-scramble-member-row span {
    flex:0 0 auto;
    color:#6b7280;
    font-weight:700;
}

body.night-mode .scdev-scramble {
    border-color: rgba(0,255,170,.35);
    background: radial-gradient(circle at top left, rgba(0,255,170,.12), transparent 30%), linear-gradient(135deg, rgba(15,18,24,.96), rgba(35,41,55,.94));
    color: #f7f9fb;
    box-shadow: 0 18px 45px rgba(0,0,0,.2);
}

body.night-mode .scdev-scramble input,
body.night-mode .scdev-scramble textarea,
body.night-mode .scdev-scramble select {
    background: rgba(255,255,255,.08) !important;
    color: #f7f9fb !important;
    border-color: rgba(255,255,255,.16) !important;
}

body.night-mode .scdev-scramble input::-webkit-input-placeholder,
body.night-mode .scdev-scramble textarea::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble input::-moz-placeholder,
body.night-mode .scdev-scramble textarea::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble input:-ms-input-placeholder,
body.night-mode .scdev-scramble textarea:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble input::-ms-input-placeholder,
body.night-mode .scdev-scramble textarea::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble input::placeholder,
body.night-mode .scdev-scramble textarea::placeholder {
    color: #ffffff !important;
    opacity: 1 !important; /* Override browser default opacity */
}

body.night-mode .scdev-scramble-kicker { color:#9fffe3; }
body.night-mode .scdev-scramble h3 { color:#f7f9fb; }
body.night-mode .scdev-scramble h4 { color:#9fffe3; }
body.night-mode .scdev-scramble-members-btn,
body.night-mode .scdev-scramble-send-btn {
    border-color: rgba(0,255,170,.45);
    background:rgba(0,255,170,.12);
    color:#f7f9fb;
}
body.night-mode .scdev-scramble-members-btn:hover,
body.night-mode .scdev-scramble-send-btn:hover { background:rgba(0,255,170,.22); }
body.night-mode .scdev-scramble-guess-row {
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f7f9fb;
}
body.night-mode .scdev-scramble-guess {
    border: 0 !important;
    background: transparent !important;
    color: #f7f9fb !important;
    box-shadow: none !important;
}
body.night-mode .scdev-scramble-guess:focus {
    box-shadow: none !important;
}
body.night-mode .scdev-scramble-guess::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble-guess::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble-guess:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble-guess::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.night-mode .scdev-scramble-guess::placeholder {
    color: #ffffff !important;
    opacity: 1 !important; /* Override browser default opacity */
}
body.night-mode .scdev-scramble-word {
    border-color: rgba(255,208,0,.28);
    background:rgba(255,208,0,.08);
    color:#ffe891;
    text-shadow:0 0 18px rgba(255,208,0,.18);
}
body.night-mode .scdev-scramble-send-btn {
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
body.night-mode .scdev-scramble-message,
body.night-mode .scdev-scramble-status { color:rgba(255,255,255,.78); }
body.night-mode .scdev-scramble-message.is-good { color:#9fffe3; }
body.night-mode .scdev-scramble-grid > div {
    border-color: rgba(255,255,255,.1);
    background:rgba(255,255,255,.055);
}
body.night-mode .scdev-scramble-timer { color:#9fffe3; }
body.night-mode .scdev-scramble-modal {
    background: rgba(15, 18, 24, 0.72);
}
body.night-mode .scdev-scramble-modal-card {
    border-color: rgba(255,255,255,.12);
    background: #171b22;
    color:#f7f9fb;
}
body.night-mode .scdev-scramble-modal-head {
    border-bottom-color: rgba(255,255,255,.10);
}
body.night-mode .scdev-scramble-modal-head h4 {
    color:#9fffe3;
}
body.night-mode .scdev-scramble-modal-close {
    background:#202630;
    color:#f7f9fb;
    border-color: rgba(255,255,255,.14);
}
body.night-mode .scdev-scramble-member-row {
    border-color: rgba(255,255,255,.10);
    background:#202630;
}
body.night-mode .scdev-scramble-member-row span {
    color:#a3aab7;
}
body.night-mode .scdev-scramble-member-row strong {
    color:#f7f9fb;
}
body.night-mode .scdev-scramble-member-avatar {
    border-color: rgba(255,255,255,.16);
    background:#202630;
}
body.night-mode .scdev-scramble-member-avatar-fallback {
    color:#f7f9fb;
}
@media (max-width:620px) {
    .scdev-scramble {
        width: calc(100% - 8px);
        padding:12px;
    }
    .scdev-scramble-head { flex-direction:column; align-items:stretch; }
    .scdev-scramble-head > div { flex-wrap:nowrap; }
    .scdev-scramble-guess-row { flex-direction:column; align-items:stretch; }
    .scdev-scramble-grid { grid-template-columns:1fr; }
}