/*
 * Base styles for the Control tree in kit.js. Every node is an absolutely
 * positioned box placed by the ported scripts' own layout numbers; this file only
 * supplies what Godot's default theme did implicitly (text flow, clipping, the
 * button label, hidden scrollbars). Colours, fonts and corner radii come from
 * the scripts through StyleBoxFlat and inline styles, never from here.
 * Linked by web/index.html and web/crazygames.html.
 */

#game {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#game * {
	-webkit-tap-highlight-color: transparent;
}

.gd {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Label: Label._apply_align() drives justify-content (vertical) and
   align-items (horizontal) on this column. The line height lives here, not on
   the text span, so the `line_spacing` override (set inline) reaches it. */
.gd-label {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	white-space: pre;
}

.gd-text {
	display: block;
	max-width: 100%;
	line-height: inherit;
	white-space: pre;
}

/* AUTOWRAP_WORD_SMART: wrap at word boundaries and keep explicit newlines. */
.gd-wrap,
.gd-wrap .gd-text {
	white-space: pre-wrap;
	overflow-wrap: normal;
	word-break: normal;
}

.gd-button {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	outline: none;
}

.gd-button-text {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: pre;
	line-height: 1.15;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.gd-disabled {
	cursor: default;
}

/* Keyboard focus only; a tap or click never draws a ring. */
.gd-button:focus-visible,
.gd-lineedit:focus-visible {
	outline: 2px solid #277d80;
	outline-offset: 2px;
}

.gd-scroll {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gd-scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.gd-progress {
	overflow: hidden;
}

.gd-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
}

.gd-texture {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* LineEdit: the only text the player types (the leaderboard handle). */
.gd-lineedit {
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid #d5decc;
	border-radius: 10px;
	background: #fffaf0;
	color: #254653;
	padding: 0 12px;
	font-family: 'HustleBody', 'Segoe UI', sans-serif;
	font-size: 18px;
	user-select: text;
	-webkit-user-select: text;
	touch-action: manipulation;
}

.gd-lineedit::placeholder {
	color: #70878a;
}

/* frame_art(): the frame's ring painted over the art it clips. */
.gd-ring::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--gd-ring, none);
	pointer-events: none;
}