/* 街机柜 - 完全自适应 */
.cabinet {
	background: #c28d4b;
	background: linear-gradient(165deg, #e6b073, #a06d36);
	border-radius: min(90px, 12vw) min(90px, 12vw) min(40px, 6vw) min(40px, 6vw);
	padding: 15px;
            /*padding: clamp(20px, 4vw, 40px);*/
            /*box-shadow: 0 40px 50px #000000e0, inset 0 -18px 0 #7b5126, inset 0 10px 30px #ffd58c;*/
	border: min(10px, 1.5vw) solid #c58a42;
	width: 100%;
	max-width: 1400px;
}

.glass {
	background: #192c38;
	border-radius: min(70px, 10vw) min(70px, 10vw) min(40px, 5vw) min(40px, 5vw);
            /*padding: clamp(15px, 3vw, 30px);*/
	padding: 15px;
            /*box-shadow: inset 0 0 0 min(10px, 1.5vw) #f8cf86, inset 0 0 80px #000, 0 22px 0 #7b5c31;*/
}

canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900/650;
  /* 稍微调高画布比例，给70px球更多空间 */
	border-radius: min(50px, 7vw);
	background: #17212b;
	box-shadow: inset 0 0 0 min(6px, 1vw) #ffdca8, inset 0 0 100px black;
            /*cursor: pointer;*/
}

        /* 按钮区域 */
.button-area {
	display: flex;
	justify-content: center;
            /*margin: clamp(20px, 4vw, 30px) 0 clamp(15px, 3vw, 25px) 0;*/
	margin: 20px 0 40px;
}

.draw-btn {
	background: #d63e2c;
	border: none;
	width: min(400px, 80%);
	height: clamp(80px, 15vw, 140px);
	border-radius: min(40px, 6vw);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.08s ease;
	font-family: inherit;
            /*letter-spacing: clamp(8px, 2vw, 16px);*/
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 clamp(10px, 3vw, 20px) 0 #862617, 0 10px 30px transparent;
	flex-direction: column;
	align-content: center;
	flex-wrap: nowrap;
}

.draw-btn:active {
	transform: translateY(clamp(6px, 2vw, 12px));
	box-shadow: 0 clamp(4px, 1.5vw, 8px) 0 #862617, 0 15px 30px  transparent;
}

.draw-btn:disabled {
	opacity: 0.5;
	transform: translateY(clamp(5px, 1.5vw, 10px));
	box-shadow: 0 clamp(5px, 1.5vw, 10px) 0 #6b2d1f;
	pointer-events: none;
}

        /* 历史记录列表 */
.history-section {
	background: #1e2a36;
	border-radius: min(40px, 6vw);
	padding: 15px;
            /*padding: clamp(15px, 3vw, 25px);*/
	border: min(4px, 0.8vw) solid #f3c26b;
            /*box-shadow: inset 0 -6px 0 #5f4a2c, 0 clamp(8px, 2vw, 12px) 0 #3d2e18;*/
            /*max-height: 300px;*/
	overflow-y: auto;
}

.history-title {
	color: #ffd966;
	font-size: clamp(1.2rem, 4vw, 1.8rem);
	margin-bottom: clamp(10px, 2vw, 15px);
	letter-spacing: clamp(2px, 1vw, 4px);
	text-shadow: 0 2px 0 #6b4f1a;
	display: flex;
	align-items: center;
	gap: clamp(8px, 2vw, 15px);
	flex-wrap: wrap;
}

.history-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.5vw, 12px);
}

.history-item {
	background: #0f1a24;
	border-radius: min(50px, 6vw);
	padding: clamp(10px, 2vw, 15px) clamp(15px, 3vw, 25px);
	font-size: clamp(1.2rem, 3.5vw, 1.8rem);
	color: #ffeab3;
	border-left: min(8px, 1.5vw) solid #f59e0b;
	box-shadow: 0 4px 0 #00000060;
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 20px);
	word-break: break-word;
}

.history-number {
	background: #f59e0b;
	color: #1a1108;
	width: clamp(35px, 8vw, 50px);
	height: clamp(35px, 8vw, 50px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.2rem, 4vw, 1.8rem);
	font-weight: 800;
	box-shadow: 0 clamp(2px, 1vw, 4px) 0 #9e6512;
	flex-shrink: 0;
}

.history-item span {
	flex: 1;
	line-height: 1.4;
}

        /* 自定义滚动条 */
.history-section::-webkit-scrollbar {
	width: clamp(12px, 2vw, 16px);
}

.history-section::-webkit-scrollbar-track {
	background: #2d3b48;
	border-radius: 20px;
}

.history-section::-webkit-scrollbar-thumb {
	background: #f3b35e;
	border-radius: 20px;
	border: 3px solid #7b5a2c;
}