/**
 * [B] Juegocito Tools - frontend styles.
 *
 * Every colour, radius, shadow and font comes from Core's tokens.css, with a
 * var() fallback on each one: this is the only plugin on the platform allowed
 * to run with Core deactivated, so it has to look deliberate on its own
 * rather than inheriting the browser's defaults.
 *
 * Two things drive the layout choices here. First, this is used on a phone,
 * held in one hand, on a table, in bad light: targets are large, numbers are
 * large, and the important control is never at the top of a long form.
 * Second, every animation is decoration - the result exists before the
 * animation starts, and prefers-reduced-motion removes all of it without
 * removing information.
 */

.bdw-jt {
	font-family: var(--bdw-font-body, "Nunito Sans", sans-serif);
	color: var(--bdw-ink, #16241F);
}

.bdw-jt-page__head {
	margin-bottom: 20px;
}

.bdw-jt-page__head h1 {
	margin-bottom: 6px;
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
}

.bdw-jt-page__head .bdw-jc-muted {
	max-width: 68ch;
}

/* ---------- Tabs ---------- */

.bdw-jt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--bdw-line, #DED4C6);
	padding-bottom: 10px;
}

.bdw-jt-tabs__tab {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--bdw-radius-pill, 999px);
	border: 1px solid var(--bdw-line, #DED4C6);
	background: var(--bdw-paper, #FFFDF8);
	color: var(--bdw-ink, #16241F);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.bdw-jt-tabs__tab:hover,
.bdw-jt-tabs__tab:focus {
	background: var(--bdw-sand, #F3E7D6);
	color: var(--bdw-ink, #16241F);
}

/* Two tones, matching Core: yellow alone measures 1.72:1 on the cream page,
   so the halo in the offset gap is what makes the ring visible there. */
.bdw-jt-tabs__tab:focus-visible {
	outline: var(--bdw-focus-width, 3px) solid var(--bdw-focus-color, #F5B33C);
	outline-offset: var(--bdw-focus-offset, 2px);
	box-shadow: 0 0 0 calc(var(--bdw-focus-width, 3px) + var(--bdw-focus-offset, 2px)) var(--bdw-focus-halo, #0A3B31);
}

.bdw-jt-tabs__tab.is-current {
	background: var(--bdw-green-700, #12634F);
	border-color: var(--bdw-green-700, #12634F);
	color: var(--bdw-on-brand, #FFFFFF);
}

/* ---------- Tool shell ---------- */

.bdw-jt-tool {
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	padding: 20px;
	box-shadow: var(--bdw-shadow, 0 18px 55px rgba(22, 36, 31, 0.08));
}

.bdw-jt-tool__head {
	margin-bottom: 18px;
}

.bdw-jt-tool__head h2 {
	margin: 0 0 6px;
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
}

.bdw-jt-tool__head .bdw-jc-muted {
	max-width: 68ch;
	margin: 0;
}

.bdw-jt-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
	position: relative;
}

.bdw-jt-field label,
.bdw-jt-field > span:first-child {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent, #177C63);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bdw-jt-field--check label {
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--bdw-ink, #16241F);
}

/* ---------- Roster ---------- */

.bdw-jt-roster {
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-sm, 8px);
	padding: 14px 16px;
	margin: 0 0 18px;
}

.bdw-jt-roster legend {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent, #177C63);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0 6px;
}

.bdw-jt-roster__rows {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.bdw-jt-roster__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.bdw-jt-roster__name {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Dice ---------- */

.bdw-jt-dice__presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.bdw-jt-dice__presets-label {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent, #177C63);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bdw-jt-dice__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.bdw-jt-dice__notation {
	max-width: 420px;
}

.bdw-jt-dice__result {
	min-height: 96px;
	margin: 18px 0;
}

.bdw-jt-roll {
	background: var(--bdw-cream, #FFF6EA);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	padding: 18px 20px;
}

.bdw-jt-roll__total {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 14px;
}

.bdw-jt-roll__total-value {
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 52px;
	line-height: 1;
	font-weight: 700;
	color: var(--bdw-heading, #0A3B31);
}

.bdw-jt-roll__notation {
	font-family: var(--bdw-font-mono, monospace);
	font-size: 14px;
	color: var(--bdw-muted, #68756F);
}

.bdw-jt-roll__dice {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.bdw-jt-roll__source {
	margin-bottom: 0;
	font-size: 13px;
}

/* One die. The shape carries the die type at a glance - a square d6, a
   diamond d4, a rounded d20 - which is how they are recognised on a table,
   while the number stays upright and readable in every one of them. */

.bdw-jt-die {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	background: var(--bdw-paper, #FFFDF8);
	border: 2px solid var(--bdw-green-700, #12634F);
	border-radius: var(--bdw-radius-sm, 8px);
	box-shadow: 0 3px 0 var(--bdw-green-700, #12634F);
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--bdw-heading, #0A3B31);
}

.bdw-jt-die[data-faces="2"],
.bdw-jt-die[data-faces="100"] {
	border-radius: 50%;
}

.bdw-jt-die[data-faces="4"] {
	border-radius: var(--bdw-radius-sm, 8px);
	transform: rotate(45deg);
}

.bdw-jt-die[data-faces="4"] .bdw-jt-die__value {
	transform: rotate(-45deg);
}

.bdw-jt-die[data-faces="8"],
.bdw-jt-die[data-faces="12"],
.bdw-jt-die[data-faces="20"] {
	border-radius: 18px;
}

.bdw-jt-die.is-dropped {
	opacity: 0.4;
	border-color: var(--bdw-line, #DED4C6);
	box-shadow: none;
	text-decoration: line-through;
}

.bdw-jt-die__value {
	display: block;
}

/* The tumble. Three quarters of a turn with a bounce, plus a small
   translation, reads as "thrown" rather than "spun"; anything longer than
   half a second and the tool starts feeling slower than picking up a real
   die, which is the only benchmark that matters. */

@keyframes bdw-jt-tumble {
	0% {
		transform: translateY(-14px) rotate(-160deg) scale(0.85);
	}
	60% {
		transform: translateY(3px) rotate(20deg) scale(1.04);
	}
	100% {
		transform: translateY(0) rotate(0) scale(1);
	}
}

.bdw-jt-die.is-rolling {
	animation: bdw-jt-tumble 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.bdw-jt-die[data-faces="4"].is-rolling {
	/* The d4 already carries a 45deg transform, so it needs its own
	   keyframes rather than being reset to rotate(0) at the end. */
	animation: bdw-jt-tumble-diamond 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes bdw-jt-tumble-diamond {
	0% {
		transform: translateY(-14px) rotate(-115deg) scale(0.85);
	}
	60% {
		transform: translateY(3px) rotate(65deg) scale(1.04);
	}
	100% {
		transform: translateY(0) rotate(45deg) scale(1);
	}
}

.bdw-jt-dice__history {
	border-top: 1px solid var(--bdw-line, #DED4C6);
	padding-top: 14px;
}

.bdw-jt-dice__history h3 {
	font-size: 15px;
	margin: 0 0 8px;
}

.bdw-jt-dice__history-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.bdw-jt-dice__history-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-pill, 999px);
	background: var(--bdw-cream, #FFF6EA);
	font-size: 13px;
}

.bdw-jt-dice__history-notation {
	font-family: var(--bdw-font-mono, monospace);
	color: var(--bdw-muted, #68756F);
}

.bdw-jt-dice__history-total {
	font-weight: 800;
}

/* ---------- Scoreboard ---------- */

.bdw-jt-score__settings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	align-items: end;
	margin-bottom: 18px;
}

.bdw-jt-score__board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.bdw-jt-score__player {
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	padding: 14px 16px;
	background: var(--bdw-cream, #FFF6EA);
}

.bdw-jt-score__player.is-leading {
	border-color: var(--bdw-green-600, #177C63);
	box-shadow: inset 0 0 0 1px var(--bdw-green-600, #177C63);
}

.bdw-jt-score__player-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bdw-jt-score__name {
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 18px;
	font-weight: 600;
}

.bdw-jt-score__value {
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 44px;
	line-height: 1.1;
	font-weight: 700;
	margin: 4px 0 10px;
	color: var(--bdw-heading, #0A3B31);
	font-variant-numeric: tabular-nums;
}

.bdw-jt-score__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bdw-jt-score__buttons .bdw-jc-button {
	min-width: 52px;
	font-variant-numeric: tabular-nums;
}

.bdw-jt-score__rounds {
	margin: 16px 0;
}

.bdw-jt-score__rounds summary {
	cursor: pointer;
	font-weight: 700;
}

.bdw-jt-score__rounds-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 14px;
}

.bdw-jt-score__rounds-table th,
.bdw-jt-score__rounds-table td {
	border-bottom: 1px solid var(--bdw-line, #DED4C6);
	padding: 6px 8px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bdw-jt-score__rounds-table th:first-child,
.bdw-jt-score__rounds-table tbody th {
	text-align: left;
}

.bdw-jt-score__rounds-total {
	font-weight: 800;
}

.bdw-jt-score__handoff {
	border-top: 1px solid var(--bdw-line, #DED4C6);
	padding-top: 16px;
	margin-top: 16px;
}

.bdw-jt-score__handoff h3 {
	font-size: 17px;
	margin: 0 0 6px;
}

/* ---------- Autocomplete (shared with the handoff field) ---------- */

.bdw-jt-autocomplete {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-sm, 8px);
	box-shadow: var(--bdw-shadow, 0 18px 55px rgba(22, 36, 31, 0.08));
	overflow: hidden;
}

.bdw-jt-autocomplete.is-open {
	display: block;
}

.bdw-jt-autocomplete__item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	border: 0;
	background: none;
	color: var(--bdw-ink, #16241F);
	font: inherit;
	cursor: pointer;
}

.bdw-jt-autocomplete__item:hover,
.bdw-jt-autocomplete__item:focus-visible {
	background: var(--bdw-sand, #F3E7D6);
}

.bdw-jt-autocomplete__empty {
	display: block;
	padding: 10px 14px;
	color: var(--bdw-muted, #68756F);
	font-size: 14px;
}

/* ---------- Turn order and teams ---------- */

.bdw-jt-order__teams {
	display: flex;
	align-items: end;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid var(--bdw-line, #DED4C6);
	padding-top: 16px;
	margin-top: 16px;
}

.bdw-jt-order__teams .bdw-jt-field {
	margin-bottom: 0;
	max-width: 120px;
}

.bdw-jt-order__result {
	min-height: 60px;
	margin-top: 18px;
}

.bdw-jt-order__result h3 {
	font-size: 17px;
	margin: 0 0 8px;
}

.bdw-jt-order__list {
	margin: 0 0 8px;
	padding-left: 22px;
	font-size: 18px;
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
}

.bdw-jt-order__list li {
	margin: 4px 0;
}

.bdw-jt-order__first,
.bdw-jt-order__teaser {
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--bdw-heading, #0A3B31);
}

.bdw-jt-order__teaser {
	color: var(--bdw-muted, #68756F);
}

.bdw-jt-order__teams-result {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.bdw-jt-order__team {
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	padding: 12px 16px;
	background: var(--bdw-cream, #FFF6EA);
}

.bdw-jt-order__team h4 {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--bdw-accent, #177C63);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bdw-jt-order__team ul {
	margin: 0;
	padding-left: 18px;
}

/* ---------- Clock ---------- */

.bdw-jt-timer__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.bdw-jt-timer__settings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	align-items: end;
	margin-bottom: 18px;
}

.bdw-jt-timer__display {
	text-align: center;
	background: var(--bdw-green-900, #0A3B31);
	color: var(--bdw-on-dark, #FFF6EA);
	border-radius: var(--bdw-radius-lg, 20px);
	padding: 24px 20px;
	margin-bottom: 16px;
}

.bdw-jt-timer__who {
	margin: 0 0 4px;
	font-size: 15px;
	color: var(--bdw-on-dark-soft, #C6DED7);
	min-height: 1.2em;
}

.bdw-jt-timer__time {
	margin: 0;
	font-family: var(--bdw-font-mono, monospace);
	font-size: clamp(48px, 16vw, 92px);
	line-height: 1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bdw-jt-timer__time.is-warning {
	color: var(--bdw-yellow-500, #F5B33C);
}

.bdw-jt-timer__time.is-over {
	color: var(--bdw-coral-100, #FFE2DA);
	animation: bdw-jt-flash 1s steps(1) infinite;
}

@keyframes bdw-jt-flash {
	50% {
		opacity: 0.35;
	}
}

.bdw-jt-timer__status {
	margin: 8px 0 0;
	color: var(--bdw-on-dark-soft, #C6DED7);
	min-height: 1.2em;
}

.bdw-jt-timer__totals h3 {
	font-size: 15px;
	margin: 0 0 8px;
}

.bdw-jt-timer__totals-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}

.bdw-jt-timer__totals-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 12px;
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-pill, 999px);
	font-variant-numeric: tabular-nums;
}

/* ---------- Picker ---------- */

.bdw-jt-picker__result {
	min-height: 80px;
	margin-top: 8px;
}

.bdw-jt-picker__card {
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	background: var(--bdw-cream, #FFF6EA);
	padding: 18px 20px;
	text-align: center;
}

.bdw-jt-picker__label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bdw-accent, #177C63);
}

.bdw-jt-picker__title {
	display: block;
	margin: 0;
	font-family: var(--bdw-font-display, "Fredoka", sans-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--bdw-heading, #0A3B31);
	text-decoration: none;
}

a.bdw-jt-picker__title:hover,
a.bdw-jt-picker__title:focus {
	text-decoration: underline;
}

.bdw-jt-picker__title--spinning {
	color: var(--bdw-muted, #68756F);
}

/* ---------- Saved setups strip ---------- */

.bdw-jt-presets {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	border-top: 1px solid var(--bdw-line, #DED4C6);
	margin-top: 18px;
	padding-top: 14px;
}

.bdw-jt-presets__note {
	margin: 0;
	font-size: 13px;
}

.bdw-jt-presets__load {
	margin: 0;
}

/* ---------- Game-page launcher ---------- */

.bdw-jt-launcher {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--bdw-line, #DED4C6);
}

.bdw-jt-launcher__dice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.bdw-jt-launcher__label {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent, #177C63);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bdw-jt-launcher__result {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	min-width: 54px;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.bdw-jt-tool {
		padding: 16px 14px;
	}

	.bdw-jt-roll__total-value {
		font-size: 42px;
	}

	.bdw-jt-score__board {
		grid-template-columns: 1fr;
	}

	/* Thumb targets: on a phone this is the control being pressed forty
	   times an evening, often by somebody not looking at the screen. */
	.bdw-jt-score__buttons .bdw-jc-button {
		min-width: 64px;
		padding: 10px 12px;
	}
}

/* ---------- Reduced motion ----------
   The animations are theatre over a result that is already decided, so they
   can all be dropped without losing anything. The JavaScript checks the same
   media query and skips the suspense loops entirely - this block covers the
   CSS half, including the flashing "time is up" clock, which is exactly the
   kind of thing this setting exists to prevent. */

@media (prefers-reduced-motion: reduce) {
	.bdw-jt-die.is-rolling,
	.bdw-jt-die[data-faces="4"].is-rolling,
	.bdw-jt-timer__time.is-over {
		animation: none;
	}

	.bdw-jt-tabs__tab,
	.bdw-jc-button {
		transition: none;
	}
}