body {
    font-family: 'Merriweather', serif;
    background-color: #f5f5f5;
    color: #333333;
    font-size: 16px;
}

.navbar {
    margin-bottom: 0;
}

.navbar-left {
    float: left !important;
    margin-left: -14px;
}

.navbar-brand {
    margin-right: 20px;
    color: #f5f5f5 !important;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
}

.navbar-nav > li > a {
    color: #c0c0c0 !important;
}

.navbar-nav > .active > a {
    color: #ffffff !important;
}

.nonogram-content {
    max-width: 900px;
    margin: 0 auto 16px;
    padding: 0;
}

.nonogram-heading {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0;
    padding: 20px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.nonogram-heading h1 {
    margin: 1px 0 8px;
    font-size: 36px;
}

.nonogram-heading > p:last-child {
    max-width: 820px;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.back-link {
    margin: 0;
    font-size: 15px;
}

.back-link a {
    color: #333333;
}

.nonogram-game {
    padding: 18px 0 0;
}

.nonogram-surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 16px;
    align-items: stretch;
}

.nonogram-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 470px;
    border: 1px solid #aeb3af;
    background: #e2e5e2;
}

.nonogram-puzzle {
    --cell-size: 34px;
    --row-clue-size: 94px;
    --column-clue-size: 96px;
    display: grid;
    grid-template-columns: var(--row-clue-size) repeat(10, var(--cell-size));
    grid-template-rows: var(--column-clue-size) repeat(10, var(--cell-size));
    color: #3f4541;
    font-family: Arial, sans-serif;
    user-select: none;
}

.clue-corner {
    grid-column: 1;
    grid-row: 1;
}

.row-clue,
.column-clue {
    display: flex;
    color: #565b58;
    font-size: 12px;
    font-weight: 700;
    transition: background-color 100ms ease, color 100ms ease;
}

.row-clue {
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-right: 9px;
}

.column-clue {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding-bottom: 9px;
}

.row-clue.is-highlighted,
.column-clue.is-highlighted {
    background: rgba(63, 69, 65, 0.08);
    color: #222624;
}

.row-clue.is-satisfied,
.column-clue.is-satisfied {
    color: #969a97;
}

.nonogram-cell {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    padding: 0;
    border: 0;
    border-right: 1px solid #b5bab6;
    border-bottom: 1px solid #b5bab6;
    border-radius: 0;
    background: #f5f5f5;
    appearance: none;
    touch-action: none;
}

.nonogram-cell[data-column="0"] {
    border-left: 2px solid #737a75;
}

.nonogram-cell[data-row="0"] {
    border-top: 2px solid #737a75;
}

.nonogram-cell[data-column="4"],
.nonogram-cell[data-column="9"] {
    border-right: 2px solid #737a75;
}

.nonogram-cell[data-row="4"],
.nonogram-cell[data-row="9"] {
    border-bottom: 2px solid #737a75;
}

.nonogram-cell.is-filled {
    background: #3f4541;
}

.nonogram-cell.is-marked::before,
.nonogram-cell.is-marked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48%;
    height: 1px;
    background: #8a8f8c;
}

.nonogram-cell.is-marked::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nonogram-cell.is-marked::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.nonogram-cell.is-hinted {
    outline: 3px solid #337ab7;
    outline-offset: -3px;
    z-index: 2;
}

.nonogram-cell.is-drag-preview {
    box-shadow: inset 0 0 0 3px rgba(51, 122, 183, 0.58);
    z-index: 2;
}

.nonogram-cell.is-cross-preview {
    box-shadow: inset 0 0 0 3px rgba(92, 96, 93, 0.62);
}

.nonogram-cell:hover,
.nonogram-cell:focus-visible {
    background-color: #e1e4e1;
    outline: 2px solid #337ab7;
    outline-offset: -2px;
    z-index: 3;
}

.nonogram-cell.is-filled:hover,
.nonogram-cell.is-filled:focus-visible {
    background-color: #303532;
}

.puzzle-controls {
    display: flex;
    flex-direction: column;
    height: 470px;
    padding: 14px 12px;
    border: 1px solid #c9cbc8;
    background: rgba(235, 236, 234, 0.54);
}

.dialog-label {
    margin: 0 0 3px;
    color: #777777;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.puzzle-controls-title {
    margin: 0 0 9px;
    font-size: 18px;
    line-height: 1.25;
}

.puzzle-details {
    margin-top: 18px;
    border-top: 1px solid #c9cbc8;
}

.puzzle-details p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #c9cbc8;
    font-size: 10px;
}

.puzzle-details span {
    color: #747874;
}

.puzzle-details strong {
    text-align: right;
}

.controls-help {
    margin: 14px 0 0;
    color: #777777;
    font-size: 10px;
    line-height: 1.45;
}

.controls-help-primary {
    margin-top: 0;
    color: #555a57;
}

.control-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
}

.wide-action {
    grid-column: 1 / -1;
}

.primary-puzzle-button,
.secondary-puzzle-button,
.check-puzzle-button {
    min-height: 34px;
    border-radius: 0;
    font-family: 'Merriweather', serif;
    font-size: 11px;
    font-weight: 700;
}

.primary-puzzle-button,
.check-puzzle-button {
    border: 1px solid #3f4541;
    background: #3f4541;
    color: #ffffff;
}

.secondary-puzzle-button {
    border: 1px solid #aeb3af;
    background: transparent;
    color: #3f4541;
}

.primary-puzzle-button:hover,
.primary-puzzle-button:focus-visible,
.check-puzzle-button:hover,
.check-puzzle-button:focus-visible {
    background: #282c29;
    color: #ffffff;
}

.secondary-puzzle-button:hover,
.secondary-puzzle-button:focus-visible {
    border-color: #737a75;
    background: #e1e3e1;
}

.primary-puzzle-button:focus-visible,
.secondary-puzzle-button:focus-visible,
.check-puzzle-button:focus-visible {
    outline: 2px solid #337ab7;
    outline-offset: 2px;
}

.primary-puzzle-button:disabled,
.secondary-puzzle-button:disabled,
.check-puzzle-button:disabled {
    cursor: default;
    opacity: 0.42;
}

.puzzle-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(100, 104, 101, 0.52);
}

.puzzle-overlay[hidden],
.puzzle-dialog[hidden] {
    display: none;
}

.puzzle-dialog {
    width: min(350px, 86%);
    padding: 20px 22px;
    border: 1px solid #aaaead;
    background: #f5f5f5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.puzzle-dialog h2 {
    margin: 0 0 7px;
    font-size: 22px;
}

.puzzle-dialog > p {
    margin: 0 0 13px;
    color: #606060;
    font-size: 12px;
    line-height: 1.5;
}

.puzzle-dialog .puzzle-selection-note {
    color: #797979;
    font-size: 10px;
}

.puzzle-dialog .primary-puzzle-button {
    width: 100%;
}

.rules-dialog ul {
    margin: 10px 0 16px;
    padding-left: 19px;
    color: #4f4f4f;
    font-size: 12px;
    line-height: 1.5;
}

.rules-dialog li + li {
    margin-top: 5px;
}

.inline-link-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #337ab7;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.inline-link-button:hover,
.inline-link-button:focus-visible {
    color: #23527c;
    text-decoration: underline;
}

.inline-link-button:focus-visible {
    outline: 2px solid #337ab7;
    outline-offset: 2px;
}

.completion-dialog {
    width: min(390px, 90%);
}

.research-result {
    margin: 10px 0 12px;
    border-top: 1px solid #c9cbc8;
}

.research-result p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #c9cbc8;
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.research-result span {
    text-align: right;
}

.puzzle-dialog .comparison-note {
    color: #737773;
    font-size: 10px;
}

.completion-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 7px;
}

.completion-actions .primary-puzzle-button {
    width: auto;
}

.puzzle-toolbar {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 52px;
    margin-top: 15px;
    border-top: 1px solid #c9cbc8;
    border-bottom: 1px solid #c9cbc8;
}

.toolbar-stat,
.puzzle-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px 12px;
}

.toolbar-stat {
    min-width: 95px;
}

.toolbar-stat span {
    color: #7d817e;
    font-size: 9px;
    text-transform: uppercase;
}

.toolbar-stat strong {
    font-size: 14px;
}

.puzzle-status {
    flex: 1;
    min-width: 0;
    border-right: 1px solid #dededb;
    border-left: 1px solid #dededb;
}

.puzzle-status strong {
    font-size: 13px;
}

.puzzle-status span {
    overflow: hidden;
    color: #6f6f6f;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filled-stat {
    min-width: 105px;
}

.check-puzzle-button {
    align-self: center;
    margin: 0 8px;
    padding: 6px 14px;
}

.nonogram-research-note {
    width: 100%;
    margin: 18px auto 0;
    padding: 0;
    line-height: 1.5;
}

.nonogram-research-note h2 {
    display: inline;
    margin: 0 8px 0 0;
    font-size: 18px;
}

.nonogram-research-note p {
    display: inline;
    margin: 0;
    font-size: 14px;
}

.noscript-message {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ad4c4c;
    background: #fff4f4;
}

@media (max-width: 760px) {
    .nonogram-content {
        padding: 0 4px;
    }

    .nonogram-surface {
        display: flex;
        flex-direction: column;
    }

    .nonogram-stage {
        height: min(470px, calc(100vw - 22px));
    }

    .nonogram-puzzle {
        --cell-size: min(34px, calc((100vw - 132px) / 10));
        --row-clue-size: 88px;
        --column-clue-size: 88px;
    }

    .puzzle-controls {
        width: 100%;
        height: auto;
    }

    .control-actions {
        margin-top: 14px;
    }
}

@media (max-width: 560px) {
    .nonogram-heading h1 {
        font-size: 32px;
    }

    .nonogram-heading > p:last-child {
        font-size: 15px;
    }

    .nonogram-puzzle {
        --cell-size: min(30px, calc((100vw - 108px) / 10));
        --row-clue-size: 76px;
        --column-clue-size: 76px;
    }

    .row-clue,
    .column-clue {
        font-size: 10px;
    }

    .row-clue {
        gap: 4px;
        padding-right: 6px;
    }

    .column-clue {
        gap: 2px;
        padding-bottom: 6px;
    }

    .puzzle-toolbar {
        flex-wrap: wrap;
    }

    .puzzle-status {
        order: -1;
        flex-basis: 100%;
        border-right: 0;
        border-bottom: 1px solid #dededb;
        border-left: 0;
    }

    .toolbar-stat {
        flex: 1;
    }
}