/* Dice roll statistics: page styles. */
body {

	font-family: Courier;
	padding: 50px;
}

h1 {
	font-size: 1.5rem;
}
.hidden {
	display: none;
}

.visible {
	display: inline;
}

.radio-button {

}


/* ---- Die picker: radio buttons shown as die images ---- */
:root {
	--teal-mid: #1C8073;    /* hover, and the GO button */
	--teal-dark: #0E4A44;   /* selected / pressed */
}
.die-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 18px;
}
/* the real radios stay in the page for keyboard and screen readers, just not visible */
.die-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.die-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.die {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: contain;
	padding: 4px;
	border-radius: 12px;
	box-shadow: 0 0 0 3px transparent;
	transition: box-shadow 0.15s ease;
}
.die-label { font-size: 0.8rem; color: #555; }

/* hover: mid teal outline; pressed or selected: darker teal outline */
.die-option:hover .die { box-shadow: 0 0 0 3px var(--teal-mid); }
.die-option:active .die,
.die-input:checked + .die-option .die,
.die-input:checked + .die-option:hover .die { box-shadow: 0 0 0 3px var(--teal-dark); }
.die-input:checked + .die-option .die-label { color: #0F2430; font-weight: bold; }

.die-input:focus-visible + .die-option .die {
	outline: 2px dashed var(--teal-dark);
	outline-offset: 5px;
}

/* ---- Roll count field, note and GO button ---- */
.textbox {
	width: 5.5ch;
	font-family: inherit;
	font-size: 1rem;
	padding: 4px 6px;
	border: 1px solid #b9c4c2;
	border-radius: 4px;
	text-align: right;
}
.textbox:focus {
	outline: 2px solid var(--teal-mid);
	outline-offset: 1px;
	border-color: var(--teal-mid);
}
.field-note { display: block; margin: 5px 0 0; font-size: 0.78rem; color: #666; }
.field-error { display: block; min-height: 1.2em; margin: 2px 0 8px; font-size: 0.82rem; color: #b3261e; }

.go-button {
	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--teal-mid);
	border: 2px solid var(--teal-mid);
	border-radius: 6px;
	padding: 6px 22px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.go-button:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.go-button:active { background: #082F2B; border-color: #082F2B; }
.go-button:focus-visible { outline: 2px dashed var(--teal-dark); outline-offset: 3px; }