/* the green button of the game, which used to be an image drawn by images/button/text/... */
/* its own tokens, as outgame.tpl loads this file without ingame_base.css */
:root {
	/* white text on a green button (as --color-white of ingame_base.css) */
	--color-white: #fff;
	/* the corners of a green button (as --radius-control of ingame_base.css) */
	--radius-control: 4px;
	/* the shadow of white text on a green button */
	--color-green-shadow: rgb(83 122 21);
	/* the border of a green button: the top, the sides, the bottom */
	--greenbutton-border: #84a43b #6b9230 #75992c;
	/* the darker bottom of a green button */
	--greenbutton-shadow: inset 0 -3px 4px -2px rgb(40 70 0 / 25%);
	/* the shine of a green button: darker at the left and right, lighter at the top left */
	--background-greenbutton:
		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);
}
@font-face {
	font-family: 'Delicious';
	src: url('../files/Delicious-Bold.otf');
	font-weight: bold;
}
/*
 * the same font without its figures, which are old-style (75 sits below the line): the responsive layout below 960px
 * takes the figures of a narrow sans-serif, which stand on the baseline (Direct aanpassen (75 credits), casino/tableadmin)
 */
@font-face {
	font-family: 'Delicious Lining';
	src: url('../files/Delicious-Bold.otf');
	font-weight: bold;
	unicode-range: U+0000-002F, U+003A-10FFFF;
}
/* 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: var(--greenbutton-border);
	border-radius: var(--radius-control);
	box-shadow: var(--greenbutton-shadow);
	background: var(--background-greenbutton);
	color: var(--color-white);
	font: bold 14.67px/27px 'Delicious', sans-serif;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 var(--color-green-shadow);
	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). (A message on a
 * page of its own, div.message_page of messages/read, is drawn as a white box.) Figures in a button stand on the
 * baseline ('Delicious Lining', above).
 */
@media (max-width: 959px) {
	.responsive :is(.white_box, .black_box, .message_page) .greenbutton {
		height: 40px;
		line-height: 38px;
		font-family: 'Delicious Lining', 'Arial Narrow', sans-serif-condensed, sans-serif;
	}
	.responsive :is(.white_box, .black_box, .message_page) :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: var(--greenbutton-border);
		border-radius: var(--radius-control);
		box-shadow: var(--greenbutton-shadow);
		/* (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: var(--background-greenbutton);
		background: var(--btn-narrow-images);
		color: var(--color-white);
		font: bold 14.67px/18px 'Delicious Lining', 'Arial Narrow', sans-serif-condensed, sans-serif;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 var(--color-green-shadow);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		-webkit-tap-highlight-color: transparent;
	}
	.responsive :is(.white_box, .black_box, .message_page) :is(.greenbutton, a.btn, a.btn_narrow, span.btn_narrow, .btn_narrow:is(input, button), .table_link > a):active {
		filter: brightness(0.94);
	}
	/*
	 * the text of a button in a span (a short label for a phone in a span.show_phone, crew/index) in the font and colour of
	 * the button, not the 11pt of every span or the text colour of the box
	 */
	.responsive :is(.white_box, .black_box, .message_page) :is(.greenbutton, a.btn, a.btn_narrow, span.btn_narrow, .btn_narrow:is(input, button)) span {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
	}
	/* the padding of the fixed layout (an inline style: credits/buy) gives way */
	.responsive :is(.white_box, .black_box, .message_page) .btn_narrow:is(input, button) {
		padding: 0 14px !important;
		cursor: pointer;
	}
	/*
	 * a.btn_narrow.btn_alt_narrow (or a .greenbutton or an a.btn with 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): sand
	 * (the sand of the boxes) with dark text, on a black box too
	 */
	.responsive :is(.white_box, .black_box, .message_page) :is(a.btn, a.btn_narrow, span.btn_narrow, .greenbutton).btn_alt_narrow {
		border-color: var(--color-taupe) var(--color-stone) var(--color-stone);
		box-shadow: inset 0 -3px 4px -2px rgb(0 0 0 / 10%);
		background: linear-gradient(var(--color-sand-light), var(--color-sand));
		color: var(--color-grey-dark);
		text-shadow: 0 1px 0 rgb(255 255 255 / 60%);
	}
}