/* ====== 全体 ====== */
	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: linear-gradient(180deg,#f7fbff 0%, #f0f6f9 100%);
		margin: 0;
		padding: 20px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		min-height: 100vh;
	}
	.hidden{ display: none!important; }

	/* トップに固定するエリア（スクロールで表示） */
	.top-fixed-area {
		position: fixed;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1400;
		display:flex;
		gap: 12px;
		align-items:center;
		padding: 6px 10px;
		border-radius: 8px;
		box-shadow: 0 8px 30px rgba(0,0,0,0.12);
		background: linear-gradient(180deg,#ffffff,#f6fbff);
		border: 1px solid rgba(13,70,130,0.06);
	}

/* small badge for points */
#top-points, #points-area { display:flex; align-items:center; gap:8px; }
.top-points { font-weight:700; color:#0b66b3; padding:6px 10px; border-radius:8px; background: linear-gradient(180deg,#eaf6ff,#d8efff); }
.top-timer { font-weight:700; color:#c92a2a; padding:6px 10px; border-radius:8px; background: linear-gradient(180deg,#fff4f4,#ffecec); }

/* main container */
	.game-container {
		width: 100%;
		max-width: 1100px;
		background-color: #ffffff;
		padding: 18px;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(20, 40, 80, 0.08);
		text-align: left;
		display: grid;
		grid-template-columns: 1fr 360px;
		gap: 18px;
	}
	h1 {
		grid-column: 1 / -1;
		color: #13324a;
		margin: 0 0 6px 0;
		font-size: 1.6rem;
	}

	.left-column { padding-right: 10px; }
	.right-column { padding-left: 10px; }

	.status-panel {
		background-color: #e9f2ff;
		padding: 12px;
		border-radius: 10px;
		margin-bottom: 12px;
		display:flex;
		align-items:center;
		justify-content:space-between;
	}
	#status { font-weight: 700; color: #0b66b3; }
	#timer { font-weight:600; color: #c92a2a; }

	/* points */
	.points-area { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
	.hilary { font-weight:800; color:#0b66b3; background:#fff; padding:6px 10px; border-radius:8px; border:1px solid rgba(11,102,179,0.08); }

	/* ====== レーストラック ====== */
	.race-area { margin-top: 8px; }
	.race-track {
		position: relative;
		width: 100%;
		height: 320px;
		/* ベースの芝色 */
		background: linear-gradient(180deg,#3bb54a,#2a8a36);
		border-radius: 10px;
		overflow: hidden;
		margin-top: 12px;
		border: 3px solid rgba(0,0,0,0.06);

		/* 10%ごとの線を作る（背景をアニメーションして動いている感） */
		background-image:
			linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
			linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
		background-size: 10% 100%, cover;
		animation: trackFlow 6s linear infinite;
	}

	@keyframes trackFlow {
		from { background-position: 0 0, 0 0; }
		to   { background-position: -10% 0, 0 0; }
	}

	.finish-line {
		position: absolute; right: 4%; top: 0; bottom: 0; width: 6px;
		background: repeating-linear-gradient(45deg,#fff 0 6px, rgba(0,0,0,0.25) 6px 12px);
		box-shadow: 0 0 12px rgba(255,255,255,0.18);
		z-index: 20;
	}

	.horse-icon {
		position: absolute;
		transform: translateX(-50%) translateY(-50%);
		width: 36px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background-color: #fff;
		border-radius: 50%;
		border: 2px solid rgba(0,0,0,0.12);
		font-weight: 800;
		font-size: 0.7em;
		transition: left 0.18s linear, top 0.18s linear, transform 0.18s ease;
		box-shadow: 0 6px 14px rgba(0,0,0,0.12);
		z-index: 30;
	}

	.horse-icon.crossed {
		left: calc(100% + 24px) !important;
		animation: crossPulse .9s ease forwards;
		box-shadow: 0 10px 28px rgba(255,240,100,0.18);
		transform: translateX(-50%) translateY(-50%) scale(1.06);
	}
	@keyframes crossPulse {
		from { transform: translateX(-50%) translateY(-50%) scale(1); }
		50% { transform: translateX(-50%) translateY(-50%) scale(1.18); }
		to { transform: translateX(-50%) translateY(-50%) scale(1.06); }
	}

	/* ベットした馬を強調するアニメ */
	.horse-icon.bet-highlight {
		animation: pulse 1s ease-in-out 0s 2;
		box-shadow: 0 6px 20px rgba(255, 200, 0, 0.45), 0 1px 0 rgba(0,0,0,0.08) inset;
		transform: translateX(-50%) translateY(-50%) scale(1.08);
	}
	@keyframes pulse {
		0% { transform: translateX(-50%) translateY(-50%) scale(1); }
		50% { transform: translateX(-50%) translateY(-50%) scale(1.14); }
		100% { transform: translateX(-50%) translateY(-50%) scale(1); }
	}

	/* ====== オッズテーブル ====== */
	.odds-section { margin-bottom: 14px; }
	.odds-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95em; }
	.odds-table th, .odds-table td { border: 1px solid #e6eef6; padding: 8px; text-align: center; }
	.odds-table th { background-color: #f5fbff; color: #13324a; }
	.odds-table tr:nth-child(even) { background-color: #fbfeff; }

	.small { font-size: 0.9em; color: #33475b; }

	/* ハイライト用バッジ */
	.badge { display:inline-block; padding:2px 6px; border-radius:999px; font-weight:700; font-size:0.8em; }
	.gold { background: linear-gradient(180deg,#ffd24d,#ffb300); color:#2b1700; }
	.silver { background: linear-gradient(180deg,#e9eef6,#cbd6e6); color:#112233; }
	.bronze { background: linear-gradient(180deg,#ffd7b8,#ff9f6b); color:#3b1700; }

	/* ベット入力周り */
	.bet-controls { display:flex; gap:8px; align-items:center; justify-content:flex-start; }
	.bet-input { width:72px; padding:5px 7px; border-radius:6px; border:1px solid #ccdbe8; text-align:right; }
	.amount-buttons { display:flex; gap:6px; }
	.amount-btn { padding:6px 10px; border-radius:6px; border:none; background:#0b66b3; color:#fff; cursor:pointer; font-weight:700; }
	.amount-btn:hover { filter:brightness(0.95); }

	.bet-button { background-color: #ff7f00; border: none; padding: 8px 12px; border-radius: 8px; color: white; cursor: pointer; transition: transform .08s; font-weight:800; }
	.bet-button:active { transform: translateY(1px) scale(0.995); }

	/* 右サイド: ベット履歴など */
	.panel { background:#fff; border-radius:10px; padding:12px; border:1px solid #e6eef6; }
	.panel h3 { margin:0 0 8px 0; font-size:1.05em; }

	.bet-list { max-height: 320px; overflow:auto; font-size:0.95em; }
	.bet-item { display:flex; justify-content:space-between; padding:8px; border-radius:8px; margin-bottom:8px; background: linear-gradient(180deg,#fff,#fbfdff); border:1px solid #eef6fb; }
	.bet-item .meta { color:#244b6b; font-weight:700; }
	.bet-item .small { color:#657b91; }

	/* トースト */
	.toast { position:fixed; right:24px; bottom:24px; background:linear-gradient(180deg,#0b66b3,#084f86); color:#fff; padding:10px 14px; border-radius:10px; box-shadow:0 8px 24px rgba(3,33,68,0.25); transform:translateY(40px); opacity:0; transition:all .45s cubic-bezier(.2,.9,.3,1); z-index:999; }
	.toast.show { transform:translateY(0); opacity:1; }

	/* レイアウト調整（単勝リストや馬連グリッド） */
	.horse-badge {
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:36px;
		height:36px;
		border-radius:50%;
		font-weight:900;
		color: #111;
		margin-right:8px;
		border: 2px solid rgba(0,0,0,0.06);
		box-shadow: 0 4px 8px rgba(0,0,0,0.06) inset;
	}

	/* 馬連グリッド */
	.quinella-grid {
		width:100%;
		border-collapse: collapse;
		margin-top:8px;
		font-size:0.85em;
	}
	.quinella-grid th, .quinella-grid td {
		border:1px solid #e6eef6;
		padding:6px;
		text-align:center;
		vertical-align:middle;
	}
	.quinella-cell-btn {
		padding:6px 8px;
		border-radius:6px;
		border:none;
		background:#0b66b3;
		color:white;
		font-weight:700;
		cursor:pointer;
	}
	.quinella-cell-btn:disabled { background:#ddd; cursor:not-allowed; color:#666; }

	/* modal */
	.modal-backdrop {
		position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:1200;
	}
	.modal {
		background:#fff; padding:16px; border-radius:12px; width:360px; max-width:90%;
		box-shadow:0 12px 40px rgba(10,30,60,0.25);
	}
	.modal h4 { margin:0 0 8px 0; }
	.modal .modal-controls { display:flex; gap:8px; align-items:center; justify-content:center; margin:12px 0; }
	.modal .step-btn { padding:8px 12px; border-radius:8px; border:none; background:#f0f4f8; cursor:pointer; font-weight:700; }
	.modal .confirm-btn { padding:8px 12px; border-radius:8px; border:none; background:#4caf50; color:white; cursor:pointer; font-weight:800; }
	.modal .cancel-btn { padding:8px 12px; border-radius:8px; border:1px solid #e6eef6; background:#fff; cursor:pointer; font-weight:700; }

	/* payout modal 特別装飾 */
	.payout-modal { width:420px; text-align:center; }
	.payout-modal .payout-body { font-size:1.1rem; margin-top:12px; padding:12px 8px; }
	.payout-modal .big-win { font-size:2.2rem; color:#ff9800; font-weight:900; }
	.payout-modal .no-win { font-size:1.3rem; color:#6d6d6d; }

	/* レスポンシブ */
	@media (max-width: 980px) {
		.game-container { grid-template-columns: 1fr; }
		.right-column { order: 2; }
		.top-fixed-area { left: 12px; transform: none; }
	}

	#displayname-input{
		width: 60%;
		height: 40%;
	}

       /* 馬連セル内のラベルとオッズバッジ */
.quinella-cell-btn { position: relative; padding: 8px 6px; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; min-width:72px; }
.quinella-cell-btn .quinella-label { font-weight:800; font-size:0.95em; }
.quinella-cell-btn .odds-badge { position: absolute; right:6px; bottom:6px; background: rgba(255,255,255,0.12); padding:2px 6px; border-radius:6px; font-size:0.75em; font-weight:700; backdrop-filter: blur(2px); }

/* ユーザーがベット済みセルの強調 */
.quinella-cell-btn.user-bet-cell {
	box-shadow: 0 6px 16px rgba(255,200,0,0.22), 0 1px 0 rgba(0,0,0,0.06) inset;
	transform: translateY(-2px);
	border: 2px solid rgba(255,200,0,0.22);
}

/* 凡例 */
#quinella-legend { margin-top: 8px; color: #233d52; font-size: 0.9em; }