/*
 * Layout is width-based (the canvas scales to its container via CSS, with a
 * fixed internal aspect ratio) rather than a fixed wide shot - this is what
 * lets the same markup work in both landscape and portrait on mobile with no
 * rotation prompt, per the camera/view requirement.
 */

.swim-game-app {
	max-width: 800px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Holds just the canvas plus its absolutely-positioned overlay and mute
 * button - nothing here contributes flow height beyond the canvas itself, so
 * the overlay's `inset: 0` always matches the canvas box exactly, even while
 * a taller results/leaderboard/career panel is open below it as a sibling.
 */
.swim-game-stage {
	position: relative;
}

.swim-game-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 800 / 300;
	background: #0b3d5c;
	border-radius: 6px;
	touch-action: manipulation; /* avoid double-tap zoom / scroll interfering with tap input */
}

.swim-game-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
	text-align: center;
	padding: 8px;
}

.swim-game-stroke-select-heading {
	pointer-events: none;
	margin: 0;
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.swim-game-stroke-select {
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.swim-game-start-btn {
	pointer-events: auto;
	font-size: 1rem;
	padding: 0.75em 1.25em;
	border: none;
	border-radius: 6px;
	background: #ffd93d;
	color: #0b3d5c;
	font-weight: 700;
	cursor: pointer;
	max-width: 80%;
}

.swim-game-start-btn:hover,
.swim-game-start-btn:focus-visible {
	background: #ffe873;
}

.swim-game-stroke-btn {
	border: 3px solid transparent;
}

.swim-game-mute-btn {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	font-size: 0.8rem;
	padding: 0.4em 0.8em;
	border: none;
	border-radius: 4px;
	background: rgba(11, 61, 92, 0.75);
	color: #ffffff;
	cursor: pointer;
}

.swim-game-mute-btn--muted {
	background: rgba(163, 74, 0, 0.85);
}

.swim-game-results-place {
	font-weight: 700;
	margin: 0 0 8px;
}

.swim-game-results-save-note {
	margin: 0 0 12px;
	font-size: 0.85rem;
	font-style: italic;
	color: #55708a;
}

.swim-game-account-bar {
	font-size: 0.8rem;
	padding: 4px 10px 4px 34px;
	color: #ffffff;
	background: rgba(11, 61, 92, 0.55);
	border-radius: 4px 4px 0 0;
}

.swim-game-account-bar a {
	color: #ffd93d;
}

/* Phase 6: the manual language override control - sits right below the
   account bar, styled to match it (same font size/background family) so the
   two read as one small header rather than two unrelated bars. */
.swim-game-language-picker {
	font-size: 0.8rem;
	padding: 4px 10px;
	color: #ffffff;
	background: rgba(11, 61, 92, 0.4);
}

.swim-game-language-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.swim-game-language-select {
	font-size: 0.8rem;
	background: rgba(255, 255, 255, 0.9);
	color: #0b3d5c;
	border: none;
	border-radius: 3px;
	padding: 2px 4px;
}

.swim-game-results {
	margin-top: 12px;
	padding: 16px;
	border-radius: 6px;
	background: #f4f8fb;
	color: #0b3d5c;
}

.swim-game-results--hidden {
	display: none;
}

.swim-game-results-title {
	margin: 0 0 4px;
}

.swim-game-results-time {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.swim-game-results-note {
	margin: 0 0 8px;
	color: #a34a00;
}

.swim-game-splits {
	list-style: none;
	display: flex;
	gap: 16px;
	padding: 0;
	margin: 0 0 8px;
	flex-wrap: wrap;
}

.swim-game-results-stats {
	margin: 0 0 8px;
	font-size: 0.9rem;
}

.swim-game-again-btn {
	font-size: 1rem;
	padding: 0.6em 1.1em;
	border: none;
	border-radius: 6px;
	background: #3ddc84;
	color: #04331b;
	font-weight: 700;
	cursor: pointer;
}

.swim-game-again-btn:hover,
.swim-game-again-btn:focus-visible {
	background: #63e79e;
}

.swim-game-leaderboard-toggle {
	pointer-events: auto;
	font-size: 0.85rem;
	padding: 0.5em 1em;
	border: 2px solid #ffffff;
	border-radius: 6px;
	background: rgba(11, 61, 92, 0.55);
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

.swim-game-leaderboard-toggle:hover,
.swim-game-leaderboard-toggle:focus-visible {
	background: rgba(11, 61, 92, 0.8);
}

.swim-game-leaderboard {
	margin-top: 12px;
	padding: 16px;
	border-radius: 6px;
	background: #f4f8fb;
	color: #0b3d5c;
}

.swim-game-leaderboard--hidden {
	display: none;
}

.swim-game-leaderboard-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.swim-game-leaderboard-controls select,
.swim-game-leaderboard-country {
	font-size: 0.85rem;
	padding: 0.35em 0.5em;
	border: 1px solid #b7c8d6;
	border-radius: 4px;
	background: #ffffff;
	color: #0b3d5c;
}

.swim-game-leaderboard-country {
	width: 4.5em;
	text-transform: uppercase;
}

.swim-game-leaderboard-mine-label {
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.swim-game-leaderboard-close {
	margin-left: auto;
	font-size: 0.8rem;
	padding: 0.4em 0.8em;
	border: none;
	border-radius: 4px;
	background: #d9e4ec;
	color: #0b3d5c;
	cursor: pointer;
}

.swim-game-leaderboard-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.swim-game-leaderboard-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid #d9e4ec;
	font-size: 0.9rem;
}

.swim-game-lb-rank {
	font-weight: 700;
	min-width: 2.2em;
}

.swim-game-lb-user {
	flex: 1;
	text-align: left;
}

.swim-game-lb-country {
	font-size: 0.75rem;
	color: #55708a;
}

.swim-game-lb-time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.swim-game-lb-pb {
	font-size: 0.7rem;
	font-weight: 700;
	color: #04331b;
	background: #3ddc84;
	border-radius: 3px;
	padding: 0.1em 0.4em;
}

.swim-game-lb-date {
	font-size: 0.75rem;
	color: #55708a;
	margin-left: auto;
}

.swim-game-leaderboard-empty,
.swim-game-leaderboard-reset {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: #55708a;
}

.swim-game-share-btn {
	margin-top: 4px;
	font-size: 0.9rem;
	padding: 0.55em 1em;
	border: none;
	border-radius: 6px;
	background: #3ddc84;
	color: #04331b;
	font-weight: 700;
	cursor: pointer;
}

.swim-game-share-btn:hover,
.swim-game-share-btn:focus-visible {
	background: #63e79e;
}

.swim-game-share-box {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.swim-game-share-link {
	font-size: 0.85rem;
	padding: 0.5em 0.6em;
	border: 1px solid #b7c8d6;
	border-radius: 4px;
	background: #ffffff;
	color: #0b3d5c;
}

.swim-game-share-image {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid #d9e4ec;
}

.swim-game-shared-card {
	max-width: 800px;
	margin: 0 auto 12px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #f4f8fb;
	color: #0b3d5c;
	text-align: center;
}

.swim-game-shared-card-heading {
	margin: 0 0 8px;
	font-weight: 700;
}

.swim-game-shared-card-image {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.swim-game-career {
	margin-top: 12px;
	padding: 16px;
	border-radius: 6px;
	background: #f4f8fb;
	color: #0b3d5c;
}

.swim-game-career--hidden {
	display: none;
}

.swim-game-career-message {
	margin: 0 0 8px;
	font-size: 0.9rem;
}

.swim-game-career-login-link {
	display: inline-block;
	font-size: 0.85rem;
	color: #0b3d5c;
	font-weight: 700;
}

.swim-game-career-heading {
	margin: 0 0 10px;
}

.swim-game-career-field {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 10px;
}

.swim-game-career-field input {
	margin-top: 4px;
	width: 100%;
	max-width: 240px;
	font-size: 0.9rem;
	padding: 0.4em 0.5em;
	border: 1px solid #b7c8d6;
	border-radius: 4px;
	box-sizing: border-box;
}

.swim-game-career-field-label {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 700;
}

.swim-game-designer {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 12px;
	align-items: flex-start;
}

.swim-game-designer-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.swim-game-designer-canvas {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: #d7eef8;
	border: 3px solid #3ddc84;
}

.swim-game-designer-random {
	font-size: 0.8rem;
	padding: 0.35em 0.8em;
	border: 1px solid #b7c8d6;
	border-radius: 999px;
	background: #ffffff;
	cursor: pointer;
}

.swim-game-designer-options {
	flex: 1 1 260px;
	min-width: 0;
}

.swim-game-designer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px;
}

.swim-game-designer-row--muted {
	opacity: 0.5;
}

.swim-game-designer-label {
	flex: 0 0 100%;
	font-size: 0.78rem;
	font-weight: 700;
	color: #33536b;
}

.swim-game-designer-choice {
	cursor: pointer;
	border: 2px solid #b7c8d6;
	background: #ffffff;
	color: #0b3d5c;
	font: inherit;
}

.swim-game-designer-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	padding: 0;
	font-size: 0.8rem;
	line-height: 1;
}

.swim-game-designer-text {
	font-size: 0.78rem;
	padding: 0.25em 0.65em;
	border-radius: 999px;
}

.swim-game-designer-choice--selected {
	border-color: #0b3d5c;
	box-shadow: 0 0 0 2px #3ddc84;
}

.swim-game-designer-choice--locked {
	cursor: not-allowed;
	opacity: 0.55;
}

.swim-game-career-unlock-note {
	margin: 6px 0;
	font-weight: 700;
	color: #1a7f4b;
}

.swim-game-career-submit,
.swim-game-career-edit-btn {
	font-size: 0.9rem;
	padding: 0.55em 1em;
	border: none;
	border-radius: 6px;
	background: #3ddc84;
	color: #04331b;
	font-weight: 700;
	cursor: pointer;
	margin-right: 8px;
}

.swim-game-career-submit:hover,
.swim-game-career-edit-btn:hover {
	background: #63e79e;
}

.swim-game-career-cancel {
	font-size: 0.9rem;
	padding: 0.55em 1em;
	border: none;
	border-radius: 6px;
	background: #d9e4ec;
	color: #0b3d5c;
	cursor: pointer;
}

.swim-game-career-error {
	margin: 8px 0 0;
	font-size: 0.8rem;
	color: #a34a00;
}

.swim-game-career-error:empty {
	display: none;
}

.swim-game-career-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.swim-game-career-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.swim-game-career-header-text {
	flex: 1;
	min-width: 0;
}

.swim-game-career-name-display {
	margin: 0;
	font-weight: 700;
}

.swim-game-career-level-display {
	margin: 2px 0 0;
	font-size: 0.85rem;
}

.swim-game-career-wallet {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: #55708a;
}

.swim-game-career-edit-btn {
	margin-right: 0;
	flex-shrink: 0;
	font-size: 0.8rem;
	padding: 0.4em 0.8em;
}

.swim-game-career-stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.swim-game-stat-row {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	align-items: center;
	gap: 8px;
}

.swim-game-stat-label {
	font-size: 0.85rem;
	font-weight: 700;
}

.swim-game-stat-bar {
	height: 10px;
	border-radius: 5px;
	background: #d9e4ec;
	overflow: hidden;
}

.swim-game-stat-bar-fill {
	height: 100%;
	border-radius: 5px;
}

.swim-game-stat-value {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.swim-game-stat-pb {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	color: #55708a;
}

.swim-game-stat-train {
	grid-column: 1 / -1;
	display: flex;
	gap: 6px;
}

.swim-game-train-btn {
	font-size: 0.75rem;
	padding: 0.35em 0.6em;
	border: 1px solid #b7c8d6;
	border-radius: 4px;
	background: #ffffff;
	color: #0b3d5c;
	cursor: pointer;
}

.swim-game-train-btn:hover {
	background: #eef4f8;
}

.swim-game-train-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.swim-game-stat-train-note {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.75rem;
	color: #a34a00;
}

/* Portrait phones: keep controls comfortably tappable without shrinking the canvas further. */
@media ( max-width: 480px ) {
	.swim-game-start-btn {
		font-size: 0.95rem;
	}
	.swim-game-splits {
		gap: 10px;
		font-size: 0.9rem;
	}
}

/* ---- Phase 9: "Delete my game data" (GDPR) at the foot of the career dashboard ---- */

.swim-game-career-delete {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #d9e4ec;
}

/* Deliberately quiet until clicked - a text-style button, not a big red one
   competing with Train for attention. */
.swim-game-career-delete-btn {
	font-size: 0.75rem;
	padding: 0;
	border: none;
	background: none;
	color: #a3281e;
	text-decoration: underline;
	cursor: pointer;
}

.swim-game-career-delete-warning {
	margin: 0 0 8px;
	font-size: 0.8rem;
	color: #0b3d5c;
}

.swim-game-career-delete-confirm {
	font-size: 0.85rem;
	padding: 0.5em 0.9em;
	border: none;
	border-radius: 6px;
	background: #c0392b;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	margin-right: 8px;
}

.swim-game-career-delete-confirm:hover {
	background: #a93226;
}

.swim-game-career-delete-cancel {
	font-size: 0.85rem;
	padding: 0.5em 0.9em;
	border: none;
	border-radius: 6px;
	background: #d9e4ec;
	color: #0b3d5c;
	cursor: pointer;
}

.swim-game-career-delete-confirm:disabled,
.swim-game-career-delete-cancel:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ---- Phase 12: goals ---- */

.swim-game-daily-btn {
	pointer-events: auto;
	font-size: 0.9rem;
	padding: 0.5em 1.1em;
	border: 2px solid #ffd93d;
	border-radius: 999px;
	background: #ffd93d;
	color: #3b2a00;
	font-weight: 700;
	cursor: pointer;
}

.swim-game-daily-btn:hover,
.swim-game-daily-btn:focus-visible {
	background: #ffe57a;
}

.swim-game-stat-league {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	font-weight: 700;
	color: #1a5f86;
}

.swim-game-league-4 {
	color: #a07800;
}

.swim-game-career-subheading {
	margin: 16px 0 6px;
	font-size: 0.95rem;
}

.swim-game-career-medals {
	margin: 0 0 4px;
	font-size: 1rem;
}

.swim-game-career-medals span {
	margin-right: 10px;
}

.swim-game-career-achievements-count {
	margin: 0 0 6px;
	font-size: 0.8rem;
	color: #55708a;
}

.swim-game-achievements {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 12px;
	font-size: 0.8rem;
}

.swim-game-achievement {
	color: #7890a4;
}

.swim-game-achievement--done {
	color: #0b3d5c;
}

.swim-game-achievement--done .swim-game-achievement-mark {
	color: #1a7f4b;
	font-weight: 700;
}

.swim-game-achievement-desc {
	display: block;
	padding-left: 1.2em;
	font-size: 0.72rem;
}

.swim-game-achievement-coins {
	font-weight: 700;
	color: #a07800;
}

.swim-game-shop-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.swim-game-shop-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 112px;
	padding: 8px 6px;
	border: 1px solid #c9d8e4;
	border-radius: 8px;
	background: #ffffff;
	text-align: center;
	font-size: 0.75rem;
}

.swim-game-shop-item canvas {
	border-radius: 50%;
	background: #d7eef8;
}

.swim-game-shop-item--owned {
	border-color: #3ddc84;
}

.swim-game-shop-buy {
	font-size: 0.72rem;
	padding: 0.35em 0.6em;
	border: none;
	border-radius: 999px;
	background: #ffd93d;
	color: #3b2a00;
	font-weight: 700;
	cursor: pointer;
}

.swim-game-shop-buy:disabled {
	background: #e3e9ee;
	color: #7890a4;
	cursor: default;
}

.swim-game-shop-note {
	margin: 0 0 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #1a7f4b;
}

.swim-game-results-medal {
	margin: 0;
	font-weight: 700;
}

.swim-game-medal {
	font-size: 1.6rem;
	vertical-align: middle;
}

.swim-game-results-league {
	margin: 4px 0;
	font-size: 0.9rem;
	color: #1a5f86;
}

.swim-game-results-league--promoted {
	font-weight: 700;
	color: #1a7f4b;
}

.swim-game-results-achievements {
	list-style: none;
	margin: 4px 0;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #a07800;
}

.swim-game-results-ghost {
	margin: 4px 0;
	font-size: 0.85rem;
}

.swim-game-daily-heading {
	margin: 10px 0 4px;
	font-weight: 700;
}

.swim-game-daily-mine {
	margin: 4px 0;
	font-weight: 700;
}

.swim-game-medal-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	font-size: 0.8em;
	font-weight: 800;
	color: #3b2a00;
	vertical-align: middle;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.swim-game-medal-disc--1 {
	background: linear-gradient(135deg, #fff1a8, #e0b400);
}

.swim-game-medal-disc--2 {
	background: linear-gradient(135deg, #ffffff, #b8c2cc);
}

.swim-game-medal-disc--3 {
	background: linear-gradient(135deg, #f7c79a, #b8733b);
}

.swim-game-medal .swim-game-medal-disc {
	font-size: 1rem;
}

/* The Phase 10 hint and energy line had no size of their own and took the theme's paragraph size. */
.swim-game-career-hint,
.swim-game-career-energy-next {
	margin: 4px 0;
	font-size: 0.8rem;
	color: #33536b;
}

.swim-game-stat-row {
	grid-template-columns: 110px 1fr auto;
}

.swim-game-designer-swatch.swim-game-designer-choice--locked {
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 0 3px, transparent 3px 7px) !important;
}

/* ---- Phase 13 ---- */

.swim-game-metronome-btn {
	left: auto;
	right: 8px;
}

.swim-game-distance-select {
	pointer-events: none;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.swim-game-distance-btn {
	pointer-events: auto;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.35em 0.9em;
	border: 2px solid #ffffff;
	border-radius: 999px;
	background: rgba(11, 61, 92, 0.55);
	color: #ffffff;
	cursor: pointer;
}

.swim-game-distance-btn--selected {
	background: #ffffff;
	color: #0b3d5c;
}

.swim-game-results-event {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: #55708a;
}

.swim-game-results-photo {
	margin: 4px 0;
	font-weight: 700;
	color: #8a5a00;
}

.swim-game-stage--racing .swim-game-metronome-btn {
	display: none;
}

.swim-game-menu-row {
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

/*
 * Phase 13: on phones the pool is only ~140 px tall, and the start menu
 * (heading, distance, four strokes, three buttons) overflowed it - the
 * buttons spilled over the account bar above and got cut off below. There,
 * the menu now sits under the pool instead of on top of it.
 */
@media (max-width: 700px) {
	.swim-game-overlay {
		position: static;
		padding: 10px 6px;
		gap: 8px;
		background: #0b3d5c;
		border-radius: 0 0 6px 6px;
	}

	.swim-game-overlay:empty {
		display: none;
	}

	.swim-game-stroke-select-heading {
		font-size: 0.95rem;
	}

	.swim-game-start-btn {
		font-size: 0.9rem;
		padding: 0.55em 0.9em;
	}

	.swim-game-stroke-select {
		gap: 6px;
	}

	.swim-game-mute-btn {
		top: 4px;
		left: 4px;
		font-size: 0.65rem;
		padding: 0.25em 0.5em;
	}

	.swim-game-metronome-btn {
		left: auto;
		right: 4px;
	}
}

/* ---- Phase 16: career tabs, medal collection, tiers, badges ---- */
.swim-game-career-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: -4px 0 12px;
	border-bottom: 2px solid #cfdde8;
}

.swim-game-career-tab {
	appearance: none;
	margin: 0 0 -2px;
	padding: 8px 12px;
	border: 2px solid transparent;
	border-bottom-color: #cfdde8;
	border-radius: 6px 6px 0 0;
	background: transparent;
	color: #33536b;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.swim-game-career-tab:hover {
	background: #e6eff6;
}

.swim-game-career-tab:focus-visible {
	outline: 2px solid #1a5f86;
	outline-offset: 1px;
}

.swim-game-career-tab--active {
	border-color: #cfdde8;
	border-bottom-color: #f4f8fb;
	background: #f4f8fb;
	color: #0b3d5c;
}

.swim-game-career-panel[hidden] {
	display: none;
}

.swim-game-career-minor {
	margin: 14px 0 6px;
	font-size: 0.85rem;
	color: #1a5f86;
}

.swim-game-career-note {
	margin: 2px 0 0;
	font-size: 0.7rem;
	color: #55708a;
}

.swim-game-medal-grid {
	width: 100%;
	max-width: 520px;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.swim-game-medal-grid th,
.swim-game-medal-grid td {
	padding: 4px 6px;
	border-bottom: 1px solid #dfe8ef;
	text-align: left;
	white-space: nowrap;
}

.swim-game-medal-grid thead th {
	color: #55708a;
	font-weight: 700;
}

.swim-game-medal-count {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 6px;
	font-weight: 700;
}

.swim-game-medal-count .swim-game-medal-disc {
	width: 1.2em;
	height: 1.2em;
	font-size: 0.65em;
}

.swim-game-medal-count--zero {
	opacity: 0.35;
}

.swim-game-special {
	margin: 4px 0;
	font-size: 0.8rem;
}

.swim-game-league-medal {
	display: inline-block;
	margin: 2px 2px 2px 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e3ebf1;
	color: #7890a4;
	font-size: 0.72rem;
	font-weight: 700;
}

.swim-game-league-medal--won {
	background: linear-gradient(135deg, #fff1a8, #e0b400);
	color: #3b2a00;
}

.swim-game-ach-family .swim-game-career-minor {
	margin-top: 10px;
}

.swim-game-tier {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 4px;
	border-radius: 50%;
	vertical-align: baseline;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.swim-game-tier--bronze {
	background: #c07a3d;
}

.swim-game-tier--silver {
	background: #aab5bf;
}

.swim-game-tier--gold {
	background: #e0b400;
}

.swim-game-tier--platinum {
	background: linear-gradient(135deg, #e8f7ff, #7fb6d6);
}

.swim-game-achievement-progress {
	display: inline-block;
	margin-left: 1.2em;
	font-size: 0.72rem;
	color: #1a5f86;
}

.swim-game-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 6px 12px;
	font-size: 0.8rem;
}

.swim-game-badge {
	padding: 6px 8px;
	border: 1px dashed #b7c9d6;
	border-radius: 6px;
	color: #7890a4;
}

.swim-game-badge--done {
	border-style: solid;
	border-color: #1a7f4b;
	background: #eaf7ef;
	color: #0b3d5c;
}

.swim-game-badge .swim-game-achievement-desc {
	padding-left: 0;
}

.swim-game-results-special,
.swim-game-results-badge {
	font-weight: 700;
}

@media (max-width: 480px) {
	.swim-game-career-tab {
		flex: 1 1 40%;
		padding: 8px 6px;
		font-size: 0.8rem;
		text-align: center;
	}

	.swim-game-medal-grid th,
	.swim-game-medal-grid td {
		padding: 4px 2px;
	}

	.swim-game-medal-count {
		margin-right: 3px;
	}
}

/* ---- Phase 17: performance gear ---- */
.swim-game-gear {
	margin-bottom: 8px;
}

.swim-game-gear-active {
	margin: 2px 0 8px;
	font-size: 0.8rem;
	font-weight: 700;
}

.swim-game-gear-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 10px;
}

.swim-game-gear-slot-label {
	flex: 0 0 100%;
	font-size: 0.75rem;
	font-weight: 700;
	color: #55708a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.swim-game-gear-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 160px;
	padding: 8px;
	border: 1px solid #cfdde8;
	border-radius: 6px;
	background: #ffffff;
	font-size: 0.8rem;
}

.swim-game-gear-item--owned {
	background: #eef6fb;
}

.swim-game-gear-item--worn {
	border-color: #1a7f4b;
	box-shadow: inset 0 0 0 1px #1a7f4b;
}

.swim-game-gear-tier {
	font-size: 0.7rem;
	color: #55708a;
}

.swim-game-gear-effect {
	font-weight: 700;
	color: #1a5f86;
}

.swim-game-gear-buy {
	margin-top: 4px;
}

@media (max-width: 480px) {
	.swim-game-gear-item {
		width: calc(50% - 4px);
		box-sizing: border-box;
	}
}

/* ---- Phase 18: wallet bar, maxed training, achievements filter, today's challenge, guide ---- */
.swim-game-career-walletbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	margin: -4px 0 10px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #e3eef6;
	font-size: 0.85rem;
	font-weight: 700;
	color: #0b3d5c;
}

.swim-game-career-walletbar .swim-game-career-energy-next {
	margin: 0;
	font-weight: 400;
}

.swim-game-train-btn--maxed {
	opacity: 0.7;
	cursor: default;
}

.swim-game-hide-done {
	margin-left: 10px;
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
}

.swim-game-ach-list--hide-done .swim-game-achievement--done,
.swim-game-ach-list--hide-done .swim-game-ach-family--done {
	display: none;
}

.swim-game-today[hidden],
.swim-game-guide[hidden] {
	display: none;
}

.swim-game-today {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #fff8d6;
	border: 1px solid #f1d56a;
	color: #0b3d5c;
}

.swim-game-today-heading {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a5a00;
}

.swim-game-today-beat {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 800;
}

.swim-game-today-empty {
	margin: 0 0 8px;
	font-weight: 700;
}

.swim-game-today-list {
	margin: 0 0 6px;
}

.swim-game-today-players {
	margin: 0 0 6px;
	font-size: 0.75rem;
	color: #55708a;
}

.swim-game-today-start {
	appearance: none;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #ffd93d;
	color: #3b2a00;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.swim-game-today-start:hover,
.swim-game-today-start:focus-visible {
	background: #ffe57a;
}

.swim-game-today-guest {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.75rem;
	color: #55708a;
}

.swim-game-guide {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #e8f6ff;
	border: 1px solid #b6dcf2;
	color: #0b3d5c;
}

.swim-game-guide-heading {
	margin: 0 0 8px;
	font-weight: 800;
}

.swim-game-guide-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.swim-game-guide-step {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.swim-game-guide-visual {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 6px;
	background: #0b3d5c;
	position: relative;
}

/* 1: dots moving to a white line */
.swim-game-guide-step--1 .swim-game-guide-visual {
	background:
		linear-gradient(#ffffff, #ffffff) 9px 5px / 2px 24px no-repeat,
		radial-gradient(circle, #ffffff 3px, transparent 4px) 16px 12px / 10px 10px no-repeat,
		#0b3d5c;
}

/* 2: the green Perfect band */
.swim-game-guide-step--2 .swim-game-guide-visual {
	background:
		linear-gradient(#3ddc84, #3ddc84) 11px 0 / 12px 100% no-repeat,
		linear-gradient(#ffd93d, #ffd93d) 5px 0 / 24px 100% no-repeat,
		#0b3d5c;
}

/* 3: the turn bar */
.swim-game-guide-step--3 .swim-game-guide-visual {
	background:
		linear-gradient(#ffffff, #ffffff) 8px 13px / 18px 4px no-repeat,
		linear-gradient(#3ddc84, #3ddc84) 12px 12px / 10px 10px no-repeat,
		linear-gradient(#ffd93d, #ffd93d) 12px 6px / 10px 22px no-repeat,
		linear-gradient(#ff5c5c, #ff5c5c) 12px 2px / 10px 30px no-repeat,
		#0b3d5c;
}

.swim-game-guide-ok {
	appearance: none;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: #1a5f86;
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 600px) {
	.swim-game-guide-steps {
		grid-template-columns: 1fr;
	}
}