/*
 * Ludoku, a Sudoku variant
 * @author Đoàn Trường Long <support@doantruonglong.com>
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */
.ludoku {
    --lk-ink: #094a14;
    --lk-muted: #3f6a46;
    --lk-line: #bcd3bd;
    --lk-strong: #094a14;
    --lk-bg: #ffffff;
    --lk-soft: #f3f8f1;
    --lk-accent: #2f7a3d;
    --lk-accent-text: #ffffff;
    --lk-given-bg: #eaf3e6;
    --lk-filled: #175c2a;
    --lk-peer: #eef6ea;
    --lk-same: #dcecd8;
    --lk-sel: #fff3bf;
    --lk-ok: #15803d;
    --lk-ok-bg: #e6f6ec;
    --lk-warn: #a15c00;
    --lk-warn-bg: #fff4dc;
    --lk-bad: #b42318;
    --lk-bad-bg: #fde8e6;
    --lk-timer: #0ea5e9;
    box-sizing: border-box;
    max-width: 1080px;
    margin: 0 auto 1.5rem;
    color: var(--lk-ink);
    line-height: 1.45;
}

.ludoku *,
.ludoku *::before,
.ludoku *::after {
    box-sizing: inherit;
}

.ludoku [hidden] {
    display: none !important;
}

.ludoku-head {
    margin-bottom: .75rem;
}

.ludoku-title {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
    color: var(--lk-ink);
}

.ludoku-sub {
    margin: 0;
    color: var(--lk-muted);
}

.ludoku-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 1rem;
    padding: 0;
}

.ludoku-tab {
    flex: 1 1 auto;
    padding: .55rem .9rem;
    border: 1px solid #094a14;
    border-radius: 8px;
    background-color: #094a14;
    background-image: linear-gradient(180deg,rgba(8, 74, 19, 1) 0%, rgba(242, 242, 211, 1) 5%, rgba(8, 74, 19, 1) 90%, rgba(202, 245, 49, 1) 100%) !important;
    color: #f2f2d3;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ludoku-tab:hover {
    filter: brightness(1.15);
}

.ludoku-tab:focus-visible {
    outline: 3px solid #caf531;
    outline-offset: 1px;
}

.ludoku-tab.is-active {
    color: #ffffff;
    box-shadow: inset 0 -4px 0 #caf531, 0 2px 6px rgba(9, 74, 20, .35);
}

.ludoku-notice {
    margin: 0 0 1rem;
    padding: .65rem .9rem;
    border: 1px solid var(--lk-line);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--lk-soft);
    color: var(--lk-ink);
}

.ludoku-notice.is-ok {
    border-color: var(--lk-ok);
    background: var(--lk-ok-bg);
    color: var(--lk-ok);
}

.ludoku-notice.is-warn {
    border-color: var(--lk-warn);
    background: var(--lk-warn-bg);
    color: var(--lk-warn);
}

.ludoku-notice.is-error {
    border-color: var(--lk-bad);
    background: var(--lk-bad-bg);
    color: var(--lk-bad);
}

.ludoku-panel {
    display: none;
}

.ludoku-panel.is-active {
    display: block;
}

.ludoku-confirm {
    max-width: 420px;
    margin: 2rem auto;
    padding: 1.25rem;
    border: 1px solid var(--lk-line);
    border-radius: 10px;
    background: var(--lk-soft);
    text-align: center;
}

.ludoku-scorebar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .5rem;
}

.ludoku-timer {
    margin: 0 0 .8rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lk-timer);
    font-variant-numeric: tabular-nums;
}

.ludoku-timer.is-low {
    color: var(--lk-timer);
    animation: lk-pulse 1s ease-in-out infinite;
}

@keyframes lk-pulse {
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .ludoku-timer.is-low { animation: none; }
}

.ludoku-stat {
    flex: 1 1 110px;
    min-width: 0;
    padding: .45rem .7rem;
    border: 1px solid var(--lk-line);
    border-radius: 6px;
    background: var(--lk-bg);
}

.ludoku-stat.is-active {
    border-color: var(--lk-ok);
    background: var(--lk-ok-bg);
}

.ludoku-stat.is-warn {
    border-color: var(--lk-warn);
    background: var(--lk-warn-bg);
}

.ludoku-stat-progress {
    flex: 2 1 200px;
}

.ludoku-stat-label {
    display: block;
    font-size: .75rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lk-muted);
}

.ludoku-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ludoku-bar {
    display: block;
    height: 6px;
    margin-top: .35rem;
    border-radius: 3px;
    background: var(--lk-soft);
    overflow: hidden;
}

.ludoku-bar-fill {
    display: block;
    height: 100%;
    background: var(--lk-accent);
    transition: width .25s ease;
}

.ludoku-gamecols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ludoku-gamecols.is-multi {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

.ludoku-gamecol-chat .ludoku-card,
.ludoku-split-side .ludoku-card {
    margin-bottom: 0;
}

.ludoku-chatcard {
    display: flex;
    flex-direction: column;
}

.ludoku-chatcard .ludoku-chatlog {
    flex: 1 1 auto;
    height: 320px;
}

.ludoku-chatcard .ludoku-chatform {
    order: 99;
    margin-top: auto;
}

.ludoku-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
}

.ludoku-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}

.ludoku-controls .ludoku-card {
    margin-bottom: 0;
}

.ludoku-formrow {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}

.ludoku-formrow .ludoku-input,
.ludoku-formrow .ludoku-select {
    flex: 1 1 140px;
    width: auto;
    margin: 0;
}

.ludoku-tablescroll {
    max-width: 100%;
    overflow-x: auto;
}

.ludoku-rowactions {
    white-space: nowrap;
}

.ludoku-input.is-inline {
    display: inline-block;
    width: 8rem;
    margin: 0 .35rem 0 0;
    padding: .25rem .4rem;
}

.ludoku-status {
    font-weight: 700;
}

.ludoku-status.is-open { color: var(--lk-ok); }
.ludoku-status.is-playing { color: var(--lk-warn); }
.ludoku-status.is-closed { color: var(--lk-muted); }

.ludoku-infotable th {
    width: 40%;
    text-align: left;
}

@media (max-width: 600px) {
    .ludoku-gamecols.is-multi,
    .ludoku-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ludoku-boardwrap {
    max-width: 680px;
    margin: 0 auto;
}

.ludoku-board {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--lk-strong);
    border-radius: 4px;
    background: var(--lk-bg);
    font-size: 16px;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.ludoku-board:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 122, 61, .35);
}

.ludoku-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--lk-line);
    border-bottom: 1px solid var(--lk-line);
    background: var(--lk-bg);
    color: var(--lk-filled);
    line-height: 1;
}

.ludoku-cell.ludoku-bx {
    border-right: 3px solid var(--lk-strong);
}

.ludoku-cell.ludoku-by {
    border-bottom: 3px solid var(--lk-strong);
}

.ludoku-cell.ludoku-lc {
    border-right: 0;
}

.ludoku-cell.ludoku-lr {
    border-bottom: 0;
}

.ludoku-cell.is-given {
    background: var(--lk-given-bg);
    color: var(--lk-ink);
    font-weight: 700;
}

.ludoku-cell.is-blank {
    cursor: pointer;
}

.ludoku-cell.is-peer {
    background: var(--lk-peer);
}

.ludoku-cell.is-given.is-peer {
    background: #dcebd9;
}

.ludoku-cell.is-selected {
    background: var(--lk-sel);
    box-shadow: inset 0 0 0 2px var(--lk-accent);
}

.ludoku-cell.is-flash-ok {
    animation: ludoku-flash-ok .7s ease;
}

.ludoku-cell.is-flash-bad {
    animation: ludoku-flash-bad .7s ease;
}

@keyframes ludoku-flash-ok {
    0%, 60% { background: #b7e4c7; }
}

@keyframes ludoku-flash-bad {
    0%, 60% { background: #f5b5ae; }
}

.ludoku-board.is-disabled {
    opacity: .8;
}

.ludoku-board.is-disabled .ludoku-cell.is-blank {
    cursor: default;
}

.ludoku-buffer {
    min-height: 1.4rem;
    margin: .4rem 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--lk-muted);
}

.ludoku-pad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    max-width: 680px;
    margin: .2rem auto 0;
}

.ludoku-key {
    min-width: 2.5rem;
    padding: .45rem .5rem;
    border: 1px solid var(--lk-line);
    border-radius: 6px;
    background: var(--lk-bg);
    color: var(--lk-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ludoku-key:hover:not(:disabled) {
    border-color: var(--lk-accent);
    background: var(--lk-peer);
}

.ludoku-key:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ludoku-help {
    max-width: 680px;
    margin: .9rem auto 0;
    font-size: .9rem;
    color: var(--lk-muted);
}

.ludoku-chatlog {
    height: 220px;
    margin-bottom: .6rem;
    padding: .5rem .6rem;
    border: 1px solid var(--lk-line);
    border-radius: 6px;
    background: var(--lk-soft);
    overflow-y: auto;
    font-size: .92rem;
}

.ludoku-chatmsg {
    margin-bottom: .4rem;
    word-break: break-word;
}

.ludoku-chatmsg .ludoku-chatname {
    font-weight: 700;
    margin-right: .35rem;
}

.ludoku-chatmsg.is-me .ludoku-chatname {
    color: var(--lk-accent);
}

.ludoku-chatmsg.is-system {
    font-style: italic;
    color: var(--lk-muted);
}

.ludoku-chatform {
    display: flex;
    gap: .5rem;
}

.ludoku-chatform .ludoku-input {
    flex: 1 1 auto;
}

.ludoku-card {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--lk-line);
    border-radius: 8px;
    background: var(--lk-bg);
}

.ludoku-card-title {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
    color: var(--lk-ink);
}

.ludoku-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    font-weight: 600;
}

.ludoku-muted {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--lk-muted);
}

.ludoku-select,
.ludoku-input {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .45rem .55rem;
    border: 1px solid var(--lk-line);
    border-radius: 6px;
    background: var(--lk-bg);
    color: var(--lk-ink);
    font: inherit;
}

.ludoku-select:first-child,
.ludoku-input:first-child {
    margin-top: 0;
}

.ludoku-input[readonly] {
    background: var(--lk-soft);
}

.ludoku-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .7rem;
}

.ludoku-btn {
    padding: .5rem .9rem;
    border: 1px solid var(--lk-line);
    border-radius: 6px;
    background: var(--lk-bg);
    color: var(--lk-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ludoku-btn:hover:not(:disabled) {
    border-color: var(--lk-accent);
}

.ludoku-btn.is-primary {
    border-color: var(--lk-accent);
    background: var(--lk-accent);
    color: var(--lk-accent-text);
}

.ludoku-btn.is-small {
    padding: .3rem .6rem;
    font-size: .85rem;
}

.ludoku-btn.is-danger {
    border-color: var(--lk-bad);
    color: var(--lk-bad);
}

.ludoku-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ludoku-copyrow {
    margin-bottom: .7rem;
}

.ludoku-copyrow .ludoku-btn {
    margin-top: .35rem;
}

.ludoku-roomlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ludoku-roomitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--lk-soft);
}

.ludoku-roomitem:last-child {
    border-bottom: 0;
}

.ludoku-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.ludoku-table th,
.ludoku-table td {
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--lk-soft);
    text-align: left;
}

.ludoku-table th {
    font-size: .75rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lk-muted);
}

.ludoku-table .is-num {
    text-align: right;
}

.ludoku-table tr.is-turn td {
    background: var(--lk-ok-bg);
}

.ludoku-table tr.is-winner td {
    font-weight: 700;
    color: var(--lk-ok);
}

.ludoku-table tr.is-me td:nth-child(2) {
    font-style: italic;
}

.ludoku-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .8rem;
}

.ludoku-pagination .ludoku-btn:disabled {
    opacity: .35;
}

.ludoku-pageinfo {
    font-size: .85rem;
    color: var(--lk-muted);
}

.ludoku-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ludoku-panel-head .ludoku-select {
    width: auto;
    margin: 0;
}

.ludoku-profile-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .2rem;
}

.ludoku-profile-meta {
    color: var(--lk-muted);
    margin: 0 0 1rem;
}

.ludoku-lobby-locked {
    color: var(--lk-warn);
}

.ludoku-result {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    border: 2px solid var(--lk-ok);
    border-radius: 8px;
    background: var(--lk-ok-bg);
    text-align: center;
}

.ludoku-result-title {
    margin: 0 0 .4rem;
    font-size: 1.25rem;
}

.ludoku-result-line {
    margin: 0 0 .5rem;
}

@media (prefers-reduced-motion: reduce) {
    .ludoku-cell.is-flash-ok,
    .ludoku-cell.is-flash-bad {
        animation: none;
    }

    .ludoku-bar-fill {
        transition: none;
    }
}

.ludoku-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; flex: 0 0 auto; }
.ludoku-tab .ludoku-ico.on-light { display: none; }
.ludoku-tabs { flex-wrap: wrap; }

.ludoku-badge {
    display: inline-block; padding: .1rem .5rem; border: 1px solid var(--lk-line);
    border-radius: 999px; background: var(--lk-soft); color: var(--lk-ink); font-size: .85rem; font-weight: 600;
}
.ludoku-prewrap { white-space: pre-wrap; word-break: break-word; margin: .25rem 0 .75rem; }
.ludoku-subtitle { margin: .75rem 0 .25rem; color: var(--lk-ink); font-size: 1rem; }
.ludoku-mystats { margin: .5rem 0 0; font-weight: 600; color: var(--lk-ink); }
.ludoku-champion {
    margin: .5rem 0; padding: .6rem .8rem; border: 1px solid var(--lk-ok); border-radius: 8px;
    background: var(--lk-ok-bg); color: var(--lk-ink); font-weight: 700;
}
.ludoku-rowactions { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.ludoku-table tr.is-me td { background: var(--lk-same); font-weight: 600; }
.ludoku-tview > .ludoku-btn { margin-bottom: .75rem; }
.ludoku-tview .ludoku-card { margin-bottom: 1rem; }

.ludoku-tbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .5rem .75rem;
    border: 1px solid var(--lk-line); border-radius: 8px; background: var(--lk-soft);
}
.ludoku-tbar[hidden] { display: none; }
.ludoku-tbar-title { font-weight: 700; color: var(--lk-ink); flex: 1 1 auto; }
.ludoku-tbtns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ludoku-tbtns[hidden], .ludoku-tform[hidden] { display: none; }
.ludoku-tform { margin-top: .6rem; }
.ludoku-tform textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5rem; }

.ludoku.is-tmatch .ludoku-card-new,
.ludoku.is-tmatch [data-role="joinbox"],
.ludoku.is-tmatch [data-role="rooms"],
.ludoku.is-tmatch [data-role="room"] { display: none; }

.ludoku-presence { display: flex; flex-wrap: wrap; gap: .9rem; width: 100%; margin-top: .4rem; font-size: .85rem; color: var(--lk-muted); }
.ludoku-presence-item { display: inline-flex; align-items: center; gap: .35rem; }
.ludoku-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--lk-line); display: inline-block; }
.ludoku-presence-item.is-on .ludoku-dot { background: var(--lk-ok); }
.ludoku-presence-item.is-on { color: var(--lk-ok); font-weight: 600; }

.ludoku-btn.is-primary .ludoku-ico { filter: none; }
.ludoku-notice.is-warn { border-color: var(--lk-warn); background: var(--lk-warn-bg); color: var(--lk-warn); }

.ludoku-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ludoku-nowrap { white-space: nowrap; }
.ludoku-sep { display: inline-block; margin: 0 .4rem; color: var(--lk-muted); font-weight: 700; }
.ludoku-unit { margin: 0 .5rem 0 .2rem; color: var(--lk-muted); font-size: .9rem; }
.ludoku-formrow .ludoku-input.is-narrow,
.ludoku-input.is-narrow { flex: 0 0 auto; width: 4.5rem; text-align: center; margin: 0; }
.ludoku-timeout { margin: .25rem 0 .5rem; }
.ludoku-timeout[hidden] { display: none; }
.ludoku-timeout-inputs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ludoku-link { color: var(--lk-accent); font-weight: 600; text-decoration: underline; }
.ludoku-link:hover, .ludoku-link:focus { color: var(--lk-ink); }
.ludoku-manual { line-height: 1.65; }
.ludoku-manual-lead { margin: .25rem 0 .75rem; font-size: 1.25rem; font-weight: 700; color: var(--lk-ink); }
.ludoku-manual-meta { margin: .2rem 0; }
.ludoku-manual-text { margin: .85rem 0 .5rem; }

.ludoku-manual-list { list-style: none !important; counter-reset: lkmanual; margin: .5rem 0 1rem 0; padding: 0; }
.ludoku-manual-list li { list-style: none !important; counter-increment: lkmanual; position: relative; margin: .5rem 0; padding: 0 0 0 1.9rem; }
.ludoku-manual-list li::before { content: counter(lkmanual) "."; position: absolute; left: 0; top: 0; min-width: 1.5rem; font-weight: 700; color: var(--lk-ink); }
.ludoku-manual-end { margin: 1rem 0 0; font-size: 1.1rem; font-weight: 700; color: var(--lk-ink); text-align: center; }
[data-role="t-schedule"] .ludoku-tform { margin: 0 0 .75rem; padding: .75rem; border: 1px solid var(--lk-line); border-radius: 8px; background: var(--lk-soft); }
[data-role="t-schedule"] .ludoku-tform textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5rem; }

.ludoku-manual-orig { margin: 1rem 0 0; padding: .75rem 0 0; border-top: 1px dashed var(--lk-line); }
.ludoku-manual-orig > summary { cursor: pointer; font-weight: 700; color: var(--lk-ink); }
.ludoku-manual-orig[open] > summary { margin-bottom: .5rem; }