/* ============================================================
   game1.css — 拖拉机游戏界面
   说明：牌面（makePoker 内联切图）、牌背（14.png）、背景（bg.png）
        均保持原设置不变。
   ============================================================ */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}
html, body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: black;
	touch-action: none;
	user-select: none;
}
li{ list-style: none; }

/* 背景（保持原设置：images/bg.png） */
.content{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	background: no-repeat url(../images/bg.png) center;
	background-size: cover;
	background-position: center center;
	z-index: 1;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	.content{ background-size: contain; background-position: center center; }
}

/* 牌背（保持原设置：images/14.png 切图） */
.back{
	width: 100px;
	height: 138px;
	background: url('../images/14.png') -100px -222px;
	position: absolute;
	box-shadow: 1px 1px 1px #487985;
	border-radius: 5px;
}

/* 手牌容器（牌面 li 由 game.js 生成，内联切图） */
.play_1, .play_2, .play_3, .play_4{
	position: relative;
}
.play_1 li, .play_2 li, .play_3 li, .play_4 li{
	position: absolute;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px #323232;
}
/* 选中上浮：上移量适中，选中牌停在”出牌”按钮下方，不遮挡牌堆/上方内容；黑边醒目 */
.play_4 li.select{
	transform: translateY(-20px);
	border: 3px solid #000;
	box-shadow: 0 6px 16px rgba(0,0,0,0.8);
	/* 不设 z-index，让右侧的牌按正常顺序叠在选中牌之上，保证右侧牌的点数花色可见 */
}
.play_4 li{ cursor: pointer; transition: transform 0.12s ease; }

/* 主牌符号（♥♦♣♠/无主）用红色显示 */
#zhuMark{
	color: #e74c3c;
	font-weight: bold;
}
/* 庄家标签用红字 */
.rank.banker{
	color: #ffd700 !important;
}
/* 主牌后的庄家方位用金黄色 */
#bankerDir{
	color: #ffd700;
	font-weight: bold;
}

/* 出牌区 */
.now_poker_1, .now_poker_2, .now_poker_3, .now_poker_4{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}
.now_poker_1 li, .now_poker_2 li, .now_poker_3 li, .now_poker_4 li{
	position: absolute;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px #323232;
}

/* ===== 四家布局 ===== */
/* 南家（底部，人控） */
.south-player{
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	z-index: 10;
}
.south-player .play_4{
	height: 250px;
	margin: 0 auto;
}
.south-player .rank{
	position: absolute;
	top: -64px;   /* 与出牌按钮、操作提示同一水平线 */
	left: calc(50% + 100px);  /* 避开居中的选择底牌按钮 */
	transform: none;
	font-size: 24px;
	font-weight: bold;
	line-height: 38px;   /* 与出牌按钮等高，纵向居中对齐 */
	color: #fff;
	display: none;
}
.south-player .clock{
	position: absolute;
	top: -40px;
	left: 0;
	width: 34px; height: 34px;
	line-height: 34px;
	background: #c0392b;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	font-size: 22px;
	display: none;
}
.south-player .play{
	position: absolute;
	top: -64px;   /* 上移，使选中牌（上浮 20px）不遮挡出牌按钮 */
	left: 50%;
	right: auto;
	transform: translateX(-50%); /* 出牌按钮居中 */
	width: 72px; height: 38px;
	font-size: 24px;
	font-weight: bold;
	color: #333;                /* 浅灰底上用深色文字 */
	background: #e6e6e6;        /* 浅灰色背景（亮主花色时文字颜色由 game.js 覆盖为红/黑） */
	border: 2px solid #9a9a9a;  /* 中性描边 */
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);  /* 底部投影增加立体感 */
	cursor: pointer;
	display: none;
	z-index: 30;
}
.south-player .play:hover{
	background: #f0f0f0;
	border-color: #b8b8b8;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
/* 北/西/东家的出牌按钮永远隐藏（只有南家人控需要出牌按钮） */
.north-player .play, .west-player .play, .east-player .play{
	display: none !important;
}
.south-player p{
	position: absolute;
	top: -76px;
	right: 0;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}

/* 北家（顶部）：北 队友 25 横排 */
.north-player{
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	z-index: 10;
}
.north-player .left_min{
	display: flex;
	align-items: flex-start;   /* 文字顶部对齐，与“级别”顶平 */
	justify-content: center;
	gap: 10px;
}
.north-player .play_2{
	width: 70px;
	height: 175px;
	margin: 0;
}
/* 北家方位字上移，顶与“级别”顶平 */
.north-player .play_2 .posmark{
	top: 0;
	transform: translateX(-50%);   /* 只水平居中，不再垂直居中 */
}
.north-player .rank{
	position: absolute;
	top: 107px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 21px;
	font-weight: bold;
	white-space: nowrap;
	display: none;
}
.north-player .clock{
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	line-height: 34px;
	background: #c0392b;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	font-size: 22px;
	display: none;
}
.north-player p{
	position: relative;
	margin: 0;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	white-space: nowrap;
}

/* 西家（左侧） */
.west-player{
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(calc(-50% - 10px));
	text-align: center;
	color: #fff;
	z-index: 10;
}
.west-player .play_1{
	width: 100px;
	height: 360px;
}
.west-player .rank{
	position: absolute;
	top: calc(50% - 60px);
	left: 0;
	width: 100px;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	display: none;
}
.west-player .clock{
	position: absolute;
	top: 34px;
	left: 0;
	width: 34px; height: 34px;
	line-height: 34px;
	background: #c0392b;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	font-size: 22px;
	display: none;
}
.west-player p{
	position: absolute;
	top: 205px;   /* 方块底部200px + 5px */
	left: 0;
	width: 100px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

/* 东家（右侧） */
.east-player{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(calc(-50% - 10px));
	text-align: center;
	color: #fff;
	z-index: 10;
}
.east-player .play_3{
	width: 100px;
	height: 360px;
}
.east-player .rank{
	position: absolute;
	top: calc(50% - 60px);
	left: 0;
	width: 100px;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	display: none;
}
.east-player .clock{
	position: absolute;
	top: 34px;
	left: 0;
	width: 34px; height: 34px;
	line-height: 34px;
	background: #c0392b;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	font-size: 22px;
	display: none;
}
.east-player p{
	position: absolute;
	top: 205px;   /* 方块底部200px + 5px */
	left: 0;
	width: 100px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

/* ===== 中间出牌区 ===== */
.mid{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.mid_top{
	position: relative;
	width: 460px;
	height: 300px;
}
.now_poker_1{ top: 160px; left: 0; }
.now_poker_2{ top: 50px; left: 230px; }
.now_poker_3{ top: 160px; right: 0; }
.now_poker_4{ bottom: 130px; left: 230px; }  /* 上移130px，手机/平板横屏均露出≥50% */
.now_poker_1 li, .now_poker_2 li, .now_poker_3 li, .now_poker_4 li{
	width: 100px; height: 138px;
}
/* 需求5：西/北/东 出的牌显示更明显（放大 + 高亮描边） */
.now_poker_1 li, .now_poker_2 li, .now_poker_3 li{
	transform: scale(1.3);
	transform-origin: center;
	box-shadow: 0 0 16px rgba(255,200,0,0.6), inset 0 0 0 2px #ffd700;
	z-index: 6;
}
/* 南家出牌同样压在底牌区(#bottomArea,z-index:5)之上，不被扣底牌挡住 */
.now_poker_4 li{
	z-index: 6;
}

/* 级别信息 */
.levelInfo{
	position: fixed;
	top: 8px;
	left: 12px;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	z-index: 100;
}

/* 结算提示框 */
#tishi{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 420px;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	background: rgba(0,0,0,0.92);
	color: #fff;
	padding: 12px 20px;
	border-radius: 12px;
	z-index: 1000;
	text-align: center;
	display: none;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
#tishi h6{
	font-size: 31px;
	line-height: 1.2;
	margin: 0 0 4px 0;
}
#tishi.banker-win{ border: 3px solid #3498db; }
#tishi.farmer-win{ border: 3px solid #27ae60; }

/* 出牌特效图 */
#images{
	position: absolute;
	top: 0; left: 0;
	width: 60%;
	height: auto;
	display: none;
	z-index: 2;
	pointer-events: none;
}

/* 需求3：其他家（北/西/东）不再显示牌背，用方位字（posmark）醒目标识 */
.play_1 .posmark, .play_2 .posmark, .play_3 .posmark{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.7);
	background: rgba(0,0,0,0.45);
	padding: 0;
	border-radius: 7px;
	letter-spacing: 2px;
	white-space: nowrap;
	z-index: 3;
	box-sizing: border-box;
}
/* 西/东方块上移40px，不被增高后的手牌遮挡 */
.west-player .posmark, .east-player .posmark{
	top: calc(50% - 40px);
}
/* 庄家方块加6px金边 */
.posmark.banker-frame{
	outline: 6px solid #ffd700;
	outline-offset: 0;
}
/* 提示文字加黑色描边，提高可读性 */
#hint{
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
		0 1px 0 #000, 0 -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}