/* the green button of the game, which used to be an image drawn by images/button/text/... */
@font-face {
	font-family: 'Delicious';
	src: url('../files/Delicious-Bold.otf');
	font-weight: bold;
}
/* a.greenbutton outranks the link colours of .white_box a and .black_box a */
.greenbutton, a.greenbutton {
	display: inline-block;
	box-sizing: border-box;
	min-width: 106px;
	height: 29px;
	margin: 1px;
	padding: 0 12px;
	border: 1px solid;
	border-color: #84a43b #6b9230 #75992c;
	border-radius: 4px;
	box-shadow: inset 0 -3px 4px -2px rgb(40 70 0 / 25%);
	background:
		linear-gradient(to right, rgb(0 0 0 / 8%), transparent 8%, transparent 92%, rgb(0 0 0 / 8%)),
		radial-gradient(172% 155% at 100% 200%, #85a636, #83a534 99%, transparent 100%),
		linear-gradient(#93b146, #91b146);
	color: #fff;
	font: bold 14.67px/27px 'Delicious', sans-serif;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgb(83 122 21);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
}
.greenbutton:hover, a.greenbutton:hover {
	filter: brightness(1.06);
	text-decoration: none;
}
/*
 * The responsive layout below 960px (docs/css.md): a button in a box is 40px high, easy to tap and as high as
 * the fields next to it; a.btn (a small green link, like Zoeken) is a button of the same look, as is a link with
 * the class btn_narrow (the fixed layout ignores it), as is an <input type="submit">, a <button> or a <span> (with a
 * click handler, items/catalog) with that class, and an action of the casino games (.table_link > a).
 */
@media (max-width: 959px) {
	.responsive :is(.white_box, .black_box) .greenbutton {
		height: 40px;
		line-height: 38px;
	}
	.responsive :is(.white_box, .black_box) :is(a.btn, a.btn_narrow, span.btn_narrow, .btn_narrow:is(input, button), .table_link > a) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 40px;
		padding: 0 14px;
		border: 1px solid;
		border-color: #84a43b #6b9230 #75992c;
		border-radius: 4px;
		box-shadow: inset 0 -3px 4px -2px rgb(40 70 0 / 25%);
		/* (a custom property, so a page whose own stylesheet sets a picture on :hover can set it back: credits/spend, marketplace/ad) */
		--btn-narrow-images:
			linear-gradient(to right, rgb(0 0 0 / 8%), transparent 8%, transparent 92%, rgb(0 0 0 / 8%)),
			radial-gradient(172% 155% at 100% 200%, #85a636, #83a534 99%, transparent 100%),
			linear-gradient(#93b146, #91b146);
		background: var(--btn-narrow-images);
		color: #fff;
		font: bold 14.67px/18px 'Delicious', sans-serif;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 rgb(83 122 21);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		-webkit-tap-highlight-color: transparent;
	}
	.responsive :is(.white_box, .black_box) :is(.greenbutton, a.btn, a.btn_narrow, span.btn_narrow, .btn_narrow:is(input, button), .table_link > a):active {
		filter: brightness(0.94);
	}
	/* the padding of the fixed layout (an inline style: credits/buy) gives way */
	.responsive :is(.white_box, .black_box) .btn_narrow:is(input, button) {
		padding: 0 14px !important;
		cursor: pointer;
	}
	/*
	 * a.btn_narrow.btn_alt_narrow (or a .greenbutton.btn_alt_narrow): the button of a second action next to a green
	 * one, or of one that throws something away or says no (Weigeren, Gooi alle items weg, Reset teller): light stone
	 * with dark text, on a black box too
	 */
	.responsive :is(.white_box, .black_box) :is(a.btn_narrow, span.btn_narrow, .greenbutton).btn_alt_narrow {
		border-color: #bdb7ae var(--color-stone) var(--color-ash);
		box-shadow: inset 0 -3px 4px -2px rgb(0 0 0 / 10%);
		background: linear-gradient(#f4f1ec, #e5e0d8);
		color: var(--color-grey-dark);
		text-shadow: 0 1px 0 rgb(255 255 255 / 60%);
	}
}