/* Shared palette and surfaces from the language app. */
:root {
  --bg: #f8faff;
  --card: #fff;
  --accent: #4f46e5;
  --muted: #64748b;
}
html { min-height: 100%; }
html body {
  margin: 0 auto;
  padding: 100px 28px 28px;
  max-width: 1360px;
  background: var(--bg);
  color: #172033;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body #topnav {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  min-height: 72px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  padding: 12px max(24px, calc((100vw - 1304px) / 2));
  background: #ffffffeb;
  border-bottom: 1px solid #e8eaf3;
  backdrop-filter: blur(14px);
}
body #topnav > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #3730a3;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}
body #topnav .material-icons { font-size: 26px; color: #4f46e5; }
body .game_page_title { padding: 0; color: #475569; font-size: 14px; }
body .logo_game { padding: 0; margin-left: auto; }
body .logo_game img { max-height: 42px; width: auto; border-radius: 8px; }
body h1, body h2, body h3 { color: #172554; font-weight: 750; letter-spacing: -.035em; }
body h1, body h2 { margin: 0 0 20px; }
body h2 { font-size: clamp(26px, 4vw, 36px); }
body h3 { font-size: 20px; margin-bottom: 16px; }
body a, body a:visited { color: var(--accent); }
body a:hover { color: #3730a3; }
body :focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; }
body .container { width: 100%; max-width: 1100px; }
body .data_block {
  padding: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: linear-gradient(155deg, #fff 65%, #f8faff);
  box-shadow: 0 18px 50px #0f172a0d;
}
body .data_block h2 { font-size: 25px; }
body input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body select, body textarea {
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #172033;
  font: inherit;
}
body input[type=checkbox], body input[type=radio] { accent-color: var(--accent); }
body input[readonly] { background: #f1f5f9 !important; }
body label { color: #475569; font-weight: 600; }
body .btn, body button, body input[type=submit], body input[type=button] {
  padding: 10px 18px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
body .btn-primary, body input[type=submit], body #belote, body #rebelote {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
/* Anchors styled as buttons must override body a and body a:visited, whose
   colour rules are more specific than a plain .btn-primary selector. */
body a.btn, body a.btn:link, body a.btn:visited, body a.btn:hover,
body a.btn:active, body a.btn:focus {
  color: #3730a3;
  text-decoration: none;
}
body a.btn-primary, body a.btn-primary:link, body a.btn-primary:visited,
body a.btn-primary:hover, body a.btn-primary:active, body a.btn-primary:focus {
  color: #fff;
}
body .btn-primary:hover, body input[type=submit]:hover { background: #4338ca; border-color: #4338ca; }
body button:disabled, body input:disabled { opacity: .55; cursor: default; }
/* The action toolbar wraps onto several rows on narrow screens; without a row
   gap the wrapped rows touch each other. Horizontal spacing comes from the
   buttons' own margins, so only the row gap is added here. */
body #buttons-div #game_action_buttons,
body #buttons-div #poker_bet_buttons {
  row-gap: 8px;
}
body #footer { margin-top: 36px; padding: 20px 0; border-top: 1px solid #e2e8f0; color: var(--muted); font-size: 13px; }
.home-heading { padding: 36px; margin-bottom: 28px; border: 1px solid #e0e7ff; border-radius: 30px; background: radial-gradient(ellipse at 88% 12%, #e0e7ff, transparent 50%), linear-gradient(135deg, #fff 38%, #f2f4ff); box-shadow: 0 22px 60px #312e8110; }
.home-heading h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.055em; }
.home-heading h2 { margin: 12px 0 0; color: var(--muted); font-size: 18px; font-weight: 500; letter-spacing: 0; }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body .game-tile { display: block; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; color: #172554; text-decoration: none; box-shadow: 0 8px 24px #0f172a08; transition: transform .18s ease, box-shadow .18s ease; }
body .game-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 38px #312e8112; border-color: #c7d2fe; }
.game-tile img { display: block; width: 100%; height: 170px; object-fit: cover; }
.game-tile span { display: block; padding: 18px 20px; font-size: 19px; font-weight: 750; }
body #card-table-whist, body #card-table-belote, body #card-table-contree, body #card-table-poker { margin: 20px 0; border: 1px solid #c7d2fe; border-radius: 22px; box-shadow: 0 16px 40px #0f172a14; }
body #card-table-whist, body #card-table-poker { background: #17644f; }
body #card-table-belote, body #card-table-contree { background: #373d83; }
body .active_player { color: #4338ca; }
body .normal_player, body #msg_div { color: #172554; }
body #scoresheet { color: #3730a3; }
body .poker_showdown_player { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; color: #172033; }
body .poker_showdown_player_name { color: #172554; }
body .poker_showdown_rank { color: #4338ca; }
body .poker_showdown_winner { background: #eef2ff; border-color: #a5b4fc; box-shadow: 0 8px 24px #312e8112; }
body .poker_showdown_cards_label { color: var(--muted); }
@media (max-width: 900px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html body { padding: 108px 16px 16px; }
  body #topnav { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  body .game_page_title { font-size: 12px; }
  body #topnav > a { font-size: 16px; }
  body .logo_game { display: none; }
  .home-heading { padding: 24px; border-radius: 22px; }
  .game-grid { gap: 12px; }
  .game-tile img { height: 125px; }
  .game-tile span { padding: 14px; font-size: 16px; }
  body form > .container > .row > .data_block { flex: 0 0 100%; max-width: 100%; margin: 10px 0; }
  body form > .container > .row > .col-2 { flex: 0 0 100%; max-width: 100%; text-align: center; }
  body form > .container > .row > .col-2 br { display: none; }
}
/* Keep player columns and live-added rows aligned in every scoresheet. */
body #scoresheet_div {
  margin: 28px 0;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px #0f172a08;
  overflow-x: auto;
  scroll-margin-top: 100px;
}
body #scoresheet_div .div_title {
  margin: 0 0 20px;
  color: #172554;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.03em;
}
body #scoresheet_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
body #scoresheet_div .scoresheet-legend {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
}
body #scoresheet_table > thead > tr > th {
  min-width: 112px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
}
body #scoresheet_table > thead > tr > th:first-child { border-top-left-radius: 12px; }
body #scoresheet_table > thead > tr > th:last-child { border-top-right-radius: 12px; }
body #scoresheet_table > tbody > tr > td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  text-align: center;
}
body #scoresheet_table > tbody > tr:nth-child(even) { background: #f8faff; }
body #scoresheet_table > tbody > tr:hover { background: #f1f5ff; }
body #scoresheet_table > tbody > tr:last-child {
  background: #eef2ff;
  color: #3730a3;
  font-weight: 750;
}
body #scoresheet_table > tbody > tr:last-child > td { border-bottom: 0; }
body #scoresheet_table.scoresheet-player-separators > thead > tr > th + th,
body #scoresheet_table.scoresheet-player-separators > tbody > tr > td + td {
  border-left: 2px solid #c7d2fe;
}
body #scoresheet_table table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}
body #scoresheet_table table td {
  width: auto;
  padding: 2px 5px;
  border: 0;
  text-align: center;
  font-size: 14px;
}
body #scoresheet_table thead table { margin-top: 8px; }
body #scoresheet_table thead table td { color: #8183a1; font-size: 11px; font-weight: 650; }
body #scoresheet_table tbody table td:nth-child(3) { color: #3730a3; font-weight: 750; }
@media (max-width: 600px) {
  body #scoresheet_div { padding: 16px; border-radius: 16px; }
  body #scoresheet_table > thead > tr > th,
  body #scoresheet_table > tbody > tr > td { padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body .game-tile { transition: none; }
  body .game-tile:hover { transform: none; }
  body .active_player { animation: none; }
}