/* Shared UI palette, surfaces and interaction states for every page. */
html[data-theme="light"] {
  color-scheme: light;
  --text: #25231e;
  --text2: #595449;
  --bg: #fffdf7;
  --bg2: #f3efe4;
  --highlight: #e4ddcc;
  --link: #806011;
  --link2: #654909;
  --border: #d4c9ad;
  --hover: rgba(128,96,17,.1);
  --shadow: rgba(37,35,30,.12);
  --grey: #6b665b;
  --icons: invert(0);
}
html[data-theme="dark"] { color-scheme: dark; }
body { font-family: var(--sans-font); line-height: 1.5; }
a { color: var(--link); }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
button:disabled, .disabled { opacity: .5; cursor: not-allowed; }
.main-wrap { width: 100%; min-width: 0; }
.box, .auth, .menu-box-pop, .round__side, .round__under, .round__app__table {
  background: var(--bg); color: var(--text); border-color: var(--border);
}
/* Authentication uses the same panel and form controls as other UI. */
.isauthwrap { padding: clamp(1.5rem, 5vw, 4rem) 1rem; }
.auth { width: min(100%, 42rem); margin: auto; border: 1px solid var(--border);
  border-radius: .5rem; padding: clamp(1.25rem, 4vw, 3rem); box-shadow: 0 12px 40px var(--shadow); }
.auth-login { max-width: 30rem; }
.auth .box__top { padding: 0 0 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.auth .form-group { margin: 0 0 1.4rem; }
.auth .form-label { display: block; margin-bottom: .45rem; color: var(--text); }
.auth .form-control:not([type="checkbox"]) { display: block; width: 100%; min-height: 2.9rem;
  padding: .65rem .8rem; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: .25rem; }
.auth small, .auth .form-help { color: var(--text2); line-height: 1.5; }
.auth .submit { width: 100%; min-height: 3rem; padding: .7rem 1.5rem; margin-top: .5rem;
  border: 1px solid var(--link); border-radius: .25rem; background: var(--link); color: var(--bg2); cursor: pointer; font-weight: 700; }
.auth .alternative { margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--border); }
.auth .agreement label { color: var(--text); }
.auth .form-check > div { display: flex; gap: .75rem; align-items: center; }
/* Profiles share panel, tab and list surfaces across themes. */
.page-menu { width: min(100% - 2rem, 80rem); margin: clamp(1rem, 4vw, 3rem) auto; gap: 1.5rem; min-width: 0; }
.page-menu__content, .user-show { min-width: 0; }
.sub-ratings, .user-show, .number-menu { background: var(--bg); color: var(--text); border-color: var(--border); }
.sub-ratings a, .user-show a { color: var(--text); }
.number-menu { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.number-menu .nm-item { flex: 1 1 5rem; padding: .8rem; text-align: center; cursor: pointer; color: var(--text2); }
.number-menu .active, .number-menu .nm-item:hover { background: var(--hover); color: var(--link); }
.user-show .game-row { border-color: var(--border); background: var(--bg); color: var(--text); }
.user-show .game-row:hover { background: var(--hover); }
/* Keep chess geometry and piece rules in game.css; theme the surrounding UI here. */
.round { margin: 1rem auto; width: min(100% - 2rem, 100rem); }
.round .ruser, .round moves-panel, .round .rcontrols, .round .game-info { background: var(--bg); color: var(--text); border-color: var(--border); }
.round .ruser { padding: .35rem .6rem; }
.round moves-panel { min-width: 0; overflow: auto; }
.round button { color: var(--text); border-color: var(--border); }
.round button:hover { background-color: var(--hover); }
@media (max-width: 600px) {
  .page-menu { width: calc(100% - 1rem); gap: .75rem; }
  .round { width: calc(100% - .5rem); margin: .5rem auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.number-menu--tabs .nm-item.active, .number-menu--tabs .nm-item:hover {
  background: var(--hover); color: var(--link); border-color: var(--link);
}
.empty-state { padding: 2rem; text-align: center; color: var(--text2); }
.user-show .user-infos, .user-show .user-infos:not(:hover) { background: var(--bg); color: var(--text); }
.round moves-panel .buttons { background: var(--bg); border-color: var(--border); }
.round .ruser { border-color: var(--link); }
.number-menu button.nm-item { border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; }
.number-menu button.nm-item.active, .number-menu button.nm-item:hover { background: var(--hover); color: var(--link); border-bottom-color: var(--link); }