body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
}
.aaohow {
	background: radial-gradient(108.37% 50% at 50% 50%, #ec5c15 9%, #c81d20 100%);
}

.aaohox {
	max-width: 350px !important;

	@media (max-width: 767px) {
		margin-top: -25% !important;
		max-width: 290px !important;
	}
}

.aaohoz {
	background: linear-gradient(to right, #29c839, #6cfc69);
}

.aaohoy {
	background: linear-gradient(to right, #f0b900, #fff599);
}
.aaohow {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 999;
	width: 100%;
	padding: 15px;
	display: flex;
	overflow: hidden;
	height: calc(100dvh + 2px);
}

.aaohow.is--loaded {
	display: none;
}

.aaohox {
	margin-bottom: 35px;
	width: 100%;
	max-width: 400px;
}

.aaohoy {
	width: 100%;
	height: 28px;
	max-width: 340px;
	padding: 4px;
	border-radius: 100px;
	position: relative;
}

.aaohoy::before {
	position: absolute;
	content: '';
	left: 4px;
	top: 4px;
	border-radius: 100px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	background-color: #fff;
}

.aaohoz {
	position: relative;
	z-index: 2;
	width: 0;
	height: 100%;
	border-radius: 100px;
	transition: width 0.5s ease;
}

@media (max-width: 767px) {
	.aaohoy {
		max-width: 220px;
	}
}

.social-widgets {
	position: var(--social-widgets-position, fixed);
	z-index: var(--social-widgets-z-index, 100);
	display: flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
	max-width: calc(100% - 32px);
}

.social-widgets--top-left {
	top: 2px;
	left: 2px;
	align-items: flex-start;
}

.social-widgets--top-right {
	top: 2px;
	right: 2px;
	align-items: flex-end;
}

.social-widgets--bottom-left {
	bottom: 2px;
	left: 2px;
	align-items: flex-start;
	flex-direction: column-reverse;
}

.social-widgets--bottom-right {
	bottom: 2px;
	right: 2px;
	align-items: flex-end;
	flex-direction: column-reverse;
}

.social-widgets__inner {
	font-size: 12px;
	opacity: 1;
}

.social-widget {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	border-radius: 6px;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: auto;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: rgba(26, 26, 26, 0.2);
	color: #ffffff;
	font-weight: 600;
	font-family: inherit;
	opacity: 1;
}

[data-js='is--modal-open'] .social-widget,
.is--modal-open .social-widget {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.bottom__section-button-text {
	white-space: nowrap;
}

/* .aaohpv (the text wrapper inside the cash-out button) is a flex item
   with no width of its own, so by default it shrink-wraps to its content
   instead of filling the button. That makes its clientWidth self-
   referential (≈ the text's own natural width) — useless as the "how much
   room is actually available" measurement app.js's calculateFontSize()
   needs. Force it to fill the button so that measurement is meaningful. */
.aaohpv {
	width: 100%;
}

/* Flex items default to min-width:auto, i.e. they refuse to shrink below
   their content's intrinsic width. calculateFontSize() briefly sets
   white-space:nowrap on a button's label while measuring/shrinking it —
   with a long enough translation, that nowrap text's intrinsic width can
   force this whole flex chain (and the row it sits in) wider than the
   viewport before the loop finishes shrinking it down. min-width:0 lets
   these shrink freely instead, so the label is what adapts, not the row. */
.aaohpw,
.aaohpv,
.aaohpu,
.bottom__section-button {
	min-width: 0;
}

/* Same trap one level up, but on the CSS Grid that lays out the control
   panel rows: style.css sets grid-template-columns: 1fr on mobile, and a
   bare `1fr` track has an implicit min size of `auto` (= its widest
   content's max-content size). A long nowrap button label growing that
   one column drags every row sharing it (MIN/MAX, bet chips, difficulty
   tabs...) wider than the viewport, even though only the button needed
   the room. minmax(0, 1fr) removes that implicit auto-minimum. */
@media (max-width: 768px) {
	.aaohpg {
		grid-template-columns: minmax(0, 1fr);
	}
}
.aaohph {
	min-width: 0;
}

/* style.css hardcodes .modal__content to a fixed height (55em), sized for
   short "you win!" copy. Dynamic content (modalText from content.json) can
   run much longer, so let the box grow to fit its text instead of clipping
   or overflowing its border, and allow the modal itself to scroll as a
   fallback if content is still taller than the viewport. */
.modal {
	overflow-y: auto;
}
.modal__content {
	height: auto;
	min-height: 55em;
	padding-top: 2em;
	padding-bottom: 2em;
}