:root {
	--gold: #f5c542;
	--gold-deep: #b8860b;
	--gold-light: #ffe89a;
	--lapis: #1a2e6e;
	--lapis-deep: #0e1633;
	--panel: rgba(12, 10, 26, 0.82);
	--panel-edge: rgba(245, 197, 66, 0.55);
	--txt: #f4e9c8;
	--win: #7CFC98;
	--bg1: #241a3a;
	--bg2: #0b0716;
	--bg3: #050308;
	--font-display: 'Cinzel', serif;
	--font-body: 'Rubik', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
	height: 100%;
	background: radial-gradient(ellipse at 50% 0%, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
	color: var(--txt);
	font-family: var(--font-body);
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

#game {
	/* cap width so the board (width * 760/1000) + UI bar fit inside the viewport
	   height on desktop; on mobile the 1000px cap is never reached and the UI stacks */
	max-width: min(1000px, calc((100vh - 150px) * 1.315));
	margin: 0 auto;
	padding: 12px 12px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 100%;
}

#stage {
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 0 0 2px var(--panel-edge), 0 22px 60px rgba(0, 0, 0, 0.7),
		inset 0 0 80px rgba(0, 0, 0, 0.5);
	line-height: 0;
}

#stage canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* ---------- UI BAR ---------- */
#ui {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	background: linear-gradient(180deg, rgba(30, 22, 55, 0.9), rgba(10, 8, 22, 0.95));
	border: 1.5px solid var(--panel-edge);
	border-radius: 16px;
	padding: 10px 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ui-cell { display: flex; align-items: center; gap: 8px; }
.ui-info { flex-direction: row; }
.ui-actions { justify-content: center; gap: 6px; }

.label {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--gold);
	opacity: 0.85;
}

.ui-meter { flex-direction: column; align-items: flex-start; line-height: 1.1; }
.ui-win { align-items: flex-end; }
.ui-meter .value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--gold-light);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ui-win .value { color: var(--win); }
.value.flash { animation: flash 0.4s ease; }
@keyframes flash { 0% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }

.ui-bet { flex-direction: row; gap: 6px; }
.bet-box { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1.1; }
.bet-box .value { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--gold-light); }

button { cursor: pointer; font-family: var(--font-body); border: none; color: var(--txt); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.round {
	width: 34px; height: 34px; border-radius: 50%;
	font-size: 20px; font-weight: 700; line-height: 1;
	background: linear-gradient(180deg, #2a2350, #171130);
	border: 1.5px solid var(--panel-edge);
	color: var(--gold-light);
	transition: transform 0.08s, box-shadow 0.15s;
}
.round:active:not(:disabled) { transform: scale(0.9); }
.round:hover:not(:disabled) { box-shadow: 0 0 12px rgba(245, 197, 66, 0.5); }

.chip {
	min-width: 40px; height: 34px; padding: 0 10px; border-radius: 10px;
	font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
	background: linear-gradient(180deg, #2a2350, #171130);
	border: 1.5px solid var(--panel-edge);
	color: var(--gold-light);
	transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.chip:hover:not(:disabled) { box-shadow: 0 0 12px rgba(245, 197, 66, 0.4); }
.chip:active:not(:disabled) { transform: scale(0.92); }
.chip.on {
	background: linear-gradient(180deg, var(--gold), var(--gold-deep));
	color: #1a1005; box-shadow: 0 0 16px rgba(245, 197, 66, 0.7);
}

.spin {
	width: 92px; height: 92px; border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, var(--gold-light), var(--gold) 45%, var(--gold-deep) 100%);
	border: 3px solid #fff6d5;
	box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.6), 0 8px 24px rgba(0, 0, 0, 0.6),
		inset 0 -6px 14px rgba(120, 80, 0, 0.6), inset 0 6px 12px rgba(255, 255, 255, 0.6);
	color: #3a2200;
	transition: transform 0.1s;
}
.spin .spin-txt { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 1px; }
.spin:hover:not(:disabled) { filter: brightness(1.08); }
.spin:active:not(:disabled) { transform: scale(0.93); }
.spin.spinning { animation: spinPulse 0.9s linear infinite; }
@keyframes spinPulse { 50% { box-shadow: 0 0 0 4px rgba(184,134,11,0.6), 0 0 30px 6px rgba(245,197,66,0.6); } }

/* ---------- MODAL ---------- */
#modal {
	position: fixed; inset: 0; z-index: 50;
	background: rgba(4, 2, 10, 0.82);
	display: flex; align-items: center; justify-content: center;
	padding: 20px; backdrop-filter: blur(4px);
}
#modal.hidden, #toast.hidden { display: none; }

.modal-card {
	position: relative;
	width: min(560px, 100%);
	max-height: 88vh; overflow-y: auto;
	background: linear-gradient(180deg, #201741, #100b22);
	border: 2px solid var(--panel-edge);
	border-radius: 18px;
	padding: 26px 24px 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.modal-card h2 { font-family: var(--font-display); color: var(--gold-light); font-size: 26px; text-align: center; }
.modal-card .sub { text-align: center; color: var(--gold); font-size: 13px; margin: 4px 0 18px; letter-spacing: 0.5px; }
.modal-close {
	position: absolute; top: 12px; right: 14px;
	width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1;
	background: #2a2350; border: 1.5px solid var(--panel-edge); color: var(--gold-light);
}

#paytable { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pt-row {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(245, 197, 66, 0.2);
	border-radius: 10px; padding: 6px 8px;
}
.pt-row img { width: 42px; height: 42px; object-fit: contain; }
.pt-row .pays { font-size: 12px; line-height: 1.35; }
.pt-row .pays b { color: var(--gold-light); }
.pt-row .nm { font-family: var(--font-display); font-size: 12px; color: var(--gold); display: block; margin-bottom: 2px; }

.rules { font-size: 13px; line-height: 1.5; color: #d8cfe6; }
.rules p { margin-bottom: 8px; }
.rules b { color: var(--gold-light); }
.rules .disclaimer { font-size: 11px; opacity: 0.7; margin-top: 12px; }

.topup {
	display: block; width: 100%; margin-top: 16px; padding: 13px;
	border-radius: 12px; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.5px;
	background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #221400;
	box-shadow: 0 6px 18px rgba(245, 197, 66, 0.4);
}
.topup:active { transform: scale(0.98); }

#toast {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
	z-index: 60; padding: 12px 22px; border-radius: 12px;
	background: linear-gradient(180deg, #2a2350, #140d2b);
	border: 1.5px solid var(--panel-edge); color: var(--gold-light);
	font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }

@media (max-width: 900px) {
	#ui {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"bal win"
			"bet spin"
			"act act"
			"info info";
		gap: 12px 10px;
		padding: 12px 10px;
	}
	.ui-meter { grid-area: bal; align-items: flex-start; }
	.ui-win { grid-area: win; align-items: flex-end; }
	.ui-bet { grid-area: bet; justify-content: center; }
	.ui-spin { grid-area: spin; justify-content: center; }
	.ui-actions { grid-area: act; justify-content: center; flex-wrap: wrap; }
	.ui-info { grid-area: info; justify-content: center; }
	.spin { width: 74px; height: 74px; }
	.spin .spin-txt { font-size: 15px; }
	.ui-meter .value { font-size: 18px; }
	#paytable { grid-template-columns: 1fr; }
}

#ui { overflow: hidden; }
.value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }