* { box-sizing: border-box; }

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

body {
	font-family: system-ui, sans-serif;
	background: radial-gradient(circle at 50% 30%, #0e7a59, #0a5240 70%);
	color: #f5f5f5;
}

/* App shell. Fills the viewport exactly and never overflows it -- the play area
   absorbs the slack so the controls pinned at the bottom are always on screen. */
#root { height: 100%; display: flex; }

.table {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	overflow: hidden;
}

/* The cards: the flexible middle, which shrinks (and clips, as a last resort) so it
   never pushes the controls below it off the bottom of the window. */
.play-area {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.controls {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
.controls__count { min-width: 5rem; }
.controls__bankroll { font-variant-numeric: tabular-nums; opacity: 0.9; }

/* Pinned bottom controls. Fixed height (flex: none) so they're always on screen. */
.control-area {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

/* The in-round action (hit/stand) is centered on the screen; the hand-count bar is
   pinned to the left and taken OUT of flow, so it can never nudge the centered action.
   min-height holds room for the taller bet bar so it doesn't spill upward. */
.controls-row {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	min-height: 7rem;
}
.controls-row > .bet {
	position: absolute;
	left: 1rem;
	bottom: 0;
}

/* Reserved slot so swapping the in-round control (or the banner appearing) never shifts
   anything -- hit/stand stay centered and put from hand to hand. */
.banner-slot {
	min-height: 2.25rem;
	display: flex;
	align-items: center;
}
.action-slot {
	min-height: 4.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Betting prompt. Shown only while the engine awaits the human's getBets(). One box
   per hand the player wants to play; "+ Hand" adds a box, each becomes a hand. */
.bet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	background: rgba(0, 0, 0, 0.2);
}
.bet__boxes {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 0.75rem 1rem;
}
.bet__box { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.bet__box-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	opacity: 0.8;
}
.bet__input {
	width: 4.5rem;
	padding: 0.4rem 0.5rem;
	font-size: 1rem;
	border: 0;
	border-radius: 0.4rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.bet__summary { display: flex; align-items: center; gap: 0.75rem; }
.bet__hint { font-size: 0.85rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.table .bet button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Compact glyph buttons that opt out of the big pill style. */
.table .bet__remove,
.table .bet__add {
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
	background: rgba(245, 245, 245, 0.15);
	color: #f5f5f5;
}
.table .bet__remove {
	padding: 0;
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1;
	border-radius: 999px;
}

/* Play prompt. Shown only while the engine awaits the human's play() choice. */
.play {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	background: rgba(0, 0, 0, 0.2);
}
.play__info { font-size: 0.95rem; opacity: 0.9; }
.play__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* Settlement: per-hand verdict badge + the round summary banner. */
.bj-outcome {
	margin-top: 0.4rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bj-outcome--win { background: #1f8f4e; color: #f5fff8; }
.bj-outcome--lose { background: #9c2b2b; color: #fff5f5; }
.bj-outcome--push { background: #5a5a5a; color: #f5f5f5; }

.round-banner {
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.round-banner--win { background: rgba(31, 143, 78, 0.25); color: #b6f0cd; }
.round-banner--lose { background: rgba(156, 43, 43, 0.25); color: #f3c2c2; }
.round-banner--push { background: rgba(90, 90, 90, 0.25); color: #e0e0e0; }

.table button {
	padding: 0.6rem 1.4rem;
	font-size: 1rem;
	border: 0;
	border-radius: 999px;
	background: #f5f5f5;
	color: #0a5240;
	cursor: pointer;
}

/* ---- Settings panel (modal overlay) ---- */
.settings-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 1rem;
	overflow-y: auto;
	z-index: 100;
}
.settings {
	width: min(28rem, 100%);
	background: #0c4a39;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 0.9rem;
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.settings__head { display: flex; align-items: center; justify-content: space-between; }
.settings__title { margin: 0; font-size: 1.2rem; }
.table .settings__close {
	padding: 0;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1;
	font-size: 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #f5f5f5;
}
.settings__note { margin: 0 0 0.4rem; font-size: 0.8rem; opacity: 0.7; }

.settings__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.2rem;
}
.settings__label { font-size: 0.9rem; opacity: 0.9; }
.settings__control { display: flex; align-items: center; gap: 0.6rem; }
.settings__pct { width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.settings__num, .settings__select {
	width: 5rem;
	padding: 0.35rem 0.5rem;
	font-size: 0.95rem;
	border: 0;
	border-radius: 0.4rem;
	background: #f5f5f5;
	color: #0a3a2c;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.settings__text {
	width: 11rem;
	padding: 0.35rem 0.55rem;
	font-size: 0.95rem;
	border: 0;
	border-radius: 0.4rem;
	background: #f5f5f5;
	color: #0a3a2c;
}
.settings__check { cursor: pointer; }
.settings__check input { width: 1.1rem; height: 1.1rem; }

/* ---- Strategy drill ---- */

/* Start screen: a centered explanatory card. */
.drill-start {
	max-width: 32rem;
	margin: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
}
.drill-start h2 { margin: 0; }
.drill-start p { margin: 0; line-height: 1.5; }
.drill-start__note { font-size: 0.85rem; opacity: 0.75; }
.drill-modes { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }
.drill-modes__label { font-size: 0.9rem; opacity: 0.85; }

/* The feedback slot above the play controls. Fixed height so showing/clearing it never
   nudges the buttons. Blank in summary mode. */
.drill-feedback {
	min-height: 1.5rem;
	font-size: 0.95rem;
	text-align: center;
	opacity: 0.9;
}
.drill-feedback--right { color: #8fe0b0; opacity: 1; }
.drill-feedback--wrong { color: #f0a8a8; opacity: 1; }

/* The unobtrusive bail-out under the play control. */
.table .drill-finish {
	padding: 0.3rem 0.9rem;
	font-size: 0.85rem;
	background: rgba(255, 255, 255, 0.15);
	color: #f5f5f5;
}

/* Summary: fills the space under the header and scrolls if the chart is tall. */
.drill-summary {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 0.5rem 1rem 1.5rem;
}
.drill-summary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
}
.drill-score { display: flex; flex-direction: column; align-items: center; }
.drill-score__pct { font-size: 2.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.drill-score__frac { font-size: 0.85rem; opacity: 0.8; }
.drill-groups { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }
.drill-group { opacity: 0.9; }
.drill-summary__actions { display: flex; gap: 0.5rem; }

/* The three chart sections, laid side by side and wrapping on narrow screens. */
.heat-grids {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 1.5rem;
}
.heat__title { margin: 0 0 0.4rem; font-size: 1rem; text-align: center; }
.heat__table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.heat__table th {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.8;
	padding: 0.1rem 0.25rem;
}
.heat__row-label { text-align: right; white-space: nowrap; }
.heat__cell {
	width: 1.7rem;
	height: 1.7rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #0a2a20;
}
.heat__cell--correct { background: #57c98a; }
.heat__cell--wrong { background: #e07a7a; color: #3a0f0f; }
.heat__cell--untested { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }

/* The list of missed cells beneath the chart. */
.drill-mistakes { width: min(40rem, 100%); }
.drill-mistakes h3 { margin: 0 0 0.4rem; }
.drill-mistakes ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.drill-mistakes li { font-size: 0.9rem; line-height: 1.4; }

/* Segmented (radio-as-buttons) control. */
.seg { display: flex; gap: 0.3rem; }
.table .seg__btn {
	padding: 0.3rem 0.7rem;
	font-size: 0.85rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.12);
	color: #f5f5f5;
}
.table .seg__btn--on { background: #f5f5f5; color: #0a5240; font-weight: 600; }