.coffee-machine {
	flex: 0 0 auto;
	width: 440px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(90deg, #2b2b2e 0%, #4a4a50 18%, #3a3a3f 50%, #4a4a50 82%, #2b2b2e 100%);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 0 2px #5a5a60;
}

.machine-sign {
	text-align: center;
	padding: 10px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(180deg, #6b3e26 0%, #4a2817 100%);
	color: #f5e6d3;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 3px;
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
}
.machine-sign em { font-style: normal; color: #e8a65c; }

.machine-front {
	position: relative;
	background: #1c1c1f;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 420px;
	box-shadow: inset 0 0 14px rgba(0,0,0,0.7);
}

.lcd {
	background: #0e1a14;
	border: 3px solid #000;
	border-radius: 6px;
	padding: 10px 14px;
	font-family: 'Courier New', monospace;
	color: #7dffb0;
	text-shadow: 0 0 6px rgba(125,255,176,0.6);
	box-shadow: inset 0 0 12px rgba(0,0,0,0.8);
	min-height: 64px;
}
.lcd.error { color: #ff8a7a; text-shadow: 0 0 6px rgba(255,138,122,0.6); }
.lcd-line { font-size: 20px; font-weight: bold; }
.lcd-sub { font-size: 13px; margin-top: 4px; min-height: 16px; }

.drink-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.drink {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 10px 12px;
	background: linear-gradient(180deg, #3d3d42 0%, #2a2a2e 100%);
	border: 1px solid #55555c;
	border-radius: 8px;
	box-shadow: 0 3px 0 #111, inset 0 1px 1px rgba(255,255,255,0.15);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.drink:not(:disabled):hover { border-color: #e8a65c; }
.drink:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #111, inset 0 1px 1px rgba(255,255,255,0.15); }
.drink-icon { font-size: 24px; }
.drink-name { font-size: 14px; }
.drink-price { font-size: 13px; color: #e8a65c; }

.qr-drink { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.pay-logos { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
/* White tiles, as the Apple Pay mark is black and would disappear on the dark message box. */
.message-box .pay-logos img { width: auto; height: 32px; padding: 6px 10px; background: #fff; border-radius: 6px; }

/* Dispenser bay: a cup appears under the nozzle and fills while a drink is dispensing. */
.dispenser {
	position: relative;
	height: 150px;
	background: linear-gradient(180deg, #0b0b0c 0%, #1a1a1d 100%);
	border-radius: 0 0 10px 10px;
	box-shadow: inset 0 10px 20px rgba(0,0,0,0.9);
	overflow: hidden;
}
.nozzle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 36px;
	height: 18px;
	margin-left: -18px;
	background: linear-gradient(90deg, #777 0%, #bbb 50%, #777 100%);
	border-radius: 0 0 6px 6px;
}
.stream {
	position: absolute;
	top: 18px;
	left: 50%;
	width: 5px;
	margin-left: -2.5px;
	height: 0;
	background: #5a3214;
}
.cup {
	position: absolute;
	bottom: 14px;
	left: 50%;
	width: 60px;
	height: 70px;
	margin-left: -30px;
	background: #f4f1ec;
	border-radius: 0 0 14px 14px;
	overflow: visible;
	opacity: 0;
	transform: translateY(20px);
}
.coffee-fill {
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	height: 0;
	background: linear-gradient(180deg, #c9925c 0%, #6b3e1e 25%, #4a2817 100%);
	border-radius: 0 0 10px 10px;
}
.steam {
	position: absolute;
	top: -24px;
	width: 6px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	filter: blur(3px);
	opacity: 0;
}
.steam:nth-child(1) { left: 14px; }
.steam:nth-child(2) { left: 27px; animation-delay: 0.4s !important; }
.steam:nth-child(3) { left: 40px; animation-delay: 0.8s !important; }
.drip-tray {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 14px;
	background: repeating-linear-gradient(90deg, #555 0 6px, #333 6px 10px);
}

.dispenser.dispensing .cup { animation: cupIn 0.5s ease-out forwards; }
.dispenser.dispensing .stream { animation: pour 3.5s linear 0.5s forwards; }
.dispenser.dispensing .coffee-fill { animation: fill 3.5s ease-in 0.5s forwards; }
.dispenser.dispensing .steam { animation: steam 1.6s ease-out 4s infinite; }

@keyframes cupIn {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes pour {
	0% { height: 0; }
	10%, 90% { height: 80px; }
	100% { height: 0; top: 98px; }
}
@keyframes fill {
	to { height: 52px; }
}
@keyframes steam {
	0% { opacity: 0; transform: translateY(0) scaleX(1); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-20px) scaleX(1.8); }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}
.shake { animation: shake 0.35s ease-in-out; }