.cs-page-wrap {
    position: relative;
    min-height: calc(100vh - 70px);
    padding: 2.2rem 1rem 3rem;
    background: #7b5c3f;
    overflow: hidden;
}

.cs-page-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 20%, rgba(255, 237, 213, 0.16) 0 14%, transparent 30%),
        radial-gradient(circle at 80% 18%, rgba(245, 158, 11, 0.09) 0 16%, transparent 34%),
        radial-gradient(circle at 22% 84%, rgba(147, 51, 36, 0.08) 0 15%, transparent 30%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%),
        linear-gradient(135deg, #7b5c3f 0%, #8a6645 42%, #6d5037 100%);
    pointer-events: none;
}

.cs-sheet {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 1.4rem 1.2rem 1.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.58) 100%),
        repeating-linear-gradient(0deg, rgba(140, 110, 84, 0.06) 0, rgba(140, 110, 84, 0.06) 1px, transparent 1px, transparent 28px),
        #f7efde;
    border: 1px solid rgba(94, 68, 48, 0.55);
    box-shadow: 0 30px 60px rgba(20, 9, 4, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.cs-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image: radial-gradient(circle, rgba(88, 54, 31, 0.6) 0.7px, transparent 0.7px);
    background-size: 3px 3px;
    mix-blend-mode: multiply;
}

.cs-topbar,
.cs-headline,
.cs-subline,
.cs-layout,
.cs-form-grid,
.cs-submit-row,
.cs-result-panel {
    position: relative;
    z-index: 1;
}

.cs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
    color: #4b2e1b;
    font: 700 0.73rem/1.2 'Special Elite', serif;
    letter-spacing: 0.09em;
}

.cs-decoder-id {
    opacity: 0.75;
}

.cs-headline {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.2vw, 3.05rem);
    line-height: 1;
    color: #2f2016;
    letter-spacing: 0.01em;
}

.cs-subline {
    margin: 0.22rem 0 0.9rem;
    color: #6a4a34;
    font: 600 0.96rem/1.3 'Cormorant Garamond', serif;
}

.cs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 0.95rem;
    align-items: start;
}

.cs-grid-column,
.cs-side-column {
    min-width: 0;
}

.cs-board-wrap {
    position: relative;
    background: #f4ead8;
    border: 2px solid #5c4432;
    border-radius: 10px;
    padding: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(46, 29, 17, 0.15);
}

.cs-board {
    display: grid;
    grid-template-columns: repeat(var(--cs-cols), minmax(0, 1fr));
    gap: 1px;
    background: #4b2e1b;
    border-radius: 6px;
    padding: 1px;
    user-select: none;
}

.cs-cell {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 2px;
    background: #fbf5e9;
    color: #2f1f13;
    font-family: 'Special Elite', serif;
    font-size: clamp(0.72rem, 1.5vw, 1.01rem);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 130ms ease, color 130ms ease, transform 100ms ease, box-shadow 130ms ease;
}

.cs-cell:hover {
    transform: scale(0.98);
}

.cs-cell.is-drag {
    background: #f2bcae;
    color: #3d180b;
    box-shadow: inset 0 0 0 1px rgba(122, 53, 26, 0.52);
}

.cs-cell.is-found {
    background: #f6c3b5;
    color: #2e1b12;
}

.cs-status-row {
    margin-top: 0.55rem;
}

.cs-selection {
    min-height: 33px;
    display: flex;
    align-items: center;
    border: 1px solid #d5c1a7;
    background: rgba(255, 255, 255, 0.62);
    color: #5a3e2b;
    border-radius: 8px;
    padding: 0 11px;
    font: 600 0.82rem/1.2 'Special Elite', serif;
}

.cs-word-panel,
.cs-story-panel,
.cs-answer-box,
.cs-result-panel {
    border: 1px solid #ccb496;
    border-radius: 8px;
    background: rgba(255, 252, 244, 0.78);
}

.cs-word-panel,
.cs-story-panel {
    padding: 0.55rem;
}

.cs-side-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cs-section-title {
    margin: 0 0 0.45rem;
    font: 700 0.73rem/1.2 'Special Elite', serif;
    letter-spacing: 0.09em;
    color: #6b3f23;
}

.cs-word-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.cs-word-item {
    border: 1px solid #d9c4aa;
    border-radius: 5px;
    padding: 5px 6px;
    text-align: center;
    color: #3c2718;
    background: #fff8ed;
    font: 700 0.78rem/1.1 'Special Elite', serif;
}

.cs-word-item.is-found {
    background: #f4c0b1;
    text-decoration: line-through;
}

.cs-story-text {
    margin: 0;
    color: #3f2a1b;
    font: 700 0.86rem/1.3 'Special Elite', serif;
}

.cs-killer-letters {
    margin: 0;
    color: #842e17;
    font: 700 0.9rem/1.3 'Special Elite', serif;
    letter-spacing: 0.22em;
}

.cs-form-grid {
    margin-top: 0.92rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.cs-answer-box {
    padding: 0.65rem;
}

.cs-answer-title {
    margin: 0 0 0.5rem;
    color: #3f2817;
    font: 700 1.03rem/1.1 'Special Elite', serif;
}

.cs-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cs-label {
    color: #744628;
    font: 700 0.73rem/1.2 'Special Elite', serif;
    letter-spacing: 0.08em;
}

.cs-input {
    width: 100%;
    border: 1px solid #cfb899;
    border-radius: 8px;
    padding: 9px 10px;
    color: #331f12;
    background: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    font: 700 0.9rem/1.2 'Special Elite', serif;
}

.cs-input:focus {
    outline: 2px solid #b45309;
    outline-offset: 1px;
}

.cs-suspects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.cs-suspect {
    border: 1px solid #d8c4aa;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    color: #3d2818;
    background: #fff8ed;
    font: 700 0.74rem/1.1 'Special Elite', serif;
    display: grid;
    gap: 5px;
    justify-items: center;
}

.cs-suspect-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d8c4aa;
    background: #fff;
}

.cs-suspect-name {
    letter-spacing: 0.02em;
}

.cs-anagram-builder {
    display: grid;
    gap: 6px;
}

.cs-letter-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cs-letter {
    border: 1px solid #ac7950;
    border-radius: 7px;
    background: #f5dbc0;
    color: #45240f;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 0.85rem/1 'Special Elite', serif;
}

.cs-guess-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}

.cs-small-btn {
    border: 1px solid #cfb899;
    border-radius: 8px;
    padding: 0 10px;
    color: #5a3822;
    background: #f8ead7;
    font: 700 0.73rem/1 'Special Elite', serif;
    letter-spacing: 0.05em;
}

.cs-submit-row {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
}

.cs-submit-btn {
    border: 1px solid #8c3b1d;
    border-radius: 999px;
    background: linear-gradient(180deg, #a5431f 0%, #8c3417 100%);
    color: #fff7ea;
    min-width: 250px;
    padding: 0.75rem 1rem;
    font: 700 0.87rem/1 'Special Elite', serif;
    letter-spacing: 0.07em;
}

.cs-submit-btn:hover {
    background: linear-gradient(180deg, #b24d26 0%, #9d3b1b 100%);
}

.cs-submit-btn:disabled {
    opacity: 0.75;
}

.cs-result-panel {
    margin-top: 0.9rem;
    padding: 0.7rem;
}

.cs-result-panel.is-success {
    border-color: #2e7d32;
    box-shadow: inset 0 0 0 1px rgba(46, 125, 50, 0.25);
}

.cs-result-panel.is-failed {
    border-color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.2);
}

.cs-result-status {
    margin: 0;
    color: #3c2718;
    font: 700 0.85rem/1.2 'Special Elite', serif;
}

.cs-result-errors {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
    color: #7f1d1d;
    font: 600 0.81rem/1.3 'Special Elite', serif;
}

.cs-facit-block {
    margin-top: 0.7rem;
    border: 1px dashed #bea27f;
    border-radius: 8px;
    padding: 0.58rem;
    background: rgba(255, 255, 255, 0.56);
}

.cs-facit-title {
    margin: 0 0 0.4rem;
    color: #6b3f23;
    font: 700 0.72rem/1.2 'Special Elite', serif;
    letter-spacing: 0.08em;
}

.cs-facit-row {
    margin-bottom: 0.34rem;
    color: #382518;
    font: 600 0.81rem/1.2 'Special Elite', serif;
}

.cs-facit-row:last-child {
    margin-bottom: 0;
}

.cs-facit-label {
    font-weight: 700;
}

@media (max-width: 980px) {
    .cs-layout {
        grid-template-columns: 1fr;
    }

    .cs-side-column {
        order: 2;
    }
}

@media (max-width: 700px) {
    .cs-page-wrap {
        padding: 1.2rem 0.55rem 2rem;
    }

    .cs-sheet {
        padding: 0.9rem 0.75rem 1rem;
    }

    .cs-form-grid {
        grid-template-columns: 1fr;
    }

    .cs-word-list,
    .cs-suspects {
        grid-template-columns: 1fr;
    }

    .cs-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.28rem;
    }
}