/* ==========================================================================
   MKS Bridge — Senior-friendly light theme for BEN
   Loaded AFTER /app/frontend/style.css so every rule here wins on cascade.
   Design goals:
     - High contrast: near-black text on off-white background.
     - Large type: body 20px, headings 24–32px, card faces very large.
     - Generous spacing & tap targets (min ~48px).
     - Classic suit colors: red hearts/diamonds, black spades/clubs.
     - No decorative noise (no patterns, no gradients, no pixel font).
     - Clear focus rings and hover states.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  --mks-bg:         #f7f5f0;      /* warm off-white (less glare than pure white) */
  --mks-surface:    #ffffff;
  --mks-surface-2:  #f0ece5;
  --mks-border:     #c9c4ba;
  --mks-border-dk:  #8a8579;
  --mks-text:       #1a1a1a;
  --mks-text-2:     #3a3a3a;
  --mks-text-dim:   #5f5a50;
  --mks-accent:     #1d4ed8;      /* deep readable blue */
  --mks-accent-dk:  #1e3a8a;
  --mks-accent-soft:#dbeafe;
  --mks-success:    #15803d;
  --mks-warn:       #b45309;
  --mks-danger:     #b91c1c;

  /* Suit palette — classic, high contrast */
  --mks-red:        #c0252b;      /* hearts + diamonds */
  --mks-black:      #111111;      /* spades + clubs */
  --mks-card-bg:    #ffffff;
  --mks-card-border:#7a7670;
}

/* =============================== Base =============================== */

* { box-sizing: border-box; }

body {
  background: var(--mks-bg) !important;
  background-image: none !important;
  color: var(--mks-text) !important;
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Tahoma', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: 'Atkinson Hyperlegible', 'Verdana', sans-serif !important;
  color: var(--mks-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  animation: none !important;
}
h1 { font-size: 32px !important; margin: 12px 0 16px !important; }
h2 { font-size: 24px !important; margin: 20px 0 12px !important; color: var(--mks-accent-dk) !important; }
h3 { font-size: 20px !important; margin: 14px 0 8px !important; }

a { color: var(--mks-accent) !important; text-decoration: underline; border-bottom: none !important; }
a:hover { color: var(--mks-accent-dk) !important; }

label { color: var(--mks-text-2) !important; font-size: 18px !important; }

/* =============================== Main layout =============================== */

#container {
  background: var(--mks-surface) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  gap: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.grid-item,
#north, #east, #south, #west,
#table, #auction-main, #bidding {
  background: var(--mks-surface) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 8px !important;
  color: var(--mks-text) !important;
  padding: 6px;
}

/* =============================== Cards =============================== */

.card,
.empty-suit {
  background: var(--mks-card-bg) !important;
  border: 2px solid var(--mks-card-border) !important;
  border-radius: 6px !important;
  color: var(--mks-black) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  font-family: 'Atkinson Hyperlegible', 'Verdana', sans-serif !important;
  font-weight: 700 !important;
  /* larger card body */
  height: 5.5rem !important;
  width: 3.6rem !important;
  max-width: 5rem !important;
  font-size: 2.2rem !important;          /* suit glyph */
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.card::before {
  font-family: 'Atkinson Hyperlegible', 'Verdana', sans-serif !important;
  font-size: 2rem !important;             /* rank character */
  font-weight: 700 !important;
  color: inherit !important;
  top: -2.2rem !important;
}

/* Display "10" instead of "T" on the ten card — BEN stores rank as "T" in
   data-value, which the ::before pseudo picks up. Override only that case. */
.card[data-value="T"]::before {
  content: "10" !important;
  font-size: 1.6rem !important;           /* fits two digits in same box */
  letter-spacing: -1px;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 12px rgba(29,78,216,0.25);
  border-color: var(--mks-accent) !important;
  cursor: pointer;
}

/* Suit colors — BEN applies .red (hearts), .orange (diamonds), .green (clubs).
   For seniors we fold this into the classic two-color convention. */
.card.red,        .card.red::before        { color: var(--mks-red)   !important; }
.card.orange,     .card.orange::before     { color: var(--mks-red)   !important; }  /* diamonds → red */
.card.green,      .card.green::before      { color: var(--mks-black) !important; }  /* clubs → black */
/* Spades (no class) already var(--mks-black) via the base .card rule. */

/* =============================== Seat labels =============================== */

.seat-label,
.label-number,
.label-north, .label-south, .label-east, .label-west {
  color: var(--mks-text) !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
}

.seat-label.turn {
  color: var(--mks-surface) !important;
  background: var(--mks-accent) !important;
  text-shadow: none !important;
  padding: 2px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35);
  animation: mks-pulse 1.8s ease-in-out infinite !important;
}
@keyframes mks-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(29,78,216,0.35); }
  50%      { box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 0 0 6px rgba(29,78,216,0.15); }
}

/* =============================== Auction =============================== */

#auction-main,
#auction-container {
  background: var(--mks-surface-2) !important;
  color: var(--mks-text) !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
#auction table { border-collapse: collapse; width: 100%; }
#auction th, #auction thead td {
  background: var(--mks-accent-soft) !important;
  color: var(--mks-accent-dk) !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 8px !important;
  border: 1px solid var(--mks-border) !important;
}
#auction td {
  border: 1px solid var(--mks-border) !important;
  color: var(--mks-text) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  padding: 10px !important;
}

/* =============================== Bidding box =============================== */

#bidding-levels div,
#bidding-suits  div,
#bidding-calls  div {
  background: var(--mks-surface) !important;
  color: var(--mks-text) !important;
  border: 2px solid var(--mks-border-dk) !important;
  border-radius: 8px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  /* bigger tap targets */
  width: 3.8rem !important;
  height: 3.6rem !important;
  padding: 0 !important;
  margin: 0.35rem !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background 80ms, transform 80ms, box-shadow 80ms;
}
#bidding-levels div:hover,
#bidding-suits  div:hover,
#bidding-calls  div:hover {
  background: var(--mks-accent-soft) !important;
  border-color: var(--mks-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(29,78,216,0.2);
}

/* Bidding-box semantic colors — keep hue but lift contrast */
#bidding-box .pass     { background: var(--mks-success) !important; color: #fff !important; border-color: #0f5f2d !important; }
#bidding-box .hint     { background: #fde68a !important; color: #5c3a00 !important; border-color: #b45309 !important; }
#bidding-box .alert    { background: var(--mks-accent) !important; color: #fff !important; border-color: var(--mks-accent-dk) !important; }
#bidding-box .double   { background: var(--mks-danger) !important; color: #fff !important; border-color: #7f1d1d !important; }
#bidding-box .redouble { background: #6d28d9 !important; color: #fff !important; border-color: #4c1d95 !important; }
#bidding-box .invalid  {
  background: #eeeae0 !important;
  color: #9b9588 !important;
  border: 2px dashed #b8b2a4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  text-decoration: line-through;
  opacity: 0.65;
}
#bidding-box .selected { background: #fde68a !important; color: #5c3a00 !important; border-color: var(--mks-warn) !important; box-shadow: 0 0 0 3px rgba(180,83,9,0.35) !important; }

/* Make suit glyphs inside bidding buttons match card coloring when they show up */
#bidding-suits div.red,
#bidding-suits div.red *    { color: var(--mks-red)   !important; }
#bidding-suits div.orange,
#bidding-suits div.orange * { color: var(--mks-red)   !important; }
#bidding-suits div.green,
#bidding-suits div.green *  { color: var(--mks-black) !important; }

/* =============================== Status pills =============================== */

/* These four items stack vertically inside a fixed-height grid cell in BEN's
   layout (.tricks + #last-trick + #claim + #conceed). The upstream CSS sizes
   each at ~26px tall. Keep compact so all four fit without overflowing into
   the bidding box below. Differentiate .tricks (primary) from the toggles. */

.tricks {
  background: var(--mks-accent) !important;
  color: #fff !important;
  border: 2px solid var(--mks-accent-dk) !important;
  border-radius: 6px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 4px 10px !important;
  margin: 3px auto !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

#last-trick,
#claim,
#conceed {
  background: var(--mks-surface) !important;
  color: var(--mks-accent-dk) !important;
  border: 1.5px solid var(--mks-accent) !important;
  border-radius: 5px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 3px 8px !important;
  margin: 2px auto !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 9rem;
  box-shadow: none !important;
  cursor: pointer;
}
#last-trick:hover,
#claim:hover,
#conceed:hover {
  background: var(--mks-accent-soft) !important;
}

#boardno {
  background: var(--mks-accent) !important;
  color: #fff !important;
  border: 2px solid var(--mks-accent-dk) !important;
  border-radius: 8px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 4px 0 !important;
}

/* =============================== Home link + nav =============================== */

#homeLink,
.center a {
  display: inline-block;
  background: var(--mks-surface) !important;
  color: var(--mks-accent) !important;
  border: 2px solid var(--mks-accent) !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  margin: 10px 4px;
  min-height: 52px;
}
#homeLink:hover,
.center a:hover {
  background: var(--mks-accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(29,78,216,0.25);
}

/* =============================== Explain panel =============================== */

#explain,
#auctionstr {
  background: var(--mks-surface) !important;
  color: var(--mks-text) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1.6;
}

/* =============================== Home / form pages =============================== */

.container {
  background: var(--mks-surface) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin: 14px auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.border {
  background: var(--mks-surface-2) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 8px !important;
  color: var(--mks-text) !important;
  padding: 14px !important;
}

input, textarea, select {
  background: var(--mks-surface) !important;
  color: var(--mks-text) !important;
  border: 2px solid var(--mks-border-dk) !important;
  border-radius: 6px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.1rem !important;
  padding: 10px 12px !important;
  min-height: 44px;          /* senior-friendly tap target */
}
input[type="checkbox"], input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-height: 22px;
  vertical-align: middle;
  margin: 0 6px 0 2px;
  accent-color: var(--mks-accent);
}
input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--mks-accent) !important;
  outline-offset: 2px;
  border-color: var(--mks-accent) !important;
}

button, input[type="submit"] {
  background: var(--mks-accent) !important;
  color: #fff !important;
  border: 2px solid var(--mks-accent-dk) !important;
  border-radius: 8px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  transition: background 80ms, transform 80ms, box-shadow 80ms;
}
button:hover, input[type="submit"]:hover {
  background: var(--mks-accent-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(29,78,216,0.3);
}
button:focus-visible {
  outline: 3px solid var(--mks-warn) !important;
  outline-offset: 2px;
}

/* =============================== Dialogs =============================== */

.ui-dialog {
  background: var(--mks-surface) !important;
  border: 2px solid var(--mks-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  color: var(--mks-text) !important;
}
.ui-dialog-titlebar {
  background: var(--mks-accent-soft) !important;
  color: var(--mks-accent-dk) !important;
  border-radius: 8px 8px 0 0 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
}

/* =============================== Generic tables =============================== */

table {
  border-collapse: collapse;
  background: var(--mks-surface) !important;
  color: var(--mks-text) !important;
  font-size: 1rem;
}
table th {
  background: var(--mks-accent-soft) !important;
  color: var(--mks-accent-dk) !important;
  border: 1px solid var(--mks-border) !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 10px !important;
}
table td {
  border: 1px solid var(--mks-border) !important;
  padding: 8px 10px !important;
}

/* =============================== Turn indicator / legacy =============================== */

.blink, .bold {
  animation: mks-blink 1.2s ease-in-out infinite !important;
  color: var(--mks-accent) !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
}
@keyframes mks-blink {
  0%, 60% { opacity: 1; }
  80%     { opacity: 0.35; }
  100%    { opacity: 1; }
}

/* =============================== Accessibility polish =============================== */

*:focus-visible {
  outline: 3px solid var(--mks-accent) !important;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}