@charset "UTF-8";

/* ===============================
   レースタイトル
================================ */
.result-title img {
	max-width: 640px;
	width: 100%;
	display: block;
	margin: 8px auto;
	transform: translateX(-8%);
}

/* ===============================
   レースヘッダー＋判定ボックス横並び
================================ */
.race-title-and-judge {
	position: relative;
	text-align: center;
}

.race-title-left {
	display: inline-block;
}

.race-judge-box {
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translateX(390px) translateY(-110%);
}

/* ===============================
   レース判定ボックス
================================ */
.race-judge-box {
	width: 104px;
	margin: 0 auto 13px;
	border-radius: 11px;
	border: 4px solid;
	background-color: #fff;
}

.race-judge-label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	font-size: 26px;
	font-weight: bold;
	border-radius: 8px;
}

/* 判定別カラー */
.race-judge-box.race-honmei {
	border-color: #2b67f4;
}

.race-judge-box.race-honmei .race-judge-label {
	background: #e3edff;
	color: #2b67f4;
}

.race-judge-box.race-chuana {
	border-color: #f0ad4e;
}

.race-judge-box.race-chuana .race-judge-label {
	background: #fff3cd;
	color: #8a5a00;
}

.race-judge-box.race-ana {
	border-color: mediumpurple;
}

.race-judge-box.race-ana .race-judge-label {
	background: #f2e9ff;
	color: darkmagenta;
}

.race-judge-box.race-miokuri {
	border-color: #6c757d;
}

.race-judge-box.race-miokuri .race-judge-label {
	background: #e9ecef;
	color: #444;
}

/* ===============================
   推奨1位
================================ */
.top-recommended {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 640px;
	margin: 4px auto;
	padding: 8px 19px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	border: 5px solid;
}

/* 推奨1位 BOX色と枠線（グループ別） */
.top-recommended.group-s {
	border-color: #ffb700;
	background: navajowhite;
}

.top-recommended.group-a {
	border-color: #d9534f;
	background: #ffd5ec;
}

.top-recommended.group-b {
	border-color: #17a2b8;
	background: #d9e5ff;
}

.top-recommended.group-c {
	border-color: #28a745;
	background: #cdf9dc;
}

.top-recommended.group-d {
	border-color: #6c757d;
	background: #e9ecef;
}

/* 馬番号BOX 1位 */
.waku-box.large {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	font-weight: bold;
	border-radius: 8px;
	border: 2px solid #333;
}

/* ===============================
   推奨2位以下
================================ */
.other-recommended {
	width: 90%;
	max-width: 512px;
	margin: 3px auto 16px;
}

.other-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	margin-bottom: 3px;
	background: #f9fafb;
	border-radius: 6px;
	border: 3px solid;
}

/* 推奨2位以下 BOX枠線（グループ別） */
.other-row.group-s {
	border-color: #ffb700;
	background: navajowhite;
}

.other-row.group-a {
	border-color: #d9534f;
	background: #ffd5ec;
}

.other-row.group-b {
	border-color: #17a2b8;
	background: #d9e5ff;
}

.other-row.group-c {
	border-color: #28a745;
	background: #cdf9dc;
}

.other-row.group-d {
	border-color: #6c757d;
	background: #e9ecef;
}

/* 馬番号BOX 2位以下 */
.waku-box.small {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 3px;
	border: 2px solid #333;
}

/* ===============================
   グループ丸（馬番号左側）
================================ */
.group-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1.2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Sグループ：金属ゴールド */
.top-recommended.group-s .group-circle,
.other-row.group-s .group-circle {
	background: linear-gradient(to bottom, #fff8d0, #ffb700);
	color: black;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* A/B/C/Dグループ丸 */
.top-recommended.group-a .group-circle,
.other-row.group-a .group-circle {
	background: #d9534f;
	color: #fff;
}

.top-recommended.group-b .group-circle,
.other-row.group-b .group-circle {
	background: #17a2b8;
	color: #fff;
}

.top-recommended.group-c .group-circle,
.other-row.group-c .group-circle {
	background: #28a745;
	color: #fff;
}

.top-recommended.group-d .group-circle,
.other-row.group-d .group-circle {
	background: #6c757d;
	color: #fff;
}

/* ===============================
   馬名・％
================================ */
.top-name {
	font-size: 1.9rem;
	font-weight: bold;
}

.top-percent {
	font-size: 2.4rem;
	font-weight: bold;
	color: #ff0000;
	margin-left: auto;
	text-shadow:
		-1.2px -1.2px 0 #fff,
		1.2px -1.2px 0 #fff,
		-1.2px 1.2px 0 #fff,
		1.2px 1.2px 0 #fff;
}

.horse-name {
	font-size: 1rem;
	font-weight: bold;
}

.other-percent {
	margin-left: auto;
	font-size: 1.2rem;
	font-weight: bold;
	color: #333;
}