/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.app {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #000;
}


/* =========================================================
   MAIN CONTAINER AND BACKGROUND
   ========================================================= */

.game-container {
	position: relative;
	width: 100%;
	max-width: 820px;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding:
		env(safe-area-inset-top)
		5px
		env(safe-area-inset-bottom)
		5px;
	overflow: hidden;
}

.game-board {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("/images/game-background.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 9%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   GAME BOARD — MAIN GRID
   ========================================================= */

.game-layout {
	width: 100%;
	height: 98%;
	display: grid;
	grid-template-columns: 23fr 54fr 23fr;
	grid-template-rows: 3fr 3fr 1fr 2fr 2fr;
	gap: 6px;
	padding: 3px;
	align-content: stretch;
}

.userbalance {
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
}

.userbalance .w3-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.reel-panel {
	grid-column: 2;
	grid-row: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.howtoplay {
	grid-column: 3;
	grid-row: 1 / 2;
}

.button-area {
	grid-column: 1;
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
}

.betting-board {
	grid-column: 2;
	grid-row: 2 / 5;
}

.chipvalue {
	grid-column: 3;
	grid-row: 2 / 5;
	display: flex;
	flex-direction: column;
}


/* =========================================================
   ACCOUNT LINKS
   ========================================================= */

.account-links {
	width: 100%;
	margin-top: auto;
	padding: 0 8px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.account-link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 2px;
	border-top: 1px solid rgba(255, 215, 0, 0.35);
	color: #fff8d6;
	font-family: Impact, sans-serif;
	font-size: clamp(9px, 2.2vw, 13px);
	letter-spacing: 0.5px;
	text-decoration: none;
}

.account-icon {
	color: #ffd700;
	font-size: clamp(14px, 3vw, 18px);
}


/* =========================================================
   STANDARD PANELS
   ========================================================= */

.panel {
	position: relative;
	height: 100%;
	border-radius: 12px;
	background: #000;
	overflow: hidden;
}

.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: 12px;
	background: linear-gradient(
		180deg,
		#fff8d6 0%,
		#ffd700 20%,
		#d4a017 40%,
		#fff0a0 50%,
		#d4a017 60%,
		#ffd700 80%,
		#fff8d6 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.gold-frame {
	position: relative;
	border-radius: 12px;
	background: #000;
	overflow: hidden;
}

.gold-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 50;
	padding: 4px;
	border-radius: 12px;
	background: linear-gradient(
		180deg,
		#fff8d6 0%,
		#ffd700 20%,
		#d4a017 40%,
		#fff0a0 50%,
		#d4a017 60%,
		#ffd700 80%,
		#fff8d6 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}


/* =========================================================
   PANEL HEADINGS AND NUMBERS
   ========================================================= */

.heading2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	color: gold;
	font-weight: bold;
	text-align: center;
}

p.heading2 {
	padding: 5px;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}

.numbers {
	margin-top: 4px;
	color: #fff5bf;
	font-family: Impact, sans-serif;
	font-size: 1.4rem;
	font-weight: normal;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
	text-shadow:
		1px 1px 0 #765100,
		2px 2px 0 #000,
		0 0 10px rgba(255, 215, 0, 0.45);
	transition:
		transform 0.15s ease,
		filter 0.15s ease;
}

.numbers.rolling {
	transform: scale(1.4);
	filter: brightness(1.25);
}

.star-divider {
	width: 60%;
	text-align: center;
}

.star-divider img {
	display: inline-block;
	width: auto;
	height: 10px;
}


/* =========================================================
   GAME BUTTON
   ========================================================= */

#game-button {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

#game-button img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: contain;
}


/* =========================================================
   REELS
   ========================================================= */

:root {
	--ball-size: clamp(90px, 11vw, 110px);
}

.reel-window {
	width: 94%;
	height: calc(var(--ball-size) * 1.5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	overflow: hidden;
}

.reel {
	position: relative;
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	background: #c8b07a;
	overflow: hidden;
}

.reel-divider {
	width: 8px;
	flex-shrink: 0;
	background: #000;
}

.wheel-strip-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY(0);
}

.wheel-strip {
	display: block;
	width: var(--ball-size);
	height: auto;
}


/* =========================================================
   BETTING BOARD
   ========================================================= */

.betting-board {
	position: relative;
	width: 100%;
	min-height: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, 1fr);
	padding: 4px;
	background: #202020;
	overflow: hidden;
}

.bet-box {
	position: relative;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	overflow: visible;
	user-select: none;
}

.bet-label {
	display: block;
	width: 82%;
	max-width: 82%;
	height: auto;
	max-height: 70%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.bet-box:nth-child(odd)::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(
		180deg,
		#fff8d6,
		#ffd700,
		#d4a017,
		#fff0a0,
		#ffd700
	);
	box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.bet-box:nth-child(-n+8)::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		#fff8d6,
		#ffd700,
		#d4a017,
		#fff0a0,
		#ffd700
	);
	box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.bet-box:nth-child(9)::before,
.bet-box:nth-child(10)::before {
	display: none;
}


/* =========================================================
   CHIPS
   ========================================================= */

.chip-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.chip {
	width: 48px;
	height: 48px;
	object-fit: contain;
	cursor: grab;
	touch-action: none;
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.drag-chip {
	position: fixed;
	z-index: 99999;
	width: 48px;
	height: 48px;
	object-fit: contain;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	touch-action: none;
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.placed-chip {
	position: absolute;
	z-index: 20;
	width: 42px;
	height: 42px;
	object-fit: contain;
	transform: translate(-50%, -50%);
	cursor: grab;
	touch-action: none;
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}


/* =========================================================
   SIGN-IN PAGE
   ========================================================= */

.signin-screen {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.signin-panel {
	width: 90%;
	max-width: 420px;
	padding: 22px 24px;
	border: 6px solid transparent;
	border-image: linear-gradient(
		90deg,
		#fff8d6 0%,
		#ffd700 20%,
		#d4a017 40%,
		#fff0a0 50%,
		#d4a017 60%,
		#ffd700 80%,
		#fff8d6 100%
	) 1;
	background: rgba(0, 0, 0, 0.78);
	color: #fff8d6;
	text-align: center;
	transform: translateY(-6vh);
}

.signin-logo {
	width: 100%;
	max-width: 320px;
	margin-bottom: 15px;
}

.signin-panel h1 {
	margin: 0 0 18px;
	color: #ffd700;
	font-family: Impact, sans-serif;
	letter-spacing: 2px;
}

.signin-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.signin-form label {
	color: #fff8d6;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-align: left;
}

.signin-form input {
	height: 42px;
	padding: 8px;
	border: 2px solid #d4a017;
	background: #111;
	color: #fff;
	font-size: 18px;
	outline: none;
}

.signin-button {
	height: 52px;
	margin-top: 12px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(#3cff6b, #088824);
	color: #fff;
	font-family: Impact, sans-serif;
	font-size: 24px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 2px #000;
}

.signin-error {
	margin-bottom: 15px;
	padding: 10px;
	background: #8b0000;
	color: #fff;
	font-weight: bold;
}

.logout-link {
	display: inline-block;
	margin-top: 8px;
	color: #ffd700;
	font-family: Impact, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: none;
}

.signin-register {
	margin-top: 18px;
	color: #fff;
	font-size: 15px;
	text-align: center;
}

.signin-register span {
	display: block;
	margin-bottom: 6px;
}

.signin-register a {
	color: #ffd700;
	font-weight: bold;
	text-decoration: none;
	transition: color 0.2s ease;
}

.signin-register a:hover {
	color: #fff4b0;
	text-decoration: underline;
}


/* =========================================================
   REGISTER PAGE — OUTER LAYOUT
   ========================================================= */

.register-screen {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 91%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.register-panel {
	--panel-shift-y: 0px;

	width: 88%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	padding: 18px 18px 24px;
	border: 4px solid transparent;
	border-image: linear-gradient(
		90deg,
		#fff8d6 0%,
		#ffd700 20%,
		#d4a017 40%,
		#fff0a0 50%,
		#d4a017 60%,
		#ffd700 80%,
		#fff8d6 100%
	) 1;
	background: rgba(0, 0, 0, 0.82);
	color: #fff8d6;
	text-align: center;
	overflow: hidden;
	transform: translateY(var(--panel-shift-y));
	transition:
		height 0.35s ease,
		transform 0.35s ease;
}

.register-panel h1 {
	margin: 0 0 18px;
	color: #ffd700;
	font-family: Impact, sans-serif;
	font-size: 34px;
	font-weight: normal;
	letter-spacing: 2px;
}


/* =========================================================
   REGISTER PAGE — SLIDING STEPS
   ========================================================= */

.register-form {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.register-slider {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	transition: height 0.35s ease;
}

.register-step {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 6px;

	display: flex;
	flex-direction: column;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transform: translateX(100%);

	transition:
		transform 0.42s ease,
		opacity 0.25s ease,
		visibility 0s linear 0.42s;
}

/* Currently visible step */
.register-step.active {
	position: relative;

	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transform: translateX(0);

	transition:
		transform 0.42s ease,
		opacity 0.25s ease;
}

/* Previous step leaves to the left */
.register-step.slide-out-left {
	position: absolute;

	visibility: visible;
	opacity: 0;
	pointer-events: none;

	transform: translateX(-100%);

	transition:
		transform 0.42s ease,
		opacity 0.25s ease;
}

/* Going backwards: incoming step starts on the left */
.register-step.enter-from-left {
	position: absolute;

	visibility: visible;
	opacity: 0;
	pointer-events: none;

	transform: translateX(-100%);
}

/* Going backwards: current step leaves to the right */
.register-step.slide-out-right {
	position: absolute;

	visibility: visible;
	opacity: 0;
	pointer-events: none;

	transform: translateX(100%);

	transition:
		transform 0.42s ease,
		opacity 0.25s ease;
}

@media (max-width: 600px) {
	.register-step {
		padding: 0 4px;
	}
}

/* =========================================================
   REGISTER PAGE — LABELS, INPUTS AND SELECTS
   ========================================================= */

.register-step label {
	display: block;
	margin-bottom: 8px;
	color: #fff8d6;
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
}

.register-step input,
.register-step select {
	width: 100%;
	height: 44px;
	margin: 0 0 18px;
	padding: 8px 10px;
	border: 2px solid #d4a017;
	border-radius: 0;
	background: #111;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 17px;
	outline: none;
}

.register-step input:focus,
.register-step select:focus {
	border-color: #ffd700;
	box-shadow: 0 0 8px rgba(255, 215, 0, 0.75);
}

.register-step input:disabled,
.register-step select:disabled {
	opacity: 0.6;
}

.register-step select {
	appearance: auto;
	color-scheme: dark;
}


/* =========================================================
   REGISTER PAGE — DATE OF BIRTH
   ========================================================= */

.dob-label {
	width: 100%;
	text-align: left !important;
}

.dob-row {
	width: 100%;
	display: grid;
	grid-template-columns: 0.8fr 1.15fr 1fr;
	gap: 8px;
	margin-bottom: 18px;
}

.dob-row select {
	width: 100%;
	min-width: 0;
	margin-bottom: 0;
	padding-right: 4px;
	padding-left: 6px;
	font-size: 15px;
}


/* =========================================================
   REGISTER PAGE — CHECKBOXES
   ========================================================= */

.checkbox-label {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	line-height: 1.35;
	cursor: pointer;
}

.checkbox-label input {
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 0;
	padding: 0;
	accent-color: #ffd700;
}

.checkbox-label span {
	flex: 1;
	padding-top: 1px;
	color: #fff;
	text-align: left;
}


/* =========================================================
   REGISTER PAGE — NAVIGATION BUTTONS
   ========================================================= */

.register-navigation {
	width: 100%;
	display: grid;
	grid-template-columns: 0.75fr 1.25fr;
	gap: 10px;
	margin-top: 6px;
	margin-bottom: 10px;
}

.register-button,
.register-back-button {
	width: 100%;
	height: 46px;
	border: none;
	border-radius: 10px;
	font-family: Impact, sans-serif;
	font-size: 19px;
	font-weight: normal;
	letter-spacing: 1.1px;
	text-shadow: 2px 2px 2px #000;
	cursor: pointer;
	touch-action: manipulation;
}

.register-step > .register-button {
	margin-top: 6px;
	margin-bottom: 10px;
}

.register-button {
	background: linear-gradient(#3cff6b, #088824);
	color: #fff;
}

.register-back-button {
	border: 1px solid #d4a017;
	background: linear-gradient(#555, #222);
	color: #fff8d6;
}

.register-button:active,
.register-back-button:active {
	transform: scale(0.98);
}

.register-button:disabled,
.register-back-button:disabled {
	opacity: 0.55;
	cursor: default;
}


/* =========================================================
   REGISTER PAGE — INSTRUCTIONS AND MESSAGES
   ========================================================= */

.register-instruction {
	margin: 0 0 18px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}

.register-small-print,
.password-guidance {
	margin: -4px 0 18px;
	color: #ddd;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	text-align: left;
}

.resend-code-button {
	align-self: center;
	margin: -4px 0 16px;
	padding: 5px;
	border: none;
	background: transparent;
	color: #ffd700;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

.resend-code-button:disabled {
	opacity: 0.55;
	cursor: default;
}

.register-message {
	display: none;
	width: 100%;
	margin-top: 14px;
	padding: 9px 10px;
	border: 1px solid #d4a017;
	background: rgba(90, 0, 0, 0.85);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.35;
	text-align: center;
}

.register-message.show {
	display: block;
}

.register-message.success {
	border-color: #3cff6b;
	background: rgba(0, 90, 25, 0.85);
}

.email-match-message {
	margin: -4px 0 11px;
	padding: 0 1px;
	visibility: hidden;
}

.email-match-message.show {
	visibility: visible;
}


/* =========================================================
   REGISTER PAGE — PASSWORD REQUIREMENTS
   ========================================================= */

.password-requirements {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: -4px 0 11px;
	padding: 0 1px;
}

.password-requirement {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.password-requirement-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 8px;
	font-weight: bold;
	line-height: 1;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.password-requirement.invalid {
	color: #ff5252;
}

.password-requirement.invalid .password-requirement-icon {
	background: #a91515;
	color: #fff;
}

.password-requirement.valid {
	color: #48ef6c;
}

.password-requirement.valid .password-requirement-icon {
	background: #087b25;
	color: #fff;
}

.password-match-message {
	margin: -4px 0 11px;
	padding: 0 1px;
	visibility: hidden;
}

.password-match-message.show {
	visibility: visible;
}


/* =========================================================
   SPLASH SCREEN
   ========================================================= */

.splash-screen {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background-image: url("/images/portrait-logo2.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: brightness(1.15) saturate(1.2);
}

.play-btn {
	position: absolute !important;
	left: 50% !important;
	bottom: 15% !important;
	z-index: 20;
	width: 270px;
	height: 76px;
	line-height: 56px;
	transform: translateX(-50%) !important;
	border: 3px solid #ffd76a !important;
	border-radius: 18px !important;
	background: linear-gradient(
		180deg,
		#101820 0%,
		#020304 45%,
		#000 100%
	) !important;
	box-shadow:
		0 0 0 2px #6f3f00,
		0 0 18px rgba(255, 190, 40, 0.95),
		inset 0 2px 8px rgba(255, 255, 255, 0.25),
		inset 0 -6px 12px rgba(0, 0, 0, 0.9);
	color: #ffe88a !important;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
}


/* =========================================================
   WINNING AND RAKE ANIMATIONS
   ========================================================= */

.casino-rake {
	position: fixed;
	top: 100vh;
	left: var(--rake-left);
	z-index: 80;
	width: var(--rake-width);
	height: auto;
	pointer-events: none;
	transition: top 2s ease-in-out;
}

.casino-rake.rake-up {
	top: var(--rake-top);
}

.casino-rake.rake-down {
	top: 100vh;
	transition: top 2s linear;
}

.chip-raked {
	opacity: 0;
	transform: translate(-50%, calc(-50% + 18px)) scale(0.9);
	transition:
		transform 180ms linear,
		opacity 180ms linear;
}

.flying-chip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 48px;
	height: 48px;
	object-fit: contain;
	opacity: 1;
	transform: translate(0, 0) scale(1.15);
	pointer-events: none;
	transition:
		transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 650ms ease;
}


/* =========================================================
   PORTRAIT AND LANDSCAPE HANDLING
   ========================================================= */

@media (orientation: portrait) {
	.rotate-device {
		display: none;
	}

	.app {
		display: block;
	}
}

@media (orientation: landscape) {
	.app {
		display: none;
	}

	.rotate-device {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000;
		color: #fff;
		font-size: 24px;
		text-align: center;
	}
}


/* =========================================================
   REGISTER PAGE — MOBILE PHONES
   ========================================================= */

@media (max-width: 600px) {
	.register-screen {
		height: 91%;
		align-items: center;
		justify-content: center;
		padding:
			8px
			10px
			calc(env(safe-area-inset-bottom) + 8px);
	}

	.register-panel {
		width: 92%;
		max-width: 390px;
		padding: 12px 12px 18px;
		border-width: 3px;
	}

	.register-panel h1 {
		margin-bottom: 12px;
		font-size: 26px;
		letter-spacing: 1.25px;
	}

	.register-step {
		padding: 0 4px;
	}

	.register-step label {
		margin-bottom: 4px;
		font-size: 12px;
	}

	.register-step input,
	.register-step select {
		height: 35px;
		margin-bottom: 9px;
		padding: 4px 7px;
		font-size: 14px;
	}

	.dob-row {
		grid-template-columns: 0.75fr 1.05fr 1fr;
		gap: 5px;
		margin-bottom: 9px;
	}

	.dob-row select {
		height: 35px;
		padding: 3px;
		font-size: 12px;
	}

	.checkbox-label {
		gap: 6px;
		margin-bottom: 9px;
		font-size: 11px;
		line-height: 1.25;
	}

	.checkbox-label input {
		width: 17px;
		height: 17px;
		min-width: 17px;
	}

	.register-navigation {
		gap: 7px;
		margin-top: 4px;
		margin-bottom: 8px;
	}

	.register-button,
	.register-back-button {
		height: 38px;
		border-radius: 8px;
		font-size: 16px;
		letter-spacing: 0.75px;
	}

	.register-step > .register-button {
		margin-top: 4px;
		margin-bottom: 8px;
	}

	.register-instruction {
		margin-bottom: 9px;
		font-size: 12px;
		line-height: 1.25;
	}

	.register-small-print,
	.password-guidance {
		margin-bottom: 9px;
		font-size: 10px;
		line-height: 1.25;
	}

	.resend-code-button {
		margin-bottom: 8px;
		font-size: 11px;
	}

	.password-requirements {
		gap: 3px;
		margin: -2px 0 9px;
	}

	.password-requirement {
		gap: 5px;
		font-size: 10px;
		line-height: 1.2;
	}

	.password-requirement-icon {
		width: 14px;
		height: 14px;
		flex-basis: 14px;
		font-size: 8px;
	}

	.register-message {
		margin-top: 7px;
		padding: 5px 7px;
		font-size: 11px;
	}
}


/* =========================================================
   REGISTER PAGE — SHORT MOBILE SCREENS
   ========================================================= */

@media (max-width: 600px) and (max-height: 750px) {
	.register-panel {
		width: 94%;
		padding: 10px 10px 14px;
	}

	.register-panel h1 {
		margin-bottom: 8px;
		font-size: 23px;
	}

	.register-step label {
		margin-bottom: 3px;
		font-size: 11px;
	}

	.register-step input,
	.register-step select {
		height: 32px;
		margin-bottom: 7px;
		padding: 3px 6px;
		font-size: 13px;
	}

	.dob-row {
		margin-bottom: 7px;
	}

	.dob-row select {
		height: 32px;
		font-size: 11px;
	}

	.checkbox-label {
		margin-bottom: 7px;
		font-size: 10px;
	}

	.checkbox-label input {
		width: 16px;
		height: 16px;
		min-width: 16px;
	}

	.register-navigation {
		margin-top: 3px;
		margin-bottom: 6px;
	}

	.register-button,
	.register-back-button {
		height: 35px;
		font-size: 15px;
	}

	.password-requirements {
		gap: 2px;
		margin-bottom: 7px;
	}

	.password-requirement {
		font-size: 9px;
	}

	.password-requirement-icon {
		width: 13px;
		height: 13px;
		flex-basis: 13px;
		font-size: 7px;
	}
}

/* =========================================================
   ADD FUNDS PAGE
   ========================================================= */

.add-funds-page {
	position: fixed;
	top: 9%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}

.add-funds-panel {
	width: 100%;
	max-width: 460px;
	padding: 28px;
	border: 2px solid #d4a017;
	border-radius: 12px;
	background: #111;
	box-sizing: border-box;
}

.add-funds-title {
	margin: 0 0 24px;
	color: #ffd700;
	font-family: Arial, sans-serif;
	font-size: 30px;
	text-align: center;
}

.add-funds-welcome {
	margin: 0 0 18px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	text-align: center;
}

.add-funds-balance {
	margin-bottom: 22px;
	padding: 16px;
	border: 1px solid #d4a017;
	border-radius: 8px;
	background: #1b1b1b;
	text-align: center;
}

.add-funds-balance span {
	display: block;
	color: #cccccc;
	font-size: 14px;
	font-family: Arial, sans-serif;
}

.add-funds-balance strong {
	display: block;
	margin-top: 8px;
	color: #ffd700;
	font-size: 32px;
	font-family: Arial, sans-serif;
}

.add-funds-limits {
	margin-bottom: 24px;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.add-funds-form label {
	display: block;
	margin-bottom: 8px;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 15px;
}

.amount-input-row {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	border: 1px solid #666;
	border-radius: 6px;
	background: #222;
}

.currency-symbol {
	padding: 0 14px;
	color: #ffd700;
	font-size: 22px;
	font-weight: bold;
	font-family: Arial, sans-serif;
}

.amount-input-row input {
	flex: 1;
	padding: 12px;
	border: none;
	background: transparent;
	color: #ffffff;
	font-size: 20px;
	outline: none;
}

.add-funds-guidance {
	margin: 0 0 20px;
	color: #bbbbbb;
	font-size: 13px;
	font-family: Arial, sans-serif;
}

.add-funds-submit {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 8px;
	background: #d4a017;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
}

.add-funds-submit:hover {
	background: #ffd700;
}

.add-funds-message {
	display: none;
	margin-top: 20px;
	padding: 12px;
	border-radius: 6px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	text-align: center;
}

.add-funds-message.success {
	display: block;
	background: #154d15;
	color: #ffffff;
}

.add-funds-message.error {
	display: block;
	background: #661111;
	color: #ffffff;
}

.add-funds-back {
	display: block;
	margin-top: 24px;
	color: #ffd700;
	font-family: Arial, sans-serif;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

.add-funds-back:hover {
	text-decoration: underline;
}

/* =========================================================
   FUND REVIEW BUTTONS
   ========================================================= */

.funds-reject-button {
	width: 100%;
	margin-top: 12px;
	padding: 14px;
	border: 1px solid #cc4444;
	border-radius: 8px;
	background: #661111;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
}

.funds-reject-button:hover {
	background: #881111;
}

.add-funds-submit:disabled,
.funds-reject-button:disabled {
	opacity: 0.55;
	cursor: default;
}

/* =========================================================
   ADMIN PAGE
   ========================================================= */

.admin-screen
{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	min-height: calc(100vh - 120px);
	padding: 30px 15px;
	box-sizing: border-box;
}

.admin-panel
{
	width: min(900px, 100%);
	padding: 30px;
	border: 2px solid #d4af37;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.88);
	box-shadow:
		0 0 8px rgba(255, 215, 0, 0.45),
		inset 0 0 8px rgba(255, 215, 0, 0.15);
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}

.admin-panel h1
{
	margin: 0 0 20px;
	color: #ffd700;
	font-family: Arial, sans-serif;
}

.admin-success
{
	color: #78e08f;
	font-weight: bold;
}

.admin-user
{
	margin-top: 20px;
	color: #ddd;
}

.admin-return-link
{
	display: inline-block;
	margin-top: 25px;
	color: #ffd700;
	font-weight: bold;
	text-decoration: none;
}

.admin-return-link:hover
{
	text-decoration: underline;
}