/* OXchalk home page: the game's colors and fonts, nothing else. */

:root {
    --board: #000000;       /* background, as on the field */
    --rule: #262a28;        /* hairlines */
    --chalk: #f1f0ea;       /* primary text */
    --dust: #8e9590;        /* secondary and inactive text */
    --marker: #e9d46a;      /* yellow accent */
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --data: "IBM Plex Mono", ui-monospace, monospace;
    color-scheme: dark;
}

html, body { height: 100%; }
body { margin: 0; background: var(--board); color: var(--chalk); font-family: var(--display); }

/* Title and buttons, centered both ways. */
main {
    min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; padding: 16px; box-sizing: border-box;
}

h1 { margin: 0; font: 700 40pt/1 var(--display); letter-spacing: 0.02em; }
h1 span { color: var(--marker); }

nav { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 220px; }

.nav {
    display: block; padding: 8px 18px; text-align: center; text-decoration: none;
    font: 600 20px/1.2 var(--display); color: var(--chalk);
    border: 1px solid var(--rule); border-radius: 4px;
}
.nav:hover, .nav:focus-visible { border-color: var(--marker); color: var(--marker); outline: none; }
.nav[aria-disabled="true"] { color: var(--dust); opacity: 0.5; pointer-events: none; }

.version { position: fixed; right: 12px; bottom: 8px; margin: 0; font: 11px var(--data); color: var(--dust); }


/* hidden must always win; display rules like .nav's would otherwise override it */
[hidden] { display: none !important; }

/* Disabled anywhere (nav items, Forgot my login): dim gray, not clickable */
[aria-disabled="true"] { color: var(--dust); opacity: 0.4; pointer-events: none; }

/* Account dialog */
dialog {
    background: var(--board); color: var(--chalk);
    border: 1px solid var(--rule); border-radius: 6px;
	padding: 20px 24px 14px; min-width: 240px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }

dialog form { display: flex; flex-direction: column; gap: 10px; }
dialog h2 { margin: 0; text-align: center; font: 700 26px/1 var(--display); }
dialog label { display: flex; flex-direction: column; gap: 4px; font: 600 16px var(--display); }
dialog input {
    font: 15px var(--data); color: var(--chalk); background: transparent;
    padding: 7px 9px; border: 1px solid var(--rule); border-radius: 4px;
}
dialog input:focus { border-color: var(--marker); outline: none; }
dialog .nav { align-self: center; min-width: 90px; padding: 5px 14px; font-size: 16px; }


.error { margin: 0; min-height: 1.2em; text-align: center; color: var(--marker); font: 14px var(--data); }
.links { margin: 0; display: flex; justify-content: center; gap: 18px; font-size: 16px; }
.links a { color: var(--chalk); }

.close {
    position: absolute; top: 6px; right: 10px;
    background: none; border: none; color: var(--dust); font-size: 24px; cursor: pointer;
}
.close:hover { color: var(--marker); }