html,
body {
background: #f8f9fa;
}
body {
padding-top: 1.5rem;
padding-bottom: 2rem;
}
/* Puzzle feedback: newlines in textContent (e.g. daily “come back tomorrow”). */
#feedback {
white-space: pre-line;
}
button,
.bonsai-btn {
border: 1px solid #6c757d;
background: #f1f3f5;
color: #212529;
padding: 0.2rem 0.5rem;
border-radius: 2px;
font-size: 0.875rem;
line-height: 1.25;
}
button:hover,
.bonsai-btn:hover {
background: #e2e6ea;
}
button:disabled,
.bonsai-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.bonsai-btn.is-selected {
background: #d0d4d8;
}
/* Daily puzzle email: real switch look (strip native button chrome). */
button.bonsai-toggle {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
width: 2.75rem;
height: 1.375rem;
padding: 0;
margin: 0;
flex-shrink: 0;
border-radius: 999px;
border: 1px solid #868e96;
background: #ced4da;
cursor: pointer;
line-height: 0;
font-size: 0;
overflow: hidden;
}
button.bonsai-toggle::-moz-focus-inner {
border: 0;
padding: 0;
}
button.bonsai-toggle:hover {
background: #c1c7cd;
}
button.bonsai-toggle.is-on {
background: #8faa93;
border-color: #6d8f72;
}
button.bonsai-toggle.is-on:hover {
background: #819c85;
}
button.bonsai-toggle:focus-visible {
outline: 2px solid #495057;
outline-offset: 2px;
}
.bonsai-toggle__thumb {
position: absolute;
top: 50%;
left: 0.1875rem;
width: 1rem;
height: 1rem;
margin-top: -0.5rem;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform 0.18s ease;
pointer-events: none;
}
button.bonsai-toggle.is-on .bonsai-toggle__thumb {
transform: translateX(calc(2.75rem - 1rem - 0.375rem));
}
#account-modal .modal-header .btn-close {
border: 0;
background: transparent;
padding: 0.5rem;
}
#board {
contain: layout paint;
transform: translateZ(0);
backface-visibility: hidden;
isolation: isolate;
}
/* One grid on #move-rows + display:contents on rows so all ply lines share the
same three tracks (fixed widths — avoids max-content + contents quirks that
can throw off input columns). Latin / Persian ply labels from app.js. */
#move-rows {
display: grid;
grid-template-columns:
minmax(0, 3.25rem)
minmax(0, 6rem)
minmax(0, 6rem);
column-gap: 0.25rem;
row-gap: 0.5rem;
align-items: center;
direction: ltr;
justify-items: stretch;
/* Same horizontal origin as #to-play / #check-btn (full width of #moves-col). */
width: 100%;
}
.move-row {
display: contents;
}
.move-num {
min-width: 0;
max-width: 100%;
justify-self: stretch;
/* Same left edge as #to-play and #check-btn (full-width grid, LTR column 1). */
text-align: left;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
}
.move-input {
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
/* SAN uses Latin letters; keep LTR even if a future layout uses rtl on . */
direction: ltr;
}
/* dir=ltr keeps primary links on the left and the language switch on the right
even when is rtl (e.g. Farsi notation). */
.nav-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
direction: ltr;
}
.nav-links {
display: flex;
flex-wrap: nowrap;
gap: 1.5rem;
}
.nav-link {
color: #000;
text-decoration: none;
}
.nav-lang {
flex-shrink: 0;
}
.nav-actions .btn-link.nav-link {
color: #000;
}
.nav-actions .btn-link.nav-link:hover {
text-decoration: underline;
}
#account-modal .nav-pills .nav-link {
border: 1px solid #6c757d !important;
background: #f1f3f5 !important;
color: #212529 !important;
padding: 0.2rem 0.5rem !important;
font-size: 0.875rem !important;
line-height: 1.25 !important;
}
#account-modal .nav-pills .nav-link.active {
border-color: #6c757d !important;
background: #d0d4d8 !important;
color: #212529 !important;
}
#account-modal #form-signin button[type='submit'],
#account-modal #form-register button[type='submit'] {
border: 1px solid #6c757d !important;
background: #f1f3f5 !important;
color: #212529 !important;
}
#account-modal #form-signin button[type='submit']:hover,
#account-modal #form-register button[type='submit']:hover {
background: #e2e6ea !important;
}
.white-1e1d7 {
background-color: #ffffff !important;
color: #333;
}
.black-3c85d {
background: repeating-linear-gradient(
-45deg,
#999999,
#999999 3px,
#ffffff 3px,
#ffffff 6px
) !important;
color: #333;
}
@media (max-width: 767.98px) {
#board-col {
width: 90%;
margin: 1rem auto 0;
}
#moves-col {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.nav-bar {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#notation-content {
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
#notation-content .notation-san-list {
margin: 0.75rem 0 1rem;
padding-inline-start: 1.25rem;
}
#notation-content .notation-san-list li {
margin-bottom: 0.35rem;
}
#notation-content .notation-san-list li:last-child {
margin-bottom: 0;
}