@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,600;6..96,800&family=EB+Garamond:wght@500;600;700&display=swap");

/* =====================================================================
   Chess: the room, shared by both boards (index.html and three.html).

   A cafe table: a slab of cool white marble with grey veins and a brass
   edge, the board set down on it, a wooden chess clock beside it for
   whoever is on the move, and an espresso going cold in the corner. The
   lettering is a cafe menu's: Bodoni for the names, Garamond for the
   rest. No other page on the site is marble; the cream pages (Sudoku,
   Passport, Tile Maze) are paper, and warmer.

   This file comes after each page's own styles and changes only the room:
   the colours they share by name (--bg, --panel, --line, --text, --muted,
   --accent), the lettering, and the few places a dark colour was written
   out. The boards and their pieces are as they were.

   Visual FX on (html.fx-on): steam drifts up off the cup. Off: the cup
   and its steam are there, still.
   ===================================================================== */
:root {
  --bg: #eceae6; --panel: #fcfbf9; --line: #d2c6a4; --text: #27221c; --muted: #6c655b; --accent: #b8963f;
  --brass: #b8963f; --brass-hi: #e6d190; --brass-dk: #7d6424; --espresso: #3b2a20; --cream: #f8f1e3;
  /* the marble: thin grey veins (the lines where a slow noise crosses nothing), over a faint clouding */
  --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' stitchTiles='stitch' baseFrequency='0.0028 0.0062' numOctaves='3' seed='29'/%3E%3CfeColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.42  0 0 0 0 0.47  0 0 0 -11 0.62'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23v)'/%3E%3C/svg%3E");
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.0035 0.0075' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.53  0 0 0 0 0.56  0 0 0 1.1 -0.52'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  --name: "Bodoni Moda", "Bodoni MT", Didot, Georgia, serif;
  --menu: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
}
body {
  font-family: var(--menu); font-size: 18px; font-weight: 500; color: var(--text);
  background: var(--veins) 0 0 / 900px 900px, var(--cloud) 300px 200px / 900px 900px, linear-gradient(155deg, #f8f7f4, #e6e4df);
  background-color: var(--bg); background-attachment: fixed;
}
/* the table's brass edge */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--brass), inset 0 0 0 6px var(--brass-dk), inset 0 0 30px rgba(70, 58, 30, 0.16);
}

.nav-back-games {
  position: fixed; top: 14px; left: 14px; z-index: 99999; text-decoration: none;
  font: 600 16px/1 var(--menu); letter-spacing: 0.3px; color: var(--text);
  background: var(--panel); border: 1px solid var(--brass); border-radius: 6px; padding: 7px 13px 8px;
  box-shadow: 0 2px 0 var(--brass-dk), 0 4px 10px rgba(70, 58, 30, 0.18);
}
.nav-back-games:hover { background: #f4efe2; }

h1 { font-family: var(--name); font-weight: 800; font-size: 2.1rem; letter-spacing: 0.5px; color: var(--espresso); margin-top: 0.7rem; }
.sub { font-size: 1rem; color: var(--muted); font-style: italic; }
#status { font-size: 1.18rem; font-weight: 600; color: var(--text); }
/* whoever is to move: their name in ink, with a dot of their colour beside it
   as on the clocks (a name in its own colour would be lost here: White's is
   nearly the marble's) */
#status .who { white-space: nowrap; }
#status .who i { display: inline-block; width: 0.74em; height: 0.74em; margin-right: 0.4em; border-radius: 50%; vertical-align: -0.02em; box-shadow: 0 0 0 1.5px var(--brass-hi), 0 0 0 2.5px rgba(0, 0, 0, 0.45); }
#status { --check: #b3261e; }    /* "Check!" in a red that reads on marble (the board's glow keeps its own) */

/* the boards lie on the marble: a soft shadow, not a spotlight */
#board { box-shadow: 0 0 0 1px #2a1f14, inset 0 0 0 1px rgba(224, 164, 88, 0.75), 0 0 0 4px rgba(184, 150, 63, 0.4), 0 18px 34px rgba(70, 58, 30, 0.32); }
.sq.off { background: var(--bg); }
#boardSvg { filter: drop-shadow(0 16px 22px rgba(70, 58, 30, 0.3)); }

/* captured pieces: a porcelain saucer each */
.tray { background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(70, 58, 30, 0.12); }
.tray h3, .setup-section h3 { font-family: var(--menu); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--brass-dk); }

/* the players: each a wooden chess clock, its dial lit for whoever is on the move */
.pchip {
  color: var(--cream); font-weight: 600; font-size: 1.02rem; border: 1px solid #2c1d12;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 9px), linear-gradient(180deg, #74553a, #4d3623);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 5px 12px rgba(70, 50, 25, 0.28);
}
.pchip .meta { color: #dccbb0; font-size: 0.85rem; font-style: italic; }
.pchip .dot2 { box-shadow: 0 0 0 1.5px var(--brass-hi), 0 0 0 2.5px rgba(0, 0, 0, 0.35); }
.pchip .clk {
  font-family: var(--name); font-weight: 600; font-size: 1.05rem; color: var(--text);
  background: radial-gradient(circle at 50% 30%, #ffffff, #efe8d6); border: 1px solid #2c1d12; border-radius: 999px; padding: 1px 10px 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1.5px var(--brass);
}
.pchip.turn { border-color: var(--brass-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px var(--brass), 0 5px 14px rgba(70, 50, 25, 0.34); }
.pchip.warn { border-color: #b3261e; }
.pchip.warn .clk { color: #b3261e; }

/* buttons: a menu's cream card with a brass rule; the main one is the espresso */
button.btn, a.btn {
  font-family: var(--menu); font-weight: 600; font-size: 1.05rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--brass); border-radius: 8px;
  box-shadow: 0 2px 0 var(--brass-dk), 0 4px 10px rgba(70, 58, 30, 0.14);
}
button.btn:hover, a.btn:hover { background: #f4efe2; }
button.btn:active, a.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--brass-dk), 0 2px 5px rgba(70, 58, 30, 0.14); }
button.btn.primary { background: var(--espresso); color: var(--cream); border-color: #1e140d; box-shadow: 0 2px 0 #1e140d, 0 4px 10px rgba(70, 58, 30, 0.25); }
button.btn.primary:hover { background: #4a3629; }
button.btn:focus-visible, a.btn:focus-visible, .modebtn:focus-visible, .chip:focus-visible, .nav-back-games:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }

/* the cards: the menu itself, cream with a double brass rule */
.overlay { background: rgba(84, 74, 58, 0.5); }
.card {
  background: #fdfcf9; border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: -7px;
  box-shadow: 0 24px 60px rgba(50, 40, 20, 0.4);
}
.card h2 { font-family: var(--name); font-weight: 800; font-size: 1.85rem; color: var(--espresso); }
.card p { color: var(--muted); font-size: 1.04rem; line-height: 1.4; }
.modebtn { background: #ffffff; color: var(--text); border: 1px solid var(--line); font-family: var(--menu); font-weight: 700; font-size: 1.12rem; --gs-pick: var(--espresso); }
.modebtn:hover { background: #f6f1e4; }
.modebtn small { color: var(--muted); font-weight: 500; font-size: 0.92rem; line-height: 1.25; }
.modebtn .tag { background: var(--brass); color: #2a1c06; font-family: var(--menu); font-size: 0.8rem; letter-spacing: 0.06em; }
.chip { background: #ffffff; color: var(--text); border: 1px solid var(--line); font-family: var(--menu); font-weight: 600; font-size: 0.98rem; }
.chip:hover { background: #f6f1e4; }
.chip.sel { background: var(--espresso); color: var(--cream); border-color: #1e140d; }

/* ---- the espresso (wide screens: it never sits over the board) ------------------- */
.cup { position: fixed; right: max(26px, calc(50% - 590px)); bottom: 7vh; width: 150px; height: 150px; z-index: 1; pointer-events: none; }
@media (max-width: 1180px), (max-height: 620px) { .cup { display: none; } }
/* the saucer, the cup's rim, and the coffee with its crema */
.cup::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 46% 44%, #6b4326 0 8%, #4a2c17 9% 27%, #2e1a0c 28% 31%, #fbfaf7 32% 37%, #e9e6df 38% 40%, transparent 41%),
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0, 0, 0, 0.05) 63% 66%, transparent 67%),
    radial-gradient(circle at 38% 32%, #ffffff, #f1efe9 55%, #dcd9d1);
  box-shadow: 0 10px 18px rgba(70, 58, 30, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(120, 110, 90, 0.25);
}
/* the handle */
.cup::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 34px; height: 22px; margin-top: -11px; border-radius: 0 12px 12px 0;
  border: 6px solid #f4f2ec; border-left: 0; box-shadow: 2px 3px 4px rgba(70, 58, 30, 0.22);
}
/* steam: two wisps (drifting with Visual FX on) */
.cup i { position: absolute; left: 44%; top: 30%; width: 16px; height: 46px; border-radius: 50%; opacity: 0.5;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); filter: blur(3px); transform: translate(-50%, -60%); }
.cup i + i { left: 52%; top: 26%; height: 38px; opacity: 0.38; }
html.fx-on .cup i { animation: cafe-steam 4.6s ease-in-out infinite; }
html.fx-on .cup i + i { animation-duration: 5.8s; animation-delay: -2s; }
@keyframes cafe-steam {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
  35% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-30%, -150%) scale(1.25); }
}

/* phones: both boards start below the fixed Games / sound / FX buttons */
@media (max-width: 640px) {
  body { padding-top: 3.5rem; }
  h1 { font-size: 1.7rem; margin-top: 0.2rem; }
  #status { font-size: 1.08rem; }
}