:root {
	color-scheme: dark;
	--page: #020611;
	--felt: #215b3b;
	--felt-line: #70b983;
	--panel: #071126;
	--history: #19394a;
	--text: #eef7f1;
	--muted: #a8b8ca;
	--gold: #f5cb5c;
	--red: #e67e22;
	--back: #102a50;
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		monospace;
}

.app {
	display: grid;
	grid-template-rows: 46px minmax(0, 1fr) 34px;
	gap: 8px;
	width: 100vw;
	height: 100vh;
	padding: 6px;
}

.status,
.toolbar,
.guide,
.table {
	border: 1px solid var(--felt-line);
	border-radius: 5px;
}

.status {
	display: flex;
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
	padding: 0 16px;
	background: var(--panel);
	font-size: clamp(14px, 1.1vw, 18px);
	font-weight: 700;
	white-space: nowrap;
}

.playfield {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 420px);
	gap: 8px;
	min-height: 0;
}

.table {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: clamp(14px, 1.6vw, 26px);
	background: var(--felt);
}

.seats {
	position: absolute;
	top: clamp(34px, 6vh, 58px);
	left: 4%;
	right: 4%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.player {
	min-width: 0;
}

.player:nth-child(1) {
	justify-self: start;
}

.player:nth-child(2) {
	justify-self: center;
}

.player:nth-child(3) {
	justify-self: end;
}

.player h3,
.player p,
.board h3,
.history-panel h2,
.guide h2 {
	margin: 0 0 8px;
}

.eliminated,
.folded {
	color: var(--muted);
}

.folded .card {
	opacity: 0.45;
}

.cards {
	display: flex;
	gap: 8px;
	min-height: clamp(58px, 9vh, 86px);
}

.card {
	display: inline-flex;
	width: clamp(42px, 4.1vw, 64px);
	height: clamp(58px, 8.8vh, 86px);
	align-items: center;
	justify-content: center;
	border: 2px solid #111;
	border-radius: 6px;
	background: #dcded8;
	color: #111;
	font-weight: 800;
	font-size: clamp(13px, 1.25vw, 20px);
}

.card.red {
	color: var(--red);
	border-color: var(--red);
}

.card.back {
	background: var(--back);
	color: #7bc7ff;
	border-color: #7bc7ff;
}

.card.winner {
	background: var(--gold);
}

.board {
	position: absolute;
	top: 42%;
	left: 50%;
	width: min(46vw, 560px);
	transform: translate(-50%, -50%);
	text-align: center;
}

.pot {
	margin-bottom: 8px;
	color: var(--muted);
}

.board-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(105px, 17vh, 170px);
	gap: 8px;
	border: 1px solid var(--text);
	border-radius: 5px;
	padding: 14px;
}

.hero {
	position: absolute;
	left: 50%;
	bottom: clamp(94px, 15vh, 132px);
	transform: translateX(-50%);
}

.hero-player {
	text-align: center;
}

.chip-animation {
	position: absolute;
	top: 62%;
	left: 50%;
	transform: translateX(-50%);
	color: var(--gold);
	font-weight: 800;
	text-shadow: 0 2px 10px rgb(0 0 0 / 55%);
	white-space: nowrap;
}

.message {
	position: absolute;
	left: clamp(22px, 3vw, 42px);
	right: clamp(22px, 3vw, 42px);
	bottom: clamp(78px, 12vh, 104px);
	font-weight: 700;
}

.history-panel {
	position: absolute;
	left: clamp(22px, 3vw, 42px);
	right: clamp(22px, 3vw, 42px);
	bottom: clamp(14px, 2vh, 28px);
	height: 76px;
	border: 1px solid #6f90c8;
	border-radius: 8px;
	padding: 6px 12px;
	overflow: hidden;
	background: var(--history);
}

.history-panel h2 {
	margin: 0 0 2px;
	color: var(--felt-line);
	font-size: clamp(14px, 1.15vw, 18px);
	line-height: 1.15;
}

.history-panel ul {
	display: grid;
	grid-template-rows: repeat(2, 1.25em);
	height: 2.5em;
	margin: 0;
	padding-left: 20px;
	overflow: hidden;
	color: var(--muted);
	font-size: clamp(12px, 1vw, 16px);
	line-height: 1.25;
}

.guide {
	display: flex;
	min-height: 0;
	flex-direction: column;
	padding: clamp(14px, 1.4vw, 22px);
	overflow: hidden;
	background: var(--panel);
}

.guide h2 {
	font-size: clamp(15px, 1.2vw, 18px);
}

.guide dl {
	display: grid;
	gap: clamp(8px, 1.2vh, 18px);
	margin: 0;
	overflow: hidden;
}

.guide dt {
	font-weight: 800;
}

.guide dd {
	margin: 0 0 0 16px;
	color: var(--muted);
	font-size: clamp(11px, 0.95vw, 15px);
	white-space: nowrap;
}

.guide-note {
	margin-top: auto;
	color: var(--muted);
}

.toolbar {
	display: flex;
	gap: clamp(6px, 1.5vw, 30px);
	align-items: center;
	padding: 2px 8px;
	overflow: hidden;
	background: var(--panel);
}

.footer-note {
	margin-left: auto;
	color: var(--muted);
	font-size: clamp(12px, 1vw, 16px);
	white-space: nowrap;
}

button {
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	font-size: clamp(12px, 1vw, 16px);
	white-space: nowrap;
}

button:hover:not(:disabled) {
	color: var(--text);
}

button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.muted {
	color: var(--muted);
}

.deal-card {
	--dx: 0vw;
	--dy: 0vh;

	position: absolute;
	top: 42%;
	left: 50%;
	z-index: 5;
	display: inline-flex;
	width: clamp(34px, 3.5vw, 54px);
	height: clamp(46px, 7vh, 74px);
	align-items: center;
	justify-content: center;
	border: 2px solid #7bc7ff;
	border-radius: 6px;
	background: var(--back);
	color: #7bc7ff;
	font-weight: 800;
	box-shadow: 0 14px 30px rgb(0 0 0 / 35%);
	animation: fly-deal 360ms ease-out forwards;
	pointer-events: none;
}

.deal-to-0 {
	--dx: 0vw;
	--dy: 30vh;
}

.deal-to-1 {
	--dx: -43vw;
	--dy: -27vh;
}

.deal-to-2 {
	--dx: 0vw;
	--dy: -27vh;
}

.deal-to-3 {
	--dx: 43vw;
	--dy: -27vh;
}

.deal-to-board {
	--dx: 0vw;
	--dy: 6vh;
}

@keyframes fly-deal {
	from {
		opacity: 0.25;
		transform: translate(-50%, -50%) scale(0.72) rotate(-8deg);
	}

	to {
		opacity: 1;
		transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
			scale(1) rotate(0deg);
	}
}

.empty-table,
.game-over {
	display: grid;
	height: 100%;
	place-content: center;
	text-align: center;
}

.game-over {
	color: var(--gold);
}

.history-popup {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	background: rgb(2 6 17 / 58%);
}

.history-modal {
	width: min(760px, 72%);
	max-height: min(520px, 72%);
	border: 1px solid #6f90c8;
	border-radius: 8px;
	padding: 18px 22px;
	background: var(--history);
	box-shadow: 0 20px 80px rgb(0 0 0 / 45%);
}

.history-modal h2 {
	margin: 0 0 12px;
}

.history-modal ul {
	max-height: min(380px, 48vh);
	margin: 0;
	padding-left: 22px;
	overflow: auto;
	color: var(--muted);
}

.history-modal p {
	margin: 12px 0 0;
	color: var(--muted);
}

.load-error {
	margin: 32px;
	color: #ffb4b4;
}

@media (max-width: 900px), (max-height: 620px) {
	.app {
		grid-template-rows: 40px minmax(0, 1fr) 30px;
		gap: 5px;
		padding: 4px;
	}

	.playfield {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.guide dd {
		margin-left: 8px;
	}
}