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

:root {
	--txt-1: hsl(220 10% 98%);
	--bg-1: hsl(220 20% 10%);
	--bg-2: hsl(220 20% 20%);
	--border: hsl(180 100% 50%);
	--pulse: hsl(9 100% 64%);
}

html,
body {
	height: 100%;
}

body {
	display: grid;
	place-content: center;
	padding: 2rem;
	font-family: sans-serif;
	color: var(--txt-1);
	background-color: var(--bg-1);
}

h1 {
	font-size: 4rem;
	text-align: center;
	text-transform: capitalize;
}

h1 + button {
	width: max-content;
	margin-top: 2rem;
	margin-inline: auto;
	border: 4px solid var(--border);
}

button {
  /* all base styles */
  padding: 0.8rem;
  font-size: 2rem;
  font-weight: 900;
  color: red;
  background: none;
  border-radius: 8px;
  border: 0.2rem solid;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 0.4rem;
}

button:active {
  transform: scale(0.95);
}


.box {
	flex: 1;
	border: 2px solid #ccc;
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	background-color: #f9f9f9;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.box h2 {
	margin: 0;
	font-size: 1.5rem;
	color: #333;
}

.box p {
	font-size: 2rem;
	font-weight: bold;
	color: #222;
} 

.balance-display {
	font-size: 1.5rem;
	font-weight: bold;
	color: white;
	margin: 0.5rem
}

.game-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  padding: 2rem;
}

.game-content {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 1rem;
}
.json-stack {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.bet-display {
  width: 300px;
  height: 300px;
  background: #f5f5f5;
  color: black;
  padding: 1rem;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.85rem;
  overflow: auto;
}

.end-display {
  width: 300px;
  height: 100px;
  background: #f5f5f5;
  color: black;
  padding: 1rem;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.85rem;
  overflow: auto;
}

.response-display {
  flex: 1;
}