*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    background: #ffffff linear-gradient(to bottom, #c5d5ec, #ffffff) no-repeat;
}

@font-face {
    font-family: "Cabin";
    src: url("fonts/cabin-400.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Cabin";
    src: url("fonts/cabin-700.woff2") format("woff2");
    font-weight: 700; font-display: swap;
}

body {
    font-family: "Noto Sans Digits", Cabin, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

button { touch-action: manipulation; color: inherit; }
button, input, select, textarea { font-family: inherit; }

#outer { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#outer input { -webkit-user-select: text; user-select: text; }
#status { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

#scale-wrapper {
    transform-origin: top left;
    position: absolute;
    top: 0;
}

#outer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#tutorial-text { display: none; }
html.tutorial { background: #ffffff linear-gradient(to bottom, #f3dcb2, #ffffff) no-repeat; }
html.tutorial body::after {
    content: ""; position: fixed; pointer-events: none; z-index: 50;
    top: calc(env(safe-area-inset-top, 0px) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
    left: calc(env(safe-area-inset-left, 0px) + 4px); right: calc(env(safe-area-inset-right, 0px) + 4px);
    border: 3px solid #d0943a; border-radius: 14px;
}
#tutorial-title, #tutorial-close { display: none; }
html.tutorial #nav-group, html.tutorial #tool-group, html.tutorial #title a,
html.tutorial #timerDisplay, html.tutorial #solvedCount { display: none; }
html.tutorial #tutorial-title { display: inline; color: #34548f; }
html.tutorial #tutorial-close {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 51; padding: 0;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #888; background: #fff; color: #555; cursor: pointer;
}
html.tutorial #tutorial-close:hover { background: #e0eeff; border-color: #91d4ed; color: #222; }
html.tutorial #tutorial-close svg { display: block; }
html.tutorial #puzzleInfo {
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.tutorial-step {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 10px; font: inherit;
}
.tutorial-step svg { display: block; }
.tutorial-step:disabled { opacity: 0.35; }
html.tutorial #tutorial-text {
    display: block; max-width: 26em; margin: 2px auto 6px; padding: 0 12px;
    text-align: center; font-size: 17px; line-height: 1.35;
}
#outer.landscape > #tutorial-text { grid-area: nav; margin: 0; text-align: left; }
.tutorial-hint {
    position: fixed; z-index: 60; max-width: 15em;
    padding: 9px 13px; border-radius: 8px; border: 2px solid #fff;
    background: #1f7cc0; color: #fff; font-size: 15px; line-height: 1.3;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3); pointer-events: none;
    animation: hint-in 0.9s ease-out;
}
.tutorial-hint.below { transform-origin: var(--arrow-x) top; --hop: -5px; }
.tutorial-hint.above { transform-origin: var(--arrow-x) bottom; --hop: 5px; }
.tutorial-hint::before {
    content: ""; position: absolute; width: 14px; height: 14px;
    left: calc(var(--arrow-x) - 7px); background: #1f7cc0;
    transform: rotate(45deg);
}
.tutorial-hint.below::before { top: -8px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.tutorial-hint.above::before { bottom: -8px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
@keyframes hint-in {
    0%   { opacity: 0; transform: scale(0.6); }
    30%  { opacity: 1; transform: scale(1.04); }
    45%  { transform: scale(1); }
    60%  { transform: translateY(var(--hop)); }
    75%  { transform: translateY(0); }
    88%  { transform: translateY(calc(var(--hop) / 2)); }
    100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tutorial-hint { animation: none; }
}

.help-tutorial { text-align: center; margin: 20px 0 26px; }
#help-tutorial {
    font: inherit; font-size: 19px;
    padding: 14px 32px; border: none; border-radius: 3px;
    background: #1f7cc0; color: #fff; cursor: pointer;
}
#help-tutorial:hover { background: #19669e; }

#title { margin: 4px 0; font-size: 20px; text-align: center; }
#title a { color: #34548f; text-decoration: none; }
#title a:hover { text-decoration: underline; }

#tool-group, #nav-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: stretch;
    padding: 2px 4px;
}
#nav-group > button svg, #tool-group > button svg { display: block; }
#nav-group > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font: inherit;
}
#tool-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 2px 10px;
    font: inherit;
}
#tool-group button:disabled { opacity: 0.35; cursor: default; }
#tool-group [hidden] { display: none; }
#peek-btn.peeking { background: #c5e2ff; }
#random-group, #peek-btn { touch-action: none; }

#status { text-align: center; padding: 4px 8px; }
#outer:not(.compact):not(.landscape) > #status { padding-bottom: 12px; }
#puzzleInfo > div { display: inline; }
#puzzleInfo > div + div::before { content: " "; }
#outer.landscape #puzzleInfo > div { display: block; }
#outer.landscape #puzzleInfo > div + div::before { content: none; }
.check-sideways { display: none; }
#outer.landscape .check-sideways { display: inline; }
#outer.landscape .check-upright  { display: none; }
#puzzleInfo   { font-size: 17px; color: #444; }
#timerDisplay { font-size: 17px; color: #444; font-variant-numeric: tabular-nums; }
#solvedCount  { font-size: 15px; color: #888; }
#solvedCount.clickable { cursor: pointer; width: fit-content; margin: 0 auto; }
#solvedCount.clickable:hover { color: #333; text-decoration: underline; }

.mp-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 20px 0;
    border-bottom: 1px solid #eee;
}
.mp-tab {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: none;
    font: inherit;
    font-size: 13px;
    padding: 5px 14px;
    cursor: pointer;
    color: #666;
    margin-bottom: -1px;
}
.mp-tab:hover { background: #f2f7ff; }
.mp-tab.active {
    border-color: #ddd;
    border-bottom: 1px solid #fff;
    background: #fff;
    color: #222;
    font-weight: bold;
}


.popup-anchor { position: relative; display: inline-flex; }

.field-group {
    position: relative;
    display: inline-flex;
    margin: 0;
    align-items: stretch;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
}
.field-group:focus-within { border-color: #91d4ed; }
.field-group > input {
    border: none; background: none; font: inherit; outline: none;
    padding: 2px 6px; min-width: 11em;
}
.field-group > button {
    border: none; background: none; cursor: pointer; color: #666;
    padding: 0 6px; display: flex; align-items: center;
    border-radius: 0 3px 3px 0;
}
.field-group > button:hover { background: #e0eeff; color: #222; }

.split-button {
    position: relative;
    display: inline-flex;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f5f5f5;
}
.split-button > button {
    border: none; background: none; font: inherit;
    padding: 2px 8px; cursor: pointer; border-radius: 4px;
}
.split-button > button + button {
    border-left: 1px solid #ddd;
    padding: 2px 5px;
    font-size: 10px;
}
.split-button > button:hover { background: #e0eeff; }

.menu {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 50;
    min-width: 100%;
    padding: 2px;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    text-align: left;
}
.menu.open { display: block; }
.menu-item {
    display: block;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    padding: 4px 14px;
    border-radius: 3px;
    cursor: pointer;
}
.menu-item.active, .menu-item:hover { background: #e0eeff; }

.cal { padding: 6px; min-width: 236px; }
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
}
.cal-head button {
    border: 1px solid #bbb; border-radius: 3px; background: #f5f5f5;
    font: inherit; font-size: 11px; line-height: 1; padding: 3px 5px;
    cursor: pointer;
}
.cal-head button:hover { background: #e0eeff; border-color: #91d4ed; }
.cal-mysel {
    position: relative; flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.cal-month {
    width: 6.2em; text-align: center;
    font-weight: bold; font-size: 12px;
    border: 1px solid transparent; border-radius: 3px;
    background: none; cursor: pointer; padding: 2px 0;
}
.cal-month:hover { background: #e0eeff; border-color: #91d4ed; }
.cal-year {
    font: inherit; font-size: 12px; font-weight: bold;
    text-align: center; padding: 2px 0;
    border: 1px solid transparent; border-radius: 3px; background: none;
}
.cal-year:hover { border-color: #ddd; }
.cal-year:focus { border-color: #91d4ed; background: #fff; outline: none; }
.cal-monthmenu { top: calc(100% + 3px); min-width: 7em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-grid:focus { outline: none; }
.cal-dow { font-size: 10px; color: #888; text-align: center; padding-bottom: 2px; }
.cal-day {
    border: none; background: none; font: inherit; font-size: 12px;
    padding: 3px 0; border-radius: 3px; cursor: pointer; text-align: center;
}
.cal-day.other  { color: #bbb; }
.cal-day.today  { outline: 1px solid #91d4ed; }
.cal-day.cursor { background: #c5e2ff; font-weight: bold; }
.cal-grid:focus .cal-day.cursor { box-shadow: inset 0 0 0 1px #3b8ed0; }
.cal-day:hover  { background: #e0eeff; }
.cal-today {
    display: block; width: 100%; margin-top: 5px;
    border: 1px solid #bbb; border-radius: 3px; background: #f5f5f5;
    font: inherit; font-size: 11px; padding: 3px 0; cursor: pointer;
}
.cal-today:hover { background: #e0eeff; border-color: #91d4ed; }


#grid-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

#page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0;
}

.btn-panel { display: flex; gap: 4px; }

#bottom-buttons {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#bottom-buttons #controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#bottom-buttons .btn-col {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

#right-buttons {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#right-buttons #controls {
    display: flex;
    flex-direction: row;
    gap: 4px;
}
#right-buttons .btn-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


#page.layout-narrow { flex-direction: column; }
#page.layout-narrow #right-buttons  { display: none; }
#page.layout-narrow #bottom-buttons { display: flex; }

#page.layout-landscape { flex-direction: row; align-items: center; }
#page.layout-landscape #right-buttons {
    display: flex;
    flex-direction: column;
}
#page.layout-landscape #bottom-buttons { display: none; }

#page.layout-narrow-nobuttons,
#page.layout-landscape-nobuttons { flex-direction: column; }
#page.layout-narrow-nobuttons #right-buttons,
#page.layout-narrow-nobuttons #bottom-buttons,
#page.layout-landscape-nobuttons #right-buttons,
#page.layout-landscape-nobuttons #bottom-buttons { display: none; }

#outer.landscape {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "title  nav"
        "tools  grid"
        "status grid";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 10px;
}
#outer.landscape > #title      { grid-area: title; }
#outer.landscape > #tool-group { grid-area: tools; }
#outer.landscape > #nav-group  { grid-area: nav; }
#outer.landscape > #grid-area  { grid-area: grid; align-self: center; }
#outer.landscape > #status     { grid-area: status; align-self: center; }

#outer.landscape > #tool-group {
    flex-direction: column;
    align-items: stretch;
    width: 9em;              
}
#outer.landscape > #status { width: 9em; }

#outer.compact #page { display: block; padding: 0; }
#outer.compact .grid-wrapper { transform-origin: 0 0; }
#outer.compact #grid-area { padding: 4px 0; }
#outer.compact #tool-group, #outer.compact #nav-group { gap: 3px; padding: 0 4px 3px; }
#outer.compact #undo-redo { gap: 3px; }
#outer.compact button { margin: 0; }  
#outer.compact #tool-group button, #outer.compact #nav-group > button {
    min-height: 38px; padding: 2px 8px;
    -webkit-appearance: none; appearance: none;
    border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; color: #222;
}
#outer.compact #tool-group button:active, #outer.compact #nav-group > button:active { background: #e0eeff; }
#outer.compact .split-button { min-height: 38px; }
#outer.compact .split-button > button + button { padding: 2px 9px; font-size: 12px; }
#outer.compact #nav-group { flex-wrap: nowrap; }
#outer.compact .field-group { flex: 1 1 auto; min-width: 0; max-width: 17em; }
#outer.compact .field-group > input { min-width: 0; width: 100%; }
#outer.landscape.compact {
    padding: 0 4px;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 16px;
}
#outer.landscape.compact > #tool-group {
    flex-direction: row; flex-wrap: wrap; width: 12em;
}
#outer.landscape.compact > #tool-group > * { flex: 1 1 auto; }
#outer.landscape.compact #start-over,
#outer.landscape.compact #my-puzzles-btn { flex-basis: 100%; }
#outer.landscape.compact #undo-redo { width: auto; flex-grow: 2; }
#outer.landscape.compact > #status { width: 12em; }

#undo-redo { display: flex; gap: 4px; }
#undo-redo button { flex: 1; font-size: 16px; }
#outer.landscape #undo-redo { width: 100%; }


.btn-value, .btn-note, .btn-action {
    width: 45px; height: 45px;
    border: 1px solid #bbb; border-radius: 4px;
    background: #f5f5f5; cursor: pointer;
    user-select: none;
    display: flex; align-items: center; justify-content: center;
}
.btn-value  { font-size: 22px; }
.btn-note   { font-size: 14px; color: #555; }
.btn-action { font-size: 17px; }
.btn-value:hover, .btn-note:hover, .btn-action:hover  { background: #e0eeff; border-color: #91d4ed; }
.btn-value:active, .btn-note:active, .btn-action:active { background: #c5e2ff; }

.grid-message {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(var(--pad-scale, 1));
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #91d4ed;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    color: #2a7a52;
    pointer-events: none;
    z-index: 20;
    animation: grid-message-in 0.12s ease-out;
}
@keyframes grid-message-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.grid-wrapper { position: relative; display: inline-block; }
@font-face {
    font-family: "Noto Sans Digits";
    src: url("fonts/noto-sans-digits.woff2") format("woff2");
    unicode-range: U+0030-0039;
}
@font-face {
    font-family: "Noto Sans Digits";
    src: url("fonts/noto-sans-digits-700.woff2") format("woff2");
    font-weight: 700;
    unicode-range: U+0030-0039;
}
.grid-wrapper, #page { font-family: "Noto Sans Digits", Cabin, sans-serif; }
.grid-wrapper:focus { outline: none; }
body.keyboard-mode .grid-wrapper:focus {
    outline: 2px solid #66aaff;
    outline-offset: 2px;
}
body.nav-mode .grid-wrapper { cursor: none; }
body.nav-mode .white:hover:not(.in-range):not(.selected) { background: #fff; }

.keypad {
    position: absolute;
    z-index: 30;
    padding: 5px;
    background: #fff;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    user-select: none;
    touch-action: none;
    transform: scale(calc(var(--pad-scale, 1) * var(--pad-fit, 1)));
}
.grid-wrapper.dragging .keypad { pointer-events: none; }

.keypad-digits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
.keypad-row { display: flex; gap: 3px; margin-top: 3px; }
.keypad-key, .keypad-wide {
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f5f5f5;
    font: inherit;
    cursor: pointer;
    padding: 0;
}
.keypad-key { width: 45px; height: 45px; font-size: 24px; }
.keypad-wide { flex: 1; height: 34px; font-size: 14px; }
.keypad-key:hover, .keypad-wide:hover { background: #e0eeff; border-color: #91d4ed; }
.keypad-key.on { background: #c5e2ff; border-color: #91d4ed; font-weight: bold; }
.keypad-key.mixed {
    background: linear-gradient(135deg, #c5e2ff 0 50%, #f5f5f5 50% 100%);
    border-color: #91d4ed;
}
.keypad.keypad-pencil .keypad-key { font-size: 15px; color: #555; }
.keypad-mode { font-weight: bold; }
.keypad-wide svg { display: block; margin: 0 auto; }
.keypad-close {
    position: absolute;
    top: -9px; right: -9px;
    width: 20px; height: 20px;
    border: 1px solid #888; border-radius: 50%;
    background: #fff; color: #666;
    font: inherit; font-size: 11px; line-height: 1;
    cursor: pointer; padding: 0;
}
.keypad-close:hover { background: #e0eeff; border-color: #91d4ed; color: #222; }
.btn-action svg { display: block; }

.grid-wrapper .white * { pointer-events: none; }

.grid-wrapper { user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }

.grid-wrapper svg line, .grid-wrapper svg rect { stroke-width: var(--grid-line, 1); }

.cell {
    position: absolute; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
}
.white { background: #fff; }
.white:hover { background: #ecf5ff; }
.black { background: #000; color: #fff; }
.white.in-range, .white.in-range:hover { background: #dceeff; }
.black.in-range { background: #1a1a1a; }
.white.selected { background: #c5e2ff !important; box-shadow: inset 0 0 0 2px #91d4ed !important; }
.black.selected { background: #224a72 !important; box-shadow: inset 0 0 0 2px #1d4062 !important; }

.value { font-size: 22px; }
.sum { position: absolute; font-size: 15px; line-height: 1; }
.sum.right { top: 3px; right: 3px; }
.sum.down  { bottom: 3px; left: 3px; }
.notes {
    position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px;
    display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
    font-size: 10px; color: #666;
}
.note { display: flex; align-items: center; justify-content: center; }

.violation-b { color: blue; }
.violation-a { color: red; }
.white.violation-b { background: rgba(140,174,255,0.2); }
.black .sum.violation-b { color: rgba(192,192,255,1); }

#overlay-backdrop {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
#overlay-backdrop.hidden { display: none; }
.overlay-box {
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    max-height: 80vh; overflow: hidden;
}
.overlay-box.stacked {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.overlay-box.overlay-simple { padding: 32px 40px; text-align: center; gap: 20px; min-width: 260px; }
.overlay-box.overlay-panel  { width: min(480px,90vw); }
.overlay-title   { font-size: 20px; font-weight: bold; }
.overlay-message { font-size: 15px; color: #333; }
.overlay-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.overlay-share { margin-top: 2px; }
.overlay-buttons button {
    padding: 8px 20px; font-size: 15px; border-radius: 6px;
    border: 1px solid #bbb; background: #f5f5f5; cursor: pointer;
}
.overlay-buttons button:hover { background: #e0eeff; border-color: #91d4ed; }
.overlay-buttons button:focus { outline: 2px solid #3b8ed0; outline-offset: 2px; }
.overlay-buttons button.overlay-default { background: #e0eeff; border-color: #91d4ed; font-weight: bold; }
.overlay-buttons button.overlay-default:hover { background: #c8e0ff; }
.overlay-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; font-size: 16px; font-weight: bold;
    border-bottom: 1px solid #eee; flex-shrink: 0;
}
.overlay-close {
    background: none; border: none; font-size: 16px;
    cursor: pointer; color: #888; padding: 0 4px;
}
.overlay-close:hover { color: #333; }
.overlay-scroll { overflow-y: auto; overflow-x: auto; flex: 1; }
.overlay-scroll:focus { outline: none; }
.overlay-scroll:focus-visible { outline: 2px solid #91d4ed; outline-offset: -2px; }

.help { padding: 0 20px 20px; font-size: 14px; line-height: 1.55; }
.help h3 { margin: 18px 0 6px; font-size: 14px; }
.help h3:first-child { margin-top: 14px; }
.help p { margin: 6px 0; }
.help-keys { border-collapse: collapse; width: 100%; margin: 6px 0; }
.help-keys td { padding: 3px 12px 3px 0; vertical-align: top; }
.help-keys td:first-child { white-space: nowrap; }
.help-swatch { font-size: 11px; }

.mp-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    align-items: center; column-gap: 10px; padding: 0 20px;
}
.mp-cell {
    padding: 8px 0; border-bottom: 1px solid #f0f0f0;
    font-size: 13px; overflow: hidden; white-space: nowrap; text-align: left;
}
.mp-cell:nth-last-child(-n+6) { border-bottom: none; }
.mp-cell-id    { font-weight: bold; }
.mp-cell-id:focus { outline: 2px solid #91d4ed; outline-offset: -2px; }
.mp-cell-stars { text-align: left; }
.mp-cell-pct   { text-align: right; color: #555; }
.mp-cell-time  { color: #888; }
.mp-row-current .mp-cell { background: #f0f7ff; }
.mp-del-btn {
    padding: 3px 8px; font-size: 12px;
    border: 1px solid #bbb; border-radius: 4px;
    background: #f5f5f5; cursor: pointer;
}
.mp-del-btn:hover { background: #e0eeff; border-color: #91d4ed; }
.mp-cell-delete { display: flex; align-items: stretch; gap: 4px; overflow: visible; }
.mp-share-btn { padding: 3px 6px; display: flex; align-items: center; }
@media (max-width: 520px) {
    .mp-list { grid-template-columns: auto auto auto auto auto; column-gap: 6px; padding: 0 10px; }
    .mp-cell-time { display: none; }
    .overlay-box.overlay-panel { width: calc(100vw - 16px); }
}
.solved-check { cursor: pointer; color: green; font-weight: bold; }
.solved-check:focus, #solvedCount:focus {
    outline: 2px solid #91d4ed; outline-offset: 2px; border-radius: 3px;
}
.btn-value:focus, .btn-note:focus, .btn-action:focus {
    outline: 2px solid #91d4ed; outline-offset: -2px;
}
.solved-check:hover { text-decoration: underline; }
.mp-empty { padding: 24px; text-align: center; color: #888; font-size: 14px; }

.printonly { display: none; }

@media print {
    @page { margin: 15mm; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html { background: none; }
    html, body { overflow: hidden !important; }
    #scale-wrapper {
        position: static !important; transform: none !important;
        width: auto !important;
    }
    html, body, #scale-wrapper { height: 100% !important; margin: 0 !important; padding: 0 !important; }
    #outer {
        display: flex !important; flex-direction: column !important;
        height: 100% !important; padding: 0 !important;
    }
    #outer::before {
        content: ""; display: block; flex: none;
        width: calc((100% - var(--print-w)) / 2); aspect-ratio: 1;
        max-height: calc(50% - var(--print-h) / 2);
    }
    #page { display: block !important; padding: 0 !important; margin: 0 auto; }
    #grid-area { display: block !important; padding: 0 !important; }
    .grid-wrapper { transform-origin: 0 0; }
    .printonly { display: block !important; text-align: center; color: #222; }
    #print-head { font: bold 16px/20px "Noto Sans Digits", Cabin, sans-serif; margin-bottom: 10px; }
    #print-foot { font: 11px/14px "Noto Sans Digits", Cabin, sans-serif; color: #555; margin-top: 8px; }
    .white.selected, .black.selected { background: unset !important; box-shadow: none !important; }
    .black { background: #000 !important; color: #fff !important; }
    .grid-wrapper { break-inside: avoid; page-break-inside: avoid; }
    .noprint { display: none !important; }
}

.share-panel { font-family: "Noto Sans Digits", Cabin, sans-serif; }