:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
body { margin: 0; background: #1d1b19; color: #f1ece4; }
main { max-width: 520px; margin: 0 auto; padding: 16px; }
h1 { margin: 0; font-size: 1.6rem; }
.tag { margin: 4px 0 16px; opacity: .7; font-size: .9rem; }
.controls, .actions, #share-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
#share-box input { flex: 1; min-width: 0; }
form { display: flex; gap: 8px; }
input { padding: 8px; font: inherit; border-radius: 6px; border: 1px solid #6b5f52; background: #2a2622; color: inherit; }
button { padding: 8px 14px; font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid #6b5f52; background: #3a342e; color: inherit; }
button:disabled { opacity: .5; cursor: default; }
#status { min-height: 1.5em; margin: 8px 0; }
/* Equal row tracks: without them, empty rows collapse to their content and the board distorts. */
#board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1; border: 6px solid #6b4423; box-sizing: border-box; user-select: none; touch-action: none; border-radius: 4px; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.light { background: #eed8ad; }
.dark { background: #a7714a; }
.sq.last { background-image: linear-gradient(rgba(255, 225, 90, .5), rgba(255, 225, 90, .5)); }
.coord { position: absolute; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; }
.coord.rank { top: 4px; left: 5px; }
.coord.file { bottom: 4px; right: 5px; }
.light .coord { color: #a7714a; }
.dark .coord { color: #eed8ad; }
.sq.sel { box-shadow: inset 0 0 0 4px #3f8fd2; }
.sq.check { box-shadow: inset 0 0 0 4px #e0463c; }
.sq.target::after { content: ''; width: 28%; aspect-ratio: 1; border-radius: 50%; background: rgba(40, 40, 40, .35); }
.sq.capture::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 5px solid rgba(40, 40, 40, .35); box-sizing: border-box; }
.piece { font-size: min(10vw, 52px); line-height: 1; cursor: grab; position: relative; }
.piece.white { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.piece.black { color: #111; text-shadow: 0 0 1px #fff; }
.piece.lifted { opacity: 0; }
.piece.ghost { position: fixed; pointer-events: none; transform: translate(-50%, -50%); font-size: 56px; z-index: 10; cursor: grabbing; }
#promo { background: #2a2622; color: inherit; border: 1px solid #6b5f52; border-radius: 8px; }
#promo-choices { display: flex; gap: 8px; }
.promo-choice { font-size: 40px; line-height: 1; }
#toast { color: #ffb4a8; }
.handle { margin: -8px 0 16px; opacity: .85; font-size: .9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.handle button { padding: 4px 10px; font-size: .85rem; }
.tables { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tables th, .tables td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #3a342e; font-size: .95rem; }
.tables th { opacity: .7; font-weight: 600; }
.tables td:last-child { text-align: right; }
.empty { opacity: .7; margin: 16px 0; }
#players { margin: 4px 0; opacity: .85; font-size: .9rem; }

/* Persistent navigation, outside lobby and game controls. */
.hub-navigation{box-sizing:border-box;display:block;position:static;margin:12px auto 0;text-align:left}
.hub-navigation .hub-return{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:8px 14px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:600 12px/1.4 system-ui,sans-serif;letter-spacing:normal;text-decoration:none;white-space:nowrap}
.hub-navigation .hub-return:hover{background:rgba(128,128,128,.15)}
.hub-navigation .hub-return:focus-visible{outline:3px solid #d4ae5b;outline-offset:3px}
.hub-navigation{max-width:552px;padding:0 16px}