* {
	box-sizing: border-box;
}

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

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

.game-container {
	position: relative;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	height: 100vh;
	height: 100dvh;
	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-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

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

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

/* Main layout */
.game-layout {
	height: 98%;
	width: 100%;
	display: grid;
	grid-template-columns: 23fr 54fr 23fr;

	/* 5 equal rows allows balance to span 2.5-ish old panels */
	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;
	justify-content: center;
	align-items: 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 {
	width: 100%;
	margin-top: auto;
	padding: 0 8px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

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

/* Panels */
.panel {
	position: relative;
	height: 100%;
	background-color: black;
	border-radius: 12px;
	overflow: hidden;
}

.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	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;
	z-index: 2;
}

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

.gold-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	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;
	z-index: 50;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bet-label {
	width: 82%;
	max-width: 82%;
	height: auto;
	max-height: 70%;
	object-fit: contain;
	display: block;
	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;
	left: 0;
	bottom: 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;
	justify-content: space-evenly;
	align-items: center;
}

.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;
	width: 48px;
	height: 48px;
	object-fit: contain;
	transform: translate(-50%, -50%);
	z-index: 99999;
	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;
	width: 42px;
	height: 42px;
	object-fit: contain;
	transform: translate(-50%, -50%);
	z-index: 20;
	touch-action: none;
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	cursor: grab;
}

/* Sign in */
.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;
	background: rgba(0, 0, 0, 0.78);
	border: 6px solid transparent;
	border-image: linear-gradient(
		90deg,
		#fff8d6 0%,
		#ffd700 20%,
		#d4a017 40%,
		#fff0a0 50%,
		#d4a017 60%,
		#ffd700 80%,
		#fff8d6 100%
	) 1;
	padding: 22px;
	text-align: center;
	color: #fff8d6;
}

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

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

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

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

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

.signin-button {
	margin-top: 12px;
	height: 52px;
	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 {
	background: #8b0000;
	color: #fff;
	padding: 10px;
	margin-bottom: 15px;
	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;
}

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

.play-btn {
	position: absolute !important;
	left: 50% !important;
	bottom: 15% !important;
	transform: translateX(-50%) !important;
	z-index: 20;
	width: 270px;
	height: 76px;
	line-height: 56px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #ffe88a !important;
	text-decoration: none;
	text-align: center;
	background: linear-gradient(180deg, #101820 0%, #020304 45%, #000 100%) !important;
	border: 3px solid #ffd76a !important;
	border-radius: 18px !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);
}

/* Winning animation */
.casino-rake {
	position: fixed;
	left: var(--rake-left);
	top: 100vh;
	width: var(--rake-width);
	height: auto;
	z-index: 80;
	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;
	width: 48px;
	height: 48px;
	object-fit: contain;
	left: 0;
	top: 0;
	z-index: 100000;
	pointer-events: none;
	transform: translate(0, 0) scale(1.15);
	transition:
		transform 650ms cubic-bezier(.2, .8, .2, 1),
		opacity 650ms ease;
}

/* register css */
.register-screen {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.register-panel {
	width: 82%;
	max-width: 430px;
	border: 5px solid transparent;
	border-image: linear-gradient(
		90deg,
		#fff8d6,
		#ffd700,
		#d4a017,
		#fff8d6
	) 1;
	padding: 24px 22px;
	background: rgba(0, 0, 0, 0.78);
	overflow: hidden;
}

.register-panel h1 {
	margin: 0 0 22px;
	text-align: center;
	font-family: Impact, sans-serif;
	font-size: 40px;
	color: #ffd700;
	letter-spacing: 2px;
}

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

.register-slider {
	display: flex;
	width: 800%;
	transition: transform 0.45s ease;
}

.register-step {
	width: 12.5%;
	flex-shrink: 0;
	padding: 0 4px;
}

.register-step label {
	display: block;
	color: #fff;
	font-weight: bold;
	margin-bottom: 7px;
	font-size: 14px;
}

.register-step input,
.register-step select {
	width: 100%;
	height: 42px;
	margin-bottom: 15px;
	background: rgba(255, 255, 255, 0.06);
	border: 2px solid #d4a017;
	color: #fff;
	font-size: 17px;
	padding: 0 10px;
	outline: none;
}

.register-step select {
	background: #111;
}

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

.checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 10px 0 18px;
	line-height: 1.3;
}

.checkbox-label input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
}

.register-button {
	width: 100%;
	height: 54px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(#42ff65, #00a832);
	color: #fff;
	font-family: Impact, sans-serif;
	font-size: 27px;
	letter-spacing: 2px;
	text-shadow: 1px 2px 2px #000;
	cursor: pointer;
}

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

.register-button:disabled {
	opacity: 0.5;
}

.register-message {
	margin-top: 14px;
	min-height: 22px;
	text-align: center;
	color: #ffd700;
	font-weight: bold;
}

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

	.app {
		display: block;
	}
}

/* Landscape warning */
@media (orientation: landscape) {
	.app {
		display: none;
	}

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