:root {
    --bg: #050913;
    --panel: #10192f;
    --panel-border: #435f97;
    --text: #edf4ff;
    --muted: #9ab0de;
    --accent: #6ef5ce;
    --accent-2: #ff9bd5;
    --paper: #e6ebf7;
    --ink: #1a2040;
    --danger: #ff7b9d;
    --ok: #9dff87;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 13% 10%, rgba(110, 245, 206, 0.14), transparent 32%),
        radial-gradient(circle at 88% 0%, rgba(255, 155, 213, 0.14), transparent 35%),
        linear-gradient(180deg, #050913 0%, #0e1730 100%);
}

.app {
    max-width: 1260px;
    margin: 0 auto;
    padding: 1.3rem 1rem 2rem;
}

.back-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.back-link:hover {
    text-decoration: underline;
}

.hero {
    margin: 0.95rem 0 1.2rem;
}

.kicker {
    margin: 0;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

h1 {
    margin: 0.35rem 0 0.4rem;
    font-size: clamp(1.75rem, 3.1vw, 2.7rem);
}

.subtitle {
    margin: 0;
    max-width: 70ch;
    color: var(--muted);
}

.layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(250px, 285px) minmax(360px, 1fr) minmax(280px, 340px);
    align-items: start;
}

.panel {
    background: linear-gradient(180deg, rgba(16, 25, 47, 0.98), rgba(10, 17, 36, 0.98));
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
    padding: 0.92rem;
}

.panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.controls {
    display: grid;
    gap: 0.85rem;
}

.helper {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.actions {
    display: grid;
    gap: 0.45rem;
}

button {
    border: 1px solid #6a83c4;
    border-radius: 10px;
    color: var(--text);
    background: linear-gradient(180deg, #3859a2, #293f77);
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.62rem 0.7rem;
    cursor: pointer;
}

button:hover {
    transform: translateY(-1px);
}

button.accent {
    border-color: #97ffe5;
    color: #05150f;
    background: linear-gradient(180deg, #54e6c2, #2da98a);
}

button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.stats {
    display: grid;
    gap: 0.46rem;
}

.stats > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(110, 137, 209, 0.52);
    border-radius: 9px;
    background: rgba(20, 30, 58, 0.74);
    padding: 0.45rem 0.56rem;
}

.stats span {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clue,
.status {
    margin: 0;
    border: 1px solid rgba(93, 118, 194, 0.56);
    border-radius: 9px;
    background: rgba(11, 18, 39, 0.78);
    padding: 0.56rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--muted);
}

.clue {
    border-left: 4px solid rgba(110, 245, 206, 0.7);
}

.status strong {
    color: var(--text);
}

.strip-board {
    min-height: 420px;
    display: grid;
    grid-template-columns: repeat(6, minmax(54px, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

.strip {
    border: 1px solid #7d8bae;
    border-radius: 8px;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #f3f6fd 0%, #dde5f8 100%);
    color: var(--ink);
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: left;
    padding: 0.48rem 0.34rem;
    cursor: pointer;
    white-space: pre;
    position: relative;
    overflow: hidden;
    min-height: 390px;
}

.strip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.06));
    mix-blend-mode: overlay;
}

.strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    right: -3px;
    background: repeating-linear-gradient(180deg, rgba(26, 32, 64, 0.24) 0 2px, transparent 2px 5px);
    opacity: 0.45;
}

.strip:hover {
    transform: translateY(-2px);
}

.strip.selected {
    border-color: #ff90d2;
    box-shadow: 0 0 0 2px rgba(255, 155, 213, 0.35);
}

.strip.correct {
    border-color: #83e7c4;
    box-shadow: 0 0 0 2px rgba(110, 245, 206, 0.35);
}

.rebuild {
    margin: 0;
    min-height: 380px;
    border: 1px solid rgba(111, 136, 208, 0.58);
    border-radius: 10px;
    background: rgba(8, 14, 30, 0.84);
    color: #d8e3ff;
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.65rem;
    overflow: auto;
}

.hint {
    margin: 0.65rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.status.ok {
    border-color: rgba(133, 237, 117, 0.72);
    color: #d8ffd5;
}

.status.alert {
    border-color: rgba(255, 123, 157, 0.75);
    color: #ffd7e4;
}

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

    .strip-board {
        min-height: unset;
    }

    .strip {
        min-height: 280px;
    }

    .rebuild {
        min-height: 220px;
    }
}